/* Hallmark · checked: 2026-10-31 · genre: playful (inferred)
 * floor: see sweep · fixed: 40 field edges, 48 colour tokens, 50 tracks, 67 label case, 26b disabled, 11 still images, F26 balanced heads
 * kept by owner choice: FAQ small caps, the italic "stage." headline, the chosen animations, the ticket stubs
 * hero image: crowd-cover (7M403308, faces blurred, wide + 4:5 crops) replaces circle-clean
 * built: the project · redesign: polish · v2.0.0 */
/* ==========================================================
   ChatterBox Speech & Drama — styles
   Flat colour blocks (client mockup), two fonts, 8px spacing scale.
   Contrast notes are next to each colour pairing.
   ========================================================== */

:root {
  /* Brand palette from the brief */
  --purple: #4A2A85;
  --gold: #F8BF5B;
  --gold-hover: #F3AC37;
  --cream: #F4F0A7;
  --red: #CE1B1B;
  --plum: #2A0A33;
  --night: #160611;            /* footer: near-black plum */

  /* Reading surfaces and text */
  --paper: #FBF8EF;            /* off-white for reading sections */
  --ink: #2A0A33;              /* plum text on light: 16.6:1 on paper */
  --ink-soft: #5B4762;         /* secondary text on light: 7.8:1 on paper */
  --on-dark: #FBF8EF;          /* text on purple 6.5:1, on plum 16.6:1, on red 5.2:1 */
  --on-dark-soft: rgba(251, 248, 239, .88);   /* ~5:1 on purple; not used on red */
  --line-light: rgba(42, 10, 51, .14);
  --line-dark: rgba(251, 248, 239, .22);
  --wa: #25D366;               /* WhatsApp green; plum icon on it is 8.9:1 */

  /* Type: serif headings + sans everything else */
  --f-head: "Bebas Neue", Impact, "Arial Narrow", sans-serif;
  --f-body: "Poppins", system-ui, -apple-system, "Segoe UI", Roboto, sans-serif;

  /* 8px spacing scale */
  --s1: 8px;  --s2: 16px; --s3: 24px; --s4: 32px;
  --s5: 40px; --s6: 48px; --s8: 64px; --s10: 80px;
  --section-y: var(--s8);
  --header-h: 72px;
  --wrap: 1160px;
  --gutter: 24px;

  /* Shape */
  --r-control: 12px;           /* buttons, inputs, chips */
  --r-card: 16px;              /* cards, panels, tiles */
  --control-h: 48px;
  --shadow: 0 1px 2px rgba(42, 10, 51, .06), 0 12px 28px -18px rgba(42, 10, 51, .4);

  --focus: var(--purple);      /* focus ring on light surfaces; gold on dark ones */

  /* Colours used across the page, lifted into tokens (Hallmark polish) */
  --field-line: rgba(42, 10, 51, .6);          /* form field edges: over 3:1 on the ticket's paper */
  --c-0000: #0000;
  --c-000000: #000;
  --c-14030f-a0: rgba(20, 3, 15, 0);
  --c-14030f-a26: rgba(20, 3, 15, .26);
  --c-14030f-a28: rgba(20, 3, 15, .28);
  --c-14030f-a32: rgba(20, 3, 15, .32);
  --c-14030f-a34: rgba(20, 3, 15, .34);
  --c-14030f-a35: rgba(20, 3, 15, .35);
  --c-14030f-a36: rgba(20, 3, 15, .36);
  --c-14030f-a38: rgba(20, 3, 15, .38);
  --c-14030f-a45: rgba(20, 3, 15, .45);
  --c-14030f-a60: rgba(20, 3, 15, .6);
  --c-14030f-a70: rgba(20, 3, 15, .7);
  --c-2a0a33-a25: rgba(42, 10, 51, .25);
  --c-2a0a33-a28: rgba(42, 10, 51, .28);
  --c-2a0a33-a30: rgba(42, 10, 51, .3);
  --c-2a0a33-a35: rgba(42, 10, 51, .35);
  --c-2a0a33-a48: rgba(42, 10, 51, .48);
  --c-2a0a33-a50: rgba(42, 10, 51, .5);
  --c-2a0a33-a55: rgba(42, 10, 51, .55);
  --c-2a0a33-a70: rgba(42, 10, 51, .7);
  --c-2a0a33-a84: rgba(42, 10, 51, .84);
  --c-35185f: #35185f;
  --c-3a1a64-a72: rgba(58, 26, 100, .72);
  --c-4a2a85-a0: rgba(74, 42, 133, 0);
  --c-4a2a85-a15: rgba(74, 42, 133, .15);
  --c-4a2a85-a18: rgba(74, 42, 133, .18);
  --c-4a2a85-a32: rgba(74, 42, 133, .32);
  --c-4a2a85-a35: rgba(74, 42, 133, .35);
  --c-e9a63c: #e9a63c;
  --c-f4f0a7-a30: rgba(244, 240, 167, .3);
  --c-f4f0a7-a40: rgba(244, 240, 167, .4);
  --c-f4f0a7-a45: rgba(244, 240, 167, .45);
  --c-f4f0a7-a55: rgba(244, 240, 167, .55);
  --c-f4f0a7-a60: rgba(244, 240, 167, .6);
  --c-f4f0a7-a92: rgba(244, 240, 167, .92);
  --c-f8bf5b-a0: rgba(248, 191, 91, 0);
  --c-f8bf5b-a25: rgba(248, 191, 91, .25);
  --c-f8bf5b-a32: rgba(248, 191, 91, .32);
  --c-f8bf5b-a55: rgba(248, 191, 91, .55);
  --c-f8bf5b-a60: rgba(248, 191, 91, .6);
  --c-f8bf5b-a75: rgba(248, 191, 91, .75);
  --c-f8bf5b-a90: rgba(248, 191, 91, .9);
  --c-fbf8ef-a0: rgba(251, 248, 239, 0);
  --c-fbf8ef-a10: rgba(251, 248, 239, .1);
  --c-fbf8ef-a12: rgba(251, 248, 239, .12);
  --c-fbf8ef-a50: rgba(251, 248, 239, .5);
  --c-fbf8ef-a6: rgba(251, 248, 239, .06);
  --c-fbf8ef-a8: rgba(251, 248, 239, .08);
  --c-fbf8ef-a9: rgba(251, 248, 239, .09);
  --c-ffd278-a80: rgba(255, 210, 120, .8);
  --c-ffe9a6: #FFE9A6;
  --c-ffe9a6-a32: rgba(255, 233, 166, .32);
  --c-fff4d6-a50: rgba(255, 244, 214, .5);
  --c-fffbea-a92: rgba(255, 251, 234, .92);
}


/* ---------- Base ---------- */
*, *::before, *::after { box-sizing: border-box; }
html {
  scroll-behavior: smooth;
  scroll-padding-top: calc(var(--header-h) + var(--s2));
  -webkit-text-size-adjust: 100%;
  overflow-x: clip;
  background: var(--night);     /* overscroll past the dark header/footer stays dark */
}
body {
  margin: 0;
  font-family: var(--f-body);
  font-size: 17px;
  line-height: 1.55;
  color: var(--ink);
  background: var(--paper);
  -webkit-font-smoothing: antialiased;
  font-variant-numeric: lining-nums;   /* "10", "5-8", "13+" read clearly in Fraunces (the font shorthand resets it, so .tab-age and .credits dd restate it) */
  overflow-x: clip;
}
img, svg { display: block; max-width: 100%; }
a { color: inherit; }
button, input, select, textarea { font: inherit; color: inherit; }
strong { font-weight: 700; }
h1, h2, h3, h4 {
  font-family: var(--f-head);
  font-weight: 700;
  line-height: 1.15;
  letter-spacing: -.01em;
  margin: 0 0 var(--s2);
}
p { margin: 0 0 var(--s2); text-wrap: pretty; }
.wrap {
  width: min(var(--wrap), calc(100% - 2 * var(--gutter) - env(safe-area-inset-left, 0px) - env(safe-area-inset-right, 0px)));
  margin-inline: auto;
}
.sr-only { position: absolute; width: 1px; height: 1px; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; }
.skip-link {
  position: absolute; left: var(--s2); top: -80px; z-index: 300;
  background: var(--gold); color: var(--plum); padding: 12px var(--s2); border-radius: var(--r-control);
  font-weight: 700; text-decoration: none;
}
.skip-link:focus { top: var(--s2); }
:focus-visible { outline: 3px solid var(--focus); outline-offset: 3px; }

/* Dark surfaces use a gold focus ring (gold on purple 4.1:1, on plum 10.6:1, on red 3.3:1) */
.site-header, .hero, .familiar, .act-programmes, .marquee-cta, .curtain-call,
.site-footer, .mobile-bar, .method, .casting { --focus: var(--gold); }
.panel, .ticket-form-main { --focus: var(--purple); }

/* Blocks waiting for real content (photos, names, reviews, dates).
   To show one again, delete its data-needs-content attribute in index.html. */
[data-needs-content] { display: none !important; }

/* Eyebrow labels above section headings are retired (mockup has none) */
.label { display: none; }

/* Shared small-caps label style */
.hero-eyebrow, .panel-age, .tab-name, .scene-no, .sign-small, .casting-top,
.contact-list dt, .site-footer h4, .sig-role, .ticket-head span:last-child, .stub-no {
  font-family: var(--f-body);
  font-size: .8125rem;
  font-weight: 700;
  letter-spacing: .1em;
  text-transform: uppercase;
}

/* ---------- Section headings ---------- */
.display {
  font-size: clamp(1.75rem, 1.2rem + 1.6vw, 2.5rem);   /* 28–40px */
  color: var(--purple);                                  /* 6.5:1 on paper */
  text-wrap: balance;
}
.display.center { text-align: center; }
.cb-name { font-style: italic; }
.act-lede { font-size: 1.0625rem; color: var(--ink-soft); max-width: 60ch; margin: 0; }
.display-sm { font-size: clamp(1.5rem, 1.15rem + 1vw, 2rem); }

/* ---------- Buttons ---------- */
.ticket-btn, .wa-btn, .submit-btn, .btn-outline, .mb-trial, .mb-wa {
  display: inline-flex; align-items: center; justify-content: center; gap: var(--s1);
  min-height: var(--control-h);
  padding: 0 var(--s3);
  border: 2px solid transparent;
  border-radius: var(--r-control);
  font: 700 1rem/1.2 var(--f-body);
  text-align: center;
  text-decoration: none;
  cursor: pointer;
  transition: background-color .2s ease, border-color .2s ease, color .2s ease, transform .15s ease;
}
/* Primary: gold with plum text (10.6:1) */
.ticket-btn, .wa-btn, .submit-btn, .mb-trial { background: var(--gold); color: var(--plum); }
.ticket-btn:hover, .wa-btn:hover, .submit-btn:hover, .mb-trial:hover { background: var(--gold-hover); }
/* Secondary: outline */
.btn-outline { background: transparent; color: var(--on-dark); border-color: var(--on-dark); }
.btn-outline:hover { background: var(--c-fbf8ef-a12); }
.ticket-btn:active, .wa-btn:active, .submit-btn:active, .btn-outline:active, .mb-trial:active, .mb-wa:active { transform: translateY(1px); }
.ticket-stub { display: none; }               /* old ticket-shape detail; text kept in markup */
.ticket-sm { min-height: 40px; padding: 0 var(--s2); font-size: .9375rem; }
.wa-btn svg { width: 20px; height: 20px; fill: currentColor; flex: none; }
.text-link {
  font-weight: 600;
  text-decoration: underline;
  text-decoration-color: var(--c-f4f0a7-a60);
  text-underline-offset: 3px;
}

/* ---------- Header ---------- */
.site-header {
  position: sticky; top: 0; z-index: 100;
  background: var(--plum);
  color: var(--on-dark);
  transition: box-shadow .2s ease;
}
.site-header.scrolled { box-shadow: 0 2px 16px var(--c-14030f-a35); }
.header-inner { height: var(--header-h); display: flex; align-items: center; justify-content: space-between; gap: var(--s3); }
.brand { display: flex; align-items: center; gap: var(--s2); text-decoration: none; }
.brand-logo { height: 48px; width: auto; }
.brand-mark, .brand-text { display: none; }
.no-logo .logo-img { display: none; }
.no-logo .brand-mark {
  display: grid; place-items: center; width: 40px; height: 40px; border-radius: 10px;
  background: var(--purple); color: var(--gold); font: 700 1.375rem/1 var(--f-head);
}
.no-logo .brand-text { display: flex; flex-direction: column; }
.brand-name { font: 700 1.375rem/1.1 var(--f-head); color: var(--cream); }
.brand-tagline { font-size: .75rem; color: var(--on-dark-soft); }

.nav-menu { display: flex; align-items: center; gap: var(--s4); list-style: none; margin: 0; padding: 0; }
.nav-menu a:not(.ticket-btn) {
  position: relative; display: block; padding: var(--s1) 0;
  color: var(--on-dark); text-decoration: none; font-weight: 600; font-size: .9375rem;
}
.nav-menu a:not(.ticket-btn)::after {
  content: ""; position: absolute; left: 0; right: 0; bottom: 2px; height: 2px;
  background: var(--gold); transform: scaleX(0); transform-origin: left; transition: transform .2s ease;
}
.nav-menu a:not(.ticket-btn):hover::after, .nav-menu a.active::after { transform: scaleX(1); }
.nav-toggle { display: none; background: none; border: 0; padding: 10px; margin-right: -10px; cursor: pointer; border-radius: var(--r-control); }
.nav-toggle .bar { display: block; width: 24px; height: 2px; margin: 6px 0; background: var(--on-dark); transition: transform .2s ease; }
.nav-toggle[aria-expanded="true"] .bar:nth-child(1 of .bar) { transform: translateY(4px) rotate(45deg); }    /* both bars cross: a clear X */
.nav-toggle[aria-expanded="true"] .bar:nth-child(2 of .bar) { transform: translateY(-4px) rotate(-45deg); }

/* ---------- Hero (flat purple, heading and actions first) ---------- */
.hero {
  position: relative; overflow: hidden;
  background: var(--purple);
  color: var(--on-dark);
  text-align: center;
  padding: var(--s10) 0 var(--s6);
  --mx: 50%; --my: 30%;
}
/* the one light interaction on the flat block: a soft glow that follows the pointer (desktop only) */
.spotlight { display: none; }
.hero-inner { position: relative; }
.hero-eyebrow { color: var(--cream); margin: 0 0 var(--s2); }            /* cream on purple 5.9:1 */
.hero-title {
  font-size: clamp(1.875rem, 1.2rem + 2.2vw, 3rem);                   /* 30–48px */
  line-height: 1.12;
  color: var(--gold);                                                   /* large text: 4.1:1 */
  max-width: 760px;
  margin: 0 auto var(--s2);
  text-wrap: balance;
}
.voice-word { font-style: italic; }
.hero-sub { font-size: 1.125rem; color: var(--on-dark); max-width: 560px; margin: 0 auto var(--s4); }
.hero-sub strong { color: var(--cream); }
.hero-ctas { display: flex; flex-wrap: wrap; justify-content: center; gap: var(--s2); }
.hero-trust {
  list-style: none; margin: var(--s3) 0 0; padding: 0;
  display: flex; flex-wrap: wrap; justify-content: center; gap: var(--s1) var(--s3);
  font-size: .9375rem; font-weight: 600; color: var(--on-dark);
}
.hero-trust li { display: flex; align-items: center; gap: var(--s1); }
.hero-trust li::before {
  content: "✓"; display: grid; place-items: center; width: 20px; height: 20px; border-radius: 50%;
  background: var(--cream); color: var(--purple); font-size: .75rem; font-weight: 700;
}
.hero-quote {
  position: relative; max-width: 640px; margin: var(--s6) auto 0; padding-top: var(--s4);
  border-top: 1px solid var(--line-dark); text-align: center;
}
.hero-quote blockquote { margin: 0 0 var(--s1); font: 600 1.25rem/1.5 var(--f-body); color: var(--cream); }
.hero-quote figcaption { font-size: .875rem; color: var(--on-dark-soft); }
.hero-quote figcaption::before { content: "— "; }

