/* ── We Answer Every Call — homepage (the geo story page) ───────────────────
   Loaded after base.css, which owns the tokens and the one button. This page
   does NOT load site.css — that is the inner-page component library and its
   layout rules do not belong here. Nothing below may declare a colour, a face
   or a spacing value of its own: reach for a token. These are the homepage-only
   components — the phone stage, the cast rotator, the beat tiles.          */

/* headings: the homepage runs tighter than the inner pages by design */
h1,h2,h3 { font-family:var(--font-display); font-weight:700; line-height:1.06; letter-spacing:-.02em; text-wrap:balance; }
.container { max-width:1120px; margin-inline:auto; padding-inline:var(--sp-4); }
.band { padding-block: calc(var(--flow-3) * 1.4); }

.strap { padding-block:var(--sp-4); position:sticky; top:0; z-index:60; background:var(--canvas); box-shadow:0 1px 0 rgba(23,36,28,.08); }
.burger { display:none; background:none; border:0; cursor:pointer; padding:10px; width:44px; height:44px; flex-direction:column; justify-content:center; gap:5px; }
.burger span { display:block; width:22px; height:2px; background:var(--ink); border-radius:2px; transition:transform .25s var(--ease), opacity .25s var(--ease); }
.burger[aria-expanded="true"] span:nth-child(1) { transform:translateY(7px) rotate(45deg); }
.burger[aria-expanded="true"] span:nth-child(2) { opacity:0; }
.burger[aria-expanded="true"] span:nth-child(3) { transform:translateY(-7px) rotate(-45deg); }
.strap-row { display:flex; justify-content:space-between; align-items:center; gap:var(--sp-4); flex-wrap:wrap; }
.brand { display:flex; align-items:center; gap:12px; font-weight:700; font-size:var(--text-lg); letter-spacing:-.02em; }
.brand b { font-weight:800; }
.strap .aud, .hero .aud { color:var(--ink-soft); font-size:var(--text-sm); }
.hero .aud { text-transform:uppercase; letter-spacing:.14em; font-size:var(--text-xs); margin-bottom:1rem; }
.topnav { display:flex; gap:1.4rem; align-items:center; font-size:var(--text-sm); flex-wrap:wrap; }
/* scoped off the pill: `.topnav a` would out-specify .btn and repaint the
   label in ink-soft, which is how the nav pill went dark-on-dark green. */
.topnav a:not(.navbtn) { text-decoration:none; color:var(--ink-soft); }
.topnav a:not(.navbtn):hover { color:var(--ink); }
.topnav .navbtn { --btn-py:10px; --btn-px:19.2px; }
.foot-grid { display:grid; gap:.6rem; }
.foot a { color:var(--ink-mute); } .foot a:hover { color:var(--ink-inverse); }
.band-ask .cap a { color:var(--action-wash); font-weight:600; }

/* hero: copy left-center, THE STAGE = character tile + full phone */
.hero { padding-block: calc(var(--flow-3)*1.5) calc(var(--flow-3)*1.1); text-align:center; }
.hero h1 { font-size:clamp(3rem, 2.2rem + 4.4vw, 5.2rem); }
.hero .lede { max-width:32em; margin:var(--flow-1) auto 0; text-align:left; color:var(--ink-soft); font-size:var(--text-lg); }
/* The pill itself — fill, radius, focus ring, and the line-height that keeps the
   label centred — comes from .btn in base.css. The homepage only sets its own
   proportions and its caps treatment, through the same tokens the shared rule
   reads. Never restate a colour here: that is how two greens happen. */
.btn.cta { --btn-py:18.5px; --btn-px:41.6px;
  text-transform:uppercase; letter-spacing:.04em; margin-top:var(--flow-2); }
.cap { color:var(--ink-soft); font-size:var(--text-sm); margin-top:.8rem; }

.stage { --stage-h:clamp(430px, 56vw, 560px); display:flex; gap:clamp(1.5rem,4vw,3.5rem); align-items:flex-start; justify-content:center;
  margin:calc(var(--flow-3)*1.2) auto 0; flex-wrap:wrap; }
.castbox { position:relative; height:var(--stage-h); aspect-ratio:1; max-width:92vw; }
.cast { position:absolute; inset:0; width:100%; height:100%; object-fit:cover; opacity:0; }
.cast.on { opacity:1; }
.wholabel { margin-top:.65rem; text-align:center; font-family:ui-monospace,monospace; font-size:var(--text-xs); color:var(--ink-soft); }

/* THE PHONE — the live site's rolling missed->booked flip, whole device (Bryan's spec: flip at
   the lower-40% mark, then up and off). Frame echoes the live markup: statusbar + notch + screen. */
