/* ==========================================================================
   SITA Nature Park — Design System
   Organic Biophilic · Forest green + harvest gold + heritage maroon
   ========================================================================== */

/* Figtree loads via <link> in each page head (faster than @import: the
   browser discovers it in the HTML instead of after this file downloads).

   Fraunces is SELF-HOSTED as STATIC instances (no variable axes), subset to
   latin + latin-ext. Two constraints led here, do not "optimize" this away:
   1. Google Fonts splits Fraunces into latin + latin-ext files; Chromium then
      can't position combining macrons across files - Latvian ā ī ē ū drift.
      So the files must be self-hosted with both scripts in one file.
   2. Safari mis-renders the variable file: it ignores the CSS-driven axis
      values and shows the fat black text-cut (wght 900 / opsz 9), so headings
      look much thicker than in Chrome. Static instances have exactly one set
      of glyphs - nothing to interpret, both browsers render identically.
   Cuts: 'Fraunces' 500 = quote cut (opsz 24), 'Fraunces' 600+ = heading cut
   (opsz 44), 'Fraunces Display' = hero cut (opsz 144). */
@font-face {
  font-family: 'Fraunces';
  src: url('../fonts/fraunces-text-500.woff2') format('woff2');
  font-weight: 100 500;
  font-style: normal;
  font-display: swap;
}
@font-face {
  font-family: 'Fraunces';
  src: url('../fonts/fraunces-head-600.woff2') format('woff2');
  font-weight: 600 900;
  font-style: normal;
  font-display: swap;
}
@font-face {
  font-family: 'Fraunces Display';
  src: url('../fonts/fraunces-display-600.woff2') format('woff2');
  font-weight: 100 900;
  font-style: normal;
  font-display: swap;
}

:root {
  /* Brand greens (deepened toward a premium bottle-green) */
  --forest-900: #122A1D;
  --forest-800: #19392A;
  --forest-700: #1F4631;   /* primary brand green */
  --forest-600: #2C5A41;
  --forest-500: #3F7657;
  --moss-500:   #5F9573;
  --sage-300:   #A8C4B2;
  --sage-200:   #C8DBCF;
  --sage-100:   #E3EDE7;
  --sage-line:  #8FB29B;

  /* Neutrals — warmer, calmer cream; cards a soft off-white, not stark */
  --cream:      #F4F0E6;
  --cream-200:  #EAE4D6;
  --paper:      #FCFAF5;

  /* Heritage + harvest accents */
  --maroon:     #6E2230;
  --maroon-700: #571A26;
  --gold:       #C8941F;
  --gold-600:   #A8770F;

  --ink:        #16261B;
  --ink-soft:   #3C4B40;

  --shadow-sm: 0 1px 2px rgba(22, 40, 13, .06), 0 2px 6px rgba(22, 40, 13, .05);
  --shadow-md: 0 6px 16px rgba(22, 40, 13, .08), 0 2px 4px rgba(22, 40, 13, .05);
  --shadow-lg: 0 20px 48px rgba(22, 40, 13, .14), 0 6px 14px rgba(22, 40, 13, .07);

  --radius-lg: 28px;
  --radius-md: 18px;
  --radius-sm: 16px;
  --radius-xs: 11px;
  --ease-out: cubic-bezier(.22, 1, .36, 1);
}

* { -webkit-font-smoothing: antialiased; text-rendering: optimizeLegibility; font-synthesis: none; }

html { scroll-behavior: smooth; }

body {
  font-family: 'Figtree', system-ui, -apple-system, sans-serif;
  background: var(--cream);
  color: var(--ink);
  line-height: 1.7;
  overflow-x: clip;   /* clips horizontal overflow without breaking position:sticky */
}

.font-display { font-family: 'Fraunces', Georgia, 'Times New Roman', serif; }

h1, h2, h3, h4, .font-display {
  font-family: 'Fraunces', Georgia, serif;
  letter-spacing: -0.01em;
  line-height: 1.08;
}

::selection { background: var(--moss-500); color: #fff; }

/* Tasteful film-grain / paper texture overlay --------------------------------*/
.grain::before {
  content: "";
  position: fixed; inset: 0;
  pointer-events: none; z-index: 1; opacity: .035;
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='160' height='160'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='0.9' numOctaves='3'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23n)'/%3E%3C/svg%3E");
}

