/* =====================================================================
   BenJammin' — Ben Mason Guitar & Ukulele Lessons
   1. Tokens & base   2. Nav   3. Layout rows/cards/lanes   4. Sections
   5. Kids stage      6. Figure layer, bubble, notes        7. Responsive
   ===================================================================== */
:root{
  --ink:#1a120d; --paper:#f7eddd; --amber:#f2a33a; --amber2:#ffcf6e; --red:#e2443b;
  --navH:68px;
  --fh:'Bricolage Grotesque', system-ui, sans-serif;
  --fb:'DM Sans', system-ui, sans-serif;
  --fm:'Permanent Marker', 'Comic Sans MS', cursive;
  --wrap:min(1240px, calc(100% - 40px));
}
*{box-sizing:border-box}
html{scroll-behavior:smooth;-webkit-text-size-adjust:100%}
body{margin:0;background:#140e0a;color:var(--paper);font-family:var(--fb);font-size:17px;line-height:1.62;overflow-x:hidden}
img,svg{display:block}
a{color:inherit}
h1,h2,h3{font-family:var(--fh);line-height:1.04;margin:0 0 .45em;letter-spacing:-.02em}
h1{font-size:clamp(42px,6.4vw,92px);font-weight:800}
h2{font-size:clamp(34px,4.4vw,64px);font-weight:800}
h3{font-size:clamp(20px,1.8vw,26px);font-weight:700}
p{margin:0 0 1em}
.kicker{font-family:var(--fm);font-size:clamp(15px,1.3vw,19px);color:var(--accent,var(--amber));letter-spacing:.02em;margin-bottom:.6em;display:inline-block;transform:rotate(-1.5deg)}
.lede{font-size:clamp(17px,1.35vw,20px);opacity:.92}
.hl{color:var(--accent,var(--amber))}
.marker{font-family:var(--fm);font-weight:400;letter-spacing:0}

/* buttons */
.btn{display:inline-flex;align-items:center;gap:.55em;padding:.78em 1.25em;border-radius:999px;font-weight:700;font-size:16px;text-decoration:none;border:2px solid transparent;cursor:pointer;transition:transform .18s ease, box-shadow .18s ease, background .18s;font-family:var(--fb);line-height:1.1}
.btn:hover{transform:translateY(-2px)}
.btn svg{width:20px;height:20px;flex:none}
.btn-cta{background:var(--amber);color:#1a0f08;box-shadow:0 6px 0 #9c5a12}
.btn-cta:hover{box-shadow:0 8px 0 #9c5a12}
.btn-ghost{border-color:currentColor;background:transparent}
.btn-ig{background:linear-gradient(115deg,#f9b233,#e8434f 45%,#a33bc4);color:#fff}
.btn-yt{background:#e43a2f;color:#fff}
.btns{display:flex;flex-wrap:wrap;gap:12px;margin-top:1.4em}

/* =====================================================================
   2. NAV
   ===================================================================== */
.nav{position:fixed;inset:0 0 auto 0;height:var(--navH);z-index:60;display:flex;align-items:center;gap:22px;padding:0 max(20px, calc((100% - 1240px)/2));background:rgba(20,14,10,.72);backdrop-filter:blur(12px) saturate(1.3);-webkit-backdrop-filter:blur(12px) saturate(1.3);border-bottom:1px solid rgba(255,255,255,.07)}
.brand{display:flex;flex-direction:column;text-decoration:none;line-height:1;margin-right:auto}
.brand-mark{font-family:var(--fm);font-size:27px;color:var(--amber2);letter-spacing:.01em}
.brand-sub{font-size:11.5px;letter-spacing:.14em;text-transform:uppercase;opacity:.7;margin-top:3px}
.nav .links{display:flex;gap:20px;font-weight:600;font-size:15px}
.nav .links a{text-decoration:none;opacity:.82}
.nav .links a:hover{opacity:1;color:var(--amber2)}
.nav .btn{padding:.6em 1em;font-size:14px}
.burger{display:none;background:none;border:0;color:var(--paper);width:42px;height:42px;cursor:pointer;padding:8px}
.burger span{display:block;height:2.5px;background:currentColor;margin:6px 0;border-radius:2px}

/* =====================================================================
   3. LAYOUT: every anchored section is a .row of .card (content) + .lane
   (empty column where Ben stands). .row.flip puts the lane on the left.
   ===================================================================== */
.sec{position:relative;padding:clamp(70px,13vh,160px) 0;overflow:hidden;background:var(--bg,#140e0a);color:var(--fg,var(--paper))}
.row{display:grid;grid-template-columns:minmax(0,46fr) minmax(0,54fr);gap:28px;align-items:center;width:var(--wrap);margin:0 auto;position:relative;z-index:2}
.row.flip .card{order:2}
.row.flip .lane{order:1}
.lane{position:relative;min-height:520px;align-self:stretch}
.card{position:relative;background:var(--card,rgba(255,255,255,.055));border:1px solid var(--cardLine,rgba(255,255,255,.1));border-radius:24px;padding:clamp(24px,3.1vw,44px);box-shadow:0 30px 60px -30px rgba(0,0,0,.55);backdrop-filter:blur(2px)}
.card:not(.bare)::before{content:"";position:absolute;inset:0;border-radius:inherit;background:var(--solid,#1e1611);z-index:-1}
.card.bare{background:none;border:0;box-shadow:none;padding-left:0;padding-right:0;backdrop-filter:none}
.reveal{opacity:0;transform:translateY(34px);transition:opacity .8s ease, transform .8s cubic-bezier(.2,.8,.2,1)}
.reveal.in{opacity:1;transform:none}

.ticks{list-style:none;padding:0;margin:1.1em 0 0;display:grid;gap:.55em}
.ticks li{position:relative;padding-left:1.9em}
.ticks li::before{content:"";position:absolute;left:0;top:.38em;width:1.05em;height:1.05em;border-radius:50%;background:var(--accent,var(--amber));-webkit-mask:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 20 20'%3E%3Cpath d='M10 1.5C5 1.5 1.5 3.6 1.5 7.4c0 4.6 4.6 9.3 8.5 11.1 3.9-1.8 8.5-6.5 8.5-11.1 0-3.8-3.5-5.9-8.5-5.9z' fill='black'/%3E%3C/svg%3E") center/contain no-repeat;mask:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 20 20'%3E%3Cpath d='M10 1.5C5 1.5 1.5 3.6 1.5 7.4c0 4.6 4.6 9.3 8.5 11.1 3.9-1.8 8.5-6.5 8.5-11.1 0-3.8-3.5-5.9-8.5-5.9z' fill='black'/%3E%3C/svg%3E") center/contain no-repeat;column-gap:24px}

/* chord diagrams + listen button */
.learn{display:flex;flex-wrap:wrap;align-items:flex-end;gap:14px;margin-top:1.5em;padding-top:1.2em;border-top:1px dashed var(--cardLine,rgba(255,255,255,.18))}
.learn .lbl{width:100%;font-family:var(--fm);font-size:15px;opacity:.85}
.chords{display:flex;flex-wrap:wrap;gap:10px}
.chord{display:flex;flex-direction:column;align-items:center;gap:2px;padding:8px 8px 4px;border-radius:12px;background:var(--chordBg,rgba(0,0,0,.22));font-family:var(--fh);font-weight:700;font-size:15px}
.chord svg{width:64px;height:auto}
.hear{margin-left:auto;align-self:center;background:var(--accent,var(--amber));color:var(--onAccent,#170d06);border:0;font-weight:800;padding:.85em 1.3em;border-radius:999px;cursor:pointer;font-family:var(--fb);font-size:15px;display:inline-flex;align-items:center;gap:.5em;box-shadow:0 5px 0 rgba(0,0,0,.35);transition:transform .15s}
.hear:hover{transform:translateY(-2px)}
.hear .eq{display:inline-flex;gap:2px;align-items:flex-end;height:14px}
.hear .eq i{width:3px;background:currentColor;height:4px;border-radius:2px}
.hear.playing .eq i{animation:eq .5s ease-in-out infinite alternate}
.hear.playing .eq i:nth-child(2){animation-delay:.15s}.hear.playing .eq i:nth-child(3){animation-delay:.3s}
@keyframes eq{to{height:14px}}

/* lane decorations (sit behind Ben) */
.decor{position:absolute;left:50%;bottom:6%;transform:translateX(-50%);width:min(440px,92%);opacity:.9;pointer-events:none}
.spot{position:absolute;left:50%;top:50%;width:min(520px,100%);aspect-ratio:1;transform:translate(-50%,-46%);background:radial-gradient(closest-side,var(--spot,rgba(255,200,120,.22)),transparent 70%);pointer-events:none}

/* =====================================================================
   4. SECTIONS
   ===================================================================== */
/* hero */
.hero{min-height:100vh;padding-top:calc(var(--navH) + 6vh);padding-bottom:0;--bg:radial-gradient(1200px 700px at 78% 22%, #4a2a14 0%, #241610 45%, #140e0a 80%);display:flex;flex-direction:column;justify-content:space-between}
.hero .row{align-items:start}
.hero .lane{min-height:62vh}
.hero h1 .script{font-family:var(--fm);font-weight:400;color:var(--amber2);display:block;font-size:.62em;letter-spacing:0;transform:rotate(-2deg);margin-bottom:.1em}
.hero .rays{position:absolute;right:-10vw;top:-12vh;width:80vw;aspect-ratio:1;background:repeating-conic-gradient(from 0deg, rgba(255,190,90,.07) 0 6deg, transparent 6deg 14deg);border-radius:50%;-webkit-mask:radial-gradient(closest-side,#000 30%,transparent 72%);mask:radial-gradient(closest-side,#000 30%,transparent 72%);animation:spin 120s linear infinite;pointer-events:none}
@keyframes spin{to{transform:rotate(360deg)}}
.hero .bigword{position:absolute;left:-1vw;bottom:9vh;font-family:var(--fh);font-weight:800;font-size:19vw;line-height:.8;color:transparent;-webkit-text-stroke:1.5px rgba(255,207,110,.09);letter-spacing:-.04em;white-space:nowrap;pointer-events:none;user-select:none}
.facts{display:flex;flex-wrap:wrap;gap:10px;margin-top:1.6em}
.facts span{padding:.42em .9em;border-radius:999px;background:rgba(255,255,255,.07);border:1px solid rgba(255,255,255,.12);font-size:14px;font-weight:600}
.marquee{position:relative;z-index:3;border-top:2px solid #f2a33a;border-bottom:2px solid #f2a33a;background:#f2a33a;color:#1a0f08;overflow:hidden;margin-top:6vh;transform:rotate(-1.2deg) scale(1.03)}
.marquee .track{display:flex;width:max-content;animation:marq 34s linear infinite;font-family:var(--fh);font-weight:800;font-size:clamp(20px,2.4vw,32px);padding:.35em 0;letter-spacing:.02em}
.marquee .track span{padding:0 .9em;white-space:nowrap}
.marquee .track b{font-family:var(--fm);font-weight:400;color:#7a1c0c}
@keyframes marq{to{transform:translateX(-50%)}}

.about{--solid:#241913;--bg:linear-gradient(180deg,#140e0a,#20150f);--accent:#ffcf6e}
.statgrid{display:grid;grid-template-columns:repeat(3,1fr);gap:12px;margin-top:1.4em}
.stat{padding:14px;border-radius:16px;background:rgba(0,0,0,.25);border:1px solid rgba(255,255,255,.08)}
.stat b{display:block;font-family:var(--fh);font-size:clamp(24px,2.4vw,34px);color:var(--amber2);line-height:1}
.stat small{opacity:.75;font-size:13px}

.teach{--solid:#fffaf1;--bg:#f7eddd;--fg:#22160f;--accent:#c4521f;--card:#fffaf1;--cardLine:#ead8bd;--chordBg:#f3e4cc}
.teach .card{box-shadow:0 30px 60px -30px rgba(80,40,10,.35)}
.inst{display:grid;grid-template-columns:repeat(3,1fr);gap:12px;margin:1.3em 0}
.inst div{padding:16px 14px;border-radius:16px;background:#f7ead6;border:1px solid #ead8bd}
.inst h3{font-size:18px;margin-bottom:.3em}
.inst p{font-size:14.5px;margin:0;opacity:.85}
.inst svg{width:38px;height:38px;margin-bottom:6px}
.ltypes{display:flex;flex-wrap:wrap;gap:10px}
.ltypes a{text-decoration:none;padding:.55em 1em;border-radius:999px;border:2px solid #22160f;font-weight:700;font-size:15px}
.ltypes a:hover{background:#22160f;color:#f7eddd}

.rock{--solid:#1c0809;--bg:radial-gradient(900px 600px at 20% 60%, #4a0d10 0%, #1c0708 55%, #0d0405 100%);--accent:#ff4a3d;--spot:rgba(255,60,50,.28);--card:rgba(20,4,5,.6);--cardLine:rgba(255,80,70,.25)}
.rock h2{text-transform:uppercase;letter-spacing:-.01em;text-shadow:0 0 30px rgba(255,60,50,.35)}
.rock .beams{position:absolute;inset:0;background:conic-gradient(from 200deg at 22% -10%, transparent 0 8deg, rgba(255,70,60,.13) 8deg 16deg, transparent 16deg 30deg, rgba(255,210,150,.08) 30deg 36deg, transparent 36deg);pointer-events:none}

.funk{--solid:#30144a;--bg:#2a0f3f;--accent:#ffb02e;--onAccent:#2a0f3f;--spot:rgba(255,120,200,.3);--card:rgba(42,15,63,.78);--cardLine:rgba(255,176,46,.35)}
.funk .stripes{position:absolute;inset:auto -10% -20% -10%;height:60%;background:repeating-linear-gradient(170deg,#ff6b3d 0 26px,#ffb02e 26px 52px,#e2448f 52px 78px,#6b2fa8 78px 104px);opacity:.16;transform:skewY(-6deg);pointer-events:none}
.funk h2{font-style:italic}

.soul{--solid:#0c2c31;--bg:radial-gradient(1000px 700px at 75% 40%,#145058,#0c2a30 60%,#071a1e);--accent:#e9c06a;--spot:rgba(233,192,106,.25);--card:rgba(6,30,34,.66);--cardLine:rgba(233,192,106,.28)}
.soul h2{font-family:var(--fh);font-weight:300;font-style:italic}

.blues{--solid:#0c1a37;--bg:linear-gradient(180deg,#0a1630,#0c1d40 50%,#081226);--accent:#6fb6ff;--spot:rgba(90,160,255,.25);--card:rgba(8,18,40,.7);--cardLine:rgba(111,182,255,.25)}
.blues .smoke{position:absolute;inset:0;background:radial-gradient(600px 300px at 30% 30%,rgba(140,170,220,.10),transparent 70%),radial-gradient(500px 260px at 70% 80%,rgba(140,170,220,.08),transparent 70%);pointer-events:none}

.folk{--solid:#fbf5e8;--bg:#efe2c8;--fg:#203227;--accent:#2f6b4f;--onAccent:#fff;--card:#fbf5e8;--cardLine:#dccaa5;--chordBg:#efe2c8;--spot:rgba(255,230,170,.7)}
.folk .hills{position:absolute;left:0;right:0;bottom:0;height:34%;pointer-events:none}

.uke{--solid:#fff7e2;--bg:linear-gradient(180deg,#ffe28a,#ffc861);--fg:#2c1a0a;--accent:#0f8b8d;--onAccent:#fff;--card:rgba(255,250,235,.9);--cardLine:#f0c76a;--chordBg:#fff1c9;--spot:rgba(255,255,255,.6)}

.kidsinfo{--solid:#ffffff;--bg:#dff1ff;--fg:#14304a;--accent:#ff6b3d;--onAccent:#fff;--card:#fff;--cardLine:#bcdcf5;--spot:rgba(255,255,255,.8)}
.one{--solid:#272019;--bg:linear-gradient(180deg,#1b1410,#241913);--accent:#f2a33a}
.online{--solid:#18252f;--bg:#0f1d29;--accent:#5fd3c4;--onAccent:#06201c;--card:rgba(255,255,255,.05);--spot:rgba(95,211,196,.2)}
.steps{counter-reset:s;display:grid;gap:10px;margin-top:1.2em}
.steps div{counter-increment:s;display:flex;gap:12px;align-items:flex-start;padding:12px 14px;border-radius:14px;background:rgba(0,0,0,.25)}
.steps div::before{content:counter(s);flex:none;width:28px;height:28px;border-radius:50%;background:var(--accent);color:#06201c;font-weight:800;display:grid;place-items:center;font-family:var(--fh)}
.bands{--solid:#1d1512;--bg:#120d0b;--accent:#ff5b3a;--card:#1d1512}
.bandgrid{display:grid;gap:12px;margin:1.2em 0}
.band{display:flex;gap:14px;align-items:center;padding:14px;border-radius:16px;background:#2a1f1a;border:1px dashed rgba(255,255,255,.18)}
.band .logo{flex:none;width:58px;height:58px;border-radius:12px;display:grid;place-items:center;font-family:var(--fm);font-size:22px;color:#140e0a}
.band h3{font-size:18px;margin:0}
.band p{margin:0;font-size:14px;opacity:.75}
.gigs{width:100%;border-collapse:collapse;font-size:15px}
.gigs td{padding:.6em .4em;border-top:1px solid rgba(255,255,255,.1)}
.gigs td:first-child{font-family:var(--fm);color:var(--accent);white-space:nowrap}
.follow{--solid:#cf5470;--bg:linear-gradient(135deg,#ff9a3d 0%,#ef4a62 45%,#8b3bd1 100%);--accent:#fff;--onAccent:#8b3bd1;--card:rgba(255,255,255,.14);--cardLine:rgba(255,255,255,.35)}
.socials{display:grid;grid-template-columns:1fr 1fr;gap:12px;margin:1.3em 0}
.social{display:block;text-decoration:none;padding:18px;border-radius:18px;background:rgba(0,0,0,.18);border:1px solid rgba(255,255,255,.25);transition:transform .2s}
.social:hover{transform:translateY(-3px)}
.social svg{width:34px;height:34px;margin-bottom:8px}
.social b{display:block;font-family:var(--fh);font-size:20px}
.social small{opacity:.85}
.tiles{display:grid;grid-template-columns:repeat(3,1fr);gap:8px}
.tile{aspect-ratio:1;border-radius:12px;position:relative;overflow:hidden;display:flex;align-items:flex-end;padding:8px;font-size:12px;font-weight:700;line-height:1.2;color:#fff;text-shadow:0 1px 3px rgba(0,0,0,.5);text-decoration:none}
.tile::after{content:"";position:absolute;right:8px;top:8px;width:22px;height:22px;border-radius:50%;background:rgba(255,255,255,.9) url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 10 10'%3E%3Cpath d='M3.5 2.5v5l4-2.5z' fill='%23e8434f'/%3E%3C/svg%3E") center/12px no-repeat}
.prices{--solid:#fffaf1;--bg:#f7eddd;--fg:#22160f;--accent:#c4521f;--card:#fffaf1;--cardLine:#ead8bd}
.ptable{display:grid;gap:10px;margin-top:1em}
.prow{display:flex;justify-content:space-between;align-items:baseline;gap:12px;padding:12px 16px;border-radius:14px;background:#f7ead6;border:1px solid #ead8bd}
.prow b{font-family:var(--fh);font-size:22px;color:var(--accent);white-space:nowrap}
.prow span small{display:block;opacity:.7;font-size:13.5px}
.prow.free{background:#22160f;color:#f7eddd;border-color:#22160f}
.prow.free b{color:#ffcf6e}
.faq{margin-top:1.6em}
.faq details{border-top:1px solid #ead8bd;padding:.75em 0}
.faq summary{cursor:pointer;font-weight:700;list-style:none;display:flex;justify-content:space-between;gap:12px}
.faq summary::after{content:"+";font-family:var(--fh);font-size:22px;line-height:1;color:var(--accent)}
.faq details[open] summary::after{content:"–"}
.faq details p{margin:.5em 0 0;opacity:.85}
.contact{--solid:#2b1c12;--bg:radial-gradient(1000px 700px at 30% 70%, #3c2312, #1a110c 60%, #120c08);--accent:#f2a33a;padding-bottom:110px}
form{display:grid;grid-template-columns:1fr 1fr;gap:12px;margin-top:1.2em}
form label{display:flex;flex-direction:column;gap:5px;font-size:13.5px;font-weight:700;letter-spacing:.02em}
form .full{grid-column:1/-1}
input,select,textarea{font:inherit;font-size:16px;padding:.72em .85em;border-radius:12px;border:1.5px solid rgba(255,255,255,.18);background:rgba(0,0,0,.28);color:var(--paper);font-weight:400}
textarea{min-height:110px;resize:vertical}
input:focus,select:focus,textarea:focus{outline:none;border-color:var(--amber)}
.formnote{grid-column:1/-1;font-size:13px;opacity:.7;margin:0}
.where{display:flex;flex-wrap:wrap;gap:8px 18px;margin-top:1em;font-size:15px;opacity:.9}
footer{background:#0d0907;padding:40px 20px 50px;text-align:center;font-size:14px;color:rgba(247,237,221,.65)}
footer .brand-mark{display:block;margin-bottom:8px}
footer a{color:var(--amber2)}

/* =====================================================================
   5. KIDS STAGE — sticky for several screens while Ben sits with the group
   ===================================================================== */
.kids{position:relative;height:330vh;background:#bfe3ff}
.kids .stage{position:sticky;top:0;height:100vh;overflow:hidden;
  background:linear-gradient(180deg,#cfeaff 0, #e9f6ff var(--floor,70%), #d79a5f var(--floor,70%), #c4854b calc(var(--floor,70%) + 6px), #b97a43 100%);color:#14304a}
.kids .bunting{position:absolute;left:0;right:0;width:100%;top:calc(var(--navH) - 4px);height:46px;pointer-events:none;z-index:1}
.kids-copy{position:absolute;left:50%;top:calc(var(--navH) + 58px);transform:translateX(-50%);width:var(--wrap);display:grid;grid-template-columns:1.25fr 1fr;gap:36px;z-index:3;--accent:#ff6b3d}
.kids-copy h2{font-size:clamp(30px,3.6vw,54px)}
.kids-copy .lede{max-width:46ch}
.kids-copy .ticks{margin-top:.3em;font-weight:600;font-size:15.5px}
.kids-copy .ticks li::before{background:#ff6b3d}
#kidsScene{position:absolute;left:50%;transform:translateX(-50%);z-index:2;overflow:visible}
.kids .hint{position:absolute;left:50%;bottom:3vh;transform:translateX(-50%);font-family:var(--fm);color:#fff3e0;font-size:15px;opacity:.85;z-index:3;white-space:nowrap;text-shadow:0 1px 2px rgba(0,0,0,.35)}

/* =====================================================================
   6. FIGURE LAYER (fixed; Ben never scrolls — the page scrolls past him)
   ===================================================================== */
#figLayer{position:fixed;inset:0;pointer-events:none;z-index:40}
#ben{position:absolute;left:0;top:0;transform-origin:0 0;overflow:visible;will-change:transform}
#bubble{position:absolute;left:0;top:0;max-width:250px;padding:12px 16px;background:#fffaf0;color:#24150c;border:3px solid #2a1a12;border-radius:20px;font-family:var(--fm);font-size:16px;line-height:1.25;box-shadow:4px 5px 0 rgba(0,0,0,.25);opacity:0;will-change:transform,opacity}
#bubble::after{content:"";position:absolute;bottom:-14px;left:var(--tail,30px);width:20px;height:20px;background:#fffaf0;border-right:3px solid #2a1a12;border-bottom:3px solid #2a1a12;transform:skewX(-25deg) rotate(45deg) scale(.8,1.1);border-bottom-right-radius:4px}
#bubble p{margin:0}
.note{position:absolute;left:0;top:0;font-size:24px;font-weight:700;color:var(--nc,#ffcf6e);text-shadow:0 2px 0 rgba(0,0,0,.35);will-change:transform,opacity;font-family:serif}

/* =====================================================================
   7. RESPONSIVE
   ===================================================================== */
@media (max-width:1080px){
  .nav .links{gap:14px;font-size:14px}
  .ticks.two{grid-template-columns:1fr}
}
@media (max-width:900px){
  .nav .links{display:none;position:absolute;top:var(--navH);left:0;right:0;flex-direction:column;background:#1a120d;padding:14px 20px 20px;gap:12px;border-bottom:1px solid rgba(255,255,255,.1)}
  .nav.open .links{display:flex}
  .burger{display:block}
  .nav .btn-ig{display:none}
}
@media (max-width:819px){
  body{font-size:16px}
  .sec{padding:64px 0 24px}
  .row{grid-template-columns:1fr;gap:0}
  .row.flip .card{order:0}.row.flip .lane{order:1}
  .lane{min-height:300px}
  .hero{padding-top:calc(var(--navH) + 20px)}
  .hero .row{display:flex;flex-direction:column-reverse}
  .hero .lane{min-height:320px;width:100%}
  .hero .bigword{display:none}
  .statgrid{grid-template-columns:repeat(3,1fr)}
  .inst{grid-template-columns:1fr}
  .socials{grid-template-columns:1fr}
  form{grid-template-columns:1fr}
  .kids-copy{grid-template-columns:1fr;gap:0}
  .kids-copy .ticks{display:none}
  .kids-copy .lede{font-size:15px}
  .decor{width:min(300px,80%)}
  .hear{margin-left:0}
}
@media (prefers-reduced-motion:reduce){
  .marquee .track,.hero .rays{animation:none}
  .reveal{opacity:1;transform:none;transition:none}
  html{scroll-behavior:auto}
}

/* =====================================================================
   8. BLAZOR ADDITIONS — server-validated enquiry form
   ===================================================================== */
form .validation-message{color:#ff9b8a;font-weight:600;font-size:13px;letter-spacing:0}
input.invalid,select.invalid,textarea.invalid{border-color:#ff7a6b;box-shadow:0 0 0 3px rgba(255,122,107,.18)}
input.valid.modified,textarea.valid.modified{border-color:rgba(124,214,160,.6)}
.hp{position:absolute!important;left:-9999px;width:1px;height:1px;overflow:hidden}
.form-error{margin:1em 0 0;padding:.8em 1em;border-radius:12px;background:rgba(255,122,107,.12);border:1px solid rgba(255,122,107,.45);color:#ffd2ca;font-weight:600}
.form-error a{color:#ffcf6e}
.form-done{margin-top:1.4em;padding:22px 24px;border-radius:18px;background:rgba(242,163,58,.12);border:1.5px solid rgba(242,163,58,.5)}
.form-done h3{color:var(--amber2);margin-bottom:.4em}
.form-done .ref{font-size:14px;opacity:.8;margin:0}