/* ═══════════════════════════════════════════════════════════════
   SOWPARNIKA · ROOTS FOR TOMORROW — HOSKOTE–WHITEFIELD PRE-LAUNCH
   Landing page styles
   ═══════════════════════════════════════════════════════════════ */

:root{
  /* Brand — orange leads, everything else supports it */
  --brand:#B55D39;
  --brand-dk:#95482A;
  --brand-lt:#D08056;
  --amber:#C68848;
  --amber-lt:#E0AC74;

  /* sampled from the master campaign creative */
  --ground:#F2E4D6;            /* the page itself */
  --ground-lt:#FBF3EA;         /* the lighter alternating band */
  --cream:#F6E6D7;
  --cream-lt:#FBF3EA;
  --cream-dp:#E7D4C0;

  --olive:#616443;
  --olive-dk:#434733;
  --olive-lt:#6B7153;

  --ink:#413E3C;
  --ink-soft:#6B6259;
  --line:#E2D2C0;
  --paper:#FFFFFF;

  /* Optima carries everything the visitor reads; Golos does the UI work */
  --serif:'Optima','Optima Nova',Candara,'Gill Sans',sans-serif;
  --sans:'Golos Text','Segoe UI',system-ui,sans-serif;
  --ease:cubic-bezier(.22,.61,.36,1);

  --r:5px;                     /* every box and button shares this curve */
  --r-lg:8px;
  --sh-1:0 2px 10px -6px rgba(43,39,35,.18);
  --sh-2:0 18px 38px -26px rgba(43,39,35,.38);
  --sh-3:0 34px 70px -40px rgba(43,39,35,.5);

  --pad:clamp(20px,5vw,72px);
  --gut:min(1240px,100% - var(--pad)*2);
}

*,*::before,*::after{ box-sizing:border-box; }

html{ scroll-behavior:smooth; -webkit-text-size-adjust:100%; }

body{
  margin:0;
  font-family:var(--serif);
  font-weight:400;
  font-size:clamp(15px,.42vw + 13.6px,16.5px);
  line-height:1.72;
  color:var(--ink);
  background:var(--ground);
  -webkit-font-smoothing:antialiased;
  overflow-x:hidden;
}
body.no-scroll{ overflow:hidden; }

img,svg{ max-width:100%; display:block; }
a{ color:inherit; text-decoration:none; }
button{ font:inherit; color:inherit; border:0; background:none; cursor:pointer; }
input,select,textarea{ font:inherit; color:inherit; }

h1,h2,h3,h4{
  font-family:var(--serif);
  font-weight:500;
  line-height:1.12;
  letter-spacing:-.006em;
  margin:0;
  color:var(--ink);
}

.wrap{ width:var(--gut); margin-inline:auto; }

.sr-only{
  position:absolute; width:1px; height:1px; padding:0; margin:-1px;
  overflow:hidden; clip:rect(0 0 0 0); white-space:nowrap; border:0;
}


/* ─────────────────────── UI layer ───────────────────────
   Controls and labels set in Golos; everything the visitor reads stays Optima. */
.btn,.eyebrow,.nav a,.mobNav a,.hdr__tel,.hero__meta,
.glance__i span,.glance__i small,.loc__c li b,
.fld label,.fld input,.hint,.err,.chk label,.cpick,.frm__note,.fcard__sub,
.ft h4,.ft ul,.ft__bar,
.mbar,.modal__sub,.ty__steps span,.ty__back{ font-family:var(--sans); }


/* ─────────────────────── Shared type bits ─────────────────────── */

/* small letterspaced label with a leading rule — used above every heading */
.eyebrow{
  display:flex; flex-wrap:wrap; align-items:center; gap:6px 12px;
  font-size:.66rem; font-weight:500; letter-spacing:.26em;
  text-transform:uppercase; color:var(--brand);
  margin:0 0 18px;
}
.eyebrow--c{ justify-content:center; }
.eyebrow--onDark{ color:var(--amber-lt); }

.h2{ font-size:clamp(1.9rem,3.3vw,3rem); }
.h3{ font-size:clamp(1.3rem,1.7vw,1.6rem); }

.lede{
  font-size:clamp(1rem,.42vw + .92rem,1.12rem);
  color:var(--ink-soft);
  max-width:62ch;
  margin:20px 0 0;
}
.lede--c{ margin-inline:auto; text-align:center; }

.sect{ padding:clamp(64px,8vw,116px) 0; }
.sect{ background:var(--ground); }
.sect--cream{ background:var(--ground-lt); }
.sect--olive{ background:var(--olive-dk); color:var(--cream); }
.sect--olive h2,.sect--olive h3{ color:var(--cream-lt); }
.sect--olive .fcard h2,.sect--olive .fcard h3{ color:var(--ink); }
.sect--olive .lede{ color:rgba(243,231,218,.76); }

.sect__head{ max-width:none; margin-bottom:clamp(34px,4vw,54px); }
.sect__head--c{ text-align:center; display:flex; flex-direction:column; align-items:center; }


/* ─────────────────────── Buttons ─────────────────────── */

.btn{
  position:relative; overflow:hidden;
  display:inline-flex; align-items:center; justify-content:center; gap:10px;
  padding:15px 30px;
  font-size:.7rem; font-weight:600; letter-spacing:.19em; text-transform:uppercase;
  border:1px solid transparent; border-radius:var(--r);
  transition:.32s var(--ease);
  white-space:nowrap; cursor:pointer;
}
.btn svg{ width:15px; height:15px; flex:none; }

