/* Self-hosted fonts (SIL Open Font License 1.1): no third-party requests, so the CSP can stay 'self'. */
@font-face { font-family:"Italiana"; font-style:normal; font-weight:400; font-display:swap; src:url("../fonts/italiana-latin.woff2") format("woff2"); }
@font-face { font-family:"Marcellus"; font-style:normal; font-weight:400; font-display:swap; src:url("../fonts/marcellus-latin.woff2") format("woff2"); }
@font-face { font-family:"Montserrat"; font-style:normal; font-weight:400 700; font-display:swap; src:url("../fonts/montserrat-latin-var.woff2") format("woff2"); }

/* Direction: the name as a monument (taste skill, seed 1221278880), kept to TWA's fonts and blue/white/grey palette.
   Idea: TWA's own name becomes the monument, with the band, every generation of it, photographed inside it.
   Motion follows keyframes + interpolation: ease-out for things entering, ease-in-out for things changing in place, 200–500ms, staggered. */
:root {
  /* 2027 brand (the BE and PSX infopacks): off-white paper, grey and white cards, charcoal type, royal blue accents */
  --paper:#f9fafa; --card:#ebebeb; --card-2:#e4e6e8; --line:#dcdddf;
  --white:#ffffff; --mist:#f1f2f3; --mist-2:#e4e6e8; --royal:#4169e1; --royal-press:#2f55c9; --royal-ink:#3157cc;
  --ink:#303132; --on:#303132; --muted:#55585c; --navy:#303132; --navy-2:#ffffff; --sky:#4169e1;
  --display:"Marcellus","Optima",Georgia,serif;
  --wordmark:"Italiana","Didot","Bodoni 72",Georgia,serif;
  --body:"Montserrat","Helvetica Neue",Arial,sans-serif;
  --m:28px;                       /* page margin */
  --s1:15px; --s2:18px; --s3:clamp(28px,3.2vw,44px); --s4:clamp(36px,4.4vw,64px); --s5:clamp(96px,13vw,220px);
  --out:cubic-bezier(.16,.84,.3,1);    /* ease-out, entering */
  --inout:cubic-bezier(.65,0,.35,1);   /* ease-in-out, moving inside the frame */
}
* { box-sizing:border-box; }
html { scroll-behavior:smooth; }
body { margin:0; background:var(--white); color:var(--ink); font-family:var(--body); font-size:var(--s2); line-height:1.55; -webkit-font-smoothing:antialiased; }
img, video { display:block; max-width:100%; }
a { color:inherit; }
:focus-visible { outline:3px solid var(--sky); outline-offset:3px; }
.skip { position:absolute; left:-999px; top:8px; background:var(--white); color:var(--navy); padding:10px 14px; z-index:50; border-radius:999px; }
.skip:focus { left:8px; }
.d { font-family:var(--display); font-weight:400; }
.btn { display:inline-flex; align-items:center; gap:12px; background:var(--royal); color:#ffffff; text-decoration:none; font-weight:600; font-size:var(--s2); padding:18px 26px; border:0; border-radius:999px; cursor:pointer; transition:background-color .2s var(--out), transform .2s var(--out); }
.btn:hover { background:var(--royal-press); }
.btn:active { transform:translateY(1px) scale(.98); }
.btn .arr { transition:transform .3s var(--out); }
.btn:hover .arr { transform:translateX(5px); }
.link { font-weight:600; text-decoration:underline; text-decoration-thickness:2px; text-underline-offset:6px; text-decoration-color:var(--royal); transition:text-decoration-color .2s; }
.link:hover { text-decoration-color:currentColor; }

/* ---------- hero ---------- */
.nav { display:flex; justify-content:flex-end; align-items:center; gap:24px; font-size:var(--s1); font-weight:500; z-index:3; }
.nav a { text-decoration:none; opacity:1; transition:color .2s; white-space:nowrap; }
.nav a:not(.btn):hover { color:var(--sky); }
.nav a[aria-current="page"] { text-decoration:underline; text-decoration-thickness:2px; text-underline-offset:6px; text-decoration-color:var(--sky); }
.nav .btn { padding:12px 18px; font-size:var(--s1); }

/* ---------- intro ---------- */
.intro { background:var(--mist); padding:120px var(--m) 0; overflow:hidden; }
.intro-top { display:grid; grid-template-columns:5fr 6fr; gap:56px; align-items:center; }
.intro-copy { display:grid; gap:20px; align-content:start; }
.intro h2 { margin:0 0 8px; font-size:var(--s4); color:var(--navy); }
.intro-copy p { margin:0; max-width:44ch; }
.intro-copy p b { color:var(--navy); }
.facts { margin:72px 0 0; display:grid; grid-template-columns:repeat(4,1fr); gap:24px; background:var(--navy); color:var(--on); padding:40px 36px; }
.facts div { display:grid; gap:8px; }
.facts dt { font-family:var(--display); font-size:var(--s4); line-height:1; color:var(--sky); }
.facts dd { margin:0; font-size:var(--s1); line-height:1.45; max-width:22ch; }

/* ---------- tabs with a sliding bar (instrument pages: the three ways to learn) ---------- */
.tabs { position:relative; display:flex; flex-wrap:wrap; gap:6px 26px; font-size:var(--s2); }
.tabs button { background:none; border:0; padding:10px 0; font:inherit; font-weight:600; color:var(--muted); cursor:pointer; transition:color .25s var(--inout); }
.tabs button[aria-selected="true"] { color:var(--navy); }
.tabs .bar { position:absolute; left:0; bottom:0; height:4px; background:var(--royal); transition:transform .4s var(--inout), width .4s var(--inout); }

/* ---------- performances ---------- */
.stage { padding:150px var(--m) 110px; }
.stage-head { display:flex; justify-content:space-between; align-items:flex-end; gap:40px; flex-wrap:wrap; }
.stage h2 { margin:0; font-size:var(--s4); color:var(--navy); }
.stage h2 span { display:block; padding-left:1.4em; }
.stage .note { margin:0; max-width:44ch; color:var(--muted); }
.gigs { list-style:none; margin:64px 0 0; padding:0; display:grid; gap:0; }
.gigs li { display:grid; grid-template-columns:260px 220px 1fr; gap:36px; align-items:center; padding:20px; }
.gigs li:nth-child(odd) { background:var(--mist); }
.gigs img { width:100%; height:auto; aspect-ratio:16/10; object-fit:cover; transition:transform .5s var(--out); }
.gigs li:hover img { transform:scale(1.03); }
.gigs .when { font-family:var(--display); font-size:var(--s3); color:var(--royal); white-space:nowrap; }
.gigs .what { display:grid; gap:6px; }
.gigs .what b { font-size:20px; color:var(--navy); }
.gigs .what span { color:var(--muted); font-size:var(--s1); }

/* ---------- visit ---------- */
.visit { padding:100px var(--m); display:grid; grid-template-columns:1fr 1fr; gap:56px; align-items:end; }
.visit h2 { margin:0; font-size:var(--s4); color:var(--navy); }
.visit .addr { margin:20px 0 14px; font-size:22px; line-height:1.5; }
.visit .talk { display:grid; gap:0; }
.visit .row { display:flex; justify-content:space-between; gap:16px; padding:20px 18px; background:var(--mist); margin-bottom:8px; text-decoration:none; font-size:var(--s2); transition:color .2s, padding-left .35s var(--out); }
.visit .row span { color:var(--muted); }
.visit .row b { color:var(--navy); }
.visit .row:hover { padding-left:10px; }
.visit .row:hover b { color:var(--royal); }
.visit .btn { margin-top:24px; justify-content:space-between; }

/* ---------- footer ---------- */
footer { background:var(--navy); color:var(--on); display:grid; grid-template-columns:minmax(0,1fr); grid-template-rows:auto auto auto; row-gap:56px; padding:72px var(--m) 20px; overflow:hidden; }
footer .big { grid-row:3; display:block; width:100%; height:auto; overflow:visible; transform-origin:50% 100%; }
footer .legal { grid-row:4; margin-top:-74px; font-size:13px; color:var(--muted); display:flex; justify-content:space-between; gap:20px; flex-wrap:wrap; }

/* ---------- entrances (content is visible without script) ---------- */
.js .rise { opacity:0; transform:translateY(26px); transition:opacity .5s var(--out), transform .5s var(--out); transition-delay:calc(var(--i,0) * 80ms); }
.js .rise.in { opacity:1; transform:none; }

/* ---------- phone ---------- */
@media (max-width:820px) {
  :root { --m:16px; }
  .nav > a:not(.btn):not(.brand), .nav > .dd { display:none; }
  .intro { padding-top:88px; }
  .intro-top { grid-template-columns:1fr; gap:36px; }
  .facts { grid-template-columns:1fr 1fr; padding:28px 22px; margin-top:44px; }
  .stage { padding:100px var(--m) 80px; }
  .gigs li { grid-template-columns:1fr; gap:12px; padding:16px; }
  .visit { grid-template-columns:1fr; gap:36px; padding:72px var(--m); }
  .visit .row { flex-direction:column; gap:2px; }
}
@media (prefers-reduced-motion:reduce) {
  *, *::before, *::after { animation:none !important; transition:none !important; }
  .js .rise { opacity:1 !important; transform:none !important; }
}

/* stagger steps and photo crops (classes instead of inline styles, so the CSP needs no 'unsafe-inline') */
.d0 { --i:0; } .d1 { --i:1; } .d2 { --i:2; } .d3 { --i:3; }

/* 404 */
.notfound { min-height:100svh; display:grid; place-content:center; justify-items:start; gap:20px; padding:40px var(--m); background:var(--navy); color:var(--on); }
.notfound .d { margin:0; font-size:var(--s5); line-height:.8; color:var(--sky); }
.notfound h1 { margin:0; font-weight:500; font-size:var(--s3); }
.notfound p { margin:0; }

/* ---------- inner pages: top bar ---------- */
.topbar { background:var(--navy); color:var(--on); display:flex; justify-content:space-between; align-items:center; gap:24px; padding:20px var(--m); position:relative; z-index:5; }
.topbar .home { font-family:var(--display); font-size:30px; line-height:1; text-decoration:none; letter-spacing:-0.01em; white-space:nowrap; }

/* ---------- about ---------- */

.beliefs { margin:72px 0 0; display:grid; gap:0; }
.beliefs div { display:grid; grid-template-columns:5fr 7fr; gap:40px; padding:28px 24px; }
.beliefs div:nth-child(odd) { background:var(--mist); }
.beliefs dt { font-family:var(--display); font-size:var(--s3); line-height:1.05; color:var(--royal); }
.beliefs dd { margin:0; max-width:56ch; align-self:center; }
.strip { margin-top:72px; display:grid; grid-template-columns:repeat(3,minmax(0,1fr)); gap:16px; }
.strip img { width:100%; height:auto; aspect-ratio:3/4; object-fit:cover; }

.a-story { background:var(--mist); padding:140px var(--m) 120px; }
.a-story h2 { margin:0; font-size:var(--s4); color:var(--navy); }
.years { list-style:none; margin:64px 0 0; padding:0; display:grid; gap:56px; }
.years > li { display:grid; grid-template-columns:220px 1fr; gap:24px 48px; align-items:start; }
.yr { margin:0; font-family:var(--display); font-weight:400; font-size:var(--s4); line-height:.9; color:var(--royal); grid-row:span 2; }
.yr-photo { width:100%; height:auto; max-height:420px; aspect-ratio:4/3; object-fit:cover; }
.years ul { list-style:none; margin:0; padding:0; display:grid; gap:18px; }
.years ul li { display:grid; grid-template-columns:240px 1fr; gap:24px; }
.years ul b { color:var(--navy); font-weight:700; }

.a-team { padding:150px var(--m) 120px; }
.team-head { display:grid; grid-template-columns:5fr 7fr; gap:48px; align-items:end; }
.team-head h2 { margin:0; font-size:var(--s4); color:var(--navy); }
.team-head p { margin:0; max-width:58ch; }

.a-partners { background:var(--navy); color:var(--on); padding:120px var(--m); }
.a-partners h2 { margin:0; font-size:var(--s4); }
.partner-cols { margin-top:56px; display:grid; grid-template-columns:repeat(3,minmax(0,1fr)); gap:40px; }
.partner-cols h3 { margin:0 0 10px; color:var(--sky); font-size:var(--s2); }
.partner-cols p { margin:0; max-width:36ch; }

.a-cta { background:var(--mist); color:var(--navy); padding:170px var(--m) 150px; }
.a-cta h2 { margin:0; font-size:var(--s4); max-width:20ch; }
.a-cta-act { display:flex; align-items:center; gap:28px; flex-wrap:wrap; }
.btn.btn-light { background:var(--white); color:var(--navy); }
.btn.btn-light:hover { background:var(--royal); color:#ffffff; }
.link.link-light { color:var(--on); text-decoration-color:var(--sky); }

@media (max-width:820px) {
  .topbar { flex-wrap:wrap; }
  .topbar .home { font-size:24px; }
  .topbar .nav { width:100%; justify-content:space-between; }
  .a-team { padding:96px var(--m) 80px; }
  .beliefs div { grid-template-columns:1fr; gap:10px; }
  .strip { grid-template-columns:1fr 1fr; }
  .strip img:last-child { display:none; }
  .a-story { padding:96px var(--m) 80px; }
  .years > li { grid-template-columns:1fr; }
  .yr { grid-row:auto; }
  .years ul li { grid-template-columns:1fr; gap:4px; }
  .team-head { grid-template-columns:1fr; gap:20px; }
  .a-partners { padding:88px var(--m); }
  .partner-cols { grid-template-columns:1fr; gap:28px; }
}

/* ---------- band experience ---------- */
.b-hero { background:var(--navy); color:var(--on); display:grid; grid-template-columns:6fr 5fr; gap:56px; align-items:center; padding:72px var(--m) 96px; }
.b-hero-copy { display:grid; gap:22px; align-content:center; }
.b-hero h1 { margin:0; font-size:var(--s4); }
.b-hero .statement { margin:0; font-family:var(--display); font-size:clamp(24px,2.4vw,34px); line-height:1.2; color:var(--sky); }
.b-hero-copy > p:not(.statement) { margin:0; max-width:52ch; color:var(--muted); }
.b-facts { margin:8px 0 0; display:grid; grid-template-columns:repeat(3,minmax(0,1fr)); gap:12px; }
.b-facts div { background:var(--navy-2); padding:16px 18px; }
.b-facts dt { color:var(--sky); font-size:var(--s1); font-weight:600; }
.b-facts dd { margin:4px 0 0; font-weight:600; }
.b-act { display:flex; align-items:center; gap:24px; flex-wrap:wrap; margin-top:6px; }

.b-format { padding:150px var(--m) 120px; }
.b-format h2, .b-who h2, .b-join h2, .b-cal h2 { margin:0; font-size:var(--s4); color:var(--navy); }
.b-format .lead { margin:24px 0 0; max-width:56ch; font-size:20px; }
.sessions { list-style:none; margin:64px 0 0; padding:0; display:grid; grid-template-columns:repeat(3,minmax(0,1fr)); gap:24px; }
.sessions li { display:grid; gap:12px; align-content:start; }
.sessions img, .sessions video { width:100%; height:auto; aspect-ratio:4/5; object-fit:cover; }
.sessions h3 { margin:8px 0 0; font-family:var(--display); font-weight:400; font-size:var(--s3); color:var(--navy); line-height:1.05; }
.sessions p { margin:0; }
.skills { margin-top:64px; background:var(--navy); color:var(--on); padding:32px 36px; display:grid; grid-template-columns:auto 1fr; gap:32px; align-items:center; }
.skills h3 { margin:0; font-family:var(--display); font-weight:400; font-size:var(--s3); color:var(--sky); white-space:nowrap; }

.b-who { background:var(--mist); padding:120px var(--m); }
.who-head { display:grid; grid-template-columns:5fr 7fr; gap:48px; align-items:end; }
.who-head p { margin:0; max-width:56ch; }
.instruments { list-style:none; margin:48px 0 0; padding:0; display:flex; flex-wrap:wrap; gap:10px; }
.instruments li { background:var(--card); color:var(--ink); font-weight:600; padding:12px 20px; border-radius:999px; }

.b-join { padding:140px var(--m) 120px; }
.paths { margin-top:56px; display:grid; grid-template-columns:7fr 5fr; gap:20px; }
.path { background:var(--mist); padding:40px; display:grid; gap:16px; align-content:start; }
.path h3 { margin:0; font-family:var(--display); font-weight:400; font-size:var(--s3); color:var(--navy); line-height:1.05; }
.path p { margin:0; max-width:52ch; }
.path.dark { background:var(--navy); color:var(--on); }

.b-cal { background:var(--mist); padding:48px var(--m) 44px; }
.cal-head { display:flex; justify-content:space-between; align-items:flex-end; gap:24px; flex-wrap:wrap; }
.b-cal .next-up { margin:0; font-weight:600; color:var(--navy); background:var(--white); padding:12px 18px; }
.legend { list-style:none; margin:32px 0 0; padding:0; display:flex; flex-wrap:wrap; gap:10px 24px; font-size:var(--s1); }
.legend li { display:flex; align-items:center; gap:8px; }
.legend li::before { content:""; width:16px; height:16px; border-radius:50%; background:var(--navy); }
.legend li.m::before { background:var(--white); box-shadow:inset 0 0 0 2px var(--royal); }
.legend li.p::before { background:var(--royal); border-radius:4px; }
.months { list-style:none; margin:32px 0 0; padding:0; display:grid; grid-template-columns:repeat(4,minmax(0,1fr)); gap:12px; }
.month { background:var(--white); padding:20px 20px 18px; display:grid; gap:12px; align-content:start; }
.month h3 { margin:0; font-family:var(--display); font-weight:400; font-size:26px; color:var(--navy); }
.days { list-style:none; margin:0; padding:0; display:flex; flex-wrap:wrap; gap:8px; min-height:44px; }
.day { width:44px; height:44px; border-radius:50%; display:grid; place-items:center; font-weight:700; background:var(--navy); color:#ffffff; font-variant-numeric:tabular-nums; transition:transform .3s var(--out); }
.day.m { background:var(--white); color:var(--royal); box-shadow:inset 0 0 0 2px var(--royal); }
.day.p { background:var(--royal); border-radius:8px; }
.day.next { transform:scale(1.12); outline:3px solid var(--sky); outline-offset:3px; }
.day .sr, .sr { position:absolute; width:1px; height:1px; overflow:hidden; clip:rect(0 0 0 0); white-space:nowrap; }
.mnote { margin:0; font-size:var(--s1); color:var(--muted); }

.b-price { padding:140px var(--m) 120px; }
.b-price .sentence { margin:0; font-family:var(--display); font-size:clamp(48px,7vw,110px); color:var(--navy); }
.b-price .tag { display:inline-block; white-space:nowrap; color:#ffffff; background:var(--royal); padding:0 .15em; }
.price-grid { margin-top:56px; display:grid; grid-template-columns:repeat(3,minmax(0,1fr)); gap:32px; }
.price-grid h3, .rentals h3 { margin:0 0 10px; color:var(--royal); font-size:var(--s2); }
.price-grid p { margin:0; }
.rentals { margin-top:64px; }
.rentals table { width:100%; border-collapse:collapse; }
.rentals th { text-align:left; color:var(--muted); font-weight:600; font-size:var(--s1); padding:0 16px 10px 0; }
.rentals td { padding:18px 16px 18px 0; vertical-align:top; }
.rentals tbody tr:nth-child(odd) td { background:var(--mist); }
.rentals td:first-child { width:200px; padding-left:16px; }
.rentals td b { display:block; font-size:20px; font-weight:700; color:var(--navy); }
.rentals td span { font-size:var(--s1); color:var(--muted); }

@media (max-width:1100px) { .months { grid-template-columns:repeat(3,minmax(0,1fr)); } }
@media (max-width:820px) {
  .b-hero { grid-template-columns:1fr; gap:36px; padding:48px var(--m) 64px; }
  .b-facts { grid-template-columns:1fr; }
  .b-format, .b-join, .b-price { padding:96px var(--m) 80px; }
  .sessions { grid-template-columns:1fr; }
  .sessions img, .sessions video { aspect-ratio:4/3; }
  .skills { grid-template-columns:1fr; gap:10px; }
  .b-who { padding:88px var(--m); }
  .who-head { grid-template-columns:1fr; gap:16px; }
  .paths { grid-template-columns:1fr; }
  .path { padding:28px 22px; }
  .months { grid-template-columns:1fr 1fr; }
  .price-grid { grid-template-columns:1fr; gap:24px; }
  .rentals td:first-child { width:120px; }
}

/* ---------- logo in the navigation ---------- */
.topbar .home { display:inline-flex; align-items:center; gap:12px; }
.topbar .home img { width:40px; height:40px; display:block; }
.topbar .home img { max-width:none; flex:none; }

/* ---------- moving between pages: the old page fades out, the new one fades in and its text rises (supported browsers) ---------- */
@view-transition { navigation: auto; }
.topbar { view-transition-name: topbar; }
::view-transition-old(root) { animation: vt-out .22s cubic-bezier(.4,0,1,1) both; }
::view-transition-new(root) { animation: vt-in .45s var(--out) both; }
@keyframes vt-out { to { opacity:0; } }
@keyframes vt-in { from { opacity:0; transform:translateY(14px); } }
@media (prefers-reduced-motion:reduce) {
  ::view-transition-old(root), ::view-transition-new(root) { animation:none; }
}
@media (max-width:820px) {
  .topbar .home img { width:34px; height:34px; }
}

/* ---------- phone menu ---------- */
.mmenu { display:none; position:relative; }
.mmenu summary { list-style:none; cursor:pointer; font-weight:600; padding:11px 20px; border-radius:999px; background:var(--card); color:var(--ink); }
.mmenu summary::-webkit-details-marker { display:none; }
.mmenu[open] summary { background:var(--card-2); }
.mmenu-panel { position:absolute; left:0; top:calc(100% + 6px); max-width:calc(100vw - 32px); min-width:220px; background:var(--white); display:grid; padding:10px; z-index:20; border-radius:18px; box-shadow:0 18px 40px -14px rgba(48,49,50,.4); }
.mmenu-panel a { color:var(--navy); padding:12px 14px; font-weight:600; border-radius:999px; }
.mmenu-panel a:hover, .mmenu-panel a[aria-current="page"] { background:var(--mist); text-decoration:none; }
@media (max-width:820px) {
  .mmenu { display:block; }
  .nav { gap:10px; }
  .nav .btn { padding:12px 14px; }
  .topbar .nav { width:auto; }
  .topbar { flex-wrap:nowrap; }
  .topbar .home span { display:none; }
}

/* ---------- team ---------- */
.t-hero { background:var(--navy); color:var(--on); padding:80px var(--m) 110px; display:grid; grid-template-columns:5fr 7fr; gap:56px; align-items:start; }
.t-hero h1 { margin:0; font-size:var(--s4); }
.t-intro { display:grid; gap:20px; }
.t-intro .statement { margin:0; font-family:var(--display); font-size:clamp(24px,2.4vw,34px); line-height:1.2; max-width:34ch; }
.t-intro p:not(.statement) { margin:0; max-width:58ch; color:var(--muted); }
.t-lead { padding:140px var(--m) 80px; }
.t-lead h2, .t-faculty h2 { margin:0; font-size:var(--s4); color:var(--navy); }
.person { display:grid; gap:10px; align-content:start; }
.person h3, .person h4 { margin:0; font-family:var(--display); font-weight:400; font-size:var(--s3); color:var(--navy); line-height:1.05; }
.person .role { margin:0; color:var(--royal); font-weight:700; }
.person p { margin:0; max-width:64ch; }
.t-faculty { background:var(--mist); padding:120px var(--m); }
.fam { margin:0; font-size:var(--s2); color:var(--muted); font-weight:600; }
.more-link { margin:32px 0 0; }
.b-faculty { background:var(--navy); color:var(--on); padding:72px var(--m); display:grid; grid-template-columns:minmax(0,4fr) minmax(0,6fr) auto; gap:24px 48px; align-items:center; }
.b-faculty h2 { margin:0; font-family:var(--display); font-weight:400; font-size:var(--s3); }
.fac-list { list-style:none; margin:0; padding:0; display:flex; flex-wrap:wrap; gap:12px 32px; }
.fac-list li { display:grid; }
.fac-list b { font-weight:600; }
.fac-list span { color:var(--sky); font-size:var(--s1); }
@media (max-width:820px) {
  .t-hero { grid-template-columns:1fr; gap:28px; padding:48px var(--m) 72px; }
  .t-lead { padding:96px var(--m) 56px; }
  .t-faculty { padding:88px var(--m); }
  .b-faculty { grid-template-columns:1fr; padding:64px var(--m); }
}
.t-strip { padding:0 var(--m); margin-top:-56px; position:relative; }
.t-strip img { aspect-ratio:4/3; object-position:50% 22%; }
@media (max-width:820px) { .t-strip { margin-top:24px; } }
/* PSX Family and Team: all three photos on phones too, one under another (rental and studio strips keep two) */
@media (max-width:720px) { .t-strip:not(.s-strip) { grid-template-columns:1fr; } .t-strip:not(.s-strip) img:last-child { display:block; } }
.s-strip { margin-top:0; padding-top:96px; }
.s-where { padding-bottom:40px; }
.s-where .b-act { margin-top:32px; }
.crew-fam { margin-top:72px; }
.crew { margin-top:24px; display:grid; grid-template-columns:repeat(2,minmax(0,1fr)); gap:20px; }
.crew-core { margin-top:20px; }
.card-p { background:var(--white); gap:0; grid-template-columns:minmax(0,2fr) minmax(0,3fr); align-content:stretch; }
.crew-core .card-p { background:var(--mist); }
.card-p img { display:block; width:100%; height:100%; min-height:320px; object-fit:cover; }
.card-p > div { display:grid; gap:10px; align-content:start; padding:32px 32px 36px; }
.card-p h3, .card-p h4 { font-size:clamp(26px,2.2vw,34px); }
@media (max-width:1020px) { .crew { grid-template-columns:1fr; } .crew-fam { margin-top:56px; } }
@media (max-width:560px) {
  .card-p { grid-template-columns:88px 1fr; column-gap:16px; row-gap:10px; padding:22px; align-items:center; }
  .card-p > div { display:contents; }
  .card-p img { grid-row:1 / span 2; width:88px; height:110px; min-height:0; }
  .card-p h3, .card-p h4 { align-self:end; font-size:26px; }
  .card-p .role { align-self:start; }
  .card-p p:not(.role) { grid-column:1 / -1; }
  .card-p .role + p { margin-top:8px; }
}

/* ---------- private lessons ---------- */
.p-hero { background:var(--navy); color:var(--on); display:grid; grid-template-columns:7fr 5fr; gap:56px; align-items:center; padding:72px var(--m) 96px; }
.p-hero-copy { display:grid; gap:22px; }
.p-hero h1 { margin:0; font-size:var(--s4); }
.p-hero .statement { margin:0; font-family:var(--display); font-size:clamp(24px,2.4vw,34px); line-height:1.2; color:var(--sky); }
.p-hero-copy > p:not(.statement) { margin:0; max-width:54ch; color:var(--muted); }
.p-hero-photo { width:100%; height:auto; aspect-ratio:1/1; object-fit:cover; }
.p-why { padding:150px var(--m) 100px; }
.p-why h2, .p-support h2, .p-prices h2 { margin:0; font-size:var(--s4); color:var(--navy); }
.p-support h2 { font-size:clamp(40px,4.6vw,66px); }
.p-why .lead { margin:24px 0 0; max-width:56ch; font-size:20px; }
.foot-note { margin:20px 0 0; font-size:var(--s1); color:var(--muted); }
.p-support { padding:40px var(--m) 140px; display:grid; grid-template-columns:5fr 7fr; gap:56px; align-items:center; }
.p-support-copy { display:grid; gap:18px; }
.p-support-copy p { margin:0; max-width:52ch; }
.p-support-photos { display:grid; grid-template-columns:1fr 1fr; gap:16px; }
.p-support-photos img { width:100%; height:auto; aspect-ratio:4/5; object-fit:cover; }
.p-prices { padding:140px var(--m) 80px; }
.plans2 { margin-top:56px; display:grid; grid-template-columns:1fr 1fr; gap:20px; }
.plan2 { background:var(--mist); padding:40px; display:grid; gap:10px; align-content:start; }
.plan2.feature { background:var(--navy); color:var(--on); }
.plan2 h3 { margin:0; font-family:var(--display); font-weight:400; font-size:var(--s3); line-height:1.05; color:var(--navy); }
.plan2 .amount { margin:0; font-size:20px; }
.plan2 .amount { color:var(--royal); }
.plan2 .amount b { font-size:30px; font-weight:700; }
.plan2 .fine { margin:0; font-size:var(--s1); color:var(--muted); }
.plan2 ul { margin:16px 0 0; padding-left:20px; display:grid; gap:6px; }
.p-notes { margin-top:40px; display:grid; gap:12px; max-width:72ch; }
.p-notes p { margin:0; }
@media (max-width:820px) {
  .p-hero { grid-template-columns:1fr; gap:36px; padding:48px var(--m) 64px; }
  .p-hero h1 { font-size:9.4vw; }
  .p-why { padding:96px var(--m) 64px; }
  .p-support { grid-template-columns:1fr; gap:32px; padding:24px var(--m) 88px; }
  .p-prices { padding:96px var(--m) 56px; }
  .plans2 { grid-template-columns:1fr; }
  .plan2 { padding:28px 22px; }
}

/* ---------- dropdown menu ---------- */
.nav-link, .dd-btn { color:inherit; text-decoration:none; font:inherit; font-weight:500; white-space:nowrap; transition:color .2s; }
.nav-link:hover, .dd-btn:hover { color:var(--sky); }
.dd { position:relative; }
.dd-btn { background:none; border:0; padding:8px 0; cursor:pointer; display:inline-flex; align-items:center; gap:8px; }
.dd-btn::after { content:""; width:7px; height:7px; border-right:2px solid currentColor; border-bottom:2px solid currentColor; transform:translateY(-2px) rotate(45deg); transition:transform .25s var(--out); }
.dd.open .dd-btn::after { transform:translateY(1px) rotate(225deg); }
.dd.current .dd-btn, .nav > .nav-link[aria-current="page"] { text-decoration:underline; text-decoration-thickness:2px; text-underline-offset:6px; text-decoration-color:var(--sky); }
.dd-panel { position:absolute; left:-24px; top:100%; padding-top:14px; width:max-content; min-width:300px; display:grid; gap:2px; opacity:0; visibility:hidden; transform:translateY(-8px); transition:opacity .22s var(--out), transform .3s var(--out), visibility 0s linear .3s; z-index:30; }
.dd-panel::before { content:""; position:absolute; inset:14px 0 0; background:var(--white); z-index:-1; border-radius:18px; transition:box-shadow .3s var(--out); }
.dd.open .dd-panel::before, .dd:hover .dd-panel::before { box-shadow:0 18px 40px -12px rgba(21,42,110,.45); }
.dd-panel a { display:grid; grid-template-columns:1fr auto; column-gap:16px; padding:14px 22px; border-radius:12px; color:var(--navy); text-decoration:none; transition:background-color .2s, color .2s; }
.dd-panel a:first-child { margin-top:8px; }
.dd-panel a:last-child { margin-bottom:8px; }
.dd-panel a::after { content:"\2192"; grid-column:2; grid-row:1 / span 2; align-self:center; color:var(--royal); opacity:0; transform:translateX(-6px); transition:opacity .2s, transform .25s var(--out); }
.dd-t { font-weight:600; font-size:16px; white-space:nowrap; }
.dd-d { font-size:13px; color:var(--muted); margin-top:3px; white-space:nowrap; }
.dd-panel a:hover, .dd-panel a:focus-visible { background:var(--mist); }
.dd-panel a:hover .dd-t, .dd-panel a:focus-visible .dd-t { color:var(--royal); }
.dd-panel a:hover::after, .dd-panel a:focus-visible::after { opacity:1; transform:none; }
.dd-panel a[aria-current="page"] { background:var(--mist); }
.dd-panel a[aria-current="page"] .dd-t { color:var(--royal); }
.dd-panel a { opacity:0; transform:translateY(6px); }
.dd.open .dd-panel a, .dd:hover .dd-panel a { opacity:1; transform:none; transition:opacity .25s var(--out), transform .3s var(--out), background-color .2s, color .2s; }
.dd.open .dd-panel a.j1, .dd:hover .dd-panel a.j1 { transition-delay:.05s, .05s, 0s, 0s; }
.dd.open .dd-panel a.j2, .dd:hover .dd-panel a.j2 { transition-delay:.1s, .1s, 0s, 0s; }
.dd.open .dd-panel { opacity:1; visibility:visible; transform:none; transition:opacity .22s var(--out), transform .3s var(--out), visibility 0s; }
@media (hover:hover) { .dd:hover .dd-panel { opacity:1; visibility:visible; transform:none; transition:opacity .22s var(--out), transform .3s var(--out), visibility 0s; } }
.dd:last-of-type .dd-panel { left:auto; right:-24px; }
.mgroup { margin:8px 14px 2px; font-size:13px; font-weight:700; color:var(--muted); }
.mgroup:first-child { margin-top:4px; }
.rentals { scroll-margin-top:24px; }
.dd-panel a[aria-current="page"], .mmenu-panel a[aria-current="page"] { text-decoration:none; }

/* ---------- band experience: beginner path, music for life, FAQ ---------- */
.months3 { list-style:none; margin:4px 0 0; padding:0; display:grid; gap:10px; }
.months3 li { display:grid; gap:2px; }
.months3 b { color:var(--navy); }
.months3 span { font-size:var(--s1); color:var(--muted); }
.path.dark .btn { justify-self:start; margin-top:8px; }
.cal-note { margin:12px 0 0; max-width:60ch; flex-basis:100%; }
.b-price .lead { margin:28px 0 0; max-width:60ch; font-size:20px; }
.fine-print { margin:14px 0 0; font-size:var(--s1); color:var(--muted); max-width:72ch; }
.rentals td:not(:first-child) { white-space:nowrap; }
.b-faq { padding:120px var(--m); }
.b-faq h2 { margin:0; font-size:var(--s4); color:var(--navy); }
.faqs { margin-top:48px; display:grid; gap:8px; max-width:900px; }
.faqs details { background:var(--mist); border-radius:16px; }
.faqs summary { cursor:pointer; list-style:none; padding:22px 26px; font-weight:600; color:var(--navy); display:flex; justify-content:space-between; gap:20px; }
.faqs summary::-webkit-details-marker { display:none; }
.faqs summary::after { content:"+"; font-size:22px; line-height:1; color:var(--royal); transition:transform .25s var(--out); }
.faqs details[open] summary::after { transform:rotate(45deg); }
.faqs details p { margin:0; padding:0 26px 24px; max-width:70ch; }
@media (max-width:820px) {
  .b-faq { padding:88px var(--m); }
  .rentals table { font-size:15px; }
  .rentals td:not(:first-child) { white-space:normal; }
}
.rentals table.rt3 td:first-child { width:auto; padding-left:16px; }
.rentals table.rt3 td:not(:first-child), .rentals table.rt3 th:not(:first-child) { width:210px; }
@media (max-width:820px) { .rentals table.rt3 td:not(:first-child), .rentals table.rt3 th:not(:first-child) { width:auto; } }

/* ---------- concerts ---------- */
.c-watch { padding:140px var(--m) 40px; }
.c-watch h2, .c-past h2 { margin:0; font-size:var(--s4); color:var(--navy); }
.c-watch .lead { margin:24px 0 0; max-width:56ch; font-size:20px; }
.vids { margin-top:56px; display:grid; grid-template-columns:repeat(2,minmax(0,1fr)); gap:24px; }
.vid { margin:0; display:grid; grid-template-columns:minmax(0,1fr); gap:16px; }
.vid-frame { aspect-ratio:16/9; background:var(--navy); }
.vid-frame iframe { display:block; width:100%; height:100%; border:0; }
.vid-link { position:relative; display:block; overflow:hidden; }
.vid-link img { display:block; width:100%; height:100%; object-fit:cover; transition:transform .6s var(--ease, ease); }
.vid-link:hover img, .vid-link:focus-visible img { transform:scale(1.03); }
.vid figcaption { display:grid; gap:4px; }
.vid figcaption b { font-family:var(--display); font-weight:400; font-size:var(--s3); line-height:1.05; color:var(--navy); }
.vid figcaption span { color:var(--muted); max-width:52ch; }
.c-past { background:var(--mist); padding:120px var(--m); }
.c-next { background:var(--white); padding-bottom:0; }
.c-recent { margin-top:96px; }
.c-next .c-list li { background:var(--mist); }
.c-list { list-style:none; margin:56px 0 0; padding:0; display:grid; gap:12px; }
.c-list li { background:var(--white); display:grid; grid-template-columns:160px minmax(0,4fr) minmax(0,6fr); gap:24px; align-items:baseline; padding:24px 28px; }
.c-list time { color:var(--royal); font-weight:700; }
.c-list b { font-family:var(--display); font-weight:400; font-size:var(--s3); line-height:1.05; color:var(--navy); }
.c-list span { color:var(--ink, inherit); max-width:56ch; }
@media (max-width:820px) {
  .c-watch { padding:96px var(--m) 24px; }
  .vids { grid-template-columns:1fr; }
  .c-past { padding:88px var(--m); }
  .c-list li { grid-template-columns:1fr; gap:6px; padding:22px; }
}

/* ---------- inner pages: the home page's own moves, carried through ----------
   Same content and order; only the generic kit is swapped for what the home page already does:
   the photograph runs to the edges of the navy field, facts sit as plain text, list rows are
   separated by space instead of grey stripes, prices are set large in Italiana like "$138",
   and every page ends on the home page's big sentence rather than a flat blue band. */
.b-hero, .p-hero { padding:0 0 0 var(--m); align-items:stretch; }
.b-hero-copy, .p-hero-copy { padding:80px 0 104px; align-content:center; }
.p-hero-photo { height:100%; min-height:560px; aspect-ratio:auto; }
.b-facts { gap:12px 40px; grid-template-columns:repeat(3,max-content); }
.b-facts div { background:none; padding:0 0 0 16px; border-left:4px solid var(--royal); }
.beliefs div:nth-child(odd) { background:none; }
.beliefs { gap:12px; }
.beliefs div { padding:30px 0; }
.plan2 .amount b { display:block; margin-top:4px; font-family:var(--display); font-weight:400; font-size:clamp(56px,5.4vw,84px); line-height:.95; letter-spacing:-0.02em; }
.a-cta-act { margin-top:56px; justify-content:flex-end; }
.a-cta .btn.btn-light { background:var(--royal); color:#ffffff; }
.a-cta .btn.btn-light:hover { background:var(--royal-press); }
.faqs summary { font-size:20px; padding:24px 28px; }
@media (max-width:820px) {
  .b-hero, .p-hero { padding:0; gap:0; }
  .b-hero-copy, .p-hero-copy { padding:48px var(--m) 40px; }
  .p-hero-photo { min-height:0; height:auto; aspect-ratio:4/3; }
  .b-facts { grid-template-columns:1fr; }
  .a-cta { padding:110px var(--m) 96px; }
  .a-cta-act { justify-content:flex-start; }
}

/* ---------- instrument pages ----------
   One idea per section: the tabbed "three ways to learn" (what you learn changes with the format, so
   the comparison is the page's centre), a wide photo of TWA's own learners, the teachers, then the
   practical things: renting the instrument and booking the room. */
.inst-ways { padding:140px var(--m) 110px; }
.inst-ways .who-head h2 { margin:0; font-size:var(--s4); color:var(--navy); }
.ways3 { margin-top:56px; }
.ways3 .tabs { display:none; margin-bottom:28px; }
.js .ways3 .tabs { display:flex; }
.ways3 .tabs button { font-size:20px; }
.way3 { display:grid; grid-template-columns:minmax(0,7fr) minmax(0,5fr); gap:20px; }
.way3 + .way3 { margin-top:20px; }
.js .way3 + .way3 { margin-top:0; }
.way3[hidden] { display:none; }
.way3-main { background:var(--mist); padding:48px; display:grid; gap:16px; align-content:start; }
.way3-main h3 { margin:0; font-family:var(--display); font-weight:400; font-size:var(--s3); line-height:1.05; color:var(--navy); }
.way3-main > p { margin:0; max-width:52ch; }
.way3-learn { margin:20px 0 0; display:grid; grid-template-columns:1fr 1fr; gap:28px 36px; }
.way3-learn dt { font-weight:700; color:var(--navy); }
.way3-learn dd { margin:6px 0 0; }
.way3-side { background:var(--navy); color:var(--on); padding:48px; display:grid; gap:14px; align-content:start; justify-items:start; }
.way3-how { margin:0; color:var(--muted); max-width:44ch; }
.way3-price { margin:18px 0 0; font-family:var(--display); font-size:clamp(64px,6.4vw,104px); line-height:.9; letter-spacing:-0.02em; }
.way3-price span { font-family:var(--body); font-size:var(--s2); font-weight:600; color:var(--sky); letter-spacing:0; margin-right:6px; }
.way3-fine { margin:0 0 18px; color:var(--muted); max-width:40ch; }
.way3-side .link { color:var(--on); text-decoration-color:var(--sky); }
.inst-real { margin:0; }
.inst-real img { width:100%; height:auto; aspect-ratio:21/8; object-fit:cover; object-position:50% 22%; }
.inst-gear { background:var(--mist); padding:120px var(--m); }
.inst-gear h2 { margin:0; font-size:var(--s4); color:var(--navy); }
.gear-grid { margin-top:56px; display:grid; grid-template-columns:1fr 1fr; gap:20px; }
.gear { background:var(--white); padding:48px; display:grid; gap:16px; align-content:start; }
.gear h3 { margin:0; font-family:var(--display); font-weight:400; font-size:var(--s3); line-height:1.05; color:var(--navy); }
.gear p { margin:0; max-width:52ch; }
.gear-rates { margin:12px 0 0; display:flex; flex-wrap:wrap; gap:20px 56px; }
.gear-rates div { display:flex; flex-direction:column-reverse; }
.gear-rates dt { font-size:var(--s1); color:var(--muted); margin-top:6px; }
.gear-rates dd { margin:0; font-family:var(--display); font-size:clamp(52px,4.6vw,76px); line-height:.9; color:var(--royal); }
.gear-rates small { font-family:var(--body); font-size:var(--s1); color:var(--muted); margin-left:6px; }
.gear .gear-act { display:flex; align-items:center; gap:24px; flex-wrap:wrap; margin-top:12px; }
.gear-room { background:var(--navy); color:var(--on); }
.gear-room h3, .gear-room .gear-rates dd { color:var(--on); }
.gear-room .gear-rates dt, .gear-room .gear-rates small { color:var(--sky); }
.gear-room .link { color:var(--on); text-decoration-color:var(--sky); }
.b-faq .credit { margin:32px 0 0; font-size:var(--s1); color:var(--muted); }
.b-faq .credit a { color:inherit; }
.inst-grid { list-style:none; margin:20px 0 0; padding:0; display:grid; grid-template-columns:repeat(auto-fill,minmax(230px,1fr)); gap:20px; }
.inst-tile { display:grid; gap:6px; text-decoration:none; color:var(--navy); }
.inst-tile img { width:100%; height:auto; aspect-ratio:4/5; object-fit:cover; transition:transform .6s var(--out); }
.inst-tile:hover img, .inst-tile:focus-visible img { transform:scale(1.03); }
.inst-tile { overflow:hidden; }
.inst-n { margin-top:10px; font-family:var(--display); font-size:var(--s3); line-height:1.05; }
.inst-tile:hover .inst-n { color:var(--royal); }
.inst-fam + .inst-fam { margin-top:64px; }
@media (max-width:1020px) {
  .way3, .gear-grid { grid-template-columns:1fr; }
}
@media (max-width:820px) {
  .inst-ways { padding:88px var(--m) 72px; }
  .way3-main, .way3-side, .gear { padding:28px 22px; }
  .way3-learn { grid-template-columns:1fr; gap:18px; }
  .ways3 .tabs button { font-size:var(--s2); }
  .inst-real img { aspect-ratio:4/3; }
  .inst-gear { padding:88px var(--m); }
  .inst-grid { grid-template-columns:1fr 1fr; gap:14px; }
}
.way3-sub { margin:28px 0 0; font-family:var(--display); font-weight:400; font-size:clamp(24px,2vw,30px); color:var(--navy); }
.way3-gigs { list-style:none; margin:0; padding:0; display:grid; gap:8px; }
.way3-gigs li { background:var(--white); display:grid; grid-template-columns:90px minmax(0,1fr); column-gap:20px; row-gap:2px; padding:16px 20px; }
.way3-gigs time { grid-row:1 / span 2; color:var(--royal); font-weight:700; }
.way3-gigs b { color:var(--navy); }
.way3-gigs span { font-size:var(--s1); color:var(--muted); }
.inst-hub { padding:140px var(--m) 40px; }
.inst-hub h2 { margin:0 0 48px; font-size:var(--s4); color:var(--navy); }
@media (max-width:820px) { .inst-hub { padding:88px var(--m) 24px; } }
/* wide Instruments menu: four family columns, then a link to the hub */
.dd-wide .dd-panel { left:-200px; min-width:0; }
.dd-cols { display:grid; grid-template-columns:repeat(4,max-content); gap:4px 40px; padding:30px 26px 10px; }
.dd-col { display:grid; align-content:start; }
.dd-g { margin:0 0 6px; font-size:13px; font-weight:700; color:var(--muted); }
.dd-panel a.dd-i { display:block; margin:0; padding:7px 0; font-weight:600; font-size:16px; white-space:nowrap; background:none; }
.dd-panel a.dd-i::after { content:none; }
.dd-panel a.dd-i:hover, .dd-panel a.dd-i:focus-visible, .dd-panel a.dd-i[aria-current="page"] { background:none; color:var(--royal); }
.dd-panel a.dd-all { margin:6px 0 8px; }
.instruments li:has(a) { padding:0; }
.instruments li a { display:block; padding:12px 20px; color:inherit; text-decoration:none; border-radius:999px; transition:background-color .2s, color .2s; }
.instruments li a:hover, .instruments li a:focus-visible { background:#dfe6fb; color:var(--royal-ink); }
/* lesson finder: a three-note game on a one-octave keyboard */
.finder { margin:56px 0 0; background:var(--navy); color:var(--on); padding:44px 48px; display:grid; grid-template-columns:minmax(0,4fr) minmax(0,8fr); gap:28px 56px; align-items:start; }
.finder-intro h3 { margin:0; font-family:var(--display); font-weight:400; font-size:var(--s3); line-height:1.05; }
.finder-intro p { margin:14px 0 0; color:var(--muted); max-width:34ch; }
.finder-sound { margin-top:20px; background:none; border:0; padding:0; color:var(--sky); font:inherit; font-weight:600; font-size:var(--s1); cursor:pointer; text-decoration:underline; text-underline-offset:5px; }
.finder-sound[aria-pressed="false"] { color:#9fb0dc; }
.finder-play { display:grid; gap:18px; }
.finder-keys { position:relative; display:grid; grid-template-columns:repeat(8,1fr); gap:4px; height:120px; max-width:520px; }
.wk { position:relative; background:var(--white); border-radius:0 0 6px 6px; display:flex; align-items:flex-end; justify-content:center; padding-bottom:8px; transition:background-color .35s var(--out), transform .15s var(--out); }
.wk b { font-size:12px; font-weight:700; color:var(--mist-2); transition:color .3s; }
.wk.lit { background:var(--royal); }
.wk.lit b { color:var(--on); }
.wk.hit { transform:translateY(4px); }
.bk { position:absolute; top:0; width:7%; height:62%; background:#0c1a47; border-radius:0 0 4px 4px; z-index:1; }
.bk0 { left:9.4%; } .bk1 { left:21.9%; } .bk2 { left:46.9%; } .bk3 { left:59.4%; } .bk4 { left:71.9%; }
.finder-count { margin:0; font-weight:600; color:var(--sky); font-size:var(--s1); }
.finder-qs { display:grid; gap:22px; }
.finder fieldset { margin:0; padding:0; border:0; min-width:0; }
.finder fieldset[hidden] { display:none; }
.finder.is-game fieldset { animation:finder-in .35s var(--out); }
.finder legend { padding:0; margin-bottom:12px; font-weight:600; color:var(--sky); }
.finder.is-game legend { font-family:var(--display); font-weight:400; font-size:clamp(26px,2.4vw,36px); color:var(--on); line-height:1.1; }
.finder-opts { display:flex; flex-wrap:wrap; gap:8px; }
.finder label { position:relative; cursor:pointer; }
.finder input { position:absolute; opacity:0; width:1px; height:1px; }
.finder label span { display:inline-block; padding:12px 20px; border-radius:999px; background:var(--navy-2); color:var(--on); font-weight:600; font-size:var(--s2); transition:background-color .2s, color .2s, transform .15s var(--out); }
.finder label:hover span { background:#dfe6fb; color:var(--royal-ink); }
.finder label:active span { transform:scale(.97); }
.finder input:checked + span { background:#dfe6fb; color:var(--royal-ink); box-shadow:var(--glow-sm); }
.finder input:focus-visible + span { outline:3px solid var(--sky); outline-offset:3px; }
.finder-back { justify-self:start; background:none; border:0; padding:0; font:inherit; color:var(--on); cursor:pointer; }
.finder-out { grid-column:1 / -1; background:var(--white); color:var(--ink); padding:32px 36px; display:grid; gap:8px; justify-items:start; animation:finder-in .45s var(--out); }
.finder-out[hidden] { display:none; }
.finder-pick { margin:0; font-family:var(--display); font-size:clamp(28px,2.6vw,40px); line-height:1.1; color:var(--navy); }
.finder-why, .finder-stage { margin:0; max-width:64ch; }
.finder-stage { color:var(--royal); font-weight:600; }
.finder-acts { margin:14px 0 0; display:flex; align-items:center; gap:24px; flex-wrap:wrap; }
.finder-again { background:none; border:0; padding:0; font:inherit; color:var(--navy); cursor:pointer; }
.finder.done .finder-keys .wk.lit { animation:key-glow .9s var(--out); }
@keyframes key-glow { 0% { background:var(--sky); } 100% { background:var(--royal); } }
@keyframes finder-in { from { opacity:0; transform:translateY(8px); } to { opacity:1; transform:none; } }
@media (max-width:820px) { .finder { grid-template-columns:1fr; padding:28px 22px; margin-top:40px; } .finder-out { padding:24px 22px; } .finder-keys { height:96px; } }
.way3-pace { margin:16px 0 0; padding:18px 20px; background:var(--white); border-left:4px solid var(--royal); }
.way3-pace b { color:var(--navy); }
@media (max-width:820px) { .finder { grid-template-columns:1fr; padding:28px 22px; margin-top:40px; } .finder-out { padding:24px 22px; } }
.gear-img { width:calc(100% + 96px); max-width:none; margin:-48px -48px 12px; height:auto; aspect-ratio:16/7; object-fit:cover; }
@media (max-width:820px) { .gear-img { width:calc(100% + 44px); margin:-28px -22px 8px; } }
@media (min-width:1021px) { .way3 { align-items:start; } .way3-side { position:sticky; top:24px; } }

/* level switch and level-specific learning lists */
.lv-switch { display:flex; align-items:center; flex-wrap:wrap; gap:8px; margin-bottom:28px; }
.lv-switch span { font-weight:600; color:var(--muted); margin-right:8px; }
.lv-switch button { border:0; cursor:pointer; padding:10px 18px; border-radius:999px; background:var(--mist); color:var(--navy); font:inherit; font-weight:600; font-size:var(--s1); transition:background-color .2s, color .2s; }
.lv-switch button:hover { background:var(--mist-2); }
.lv-switch button[aria-pressed="true"] { background:var(--navy); color:#ffffff; }
.lv { display:grid; gap:4px; }
.lv + .lv { margin-top:20px; }
.lv-h { margin:12px 0 0; font-size:var(--s1); font-weight:700; color:var(--royal); }
.js .ways3[data-level="new"] .lv:not([data-level="new"]),
.js .ways3[data-level="some"] .lv:not([data-level="some"]),
.js .ways3[data-level="back"] .lv:not([data-level="back"]) { display:none; }
.js .ways3 .lv + .lv { margin-top:0; }
.js .lv { animation:finder-in .35s var(--out); }
.finder-foot { margin:0; display:flex; align-items:center; gap:20px; }

/* ---------- blog ---------- */
.blog-hero { background:var(--navy); color:var(--on); padding:80px var(--m) 96px; display:grid; grid-template-columns:5fr 7fr; gap:56px; align-items:end; }
.blog-hero h1 { margin:0; font-size:var(--s4); }
.blog-hero .statement { margin:0; font-family:var(--display); font-size:clamp(24px,2.4vw,34px); line-height:1.2; color:var(--sky); max-width:30ch; }
.blog-index, .post-more { padding:110px var(--m); }
.post-more h2 { margin:0 0 40px; font-size:var(--s4); color:var(--navy); }
.post-list { list-style:none; margin:0; padding:0; display:grid; grid-template-columns:repeat(auto-fill,minmax(320px,1fr)); gap:40px 24px; }
.post-card { display:grid; gap:10px; text-decoration:none; color:var(--ink); }
.post-card img { width:100%; height:auto; aspect-ratio:3/2; object-fit:cover; }
.post-card-t { font-family:var(--display); font-size:var(--s3); line-height:1.05; color:var(--navy); }
.post-card:hover .post-card-t { color:var(--royal); }
.post-card-d { max-width:52ch; }
.post-card time { font-size:var(--s1); color:var(--muted); }
.post-empty { max-width:60ch; font-size:20px; }
.post-empty p { margin:0 0 16px; }
.post-head { background:var(--navy); color:var(--on); padding:64px var(--m) 140px; }
.post-head h1 { margin:18px 0 0; font-size:var(--s4); max-width:18ch; }
.post-back { margin:0; font-size:var(--s1); }
.post-meta { margin:22px 0 0; color:var(--sky); font-weight:600; }
.post-hero { margin:-96px var(--m) 0; }
.post-hero img { width:100%; height:auto; aspect-ratio:21/9; object-fit:cover; }
.post-body { padding:72px var(--m) 40px; max-width:calc(68ch + var(--m) * 2); margin:0 auto; font-size:19px; line-height:1.7; }
.post-body h2 { margin:56px 0 12px; font-family:var(--display); font-weight:400; font-size:var(--s3); color:var(--navy); }
.post-body h3 { margin:36px 0 8px; font-size:20px; color:var(--navy); }
.post-body p, .post-body ul, .post-body ol { margin:0 0 20px; }
.post-body li { margin-bottom:6px; }
.post-body figure { margin:36px 0; }
.post-body figure img { width:100%; height:auto; aspect-ratio:3/2; object-fit:cover; }
.post-body blockquote { margin:36px 0; padding:0 0 0 24px; border-left:4px solid var(--royal); font-family:var(--display); font-size:clamp(24px,2.2vw,32px); line-height:1.25; color:var(--navy); }
.post-body blockquote p { margin:0; }
@media (max-width:820px) {
  .blog-hero { grid-template-columns:1fr; gap:24px; padding:48px var(--m) 64px; }
  .blog-index, .post-more { padding:72px var(--m); }
  .post-list { grid-template-columns:1fr; }
  .post-head { padding:40px var(--m) 110px; }
  .post-hero { margin:-72px 0 0; }
  .post-hero img { aspect-ratio:4/3; }
  .post-body { padding:48px var(--m) 24px; font-size:18px; }
}
/* mid widths: keep the crest, drop the wordmark text so the full menu fits */
@media (min-width:821px) and (max-width:1180px) { .topbar .home span { position:absolute; width:1px; height:1px; overflow:hidden; clip:rect(0 0 0 0); white-space:nowrap; } .topbar .nav { gap:20px; } }

/* blog, round two: topic filters, a featured post that overlaps the hero, contents and reading progress */
.blog-hero { padding-bottom:180px; align-items:start; }
.blog-hero-r { display:grid; gap:28px; }
.blog-topics { display:flex; flex-wrap:wrap; gap:8px; }
.blog-topics button, .post-none button { border:0; cursor:pointer; font:inherit; }
.blog-topics button { padding:11px 18px; border-radius:999px; background:var(--navy-2); color:var(--on); font-weight:600; font-size:var(--s1); transition:background-color .2s, color .2s; }
.blog-topics button:hover { background:#dfe6fb; color:var(--royal-ink); }
.blog-topics button[aria-pressed="true"] { background:var(--royal); color:#ffffff; }
.blog-topics button[aria-pressed="true"]:hover { background:var(--royal-press); }
.post-none button { background:none; padding:0; color:var(--navy); }
.blog-index { padding-top:0; }
.post-feature { margin-top:-120px; position:relative; display:grid; grid-template-columns:minmax(0,7fr) minmax(0,5fr); background:var(--mist); color:var(--ink); text-decoration:none; overflow:hidden; }
.post-feature img { width:100%; height:100%; min-height:440px; object-fit:cover; transition:transform .8s var(--out); }
.post-feature:hover img { transform:scale(1.03); }
.post-feature-copy { padding:48px; display:grid; gap:16px; align-content:center; }
.post-feature-t { font-family:var(--display); font-size:clamp(34px,3.6vw,56px); line-height:1.02; color:var(--navy); }
.post-feature:hover .post-feature-t { color:var(--royal); }
.post-read { font-weight:700; color:var(--royal); display:inline-flex; gap:10px; align-items:center; }
.post-read .arr { transition:transform .3s var(--out); }
.post-feature:hover .post-read .arr { transform:translateX(5px); }
.post-card-m { font-size:var(--s1); color:var(--muted); }
.blog-all { margin:110px 0 40px; font-size:var(--s4); line-height:.95; color:var(--navy); }
.post-list li:first-child { grid-column:span 2; }
.post-list li:first-child .post-card img { aspect-ratio:16/9; }
.post-list li:first-child .post-card-t { font-size:clamp(30px,3vw,46px); }
.post-card img { transition:transform .6s var(--out); }
.post-card { overflow:hidden; }
.post-card:hover img { transform:scale(1.03); }
.post-list [hidden], .post-feature[hidden] { display:none; }
.post-none { margin-top:40px; font-size:20px; }
.post-progress { position:fixed; inset:0 0 auto; height:4px; z-index:30; pointer-events:none; }
.post-progress span { display:block; height:100%; background:var(--royal); transform:scaleX(0); transform-origin:0 50%; }
.post-meta a { color:inherit; }
.post-wrap { display:grid; grid-template-columns:minmax(0,3fr) minmax(0,7fr) minmax(0,2fr); gap:56px; padding:0 var(--m); }
.post-wrap .post-body { grid-column:2; padding-left:0; padding-right:0; margin:0; max-width:68ch; }
.post-toc { grid-column:1; align-self:start; position:sticky; top:32px; margin-top:72px; }
.post-toc p { margin:0 0 12px; font-weight:700; color:var(--navy); }
.post-toc ol { margin:0; padding:0; list-style:none; display:grid; gap:10px; }
.post-toc a { color:var(--muted); text-decoration:none; font-size:var(--s1); }
.post-toc a:hover { color:var(--royal); }
@media (max-width:1020px) { .post-wrap { grid-template-columns:1fr; gap:0; } .post-wrap .post-body { grid-column:1; } .post-toc { display:none; } }
@media (max-width:820px) {
  .blog-hero { padding-bottom:140px; }
  .post-feature { grid-template-columns:1fr; margin-top:-96px; }
  .post-feature img { min-height:0; aspect-ratio:4/3; }
  .post-feature-copy { padding:28px 22px; }
  .blog-all { margin-top:72px; }
  .post-list li:first-child { grid-column:auto; }
}
.blog-hero.blog-hero-empty { padding-bottom:96px; }
.blog-hero-empty + .blog-index { padding-top:110px; }
.post-head h1 { font-size:clamp(30px,4.6vw,72px); max-width:24ch; margin-top:0; }
.post-back { margin-top:18px; }
.post-card-t { font-size:clamp(22px,1.9vw,28px); line-height:1.1; }
.post-list li:first-child .post-card-t { font-size:clamp(26px,2.4vw,36px); }
@media (min-width:821px) { .post-feature { grid-template-columns:minmax(0,6fr) minmax(0,6fr); } }
.post-feature-t { font-size:clamp(28px,2.9vw,44px); }
@media (max-width:820px) { .post-feature-t { font-size:24px; } .post-card-t, .post-list li:first-child .post-card-t { font-size:24px; } }

/* ---------- co-founders: two equal portraits, side by side, same treatment ---------- */
.founders { background:var(--navy); color:var(--on); padding:130px var(--m); }
.founders-head { display:grid; grid-template-columns:5fr 7fr; gap:56px; align-items:end; margin-bottom:64px; }
.founders-head h2 { margin:0; font-size:var(--s4); }
.founders-head p { margin:0; max-width:56ch; color:var(--muted); font-size:20px; }
.founders-pair { display:grid; grid-template-columns:1fr 1fr; gap:56px; align-items:start; }
.founder { display:grid; gap:14px; align-content:start; }
.founder img { width:100%; height:auto; aspect-ratio:4/5; object-fit:cover; margin-bottom:14px; }
.founder img.pos-louis { object-position:38% 30%; }
.founder img.pos-jy { object-position:50% 25%; }
.founder h3 { margin:0; font-family:var(--display); font-weight:400; font-size:clamp(40px,4.4vw,68px); line-height:.95; }
.founder .role { margin:0 0 6px; color:var(--sky); font-weight:700; }
.founder p { margin:0; max-width:58ch; color:var(--muted); }
.founder .founder-more { margin-top:6px; }
.founders-about { padding-top:72px; }
.a-team:has(+ .founders-about) { padding-bottom:72px; }
.t-staff { padding-top:120px; }
.t-staff .crew-core { grid-template-columns:minmax(0,1fr) minmax(0,1fr); }
@media (max-width:820px) {
  .founders { padding:88px var(--m); }
  .founders-head { grid-template-columns:1fr; gap:20px; margin-bottom:44px; }
  .founders-pair { grid-template-columns:1fr; gap:64px; }
  .t-staff .crew-core { grid-template-columns:1fr; }
}
/* co-founders, compact: portrait beside the text so each profile fits in one screen */
.founders { padding:96px var(--m); }
.founders-head { margin-bottom:44px; }
.founders-pair { gap:40px; }
.founder { grid-template-columns:minmax(0,2fr) minmax(0,3fr); column-gap:28px; row-gap:10px; }
.founder > * { grid-column:2; }
.founder img { grid-column:1; grid-row:1 / span 8; margin:0; align-self:start; max-height:min(420px,60vh); }
.founder h3 { font-size:clamp(32px,3vw,48px); }
.founder p { font-size:var(--s1); line-height:1.6; }
.founder .role { font-size:var(--s1); }
@media (max-width:1100px) and (min-width:821px) { .founder { grid-template-columns:1fr; } .founder > *, .founder img { grid-column:1; grid-row:auto; } .founder img { aspect-ratio:4/3; max-height:320px; } }
@media (max-width:820px) {
  .founder { grid-template-columns:120px minmax(0,1fr); column-gap:18px; }
  .founder img { grid-row:1 / span 2; max-height:none; }
  .founder > p:not(.role) { grid-column:1 / -1; }
  .founders { padding:72px var(--m); }
}
@media (max-width:820px) { .founder h3 { align-self:end; } .founder .role { align-self:start; margin:0; } }

/* Band Experience bars (What you'll build, Taught by professional musicians): full width, one padding,
   the heading (and link) on top and the items in one row below, so nothing crowds; items are a bold
   name with a blue subline. */
.band-bar { margin-left:calc(var(--m) * -1); margin-right:calc(var(--m) * -1); padding:52px var(--m); min-height:0;
  display:grid; grid-template-columns:minmax(0,1fr) auto; grid-template-areas:"head link" "list list"; gap:32px 40px; align-items:center; color:var(--on); }
.band-bar h2, .band-bar h3 { margin:0; font-family:var(--display); font-weight:400; font-size:var(--s3); color:var(--on); }
.band-bar h3 { line-height:1.05; }
.band-bar > h3, .band-bar > .bar-head { grid-area:head; white-space:normal; }
.band-bar > ul { grid-area:list; grid-column:auto; }
.band-bar > .link { grid-area:link; justify-self:end; }
.skills h3 { white-space:normal; }
.band-bar .fac-list { display:grid; grid-template-columns:repeat(5,minmax(0,1fr)); gap:16px 32px; }
.band-bar .fac-list li { align-content:start; gap:4px; }
.band-bar .fac-list b { font-size:var(--s2); }
.b-faculty.band-bar { margin:0; }
.b-format { padding-bottom:0; }
.skills.band-bar { margin-top:96px; }
@media (max-width:1100px) { .band-bar .fac-list { grid-template-columns:repeat(3,minmax(0,1fr)); } }
@media (max-width:820px) {
  .band-bar { grid-template-columns:1fr; grid-template-areas:"head" "list" "link"; gap:24px; }
  .band-bar > .link { justify-self:start; }
  .band-bar .fac-list { grid-template-columns:1fr 1fr; }
}

/* ---------- footer: four groups in one row, no box (the contact and link groups join the grid through
   display:contents); the contact facts are set in the display face, then the full-width wordmark and the
   legal line close the page ---------- */
.f-grid { display:grid; grid-template-columns:minmax(0,3fr) minmax(0,3fr) minmax(0,4fr) minmax(0,2fr); gap:32px 40px; align-items:stretch; }
.f-contact, .f-links { display:contents; }
.f-block { display:grid; gap:10px; align-content:start; }
.f-label { margin:0; font-size:var(--s1); font-weight:600; color:var(--sky); }
.f-big { margin:0; font-style:normal; font-family:var(--display); font-size:clamp(20px,1.6vw,24px); line-height:1.35; color:var(--on); }
.f-big a { text-decoration:underline; text-decoration-thickness:2px; text-underline-offset:8px; text-decoration-color:transparent; transition:text-decoration-color .25s var(--out); }
.f-big a:hover, .f-big a:focus-visible { text-decoration-color:var(--sky); }
.f-links ul { list-style:none; margin:0; padding:0; }
.f-learn { display:grid; grid-template-columns:1fr 1fr; gap:8px 28px; }
.f-follow { display:flex; flex-wrap:wrap; flex-direction:column; gap:8px; }
.f-links a { color:var(--muted); text-decoration:none; font-weight:500; transition:color .2s; }
.f-links a:hover, .f-links a:focus-visible { color:var(--on); text-decoration:underline; text-underline-offset:5px; }
.f-links a[aria-current="page"] { color:var(--on); font-weight:700; }
/* Privacy policy under "Talk to us": set like the phone and email above it (.f-big), with 1.5x the space between footer list items below the email */
.f-priv { margin:8px 0 0; }
footer .legal { margin-top:-74px; }
@media (max-width:1020px) { .f-grid { grid-template-columns:1fr 1fr; } }
@media (max-width:820px) {
  footer { padding:56px var(--m) 20px; row-gap:44px; }
  .f-grid { grid-template-columns:1fr; gap:28px; }
  .f-big { overflow-wrap:anywhere; }
  .f-follow { flex-direction:row; gap:8px 24px; }
  footer .legal { margin-top:-40px; }
}

/* Who we play with: partner logos on white plates; Accent Music, the main retail partner, featured large */
.a-partners h3 { margin:0 0 10px; color:var(--sky); font-size:var(--s2); }
.logo-main { margin:0; background:var(--white); display:grid; grid-template-columns:auto 1fr; align-items:center; gap:32px; padding:28px 36px; }
.logo-main img { width:auto; height:auto; max-height:130px; max-width:260px; }
.logo-row { list-style:none; margin:0; padding:0; display:grid; grid-template-columns:repeat(3,minmax(0,1fr)); gap:16px; }
.logo-row li { background:var(--white); height:96px; display:flex; align-items:center; justify-content:center; padding:14px 18px; }
.logo-row a { display:flex; align-items:center; justify-content:center; width:100%; height:100%; }
.logo-row img { width:auto; height:auto; max-height:64px; max-width:100%; object-fit:contain; }
.logo-main a, .logo-row a { transition:opacity .2s; }
.logo-main a:hover, .logo-row a:hover { opacity:.8; }
.logo-row-sm { margin-top:24px; grid-template-columns:repeat(4,minmax(0,1fr)); gap:12px; }
.logo-row-sm li { height:84px; }
.logo-row-sm img { max-height:56px; }
@media (max-width:820px) {
  .logo-main { grid-template-columns:1fr; gap:14px; padding:24px; justify-items:start; }
  .logo-main img { max-height:100px; }
  .logo-row { grid-template-columns:repeat(3,minmax(0,1fr)); gap:10px; }
  .logo-row li { height:76px; padding:10px; }
  .logo-row-sm { grid-template-columns:repeat(2,minmax(0,1fr)); }
}
.logo-row li { height:112px; } .logo-row img { max-height:80px; }
.logo-row-sm li { height:96px; } .logo-row-sm img { max-height:68px; }
@media (max-width:820px) { .logo-row li { height:84px; } .logo-row img { max-height:60px; } }

/* About, "Let's play together": the three beliefs as a small stage. Motion follows keyframes +
   interpolation: the photo enters with an ease-out wipe (700ms) and settles from 1.06 scale, colour and
   emphasis change in place with ease-in-out (300ms), the timer runs linear, and the photo starts a beat
   after the text (offset and delay). Reduced motion: instant swaps and no auto-advance. */
.believe-stage { margin-top:72px; display:grid; grid-template-columns:minmax(0,5fr) minmax(0,7fr); gap:56px; align-items:center; }
.beliefs.beliefs-stage { margin:0; gap:8px; }
.beliefs-stage .b-item { display:block; position:relative; padding:22px 0 26px; }
.beliefs-stage dt { font-size:inherit; }
.beliefs-stage dt button { background:none; border:0; padding:0; margin:0; cursor:pointer; text-align:left; font-family:var(--display); font-size:var(--s3); line-height:1.05; color:#6b7799; transition:color .3s var(--inout); }
.beliefs-stage dt button:hover { color:var(--navy); }
.beliefs-stage .is-on dt button { color:var(--royal); }
.beliefs-stage dd { margin:12px 0 0; max-width:46ch; opacity:.62; transition:opacity .3s var(--inout); }
.beliefs-stage .is-on dd { opacity:1; }
.b-timer { position:absolute; left:0; right:0; bottom:0; height:4px; background:var(--mist); overflow:hidden; }
.b-timer i { display:block; height:100%; background:var(--royal); transform:scaleX(0); transform-origin:0 50%; }
.is-on .b-timer i { transform:scaleX(1); }
.believe-stage.auto .is-on .b-timer i { transform:scaleX(0); animation:b-timer 6s linear forwards; }
.believe-stage.paused .is-on .b-timer i { animation-play-state:paused; }
@keyframes b-timer { to { transform:scaleX(1); } }
.stage-frame { margin:0; position:relative; aspect-ratio:4/3; overflow:hidden; background:var(--mist); }
@media (prefers-reduced-motion:reduce) { .believe-stage.auto .is-on .b-timer i { transform:scaleX(1); } }
@media (max-width:820px) { .believe-stage { grid-template-columns:1fr; gap:28px; margin-top:48px; } .stage-frame { order:-1; } }

/* partners, compact: logos sit inside their group; Accent Music on the largest plate */
.a-partners { padding:96px var(--m); }
.p-cols { margin-top:48px; grid-template-columns:minmax(0,5fr) minmax(0,3fr) minmax(0,4fr); gap:40px 48px; align-items:start; }
.p-cols p { max-width:40ch; }
.p-cols .logo-main { display:flex; align-items:center; }
.p-cols .logo-main img { max-width:100%; width:auto; height:auto; }
.p-cols .logo-row-sm { margin-top:22px; grid-template-columns:repeat(2,minmax(0,1fr)); }
@media (max-width:1020px) { .p-cols { grid-template-columns:1fr 1fr; } }
@media (max-width:820px) { .a-partners { padding:72px var(--m); } .p-cols { grid-template-columns:1fr; gap:36px; } .p-cols .logo-row-sm { grid-template-columns:repeat(4,minmax(0,1fr)); } }

@media (min-width:1021px) { .p-cols { grid-template-columns:minmax(0,4fr) minmax(0,3fr) minmax(0,4fr); } }

/* Private lessons, "Lessons shaped around you": the same stage, with four drawn scenes instead of photos.
   Each scene enters with an ease-out fade and rise; inside, things change in place with ease-in-out. */
.psx-stage { margin-top:32px; }
.stage-scenes { background:var(--navy); color:var(--on); }
.scene { position:absolute; inset:0; display:grid; place-items:center; padding:48px; opacity:0; transform:translateY(14px); transition:opacity .45s var(--out) .1s, transform .6s var(--out) .1s; pointer-events:none; }
.scene.on { opacity:1; transform:none; }
.scene.was { opacity:0; transform:none; transition:opacity .2s var(--inout); }
/* 1: calendar */
.cal { width:min(100%,420px); display:grid; gap:12px; }
.cal-days, .cal-grid { display:grid; grid-template-columns:repeat(7,1fr); gap:8px; }
.cal-days span { text-align:center; font-size:13px; font-weight:600; color:var(--sky); }
.cal-grid i { aspect-ratio:1/1; border-radius:6px; background:var(--navy-2); transition:background-color .35s var(--inout), transform .35s var(--inout); }
.cal-grid i.cx { background:#2a4396; }
.p-weekly .cw, .p-fort .cf, .p-int .ci { background:var(--sky); transform:scale(1.04); }
.p-int .cx { background:var(--white); }
.cal-label { position:relative; height:1.6em; margin:10px 0 0; text-align:center; font-family:var(--display); font-size:clamp(22px,2vw,28px); }
.cal-label span { position:absolute; inset:0; opacity:0; transform:translateY(6px); transition:opacity .3s var(--inout), transform .3s var(--inout); }
.p-weekly .l-weekly, .p-fort .l-fort, .p-int .l-int { opacity:1; transform:none; }
/* 2: goal track */
.goal { width:min(100%,520px); display:grid; gap:22px; }
.goal-track { position:relative; height:8px; border-radius:99px; background:var(--navy-2); }
.goal-fill { position:absolute; inset:0; border-radius:99px; background:var(--sky); transform-origin:0 50%; transform:scaleX(0); }
.goal-dot { position:absolute; top:50%; left:0; width:26px; height:26px; margin:-13px 0 0 -13px; border-radius:50%; background:var(--white); }
.scene.on .goal-fill { animation:goal-fill 5s var(--inout) infinite; }
.scene.on .goal-dot { animation:goal-dot 5s var(--inout) infinite; }
@keyframes goal-fill { 0% { transform:scaleX(0); } 80%, 100% { transform:scaleX(1); } }
@keyframes goal-dot { 0% { left:0; } 80%, 100% { left:100%; } }
.goal-stops { list-style:none; margin:0; padding:0; display:flex; justify-content:space-between; font-family:var(--display); font-size:clamp(20px,1.8vw,26px); color:#9aa3b5; }
.goal-stops li:nth-child(2) { text-align:center; } .goal-stops li:last-child { text-align:right; }
.scene.on .goal-stops li { animation:goal-stop 5s var(--inout) infinite; }
.scene.on .goal-stops li:nth-child(2) { animation-name:goal-stop2; } .scene.on .goal-stops li:nth-child(3) { animation-name:goal-stop3; }
@keyframes goal-stop { 0%, 4% { color:#9aa3b5; } 8%, 96% { color:var(--on); } 100% { color:#9aa3b5; } }
@keyframes goal-stop2 { 0%, 38% { color:#9aa3b5; } 44%, 96% { color:var(--on); } 100% { color:#9aa3b5; } }
@keyframes goal-stop3 { 0%, 76% { color:#9aa3b5; } 80%, 96% { color:var(--on); } 100% { color:#9aa3b5; } }
/* 3: sliders */
.tailor { width:min(100%,460px); display:grid; gap:26px; }
.t-row { display:grid; gap:10px; }
.t-row span { font-family:var(--display); font-size:clamp(20px,1.8vw,26px); }
.t-row b { display:block; height:12px; border-radius:99px; background:var(--navy-2); overflow:hidden; }
.t-row i { display:block; height:100%; width:50%; border-radius:99px; background:var(--sky); }
.scene.on .t-row:nth-child(1) i { animation:t1 6s var(--inout) infinite; }
.scene.on .t-row:nth-child(2) i { animation:t2 6s var(--inout) infinite; }
.scene.on .t-row:nth-child(3) i { animation:t3 6s var(--inout) infinite; }
@keyframes t1 { 0%, 100% { width:35%; } 33% { width:80%; } 66% { width:55%; } }
@keyframes t2 { 0%, 100% { width:20%; } 33% { width:45%; } 66% { width:90%; } }
@keyframes t3 { 0%, 100% { width:70%; } 33% { width:40%; } 66% { width:85%; } }
/* 4: route */
.route { width:min(100%,520px); display:grid; gap:16px; }
.route svg { width:100%; height:auto; color:var(--navy-2); overflow:visible; }
.route path { stroke-width:6; }
.r-you { fill:var(--white); } .r-guide { fill:var(--sky); }
.route-key { margin:0; display:flex; gap:28px; justify-content:center; font-weight:600; }
.route-key span::before { content:""; display:inline-block; width:12px; height:12px; border-radius:50%; margin-right:8px; vertical-align:-1px; }
.k-you::before { background:var(--white); } .k-guide::before { background:var(--sky); }
@media (prefers-reduced-motion:reduce) {
  .scene.on .goal-fill { transform:scaleX(.6); } .scene.on .goal-dot { left:60%; }
  .scene.on .goal-stops li:nth-child(-n+2) { color:var(--on); }
}
@media (max-width:820px) { .scene { padding:24px; } .cal-days, .cal-grid { gap:5px; } }
.p-int .cal-grid i.cx { background:var(--white); }

/* About, "Our story since 2023": scroll-driven timeline. A track fills with scroll (linear, tied to
   position). Each year's own heading sits in a narrow column and stays in view while its events scroll
   past; reaching a year turns its heading and dot blue (ease-in-out), and its events rise in one after
   another (offset and delay, 80ms apart). Reduced motion: no stagger, instant states. */
.story-wrap { margin-top:64px; display:grid; grid-template-columns:1fr; gap:0; align-items:start; }
.story-list { position:relative; padding-left:44px; }
.story-track { position:absolute; left:6px; top:8px; bottom:8px; width:4px; border-radius:4px; background:var(--mist-2); overflow:hidden; }
.story-fill { position:absolute; inset:0; background:var(--royal); transform-origin:50% 0; transform:scaleY(0); }
.story-list .years { margin:0; gap:72px; }
.story-list .years > li { position:relative; display:grid; grid-template-columns:200px minmax(0,1fr); gap:0 48px; align-items:start; }
.story-list .yr { position:sticky; top:110px; margin:0; font-size:clamp(40px,4vw,64px); line-height:1; color:#6b7799; transition:color .4s var(--inout); }
.story-list .years > li.reached .yr { color:var(--royal); }
/* the dot travels with the sticky year heading */
.story-list .yr::before { content:""; position:absolute; left:-44px; top:.32em; width:16px; height:16px; border-radius:50%; background:var(--mist-2); transform:scale(.7); transition:background-color .3s var(--inout), transform .45s var(--out); }
.story-list .years > li.reached .yr::before { background:var(--royal); transform:scale(1); }
.story-list .yr-photo { margin:0 0 24px; width:100%; max-width:560px; height:auto; aspect-ratio:16/9; object-fit:cover; }
.story-list .years > li > img, .story-list .years > li > ul { grid-column:2; }
.story-list .years ul li { grid-template-columns:200px 1fr; }
.js .story-list .years ul li { opacity:0; transform:translateY(12px); transition:opacity .45s var(--out), transform .55s var(--out); }
.js .story-list .years > li.in ul li { opacity:1; transform:none; }
.js .story-list .years > li.in ul li:nth-child(2) { transition-delay:.08s; }
.js .story-list .years > li.in ul li:nth-child(3) { transition-delay:.16s; }
.js .story-list .years > li.in ul li:nth-child(4) { transition-delay:.24s; }
@media (prefers-reduced-motion:reduce) {
  .js .story-list .years ul li { opacity:1; }
}
@media (max-width:900px) {
  .story-wrap { margin-top:48px; }
  .story-list .years > li { display:block; grid-template-columns:1fr; gap:0; }
  .story-list .yr { position:relative; top:auto; margin:0 0 16px; font-size:36px; }
  .story-list .yr::before { top:.3em; }
  .story-list .years > li > img, .story-list .years > li > ul { grid-column:1; }
  .story-list .years ul li { grid-template-columns:1fr; gap:4px; }
}

/* Band Experience sizing: narrower How the band works, shorter photos */
.b-format > .sessions { max-width:1180px; }
.sessions img, .sessions video { aspect-ratio:3/2; }

/* line drawings: each path draws on as its block enters (stroke-dashoffset, 500ms ease-out, staggered
   80ms); after that, one quiet loop per drawing (ease-in-out). Colour sky on navy. */
.ico { display:block; width:56px; height:56px; margin-bottom:16px; overflow:visible; }
.ico .d, .baton .beat { fill:none; stroke:var(--sky); stroke-width:2; stroke-linecap:round; stroke-linejoin:round; }
.ico .fill, .baton .tip { fill:var(--sky); }
.ico .fill-soft { fill:var(--sky); opacity:.28; }
.js .ico .d { stroke-dasharray:1; stroke-dashoffset:1; }
.js .ico .fill, .js .ico .fill-soft { opacity:0; }
.in .ico .d, .in.ico .d { stroke-dashoffset:0; transition:stroke-dashoffset .5s var(--out); }
.in .ico .d:nth-of-type(2) { transition-delay:.08s; } .in .ico .d:nth-of-type(3) { transition-delay:.16s; } .in .ico .d:nth-of-type(4) { transition-delay:.24s; }
.in .ico .fill { opacity:1; transition:opacity .3s linear .35s; }
.in .ico .fill-soft { opacity:.28; transition:opacity .3s linear .35s; }
/* loops, each tied to its idea */
@keyframes spark { 0%, 100% { opacity:.25; transform:scale(.6); } 50% { opacity:1; transform:scale(1.25); } }
.in .ico .bob { animation:bob 2s var(--inout) .6s infinite alternate; }
@keyframes bob { from { transform:translateY(1px); } to { transform:translateY(-2px); } }
.in .ico .wv { animation:wave 2.2s var(--inout) .6s infinite; }
.in .ico .w2 { animation-delay:.9s; } .in .ico .w3 { animation-delay:1.2s; }
@keyframes wave { 0%, 100% { opacity:1; } 50% { opacity:.25; } }
.in .ico .flag { animation:flag 1.6s var(--inout) .7s infinite alternate; transform-box:fill-box; transform-origin:0 50%; }
@keyframes flag { from { transform:scaleX(1); } to { transform:scaleX(.7); } }
.in .ico .beam { animation:beam 3s var(--inout) .6s infinite; }
@keyframes beam { 0%, 100% { opacity:.18; } 50% { opacity:.4; } }
.in .ico .star { animation:spark 3s var(--inout) .8s infinite; transform-box:fill-box; transform-origin:center; }
.in .ico .spin { animation:spin 6s var(--inout) .6s infinite alternate; transform-origin:24px 24px; }
@keyframes spin { from { transform:rotate(-12deg); } to { transform:rotate(12deg); } }
/* faculty bar: a baton tracing a 4/4 beat pattern next to the heading */
.bar-head { display:flex; align-items:center; gap:20px; justify-items:start; }
.baton { width:80px; height:60px; overflow:visible; }
.baton .beat { opacity:.35; stroke-dasharray:1; stroke-dashoffset:1; }
.bar-head.in .baton .beat { stroke-dashoffset:0; transition:stroke-dashoffset .5s var(--out); }
.band-bar .fac-list .ico { width:36px; height:36px; margin-bottom:8px; }
@media (prefers-reduced-motion:reduce) {
  .js .ico .d, .baton .beat { stroke-dashoffset:0; }
  .js .ico .fill { opacity:1; } .js .ico .fill-soft { opacity:.28; }
  .baton .tip { display:none; }
}

/* membership: payment plans as one programme year. Segments move within the bar, so they use the
   standard ease-in-out over 400ms; amount labels only fade (linear 200ms). */
.pay { margin-top:64px; }
.pay-head { display:flex; flex-wrap:wrap; align-items:center; justify-content:space-between; gap:16px 32px; }
.pay-head h3 { margin:0; font-family:var(--display); font-weight:400; font-size:var(--s3); color:var(--navy); }
.pay-switch { display:inline-flex; gap:4px; padding:4px; border-radius:999px; background:var(--mist); }
.pay-switch button { border:0; cursor:pointer; font:inherit; font-weight:600; font-size:var(--s1); padding:10px 18px; border-radius:999px; background:none; color:var(--navy); transition:background-color .25s linear, color .25s linear; }
.pay-switch button[aria-pressed="true"] { background:var(--navy); color:#ffffff; }
.pay-year { margin-top:28px; }
.pay-bar { position:relative; height:84px; }
.seg { position:absolute; top:0; bottom:0; padding:0 2px; transition:left .4s var(--inout), width .4s var(--inout), opacity .2s linear; overflow:hidden; }
.seg::before { content:""; position:absolute; inset:0 2px; border-radius:6px; background:var(--royal); }
.seg b, .seg i { position:relative; display:block; text-align:center; white-space:nowrap; }
.seg b { margin-top:18px; font-family:var(--display); font-weight:400; font-size:clamp(22px,2.2vw,32px); color:#ffffff; transition:opacity .2s linear; }
.seg.swap b { opacity:0; }
.seg.dec::before { background:var(--mist); }
.seg.dec b { margin-top:16px; font-family:var(--body); font-size:var(--s1); font-weight:700; color:var(--navy); }
.seg.dec i { font-style:normal; font-size:13px; color:var(--royal); font-weight:600; }
.g1, .g2, .g3, .g4 { left:91.667%; width:0; opacity:0; }
.seg.dec { left:91.667%; width:8.333%; }
.pay-bar[data-plan="3"] .g1 { left:0; width:25%; opacity:1; }
.pay-bar[data-plan="3"] .g2 { left:25%; width:25%; opacity:1; }
.pay-bar[data-plan="3"] .g3 { left:50%; width:25%; opacity:1; }
.pay-bar[data-plan="3"] .g4 { left:75%; width:16.667%; opacity:1; }
.pay-bar[data-plan="6"] .g1 { left:0; width:50%; opacity:1; }
.pay-bar[data-plan="6"] .g2 { left:50%; width:41.667%; opacity:1; }
.pay-bar[data-plan="11"] .g1 { left:0; width:91.667%; opacity:1; }
.pay-months { margin-top:8px; display:grid; grid-template-columns:repeat(12,1fr); font-size:13px; color:var(--muted); text-align:center; }
.pay-months .m-dec { color:var(--royal); font-weight:600; }
.pay-total { margin:18px 0 0; font-size:var(--s2); }
.pay-total b { color:var(--royal); }
.pay .fine-print { margin-top:14px; max-width:70ch; }
.pay-table { margin-top:20px; }
.js .pay.is-vis .pay-table { position:absolute; width:1px; height:1px; overflow:hidden; clip:rect(0 0 0 0); }
@media (max-width:820px) {
  .pay-bar { height:72px; }
  .seg b { margin-top:16px; font-size:17px; }
  .seg.dec b { font-size:11px; margin-top:18px; } .seg.dec i { display:none; }
  .pay-months { font-size:10px; }
  .pay-switch button { padding:9px 12px; font-size:13px; }
}
/* member benefits: the figures count up as they enter (ease-out, 500ms); servicing gets a drawn wrench */
.perks { margin-top:72px; grid-template-columns:repeat(3,minmax(0,1fr)); gap:40px; }
.perk { display:grid; gap:10px; align-content:start; }
.perk-fig { margin:0; font-family:var(--display); font-size:clamp(64px,6vw,96px); line-height:.9; color:var(--royal); }
.perk h3 { margin:6px 0 0; font-size:var(--s2); color:var(--navy); }
.perk p { margin:0; max-width:36ch; }
.perk-ico { width:72px; height:72px; margin:4px 0 8px; }
.perk-ico .d { stroke:var(--royal); }
@media (max-width:820px) { .perks { grid-template-columns:1fr; gap:36px; } }

/* December, said plainly */
.seg.dec i { font-style:normal; display:block; text-align:center; font-size:12px; line-height:1.3; color:var(--muted); font-weight:600; }
.seg.dec .dec-free { color:var(--royal); font-size:13px; }
.seg.dec b { margin-top:10px; }
.pay-dec { margin:6px 0 0; font-weight:600; color:var(--royal); }
@media (max-width:820px) { .seg.dec i { display:none; } .seg.dec .dec-free { display:block; font-size:10px; } .seg.dec b { margin-top:20px; } }
@media (max-width:820px) { .band-bar h2, .band-bar h3 { font-size:24px; } .bar-head .baton { display:none; } .perks { margin-top:56px; } .pay-switch { margin-bottom:8px; } .pay { margin-bottom:24px; } }
.js .pay.is-vis .pay-table { display:none; }

/* Beginner Band: months as a three-step path. Choreography on entering: the path line draws across
   (ease-out 600ms) and each month's drawing and text follow it (offset 150ms per step). */
.mo-path { position:relative; grid-template-columns:repeat(3,minmax(0,1fr)); gap:20px; margin-top:12px; }
.mo-path::before { content:""; position:absolute; left:28px; right:16%; top:28px; height:2px; background:var(--royal); opacity:.35; transform-origin:0 50%; }
.js .mo-path::before { transform:scaleX(0); }
.path.in .mo-path::before { transform:none; transition:transform .6s var(--out) .3s; }
.mo-path .mo { position:relative; align-content:start; }
.mo-ico { width:56px; height:56px; margin:0 0 10px; padding:8px; background:var(--white); border-radius:50%; overflow:visible; }
.mo-ico .d { stroke:var(--royal); } .mo-ico .fill { fill:var(--royal); }
.js .mo-path .mo > b, .js .mo-path .mo > span { opacity:0; transform:translateY(8px); }
.path.in .mo-path .mo > b, .path.in .mo-path .mo > span { opacity:1; transform:none; transition:opacity .3s linear, transform .45s var(--out); }
.path.in .mo1 > *, .path.in .mo1 .ico .d { transition-delay:.4s; }
.path.in .mo2 > *, .path.in .mo2 .ico .d { transition-delay:.55s; }
.path.in .mo3 > *, .path.in .mo3 .ico .d { transition-delay:.7s; }
@media (prefers-reduced-motion:reduce) {
  .js .mo-path::before { transform:none; }
  .js .mo-path .mo > b, .js .mo-path .mo > span { opacity:1; transform:none; }
}
@media (max-width:820px) {
  .mo-path { grid-template-columns:1fr; gap:16px; }
  .mo-path::before { left:27px; right:auto; top:28px; bottom:28px; width:2px; height:auto; transform-origin:50% 0; }
  .js .mo-path::before { transform:scaleY(0); }
  .mo-path .mo { grid-template-columns:56px 1fr; column-gap:16px; }
  .mo-path .mo .mo-ico { grid-row:span 2; margin:0; }
}

/* 2027 calendar: full month grids with the session dates highlighted, sized to fit one screen
   (six months across on desktop). The days fade in month by month on entering (ease-out 300ms, 40ms apart). */
.b-cal .cal-head { display:grid; grid-template-columns:auto 1fr; gap:12px 40px; align-items:end; }
.b-cal .cal-head h2 { grid-row:span 2; }
.b-cal .next-up { justify-self:start; }
.b-cal .cal-note { margin:0; max-width:70ch; font-size:var(--s1); color:var(--muted); }
.b-cal .months { margin-top:16px; grid-template-columns:repeat(6,minmax(0,1fr)); gap:10px; }
.b-cal .month { padding:12px 12px 10px; gap:6px; }
.dgrid.days { display:grid; grid-template-columns:repeat(7,1fr); gap:2px; min-height:0; }
.dgrid .dn, .dgrid .pad, .dgrid .day { aspect-ratio:1/1; display:grid; place-items:center; font-size:13px; font-variant-numeric:tabular-nums; }
.dgrid .dn { color:#8a93a6; }
.dgrid .day { width:auto; height:auto; font-weight:700; }
.dgrid .day .n { line-height:1; }
.dgrid .day.next { transform:scale(1.15); outline-width:2px; outline-offset:1px; }
.b-cal .month.m-off .dgrid .dn { color:#b9c0cd; }
.b-cal .mnote { margin:2px 0 0; font-size:13px; line-height:1.35; color:var(--muted); }
.js .b-cal .month { opacity:0; transform:translateY(8px); }
.b-cal .months.in .month, .b-cal .in .month { opacity:1; transform:none; transition:opacity .3s linear, transform .3s var(--out); }
.b-cal .in .month:nth-child(1) { transition-delay:0.00s; }
.b-cal .in .month:nth-child(2) { transition-delay:0.04s; }
.b-cal .in .month:nth-child(3) { transition-delay:0.08s; }
.b-cal .in .month:nth-child(4) { transition-delay:0.12s; }
.b-cal .in .month:nth-child(5) { transition-delay:0.16s; }
.b-cal .in .month:nth-child(6) { transition-delay:0.20s; }
.b-cal .in .month:nth-child(7) { transition-delay:0.24s; }
.b-cal .in .month:nth-child(8) { transition-delay:0.28s; }
.b-cal .in .month:nth-child(9) { transition-delay:0.32s; }
.b-cal .in .month:nth-child(10) { transition-delay:0.36s; }
.b-cal .in .month:nth-child(11) { transition-delay:0.40s; }
.b-cal .in .month:nth-child(12) { transition-delay:0.44s; }

@media (prefers-reduced-motion:reduce) { .js .b-cal .month { opacity:1; transform:none; } }
@media (max-width:1100px) { .b-cal .months { grid-template-columns:repeat(4,minmax(0,1fr)); } }
@media (max-width:820px) { .b-cal .cal-head { grid-template-columns:1fr; } .b-cal .cal-head h2 { grid-row:auto; } .b-cal .months { grid-template-columns:1fr 1fr; } }
.dgrid .wd { font-size:13px; font-weight:700; color:var(--muted); text-align:center; padding-bottom:2px; }
.b-cal .months.rise { transform:none; }
.b-cal .cal-head h2 { font-size:clamp(44px,5vw,76px); } .b-cal .month h3 { font-size:18px; } .b-cal .legend { margin-top:14px; }

/* partner logos without plates, straight on the section background */
.p-cols .logo-main, .p-cols .logo-row li { background:none; padding:0; justify-content:flex-start; }
.p-cols .logo-main { margin-top:28px; }
.p-cols .logo-row { margin-top:20px; }
.p-cols .logo-row a { justify-content:flex-start; }
.p-cols .logo-row img, .p-cols .logo-row-sm img { max-height:56px; opacity:.85; transition:opacity .2s linear; }
.p-cols .logo-row a:hover img, .p-cols .logo-main a:hover img { opacity:1; }
.p-cols .logo-main a:hover, .p-cols .logo-row a:hover { opacity:1; }
.p-cols .logo-row, .p-cols .logo-row-sm { display:flex; flex-wrap:wrap; align-items:center; gap:20px 36px; }
.p-cols .logo-row li, .p-cols .logo-row-sm li { height:auto; }
.p-cols .logo-row img { max-height:68px; max-width:160px; }
.p-cols .logo-row-sm img { max-height:72px; max-width:200px; }
.p-cols .logo-main img { max-height:120px; }
@media (max-width:820px) { .p-cols .logo-row img { max-height:56px; } .p-cols .logo-row-sm img { max-height:56px; max-width:150px; } }

/* PSX Family, How it works: a three-step journey. On entering, the line draws across (ease-out 600ms),
   each step's drawing and text follow it 150ms apart, and the ten lesson dots fill one by one (60ms apart),
   the tenth marked free. */
.fam-how { padding:88px var(--m) 72px; }
.fam-how-head { display:flex; flex-wrap:wrap; align-items:flex-end; gap:12px 48px; }
.fam-how-head .lead { margin:0 0 8px; max-width:46ch; }
.journey { list-style:none; margin:48px 0 0; padding:0; display:grid; grid-template-columns:repeat(3,minmax(0,1fr)); gap:40px; position:relative; }
.journey::before { content:""; position:absolute; left:28px; right:12%; top:28px; height:2px; background:var(--royal); opacity:.3; transform-origin:0 50%; }
.journey li { position:relative; display:grid; gap:10px; align-content:start; }
.journey h3 { margin:6px 0 0; font-family:var(--display); font-weight:400; font-size:var(--s3); line-height:1.05; color:var(--navy); }
.journey p { margin:0; max-width:36ch; }
.j-ico { width:56px; height:56px; margin:0; padding:8px; background:var(--mist); border-radius:50%; overflow:visible; }
.j-ico .d { stroke:var(--royal); } .j-ico .fill { fill:var(--royal); } .j-ico .fill-soft { fill:var(--royal); }
.ten { display:flex; align-items:center; gap:5px; height:56px; padding:0 14px; background:var(--mist); border-radius:28px; justify-self:start; }
.ten .lz { width:12px; height:12px; border-radius:50%; background:var(--royal); }
.ten .lz.free { width:auto; height:auto; padding:3px 8px; border-radius:99px; font-style:normal; font-size:12px; font-weight:700; color:#ffffff; }
.ten .lz.free::after { content:"free"; }
.js .journey::before { transform:scaleX(0); }
.js .journey li > *:not(.ten), .js .ten .lz { opacity:0; }
.js .journey li > h3, .js .journey li > p { transform:translateY(8px); }
.journey.in::before { transform:none; transition:transform .6s var(--out); }
.journey.in li > *:not(.ten), .journey.in li > h3, .journey.in li > p { opacity:1; transform:none; transition:opacity .3s linear, transform .45s var(--out); }
.journey.in .js1 > * { transition-delay:.15s; } .journey.in .js2 > * { transition-delay:.3s; } .journey.in .js3 > * { transition-delay:.45s; }
.journey.in .js1 .ico .d { transition-delay:.15s; } .journey.in .js3 .ico .d { transition-delay:.45s; }
.journey.in .ten .lz { opacity:1; transition:opacity .2s linear; }
.journey.in .ten .lz1 { transition-delay:0.36s; }
.journey.in .ten .lz2 { transition-delay:0.42s; }
.journey.in .ten .lz3 { transition-delay:0.48s; }
.journey.in .ten .lz4 { transition-delay:0.54s; }
.journey.in .ten .lz5 { transition-delay:0.60s; }
.journey.in .ten .lz6 { transition-delay:0.66s; }
.journey.in .ten .lz7 { transition-delay:0.72s; }
.journey.in .ten .lz8 { transition-delay:0.78s; }
.journey.in .ten .lz9 { transition-delay:0.84s; }
.journey.in .ten .lz10 { transition-delay:0.90s; }

.fam-how .foot-note { margin-top:32px; }
@media (prefers-reduced-motion:reduce) { .js .journey::before { transform:none; } .js .journey li > *, .js .ten .lz { opacity:1 !important; transform:none !important; } }
@media (max-width:820px) {
  .journey { grid-template-columns:1fr; gap:28px; }
  .journey::before { left:27px; right:auto; top:28px; bottom:28px; width:2px; height:auto; transform-origin:50% 0; }
  .js .journey::before { transform:scaleY(0); }
  .fam-how { padding:72px var(--m) 56px; }
}

/* Private lessons, Lessons shaped around you: fit one screen */
[aria-labelledby="why-h"].p-why { display:grid; grid-template-columns:minmax(0,1fr) minmax(0,1fr); column-gap:48px; align-items:end; padding:52px var(--m) 40px; }
[aria-labelledby="why-h"] > h2 { font-size:clamp(44px,5vw,76px); }
[aria-labelledby="why-h"] > .lead { margin:0 0 6px; max-width:48ch; font-size:var(--s2); }
[aria-labelledby="why-h"] > .psx-stage, [aria-labelledby="why-h"] > .foot-note { grid-column:1 / -1; }
[aria-labelledby="why-h"] .foot-note { margin-top:20px; }
@media (min-width:821px) { .psx-stage { grid-template-columns:minmax(0,5fr) minmax(0,6fr); } }  /* phones stack: scene first, then the four points (see .believe-stage) */
.psx-stage .beliefs-stage .b-item { padding:12px 0 16px; }
.psx-stage .beliefs-stage dt button { font-size:clamp(26px,2.4vw,36px); }
.psx-stage .beliefs-stage dd { margin-top:8px; font-size:var(--s1); line-height:1.5; }
.psx-stage .stage-frame { aspect-ratio:auto; height:min(520px, 62vh); }
@media (max-width:900px) { [aria-labelledby="why-h"] > .lead { margin-top:16px; } }
@media (max-width:820px) { .psx-stage .stage-frame { height:auto; aspect-ratio:1/1; } }  /* square on phones so each scene's label fits */

/* PSX Family packages: each card shows its ten lessons as blocks sized by length (a 30-minute lesson is
   half a 60-minute one). On entering, the nine paid lessons fill in one after another (ease-out 300ms,
   50ms apart) and the tenth pops in last as "Free" (ease-out scale, after a 150ms beat). */
.lstrip { margin:14px 0 6px; }
.lrow { display:flex; gap:4px; height:44px; }
.lb { flex:1; border-radius:4px; background:var(--royal); }
.lb-free { position:relative; background:none; box-shadow:inset 0 0 0 2px var(--royal); display:grid; place-items:center; }
.lb-free b { position:absolute; top:calc(100% + 6px); left:50%; transform:translateX(-50%); font-size:12px; font-weight:700; color:var(--royal); white-space:nowrap; }
.lcap { margin:28px 0 0; display:flex; gap:10px; font-size:var(--s1); color:var(--muted); }
.lcap .lmin { margin-left:auto; font-weight:600; }
.js .lb { transform:scaleY(0); transform-origin:50% 100%; }
.js .lb-free { opacity:0; transform:scale(.6); }
.plan2.in .lb { transform:none; transition:transform .3s var(--out); }
.plan2.in .lb1 { transition-delay:0.25s; }
.plan2.in .lb2 { transition-delay:0.30s; }
.plan2.in .lb3 { transition-delay:0.35s; }
.plan2.in .lb4 { transition-delay:0.40s; }
.plan2.in .lb5 { transition-delay:0.45s; }
.plan2.in .lb6 { transition-delay:0.50s; }
.plan2.in .lb7 { transition-delay:0.55s; }
.plan2.in .lb8 { transition-delay:0.60s; }
.plan2.in .lb9 { transition-delay:0.65s; }

.plan2.in .lb-free { opacity:1; transform:none; transition:opacity .2s linear .8s, transform .4s var(--out) .8s; }
@media (prefers-reduced-motion:reduce) { .js .lb, .js .lb-free { transform:none; opacity:1; } }
@media (max-width:820px) { .lrow { height:36px; } }
.lb-free b { font-style:normal; }
.lcap { margin-top:26px; }
#prices.p-prices { padding-top:96px; padding-bottom:80px; }
.fam-plans .plan2 ul { margin-top:6px; }

/* rental pages: compact sections that fit one screen.
   Heading row: title left, lead right. Icon columns: drawings draw on (ease-out 500ms, staggered).
   Rate cards: a switch swaps the figures (labels fade out/in, linear 200ms; the duration bar fills
   month by month on entering, ease-out 300ms, 40ms apart). */
.sec-head { display:flex; flex-wrap:wrap; align-items:flex-end; gap:12px 48px; }
.sec-head h2 { margin:0; }
.sec-head .lead { margin:0 0 8px; max-width:46ch; }
.rent2, .acc-sec, .uses-sec { padding:88px var(--m) 72px; }
.rent-pick { margin-top:32px; display:flex; flex-wrap:wrap; align-items:center; gap:12px 24px; }
.rent-pick[hidden] { display:none; }
.rent-list { margin:0; font-size:var(--s1); color:var(--muted); max-width:70ch; transition:opacity .2s linear; }
.rent-cards { margin-top:24px; display:grid; grid-template-columns:1fr 1fr; gap:20px; }
.rent-card { background:var(--mist); padding:32px 36px; display:grid; gap:8px; align-content:start; }
.rent-card.feature { background:var(--navy); color:var(--on); }
.rent-card h3 { margin:0; font-family:var(--display); font-weight:400; font-size:var(--s3); line-height:1.05; color:var(--navy); }
.rent-card .fine { margin:0; font-size:var(--s1); color:var(--muted); }
.rent-card .amount { margin:8px 0 0; font-size:var(--s2); color:var(--royal); }
.rent-card .amount b { font-family:var(--display); font-weight:400; font-size:clamp(56px,5vw,84px); line-height:.9; margin-right:6px; transition:opacity .2s linear; }
.rent-card .swap { opacity:0; }
.rent-note { margin:8px 0 0; max-width:48ch; }
.rbar { display:grid; grid-template-columns:repeat(12,1fr); gap:3px; margin:10px 0 4px; }
.rbar i { height:10px; border-radius:3px; background:var(--mist-2); }
.rent-card.feature .rbar i { background:#2a4396; }
.rbar i.on { background:var(--royal); }
.rent-card.feature .rbar i.on { background:var(--sky); }
.js .rbar i.on { transform:scaleX(0); transform-origin:0 50%; }
.rent-card.in .rbar i.on { transform:none; transition:transform .3s var(--out); }
.rent-card.in .rbar .rb0 { transition-delay:0.15s; }
.rent-card.in .rbar .rb1 { transition-delay:0.19s; }
.rent-card.in .rbar .rb2 { transition-delay:0.23s; }
.rent-card.in .rbar .rb3 { transition-delay:0.27s; }
.rent-card.in .rbar .rb4 { transition-delay:0.31s; }
.rent-card.in .rbar .rb5 { transition-delay:0.35s; }
.rent-card.in .rbar .rb6 { transition-delay:0.39s; }
.rent-card.in .rbar .rb7 { transition-delay:0.43s; }
.rent-card.in .rbar .rb8 { transition-delay:0.47s; }
.rent-card.in .rbar .rb9 { transition-delay:0.51s; }
.rent-card.in .rbar .rb10 { transition-delay:0.55s; }
.rent-card.in .rbar .rb11 { transition-delay:0.59s; }

.js [data-rent]:not([hidden]) ~ .rent-table { display:none; }
.rent2 > .fine-print { margin-top:14px; }
.icon-cols { margin:40px 0 0; display:grid; grid-template-columns:repeat(3,minmax(0,1fr)); gap:32px 40px; }
.icon-cols.five { grid-template-columns:repeat(5,minmax(0,1fr)); gap:28px; }
.icon-cols > div { display:grid; gap:8px; align-content:start; }
.icon-cols dt { font-family:var(--display); font-size:clamp(24px,2.1vw,30px); line-height:1.1; color:var(--navy); }
.icon-cols dd { margin:0; max-width:40ch; }
.c-ico { width:52px; height:52px; margin:0 0 6px; }
.c-ico .d { stroke:var(--royal); } .c-ico .fill { fill:var(--royal); }
.b-faq .faqs { max-width:none; }
@media (min-width:1101px) { .b-faq .faqs { grid-template-columns:1fr 1fr; align-items:start; column-gap:16px; } .b-faq { padding-top:88px; padding-bottom:88px; } }
@media (max-width:1100px) { .icon-cols.five { grid-template-columns:repeat(3,minmax(0,1fr)); } }
@media (max-width:820px) {
  .rent-cards, .icon-cols, .icon-cols.five { grid-template-columns:1fr; }
  .rent-card { padding:26px 22px; }
  .rent2, .acc-sec, .uses-sec { padding:72px var(--m) 56px; }
}
@media (prefers-reduced-motion:reduce) { .js .rbar i.on { transform:none; } }
.rent-card .when { margin:6px 0 0; font-weight:600; color:var(--navy); }
.use-photo { width:100%; height:auto; aspect-ratio:4/3; object-fit:cover; margin-bottom:8px; }
.js .uses-sec .use-photo { clip-path:inset(0 0 100% 0); }
.uses-sec .in .use-photo, .uses-sec .icon-cols > .in .use-photo { clip-path:inset(0); transition:clip-path .5s var(--out); }
@media (prefers-reduced-motion:reduce) { .js .uses-sec .use-photo { clip-path:none; } }
@media (max-width:820px) { .icon-cols.five { grid-template-columns:1fr 1fr; gap:24px 14px; } .icon-cols.five dt { font-size:20px; } .icon-cols.five dd { font-size:var(--s1); } }

/* studio: book in three steps (line draws across, steps follow 150ms apart), teacher section, captions */
.steps3 { list-style:none; margin:0; padding:0; display:grid; grid-template-columns:repeat(3,minmax(0,1fr)); gap:24px; position:relative; }
.steps3::before { content:""; position:absolute; left:20px; right:20%; top:20px; height:2px; background:var(--royal); opacity:.3; transform-origin:0 50%; }
.steps3 li { position:relative; display:grid; grid-template-columns:40px 1fr; gap:14px; align-items:start; }
.st-n { width:40px; height:40px; border-radius:50%; background:var(--royal); color:#ffffff; display:grid; place-items:center; font-weight:700; }
.steps3 b { display:block; color:var(--navy); }
.steps3 span:not(.st-n) { display:block; font-size:var(--s1); color:var(--muted); margin-top:2px; }
.js .steps3::before { transform:scaleX(0); }
.js .steps3 li { opacity:0; transform:translateY(8px); }
.steps3.in::before { transform:none; transition:transform .6s var(--out); }
.steps3.in li { opacity:1; transform:none; transition:opacity .3s linear, transform .45s var(--out); }
.steps3.in .st2 { transition-delay:.15s; } .steps3.in .st3 { transition-delay:.3s; }
.teach-sec { padding:88px var(--m); display:grid; grid-template-columns:minmax(0,6fr) minmax(0,6fr); gap:56px; align-items:center; }
.teach-photo { margin:0; } .teach-photo img { width:100%; height:auto; aspect-ratio:4/3; object-fit:cover; object-position:70% 50%; }
.teach-copy { display:grid; gap:18px; justify-items:start; }
.teach-copy h2 { margin:0; font-size:var(--s4); color:var(--navy); }
.teach-copy > p { margin:0; max-width:48ch; font-size:var(--s2); }
.teach-list { list-style:none; margin:4px 0 8px; padding:0; display:grid; gap:14px; }
.teach-list li { padding-left:16px; border-left:4px solid var(--royal); }
.teach-list b { display:block; color:var(--navy); }
.teach-list span { display:block; max-width:52ch; }
.cap-strip figure { margin:0; }
.cap-strip img { width:100%; height:auto; aspect-ratio:4/3; object-fit:cover; }
.cap-strip figcaption { margin-top:8px; font-size:var(--s1); color:var(--muted); }
@media (prefers-reduced-motion:reduce) { .js .steps3::before { transform:none; } .js .steps3 li { opacity:1; transform:none; } }
@media (max-width:820px) {
  .steps3 { grid-template-columns:1fr; gap:18px; }
  .steps3::before { left:19px; right:auto; top:20px; bottom:20px; width:2px; height:auto; transform-origin:50% 0; }
  .js .steps3::before { transform:scaleY(0); }
  .teach-sec { grid-template-columns:1fr; gap:28px; padding:72px var(--m); }
}
.mrt { list-style:none; margin:20px 0 0; padding:0; display:grid; gap:8px; }
.mrt li { padding-left:16px; border-left:4px solid var(--royal); }
.mrt b { color:var(--navy); } .mrt span { color:var(--muted); }
.steps3 { gap:40px; }
@media (min-width:821px) { .steps3 li { grid-template-columns:1fr; gap:12px; } .steps3 li .st-n { position:relative; z-index:1; box-shadow:0 0 0 8px var(--mist); } }
@media (min-width:821px) { .steps3 { align-items:start; } .steps3::before { right:calc(33.333% - 20px); } .steps3 li { align-content:start; } }
.cap-strip { margin-bottom:48px; } .teach-sec { padding-top:96px; }

/* ==========================================================================
   2027 brand restyle, matched to the Band Experience and PSX infopacks:
   off-white paper, grey and white rounded cards, charcoal Marcellus capitals for titles,
   Montserrat for text, royal blue for small capital labels and accents, framed photos,
   and the dot / ring / square divider. Every former navy area is light; inside them the
   tokens are re-pointed so text that was white becomes charcoal and nested navy panels become white.
   ========================================================================== */
body { background:var(--paper); color:var(--ink); }

/* titles: Marcellus capitals, as in the infopacks; statements and quotes stay in sentence case */
h1, h2 { font-family:var(--display); font-weight:400; text-transform:uppercase; line-height:1.08; letter-spacing:.035em; color:var(--ink); }
.band-bar h3, .plan2 h3, .rent-card h3, .way3-main h3, .gear h3, .journey h3, .pay-head h3, .path h3, .month h3, .sessions h3, .skills h3, .finder-intro h3, .post-card-t, .post-feature-t { text-transform:uppercase; letter-spacing:.03em; }
.d:not(h1, h2) { letter-spacing:.01em; }

/* the light areas: everything that used to sit on navy */
footer, .notfound, .topbar, .b-hero, .t-hero, .p-hero, .blog-hero, .post-head, .a-partners, .founders, .gear-room, .stage-scenes, .facts, .skills, .path.dark, .b-faculty, .plan2.feature, .way3-side, .finder, .rent-card.feature, .vid-frame {
  background:var(--paper); color:var(--ink);
}
/* section bands alternate paper and white */
.a-partners, .founders, .gear-room { background:#ffffff; }
/* panels and bars become the infopacks' grey cards */
.facts, .skills, .path.dark, .b-faculty, .plan2.feature, .way3-side, .finder, .rent-card.feature, .stage-scenes {
  background:var(--card); border-radius:18px;
}
/* buttons keep white text whatever their container */
.btn, .btn:hover { color:#ffffff; }

/* small blue capital labels, as on the infopacks ("WHAT'S IN STORE", "YOUR PATH") */
.kick { display:block; margin:0 0 10px; font-family:var(--body); font-size:13px; font-weight:700; letter-spacing:.16em; text-transform:uppercase; color:var(--royal-ink); }

/* the dot / ring / square divider under page titles and in the footer */
.topbar + main h1::after, .topbar ~ main > section:first-child h1::after { content:""; display:block; width:44px; height:10px; margin-top:18px; background:url("../assets/img/dots.svg") no-repeat; }

/* framed photos: white mount, soft shadow, small radius, as in the infopacks */
main img:where(:not([src$=".svg"]):not([src*="/partners/"]):not([src*="crest"])), main video { border:7px solid #ffffff; border-radius:8px; box-shadow:0 1px 2px rgba(48,49,50,.08), 0 10px 26px -12px rgba(48,49,50,.35); background:#ffffff; }

/* footer as on the infopacks: a hairline above, the divider, and the motto in spaced blue capitals */
footer { border-top:1px solid var(--line); }
footer .legal { align-items:center; }
footer .legal span:last-child { font-size:13px; font-weight:600; letter-spacing:.2em; text-transform:uppercase; color:var(--royal-ink); }
footer .legal a { color:inherit; text-decoration:underline; text-underline-offset:3px; }
footer .legal a:hover { color:var(--royal-ink); }
/* privacy page: no cover photo under the header, so it needs less room below the title */
.page-privacy .post-head { padding-bottom:0; }
@media (max-width:820px) { .page-privacy .post-head { padding-bottom:0; } }
footer .legal span:first-child::after { content:""; display:inline-block; width:44px; height:10px; margin-left:18px; vertical-align:middle; background:url("../assets/img/dots.svg") no-repeat; }

/* About, vision and mission: a grey card of beliefs and a white card of commitments, as in the guides */
.a-vision { padding:120px var(--m) 96px; }
.vision-head { max-width:820px; display:grid; gap:18px; }
.vision-head h2 { margin:0; font-size:var(--s3); }
.vision-head .statement { margin:0; font-family:var(--display); font-size:clamp(22px,2.1vw,30px); line-height:1.3; }
.vision-head p:last-child { margin:0; color:var(--muted); max-width:62ch; }
.identity-parts h3::before { content:""; display:inline-block; width:7px; height:7px; margin:0 10px 3px 0; border-radius:50%; background:var(--royal); }
.doc-links { margin-top:24px; display:grid; gap:10px; }
.doc-links .kick { margin-bottom:2px; }
.doc-link { display:grid; grid-template-columns:auto minmax(0,1fr); column-gap:14px; align-items:center; padding:14px 18px; border-radius:14px; background:var(--paper); box-shadow:inset 0 0 0 1px var(--line); text-decoration:none; transition:box-shadow .2s var(--out), background-color .2s linear; }
.doc-link::before { content:""; grid-row:span 2; width:34px; height:34px; border-radius:50%; background:var(--royal) url("../assets/img/download.svg") center / 16px no-repeat; }
.doc-link:hover { background:#ffffff; box-shadow:inset 0 0 0 1px var(--royal), 0 10px 24px -16px rgba(48,49,50,.5); }
.doc-t { font-weight:700; } .doc-m { font-size:13px; color:var(--muted); }

/* About, our identity: the three parts of the logo on white tiles */
.identity-parts { list-style:none; margin:48px 0 0; padding:0; display:grid; grid-template-columns:repeat(3,minmax(0,1fr)); gap:20px; }
.identity-parts li { display:grid; gap:12px; align-content:start; }
.id-art { display:grid; place-items:center; height:200px; border-radius:16px; background:var(--paper); box-shadow:inset 0 0 0 1px var(--line); }
.id-art img { width:auto; max-width:60%; max-height:132px; height:auto; border:0; box-shadow:none; background:none; transition:transform .5s var(--out); }
.identity-parts li:hover .id-art img { transform:scale(1.05); }
.identity-parts h3 { margin:8px 0 0; font-family:var(--display); font-weight:400; font-size:24px; text-transform:uppercase; letter-spacing:.03em; }
.identity-parts p { margin:0; color:var(--muted); font-size:var(--s1); }
/* About, motto and logo. Desktop: each part of the logo has its photo underneath, and the photos line up along
   the bottom whatever the length of the text above. Phones: the three parts stay together, then the three photos
   together (one wide, two side by side). Only one set shows at a time; the hidden one is lazy, so never loads. */
.motto-parts li { display:flex; flex-direction:column; gap:12px; }
.id-photo { width:100%; height:auto; aspect-ratio:4/3; object-fit:cover; margin-top:auto; }
.motto-parts .motto-tie { margin-bottom:8px; }
.motto-photos { display:none; }
@media (max-width:900px) {
  .identity-parts { grid-template-columns:1fr; }
  .motto-parts { gap:40px; }
  .motto-parts .id-photo { display:none; }
  .motto-photos { display:grid; grid-template-columns:1fr 1fr; gap:12px; margin-top:40px; }
  .motto-photos img { width:100%; height:auto; aspect-ratio:3/4; object-fit:cover; }
  .motto-photos .mp-a { grid-column:1 / -1; aspect-ratio:4/3; }
  .motto-photos .mp-b { object-position:60% 30%; }
  .a-vision { padding:80px var(--m); }
}

/* calendar marks as on the infopack calendar: rehearsal a charcoal disc, make-up a dashed blue ring, performance a blue square */
.day.m, .legend li.m::before { background:transparent; color:var(--royal-ink); box-shadow:none; border:2px dashed var(--royal); }
.day.p, .legend li.p::before { background:var(--royal); color:#ffffff; border-radius:7px; }
.b-cal .month { border-radius:14px; box-shadow:inset 0 0 0 1px var(--line); }
.dgrid .wd:nth-child(6) { color:var(--royal-ink); }

/* inline download link: small, under the hero actions */
.doc-inline { display:inline-flex; align-items:center; gap:10px; margin-top:22px; font-weight:600; font-size:var(--s1); color:var(--ink); text-decoration:none; }
.doc-inline::before { content:""; width:30px; height:30px; flex:none; border-radius:50%; background:var(--royal) url("../assets/img/download.svg") center / 14px no-repeat; transition:transform .2s var(--out); }
.doc-inline:hover::before { transform:translateY(2px); }
.doc-inline span { font-weight:500; color:var(--muted); font-size:13px; }

/* Band Experience, Music for life: one white card, four short benefits */
.life2-list { list-style:none; margin:36px 0 0; padding:32px 36px; display:grid; grid-template-columns:repeat(4,minmax(0,1fr)); gap:28px; border-radius:18px; background:#ffffff; box-shadow:inset 0 0 0 1px var(--line); }
.life2-list li { display:grid; gap:6px; align-content:start; }
.life2-list b::before { content:""; display:block; width:10px; height:10px; margin-bottom:14px; border-radius:50%; background:var(--royal); box-shadow:0 0 0 6px rgba(65,105,225,.14); }
.life2-list span { color:var(--muted); font-size:var(--s1); }

/* instruments for beginners: the two-step path */
.path .kick { margin-bottom:6px; }

@media (max-width:900px) {
  .life2-list { grid-template-columns:1fr; }
  .life2-list { padding:24px; }
}
.who-head .kick { grid-column:1 / -1; }

/* PSX pages: pieces taken from the PSX infopack */
.meta-line { margin:10px 0 0; font-weight:700; font-size:var(--s1); }
.chips { list-style:none; margin:22px 0 0; padding:0; display:flex; flex-wrap:wrap; gap:10px; }
.chips li { padding:9px 16px; border-radius:999px; background:#ffffff; font-size:var(--s1); font-weight:500; box-shadow:0 1px 2px rgba(48,49,50,.06), 0 6px 14px -8px rgba(48,49,50,.35); }
.who-head .chips { grid-column:2; margin-top:0; }
.fam-together h2 { margin:0; font-size:var(--s3); }
.per-tag { display:inline-block; margin:10px 0 0; padding:5px 12px; border-radius:999px; border:1.5px dashed var(--royal); color:var(--royal-ink); font-size:13px; font-weight:700; }
.p-extra { margin-top:20px; display:grid; grid-template-columns:minmax(0,1fr) minmax(0,1fr); gap:20px; }
.member-card { padding:30px 34px; border-radius:18px; display:grid; gap:8px; align-content:start; justify-items:start; }
.member-card { background:var(--card); grid-template-columns:auto 1fr; column-gap:20px; }
.member-card .perk-big { grid-row:span 3; margin:0; font-family:var(--display); font-size:64px; line-height:1; color:var(--royal); }
.member-card .kick { margin:6px 0 0; } .member-card p:last-child { grid-column:2; margin:0; color:var(--muted); font-size:var(--s1); }
.member-card h3 { margin:0; font-family:var(--display); font-weight:400; font-size:28px; text-transform:uppercase; letter-spacing:.03em; }
.p-notes .kick { margin-bottom:4px; }
.fam-together { padding:96px var(--m) 0; }
@media (max-width:900px) {
  .p-extra { grid-template-columns:1fr; }
  .who-head .chips { grid-column:1; }
  .member-card { padding:24px; }
}
.p-why > .kick, .p-why > .meta-line, .fam-how-head .kick { grid-column:1 / -1; }
.per-tag { justify-self:start; width:max-content; }
.fam-how-head .kick { flex-basis:100%; width:100%; }
.kick { grid-column:1 / -1; }
.kh { display:block; }
.kh > h1, .kh > h2, .kh > h3 { margin-top:0; }
.t-faculty .kh + .crew-fam { margin-top:56px; }
.band-bar > .kh { grid-area:head; }
.day.m { border:0; outline:2px dashed var(--royal); outline-offset:-2px; }
.dgrid .day.m { outline-width:1.5px; outline-offset:-1.5px; }
h1, h2, h3 { overflow-wrap:break-word; }
@media (max-width:520px) { h1, h2 { letter-spacing:.02em; } }
@media (max-width:400px) { .b-cal .months { gap:6px; } .b-cal .month { padding:12px 6px 10px; } .b-cal .month .dgrid { gap:1px; } }
@media (max-width:820px) { [aria-labelledby="why-h"].p-why { grid-template-columns:1fr; } }

/* ==========================================================================
   Selling the whole TWA life (Apple-style): an intake ribbon, "Better together" tiles,
   and a guided sign-up that reads like a product configurator.
   ========================================================================== */
.ribbon { background:var(--card); text-align:center; padding:11px var(--m); font-size:var(--s1); }
.ribbon p { margin:0; }
.ribbon a { color:var(--royal-ink); font-weight:700; text-decoration:none; white-space:nowrap; }
.ribbon a:hover { text-decoration:underline; text-underline-offset:4px; }
.rb-dot { display:inline-block; width:8px; height:8px; margin-right:10px; vertical-align:1px; border-radius:50%; background:var(--royal); box-shadow:0 0 0 4px rgba(65,105,225,.18); }

/* Better together */
.eco { padding:120px var(--m) 110px; background:#ffffff; }
.eco-head { display:grid; grid-template-columns:minmax(0,6fr) minmax(0,5fr); gap:24px 56px; align-items:end; }
.eco-head h2 { margin:0; font-size:var(--s4); }
.eco-head > p { margin:0; color:var(--muted); max-width:52ch; }
.eco-grid { list-style:none; margin:48px 0 0; padding:0; display:grid; grid-template-columns:repeat(6,minmax(0,1fr)); grid-auto-rows:minmax(0,auto); gap:16px; }
.eco-tile { grid-column:span 2; }
.eco-tile.t-play { grid-column:span 4; grid-row:span 2; }
.eco-tile.t-learn, .eco-tile.t-family { grid-column:span 2; }
.eco-link { position:relative; display:block; height:100%; min-height:300px; border-radius:20px; overflow:hidden; text-decoration:none; color:#ffffff; background:var(--ink); }
.eco-link img { position:absolute; inset:0; width:100%; height:100%; object-fit:cover; border:0; border-radius:0; box-shadow:none; transition:transform .6s var(--out); }
.eco-link::after { content:""; position:absolute; inset:0; background:linear-gradient(180deg, rgba(20,20,22,0) 25%, rgba(20,20,22,.55) 55%, rgba(20,20,22,.9) 100%); }
.eco-t { text-shadow:0 1px 12px rgba(0,0,0,.45); }
.eco-link:hover img { transform:scale(1.04); }
.eco-t { position:absolute; left:0; right:0; bottom:0; z-index:1; display:grid; gap:4px; padding:24px 26px; }
.eco-verb { font-size:13px; font-weight:700; letter-spacing:.16em; text-transform:uppercase; color:#c9d6ff; }
.eco-t b { font-family:var(--display); font-weight:400; font-size:clamp(24px,2.2vw,34px); line-height:1.1; text-transform:uppercase; letter-spacing:.03em; }
.eco-line { font-size:var(--s1); color:rgba(255,255,255,.9); max-width:40ch; }
.eco-more { margin-top:6px; font-size:var(--s1); font-weight:700; color:#ffffff; }
.eco-more span { display:inline-block; transition:transform .3s var(--out); }
.eco-link:hover .eco-more span { transform:translateX(4px); }
.eco-perks { margin-top:16px; padding:28px 32px; border-radius:20px; background:var(--card); }
.eco-perks .kick { margin-bottom:14px; }
.eco-perks ul { list-style:none; margin:0; padding:0; display:grid; grid-template-columns:repeat(4,minmax(0,1fr)); gap:20px; }
.eco-perks li { display:grid; gap:6px; align-content:start; }
.eco-perks b { font-family:var(--display); font-weight:400; font-size:30px; line-height:1; color:var(--royal-ink); }
.eco-perks span { color:var(--muted); font-size:var(--s1); }

/* sign-up: steps on the left read like a configurator; the summary stays in view on the right */
.signup { padding:110px var(--m); background:#ffffff; }
.su-head { display:grid; grid-template-columns:minmax(0,5fr) minmax(0,7fr); gap:18px 56px; align-items:end; }
.su-head > p { margin:0; color:var(--muted); max-width:54ch; }
.su-body { margin-top:40px; display:grid; grid-template-columns:minmax(0,8fr) minmax(0,4fr); gap:28px; align-items:start; }
.su-side { grid-column:2; grid-row:1; position:sticky; top:24px; display:grid; gap:14px; }
.su-card { padding:24px 26px; border-radius:18px; background:var(--paper); box-shadow:inset 0 0 0 1px var(--line); }
.su-sum { margin:0; display:grid; gap:12px; }
.su-sum div { display:grid; gap:2px; }
.su-sum dt { font-size:13px; font-weight:600; color:var(--muted); }
.su-sum dd { margin:0; font-weight:600; color:#9a9da3; transition:color .2s linear; }
.su-sum dd.set { color:var(--ink); }
.su-intake { background:#e3e7f1; box-shadow:none; }
.su-big { margin:0; font-family:var(--display); font-size:26px; line-height:1.15; }
.su-fine { margin:8px 0 0; font-size:var(--s1); color:var(--muted); }
.su-form { grid-column:1; grid-row:1; display:grid; gap:14px; }
.su-step { margin:0; min-width:0; padding:26px 28px 28px; border:0; border-radius:18px; background:var(--paper); box-shadow:inset 0 0 0 1px var(--line); transition:box-shadow .3s var(--out), opacity .3s linear; }
.js .su-step:not(.now):not(.done) { opacity:.6; }
.su-step.now { box-shadow:inset 0 0 0 2px var(--royal), 0 16px 36px -24px rgba(65,105,225,.6); opacity:1; }
.su-step legend { float:left; width:100%; display:flex; align-items:center; gap:12px; margin-bottom:18px; padding:0; font-family:var(--display); font-size:clamp(22px,2vw,28px); line-height:1.2; }
.su-step legend + * { clear:both; }
.su-n { flex:none; width:32px; height:32px; border-radius:50%; display:grid; place-items:center; font-family:var(--body); font-size:14px; font-weight:700; color:#ffffff; background:var(--ink); transition:background-color .25s linear; }
.su-step.done .su-n { background:var(--royal); font-size:0; }
.su-step.done .su-n::before { content:""; width:9px; height:14px; margin-top:-3px; border:solid #ffffff; border-width:0 2.5px 2.5px 0; transform:rotate(45deg); }
.su-opts { display:grid; grid-template-columns:repeat(2,minmax(0,1fr)); gap:10px; }
.su-opt, .su-chip { position:relative; cursor:pointer; }
.su-opt input, .su-chip input { position:absolute; opacity:0; width:1px; height:1px; }
.su-box { display:grid; gap:4px; height:100%; padding:16px 18px; border-radius:14px; background:#ffffff; box-shadow:inset 0 0 0 1px var(--line); transition:box-shadow .2s var(--out), background-color .2s linear; }
.su-box b { font-size:var(--s2); }
.su-sub { font-size:var(--s1); color:var(--muted); }
.su-opt:hover .su-box, .su-chip:hover span { box-shadow:inset 0 0 0 1px var(--ink); }
.su-opt input:checked + .su-box { box-shadow:inset 0 0 0 2px var(--royal); background:#f3f6fe; }
.su-opt input:focus-visible + .su-box, .su-chip input:focus-visible + span { outline:3px solid var(--sky); outline-offset:2px; }
.su-chips { display:flex; flex-wrap:wrap; gap:10px; }
.su-chip span { display:inline-block; padding:10px 16px; border-radius:999px; background:#ffffff; box-shadow:inset 0 0 0 1px var(--line); font-size:var(--s1); font-weight:500; transition:box-shadow .2s var(--out), background-color .2s linear, color .2s linear; }
.su-chip input:checked + span { background:var(--royal); color:#ffffff; box-shadow:none; }
.su-chip[hidden], .su-when[hidden], .su-hint[hidden] { display:none; }
.su-hint { margin:14px 0 0; font-size:var(--s1); color:var(--muted); }
.su-q { margin:0 0 10px; font-weight:600; }
.su-note { margin:0; color:var(--muted); }
.su-fields { margin-top:18px; display:grid; grid-template-columns:repeat(3,minmax(0,1fr)); gap:14px; }
.su-field { display:grid; gap:6px; }
.su-field span { font-size:var(--s1); font-weight:600; } .su-field i { font-style:normal; font-weight:400; color:var(--muted); }
.su-field input, .su-field textarea { width:100%; font:inherit; font-size:var(--s2); padding:13px 14px; border:0; border-radius:12px; background:#ffffff; color:var(--ink); box-shadow:inset 0 0 0 1px var(--line); transition:box-shadow .2s var(--out); }
.su-field input:focus, .su-field textarea:focus { outline:none; box-shadow:inset 0 0 0 2px var(--royal); }
.su-wide { grid-column:1 / -1; }
.su-send { display:grid; gap:12px; justify-items:start; padding:6px 4px 0; }
.su-err { margin:0; padding:12px 16px; border-radius:12px; background:#fdecec; color:#9b1c1c; font-weight:600; }
.su-btn { font-size:var(--s2); padding:18px 30px; }
.su-btn:disabled { opacity:.85; cursor:wait; }
.su-trap { position:absolute; left:-10000px; width:1px; height:1px; overflow:hidden; }  /* bot trap: people never see or fill it */
.su-spin { display:inline-block; width:14px; height:14px; margin-right:10px; vertical-align:-2px; border-radius:50%; border:2px solid rgba(255,255,255,.35); border-top-color:#ffffff; animation:su-spin .7s linear infinite; }
@keyframes su-spin { to { transform:rotate(360deg); } }
@media (prefers-reduced-motion:reduce) { .su-spin { animation:none; border-color:#ffffff; } }
.su-legal { margin:0; font-size:13px; color:var(--muted); }
.su-done { grid-column:1 / -1; padding:48px; border-radius:20px; background:#e3e7f1; display:grid; gap:10px; justify-items:start; }
.su-done h3 { margin:0; font-family:var(--display); font-weight:400; font-size:var(--s3); text-transform:uppercase; letter-spacing:.03em; }
.su-done p { margin:0; color:var(--muted); }
.plan-btn { margin-top:18px; align-self:start; justify-self:start; }

/* phone: a sign-up bar stays at the bottom */
.mbar { display:none; }
@media (max-width:1020px) {
  .eco-head, .su-head { grid-template-columns:1fr; }
  .eco-grid { grid-template-columns:repeat(2,minmax(0,1fr)); }
  .eco-tile, .eco-tile.t-learn { grid-column:span 1; grid-row:auto; }
  .eco-tile.t-play { grid-column:span 2; grid-row:auto; }
  .eco-perks ul { grid-template-columns:repeat(2,minmax(0,1fr)); }
  .su-body { grid-template-columns:1fr; }
  .su-side { grid-column:1; grid-row:auto; position:static; order:1; grid-template-columns:1fr 1fr; }  /* after the questions, as on desktop where it sits beside them */
  .su-form { grid-row:auto; }
  .su-fields { grid-template-columns:1fr 1fr; }
}
@media (max-width:720px) {
  .eco, .signup { padding:80px var(--m); }
  .eco-grid { grid-template-columns:1fr; }
  .eco-tile.t-play { grid-column:span 1; }
  .eco-link { min-height:240px; }
  .eco-perks { padding:24px; } .eco-perks ul { grid-template-columns:1fr; }
  .su-side { grid-template-columns:1fr; }
  .su-opts, .su-fields { grid-template-columns:1fr; }
  .su-step { padding:22px 20px; }
  .su-done { padding:32px 24px; }
  .mbar { display:flex; gap:10px; align-items:center; position:fixed; left:0; right:0; bottom:0; z-index:45; padding:10px 16px calc(10px + env(safe-area-inset-bottom)); background:rgba(249,250,250,.94); border-top:1px solid var(--line); backdrop-filter:blur(12px); -webkit-backdrop-filter:blur(12px); }
  .mbar .btn { flex:1; justify-content:center; padding:14px 18px; font-size:var(--s1); }
  .mbar-wa { padding:13px 18px; border-radius:999px; font-weight:600; font-size:var(--s1); text-decoration:none; box-shadow:inset 0 0 0 1.5px var(--ink); }
  body:has(.mbar) footer { padding-bottom:96px; }
}
@media (prefers-reduced-motion:reduce) { .eco-link:hover img { transform:none; } }
.su-done[hidden], .su-side[hidden], .su-form[hidden], .su-err[hidden] { display:none; }
button.btn { font-family:inherit; }

/* home, streamlined (23 Oct): the wordmark sits in the copy column so nothing overlaps the photo;
   the motto sits beside Google reviews; Better together runs straight into the sign-up */

.intro-rev { padding:96px var(--m) 88px; }
.intro-rev .intro-top { grid-template-columns:minmax(0,6fr) minmax(0,5fr); gap:56px; align-items:start; }
.intro-rev .intro-copy p { max-width:54ch; }
.motto { margin:4px 0 0; display:grid; gap:16px; }
.motto dt { font-weight:700; }
.motto dt::before { content:""; display:inline-block; width:7px; height:7px; margin:0 10px 3px 0; border-radius:50%; background:var(--royal); }
.motto dd { margin:4px 0 0 17px; color:var(--muted); font-size:var(--s1); max-width:52ch; }
.reviews .kick { margin-bottom:14px; }
.rev-list { list-style:none; margin:0; padding:0; display:grid; gap:14px; }
.rev { display:grid; grid-template-columns:84px minmax(0,1fr); gap:20px; align-items:center; padding:20px 24px; border-radius:18px; background:#ffffff; box-shadow:inset 0 0 0 2px var(--royal); }
.rev img { width:84px; height:84px; border-radius:50%; object-fit:cover; border:0; box-shadow:none; }
.rev-q { margin:0; font-size:var(--s2); line-height:1.45; }
.rev-by { margin:8px 0 0; display:flex; flex-wrap:wrap; align-items:center; gap:4px 12px; }
.rev-by a { font-weight:700; color:var(--ink); text-decoration:underline; text-underline-offset:4px; text-decoration-thickness:1.5px; }
.rev-by a:hover { color:var(--royal-ink); }
/* each review card opens that person's Google review: the name link stretches over the whole card */
.rev { position:relative; cursor:pointer; }
.rev-by a::after { content:""; position:absolute; inset:0; border-radius:18px; }
.rev:focus-within { outline:3px solid var(--sky); outline-offset:3px; }
.rev-by a:focus-visible { outline:none; }
.rev-all { margin:18px 0 0; display:flex; flex-wrap:wrap; align-items:center; gap:8px 20px; font-size:var(--s1); }
.rev-all[hidden] { display:none; }
.rev-score { color:var(--muted); font-weight:600; }
/* Band Experience: "Your membership" terms (renewing; changing or stopping and refunds to come) */
.terms { margin-top:28px; padding:28px 32px; border-radius:18px; background:#ffffff; box-shadow:var(--soft-edge); }
.terms h3 { margin:0 0 16px; font-family:var(--display); font-weight:400; font-size:var(--s3); text-transform:uppercase; letter-spacing:.035em; }
.terms-list { margin:0; display:grid; grid-template-columns:repeat(auto-fit,minmax(240px,1fr)); gap:20px 36px; }
.terms-list div[hidden] { display:none; }
.terms-list dt { color:var(--royal-ink); font-weight:700; font-size:var(--s1); text-transform:uppercase; letter-spacing:.12em; }
.terms-list dd { margin:6px 0 0; }
@media (max-width:820px) { .terms { padding:22px 20px; } }
.stars { color:#e8a317; font-size:20px; letter-spacing:2px; line-height:1; }
.intro-rev .facts { margin-top:56px; }

.eco { padding-bottom:40px; }
.signup { padding-top:40px; }
.su-slim { display:block; margin-bottom:-12px; }
.su-slim .kick { margin:0; }

@media (max-width:1020px) {
  .intro-rev .intro-top { grid-template-columns:1fr; gap:40px; }
}
@media (max-width:720px) {
  .intro-rev { padding:72px var(--m); }
  .rev { grid-template-columns:64px minmax(0,1fr); gap:16px; padding:18px; }
  .rev img { width:64px; height:64px; }
  .rev-q { font-size:var(--s1); }
}

/* visit rows: rounded, like the other menus and boxes */
.visit .row { border-radius:999px; padding:16px 26px; }
@media (max-width:820px) { .visit .row { border-radius:20px; } }

/* reviews: a soft blue glow instead of a hard outline; it brightens a little on hover */
.rev { box-shadow:0 0 0 1px rgba(65,105,225,.12), 0 10px 32px -10px rgba(65,105,225,.38), 0 0 22px -6px rgba(65,105,225,.22); transition:box-shadow .35s var(--out), transform .35s var(--out); }
.rev:hover { box-shadow:0 0 0 1px rgba(65,105,225,.18), 0 16px 40px -10px rgba(65,105,225,.5), 0 0 30px -4px rgba(65,105,225,.3); transform:translateY(-2px); }
@media (prefers-reduced-motion:reduce) { .rev, .rev:hover { transform:none; } }

/* About: motto and logo in one section; each part of the logo carries one of our beliefs */
.a-motto { padding:120px var(--m) 100px; background:#ffffff; }
.motto-head { display:grid; grid-template-columns:minmax(0,5fr) minmax(0,6fr); gap:20px 56px; align-items:end; }
.motto-head h2 { margin:0; font-size:var(--s4); }
.motto-head .lead { margin:0; color:var(--muted); max-width:56ch; }
.motto-parts { margin-top:48px; }
.motto-parts li { padding:0 0 4px; }
.identity-parts .motto-tie { margin:6px 0 0; padding:14px 16px; border-radius:14px; background:var(--paper); color:var(--ink); }
.motto-tie b { display:block; margin-bottom:2px; color:var(--royal-ink); }
.a-vision-short { padding:100px var(--m); }
.doc-row { margin-top:32px; grid-template-columns:repeat(2,minmax(0,1fr)); max-width:980px; }
@media (max-width:900px) { .motto-head { grid-template-columns:1fr; } .doc-row { grid-template-columns:1fr; } .a-motto { padding:80px var(--m); } }

/* Team: smaller portraits. A fixed 4:5 portrait sits top-left of each card instead of
   stretching to the height of the bio, so the text gets the room */
@media (min-width:721px) {
  .card-p { grid-template-columns:152px minmax(0,1fr); column-gap:26px; align-items:start; padding:26px; border-radius:18px; }
  .card-p img { width:152px; height:auto; min-height:0; aspect-ratio:4/5; align-self:start; }
  .card-p > div { padding:2px 0 0; }
  .card-p h3, .card-p h4 { font-size:clamp(24px,2vw,30px); }
}
.card-p { border-radius:18px; }

/* Band Experience hero: the programme on the left, a short sign-up card on the right,
   the same steps and Google Form as the home page, Band Experience only */
.be-reg { grid-template-columns:minmax(0,6fr) minmax(0,5fr); align-items:start; gap:48px; }
.be-reg .b-hero-copy { padding-top:8px; }
.be-reg-photo { width:100%; height:auto; aspect-ratio:16/9; object-fit:cover; margin-top:28px; }
.be-card { position:sticky; top:20px; padding:26px 24px 24px; border-radius:22px; background:#ffffff; box-shadow:0 0 0 1px rgba(65,105,225,.12), 0 18px 44px -18px rgba(65,105,225,.45), 0 0 26px -8px rgba(65,105,225,.22); }
.be-card-head { margin-bottom:14px; }
.be-card-head .kick { margin-bottom:6px; }
.be-card-t { margin:0; font-size:clamp(28px,2.6vw,38px); }
.be-card-head .su-fine { margin-top:6px; }
.be-card .su-form { gap:10px; }
.be-card .su-step { padding:16px 16px 18px; border-radius:16px; }
.be-card .su-step legend { margin-bottom:12px; font-size:20px; gap:10px; }
.be-card .su-n { width:26px; height:26px; font-size:13px; }
.be-card .su-opts { grid-template-columns:1fr 1fr; gap:8px; }
.be-card .su-box { padding:12px 14px; }
.be-card .su-box b { font-size:var(--s1); }
.be-card .su-sub { font-size:13px; }
.be-card .su-chips { gap:7px; }
.be-card .su-chip span { padding:8px 13px; font-size:14px; }
.be-card .su-fields { grid-template-columns:1fr 1fr; gap:10px; margin-top:12px; }
.be-card .su-field input { padding:11px 12px; font-size:var(--s1); }
.be-card .su-field span { font-size:14px; }
.be-card .su-send { padding:4px 0 0; }
.be-card .su-btn { width:100%; justify-content:center; padding:15px 22px; }
.be-card .su-done { padding:28px 24px; }
.rentals-short { display:grid; gap:14px; justify-items:start; max-width:760px; }
.rentals-short p { margin:0; color:var(--muted); }
.rentals-short b { color:var(--ink); }
@media (max-width:1020px) {
  .be-reg { grid-template-columns:1fr; }
  .be-card { position:static; }
}
@media (max-width:520px) {
  .be-card { padding:22px 16px; }
  .be-card .su-opts, .be-card .su-fields { grid-template-columns:1fr; }
}

/* sign-up forms: a soft blue glow instead of hard outlines (current step, chosen option, typing, hover) */
:root { --glow:0 0 0 1px rgba(65,105,225,.14), 0 14px 36px -14px rgba(65,105,225,.45), 0 0 24px -6px rgba(65,105,225,.25);
        --glow-sm:0 0 0 1px rgba(65,105,225,.2), 0 6px 18px -6px rgba(65,105,225,.45), 0 0 14px -4px rgba(65,105,225,.25);
        --soft-edge:0 0 0 1px rgba(48,49,50,.06), 0 4px 14px -8px rgba(48,49,50,.18); }
.su-step { box-shadow:var(--soft-edge); }
.su-step.now { box-shadow:var(--glow); background:#ffffff; }
.su-box, .su-chip span, .su-field input, .su-field textarea { box-shadow:var(--soft-edge); }
.su-opt:hover .su-box, .su-chip:hover span { box-shadow:0 0 0 1px rgba(65,105,225,.12), 0 8px 20px -10px rgba(65,105,225,.4); }
.su-opt input:checked + .su-box { box-shadow:var(--glow-sm); background:#f5f7ff; }
.su-chip input:checked + span { box-shadow:0 6px 16px -6px rgba(65,105,225,.6); }
.su-field input:focus, .su-field textarea:focus { box-shadow:var(--glow-sm); }
.su-card { box-shadow:var(--soft-edge); }
.doc-link { box-shadow:var(--soft-edge); }
.doc-link:hover { box-shadow:var(--glow-sm); }

/* Band Experience: a cue under the hero that there's more below. A dot glides down a thin line
   (ease-in-out, 1.8s, repeating); clicking jumps to How the band works. Still with reduced motion */
.be-reg { padding-bottom:40px; }
.scroll-cue { grid-column:1 / -1; justify-self:center; display:grid; justify-items:center; gap:4px; margin-top:28px; padding:8px 18px; text-decoration:none; color:var(--ink); text-align:center; }
.sc-t { font-weight:700; font-size:var(--s1); letter-spacing:.14em; text-transform:uppercase; color:var(--royal-ink); }
.sc-sub { font-size:13px; color:var(--muted); }
.sc-line { position:relative; width:2px; height:56px; margin-top:10px; border-radius:2px; background:linear-gradient(180deg, rgba(65,105,225,.35), rgba(65,105,225,0)); }
.sc-line i { position:absolute; left:50%; top:0; width:10px; height:10px; margin-left:-5px; border-radius:50%; background:var(--royal); box-shadow:0 0 12px 2px rgba(65,105,225,.45); animation:sc-drop 1.8s var(--inout) infinite; }
.sc-line::after { content:""; position:absolute; left:50%; bottom:-6px; width:12px; height:12px; margin-left:-6px; border:solid var(--royal); border-width:0 2px 2px 0; transform:rotate(45deg); opacity:.7; }
@keyframes sc-drop { 0% { transform:translateY(0); opacity:0; } 15% { opacity:1; } 80% { opacity:1; } 100% { transform:translateY(46px); opacity:0; } }
.scroll-cue:hover .sc-t { text-decoration:underline; text-underline-offset:5px; }
@media (prefers-reduced-motion:reduce) { .sc-line i { top:20px; } }
#how.b-format { padding-top:56px; }

/* Private lessons prices: the same lesson strip as PSX Family; one block for a single lesson */
.l1 .lrow { width:calc((100% - 36px) / 10); min-width:36px; }
.l1 .lcap .lmin { margin-left:0; }
.fam-line { margin:22px 0 0; font-size:var(--s2); }
.p-extra-one { grid-template-columns:1fr; }

/* All instruments: small tiles, two families side by side, instrument names only */
.inst-hub { display:grid; grid-template-columns:repeat(2,minmax(0,1fr)); gap:32px 48px; align-items:start; }
.inst-hub > .kh, .inst-hub > .hub-credit { grid-column:1 / -1; }
.inst-hub .inst-fam, .inst-hub .inst-fam + .inst-fam { margin:0; }
.inst-hub .fam { margin:0 0 12px; font-size:var(--s2); }
.inst-hub .inst-grid { display:grid; grid-template-columns:repeat(5,minmax(0,1fr)); gap:10px; margin:0; }
.inst-hub .inst-tile img { width:100%; height:auto; aspect-ratio:1/1; object-fit:cover; border-width:4px; }
.inst-hub .inst-n { display:block; margin-top:6px; font-family:var(--body); font-weight:600; font-size:14px; }
.hub-credit { margin:8px 0 0; font-size:13px; color:var(--muted); }
@media (max-width:900px) { .inst-hub { grid-template-columns:1fr; gap:24px; } }
@media (max-width:520px) { .inst-hub .inst-grid { grid-template-columns:repeat(3,minmax(0,1fr)); } }

/* All instruments: the piano game, with the instrument as the first question */
.hub-finder { padding:0 var(--m) 40px; }
.hub-finder .finder { margin-top:0; }
.finder-insts { display:flex; flex-wrap:wrap; gap:8px; }
.finder-insts label span { padding:9px 15px; font-size:var(--s1); }

/* menu group headings (About, Lessons, Instruments, Rentals; Woodwind, Brass...) in royal blue */
.mmenu-panel .mgroup, .dd-g { color:var(--royal-ink); }

/* Studio: two shortcuts in the hero (grey, light blue on hover), and one rates-and-booking section */
.studio-for { display:grid; grid-template-columns:repeat(2,minmax(0,1fr)); gap:10px; max-width:560px; }
.studio-for a { display:grid; gap:2px; padding:16px 20px; border-radius:18px; background:var(--card); color:var(--ink); text-decoration:none; transition:background-color .2s linear, transform .2s var(--out); }
.studio-for a::after { content:"↓"; justify-self:start; margin-top:4px; color:var(--royal-ink); font-weight:700; transition:transform .3s var(--out); }
.studio-for a:hover, .studio-for a:focus-visible { background:#dfe6fb; }
.studio-for a:hover::after { transform:translateY(3px); }
.studio-for b { font-size:var(--s2); }
.studio-for span { font-size:14px; color:var(--muted); }
#learners, #teach, #book { scroll-margin-top:16px; }
.sbook { margin-top:28px; display:grid; grid-template-columns:minmax(0,5fr) minmax(0,6fr); gap:20px; align-items:start; }
.sbook h3 { margin:0 0 16px; font-family:var(--display); font-weight:400; font-size:26px; text-transform:uppercase; letter-spacing:.03em; }
.sbook-steps, .sbook-form { padding:28px 30px; border-radius:20px; background:#ffffff; box-shadow:var(--soft-edge); }
.sbook-steps .steps3 { margin:0; grid-template-columns:1fr; gap:16px; }
.sbook-steps .steps3::before { display:none; }
.sbook-form { display:grid; gap:14px; justify-items:start; box-shadow:var(--glow); }
.sbook-who { margin:0; padding:0; border:0; display:flex; flex-wrap:wrap; gap:8px; }
.sbook-who legend { margin-bottom:8px; font-weight:600; font-size:var(--s1); }
.sbook-who label { position:relative; cursor:pointer; }
.sbook-who input { position:absolute; opacity:0; }
.sbook-who span { display:inline-block; padding:9px 16px; border-radius:999px; background:var(--card); font-weight:600; font-size:var(--s1); transition:background-color .2s linear, color .2s linear; }
.sbook-who label:hover span { background:#dfe6fb; color:var(--royal-ink); }
.sbook-who input:checked + span { background:var(--royal); color:#ffffff; }
.sbook-who input:focus-visible + span { outline:3px solid var(--sky); outline-offset:2px; }
.sbook-fields { width:100%; display:grid; grid-template-columns:repeat(4,minmax(0,1fr)); gap:10px; }
.sbook-name { grid-column:1 / -1; }
.sbook-fields select { width:100%; font:inherit; font-size:var(--s1); padding:12px; border:0; border-radius:12px; background:#ffffff; color:var(--ink); box-shadow:var(--soft-edge); }
.sbook-fields select:focus { outline:none; box-shadow:var(--glow-sm); }
.sbook-fields .su-field input { font-size:var(--s1); padding:11px 12px; }
@media (max-width:900px) { .sbook { grid-template-columns:1fr; } .sbook-fields { grid-template-columns:1fr 1fr; } }
@media (max-width:520px) { .studio-for { grid-template-columns:1fr; } .sbook-steps, .sbook-form { padding:22px 18px; } }
.sbook-steps .steps3 li { grid-template-columns:40px 1fr; gap:14px; }
.sbook-steps .steps3 li .st-n { box-shadow:none; }
.studio-for a::after { content:"\2193"; font-family:var(--body); font-size:18px; line-height:1; }

/* Band Experience sign-up card: an arrow button folds the form away (height eases in-out, 350ms) */
.be-card-top { display:flex; align-items:center; justify-content:space-between; gap:16px; }
.be-toggle { flex:none; width:44px; height:44px; border:0; border-radius:50%; display:grid; place-items:center; cursor:pointer; color:var(--royal-ink); background:#eef2fd; box-shadow:var(--glow-sm); transition:background-color .2s linear, transform .2s var(--out); }
.be-toggle:hover { background:#dfe6fb; }
.be-toggle:active { transform:scale(.94); }
.be-toggle svg { width:22px; height:22px; transition:transform .35s var(--inout); }
.be-card:not(.folded) .be-toggle svg { transform:rotate(-180deg); }
.be-body { display:grid; grid-template-rows:1fr; transition:grid-template-rows .35s var(--inout), opacity .25s linear; }
.be-body-in { min-height:0; overflow:hidden; }
.be-card.folded .be-body { grid-template-rows:0fr; opacity:0; }
.be-card.folded .be-card-head { margin-bottom:0; }
.be-card.folded { cursor:default; }

/* concerts and events: the upcoming event card, and the event page */
.ev-next { padding:110px var(--m) 0; background:#ffffff; }
.ev-card { margin-top:32px; display:grid; grid-template-columns:minmax(0,7fr) minmax(0,5fr); gap:0; border-radius:20px; overflow:hidden; text-decoration:none; color:var(--ink); background:#ffffff; box-shadow:var(--glow); transition:box-shadow .3s var(--out), transform .3s var(--out); }
.ev-card:hover { transform:translateY(-3px); box-shadow:0 0 0 1px rgba(65,105,225,.2), 0 22px 46px -16px rgba(65,105,225,.55); }
.ev-card img { width:100%; height:100%; object-fit:cover; border:0; border-radius:0; box-shadow:none; }
.ev-card-t { display:grid; gap:8px; align-content:center; padding:32px 36px; }
.ev-card-t time { color:var(--royal-ink); font-weight:700; }
.ev-card-t b { font-family:var(--display); font-weight:400; font-size:var(--s3); line-height:1.1; text-transform:uppercase; letter-spacing:.03em; }
.ev-card-t > span:not(.ev-more) { color:var(--muted); }
.ev-more { margin-top:8px; font-weight:700; color:var(--royal-ink); }
.ev-hero .ev-banner { min-height:0; height:auto; aspect-ratio:2207/921; align-self:center; object-fit:contain; }
.ev-prog { padding:110px var(--m); background:#ffffff; }
.ev-prog h2 { margin:0; font-size:var(--s4); }
.ev-cols { margin-top:36px; display:grid; grid-template-columns:repeat(3,minmax(0,1fr)); gap:16px; }
.ev-col { padding:28px 30px; border-radius:18px; background:var(--paper); box-shadow:var(--soft-edge); }
.ev-col h3 { margin:0; font-family:var(--display); font-weight:400; font-size:24px; text-transform:uppercase; letter-spacing:.03em; }
.ev-sub { margin:4px 0 0; font-size:var(--s1); color:var(--royal-ink); font-weight:600; }
.ev-col ul { list-style:none; margin:18px 0 0; padding:0; display:grid; gap:12px; }
.ev-col li b { display:block; }
.ev-col li span { font-size:var(--s1); color:var(--muted); font-style:italic; }
.ev-feat-h { margin-top:64px; }
.ev-feat { margin:24px 0 0; display:grid; grid-template-columns:repeat(3,minmax(0,1fr)); gap:16px; }
.ev-feat div { padding:22px 26px; border-radius:18px; background:var(--card); }
.ev-feat dt { font-size:13px; font-weight:700; letter-spacing:.14em; text-transform:uppercase; color:var(--royal-ink); }
.ev-feat dd { margin:8px 0 0; font-size:var(--s2); }
.ev-info { padding:110px var(--m); display:grid; grid-template-columns:minmax(0,7fr) minmax(0,5fr); gap:56px; align-items:start; }
.ev-info h2 { margin:0; font-size:var(--s4); }
.ev-when { margin:28px 0; display:grid; gap:14px; }
.ev-when div { display:grid; grid-template-columns:120px minmax(0,1fr); gap:16px; padding-bottom:14px; border-bottom:1px solid var(--line); }
.ev-when dt { font-weight:700; } .ev-when dd { margin:0; color:var(--muted); }
.ev-docs { margin-top:32px; max-width:560px; }
.ev-credits { margin-top:32px; display:grid; grid-template-columns:repeat(3,minmax(0,1fr)); gap:16px; }
.ev-credits .kick { margin-bottom:4px; } .ev-credits p:last-child { margin:0; font-size:var(--s1); }
.ev-poster { margin:0; position:sticky; top:24px; }
.ev-poster img { width:100%; height:auto; }
@media (max-width:1020px) {
  .ev-card, .ev-info { grid-template-columns:1fr; }
  .ev-cols, .ev-feat { grid-template-columns:1fr; }
  .ev-poster { position:static; max-width:520px; }
}
@media (max-width:720px) {
  .ev-next, .ev-prog, .ev-info { padding:72px var(--m); }
  .ev-next { padding-bottom:0; }
  .ev-card-t { padding:24px; }
  .ev-credits { grid-template-columns:1fr; }
  .ev-when div { grid-template-columns:1fr; gap:4px; }
}
.ev-hero { grid-template-columns:minmax(0,5fr) minmax(0,7fr); }
@media (max-width:820px) { .ev-hero { grid-template-columns:1fr; } }
.ev-next h2 { margin:0; font-size:var(--s4); }

/* Finale 2026 photos added to About (partners) and Concerts (recent) */
.partners-photo, .recent-photo { width:100%; max-width:1100px; height:auto; aspect-ratio:3/2; object-fit:cover; margin:32px 0 8px; }
.partners-photo { aspect-ratio:4/3; max-width:720px; object-position:50% 40%; }
.p-support-photos img.pos-sbs { object-position:50% 35%; }
/* blog cover: keep both faces in the wide crop */
img[src*="finale26-certificate-adult"] { object-position:50% 16%; }
.id-photo[src*="about-bassoon-learner"] { object-position:60% 30%; }
.t-strip img[src*="team-conductor-sectional"] { object-position:55% 30%; }
.t-strip img[src*="team-louis-conducting"] { object-position:35% 30%; }

/* Band Experience sign-up card. The arrow sits fixed in the card's top corner on every size.
   Desktop: folds sideways into a 96px tab. Choreography (motion principles: ease-out entering,
   ease-in leaving, ease-in-out for things moving within the frame, linear for opacity):
   open  = tab label fades (120ms) -> column widens (520ms in-out) -> form parts fade and slide in, 50ms apart
   close = form fades (140ms) -> column narrows (520ms in-out, 90ms later) -> tab label fades in.
   The form keeps its open width (--be-w, set by script) so nothing reflows while the card moves. */
.be-card { position:relative; }
.be-card .be-toggle { position:absolute; top:22px; right:24px; z-index:2; }
.be-card-top { padding-right:56px; }
.be-tab { display:none; }
@media (min-width:1021px) {
  .be-reg { grid-template-columns:minmax(0,1fr) calc((100% - 48px) * 5 / 11); transition:grid-template-columns .52s var(--inout); align-items:start; }
  .be-reg.card-folded { grid-template-columns:minmax(0,1fr) 96px; transition-delay:.09s; }
  .be-reg > .scroll-cue { grid-column:1 / -1; }
  .be-card { overflow:hidden; }
  .be-card .be-toggle { right:26px; }
  .be-card > .be-card-head, .be-card > .be-body { width:var(--be-w, 520px); }
  .be-card .be-body { display:block; }
  .be-card .be-body-in { min-width:0; overflow:visible; }
  /* open: the parts arrive in order */
  .be-card > .be-card-head, .be-card .su-step, .be-card .su-send { opacity:1; transform:none; transition:opacity .3s linear, transform .42s var(--out); }
  .be-card > .be-card-head { transition-delay:.2s; }
  .be-card .su-step:nth-of-type(1) { transition-delay:.25s; } .be-card .su-step:nth-of-type(2) { transition-delay:.3s; }  /* counts the four steps only */
  .be-card .su-step:nth-of-type(3) { transition-delay:.35s; } .be-card .su-step:nth-of-type(4) { transition-delay:.4s; }
  .be-card .su-send { transition-delay:.45s; }
  /* folded: everything leaves at once, quickly, then the label comes in */
  .be-card.folded { cursor:pointer; }
  .be-card.folded > .be-card-head, .be-card.folded .su-step, .be-card.folded .su-send { opacity:0; transform:translateX(18px); transition:opacity .14s linear, transform .16s cubic-bezier(.55,0,1,.45); transition-delay:0s; }
  .be-card.folded .be-body { visibility:hidden; transition:visibility 0s .16s; }
  .be-tab { display:block; position:absolute; top:88px; left:0; width:96px; text-align:center; pointer-events:none;
    writing-mode:vertical-rl; transform:rotate(180deg); white-space:nowrap; font-family:var(--display); font-size:28px; letter-spacing:.06em; text-transform:uppercase; color:var(--ink);
    opacity:0; transition:opacity .12s linear; }
  .be-card.folded .be-tab { opacity:1; transition:opacity .22s linear .42s; }
  .be-card.folded:hover { box-shadow:0 0 0 1px rgba(65,105,225,.2), 0 18px 44px -14px rgba(65,105,225,.55), 0 0 30px -6px rgba(65,105,225,.3); }
  /* arrow: left (open) when folded, right (close) when open, turning with the column */
  .be-card .be-toggle svg, .be-card:not(.folded) .be-toggle svg { transform:rotate(-90deg); transition:transform .52s var(--inout); }
  .be-card.folded .be-toggle svg { transform:rotate(90deg); }
}

/* instrument rental: Accent Music's own logo beside the partner heading */
.acc-sec .sec-head { position:relative; }
.acc-logo { display:block; width:min(300px,60vw); margin:20px 0 4px; padding:18px 22px; border-radius:18px; background:#ffffff; box-shadow:var(--soft-edge); transition:box-shadow .3s var(--out); }
.acc-logo:hover { box-shadow:var(--glow-sm); }
.acc-logo img { width:100%; height:auto; border:0; box-shadow:none; background:none; }
@media (min-width:821px) {
  .acc-sec .sec-head { display:grid; grid-template-columns:minmax(0,1fr) auto; column-gap:48px; align-items:center; }
  .acc-sec .sec-head .kh { grid-column:1; grid-row:1; }
  .acc-sec .sec-head .lead { grid-column:1; grid-row:2; }
  .acc-sec .acc-logo { grid-column:2; grid-row:1 / span 2; margin:0; }
}
.credit-wrap { padding:0 var(--m) 32px; } .credit-wrap .credit { margin:0; font-size:13px; color:var(--muted); }

/* Home hero: the TWA crest (ring, laurels and lyre) leads, with "Let's play together" set just below the
   laurels and above the tagline. Band Experience photos fill the background with a round clearing around
   the ring. Phones get a smaller ring so more of the photos shows. */
.seal-hero { position:relative; overflow:hidden; text-align:center; padding:34px var(--m) 70px; background:var(--paper); }
.seal-hero img { border:0; border-radius:0; box-shadow:none; background:none; }
.topbar ~ main > .seal-hero h1.sh-motto::after { display:none; }  /* no title divider under the motto */
.sh-pill { position:relative; z-index:3; display:inline-block; margin:0; padding:7px 16px; border-radius:999px; background:#eef2fd; box-shadow:inset 0 0 0 1px rgba(65,105,225,.18); color:var(--royal-ink); font-size:12px; font-weight:700; letter-spacing:.2em; text-transform:uppercase; }
.sh-seal { --w:480px; --cy:356px; --wh:780px; --r1:280px; --r2:400px; position:relative; z-index:2; width:var(--w); aspect-ratio:500 / 560; margin:18px auto 0; }
.sh-wings { position:absolute; z-index:0; left:50%; top:calc(50% - var(--cy)); width:100vw; height:var(--wh); transform:translateX(-50%); opacity:.55; pointer-events:none;
  -webkit-mask-image:radial-gradient(circle at 50% var(--cy), transparent var(--r1), #000 var(--r2)), linear-gradient(to bottom, transparent 0%, #000 9%, #000 68%, transparent 88%); -webkit-mask-composite:source-in;
  mask-image:radial-gradient(circle at 50% var(--cy), transparent var(--r1), #000 var(--r2)), linear-gradient(to bottom, transparent 0%, #000 9%, #000 68%, transparent 88%); mask-composite:intersect; }
.sh-wings img { position:absolute; top:0; width:54%; max-width:none; height:100%; object-fit:cover; }
.sh-wings .sh-l { left:0; object-position:30% 40%; -webkit-mask-image:linear-gradient(to right, #000 82%, transparent 100%); mask-image:linear-gradient(to right, #000 82%, transparent 100%); }
.sh-wings .sh-r { right:0; object-position:55% 60%; transform:scaleX(-1); -webkit-mask-image:linear-gradient(to right, #000 82%, transparent 100%); mask-image:linear-gradient(to right, #000 82%, transparent 100%); }  /* mirrored so the players face the middle; the mask flips with it */
.sh-ring { position:absolute; z-index:1; inset:0; width:100%; height:100%; opacity:.82; }
.sh-lyre { position:absolute; z-index:1; left:50%; top:47%; height:46.5%; width:auto; transform:translate(-50%,-50%); opacity:.82; }  /* the crest's own lyre, as solid as the ring */
.sh-motto { position:relative; z-index:3; margin:10px 0 0; font-size:52px; line-height:1.02; letter-spacing:.05em; }
.sh-motto span { display:block; }
.sh-blue { color:var(--royal); }
.sh-lede { position:relative; z-index:3; margin:16px 0 0; font-size:27px; font-weight:500; color:var(--ink); }
.sh-sub { position:relative; z-index:3; margin:10px auto 0; max-width:46ch; font-size:17px; line-height:1.55; color:var(--muted); }
.sh-act { position:relative; z-index:3; margin-top:26px; display:flex; flex-wrap:wrap; gap:14px 26px; justify-content:center; align-items:center; }
.sh-act .btn { padding:8px 8px 8px 26px; gap:14px; box-shadow:0 12px 28px -14px rgba(65,105,225,.75); }
.sh-arr { display:inline-grid; place-items:center; width:36px; height:36px; border-radius:50%; background:rgba(255,255,255,.2); transition:transform .3s var(--out); }
.sh-act .btn:hover .sh-arr { transform:translateX(3px); }
.sh-act .link { font-size:17px; color:var(--royal-ink); }
.sh-meta { position:relative; z-index:3; margin:20px 0 0; font-size:14px; color:var(--muted); }
@media (max-width:820px) {
  .seal-hero { padding:26px 18px 48px; }
  .sh-pill { font-size:9.5px; letter-spacing:.12em; padding:6px 12px; }
  .sh-seal { --w:270px; --cy:262px; --wh:520px; --r1:150px; --r2:200px; margin-top:14px; }
  .sh-wings { opacity:.4; }
  .sh-motto { margin-top:8px; font-size:34px; }
  .sh-lede { margin-top:12px; font-size:20px; }
  .sh-sub, .sh-act .link { font-size:15px; }
  .sh-act { flex-direction:column; }
  .sh-meta { font-size:12.5px; }
}
@media (max-width:380px) { .sh-lede { font-size:18px; } }
@media (prefers-reduced-motion:reduce) { .sh-arr { transition:none; } }

/* Concerts and About heroes: a compact page title, set like the other inner pages (label, title, divider on the left),
   so they read as sections of the site rather than a second home page. The two photos sit as a quiet wash on the right. */
.sub-hero { position:relative; overflow:hidden; padding:64px var(--m) 72px; background:var(--paper); }
.sb-wash { position:absolute; z-index:0; top:0; bottom:0; right:0; width:54%; opacity:.45; pointer-events:none;
  -webkit-mask-image:linear-gradient(to right, transparent 0%, #000 38%), linear-gradient(to bottom, transparent 0%, #000 16%, #000 80%, transparent 100%); mask-image:linear-gradient(to right, transparent 0%, #000 38%), linear-gradient(to bottom, transparent 0%, #000 16%, #000 80%, transparent 100%); -webkit-mask-composite:source-in; mask-composite:intersect; }
.sub-hero .sb-wash img { position:absolute; top:0; height:100%; width:62%; max-width:none; object-fit:cover; border:0; border-radius:0; box-shadow:none; background:none; }
.sb-wash .sb-a { left:0; -webkit-mask-image:linear-gradient(to right, #000 70%, transparent 100%); mask-image:linear-gradient(to right, #000 70%, transparent 100%); }
.sb-wash .sb-b { right:0; z-index:-1; -webkit-mask-image:linear-gradient(to right, transparent 0%, #000 35%); mask-image:linear-gradient(to right, transparent 0%, #000 35%); }  /* both edges feathered, so the photos melt into each other with no seam */
.sb-about .sb-a { object-position:50% 30%; } .sb-about .sb-b { object-position:40% 35%; }
.sb-concerts .sb-a { object-position:50% 60%; } .sb-concerts .sb-b { object-position:40% 55%; }
.sb-copy { position:relative; z-index:1; display:grid; gap:18px; max-width:min(720px, 52%); }
.sub-hero h1 { margin:0; font-size:clamp(34px,3.6vw,52px); }
.sub-hero h1::after { margin-top:14px; }
.sub-hero .statement { margin:0; font-family:var(--display); font-size:clamp(22px,2vw,28px); line-height:1.25; color:var(--sky); }
.sb-copy > p:not(.statement) { margin:0; max-width:60ch; color:var(--muted); }
.sub-hero .b-facts { margin:4px 0 0; }
.sub-hero .b-act { margin-top:4px; }
@media (max-width:820px) {
  .sub-hero { display:flex; flex-direction:column; padding:36px var(--m) 0; }
  .sb-wash { order:2; }  /* photos after the words, as on desktop where they sit to the right */
  .sb-copy { max-width:none; gap:16px; }
  .sb-wash { position:relative; inset:auto; width:auto; height:200px; margin:28px calc(var(--m) * -1) 0; opacity:.6;
    -webkit-mask-image:linear-gradient(to bottom, transparent 0%, #000 22%, #000 70%, transparent 100%); mask-image:linear-gradient(to bottom, transparent 0%, #000 22%, #000 70%, transparent 100%); }
  .sub-hero .sb-wash img { width:56%; }
}
@media (prefers-reduced-motion:reduce) { .sub-hero .rise { transition:none; } }

/* PSX and PSX Family headers: one layout (faint lyre, big title, blue subtitle, fact cards), each page with its own photos */
.lh { position:relative; overflow:hidden; }
.lh-lyre { position:absolute; z-index:0; left:calc(var(--m) + 6px); top:36px; width:auto; height:400px; opacity:.05; pointer-events:none; border:0 !important; box-shadow:none !important; background:none !important; }
.lh { display:grid; grid-template-columns:minmax(0,1.08fr) minmax(0,.92fr); gap:64px; align-items:center; padding:48px var(--m) 84px; }
.lh-copy { position:relative; z-index:1; }
.lh .sh-pill { position:relative; z-index:1; }
.lh .lh-title { margin:18px 0 0; font-size:clamp(40px,4.4vw,64px); line-height:1.04; letter-spacing:.04em; }
.lh-where { display:block; margin-top:10px; font-size:.42em; line-height:1.3; letter-spacing:.14em; color:var(--royal-ink); }
.lh-psx .lh-title { font-size:clamp(64px,6.8vw,100px); letter-spacing:.06em; line-height:1; }
.lh-psx .lh-where { font-size:.28em; margin-top:14px; }
.lh-tag { margin:18px 0 0; font-family:var(--display); font-size:clamp(22px,2vw,28px); line-height:1.3; color:var(--royal-ink); max-width:30ch; }
.lh-body { margin:14px 0 0; max-width:54ch; color:var(--muted); line-height:1.6; }
.lh-facts { justify-content:flex-start; margin:24px 0 0; }
.lh-facts { position:relative; z-index:1; display:flex; flex-wrap:wrap; gap:10px; }
.lh-facts div { display:grid; gap:2px; padding:10px 18px; border-radius:16px; background:#ffffff; box-shadow:var(--soft-edge); text-align:center; }
.lh-facts dt { color:var(--royal-ink); font-size:12px; font-weight:700; letter-spacing:.14em; text-transform:uppercase; }
.lh-facts dd { margin:0; font-weight:600; font-size:15px; }
.lh-act { justify-content:flex-start; margin-top:28px; }
.lh .doc-inline { margin-top:18px; }
.lh-media { position:relative; z-index:1; }
.lh-media img { display:block; width:100%; height:auto; object-fit:cover; border:0 !important; border-radius:24px !important; box-shadow:0 0 0 1px rgba(65,105,225,.10), 0 28px 60px -28px rgba(48,49,50,.45), 0 0 40px -12px rgba(65,105,225,.25) !important; background:none; }
.lh-psx .lh-a { aspect-ratio:4/5; object-position:50% 40%; }
.lh-fam .lh-media { padding:0 0 70px 0; }
.lh-fam .lh-a { width:72%; margin-left:auto; aspect-ratio:4/5; object-position:50% 30%; }
.lh-fam .lh-b { position:absolute; left:0; bottom:0; width:58%; aspect-ratio:4/3; object-position:50% 40%; border:6px solid #ffffff !important; }
.lh-chip { position:absolute; z-index:2; padding:9px 16px; border-radius:999px; background:#ffffff; color:var(--royal-ink); font-weight:700; font-size:14px; box-shadow:0 10px 26px -12px rgba(48,49,50,.4); }
.lh-psx .lh-chip { left:20px; bottom:20px; }
.lh-fam .lh-chip { right:20px; top:20px; }
@media (max-width:820px) {
  .lh { grid-template-columns:1fr; gap:32px; padding:28px var(--m) 56px; }
  .lh-lyre { height:260px; left:auto; right:var(--m); top:24px; }
  .lh .doc-inline { flex-wrap:wrap; column-gap:10px; } .lh .doc-inline span { flex-basis:100%; padding-left:40px; margin-top:-6px; }
  .lh .lh-title { font-size:34px; } .lh-psx .lh-title { font-size:60px; } .lh-where { font-size:.5em; } .lh-psx .lh-where { font-size:.29em; }
  .lh-tag { font-size:21px; }
  .lh-facts { flex-direction:column; align-items:stretch; gap:0; padding:6px 16px; border-radius:16px; background:#ffffff; box-shadow:var(--soft-edge); }
  .lh-facts div { display:flex; justify-content:space-between; align-items:baseline; gap:12px; padding:9px 0; background:none; box-shadow:none; border-radius:0; text-align:left; }
  .lh-facts div + div { border-top:1px solid var(--line); }
  .lh-facts dt { font-size:11px; } .lh-facts dd { font-size:14px; text-align:right; }
  .lh-act { flex-direction:column; align-items:flex-start; }
  .lh-fam .lh-media { padding-bottom:56px; }
}

/* Phones: comfortable tap targets everywhere (Apple and Google ask for about 44px). Links keep their look:
   the padding grows the touch area and the negative margin gives the space back, so nothing moves. */
@media (max-width:820px) {
  .link { padding-block:12px; margin-block:-12px; }
  .finder label span { padding-block:13px; }
  .sbook-who label span { padding-block:13px; }
  .beliefs-stage dt button { padding-block:9px; margin-block:-9px; }
  .f-big a, .f-links a { display:inline-block; padding-block:9px; margin-block:-9px; }
  .f-learn { row-gap:12px; } .f-follow { row-gap:12px; }
  .topbar .home { padding:5px; margin:-5px; }
  .finder-sound { padding-block:12px; margin-block:8px -12px; }
  .lv-switch button, .pay-switch button { min-height:44px; }
  .su-chip span, .be-card .su-chip span { padding-block:11px; }
}

/* All instruments and the lesson pages on phones: hero facts as one card (as on PSX), "three ways" as cards,
   and less empty space around the closing band. */
@media (max-width:820px) {
  .p-hero .b-facts { grid-template-columns:1fr; gap:0; padding:6px 16px; border-radius:16px; background:#ffffff; box-shadow:var(--soft-edge); }
  .p-hero .b-facts div { display:flex; justify-content:space-between; align-items:baseline; gap:12px; padding:10px 0; border-left:0; }
  .p-hero .b-facts div + div { border-top:1px solid var(--line); }
  .p-hero .b-facts dt { color:var(--royal-ink); font-size:11px; font-weight:700; letter-spacing:.14em; text-transform:uppercase; }
  .p-hero .b-facts dd { margin:0; font-size:15px; text-align:right; }
  .page-instruments .p-why { padding:64px var(--m) 56px; }
  .page-instruments .p-why .beliefs { margin-top:28px; gap:12px; }
  .page-instruments .p-why .beliefs div { gap:6px; padding:18px 18px 20px; border-radius:18px; background:#ffffff; box-shadow:var(--soft-edge); }
  .a-cta { padding:72px var(--m) 64px; }
  .a-cta-act { margin-top:32px; }
  .a-motto .id-art { height:150px; }
}

/* event page tickets: pick how many, see the total, and "Buy tickets" opens the HitPay payment link for that number
   (one fixed-price link per quantity, set in site.js from the option's data-href) */
.ev-buy { display:grid; gap:18px; }
.ev-pick { display:flex; flex-wrap:wrap; align-items:center; gap:10px 14px; }
.ev-pick label { font-weight:600; }
.ev-pick select { -webkit-appearance:none; appearance:none; min-height:48px; padding:0 44px 0 20px; border:0; border-radius:999px; font:inherit; font-weight:600; color:var(--ink); cursor:pointer;
  background:#ffffff url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='12' height='8' viewBox='0 0 12 8'%3E%3Cpath d='M1 1.5l5 5 5-5' fill='none' stroke='%233157cc' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E") no-repeat right 18px center; box-shadow:var(--soft-edge); }
.ev-pick select:focus-visible { outline:3px solid var(--sky); outline-offset:2px; }
.ev-total { margin:0; color:var(--muted); }
.ev-total b { margin-left:4px; font-size:20px; color:var(--ink); }
.ev-buy .b-act { margin:0; }
.ev-pay { margin:0; max-width:52ch; font-size:var(--s1); color:var(--muted); }