:root{
  --accent:#a4754d;
  --header-h:90px;

  /* header theme */
  --hdr-text: #fff;          /* top (transparent) text */
  --hdr-bg-stuck: #fff;      /* background when stuck */
  --hdr-text-stuck: #000;    /* text when stuck */
  --hdr-shadow: rgba(0,0,0,.08);

  --bk-color: #f9f5f2;          /* top (transparent) text */
  --card-color: #f1eae4;          /* top (transparent) text */



}

body { background: var(--bk-color);} 

.section-bk-col { background: var(--bk-color);}/*  background:#faf8f6;  #faf8f6; 5* f9f5f2;7 #f6f1ed;10  f1eae4 15  d1baa6 50/} */


 /*button:not(.hamburger):not(#scrollTopBtn):not([aria-controls="mobilePanel"]):not(.kallm-country-flag),*/

/* === Global Button Standards (safe + responsive + exclusions) === */
a[class*="btn-"],
button:not(.hamburger):not(#scrollTopBtn):not([aria-controls="mobilePanel"]),
.btn {
  min-width: 200px;      /* comfortable desktop width */
  min-height: 44px;      /* recommended touch height */
  display: inline-flex;
  align-items: center;
  justify-content: center;
  text-align: center;
  line-height: 1.2;
  box-sizing: border-box;
}

a.active { color: var(--accent) !important; }

/* 🪶 Slightly smaller on mobile */
/*
@media (max-width: 600px) {
  a[class*="btn-"],
  button:not(.hamburger):not(#scrollTopBtn):not([aria-controls="mobilePanel"]),
  .btn {
    min-width: 90px;
    min-height: 40px;
  }
}
*/

/* Base */
*{box-sizing:border-box}
html,body{height:100%}
body{margin:0;font-family:"Inter",system-ui,Arial,sans-serif;line-height:1.4;color:#000}

p{  /* text */
    font-style: normal;
    font-weight: 300;
    font-size: 20px;
    line-height: 1.5em;
}
.lead {
    font-size: 1.2rem;
    font-weight: 300;
}

H1 { /* page title */
    font-style: normal;
    font-weight: 600;
    font-size: 25px;
    line-height: 1.0em;
}
H2 {  /* section title */
    font-style: normal;
    font-weight: 600;
    font-size: 25px;
    line-height: 1.0em;
}

H3 {  /* section title */
     font-style: normal;
    font-weight: 700;
    font-size: 3rem;
    line-height: 1.0em;
}
H4 {  /* section sub title */
    line-height: 1.0em;
    font-style: normal;
    font-weight: 200;
    font-size: 28px;
  /*  padding-bottom: 30px;*/
}
H5 {  /* section sub title */
    padding-bottom: 30px;
    line-height: 1.0em;
    font-style: normal;
    font-weight: 700;
    font-size: 35px;
    padding-bottom: 0px;
}


/* Base transparent header */
.header {
  position: fixed;
  inset: 0 0 auto 0;
  height: var(--header-h);
  display: flex;
  align-items: center;
  padding: 0 16px;
  z-index: 1000;
  background: transparent;       /* no direct background */
  color: var(--hdr-text);
  overflow: hidden;              /* hide sliding bg overflow */
  transition: color .3s ease;
}

/* Create a background layer that can slide independently */
.header::before {
  content: "";
  position: absolute;
  inset: 0;
  /*background: var(--hdr-bg-stuck, #fff);*/
  background: var(--bk-color, #fff);

  transform: translateY(-100%);     /* hidden above header */
  transition: transform 0.45s cubic-bezier(0.22, 1, 0.36, 1);
  z-index: 0;                       /* sits behind everything */
}

/* When stuck → background slides down */
.header.is-stuck::before {
  transform: translateY(0);
}

.header a,
.nav-links a,
.header .actions a{
  color: inherit ;
  text-decoration: none !important;
}

.header .nav-links a:hover,
.header .nav-links a:focus-visible{
  color: var(--accent);
}

.header a:hover,
.header a:focus-visible,
.nav-links a:hover,
.nav-links a:focus-visible {
  text-decoration: none !important;
}


/* Ensure nav content stays above the background layer */
.header * {
  position: relative;
  z-index: 1;
}
.header{
  /* existing lines... */
  --bs-link-color: currentColor;
  --bs-link-hover-color: var(--accent);
}
/* Optional: shadow appears as background settles */
.header.is-stuck {
  box-shadow: 0 4px 18px var(--hdr-shadow, rgba(0,0,0,.08));
  color: var(--hdr-text-stuck, #000);
}


.header-inner{
/*  width:100%; max-width:1200px; margin:0 auto;*/
  width:100%; max-width:90%; margin:0 auto;
  display:flex; align-items:center; gap:16px; justify-content:space-between;
}

/* Keep header action buttons WHITE on all states */
.header .actions > a[class*="btn-"],
.header .actions > a[class*="btn-"] .btn-label {
  color: #fff !important;
}

/* Make their SVGs white too (they use currentColor) */
.header .actions > a[class*="btn-"] .ico-arrow,
.header .actions > a[class*="btn-"] .ico-globe,
.header .actions > a[class*="btn-"] .ico-play {
  stroke: #fff !important;
  fill: #fff !important; /* play triangle */
}



.brand{ display:flex; align-items:center; gap:10px; text-decoration:none; }
.brand img{ width:130px; display:block; }
.brand span{ color:inherit; font-weight:600; letter-spacing:.06em; }
/* Brand logo swap (see HTML change below) */
.brand .logo-light{ display:block; }
.brand .logo-dark { display:none; }
.header.is-stuck .logo-light{ display:none; }
.header.is-stuck .logo-dark { display:block; }


/* Desktop nav (centered) */
.nav-links{
  display:flex; justify-content:center; align-items:center; gap:28px;
  flex:1; text-align:center;
}
/*
.nav-links a{ color:#fff; text-decoration:none; font-size:1.1rem; font-weight:500; opacity:.95; }
.nav-links a:hover{ opacity:1; color:var(--accent); }
*/

/* --- Animated beige underline + text color transition --- */
/* Nav links pick up header color */
/* Only non-button links inherit the header color */
.header a:not([class*="btn-"]):not(.button-link), .nav-links a:not(.button-link) {
  position: relative;
  color: inherit;
  text-decoration: none !important;
  font-size: 1.1rem;
  font-weight: 500;
  opacity: .95;
  transition: color .35s ease, opacity .35s ease;
}
.nav-links a:hover{ color:var(--accent); opacity:1; }

/* Underline (beige) */
.nav-links a::after{
  content:""; position:absolute; left:0; bottom:-6px; width:0; height:2px;
  background:var(--accent); transition:width .35s ease;
}
.nav-links a:hover::after,
.nav-links a.active::after{ width:100%; }

/* Actions adopt currentColor too if you use buttons-as-links there */
.actions{ color:currentColor; }

/* Hamburger bars track header color */
.hamburger .bar{
  background: currentColor;   /* was #fff */
}



/* Actions (right) */
.actions{ display:flex; gap:10px; align-items:center; }
.btn{ appearance:none; border:0; cursor:pointer; font-weight:700; padding:10px 16px; border-radius:6px; text-decoration:none; display:inline-block; }
.btn-ghost{ color:#fff; background:transparent; }
.btn-accent{ color:#fff; background:var(--accent); }
.btn-accent:hover{ filter:brightness(1.05); }

/* Hamburger (mobile) */
.hamburger{
  margin-left:auto; width:42px; height:42px;
  display:none; place-content:center; position:relative; border:0; background:transparent; cursor:pointer;
}
.hamburger .bar{
  position:absolute; left:10px; right:10px; height:3px; background:#fff; border-radius:999px;
  transition:transform .3s ease, opacity .3s ease;
}
 /* ✅ Force bars to track header color (white at top, black when stuck/open) */
.hamburger .bar {
  background: currentColor !important;
}

.header .hamburger { color: inherit; }

.hamburger .bar:nth-child(1){ top:14px; }
.hamburger .bar:nth-child(2){ top:20px; }
.hamburger .bar:nth-child(3){ top:26px; }
.hamburger[aria-expanded="true"] .bar:nth-child(1){ transform:translateY(6px) rotate(45deg); }
.hamburger[aria-expanded="true"] .bar:nth-child(2){ opacity:0; }
.hamburger[aria-expanded="true"] .bar:nth-child(3){ transform:translateY(-6px) rotate(-45deg); }

/* Full-screen mobile panel */
.mobile-panel{
  position:fixed; inset:0; 
  background: var(--bk-color);
  transform:translateY(-100%); transition:transform .65s ease;
  z-index:999; display:flex; flex-direction:column; justify-content:center; align-items:center;
  text-align:center; padding:0 20px;
}
.mobile-panel.open{ transform:translateY(0); }

.mobile-menu{ display:flex; flex-direction:column; align-items:center; gap:24px; margin:30px 0; margin-top:100px; }
.mobile-menu a:not(.button-link) a{ color:#000; text-decoration:none; font-size:1.4rem; font-weight:500; transition:color .25s ease; }
.mobile-menu a:hover{ color:var(--accent); }

.mobile-actions{ display:flex; flex-direction:column; gap:12px; align-items:center; justify-content:center; width:100%; max-width:280px; }
.mobile-actions .btn{ width:100%; text-align:center; }

/* --- Mobile menu beige underline + text color transition (non-buttons only) --- */
.mobile-menu a:not(.btn):not(.button-link){
position: relative;
  color: #000;
  text-decoration: none;
  font-weight: 500;
  font-size: 1.4rem;
  transition: color 0.35s ease;
}

/* underline */
.mobile-menu a:not(.btn)::after {
  content: "";
  position: absolute;
  left: 50%;
  bottom: -4px;
  width: 0%;
  height: 2px;
  background-color: #a4754d;
  transform: translateX(-50%);
  transition: width 0.35s ease;
}

/* hover & focus */
.mobile-menu a:not(.btn):hover,
.mobile-menu a:not(.btn):focus-visible {
  color: #a4754d;
}

.mobile-menu a:not(.btn):hover::after,
.mobile-menu a:not(.btn):focus-visible::after {
  width: 40%;
}

/* active state */
.mobile-menu a:not(.btn).active {
  color: #a4754d;
}
.mobile-menu a:not(.btn).active::after {
  width: 40%;
}


/* 1) Kill any underline pseudo-element on button anchors just in case */
.mobile-menu .btn-arrow4::after,
.mobile-actions a::after,
.mobile-menu a[class*="btn-"]::after {
  content: none !important;
  display: none !important;
}

/* 2) Style ONLY the top-level nav items as underlined-on-hover */
.mobile-menu > a {
  position: relative;
  color: #fff;
  text-decoration: none;
  font-weight: 500;
  font-size: 1.4rem;
  transition: color 0.35s ease;
}

/* Exclude anything that looks like a button */
.mobile-menu > a.btn,
.mobile-menu > a.btn-ghost,
.mobile-menu > a.btn-accent,
.mobile-menu > a.btn-arrow4,
.mobile-menu > a[class*="btn-"] {
  position: static; /* no underline context */
}

/* The actual underline pseudo-element (only for the true nav links) */
.mobile-menu > a:not(.btn):not(.btn-ghost):not(.btn-accent):not(.btn-arrow4):not([class*="btn-"])::after {
  content: "";
  position: absolute;
  left: 50%;
  bottom: -4px;
  width: 0%;
  height: 2px;
  background-color: #a4754d;
  transform: translateX(-50%);
  transition: width 0.35s ease;
}

/* Hover / focus states for those nav links */
.mobile-menu > a:not(.btn):not(.btn-ghost):not(.btn-accent):not(.btn-arrow4):not([class*="btn-"]):hover,
.mobile-menu > a:not(.btn):not(.btn-ghost):not(.btn-accent):not(.btn-arrow4):not([class*="btn-"]):focus-visible {
  color: #a4754d;
}

.mobile-menu > a:not(.btn):not(.btn-ghost):not(.btn-accent):not(.btn-arrow4):not([class*="btn-"]):hover::after,
.mobile-menu > a:not(.btn):not(.btn-ghost):not(.btn-accent):not(.btn-arrow4):not([class*="btn-"]):focus-visible::after {
  width: 40%;
}

/* Optional: active state */
.mobile-menu > a.active {
  color: #a4754d;
}
.mobile-menu > a.active::after {
  width: 40%;
}


/* Keep mobile dropdown buttons' text WHITE on hover/focus */
.mobile-panel .mobile-actions .btn-arrow4,
.mobile-panel .mobile-menu .btn-arrow4 {
  color: #fff !important;
}

.mobile-panel .mobile-actions .btn-arrow4:hover,
.mobile-panel .mobile-actions .btn-arrow4:focus-visible,
.mobile-panel .mobile-menu .btn-arrow4:hover,
.mobile-panel .mobile-menu .btn-arrow4:focus-visible {
  color: #fff !important; /* beats the generic mobile-menu a:hover beige */
}

/* Hero & sections */
/*
.hero{
  min-height:80vh; display:grid; place-items:center; text-align:center; color:#fff;
  background:linear-gradient(rgba(0,0,0,.35), rgba(0,0,0,.35)),
             url('https://images.unsplash.com/photo-1519681393784-d120267933ba?q=80&w=1600&auto=format&fit=crop') center/cover no-repeat;
border-radius: 0 0 50px 50px;
}
*/
.hero h1{ font-size:clamp(32px,6vw,64px); margin:0 12px; text-transform:uppercase;   }
.hero h2{ letter-spacing:none;   }

/*
@media (max-width:991px){
.hero .hero-content h1 { h1{ font-size:.7rem   }
.hero h2{ font-size:1.2rem;   }
}
*/

/*.section{ padding:72px 16px; max-width:1100px; margin:0 auto; }*/



/* ----- HERO VIDEO BACKGROUND ----- */
.hero {
  position: relative;
  height: 100vh;
  width: 100%;
  overflow: hidden;
  display: flex;
  align-items: center;
  justify-content: center;
  text-align: center;
  color: #fff;
  border-radius: 0 0 50px 50px;
}

/* --- Video background --- */
.hero .video-bg {
  position: absolute;
  inset: 0;
  z-index: 0;
  overflow: hidden;
}
.hero .video-bg video {
  width: 100%;
  height: 100%;
  object-fit: cover;
  object-position: center;
}

/* Dim overlay */
.hero .video-bg .overlay {
  position: absolute;
  inset: 0;
  background: rgba(0,0,0,0.45);
  z-index: 1;
    border-radius: 0 0 50px 50px;
    border-radius: 0 0 50px 50px;

}

/* 🔸 Soft fade-to-black at the top */
.hero::before {
  content: "";
  position: absolute;
  left: 0; right: 0; top: 0;
  height: 160px;
  background: linear-gradient(rgba(0,0,0,0.6), transparent);
  z-index: 2;
  pointer-events: none;
}

/* --- Content --- */
.hero .hero-content {
  position: relative;
  z-index: 3;
  padding: 0 0px;
  width:90%;
  margin:auto;
}
.hero .hero-content h1 {
  font-size: 100px;/*clamp(32px, 5vw, 68px);*/
  font-weight: 600;
  text-transform: none;
  /*letter-spacing: 0.06em;*/
  margin-bottom: 12px;
}
.hero .hero-content h2 {
  font-size: 30px/*clamp(32px, 5vw, 68px);*/
  font-weight: 200;
  text-transform: none;/*uppercase*/
  /*letter-spacing: 0.06em;*/
  margin-bottom: 12px;
}
 .hero-content h2 {
  font-size: 30px/*clamp(32px, 5vw, 68px);*/
  font-weight: 200;
  text-transform: none;/*uppercase*/
 /* letter-spacing: 0.06em;*/
  margin-bottom: 12px;
}
.hero .hero-content p {
  font-size: clamp(16px, 1.3vw, 20px);
  opacity: 0.9;
  margin-bottom: 24px;
}




.HeroTitle {
  font-size: 80px;/*clamp(32px, 5vw, 68px);*/
  font-weight: 600;
  text-transform: none;
  /*letter-spacing: 0.06em;*/
  margin-bottom: 12px;
  line-height:1.1em;

}

.HeroSectionTitle {
  font-size: 80px;/*clamp(32px, 5vw, 68px);*/
  font-weight: 600;
  text-transform: none;
  /*letter-spacing: 0.06em;*/
  margin-top: 150px;
  line-height:1.1em;
}

.HeroSubTitle {
  font-size: 30px;/*clamp(32px, 5vw, 68px);*/
  font-weight: 200;
  text-transform: none;/*uppercase*/
  /*letter-spacing: 0.06em;*/
  margin-bottom: 12px;

}
.HeroDesc {
  font-size: clamp(16px, 1.3vw, 20px);
  opacity: 0.9;
  margin-bottom: 24px;

}

/*
<section class="hero snap section-bk-col" id="home">
  <div class="hero-content ">
      <span class="HeroTitle" data-aos="fade-up" data-aos-delay="100"><%=TText("hero.headline1") %>  <br /><%=TText("hero.headline2") %></span>
      <span class="HeroSubTitle" data-aos="fade-up" data-aos-delay="200"><%=TText("hero.sub") %></span>
      <span class="HeroDesc" data-aos="fade-up" data-aos-delay="200"><%=TText("hero.sub") %></span>
*/
 
@media (max-width:991px){
.hero .hero-content h1 {  font-size:2.5rem ;line-height:1.0em;padding-top:50px; }
.hero .hero-content h2{ font-size:1.0rem;   }

/*
.HeroTitle {  font-size: 50px; line-height:1.0em; }
.HeroSubTitle { font-size: 20px;}
.HeroDesc { font-size: clamp(12px, 1.3vw, 20px);
*/
}


}
 
/* Buttons */
.btn-get-started {
  display:inline-block;
  padding: 14px 32px;
  border-radius:50px;
  background: var(--accent,#a4754d);
  color:#fff;
  font-weight:600;
  text-decoration:none;
  transition: background .3s ease;
}
.btn-get-started:hover { background:#b38358; }

.btn-watch-video {
  color:#fff;
  font-weight:500;
  text-decoration:none;
  transition: opacity .3s ease;
}
.btn-watch-video i {
  font-size:24px;
  margin-right:8px;
}
.btn-watch-video:hover { /*opacity:.8;*/ }

/*.section{ padding:72px 16px; max-width:100%; margin:0 auto; }*/

/*
.section h2{ margin:0 0 10px; font-size:clamp(22px,4vw,36px); }
.section p{ margin:0 0 8px; color:#333; }
*/

/* Footer */
.footer{  color:#bbb; padding:48px 16px; text-align:center; }
.footer a{ color:#fff; text-decoration:none; }

/* Responsive */
@media (max-width:991px){
  .nav-links, .actions{ display:none; }
  .hamburger{ display:grid; }
}




/* Lock body when overlay open */
.no-scroll{ overflow:hidden; height:100vh; }

/* Back to top with beige progress ring */
#scrollTopBtn{
  position:fixed; bottom:30px; right:30px; width:50px; height:50px; border-radius:50%;
  background:#000; color:#fff; border:none; cursor:pointer; display:flex; justify-content:center; align-items:center;
  z-index:2000; opacity:0; transform:scale(.7); transition:opacity .3s ease, transform .3s ease, background .3s ease; overflow:hidden;
}
#scrollTopBtn:hover{ background:var(--accent); }
#scrollTopBtn svg{ pointer-events:none; z-index:2; }

/* Beige radial fill (clear contrast) */
#scrollProgress{
  position:absolute; inset:0; border-radius:50%; z-index:1;
  background:conic-gradient(var(--accent) 0%, transparent 0%);
  transition:background .1s linear;
}

/* Visible state */
#scrollTopBtn.show{ opacity:1; transform:scale(1); }

/* Hide back-to-top under mobile panel */
.mobile-panel.open ~ #scrollTopBtn{
  opacity:0 !important; pointer-events:none !important; transition:opacity .3s ease;
}




/* Smooth anchors + prevent overlap with fixed header */
html{ scroll-behavior:smooth; }
[id]:target, .snap{ scroll-margin-top:var(--header-h); }

/* Desktop snap */
main.snap-container{ scroll-snap-type:y mandatory; }
.snap{ min-height:100svh; scroll-snap-align:start; scroll-snap-stop:always; }

/* --- Disable scroll-snap globally --- */
 
main.snap-container { scroll-snap-type: none !important; }
.snap { 
  scroll-snap-align: unset !important;
  scroll-snap-stop: normal !important;
}
/* Keep this: html{ scroll-behavior:smooth; }  → anchors remain buttery */


/* Respect reduced motion */
@media (prefers-reduced-motion:reduce){
  html{ scroll-behavior:auto; }
  main.snap-container{ scroll-snap-type:none; }
  .snap{ scroll-snap-align:none; scroll-snap-stop:normal; }
}

/* Cookie banner (kept compact) */
#cookie-banner{
  position:fixed; left:0; right:0; bottom:0; z-index:1000;
  background:#222; color:#fff;
  transform:translateY(100%); transition:transform .45s ease; box-shadow:0 -10px 30px rgba(0,0,0,.35);
}
#cookie-banner.show{ transform:translateY(0); }
.cc-inner{ max-width:1100px; margin:0 auto; padding:16px; display:flex; gap:16px; align-items:center; box-sizing:border-box; }
.cc-text{ flex:2; line-height:1.4; }
.cc-actions{ flex:1; display:flex; justify-content:flex-end; align-items:center; }
.cc-accept{ padding:10px 16px; border:0; border-radius:8px; background:var(--accent); color:#fff; font-weight:600; cursor:pointer; }
.cc-close{ position:absolute; top:8px; right:10px; background:transparent; border:0; color:#fff; font-size:18px; font-weight:800; cursor:pointer; }
@media (max-width:640px){
  .cc-inner{ flex-direction:column; align-items:stretch; }
  .cc-actions{ justify-content:flex-start; }
}




/* ===== Section System (Flexbox, % columns, mobile-first) ===== */

/* Base section shell (uses your existing .section spacing if you keep it) */
.section {
  padding: 72px 0;            /* adjust if you prefer */
  width:100%;
}

/* Inner row */
.section__row {
  --left: 50;                 /* percentage (0–100), overridden per section */
  --gap: 32px;                /* column gap */
  display: flex;
  flex-wrap: nowrap;
  align-items: center;        /* change to flex-start if needed */
  gap: var(--gap);
  max-width: 90% /*1100px;          /* or keep your existing 90% wrapper */
  margin: 0 auto;
  padding: 0 16px;            /* consistent side padding */
}

/* Columns (exact % widths that account for the gap) */
.section__col {
  min-width: 0;               /* prevent overflow with long text */
}

.section__col--left {
  flex: 0 0 calc((var(--left) * 1%) - (var(--gap) / 2));
}

.section__col--right {
  flex: 0 0 calc((100% - var(--left) * 1%) - (var(--gap) / 2));
}

/* Reverse order on desktop */
.section__row--reverse { flex-direction: row-reverse; }

/* Media: collapse to single column */
@media (max-width: 900px) {
  .section__row {
    flex-direction: column;
    gap: 24px;
  }
  .section__col--left,
  .section__col--right {
    flex: 0 1 100%;
    width: 100%;
  }
}

/* Optional image safety / polish */
.section__col img,
.section__col picture,
.section__col video {
  display: block;
  width: 100%;
  height: auto;
  border-radius: 20px;
}

/* One-column variant */
.section__row--one {
  display: block;             /* simplest and fastest */
  max-width: 800px;           /* tweak width for one-col */
  margin: 0 auto;
  padding: 0 16px;
}

.container-90 {
  width: 90%;
  max-width: 1600px;   /* optional safety cap */
  margin: 0 auto;
	padding-left:  calc(var(--bs-gutter-x, 1.5rem) * .5);
  padding-right: calc(var(--bs-gutter-x, 1.5rem) * .5);
}

.brdr { border: 0px dashed black; }
.brdr-red { border: 0px dashed red; }
.brdr-blue { border: 0px dashed blue; }
.brdr-w { border:0px solid #fff; }

 
 /* Required for ScrollSmoother containers */
#smooth-wrapper { position: fixed; inset: 0; overflow: hidden; }
#smooth-content { min-height: 100%; will-change: transform; }

/* Keep the page usable if JS fails or prefers-reduced-motion */
@media (prefers-reduced-motion: reduce) {
  #smooth-wrapper { position: static; overflow: visible; }
}



/* ===========================================
   Global Anchor Link Styles — KALLM Theme
   =========================================== */

main a {
  color: var(--accent, #a4754d);                /* base beige tone */
  text-decoration: none;                       /* modern clean look */
  transition: color 0.3s ease, opacity 0.3s ease, text-decoration 0.3s ease;
}

/* Hover + focus: slightly lighter beige */
main a:hover,
main a:focus-visible {
  color: #d0ad7a;                              /* lighter beige hover */
  text-decoration: underline;                  /* subtle indicator */
}

/* Active (pressed) state */
main a:active {
  opacity: 0.8;
}

/* When link sits in dark section (e.g., footer, hero) */
.dark a {
  color: #ffffff;                              /* white by default */
}
.dark a:hover,
.dark a:focus-visible {
  color: #d0ad7a;                              /* warm beige hover */
}

/* Accessibility focus: soft beige ring */
main a:focus {
  outline: none;
}
main a:focus-visible {
  outline: 2px solid #d0ad7a;
  outline-offset: 2px;
}


/* ===========================================
   Override global <a> link styles for buttons
   =========================================== */

a[class^="btn-"],
a[class*=" btn-"] {
  color: #fff;                    /* ensure white text */
  text-decoration: none !important;
  transition: background .35s ease, color .35s ease !important;
}

/* Disable underline + beige hover on buttons */
a[class^="btn-"]:hover,
a[class^="btn-"]:focus-visible,
a[class*=" btn-"]:hover,
a[class*=" btn-"]:focus-visible {
  text-decoration: none !important;
  color: #fff !important;          /* keep consistent with design */
}

/* Keep “active” press behavior simple */
a[class^="btn-"]:active,
a[class*=" btn-"]:active {
  opacity: 0.9;
}

/* hero */

.hero-bg {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  object-fit: cover;
}

.container-metric-cards {
  width: 100%;
  max-width: 1600px;   /* optional safety cap */
  margin: 0 auto;
padding:0;
margin-top:20px;
}
/* Keep everything on one line; allow smooth horizontal scroll if needed */
.no-wrap-row{
  overflow-x: auto;
  -webkit-overflow-scrolling: touch; /* momentum scroll on iOS */
  scrollbar-width: thin;             /* Firefox */
}

/* Each column: fixed-ish width that can shrink */
.metric-card{
  flex: 0 0 auto;                          /* don't grow or wrap */
  width: clamp(150px, 24vw, 250px);        /* 250 → 150 as space gets tight */
  min-height: 1px;                         /* layout stability */
}

	.metric-card a {text-decoration:none;}


/* Optional polish */
.no-wrap-row::-webkit-scrollbar{ height: 8px; }
.no-wrap-row::-webkit-scrollbar-thumb{ background: rgba(255,255,255,.25); border-radius: 8px; }
.no-wrap-row{ scrollbar-width:none; }
.no-wrap-row::-webkit-scrollbar{ display:none; }

 
.container-metric-cards a {text-decoration:none;}
.container-metric-cards a:hover {text-decoration:none;}


 

#stats H5 {   
    font-style: normal;
    font-weight: 400;
    font-size: 30px;
    line-height: 1.1em;
}


.img-fill {
  width: 100%;
  height: 100%;
  overflow: hidden;       /* crop instead of overflow */
}

.img-fill .img-cover {
  width: 100%;
  height: 100% !important; /* override .img-fluid height:auto */
  object-fit: cover;       /* fill area, keep proportions */
  object-position: center; /* adjust focal point if needed */
  display: block;
}

.fill-col-img {
  width: 100%;
  height: 100% !important;  /* override img-fluid’s height:auto */
  object-fit: cover;        /* fill height, keep proportions */
  object-position: center;
  display: block;
}

.screen-h {
  min-height: 80vh;                /* 80% of viewport height */
  align-items: stretch;            /* row is already display:flex via Bootstrap */
}

 
.screen-h .fill-col-img {
  width: 100%;
  height: 100% !important;
  object-fit: cover;
  object-position: center;
  display: block;
}

.stat {
  display: flex;
  flex-direction: column;
  align-items: center;
  line-height: 1.1;          /* tight spacing */
}

.stat-number {
  font-size: 3.0rem;         /* adjust as needed */
  font-weight: 700;
  margin-bottom: 02px;        /* tiny spacing */
}

.stat-label {
  font-size: 1rem;
  font-weight: 400;
  opacity: 0.85;             /* subtle light text */
}

@media (max-width: 767.98px) {
 
  #stats h5 {
	text-align:center;
  }

  #stats .stat-number {
    font-size: 2.5rem;
  }

  #stats .stat-label {
    font-size: 1rem;
  }

 H2,H3,H4 { text-align:center; }

}

/* image icons */
.img-wrap {
  position: relative;
}

/* Place the gradient OVER the image */
/* Desktop / default */
.img-wrap::after {
  content: "";
  position: absolute;
  bottom: 0;
  left: 0;
  right: 0;
  height: 300px;
  border-radius: 0 0 20px 20px;
  background: linear-gradient(
    to top,
    rgba(0, 0, 0, 0.75) 0%,
    rgba(0, 0, 0, 0.75) 30%,
    rgba(0, 0, 0, 0.45) 60%,
    rgba(0, 0, 0, 0.0) 100%
  );
  z-index: 2;
  pointer-events: none;
}

/* Put the stats ABOVE the gradient */
.stats-panel {
  position: absolute;
  bottom: 20px;
  left: 0;
  right: 0;

  z-index: 3; /* on top of gradient */
  padding: 0px 20px;

  display: flex;
  justify-content: space-between;
}

.stat-col {
  flex: 1;
  text-align: center;
  color: #fff;
  font-size: 23px;

}
  .stat-col:not(:last-child){
    border-right:1px solid #fff;
}
.stat-col i, .stat-col span {
  /*font-size: 30px;*/
   display: block;
  margin-bottom: 6px; 
}

.stat-col-footer {
  color: #000;
  font-size: 14px;
  text-align:center;

}


@media (max-width: 767.98px) {
 
  .img-wrap::after {
    height: 180px;              /* shorter overlay on mobile */
    border-radius: 0 0 20px 20px;
    background: linear-gradient(
      to top,
      rgba(0, 0, 0, 0.85) 0%,   /* a bit darker at very bottom */
      rgba(0, 0, 0, 0.65) 40%,  /* fade sooner */
      rgba(0, 0, 0, 0.0) 100%
    );
  }


  .stats-panel {
    bottom: 10px;              /* bring it up slightly */
    padding: 0 12px;
  }

  .stat-col {
    font-size: 14px;           /* smaller text */
  }

  .stat-col img {
    max-width: 40px;           /* smaller icons */
  }

  /* Often better to drop the vertical dividers on mobile */
  .stat-col:not(:last-child) {
    border-right: none;
  }

.stat-col i, .stat-col span {
  margin-bottom: 0px; 
}

.stat-col-footer {
  color: #000;
  font-size: 11px;
  text-align:center;
	}
}


/* ===== Amenities split section ===== */
#split-section {
  background: var(--bk-color);
}

#split-section .split-left {
  padding-right: 20px;
}

/* Right column: two tall, narrow images */
#split-section .split-right {
  display: flex;
  justify-content: center;
  align-items: stretch;
}

#split-section .portrait-img {
  width: 50%;
  height: 600px;
  object-fit: cover;
  border-radius: 16px;
  background: #ddd;
}

@media (max-width: 992px) {
  #split-section .split-left {
    padding-right: 0;
  }

  /* On mobile, images become full width stacked */
  #split-section .split-right {
    gap: 12px;
  }

  #split-section .portrait-img {
    height: 260px;
    width: 50%;
  }
}