/* Photos (AI-generated, labelled as such). Ratios are reserved so nothing shifts while they load. */
.hero-photo, .familiar-photo, .method-photo { margin: 0; }
.hero-photo img, .familiar-photo img, .method-photo img {
  display: block; width: 100%; height: auto; object-fit: cover;
  border-radius: var(--r-card); background: var(--plum);
}
.hero-photo { max-width: 600px; margin: var(--s5) auto 0; }
.hero-photo img { aspect-ratio: 1264 / 848; box-shadow: 0 18px 40px -24px var(--c-14030f-a60); }
.ai-note { margin: var(--s1) 0 0; font-size: .8125rem; color: var(--on-dark-soft); }   /* 88% off-white on purple 5.5:1 */

.photo { position: relative; overflow: hidden; background: var(--plum); border-radius: var(--r-card); }
.photo > img { width: 100%; height: 100%; object-fit: cover; }

/* ---------- Highlights band (gold) ---------- */
.ribbon { background: var(--gold); color: var(--plum); overflow: hidden; padding: 12px 0; }
.ribbon-track {
  display: flex; width: max-content; white-space: nowrap;
  font-size: .9375rem; font-weight: 700;
  animation: marquee 40s linear infinite;
}
.ribbon-track > * { margin-right: var(--s3); }        /* margins (not gap) keep the loop seamless */
.ribbon-track i { font-style: normal; color: var(--purple); }
.ribbon:hover .ribbon-track, .ribbon.is-off .ribbon-track { animation-play-state: paused; }
@keyframes marquee { to { transform: translateX(-50%); } }

/* ---------- Section blocks ---------- */
.playbill-section, .familiar, .act, .interval, .marquee-cta, .curtain-call { padding-block: var(--section-y); }
.act-head { margin-bottom: var(--s5); }

/* Curriculum (off-white) */
.playbill-section { background: var(--paper); }
.playbill-grid { display: grid; grid-template-columns: minmax(0, 1.1fr) minmax(0, 1fr); gap: var(--s8); align-items: center; }
.playbill-intro p { color: var(--ink-soft); max-width: 52ch; margin: 0; }
.credits { margin: 0; border-top: 1px solid var(--line-light); }
.credits div {
  display: grid; grid-template-columns: minmax(0, 1fr) auto; gap: var(--s2); align-items: baseline;
  padding: var(--s2) 0; border-bottom: 1px solid var(--line-light);
}
.credits dt { font-size: .9375rem; font-weight: 600; color: var(--ink-soft); }
.credits dd { margin: 0; font: 700 1.5rem/1.2 var(--f-head); font-variant-numeric: lining-nums; color: var(--purple); text-align: right; white-space: nowrap; }

/* "Is your child shy…" (plum band) */
.familiar { background: var(--plum); color: var(--on-dark); text-align: center; }
.familiar-inner { max-width: 720px; }
.familiar .display { color: var(--cream); }
.pains { list-style: none; margin: var(--s4) auto; padding: 0; display: grid; gap: 12px; max-width: 520px; text-align: left; }
.pains li {
  display: flex; align-items: center; gap: var(--s2);
  padding: 14px var(--s2); border-radius: var(--r-control);
  background: var(--c-fbf8ef-a6); border: 1px solid var(--line-dark);
  font-weight: 600;
}
.pains li::before { content: ""; flex: none; width: 8px; height: 8px; border-radius: 50%; background: var(--cream); }
.familiar-answer { color: var(--on-dark-soft); max-width: 560px; margin: 0 auto var(--s4); }
.familiar-photo { max-width: 560px; margin: var(--s6) auto 0; }
.familiar-photo img { aspect-ratio: 4 / 3; object-position: 50% 60%; }   /* phones/tablets: both faces and both puppets */

/* About (off-white) */
.act-about { background: var(--paper); }

/* Benefits: four compact tiles */
.gains { list-style: none; margin: 0; padding: 0; display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: var(--s3); }
.gain {
  display: flex; flex-direction: column; gap: var(--s1);
  padding: var(--s3); border-radius: var(--r-card);
  background: var(--cream);                         /* plum on cream 15:1 */
}
.gain-no { display: none; }
.gain-icon {
  display: grid; place-items: center; width: 48px; height: 48px; margin-bottom: var(--s1);
  border-radius: var(--r-control); background: var(--purple);
}
.gain-icon svg { width: 24px; height: 24px; fill: var(--cream); }
.gain h3 { font-size: 1.375rem; color: var(--plum); margin: 0; }
.gain p { font-size: .9375rem; color: var(--ink-soft); margin: 0; }
.gain .dot { fill: var(--purple); }                                  /* the speech bubble's three dots */
.gain-icon svg * { transform-box: fill-box; transform-origin: center; }

/* Founder + teachers (hidden until real names/photos) */
.director { display: grid; grid-template-columns: 280px minmax(0, 1fr); gap: var(--s6); align-items: center; margin-top: var(--s8); }
.director-photo .photo { aspect-ratio: 4 / 5; }
.director-note .display-sm { color: var(--plum); }
.director-note p { color: var(--ink-soft); }
.director-note .signature { font: italic 700 1.5rem/1.2 var(--f-head); color: var(--purple); margin: var(--s2) 0 0; }
.director-note .sig-role { color: var(--ink-soft); margin: 4px 0 0; }
.company { margin-top: var(--s8); }
.company-title { font-size: 1.5rem; color: var(--purple); margin-bottom: var(--s3); }
.cast { list-style: none; margin: 0; padding: 0; display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: var(--s3); }
.cast li {
  display: grid; grid-template-columns: 48px minmax(0, 1fr); column-gap: var(--s2); align-items: center;
  padding: var(--s3); border: 1px solid var(--line-light); border-radius: var(--r-card);
}
.cast-avatar {
  grid-row: span 2; display: grid; place-items: center; width: 48px; height: 48px; border-radius: 50%;
  background: var(--purple); color: var(--cream); font: 700 1.25rem/1 var(--f-head);
}
.cast-name { font: 700 1.125rem/1.3 var(--f-head); color: var(--plum); }
.cast-dots { display: none; }
.cast-role { font-size: .875rem; color: var(--ink-soft); }

/* What a class looks like (purple card) */
.method {
  margin-top: var(--s8); padding: var(--s6);
  border-radius: var(--r-card);
  background: var(--purple); color: var(--on-dark);
}
.method-head { margin-bottom: var(--s5); }
.method-head .display-sm { color: var(--cream); margin: 0; }
.scenes { list-style: none; margin: 0; padding: 0; display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: var(--s6) var(--s3); }
.scenes li { position: relative; padding-top: var(--s5); border-top: 2px solid var(--c-f4f0a7-a40); }
.scene-icon {
  position: absolute; top: -21px; left: 0; z-index: 1;
  display: grid; place-items: center; width: 40px; height: 40px; border-radius: 50%;
  background: var(--gold);                                          /* plum glyph on gold: "lights on" */
}
.scenes li::before {                                                /* gold line over the faint track */
  content: ""; position: absolute; left: 0; right: 0; top: -2px; height: 2px;
  background: var(--gold); transform-origin: left center;
}
.scene-icon svg { width: 20px; height: 20px; fill: var(--purple); }
.scene-no { display: block; color: var(--on-dark-soft); }
.scenes h4 { font-size: 1.25rem; color: var(--cream); margin: var(--s1) 0 4px; }
.scenes p { font-size: .9375rem; color: var(--on-dark-soft); margin: 0; }
.method-photo { margin-top: var(--s5); }
.method-photo img { aspect-ratio: 1200 / 896; border-radius: var(--r-control); }
.method-photo picture { display: block; overflow: clip; border-radius: var(--r-control); }   /* keeps the zoom inside the frame (clip, not hidden, so the scroll timeline still sees the page) */

/* Desktop: the photos sit beside their text */
@media (min-width: 981px) {
  .hero { text-align: left; padding-top: var(--s8); }
  .hero-inner { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); gap: var(--s6); align-items: center; }
  .hero-title, .hero-sub { margin-left: 0; }
  .hero-ctas, .hero-trust { justify-content: flex-start; }
  .hero-photo { max-width: none; margin: 0; }

  .familiar { text-align: left; }
  .familiar-inner { max-width: none; display: grid; grid-template-columns: minmax(0, 440px) minmax(0, 1fr); grid-template-areas: "photo copy"; gap: var(--s8); align-items: center; }
  .familiar-copy { grid-area: copy; }
  .familiar .display.center { text-align: left; }
  .familiar .pains, .familiar-answer { margin-left: 0; margin-right: 0; }
  .familiar-photo { grid-area: photo; max-width: none; margin: 0; }
  .familiar-photo img { aspect-ratio: 4 / 5; object-position: 50% 50%; }

  .method { display: grid; grid-template-columns: minmax(0, 1.15fr) minmax(0, 1fr); grid-template-areas: "head photo" "scenes photo"; column-gap: var(--s6); align-items: start; }
  .method-head { grid-area: head; }
  .scenes { grid-area: scenes; }
  .method-photo { grid-area: photo; align-self: center; margin: 0; }
}

/* ---------- Programmes (purple band): tabs above one balanced panel ---------- */
.act-programmes { background: var(--purple); color: var(--on-dark); }
.act-programmes .display { color: var(--cream); }
.act-programmes .act-lede { color: var(--on-dark-soft); }
.swipe-hint { display: none; }

.tabs { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: var(--s2); margin: 0 0 var(--s3); }
.tabs button {
  display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 4px;
  min-height: 88px; padding: var(--s2);
  border-radius: var(--r-card); border: 1px solid var(--c-f4f0a7-a30);
  background: var(--c-2a0a33-a30); color: var(--on-dark);
  cursor: pointer;
  transition: background-color .2s ease, border-color .2s ease, color .2s ease;
}
.tabs button:hover { background: var(--c-2a0a33-a48); border-color: var(--c-f4f0a7-a55); }
.tabs button[aria-selected="true"] { background: var(--gold); border-color: var(--gold); color: var(--plum); }
.tab-age { font: 700 1.75rem/1 var(--f-head); font-variant-numeric: lining-nums; }
.tab-age i { font-style: normal; }

.panel {
  display: grid; grid-template-columns: minmax(0, 5fr) minmax(0, 7fr);
  overflow: hidden;
  border-radius: var(--r-card);
  background: var(--paper); color: var(--ink);
  box-shadow: var(--shadow);
}
.panel[hidden] { display: none; }
.panel.is-active { animation: panel-in .22s ease both; }
@keyframes panel-in { from { opacity: .35; transform: translateY(6px); } to { opacity: 1; transform: none; } }
.panel-photo { position: relative; min-height: 280px; }
.panel-photo .photo { position: absolute; inset: 0; border-radius: 0; }
.panel-body { padding: var(--s5); }
/* No photo yet: one panel, two balanced columns (summary + what we cover) */
.panel:has(.panel-photo[data-needs-content]) { grid-template-columns: minmax(0, 1fr); }
.panel:has(.panel-photo[data-needs-content]) .panel-body {
  display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); column-gap: var(--s6);
  grid-template-areas: "age list" "title list" "intro list" "cta list";
  align-items: start;
}
.panel:has(.panel-photo[data-needs-content]) .panel-age { grid-area: age; }
.panel:has(.panel-photo[data-needs-content]) .panel-body h3 { grid-area: title; }
.panel:has(.panel-photo[data-needs-content]) .panel-intro { grid-area: intro; }
.panel:has(.panel-photo[data-needs-content]) .ticks {
  grid-area: list; align-self: center;
  padding-left: var(--s5); border-left: 1px solid var(--line-light);
}
.panel:has(.panel-photo[data-needs-content]) .ticket-btn { grid-area: cta; }
.panel-age { color: var(--red); margin: 0 0 var(--s1); }               /* red on paper 5.2:1 */
.panel h3 { font-size: clamp(1.75rem, 1.3rem + 1vw, 2.25rem); color: var(--purple); margin: 0 0 var(--s2); }
.panel-intro { color: var(--ink-soft); margin: 0 0 var(--s4); }
.panel .ticket-btn { justify-self: start; }

.ticks { list-style: none; margin: 0; padding: 0; display: grid; gap: 12px; }
.ticks li { position: relative; padding-left: var(--s3); }
.ticks li::before { content: ""; position: absolute; left: 4px; top: .62em; width: 8px; height: 8px; border-radius: 50%; background: var(--purple); }

/* Ways to join: three simple cards */
.boxoffice { margin-top: var(--s6); }
.boxoffice-title { font-size: 1.5rem; color: var(--cream); margin-bottom: var(--s3); }
.board { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: var(--s2); }
.board-row {
  display: flex; flex-direction: column; gap: 4px;
  padding: var(--s3); border-radius: var(--r-card);
  border: 1px solid var(--c-f4f0a7-a30); background: var(--c-2a0a33-a30);
}
.board-name { font: 700 1.25rem/1.25 var(--f-head); color: var(--cream); }
.board-when { font-size: .9375rem; color: var(--on-dark-soft); }

/* ---------- Testimonials (hidden until real reviews) ---------- */
.interval { background: var(--paper); }
.slider { margin-top: var(--s4); }
.slides { display: flex; gap: var(--s3); overflow-x: auto; scroll-snap-type: x mandatory; scrollbar-width: none; padding-bottom: var(--s1); }
.slides::-webkit-scrollbar { display: none; }
.slide { flex: 0 0 min(440px, 86%); scroll-snap-align: start; margin: 0; padding: var(--s4); border-radius: var(--r-card); background: var(--cream); }
.stars { margin: 0 0 var(--s2); color: var(--purple); letter-spacing: .15em; }
.slide blockquote { margin: 0 0 var(--s3); font: 700 1.25rem/1.4 var(--f-head); color: var(--plum); }
.slide figcaption { font-size: .875rem; color: var(--ink-soft); }
.slide figcaption span { display: block; font-weight: 700; color: var(--plum); }
.slider-controls { display: flex; justify-content: center; align-items: center; gap: var(--s2); margin-top: var(--s3); }
.slider-btn { width: 44px; height: 44px; border-radius: 50%; border: 2px solid var(--purple); background: transparent; color: var(--purple); cursor: pointer; }
.dots { display: flex; gap: var(--s1); }
.dots button { width: 10px; height: 10px; padding: 0; border: 0; border-radius: 999px; background: var(--c-2a0a33-a25); cursor: pointer; }
.dots button[aria-current="true"] { width: 24px; background: var(--purple); }

/* ---------- Spotlight band (flat red, as in the mockup) ---------- */
.marquee-cta { background: var(--red); color: var(--on-dark); text-align: center; }
.sign { max-width: 640px; margin: 0 auto; }
.sign-small { color: var(--on-dark); margin: 0 0 var(--s1); }
.sign h2 { font-size: clamp(1.875rem, 1.3rem + 1.8vw, 2.75rem); color: var(--cream); margin-bottom: var(--s2); }   /* cream on red 4.7:1 */
.sign p:not(.sign-small) { color: var(--on-dark); font-size: 1.0625rem; margin: 0 auto var(--s4); }

