/* ============================================================
   ROCKOUTACADEMY.COM - shared styles
   ============================================================
   COLORWAY - change the site's entire palette by editing this
   one block. Pulled from the logo: red, silver, stage black.
   ------------------------------------------------------------ */
:root{
  --bg:         #08080A;   /* page background */
  --panel:      #0E0E12;   /* card background */
  --panel-2:    #16161C;   /* deeper card */
  --white:      #F7F7F9;   /* main text */
  --accent:     #FF2D3C;   /* logo red - buttons, highlights */
  --accent-2:   #FF6B75;   /* lighter red for hovers */
  --accent-ink: #FFFFFF;   /* text on accent */
  --silver:     #C9CCD4;   /* chrome/secondary accent */
  --dim:        #8B8F9B;   /* muted text */
  --line:       rgba(255,255,255,.09);   /* borders */
  --glow:       255,45,60; /* accent as r,g,b for glows/tints */
  --gold:       #FFC53D;   /* scholarship / highlight badge */

  --wrap: 1240px;
  --radius: 16px;

  /* Type. Bricolage Grotesque is variable: opsz 96 keeps the display cut at
     large sizes, and the 800 weight is what the headings want. */
  --display:'Bricolage Grotesque', system-ui, sans-serif;
  --text:'Instrument Sans', system-ui, sans-serif;
}

*{ box-sizing:border-box; margin:0; padding:0; }
[hidden]{ display:none !important; }
html{ scroll-behavior:smooth; }
body{
  background:var(--bg);
  color:var(--white);
  font-family:var(--text), -apple-system, BlinkMacSystemFont, 'Segoe UI', Arial, sans-serif;
  font-size:17px;
  line-height:1.6;
  -webkit-font-smoothing:antialiased;
  overflow-x:hidden;
}
a{ color:inherit; text-decoration:none; }
/* height:auto matters - pages set width/height attributes for layout stability,
   and without it a width-constrained image keeps its attribute height and squishes */
img{ max-width:100%; height:auto; display:block; }
::selection{ background:var(--accent); color:var(--accent-ink); }

h1,h2,h3,.display{
  font-family:var(--display);
  font-weight:800;
  font-variation-settings:'opsz' 96;
  letter-spacing:-.03em;
  line-height:.94;
  /* Bricolage has real character in its lowercase, which uppercasing throws
     away. Sentence case, larger, is the whole point of the change. */
  text-transform:none;
}

/* ---------- Stage backdrop ---------- */
.stage{ position:fixed; inset:0; z-index:0; pointer-events:none; overflow:hidden; }
.stage span{
  position:absolute; border-radius:50%;
  filter:blur(100px); opacity:.42;
  animation:drift 28s ease-in-out infinite alternate;
}
.stage span:nth-child(1){ width:58vw; height:58vw; left:-16vw; top:-20vw;
  background:radial-gradient(circle, rgba(var(--glow), .40) 0%, transparent 70%); }
.stage span:nth-child(2){ width:46vw; height:46vw; right:-12vw; top:6vh;
  background:radial-gradient(circle, rgba(var(--glow), .34) 0%, transparent 70%);
  animation-delay:-9s; animation-duration:34s; }
.stage span:nth-child(3){ width:52vw; height:52vw; left:26vw; bottom:-30vw;
  background:radial-gradient(circle, rgba(201,204,212,.14) 0%, transparent 70%);
  animation-delay:-17s; animation-duration:40s; }
@keyframes drift{
  from{ transform:translate3d(0,0,0) scale(1); }
  to{   transform:translate3d(6vw,4vh,0) scale(1.16); }
}
.grain{
  position:fixed; inset:0; z-index:1; pointer-events:none; opacity:.045;
  background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='140' height='140'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='0.9' numOctaves='2'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23n)'/%3E%3C/svg%3E");
}
@media (prefers-reduced-motion:reduce){
  .stage span{ animation:none; }
  html{ scroll-behavior:auto; }
}

/* ---------- Layout ---------- */
.wrap{ width:min(var(--wrap), 92vw); margin-inline:auto; }
main{ position:relative; z-index:2; }
section{ padding:clamp(56px, 8vw, 104px) 0; }
.section-head{ margin-bottom:44px; max-width:760px; }
.eyebrow{
  display:inline-flex; align-items:center; gap:9px;
  font-size:12px; font-weight:700; letter-spacing:.20em; text-transform:uppercase;
  color:var(--accent); margin-bottom:14px;
}
.eyebrow::before{ content:""; width:26px; height:2px; background:var(--accent); }
h2{ font-size:clamp(30px, 5vw, 50px); }
.section-head p{ color:var(--dim); margin-top:16px; font-size:18px; }

/* ---------- Header ---------- */
header.site{
  position:sticky; top:0; z-index:60;
  background:rgba(12,12,14,.82);
  backdrop-filter:blur(14px);
  border-bottom:1px solid var(--line);
}
.nav{ display:flex; align-items:center; gap:22px; padding:12px 0; }
.brand{ display:flex; align-items:center; gap:12px; margin-right:auto; flex-shrink:0; }
.brand img{ width:54px; height:54px; border-radius:10px; object-fit:cover; transition:transform .2s; }
/* The wordmark is artwork on transparency, not a cropped square badge: it
   needs its own width and no rounding or cover-crop. */
.brand img.brandmark{
  width:auto; height:34px; border-radius:0; object-fit:contain;
}
@media(max-width:760px){ .brand img.brandmark{ height:28px; } }
.brand:hover img{ transform:scale(1.04); }
.brand b{
  font-family:var(--display); font-weight:800; font-size:19px;
  letter-spacing:-.02em; text-transform:none; line-height:1;
}
.brand small{ display:block; color:var(--accent); font-size:9.5px; letter-spacing:.18em; font-weight:700; }
.nav a.link{
  color:var(--dim); font-family:var(--text); font-size:14px; font-weight:500;
  letter-spacing:.01em; text-transform:none; white-space:nowrap;
  padding:7px 2px; border-bottom:2px solid transparent; transition:.18s;
}
.nav a.link:hover{ color:var(--white); border-bottom-color:var(--accent); }
.nav a.link[aria-current]{ color:var(--white); border-bottom-color:var(--accent); }
.nav-links{ display:flex; gap:20px; align-items:center; }
.burger{
  display:none; background:none; border:1px solid var(--line); color:var(--white);
  width:42px; height:38px; border-radius:9px; cursor:pointer; font-size:17px;
}

/* ---------- Buttons ---------- */
.btn{
  display:inline-flex; align-items:center; justify-content:center; gap:9px;
  padding:14px 28px; border-radius:100px; border:1px solid transparent;
  font-family:var(--text); font-size:14.5px; font-weight:600; letter-spacing:.01em;
  text-transform:none; cursor:pointer; transition:transform .2s, box-shadow .2s, background .2s, border-color .2s;
  white-space:nowrap;
}
.btn-primary:hover{ transform:translateY(-2px); box-shadow:0 14px 40px rgba(var(--glow),.45); }
.btn-primary{
  background:var(--accent); color:var(--accent-ink);
  box-shadow:0 8px 30px rgba(var(--glow),.34);
}
.btn-primary:hover{ background:var(--accent-2); transform:translateY(-2px); box-shadow:0 12px 38px rgba(var(--glow),.46); }
.btn-ghost{ border-color:var(--line); color:var(--white); background:rgba(255,255,255,.02); }
.btn-ghost:hover{ border-color:var(--accent); color:var(--white); transform:translateY(-2px); }
.btn-sm{ padding:10px 18px; font-size:13px; }
.btn-row{ display:flex; gap:14px; flex-wrap:wrap; }

