/* HOME PAGE: base, header, menu and hero layout rules (t1798: responsive). Numbers come from tokens.css; change them there.
   Nav: the authored v3c scroll-proportional morph (package source), early rounding (t1793), plus nav tiers so header contents never overlap.
   Body: the approved 1440x900 composition scaled by --u on desktop; a stacked layout (video band, then copy) on narrow/portrait screens. */

* { box-sizing: border-box; }
html { -webkit-text-size-adjust: 100%; background: var(--black); }
body { margin: 0; background: var(--black); color: var(--white); font-family: var(--font); font-size: 17px; line-height: 1.45;
       -webkit-font-smoothing: antialiased; -moz-osx-font-smoothing: grayscale; }
a { color: inherit; text-decoration: none; }
:focus-visible { outline: 2px solid var(--white); outline-offset: 3px; }
.sr-only { position: absolute; width: 1px; height: 1px; margin: -1px; padding: 0; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; border: 0; }

/* ---------------- Nav: continuous, scroll-proportional morph. --p (0..1) and --a (glass alpha) are set on #nav by js/home.js. ---------------- */
.nav { position: fixed; inset: 0 0 auto 0; height: 0; z-index: 50; --p: 0; --a: 0; }
.bar {
  position: absolute; transform: translateX(-50%);
  top: calc(var(--pill-top) * var(--p));
  left: calc(50% - var(--pill-shift-x) * var(--p));
  width: calc(100% + (var(--pill-w) - 100%) * var(--p));
  height: calc(var(--nav-h) - (var(--nav-h) - var(--pill-h)) * var(--p));
  padding: 0 calc(var(--pad-r0) - (var(--pad-r0) - var(--pad-r1)) * var(--p)) 0 calc(var(--pad-l0) - (var(--pad-l0) - var(--pad-l1)) * var(--p));
  display: flex; align-items: center; justify-content: space-between;
  /* t1793: full pill by p = --round-fraction (own ramp), instead of the authored 20px * p. */
  border-radius: calc(var(--pill-radius) * min(1, var(--p) / var(--round-fraction)));
  background-color: rgba(20, 20, 20, var(--a));
  -webkit-backdrop-filter: blur(calc(var(--glass-blur) * var(--p))) saturate(calc(1 + var(--glass-sat) * var(--p)));
          backdrop-filter: blur(calc(var(--glass-blur) * var(--p))) saturate(calc(1 + var(--glass-sat) * var(--p)));
  /* ADAPTED: the authored 1px border is an inset ring, so it cannot shift the content by 1px. */
  box-shadow: inset 0 0 0 1px rgba(255, 255, 255, calc(var(--glass-line) * var(--p))), 0 8px 32px rgba(0, 0, 0, calc(var(--glass-shadow) * var(--p)));
  color: var(--white);
}
/* header-tab fade (t2110u, darkened t2113u): desktop only; stacked/mobile untouched. Same shape as the approved v1 fade
   (plateau through the 72px bar, easing to 0 by 220px) but a darker plateau (alpha 0.76, was 0.53) so the white halo
   under the bar reads about 50-60/255 and wordmark contrast stays at least 10:1. Black-based tint only, so it is invisible
   over black. This fade is an explicit user-requested exception to the no-gradient rule because it recreates the approved v1 header.
   The .bar's own fill is transparent at the top and becomes the unchanged pill rgba(20,20,20,var(--glass-alpha-max)) as you scroll. */