/* ---------- FAQs (off-white) ---------- */
.act-faqs { background: var(--paper); }
.faq-grid { display: grid; gap: var(--s5); max-width: 820px; }   /* one centred reading column: heading above the list */
.faq-list { border-top: 1px solid var(--line-light); }
.faq { border-bottom: 1px solid var(--line-light); }
.faq summary {
  display: flex; align-items: center; justify-content: space-between; gap: var(--s2);
  min-height: 56px; padding: var(--s2) 0;
  list-style: none; cursor: pointer;
  font-weight: 700; font-size: 1.0625rem; color: var(--plum);
  transition: color .2s ease;
}
.faq summary::-webkit-details-marker { display: none; }
.faq summary::after {
  content: "+"; flex: none; display: grid; place-items: center; width: 32px; height: 32px;
  border-radius: 50%; border: 2px solid var(--purple); color: var(--purple);
  font-weight: 600; font-size: 1.25rem; line-height: 1;
  transition: transform .2s ease, background-color .2s ease, color .2s ease;
}
.faq summary:hover { color: var(--purple); }
.faq[open] summary::after { transform: rotate(45deg); background: var(--purple); color: var(--on-dark); }
.faq-body { overflow: hidden; }
.faq-body p { margin: 0; padding: 0 var(--s6) var(--s3) 0; color: var(--ink-soft); }

/* ---------- Contact (purple) with the ticket-style form ---------- */
.curtain-call { background: var(--purple); color: var(--on-dark); }
.contact-grid { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1.1fr); gap: var(--s8); align-items: start; }
.curtain-call .display { color: var(--cream); }
.curtain-call .act-lede { color: var(--on-dark-soft); }
.trial-steps { list-style: none; counter-reset: step; margin: var(--s4) 0; padding: 0; display: grid; gap: var(--s2); }
.trial-steps li { counter-increment: step; display: grid; grid-template-columns: 32px minmax(0, 1fr); column-gap: var(--s2); }
.trial-steps li::before {
  content: counter(step); grid-row: span 2; display: grid; place-items: center; width: 32px; height: 32px;
  border-radius: 50%; background: var(--cream); color: var(--purple); font-weight: 700; font-size: .9375rem;
}
.trial-steps strong { color: var(--on-dark); }
.trial-steps span { font-size: .9375rem; color: var(--on-dark-soft); }
.next-batch {
  display: inline-block; margin: 0 0 var(--s3); padding: var(--s1) var(--s2);
  border: 1px dashed var(--c-f4f0a7-a60); border-radius: 999px; font-size: .9375rem;
}
.contact-list { margin: 0; border-top: 1px solid var(--line-dark); }
.contact-list div { display: grid; grid-template-columns: 88px minmax(0, 1fr); gap: var(--s2); padding: 12px 0; border-bottom: 1px solid var(--line-dark); }
.contact-list dt { color: var(--on-dark-soft); padding-top: 2px; }
.contact-list dd { margin: 0; }
.contact-list a { text-decoration: underline; text-decoration-color: var(--c-f4f0a7-a60); text-underline-offset: 3px; }

/* The one theatre accent: a ticket with a tear-off stub */
.ticket-form {
  --stub: 72px;
  --notch: radial-gradient(circle 12px at calc(100% - var(--stub)) 0, var(--c-0000) 97%, var(--c-000000)) top / 100% 51% no-repeat,
           radial-gradient(circle 12px at calc(100% - var(--stub)) 100%, var(--c-0000) 97%, var(--c-000000)) bottom / 100% 51% no-repeat;
  display: grid; grid-template-columns: minmax(0, 1fr) var(--stub);
  border-radius: var(--r-card); overflow: hidden;
  -webkit-mask: var(--notch); mask: var(--notch);
  box-shadow: var(--shadow);
}
.ticket-form-main { background: var(--paper); color: var(--ink); padding: var(--s5); }
.ticket-head {
  display: flex; justify-content: space-between; align-items: baseline; gap: var(--s2);
  margin: 0 0 var(--s3); padding-bottom: var(--s2); border-bottom: 2px solid var(--plum);
}
.ticket-head span:first-child { font: 700 1.375rem/1.2 var(--f-head); color: var(--purple); }
.ticket-head span:last-child { color: var(--red); }
.field { display: grid; gap: 6px; margin-bottom: var(--s2); }
.field-row { display: grid; grid-template-columns: minmax(0, 1.4fr) minmax(0, 1fr); gap: var(--s2); }
.field label { font-size: .875rem; font-weight: 700; color: var(--ink); }
.field input, .field select {
  width: 100%; height: var(--control-h); padding: 0 14px;
  border: 2px solid var(--c-2a0a33-a28); border-radius: var(--r-control);
  background-color: transparent; color: var(--ink);
  font-size: 1rem;                                           /* 16px: no iOS zoom on focus */
  transition: border-color .2s ease, box-shadow .2s ease;
}
.field select {
  -webkit-appearance: none; appearance: none; padding-right: 40px; cursor: pointer;
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 12 8'%3E%3Cpath d='M1 1l5 5 5-5' fill='none' stroke='%232A0A33' stroke-width='2' stroke-linecap='round'/%3E%3C/svg%3E");
  background-repeat: no-repeat; background-position: right 14px center; background-size: 12px 8px;
}
.field input:focus-visible, .field select:focus-visible { outline: 3px solid var(--purple); outline-offset: 2px; border-color: var(--purple); }
.field input.invalid { border-color: var(--red); }
.field input::placeholder { color: var(--c-2a0a33-a50); }
.submit-btn { width: 100%; margin-top: var(--s1); }
.form-trust { margin: 12px 0 0; text-align: center; font-size: .875rem; color: var(--ink-soft); }
.form-note { min-height: 1.4em; margin: var(--s1) 0 0; font-size: .9375rem; font-weight: 600; color: var(--purple); }
.ticket-form-stub {
  writing-mode: vertical-rl;
  display: flex; flex-direction: row; justify-content: space-between; align-items: center;
  padding: var(--s3) 0;
  background: var(--gold); color: var(--plum);
  border-left: 2px dashed var(--c-2a0a33-a50);
  font-weight: 700; font-size: 1.125rem; letter-spacing: .2em; text-transform: uppercase;
}
.stub-no { color: var(--plum); opacity: .75; }

/* ---------- Work with us (off-white) ---------- */
.act-careers { background: var(--paper); }
.careers-grid { display: grid; gap: var(--s5); max-width: 820px; }   /* centred column like the FAQs: heading above the card */
.casting { padding: var(--s5); border-radius: var(--r-card); background: var(--plum); color: var(--on-dark); }
.casting-top { color: var(--on-dark-soft); margin: 0 0 var(--s2); }
.casting-title { font-size: clamp(2rem, 1.5rem + 1.6vw, 2.75rem); line-height: 1.05; color: var(--cream); margin: 0 0 var(--s1); }
.casting-role { font: italic 700 1.25rem/1.3 var(--f-head); color: var(--cream); margin: 0 0 var(--s2); }
.casting-meta {
  display: flex; flex-wrap: wrap; gap: 4px var(--s3);
  margin: 0 0 var(--s3); padding-bottom: var(--s3); border-bottom: 1px solid var(--line-dark);
  font-size: .875rem; font-weight: 600; color: var(--on-dark-soft);
}
.casting .ticks { margin-bottom: var(--s4); }
.casting .ticks li::before { background: var(--cream); }
.casting-actions { display: flex; flex-wrap: wrap; align-items: center; gap: var(--s3); }

/* ---------- Footer ---------- */
.site-footer { background: var(--night); color: var(--on-dark-soft); padding: var(--s8) 0 var(--s4); }
.footer-grid { display: grid; grid-template-columns: minmax(0, 1.4fr) repeat(3, minmax(0, 1fr)); gap: var(--s5); }
.site-footer .brand-logo { height: 64px; }
.footer-about { margin: var(--s2) 0 0; max-width: 30ch; font-size: .9375rem; }
.site-footer h4 { color: var(--cream); margin-bottom: var(--s2); }
.site-footer ul { list-style: none; margin: 0; padding: 0; display: grid; gap: 10px; font-size: .9375rem; }
.site-footer ul a { text-decoration: none; }
.site-footer ul a:hover { color: var(--cream); text-decoration: underline; text-underline-offset: 3px; }
.socials { display: flex; gap: 12px; }
.socials a { display: grid; place-items: center; width: 44px; height: 44px; border-radius: 50%; border: 1px solid var(--line-dark); transition: background-color .2s ease; }
.socials a:hover { background: var(--c-fbf8ef-a10); }
.socials svg { width: 20px; height: 20px; fill: var(--on-dark); }
.footer-bottom {
  display: flex; justify-content: space-between; flex-wrap: wrap; gap: var(--s1);
  margin-top: var(--s6); padding-top: var(--s3); border-top: 1px solid var(--line-dark); font-size: .875rem;
}
.footer-bottom p { margin: 0; }

/* ---------- Floating WhatsApp (desktop/tablet) ---------- */
.wa-float {
  position: fixed; right: var(--s3); bottom: var(--s3); z-index: 150;
  display: flex; align-items: center; gap: var(--s1);
  min-height: 56px; padding: 0 15px;
  border-radius: 999px; background: var(--wa); color: var(--plum);
  text-decoration: none; font-weight: 700;
  box-shadow: 0 8px 20px -8px var(--c-14030f-a45);
  transition: transform .2s ease;
}
.wa-float svg { width: 26px; height: 26px; fill: var(--plum); flex: none; }
.wa-label { max-width: 0; overflow: hidden; white-space: nowrap; transition: max-width .25s ease; }
.wa-float:hover, .wa-float:focus-visible { transform: translateY(-2px); }
.wa-float:hover .wa-label, .wa-float:focus-visible .wa-label { max-width: 140px; }
/* where the button would sit over the footer's last line, keep that line clear of it */
@media (min-width: 641px) and (max-width: 1320px) { .footer-bottom { padding-right: 80px; } }

.mobile-bar { display: none; }
.wide-only { display: inline; }

/* ---------- Light reveal: CSS scroll-driven, content is never hidden by default ----------
   Browsers without scroll-driven animations (or with reduced motion) simply show everything. */
@media (prefers-reduced-motion: no-preference) {
  @supports (animation-timeline: view()) {
    .reveal {
      animation: reveal-up linear both;
      animation-timeline: view(block 0px);   /* 0px: ignore scroll-padding, so phones don't fade a 224px band */
      animation-range: entry 0% entry 120px;
    }
  }
}
@keyframes reveal-up { from { opacity: 0; translate: 0 16px; } to { opacity: 1; translate: 0 0; } }

/* ---------- "Why ChatterBox" tiles + "What a class looks like": light, playful motion ----------
   Hover (mouse) or tap plays a short icon animation (script.js adds .is-playing); the tiles also play
   once, in turn, when they first come into view. The class steps light up in order as the card scrolls in. */
@media (prefers-reduced-motion: no-preference) {
  .gain { transition: transform .25s ease, box-shadow .25s ease; }
  .gain:active { transform: scale(.98); }
  .gain.is-playing .gain-icon { animation: play-pop .7s cubic-bezier(.34, 1.56, .64, 1); }
  .gain.is-playing:nth-child(4) .gain-icon { animation: play-pop .7s cubic-bezier(.34, 1.56, .64, 1), play-glow .7s ease-out; }
  .gain.is-playing:nth-child(4) svg { animation: play-bulb .7s ease-out; }
  .gain.is-playing .star-big { animation: play-twinkle .6s ease; }
  .gain.is-playing .star-small { animation: play-twinkle .5s ease .12s both; }
  .gain.is-playing .dot { animation: play-type .42s ease; }
  .gain.is-playing .dot:nth-of-type(2) { animation-delay: .1s; }
  .gain.is-playing .dot:nth-of-type(3) { animation-delay: .2s; }
  .gain.is-playing .p1 { animation: play-hop .5s ease; }
  .gain.is-playing .p2 { animation: play-hop .5s ease .14s both; }

  .scenes h4 { transition: color .2s ease; }
  .scenes li.is-playing h4 { color: var(--gold); }
  .method .scenes li.is-playing .scene-icon { animation: play-bounce .6s cubic-bezier(.34, 1.56, .64, 1); animation-timeline: auto; animation-range: normal; }

  @media (hover: hover) and (pointer: fine) {
    .gain:hover { transform: translateY(-6px); box-shadow: 0 18px 32px -22px var(--c-2a0a33-a55); }
    .scenes li:hover h4 { color: var(--gold); }
  }

  @supports (animation-timeline: view()) {
    /* the four tiles arrive one after another */
    .gains .gain { animation-name: gain-in; }
    .gains .gain:nth-child(2) { animation-range: entry 30px entry 150px; }
    .gains .gain:nth-child(3) { animation-range: entry 60px entry 180px; }
    .gains .gain:nth-child(4) { animation-range: entry 90px entry 210px; }
    @media (max-width: 980px) {                                       /* 2 x 2: stagger within each row */
      .gains .gain:nth-child(3) { animation-range: entry 0px entry 120px; }
      .gains .gain:nth-child(4) { animation-range: entry 30px entry 150px; }
    }

    /* Scene 1 to 4: each icon lights up, then its line draws, as the card scrolls in */
    .scenes { view-timeline: --scenes block; view-timeline-inset: 0px; }
    .scenes li::before { animation: scene-line linear both; animation-timeline: --scenes; }
    .scene-icon { animation: scene-light linear both; animation-timeline: --scenes; }
    .scenes li:nth-child(1) .scene-icon { animation-range: cover 8% cover 16%; }
    .scenes li:nth-child(1)::before { animation-range: cover 12% cover 24%; }
    .scenes li:nth-child(2) .scene-icon { animation-range: cover 16% cover 24%; }
    .scenes li:nth-child(2)::before { animation-range: cover 20% cover 32%; }
    .scenes li:nth-child(3) .scene-icon { animation-range: cover 24% cover 32%; }
    .scenes li:nth-child(3)::before { animation-range: cover 28% cover 40%; }
    .scenes li:nth-child(4) .scene-icon { animation-range: cover 32% cover 40%; }
    .scenes li:nth-child(4)::before { animation-range: cover 36% cover 48%; }

    /* the class photo settles into its frame */
    .method-photo img { animation: photo-settle linear both; animation-timeline: view(block 0px); animation-range: entry 0% cover 50%; }
  }
}
@keyframes gain-in { from { opacity: 0; translate: 0 28px; scale: .94; } to { opacity: 1; translate: 0 0; scale: 1; } }
@keyframes play-pop { 0% { transform: none; } 30% { transform: scale(1.18) rotate(-8deg); } 60% { transform: scale(.95) rotate(4deg); } 100% { transform: none; } }
@keyframes play-glow {
  0% { background-color: var(--purple); box-shadow: 0 0 0 0 var(--c-f8bf5b-a75); }
  30% { background-color: var(--gold); }
  100% { background-color: var(--purple); box-shadow: 0 0 0 16px var(--c-f8bf5b-a0); }
}
@keyframes play-bulb { 0%, 100% { fill: var(--cream); } 30%, 60% { fill: var(--plum); } }
@keyframes play-twinkle { 0%, 100% { transform: none; } 45% { transform: rotate(40deg) scale(1.3); } }
@keyframes play-type { 0%, 100% { transform: none; } 45% { transform: translateY(-2.5px); } }
@keyframes play-hop { 0%, 100% { transform: none; } 40% { transform: translateY(-3.5px); } 70% { transform: translateY(.5px); } }
@keyframes play-bounce { 0% { scale: 1; rotate: 0deg; } 35% { scale: 1.25; rotate: -10deg; } 65% { scale: .95; rotate: 5deg; } 100% { scale: 1; rotate: 0deg; } }
@keyframes scene-line { from { scale: 0 1; } to { scale: 1 1; } }
@keyframes scene-light { 0% { background-color: var(--c-f4f0a7-a30); scale: .8; } 70% { background-color: var(--gold); scale: 1.12; } 100% { background-color: var(--gold); scale: 1; } }
@keyframes photo-settle { from { scale: 1.12; } to { scale: 1; } }