/* ---------- Hero ---------- */
.hero{ padding:clamp(50px,7vw,84px) 0 clamp(46px,6vw,72px); position:relative; }
.hero-grid{ display:grid; grid-template-columns:1.08fr .92fr; gap:clamp(30px,5vw,64px); align-items:center; }
.hero h1{ font-size:clamp(44px, 8.2vw, 92px); }
.hero h1 em{ font-style:normal; color:var(--accent); display:block; }
.hero .lede{ color:var(--silver); font-size:clamp(17px,2vw,20px); margin:22px 0 30px; max-width:53ch; }
.hero-logo{
  border-radius:20px; border:1px solid var(--line);
  box-shadow:0 30px 90px rgba(0,0,0,.6), 0 0 70px rgba(var(--glow),.16);
}
.badges{ display:flex; flex-wrap:wrap; gap:9px; margin-bottom:22px; }
.badge{
  display:inline-flex; align-items:center; gap:7px;
  padding:7px 13px; border-radius:100px; border:1px solid var(--line);
  background:rgba(255,255,255,.03); font-size:12.5px; font-weight:700;
  letter-spacing:.06em; text-transform:uppercase; color:var(--silver);
}
.badge.hot{ border-color:rgba(var(--glow),.5); color:var(--accent-2); background:rgba(var(--glow),.09); }
.badge.gold{ border-color:rgba(255,197,61,.42); color:var(--gold); background:rgba(255,197,61,.08); }

/* ---------- Marquee ---------- */
.marquee{
  border-block:1px solid var(--line);
  background:linear-gradient(90deg, rgba(var(--glow),.10), transparent 40%, transparent 60%, rgba(var(--glow),.10));
  overflow:hidden; padding:15px 0; position:relative; z-index:2;
}
.marquee-track{ display:flex; gap:44px; width:max-content; animation:slide 34s linear infinite; }
.marquee span{
  font-family:var(--display); font-size:16px; letter-spacing:.10em;
  text-transform:uppercase; color:var(--silver); display:flex; align-items:center; gap:44px;
}
.marquee span::after{ content:"\2605"; color:var(--accent); font-size:13px; }
@keyframes slide{ from{ transform:translateX(0); } to{ transform:translateX(-50%); } }
@media (prefers-reduced-motion:reduce){ .marquee-track{ animation:none; } }

/* ---------- Cards / grids ---------- */
.grid{ display:grid; gap:20px; }
.g2{ grid-template-columns:repeat(2,1fr); }
.g3{ grid-template-columns:repeat(3,1fr); }
.g4{ grid-template-columns:repeat(4,1fr); }

.card{
  background:var(--panel); border:1px solid var(--line);
  border-radius:var(--radius); padding:26px; transition:.22s; position:relative;
}
.card:hover{ border-color:rgba(var(--glow),.45); transform:translateY(-3px); background:var(--panel-2); }
.card h3{ font-size:22px; margin-bottom:10px; }
.card p{ color:var(--dim); font-size:15.5px; }
.card .kicker{
  font-size:11.5px; font-weight:700; letter-spacing:.16em; text-transform:uppercase;
  color:var(--accent); margin-bottom:9px;
}

/* program card with a big index number */
.prog{ display:block; overflow:hidden; }
.prog .num{
  position:absolute; right:18px; top:10px;
  font-family:var(--display); font-size:62px; color:rgba(255,255,255,.045); line-height:1;
}
.prog ul{ list-style:none; margin-top:14px; display:flex; flex-wrap:wrap; gap:7px; }
.prog ul li{
  font-size:12px; padding:4px 10px; border-radius:100px;
  background:rgba(255,255,255,.05); color:var(--silver); border:1px solid var(--line);
}
.prog .more{ margin-top:18px; color:var(--accent); font-weight:700; font-size:14px; letter-spacing:.05em; text-transform:uppercase; }

/* pill list - used on its own (teacher instruments, class days) rather than
   nested inside .prog, so it needs its own rule */
.pills{ list-style:none; display:flex; flex-wrap:wrap; gap:7px; margin:14px 0 0; padding:0; }
.pills li{
  font-size:12px; padding:4px 10px; border-radius:100px;
  background:rgba(255,255,255,.05); color:var(--silver);
  border:1px solid var(--line); line-height:1.5;
}

/* ---------- Stats ---------- */
.stats{ display:grid; grid-template-columns:repeat(4,1fr); gap:18px; }
.stat{ text-align:center; padding:26px 14px; border:1px solid var(--line); border-radius:var(--radius); background:var(--panel); }
.stat b{ display:block; font-family:var(--display); font-size:clamp(32px,4.4vw,46px); color:var(--accent); line-height:1; }
.stat span{ display:block; margin-top:9px; font-size:12.5px; letter-spacing:.13em; text-transform:uppercase; color:var(--dim); font-weight:700; }

/* ---------- Tuition ---------- */
.rate{ display:flex; flex-direction:column; }
.rate .price{ font-family:var(--display); font-size:40px; color:var(--white); line-height:1; margin:6px 0 4px; }
.rate .price sup{ font-size:20px; color:var(--accent); top:-14px; position:relative; }
.rate .per{ color:var(--dim); font-size:13.5px; letter-spacing:.05em; text-transform:uppercase; font-weight:700; }
.rate .alt{ margin-top:8px; color:var(--silver); font-size:14.5px; }
.rate p{ margin-top:14px; }
.rate.best{ border-color:rgba(var(--glow),.55); box-shadow:0 0 0 1px rgba(var(--glow),.22), 0 18px 50px rgba(var(--glow),.14); }
.rate .tag{
  position:absolute; top:-11px; left:22px; background:var(--accent); color:#fff;
  font-family:var(--display); font-size:11px; letter-spacing:.13em;
  padding:5px 11px; border-radius:100px; text-transform:uppercase;
}

/* ---------- Compare columns ----------
   Three tall columns for the choice a parent actually makes: one to one,
   a band, or a group class. Feature rows are aligned across the columns so
   they read as a table on desktop and stack cleanly on mobile. */
