/* Hemlock USA: "Daylight / After-hours" (creative/v2/style_lock.json v2).
   Tokens below are a port of creative/v2/hemlock_mockup/tokens.css (generated from the lock); font urls point at /fonts.
   Day hues (amber) = people / business hours. Night hues (indigo, cyan) = AI phone agents. Never decorative. */

@font-face{font-family:"Mona Sans";src:url(/fonts/mona-sans-latin-standard-normal.woff2) format("woff2");font-weight:200 900;font-stretch:75% 125%;font-display:swap}
@font-face{font-family:"Geist Mono";src:url(/fonts/geist-mono-latin-wght-normal.woff2) format("woff2");font-weight:100 900;font-display:swap}
/* metric-matched fallbacks so the swap to Mona Sans does not shift layout (size-adjust from hmtx widths vs Arial) */
@font-face{font-family:"Mona Fallback";src:local("Arial"),local("ArialMT"),local("Helvetica");size-adjust:104.6%;ascent-override:104.2%;descent-override:30.6%;line-gap-override:0%}
@font-face{font-family:"Mona Display Fallback";src:local("Arial Bold"),local("Arial-BoldMT"),local("Helvetica Bold");font-weight:400 900;size-adjust:102.4%;ascent-override:106.4%;descent-override:31.2%;line-gap-override:0%}