/* ==========================================================
   Responsive
   ========================================================== */
@media (max-width: 980px) {
  .playbill-grid, .contact-grid, .director { grid-template-columns: minmax(0, 1fr); gap: var(--s5); }
  .gains { grid-template-columns: repeat(2, minmax(0, 1fr)); gap: var(--s2); }
  .cast { grid-template-columns: minmax(0, 1fr); }
  .director-photo { max-width: 280px; }
  .footer-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .board { grid-template-columns: minmax(0, 1fr); gap: 12px; }
}

@media (max-width: 860px) {
  .nav-toggle { display: block; position: relative; z-index: 2; }
  .nav-menu {
    position: fixed; inset: 0; z-index: -1;
    flex-direction: column; align-items: stretch; justify-content: flex-start; gap: 0;
    padding: calc(var(--header-h) + var(--s4)) var(--gutter) calc(var(--s5) + env(safe-area-inset-bottom, 0px));
    background: var(--plum);
    overflow-y: auto;
    visibility: hidden; opacity: 0; transform: translateY(-8px);
    transition: opacity .2s ease, transform .2s ease, visibility 0s linear .2s;
  }
  .nav-menu.open { visibility: visible; opacity: 1; transform: none; transition: opacity .2s ease, transform .2s ease, visibility 0s; }
  .nav-menu li a:not(.ticket-btn) {
    padding: var(--s2) 0; border-bottom: 1px solid var(--line-dark);
    font: 700 1.75rem/1.2 var(--f-head); color: var(--on-dark);
  }
  .nav-menu li a:not(.ticket-btn)::after { display: none; }
  .nav-menu .ticket-btn { width: 100%; min-height: var(--control-h); margin-top: var(--s4); font-size: 1rem; }
  html.menu-open { overflow: hidden; }
}

@media (max-width: 640px) {
  :root { --section-y: var(--s5); --header-h: 64px; --gutter: 16px; }
  body { font-size: 16px; }
  .brand-logo { height: 40px; }
  .act-head { margin-bottom: var(--s4); }

  /* Hero: heading and both actions in the first screen */
  .hero { padding: var(--s5) 0 var(--s4); }
  .hero-eyebrow { font-size: .75rem; }
  .hero-sub { font-size: 1.0625rem; margin-bottom: var(--s3); }
  .hero-ctas { flex-direction: column; align-items: stretch; gap: 12px; }
  .hero-trust { font-size: .875rem; gap: var(--s1) var(--s2); }
  .hero-quote { margin-top: var(--s5); padding-top: var(--s3); }
  .hero-quote blockquote { font-size: 1.125rem; }
  .hero-photo { margin-top: var(--s4); }
  .familiar-photo { margin-top: var(--s5); }
  .wide-only { display: none; }

  .playbill-grid { gap: var(--s4); }
  .credits dd { font-size: 1.25rem; }
  .credits dt { font-size: .875rem; }

  /* Benefits 2 x 2 */
  .gain { padding: var(--s2); gap: 4px; }
  .gain-icon { width: 40px; height: 40px; }
  .gain-icon svg { width: 20px; height: 20px; }
  .gain h3 { font-size: 1.125rem; }
  .gain p { font-size: .875rem; }

  .method { margin-top: var(--s6); padding: var(--s4) var(--s2) var(--s4); }
  .scenes { column-gap: var(--s2); row-gap: var(--s5); }
  .scenes h4 { font-size: 1.125rem; }
  .scenes p { font-size: .875rem; }
  .director, .company { margin-top: var(--s6); }

  /* Programmes: swipe row of age tabs, single-column panel */
  .swipe-hint { display: block; margin: var(--s1) 0 0; font-size: .875rem; font-weight: 700; color: var(--cream); }
  .tabs {
    display: flex; gap: 12px; overflow-x: auto; scroll-snap-type: x mandatory; scrollbar-width: none;
    margin: 0 calc(-1 * var(--gutter)) var(--s3); padding: 4px var(--gutter); scroll-padding-inline: var(--gutter);
  }
  .tabs::-webkit-scrollbar { display: none; }
  .tabs button { flex: 0 0 44%; scroll-snap-align: start; min-height: 80px; }
  .tab-age { font-size: 1.5rem; }
  .tab-name { font-size: .75rem; letter-spacing: .06em; }
  .panel-body { padding: var(--s3); }
  .panel:has(.panel-photo[data-needs-content]) .panel-body {
    grid-template-columns: minmax(0, 1fr);
    grid-template-areas: "age" "title" "intro" "list" "cta";
  }
  .panel:has(.panel-photo[data-needs-content]) .ticks { padding-left: 0; border-left: 0; margin-bottom: var(--s3); }
  .panel .ticket-btn { justify-self: stretch; }
  .panel { grid-template-columns: minmax(0, 1fr); }
  .panel-photo { min-height: 200px; }
  .boxoffice { margin-top: var(--s5); }
  .boxoffice-title { font-size: 1.25rem; }
  .board-row { padding: var(--s2); }

  .faq summary { font-size: 1rem; }
  .faq-body p { padding-right: 0; }

  /* Ticket form: stub stays vertical, like desktop */
  .ticket-form { --stub: 48px; }
  .ticket-form-main { padding: var(--s3) var(--s2); }
  .field-row { grid-template-columns: minmax(0, 1fr); gap: 0; }
  .ticket-form-stub { font-size: .9375rem; letter-spacing: .16em; }
  .contact-list div { grid-template-columns: 72px minmax(0, 1fr); }

  .casting { padding: var(--s3); }
  .footer-grid { grid-template-columns: minmax(0, 1fr); gap: var(--s4); }
  .site-footer { padding-top: var(--s6); }

  /* Bottom action bar replaces the floating WhatsApp button on phones */
  .wa-float { display: none; }
  .mobile-bar {
    position: fixed; left: 0; right: 0; bottom: 0; z-index: 160;
    display: grid; grid-template-columns: minmax(0, 1fr) auto; gap: var(--s1);
    padding: 10px max(var(--gutter), env(safe-area-inset-right, 0px)) calc(10px + env(safe-area-inset-bottom, 0px)) max(var(--gutter), env(safe-area-inset-left, 0px));
    background: var(--plum); border-top: 1px solid var(--line-dark);
    transform: translateY(110%); transition: transform .25s ease;
  }
  .mobile-bar.show { transform: none; }
  html.menu-open .mobile-bar, html.typing .mobile-bar { transform: translateY(110%); }
  .mb-trial { padding: 0 var(--s2); }
  .mb-wa { background: transparent; color: var(--on-dark); border-color: var(--c-fbf8ef-a50); padding: 0 var(--s2); }
  .mb-wa svg { width: 20px; height: 20px; fill: var(--wa); flex: none; }
  /* footer and focused fields can always scroll clear of the bar */
  .site-footer { padding-bottom: calc(var(--s4) + 68px + env(safe-area-inset-bottom, 0px)); }
  html { scroll-padding-bottom: calc(84px + env(safe-area-inset-bottom, 0px)); }
}

@media (max-width: 360px) {
  .tabs button { flex-basis: 52%; }
  .hero-trust { gap: 4px var(--s2); }
}

@media (max-width: 359px) {
  .mb-wa { width: var(--control-h); padding: 0; gap: 0; font-size: 0; }   /* icon only; aria-label names it */
}

/* ---------- Without JavaScript: every programme is readable; controls that need the script are hidden ---------- */
@media (scripting: none) {
  .tabs, .swipe-hint, .nav-toggle, .mobile-bar, .wa-float, .js-whatsapp { display: none !important; }
  .panel[hidden] { display: grid; }
  .panel + .panel { margin-top: var(--s3); }
  .site-footer { padding-bottom: var(--s4); }
}

@media (prefers-reduced-motion: reduce) {
  html { scroll-behavior: auto; }
  *, *::before, *::after { animation-duration: .01ms !important; animation-iteration-count: 1 !important; transition-duration: .01ms !important; }
  .ribbon-track { animation: none !important; }
}

/* ---------- Stage-arch photo frames (v75): arched top like a stage opening, gold frame, thick gold stage floor ---------- */
.hero-photo img, .familiar-photo img, .method-photo picture {
  border: 4px solid var(--gold); border-bottom-width: 12px;
  border-radius: 50% 50% var(--r-control) var(--r-control) / 22% 22% var(--r-control) var(--r-control);
}
.familiar-photo img { border-radius: 50% 50% var(--r-control) var(--r-control) / 18% 18% var(--r-control) var(--r-control); }
.method-photo img { border-radius: 0; }

/* ---------- Shorter page (v76): tighter rhythm, compact blocks, FAQ shows 4 then "More questions" ---------- */
:root { --section-y: var(--s6); }
.act-head { margin-bottom: var(--s4); }
.method { margin-top: var(--s6); }
.hero { padding-bottom: var(--s5); }
.hero-quote { margin-top: var(--s5); padding-top: var(--s3); }
.credits { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); column-gap: var(--s3); }
.credits div { padding: 12px 0; }
.pains { gap: 8px; margin-block: var(--s3); }
.pains li { padding: 10px var(--s2); }
.faq summary { min-height: 48px; padding: 12px 0; }
.faq-more > summary {
  list-style: none; cursor: pointer; display: inline-flex; align-items: center; gap: var(--s1);
  margin-top: var(--s3); min-height: 44px; padding: 0 var(--s3); border-radius: var(--r-control);
  border: 2px solid var(--purple); color: var(--purple); font-weight: 700;
}
.faq-more > summary::-webkit-details-marker { display: none; }
.faq-more[open] > summary { display: none; }
@media (max-width: 640px) {
  :root { --section-y: var(--s4); }
  .act-head { margin-bottom: var(--s3); }
  .hero { padding-top: var(--s4); }
  .hero-photo { margin-top: var(--s3); }
  .familiar-photo { margin-top: var(--s4); }
  .familiar-photo img { aspect-ratio: 16 / 10; }
  .method { margin-top: var(--s5); }
  .scenes { row-gap: var(--s4); }
  .gains { gap: 12px; }
  .faq summary { font-size: .9375rem; }
  .credits dd { font-size: 1.125rem; }
}

/* ---------- Logo-led hero (v77): big logo in front, the group photo as a faint background ---------- */
.hero { text-align: center; }
.hero-inner { position: static; display: block; }
.hero-copy { position: relative; z-index: 1; }
.hero-logo { display: block; width: min(440px, 80%); height: auto; margin: 0 auto var(--s3); filter: drop-shadow(0 14px 24px var(--c-14030f-a35)); }
.hero-title, .hero-sub { margin-left: auto; margin-right: auto; }
.hero-ctas, .hero-trust { justify-content: center; }
.hero-photo { position: absolute; inset: 0; z-index: 0; max-width: none; margin: 0; pointer-events: none; }
.hero-photo picture { position: absolute; inset: 0; border: 0; }
.hero-photo img {
  width: 100%; height: 100%; aspect-ratio: auto; object-fit: cover; object-position: 50% 40%;
  border: 0; border-radius: 0; box-shadow: none; opacity: .16; mix-blend-mode: luminosity;
}
.hero-photo .ai-note { position: absolute; right: var(--gutter); bottom: var(--s2); margin: 0; font-size: .75rem; }
@media (min-width: 981px) {
  .hero { text-align: center; padding-top: var(--s6); }
  .hero-inner { display: block; }
  .hero-title, .hero-sub { margin-left: auto; }
  .hero-ctas, .hero-trust { justify-content: center; }
  .hero-photo { margin: 0; }
}
@media (max-width: 640px) {
  .hero-logo { width: 240px; margin-bottom: var(--s2); }
  .hero { padding-bottom: var(--s6); }
  .hero-photo { margin: 0; }
  .hero-photo .ai-note { right: 0; left: 0; text-align: center; bottom: var(--s1); }
}
/* facts: value above its label so two columns never collide */
.credits div { display: flex; flex-direction: column-reverse; justify-content: flex-end; gap: 2px; }
.credits dd { text-align: left; white-space: normal; }