.compare{ display:grid; grid-template-columns:repeat(3,1fr); gap:20px; align-items:start; }
.col{
  background:var(--panel); border:1px solid var(--line); border-radius:18px;
  padding:30px 26px 26px; position:relative; display:flex; flex-direction:column; height:100%;
}
.col.feature{
  border-color:rgba(var(--glow),.55);
  box-shadow:0 0 0 1px rgba(var(--glow),.2), 0 22px 60px rgba(var(--glow),.16);
  background:var(--panel-2);
}
.col .flag{
  position:absolute; top:-12px; left:50%; transform:translateX(-50%);
  background:var(--accent); color:#fff; font-family:var(--display);
  font-size:11px; letter-spacing:.14em; padding:6px 14px; border-radius:100px;
  text-transform:uppercase; white-space:nowrap;
}
.col .who{ font-size:11.5px; font-weight:700; letter-spacing:.16em; text-transform:uppercase; color:var(--accent); }
.col h3{ font-size:26px; margin:10px 0 4px; }
.col .sub{ color:var(--dim); font-size:14.5px; min-height:42px; }
.col .amt{ display:flex; align-items:baseline; gap:5px; margin:18px 0 2px; }
.col .amt b{ font-family:var(--display); font-size:46px; line-height:1; }
.col .amt sup{ font-size:20px; color:var(--accent); align-self:flex-start; margin-top:6px; }
.col .unit{ color:var(--dim); font-size:12.5px; letter-spacing:.07em; text-transform:uppercase; font-weight:700; }
.col .alt{ color:var(--silver); font-size:14px; margin-top:8px; min-height:21px; }
.col .btn{ width:100%; margin:22px 0 4px; }
.col dl{ margin-top:18px; border-top:1px solid var(--line); padding-top:16px; }
.col dl div{ display:flex; gap:12px; justify-content:space-between; padding:9px 0; border-bottom:1px solid rgba(255,255,255,.045); }
.col dl div:last-child{ border-bottom:0; }
.col dt{ color:var(--dim); font-size:13.5px; letter-spacing:.04em; }
.col dd{ font-size:14px; font-weight:600; text-align:right; }
.col dd.no{ color:var(--dim); font-weight:400; }
.col dd.yes::before{ content:"\2713 "; color:var(--accent); font-weight:700; }
/* Hold the three-up comparison down to the mobile breakpoint: side by side is
   the entire point of it, and stacking turns a comparison into three adverts.
   The columns tighten instead. */
@media(max-width:1180px){
  .compare{ gap:14px; }
  .col{ padding:26px 18px 20px; }
  .col h3{ font-size:22px; }
  .col .sub{ font-size:13.5px; min-height:52px; }
  .col .amt b{ font-size:38px; }
  /* Reserve two lines: one column's price note wraps at this width and the
     comparison rows below have to stay on the same baseline across all three,
     or the table stops being readable across. */
  .col .alt{ font-size:13px; min-height:42px; }
  .col dl div{ gap:8px; padding:8px 0; }
  .col dt{ font-size:12.5px; }
  .col dd{ font-size:13px; }
}
@media(max-width:760px){
  .compare{ grid-template-columns:1fr; gap:20px; }
  .col{ padding:30px 26px 26px; }
  .col .sub,.col .alt{ min-height:0; }
  .col h3{ font-size:26px; }
  .col .amt b{ font-size:46px; }
}

/* ---------- Teachers ----------
   Square photos, matching the faculty strip on the homepage. The image is
   full-bleed at the top of the card, so the card itself carries no padding
   and the text block supplies its own. */