:root{
  --c-void:#05060A;--c-deep:#0A0C14;--c-raise:#121521;
  --c-text:#EEF1F7;--c-text-2:#A9B0C0;--c-text-3:#858DA0;
  --c-day:#FFB45E;--c-day-deep:#FF7E4A;--c-night:#8D9AFF;--c-night-cyan:#56D8FF;
  --c-cta-bg:#EEF1F7;--c-cta-ink:#05060A;--c-control-edge:#636B80;--c-error:#FF9C8A;
  --a-glass-fill:rgba(255,255,255,.045);--a-glass-fill-hi:rgba(255,255,255,.075);--a-glass-edge:rgba(255,255,255,.10);
  --a-glass-spec:rgba(255,255,255,.24);--a-rule:rgba(255,255,255,.08);--a-error-bg:rgba(255,156,138,.10);
  --g-day-arc:linear-gradient(120deg,#FFB45E 0%,#FF7E4A 100%);
  --g-night-arc:linear-gradient(120deg,#8D9AFF 0%,#56D8FF 100%);
  --g-handoff:linear-gradient(90deg,#FF7E4A 0%,#FFB45E 30%,#8D9AFF 70%,#56D8FF 100%);
  --f-sans:"Mona Sans","Mona Fallback","Helvetica Neue",Arial,sans-serif;
  --f-display:"Mona Sans","Mona Display Fallback","Helvetica Neue",Arial,sans-serif;
  --f-mono:"Geist Mono",ui-monospace,"SFMono-Regular",Menlo,monospace;
  --t-display-hero-size:clamp(44px,5.6vw,86px);--t-display-hero-line:.94;--t-display-hero-track:-.04em;--t-display-hero-weight:620;--t-display-hero-wdth:106;
  --t-display-xl-size:clamp(44px,7.2vw,116px);--t-display-xl-line:.94;--t-display-xl-track:-.04em;--t-display-xl-weight:620;--t-display-xl-wdth:112;
  --t-display-l-size:clamp(34px,4.6vw,68px);--t-display-l-line:1.0;--t-display-l-track:-.035em;--t-display-l-weight:600;--t-display-l-wdth:110;
  --t-display-m-size:clamp(24px,2.4vw,34px);--t-display-m-line:1.12;--t-display-m-track:-.02em;--t-display-m-weight:580;--t-display-m-wdth:104;
  --t-title-size:22px;--t-title-line:1.25;--t-title-track:-.01em;--t-title-weight:560;
  --t-body-l-size:clamp(17px,1.3vw,19px);--t-body-l-line:1.55;
  --t-body-size:16px;--t-body-line:1.6;
  --t-body-s-size:14px;--t-body-s-line:1.5;--t-body-s-track:.005em;
  --t-label-size:13px;--t-label-line:1.3;--t-label-track:.01em;--t-label-weight:560;
  --t-data-size:clamp(28px,2.8vw,42px);--t-data-track:-.02em;
  --t-micro-size:12px;--t-micro-line:1.3;--t-micro-track:.02em;--t-micro-weight:500;
  --s-1:4px;--s-2:8px;--s-3:12px;--s-4:16px;--s-5:24px;--s-6:32px;--s-7:40px;--s-8:48px;--s-9:64px;--s-10:80px;--s-11:96px;--s-12:128px;--s-13:160px;
  --r-inner:10px;--r-control:14px;--r-card:24px;--r-panel:32px;--r-round:999px;
  --e-float:inset 0 1px 0 rgba(255,255,255,.08),0 2px 6px -2px rgba(2,3,10,.5),0 24px 64px -24px rgba(2,3,10,.75);
  --e-glow-day:0 0 0 1px rgba(255,180,94,.25),0 10px 40px -8px rgba(255,126,74,.35);
  --e-glow-night:0 0 0 1px rgba(141,154,255,.25),0 10px 40px -8px rgba(86,216,255,.30);
  --m-ease-glide:cubic-bezier(.22,1,.36,1);--m-ease-sweep:cubic-bezier(.65,0,.35,1);
  --m-dur-micro:160ms;--m-dur-ui:300ms;--m-dur-reveal:900ms;--m-dur-page:720ms;--m-dur-ambient:24s;
  --margin:clamp(20px,5vw,64px);
  /* build addition (disclosed): the copy deck's H1 is ~2x the mockup's, so display-hero wraps it to 7 lines; this size holds it to the 4 masked lines in the 7fr column */
  --t-display-hero-long-size:clamp(40px,4.2vw,64px);
}

/* ---------- base ---------- */
*,*::before,*::after{box-sizing:border-box}
html{-webkit-text-size-adjust:100%;color-scheme:dark;scroll-padding-top:96px}
@media (prefers-reduced-motion:no-preference){html{scroll-behavior:smooth}}
/* Lenis (vendor/lenis.min.js): it drives the wheel, so native smooth scrolling must be off while it runs. lenis.css's iframe rule is
   left out on purpose: it would make the GoHighLevel form iframe unclickable. */
html.lenis{scroll-behavior:auto}
html.lenis,html.lenis body{height:auto}
.lenis:not(.lenis-autoToggle).lenis-stopped{overflow:clip}
body{margin:0;background:var(--c-void);color:var(--c-text);font-family:var(--f-sans);font-size:var(--t-body-size);line-height:var(--t-body-line);-webkit-font-smoothing:antialiased;overflow-x:clip}
a{color:inherit}
img,svg{display:block}
img{max-width:100%;height:auto}
figure{margin:0}
h1,h2,h3,p,ul,ol,dl,dd{margin:0}
ul[role="list"],ol[role="list"]{list-style:none;padding:0}
:focus-visible{outline:2px solid var(--c-night-cyan);outline-offset:3px;border-radius:6px}
.skip{position:fixed;left:16px;top:-80px;z-index:300;background:var(--c-cta-bg);color:var(--c-cta-ink);padding:12px 16px;border-radius:var(--r-control);font-weight:580;text-decoration:none}
.skip:focus{top:16px}
.wrap{width:min(1240px,100% - 2 * var(--margin));margin-inline:auto}
.sec{position:relative;padding:clamp(96px,11vw,160px) 0 0}
.sec-head{max-width:46rem}
.sec-head h2{margin-top:var(--s-4)}
.kick{color:var(--c-text-3)}

/* ---------- type ---------- */
.t-dhero,.t-dl,.t-dm,.foot-big{font-family:var(--f-display)}
.t-dhero{font-size:var(--t-display-hero-size);line-height:var(--t-display-hero-line);letter-spacing:var(--t-display-hero-track);font-weight:var(--t-display-hero-weight);font-stretch:calc(var(--t-display-hero-wdth) * 1%)}
.t-dl{font-size:var(--t-display-l-size);line-height:var(--t-display-l-line);letter-spacing:var(--t-display-l-track);font-weight:var(--t-display-l-weight);font-stretch:calc(var(--t-display-l-wdth) * 1%)}
.t-dm{font-size:var(--t-display-m-size);line-height:var(--t-display-m-line);letter-spacing:var(--t-display-m-track);font-weight:var(--t-display-m-weight);font-stretch:calc(var(--t-display-m-wdth) * 1%)}
.t-title{font-size:var(--t-title-size);line-height:var(--t-title-line);letter-spacing:var(--t-title-track);font-weight:var(--t-title-weight)}
.t-bl{font-size:var(--t-body-l-size);line-height:var(--t-body-l-line);color:var(--c-text-2)}
.t-bs{font-size:var(--t-body-s-size);line-height:var(--t-body-s-line);letter-spacing:var(--t-body-s-track)}
.t-label{font-size:var(--t-label-size);line-height:var(--t-label-line);letter-spacing:var(--t-label-track);font-weight:var(--t-label-weight)}
.t-micro{font-size:var(--t-micro-size);line-height:var(--t-micro-line);letter-spacing:var(--t-micro-track);font-weight:var(--t-micro-weight)}
.mono{font-family:var(--f-mono);font-variant-numeric:tabular-nums;letter-spacing:0}
.muted{color:var(--c-text-3)}
.tone{color:var(--c-text-3)}

/* ---------- atmosphere: aurora + horizon + grain. --day is 0..1 (1 = reps answering, 0 = after hours) ---------- */
.sky{position:absolute;inset:0;overflow:hidden;pointer-events:none;z-index:0}
.orb{position:absolute;border-radius:50%;filter:blur(80px);will-change:transform}
.orb.day{width:60vmax;height:44vmax;left:-14vmax;bottom:-18vmax;background:radial-gradient(closest-side,rgba(255,126,74,.75),rgba(255,180,94,.35) 55%,transparent);opacity:calc(.25 + .6 * var(--day,1))}
.orb.night{width:62vmax;height:50vmax;right:-18vmax;top:-22vmax;background:radial-gradient(closest-side,rgba(141,154,255,.70),rgba(86,216,255,.25) 60%,transparent);opacity:calc(.35 + .55 * (1 - var(--day,1)))}
.horizon{position:absolute;left:50%;bottom:-118vmax;width:220vmax;height:120vmax;transform:translateX(-50%);border-radius:50%;
  background:radial-gradient(closest-side,var(--c-void) 97%,transparent 100%);
  box-shadow:0 -1px 0 rgba(255,255,255,.18),0 -24px 80px -10px rgba(255,180,94,calc(.10 + .35 * var(--day,1))),0 -40px 140px -20px rgba(141,154,255,calc(.10 + .35 * (1 - var(--day,1))))}
.grain{position:absolute;inset:-50%;opacity:.05;mix-blend-mode:overlay;
  background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='160' height='160'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='.9' numOctaves='2' stitchTiles='stitch'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23n)'/%3E%3C/svg%3E")}
@media (prefers-reduced-motion:no-preference){
  .orb.day{animation:drift-a var(--m-dur-ambient) var(--m-ease-sweep) infinite alternate}
  .orb.night{animation:drift-b calc(var(--m-dur-ambient) * 1.3) var(--m-ease-sweep) infinite alternate}
}
@keyframes drift-a{to{transform:translate3d(6vmax,-3vmax,0) scale(1.08)}}
@keyframes drift-b{to{transform:translate3d(-7vmax,4vmax,0) scale(1.1)}}

/* ---------- glass ---------- */
.glass{position:relative;background:linear-gradient(180deg,var(--a-glass-fill-hi),var(--a-glass-fill));
  -webkit-backdrop-filter:blur(22px) saturate(140%);backdrop-filter:blur(22px) saturate(140%);
  border:1px solid var(--a-glass-edge);box-shadow:var(--e-float)}
.glass::before{content:"";position:absolute;inset:-1px;border-radius:inherit;padding:1px;pointer-events:none;
  background:linear-gradient(160deg,var(--a-glass-spec),transparent 38%,transparent 70%,rgba(255,255,255,.10));
  -webkit-mask:linear-gradient(#000 0 0) content-box,linear-gradient(#000 0 0);-webkit-mask-composite:xor;mask-composite:exclude}
@supports not ((backdrop-filter:blur(1px)) or (-webkit-backdrop-filter:blur(1px))){.glass{background:var(--c-raise)}}
.frame{position:relative;overflow:hidden;border-radius:var(--r-panel);border:1px solid var(--a-glass-edge);background:var(--c-deep);box-shadow:var(--e-float)}
.frame img{width:100%;height:100%;object-fit:cover}

/* ---------- header: floating glass capsule ---------- */
.hdr{position:fixed;top:16px;left:0;right:0;z-index:50;transition:transform var(--m-dur-page) var(--m-ease-sweep)}
.hdr.hide{transform:translateY(calc(-100% - 24px))}
.hdr-in{display:flex;align-items:center;gap:var(--s-6);height:64px;padding:0 8px 0 20px;border-radius:var(--r-card)}
.brand{display:flex;align-items:center;gap:8px;text-decoration:none;font-weight:620;font-stretch:108%;letter-spacing:-.01em;font-size:var(--t-body-l-size)}
.brand svg{width:28px;height:28px;color:var(--c-text)}
.brand span{color:var(--c-text-3);font-weight:500}
.nav{display:flex;gap:var(--s-2);margin-left:auto}
.nav a{text-decoration:none;color:var(--c-text-2);font-size:var(--t-body-s-size);font-weight:500;padding:8px 12px;border-radius:var(--r-inner);transition:color var(--m-dur-ui) var(--m-ease-glide),background var(--m-dur-ui) var(--m-ease-glide)}
.nav a:hover{color:var(--c-text);background:var(--a-glass-fill-hi)}
.hdr-end{display:flex;align-items:center;gap:var(--s-2)}
.menu-btn{display:none}
.mnav{margin-top:8px;border-radius:var(--r-card);padding:8px}
.mnav:not([hidden]){display:grid}
.mnav .link{padding:12px 16px;font-size:var(--t-body-size)}
@media (prefers-reduced-motion:no-preference){
  .mnav:not([hidden]){animation:drop 500ms var(--m-ease-sweep)}
  .mnav:not([hidden]) .link{animation:rise var(--m-dur-ui) var(--m-ease-glide) backwards}
  .mnav .link:nth-child(2){animation-delay:60ms}.mnav .link:nth-child(3){animation-delay:120ms}.mnav .link:nth-child(4){animation-delay:180ms}.mnav .link:nth-child(5){animation-delay:240ms}
}
@keyframes drop{from{clip-path:inset(0 0 100% 0 round var(--r-card))}to{clip-path:inset(0 0 0 0 round var(--r-card))}}
@media (min-width:960px){.mnav{display:none!important}}
@media (max-width:959px){
  .nav,.hdr-end .login{display:none}
  .hdr-in{gap:var(--s-3)}
  .hdr-end{margin-left:auto}
  .menu-btn{display:inline-flex;align-items:center;justify-content:center;width:40px;height:40px;border-radius:var(--r-control);border:1px solid var(--a-glass-edge);background:transparent;color:var(--c-text);cursor:pointer}
}

/* ---------- buttons: ONE action colour (.cta = Get started) ---------- */
.btn{--h:52px;position:relative;display:inline-flex;align-items:center;justify-content:center;gap:8px;min-height:var(--h);padding:0 24px;
  border-radius:var(--r-control);font:inherit;font-weight:580;font-size:var(--t-body-size);letter-spacing:-.005em;text-decoration:none;cursor:pointer;border:0;white-space:nowrap;
  transition:transform var(--m-dur-micro) var(--m-ease-glide),background var(--m-dur-ui) var(--m-ease-glide),box-shadow var(--m-dur-ui) var(--m-ease-glide),border-color var(--m-dur-ui),color var(--m-dur-ui)}
.btn.sm{--h:40px;padding:0 16px;font-size:var(--t-body-s-size)}
.btn svg{width:18px;height:18px;transition:transform var(--m-dur-ui) var(--m-ease-glide)}
.cta{background:var(--c-cta-bg);color:var(--c-cta-ink);isolation:isolate}
/* M-H1: the halo sits BEHIND the fill. The button isolates its own stacking context, so a -1 child paints over its background:
   halo at -2, a copy of the fill at -1, label on top (same fix as the portal, ESC-P3). Hover only where hover exists, so a tap can't latch it. */
.cta::before{content:"";position:absolute;inset:0;border-radius:inherit;z-index:-1;background:var(--c-cta-bg)}
.cta::after{content:"";position:absolute;inset:-2px;border-radius:inherit;z-index:-2;background:var(--g-handoff);opacity:0;filter:blur(10px);transition:opacity var(--m-dur-ui) var(--m-ease-glide)}
@media (hover:hover){.cta:not([disabled]):hover::after{opacity:.9}.cta:not([disabled]):hover svg{transform:translateX(4px)}}
.cta:active{transform:scale(.98)}
.cta[disabled]{cursor:default;opacity:.7}
.ghost{background:var(--a-glass-fill);color:var(--c-text);border:1px solid var(--a-glass-edge);-webkit-backdrop-filter:blur(14px);backdrop-filter:blur(14px)}
.ghost:hover{background:var(--a-glass-fill-hi);border-color:rgba(255,255,255,.22)}
.link{color:var(--c-text-2);text-decoration:none;font-size:var(--t-body-s-size);font-weight:500;padding:8px}
.link:hover{color:var(--c-text)}
.txt-link{display:inline-flex;align-items:center;gap:8px;margin-top:var(--s-5);color:var(--c-text);font-weight:560;text-decoration:underline;text-decoration-color:var(--a-glass-spec);text-underline-offset:6px;transition:text-decoration-color var(--m-dur-ui)}
.txt-link svg{width:18px;height:18px;transition:transform var(--m-dur-ui) var(--m-ease-glide)}
.txt-link:hover{text-decoration-color:var(--c-text)}
.txt-link:hover svg{transform:translateX(4px)}

/* ---------- chips + live dot ---------- */
.chip{display:inline-flex;align-items:center;gap:8px;min-height:32px;padding:6px 12px;border-radius:var(--r-control);font-size:var(--t-label-size);font-weight:var(--t-label-weight);color:var(--c-text-2)}
.dot{position:relative;display:inline-block;width:8px;height:8px;border-radius:50%;background:var(--who,var(--c-day));flex:none}
.dot::after{content:"";position:absolute;inset:-4px;border-radius:50%;border:1px solid var(--who,var(--c-day));opacity:0}
@media (prefers-reduced-motion:no-preference){.dot::after{animation:ping 2.4s var(--m-ease-glide) infinite}}
@keyframes ping{0%{transform:scale(.6);opacity:.9}80%,100%{transform:scale(2.1);opacity:0}}
[data-who="ai"]{--who:var(--c-night)}
[data-who="people"]{--who:var(--c-day)}
.sw{display:inline-block;width:10px;height:10px;border-radius:50%;flex:none}
.sw.d{background:var(--g-day-arc)}.sw.n{background:var(--g-night-arc)}.sw.b{background:var(--g-handoff)}

/* ========== §2 HERO ========== */
.hero{position:relative;min-height:100svh;display:grid;align-items:center;padding:128px 0 96px;isolation:isolate}
.hero>.sky{-webkit-mask-image:linear-gradient(#000 78%,transparent);mask-image:linear-gradient(#000 78%,transparent)} /* no hard edge where the hero ends */
.hero-grid{position:relative;z-index:1;display:grid;grid-template-columns:minmax(0,7fr) minmax(0,5fr);gap:clamp(32px,4vw,72px);align-items:center}
.hero-copy .chip{margin-bottom:var(--s-6)}
.hero h1 .ln{display:block;overflow:clip;padding-bottom:.06em}
.hero h1 .ln>span{display:inline-block}
.hero h1{font-size:var(--t-display-hero-long-size);font-stretch:100%}
.hero h1 em{font-style:normal;color:var(--c-day)}
.hero .lead{max-width:34em;margin-top:var(--s-6)}
.hero-cta{display:flex;flex-wrap:wrap;gap:var(--s-3);margin-top:var(--s-7)}
.cta-sub{margin-top:var(--s-3);color:var(--c-text-3)}
@media (max-width:599px){.hero h1 .ln,.hero h1 .ln>span{display:inline}} /* narrow: let the long H1 flow, no orphaned words */
@media (max-width:959px){
  .hero{padding:112px 0 72px;align-items:start}
  .hero-grid{grid-template-columns:1fr;gap:var(--s-8)}
}

/* live card holding the dial */
.live{border-radius:var(--r-panel);padding:var(--s-6);transform-style:preserve-3d;perspective:1200px}
.live-top{display:flex;justify-content:space-between;align-items:center;gap:var(--s-3);margin-bottom:var(--s-4)}
.live-line{min-height:3em;margin-top:var(--s-4);color:var(--c-text-2);text-align:center}
.live-foot{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:var(--s-4);margin-top:var(--s-5);padding-top:var(--s-4);border-top:1px solid var(--a-rule)}
.leg b{display:flex;align-items:flex-start;gap:8px;font-size:var(--t-label-size);font-weight:600}
.leg b .sw{margin-top:3px}
.leg span{display:block;margin-top:4px;font-size:var(--t-micro-size);color:var(--c-text-3);line-height:1.35}
@media (max-width:599px){.live{padding:var(--s-5)}.live-foot{grid-template-columns:1fr;gap:var(--s-3)}}

/* ========== DIAL (3D-feel glass 24h ring, built by main.js) ========== */
.dial{position:relative;aspect-ratio:1;width:100%;max-width:440px;margin-inline:auto;transform-style:preserve-3d;
  transform:rotateX(var(--tx,0deg)) rotateY(var(--ty,0deg));transition:transform 600ms var(--m-ease-glide)}
html:not(.js) .dial{display:none}
.dial-disc{position:absolute;inset:6%;border-radius:50%;
  background:radial-gradient(120% 120% at 30% 20%,rgba(255,255,255,.10),rgba(255,255,255,.02) 45%,rgba(2,3,10,.25) 100%);
  box-shadow:inset 0 1px 1px rgba(255,255,255,.25),inset 0 -20px 40px rgba(2,3,10,.45),0 40px 80px -30px rgba(2,3,10,.8)}
/* time-of-day halo as a gradient, not a 120px blurred shadow (the blur was tile-clipped into a visible square on mobile) */
.dial::before{content:"";position:absolute;inset:-14%;border-radius:50%;pointer-events:none;
  background:radial-gradient(closest-side,rgba(255,180,94,calc(.28 * var(--day,1))) 55%,transparent),radial-gradient(closest-side,rgba(141,154,255,calc(.28 * (1 - var(--day,1)))) 55%,transparent)}
.dial svg{position:absolute;inset:0;width:100%;height:100%;overflow:visible}
.dial .track{fill:none;stroke:rgba(255,255,255,.07);stroke-width:16}
.dial .arc{fill:none;stroke-width:16;stroke-linecap:round;transition:opacity 500ms var(--m-ease-glide)}
.dial .arc-glow{filter:blur(10px);opacity:.75}
.dial .tick{stroke:rgba(255,255,255,.22);stroke-width:1.5}
.dial .tick.maj{stroke:rgba(255,255,255,.5);stroke-width:2}
.dial .tl{font-family:var(--f-mono);font-size:var(--t-micro-size);fill:var(--c-text-3);text-anchor:middle;dominant-baseline:central}
.dial .hand{transform-origin:200px 200px;transform:rotate(var(--angle,0deg));transition:transform 900ms var(--m-ease-glide)}
.dial.scrub .hand{transition:none}
.dial .knob{fill:var(--c-text);filter:drop-shadow(0 0 10px var(--who,var(--c-text)))}
.dial .hand line{stroke:rgba(255,255,255,.55);stroke-width:1.5}
.dial-c{position:absolute;inset:0;display:grid;place-content:center;text-align:center;gap:8px;transform:translateZ(40px)}
.dial-c .when{font-size:var(--t-micro-size);color:var(--c-text-3);letter-spacing:.06em}
.dial-c .time{font-size:var(--t-data-size);line-height:1;letter-spacing:var(--t-data-track);font-weight:500}
.dial-c .time small{font-size:.46em;color:var(--c-text-2);margin-left:.18em;letter-spacing:.02em}
.dial-c .who{display:inline-flex;align-items:center;gap:8px;justify-content:center;font-size:var(--t-body-s-size);font-weight:560;color:var(--c-text)}
.dial-c .who{max-width:11em;margin-inline:auto;text-wrap:balance}
.dial-c .who[data-who="both"] .dot{display:none}
.stage .dial,.stage .dial-c{transform:none;transform-style:flat} /* the handoff dial does not tilt: no 3D layer, so the grain overlay blends evenly */

/* ========== §3 STATEMENT ========== */
.statement{position:relative;padding:clamp(96px,11vw,160px) 0 0}
.st-grid{display:grid;grid-template-columns:minmax(0,6fr) minmax(0,6fr);gap:clamp(32px,5vw,96px);align-items:center}
.st-q{margin-top:var(--s-7);display:grid;gap:var(--s-2)}
.st-q li{font-family:var(--f-display);font-size:var(--t-display-m-size);line-height:var(--t-display-m-line);letter-spacing:var(--t-display-m-track);font-weight:500;font-stretch:104%;color:var(--c-text-2)}
.st-copy>.t-bl{margin-top:var(--s-7);max-width:34em}
.st-fig{aspect-ratio:3/2}
@media (max-width:959px){.st-grid{grid-template-columns:1fr}}

/* ========== §4 SERVICES ========== */
.svc{display:grid;grid-template-columns:minmax(0,5fr) minmax(0,7fr);gap:clamp(32px,5vw,80px);margin-top:var(--s-9);align-items:start}
.svc-list{display:grid;border-top:1px solid var(--a-rule)}
@media (min-width:960px){.svc-list{position:sticky;top:120px}}
.svc-tab{display:grid;grid-template-columns:40px 1fr 20px;align-items:center;gap:var(--s-3);width:100%;min-height:72px;padding:var(--s-4) var(--s-3);
  background:none;border:0;border-bottom:1px solid var(--a-rule);color:var(--c-text-3);font:inherit;text-align:left;cursor:pointer;position:relative;
  transition:color var(--m-dur-ui) var(--m-ease-glide),background var(--m-dur-ui) var(--m-ease-glide)}
.svc-tab .nm{font-family:var(--f-display);font-size:var(--t-title-size);line-height:var(--t-title-line);font-weight:560;font-stretch:104%;letter-spacing:-.01em}
.svc-tab .n{font-size:var(--t-micro-size)}
.svc-tab svg{width:20px;height:20px;opacity:0;transform:translateX(-6px);transition:opacity var(--m-dur-ui),transform var(--m-dur-ui) var(--m-ease-glide)}
.svc-tab::after{content:"";position:absolute;left:0;right:0;bottom:-1px;height:2px;background:var(--g-day-arc);transform:scaleX(0);transform-origin:left;transition:transform var(--m-dur-reveal) var(--m-ease-glide)}
.svc-tab:hover{color:var(--c-text-2);background:var(--a-glass-fill)}
.svc-tab[aria-selected="true"]{color:var(--c-text)}
.svc-tab[aria-selected="true"] svg{opacity:1;transform:none}
.svc-tab[aria-selected="true"]::after{transform:scaleX(1)}
.svc-tab:focus-visible{outline-offset:-2px}
.svc-panel:focus-visible{outline-offset:8px}
.svc-img{aspect-ratio:3/2;margin-bottom:var(--s-6)}
.svc-panel h3{margin-bottom:var(--s-4)}
.svc-panel .t-bl{max-width:36em}
.svc-panel ul{display:flex;flex-wrap:wrap;gap:var(--s-2);margin-top:var(--s-5)}
.svc-panel li{padding:8px 14px;border-radius:var(--r-control);background:var(--a-glass-fill);border:1px solid var(--a-glass-edge);font-size:var(--t-body-s-size);color:var(--c-text-2)}
@media (prefers-reduced-motion:no-preference){
  .js .svc-panel:not([hidden]) .svc-img img{animation:svc-in 450ms var(--m-ease-glide)}
  .js .svc-panel:not([hidden]) .svc-img{animation:fade 450ms var(--m-ease-glide)}
}
@keyframes svc-in{from{transform:scale(1.04)}to{transform:none}}
@keyframes fade{from{opacity:0}to{opacity:1}}
@media (max-width:959px){.svc{grid-template-columns:1fr;margin-top:var(--s-7)}}

/* ---------- Get-started band (the repeating CTA component) ---------- */
.gs{position:relative;z-index:1;border-radius:var(--r-panel);padding:clamp(28px,4vw,48px);display:flex;flex-wrap:wrap;align-items:center;justify-content:space-between;gap:var(--s-5);margin-top:clamp(64px,8vw,128px)}
.gs{background:radial-gradient(55% 140% at 0% 50%,rgba(255,126,74,.20),transparent 70%),radial-gradient(55% 140% at 100% 50%,rgba(86,216,255,.16),transparent 70%),linear-gradient(180deg,var(--a-glass-fill-hi),var(--a-glass-fill))}
.gs h2{max-width:24ch}
.gs-cta{display:flex;flex-wrap:wrap;gap:var(--s-3)}
.gs-ring{position:absolute;inset:-1px;border-radius:inherit;padding:1px;background:var(--g-handoff);opacity:.55;pointer-events:none;
  -webkit-mask:linear-gradient(#000 0 0) content-box,linear-gradient(#000 0 0);-webkit-mask-composite:xor;mask-composite:exclude}

/* ========== §5 INDUSTRIES ========== */
.ind-grid{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:var(--s-5);margin-top:var(--s-9)}
.ind-card{position:relative}
.card-img{aspect-ratio:3/2}
@media (hover:hover) and (pointer:fine){
  .card-img img{transition:transform 1200ms var(--m-ease-glide)}
  .ind-card:hover .card-img img,.way:hover .card-img img{transform:scale(1.04)}
  .ind-card:hover .ind-cap{background:linear-gradient(180deg,rgba(255,255,255,.11),var(--a-glass-fill-hi))}
}
.ind-cap{position:relative;margin:-56px var(--s-4) 0;border-radius:var(--r-card);padding:var(--s-5);transition:background var(--m-dur-ui)}
.ind-cap p{margin-top:var(--s-2);color:var(--c-text-2);font-size:var(--t-body-s-size);line-height:var(--t-body-s-line)}
@media (max-width:959px){.ind-grid{grid-template-columns:1fr;gap:var(--s-7);margin-top:var(--s-7)}}

/* ========== §6 HOURS: pinned 24-hour handoff ========== */
.hours{position:relative;background:var(--c-void);isolation:isolate;padding-bottom:var(--s-4)}
.hours-head{position:relative;z-index:1;padding:clamp(96px,11vw,160px) 0 var(--s-9);max-width:48rem}
.hours-head h2{margin-top:var(--s-4)}
.hours-head p{margin-top:var(--s-5)}
.stage{position:relative}
.stage-in{position:relative;z-index:1;display:grid;grid-template-columns:auto minmax(0,1fr) minmax(0,1fr);gap:clamp(24px,4vw,72px);align-items:center;padding-bottom:var(--s-10)}
.rail{display:grid;gap:var(--s-3);margin:0;padding:0;align-self:center}
.rail li{list-style:none;display:flex;gap:12px;align-items:center;color:var(--c-text-3);font-size:var(--t-label-size);font-weight:560;transition:color var(--m-dur-ui)}
.rail li i{position:relative;width:2px;height:40px;background:var(--a-rule);border-radius:2px;overflow:hidden}
.rail li i::after{content:"";position:absolute;inset:0;background:var(--g-handoff);transform-origin:top;transform:scaleY(var(--fill,0))}
.rail li.on{color:var(--c-text)}
.panels{position:relative;display:grid;gap:var(--s-5)}
.panel{border-radius:var(--r-panel);padding:clamp(24px,3vw,40px)}
.panel .t-label{display:inline-flex;align-items:center;gap:8px;color:var(--c-text-2)}
.panel h3{margin-top:var(--s-4)}
.panel p.t-bl{margin-top:var(--s-4)}
/* scrub mode (JS + motion allowed). Without it: static stack, dial in its 24/7 state. */
.scrub .stage{height:420vh}
.scrub .stage-in{position:sticky;top:0;height:100svh;padding:96px 0 48px}
.scrub .panels{gap:0}
.scrub .panel{grid-area:1/1;opacity:0;transform:translateY(32px) scale(.98);transition:opacity 600ms var(--m-ease-glide),transform 900ms var(--m-ease-glide);pointer-events:none}
.scrub .panel.on{opacity:1;transform:none;pointer-events:auto;box-shadow:var(--e-float),var(--ph-glow,none)}
.stage-sky{position:sticky;inset:0 0 auto 0;height:100svh;margin-bottom:-100svh}
.hours:not(.scrub) .stage-sky{display:none}
.hours[data-phase="0"]{--ph-glow:var(--e-glow-day)}
.hours[data-phase="1"]{--ph-glow:var(--e-glow-night)}
.hours[data-phase="2"]{--ph-glow:0 0 0 1px rgba(255,255,255,.14),0 10px 50px -10px rgba(255,180,94,.25),0 10px 50px -10px rgba(141,154,255,.25)}
.stars{position:absolute;inset:0;opacity:calc(1 - var(--day,1));transition:opacity 600ms;
  background-image:radial-gradient(1px 1px at 12% 22%,rgba(255,255,255,.7),transparent),radial-gradient(1px 1px at 72% 12%,rgba(255,255,255,.55),transparent),
  radial-gradient(1.5px 1.5px at 84% 64%,rgba(190,200,255,.6),transparent),radial-gradient(1px 1px at 32% 78%,rgba(255,255,255,.45),transparent),
  radial-gradient(1px 1px at 52% 38%,rgba(255,255,255,.35),transparent),radial-gradient(1px 1px at 92% 34%,rgba(255,255,255,.5),transparent)}
@media (max-width:959px){
  .stage-in{grid-template-columns:1fr;gap:var(--s-6)}
  .rail{display:none}
  .stage .dial{max-width:300px}
  .scrub .stage-in{align-content:center;padding:88px 0 112px}
  .scrub .stage{height:360vh}
}
@media (max-width:599px){.stage .dial{max-width:240px}}

/* ========== §7 OTHER WAYS ========== */
.ways-grid{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:clamp(24px,4vw,64px);margin-top:var(--s-9)}
.way .card-img{margin-bottom:var(--s-6)}
.way .t-bl{margin-top:var(--s-4);max-width:34em}
@media (max-width:959px){.ways-grid{grid-template-columns:1fr;gap:var(--s-9);margin-top:var(--s-7)}}

/* ========== §8 HOW IT STARTS ========== */
.start-grid{display:grid;grid-template-columns:minmax(0,5fr) minmax(0,7fr);gap:clamp(32px,6vw,112px);align-items:start}
.start-fig{aspect-ratio:2/3}
@media (min-width:960px){.start-fig{position:sticky;top:120px}}
.steps{position:relative;display:grid;gap:var(--s-8);margin-top:var(--s-9)}
.start .steps{padding-left:56px} /* must outrank ol[role="list"]{padding:0} */
.steps::before,.steps::after{content:"";position:absolute;left:15px;top:16px;bottom:16px;width:2px;border-radius:2px}
.steps::before{background:var(--a-rule)}
.steps::after{background:linear-gradient(180deg,#FF7E4A 0%,#FFB45E 30%,#8D9AFF 70%,#56D8FF 100%);transform-origin:top;transform:scaleY(var(--prog,1))}
.js .steps::after{transform:scaleY(var(--prog,0))}
.step{position:relative}
.step .node{position:absolute;z-index:1;left:-56px;top:-2px;display:grid;place-items:center;width:32px;height:32px;border-radius:50%;background:var(--c-raise);border:1px solid var(--a-glass-edge);font-size:var(--t-micro-size);color:var(--c-text-2);transition:color var(--m-dur-ui),border-color var(--m-dur-ui),box-shadow var(--m-dur-ui)}
.step.lit .node,html:not(.js) .step .node{color:var(--c-text);border-color:rgba(255,255,255,.3);box-shadow:0 0 24px -4px rgba(255,180,94,.35)}
.step p{margin-top:var(--s-2);color:var(--c-text-2);max-width:34em}
@media (max-width:959px){.start-grid{grid-template-columns:1fr}.start-fig{max-width:420px;order:2}.steps{margin-top:var(--s-7)}}

/* ========== §9 EXTRAS (minor) ========== */
.extras{padding:clamp(80px,9vw,128px) 0 0}
.ex-band{display:grid;grid-template-columns:auto minmax(0,1fr) auto;gap:var(--s-3) var(--s-6);align-items:center;padding:var(--s-6) 0;border-top:1px solid var(--a-rule);border-bottom:1px solid var(--a-rule)}
.ex-band p{color:var(--c-text-2);font-size:var(--t-body-s-size);line-height:var(--t-body-s-line);max-width:56em}
.ex-band .txt-link{margin-top:0;font-size:var(--t-body-s-size)}
@media (max-width:959px){.ex-band{grid-template-columns:1fr}}

/* ========== §10 FAQ ========== */
.faq-grid{display:grid;grid-template-columns:minmax(0,5fr) minmax(0,7fr);gap:clamp(32px,6vw,112px);align-items:start}
@media (min-width:960px){.faq-grid .sec-head{position:sticky;top:120px}}
.faq-list{display:grid;border-top:1px solid var(--a-rule)}
.faq-list details{border-bottom:1px solid var(--a-rule)}
.faq-list summary{display:flex;justify-content:space-between;align-items:center;gap:var(--s-5);min-height:72px;padding:var(--s-4) var(--s-2);cursor:pointer;list-style:none;
  font-family:var(--f-display);font-size:clamp(18px,1.5vw,21px);line-height:1.35;font-weight:560;font-stretch:102%;letter-spacing:-.01em;border-radius:var(--r-inner);transition:background var(--m-dur-ui)}
.faq-list summary::-webkit-details-marker{display:none}
.faq-list summary:hover{background:var(--a-glass-fill)}
.faq-list summary svg{width:20px;height:20px;flex:none;color:var(--c-text-3);transition:transform var(--m-dur-ui) var(--m-ease-glide)}
.faq-list details[open] summary svg{transform:rotate(45deg);color:var(--c-text)}
.faq-list details p{padding:0 var(--s-2) var(--s-6);color:var(--c-text-2);max-width:40em}
@media (prefers-reduced-motion:no-preference){.faq-list details[open] p{animation:rise var(--m-dur-ui) var(--m-ease-glide)}}
@media (max-width:959px){.faq-grid{grid-template-columns:1fr}}

/* ========== §11 CONTACT (closing sky) ========== */
.end{position:relative;z-index:1;padding:clamp(128px,13vw,192px) 0 var(--s-12);isolation:isolate}
.end .sky{-webkit-mask-image:linear-gradient(transparent,#000 35%,#000 72%,transparent);mask-image:linear-gradient(transparent,#000 35%,#000 72%,transparent)}
.end-grid{position:relative;z-index:1;display:grid;grid-template-columns:minmax(0,5fr) minmax(0,7fr);gap:clamp(32px,5vw,96px);align-items:start}
.end-copy h2{margin-top:var(--s-4);max-width:14ch}
.end-copy h2:focus{outline:none}
.end-copy .t-bl{margin-top:var(--s-5);max-width:30em}
.reach{display:grid;gap:var(--s-4);margin-top:var(--s-7);padding-top:var(--s-5);border-top:1px solid var(--a-rule)}
.reach div{display:grid;grid-template-columns:80px 1fr;gap:var(--s-3);align-items:baseline}
.reach dt{font-size:var(--t-label-size);font-weight:560;color:var(--c-text-3)}
.reach dd{font-size:var(--t-body-l-size)}
.reach a{text-decoration:none;border-bottom:1px solid var(--a-glass-spec)}
.reach a:hover{border-color:var(--c-text)}
.reach .ph{color:var(--c-text-3)}
.end-form{border-radius:var(--r-panel);padding:clamp(24px,4vw,48px)}
@media (max-width:959px){.end-grid{grid-template-columns:1fr}}

/* form (markup from server.js BUILTIN_FORM) */
.form{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:var(--s-5) var(--s-4)}
.form label{display:grid;gap:var(--s-2);font-size:var(--t-label-size);line-height:var(--t-label-line);font-weight:560;color:var(--c-text-2)}
.form .full{grid-column:1 / -1}
.form input,.form select,.form textarea{width:100%;min-height:52px;padding:12px 16px;background:var(--c-raise);color:var(--c-text);border:1px solid var(--c-control-edge);border-radius:var(--r-control);
  font:inherit;font-size:var(--t-body-size);font-weight:400;transition:border-color var(--m-dur-micro),box-shadow var(--m-dur-micro)}
.form select{appearance:none;cursor:pointer;padding-right:44px;
  background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23A9B0C0' stroke-width='1.8' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M6 9l6 6 6-6'/%3E%3C/svg%3E");background-repeat:no-repeat;background-position:right 14px center;background-size:18px}
.form select option{background:var(--c-raise);color:var(--c-text)}
.form textarea{resize:vertical;min-height:120px}
.form input:hover,.form select:hover,.form textarea:hover{border-color:var(--c-text-3)}
.form input:focus,.form select:focus,.form textarea:focus{outline:none;border-color:var(--c-night-cyan);box-shadow:0 0 0 4px rgba(86,216,255,.18)}
.form [aria-invalid="true"]{border-color:var(--c-error)}
.form .hp{position:absolute;left:-9999px;width:1px;height:1px;overflow:hidden}
.form .btn{justify-self:start;margin-top:var(--s-2)}
.form-msg{min-height:1.5em;font-size:var(--t-body-s-size);font-weight:500}
.form-msg.ok{color:var(--c-text)}
.form-msg.ok::before{content:"✓ ";color:var(--c-day)}
.form-msg.err{color:var(--c-error)}
.form-msg.err::before{content:"! ";font-weight:700}
@media (prefers-reduced-motion:no-preference){.form-msg.err,.form-msg.ok{animation:rise var(--m-dur-ui) var(--m-ease-glide)}}
.ghl-frame{width:100%;min-height:640px;border:0;border-radius:var(--r-card);background:transparent}
@media (max-width:599px){.form{grid-template-columns:1fr}.form .btn{width:100%}}

/* ========== §12 FOOTER ========== */
.foot{position:relative;overflow:hidden;padding:var(--s-11) 0 calc(var(--s-11) + 24px);border-top:1px solid var(--a-rule);isolation:isolate}
.foot-glow{position:absolute;left:50%;top:-1px;width:120%;height:220px;transform:translateX(-50%);pointer-events:none;z-index:-1;
  background:radial-gradient(50% 100% at 50% 0%,rgba(255,180,94,.10),transparent 70%),radial-gradient(40% 80% at 70% 0%,rgba(141,154,255,.10),transparent 70%)}
.foot-big{display:flex;align-items:center;gap:clamp(12px,2vw,28px);font-size:var(--t-display-xl-size);line-height:var(--t-display-xl-line);letter-spacing:var(--t-display-xl-track);font-weight:var(--t-display-xl-weight);font-stretch:calc(var(--t-display-xl-wdth) * 1%);color:var(--c-text)}
.foot-big svg{width:.8em;height:.8em;flex:none}
.foot-row{display:flex;flex-wrap:wrap;justify-content:space-between;gap:var(--s-4) var(--s-6);margin-top:var(--s-9);padding-top:var(--s-5);border-top:1px solid var(--a-rule);font-size:var(--t-body-s-size);color:var(--c-text-3)}
.foot-row>p:first-child{max-width:62ch}
.foot-links{display:flex;flex-wrap:wrap;gap:var(--s-5)}
.foot-links a{text-decoration:none;color:var(--c-text-2)}
.foot-links a:hover{color:var(--c-text)}

/* ---------- Get-started dock ---------- */
.dock{position:fixed;left:50%;bottom:20px;z-index:40;display:flex;align-items:center;gap:var(--s-4);padding:8px 8px 8px 16px;border-radius:var(--r-card);
  transform:translate(-50%,calc(100% + 40px));transition:transform var(--m-dur-page) var(--m-ease-glide);visibility:hidden}
.dock.show{transform:translate(-50%,0);visibility:visible}
.dock .t-bs{display:flex;align-items:center;gap:8px;color:var(--c-text-2);white-space:nowrap}
@media (max-width:599px){.dock{left:12px;right:12px;transform:translateY(calc(100% + 40px));justify-content:space-between}.dock.show{transform:none}.dock .t-bs{white-space:normal;text-wrap:balance}}
.dock:not(.show){transition:transform var(--m-dur-page) var(--m-ease-glide),visibility 0s var(--m-dur-page)}

/* ---------- entrances (JS present + motion allowed only; the page is complete without them) ---------- */
@media (prefers-reduced-motion:no-preference){
  .js .in{opacity:0;transform:translateY(20px);animation:rise var(--m-dur-reveal) var(--m-ease-glide) forwards;animation-delay:var(--d,0s)}
  /* start fully below the mask: the mask is 106% of the line (.06em padding) and the glyphs overshoot the .94 line box, so 105% left ascenders showing */
  .js .hero h1 .ln>span{transform:translateY(120%);animation:mask-up var(--m-dur-reveal) var(--m-ease-glide) forwards;animation-delay:var(--d,0s)}
  .js .live.in{transform:translateY(28px) scale(.97)}
  @media (max-width:599px){.js .hero h1 .ln>span{transform:none;animation:none}.js .hero h1{opacity:0;animation:rise var(--m-dur-reveal) var(--m-ease-glide) .18s forwards}}
  .js .arc-draw{stroke-dasharray:var(--len) var(--len);stroke-dashoffset:var(--len);animation:draw 1600ms var(--m-ease-glide) forwards;animation-delay:var(--d,.6s)}
  .js .rv{opacity:0;transform:translateY(32px);transition:opacity var(--m-dur-reveal) var(--m-ease-glide),transform var(--m-dur-reveal) var(--m-ease-glide);transition-delay:var(--d,0s)}
  .js .rv.seen{opacity:1;transform:none}
  .js .rv-img{clip-path:inset(0 0 100% 0 round var(--r-panel));transition:clip-path 1200ms var(--m-ease-sweep)}
  .js .rv-img img{transform:scale(1.15);transition:transform 1600ms var(--m-ease-glide)}
  .js .rv-img.seen{clip-path:inset(0 0 0 0 round var(--r-panel))}
  .js .rv-img.seen img{transform:none}
}
@keyframes rise{from{opacity:0;transform:translateY(20px)}to{opacity:1;transform:none}}
@keyframes mask-up{to{transform:none}}
@keyframes draw{to{stroke-dashoffset:0}}

/* ---------- page transition: horizon sweep (Client login) ---------- */
.sweep{position:fixed;inset:0;z-index:200;pointer-events:none;display:grid;place-items:center}
.sweep .veil{position:absolute;inset:0;background:var(--c-void);clip-path:inset(50% 0 50% 0)}
.sweep .line{position:absolute;left:0;right:0;top:50%;height:2px;background:var(--g-handoff);transform:scaleX(0);box-shadow:0 0 24px rgba(255,180,94,.5),0 0 48px rgba(141,154,255,.45)}
.sweep.go .line{transition:transform 300ms var(--m-ease-glide);transform:scaleX(1)}
.sweep.go .veil{transition:clip-path 420ms var(--m-ease-sweep) 260ms;clip-path:inset(0 0 0 0)}

/* ---------- reduced motion: content and state stay, movement goes ---------- */

/* ========== owner edits 2026-10-11: hero photo, coverage planner in the statement, extras list, consent ========== */
[data-who="none"]{--who:var(--c-text-3)}
.leg b [data-plan-hours]{display:inline;margin:0;font-size:inherit;color:inherit;line-height:inherit}

/* ========== hero map: coast to coast, live business hours per zone ========== */
.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}
.hero{overflow-x:clip}
.usmap{position:relative;width:calc(100% + 12vw);margin-left:-4vw;margin-right:-8vw;display:grid;gap:var(--s-4)}
.usmap-cv{display:block;width:100%;aspect-ratio:1.6;max-width:100%}
.usmap::before{content:"";position:absolute;inset:-10% -6% 10% -6%;z-index:-1;pointer-events:none;
  background:radial-gradient(50% 50% at 40% 45%,rgba(255,180,94,.10),transparent 70%),radial-gradient(45% 50% at 75% 40%,rgba(141,154,255,.10),transparent 70%)}
.usmap-calls{position:absolute;left:0;right:0;top:0;aspect-ratio:1.6;pointer-events:none}
.ucall{position:absolute;left:var(--x);top:var(--y);transform:translate(-50%,-50%);display:flex;align-items:center;gap:10px;
  border:0;background:none;box-shadow:none;--who:var(--c-day)}
.ucall[data-who="ai"]{--who:var(--c-night)}
.ucall .pin{position:relative;width:10px;height:10px;border-radius:50%;background:var(--who);box-shadow:0 0 0 4px rgba(255,255,255,.06),0 0 18px var(--who);flex:none}
.ucall .pin::after{content:"";position:absolute;inset:-6px;border-radius:50%;border:1px solid var(--who);animation:ping 1.6s var(--m-ease-glide) infinite}
.ucall .card{display:grid;gap:2px;min-width:190px;padding:10px 14px;border-radius:var(--r-control);background:linear-gradient(180deg,rgba(18,21,33,.92),rgba(10,12,20,.88));
  border:1px solid var(--a-glass-edge);box-shadow:var(--e-float);backdrop-filter:blur(14px);-webkit-backdrop-filter:blur(14px);
  transform-origin:left center;animation:pop .5s var(--m-ease-glide) both}
.ucall.left{flex-direction:row-reverse}
.ucall.left .card{transform-origin:right center}
.ucall.narrow{flex-direction:column;gap:8px;transform:translate(-50%,-5px)}
.ucall.narrow .pin{transform:translateX(var(--px,0))}
.ucall.narrow .card{min-width:0;width:184px;transform-origin:top center}
.ucall.narrow.out{transform:translate(-50%,-5px) scale(.96)}
.ucall .card b{font-size:var(--t-body-s-size);font-weight:600}
.ucall .cty{font-size:var(--t-micro-size);color:var(--c-text-3)}
.ucall .stp{display:flex;align-items:center;gap:8px;margin-top:4px;font-size:var(--t-micro-size);color:var(--c-text-2);font-weight:560}
.ucall .stp .dot{width:7px;height:7px}
.ucall:not(.ans) .stp .dot{--who:var(--c-text-3)}
.ucall.done .stp{color:var(--c-text)}
.ucall.out{opacity:0;transform:translate(-50%,-50%) scale(.96);transition:opacity .5s,transform .5s}
@keyframes pop{from{opacity:0;transform:scale(.9) translateY(6px)}to{opacity:1;transform:none}}
.usmap-zones{display:grid;grid-template-columns:repeat(4,minmax(0,1fr));gap:var(--s-3);margin:0 8vw 0 4vw;padding-top:var(--s-4);border-top:1px solid var(--a-rule)}
.usmap-zones li{display:grid;gap:2px;--who:var(--c-day)}
.usmap-zones li[data-who="ai"]{--who:var(--c-night)}
.usmap-zones .z{font-size:var(--t-micro-size);color:var(--c-text-3);letter-spacing:.04em;text-transform:uppercase;font-weight:600}
.usmap-zones time{font-size:clamp(17px,1.5vw,22px);font-weight:500}
.usmap-zones .st{display:flex;align-items:center;gap:6px;font-size:var(--t-micro-size);color:var(--c-text-2)}
.usmap-zones .st .dot{width:7px;height:7px}
.usmap-zones .st b{font-weight:560}
@media (max-width:959px){.usmap{width:100%;margin:0}.usmap-zones{margin:0}}
@media (max-width:599px){.usmap-zones{grid-template-columns:repeat(2,minmax(0,1fr));row-gap:var(--s-4)}.ucall .card{min-width:150px;padding:8px 10px}}

/* ========== statement: a day at your front door ========== */
.st-q li{transition:color .5s var(--m-ease-glide),transform .5s var(--m-ease-glide)}
.st-q li.on{color:var(--c-text);transform:translateX(6px)}
.line{border-radius:var(--r-panel);padding:var(--s-6);position:sticky;top:96px}
@media (max-width:959px){.line{position:static}}
.line-top{display:flex;justify-content:space-between;align-items:center;gap:var(--s-3);margin-bottom:var(--s-5)}
.calls{display:grid;gap:var(--s-3);margin:0;padding:0}
.call{position:relative;padding:var(--s-4) var(--s-5);border-radius:var(--r-card);border:1px solid var(--a-rule);background:rgba(2,3,10,.28);
  transition:border-color .5s,background-color .5s,opacity .5s;opacity:.55}
.call.on{opacity:1;border-color:var(--a-glass-spec);background:rgba(255,255,255,.035)}
.call.past{opacity:.8}
.line.static .call{opacity:1}
.call-h{display:flex;align-items:center;gap:var(--s-3)}
.call-h time{font-size:var(--t-micro-size);color:var(--c-text-3);min-width:64px}
.call-who{font-weight:600;font-size:var(--t-body-s-size)}
.ring{margin-left:auto;width:8px;height:8px;border-radius:50%;background:var(--c-text-3);position:relative}
.call.on[data-step="1"] .ring{background:var(--c-day)}
.call.on[data-step="1"] .ring::after{content:"";position:absolute;inset:-5px;border-radius:50%;border:1px solid var(--c-day);animation:ping 1s var(--m-ease-glide) infinite}
.call[data-step="2"] .ring,.call[data-step="3"] .ring{background:var(--c-text-2)}
.call[data-q="3"][data-step="2"] .ring,.call[data-q="3"][data-step="3"] .ring{background:var(--c-night)}
.call-steps{display:grid;gap:6px;margin:var(--s-3) 0 0;padding:0;list-style:none}
.call-steps li{position:relative;padding-left:20px;font-size:var(--t-body-s-size);color:var(--c-text-3);transition:color .4s,opacity .4s;opacity:.45}
.call-steps li::before{content:"";position:absolute;left:2px;top:.55em;width:8px;height:8px;border-radius:50%;border:1px solid var(--c-text-3);transition:background .4s,border-color .4s}
.call-steps li[data-who="people"]{--who:var(--c-day)}
.call-steps li[data-who="ai"]{--who:var(--c-night)}
.call[data-step="1"] .call-steps li:nth-child(-n+1),.call[data-step="2"] .call-steps li:nth-child(-n+2),.call[data-step="3"] .call-steps li{opacity:1;color:var(--c-text-2)}
.call[data-step="2"] .call-steps li:nth-child(2)::before,.call[data-step="3"] .call-steps li:nth-child(2)::before{background:var(--who);border-color:var(--who)}
.call[data-step="3"] .call-steps li.out{color:var(--c-text);font-weight:560}
.call[data-step="3"] .call-steps li.out::before{background:var(--c-text);border-color:var(--c-text)}
.call:not(.on) .call-steps{display:none}
.line.static .call .call-steps{display:grid}
@media (max-width:599px){.line{padding:var(--s-5)}.call{padding:var(--s-4)}}

/* extras: heading + list + link */
.ex-band{grid-template-columns:minmax(0,1fr) minmax(0,1.6fr) auto;align-items:start}
.ex-head p{margin-top:var(--s-2)}
.ex-list{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:var(--s-4) var(--s-6);margin:0}
.ex-list div{display:grid;align-content:start;gap:4px;padding-top:var(--s-3);border-top:1px solid var(--a-rule)}
.ex-list dt{font-size:var(--t-micro-size);font-weight:600;letter-spacing:.08em;text-transform:uppercase;color:var(--c-text-3)}
.ex-list dd{margin:0;color:var(--c-text);font-size:var(--t-body-s-size);line-height:var(--t-body-s-line)}
.ex-band .txt-link{align-self:center}
@media (max-width:959px){.ex-band{grid-template-columns:1fr}.ex-band .txt-link{justify-self:start}}
@media (max-width:599px){.ex-list{grid-template-columns:1fr}}
/* cookie consent bar (only rendered when analytics is configured) */
.consent{position:fixed;left:16px;right:16px;bottom:16px;z-index:60;max-width:560px;margin-inline:auto;padding:var(--s-5);border-radius:var(--r-card);display:grid;gap:var(--s-4)}
.consent p{margin:0;color:var(--c-text-2);font-size:var(--t-body-s-size);line-height:var(--t-body-s-line)}
.consent p a{color:var(--c-text)}
.consent-cta{display:flex;flex-wrap:wrap;gap:var(--s-3)}
.consent[hidden]{display:none}
.linkbtn{background:none;border:0;padding:0;font:inherit;color:var(--c-text-2);cursor:pointer;text-decoration:none}
.linkbtn:hover{color:var(--c-text)}


/* ========== larger teams + beyond the phones ========== */
.grow{display:grid;grid-template-columns:minmax(0,7fr) minmax(0,5fr);gap:clamp(32px,5vw,80px);margin-top:var(--s-9);align-items:start}
.grow-ent .card-img{aspect-ratio:3/2}
.grow-ent h3,.grow-more h3{margin-top:var(--s-6)}
.grow-more h3{margin-top:0}
.grow-ent .t-bl,.grow-more .t-bl{margin-top:var(--s-3);color:var(--c-text-2);max-width:40em}
.grow-more{padding:var(--s-7);border-radius:var(--r-panel);border:1px solid var(--a-glass-edge);background:linear-gradient(180deg,var(--a-glass-fill-hi),var(--a-glass-fill))}
.grow-more .ex-list{grid-template-columns:1fr;margin-top:var(--s-6);gap:var(--s-4)}
.ticks{display:grid;gap:10px;margin:var(--s-5) 0 0;padding:0;list-style:none}
.ticks li{position:relative;padding-left:22px;color:var(--c-text-2);font-size:var(--t-body-s-size)}
.ticks li::before{content:"";position:absolute;left:0;top:.5em;width:12px;height:7px;border-left:1.6px solid var(--c-day);border-bottom:1.6px solid var(--c-day);transform:rotate(-45deg) translateY(-3px)}
@media (max-width:959px){.grow{grid-template-columns:1fr}.grow-more{padding:var(--s-6)}}

@media (prefers-reduced-motion:reduce){
  *,*::before,*::after{animation:none!important;transition-duration:0s!important;transition-delay:0s!important;scroll-behavior:auto!important}
  .dial{transform:none!important}
  .hdr.hide{transform:none}
}