@media (min-width: 1020px) and (min-height: 704px) {
  .bar { background-color: rgba(calc(20 * var(--p)), calc(20 * var(--p)), calc(20 * var(--p)), calc(var(--glass-alpha-max) * var(--p))); }
  .nav::before {
    content: "";
    position: absolute; left: 0; right: 0; top: 0; height: 220px;
    pointer-events: none;
    background-image: linear-gradient(180deg, /* nogradient-allow: recreates approved v1 header-tab fade */
      rgba(0,0,0,0.76) 0%,
      rgba(0,0,0,0.76) 32.7%,
      rgba(0,0,0,0.67) 41%,
      rgba(0,0,0,0.53) 50%,
      rgba(0,0,0,0.40) 59%,
      rgba(0,0,0,0.29) 68%,
      rgba(0,0,0,0.17) 77%,
      rgba(0,0,0,0.09) 86%,
      rgba(0,0,0,0.03) 95%,
      rgba(0,0,0,0) 100%);
    opacity: calc(1 - var(--p));
  }
}
.lead { display: flex; align-items: center; min-width: 0; flex: none; }
.ico { display: block; flex: none; position: relative; line-height: 0; color: inherit;
       width: calc(var(--ico-0) - (var(--ico-0) - var(--ico-1)) * var(--p)); height: calc(var(--ico-0) - (var(--ico-0) - var(--ico-1)) * var(--p));
       margin-right: calc(var(--ico-gap-0) - (var(--ico-gap-0) - var(--ico-gap-1)) * var(--p)); }
.ico::after { content: ""; position: absolute; inset: -11px; }   /* 40px hit area */
.emb { display: block; width: 100%; height: 100%; }
.emb-top  { fill: var(--emblem-red); }
.emb-body { fill: var(--emblem-body); }
.links { display: flex; white-space: nowrap;
         gap: calc(var(--links-gap-0) - (var(--links-gap-0) - var(--links-gap-1)) * var(--p));
         font-size: calc(var(--nav-font-0) - (var(--nav-font-0) - var(--nav-font-1)) * var(--p)); }
.links a, .signin { text-decoration: underline; text-decoration-color: transparent; text-decoration-thickness: 1px; text-underline-offset: 5px; transition: text-decoration-color .2s; }
.links a:hover, .signin:hover { text-decoration-color: currentColor; }
/* Wordmark: centred on the bar (ADAPTED, see index.html). */
.brand { position: absolute; left: 50%; top: 50%; transform: translate(-50%, -50%); display: block; line-height: 0; }
.wordmark { display: block; width: auto; height: calc(var(--wordmark-h-0) - (var(--wordmark-h-0) - var(--wordmark-h-1)) * var(--p)); }
.actions { display: flex; align-items: center; white-space: nowrap; flex: none;
           gap: calc(var(--actions-gap-0) - (var(--actions-gap-0) - var(--actions-gap-1)) * var(--p));
           font-size: calc(var(--nav-font-0) - (var(--nav-font-0) - var(--nav-font-1)) * var(--p)); }

/* Header CTA: filled. Authored colour-mix from #EDEDED (scroll 0) to white (full scroll); height, padding, size and radius follow p. */
.btn { display: inline-flex; align-items: center; justify-content: center; border-radius: 999px; font-family: var(--font); font-weight: 500; white-space: nowrap; cursor: pointer; }
.btn-primary {
  background: #FFFFFF; background: color-mix(in srgb, #FFFFFF calc(100% * var(--p)), var(--cta-rest));
  color: #000000; color: color-mix(in srgb, #0A0A0A calc(100% * var(--p)), #000000);
  height: calc(var(--cta-h-0) - (var(--cta-h-0) - var(--cta-h-1)) * var(--p)); padding: 0 var(--cta-pad);
  font-size: calc(var(--nav-font-0) - (var(--nav-font-0) - var(--nav-font-1)) * var(--p));
  border-radius: calc(var(--cta-radius-1) * var(--p));
  transition: border-radius var(--cta-lag) cubic-bezier(.2, .7, .2, 1), background-color var(--cta-lag), color var(--cta-lag), height var(--cta-lag), transform .2s;
}
.btn:active { transform: scale(.98); }

/* Menu button (E1): three equal lines, 16 x 1.5px, at x=12, y=13/19/25 in the 40px box; rightmost at scroll 0.
   t1839: it has NO background, border or shadow of its own in any state. Scrolled, it sits inside the shared nav pill (the .bar draws the glass), at the pill's right end,
   vertically centred in the 40px pill. It is a later sibling of .bar, so it paints above the pill. Position at scroll 0 is unchanged (left = 100% - inset - 40px, top 16px). */