/* Amenities grid cards */
.grid-container {
  display: grid;
  grid-template-columns: 65px auto;
  gap: 2px;
  /*background:#efe6dc !important;*/
  background: var(--card-color);
  background: none;
  border-radius: 20px;
  padding: 0;
}

.item4 {
  text-align: left;
  padding-right: 20px;
}
.item4 h2 {
  color: #000;
  text-align: left;
  font-size: 18px;
  padding: 3px 0 5px 0;
  margin: 0;
}
.item4 p {
  text-align: left;

  color: #000;
  font-size: 18px;
}

.p-b-20 {
  padding-bottom: 20px;
}

.gsap-amenity {
  background: #fff !important;
  opacity: 1 !important;
}

@media (max-width: 767.98px) {
  .grid-container {
    margin-bottom: 20px;
  }
}

/* ============ GALLERY BASE ============ */

#gallery img, #nestled img, #intro img {
  border-radius: 20px;
}

/* Main wrapper */
.photo-wrapper {
  position: relative;
  overflow: hidden;
  border-radius: 20px;               /* rounded image & overlays */
  transition: transform .4s ease;    /* scale the WHOLE tile */
}

/* On hover: scale wrapper (image + overlay + gradient + title) */
.photo-wrapper:hover {
  transform: scale(1.05);
}