/* ---------- Bento (v80): Trinity facts, "shy" card, puppet photo, benefits and the class card in one grid ---------- */
.bento { display: grid; grid-template-columns: minmax(0, 1fr); gap: var(--s3); }
.bento-card { border-radius: var(--r-card); padding: var(--s4); }
.bento-trinity { border: 1px solid var(--line-light); }
.bento-trinity .display { font-size: clamp(1.5rem, 1.2rem + 1vw, 2rem); }
.bento-trinity > p { color: var(--ink-soft); margin: 0 0 var(--s3); }
.bento .familiar { padding: var(--s4); text-align: left; background: var(--plum); color: var(--on-dark); }
.bento .familiar .display { font-size: clamp(1.5rem, 1.2rem + 1vw, 2rem); text-align: left; }
.bento .familiar .pains, .bento .familiar-answer { margin-left: 0; margin-right: 0; max-width: none; }
.bento .familiar .ticket-btn { margin: 0; }
.bento .bento-photo { margin: 0; max-width: none; }
.bento .bento-gains { margin: 0; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: var(--s3); }
.bento .bento-method { margin: 0; }
@media (min-width: 641px) and (max-width: 980px) {
  .bento { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .bento-trinity, .bento-gains, .bento-method { grid-column: 1 / -1; }
  .bento .bento-photo img { height: 100%; aspect-ratio: auto; }
  .bento .bento-photo picture { height: calc(100% - 2.5rem); }
}
@media (min-width: 981px) {
  .bento { grid-template-columns: repeat(12, minmax(0, 1fr)); }
  .bento-trinity { grid-column: 1 / 8; grid-row: 1; }
  .bento .familiar { grid-column: 8 / 13; grid-row: 1 / 3; display: flex; flex-direction: column; justify-content: center; }
  .bento .bento-gains { grid-column: 1 / 5; grid-row: 2; }
  .bento .bento-photo { grid-column: 5 / 8; grid-row: 2; display: flex; flex-direction: column; }
  .bento .bento-photo picture { flex: 1; min-height: 0; }
  .bento .bento-photo img { height: 100%; aspect-ratio: auto; object-position: 50% 45%; }
  .bento .bento-method { grid-column: 1 / -1; grid-row: 3; }
  .bento .gain { padding: var(--s2) var(--s3); }
}
@media (max-width: 640px) {
  .bento { gap: var(--s2); }
  .bento-card, .bento .familiar { padding: var(--s3); }
  .bento .bento-gains { gap: 12px; }
}

/* ---------- Type fixes (v80): Fraunces only for large headings; small titles and numbers in Manrope ---------- */
.gain h3, .scenes h4, .board-name, .ticket-head span:first-child, .cast-name {
  font-family: var(--f-body); font-weight: 800; letter-spacing: -.01em; line-height: 1.25;
}
.gain h3 { font-size: 1.125rem; }
.scenes h4 { font-size: 1.0625rem; }
.board-name { font-size: 1.0625rem; }
.ticket-head span:first-child { font-size: 1.125rem; }
.credits dd, .tab-age { font-family: var(--f-body); font-weight: 800; letter-spacing: -.02em; }
.credits dd { font-size: 1.375rem; }
.tab-age { font-size: 1.5rem; }
.cb-name { font-style: normal; }
.casting-role { font: 700 1.0625rem/1.4 var(--f-body); }
@media (max-width: 640px) {
  .gain h3 { font-size: 1rem; }
  .credits dd { font-size: 1.125rem; }
  .tab-age { font-size: 1.25rem; }
}

/* ---------- Mascot (v82): the "C" from the logo ---------- */
.mascot { display: block; height: auto; }
.mascot-shy { width: 96px; margin: 0 0 var(--s2); rotate: -6deg; }
.faq-head { position: relative; }
.mascot-badge {
  position: absolute; right: 0; top: -12px; display: grid; place-items: center;
  width: 76px; height: 76px; border-radius: 50%; background: var(--plum); rotate: 8deg;
  box-shadow: 0 10px 24px -14px var(--c-14030f-a60);
}
.mascot-faq { width: 52px; }
.form-note.is-sent { display: flex; align-items: center; justify-content: center; gap: var(--s1); }
.form-note.is-sent::before {
  content: ""; flex: none; width: 36px; height: 39px;
  background: url("images/mascot.webp") center / contain no-repeat;
}
@media (prefers-reduced-motion: no-preference) {
  .mascot-shy { transition: rotate .3s ease, scale .3s ease; }
  .bento .familiar:hover .mascot-shy { rotate: 4deg; scale: 1.06; }
  .form-note.is-sent::before { animation: play-bounce .6s cubic-bezier(.34, 1.56, .64, 1); }
}
@media (max-width: 640px) {
  .mascot-shy { width: 72px; }
  .mascot-badge { width: 60px; height: 60px; top: -6px; }
  .mascot-faq { width: 40px; }
}

/* ==========================================================
   Laptop layout (v84) — only at 981px and wider; phones/tablets unchanged
   ========================================================== */
@media (min-width: 981px) {
  /* Hero: logo left, words and actions right */
  .hero { padding: var(--s8) 0; text-align: left; }
  .hero-copy {
    display: grid; grid-template-columns: minmax(0, 5fr) minmax(0, 7fr);
    column-gap: var(--s8); align-items: center; align-content: center;
  }
  .hero-logo { grid-column: 1; grid-row: 1 / span 5; width: 100%; max-width: 480px; margin: 0; }
  .hero-copy > :not(.hero-logo) { grid-column: 2; }
  .hero-title, .hero-sub { margin-left: 0; margin-right: 0; text-align: left; }
  .hero-ctas, .hero-trust { justify-content: flex-start; }

  /* Why ChatterBox bento */
  .bento { grid-template-columns: repeat(12, minmax(0, 1fr)); gap: var(--s3); }
  .bento-trinity {
    grid-column: 1 / -1; grid-row: 1;
    display: grid; grid-template-columns: minmax(0, 5fr) minmax(0, 7fr); column-gap: var(--s6); align-items: center;
  }
  .bento-trinity > :not(.credits) { grid-column: 1; }
  .bento-trinity > p { margin: 0; }
  .bento-trinity .credits { grid-column: 2; grid-row: 1 / span 3; grid-template-columns: repeat(3, minmax(0, 1fr)); margin: 0; }
  .bento .bento-gains { grid-column: 1 / -1; grid-row: 2; grid-template-columns: repeat(4, minmax(0, 1fr)); }
  .bento .familiar {
    grid-column: 1 / 9; grid-row: 3;
    display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1.25fr); column-gap: var(--s5);
    align-content: center; padding: var(--s5);
  }
  .bento .familiar .mascot-shy { grid-column: 1; grid-row: 1; align-self: end; }
  .bento .familiar .display { grid-column: 1; grid-row: 2 / span 2; align-self: start; margin: 0; }
  .bento .familiar .pains { grid-column: 2; grid-row: 1 / span 1; margin: 0 0 var(--s2); }
  .bento .familiar .familiar-answer { grid-column: 2; grid-row: 2; margin: 0 0 var(--s3); }
  .bento .familiar .ticket-btn { grid-column: 2; grid-row: 3; justify-self: start; }
  .bento .bento-photo { grid-column: 9 / -1; grid-row: 3; }
  .bento .bento-method { grid-column: 1 / -1; grid-row: 4; }

  /* FAQ: two columns of questions across the full width */
  .faq-grid { max-width: none; }
  .faq-list {
    display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); grid-template-rows: repeat(4, auto);
    grid-auto-flow: column; column-gap: var(--s6); border-top: 0;
  }
  .faq { border-top: 1px solid var(--line-light); border-bottom: 0; }
  .faq:nth-child(4), .faq:nth-child(8) { border-bottom: 1px solid var(--line-light); }

  /* Casting Call: full-width card in two columns */
  .careers-grid { max-width: none; }
  .casting { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1.3fr); column-gap: var(--s8); padding: var(--s6); }
  .casting > :not(.ticks):not(.casting-actions) { grid-column: 1; }
  .casting .ticks { grid-column: 2; grid-row: 1 / span 3; align-self: center; margin: 0; }
  .casting-actions { grid-column: 2; grid-row: 4; }
  .casting-meta { margin-bottom: 0; border-bottom: 0; padding-bottom: 0; }
}
/* v85: laptop bento breathes like the other sections */
@media (min-width: 981px) {
  .bento { row-gap: var(--s6); column-gap: var(--s4); }
  .bento .bento-gains { gap: var(--s4); }
  .bento-trinity { padding: var(--s5) var(--s6); }
  .bento .familiar { padding: var(--s6); }
  .bento .bento-method { padding: var(--s6); }
  .act-about .act-head { margin-bottom: var(--s6); }
}

/* ---------- Real studio photos (v86) ---------- */
.hero-photo img { opacity: .2; object-position: 55% 30%; }      /* real acting photo behind the logo; faces at the top kept */
.method-photo img { object-position: 50% 40%; }
.bento-studio { display: grid; gap: var(--s3); }
.bento-studio figure { margin: 0; }
.bento-studio img { width: 100%; height: 100%; object-fit: cover; border-radius: var(--r-card); }
.studio-wide img { aspect-ratio: 1400 / 483; object-position: 50% 45%; }
.studio-close img { aspect-ratio: 1400 / 826; object-position: 50% 60%; }
@media (min-width: 981px) {
  .bento-studio { grid-column: 1 / -1; grid-row: 5; grid-template-columns: minmax(0, 2fr) minmax(0, 1fr); column-gap: var(--s4); align-items: stretch; }
  .studio-close img { aspect-ratio: auto; height: 100%; }
}
@media (max-width: 640px) {
  .bento-studio { gap: var(--s2); }
  .studio-wide img { aspect-ratio: 16 / 7; }
}

/* v87: lighter hero photo (no blend mode, no pointer glow) and faces aligned at the top */
.hero-photo img { mix-blend-mode: normal; filter: saturate(.35); opacity: .22; object-position: 58% 6%; }
.hero-photo { contain: paint; }
@media (max-width: 980px) { .hero-photo img { object-position: 62% 8%; } }
@media (min-width: 981px) { .bento .bento-photo img { object-position: 60% 50%; } }
/* v88: the studio strip now holds one photo, so it spans the full width on laptops */
@media (min-width: 981px) { .bento-studio { grid-template-columns: minmax(0, 1fr); } }
/* v89: edited real photos */
.hero-photo img { object-position: 50% 35%; }
.studio-wide img { aspect-ratio: 1400 / 613; object-position: 50% 50%; }
.bento .bento-photo img, .familiar-photo img { object-position: 72% 30%; }
.method-photo img { object-position: 50% 45%; }
@media (max-width: 640px) { .studio-wide img { aspect-ratio: 16 / 9; } }
/* v90 */
.studio-wide img { aspect-ratio: 1400 / 793; object-position: 50% 50%; }
.method-photo img { object-position: 50% 55%; }
@media (max-width: 640px) { .studio-wide img { aspect-ratio: 1400 / 793; } }
/* v91 */
.studio-wide img, .studio-wide img { aspect-ratio: 1400 / 933; object-position: 50% 50%; }
@media (min-width: 981px) { .studio-wide img { aspect-ratio: 16 / 8; object-position: 50% 62%; } }
.method-photo img { object-position: 55% 30%; }

/* v93: laptop only — the faint class photo is a band across the top of the hero, so the logo and text never cover the people */
@media (min-width: 981px) {
  .hero { padding-top: 250px; }
  .hero-photo { inset: 0 0 auto 0; height: 360px; }
  .hero-photo img {
    opacity: .45; filter: saturate(.55); object-position: 50% 26%;
    -webkit-mask-image: linear-gradient(to bottom, var(--c-000000) 45%, transparent 100%);
            mask-image: linear-gradient(to bottom, var(--c-000000) 45%, transparent 100%);
  }
  .hero-photo .ai-note { display: none; }
}
/* v94: phones/tablets get the same top band, sized to the photo so every face shows */
@media (max-width: 980px) {
  .hero-photo { inset: 0 0 auto 0; height: auto; aspect-ratio: 16 / 9; max-height: 420px; }
  .hero-photo img {
    opacity: .5; filter: saturate(.55); object-position: 50% 30%;
    -webkit-mask-image: linear-gradient(to bottom, var(--c-000000) 55%, transparent 100%);
            mask-image: linear-gradient(to bottom, var(--c-000000) 55%, transparent 100%);
  }
  .hero-photo .ai-note { display: none; }
  .hero { padding-top: min(calc(56.25vw - 24px), 380px); }
}
@media (max-width: 640px) { .hero-logo { width: 200px; margin-bottom: var(--s2); } }

/* ==========================================================
   Stage curtains (v95): a one-time reveal over the hero background.
   Default state is OPEN — without script (or after it) only two narrow
   curtain edges frame the photo. Logo, text and buttons sit above them.
   ========================================================== */
.hero-copy { z-index: 2; }
.stage-curtains {
  --edge: 30px;                                   /* how much curtain stays visible when open */
  --curtain: color-mix(in srgb, var(--plum) 72%, var(--purple));
  position: absolute; inset: 0; z-index: 1;
  pointer-events: none; overflow: hidden;
}
.curtain-rail {
  position: absolute; top: 0; left: 0; right: 0; height: 6px; z-index: 2;
  background: var(--gold); box-shadow: 0 2px 6px var(--c-14030f-a35);
}
.curtain {
  position: absolute; top: 0; bottom: 0; width: 50.5%;
  background: var(--curtain);
  transition: none;
}
.curtain-left  { left: 0;  transform: translateX(calc(-100% + var(--edge))); box-shadow: 6px 0 18px -8px var(--c-14030f-a70); }
.curtain-right { right: 0; transform: translateX(calc(100% - var(--edge)));  box-shadow: -6px 0 18px -8px var(--c-14030f-a70); }
/* clean fold shapes: soft darker vertical bands, bunched toward the outer edge */
.curtain-folds {
  position: absolute; inset: 0;
  background: repeating-linear-gradient(90deg,
    var(--c-14030f-a0) 0 22px, var(--c-14030f-a28) 22px 30px, var(--c-14030f-a0) 30px 46px);
}
.curtain-left .curtain-folds  { transform-origin: left center;  transform: scaleX(.55); }
.curtain-right .curtain-folds { transform-origin: right center; transform: scaleX(.55); }
.curtain-left::after, .curtain-right::after {      /* the leading edge reads as a hem */
  content: ""; position: absolute; top: 0; bottom: 0; width: 4px; background: var(--c-f8bf5b-a55);
}
.curtain-left::after { right: 0; }
.curtain-right::after { left: 0; }

/* the reveal: gather together over the background, hold, then part */
.stage-curtains.is-playing .curtain-left  { animation: curtain-left 1.9s cubic-bezier(.22, .61, .36, 1) both; }
.stage-curtains.is-playing .curtain-right { animation: curtain-right 1.9s cubic-bezier(.22, .61, .36, 1) both; }
.stage-curtains.is-playing .curtain-folds { animation: curtain-folds 1.9s cubic-bezier(.22, .61, .36, 1) both; }
@keyframes curtain-left {
  0% { transform: translateX(calc(-100% + var(--edge))); }
  14%, 24% { transform: translateX(0); }
  100% { transform: translateX(calc(-100% + var(--edge))); }
}
@keyframes curtain-right {
  0% { transform: translateX(calc(100% - var(--edge))); }
  14%, 24% { transform: translateX(0); }
  100% { transform: translateX(calc(100% - var(--edge))); }
}
@keyframes curtain-folds {                         /* folds spread when closed, compress as they gather to the side */
  0% { transform: scaleX(.55); }
  14%, 24% { transform: scaleX(1); }
  100% { transform: scaleX(.55); }
}

.curtain-skip {
  position: absolute; right: var(--gutter); bottom: var(--s2); z-index: 3;
  min-height: 36px; padding: 0 var(--s2); border-radius: 999px;
  border: 1px solid var(--c-fbf8ef-a50); background: var(--c-2a0a33-a70); color: var(--on-dark);
  font: 600 .8125rem/1 var(--f-body); cursor: pointer;
}
.curtain-skip:hover { background: var(--plum); }
.curtain-skip[hidden] { display: none; }

@media (max-width: 640px) {
  .stage-curtains { --edge: 12px; }
  .curtain-folds { background: repeating-linear-gradient(90deg,
    var(--c-14030f-a0) 0 26px, var(--c-14030f-a26) 26px 32px, var(--c-14030f-a0) 32px 52px); }
  .curtain-rail { height: 4px; }
}
@media (prefers-reduced-motion: reduce) {
  .stage-curtains.is-playing .curtain-left,
  .stage-curtains.is-playing .curtain-right,
  .stage-curtains.is-playing .curtain-folds { animation: none !important; }
  .curtain-skip { display: none !important; }
}
/* v95 tune: clearer folds (soft highlight + shadow per fold), slightly more purple cloth */
.stage-curtains { --curtain: color-mix(in srgb, var(--plum) 55%, var(--purple)); }
.curtain-folds {
  background: repeating-linear-gradient(90deg,
    var(--c-fbf8ef-a8) 0 8px, var(--c-fbf8ef-a0) 8px 20px,
    var(--c-14030f-a38) 20px 30px, var(--c-14030f-a0) 30px 44px);
}
@media (max-width: 640px) {
  .curtain-folds { background: repeating-linear-gradient(90deg,
    var(--c-fbf8ef-a8) 0 8px, var(--c-fbf8ef-a0) 8px 24px,
    var(--c-14030f-a36) 24px 34px, var(--c-14030f-a0) 34px 52px); }
}
/* skip control sits in the top-right of the stage, clear of the text and trust line */
.curtain-skip { top: var(--s2); bottom: auto; right: calc(var(--gutter) + 20px); }

/* ==========================================================
   v96 hero polish
   ========================================================== */
/* Curtains: a few broad, soft folds (not blinds), swept hems, no gold edge lines */
.curtain-folds {
  background: repeating-linear-gradient(90deg,
    var(--c-14030f-a34) 0, var(--c-14030f-a0) 30px,
    var(--c-fbf8ef-a9) 52px, var(--c-14030f-a0) 74px,
    var(--c-14030f-a34) 104px);
}
.curtain-left::after, .curtain-right::after { content: none; }
.curtain-left  { border-bottom-right-radius: 0 0 72px 0; border-radius: 0 0 72px 0 / 0 0 160px 0; }
.curtain-right { border-radius: 0 0 0 72px / 0 0 0 160px; }

