/* ==========================================================================
   Hero: video, white panel, nav, intro and scroll handoff
   At rest the video is full frame. Scrolling then runs two stages (hero.js draws both):
     --reveal  0 → 1  the white panel slides up from the bottom to --cut, carrying the headline
     --handoff 0 → 1  the white keeps rising, carrying the headline to the top; the last strip of
                      video around the nav morphs into a rounded pill; the agent cards come up below
   The white is the page itself. The video and nav are fixed layers above it; hero.js clips the
   video (a hard edge, no gradient): full screen → the strip above the rising edge → a rounded pill
   around the nav, which then stays pinned at the top while the page scrolls under it.
   Layer order: page content (headline, cards) < white cap 9 < video 10 < intro layer 11 < nav 12.
   hero.js may raise the edge on short screens so the copy always sits on white.
   ========================================================================== */
:root{
  --cut:62%;
  --reveal:0;                  /* stage 1, set by hero.js */
  --handoff:0;                 /* stage 2, set by hero.js */
  --pad-x:clamp(20px,3.2vw,48px);
  --pad-y:clamp(16px,2.6vw,36px);
  --ink:#111;
  --ease-out:cubic-bezier(.22,1,.36,1);
  --logo-shadow:drop-shadow(0 1px 2px rgba(0,0,0,.28)) drop-shadow(0 3px 12px rgba(0,0,0,.2));
}

