/* ═══════════════════════════════════════════════════════════════
   TOKENS - traced to DJ equipment, not a default palette
   ═══════════════════════════════════════════════════════════════ */
:root{
  --booth:#150F0C;      /* warm equipment charcoal, red-leaning */
  --panel:#1F1712;      /* raised panel face */
  --panel-hi:#2A1F18;
  --cue:#EE3B2B;        /* jog-wheel ring red - brand identity (graphics only) */
  --cue-btn:#D62A1C;    /* deeper red for red FILLS that carry text - white on it = 4.99:1 AA */
  --cue-btn-h:#C82014;  /* hover: richer still - white = 5.72:1 */
  --on-cue:#FFFFFF;     /* text colour on any red fill */
  --wave:#4E86A8;       /* rekordbox waveform blue - data only */
  --print:#F4EFE7;
  --label:#8E8377;
  --rule:rgba(244,239,231,.10);
  --rule-hard:rgba(244,239,231,.18);

  --display:"Clash Display","Archivo",system-ui,sans-serif;
  --body:"Satoshi",system-ui,-apple-system,sans-serif;
  --mono:"Martian Mono",ui-monospace,monospace;

  /* motion tokens (v4) */
  --ease-out:cubic-bezier(.23,1,.32,1);
  --ease-expo:cubic-bezier(.16,1,.3,1);
  --nav-h:66px;

  --s1:.5rem; --s2:1rem; --s3:1.5rem; --s4:2rem;
  --s6:3rem; --s8:4rem; --s12:6rem; --s16:8rem;
  --gut:clamp(1.25rem,5vw,4.5rem);
  --maxw:1320px;
}
*,*::before,*::after{box-sizing:border-box}
html{-webkit-text-size-adjust:100%;scroll-behavior:smooth;scroll-padding-top:var(--nav-h)}   /* anchored jumps clear the sticky header; section padding gives the breathing room */
@media (prefers-reduced-motion:reduce){
  html{scroll-behavior:auto}
  *,*::before,*::after{animation:none!important;transition-duration:.001ms!important}
}
body{
  margin:0;background:var(--booth);color:var(--print);
  font-family:var(--body);font-size:clamp(1rem,.95rem + .2vw,1.0625rem);
  line-height:1.6;-webkit-font-smoothing:antialiased;overflow-x:hidden;
}
img{max-width:100%;display:block}
a{color:inherit}
:focus-visible{outline:2px solid var(--cue);outline-offset:3px;border-radius:2px}

/* ── ATMOSPHERE (replaces the v1 hairline grid) ──
   Fine grain so the dark ground isn't flat digital black, plus one warm
   bloom - the glow coming off a jog wheel in an unlit booth. */
.grain{
  position:fixed;inset:0;pointer-events:none;z-index:2;opacity:.10;
  background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='140' height='140'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='.85' numOctaves='3'/%3E%3C/filter%3E%3Crect width='140' height='140' filter='url(%23n)'/%3E%3C/svg%3E");
}
.bloom{
  position:fixed;inset:0;pointer-events:none;z-index:0;
  background:
    radial-gradient(60vw 50vh at 82% 8%, rgba(238,59,43,.13), transparent 70%),
    radial-gradient(50vw 40vh at 8% 92%, rgba(78,134,168,.07), transparent 70%);
}
.wrap{max-width:var(--maxw);margin-inline:auto;padding-inline:var(--gut);position:relative;z-index:1}