/* Photo: the whole stage, lightly tinted, so opening the curtains reveals the room */
@media (min-width: 981px) {
  .hero-photo { inset: 0; height: auto; }
  .hero-photo img {
    opacity: 1; filter: saturate(.9); object-position: 50% 22%;
    -webkit-mask-image: none; mask-image: none;
  }
  .hero-photo::after {
    content: ""; position: absolute; inset: 0;
    background: linear-gradient(to bottom,
      var(--c-4a2a85-a18) 0%, var(--c-4a2a85-a32) 30%,
      var(--c-3a1a64-a72) 50%, var(--c-2a0a33-a84) 100%);
  }
  .hero-logo { max-width: 370px; }           /* ~23% smaller, so it no longer competes with the headline */
  .hero { padding-top: 260px; }
}

/* Phones/tablets: lighter tint, smaller logo, tighter gaps so both buttons sit well inside the first screen */
@media (max-width: 980px) {
  .hero-photo img { opacity: .9; filter: saturate(.9);
    -webkit-mask-image: linear-gradient(to bottom, var(--c-000000) 62%, transparent 100%);
            mask-image: linear-gradient(to bottom, var(--c-000000) 62%, transparent 100%); }
  .hero-photo::after {
    content: ""; position: absolute; inset: 0;
    background: linear-gradient(to bottom, var(--c-4a2a85-a15) 0%, var(--c-4a2a85-a35) 60%, var(--c-4a2a85-a0) 100%);
  }
}
@media (max-width: 640px) {
  .curtain-folds { background: repeating-linear-gradient(90deg,
    var(--c-14030f-a32) 0, var(--c-14030f-a0) 22px, var(--c-fbf8ef-a8) 38px, var(--c-14030f-a0) 54px, var(--c-14030f-a32) 76px); }
  .curtain-left  { border-radius: 0 0 40px 0 / 0 0 100px 0; }
  .curtain-right { border-radius: 0 0 0 40px / 0 0 0 100px; }
  .hero { padding-top: min(calc(56.25vw - 64px), 300px); padding-bottom: var(--s4); }
  .hero-logo { width: 156px; margin-bottom: 12px; }
  .hero-eyebrow { margin-bottom: var(--s1); }
  .hero-title { margin-bottom: var(--s1); }
  .hero-sub { margin-bottom: var(--s2); font-size: 1rem; }
  .hero-ctas { gap: 10px; }
  .hero-trust { margin-top: var(--s2); }
}

/* ==========================================================
   v97: client copy — hero badge, About sub-blocks, contact locations
   ========================================================== */
.hero-sub { max-width: 640px; font-size: 1.0625rem; line-height: 1.5; }
.hero-badge {                                     /* small pill, eyebrow lettering */
  display: inline-block; margin: 0 0 var(--s3); padding: 6px 14px;
  border: 1px solid var(--c-f4f0a7-a45); border-radius: 999px;
  font: 700 .75rem/1.3 var(--f-body); letter-spacing: .06em; text-transform: uppercase; color: var(--cream);
  background: var(--c-2a0a33-a35);
}
.about-sub { color: var(--purple); margin: var(--s4) 0 var(--s1); }
.act-about .act-head .act-lede + .act-lede { margin-top: 0; }
.bento-lede { margin: 0; max-width: 62ch; }
.about-more { display: grid; grid-template-columns: minmax(0, 1fr); gap: var(--s3); }
.about-card { border: 1px solid var(--line-light); background: var(--paper); }
.about-card .display-sm { color: var(--purple); margin: 0 0 var(--s1); }
.about-card p { color: var(--ink-soft); margin: 0 0 var(--s1); }
.about-card p:last-child { margin-bottom: 0; }
.about-chips { list-style: none; margin: var(--s1) 0 var(--s2); padding: 0; display: flex; flex-wrap: wrap; gap: var(--s1); }
.about-chips li {
  padding: 6px 12px; border-radius: 999px; background: var(--cream); color: var(--plum);
  font-size: .875rem; font-weight: 600; line-height: 1.3;
}
.about-closing { margin: var(--s6) auto 0; text-align: center; font: 700 1.125rem/1.4 var(--f-body); color: var(--purple); max-width: 40ch; }
.contact-locations { margin: var(--s2) 0 0; font-weight: 700; color: var(--cream); }
@media (min-width: 981px) {
  .about-more { grid-template-columns: repeat(2, minmax(0, 1fr)); gap: var(--s4); }
  .about-card-wide { grid-column: 1 / -1; }
  .bento .familiar { grid-row: 2; }
  .bento .bento-photo { grid-row: 2; }
  .bento-lede { grid-column: 1 / -1; grid-row: 3; }
  .bento .bento-gains { grid-row: 4; }
  .about-more { grid-column: 1 / -1; grid-row: 5; }
  .bento .bento-method { grid-row: 6; }
  .bento-studio { grid-row: 7; }
}
@media (max-width: 640px) {
  .about-more { gap: var(--s2); }
  .about-card { padding: var(--s3); }
  .about-sub { margin-top: var(--s3); }
  .about-closing { margin-top: var(--s4); font-size: 1rem; }
}
/* v97 hero fit: same words, smaller type and tighter gaps so both buttons stay above the fold */
@media (min-width: 981px) {
  .hero { padding-top: 210px; }
  .hero-sub { font-size: 1rem; line-height: 1.45; margin-bottom: var(--s2); }
  .hero-badge { margin-bottom: var(--s2); }
}
@media (max-width: 640px) {
  .hero { padding-top: min(calc(56.25vw - 100px), 260px); }
  .hero-eyebrow { font-size: .6875rem; letter-spacing: .06em; }
  .hero-sub { font-size: .875rem; line-height: 1.4; margin-bottom: 10px; }
  .hero-badge { font-size: .625rem; letter-spacing: .03em; padding: 5px 10px; margin-bottom: 12px; }
  .hero-ctas .ticket-btn, .hero-ctas .btn-outline { min-height: 44px; }
}
.hero-badge { width: fit-content; justify-self: start; }
@media (max-width: 980px) { .hero-badge { justify-self: center; margin-left: auto; margin-right: auto; display: block; } }
/* ==========================================================
   v101: phone layout pass — same words, better arrangement
   ========================================================== */
/* Hero eyebrow and badge break at their natural joins instead of leaving one word alone */
@media (max-width: 640px) {
  .eb-sep, .badge-sep { display: none; }
  .eb-places, .badge-grades { display: block; }
  .hero-badge { border-radius: 14px; padding: 6px 14px; text-align: center; }
  .hero-badge .badge-grades { margin-top: 1px; opacity: .85; }
  /* Two reassurances side by side, tick above each */
  .hero-trust {
    display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: var(--s1);
    max-width: 300px; margin-left: auto; margin-right: auto; font-size: .8125rem; line-height: 1.25;
  }
  .hero-trust li { flex-direction: column; justify-content: flex-start; gap: 4px; text-align: center; }
}
/* About sub-blocks on phones and tablets: a gold stage rail with a lamp per block (.lay-rail) */
@media (max-width: 980px) {
  /* Shared: "Our vision" becomes a spotlit stage panel */
  .about-more .about-card-wide {
    position: relative; overflow: hidden; border: 0; color: var(--cream);
    background: radial-gradient(ellipse 90% 70% at 50% -10%, var(--c-f8bf5b-a32), transparent 65%), var(--plum);
    padding: var(--s4) var(--s3); text-align: center;
  }
  .about-more .about-card-wide .display-sm { color: var(--gold); }
  .about-more .about-card-wide p { color: var(--c-f4f0a7-a92); font-size: 1.0625rem; line-height: 1.55; }
  .about-more .about-card-wide::after {               /* stage floor */
    content: ""; position: absolute; left: 12%; right: 12%; bottom: 14px; height: 2px; border-radius: 2px;
    background: linear-gradient(90deg, transparent, var(--gold), transparent); opacity: .7;
  }

  /* Stage rail: a gold rail with a lamp beside each block */
  .about-more.lay-rail { gap: 0; position: relative; padding-left: 28px; }
  .lay-rail::before { content: ""; position: absolute; left: 7px; top: 14px; bottom: 120px; width: 2px; background: linear-gradient(var(--gold), var(--c-f8bf5b-a25)); }
  .lay-rail .about-card:not(.about-card-wide) { position: relative; border: 0; background: none; padding: 0 0 var(--s4); }
  .lay-rail .about-card:not(.about-card-wide)::before {
    content: ""; position: absolute; left: -28px; top: 6px; width: 16px; height: 16px; border-radius: 50%;
    background: var(--gold); box-shadow: 0 0 0 4px var(--paper), 0 0 14px 4px var(--c-f8bf5b-a55);
  }
  .lay-rail .about-card-wide { margin-left: -28px; }

}
@media (max-width: 640px) {
  .about-chips { gap: 6px; margin-bottom: var(--s1); }
  .about-chips li { padding: 4px 10px; font-size: .8125rem; }
}
/* v102: founder biography (no portrait) and the CONTACT US details */
.director-bio { grid-template-columns: minmax(0, 1fr); }
.director-bio .director-note { max-width: 72ch; }
.director-bio .director-note .display-sm { margin-bottom: var(--s2); }
.contact-us { padding: var(--s2) 0 0; }
.contact-us-title { margin: 0 0 var(--s1); font: 800 .75rem/1.3 var(--f-body); letter-spacing: .12em; color: var(--on-dark-soft); }
.contact-us p { margin: 0 0 6px; }
.contact-us a { text-decoration: underline; text-decoration-color: var(--c-f4f0a7-a60); text-underline-offset: 3px; font-weight: 700; }
/* ==========================================================
   v103: underline draw, ticket press, contact tap row, ticket tabs, FAQ as script
   ========================================================== */
/* Section headings: short gold rule that draws in once */
h2.display::after {
  content: ""; display: block; width: 64px; height: 3px; margin-top: 14px; border-radius: 2px;
  background: var(--gold); transform-origin: left center;
}
.js h2.display::after { transform: scaleX(0); transition: transform .8s cubic-bezier(.2, .7, .2, 1) .15s; }
.js h2.display.is-drawn::after { transform: scaleX(1); }
h2.display.ul-center::after { margin-left: auto; margin-right: auto; transform-origin: center; }
@media (prefers-reduced-motion: reduce) { .js h2.display::after { transition: none; } }

/* Book buttons: press, tilt and spring back like a ticket being torn */
@keyframes ticket-press {
  0% { transform: none; }
  35% { transform: translateY(2px) scale(.95) rotate(-1.5deg); }
  70% { transform: translateY(-1px) scale(1.02) rotate(.5deg); }
  100% { transform: none; }
}
@keyframes stub-tear { 0%, 100% { transform: none; } 45% { transform: translateX(5px) rotate(9deg); } }
.ticket-btn.is-pressed, .mb-trial.is-pressed { animation: ticket-press .42s cubic-bezier(.3, .7, .3, 1); }
.ticket-btn.is-pressed .ticket-stub { animation: stub-tear .42s ease; transform-origin: left top; }

/* Contact: tap row of WhatsApp / Call / Email on phones */
.contact-taps { display: none; }
@media (max-width: 640px) {
  .contact-taps { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: var(--s1); margin-top: var(--s2); }
  .contact-us .contact-taps a {
    display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 6px;
    min-height: 68px; border-radius: var(--r-control); border: 1px solid var(--c-f4f0a7-a45);
    background: var(--c-2a0a33-a35); color: var(--cream); text-decoration: none; font-size: .875rem; font-weight: 700;
  }
  .contact-taps a:first-child { background: var(--gold); border-color: var(--gold); color: var(--plum); }
  .contact-taps svg { width: 22px; height: 22px; fill: currentColor; }
}

/* Age tabs as little theatre tickets: side notches and a perforated line */
.tabs button {
  position: relative;
  -webkit-mask: radial-gradient(circle 7px at 0 50%, var(--c-0000) 97%, var(--c-000000)) left / 51% 100% no-repeat,
                radial-gradient(circle 7px at 100% 50%, var(--c-0000) 97%, var(--c-000000)) right / 51% 100% no-repeat;
          mask: radial-gradient(circle 7px at 0 50%, var(--c-0000) 97%, var(--c-000000)) left / 51% 100% no-repeat,
                radial-gradient(circle 7px at 100% 50%, var(--c-0000) 97%, var(--c-000000)) right / 51% 100% no-repeat;
}
.tabs .tab-name { padding-top: 6px; border-top: 1.5px dashed currentColor; border-top-color: color-mix(in srgb, currentColor 45%, transparent); }

/* FAQs styled like a script page */
.faq summary { font-variant-caps: small-caps; font-weight: 800; letter-spacing: .02em; }
.faq-body p { margin-left: 4px; padding-left: var(--s2); border-left: 2px solid var(--gold); margin-bottom: var(--s3); padding-bottom: 0; }
/* ==========================================================
   v104: laptop alignment for About intro + founder, and a motion pass
   ========================================================== */
/* Laptop: heading on the left, words on the right, like a theatre programme spread */
@media (min-width: 981px) {
  .act-about .act-head > div {
    display: grid; grid-template-columns: minmax(0, 5fr) minmax(0, 7fr);
    column-gap: var(--s8); row-gap: var(--s5); align-items: start;
  }
  .act-about .act-head .display { grid-column: 1; grid-row: 2; margin: 0; }
  .act-about .act-head .act-lede { grid-column: 2; grid-row: 1 / 3; align-self: end; margin: 0; max-width: none; }
  .act-about .act-head .about-sub { grid-column: 1; grid-row: 3; margin: 0; }
  .act-about .act-head .act-lede + .act-lede, .act-about .act-head .about-sub + .act-lede { grid-column: 2; grid-row: 3; align-self: start; }

  .director-bio .director-note {
    display: grid; grid-template-columns: minmax(0, 5fr) minmax(0, 7fr); column-gap: var(--s8);
    max-width: none; align-items: start;
  }
  .director-bio .director-note .display-sm { grid-column: 1; grid-row: 1 / span 4; position: sticky; top: calc(var(--header-h) + var(--s4)); margin: 0; }
  .director-bio .director-note .display-sm::after {
    content: ""; display: block; width: 64px; height: 3px; margin-top: 14px; border-radius: 2px; background: var(--gold);
  }
  .director-bio .director-note p { grid-column: 2; }
  .director-bio .director-note p:first-of-type { margin-top: 0; }
  .about-closing { max-width: none; }
}

