/* ═══════════════════════════════════════════════════════════════
   SOWPARNIKA · 86th CHAPTER — WHITEFIELD–HOSKOTE 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;

  --cream:#F3E7DA;
  --cream-lt:#FAF4EC;
  --cream-dp:#EAD9C7;

  --olive:#51563D;
  --olive-dk:#3B3F2C;
  --olive-lt:#6B7153;

  --ink:#2B2723;
  --ink-soft:#6B6259;
  --line:#E6DACB;
  --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);

  --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(--paper);
  -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--cream{ background:var(--cream-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:2px;
  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(18px,2.2vw,34px); }
.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{ color:var(--brand); }
.nav a:hover::after{ width:100%; }

.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:96px var(--pad) 30px;
  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{
  padding:13px 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 ═══════════════════════
   Full-bleed, 60 / 40. The right 40% is the key-visual slot: a 5:7 portrait
   panel that hugs the right edge of the screen. At a 1920×1080 desktop the
   slot measures 768 × 1000 px and the artwork inside it 714 × 1000.
   ═══════════════════════════════════════════════════════ */

.hero{
  position:relative;
  padding:clamp(72px,7vw,84px) 0 0;
  background:
    radial-gradient(120% 90% at 0% 8%, rgba(243,231,218,.62), transparent 58%),
    var(--paper);
  overflow:hidden;
}
.hero__grid{
  width:100%;
  display:grid; grid-template-columns:minmax(0,60fr) minmax(0,40fr);
  align-items:center;
  min-height:clamp(560px, calc(100vh - 80px), 860px);
}

.hero__copy{
  padding:clamp(40px,5vw,72px) clamp(32px,4vw,64px) clamp(40px,5vw,72px) var(--pad);
  max-width:760px;
  justify-self:start;
}
@media (min-width:1600px){
  /* keep the copy from drifting into the middle on very wide screens */
  .hero__copy{ margin-left:calc((100% - 1152px) / 2); max-width:820px; }
}

.hero h1{
  font-size:clamp(2.05rem,3.55vw,3.2rem);
  letter-spacing:-.01em;
  margin:0;
  color:var(--ink);
}
.hero h1 em{ font-style:normal; font-weight:700; color:var(--brand); white-space:nowrap; }

.hero__meta{
  display:flex; flex-wrap:wrap; align-items:center; gap:10px 16px;
  margin:22px 0 0;
  font-size:.7rem; font-weight:500; letter-spacing:.18em; text-transform:uppercase;
  color:var(--ink-soft);
}
.hero__meta i{ font-style:normal; color:var(--line); }
.hero__meta b{ color:var(--brand); font-weight:500; }

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

/* ─────────── The key-visual slot ───────────
   The supplied 86th Chapter artwork: the beam sweeps down-right and fades to
   nothing, so it is anchored to the top-right of the column and allowed to
   run a little past the screen edge — the bleed is what makes it feel like
   the page is being opened rather than a picture placed on it.            */

.shard{
  position:relative; min-width:0;
  align-self:stretch;
  display:flex; align-items:flex-end; justify-content:flex-end;
  padding-top:48px;                /* clears the floating header */
}
.shard__stage{ width:100%; will-change:transform; }
.shard__float{ position:relative; }
.shard picture,.shard img{ display:block; width:100%; height:auto; max-width:none; }

/* ── entrance: the shard pours out of the cloud, top-left to bottom-right ── */
.shard__float{
  animation:unfold 1.9s cubic-bezier(.3,.6,.2,1) .2s both,
            breathe 7s ease-in-out 2.2s infinite alternate;
}
@keyframes unfold{
  0%  { clip-path:polygon(0 0, 6% 0, 0 6%); opacity:0; }
  20% { opacity:1; }
  100%{ clip-path:polygon(0 0, 260% 0, 0 260%); opacity:1; }
}
@keyframes breathe{
  from{ transform:translateY(0) scale(1); }
  to  { transform:translateY(-10px) scale(1.015); }
}

/* ── the light: a gloss band clipped to the artwork's own pixels, sweeping
   down the beam every few seconds like sun catching a surface ── */
