/* ═══════════════════════════════════════════════════════════════
   SOWPARNIKA · ROOTS FOR TOMORROW — HOSKOTE–WHITEFIELD PRE-LAUNCH
   Landing page styles · GOOGLE ADS EDITION (sowparnikarootsfortomorrow.com)
   Same brand system as the official page; the layout is tuned for leads.
   ═══════════════════════════════════════════════════════════════ */

: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);
  --tb:0px;                    /* offer bar removed; kept at 0 so offsets need no edits */
  --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:var(--tb) 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:calc(92px + var(--tb)) 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; margin-top:var(--tb);
  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 line, demoted to a kicker: on a paid page the headline has
   to say what is on offer, in the words that were searched */
.hero__kicker{
  margin:0 0 14px;
  font-family:var(--sans); font-size:.7rem; font-weight:600;
  letter-spacing:.2em; text-transform:uppercase; color:var(--brand);
}

.hero h1.hero__ttl{
  margin:0;
  font-family:var(--serif); font-weight:700;
  font-size:clamp(1.85rem,3.3vw,3.05rem);
  line-height:1.08; letter-spacing:-.018em;
  color:var(--ink);
}
.hero h1.hero__ttl em{ font-style:normal; color:var(--brand); white-space:nowrap; }

.hero__name{ margin:22px 0 0; }
.hero__name span{
  display:block; white-space:nowrap;
  font-family:var(--sans); font-size:.66rem; font-weight:500;
  letter-spacing:.22em; text-transform:uppercase; color:var(--ink-soft);
  margin-bottom:5px;
}
.hero__name b{
  display:block;
  font-family:var(--serif); font-weight:700;
  font-size:clamp(1.35rem,2.1vw,1.85rem); line-height:1.1;
  letter-spacing:-.01em; color:var(--olive);
}

.hero__chips{
  list-style:none; margin:20px 0 0; padding:0;
  display:flex; flex-wrap:wrap; gap:8px;
}
.hero__chips li{
  display:inline-flex; align-items:center; gap:7px;
  padding:7px 13px; border-radius:999px;
  background:rgba(255,255,255,.72); border:1px solid var(--line);
  font-family:var(--sans); font-size:.72rem; font-weight:600;
  letter-spacing:.03em; color:var(--ink);
}
.hero__chips li::before{
  content:''; width:6px; height:6px; border-radius:50%; background:var(--brand); flex:none;
}

