/* ============================================================
   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;
  --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 */
[data-reveal]{ opacity:0; transform: translateY(42px); }
[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-bar{
  position: fixed; inset: 0 0 auto 0; z-index: 90;
  background: transparent;
  pointer-events: none;
}
.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: var(--ink);
  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: rgba(236,231,223,.85); 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: center; display:flex; align-items:center; gap: 26px; }
/* 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(236,231,223,.045);
  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; }

/* 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; }
}
@media (max-width: 1240px){
  .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("https://cdn.prod.website-files.com/67eab5c7c12fcd6d7e2df66f/6a4dca93dd6731c4d5172ffa_Trybe%20Sunrise%20Background%20.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 mentorship-community.trybeinc.com ============ */
.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("https://cdn.prod.website-files.com/67eab5c7c12fcd6d7e2df66f/6a4dca93dd6731c4d5172ffa_Trybe%20Sunrise%20Background%20.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{
  background: var(--card);
  border: 1px solid var(--line);
  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 var(--line);
  background: var(--card);
  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: var(--card); border:1px solid var(--line);
  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("https://cdn.prod.website-files.com/67eab5c7c12fcd6d7e2df66f/6a4dca93dd6731c4d5172ffa_Trybe%20Sunrise%20Background%20.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: 90; 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("https://cdn.prod.website-files.com/67eab5c7c12fcd6d7e2df66f/6a4dca93dd6731c4d5172ffa_Trybe%20Sunrise%20Background%20.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("https://cdn.prod.website-files.com/67eab5c7c12fcd6d7e2df66f/6a4dca93dd6731c4d5172ffa_Trybe%20Sunrise%20Background%20.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); }