/* Image */
.photo-wrapper img {
  display: block;
  width: 100%;
  height: 100%;
  object-fit: cover;
}

/* ============ GRADIENT + TITLE ============ */

.photo-gradient {
  position: absolute;
  left: 0;
  right: 0;
  bottom: 0;

  height: 110px;                     /* slightly taller to avoid line */
  pointer-events: none;
  border-radius: 0 0 20px 20px;

  background: linear-gradient(
    to top,
    rgba(0, 0, 0, 0.88) 0%,          /* deep dark at bottom */
    rgba(0, 0, 0, 0.55) 45%,         /* smooth mid fade */
    rgba(0, 0, 0, 0.00) 100%
  );
  z-index: 2;
}

/* Title text at bottom over gradient */
.photo-title {
  position: absolute;
  bottom: 12px;
  left: 15px;
  right: 15px;
  color: #fff;
  font-size: 1rem;
  font-weight: 600;
  z-index: 3;
  pointer-events: none;
}

/* ============ OVERLAY + ICON ============ */

/* Full overlay (for magnifying glass) */
.photo-overlay {
  position: absolute;
  inset: 0;
  background: rgba(0,0,0,0.40);
  border-radius: 20px;
  opacity: 0;
  display: flex;
  align-items: center;
  justify-content: center;
  transition: opacity .25s ease;
  text-decoration: none;
  z-index: 4;
}

