/* =============================================================================
   Apollo · myapollo.ca landing — static redesign
   Zero framework. Semantic HTML + modern CSS (Grid, Flexbox, container queries,
   custom properties, clamp). Dark-default, light via [data-theme="light"].
   ============================================================================= */

/* ── Tokens ──────────────────────────────────────────────────────────────── */
:root {
  --bg:#0c0a07; --surface:#15110b; --surface-2:#1d1810;
  --ink:#f5f0e6; --ink-dim:rgba(245,240,230,.66); --ink-faint:rgba(245,240,230,.56);
  --line:rgba(245,240,230,.08); --line-2:rgba(245,240,230,.14);
  --gold:#d4af37; --gold-light:#ecd07e; --gold-soft:rgba(212,175,55,.12); --gold-glow:rgba(212,175,55,.34);
  --rose:#b85c5c; --cream:#f0ebe3;
  --green:#7fb069; --green-soft:#9ec48a; --plot:#ff7ec0; --orph:#8b7fff;

  --font-display:"Playfair Display",Georgia,"Times New Roman",serif;
  --font-body:"DM Sans",-apple-system,BlinkMacSystemFont,"Segoe UI",system-ui,sans-serif;
  --font-mono:ui-monospace,"SF Mono",Menlo,Consolas,monospace;

  --max:1240px;
  --edge:clamp(20px,5vw,64px);
  --pad:clamp(72px,10vw,148px);
  --ease:cubic-bezier(.2,.9,.2,1);
  --ease-spring:cubic-bezier(.34,1.56,.64,1);
  --r-md:18px; --r-lg:24px; --r-xl:32px; --r-pill:999px;
  --nav-h:60px;
  --focus:0 0 0 2px var(--bg),0 0 0 4px var(--gold);
}
[data-theme="light"]{
  --bg:#f9f5ec; --surface:#f3eedf; --surface-2:#ebe4d2;
  --ink:#1a1814; --ink-dim:#54504a; --ink-faint:#6a655e;
  --line:rgba(26,24,20,.1); --line-2:rgba(26,24,20,.2);
  --gold-soft:rgba(212,175,55,.16);
  --green-soft:#5f8a44; /* darker green reads on cream (light green washed out) */
}

/* ── Reset / base ────────────────────────────────────────────────────────── */
*,*::before,*::after{box-sizing:border-box}
html{ -webkit-text-size-adjust:100%; scroll-behavior:smooth; }
body{
  margin:0; background:var(--bg); color:var(--ink);
  font-family:var(--font-body); font-size:16px; line-height:1.5;
  -webkit-font-smoothing:antialiased; text-rendering:optimizeLegibility;
  overflow-x:clip;
}
img,svg{display:block; max-width:100%}
a{color:inherit}
h1,h2,h3,h4,p,figure,blockquote,ul{margin:0}
ul{list-style:none; padding:0}
button{font:inherit; color:inherit; cursor:pointer}
:focus-visible{outline:none; box-shadow:var(--focus); border-radius:6px}
@media (prefers-reduced-motion:reduce){ html{scroll-behavior:auto} }

.ap-icon{width:1em; height:1em; fill:none; stroke:currentColor; stroke-width:2;
  stroke-linecap:round; stroke-linejoin:round; flex:none}
.ap-icon--solid{fill:currentColor; stroke:none}
.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}

/* ── Ambient background (Greek letters · grid · gutters) ─────────────────── */
.bg{position:fixed; inset:0; z-index:-4; pointer-events:none;
  background:
    radial-gradient(ellipse at 15% 45%,rgba(212,175,55,.06),transparent 55%),
    radial-gradient(ellipse at 85% 12%,rgba(184,92,92,.05),transparent 50%),
    radial-gradient(ellipse at 50% 92%,rgba(212,175,55,.035),transparent 42%),
    var(--bg);}