.menu {
  position: absolute; display: block; padding: 0; cursor: pointer; color: var(--white);
  width: var(--menu-size); height: var(--menu-size); border-radius: 50%;
  top: calc(var(--menu-top-0) - (var(--menu-top-0) - var(--menu-top-1)) * var(--p));
  left: calc(100% - var(--menu-inset) - var(--menu-size) + (var(--menu-pill-x) + var(--menu-inset) + var(--menu-size) - 50%) * var(--p));
  border: 1px solid transparent;   /* kept (transparent) so the burger lines keep their exact offset inside the box */
  background: none; box-shadow: none;
}
.menu::after { content: ""; position: absolute; inset: -2px; border-radius: 50%; }   /* 44px hit area */
.burger { position: absolute; left: 11px; top: 12px; width: 16px; height: 13.5px; pointer-events: none; }
.burger i { position: absolute; left: 0; width: 16px; height: 1.5px; border-radius: 1px; background: currentColor; transform-origin: 50% 50%;
            transition: top 220ms cubic-bezier(.22,.61,.36,1), transform 220ms cubic-bezier(.22,.61,.36,1), opacity 140ms cubic-bezier(.22,.61,.36,1); }
.burger i:nth-child(1) { top: 0; } .burger i:nth-child(2) { top: 6px; } .burger i:nth-child(3) { top: 12px; }
.menu[aria-expanded="true"] .burger i:nth-child(1) { top: 6.25px; transform: rotate(45deg); }
.menu[aria-expanded="true"] .burger i:nth-child(2) { opacity: 0; }
.menu[aria-expanded="true"] .burger i:nth-child(3) { top: 6.25px; transform: rotate(-45deg); }
.nav .bar :focus-visible, .nav .menu:focus-visible { outline-color: var(--white); }

/* Nav tiers [PROPOSAL]. 800 and up: everything. 700-799: Sign in moves to the menu panel. Under 700: phone nav, links also move to the panel, wordmark sits beside the emblem. */
@media (max-width: 799.98px) { .signin { display: none; } }
@media (max-width: 699.98px) {
  .links { display: none; }
  .brand { position: static; transform: none; margin: 0 auto 0 8px; }
}

/* ---------------- Menu panel (restored v1 panel): white glass over the dark page; follows the morph for position. ---------------- */
.menu-scrim { position: fixed; inset: 0; background: transparent; }
.menu-panel { position: fixed; width: var(--panel-w); padding: 10px; border-radius: var(--panel-radius);
  top: calc(64px - 4px * var(--p));                                                                                       /* [AUTH] */
  right: calc(var(--menu-inset) + (50% - (var(--pill-w) / 2 - var(--pill-menu-edge) + var(--menu-inset))) * var(--p));   /* t1839: panel's right edge meets the hamburger's right edge inside the pill (was 24px outside) */
  background-color: rgba(255, 255, 255, .98); border: 1px solid rgba(10, 10, 10, .10); color: var(--ink);
  box-shadow: 0 18px 50px rgba(0, 0, 0, .45), 0 1px 0 rgba(255, 255, 255, .6) inset;
  -webkit-backdrop-filter: blur(24px) saturate(180%); backdrop-filter: blur(24px) saturate(180%);
  opacity: 0; transform: translateY(-6px) scale(.985); transform-origin: top right;
  transition: opacity 200ms cubic-bezier(.22,.61,.36,1), transform 200ms cubic-bezier(.22,.61,.36,1); }
.menu-panel.is-open { opacity: 1; transform: none; }
.mp-links { display: flex; flex-direction: column; padding: 4px 0 8px; border-bottom: 1px solid rgba(10, 10, 10, .10); margin-bottom: 10px; }
.mp-links a { display: flex; align-items: center; min-height: 52px; padding: 0 14px; border-radius: 14px;
  font-family: var(--font); font-weight: 400; font-size: 24px; line-height: 1; letter-spacing: -0.01em; transition: background-color .2s; }
