/* coolbeanscomedy.com — Sep 23 design.
   Same brand tokens as packages/brand (navy room, one yellow spotlight), a lot
   less on every page. Rules of this design:
     1. One idea per section. A section is a headline, at most two sentences,
        a photo or a row of cards, and one button.
     2. Sections alternate navy / white so the breaks are visible.
     3. Photos do the talking. Text is short.
     4. Mobile first: 72% of traffic is a phone. */

:root{
  --navy:#08123A; --deep:#050C28; --surface:#111B3D;
  --paper:#FFFFFF; --paper-2:#F3F5FA;
  --line:rgba(238,241,248,0.14); --line-dark:rgba(8,18,58,0.12);
  --yellow:#FFD700; --on-yellow:#1A1300;
  --ink:#EEF1F8; --ink-strong:#FFFFFF; --muted:#A5AEC8;
  --ink-dark:#08123A; --muted-dark:#4B5470;
  --good:#37D67A;
  --display:'Anton',Impact,'Arial Narrow',sans-serif;
  --body:'Inter',system-ui,-apple-system,'Helvetica Neue',sans-serif;
  --radius:20px; --radius-sm:12px; --pill:999px;
  --shadow:0 14px 40px rgba(0,0,0,.35);
  --maxw:1140px;
}
*{box-sizing:border-box}
html{scroll-behavior:smooth}
@media (prefers-reduced-motion:reduce){ html{scroll-behavior:auto} *{animation:none!important;transition:none!important} }

body{margin:0; background:var(--navy); color:var(--ink); font-family:var(--body); font-size:17px; line-height:1.55; -webkit-font-smoothing:antialiased}
img{max-width:100%; height:auto; display:block}
a{color:inherit}
.wrap{max-width:var(--maxw); margin:0 auto; padding:0 20px}

/* ---------- type ---------- */
h1,h2,h3{font-family:var(--display); font-weight:400; text-transform:uppercase; letter-spacing:.015em; margin:0; text-wrap:balance; line-height:1; color:var(--ink-strong)}
h1{font-size:clamp(44px,9vw,104px); line-height:.92}
h2{font-size:clamp(32px,5.2vw,58px)}
h3{font-size:22px; line-height:1.1}
.y{color:var(--yellow)}
.eyebrow{font-size:12px; letter-spacing:.22em; text-transform:uppercase; color:var(--yellow); font-weight:700; margin:0 0 14px}
.lede{font-size:clamp(17px,2vw,21px); max-width:52ch; margin:16px 0 0}
.center{text-align:center}
.center .lede{margin-inline:auto}

/* ---------- bands: every section is one ---------- */
.band{padding-block:clamp(56px,9vw,112px)}
.band.light{background:var(--paper); color:var(--ink-dark)}
.band.light h1,.band.light h2,.band.light h3{color:var(--ink-dark)}
.band.light .eyebrow{color:var(--ink-dark)}
.band.light .muted{color:var(--muted-dark)}
.band.deep{background:var(--deep)}
.band.yellow{background:var(--yellow); color:var(--on-yellow)}
.band.yellow h2{color:var(--on-yellow)}
.band.yellow .eyebrow{color:var(--on-yellow)}
.muted{color:var(--muted)}

/* ---------- buttons ---------- */
.btn{display:inline-flex; align-items:center; justify-content:center; gap:9px; text-decoration:none; background:var(--yellow); color:var(--on-yellow); font-weight:800; font-size:16px; padding:16px 28px; border-radius:var(--pill); border:0; cursor:pointer; line-height:1}

/* Every button's touch: Andriy's three moves on one clock (Liniman/coolbeans-redesign
   global.css; Corey picked "F, Andriy's full" for all buttons, 2026-09-25).
   1. LIFT on hover: rises 2px up-left off a hard shadow that stays put (a sticker peeling up).
   2. ROLL on hover: the label rolls up and out while a copy rolls in from below. The build
      copies each label into data-roll; the real text keeps layout and the accessible name,
      only its paint is switched off, and the two copies are content with empty alt text.
   3. PRESS on click/tap: drops into its shadow. Phones get the press only (no hover).
   Reduced motion: no lift, no roll; the press stays, it is feedback. */
.btn, .nav ul a.cta{--btn-shadow:var(--deep); box-shadow:0 0 0 var(--btn-shadow);
  transition:transform 140ms cubic-bezier(.22,.61,.36,1), box-shadow 140ms cubic-bezier(.22,.61,.36,1), background 220ms}