.phone { height:var(--stage-h); aspect-ratio:270/548; max-width:92vw; background:var(--ink); border-radius:38px; padding:10px;
  box-shadow:0 0 0 2px rgba(23,36,28,.15); position:relative; }
.phone .screenwrap { position:relative; background:var(--canvas); border-radius:30px; height:100%; overflow:hidden; }
.phone .statusbar { position:absolute; top:0; left:0; right:0; height:40px; display:flex; align-items:center;
  justify-content:space-between; padding-inline:16px; z-index:3; background:linear-gradient(var(--canvas) 55%, transparent); }
.phone .statusbar .wm { font-family:ui-monospace,monospace; font-size:12px; color:var(--ink-soft); }
.phone .notch { position:absolute; top:8px; left:50%; transform:translateX(-50%); width:84px; height:16px;
  background:var(--ink); border-radius:8px; z-index:4; }
.phone .screen { position:absolute; inset:0; }
.ncard { position:absolute; left:7%; width:86%; border-radius:14px; padding:10px 12px; display:grid; gap:1px;
  background:var(--loss-wash); border:2px solid var(--loss-line); will-change:transform,opacity; }
.ncard.booked { background:var(--action-wash); border-color:var(--action-line); }
.ncard .r1 { display:flex; align-items:center; gap:7px; font-family:ui-monospace,monospace; font-size:12px; line-height:1.3; color:var(--ink-soft); }
.ncard .dot { width:7px; height:7px; border-radius:50%; background:var(--loss); flex:none; }
.ncard.booked .dot { background:var(--action); }
.ncard .amt { font-weight:700; font-size:19px; line-height:1.3; letter-spacing:-.02em; color:var(--loss); }
.ncard.booked .amt { color:var(--action); }
.ncard .r1 span:last-child, .ncard .sub { white-space:nowrap; overflow:hidden; text-overflow:ellipsis; }
.ncard .sub { font-size:12px; line-height:1.3; color:var(--ink-soft); }

/* pain band */
.band-pain { background:var(--ink); color:var(--ink-inverse); text-align:center; }
.band-pain h2 { font-size:clamp(1.9rem,1.5rem + 2.2vw,3.1rem); max-width:18em; margin-inline:auto; }
.band-pain p { max-width:34em; margin:var(--flow-1) auto 0; text-align:left; color:var(--ink-mute); }
.band-pain .maths { color:var(--ink-inverse); }
.band-pain .gold { color:var(--gold); }

/* HOW IT WORKS — the live film, rebuilt as a geo three-beat loop. None of them need you. */
.band-hiw h2 { text-align:center; font-size:clamp(1.9rem,1.5rem + 2.2vw,3rem); }
.band-hiw .sub { text-align:center; color:var(--ink-soft); margin-top:.6rem; }
.hiw { display:grid; grid-template-columns:repeat(3,1fr); gap:var(--flow-1); margin-top:var(--flow-3); }
.beat { background:var(--surface); border-radius:24px; padding:var(--flow-2); display:grid; gap:.7rem; align-content:start; }
.beat h3 { font-size:var(--text-xl); }
.beat p { color:var(--ink-soft); font-size:var(--text-sm); }
.beat .rule { width:44px; height:3px; background:var(--action); border-radius:2px; }
.hiw-film[hidden] { display:none; }
.hiw-film { width:100%; display:block; border-radius:24px; background:var(--surface); }
/* the film, and the still-frame strip that stands in whenever it cannot play */
.filmbox { position:relative; margin-top:var(--flow-3); }
.filmbox[hidden], .filmstrip[hidden] { display:none; }
.filmstrip { position:relative; border-radius:24px; overflow:hidden; background:var(--surface); }
.fs-view { overflow:hidden; }
.fs-track { display:flex; transition:transform .45s var(--ease); }
.fs-slide { flex:0 0 100%; margin:0; }
.fs-slide img { width:100%; display:block; }
.fs-nav { position:absolute; top:50%; transform:translateY(-50%); width:46px; height:46px; border:0; border-radius:50%;
  background:rgba(23,36,28,.7); color:var(--on-action); font:400 26px/1 var(--font-body); cursor:pointer; display:grid; place-items:center; padding:0; }