@media (prefers-reduced-motion: no-preference) {
  /* Hero: the cast takes the stage one by one; waits for the curtain on a first visit */
  @keyframes hero-in { from { opacity: 0; translate: 0 18px; } to { opacity: 1; translate: 0 0; } }
  .hero-copy > * { animation: hero-in .7s cubic-bezier(.2, .7, .2, 1) both; animation-delay: calc(var(--i, 0) * 90ms + 100ms); }
  .stage-curtains.is-playing ~ .hero-inner .hero-copy > * { animation-delay: calc(var(--i, 0) * 90ms + 1100ms); }
  .hero-copy > :nth-child(2) { --i: 1; } .hero-copy > :nth-child(3) { --i: 2; } .hero-copy > :nth-child(4) { --i: 3; }
  .hero-copy > :nth-child(5) { --i: 4; } .hero-copy > :nth-child(6) { --i: 5; } .hero-copy > :nth-child(7) { --i: 6; }

  /* Mobile menu: links step in one after another */
  @media (max-width: 980px) {
    @keyframes menu-in { from { opacity: 0; translate: 0 10px; } to { opacity: 1; translate: 0 0; } }
    .nav-menu.open > li { animation: menu-in .35s ease both; }
    .nav-menu.open > li:nth-child(2) { animation-delay: 50ms; } .nav-menu.open > li:nth-child(3) { animation-delay: 100ms; }
    .nav-menu.open > li:nth-child(4) { animation-delay: 150ms; } .nav-menu.open > li:nth-child(5) { animation-delay: 200ms; }
    .nav-menu.open > li:nth-child(6) { animation-delay: 250ms; } .nav-menu.open > li:nth-child(7) { animation-delay: 300ms; }
  }


  @supports (animation-timeline: view()) {
    /* Stage photos settle gently as they scroll into view */
    .bento .bento-photo img, .studio-wide img { animation: photo-settle linear both; animation-timeline: view(block 0px); animation-range: entry 0% cover 50%; }
    /* Phone stage rail: each lamp switches on as its block arrives */
    @keyframes lamp-on {
      from { background: var(--c-f8bf5b-a25); box-shadow: 0 0 0 4px var(--paper), 0 0 0 0 var(--c-f8bf5b-a0); }
      to { background: var(--gold); box-shadow: 0 0 0 4px var(--paper), 0 0 14px 4px var(--c-f8bf5b-a55); }
    }
    @media (max-width: 980px) {
      .lay-rail .about-card:not(.about-card-wide)::before { animation: lamp-on linear both; animation-timeline: view(block 0px); animation-range: entry 10% cover 35%; }
    }
  }
}
.bento .bento-photo picture, .studio-wide picture { display: block; overflow: clip; border-radius: inherit; }
/* ==========================================================
   v106: theatre motion — marquee bulbs, mascot wave, spotlight sweep, admit stamp,
   scroll progress, on-air light, tab stamp (count-up lives in script.js)
   ========================================================== */
/* Marquee bulbs along the top and bottom of the red "spotlight" banner */
.marquee-cta { position: relative; }
.marquee-cta::before, .marquee-cta::after {
  content: ""; position: absolute; left: 0; right: 0; height: 12px; pointer-events: none;
  background-image:
    radial-gradient(circle at 6px 50%, var(--c-ffe9a6) 0 3px, transparent 4px),
    radial-gradient(circle at 17px 50%, var(--c-ffe9a6-a32) 0 3px, transparent 3.5px);
  background-size: 22px 100%;
  filter: drop-shadow(0 0 3px var(--c-ffd278-a80));
}
.marquee-cta::before { top: 10px; }
.marquee-cta::after { bottom: 10px; }
@keyframes bulb-chase { to { background-position-x: 22px; } }

/* On-air light beside "Now auditioning" */
.casting-top::before {
  content: ""; display: inline-block; width: 8px; height: 8px; margin-right: 8px; border-radius: 50%;
  background: var(--gold); box-shadow: 0 0 0 0 var(--c-f8bf5b-a60); vertical-align: 1px;
}

/* "Admitted" stamp on the booking ticket's stub once the form is sent */
.ticket-form-stub { position: relative; }
.ticket-form.is-stamped .ticket-form-stub::after {
  content: "Admitted"; position: absolute; top: 50%; left: 50%; translate: -50% -50%; rotate: -8deg;
  padding: 10px 4px; border: 2px solid var(--red); border-radius: 6px; background: var(--c-fffbea-a92);
  color: var(--red); font: 800 .75rem/1 var(--f-body); letter-spacing: .18em; text-transform: uppercase;
}

/* Scroll progress: thin gold line along the bottom of the top bar */
@supports (animation-timeline: scroll()) {
  .site-header::after {
    content: ""; position: absolute; left: 0; right: 0; bottom: 0; height: 2px; pointer-events: none;
    background: var(--gold); transform-origin: left center; transform: scaleX(0);
    animation: read-progress linear both; animation-timeline: scroll(root);
  }
  @keyframes read-progress { to { transform: scaleX(1); } }
}

@media (prefers-reduced-motion: no-preference) {
  .marquee-cta::before { animation: bulb-chase .9s steps(2, jump-none) infinite; }
  .marquee-cta::after { animation: bulb-chase .9s steps(2, jump-none) infinite reverse; }
  .marquee-cta.is-off::before, .marquee-cta.is-off::after { animation-play-state: paused; }

  @keyframes on-air { 0%, 100% { box-shadow: 0 0 0 0 var(--c-f8bf5b-a60); opacity: 1; } 50% { box-shadow: 0 0 0 6px var(--c-f8bf5b-a0); opacity: .55; } }
  .casting-top::before { animation: on-air 2.4s ease-in-out infinite; }

  @keyframes stamp-in { 0% { opacity: 0; scale: 2.2; } 60% { opacity: 1; scale: .92; } 100% { opacity: 1; scale: 1; } }
  .ticket-form.is-stamped .ticket-form-stub::after { animation: stamp-in .45s cubic-bezier(.3, .7, .3, 1) both; }

  /* Mascot: a little bob and wave */
  @keyframes mascot-wave {
    0%, 100% { transform: none; }
    20% { transform: translateY(-8px) rotate(-10deg); }
    40% { transform: translateY(-4px) rotate(9deg); }
    60% { transform: translateY(-2px) rotate(-6deg); }
    80% { transform: rotate(3deg); }
  }
  .mascot-shy { cursor: pointer; }
  .mascot-shy.is-waving { animation: mascot-wave .9s cubic-bezier(.3, .7, .3, 1); }

  /* Spotlight sweep: one soft beam across the hero headline after it lands */
  .hero-title { position: relative; }
  .hero-title::after {
    content: ""; position: absolute; inset: -12% -6%; pointer-events: none;
    background: linear-gradient(100deg, transparent 38%, var(--c-fff4d6-a50) 50%, transparent 62%) no-repeat;
    background-size: 260% 100%; background-position: 130% 0; mix-blend-mode: soft-light; opacity: 0;
    animation: spot-sweep 1.4s ease-in-out 1s both;
  }
  .stage-curtains.is-playing ~ .hero-inner .hero-title::after { animation-delay: 2.1s; }
  @keyframes spot-sweep {
    0% { opacity: 0; background-position: 130% 0; }
    15% { opacity: 1; }
    85% { opacity: 1; }
    100% { opacity: 0; background-position: -30% 0; }
  }

  /* Age tabs: a ticket "stamp" bounce, and the panel slides in from the side you moved towards */
  @keyframes tab-stamp { 0% { scale: 1; } 35% { scale: .93; } 70% { scale: 1.04; } 100% { scale: 1; } }
  .tabs button.is-stamped { animation: tab-stamp .35s cubic-bezier(.3, .7, .3, 1); }
  @keyframes panel-from-right { from { opacity: .3; translate: 24px 0; } to { opacity: 1; translate: 0 0; } }
  @keyframes panel-from-left { from { opacity: .3; translate: -24px 0; } to { opacity: 1; translate: 0 0; } }
  .panel.is-active[data-from="right"] { animation: panel-from-right .3s ease both; }
  .panel.is-active[data-from="left"] { animation: panel-from-left .3s ease both; }
}
/* ==========================================================
   v107: audit pass — tablet layout, faster logo, grade steps, Ways to join links, form polish
   ========================================================== */
/* Tablets (641–980px): blocks that sat in one half of the two-column bento now use the full width */
@media (min-width: 641px) and (max-width: 980px) {
  .bento .bento-lede, .bento .about-more, .bento .bento-studio { grid-column: 1 / -1; }
  .hero-logo { width: 260px; }                     /* keeps both hero buttons on the first screen of a portrait iPad */
}

/* Trinity grades as stage steps, Initial up to Grade 8 (the wider first step fits the word "Initial") */
.grade-steps {
  list-style: none; margin: 0 0 var(--s3); padding: 0;
  display: grid; grid-template-columns: minmax(0, 1.7fr) repeat(8, minmax(0, 1fr)); align-items: end; gap: 4px;
  max-width: 460px;
}
.grade-steps li {
  --h: 28px; height: var(--h); display: flex; align-items: flex-start; justify-content: center;
  padding-top: 6px; border-radius: 6px 6px 2px 2px;
  background: linear-gradient(180deg, var(--purple), var(--c-35185f)); color: var(--cream);
  font: 600 .8125rem/1 var(--f-body);
  transform-origin: 50% 100%;
}
.grade-steps li:first-child { font-size: .6875rem; }
.grade-steps li:nth-child(2) { --h: 36px; } .grade-steps li:nth-child(3) { --h: 44px; }
.grade-steps li:nth-child(4) { --h: 52px; } .grade-steps li:nth-child(5) { --h: 60px; }
.grade-steps li:nth-child(6) { --h: 68px; } .grade-steps li:nth-child(7) { --h: 76px; }
.grade-steps li:nth-child(8) { --h: 84px; }
.grade-steps li:nth-child(9) { --h: 92px; background: linear-gradient(180deg, var(--gold), var(--c-e9a63c)); color: var(--plum); }
.grade-steps.is-waiting li { transform: scaleY(0); }
.grade-steps.is-up li { transition: transform .5s cubic-bezier(.2, .7, .2, 1); }
.grade-steps.is-up li:nth-child(2) { transition-delay: .06s; } .grade-steps.is-up li:nth-child(3) { transition-delay: .12s; }
.grade-steps.is-up li:nth-child(4) { transition-delay: .18s; } .grade-steps.is-up li:nth-child(5) { transition-delay: .24s; }
.grade-steps.is-up li:nth-child(6) { transition-delay: .3s; } .grade-steps.is-up li:nth-child(7) { transition-delay: .36s; }
.grade-steps.is-up li:nth-child(8) { transition-delay: .42s; } .grade-steps.is-up li:nth-child(9) { transition-delay: .48s; }
@media (min-width: 981px) { .bento-trinity .grade-steps { margin: var(--s3) 0 0; } }

/* Ways to join: each row is a link into the booking form */
a.board-row { position: relative; color: inherit; text-decoration: none; padding-right: 48px; transition: background-color .2s ease, border-color .2s ease; }
a.board-row::after {
  content: "→"; position: absolute; right: 18px; top: 50%; translate: 0 -50%;
  color: var(--gold); font-weight: 800; font-size: 1.125rem; transition: translate .2s ease;
}
a.board-row:hover { background: var(--c-2a0a33-a48); border-color: var(--c-f4f0a7-a55); }
a.board-row:hover::after { translate: 4px -50%; }

/* Form: a soft gold flash when the age picks the programme for you */
@keyframes field-flash { 0% { box-shadow: 0 0 0 0 var(--c-f8bf5b-a90); } 100% { box-shadow: 0 0 0 10px var(--c-f8bf5b-a0); } }
.field select.is-matched { animation: field-flash .8s ease-out; border-color: var(--gold); }
.field input[aria-invalid="true"] { border-color: var(--red); }

/* Footer links: taller tap areas on phones */
@media (max-width: 640px) {
  .site-footer ul { gap: 4px; }
  .site-footer ul a { display: inline-block; padding: 6px 0; }
}
/* Phones: the Trinity badge was 10px; 11px reads better and both hero buttons still fit at 390×667 */
@media (max-width: 640px) { .hero-badge { font-size: .6875rem; } }
/* v108: the red "Ready for the spotlight?" banner is set aside for now */
.marquee-cta[hidden] { display: none; }
/* v110: laptops use the cropped, retouched hero photo; its top edge sits just above the girls' heads, so show it from the top */
@media (min-width: 981px) {
  .hero-photo img { object-position: 50% 0%; }
}
/* v109: the About heading is gone, so on laptops the opening paragraph leads across the top,
   with the "safe place" subheading and its paragraph side by side below it */
@media (min-width: 981px) {
  .act-about .act-head > div > .act-lede:first-child {
    grid-column: 1 / -1; grid-row: 2; align-self: start; max-width: 60ch;
    font-size: 1.3125rem; line-height: 1.5; color: var(--ink);
  }
  .act-about .act-head > div { row-gap: var(--s4); }
  .act-about .act-head .about-sub { grid-row: 3; }
  .act-about .act-head .about-sub + .act-lede { grid-row: 3; }
}
/* ==========================================================
   v111: Hallmark polish — same layout, colours, photos and words
   ========================================================== */
/* Form fields: edges strong enough to find (3:1 or more) */
.field input, .field select { border-color: var(--field-line); }
/* A disabled control looks unavailable */
button:disabled, .submit-btn:disabled { opacity: .5; cursor: not-allowed; }
/* Labels read as plain words: sentence case, untracked, the body face a step smaller */
.hero-eyebrow, .panel-age, .tab-name, .scene-no, .casting-top, .contact-list dt, .site-footer h4, .hero-badge,
.grade-steps li:first-child {
  text-transform: none; letter-spacing: 0;
}
.hero-eyebrow, .site-footer h4, .contact-list dt, .casting-top, .scene-no, .panel-age { font-size: .875rem; }
@media (max-width: 640px) {
  .hero-eyebrow { font-size: .8125rem; letter-spacing: 0; }
  .hero-badge { letter-spacing: 0; }
  .tab-name { letter-spacing: 0; }
}
/* Headings break evenly instead of leaving one word alone */
h2, h3, h4 { text-wrap: balance; }
/* Laptops: a clear gap above the "safe place" head, so it belongs to the text it introduces */
@media (min-width: 981px) {
  .act-about .act-head .about-sub, .act-about .act-head .about-sub + .act-lede { margin-top: var(--s6); }
}
/* The hidden About label is gone, so the opening paragraph takes the first row and the pair below it the second */
@media (min-width: 981px) {
  .act-about .act-head > div > .act-lede:first-child { grid-row: 1; }
  .act-about .act-head .about-sub, .act-about .act-head .about-sub + .act-lede { grid-row: 2; margin-top: var(--s3); }
}
.contact-us-title { letter-spacing: 0; }
/* ==========================================================
   v112: area names without dots, shorter hero line, gains as a numbered list
   ========================================================== */
.hero-eyebrow .eb-places { display: block; }


/* ---------- v115 font preview: Bebas Neue headings, Poppins body (awaiting owner approval; v114 Fraunces/Manrope backup in ../chatterbox-backups/v114) ---------- */
/* Bebas Neue has one weight and no italic, and Poppins loads 400/500/600 only: never let the browser fake a bold or slant */
html { font-synthesis: none; }
h1, h2, h3, h4, .brand-name, .cast-name, .board-name, .credits dd, .director-note .signature,
.ticket-head span:first-child, .tab-age, .brand-mark {
  font-weight: 400; font-style: normal;
}
h1, h2, h3, h4 { line-height: 1.02; letter-spacing: .02em; }
/* hierarchy by size and tracking only (Bebas is condensed, so it runs a step larger than the old serif) */
.hero-title { font-size: clamp(2.5rem, 1.6rem + 3vw, 4rem); line-height: .98; letter-spacing: .015em; }
.display { font-size: clamp(2.125rem, 1.5rem + 2vw, 3.25rem); letter-spacing: .02em; }
.display-sm, .bento-trinity .display, .bento .familiar .display { font-size: clamp(1.75rem, 1.3rem + 1.4vw, 2.5rem); letter-spacing: .025em; }
h3:not(.display-sm) { letter-spacing: .03em; }
.director-note .signature { font-size: 1.75rem; letter-spacing: .04em; }
/* reading-size titles stay in Poppins */
.slide blockquote { font-family: var(--f-body); font-weight: 600; }
.casting-role, .credits dd, .tab-age { font-family: var(--f-body); font-weight: 600; letter-spacing: 0; }
/* buttons and CTAs: Poppins 600, at least 16px, same tap targets */
.ticket-btn, .wa-btn, .submit-btn, .btn-outline, .mb-trial, .mb-wa:not(:empty) { font-family: var(--f-body); font-weight: 600; letter-spacing: 0; }
.ticket-btn, .wa-btn, .submit-btn, .btn-outline, .mb-trial, .ticket-sm { font-size: max(1rem, 16px); }
/* the gain-tile titles are h3s, so they take Bebas too; the smaller h4/board/ticket titles stay Poppins at its heaviest loaded weight */
.gain h3 { font-family: var(--f-head); font-weight: 400; font-size: 1.625rem; letter-spacing: .03em; line-height: 1; }
.scenes h4, .board-name, .ticket-head span:first-child, .cast-name { font-weight: 600; letter-spacing: 0; }