.teacher{ padding:0; overflow:hidden; display:flex; flex-direction:column; }
.teacher .ph{
  aspect-ratio:1; position:relative; overflow:hidden;
  border-bottom:1px solid var(--line); background:var(--panel-2);
}
.teacher .ph img{
  width:100%; height:100%; object-fit:cover; object-position:center 20%;
  filter:grayscale(.45) contrast(1.05); transition:filter .35s, transform .45s;
}
.card.teacher:hover .ph img{ filter:none; transform:scale(1.04); }
/* monogram fallback fills the same square */
.teacher .ph .mono{
  position:absolute; inset:0; display:grid; place-items:center;
  font-family:var(--display); font-size:clamp(38px,6vw,54px); color:var(--accent-ink);
  background:linear-gradient(145deg, var(--accent), #8E1218);
}
.teacher .body{ padding:22px; display:flex; flex-direction:column; flex:1; }
.teacher h3{ font-size:19px; margin-bottom:4px; }
.teacher .teaches{ color:var(--silver); font-size:13px; line-height:1.5; }
.teacher .bio{ color:var(--dim); font-size:14.5px; margin-top:12px; }
.teacher details summary{
  cursor:pointer; color:var(--accent); font-size:12.5px; font-weight:700;
  letter-spacing:.10em; text-transform:uppercase; margin-top:12px; list-style:none;
}
.teacher details summary::-webkit-details-marker{ display:none; }
.teacher details summary::after{ content:" +"; }
.teacher details[open] summary::after{ content:" \2013"; }
.teacher details p{ color:var(--dim); font-size:14.5px; margin-top:10px; }

/* ---------- Schedule table ---------- */
.sched{ width:100%; border-collapse:collapse; font-size:15.5px; }
.sched th,.sched td{ text-align:left; padding:14px 16px; border-bottom:1px solid var(--line); }
.sched th{
  font-family:var(--display); font-size:13px; letter-spacing:.12em;
  text-transform:uppercase; color:var(--accent);
}
.sched td:first-child{ font-weight:700; color:var(--white); white-space:nowrap; }
.sched td.time{ color:var(--silver); white-space:nowrap; }
.sched tr:hover td{ background:rgba(255,255,255,.02); }
.free{ color:var(--gold); font-weight:700; font-size:13px; letter-spacing:.05em; text-transform:uppercase; }
.table-scroll{ overflow-x:auto; border:1px solid var(--line); border-radius:var(--radius); background:var(--panel); }

/* ---------- MyMusicStaff embed ----------
   The widget is a light Angular Material app on another origin, so its interior
   cannot be styled from here. Two tricks get it onto the palette:

   1. invert(1) flips the white form to a dark one, then grayscale(1) drops
      its accents entirely.

      The widget uses two accent hues 18 degrees apart: the Sign-Up button is
      red and the Adult/Child pill is peach. Because the iframe is on another
      origin they cannot be recoloured separately, and a single hue-rotate
      cannot land both on the site red - every value tried left one of them
      orange or pink. Greyscale sidesteps the problem: the form becomes
      neutral, the selected pill still reads as selected through its fill and
      its tick, and the only red near it is the site's own, on the tabs above
      and the buttons below. Nothing on the form competes with those.

   2. mix-blend-mode:screen over --form-bg. Screen leaves the light text alone
      and replaces the inverted black background with whatever sits underneath.
      --form-bg is a translucent near-black, so with the blur behind it the
      form reads as smoked glass over the page rather than a solid slab.

   --form-bg must stay dark. Screen lightens, so anything pale here washes the
   form out and kills the contrast on the input labels.

   Set .mms-wrap.is-light on the wrapper to opt a form back out. */
.mms-wrap{
  --form-bg:rgba(10,10,12,.88);      /* smoked black the form is blended onto */
  /* Crops the widget's own serif title block ("FORM #2 / REGISTER FREE / ...").
     Measured against the real auto-sized form: the title ends about 200px in,
     "Student Info" starts just after. Deliberately a shade UNDER the measured
     height - if the title ever wraps taller, the failure is a leftover sliver
     of text, not hidden form fields. Set to 0 once Cristina clears the titles
     in My Music Staff, which is the proper fix. */
  --form-crop:200px;
  max-width:820px; margin-inline:auto;
  border:1px solid rgba(255,255,255,.09); border-radius:var(--radius);
  background:var(--form-bg); overflow:hidden; position:relative; isolation:isolate;
  /* saturate is pulled DOWN, not up: the page's red aurora sits behind this and
     a saturated backdrop bleeds through as a brown cast over the whole form. */
  backdrop-filter:blur(22px) saturate(.5);
  -webkit-backdrop-filter:blur(22px) saturate(.5);
  box-shadow:0 24px 70px rgba(0,0,0,.55), inset 0 1px 0 rgba(255,255,255,.06);
}
.mms-wrap iframe{
  width:100%; border:0; display:block; min-height:760px;
  background:transparent;
  filter:invert(1) grayscale(1) brightness(1.02) contrast(1.04);
  mix-blend-mode:screen;
  margin-top:calc(-1 * var(--form-crop));
}
.mms-wrap.is-light{ background:#fff; backdrop-filter:none; -webkit-backdrop-filter:none; }
.mms-wrap.is-light iframe{ filter:none; mix-blend-mode:normal; background:#fff; }
.mms-head{
  display:flex; align-items:center; justify-content:space-between; gap:16px;
  flex-wrap:wrap; margin-bottom:18px;
}
.mms-note{ color:var(--dim); font-size:14px; }
.mms-note a{ color:var(--accent); font-weight:700; }

/* ---------- CTA band ---------- */
.cta{
  border:1px solid rgba(var(--glow),.36); border-radius:20px;
  background:linear-gradient(135deg, rgba(var(--glow),.16), rgba(var(--glow),.03) 55%, transparent);
  padding:clamp(34px,5vw,58px); text-align:center;
}
.cta h2{ font-size:clamp(28px,4.6vw,46px); }
.cta p{ color:var(--silver); margin:16px auto 28px; max-width:56ch; font-size:18px; }
.cta .btn-row{ justify-content:center; }

/* ---------- Split feature ---------- */
.split{ display:grid; grid-template-columns:1fr 1fr; gap:clamp(28px,5vw,60px); align-items:center; }
.split img{ border-radius:var(--radius); border:1px solid var(--line); }
.split ul{ list-style:none; margin-top:20px; display:grid; gap:11px; }
.split ul li{ display:flex; gap:11px; align-items:flex-start; color:var(--silver); font-size:16px; }
.split ul li::before{ content:"\25B8"; color:var(--accent); font-size:14px; margin-top:3px; }

/* ---------- Footer ---------- */
footer.site{
  position:relative; z-index:2; border-top:1px solid var(--line);
  background:rgba(0,0,0,.35); padding:56px 0 30px; margin-top:20px;
}
.foot-grid{ display:grid; grid-template-columns:1.5fr 1fr 1fr 1.2fr; gap:36px; }
.foot h4{
  font-family:var(--display); font-size:14px; letter-spacing:.13em;
  text-transform:uppercase; color:var(--white); margin-bottom:14px;
}
.foot a, .foot p{ color:var(--dim); font-size:15px; display:block; margin-bottom:9px; transition:.16s; }
.foot a:hover{ color:var(--accent); }
.socials{ display:flex; gap:10px; margin-top:14px; }
.socials a{
  width:40px; height:40px; border-radius:10px; border:1px solid var(--line);
  display:grid; place-items:center; color:var(--silver); margin:0; transition:.2s;
}
.socials a:hover{ border-color:var(--accent); color:var(--accent); transform:translateY(-2px); }
.socials svg{ width:19px; height:19px; fill:currentColor; }
.legal{
  margin-top:40px; padding-top:22px; border-top:1px solid var(--line);
  display:flex; justify-content:space-between; gap:16px; flex-wrap:wrap;
  color:var(--dim); font-size:13.5px;
}

/* ---------- Reveal on scroll ---------- */
.rev{ opacity:0; transform:translateY(18px); transition:opacity .6s ease, transform .6s ease; }
.rev.in{ opacity:1; transform:none; }
@media (prefers-reduced-motion:reduce){ .rev{ opacity:1; transform:none; transition:none; } }

/* ---------- Responsive ---------- */
@media (max-width:980px){
  .g4{ grid-template-columns:repeat(2,1fr); }
  .g3{ grid-template-columns:repeat(2,1fr); }
  .foot-grid{ grid-template-columns:1fr 1fr; }
  .hero-grid{ grid-template-columns:1fr; }
  .hero-logo{ max-width:420px; margin-inline:auto; }
  .split{ grid-template-columns:1fr; }
  .stats{ grid-template-columns:repeat(2,1fr); }
}
/* The full nav row - seven links, the phone number and the CTA - measures
   about 920px, so it overflowed the page on any window between the old 760px
   burger breakpoint and roughly 1000px. Hand over to the burger while the row
   still fits. */
@media (max-width:1000px){
  /* header.site has a backdrop-filter, which makes it the containing block
     for these fixed children - so top:100% lands exactly on its bottom edge
     no matter how tall the bar renders. */
  .nav-links{
    position:fixed; top:100%; left:0; right:0; bottom:auto;
    flex-direction:column; align-items:stretch;
    background:rgba(12,12,14,.98); backdrop-filter:blur(16px);
    border-bottom:1px solid var(--line); padding:18px 5vw 26px; gap:2px;
    transform:translateY(-140%); transition:transform .3s ease; z-index:59;
  }
  .nav-links.open{ transform:none; }
  .nav-links a.link{ padding:13px 0; border-bottom:1px solid var(--line); font-size:16px; }
  .nav-links .btn{ margin-top:14px; }
  .burger{ display:block; }
}
@media (max-width:760px){
  .g2,.g3,.g4{ grid-template-columns:1fr; }
  body{ font-size:16px; }
}
@media (max-width:520px){
  .stats{ grid-template-columns:1fr 1fr; }
  .foot-grid{ grid-template-columns:1fr; }
  .legal{ flex-direction:column; }
}

/* ============================================================
   DIRECTION A - "Backstage"
   Photo-led homepage components. The palette was already red on
   near-black, so this is additive rather than a repaint.
   ============================================================ */

/* ---------- Full-bleed photo hero ---------- */
.hero-photo{
  position:relative; min-height:clamp(520px,84vh,840px);
  display:grid; align-items:end; overflow:hidden; margin-bottom:0;
}
.hero-photo .bg{ position:absolute; inset:0; z-index:0; }
.hero-photo .bg img{ width:100%; height:100%; object-fit:cover; filter:saturate(.85) contrast(1.05); }
.hero-photo .bg::after{
  content:""; position:absolute; inset:0;
  background:
    linear-gradient(180deg, rgba(12,12,14,.74) 0%, rgba(12,12,14,.3) 32%, rgba(12,12,14,.93) 82%, var(--bg) 100%),
    radial-gradient(ellipse at 18% 60%, rgba(var(--glow),.34), transparent 62%);
}
.hero-photo .in{ position:relative; z-index:2; padding:0 0 clamp(44px,7vw,84px); }
.hero-photo h1{ font-size:clamp(40px,7.2vw,88px); text-shadow:0 6px 40px rgba(0,0,0,.6); }
.hero-photo h1 em{ font-style:normal; color:var(--accent); display:block; }
.hero-photo .lede{ color:#E4E6EC; text-shadow:0 2px 18px rgba(0,0,0,.7); max-width:54ch; margin:16px 0 22px; }
.hero-photo .badge{ background:rgba(12,12,14,.55); backdrop-filter:blur(6px); border-color:rgba(255,255,255,.24); color:#fff; }
/* the hero badge rule above sits later in the file than .badge.gold and was
   flattening the scholarship badge to white - restate it so it stays yellow */
.hero-photo .badge.gold{
  color:var(--gold); border-color:rgba(255,197,61,.55);
  /* same grey fill as the other three - a yellow tint here reads as see-through
     against the photo, so only the text and border carry the colour */
  background:rgba(12,12,14,.55);
}

/* star rating line */
.rating{ display:flex; align-items:center; gap:10px; margin-top:26px; font-size:14.5px; }
.rating .stars{ color:var(--gold); letter-spacing:2px; font-size:16px; }

/* ---------- Trust strip ---------- */
.trust{
  display:grid; grid-template-columns:repeat(4,1fr); gap:1px;
  background:var(--line); border:1px solid var(--line); border-radius:14px; overflow:hidden;
}
.trust div{ background:var(--panel); padding:26px 20px; text-align:center; }
.trust b{ display:block; font-family:var(--display); font-size:clamp(26px,3.4vw,38px); color:var(--accent); line-height:1; }
.trust span{ display:block; margin-top:8px; font-size:12px; letter-spacing:.13em; text-transform:uppercase; color:var(--dim); font-weight:700; }

/* ---------- Photo programme cards ---------- */
.progphoto{
  position:relative; border-radius:16px; overflow:hidden; border:1px solid var(--line);
  min-height:320px; display:flex; align-items:flex-end; transition:.25s;
}
.progphoto img{ position:absolute; inset:0; width:100%; height:100%; object-fit:cover; transition:.5s; filter:saturate(.8); }
.progphoto::after{ content:""; position:absolute; inset:0;
  background:linear-gradient(180deg, rgba(12,12,14,.1), rgba(12,12,14,.55) 45%, rgba(12,12,14,.96)); }
.progphoto:hover{ border-color:rgba(var(--glow),.55); transform:translateY(-4px); }
.progphoto:hover img{ transform:scale(1.06); }
.progphoto .c{ position:relative; z-index:2; padding:24px; }
.progphoto h3{ font-size:24px; margin-bottom:6px; }
.progphoto p{ color:#C9CCD4; font-size:15px; }
.progphoto .age{
  display:inline-block; margin-bottom:9px; padding:4px 10px; border-radius:100px;
  background:var(--accent); color:#fff; font-size:11px; font-weight:700;
  letter-spacing:.1em; text-transform:uppercase;
}
.progphoto .cost{ color:var(--gold); font-weight:700; font-size:14.5px; margin-top:8px; }

/* ---------- Room gallery ---------- */
.gallery{ display:grid; grid-template-columns:repeat(4,1fr); gap:12px; }
.gallery a{ border-radius:12px; overflow:hidden; border:1px solid var(--line); aspect-ratio:4/3; display:block; }
.gallery img{ width:100%; height:100%; object-fit:cover; transition:.4s; }
.gallery a:hover img{ transform:scale(1.07); }
.gallery a:first-child{ grid-column:span 2; grid-row:span 2; aspect-ratio:auto; }

/* ---------- Owner ---------- */
.owner{ display:grid; grid-template-columns:.85fr 1.15fr; gap:clamp(28px,5vw,56px); align-items:center; }
.owner img{ border-radius:16px; border:1px solid var(--line); }
.owner .quote{ font-size:clamp(19px,2.4vw,26px); line-height:1.45; color:#fff; }
.owner .sig{ margin-top:18px; color:var(--accent); font-family:var(--display); letter-spacing:.06em; font-size:15px; }

/* ---------- Faculty strip ---------- */
.faculty{ display:grid; grid-template-columns:repeat(6,1fr); gap:16px; }
.faculty figure{ position:relative; border-radius:14px; overflow:hidden; border:1px solid var(--line); transition:.22s; }
.faculty figure:hover{ border-color:rgba(var(--glow),.6); transform:translateY(-4px); }
.faculty img{ aspect-ratio:3/4; object-fit:cover; width:100%; filter:grayscale(.55) contrast(1.06); transition:.35s; }
.faculty figure:hover img{ filter:none; transform:scale(1.05); }
.faculty figcaption{ position:absolute; inset:auto 0 0; padding:14px 13px 12px;
  background:linear-gradient(180deg, transparent, rgba(12,12,14,.94) 55%); }
.faculty h3{ font-size:15px; line-height:1.15; }
.faculty span{ display:block; margin-top:4px; font-size:11px; letter-spacing:.06em;
  text-transform:uppercase; color:var(--accent-2); font-weight:700; }

/* ---------- FAQ ---------- */
.faq details{
  border:1px solid var(--line); border-radius:12px; background:var(--panel);
  margin-bottom:10px; overflow:hidden;
}
.faq summary{
  cursor:pointer; padding:18px 22px; font-family:var(--display); font-size:16px;
  letter-spacing:.03em; list-style:none; display:flex; justify-content:space-between; gap:16px;
}
.faq summary::-webkit-details-marker{ display:none; }
.faq summary::after{ content:"+"; color:var(--accent); font-size:20px; line-height:1; }
.faq details[open] summary::after{ content:"\2013"; }
.faq details p{ padding:0 22px 20px; color:var(--dim); font-size:15.5px; }

/* ---------- Review slots ---------- */
.slot{
  border:1px dashed rgba(255,255,255,.26); border-radius:12px; padding:20px;
  color:var(--dim); font-size:14.5px; background:rgba(255,255,255,.02);
}

/* ---------- Header phone ---------- */
.nav .tel{
  font-family:var(--display); font-size:15px; letter-spacing:.04em;
  color:var(--white); white-space:nowrap;
}
.nav .tel:hover{ color:var(--accent); }

@media(max-width:1080px){ .faculty{ grid-template-columns:repeat(3,1fr); } }
@media(max-width:980px){
  .trust{ grid-template-columns:repeat(2,1fr); }
  .owner{ grid-template-columns:1fr; }
  .gallery{ grid-template-columns:repeat(2,1fr); }
  .gallery a:first-child{ grid-column:span 2; grid-row:auto; aspect-ratio:16/9; }
}
@media(max-width:760px){ .nav .tel{ display:none; } }
@media(max-width:560px){ .faculty{ grid-template-columns:repeat(2,1fr); } }

/* Compact photo hero for inner pages: same treatment as the homepage, shorter,
   so every page reads as part of the same site. */
.hero-photo.compact{ min-height:clamp(300px,42vh,440px); }
.hero-photo.compact .in{ padding-bottom:clamp(30px,4vw,52px); }
.hero-photo.compact .lede{ margin-bottom:0; }
.hero-photo .eyebrow{ text-shadow:none; }

/* ---------- Form tabs ----------
   Four registration forms stacked vertically is ~5,800px of scrolling. One at
   a time, and each iframe only loads when its tab is first opened. */
.tabs{
  display:flex; gap:8px; flex-wrap:wrap; margin-bottom:22px;
  border-bottom:1px solid var(--line); padding-bottom:16px;
}
.tab{
  display:inline-flex; align-items:center; gap:9px;
  padding:12px 20px; border-radius:9px; cursor:pointer;
  background:var(--panel); border:1px solid var(--line); color:var(--silver);
  font-family:var(--display); font-size:14px; letter-spacing:.05em;
  text-transform:uppercase; transition:.18s; white-space:nowrap;
}
.tab:hover{ border-color:rgba(var(--glow),.5); color:var(--white); }
.tab .n{
  display:grid; place-items:center; width:22px; height:22px; border-radius:50%;
  background:rgba(255,255,255,.07); color:var(--dim); font-size:11.5px; flex-shrink:0;
}
.tab[aria-current]{
  background:var(--accent); border-color:var(--accent); color:#fff;
  box-shadow:0 8px 26px rgba(var(--glow),.32);
}
.tab[aria-current] .n{ background:rgba(0,0,0,.22); color:#fff; }
.tab:focus-visible{ outline:2px solid var(--accent-2); outline-offset:2px; }
.tabpanel[hidden]{ display:none; }
.tabpanel .mms-wrap{ margin-top:0; }
/* placeholder while a freshly-opened form loads */
.mms-wrap.loading::after{
  content:"Loading the form\2026"; position:absolute; inset:0;
  display:grid; place-items:center; color:var(--dim); font-size:15px;
  background:var(--bg); pointer-events:none;
}
@media(max-width:620px){
  .tabs{ gap:6px; }
  .tab{ padding:10px 14px; font-size:12.5px; flex:1 1 auto; justify-content:center; }
}

/* The widget prints its own title, so the panel only needs a one-line note. */
.form-note{
  color:var(--dim); font-size:15px; max-width:820px;
  margin:0 auto 18px; text-align:center;
}

/* Our heading, now that the widget's serif one is cropped off. */
.form-title{
  font-size:clamp(24px,3.4vw,34px); text-align:center;
  max-width:820px; margin:0 auto 8px;
}

/* ---------- Hero logo ----------
   The logo is the strongest thing the school owns, so it leads the page rather
   than sitting at 46px in the nav. Sized off the viewport so it stays big on a
   phone without crowding the headline on a desktop. */
/* The crest is transparent artwork now, so it needs no plate behind it: the
   border and radius were there to tidy the edges of a square JPEG. A drop
   shadow follows the actual silhouette instead of a box. */
.hero-mark{
  width:clamp(120px, 12.5vw, 178px);
  margin-bottom:18px;
  /* Stacked black shadows hug the artwork's own outline, so the white line
     work keeps an edge against a white wall without a plate or a pool behind
     it. A radial background was tried first and read as a blob: it darkened a
     large rectangle of photograph that had nothing to do with the logo. */
  filter:drop-shadow(0 0 1px rgba(0,0,0,.95))
         drop-shadow(0 0 3px rgba(0,0,0,.9))
         drop-shadow(0 0 8px rgba(0,0,0,.85))
         drop-shadow(0 0 20px rgba(0,0,0,.7))
         drop-shadow(0 8px 26px rgba(0,0,0,.55));
}
@media(max-width:760px){
  .hero-mark{ width:clamp(110px, 28vw, 150px); margin-bottom:14px; }
}

/* ---------- Programme cards, typographic ----------
   The four rooms already appear in the gallery below, so these lead with the
   name set large instead of repeating the photography. */
.progtype{
  position:relative; overflow:hidden; display:flex; flex-direction:column;
  min-height:300px; padding:30px 28px 26px;
  border:1px solid var(--line); border-radius:16px;
  background:linear-gradient(150deg, var(--panel-2) 0%, var(--panel) 55%);
  transition:.25s;
}
/* oversized ghost numeral in the corner */
.progtype .num{
  position:absolute; top:-24px; right:6px; z-index:0;
  font-family:var(--display); font-size:clamp(120px,13vw,180px); line-height:1;
  color:rgba(255,255,255,.035); transition:.3s; pointer-events:none;
}
.progtype .age{
  position:relative; z-index:1; align-self:flex-start;
  font-size:11px; font-weight:700; letter-spacing:.16em; text-transform:uppercase;
  color:var(--accent); padding:5px 11px; border-radius:100px;
  border:1px solid rgba(var(--glow),.4); background:rgba(var(--glow),.08);
}
.progtype h3{
  position:relative; z-index:1; margin:16px 0 0;
  font-size:clamp(30px,3.6vw,46px); line-height:.92; letter-spacing:.01em;
}
.progtype h3 em{ font-style:normal; color:var(--accent); display:block; }
/* red rule that grows on hover */
.progtype h3::after{
  content:""; display:block; width:52px; height:3px; background:var(--accent);
  margin-top:16px; transition:width .3s ease;
}
.progtype p{ position:relative; z-index:1; color:var(--dim); font-size:15px; margin-top:16px; }
.progtype .cost{
  position:relative; z-index:1; color:var(--gold); font-weight:700;
  font-size:14.5px; margin-top:auto; padding-top:16px;
}
.progtype .go{
  position:relative; z-index:1; margin-top:10px; color:var(--accent);
  font-family:var(--display); font-size:13px; letter-spacing:.08em;
  text-transform:uppercase; opacity:0; transform:translateX(-6px); transition:.25s;
}
.progtype:hover{
  border-color:rgba(var(--glow),.5); transform:translateY(-4px);
  box-shadow:0 22px 60px rgba(0,0,0,.5), 0 0 50px rgba(var(--glow),.10);
}
.progtype:hover .num{ color:rgba(var(--glow),.16); }
.progtype:hover h3::after{ width:100px; }
.progtype:hover .go{ opacity:1; transform:none; }
.progtype:focus-visible{ outline:2px solid var(--accent-2); outline-offset:3px; }
@media(prefers-reduced-motion:reduce){ .progtype,.progtype *{ transition:none; } }

/* ---------- Reviews ---------- */
.review{
  background:var(--panel); border:1px solid var(--line); border-radius:var(--radius);
  padding:26px 24px; position:relative;
}
.review::before{
  content:"\201C"; position:absolute; top:2px; left:16px;
  font-family:var(--display); font-size:64px; line-height:1;
  color:rgba(var(--glow),.22);
}
.review p{ color:var(--white); font-size:16px; line-height:1.6; position:relative; }
.review cite{
  display:block; margin-top:16px; font-style:normal; color:var(--accent);
  font-family:var(--display); font-size:13px; letter-spacing:.08em; text-transform:uppercase;
}
.review cite span{ color:var(--dim); font-family:var(--text),sans-serif; letter-spacing:0;
  text-transform:none; font-size:13.5px; }

/* ---------- One logo above the fold ----------
   The homepage already shows the mark large in the hero, so the small one in
   the bar would be the same logo twice within 40px. It is hidden until you
   scroll past the hero, then fades in so the bar is not anonymous further down
   the page. Inner pages keep it at all times. */
.home header.site .brand{
  opacity:0; pointer-events:none; transform:translateY(-4px);
  transition:opacity .25s ease, transform .25s ease;
}
.home.scrolled header.site .brand{ opacity:1; pointer-events:auto; transform:none; }
@media (prefers-reduced-motion:reduce){
  .home header.site .brand{ transition:none; }
}
/* bigger now that it is the only logo up there */
.hero-mark{ width:clamp(140px, 15vw, 210px); }
@media(max-width:760px){ .hero-mark{ width:clamp(120px, 32vw, 168px); } }

/* ---------- Hero lockup ----------
   Logo sits beside the headline rather than above it, so the mark is featured
   without pushing everything down the page. Stacks on narrow screens. */
.hero-lockup{
  display:flex; align-items:center; gap:clamp(22px,3.4vw,48px);
}
.hero-lockup .hero-mark{
  flex:0 0 auto; margin-bottom:0;
  width:clamp(150px, 19vw, 280px);
}
.hero-copy{ min-width:0; }
/* smaller now that it shares the row with the logo */
.hero-photo h1{ font-size:clamp(30px, 4.4vw, 62px); }
@media(max-width:820px){
  .hero-lockup{ flex-direction:column; align-items:flex-start; gap:16px; }
  .hero-lockup .hero-mark{ width:clamp(120px, 30vw, 170px); }
  .hero-photo h1{ font-size:clamp(30px, 7vw, 52px); }
}

/* ---------- Full-height homepage hero ----------
   Fills the viewport below the sticky header, so the lockup, the buttons and
   the rating are the whole first screen. dvh so mobile browser chrome
   collapsing does not leave a gap; vh is the fallback for older engines.
   Inner pages keep .compact and are unaffected. */
.hero-photo:not(.compact){
  min-height:calc(100vh - 78px);
  min-height:calc(100dvh - 78px);
  align-items:start;
}
.hero-photo:not(.compact) .in{ padding-top:clamp(28px,5vh,64px); padding-bottom:0; }
@media(max-width:820px){
  .hero-photo:not(.compact){ min-height:calc(100dvh - 74px); }
}

/* Now that the hero owns the whole first screen, the lockup scales up to fill
   it. Sizes are viewport-relative so a short laptop shrinks them rather than
   pushing the buttons under the fold. */
.hero-photo:not(.compact) .hero-mark{ width:clamp(160px, 21vw, 340px); }
.hero-photo:not(.compact) h1{ font-size:clamp(34px, 5.2vw, 76px); }
.hero-photo:not(.compact) .badges{ margin-bottom:26px; }
.hero-photo:not(.compact) .btn-row{ margin-top:30px; }
.hero-photo:not(.compact) .rating{ margin-top:30px; }
@media(max-width:820px){
  .hero-photo:not(.compact) .hero-mark{ width:clamp(130px, 34vw, 200px); }
  .hero-photo:not(.compact) h1{ font-size:clamp(32px, 7.4vw, 54px); }
}

/* ---------- Three-column programme chooser ----------
   Narrower columns than the old two-up, so the display type and the ghost
   numeral both step down to suit. */
.progrow .progtype{ min-height:340px; padding:28px 24px 24px; }
.progrow .progtype h3{ font-size:clamp(26px,2.5vw,36px); }
.progrow .progtype .num{ font-size:clamp(96px,8vw,130px); top:-16px; }
.progrow .progtype p{ font-size:14.5px; }

/* The generic .g3 drops to two columns at 980 and one at 760. A three-item
   chooser opts out of the first of those: two-up with a spanning third is not
   a chooser, and laptop windows sit right in that band. Two class selectors,
   so it outranks .g3 wherever it appears. */
.grid.hold3{ grid-template-columns:repeat(3,1fr); }
@media(max-width:760px){ .grid.hold3{ grid-template-columns:1fr; } }

@media(max-width:1180px){
  .progrow{ gap:16px; }
  .progrow .progtype{ padding:24px 20px 20px; min-height:320px; }
  .progrow .progtype h3{ font-size:clamp(22px,2.9vw,32px); }
  .progrow .progtype .num{ font-size:clamp(72px,9vw,110px); }
  .progrow .progtype p{ font-size:14px; }
  .progrow .progtype .cost{ font-size:13.5px; }
}
@media(max-width:760px){
  .progrow .progtype{ min-height:0; }
  .progrow .progtype h3{ font-size:clamp(28px,7vw,38px); }
}

/* Rate cards in a held three-up: tighter at the narrow end so the price and
   the per-lesson line do not collide. */
@media(max-width:1180px){
  .hold3 .rate{ padding:22px 20px; }
  .hold3 .rate .price{ font-size:36px; }
  .hold3 .rate .per{ font-size:12.5px; letter-spacing:.03em; }
  .hold3 .rate .alt{ font-size:13.5px; }
}

/* ---------- Full rate table, behind a disclosure ----------
   Three headline plans carry the page; the remaining four only matter to
   someone actively comparing, so they open on request instead of adding four
   more cards to scroll past. */
.allplans{ margin-top:26px; border:1px solid var(--line); border-radius:14px; background:var(--panel); }
.allplans summary{
  cursor:pointer; padding:16px 22px; font-family:var(--display);
  font-size:14px; letter-spacing:.06em; text-transform:uppercase; color:var(--silver);
  list-style:none; display:flex; align-items:center; gap:10px;
}
.allplans summary::-webkit-details-marker{ display:none; }
.allplans summary::after{ content:"+"; margin-left:auto; color:var(--accent); font-size:20px; line-height:1; }
.allplans[open] summary::after{ content:"\2013"; }
.allplans summary:hover{ color:var(--white); }
.allplans summary:focus-visible{ outline:2px solid var(--accent-2); outline-offset:2px; border-radius:14px; }
.tablewrap{ overflow-x:auto; border-top:1px solid var(--line); }
.ratetable{ width:100%; border-collapse:collapse; min-width:560px; }
.ratetable th,.ratetable td{ padding:13px 22px; text-align:left; border-bottom:1px solid var(--line); font-size:14.5px; }
.ratetable th{
  font-size:11px; letter-spacing:.14em; text-transform:uppercase;
  color:var(--dim); font-weight:700;
}
.ratetable td{ color:var(--dim); vertical-align:top; }
.ratetable td b{ color:var(--white); font-weight:600; }
.ratetable tbody tr:last-child td{ border-bottom:0; }
.ratetable tbody tr:hover td{ background:rgba(255,255,255,.02); }
.tablenote{ padding:14px 22px; color:var(--dim); font-size:13.5px; }

/* ---------- Texture ----------
   Flat black reads like a slide deck. A fine static grain over the whole page
   plus a soft sheen down the top of each panel gives the dark surfaces some
   depth, the way a photographed stage has depth. Both are CSS only: no extra
   requests, and the grain is one small inline SVG rather than a bitmap. */
body::after{
  content:""; position:fixed; inset:0; z-index:70; pointer-events:none;
  opacity:.055; mix-blend-mode:overlay;
  background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='160' height='160'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='0.85' numOctaves='3' stitchTiles='stitch'/%3E%3CfeColorMatrix type='saturate' values='0'/%3E%3C/filter%3E%3Crect width='160' height='160' filter='url(%23n)'/%3E%3C/svg%3E");
}
/* The registration widget is an inverted cross-origin iframe already relying
   on mix-blend-mode; a second blended layer on top of it muddies the form. */
body.has-form::after{ display:none; }

/* Soft light falling down the top edge of each panel. */
.card, .col, .progtype, .allplans{
  background-image:linear-gradient(180deg, rgba(255,255,255,.030), rgba(255,255,255,0) 140px);
}
.progtype{
  background-image:
    linear-gradient(180deg, rgba(255,255,255,.030), rgba(255,255,255,0) 140px),
    linear-gradient(150deg, var(--panel-2) 0%, var(--panel) 55%);
}
@media (prefers-contrast:more){
  body::after{ display:none; }
}

/* ---------- Secondary plan row ----------
   The four plans that are not the headline three: same information, visibly
   subordinate, so the eye lands on the featured row first. */
.miniplans{ margin-top:18px; }
.card.mini{ padding:20px 18px; }
.card.mini h3{ font-size:16px; margin-bottom:6px; }
.card.mini .price{ font-size:28px; }
.card.mini .price sup{ font-size:15px; top:-9px; }
.card.mini .per{ font-size:11.5px; }
.card.mini p{ font-size:13.5px; margin-top:10px; color:var(--dim); }
/* Two class selectors, so this outranks the generic .g4 drop at 980. Four
   across holds while the cards stay readable; below that, two. */
.grid.miniplans{ grid-template-columns:repeat(4,1fr); }
@media(max-width:1180px){
  .miniplans{ gap:14px; }
  .card.mini{ padding:18px 15px; }
  .card.mini h3{ font-size:15px; }
  .card.mini .price{ font-size:25px; }
  .card.mini p{ font-size:13px; }
}
@media(max-width:820px){ .grid.miniplans{ grid-template-columns:repeat(2,1fr); } }
@media(max-width:520px){ .grid.miniplans{ grid-template-columns:1fr; } }

/* Accepted payment methods: a practical footnote to the plans, not a claim
   that needs weight of its own. */
.paymethods{
  margin-top:18px; color:var(--dim); font-size:14px;
  padding-left:14px; border-left:2px solid rgba(var(--glow),.45);
}

/* Third line of the hero statement, standing on its own where the buttons
   used to be. Same voice as the red half of the headline, a step smaller so
   it reads as the payoff rather than a fourth heading. */
.hero-kicker{
  font-family:var(--display); font-weight:800; text-transform:none;
  font-variation-settings:'opsz' 96;
  line-height:.94; letter-spacing:-.03em;
  font-size:clamp(30px, 4.4vw, 62px);
  margin-top:6px;
  /* Third line is black, which needs a white outline to survive on a photo.
     Offsets are in em so the outline scales with the clamped type instead of
     thinning out at large sizes. Eight directions rather than
     -webkit-text-stroke, which paints over the fill in some browsers. */
}
.hero-photo:not(.compact) .hero-kicker{ font-size:clamp(34px, 5.2vw, 76px); margin-top:6px; }
@media(max-width:820px){ .hero-photo:not(.compact) .hero-kicker{ font-size:clamp(32px, 7.4vw, 54px); } }
/* The rating now sits under a section heading rather than in the hero. */
.section-head .rating{ margin-top:14px; }

/* Step Up for Students mark. Their logo is a badge on a white disc, so it sits
   on the dark panel as-is with no plate of its own. */
.sufs-cta{ display:flex; align-items:flex-start; gap:clamp(18px,3vw,30px); }
.sufs-cta > div{ min-width:0; flex:1 1 auto; }
.sufs{ width:clamp(150px,20vw,260px); height:auto; flex:0 0 auto; }
@media(max-width:680px){
  .sufs-cta{ flex-direction:column; }
  .sufs{ width:170px; }
}

/* Her name sits between the eyebrow and the pull quote, sized like a section
   heading rather than a page heading. */
.owner h2{ font-size:clamp(26px,3.6vw,40px); margin:8px 0 16px; }

/* ---------- Homepage hero: drawn, not photographed ----------
   The headline spent several rounds fighting a photograph of a white wall.
   Blurred colour fields and faint diagonal rays give it a surface built for
   it, and the type needs no outline or scrim to survive. */
.hero-photo:not(.compact){ background:var(--bg); }
.hero-photo .field{ position:absolute; inset:-20% -10%; z-index:0; }
.hero-photo .field i{
  position:absolute; display:block; border-radius:50%;
  filter:blur(90px); opacity:.55;
}
.hero-photo .field i:nth-child(1){ width:54vw; height:54vw; left:-8vw; top:-10vw;
  background:radial-gradient(circle, rgba(255,45,60,.55), transparent 68%); }
.hero-photo .field i:nth-child(2){ width:42vw; height:42vw; right:-6vw; top:8vh;
  background:radial-gradient(circle, rgba(196,17,30,.5), transparent 68%); }
.hero-photo .field i:nth-child(3){ width:46vw; height:46vw; left:32vw; bottom:-22vw;
  background:radial-gradient(circle, rgba(255,197,61,.22), transparent 66%); }
.hero-photo .rays{
  position:absolute; inset:0; z-index:1; opacity:.5;
  background:repeating-linear-gradient(105deg,
    transparent 0 42px, rgba(255,255,255,.028) 42px 44px);
  -webkit-mask-image:linear-gradient(180deg, transparent, #000 30%, #000 70%, transparent);
  mask-image:linear-gradient(180deg, transparent, #000 30%, #000 70%, transparent);
}

/* Headline: white, a red gradient, and an outlined ghost. */
.hero-photo:not(.compact) h1{
  color:var(--white); text-shadow:none;
  font-size:clamp(44px,8.4vw,132px); letter-spacing:-.045em;
}
.hero-photo:not(.compact) h1 em{
  color:transparent;
  background:linear-gradient(100deg, var(--accent) 12%, var(--accent-2) 52%, #C4111E 92%);
  -webkit-background-clip:text; background-clip:text;
}
.hero-photo:not(.compact) .hero-kicker{
  color:transparent; text-shadow:none;
  -webkit-text-stroke:1.5px rgba(255,255,255,.62);
  font-size:clamp(44px,8.4vw,132px); letter-spacing:-.045em; margin-top:0;
}
.hero-photo:not(.compact) .hero-mark{
  width:clamp(140px,17vw,280px);
  filter:drop-shadow(0 0 2px rgba(0,0,0,.9)) drop-shadow(0 18px 50px rgba(0,0,0,.65));
}
@media(max-width:820px){
  .hero-photo:not(.compact) h1,
  .hero-photo:not(.compact) .hero-kicker{ font-size:clamp(38px,11vw,64px); }
  .hero-photo:not(.compact) .hero-mark{ width:clamp(120px,34vw,190px); }
}

/* ---------- Design system, second pass ----------
   Components the new type alone did not carry over from the comp. */

/* Teacher portraits go fully greyscale and come to colour on hover, so the
   grid reads as one piece rather than sixteen different photo treatments. */
.faculty img{ filter:grayscale(1) contrast(1.05); }

/* Reviews as pull quotes. */
.review{
  background:linear-gradient(160deg, rgba(255,255,255,.04), transparent 60%), var(--panel);
  border:1px solid var(--line); border-radius:18px; padding:30px 28px;
}
.review::before{
  content:"\201C"; display:block;
  font-family:var(--display); font-weight:800; font-size:56px;
  color:var(--accent); line-height:.6; margin-bottom:14px;
}

/* FAQ rows at display size, with a rotating plus. */
#faq details, .faqlist details{ border-bottom:1px solid var(--line); }
#faq summary, .faqlist summary{
  list-style:none; cursor:pointer; padding:26px 0; display:flex; align-items:center; gap:20px;
  font-family:var(--display); font-weight:600; font-variation-settings:'opsz' 96;
  font-size:clamp(18px,2.2vw,26px); letter-spacing:-.02em;
}
#faq summary::-webkit-details-marker, .faqlist summary::-webkit-details-marker{ display:none; }
#faq summary::after, .faqlist summary::after{
  content:"+"; margin-left:auto; color:var(--accent); font-size:28px; font-weight:400;
  transition:transform .3s;
}
#faq details[open] summary::after, .faqlist details[open] summary::after{ transform:rotate(45deg); }

/* Programme slab: hairline dividers rather than three floating cards. */
#programs .grid.progrow{
  gap:1px; background:var(--line);
  border:1px solid var(--line); border-radius:22px; overflow:hidden;
}
#programs .progrow .progtype{ border:0; border-radius:0; background:var(--panel); }
#programs .progrow .progtype:hover{ transform:none; background:#17171D; box-shadow:none; }

/* Gallery: slower, softer zoom. */
.gallery img{ transition:transform .7s cubic-bezier(.2,.8,.2,1); }
.gallery a:hover img{ transform:scale(1.06); }