/* =========================================================
   Switched On AI, "Warm Future"
   site.css

   JS contract (class names this file expects):
   html.js            added first thing in <head>
   html.is-flicked    added in <head> when sessionStorage.soa_flicked
                      is set, or when reduced motion is on. Skips the intro.
   html.nav-open      while the mobile sheet is open (body overflow lock)
   .nav.is-scrolled   from the rAF loop when scrollY > 24
   [data-reveal].is-in   added by the IntersectionObserver
   .wire              JS writes --wire-p (0..1), --wire-top, --wire-h
   .wire__node        JS writes --node-y and toggles .is-lit
   [data-parallax]    JS writes --py (px)
   .tile, .step       JS writes --mx / --my on pointermove
   video.is-ready     added on canplay to fade a video in
   .phone[data-state] idle | playing | done
   .wave.is-speaking  while an AI line types
   .wave.is-caller    while a caller line types
   ========================================================= */

/* ---------- 1. Tokens ---------- */
:root{
  --night:#0B1220;
  --panel:#141C2E;
  --amber:#FFB020;
  --teal:#22D3B6;
  --cream:#F7F3EA;
  --grey:#9AA4B2;

  --cream-08:rgba(247,243,234,.08);
  --cream-14:rgba(247,243,234,.14);
  --cream-25:rgba(247,243,234,.25);
  --amber-12:rgba(255,176,32,.12);
  --amber-25:rgba(255,176,32,.25);
  --amber-40:rgba(255,176,32,.40);
  --teal-20:rgba(34,211,182,.20);
  --night-72:rgba(11,18,32,.72);

  --g-hero-veil:linear-gradient(180deg,rgba(11,18,32,.35) 0%,rgba(11,18,32,.70) 55%,#0B1220 100%);
  --g-amber-glow:radial-gradient(60% 55% at 50% 38%,rgba(255,176,32,.34) 0%,rgba(255,176,32,.08) 45%,transparent 72%);
  --g-ribbon:linear-gradient(120deg,#FFB020 0%,#22D3B6 100%);
  --g-wire:linear-gradient(180deg,#FFB020 0%,#22D3B6 100%);
  --g-panel-sheen:linear-gradient(180deg,rgba(247,243,234,.06) 0%,rgba(247,243,234,0) 40%);
  --g-glass:linear-gradient(180deg,rgba(20,28,46,.72) 0%,rgba(20,28,46,.56) 100%);

  --r-sm:10px;
  --r-md:16px;
  --r-lg:24px;
  --r-xl:32px;
  --r-pill:999px;

  --shadow-card:inset 0 1px 0 rgba(247,243,234,.05),0 24px 48px -24px rgba(0,0,0,.65);
  --shadow-card-hover:inset 0 1px 0 rgba(247,243,234,.08),0 32px 64px -28px rgba(0,0,0,.7),0 0 0 1px rgba(255,176,32,.28),0 24px 64px -24px rgba(255,176,32,.30);

  --s-1:4px;  --s-2:8px;  --s-3:12px; --s-4:16px; --s-5:24px;
  --s-6:32px; --s-7:48px; --s-8:64px; --s-9:96px; --s-10:128px;
  --section-y:clamp(64px,10vw,128px);
  --gutter:clamp(20px,5vw,40px);
  --container:1200px;
  --container-narrow:760px;

  --font-head:"Space Grotesk",system-ui,sans-serif;
  --font-body:"Inter",system-ui,sans-serif;

  --fs-display:clamp(2.75rem,1.55rem + 5vw,5.25rem);
  --fs-h2:clamp(2.125rem,1.45rem + 2.8vw,3.5rem);
  --fs-h3:clamp(1.5rem,1.3rem + .8vw,1.875rem);
  --fs-lead:clamp(1.25rem,1.15rem + .55vw,1.5rem);
  --fs-body:clamp(1.125rem,1.07rem + .3vw,1.25rem);
  --fs-small:1.125rem;
  --fs-eyebrow:1rem;
  --fs-price:clamp(2.5rem,1.8rem + 3vw,4rem);

  --lh-tight:1.02;
  --lh-head:1.1;
  --lh-body:1.6;
  --ls-display:-0.03em;
  --ls-head:-0.02em;
  --ls-eyebrow:0.12em;

  --ease-out:cubic-bezier(.22,1,.36,1);
  --ease-soft:cubic-bezier(.4,0,.2,1);
  --dur-fast:200ms;
  --dur-base:420ms;
  --dur-slow:900ms;

  --nav-h:72px;
  --knob-travel:24px;
}
@media (min-width:900px){
  :root{--knob-travel:32px}
}

/* ---------- 2. Reset and base ---------- */
*,*::before,*::after{box-sizing:border-box}
html{
  background:var(--night);
  color:var(--cream);
  -webkit-text-size-adjust:100%;
  text-size-adjust:100%;
  scrollbar-color:var(--panel) var(--night);
  scroll-padding-top:88px;
  scroll-behavior:smooth;
}
body{
  margin:0;
  min-height:100vh;
  background:var(--night);
  color:var(--cream);
  font-family:var(--font-body);
  font-weight:400;
  font-size:var(--fs-body);
  line-height:var(--lh-body);
  -webkit-font-smoothing:antialiased;
  -moz-osx-font-smoothing:grayscale;
  text-rendering:optimizeLegibility;
  overflow-x:hidden;
}
html.nav-open,html.nav-open body,body.nav-open{overflow:hidden}
img,video,svg,picture{display:block;max-width:100%}
img,video{height:auto}
h1,h2,h3,h4,p,ul,ol,figure,blockquote{margin:0}
ul[role="list"],ol[role="list"]{list-style:none;padding:0}
a{color:inherit;text-decoration-thickness:1px;text-underline-offset:3px}
button{font:inherit;color:inherit;cursor:pointer}
main{display:block}
#main{position:relative}
[hidden]{display:none!important}

h1,h2,h3,h4{
  font-family:var(--font-head);
  font-weight:600;
  line-height:var(--lh-head);
  letter-spacing:var(--ls-head);
  color:var(--cream);
  text-wrap:balance;
}

::selection{background:var(--amber);color:var(--night)}

:focus{outline:none}
:focus-visible{
  outline:3px solid var(--teal);
  outline-offset:3px;
  border-radius:4px;
}

.visually-hidden{
  position:absolute!important;
  width:1px;height:1px;
  padding:0;margin:-1px;
  overflow:hidden;
  clip:rect(0 0 0 0);
  clip-path:inset(50%);
  white-space:nowrap;
  border:0;
}

.skip-link{
  position:fixed;
  top:12px;left:12px;
  z-index:100;
  padding:12px 20px;
  background:var(--amber);
  color:var(--night);
  font-weight:600;
  border-radius:var(--r-pill);
  text-decoration:none;
  transform:translateY(-200%);
  opacity:0;
}
.skip-link:focus,.skip-link:focus-visible{transform:none;opacity:1}

/* ---------- 3. Layout ---------- */
.container{
  width:100%;
  max-width:var(--container);
  margin-inline:auto;
  padding-inline:var(--gutter);
}
.container--narrow{max-width:var(--container-narrow)}
.container.container--narrow{max-width:calc(var(--container-narrow) + var(--gutter) * 2)}
.section-head.container--narrow,.section-head{
  max-width:var(--container-narrow);
  margin-inline:0;
  padding-inline:0;
  margin-bottom:var(--s-7);
}
.section{padding-block:var(--section-y);position:relative}

/* ---------- 4. Type helpers ---------- */
.eyebrow{
  font-family:var(--font-body);
  font-weight:700;
  font-size:var(--fs-eyebrow);
  line-height:1.4;
  letter-spacing:var(--ls-eyebrow);
  text-transform:uppercase;
  color:var(--amber);
  margin:0 0 var(--s-4);
}
.section-title{
  font-size:var(--fs-h2);
  line-height:var(--lh-head);
  letter-spacing:var(--ls-head);
  margin:0 0 var(--s-4);
}
.lead{
  font-size:var(--fs-lead);
  line-height:1.5;
  color:var(--grey);
  max-width:62ch;
}
.body{font-size:var(--fs-body);line-height:var(--lh-body);color:var(--cream);max-width:62ch}
.body--grey{color:var(--grey)}

.badge{
  display:inline-flex;
  align-items:center;
  height:30px;
  padding:0 12px;
  border-radius:var(--r-pill);
  background:var(--amber-12);
  border:1px solid var(--amber-40);
  color:var(--amber);
  font-weight:700;
  font-size:var(--fs-eyebrow);
  letter-spacing:var(--ls-eyebrow);
  text-transform:uppercase;
  line-height:1;
}

.link-arrow{
  display:inline-flex;
  align-items:center;
  gap:8px;
  color:var(--cream);
  font-weight:600;
  font-size:var(--fs-small);
  text-decoration:none;
}
.link-arrow .btn__arrow{transition:transform var(--dur-fast) var(--ease-out)}

/* ---------- 5. Buttons ---------- */
.btn{
  position:relative;
  isolation:isolate;
  display:inline-flex;
  align-items:center;
  justify-content:center;
  gap:8px;
  height:56px;
  padding:0 28px;
  border-radius:var(--r-pill);
  font-family:var(--font-body);
  font-weight:600;
  font-size:1.125rem;
  line-height:1;
  text-decoration:none;
  white-space:nowrap;
  border:1px solid transparent;
  cursor:pointer;
  transition:transform var(--dur-fast) var(--ease-out),border-color var(--dur-fast) var(--ease-soft),background-color var(--dur-fast) var(--ease-soft);
}
.btn__arrow{display:inline-block;transition:transform var(--dur-fast) var(--ease-out)}
.btn--primary{background:var(--amber);color:var(--night)}
.btn--primary::after{
  content:"";
  position:absolute;
  inset:6px 10px;
  z-index:-1;
  border-radius:inherit;
  background:var(--amber);
  filter:blur(18px);
  opacity:0;
  transition:opacity var(--dur-base) var(--ease-out);
  pointer-events:none;
}
.btn--secondary{background:transparent;color:var(--cream);border-color:var(--cream-25)}
.btn--nav,.btn--sm{height:48px;padding:0 22px}
.btn--block{display:flex;width:100%}
.btn:focus-visible{outline:3px solid var(--teal);outline-offset:3px;border-radius:var(--r-pill)}

@media (hover:hover){
  .btn:hover{transform:translateY(-1px)}
  .btn:hover .btn__arrow{transform:translateX(3px)}
  .btn--primary:hover::after{opacity:.7}
  .btn--secondary:hover{border-color:var(--amber-40)}
  a:hover > .link-arrow .btn__arrow,.link-arrow:hover .btn__arrow{transform:translateX(4px)}
}
.btn:active{transform:translateY(0)}

/* ---------- 6. Logo lockup (never animated, never filtered) ---------- */
.logo{
  display:inline-flex;
  align-items:center;
  gap:12px;
  text-decoration:none;
  color:var(--cream);
  flex:none;
}
.logo__tile{
  display:grid;
  place-items:center;
  width:44px;
  height:44px;
  flex:none;
  border-radius:var(--r-sm);
  background:var(--cream);
}
.logo__tile svg{display:block}
.logo__word{
  font-family:var(--font-head);
  font-weight:600;
  font-size:20px;
  line-height:1;
  letter-spacing:-0.01em;
  color:var(--cream);
  white-space:nowrap;
}

/* ---------- 7. Nav ---------- */
.nav{
  position:fixed;
  top:0;left:0;right:0;
  z-index:50;
  height:var(--nav-h);
  transition:height 300ms var(--ease-soft);
}
/* Glass lives on a pseudo so the fixed mobile sheet is not trapped by backdrop-filter. */
.nav::before{
  content:"";
  position:absolute;
  inset:0;
  background:var(--night-72);
  -webkit-backdrop-filter:blur(14px) saturate(140%);
  backdrop-filter:blur(14px) saturate(140%);
  border-bottom:1px solid var(--cream-08);
  opacity:0;
  transition:opacity 300ms var(--ease-soft);
  pointer-events:none;
}
@supports not ((backdrop-filter:blur(1px)) or (-webkit-backdrop-filter:blur(1px))){
  .nav::before{background:rgba(11,18,32,.96)}
}
.nav.is-scrolled{height:64px}
.nav.is-scrolled::before{opacity:1}

.nav__inner{
  position:relative;
  z-index:2;
  height:100%;
  display:flex;
  align-items:center;
  justify-content:space-between;
  gap:var(--s-5);
}
.nav__links{display:none}
.nav__list{display:flex;gap:var(--s-6);list-style:none;margin:0;padding:0}
.nav__link,.nav__login{
  font-weight:500;
  font-size:1.125rem;
  color:var(--grey);
  text-decoration:none;
  transition:color var(--dur-fast) var(--ease-soft);
}
.nav__link:hover,.nav__login:hover,.nav__link[aria-current="page"]{color:var(--cream)}
.nav__actions{display:none;align-items:center;gap:var(--s-5)}

.nav__burger{
  position:relative;
  width:48px;
  height:48px;
  margin-right:-8px;
  padding:0;
  background:transparent;
  border:0;
  border-radius:var(--r-sm);
  flex:none;
}
.nav__burger-line{
  position:absolute;
  left:13px;
  width:22px;
  height:2px;
  border-radius:2px;
  background:var(--cream);
  transition:transform 260ms var(--ease-out),opacity 200ms var(--ease-soft);
}
.nav__burger-line:nth-child(1){top:16px}
.nav__burger-line:nth-child(2){top:23px}
.nav__burger-line:nth-child(3){top:30px}
.nav__burger[aria-expanded="true"] .nav__burger-line:nth-child(1){transform:translateY(7px) rotate(45deg)}
.nav__burger[aria-expanded="true"] .nav__burger-line:nth-child(2){opacity:0;transform:scaleX(.4)}
.nav__burger[aria-expanded="true"] .nav__burger-line:nth-child(3){transform:translateY(-7px) rotate(-45deg)}

.nav-sheet{
  position:fixed;
  inset:0;
  z-index:1;
  background:var(--night);
  padding-top:calc(var(--nav-h) + var(--s-6));
  padding-bottom:var(--s-6);
  overflow-y:auto;
}
.nav-sheet:not([hidden]){animation:sheet-in 260ms var(--ease-out) both}
@keyframes sheet-in{
  from{opacity:0;transform:translateY(-8px)}
  to{opacity:1;transform:none}
}
.nav-sheet__inner{
  display:flex;
  flex-direction:column;
  min-height:100%;
  gap:var(--s-5);
}
.nav-sheet__list{list-style:none;margin:0;padding:0;display:flex;flex-direction:column}
.nav-sheet__link{
  display:block;
  padding:14px 0;
  font-family:var(--font-head);
  font-weight:600;
  font-size:28px;
  line-height:1.2;
  letter-spacing:var(--ls-head);
  color:var(--cream);
  text-decoration:none;
  border-bottom:1px solid var(--cream-08);
}
.nav-sheet__link[aria-current="page"]{color:var(--amber)}
.nav-sheet__login{color:var(--grey);font-weight:500;font-size:1.125rem;text-decoration:none;padding:8px 0}
.nav-sheet__login:hover{color:var(--cream)}
.nav-sheet__cta{margin-top:auto}

@media (min-width:900px){
  .nav__links{display:block;position:absolute;left:50%;transform:translateX(-50%)}
  .nav__actions{display:flex}
  .nav__burger,.nav-sheet{display:none!important}
}

/* ---------- 8. Glass ---------- */
.glass{
  position:relative;
  background:var(--g-panel-sheen),var(--g-glass);
  border:1px solid var(--cream-14);
  box-shadow:var(--shadow-card);
  -webkit-backdrop-filter:blur(18px) saturate(140%);
  backdrop-filter:blur(18px) saturate(140%);
}
@supports not ((backdrop-filter:blur(1px)) or (-webkit-backdrop-filter:blur(1px))){
  .glass{background:var(--g-panel-sheen),#141C2E}
}

/* ---------- 9. Reveal ---------- */
.js [data-reveal]{
  opacity:0;
  translate:0 18px;
  transition:
    opacity 600ms var(--ease-out) calc(var(--i,0) * 70ms),
    translate 600ms var(--ease-out) calc(var(--i,0) * 70ms),
    var(--t-extra,visibility 0s);
}
.js [data-reveal].is-in{opacity:1;translate:none}
.js [data-reveal] [data-reveal-child]{
  opacity:0;
  translate:0 18px;
  transition:
    opacity 600ms var(--ease-out) calc(var(--i,0) * 70ms),
    translate 600ms var(--ease-out) calc(var(--i,0) * 70ms),
    var(--t-extra,visibility 0s);
}
.js [data-reveal].is-in [data-reveal-child]{opacity:1;translate:none}

/* ---------- 10. Hero ---------- */
.hero{
  position:relative;
  isolation:isolate;
  overflow:hidden;
  min-height:100vh;
  min-height:100svh;
  display:flex;
  align-items:flex-end;
  padding-top:calc(var(--nav-h) + var(--s-6));
  padding-bottom:var(--s-9);
  background:var(--night);
}
.hero__media{
  position:absolute;
  inset:-160px 0 0 0;
  z-index:-4;
  overflow:hidden;
  transform:translate3d(0,var(--py,0px),0);
  will-change:transform;
}
.hero__media picture{display:block;width:100%;height:100%}
.hero__poster,.hero__media video{
  position:absolute;
  inset:0;
  width:100%;
  height:100%;
  object-fit:cover;
  object-position:65% 60%;
}
.hero__media video{opacity:0;transition:opacity 900ms var(--ease-soft)}
.hero__media video.is-ready,.hero__media video.is-playing{opacity:1}

.hero__veil{position:absolute;inset:0;z-index:-3;background:var(--g-hero-veil);pointer-events:none}
.hero__glow{
  position:absolute;
  inset:0;
  z-index:-2;
  background:var(--g-amber-glow);
  background-size:140% 120%;
  background-position:70% 30%;
  opacity:1;
  pointer-events:none;
}
.hero__noise{
  position:absolute;
  inset:0;
  z-index:-1;
  background:url("/img/noise.png") repeat;
  background-size:256px 256px;
  pointer-events:none;
}
.hero__inner{position:relative;z-index:1;width:100%}
.hero__content{max-width:640px}

.hero__switch{margin-bottom:var(--s-5)}
.hero__switch-track{
  position:relative;
  display:block;
  width:56px;
  height:32px;
  border-radius:var(--r-pill);
  background:var(--panel);
  border:1px solid var(--cream-14);
}
.hero__switch-track::after{
  content:"";
  position:absolute;
  inset:-1px;
  border-radius:inherit;
  border:1px solid var(--amber-40);
  opacity:1;
  pointer-events:none;
}
.hero__knob{
  position:absolute;
  top:3px;
  left:3px;
  width:24px;
  height:24px;
  transform:translateX(var(--knob-travel));
}
.hero__knob-off,.hero__knob-on{position:absolute;inset:0;border-radius:50%}
.hero__knob-off{background:var(--grey);opacity:0}
.hero__knob-on{background:var(--amber);opacity:1}

.hero__eyebrow{margin-bottom:var(--s-4)}
.hero__title{
  font-size:var(--fs-display);
  line-height:var(--lh-tight);
  letter-spacing:var(--ls-display);
  margin:0 0 var(--s-5);
  color:var(--cream);
}
.glow-word{
  position:relative;
  display:inline-block;
  white-space:nowrap;
  color:var(--amber);
}
.glow-word::after{
  content:attr(data-text);
  content:attr(data-text) / "";
  position:absolute;
  left:0;top:0;
  color:var(--amber);
  text-shadow:0 0 40px var(--amber-40);
  opacity:1;
  pointer-events:none;
}
.hero__lead{color:var(--cream);margin-bottom:var(--s-6);max-width:36ch}
.hero__actions{display:flex;flex-direction:column;gap:var(--s-3)}
.hero__actions .btn{width:100%}

@media (min-width:600px){
  .hero__actions{flex-direction:row;flex-wrap:wrap;gap:var(--s-4)}
  .hero__actions .btn{width:auto}
}
@media (min-width:900px){
  .hero{min-height:92vh;align-items:center;padding-bottom:var(--s-9)}
  .hero__content{max-width:calc(7 / 12 * 100%)}
  .hero__switch-track{width:72px;height:40px}
  .hero__knob{top:5px;left:5px;width:28px;height:28px}
  .hero__lead{max-width:40ch}
}

/* Intro: CSS driven so the page always ends in the on state. */
.js:not(.is-flicked) .hero__knob{animation:knob-on 320ms var(--ease-out) 250ms both}
.js:not(.is-flicked) .hero__knob-on{animation:fade-in 320ms var(--ease-out) 250ms both}
.js:not(.is-flicked) .hero__knob-off{animation:fade-out 320ms var(--ease-out) 250ms both}
.js:not(.is-flicked) .hero__switch-track::after{animation:fade-in 320ms var(--ease-out) 250ms both}
.js:not(.is-flicked) .hero__glow{
  animation:glow-on 900ms var(--ease-soft) 520ms both,breathe 7s ease-in-out 1420ms infinite;
}
.js:not(.is-flicked) .glow-word::after{animation:fade-in 400ms var(--ease-soft) 520ms both}
.js:not(.is-flicked) .hero__eyebrow{animation:rise 500ms var(--ease-out) 600ms both}
.js:not(.is-flicked) .hero__title{animation:rise 600ms var(--ease-out) 680ms both}
.js:not(.is-flicked) .hero__lead{animation:rise 600ms var(--ease-out) 800ms both}
.js:not(.is-flicked) .hero__actions .btn{animation:rise-t 600ms var(--ease-out) calc(920ms + var(--i,0) * 80ms) both}
.js:not(.is-flicked) [data-intro="trust"]{animation:rise-t 600ms var(--ease-out) 1500ms both}

@keyframes glow-on{
  0%  {opacity:0}
  18% {opacity:.55}
  28% {opacity:.18}
  42% {opacity:.85}
  55% {opacity:.5}
  70% {opacity:.95}
  100%{opacity:1}
}
@keyframes breathe{
  0%,100%{opacity:1}
  50%{opacity:.86}
}
@keyframes knob-on{
  from{transform:translateX(0)}
  to  {transform:translateX(var(--knob-travel))}
}
@keyframes rise{
  from{opacity:0;transform:translateY(22px)}
  to  {opacity:1;transform:none}
}
/* Same motion on the individual translate property, so hover transforms still work after. */
@keyframes rise-t{
  from{opacity:0;translate:0 22px}
  to  {opacity:1;translate:none}
}
@keyframes fade-in{from{opacity:0}to{opacity:1}}
@keyframes fade-out{from{opacity:1}to{opacity:0}}

/* ---------- 11. Scroll wire ---------- */
.wire{
  display:none;
  position:absolute;
  z-index:3;
  left:calc(var(--gutter) - 2px);
  top:var(--wire-top,0px);
  height:var(--wire-h,0px);
  width:2px;
  pointer-events:none;
}
@media (min-width:900px){
  .wire{display:block}
}
@media (min-width:1200px){
  .wire{left:max(calc(var(--gutter) / 2), calc((100vw - var(--container)) / 2 - 40px))}
}
.wire__track,.wire__fill{position:absolute;inset:0;border-radius:2px}
.wire__track{background:var(--cream-08)}
.wire__fill{
  background:var(--g-wire);
  transform-origin:top;
  transform:scaleY(var(--wire-p,0));
  will-change:transform;
}
/* Head is a full height carrier so translateY(100%) equals the wire height. Dot sits at its top. */
.wire__head{
  position:absolute;
  left:0;top:0;
  width:2px;
  height:100%;
  transform:translateY(calc(var(--wire-p,0) * 100%));
  will-change:transform;
}
.wire__head::before,.wire__head::after{
  content:"";
  position:absolute;
  left:50%;
  top:0;
  border-radius:50%;
  background:var(--amber);
}
.wire__head::before{width:10px;height:10px;transform:translate(-50%,-50%);z-index:1}
.wire__head::after{width:28px;height:28px;transform:translate(-50%,-50%);filter:blur(8px);opacity:.5}
.wire__node{
  position:absolute;
  left:50%;
  top:var(--node-y,0px);
  width:14px;
  height:14px;
  transform:translate(-50%,-50%);
  border-radius:50%;
  background:var(--night);
  border:2px solid var(--cream-14);
  transition:border-color 300ms var(--ease-soft);
}
.wire__node-dot{
  position:absolute;
  left:50%;top:50%;
  width:6px;height:6px;
  margin:-3px 0 0 -3px;
  border-radius:50%;
  background:var(--amber);
  opacity:0;
  transition:opacity 300ms var(--ease-soft);
}
.wire__node.is-lit{border-color:var(--amber)}
.wire__node.is-lit .wire__node-dot{opacity:1}

/* ---------- 12. Trust strip ---------- */
.trust{position:relative;z-index:2;padding-top:var(--s-5)}
.trust__card{border-radius:var(--r-lg);padding:var(--s-5)}
.trust__list{
  display:grid;
  grid-template-columns:repeat(2,minmax(0,1fr));
  gap:var(--s-4);
  list-style:none;
  margin:0;padding:0;
}
.trust__item{display:flex;flex-direction:column;gap:var(--s-3);min-width:0}
.trust__visual{
  display:flex;
  align-items:center;
  justify-content:center;
  width:44px;
  height:44px;
  flex:none;
  border-radius:var(--r-sm);
}
.trust__visual--pin,.trust__visual--price{background:var(--amber-12)}
.trust__visual--ai{background:var(--teal-20)}
.trust__visual--faces{width:auto;justify-content:flex-start}
.trust__face{
  width:48px;
  height:48px;
  border-radius:50%;
  border:2px solid var(--night);
  object-fit:cover;
  background:var(--panel);
}
.trust__face + .trust__face{margin-left:-12px}
.trust__text{display:flex;flex-direction:column;gap:2px;min-width:0}
.trust__label{font-weight:600;font-size:1.125rem;line-height:1.35;color:var(--cream)}
.trust__line{font-size:1.125rem;line-height:1.45;color:var(--grey)}

@media (min-width:900px){
  .trust{margin-top:-48px;padding-top:0}
  .trust__list{grid-template-columns:repeat(4,minmax(0,1fr));gap:var(--s-5)}
  .trust__item{flex-direction:row;align-items:flex-start;gap:var(--s-4)}
  .trust__item + .trust__item{border-left:1px solid var(--cream-08);padding-left:var(--s-5)}
}

/* ---------- 13. Card hover shared (tiles, steps, offer) ---------- */
.tile,.step,.offer__card{
  --t-extra:transform 240ms var(--ease-out),border-color 240ms var(--ease-out);
  transition:transform 240ms var(--ease-out),border-color 240ms var(--ease-out);
}
.tile::after,.step::after,.offer__card::after{
  content:"";
  position:absolute;
  inset:-1px;
  border-radius:inherit;
  box-shadow:var(--shadow-card-hover);
  opacity:0;
  transition:opacity 240ms var(--ease-out);
  pointer-events:none;
  z-index:-1;
}
.tile::before,.step::before{
  content:"";
  position:absolute;
  inset:0;
  border-radius:inherit;
  background:radial-gradient(360px circle at var(--mx,50%) var(--my,50%),rgba(255,176,32,.14),transparent 70%);
  opacity:0;
  transition:opacity 240ms var(--ease-out);
  pointer-events:none;
  z-index:0;
}
@media (hover:hover){
  .tile:hover,.step:hover,.offer__card:hover{transform:translateY(-4px);border-color:var(--amber-40)}
  .tile:hover::after,.step:hover::after,.offer__card:hover::after,
  .tile:hover::before,.step:hover::before{opacity:1}
  .tile:active,.step:active{transform:translateY(-2px)}
}
.tile:focus-visible{outline:3px solid var(--teal);outline-offset:3px;border-radius:var(--r-lg)}
@media (hover:none){
  .tile::before,.step::before{display:none}
}

/* ---------- 14. Bento ---------- */
.bento__grid{display:grid;gap:16px}
.tile{
  position:relative;
  isolation:isolate;
  display:grid;
  grid-template-rows:auto 1fr auto;
  grid-template-areas:"name" "art" "content";
  gap:var(--s-4);
  padding:28px;
  min-width:0;
  aspect-ratio:4/3;
  background:var(--panel);
  border:1px solid var(--cream-08);
  border-radius:var(--r-lg);
  box-shadow:var(--shadow-card);
  color:var(--cream);
  text-decoration:none;
}
.tile--google{aspect-ratio:4/5}
.tile > *{position:relative;z-index:1}
.tile__name{grid-area:name;margin:0}
.tile__art{
  grid-area:art;
  position:relative;
  min-height:180px;
  border-radius:var(--r-md);
  overflow:hidden;
  isolation:isolate;
  background:var(--night);
  transform:translate3d(0,var(--py,0px),0);
}
.tile__art img,.tile__art video{
  position:absolute;
  inset:0;
  width:100%;
  height:100%;
  object-fit:cover;
  border-radius:inherit;
}
.tile__art video{z-index:1;opacity:0;transition:opacity 900ms var(--ease-soft)}
.tile__art video.is-ready,.tile__art video.is-playing{opacity:1}
.tile__art::after{
  content:"";
  position:absolute;
  inset:0;
  z-index:2;
  background:linear-gradient(180deg,transparent 58%,var(--night-72) 100%);
  pointer-events:none;
}
.tile__pill{
  position:absolute;
  z-index:3;
  top:12px;
  right:12px;
  display:inline-flex;
  align-items:center;
  height:30px;
  padding:0 12px;
  border-radius:var(--r-pill);
  background:var(--teal);
  color:var(--night);
  font-weight:700;
  font-size:var(--fs-eyebrow);
  line-height:1;
}
.tile__content{grid-area:content;display:flex;flex-direction:column;gap:var(--s-2)}
.tile__title{font-size:var(--fs-h3);line-height:var(--lh-head);letter-spacing:var(--ls-head)}
.tile__body{margin-bottom:var(--s-2)}
.tile__link{margin-top:auto}
.tile--helper{grid-template-rows:auto auto 1fr;grid-template-areas:"name" "content" "art"}

@media (min-width:900px){
  .bento__grid{
    grid-template-columns:repeat(6,1fr);
    grid-auto-rows:minmax(240px,auto);
    gap:20px;
  }
  .tile{aspect-ratio:auto}
  .tile--google{grid-column:1 / 5;grid-row:1 / 3}
  .tile--enquiries{grid-column:5 / 7;grid-row:1 / 2}
  .tile--timesavers{grid-column:5 / 7;grid-row:2 / 3}
  .tile--helper{
    grid-column:1 / 7;
    grid-row:3 / 4;
    min-height:260px;
    grid-template-columns:minmax(0,1fr) minmax(0,1fr);
    grid-template-rows:auto 1fr;
    grid-template-areas:"name art" "content art";
    column-gap:var(--s-7);
  }
  .tile--google .tile__art{min-height:280px}
  .tile--enquiries .tile__art,.tile--timesavers .tile__art{min-height:160px}
  .tile--helper .tile__art{min-height:240px}
  .tile--helper .tile__content{align-self:end}
}

/* ---------- 15. Demo ---------- */
.demo{isolation:isolate}
.demo__layout{display:grid;gap:var(--s-7);align-items:center}
.demo__intro{max-width:62ch}
.demo__caption{
  display:flex;
  align-items:center;
  flex-wrap:wrap;
  gap:var(--s-3);
  margin:var(--s-5) 0 var(--s-6);
  color:var(--cream);
  font-size:1.125rem;
}
.demo__stage{position:relative}
.demo__stage::before{
  content:"";
  position:absolute;
  inset:-25% -30%;
  z-index:-1;
  background:var(--g-amber-glow);
  opacity:.6;
  pointer-events:none;
}

.phone{
  display:flex;
  flex-direction:column;
  width:100%;
  max-width:440px;
  min-height:560px;
  margin-inline:auto;
  border-radius:var(--r-xl);
  overflow:hidden;
}
.phone__status{
  flex:none;
  height:48px;
  display:flex;
  align-items:center;
  justify-content:space-between;
  gap:var(--s-3);
  padding:0 20px;
  border-bottom:1px solid var(--cream-08);
}
.phone__name{font-weight:600;font-size:1.125rem;color:var(--cream);white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.phone__badge{display:inline-flex;align-items:center;gap:8px;font-size:1.125rem;color:var(--grey);white-space:nowrap}
.phone__dot{width:8px;height:8px;border-radius:50%;background:var(--teal)}
.phone__transcript{
  flex:1 1 auto;
  min-height:220px;
  overflow-y:auto;
  overscroll-behavior:contain;
  padding:20px;
  scroll-behavior:smooth;
  scrollbar-width:thin;
}
.phone__log,.phone__transcript noscript{display:flex;flex-direction:column;gap:var(--s-3)}

.bubble{
  display:flex;
  flex-direction:column;
  gap:4px;
  max-width:88%;
  padding:12px 16px;
  border-radius:var(--r-md);
  animation:bubble-in 260ms var(--ease-out) both;
}
.bubble--ai{
  align-self:flex-start;
  background:var(--panel);
  border-left:3px solid var(--amber);
  border-bottom-left-radius:4px;
}
.bubble--caller{
  align-self:flex-end;
  background:var(--cream-14);
  border-bottom-right-radius:4px;
}
.bubble__tag{
  font-weight:700;
  font-size:var(--fs-eyebrow);
  line-height:1.3;
  letter-spacing:var(--ls-eyebrow);
  text-transform:uppercase;
}
.bubble--ai .bubble__tag{color:var(--amber)}
.bubble--caller .bubble__tag{color:var(--grey)}
.bubble__text{font-size:1.125rem;line-height:var(--lh-body);color:var(--cream);margin:0}
.bubble--thinking{flex-direction:row;align-items:center;gap:6px;padding:16px 18px}
.bubble--thinking .bubble__tag{margin-right:6px}
.bubble__dot{
  width:8px;height:8px;
  border-radius:50%;
  background:var(--grey);
  animation:dot-pulse 900ms ease-in-out infinite;
}
.bubble__dot:nth-of-type(2){animation-delay:150ms}
.bubble__dot:nth-of-type(3){animation-delay:300ms}
@keyframes bubble-in{
  from{opacity:0;transform:translateY(8px)}
  to{opacity:1;transform:none}
}
@keyframes dot-pulse{
  0%,100%{opacity:.3}
  50%{opacity:1}
}

.wave{
  flex:none;
  height:72px;
  display:flex;
  align-items:center;
  justify-content:center;
  gap:4px;
  border-top:1px solid var(--cream-08);
}
.wave__bar{
  position:relative;
  display:block;
  width:3px;
  height:calc(52px * var(--peak,1));
  border-radius:2px;
  transform-origin:center;
  transform:scaleY(.18);
  opacity:.5;
  transition:transform 500ms var(--ease-soft),opacity 500ms var(--ease-soft);
}
.wave__fill{position:absolute;inset:0;border-radius:2px;transition:opacity 200ms var(--ease-soft)}
.wave__fill--amber{background:var(--amber);opacity:1}
.wave__fill--teal{background:var(--teal);opacity:0}
.wave.is-speaking .wave__bar{
  opacity:1;
  will-change:transform;
  animation:wave var(--d,720ms) ease-in-out infinite;
  animation-delay:var(--delay,0ms);
}
.wave.is-caller .wave__bar{transform:scaleY(.3);opacity:1}
.wave.is-caller .wave__fill--amber{opacity:0}
.wave.is-caller .wave__fill--teal{opacity:1}
@keyframes wave{
  0%,100%{transform:scaleY(.18)}
  50%    {transform:scaleY(1)}
}

.phone__controls{
  flex:none;
  display:flex;
  flex-direction:column;
  align-items:center;
  justify-content:center;
  gap:var(--s-2);
  min-height:80px;
  padding:var(--s-4) 20px var(--s-2);
}
.demo__play{
  position:relative;
  isolation:isolate;
  display:grid;
  place-items:center;
  width:64px;
  height:64px;
  padding:0;
  border:0;
  border-radius:50%;
  background:var(--amber);
  transition:transform var(--dur-fast) var(--ease-out);
}
.demo__play::after{
  content:"";
  position:absolute;
  inset:6px;
  z-index:-1;
  border-radius:50%;
  background:var(--amber);
  filter:blur(16px);
  opacity:0;
  transition:opacity var(--dur-base) var(--ease-out);
}
.demo__play:focus-visible{outline:3px solid var(--teal);outline-offset:3px;border-radius:50%}
@media (hover:hover){
  .demo__play:hover{transform:translateY(-1px)}
  .demo__play:hover::after{opacity:.7}
}
.demo__play:active{transform:scale(.97)}
.demo__icon{grid-area:1 / 1}
.demo__icon--play{transform:translateX(1px)}
.demo__icon--stop{display:none}
.phone[data-state="playing"] .demo__icon--play{display:none}
.phone[data-state="playing"] .demo__icon--stop{display:block}
.demo__label{font-size:1.125rem;color:var(--grey);text-align:center;margin:0}
.phone__footer{
  flex:none;
  padding:var(--s-2) 20px var(--s-4);
  font-size:1.125rem;
  color:var(--grey);
  text-align:center;
}

@media (min-width:900px){
  .demo__layout{grid-template-columns:5fr 7fr;gap:var(--s-8)}
  .phone{aspect-ratio:9/16;max-height:min(72vh,820px)}
}

/* ---------- 16. How it works ---------- */
.how__track{position:relative}
.how__grid{display:grid;gap:16px;list-style:none;margin:0;padding:0}
.step{
  position:relative;
  isolation:isolate;
  display:flex;
  flex-direction:column;
  gap:var(--s-3);
  padding:32px;
  background:var(--panel);
  border:1px solid var(--cream-08);
  border-radius:var(--r-lg);
  box-shadow:var(--shadow-card);
}
.step > *{position:relative;z-index:1}
.step__num{
  display:grid;
  place-items:center;
  width:56px;
  height:56px;
  margin-bottom:var(--s-3);
  border-radius:50%;
  font-family:var(--font-head);
  font-weight:600;
  font-size:28px;
  line-height:1;
  z-index:3;
}
.step--1 .step__num{background:var(--amber);color:var(--night)}
.step--2 .step__num{background:var(--teal);color:var(--night)}
.step--3 .step__num{background:var(--panel);color:var(--cream);border:2px solid var(--amber)}
.step__title{font-size:var(--fs-h3)}
.how__line{display:none}

@media (min-width:900px){
  .how__grid{grid-template-columns:repeat(3,1fr);gap:24px}
  .step{min-height:280px}
  .how__line{
    display:block;
    position:absolute;
    z-index:2;
    top:60px;
    left:60px;
    width:calc((100% - 48px) / 1.5 + 48px);
    height:2px;
    margin-top:-1px;
    background:var(--g-ribbon);
    transform-origin:left center;
    transform:scaleX(1);
    pointer-events:none;
  }
  .js .how__line{transform:scaleX(0);transition:transform 700ms var(--ease-out) 200ms}
  .js .how__track.is-in .how__line{transform:scaleX(1)}
}

/* ---------- 17. Marquee ---------- */
.marquee{
  position:relative;
  height:72px;
  display:flex;
  align-items:center;
  overflow:hidden;
  background:var(--g-ribbon);
  color:var(--night);
  -webkit-mask-image:linear-gradient(90deg,transparent,#000 64px,#000 calc(100% - 64px),transparent);
  mask-image:linear-gradient(90deg,transparent,#000 64px,#000 calc(100% - 64px),transparent);
}
.marquee__track{
  display:flex;
  width:max-content;
  animation:marquee 38s linear infinite;
}
.marquee__list{
  display:flex;
  align-items:center;
  gap:40px;
  padding-right:40px;
  list-style:none;
  margin:0;
}
.marquee__item{
  font-family:var(--font-head);
  font-weight:600;
  font-size:22px;
  line-height:1;
  letter-spacing:var(--ls-eyebrow);
  text-transform:uppercase;
  white-space:nowrap;
}
.marquee__dot{width:10px;height:10px;border-radius:50%;background:var(--night);flex:none}
.marquee:hover .marquee__track,.marquee:focus-within .marquee__track{animation-play-state:paused}
@keyframes marquee{from{transform:translateX(0)}to{transform:translateX(-50%)}}

/* ---------- 18. Founding offer ---------- */
.offer__card{
  position:relative;
  isolation:isolate;
  border-radius:var(--r-xl);
  border-color:var(--amber-25);
  padding:clamp(24px,5vw,40px);
}
.offer__card::before{
  content:"";
  position:absolute;
  left:0;right:0;
  top:-40px;
  height:70%;
  z-index:-1;
  border-radius:inherit;
  background:var(--g-amber-glow);
  opacity:.5;
  transform:translate3d(0,var(--py,0px),0);
  pointer-events:none;
}
.offer__cols{display:grid}
.offer__col{display:flex;flex-direction:column;padding-block:var(--s-5)}
.offer__col:first-child{padding-top:0}
.offer__col--standard{border-top:1px solid var(--cream-14)}
.offer__label{margin-bottom:var(--s-3)}
.offer__col--standard .offer__label{color:var(--cream)}
.offer__price{
  font-family:var(--font-head);
  font-weight:600;
  font-size:var(--fs-price);
  line-height:1;
  letter-spacing:var(--ls-display);
}
.offer__col--founding .offer__price{color:var(--amber)}
.offer__col--standard .offer__price{color:var(--cream)}
.offer__per{font-size:1.125rem;color:var(--grey);margin-top:var(--s-2)}
.offer__note{margin-top:var(--s-4)}
.offer__setup{
  margin-top:var(--s-5);
  padding:var(--s-4) var(--s-5);
  border-radius:var(--r-md);
  background:var(--cream-08);
  border:1px solid var(--cream-08);
  display:flex;
  align-items:baseline;
  justify-content:space-between;
  gap:var(--s-4);
  flex-wrap:wrap;
}
.offer__setup-label{font-weight:600;font-size:1.125rem;color:var(--grey)}
.offer__setup-price{font-family:var(--font-head);font-weight:600;font-size:1.5rem;line-height:1.2;color:var(--cream)}
.offer__col--founding .offer__setup-price{color:var(--amber)}
.offer__footer{
  display:flex;
  flex-direction:column;
  align-items:flex-start;
  gap:var(--s-5);
  margin-top:var(--s-5);
  padding-top:var(--s-6);
  border-top:1px solid var(--cream-14);
}
.offer__ticks{display:grid;gap:var(--s-3);list-style:none;margin:0;padding:0}
.offer__tick{display:flex;align-items:flex-start;gap:var(--s-3);font-size:var(--fs-body);color:var(--cream);line-height:1.5}

.offer__tick-icon{
  flex:none;
  width:24px;
  height:24px;
  margin-top:2px;
}
.offer__small{
  font-size:var(--fs-small);
  line-height:1.55;
  max-width:60ch;
}

@media (min-width:720px){
  .offer__cols{grid-template-columns:1fr 1fr}
  .offer__col{padding-block:0;padding-inline:0 var(--s-6)}
  .offer__col--standard{
    border-top:0;
    border-left:1px solid var(--cream-14);
    padding-inline:var(--s-6) 0;
  }
}
@media (min-width:1000px){
  .offer__footer{
    display:grid;
    grid-template-columns:1fr auto;
    grid-template-areas:"ticks btn" "small small";
    align-items:center;
    column-gap:var(--s-7);
  }
  .offer__ticks{grid-area:ticks}
  .offer__footer > .btn{grid-area:btn}
  .offer__small{grid-area:small}
}

/* ---------- 19. Section shells used by the wire ---------- */
.bento,.how,.offer,.team,.faq{position:relative;isolation:isolate}
.step__body{color:var(--grey);font-size:var(--fs-body);line-height:var(--lh-body)}
.demo__actions{
  display:flex;
  flex-wrap:wrap;
  align-items:center;
  gap:var(--s-4);
  margin-top:var(--s-5);
}
/* Screen reader copy of the transcript. Kept out of sight, never out of the tree. */
.phone__mirror{
  position:absolute!important;
  width:1px;height:1px;
  padding:0;margin:-1px;
  overflow:hidden;
  clip:rect(0 0 0 0);
  clip-path:inset(50%);
  white-space:nowrap;
  border:0;
}

/* Bento art image (video, when added by JS, sits over it) */
.tile__img{
  display:block;
  width:100%;
  height:100%;
  aspect-ratio:1/1;
  object-fit:cover;
  border-radius:var(--r-md);
  background:var(--panel);
}

/* ---------- 20. Team ---------- */
.team__grid{
  display:grid;
  gap:var(--s-6);
}
.person{
  display:flex;
  flex-direction:column;
  gap:var(--s-2);
  padding:var(--s-4);
  background:var(--panel);
  border:1px solid var(--cream-08);
  border-radius:var(--r-lg);
  box-shadow:var(--shadow-card);
}
/* Square file shown square. No crop, no filter, no overlay, no zoom. */
.person__photo{
  display:block;
  width:100%;
  max-width:480px;
  height:auto;
  aspect-ratio:1/1;
  object-fit:contain;
  border-radius:var(--r-md);
  background:var(--night);
  margin-bottom:var(--s-4);
}
.person__name{
  font-size:var(--fs-h3);
  padding-inline:var(--s-2);
}
.person__role{
  padding-inline:var(--s-2);
  color:var(--amber);
  font-weight:600;
  font-size:var(--fs-small);
  line-height:1.4;
}
.person__bio{padding:var(--s-2) var(--s-2) var(--s-3)}

@media (min-width:700px){
  .team__grid{grid-template-columns:1fr 1fr;gap:var(--s-5)}
}
@media (min-width:1000px){
  .team__grid{gap:var(--s-7);max-width:1040px}
  .person{padding:var(--s-5)}
}

/* ---------- 21. FAQ ---------- */
.faq .section-title{margin-bottom:var(--s-6)}
.faq__list{
  display:flex;
  flex-direction:column;
  border-top:1px solid var(--cream-14);
}
.faq__item{border-bottom:1px solid var(--cream-14)}
.faq__summary{
  display:flex;
  align-items:center;
  justify-content:space-between;
  gap:var(--s-5);
  min-height:72px;
  padding:var(--s-4) 0;
  list-style:none;
  cursor:pointer;
  font-family:var(--font-head);
  font-weight:600;
  font-size:clamp(1.25rem,1.15rem + .5vw,1.5rem);
  line-height:1.3;
  letter-spacing:-0.01em;
  color:var(--cream);
  transition:color var(--dur-fast) var(--ease-soft);
}
.faq__summary::-webkit-details-marker{display:none}
.faq__summary::marker{content:""}
.faq__summary:focus-visible{outline-offset:4px;border-radius:var(--r-sm)}
.faq__icon{
  position:relative;
  flex:none;
  width:36px;
  height:36px;
  border-radius:50%;
  border:1px solid var(--cream-25);
  transition:border-color var(--dur-fast) var(--ease-soft),background-color var(--dur-fast) var(--ease-soft);
}
.faq__icon::before,.faq__icon::after{
  content:"";
  position:absolute;
  top:50%;left:50%;
  width:14px;height:2px;
  margin:-1px 0 0 -7px;
  border-radius:2px;
  background:var(--cream);
  transition:transform var(--dur-base) var(--ease-out),opacity var(--dur-base) var(--ease-out);
}
.faq__icon::after{transform:rotate(90deg)}
.faq__item[open] .faq__summary{color:var(--amber)}
.faq__item[open] .faq__icon{border-color:var(--amber-40);background:var(--amber-12)}
.faq__item[open] .faq__icon::before{background:var(--amber)}
.faq__item[open] .faq__icon::after{transform:rotate(0deg);opacity:0}
.faq__answer{padding:0 var(--s-8) var(--s-5) 0}
.faq__item[open] .faq__answer{animation:faq-in 420ms var(--ease-out) both}
@keyframes faq-in{
  from{opacity:0;transform:translateY(-6px)}
  to{opacity:1;transform:none}
}
@media (hover:hover){
  .faq__summary:hover{color:var(--amber)}
  .faq__summary:hover .faq__icon{border-color:var(--amber-40)}
}

/* ---------- 22. Book a chat band ---------- */
.book{
  position:relative;
  isolation:isolate;
  overflow:hidden;
  padding-block:var(--section-y);
  text-align:center;
  border-top:1px solid var(--cream-08);
}
.book::before{
  content:"";
  position:absolute;
  inset:-10% -20% 0;
  z-index:-1;
  background:var(--g-amber-glow);
  opacity:.75;
  pointer-events:none;
}
.book::after{
  content:"";
  position:absolute;
  left:50%;
  top:0;
  width:min(560px,80%);
  height:2px;
  transform:translateX(-50%);
  background:var(--g-ribbon);
  -webkit-mask-image:linear-gradient(90deg,transparent,#000 30%,#000 70%,transparent);
  mask-image:linear-gradient(90deg,transparent,#000 30%,#000 70%,transparent);
  pointer-events:none;
}
.book .container{display:flex;flex-direction:column;align-items:center}
.book__title{font-size:var(--fs-h2);margin-bottom:var(--s-4)}
.book__line{margin-inline:auto;max-width:44ch;font-size:var(--fs-lead);line-height:1.5}
.book__actions{
  display:flex;
  flex-wrap:wrap;
  justify-content:center;
  gap:var(--s-4);
  margin-top:var(--s-6);
}
.book__call{margin-top:var(--s-5);margin-inline:auto}
.book__call a{
  color:var(--cream);
  font-weight:600;
  text-decoration:underline;
  text-decoration-color:var(--amber-40);
  white-space:nowrap;
  transition:color var(--dur-fast) var(--ease-soft),text-decoration-color var(--dur-fast) var(--ease-soft);
}
.book__call a:hover{color:var(--amber);text-decoration-color:var(--amber)}

/* ---------- 23. Footer ---------- */
.footer{
  position:relative;
  padding-block:var(--s-8) var(--s-6);
  background:#080E1A;
  border-top:1px solid var(--cream-08);
  color:var(--grey);
}
.footer__grid{
  display:grid;
  gap:var(--s-7) var(--s-6);
}
.footer__col{min-width:0}
.footer__col--brand{display:flex;flex-direction:column;gap:var(--s-4)}
.footer__blurb{
  font-size:var(--fs-small);
  line-height:1.55;
  color:var(--grey);
  max-width:34ch;
}
.footer__head{
  font-family:var(--font-body);
  font-weight:700;
  font-size:var(--fs-eyebrow);
  line-height:1.4;
  letter-spacing:var(--ls-eyebrow);
  text-transform:uppercase;
  color:var(--cream);
  margin-bottom:var(--s-4);
}
.footer__list{
  list-style:none;
  margin:0;
  padding:0;
  display:flex;
  flex-direction:column;
  gap:var(--s-2);
  font-size:var(--fs-small);
  line-height:1.5;
}
.footer__list a{
  display:inline-block;
  padding-block:4px;
  color:var(--grey);
  text-decoration:none;
  overflow-wrap:anywhere;
  transition:color var(--dur-fast) var(--ease-soft);
}
.footer__list a:hover{color:var(--cream)}
.footer__bottom{
  margin-top:var(--s-8);
  padding-top:var(--s-5);
  border-top:1px solid var(--cream-08);
}
.footer__legal{
  display:flex;
  flex-wrap:wrap;
  align-items:center;
  gap:var(--s-2) var(--s-3);
  font-size:1.0625rem;
  line-height:1.6;
  color:var(--grey);
}
.footer__legal a{color:var(--grey);text-decoration:underline;text-decoration-color:var(--cream-25)}
.footer__legal a:hover{color:var(--cream);text-decoration-color:var(--amber)}
.footer__sep{color:var(--cream-25)}

@media (min-width:600px){
  .footer__grid{grid-template-columns:1fr 1fr}
  .footer__col--brand{grid-column:1 / -1}
}
@media (min-width:1000px){
  .footer__grid{grid-template-columns:1.6fr 1fr 1fr 1.3fr}
  .footer__col--brand{grid-column:auto}
}

/* ---------- 24. Subpage hero ---------- */
.page-hero{
  position:relative;
  isolation:isolate;
  overflow:hidden;
  display:flex;
  align-items:flex-end;
  min-height:min(72vh,620px);
  padding-top:calc(var(--nav-h) + var(--s-8));
  padding-bottom:clamp(48px,8vw,96px);
  background:var(--night);
}
.page-hero__media{
  position:absolute;
  inset:0;
  z-index:0;
}
.page-hero__media picture{width:100%;height:100%}
.page-hero__poster{
  width:100%;
  height:100%;
  object-fit:cover;
  object-position:50% 60%;
}
.page-hero__veil{
  position:absolute;
  inset:0;
  z-index:1;
  background:
    linear-gradient(90deg,rgba(11,18,32,.80) 0%,rgba(11,18,32,.35) 70%,rgba(11,18,32,.2) 100%),
    var(--g-hero-veil);
  pointer-events:none;
}
.page-hero__glow{
  position:absolute;
  z-index:2;
  left:-10%;
  bottom:-30%;
  width:120%;
  height:110%;
  background:var(--g-amber-glow);
  opacity:.55;
  pointer-events:none;
  animation:page-glow-in 1400ms var(--ease-soft) 150ms both;
}
@keyframes page-glow-in{
  from{opacity:0}
  to{opacity:.55}
}
.page-hero .hero__noise{z-index:3;pointer-events:none}
.page-hero__inner{position:relative;z-index:4}
.page-hero__content{max-width:780px}
.page-hero__title{
  font-size:clamp(2.5rem,1.6rem + 3.8vw,4.25rem);
  line-height:1.04;
  letter-spacing:var(--ls-display);
  margin-bottom:var(--s-5);
}
.page-hero__lead{color:#C6CDD6;max-width:56ch}
.page-hero .eyebrow{margin-bottom:var(--s-4)}

@media (min-width:900px){
  .page-hero{min-height:min(64vh,640px)}
  .page-hero__glow{left:-20%;width:90%}
}

/* ---------- 25. Services page ---------- */
.svc{overflow:clip}
.svc + .svc{border-top:1px solid var(--cream-08)}
.svc--flip{background:linear-gradient(180deg,rgba(20,28,46,.0) 0%,rgba(20,28,46,.55) 50%,rgba(20,28,46,0) 100%)}
.svc__inner{
  display:grid;
  gap:var(--s-7);
  align-items:start;
}
.svc__art{
  position:relative;
  isolation:isolate;
  width:100%;
  max-width:560px;
  border-radius:var(--r-lg);
  overflow:hidden;
  border:1px solid var(--cream-08);
  background:var(--panel);
  box-shadow:var(--shadow-card);
}
.svc__art::after{
  content:"";
  position:absolute;
  left:0;right:0;bottom:0;
  height:28%;
  z-index:1;
  background:linear-gradient(180deg,rgba(11,18,32,0) 0%,rgba(11,18,32,.6) 100%);
  pointer-events:none;
}
.svc__img{
  display:block;
  width:100%;
  height:auto;
  aspect-ratio:1/1;
  object-fit:cover;
}
.svc__art .tile__pill{
  position:absolute;
  z-index:2;
  top:var(--s-4);
  right:var(--s-4);
}
.svc__body{display:flex;flex-direction:column;gap:var(--s-4);min-width:0}
.svc__body .eyebrow{margin-bottom:0}
.svc__body .section-title{margin-bottom:var(--s-2)}
.svc__small{font-size:var(--fs-small);line-height:1.55}
.svc__link{margin-top:var(--s-3)}
.svc__link .link-arrow{color:var(--amber)}

/* Tick list */
.ticks{
  display:grid;
  gap:var(--s-3);
  list-style:none;
  margin:var(--s-3) 0 0;
  padding:0;
}
.ticks__item{
  display:flex;
  align-items:flex-start;
  gap:var(--s-3);
  font-size:var(--fs-body);
  line-height:1.5;
  color:var(--cream);
}
.ticks__icon{flex:none;width:24px;height:24px;margin-top:2px}

/* Price rows */
.price-row{
  display:grid;
  gap:var(--s-3);
  margin-top:var(--s-4);
}
.price-row__item{
  display:flex;
  flex-direction:column;
  gap:var(--s-1);
  padding:var(--s-5);
  border-radius:var(--r-md);
  background:var(--panel);
  border:1px solid var(--cream-08);
  box-shadow:var(--shadow-card);
}
.price-row__item--founding{
  border-color:var(--amber-25);
  background:linear-gradient(180deg,rgba(255,176,32,.08) 0%,rgba(255,176,32,0) 60%),var(--panel);
}
.price-row__label{margin-bottom:var(--s-2)}
.price-row__item--standard .price-row__label{color:var(--cream)}
.price-row__price{
  font-family:var(--font-head);
  font-weight:600;
  font-size:clamp(2.25rem,1.8rem + 1.8vw,3rem);
  line-height:1;
  letter-spacing:var(--ls-display);
  color:var(--cream);
}
.price-row__item--founding .price-row__price{color:var(--amber)}
.price-row__per{font-size:var(--fs-small);color:var(--grey);margin-top:var(--s-1)}
.price-row__note{font-size:var(--fs-small);line-height:1.5;margin-top:var(--s-2)}
.price-row__setup{
  display:flex;
  flex-wrap:wrap;
  align-items:baseline;
  justify-content:space-between;
  gap:var(--s-2) var(--s-4);
  margin-top:auto;
  padding-top:var(--s-4);
  border-top:1px solid var(--cream-08);
}
.price-row__note + .price-row__setup{margin-top:var(--s-4)}
.price-row__setup-label{font-weight:600;font-size:var(--fs-small);color:var(--grey)}
.price-row__setup-price{
  font-family:var(--font-head);
  font-weight:600;
  font-size:1.375rem;
  line-height:1.2;
  color:var(--cream);
}
.price-row__item--founding .price-row__setup-price{color:var(--amber)}
.price-row__text{
  font-family:var(--font-head);
  font-weight:500;
  font-size:var(--fs-lead);
  line-height:1.35;
  color:var(--cream);
}

@media (min-width:560px){
  .price-row--split{grid-template-columns:1fr 1fr}
}
@media (min-width:900px){
  .svc__inner{grid-template-columns:minmax(0,5fr) minmax(0,6fr);gap:var(--s-8)}
  .svc--flip .svc__inner{grid-template-columns:minmax(0,6fr) minmax(0,5fr)}
  .svc--flip .svc__art{order:2;justify-self:end}
  .svc__art{position:sticky;top:112px}
}
@media (min-width:900px) and (max-width:1099px){
  .price-row--split{grid-template-columns:1fr}
}

/* ---------- 26. About page ---------- */
.about-bio + .about-bio{border-top:1px solid var(--cream-08)}
.about-bio__inner{
  display:grid;
  gap:var(--s-6);
  align-items:center;
}
.about-bio__media{
  width:100%;
  max-width:480px;
  padding:var(--s-3);
  background:var(--panel);
  border:1px solid var(--cream-08);
  border-radius:var(--r-lg);
  box-shadow:var(--shadow-card);
}
.about-bio__photo{margin-bottom:0}
.about-bio__body{display:flex;flex-direction:column;gap:var(--s-4);min-width:0}
.about-bio__body .eyebrow{margin-bottom:0}
.about-bio__body .section-title{margin-bottom:var(--s-2)}

@media (min-width:900px){
  .about-bio__inner{grid-template-columns:minmax(0,5fr) minmax(0,7fr);gap:var(--s-8)}
  .about-bio--flip .about-bio__inner{grid-template-columns:minmax(0,7fr) minmax(0,5fr)}
  .about-bio--flip .about-bio__media{order:2;justify-self:end}
}

/* Area card */
.pin-block__card{
  border-radius:var(--r-xl);
  padding:clamp(28px,6vw,56px);
  text-align:center;
  overflow:hidden;
  isolation:isolate;
}
.pin-block__card::before{
  content:"";
  position:absolute;
  inset:-30% -10% auto;
  height:80%;
  z-index:-1;
  background:var(--g-amber-glow);
  opacity:.6;
  pointer-events:none;
}
.pin-block__icon{
  display:grid;
  place-items:center;
  width:80px;
  height:80px;
  margin:0 auto var(--s-5);
  border-radius:50%;
  background:var(--amber-12);
  border:1px solid var(--amber-25);
}
.pin-block__card .body{margin-inline:auto}
.pin-block__list{
  display:flex;
  flex-wrap:wrap;
  justify-content:center;
  gap:var(--s-2);
  list-style:none;
  margin:var(--s-6) 0 0;
  padding:0;
}
.pin-block__list li{
  display:inline-flex;
  align-items:center;
  min-height:44px;
  padding:0 var(--s-4);
  border-radius:var(--r-pill);
  background:var(--cream-08);
  border:1px solid var(--cream-14);
  font-size:var(--fs-small);
  line-height:1.2;
  color:var(--cream);
}

/* ---------- 27. Contact page ---------- */
.contact-card{
  border-radius:var(--r-xl);
  padding:clamp(8px,2vw,16px) clamp(24px,5vw,48px);
}
.contact-row{
  display:flex;
  flex-direction:column;
  gap:var(--s-2);
  padding-block:var(--s-6);
}
.contact-row + .contact-row{border-top:1px solid var(--cream-14)}
.contact-row__label{margin-bottom:0}
.contact-row__value{
  font-family:var(--font-head);
  font-weight:600;
  font-size:clamp(1.5rem,1.2rem + 1.3vw,2.25rem);
  line-height:1.2;
  letter-spacing:var(--ls-head);
  color:var(--cream);
  overflow-wrap:anywhere;
}
.contact-row__value a{
  color:var(--cream);
  text-decoration:underline;
  text-decoration-thickness:2px;
  text-underline-offset:6px;
  text-decoration-color:var(--amber-40);
  transition:color var(--dur-fast) var(--ease-soft),text-decoration-color var(--dur-fast) var(--ease-soft);
}
.contact-row__value a:hover{color:var(--amber);text-decoration-color:var(--amber)}
.contact-row__value .link-arrow{
  font-size:inherit;
  text-decoration:none;
  color:var(--cream);
}
.contact-row__value .link-arrow:hover{color:var(--amber)}
.contact-row__note{font-size:var(--fs-body);max-width:56ch}
.contact-row__action{margin-top:var(--s-3)}

@media (max-width:420px){
  .contact-row__action .btn{display:flex;width:100%;white-space:normal;text-align:center;height:auto;min-height:56px;padding-block:14px}
}

/* ---------- 28. Legal pages ---------- */
article.legal,.legal{
  width:100%;
  max-width:calc(var(--container-narrow) + var(--gutter) * 2);
  margin-inline:auto;
  padding:calc(var(--nav-h) + var(--s-8)) var(--gutter) var(--section-y);
  font-size:var(--fs-body);
  line-height:1.7;
  color:#D4D9E0;
}
.legal h1{
  font-size:clamp(2.25rem,1.6rem + 2.6vw,3.25rem);
  line-height:1.08;
  letter-spacing:var(--ls-display);
  margin-bottom:var(--s-6);
  color:var(--cream);
}
.legal h2{
  font-size:clamp(1.5rem,1.3rem + .9vw,2rem);
  margin:var(--s-7) 0 var(--s-4);
  padding-top:var(--s-5);
  border-top:1px solid var(--cream-08);
}
.legal h3{
  font-size:clamp(1.25rem,1.15rem + .5vw,1.5rem);
  margin:var(--s-6) 0 var(--s-3);
}
.legal h4{font-size:1.25rem;margin:var(--s-5) 0 var(--s-2)}
.legal p,.legal ul,.legal ol,.legal table,.legal blockquote{margin:0 0 var(--s-4)}
.legal ul,.legal ol{padding-left:1.4em}
.legal li{margin-bottom:var(--s-2)}
.legal li::marker{color:var(--amber)}
.legal strong{color:var(--cream);font-weight:600}
.legal a{
  color:var(--amber);
  text-decoration:underline;
  text-decoration-thickness:1px;
  text-underline-offset:3px;
  overflow-wrap:anywhere;
}
.legal a:hover{text-decoration-thickness:2px}
.legal blockquote{
  padding:var(--s-4) var(--s-5);
  border-left:3px solid var(--amber);
  background:var(--cream-08);
  border-radius:0 var(--r-sm) var(--r-sm) 0;
}
.legal hr{border:0;border-top:1px solid var(--cream-14);margin:var(--s-7) 0}
.legal table{
  display:block;
  width:100%;
  max-width:100%;
  overflow-x:auto;
  -webkit-overflow-scrolling:touch;
  border-collapse:collapse;
  font-size:var(--fs-small);
  line-height:1.5;
}
.legal th,.legal td{
  min-width:160px;
  padding:var(--s-3) var(--s-4);
  border:1px solid var(--cream-14);
  text-align:left;
  vertical-align:top;
}
.legal th{background:var(--panel);color:var(--cream);font-weight:600}
@media (min-width:760px){
  .legal table{display:table}
}

/* ---------- 29. Reduced motion ---------- */
@media (prefers-reduced-motion:reduce){
  html{scroll-behavior:auto}
  .marquee__track{animation:none;transform:none}
  .page-hero__glow{animation:none;opacity:.55}
  .faq__item[open] .faq__answer{animation:none}
  .faq__icon,.faq__icon::before,.faq__icon::after,
  .faq__summary,.book__call a,.footer__list a,
  .contact-row__value a{transition:none}
  .offer__card::before{transform:none}
  .js .how__line{transform:scaleX(1);transition:none}
  .js [data-reveal],
  .js [data-reveal] [data-reveal-child]{opacity:1;translate:none;transition:none}
  .btn,.btn__arrow,.btn--primary::after,.link-arrow .btn__arrow{transition:none}
  .svc__art{position:relative;top:auto}
}
/* patch */
.hero__noise{opacity:.045;mix-blend-mode:overlay}