.shard__gloss{
  position:absolute; inset:0; pointer-events:none;
  -webkit-mask:url('../img/hero-86-chapter.png') center / 100% 100% no-repeat;
          mask:url('../img/hero-86-chapter.png') center / 100% 100% no-repeat;
}
.shard__gloss{
  background:linear-gradient(135deg,
    rgba(255,255,255,0)   36%,
    rgba(255,248,240,.6)  46%,
    rgba(255,255,255,1)   50%,
    rgba(255,248,240,.6)  54%,
    rgba(255,255,255,0)   64%);
  background-size:260% 260%;
  mix-blend-mode:overlay;
  animation:gloss 5.2s cubic-bezier(.45,.05,.35,1) 1.4s infinite;
}
@keyframes gloss{
  0%  { background-position:0% 0%;     opacity:0; }
  12% { opacity:1; }
  70% { opacity:1; }
  85% { background-position:100% 100%; opacity:0; }
  100%{ background-position:100% 100%; opacity:0; }
}
  to  { background-position:160px 160px, 96px 96px; }
}

/* the copy follows the artwork in, one line after another */
.hero__copy > *{ animation:rise .9s cubic-bezier(.2,.7,.2,1) both; }
.hero__copy > :nth-child(1){ animation-delay:.3s; }
.hero__copy > :nth-child(2){ animation-delay:.45s; }
.hero__copy > :nth-child(3){ animation-delay:.6s; }
.hero__copy > :nth-child(4){ animation-delay:.75s; }
@keyframes rise{ from{ opacity:0; transform:translateY(22px); } }

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

@media (min-width:1081px){
  /* the artwork's own right side is the fade, so a small bleed past the
     screen edge costs nothing and makes the shard feel bigger */
  .shard__stage{ width:124%; margin-left:-150px; }
}


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

.glance{
  display:grid; grid-template-columns:repeat(4,minmax(0,1fr));
  gap:1px; background:var(--line);
  border:1px solid var(--line);
}
.glance__i{
  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;
}

.glance__note{
  margin:22px 0 0; font-size:.83rem; color:var(--ink-soft); font-style:italic;
}


/* ═══════════════════════ 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{
  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{
  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{
  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:2px;
  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:2px;
  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:3px;
  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:2px; 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:2px; 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(3,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; }


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

.ft{ background:var(--olive-dk); color:rgba(243,231,218,.7); padding:clamp(48px,6vw,72px) 0 0; }
.ft__grid{
  display:flex; justify-content:space-between; align-items:center; gap:clamp(28px,4vw,58px);
  padding-bottom:clamp(34px,4vw,52px);
}
.ft__logo{ height:64px; width:auto; }
.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); }
.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 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){
  .hero{ padding-top:86px; }
  .hero__grid{ grid-template-columns:1fr; gap:0; min-height:0; }
  /* the copy block dissolves so its pieces can be ordered around the artwork:
     eyebrow + headline (centred) → artwork → paragraph → button */
  .hero__copy{ display:contents; }
  .hero__copy > *{ padding-inline:var(--pad); }
  .hero .eyebrow{ display:none; }
  .hero h1{ order:2; text-align:center; margin-bottom:26px; line-height:1.22; }
  .shard{ order:3; min-height:0; align-self:auto; padding-top:0; }
  .hero .lede{ order:4; margin-top:22px; }
  .hero__cta{ order:5; margin-top:24px; padding-bottom:40px; }
  .shard__stage{ width:100%; margin-left:0; }
  .glance{ grid-template-columns:repeat(2,minmax(0,1fr)); }
  .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:560px){
  /* 1 – 2 – 1: Location full width, Land Parcel + Launch Status side by side, Configuration full width */
  .glance__i{ padding:20px 16px; text-align:center; }
  .glance__i b{ font-size:1.05rem; }
  .glance__i:nth-child(1){ grid-column:1 / -1; order:1; }
  .glance__i:nth-child(2){ order:2; }
  .glance__i:nth-child(4){ order:3; }
  .glance__i:nth-child(3){ grid-column:1 / -1; order:4; }
  .pillars{ grid-template-columns:1fr; }
  .ft__grid{ flex-direction:column; align-items:flex-start; gap:28px; }
  .hero__cta .btn{ width:100%; }
  .faq__a p{ padding-right:0; }
}