/* ============================================================================
   WEB ASCENSION PRO — flagship stylesheet
   Palette: midnight navy + champagne gold, ivory daylight band.
   Type: Clash Display (display) / Satoshi (body) / Zodiak italic (accents).
   Motion plumbing follows the house scroll-engine standard (html.reduce, etc).
   ============================================================================ */
/* Self-hosted type (Fontshare families, free for commercial use) */
@font-face{ font-family:"Clash Display"; src:url("../assets/fonts/ClashDisplay-500.woff2") format("woff2"); font-weight:500; font-style:normal; font-display:swap; }
@font-face{ font-family:"Clash Display"; src:url("../assets/fonts/ClashDisplay-600.woff2") format("woff2"); font-weight:600; font-style:normal; font-display:swap; }
@font-face{ font-family:"Satoshi"; src:url("../assets/fonts/Satoshi-400.woff2") format("woff2"); font-weight:400; font-style:normal; font-display:swap; }
@font-face{ font-family:"Satoshi"; src:url("../assets/fonts/Satoshi-500.woff2") format("woff2"); font-weight:500; font-style:normal; font-display:swap; }
@font-face{ font-family:"Satoshi"; src:url("../assets/fonts/Satoshi-700.woff2") format("woff2"); font-weight:700; font-style:normal; font-display:swap; }
@font-face{ font-family:"Zodiak"; src:url("../assets/fonts/Zodiak-400-italic.woff2") format("woff2"); font-weight:400; font-style:italic; font-display:swap; }

:root{
  --bg:#050a16; --bg-2:#0a1226; --panel:#0e1730; --panel-2:#131f42;
  --ink:#f4f1e8; --muted:#a7aec4; --muted-2:#78829e;
  --gold:#c9a96a; --gold-hi:#e9d3a2; --gold-dk:#8f7440;
  --line:rgba(201,169,106,.16); --line-n:rgba(167,174,196,.13);
  --glow:rgba(201,169,106,.35);
  --lt-bg:#f3efe6; --lt-bg-2:#eae4d6; --lt-ink:#0b142e; --lt-muted:#5a6178; --lt-line:rgba(11,20,46,.14);
  --maxw:1240px; --gut:clamp(20px,4.4vw,48px);
  --ease:cubic-bezier(.22,.61,.36,1); --ease-out:cubic-bezier(.16,1,.3,1);
  --display:"Clash Display","Satoshi",system-ui,sans-serif;
  --body:"Satoshi",system-ui,-apple-system,sans-serif;
  --serif:"Zodiak",Georgia,serif;
}

/* ---------------- base ---------------- */
*,*::before,*::after{ box-sizing:border-box; }
html{ overflow-x:clip; scroll-behavior:smooth; }
html.reduce{ scroll-behavior:auto; }
html.lenis, html.lenis body{ height:auto; }
.lenis.lenis-smooth{ scroll-behavior:auto !important; }
body{ margin:0; background:var(--bg); color:var(--ink); font-family:var(--body);
  font-size:clamp(1rem,.96rem + .25vw,1.11rem); line-height:1.65;
  -webkit-font-smoothing:antialiased; text-rendering:optimizeLegibility; overflow-x:clip; }
img,canvas,svg,video{ display:block; max-width:100%; }
a{ color:inherit; text-decoration:none; }
button{ font:inherit; color:inherit; cursor:pointer; background:none; border:0; padding:0; }
button, a{ touch-action:manipulation; -webkit-tap-highlight-color:rgba(201,169,106,.18); }
:focus-visible{ outline:2px solid var(--gold); outline-offset:3px; border-radius:3px; }
::selection{ background:rgba(201,169,106,.32); color:var(--ink); }
h1,h2,h3,h4{ font-family:var(--display); font-weight:600; line-height:1.02; letter-spacing:-.015em; margin:0; text-wrap:balance; }
h1 em,h2 em,h3 em,.em-serif{ font-family:var(--serif); font-style:italic; font-weight:400; color:var(--gold-hi); letter-spacing:0; }
p{ margin:0; }
.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; }

.wrap{ width:min(var(--maxw),100% - var(--gut)*2); margin-inline:auto; }
.section{ position:relative; padding:clamp(84px,11vw,150px) 0; }
.eyebrow{ display:flex; align-items:center; gap:14px; font-size:.72rem; font-weight:500;
  letter-spacing:.28em; text-transform:uppercase; color:var(--gold); margin-bottom:26px; }
.eyebrow::before{ content:""; width:34px; height:1px; background:linear-gradient(90deg,var(--gold),transparent); flex:0 0 auto; }
.lead{ color:var(--muted); max-width:56ch; }
.h-xl{ font-size:clamp(2.4rem,5.4vw,4.4rem); }
.h-lg{ font-size:clamp(1.9rem,4.2vw,3.3rem); }
.h-md{ font-size:clamp(1.4rem,2.6vw,2rem); }

/* ---------------- kinetic gating (no flash before JS) ---------------- */
.js [data-split], .js [data-reveal]{ visibility:hidden; }
html.reduce [data-split], html.reduce [data-reveal]{ visibility:visible !important; }
.word{ display:inline-block; overflow:hidden; vertical-align:top; padding:0 .02em; margin:0 -.02em; }
.word-i{ display:inline-block; will-change:transform; }

/* ---------------- loader ---------------- */
.loader{ position:fixed; inset:0; z-index:300; background:var(--bg); display:grid; place-items:center;
  transition:opacity .8s var(--ease), visibility .8s; }
.loader.done{ opacity:0; visibility:hidden; pointer-events:none; }
.loader-inner{ display:flex; flex-direction:column; align-items:center; gap:22px; }
.loader-mark{ width:74px; height:auto; filter:drop-shadow(0 0 22px rgba(201,169,106,.25)); }
.loader-bar{ width:170px; height:1px; background:rgba(201,169,106,.18); overflow:hidden; border-radius:1px; }
.loader-bar span{ display:block; height:100%; width:0%; background:linear-gradient(90deg,var(--gold-dk),var(--gold-hi)); }
.loader-pct{ font-family:var(--display); font-weight:500; font-size:.72rem; letter-spacing:.34em; color:var(--muted-2); }

/* page transition veil */
.veil{ position:fixed; inset:0; z-index:290; background:var(--bg); transform:scaleY(0); transform-origin:50% 100%; pointer-events:none; }
.veil-line{ position:absolute; left:0; right:0; top:0; height:2px; background:linear-gradient(90deg,transparent,var(--gold),transparent); opacity:0; }

/* ---------------- progress bar ---------------- */
.progress{ position:fixed; top:0; left:0; right:0; height:2px; z-index:140; pointer-events:none; }
.progress-bar{ display:block; height:100%; width:100%; transform:scaleX(0); transform-origin:0 50%;
  background:linear-gradient(90deg,var(--gold-dk),var(--gold-hi)); }

/* ---------------- top bar ---------------- */
/* Always visible, fully transparent — no bar, just the floating pieces.
   .on-light flips the text to navy ink while an ivory section is under it. */
.topbar{ position:fixed; inset:0 0 auto 0; z-index:120; display:flex; align-items:center; justify-content:space-between;
  padding:16px clamp(16px,3.2vw,36px);
  padding-left:max(clamp(16px,3.2vw,36px),env(safe-area-inset-left));
  padding-right:max(clamp(16px,3.2vw,36px),env(safe-area-inset-right)); }
