/* ============================================================
   TRYBE — CINEMATIC PORTFOLIO · Sheldon Rodrigues
   near-black #0B0B0D · amber #FF7A18 · green #005d5c
   bone #ECE7DF · button teal #2dd4bf
============================================================ */

:root{
  --bg: #0B0B0D;
  --ink: #ECE7DF;
  --amber: #FF7A18;
  --green: #005d5c;
  --green-bright: #17a29d;
  --btn: #2dd4bf;
  --muted: rgba(236,231,223,.58);
  --line: rgba(236,231,223,.12);
  --card: #101014;
  --nav-h: 85px;         /* MEASURED rendered bar height, not a guess (D-20260814-16) */
  --font-head: 'Poppins', sans-serif;
  --font-sub: 'Playfair Display', serif;
}

*{ margin:0; padding:0; box-sizing:border-box; }
html{ background: var(--bg); }
html.lenis, html.lenis body{ height:auto; }
.lenis.lenis-smooth{ scroll-behavior:auto !important; }

body{
  background: var(--bg);
  color: var(--ink);
  font-family: var(--font-head);
  font-weight: 300;
  line-height: 1.6;
  overflow-x: hidden;
  -webkit-font-smoothing: antialiased;
}

img{ max-width:100%; display:block; }
a{ color: inherit; text-decoration: none; }

/* reveal states — early in the file so :hover rules further down win ties */
/* Reveal-on-scroll is a progressive enhancement (D-20260814-09h). Content is
   VISIBLE by default and only starts hidden while the reveal engine is
   confirmed running, so a missing or broken script can never paint a page
   blank again. That is exactly what emptied /portfolio and /speed-coaching:
   both carry data-reveal elements and neither loads main.js. */
[data-reveal]{ opacity:1; transform:none; }
.js-reveal [data-reveal]{ opacity:0; transform: translateY(42px); }
.js-reveal [data-reveal].revealed{ opacity:1; transform:none; }
.no-js [data-reveal]{ opacity:1; transform:none; }