.mp-links a:hover { background-color: rgba(10, 10, 10, .05); }
/* t1858u: the footer is a compact row of three equal links (Instagram, LinkedIn, X), each icon over its short label (so three fit the 340px panel and a 320px phone without overflow);
   every link is at least 48px tall and 48px wide (above the 44px minimum). The divider above the row is .mp-links' own border-bottom, unchanged. Focus uses the panel's existing :focus-visible rule. */
.mp-actions { display: flex; gap: 8px; }
.mp-soc { flex: 1 1 0; min-width: 0; min-height: 64px; display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 5px; padding: 8px 4px;
  border: 1px solid rgba(10, 10, 10, .22); border-radius: 18px; font-family: var(--font); font-size: 12.5px; line-height: 1.2; font-weight: 500; letter-spacing: 0; white-space: nowrap; transition: border-color .2s, background-color .2s, color .2s; }
.mp-soc svg { display: block; flex: none; width: 22px; height: 22px; }
.mp-soc span { display: block; max-width: 100%; overflow: hidden; text-overflow: ellipsis; }
.menu-panel :focus-visible { outline-color: currentColor; }
@media (max-width: 699.98px) {
  .menu-panel { left: 16px; right: 16px; width: auto; max-height: calc(100svh - 76px); overflow-y: auto; }
  .mp-links a { min-height: 56px; font-size: 28px; }
  .mp-soc { min-height: 68px; }
  .menu-scrim { background: rgba(0, 0, 0, .32); }
}
@media (prefers-reduced-motion: reduce) { .burger i, .menu-panel { transition: none; } }

/* ---------------- Hero ---------------- */
.hero { position: relative; height: 100vh; height: var(--hh);
  min-height: 640px; min-height: 100vh; min-height: 100svh; min-height: 100dvh; min-height: var(--vh-now, 100dvh);
  background: var(--black); color: var(--white); overflow: hidden; }   /* 2026-11-09: always at least the viewport, so #team-f2 is never visible at scroll 0. --hh still caps typography scale. */
.hero-upper, .hero-invite { display: contents; }

/* One continuous video layer, full bleed. Black-point levels are baked into the video (crush <=~14/255 to 0
   with a smooth knee; midtones and highlights unchanged) so the video box edges match the page black in every browser.
   js/hero-frame.js may set a transform on the man's shots only. */