.brand{ display:inline-flex; align-items:center; gap:12px; min-height:44px; }
.brand img{ width:40px; height:40px; object-fit:contain; }
.brand-name{ font-family:var(--display); font-weight:500; font-size:.98rem; letter-spacing:.06em; transition:color .4s var(--ease); }
.brand-name b{ font-weight:600; color:var(--gold-hi); transition:color .4s var(--ease); }
.topbar.on-light .brand-name{ color:var(--lt-ink); }
.topbar.on-light .brand-name b{ color:var(--gold-dk); }
.topbar.on-light .menu-btn{ color:#4a516b; }
.topbar.on-light .menu-btn:hover{ color:var(--lt-ink); }
/* the open menu is dark — keep the bar's night colors on top of it */
body.menu-open .topbar .brand-name{ color:var(--ink); }
body.menu-open .topbar .brand-name b{ color:var(--gold-hi); }
body.menu-open .topbar .menu-btn{ color:var(--muted); }
body.menu-open .topbar .menu-btn:hover{ color:var(--ink); }
.top-actions{ display:flex; align-items:center; gap:12px; }

/* menu button */
.menu-btn{ position:relative; display:inline-flex; align-items:center; gap:10px; min-height:44px; padding:8px 6px; color:var(--muted); transition:color .35s var(--ease); }
.menu-btn:hover{ color:var(--ink); }
.menu-btn .mb-label{ font-size:.72rem; letter-spacing:.26em; text-transform:uppercase; }
.mb-ico{ position:relative; width:26px; height:12px; }
.mb-ico i{ position:absolute; left:0; width:26px; height:1.6px; background:currentColor; border-radius:2px;
  transform-origin:0 50%; transition:transform .45s var(--ease); }
.mb-ico i:nth-child(1){ top:1px; }
.mb-ico i:nth-child(2){ top:9px; transform:scaleX(.7); }
.menu-btn:hover .mb-ico i:nth-child(2){ transform:scaleX(1); }
body.menu-open .mb-ico i{ transform-origin:50% 50%; }
body.menu-open .mb-ico i:nth-child(1){ transform:translateY(4px) rotate(45deg); }
body.menu-open .mb-ico i:nth-child(2){ transform:translateY(-4px) rotate(-45deg) scaleX(1); }

/* ---------------- CTA buttons ---------------- */
.btn{ position:relative; display:inline-flex; align-items:center; justify-content:center; gap:11px;
  min-height:48px; padding:13px 26px; border-radius:60px; font-family:var(--display); font-weight:500;
  font-size:.92rem; letter-spacing:.05em; overflow:hidden; isolation:isolate; white-space:nowrap;
  transition:color .4s var(--ease), border-color .4s var(--ease), box-shadow .5s var(--ease), transform .4s var(--ease); }
.btn .btn-arrow{ display:inline-flex; transition:transform .45s var(--ease); }
.btn:hover .btn-arrow{ transform:translateX(5px); }
/* external arrow (↗) marks buttons that take you to another page */
.btn:hover .ba-ext{ transform:translate(3px,-3px); }
.btn::after{ /* specular sweep */ content:""; position:absolute; inset:0; z-index:-1;
  background:linear-gradient(115deg,transparent 30%,rgba(255,255,255,.34) 50%,transparent 70%);
  transform:translateX(-130%); transition:transform .9s var(--ease); }
.btn:hover::after{ transform:translateX(130%); }
.btn-gold{ background:linear-gradient(160deg,var(--gold-hi),var(--gold) 55%,var(--gold-dk)); color:#0a1226;
  box-shadow:0 8px 30px -12px rgba(201,169,106,.55); }
.btn-gold:hover{ box-shadow:0 14px 44px -12px rgba(201,169,106,.7); }
.btn-ghost{ border:1px solid var(--line); color:var(--ink); background:color-mix(in srgb,var(--panel) 40%, transparent); }
.btn-ghost:hover{ border-color:color-mix(in srgb,var(--gold) 60%, transparent); color:var(--gold-hi); }
.btn-ghost::after{ background:linear-gradient(115deg,transparent 30%,rgba(233,211,162,.14) 50%,transparent 70%); }
.light-band .btn-ghost{ border-color:var(--lt-line); color:var(--lt-ink); background:transparent; }
.light-band .btn-ghost:hover{ border-color:var(--gold-dk); color:var(--gold-dk); }

/* ---------------- motion toggle ---------------- */
.motion-toggle{ display:inline-flex; align-items:center; gap:8px; min-height:44px; padding:8px 14px; border-radius:40px;
  border:1px solid var(--line-n); background:color-mix(in srgb,var(--panel) 55%, transparent); color:var(--muted);
  font-size:.66rem; letter-spacing:.16em; text-transform:uppercase;
  transition:border-color .35s var(--ease), color .35s var(--ease); }
.motion-toggle:hover{ border-color:color-mix(in srgb,var(--gold) 50%, transparent); color:var(--ink); }
.mt-dot{ width:7px; height:7px; border-radius:50%; background:var(--muted-2); transition:background .35s var(--ease), box-shadow .35s var(--ease); }
.motion-toggle[aria-pressed="true"] .mt-dot{ background:var(--gold); box-shadow:0 0 9px var(--glow); }

/* ---------------- full-screen menu ---------------- */
.menu{ position:fixed; inset:0; z-index:110; background:color-mix(in srgb,var(--bg) 92%, black);
  display:flex; align-items:center; visibility:hidden; opacity:0; transition:opacity .55s var(--ease), visibility .55s;
  overscroll-behavior:contain; overflow-y:auto; }
body.menu-open .menu{ visibility:visible; opacity:1; }
/* short/landscape screens: let the menu scroll instead of clipping its top */
@media (max-height:600px){ .menu{ align-items:flex-start; padding-block:clamp(66px,14vh,90px); } }
.menu-grid{ display:grid; grid-template-columns:1.4fr 1fr; gap:clamp(30px,6vw,90px); width:min(var(--maxw),100% - var(--gut)*2); margin-inline:auto; align-items:center; }
.menu-links{ list-style:none; margin:0; padding:0; }
.menu-links li{ overflow:hidden; }
.menu-links a{ position:relative; display:inline-flex; align-items:baseline; gap:18px; padding:10px 0;
  font-family:var(--display); font-weight:500; font-size:clamp(2rem,5.2vw,3.6rem); letter-spacing:-.01em;
  color:var(--muted); transition:color .4s var(--ease); transform:translateY(120%); }
body.menu-open .menu-links a{ transform:translateY(0); transition:transform .8s var(--ease-out), color .4s var(--ease); }
body.menu-open .menu-links li:nth-child(1) a{ transition-delay:.08s } body.menu-open .menu-links li:nth-child(2) a{ transition-delay:.15s }
body.menu-open .menu-links li:nth-child(3) a{ transition-delay:.22s } body.menu-open .menu-links li:nth-child(4) a{ transition-delay:.29s }
body.menu-open .menu-links li:nth-child(5) a{ transition-delay:.36s }
.menu-links a:hover, .menu-links a[aria-current="page"]{ color:var(--ink); }
.menu-links a::after{ content:""; position:absolute; left:0; bottom:6px; height:2px; width:100%;
  background:linear-gradient(90deg,var(--gold),transparent); transform:scaleX(0); transform-origin:0 50%; transition:transform .5s var(--ease); }
.menu-links a:hover::after{ transform:scaleX(1); }
.menu-side{ border-left:1px solid var(--line-n); padding-left:clamp(24px,3vw,44px); display:grid; gap:18px;
  opacity:0; transform:translateY(18px); transition:opacity .6s var(--ease) .3s, transform .6s var(--ease) .3s; }
body.menu-open .menu-side{ opacity:1; transform:translateY(0); }
.menu-side .ms-label{ font-size:.68rem; letter-spacing:.26em; text-transform:uppercase; color:var(--muted-2); }
.menu-side .menu-cta{ align-self:flex-start; justify-self:start; font-size:1.06rem; padding:18px 36px; min-height:60px; }
.menu-side .ms-tel{ color:var(--muted); font-size:.96rem; transition:color .3s; }
.menu-side .ms-tel b{ color:var(--gold-hi); font-weight:600; letter-spacing:.03em; }
.menu-side .ms-tel:hover{ color:var(--ink); }

/* ---------------- hero ---------------- */
.hero{ position:relative; min-height:100svh; display:grid; align-items:center; padding:120px 0 90px; overflow:clip; }
.hero-canvas{ position:absolute; inset:0; width:100%; height:100%; pointer-events:none; }
.hero-vignette{ position:absolute; inset:0; pointer-events:none;
  background:radial-gradient(120% 90% at 50% 42%, transparent 30%, rgba(3,6,14,.55) 72%, rgba(3,6,14,.92) 100%); }
.hero-inner{ position:relative; z-index:2; }
.hero h1{ font-size:clamp(2.7rem,7vw,5.9rem); max-width:14ch; }
.hero-sub{ margin-top:26px; max-width:52ch; color:var(--muted); font-size:clamp(1.02rem,1.25vw,1.2rem); }
.hero-ctas{ display:flex; flex-wrap:wrap; gap:16px; margin-top:40px; }
.hero-foot{ position:absolute; left:0; right:0; bottom:26px; z-index:2; display:flex; justify-content:space-between; align-items:flex-end; padding:0 var(--gut); color:var(--muted-2); font-size:.72rem; letter-spacing:.22em; text-transform:uppercase; }
.scroll-cue{ display:inline-flex; flex-direction:column; align-items:center; gap:10px; }
.scroll-cue .sc-line{ width:1px; height:44px; background:linear-gradient(180deg,var(--gold),transparent); overflow:hidden; position:relative; }
.pin-cue{ position:absolute; bottom:26px; left:50%; transform:translateX(-50%); z-index:5;
  font-size:.68rem; letter-spacing:.24em; text-transform:uppercase; color:var(--muted-2); }
html.reduce .pin-cue, html.reduce .s-cue{ display:none !important; }

/* scroll-cue component (house standard): JS injects internals, drives --p/--fill.
   Ring draws with section progress, arrow lights as a fill, label flips to
   "Keep scrolling" once the visitor moves. */
.s-cue{ --p:0; --fill:0%; display:grid; justify-items:center; gap:9px;
  font-size:.62rem; font-weight:500; letter-spacing:.28em; text-transform:uppercase;
  color:var(--muted-2); pointer-events:none; }
.s-cue .sc-label{ text-indent:.28em; transition:color .45s var(--ease); }
.s-cue .sc-stage{ position:relative; width:44px; height:44px; display:block; animation:cueBob 1.8s cubic-bezier(.45,0,.55,1) infinite; }
@keyframes cueBob{ 0%,100%{ transform:translateY(0); } 50%{ transform:translateY(5px); } }
.s-cue .sc-ring{ position:absolute; inset:0; width:44px; height:44px; transform:rotate(-90deg); }
.s-cue .sc-ring circle{ fill:none; stroke-width:1.4; }
.s-cue .scr-t{ stroke:var(--line-n); transition:stroke .45s var(--ease); }
.s-cue .scr-f{ stroke:var(--gold); stroke-linecap:round; stroke-dasharray:131.9;
  stroke-dashoffset:calc(131.9 * (1 - var(--p))); transition:stroke .45s var(--ease); }
.s-cue .sc-arrows{ position:absolute; left:50%; top:50%; width:15px; height:22px; transform:translate(-50%,-50%); }
.s-cue .sc-a{ position:absolute; inset:0; width:100%; height:100%; }
.s-cue .sc-a-base{ color:color-mix(in srgb,var(--muted-2) 55%, transparent); transition:color .45s var(--ease); }
.s-cue .sc-a-lit{ color:var(--gold-hi); clip-path:inset(0 0 calc(100% - var(--fill)) 0); transition:color .45s var(--ease); }
/* daylight reaches the cue during the flip: swap to ink-on-ivory */
.s-cue.on-day{ color:#4a516b; }
.s-cue.on-day .scr-t{ stroke:var(--lt-line); }
.s-cue.on-day .scr-f{ stroke:var(--gold-dk); }
.s-cue.on-day .sc-a-base{ color:rgba(11,20,46,.28); }
.s-cue.on-day .sc-a-lit{ color:var(--gold-dk); }
.deck-cue{ position:absolute; bottom:3.6svh; left:50%; transform:translateX(-50%); z-index:5; }
/* mobile: the flip still pins (keep its cue); steps and deck flow normally there */
@media (max-width:860px){ [data-steps] .s-cue, .deck-cue{ display:none; } }
.scroll-cue .sc-line::after{ content:""; position:absolute; left:0; top:-40%; width:100%; height:40%;
  background:var(--gold-hi); animation:cueDrop 2.1s var(--ease) infinite; }
@keyframes cueDrop{ 0%{ top:-40%; } 60%{ top:100%; } 100%{ top:100%; } }
html.reduce .scroll-cue .sc-line::after{ animation:none; }

/* ascent line (the motif thread) */
.ascent-line{ position:absolute; left:50%; width:1px; pointer-events:none; z-index:1;
  background:linear-gradient(180deg,transparent,var(--gold) 12%,var(--gold) 88%,transparent);
  transform-origin:50% 0; }

/* ---------------- frame-scrub section ---------------- */
[data-scrub]{ position:relative; background:var(--bg); }
.scrub-track{ height:340svh; }
@media (max-width:860px){ .scrub-track{ height:260svh; } }
html.reduce .scrub-track{ height:auto !important; }
[data-scrub-pin]{ position:relative; height:100svh; overflow:hidden; background:var(--bg); }
[data-scrub-pin] canvas{ position:absolute; inset:0; width:100%; height:100%; }
.scrub-vignette{ position:absolute; inset:0; pointer-events:none;
  background:radial-gradient(110% 85% at 50% 50%, transparent 34%, rgba(3,6,14,.62) 74%, rgba(3,6,14,.95) 100%); }
.scrub-caption{ position:absolute; inset:0; display:grid; place-items:center; text-align:center; padding:0 var(--gut); }
.scrub-caption .cap{ font-family:var(--display); font-weight:600; font-size:clamp(1.9rem,4.6vw,3.8rem); line-height:1.12; max-width:22ch;
  text-shadow:0 2px 30px rgba(3,6,14,.85), 0 0 2px rgba(3,6,14,.9); }
.scrub-caption .cap .lt{ opacity:0; }
.scrub-cue{ position:absolute; bottom:26px; left:50%; transform:translateX(-50%); }
html.reduce [data-scrub]{ min-height:auto !important; }
html.reduce .scrub-caption .cap .lt{ opacity:1 !important; }

/* ---------------- the flip (night turns to day, then the offer rises) ---------------- */
.flip-track{ height:400svh; position:relative; z-index:1; } /* last 100svh = the offer band's climb */
.flip-pin{ position:relative; height:100svh; overflow:hidden; }
.flip-layer{ position:absolute; inset:0; display:grid; place-items:center; text-align:center; padding:0 var(--gut); }
.flip-night{ background:radial-gradient(120% 90% at 50% 30%, #0a1226 0%, var(--bg) 70%); }
.flip-day{ background:var(--lt-bg); color:var(--lt-ink); will-change:clip-path,transform; clip-path:inset(100% 0 0 0); }
.flip-shade{ position:absolute; inset:0; background:#0b142e; opacity:0; pointer-events:none; }
html.reduce .flip-shade{ display:none; }
/* beat 3: pull the offer band up into the pin's final screen so it rises
   over the day layer and the pin releases the instant it reaches the top */
.flip-track.has-handoff + .light-band{ margin-top:-100svh; }
.flip-day em{ color:var(--gold-dk); }
.flip-big{ font-family:var(--display); font-weight:600; font-size:clamp(2rem,5.4vw,4.3rem); line-height:1.1; max-width:16ch; margin:0; letter-spacing:-.015em; text-wrap:balance; }
.flip-night .flip-big{ transform:translateY(-9svh); }
.flip-day .flip-big{ transform:translateY(6svh); }
html.reduce .flip-night .flip-big, html.reduce .flip-day .flip-big{ transform:none; }
.flip-line .lt{ opacity:0; }
.flip-stars{ position:absolute; inset:0; width:100%; height:100%; pointer-events:none; }
.flip-horizon{ position:absolute; left:0; right:0; top:104%; height:2px; will-change:top; opacity:0;
  background:linear-gradient(90deg,transparent,var(--gold-hi) 22%,var(--gold-hi) 78%,transparent);
  box-shadow:0 0 26px 2px rgba(233,211,162,.55); }
@media (max-width:860px){ .flip-track{ height:330svh; } }
html.reduce .flip-track{ height:auto !important; }
html.reduce .flip-pin{ height:auto; }
html.reduce .flip-layer{ position:relative; min-height:56svh; }
html.reduce .flip-day{ clip-path:none !important; }
html.reduce .flip-line .lt{ opacity:1 !important; }
html.reduce .flip-horizon{ display:none; }

/* ---------------- step accordion (the path) ---------------- */
.steps-section{ position:relative; background:linear-gradient(180deg,var(--bg) 0%,var(--bg-2) 100%); }
.steps-head{ padding:clamp(84px,10vw,140px) 0 0; }
.steps-track{ height:380svh; } /* tall only while pinned (motion-engine 13.12) */
@media (max-width:860px){ .steps-track{ height:auto; } }
html.reduce .steps-track{ height:auto !important; }
[data-steps]{ position:relative; }
[data-steps-pin]{ position:relative; min-height:100svh; display:grid; align-items:center; padding:90px 0; }
.steps-grid{ display:grid; grid-template-columns:1.05fr .95fr; gap:clamp(30px,5vw,80px); align-items:center; }
.steps{ list-style:none; margin:0; padding:0; }
.step{ border-top:1px solid var(--line-n); padding:4px 0; }
.step:first-of-type{ border-top:0; }
.step-row{ display:flex; align-items:center; gap:18px; padding:16px 0; }
.step-num{ flex:0 0 auto; display:grid; place-items:center; width:38px; height:38px; border-radius:11px;
  font-family:var(--display); font-size:.8rem; font-weight:500; font-variant-numeric:tabular-nums;
  color:var(--muted-2); border:1px solid var(--line-n); transition:all .5s var(--ease); }
.step-title{ font-size:clamp(1.35rem,2.4vw,1.95rem); color:var(--muted-2); transition:color .5s var(--ease); }
.step-body{ position:relative; display:grid; grid-template-rows:0fr; opacity:0; padding-left:56px;
  transition:grid-template-rows .6s var(--ease), opacity .5s var(--ease); }
.step-body>*{ min-height:0; }
.step-body p{ margin:0 0 16px; color:var(--muted); max-width:44ch; overflow:hidden; }
.step-line{ position:absolute; left:18px; top:2px; width:2px; height:calc(100% - 18px); background:var(--line-n); border-radius:2px; overflow:hidden; }
.step-line i{ position:absolute; inset:0 0 auto 0; height:100%; display:block; transform:scaleY(0); transform-origin:top;
  background:linear-gradient(180deg,var(--gold-hi),var(--gold-dk)); }
.step.is-active .step-num{ color:#0a1226; background:var(--gold); border-color:var(--gold); }
.step.is-active .step-title{ color:var(--ink); }
.step.is-active .step-body{ grid-template-rows:1fr; opacity:1; }
.step.is-active .step-line i{ transform:scaleY(1); }
[data-step-media]{ position:relative; aspect-ratio:4/4.6; max-height:66svh; }
.jm{ position:absolute; inset:0; margin:0; opacity:0; transform:scale(1.05); transition:opacity .7s var(--ease), transform 1.2s var(--ease);
  border-radius:18px; overflow:hidden; border:1px solid var(--line-n);
  background:linear-gradient(165deg,var(--panel) 0%,var(--bg-2) 100%); }
.jm.is-active{ opacity:1; transform:scale(1); }
.jm svg{ width:100%; height:100%; }
html.reduce [data-steps]{ min-height:auto !important; }
html.reduce [data-steps-pin]{ min-height:auto; }
html.reduce .step-body{ grid-template-rows:1fr; opacity:1; }
html.reduce .step-title{ color:var(--ink); }
html.reduce .jm{ position:relative; opacity:1; transform:none; margin-bottom:14px; }

/* ---------------- light band (offer) ---------------- */
.light-band{ position:relative; z-index:6; background:var(--lt-bg); color:var(--lt-ink); }
.light-band .eyebrow{ color:var(--gold-dk); }
.light-band .lead{ color:var(--lt-muted); }
.light-band h2 em{ color:var(--gold-dk); }
.tier-grid{ display:grid; grid-template-columns:repeat(3,1fr); gap:clamp(16px,2vw,28px); margin-top:clamp(40px,5vw,64px); align-items:stretch; }
/* the drop shells: an outline lands first, then the card drops down inside it */
.tier-shell{ position:relative; border-radius:22px; height:100%; }
.tier-shell::before{ content:""; position:absolute; inset:0; border:1px solid rgba(143,116,64,.42); border-radius:22px;
  opacity:0; transform:scale(.985); transition:opacity .7s var(--ease), transform .7s var(--ease); pointer-events:none; }
.tier-shell.is-outlined::before{ opacity:1; transform:none; }
.tier-shell.is-masking{ overflow:clip; }
.tier-shell .tier{ height:100%; }
.tier{ position:relative; display:flex; flex-direction:column; gap:0; border-radius:22px; padding:clamp(26px,2.6vw,38px);
  background:#fbf8f1; border:1px solid var(--lt-line); transform-style:preserve-3d; will-change:transform;
  transition:box-shadow .55s var(--ease), border-color .55s var(--ease); }
.tier:hover{ box-shadow:0 34px 70px -34px rgba(11,20,46,.35); border-color:rgba(143,116,64,.4); }
.tier.is-lit{ box-shadow:0 34px 70px -34px rgba(11,20,46,.3); border-color:rgba(143,116,64,.45); }
.tier-tag{ font-size:.68rem; letter-spacing:.26em; text-transform:uppercase; color:var(--gold-dk); margin-bottom:14px; display:flex; align-items:center; justify-content:space-between; }
.tier-tag .tt-days{ letter-spacing:.08em; color:var(--lt-muted); text-transform:none; font-size:.74rem; }
.tier h3{ font-size:clamp(1.6rem,2.4vw,2.1rem); color:var(--lt-ink); }
.tier-price{ display:flex; align-items:baseline; gap:8px; margin:18px 0 4px; font-family:var(--display); }
.tier-price .tp-num{ font-size:clamp(2rem,3vw,2.6rem); font-weight:600; color:var(--lt-ink); font-variant-numeric:tabular-nums; }
.tier-price .tp-note{ font-size:.86rem; color:var(--lt-muted); }
.tier-quote{ font-family:var(--serif); font-style:italic; font-size:1.28rem; color:var(--gold-dk); margin:18px 0 4px; }
.tier-desc{ color:var(--lt-muted); font-size:.98rem; margin-top:12px; flex:1; }
.tier-list{ list-style:none; margin:20px 0 26px; padding:0; display:grid; gap:10px; font-size:.94rem; color:var(--lt-ink); }
.tier-list li{ display:flex; gap:10px; align-items:flex-start; }
.tier-list svg{ flex:0 0 auto; margin-top:5px; color:var(--gold-dk); }
.tier .btn{ align-self:flex-start; }
.tier.tier-feature{ background:linear-gradient(170deg,#101a38 0%,#0a1226 100%); border-color:rgba(201,169,106,.35); color:var(--ink); }
.tier.tier-feature h3{ color:var(--ink); }
.tier.tier-feature .tier-desc{ color:var(--muted); }
.tier.tier-feature .tier-list{ color:var(--ink); }
.tier.tier-feature .tier-list svg{ color:var(--gold); }
.tier.tier-feature .tier-quote{ color:var(--gold-hi); }
.tier.tier-feature .tier-tag .tt-days{ color:var(--muted); }
.tier-ribbon{ position:absolute; top:-13px; left:50%; transform:translateX(-50%); background:linear-gradient(120deg,var(--gold-hi),var(--gold)); color:#0a1226;
  font-size:.66rem; font-weight:700; letter-spacing:.2em; text-transform:uppercase; padding:6px 16px; border-radius:30px; white-space:nowrap; }
/* the door to the Apex showcase page */
.tier-showcase{ display:inline-flex; align-items:center; gap:7px; margin-top:14px; align-self:flex-start;
  font-family:var(--display); font-weight:500; font-size:.86rem; letter-spacing:.05em; color:var(--gold-hi);
  border-bottom:1px solid rgba(201,169,106,.35); padding-bottom:2px; transition:color .35s var(--ease), border-color .35s var(--ease); }
.tier-showcase:hover{ color:#fff; border-color:var(--gold-hi); }
.tier-showcase svg{ transition:transform .35s var(--ease); }
.tier-showcase:hover svg{ transform:translate(2px,-2px); }
.care-strip{ margin-top:clamp(40px,5vw,60px); border-radius:22px; border:1px solid var(--lt-line); background:#fbf8f1;
  padding:clamp(26px,3vw,40px); display:grid; grid-template-columns:1.2fr .8fr; gap:clamp(20px,3vw,50px); align-items:center; }
.care-strip h3{ color:var(--lt-ink); font-size:clamp(1.4rem,2.2vw,1.9rem); }
.care-strip p{ color:var(--lt-muted); margin-top:12px; }
.care-points{ list-style:none; margin:0; padding:0; display:grid; gap:12px; color:var(--lt-ink); font-size:.95rem; }
.care-points li{ display:flex; gap:10px; align-items:flex-start; }
.care-points svg{ flex:0 0 auto; margin-top:5px; color:var(--gold-dk); }
.fine{ margin-top:22px; font-size:.8rem; color:var(--lt-muted); max-width:72ch; }

/* ---------------- proof / testimonial ---------------- */
.proof{ background:linear-gradient(180deg,var(--bg-2),var(--bg)); }
.ink-reveal{ font-family:var(--display); font-weight:500; font-size:clamp(1.5rem,3.2vw,2.6rem); line-height:1.3; max-width:26ch; }
.ink-reveal .w{ color:rgba(244,241,232,.16); transition:none; }
html.reduce .ink-reveal .w{ color:var(--ink); }
.proof-attr{ margin-top:30px; display:flex; align-items:center; gap:16px; color:var(--muted); }
.proof-attr .pa-line{ width:44px; height:1px; background:var(--gold); }
.proof-attr b{ color:var(--ink); font-weight:600; }
.assure-grid{ display:grid; grid-template-columns:repeat(3,1fr); gap:clamp(16px,2vw,28px); margin-top:clamp(48px,6vw,80px); }
.assure{ position:relative; padding:28px 26px; border-radius:18px; border:1px solid var(--line-n);
  background:color-mix(in srgb,var(--panel) 55%, transparent); overflow:hidden;
  transition:border-color .5s var(--ease), transform .5s var(--ease), box-shadow .5s var(--ease); }
.assure:hover{ border-color:color-mix(in srgb,var(--gold) 45%, transparent); transform:translateY(-4px); box-shadow:0 26px 60px -30px rgba(0,0,0,.75), 0 0 40px -16px var(--glow); }
.assure .a-num{ font-family:var(--display); font-size:clamp(2rem,3.4vw,3rem); font-weight:600; color:var(--gold-hi); display:flex; align-items:baseline; gap:4px; font-variant-numeric:tabular-nums; }
.assure .a-num small{ font-size:.9rem; color:var(--muted); letter-spacing:.06em; }
.assure h3{ margin-top:10px; font-size:1.15rem; }
.assure p{ margin-top:10px; color:var(--muted); font-size:.94rem; }
.assure .a-rule{ position:absolute; left:0; top:0; height:2px; width:100%;
  background:linear-gradient(90deg,var(--gold),transparent); transform:scaleX(0); transform-origin:0 50%; }

/* ---------------- found (the search proof — your business on top) ---------------- */
.found-grid{ display:grid; grid-template-columns:1fr 1fr; gap:clamp(30px,5vw,80px); align-items:center; }
.serp{ position:relative; max-width:500px; margin-inline:auto; width:100%; margin-bottom:34px; }
.serp-panel{ border-radius:20px; border:1px solid var(--line-n); background:linear-gradient(165deg,var(--panel) 0%,#0a1226 100%);
  padding:clamp(18px,2vw,26px); display:grid; gap:13px; box-shadow:0 40px 80px -40px rgba(0,0,0,.7); }
.serp .b1{ display:block; height:9px; border-radius:5px; background:rgba(244,241,232,.72); }
.serp .b2{ display:block; height:8px; border-radius:4px; background:rgba(167,174,196,.38); }
.serp .b3{ display:block; height:8px; border-radius:4px; background:rgba(167,174,196,.22); }
.serp-bar{ display:flex; align-items:center; gap:12px; border:1px solid rgba(201,169,106,.5); border-radius:999px; padding:12px 18px; }
.serp-bar svg{ width:16px; height:16px; color:var(--gold-hi); flex:0 0 auto; }
.serp-ai{ border:1px solid rgba(201,169,106,.55); background:rgba(201,169,106,.08); border-radius:14px; padding:14px 16px; display:grid; gap:8px; }
.serp-ai-head{ display:flex; align-items:center; gap:8px; font-size:.62rem; letter-spacing:.22em; text-transform:uppercase; color:var(--gold-hi); }
.serp-ai-head svg{ width:13px; height:13px; }
.serp-cite{ display:flex; align-items:center; gap:8px; margin-top:2px; }
.serp .dot{ width:8px; height:8px; border-radius:50%; background:var(--gold); box-shadow:0 0 10px var(--glow); flex:0 0 auto; }
.serp-hit{ border:1px solid rgba(201,169,106,.5); border-radius:14px; padding:14px 16px; display:grid; gap:7px; position:relative; }
.serp-pos{ position:absolute; top:-10px; right:14px; font-family:var(--display); font-weight:600; font-size:.6rem; letter-spacing:.16em;
  text-transform:uppercase; color:#0a1226; background:linear-gradient(120deg,var(--gold-hi),var(--gold)); border-radius:20px; padding:3px 10px; }
.serp-meta{ display:flex; align-items:center; gap:9px; }
.serp-meta .b1, .serp-meta .b2{ flex:1 1 auto; max-width:56%; }
.serp-fav{ width:14px; height:14px; border-radius:4px; background:linear-gradient(140deg,var(--gold-hi),var(--gold-dk)); flex:0 0 auto; }
.serp-row{ border:1px solid var(--line-n); border-radius:14px; padding:12px 16px; display:grid; gap:7px; }
.serp-chat{ position:absolute; right:-10px; bottom:-30px; width:min(62%,290px); border-radius:16px; border:1px solid rgba(201,169,106,.4);
  background:linear-gradient(170deg,#101a38,#0a1226); padding:14px 16px; display:grid; gap:10px; box-shadow:0 30px 60px -24px rgba(0,0,0,.8); }
.serp-chat .sc-q{ justify-self:end; background:rgba(167,174,196,.14); border-radius:12px 12px 3px 12px; padding:9px 11px; width:72%; display:grid; gap:6px; }
.serp-chat .sc-a{ border:1px solid rgba(201,169,106,.35); background:rgba(201,169,106,.07); border-radius:12px 12px 12px 3px; padding:10px 12px; display:grid; gap:6px; }
.serp-chip{ display:inline-flex; align-items:center; gap:6px; margin-top:2px; border:1px solid rgba(201,169,106,.5); border-radius:999px; padding:4px 10px; width:max-content; }
.serp-chip .dot{ width:6px; height:6px; }
/* staged illumination: AI answer, then your result, then the rest */
.serp .serp-it{ opacity:0; transform:translateY(14px); transition:opacity .7s var(--ease) calc(var(--i,0)*.18s), transform .7s var(--ease) calc(var(--i,0)*.18s); }
.serp.is-live .serp-it{ opacity:1; transform:none; }
.serp.is-live .serp-row.serp-it{ opacity:.55; }
html.reduce .serp .serp-it{ opacity:1 !important; transform:none !important; }
html.reduce .serp .serp-row.serp-it{ opacity:.55 !important; }
@media (max-width:860px){ .serp-chat{ right:0; bottom:-24px; } }
.found-list{ list-style:none; margin:34px 0 0; padding:0; display:grid; gap:22px; }
.found-list li{ display:grid; gap:6px; padding-left:26px; position:relative; }
.found-list li::before{ content:""; position:absolute; left:0; top:9px; width:10px; height:10px; border:1.6px solid var(--gold); border-radius:3px; transform:rotate(45deg); }
.found-list b{ font-family:var(--display); font-weight:500; font-size:1.06rem; }
.found-list span{ color:var(--muted); font-size:.95rem; }

/* ---------------- horizontal inclusions ---------------- */
.hwrap{ position:relative; overflow:clip; }
.hcards-head{ display:flex; justify-content:space-between; align-items:flex-end; gap:20px; }
[data-hcards]{ display:flex; gap:26px; will-change:transform; padding:clamp(36px,4vw,54px) 0 8px; }
.hcard{ flex:0 0 clamp(360px,30vw,460px); min-height:clamp(300px,38svh,380px); display:flex; flex-direction:column;
  padding:clamp(30px,2.6vw,40px) clamp(26px,2.2vw,36px); border-radius:22px; border:1px solid var(--line-n);
  background:color-mix(in srgb,var(--panel) 55%, transparent);
  transition:transform .5s var(--ease), border-color .5s var(--ease), box-shadow .5s var(--ease); }
.hcard .hc-ico{ display:grid; place-items:center; width:58px; height:58px; border-radius:16px; border:1px solid var(--line-n); color:var(--muted);
  transition:transform .5s var(--ease), color .5s var(--ease), border-color .5s var(--ease), filter .5s var(--ease); }
.hcard .hc-ico svg{ width:27px; height:27px; }
.hcard h3{ margin-top:auto; padding-top:26px; font-size:clamp(1.2rem,1.6vw,1.45rem); }
.hcard p{ margin-top:12px; color:var(--muted); font-size:1rem; max-width:34ch; }
.hcard.is-lit{ transform:translateY(-6px); border-color:color-mix(in srgb,var(--gold) 55%, transparent);
  box-shadow:0 30px 60px -30px rgba(0,0,0,.8), 0 0 46px -12px var(--glow); }
.hcard.is-lit .hc-ico{ color:var(--gold-hi); border-color:color-mix(in srgb,var(--gold) 55%, transparent); transform:scale(1.1); filter:drop-shadow(0 0 12px var(--glow)); }
.hcard.is-lit h3{ color:var(--gold-hi); }
html.reduce [data-hcards]{ flex-wrap:wrap; transform:none !important; }
html.reduce .hcards-section{ min-height:auto !important; }

/* ---------------- overlapping deck (every build ships finished) ---------------- */
.deck-section{ position:relative; background:var(--bg); }
/* pinned: top padding only clears the floating header, so the heading
   sits just under it while the deck plays */
.deck-inner{ position:relative; padding:clamp(88px,11svh,118px) 0 clamp(36px,5svh,56px); }
.deck{ position:relative; height:clamp(460px,60svh,660px); margin-top:clamp(24px,3vw,40px); }
.deck-card{ position:absolute; inset:0; display:grid; grid-template-columns:1fr .92fr; gap:clamp(24px,3vw,54px);
  border-radius:26px; border:1px solid var(--line-n); overflow:hidden;
  background:linear-gradient(170deg,#101a38 0%,var(--bg-2) 100%);
  padding:clamp(26px,3vw,48px); will-change:transform; box-shadow:0 40px 90px -40px rgba(0,0,0,.85); }
.dc-body{ display:flex; flex-direction:column; min-width:0; }
.dc-items{ margin-top:auto; display:grid; gap:clamp(14px,1.8vw,22px); }
.sl-tag{ font-family:var(--display); font-weight:600; font-size:clamp(1.5rem,2.8vw,2.3rem); color:var(--ink); margin:0 0 clamp(20px,2.6vw,34px); }
/* three per card: icon-left rows keep all three inside the card */
.sl-item{ display:grid; grid-template-columns:48px 1fr; column-gap:16px; align-items:start; }
.sl-item .hc-ico{ grid-row:1 / span 2; display:grid; place-items:center; width:48px; height:48px; border-radius:13px; border:1px solid var(--line-n); color:var(--gold); }
.sl-item .hc-ico svg{ width:22px; height:22px; }
.sl-item h3{ margin-top:2px; font-size:clamp(1.02rem,1.4vw,1.22rem); }
.sl-item p{ grid-column:2; margin-top:5px; color:var(--muted); font-size:.94rem; max-width:44ch; }
.dc-media{ margin:0; border-radius:18px; overflow:hidden; border:1px solid var(--line-n);
  background:linear-gradient(165deg,var(--panel) 0%,#0a1226 100%); padding:clamp(14px,1.6vw,24px); }
.dc-media svg{ width:100%; height:100%; }
.dc-dim{ position:absolute; inset:0; border-radius:26px; background:#050a16; opacity:0; pointer-events:none; }
.slide-bar{ position:absolute; bottom:5svh; left:50%; transform:translateX(-50%); width:min(440px,64vw); height:3px;
  border-radius:3px; background:var(--line-n); overflow:hidden; }
.slide-fill{ display:block; height:100%; width:100%; transform:scaleX(0); transform-origin:0 50%;
  background:linear-gradient(90deg,var(--gold-dk),var(--gold-hi)); }
@media (max-width:860px){
  .deck-inner{ padding:clamp(70px,10vw,110px) 0; } /* unpinned: normal section rhythm */
  .deck{ height:auto; display:grid; gap:18px; }
  .deck-card{ position:relative; inset:auto; width:100% !important; transform:none !important; grid-template-columns:1fr; }
  .dc-media{ order:2; aspect-ratio:16/10; }
  .dc-body{ order:1; }
  .dc-dim{ display:none; }
  .slide-bar{ display:none; }
}
html.reduce .deck{ height:auto; display:grid; gap:18px; }
html.reduce .deck-card{ position:relative; inset:auto; width:100% !important; transform:none !important; }
html.reduce .dc-dim, html.reduce .slide-bar{ display:none; }

/* ---------------- FAQ accordions ---------------- */
.faq-list{ margin-top:clamp(30px,4vw,50px); border-top:1px solid var(--line-n); }
.faq-item{ border-bottom:1px solid var(--line-n); }
.faq-q{ display:flex; width:100%; align-items:center; justify-content:space-between; gap:18px; text-align:left;
  padding:22px 0; font-family:var(--display); font-weight:500; font-size:clamp(1.05rem,1.7vw,1.3rem); color:var(--ink);
  transition:color .35s var(--ease); }
.faq-q:hover{ color:var(--gold-hi); }
.faq-q .fq-ico{ flex:0 0 auto; position:relative; width:16px; height:16px; }
.faq-q .fq-ico::before,.faq-q .fq-ico::after{ content:""; position:absolute; background:var(--gold); border-radius:1px; transition:transform .45s var(--ease); }
.faq-q .fq-ico::before{ left:0; top:7px; width:16px; height:2px; }
.faq-q .fq-ico::after{ left:7px; top:0; width:2px; height:16px; }
.faq-item.open .fq-ico::after{ transform:scaleY(0); }
.faq-a{ height:0; overflow:hidden; }
.faq-a-inner{ padding:0 0 24px; color:var(--muted); max-width:68ch; }
.faq-a-inner a{ color:var(--gold-hi); border-bottom:1px solid rgba(201,169,106,.4); }
html.reduce .faq-a{ height:auto !important; }
.light-band .faq-list{ border-top-color:var(--lt-line); }
.light-band .faq-item{ border-bottom-color:var(--lt-line); }
.light-band .faq-q{ color:var(--lt-ink); } .light-band .faq-q:hover{ color:var(--gold-dk); }
.light-band .faq-a-inner{ color:var(--lt-muted); }

/* ---------------- final CTA ---------------- */
.finale{ position:relative; min-height:92svh; display:grid; place-items:center; text-align:center; overflow:clip;
  background:radial-gradient(90% 70% at 50% 100%, #101a38 0%, var(--bg) 62%); }
.finale-canvas{ position:absolute; inset:0; width:100%; height:100%; pointer-events:none; }
.finale-inner{ position:relative; z-index:2; padding:100px 0; }
.finale h2{ font-size:clamp(2.4rem,6vw,5rem); max-width:16ch; margin-inline:auto; }
.finale .lead{ margin:24px auto 0; }
.finale .hero-ctas{ justify-content:center; }

/* ---------------- footer ---------------- */
.footer{ position:relative; border-top:1px solid var(--line-n); background:#04070f; overflow:clip; }
.footer-top{ display:grid; grid-template-columns:1.2fr 1fr 1fr; gap:clamp(26px,4vw,70px); padding:clamp(50px,6vw,80px) 0 40px; }
.footer h4{ font-size:.72rem; letter-spacing:.26em; text-transform:uppercase; color:var(--muted-2); font-family:var(--body); font-weight:500; margin-bottom:18px; }
.footer-links{ list-style:none; margin:0; padding:0; display:grid; gap:10px; }
.footer-links a{ position:relative; color:var(--muted); transition:color .3s var(--ease); width:fit-content; }
.footer-links a::after{ content:""; position:absolute; left:0; bottom:-2px; height:1px; width:100%;
  background:var(--gold); transform:scaleX(0); transform-origin:0 50%; transition:transform .45s var(--ease); }
.footer-links a:hover{ color:var(--gold-hi); } .footer-links a:hover::after{ transform:scaleX(1); }
.footer-brand p{ color:var(--muted-2); font-size:.92rem; max-width:34ch; margin-top:16px; }
.footer-word{ position:relative; padding:clamp(20px,3vw,40px) 0 0; line-height:1; text-align:center; user-select:none; }
/* sized to always fit the container with margin — never reach the footer's clip edge,
   even if Clash Display falls back to a wider font (postmortem: silent metric overflow) */
.footer-word span{ display:block; font-family:var(--display); font-weight:600; letter-spacing:-.01em;
  font-size:clamp(2rem,8.4vw,8rem); white-space:nowrap; }
.footer-word .fw-base{ color:#101a33; }
.footer-word .fw-fill{ position:absolute; inset:clamp(20px,3vw,40px) 0 0 0; color:var(--gold); clip-path:inset(0 100% 0 0); }
html.reduce .footer-word .fw-fill{ clip-path:inset(0 0 0 0); }
.footer-bottom{ display:flex; flex-wrap:wrap; gap:14px; justify-content:space-between; align-items:center;
  padding:22px 0 max(26px, env(safe-area-inset-bottom)); border-top:1px solid var(--line-n); color:var(--muted-2); font-size:.82rem; }
.footer-bottom a{ color:var(--muted); } .footer-bottom a:hover{ color:var(--gold-hi); }
.footer-legal{ display:flex; flex-wrap:wrap; gap:18px; align-items:center; }
.cc-settings{ font:inherit; color:var(--muted); background:none; border:0; padding:0; cursor:pointer; transition:color .3s ease; }
.cc-settings:hover{ color:var(--gold-hi); }

/* ---------------- modal (book a call) ---------------- */
.modal{ position:fixed; inset:0; z-index:200; display:grid; place-items:center; padding:20px;
  visibility:hidden; opacity:0; transition:opacity .45s var(--ease), visibility .45s; overscroll-behavior:contain; }
.modal.open{ visibility:visible; opacity:1; }
.modal-back{ position:absolute; inset:0; background:rgba(3,6,14,.78); backdrop-filter:blur(8px); }
.modal-card{ position:relative; width:min(920px,100%); max-height:min(86svh,780px); overflow:auto; border-radius:24px;
  background:linear-gradient(170deg,#101a38,#0a1226); border:1px solid rgba(201,169,106,.3);
  box-shadow:0 60px 120px -40px rgba(0,0,0,.8); padding:clamp(24px,3.4vw,44px);
  transform:translateY(26px) scale(.97); transition:transform .5s var(--ease); overscroll-behavior:contain; }
.modal.open .modal-card{ transform:translateY(0) scale(1); }
.modal-close{ position:absolute; top:16px; right:16px; width:44px; height:44px; border-radius:50%; border:1px solid var(--line-n);
  display:grid; place-items:center; color:var(--muted); transition:color .3s, border-color .3s, transform .4s var(--ease); }
.modal-close:hover{ color:var(--ink); border-color:var(--gold); transform:rotate(90deg); }
.modal-head h2{ font-size:clamp(1.5rem,2.6vw,2.1rem); max-width:18ch; }
.modal-head p{ color:var(--muted); margin-top:10px; max-width:52ch; }
.calendly-shell{ margin-top:26px; border-radius:16px; border:1px dashed rgba(201,169,106,.4); min-height:420px;
  display:grid; place-items:center; text-align:center; padding:30px; color:var(--muted); background:rgba(5,10,22,.5); }
.calendly-shell b{ color:var(--gold-hi); font-family:var(--display); font-weight:500; letter-spacing:.04em; }
.calendly-shell code{ display:inline-block; margin-top:10px; font-size:.8rem; color:var(--muted-2); word-break:break-all; }

/* booking confirmation screen (swapped in on calendly.event_scheduled) */
.book-success{ display:grid; place-items:center; text-align:center; gap:16px; padding:clamp(18px,4vw,44px) clamp(8px,2vw,24px); }
.book-success h2{ font-size:clamp(1.7rem,3.4vw,2.5rem); }
.book-success p{ color:var(--muted); max-width:46ch; font-size:1.02rem; }
.book-success .bs-sub{ color:var(--gold-hi); font-family:var(--serif); font-style:italic; font-size:1.2rem; margin-top:-4px; }
.book-success .btn{ margin-top:12px; }
.bs-check{ width:86px; height:86px; margin-bottom:4px; }
.bs-check svg{ width:100%; height:100%; overflow:visible; }
.bs-check circle{ fill:none; stroke:var(--gold); stroke-width:2.4;
  stroke-dasharray:151; stroke-dashoffset:151; animation:bsCircle .7s var(--ease-out) forwards; }
.bs-check path{ fill:none; stroke:var(--gold-hi); stroke-width:3.6; stroke-linecap:round; stroke-linejoin:round;
  stroke-dasharray:40; stroke-dashoffset:40; animation:bsCheck .45s var(--ease-out) .55s forwards;
  filter:drop-shadow(0 0 8px var(--glow)); }
@keyframes bsCircle{ to{ stroke-dashoffset:0; } }
@keyframes bsCheck{ to{ stroke-dashoffset:0; } }
html.reduce .bs-check circle, html.reduce .bs-check path{ animation:none; stroke-dashoffset:0; }

/* ---------------- forms ---------------- */
.form-grid{ display:grid; grid-template-columns:1fr 1fr; gap:18px; margin-top:34px; }
.form-grid .ff-full{ grid-column:1/-1; }
.field{ position:relative; }
.field input,.field textarea{ width:100%; background:color-mix(in srgb,var(--panel) 55%, transparent);
  border:1px solid var(--line-n); border-radius:14px; color:var(--ink); font:inherit; padding:11px 16px; min-height:52px;
  transition:border-color .35s var(--ease), box-shadow .35s var(--ease), background .35s var(--ease); }
.field label{ display:block; margin: 0 0 8px 2px; font-size:.8rem; letter-spacing:.1em; text-transform:uppercase; color:var(--muted-2); }
.field textarea{ min-height:130px; resize:vertical; }
.field input:focus,.field textarea:focus{ outline:none; border-color:var(--gold); box-shadow:0 0 0 3px rgba(201,169,106,.16); background:rgba(5,10,22,.7); }
.field .f-err{ display:none; margin-top:6px; font-size:.8rem; color:#e58f8f; }
.field.invalid input,.field.invalid textarea{ border-color:#b25b5b; }
.field.invalid .f-err{ display:block; }
.form-note{ margin-top:14px; color:var(--muted-2); font-size:.82rem; }
.form-status{ margin-top:16px; font-size:.95rem; color:var(--gold-hi); min-height:1.4em; }

/* ---------------- interior page shared ---------------- */
.page-hero{ position:relative; padding:clamp(122px,14vh,140px) 0 clamp(56px,8vw,96px); overflow:clip; }
.page-hero h1{ font-size:clamp(2.5rem,6vw,4.8rem); max-width:16ch; }
.page-hero .lead{ margin-top:24px; }
.page-hero .hero-canvas{ opacity:.55; }
.crumbs{ display:flex; gap:10px; align-items:center; font-size:.78rem; letter-spacing:.14em; text-transform:uppercase; color:var(--muted-2); margin-bottom:26px; }
.crumbs a:hover{ color:var(--gold-hi); }
.crumbs svg{ opacity:.5; }
.split-2{ display:grid; grid-template-columns:1fr 1fr; gap:clamp(30px,5vw,80px); align-items:center; }
.prose{ color:var(--muted); max-width:70ch; display:grid; gap:1.1em; }
.prose h2{ color:var(--ink); font-size:clamp(1.5rem,2.6vw,2.1rem); margin-top:1.2em; }
.prose h3{ color:var(--ink); font-size:1.15rem; margin-top:.8em; }
.prose ul{ margin:0; padding-left:20px; display:grid; gap:.5em; }
.prose a{ color:var(--gold-hi); border-bottom:1px solid rgba(201,169,106,.4); }
.prose strong{ color:var(--ink); }
.updated{ font-size:.82rem; color:var(--muted-2); letter-spacing:.08em; }

/* stats row */
.stats-row{ display:grid; grid-template-columns:repeat(3,1fr); gap:clamp(16px,2vw,28px); margin-top:clamp(40px,5vw,60px); }
.stat-card{ padding:26px; border-radius:18px; border:1px solid var(--line-n); background:color-mix(in srgb,var(--panel) 55%, transparent); }
.stat-card .sc-num{ font-family:var(--display); font-weight:600; font-size:clamp(2.2rem,4vw,3.2rem); color:var(--gold-hi); font-variant-numeric:tabular-nums; }
.stat-card p{ margin-top:8px; color:var(--muted); font-size:.92rem; }

/* 404 */
.err-hero{ min-height:100svh; display:grid; place-items:center; text-align:center; position:relative; overflow:clip; }
.err-hero p.err-code{ font-family:var(--display); font-weight:600; font-size:clamp(6rem,22vw,15rem); line-height:1; color:var(--gold); margin:0; }
.err-hero p{ color:var(--muted); margin:18px auto 34px; max-width:44ch; }

/* ---------------- reduced-motion global ---------------- */
html.reduce *,html.reduce *::before,html.reduce *::after{ transition-duration:.01ms !important; animation-duration:.01ms !important; animation-iteration-count:1 !important; }
html.reduce .btn::after{ display:none; }
html.reduce .hero-canvas,html.reduce .finale-canvas{ opacity:.25; }

/* ---------------- responsive ---------------- */
@media (max-width:1020px){
  .steps-grid{ grid-template-columns:1fr; }
  [data-step-media]{ aspect-ratio:16/10; max-height:44svh; }
  .found-grid,.split-2{ grid-template-columns:1fr; }
  .split-2 .sp-media{ order:2; } .split-2 .sp-body{ order:1; }
  .footer-top{ grid-template-columns:1fr 1fr; }
  .menu-grid{ grid-template-columns:1fr; }
  .menu-side{ border-left:0; padding-left:0; border-top:1px solid var(--line-n); padding-top:24px; }
}
@media (max-width:860px){
  .tier-grid,.assure-grid,.stats-row{ grid-template-columns:1fr; }
  .tier.tier-feature, .tier-shell.ts-feature{ order:-1; }
  .care-strip{ grid-template-columns:1fr; }
  .form-grid{ grid-template-columns:1fr; }
  .brand-name{ display:none; }
  [data-steps-pin]{ min-height:auto; padding:70px 0; }
  /* mobile: the step illustration STICKS to the top and swaps per step
     (it used to sit stranded below all the steps, so the first ones showed nothing) */
  .steps-grid{ display:flex; flex-direction:column; align-items:stretch; gap:22px; }
  [data-step-media]{ order:-1; position:sticky; top:70px; z-index:2;
    width:100%; max-width:440px; margin-inline:auto; aspect-ratio:16/10; max-height:32svh;
    background:var(--bg); border-radius:14px; }
  [data-hcards]{ overflow-x:auto; scroll-snap-type:x proximity; -webkit-overflow-scrolling:touch; scrollbar-width:none; padding-inline:var(--gut); margin-inline:calc(var(--gut)*-1); }
  [data-hcards]::-webkit-scrollbar{ display:none; }
  .hcard{ flex-basis:82vw; min-height:300px; scroll-snap-align:center; }
  .hcards-section{ min-height:auto !important; }
  .footer-top{ grid-template-columns:1fr; }
  .hero-foot .hf-right{ display:none; }
  .menu-btn .mb-label{ display:none; }
}

/* ---------------- tier ladder: three unmistakable rising steps ---------------- */
.tier-step{ display:inline-flex; align-items:baseline; gap:6px; align-self:flex-start;
  font-size:.64rem; letter-spacing:.24em; text-transform:uppercase; color:var(--gold-dk);
  border:1px solid rgba(143,116,64,.38); border-radius:999px; padding:6px 13px; margin-bottom:14px; }
.tier-step b{ font-family:var(--display); font-size:.82rem; letter-spacing:.04em; }
.tier-feature .tier-step{ color:var(--gold); border-color:rgba(201,169,106,.45); }
/* mountain arrangement: Ascend left (lowest), Apex CENTER (the peak), Elevate right (mid-climb) */
.tier-ribbon.tr-quiet{ background:#fdfcf9; color:var(--lt-ink); border:1px solid rgba(143,116,64,.5); }
/* the "Tier N of 3" row reads clearly, especially on the dark featured card */
.tier-tag{ font-size:.74rem; }
.tier-feature .tier-tag{ color:var(--gold-hi,#e6b877); }
/* services: the tiers are the main event, so they sit close under the title bar (council: ~72px) */
.section-tight{ padding-top:clamp(56px,6vw,76px); }
/* showcase links on light cards (base style was tuned for the dark feature card) */
.tier:not(.tier-feature) .tier-showcase{ color:var(--gold-dk); border-color:rgba(143,116,64,.45); }
.tier:not(.tier-feature) .tier-showcase:hover{ color:var(--lt-ink); border-color:var(--gold-dk); }
@media (min-width:861px){
  .tier-ladder{ align-items:start; padding-bottom:96px; }
  /* cards start LEVEL; the mountain forms on scroll (tier-ladder scrub in main.js: Apex holds, Elevate settles at 44, Ascend sinks to 84) */
}

/* tier hero: full-viewport composition, scroll cue anchoring the base */
.tier-herofoot{ display:flex; justify-content:center; padding-top:18px; }
.tier-herofoot .scroll-cue > span:first-child{ font-size:.72rem; letter-spacing:.26em; text-transform:uppercase; color:var(--muted); }

/* rise-over: pinned "moment" sections hold still while the next section climbs over them.
   Every section is positioned so paint order follows DOM order; without this, sticky
   (positioned) sections paint ABOVE the static sections climbing over them. */
.rise > section{ position:relative; }
@media (min-width:861px){
  .rise .pinback{ position:sticky; top:0; }
  .rise .pinback + section{ border-radius:clamp(18px,2vw,28px) clamp(18px,2vw,28px) 0 0;
    box-shadow:0 -34px 90px rgba(2,6,16,.45); }
}
.rise > .finale{ background:var(--bg); }

/* skip link: invisible until keyboard-focused */
.skip-link{ position:fixed; top:14px; left:14px; z-index:2000; background:var(--gold); color:#0a1226;
  padding:13px 18px; border-radius:10px; font-weight:600; text-decoration:none;
  transform:translateY(-300%); transition:transform .3s ease; }
.skip-link:focus, .skip-link:focus-visible{ transform:none; }

/* ---------------- cookie consent banner (white card, gold accept) ---------------- */
.cookie-banner{ position:fixed; left:clamp(16px,3vw,28px); bottom:clamp(16px,3vw,28px); z-index:200;
  width:min(410px, calc(100vw - 32px));
  background:#fff; border:1px solid rgba(11,20,46,.12); border-radius:16px;
  padding:18px 20px 16px; box-shadow:0 24px 60px rgba(10,15,30,.3);
  transform:translateY(18px); opacity:0; transition:transform .45s var(--ease-out), opacity .45s ease; }
.cookie-banner.cc-in{ transform:translateY(0); opacity:1; }
.cc-text{ margin:0 0 14px; color:var(--lt-muted); font-size:.9rem; line-height:1.55; }
.cc-actions{ display:flex; gap:8px; justify-content:flex-end; align-items:center; flex-wrap:wrap; }
.cc-actions button{ font-family:var(--display); font-weight:500; font-size:.86rem; letter-spacing:.01em;
  min-height:44px; padding:10px 16px; border-radius:999px; cursor:pointer; transition:all .25s ease; }
.cc-deny{ background:transparent; border:0; color:var(--lt-muted); padding-inline:10px; }
.cc-deny:hover{ color:var(--lt-ink); }
.cc-some{ background:transparent; border:1px solid rgba(11,20,46,.22); color:var(--lt-ink); }
.cc-some:hover{ border-color:var(--gold-dk); color:var(--gold-dk); }
.cc-accept{ background:linear-gradient(160deg,var(--gold-hi),var(--gold) 55%,var(--gold-dk)); color:#0a1226; border:0; font-weight:600; }
.cc-accept:hover{ transform:translateY(-2px); box-shadow:0 10px 24px rgba(201,169,106,.45); }
@media (max-width:520px){ .cookie-banner{ left:12px; right:12px; bottom:12px; width:auto; } }