.fs-nav:hover { background:rgba(23,36,28,.92); }
.fs-nav:focus-visible { outline:3px solid var(--gold); outline-offset:2px; }
.fs-prev { left:12px; } .fs-next { right:12px; }
.fs-dots { position:absolute; left:0; right:0; bottom:14px; display:flex; gap:8px; justify-content:center; }
.fs-dots button { width:9px; height:9px; padding:0; border:0; border-radius:50%; background:rgba(23,36,28,.3); cursor:pointer; transition:width .25s var(--ease), background .25s var(--ease); }
.fs-dots button[aria-selected="true"] { width:24px; border-radius:5px; background:var(--gold); }
.fs-dots button:focus-visible { outline:2px solid var(--ink); outline-offset:3px; }
.fs-alt { display:block; text-align:center; font-size:var(--text-xs); color:var(--ink-soft); margin-top:.7rem; background:none; border:0; cursor:pointer; text-decoration:underline; width:100%; font-family:var(--font-body); }
@media (prefers-reduced-motion:reduce) { .fs-track { transition:none; } .fs-dots button { transition:none; } }
/* beat 1: the ringing phone tile — clay facets pulse */
.g-phone { width:56px; height:88px; background:var(--ink); border-radius:12px; position:relative; }
.g-phone::after { content:""; position:absolute; inset:6px; background:var(--canvas); border-radius:7px; }
.g-ring { position:absolute; width:16px; height:16px; border-radius:50%; background:var(--loss); top:24px; z-index:2; }
.g-arc { position:absolute; border:3px solid var(--loss); border-radius:50%; opacity:0; width:40px; height:40px; top:12px; }
.g-arc.a2 { width:64px; height:64px; top:0; }
/* beat 2: the answer — evergreen voice bars */
.g-head { width:64px; height:64px; border-radius:50%; background:var(--action); position:relative; z-index:2; }
.g-head::after { content:""; position:absolute; left:-10px; top:26px; width:18px; height:18px; border:6px solid var(--action);
  border-right:none; border-top:none; border-radius:0 0 0 14px; }
.g-bars { position:absolute; display:flex; gap:5px; bottom:8px; }
.g-bars i { width:6px; height:14px; background:var(--action); border-radius:3px; display:block; }
/* beat 3: the booking — calendar slot flips gold */
.g-cal { width:84px; height:72px; background:var(--canvas); border:3px solid var(--ink); border-radius:10px; position:relative; }
.g-cal::before { content:""; position:absolute; top:0; left:0; right:0; height:16px; background:var(--action); border-radius:6px 6px 0 0; }
.g-slot { position:absolute; left:10px; bottom:10px; width:20px; height:20px; border-radius:6px; background:var(--surface); }
.g-slot.k2 { left:34px; } .g-slot.k3 { left:58px; }
.g-check { position:absolute; left:58px; bottom:10px; width:20px; height:20px; border-radius:6px; background:var(--gold);
  display:grid; place-items:center; color:var(--canvas); font-size:12px; font-weight:800; opacity:0; }

/* what you get + price + ask + close + foot */
.band-what h2 { text-align:center; font-size:clamp(1.9rem,1.5rem + 2.2vw,3rem); }
.cards { display:grid; grid-template-columns:repeat(3,1fr); gap:var(--flow-1); margin-top:var(--flow-3); }
.card { background:var(--surface); border:1px solid rgba(23,36,28,.08); border-radius:24px; padding:var(--flow-2); display:grid; gap:.7rem; align-content:start; }
.card h3 { font-size:var(--text-xl); }
.card p { color:var(--ink-soft); font-size:var(--text-sm); }
.cardicon { height:64px; width:auto; margin-bottom:.4rem; }
.band-price { background:var(--surface); text-align:center; }
.band-price .num { font-family:var(--font-display); font-weight:800; font-size:clamp(3.4rem,2.6rem+4vw,5.6rem); letter-spacing:-.03em; }
.band-price .per { color:var(--ink-soft); }
.band-price p.terms { max-width:30em; margin:var(--flow-1) auto 0; color:var(--ink-soft); text-align:left; }
.band-ask { background:var(--action); color:var(--canvas); text-align:center; padding-block:calc(var(--flow-3)*1.6); }
.band-ask h2 { font-size:clamp(2rem,1.6rem+2.4vw,3.2rem); }
.band-ask .cap { color:var(--action-wash); }
.close { text-align:center; }
.close h2 { font-size:clamp(1.8rem,1.5rem+2vw,2.8rem); }
.foot { background:var(--ink); color:var(--ink-mute); padding-block:var(--flow-3); font-size:var(--text-sm); }
.foot .container { display:flex; justify-content:space-between; gap:var(--sp-4); flex-wrap:wrap; }
.foot b { color:var(--ink-inverse); }
@media (max-width:800px){ .burger { display:flex; }
  .strap-row { flex-wrap:nowrap; }
  .brand { min-width:0; } .brand span { white-space:nowrap; overflow:hidden; text-overflow:ellipsis; }
  .topnav { display:none; position:absolute; top:100%; left:0; right:0; background:var(--canvas); flex-direction:column; align-items:flex-start; gap:1.15rem; padding:1rem var(--sp-4) 1.5rem; box-shadow:0 16px 28px rgba(23,36,28,.14); }
  .topnav.open { display:flex; }
  .cards,.hiw { grid-template-columns:1fr; } .hero,.band-pain,.band-what h2,.band-hiw h2,.band-ask,.close { text-align:left; }
  .hero .lede { margin-left:0; } .band-hiw .sub { text-align:left; }
  /* mobile hero: the phone IS the stage; the character rides its corner as a cameo */
  .stage { --stage-h:min(520px, 128vw); justify-content:flex-end; padding-right:10px; position:relative; padding-bottom:4.2rem; }
  .stage > div:first-child { position:absolute; left:-105px; bottom:-0.6rem; z-index:2; width:auto; }
  .castbox { height:360px; width:360px; }
  .wholabel { position:absolute; left:162px; width:auto; white-space:nowrap; text-align:left; margin-top:.1rem; font-size:1.5rem; }
}