/* Show overlay on hover */
.photo-wrapper:hover .photo-overlay {
  opacity: 1;
}

/* Center icon */
.photo-overlay i {
  font-size: 2.5rem;
  color: #fff;
  opacity: 0.9;
}

/* ============ TALL VARIANT ============ */

.photo-tall {
  height: 520px; /* choose your height */
}

@media (min-width: 1200px) {
  .photo-tall {
    height: 600px; /* even taller on big screens if you want */
  }
}

/* Keep images responsive inside tall wrapper */
.photo-tall img {
  height: 100%;
  width: 100%;
  object-fit: cover;
}


/* reviews */
.review-stars {
  color: #a4754d; /* your gold accent */
  font-size: 1.5rem;
  letter-spacing: 1px;
  margin-bottom: 0px;
}

.review-text {
  font-size: 0.95rem;
  line-height: 1.5;
  margin-bottom: 8px;
   color: #fff;
}

.review-meta {
  font-size: 0.85rem;
  color: #000; /*#fff; /*#777;*/
}


.review-card {
  padding: 16px 18px;
  text-align: left;
  /*box-shadow: 0 6px 18px rgba(0, 0, 0, 0.06);*/
  height: 100%;

  border-radius: 15px;
  border: 0px solid #ddd;
 /* box-shadow: 0 8px 20px rgba(0, 0, 0, 0.06);*/
 background:  var(--card-color); /*#f1eae4; /*#f6f3f1;*/
}
 