/* the track gives the sticky hero 160vh of scroll: ~60vh to reveal the white panel, 100vh to hand off */
.hero-track{position:relative;height:260vh;height:260svh}
.hero{position:sticky;top:0;height:100vh;height:100svh;min-height:520px;overflow:hidden;background:#fff;isolation:isolate}

/* white cap: a fixed white band from the top of the screen to just below the pill, ending in a soft
   fade, so content scrolling up fades into white instead of showing around the pill. Under the video
   until the pill forms, so it is never seen on its own. Height set by hero.js. */
.hero-cap{position:fixed;inset:0 0 auto 0;height:var(--cap-h,0px);z-index:9;pointer-events:none;
  background:linear-gradient(to bottom,#fff calc(100% - var(--cap-fade,44px)),rgba(255,255,255,0))}   /* content fades into white under the pill */

/* video: fixed, clipped by hero.js. The slow zoom is on the picture inside, so the clip shape stays true. */
.hero-media{position:fixed;inset:0;z-index:10;overflow:hidden;pointer-events:none}
.hero-media img,.hero-media video{position:absolute;inset:0;width:100%;height:100%;object-fit:cover;
  transform:scale(calc(1 + .06 * var(--handoff)));transform-origin:50% 40%}


/* hero copy, always near-black and never faded. hero.js moves it with the white panel's edge,
   so it rides up on white and parks just under the nav pill. Starts below the screen. */
.hero-copy{position:absolute;z-index:3;left:var(--pad-x);right:var(--pad-x);bottom:max(48px,6vh);color:var(--ink);
  transform:translateY(110vh)}
.hero-copy h1{margin:0;font-family:var(--font-display);font-weight:900;font-size:clamp(34px,1.2rem + 2.9vw,64px);line-height:.98;letter-spacing:-.035em;max-width:14ch;text-wrap:balance}
.hero-copy p{margin:18px 0 0;font-family:var(--font-text);font-weight:400;font-size:clamp(17px,.95rem + .35vw,21px);line-height:1.4;max-width:40ch;text-wrap:pretty}

/* nav */
.bar{position:fixed;inset:0 0 auto 0;z-index:12;display:grid;grid-template-columns:1fr auto 1fr;align-items:center;gap:16px;
  padding:max(var(--pad-y),env(safe-area-inset-top)) max(var(--pad-x),env(safe-area-inset-right)) 0 max(var(--pad-x),env(safe-area-inset-left))}
.logo{justify-self:start;display:block;line-height:0}
/* corner logo: 35px tall (25% larger than the original 28px); 27.5px and 22.5px on phones */
.logo img{display:block;height:35px;width:auto;transform-origin:0 0;filter:brightness(0) invert(1) var(--logo-shadow)}
.nav{display:flex;gap:clamp(20px,2.6vw,40px)}
.nav a{color:#fff;font-family:var(--font-display);font-weight:500;font-size:clamp(15px,1.05vw,17px);letter-spacing:-.005em;padding:8px 2px;transition:opacity .18s ease}
.nav a:hover{opacity:.75}
.talk{justify-self:end;display:inline-flex;align-items:center;gap:8px;height:44px;padding:0 18px 0 20px;border-radius:999px;color:#fff;
  font-family:var(--font-display);font-weight:500;font-size:clamp(15px,1.05vw,17px);letter-spacing:-.005em;white-space:nowrap;
  background:rgba(255,255,255,.12);-webkit-backdrop-filter:blur(18px) saturate(120%);backdrop-filter:blur(18px) saturate(120%);
  box-shadow:inset 0 1px 0 rgba(255,255,255,.45),inset 0 0 0 1px rgba(255,255,255,.22),0 4px 18px rgba(0,0,0,.12);
  transition:background-color .2s ease,transform .14s var(--ease-out)}
.talk:hover{background:rgba(255,255,255,.22)}
.talk:active{transform:scale(.97)}
.talk svg{width:9px;height:14px;transition:transform .2s var(--ease-out)}
.talk:hover svg{transform:translateX(2px)}
.bar a:focus-visible{outline:2px solid #fff;outline-offset:4px;border-radius:6px}

/* scroll cue: a downward chevron drawn like the Book a Call arrow (same stroke, round ends), with a soft
   shadow and a small, slow bounce. It fades in as the logo lands (hero.js) and hides once the page scrolls. */
.scroll-cue{position:fixed;left:50%;bottom:max(22px,calc(env(safe-area-inset-bottom) + 14px));z-index:12;translate:-50% 0;
  display:grid;place-items:center;min-width:64px;padding:8px 14px;border:0;background:none;color:#fff;cursor:pointer;
  -webkit-tap-highlight-color:transparent;transition:opacity .35s ease}
.scroll-cue.gone{opacity:0;pointer-events:none}
.scroll-cue:focus-visible{outline:2px solid #fff;outline-offset:2px;border-radius:999px}
.scroll-cue-in{display:flex;flex-direction:column;align-items:center;gap:10px;line-height:0}
/* "scroll" label: lowercase, regular weight, soft shadow only (no tight edge). It stays still; the arrow bounces. */
.scroll-cue-label{font-family:var(--font-text);font-weight:400;font-size:15px;line-height:1;letter-spacing:.01em;color:#fff;
  text-shadow:0 2px 14px rgba(0,0,0,.4)}
.scroll-cue svg{display:block;width:30px;height:auto;overflow:visible;
  filter:drop-shadow(0 1px 2px rgba(0,0,0,.25)) drop-shadow(0 3px 10px rgba(0,0,0,.22));
  animation:cue-bounce 1.8s cubic-bezier(.45,0,.55,1) infinite}
.scroll-cue:hover svg{animation-duration:1.1s}
@media (max-width:520px){ .scroll-cue svg{width:26px} .scroll-cue-label{font-size:14px} }
@keyframes cue-bounce{0%,100%{transform:translateY(0)}50%{transform:translateY(6px)}}
html.intro .scroll-cue{pointer-events:none}
html.intro .scroll-cue-in{opacity:0}
@media (prefers-reduced-motion:reduce){ .scroll-cue svg{animation:none} }

/* intro layer: only rendered while the intro runs (hero.js draws every frame of it).
   It sits between the video and the nav (see the layer order at the top of this file). */
.intro-layer{display:none}
html.intro .intro-layer{display:block;position:fixed;inset:0;z-index:11;pointer-events:none}
.intro-vignette{position:absolute;inset:0;background:radial-gradient(ellipse 60% 50% at 50% 50%,rgba(0,0,0,.42) 0%,rgba(0,0,0,.22) 45%,rgba(0,0,0,0) 80%)}
.intro-line,.intro-tagline{position:absolute;left:50%;width:min(92vw,20ch);translate:-50% 0;margin:0;text-align:center;color:#fff;opacity:0}
/* intro lines: Haas Grotesk Display 75 Bold (the Helvetica Neue Bold weight) */
.intro-line{top:50%;margin-top:-.6em;width:min(92vw,22ch);font-family:var(--font-display);font-weight:700;font-size:clamp(34px,1rem + 4vw,76px);line-height:1.02;letter-spacing:-.025em;
  text-shadow:0 2px 18px rgba(0,0,0,.34)}   /* soft, diffuse only: no tight offset, so it never reads as an outline */
.intro-line .w{display:inline-block;opacity:0}   /* each word fades and rises in on its own (hero.js) */
/* tagline: Haas Grotesk Text 66 Medium Italic */
/* tagline: one line, Haas Grotesk Text 55 Roman (Helvetica Neue Regular), 40% larger than before (was 16–20px).
   hero.js shrinks it to fit narrow screens and only lets it wrap below 13px. */
.intro-tagline{top:calc(50% + min(60px,10vw) + 28px);width:auto;max-width:calc(100vw - 2 * var(--pad-x));white-space:nowrap;
  font-family:var(--font-text);font-weight:400;font-style:normal;font-size:clamp(22.4px,1.26rem + .56vw,28px);line-height:1.35;
  letter-spacing:-.05em;                       /* tracking -50 (in 1/1000 em, as in Figma/Illustrator) */
  -webkit-text-stroke:.014em currentColor;     /* 15% thicker letters: the font's stems are 0.093em, +0.014em */
  paint-order:stroke fill;
  text-shadow:0 2px 18px rgba(0,0,0,.34)}
/* loading ring: a small, quiet progress ring in its own band below the tagline (hero.js sets --tag-h to the
   tagline's real height, so text never overlaps it). A thin white arc fills a faint circle; no number. */
.intro-load{position:absolute;left:50%;top:calc(50% + min(60px,10vw) + 28px + var(--tag-h,38px) + 26px);
  width:22px;height:22px;translate:-50% 0;opacity:0}
.intro-load svg{display:block;width:100%;height:100%;rotate:-90deg;overflow:visible;filter:drop-shadow(0 2px 8px rgba(0,0,0,.3))}
.intro-load circle{fill:none;stroke-width:2}
.intro-load-track{stroke:rgba(255,255,255,.22)}
.intro-load-arc{stroke:#fff;stroke-linecap:round;stroke-dasharray:0 100}
/* ---- Phones only (≤520px): two-line tagline 20% larger, centred; slightly larger ring ---- */
.intro-tagline .m-br{display:none}
@media (max-width:520px){
  .intro-tagline{left:var(--pad-x);right:var(--pad-x);width:auto;max-width:none;translate:none;
    white-space:normal;font-size:16px;text-wrap:balance}
  .intro-tagline .m-br{display:inline}
  .intro-load{width:24px;height:24px}
}
.intro-tagline.wraps{white-space:normal;width:calc(100vw - 2 * var(--pad-x));text-wrap:balance}
.intro-tagline .w{display:inline-block;opacity:0}   /* each word eases in with a glow flicker (hero.js) */

/* intro state: page scroll locked (the wheel drives the intro instead).
   These are only the first-paint values; hero.js overrides them with inline styles each frame.
   The logo stays in its nav slot and is transformed to the centre, so it is one element throughout. */
/* Scroll is locked in hero.js, not with overflow:hidden: hiding the scrollbar here made the page
   ~15px wider during the intro, so it jumped (video re-crop, nav shift) when the scrollbar came back. */
html.intro,html.intro body{overscroll-behavior:none}
html.intro .nav,html.intro .talk{opacity:0;pointer-events:none}
html.intro .hero-media video{opacity:0}
html.intro .logo img{opacity:0}

/* reduced motion: plain crossfade on scroll, no scale, video holds its first frame */
@media (prefers-reduced-motion:reduce){
  .hero-media img,.hero-media video{transform:none}
}

@media (max-width:520px){
  .bar{gap:8px}
  .nav{gap:14px}
  .nav a{font-size:15px}
  .talk{height:40px;padding:0 13px 0 14px;gap:6px;font-size:15px}
  .logo img{height:27.5px}
}
/* "Book a Call" is longer than the old label: drop its chevron on narrow phones so the nav fits inside the pill */
@media (max-width:420px){ .talk{padding:0 14px} .talk svg{display:none} }
@media (max-width:380px){ .logo img{height:22.5px} .nav{gap:12px} }