/* ===== Buttons ============================================================ */
.btn {
  display: inline-flex; align-items: center; gap: .55rem;
  font-weight: 600; font-size: .95rem; letter-spacing: .01em;
  padding: .85rem 1.5rem; border-radius: 999px;
  cursor: pointer; border: 1px solid transparent;
  transition: transform .25s var(--ease-out), background-color .25s, color .25s, box-shadow .25s, border-color .25s;
  will-change: transform;
}
.btn svg { transition: transform .3s var(--ease-out); }
.btn-primary { background: var(--forest-700); color: var(--cream); }
.btn-primary:hover { background: var(--forest-800); box-shadow: var(--shadow-md); transform: translateY(-2px); }
.btn-primary:hover svg { transform: translateX(4px); }
.btn-gold { background: var(--gold); color: #2b1d00; }
.btn-gold:hover { background: var(--gold-600); color: #fff; box-shadow: var(--shadow-md); transform: translateY(-2px); }
.btn-gold:hover svg { transform: translateX(4px); }
.btn-ghost { background: transparent; color: var(--forest-800); border-color: var(--sage-300); }
.btn-ghost:hover { background: var(--sage-100); border-color: var(--moss-500); transform: translateY(-2px); }
.btn-light { background: rgba(255,255,255,.12); color:#fff; border-color: rgba(255,255,255,.4); backdrop-filter: blur(6px); }
.btn-light:hover { background: rgba(255,255,255,.95); color: var(--forest-800); transform: translateY(-2px); }

/* ===== Header / Nav ======================================================= */
.site-header {
  position: fixed; top: 0; left: 0; right: 0; z-index: 50;
  transition: background-color .4s var(--ease-out), box-shadow .4s, padding .4s;
  padding: 1.1rem 0;
  /* Always a solid cream bar so the nav reads over any hero image */
  background: rgba(250, 248, 241, .95);
  -webkit-backdrop-filter: saturate(140%) blur(12px);
  backdrop-filter: saturate(140%) blur(12px);
  box-shadow: 0 1px 0 rgba(22,40,13,.06), var(--shadow-sm);
}
.site-header.scrolled {
  background: rgba(250, 248, 241, .98);
  box-shadow: 0 1px 0 rgba(22,40,13,.08), var(--shadow-md);
  padding: .55rem 0;
}
.nav-link {
  position: relative; font-weight: 500; font-size: .92rem; color: var(--forest-800);
  padding: .35rem 0; transition: color .2s;
}
.nav-link::after {
  content:""; position:absolute; left:0; bottom:-2px; height:2px; width:0;
  background: var(--gold); transition: width .3s var(--ease-out);
}
.nav-link:hover { color: var(--forest-600); }
.nav-link:hover::after, .nav-link[aria-current="page"]::after { width:100%; }
.nav-link[aria-current="page"] { color: var(--forest-700); }

/* Brand wordmark colours */
.brand-name { color: var(--forest-700); }
.brand-sub  { color: var(--moss-500); }

/* When the hero is dark and header not scrolled, invert nav + brand text */
.site-header:not(.scrolled).on-dark .nav-link { color: rgba(255,255,255,.92); }
.site-header:not(.scrolled).on-dark .brand-name { color: #fff; }
.site-header:not(.scrolled).on-dark .brand-sub { color: var(--sage-300); }
.site-header:not(.scrolled).on-dark .nav-link:hover { color:#fff; }
.site-header:not(.scrolled).on-dark .lang-toggle { color:#fff; border-color: rgba(255,255,255,.35); }
.site-header:not(.scrolled).on-dark .hamburger span { background:#fff; }

/* Logo badge — real logo sits on a clean white chip so it reads on dark + light */
.logo-badge {
  display:inline-flex; align-items:center; justify-content:center;
  height:48px; background:#fff; border-radius:12px; padding:5px;
  box-shadow: var(--shadow-sm); border:1px solid rgba(22,40,13,.07);
  transition: height .4s var(--ease-out);
}
.logo-badge picture { display:contents; } /* keep flex sizing on the img, not the wrapper */
.logo-badge img { height:100%; width:auto; display:block; }
@media (min-width:640px){ .logo-badge { height:58px; } }
.site-header.scrolled .logo-badge { height:42px; }
@media (min-width:640px){ .site-header.scrolled .logo-badge { height:48px; } }

.lang-toggle {
  display:inline-flex; align-items:center; gap:.3rem; font-size:.8rem; font-weight:600;
  border:1px solid var(--sage-300); border-radius:999px; padding:.3rem .7rem; cursor:pointer;
  color: var(--forest-800); transition: all .2s; letter-spacing:.04em;
}
.lang-toggle:hover { border-color: var(--moss-500); background: rgba(110,154,74,.1); }
.lang-toggle .on { color: var(--gold-600); }
.site-header.on-dark:not(.scrolled) .lang-toggle .on { color: var(--gold); }

/* Mobile menu */
.hamburger { width:30px; height:22px; position:relative; cursor:pointer; }
.hamburger span {
  position:absolute; left:0; height:2px; width:100%; background: var(--forest-800); border-radius:2px;
  transition: transform .35s var(--ease-out), opacity .25s, top .35s;
}
.hamburger span:nth-child(1){ top:0 } .hamburger span:nth-child(2){ top:10px } .hamburger span:nth-child(3){ top:20px }
.hamburger.open span:nth-child(1){ top:10px; transform:rotate(45deg) }
.hamburger.open span:nth-child(2){ opacity:0 }
.hamburger.open span:nth-child(3){ top:10px; transform:rotate(-45deg) }

/* Backdrop behind the drawer */
.mobile-backdrop {
  position: fixed; inset:0; z-index:58; background: rgba(22,40,13,.55);
  opacity:0; visibility:hidden; transition: opacity .4s var(--ease-out), visibility .4s;
  -webkit-backdrop-filter: blur(2px); backdrop-filter: blur(2px);
}
.mobile-backdrop.open { opacity:1; visibility:visible; }

/* Right slide-in drawer */
.mobile-menu {
  position: fixed; top:0; right:0; height:100dvh; width:82%; max-width:340px; z-index:60;
  background: var(--cream); box-shadow: -24px 0 70px rgba(22,40,13,.35);
  display:flex; flex-direction:column; gap:0; padding: 1.3rem 1.5rem 2rem;
  transform: translateX(100%); transition: transform .42s var(--ease-out);
  overflow-y:auto; overscroll-behavior: contain;
}
.mobile-menu.open { transform: none; }

.mobile-close {
  align-self:flex-end; width:42px; height:42px; display:inline-flex; align-items:center; justify-content:center;
  border-radius:50%; color: var(--forest-700); border:1px solid var(--sage-300); background:#fff; cursor:pointer;
  transition: background .2s, border-color .2s;
}
.mobile-close:hover { background: var(--sage-100); border-color: var(--moss-500); }

.mobile-nav { display:flex; flex-direction:column; gap:.1rem; margin-top:1.1rem; }
.mobile-nav a {
  font-family:'Fraunces',serif; font-size:1.5rem; font-weight:500; color: var(--forest-800);
  padding:.62rem 0; border-bottom:1px solid var(--cream-200);
  transition: color .2s var(--ease-out), padding-left .2s var(--ease-out);
}
.mobile-nav a:hover, .mobile-nav a[aria-current="page"] { color: var(--gold-600); padding-left:.4rem; }

.mobile-menu-foot { margin-top:auto; padding-top:1.5rem; display:flex; flex-direction:column; gap:1rem; }
.mobile-menu-foot .lang-toggle { align-self:flex-start; }
.mobile-menu-foot .btn { justify-content:center; }

/* ===== Reveal-on-scroll animations ======================================== */
.reveal { opacity:0; transform: translateY(34px); transition: opacity .9s var(--ease-out), transform .9s var(--ease-out); }
.reveal.in { opacity:1; transform:none; }
.reveal-delay-1 { transition-delay:.1s } .reveal-delay-2 { transition-delay:.2s }
.reveal-delay-3 { transition-delay:.3s } .reveal-delay-4 { transition-delay:.4s }
.reveal-scale { opacity:0; transform: scale(.94); transition: opacity .9s var(--ease-out), transform .9s var(--ease-out); }
.reveal-scale.in { opacity:1; transform:none; }

/* Hero entrance */
@keyframes heroUp { from { opacity:0; transform: translateY(40px) } to { opacity:1; transform:none } }
.hero-anim > * { opacity:0; animation: heroUp 1s var(--ease-out) forwards; }
.hero-anim > *:nth-child(1){ animation-delay:.15s } .hero-anim > *:nth-child(2){ animation-delay:.32s }
.hero-anim > *:nth-child(3){ animation-delay:.49s } .hero-anim > *:nth-child(4){ animation-delay:.66s }
.hero-anim > *:nth-child(5){ animation-delay:.83s }
/* Keep hero copy legible over bright photos without darkening the image itself */
.hero-anim h1, .hero-anim p, .hero-anim .kicker { text-shadow: 0 2px 22px rgba(16,28,9,.55); }

@keyframes floatY { 0%,100% { transform: translateY(0) } 50% { transform: translateY(-14px) } }
.float-slow { animation: floatY 7s ease-in-out infinite; }

/* Marquee partners */
.marquee { display:flex; gap:4rem; width:max-content; animation: marquee 32s linear infinite; }
@keyframes marquee { from { transform:translateX(0) } to { transform:translateX(-50%) } }
.marquee-mask:hover .marquee { animation-play-state: paused; }

/* ===== Cards & misc ======================================================= */
.card {
  background: var(--paper); border-radius: var(--radius-lg); border:1px solid rgba(46,74,30,.08);
  transition: transform .4s var(--ease-out), box-shadow .4s var(--ease-out), border-color .3s;
  cursor: default;
}
/* Every card lifts gently on hover (consistent across all pages) */
.card:hover, .card-hover:hover { transform: translateY(-8px); box-shadow: var(--shadow-lg); border-color: var(--sage-300); }

.kicker {
  display:inline-flex; align-items:center; gap:.5rem; text-transform:uppercase;
  letter-spacing:.18em; font-size:.72rem; font-weight:600; color: var(--forest-600);
}
.kicker::before { content:""; width:26px; height:1.5px; background: var(--gold); display:inline-block; }
.kicker.center::after { content:""; width:26px; height:1.5px; background: var(--gold); display:inline-block; }

.blob { border-radius: 42% 58% 63% 37% / 41% 44% 56% 59%; }

/* Image hover zoom */
.img-zoom { overflow:hidden; }
.img-zoom img { transition: transform 1.1s var(--ease-out); will-change: transform; }
.img-zoom:hover img { transform: scale(1.06); }

/* Link underline reveal */
.ulink { background-image: linear-gradient(var(--gold), var(--gold));
  background-size:0% 2px; background-repeat:no-repeat; background-position:left bottom;
  transition: background-size .35s var(--ease-out); padding-bottom:2px; }
.ulink:hover { background-size:100% 2px; }

/* Section divider — organic wave */
.wave { display:block; width:100%; height:auto; }

/* Stat number */
.stat-num { font-variant-numeric: tabular-nums; }

/* ===== Scroll-expand hero ================================================= */
/* Driven by a single --p (progress 0→1) set from JS; calc() does the rest.   */
/* The hero is a tall scroll-track; .se-pin sticks for the extra height so the
   full-screen image HOLDS once expanded, then the next section rises over it. */
.se-hero { position:relative; min-height:152dvh; --p:0; background:var(--forest-900); }
.se-pin { position:sticky; top:0; height:100dvh; overflow:hidden; }
.se-bg { position:absolute; inset:0; z-index:0; opacity: calc(1 - var(--p)); }
.se-bg img { width:100%; height:100%; object-fit:cover; }
.se-bg::after { content:""; position:absolute; inset:0; background: rgba(20,40,13,.45); }
.se-stage { position:absolute; inset:0; z-index:10; display:flex; align-items:center; justify-content:center; }
/* Full-width bottom shadow on the expanded image (fades in with progress) */
.se-stage::after { content:""; position:absolute; left:0; right:0; bottom:0; height:46%; z-index:5;
  pointer-events:none; opacity:var(--p);
  background: linear-gradient(to top, rgba(16,28,9,.94) 0%, rgba(16,28,9,.52) 40%, rgba(16,28,9,0) 84%); }

/* The image stays a fixed, full-viewport layer; the centred "card" is a
   clip-path window that grows to full-bleed as --p goes 0→1. Animating
   clip-path is paint-only (no per-frame layout), so the expand stays smooth. */
.se-media {
  position:absolute; inset:0; overflow:hidden;
  clip-path: inset(
    max(0px, calc((50dvh - 200px) * (1 - var(--p))))
    max(0px, calc((50vw - 150px) * (1 - var(--p))))
    round calc(26px * (1 - var(--p)))
  );
  will-change: clip-path;
}
.se-media img { width:100%; height:100%; object-fit:cover; }
.se-media::after { content:""; position:absolute; inset:0;
  background: linear-gradient(to top, rgba(16,28,9,.78), rgba(16,28,9,.42));
  opacity: calc(.9 - var(--p) * .5); }

/* Hide the whole header during the scroll-expand intro (homepage only) */
.site-header { transition: background-color .4s var(--ease-out), box-shadow .4s, padding .4s,
  opacity .55s var(--ease-out), transform .55s var(--ease-out); }
body.se-intro { background: var(--forest-900); }
body.se-intro .site-header { opacity:0; transform:translateY(-115%); pointer-events:none; }
.se-title { position:relative; z-index:20; display:flex; flex-direction:column; align-items:center;
  gap:0; text-align:center; pointer-events:none; margin:0; }
/* Soft dark pool behind the headline so the white serif reads evenly over any backdrop */
.se-title::before { content:""; position:absolute; z-index:-1; left:50%; top:50%;
  width:122%; height:168%; transform:translate(-50%,-50%); pointer-events:none;
  opacity: calc(1 - var(--p) * 2.2);
  background: radial-gradient(58% 52% at 50% 50%, rgba(16,28,9,.66) 0%, rgba(16,28,9,.34) 46%, rgba(16,28,9,0) 76%); }
.se-word { font-family:'Fraunces Display','Fraunces',Georgia,serif; font-weight:600; color:var(--cream);
  font-size:clamp(3rem, 10vw, 8rem); line-height:.96; letter-spacing:-.03em;
  text-shadow:0 2px 30px rgba(0,0,0,.4); will-change:transform,opacity; }
.se-word-1 { transform: translateX(calc(var(--p) * -150vw)); opacity: calc(1 - var(--p) * 1.5); }
.se-word-2 { transform: translateX(calc(var(--p) *  150vw)); opacity: calc(1 - var(--p) * 1.5); }

.se-hint { position:absolute; left:50%; bottom:3.5%; transform:translateX(-50%); z-index:20;
  display:flex; flex-direction:column; align-items:center; gap:.4rem; color:var(--sage-100);
  font-size:.85rem; letter-spacing:.12em; text-transform:uppercase; font-weight:500;
  opacity: calc(1 - var(--p) * 2.4); transition:opacity .12s linear; pointer-events:none; }
.se-hint .chev { animation: seBounce 1.8s ease-in-out infinite; }
@keyframes seBounce { 0%,100%{ transform:translateY(0) } 50%{ transform:translateY(7px) } }

/* Scroll-driven reveal: starts ~45% through the expansion and eases up as the
   image fills, so it comes in slowly rather than popping at the end. */
.se-content { position:absolute; left:0; right:0; bottom:11%; z-index:20; display:flex;
  flex-direction:column; align-items:center; text-align:center; gap:1.6rem; padding:0 1.5rem;
  opacity: clamp(0, calc((var(--p) - 0.45) * 2.1), 1);
  transform: translateY(calc(34px - clamp(0, calc((var(--p) - 0.45) * 2.1), 1) * 34px));
  pointer-events:none; }
.se-content p { color:#fff; font-weight:500; text-shadow:0 2px 22px rgba(0,0,0,.7); }
.se-hero.se-expanded .se-content { pointer-events:auto; }

/* Reduced-motion / static fallback: a clean, readable hero, no scroll-jacking */
.se-hero.se-static { min-height:100dvh; }
.se-hero.se-static .se-media { clip-path: inset(
  max(0px, calc((100dvh - min(72vh,640px)) / 2))
  max(0px, calc((100vw - min(1100px,92vw)) / 2))
  round 24px); }
.se-hero.se-static .se-bg { opacity:.5; }
.se-hero.se-static .se-badge { opacity:1; }
.se-hero.se-static .se-word { transform:none; opacity:1; }
.se-hero.se-static .se-hint { display:none; }
.se-hero.se-static .se-content { opacity:1; transform:none; pointer-events:auto; }

/* Mobile tuning — shorter scroll-track so the hold isn't a long scroll-jack on a
   phone, tighter content block, and full-width tap-friendly buttons. */
@media (max-width: 768px){
  .se-hero { min-height: 134dvh; }
  .se-word { font-size: clamp(2.8rem, 13vw, 4rem); }
  .se-content { bottom: 8%; gap: 1.15rem; padding: 0 1.25rem; }
  .se-content p { font-size: 1.05rem; }
  .se-content .btn { width: 100%; max-width: 320px; }
  .se-stage::after { height: 52%; }
}

/* ===== Accessibility: focus + reduced motion ============================== */
a:focus-visible, button:focus-visible, .btn:focus-visible, .nav-link:focus-visible {
  outline: 3px solid var(--gold); outline-offset: 3px; border-radius: 6px;
}
.skip-link {
  position:absolute; left:-999px; top:0; z-index:100; background: var(--forest-800); color:#fff;
  padding:.7rem 1.1rem; border-radius:0 0 10px 0;
}
.skip-link:focus { left:0; }

@media (prefers-reduced-motion: reduce) {
  html { scroll-behavior:auto; }
  *, *::before, *::after {
    animation-duration:.001ms !important; animation-iteration-count:1 !important;
    transition-duration:.001ms !important;
  }
  .reveal, .reveal-scale, .hero-anim > * { opacity:1 !important; transform:none !important; }
}