.review-card .card-body {
  padding: 0px 0px;
}

.reviews-stars-img {
  height: 18px;
  width: auto;
}

.reviews-score {
   color: #000;

  font-weight: 600;
  font-size: 1.2rem;
}

.review-text {
   color: #000;
	text-align:left;
  font-size: 0.95rem;
  line-height: 1.5;
  margin-bottom: 10px;
}

.reviews-icon-img {
  width: 20px;
  height: auto;
}

.review-name {
   color: #000;

  font-size: 0.95rem;
  margin: 0;
}

.review-date {
  font-size: 0.85rem;
   color: #000;
  margin: 0;
}
.review-author {
  display: flex;
  align-items: flex-start;
}

.review-author .meta {
  flex: 1;
}
.review-name,
.review-date {
  text-align: left !important;
}

 .review-name {
	font-size:1.0em;
	padding:0;
	margin:0 0 2px 0;
	line-height:1.0em;
}
 .review-date {
	font-size:.9em;
	padding:0;
	margin:0;
	line-height:1.0em;
	padding-bottom:10px;
}


 #reviews p {
	font-size:.9em;
	padding:0;
	margin:0 0 15px 0;
	line-height:1.0em;
}

 

.reviews-icon-img {
  width: 40px;
  object-fit: contain;
}


/* activity GRID (reuse layout, new visual) */
#activity {
 
}

.activity-grid .activity-col {
  display: flex;
}

/* Card: full-bleed image, rounded, grows with GSAP */
#activity .activity-card {
  position: relative;
  width: 100%;
  border-radius: 16px;
  overflow: hidden;
  background:#000;              /* fallback behind image */
  min-height: 300px;
  display: flex;
  align-items: flex-end;        /* text sits at bottom */
  justify-content: flex-start;
}

@media (min-width: 992px) {
  #activity .activity-card {
    min-height: 330px; /* was ~300 */
  }
}

/* The cover image */
#activity .activity-card .activity-img {
  position: absolute;
  inset: 0;                     /* top:0; right:0; bottom:0; left:0 */
  width: 100%;
  height: 100%;
  object-fit: cover;
  display: block;
  transform-origin: center center;
  transition: transform 0.6s ease;
}

/* Optional extra hover zoom on top of GSAP */
#activity .activity-card:hover .activity-img {
  transform: scale(1.04);
}

/* Dark bottom overlay (about bottom 20%, smooth fade up) */
#activity .activity-gradient {
  position: absolute;
  left: 0;
  right: 0;
  bottom: 0;

  height: 75%;  /* was 60% — now covers much higher up */
  pointer-events: none;

  background: linear-gradient(
    to top,
    rgba(0, 0, 0, 1.0)   0%,    /* fully black bottom */
    rgba(0, 0, 0, 0.95) 12%,   /* expanded black zone */
    rgba(0, 0, 0, 0.75) 28%,   /* smoother fade */
    rgba(0, 0, 0, 0.45) 48%,   /* higher fade */
    rgba(0, 0, 0, 0.15) 68%,   /* almost invisible */
    rgba(0, 0, 0, 0.00) 100%   /* fully transparent */
  );
}

/* Text block at bottom-left */
#activity .activity-text {
  position: relative;           /* sits above gradient & image */
  z-index: 2;
  padding: 16px 18px;
  text-align: left;
  width: 100%;
  color: #fff;
}

#activity .activity-title {
  font-size: 1.05rem;
  font-weight: 700;
  color: #fff;
  margin: 0 0 4px 0;
  line-height: 1.3;
}

#activity .activity-desc {
  margin: 0;
  font-size: 0.9rem;
  font-weight: 400;
  line-height: 1.3;
  opacity: 0.95;
}

/* Let GSAP grow preserve radius nicely */
.gsap-grow-img {
  border-radius: inherit;
}


/* POLICY GRID (reuse review-card styling) */
#policies {
 }

.policy-grid .policy-col {
  display: flex;
}

.policy-card {
  /* reusing .review-card base look */
  text-align: center;
 /* background:none;/*#000; /*#f6f3f1;*/
  background: var(--card-color);
  border-radius: 12px;
  border: none;
  padding: 60px 40px;
  width: 100%;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: space-between;
}

.policy-icon-wrap {
  display: flex;
  align-items: center;
  justify-content: center;
  margin-bottom: 14px;
}

.policy-icon {
  width: 130px;
  /*height: 48px;*/
  object-fit: contain;
}

.policy-title {
  font-size: 1.3rem;
  font-weight: 600;
  color: #000;
  margin: 0;
  line-height: 1.3;
}

.checkin-checkout-box {
  display: flex;
  align-items: center;
  /*background:#000; /*#f6f3f1;*/
  background:var(--card-color);
  border-radius: 14px;
  padding: 20px 25px;
  max-width: 500px;
  margin: auto;
}

.check-item {
  flex: 1;
  text-align: center;
}

.check-title {
  font-size: 1.2rem;
  font-weight: 400;
  margin: 0 0 4px 0;
  color: #000;
}

.check-time {
  font-size: 2.0rem;
  font-weight: 700;
  margin: 0;
  color: #000;
}

/* 🔥 FIXED DIVIDER — always visible */
.check-divider {
  width: 2px;
  background: #000;
  align-self: stretch;      /* make it fill container vertically */
  margin: 0 24px;
  position: relative;
}

/* 🔥 Add top/bottom padding so the line does NOT touch edges */
.check-divider::before {
  content: "";
  position: absolute;
  top: 10%;                 /* adjust gap from top */
  bottom: 10%;              /* adjust gap from bottom */
  left: 0;
  right: 0;
  background:#000;
  border-radius: 4px;
}

/* sections */
.section-three-col {
    padding: 6rem 0;
    background: #fff;
}

.three-col-item {
    text-align: center;
    opacity: 0;
    transform: translateY(30px);
}

.three-col-img-wrapper {
    width: 100%;
    aspect-ratio: 4/3;
    overflow: hidden;
    border-radius: 1.3rem;
    box-shadow: 0 12px 38px rgba(0,0,0,0.06);
}

.three-col-img {
    width: 100%;
    height: 100%;
    object-fit: cover;
}

.three-col-title {
    margin-top: 1rem;
    font-size: 1.1rem;
    font-weight: 600;
    color: #333;
}


/* LANGUAGE TOGGLE – CLEAN RESET */

