/* ============================================================
   KOZAK HOMESTEAD — Family Farm Sanctuary
   Palette pulled from the logo: warm bark brown, gold ochre, cream
   ============================================================ */

:root{
  /* Brand */
  --bark:        #463F36;   /* deep warm brown (logo figure) */
  --bark-deep:   #2C271F;   /* near-black brown */
  --bark-soft:   #5C5346;
  --gold:        #A98C5D;   /* ochre accent (logo leaves/word) */
  --gold-deep:   #8A6F45;
  --gold-soft:   #C7AC7E;
  --cream:       #EAE6E0;   /* logo background */
  --cream-2:     #F2EEE7;
  --cream-3:     #FBF9F5;
  --paper:       #FFFFFF;

  /* Semantic */
  --bg:          var(--cream-3);
  --text:        #3A342C;
  --text-soft:   #6E6557;
  --line:        rgba(70,63,54,.14);

  /* Type */
  --display: "Fraunces", Georgia, serif;
  --sans: "Manrope", system-ui, sans-serif;

  /* Rhythm */
  --container: 1400px;
  --gut: clamp(20px, 5vw, 80px);
  --section: 120px;
  --radius: 18px;
  --radius-lg: 30px;

  --ease: cubic-bezier(.22,1,.36,1);
}

/* ---------- Reset ---------- */
*,*::before,*::after{ box-sizing:border-box; margin:0; padding:0; }
html{ -webkit-text-size-adjust:100%; font-size:83%; }
@media (max-width:680px){ html{ font-size:92%; } }
body{
  font-family:var(--sans);
  background:var(--bg);
  color:var(--text);
  line-height:1.6;
  font-weight:400;
  overflow-x:clip;
  -webkit-font-smoothing:antialiased;
  text-rendering:optimizeLegibility;
}
img{ display:block; max-width:100%; height:auto; }
a{ color:inherit; text-decoration:none; }
button{ font-family:inherit; cursor:pointer; border:none; background:none; color:inherit; }
input{ font-family:inherit; }
[hidden]{ display:none !important; }
::selection{ background:var(--gold); color:#fff; }

/* Lenis */
html.lenis,html.lenis body{ height:auto; }
.lenis.lenis-smooth{ scroll-behavior:auto !important; }

/* ---------- Layout ---------- */
.container{ width:100%; max-width:var(--container); margin-inline:auto; padding-inline:var(--gut); }

/* ---------- Typography helpers ---------- */
.h2{
  font-family:var(--display);
  font-weight:430;
  font-size:clamp(2rem, 4.6vw, 4rem);
  line-height:1.04;
  letter-spacing:-.015em;
  color:var(--bark);
}
.h2 em{ font-style:italic; color:var(--gold-deep); }
.eyebrow{
  font-size:.78rem;
  font-weight:700;
  letter-spacing:.22em;
  text-transform:uppercase;
  color:var(--gold-deep);
  display:inline-flex; align-items:center; gap:.6em;
  margin-bottom:1.1rem;
}
.eyebrow::before{ content:""; width:26px; height:1px; background:var(--gold); display:inline-block; }
.eyebrow--center{ justify-content:center; }
.eyebrow--center::before{ display:none; }

.link-underline{
  position:relative; font-weight:600; color:var(--bark);
  padding-bottom:3px; display:inline-block; align-self:flex-start;
}
.link-underline::after{
  content:""; position:absolute; left:0; bottom:0; height:1.5px; width:100%;
  background:var(--gold); transform:scaleX(0); transform-origin:left;
  transition:transform .5s var(--ease);
}
.link-underline:hover::after{ transform:scaleX(1); }
.link-underline--light{ color:#fff; }

/* ---------- Buttons ---------- */
.btn{
  --bg:var(--bark); --fg:#fff;
  position:relative; display:inline-flex; align-items:center; justify-content:center;
  gap:.5em; padding:1.05em 1.9em; border-radius:100px;
  font-weight:600; font-size:.95rem; letter-spacing:.01em;
  background:var(--bg); color:var(--fg); overflow:hidden; isolation:isolate;
  transition:transform .6s var(--ease), box-shadow .6s var(--ease), color .4s var(--ease);
  will-change:transform;
}
.btn span,.btn b{ position:relative; z-index:2; font-weight:inherit; }
.btn b{ font-weight:700; }
.btn::before{
  content:""; position:absolute; inset:0; z-index:1; border-radius:inherit;
  background:var(--gold); transform:translateY(101%); transition:transform .55s var(--ease);
}
.btn:hover::before{ transform:translateY(0); }
.btn:hover{ box-shadow:0 16px 40px -16px rgba(70,63,54,.6); transform:translateY(-3px); }
.btn:active{ transform:translateY(-1px); }
.btn--solid{ --bg:var(--bark); --fg:#fff; }
.btn--gold{ --bg:var(--gold-deep); --fg:#fff; }
.btn--gold::before{ background:var(--bark); }
.btn--light{ background:#fff; color:var(--bark); }
.btn--light::before{ background:var(--gold-deep); }
.btn--light:hover{ color:#fff; }
.btn--ghost{
  background:rgba(255,255,255,.08); color:#fff; border:1.5px solid rgba(255,255,255,.75);
  backdrop-filter:blur(3px); text-shadow:none;
}
.btn--ghost::before{ background:#fff; }
.btn--ghost:hover{ color:var(--bark); border-color:#fff; }
.btn--outline{ background:transparent; color:var(--bark); border:1.5px solid rgba(70,63,54,.28); }
.btn--outline::before{ background:var(--bark); }
.btn--outline:hover{ color:#fff; border-color:var(--bark); }
.btn--block{ width:100%; }
.btn--wide{ padding-inline:3.4em; }

/* ---------- Loader ---------- */
.loader{
  position:fixed; inset:0; z-index:1000; background:var(--cream);
  display:grid; place-items:center;
}
.loader__inner{ display:flex; flex-direction:column; align-items:center; gap:26px; }
.loader__logo{ width:140px; opacity:.95; animation:floaty 3s ease-in-out infinite; }
.loader__bar{ width:180px; height:3px; background:rgba(70,63,54,.15); border-radius:3px; overflow:hidden; }
.loader__bar span{ display:block; height:100%; width:0; background:var(--gold-deep); border-radius:3px; }
@keyframes floaty{ 50%{ transform:translateY(-8px); } }
.loaded .loader{ opacity:0; visibility:hidden; transition:opacity .7s ease,visibility .7s; }

/* ============================================================
   HEADER
   ============================================================ */
.header{
  position:fixed; top:0; left:0; width:100%; z-index:100;
  transition:background .5s var(--ease), box-shadow .5s var(--ease), padding .5s var(--ease);
  padding:14px 0;
}
.header__inner{
  width:100%; max-width:1400px; margin-inline:auto; padding-inline:var(--gut);
  display:flex; align-items:center; justify-content:space-between; gap:24px;
}
.header__brand{ display:flex; align-items:center; gap:13px; }
.header__mark{ height:50px; width:auto; transition:height .5s var(--ease), filter .5s var(--ease); }
.header__word{ display:flex; flex-direction:column; line-height:1; transition:color .5s var(--ease); }
.header__word-top{
  font-family:var(--display); font-weight:560; font-size:1.5rem; letter-spacing:.04em;
  color:var(--bark); text-transform:uppercase;
}
.header__word-sub{
  font-size:.62rem; font-weight:700; letter-spacing:.42em; text-transform:uppercase;
  color:var(--gold-deep); margin-top:5px; padding-left:2px;
}
.header.is-scrolled{ background:rgba(251,249,245,.85); backdrop-filter:blur(14px); box-shadow:0 1px 0 var(--line); padding:8px 0; }
.header.is-scrolled .header__mark{ height:42px; }
/* white brand ONLY while transparent over the hero (never once the cream bar appears) */
.header.over-hero:not(.is-scrolled) .header__mark{ filter:brightness(0) invert(1); }
.header.over-hero:not(.is-scrolled) .header__word-top{ color:#fff; }
.header.over-hero:not(.is-scrolled) .header__word-sub{ color:var(--gold-soft); }
.header.over-hero:not(.is-scrolled) .nav__link{ color:rgba(255,255,255,.88); }
.header.over-hero:not(.is-scrolled) .burger span{ background:#fff; }

.nav{ display:flex; gap:36px; }
.nav__link{
  position:relative; font-size:.95rem; font-weight:600; color:var(--bark); padding:6px 0;
  transition:color .4s var(--ease);
}
.nav__link::after{
  content:""; position:absolute; left:0; bottom:0; height:2px; width:100%;
  background:currentColor; transform:scaleX(0); transform-origin:right; transition:transform .45s var(--ease);
}
.nav__link:hover::after{ transform:scaleX(1); transform-origin:left; }

.header__actions{ display:flex; align-items:center; gap:16px; }

/* Language switcher */
.lang{ display:inline-flex; align-items:center; gap:2px; border:1px solid var(--line); border-radius:100px; padding:3px; transition:border-color .5s var(--ease); }
.lang__btn{ font-size:.74rem; font-weight:700; letter-spacing:.05em; padding:6px 10px; border-radius:100px; color:var(--text-soft); transition:.3s var(--ease); }
.lang__btn.is-active{ background:var(--bark); color:#fff; }
.lang__btn:not(.is-active):hover{ color:var(--bark); }
.header.over-hero:not(.is-scrolled) .lang{ border-color:rgba(255,255,255,.4); }
.header.over-hero:not(.is-scrolled) .lang__btn{ color:rgba(255,255,255,.82); }
.header.over-hero:not(.is-scrolled) .lang__btn.is-active{ background:#fff; color:var(--bark); }
.header.over-hero:not(.is-scrolled) .lang__btn:not(.is-active):hover{ color:#fff; }
.lang--menu{ margin-top:30px; border-color:rgba(255,255,255,.25); }
.lang--menu .lang__btn{ color:rgba(255,255,255,.7); font-size:.85rem; padding:8px 14px; }
.lang--menu .lang__btn.is-active{ background:#fff; color:var(--bark); }

/* Language: full pill row on desktop, compact dropdown (current + caret) on mobile */
.lang__toggle{ display:none; }
@media (min-width:1025px){ .lang__panel{ display:contents; } }
@media (max-width:1024px){
  .header__actions .lang{ position:relative; border:none; padding:0; background:none; }
  .header__actions .lang .lang__toggle{ display:inline-flex; align-items:center; gap:5px;
    border:1px solid var(--line); border-radius:100px; padding:6px 11px;
    font-size:.72rem; font-weight:700; letter-spacing:.05em; color:var(--text-soft); transition:.3s var(--ease); }
  .header__actions .lang .lang__toggle svg{ width:11px; height:11px; transition:transform .3s var(--ease); }
  .header__actions .lang.is-open .lang__toggle svg{ transform:rotate(180deg); }
  .header__actions .lang__panel{ display:none; position:absolute; top:calc(100% + 8px); right:0; z-index:5;
    flex-direction:column; gap:2px; padding:6px; min-width:92px;
    background:var(--cream-3); border:1px solid var(--line); border-radius:14px;
    box-shadow:0 18px 40px -20px rgba(44,39,31,.5); }
  .header__actions .lang.is-open .lang__panel{ display:flex; }
  .header__actions .lang__panel .lang__btn{ display:flex; width:100%; justify-content:flex-start;
    padding:9px 12px; font-size:.82rem; color:var(--text-soft); border-radius:9px; }
  .header__actions .lang__panel .lang__btn.is-active{ background:var(--bark); color:#fff; }
  .header.over-hero:not(.is-scrolled) .lang__toggle{ border-color:rgba(255,255,255,.45); color:rgba(255,255,255,.9); }
}
.header__donate{ padding:.8em 1.5em; font-size:.9rem; }

.burger{ display:none; width:40px; height:40px; position:relative; }
.burger span{ position:absolute; left:9px; width:22px; height:2px; background:var(--bark); border-radius:2px; transition:.4s var(--ease); }
.burger span:nth-child(1){ top:16px; } .burger span:nth-child(2){ top:23px; }
.menu-open .burger span:nth-child(1){ top:19px; transform:rotate(45deg); }
.menu-open .burger span:nth-child(2){ top:19px; transform:rotate(-45deg); }

/* Mobile menu */
.menu{
  position:fixed; inset:0; z-index:90; background:var(--bark-deep); color:#fff;
  display:flex; flex-direction:column; justify-content:flex-start;
  padding:clamp(92px,13vh,150px) var(--gut) clamp(28px,5vh,48px);
  overflow-y:auto; -webkit-overflow-scrolling:touch;
  clip-path:inset(0 0 100% 0); transition:clip-path .7s var(--ease); visibility:hidden;
}
.menu-open .menu{ clip-path:inset(0 0 0 0); visibility:visible; }
/* nav centres itself when there's spare height, scrolls when there isn't */
.menu__nav{ display:flex; flex-direction:column; gap:4px; }
.menu__link{
  font-family:var(--display); font-size:clamp(1.7rem,7vw,3.2rem); font-weight:400; padding:7px 0;
  border-bottom:1px solid rgba(255,255,255,.12); transition:color .3s, padding-left .4s var(--ease);
}
.menu__link:hover{ color:var(--gold-soft); padding-left:14px; }
.menu__donate{ margin-top:24px; align-self:flex-start; }
.menu__foot{ position:static; margin-top:auto; padding-top:28px; opacity:.5; font-size:.85rem; letter-spacing:.04em; }

/* ============================================================
   HERO
   ============================================================ */
.hero{
  position:relative; min-height:100svh; display:flex; align-items:flex-end;
  padding:clamp(128px,17vh,210px) 0 clamp(90px,13vh,160px); overflow:hidden; color:#fff;
}
.hero__media{ position:absolute; inset:0; z-index:-1; }
.hero__img{
  width:100%; height:120%; object-fit:cover; will-change:transform;
  transform:scale(1.12);
}
.hero__veil{
  position:absolute; inset:0;
  background:
    /* left scrim — keeps the left-aligned text/buttons readable over bright video */
    linear-gradient(100deg,
      rgba(26,22,16,.82) 0%,
      rgba(26,22,16,.6) 26%,
      rgba(26,22,16,.28) 48%,
      rgba(26,22,16,0) 70%),
    /* vertical scrim — top for the logo, bottom for the CTAs */
    linear-gradient(180deg,
      rgba(26,22,16,.55) 0%,
      rgba(26,22,16,.12) 16%,
      rgba(26,22,16,0) 38%,
      rgba(26,22,16,.45) 78%,
      rgba(26,22,16,.82) 100%);
}
.hero__content{ width:100%; max-width:var(--container); margin-inline:auto; padding-inline:var(--gut); text-shadow:0 2px 30px rgba(20,16,10,.4); }
.hero__eyebrow{
  font-size:.82rem; font-weight:700; letter-spacing:.22em; text-transform:uppercase;
  color:var(--gold-soft); margin-bottom:1.5rem;
}
.hero__title{
  font-family:var(--display); font-weight:380;
  font-size:clamp(2.4rem, 5.4vw, 5.2rem); line-height:1.04; letter-spacing:-.02em;
  max-width:17ch; margin-bottom:1.7rem;
}
.hero__title em{ font-style:italic; color:var(--gold-soft); }
.hero__title .line{ display:block; overflow:hidden; padding-bottom:.14em; margin-bottom:-.14em; }
.hero__title .line > *{ display:block; }
.hero__lead{
  font-size:clamp(1.05rem,1.5vw,1.3rem); max-width:46ch; color:rgba(255,255,255,.9);
  line-height:1.65; margin-bottom:1.5rem; font-weight:350;
}
.hero__cta{ display:flex; flex-wrap:wrap; gap:16px; }

.hero__scroll{
  position:absolute; right:var(--gut); bottom:48px; display:flex; flex-direction:column;
  align-items:center; gap:12px; writing-mode:vertical-rl;
}
.hero__scroll-label{ font-size:.72rem; letter-spacing:.25em; text-transform:uppercase; opacity:.75; }
.hero__scroll-dot{
  width:1px; height:54px; background:rgba(255,255,255,.4); position:relative; overflow:hidden;
}
.hero__scroll-dot::after{
  content:""; position:absolute; top:0; left:0; width:100%; height:40%; background:#fff;
  animation:scrolldot 2.1s var(--ease) infinite;
}
@keyframes scrolldot{ 0%{ transform:translateY(-100%);} 60%,100%{ transform:translateY(260%);} }

/* ============================================================
   MISSION
   ============================================================ */
.mission{ padding:var(--section) 0; background:var(--bg); text-align:center; position:relative; overflow:hidden; }
/* floating photos with parallax motion around the mission text */
.mission__photos{ position:absolute; inset:0; pointer-events:none; z-index:0; }
.mission .container{ position:relative; z-index:1; }
.mission__photo{
  position:absolute; overflow:hidden; border-radius:var(--radius-lg);
  box-shadow:0 28px 55px -26px rgba(44,39,31,.45);
  will-change:transform;
}
.mission__photo img{ width:100%; height:100%; object-fit:cover; }
.mission__photo--1{ left:5%;  top:14%;    width:clamp(130px,12vw,185px); aspect-ratio:4/5; }
.mission__photo--2{ right:6%; top:9%;     width:clamp(110px,10vw,160px); aspect-ratio:1/1; }
.mission__photo--3{ left:9%;  bottom:11%; width:clamp(115px,10.5vw,165px); aspect-ratio:1/1; }
.mission__photo--4{ right:7%; bottom:14%; width:clamp(130px,12vw,185px); aspect-ratio:4/5; }
@media (max-width:1024px){ .mission__photos{ display:none; } }
.mission__eyebrow{
  font-size:.78rem; font-weight:700; letter-spacing:.22em; text-transform:uppercase;
  color:var(--gold-deep); margin-bottom:1.6rem;
}
.mission__text{
  font-family:var(--display); font-weight:400;
  font-size:clamp(1.5rem, 3.3vw, 2.9rem); line-height:1.28; letter-spacing:-.01em;
  max-width:24ch; margin-inline:auto; color:var(--bark);
}
.mission__text em{ font-style:italic; color:var(--gold-deep); }
.mission__cta{ margin-top:clamp(30px,3.4vw,46px); position:relative; z-index:1; }

/* Values ticker — scrolling line right under the hero */
.ticker{
  background:transparent; overflow:hidden; position:relative;
  padding:clamp(26px,3.4vw,44px) 0;
  -webkit-mask-image:linear-gradient(90deg, transparent, #000 9%, #000 91%, transparent);
          mask-image:linear-gradient(90deg, transparent, #000 9%, #000 91%, transparent);
}
.ticker__track{ display:flex; align-items:center; gap:clamp(26px,3.5vw,52px); width:max-content; animation:ticker 36s linear infinite; }
.ticker__track span{
  font-family:var(--display); font-style:normal; font-weight:430;
  font-size:clamp(1.5rem,3.4vw,2.7rem); letter-spacing:-.01em;
  color:var(--bark); white-space:nowrap;
}
.ticker__track i{ font-style:normal; font-size:1.5em; transform:translateY(-.02em); filter:drop-shadow(0 6px 12px rgba(44,39,31,.18)); }
@keyframes ticker{ to{ transform:translateX(-33.333%); } }
@media (hover:hover){ .ticker:hover .ticker__track{ animation-play-state:paused; } }

/* ============================================================
   STORY
   ============================================================ */
.story{ padding:var(--section) 0; background:var(--cream-2); }
.story__grid{ display:grid; grid-template-columns:1fr 1fr; gap:clamp(40px,7vw,110px); align-items:center; }
.story__media{ position:relative; }
.reveal-img{ overflow:hidden; border-radius:var(--radius-lg); clip-path:inset(0 round var(--radius-lg)); }
.reveal-img img{ width:100%; aspect-ratio:4/5; object-fit:cover; will-change:transform; }
.story__badge{
  position:absolute; left:-22px; bottom:-26px; background:var(--bark); color:#fff;
  border-radius:20px; padding:24px 28px; text-align:center; box-shadow:0 24px 50px -20px rgba(44,39,31,.6);
  display:flex; flex-direction:column; gap:2px; min-width:150px;
}
.story__badge-num{ font-family:var(--display); font-size:2.6rem; line-height:1; color:var(--gold-soft); }
.story__badge-label{ font-size:.78rem; letter-spacing:.04em; opacity:.85; }

.story__text{ font-size:1.08rem; color:var(--text-soft); margin-top:1.4rem; max-width:50ch; }
.story__sign{ margin-top:2.2rem; display:flex; flex-direction:column; gap:14px; align-items:flex-start; }
.story__sign-name{ font-family:var(--display); font-style:italic; font-size:1.3rem; color:var(--bark); }

/* ============================================================
   ANIMALS
   ============================================================ */
.animals{ padding:var(--section) 0; background:var(--bg); overflow:hidden; }
.animals__head{ display:grid; grid-template-columns:1fr .8fr; gap:30px 60px; align-items:end; margin-bottom:clamp(40px,5vw,70px); }
.animals__intro{ color:var(--text-soft); font-size:1.05rem; max-width:42ch; }
.animals__swiper{ padding-left:max(var(--gut), calc(50% - 700px + var(--gut))); overflow:visible; }
.a-card{
  width:min(420px,80vw); background:var(--paper); border-radius:var(--radius-lg);
  overflow:hidden; box-shadow:0 30px 60px -40px rgba(44,39,31,.4); height:auto;
  border:1px solid var(--line);
}
.a-card__media{ overflow:hidden; aspect-ratio:4/3.4; }
.a-card__media img{ width:100%; height:100%; object-fit:cover; transition:transform 1s var(--ease); }
.a-card:hover .a-card__media img{ transform:scale(1.06); }
.a-card__body{ padding:28px 30px 32px; }
.a-card__top{ display:flex; align-items:baseline; justify-content:space-between; gap:12px; flex-wrap:wrap; }
.a-card__top h3{ font-family:var(--display); font-size:1.9rem; font-weight:440; color:var(--bark); }
.a-card__top span{ font-size:.8rem; letter-spacing:.04em; color:var(--gold-deep); font-weight:600; text-transform:uppercase; }
.a-card__body p{ color:var(--text-soft); margin:14px 0 22px; font-size:1rem; }
.a-card__cta{ font-weight:700; color:var(--bark); display:inline-flex; align-items:center; gap:.5em; transition:gap .4s var(--ease), color .4s; }
.a-card__cta i{ color:var(--gold-deep); transition:transform .4s var(--ease); font-style:normal; }
.a-card__cta:hover{ color:var(--gold-deep); } .a-card:hover .a-card__cta i{ transform:translateX(6px); }

.animals__controls{ display:flex; align-items:center; justify-content:space-between; margin-top:46px; gap:24px; }
.swiper-pagination{ position:static !important; width:auto !important; display:flex; gap:8px; }
.swiper-pagination-bullet{ width:32px; height:4px; border-radius:4px; background:var(--line); opacity:1; transition:background .4s; }
.swiper-pagination-bullet-active{ background:var(--gold-deep); }
.animals__btns{ display:flex; gap:12px; }
.circle-btn{
  width:56px; height:56px; border-radius:50%; border:1.5px solid var(--line); color:var(--bark);
  font-size:1.2rem; display:grid; place-items:center; transition:.4s var(--ease);
}
.circle-btn:hover{ background:var(--bark); color:#fff; border-color:var(--bark); transform:translateY(-3px); }

/* ============================================================
   DONATE
   ============================================================ */
.donate{ padding:var(--section) 0; background:var(--bark-deep); color:#fff; }
.donate__grid{ display:grid; grid-template-columns:1fr 1fr; gap:clamp(40px,6vw,90px); align-items:center; }
.donate .eyebrow{ color:var(--gold-soft); }
.donate .h2{ color:#fff; }
.donate .h2 em{ color:var(--gold-soft); }
.donate__lead{ color:rgba(255,255,255,.72); margin-top:1.4rem; font-size:1.08rem; max-width:46ch; }

.progress{ margin-top:2.6rem; max-width:460px; }
.progress__top{ display:flex; justify-content:space-between; font-size:.92rem; margin-bottom:12px; color:rgba(255,255,255,.85); }
.progress__val b{ color:#fff; font-weight:700; }
.progress__bar{ height:12px; border-radius:20px; background:rgba(255,255,255,.12); overflow:hidden; }
.progress__bar span{ display:block; height:100%; width:0; border-radius:20px; background:linear-gradient(90deg,var(--gold),var(--gold-soft)); transition:width 1.6s var(--ease); }
.progress__note{ font-size:.86rem; margin-top:12px; color:rgba(255,255,255,.6); }

.donate__panel{ background:var(--cream-3); color:var(--text); border-radius:var(--radius-lg); padding:clamp(26px,3vw,40px); box-shadow:0 40px 80px -40px rgba(0,0,0,.6); }
.donate__panel-title{ font-family:var(--display); font-size:1.4rem; color:var(--bark); margin-bottom:18px; }
.amounts{ display:grid; grid-template-columns:1fr 1fr; gap:12px; }
.amount{
  text-align:left; padding:16px 18px; border-radius:14px; border:1.5px solid var(--line);
  background:var(--paper); transition:.35s var(--ease); display:flex; flex-direction:column; gap:3px;
}
.amount b{ font-family:var(--display); font-size:1.5rem; color:var(--bark); }
.amount span{ font-size:.82rem; color:var(--text-soft); line-height:1.35; }
.amount:hover{ border-color:var(--gold); transform:translateY(-2px); }
.amount.is-active{ border-color:var(--gold-deep); background:#fff; box-shadow:0 0 0 2px var(--gold-deep) inset; }
.amount-custom{ display:flex; align-items:center; gap:6px; margin-top:12px; border:1.5px solid var(--line); border-radius:14px; padding:0 16px; background:var(--paper); }
.amount-custom span{ color:var(--text-soft); font-weight:600; }
.amount-custom input{ width:100%; border:none; background:none; padding:15px 0; font-size:1rem; outline:none; color:var(--text); }
.donate__toggle{ display:flex; gap:8px; margin:16px 0 18px; background:var(--cream); border-radius:100px; padding:5px; }
.toggle{ flex:1; padding:11px; border-radius:100px; font-weight:600; font-size:.9rem; color:var(--text-soft); transition:.35s var(--ease); }
.toggle.is-active{ background:var(--bark); color:#fff; }
.donate__submit{ margin-top:18px; }
.donate__secure{ text-align:center; font-size:.82rem; color:var(--text-soft); margin-top:14px; }

/* ===== Give (centered donation form, no dark bg) ===== */
.give{ padding:var(--section) 0; background:var(--cream-2); text-align:center; }
.give__title{ max-width:22ch; margin:0 auto clamp(36px,4vw,56px); }
.give__title em{ font-style:italic; color:var(--gold-deep); }
.give__card{ max-width:640px; margin-inline:auto; background:var(--cream-3); border:1px solid var(--line); border-radius:var(--radius-lg); padding:clamp(24px,3vw,40px); box-shadow:0 44px 90px -54px rgba(44,39,31,.45); text-align:left; }
.give__toggle{ display:flex; gap:6px; background:var(--cream); border-radius:100px; padding:5px; }
.gtoggle{ flex:1; padding:12px 8px; border-radius:100px; font-weight:600; font-size:.9rem; color:var(--text-soft); transition:.35s var(--ease); }
.gtoggle.is-active{ background:var(--bark); color:#fff; }
.gtoggle:not(.is-active):hover{ color:var(--bark); }
.give__label{ font-size:.76rem; font-weight:700; letter-spacing:.16em; text-transform:uppercase; color:var(--text-soft); margin:24px 0 12px; }
.give__amounts{ display:grid; grid-template-columns:repeat(4,1fr); gap:12px; }
.gamount{ padding:18px 8px; border-radius:14px; border:1.5px solid var(--line); background:var(--paper); font-family:var(--display); font-size:1.3rem; color:var(--bark); transition:.3s var(--ease); }
.gamount:hover{ border-color:var(--gold); transform:translateY(-2px); }
.gamount.is-active{ border-color:var(--gold-deep); background:#fff; box-shadow:0 0 0 2px var(--gold-deep) inset; }
.give__custom{ display:flex; align-items:center; gap:6px; margin-top:12px; border:1.5px solid var(--line); border-radius:14px; padding:0 16px; background:var(--paper); }
.give__custom span{ color:var(--text-soft); font-weight:600; }
.give__custom input{ width:100%; border:none; background:none; padding:16px 0; font-size:1rem; outline:none; color:var(--text); }
.give__selected{ text-align:center; margin:20px 0 14px; color:var(--text-soft); }
.give__selected b{ color:var(--bark); font-family:var(--display); font-size:1.2rem; }
.give__note{ text-align:center; font-size:.84rem; color:var(--text-soft); margin-top:14px; max-width:48ch; margin-inline:auto; line-height:1.6; }
.give__view[hidden]{ display:none; }
/* bank-transfer view */
.give__bank-lead{ color:var(--text-soft); font-size:1rem; line-height:1.6; margin:24px 0 20px; }
.give__rows{ list-style:none; display:flex; flex-direction:column; }
.give__rows li{ display:flex; justify-content:space-between; align-items:center; gap:16px; padding:16px 0; border-top:1px solid var(--line); }
.give__rows li span{ font-size:.74rem; font-weight:700; letter-spacing:.12em; text-transform:uppercase; color:var(--text-soft); }
.give__rows li b{ font-family:var(--display); font-weight:500; color:var(--bark); font-size:1.05rem; text-align:right; }
.give__bank .btn{ margin-top:22px; }
.give__intro{ max-width:54ch; margin:0 auto clamp(32px,4vw,52px); color:var(--text-soft); font-size:1.06rem; }
.give__recurring{ text-align:center; margin:-4px 0 16px; font-size:.86rem; color:var(--gold-deep); font-weight:600; min-height:1.2em; }
@media (max-width:560px){ .give__amounts{ grid-template-columns:1fr 1fr; } .give__toggle{ flex-wrap:nowrap; gap:4px; padding:4px; } .gtoggle{ flex:1; white-space:nowrap; padding:11px 6px; font-size:.78rem; } .give__rows li{ flex-direction:column; align-items:flex-start; gap:4px; } .give__rows li b{ text-align:left; } }

/* ============================================================
   STATS
   ============================================================ */
.stats{ padding:var(--section) 0; background:var(--bg); text-align:center; position:relative; overflow:hidden; }
.stats__produce{ position:absolute; inset:0; pointer-events:none; z-index:0; }
.stats__produce span{
  position:absolute; left:var(--x); top:var(--y); line-height:1;
  font-size:clamp(2rem,3.6vw,3.4rem);
  filter:drop-shadow(0 12px 20px rgba(44,39,31,.18));
  animation:floaty 6s ease-in-out infinite;
}
.stats__produce span:nth-child(2){ animation-delay:-1.2s; }
.stats__produce span:nth-child(3){ animation-delay:-2.4s; }
.stats__produce span:nth-child(4){ animation-delay:-3.1s; }
.stats__produce span:nth-child(5){ animation-delay:-1.8s; }
.stats .container{ position:relative; z-index:1; }
.stats__title{ max-width:18ch; margin:0 auto .9rem; }
.stats__intro{ max-width:54ch; margin:0 auto clamp(44px,5vw,68px); color:var(--text-soft); font-size:1.08rem; }
.stats__grid{ display:grid; grid-template-columns:repeat(4,1fr); gap:24px; }
.stats__cta{ margin-top:clamp(40px,4.5vw,60px); }
.stats__note{ margin-top:18px; color:var(--text-soft); font-size:1rem; }
.stat{ padding:34px 18px 30px; position:relative; }
.stat::before{ content:""; position:absolute; top:0; left:50%; transform:translateX(-50%); width:150px; max-width:80%; height:2px; background:var(--gold); border-radius:2px; }
.stat__num{ display:block; font-family:var(--display); font-size:clamp(2.4rem,4.5vw,3.6rem); color:var(--bark); line-height:1; font-weight:440; }
.stat__label{ display:block; margin-top:14px; color:var(--text-soft); font-size:.96rem; max-width:18ch; margin-inline:auto; }

/* ============================================================
   VISIT
   ============================================================ */
.visit{ padding:var(--section) 0; background:var(--cream-2); }
.visit--alt{ background:var(--bg); }
.visit__head,.diary__head{ display:flex; justify-content:space-between; align-items:flex-end; gap:30px; flex-wrap:wrap; margin-bottom:clamp(36px,4vw,60px); }
.visit__intro{ color:var(--text-soft); max-width:34ch; font-size:1.05rem; }
.visit__cta{ flex-shrink:0; }
.programs{ display:grid; grid-template-columns:repeat(3,1fr); gap:22px; }
.program{
  background:var(--paper); border:1px solid var(--line); border-radius:var(--radius-lg); padding:32px 30px;
  transition:.45s var(--ease); display:flex; flex-direction:column; gap:12px; align-items:flex-start;
}
.program:hover{ transform:translateY(-6px); box-shadow:0 30px 60px -38px rgba(44,39,31,.4); }
.program__icon{ font-size:1.8rem; }
.program h3{ font-family:var(--display); font-size:1.5rem; color:var(--bark); font-weight:440; }
.program p{ color:var(--text-soft); font-size:1rem; flex:1; }
.program--feature{
  grid-column:span 3; grid-row:span 1; flex-direction:row; align-items:stretch; padding:0; overflow:hidden;
  height:440px;
}
.program--feature img{ width:50%; height:100%; object-fit:cover; object-position:center 30%; }
.program--feature .program__content{ padding:clamp(28px,3.5vw,48px); display:flex; flex-direction:column; justify-content:center; gap:14px; background:var(--bark); color:#fff; flex:1; }
.program--feature h3{ color:#fff; font-size:clamp(1.8rem,2.6vw,2.4rem); }
.program--feature p{ color:rgba(255,255,255,.8); max-width:40ch; }

.program--photo{ padding:0; overflow:hidden; gap:0; }
.program--photo .program__media{ aspect-ratio:16/11; overflow:hidden; }
.program--photo .program__media img{ width:100%; height:100%; object-fit:cover; transition:transform 1.1s var(--ease); }
.program--photo:hover .program__media img{ transform:scale(1.05); }
.program--photo .program__body{ padding:26px 28px 30px; display:flex; flex-direction:column; gap:12px; align-items:flex-start; }

/* Card carousels (programs / help / diary): a Swiper on mobile, a normal grid on
   desktop. On desktop the swiper + wrapper dissolve (display:contents) so the cards
   stay direct grid items, and the dots are hidden. */
.cards-dots{ display:flex; justify-content:center; gap:8px; margin-top:24px; }
@media (min-width:681px){
  .programs__carousel,
  .programs__carousel > .swiper-wrapper,
  .help__grid > .swiper-wrapper,
  .diary__grid > .swiper-wrapper,
  .ways__grid > .swiper-wrapper,
  .vknow__grid > .swiper-wrapper,
  .wh__grid > .swiper-wrapper,
  .srelated__grid > .swiper-wrapper,
  .social__grid > .swiper-wrapper,
  .vstats .stats__grid > .swiper-wrapper{ display:contents; }
  .help__grid.swiper,
  .diary__grid.swiper,
  .ways__grid.swiper,
  .vknow__grid.swiper,
  .wh__grid.swiper,
  .srelated__grid.swiper,
  .social__grid.swiper,
  .vstats .stats__grid.swiper{ overflow:visible; }
  .cards-dots{ display:none; }
}
/* timeline carousel runs only up to 1024px; restore the desktop pinned layout above */
@media (min-width:1025px){
  .timeline__steps > .swiper-wrapper{ display:contents; }
  .timeline__steps.swiper{ overflow:visible; }
  .timeline__steps .cards-dots{ display:none; }
}

/* ============================================================
   HELP
   ============================================================ */
.help{ padding:var(--section) 0; background:var(--bg); text-align:center; position:relative; overflow:hidden; }
.help--alt{ background:var(--cream-2); }
.help__title{ max-width:20ch; margin:0 auto clamp(40px,5vw,64px); }
/* playful produce accents */
.help__produce{ position:absolute; inset:0; pointer-events:none; z-index:0; }
.help__produce span{
  position:absolute; left:var(--x); top:var(--y);
  font-size:clamp(2rem,3.6vw,3.4rem); line-height:1;
  filter:drop-shadow(0 12px 20px rgba(44,39,31,.18));
  animation:floaty 6s ease-in-out infinite;
}
.help__produce span:nth-child(2){ animation-delay:-1.2s; }
.help__produce span:nth-child(3){ animation-delay:-2.4s; }
.help__produce span:nth-child(4){ animation-delay:-3.1s; }
.help__produce span:nth-child(5){ animation-delay:-1.8s; }
.help .container{ position:relative; z-index:1; }
.help__grid{ display:grid; grid-template-columns:repeat(4,1fr); gap:18px; text-align:left; }
.help-card{
  position:relative; background:var(--cream-2); border:1px solid var(--line); border-radius:var(--radius-lg);
  padding:34px 28px 28px; min-height:230px; display:flex; flex-direction:column; gap:10px;
  transition:.45s var(--ease); overflow:hidden;
}
.help-card::after{ content:""; position:absolute; inset:0; background:var(--bark); transform:translateY(100%); transition:transform .5s var(--ease); z-index:0; border-radius:inherit; }
.help-card > *{ position:relative; z-index:1; transition:color .4s var(--ease); }
.help-card:hover::after{ transform:translateY(0); }
.help-card:hover{ transform:translateY(-6px); border-color:transparent; }
.help-card:hover h3,.help-card:hover p,.help-card:hover .help-card__tag{ color:#fff; }
.help-card:hover .help-card__arrow{ color:var(--gold-soft); transform:translate(4px,-4px); }
.help-card__tag{ font-family:var(--sans); font-weight:800; font-size:.9rem; letter-spacing:.08em; color:var(--gold-deep); }
.help-card h3{ font-family:var(--display); font-size:1.45rem; color:var(--bark); font-weight:440; margin-top:54px; min-height:1.3em; white-space:nowrap; }
.help-card p{ color:var(--text-soft); font-size:.96rem; }
.help-card__arrow{ position:absolute; top:28px; right:26px; font-size:1.3rem; color:var(--gold-deep); transition:.4s var(--ease); }

/* ============================================================
   GALLERY (bento)
   ============================================================ */
.gallery{ padding:var(--section) 0; background:var(--cream-2); }
.gallery--soft{ background:var(--paper); }
.gallery__head{ display:flex; justify-content:space-between; align-items:flex-end; gap:30px; flex-wrap:wrap; margin-bottom:clamp(36px,4vw,60px); }
.gallery__title{ font-size:clamp(2.5rem,5.4vw,4.8rem); }
.gallery__btn{ flex-shrink:0; }
.gallery__grid{
  display:grid; grid-template-columns:repeat(4,1fr);
  grid-auto-rows:clamp(140px,16vw,200px); gap:14px; grid-auto-flow:dense;
}
.g-item{ overflow:hidden; border-radius:var(--radius-lg); position:relative; background:var(--cream); }
.g-item img{ width:100%; height:100%; object-fit:cover; transition:transform 1.1s var(--ease); }
.g-item::after{ content:""; position:absolute; inset:0; background:linear-gradient(180deg,transparent 55%,rgba(44,39,31,.35)); opacity:0; transition:opacity .5s var(--ease); }
.g-item:hover img{ transform:scale(1.07); }
.g-item:hover::after{ opacity:1; }
.g-item--lg{ grid-column:span 2; grid-row:span 2; }
.g-item--wide{ grid-column:span 2; }
.g-item--tall{ grid-row:span 2; }
.g-item--mobile{ display:none; }   /* extra tile shown only on the 2-col mobile grid */
.gallery__more{ text-align:center; margin-top:clamp(32px,4vw,52px); }

/* ============================================================
   DIARY (legacy — unused)
   ============================================================ */
.diary{ padding:var(--section) 0; background:var(--bg); }
.diary__grid{ display:grid; grid-template-columns:repeat(3,1fr); gap:30px; }
.post{ display:flex; flex-direction:column; gap:10px; height:100%; }
.post__media{ overflow:hidden; border-radius:var(--radius-lg); margin-bottom:8px; }
.post__media img{ width:100%; aspect-ratio:3/2.2; object-fit:cover; transition:transform 1s var(--ease); }
.post:hover .post__media img{ transform:scale(1.06); }
.post__meta{ font-size:.76rem; letter-spacing:.12em; text-transform:uppercase; color:var(--gold-deep); font-weight:700; }
.post h3{ font-family:var(--display); font-size:1.4rem; color:var(--bark); font-weight:440; line-height:1.2; transition:color .4s; }
.post:hover h3{ color:var(--gold-deep); }
.post p{ color:var(--text-soft); font-size:.98rem; }
.post__more{ position:relative; align-self:flex-start; margin-top:auto; font-weight:700; color:var(--bark); display:inline-flex; align-items:center; gap:.4em; transition:gap .4s var(--ease), color .4s var(--ease); }
.post__more::after{ content:""; position:absolute; left:0; bottom:-2px; height:1.5px; width:100%; background:var(--gold-deep); transform:scaleX(0); transform-origin:left; transition:transform .45s var(--ease); }
.post:hover .post__more{ color:var(--gold-deep); gap:.75em; }
.post:hover .post__more::after{ transform:scaleX(1); }

/* ============================================================
   SPONSOR
   ============================================================ */
.sponsor{ padding:clamp(100px,13vw,180px) 0 clamp(80px,10vw,130px); background:var(--bg); }
.sponsor__inner{
  background:var(--bark); color:#fff; border-radius:var(--radius-lg); overflow:hidden;
  display:grid; grid-template-columns:1.05fr .95fr; align-items:stretch;
  background-image:radial-gradient(circle at 12% 14%, rgba(169,140,93,.3), transparent 55%);
}
.sponsor__copy{ padding:clamp(36px,5vw,70px); }
.sponsor .eyebrow{ color:var(--gold-soft); }
.sponsor .h2{ color:#fff; }
.sponsor__lead{ color:rgba(255,255,255,.78); margin-top:1.2rem; max-width:44ch; font-size:1.05rem; }
.sponsor__form{ display:flex; gap:12px; flex-wrap:wrap; margin-top:2rem; }
.sponsor__form input{
  flex:1; min-width:200px; padding:1.05em 1.4em; border-radius:100px; border:1.5px solid rgba(255,255,255,.25);
  background:rgba(255,255,255,.06); color:#fff; font-size:1rem; outline:none;
}
.sponsor__form input::placeholder{ color:rgba(255,255,255,.5); }
.sponsor__form input:focus{ border-color:var(--gold-soft); }
/* button sits on a dark section — white at rest, gold on hover (like Donate) */
.sponsor__form .btn{ background:#fff; color:var(--bark); }
.sponsor__form .btn::before{ background:var(--gold-deep); }
.sponsor__form .btn:hover{ color:#fff; }
.sponsor__note{ margin-top:1.2rem; font-size:.9rem; color:rgba(255,255,255,.62); }
.sponsor__media{ position:relative; min-height:360px; }
.sponsor__media img{ position:absolute; inset:0; width:100%; height:100%; object-fit:cover; }
.sponsor__tag{
  position:absolute; left:22px; bottom:22px; background:rgba(28,24,18,.7); backdrop-filter:blur(8px);
  color:#fff; padding:13px 18px; border-radius:14px; display:flex; flex-direction:column; gap:2px;
}
.sponsor__tag b{ font-family:var(--display); font-style:italic; font-size:1.2rem; color:var(--gold-soft); }
.sponsor__tag span{ font-size:.78rem; color:rgba(255,255,255,.78); }

/* ============================================================
   FOOTER
   ============================================================ */
.footer{ background:var(--bark-deep); color:rgba(255,255,255,.7); padding:clamp(60px,7vw,90px) 0 36px; }
.footer__grid{ display:grid; grid-template-columns:1.6fr 1fr 1fr 1fr; gap:40px; padding-bottom:50px; border-bottom:1px solid rgba(255,255,255,.1); }
.footer__lock{ display:flex; align-items:center; margin-bottom:20px; }
.footer__mark{ height:90px; filter:brightness(0) invert(1); opacity:.95; }
.footer__brand p{ max-width:36ch; font-size:.96rem; line-height:1.7; }
.footer__col h4{ color:#fff; font-size:.82rem; letter-spacing:.16em; text-transform:uppercase; margin-bottom:18px; font-weight:700; }
.footer__col a{ display:block; padding:7px 0; font-size:.96rem; transition:color .3s, padding-left .3s var(--ease); }
.footer__col a:hover{ color:var(--gold-soft); padding-left:5px; }
.footer__bottom{ display:flex; justify-content:space-between; gap:20px; padding-top:28px; font-size:.85rem; flex-wrap:wrap; }

/* ============================================================
   REVEAL (GSAP base states)
   ============================================================ */
.reveal-up,.split-lines{ will-change:transform,opacity; }
.no-js .reveal-up,.no-js .split-lines{ opacity:1; transform:none; }

/* Bulletproof reveals — hidden state applies ONLY when JS is ready (html.reveals),
   and a CSS transition to .in can never get stuck mid-way */
html.reveals .reveal-up,
html.reveals .reveal-card{
  opacity:0; transform:translateY(36px);
  transition:opacity .9s var(--ease), transform .9s var(--ease);
  transition-delay:var(--reveal-delay,0s);
}
html.reveals .reveal-up.in,
html.reveals .reveal-card.in{ opacity:1; transform:none; }
/* keep descenders (g, y, p, comma) from being clipped by the line-reveal mask */
.st-line-mask{ padding-bottom:.16em; margin-bottom:-.16em; }
.split-lines .st-line{ padding-bottom:.04em; }

/* ============================================================
   ABOUT PAGE
   ============================================================ */
/* current-page nav link */
.nav__link.is-current{ color:var(--gold-deep); }
.nav__link.is-current::after{ transform:scaleX(1); transform-origin:left; }
.header.over-hero:not(.is-scrolled) .nav__link.is-current{ color:#fff; }

/* Hero variant — light editorial collage; photos peek in from the edges */
.hero--collage{
  color:var(--text); align-items:center; text-align:center; overflow:hidden;
  min-height:100svh; padding:clamp(120px,16vh,180px) 0 clamp(70px,9vh,110px);
  background:
    radial-gradient(120% 90% at 50% -10%, rgba(199,172,126,.22), transparent 60%),
    linear-gradient(180deg, var(--cream-2), var(--cream-3));
  text-shadow:none;
}
.hero__photos{ position:absolute; inset:0; z-index:0; pointer-events:none; }
.hero__photo{
  position:absolute; overflow:hidden; border-radius:var(--radius-lg); will-change:transform;
  box-shadow:0 34px 70px -30px rgba(44,39,31,.55);
}
.hero__photo::after{ content:""; position:absolute; inset:0; box-shadow:inset 0 0 0 1px rgba(255,255,255,.18); border-radius:inherit; }
.hero__photo img{ width:100%; height:100%; object-fit:cover; }
.hero__photo--tl{ width:clamp(190px,17vw,300px); aspect-ratio:4/5;  left:-2.5%; top:15%; }
.hero__photo--bl{ width:clamp(150px,13vw,235px); aspect-ratio:1/1;  left:-1.5%; bottom:8%; }
.hero__photo--tr{ width:clamp(150px,13vw,235px); aspect-ratio:1/1;  right:-1.5%; top:13%; }
.hero__photo--br{ width:clamp(200px,18vw,320px); aspect-ratio:4/5;  right:-2.5%; bottom:11%; }

.hero--collage .hero__content{ position:relative; z-index:2; max-width:780px; text-shadow:none; }
.hero--collage .hero__eyebrow{ color:var(--gold-deep); }
.hero--collage .hero__title{ margin-inline:auto; max-width:15ch; color:var(--bark); }
.hero--collage .hero__title em{ color:var(--gold-deep); }
.hero--collage .hero__lead{ margin-inline:auto; color:var(--text-soft); }
.hero--collage .hero__cta{ justify-content:center; }
/* hairline + dark scrim so the centered text always wins over a busy photo behind it */
.hero--collage .hero__content::before{
  content:""; position:absolute; z-index:-1; inset:-12% -8%;
  background:radial-gradient(60% 60% at 50% 48%, var(--cream-3) 38%, rgba(251,249,245,0) 78%);
}

/* ============================================================
   BREADCRUMBS
   ============================================================ */
.crumbs{ display:flex; align-items:center; flex-wrap:wrap; gap:.55rem;
  font-size:.8rem; font-weight:600; letter-spacing:.04em; text-transform:uppercase;
  margin-bottom:clamp(1rem,1.6vw,1.5rem); }
.crumbs a{ color:var(--text-soft); transition:color .3s var(--ease); }
.crumbs a:hover{ color:var(--gold-deep); }
.crumbs__sep{ color:var(--line); font-weight:400; }
.crumbs__current{ color:var(--bark); }
.crumbs--center{ justify-content:center; }
.crumbs--light a{ color:rgba(255,255,255,.72); }
.crumbs--light a:hover{ color:#fff; }
.crumbs--light .crumbs__sep{ color:rgba(255,255,255,.4); }
.crumbs--light .crumbs__current{ color:#fff; }

@media (max-width:1024px){
  /* keep only the top-left photo on tablet — the others crowded the text/buttons */
  .hero__photo--tr,.hero__photo--bl,.hero__photo--br{ display:none; }
  .hero__photo--tl{ width:clamp(140px,22vw,200px); top:11%; }
}
@media (max-width:680px){
  .hero--collage{ min-height:90svh; }
  /* small decorative peek in the corner, clear of the centred text */
  .hero__photo--tl{ width:clamp(110px,30vw,150px); left:-11%; top:5%; opacity:.7; }
}

/* ----- Intro statement ----- */
.about-intro{ padding:var(--section) 0; background:var(--bg); }
/* tag sits above the columns, with a clear gap before the content */
.about-intro__eyebrow{ margin-bottom:clamp(26px,3vw,44px); }
.about-intro__grid{ display:grid; grid-template-columns:1fr 1.45fr; gap:clamp(28px,5vw,75px); align-items:stretch; }
/* photo fills its column, so it matches the right text block's height exactly (rounded corners from .reveal-img) */
.about-intro__photo{ min-height:280px; border-radius:var(--radius-lg); overflow:hidden; }
.about-intro__photo img{ aspect-ratio:auto; width:100%; height:100%; object-fit:cover; object-position:40% 50%; }
.about-intro__lead{
  font-family:var(--display); font-weight:400; letter-spacing:-.012em;
  font-size:clamp(1.6rem,3.2vw,2.8rem); line-height:1.24; color:var(--bark);
}
.about-intro__lead em{ font-style:italic; color:var(--gold-deep); }
.about-intro__text{ margin-top:1.7rem; color:var(--text-soft); font-size:1.08rem; max-width:60ch; }
/* stat band at the foot of the intro block — no rules above the numbers, text left-aligned */
.about-intro__stats{ margin-top:clamp(48px,5vw,76px); padding-top:0; gap:clamp(20px,3vw,40px); }
.about-intro__stats .stat{ text-align:left; padding:0; }
.about-intro__stats .stat::before{ display:none; }
.about-intro__stats .stat__num{ font-size:clamp(2.2rem,4vw,3.2rem); }
.about-intro__stats .stat__label{ margin-inline:0; max-width:22ch; margin-top:8px; }

/* ----- Timeline ----- */
.timeline{ padding:clamp(64px,8vh,96px) 0; background:var(--cream-2); }
.timeline__head{ margin-bottom:clamp(28px,3.5vw,48px); text-align:center; }
.timeline__head .eyebrow{ margin-bottom:1rem; }
/* Stepped story: photo (left) holds, the year + text (right) swap one at a time on scroll.
   Columns are content-sized and centred as a group so the block never drifts left. */
.timeline__layout{ display:grid; grid-template-columns:auto auto; justify-content:center; gap:clamp(28px,4vw,72px); align-items:center; }
.timeline__visual{ grid-column:1; grid-row:1; }
.timeline__media{
  position:relative; width:clamp(340px,38vw,500px); aspect-ratio:1/1; max-height:50vh;
  border-radius:var(--radius-lg); overflow:hidden;
  background:var(--cream); box-shadow:0 40px 80px -44px rgba(44,39,31,.55);
}
.timeline__img{
  position:absolute; inset:0; width:100%; height:100%; object-fit:cover;
  opacity:0; transform:scale(1.08); transition:opacity 1s var(--ease), transform 1.8s var(--ease);
}
.timeline__img.is-active{ opacity:1; transform:scale(1); }

.timeline__stage{ grid-column:2; grid-row:1; position:relative; width:clamp(320px,40vw,520px); }
.timeline__steps{ position:relative; min-height:clamp(340px,44vh,460px); }
.tl-step{
  position:absolute; inset:0; display:flex; flex-direction:column; justify-content:center;
  opacity:0; transform:translateY(34px); pointer-events:none;
  transition:opacity .6s var(--ease), transform .8s var(--ease);
}
.tl-step.is-active{ opacity:1; transform:none; pointer-events:auto; }
.tl-step__year{
  font-family:var(--display); font-weight:430; line-height:1; color:var(--gold-deep);
  font-size:clamp(3rem,5.4vw,5rem); margin-bottom:.6rem;
}
.tl-step__title{ font-family:var(--display); font-weight:440; font-size:clamp(1.5rem,2.5vw,2.2rem); color:var(--bark); margin-bottom:.8rem; }
.tl-step__text{ color:var(--text-soft); font-size:1.1rem; max-width:46ch; }
/* per-step photo: only used by the mobile timeline carousel */
.tl-step__media{ display:none; }

.timeline__nav{ display:flex; gap:12px; margin-top:clamp(30px,3.4vw,44px); }
.timeline__dot{ width:46px; height:4px; border-radius:4px; background:var(--line); transition:background .4s var(--ease), transform .4s var(--ease); }
.timeline__dot.is-active{ background:var(--gold-deep); transform:scaleY(1.6); }
.timeline__dot:not(.is-active):hover{ background:var(--gold); }

/* ----- Values ----- */
.values{ padding:var(--section) 0; background:var(--bg); }
.values__head{ max-width:680px; margin:0 auto clamp(44px,5vw,68px); text-align:center; }
.values__head .h2{ margin-top:.2rem; }
.values__intro{ color:var(--text-soft); font-size:1.08rem; margin-top:1rem; }
.values__grid{ display:grid; grid-template-columns:repeat(3,1fr); gap:22px; }
.value{
  position:relative; background:var(--paper); border:1px solid var(--line); border-radius:var(--radius-lg);
  padding:clamp(30px,3vw,46px); display:flex; flex-direction:column; gap:14px; overflow:hidden;
  transition:transform .45s var(--ease), box-shadow .45s var(--ease);
}
.value::before{ content:""; position:absolute; top:0; left:0; width:100%; height:3px; background:linear-gradient(90deg,var(--gold),var(--gold-soft)); transform:scaleX(0); transform-origin:left; transition:transform .5s var(--ease); }
.value:hover{ transform:translateY(-6px); box-shadow:0 34px 64px -40px rgba(44,39,31,.45); }
.value:hover::before{ transform:scaleX(1); }
.value__num{ font-family:var(--display); font-size:2.6rem; color:var(--gold); line-height:1; }
.value h3{ font-family:var(--display); font-weight:440; font-size:1.5rem; color:var(--bark); }
.value p{ color:var(--text-soft); font-size:1rem; }

/* ----- Founders feature ----- */
.founders{ padding:var(--section) 0; background:var(--paper); }
.founders__grid{ display:grid; grid-template-columns:1fr 1fr; gap:clamp(40px,7vw,100px); align-items:center; }
.founders__text{ color:var(--text-soft); font-size:1.08rem; margin-top:1.4rem; max-width:50ch; }
.founders__text em{ font-style:italic; color:var(--gold-deep); }
.founders__sign{ font-family:var(--display); font-style:italic; font-size:1.3rem; color:var(--bark); margin-top:1.9rem; }
.founders__media{ position:relative; }
.founders__media .reveal-img img{ aspect-ratio:4/4.6; }
.founders__quote{
  position:absolute; right:clamp(-16px,-1.4vw,-26px); bottom:-26px; max-width:300px;
  background:var(--bark); color:#fff; border-radius:20px; padding:24px 26px;
  box-shadow:0 24px 50px -20px rgba(44,39,31,.6);
  font-family:var(--display); font-style:italic; font-size:1.14rem; line-height:1.42;
}

/* ----- Pull quote ----- */
.quote{ padding:clamp(90px,12vw,160px) 0; background:var(--bark-deep); color:#fff; text-align:center; position:relative; overflow:hidden; }
.quote .container{ position:relative; z-index:1; max-width:980px; }
.quote__mark{ font-family:var(--display); font-size:6rem; color:var(--gold); line-height:.5; opacity:.55; }
.quote__text{
  font-family:var(--display); font-weight:370; letter-spacing:-.01em;
  font-size:clamp(1.6rem,3.7vw,3rem); line-height:1.3; max-width:24ch; margin:1.1rem auto 1.6rem;
}
.quote__text em{ font-style:italic; color:var(--gold-soft); }
.quote__by{ color:rgba(255,255,255,.7); font-size:.98rem; letter-spacing:.04em; }

/* ============================================================
   RESPONSIVE
   ============================================================ */
@media (max-width:1024px){
  :root{ --section:88px; }
  .nav{ display:none; }
  .burger{ display:block; }
  .header__donate{ display:none; }
  .header__actions{ gap:10px; }
  .lang--menu{ display:none; }            /* avoid a duplicate switcher inside the menu */
  .story__grid,.donate__grid,.animals__head,.sponsor__inner{ grid-template-columns:1fr; }
  .sponsor__media{ min-height:300px; grid-row:1; }
  .donate__grid{ gap:50px; }
  .programs{ grid-template-columns:1fr 1fr; }
  .program--feature{ grid-column:span 2; }
  .help__grid{ grid-template-columns:1fr 1fr; }
  .stats__grid{ grid-template-columns:1fr 1fr; gap:36px 24px; }
  .footer__grid{ grid-template-columns:1fr 1fr; }
  .about-intro__grid,.founders__grid{ grid-template-columns:1fr; gap:34px; }
  .about-intro__grid{ align-items:start; }
  .about-intro__photo{ max-width:520px; min-height:0; }
  .about-intro__photo img{ height:auto; aspect-ratio:3/2; }
  .timeline__layout{ display:block; }
  .timeline__visual{ display:none; }
  /* photo + text carousel with dots — plain (no card box) */
  .timeline__stage{ width:auto; min-width:0; }
  .timeline__steps{ min-height:0; min-width:0; }
  .timeline__steps.swiper{ display:block; overflow:hidden; }
  .timeline__steps .swiper-slide{ height:auto; }
  .tl-step{ position:relative; inset:auto; opacity:1; transform:none; pointer-events:auto; }
  .tl-step__media{ display:block; aspect-ratio:4/3; border-radius:var(--radius-lg); overflow:hidden; margin-bottom:clamp(16px,4vw,22px); }
  .tl-step__media img{ width:100%; height:100%; object-fit:cover; }
  .tl-step__text{ max-width:none; }
  .timeline__nav{ display:none; }
  .timeline__steps .cards-dots{ display:flex; }
  .founders__media{ grid-row:1; }
  .values__grid{ grid-template-columns:1fr; max-width:560px; margin-inline:auto; }
}
@media (max-width:680px){
  :root{ --radius-lg:22px; --section:60px; }
  /* compact buttons — never wrap the label onto a second line */
  .btn{ padding:.82em 1.4em; font-size:.82rem; white-space:nowrap; }
  .btn--wide{ padding-inline:2.2em; }
  /* smaller, tighter logo on mobile so it sits further from the language switcher */
  .header__mark{ height:40px; }
  .header__brand{ gap:9px; margin-right:14px; }
  .hero{ min-height:92svh; }
  .hero__cta{ width:auto; gap:10px; } .hero__cta .btn{ flex:0 1 auto; }
  .hero__scroll{ display:none; }
  .story__badge{ left:14px; bottom:-20px; padding:18px 20px; min-width:auto; }
  .story__badge-num{ font-size:2rem; }
  .programs,.diary__grid{ grid-template-columns:1fr; }
  .gallery__grid{ grid-template-columns:repeat(2,1fr); grid-auto-rows:clamp(130px,40vw,170px); }
  .g-item--tall{ grid-row:span 1; }
  .g-item--mobile{ display:block; }
  .program--feature{ grid-column:span 1; flex-direction:column; height:auto; }
  .program--feature img{ width:100%; height:auto; aspect-ratio:4/3; }
  .help__grid{ grid-template-columns:1fr; }
  .amounts{ grid-template-columns:1fr 1fr; }
  .footer__grid{ grid-template-columns:1fr; gap:30px; }
  .footer__bottom{ flex-direction:column; gap:8px; }
  /* sponsor: slimmer email field, bigger prominent button */
  .sponsor__form{ gap:14px; }
  .sponsor__form input{ min-width:0; padding:.8em 1.3em; font-size:.92rem; }
  .sponsor__form .btn{ width:100%; padding:1.15em 1.9em; font-size:.95rem; }
  .tl-item{ grid-template-columns:1fr; gap:6px; }
  .tl-item__body{ border-left:none; padding-left:0; padding-bottom:clamp(30px,8vw,42px); }
  .tl-item__body::before{ display:none; }
  .tl-item:not(:last-child){ border-bottom:1px solid var(--line); padding-bottom:26px; margin-bottom:26px; }
  .founders__quote{ position:static; max-width:none; margin-top:34px; }

  /* stats — keep the big numbers inside their column (no clipping) */
  .stats__grid{ gap:30px 14px; }
  .stat{ padding:22px 6px 20px; }
  .stat__num{ font-size:clamp(1.7rem,6.4vw,2.3rem); white-space:nowrap; }
  .stat__label{ font-size:.86rem; max-width:16ch; }

  /* animals — one full card, no peek; arrows + dots sit below */
  .animals__swiper{ padding-left:0; margin-inline:var(--gut); overflow:hidden; }
  .a-card{ width:100%; }
  .animals__controls{ padding-inline:0; margin-top:24px; gap:14px; }
  .animals__controls .swiper-pagination-bullet{ width:20px; }
  .animals__btns{ gap:10px; flex-shrink:0; }
  .animals .circle-btn{ width:46px; height:46px; font-size:1.05rem; }

  /* card carousels (programs visit-cards / help / diary / ways / vknow / vstats) */
  .programs{ display:block; }            /* feature on top, carousel below */
  .programs__carousel{ margin-top:22px; }
  .programs__carousel.swiper,
  .help__grid.swiper,
  .diary__grid.swiper,
  .ways__grid.swiper,
  .vknow__grid.swiper,
  .wh__grid.swiper,
  .srelated__grid.swiper,
  .social__grid.swiper,
  .vstats .stats__grid.swiper{ display:block; overflow:hidden; }
  .programs__carousel .swiper-slide,
  .help__grid .swiper-slide,
  .diary__grid .swiper-slide,
  .ways__grid .swiper-slide,
  .vknow__grid .swiper-slide,
  .wh__grid .swiper-slide,
  .srelated__grid .swiper-slide,
  .social__grid .swiper-slide,
  .vstats .stats__grid .swiper-slide{ height:auto; }
  .program--feature{ height:auto; }
  /* swiperized cards must stay visible even when scrolled in off-canvas */
  html.reveals .help__grid .reveal-card,
  html.reveals .diary__grid .reveal-card,
  html.reveals .srelated__grid .reveal-card,
  html.reveals .social__grid .reveal-card,
  html.reveals .ways__grid .reveal-up,
  html.reveals .vknow__grid .reveal-up,
  html.reveals .wh__grid .reveal-up{ opacity:1; transform:none; }

  /* smaller buttons, labels on one line + tighter gaps between blocks */
  .btn{ padding:.82em 1.35em; font-size:.86rem; white-space:nowrap; }
  :root{ --section:64px; }
}
@media (prefers-reduced-motion:reduce){
  *{ animation-duration:.001ms !important; transition-duration:.001ms !important; }
  .hero__img{ transform:none; height:100%; }
  /* show every timeline step (no scroll-driven stepping) */
  .timeline__steps{ min-height:0; display:flex; flex-direction:column; gap:34px; }
  .tl-step{ position:relative; inset:auto; opacity:1; transform:none; pointer-events:auto; }
  .timeline__nav{ display:none; }
}

/* ============================================================
   SOCIAL CARDS  (shared — blog "Follow us" + contact page)
   ============================================================ */
.social{ padding:var(--section) 0; background:var(--cream-2); }
.social__head{ display:grid; grid-template-columns:1.1fr 1fr; align-items:end; gap:clamp(24px,4vw,60px);
  margin-bottom:clamp(40px,4.5vw,64px); }
.social__lead{ color:var(--text-soft); font-size:clamp(1rem,1.3vw,1.14rem); max-width:46ch; }
.social__grid{ display:grid; grid-template-columns:repeat(3,1fr); gap:clamp(18px,2vw,26px); }

.scard{ position:relative; display:flex; flex-direction:column; align-items:flex-start;
  padding:clamp(26px,2.6vw,40px); border-radius:var(--radius-lg);
  background:var(--cream-3); border:1px solid var(--line);
  transition:transform .5s var(--ease), box-shadow .5s var(--ease), border-color .5s var(--ease); }
.scard:hover{ transform:translateY(-6px); box-shadow:0 36px 64px -42px rgba(44,39,31,.45); border-color:transparent; }

.scard__ico{ width:clamp(50px,4vw,60px); aspect-ratio:1; border-radius:16px; display:grid; place-items:center;
  color:#fff; margin-bottom:clamp(20px,2.2vw,30px); box-shadow:0 14px 26px -14px rgba(44,39,31,.5); }
.scard__ico svg{ width:54%; height:54%; }
.scard--ig .scard__ico{ background:linear-gradient(135deg,#feda75,#fa7e1e 28%,#d62976 60%,#962fbf 84%,#4f5bd5); }
.scard--fb .scard__ico{ background:#1877f2; }
.scard--yt .scard__ico{ background:#ff0000; }

.scard__name{ font-size:.78rem; font-weight:700; letter-spacing:.1em; text-transform:uppercase;
  color:var(--text-soft); margin-bottom:.5rem; }
.scard__handle{ font-family:var(--display); font-weight:500; font-size:clamp(1.3rem,1.9vw,1.65rem);
  line-height:1.1; color:var(--bark); }
.scard__sub{ color:var(--text-soft); font-size:.96rem; margin-top:.4rem; }
.scard__follow{ margin-top:clamp(22px,2.6vw,34px); display:inline-flex; align-items:center; gap:8px;
  font-weight:700; font-size:.92rem; color:var(--bark); transition:color .35s var(--ease); }
.scard__follow svg{ width:15px; height:15px; transition:transform .35s var(--ease); }
.scard:hover .scard__follow{ color:var(--gold-deep); }
.scard:hover .scard__follow svg{ transform:translateX(4px); }

@media (max-width:880px){
  .social__head{ grid-template-columns:1fr; align-items:start; }
  .social__grid{ grid-template-columns:1fr; max-width:440px; margin-inline:auto; }
}

/* ============================================================
   BOOKING CART (drawer, header button, toast) — shared
   ============================================================ */
.cart-btn{ position:relative; width:42px; height:42px; border-radius:50%; display:grid; place-items:center;
  border:1.5px solid var(--line); color:var(--bark); background:transparent; transition:.3s var(--ease); }
.cart-btn:hover{ border-color:var(--gold); color:var(--gold-deep); }
.cart-btn svg{ width:20px; height:20px; }
.header.over-hero:not(.is-scrolled) .cart-btn{ border-color:rgba(255,255,255,.5); color:#fff; }
.cart-badge{ position:absolute; top:-5px; right:-5px; min-width:19px; height:19px; padding:0 5px; border-radius:100px;
  background:var(--gold-deep); color:#fff; font-size:.7rem; font-weight:800; display:grid; place-items:center; line-height:1; }

.cart-overlay{ position:fixed; inset:0; z-index:200; background:rgba(20,16,10,.5); backdrop-filter:blur(3px);
  opacity:0; visibility:hidden; transition:opacity .4s var(--ease), visibility .4s; }
.cart-overlay.is-open{ opacity:1; visibility:visible; }
.cart-drawer{ position:fixed; top:0; right:0; z-index:201; width:min(420px,92vw); height:100%;
  background:var(--cream-3); display:flex; flex-direction:column; transform:translateX(100%);
  transition:transform .5s var(--ease); box-shadow:-30px 0 80px -40px rgba(44,39,31,.6); }
.cart-drawer.is-open{ transform:translateX(0); }
.cart-drawer__head{ display:flex; align-items:center; justify-content:space-between; padding:22px 24px;
  border-bottom:1px solid var(--line); }
.cart-drawer__head h3{ font-family:var(--display); font-weight:500; font-size:1.4rem; color:var(--bark); }
.cart-close{ font-size:1.6rem; line-height:1; color:var(--text-soft); width:36px; height:36px; border-radius:50%;
  transition:.3s var(--ease); }
.cart-close:hover{ background:var(--cream); color:var(--bark); }
.cart-drawer__body{ flex:1; overflow-y:auto; padding:8px 24px; }
.cart-empty{ min-height:100%; text-align:center; padding:40px 0; color:var(--text-soft); display:flex; flex-direction:column; gap:14px; align-items:center; justify-content:center; }
.cart-empty__ico{ width:66px; height:66px; border-radius:50%; display:grid; place-items:center; background:var(--cream); border:1px solid var(--line); color:var(--gold-deep); }
.cart-empty__ico svg{ width:28px; height:28px; }
.cart-empty h4{ font-family:var(--display); font-weight:500; font-size:1.3rem; color:var(--bark); }
.cart-empty p{ font-size:.92rem; max-width:30ch; margin-bottom:4px; }

.cart-line{ display:grid; grid-template-columns:64px 1fr auto; gap:14px; padding:18px 0; border-bottom:1px solid var(--line); }
.cart-line__media{ width:64px; height:64px; border-radius:12px; overflow:hidden; background:var(--cream); }
.cart-line__media img{ width:100%; height:100%; object-fit:cover; }
.cart-line__info b{ display:block; font-family:var(--display); font-weight:500; font-size:1.05rem; color:var(--bark); line-height:1.15; }
.cart-line__meta{ display:block; font-size:.82rem; color:var(--text-soft); margin:4px 0 0; }
.cart-line__info .qty{ margin-top:11px; }
.cart-line__right{ text-align:right; display:flex; flex-direction:column; align-items:flex-end; justify-content:space-between; }
.cart-line__price{ font-weight:700; color:var(--bark); white-space:nowrap; }
.cart-line__rm{ font-size:.78rem; color:var(--text-soft); text-decoration:underline; text-underline-offset:2px; transition:color .3s var(--ease); }
.cart-line__rm:hover{ color:#a6442f; }

.qty{ display:inline-flex; align-items:center; gap:0; border:1.5px solid var(--line); border-radius:100px; overflow:hidden; }
.qty__btn{ width:30px; height:30px; display:grid; place-items:center; color:var(--bark); font-size:1.05rem; transition:background .25s var(--ease); }
.qty__btn:hover{ background:var(--cream); }
.qty__n{ min-width:30px; text-align:center; font-weight:700; font-size:.92rem; color:var(--bark); }
input.qty__n{ border:none; background:transparent; -moz-appearance:textfield; }
input.qty__n::-webkit-outer-spin-button, input.qty__n::-webkit-inner-spin-button{ -webkit-appearance:none; margin:0; }

.cart-foot{ border-top:1px solid var(--line); padding:20px 24px 24px; }
.cart-foot__row{ display:flex; justify-content:space-between; align-items:baseline; margin-bottom:14px; font-size:1.05rem; }
.cart-foot__row b{ font-family:var(--display); font-size:1.5rem; color:var(--bark); }
.cart-foot__note{ font-size:.82rem; color:var(--text-soft); margin-bottom:14px; }
.cart-foot__clear{ display:block; width:100%; text-align:center; margin-top:12px; font-size:.84rem; color:var(--text-soft); text-decoration:underline; text-underline-offset:3px; }
.cart-foot__clear:hover{ color:var(--bark); }

.cart-toast{ position:fixed; left:50%; bottom:30px; transform:translate(-50%,20px); z-index:300;
  background:var(--bark-deep); color:#fff; padding:13px 22px; border-radius:100px; font-weight:600; font-size:.92rem;
  box-shadow:0 20px 50px -20px rgba(44,39,31,.7); opacity:0; visibility:hidden; transition:.4s var(--ease); }
.cart-toast.is-show{ opacity:1; visibility:visible; transform:translate(-50%,0); }

@media (max-width:560px){ .cart-drawer{ width:100vw; } }

/* ============================================================
   MODAL (shared) — thank-you + Book-a-Visit popup
   ============================================================ */
.modal{ position:fixed; inset:0; z-index:300; display:grid; place-items:center; padding:24px; }
.modal__overlay{ position:absolute; inset:0; background:rgba(20,16,10,.55); backdrop-filter:blur(4px); animation:modalFade .4s var(--ease); }
.modal__card{ position:relative; z-index:1; width:100%; max-width:480px; background:var(--cream-3); border-radius:var(--radius-lg);
  padding:clamp(38px,5vw,60px); text-align:center; display:flex; flex-direction:column; gap:16px; align-items:center;
  box-shadow:0 50px 100px -40px rgba(44,39,31,.65); animation:modalIn .45s var(--ease); max-height:90vh; overflow:auto;
  scrollbar-width:none; -ms-overflow-style:none; }
.modal__card::-webkit-scrollbar{ width:0; height:0; display:none; }
body.modal-open{ overflow:hidden; }
@keyframes modalFade{ from{ opacity:0; } to{ opacity:1; } }
@keyframes modalIn{ from{ opacity:0; transform:translateY(18px) scale(.97); } to{ opacity:1; transform:none; } }
.modal__close{ position:absolute; top:14px; right:16px; width:38px; height:38px; border-radius:50%; font-size:1.7rem; line-height:1; color:var(--text-soft); transition:.3s var(--ease); z-index:2; }
.modal__close:hover{ background:var(--cream); color:var(--bark); }
.modal__card h2{ font-family:var(--display); font-weight:500; font-size:clamp(1.6rem,2.6vw,2.1rem); color:var(--bark); }
.modal__card p{ color:var(--text-soft); max-width:42ch; }
.modal__card .btn{ margin-top:6px; }
/* thank-you popup: keep the heading on one line */
#thankModal .modal__card{ max-width:600px; }
#thankModal .modal__card h2{ font-size:clamp(1.5rem,2.4vw,1.95rem); }

/* Book-a-Visit popup (quick request form) */
.bookmodal__card{ max-width:520px; text-align:left; align-items:stretch; gap:0; padding:clamp(32px,4.2vw,48px); }
.bookmodal__head{ text-align:center; margin-bottom:clamp(20px,3vw,28px); }
.bookmodal__title{ font-family:var(--display); font-weight:500; font-size:clamp(1.6rem,2.6vw,2.05rem); color:var(--bark); margin:.3rem 0 .6rem; }
.bookmodal__sub{ color:var(--text-soft); font-size:.95rem; max-width:44ch; margin:0 auto; }
.bookmodal__form{ display:grid; grid-template-columns:1fr 1fr; gap:14px; }
.bf{ display:flex; flex-direction:column; gap:6px; }
.bf--full{ grid-column:1 / -1; }
.bf label{ font-size:.82rem; font-weight:600; color:var(--bark); }
.bf .req{ color:var(--gold-deep); }
.bf input, .bf select{ width:100%; padding:12px 14px; font:inherit; font-size:.96rem; color:var(--text);
  background:var(--bg); border:1.5px solid var(--line); border-radius:12px; transition:border-color .3s var(--ease), box-shadow .3s var(--ease); }
.bf input::placeholder{ color:#a59a88; }
.bf input:focus, .bf select:focus{ outline:none; border-color:var(--gold); box-shadow:0 0 0 4px rgba(169,140,93,.12); }
.bf select{ appearance:none; cursor:pointer; padding-right:38px;
  background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='14' height='14' viewBox='0 0 24 24' fill='none' stroke='%238A6F45' stroke-width='2.4' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='m6 9 6 6 6-6'/%3E%3C/svg%3E");
  background-repeat:no-repeat; background-position:right 14px center; }
.bookmodal__form .btn{ grid-column:1 / -1; width:100%; margin-top:4px; }
.bookmodal__form .bookmodal__note{ grid-column:1 / -1; font-size:.8rem; color:var(--text-soft); text-align:center; margin-top:2px; max-width:none; }
.bookmodal__done{ text-align:center; display:flex; flex-direction:column; gap:14px; align-items:center; padding:8px 0; }
.bookmodal__ico{ width:62px; height:62px; border-radius:50%; display:grid; place-items:center; background:var(--gold-deep); color:#fff; }
.bookmodal__ico svg{ width:28px; height:28px; }
.bookmodal__done h2{ font-family:var(--display); font-weight:500; font-size:clamp(1.4rem,2.2vw,1.8rem); color:var(--bark); }
.bookmodal__done p{ color:var(--text-soft); max-width:36ch; }
@media (max-width:520px){ .bookmodal__form{ grid-template-columns:1fr; } }

/* Slide-in booking nudge */
.booknudge{ position:fixed; right:20px; bottom:20px; z-index:250; width:300px; max-width:calc(100vw - 32px);
  background:var(--cream-3); border:1px solid var(--line); border-radius:18px; padding:18px 18px 18px 16px;
  box-shadow:0 30px 60px -28px rgba(44,39,31,.55); display:flex; gap:13px; align-items:flex-start;
  transform:translateY(150%); opacity:0; transition:transform .55s var(--ease), opacity .55s var(--ease); }
.booknudge.is-in{ transform:none; opacity:1; }
.booknudge__close{ position:absolute; top:8px; right:11px; font-size:1.3rem; line-height:1; color:var(--text-soft); transition:color .3s var(--ease); }
.booknudge__close:hover{ color:var(--bark); }
.booknudge__ico{ flex:none; width:42px; height:42px; border-radius:12px; display:grid; place-items:center; background:var(--gold-deep); color:#fff; }
.booknudge__ico svg{ width:21px; height:21px; }
.booknudge__body b{ display:block; font-family:var(--display); font-weight:500; font-size:1.06rem; color:var(--bark); line-height:1.15; }
.booknudge__body p{ font-size:.86rem; color:var(--text-soft); margin:4px 0 11px; }
.booknudge__cta{ font-weight:700; font-size:.88rem; color:var(--gold-deep); transition:color .3s var(--ease); }
.booknudge__cta:hover{ color:var(--bark); }
@media (max-width:480px){ .booknudge{ right:12px; left:12px; bottom:12px; width:auto; } }