.bg-grid{position:fixed; inset:0; z-index:-2; pointer-events:none;
  background-image:
    linear-gradient(rgba(212,175,55,.022) 1px,transparent 1px),
    linear-gradient(90deg,rgba(212,175,55,.022) 1px,transparent 1px);
  background-size:72px 72px;
  -webkit-mask-image:radial-gradient(ellipse at 50% 30%,#000,transparent 85%);
          mask-image:radial-gradient(ellipse at 50% 30%,#000,transparent 85%);}
[data-theme="light"] .bg-grid{background-image:
  linear-gradient(rgba(0,0,0,.025) 1px,transparent 1px),
  linear-gradient(90deg,rgba(0,0,0,.025) 1px,transparent 1px)}
.gk{position:fixed; z-index:-3; font-family:var(--font-display); color:var(--gold);
  opacity:.04; font-weight:300; line-height:1; user-select:none; pointer-events:none}
.gk-1{font-size:32vw; top:-10%; right:-6%; transform:rotate(-12deg)}
.gk-2{font-size:20vw; bottom:-5%; left:-4%; transform:rotate(8deg)}
.gk-3{font-size:14vw; top:34%; left:46%; opacity:.025; transform:rotate(-6deg)}
[data-theme="light"] .gk{color:#1a1814; opacity:.05}

/* ── Layout primitives ───────────────────────────────────────────────────── */
.wrap{max-width:var(--max); margin-inline:auto; padding-inline:var(--edge)}
.section{padding-block:var(--pad); position:relative}
.section--tight{padding-block:clamp(56px,7vw,96px)}
.main{position:relative; z-index:1}

.eyebrow{font-size:.76rem; font-weight:700; letter-spacing:.18em;
  text-transform:uppercase; color:var(--gold); margin:0 0 22px}
.headline{font-family:var(--font-display); font-weight:600;
  font-size:clamp(2.3rem,5.4vw,4.6rem); line-height:1; letter-spacing:-.035em;
  color:var(--ink); max-width:20ch}
.headline em{font-style:italic; font-weight:400; color:var(--gold)}
.headline .grey{color:var(--ink-dim)}
.lead{font-family:var(--font-display); font-size:clamp(1.1rem,1.7vw,1.45rem);
  line-height:1.45; color:var(--ink-dim); max-width:56ch; margin-top:26px}

/* ── Buttons ─────────────────────────────────────────────────────────────── */
.btn{display:inline-flex; align-items:center; justify-content:center; gap:9px;
  padding:14px 26px; min-height:48px; font:600 .95rem/1 var(--font-body);
  letter-spacing:.01em; border-radius:var(--r-pill); border:1px solid var(--gold);
  background:var(--gold); color:#0d0c0a; text-decoration:none;
  transition:transform .22s var(--ease),box-shadow .22s var(--ease),background .22s var(--ease)}
.btn:hover{transform:translateY(-2px); background:var(--gold-light);
  box-shadow:0 12px 32px rgba(212,175,55,.28)}
.btn--ghost{background:transparent; color:var(--ink); border-color:var(--line-2)}
.btn--ghost:hover{background:var(--gold-soft); border-color:var(--gold); box-shadow:none}
.btn--lg{padding:17px 30px; min-height:54px; font-size:1rem}
.btn .ap-icon{font-size:.95em}

/* Header/nav + footer now render via the shared components
   (shared/site-nav.js + shared/site-footer.js) — their bespoke CSS was removed. */

/* ── Reveal-on-scroll (progressive; only active when .js present) ─────────── */
.js .reveal{opacity:0; transform:translateY(18px);
  transition:opacity .7s var(--ease),transform .7s var(--ease)}
.js .reveal.in{opacity:1; transform:none}
@media (prefers-reduced-motion:reduce){
  .js .reveal{opacity:1 !important; transform:none !important; transition:none}
}

/* ── HERO ────────────────────────────────────────────────────────────────── */
.hero{padding-block:clamp(28px,5vw,72px) clamp(48px,8vw,104px)}
.hero__grid{display:grid; grid-template-columns:1.05fr .95fr;
  gap:clamp(28px,5vw,72px); align-items:center}
.ribbon{display:inline-flex; align-items:center; gap:9px; padding:7px 15px 7px 12px;
  border:1px solid var(--line-2); border-radius:var(--r-pill);
  background:rgba(127,176,105,.07); color:var(--green-soft);
  font-size:.72rem; font-weight:700; letter-spacing:.05em}
.ribbon .ap-icon{color:var(--gold); font-size:.9rem}
.hero__title{font-family:var(--font-display); font-weight:600;
  font-size:clamp(3rem,8.4vw,6.6rem); line-height:.94; letter-spacing:-.045em;
  color:var(--ink); margin:22px 0 0}
.hero__title em{font-style:italic; font-weight:400; color:var(--gold)}
.hero__sub{font-family:var(--font-display); font-size:clamp(1.12rem,1.8vw,1.5rem);
  line-height:1.45; color:var(--ink-dim); margin:24px 0 0; max-width:40ch}
.hero__ctas{display:flex; gap:12px; flex-wrap:wrap; margin-top:32px}
.hero__trust{display:flex; flex-wrap:wrap; gap:10px 22px; align-items:center;
  margin-top:30px; padding-top:26px; border-top:1px solid var(--line)}
.trust__item{display:inline-flex; align-items:center; gap:8px; font-size:.85rem;
  font-weight:600; color:var(--ink-dim)}
.trust__item .ap-icon{color:var(--gold); font-size:1rem}
.trust__item b{color:var(--ink); font-weight:700; font-variant-numeric:tabular-nums}

/* Hero founder card */
.fcard{position:relative; aspect-ratio:3/4; border-radius:var(--r-xl);
  overflow:hidden; border:1px solid var(--line);
  background:linear-gradient(165deg,rgba(212,175,55,.12),rgba(13,12,10,.95) 60%);
  box-shadow:0 30px 80px rgba(0,0,0,.55),0 0 50px rgba(212,175,55,.04); will-change:transform}
.fcard img{width:100%; height:100%; object-fit:cover; object-position:center top; opacity:.9}
.fcard__scrim{position:absolute; inset:0; pointer-events:none;
  background:linear-gradient(0deg,rgba(13,12,10,.94),rgba(13,12,10,.35) 42%,transparent 72%)}
.fcard__rating{position:absolute; top:16px; left:16px; display:inline-flex;
  align-items:center; gap:6px; padding:6px 12px; border-radius:var(--r-pill);
  background:rgba(13,12,10,.7); -webkit-backdrop-filter:blur(10px); backdrop-filter:blur(10px);
  border:1px solid rgba(212,175,55,.22); color:var(--gold); font-weight:700; font-size:.8rem}
.fcard__rating .ap-icon{color:var(--gold); font-size:.85rem}
.fcard__meta{position:absolute; inset:auto 0 0 0; padding:26px; z-index:2}
.fcard__name{font-family:var(--font-display); font-weight:600;
  font-size:clamp(1.6rem,2.4vw,2.1rem); letter-spacing:-.025em; color:var(--cream)}
.fcard__role{font-size:.74rem; font-weight:700; letter-spacing:.14em;
  text-transform:uppercase; color:var(--gold); margin:4px 0 12px}
.fcard__tags{display:flex; flex-wrap:wrap; gap:6px}
.tag{display:inline-flex; align-items:center; gap:6px; padding:5px 11px;
  font-size:.7rem; font-weight:600; border-radius:var(--r-pill);
  background:rgba(245,240,230,.06); border:1px solid var(--line); color:var(--cream)}
.tag .ap-icon{color:var(--gold); font-size:.72rem}

/* ── Scene backdrops ─────────────────────────────────────────────────────── */
/* Scenes sit on a permanently-dark image scrim, so they must render with the
   DARK token set in BOTH themes — otherwise light mode flips text to near-black
   on a dark image (unreadable). Redefining the tokens here cascades to every
   descendant (headlines, leads, stat labels, cards, chips, borders) at once. */
.scene{position:relative; isolation:isolate;
  --ink:#f5f0e6; --ink-dim:rgba(245,240,230,.74); --ink-faint:rgba(245,240,230,.58);
  --surface:#16130d; --surface-2:#1f1b14;
  --line:rgba(245,240,230,.1); --line-2:rgba(245,240,230,.18); --gold-soft:rgba(212,175,55,.16);
  --green-soft:#9ec48a; /* keep light green on the dark scene scrim */
  border-block:1px solid color-mix(in srgb,var(--gold) 16%,transparent)}
.scene>*{position:relative; z-index:1}
.scene::before{content:""; position:absolute; inset:0; z-index:0; pointer-events:none;
  background:var(--scrim,linear-gradient(rgba(12,11,9,.84),rgba(12,11,9,.84))),
            var(--img,none) center/cover no-repeat}
.scene--flip::before{transform:scaleX(-1)}
@media (max-width:760px){
  .scene::before{background:
    linear-gradient(to bottom,rgba(12,11,9,.58),rgba(12,11,9,.88) 40%,rgba(12,11,9,.97) 64%),
    var(--img,none) top center/100% auto no-repeat}
  .scene--flip::before{transform:none}
}

/* ── PROOF (stats) ───────────────────────────────────────────────────────── */
.proof__grid{display:grid; grid-template-columns:.92fr 1.08fr;
  gap:clamp(36px,6vw,88px); align-items:start}
.proof__sticky{position:sticky; top:calc(var(--nav-h) + 6vh); align-self:start}
.proof__rail{display:flex; flex-direction:column; gap:clamp(40px,6vw,80px)}
.stat{border-top:1px solid var(--line); padding-top:clamp(18px,3vw,32px)}
.stat__num{font-family:var(--font-display); font-weight:700;
  font-size:clamp(3.6rem,9vw,7rem); line-height:.9; letter-spacing:-.05em;
  color:var(--gold); font-variant-numeric:tabular-nums}
.stat__num small{font-size:.3em; color:var(--ink-dim); font-weight:600;
  letter-spacing:.06em; text-transform:uppercase; margin-left:.25em}
.stat__label{font-family:var(--font-display); font-size:clamp(1.1rem,1.6vw,1.4rem);
  color:var(--ink); margin-top:14px; max-width:32ch; line-height:1.4}
.stat__body{font-size:.95rem; color:var(--ink-dim); margin-top:10px;
  max-width:42ch; line-height:1.6}

/* ── HOW ─────────────────────────────────────────────────────────────────── */
.how__grid{display:grid; grid-template-columns:repeat(3,1fr);
  gap:clamp(16px,2.4vw,28px); margin-top:56px}
.step{position:relative; overflow:hidden; background:var(--surface);
  border:1px solid var(--line); border-radius:var(--r-xl);
  padding:clamp(26px,3.2vw,42px); min-height:300px}
.step__numeral{position:absolute; top:18px; right:24px; font-family:var(--font-display);
  font-weight:600; font-size:clamp(3.2rem,7vw,5rem); color:var(--gold);
  opacity:.14; line-height:1; letter-spacing:-.05em}
.step__k{font-size:.7rem; font-weight:700; letter-spacing:.14em; text-transform:uppercase;
  color:var(--gold); margin-bottom:12px}
.step__t{font-family:var(--font-display); font-weight:600;
  font-size:clamp(1.5rem,2.3vw,2rem); letter-spacing:-.025em; color:var(--ink); margin-bottom:14px}
.step__b{font-size:.97rem; color:var(--ink-dim); line-height:1.65; max-width:32ch}
.how__cta{display:flex; align-items:center; gap:clamp(14px,2.4vw,28px); flex-wrap:wrap; margin-top:clamp(28px,4vw,46px)}
.how__cta-note{display:inline-flex; align-items:center; gap:8px; font-size:.84rem; font-weight:500; color:var(--ink-dim)}
.how__cta-note .ap-icon{color:var(--green); font-size:1rem; flex:none}

/* ── BIO ─────────────────────────────────────────────────────────────────── */
.bio__grid{display:grid; grid-template-columns:1fr 1fr; gap:clamp(36px,6vw,88px); align-items:start}
.bio__body{font-family:var(--font-display); font-size:clamp(1.15rem,1.7vw,1.5rem);
  line-height:1.5; color:var(--ink)}
.bio__body strong{color:var(--gold); font-weight:600}
.bio__body p+p{margin-top:22px; color:var(--ink-dim)}
.chips{display:flex; flex-wrap:wrap; gap:8px; margin-top:30px}
.chip{display:inline-flex; align-items:center; gap:8px; padding:9px 14px;
  border-radius:var(--r-pill); background:var(--surface); border:1px solid var(--line);
  font-size:.82rem; font-weight:600; color:var(--ink)}
.chip .ap-icon{color:var(--gold); font-size:.9rem}
.bio__card{background:var(--surface); border:1px solid var(--line);
  border-radius:var(--r-xl); padding:clamp(28px,4vw,46px)}
.bio__quote{font-family:var(--font-display); font-size:clamp(1.4rem,2.4vw,2rem);
  font-style:italic; line-height:1.35; color:var(--ink); padding-left:20px;
  border-left:2px solid var(--gold)}
.bio__quote cite{display:block; margin-top:16px; font-size:.76rem; font-style:normal;
  font-weight:700; letter-spacing:.12em; text-transform:uppercase; color:var(--gold)}
.bio__loc{margin-top:30px; padding-top:22px; border-top:1px solid var(--line);
  font-size:.9rem; color:var(--ink-dim); line-height:1.6}
.bio__loc .ap-icon{color:var(--gold); vertical-align:-2px; margin-right:6px}

/* ── VOICES ──────────────────────────────────────────────────────────────── */
.voices__grid{display:grid; grid-template-columns:.85fr 1.15fr; gap:clamp(36px,6vw,80px); align-items:start}
.voices__sticky{position:sticky; top:calc(var(--nav-h) + 8vh)}
.voices__rail{display:grid; grid-template-columns:1fr 1fr; gap:clamp(16px,2.4vw,26px)}
.voice{background:var(--surface); border:1px solid var(--line);
  border-radius:var(--r-lg); padding:clamp(20px,2.6vw,28px); display:flex; flex-direction:column}
.fresh{align-self:flex-start; display:inline-flex; align-items:center; gap:6px;
  margin-bottom:14px; padding:4px 10px; border-radius:var(--r-pill);
  font-size:.64rem; font-weight:700; letter-spacing:.08em; text-transform:uppercase}
.fresh--repeat{background:rgba(212,175,55,.12); color:var(--gold); border:1px solid rgba(212,175,55,.36)}
.fresh--verified{background:rgba(127,176,105,.08); color:var(--green-soft); border:1px solid rgba(127,176,105,.32)}
.fresh .ap-icon{font-size:.74rem}
.fresh__ago{letter-spacing:.02em; text-transform:none; font-weight:500; color:var(--ink-dim)}
.voice__q{font-family:var(--font-display); font-size:clamp(1.2rem,1.9vw,1.5rem);
  font-style:italic; line-height:1.32; color:var(--ink); flex:1}
.voice__meta{display:flex; align-items:center; gap:11px; margin-top:18px}
.avi{width:34px; height:34px; border-radius:50%; flex:none; display:grid; place-items:center;
  background:linear-gradient(135deg,var(--gold),var(--rose)); color:#0d0c0a; font-weight:800; font-size:.82rem}
.voice__name{display:block; font-size:.9rem; font-weight:600; color:var(--ink)}
.voice__city{display:block; font-size:.7rem; font-weight:700; letter-spacing:.1em; text-transform:uppercase; color:var(--gold); margin-top:2px}

/* ── CITIES (heat) ───────────────────────────────────────────────────────── */
.heat__grid{display:grid; grid-template-columns:repeat(3,minmax(0,1fr)); gap:14px; margin-top:44px}
.heat{position:relative; display:flex; align-items:center; gap:14px; padding:18px 20px;
  background:rgba(255,255,255,.02); border:1px solid var(--line); border-radius:var(--r-md);
  transition:transform .22s var(--ease),border-color .22s var(--ease)}
.heat:hover{transform:translateY(-2px); border-color:var(--line-2)}
.heat--high{border-color:rgba(184,92,92,.42); background:linear-gradient(135deg,rgba(184,92,92,.08),rgba(184,92,92,.01))}
.heat--medium{border-color:rgba(212,175,55,.32)}
.heat__ic{font-size:1.3rem; color:var(--gold); flex:none}
.heat__b{flex:1; min-width:0}
.heat__name{font-size:.98rem; font-weight:600; color:var(--ink)}
.heat__note{font-size:.78rem; color:var(--ink-dim); margin-top:2px}
.badge{display:inline-flex; align-items:center; gap:6px; padding:4px 10px; flex:none;
  border-radius:var(--r-pill); font-size:.64rem; font-weight:700; letter-spacing:.1em; text-transform:uppercase}
.badge--high{background:rgba(184,92,92,.18); color:#e07b7b; border:1px solid rgba(184,92,92,.42)}
.badge--medium{background:rgba(212,175,55,.14); color:var(--gold); border:1px solid rgba(212,175,55,.42)}
.badge--low{background:rgba(127,176,105,.1); color:var(--green-soft); border:1px solid rgba(127,176,105,.32)}
.pulse{width:6px; height:6px; border-radius:50%; background:#e07b7b;
  box-shadow:0 0 0 0 rgba(184,92,92,.6); animation:pulse 1.6s infinite}
@keyframes pulse{0%{box-shadow:0 0 0 0 rgba(184,92,92,.5)}70%{box-shadow:0 0 0 10px rgba(184,92,92,0)}100%{box-shadow:0 0 0 0 rgba(184,92,92,0)}}
@media (prefers-reduced-motion:reduce){.pulse,.dot{animation:none}}

/* ── PLOT ────────────────────────────────────────────────────────────────── */
.plot{position:relative; overflow:hidden; border:1px solid var(--line); border-radius:var(--r-xl);
  background:radial-gradient(ellipse at 80% 18%,rgba(255,126,192,.1),transparent 55%),var(--surface);
  padding:clamp(40px,6vw,88px)}
.plot__grid{display:grid; grid-template-columns:1.2fr .8fr; gap:clamp(36px,5vw,72px); align-items:center}
.plot__k{font-size:.72rem; font-weight:700; letter-spacing:.16em; text-transform:uppercase; color:var(--plot); margin-bottom:18px; display:inline-flex; gap:8px; align-items:center}
.plot__t{font-family:var(--font-display); font-weight:600; font-size:clamp(2.2rem,4.6vw,4rem);
  letter-spacing:-.035em; line-height:1.02; color:var(--ink); max-width:18ch}
.plot__t em{font-style:italic; font-weight:400; color:var(--plot)}
.plot__sub{font-family:var(--font-display); font-size:clamp(1.1rem,1.6vw,1.35rem);
  color:var(--ink-dim); margin-top:24px; max-width:50ch; line-height:1.45}
.plot__chips{display:flex; flex-wrap:wrap; gap:8px; margin-top:28px}
.plot__chip{display:inline-flex; align-items:center; gap:8px; padding:9px 14px; border-radius:var(--r-pill);
  background:rgba(255,126,192,.06); border:1px solid rgba(255,126,192,.2); color:#f2c7df; font-size:.82rem; font-weight:600}
.plot__chip .ap-icon{color:var(--plot); font-size:.85rem}
[data-theme="light"] .plot__chip{color:#a8326e; background:rgba(168,50,110,.07); border-color:rgba(168,50,110,.28)}
.plot__cta{display:inline-flex; align-items:center; gap:10px; margin-top:34px; padding:14px 24px; min-height:48px;
  border-radius:var(--r-pill); background:var(--plot); color:#1a0a14; font-weight:700; font-size:.95rem;
  text-decoration:none; transition:transform .22s var(--ease),box-shadow .22s var(--ease)}
.plot__cta:hover{transform:translateY(-2px); box-shadow:0 12px 32px rgba(255,126,192,.28)}
.phone{justify-self:center; width:242px; aspect-ratio:9/18.5; border-radius:34px; position:relative; overflow:hidden;
  padding:26px 15px 16px; display:flex; flex-direction:column;
  background:linear-gradient(180deg,#0a0014,#1a0030); border:1px solid rgba(255,62,165,.4);
  box-shadow:0 0 0 1px rgba(255,255,255,.04) inset,0 32px 64px rgba(0,0,0,.5),0 0 60px rgba(46,229,255,.16)}
.phone__brand{text-align:center; font:800 2rem/1 var(--font-body); letter-spacing:-.04em;
  background:linear-gradient(135deg,#ff3ea5,#2ee5ff); -webkit-background-clip:text; background-clip:text; color:transparent}
.phone__tag{text-align:center; font:400 .67rem/1.4 var(--font-body); color:rgba(255,255,255,.55); margin-top:5px}
.phone__feed{display:flex; flex-direction:column; gap:9px; margin-top:20px}
.phone__card{display:flex; align-items:center; gap:10px; padding:10px 11px; border-radius:13px;
  background:rgba(255,255,255,.05); border:1px solid rgba(255,255,255,.08)}
.phone__pin{flex:none; width:9px; height:9px; border-radius:50%; background:#ff3ea5; box-shadow:0 0 10px #ff3ea5}
.phone__pin--b{background:#2ee5ff; box-shadow:0 0 10px #2ee5ff}
.phone__pin--c{background:#c5ff3a; box-shadow:0 0 10px #c5ff3a}
.phone__meta{display:flex; flex-direction:column; min-width:0}
.phone__meta b{font:600 .72rem/1.2 var(--font-body); color:rgba(255,255,255,.92); white-space:nowrap; overflow:hidden; text-overflow:ellipsis}
.phone__meta span{font:500 .62rem/1.3 var(--font-body); color:rgba(255,255,255,.5); margin-top:2px}
@media (max-width:860px){.phone{display:none}}

/* ── TWO DOORS ───────────────────────────────────────────────────────────── */
.doors{display:grid; grid-template-columns:1fr 1fr; gap:clamp(16px,2.2vw,28px); margin-top:56px}
.door{position:relative; overflow:hidden; background:var(--surface); border:1px solid var(--line);
  border-radius:var(--r-xl); padding:clamp(32px,4.2vw,56px); min-height:340px;
  display:flex; flex-direction:column; justify-content:flex-end;
  transition:transform .36s var(--ease),border-color .36s var(--ease)}
.door:hover{transform:translateY(-4px); border-color:rgba(212,175,55,.45)}
.door--rose:hover{border-color:rgba(184,92,92,.45)}
.door::before{content:""; position:absolute; inset:0; pointer-events:none;
  background:radial-gradient(ellipse at 80% -20%,rgba(212,175,55,.18),transparent 55%)}
.door--rose::before{background:radial-gradient(ellipse at 80% -20%,rgba(184,92,92,.2),transparent 55%)}
.door__k{font-size:.72rem; font-weight:700; letter-spacing:.14em; text-transform:uppercase; color:var(--gold);
  margin-bottom:16px; display:inline-flex; gap:8px; align-items:center}
.door--rose .door__k{color:var(--rose)}
.door__t{font-family:var(--font-display); font-weight:600; font-size:clamp(1.9rem,3.4vw,3rem);
  letter-spacing:-.03em; color:var(--ink); margin-bottom:16px}
.door__t em{font-style:italic; font-weight:400; color:var(--gold)}
.door--rose .door__t em{color:var(--rose)}
.door__b{font-family:var(--font-display); font-size:clamp(1.05rem,1.5vw,1.25rem);
  color:var(--ink-dim); line-height:1.5; max-width:36ch; margin-bottom:26px}

/* ── CLOSER ──────────────────────────────────────────────────────────────── */
.closer{text-align:center; padding-block:clamp(80px,12vw,168px)}
.closer__t{font-family:var(--font-display); font-weight:600; font-size:clamp(2.8rem,7vw,5.6rem);
  letter-spacing:-.04em; line-height:1; color:var(--ink); max-width:18ch; margin-inline:auto}
.closer__t em{font-style:italic; font-weight:400; color:var(--gold)}
.closer__sub{font-family:var(--font-display); font-size:clamp(1.1rem,1.6vw,1.45rem);
  color:var(--ink-dim); max-width:56ch; margin:26px auto 0; line-height:1.45}
.scarcity{display:grid; grid-template-columns:repeat(4,minmax(0,1fr)); gap:12px; max-width:920px; margin:40px auto 0}
.scell{position:relative; overflow:hidden; display:flex; flex-direction:column; gap:6px; text-align:left;
  padding:18px 16px; background:rgba(255,255,255,.02); border:1px solid var(--line); border-radius:var(--r-md)}
.scell--hot{border-color:rgba(184,92,92,.45); background:linear-gradient(135deg,rgba(184,92,92,.1),rgba(184,92,92,.02))}
.scell--wait{border-color:rgba(212,175,55,.45); background:linear-gradient(135deg,rgba(212,175,55,.1),rgba(212,175,55,.02))}
.scell--mute{opacity:.78}
.scell__n{font-family:var(--font-display); font-weight:300; font-size:clamp(2.2rem,4vw,3rem);
  line-height:1; color:var(--ink); font-variant-numeric:tabular-nums}
.scell--hot .scell__n{color:#e07b7b}
.scell--wait .scell__n{color:var(--gold)}
.scell__l{font-size:.78rem; color:var(--ink-dim); line-height:1.35}
.pantheon{max-width:720px; margin:34px auto 0; padding:22px 24px; text-align:left;
  background:linear-gradient(135deg,rgba(212,175,55,.08),rgba(212,175,55,.02));
  border:1px solid rgba(212,175,55,.32); border-radius:var(--r-md)}
.pantheon__h{display:flex; align-items:center; gap:12px; color:var(--gold)}
.pantheon__h .ap-icon{font-size:1.1rem}
.pantheon__t{margin:0; font-size:.92rem; color:var(--ink); font-weight:500}
.pantheon__t strong{color:var(--gold); font-weight:700}
.pantheon__t em{font-style:normal; font-weight:700}
.pantheon__bar{position:relative; height:6px; margin:16px 0 10px; background:rgba(212,175,55,.1);
  border-radius:var(--r-pill); overflow:hidden}
.pantheon__fill{position:absolute; inset:0 auto 0 0; width:0;
  background:linear-gradient(90deg,var(--gold),color-mix(in srgb,var(--gold) 70%,#fff)); border-radius:var(--r-pill)}
.pantheon__tick{position:absolute; top:50%; width:2px; height:10px; margin-top:-5px;
  background:rgba(212,175,55,.35); border-radius:1px}
.pantheon__m{margin:0; font-size:.78rem; color:var(--ink-dim)}
.pantheon__m strong{color:var(--gold); font-weight:700}
.closer__ctas{display:flex; gap:12px; flex-wrap:wrap; justify-content:center; margin-top:44px}

/* ── ASK AI ──────────────────────────────────────────────────────────────── */
.ai{text-align:center}
.ai__t{font-family:var(--font-display); font-weight:600; font-size:clamp(1.7rem,3vw,2.4rem);
  letter-spacing:-.025em; color:var(--ink)}
.ai__t em{font-style:italic; font-weight:400; color:var(--gold)}
.ai__sub{font-size:.95rem; color:var(--ink-dim); margin:12px 0 30px}
.ai__grid{display:grid; grid-template-columns:repeat(4,1fr); gap:12px; max-width:720px; margin-inline:auto}
.ai__card{display:flex; align-items:center; gap:11px; padding:14px 18px; border:1px solid var(--line);
  border-radius:var(--r-md); background:var(--surface); text-decoration:none;
  transition:transform .22s var(--ease),border-color .22s var(--ease)}
.ai__card:hover{transform:translateY(-2px); border-color:var(--gold)}
.ai__mono{width:32px; height:32px; flex:none; display:grid; place-items:center; border-radius:10px}
.ai__mono .ai__logo{width:18px; height:18px; display:block}
.ai__mono--gpt{background:rgba(16,163,127,.12); color:#10a37f}
.ai__mono--gem{background:rgba(66,133,244,.12)}
.ai__mono--cla{background:rgba(204,120,68,.14); color:#cc7844}
.ai__mono--grk{background:rgba(245,240,230,.06); color:var(--ink)}
.ai__l{text-align:left; line-height:1.2}
.ai__name{font-size:.86rem; font-weight:700; color:var(--ink); display:block}
.ai__s{font-size:.66rem; font-weight:500; color:var(--ink-faint); display:block; margin-top:2px}

/* Footer moved to the shared component (shared/site-footer.js / .css). */

/* ── TOAST (recent bookings) ─────────────────────────────────────────────── */
.toast{position:fixed; left:20px; bottom:20px; z-index:120; max-width:340px;
  display:flex; align-items:center; gap:12px; padding:12px 14px 12px 16px;
  background:linear-gradient(180deg,color-mix(in srgb,var(--bg) 82%,transparent),color-mix(in srgb,var(--bg) 90%,transparent));
  -webkit-backdrop-filter:blur(20px) saturate(150%); backdrop-filter:blur(20px) saturate(150%);
  border:1px solid rgba(255,255,255,.12); border-radius:var(--r-md);
  box-shadow:0 18px 44px rgba(0,0,0,.42),inset 0 1px 0 rgba(255,255,255,.08),0 0 0 1px var(--gold-soft);
  opacity:0; pointer-events:none;
  transform:translate3d(var(--tx,0px),var(--ty,120px),0) scale(var(--ts,1));
  transition:opacity .5s var(--ease); will-change:transform,opacity}
.toast[data-show="1"]{opacity:1; pointer-events:auto}
@media (prefers-reduced-motion:reduce){
  .toast{transform:none !important; transition:opacity .4s linear}
}
.dot{flex:none; width:8px; height:8px; border-radius:50%; background:var(--green);
  box-shadow:0 0 0 0 rgba(127,176,105,.55); animation:pulseG 1.8s infinite}
@keyframes pulseG{0%{box-shadow:0 0 0 0 rgba(127,176,105,.45)}70%{box-shadow:0 0 0 11px rgba(127,176,105,0)}100%{box-shadow:0 0 0 0 rgba(127,176,105,0)}}
.toast__body{flex:1; min-width:0}
.toast__line{margin:0; font-size:.82rem; line-height:1.35; color:var(--ink)}
.toast__line strong{font-weight:700}
.toast__line em{color:var(--gold); font-style:normal; font-weight:600}
.toast__meta{margin:2px 0 0; font-size:.7rem; color:var(--ink-dim); font-variant-numeric:tabular-nums}
.toast__x{flex:none; width:26px; height:26px; display:grid; place-items:center; background:transparent;
  color:var(--ink-dim); border:1px solid var(--line); border-radius:50%; font-size:.7rem}
.toast__x:hover{color:var(--ink); border-color:var(--gold)}

/* ── Responsive ──────────────────────────────────────────────────────────── */
@media (max-width:980px){
  .hero__grid,.proof__grid,.bio__grid,.voices__grid,.plot__grid,.doors{grid-template-columns:1fr}
  .proof__sticky,.voices__sticky{position:static}
  .how__grid{grid-template-columns:1fr}
  .hero__grid{gap:36px}
  .fcard{max-width:380px; margin-inline:auto; width:100%}
  .ai__grid{grid-template-columns:1fr 1fr}
}
@media (max-width:760px){
  .heat__grid{grid-template-columns:1fr 1fr}
  .scarcity{grid-template-columns:1fr 1fr}
  .voices__rail{grid-template-columns:1fr}
}
@media (max-width:600px){
  :root{--pad:clamp(56px,14vw,84px)}
  .hero{padding-top:18px}
  .ai__grid{grid-template-columns:1fr}
  .heat__grid{grid-template-columns:1fr}
  .doors{grid-template-columns:1fr}
  .toast{left:12px; right:12px; bottom:12px; max-width:none}
  .closer__ctas .btn,.hero__ctas .btn{flex:1 1 auto}
}

/* ============================================================================
   LUXURY MOTION UPGRADE — dark-gold parallax · glass · springs (2026-06-03)
   GPU-only (transform/opacity). Every effect is .js-gated, disabled under
   prefers-reduced-motion, and degraded to static/fade on mobile (<=768px).
   ============================================================================ */

/* ── Frosted-glass utility ──────────────────────────────────────────────── */
.glass{
  background:linear-gradient(180deg,rgba(255,255,255,.06),rgba(255,255,255,.02));
  -webkit-backdrop-filter:blur(18px) saturate(140%); backdrop-filter:blur(18px) saturate(140%);
  border:1px solid rgba(255,255,255,.12);
  box-shadow:0 18px 50px rgba(0,0,0,.45),inset 0 1px 0 rgba(255,255,255,.10)}
[data-theme="light"] .glass{
  background:linear-gradient(180deg,rgba(255,255,255,.62),rgba(255,255,255,.32));
  border-color:rgba(26,24,20,.10);
  box-shadow:0 18px 50px rgba(0,0,0,.12),inset 0 1px 0 rgba(255,255,255,.6)}

/* ── Hero: staggered line-mask heading (CSS-on-load — no JS dependency) ───── */
.line-mask{display:block; overflow:hidden}
.line-mask>span{display:block}
.js .reveal-hero .line-mask>span{
  animation:lineUp .9s var(--ease) both;
  animation-delay:calc(var(--i,0)*.10s); will-change:transform,opacity}
@keyframes lineUp{from{transform:translateY(115%); opacity:0} to{transform:none; opacity:1}}
.js .reveal-hero .stagger{animation:riseIn .8s var(--ease) both;
  animation-delay:calc(.34s + var(--i,0)*.09s)}
@keyframes riseIn{from{opacity:0; transform:translateY(18px)} to{opacity:1; transform:none}}
@media (prefers-reduced-motion:reduce){
  .js .reveal-hero .line-mask>span,.js .reveal-hero .stagger{animation:none}
}

/* ── Hero: founder card — outer = scroll parallax + idle float (JS writes one
      composed transform); inner = Vanilla-Tilt layer (its own transform) ──── */
.fcard{box-shadow:0 36px 90px rgba(0,0,0,.6),0 0 64px var(--gold-glow)}
.fcard__tilt{position:absolute; inset:0; border-radius:inherit; overflow:hidden;
  transform-style:preserve-3d}

/* ── Proof: isometric slow-parallax backdrop (moves slower + scales up) ───── */
.proof__iso{position:absolute; inset:0; z-index:0; overflow:hidden; pointer-events:none;
  display:grid; place-items:center; color:var(--gold); opacity:.40;
  -webkit-mask-image:radial-gradient(ellipse at 62% 45%,#000,transparent 78%);
          mask-image:radial-gradient(ellipse at 62% 45%,#000,transparent 78%)}
.proof__iso svg{width:min(125%,1180px); height:auto; will-change:transform}
@supports (animation-timeline:view()){
  @media (prefers-reduced-motion:no-preference) and (min-width:769px){
    .proof__iso svg{animation:isoParallax linear both;
      animation-timeline:view(); animation-range:entry 0% exit 100%}
  }
}
@keyframes isoParallax{
  from{transform:translate3d(0,7%,0) scale(1)}
  to  {transform:translate3d(0,-9%,0) scale(1.18)}}
.proof__iso--js svg{transform:translate3d(0,var(--iso-y,0),0) scale(var(--iso-s,1))}
@media (max-width:768px){.proof__iso{opacity:.24}}
@media (prefers-reduced-motion:reduce){.proof__iso svg{transform:none}}

/* ============================================================================
   CINEMATIC SCROLL HERO — frame-sequence scrub (cabin → TV → grocery run)
   Default = static fallback (cabin + grocery stills, stacked copy) for
   mobile / reduced-motion / no-JS. JS adds .cine--scrub on desktop+motion to
   pin a 100vh stage and scrub the WebP sequence on a tall track.
   ============================================================================ */
.cine{position:relative; background:#0c0a07; color:var(--cream)}
.cine__track{position:relative}
.cine__stage{position:relative; display:flex; flex-direction:column}
.cine__canvas{display:none}
.cine__poster,.cine__still{width:100%; height:auto; display:block; aspect-ratio:16/9; object-fit:cover}
.cine__veil{display:none}
.cine__copy{position:relative; z-index:3; width:100%; max-width:880px; margin-inline:auto;
  padding:clamp(34px,6vw,72px) var(--edge); text-align:left}
.cine__copy--b{display:none}
.cine__eyebrow{font-size:.76rem; font-weight:700; letter-spacing:.18em; text-transform:uppercase; color:var(--gold); margin:0 0 16px}
.cine__title{font-family:var(--font-display); font-weight:600; font-size:clamp(2.4rem,5.6vw,4.8rem);
  line-height:1.0; letter-spacing:-.04em; color:var(--cream); margin:0}
.cine__title em{font-style:italic; font-weight:400; color:var(--gold)}
.cine__lead{font-family:var(--font-display); font-size:clamp(1.1rem,1.7vw,1.45rem);
  line-height:1.45; color:var(--ink-dim); margin:20px 0 0; max-width:48ch}
.cine__ctas{display:flex; gap:12px; flex-wrap:wrap; margin-top:28px}
.cine__cue{display:none}
.cine__mid{font-family:var(--font-display); font-weight:500; font-size:clamp(1.7rem,3.6vw,3rem);
  line-height:1.2; color:var(--cream); text-align:center; margin:0}
.cine__mid span{color:var(--gold); font-style:italic}

/* Scrub mode (JS-enabled, desktop + motion-OK) */
.cine--scrub .cine__track{height:340vh}
.cine--scrub .cine__stage{position:sticky; top:0; height:100vh; overflow:hidden; display:block}
.cine--scrub .cine__poster{position:absolute; inset:0; width:100%; height:100%; aspect-ratio:auto; object-fit:cover; z-index:0}
.cine--scrub .cine__canvas{display:block; position:absolute; inset:0; width:100%; height:100%; z-index:1}
.cine--scrub .cine__still{display:none}
.cine--scrub .cine__veil{display:block; position:absolute; inset:0; z-index:2; pointer-events:none;
  background:linear-gradient(180deg,rgba(12,10,7,.5),rgba(12,10,7,.06) 26%,transparent 55%,rgba(12,10,7,.42))}
/* Rounded glassmorphic copy cards — frosted panels for contrast over the hero */
.cine--scrub .cine__copy{position:absolute; opacity:0; will-change:opacity;
  background:linear-gradient(180deg,rgba(24,18,11,.50),rgba(12,10,7,.42));
  -webkit-backdrop-filter:blur(22px) saturate(135%); backdrop-filter:blur(22px) saturate(135%);
  border:1px solid rgba(255,255,255,.14); border-radius:26px;
  box-shadow:0 26px 64px rgba(0,0,0,.42),inset 0 1px 0 rgba(255,255,255,.15);
  padding:clamp(24px,2.6vw,36px) clamp(26px,3vw,40px)}
.cine--scrub .cine__copy--a,.cine--scrub .cine__copy--c{left:clamp(18px,5vw,72px); bottom:11vh; width:min(560px,88vw); text-align:left}
.cine--scrub .cine__copy--a{opacity:1}  /* visible from first paint; JS fades it out on scroll */
.cine--scrub .cine__copy--b{left:50%; top:50%; transform:translate(-50%,-50%); width:min(600px,90vw); text-align:center}
.cine--scrub .cine__title{font-size:clamp(2rem,4vw,3.4rem)}
.cine--scrub .cine__lead{font-size:clamp(1rem,1.35vw,1.18rem); color:var(--cream); opacity:.9; margin-top:14px; max-width:none}
.cine--scrub .cine__eyebrow{margin-bottom:12px}
.cine--scrub .cine__ctas{margin-top:22px}
.cine--scrub .cine__mid{font-size:clamp(1.5rem,3vw,2.4rem)}
.cine--scrub .cine__cue{display:inline-flex; align-items:center; gap:8px; margin-top:26px;
  font-family:var(--font-body); font-size:.72rem; font-weight:700; letter-spacing:.18em; text-transform:uppercase; color:var(--cream)}
.cine--scrub .cine__cue .ap-icon{transform:rotate(90deg); animation:cueBob 1.7s var(--ease) infinite}
@keyframes cueBob{0%,100%{transform:rotate(90deg) translateX(0)}50%{transform:rotate(90deg) translateX(5px)}}
@media (prefers-reduced-motion:reduce){.cine--scrub .cine__cue .ap-icon{animation:none}}
@media (max-width:600px){ .cine__poster,.cine__still{aspect-ratio:4/3} }