/* Outer frame */
.lang-toggle {
  position: relative;
  display: inline-grid;
  grid-template-columns: 1fr 1fr;
  align-items: center;
  justify-items: center;

  border: 3px solid #000;       /* ≈ half of a “thick” 3px outline */
  border-radius: 999px;
  padding: 6px;                   /* space between outline and circle */
  background: var(--accent, #a4754d);  /* brown inside */
	background:#000; 
  width: 110px;
  height: 54px;                   /* ~10px taller than typical 44px */
  cursor: pointer;
  user-select: none;
}

/* Labels */
.lang-label {
  font-weight: 600;
  font-size: 1rem;
  color: #fff !important;         /* force white text */
  z-index: 2;
   pointer-events: auto; 
  text-align: center;
  padding-right:6px;
}
.lang-label-en {  padding-right:6px; }
.lang-label-fr {  padding-left:11px; }

/* Black circle puck */
.lang-slider {
  position: absolute;
  width: 40px;                    /* increased by 6px from ~34 */
  height: 40px;                   /* same as width → true circle */
  border-radius: 50%;
  background: #000;
  background: var(--accent, #a4754d);  /* brown inside */

  top: 50%;
  left: 25%;                      /* centered under EN by default */
  transform: translate(-50%, -50%);
  z-index: 1;
  transition: left 0.25s ease;
}

/* When FR is active → move circle under FR */
.lang-toggle.fr-active .lang-slider {
  left: 75%;                      /* centered under FR */
}

/* ==============================================
   KALLM Unified Button System
   (btn-arrow4 & btn-globe share identical sizing)
   ============================================== */

:root {
  --accent: #a4754d;
}

/* ====== Base Shared Button Geometry ====== */
.btn-arrow4,
.btn-globe {
  --px: 26px;      /* horizontal padding */
  --py: 14px;      /* vertical padding */
  --gap: 12px;     /* gap between label & icon */
  --dot: 40px;     /* icon circle diameter */
  --reserve: calc(var(--dot) + var(--gap));

  position: relative;
  display: inline-flex;
  align-items: center;
  justify-content: center;

  padding: var(--py) calc(var(--px) + var(--reserve) / 2);
  padding-top:15px;
  padding-bottom:15px;
  border-radius: 999px;
  background: var(--accent);
  color: #fff;
  font-size: 20px;
  font-weight: 600;
  line-height: 1;
  text-decoration: none;
  white-space: nowrap;
  transition: background 0.35s ease, color 0.35s ease;
}

.btn-arrow4 .btn-label,
.btn-globe .btn-label {
  position: relative;
  z-index: 1;
}

/* Shared hover lift */
@media (hover:hover) {
  .btn-arrow4:hover,
  .btn-globe:hover {
    background: #b38358;
    filter: brightness(1.05);
  }
}

/* Disable transitions when GSAP is active */
.use-gsap .btn-label,
.use-gsap .btn-ico,
.use-gsap .ico-arrow,
.use-gsap .ico-globe {
  transition: none !important;
}

/* ====== Icon Circle (shared foundation) ====== */
.btn-arrow4 .btn-ico,
.btn-globe .btn-ico {
  position: absolute;
  right: calc(var(--px) - 12px);
  width: var(--dot);
  height: var(--dot);
  border-radius: 50%;
  background: #000;
  display: grid;
  place-items: center;
  pointer-events: none;
  transform: scale(0);
  opacity: 0;
  will-change: transform, opacity;
}

/* ====== Arrow Button ====== */
.btn-arrow4 .ico-arrow {
  width: 22px;
  height: 22px;
  stroke: #fff;
  stroke-width: 3.2;
  fill: none;
  transform: translate3d(-12px, 0, 0);
  opacity: 0;
  will-change: transform, opacity;
}

/* ====== Globe Button ====== */
.btn-globe .ico-globe {
  width: 22px;
  height: 22px;
  color: #fff;
  transform: translateX(-12px);
  opacity: 0;
  will-change: transform, opacity;
}

/* ====== Respect reduced motion ====== */
@media (prefers-reduced-motion: reduce) {
  .btn-arrow4,
  .btn-globe {
    padding-right: calc(var(--px) + var(--reserve));
  }

  .btn-arrow4 .btn-ico,
  .btn-globe .btn-ico {
    transform: scale(1);
    opacity: 1;
  }

  .ico-arrow,
  .ico-globe {
    transform: translateX(0);
    opacity: 1;
  }
}


/* ===== Watch Video Button (matches your other GSAP buttons) ===== */
.btn-watch4{
  --accent:#a4754d;
  --px: 26px;      /* horizontal padding */
  --py: 14px;      /* vertical padding */
  --gap: 12px;     /* gap between label & circle */
  --dot: 40px;     /* icon circle diameter */
  --reserve: calc(var(--dot) + var(--gap));

  position: relative;
  display: inline-flex;
  align-items: center;
  justify-content: center;

  padding: var(--py) calc(var(--px) + var(--reserve)/2);
  padding-top:15px;
  padding-bottom:15px;

  border-radius: 999px;
  background: var(--accent);
  color:#fff;
  font-weight: 600;
  line-height: 1;
  text-decoration: none;
  white-space: nowrap;
  transition: background .35s ease, color .35s ease;
}

/* keep hover feel consistent */
@media (hover:hover){
  .btn-watch4:hover{ background:#b38358; filter:brightness(1.05); }
}

.use-gsap .btn-watch4 .btn-label,
.use-gsap .btn-watch4 .btn-ico,
.use-gsap .btn-watch4 .ico-play { transition: none !important; }

.btn-watch4 .btn-label{ position: relative; z-index: 1; }

.btn-watch4 .btn-ico{
  position: absolute;
  right: calc(var(--px) - 12px);
  width: var(--dot);
  height: var(--dot);
  border-radius: 50%;
  background: #000;                 /* black disk behind the play-in-circle */
  display: grid;
  place-items: center;
  pointer-events: none;
  transform: scale(0);
  opacity: 0;
}

.btn-watch4 .ico-play{
  width: 22px;
  height: 22px;
  color:#fff;                        /* circle outline & triangle inherit */
  transform: translateX(-12px);      /* slides in */
  opacity: 0;
}

/* Respect reduced motion */
@media (prefers-reduced-motion: reduce){
  .btn-watch4{ padding-right: calc(var(--px) + var(--reserve)); }
  .btn-watch4 .btn-ico{ transform: scale(1); opacity: 1; }
  .btn-watch4 .ico-play{ transform: translateX(0); opacity: 1; }
}



/* ===========================================
   Global button theme controls
   =========================================== */
:root{
  --accent: #a4754d;       /* your beige */
  --btn-bg: #000000;       /* default button background (black) */
  --btn-bg-hover: var(--accent);  /* hover background (beige) */
  --btn-fg: #ffffff;       /* button text color */
  --btn-ico-bg: #000000;   /* icon circle (keeps black) */
}

  
/* Apply to all your custom buttons */
.btn-watch4,
.btn-arrow4,
.btn-globe {
  background: var(--btn-bg) !important;
   color: #fff !important; /* always white text */
}

.actions .btn-arrow4,
.actions .btn-globe,
.actions .btn-watch4 {
  color: #fff;
}

/* Keep the right-hand icon circle black */
.btn-watch4 .btn-ico,
.btn-arrow4 .btn-ico,
.btn-globe .btn-ico {
  background: var(--btn-ico-bg) !important;
}

/* Hover → button turns beige; text stays readable */
@media (hover:hover){
	.btn-watch4:hover,
  .btn-arrow4:hover,
  .btn-globe:hover,
  .btn-watch4:focus-visible,
.btn-arrow4:focus-visible,
  .btn-globe:focus-visible {
    background: var(--btn-bg-hover) !important;
    color: var(--btn-fg) !important; /* keep white text */
  }
}


/* ========= External / New Window Button ========= */

.btn-external4 {
  --px: 20px;
  --py: 14px;
  --gap: 10px;
  --dot: 40px;
  --reserve: calc(var(--dot) + var(--gap));

  position: relative;
  display: inline-flex;
  align-items: center;
  justify-content: center;

  padding: var(--py) calc(var(--px) + var(--reserve) / 2);
  padding-top: 15px;
  padding-bottom: 15px;

  border-radius: 999px;
  background: #000;
  color: #fff;
  font-size: 20px;
  font-weight: 600;
  line-height: 1;
  text-decoration: none;
  white-space: nowrap;
  transition: background 0.35s ease, color 0.35s ease;
}

.btn-external4 .btn-label {
  position: relative;
  z-index: 1;
}

.btn-external4 .btn-ico {
  position: absolute;
  right: calc(var(--px) - 12px);
  width: var(--dot);
  height: var(--dot);
  border-radius: 50%;
  background: #000;
  display: grid;
  place-items: center;
  pointer-events: none;
  transform: scale(0);
  opacity: 0;
  will-change: transform, opacity;
}

.btn-external4 .ico-window {
  width: 22px;
  height: 22px;
  color: #fff;
  transform: translate3d(-10px, 4px, 0) rotate(-18deg);
  opacity: 0;
  will-change: transform, opacity;
}

@media (hover:hover) {
  .btn-external4:hover {
    background: #b38358;
    filter: brightness(1.05);
  }
}

.use-gsap .btn-external4 .btn-label,
.use-gsap .btn-external4 .btn-ico,
.use-gsap .btn-external4 .ico-window {
  transition: none !important;
}

@media (prefers-reduced-motion: reduce) {
  .btn-external4 {
    padding-right: calc(var(--px) + var(--reserve));
  }
  .btn-external4 .btn-ico {
    transform: scale(1);
    opacity: 1;
  }
  .btn-external4 .ico-window {
    transform: translate3d(0, 0, 0) rotate(0deg);
    opacity: 1;
  }
}

/* ===== ULTRA-COMPACT MOBILE BUTTON ===== */
@media (max-width: 575.98px) {

  .btn-external4 {
    font-size: 16px !important;      /* smaller text */
    --px: 6px !important;             /* VERY small padding to reduce width */
    --gap: 4px !important;            /* tighter distance between text + circle */
    --dot: 34px !important;           /* KEEP circle size the same */
    --reserve: calc(var(--dot) + var(--gap)) !important;

    padding-top: 10px !important;
    padding-bottom: 10px !important;
  }

  /* Move the circle inward so button shrinks even more */
  .btn-external4 .btn-ico {
    right: 6px !important;
  }
}






/* ===== Pre-Footer Panel (Desktop & Mobile safe) ===== */
.cta-panel{
  position: relative;
  min-height: 100vh;
   isolation: isolate;
  z-index: 1;  /* keep it above what comes before; footer can sit naturally after */
}

/* Media layer */
.cta-media{ position: absolute; inset: 0; }
.cta-media img{
  position: absolute;
  left: 50%;
  bottom: 0;
  width: min(1200px, 100%);
  height: auto;
  transform: translateX(-50%) scale(0.85); /* desktop start */
  transform-origin: 50% 100%;
  will-change: transform;
  z-index: 0;
  border-radius:40px;  
}
/*
.cta-media .shade{
  position: absolute; inset: 0;
  background: linear-gradient(to top, rgba(0,0,0,.55), rgba(0,0,0,.15) 60%, transparent);
  z-index: 1;
}
*/

/* Text layer (desktop: absolute center end position) */
.cta-content{
  position: absolute;
  left: 50%; top: 50%;
  transform: translate(-50%, 40%);  /* start below center; animation moves to -50% on Y */
  opacity: 0;
  text-align: center;
  color: #fff;
  width: min(900px, 88vw);
  will-change: transform, opacity;
  z-index: 2;
}
.cta-content h2{ margin: 0 0 8px; font-size: clamp(28px, 4vw, 48px); letter-spacing: .02em; }
.cta-content p{ margin: 0 0 18px; font-size: clamp(14px, 1.4vw, 18px); opacity: .9; }

  .cta-content img{

	width:150px;
	padding:70px 0 50px 0;
}


#cta-panel H2{
    color: #fff;
    line-height: 1.0em;
    font-style: normal;
    font-weight: 700;
    font-size: 50px;
	margin-bottom:20px;
}
#cta-panel H3{ 
    color: #fff;
    font-style: normal;
    font-weight: 700;
    font-size: 25px;
    line-height: 1.0;
    letter-spacing: 0.5em; 
	margin-top:40px;
}

/* ---------- Mobile overrides: NO PIN, image scrolls normally, no clipping ---------- */
/* Mobile: image fills the viewport height, scrolls normally */
@media (max-width: 991px){
  .cta-panel{
    min-height: unset;
    overflow: visible;
    position: relative;
  }

  /* Shrink image frame: about 60–70% of viewport height */
  .cta-media{
    position: relative;
    inset: auto;
    height: 50vh;           /* was 100vh – adjust to your taste (55–70vh range works well) */
    z-index: 0;
  }

  .cta-media img{
    position: absolute;
    inset: 0;
    width: 100%;
    height: 100%;
    object-fit: cover;
    object-position: center bottom;
    transform: none !important;
    display: block;
	  border-radius:0;  

  }

  .cta-media .shade{ position: absolute; inset: 0; z-index: 1; }

  .cta-content{
    position: absolute;
    left: 50%; top: 40%;
    transform: translate(-50%, -50%);
    opacity: 0;
    z-index: 2;
    pointer-events: none;
    width: min(900px, 88vw);
    text-align: center;
  }

  .cta-content img{

	width:100px;
	padding:10px 0 0px 0;
}


  .cta-panel::after{
    content: "";
    display: block;
    height: 14vh;            /* smaller spacer since section is shorter */
  }

  #cta-panel H2{ font-size: 30px; }
  #cta-panel H3{ font-size: 15px; }
}


/* footer */
/* Base footer spacing */
.footer {
  padding-top: 40px;
  padding-bottom: 40px;
}

/* Let Bootstrap handle stacking on small screens.
   We only force % widths on large viewports. */
@media (min-width: 992px) {
  .footer-row {
    display: flex;
    flex-wrap: wrap;
  }

  .footer-col {
    display: flex;
  }

  .footer-inner {
    width: 100%;
  }

  .footer-col-1 {
    flex: 0 0 40%;
    max-width: 40%;
	text-align:left;
  }

  .footer-col-2 {
    flex: 0 0 24%;
    max-width: 24%;
  }

  .footer-col-3,
  .footer-col-4 {
    flex: 0 0 18%;
    max-width: 18%;
  }
}

#site-footer { color:#000; }
#site-footer p {
 
 font-size:1.0rem;
 color:#000;
 }
 #site-footer h4 {
 font-size:1.5rem;