.hero-media { position: absolute; inset: 0; overflow: hidden; --video-top-cover: 0px; }
.media-plate { position: absolute; inset: 0; background: var(--black); }
.hero-video { position: absolute; left: 0; right: 0; top: 0; width: 100%; height: var(--video-h, 100%); object-fit: cover; object-position: var(--video-position); display: block; }
.hero.media-missing .hero-video { display: none; }
/* Bottom fade: black overlay, smoothstep alpha from 80% to 98%, solid black after. Never baked into the video. */
.hero-media::after { content: ""; position: absolute; left: 0; right: 0; top: 0; height: min(100%, var(--video-h, 100%)); pointer-events: none;   /* t2216u: the fade is measured on the VIDEO box, so a video shorter than the hero always ends in the same soft fade, never a flat edge */
  background: linear-gradient(90deg, var(--black) var(--video-nudge, 0px), rgba(0,0,0,0) calc(var(--video-nudge, 0px) + min(64px, var(--video-nudge, 0px)))),   /* t2052u: blends the left strip a half-window nudge uncovers; a no-op when the nudge is 0 */
    linear-gradient(180deg, var(--black) var(--video-top-cover, 0px), rgba(0,0,0,0) calc(var(--video-top-cover, 0px) + min(8px, var(--video-top-cover, 0px)))),   /* t2111u: mats the top edge of a scaled man frame (lifted blacks ~9/255); a no-op when the cover is 0 */
    linear-gradient(180deg,
    rgba(0,0,0,0) var(--fade-start),
    rgba(0,0,0,.028) calc(var(--fade-start) + var(--fade-span) * .1),
    rgba(0,0,0,.104) calc(var(--fade-start) + var(--fade-span) * .2),
    rgba(0,0,0,.216) calc(var(--fade-start) + var(--fade-span) * .3),
    rgba(0,0,0,.352) calc(var(--fade-start) + var(--fade-span) * .4),
    rgba(0,0,0,.5)   calc(var(--fade-start) + var(--fade-span) * .5),
    rgba(0,0,0,.648) calc(var(--fade-start) + var(--fade-span) * .6),
    rgba(0,0,0,.784) calc(var(--fade-start) + var(--fade-span) * .7),
    rgba(0,0,0,.896) calc(var(--fade-start) + var(--fade-span) * .8),
    rgba(0,0,0,.972) calc(var(--fade-start) + var(--fade-span) * .9),
    #000 calc(var(--fade-start) + var(--fade-span)), #000 100%); }

/* ---- Desktop landscape: the approved composition. TYPE and LAYOUT scale separately (t1803). ----
   --u (1px at 1440x900) scales positions, gaps, the form and its controls. --t scales type: it equals --u at and above 1440x900 but shrinks much more slowly below,
   so text stays readable in intermediate windows instead of shrinking with the whole composition. Type is also capped so the widest line always clears the light
   (--disc is where the arc starts). Line-heights are ratios of the font size, so line boxes follow the type. Each group is one flow block:
   the upper group is anchored to the top, the invite group to the bottom, and gaps between lines come from the reference numbers (x --u).
   At 1440x900 u = t = 1 and every number equals the approved composition. */
.hero { --hero-content-x: 0px; --hero-content-w: 100%; --subj-x: 71%; --subj-y: 48%; --subj-h: 85%; }
.hero-upper { position: absolute; left: calc(var(--gutter) + var(--hero-content-x, 0px)); top: calc(var(--h1-top) * var(--u) - var(--hero-lift, 0px)); display: flex; flex-direction: column; align-items: flex-start; }   /* --hero-lift: js/home.js makeRoom(), 0 unless the invite group would reach this copy */
/* t1840: the invite group is the APPROVED F1 "A-1 inline swap" markup and CSS (css/invite.css). Its bottom edge is the bottom of the last row (the 44px code/Skip line, 8px below the frame),
   at the reference's 81.4px (= 900 - 782.6 - 28 - 8) x --u from the hero's bottom: at 1440x900 the email frame is at y 707, exactly as in the approved composition. */
.hero-invite { position: absolute; left: calc(var(--gutter) + var(--hero-content-x, 0px)); bottom: calc((var(--ref-h) - var(--code-top) - var(--code-lh) - 8) * var(--u)); display: flex; flex-direction: column; align-items: flex-start; }
h1, .sub, .agent { margin: 0; }
h1 { font-family: var(--font); font-weight: var(--h1-weight); letter-spacing: var(--h1-tracking); line-height: calc(var(--h1-lh) / var(--h1-size));
  font-size: max(40px, min(calc(var(--h1-size) * var(--tbh)), calc((var(--disc) - var(--gutter) - 12px) / 8.9))); }   /* 8.9em = widest line, "Health Moves Fast." (measured 8.58 to 8.77em, plus margin) */
h1 .line { display: block; white-space: nowrap; }
.sub, .agent { white-space: nowrap; line-height: calc(var(--desc-lh) / var(--desc-size));
  font-size: max(18px, min(calc(var(--desc-size) * var(--tb)), calc((var(--disc) - var(--gutter) - 12px) / 22.1))); }   /* 22.1em = the one-line description (natural width 21.8em, plus margin) */
.hero.trim-agent .agent, .hero.trim-sub .sub { visibility: hidden; }   /* F1: after a failed send in a 704-780px tall window, makeRoom() in js/home.js hides the copy the form would reach (layout kept, so nothing shifts) */
.sub { margin-top: calc((var(--desc-top) - var(--h1-top) - 3 * var(--h1-lh)) * var(--ub)); font-weight: var(--desc-weight); }
.agent { margin-top: calc((var(--agent-top) - var(--desc-top) - var(--desc-lh)) * var(--ub)); font-weight: var(--agent-weight); }
/* t1840: the Request-an-invite visuals (email, handle, sent, code) are in css/invite.css (approved F1 source). The t1835 prototype rules (.bq-s, .seg, .sg, .bq-done, .bslot ...) are gone. */

/* ---- Narrow or portrait screens: STACKED layout. ----
   Triggers (t1807): width under 1020px, or height under 704px (landscape phones and short windows; F1, Nov 11, was 620px, with a 704px rule only under 1250px wide; the video's light starts
   too far left for desktop type to clear it at a readable size). No aspect trigger any more: the hero height cap (--hh) keeps squarer windows on the desktop composition.
   The approved video fills a band at the top (flush under the nav, no padding); the same bottom-fade overlay is applied to the band's height so it
   dissolves into the black the copy sits on. Copy, form and code line flow below with deliberate wrapping; the invite group sits at the bottom. */
@media (max-width: 1019.98px), (max-height: 703.98px), (min-width: 1020px) and (max-aspect-ratio: 4/5) {
  .hero { height: auto; min-height: 100vh; min-height: 100svh; min-height: 100dvh; min-height: var(--vh-now, 100dvh); display: flex; flex-direction: column; padding-bottom: clamp(24px, 6vw, 40px); }
  .hero-media { position: relative; inset: auto; flex: none; height: var(--band-h); }
  .hero-video { height: 100%; inset: 0; object-position: var(--band-pos); }
  .hero-media::after { height: 100%; }
  .hero-upper, .hero-invite { position: static; display: block; padding-inline: var(--s-gutter); }
  h1 { margin-top: clamp(4px, 1.5vw, 12px); font-size: var(--s-h1); line-height: var(--s-h1-lh); }
  .sub { margin-top: clamp(14px, 3.6vw, 24px); max-width: 34em; font-size: var(--s-text); line-height: 1.52; white-space: normal; text-wrap: balance; }
  .agent { margin-top: clamp(10px, 2.8vw, 18px); font-size: var(--s-text); line-height: 1.52; white-space: normal; text-wrap: balance; }
  .hero-upper { margin-bottom: clamp(28px, 7vw, 48px); }   /* t1840: the gap above the invite group (was the group's padding-top; its min-height 210px must be the group's own height) */
  .hero-invite { margin-top: auto; }                      /* the invite group itself (approved F1 markup and CSS) is styled in css/invite.css */
}
/* G1 (Nov 11, Design): stacked windows 700px wide and up (tablet widths of any height, and short windows of any width) start the video band 112px below the top, so the whole
   header (wordmark, nav, icon) sits on the page's solid black and her profile shows fully under it. No strip, gradient, scrim or fade: the band is only moved down.
   Phones (under 700px wide) and the desktop layout are unchanged. */
@media (min-width: 700px) and (max-width: 1019.98px), (min-width: 700px) and (max-height: 703.98px) {
  .hero-media { margin-top: 112px; }
}
/* Short windows (under 704px tall, 700px wide and up): the video's top edge is the top of her head, so frame from the top and make the band tall enough (30vw, so the band's own fade starts below her chin) to reach her chin and neck
   at any width; the page scrolls, as it does in every stacked window. */
@media (min-width: 700px) and (max-height: 703.98px) {
  .hero-media { height: max(var(--band-h), 30vw); }
  .hero-video { object-position: 60% 0%; }
}

/* t1949, t2064u: all three menu social buttons use the footer's Follow Staxyz hover (crimson fill, white icon and text); was LinkedIn only */
.mp-soc:is(:hover, :focus-visible) { border-color: #E13A26; background: #E13A26; color: #fff; }
.mp-soc:is(:hover, :focus-visible) span { color: #fff; }