/* ---------- v116: Trinity levels under the grade steps ---------- */
.grade-levels {
  list-style: none; margin: var(--s4) 0 0; padding: var(--s3) 0 0; border-top: 1px solid var(--line-light);
  display: grid; grid-template-columns: minmax(0, 1fr); gap: var(--s3);
}
.grade-levels li { display: grid; gap: 4px; padding-left: var(--s2); border-left: 3px solid var(--purple); }
.grade-levels li:last-child { border-left-color: var(--gold); }
.grade-levels b { font: 600 1rem/1.3 var(--f-body); color: var(--purple); }
.grade-levels small { display: inline-block; margin-left: 6px; font: 500 .8125rem/1.3 var(--f-body); color: var(--ink-soft); }
.grade-levels span { font-size: .9375rem; line-height: 1.5; color: var(--ink-soft); }
@media (min-width: 641px) { .grade-levels { grid-template-columns: repeat(2, minmax(0, 1fr)); column-gap: var(--s4); } }
@media (min-width: 981px) {
  .bento-trinity .grade-levels { grid-column: 1 / -1; grid-template-columns: repeat(4, minmax(0, 1fr)); }
}
/* the phone bar's "Book a demo class" stays on one line at 16px */
.mb-trial { white-space: nowrap; padding-inline: var(--s2); }

/* ---------- v117: gallery, equal tiles so the grid stays neat ---------- */
.act-gallery { background: var(--paper); }
.gallery-grid {
  list-style: none; margin: 0; padding: 0;
  display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 8px;
}
.gal-item {
  display: block; width: 100%; padding: 0; border: 0; border-radius: 10px; overflow: hidden;
  background: var(--line-light); cursor: zoom-in; aspect-ratio: 4 / 3;
}
.gal-item picture, .gal-item img { display: block; width: 100%; height: 100%; }
.gal-item img { object-fit: cover; object-position: 50% 45%; transition: transform .4s ease, opacity .2s ease; }
.gal-item:hover img { transform: scale(1.04); }
.gal-item:focus-visible { outline: 3px solid var(--focus); outline-offset: 2px; }
@media (min-width: 641px) { .gallery-grid { grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 12px; } }
@media (min-width: 981px) { .gallery-grid { grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 16px; } }   /* 18 photos: 6 full rows of 3 */
@media (prefers-reduced-motion: reduce) { .gal-item img { transition: none; } .gal-item:hover img { transform: none; } }

.lightbox {
  width: 100%; max-width: 100%; height: 100%; max-height: 100%; margin: 0; padding: 56px 12px 72px; border: 0;
  background: var(--c-lightbox, rgba(20, 8, 28, .94)); color: var(--cream);
  display: none; place-items: center; grid-template-rows: minmax(0, 1fr) auto;
}
.lightbox[open] { display: grid; }
.lightbox::backdrop { background: transparent; }
.lb-img { max-width: min(100%, 1200px); max-height: 100%; width: auto; height: auto; object-fit: contain; border-radius: 8px; }
.lb-cap { margin: 12px auto 0; max-width: 60ch; text-align: center; font-size: .9375rem; color: var(--on-dark); }
.lb-btn {
  position: absolute; width: 48px; height: 48px; border-radius: 50%; border: 0; cursor: pointer;
  background: var(--c-fbf8ef-a12); color: var(--cream); font: 400 2rem/1 var(--f-body);
  display: grid; place-items: center;
}
.lb-btn:hover { background: var(--gold); color: var(--plum); }
.lb-btn:focus-visible { outline: 3px solid var(--gold); outline-offset: 2px; }
.lb-close { top: 8px; right: 8px; }
.lb-prev { left: 8px; bottom: 12px; } .lb-next { right: 8px; bottom: 12px; }
@media (min-width: 981px) { .lb-prev, .lb-next { bottom: auto; top: 50%; transform: translateY(-50%); } .lb-prev { left: 20px; } .lb-next { right: 20px; } }

/* ---------- v118: new hero cover (crowd-cover), phones show the 4:5 crop with heads in frame ---------- */
@media (max-width: 640px) { .hero-photo img { object-position: 50% 14%; } }
@media (min-width: 981px) { .hero-photo img { object-position: 50% 40%; } }
@media (min-width: 981px) {
  .hero-photo::after {   /* a touch deeper for the busier crowd photo, so the small hero lines stay readable */
    background: linear-gradient(to bottom, var(--c-4a2a85-a32) 0%, var(--c-3a1a64-a72) 35%, var(--c-2a0a33-a84) 100%);
  }
}

/* ---------- v118 alignment fixes ---------- */
/* Fix 1: the closing line under the gains sits centred on laptops instead of hugging the left */
@media (min-width: 981px) { .bento-lede { margin-inline: auto; text-align: center; max-width: 62ch; } }
/* Fix 2: the founder heading sits in the middle of its column beside the bio */
@media (min-width: 981px) { .director-bio .director-note .display-sm { align-self: center; position: static; } }
/* Fix 3: Trinity levels share rows, so every subtitle lines up */
.grade-levels small { display: block; margin: 0; min-height: 0; }
.grade-levels small:empty { display: none; }
@media (min-width: 641px) {
  .grade-levels { grid-auto-rows: auto; }
  .grade-levels li { grid-row: span 3; display: grid; grid-template-rows: subgrid; row-gap: 4px; align-content: start; }
  .grade-levels small:empty { display: block; }
}

/* ---------- v118: grade steps are buttons that open the skills popup ---------- */
.grade-steps li { padding: 0; }
.grade-step {
  width: 100%; height: 100%; padding: 6px 0 0; border: 0; border-radius: inherit; background: transparent; color: inherit;
  font: inherit; letter-spacing: inherit; display: flex; align-items: flex-start; justify-content: center; cursor: pointer;
}
.grade-steps li { transition: filter .2s ease, transform .5s cubic-bezier(.2, .7, .2, 1); }
.grade-steps li:hover { filter: brightness(1.18); }
.grade-step:focus-visible { outline: 3px solid var(--gold); outline-offset: 2px; }
.grade-hint { margin: calc(-1 * var(--s2)) 0 var(--s3); font-size: .875rem; color: var(--ink-soft); }
@media (min-width: 981px) { .grade-hint { margin: var(--s1) 0 0; } }

.grade-modal {
  width: min(560px, calc(100% - 32px)); max-height: min(80vh, 640px); padding: 0; border: 0; border-radius: 18px;
  background: var(--paper); color: var(--ink); box-shadow: 0 30px 60px -20px var(--c-14030f-a60);
}
.grade-modal::backdrop { background: rgba(20, 8, 28, .6); }
.gm-body { position: relative; padding: var(--s4) var(--s4) var(--s4); border-top: 6px solid var(--gold); border-radius: inherit; }
.gm-content h3 { margin: 0 48px var(--s2) 0; font-size: 2rem; color: var(--purple); }
.gm-content p { margin: 0; font-size: 1.0625rem; line-height: 1.6; }
.gm-close {
  position: absolute; top: 12px; right: 12px; width: 44px; height: 44px; border-radius: 50%; border: 0; cursor: pointer;
  background: var(--line-light); color: var(--plum); font: 400 1.75rem/1 var(--f-body); display: grid; place-items: center;
}
.gm-close:hover { background: var(--gold); }
.gm-close:focus-visible { outline: 3px solid var(--purple); outline-offset: 2px; }
.grade-modal[open] { animation: gm-in .25s ease-out; }
@keyframes gm-in { from { opacity: 0; transform: translateY(12px); } to { opacity: 1; transform: none; } }
@media (max-width: 640px) {   /* phones: a full-width bottom sheet */
  .grade-modal { width: 100%; max-width: 100%; margin: auto 0 0; border-radius: 18px 18px 0 0; max-height: 85vh; }
  .gm-body { padding: var(--s4) var(--s3) calc(var(--s4) + env(safe-area-inset-bottom, 0px)); }
  .grade-modal[open] { animation: gm-up .3s cubic-bezier(.2, .7, .2, 1); }
  @keyframes gm-up { from { transform: translateY(100%); } to { transform: none; } }
}
@media (prefers-reduced-motion: reduce) { .grade-modal[open] { animation: none; } }

/* ---------- v118: WHY THEATRE? skills table (cards on phones) ---------- */
.act-why { background: var(--paper); }
.act-why .act-lede { margin-top: var(--s1); }
.why-table { width: 100%; border-collapse: collapse; }
.why-table thead th {
  text-align: left; font: 600 .875rem/1.3 var(--f-body); color: var(--ink-soft);
  padding: 0 var(--s3) var(--s2); border-bottom: 2px solid var(--gold);
}
.why-table tbody th, .why-table td { text-align: left; vertical-align: top; padding: var(--s3); }
.why-table tbody tr:nth-child(odd) { background: rgba(74, 42, 133, .05); }
.why-table tbody tr + tr { border-top: 1px solid var(--line-light); }
.why-table tbody th { width: 40%; font-weight: 400; }
.wt-skill { display: block; font: 600 1.0625rem/1.35 var(--f-body); color: var(--purple); }
.wt-def { display: block; margin-top: 4px; font-size: .9375rem; line-height: 1.5; color: var(--ink-soft); }
.why-table td { font-size: 1rem; line-height: 1.6; color: var(--ink); }
.wt-label { display: none; }
@media (max-width: 640px) {
  .why-table thead { position: absolute; width: 1px; height: 1px; overflow: hidden; clip: rect(0 0 0 0); }
  .why-table, .why-table tbody, .why-table tr, .why-table th, .why-table td { display: block; width: auto; }
  .why-table tbody { display: grid; gap: var(--s2); }
  .why-table tbody tr, .why-table tbody tr:nth-child(odd) { background: rgba(74, 42, 133, .05); border: 0; border-radius: 14px; border-left: 4px solid var(--gold); }
  .why-table tbody tr + tr { border-top: 0; }
  .why-table tbody th { width: auto; padding: var(--s3) var(--s3) 0; }
  .why-table td { padding: var(--s2) var(--s3) var(--s3); }
  .wt-label { display: block; margin-bottom: 4px; font: 600 .8125rem/1.3 var(--f-body); color: var(--purple); }
}

/* ---------- v121: "Why ChatterBox?" heading above the four About cards ---------- */
.why-cb-title { grid-column: 1 / -1; margin: var(--s4) 0 var(--s2); }
@media (min-width: 981px) {
  .bento .why-cb-title { grid-row: 5; margin: var(--s4) 0 0; }
  .about-more { grid-row: 6; }
  .bento .bento-method { grid-row: 7; }
  .bento-studio { grid-row: 8; }
}

/* v122: spam trap on the booking form, hidden from people */
.hp-field { position: absolute; left: -9999px; width: 1px; height: 1px; opacity: 0; }

/* ---------- v124: founder portrait (black and white as supplied, no filters) ---------- */
.founder-photo { margin: 0 0 var(--s3); max-width: 240px; }
.founder-photo img {
  display: block; width: 100%; height: auto; aspect-ratio: 3 / 4; object-fit: cover;
  border-radius: 18px; box-shadow: 0 18px 36px -22px var(--c-14030f-a60);
}
.founder-side .display-sm { margin: 0; }
@media (max-width: 980px) { .founder-side { margin-bottom: var(--s3); } }
@media (min-width: 981px) {
  .director-bio .director-note .founder-side { grid-column: 1; grid-row: 1 / span 4; align-self: center; }
  .founder-photo { max-width: 300px; }
}

/* v125: laptops: heading across the top, then the portrait and the bio side by side with matching top and bottom edges */
@media (min-width: 981px) {
  .director-bio .director-note { grid-template-columns: 300px minmax(0, 1fr); column-gap: var(--s6); row-gap: var(--s4); align-items: stretch; }
  .director-bio .director-note .founder-side { display: contents; }
  .director-bio .director-note .founder-side .display-sm { grid-column: 1 / -1; grid-row: 1; align-self: start; position: static; }
  .director-bio .director-note .founder-photo { grid-column: 1; grid-row: 2 / span 2; max-width: none; margin: 0; align-self: stretch; }
  .founder-photo picture { display: block; height: 100%; }
  .founder-photo img { height: 100%; aspect-ratio: auto; object-position: 50% 30%; }
  .director-bio .director-note > p { grid-column: 2; }
  .director-bio .director-note > p:last-of-type { margin-bottom: 0; }
}
@media (min-width: 981px) {
  .director-bio .director-note { row-gap: 0; align-content: start; }
  .director-bio .director-note .founder-side .display-sm { margin-bottom: var(--s4); }
  .director-bio .director-note > p:first-of-type { align-self: start; }
  .director-bio .director-note > p:last-of-type { align-self: start; }
}

/* ---------- v127: founder on phones, bio spacing, closing link, grade bars by content group ---------- */
/* Phones and tablets: heading first, then a smaller portrait with the bio wrapping beside it */
@media (max-width: 980px) {
  .director-bio .director-note .founder-side { display: contents; }
  .director-bio .director-note .founder-side .display-sm { margin-bottom: var(--s3); }
  .founder-photo { float: left; width: 42%; max-width: 220px; margin: 4px var(--s3) var(--s2) 0; }
  .director-bio .director-note > p:first-of-type { margin-top: 0; }
  .director-bio .director-note::after { content: ""; display: block; clear: both; }
}
/* Laptops: the portrait no longer sets the row height, so the two paragraphs keep normal spacing */
@media (min-width: 981px) {
  .director-bio .director-note { grid-template-rows: auto auto 1fr; }
  .director-bio .director-note .founder-photo { position: relative; min-height: 100%; }
  .founder-photo picture { position: absolute; inset: 0; }
  .founder-photo img { width: 100%; height: 100%; }
  .director-bio .director-note > p:first-of-type { margin-bottom: var(--s2); }
}
/* "Come say hello." reads as a link to the contact section */
.about-closing .text-link { color: inherit; text-decoration-color: currentColor; text-decoration-thickness: 2px; }
.about-closing .text-link:hover { text-decoration-color: var(--gold); }
.about-closing .text-link:focus-visible { outline: 3px solid var(--gold); outline-offset: 3px; border-radius: 4px; }
/* Six grade bars, one per popup group, each labelled with what it opens */
.grade-steps { grid-template-columns: minmax(0, 1.4fr) repeat(5, minmax(0, 1fr)); max-width: 480px; }
.grade-step { flex-wrap: wrap; align-content: flex-start; }
.grade-step .gl { flex-basis: 100%; white-space: nowrap; }
.grade-steps li, .grade-steps li:first-child { font-size: .75rem; }
.grade-step { padding: 7px 3px 0; line-height: 1.15; text-align: center; text-transform: none; letter-spacing: 0; }
.grade-steps li:nth-child(1) { --h: 58px; } .grade-steps li:nth-child(2) { --h: 64px; }
.grade-steps li:nth-child(3) { --h: 72px; } .grade-steps li:nth-child(4) { --h: 80px; }
.grade-steps li:nth-child(5) { --h: 88px; }
.grade-steps li:nth-child(6) { --h: 96px; background: linear-gradient(180deg, var(--gold), var(--c-e9a63c)); color: var(--plum); }