.reveal { opacity:1; transform:none; }
@media (max-width:380px){ .brand { font-size:1rem; } .brand svg { width:42px; height:auto; } }
@media (prefers-reduced-motion:no-preference) {
  /* only hide-then-reveal once JS has proved it is alive (html.js). If the script
     never runs, or throws, the class is absent/removed and every .reveal stays visible. */
  html.js .reveal { opacity:0; transform:translateY(24px); transition:opacity .7s var(--ease), transform .7s var(--ease); }
  html.js .reveal.in { opacity:1; transform:none; }

  /* reelforge pendulum doctrine: staggered durations so neighbours never sync;
     rotation peaks offset from lift (phone 4s lift w/ rotate at 30/70; tile breathes at 7.3s) */
  .phone { animation:p-lift 4s ease-in-out infinite, p-rot 4s ease-in-out infinite; }
  @keyframes p-lift { 0%,100% { translate:0 0; } 50% { translate:0 -8px; } }
  @keyframes p-rot { 0%,100% { rotate:0deg; } 30% { rotate:.5deg; } 70% { rotate:-.5deg; } }
  .castbox { animation:breathe 7.3s ease-in-out infinite; }
  @keyframes breathe { 0%,100% { scale:1; } 50% { scale:1.012; } }

  /* character change — soft crossfade with a gentle rise; clip wipes cut
     through transparent characters and read as a glitch */
  .cast.in-wipe { animation:cast-in .6s var(--ease) both; }
  .cast.out-wipe { animation:cast-out .6s var(--ease) both; }
  @keyframes cast-in  { 0% { opacity:0; transform:translateY(14px) scale(.985); } 100% { opacity:1; transform:none; } }
  @keyframes cast-out { 0% { opacity:1; transform:none; } 100% { opacity:0; transform:translateY(-10px) scale(.99); } }

  /* HOW IT WORKS 12s loop: beats light 0-4-8s; arcs, bars, gold check per beat */
  .beat .rule::after { animation:rulefill 12s var(--ease) infinite; }
  .beat.b2 .rule::after { animation-delay:4s; } .beat.b3 .rule::after { animation-delay:8s; }
  @keyframes rulefill { 0% { transform:scaleX(0);} 8% { transform:scaleX(1);} 33.3% { transform:scaleX(1);} 34% { transform:scaleX(0);} 100% { transform:scaleX(0);} }
  .g-arc { animation:arc 12s ease-out infinite; } .g-arc.a2 { animation-delay:.35s; }
  @keyframes arc { 0%,2% { opacity:0; transform:scale(.6);} 8% { opacity:.9;} 16% { opacity:0; transform:scale(1.25);} 100% { opacity:0;} }
  .g-ring { animation:ringpulse 12s ease-in-out infinite; }
  @keyframes ringpulse { 0%,33% { background:var(--loss);} 36%,100% { background:var(--action);} }
  .g-bars i { animation:bar 12s ease-in-out infinite; transform-origin:bottom; }
  .g-bars i:nth-child(2) { animation-delay:.15s; } .g-bars i:nth-child(3) { animation-delay:.3s; } .g-bars i:nth-child(4) { animation-delay:.45s; }
  @keyframes bar { 0%,33% { transform:scaleY(.4); opacity:.4;} 38%,60% { transform:scaleY(1.6); opacity:1;} 45% { transform:scaleY(.7);} 52% { transform:scaleY(1.3);} 66%,100% { transform:scaleY(.4); opacity:.4;} }
  .g-check { animation:checkpop 12s var(--ease) infinite; }
  @keyframes checkpop { 0%,66% { opacity:0; transform:scale(.4);} 71% { opacity:1; transform:scale(1.15);} 74%,96% { opacity:1; transform:scale(1);} 100% { opacity:0;} }
}