.hero__cta{ display:flex; flex-wrap:wrap; gap:12px; margin-top:26px; }
.hero .btn--line{ background:rgba(255,255,255,.6); border-color:rgba(181,93,57,.45); color:var(--brand-dk); }
.hero .btn--line:hover{ background:#fff; border-color:var(--brand); }

.hero__trust{
  display:flex; align-items:center; gap:8px;
  margin:18px 0 0;
  font-family:var(--sans); font-size:.74rem; letter-spacing:.02em; color:var(--ink-soft);
}
.hero__trust svg{ width:16px; height:16px; color:var(--brand); flex:none; }

.hero__copy > *{ animation:rise .9s cubic-bezier(.2,.7,.2,1) both; }
.hero__copy > :nth-child(1){ animation-delay:.2s; }
.hero__copy > :nth-child(2){ animation-delay:.3s; }
.hero__copy > :nth-child(3){ animation-delay:.4s; }
.hero__copy > :nth-child(4){ animation-delay:.5s; }
.hero__copy > :nth-child(5){ animation-delay:.6s; }
.hero__copy > :nth-child(6){ animation-delay:.7s; }
@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 offer leads, then the film, then the way in, so the
     wrappers dissolve and every piece is ordered around the video. */
  .hero{
    display:flex; flex-direction:column;
    padding-top:clamp(88px,20vw,112px);   /* 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__kicker{ order:1; margin-bottom:10px; }
  .hero h1.hero__ttl{ order:2; }
  .hero__art{ order:3; margin:6px 0 0; padding:0; }
  .hero__name{ order:4; margin-top:18px; }
  .hero__chips{ order:5; justify-content:center; }
  .hero__cta{ order:6; justify-content:center; }
  .hero__trust{ order:7; justify-content:center; padding-bottom:clamp(28px,6vw,40px); }
}
@media (max-width:560px){
  .hero__cta{ flex-direction:column; }
  .hero__cta .btn{ width:100%; }
  .hero__chips li{ font-size:.68rem; padding:6px 11px; }
}


/* ═══════════════════════ 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; }
}



/* ═══════════════════════════════════════════════════════════════
   GOOGLE ADS EDITION: lead-generation components
   Everything below is new to this page. It reuses the brand tokens
   above, so it reads as the same site with more ways in.
   ═══════════════════════════════════════════════════════════════ */

/* ─────────── Offer bar ─────────── */

.tbar{
  position:fixed; inset:0 0 auto; z-index:41;
  height:var(--tb); width:100%;
  display:flex; align-items:center; justify-content:center; gap:12px;
  padding:0 14px;
  background:var(--olive-dk); color:var(--cream-lt);
  font-family:var(--sans); font-size:.76rem; letter-spacing:.03em;
  transition:background .3s var(--ease);
}
.tbar:hover{ background:#373A2A; }
.tbar b{
  display:inline-flex; align-items:center; gap:6px;
  padding:4px 12px; border-radius:999px;
  background:var(--brand); color:#fff;
  font-size:.62rem; font-weight:600; letter-spacing:.14em; text-transform:uppercase;
  white-space:nowrap;
}
.tbar:hover b{ background:var(--brand-dk); }
.tbar__dot{
  width:7px; height:7px; border-radius:50%; flex:none;
  background:#8FD99B; animation:tbarPulse 2.2s ease-out infinite;
}
@keyframes tbarPulse{
  0%  { box-shadow:0 0 0 0 rgba(143,217,155,.7); }
  70% { box-shadow:0 0 0 8px rgba(143,217,155,0); }
  100%{ box-shadow:0 0 0 0 rgba(143,217,155,0); }
}
.tbar__short{ display:none; }
@media (max-width:640px){
  .tbar{ font-size:.7rem; gap:9px; }
  .tbar__long{ display:none; }
  .tbar__short{ display:inline; }
}
@media (prefers-reduced-motion:reduce){ .tbar__dot{ animation:none; } }


/* ─────────── Quick enquiry, across the foot of the hero ─────────── */

.qbar{
  position:relative; z-index:5;
  padding:0 0 clamp(34px,4vw,54px);
  background:var(--ground-lt);
}
.qbar__card{
  display:grid; grid-template-columns:230px minmax(0,1fr);
  gap:18px 28px; align-items:center;
  padding:22px 26px 18px;
  background:var(--paper); border:1px solid var(--line);
  border-top:3px solid var(--brand); border-radius:var(--r-lg);
  box-shadow:var(--sh-3);
}
.qbar__head h2{ font-size:1.28rem; line-height:1.2; }
.qbar__head p{ margin:7px 0 0; font-size:.84rem; line-height:1.5; color:var(--ink-soft); }

.qbar__frm{
  display:grid; grid-template-columns:minmax(0,1fr) minmax(0,1.3fr) minmax(0,1fr) auto;
  gap:10px; align-items:start;
}
.qbar__frm .hint{ display:none; }
.qbar__frm .btn{ min-height:49px; padding-inline:24px; }
.qbar__frm .chk{ grid-column:1 / -1; margin-top:0; }
.qbar__frm .chk label{ font-size:.68rem; line-height:1.45; }

@media (min-width:1081px){
  /* lifted over the bottom edge of the film so it reads as part of the hero */
  .qbar{ margin-top:-62px; background:linear-gradient(transparent 62px, var(--ground-lt) 62px); }
}
@media (max-width:1180px){
  .qbar__card{ grid-template-columns:1fr; }
  .qbar__head{ text-align:center; }
}
@media (max-width:1080px){
  .qbar{ padding-top:clamp(26px,5vw,40px); background:var(--ground); }
}
@media (max-width:720px){
  .qbar__card{ padding:20px 18px 16px; }
  .qbar__frm{ grid-template-columns:1fr; }
  .qbar__frm .btn{ width:100%; order:2; }   /* tick the consent, then send */
  .qbar__frm .chk{ grid-column:auto; }
}


/* ─────────── Section CTAs, two side by side ─────────── */

.sect__cta--duo{ display:flex; flex-wrap:wrap; justify-content:center; gap:12px; }
@media (max-width:560px){
  .sect__cta--duo .btn{ width:100%; }
}


/* ─────────── Configurations: locked price ─────────── */

.cfg__c{ position:relative; }
.cfg__flag{
  position:absolute; top:-11px; left:50%; transform:translateX(-50%);
  padding:4px 12px; border-radius:999px;
  background:var(--olive); color:var(--cream-lt);
  font-family:var(--sans); font-size:.58rem; font-weight:600;
  letter-spacing:.18em; text-transform:uppercase; white-space:nowrap;
}
.cfg__price{
  margin:6px 0 20px;
  font-family:var(--sans); font-size:.7rem; letter-spacing:.16em;
  text-transform:uppercase; color:var(--ink-soft);
}
.cfg__price b{
  font-family:var(--serif); font-weight:700; font-size:1.45rem;
  letter-spacing:-.01em; text-transform:none; color:var(--brand);
}
.cfg__price sup,.hero__pr sup,.cband__ttl sup{ font-size:.55em; vertical-align:.7em; margin-left:1px; }
.cfg__note{
  margin:22px 0 0; text-align:center;
  font-family:var(--sans); font-size:.72rem; color:var(--ink-soft);
}
.cfg__plan{ display:block; margin:14px auto 0; font-size:.76rem; }


/* ─────────── Contact bands ─────────── */

.cband{
  position:relative;
  padding:clamp(28px,3.6vw,42px) 0;
  background:var(--olive-dk); color:var(--cream);
}
.cband__in{
  display:flex; flex-wrap:wrap; align-items:center; justify-content:space-between;
  gap:18px 28px;
}
.cband__ttl{
  margin:0; font-family:var(--serif); font-weight:600;
  font-size:clamp(1.15rem,1.9vw,1.5rem); line-height:1.3; color:var(--cream-lt);
}
.cband__sub{
  margin:6px 0 0; font-family:var(--sans); font-size:.8rem;
  color:rgba(243,231,218,.7);
}
.cband__act{ display:flex; flex-wrap:wrap; gap:10px; }

.cband--end{ background:var(--brand); }
.cband--end .cband__sub{ color:rgba(255,248,240,.82); }
.cband--end .btn--fill{ background:#fff; color:var(--brand-dk); box-shadow:0 10px 26px -12px rgba(0,0,0,.4); }
.cband--end .btn--fill:hover{ background:var(--cream-lt); }
.cband--end .btn--onDark{ border-color:rgba(255,255,255,.55); color:#fff; }
.cband--end .btn--onDark:hover{ border-color:#fff; color:#fff; background:rgba(255,255,255,.1); }

@media (max-width:720px){
  .cband__in{ flex-direction:column; text-align:center; }
  .cband__act{ width:100%; flex-direction:column; }
  .cband__act .btn{ width:100%; }
}


/* ─────────── Why register now ─────────── */

.why{
  display:grid; grid-template-columns:repeat(4,minmax(0,1fr));
  gap:clamp(14px,1.8vw,22px);
}
.why__c{
  padding:clamp(26px,2.8vw,34px) clamp(18px,2vw,24px);
  text-align:center;
  background:var(--paper); border:1px solid var(--line); border-radius:var(--r);
  transition:transform .45s cubic-bezier(.22,1.2,.4,1), box-shadow .45s var(--ease), border-color .45s var(--ease);
}
.why__c:hover{ transform:translateY(-4px); box-shadow:var(--sh-2); border-color:var(--amber); }
.why__c i{
  width:54px; height:54px; margin:0 auto;
  display:grid; place-items:center; border-radius:50%;
  background:var(--cream); color:var(--brand);
}
.why__c i svg{ width:24px; height:24px; }
.why__c h3{ margin:18px 0 8px; font-size:1.1rem; }
.why__c p{ margin:0; font-size:.9rem; line-height:1.55; color:var(--ink-soft); }

@media (max-width:1080px){ .why{ grid-template-columns:repeat(2,minmax(0,1fr)); } }
@media (max-width:420px){
  .why__c{ padding:22px 12px; }
  .why__c h3{ font-size:.98rem; }
  .why__c p{ font-size:.82rem; }
}


/* ─────────── Location teaser ─────────── */

.loc__more{ display:inline-block; margin-top:14px; font-size:.8rem; }


/* ─────────── Amenities: eight tiles, the last one a door ─────────── */

#amenities .amen{ grid-template-columns:repeat(4,minmax(0,1fr)); }
.amen li.amen__more{ padding:0; background:var(--brand); border-color:var(--brand); }
.amen li.amen__more:hover{ background:var(--brand-dk); border-color:var(--brand-dk); }
.amen__more button{
  width:100%; height:100%;
  display:flex; flex-direction:column; align-items:center; justify-content:center; gap:4px;
  padding:24px 14px; color:#fff;
}
.amen__more b{ font-family:var(--serif); font-weight:600; font-size:2rem; line-height:1; }
.amen li.amen__more span{ color:#fff; }
.amen__more small{
  margin-top:4px; font-family:var(--sans); font-size:.62rem; font-weight:600;
  letter-spacing:.14em; text-transform:uppercase; opacity:.85;
}
@media (max-width:720px){ #amenities .amen{ grid-template-columns:repeat(2,minmax(0,1fr)); } }


/* ─────────── Specifications teaser ─────────── */

.spts{
  display:grid; grid-template-columns:repeat(4,minmax(0,1fr));
  gap:clamp(12px,1.6vw,18px);
}
.spt{
  padding:clamp(22px,2.4vw,28px) clamp(18px,2vw,22px);
  background:var(--paper); border:1px solid var(--line); border-radius:var(--r);
  transition:transform .45s cubic-bezier(.22,1.2,.4,1), box-shadow .45s var(--ease), border-color .45s var(--ease);
}
.spt:hover{ transform:translateY(-4px); box-shadow:var(--sh-2); border-color:var(--amber); }
.spt i{
  width:44px; height:44px; display:grid; place-items:center; border-radius:50%;
  background:var(--cream); color:var(--brand);
}
.spt i svg{ width:21px; height:21px; }
.spt h3{ margin:16px 0 6px; font-size:1.05rem; }
.spt p{ margin:0; font-size:.88rem; line-height:1.55; color:var(--ink-soft); }

.spt--lock{
  grid-column:1 / -1;
  display:flex; align-items:center; gap:18px; text-align:left;
  background:rgba(181,93,57,.06); border:1px dashed var(--brand);
}
.spt--lock:hover{ background:rgba(181,93,57,.1); border-color:var(--brand); }
.spt--lock .gate__lock{ position:static; margin:0; flex:none; }
.spt__txt b{
  display:block; font-family:var(--serif); font-weight:600;
  font-size:1.08rem; line-height:1.35; color:var(--ink);
}
.spt__txt span{
  display:block; margin-top:5px;
  font-family:var(--sans); font-size:.68rem; font-weight:600;
  letter-spacing:.14em; text-transform:uppercase; color:var(--brand);
}
@media (max-width:1080px){ .spts{ grid-template-columns:repeat(2,minmax(0,1fr)); } }
@media (max-width:420px){
  .spt{ padding:18px 14px; }
  .spt h3{ font-size:.96rem; }
  .spt p{ font-size:.8rem; }
}


/* ─────────── Early access: the phone alternative ─────────── */

.early__alt{
  margin:28px 0 0;
  font-family:var(--sans); font-size:.84rem; color:rgba(243,231,218,.72);
}
.early__alt a{ color:var(--amber-lt); text-decoration:underline; text-underline-offset:3px; }
.early__alt a:hover{ color:#fff; }


/* ─────────── Footer disclaimer ─────────── */

.ft p.ft__disc{
  max-width:none; margin:0; padding:0 0 22px;
  font-family:var(--sans); font-size:.72rem; line-height:1.65;
  color:rgba(243,231,218,.5);
}
.ft__bar a{ font-size:inherit; cursor:pointer; text-decoration:underline; text-underline-offset:3px; }


/* ─────────── Mobile bar: Call · WhatsApp · Price ─────────── */

.mbar{ grid-template-columns:1fr 1fr; }
.mbar a,.mbar button{ display:flex; align-items:center; justify-content:center; gap:7px; }
.mbar svg{ width:16px; height:16px; flex:none; }
.mbar .is-wa{ color:#1C9D4F; border-right:1px solid var(--line); }


/* ─────────── Hero: starting prices ─────────── */

.hero__price{ display:flex; flex-wrap:wrap; gap:10px; margin:20px 0 0; }
.hero__pr{
  display:grid; grid-template-columns:auto auto; align-items:baseline;
  column-gap:10px; row-gap:0; text-align:left;
  padding:10px 16px 9px;
  background:var(--paper); border:1px solid var(--line); border-left:3px solid var(--brand);
  border-radius:var(--r); box-shadow:var(--sh-1);
  transition:.3s var(--ease);
}
.hero__pr:hover{ border-color:var(--brand); transform:translateY(-2px); box-shadow:var(--sh-2); }
.hero__pr span{
  grid-column:1 / -1;
  font-family:var(--sans); font-size:.62rem; font-weight:600;
  letter-spacing:.18em; text-transform:uppercase; color:var(--ink-soft);
}
.hero__pr b{
  font-family:var(--serif); font-weight:700; font-size:clamp(1.25rem,1.7vw,1.55rem);
  line-height:1.2; color:var(--brand);
}
.hero__pr small{ font-family:var(--sans); font-size:.7rem; color:var(--ink-soft); }
.hero__price + .hero__chips{ margin-top:14px; }

@media (max-width:1080px){
  .hero__price{ order:5; justify-content:center; }
  .hero__chips{ order:6; }
  .hero__cta{ order:7; }
  .hero__trust{ order:8; }
}
@media (max-width:420px){
  .hero__price{ gap:8px; }
  .hero__pr{ padding:9px 12px 8px; }
}

/* Smaller laptops: the film is shorter here, so with prices in the banner
   the copy needs the room. The chips repeat Project Highlights, and the
   quick form sits just under the film rather than over it. */
@media (min-width:1081px) and (max-width:1365px){
  .hero__chips{ display:none; }
  .hero__name{ margin-top:16px; }
  .hero__price{ margin-top:16px; }
  .hero__cta{ margin-top:20px; }
  .qbar{ margin-top:-16px; background:linear-gradient(transparent 16px, var(--ground-lt) 16px); }
}

/* phones: the two prices side by side, "onwards" tucked under the figure */
@media (max-width:560px){
  .hero__price{
    display:grid; grid-template-columns:1fr 1fr; gap:8px;
    width:100%; box-sizing:border-box;
  }
  .hero__pr{ grid-template-columns:1fr; justify-items:center; text-align:center; padding:9px 8px 8px; }
  .hero__pr span{ grid-column:auto; }
}

.nw{ white-space:nowrap; }

/* phones: a long CTA label wraps inside the screen rather than running off it */
@media (max-width:560px){
  .sect__cta .btn,.cband__act .btn,.hero__cta .btn{
    white-space:normal; max-width:100%; text-align:center; line-height:1.5;
  }
}

/* Header with eight links: never wrap a label; on smaller laptops the
   phone number gives up its room (Call stays in every other bar) */
.nav a{ white-space:nowrap; }
@media (min-width:861px) and (max-width:1240px){
  .hdr__tel{ display:none; }
  .nav{ gap:clamp(10px,1.2vw,16px); }
  .nav a{ font-size:.64rem; letter-spacing:.1em; }
}
.hdr__logo{ flex:none; }
/* below ~1024px eight links no longer sit comfortably: use the menu button */
@media (min-width:861px) and (max-width:1023px){
  .nav{ display:none; }
  .burger{ display:block; }
}