.btn--fill{ background:var(--brand); color:#fff; box-shadow:0 10px 26px -12px rgba(181,93,57,.85); }
.btn--fill:hover{ background:var(--brand-dk); transform:translateY(-2px); box-shadow:0 16px 32px -14px rgba(149,72,42,.9); }

.btn--line{ border-color:var(--line); color:var(--ink); background:transparent; }
.btn--line:hover{ border-color:var(--brand); color:var(--brand); background:rgba(181,93,57,.05); }

.btn--onDark{ border-color:rgba(243,231,218,.34); color:var(--cream); }
.btn--onDark:hover{ border-color:var(--amber-lt); color:var(--amber-lt); background:rgba(243,231,218,.06); }

.btn--green{ background:var(--olive); color:var(--cream-lt); box-shadow:0 10px 26px -12px rgba(81,86,61,.85); }
.btn--green:hover{ background:var(--olive-dk); transform:translateY(-2px); box-shadow:0 16px 32px -14px rgba(59,63,44,.9); }

.btn--wide{ width:100%; }
.btn--sm{ padding:12px 22px; font-size:.64rem; }

/* submit spinner — the label is swapped for a ring while the CRM answers */
.btn.is-busy{ pointer-events:none; color:transparent !important; }
.btn.is-busy::after{
  content:''; position:absolute; inset:0; margin:auto;
  width:17px; height:17px; border-radius:50%;
  border:2px solid rgba(255,255,255,.35); border-top-color:#fff;
  animation:spin .7s linear infinite;
}
.btn--line.is-busy::after,.btn--onDark.is-busy::after{
  border-color:rgba(181,93,57,.25); border-top-color:var(--brand);
}
@keyframes spin{ to{ transform:rotate(360deg); } }


/* ─────────────────────── Header ─────────────────────── */

.hdr{
  position:fixed; inset:0 0 auto; z-index:40;
  display:flex; align-items:center; justify-content:space-between; gap:22px;
  padding:16px var(--pad);
  transition:.4s var(--ease);
}
.hdr::before{
  content:''; position:absolute; inset:0; z-index:-1;
  background:rgba(255,255,255,.9);
  backdrop-filter:saturate(150%) blur(14px);
  -webkit-backdrop-filter:saturate(150%) blur(14px);
  border-bottom:1px solid transparent;
  opacity:0; transition:.4s var(--ease);
}
.hdr.is-stuck{ padding-block:10px; }
.hdr.is-stuck::before{ opacity:1; border-bottom-color:var(--line); box-shadow:0 10px 34px -22px rgba(43,39,35,.5); }

.hdr__logo img{ height:clamp(38px,4vw,52px); width:auto; transition:.4s var(--ease); }
.hdr.is-stuck .hdr__logo img{ height:clamp(34px,3.4vw,44px); }

.nav{ display:flex; align-items:center; gap:clamp(14px,1.5vw,24px); }
.nav a{
  font-size:.71rem; font-weight:400; letter-spacing:.15em; text-transform:uppercase;
  color:var(--ink-soft); position:relative; padding-block:6px;
  transition:.28s var(--ease);
}
.nav a::after{
  content:''; position:absolute; left:0; bottom:0; height:1px; width:0;
  background:var(--brand); transition:.32s var(--ease);
}
.nav a:hover,.nav a.is-here{ color:var(--brand); }
.nav a:hover::after,.nav a.is-here::after{ width:100%; }
.nav a.is-here{ font-weight:500; }

.hdr__act{ display:flex; align-items:center; gap:14px; }
.hdr__tel{
  display:inline-flex; align-items:center; gap:8px;
  font-size:.78rem; font-weight:500; letter-spacing:.06em; color:var(--ink);
}
.hdr__tel svg{ width:15px; height:15px; color:var(--brand); flex:none; }
.hdr__tel:hover{ color:var(--brand); }

.burger{ display:none; width:40px; height:34px; position:relative; }
.burger span{
  position:absolute; left:8px; right:8px; height:1.6px; background:var(--ink);
  transition:.34s var(--ease);
}
.burger span:nth-child(1){ top:11px; }
.burger span:nth-child(2){ top:17px; }
.burger span:nth-child(3){ top:23px; }
.burger.is-on span:nth-child(1){ top:17px; transform:rotate(45deg); }
.burger.is-on span:nth-child(2){ opacity:0; }
.burger.is-on span:nth-child(3){ top:17px; transform:rotate(-45deg); }

.mobNav{
  position:fixed; inset:0 0 auto; z-index:39;
  padding:92px var(--pad) 26px;
  max-height:100vh; overflow-y:auto;
  background:var(--paper);
  border-bottom:1px solid var(--line);
  box-shadow:0 24px 48px -30px rgba(43,39,35,.5);
  display:flex; flex-direction:column; gap:2px;
  transform:translateY(-102%);
  transition:.46s var(--ease);
}
.mobNav.is-open{ transform:translateY(0); }
.mobNav a.is-here{ color:var(--brand); }
.mobNav a{
  padding:12px 0; border-bottom:1px solid var(--line);
  font-size:.78rem; letter-spacing:.16em; text-transform:uppercase; color:var(--ink);
}
.mobNav .btn{ margin-top:18px; }


/* ═══════════════════════ HERO ═══════════════════════
   The master campaign visual is the hero. Its own ground is the same cream
   as the page, so it is laid in full width — the kite lifts clear of the
   frame and the artwork never reads as a pasted-in box. The copy sits in
   the open ground the artwork deliberately leaves on its left.           */

.hero{
  position:relative;
  background:var(--ground);
  overflow:hidden;
  isolation:isolate;
}
.hero::before{ display:none; }

.hero__art{
  position:relative; z-index:0;
  width:100%; line-height:0; font-size:0;
  animation:artIn 1.2s cubic-bezier(.2,.7,.2,1) both;
}

/* Shown only if the browser refuses autoplay (iOS Low Power Mode is the
   usual reason). Better an obvious control than a frame that looks broken. */
.hero__play{
  position:absolute; z-index:2; inset:0; margin:auto;
  width:72px; height:72px; border-radius:50%;
  display:grid; place-items:center;
  background:rgba(255,255,255,.94); color:var(--brand);
  box-shadow:0 16px 36px -12px rgba(43,39,35,.55);
  transition:.3s var(--ease);
}
.hero__play[hidden]{ display:none; }
.hero__play svg{ width:26px; height:26px; margin-left:4px; }
.hero__play:hover{ background:var(--brand); color:#fff; transform:scale(1.07); }

.hero__vid{
  display:block; width:100%; height:auto;
  aspect-ratio:16/9;
  /* the film carries its own cream, so it meets the page with no seam */
  background:var(--ground);
}
@media (max-width:720px){
  /* the phone gets its own cut of the film, framed on the family and the
     kite, so it fills the narrow screen instead of sitting in it */
  .hero__vid{ aspect-ratio:1080/816; }
}
@keyframes artIn{ from{ opacity:0; } }

/* the copy sits over the open ground the film leaves on its left */
.hero__inner{
  position:absolute; inset:0; z-index:1;
  display:flex; align-items:center;
  padding-top:64px;                      /* clears the floating header */
  pointer-events:none;
}
.hero__inner .wrap{ width:var(--gut); margin-inline:auto; }
.hero__copy{ max-width:min(47%,600px); pointer-events:auto; }

/* the campaign's question leads the frame; the headline supports it */
.hero__hook{
  margin:0 0 20px;
  font-family:var(--serif); font-weight:700;
  font-size:clamp(1.75rem,3.4vw,3rem);
  line-height:1.1; letter-spacing:-.018em;
  color:var(--brand);
}

.hero h1{
  font-size:clamp(1.15rem,1.55vw,1.5rem);
  font-weight:500; letter-spacing:.005em; line-height:1.4;
  margin:0; color:var(--ink-soft);
}
.hero h1 em{ font-style:normal; font-weight:600; color:var(--ink); }


/* the campaign's own lock-up: a light label over the project name */
.hero__name{ margin:26px 0 0; }
.hero__name span{
  display:block; white-space:nowrap;
  font-family:var(--sans); font-size:.7rem; font-weight:500;
  letter-spacing:.22em; text-transform:uppercase; color:var(--ink-soft);
  margin-bottom:7px;
}
.hero__name b{
  display:block;
  font-family:var(--serif); font-weight:700;
  font-size:clamp(1.5rem,2.5vw,2.1rem); line-height:1.1;
  letter-spacing:-.01em; color:var(--olive);
}

.hero__loc{
  display:inline-flex; align-items:center; gap:10px;
  margin:20px 0 0; padding:9px 18px 9px 14px;
  border-radius:999px;
  background:rgba(188,87,44,.1);
  border:1px solid rgba(188,87,44,.22);
  font-family:var(--sans); font-size:clamp(.88rem,1.05vw,1.02rem); font-weight:600;
  letter-spacing:.05em; color:var(--brand);
}
.hero__loc svg{ width:19px; height:19px; flex:none; }

/* the SEO paragraph stays in full, but set small and tight so it supports
   the lock-up rather than competing with it */
.hero__lede{
  margin:16px 0 0; max-width:60ch;
  font-size:clamp(.76rem,.26vw + .72rem,.84rem);
  line-height:1.58; letter-spacing:.005em;
  color:rgba(107,98,89,.9);
}
.hero__lede b{ color:var(--ink-soft); font-weight:600; }

.hero__cta{ display:flex; flex-wrap:wrap; gap:12px; margin-top:30px; }

.hero__copy > *{ animation:rise .9s cubic-bezier(.2,.7,.2,1) both; }
.hero__copy > :nth-child(1){ animation-delay:.25s; }
.hero__copy > :nth-child(2){ animation-delay:.36s; }
.hero__copy > :nth-child(3){ animation-delay:.47s; }
.hero__copy > :nth-child(4){ animation-delay:.58s; }
.hero__copy > :nth-child(5){ animation-delay:.69s; }
.hero__copy > :nth-child(6){ animation-delay:.8s; }
@keyframes rise{ from{ opacity:0; transform:translateY(20px); } }

@media (prefers-reduced-motion:reduce){
  .hero__art,.hero__copy > *{ animation:none; }
}

@media (max-width:1080px){
  /* On a phone the question leads, the headline answers it, and only then
     does the film play — so the wrappers dissolve and every piece becomes a
     direct child of the section, free to be ordered around the video. */
  .hero{
    display:flex; flex-direction:column;
    padding-top:clamp(92px,21vw,118px);   /* clear air under the header */
  }
  .hero__inner,.hero__inner > .wrap,.hero__copy{ display:contents; }

  .hero__copy > *{
    padding-inline:var(--pad);
    text-align:center; max-width:none;
  }

  .hero__hook{ order:1; margin-bottom:14px; }
  .hero__hook br{ display:none; }
  .hero h1{ order:2; }
  .hero__art{ order:3; margin:4px 0 0; padding:0; }
  .hero__name{ order:4; margin-top:26px; }
  .hero__loc{
    order:5; align-self:center;
    padding:9px 18px 9px 14px;        /* its own pill, not page padding */
    justify-content:center;
  }
  .hero__lede{ order:6; margin-inline:auto; }
  .hero__cta{ order:7; justify-content:center; padding-bottom:clamp(36px,7vw,52px); }
}
@media (max-width:560px){
  .hero__cta{ flex-direction:column; }
  .hero__cta .btn{ width:100%; }
}


/* ═══════════════════════ At a glance ═══════════════════════ */

.glance{
  display:grid; grid-template-columns:repeat(4,minmax(0,1fr));
  gap:12px;
}
.glance__i{
  border-radius:var(--r); border:1px solid var(--line);
  background:var(--paper); padding:clamp(24px,2.6vw,34px);
  transition:.34s var(--ease);
}
.glance__i:hover{ background:var(--cream-lt); }
.glance__i span{
  display:block; font-size:.62rem; font-weight:500; letter-spacing:.22em;
  text-transform:uppercase; color:var(--brand); margin-bottom:12px;
}
.glance__i b{
  display:block; font-family:var(--serif); font-weight:500; letter-spacing:-.01em;
  font-size:clamp(1.18rem,1.7vw,1.5rem); line-height:1.24; color:var(--ink);
}
.glance__i small{
  display:block; margin-top:8px; font-size:.8rem; color:var(--ink-soft); line-height:1.55;
}
/* every value still awaiting sign-off is marked, so nothing ships as a guess */
[data-fill]{
  color:var(--amber) !important;
  text-decoration:underline dashed var(--amber);
  text-decoration-thickness:1px;
  text-underline-offset:4px;
}



/* ═══════════════════════ About ═══════════════════════ */

.about__grid{
  display:grid; grid-template-columns:1fr 1fr; gap:clamp(34px,5vw,76px);
  align-items:start;
}
.about__body p{ margin:0 0 18px; color:var(--ink-soft); }
.about__body p:last-of-type{ margin-bottom:0; }
.about__body strong{ color:var(--ink); font-weight:500; }

/* the campaign line, set the way the creative sets it */
.claim{ border-radius:var(--r);
  margin:0 0 26px; padding:26px 30px;
  background:var(--cream); border-left:3px solid var(--brand);
}
.claim q{
  display:block; quotes:'“' '”'; white-space:nowrap;
  font-family:var(--serif); font-style:italic; font-weight:500;
  font-size:clamp(1.05rem,1.8vw,1.5rem); line-height:1.35; color:var(--olive);
}


/* ═══════════════════════ Location ═══════════════════════ */

.loc{
  display:grid; grid-template-columns:repeat(3,minmax(0,1fr));
  gap:clamp(20px,2.4vw,30px);
}
.loc__c{ border-radius:var(--r);
  background:var(--paper); border:1px solid var(--line);
  padding:clamp(26px,2.8vw,36px);
  transition:.36s var(--ease);
}
.loc__c:hover{ border-color:var(--amber); transform:translateY(-4px); box-shadow:0 24px 44px -30px rgba(43,39,35,.4); }
.loc__ic{
  width:46px; height:46px; display:grid; place-items:center;
  border-radius:50%; background:var(--cream); color:var(--brand); margin-bottom:20px;
}
.loc__ic svg{ width:21px; height:21px; }
.loc__c h3{ font-size:1.12rem; margin-bottom:16px; }
.loc__c ul{ list-style:none; margin:0; padding:0; }
.loc__c li{
  display:flex; align-items:center; gap:12px;
  padding:10px 0; border-bottom:1px dashed var(--line);
  font-size:.95rem; color:var(--ink);
}
.loc__c li::before{
  content:''; width:6px; height:6px; border-radius:50%; background:var(--brand); flex:none;
}
.loc__c li:last-child{ border-bottom:0; padding-bottom:0; }
.loc__c li b{ font-weight:500; color:var(--brand); white-space:nowrap; font-size:.84rem; letter-spacing:.04em; }


.loc__dots{ display:none; }


/* ═══════════════════════ Early access (form block) ═══════════════════════ */

.early{
  display:grid; grid-template-columns:1fr .86fr; gap:clamp(32px,5vw,66px);
  align-items:center;
}
.early__list{ list-style:none; margin:28px 0 0; padding:0; display:grid; gap:14px; }
.early__list li{
  display:flex; gap:14px; align-items:flex-start;
  font-size:.96rem; color:rgba(243,231,218,.84);
}
.early__list svg{ width:19px; height:19px; flex:none; margin-top:3px; color:var(--amber-lt); }


/* ─────────── Form card ─────────── */

.fcard{ border-radius:var(--r);
  background:var(--paper);
  padding:clamp(28px,3vw,40px);
  border:1px solid var(--line);
  box-shadow:0 34px 70px -46px rgba(43,39,35,.55);
}
.fcard__ttl{ font-size:1.35rem; margin-bottom:6px; }
.fcard__sub{
  font-size:.66rem; letter-spacing:.2em; text-transform:uppercase;
  color:var(--brand); margin:0 0 24px;
}


/* ─────────── Fields ─────────── */

.frm{ display:grid; gap:17px; }

.fld{ position:relative; }
.fld > label{
  display:block; font-size:.62rem; font-weight:500; letter-spacing:.2em;
  text-transform:uppercase; color:var(--ink-soft); margin-bottom:7px;
}
.fld input[type=text],
.fld input[type=email],
.fld input[type=tel]{
  width:100%; padding:13px 14px;
  background:var(--cream-lt); border:1px solid var(--line); border-radius:var(--r);
  font-size:.95rem; font-weight:400; color:var(--ink);
  transition:.28s var(--ease);
}
.fld input::placeholder{ color:#A79C90; }
.fld input:focus{
  outline:0; background:var(--paper);
  border-color:var(--brand); box-shadow:0 0 0 3px rgba(181,93,57,.12);
}
.fld .err{
  display:block; min-height:0; font-size:.74rem; color:#B3402E;
  margin-top:5px; letter-spacing:.01em;
}
.fld.has-err input{ border-color:#B3402E; background:#FDF4F2; }

.hint{ display:block; font-size:.72rem; color:#9A8F84; margin-top:5px; }
.fld.has-err .hint{ display:none; }

/* phone row: country picker + number */
.tel{ display:flex; gap:8px; align-items:stretch; }
.tel input{ flex:1; min-width:0; }
.tel__code{
  position:absolute; opacity:0; pointer-events:none; width:0; height:0;
}

/* custom country listbox (built by main.js) */
.cpick{ position:relative; flex:none; }
.cpick__btn{
  display:flex; align-items:center; gap:7px; height:100%;
  padding:0 11px;
  background:var(--cream-lt); border:1px solid var(--line); border-radius:var(--r);
  font-size:.9rem; color:var(--ink); transition:.28s var(--ease);
}
.cpick__btn:hover,.cpick.is-open .cpick__btn{ border-color:var(--brand); }
.cpick__flag{ width:21px; height:14px; display:block; flex:none; overflow:hidden; border-radius:1px; box-shadow:0 0 0 1px rgba(43,39,35,.1); }
.cpick__flag svg{ width:21px; height:14px; display:block; }
.cpick__code{ font-weight:400; letter-spacing:.02em; }
.cpick__chev{ width:9px; height:6px; color:var(--ink-soft); transition:.3s var(--ease); }
.cpick.is-open .cpick__chev{ transform:rotate(180deg); }

.cpick__list{
  position:absolute; z-index:20; top:calc(100% + 5px); left:0;
  width:262px; max-height:246px; overflow-y:auto;
  margin:0; padding:5px; list-style:none;
  background:var(--paper); border:1px solid var(--line); border-radius:var(--r);
  box-shadow:0 22px 48px -22px rgba(43,39,35,.5);
}
.cpick__list[hidden]{ display:none; }
.cpick__opt{
  display:flex; align-items:center; gap:10px;
  padding:8px 9px; border-radius:var(--r); cursor:pointer; font-size:.86rem;
}
.cpick__nm{ flex:1; min-width:0; overflow:hidden; text-overflow:ellipsis; white-space:nowrap; }
.cpick__cd{ color:var(--ink-soft); font-size:.8rem; }
.cpick__opt:hover,.cpick__opt.is-cursor{ background:var(--cream); }
.cpick__opt.is-on{ background:rgba(181,93,57,.1); color:var(--brand); }

/* consent */
.chk{ display:flex; gap:11px; align-items:flex-start; margin-top:2px; }
.chk input{
  appearance:none; -webkit-appearance:none;
  width:17px; height:17px; flex:none; margin-top:3px;
  border:1px solid var(--line); border-radius:var(--r); background:var(--paper);
  cursor:pointer; transition:.24s var(--ease); position:relative;
}
.chk input:checked{ background:var(--brand); border-color:var(--brand); }
.chk input:checked::after{
  content:''; position:absolute; left:5px; top:1.5px;
  width:4px; height:9px; border:solid #fff; border-width:0 1.8px 1.8px 0;
  transform:rotate(42deg);
}
.chk label{ font-size:.76rem; line-height:1.55; color:var(--ink-soft); cursor:pointer; }
.chk a{ color:var(--brand); text-decoration:underline; text-underline-offset:2px; }
.chk.has-err input{ border-color:#B3402E; box-shadow:0 0 0 3px rgba(179,64,46,.12); }
.chk.has-err label{ color:#B3402E; }

.frm__note{
  margin:0; font-size:.72rem; color:var(--ink-soft); text-align:center;
  display:flex; align-items:center; justify-content:center; gap:7px;
}
.frm__note svg{ width:13px; height:13px; color:var(--brand); flex:none; }

/* form card on a dark section */
.fcard--dark{ background:var(--cream-lt); border-color:transparent; }


/* ═══════════════════════ Legacy ═══════════════════════ */

.pillars{
  display:grid; grid-template-columns:repeat(4,minmax(0,1fr));
  gap:clamp(18px,2.2vw,28px);
}
.pillar{
  position:relative; overflow:hidden;
  background:var(--cream-lt); border:1px solid var(--line);
  padding:clamp(30px,3vw,42px) clamp(24px,2.6vw,36px);
  text-align:center;
  transition:.36s var(--ease);
}
.pillar:hover{ transform:translateY(-4px); box-shadow:0 26px 48px -32px rgba(43,39,35,.45); border-color:var(--amber); }
.pillar--accent{ background:var(--olive-dk); border-color:var(--olive-dk); color:var(--cream); }
.pillar--accent h3{ color:var(--cream-lt); }
.pillar--accent .pillar__num{ color:var(--amber-lt); }

.pillar__num{
  display:block; font-family:var(--serif); font-weight:600; letter-spacing:-.02em;
  font-size:clamp(2.6rem,4.4vw,3.6rem); line-height:1; color:var(--brand);
  margin-bottom:14px;
}
.pillar h3{ font-size:1.22rem; margin-bottom:10px; }
.pillar p{ margin:0; font-size:.93rem; color:var(--ink-soft); line-height:1.6; }
.pillar--accent p{ color:rgba(243,231,218,.82); }
.pillar > *{ position:relative; z-index:1; }


/* ═══════════════════════ FAQ ═══════════════════════ */

.faq{ max-width:860px; margin-inline:auto; border-top:1px solid var(--line); }
.faq__i{ border-bottom:1px solid var(--line); }
.faq__q{
  width:100%; display:flex; align-items:flex-start; justify-content:space-between; gap:22px;
  padding:22px 2px; text-align:left;
  font-family:var(--serif); font-weight:500; font-size:clamp(1.02rem,1.4vw,1.17rem);
  line-height:1.4; color:var(--ink); transition:.28s var(--ease);
}
.faq__q:hover{ color:var(--brand); }
.faq__q i{
  flex:none; width:24px; height:24px; margin-top:2px; position:relative;
  border:1px solid var(--line); border-radius:50%; transition:.32s var(--ease);
}
.faq__q i::before,.faq__q i::after{
  content:''; position:absolute; inset:0; margin:auto; background:var(--brand);
  transition:.32s var(--ease);
}
.faq__q i::before{ width:9px; height:1.4px; }
.faq__q i::after{ width:1.4px; height:9px; }
.faq__q[aria-expanded=true] i{ background:var(--brand); border-color:var(--brand); transform:rotate(90deg); }
.faq__q[aria-expanded=true] i::before,.faq__q[aria-expanded=true] i::after{ background:#fff; }
.faq__q[aria-expanded=true] i::after{ height:0; }

.faq__a{
  max-height:0; overflow:hidden;
  transition:max-height .45s var(--ease), opacity .35s var(--ease);
  opacity:0;
}
.faq__a.is-open{ opacity:1; }
.faq__a p{ margin:0 0 24px; padding-right:46px; color:var(--ink-soft); font-size:.97rem; }


/* ═══════════════════════ Chevron band (from the brand kit) ═══════════════════════ */

.band{
  height:26px; width:100%;
  background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='42' height='26' viewBox='0 0 42 26'%3E%3Cg fill='none' stroke='%23C68848' stroke-width='2.1' stroke-linecap='square'%3E%3Cpath d='M0 20 L10.5 8 L21 20 L31.5 8 L42 20'/%3E%3Cpath d='M0 26 L10.5 14 L21 26 L31.5 14 L42 26'/%3E%3C/g%3E%3C/svg%3E");
  background-repeat:repeat-x; background-position:center;
  opacity:.85;
}
.band--soft{ opacity:.4; }




/* ═══════════════ Configurations ═══════════════ */

.cfg{
  display:grid; grid-template-columns:repeat(3,minmax(0,1fr));
  gap:clamp(18px,2.2vw,26px);
}
.cfg__c{ border-radius:var(--r);
  background:var(--paper); border:1px solid var(--line);
  padding:clamp(28px,3vw,38px) clamp(22px,2.4vw,30px);
  text-align:center;
  transition:.36s var(--ease);
}
.cfg__c:hover{ transform:translateY(-4px); box-shadow:0 26px 48px -32px rgba(43,39,35,.42); border-color:var(--amber); }
.cfg__c--hero{ border-color:var(--brand); box-shadow:0 18px 40px -30px rgba(181,93,57,.6); }

.cfg__tag{
  display:inline-block; padding:5px 14px; border-radius:20px;
  background:var(--cream); color:var(--brand);
  font-family:var(--sans); font-size:.64rem; font-weight:600;
  letter-spacing:.2em; text-transform:uppercase;
}
.cfg__c--hero .cfg__tag{ background:var(--brand); color:#fff; }

/* sold out: still shown, because a selling project is a signal — but
   with nothing to click, so it cannot generate an enquiry */
.cfg__c--gone{ background:transparent; border-style:dashed; }
.cfg__c--gone:hover{ transform:none; box-shadow:none; border-color:var(--line); }
.cfg__c--gone .cfg__tag{ background:rgba(107,98,89,.1); color:var(--ink-soft); }
.cfg__c--gone .cfg__area{ color:var(--ink-soft); opacity:.6; }
.cfg__c--gone .cfg__area i{ opacity:.8; }
.cfg__c--gone .cfg__meta{ opacity:.65; }

.cfg__gone{
  margin:0; padding:13px 22px;
  border:1px dashed var(--line); border-radius:var(--r);
  font-family:var(--sans); font-size:.66rem; font-weight:600;
  letter-spacing:.2em; text-transform:uppercase;
  color:var(--ink-soft); opacity:.75;
}

.cfg__area{
  display:block; margin:18px 0 4px;
  font-family:var(--serif); font-weight:600; letter-spacing:-.015em;
  font-size:clamp(1.5rem,2.4vw,2rem); line-height:1.1; color:var(--ink);
}
.cfg__area i{ font-style:normal; font-size:.5em; color:var(--ink-soft); letter-spacing:.02em; }

/* the padlock sits with the label and lifts its shackle on hover */
.cfg__c .btn svg{ width:13px; height:13px; }
.cfg__c .btn:hover svg{ transform:none; }
.cfg__c .btn:hover svg path{ transform:translateY(-1.5px); transform-origin:center; transition:.28s var(--ease); }

.cfg__meta{
  margin:0 0 22px;
  font-family:var(--sans); font-size:.68rem; letter-spacing:.16em;
  text-transform:uppercase; color:var(--ink-soft);
}


/* ═══════════════ Gated plans ═══════════════ */

.gates{
  display:grid; grid-template-columns:repeat(3,minmax(0,1fr));
  gap:clamp(20px,2.4vw,30px);
}
.gate{ border-radius:var(--r);
  background:var(--paper); border:1px solid var(--line);
  padding:clamp(20px,2vw,24px);
  display:flex; flex-direction:column;
  transition:.36s var(--ease);
}
.gate:hover{ transform:translateY(-4px); box-shadow:0 26px 48px -32px rgba(43,39,35,.42); border-color:var(--amber); }

/* the drawing is shown, but softened: enough to want it, not enough to use it */
/* The drawing is a CSS background, not an <img>: the browser offers no
   "save image" or "open image in new tab" on it at all. What it points at
   is a 460px teaser with the blur baked into the pixels — so even the file
   itself is unusable. The readable plans never reach the web folder. */
.gate__shot{
  position:relative; overflow:hidden; border-radius:var(--r);
  aspect-ratio:4/3; background:var(--cream-lt);
  margin-bottom:22px;
  background-size:cover; background-position:center;
  transition:.5s var(--ease);
  -webkit-user-select:none; user-select:none;
  -webkit-touch-callout:none;          /* no long-press menu on iOS */
}
.gate__shot--master  { background-image:url('../img/plan-master-tease.webp'); }
.gate__shot--tower   { background-image:url('../img/plan-tower-tease.webp'); }
.gate__shot--location{ background-image:url('../img/plan-location-tease.webp'); }

.gate:hover .gate__shot{ transform:scale(1.015); }
.gate__shot::after{
  content:''; position:absolute; inset:0;
  background:linear-gradient(170deg, rgba(250,244,236,.3), rgba(188,87,44,.16));
}
.gate__lock{
  position:absolute; inset:0; z-index:1; margin:auto;
  width:46px; height:46px; border-radius:50%;
  display:grid; place-items:center;
  background:rgba(255,255,255,.92); color:var(--brand);
  box-shadow:0 10px 24px -12px rgba(43,39,35,.5);
}
.gate__lock svg{ width:19px; height:19px; }

.gate h3{ font-size:1.18rem; margin-bottom:10px; }
.gate p{
  margin:0 0 22px; font-size:.92rem; color:var(--ink-soft); line-height:1.6;
  flex:1;
}


/* ═══════════════ Amenities ═══════════════ */

.amen{
  list-style:none; margin:0; padding:0;
  display:grid; grid-template-columns:repeat(auto-fit,minmax(150px,1fr));
  gap:clamp(10px,1.2vw,16px);
}
.amen li{
  display:flex; flex-direction:column; align-items:center; gap:14px;
  padding:28px 16px 22px; text-align:center;
  background:var(--paper); border:1px solid var(--line); border-radius:var(--r);
  transition:transform .4s var(--ease), box-shadow .4s var(--ease), border-color .4s var(--ease);
}
.amen li i{
  width:54px; height:54px; flex:none;
  display:grid; place-items:center; border-radius:50%;
  background:var(--cream); color:var(--brand);
  transition:.4s var(--ease);
}
.amen li i svg{ width:25px; height:25px; transition:.4s var(--ease); }
.amen li span{
  font-family:var(--sans); font-size:.78rem; font-weight:500;
  letter-spacing:.04em; color:var(--ink); line-height:1.4;
}
.amen li:hover{ transform:translateY(-5px); border-color:var(--amber); box-shadow:var(--sh-2); }
.amen li:hover i{ background:var(--brand); color:#fff; transform:scale(1.06) rotate(-4deg); }


/* ═══════════════ Specifications ═══════════════ */

.specs{ max-width:900px; margin-inline:auto; display:grid; gap:10px; }

.sp{
  background:var(--paper); border:1px solid var(--line); border-radius:var(--r);
  overflow:hidden;
  transition:border-color .32s var(--ease), box-shadow .32s var(--ease);
}
.sp[open]{ border-color:var(--amber); box-shadow:var(--sh-1); }
.sp:hover{ border-color:var(--amber); }

.sp summary{
  display:flex; align-items:center; gap:16px;
  padding:18px clamp(18px,2vw,24px);
  cursor:pointer; list-style:none;
}
.sp summary::-webkit-details-marker{ display:none; }

.sp summary i{
  width:40px; height:40px; flex:none;
  display:grid; place-items:center; border-radius:50%;
  background:var(--cream); color:var(--brand);
  transition:.32s var(--ease);
}
.sp summary i svg{ width:20px; height:20px; }
.sp[open] summary i{ background:var(--brand); color:#fff; }

.sp summary b{
  flex:1;
  font-family:var(--serif); font-weight:600; font-size:1.06rem;
  letter-spacing:-.005em; color:var(--ink);
}

/* the chevron */
.sp summary em{
  width:22px; height:22px; flex:none; position:relative;
  transition:transform .34s var(--ease);
}
.sp summary em::before,
.sp summary em::after{
  content:''; position:absolute; top:50%; width:9px; height:1.6px;
  background:var(--brand); border-radius:2px;
}
.sp summary em::before{ left:2px;  transform:rotate(45deg); }
.sp summary em::after{  right:2px; transform:rotate(-45deg); }
.sp[open] summary em{ transform:rotate(180deg); }

.sp__body{
  padding:0 clamp(18px,2vw,24px) 6px;
  animation:spOpen .4s var(--ease);
}
@keyframes spOpen{ from{ opacity:0; transform:translateY(-6px); } }

.sp__body ul{ list-style:none; margin:0; padding:0 0 16px; }
.sp__body li{
  position:relative;
  padding:11px 0 11px 56px;
  font-size:.93rem; line-height:1.65; color:var(--ink-soft);
  border-top:1px dashed var(--line);
}
.sp__body li::before{
  content:''; position:absolute; left:19px; top:19px;
  width:6px; height:6px; border-radius:50%; background:var(--amber);
}

@media (prefers-reduced-motion:reduce){
  .sp__body{ animation:none; }
}

@media (max-width:560px){
  .sp summary{ gap:12px; padding:16px 16px; }
  .sp summary i{ width:34px; height:34px; }
  .sp summary i svg{ width:17px; height:17px; }
  .sp summary b{ font-size:.98rem; }
  .sp__body{ padding-inline:16px; }
  .sp__body li{ padding-left:20px; }
  .sp__body li::before{ left:2px; }
}


/* ═══════════════ Why Sowparnika ═══════════════ */

.legacy{
  position:relative; overflow:hidden;
  background:var(--olive-dk); color:var(--cream);
}
.legacy::before{ display:none; }
.legacy h2{ color:var(--cream-lt); }
.legacy .wrap{ position:relative; z-index:1; }

.pull{ max-width:760px; margin:0 auto 26px; text-align:center; }
.pull__mark{ width:40px; height:27px; margin:0 auto 22px; color:var(--amber); opacity:.5; }
.pull p{
  margin:0; font-family:var(--serif); font-weight:500;
  font-size:clamp(1.3rem,2.6vw,1.95rem); line-height:1.45;
  color:var(--cream-lt); letter-spacing:-.005em;
}

.legacy .lede{
  max-width:62ch; margin:0 auto clamp(44px,5vw,64px);
  color:rgba(243,231,218,.72);
  font-size:clamp(.92rem,.32vw + .86rem,1rem);
}
.legacy .lede strong{ color:var(--amber-lt); font-weight:600; }

.stats{
  display:grid; grid-template-columns:repeat(3,minmax(0,1fr));
  gap:clamp(16px,2vw,24px);
  max-width:1080px; margin-inline:auto;
}
.stat{
  padding:clamp(28px,3vw,38px) clamp(22px,2.4vw,30px);
  text-align:center; border-radius:var(--r);
  border:1px solid rgba(243,231,218,.16);
  background:rgba(243,231,218,.045);
  transition:.4s var(--ease);
}
.stat:hover{
  background:rgba(243,231,218,.09);
  border-color:rgba(224,172,116,.45);
  transform:translateY(-4px);
}
.stat b{
  display:block;
  font-family:var(--serif); font-weight:600;
  font-size:clamp(2.1rem,3.8vw,3.1rem); line-height:1;
  color:var(--amber-lt); letter-spacing:-.025em;
}
.stat b em{ font-style:normal; font-size:.45em; vertical-align:.55em; margin-left:1px; }

.stat h3{
  margin:16px 0 12px;
  font-family:var(--serif); font-weight:600;
  font-size:clamp(1.02rem,1.3vw,1.18rem);
  color:var(--cream-lt); letter-spacing:-.005em;
}
.stat p{
  margin:0;
  font-size:.88rem; line-height:1.65;
  color:rgba(243,231,218,.66);
}

/* the chapter card is the one that carries the project */
.stat--key{
  background:rgba(188,87,44,.32);
  border-color:rgba(188,87,44,.6);
}
.stat--key:hover{ background:rgba(188,87,44,.4); border-color:rgba(188,87,44,.85); }
.stat--key b{ color:#fff; }
.stat--key p{ color:rgba(255,248,240,.8); }


/* ═══════════════ Section CTA ═══════════════ */

.sect__cta{ margin:clamp(30px,3.6vw,44px) 0 0; text-align:center; }

/* a button that reads as a link, for inline prompts */
.lnkBtn{
  font-family:var(--sans); font-size:inherit; font-weight:500;
  color:var(--brand); text-decoration:underline; text-underline-offset:3px;
  text-decoration-thickness:1px; padding:0;
  transition:.26s var(--ease);
}
.lnkBtn:hover{ color:var(--brand-dk); }




/* ═══════════════ Atmosphere ═══════════════
   A page of flat panels reads as a template. These three layers — a paper
   grain, a warm wash behind each band, and a hairline between them — give it
   depth without putting anything new on screen to read.                      */

body::after{
  content:''; position:fixed; inset:0; z-index:9999; pointer-events:none;
  opacity:.5; mix-blend-mode:multiply;
  background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='140' height='140'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='.85' numOctaves='3'/%3E%3CfeColorMatrix type='saturate' values='0'/%3E%3C/filter%3E%3Crect width='140' height='140' filter='url(%23n)' opacity='.22'/%3E%3C/svg%3E");
}

.sect{ position:relative; }
.sect > .wrap{ position:relative; z-index:1; }

/* a warm light low on every pale band */
.sect--cream::before,
.sect:not(.sect--cream):not(.sect--olive):not(.legacy)::before{
  content:''; position:absolute; inset:0; z-index:0; pointer-events:none;
  background:
    radial-gradient(70% 55% at 12% 0%,   rgba(255,250,244,.6), transparent 62%),
    radial-gradient(60% 50% at 92% 100%, rgba(188,87,44,.07),  transparent 64%);
}
.sect--cream + .sect::before{ opacity:.8; }

/* hairline where two bands meet */
.sect + .sect{ border-top:1px solid rgba(226,210,192,.8); }
.sect--olive + .sect,.legacy + .sect,.sect + .sect--olive,.sect + .legacy{ border-top:0; }


/* ═══════════════ Scroll progress ═══════════════ */

.prog{
  position:fixed; inset:0 0 auto; z-index:60;
  height:2px; background:transparent; pointer-events:none;
}
.prog i{
  display:block; height:100%; width:0;
  background:linear-gradient(90deg,var(--brand),var(--amber));
  transition:width .12s linear;
}


/* ═══════════════ Motion ═══════════════ */

/* headings draw their own underline as they arrive */
.sect__head .h2{ position:relative; display:inline-block; }
.sect__head .h2::after{
  content:''; position:absolute; left:0; bottom:-14px;
  width:0; height:2px; background:var(--brand);
  transition:width .9s .25s var(--ease);
}
.sect__head--c .h2::after{ left:50%; transform:translateX(-50%); }
.sect__head.is-in .h2::after{ width:54px; }
.legacy .sect__head.is-in .h2::after{ background:var(--amber); }

/* children of a revealed block come in one after another */
.reveal.is-in > *{ animation:riseIn .7s var(--ease) both; }
.reveal.is-in > :nth-child(2){ animation-delay:.06s; }
.reveal.is-in > :nth-child(3){ animation-delay:.12s; }
.reveal.is-in > :nth-child(4){ animation-delay:.18s; }
.reveal.is-in > :nth-child(5){ animation-delay:.24s; }
.reveal.is-in > :nth-child(6){ animation-delay:.30s; }
.reveal.is-in > :nth-child(7){ animation-delay:.36s; }
.reveal.is-in > :nth-child(8){ animation-delay:.42s; }
.reveal.is-in > :nth-child(9){ animation-delay:.48s; }
.reveal.is-in > :nth-child(10){ animation-delay:.54s; }
.reveal.is-in > :nth-child(11){ animation-delay:.60s; }
.reveal.is-in > :nth-child(12){ animation-delay:.66s; }
.reveal.is-in > :nth-child(13){ animation-delay:.72s; }
@keyframes riseIn{ from{ opacity:0; transform:translateY(16px); } }
/* the hero runs its own sequence */
.hero .reveal.is-in > *{ animation:none; }

/* buttons: the arrow leads the way out */
.btn svg{ transition:transform .3s var(--ease); }
.btn:hover svg{ transform:translateX(3px); }

/* cards lift on a spring rather than a slide */
.glance__i,.loc__c,.cfg__c,.gate,.pillar{
  transition:transform .45s cubic-bezier(.22,1.2,.4,1),
             box-shadow .45s var(--ease), border-color .45s var(--ease);
}
.glance__i:hover{ transform:translateY(-4px); box-shadow:var(--sh-2); border-color:var(--amber); }

@media (prefers-reduced-motion:reduce){
  .reveal.is-in > *{ animation:none; }
  .sect__head .h2::after{ transition:none; }
  body::after{ display:none; }
}




/* ═══════════════ Asset guard ═══════════════
   A deterrent layer only. Right-click and drag are blocked on artwork, but
   anyone determined can still read the network tab — which is exactly why
   the confidential drawings are not served from here in the first place. */

.hero__art img,.gate__shot,.ft__logo,.modal__logo,.hdr__logo img{
  -webkit-user-select:none; user-select:none;
  -webkit-user-drag:none;
  -webkit-touch-callout:none;
}
.hero__art img{ pointer-events:none; }




/* ═══════════════ Earth texture ═══════════════
   The project's own geometric motif, dialled right down. At this strength it
   is felt rather than seen — it stops the cream bands reading as flat fill
   and gives the page its terracotta, hand-made feel.                       */

.sect::after{
  content:''; position:absolute; inset:0; z-index:0; pointer-events:none;
  background-image:url('../img/pat-hex.png');
  background-size:150px auto; background-repeat:repeat;
  opacity:.03;
}
.sect--cream::after{ opacity:.022; }

/* the green bands stay plain — the motif belongs on the cream only */
.sect--olive::after,.legacy::after,.ft::after{ display:none; }

.ft{ position:relative; }
.ft .wrap{ position:relative; z-index:1; }

/* the hero carries the film; no texture over it */
.hero::after{ display:none; }




/* ═══════════════ Codename reveal ═══════════════
   The film is shot portrait, so the frame is portrait too — no letterbox. */

.film{ display:flex; justify-content:center; }

/* A wide frame carries the section, but the film itself is shot portrait.
   Rather than letterbox it against black, the still is laid sharp over a
   blurred bed of itself — the frame reads as full, nothing looks cropped. */
.film__play{
  position:relative; display:block; padding:0; border:0; cursor:pointer;
  width:70%; aspect-ratio:16/9;
  border-radius:var(--r-lg); overflow:hidden;
  background:#1a1512;
  box-shadow:0 34px 70px -34px rgba(43,39,35,.6);
  transition:transform .45s var(--ease), box-shadow .45s var(--ease);
}
.film__bed{
  position:absolute; inset:0;
  background:url('../img/reveal-poster.jpg') center/cover no-repeat;
  filter:blur(26px) brightness(.55) saturate(1.1);
  transform:scale(1.2);
}
.film__play img{
  position:relative; z-index:1;
  height:100%; width:auto; margin:0 auto; display:block;
  object-fit:contain;
  box-shadow:0 0 44px rgba(0,0,0,.45);
  transition:transform .6s var(--ease);
}
.film__play::after{
  content:''; position:absolute; inset:0; z-index:2;
  background:radial-gradient(60% 60% at 50% 50%, rgba(0,0,0,.14), rgba(0,0,0,.4));
  transition:opacity .4s var(--ease);
}
.film__play:hover{ transform:translateY(-5px); box-shadow:0 46px 86px -34px rgba(43,39,35,.7); }
.film__play:hover img{ transform:scale(1.03); }
.film__play:hover::after{ opacity:.65; }

.film__btn{
  position:absolute; inset:0; z-index:3; margin:auto;
  width:82px; height:82px; border-radius:50%;
  display:grid; place-items:center;
  background:rgba(255,255,255,.95); color:var(--brand);
  box-shadow:0 16px 38px -12px rgba(0,0,0,.6);
  transition:.4s var(--ease);
}
.film__btn svg{ width:30px; height:30px; margin-left:4px; }
.film__play:hover .film__btn{ background:var(--brand); color:#fff; transform:scale(1.08); }

.film__btn::before{
  content:''; position:absolute; inset:-11px; border-radius:50%;
  border:1px solid rgba(255,255,255,.5);
  animation:filmPulse 2.6s ease-out infinite;
}
@keyframes filmPulse{
  0%  { transform:scale(.92); opacity:.85; }
  70% { transform:scale(1.2); opacity:0; }
  100%{ opacity:0; }
}

.film iframe{
  width:70%; aspect-ratio:16/9;
  border:0; border-radius:var(--r-lg);
  box-shadow:0 34px 70px -34px rgba(43,39,35,.6);
  background:#000;
}

@media (max-width:860px){
  .film__play,.film iframe{ width:100%; }
}
@media (prefers-reduced-motion:reduce){
  .film__btn::before{ animation:none; }
}


/* ═══════════════════════ Footer ═══════════════════════ */

.ft{ background:var(--olive-dk); color:rgba(243,231,218,.7); padding:clamp(48px,6vw,72px) 0 0; }
.ft__grid{
  display:grid; grid-template-columns:.7fr 1.15fr 1fr 1.2fr; gap:clamp(24px,2.8vw,40px);
  padding-bottom:clamp(34px,4vw,52px);
}
.ft__logo{ height:58px; width:auto; }
.ft p{ font-size:.86rem; line-height:1.7; }
.ft h4{ margin-bottom:12px; }
.ft p{ margin:0; font-size:.9rem; max-width:44ch; }
.ft h4{
  font-family:var(--sans); font-weight:500; font-size:.66rem;
  letter-spacing:.22em; text-transform:uppercase; color:var(--amber-lt); margin-bottom:16px;
}
.ft ul{ list-style:none; margin:0; padding:0; display:grid; gap:10px; }
.ft a{ font-size:.9rem; transition:.26s var(--ease); }
.ft a:hover{ color:var(--amber-lt); }
/* sits in the Get in Touch column, set like the headings above it.
   Needs `.ft p` specificity or that rule's margin:0 wins. */
.ft p.ft__rera{
  margin:30px 0 0;
  font-family:var(--sans); font-size:.71rem; letter-spacing:.015em;
  line-height:1.7; color:rgba(243,231,218,.7);
  white-space:nowrap;
}
.ft p.ft__rera span{
  display:block; margin-bottom:13px;
  font-size:.66rem; font-weight:500; letter-spacing:.22em;
  text-transform:uppercase; color:var(--amber-lt);
}

.ft__bar{
  border-top:1px solid rgba(243,231,218,.14);
  padding:20px 0 28px;
  display:flex; flex-wrap:wrap; gap:10px 24px; justify-content:space-between;
  font-size:.74rem; color:rgba(243,231,218,.5);
}


/* ═══════════════════════ Floating actions ═══════════════════════ */

.wafab{
  position:fixed; right:18px; bottom:18px; z-index:35;
  width:52px; height:52px; border-radius:50%;
  display:grid; place-items:center;
  background:#25D366; color:#fff;
  box-shadow:0 14px 30px -12px rgba(37,211,102,.75);
  transition:.3s var(--ease);
}
.wafab:hover{ transform:scale(1.07); }
.wafab svg{ width:26px; height:26px; }

/* mobile sticky bar */
.mbar{
  position:fixed; inset:auto 0 0; z-index:36;
  display:none; grid-template-columns:1fr 1fr;
  background:var(--paper); border-top:1px solid var(--line);
  box-shadow:0 -10px 30px -20px rgba(43,39,35,.6);
}
.mbar a,.mbar button{
  padding:15px 8px; text-align:center;
  font-size:.66rem; font-weight:500; letter-spacing:.16em; text-transform:uppercase;
}
.mbar .is-call{ color:var(--ink); border-right:1px solid var(--line); }
.mbar .is-reg{ background:var(--brand); color:#fff; }


/* ═══════════════════════ Modal ═══════════════════════ */

.modal{
  position:fixed; inset:0; z-index:60;
  display:grid; place-items:center; padding:18px;
  background:rgba(43,39,35,.55);
  backdrop-filter:blur(4px); -webkit-backdrop-filter:blur(4px);
  opacity:0; transition:opacity .4s var(--ease);
}
.modal[hidden]{ display:none; }
.modal.is-open{ opacity:1; }
.modal__box{
  position:relative; width:100%; max-width:560px;
  max-height:94vh; overflow-y:auto;
  background:var(--paper); padding:clamp(22px,3vw,30px) clamp(24px,4vw,40px) clamp(22px,3vw,28px);
  border-top:3px solid var(--brand); border-radius:8px;
  box-shadow:0 40px 90px -30px rgba(0,0,0,.55);
  transform:translateY(22px) scale(.97);
  transition:transform .45s var(--ease);
}
.modal.is-open .modal__box{ transform:none; }
.modal__x{
  position:absolute; top:12px; right:12px;
  width:34px; height:34px; display:grid; place-items:center;
  color:var(--ink-soft); border-radius:50%; transition:.28s var(--ease);
}
.modal__x:hover{ background:var(--cream); color:var(--brand); }
.modal__x svg{ width:15px; height:15px; }
.modal__logo{ height:40px; width:auto; margin:0 auto 12px; }
.modal__ttl{ text-align:center; font-size:1.3rem; }
.modal__sub{
  text-align:center; margin:6px 0 16px;
  font-size:.64rem; letter-spacing:.22em; text-transform:uppercase; color:var(--brand);
}

/* The three reasons to fill the form in, directly above it. Three across,
   not stacked, because the popup has to open on a laptop without scrolling
   and a stacked column would cost roughly 180px of height. */
.perks{
  display:grid; grid-template-columns:repeat(3,1fr);
  /* no divider rule above it — the spacing separates it well enough, and
     lines above headings are not wanted anywhere on this site */
  gap:10px; margin:2px 0 18px; padding:0;
  list-style:none; text-align:center;
}
.perks li{
  display:flex; flex-direction:column; align-items:center; gap:8px;
  font-family:var(--sans);
  font-size:.7rem; line-height:1.3; font-weight:600;
  letter-spacing:.01em; color:var(--ink);
  /* the longest label wraps to two lines; this keeps all three baselines
     level instead of letting the short ones float up */
  justify-content:flex-start;
}
.perks__ic{
  width:40px; height:40px; flex:none;
  display:grid; place-items:center;
  border:1.5px solid var(--olive); border-radius:50%;
  color:var(--olive);
}
.perks__ic svg{ width:19px; height:19px; }

@media (max-width:420px){
  .perks{ gap:6px; margin-bottom:14px; }
  .perks li{ font-size:.62rem; gap:6px; }
  .perks__ic{ width:34px; height:34px; }
  .perks__ic svg{ width:16px; height:16px; }
}

/* the popup keeps a tighter rhythm so it fits a laptop screen without scrolling */
.modal .frm{ gap:11px; }
.modal .fld > label{ margin-bottom:4px; }
.modal .fld input[type=text],.modal .fld input[type=email],.modal .fld input[type=tel]{ padding:11px 13px; }
.modal .cpick__btn{ padding:0 10px; }
.modal .hint{ margin-top:3px; font-size:.68rem; }
.modal .fld .err{ margin-top:3px; }
.modal .chk label{ font-size:.72rem; line-height:1.45; }
.modal .btn--wide{ padding:13px 24px; }

/* success popup (only used when thankYouPage is blank) */
.thx{ text-align:center; }
.thx__ic{
  width:64px; height:64px; margin:0 auto 20px; border-radius:50%;
  display:grid; place-items:center; background:var(--cream); color:var(--brand);
}
.thx__ic svg{ width:28px; height:28px; }


/* ═══════════════════════ Reveal ═══════════════════════ */

.reveal{ opacity:0; transform:translateY(24px); transition:opacity .8s var(--ease), transform .8s var(--ease); }
.reveal.is-in{ opacity:1; transform:none; }
.reveal[data-d="1"]{ transition-delay:.09s; }
.reveal[data-d="2"]{ transition-delay:.18s; }
.reveal[data-d="3"]{ transition-delay:.27s; }
@media (prefers-reduced-motion:reduce){
  html{ scroll-behavior:auto; }
  .reveal{ opacity:1; transform:none; transition:none; }
}


/* ═══════════════════════ Responsive ═══════════════════════ */

@media (max-width:1080px){
  /* the copy block dissolves so its pieces can be ordered around the artwork:
     eyebrow + headline (centred) → artwork → paragraph → button */
  .glance{ grid-template-columns:repeat(2,minmax(0,1fr)); }
  .cfg,.gates{ grid-template-columns:repeat(2,minmax(0,1fr)); }
  .stats{ grid-template-columns:1fr; }
  .ft__grid{ grid-template-columns:1fr 1fr; }
  .ft p.ft__rera{ white-space:normal; word-break:break-word; }
  .about__grid,.early{ grid-template-columns:1fr; }
}

@media (max-width:860px){
  .nav,.hdr__tel{ display:none; }
  .burger{ display:block; }
  .hdr__act .btn{ display:none; }
  /* location cards become a swipeable strip, one card in view at a time */
  .loc{
    display:flex; gap:14px;
    margin-inline:calc(-1 * var(--pad)); padding:4px var(--pad) 8px;
    overflow-x:auto; scroll-snap-type:x mandatory; -webkit-overflow-scrolling:touch;
    scrollbar-width:none;
  }
  .loc::-webkit-scrollbar{ display:none; }
  .loc__c{ flex:0 0 84%; scroll-snap-align:center; }
  .loc__c:hover{ transform:none; }
  .loc__dots{ display:flex; justify-content:center; gap:7px; margin-top:16px; }
  .loc__dots i{
    width:7px; height:7px; border-radius:50%; background:var(--line); transition:.3s var(--ease);
  }
  .loc__dots i.is-on{ background:var(--brand); width:20px; border-radius:4px; }
  .wafab{ bottom:74px; }
  .mbar{ display:grid; }
  body{ padding-bottom:52px; }
}

@media (max-width:720px){
  /* two columns leave these cards too narrow for their own buttons */
  .cfg,.gates{ grid-template-columns:1fr; }
  .gate__shot{ aspect-ratio:16/9; }
}

@media (max-width:560px){
  .glance{ grid-template-columns:repeat(2,minmax(0,1fr)); }
  .glance__i{ padding:20px 16px; text-align:center; }
  .glance__i b{ font-size:1.05rem; }
  .ft__grid{ grid-template-columns:1fr; gap:28px; }
  .hero__cta .btn{ width:100%; }
  .faq__a p{ padding-right:0; }

  /* a label that cannot fit should wrap, never clip */
  .btn--wide{ white-space:normal; }
}