.hero .btn, .band:not(.light) .btn, .nav.overlay a.cta, .btn.dark{--btn-shadow:#000}
@media (hover:hover) and (pointer:fine) and (prefers-reduced-motion:no-preference){
  .btn:hover, .nav ul a.cta:hover{transform:translate(-2px,-2px); box-shadow:2px 2px 0 var(--btn-shadow)}
}
.btn:active, .nav ul a.cta:active{transform:translate(1px,1px); box-shadow:0 0 0 var(--btn-shadow); transition-duration:70ms}
@supports (content:"a" / ""){
  :is(.btn, .nav ul a.cta)[data-roll]{position:relative; overflow:hidden; -webkit-text-fill-color:transparent}
  .nav ul a.cta[data-roll]{display:inline-block} /* inline boxes ignore overflow; the rolled copy would peek out */
  :is(.btn, .nav ul a.cta)[data-roll]::before, :is(.btn, .nav ul a.cta)[data-roll]::after{
    content:attr(data-roll) / ""; position:absolute; inset:0; display:flex; align-items:center; justify-content:center;
    -webkit-text-fill-color:currentColor; pointer-events:none; transition:transform 300ms cubic-bezier(.34,1.36,.64,1)}
  :is(.btn, .nav ul a.cta)[data-roll]::after{transform:translateY(100%)}
  @media (hover:hover) and (pointer:fine) and (prefers-reduced-motion:no-preference){
    :is(.btn, .nav ul a.cta)[data-roll]:is(:hover,:focus-visible)::before{transform:translateY(-100%)}
    :is(.btn, .nav ul a.cta)[data-roll]:is(:hover,:focus-visible)::after{transform:translateY(0)}
  }
}
.btn:focus-visible{outline:3px solid var(--ink-strong); outline-offset:2px}
.btn [data-fact]{display:contents} /* a fact span inside a button (the date) is text, not a flex item: no gap around "Oct 25" */
.btn.ghost{background:transparent; color:var(--ink-strong); border:2px solid rgba(255,255,255,.5)}
.band.light .btn.ghost{color:var(--ink-dark); border-color:var(--ink-dark)}
.btn.dark{background:var(--navy); color:var(--ink-strong)}
.actions{display:flex; gap:12px; flex-wrap:wrap; margin-top:28px}
.center .actions{justify-content:center}
.paylater{display:block; margin-top:10px; font-size:13px; text-decoration:underline; text-underline-offset:3px; opacity:.8}

/* ---------- top switch + nav ---------- */
.switch{background:var(--deep); border-bottom:1px solid var(--line)}
.switch .wrap{display:flex; align-items:stretch}
.switch a{font-family:var(--display); text-transform:uppercase; letter-spacing:.06em; font-size:12px; text-decoration:none; color:var(--muted); padding:10px 16px; border-bottom:2px solid transparent; white-space:nowrap}
.switch a[aria-current="true"]{color:var(--ink-strong); border-bottom-color:var(--yellow)}
.switch a:hover{color:var(--ink)}

.nav{position:sticky; top:0; z-index:50; background:rgba(8,18,58,.94); backdrop-filter:blur(12px); border-bottom:1px solid var(--line)}
.nav .wrap{display:flex; align-items:center; gap:16px; padding-block:14px}
.logo{display:inline-flex; align-items:center; text-decoration:none; line-height:0}
.logo img{height:46px; width:auto}
body.theme-white .logo{background:var(--navy); padding:6px 12px; border-radius:10px}
body.theme-white .logo img{height:38px}
.nav ul{display:flex; gap:22px; list-style:none; margin:0 0 0 auto; padding:0; align-items:center}
.nav ul a{font-size:15px; font-weight:600; text-decoration:none; color:var(--ink); padding:6px 0}
.nav ul a:hover,.nav ul a[aria-current="page"]{color:var(--yellow)}
.nav ul a.cta{background:var(--yellow); color:var(--on-yellow); padding:10px 18px; border-radius:var(--pill); font-weight:800}
.nav ul a.cta:hover{color:var(--on-yellow)}
.menu-btn{display:none; margin-left:auto; background:transparent; border:2px solid rgba(255,255,255,.5); color:var(--ink-strong); border-radius:var(--pill); padding:9px 16px; font:700 14px var(--body); cursor:pointer}
@media (max-width:880px){
  .menu-btn{display:inline-flex}
  .nav ul{display:none; position:absolute; left:0; right:0; top:100%; flex-direction:column; gap:0; background:var(--deep); border-bottom:1px solid var(--line); padding:8px 20px 16px}
  .nav ul li{border-top:1px solid var(--line)}
  .nav ul a{display:block; padding:14px 0; font-size:17px}
  .nav ul a.cta{display:inline-flex; margin-top:12px}
  .nav.open ul{display:flex}
}

/* ---------- hero: one photo, one line ---------- */
.hero{position:relative; isolation:isolate; overflow:hidden; background:var(--deep); min-height:min(88vh,860px); display:flex; align-items:flex-end}
.hero-bg{position:absolute; inset:0; z-index:-2}
.hero-bg img{width:100%; height:100%; object-fit:cover; object-position:center 30%}
.hero::after{content:''; position:absolute; inset:0; z-index:-1; background:linear-gradient(to top, rgba(5,12,40,.96) 0%, rgba(5,12,40,.55) 45%, rgba(5,12,40,.15) 100%)}
.hero .wrap{position:relative; padding-block:clamp(48px,8vw,96px) clamp(40px,7vw,80px); width:100%}
.hero h1,.band.light .hero h1{max-width:12ch; color:var(--ink-strong)}
.hero .lede{color:var(--ink)}
.hero .lede{max-width:40ch}
.since{display:inline-block; font-family:var(--display); text-transform:uppercase; letter-spacing:.12em; font-size:13px; color:var(--yellow); border:1px solid rgba(255,215,0,.5); padding:7px 14px; border-radius:var(--pill); margin-bottom:22px}

/* split hero: headline left, portrait right */
.split-hero{min-height:0; align-items:center; background:radial-gradient(60% 70% at 78% 40%, rgba(255,215,0,.16), transparent 70%), var(--navy)}
.split-hero::after{display:none}
.split-hero .wrap{display:grid; gap:28px; align-items:center; padding-block:clamp(40px,6vw,72px) 0}
@media (min-width:860px){ .split-hero .wrap{grid-template-columns:1.05fr .95fr; padding-block:clamp(48px,7vw,96px) 0} }
.portrait{align-self:end}
.portrait img{width:min(100%,520px); margin:0 auto; display:block; -webkit-mask-image:linear-gradient(to bottom, #000 78%, transparent 100%); mask-image:linear-gradient(to bottom, #000 78%, transparent 100%); border-radius:var(--radius) var(--radius) 0 0}

/* ---------- the four lines: selling the experience ---------- */
.four{display:grid; grid-template-columns:repeat(auto-fit,minmax(200px,1fr)); gap:18px; margin-top:36px}
.four div{border-top:3px solid var(--yellow); padding-top:16px}
.four b{display:block; font-family:var(--display); font-weight:400; text-transform:uppercase; font-size:26px; line-height:1; margin-bottom:8px}
.four p{margin:0; font-size:15px}
.band.light .four p{color:var(--muted-dark)}

/* ---------- doors ---------- */
.doors{display:grid; grid-template-columns:repeat(auto-fit,minmax(280px,1fr)); gap:18px; margin-top:36px}
.door{position:relative; display:block; border-radius:var(--radius); overflow:hidden; text-decoration:none; color:var(--ink-strong); aspect-ratio:4/5; background:var(--deep); box-shadow:var(--shadow)}
.door img{position:absolute; inset:0; width:100%; height:100%; object-fit:cover; transition:transform .5s ease}
.door:hover img{transform:scale(1.04)}
.door::after{content:''; position:absolute; inset:0; background:linear-gradient(to top, rgba(5,12,40,.95) 0%, rgba(5,12,40,.2) 55%, rgba(5,12,40,0) 100%)}
.door-body{position:absolute; left:0; right:0; bottom:0; padding:24px; z-index:1}
.door-body h3,.band.light .door-body h3{font-size:30px; color:var(--ink-strong)}
.band.light .door-body p{color:var(--ink)}
.door-body p{margin:8px 0 14px; font-size:15px; color:var(--ink); max-width:30ch}
.door-body .tag{display:inline-block; font-size:12px; letter-spacing:.1em; text-transform:uppercase; font-weight:700; color:var(--yellow)}
.door:focus-visible{outline:3px solid var(--yellow); outline-offset:3px}

/* ---------- reel ---------- */
.reel-stage{margin-top:32px; border-radius:var(--radius); overflow:hidden; box-shadow:var(--shadow); background:#000}
.reel-stage video{width:100%; aspect-ratio:16/9; display:block}
.names{display:flex; flex-wrap:wrap; gap:8px; margin-top:18px; justify-content:center}
.names span{font-size:13px; border:1px solid var(--line); padding:6px 13px; border-radius:var(--pill)}
.band.light .names span{border-color:var(--line-dark); color:var(--muted-dark)}

/* ---------- photo strip (celebs, gallery) ---------- */
.strip{display:grid; grid-template-columns:repeat(auto-fit,minmax(150px,1fr)); gap:10px; margin-top:32px}
.strip img{aspect-ratio:1; object-fit:cover; width:100%; border-radius:var(--radius-sm)}
.strip figure{margin:0}
.strip figcaption{font-size:12px; margin-top:6px; color:var(--muted)}
.band.light .strip figcaption{color:var(--muted-dark)}

/* ---------- next session ---------- */
.session{margin-top:32px; background:var(--paper); color:var(--ink-dark); border-radius:var(--radius); padding:clamp(22px,4vw,40px); box-shadow:var(--shadow)}
.session-head{display:flex; justify-content:space-between; gap:20px; flex-wrap:wrap; align-items:flex-end; margin-bottom:20px}
.session-head h3{font-size:30px; color:var(--ink-dark)}
.price{font-family:var(--display); font-size:40px; color:var(--ink-dark); line-height:1}
.price small{display:block; font-family:var(--body); font-size:13px; color:var(--muted-dark); margin-top:4px}
.dates{display:flex; flex-wrap:wrap; gap:8px; margin:0 0 22px; padding:0; list-style:none}
.dates li{font-size:14px; border:1px solid var(--line-dark); border-radius:var(--pill); padding:7px 14px; font-variant-numeric:tabular-nums}
.dates li.off{color:var(--muted-dark); border-style:dashed}
.dates li.show{background:var(--navy); color:var(--ink-strong); border-color:var(--navy); font-weight:700}
.tracks{display:grid; grid-template-columns:repeat(auto-fit,minmax(230px,1fr)); gap:12px}
.track{background:var(--paper-2); border-radius:var(--radius-sm); padding:20px}
.track h3{font-size:18px; color:var(--ink-dark)}
.track .time{font-family:var(--display); font-size:22px; color:var(--ink-dark); margin:8px 0 4px}
.track p{margin:0 0 14px; font-size:14px; color:var(--muted-dark)}
.track .btn{width:100%}
.seats{display:inline-block; font-size:12px; font-weight:800; color:var(--on-yellow); background:var(--yellow); padding:4px 11px; border-radius:var(--pill); margin-bottom:8px}
.seats.roomy{background:transparent; color:#1E8F4E; border:1px solid #1E8F4E}

/* ---------- quotes ---------- */
.quotes{display:grid; grid-template-columns:repeat(auto-fit,minmax(280px,1fr)); gap:16px; margin-top:32px}
blockquote{margin:0; background:var(--surface); border-radius:var(--radius); padding:26px}
.band.light blockquote{background:var(--paper-2)}
blockquote p{margin:0 0 14px; font-size:17px; line-height:1.5}
blockquote footer{font-size:13px; color:var(--muted)}
.band.light blockquote footer{color:var(--muted-dark)}
blockquote footer b{display:block; font-weight:700; color:inherit}
.stars{color:var(--yellow); letter-spacing:.14em; font-size:14px; margin-bottom:12px}
.band.light .stars{color:#C9A800}

/* ---------- generic cards / people / checks ---------- */
.cards{display:grid; grid-template-columns:repeat(auto-fit,minmax(250px,1fr)); gap:16px; margin-top:32px}
.card{background:var(--surface); border-radius:var(--radius); padding:24px}
.band.light .card{background:var(--paper-2)}
.card h3{margin-bottom:8px}
.card p{margin:0; font-size:15px}
.card .n{font-family:var(--display); font-size:40px; line-height:1; margin-bottom:10px; color:var(--yellow)}
.band.light .card .n{color:var(--ink-dark)}
.people{display:grid; grid-template-columns:repeat(auto-fit,minmax(220px,1fr)); gap:18px; margin-top:32px}
.person img{aspect-ratio:4/5; object-fit:cover; width:100%; border-radius:var(--radius)}
.person h3{margin-top:14px; font-size:20px}
.person .role{font-size:12px; letter-spacing:.14em; text-transform:uppercase; font-weight:700; color:var(--yellow); margin:4px 0 8px}
.band.light .person .role{color:#7A6400}
.person p{margin:0; font-size:14px}
.checks{list-style:none; margin:24px 0 0; padding:0; display:grid; gap:12px; max-width:60ch}
.checks li{padding-left:30px; position:relative; font-size:17px}
.checks li::before{content:"✓"; position:absolute; left:0; color:var(--yellow); font-weight:900}
.band.light .checks li::before{color:#C9A800}
.split{display:grid; gap:32px; align-items:center; margin-top:8px}
@media (min-width:860px){ .split{grid-template-columns:1fr 1fr} .split.rev > :first-child{order:2} }
.split img{border-radius:var(--radius); width:100%; aspect-ratio:4/3; object-fit:cover; box-shadow:var(--shadow)}
.video{border-radius:var(--radius); overflow:hidden; aspect-ratio:16/9; background:#000; box-shadow:var(--shadow)}
.video iframe{width:100%; height:100%; border:0; display:block}
details{border-top:1px solid var(--line); padding:16px 0}
.band.light details{border-color:var(--line-dark)}
summary{cursor:pointer; font-weight:700; font-size:17px; list-style:none; display:flex; justify-content:space-between; gap:12px}
summary::after{content:"+"; font-family:var(--display); font-size:22px}
details[open] summary::after{content:"–"}
details .a{padding-top:10px; font-size:16px}
.policy{border-left:4px solid var(--yellow); padding:14px 18px; margin-top:24px; max-width:64ch; font-size:16px}
form .row{display:grid; gap:14px; margin-top:20px}
@media (min-width:640px){ form .row.two{grid-template-columns:1fr 1fr} }
label{display:block; font-size:13px; font-weight:700; margin-bottom:6px}
input,select,textarea{width:100%; font:inherit; padding:13px 14px; border-radius:var(--radius-sm); border:2px solid var(--line-dark); background:var(--paper); color:var(--ink-dark)}
textarea{min-height:140px}

/* ---------- footer ---------- */
footer.site{background:var(--deep); padding-block:56px 40px; font-size:15px; color:var(--muted)}
footer.site .cols{display:grid; grid-template-columns:repeat(auto-fit,minmax(170px,1fr)); gap:28px}
footer.site h4{font-family:var(--display); font-weight:400; text-transform:uppercase; font-size:13px; letter-spacing:.16em; color:var(--ink-strong); margin:0 0 12px}
footer.site ul{list-style:none; margin:0; padding:0}
footer.site li{margin-bottom:9px}
footer.site a{text-decoration:none}
footer.site a:hover{color:var(--yellow)}
.legal{margin-top:36px; padding-top:20px; border-top:1px solid var(--line); font-size:13px; display:flex; justify-content:space-between; gap:12px; flex-wrap:wrap}

/* ---------- white theme audition (white.html) ---------- */
body.theme-white{background:var(--paper); color:var(--ink-dark)}
body.theme-white .eyebrow{color:var(--ink-dark)}
body.theme-white .band:not(.light) .eyebrow{color:var(--yellow)}
body.theme-white .switch{background:var(--paper-2); border-color:var(--line-dark)}
body.theme-white .switch a{color:var(--muted-dark)} body.theme-white .switch a[aria-current="true"]{color:var(--ink-dark)}
body.theme-white .nav{background:rgba(255,255,255,.92); border-color:var(--line-dark)}
body.theme-white .nav ul a{color:var(--ink-dark)}
body.theme-white .nav ul a:hover,body.theme-white .nav ul a[aria-current="page"]{color:#7A6400}
body.theme-white .menu-btn{color:var(--ink-dark); border-color:var(--ink-dark)}
@media (max-width:880px){ body.theme-white .nav ul{background:var(--paper)} body.theme-white .nav ul li{border-color:var(--line-dark)} }
body.theme-white .session{background:var(--navy); color:var(--ink-strong); box-shadow:none}
body.theme-white .session-head h3,body.theme-white .price,body.theme-white .track h3,body.theme-white .track .time{color:var(--ink-strong)}
body.theme-white .price small,body.theme-white .track p{color:var(--muted)}
body.theme-white .track{background:var(--surface)}
body.theme-white .dates li{border-color:var(--line)} body.theme-white .dates li.off{color:var(--muted)}
body.theme-white .dates li.show{background:var(--yellow); color:var(--on-yellow); border-color:var(--yellow)}
body.theme-white .seats.roomy{color:var(--good); border-color:var(--good)}
body.theme-white footer.site{background:var(--paper-2); color:var(--muted-dark)}
body.theme-white footer.site h4{color:var(--ink-dark)} body.theme-white .legal{border-color:var(--line-dark)}

/* ---------- framed hero (framed.html): photo in a card, headline beside the comic ---------- */
.framed .wrap{padding-top:clamp(28px,4vw,48px)}
.framed .eyebrow.center{text-align:center; margin-bottom:18px}
.frame{position:relative; border-radius:var(--radius); overflow:hidden; box-shadow:var(--shadow); aspect-ratio:16/9; background:var(--deep)}
.frame img{position:absolute; inset:0; width:100%; height:100%; object-fit:cover; object-position:center 38%}
/* the comic stands at about 68% across, 24-45% down the photo; the headline ends just left of him */
.callout{position:absolute; left:4%; right:36%; top:16%; text-align:right}
.callout h1{font-size:clamp(28px,6.4vw,84px); line-height:.9; text-shadow:0 4px 24px rgba(0,0,0,.55)}
.framed .under{display:grid; gap:18px; align-items:center; padding-block:28px 8px}
@media (min-width:760px){ .framed .under{grid-template-columns:1.2fr 1fr} .framed .under .actions{margin-top:0; justify-content:flex-end} }
.framed .under .lede{margin:0}
body.theme-white .framed .under .lede{color:var(--ink-dark)}
@media (max-width:600px){ .frame{aspect-ratio:4/3} .callout{left:3%; right:40%; top:8%} .callout h1{font-size:30px} }

/* ---------- gallery mode (the Apple / Bananas pass): white canvas, huge quiet type,
   photos as objects, no shadows, one yellow highlighter for the fun words ---------- */
body.gallery{background:var(--paper); color:var(--ink-dark); font-size:19px}
body.gallery .switch{background:var(--paper)}
body.gallery .nav{background:rgba(255,255,255,.85); border-color:transparent}
.g-hero{padding-block:clamp(56px,9vw,120px) 0}
.g-eyebrow{font-size:13px; letter-spacing:.2em; text-transform:uppercase; font-weight:700; color:var(--muted-dark); margin:0 0 22px}
.g-h1{font-family:var(--display); font-weight:400; text-transform:uppercase; letter-spacing:-.005em; line-height:.9; color:var(--ink-dark); font-size:clamp(64px,13vw,168px); margin:0}
.g-h2{font-family:var(--display); font-weight:400; text-transform:uppercase; line-height:.98; color:var(--ink-dark); font-size:clamp(34px,6vw,76px); margin:0; max-width:18ch; text-wrap:balance}
.center .g-h2{margin-inline:auto}
.g-h2 em{font-style:normal; text-decoration:underline; text-decoration-color:var(--yellow); text-decoration-thickness:.12em; text-underline-offset:.08em}
mark{background:linear-gradient(transparent 55%, var(--yellow) 55%); color:inherit; padding:0 .06em; border-radius:2px}
.g-sub{font-size:clamp(19px,2.3vw,26px); line-height:1.4; color:var(--muted-dark); max-width:34ch; margin:22px auto 0}
.g-sub b{color:var(--ink-dark); font-weight:700}
.g-split .g-sub{margin-inline:0}
.g-link{display:inline-flex; align-items:center; font-weight:700; color:var(--ink-dark); text-decoration:none; padding:16px 6px; border-bottom:2px solid transparent}
.g-link:hover{border-bottom-color:var(--yellow)}
body.gallery .actions{margin-top:30px; gap:18px; align-items:center}
.g-photo{width:100%; aspect-ratio:16/9; object-fit:cover; object-position:center 38%; border-radius:28px; margin-top:clamp(40px,6vw,72px); display:block}
.g-band{padding-block:clamp(72px,11vw,140px)}
.g-band.mist{background:var(--paper-2)}
.g-video{margin-top:clamp(36px,5vw,60px); border-radius:28px; overflow:hidden; background:#000}
.g-video video{width:100%; aspect-ratio:16/9; display:block}
.g-caption{font-size:15px; color:var(--muted-dark); margin:18px 0 0; max-width:70ch}
.g-caption.center{text-align:center; margin-inline:auto}
.g-caption a{color:var(--ink-dark); font-weight:700; text-decoration:none}
.g-split{display:grid; gap:36px; align-items:center}
@media (min-width:820px){ .g-split{grid-template-columns:.8fr 1.2fr; gap:64px} }
.g-split img{width:100%; aspect-ratio:5/6; object-fit:cover; object-position:top; border-radius:28px}
.g-doors,.g-strip{margin-top:clamp(36px,5vw,60px)}
body.gallery .door{box-shadow:none; border-radius:28px}
body.gallery .door-body h3{color:var(--ink-strong)} body.gallery .door-body p{color:var(--ink)}
body.gallery .strip img{border-radius:20px}
body.gallery .strip figcaption{text-align:center; color:var(--muted-dark)}
body.gallery .session{margin-top:clamp(36px,5vw,60px); background:var(--navy); color:var(--ink-strong); box-shadow:none; border-radius:28px}
body.gallery .session-head h3,body.gallery .price,body.gallery .track h3,body.gallery .track .time{color:var(--ink-strong)}
body.gallery .price small,body.gallery .track p{color:var(--muted)}
body.gallery .track{background:var(--surface); border-radius:20px}
body.gallery .dates li{border-color:var(--line)} body.gallery .dates li.off{color:var(--muted)}
body.gallery .dates li.show{background:var(--yellow); color:var(--on-yellow); border-color:var(--yellow)}
body.gallery .seats.roomy{color:var(--good); border-color:var(--good)}
body.gallery footer.site{background:var(--paper); color:var(--muted-dark); border-top:1px solid var(--line-dark)}
body.gallery footer.site h4{color:var(--ink-dark)} body.gallery .legal{border-color:var(--line-dark)}
.g-h1 mark,.g-h2 mark{display:inline-block; line-height:.86; background:linear-gradient(transparent 48%, var(--yellow) 48%, var(--yellow) 92%, transparent 92%); padding:0 .05em}
.g-h1 mark,.g-h2 mark{display:inline; line-height:inherit; background:none; box-shadow:inset 0 -.38em 0 0 var(--yellow); padding:0 .04em}

/* hero card: the photo is the object, the words live on it */
.g-hero{padding-block:clamp(16px,3vw,32px) 0}
.g-card{position:relative; border-radius:28px; overflow:hidden; background:var(--deep); aspect-ratio:16/10; display:flex; align-items:flex-end}
@media (max-width:640px){ .g-card{aspect-ratio:4/5} }
.g-card img{position:absolute; inset:0; width:100%; height:100%; object-fit:cover; object-position:center 35%}
.g-card::after{content:''; position:absolute; inset:0; background:linear-gradient(to top, rgba(5,12,40,.92) 0%, rgba(5,12,40,.45) 45%, rgba(5,12,40,.05) 75%)}
.g-card-copy{position:relative; z-index:1; padding:clamp(24px,5vw,64px); max-width:720px}
.g-card-copy .g-eyebrow{color:var(--yellow)}
.g-card-copy .g-h1{color:var(--ink-strong); font-size:clamp(48px,9vw,120px)}
.g-card-copy .g-sub{color:var(--ink); margin-inline:0}
.g-card-copy .g-sub b{color:var(--ink-strong)}
.g-card-copy .g-link{color:var(--ink-strong)}
.g-card-copy .g-h1 mark{box-shadow:inset 0 -.38em 0 0 var(--yellow); color:var(--ink-strong)}

/* on the photo, the fun word is plain yellow; the highlighter is for white pages */
.g-card-copy .g-h1 mark{box-shadow:none; color:var(--yellow); padding:0}

/* "This could be YOU!" on one line, ending beside the comic on stage (he stands ~68% across, ~37% down the card) */
.you-line{position:absolute; z-index:1; margin:0; left:4%; right:37%; top:30%; text-align:right; font-family:var(--display); text-transform:uppercase; color:var(--ink-strong); font-size:clamp(22px,4.6vw,64px); line-height:1; letter-spacing:.01em; white-space:nowrap; text-shadow:0 3px 18px rgba(0,0,0,.6)}
.g-card-copy .g-h1{font-size:clamp(44px,8.4vw,116px)}
@media (max-width:640px){ .you-line{right:auto; left:6%; top:8%; text-align:left; font-size:26px} }
.you-line{top:19%; font-size:clamp(20px,4vw,58px)}
.g-card-copy .g-h1{font-size:clamp(40px,7.2vw,104px)}
@media (max-width:1000px){ .g-card{aspect-ratio:4/3} }
.you-line{top:27%}

/* full-screen hero: the photo fills the first screen, then a hard section break */
.full-hero{position:relative; height:calc(100svh - 118px); min-height:520px; overflow:hidden; background:var(--deep)}
.full-hero img{position:absolute; inset:0; width:100%; height:100%; object-fit:cover; object-position:center 35%}
.full-hero::after{content:''; position:absolute; inset:0; background:linear-gradient(to top, rgba(5,12,40,.9) 0%, rgba(5,12,40,.35) 45%, rgba(5,12,40,.05) 75%)}
.full-hero .you-line{left:4%; right:36%; top:30%}
.full-copy{position:absolute; left:0; right:0; bottom:0; z-index:1; padding:0 clamp(20px,5vw,72px) clamp(28px,5vw,64px); max-width:820px}
.full-copy .g-h1{color:var(--ink-strong); font-size:clamp(44px,7.5vw,112px)}
.full-copy .g-sub{color:var(--ink); margin-inline:0} .full-copy .g-sub b{color:var(--ink-strong)} .full-copy .g-link{color:var(--ink-strong)}
.break{height:clamp(18px,3vw,36px); background:var(--paper); border-bottom:1px solid var(--line-dark)}

/* School of Rock header: logo straight on the photo, top-left; menu top-right; no bar */
.nav.overlay{position:absolute; top:0; left:0; right:0; z-index:20; background:transparent; border:0; backdrop-filter:none}
.nav.overlay .wrap{padding-block:22px; max-width:none; padding-inline:clamp(20px,3vw,40px)}
body.theme-white .nav.overlay .logo{background:transparent; padding:0}
.nav.overlay .logo img{height:clamp(56px,7vw,92px)}
.nav.overlay ul a{color:var(--ink-strong); font-weight:700}
.nav.overlay ul a:hover{color:var(--yellow)}
body.theme-white .nav.overlay .menu-btn{color:var(--ink-strong); border-color:transparent; padding:8px}
.burger{display:block; width:34px; height:22px; border-top:3px solid #fff; border-bottom:3px solid #fff; position:relative}
.burger::after{content:''; position:absolute; left:0; right:0; top:50%; height:3px; margin-top:-1.5px; background:#fff}
.sr{position:absolute; width:1px; height:1px; overflow:hidden; clip:rect(0 0 0 0)}
@media (min-width:881px){ .nav.overlay .menu-btn{display:none} }
@media (max-width:880px){ .nav.overlay ul{top:100%; background:rgba(5,12,40,.96)} .nav.overlay ul li{border-color:var(--line)} }
.full-hero{height:100svh; min-height:560px}
.full-hero::after{background:linear-gradient(to top, rgba(5,12,40,.92) 0%, rgba(5,12,40,.35) 45%, rgba(5,12,40,.25) 100%)}
body .nav.overlay{background:transparent}

body .nav.overlay ul a{color:var(--ink-strong)} body .nav.overlay ul a:hover{color:var(--yellow)} body .nav.overlay ul a.cta{color:var(--on-yellow)}

/* Corey's layout from the editor, 23 Sep: everything stacked left, headline first, "This could be YOU!" under it */
.full-copy.corey{top:23%; bottom:auto; left:6%; right:auto; padding:0; max-width:none}
.full-copy.corey .g-h1{font-size:clamp(44px,6.7vw,96px); line-height:.95}
.full-copy.corey .g-h1 small{font-size:.5em; display:block; letter-spacing:.06em}
.full-copy.corey .you-line{position:static; text-align:left; white-space:normal; font-size:clamp(28px,4vw,58px); margin:5vh 0 0}
.full-copy.corey .g-sub{font-size:22px; max-width:44ch; margin-top:3.5vh}
.full-copy.corey .actions{margin-top:3vh}
@media (max-height:700px){ .full-copy.corey{top:16%} }

/* Corey's editor pass, 23 Sep, second round: yellow first line, white second, all-yellow "This could be YOU!", tight stack */
.full-copy.corey{top:auto; bottom:14%; left:6%}
.full-copy.corey .g-h1{font-size:clamp(48px,7.6vw,132px); line-height:.92}
.full-copy.corey .you-line{font-size:clamp(28px,4.4vw,76px); margin:.2em 0 0; color:var(--yellow)}
.full-copy.corey .g-sub{font-size:clamp(18px,1.6vw,26px); font-weight:600; max-width:60ch; margin-top:5vh}
.full-copy.corey .actions{margin-top:3.5vh}
@media (max-height:760px){ .full-copy.corey{bottom:6%} .full-copy.corey .g-sub{margin-top:3vh} }

/* School of Rock behaviour: the hero copy scales with the width of the screen and never moves off its anchor.
   Everything below is in vw, anchored left 6% / bottom 12%, with no breakpoint overrides. */
.full-copy.corey{left:6%; bottom:12%; top:auto; right:8%; max-width:none}
.full-copy.corey .g-h1{font-size:max(7.6vw,34px); line-height:.92}
.full-copy.corey .you-line{font-size:max(4.4vw,20px); margin:.25em 0 0}
.full-copy.corey .g-sub{font-size:max(1.5vw,15px); margin-top:max(3.2vw,18px); max-width:60ch}
.full-copy.corey .actions{margin-top:max(2.2vw,14px)}
.full-copy.corey .btn{font-size:max(1.1vw,15px); padding:max(1.1vw,13px) max(2vw,22px)}
@media (max-height:760px){ .full-copy.corey{bottom:12%} .full-copy.corey .g-sub{margin-top:max(3.2vw,18px)} }
.nav.overlay .logo img{height:max(6.4vw,52px)}

/* headline option D: small claim line, big number, "This could be YOU!" */
.full-copy.corey .kicker{font-family:var(--display); text-transform:uppercase; letter-spacing:.06em; color:var(--ink-strong); font-size:max(2.2vw,18px); line-height:1; margin:0 0 .35em}

/* phones: shorter hero so the first story section peeks in, copy sits lower, no dead band at the bottom */


/* Corey's saved hero layout, 24 Sep 2026 (from the preview page) */
.phone-only{display:none}
.full-copy.corey{left:4%; bottom:26%}
@media (max-width:640px){
  .desk-only{display:none} .phone-only{display:inline}
  .full-hero{height:100svh; min-height:560px}
  .full-copy.corey{left:6%; bottom:53%; transform:scale(1.03); transform-origin:left bottom}
  .full-hero img{object-position:62% 39%}
}

/* desktop: hero copy shares the nav's left padding so the T sits under the C of COOL / COMEDY */
@media (min-width:641px){ .full-copy.corey{left:clamp(20px,3vw,40px)} }

/* hero copy: everything hard-left, nothing centred, no auto margins */
.full-copy.corey, .full-copy.corey *{text-align:left}
.full-copy.corey .g-h1, .full-copy.corey .kicker, .full-copy.corey .you-line, .full-copy.corey .g-sub{margin-left:0; margin-right:0; max-width:none}
.full-copy.corey .g-sub{max-width:60ch}
.full-copy.corey .actions{justify-content:flex-start; margin-left:0}

/* Corey, 24 Sep: desktop hero copy 3% from the left, 26% up; the logo sits on the same 3% so the T stays under the C */
@media (min-width:641px){
  .nav.overlay .wrap{padding-inline:3%}
  .full-copy.corey{left:3%; bottom:26%}
}

/* desktop: the Enroll button is a real button, not a pill of small type */
@media (min-width:641px){ .full-copy.corey .btn{font-size:max(1.5vw,20px); padding:max(1.4vw,18px) max(2.6vw,34px)} }

/* 1.2 proof section: grads headline on top, Suzanne row underneath, one white band. */
.g-h2.wide{max-width:24ch}
.proof-row{display:grid; grid-template-columns:150px 1fr; gap:22px; align-items:center; margin-top:clamp(40px,6vw,72px); padding-top:clamp(28px,4vw,48px); border-top:1px solid #e6e8ef}
.proof-row img{width:100%; aspect-ratio:4/5; object-fit:cover; border-radius:18px}
.g-h3{font-family:var(--display); font-weight:400; text-transform:uppercase; line-height:1; color:var(--ink-dark); font-size:clamp(21px,3.4vw,44px); margin:0 0 10px; max-width:22ch; text-wrap:balance}
.proof-row .g-sub{margin-inline:0; margin-top:0}
@media (min-width:820px){ .proof-row{grid-template-columns:280px 1fr; gap:48px; max-width:900px; margin-inline:auto} }
@media (max-width:819px){ .proof-row .g-sub{font-size:15px; line-height:1.45} .proof-row{align-items:stretch} .proof-row img{height:100%; aspect-ratio:auto; object-position:50% 20%} }

/* Desktop: 1.2 is one screen tall, like the hero. Grads on top, Suzanne below, nothing spills. */
@media (min-width:900px){
  .g-band.proof{min-height:100svh; box-sizing:border-box; display:grid; align-content:center; padding-block:clamp(48px,7vh,96px); row-gap:0}
  .proof .g-h2.wide{font-size:clamp(34px,5.2vw,64px)}
  .proof .proof-row{margin-top:clamp(28px,4.5vh,56px); padding-top:clamp(22px,3.5vh,40px); grid-template-columns:clamp(200px,24vh,280px) 1fr}
  .proof .g-h3{font-size:clamp(24px,3vw,40px)}
}

/* 1.3 reviews: three numbers, then six real quotes. Underlines (mark) are ours. */
.rev-stats{display:grid; grid-template-columns:repeat(3,1fr); gap:14px; margin-top:clamp(26px,4vw,44px)}
.rev-stat{display:grid; gap:4px; justify-items:center; text-align:center; align-content:start;
  padding:24px 18px 22px; border-radius:18px; background:var(--paper-2); color:inherit; text-decoration:none;
  border:1px solid transparent; transition:border-color .16s ease, transform .16s ease}
a.rev-stat:hover{transform:translateY(-2px)}
.rev-stat .src{display:flex; align-items:center; gap:7px; font-size:12.5px; font-weight:800; letter-spacing:.14em; text-transform:uppercase; opacity:.9}
.rev-stat .src svg{width:16px; height:16px; fill:currentColor; flex:0 0 auto}
.rev-stat .figure{display:flex; align-items:center; gap:12px}
.rev-stat .big{font-family:var(--display); font-weight:400; font-size:clamp(38px,4.6vw,52px); line-height:.9; font-variant-numeric:tabular-nums}
.rev-stat .lab{font-size:13.5px; opacity:.62}
.rev-stat .more{margin-top:8px; font-size:13px; font-weight:700; color:inherit; text-decoration:underline; text-underline-offset:4px; opacity:.85}
.rev-stat .more:hover{opacity:1; color:var(--yellow)}
.rev-grid{display:grid; gap:16px; margin-top:clamp(28px,4vw,48px)}
@media (min-width:760px){ .rev-grid{grid-template-columns:repeat(2,1fr)} }
@media (min-width:1100px){ .rev-grid{grid-template-columns:repeat(3,1fr)} }
.rev{margin:0; padding:24px; border-radius:20px; border:1px solid #e6e8ef; background:#fff; display:flex; flex-direction:column; gap:12px}
.rev .who{margin:0; font-size:12px; letter-spacing:.16em; text-transform:uppercase; font-weight:800; color:var(--muted-dark)}
.rev p{margin:0; font-size:16px; line-height:1.55; color:var(--ink-dark)}
.rev footer{margin-top:auto; font-size:13px; color:var(--muted-dark); font-weight:600}
@media (max-width:759px){
  .rev-stats{grid-template-columns:1fr 1fr; gap:10px}
  .rev-stats .rev-stat:last-child{grid-column:1/-1}
  .rev-stat{padding:16px 12px 14px; gap:2px}
  .rev-stat .src{font-size:11px; letter-spacing:.1em}
  .rev-stat .src svg{width:13px; height:13px}
  .rev-stat .big{font-size:38px}
  .rev-stat .lab{font-size:12.5px}
}

/* Suzanne headline mark: a thinner underline than the big g-h2 marks, thinner still on phone. */
.g-h3 mark{background:none; box-shadow:inset 0 -.3em 0 0 var(--yellow); padding:0 .04em}
@media (max-width:819px){ .g-h3 mark{box-shadow:inset 0 -.2em 0 0 var(--yellow)} }



/* Join the Fun cards: Corey's crops (24 Sep) and a darker foot so the tag reads over bright clothing. */
body.gallery .door::after{background:linear-gradient(to top, rgba(5,12,40,.97) 0%, rgba(5,12,40,.75) 38%, rgba(5,12,40,.15) 62%, rgba(5,12,40,0) 100%)}
body.gallery .door-body .tag{font-size:13px; font-weight:800; text-shadow:0 1px 3px rgba(0,0,0,.6)}
.door img.crop-lily{object-position:50.1% 14.9%; transform:scale(1.75); transform-origin:50.1% 14.9%}
.door img.crop-tb{object-position:76.9% 100%; transform:scale(1.19); transform-origin:76.9% 100%}
.door:hover img.crop-lily{transform:scale(1.8)} .door:hover img.crop-tb{transform:scale(1.23)}

/* 1.4 "This could be you": the film, the running total, the clip rows, and the on-page lightbox. */
.clips .g-eyebrow{margin-bottom:10px}
.clips .clip-total{font-size:clamp(46px,8vw,86px)}   /* the ticker leads the section, so it runs bigger */
.clips .film{margin-top:clamp(22px,3.2vw,34px)}
.film{display:block;width:100%;padding:0;border:0;background:#000;border-radius:26px;overflow:hidden;position:relative;cursor:pointer;margin-top:clamp(20px,3vw,30px)}
.film img{display:block;width:100%;aspect-ratio:16/9;object-fit:cover;opacity:.92;transition:opacity .25s ease,transform .5s ease}
.film:hover img{opacity:1;transform:scale(1.02)}
.film-play{position:absolute;left:50%;top:50%;transform:translate(-50%,-50%);width:clamp(58px,6vw,86px);height:clamp(58px,6vw,86px);border-radius:50%;background:var(--yellow);color:var(--ink-dark);display:grid;place-items:center;font-size:clamp(21px,2.2vw,30px);padding-left:.18em;box-shadow:0 10px 30px rgba(0,0,0,.45)}
.clip-rule{border:0;border-top:1px solid #e4e7f0;margin:clamp(30px,4vw,46px) 0 clamp(26px,3.5vw,34px)}
.clip-total{font-family:var(--display);font-weight:400;font-size:clamp(42px,7vw,68px);line-height:.9;margin:0;color:var(--ink-dark);font-variant-numeric:tabular-nums}
.clip-total-label{font-size:12px;letter-spacing:.14em;text-transform:uppercase;font-weight:800;color:var(--muted-dark);margin:8px 0 0}
.clip-h{font-size:clamp(24px,3.4vw,38px);margin-top:16px;max-width:22ch}
.clip-tabs{display:flex;gap:8px;margin:20px 0 16px}
.clip-tab{font:800 12px/1 Inter,sans-serif;letter-spacing:.08em;text-transform:uppercase;padding:9px 18px;border-radius:999px;border:0;background:var(--paper-2);color:var(--muted-dark);cursor:pointer}
.clip-tab.is-on{background:var(--ink-dark);color:#fff}
.clip-rows{display:grid;gap:10px}
@media (min-width:860px){ .clip-rows{grid-template-columns:1fr 1fr;gap:12px} }
.clip-row{display:grid;grid-template-columns:clamp(84px,8vw,104px) 1fr auto;gap:14px;align-items:center;background:var(--paper-2);border:1px solid var(--line-dark);border-radius:16px;padding:10px 16px 10px 10px;cursor:pointer;text-align:left;font:inherit;color:inherit;transition:background .18s ease, border-color .18s ease}
.clip-row[hidden]{display:none}   /* an explicit display beats the hidden attribute, so say it again */
.clip-row:hover{background:#e9ecf6;border-color:rgba(8,18,58,.22)}
.clip-row img{width:100%;aspect-ratio:1;object-fit:cover;border-radius:12px;background:#ccd3e6;display:block}
.clip-who{display:grid;gap:2px;min-width:0}
.clip-name{font-weight:800;font-size:clamp(14px,1.3vw,16px);line-height:1.2}
.clip-sub{color:var(--muted-dark);font-size:13px}
.clip-num{font-family:var(--display);font-weight:400;font-size:clamp(21px,2.2vw,27px);line-height:1;text-align:right;color:var(--ink-dark)}
.clip-num small{display:block;font-family:Inter,sans-serif;font-size:10px;font-weight:700;letter-spacing:.1em;color:var(--muted-dark);margin-top:3px}
.lightbox{position:fixed;inset:0;z-index:60;background:rgba(3,7,24,.94);display:grid;grid-template-columns:auto 1fr auto;grid-template-rows:auto auto;align-content:center;align-items:center;gap:14px;padding:18px}  /* photo and caption stay together, centered (Corey) */
.lightbox[hidden]{display:none}
.lb-stage{grid-column:2;grid-row:1;display:grid;place-items:center;min-height:0}
.lb-stage video{max-height:82vh;max-width:min(92vw,560px);border-radius:14px;background:#000;display:block}
.lb-stage iframe{width:min(92vw,1100px);aspect-ratio:16/9;border:0;border-radius:14px;background:#000}
.lb-cap{grid-column:1/-1;grid-row:2;text-align:center;color:#fff;font-weight:700;margin:0;font-size:14px}
.lb-close,.lb-prev,.lb-next{border:0;background:rgba(255,255,255,.12);color:#fff;cursor:pointer;border-radius:50%;display:grid;place-items:center}
.lb-close{position:absolute;top:16px;right:16px;width:44px;height:44px;font-size:26px;line-height:1}
.lb-prev,.lb-next{width:52px;height:52px;font-size:30px;line-height:1;grid-row:1}
.lb-prev{grid-column:1}.lb-next{grid-column:3}
.lb-close:hover,.lb-prev:hover,.lb-next:hover{background:rgba(255,255,255,.24)}
@media (max-width:640px){ .lb-prev,.lb-next{width:42px;height:42px;font-size:24px} .lightbox{padding:10px;gap:6px} }

/* Headlines that must never wrap: shrink to fit the line instead. */
.g-h2.oneline{white-space:nowrap; max-width:none}   /* same size as every other g-h2; it just never wraps */
.clips .clip-total{margin-top:clamp(18px,2.4vw,28px)}
.clips .clip-total-label{margin-bottom:clamp(14px,2vw,20px)}
.clips .clip-tabs{justify-content:center}

/* Two things the white pages need from the kit, so pages stop patching them one by one.
   1. The burger is drawn white for the photo hero; on a white nav bar it needs ink.
   2. A navy card has to set its own text colour or it renders navy on navy. */
body.gallery .nav:not(.overlay) .burger{border-color:var(--ink-dark)}
body.gallery .nav:not(.overlay) .burger::after{background:var(--ink-dark)}
body.gallery .card{color:var(--ink-dark)}
body.gallery .card.deep, body.gallery .card.navy{color:#fff}

.g-sub.oneline{white-space:nowrap; max-width:none}
.rev[hidden]{display:none}   /* an explicit display beats the hidden attribute */
.rev-tabs{justify-content:center; margin-top:clamp(20px,3vw,28px)}

/* A dark band, so the page is not five shades of white in a row.
   The quote cards stay white and read like paper pinned on navy. */
.g-band.deep{background:var(--ink-dark); color:#fff}
.g-band.deep .g-h2{color:#fff}
/* On the dark band a heading stays white and drops the highlight; the yellow
   underline only reads as a bar floating behind white letters. */
.g-band.deep .g-h2 mark,.g-band.deep .g-h3 mark{
  background:none; box-shadow:none; color:inherit; padding:0}
/* The quote cards are still white, so a highlight inside one keeps its yellow. */
.g-band.deep .rev mark{background:linear-gradient(transparent 55%, var(--yellow) 55%);
  color:var(--ink-dark); padding:0 .06em; border-radius:2px}
.g-band.deep .g-sub,.g-band.deep .g-caption{color:rgba(255,255,255,.72)}
.g-band.deep .rev-stat{background:rgba(255,255,255,.06); border-color:rgba(255,255,255,.12); color:#fff}
.g-band.deep a.rev-stat:hover{border-color:var(--yellow)}
.g-band.deep .rev-stat .big{color:var(--yellow)}
.g-band.deep .rev-stat{border-left-color:rgba(255,255,255,.18)}

.g-band.deep .clip-tab{background:rgba(255,255,255,.12); color:rgba(255,255,255,.8)}
.g-band.deep .clip-tab.is-on{background:var(--yellow); color:var(--on-yellow)}
.g-band.deep .rev{background:#fff; border-color:transparent}
.g-band.deep .g-caption a{color:var(--yellow)}

@media (max-width:759px){
  .rev-stats{grid-template-columns:1fr 1fr; gap:10px}
  .rev-stats .rev-stat:last-child{grid-column:1/-1}
  .rev-stat{padding:16px 12px 14px; gap:2px}
  .rev-stat .src{font-size:11px; letter-spacing:.1em}
  .rev-stat .src svg{width:13px; height:13px}
  .rev-stat .big{font-size:38px}
  .rev-stat .lab{font-size:12.5px}
}
.revgroup[hidden]{display:none}   /* an explicit display beats the hidden attribute */
.rev-switch{padding-block:0}
.rev-switch .rev-tabs{margin:0 0 clamp(6px,1vw,10px); flex-wrap:wrap}

/* The reviews heading sits above its numbers, so it has to out-weigh them. */
.reviews .g-h2{font-size:clamp(34px,5.6vw,64px)}
.reviews .wrap.center{text-align:center}
.reviews .g-sub{margin-top:12px}

/* Phone only: the hero fills the screen with no peek of what is below, so it says so. */
.scrollcue{display:none}
@media (max-width:640px){
  .scrollcue{display:grid; justify-items:center; gap:7px; position:absolute; left:0; right:0; bottom:46px; z-index:3;
    pointer-events:none; color:var(--yellow); animation:cuefloat 2.4s ease-in-out infinite}
  .scrollcue span{font:800 10px/1 Inter,sans-serif; letter-spacing:.2em; text-transform:uppercase; text-shadow:0 2px 10px rgba(0,0,0,.75)}
  .scrollcue svg{width:30px; height:17px}
}
@keyframes cuefloat{0%,100%{transform:translateY(0)}50%{transform:translateY(7px)}}
@media (prefers-reduced-motion:reduce){ .scrollcue{animation:none} }

/* Hero, 25 Sep: the copy was sized only by the width of the window, so on a wide
   short screen the block grew taller than the space above its anchor and ran into
   the logo. Everything here caps the same sizes by height as well. */
@media (min-width:641px){
  .full-copy.corey .kicker{font-size:clamp(18px, min(2.2vw, 3.8vh), 44px)}
  .full-copy.corey .g-h1{font-size:clamp(34px, min(7.6vw, 14vh), 132px)}
  .full-copy.corey .you-line{font-size:clamp(20px, min(4.4vw, 7.6vh), 76px)}
  .full-copy.corey .g-sub{font-size:clamp(15px, min(1.5vw, 2.4vh), 26px); margin-top:min(3.2vw, 4.4vh)}
  .full-copy.corey .actions{margin-top:min(2.2vw, 3.2vh)}
  .full-copy.corey .btn{font-size:clamp(18px, min(1.5vw, 2.4vh), 30px); padding:min(1.4vw,2.2vh) min(2.6vw,4vh)}
  .nav.overlay .logo img{height:clamp(52px, min(6.4vw, 8vh), 104px)}
}

/* Corey, 25 Sep: the one yellow word in the Reviews band. A highlight bar sits
   across small light type instead of under it, so this is coloured text. */
.yel{color:var(--yellow)}

/* 1.6 famous friends + famous audience, and the footer Corey signed off on 25 Sep. */

.famous{padding-block:clamp(40px,4.4vw,64px)}
.famous .g-h2{font-size:clamp(26px,4.05vw,56px); max-width:none; margin-bottom:clamp(24px,2.6vw,38px)}
@media (min-width:900px){ .famous .g-h2{white-space:nowrap} }
.ff-row{display:grid; grid-template-columns:repeat(5,1fr); gap:clamp(10px,1.4vw,20px)}
.ff img{width:100%; aspect-ratio:1; object-fit:cover; border-radius:20px; display:block}
.ff figcaption{margin-top:10px; font-weight:800; font-size:clamp(14px,1.15vw,17px); color:var(--ink-dark); text-align:center}
.ff{margin:0}
.fa-wrap{margin-top:clamp(26px,2.6vw,38px); padding-top:clamp(22px,2.2vw,30px); border-top:1px solid #e6e8ef; display:flex; gap:clamp(18px,2.4vw,40px); align-items:center; justify-content:center; flex-wrap:wrap}
.fa-lead{margin:0; font-family:Anton,Impact,sans-serif; text-transform:uppercase; font-size:clamp(20px,2vw,30px); color:var(--ink-dark); letter-spacing:.01em}
.fa-row{display:flex; gap:clamp(14px,1.6vw,26px)}
.fa{margin:0; width:clamp(84px,7.6vw,116px)}
.fa img{width:100%; aspect-ratio:1; object-fit:cover; border-radius:999px; display:block}
.fa figcaption{margin-top:8px; font-size:13px; font-weight:700; color:var(--muted-dark); text-align:center;
  white-space:nowrap; display:flex; justify-content:center} /* one line, centered, may overhang the photo evenly */
@media (max-width:820px){
  .ff-row{grid-template-columns:repeat(3,1fr)}
  .fa-wrap{flex-direction:column; gap:16px}
  .fa-row{flex-wrap:wrap; justify-content:center}
}
@media (max-width:640px){
  .ff-row{display:flex; overflow-x:auto; gap:12px; padding-bottom:8px; scroll-snap-type:x mandatory; -webkit-overflow-scrolling:touch; scrollbar-width:none}
  .ff-row::-webkit-scrollbar{display:none}
  .ff{flex:0 0 47%; scroll-snap-align:start}
  .ff figcaption{font-size:14px}
  .fa{width:clamp(66px,19vw,92px)}
  .fa-row{gap:10px; flex-wrap:nowrap}
  .fa figcaption{font-size:11px; letter-spacing:-.01em}
}


footer.site .info{display:grid; grid-template-columns:repeat(4,1fr); gap:clamp(22px,3vw,48px); padding-bottom:clamp(26px,3vw,40px)}
footer.site .info h4{margin:0 0 14px}
footer.site .info p{margin:0 0 8px; font-size:15px; line-height:1.5}
footer.site .info p.strong{font-weight:700}
footer.site .info p.lab{font-weight:700; font-size:13.5px; opacity:.85; margin-bottom:2px}
footer.site .info p.dim{opacity:.85; font-size:14px}
footer.site .info a{color:inherit; text-decoration:underline; text-underline-offset:4px; text-decoration-thickness:1px}
footer.site .info a.arrow{text-decoration:none; font-weight:700}
footer.site .info a.arrow:hover{color:var(--yellow)}
footer.site ul.social{list-style:none; margin:0 0 12px; padding:0; display:grid; gap:11px}
footer.site ul.social a{display:flex; align-items:center; gap:11px; text-decoration:none; font-size:15px}
footer.site ul.social a:hover{color:var(--yellow)}
footer.site ul.social svg{width:18px; height:18px; fill:currentColor; flex:0 0 auto; padding:7px; border-radius:999px; background:rgba(127,140,180,.16); box-sizing:content-box}
footer.site ul.social a:hover svg{background:var(--yellow); fill:var(--ink-dark)}
footer.site .cols{border-top:1px solid rgba(127,140,180,.22); padding-top:clamp(22px,2.6vw,32px); grid-template-columns:1fr 1fr}
footer.site ul.inline{display:flex; flex-wrap:wrap; gap:8px 22px; list-style:none; margin:0; padding:0}
footer.site ul.inline a{font-size:17px}
footer.site .legal{border-top:1px solid rgba(127,140,180,.22); margin-top:clamp(22px,2.6vw,32px); padding-top:18px}
@media (max-width:900px){ footer.site .info{grid-template-columns:1fr 1fr} footer.site .cols{grid-template-columns:1fr} }
@media (max-width:560px){ footer.site .info{grid-template-columns:1fr} }


/* Hero, 25 Sep: the copy was pinned 26% up from the bottom, and 26% of a tall
   window is a very different gap from 26% of a short one. Resizing swung the
   block from a sixth of the way down to halfway down. Anchoring from the top
   with a clamp keeps it in the same band at every height, so it never drops low. */
@media (min-width:641px){
  .full-copy.corey{ top:clamp(96px, 24vh, 380px); bottom:auto }
}

/* The last band on the home page: the ask, over the room itself. The band was
   yellow, which left the yellow Enroll buttons with nothing to stand out
   against, so the eye slid straight past the one thing it was built to catch. */
.g-band.room{position:relative; background:var(--ink-dark); isolation:isolate}
.g-band.room::before{content:''; position:absolute; inset:0; z-index:-2;
  background:url('/assets/photos/hero-icehouse.jpg') center 38%/cover}
.g-band.room::after{content:''; position:absolute; inset:0; z-index:-1;
  background:linear-gradient(rgba(5,12,40,.88), rgba(5,12,40,.93))}
.g-band.room .g-h2{color:#fff}
.g-band.room .g-h2 .rule{box-shadow:inset 0 -.11em 0 var(--yellow); padding-bottom:.02em}
.g-band.room .session{background:rgba(8,18,58,.72); border:1px solid rgba(255,255,255,.16);
  backdrop-filter:blur(4px); -webkit-backdrop-filter:blur(4px)}

/* The price on the home page ask sits on one line: $445 + fees. */
/* Two columns, two rows: headline over the run, price over the fees note.
   Both small lines are the same size, weight and colour, on one baseline. */
.g-band.room .session-head{display:grid; grid-template-columns:1fr auto;
  column-gap:24px; row-gap:6px; align-items:end}
.g-band.room .session-head h3{grid-area:1/1; margin:0}
.g-band.room .session-head .price{grid-area:1/2; text-align:right; font-size:30px}
.g-band.room .session-head .run{grid-area:2/1}
.g-band.room .session-head .fee{grid-area:2/2; text-align:right}
.g-band.room .session-head small{font:400 17px/1.2 var(--body); color:var(--muted); letter-spacing:0}


/* Nothing said these rows were videos, and a badge across the middle covered
   their faces. A navy disc with a yellow triangle, in the bottom corner. The class
   film button above is the same two colours the other way round. */
.clip-row{position:relative}
.clip-row::after{
  content:''; position:absolute; left:18px; bottom:18px;
  width:32px; height:32px; border-radius:999px; pointer-events:none;
  background:var(--ink-dark)
    url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cpath d='M8 5.5v13l11-6.5z' fill='%23FFD700'/%3E%3C/svg%3E")
    no-repeat center / 15px 15px;
  box-shadow:0 6px 18px rgba(0,0,0,.4);
  transition:transform .18s ease;
}
.clip-row:hover::after{transform:scale(1.08)}

/* Every interior page opens on the same navy as the home page hero, so each one
   has a head instead of starting on the same white as its own body. The yellow
   sits UNDER the marked words here: white letters with a highlight through them
   lose their bottom halves, and navy letters lose their tops. Corey, 25 Sep. */
.g-band.pagehead{background:var(--ink-dark); padding-bottom:clamp(40px,5vw,64px)}
.g-band.pagehead h1,
.g-band.pagehead .g-h1,
.g-band.pagehead .g-h2,
.g-band.pagehead .g-h3{color:#fff}
.g-band.pagehead .g-eyebrow{color:#9FB0D8}
.g-band.pagehead .g-sub{color:#DCE3F2}
.g-band.pagehead p:not(.g-sub):not(.g-eyebrow),
.g-band.pagehead .g-caption,
.g-band.pagehead small{color:#AFBBD8}
.g-band.pagehead mark{background:none; color:#fff; box-shadow:inset 0 -.12em 0 var(--yellow); padding:0 0 .04em}
.g-band.pagehead .g-link{color:var(--yellow)}
.g-band.pagehead .g-link:hover{color:#fff}
.g-band.pagehead a:not(.btn):not(.g-link){color:var(--yellow)}
/* a dark photo straight under a dark band merges into it */
.g-band.pagehead + .g-band{padding-top:clamp(34px,4.4vw,56px)}

/* The nav sat as a white strip above the navy head, so the top of the page was
   two blocks. On these pages it joins the head, the way it floats over the hero
   on the home page. */
body:has(.g-band.pagehead) .nav:not(.overlay){background:var(--ink-dark); border-bottom-color:rgba(238,241,248,.12)}
body:has(.g-band.pagehead) .nav:not(.overlay) ul a{color:var(--ink)}
body:has(.g-band.pagehead) .nav:not(.overlay) ul a:hover{color:#fff}
body:has(.g-band.pagehead) .nav:not(.overlay) ul a.cta{color:var(--ink-dark)}
body:has(.g-band.pagehead) .nav:not(.overlay) .burger{border-color:#fff}
body:has(.g-band.pagehead) .nav:not(.overlay) .burger::after{background:#fff}
body:has(.g-band.pagehead) .g-band.pagehead{padding-top:clamp(40px,5vw,64px)}

/* The stat cards were built for a white band. On navy the third number stayed
   navy and vanished, and the small lines went muddy. Same treatment the home
   page gives them in its dark Reviews band. */
.g-band.pagehead .rev-stat{background:rgba(255,255,255,.06); border-color:rgba(238,241,248,.16); color:#fff}
.g-band.pagehead .rev-stat .big{color:var(--yellow)}
.g-band.pagehead .rev-stat .src{color:#fff; opacity:.92}
.g-band.pagehead .rev-stat .lab{color:#C9D3EA; opacity:1}

/* The class page explains itself under the two cards, not above them. */
.after-doors{margin-top:clamp(20px,2.4vw,30px); font-size:16px; max-width:56ch; margin-inline:auto}

/* The display face is set at line-height .9, so the text box ends ABOVE the
   glyphs and the yellow rule hangs below it. Anything following the headline has
   to clear that overhang or it runs straight through the rule. */
.g-band.pagehead h1,
.g-band.pagehead .g-h1,
.g-band.pagehead .g-h2{padding-bottom:.16em; margin-bottom:clamp(20px,2.4vw,36px)}

/* The four-way toggle had a full band's padding under it and the group heading
   below had a full band's padding above, so they sat a screen apart. */
.g-band.rev-switch{padding-block:clamp(22px,2.6vw,34px) 0}
.g-band.rev-switch + .g-band.revgroup,
.g-band.revgroup{padding-top:clamp(22px,2.6vw,32px)}

/* The card title sat under a tall photo, so at the top of the page you saw two
   pictures and no idea which was which. A banner across the top says it up front. */
.door{position:relative}
.door-flag{position:absolute; top:0; left:0; right:0; z-index:2;
  background:var(--yellow); color:var(--ink-dark);
  font-family:var(--display); font-weight:400; text-transform:uppercase;
  font-size:clamp(18px,1.9vw,26px); letter-spacing:.01em; line-height:1;
  padding:14px 16px; text-align:center;
  border-radius:var(--radius) var(--radius) 0 0}

/* With the name in the banner, the same name under the photo is said twice. */
.door:has(.door-flag) .door-body h3{display:none}
.door:has(.door-flag) .door-body .tag{margin-bottom:8px}

/* ---------- tickets: one card per show, with its flyer (src/shows.js) ---------- */
.flyers{display:grid; gap:clamp(18px,2.4vw,28px); grid-template-columns:repeat(auto-fit,minmax(260px,1fr)); margin-top:clamp(24px,3.5vw,40px)}
.flyer{background:#fff; border:1px solid #e3e6ef; border-radius:22px; overflow:hidden; display:flex; flex-direction:column}
.flyer img{display:block; width:100%; aspect-ratio:4/5; object-fit:cover}
.flyer-body{padding:18px 20px 22px; display:grid; gap:6px; justify-items:start}
.flyer-body h3{color:var(--ink-dark); font-size:26px}
.flyer-body p{margin:0; color:var(--muted-dark)}
.flyer-body .lab{font-size:12px; letter-spacing:.14em; text-transform:uppercase; font-weight:800; color:var(--ink-dark)}
.flyer-body .btn{margin-top:10px}

/* ---------- class pages: numbered steps (first class, getting in) ---------- */
.steps{list-style:none; counter-reset:step; display:grid; gap:12px; max-width:760px; margin:28px auto 0; padding:0}
.steps li{counter-increment:step; position:relative; padding:16px 20px 16px 66px; background:#fff; border:1px solid #e3e6ef; border-radius:18px; color:var(--muted-dark); font-size:16px; line-height:1.5}
.steps li::before{content:counter(step); position:absolute; left:18px; top:14px; width:32px; height:32px; border-radius:50%; background:var(--yellow); color:var(--on-yellow); font-weight:900; display:grid; place-items:center; font-size:15px}
.steps li b{display:block; color:var(--ink-dark); font-size:17px; margin-bottom:2px}
.steps + .checks{margin:24px auto 0}
.g-band .checks{margin-inline:auto}
.g-band:not(.mist) .checks li::before{color:#C9A800}
.g-band .checks li{color:var(--muted-dark)} .g-band .checks li b{color:var(--ink-dark)}

/* week list rows carry their own label (Wk 1, Wks 2–3, Midweek, Off, ★) */
.g-weeks.wk li[data-label]::before{content:attr(data-label)}
.g-weeks li b{color:var(--ink-dark)}
.g-weeks li.oh{padding:8px 2px; font-size:15px; color:var(--muted-dark); border-top-style:dashed}
.g-weeks li.oh::before{font-family:var(--body); font-size:12px; letter-spacing:.12em; text-transform:uppercase; font-weight:700}
.g-weeks li.off{color:var(--muted-dark); font-size:16px}

/* A .btn inside a whole-card link animates only when the pointer is on the pill itself
   (Corey, 2026-09-25): hovering the photo leaves it still. The whole card stays clickable. */

/* reviews: a compact page head (straight to the quotes) and one photo per group */
.pagehead.compact{padding-block:clamp(44px,6vw,72px) clamp(28px,4vw,44px)}
.rev-hero{margin:0 0 clamp(24px,3.2vw,40px)}
.rev-hero img{display:block; width:100%; aspect-ratio:21/9; object-fit:cover; border-radius:24px}
.rev-hero.kids img{object-position:center 35%}
.rev-hero.adult img{object-position:60% 30%}
@media (max-width:640px){ .rev-hero img{aspect-ratio:4/3; border-radius:18px} }

/* reviews: the Kids / Adults / Team Building selector lives in the blue head, so the
   quotes start right below it */
.pagehead .rev-tabs{margin:clamp(26px,3.4vw,40px) 0 0; flex-wrap:wrap; justify-content:center}
.pagehead .clip-tab{background:rgba(255,255,255,.12); color:rgba(255,255,255,.85); font-size:13px; padding:12px 22px}
.pagehead .clip-tab:hover{background:rgba(255,255,255,.2)}
.pagehead .clip-tab.is-on{background:var(--yellow); color:var(--on-yellow)}
.revgroup .rev-hero{margin-top:clamp(26px,3.4vw,44px)}

/* a band that sits right under a compact page head (class hub cards) */
.g-band.tight{padding-top:clamp(24px,3vw,40px)}

/* class hub: the two doors fit on the first screen under a compact head */
.g-band.tight .g-doors{margin-top:0}
@media (min-width:820px){ .g-band.tight .door{aspect-ratio:9/8} }
.pagehead.compact .g-sub{margin-top:10px}

/* Reviews page (Corey picked option A, 2026-09-25): the navy top is only a big toggle; the page
   opens on the headline and one moving row of quotes; the three numbers sit at the bottom.
   The card in the middle is "on": it lifts and its highlight sweeps in left to right. */
.rx-toggle{display:inline-flex; gap:6px; padding:6px; border-radius:999px; background:rgba(255,255,255,.08); border:1px solid var(--line); max-width:100%}
.rx-toggle button{font:800 clamp(14px,1.7vw,19px)/1 var(--body); letter-spacing:.08em; text-transform:uppercase; padding:clamp(14px,1.8vw,20px) clamp(18px,3vw,38px); border:0; border-radius:999px; background:transparent; color:#fff; cursor:pointer; transition:background .25s,color .25s,transform .15s}
.rx-toggle button:hover{background:rgba(255,255,255,.1)}
.rx-toggle button[aria-selected="true"]{background:var(--yellow); color:var(--on-yellow)}
.rx-toggle button:active{transform:scale(.97)}
@media (max-width:520px){ .rx-toggle{display:flex; width:100%} .rx-toggle button{flex:1; padding-inline:6px; font-size:13px; letter-spacing:.04em} }
.rx-a.g-band{padding-block:clamp(40px,6vw,72px)}
.g-band.pagehead.rx-a .g-eyebrow{margin:0 0 clamp(20px,2.6vw,30px); font-family:var(--display); font-weight:400; font-size:clamp(44px,6.4vw,84px); line-height:1; letter-spacing:.02em; color:#fff; opacity:1}
.rx-body.g-band{padding-block:clamp(48px,6vw,84px); background:var(--paper-2); overflow:hidden}
.rx-h{font-size:clamp(34px,5.4vw,64px); max-width:none}
.rx-proofband.g-band{padding-block:clamp(36px,5vw,56px)}
.rx-proofband .rev-stats{margin-top:0}
.rc{margin-top:clamp(26px,3.6vw,44px); position:relative}
.rc-track{display:flex; gap:clamp(12px,2vw,24px); overflow-x:auto; scroll-snap-type:x mandatory; scrollbar-width:none;
  padding:22px calc(50% - min(330px, 43vw)) 76px; margin-bottom:-46px; outline:none; overscroll-behavior-x:contain}
.rc-track[hidden]{display:none}
.rc-track::-webkit-scrollbar{display:none}
.rc-card{flex:0 0 min(660px, 86vw); scroll-snap-align:center; margin:0; padding:clamp(26px,3.4vw,42px); border-radius:24px; background:#fff; border:1px solid #e6e8ef;
  display:flex; flex-direction:column; gap:18px; opacity:.4; transform:scale(.9); transition:transform .5s cubic-bezier(.2,.8,.2,1), opacity .5s, box-shadow .5s; cursor:pointer}
.rc-card.is-on{opacity:1; transform:translateY(-8px) scale(1); box-shadow:0 22px 50px rgba(8,18,58,.18); cursor:default}
.rc-card .stars{color:var(--yellow); letter-spacing:3px; font-size:18px; -webkit-text-stroke:.4px #c9a800}
.rc-card p{margin:0; font-size:clamp(18px,1.9vw,23px); line-height:1.5; color:var(--ink-dark)}
.rc-card mark{color:var(--ink-dark); font-weight:700; padding:0; background:linear-gradient(var(--yellow),var(--yellow)) no-repeat 0 88% / 0% 42%; transition:background-size .9s cubic-bezier(.3,.7,.2,1) .25s}
.rc-card.is-on mark{background-size:100% 42%}
.rc-card footer{margin-top:auto; font-size:15px; font-weight:700; color:var(--muted-dark)}
.rc-track.swap .rc-card{animation:rcIn .5s cubic-bezier(.2,.8,.2,1) both}
@keyframes rcIn{from{opacity:0; transform:translateX(40px) scale(.94)}}
.rc-controls{display:flex; align-items:center; justify-content:center; gap:14px; margin-top:4px; position:relative}
.rc-arrow{width:52px; height:52px; border-radius:50%; border:0; background:var(--ink-dark); color:#fff; display:grid; place-items:center; cursor:pointer; transition:transform .15s, background .2s}
.rc-arrow svg{width:22px; height:22px; fill:none; stroke:currentColor; stroke-width:2.6; stroke-linecap:round; stroke-linejoin:round}
.rc-arrow:hover{background:var(--yellow); color:var(--on-yellow)}
.rc-arrow:active{transform:scale(.92)}
.rc-dots{display:flex; gap:7px}
.rc-dots i{width:8px; height:8px; border-radius:999px; background:rgba(8,18,58,.2); transition:width .35s, background .35s}
.rc-dots i.on{width:26px; background:var(--ink-dark)}
.rc-count{font-weight:800; font-size:13px; letter-spacing:.1em; color:var(--muted-dark); min-width:54px; text-align:center; font-variant-numeric:tabular-nums}
@media (max-width:600px){ .rc-dots{display:none} }
@media (prefers-reduced-motion:reduce){ .rc-card,.rc-card mark{transition:none} .rc-track.swap .rc-card{animation:none} .rc-card.is-on{transform:none} }
/* Reviews on a phone: the toggle fits the screen, and the arrows show without scrolling */
.rx-toggle{box-sizing:border-box}
@media (max-width:600px){
  .g-band.pagehead.rx-a{padding-block:28px 30px}
  .rx-body.g-band{padding-block:28px 40px}
  .rc{margin-top:18px}
  .rc-track{padding-top:14px; padding-bottom:60px}
  .rc-card{padding:22px; gap:12px}
  .rc-card p{font-size:17px}
}
/* Reviews end (Corey picked "A", 2026-09-25): one photo that follows the toggle, the three
   numbers in a slim navy strip under it. Team building keeps the homepage card's crop: both on stage. */
.rx-end.g-band{background:var(--paper-2); padding-block:0 clamp(40px,6vw,72px)}
.rx-photo{margin:0; border-radius:24px; overflow:hidden; background:var(--navy); box-shadow:0 22px 50px rgba(8,18,58,.18)}
.rx-photo img{display:block; width:100%; aspect-ratio:16/9; object-fit:cover}
.rx-photo img[hidden]{display:none}
.rx-photo img[data-g="kids"]{object-position:center 26%}
.rx-photo img[data-g="adult"]{object-position:50% 15%}
.rx-photo img[data-g="corporate"]{object-position:76.9% 100%}
.rx-photo figcaption{color:#fff; padding:18px 16px}
.mini{display:flex; flex-wrap:wrap; justify-content:center; gap:10px 32px; font-size:14px}
.mini a, .mini .f{display:inline-flex; align-items:baseline; gap:7px; color:inherit; text-decoration:none; white-space:nowrap}
.mini a:hover span{text-decoration:underline}
.mini b{font-family:var(--display); font-weight:400; font-size:26px; color:var(--yellow); letter-spacing:.02em}
.mini span{opacity:.85}
@media (max-width:600px){
  .rx-photo img{aspect-ratio:4/5}
  .rx-photo figcaption{padding:14px 12px}
  .mini{flex-wrap:nowrap; justify-content:space-between; gap:8px; font-size:12px}
  .mini b{font-size:19px}
}

/* Tickets (Corey picked A, 2026-09-25): a slim navy band that only says "Tickets", then the flyers. */
.g-band.pagehead.tix-top{padding-block:clamp(34px,5vw,56px)}
.tix-h{font-size:clamp(56px,9vw,112px);line-height:.95;margin:0}
.flyer-img{display:block} .flyer-img img{display:block; transition:transform .3s ease, filter .3s ease} .flyer-img:hover img{filter:brightness(1.06)}  /* the flyer is a ticket link too (Corey) */
/* Tickets B (Corey): the flyers sit in the navy with "Tickets." so they show before the break. */
.g-band.pagehead.tix-top{padding-bottom:0}
.g-band.pagehead.tix-b{padding-top:clamp(34px,5vw,56px)} .tix-b .tix-h{margin-bottom:clamp(28px,4vw,44px)}
.tix-b .flyer-body, .tix-b .flyer-body h3{color:var(--ink-dark)}
.tix-b .flyer-body .lab, .tix-b .flyer-body p{color:#4a5270 !important; opacity:1 !important}
.tix-b .flyer-body .btn{color:var(--on-yellow)}
/* Show cards: the one under the cursor lifts into a yellow spotlight, the others dim (Corey, 2026-09-25).
   Mouse only, and not with reduced motion. */
.flyer{position:relative; transition:transform .35s cubic-bezier(.2,.8,.2,1), filter .35s}
.flyer::after{content:""; position:absolute; inset:0; border-radius:22px; pointer-events:none; opacity:0;
  box-shadow:inset 0 0 0 3px var(--yellow), 0 0 38px 6px rgba(252,217,74,.45); transition:opacity .35s}
@media (hover:hover) and (pointer:fine) and (prefers-reduced-motion:no-preference){
  .flyers:hover .flyer{filter:brightness(.85)}
  .flyers .flyer:hover{filter:none; transform:translateY(-8px) scale(1.02)}
  .flyers .flyer:hover::after{opacity:1}
}
.g-band.pagehead .tix-soon{margin:8px 0 0; font:800 clamp(22px,2.6vw,30px)/1.2 var(--body); color:#fff !important; opacity:1 !important}  /* Tickets between shows */
/* Homepage (Corey, 2026-09-25): famous friends and famous audience grow 5% under the cursor;
   review highlights sweep in when the section scrolls into view and again on each Kids/Adults switch. */
.ff img, .fa img{transition:transform .3s cubic-bezier(.2,.8,.2,1)}
@media (hover:hover) and (pointer:fine) and (prefers-reduced-motion:no-preference){
  .ff:hover img{transform:scale(1.05)}
  .fa:hover img{transform:scale(1.15)}  /* the audience is small, so it grows more */
}
.g-band.deep .rev mark{background:linear-gradient(var(--yellow),var(--yellow)) no-repeat 0 88% / 0% 45%; transition:background-size .9s cubic-bezier(.3,.7,.2,1) .15s}
.g-band.deep .rev.lit mark{background-size:100% 45%}
@media (prefers-reduced-motion:reduce){ .g-band.deep .rev mark{transition:none; background-size:100% 45%} }
/* Gallery top (Corey, 2026-09-25): "Gallery" and the Kids / Adults / Pros pill in the navy, like Reviews. */
.gal-top.g-band.pagehead{padding-block:clamp(36px,5vw,60px)}
.gal-top .gal-h{font-size:clamp(56px,9vw,112px); line-height:.95; margin:0 auto clamp(20px,2.6vw,30px); max-width:none; text-align:center; color:#fff}
.gal-pill .clip-tab{background:transparent; color:#fff; border-radius:999px}
.gal-pill .clip-tab.is-on{background:var(--yellow); color:var(--on-yellow)}
#roster.g-band{padding-top:clamp(28px,4vw,44px)}
.pro-note{margin:0 0 clamp(18px,2.4vw,28px); text-align:center; font-size:15px; font-weight:700; color:var(--muted-dark)}  /* Pro Guests tab only */
/* Contact (Corey, 2026-09-26): one line up top, subject as pills, ends on Corey and Suzanne. */
.ct-top.g-band.pagehead{padding-block:clamp(40px,6vw,72px)}
.ct-top .ct-h{font-size:clamp(56px,9vw,112px); line-height:.95; max-width:none; margin:0 auto; color:#fff}
.g-band.pagehead .ct-sub{margin:clamp(18px,2.4vw,26px) auto 0; font:700 clamp(17px,1.8vw,21px)/1.4 var(--body); color:#fff !important; opacity:1 !important}
.ct-topics{border:0; margin:0 0 18px; padding:0}
.ct-topics legend{font-weight:800; margin-bottom:10px; color:var(--ink-dark)}
.ct-pills{display:flex; flex-wrap:wrap; gap:10px}
.ct-pills input{position:absolute; opacity:0; pointer-events:none}
.ct-pills span{display:inline-block; padding:12px 20px; border-radius:999px; border:2px solid #d7dbe8; background:#fff; color:var(--ink-dark);
  font:800 14px/1 var(--body); letter-spacing:.04em; cursor:pointer; transition:background .2s, border-color .2s, transform .15s}
.ct-pills span:hover{border-color:var(--ink-dark)}
.ct-pills input:checked + span{background:var(--yellow); border-color:var(--yellow); color:var(--on-yellow)}
.ct-pills input:focus-visible + span{outline:3px solid var(--ink-dark); outline-offset:2px}
.ct-photo{margin:clamp(22px,3vw,34px) auto 0; max-width:980px}
.ct-photo img{display:block; width:100%; height:auto; border-radius:24px}
.ct-photo figcaption{margin-top:12px; font-size:15px; font-weight:700; color:var(--muted-dark)}
/* Contact, one tight navy block (Corey): heading, line and form together. */
.ct-top.g-band.pagehead{padding-block:clamp(30px,4vw,48px) clamp(34px,4.5vw,52px)}
.ct-top .ct-sub{margin-bottom:0}
.ct-formwrap{max-width:760px; margin:clamp(22px,3vw,32px) auto 0}
.ct-top form label, .ct-top .ct-topics legend{color:#fff}
.ct-top .ct-pills span{background:transparent; color:#fff; border-color:rgba(255,255,255,.35)}
.ct-top .ct-pills span:hover{border-color:#fff}
.ct-top .ct-pills input:checked + span{background:var(--yellow); border-color:var(--yellow); color:var(--on-yellow)}
.ct-top input, .ct-top textarea{background:#fff; color:var(--ink-dark)}
.ct-top .status{color:#fff}
.ct-end.g-band{padding-block:clamp(34px,4.5vw,56px)}
.ct-top #cf{margin-top:0}  /* form top lines up with the photo (Corey) */
.ct-top .ct-topics{margin-bottom:6px}
/* Contact, photo beside the form (Corey picked C, 2026-09-26); the photo starts level with the pills. */
.ct-split{display:grid; gap:clamp(20px,3vw,40px); align-items:start; max-width:1100px; margin:clamp(22px,3vw,32px) auto 0}
@media (min-width:900px){ .ct-split{grid-template-columns:1.1fr .9fr} .ct-split .ct-photo{margin-top:40px} }
.ct-split .ct-formwrap{margin:0; max-width:none}
.ct-split .ct-photo{margin-left:0; margin-right:0}
.ct-split .ct-photo figcaption{color:#c8cfe6; text-align:left}
/* Contact: Send sits right under the message and is big enough to find (Corey). */
.ct-top #cf .actions{margin-top:14px; align-items:center}
.ct-top #cf .btn{font-size:18px; padding:16px 44px}
.ct-top #cf textarea{min-height:120px}
@media (max-width:640px){ .ct-top #cf .btn{width:100%; justify-content:center} }
.ct-top #cf .actions{margin-top:0}
@media (max-width:640px){ .ct-pills{gap:8px} .ct-pills span{padding:10px 16px; font-size:13px} .ct-top .ct-topics legend{margin-bottom:8px} }
/* Contact: all six pills on one line on desktop; caption centered under the photo (Corey). */
@media (min-width:1100px){ .ct-top .ct-pills{flex-wrap:nowrap; gap:8px} .ct-top .ct-pills span{padding:10px 15px; font-size:13px; white-space:nowrap} }
.ct-split .ct-photo figcaption{text-align:center}
@media (max-width:640px){ .ct-top .ct-topics legend{width:100%; text-align:center} .ct-top .ct-pills{justify-content:center} }  /* centered on phones (Corey) */
/* One footer: site links in the bottom line (Corey, 2026-09-26). */
footer.site .legal{align-items:center; gap:14px 28px}
.flinks{display:flex; flex-wrap:wrap; gap:6px 20px}
.flinks a{color:inherit; text-decoration:none; font-weight:600}
.flinks a:hover{color:var(--yellow)}
body.gallery .flinks a:hover, body.theme-white .flinks a:hover{color:var(--ink-dark); text-decoration:underline}
/* Podcast top: round photo beside the title, a small follow line, then the player (Corey picked C, 2026-09-26). */
.pod-c{padding-bottom:28px}
.pod-c-row{display:flex; align-items:center; justify-content:center; gap:clamp(16px,3vw,32px)}
.pod-av{flex:none; width:clamp(96px,14vw,168px); height:auto; aspect-ratio:1; border-radius:50%; border:4px solid var(--yellow)}
.pod-c-row .g-eyebrow{margin-bottom:6px}
.pod-follow{text-align:center; margin:22px 16px 0; font-size:15px; color:#c8cfe6}
.pod-follow a{color:#fff; font-weight:700; text-decoration:underline; text-decoration-color:var(--yellow); text-underline-offset:4px}
.pod-follow a:hover{color:var(--yellow)}
.pod-c + #listen{padding-top:28px}
.pod-about .wrap{max-width:720px}
/* Podcast: one episode up top, two smaller under it, instead of one big playlist (Corey, 2026-09-26). */
.pod-eps{max-width:980px}
.pod-eps .g-eyebrow{margin:0 0 10px}
.pod-ep{border-radius:16px; overflow:hidden; background:#04144b}
.pod-ep-main{margin-bottom:clamp(28px,4vw,40px)}
.pod-ep-pair{display:grid; gap:16px}
.pod-ep-pair{gap:14px}
/* Podcast: "A podcast hosted by" under the title; the handshake photo beside About the show (Corey, 2026-09-26). */
.pod-by{margin:10px 0 0; color:#c8cfe6; font-size:clamp(15px,1.6vw,19px); font-weight:500}
.pod-about .wrap.pod-about-split{max-width:1100px; display:grid; gap:clamp(20px,4vw,48px); align-items:center}
.pod-about-img{width:100%; height:auto; border-radius:18px}
@media (min-width:900px){ .pod-about .wrap.pod-about-split{grid-template-columns:1.05fr 1fr} }
/* Podcast: white players on the light band; three shoot photos beside About the show (Corey, 2026-09-26). */
.pod-ep{background:#fff; box-shadow:0 1px 0 #e6e8ef, 0 8px 24px rgba(11,20,55,.06)}
.pod-collage{display:grid; grid-template-columns:1fr 1fr; gap:12px}
.pod-collage img{width:100%; height:100%; object-fit:cover; border-radius:16px; aspect-ratio:1}
.pod-collage img:first-child{grid-column:1 / -1; aspect-ratio:1600/1283}
/* Podcast top: "Hosted by" tight under the title; on phones the title stays on one line beside a smaller photo (Corey, 2026-09-26). */
.pod-c-row .g-h2{margin-bottom:0}
.pod-by{margin-top:4px}
@media (max-width:640px){
  .pod-c-row{gap:14px; justify-content:flex-start}
  .pod-av{width:76px}
  .pod-c-row .g-h2{font-size:clamp(26px,8.6vw,36px); white-space:nowrap}
  .pod-by{font-size:14px; margin-top:2px}
}
.g-band.pod-c .pod-c-row .g-h2{margin:0; padding-bottom:0}
.g-band.pod-c .pod-by{margin:8px 0 0}
.g-band.pod-c .pod-by{margin-top:clamp(10px,1.6vw,22px)}
/* Podcast About: just the two front-on shoot photos, side by side (Corey, 2026-09-26). */
.pod-collage img,.pod-collage img:first-child{grid-column:auto; aspect-ratio:4/5}
.pod-about .pod-close{font-size:clamp(22px,2.4vw,30px); margin-top:22px}
.g-band.pod-about .g-h3.pod-close{font-size:clamp(22px,2.4vw,30px); margin-top:22px}
/* Podcast bottom: the Underdog Tour, with its caped-U logo; the whole block links to underdogtour.com (Corey, 2026-09-26). */
.pod-tour-link{display:grid; gap:clamp(16px,3vw,40px); align-items:center; justify-items:center; text-align:center; color:inherit; text-decoration:none; max-width:1000px}
.pod-tour-link img{width:min(300px,70vw); height:auto; transition:transform .25s ease}
.pod-tour-link:hover img{transform:rotate(-3deg) scale(1.04)}
.pod-tour-copy{display:flex; flex-direction:column; align-items:center; gap:14px}
.pod-tour-copy .g-sub{margin:0; color:#c8cfe6}
@media (min-width:820px){ .pod-tour-link{grid-template-columns:auto 1fr; justify-items:start; text-align:left} .pod-tour-copy{align-items:flex-start} }
.pod-tour-link img.pod-tour-card{width:min(460px,86vw); border-radius:18px}
/* Tour block: photo matches the text column's height; heading one size down so it sits on two lines (Corey, 2026-09-26). */
.pod-tour .pod-tour-copy .g-h2{font-size:clamp(40px,5vw,64px)}
@media (min-width:820px){ .pod-tour-link{grid-template-columns:minmax(0,1fr) minmax(0,1fr); align-items:stretch} .pod-tour-link img.pod-tour-card{width:100%; height:100%; object-fit:cover} .pod-tour-copy{justify-content:center} }
/* Podcast: our own white episode cards (titles wrap), replacing the Libsyn embeds (Corey, 2026-09-26). */
.ep{background:#fff; border-radius:16px; padding:clamp(16px,2.4vw,24px); box-shadow:0 1px 0 #e6e8ef, 0 8px 24px rgba(11,20,55,.06)}
.ep-kick{margin:0 0 4px; font-size:14px; color:#5b6480}
.ep-title{margin:0; font:700 clamp(18px,2vw,22px)/1.3 Inter,system-ui,sans-serif; color:#0b1437}
.ep-main .ep-title{font-size:clamp(20px,2.6vw,28px)}
.ep-ctl{display:flex; align-items:center; gap:14px; margin-top:16px}
.ep-play{flex:none; width:48px; height:48px; border-radius:50%; border:0; background:#0b1437; color:#fff; display:grid; place-items:center; cursor:pointer; transition:transform .15s}
.ep-main .ep-play{width:60px; height:60px}
.ep-play:hover{transform:scale(1.06)} .ep-play svg{width:22px; height:22px; fill:currentColor}
.ep-play .i-pause{display:none} .ep.playing .ep-play .i-pause{display:inline} .ep.playing .ep-play .i-play{display:none}
.ep-bar{flex:1; height:6px; border-radius:3px; background:#e3e6f0; cursor:pointer; position:relative; overflow:hidden}
.ep-bar span{position:absolute; inset:0 auto 0 0; width:var(--p,0%); background:#2d45b8}
.ep-time{flex:none; font-size:14px; color:#5b6480; font-variant-numeric:tabular-nums}
.pod-eps .pod-ep-pair{display:grid; gap:14px}
.g-band.pod-about .g-h3.pod-close{font-size:clamp(20px,2vw,26px)}
@media (min-width:820px){ .g-band.pod-about .g-h3.pod-close{white-space:nowrap} }
.ep h3.ep-title{text-transform:none; letter-spacing:0; font-family:Inter,system-ui,sans-serif}
/* Closing line: always one line; the size follows the text column's width (Corey, 2026-09-26). */
.pod-about-split > div:last-child{container-type:inline-size}
.g-band.pod-about .g-h3.pod-close{white-space:nowrap; font-size:min(30px, 5.5cqi)}
.ep-dl{flex:none; width:40px; height:40px; border-radius:50%; display:grid; place-items:center; color:#0b1437; background:#eef0f6; transition:background .15s}
.ep-dl:hover{background:var(--yellow)} .ep-dl svg{width:20px; height:20px}
/* Class pages (Adult + Kids), rebuilt 2026-09-26: the homepage's pieces plus a few of their own. */
.cls-hero .kicker{color:var(--yellow); font-weight:800; letter-spacing:.12em; text-transform:uppercase; font-size:13px; margin:0 0 10px}
.cls-hero .actions{display:flex; align-items:center; gap:14px; flex-wrap:wrap; justify-content:flex-start}
.cls-urg{display:inline-block; font:800 12px/1 Inter,system-ui,sans-serif; letter-spacing:.08em; text-transform:uppercase; padding:7px 11px; border-radius:99px; background:#fff3c4; color:#6b4a00}
.cls-urg.hot{background:#ffdcd6; color:#9b1c0c}
.cls-urg-hero{background:rgba(255,255,255,.14); color:#fff} .cls-urg-hero.hot{background:#ff5a3c; color:#fff}
.track .cls-urg{margin-bottom:10px}
.cls-facts{display:grid; grid-template-columns:repeat(2,1fr); gap:12px; max-width:980px; margin:clamp(24px,4vw,44px) auto 0}
@media (min-width:820px){ .cls-facts{grid-template-columns:repeat(4,1fr)} }
.cls-facts div{background:var(--paper-2,#f3f4f8); border-radius:18px; padding:clamp(18px,2.4vw,26px) 16px; text-align:center}
.cls-facts b{display:block; font:400 clamp(32px,4vw,48px)/1 var(--display); color:var(--ink-dark); text-transform:uppercase}
.cls-facts span{display:block; margin-top:8px; font-size:15px; color:var(--muted-dark)}
.cls-oh{max-width:60ch; margin:18px auto 0}
.cls-grads{display:grid; gap:14px; grid-template-columns:repeat(2,1fr); margin-top:clamp(24px,4vw,40px)}
@media (min-width:820px){ .cls-grads-4{grid-template-columns:repeat(4,1fr)} .cls-grads-6{grid-template-columns:repeat(3,1fr)} }
@media (min-width:1100px){ .cls-grads-6{grid-template-columns:repeat(6,1fr)} }
.cls-grad{display:flex; flex-direction:column; gap:4px; text-decoration:none; color:var(--ink-dark)}
.cls-grad img{width:100%; aspect-ratio:1; object-fit:cover; border-radius:16px; margin-bottom:6px; transition:transform .25s ease}
.cls-grad:hover img{transform:scale(1.03)}
.cls-grad b{font-size:16px} .cls-grad span{font-size:13px; line-height:1.35; color:var(--muted-dark)}
.cls-team{display:grid; gap:clamp(16px,3vw,32px); grid-template-columns:1fr; max-width:820px; margin:clamp(24px,4vw,40px) auto 0}
@media (min-width:640px){ .cls-team{grid-template-columns:1fr 1fr} }
.cls-person{margin:0} .cls-person img{width:100%; aspect-ratio:4/5; object-fit:cover; object-position:50% 20%; border-radius:20px}
.cls-person figcaption{display:flex; flex-direction:column; gap:4px; margin-top:12px}
.cls-person .lab{font-size:12px; letter-spacing:.1em; text-transform:uppercase; font-weight:800; color:var(--muted-dark)}
.cls-person b{font:400 26px/1.1 var(--display); text-transform:uppercase; color:var(--ink-dark)}
.cls-person figcaption > span:last-child{font-size:15px; color:var(--muted-dark)}
.cls-why{display:grid; gap:clamp(24px,4vw,56px); align-items:center; max-width:1100px}
@media (min-width:900px){ .cls-why{grid-template-columns:1fr 1fr} }
.cls-why p{font-size:17px; line-height:1.6; color:var(--muted-dark)} .cls-why p b{color:var(--ink-dark)}
.cls-quote{margin:22px 0 0; padding:18px 22px; border-left:5px solid var(--yellow); background:var(--paper-2,#f3f4f8); border-radius:0 16px 16px 0}
.cls-quote p{margin:0; font:400 clamp(26px,3vw,36px)/1.1 var(--display); text-transform:uppercase; color:var(--ink-dark)}
.cls-quote footer{margin-top:8px; font-size:14px; color:var(--muted-dark)}
.cls-why .film{margin-top:0}
.cls-film-on{border-radius:26px; overflow:hidden; aspect-ratio:16/9; background:#000; margin-top:clamp(20px,3vw,30px)}
.cls-why .cls-film-on{margin-top:0}
.cls-film-on iframe{width:100%; height:100%; border:0; display:block}
.cls-views .kicker{color:var(--yellow); font-weight:800; letter-spacing:.12em; text-transform:uppercase; font-size:13px; margin:0}
.cls-views-n{margin:10px 0 0; font:400 clamp(44px,8vw,104px)/1 var(--display); color:#fff; font-variant-numeric:tabular-nums}
.cls-views-l{margin:8px 0 0; font-size:clamp(18px,2vw,24px); color:#c8cfe6} .cls-views-l .y{color:var(--yellow); font-weight:800}
.cls-fine{max-width:70ch; margin:18px auto 0; font-size:14px}
.cls-more{display:grid; gap:16px; max-width:1000px; margin:0 auto}
@media (min-width:820px){ .cls-more{grid-template-columns:1fr 1fr} }
.cls-more-card{display:grid; grid-template-columns:120px 1fr; gap:18px; align-items:center; background:#fff; border-radius:20px; padding:18px; text-decoration:none; color:var(--ink-dark); box-shadow:0 1px 0 #e6e8ef, 0 8px 24px rgba(11,20,55,.06)}
.cls-more-card img{width:120px; height:150px; object-fit:contain}
.cls-more-card img[src*="corey-white-tee"]{object-fit:cover; border-radius:14px; object-position:50% 10%}
.cls-more-card > span{display:flex; flex-direction:column; gap:6px; align-items:flex-start}
.cls-more-card .lab{font-size:12px; letter-spacing:.1em; text-transform:uppercase; font-weight:800; color:var(--muted-dark)}
.cls-more-card b{font:400 24px/1.1 var(--display); text-transform:uppercase}
.cls-more-card > span > span:not(.lab):not(.btn){font-size:15px; color:var(--muted-dark)}
.cls-more-card .btn{margin-top:6px}
/* Class pages: slim sticky enroll bar (Corey, 2026-09-26). Appears past the photo, hides at the enroll section. */
.cls-stick{position:fixed; left:50%; bottom:14px; transform:translateX(-50%); z-index:50; display:flex; align-items:center; gap:14px; width:min(640px, calc(100vw - 24px)); padding:10px 10px 10px 18px; border-radius:99px; background:rgba(11,20,55,.96); color:#fff; box-shadow:0 10px 30px rgba(5,12,40,.35); animation:clsStickIn .3s ease}
.cls-stick[hidden]{display:none}
.cls-stick-t{flex:1; font-size:14px; line-height:1.3; color:#c8cfe6} .cls-stick-t b{color:#fff}
.cls-stick .btn{flex:none; padding:10px 18px; font-size:15px}
@keyframes clsStickIn{from{opacity:0; transform:translate(-50%,12px)}}
@media (prefers-reduced-motion:reduce){ .cls-stick{animation:none} }
/* Class page hero photos: position and zoom picked by Corey (lab/hero-crop), per laptop and phone. */
.cls-hero img{object-position:var(--hx,50%) var(--hy,35%); transform:scale(var(--hz,1)); transform-origin:var(--hx,50%) var(--hy,35%)}
@media (max-width:640px){ .cls-hero img{object-position:var(--mx,50%) var(--my,35%); transform:scale(var(--mz,1)); transform-origin:var(--mx,50%) var(--my,35%)} }
/* Class pages v2 (approved flow, 2026-09-26): views line in the hero; scouts line and film inside sections. */
.cls-you{margin:6px 0 0; font-weight:800; font-size:clamp(16px,1.6vw,20px); color:#fff} .cls-you .y{color:var(--yellow)}
.cls-scouts{text-align:center; max-width:30ch; margin:clamp(36px,5vw,56px) auto 0}
#grads .proof-row{margin-top:clamp(28px,4vw,44px)}
#work .film{margin-top:clamp(28px,4vw,44px)}
/* Adult class example video: Parth's clip, vertical, centered (Corey, 2026-09-26). */
.cls-vid{margin:clamp(28px,4vw,44px) auto 0; max-width:340px; text-align:center}
.cls-vid video{display:block; width:100%; height:auto; aspect-ratio:758/1350; object-fit:cover; border-radius:22px; background:#000}
.cls-vid figcaption{margin-top:10px; font-size:14px; color:var(--muted-dark)}
/* Adult reviews: showcase-night group photo above the quotes (Corey, 2026-09-26). */
.cls-revphoto{margin:clamp(24px,4vw,40px) auto 0; max-width:1000px}
.cls-revphoto img{display:block; width:100%; height:auto; border-radius:22px}
.cls-revphoto figcaption{margin-top:8px; text-align:center; font-size:14px; color:var(--muted-dark)}
/* Sticky bar: the seat line gets the site yellow underline (Corey, 2026-09-26). */
.cls-stick [data-stick-urg]{color:#fff; text-decoration:underline; text-decoration-color:var(--yellow); text-decoration-thickness:2px; text-underline-offset:4px}
#work .g-weeks{margin-top:clamp(32px,4.5vw,52px)}
@media (max-width:640px){ .cls-stick-date{display:none} }
/* Class pages, section 2 on laptops: one screen tall like the homepage proof (Corey, 2026-09-26).
   Everything is sized off the screen height so grads + Suzanne (+ scouts on kids) fit together. */
@media (min-width:900px) and (min-height:600px){
  #grads{min-height:100svh; box-sizing:border-box; display:grid; align-content:center; padding-block:4vh}
  #grads .g-h2{font-size:clamp(34px,6.4vh,64px)}
  #grads .wrap.center .g-sub{font-size:clamp(15px,2.1vh,20px); margin-top:1vh}
  #grads .cls-grads{margin-top:3vh; grid-template-columns:repeat(var(--n,4), minmax(0, 20vh)); justify-content:center; gap:2vh}
  #grads .cls-grads-6{--n:6} #grads .cls-grads-4{--n:4; grid-template-columns:repeat(4, minmax(0, 23vh))}
  #grads .cls-grad b{font-size:clamp(13px,1.7vh,16px)} #grads .cls-grad span{font-size:clamp(11px,1.35vh,13px)}
  #grads .cls-grad span{display:-webkit-box; -webkit-line-clamp:2; -webkit-box-orient:vertical; overflow:hidden}
  #grads .g-caption{margin-top:1.5vh}
  #grads .cls-scouts{font-size:clamp(20px,3vh,30px); margin-top:3vh; max-width:44ch}
  #grads .proof-row{margin-top:2.5vh; padding-top:2.5vh; grid-template-columns:17vh 1fr; gap:4vh; max-width:820px}
  #grads .proof-row .g-h3{font-size:clamp(20px,3.3vh,34px)}
  #grads .proof-row .g-sub{font-size:clamp(14px,1.9vh,18px)}
}
@media (min-width:900px) and (min-height:600px){ #grads .cls-grads-6{grid-template-columns:repeat(6, minmax(0, 17vh))} #grads:has(.cls-scouts) .g-h2{font-size:clamp(30px,5.4vh,56px)} #grads .cls-scouts{font-size:clamp(18px,2.6vh,26px); margin-top:2vh} #grads:has(.cls-scouts) .proof-row{margin-top:1.8vh; padding-top:1.8vh; grid-template-columns:14vh 1fr} #grads:has(.cls-scouts) .proof-row .g-h3{font-size:clamp(18px,2.8vh,30px)} }
/* Suzanne row centered in the class-page section (Corey, 2026-09-26). */
#grads .proof-row{margin-left:auto; margin-right:auto; width:fit-content; max-width:min(900px,100%)}
/* Enroll section: the line under Enroll Today! readable on navy (Corey, 2026-09-26). */
#enroll .wrap.center .g-sub{color:#e3e7f5}
#enroll .cls-fine{color:#c8cfe6} #enroll .cls-fine a{color:#fff}
/* Class pages, phones: date heading on one line, price under it (Corey, 2026-09-26). */
@media (max-width:640px){ #enroll .session-head{flex-direction:column; align-items:flex-start; gap:6px} #enroll .session-head h3{font-size:clamp(20px,6.4vw,26px); white-space:nowrap} #enroll .session-head .price{font-size:28px} }
@media (max-width:640px){ #enroll .g-band.room .session-head, .g-band.room#enroll .session-head{display:grid; grid-template-columns:auto 1fr; column-gap:8px; align-items:end} .g-band.room#enroll .session-head h3{grid-area:1/1/2/3} .g-band.room#enroll .session-head .run{grid-area:2/1/3/3} .g-band.room#enroll .session-head .price{grid-area:3/1; text-align:left; font-size:28px; margin-top:6px} .g-band.room#enroll .session-head .fee{grid-area:3/2; text-align:left; margin-bottom:3px} }
@media (max-width:640px){ .g-band.room#enroll .session-head .run{font-size:14px} }
/* Enroll card: full class dates, written out like the current site (Corey picked A, 2026-09-26). */
#enroll .cls-dates{margin:0 0 20px; font-size:15px; line-height:1.6; color:#e3e7f5}
#enroll .cls-dates b{color:#fff} #enroll .cls-dates span{color:#aeb7d6}
.g-weeks.wk li.show[data-label]::before{white-space:nowrap}
/* Tiles read as squares: white cards, equal height, on the grey band (Corey, 2026-09-26). */
#work .cls-facts div{background:#fff; box-shadow:0 1px 0 #e6e8ef, 0 6px 18px rgba(11,20,55,.06); display:flex; flex-direction:column; justify-content:center; min-height:132px}
@media (max-width:640px){ #work .cls-facts{gap:10px} #work .cls-facts div{min-height:118px; padding:16px 10px} #work .cls-facts b{font-size:34px} #work .cls-facts span{font-size:14px; line-height:1.35} }
/* Adult class: Parth's vertical clip beside his story (Corey picked A, 2026-09-26). */
.cls-parth{display:grid; grid-template-columns:260px 1fr; gap:clamp(24px,4vw,48px); align-items:center; max-width:860px; margin:clamp(36px,5vw,56px) auto 0; text-align:left}
.cls-parth video{width:100%; height:auto; aspect-ratio:758/1350; object-fit:cover; border-radius:22px; background:#000; display:block}
.cls-parth .cls-k{font:800 12px Inter,sans-serif; letter-spacing:.12em; text-transform:uppercase; color:var(--muted-dark); margin:0 0 8px}
.cls-parth h3{font:400 clamp(30px,3.6vw,44px)/1 var(--display); text-transform:uppercase; color:var(--ink-dark); margin:0}
.cls-parth h3 mark{background:none; box-shadow:inset 0 -.3em 0 0 var(--yellow); padding:0 .04em}
.cls-parth p{font-size:18px; line-height:1.55; color:var(--muted-dark); margin:14px 0 0}
.cls-parth .cls-n{display:flex; gap:28px; margin-top:18px} .cls-parth .cls-n b{display:block; font:400 34px/1 var(--display); color:var(--ink-dark)} .cls-parth .cls-n span{font-size:14px; color:var(--muted-dark)}
@media (max-width:700px){ .cls-parth{grid-template-columns:130px 1fr; gap:16px; align-items:start} .cls-parth h3{font-size:24px} .cls-parth p{font-size:15px; margin-top:8px} .cls-parth .cls-n{gap:16px; margin-top:10px} .cls-parth .cls-n b{font-size:24px} }
.cls-parth .cls-n span{display:block; line-height:1.3}
#enroll .cls-alt{margin:16px 0 0; text-align:center; font-size:15px; color:#e3e7f5} #enroll .cls-alt a{color:#fff; font-weight:700; text-decoration:underline; text-decoration-color:var(--yellow); text-underline-offset:4px}
#work .wrap.center .g-sub b{color:var(--ink-dark)}
/* Showcase-night photo: less headroom (Corey, 2026-09-26). */
.cls-revphoto img[src*="showcase-night-group"]{aspect-ratio:16/8; object-fit:cover; object-position:50% 58%}
@media (max-width:640px){ .cls-revphoto img[src*="showcase-night-group"]{aspect-ratio:4/3; object-position:50% 70%} }
/* Class-page reviews: yellow highlights sweep in when the quotes scroll into view, like the homepage (Corey, 2026-09-26). */
#reviews .rev mark{background:linear-gradient(var(--yellow),var(--yellow)) no-repeat 0 88% / 0% 42%; transition:background-size .9s cubic-bezier(.3,.7,.2,1)}
#reviews .rev.lit mark{background-size:100% 42%}
#reviews .rev:nth-child(2) mark{transition-delay:.25s} #reviews .rev:nth-child(3) mark{transition-delay:.5s}
@media (prefers-reduced-motion:reduce){ #reviews .rev mark{transition:none; background-size:100% 42%} }
/* Class pages: tiny zoom on hover for the review photo and instructor photos, like the homepage (Corey, 2026-09-26). */
.cls-revphoto,.cls-person{overflow:hidden} .cls-revphoto{border-radius:22px} .cls-person > img{display:block}
.cls-revphoto img,.cls-person img{transition:transform .5s ease}
.cls-revphoto:hover img,.cls-person:hover img{transform:scale(1.03)}
.cls-person{overflow:visible} .cls-person > img{clip-path:inset(0 round 20px)}
@media (prefers-reduced-motion:reduce){ .cls-revphoto img,.cls-person img{transition:none} }
/* Parth's clip gets the same yellow play button as the other films (Corey, 2026-09-26). */
.cls-pv{position:relative; border-radius:22px; overflow:hidden}
.cls-pv-play{position:absolute; inset:0; border:0; background:transparent; cursor:pointer; display:grid; place-items:center; padding:0}
.cls-pv-play .film-play{position:static; transform:none}
.cls-pv-play:hover .film-play{transform:scale(1.06)}
/* Closing CTA: slimmer, a quick swipe (Corey, 2026-09-26). */
.g-band.cls-close{padding-block:clamp(36px,6vw,64px)}
.g-band.cls-close .g-sub{margin-top:8px} .g-band.cls-close .actions{margin-top:18px}
.g-band.cls-close .g-sub{margin-top:20px}
#more{padding-top:clamp(32px,5vw,56px)}
/* Class pages: one navy closing block, CTA on top, book + coaching below (Corey, 2026-09-26). */
.cls-final{background:var(--navy,#0b1437); padding-block:clamp(48px,7vw,88px)}
.cls-final .g-h2{color:#fff} section.g-band.deep.cls-final .g-h2 mark{color:#fff !important; background:none !important; box-shadow:inset 0 -.14em 0 var(--yellow) !important; padding:0 .04em}
.cls-final .g-sub{color:#e3e7f5; margin-top:20px} .cls-final .actions{margin-top:20px}
.cls-final .actions .btn{font-size:18px; padding:14px 30px}
.cls-final-more{margin-top:clamp(36px,5vw,56px); padding-top:clamp(28px,4vw,40px); border-top:1px solid rgba(255,255,255,.14)}
.cls-final-more .cls-more-card{box-shadow:none}
.cls-more-card img[src*="corey-coaching"]{object-fit:cover; border-radius:14px; object-position:50% 20%}
.cls-more-card img[src*="corey-coaching"]{object-fit:cover; object-position:50% 50%}
/* Kids grad spotlight on phones: 6 in a 3x2 grid, same height as the adult 2x2 (Corey, 2026-09-26). */
@media (max-width:640px){ #grads .cls-grads-6{grid-template-columns:repeat(3,1fr); gap:10px} #grads .cls-grads-6 .cls-grad b{font-size:13px; line-height:1.2} #grads .cls-grads-6 .cls-grad span{font-size:11px; line-height:1.3; display:-webkit-box; -webkit-line-clamp:2; -webkit-box-orient:vertical; overflow:hidden} #grads .cls-grads-6 .cls-grad img{border-radius:12px; margin-bottom:4px} }
/* Grad tiles: full credits on laptop, just the top credit on phones for the kids 3x2 grid (Corey, 2026-09-26). */
.cls-grad .cr-one{display:none}
@media (max-width:640px){ #grads .cls-grads-6 .cls-grad .cr-all{display:none} #grads .cls-grads-6 .cls-grad .cr-one{display:block; -webkit-line-clamp:unset; overflow:visible; font-size:11.5px; line-height:1.3} #grads .cls-grads-6 .cls-grad b{font-size:13.5px} }
#grads .cls-grad span.cr-one{display:none}
@media (max-width:640px){ #grads .cls-grads-6 .cls-grad span.cr-one{display:block} }
/* Kids grad tiles on laptop too: one full credit, no cut-off (Corey, 2026-09-26). */
#grads .cls-grads-6 .cls-grad span.cr-all{display:none} #grads .cls-grads-6 .cls-grad span.cr-one{display:block; -webkit-line-clamp:unset; overflow:visible}
/* Grad tiles + Suzanne: the same tiny hover zoom as the other photos (Corey, 2026-09-26). */
.cls-grad{overflow:visible} .cls-grad img{clip-path:inset(0 round 16px); transition:transform .5s ease}
.cls-grad:hover img{transform:scale(1.04)}
#grads .proof-row img{transition:transform .5s ease; clip-path:inset(0 round 18px)} #grads .proof-row:hover img{transform:scale(1.03)}
@media (prefers-reduced-motion:reduce){ .cls-grad img,#grads .proof-row img{transition:none} }
/* Kids: the agents line on its own, highlighted (Corey, 2026-09-26). */
#grads .cls-agents{margin:14px 0 0; font-weight:700; font-size:clamp(17px,1.7vw,20px); line-height:1.45; color:var(--ink-dark)}
#grads .cls-agents mark{background:linear-gradient(transparent 55%, var(--yellow) 55%); color:inherit; padding:0 .06em}
#grads .proof-row > div{max-width:520px}
/* Agents highlight sweeps in on scroll, like the reviews (Corey, 2026-09-26). */
#grads .cls-agents mark{background:linear-gradient(var(--yellow),var(--yellow)) no-repeat 0 88% / 0% 42%; transition:background-size .9s cubic-bezier(.3,.7,.2,1) .2s}
#grads .cls-agents.lit mark{background-size:100% 42%}
@media (prefers-reduced-motion:reduce){ #grads .cls-agents mark{transition:none; background-size:100% 42%} }
/* Pick your class (Corey, 2026-09-26): photos start below the yellow band; 2x2 grid with coaching + audit. */
.door:has(.door-flag){--fh:calc(clamp(18px,1.9vw,26px) + 28px)}
.door:has(.door-flag) > img{top:var(--fh); height:calc(100% - var(--fh))}
.pagehead .pk-last{color:#fff; font-weight:800; text-decoration:underline; text-decoration-color:var(--yellow); text-decoration-thickness:3px; text-underline-offset:5px}
.pk-more{display:grid; grid-template-columns:repeat(auto-fit,minmax(280px,1fr)); gap:18px; margin-top:18px}
.pk-box{display:flex; flex-direction:column; gap:6px; background:#fff; border-radius:var(--radius); padding:clamp(20px,2.4vw,28px); text-decoration:none; color:var(--ink-dark); box-shadow:0 1px 0 #e6e8ef, 0 8px 24px rgba(11,20,55,.06); transition:transform .25s ease, box-shadow .25s ease}
.pk-box:hover{transform:translateY(-2px); box-shadow:0 1px 0 #e6e8ef, 0 14px 30px rgba(11,20,55,.1)}
.pk-box .lab{font-size:12px; letter-spacing:.1em; text-transform:uppercase; font-weight:800; color:var(--muted-dark)}
.pk-box b{font:400 clamp(24px,2.4vw,30px)/1.1 var(--display); text-transform:uppercase}
.pk-box > span:not(.lab):not(.g-link){font-size:16px; color:var(--muted-dark)}
.pk-box .g-link{margin-top:6px; font-weight:700}
.pk-box{gap:4px} .pk-box .g-link{margin-top:10px; padding:0}
.pk-more .pk-box{justify-content:flex-start}
/* Pick your class: class cards sit in the navy header; pointing at one lifts it and quiets the other (Corey, 2026-09-26). */
.pagehead.compact:has(.pk-doors){padding-bottom:clamp(36px,5vw,64px)}
.pk-doors{margin-top:clamp(28px,4vw,44px)}
.pk-doors .door{transition:transform .35s ease, filter .35s ease, box-shadow .35s ease}
.pk-doors:hover .door{filter:brightness(.8)}
.pk-doors .door:hover{filter:none; transform:scale(1.03); box-shadow:0 0 0 3px var(--yellow), 0 18px 40px rgba(0,0,0,.45)}
.pk-doors .door:hover > img{transform:scale(1.04)}
@media (prefers-reduced-motion:reduce){ .pk-doors .door,.pk-doors .door > img{transition:none} .pk-doors .door:hover{transform:none} }
.g-band.mist.tight:has(.pk-more){padding-top:clamp(28px,4vw,44px)}
.g-band.mist.tight .pk-more{margin-top:0}
/* Pick your class, round 2 (Corey): solid underline, calm hover, shorter cards with heads up to the band. */
.pagehead .pk-last{text-decoration:none; background:linear-gradient(var(--yellow),var(--yellow)) no-repeat 0 100% / 100% 3px; padding-bottom:4px}
.pk-doors .door:hover{transform:translateY(-4px); box-shadow:0 0 0 3px var(--yellow), 0 14px 30px rgba(0,0,0,.4)}
.pk-doors .door:hover > img,.pk-doors .door > img{transform:none}
.pk-doors:hover .door{filter:brightness(.88)} .pk-doors .door:hover{filter:none}
.pk-doors .door{aspect-ratio:auto; height:clamp(420px,48vw,560px)}
.pk-doors .door > img{object-position:50% 0}
@media (max-width:640px){ .pk-doors .door{height:440px} }
/* Lily keeps her homepage zoom on the pick page; top-aligned so her head sits near the band, no extra hover zoom. */
.pk-doors .door > img.crop-lily,.pk-doors .door:hover > img.crop-lily{object-position:50.1% 6%; transform:scale(1.75); transform-origin:50.1% 6%}
.pk-doors .door > img:not(.crop-lily){object-position:50% 8%}
/* Pick page boxes get a small photo, like the class-page book/coaching cards (Corey, 2026-09-26). */
.pk-box{flex-direction:row; align-items:center; gap:clamp(16px,2vw,22px)}
.pk-box > img{flex:none; width:clamp(100px,11vw,130px); aspect-ratio:4/5; height:auto; object-fit:cover; border-radius:14px}
.pk-txt{display:flex; flex-direction:column; gap:4px}
.pk-txt .lab{font-size:12px; letter-spacing:.1em; text-transform:uppercase; font-weight:800; color:var(--muted-dark)}
.pk-txt b{font:400 clamp(24px,2.4vw,30px)/1.1 var(--display); text-transform:uppercase}
.pk-txt > span:not(.lab):not(.g-link){font-size:16px; color:var(--muted-dark)}
.pk-txt .g-link{margin-top:10px; padding:0}
.pk-txt b{color:var(--ink-dark,#0b1437)} .pk-box .g-link{color:var(--ink-dark,#0b1437)}
.g-band.mist.tight:has(.pk-more){padding-bottom:clamp(36px,5vw,56px)}
.pk-box > img{height:auto; aspect-ratio:4/5; object-fit:cover}
@media (max-width:640px){ .pk-box > img{width:96px} .pk-txt > span:not(.lab):not(.g-link){font-size:15px} }
/* Pick page photos match the homepage cards' headroom (Corey, 2026-09-26). */
.pk-doors .door > img:not(.crop-lily){object-position:50% 50%}
.pk-doors .door > img.crop-lily,.pk-doors .door:hover > img.crop-lily{object-position:50.1% 14.9%; transform:scale(1.75); transform-origin:50.1% 14.9%}
/* Reviews page title gets the same yellow underline as the other page titles (Corey, 2026-09-26). */
.g-band.pagehead.rx-a .g-eyebrow mark{background:none; color:#fff; box-shadow:inset 0 -.12em 0 var(--yellow); padding:0 0 .04em}
/* Reviews: section heading at full size, no highlight; one line on phones (Corey, 2026-09-26). */
.rx-h mark{background:none !important; box-shadow:none !important; color:inherit !important; padding:0 !important}
@media (max-width:640px){ .rx-h{font-size:clamp(24px,8.2vw,34px); white-space:nowrap} }
/* Private coaching page, rebuilt 2026-09-26 (class-page style). */
.co-split{display:grid; gap:clamp(24px,4vw,56px); align-items:center; max-width:1100px; margin:0 auto}
@media (min-width:860px){ .co-split{grid-template-columns:minmax(0,.85fr) minmax(0,1.15fr)} }
.co-split img{width:100%; height:auto; aspect-ratio:4/5; object-fit:cover; object-position:50% 12%; border-radius:22px}
.co-hero .kicker{color:var(--yellow); font-weight:800; letter-spacing:.12em; text-transform:uppercase; font-size:13px; margin:0 0 10px}
.co-hero .g-h1{color:#fff; text-align:left; margin:0} .co-hero .g-sub{color:#e3e7f5; margin:14px 0 0; text-align:left}
.co-price{color:#fff; font-size:18px; margin:16px 0 0} .co-price b{font:400 34px/1 var(--display); color:var(--yellow)}
.co-hero .actions{justify-content:flex-start}
@media (max-width:859px){ .co-split img{max-width:360px; margin:0 auto; aspect-ratio:1; object-position:50% 20%} }
.co-who{display:grid; gap:14px; max-width:1100px; margin:clamp(24px,4vw,40px) auto 0}
@media (min-width:760px){ .co-who{grid-template-columns:1fr 1fr} }
.co-who div{background:#fff; border-radius:18px; padding:clamp(18px,2.4vw,26px); box-shadow:0 1px 0 #e6e8ef, 0 8px 24px rgba(11,20,55,.06)}
.co-who b{display:block; font:400 clamp(22px,2.4vw,28px)/1.1 var(--display); text-transform:uppercase; color:var(--ink-dark)}
.co-who span{display:block; margin-top:8px; font-size:16px; line-height:1.55; color:var(--muted-dark)}
.co-photo{margin:clamp(24px,4vw,40px) auto 0; max-width:1100px} .co-photo img{width:100%; height:auto; border-radius:22px; display:block}
.co-how{display:grid; gap:clamp(24px,4vw,56px); align-items:center; max-width:1100px; margin:0 auto}
@media (min-width:860px){ .co-how{grid-template-columns:minmax(0,.8fr) minmax(0,1.2fr)} }
.co-how > img{width:100%; height:auto; aspect-ratio:4/5; object-fit:cover; border-radius:22px}
.co-how .g-h2{text-align:left}
.co-steps{margin:18px 0 0; padding-left:22px; display:grid; gap:14px; font-size:17px; line-height:1.55; color:var(--muted-dark)} .co-steps b{color:var(--ink-dark)}
.co-how .actions{justify-content:flex-start; align-items:center; gap:18px}
#reviews .rev mark{background:linear-gradient(var(--yellow),var(--yellow)) no-repeat 0 88% / 0% 42%; transition:background-size .9s cubic-bezier(.3,.7,.2,1)}
#reviews .rev.lit mark{background-size:100% 42%}
.co-photo img{aspect-ratio:16/8; object-fit:cover; object-position:50% 40%}
@media (max-width:640px){ .co-hero .g-h1{font-size:clamp(40px,12vw,52px)} .co-photo img{aspect-ratio:4/3} }
.cls-revphoto img[src*="coach-set-review"]{aspect-ratio:16/8; object-fit:cover; object-position:50% 45%}
/* Coaching v2 (Corey, 2026-09-26): promise line, your-coach row with Doro quote, past-clients tiles. */
.co-promise{margin:16px 0 0; font-weight:800; font-size:clamp(17px,1.7vw,21px); color:var(--yellow)}
.co-hero .g-sub{font-size:clamp(16px,1.5vw,19px)}
.co-coach{border-top:0; margin-top:0; padding-top:0}
.co-coach .g-eyebrow{margin:0 0 6px}
.co-quote{margin:18px 0 0; padding:14px 18px; border-left:5px solid var(--yellow); background:var(--paper-2,#f3f4f8); border-radius:0 14px 14px 0}
.co-quote p{margin:0; font-size:17px; line-height:1.5; color:var(--ink-dark); font-style:italic}
.co-quote footer{margin-top:8px; font-size:14px; font-weight:700; color:var(--muted-dark)}
.co-facts div{background:#fff; box-shadow:0 1px 0 #e6e8ef, 0 6px 18px rgba(11,20,55,.06)}
.co-facts b{font-size:clamp(26px,3vw,38px)}
@media (max-width:819px){ .co-coach{grid-template-columns:1fr; align-items:start} .co-coach img{height:auto; aspect-ratio:1; max-width:220px; object-position:50% 20%} }
.co-coach .g-h3{font-size:clamp(26px,3vw,40px)}
.co-hero .co-promise{color:#fff}
/* Your coach row: the All That wall photo, wider than a headshot (Corey, 2026-09-26). */
@media (min-width:820px){ .co-coach{grid-template-columns:minmax(0,.9fr) minmax(0,1.1fr); max-width:1100px} }
.co-coach > img{aspect-ratio:1; object-fit:cover; object-position:50% 60%}
@media (max-width:819px){ .co-coach > img{max-width:none; aspect-ratio:4/3} }
/* Coaching hero: never clip the head; show from the top of the frame (Corey, 2026-09-26). */
.co-split img{object-position:50% 0 !important}
@media (max-width:859px){ .co-split img{aspect-ratio:4/5 !important; max-width:320px} }
/* Coaching: past clients folded into Who it's for; How it works cut (Corey, 2026-09-26). */
.co-lead{margin:clamp(32px,4.5vw,52px) 0 0; text-align:center; font:400 clamp(26px,3vw,38px)/1 var(--display); text-transform:uppercase; color:var(--ink-dark)}
#who .co-facts{margin-top:clamp(16px,2.4vw,24px)}
#who .co-facts div{background:var(--paper-2,#f3f4f8); box-shadow:none}
/* Coaching hero: the two lines under the title match in colour and width (Corey, 2026-09-26). */
.co-hero .co-promise,.co-hero .g-sub{color:#fff !important; max-width:34ch; font-size:clamp(17px,1.6vw,20px); line-height:1.5}
.co-hero .co-promise{font-weight:800} .co-hero .g-sub{font-weight:400; margin-top:10px; opacity:.85}
/* Coaching hero photo: slight zoom from the top to push the light edge out; head stays put (Corey, 2026-09-26). */
/* Your coach row: one headline, a clean credit list, the quote in plain text (Corey, 2026-09-26). */
.co-coach .g-eyebrow{margin-bottom:8px}
.co-creds{list-style:none; margin:16px 0 0; padding:0; display:grid; gap:8px}
.co-creds li{position:relative; padding-left:22px; font-size:17px; line-height:1.4; color:var(--ink-dark); font-weight:600}
.co-creds li::before{content:""; position:absolute; left:0; top:.5em; width:10px; height:10px; border-radius:50%; background:var(--yellow)}
.co-quote p{font-style:normal !important; font-size:16px !important; color:var(--muted-dark) !important}
.co-quote footer{font-size:14px}
/* Your coach list: no dots, thin rules (Corey, 2026-09-26). */
.co-creds{gap:0} .co-creds li{padding:9px 0; border-top:1px solid #e6e8ef} .co-creds li:last-child{border-bottom:1px solid #e6e8ef} .co-creds li::before{display:none}
/* Your coach credits, option D: bold lead words (Corey picked D, 2026-09-26). */
.co-creds.co-d li{border:0 !important; padding:5px 0; font-weight:400; color:var(--muted-dark)} .co-creds.co-d li b{color:var(--ink-dark); font-weight:800}
#who .co-facts div{background:var(--paper-2,#f3f4f8); box-shadow:none} #who .co-facts{margin-top:clamp(20px,3vw,32px)}
#who .g-sub b{color:var(--ink-dark)}
/* Coaching: Not in LA strip (Corey picked B, 2026-09-26). */
.co-notla{margin-top:16px; background:var(--navy,#0b1437); color:#fff; border-radius:18px; padding:18px 24px; display:grid; gap:6px 22px; align-items:center}
@media (min-width:760px){ .co-notla{grid-template-columns:auto 1fr} }
.co-notla b{font:400 clamp(26px,2.6vw,32px)/1 var(--display); text-transform:uppercase; white-space:nowrap; color:var(--yellow)}
.co-notla span{color:#e3e7f5; font-size:16px; line-height:1.5}
/* Past clients on grey, white tiles (Corey, 2026-09-26). */
#who .co-facts div{background:#fff !important; box-shadow:0 1px 0 #e6e8ef, 0 6px 18px rgba(11,20,55,.06) !important}
/* Not in LA strip lines up with the tiles above it (Corey, 2026-09-26). */
.co-notla{max-width:980px; margin-left:auto; margin-right:auto; margin-top:12px}
/* Nickole Doro quote: highlight sweeps in on scroll, like the reviews (Corey, 2026-09-26). */
.co-quote mark{background:linear-gradient(var(--yellow),var(--yellow)) no-repeat 0 88% / 0% 42%; transition:background-size .9s cubic-bezier(.3,.7,.2,1) .2s; color:inherit}
.co-quote.lit mark{background-size:100% 42%}
@media (prefers-reduced-motion:reduce){ .co-quote mark{transition:none; background-size:100% 42%} }
/* Coaching: All That photo gets the same small hover zoom as the grads photos (Corey, 2026-09-26). */
.co-coach > img{transition:transform .5s ease; clip-path:inset(0 round 18px)} .co-coach:hover > img{transform:scale(1.03)}
@media (prefers-reduced-motion:reduce){ .co-coach > img{transition:none} }
/* Coaching hero: same small hover zoom, grown from the top so the top stays the top (Corey, 2026-09-26). */
.co-split > img{transition:transform .5s ease; transform-origin:50% 0; clip-path:inset(0 round 22px)} .co-split:hover > img{transform:scale(1.03)}
@media (prefers-reduced-motion:reduce){ .co-split > img{transition:none} }
/* Hero photo lines up with the All That photo below it: same content width and column split (Corey, 2026-09-26). */
.co-split{max-width:1140px}
@media (min-width:860px){ .co-split{grid-template-columns:minmax(0,.9fr) minmax(0,1.1fr)} }
/* Corporate page (Corey, 2026-09-26): homepage shape, logo wall from Andriy's single-colour SVGs, photo + copy rows. */
.corp-hero > img{object-position:50% 40%}
.logo-wall{list-style:none; margin:clamp(24px,4vw,44px) auto 0; padding:0; max-width:1100px; display:grid; grid-template-columns:repeat(3,1fr); gap:10px}
@media (min-width:700px){ .logo-wall{grid-template-columns:repeat(6,1fr); gap:12px} }
.logo-wall li{background:var(--paper-2,#f3f4f8); border-radius:16px; aspect-ratio:5/3; display:grid; place-items:center; padding:14%}
.logo-wall .lg{display:block; width:100%; height:100%; background:var(--ink-dark,#0b1437); -webkit-mask:var(--lg) center/contain no-repeat; mask:var(--lg) center/contain no-repeat; opacity:.85; transition:opacity .2s}
.logo-wall li:hover .lg{opacity:1}
.corp-row{border-top:0; margin-top:0; padding-top:0; max-width:1100px}
@media (min-width:820px){ .corp-row{grid-template-columns:minmax(0,1fr) minmax(0,1fr)} }
.corp-row > img{aspect-ratio:4/3; object-fit:cover; transition:transform .5s ease; clip-path:inset(0 round 18px)} .corp-row:hover > img{transform:scale(1.03)}
.corp-row .g-h3{font-size:clamp(26px,3vw,40px)}
.corp-list li{font-weight:600}
@media (prefers-reduced-motion:reduce){ .corp-row > img{transition:none} }
/* Corporate hero: Corey + BT onstage, copy over the crowd on the left (Corey, 2026-09-26). */
.corp-hero > img{object-position:60% 45%}
@media (max-width:640px){ .corp-hero > img{object-position:66% 45%} .corp-hero .full-copy.corey{bottom:8%} }
/* Wide logos (Kaiser, CSULB, Bicos, East West, Charter) read bigger with less padding. */
.logo-wall li{padding:10% 8%}
.logo-wall .lg[aria-label="Kaiser Permanente"],.logo-wall .lg[aria-label="CSULB"],.logo-wall .lg[aria-label="Bicos"],.logo-wall .lg[aria-label="East West Bank"],.logo-wall .lg[aria-label="Charter Impact"]{transform:scale(1.35)}
/* Photo + copy rows stack on phones. */
@media (max-width:819px){ .corp-row{grid-template-columns:1fr !important} .corp-row > img{height:auto !important; aspect-ratio:4/3 !important} }
/* Logo wall: full width inside the homepage-style proof band; wide logos a touch bigger (Corey, 2026-09-26). */
#clients > .wrap{width:100%; box-sizing:border-box; justify-self:stretch}
.logo-wall .lg[aria-label="Kaiser Permanente"],.logo-wall .lg[aria-label="CSULB"],.logo-wall .lg[aria-label="Bicos"],.logo-wall .lg[aria-label="East West Bank"],.logo-wall .lg[aria-label="Charter Impact"]{transform:scale(1.12)}
/* Corporate hero headline smaller than the homepage's so it clears Corey and BT. */
.corp-hero .full-copy.corey .g-h1{font-size:max(5.4vw,34px)}
.corp-hero .full-copy.corey .you-line{font-size:max(3.2vw,20px)}
.corp-hero > img{object-position:72% 45%}
/* Corporate hero on phones: photo in the top 60% with Corey + BT both in frame, copy on navy below (Corey, 2026-09-26). */
@media (max-width:640px){ .corp-hero > img{height:60%; object-position:74% 35%} .corp-hero::after{background:linear-gradient(to top, var(--deep,#08123a) 44%, rgba(8,18,58,.35) 62%, rgba(8,18,58,0) 80%)} .corp-hero .full-copy.corey{top:auto; bottom:5%; transform:none} }
@media (max-width:640px){ .corp-hero > img{height:62%} .corp-hero .full-copy.corey{bottom:9%} }
@media (max-width:640px){ .corp-hero > img{object-position:92% 35%} }
@media (max-width:640px){ .corp-hero > img{height:55%; object-position:84% 30%} }
/* Corporate hero on phones: the whole wide photo on top, nothing cropped, copy on navy below (Corey, 2026-09-26). */
@media (max-width:640px){ .corp-hero{height:auto !important; min-height:0 !important; display:flex; flex-direction:column} .corp-hero > img{position:static !important; width:100% !important; height:auto !important; aspect-ratio:2048/1366; object-fit:cover; object-position:50% 50% !important} .corp-hero::after{display:none} .corp-hero .full-copy.corey{position:static !important; transform:none !important; padding:24px 20px 36px !important} .corp-hero .scrollcue{display:none} }
/* Phone hero: photo fades into the navy block instead of a hard edge (Corey, 2026-09-26). */
@media (max-width:640px){ .corp-hero{background:var(--deep,#08123a)} .corp-hero > img{-webkit-mask-image:linear-gradient(to bottom,#000 72%,transparent 100%); mask-image:linear-gradient(to bottom,#000 72%,transparent 100%)} .corp-hero .full-copy.corey{margin-top:-28px; position:relative !important; z-index:1} }
/* Logo wall, Andriy's way: the four headline names big on their own row, the other 14 smaller underneath (Corey, 2026-09-26). */
#clients .nw{white-space:nowrap}
.logo-wall.big{display:grid; grid-template-columns:repeat(2,1fr); gap:10px; max-width:1100px}
@media (min-width:700px){ .logo-wall.big{grid-template-columns:repeat(4,1fr); gap:14px} }
.logo-wall.big li{aspect-ratio:16/9; padding:12% 14%}
.logo-wall.small{display:flex; flex-wrap:wrap; justify-content:center; gap:8px; margin-top:10px; max-width:1100px}
@media (min-width:700px){ .logo-wall.small{gap:10px; margin-top:14px} }
.logo-wall.small li{flex:0 0 calc((100% - 16px)/3); aspect-ratio:2/1; padding:9% 10%; box-sizing:border-box}
@media (min-width:700px){ .logo-wall.small li{flex-basis:calc((100% - 60px)/7)} }
.logo-wall.big li{padding:22px 30px} .logo-wall.small li{padding:12px 14px}
@media (max-width:699px){ .logo-wall.big li{padding:16px 20px} .logo-wall.small li{padding:10px 10px} }
@media (max-width:640px){ #clients .g-h2.wide{font-size:clamp(26px,7.6vw,34px)} }
/* Trusted By headline: the yellow highlights sweep in when the section scrolls into view (Corey, 2026-09-26). */
#clients .g-h2 mark{box-shadow:none; background:linear-gradient(var(--yellow),var(--yellow)) no-repeat 0 100% / 0% .38em; -webkit-box-decoration-break:clone; box-decoration-break:clone; transition:background-size .8s cubic-bezier(.3,.7,.2,1)}
#clients.lit .g-h2 mark{background-size:100% .38em}
#clients .g-h2 mark:nth-of-type(2){transition-delay:.18s} #clients .g-h2 mark:nth-of-type(3){transition-delay:.36s} #clients .g-h2 mark:nth-of-type(4){transition-delay:.54s}
@media (prefers-reduced-motion:reduce){ #clients .g-h2 mark{transition:none; background-size:100% .38em} }
/* Pick Your Event folded into Invest: three offer tiles and one Book a Call under the photo row (Corey, 2026-09-26). */
.corp-offers{max-width:1100px; margin-top:clamp(28px,4vw,48px)}
@media (min-width:820px){ .corp-offers{grid-template-columns:repeat(3,1fr)} }
@media (max-width:819px){ .corp-offers{grid-template-columns:1fr} }
.corp-offers b{font-size:clamp(24px,2.4vw,32px)}
#invest .actions{justify-content:center; margin-top:clamp(20px,3vw,32px)}
/* Two offer tiles: Improv Workshops (stand-up too) and Private Shows (roasts too) (Corey, 2026-09-26). */
@media (min-width:820px){ .corp-offers.two{grid-template-columns:repeat(2,1fr); max-width:820px} }
.corp-offers strong{color:var(--ink-dark,#0b1437); font-weight:700}
.corp-offers .nw{white-space:nowrap}
/* Invest headline: leadership / team building / communication highlights sweep in on scroll, like Trusted By (Corey, 2026-09-26). */
#invest .g-h3 mark{box-shadow:none; background:linear-gradient(var(--yellow),var(--yellow)) no-repeat 0 100% / 0% .3em; -webkit-box-decoration-break:clone; box-decoration-break:clone; transition:background-size .8s cubic-bezier(.3,.7,.2,1)}
#invest.lit .g-h3 mark{background-size:100% .3em}
#invest .g-h3 mark:nth-of-type(2){transition-delay:.18s} #invest .g-h3 mark:nth-of-type(3){transition-delay:.36s}
@media (max-width:819px){ #invest .g-h3 mark{background-size:0% .2em} #invest.lit .g-h3 mark{background-size:100% .2em} }
@media (prefers-reduced-motion:reduce){ #invest .g-h3 mark{transition:none; background-size:100% .3em} }
/* Offer tiles: three lines each; the 'too!' line gets the site yellow underline (Corey, 2026-09-26). */
.corp-offers u{text-decoration:underline; text-decoration-color:var(--yellow); text-decoration-thickness:3px; text-underline-offset:5px; color:var(--ink-dark,#0b1437)}
/* Corporate reviews: five cards, one per company; the second row of two sits centered (Corey, 2026-09-26). */
@media (min-width:900px){ body #reviews .rev-grid.five{display:flex; flex-wrap:wrap; justify-content:center} body #reviews .rev-grid.five .rev{flex:0 0 calc((100% - 2*var(--rg,16px))/3); box-sizing:border-box} }
/* Corporate close: two lines on laptop, breaking after "call," (Corey, 2026-09-26). */
#close .corp-close-sub{max-width:none}
@media (max-width:760px){ #close .desk-br{display:none} }
/* Corporate reviews: tiny zoom on hover, like the photos (Corey, 2026-09-26). */
body:has(#clients) #reviews .rev{transition:transform .35s ease, box-shadow .35s ease} body:has(#clients) #reviews .rev:hover{transform:scale(1.03); box-shadow:0 14px 34px rgba(0,0,0,.28)}
@media (hover:none),(prefers-reduced-motion:reduce){ body:has(#clients) #reviews .rev:hover{transform:none} }
/* About page (Corey, 2026-09-26): motto hero, what we do, awards, book row, our why, uniform team grid with tap-for-bio, book close. */
.ab-hero .ph-slot{aspect-ratio:4/5; border-radius:22px; border:3px dashed var(--yellow); display:grid; place-items:center; text-align:center; color:#fff; font:400 clamp(26px,3vw,40px)/1.1 Anton,sans-serif; background:rgba(255,255,255,.04); padding:20px}
.ab-hero .ph-slot small{display:block; font:700 13px/1.4 Inter,sans-serif; letter-spacing:.08em; text-transform:uppercase; color:#c9cfe6; margin-top:8px}
@media (max-width:859px){ .ab-hero .ph-slot{max-width:320px; margin:0 auto; aspect-ratio:4/3} }
.ab-hero .kicker{color:var(--yellow); font-weight:800; letter-spacing:.12em; text-transform:uppercase; font-size:13px; margin:0 0 10px}
.ab-hero .g-h1{color:#fff; text-align:left; margin:0} .ab-hero .g-sub{color:#e3e7f5; text-align:left; margin:14px 0 0; max-width:36ch}
.ab-what{max-width:1100px} .ab-what a{text-decoration:none; color:inherit; transition:transform .3s ease} .ab-what a:hover{transform:translateY(-3px)}
@media (min-width:820px){ .ab-what{grid-template-columns:repeat(4,1fr)} }
.ab-awards .g-eyebrow{color:var(--yellow)}
.ab-award-row{display:flex; justify-content:center; gap:clamp(28px,7vw,110px); margin:10px 0 18px}
.ab-award-row b{display:block; font:400 clamp(80px,11vw,150px)/.9 Anton,sans-serif; color:var(--yellow)}
.ab-award-row span{display:block; font:400 clamp(22px,2.6vw,34px)/1.1 Anton,sans-serif; text-transform:uppercase; color:#fff; margin-top:8px}
.ab-awards .g-link{color:#fff}
.ab-book{border-top:0; margin-top:0; padding-top:0; max-width:1000px; align-items:center}
.ab-book img{aspect-ratio:auto !important; object-fit:contain !important; border-radius:6px !important; box-shadow:0 18px 40px rgba(11,20,55,.25); transition:transform .5s ease}
.ab-book:hover img{transform:rotate(-2deg) scale(1.02)}
@media (min-width:820px){ .ab-book{grid-template-columns:300px 1fr !important; gap:56px} }
@media (max-width:819px){ .ab-book{grid-template-columns:1fr !important} .ab-book img{max-width:220px; margin:0 auto} }
.tg{display:grid; grid-template-columns:repeat(2,1fr); gap:24px 14px; max-width:1100px; margin:clamp(24px,4vw,44px) auto 0; list-style:none; padding:0}
@media (min-width:820px){ .tg{grid-template-columns:repeat(4,1fr); gap:34px 22px} }
.tm{display:block; width:100%; border:0; background:none; padding:0; text-align:center; cursor:pointer; color:inherit; font:inherit}
.tm-ph{display:block; overflow:hidden; border-radius:18px; aspect-ratio:4/5; background:#0b1b6b}
.tm-ph img{display:block; width:100%; height:100%; object-fit:cover; transition:transform .5s ease}
.tm:hover .tm-ph img{transform:scale(1.03)}
.tm-name{display:block; font:400 clamp(19px,2vw,26px)/1.05 Anton,sans-serif; text-transform:uppercase; margin:14px 0 4px; color:var(--ink-dark)}
.tm-role{display:block; font:700 11px/1.35 Inter,sans-serif; letter-spacing:.14em; text-transform:uppercase; color:var(--muted-dark)}
.tm-cred{display:block; font-size:14px; line-height:1.4; color:var(--ink-dark); margin-top:6px}
@media (max-width:819px){ .tm-role{font-size:10px; letter-spacing:.1em} .tm-cred{font-size:13px} }
.bio-lb{position:fixed; inset:0; z-index:70; background:rgba(3,7,24,.86); display:grid; place-items:center; padding:16px}
.bio-lb[hidden]{display:none}
.bio-card{position:relative; background:#fff; border-radius:22px; max-width:640px; width:100%; max-height:88vh; overflow:auto; padding:24px 26px 28px}
.bio-card img{float:left; width:150px; aspect-ratio:4/5; object-fit:cover; border-radius:14px; margin:0 20px 10px 0}
.bio-card h3{font:400 30px/1 Anton,sans-serif; text-transform:uppercase; margin:4px 0 12px; color:var(--ink-dark)}
.bio-card p{font-size:16px; line-height:1.6; color:var(--muted-dark); margin:0 0 12px}
.bio-x{position:absolute; top:10px; right:12px; border:0; background:#eef0f7; width:36px; height:36px; border-radius:50%; font-size:22px; cursor:pointer}
@media (max-width:560px){ .bio-card img{float:none; display:block; width:130px; margin:0 0 12px} }
.ab-hero .g-h1{font-size:clamp(44px,5.4vw,78px); line-height:.95}
/* About v2 (Corey's notes, 2026-09-26): three what-we-do tiles + award line; book is the navy close. */
@media (min-width:820px){ .ab-what{grid-template-columns:repeat(3,1fr); max-width:900px} }
.ab-award{text-align:center; margin:clamp(22px,3vw,34px) 0 0; font-size:17px; color:var(--muted-dark)}
.ab-award span{display:inline-block; background:var(--paper-2,#f3f4f8); border-radius:99px; padding:10px 18px; margin:0 8px 8px 0}
.ab-award b{color:var(--ink-dark)}
#book .ab-book{border-top:0}
#book .g-h2{color:#fff; text-align:left; margin:0 0 10px} #book .g-sub{color:#e3e7f5; margin-inline:0}
#book .g-eyebrow{color:var(--yellow)}
#book .ab-book img{box-shadow:0 18px 44px rgba(0,0,0,.45)}
@media (max-width:819px){ #book .g-h2,#book .g-sub,#book .g-eyebrow{text-align:center} #book .actions{justify-content:center} }
#book .g-h2 mark{color:#fff !important; background:none !important; box-shadow:inset 0 -.14em 0 var(--yellow) !important; padding:0 .04em}
.ab-what a{display:block; background:var(--paper-2,#f3f4f8); border-radius:18px; padding:clamp(18px,2.4vw,26px) 16px; text-align:center}
.ab-what a:hover{background:#eceff7}
@media (max-width:819px){ .ab-what{grid-template-columns:1fr !important} }
/* About: laughing hero photo; red-carpet band after What We Do (Corey, 2026-09-26). */
.ab-hero .co-split img{width:100%; height:auto; aspect-ratio:4/5; object-fit:cover; object-position:50% 40%; border-radius:22px}
@media (max-width:859px){ .ab-hero .co-split img{max-width:320px; margin:0 auto; display:block} }
.ab-carpet{padding-top:0}
.ab-carpet-fig{margin:0 auto; max-width:1100px; overflow:hidden; border-radius:22px; position:relative}
.ab-carpet-fig img{display:block; width:100%; height:auto; transition:transform .5s ease} .ab-carpet-fig:hover img{transform:scale(1.02)}
.ab-carpet-fig figcaption{position:absolute; left:0; right:0; bottom:0; padding:28px 20px 14px; background:linear-gradient(transparent, rgba(5,12,40,.75)); color:#fff; font-weight:700; font-size:15px; text-align:center}
/* About: hero + what-we-do read as one story; tiles sit right under the hero (Corey, 2026-09-26). */
.ab-hero .g-sub + .g-sub{margin-top:12px; font-size:clamp(15px,1.3vw,17px); opacity:.85} .ab-hero .g-sub b{color:#fff}
.ab-hero .g-sub{max-width:46ch}
.ab-what-band{padding-top:clamp(32px,4vw,52px)} .ab-what-band .ab-what{margin-top:0}
/* About: What We Do + Our Why as one 'Since 2009' story, tiles + awards underneath (Corey, 2026-09-26). */
.ab-story{margin-bottom:clamp(28px,4vw,48px)} .ab-story .g-h2{text-align:left; margin:0 0 14px}
@media (max-width:899px){ .ab-story .g-h2{text-align:center} }
/* About Our Story (option A, Corey 2026-09-26): list like Corey's credits, TEDx talk as the focus. */
.ab-list{margin-top:18px} .ab-list li{font-weight:400} .ab-list a{color:var(--ink-dark); font-weight:700; text-decoration:underline; text-decoration-color:var(--yellow); text-decoration-thickness:2px; text-underline-offset:3px}
@media (min-width:900px){ .ab-story{grid-template-columns:.95fr 1.05fr} }
.ab-tedx .g-caption{font-weight:700; color:var(--ink-dark); font-size:16px}
.ab-tedx .film{box-shadow:0 18px 40px rgba(11,20,55,.22)}
/* Our Story in Corey's words (2026-09-26): bold beats, ends on 'Comedy can save a life.' */
.ab-story p b{color:var(--ink-dark)}
.ab-story .ab-save{font:400 clamp(32px,3.6vw,48px)/1 var(--display); text-transform:uppercase; color:var(--ink-dark); margin:22px 0 0}
.ab-save mark{background:none; box-shadow:inset 0 -.3em 0 var(--yellow); color:inherit; padding:0 .04em}
@media (max-width:899px){ .ab-story .ab-save{text-align:center} }
/* About close: red carpet photo and the book split the last section (Corey, 2026-09-26). */
.ab-split{display:grid; background:var(--deep,#08123a); color:#fff}
@media (min-width:900px){ .ab-split{grid-template-columns:1.1fr 1fr; min-height:560px} }
.ab-split-ph{margin:0; position:relative; overflow:hidden; min-height:300px}
.ab-split-ph img{position:absolute; inset:0; width:100%; height:100%; object-fit:cover; object-position:50% 30%; transition:transform .6s ease}
.ab-split-ph:hover img{transform:scale(1.03)}
.ab-split-ph figcaption{position:absolute; left:0; right:0; bottom:0; padding:30px 20px 14px; background:linear-gradient(transparent, rgba(5,12,40,.8)); font-weight:700; font-size:14px; text-align:center}
.ab-split-copy{display:grid; grid-template-columns:150px 1fr; gap:28px; align-items:center; padding:clamp(36px,5vw,72px) clamp(20px,4vw,64px)}
.ab-split-book{width:100%; height:auto; border-radius:4px; box-shadow:0 18px 44px rgba(0,0,0,.5); transform:rotate(-3deg); transition:transform .4s ease}
.ab-split-copy:hover .ab-split-book{transform:rotate(0) scale(1.03)}
.ab-split .g-eyebrow{color:var(--yellow)} .ab-split .g-h2{color:#fff; text-align:left; margin:0 0 10px}
.ab-split .g-h2 mark{color:#fff; background:none; box-shadow:inset 0 -.14em 0 var(--yellow); padding:0 .04em}
.ab-split .g-sub{color:#e3e7f5; margin-inline:0; font-size:16px}
@media (max-width:899px){ .ab-split-ph{aspect-ratio:3/2; min-height:0} .ab-split-copy{grid-template-columns:110px 1fr; gap:18px} .ab-split .g-h2{font-size:clamp(30px,8vw,40px)} }
.ab-split .g-h2{font-size:clamp(34px,3.6vw,54px); white-space:nowrap}
@media (max-width:899px){ .ab-split-copy{grid-template-columns:1fr; justify-items:center; text-align:center} .ab-split-book{width:130px} .ab-split .g-h2{text-align:center} .ab-split .actions{justify-content:center} }
@media (max-width:899px){ .ab-split-ph figcaption{font-size:12px; padding:26px 14px 10px} }
.bio-card p b{color:var(--ink-dark)}
/* Red carpet: box matches the photo so no one is cut; phone caption sits under the photo (Corey, 2026-09-26). */
@media (min-width:900px){ .ab-split{min-height:0; align-items:center} .ab-split-ph{aspect-ratio:3/2; align-self:stretch; min-height:0} .ab-split-ph img{object-position:50% 50%} }
@media (max-width:899px){ .ab-split-ph{aspect-ratio:auto; overflow:visible} .ab-split-ph img{position:static; display:block; width:100%; height:auto} .ab-split-ph figcaption{position:static; background:none; padding:10px 16px 0; font-size:13px; color:#c9cfe6} }
/* About: a little less air between Our Story and Meet the Team (Corey, 2026-09-26). */
body:has(#why .ab-story) #why{padding-bottom:clamp(52px,8vw,100px)} body:has(#why .ab-story) #team{padding-top:clamp(52px,8vw,100px)}
/* Thanks page, one card (Corey, 2026-09-26): you're in, what to expect, the book. */
.th-band .wrap{max-width:980px}
.th-card{display:grid; gap:0; background:#fff; color:var(--ink-dark); border-radius:26px; overflow:hidden; box-shadow:0 24px 60px rgba(0,0,0,.35)}
@media (min-width:760px){ .th-card{grid-template-columns:.8fr 1.2fr} }
.th-photo{display:block; width:100%; height:100%; object-fit:cover; max-height:560px}
@media (max-width:759px){ .th-photo{aspect-ratio:16/10; object-position:50% 40%} }
.th-body{padding:clamp(24px,4vw,48px)}
.th-body .g-eyebrow{color:var(--muted-dark); margin:0 0 6px}
.th-body .g-h2{text-align:left; margin:0 0 14px; color:var(--ink-dark); font-size:clamp(34px,4vw,54px)}
.th-lead{font-size:18px; line-height:1.5; color:var(--ink-dark); margin:0 0 6px}
.th-list li{font-weight:400} .th-list a{color:var(--ink-dark); font-weight:700}
.th-book{display:grid; grid-template-columns:70px 1fr; gap:18px; align-items:center; margin-top:22px; padding:18px 22px; border-radius:20px; background:rgba(255,255,255,.07); color:#fff}
.th-book img{width:70px; height:auto; border-radius:3px; box-shadow:0 8px 20px rgba(0,0,0,.4); transform:rotate(-3deg)}
.th-book .g-h3{color:#fff; margin:0; font-size:clamp(20px,2vw,26px)}
.th-book .g-h3 mark{color:#fff; background:none; box-shadow:inset 0 -.2em 0 var(--yellow)}
.th-book p{margin:4px 0 0; color:#c9cfe6; font-size:15px}
@media (min-width:760px){ .th-book{grid-template-columns:70px 1fr auto} }
@media (max-width:759px){ .th-book .btn{grid-column:1 / -1; justify-self:start} }
.th-band .th-card .g-h2{color:var(--ink-dark) !important} .th-band .th-card .g-h2 mark{color:var(--ink-dark) !important}
.th-band .th-card .th-lead{color:var(--ink-dark) !important} .th-band .th-card .g-eyebrow{color:var(--muted-dark) !important}
.th-band .th-card .th-list a{color:var(--ink-dark) !important; text-decoration:underline; text-decoration-color:var(--yellow); text-decoration-thickness:2px; text-underline-offset:3px}
.th-band .th-card .th-list li{color:var(--muted-dark)} .th-band .th-card .th-list b{color:var(--ink-dark)}
/* Thanks book strip: white card, dark text, readable (Corey, 2026-09-26). */
.th-band .th-book{background:#fff; color:var(--ink-dark); box-shadow:0 14px 34px rgba(0,0,0,.25)}
.th-band .th-book .g-h3{color:var(--ink-dark) !important} .th-band .th-book .g-h3 mark{color:var(--ink-dark) !important; box-shadow:inset 0 -.25em 0 var(--yellow)}
.th-band .th-book p{color:var(--muted-dark) !important}
/* Thanks on light grey instead of navy (Corey, 2026-09-26). */
.th-band{padding-block:clamp(36px,6vw,80px)}
.th-band .th-card{box-shadow:0 1px 0 #e6e8ef, 0 18px 44px rgba(11,20,55,.10)}
.th-band .th-book{box-shadow:0 1px 0 #e6e8ef, 0 10px 26px rgba(11,20,55,.07)}
@media (max-width:759px){ .th-band .th-photo{aspect-ratio:4/3; object-position:50% 18%} }
/* Thanks book: no white edge on the cover, desktop line break (Corey, 2026-09-26). */
.th-band .th-book img{box-shadow:0 6px 16px rgba(11,20,55,.25); border-radius:2px; background:none}
@media (max-width:759px){ .th-book .desk-br{display:none} }
.th-band .th-book img{box-shadow:none; transform:none; filter:drop-shadow(0 6px 10px rgba(11,20,55,.3)); padding:8px 10px; background:var(--paper-2,#f3f4f8); border-radius:12px; box-sizing:content-box; width:60px}
.th-book{grid-template-columns:80px 1fr} @media (min-width:760px){ .th-book{grid-template-columns:80px 1fr auto} }
/* Thanks mic: tall on laptop, the wide original on phones (Corey, 2026-09-26). */
.th-photo{display:block} .th-photo img{display:block; width:100%; height:100%; object-fit:cover; max-height:560px}
@media (max-width:759px){ .th-band .th-photo img{aspect-ratio:3/2; height:auto; object-position:30% 60%} .th-band .th-photo{aspect-ratio:auto} }
/* Thanks laptop: Corey chose the wide mic crop and a wider photo column (41.7%%), 2026-09-26. */
@media (min-width:760px){ .th-card{grid-template-columns:41.7fr 58.3fr} .th-band .th-photo img{object-position:50% 50%} }
/* Thanks book: just the book, no tile; a small zoom on hover (Corey, 2026-09-26). */
.th-band .th-book img{background:none; padding:0; border-radius:0; width:72px; filter:drop-shadow(0 8px 12px rgba(11,20,55,.28)); transition:transform .35s ease}
.th-band .th-book:hover img{transform:scale(1.08) rotate(-2deg)}
@media (prefers-reduced-motion:reduce){ .th-band .th-book img{transition:none} }
@media (min-width:900px){ .th-band .th-book p{white-space:nowrap; font-size:14.5px} }
/* Thanks book: soft yellow spotlight behind the cover (Corey, 2026-09-26). */
.th-band .th-book{background:radial-gradient(circle at 58px 50%, rgba(255,215,0,.7) 0, rgba(255,215,0,.35) 34px, rgba(255,215,0,0) 60px), #fff}
.th-band .th-book{background:#fff}
.th-band .th-book img{filter:drop-shadow(0 0 14px rgba(255,215,0,.95)) drop-shadow(0 0 30px rgba(255,215,0,.55))}
/* Thanks book: drop shadow, pops ~22% bigger with a playful wiggle on hover, like the Underdog Tour card (Corey, 2026-09-26). */
.th-band .th-book{background:#fff; overflow:visible}
.th-band .th-book img{position:relative; z-index:2; filter:drop-shadow(0 10px 14px rgba(11,20,55,.32)); transform-origin:50% 80%; transition:transform .45s cubic-bezier(.34,1.56,.64,1), filter .3s ease}
.th-band .th-book:hover img{transform:scale(1.22) rotate(-6deg); filter:drop-shadow(0 18px 22px rgba(11,20,55,.38)); animation:thBookWiggle .9s .45s ease-in-out 1}
@keyframes thBookWiggle{0%,100%{transform:scale(1.22) rotate(-6deg)} 25%{transform:scale(1.24) rotate(4deg)} 50%{transform:scale(1.22) rotate(-4deg)} 75%{transform:scale(1.23) rotate(2deg)}}
@media (hover:none){ .th-band .th-book img{animation:thBookPop 1.2s .6s cubic-bezier(.34,1.56,.64,1) 1 both} }
@keyframes thBookPop{0%{transform:scale(.8) rotate(8deg); opacity:0} 60%{transform:scale(1.12) rotate(-5deg); opacity:1} 100%{transform:none}}
@media (prefers-reduced-motion:reduce){ .th-band .th-book img{transition:none; animation:none !important} .th-band .th-book:hover img{transform:none} }
/* Thanks: the animated book is a link too (Corey, 2026-09-26). */
.th-book-img{display:block; line-height:0}
/* Thanks mic: the same small hover zoom as the site photos (Corey, 2026-09-26). */
.th-card .th-photo{overflow:hidden} .th-card .th-photo img{transition:transform .5s ease} .th-card:hover .th-photo img{transform:scale(1.03)}
@media (prefers-reduced-motion:reduce){ .th-card .th-photo img{transition:none} }
.flyer[hidden]{display:none !important}
/* Footer email list (Corey, 2026-09-27): one slim row above the page links. */
.f-join{display:grid; gap:14px; align-items:center; margin:clamp(22px,3vw,34px) 0 0; padding:18px 0; border-top:1px solid rgba(11,20,55,.1)}
@media (min-width:820px){ .f-join{grid-template-columns:1fr auto} }
.f-join h4{margin:0 0 4px} .f-join p{margin:0; color:var(--muted-dark); font-size:14px}
.f-join form{display:flex; gap:8px; max-width:440px; width:100%}
.f-join input{flex:1; min-width:0; font:600 15px Inter,sans-serif; padding:12px 16px; border-radius:99px; border:1.5px solid #d5d9e6; color:var(--ink-dark); background:#fff}
.f-join input:focus{outline:none; border-color:var(--yellow); box-shadow:0 0 0 4px rgba(255,215,0,.3)}
.f-join .btn{padding:12px 22px}
.f-join-ok{font-weight:700; color:var(--ink-dark) !important}
/* Phone menu (Corey, 2026-09-27): readable navy list with every main page; the laptop bar stays short.
   Fixes the phone menu that rendered white-on-white on light pages. */
@media (min-width:881px){ .nav-phone{display:none} }
@media (max-width:880px){
  .nav ul{background:#08123a !important; text-align:left; padding:6px 22px 20px !important; box-shadow:0 18px 40px rgba(0,0,0,.35)}
  .nav ul li{border-top:1px solid rgba(255,255,255,.12) !important} .nav ul li:first-child{border-top:0 !important}
  .nav ul a{color:#fff !important; padding:13px 0 !important; font-size:18px !important; font-weight:700}
  .nav ul a:hover, .nav ul a:active, .nav ul a[aria-current="page"]{color:var(--yellow) !important}
  .nav ul li:has(a.cta){border-top:0 !important}
  .nav ul a.cta{color:var(--on-yellow,#0b1437) !important; margin-top:14px; padding:12px 26px !important}
  .nav.open ul{animation:mnDrop .28s cubic-bezier(.2,.8,.2,1) both}
  .nav.open ul li{animation:mnIn .35s cubic-bezier(.2,.8,.2,1) both}
  .nav.open ul li:nth-child(2){animation-delay:.03s} .nav.open ul li:nth-child(3){animation-delay:.06s} .nav.open ul li:nth-child(4){animation-delay:.09s}
  .nav.open ul li:nth-child(5){animation-delay:.12s} .nav.open ul li:nth-child(6){animation-delay:.15s} .nav.open ul li:nth-child(7){animation-delay:.18s}
  .nav.open ul li:nth-child(8){animation-delay:.21s} .nav.open ul li:nth-child(9){animation-delay:.24s} .nav.open ul li:nth-child(10){animation-delay:.27s}
}
@keyframes mnDrop{from{opacity:0; transform:translateY(-10px)}}
@keyframes mnIn{from{opacity:0; transform:translateY(8px)}}
@media (prefers-reduced-motion:reduce){ .nav.open ul, .nav.open ul li{animation:none} }
/* Phone menu links: tiny springy zoom on press, with the yellow (Corey, 2026-09-27). */
@media (max-width:880px){ .nav ul a:not(.cta){display:inline-block; transition:transform .25s cubic-bezier(.34,1.56,.64,1), color .15s} .nav ul a:not(.cta):active, .nav ul a:not(.cta):hover{transform:scale(1.08)} }
@media (prefers-reduced-motion:reduce){ .nav ul a{transition:none !important; transform:none !important} }
/* Accessibility (Andriy's audit request, 2026-09-27): skip link shows only on keyboard focus;
   sr-only text is read aloud but not shown. */
.skip{position:absolute; left:12px; top:-60px; z-index:1000; background:var(--yellow); color:var(--on-yellow,#1A1300); font-weight:800; padding:10px 16px; border-radius:8px; text-decoration:none}
.skip:focus{top:12px}
.sr-only{position:absolute !important; width:1px; height:1px; padding:0; margin:-1px; overflow:hidden; clip:rect(0,0,0,0); white-space:nowrap; border:0}
/* Laptop too (Corey, 2026-09-27): same cue as phones so it is clear the page keeps going. */
@media (min-width:641px){
  .scrollcue{display:grid; justify-items:center; gap:8px; position:absolute; left:0; right:0; bottom:30px; z-index:3;
    pointer-events:none; color:var(--yellow); animation:cuefloat 2.4s ease-in-out infinite}
  .scrollcue span{font:800 11px/1 Inter,sans-serif; letter-spacing:.22em; text-transform:uppercase; text-shadow:0 2px 10px rgba(0,0,0,.75)}
  .scrollcue svg{width:34px; height:19px}
}
/* The cue fades once someone scrolls, and comes back at the top (Corey, 2026-09-27). */
.scrollcue{transition:opacity .35s ease} .scrollcue.cue-gone{opacity:0}