::selection{ background: var(--btn); color:#062a26; }
::-webkit-scrollbar{ width:9px; }
::-webkit-scrollbar-track{ background:#0B0B0D; }
::-webkit-scrollbar-thumb{ background:#26262c; border-radius:6px; }
::-webkit-scrollbar-thumb:hover{ background: var(--green-bright); }

/* ============ persistent navbar — transparent, text only ============ */
/* ============ NAV STRIP (Sheldon, 14 Aug 2026): edge-to-edge glass band.
   One shared treatment across all five sites; content scrolls underneath and
   must never read through as interleaved text. ============ */
.nav-bar{
  position: fixed; inset: 0 0 auto 0; z-index: 90;
  /* Frosted glass, matching the pricing cards (Sheldon, 14 Aug 2026): the
     cards' white sheen gradient, their blur, their teal hairline and their
     drop shadow, so the bar floats instead of reading as a black band. The
     tint is deliberately light (.30, down from .74) so the bar reads as the
     same glass as the cards. Legibility is NOT bought back with darkness:
     nav labels sit on their own chip and measure 9.12:1 AAA. The lockup ink
     sits directly on the bar and measures 4.60:1 over a pure-white worst
     case, which is AAA at its display size and AA for the 12px role line.
     That is the honest limit of a tint this light; do not fix it by
     darkening the whole bar. (D-20260814-16) */
  background:
    linear-gradient(145deg, rgba(255,255,255,.10) 0%, rgba(255,255,255,.04) 100%),
    var(--nav-strip-bg, rgba(11, 11, 13, .14));
  /* Legibility is bought with blur and brightness on the backdrop, not with a
     dark plate over it (D-20260814-16). Heavy blur turns passing text into a
     wash; brightness pulls near-white content down without flattening the
     glass toward black the way the old .74 tint did. */
  -webkit-backdrop-filter: blur(24px) saturate(1.8) brightness(.82);
  backdrop-filter: blur(24px) saturate(1.8) brightness(.82);
  border-bottom: 1px solid rgba(0, 178, 169, .4);
  box-shadow: 0 20px 40px -10px rgba(0,0,0,.7), 0 10px 20px -5px rgba(0,178,169,.15);
  pointer-events: none;
}
/* anchors land fully below the strip */
html{ scroll-padding-top: var(--nav-h); }
/* the bar drops to min-height 66px under 640px, so the token follows it */
@media (max-width: 640px){ :root{ --nav-h: 67px; } }
.nav-bar a, .nav-bar button{ pointer-events: auto; }
.nav-inner{
  display: grid;
  /* auto 1fr auto: the middle track takes ALL leftover space and the links
     center inside it — equal air between brand-links and links-CTA */
  grid-template-columns: auto 1fr auto;
  align-items: center;
  gap: 18px;
  max-width: 1760px;
  margin: 0 auto;
  padding: 10px 26px;
  min-height: 84px;
}
.nav-brand{ justify-self: start; display:flex; flex-direction:column; line-height:1.1; }
.nav-name{
  font-family: var(--font-head); font-weight: 900;
  font-size: 20px; letter-spacing: .155em; text-transform: uppercase;
  color: #fff;
  text-shadow: 0 2px 4px rgba(0,0,0,.85), 0 4px 18px rgba(0,0,0,.6);
  white-space: nowrap;
}
.nav-name .stroke-name{
  color: transparent;
  -webkit-text-stroke: 0.6px rgba(236,231,223,.92);
  text-shadow: none;
  filter: drop-shadow(0 2px 2px rgba(0,0,0,.8)) drop-shadow(0 4px 10px rgba(0,0,0,.5));
}
.nav-role{
  font-family: var(--font-head); font-weight: 400;
  font-size: 12px; letter-spacing: .18em; text-transform: uppercase;
  color: #fff; margin-top: 4px;
  text-shadow: 0 1px 3px rgba(0,0,0,.85), 0 3px 10px rgba(0,0,0,.6);
  white-space: nowrap;
}
.nav-links{ justify-self: stretch; display:flex; align-items:center; justify-content: space-evenly; gap: clamp(10px, 2.2vw, 40px); width: 100%; padding: 0 clamp(8px, 3vw, 48px); }
/* Each link is a visible chip so it reads unmistakably as a set of tabs —
   a visitor said the old bare text row was confusing. Tighter letter-spacing
   pays for the added padding, so the row is no wider than before. */
.nav-links a{
  font-family: var(--font-head); font-weight: 600;
  font-size: 11.5px; letter-spacing: .1em; text-transform: uppercase;
  color: rgba(236,231,223,.95);
  padding: 7px 10px; border-radius: 9px;
  border: 1px solid rgba(236,231,223,.16);
  background: rgba(11, 11, 13, .62);   /* chip protects the label so the bar stays glass */
  transition: color .25s ease, background .25s ease, border-color .25s ease;
  white-space: nowrap;
  text-shadow: 0 1px 10px rgba(0,0,0,.8);
}
.nav-links a:hover,
.nav-links a:focus-visible{ color: #06231f; background: var(--btn); border-color: var(--btn); }
.nav-right{ justify-self: end; display:flex; align-items:center; gap: 16px; }
/* .nav-right prefix outranks the base .btn rule that appears later in the file */
.nav-right .btn-nav{ padding: 13px 20px; font-size: 10.5px; white-space: nowrap; }
/* The longer nav label met the last nav link at 1440 (links end 1128, button
   began 1126). Where the full link row is showing, the button tightens. */
@media (min-width: 1281px) and (max-width: 1700px){ .nav-right .btn-nav{ letter-spacing: .1em; padding: 13px 14px; } }
/* 1561 to 1640: the link row steps up a size at 1561 (links end 1299) and the
   button needs about 30px more room than .1em tracking leaves. */
@media (min-width: 1561px) and (max-width: 1640px){ .nav-right .btn-nav{ font-size: 10px; letter-spacing: .04em; padding: 13px 10px; } }

/* fixed Trybe logo — bottom right, always visible */
.corner-logo{
  position: fixed; right: 26px; bottom: 40px; z-index: 92;
  display:block;
  transition: transform .35s ease;
}
.corner-logo:hover{ transform: scale(1.07); }
.corner-logo img{
  width: 96px; height: auto;
  filter: drop-shadow(0 6px 18px rgba(0,0,0,.55));
}
.nav-toggle{
  display:none;
  background:none; border:1px solid rgba(236,231,223,.25); border-radius:8px;
  width:44px; height:40px; cursor:pointer;
  flex-direction:column; align-items:center; justify-content:center; gap:5px;
}
.nav-toggle span{ display:block; width:20px; height:2px; background:var(--ink); transition: all .3s; }
@media (max-width: 1480px){
  .nav-links{ gap: 9px; }
  .nav-links a{ font-size: 10px; letter-spacing:.07em; padding: 6px 8px; }
}
/* 1240 -> 1400 (25 Sep 2026). A later block hides the link row at <=1400,
   but the drawer styles lived here at <=1240, so from 1241 to 1400 (1280 and
   1366 laptops) the menu button opened nothing: measured 0 reachable links.
   The drawer now switches on exactly where the row switches off. */
@media (max-width: 1400px){
  .nav-links{ display:none; }
  .nav-toggle{ display:flex; }
  .nav-inner{ grid-template-columns: auto 1fr; }
  .nav-right{ grid-column: 2; }
  /* Glassmorphic dropdown — same frosted-glass recipe as the site's glass
     cards (white gradient sheen + heavy blur + hairline border), floated as a
     rounded panel inset from the edges so the chips are no longer cramped. */
  .nav-bar.nav-open .nav-links{
    display:flex; flex-direction:column; gap: 14px;
    position:absolute; top:calc(100% + 10px);
    /* stretch overrides the base .nav-links{justify-self:center}, which was
       confining this abs-positioned panel to its narrow middle grid column
       (the cause of the cramped ~223px centred menu). */
    justify-self: stretch;
    left: clamp(12px, 4vw, 28px); right: clamp(12px, 4vw, 28px);
    background:
      linear-gradient(145deg, rgba(255,255,255,.10) 0%, rgba(255,255,255,.03) 100%),
      rgba(11,11,13,.55);
    backdrop-filter: blur(22px) saturate(1.3);
    -webkit-backdrop-filter: blur(22px) saturate(1.3);
    border: 1px solid rgba(236,231,223,.16);
    border-radius: 18px;
    box-shadow: 0 26px 60px -14px rgba(0,0,0,.75), 0 10px 24px -8px rgba(0,0,0,.6);
    padding: 22px clamp(20px, 6vw, 40px) 26px;
    text-align:center;
  }
  /* chips breathe: full-width tap targets with real inner padding */
  .nav-bar.nav-open .nav-links a{
    font-size: 13px; display:block; width:100%;
    padding: 13px 16px; border-radius: 12px;
  }
}
@media (max-width: 900px){
  .nav-right .btn-nav{ display:none; }
}
@media (max-width: 640px){
  .nav-name{ font-size: 15px; }
  .nav-inner{ min-height: 66px; }
  .corner-logo img{ width: 64px; }
  .corner-logo{ right: 12px; bottom: 10px; }
}

/* frame HUD (bottom-left, echoes the reference site) */
.frame-hud{
  position:fixed; left:26px; right:26px; bottom:18px; z-index:90;
  pointer-events:none;
}
.frame-num{
  font-family:'Poppins',monospace,sans-serif; font-size:10px; font-weight:500;
  letter-spacing:.35em; color: rgba(236,231,223,.6);
}
.frame-num b{ color: var(--amber); font-weight:600; letter-spacing:.22em; }
.progress-rail{
  margin-top:8px; height:2px; width:100%;
  background: rgba(236,231,223,.08);
}
.progress-bar{
  height:100%; width:0%;
  background: linear-gradient(90deg, var(--amber), var(--btn));
  box-shadow: 0 0 12px rgba(255,122,24,.5);
}

/* film grain removed — clean high-definition image */

/* ============ persistent scroll hint · axis-aligned over the Trybe logo ============ */
.scroll-hint{
  position: fixed;
  right: 74px; /* = corner logo center: 26px offset + 96px/2 */
  top: 50%;
  transform: translate(50%, -50%);
  z-index: 88; pointer-events: none;
  display: flex; flex-direction: column; align-items: center; gap: 10px;
}
.hint-chevs{ position: relative; width: 20px; height: 26px; }
.hint-chev{
  position:absolute; left:50%; width:13px; height:13px;
  border-left:3px solid var(--amber);
  border-top:3px solid var(--amber);
  transform: translateX(-50%) rotate(45deg);
  filter: drop-shadow(0 1px 4px rgba(0,0,0,.75));
}
.hint-chev.c1{ top:12px; animation: chevRise 2.2s ease-in-out infinite; }
.hint-chev.c2{ top:0; animation: chevRise 2.2s ease-in-out .25s infinite; }
.hint-mouse{
  width: 27px; height: 45px;
  border: 2px solid rgba(236,231,223,.85);
  border-radius: 14px;
  position: relative;
  filter: drop-shadow(0 2px 8px rgba(0,0,0,.7));
}
.hint-mouse span{
  position:absolute; top:8px; left:50%; width:5px; height:11px; margin-left:-2.5px;
  border-radius:3px; background: var(--amber);
  box-shadow: 0 0 8px rgba(255,122,24,.8);
  animation: cue 1.8s ease-in-out infinite;
}
.hint-hand{
  display: none;
  filter: drop-shadow(0 2px 6px rgba(0,0,0,.7));
  animation: handSwipe 2.4s ease-in-out infinite;
}
.hint-label{
  font-family: var(--font-head);
  font-size: 10px; font-weight: 700;
  letter-spacing: .3em; text-transform: uppercase;
  color: var(--amber);
  text-shadow: 0 1px 6px rgba(0,0,0,.8);
  margin-right: -0.3em;
}
@keyframes handSwipe{
  0%, 12%{ transform: translateY(6px); opacity:.45; }
  38%{ transform: translateY(-12px); opacity:1; }
  62%{ transform: translateY(-12px); opacity:1; }
  88%, 100%{ transform: translateY(6px); opacity:.45; }
}
@keyframes chevRise{
  0%, 15%{ opacity:0; transform: translateX(-50%) translateY(8px) rotate(45deg); }
  45%{ opacity:1; transform: translateX(-50%) translateY(0) rotate(45deg); }
  75%, 100%{ opacity:0; transform: translateX(-50%) translateY(-8px) rotate(45deg); }
}
@media (max-width: 820px){
  .hint-mouse{ display:none; }
  .hint-hand{ display:block; }
}

/* ============ cinematic scenes ============ */
.scene{ position:relative; height:500vh; background:var(--bg); }
#scene-hero{ height:600vh; }
#scene-podcast{ height:360vh; }
#scene-panels{ height:400vh; }

/* fixed 100vh (not dvh): a dvh box resizes every time the mobile URL bar
   collapses/expands mid-scroll, which reads as jitter. The svh paddings on
   CTAs/words keep everything visible in the smallest viewport state. */
.scene-inner{
  position: sticky; top:0; height:100vh; overflow:hidden;
}
.scene-video{
  position:absolute; inset:0; width:100%; height:100%;
  object-fit:cover;
  transform: translateZ(0);
}
.scene-shade{
  position:absolute; inset:0;
  background:
    radial-gradient(ellipse at center, rgba(11,11,13,0) 42%, rgba(11,11,13,.55) 100%),
    linear-gradient(180deg, rgba(11,11,13,.45) 0%, rgba(11,11,13,0) 22%, rgba(11,11,13,0) 72%, rgba(11,11,13,.6) 100%);
}
.scene-shade-light{
  background:
    linear-gradient(180deg, rgba(11,11,13,.35) 0%, rgba(11,11,13,0) 25%, rgba(11,11,13,0) 70%, rgba(11,11,13,.5) 100%);
}

/* kinetic display type */
.word-stack{
  position:absolute; inset:0;
  display:grid; place-items:center;
  text-align:center; z-index:5;
}
.word-group{
  grid-area: 1/1;
  opacity:0;
  will-change: transform, opacity;
  padding: 0 4vw;
}
.display{
  font-family: var(--font-head);
  font-weight: 900;
  font-size: clamp(3.4rem, min(11.5vw, 13vh), 10.5rem);
  line-height: .92;
  letter-spacing: -.015em;
  text-transform: uppercase;
  display:flex; flex-direction:column; align-items:center;
}
.display-sm{ font-size: clamp(2.6rem, min(8vw, 11vh), 7.4rem); }
.display .fill{
  color: var(--ink);
  text-shadow: 0 2px 4px rgba(0,0,0,.8), 0 6px 18px rgba(0,0,0,.65), 0 12px 60px rgba(0,0,0,.5);
}
.display .stroke{
  color: transparent;
  -webkit-text-stroke: 2px rgba(236,231,223,.95);
  text-stroke: 2px rgba(236,231,223,.95);
  filter: drop-shadow(0 2px 5px rgba(0,0,0,.85));
}
.scene-caption{
  font-family: var(--font-sub);
  font-style: normal;
  font-size: clamp(1rem, 1.7vw, 1.35rem);
  color: #fff;
  max-width: 640px;
  margin: 26px auto 0;
  text-shadow: 0 2px 4px rgba(0,0,0,.85), 0 6px 20px rgba(0,0,0,.6);
}

/* scenes 1–3: words sit LOW (below the chin), same size and height everywhere */
.hero-words,
#scene-terminal .word-stack,
#scene-panels .word-stack{
  place-items: end center;
  padding-bottom: 27vh;
  padding-bottom: 25svh;
}
.hero-words .display,
#scene-terminal .display,
#scene-terminal .display-sm,
#scene-panels .display,
#scene-panels .display-sm{
  font-size: clamp(2.2rem, 6.5vw, 5.6rem);
}
#scene-panels .scene-caption{
  margin-top: 16px;
  font-size: clamp(.95rem, 1.5vw, 1.2rem);
}
.hero-words .display{
  font-size: clamp(2.2rem, 6.5vw, 5.6rem);
}
/* anchored to match the accelerator hero: words at 25svh, CTA block at 7svh */
.hero-words{
  padding-bottom: 27vh;
  padding-bottom: 25svh;
}
/* mid-width desktops: the long sub wraps to 3 lines, so the stack needs more clearance */
@media (min-width: 641px) and (max-width: 1450px){
  .hero-words{ padding-bottom: 38vh; padding-bottom: 36svh; }
  .hero-constant{ bottom: 9vh; bottom: 9svh; }
}

/* podcast subheadline */
.podcast-sub{
  font-family: var(--font-sub);
  font-style: normal;
  font-size: clamp(1.15rem, 2vw, 1.65rem);
  line-height: 1.6;
  color: #fff;
  max-width: 920px;
  text-shadow: 0 2px 4px rgba(0,0,0,.85), 0 6px 22px rgba(0,0,0,.65);
  text-wrap: balance;
}

/* hero constants */
.hero-constant{
  position:absolute; left:0; right:0; bottom:7vh; bottom:7svh; z-index:6;
  display:flex; flex-direction:column; align-items:center; gap:18px;
  text-align:center; padding:0 5vw;
}
.hero-sub{
  font-family: var(--font-head);   /* Poppins — readable over the busy collage, was thin serif */
  font-weight: 600;
  font-style: normal;
  font-size: clamp(.8rem, .92vw, .95rem);
  line-height: 1.45;
  max-width: 62ch; margin-left:auto; margin-right:auto;
  color: #ffffff;
  text-shadow: 0 2px 5px rgba(0,0,0,.92), 0 4px 20px rgba(0,0,0,.75);
}
.scroll-cue{
  position:relative;
  width:22px; height:38px; border:1px solid rgba(236,231,223,.55); border-radius:12px;
  margin: 0 auto 2px;
}
.scroll-cue span{
  position:absolute; top:7px; left:50%; width:3px; height:8px; margin-left:-1.5px;
  border-radius:2px; background:var(--amber);
  animation: cue 1.8s ease-in-out infinite;
}
.accent-amber{ color: var(--amber); font-style: inherit; }
.vision-text p.accent-amber{ color: var(--amber); } /* outranks .vision-text p */
.hero-sub-strong{
  /* green to match the button beneath it — same treatment as .mirror-cta-sub */
  color: var(--btn);
  font-weight: 700;
  text-shadow: 0 2px 4px rgba(0,0,0,.85), 0 4px 18px rgba(0,0,0,.65);
}
/* the promise line — same crisp treatment as the eyebrow (Poppins, spaced, shadow)
   but green, on its own line right above the button */
.hero-promise{
  font-family: var(--font-head);
  font-weight: 700;
  font-size: clamp(.92rem, 1.4vw, 1.14rem);
  letter-spacing: .12em; text-transform: uppercase;
  color: var(--btn);
  text-shadow: 0 2px 4px rgba(0,0,0,.9), 0 4px 16px rgba(0,0,0,.65);
  margin: 0;
}
@keyframes cue{ 0%{transform:translateY(0);opacity:1} 70%{transform:translateY(14px);opacity:0} 100%{opacity:0} }

/* podcast overlay — PODCAST between the neon sign and the bottles,
   subheadline on the clear wooden foreground of the table */
.podcast-overlay{
  position:absolute; inset:0; z-index:5;
  display:flex; flex-direction:column; align-items:center; justify-content:flex-end;
  text-align:center;
  padding-bottom: 5vh;
  opacity:0;
}
.podcast-overlay .display-podcast{
  position:absolute;
  top: 46%; left: 0; right: 0;
  transform: translateY(-50%);
}
.podcast-eyebrow{
  font-family: var(--font-sub);
  font-style: normal; font-weight:500;
  font-size: clamp(1.2rem, 2.4vw, 2rem);
  color: #ffb26b;
  text-shadow: 0 0 26px rgba(255,122,24,.55);
}
.display-podcast{ font-size: clamp(3rem, 10vw, 9rem); }

/* closer overlay — chest height, clear of the face */
.closer-overlay{
  position:absolute; inset:0; z-index:5;
  display:flex; flex-direction:column; align-items:center; justify-content:flex-end;
  gap: 16px; text-align:center; padding: 0 5vw 16vh;
  padding-bottom: 14svh;
  opacity:0;
}
.closer-overlay .display{ font-size: clamp(2.2rem, 6.4vw, 5.4rem); }
.closer-eyebrow{
  font-family: var(--font-head);
  font-weight:700; font-size: 14px;
  letter-spacing:.4em; text-transform:uppercase;
  color: #ffffff;
  text-shadow: 0 2px 4px rgba(0,0,0,.85), 0 4px 16px rgba(0,0,0,.6);
}
/* hero eyebrow — closer-eyebrow styling, sized up slightly for readability */
.hero-eyebrow{
  font-family: var(--font-head);
  font-weight: 700; font-size: 14px;
  letter-spacing: .4em; text-transform: uppercase;
  color: #ffffff; margin-bottom: 18px;
  text-shadow: 0 2px 4px rgba(0,0,0,.85), 0 4px 16px rgba(0,0,0,.6);
}
.closer-actions{ display:flex; gap:16px; flex-wrap:wrap; justify-content:center; margin-top:8px; }

/* buttons */
.btn{
  display:inline-block;
  font-family: var(--font-head);
  font-weight: 700;
  font-size: 13px;
  letter-spacing: .18em;
  text-transform: uppercase;
  padding: 17px 34px;
  border-radius: 8px;
  transition: transform .3s ease, box-shadow .3s ease, background .3s ease;
  cursor:pointer; border:0;
}
.btn-teal{
  background: var(--btn);
  color: #06231f;
  box-shadow: 0 8px 26px rgba(45,212,191,.35), 0 3px 10px rgba(0,0,0,.4);
}
.btn-teal:hover{
  transform: translateY(-3px) scale(1.02);
  box-shadow: 0 14px 36px rgba(45,212,191,.5), 0 5px 14px rgba(0,0,0,.5);
}
.btn-ghost{
  background: rgba(11,11,13,.55);
  color: var(--ink);
  border:1px solid rgba(236,231,223,.35);
  backdrop-filter: blur(8px);
}
.btn-ghost:hover{
  transform: translateY(-3px);
  border-color: var(--amber);
  color:#ffd9b8;
  box-shadow: 0 10px 30px rgba(255,122,24,.25);
}
.btn-block{ width:100%; }

/* ============ stats strip — sunrise image, echoing the waitlist ============ */
.stats-strip{
  position:relative; z-index:4;
  background: url("../webflow-local/6a4dca93dd6731c4d5172ffa_Trybe-Sunrise-Background--6b50d415.avif") center / cover no-repeat, #0B1727;
  border-top:1px solid var(--line);
  border-bottom:1px solid var(--line);
  padding: clamp(60px, 9vw, 110px) 5vw;
}
.stats-strip::before{
  content:''; position:absolute; inset:0;
  background: rgba(3,11,20,.28);
  pointer-events:none;
}
.stats-rail{ position:relative; z-index:1; }
.stats-rail{
  display:grid;
  grid-template-columns: repeat(6, 1fr);
  gap: 32px;
  max-width: 1640px; margin: 0 auto;
}
.stat{ text-align:center; }
.stat-num{
  display:block;
  font-family: var(--font-head);
  font-weight: 800;
  font-size: clamp(1.7rem, 3.1vw, 3rem);
  letter-spacing:-.01em;
  color: #fff;
  line-height:1.05;
  white-space: nowrap;
  text-shadow: 0 2px 4px rgba(0,0,0,.8), 0 6px 20px rgba(0,0,0,.6);
}
.stat-num::after{
  content:'';
  display:block; width:34px; height:2px;
  margin: 14px auto 12px;
  background: var(--amber);
  box-shadow: 0 0 12px rgba(255,122,24,.6);
}
.stat-label{
  font-size: 11px; font-weight:500;
  letter-spacing:.28em; text-transform:uppercase;
  color: rgba(255,255,255,.88);
  text-shadow: 0 1px 3px rgba(0,0,0,.85), 0 4px 14px rgba(0,0,0,.6);
}

/* ============ legacy zone — replicated from www.trybeinc.com/mentorship-community ============ */
.legacy-bg{
  position: relative;
  background: #030b14;
  background-image: radial-gradient(ellipse 120% 1400px at 50% 0%, #1F314F 0%, #0B1727 45%, #030b14 100%);
  background-repeat: no-repeat;
  overflow: clip;
}
.legacy-bg .section{ background: transparent; position: relative; z-index: 1; }

/* ambient glowing orbs — pinned to the viewport for the whole zone */
.legacy-orbs{
  position: sticky; top: 0; height: 100vh; margin-bottom: -100vh;
  pointer-events: none; z-index: 0; overflow: visible;
}
.legacy-orbs span{
  position: absolute; border-radius: 50%;
  mix-blend-mode: screen;
  filter: blur(160px);
  /* PERF 2026-07-16: static (was: animation blob 15s infinite) — animating a
     160px blur re-composites the whole zone every frame; the drift was barely
     visible. Revert = restore the animation line. */
  animation: none;
}
.orb-purple{ top:-5%; left:-5%; width:55rem; height:55rem; background:#6E298C; opacity:.35; }
.orb-teal{ top:35%; right:-5%; width:45rem; height:45rem; background:#00B2A9; opacity:.35; animation-delay:-2s; }
.orb-indigo{ bottom:-10%; left:15%; width:50rem; height:50rem; background:#4F46E5; opacity:.25; animation-delay:-4s; }
@keyframes blob{
  0%{ transform: translate(0,0) scale(1); }
  33%{ transform: translate(40px,-60px) scale(1.2); }
  66%{ transform: translate(-30px,30px) scale(0.9); }
  100%{ transform: translate(0,0) scale(1); }
}

/* glassmorphic cards — teal default, exactly per the original */
.legacy-bg .card,
.legacy-bg .img-panel,
.legacy-bg .vision-panel,
.legacy-bg .feature-card,
.legacy-bg .backstory-img{
  background: linear-gradient(145deg, rgba(255,255,255,0.06) 0%, rgba(255,255,255,0.02) 100%);
  backdrop-filter: blur(18px);
  -webkit-backdrop-filter: blur(18px);
  border-radius: 1.25rem;
  border: 1px solid rgba(0,178,169,0.4);
  box-shadow: 0 20px 40px -10px rgba(0,0,0,0.7), 0 10px 20px -5px rgba(0,178,169,0.15);
  transition: all 0.5s cubic-bezier(0.4,0,0.2,1);
}
.legacy-bg .card:hover,
.legacy-bg .img-panel:hover,
.legacy-bg .feature-card:hover,
.legacy-bg .vision-panel:hover,
.legacy-bg .backstory-img:hover{
  transform: translateY(-8px) scale(1.02);
  border-color: rgba(0,178,169,0.8);
  box-shadow: 0 30px 60px -15px rgba(0,0,0,0.8), 0 15px 30px -5px rgba(0,178,169,0.3);
}
.legacy-bg .vision-panel:hover{
  border-color: rgba(110,41,140,0.8);
  box-shadow: 0 30px 60px -15px rgba(0,0,0,0.8), 0 15px 30px -5px rgba(110,41,140,0.3);
}
.legacy-bg .img-panel{ padding: .75rem; cursor: pointer; }
.legacy-bg .img-panel img{ border-radius: 1rem; }

/* purple variant — vision panel, track-record banners, docu / social / UX categories
   (portfolio categories after moving coaching out: 1 podcast, 2 promo, 3 docu, 4 explainer, 5 social, 6 remote, 7 UX) */
.legacy-bg .glass-purple,
.legacy-bg .pf-category:nth-of-type(3) .card, .legacy-bg .pf-category:nth-of-type(3) .img-panel,
.legacy-bg .pf-category:nth-of-type(5) .card, .legacy-bg .pf-category:nth-of-type(5) .img-panel,
.legacy-bg .pf-category:nth-of-type(7) .card, .legacy-bg .pf-category:nth-of-type(7) .img-panel{
  border-color: rgba(110,41,140,0.4);
  box-shadow: 0 20px 40px -10px rgba(0,0,0,0.7), 0 10px 20px -5px rgba(110,41,140,0.15);
}
.legacy-bg .glass-purple:hover,
.legacy-bg .pf-category:nth-of-type(3) .card:hover, .legacy-bg .pf-category:nth-of-type(3) .img-panel:hover,
.legacy-bg .pf-category:nth-of-type(5) .card:hover, .legacy-bg .pf-category:nth-of-type(5) .img-panel:hover,
.legacy-bg .pf-category:nth-of-type(7) .card:hover, .legacy-bg .pf-category:nth-of-type(7) .img-panel:hover{
  border-color: rgba(110,41,140,0.8);
  box-shadow: 0 30px 60px -15px rgba(0,0,0,0.8), 0 15px 30px -5px rgba(110,41,140,0.3);
}

/* hover: ONLY the container lifts and zooms — imagery stays static inside */
.vision-img{ overflow:hidden; border-radius:14px; }
.legacy-bg .img-panel{ overflow:hidden; }
.embed{ overflow:hidden; }

/* original yellow accents inside the legacy zone */
.legacy-bg blockquote{
  border-left-color: #FBBF24;
  background: rgba(255,255,255,0.05);
}
.legacy-bg .ps-panel{
  background: rgba(11,23,39,0.8);
  border: 1px solid rgba(251,191,36,0.3);
}
.legacy-bg .ps-title{ color: var(--amber); }

/* ============ editorial sections ============ */
.section{
  position:relative; z-index:4;
  background: var(--bg);
  padding: clamp(90px, 12vw, 170px) 0;
  border-top: 1px solid var(--line);
}
.wrap{ max-width: 1280px; margin:0 auto; padding: 0 clamp(20px, 4vw, 48px); }
.wrap.narrow{ max-width: 880px; }

.eyebrow{
  font-family: var(--font-sub);
  font-style: normal; font-weight:500;
  font-size: clamp(1.05rem, 1.6vw, 1.35rem);
  color: var(--amber);
  margin-bottom: 18px;
}
.eyebrow::before{
  content:''; display:inline-block; vertical-align:middle;
  width:44px; height:1px; background:var(--amber); margin-right:14px; opacity:.7;
}
.headline{
  font-family: var(--font-head);
  font-weight: 900;
  font-size: clamp(2.3rem, 5.4vw, 4.6rem);
  line-height: 1.02;
  letter-spacing: -.02em;
  text-transform: uppercase;
  margin-bottom: clamp(40px, 5vw, 70px);
}
.headline em{
  font-style: normal;
  color: transparent;
  -webkit-text-stroke: 1.6px rgba(236,231,223,.85);
}
.headline-center{ text-align:center; }
.headline .nowrap{ white-space: normal; }
@media (min-width: 760px){
  .headline .nowrap{ white-space: nowrap; }
  .headline-vision{ font-size: clamp(2.1rem, 4.6vw, 4rem); }
}
.masterclass-cta{
  margin-top: clamp(18px, 2.4vw, 30px);
  display:flex; flex-direction:column; align-items:center; gap: 26px;
  text-align:center;
}
.masterclass-text{
  font-family: var(--font-sub);
  font-style: normal;
  font-size: clamp(1.05rem, 1.8vw, 1.4rem);
  color: rgba(236,231,223,.85);
  max-width: 780px;
  line-height: 1.7;
}
.nxt-block{ margin-top: clamp(56px, 7vw, 90px); }

/* full-bleed quote strip on the sunrise image */
.nxt-strip{
  position: relative;
  width: 100vw;
  margin-left: calc(50% - 50vw);
  margin-bottom: clamp(56px, 7vw, 90px);
  padding: clamp(70px, 9vw, 130px) clamp(28px, 8vw, 140px);
  background: url("../webflow-local/6a4dca93dd6731c4d5172ffa_Trybe-Sunrise-Background--6b50d415.avif") center / cover no-repeat, #0B1727;
  border-top: 1px solid rgba(236,231,223,.12);
  border-bottom: 1px solid rgba(236,231,223,.12);
}
.nxt-story{
  font-size: clamp(1.1rem, 1.7vw, 1.4rem);
  line-height: 1.9;
  color: #fff;
  max-width: 940px;
  margin: 0 auto;
  text-align: center;
  text-shadow: 0 2px 4px rgba(0,0,0,.8), 0 6px 22px rgba(0,0,0,.6);
  position: relative; z-index: 1;
}
.nxt-story .accent-amber{ text-shadow: 0 2px 4px rgba(0,0,0,.85), 0 6px 22px rgba(0,0,0,.6); }
.q-mark{
  position: absolute;
  font-family: var(--font-sub);
  font-size: clamp(4.5rem, 8vw, 8rem);
  line-height: 1;
  color: #fff;
  text-shadow: 0 3px 10px rgba(0,0,0,.7);
  opacity: .9;
  z-index: 1;
}
.q-open{ top: clamp(14px, 2.4vw, 30px); left: max(16px, calc(50% - 560px)); }
.q-close{ bottom: clamp(0px, 1vw, 10px); right: max(16px, calc(50% - 560px)); }
.nxt-cta{ margin-top: clamp(30px, 4vw, 44px); }
.nxt-story-last{ margin-top: 18px; white-space: nowrap; }
@media (max-width: 720px){ .nxt-story-last{ white-space: normal; } }
.nxt-strip-cta{ text-align: center; margin-top: 30px; position: relative; z-index: 1; }
.masterclass-panel{ margin-top: clamp(28px, 4vw, 44px); margin-bottom: 0; }
.lede{
  font-family: var(--font-sub);
  font-style: normal;
  font-size: clamp(1.05rem, 1.8vw, 1.4rem);
  color: rgba(236,231,223,.8);
  max-width: 760px;
  margin: -20px 0 clamp(40px, 5vw, 64px);
}
.lede.center{ margin-left:auto; margin-right:auto; text-align:center; }
.center{ text-align:center; }

/* cards & embeds */
.grid-2{ display:grid; grid-template-columns: 1fr 1fr; gap: clamp(20px, 3vw, 36px); }
.grid-2.tight{ gap: clamp(16px, 2vw, 24px); }
.grid-3{ display:grid; grid-template-columns: repeat(3, 1fr); gap: clamp(20px, 3vw, 32px); }
.span-center{ grid-column: 1 / -1; max-width: 620px; margin: 0 auto; width:100%; }

.card{
  /* glass by default (D-20260814-09i): no text surface is ever a solid
     dark panel, even if it renders outside .legacy-bg */
  background: linear-gradient(145deg, rgba(255,255,255,0.06) 0%, rgba(255,255,255,0.02) 100%);
  backdrop-filter: blur(18px);
  -webkit-backdrop-filter: blur(18px);
  border: 1px solid rgba(0,178,169,0.4);
  border-radius: 14px;
  overflow:hidden;
  transition: transform .5s cubic-bezier(.22,.9,.3,1), border-color .5s, box-shadow .5s;
}
.card:hover{
  transform: translateY(-6px);
  border-color: rgba(45,212,191,.45);
  box-shadow: 0 24px 60px rgba(0,0,0,.55), 0 8px 30px rgba(0,93,92,.35);
}
.card figcaption, .card-pad{ padding: 22px 26px; }
.card h3{
  font-family: var(--font-head);
  font-weight:600; font-size: 1.02rem;
  letter-spacing:.02em; color: var(--ink);
}
.card p{ font-size:.9rem; color: var(--muted); margin-top:6px; }
.card-pad h3{ margin: 14px 0 10px; font-size:1.15rem; }
.card-pad{ padding: 34px 30px; }
.value-index{
  font-family: var(--font-sub); font-style: normal;
  font-size: 1rem; color: var(--amber);
}

.embed{
  position:relative; padding-bottom:56.25%; height:0; background:#000;
}
.embed iframe{ position:absolute; inset:0; width:100%; height:100%; border:0; }

/* vision hero video — spans the full wrap, same width as the vision panel below it */
.vision-hero{
  max-width: none;
  margin: 0 auto clamp(34px, 4.5vw, 56px);
}

.img-panel{
  border-radius: 14px; overflow:hidden;
  border: 1px solid rgba(0,178,169,0.4);
  background: linear-gradient(145deg, rgba(255,255,255,0.06) 0%, rgba(255,255,255,0.02) 100%);
  backdrop-filter: blur(18px);
  -webkit-backdrop-filter: blur(18px);
  margin-bottom: clamp(20px, 3vw, 36px);
  transition: transform .5s cubic-bezier(.22,.9,.3,1), border-color .5s, box-shadow .5s;
}
/* reserve layout space for lazy panel images — their late load was growing
   the document mid-scroll, forcing a ScrollTrigger recalc that snapped the
   scrubbed scenes backward (the desktop "rewind" glitch). Ratios measured
   from the actual assets; the few non-16:9 panels get exact overrides. */
.img-panel img{ aspect-ratio: 16 / 9; width: 100%; height: auto; object-fit: cover; display: block; }
.masterclass-panel img{ aspect-ratio: 1178 / 662; }
.backstory-img img{ aspect-ratio: 975 / 1082; }
.vision-img img{ aspect-ratio: 1299 / 1613; width: 100%; height: auto; object-fit: cover; display: block; }
.img-panel:hover{
  transform: translateY(-4px);
  border-color: rgba(255,122,24,.4);
  box-shadow: 0 20px 50px rgba(0,0,0,.5);
}
.grid-2 .img-panel{ margin-bottom:0; }

/* vision */
.vision-panel{
  display:grid; grid-template-columns: 7fr 5fr; gap: clamp(28px, 4vw, 56px);
  background: linear-gradient(145deg, #101014 0%, #0c1213 100%);
  border:1px solid var(--line);
  border-radius: 20px;
  padding: clamp(28px, 4vw, 56px);
  margin-bottom: clamp(50px, 6vw, 80px);
  position:relative; overflow:hidden;
}
.vision-panel::after{
  content:''; position:absolute; right:-120px; top:-120px;
  width:340px; height:340px; border-radius:50%;
  background: radial-gradient(circle, rgba(0,93,92,.4), transparent 70%);
  pointer-events:none;
}
.vision-kicker{
  font-family: var(--font-sub); font-style: normal;
  color: var(--amber); font-size:1.05rem; margin-bottom:14px;
}
.vision-text h3{
  font-family: var(--font-head); font-weight:800;
  font-size: clamp(1.5rem, 2.8vw, 2.3rem);
  line-height:1.15; margin-bottom: 20px;
}
.vision-text .accent{ color: var(--btn); }
.vision-text p{ color: rgba(236,231,223,.78); margin-bottom: 22px; font-size:1.05rem; line-height:1.75; }

/* "try & be" quote — logo left, lines right-aligned */
.trybe-quote{
  display:flex; align-items:center; gap: 26px;
  justify-content: space-between;
  padding: 26px 30px;
  margin: 28px 0;
}
.trybe-quote-logo{
  width: 108px; height:auto; flex-shrink:0;
  filter: drop-shadow(0 6px 16px rgba(0,0,0,.45));
}
.trybe-quote-lines{
  text-align: left;
  font-family: var(--font-sub);
  font-style: normal;
  font-size: clamp(1.05rem, 1.6vw, 1.3rem);
  line-height: 2;
  color: var(--ink);
}
.trybe-quote-lines .q-lead{
  font-size: clamp(1.3rem, 2vw, 1.6rem);
  font-weight: 600;
  color: var(--ink);
  margin-bottom: 8px;
}
.trybe-quote-lines p{ color: var(--ink) !important; margin: 0 !important; font-size: inherit; }
.trybe-quote{ justify-content: flex-start; }
.trybe-quote-list{
  list-style: disc;
  padding-left: 1.2em;
  margin: 0;
  color: var(--ink);
}
.trybe-quote-list li{ margin: 4px 0; }
@media (max-width: 640px){
  .trybe-quote{ flex-direction: column; align-items: center; gap: 18px; }
  .trybe-quote-lines{ text-align: center; }
  .trybe-quote-list{ display: inline-block; text-align: left; }
}
blockquote{
  border-left: 3px solid var(--amber);
  background: rgba(255,122,24,.06);
  border-radius: 0 12px 12px 0;
  padding: 20px 26px;
  margin: 22px 0;
}
blockquote .q-lead{
  font-family: var(--font-sub); font-style: normal;
  font-size: 1.35rem; color: var(--ink); margin-bottom:8px;
}
blockquote p{ color: rgba(236,231,223,.75); margin:0; }
.vision-img{ align-self:center; }
.vision-img img{ border-radius: 14px; border:1px solid var(--line); }
.values-kicker{
  font-family: var(--font-sub); font-style: normal;
  text-align:center; color: var(--amber);
  font-size: clamp(1.05rem, 1.6vw, 1.35rem);
  margin-bottom: clamp(28px, 4vw, 44px);
}

/* backstory */
.backstory-grid{
  display:grid; grid-template-columns: 7fr 5fr;
  gap: clamp(30px, 4vw, 60px);
  align-items:start;
}
.backstory-text p{ color: rgba(236,231,223,.78); margin-bottom:15px; font-size:1.02rem; }
.backstory-img{ position:sticky; top:110px; }
.backstory-img img{ border-radius:16px; border:1px solid var(--line); }
.ps-panel{
  margin-top: 34px;
  background: rgba(0,93,92,.1);
  border: 1px solid rgba(23,162,157,.3);
  border-radius: 16px;
  padding: 28px 30px;
}
.ps-title{
  font-family: var(--font-sub); font-style: normal; font-weight:600;
  font-size: 1.1rem; text-transform: none; letter-spacing: 0;
  color: var(--amber); margin-bottom: 14px;
}
.ps-highlight{
  font-family: var(--font-sub); font-style: normal;
  color: var(--ink) !important; font-size: 1.12rem !important; line-height:1.5;
  margin-bottom: 0 !important;
}

/* testimonials feature */
.feature-card{
  display:grid; grid-template-columns: 3fr 2fr;
  background: linear-gradient(145deg, rgba(255,255,255,0.06) 0%, rgba(255,255,255,0.02) 100%);
  backdrop-filter: blur(18px);
  -webkit-backdrop-filter: blur(18px);
  border:1px solid rgba(0,178,169,0.4);
  border-radius:16px; overflow:hidden;
  margin-bottom: clamp(28px, 4vw, 44px);
}
.feature-media .embed{ height:100%; padding-bottom:0; min-height:340px; }
.feature-body{ padding: clamp(26px, 3vw, 44px); display:flex; flex-direction:column; justify-content:center; }
.feature-heads{ display:flex; align-items:center; gap:16px; margin-bottom:20px; }
.avatar{ width:62px; height:62px; border-radius:50%; object-fit:cover; border:2px solid var(--btn); }
.org-logo{ height:56px; width:auto; background:rgba(236,231,223,.06); padding:8px; border-radius:10px; }
.feature-body h3{ font-weight:800; font-size:1.5rem; }
.feature-role{
  font-size:.72rem; font-weight:600; letter-spacing:.2em; text-transform:uppercase;
  color: var(--amber); margin: 6px 0 18px;
}
.feature-quote{
  font-family: var(--font-sub); font-style: normal;
  color: rgba(236,231,223,.85); font-size:1.05rem; line-height:1.6;
}

/* portfolio */
.pf-category{ margin-top: clamp(70px, 9vw, 120px); }
.section .grid-2 + .img-panel,
.section .feature-card + .grid-2{ margin-top: clamp(28px, 4vw, 44px); }
#testimonials .img-panel{ margin-top: clamp(28px,4vw,44px); }
#testimonials .center{ margin-top: 10px; }

/* waitlist — Trybe sunrise background, card vertically centered */
.waitlist{
  position: relative;
  background: url("../webflow-local/6a4dca93dd6731c4d5172ffa_Trybe-Sunrise-Background--6b50d415.avif") center / cover no-repeat, #07100f;
  padding-bottom:0;
  min-height: 100vh;
  display: flex;
  flex-direction: column;
}
.waitlist > .wrap.narrow{ margin: auto; width: 100%; }
.waitlist::before{
  content:''; position:absolute; inset:0;
  background: linear-gradient(180deg, rgba(3,11,20,.35) 0%, rgba(3,11,20,.1) 45%, rgba(3,11,20,.55) 100%);
  pointer-events:none;
}
.waitlist > *{ position:relative; z-index:1; }
.waitlist-card{
  background: linear-gradient(160deg, rgba(20,28,34,.26) 0%, rgba(16,24,26,.20) 100%);
  backdrop-filter: blur(7px);
  -webkit-backdrop-filter: blur(7px);
  border:1px solid rgba(255,255,255,.28);
  border-radius: 24px;
  padding: clamp(24px, 3vw, 40px);
  text-align:center;
  box-shadow: 0 26px 70px rgba(0,0,0,.55), 0 8px 26px rgba(0,0,0,.4);
  transition: transform .5s cubic-bezier(.22,.9,.3,1), box-shadow .5s;
}
.waitlist .headline{ font-size: clamp(1.9rem, 3.6vw, 3rem); margin-bottom: 18px; }
.waitlist .lede{ font-size: clamp(.98rem, 1.4vw, 1.15rem); margin: 0 0 8px; max-width: none; }
/* top padding must clear the fixed navbar (~84px) so the headline never
   tucks under it; the footer's default margin is trimmed here so the
   card's auto margins have free space to center within the viewport */
.waitlist{ padding-top: clamp(108px, 9vw, 118px); } /* 84px navbar + 24px, mirroring the footer gap */
.waitlist .footer{ margin-top: 24px; }
.waitlist-card:hover{
  transform: translateY(-8px) scale(1.02);
  box-shadow: 0 40px 100px rgba(0,0,0,.6), 0 0 80px rgba(45,212,191,.22);
}
.waitlist-logo{ height:120px; margin: 0 auto 18px; border-radius:14px; box-shadow: 0 12px 40px rgba(0,0,0,.45); }
@media (max-width: 640px){ .waitlist-logo{ height:96px; } }
.waitlist-form{ max-width: 460px; margin: 18px auto 0; display:flex; flex-direction:column; align-items:center; gap:11px; }
.waitlist-form input{
  width:100%;
  background: rgba(0,0,0,.45);
  border: 1px solid rgba(236,231,223,.2);
  border-radius: 10px;
  padding: 13px 18px;
  font-family: var(--font-head);
  font-size: .95rem;
  color: var(--ink);
  outline:none;
  transition: border-color .3s, box-shadow .3s;
}
.waitlist-form input::placeholder{ color: rgba(236,231,223,.35); }
.waitlist-form input:focus{
  border-color: var(--btn);
  box-shadow: 0 0 0 3px rgba(45,212,191,.15);
}
.fine{
  font-size:.72rem; color: rgba(236,231,223,.75);
  width: 640px; max-width: 88vw;
  text-shadow: 0 1px 6px rgba(0,0,0,.6);
  text-wrap: balance;
}
/* CASL express-consent row — checkbox must render unchecked by default */
.consent-row{
  display:flex; align-items:flex-start; gap:10px; justify-content:center;
  width: 640px; max-width: 88vw;
  margin-top: 4px; cursor:pointer; text-align:center;
}
.consent-row input[type="checkbox"]{
  flex:none; width:17px; height:17px; margin-top:1px;
  accent-color: var(--btn); cursor:pointer;
}
.consent-row .fine{ width:auto; max-width:none; margin:0; }
.btn-block{ align-self: stretch; }

/* footer */
.footer{ border-top:1px solid var(--line); margin-top: clamp(70px, 9vw, 110px); padding: 34px 0 96px; }
.footer-row{
  display:flex; align-items:center; justify-content:space-between; gap:22px; flex-wrap:wrap;
}
.footer-brand{ display:flex; align-items:center; gap:14px; font-weight:700; letter-spacing:.04em; }
.footer-brand img{ width:76px; height:auto; }
.footer-legal{
  font-size:.72rem; letter-spacing:.22em; text-transform:uppercase; color: rgba(236,231,223,.45);
}
.footer-social{ display:flex; gap:12px; }
.footer-social a{
  font-size:.75rem; font-weight:600; letter-spacing:.18em; text-transform:uppercase;
  padding: 10px 18px;
  border:1px solid rgba(236,231,223,.18); border-radius:999px;
  transition: all .3s ease;
}
.footer-social a:hover{ background: var(--btn); color:#06231f; border-color:var(--btn); }

/* reveal state rules live near the top of this file */

/* ============ responsive ============ */
@media (max-width: 1080px){
  .stats-rail{ grid-template-columns: repeat(3, 1fr); row-gap:48px; }
  .grid-3{ grid-template-columns: 1fr; }
  .vision-panel, .backstory-grid, .feature-card{ grid-template-columns: 1fr; }
  .backstory-img{ position:static; order:-1; }
  .feature-media .embed{ padding-bottom:56.25%; min-height:0; }
}
@media (max-width: 720px){
  .grid-2{ grid-template-columns: 1fr; }
  .stats-rail{ grid-template-columns: repeat(2, 1fr); }
  .chrome-center{ font-size: 9px; letter-spacing:.3em; max-width: 60vw; }
  .chrome-logo img{ width:44px; height:44px; }
  .scene{ height:420vh; }
  .display .stroke{ -webkit-text-stroke-width:1.4px; }
  .scroll-cue{ display:none; }
  .frame-hud{ left:16px; right:16px; }
}

/* legal disclaimer in the footer */
/* spans the full footer width: Trybe logo's left edge to the YouTube button's right edge */
.footer-disclaimer{
  margin-top: 30px; padding-top: 22px; border-top: 1px solid rgba(236,231,223,.1);
  font-size: .68rem; line-height: 1.7; color: rgba(236,231,223,.45);
  text-align: justify;
}

/* ============ phone scene typography & CTA clearance ============
   (kept at the end of the file so these always win the cascade) */
.nxt-lede{
  margin: clamp(34px, 4.5vw, 56px) 0 clamp(28px, 3.5vw, 44px);
  font-size: clamp(1.9rem, 4vw, 3.4rem);
}
.nxt-image{ margin-top: clamp(28px, 4vw, 44px); }
.m-br{ display: none; }
@media (max-width: 640px){
  .m-br{ display: block; }
  .scroll-hint{ right: 44px; } /* = mobile logo center: 12px + 64px/2 */
  .hero-constant{ bottom: 28svh; gap: 12px; }
  .hero-sub{ font-size: .98rem; line-height: 1.5; }
  .hero-constant .btn, .closer-actions .btn{ padding: 13px 22px; font-size: 10.5px; }
  /* phones: the vertical hero clip centers Sheldon, so the words live in the
     black space ABOVE his head instead of on his face */
  .hero-words{ place-items: start center; padding-top: 13svh; padding-bottom: 0; }
  #scene-terminal .word-stack,
  #scene-panels .word-stack{ padding-bottom: 33svh; }
  .closer-overlay{ padding-bottom: 20svh; gap: 12px; }
  .closer-eyebrow{ font-size: 11px; letter-spacing: .28em; padding: 0 6vw; }
  .hero-eyebrow{ font-size: 11px; letter-spacing: .28em; padding: 0 6vw; }
  .podcast-overlay{ padding-bottom: 28svh; } /* sub sits just below their hands on the table */
  .podcast-overlay .display-podcast{ top: 45%; }
  .podcast-sub{ font-size: 1.05rem; padding: 0 6vw; line-height: 1.6; }

  /* gamified progress message fits the phone width */
  .frame-num{ font-size: 9px; }
  .frame-num b{ letter-spacing: .16em; }
  .scene-caption{ font-size: .92rem; padding: 0 4vw; margin-top: 14px; }

  /* stat labels: keep every label exactly two lines at phone width */
  .stat-label{ font-size: 9.5px; letter-spacing: .16em; }

  /* nav role visible again on phones, auto-fit width via JS */
  .nav-role{ display: block !important; font-size: 8.5px; margin-top: 3px; }

  /* corner logo floats above the progress rail */
  .corner-logo{ bottom: 36px !important; }

  /* footer: centered stack, bigger logo */
  .footer-row{ flex-direction: column; align-items: center; text-align: center; gap: 18px; }
  .footer-brand img{ width: 68px; }
  .footer-social{ justify-content: center; }

  /* fine print flows naturally into balanced lines, no orphan */
  .fine br{ display: none; }
}

/* =========================================================
   REFERRAL STANDING PANEL (replaces the form after joining)
   New selectors only — no cascade conflicts with the blocks above.
   Phone overrides live at the bottom of THIS block.
   ========================================================= */
.ref-panel{ text-align: center; animation: refIn .5s cubic-bezier(.22,.9,.3,1) both; }
@keyframes refIn{ from{ opacity:0; transform: translateY(10px);} to{ opacity:1; transform:none;} }
.ref-eyebrow{
  font-family: var(--font-head); font-weight: 600; font-size: 11px; letter-spacing: .28em;
  text-transform: uppercase; color: var(--btn); margin: 0 0 6px;
}
.ref-pos{
  font-family: var(--font-head); font-weight: 800; line-height: 1;
  font-size: clamp(3.4rem, 8vw, 5.6rem); color: var(--amber); margin: 0 0 12px;
}
.ref-sub{
  font-family: var(--font-head); font-weight: 300; font-size: clamp(.98rem, 1.4vw, 1.1rem);
  color: var(--muted); line-height: 1.7; margin: 0 0 26px;
}
.ref-sub strong{ color: var(--ink); font-weight: 600; }
.ref-label{
  font-family: var(--font-head); font-weight: 600; font-size: 10.5px; letter-spacing: .22em;
  text-transform: uppercase; color: var(--muted); margin: 0 0 8px; text-align: left;
}
.ref-linkrow{ display: flex; gap: 9px; align-items: stretch; }
.ref-linkrow input{
  flex: 1; min-width: 0; background: rgba(16,16,20,.72); border: 1px solid var(--line);
  border-radius: 12px; color: var(--ink); font-family: var(--font-head); font-weight: 300;
  padding: 13px 15px; font-size: 14px; outline: none; text-overflow: ellipsis;
}
.ref-linkrow input:focus{ border-color: rgba(45,212,191,.55); }
.ref-linkrow .btn{ flex: 0 0 auto; padding: 13px 22px; font-size: 14px; white-space: nowrap; }
.ref-count{
  font-family: var(--font-head); font-weight: 300; font-size: 13.5px;
  color: var(--muted); margin: 16px 0 0;
}
.ref-count strong{ color: var(--amber); font-weight: 800; font-size: 1.35em; }

@media (max-width: 640px){
  .ref-linkrow{ flex-direction: column; }
  .ref-linkrow .btn{ width: 100%; }
  .ref-label{ text-align: center; }
}

/* =========================================================
   16:9 GLASS VIDEO PANEL — bottom LEFT.
   Bottom-right is occupied by corner-logo + progress rail + scroll hint.
   Same glass recipe as the legacy-zone cards so it reads as one system.
   Fixed size + fixed position = no layout shift = cannot retrigger the
   rewind bug that late-loading assets caused.
   ========================================================= */
.vpanel{
  position: fixed; left: 22px; bottom: 22px; z-index: 40;
  width: 224px; border-radius: 14px; overflow: hidden;
  background: linear-gradient(145deg, rgba(255,255,255,0.06) 0%, rgba(255,255,255,0.02) 100%);
  backdrop-filter: blur(18px); -webkit-backdrop-filter: blur(18px);
  border: 1px solid rgba(0,178,169,0.4);
  box-shadow: 0 20px 40px -10px rgba(0,0,0,0.7), 0 10px 20px -5px rgba(0,178,169,0.15);
  transition: all .5s cubic-bezier(.4,0,.2,1);
  animation: vpIn .6s cubic-bezier(.22,.9,.3,1) both;
}
.vpanel:hover{
  transform: translateY(-8px) scale(1.02);
  border-color: rgba(0,178,169,0.8);
  box-shadow: 0 30px 60px -15px rgba(0,0,0,0.8), 0 15px 30px -5px rgba(0,178,169,0.3);
}
@keyframes vpIn{ from{ opacity:0; transform: translateY(16px) scale(.96);} to{ opacity:1; transform:none;} }
.vpanel-open{
  display:block; width:100%; aspect-ratio: 16 / 9; position:relative;
  background:#0a1420; border:0; padding:0; cursor:pointer; overflow:hidden;
}
.vpanel-open video{ width:100%; height:100%; object-fit:cover; display:block; }
.vpanel-play{
  position:absolute; left:50%; top:50%; transform:translate(-50%,-50%);
  width:44px; height:44px; border-radius:50%; background: rgba(45,212,191,.92);
  box-shadow: 0 6px 20px rgba(0,0,0,.5); transition: transform .3s ease;
}
.vpanel-play::after{
  content:''; position:absolute; left:52%; top:50%; transform:translate(-50%,-50%);
  width:0; height:0; border-left:14px solid #06231f; border-top:9px solid transparent; border-bottom:9px solid transparent;
}
.vpanel-open:hover .vpanel-play{ transform:translate(-50%,-50%) scale(1.1); }
.vpanel-x{
  position:absolute; top:5px; right:7px; z-index:2;
  background: rgba(3,11,20,.55); border:0; color: rgba(236,231,223,.75);
  font-size:15px; line-height:1; width:22px; height:22px; border-radius:50%;
  cursor:pointer; transition: color .25s, background .25s;
}
.vpanel-x:hover{ color:#fff; background: rgba(3,11,20,.9); }

/* =========================================================
   LIGHTBOX — waitlist form OR referral standing. Opens on CTA click.
   ========================================================= */
.lbox{ position: fixed; inset: 0; z-index: 95; /* modal: deliberately above the nav strip */ display: grid; place-items: center; padding: 20px; }
.lbox-dim{ position:absolute; inset:0; background: rgba(3,11,20,.86); backdrop-filter: blur(6px); -webkit-backdrop-filter: blur(6px); animation: lbFade .3s ease both; }
@keyframes lbFade{ from{opacity:0} to{opacity:1} }
.lbox-card{
  position:relative; width: min(100%, 470px); max-height: 92vh; overflow-y:auto;
  background: linear-gradient(145deg, rgba(255,255,255,0.07) 0%, rgba(255,255,255,0.02) 100%);
  backdrop-filter: blur(18px); -webkit-backdrop-filter: blur(18px);
  border: 1px solid rgba(110,41,140,0.6); border-radius: 1.25rem;
  box-shadow: 0 30px 60px -15px rgba(0,0,0,.85), 0 15px 30px -5px rgba(110,41,140,.3);
  padding: clamp(26px, 4vw, 40px); text-align:center;
  animation: lbIn .45s cubic-bezier(.22,.9,.3,1) both;
}
@keyframes lbIn{ from{ opacity:0; transform: translateY(18px) scale(.97);} to{ opacity:1; transform:none;} }
.lbox-x{
  position:absolute; top:12px; right:15px; background:none; border:0;
  color: rgba(236,231,223,.55); font-size:24px; line-height:1; cursor:pointer; transition: color .25s;
}
.lbox-x:hover{ color: var(--btn); }
.lbox-h{
  font-family: var(--font-head); font-weight:900; text-transform:uppercase;
  font-size: clamp(1.5rem, 3.4vw, 2rem); line-height:1.04; letter-spacing:-.02em;
  color: var(--ink); margin: 4px 0 10px;
}
.lbox-sub{
  font-family: var(--font-sub); font-style: normal;
  font-size: 1rem; color: rgba(236,231,223,.8); margin: 0 0 20px;
}
.lbox-card .waitlist-form{ margin-top: 0; }
.lbox-card .ref-label{ text-align:left; }
body.lbox-open{ overflow: hidden; }

@media (max-width: 640px){
  .vpanel{ width: 168px; left: 14px; bottom: 14px; }
  .lbox-card .ref-label{ text-align:center; }
}
@media (prefers-reduced-motion: reduce){
  .vpanel, .lbox-card, .lbox-dim{ animation: none; }
  .vpanel:hover{ transform: none; }
}

/* ============================================================
   MIRROR CAROUSEL — talent + founder personas
   Two counter-scrolling marquee rows below the hero. Built to be
   lifted wholesale onto the accelerator site: nothing here depends
   on .legacy-bg.
============================================================ */
.mirror{
  --mp: clamp(200px, 17vw, 240px);          /* photo edge = card height */
  position: relative;
  padding: clamp(56px, 7vw, 92px) 0 clamp(48px, 6vw, 76px);
  /* same treatment as .stats-strip so the two read as one family */
  background: url("../webflow-local/6a4dca93dd6731c4d5172ffa_Trybe-Sunrise-Background--6b50d415.avif") center / cover no-repeat, #0B1727;
  border-top: 1px solid var(--line);
  border-bottom: 1px solid var(--line);
  overflow: clip;
  text-align: center;
}
/* matches .stats-strip::before — knocks the sunrise back so the glass cards read */
.mirror::before{
  content:''; position:absolute; inset:0;
  background: rgba(3,11,20,.28);
  pointer-events:none;
}
.mirror > *{ position: relative; z-index: 1; }
.mirror-sr{
  position:absolute; width:1px; height:1px; padding:0; margin:-1px;
  overflow:hidden; clip:rect(0,0,0,0); white-space:nowrap; border:0;
}
/* Inherits .display in the markup: Poppins 900, uppercase, .fill = solid white,
   .stroke = outlined. Only the size is overridden — .display's own clamp tops out at
   10.5rem, which is hero scale and far too big for a row label. */
.mirror-label{
  font-size: clamp(1.7rem, 3.2vw, 2.9rem);
  line-height: 1.02;
  margin: 0 0 14px;
}
/* .display stacks its spans in a centred flex column; keep them on one line here
   so the label reads as a single phrase rather than a two-line hero headline. */
.mirror-label.display{ flex-direction: row; flex-wrap: wrap; justify-content: center; gap: .32em; }
.mirror-label + .mirror-row{ margin-bottom: clamp(8px, 2vw, 22px); }

.mirror-row{
  /* overflow:hidden is what clips the marquee horizontally — but it clips
     VERTICALLY too, which decapitated cards on hover (translateY(-8px) + scale(1.02)
     + an 80px teal glow all push past the box). Cannot use overflow-x:hidden with
     overflow-y:visible — per spec that computes overflow-y to auto and adds a
     scrollbar. So: pad the row out to give the lift somewhere to go, then pull the
     layout back with an equal negative margin so vertical rhythm is unchanged. */
  padding: 30px 0;
  margin: -30px 0;
  overflow: hidden;
  -webkit-mask-image: linear-gradient(90deg, transparent 0, #000 7%, #000 93%, transparent 100%);
          mask-image: linear-gradient(90deg, transparent 0, #000 7%, #000 93%, transparent 100%);
}
.mirror-track{
  display: flex;
  width: max-content;
  will-change: transform;
}
/* Gap lives on the card as margin-right, NOT as flex `gap`. With flex gap the
   duplicated half is one gap wider than the original, so translateX(-50%)
   lands slightly off and the loop visibly jumps. Margin folds the gap into
   the card's own width, which keeps -50% exact. */
.mirror-card{ margin-right: clamp(14px, 1.4vw, 22px); }

.mirror-row[data-dir="rtl"] .mirror-track{ animation: mirror-rtl 40s linear infinite; }
.mirror-row[data-dir="ltr"] .mirror-track{ animation: mirror-ltr 60s linear infinite; }
@keyframes mirror-rtl{ from{ transform: translate3d(0,0,0); }        to{ transform: translate3d(-50%,0,0); } }
@keyframes mirror-ltr{ from{ transform: translate3d(-50%,0,0); }     to{ transform: translate3d(0,0,0); } }
.mirror-row:hover .mirror-track,
.mirror-row:focus-within .mirror-track{ animation-play-state: paused; }

/* Card anatomy: square photo bleeding to the left/top/bottom edges, text beside it.
   padding:0 + overflow:hidden is what lets the photo meet the card's rounded corner
   with no inset frame and no dead space under it. */
.mirror-card{
  flex: 0 0 auto;
  display: flex;
  align-items: stretch;
  width: clamp(520px, 43vw, 640px);
  height: var(--mp);
  padding: 0;
  overflow: hidden;
  text-align: left;
  background: linear-gradient(145deg, rgba(255,255,255,0.06) 0%, rgba(255,255,255,0.02) 100%);
  backdrop-filter: blur(18px);
  -webkit-backdrop-filter: blur(18px);
  border-radius: 1.25rem;
  border: 1px solid rgba(0,178,169,0.4);
  box-shadow: 0 20px 40px -10px rgba(0,0,0,0.7), 0 10px 20px -5px rgba(0,178,169,0.15);
  transition: all 0.5s cubic-bezier(0.4,0,0.2,1);
}
.mirror-card:hover{
  transform: translateY(-8px) scale(1.02);
  border-color: rgba(0,178,169,0.75);
  box-shadow: 0 40px 100px rgba(0,0,0,.6), 0 0 80px rgba(45,212,191,.22);
}
.mirror-photo{
  flex: 0 0 auto;
  width: var(--mp);
  height: var(--mp);
  object-fit: cover;
  border-radius: 0;      /* the card's overflow:hidden rounds the outer corners */
  display: block;
}
.mirror-body{
  display:flex; flex-direction:column; justify-content:center;
  gap: 10px; min-width: 0;
  padding: 18px 22px;
}
.mirror-problem{
  font-family: var(--font-sub);
  font-style: normal;          /* never Playfair italic */
  font-size: clamp(.98rem, 1.15vw, 1.08rem);
  line-height: 1.35;
  color: var(--ink);
  margin: 0;
}
.mirror-answer{
  font-size: clamp(.8rem, .92vw, .87rem);
  line-height: 1.45;
  color: rgba(236,231,223,.72);
  margin: 0;
}
.mirror-cta{
  margin: clamp(30px, 4vw, 44px) auto 6px;
  /* 720px forced a wrap in the middle of "Leave with your next move"; this fits
     the whole sentence on one line at desktop widths */
  max-width: 1120px;
  padding: 0 22px;
  font-size: clamp(1.05rem, 1.6vw, 1.28rem);
  line-height: 1.5;
  color: var(--ink);
  text-wrap: balance;
}
/* inline-block makes the phrase wrap as ONE unit when the viewport is too narrow
   to hold the full sentence — it drops whole to the next line instead of snapping
   after "Leave with". Deliberately not white-space:nowrap, which would overflow
   a phone rather than wrap. */
.mirror-keep{ display: inline-block; }
/* "Why founders and talent, in one room?" — sits below the two mirror problem rows */
.mirror-why{ max-width: 960px; margin: clamp(48px,6vw,84px) auto clamp(6px,1.5vw,16px); padding: 0 22px; text-align: center; }
.mirror-why-head{ justify-content: center; margin: 0 auto clamp(20px,3vw,34px); max-width: 900px; }
.mirror-why-line{ margin: 0 auto clamp(14px,2.1vw,22px); max-width: 800px; font-size: clamp(1.05rem,1.6vw,1.28rem); line-height: 1.6; color: var(--ink); text-wrap: balance; }
.mirror-why-punch{ font-weight: 700; color: var(--btn); }
.mirror-cta-sub{
  margin: 0 auto 22px;
  padding: 0 22px;
  /* identical clamp to .mirror-cta — the two lines must read as one block, the
     same way .hero-sub-strong matches .hero-sub and only changes weight */
  font-size: clamp(1.05rem, 1.6vw, 1.28rem);
  font-weight: 700;
  color: var(--btn);
}

/* Marquee is ambient decoration, not content delivery. With reduced motion the
   rows stop dead and become a normal horizontal scroll the user drives. */
@media (prefers-reduced-motion: reduce){
  .mirror-row[data-dir="rtl"] .mirror-track,
  .mirror-row[data-dir="ltr"] .mirror-track{ animation: none; transform: none; }
  .mirror-row{
    overflow-x: auto;
    -webkit-mask-image: none; mask-image: none;
  }
  .mirror-card:hover{ transform: none; }
}

@media (max-width: 640px){
  .mirror{ padding: 44px 0 40px; }
  /* A square photo cannot hold this much text at phone widths, so the card grows
     and the photo stretches to match it — still edge-to-edge, still no dead space. */
  .mirror-card{
    width: 90vw; max-width: 380px;
    height: auto; min-height: 160px;
  }
  .mirror-photo{ width: 132px; height: auto; align-self: stretch; }
  .mirror-body{ padding: 14px 16px; gap: 7px; }
  .mirror-problem{ font-size: .92rem; }
  .mirror-answer{ font-size: .74rem; line-height: 1.4; }
  /* fewer cards on screen means the same duration reads as much faster; slow both rows down */
  .mirror-row[data-dir="rtl"] .mirror-track{ animation-duration: 58s; }
  .mirror-row[data-dir="ltr"] .mirror-track{ animation-duration: 86s; }
}

/* ============================================================
   LIGHTBOX FIXES (2026-07-15)
============================================================ */

/* THE bug. `.lbox{display:grid}` above is a class selector, so it outranks the
   UA stylesheet's `[hidden]{display:none}`. Result: the `hidden` attribute in the
   markup did nothing — the lightbox painted on page load, and closeLbox()/Escape/
   dim-click (all of which just set .hidden = true) had no visible effect.
   The JS was always correct; it had no way to win. Keep this rule adjacent to
   any future `.lbox{display:...}` edit. */
.lbox[hidden]{ display: none; }

/* Sheldon: "not a square but a rectangle so it can hold everything." 470 -> 600. */
.lbox-card{ width: min(100%, 600px); }

/* `.consent-row` is shared with the bottom-of-page form, where a fixed 640px is
   deliberate. Inside a 600px card that hardcoded width blew straight through the
   padding — this is the CASL overflow. Scope it to the card only; do NOT edit the
   global .consent-row or the page form regresses. */
.lbox-card .consent-row{
  width: 100%;
  max-width: 100%;
  justify-content: flex-start;
  text-align: left;
}
.lbox-card .consent-row .fine{ flex: 1 1 auto; min-width: 0; }

/* 24px glyph in a ~24px box is a poor touch target; 44px is the accessible floor.
   46 not 44 — at 44 it computed to 43x43 and missed the floor by a subpixel. */
.lbox-x{
  width: 46px; height: 46px;
  top: 6px; right: 6px;
  display: flex; align-items: center; justify-content: center;
  border-radius: 50%;
}
.lbox-x:hover{ background: rgba(255,255,255,.06); }

/* FINAL phone block — must stay last in this file so it wins the cascade. */
@media (max-width: 640px){
  .lbox{ padding: 12px; }
  .lbox-card{
    width: 100%;
    max-height: 88vh;
    padding: 34px 18px 20px; /* top padding clears the X */
  }
  .lbox-h{ font-size: 1.35rem; }
  .lbox-sub{ font-size: .92rem; margin-bottom: 16px; }
  .lbox-card .consent-row .fine{ font-size: .68rem; line-height: 1.45; }
  .lbox-card .ref-linkrow{ flex-wrap: wrap; }
}

/* ============================================================
   HERO: 60-MIN BADGE + SCRIM (2026-07-15)
============================================================ */

/* "in 60 Mins or less" used to be a third OUTLINED headline line and was the hardest
   thing on the page to read over the video-call collage. It is a supporting promise,
   not a headline — so: solid fill, small, pill-shaped, sitting under the two-liner. */
.hero-badge{
  display: inline-flex;
  align-items: center;
  gap: .45em;
  margin: 18px auto 0;
  padding: 7px 16px;
  border-radius: 999px;
  font-family: var(--font-head);
  font-weight: 700;
  font-size: clamp(.72rem, 1.05vw, .86rem);
  letter-spacing: .16em;
  text-transform: uppercase;
  /* white pill so it reads against the collage; orange text; the bolt is a colour
     emoji and keeps its own yellow regardless of this colour */
  color: var(--amber);
  background: #ffffff;
  box-shadow: 0 6px 22px rgba(0,0,0,.55), 0 0 26px rgba(255,255,255,.22);
}

/* The base .scene-shade is transparent from 22%->72%, which is exactly where the hero
   headline sits — over the busiest part of the collage. Deepen the lower band (where ALL
   the hero text lives) while leaving the 20-40% zone clear so the face is not flattened. */
#scene-hero .scene-shade{
  background:
    radial-gradient(ellipse at center, rgba(11,11,13,0) 42%, rgba(11,11,13,.55) 100%),
    linear-gradient(180deg,
      rgba(11,11,13,.55) 0%,
      rgba(11,11,13,.12) 18%,
      rgba(11,11,13,0)   34%,
      rgba(11,11,13,.30) 50%,
      rgba(11,11,13,.58) 68%,
      rgba(11,11,13,.78) 86%,
      rgba(11,11,13,.88) 100%);
}

@media (max-width: 640px){
  .hero-badge{ margin-top: 14px; padding: 6px 13px; letter-spacing: .12em; }
}

/* ============================================================
   VLITE — click-to-load Vimeo facade (2026-07-16)
   42 concurrent Vimeo iframes were throttling each other ("Sorry,
   we are having a little trouble"). Each embed is now a local
   thumbnail + play button; the real iframe loads only on click,
   so zero players init until the user asks. Also much faster.
============================================================ */
.embed .vlite,
.embed .vlite-frame{ position:absolute; inset:0; width:100%; height:100%; border:0; }
.vlite{
  display:block; cursor:pointer; padding:0; margin:0;
  background-color:#000; background-size:cover; background-position:center;
  background-repeat:no-repeat;
  transition: filter .3s ease;
}
.vlite::after{
  content:""; position:absolute; inset:0;
  background: radial-gradient(ellipse at center, rgba(0,0,0,.15) 0%, rgba(0,0,0,.45) 100%);
  transition: background .3s ease;
}
.vlite:hover{ filter: brightness(1.06); }
.vlite:hover::after{ background: radial-gradient(ellipse at center, rgba(0,0,0,.05) 0%, rgba(0,0,0,.3) 100%); }
.vlite-play{
  position:absolute; top:50%; left:50%; transform:translate(-50%,-50%);
  width:clamp(54px,7vw,74px); height:clamp(54px,7vw,74px); border-radius:50%;
  background: rgba(45,212,191,.92);
  box-shadow: 0 10px 30px rgba(0,0,0,.5), 0 0 0 6px rgba(45,212,191,.18);
  transition: transform .25s cubic-bezier(.22,.9,.3,1), background .25s ease;
  z-index:1;
}
.vlite-play::before{
  content:""; position:absolute; top:50%; left:54%; transform:translate(-50%,-50%);
  border-style:solid; border-width:12px 0 12px 20px;
  border-color: transparent transparent transparent #04211f;
}
.vlite:hover .vlite-play{ transform:translate(-50%,-50%) scale(1.12); background: rgba(45,212,191,1); }
.vlite:focus-visible{ outline:3px solid var(--btn); outline-offset:3px; }

/* ============================================================
   HEIGHT-AWARE HERO RESPONSIVENESS (2026-07-16)
   A 16" laptop (wide but short) was blowing the headline up by width
   and cramming/overlapping the badge, sub and button; the video also
   cropped Sheldon's head at the top. Fixes: headline is capped by vh
   (see .display clamp above), the hero video is anchored higher, and
   the whole hero cluster tightens at two height breakpoints.
   Guarded by min-width:641px so phone portrait rules are unaffected.
============================================================ */
#scene-hero .scene-video{ object-position: center 24%; }

@media (min-width: 641px) and (max-height: 900px){
  #scene-hero .display{ font-size: clamp(2.6rem, min(10.5vw, 11vh), 8rem); }
  #scene-hero .word-stack{ padding-bottom: 26svh; }
  #scene-hero .scene-video{ object-position: center 20%; }
  .hero-eyebrow{ font-size: 13px; margin-bottom: 12px; }
  .hero-badge{ margin-top: 12px; padding: 6px 14px; }
  .hero-sub{ font-size: clamp(.9rem, 1.25vw, 1.08rem); }
  .hero-constant{ bottom: 5vh; bottom: 5svh; gap: 13px; }
}
@media (min-width: 641px) and (max-height: 760px){
  #scene-hero .scene-video{ object-position: center 17%; }
  .hero-eyebrow{ font-size: 11.5px; letter-spacing:.3em; margin-bottom: 8px; }
  .hero-badge{ margin-top: 8px; padding: 5px 12px; font-size:.72rem; }
  .hero-sub{ font-size: .86rem; line-height: 1.45; }
  .hero-sub br{ display:none; }
  .hero-constant{ bottom: 3.5vh; bottom: 3.5svh; gap: 9px; }
  .hero-constant .btn{ padding: 12px 26px; font-size:.82rem; }
}

/* ============================================================
   HERO LAYOUT — headline off the face (2026-07-16)
   The centered headline sat on Sheldon's face on short laptops. Anchor
   the hero word-stack to the lower third (over the clean grey chest),
   deepen the scrim through the whole text zone, and tighten the bottom
   cluster so pitch line + promise + button read clearly above the fold.
============================================================ */
@media (min-width: 641px){  /* DESKTOP ONLY — mobile portrait keeps its own tuned hero layout */
#scene-hero .word-stack{ place-items: end center; padding-bottom: 20svh; }
#scene-hero .hero-badge{ margin-top: 12px; }
#scene-hero .hero-constant{ bottom: 2.5vh; bottom: 2.5svh; gap: 9px; }
}
#scene-hero .scene-shade{
  background:
    linear-gradient(180deg,
      rgba(3,7,12,.60) 0%,
      rgba(3,7,12,.10) 16%,
      rgba(3,7,12,0)   30%,
      rgba(3,7,12,.42) 46%,
      rgba(3,7,12,.68) 62%,
      rgba(3,7,12,.82) 80%,
      rgba(3,7,12,.90) 100%);
}
@media (min-width: 641px) and (max-height: 900px){
  .hero-promise{ font-size: .96rem; letter-spacing:.1em; }
}
@media (min-width: 641px) and (max-height: 760px){
  /* shrink the headline harder so the whole cluster clears the face */
  #scene-hero .display{ font-size: clamp(2.2rem, min(9vw, 10.5vh), 6rem); }
  #scene-hero .word-stack{ padding-bottom: 26svh; }
  .hero-sub{ font-size: .96rem; line-height: 1.4; }
  .hero-promise{ font-size: .86rem; }
  #scene-hero .hero-constant{ bottom: 3vh; bottom: 3svh; gap: 9px; }
}

/* ============================================================
   HERO HEIGHT OVERRIDES — MUST be last (source-order beats the base
   #scene-hero .word-stack rule at equal specificity; a matching media
   query does NOT add specificity, so earlier copies were overridden).
============================================================ */
@media (min-width: 641px) and (max-height: 900px){
  #scene-hero .word-stack{ padding-bottom: 26svh; }
  #scene-hero .display{ font-size: clamp(2.6rem, min(10.5vw, 11vh), 8rem); }
}
@media (min-width: 641px) and (max-height: 760px){
  #scene-hero .word-stack{ padding-bottom: 26svh; }
  #scene-hero .display{ font-size: clamp(2.2rem, min(9vw, 10.5vh), 6rem); }
}

/* ============================================================
   HERO — FLOW LAYOUT (2026-07-16) — the permanent overlap fix.
   The headline (word-stack) and the sub/promise/button (hero-constant)
   were two independently-positioned ABSOLUTE layers. Between breakpoints
   they could collide (magic-number padding is unreliable). Here the hero
   puts BOTH in a single bottom-anchored flex COLUMN in normal flow, so
   they can never overlap at ANY viewport height — the browser guarantees
   it. The video + shade stay absolute (inset:0) and full-bleed.
   This block is intentionally LAST so it wins source-order over every
   earlier #scene-hero position hack (a matching @media adds NO specificity).
============================================================ */
@media (min-width: 641px){  /* DESKTOP ONLY — never touch mobile portrait */
#scene-hero .scene-inner{
  display: flex; flex-direction: column;
  justify-content: flex-end; align-items: center;
  padding: 0 5vw clamp(24px, 5svh, 60px);
}
#scene-hero .scene-video,
#scene-hero .scene-shade{ position: absolute; inset: 0; }   /* stay full-bleed, out of flow */
#scene-hero .word-stack{
  position: static; inset: auto; width: 100%;
  place-items: center;            /* box is now content-sized; groups still stack in grid cell 1/1 */
  padding: 0; margin: 0;
}
#scene-hero .hero-constant{
  position: static; inset: auto; left: auto; right: auto; bottom: auto;
  width: 100%; margin-top: clamp(14px, 2.4vh, 34px); gap: 10px;
}
/* headline still capped by viewport height so the whole flow column fits ~100vh
   (if ever too tall it pushes UP harmlessly — it can no longer overlap the sub) */
#scene-hero .display{ font-size: clamp(1.9rem, min(11vw, 7vh), 5.6rem); }
#scene-hero .display-sm{ font-size: clamp(1.7rem, min(7vw, 8.5vh), 4.7rem); }
}  /* end desktop-only flow block */
@media (min-width: 641px) and (max-height: 820px){
  #scene-hero .display{ font-size: clamp(1.9rem, min(11vw, 7vh), 5.6rem); }
}
@media (min-width: 641px) and (max-height: 680px){
  #scene-hero .display{ font-size: clamp(1.7rem, min(10vw, 7vh), 5rem); }
}

/* ============================================================
   TABLET / iPad PORTRAIT HERO (min 641px, max 1024px, portrait) — 2026-07-17
   On portrait tablets the hero clip (vertical <=820px, landscape >820px)
   centers Sheldon, so the desktop bottom-anchored flow layout drops the big
   headline onto his face (the reported iPad bug). Here we mirror the PHONE
   hero: headline in the black band ABOVE his head, sub/promise/button pinned
   lower, his face clear between them. Scoped tightly to PORTRAIT tablets only
   (<=1024px wide, portrait) so wider screens, landscape, and <=640px phones
   are ALL untouched — desktop + mobile layouts keep exactly what they had.
============================================================ */
@media (min-width: 641px) and (max-width: 1024px) and (orientation: portrait){
  #scene-hero .scene-inner{ display: block; padding: 0; }
  #scene-hero .word-stack{
    position: absolute; inset: 0; width: auto; margin: 0;
    display: grid; place-items: start center;
    padding: 13svh 6vw 0;
  }
  #scene-hero .hero-constant{
    position: absolute; left: 0; right: 0; top: auto; bottom: 16svh;
    width: auto; margin-top: 0;
  }
  #scene-hero .display{ font-size: clamp(2.2rem, 6.5vw, 5rem); }
}

/* ============================================================
   JOIN BONUSES — three free bonuses on the waitlist forms
   (lightbox #lboxForm + bottom #waitlistForm). 2026-07-17
============================================================ */
.join-bonus-head{ font-family: var(--font-head); font-weight:700; font-size:.8rem; letter-spacing:.03em; text-transform:uppercase; color: var(--ink); margin: 2px 0 12px; text-align:center; }
.join-bonus{ list-style:none; margin:0 auto 20px; padding:0; text-align:left; display:grid; gap:10px; max-width: 440px; }
.join-bonus li{ position:relative; padding-left: 28px; font-size:.9rem; line-height:1.36; color: rgba(236,231,223,.82); }
.join-bonus li::before{ content:"\2713"; position:absolute; left:2px; top:0; color: var(--btn); font-weight:800; }
.join-bonus b{ font-weight:700; color: var(--ink); }
@media (max-width: 640px){
  .join-bonus{ max-width: 100%; gap:9px; }
  .join-bonus li{ font-size:.84rem; padding-left: 24px; }
  .join-bonus-head{ font-size:.74rem; }
}

/* ============================================================
   EARLY WAITLIST + SCROLL GATE + STICKY CONTEXT BANNER
   Added 2026-07-22. New components only — no existing rule touched,
   so this can safely live at the end of the file.
============================================================ */

/* The early form sits mid-page, so it should feel like a stop along the
   way rather than the end of the page: tighter top/bottom than the footer one. */
.waitlist-early{ padding-block: clamp(48px, 6vw, 86px); }
.waitlist-early .waitlist-card{ margin-inline: auto; }

/* Scroll gate — reuses the .mirror band + .mirror-why typography verbatim. */
.scroll-gate{ padding: clamp(46px, 6vw, 78px) 0 clamp(42px, 5vw, 70px); }
.scroll-gate .mirror-why{ margin-top: 0; }

/* Sticky context banner — glassmorphic, matching the card treatment. */
.scroll-banner{
  position: fixed; left: 0; right: 0; top: 64px; z-index: 88;
  pointer-events: none;
  opacity: 0; transform: translateY(-10px);
  transition: opacity .35s ease, transform .35s ease;
}
.scroll-banner.is-on{ opacity: 1; transform: none; }
.scroll-banner-inner{
  pointer-events: auto;
  width: min(1180px, calc(100% - 32px));
  margin: 0 auto;
  display: flex; align-items: center; gap: 14px;
  padding: 10px 16px;
  border-radius: 14px;
  /* same glass language as the cards */
  background: linear-gradient(145deg, rgba(255,255,255,.06) 0%, rgba(255,255,255,.02) 100%);
  backdrop-filter: blur(18px); -webkit-backdrop-filter: blur(18px);
  border: 1px solid rgba(0,178,169,.40);
  box-shadow: 0 20px 40px -10px rgba(0,0,0,.70), 0 10px 20px -5px rgba(0,178,169,.15);
}
.sb-eyebrow{
  font-family: var(--font-sub); font-style: normal; font-weight: 500;
  font-size: .82rem; color: var(--amber); white-space: nowrap; opacity: .95;
}
.sb-section{
  font-family: var(--font-head); font-weight: 700;
  font-size: .8rem; letter-spacing: .12em; text-transform: uppercase;
  color: var(--ink); white-space: nowrap;
  overflow: hidden; text-overflow: ellipsis;
}
.sb-cta{ margin-left: auto; flex: 0 0 auto; }

@media (max-width: 900px){
  .scroll-banner-inner{ padding: 9px 13px; gap: 10px; }
  .sb-eyebrow{ display: none; }          /* keep the section name + CTA */
  .sb-section{ font-size: .72rem; letter-spacing: .1em; }
}
@media (max-width: 640px){
  .scroll-banner{ top: 58px; }
  .scroll-banner-inner{ width: calc(100% - 20px); padding: 8px 11px; border-radius: 12px; }
  .sb-section{ font-size: .66rem; letter-spacing: .08em; }
  .sb-cta{ padding: 9px 14px; font-size: 9.5px; }
}

/* ============================================================
   WHY ONE ROOM + SCROLL GATE  (Sheldon 2026-07-23)
   Both sections sit ABOVE the .legacy-bg wrapper, so they cannot inherit
   `.legacy-bg .card` / `.legacy-bg .glass-purple`. The glass and the
   purple/green wash below are the SAME values copied from those rules
   (orbs: #6E298C purple, #00B2A9 teal, #4F46E5 indigo) — not new ones.
   ============================================================ */
.why-room, .scroll-gate{
  position: relative;
  background: transparent;   /* orbs show through — .legacy-bg now wraps all of <main> */
  border-top: 1px solid var(--line);
  border-bottom: 1px solid var(--line);
  overflow: clip;
}
.why-room > *, .scroll-gate > *{ position: relative; z-index: 1; }

/* text card on the RIGHT, persona collage on the LEFT */
.why-panel{
  grid-template-columns: 5fr 7fr;
  background: linear-gradient(145deg, rgba(255,255,255,0.06) 0%, rgba(255,255,255,0.02) 100%);
  backdrop-filter: blur(18px); -webkit-backdrop-filter: blur(18px);
  border-radius: 1.25rem;
  border: 1px solid rgba(110,41,140,0.4);
  box-shadow: 0 20px 40px -10px rgba(0,0,0,0.7), 0 10px 20px -5px rgba(110,41,140,0.15);
  transition: all .5s cubic-bezier(0.4,0,0.2,1);
  align-items: center;
}
.why-panel:hover{
  transform: translateY(-8px) scale(1.02);
  border-color: rgba(110,41,140,0.8);
  box-shadow: 0 30px 60px -15px rgba(0,0,0,0.8), 0 15px 30px -5px rgba(110,41,140,0.3);
}
.why-collage{
  display: grid; grid-template-columns: repeat(3, 1fr);
  gap: clamp(6px, .7vw, 10px); margin: 0; order: -1;
}
.why-collage img{
  /* height:auto is REQUIRED — the markup carries height="800", which is a
     presentational hint that wins over aspect-ratio and renders 136x800 strips.
     Same idiom as .vision-img img / .img-panel img above. */
  width: 100%; height: auto; aspect-ratio: 1/1; object-fit: cover; display: block;
  border-radius: 10px; border: 1px solid var(--line);
}
.why-text{ text-align: left; }
.why-line{
  margin: 0 0 clamp(12px, 1.6vw, 18px);
  font-size: clamp(1rem, 1.35vw, 1.12rem); line-height: 1.65;
  color: rgba(236,231,223,.78);
}
.why-text .mirror-why-punch{ font-weight: 700; color: var(--btn); }
.why-room .mirror-cta{ margin-top: clamp(28px, 3.4vw, 44px); }

/* scroll gate — contents in a glass card with the standard hover lift */
.gate-card{
  max-width: 960px; margin-inline: auto;
  padding: clamp(28px, 4vw, 52px) clamp(22px, 3vw, 44px);
  text-align: center;
  background: linear-gradient(145deg, rgba(255,255,255,0.06) 0%, rgba(255,255,255,0.02) 100%);
  backdrop-filter: blur(18px); -webkit-backdrop-filter: blur(18px);
  border-radius: 1.25rem;
  border: 1px solid rgba(0,178,169,0.4);
  box-shadow: 0 20px 40px -10px rgba(0,0,0,0.7), 0 10px 20px -5px rgba(0,178,169,0.15);
  transition: all .5s cubic-bezier(0.4,0,0.2,1);
}
.gate-card:hover{
  transform: translateY(-8px) scale(1.02);
  border-color: rgba(0,178,169,0.8);
  box-shadow: 0 30px 60px -15px rgba(0,0,0,0.8), 0 15px 30px -5px rgba(0,178,169,0.3);
}
.gate-card .mirror-why-head{ justify-content: center; margin: 0 auto clamp(18px,2.6vw,30px); }
.gate-card .mirror-why-line{ margin-inline: auto; }

/* ---- PHONE overrides for the two new sections. MUST stay the last
   @media (max-width:640px) block in this file (CLAUDE.md rule 3) ---- */
@media (max-width: 640px){
  .why-panel{ grid-template-columns: 1fr; gap: clamp(20px,4vw,28px); }
  .why-collage{ grid-template-columns: repeat(3, 1fr); }
  .why-text{ text-align: center; }
  .why-line{ font-size: 1rem; }
  .gate-card{ padding: 26px 18px; }
}

/* ============================================================
   MENTORSHIP ROUND 2 (2026-07-24) — R3 centred CTA, R5 gate size,
   R6 green scenery behind the early form.
   ============================================================ */

/* R3 — the "why one room" CTA is centred, button included. It sits in
   .why-room .wrap which is NOT text-align:center (that is only .mirror). */
.why-cta{ text-align: center; margin-top: clamp(28px, 3.4vw, 44px); }
.why-cta .mirror-cta{ margin: 0 auto .35rem; }
.why-cta .mirror-cta-sub{ margin: 0 auto; }
.why-cta .btn{ margin-top: clamp(18px, 2.4vw, 28px); }

/* R5 — "Need more. Keep scrolling." was tiny because .mirror-label
   (max 2.9rem) is defined AFTER .display and beats it at equal specificity.
   Restore a proper headline size inside the gate card. */
.gate-card .mirror-why-head.mirror-label{
  font-size: clamp(2rem, 5.2vw, 3.8rem);
  line-height: 1.05;
  margin-bottom: clamp(16px, 2.4vw, 26px);
}

/* R6 — the early form section carries the SAME sunrise scenery as .mirror /
   .stats-strip, so it visually breaks the page up instead of blending in. */
.legacy-bg section.waitlist-scenery{
  position: relative;
  background: url("../webflow-local/6a4dca93dd6731c4d5172ffa_Trybe-Sunrise-Background--6b50d415.avif") center / cover no-repeat, #0B1727;
  border-top: 1px solid var(--line);
  border-bottom: 1px solid var(--line);
}
.waitlist-scenery::before{
  content:''; position:absolute; inset:0;
  background: rgba(3,11,20,.42);   /* a touch deeper than .mirror so the glass card reads */
  pointer-events:none;
}
.waitlist-scenery > *{ position: relative; z-index: 1; }

/* small eyebrow above the form heading (from the lightbox copy) */
.waitlist-eyebrow{ text-align: center; margin: 0 0 .4rem; }

/* ---- PHONE (must remain the final max-width:640px block — CLAUDE.md rule 3) ---- */
@media (max-width: 640px){
  .gate-card .mirror-why-head.mirror-label{ font-size: clamp(1.7rem, 8vw, 2.4rem); }
}

/* ============================================================
   MENTORSHIP ROUND 4 (2026-07-24) — R10 amber CTA, R11 consent spacing,
   R12 gate punch colour, R13 browsers strip banner, R14 NXT top spacing.
   ============================================================ */

/* R10 — the "Ask anything, Pay nothing, Free forever" line is amber/orange */
.why-cta .mirror-cta-sub{ color: var(--amber); }

/* R11 — pull the CASL consent box up tight under the button (was ~15px away),
   and tighten the checkbox-to-text gap. Applies to every .waitlist-form, so it
   fixes the inline forms AND the lightbox, desktop and mobile alike. */
.waitlist-form .consent-row{ margin-top: -8px; }
.consent-row{ gap: 8px; }

/* R12 — "Take your time…" was going grey because .card p{color:muted} (0,1,1)
   beat .mirror-why-punch (0,1,0). This (0,2,0) wins it back to button teal. */
.gate-card .mirror-why-punch{ color: var(--btn); }

/* R13 — full-bleed Sheldon + web-browsers strip, just above "Need More". */
.banner-strip{
  position: relative; z-index: 1;
  width: 100vw; margin-left: calc(50% - 50vw);
  overflow: hidden; line-height: 0;
  border-top: 1px solid var(--line); border-bottom: 1px solid var(--line);
}
.banner-strip img{
  width: 100%; height: clamp(160px, 20vw, 320px);
  object-fit: cover; object-position: center 40%; display: block;
}

/* R14 — the green NXT quote strip must start right at the section divider,
   with no empty gap above it. Kill #nxt's top padding and the block's top
   margin so the full-bleed .nxt-strip butts up against the top border. */
#nxt{ padding-top: 0; }
#nxt .nxt-block{ margin-top: 0; }

/* ---- PHONE (keep last — CLAUDE.md rule 3) ---- */
@media (max-width: 640px){
  .banner-strip img{ height: clamp(120px, 34vw, 190px); }
}

/* R15 (2026-07-24) — the FORM's "Ask anything. Pay nothing. Free forever." line
   is button-green so it pops. Scoped to the form/lightbox so it never recolours
   the other .lede paragraphs elsewhere on the page. */
.waitlist-card .lede{ color: var(--btn); }
.lbox-sub{ color: var(--btn); }

/* Card banner images sit flush to the card edges, clipped by its radius, at a
   fixed height so a row of cards matches whatever the source aspect is
   (D-20260814-04 Job 4). No inset, no padded box. */
.card > img:first-child, .card-media > img, .card-banner{
  display: block; width: 100%; height: clamp(150px, 17vw, 220px);
  object-fit: cover; margin: 0;
}
.card-media{ margin: 0; }

/* Values card banners (16 Aug 2026): image on top of each value card, flush
   to the card edges inside .card-pad's 34px 30px padding. */
.card-pad > .card-banner:first-child{
  margin: -34px -30px 22px;
  width: calc(100% + 60px);
  border-radius: 14px 14px 0 0;
}


/* ============================================================
   MOBILE HARDENING (17 Aug 2026) — ported from the accelerator, which got
   these on 6 and 16 August while this site did not. Appended at the very END
   on purpose: these must win the cascade over the base rules earlier in the
   file, and a matching @media query adds NO specificity, so source order is
   what carries it.
============================================================ */

/* Tap targets, WCAG 2.5.8 minimum 44x44. Visual size is left alone wherever
   growing it would break the layout; the hit area is expanded instead. */
.nav-links a{ display:inline-flex; align-items:center; min-height:44px; }
.nav-menu a{ display:flex; align-items:center; min-height:44px; }
.nav-toggle{ height:44px; min-width:44px; }   /* measured 44x40 */
.btn{ display:inline-flex; align-items:center; justify-content:center; min-height:44px; }
.tier-btn{ min-height:44px; }

@media (max-width: 640px){
  /* The menu button must ALWAYS fit. `auto` let the brand column take whatever
     .nav-name asked for, and .nav-name is white-space:nowrap, so on a 320px
     screen the toggle was pushed 11px past the right edge. Give the button its
     intrinsic width first and make the BRAND yield: minmax(0,1fr) plus
     min-width:0 is what actually lets a grid column shrink below its content;
     1fr alone will not. */
  .nav-inner{ grid-template-columns: minmax(0, 1fr) auto; gap: 10px; padding-inline: 12px; }
  .nav-brand{ min-width: 0; overflow: hidden; }
}

/* Phones: STACK the mirror card, photo over text. `--mp` floors at 200px, so a
   340px card spent 200 on the photo and 40 on padding and left the copy about
   98px, roughly five characters a line. Stacking gives the copy the full card
   width. The card peeks past the viewport edge on purpose so the row still
   reads as scrollable. Measured 17 Aug 2026. */
@media (max-width: 560px){
  .mirror-card{
    width: min(80vw, 320px);
    height: auto;
    flex-direction: column;
    align-items: stretch;
  }
  .mirror-photo, .mirror-av{
    width: 100%; height: 168px;
    object-position: center 22%;
  }
  .mirror-av{ height: 96px; }
  .mirror-body{ padding: 14px 16px 18px; }
}

/* ============================================================
   NAV + VALUE CARDS (17 Aug 2026, Sheldon on the live site)
   ============================================================ */

/* 1. THE VALUE CARD IMAGES WERE 62px SHORT OF THE CARD.
   `.card-pad > .card-banner:first-child` already asked for
   `width: calc(100% + 60px)` to bleed through the card's 30px side padding,
   and the negative margins were applying, but the width was not: the global
   reset at line 37, `img{ max-width: 100% }`, CLAMPS it straight back to the
   content box. Measured: card 574px, image 512px, exactly 574 - 60 - 2.
   A negative margin cannot widen an element whose max-width is holding it.
   The About page's cards never hit this because they use `.card-media`, where
   the card carries no padding for the image to escape from. */
.card-pad > .card-banner:first-child{ max-width: none; }

/* 2. THE NAV CTA HUNG OFF THE RIGHT EDGE AT EVERY DESKTOP WIDTH.
   Measured before: "Join Community Waitlist" ended at 1776 in a 1673 viewport
   (103px off), 1457 in 1440, 1447 in 1280. Two causes, both needed fixing:

   (a) `grid-template-columns: auto 1fr auto`. A `1fr` track is
       `minmax(auto, 1fr)`, and its auto MINIMUM is the min-content width of a
       seven-chip nowrap row. The middle track therefore refused to shrink and
       shoved the third track off the bar instead. `minmax(0, 1fr)` lets it.
   (b) Even at its natural size the row did not fit: at 1673 the chips need
       846px plus 221px of gap plus 96px of side padding against 1034px of
       space. Padding and gap come down; the FONT SIZE DOES NOT CHANGE, because
       Sheldon set this navbar as the reference for the whole estate on 17 Aug
       ("it's not too small it's not too big, it's exact").

   The two breakpoints move with it, each one measured to the width where its
   row stops fitting rather than picked round: 11.5px chips need 1557px, and
   the 10px step-down row needs 1396px, below which the drawer takes over. */
@media (min-width: 1241px){
  .nav-inner{ grid-template-columns: auto minmax(0, 1fr) auto; }
  .nav-links{ padding: 0 clamp(4px, 1vw, 16px); gap: clamp(6px, 1.1vw, 14px); }
}
@media (max-width: 1560px) and (min-width: 1241px){
  .nav-links{ gap: 9px; }
  .nav-links a{ font-size: 10px; letter-spacing: .07em; padding: 6px 8px; }
}
@media (max-width: 1400px){
  .nav-links{ display: none; }
  .nav-toggle{ display: flex; }
  .nav-inner{ grid-template-columns: auto 1fr; }
  .nav-right{ grid-column: 2; }
}

/* ============================================================
   NAV DROPDOWNS (25 Sep 2026): About Me holds Speed Coaching and Portfolio,
   and Explore More carries the rest of the Trybe site. Same pattern and the
   same glass as the accelerator's grouped nav, so the two static sites work
   the same way. Hover or focus opens a menu; main.js adds .dd-closed after a
   choice, Escape, an outside click or a scroll, because the clicked link
   keeps focus and :focus-within would otherwise pin the menu open.
============================================================ */
.nav-group{ position: relative; display: inline-flex; align-items: center; }
.nav-links .nav-top{ display: inline-flex; align-items: center; gap: 7px; }
.nav-caret{ opacity: .7; transition: transform .25s ease; }
.nav-group:hover .nav-caret, .nav-group:focus-within .nav-caret{ transform: rotate(180deg); opacity: 1; }
.nav-menu{
  position: absolute; top: 100%; left: 50%; transform: translateX(-50%) translateY(10px);
  min-width: 200px; padding: 9px;
  background: linear-gradient(145deg, rgba(255,255,255,.07) 0%, rgba(255,255,255,.02) 100%), rgba(9,9,11,.97);
  backdrop-filter: blur(26px) saturate(1.25); -webkit-backdrop-filter: blur(26px) saturate(1.25);
  border: 1px solid rgba(0,178,169,.42); border-radius: 14px;
  box-shadow: 0 24px 60px rgba(0,0,0,.6), 0 0 40px rgba(0,178,169,.1);
  display: flex; flex-direction: column; gap: 2px;
  opacity: 0; visibility: hidden; pointer-events: none;
  transition: opacity .2s ease, transform .2s ease; z-index: 60;
}
.nav-group:hover .nav-menu, .nav-group:focus-within .nav-menu{
  opacity: 1; visibility: visible; pointer-events: auto; transform: translateX(-50%) translateY(6px);
}
.nav-group.dd-closed .nav-menu{ opacity: 0 !important; visibility: hidden !important; pointer-events: none !important; }
.nav-group.dd-closed .nav-caret{ transform: none !important; }
/* invisible bridge so the menu does not drop when the cursor crosses the gap */
.nav-menu::before{ content: ''; position: absolute; top: -12px; left: 0; right: 0; height: 12px; }
/* Menu links are rows, not chips: (0,2,1) beats the .nav-links a chip (0,1,1). */
.nav-links .nav-menu a{
  border: 0; background: none; padding: 10px 15px; border-radius: 9px;
  white-space: nowrap; text-align: left; text-shadow: none;
}
.nav-links .nav-menu a:hover, .nav-links .nav-menu a:focus-visible{ background: rgba(0,178,169,.16); color: var(--btn); border-color: transparent; }
/* Explore More is four columns, anchored to its trigger's right edge so the
   panel opens inward and never off the right of the screen. */
.nav-menu.nav-menu-wide{
  left: auto; right: 0; transform: translateY(10px);
  display: grid; grid-template-columns: repeat(4, max-content); gap: 4px 20px; padding: 18px 18px 14px;
}
.nav-group:hover .nav-menu.nav-menu-wide, .nav-group:focus-within .nav-menu.nav-menu-wide{ transform: translateY(6px); }
.nav-col{ display: flex; flex-direction: column; gap: 2px; }
.nav-col-head{ font-family: var(--font-sub); color: var(--amber); font-size: .82rem; letter-spacing: .06em; margin: 0 0 6px; padding: 0 15px; }
.nav-links .nav-menu-wide a{ text-transform: none; font-weight: 500; font-size: .86rem; letter-spacing: .01em; }

/* In the drawer every group is expanded inline, in the same column as the
   top-level links. .dd-closed carries !important for the desktop hover menu,
   so the drawer re-opens it with !important at higher specificity, the way
   the accelerator learned on 19 Aug. */
@media (max-width: 1400px){
  .nav-bar.nav-open .nav-group{ display: flex; flex-direction: column; align-items: stretch; gap: 8px; width: 100%; }
  .nav-bar.nav-open .nav-menu,
  .nav-bar.nav-open .nav-menu.nav-menu-wide{
    position: static; transform: none; opacity: 1; visibility: visible; pointer-events: auto;
    background: none; border: 0; box-shadow: none; backdrop-filter: none; -webkit-backdrop-filter: none;
    padding: 2px 0 4px; min-width: 0; display: flex; flex-direction: column; gap: 6px;
  }
  .nav-bar.nav-open .nav-group.dd-closed .nav-menu{ opacity: 1 !important; visibility: visible !important; pointer-events: auto !important; }
  .nav-bar.nav-open .nav-menu::before{ display: none; }
  .nav-bar.nav-open .nav-links .nav-menu a{ text-align: center; font-size: 12px; opacity: .85; padding: 10px 16px; }
  .nav-bar.nav-open .nav-col{ gap: 4px; margin-top: 6px; }
  .nav-bar.nav-open .nav-col-head{ text-align: center; padding: 0; margin: 4px 0 2px; }
  .nav-bar.nav-open .nav-caret{ display: none; }
  /* an opaque floor under the glass, so page copy never shows through the longer drawer */
  /* The frame HUD and the scroll hint are fixed at z-index 88 to 92 and ignore
     the pointer, so they painted over the open drawer without ever showing up
     in a hit test. While the drawer is open the bar sits above them (the
     lightbox, at 95, still sits above the bar). */
  .nav-bar.nav-open{ z-index: 94; }
  .nav-bar.nav-open .nav-links{ background-color: #0b0b0d; isolation: isolate; z-index: 5; }
  /* a long drawer scrolls inside itself rather than running off the screen */
  .nav-bar.nav-open .nav-links{ max-height: calc(100vh - var(--nav-h) - 24px); max-height: calc(100svh - var(--nav-h) - 24px); overflow-y: auto; justify-content: flex-start; }
}

/* ============================================================
   BRAND TRUST STRIP (Sheldon, 6 Sep 2026; resized 6 Sep after review)
   One moving strip of the brands that trusted him, directly under the hero on
   every page. Monochrome white on purpose: eleven corporate palettes side by
   side fight the page, one colour reads as a single statement.

   BACKGROUND IS TRANSPARENT ON PURPOSE. It used to carry rgba(11,11,13,.42),
   which read as a separate darker band cutting across the page. The strip is
   meant to sit IN the site's own purple-to-green field, not on top of it, so
   the only thing it paints is the two hairlines.

   TRAVEL IS LEFT TO RIGHT (Sheldon's call). That means the track starts shifted
   -50% and animates back to 0. The direction is in the keyframes rather than
   `animation-direction: reverse` so the start position is explicit and the loop
   seam stays where the -50% maths puts it.

   The gap lives on the logo as margin-right and NOT as flex `gap`. Same trap the
   mirror carousel documents: with flex gap the duplicated half is one gap wider
   than the original, so translateX(-50%) lands slightly off and the loop visibly
   jumps every cycle. Margin folds the gap into the item's own width.

   The label is --ink, not the --amber every other eyebrow uses, because amber at
   small sizes measures 4.4:1 against the 4.5:1 small text owes. That ruling is
   still open (QUESTIONS 6 and 8).
============================================================ */
.brand-strip{
  position: relative; z-index: 1;
  padding: clamp(30px, 4.2vw, 48px) 0;
  border-top: 1px solid var(--line);
  border-bottom: 1px solid var(--line);
  background: transparent;
}
.brand-strip-label{
  margin: 0 0 clamp(18px, 2.4vw, 28px);
  text-align: center;
  font-family: var(--font-head);
  font-weight: 600;
  font-size: clamp(.7rem, 1.15vw, .88rem);
  letter-spacing: .24em;
  text-transform: uppercase;
  color: var(--ink);
  opacity: .85;
  padding: 0 5vw;
}
.brand-strip-row{
  overflow: hidden;
  -webkit-mask-image: linear-gradient(90deg, transparent 0, #000 7%, #000 93%, transparent 100%);
          mask-image: linear-gradient(90deg, transparent 0, #000 7%, #000 93%, transparent 100%);
}
.brand-strip-track{
  display: flex; align-items: center; width: max-content;
  animation: brand-marquee 54s linear infinite;
  will-change: transform;
}
.brand-strip-row:hover .brand-strip-track,
.brand-strip-row:focus-within .brand-strip-track{ animation-play-state: paused; }
.brand-logo{
  flex: 0 0 auto;
  height: clamp(30px, 3.4vw, 44px);
  width: auto; max-width: 210px;
  object-fit: contain;
  margin-right: clamp(44px, 5.4vw, 84px);
  opacity: .82;
}
@keyframes brand-marquee{
  from{ transform: translate3d(-50%, 0, 0); }
  to  { transform: translate3d(0, 0, 0); }
}
@media (prefers-reduced-motion: reduce){
  .brand-strip-track{ animation: none; transform: none; }
  .brand-strip-row{ overflow-x: auto; }
}

/* Optical sizing. Normalising every mark to one HEIGHT is what a naive logo
   wall does, and it is wrong: a wide wordmark at the same cap height as a round
   emblem carries far more visual mass. Sized by aspect tier instead, so the
   marks read as equals. Starbucks, Google, CIBC and CMA are compact emblems and
   take the largest size; Loblaws is a long wordmark and takes the smallest. */
.brand-logo[data-brand="google"],
.brand-logo[data-brand="cibc"],
.brand-logo[data-brand="starbucks"],
.brand-logo[data-brand="cma"]{ height: clamp(38px, 4.3vw, 56px); }
.brand-logo[data-brand="rbc"],
.brand-logo[data-brand="hsbc"]{ height: clamp(27px, 3vw, 39px); }
.brand-logo[data-brand="loblaws"]{ height: clamp(21px, 2.4vw, 31px); }

@media (max-width: 640px){
  .brand-strip{ padding: 24px 0; }
  .brand-strip-label{ font-size: .64rem; letter-spacing: .18em; margin-bottom: 15px; }
  .brand-logo{ height: 27px; margin-right: 38px; max-width: 150px; }
  .brand-logo[data-brand="google"],
  .brand-logo[data-brand="cibc"],
  .brand-logo[data-brand="starbucks"],
  .brand-logo[data-brand="cma"]{ height: 34px; }
  .brand-logo[data-brand="rbc"],
  .brand-logo[data-brand="hsbc"]{ height: 24px; }
  .brand-logo[data-brand="loblaws"]{ height: 19px; }
  /* "Join Free Mentorship Community" (Sheldon, 24 Sep 2026) is 30 characters
     and wrapped to two lines at 390 and three at 320 in the full-width join
     buttons. Size derived from the column so it holds one line down to 320. */
  .waitlist-form .btn-block{ font-size: clamp(10px, 3.1vw, 13px); letter-spacing: .06em; padding-inline: 14px; }
}


/* ============================================================
   CARD BANNERS ARE 16:9, NOT A FIXED HEIGHT (Sheldon, 12 Sep 2026)
   MUST BE LAST so it wins over every earlier height rule.
   ------------------------------------------------------------
   "Why have you made these images kind of long, as if it's a vertical
   rectangle? They should be normal 16:9 ratio... this way the photographs
   keep getting cut, so you can't see the whole image."

   The history explains the bug. On 19 Aug the banner height was RAISED to
   clamp(200px, 21vw, 300px) because on a 574px two-across card the 1200x675
   source was letterboxed and faces fell outside the crop. That was right for
   a two-across row. The ladder is FOUR across, so the card is about 280px
   wide, and the same 200 to 300px height turns a 16:9 source into a portrait
   box and crops most of the picture away.

   A fixed height can only ever be correct at one card width. An aspect ratio
   is correct at every width: the banner is always the full 16:9 frame, so
   nothing is cut, and a wide card still gets a tall image because the height
   follows the width. height:auto is explicit because an aspect-ratio box with
   an inherited height silently loses the ratio.
============================================================ */
.card > img:first-child,
.card-media > img,
.card-banner{
  height: auto;
  aspect-ratio: 16 / 9;
  object-fit: cover;
}