/* ── type ── */
.h1{
  font-family:var(--display);font-weight:700;font-stretch:118%;
  font-size:clamp(2.15rem,5.6vw,4.6rem);   /* smaller than v1 so media reads through */
  line-height:.96;letter-spacing:-.006em;margin:0;text-transform:uppercase;
}
.h2{
  font-family:var(--display);
  font-weight:700;font-stretch:112%;font-size:clamp(1.85rem,4.2vw,3.2rem);
  line-height:1.04;letter-spacing:-.006em;margin:0 0 var(--s3);
  text-transform:uppercase;text-wrap:balance;
}
.h3{font-family:var(--display);font-weight:600;font-stretch:106%;font-size:1.2rem;margin:0 0 var(--s1)}
.lead{font-size:clamp(1.02rem,1rem + .4vw,1.24rem);line-height:1.55;color:#D6CDC2;max-width:56ch;margin:0}
p{margin:0 0 var(--s2)}
.muted{color:var(--label)}
.mono{
  font-family:var(--mono);font-size:.66rem;font-weight:500;letter-spacing:.16em;
  text-transform:uppercase;color:var(--label);font-stretch:87.5%;
}
.eyebrow{display:flex;align-items:center;gap:var(--s2);flex-wrap:wrap;margin-bottom:var(--s4)}
.eyebrow .dot{width:6px;height:6px;background:var(--cue);border-radius:50%;flex:none}
.eyebrow::after{content:"";flex:1;height:1px;background:var(--rule);min-width:2rem}

/* ═══ NAV ═══ */
header{
  position:sticky;top:0;z-index:60;background:rgba(21,15,12,.82);
  backdrop-filter:blur(16px);border-bottom:1px solid var(--rule);
}
.nav{display:flex;align-items:center;gap:var(--s4);height:66px}
/* header spans FULL width (not capped like body content) so the logo hugs the left
   edge and the CTA the right on wide desktops, instead of sitting inside a centred 1320 column */
header .wrap{max-width:none;padding-inline:clamp(1.35rem,3vw,3.25rem)}
.brand{
  font-weight:800;font-stretch:125%;font-size:1.02rem;letter-spacing:.02em;
  text-transform:uppercase;text-decoration:none;display:flex;align-items:center;gap:.6rem;flex:none;
}
.mark{width:22px;height:22px;border:2px solid var(--print);border-radius:50%;position:relative;flex:none}
.mark::after{content:"";position:absolute;width:6px;height:6px;background:var(--cue);border-radius:50%;top:1px;left:50%;transform:translateX(-50%)}
.navlinks{display:flex;gap:var(--s4);margin-left:auto;align-items:center}
.navlinks a{font-family:var(--mono);font-size:.74rem;letter-spacing:.12em;text-transform:uppercase;text-decoration:none;color:#B4A99C;transition:color .18s;font-stretch:100%}
.navlinks a:hover{color:var(--print)}
/* v4: red underline wipe on nav links (not the CTA) */
.navlinks a:not(.btn){position:relative}
.navlinks a:not(.btn)::after{content:"";position:absolute;left:0;right:0;bottom:-4px;height:1px;background:var(--cue);transform:scaleX(0);transform-origin:left;transition:transform .2s var(--ease-out)}
.navlinks a:not(.btn):hover::after{transform:scaleX(1)}
@media(max-width:1080px){.navlinks{gap:var(--s3)}}
/* ── mobile hamburger menu ── */
.nav-toggle{display:none;flex-direction:column;justify-content:center;gap:5px;width:44px;height:44px;padding:0;background:transparent;border:0;cursor:pointer;margin-left:auto;flex:none}
.nav-toggle span{display:block;width:22px;height:2px;background:var(--print);margin-left:auto;transition:transform .25s var(--ease-out),opacity .2s}
.nav.open .nav-toggle span:nth-child(1){transform:translateY(7px) rotate(45deg)}
.nav.open .nav-toggle span:nth-child(2){opacity:0}
.nav.open .nav-toggle span:nth-child(3){transform:translateY(-7px) rotate(-45deg)}
@media(max-width:900px){
  .nav-toggle{display:flex}
  .navlinks{position:absolute;top:var(--nav-h);left:0;right:0;flex-direction:column;align-items:stretch;gap:0;margin:0;
    background:rgba(20,16,12,.98);-webkit-backdrop-filter:blur(16px);backdrop-filter:blur(16px);
    border-bottom:1px solid var(--rule-hard);padding:var(--s1) var(--gut) var(--s3);
    transform:translateY(-8px);opacity:0;visibility:hidden;pointer-events:none;
    transition:opacity .22s var(--ease-out),transform .22s var(--ease-out),visibility .22s}
  .nav.open .navlinks{transform:none;opacity:1;visibility:visible;pointer-events:auto}
  .navlinks a{padding:1.05rem 0;font-size:.82rem;border-bottom:1px solid var(--rule);color:var(--print)}
  .navlinks a:not(.btn)::after{display:none}
  .navlinks a.btn{margin-top:var(--s3);justify-content:center;padding:1.05rem;border-bottom:0}
  .navlinks a .lg{display:inline}
}

.btn{
  display:inline-flex;align-items:center;gap:.55rem;font-family:var(--mono);
  font-size:.68rem;font-weight:600;letter-spacing:.13em;text-transform:uppercase;
  text-decoration:none;padding:.85rem 1.3rem;background:var(--cue-btn);color:var(--on-cue);
  border:0;cursor:pointer;transition:background .2s var(--ease-out);font-stretch:87.5%;
}
.btn:hover{background:var(--cue-btn-h)}   /* colour change only - buttons do not move */
.btn.ghost{background:transparent;color:var(--print);border:1px solid rgba(244,239,231,.3)}
.btn.ghost:hover{background:rgba(244,239,231,.08);border-color:var(--print)}
header .btn{padding:.7rem 1.1rem}
/* the nav CTA is inside .navlinks, whose `a` colour rule out-specifies .btn -
   force the white button ink back so it never renders in muted grey */
.navlinks a.btn,.navlinks a.btn:hover{color:var(--on-cue)}

/* ═══ HERO - full-bleed media, slow pan ═══ */
.hero{position:relative;min-height:min(88vh,780px);display:flex;align-items:flex-end;overflow:hidden}
.hero-media{position:absolute;top:-7%;left:0;right:0;height:114%;z-index:0;overflow:hidden;background:#0C0906;will-change:transform}
.hero-media img{
  width:100%;height:100%;object-fit:cover;object-position:center 70%;
  filter:saturate(.82) contrast(1.05) brightness(.94);
  animation:pan 34s ease-in-out infinite alternate;
}
@keyframes pan{from{transform:scale(1.06) translate3d(-1.2%,0,0)}to{transform:scale(1.16) translate3d(1.2%,-1.5%,0)}}
/* video sits over the poster and fades in once it's actually playing */
.hero-vid{
  position:absolute;inset:0;width:100%;height:100%;object-fit:cover;object-position:center 70%;
  filter:saturate(.82) contrast(1.05) brightness(.94);
  opacity:0;transition:opacity .9s var(--ease-out);
}
.hero-vid.on{opacity:1}
/* mobile: shift the narrow portrait crop onto the near jog wheel + the hand */
@media(max-width:700px){
  .hero-media img,.hero-vid{object-position:38% 60%}
}
/* scrim: lighter than v4 so the deck footage reads (On Cue style) while the
   bottom-left stays dark enough for the headline + sub to sit legibly */
.hero-media::after{
  content:"";position:absolute;inset:0;
  background:
    linear-gradient(to top,rgba(21,15,12,.92) 0%,rgba(21,15,12,.55) 30%,rgba(21,15,12,.14) 62%,rgba(21,15,12,.34) 100%),
    linear-gradient(to right,rgba(21,15,12,.72),transparent 56%);
}
.hero .wrap{padding-block:var(--s12) var(--s8);width:100%}
.hero .h1 span{display:block}
.hero .h1 em{font-style:normal;color:var(--cue)}
.hero-sub{margin:var(--s3) 0 var(--s6);max-width:46ch}
.cta-row{display:flex;gap:var(--s2);flex-wrap:wrap}

/* ── v4 HERO KINETIC TYPE - lines rise from behind a mask on load ── */
.hero .h1 .line{display:block;overflow:hidden;padding-bottom:.04em}
.hero .h1 .ln{display:block;transform:translateY(115%);transition:transform .72s var(--ease-expo)}
body.hero-in .hero .h1 .ln{transform:none}
.hero .h1 .line:nth-child(1) .ln{transition-delay:.32s}
.hero .h1 .line:nth-child(2) .ln{transition-delay:.40s}
.hero .h1 .line:nth-child(3) .ln{transition-delay:.48s}
/* sub / CTAs / specs rise after the headline */
.hero-rise{opacity:0;transform:translateY(16px);transition:opacity .6s var(--ease-out),transform .6s var(--ease-out)}
body.hero-in .hero-rise{opacity:1;transform:none}
.hero-rise.d1{transition-delay:.60s}
.hero-rise.d2{transition-delay:.68s}
.hero-rise.d3{transition-delay:.76s}

.specs{display:grid;grid-template-columns:repeat(4,max-content);gap:var(--s4) clamp(1.25rem,4vw,var(--s8));border-top:1px solid var(--rule);padding-top:var(--s4);margin-top:var(--s8)}
@media(max-width:820px){.specs{grid-template-columns:max-content max-content}}   /* clean 2×2 that aligns */
.spec b{display:block;font-family:var(--mono);font-size:clamp(1.25rem,2.6vw,1.8rem);font-weight:600;letter-spacing:-.02em;line-height:1;font-variant-numeric:tabular-nums}
.spec span{font-family:var(--mono);font-size:.6rem;letter-spacing:.16em;text-transform:uppercase;color:var(--label);display:block;margin-top:.5rem;font-stretch:87.5%}

/* ═══ SECTIONS ═══ */
section{padding:clamp(4rem,9vw,var(--s16)) 0;position:relative}
.sec-head{margin-bottom:var(--s8);max-width:60ch}

/* course - a real sequence, so numbered */
.lessons{border-top:1px solid var(--rule-hard)}
.lesson{
  display:grid;grid-template-columns:auto 13rem 1fr;gap:var(--s4);align-items:baseline;
  padding:var(--s4) 0;border-bottom:1px solid var(--rule);transition:background .2s;
}
.lesson:hover{background:rgba(244,239,231,.025)}
.lesson .no{font-family:var(--mono);font-size:.72rem;color:var(--cue);font-weight:600;font-stretch:87.5%;display:inline-block;transition:transform .3s var(--ease-out)}
@media(hover:hover) and (pointer:fine){.lesson:hover .no{transform:translateX(5px)}}
.lesson .ttl{font-weight:600;font-stretch:108%;font-size:1.06rem;text-transform:uppercase}
.lesson .desc{color:#BFB6AB;font-size:.97rem;margin:0}
@media(max-width:820px){.lesson{grid-template-columns:auto 1fr;gap:var(--s2) var(--s3)}.lesson .desc{grid-column:2}}
/* module dividers grouping the lessons into two phases (On-Cue-style structure) */
.lesson-module{display:flex;align-items:center;gap:var(--s2);padding:var(--s6) 0 var(--s2)}
.lessons .lesson-module:first-child{padding-top:var(--s3)}
.lesson-module .m-no{font-family:var(--mono);font-size:.62rem;font-weight:600;letter-spacing:.16em;text-transform:uppercase;color:var(--cue);font-stretch:87.5%;white-space:nowrap}
.lesson-module .m-ttl{font-family:var(--mono);font-size:.62rem;letter-spacing:.16em;text-transform:uppercase;color:var(--label);font-stretch:87.5%;white-space:nowrap}
.lesson-module::after{content:"";flex:1;height:1px;background:var(--rule)}
.course-after{margin-top:var(--s6);color:#BFB6AB;font-size:.98rem;max-width:58ch}
.course-after b{color:var(--print);font-weight:600}

/* ═══ OUR PROGRAM - pricing lives here now, not floating loose ═══ */
.program{display:grid;grid-template-columns:repeat(auto-fit,minmax(280px,1fr));gap:1px;background:var(--rule-hard);border:1px solid var(--rule-hard)}
.pcard{background:var(--booth);padding:var(--s4);display:flex;flex-direction:column;gap:var(--s2);position:relative;transition:background .3s var(--ease-out),transform .3s var(--ease-out)}
/* v4: red top-hairline grows from the left on hover */
.pcard::after{content:"";position:absolute;left:0;right:0;top:-1px;height:2px;background:var(--cue);transform:scaleX(0);transform-origin:left;transition:transform .3s var(--ease-out)}
@media(hover:hover) and (pointer:fine){
  .pcard:hover{background:var(--panel-hi);transform:translateY(-4px)}
  .pcard:hover::after{transform:scaleX(1)}
}
.pcard.feature{background:var(--panel)}
.pcard .flag{position:absolute;top:0;right:0;background:var(--cue-btn);color:var(--on-cue);font-family:var(--mono);font-size:.55rem;letter-spacing:.14em;text-transform:uppercase;padding:.4rem .6rem;font-stretch:87.5%}
.pcard p{color:#BFB6AB;font-size:.95rem;margin:0}
.pcard ul{list-style:none;margin:0;padding:0;display:flex;flex-direction:column;gap:.55rem}
.pcard li{font-size:.9rem;color:#BFB6AB;padding-left:1.1rem;position:relative}
.pcard li::before{content:"";position:absolute;left:0;top:.55em;width:5px;height:5px;background:var(--cue);border-radius:50%}
.pcard .price{font-family:var(--mono);font-size:1.5rem;color:var(--print);font-weight:600;font-stretch:87.5%;margin-top:auto;padding-top:var(--s3);letter-spacing:-.02em;font-variant-numeric:tabular-nums}
.pcard .price small{display:block;font-size:.58rem;letter-spacing:.15em;color:var(--label);margin-top:.45rem;font-weight:400;text-transform:uppercase}

/* ═══ VIDEO SHOWCASE ═══ */
.vids{display:grid;grid-template-columns:repeat(auto-fit,minmax(260px,1fr));gap:var(--s2)}
.vid{position:relative;aspect-ratio:9/16;background:var(--panel);border:1px solid var(--rule-hard);overflow:hidden;display:flex;align-items:center;justify-content:center;text-align:center;padding:var(--s3)}
.vid img{position:absolute;inset:0;width:100%;height:100%;object-fit:cover;filter:saturate(.6) brightness(.5)}
.vid .slot{position:relative;z-index:1}
.vid .play{width:52px;height:52px;border:1.5px solid var(--print);border-radius:50%;display:grid;place-items:center;margin:0 auto var(--s2)}
.vid .play::after{content:"";border-left:12px solid var(--print);border-block:7px solid transparent;margin-left:3px}

/* ═══ SIGNATURE: GIFT ═══ */
.gift{background:var(--panel);border-block:1px solid var(--rule-hard)}
.gift-grid{display:grid;grid-template-columns:minmax(0,1fr) minmax(0,1fr);gap:clamp(2rem,5vw,4.5rem);align-items:start}
@media(max-width:960px){.gift-grid{grid-template-columns:1fr}}
fieldset{border:0;padding:0;margin:0 0 var(--s6)}
legend{font-family:var(--mono);font-size:.62rem;letter-spacing:.16em;text-transform:uppercase;color:var(--label);padding:0 0 var(--s2);font-stretch:87.5%}
.opts{display:grid;gap:1px;background:var(--rule);border:1px solid var(--rule)}
.opts.two{grid-template-columns:1fr 1fr}
.opt{position:relative;background:var(--panel)}
.opt input{position:absolute;opacity:0;width:100%;height:100%;margin:0;cursor:pointer}
.opt label{display:flex;justify-content:space-between;align-items:center;gap:var(--s2);padding:1rem 1.1rem;cursor:pointer;transition:background .16s}
.opt label span:first-child{font-weight:600;font-size:.97rem}
.opt label .amt{font-family:var(--mono);font-size:.78rem;color:var(--label);font-stretch:87.5%}
.opt input:hover + label{background:var(--panel-hi)}
.opt input:checked + label{background:var(--cue-btn);color:var(--on-cue)}
.opt input:checked + label .amt{color:var(--on-cue)}
.opt input:focus-visible + label{outline:2px solid var(--cue);outline-offset:-2px}
.field{margin-bottom:var(--s3)}
.field label{display:block;font-family:var(--mono);font-size:.6rem;letter-spacing:.16em;text-transform:uppercase;color:var(--label);margin-bottom:.5rem;font-stretch:87.5%}
input[type=text],textarea{
  width:100%;background:var(--booth);border:1px solid var(--rule-hard);color:var(--print);
  font-family:var(--body);font-size:1rem;padding:.85rem 1rem;border-radius:0;
}
input[type=text]:focus,textarea:focus{outline:none;border-color:var(--cue)}
input[type=text]::placeholder,textarea::placeholder{color:#7C7267;opacity:1}
textarea{resize:vertical;min-height:84px;line-height:1.5}
.counter{font-family:var(--mono);font-size:.58rem;color:var(--label);text-align:right;margin-top:.4rem;font-stretch:87.5%}

/* the card - now itemised, not a bare number */
.card-stage{position:sticky;top:90px}
.giftcard{background:var(--booth);border:1px solid var(--rule-hard);padding:clamp(1.3rem,3vw,1.9rem);position:relative;overflow:hidden}
.giftcard::before{content:"";position:absolute;inset:8px;border:1px solid var(--accent,var(--cue));opacity:.26;pointer-events:none}
.gc-top{display:flex;justify-content:space-between;align-items:flex-start;gap:var(--s2);margin-bottom:var(--s4)}
.gc-brand{font-weight:800;font-stretch:125%;text-transform:uppercase;font-size:.88rem;letter-spacing:.03em;display:flex;align-items:center;gap:.5rem}
.gc-brand .mark{width:16px;height:16px;border-width:1.5px}
.gc-brand .mark::after{background:var(--accent,var(--cue));width:4.5px;height:4.5px}
.gc-serial{font-family:var(--mono);font-size:.55rem;letter-spacing:.13em;color:var(--label);text-align:right;font-stretch:87.5%;line-height:1.9}
.gc-occ{font-family:var(--mono);font-size:.58rem;letter-spacing:.2em;text-transform:uppercase;color:var(--accent,var(--cue));margin-bottom:.7rem;font-stretch:87.5%}
.gc-name{font-family:var(--display);font-weight:700;font-stretch:118%;text-transform:uppercase;font-size:clamp(1.5rem,3.6vw,2.2rem);line-height:.96;letter-spacing:-.02em;word-break:break-word;margin-bottom:.7rem}
.gc-msg{color:#BFB6AB;font-size:.93rem;line-height:1.5;min-height:1.5em;margin-bottom:var(--s3);white-space:pre-wrap}
.gc-wave{display:flex;align-items:flex-end;gap:2px;height:44px;margin:var(--s3) 0;overflow:hidden}
.gc-wave i{flex:1;min-width:1px;background:var(--accent,var(--cue));opacity:.85;transition:height .4s cubic-bezier(.2,.8,.3,1)}
.gc-wave i.q{background:var(--wave);opacity:.55}
/* what the money actually buys */
.gc-buys{border-top:1px solid var(--rule);padding-top:var(--s3);margin-bottom:var(--s3)}
.gc-buys li{display:flex;justify-content:space-between;gap:var(--s2);font-family:var(--mono);font-size:.6rem;letter-spacing:.1em;text-transform:uppercase;color:#BFB6AB;padding:.42rem 0;font-stretch:87.5%}
.gc-buys ul{list-style:none;margin:0;padding:0}
.gc-buys li span:last-child{color:var(--label);white-space:nowrap}
.gc-foot{display:flex;justify-content:space-between;align-items:flex-end;gap:var(--s2);padding-top:var(--s3);border-top:1px solid var(--rule-hard);flex-wrap:wrap}
.gc-val{font-family:var(--mono);font-size:1.7rem;font-weight:600;letter-spacing:-.025em;font-variant-numeric:tabular-nums}
.gc-val small{display:block;font-size:.54rem;letter-spacing:.16em;color:var(--label);margin-top:.4rem;font-weight:400;text-transform:uppercase}
.gc-from{font-family:var(--mono);font-size:.58rem;letter-spacing:.14em;text-transform:uppercase;color:var(--label);text-align:right;font-stretch:87.5%;line-height:1.8}
.checkout{margin-top:var(--s4)}
.checkout .btn{width:100%;justify-content:center}
.disclaimer{font-family:var(--mono);font-size:.55rem;letter-spacing:.1em;color:var(--label);text-transform:uppercase;margin-top:var(--s2);text-align:center;line-height:1.9;font-stretch:87.5%}

/* ═══ CHRISTIAN ═══ */
.who{display:grid;grid-template-columns:.85fr 1fr;gap:clamp(2rem,5vw,4rem);align-items:center}
@media(max-width:860px){.who{grid-template-columns:1fr}}
.who figure{margin:0;position:relative}
.who img{width:100%;aspect-ratio:4/5;object-fit:cover;object-position:center 30%;filter:saturate(.85) contrast(1.03)}
.who figcaption{font-family:var(--mono);font-size:.55rem;letter-spacing:.14em;text-transform:uppercase;color:var(--label);margin-top:.8rem;font-stretch:87.5%}
.creds{display:grid;grid-template-columns:1fr 1fr;gap:1px;background:var(--rule-hard);border:1px solid var(--rule-hard);margin-top:var(--s6)}
.cred{background:var(--booth);padding:var(--s3)}
.cred b{display:block;font-family:var(--mono);font-size:1.15rem;font-weight:600;letter-spacing:-.02em;font-variant-numeric:tabular-nums}
.cred span{font-family:var(--mono);font-size:.56rem;letter-spacing:.14em;text-transform:uppercase;color:var(--label);display:block;margin-top:.5rem;font-stretch:87.5%;line-height:1.7}
.playedat{display:flex;flex-wrap:wrap;gap:.5rem;margin-top:var(--s4)}
.playedat li{list-style:none;font-family:var(--mono);font-size:.58rem;letter-spacing:.12em;text-transform:uppercase;color:#BFB6AB;border:1px solid var(--rule-hard);padding:.5rem .8rem;font-stretch:87.5%}

/* ═══ COLOUR CASTLE streaming links ═══ */
.streams{display:flex;flex-wrap:wrap;gap:var(--s3);margin-top:var(--s6)}
.stream{display:flex;align-items:center;gap:1rem;text-decoration:none;padding:1.05rem 1.3rem;border:1px solid var(--rule-hard);background:var(--booth);color:var(--print);min-width:240px;transition:border-color .22s var(--ease-out),transform .22s var(--ease-out),background .22s}
.stream:hover{transform:translateY(-3px);background:#1B1410}
.stream .ico{width:34px;height:34px;flex:none;display:grid;place-items:center}
.stream .ico svg{width:100%;height:100%;display:block}
.stream .st-txt{display:flex;flex-direction:column;line-height:1.25}
.stream .st-lbl{font-family:var(--mono);font-size:.54rem;letter-spacing:.16em;text-transform:uppercase;color:var(--label);font-stretch:87.5%}
.stream .st-name{font-weight:700;font-stretch:110%;font-size:1.06rem}
.stream .go{margin-left:auto;font-family:var(--mono);color:var(--label);transition:color .22s,transform .22s}
.stream:hover .go{color:var(--print);transform:translateX(4px)}
.stream.spotify:hover{border-color:#1DB954}
.stream.apple:hover{border-color:#FA57C1}
/* music section: embedded player + links side by side */
.music-body{display:grid;grid-template-columns:minmax(0,1.5fr) minmax(0,1fr);gap:var(--s4);align-items:stretch;margin-top:var(--s6)}
.music-embed{min-width:0}
.music-embed iframe{display:block;width:100%;height:352px;border:1px solid var(--rule-hard);border-radius:14px}
.music-links{display:flex;flex-direction:column;gap:var(--s3);justify-content:center}
.music-links .stream{min-width:0;flex:1;max-height:110px}
@media(max-width:820px){.music-body{grid-template-columns:1fr}.music-links{flex-direction:row;flex-wrap:wrap}.music-links .stream{flex:1 1 240px}}

/* ═══ REVIEWS (hidden until real Google reviews exist) ═══ */
.reviews-grid{display:grid;grid-template-columns:repeat(auto-fit,minmax(270px,1fr));gap:1px;background:var(--rule-hard);border:1px solid var(--rule-hard)}
.review{background:var(--booth);padding:var(--s4);margin:0;display:flex;flex-direction:column;gap:var(--s2)}
.review-top{display:flex;align-items:center;gap:.8rem}
.review .avatar{width:38px;height:38px;border-radius:50%;background:var(--panel-hi);display:grid;place-items:center;font-weight:700;color:var(--cue);flex:none;font-stretch:100%}
.review-top b{display:block;font-weight:600;font-size:.98rem}
.review-top .src{font-family:var(--mono);font-size:.54rem;letter-spacing:.14em;text-transform:uppercase;color:var(--label);font-stretch:87.5%}
.review .stars{color:var(--cue);letter-spacing:.18em;font-size:.85rem}
.review blockquote{margin:0;color:#BFB6AB;font-size:.95rem;line-height:1.55}
.reviews-cta{display:flex;align-items:center;gap:var(--s3);margin-top:var(--s4);flex-wrap:wrap}
.reviews-cta .agg{font-family:var(--mono);font-size:.66rem;letter-spacing:.12em;text-transform:uppercase;color:var(--label);font-stretch:87.5%}

/* ═══ FAQ ═══ */
details{border-bottom:1px solid var(--rule)}
details:first-of-type{border-top:1px solid var(--rule-hard)}
summary{list-style:none;cursor:pointer;padding:var(--s4) 3rem var(--s4) 0;position:relative;font-weight:600;font-stretch:106%;font-size:1.04rem}
summary::-webkit-details-marker{display:none}
summary::after{content:"";position:absolute;right:.4rem;top:50%;width:11px;height:11px;border-right:1.5px solid var(--cue);border-bottom:1.5px solid var(--cue);transform:translateY(-70%) rotate(45deg);transition:transform .22s}
details[open] summary::after{transform:translateY(-30%) rotate(225deg)}
details p{color:#BFB6AB;max-width:62ch;padding-bottom:var(--s4);margin:0}

/* ═══ FOOTER ═══ */
footer{border-top:1px solid var(--rule-hard);padding:var(--s12) 0 var(--s6)}
.foot-cta{display:flex;justify-content:space-between;align-items:flex-end;gap:var(--s4);flex-wrap:wrap;margin-bottom:var(--s12)}
.foot-meta{display:flex;justify-content:space-between;gap:var(--s4);flex-wrap:wrap;padding-top:var(--s4);border-top:1px solid var(--rule)}

.proto{position:fixed;left:var(--s2);bottom:var(--s2);z-index:80;font-family:var(--mono);font-size:.55rem;letter-spacing:.14em;text-transform:uppercase;background:var(--wave);color:#06131B;padding:.45rem .7rem;font-stretch:87.5%}

.rv{opacity:0;transform:translateY(20px);transition:opacity .65s var(--ease-out),transform .65s var(--ease-out)}
.rv.in{opacity:1;transform:none}
/* staggered children within a revealed group (lessons, cards) */
.stagger > *{opacity:0;transform:translateY(22px);transition:opacity .55s var(--ease-out),transform .55s var(--ease-out)}
.stagger.in > *{opacity:1;transform:none}

/* ═══════════════════════ v4 MOTION LAYER ═══════════════════════ */

/* ── PRELOADER: short, hard-capped, curtain reveal ── */
#preload{position:fixed;inset:0;z-index:200;background:var(--booth);
  display:grid;place-content:center;gap:var(--s3);justify-items:center;
  transition:transform .55s var(--ease-expo)}
#preload.done{transform:translateY(-101%)}
#preload .pl-brand{font-weight:800;font-stretch:125%;text-transform:uppercase;
  font-size:1rem;letter-spacing:.06em;display:flex;align-items:center;gap:.6rem;opacity:.9}
#preload .pl-track{width:min(200px,42vw);height:2px;background:var(--rule-hard);overflow:hidden}
#preload .pl-fill{height:100%;width:0;background:var(--cue);transition:width .7s var(--ease-out)}
#preload.load .pl-fill{width:100%}

/* ── THE PLAYHEAD: bottom transport-bar waveform, fills red as you scroll ── */
.playhead{position:fixed;left:0;right:0;bottom:0;height:34px;z-index:56;pointer-events:none;
  background:linear-gradient(to top,rgba(21,15,12,.92),rgba(21,15,12,.4));
  -webkit-backdrop-filter:blur(5px);backdrop-filter:blur(5px);border-top:1px solid var(--rule)}
.playhead .pw{position:absolute;inset:0;display:flex;align-items:flex-end;gap:2px;padding:6px var(--gut) 7px}
.playhead .pw i{flex:1;min-width:1px;background:rgba(244,239,231,.15)}
.playhead .pw-fill{clip-path:inset(0 calc(100% - var(--p,0%)) 0 0)}
.playhead .pw-fill i{background:var(--cue)}
.playhead .pw-fill i.q{background:#FF7A5A}
.ph-cursor{position:absolute;top:0;bottom:0;width:1px;background:var(--cue);left:var(--p,0%);
  box-shadow:0 0 9px 1px rgba(238,59,43,.7);transition:left .05s linear}
.ph-tag{position:absolute;bottom:9px;left:var(--gut);font-family:var(--mono);font-size:.5rem;
  letter-spacing:.16em;text-transform:uppercase;color:var(--label);font-stretch:87.5%;pointer-events:none}
@media(max-width:560px){.playhead{height:26px}.ph-tag{display:none}}
body{padding-bottom:34px}         /* room so the bar never covers the footer */
@media(max-width:560px){body{padding-bottom:26px}}
.proto{bottom:42px}               /* clear the transport bar */

/* ── FAQ accordion: JS animates height; keep content clipped during it ── */
details p{overflow:hidden}

/* ── REDUCED MOTION: every v4 effect degrades to instant ── */
@media (prefers-reduced-motion:reduce){
  .rv,.stagger > *{opacity:1;transform:none}
  .hero .h1 .ln,body.hero-in .hero .h1 .ln{transform:none}
  .hero-rise{opacity:1;transform:none}
  #preload{display:none}
  .playhead{display:none}body{padding-bottom:0}
  .pcard::after,.navlinks a:not(.btn)::after{transition:none}
}