font-weight:600;
}


		.footer-col { padding-right:20px; }

	@media (max-width: 1199px) {
		.footer-col { text-align:left; }
	   .icon-container { margin-left:0px; }

		#footer H4 { 	margin:50px 0 20px 0; 	}
	}

   .icon-container {
      display: flex;
      align-items: center;
      padding: 0px;
      font-family: Arial, sans-serif;
      max-width: 600px;
	  margin-bottom:20px;
	  border:0px dashed red;
    }

    .icon-col-left {
      flex: 0 0 60px; /* fixed width */
      text-align: center;
      padding: 5px;
      font-size: 38px;
    }

    .icon-col-right {
      text-align: left;
      display: flex;
      flex-direction: column; /* stack title and description vertically */
      justify-content: center;
      padding-left: 0px;
    }

    .icon-title {
      font-weight: bold;
      font-size: 1.1em;
	  line-height:1.0em;
      margin-bottom: 0px;
    }

    .icon-description {
      font-size: 0.9em;
     }

	#site-footer a {
	  color: var(--accent, #000d);                /* base beige tone */
	  color: #000;                /* base beige tone */
	  text-decoration: none;                       /* modern clean look */
	  transition: color 0.3s ease, opacity 0.3s ease, text-decoration 0.3s ease;
	}

	/* Hover + focus: slightly lighter beige */
	#site-footer a:hover, #footer a:focus-visible {
	  color: #a4754d;                              /* lighter beige hover */
	  text-decoration: underline;                  /* subtle indicator */
	}

	/* Active (pressed) state */
	#site-footer a:active {
	  opacity: 0.8;
	}

	.footer-copyright {
		text-align:left;
		padding:20px 0 10px 0;
		font-weight: 400;
		font-size: 20px;
	}

	.footer-copyright-tag {
		padding:20px 0 10px 0;
	   line-height: 1.0em;
		font-style: normal;
		font-weight: 700;
		font-size: 30px;
		text-align:right
	}

	@media (max-width: 1199px) {
		.footer-copyright {text-align:center;  margin:0;}
		.footer-copyright-tag {text-align:center; margin:0;}
		.footer-copyright-panel { margin:0; }
	}


	/* === Video Modal === */
.video-modal {
  position: fixed;
  inset: 0;
  z-index: 9998;
  display: none;              /* hidden by default */
  align-items: center;
  justify-content: center;
}

.video-modal.is-open {
  display: flex;
}

/* Dark backdrop */
.video-modal-backdrop {
  position: absolute;
  inset: 0;
  background: rgba(0, 0, 0, 0.6);
}

/* Dialog */
.video-modal-dialog {
  position: relative;
  z-index: 1;
  max-width: 900px;
  width: 90%;
  background: #000;
  border-radius: 18px;
  box-shadow: 0 18px 60px rgba(0, 0, 0, 0.55);
  overflow: hidden;
}

/* Inner padding around video (optional) */
.video-modal-inner {
  padding: 0;
}

/* Close button */
.video-modal-close {
  position: absolute;
  top: 10px;
  right: 14px;
  z-index: 2;
  border: none;
  background: transparent;
  color: #fff;
  font-size: 2rem;
  line-height: 1;
  cursor: pointer;
  text-shadow: 0 2px 10px rgba(0, 0, 0, 0.8);
}

/* Ensure iframe fills the ratio wrapper */
.video-modal .ratio {
  margin: 0;
}
.video-modal iframe {
  border: 0;
}

/* Slightly tighter on mobile */
@media (max-width: 576px) {
  .video-modal-dialog {
    width: 94%;
    border-radius: 14px;
  }
  .video-modal-close {
    top: 6px;
    right: 10px;
    font-size: 1.8rem;
  }
}

.text-right {
    text-align: right !important;
}

.hero-content{
  margin-top: 100px !important;
}

  /* Keep 3 columns at ALL breakpoints */
  .k3-row {
    --k3-max: 250px;
  }
  .k3-row > .k3-col {
    flex: 0 1 var(--k3-max);   /* can shrink, prefers up to 250px */
    max-width: var(--k3-max);
    min-width: 0;             /* allows shrinking without overflow */
  }

.k3-col {
  display: flex;
  align-items: center;      /* vertical center */
  justify-content: center;  /* horizontal center */
  padding:0;
}
  /* optional: make them spread nicely if there's extra space */
  .k3-row {
    justify-content: center;  /* center the 3 cols if row is wider */
  }

  /* optional styling for demo boxes */
  .k3-box {
    padding: 12px;
    text-align: center;
  }

.hero-stat {
    color: #ffffff;
    font-size: 40px;
	line-height:1.0rem;
    margin: 10px 0 0 0;
    font-weight: 800;
    padding: 0;
}
.hero-stat-label {
    color: #ffffff;
    font-size: 20px;
	line-height:1.0rem;
    font-weight: 400;
    margin: 15px 0 0 0;
    padding: 0;
}

.k3-box a,
.k3-box a:hover,
.k3-box a:focus,
.k3-box a:active,
.k3-box a:visited {
  text-decoration: none !important;
  border-bottom: 0 !important;
  background-image: none !important;
  box-shadow: none !important;
  outline: none;            /* optional: remove focus ring */
  display: block;
}

.k3-box a * {
  text-decoration: none !important;
}

.k3-box a img {
  border: 0 !important;     /* linked-image border (old behavior) */
}

@media (max-width: 480px) {

.HeroTitle {

	    font-size: 40px;
        line-height: 1.0em;
}
  .k3-box {
    padding: 4px;
  }
  .hero-stat {
    margin: 10px 0 0 0;
	}
	.hero-stat-label {
		margin: 20px 0 0 0;
	}

}

/* ===== Learn More button (ENTIRE CSS, clean, fixed-size, smooth, black->brown hover) ===== */

/* HTML expected:
<a class="btnLearn" href="#">
  <span class="btnLearn__label">Learn more</span>
  <span class="btnLearn__dot" aria-hidden="true">
    <svg class="btnLearn__icon" viewBox="0 0 24 24" aria-hidden="true">...</svg>
  </span>
</a>
*/

.button-link{
  /* sizing */
  --px: 26px;
  --py: 14px;
  --dot: 40px;
  --gap: 12px;
  --reserve: calc(var(--dot) + var(--gap));

  /* motion */
  --nudge: -20px;                 /* label shift left on hover (tune -6 to -14) */
  --restOffset: calc(var(--reserve) / 2); /* keeps label centered at rest */

  /* colors */
  --btn-bg: #000;                       /* idle black */
  --btn-bg-hover: #a4754d;/* hover brown (fallback) */
  --btn-fg: #fff;                       /* text/icon white */
  --dot-bg: #000;                       /* dot black */
  --dot-fg: #fff;                       /* icon inside dot white */

  position: relative;
  display: inline-flex;
  align-items: center;
  justify-content: center;

  /* FIXED SIZE: reserve space for dot from the start (no expansion ever) */
  padding: var(--py) calc(var(--px) + var(--reserve)) var(--py) var(--px);

  border-radius: 999px;
  border: 0;

  background: var(--btn-bg);
  color: var(--btn-fg);
  text-decoration: none;

  cursor: pointer;
  user-select: none;
  -webkit-tap-highlight-color: transparent;
}

/* lock text color for ALL states (prevents header/nav inherit rules from winning) */
.button-link,
.button-link:link,
.button-link:visited,
.button-link:hover,
.button-link:active,
.button-link:focus,
.button-link:focus-visible{
  color: var(--btn-fg) !important;
  text-decoration: none !important;
}

.button-link{
  font-size: 1rem; /* desktop baseline */
  font-weight: 600;
}

/* accessibility focus */
.button-link:focus-visible{
  outline: 2px solid var(--btn-fg);
  outline-offset: 3px;
}

.button-link__label{
  display: inline-block;
  /* Center at rest even though right side has reserved space */
  transform: translateX(var(--restOffset));
  will-change: transform;
}

.button-link__dot{
  position: absolute;
  right: calc(var(--px) - 8px);
  width: var(--dot);
  height: var(--dot);
  border-radius: 999px;

  display: grid;
  place-items: center;

  background: var(--dot-bg);
  color: var(--dot-fg); /* drives svg stroke via currentColor */

  transform: scale(0);
  opacity: 0;
  will-change: transform, opacity;
}

.button-link__icon{
  width: 18px;
  height: 18px;
  display: block;

  transform: translateX(-16px);
  opacity: 0;
  will-change: transform, opacity;
}

@media (prefers-reduced-motion: no-preference){
  .button-link{
    transition: background 0.40s ease;
  }
  .button-link__label{
    transition: transform 0.55s cubic-bezier(.2,.8,.2,1);
  }
  .button-link__dot{
    transition:
      transform 0.55s cubic-bezier(.2,.8,.2,1),
      opacity 0.55s cubic-bezier(.2,.8,.2,1);
  }
  .button-link__icon{
    transition:
      transform 0.65s cubic-bezier(.2,.8,.2,1),
      opacity 0.65s cubic-bezier(.2,.8,.2,1);
  }
}


/* ACTIVE on desktop: hover/focus */
@media (hover:hover){
  .button-link:hover,
  .button-link:focus-visible{
    background: var(--btn-bg-hover);
  }

  .button-link:hover .button-link__label,
  .button-link:focus-visible .button-link__label{
    /* moves label slightly LEFT while keeping overall feel centered */
    transform: translateX(calc(var(--restOffset) + var(--nudge)));
  }

  .button-link:hover .button-link__dot,
  .button-link:focus-visible .button-link__dot{
    transform: scale(1);
    opacity: 1;
  }

  .button-link:hover .button-link__icon,
  .button-link:focus-visible .button-link__icon{
    transform: translateX(0);
    opacity: 1;
  }
}

/* ACTIVE on touch: JS toggles .is-touch */
.button-link.is-touch{
  background: var(--btn-bg-hover);
}
.button-link.is-touch .button-link__label{
  transform: translateX(calc(var(--restOffset) + var(--nudge)));
}
.button-link.is-touch .button-link__dot{
  transform: scale(1);
  opacity: 1;
}
.button-link.is-touch .button-link__icon{
  transform: translateX(0);
  opacity: 1;
}

/* Mobile menu ONLY: force button text/icon to white (no desktop impact) */
@media (max-width: 991px){
  .mobile-menu .button-link,
  .mobile-menu .button-link__label,
  .mobile-menu .button-link__dot,
  .mobile-menu .button-link__icon{
    color: #fff !important;
  }

  /* also lock background so menu link styles can’t paint it white */
  .mobile-menu .button-link{
    background: #000 !important;
    text-decoration: none !important;
  }
  .mobile-menu .button-link:hover,
  .mobile-menu .button-link:focus-visible,
  .mobile-menu .button-link.is-touch{
    background: #a4754d !important;
  }
  .button-link{
    font-size: 1rem; /* or 0.9rem if you want tighter */
  }

}

@media (max-width: 991px) {
  .HeroTitle {
    font-size: 40px;
    line-height: 1.0em;
  }
}


H1 { /* page title */
    font-style: normal;
    font-weight: 700;
    font-size: 25px;
    line-height: 1.0em;
	/*margin-bottom:15px;*/
}
H2 {  /* section title */
    font-style: normal;
    font-weight: 700;
    font-size: 25px;
  /*  line-height: 1.0em;*/
/*	margin-bottom:20px;*/
}

H3 {  /* section title */
     font-style: normal;
    font-weight: 800;
    font-size: 60px;
    line-height: 1.0em;
}
H4 {  /* section sub title */
    line-height: 1.0em;
    font-style: normal;
    font-weight: 200;
    font-size: 25px;
     padding: 20px 0 0px 0;
}
H5 {  /* section sub title */
    padding-bottom: 30px;
    line-height: 1.0em;
    font-style: normal;
    font-weight: 700;
    font-size: 35px;
    padding-bottom: 0px;
}

p{  /* text */
    font-style: normal;
    font-weight: 300;
    font-size: 22px;
    line-height: 1.5em;
}

.price-badge {
  position: absolute;
  top: 16px;
  right: 16px;
  display: flex;
  align-items: baseline;
  gap: 4px;
  padding: 8px 14px;
  background: rgba(0, 0, 0, 0.55);
  backdrop-filter: blur(6px);
  color: #fff;
  border-radius: 999px;
  font-size: 0.95rem;
  line-height: 1;
}

.price-badge strong {
  font-size: 2.5rem;
  font-weight: 600;
}

.price-badge span {
  font-size: 0.85rem;
  opacity: 0.85;
}

.stat-line { gap: 10px; }
.stat-ico  { width: 100px;  object-fit: contain; opacity: .9; flex: 0 0 auto; }
.stat-copy { line-height: 1.1; }
.stat-title { font-weight: 700; font-size: 60px; }
.stat-desc  { font-size: 25px; opacity: .85; }

@media (max-width: 991px) {

	p{  /* text */
			text-align:center;
	}


	H1 { /* page title */
		font-weight: 700;
		font-size: 20px;
		line-height: 1.0em;
		margin-bottom:10px;
		text-align:center;
	}
	H2 {  /* section title */
		font-weight: 600;
		font-size: 20px;
		line-height: 1.0em;
	}

	H3 {  /* section title */
		font-weight: 800;
		font-size: 50px;
		line-height: 1.0em;
	}
	H4 {  /* section sub title */
		line-height: 1.0em;
		font-style: normal;
		font-weight: 200;
		font-size: 25px;
		padding-bottom: 0px;
	}

	.price-badge strong {
	  font-size: 1.2rem;
	}

	.stat-title { font-weight: 700; font-size: 50px; }
	.stat-desc  { font-size: 18px; opacity: .85; }

  .cta-content img{
	width:80px;
	padding:20px 0 30px 0;
	}

	.section {padding-bottom:0px !important; }

}

/* Section-1: match image height to left column (override align-items-center) */
#section-1 > .container > .row{
  align-items: stretch !important;
}

/* Right column must stretch */
#section-1 > .container > .row > .col-md-6.d-flex{
  align-self: stretch;
}

/* Wrapper must stretch to full column height */
#section-1 .img-wrap{
  position: relative;
  width: 100%;
  flex: 1 1 auto;
  height: auto; /* height comes from flex stretch */
}

/* Image fills wrapper */
#section-1 .section-img{
  width: 100%;
  height: 100%;
  object-fit: cover;
  display: block;
}