:root{
  --magenta:#FF08EB; --violet:#9056EF; --cyan:#01B1F4;
  --ink:#0D0D0F; --ink-2:#141417; --ink-3:#1C1C21;
  --hair:#FFFFFF; --track:#2A2A31; --bone:#F5F5F5; --mute:#C4C4CE;
  --fader:linear-gradient(180deg,var(--magenta),var(--violet) 48%,var(--cyan));
  --fader-x:linear-gradient(90deg,var(--magenta),var(--violet) 48%,var(--cyan));
  --display:'Outfit',system-ui,sans-serif; --body:'Satoshi','Outfit',system-ui,sans-serif;
  --pad:clamp(1.5rem,5vw,5.5rem);
}
*,*::before,*::after{box-sizing:border-box}
@media (prefers-reduced-motion:reduce){*{animation:none!important;transition:none!important}}
body{margin:0;background:var(--ink);color:var(--bone);font-family:var(--body);font-weight:400;
  font-size:17px;line-height:1.68;-webkit-font-smoothing:antialiased}
img{max-width:100%;display:block}
a{color:inherit;text-decoration:none}
:focus-visible{outline:2px solid var(--cyan);outline-offset:4px}

/* ---------- fine typographic system: restraint over scale ---------- */
h1,h2,h3{font-family:var(--display);margin:0;letter-spacing:-.035em;line-height:1.04;font-weight:800}
h1{font-size:clamp(2.15rem,4.2vw,3.7rem);font-weight:900}
h2{font-size:clamp(1.65rem,2.8vw,2.4rem)}
h3{font-size:1.06rem;letter-spacing:-.02em;font-weight:700}
p{margin:0 0 1.15em}
.lab{font-family:var(--body);font-weight:500;font-size:.8rem;letter-spacing:.26em;text-transform:uppercase;color:var(--mute)}
.num{font-family:var(--display);font-weight:500;font-size:.83rem;letter-spacing:.2em;text-transform:uppercase;color:var(--magenta)}
.hair{height:1px;background:var(--hair);border:0;margin:0}

/* ---------- masthead: thin, quiet, pinned ---------- */
.top{position:fixed;inset:0 0 auto 0;z-index:60;display:flex;align-items:center;justify-content:space-between;
  gap:1rem;padding:1.1rem var(--pad);background:rgba(13,13,15,.72);backdrop-filter:blur(18px);
  border-bottom:1px solid transparent;transition:border-color .3s,background .3s}
.top.stuck{border-bottom-color:var(--hair);background:rgba(13,13,15,.94)}
.brand{display:flex;align-items:center;gap:.55rem}
.brand img:first-child{height:34px}
.brand img:last-child{height:19px}
.menu{display:flex;gap:2.1rem}
.menu a{font-family:var(--body);font-weight:500;font-size:.83rem;letter-spacing:.14em;text-transform:uppercase;color:var(--mute);
  position:relative;padding:.2rem 0;transition:color .2s}
.menu a:hover,.menu a[aria-current]{color:var(--bone)}
.menu a[aria-current]::after{content:'';position:absolute;left:0;right:0;bottom:-2px;height:1px;background:var(--fader-x)}
.burger{display:none;background:none;border:0;color:var(--bone);font-family:var(--body);font-weight:500;font-size:.83rem;
  letter-spacing:.14em;text-transform:uppercase;cursor:pointer;padding:.4rem 0}
@media(max-width:1100px){.menu{display:none}.burger{display:block}}

/* ---------- hero: full bleed, type sits low and small ---------- */
.hero{position:relative;min-height:100svh;display:flex;flex-direction:column;justify-content:flex-end;
  padding:0 var(--pad) clamp(2rem,5vh,3.5rem)}
.hero__bg{position:absolute;inset:0;overflow:hidden;background:var(--ink-2)}
.hero__bg::after{content:'';position:absolute;inset:0;
  background:linear-gradient(180deg,rgba(13,13,15,.55) 0%,rgba(13,13,15,.2) 40%,rgba(13,13,15,.96) 100%)}
.hero__ph{position:absolute;inset:0;display:grid;place-items:center;
  background:
    radial-gradient(120% 90% at 78% 18%,rgba(255,8,235,.16),transparent 55%),
    radial-gradient(100% 80% at 18% 82%,rgba(1,177,244,.16),transparent 55%),
    var(--ink-2)}
.hero__ph span{font-family:var(--body);font-weight:500;font-size:.76rem;letter-spacing:.24em;text-transform:uppercase;color:#A0A0AC}
.hero__in{position:relative;z-index:2;display:grid;grid-template-columns:repeat(12,1fr);gap:1.5rem;align-items:end}
.hero__txt{grid-column:1/span 8}
@media(max-width:900px){.hero__txt{grid-column:1/-1}}
.hero__mark{height:clamp(58px,6.6vw,92px);width:auto;margin-bottom:1.6rem}

/* The name set at display scale. This is the one place oversized type is right:
   it is identity, not a marketing shout. */
.brandline{margin:0;font-family:var(--display);font-weight:900;
  font-size:clamp(3rem,8.8vw,7.2rem);line-height:.9;letter-spacing:-.05em}
.hero__tag{margin:1.5rem 0 0;font-family:var(--display);font-weight:700;
  font-size:clamp(1.15rem,2.1vw,1.7rem);letter-spacing:-.03em;line-height:1.2;max-width:22ch}
.hero__tag em{font-style:normal;background:var(--fader-x);
  -webkit-background-clip:text;background-clip:text;color:transparent}
.hero__sub{margin:1.4rem 0 0;max-width:46ch;color:#DADAE2;font-size:1rem;line-height:1.7}
.hero__cta{grid-column:9/span 4;display:flex;flex-direction:column;gap:.9rem;align-items:flex-start}
@media(max-width:900px){.hero__cta{grid-column:1/-1;flex-direction:row;flex-wrap:wrap;margin-top:2rem}}
.scroll{position:absolute;left:var(--pad);bottom:1.1rem;font-family:var(--body);font-weight:500;font-size:.74rem;
  letter-spacing:.22em;text-transform:uppercase;color:#A9A9B5}

/* ---------- buttons: hairline, not filled slabs ---------- */
.b{display:inline-flex;align-items:center;gap:.7rem;font-family:var(--body);font-weight:500;font-size:.85rem;letter-spacing:.14em;
  text-transform:uppercase;padding:.9rem 1.4rem;border:1px solid var(--hair);color:var(--bone);
  background:transparent;cursor:pointer;transition:border-color .25s,background .25s,transform .25s;position:relative}
.b:hover{border-color:transparent;background:var(--ink-3);transform:translateY(-1px)}
.b--key{border-color:transparent;background:var(--ink-3)}
.b--key::before{content:'';position:absolute;inset:0;padding:1px;background:var(--fader-x);
  -webkit-mask:linear-gradient(#000 0 0) content-box,linear-gradient(#000 0 0);-webkit-mask-composite:xor;mask-composite:exclude}
.b--key:hover{background:#232329}
.b .ar{transition:transform .25s}
.b:hover .ar{transform:translateX(4px)}

/* ---------- the index: services as an editorial list, not cards ---------- */
.idx{padding:clamp(4.5rem,11vh,8rem) var(--pad)}
.idx__hd{display:grid;grid-template-columns:repeat(12,1fr);gap:1.5rem;margin-bottom:clamp(2.5rem,6vh,4rem)}
.idx__hd .lab{grid-column:1/span 3}
.idx__hd h2{grid-column:4/span 6;max-width:18ch}
@media(max-width:900px){.idx__hd .lab,.idx__hd h2{grid-column:1/-1}}

.row{display:grid;grid-template-columns:repeat(12,1fr);gap:1.5rem;align-items:baseline;
  padding:2rem 0;border-top:1px solid var(--hair);position:relative;transition:padding-left .35s}
.row:last-of-type{border-bottom:1px solid var(--hair)}
.row::before{content:'';position:absolute;left:0;top:-1px;height:1px;width:0;background:var(--fader-x);transition:width .5s}
.row:hover::before{width:100%}
.row:hover{padding-left:.6rem}
.row__n{grid-column:1/span 1}
.row__t{grid-column:2/span 4}
.row__d{grid-column:6/span 5;color:var(--mute);font-size:1rem;margin:0}
.row__a{grid-column:12/span 1;justify-self:end;font-family:var(--display);font-size:1.1rem;color:var(--mute);transition:color .25s,transform .25s}
.row:hover .row__a{color:var(--bone);transform:translateX(4px)}
@media(max-width:900px){
  .row{gap:.5rem;padding:1.6rem 0}
  .row__n{grid-column:1/-1}.row__t{grid-column:1/-1}.row__d{grid-column:1/-1}
  .row__a{display:none}
}

/* ---------- sticky split: visual pinned, copy scrolls past ---------- */
.split{display:grid;grid-template-columns:1fr 1fr;gap:0;border-top:1px solid var(--hair)}
@media(max-width:900px){.split{grid-template-columns:1fr}}
.split__vis{position:sticky;top:0;height:100svh;background:var(--ink-2);overflow:hidden}
@media(max-width:900px){.split__vis{position:relative;height:58svh}}
.ph{position:absolute;inset:0;display:grid;place-items:center;
  background:radial-gradient(120% 100% at 50% 30%,rgba(144,86,239,.14),transparent 60%),var(--ink-2)}
.ph span{font-family:var(--body);font-weight:500;font-size:.74rem;letter-spacing:.22em;text-transform:uppercase;color:#A0A0AC;text-align:center;line-height:2}
.split__txt{padding:clamp(3rem,9vh,7rem) var(--pad)}
.split__txt section{padding:clamp(2.5rem,7vh,5rem) 0;border-bottom:1px solid var(--hair)}
.split__txt section:last-child{border-bottom:0}
.split__txt h3{margin:.9rem 0 .8rem;font-family:var(--display);font-size:1.6rem;font-weight:800;letter-spacing:-.03em}
.split__txt p{color:var(--mute);font-size:1.02rem}

/* ---------- spec: typographic, hairlines, no boxes ---------- */
.spec{padding:clamp(4.5rem,11vh,8rem) var(--pad);border-top:1px solid var(--hair)}
.spec__g{display:grid;grid-template-columns:repeat(12,1fr);gap:1.5rem}
.spec__l{grid-column:1/span 4}
.spec__r{grid-column:6/span 7}
@media(max-width:900px){.spec__l,.spec__r{grid-column:1/-1}}
.kv{display:grid;grid-template-columns:minmax(9rem,1fr) 2fr;gap:1.5rem;padding:1.05rem 0;border-bottom:1px solid var(--hair)}
.kv:first-child{border-top:1px solid var(--hair)}
.kv dt{font-family:var(--body);font-weight:500;font-size:.8rem;letter-spacing:.16em;text-transform:uppercase;color:var(--mute)}
.kv dd{margin:0;font-size:1.02rem}

/* ---------- one quote, given room ---------- */
.say{padding:clamp(5rem,13vh,9rem) var(--pad);border-top:1px solid var(--hair);text-align:center}
.say blockquote{margin:0 auto;max-width:24ch;font-family:var(--display);font-weight:800;
  font-size:clamp(1.5rem,3.4vw,2.5rem);line-height:1.16;letter-spacing:-.025em}
.say figcaption{margin-top:1.8rem;font-family:var(--body);font-weight:500;font-size:.8rem;letter-spacing:.18em;
  text-transform:uppercase;color:var(--mute)}
.say .bar{width:34px;height:2px;background:var(--fader-x);margin:0 auto 2.2rem}

/* ---------- close ---------- */
.end{padding:clamp(4.5rem,11vh,8rem) var(--pad);border-top:1px solid var(--hair);
  display:grid;grid-template-columns:repeat(12,1fr);gap:1.5rem;align-items:end}
.end h2{grid-column:1/span 6;max-width:14ch}
.end__r{grid-column:8/span 5;justify-self:end;text-align:right}
@media(max-width:900px){.end h2,.end__r{grid-column:1/-1;justify-self:start;text-align:left}}

.foot{padding:2.2rem var(--pad);border-top:1px solid var(--hair);display:flex;flex-wrap:wrap;gap:.8rem 2rem;
  justify-content:space-between;font-family:var(--body);font-weight:500;font-size:.78rem;letter-spacing:.12em;
  text-transform:uppercase;color:#ADADB8}

/* ---------- entrance ---------- */
.up{opacity:0;transform:translateY(14px);transition:opacity .7s cubic-bezier(.2,.7,.3,1),transform .7s cubic-bezier(.2,.7,.3,1)}
.up.in{opacity:1;transform:none}

/* ============================================================
   Components for inner pages, built on the same system as home:
   hairlines, generous space, no boxes, tracked Satoshi labels.
   ============================================================ */

/* Page header: same grid as home, without the display-scale brand */
.phead{padding:calc(var(--pad) + 4.5rem) var(--pad) clamp(2.5rem,7vh,4.5rem);
  display:grid;grid-template-columns:repeat(12,1fr);gap:1.5rem;align-items:end;
  border-bottom:1px solid var(--hair);position:relative;overflow:hidden}
.phead::after{content:'';position:absolute;inset:0;pointer-events:none;
  background:radial-gradient(90% 130% at 88% 0%,rgba(255,8,235,.09),transparent 60%),
             radial-gradient(80% 120% at 5% 100%,rgba(1,177,244,.07),transparent 60%)}
.phead>*{position:relative;z-index:1}
.phead__t{grid-column:1/span 7}
.phead__s{grid-column:9/span 4;align-self:end}
.phead h1{margin:1.1rem 0 0;font-size:clamp(2.2rem,4.6vw,4rem);font-weight:900;
  letter-spacing:-.045em;line-height:.98;max-width:15ch}
.phead p{margin:1.2rem 0 0;color:#DADAE2;max-width:46ch;font-size:1rem}
@media(max-width:900px){.phead__t,.phead__s{grid-column:1/-1}.phead__s{margin-top:1.8rem}}

/* Generic section shell */
.sec{padding:clamp(3.5rem,9vh,6.5rem) var(--pad);border-bottom:1px solid var(--hair)}
.sec:last-of-type{border-bottom:0}
.sec__g{display:grid;grid-template-columns:repeat(12,1fr);gap:1.5rem}
.c4{grid-column:1/span 4}
.c7{grid-column:6/span 7}
.c6{grid-column:1/span 6}
.c5r{grid-column:8/span 5}
.c12{grid-column:1/-1}
@media(max-width:900px){.c4,.c7,.c6,.c5r{grid-column:1/-1}}
.sec h2{margin:1rem 0 0}
.sec__lead{color:var(--mute);margin-top:1.1rem;font-size:1.02rem;max-width:48ch}

/* Rates: hairline rows, price right-aligned, no cards */
.rate{list-style:none;margin:0;padding:0}
.rate li{display:grid;grid-template-columns:1fr auto;gap:.4rem 2rem;align-items:baseline;
  padding:1.35rem 0;border-bottom:1px solid var(--hair)}
.rate li:first-child{border-top:1px solid var(--hair)}
.rate b{font-family:var(--display);font-weight:800;font-size:1.08rem;letter-spacing:-.02em}
.rate span{grid-column:1/2;color:var(--mute);font-size:.98rem}
.rate .p{grid-row:1/3;grid-column:2/3;align-self:center;font-family:var(--display);
  font-weight:800;font-size:1.15rem;letter-spacing:-.02em;
  background:var(--fader-x);-webkit-background-clip:text;background-clip:text;color:transparent}
@media(max-width:600px){.rate .p{grid-row:auto;grid-column:1/-1;justify-self:start}}

/* Checklist: fine rule per item, no bullets */
.list{list-style:none;margin:0;padding:0}
.list li{padding:.85rem 0;border-bottom:1px solid var(--hair);font-size:1.02rem;
  display:grid;grid-template-columns:1.4rem 1fr;gap:.6rem}
.list li::before{content:'';width:7px;height:7px;margin-top:.55rem;background:var(--fader)}
.list li:first-child{border-top:1px solid var(--hair)}

/* Numbered process */
.steps{list-style:none;margin:0;padding:0;counter-reset:s}
.steps li{counter-increment:s;display:grid;grid-template-columns:3rem 1fr;gap:1.4rem;
  padding:1.7rem 0;border-bottom:1px solid var(--hair)}
.steps li:first-child{border-top:1px solid var(--hair)}
.steps li::before{content:counter(s,decimal-leading-zero);font-family:var(--display);
  font-weight:500;font-size:.85rem;letter-spacing:.2em;color:var(--magenta);padding-top:.45rem}
.steps h3{margin:0 0 .4rem}
.steps p{margin:0;color:var(--mute);font-size:1rem}

/* Two-column prose blocks */
.cols{display:grid;grid-template-columns:repeat(auto-fit,minmax(280px,1fr));
  gap:clamp(2rem,4vw,3.5rem)}
.cols h3{margin:0 0 .9rem}
.cols p{color:var(--mute);font-size:1rem}

/* Photo placeholder in the new language: tinted, not dashed */
.shot{position:relative;background:var(--ink-2);aspect-ratio:16/10;display:grid;place-items:center;
  overflow:hidden}
.shot::before{content:'';position:absolute;inset:0;
  background:radial-gradient(110% 100% at 30% 20%,rgba(255,8,235,.10),transparent 60%),
             radial-gradient(100% 100% at 80% 90%,rgba(1,177,244,.10),transparent 60%)}
.shot span{position:relative;font-family:var(--body);font-weight:500;font-size:.74rem;
  letter-spacing:.22em;text-transform:uppercase;color:#A9A9B5;text-align:center;line-height:2;padding:1rem}
.shot--tall{aspect-ratio:4/5}

/* Compliance / spec pairs reuse .kv from base */

/* Form */
.form{display:grid;gap:1.4rem;max-width:560px}
.f{display:grid;gap:.5rem}
.f label{font-family:var(--body);font-weight:500;font-size:.8rem;letter-spacing:.16em;
  text-transform:uppercase;color:var(--mute)}
.f input,.f select,.f textarea{background:transparent;border:0;border-bottom:1px solid var(--hair);
  color:var(--bone);font-family:var(--body);font-size:1rem;padding:.7rem 0;width:100%;border-radius:0}
.f textarea{min-height:130px;resize:vertical}
.f input:focus,.f select:focus,.f textarea:focus{outline:none;border-bottom-color:var(--cyan)}
.f select option{background:var(--ink-2);color:var(--bone)}

/* Quiet note */
.note{border-left:2px solid transparent;border-image:var(--fader) 1;padding-left:1.3rem;
  color:var(--mute);font-size:.98rem}

/* Contact detail pairs */
.cd{display:grid;grid-template-columns:minmax(7rem,auto) 1fr;gap:1rem 1.5rem;
  padding:1rem 0;border-bottom:1px solid var(--hair)}
.cd:first-child{border-top:1px solid var(--hair)}
.cd dt{font-family:var(--body);font-weight:500;font-size:.8rem;letter-spacing:.16em;
  text-transform:uppercase;color:var(--mute)}
.cd dd{margin:0;font-size:1.02rem}

/* Preview-only chrome */
.pbar{position:fixed;bottom:0;left:0;right:0;z-index:80;background:rgba(20,20,23,.92);
  backdrop-filter:blur(14px);border-top:1px solid var(--hair);text-align:center;
  padding:.55rem 1rem;font-family:var(--body);font-weight:500;font-size:.71rem;
  letter-spacing:.2em;text-transform:uppercase;color:#B0B0BB}
.view[hidden]{display:none}

/* ============================================================
   Client / partner logo strip.
   Logos sit muted and lift to full colour on hover, so the strip
   reads as quiet credibility rather than a wall of badges.
   ============================================================ */
.clients{padding:clamp(2.8rem,7vh,4.5rem) var(--pad);border-bottom:1px solid var(--hair)}
.clients__hd{display:flex;flex-wrap:wrap;align-items:baseline;gap:.6rem 1.5rem;
  margin-bottom:clamp(1.8rem,4vh,2.6rem)}
.clients__hd p{margin:0}
.clients__note{font-size:.89rem;color:#B0B0BB}
/* Column count is pinned rather than auto-fit, so the row is always exactly
   filled and no orphan cell is left showing the grid's hairline colour. */
.clients__g{display:grid;gap:1px;background:var(--hair);
  grid-template-columns:repeat(4,1fr);border:1px solid var(--hair)}
@media(max-width:1000px){.clients__g{grid-template-columns:repeat(2,1fr)}}
@media(max-width:400px){.clients__g{grid-template-columns:1fr}}
/* Every tile is the same size and carries the background its logo was drawn
   for, so each mark sits on its own colour rather than on a pill floating in
   a dark box. Logos are shown whole, at full colour, never cropped. */
.client{background:var(--ink);min-height:126px;display:grid;place-items:center;padding:1.5rem 1.4rem;
  transition:background .3s}
.client:hover{background:var(--ink-2)}
.client img{display:block;max-height:54px;max-width:100%;width:auto;height:auto;
  object-fit:contain;filter:none;opacity:1;transition:transform .35s}
.client:hover img{transform:scale(1.03)}
/* Empty slot styling, remove once a real logo is dropped in */
.client--empty span{font-family:var(--body);font-weight:500;font-size:.69rem;letter-spacing:.2em;
  text-transform:uppercase;color:#A0A0AC;text-align:center;line-height:1.9}
/* ===========================================================================
   Interactive hero: the mixer
   =========================================================================== */
/* ---------- video backdrop ----------
   Drop a file at img/hero.mp4 and it plays behind everything.
   With no file present the stage simply stays dark, nothing breaks. */
.stage__vid{position:absolute;inset:0;z-index:0;overflow:hidden;background:var(--ink-2)}
.stage__vid video{width:100%;height:100%;object-fit:cover;opacity:.82;
  transition:opacity 1.2s ease}
.stage__vid.ready video{opacity:.88}
.stage__vid::after{content:'';position:absolute;inset:0;
  background:linear-gradient(180deg,rgba(13,13,15,.58) 0%,rgba(13,13,15,.16) 38%,rgba(13,13,15,.82) 100%)}
.stage__vid.empty{background:
  radial-gradient(90% 80% at 75% 15%,rgba(255,8,235,.10),transparent 58%),
  radial-gradient(80% 80% at 15% 88%,rgba(1,177,244,.10),transparent 58%),var(--ink-2)}

.stage{position:relative;min-height:100svh;display:grid;
  grid-template-rows:1fr auto;padding:calc(var(--pad) + 3rem) var(--pad) 0;overflow:hidden}

/* live spectrum sits behind everything */
#viz{position:absolute;left:0;right:0;bottom:0;height:56%;width:100%;pointer-events:none;
  z-index:0;opacity:1}
.stage::before{content:'';position:absolute;inset:0;z-index:1;pointer-events:none;
  background:linear-gradient(180deg,var(--ink) 0%,rgba(13,13,15,.55) 34%,rgba(13,13,15,0) 60%)}

/* cursor glow */
.glow{position:fixed;top:0;left:0;width:640px;height:640px;margin:-320px 0 0 -320px;
  border-radius:50%;pointer-events:none;z-index:0;opacity:0;transition:opacity .6s;
  background:radial-gradient(circle,rgba(144,86,239,.13),transparent 62%);
  will-change:transform}
body.hasglow .glow{opacity:1}
@media(hover:none){.glow{display:none}}

.stage__top{position:relative;z-index:3;display:grid;grid-template-columns:repeat(12,1fr);
  gap:1.5rem;align-content:center;align-items:center}
.stage__brand{grid-column:1/span 7}
@media(max-width:1000px){.stage__brand{grid-column:1/-1}}

.stage__mark{height:clamp(54px,6vw,86px);margin-bottom:1.4rem;
  filter:drop-shadow(0 0 26px rgba(255,8,235,.35))}
.stage h1{margin:0;font-family:var(--display);font-weight:900;
  font-size:clamp(3rem,8.6vw,7rem);line-height:.88;letter-spacing:-.05em}
.stage__tag{margin:1.4rem 0 0;font-family:var(--display);font-weight:700;
  font-size:clamp(1.1rem,2vw,1.6rem);letter-spacing:-.03em;max-width:22ch;line-height:1.2}
.stage__tag em{font-style:normal;background:var(--fader-x);
  -webkit-background-clip:text;background-clip:text;color:transparent}
.stage__sub{margin:1.2rem 0 0;max-width:44ch;color:#DADAE2;font-size:1rem}

/* ---------- the mixer panel ---------- */
.mixer::before{content:'';position:absolute;inset:-1.5rem -2rem -2rem -2rem;z-index:-1;
  background:radial-gradient(70% 130% at 50% 60%,rgba(13,13,15,.86),rgba(13,13,15,0) 72%)}
.mixer{position:relative;z-index:3;display:grid;grid-template-columns:auto 1fr;
  gap:clamp(1.2rem,3vw,2.6rem);align-items:end;
  padding:1.6rem 0 clamp(1.6rem,4vh,2.6rem);margin-top:clamp(2rem,5vh,3.5rem)}
@media(max-width:760px){.mixer{grid-template-columns:1fr;gap:1.4rem}}

.pb{display:inline-flex;align-items:center;gap:.9rem;border:0;cursor:pointer;
  background:transparent;color:var(--bone);padding:0;font-family:inherit}
.pb__i{position:relative;width:60px;height:60px;flex:none;border-radius:50%;
  display:grid;place-items:center;background:var(--fader-x);
  transition:transform .3s cubic-bezier(.2,.8,.3,1)}
.pb:hover .pb__i{transform:scale(1.08)}
.pb__i::after{content:'';position:absolute;inset:-6px;border-radius:50%;
  border:1px solid rgba(255,8,235,.45);opacity:0;transition:opacity .3s}
.pb:hover .pb__i::after{opacity:1}
.pb__g{width:0;height:0;border-left:15px solid #0D0D0F;
  border-top:10px solid transparent;border-bottom:10px solid transparent;margin-left:4px}
.mixer.live .pb__g{width:14px;height:16px;border:0;margin:0;
  background:linear-gradient(90deg,#0D0D0F 0 5px,transparent 5px 9px,#0D0D0F 9px)}
.pb__t{font-family:var(--body);font-weight:500;font-size:.87rem;letter-spacing:.16em;
  text-transform:uppercase;text-align:left}
.pb__h{display:block;font-weight:400;letter-spacing:.04em;text-transform:none;
  font-size:.87rem;color:var(--mute);margin-top:.25rem}

/* pulsing ring while playing */
.mixer.live .pb__i{animation:pulse 1.94s ease-out infinite}
@keyframes pulse{
  0%{box-shadow:0 0 0 0 rgba(255,8,235,.45)}
  70%{box-shadow:0 0 0 22px rgba(255,8,235,0)}
  100%{box-shadow:0 0 0 0 rgba(255,8,235,0)}
}
@media(prefers-reduced-motion:reduce){.mixer.live .pb__i{animation:none}}

.chs{display:grid;grid-template-columns:repeat(4,minmax(0,86px));gap:clamp(.6rem,1.6vw,1.1rem);
  justify-content:end}
@media(max-width:760px){.chs{grid-template-columns:repeat(4,1fr);justify-content:stretch}}

.ch{position:relative;display:grid;justify-items:center;gap:.6rem}
.ch__track{position:relative;width:100%;height:clamp(84px,13vh,132px);
  background:rgba(255,255,255,.05);border:1px solid var(--hair);overflow:hidden}
.ch__fill{position:absolute;left:0;right:0;bottom:0;height:calc(var(--v,.6) * 100%);
  background:var(--fader-x);opacity:.9;transition:height .06s linear}
.ch__cap{position:absolute;left:0;right:0;height:9px;
  bottom:calc(var(--v,.6) * 100% - 4px);background:var(--bone);
  box-shadow:0 0 14px rgba(255,255,255,.35);transition:bottom .06s linear}
.ch input{position:absolute;inset:0;width:100%;height:100%;margin:0;cursor:ns-resize;
  opacity:0;-webkit-appearance:slider-vertical;writing-mode:vertical-lr;direction:rtl}
.ch__n{font-family:var(--body);font-weight:500;font-size:.71rem;letter-spacing:.18em;
  text-transform:uppercase;color:var(--mute)}
.ch:hover .ch__n,.ch:focus-within .ch__n{color:var(--bone)}
.ch:focus-within .ch__track{border-color:var(--cyan)}

.mixer.noaudio .pb{display:none}

.stage__hint{position:relative;z-index:3;text-shadow:0 2px 12px var(--ink);padding-bottom:1.1rem;
  font-family:var(--body);font-weight:500;font-size:.71rem;letter-spacing:.22em;
  text-transform:uppercase;color:#A9A9B5}

/* ---------- magnetic buttons ---------- */
.b{will-change:transform}

/* ---------- scroll progress ---------- */
.prog{position:fixed;top:0;left:0;height:2px;width:100%;transform-origin:0 50%;
  transform:scaleX(0);background:var(--fader-x);z-index:90}

/* ---------- reveal upgrade: stagger + slide ---------- */
.up{opacity:0;transform:translateY(22px);
  transition:opacity .8s cubic-bezier(.16,.8,.3,1),transform .8s cubic-bezier(.16,.8,.3,1)}
.up.in{opacity:1;transform:none}
@media(prefers-reduced-motion:reduce){.up{opacity:1;transform:none}}

/* ---------- index rows: sweep + scale ---------- */
.row{overflow:hidden}
.row__t{transition:transform .45s cubic-bezier(.2,.8,.3,1)}
.row:hover .row__t{transform:translateX(6px)}


/* ===========================================================================
   Media gallery: photographs and clips in a staggered editorial grid
   =========================================================================== */
.gal{padding:clamp(3.5rem,9vh,6.5rem) var(--pad);border-bottom:1px solid var(--hair)}
.gal__hd{display:grid;grid-template-columns:repeat(12,1fr);gap:1.5rem;
  margin-bottom:clamp(2rem,5vh,3rem)}
.gal__hd .lab{grid-column:1/span 3}
.gal__hd h2{grid-column:4/span 6;max-width:18ch}
@media(max-width:900px){.gal__hd .lab,.gal__hd h2{grid-column:1/-1}}

.gal__g{display:grid;grid-template-columns:repeat(12,1fr);gap:clamp(.6rem,1.2vw,1rem)}
.gal__i{position:relative;overflow:hidden;background:var(--ink-2);cursor:pointer}
.gal__i::before{content:'';position:absolute;inset:0;z-index:1;
  background:radial-gradient(110% 100% at 30% 20%,rgba(255,8,235,.10),transparent 60%),
             radial-gradient(100% 100% at 80% 90%,rgba(1,177,244,.10),transparent 60%)}
.gal__i img,.gal__i video{position:relative;z-index:2;width:100%;height:100%;object-fit:cover;
  transition:transform .8s cubic-bezier(.16,.8,.3,1),filter .5s}
.gal__i:hover img,.gal__i:hover video{transform:scale(1.05)}
/* Placeholder caption only. Must not match .tag, whose backdrop-filter would
   otherwise stretch across the whole image and blur the photograph. */
.gal__i > span:not(.tag){position:absolute;inset:0;z-index:3;display:grid;place-items:center;
  font-family:var(--body);font-weight:500;font-size:.69rem;letter-spacing:.2em;
  text-transform:uppercase;color:#A9A9B5;text-align:center;line-height:2;padding:1rem}
/* staggered sizes so it reads as a layout, not a contact sheet */
.gal__i:nth-child(1){grid-column:span 7;aspect-ratio:16/10}
.gal__i:nth-child(2){grid-column:span 5;aspect-ratio:4/5;align-self:end}
.gal__i:nth-child(3){grid-column:span 4;aspect-ratio:1/1}
.gal__i:nth-child(4){grid-column:span 4;aspect-ratio:1/1}
.gal__i:nth-child(5){grid-column:span 4;aspect-ratio:1/1}
@media(max-width:800px){
  .gal__i:nth-child(1){grid-column:span 12}
  .gal__i:nth-child(2){grid-column:span 12;aspect-ratio:4/3}
  .gal__i:nth-child(n+3){grid-column:span 6}
}
.gal__i .tag{position:absolute;left:.8rem;bottom:.8rem;z-index:4;
  font-family:var(--body);font-weight:500;font-size:.67rem;letter-spacing:.18em;
  text-transform:uppercase;color:var(--bone);background:rgba(13,13,15,.7);
  padding:.35rem .6rem;backdrop-filter:blur(6px)}

/* lightbox */
.lb{position:fixed;inset:0;z-index:200;background:rgba(8,8,10,.94);backdrop-filter:blur(10px);
  display:none;place-items:center;padding:clamp(1rem,4vw,3rem)}
.lb[data-open="true"]{display:grid}
.lb img,.lb video{max-width:100%;max-height:86vh;width:auto;height:auto}
.lb__x{position:absolute;top:1.2rem;right:1.4rem;background:none;border:0;color:var(--bone);
  font-family:var(--body);font-weight:500;font-size:.83rem;letter-spacing:.16em;
  text-transform:uppercase;cursor:pointer;padding:.6rem}

/* ===========================================================================
   INSTALL PROMPT
   =========================================================================== */
.install{position:fixed;left:0;right:0;bottom:0;z-index:150;
  padding:0 max(.8rem,env(safe-area-inset-left)) calc(.8rem + env(safe-area-inset-bottom)) max(.8rem,env(safe-area-inset-right));
  animation:slideup .5s cubic-bezier(.2,.8,.3,1)}
@keyframes slideup{from{transform:translateY(110%)}to{transform:none}}
@media(prefers-reduced-motion:reduce){.install{animation:none}}
.install__b{display:flex;align-items:center;gap:.9rem;max-width:520px;margin:0 auto;
  background:rgba(26,26,30,.97);backdrop-filter:blur(18px);border:1px solid var(--hair);
  padding:.85rem 1rem;box-shadow:0 18px 50px rgba(0,0,0,.6)}
.install__b img{border-radius:9px;flex:none}
.install__t{flex:1;min-width:0;line-height:1.35}
.install__t b{display:block;font-family:var(--display);font-weight:800;font-size:.97rem;
  letter-spacing:-.02em}
.install__t span{display:block;font-size:.87rem;color:var(--mute)}
.install .b{padding:.7rem 1rem;font-size:.78rem;flex:none}
.install__x{background:none;border:0;color:var(--mute);font-size:1.5rem;line-height:1;
  cursor:pointer;padding:.2rem .4rem;flex:none}
.install__x:hover{color:var(--bone)}
@media(max-width:420px){
  .install__b{gap:.7rem;padding:.75rem .8rem}
  .install__t b{font-size:.89rem}
  .install__t span{font-size:.8rem}
  .install .b{padding:.6rem .8rem;font-size:.74rem}
}

/* ===========================================================================
   DEVICE FIT
   Safe areas for notches and home indicators, plus behaviour that makes the
   installed app feel native rather than like a page in a frame.
   =========================================================================== */
:root{
  --sat:env(safe-area-inset-top);
  --sab:env(safe-area-inset-bottom);
  --sal:env(safe-area-inset-left);
  --sar:env(safe-area-inset-right);
}
body{overscroll-behavior-y:none;-webkit-tap-highlight-color:transparent}

.top{padding-top:calc(1.1rem + var(--sat));
  padding-left:max(var(--pad),var(--sal));padding-right:max(var(--pad),var(--sar))}
.stage{padding-top:calc(var(--pad) + 3rem + var(--sat));
  padding-left:max(var(--pad),var(--sal));padding-right:max(var(--pad),var(--sar))}
.phead,.sec,.idx,.gal,.clients,.spec,.say,.end,.foot,.split__txt{
  padding-left:max(var(--pad),var(--sal));padding-right:max(var(--pad),var(--sar))}
.foot{padding-bottom:calc(2.2rem + var(--sab))}
@media(max-width:1100px){.menu{padding-left:max(var(--pad),var(--sal));padding-right:max(var(--pad),var(--sar))}}

/* Touch targets: nothing interactive smaller than 44px on a touch device */
@media(hover:none){
  .menu a{min-height:48px;display:flex;align-items:center}
  .b{min-height:48px}
  .row{min-height:56px}
  .ch__track{min-height:120px}
  .burger{min-height:44px;min-width:44px}
}

/* Very small phones (SE and similar) */
@media(max-width:380px){
  .stage h1{font-size:2.55rem}
  .chs{gap:.45rem}
  .ch__n{font-size:.63rem;letter-spacing:.12em}
  .pb__i{width:52px;height:52px}
}

/* Short landscape phones: the full height hero would bury everything */
@media(max-height:520px) and (orientation:landscape){
  .stage{min-height:auto;padding-bottom:2rem}
  .stage h1{font-size:clamp(2rem,7vw,3.2rem)}
  .stage__mark{height:44px;margin-bottom:.8rem}
  .stage__sub{display:none}
  #viz{height:48%}
}

/* Tablets: the twelve column grid is too wide for two column splits */
@media(min-width:901px) and (max-width:1180px){
  .row__t{grid-column:2/span 5}
  .row__d{grid-column:7/span 4}
  .stage__brand{grid-column:1/span 9}
}

/* Large screens: stop lines running too long */
@media(min-width:1800px){
  :root{--pad:clamp(3rem,7vw,8rem)}
  .row__d,.split__txt p{max-width:62ch}
}

/* Installed app: no browser chrome, so give the top a little more room */
@media(display-mode:standalone){
  .top{background:rgba(18,18,20,.96)}
  .stage__hint{display:none}
}

/* Print */
@media print{
  .top,.install,.glow,.prog,.mixer,#viz,.pbar{display:none!important}
  body{background:#fff;color:#000}
  .up{opacity:1;transform:none}
}

/* ---------------------------------------------------------------------------
   FIXES FOUND IN DEVICE TESTING
   --------------------------------------------------------------------------- */

/* The cursor glow is 640px wide and fixed, which extended the document and
   caused horizontal scroll on phones. overflow-x:clip trims it without
   breaking position:sticky the way overflow-x:hidden would. */
html{overflow-x:clip}
/* iOS Safari locks vertical scrolling when both html and body carry a
   horizontal overflow rule. overflow-x:clip on html alone trims the stray
   pixels and leaves the page scrolling normally on a phone. */
html,body{height:auto;overflow-y:visible;-webkit-overflow-scrolling:touch}

/* Spec rows kept a 9rem minimum for the label, which left too little room for
   the value on narrow screens. Stack them instead. */
@media(max-width:560px){
  .kv{grid-template-columns:1fr;gap:.3rem;padding:.9rem 0}
  .kv dt{font-size:.74rem}
  .cd{grid-template-columns:1fr;gap:.3rem}
}
/* ===========================================================================
   COMPONENTS FOR THE PATHWAY POSITIONING
   =========================================================================== */

/* ---------- Big statement stats ---------- */
.stats{display:grid;grid-template-columns:repeat(auto-fit,minmax(180px,1fr));
  gap:1px;background:var(--hair);border-block:1px solid var(--hair)}
.stats div{background:var(--ink);padding:1.8rem 1.4rem}
.stats dt{font-family:var(--body);font-weight:500;font-size:.74rem;letter-spacing:.2em;
  text-transform:uppercase;color:var(--mute);margin-bottom:.6rem}
.stats dd{margin:0;font-family:var(--display);font-weight:900;letter-spacing:-.04em;
  font-size:clamp(1.6rem,3vw,2.3rem);line-height:1}
.stats .g{background:var(--fader-x);-webkit-background-clip:text;background-clip:text;
  color:transparent}

/* ---------- Pathway chain ---------- */
.path{display:grid;grid-template-columns:repeat(auto-fit,minmax(148px,1fr));gap:1px;
  background:var(--hair);border:1px solid var(--hair)}
.path__s{background:var(--ink);padding:1.6rem 1.2rem;position:relative;
  transition:background .3s}
.path__s:hover{background:var(--ink-2)}
.path__s b{display:block;font-family:var(--display);font-weight:800;font-size:1.02rem;
  letter-spacing:-.02em;margin:.7rem 0 .45rem}
.path__s span{font-size:.9rem;color:var(--mute);line-height:1.55}
.path__n{font-family:var(--display);font-weight:500;font-size:.76rem;letter-spacing:.2em;
  background:var(--fader-x);-webkit-background-clip:text;background-clip:text;color:transparent}

/* ---------- Discipline tiles ---------- */
.tiles{display:grid;grid-template-columns:repeat(auto-fit,minmax(210px,1fr));gap:1px;
  background:var(--hair);border:1px solid var(--hair)}
.tile{background:var(--ink);padding:1.7rem 1.4rem;display:flex;flex-direction:column;
  gap:.6rem;transition:background .3s}
.tile:hover{background:var(--ink-2)}
.tile h3{font-family:var(--display);font-weight:800;font-size:1.05rem;letter-spacing:-.02em}
.tile p{margin:0;color:var(--mute);font-size:.95rem;line-height:1.6}
.tile ul{list-style:none;margin:.2rem 0 0;padding:0;font-size:.9rem;color:var(--mute)}
.tile li{padding:.24rem 0}
.tile li::before{content:'';display:inline-block;width:5px;height:5px;margin-right:.6rem;
  vertical-align:middle;background:var(--fader)}

/* ---------- Success story cards ---------- */
.people{display:grid;grid-template-columns:repeat(auto-fit,minmax(250px,1fr));
  gap:clamp(1rem,2vw,1.6rem)}
.p{border:1px solid var(--hair);background:var(--ink-2);overflow:hidden;
  display:flex;flex-direction:column;transition:border-color .3s,transform .4s}
.p:hover{border-color:var(--magenta);transform:translateY(-3px)}
.p__img{aspect-ratio:4/3;background:var(--ink-3);position:relative;display:grid;place-items:center}
.p__img::before{content:'';position:absolute;inset:0;
  background:radial-gradient(110% 100% at 30% 20%,rgba(255,8,235,.12),transparent 60%),
             radial-gradient(100% 100% at 80% 90%,rgba(1,177,244,.12),transparent 60%)}
.p__img span{position:relative;font-family:var(--body);font-weight:500;font-size:.67rem;
  letter-spacing:.2em;text-transform:uppercase;color:#A9A9B5;text-align:center;padding:1rem}
.p__img img{width:100%;height:100%;object-fit:cover;position:relative}
.p__b{padding:1.3rem;display:flex;flex-direction:column;gap:.5rem;flex:1}
.p__b h3{font-family:var(--display);font-weight:800;font-size:1.15rem;letter-spacing:-.025em}
.p__r{font-family:var(--body);font-weight:500;font-size:.69rem;letter-spacing:.18em;
  text-transform:uppercase;background:var(--fader-x);-webkit-background-clip:text;
  background-clip:text;color:transparent}
.p__b p{margin:0;color:var(--mute);font-size:.93rem;line-height:1.6;flex:1}
.p__tags{display:flex;flex-wrap:wrap;gap:.35rem;margin-top:.3rem}
.p__tags span{font-size:.69rem;letter-spacing:.1em;text-transform:uppercase;
  border:1px solid var(--hair);padding:.28rem .5rem;color:var(--mute)}

/* ---------- Industry name wall (text, not logos) ---------- */
.names{display:flex;flex-wrap:wrap;gap:.5rem}
.names span{border:1px solid var(--hair);padding:.6rem .9rem;font-family:var(--display);
  font-weight:700;font-size:.97rem;letter-spacing:-.01em;color:#E0E0E6;
  transition:border-color .3s,color .3s}
.names span:hover{border-color:var(--magenta);color:var(--bone)}

/* ---------- Download buttons ---------- */
.dl{display:grid;gap:1px;background:var(--hair);border:1px solid var(--hair)}
.dl a{background:var(--ink);padding:1.2rem 1.4rem;display:flex;align-items:center;
  justify-content:space-between;gap:1rem;transition:background .3s}
.dl a:hover{background:var(--ink-2);text-decoration:none}
.dl b{font-family:var(--display);font-weight:800;font-size:1rem;letter-spacing:-.02em;
  display:block}
.dl small{color:var(--mute);font-size:.86rem}
.dl .ic{font-family:var(--display);color:var(--magenta);flex:none}

/* ---------- Safeguarding banner ---------- */
.safe{border:1px solid var(--hair);background:var(--ink-2);padding:clamp(1.4rem,3vw,2rem);
  display:grid;grid-template-columns:auto 1fr;gap:1.3rem;align-items:start}
.safe__i{width:34px;height:34px;flex:none;display:grid;place-items:center;
  background:var(--fader-x);color:#0D0D0F;font-family:var(--display);font-weight:900;
  font-size:1rem}
.safe h3{font-family:var(--display);font-weight:800;font-size:1.05rem;margin:0 0 .5rem}
.safe p{margin:0;color:var(--mute);font-size:.97rem}
@media(max-width:520px){.safe{grid-template-columns:1fr}}

/* ---------- Chill zone feature ---------- */
.chill{display:grid;grid-template-columns:repeat(auto-fit,minmax(260px,1fr));
  gap:clamp(1.5rem,3vw,3rem);align-items:center}

/* ---------- Quote block ---------- */
.pull{border-left:2px solid transparent;border-image:var(--fader) 1;padding-left:1.5rem;
  font-family:var(--display);font-weight:700;font-size:clamp(1.15rem,2vw,1.5rem);
  letter-spacing:-.025em;line-height:1.3;max-width:26ch}

/* ===========================================================================
   GROUPED NAVIGATION
   Eleven pages will not sit on one line, so related pages group into a panel.
   =========================================================================== */
.menu .has{position:relative}
/* Invisible bridge across the gap between the button and the panel.
   Without this, moving the pointer down leaves .has and the menu closes. */
.menu .has::after{content:'';position:absolute;top:100%;left:-70px;right:-70px;
  height:1.5rem;display:none}
.menu .has[data-open="true"]::after{display:block}
@media(max-width:1100px){.menu .has::after{display:none !important}}
.menu .has>button{background:none;border:0;cursor:pointer;color:var(--mute);
  font-family:var(--body);font-weight:500;font-size:.83rem;letter-spacing:.14em;
  text-transform:uppercase;padding:.2rem 0;display:inline-flex;align-items:center;gap:.4rem}
.menu .has>button:hover,.menu .has[data-open="true"]>button{color:var(--bone)}
.menu .has>button::after{content:'';width:5px;height:5px;border-right:1px solid currentColor;
  border-bottom:1px solid currentColor;transform:rotate(45deg) translateY(-2px);
  transition:transform .25s}
.menu .has[data-open="true"]>button::after{transform:rotate(225deg) translateY(-2px)}
.menu .sub{position:absolute;top:calc(100% + 1rem);left:50%;transform:translateX(-50%) translateY(-6px);
  min-width:210px;background:var(--ink-2);border:1px solid var(--hair);padding:.4rem;
  list-style:none;margin:0;opacity:0;visibility:hidden;transition:opacity .22s,transform .22s;
  box-shadow:0 20px 50px rgba(0,0,0,.55);z-index:80}
.menu .has[data-open="true"] .sub{opacity:1;visibility:visible;transform:translateX(-50%) translateY(0)}
.menu .sub li{margin:0}
.menu .sub a{display:block;padding:.7rem .9rem;font-size:.8rem;letter-spacing:.1em;
  color:var(--mute);border:0}
.menu .sub a:hover,.menu .sub a[aria-current]{color:var(--bone);background:var(--ink-3)}
.menu .sub a[aria-current]{border:0}

@media(max-width:1100px){
  .menu .has{width:100%}
  .menu .has>button{width:100%;justify-content:space-between;padding:.95rem 0;
    border-bottom:1px solid var(--hair);font-size:.86rem}
  .menu .sub{position:static;transform:none;opacity:1;visibility:visible;min-width:0;
    background:transparent;border:0;box-shadow:none;padding:0 0 .4rem 1rem;display:none}
  .menu .has[data-open="true"] .sub{display:block;transform:none}
  .menu .sub a{padding:.75rem 0;border-bottom:1px solid var(--hair);font-size:.9rem}
}

/* ===========================================================================
   FULL FOOTER
   =========================================================================== */
.bigfoot{border-top:1px solid var(--hair);padding:clamp(3rem,7vh,4.5rem) var(--pad) 0}
.bigfoot__g{display:grid;gap:2.2rem;grid-template-columns:repeat(auto-fit,minmax(180px,1fr));
  padding-bottom:2.5rem}
.bigfoot h4{font-family:var(--body);font-weight:500;font-size:.74rem;letter-spacing:.2em;
  text-transform:uppercase;color:var(--magenta);margin:0 0 1rem}
.bigfoot ul{list-style:none;margin:0;padding:0}
.bigfoot li{margin-bottom:.55rem}
.bigfoot a{color:var(--mute);font-size:.95rem}
.bigfoot a:hover{color:var(--bone)}
.bigfoot address{font-style:normal;color:var(--mute);font-size:.95rem;line-height:1.7}

/* ===========================================================================
   LESSONS: disciplines and levels
   =========================================================================== */
.disc{display:grid;grid-template-columns:repeat(auto-fit,minmax(178px,1fr));gap:1px;
  background:var(--hair);border:1px solid var(--hair)}
.disc a{background:var(--ink);padding:1.5rem 1.3rem;display:flex;flex-direction:column;
  gap:.5rem;transition:background .3s}
.disc a:hover{background:var(--ink-2);text-decoration:none}
.disc b{font-family:var(--display);font-weight:800;font-size:1.12rem;letter-spacing:-.025em}
.disc span{color:var(--mute);font-size:.9rem;line-height:1.55}
.disc em{font-style:normal;font-family:var(--body);font-weight:500;font-size:.67rem;
  letter-spacing:.18em;text-transform:uppercase;
  background:var(--fader-x);-webkit-background-clip:text;background-clip:text;color:transparent}

/* Level ladder */
.lv{display:grid;grid-template-columns:repeat(auto-fit,minmax(230px,1fr));gap:1px;
  background:var(--hair);border:1px solid var(--hair)}
.lv__c{background:var(--ink);padding:1.7rem 1.4rem;position:relative;overflow:hidden}
.lv__c::before{content:'';position:absolute;left:0;top:0;bottom:0;width:3px;
  background:var(--fader);opacity:.28;transition:opacity .3s}
.lv__c:hover::before{opacity:1}
.lv__c:nth-child(1)::before{opacity:.35}
.lv__c:nth-child(2)::before{opacity:.6}
.lv__c:nth-child(3)::before{opacity:1}
.lv__t{font-family:var(--body);font-weight:500;font-size:.69rem;letter-spacing:.2em;
  text-transform:uppercase;color:var(--mute)}
.lv__c h3{font-family:var(--display);font-weight:800;font-size:1.25rem;letter-spacing:-.03em;
  margin:.5rem 0 .3rem}
.lv__w{font-size:.89rem;color:var(--mute);margin:0 0 .9rem}
.lv__c ul{list-style:none;margin:0;padding:0;font-size:.9rem;color:var(--mute)}
.lv__c li{padding:.3rem 0;border-bottom:1px solid var(--hair)}
.lv__c li:last-child{border-bottom:0}

/* Meter bars showing progression */
.lv__m{display:flex;gap:3px;margin:.9rem 0 1rem}
.lv__m i{height:4px;flex:1;background:var(--track);border-radius:1px}
.lv__c:nth-child(1) .lv__m i:nth-child(-n+2){background:var(--fader-x)}
.lv__c:nth-child(2) .lv__m i:nth-child(-n+4){background:var(--fader-x)}
.lv__c:nth-child(3) .lv__m i{background:var(--fader-x)}

/* Four tiles in a three column grid leaves a dead cell. Force two up. */
.tiles--2{grid-template-columns:1fr 1fr}
@media(max-width:760px){.tiles--2{grid-template-columns:1fr}}

/* Three photo gallery: equal columns rather than the staggered five up layout */
.gal__g--3{grid-template-columns:repeat(3,1fr)}
.gal__g--3 .gal__i{grid-column:span 1 !important;aspect-ratio:4/5 !important;align-self:stretch !important}
@media(max-width:760px){
  .gal__g--3{grid-template-columns:1fr}
  .gal__g--3 .gal__i{aspect-ratio:4/3 !important}
}

/* ===========================================================================
   SELF HOSTED PLAYER
   =========================================================================== */
.pl{padding:clamp(3.5rem,9vh,6.5rem) var(--pad);border-bottom:1px solid var(--hair)}
.pl__hd{display:grid;grid-template-columns:repeat(12,1fr);gap:1.5rem;
  margin-bottom:clamp(1.8rem,4vh,2.6rem)}
.pl__hd .c6{grid-column:1/span 6}
.pl__hd .c5r{grid-column:8/span 5;align-self:end}
@media(max-width:900px){.pl__hd .c6,.pl__hd .c5r{grid-column:1/-1}}

.pl__box{border:1px solid var(--hair);background:var(--ink-2);overflow:hidden}
.pl__top{display:grid;grid-template-columns:auto 1fr auto;gap:clamp(1rem,2.5vw,2rem);
  align-items:center;padding:clamp(1.3rem,3vw,2rem)}
@media(max-width:700px){.pl__top{grid-template-columns:auto 1fr;gap:1rem}}

.pl__ctrl{display:flex;align-items:center;gap:.5rem}
.pl__b{width:44px;height:44px;border:1px solid var(--hair);background:transparent;
  color:var(--bone);cursor:pointer;display:grid;place-items:center;font-size:.95rem;
  transition:border-color .25s,background .25s}
.pl__b:hover{background:var(--ink-3);border-color:var(--magenta)}
.pl__b--main{width:56px;height:56px;border:0;background:var(--fader-x);color:#0D0D0F;
  transition:transform .25s cubic-bezier(.2,.8,.3,1)}
.pl__b--main:hover{transform:scale(1.06);background:var(--fader-x)}
.pl__b--main .i-play{width:0;height:0;border-left:14px solid #0D0D0F;
  border-top:9px solid transparent;border-bottom:9px solid transparent;margin-left:4px}
.pl__b--main .i-pause{display:none;width:12px;height:14px;
  background:linear-gradient(90deg,#0D0D0F 0 4px,transparent 4px 8px,#0D0D0F 8px)}
#player[data-playing="true"] .pl__b--main .i-play{display:none}
#player[data-playing="true"] .pl__b--main .i-pause{display:block}

.pl__meta{min-width:0}
.pl__ti{font-family:var(--display);font-weight:800;font-size:1.1rem;letter-spacing:-.025em;
  white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.pl__ar2{font-size:.89rem;color:var(--mute);white-space:nowrap;overflow:hidden;
  text-overflow:ellipsis}
.pl__viz{width:clamp(120px,22vw,260px);height:46px}
@media(max-width:700px){.pl__viz{display:none}}

.pl__bar{position:relative;height:3px;background:var(--track);cursor:pointer;margin:0 clamp(1.3rem,3vw,2rem) 0}
.pl__seek{position:absolute;left:0;top:0;bottom:0;width:0;background:var(--fader-x)}
.pl__time{font-family:var(--body);font-weight:500;font-size:.71rem;letter-spacing:.14em;
  color:var(--mute);padding:.7rem clamp(1.3rem,3vw,2rem) 0;display:block}

.pl__list{list-style:none;margin:0;padding:0;border-top:1px solid var(--hair);
  max-height:290px;overflow-y:auto}
.pl__list li{border-bottom:1px solid var(--hair)}
.pl__list li:last-child{border-bottom:0}
.pl__list button{width:100%;background:transparent;border:0;cursor:pointer;text-align:left;
  display:grid;grid-template-columns:2.6rem 1fr auto;gap:1rem;align-items:center;
  padding:.95rem clamp(1.3rem,3vw,2rem);color:var(--mute);transition:background .2s,color .2s}
.pl__list button:hover{background:var(--ink-3);color:var(--bone)}
.pl__list li[data-on="true"] button{color:var(--bone);background:var(--ink-3)}
.pl__n{font-family:var(--body);font-weight:500;font-size:.71rem;letter-spacing:.16em;
  background:var(--fader-x);-webkit-background-clip:text;background-clip:text;color:transparent}
.pl__nm{font-size:.99rem;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.pl__ar{font-size:.9rem;color:var(--mute);white-space:nowrap}
@media(max-width:520px){.pl__list button{grid-template-columns:2rem 1fr}.pl__ar{display:none}}

.pl__empty{padding:clamp(2rem,5vw,3rem);text-align:center}
.pl__empty b{display:block;font-family:var(--display);font-weight:800;font-size:1.1rem;
  margin-bottom:.5rem}
.pl__empty span{font-size:.95rem;color:var(--mute)}

@media(max-width:1100px){
  .menu{position:fixed;inset:64px 0 auto 0;flex-direction:column;gap:0;background:var(--ink-2);
    border-bottom:1px solid var(--hair);padding:.4rem var(--pad) 1.4rem;display:none;z-index:70}
  .menu[data-open="true"]{display:flex}
  .menu a{padding:.95rem 0;border-bottom:1px solid var(--hair);font-size:.86rem}
}

/* ---------- site wide music control: fixed, quiet, always reachable ---------- */
.amb{position:fixed;left:var(--pad);bottom:1.1rem;z-index:80}
.amb__b{display:flex;align-items:center;gap:.6rem;padding:.5rem .95rem .5rem .75rem;cursor:pointer;
  background:rgba(20,20,23,.82);backdrop-filter:blur(14px);border:1px solid var(--hair);border-radius:999px;
  color:var(--bone);font-family:var(--body);transition:border-color .25s,background .25s}
.amb__b:hover{border-color:var(--violet);background:rgba(28,28,33,.9)}
.amb__i{display:flex;align-items:flex-end;gap:2px;height:14px;width:16px}
.amb__i i{display:block;width:3px;height:4px;border-radius:2px;background:var(--mute);transition:background .25s}
.amb[data-on="true"] .amb__i i{background:var(--fader)}
.amb[data-on="true"] .amb__i i:nth-child(1){animation:ambb .9s ease-in-out infinite}
.amb[data-on="true"] .amb__i i:nth-child(2){animation:ambb .9s ease-in-out infinite .15s}
.amb[data-on="true"] .amb__i i:nth-child(3){animation:ambb .9s ease-in-out infinite .3s}
.amb[data-on="true"] .amb__i i:nth-child(4){animation:ambb .9s ease-in-out infinite .45s}
@keyframes ambb{0%,100%{height:4px}50%{height:14px}}
.amb__t{display:flex;flex-direction:column;align-items:flex-start;line-height:1.1;text-align:left}
.amb__lab{font-weight:500;font-size:.67rem;letter-spacing:.22em;text-transform:uppercase;color:var(--mute)}
.amb__nm{font-weight:500;font-size:.83rem;letter-spacing:.02em;color:var(--bone);max-width:11rem;
  overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
@media(prefers-reduced-motion:reduce){.amb[data-on="true"] .amb__i i{animation:none;height:10px}}
@media(max-width:600px){
  .amb{left:auto;right:1rem;bottom:1rem}
  .amb__b{padding:.45rem .8rem .45rem .65rem}
  .amb__nm{max-width:7rem}
}

/* Sound is on by default. When the browser refuses to start it before the
   visitor has interacted, the control says so and asks for one tap. */
.amb[data-waiting="true"] .amb__b{border-color:var(--violet);animation:ambwait 2.4s ease-in-out infinite}
.amb[data-waiting="true"] .amb__nm{color:var(--bone)}
.amb[data-waiting="true"] .amb__i i{background:var(--mute);height:4px}
@keyframes ambwait{0%,100%{box-shadow:0 0 0 0 rgba(144,86,239,0)}50%{box-shadow:0 0 0 6px rgba(144,86,239,.14)}}
@media(prefers-reduced-motion:reduce){.amb[data-waiting="true"] .amb__b{animation:none}}

/* Logos that are dark artwork on a light background: give them a light panel
   rather than trying to brighten black, and leave the colours alone. */
.client--onwhite{background:#FFF}
.client--onwhite:hover{background:#FFF}
.client--onwhite img{background:none;padding:0;border-radius:0;max-height:50px}

/* A real photograph dropped into a .shot slot */
.shot img{position:relative;z-index:1;width:100%;height:100%;object-fit:cover;display:block}

/* Contact form: consent ticks, spam trap, result message (added v30) */
.tick{display:grid;grid-template-columns:1.25rem 1fr;gap:.9rem;align-items:start;cursor:pointer;
  font-size:1rem;line-height:1.5;color:var(--bone)}
.tick input{appearance:none;-webkit-appearance:none;width:1.25rem;height:1.25rem;margin:.12rem 0 0;
  border:1px solid var(--mute);border-radius:0;background:transparent;display:grid;place-content:center;cursor:pointer}
.tick input::after{content:'';width:.7rem;height:.7rem;background:var(--fader);transform:scale(0);transition:transform .15s}
.tick input:checked{border-color:var(--bone)}
.tick input:checked::after{transform:scale(1)}
.tick input:focus-visible{outline:2px solid var(--cyan);outline-offset:3px}
.consent{border:0;margin:0;padding:1.4rem 0 0;border-top:1px solid var(--hair);display:grid;gap:1rem}
.consent legend{float:left;width:100%;padding:0;font-family:var(--body);font-weight:500;font-size:.8rem;letter-spacing:.16em;
  text-transform:uppercase;color:var(--mute);margin-bottom:1rem}
.consent__note{margin:0;font-size:.89rem;line-height:1.6;color:var(--mute)}
.consent__note a{color:var(--bone);text-decoration:underline;text-underline-offset:3px}
.hp{position:absolute!important;left:-9999px!important;width:1px;height:1px;overflow:hidden}
.formstatus{padding:1rem 1.2rem;border:1px solid var(--hair);border-left:3px solid var(--cyan);background:var(--ink-2);font-size:1.02rem}
.formstatus.is-bad{border-left-color:var(--magenta)}
.formstatus:focus{outline:none}
#form,.formstatus{scroll-margin-top:6.5rem}
.b[disabled]{opacity:.6;cursor:wait}

/* Privacy page */
.legal{max-width:72ch}
.legal h2{font-size:1.35rem;margin:2.6rem 0 .8rem}
.legal p,.legal li{color:#DADAE2;font-size:1.02rem;line-height:1.7}
.legal a{color:var(--bone);text-decoration:underline;text-underline-offset:3px}
.legal ul{padding-left:1.2rem}


/* ===========================================================================
   LOCATIONS: full bleed studio photograph behind the section
   The photo sits dark and graded so the list stays readable; the left side
   lets the room show through, the right side carries the text on glass.
   =========================================================================== */
.loc{position:relative;overflow:hidden;isolation:isolate;
  padding-top:clamp(5rem,14vh,9rem);padding-bottom:clamp(5rem,14vh,9rem)}
.loc__bg{position:absolute;inset:0;z-index:-1;pointer-events:none}
.loc__bg::before,.loc__bg::after{content:"";position:absolute;inset:0}
.loc__bg::before{
  background:url(../img/locations-studio.jpg?v=3) 20% 14%/cover no-repeat;
  filter:saturate(.95) contrast(1.05)}
.loc__bg::after{background:
  linear-gradient(180deg,var(--ink) 0%,rgba(13,13,15,0) 18%,rgba(13,13,15,0) 78%,var(--ink) 100%),
  linear-gradient(90deg,rgba(13,13,15,.38) 0%,rgba(13,13,15,.52) 38%,rgba(13,13,15,.66) 58%,rgba(13,13,15,.74) 100%),
  radial-gradient(60% 70% at 18% 30%,rgba(1,177,244,.14),transparent 70%),
  radial-gradient(50% 60% at 80% 95%,rgba(144,86,239,.18),transparent 70%)}
/* slow settle as it scrolls into view, overriding the generic .up lift */
.loc__bg.up{opacity:0;transform:scale(1.08);
  transition:opacity 1.4s ease,transform 2.6s cubic-bezier(.2,.7,.2,1)}
.loc__bg.up.in{opacity:1;transform:scale(1)}
@media(prefers-reduced-motion:reduce){.loc__bg.up{opacity:1;transform:none}}
.loc h2{text-shadow:0 2px 30px rgba(0,0,0,.55)}
.loc dd{text-shadow:0 1px 12px rgba(0,0,0,.6)}
.loc .lab{color:rgba(245,245,245,.72)}
.loc__cap{display:flex;align-items:center;gap:.6rem;margin:1.6rem 0 0;
  font-size:.83rem;letter-spacing:.14em;text-transform:uppercase;color:rgba(245,245,245,.6)}
.loc__dot{width:7px;height:7px;border-radius:50%;background:var(--cyan);flex:none;
  box-shadow:0 0 0 4px rgba(1,177,244,.18),0 0 14px rgba(1,177,244,.8)}
.loc dl{margin:0;padding:.4rem clamp(1.1rem,2.2vw,2rem);
  background:rgba(13,13,15,.4);border:1px solid var(--hair);border-radius:4px;
  -webkit-backdrop-filter:blur(6px) saturate(1.15);backdrop-filter:blur(6px) saturate(1.15)}
.loc .kv:first-child{border-top:0}
.loc .kv:last-child{border-bottom:0}
.loc .kv{border-bottom-color:var(--hair)}
.loc .kv dt{color:rgba(245,245,245,.62)}
.loc .kv:first-child dt{color:var(--cyan)}
@media(max-width:900px){
  .loc__bg::before{background-image:url(../img/locations-studio-sm.jpg?v=3);background-position:30% 30%}
  .loc__bg::after{background:
    linear-gradient(180deg,var(--ink) 0%,rgba(13,13,15,.35) 14%,rgba(13,13,15,.5) 36%,rgba(13,13,15,.72) 60%,var(--ink) 100%),
    radial-gradient(80% 40% at 30% 20%,rgba(1,177,244,.14),transparent 70%)}
  .loc__cap{margin-bottom:1.2rem}
}

/* ===========================================================================
   PHOTO SECTIONS (.phx): a photograph fills the left column behind the
   heading. The top is darkened so the heading and intro read cleanly, the
   subject shows through below, and the photo fades to black before the lists.
   Set the image per section with a modifier (.phx--dj).
   =========================================================================== */
.phx{position:relative;overflow:hidden;isolation:isolate;
  padding-top:clamp(5rem,13vh,8.5rem);padding-bottom:clamp(5rem,13vh,8.5rem)}
.phx .sec__g > .c4{min-height:clamp(24rem,46vh,31rem)}
.phx__bg{position:absolute;top:0;bottom:0;left:0;width:47%;z-index:-1;pointer-events:none}
.phx__bg::before,.phx__bg::after{content:"";position:absolute;inset:0}
.phx__bg::before{background:var(--phx-img) var(--phx-pos,70% 50%)/cover no-repeat;filter:saturate(1.05) contrast(1.06)}
.phx__bg::after{background:
  linear-gradient(90deg,rgba(13,13,15,.25) 0%,rgba(13,13,15,0) 30%,rgba(13,13,15,0) 62%,var(--ink) 100%),
  linear-gradient(180deg,var(--ink) 0%,rgba(13,13,15,.82) 20%,rgba(13,13,15,.55) 42%,rgba(13,13,15,.18) 66%,rgba(13,13,15,.35) 86%,var(--ink) 100%),
  radial-gradient(60% 50% at 60% 75%,rgba(255,8,235,.10),transparent 70%)}
.phx__bg.up{opacity:0;transform:scale(1.06);transform-origin:50% 70%;
  transition:opacity 1.4s ease,transform 2.6s cubic-bezier(.2,.7,.2,1)}
.phx__bg.up.in{opacity:1;transform:scale(1)}
@media(prefers-reduced-motion:reduce){.phx__bg.up{opacity:1;transform:none}}
.phx h2{text-shadow:0 2px 30px rgba(0,0,0,.6)}
.phx .sec__lead{color:rgba(245,245,245,.8);text-shadow:0 1px 14px rgba(0,0,0,.8)}
.phx--dj{--phx-img:url(../img/dj-lessons-bg.jpg);--phx-pos:94% 50%}
.phx--mc{--phx-img:url(../img/mcing-bg.jpg);--phx-pos:82% 22%}
.phx--rap{--phx-img:url(../img/rapping-bg.jpg);--phx-pos:40% 30%}
.phx--prod{--phx-img:url(../img/gallery/production-desk-session.jpg);--phx-pos:50% 62%}
.phx--courses{--phx-img:url(../img/courses-bg.jpg);--phx-pos:40% 4%}
.phx--courses .phx__bg::after{background:
  linear-gradient(90deg,rgba(13,13,15,.55) 0%,rgba(13,13,15,.2) 45%,rgba(13,13,15,0) 62%,var(--ink) 100%),
  linear-gradient(180deg,var(--ink) 0%,rgba(13,13,15,.62) 16%,rgba(13,13,15,.5) 40%,rgba(13,13,15,.3) 62%,rgba(13,13,15,.4) 84%,var(--ink) 100%)}
@media(max-width:900px){
  .phx__bg{width:auto;right:0;bottom:auto;height:min(118vw,640px)}
  .phx__bg::after{background:
    linear-gradient(180deg,var(--ink) 0%,rgba(13,13,15,.86) 24%,rgba(13,13,15,.6) 44%,rgba(13,13,15,.15) 68%,var(--ink) 100%)}
  .phx--dj{--phx-img:url(../img/dj-lessons-bg-sm.jpg);--phx-pos:84% 50%}
  .phx--mc{--phx-img:url(../img/mcing-bg-sm.jpg);--phx-pos:82% 30%}
  .phx--rap{--phx-img:url(../img/rapping-bg-sm.jpg);--phx-pos:50% 30%}
  .phx--prod{--phx-img:url(../img/production-bg-sm.jpg);--phx-pos:50% 60%}
  .phx--courses{--phx-img:url(../img/courses-bg-sm.jpg);--phx-pos:40% 50%}
  .phx .sec__g > .c4{min-height:min(104vw,560px)}
}
@media(max-width:900px){
  .phx--courses .phx__bg::after{background:
    linear-gradient(180deg,var(--ink) 0%,rgba(13,13,15,.7) 22%,rgba(13,13,15,.5) 44%,rgba(13,13,15,.2) 68%,var(--ink) 100%)}
  .phx--courses{--phx-pos:40% 8%}
}

/* Artist development: bright daylight photo, so it sits further down and darker at the top */
.phx--artist{--phx-img:url(../img/artist-dev-bg.jpg);--phx-pos:55% 40%}
.phx--artist .phx__bg::before{filter:saturate(1.05) contrast(1.05) brightness(.8)}
@media(max-width:900px){.phx--artist{--phx-img:url(../img/artist-dev-bg-sm.jpg);--phx-pos:55% 30%}}
/* Twelve week courses: show the whole portrait photo (screen AND decks), feathered at the sides */
.phx--courses .phx__bg::before{inset:auto;top:0;bottom:0;left:50%;width:auto;aspect-ratio:3/4;transform:translateX(-50%);
  --phx-pos:50% 50%;background-size:cover;
  -webkit-mask-image:linear-gradient(90deg,transparent 0%,#000 14%,#000 86%,transparent 100%);
          mask-image:linear-gradient(90deg,transparent 0%,#000 14%,#000 86%,transparent 100%)}
.phx--courses .phx__bg::after{background:
  linear-gradient(90deg,rgba(13,13,15,.35) 0%,rgba(13,13,15,0) 30%,rgba(13,13,15,0) 70%,var(--ink) 100%),
  linear-gradient(180deg,var(--ink) 0%,rgba(13,13,15,.6) 14%,rgba(13,13,15,.45) 38%,rgba(13,13,15,.1) 60%,rgba(13,13,15,.1) 90%,var(--ink) 100%)}
@media(max-width:900px){
  .phx--courses .phx__bg::after{background:
    linear-gradient(180deg,var(--ink) 0%,rgba(13,13,15,.7) 18%,rgba(13,13,15,.45) 40%,rgba(13,13,15,.1) 62%,rgba(13,13,15,.1) 90%,var(--ink) 100%)}
}
/* Artist development: show the whole group shot at its natural width, below the intro, feathered edges */
.phx--artist .phx__bg::before{inset:auto;left:0;right:0;top:30%;aspect-ratio:1.4/1;background-size:cover;--phx-pos:50% 50%;
  -webkit-mask-image:linear-gradient(180deg,transparent 0%,#000 16%,#000 82%,transparent 100%);
          mask-image:linear-gradient(180deg,transparent 0%,#000 16%,#000 82%,transparent 100%)}
.phx--artist .phx__bg::after{background:
  linear-gradient(90deg,rgba(13,13,15,.2) 0%,rgba(13,13,15,0) 30%,rgba(13,13,15,0) 62%,var(--ink) 100%),
  linear-gradient(180deg,var(--ink) 0%,rgba(13,13,15,.6) 30%,rgba(13,13,15,.15) 50%,rgba(13,13,15,.1) 85%,var(--ink) 100%)}
@media(max-width:900px){
  .phx--artist .phx__bg::before{top:34%}
  .phx--artist .phx__bg::after{background:linear-gradient(180deg,var(--ink) 0%,rgba(13,13,15,.6) 30%,rgba(13,13,15,.15) 55%,var(--ink) 100%)}
}
@media(max-width:900px){
  .phx--artist .phx__bg{height:min(150vw,720px)}
  .phx--artist .phx__bg::before{top:44%}
  .phx--artist .sec__g > .c4{min-height:min(142vw,680px)}
  .phx--artist .phx__bg::after{background:linear-gradient(180deg,var(--ink) 0%,rgba(13,13,15,.6) 36%,rgba(13,13,15,.1) 60%,var(--ink) 100%)}
}

/* Studio time: whole portrait photo so the decks and mixer stay in view, feathered at the sides */
.phx--studio{--phx-img:url(../img/studio-time-bg.jpg)}
.phx--studio .phx__bg::before{inset:auto;top:0;bottom:0;left:50%;width:auto;aspect-ratio:1080/1336;transform:translateX(-50%);
  --phx-pos:50% 50%;background-size:cover;
  -webkit-mask-image:linear-gradient(90deg,transparent 0%,#000 14%,#000 86%,transparent 100%);
          mask-image:linear-gradient(90deg,transparent 0%,#000 14%,#000 86%,transparent 100%)}
.phx--studio .phx__bg::after{background:
  linear-gradient(90deg,rgba(13,13,15,.35) 0%,rgba(13,13,15,0) 30%,rgba(13,13,15,0) 70%,var(--ink) 100%),
  linear-gradient(180deg,var(--ink) 0%,rgba(13,13,15,.6) 14%,rgba(13,13,15,.45) 32%,rgba(13,13,15,.08) 55%,rgba(13,13,15,.08) 90%,var(--ink) 100%)}
@media(max-width:900px){
  .phx--studio{--phx-img:url(../img/studio-time-bg-sm.jpg)}
  .phx--studio .phx__bg::after{background:
    linear-gradient(180deg,var(--ink) 0%,rgba(13,13,15,.7) 18%,rgba(13,13,15,.45) 38%,rgba(13,13,15,.08) 60%,rgba(13,13,15,.08) 90%,var(--ink) 100%)}
}
/* Twelve week courses: larger photo, wider (square crop keeps screen and decks) and a taller section */
@media(min-width:901px){
  .phx--courses .phx__bg{width:52%}
  .phx--courses .phx__bg::before{aspect-ratio:1/1;--phx-pos:50% 56%;left:45%;-webkit-mask-image:linear-gradient(90deg,transparent 0%,#000 12%,#000 72%,transparent 100%);mask-image:linear-gradient(90deg,transparent 0%,#000 12%,#000 72%,transparent 100%)}
  .phx--courses .sec__g > .c4{min-height:clamp(28rem,58vh,36rem)}
}
/* Studio time v2: head cropped out, larger and wider photo, taller section */
.phx--studio{--phx-img:url(../img/studio-time-bg2.jpg)}
.phx--studio .phx__bg::before{aspect-ratio:1080/996}
@media(min-width:901px){
  .phx--studio .phx__bg{width:52%}
  .phx--studio .phx__bg::before{left:45%;-webkit-mask-image:linear-gradient(90deg,transparent 0%,#000 12%,#000 72%,transparent 100%);mask-image:linear-gradient(90deg,transparent 0%,#000 12%,#000 72%,transparent 100%)}
  .phx--studio .sec__g > .c4{min-height:clamp(28rem,58vh,36rem)}
}
@media(max-width:900px){.phx--studio{--phx-img:url(../img/studio-time-bg2-sm.jpg)}}

/* ===========================================================================
   PRICE CARDS (lessons page rates)
   =========================================================================== */
.price{display:grid;grid-template-columns:repeat(2,1fr);gap:1px;background:var(--hair);border:1px solid var(--hair)}
.price__card{position:relative;background:var(--ink);padding:clamp(1.5rem,2.6vw,2.2rem);display:flex;flex-direction:column;
  transition:background .3s ease}
.price__card::before{content:"";position:absolute;left:0;right:0;top:0;height:2px;background:var(--fader-x);
  transform:scaleX(0);transform-origin:left;transition:transform .5s cubic-bezier(.2,.7,.2,1)}
.price__card:hover{background:var(--ink-2)}
.price__card:hover::before,.price__card--key::before{transform:scaleX(1)}
.price__card--key{background:linear-gradient(180deg,rgba(144,86,239,.10),rgba(13,13,15,0) 70%),var(--ink)}
.price__name{margin:0;font-family:var(--body);font-weight:500;font-size:.8rem;letter-spacing:.2em;text-transform:uppercase;color:var(--mute)}
.price__fig{margin:1.1rem 0 0;display:flex;align-items:baseline;gap:.6rem;flex-wrap:wrap;
  font-family:var(--display);font-weight:900;font-size:clamp(2.4rem,3.6vw,3.2rem);letter-spacing:-.04em;line-height:1}
.price__fig small{font-family:var(--body);font-weight:400;font-size:.89rem;letter-spacing:0;color:var(--mute)}
.price__card--key .price__fig{background:var(--fader-x);-webkit-background-clip:text;background-clip:text;color:transparent}
.price__card--key .price__fig small{-webkit-text-fill-color:var(--mute)}
.price__desc{margin:1rem 0 0;color:#E0E0E6;font-size:1rem;line-height:1.6}
.price__sub{margin:.9rem 0 0;font-size:.84rem;color:var(--cyan);letter-spacing:.02em}
.price__tags{list-style:none;margin:1.1rem 0 0;padding:0;display:flex;flex-wrap:wrap;gap:.45rem}
.price__tags li{font-size:.83rem;letter-spacing:.06em;padding:.35rem .7rem;border:1px solid var(--hair);border-radius:999px;color:#E0E0E6}
@media(max-width:700px){.price{grid-template-columns:1fr}}

/* Social platform tiles (What you can do, section 03) */
.socials{list-style:none;margin:2.2rem 0 0;padding:0;display:grid;grid-template-columns:repeat(5,1fr);gap:1px;
  background:var(--hair);border:1px solid var(--hair);max-width:30rem}
.socials li{position:relative;background:var(--ink);aspect-ratio:1/1;display:grid;place-items:center;overflow:hidden;
  transition:background .35s ease}
.socials svg{width:42%;height:42%;fill:var(--mute);transition:fill .35s ease,transform .35s cubic-bezier(.2,.7,.2,1)}
.socials span{position:absolute;bottom:.45rem;left:0;right:0;text-align:center;font-size:.64rem;letter-spacing:.14em;
  text-transform:uppercase;color:var(--mute);opacity:0;transform:translateY(4px);transition:opacity .3s ease,transform .3s ease}
.socials li::after{content:"";position:absolute;left:0;right:0;bottom:0;height:2px;background:var(--fader-x);
  transform:scaleX(0);transform-origin:left;transition:transform .45s cubic-bezier(.2,.7,.2,1)}
.socials li:hover{background:var(--ink-2)}
.socials li:hover svg{fill:var(--bone);transform:translateY(-6px) scale(1.05)}
.socials li:hover span{opacity:1;transform:none}
.socials li:hover::after{transform:scaleX(1)}
.socials li:first-child svg{fill:var(--bone)}
@media(hover:none){.socials span{opacity:1;transform:none}.socials svg{transform:translateY(-5px)}}
@media(max-width:900px){.socials{max-width:none}}

/* Success stories: all five people on one row on desktop */
@media(min-width:1101px){.people{grid-template-columns:repeat(auto-fit,minmax(250px,1fr))}.people:has(> :nth-child(5)){grid-template-columns:repeat(5,1fr)}.people:not(:has(> :nth-child(4))){grid-template-columns:repeat(3,1fr)}
  .people .p__b{padding:1.3rem 1.2rem}.people .p__b h3{font-size:1rem}.people .p__b p{font-size:.9rem}}
@media(min-width:701px) and (max-width:1100px){.people{grid-template-columns:repeat(3,1fr)}}
@media(min-width:1101px){.people:not(:has(> :nth-child(4))) .p__b{padding:1.6rem 1.7rem}.people:not(:has(> :nth-child(4))) .p__b h3{font-size:1.15rem}.people:not(:has(> :nth-child(4))) .p__b p{font-size:.97rem}}
/* Studio page: sticky DJ room photograph */
.ph--img{background:none}
.ph--img::before,.ph--img::after{content:none}
.ph--img img{position:absolute;inset:0;width:100%;height:100%;object-fit:cover;object-position:45% 55%}
.split__vis .ph--img::after{content:"";position:absolute;inset:0;pointer-events:none;
  background:linear-gradient(90deg,rgba(13,13,15,0) 70%,rgba(13,13,15,.55) 100%),linear-gradient(180deg,rgba(13,13,15,.25) 0%,rgba(13,13,15,0) 20%)}

/* ===========================================================================
   PHOTO BLENDING, site wide: every photograph fades into the page at its
   edges instead of sitting in a hard box. Logos are excluded.
   =========================================================================== */
:root{
  --feather:linear-gradient(90deg,transparent 0,#000 12%,#000 88%,transparent 100%),
            linear-gradient(180deg,transparent 0,#000 12%,#000 88%,transparent 100%);
}
.shot:has(img),.gal__i:has(img){background:transparent}
.shot:has(img)::before,.gal__i:has(img)::before{content:none}
.shot img,.gal__i img,.gal__i video{
  -webkit-mask-image:var(--feather);mask-image:var(--feather);
  -webkit-mask-composite:source-in;mask-composite:intersect}
.shot img{width:100%;height:100%;object-fit:cover;position:absolute;inset:0}
/* people cards: photo melts down into the card */
.p__img:has(img){background:transparent}
.p__img:has(img)::before{content:none}
.p__img img{-webkit-mask-image:linear-gradient(180deg,#000 55%,transparent 100%);
  mask-image:linear-gradient(180deg,#000 55%,transparent 100%)}
/* studio page sticky photograph: fades out towards the text and at top and bottom */
.split__vis:has(.ph--img){background:transparent}
.ph--img img{
  -webkit-mask-image:linear-gradient(90deg,#000 0,#000 70%,transparent 100%),linear-gradient(180deg,transparent 0,#000 10%,#000 85%,transparent 100%);
          mask-image:linear-gradient(90deg,#000 0,#000 70%,transparent 100%),linear-gradient(180deg,transparent 0,#000 10%,#000 85%,transparent 100%);
  -webkit-mask-composite:source-in;mask-composite:intersect}
.split__vis .ph--img::after{content:none}
@media(max-width:900px){
  .ph--img img{-webkit-mask-image:linear-gradient(180deg,#000 0,#000 70%,transparent 100%);mask-image:linear-gradient(180deg,#000 0,#000 70%,transparent 100%)}
}
/* home, "already getting paid": wide feature photo bleeding off the right edge */
.feat{grid-column:7/-1;margin-right:calc(-1 * var(--pad));align-self:center}
.shot--feat{aspect-ratio:3/2}
.shot--feat img{object-position:52% 60%;
  -webkit-mask-image:linear-gradient(90deg,transparent 0,#000 22%,#000 100%),linear-gradient(180deg,transparent 0,#000 14%,#000 84%,transparent 100%);
          mask-image:linear-gradient(90deg,transparent 0,#000 22%,#000 100%),linear-gradient(180deg,transparent 0,#000 14%,#000 84%,transparent 100%);
  -webkit-mask-composite:source-in;mask-composite:intersect}
@media(max-width:900px){.feat{grid-column:1/-1;margin:1.5rem calc(-1 * var(--pad)) 0}
  .shot--feat img{-webkit-mask-image:linear-gradient(180deg,transparent 0,#000 15%,#000 80%,transparent 100%);mask-image:linear-gradient(180deg,transparent 0,#000 15%,#000 80%,transparent 100%)}}
/* feature photo v2: same width as before, but only as tall as the text beside it, so no empty space under the copy */
.feat{grid-column:8/-1;margin-right:0;align-self:stretch;display:flex}
.shot--feat{aspect-ratio:auto;width:100%;min-height:22rem;flex:1}
.shot--feat img{object-position:50% 62%;
  -webkit-mask-image:var(--feather);mask-image:var(--feather);-webkit-mask-composite:source-in;mask-composite:intersect}
@media(max-width:900px){.feat{grid-column:1/-1;margin:1.5rem 0 0}.shot--feat{min-height:0;aspect-ratio:4/3}}

.top{align-items:center}
/* Social links in the header (all pages) and footer */
.soc{display:flex;align-items:center;gap:.35rem;margin-left:1.4rem}
.soc a{display:grid;place-items:center;width:34px;height:34px;border:1px solid var(--hair);border-radius:50%;
  transition:border-color .3s,background .3s,transform .3s}
.soc svg{width:15px;height:15px;fill:var(--mute);transition:fill .3s}
.soc a:hover{border-color:transparent;background:var(--fader-x);transform:translateY(-2px)}
.soc a:hover svg{fill:#fff}
.soc a:focus-visible{outline:2px solid var(--cyan);outline-offset:3px}

@media(max-width:1100px){.soc{margin-left:auto;margin-right:.9rem}.soc a{width:36px;height:36px}}
.soc--foot{margin:1.2rem 0 0}
.soc--foot a{width:40px;height:40px}.soc--foot svg{width:17px;height:17px}
.soc a[hidden]{display:none}
.menu > a,.menu .has > button{white-space:nowrap}
@media(min-width:1101px){.menu{gap:clamp(1.1rem,1.6vw,2.1rem)}}
@media(max-width:1279px) and (min-width:881px){.top > .soc{display:none}}
@media(max-width:1100px){.top > .soc{gap:.3rem;margin-right:.6rem}.top > .soc a{width:32px;height:32px}.top > .soc svg{width:14px;height:14px}}
@media(max-width:1180px) and (min-width:881px){.menu > a,.menu .has > button{letter-spacing:.1em;font-size:.76rem}.menu{gap:.9rem}}

/* Contact page map: dark to match the site, soft edges */
.map{position:relative;aspect-ratio:16/10;overflow:hidden;border-radius:4px;
  -webkit-mask-image:var(--feather);mask-image:var(--feather);-webkit-mask-composite:source-in;mask-composite:intersect}
.map iframe{position:absolute;inset:0;width:100%;height:100%;border:0;
  filter:invert(.9) hue-rotate(180deg) saturate(.7) contrast(.95)}

/* ===========================================================================
   MUSIC CONTROL v2: large, obvious play / pause, bottom right on every page
   =========================================================================== */
.amb{left:auto;right:max(1.2rem,var(--sar));bottom:calc(1.2rem + var(--sab));z-index:90}
.amb__b{gap:.8rem;padding:.45rem 1.2rem .45rem .45rem;background:rgba(13,13,15,.88);
  border:1px solid var(--hair);box-shadow:0 10px 30px rgba(0,0,0,.45)}
.amb__b:hover{border-color:transparent;box-shadow:0 0 0 2px var(--violet),0 10px 30px rgba(0,0,0,.45)}
.amb__b:focus-visible{outline:2px solid var(--cyan);outline-offset:3px}
.amb__pp{position:relative;flex:none;width:48px;height:48px;border-radius:50%;display:grid;place-items:center;
  background:var(--fader-x);box-shadow:0 0 18px rgba(255,8,235,.35)}
.amb__pp svg{position:absolute;width:22px;height:22px;fill:#fff;transition:opacity .2s,transform .2s}
.amb__play{transform:translateX(1px)}
.amb__pause{opacity:0;transform:scale(.7)}
.amb[data-on="true"] .amb__play{opacity:0;transform:scale(.7)}
.amb[data-on="true"] .amb__pause{opacity:1;transform:none}
.amb__i{display:none}
.amb__lab{max-width:12rem;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.amb__nm{font-size:.95rem;font-weight:600;letter-spacing:.01em;max-width:none}
.amb[data-on="true"] .amb__pp{animation:ambpulse 1.8s ease-in-out infinite}
@keyframes ambpulse{0%,100%{box-shadow:0 0 12px rgba(255,8,235,.3)}50%{box-shadow:0 0 26px rgba(1,177,244,.55)}}
@media(prefers-reduced-motion:reduce){.amb[data-on="true"] .amb__pp{animation:none}}
@media(max-width:600px){
  .amb{right:.9rem;left:auto;bottom:calc(.9rem + var(--sab))}
  .amb__b{padding:.35rem 1rem .35rem .35rem;gap:.65rem}
  .amb__pp{width:44px;height:44px}
  .amb__lab{max-width:8rem}
  .amb__nm{font-size:.86rem}
}
@media print{.amb{display:none}}

/* music control always on top, and lifted clear of the install banner */
.amb{z-index:170}
body:has(.install:not([hidden])) .amb{bottom:calc(6.2rem + var(--sab))}

/* ---------- case studies (content team) ---------- */
.p--cs .p__b{padding:1.6rem}
.p--cs .p__b h3{font-size:1.3rem}
.booknote{margin:1rem 0 0;max-width:46ch;color:var(--bone);font-size:1rem;line-height:1.6;
  padding:1rem 1.2rem;border:1px solid var(--hair);border-left:3px solid var(--magenta);background:var(--ink-2)}
.booknote a{text-decoration:underline;text-underline-offset:3px}
/* nav: slightly larger text than before, tighter spacing so it never meets the logo */
@media(min-width:1101px){
  .menu{gap:1.5rem}
  .menu a,.menu .has>button{font-size:.76rem;letter-spacing:.12em}
}
@media(min-width:1101px) and (max-width:1280px){
  .menu{gap:1rem}
  .menu a,.menu .has>button{font-size:.7rem;letter-spacing:.08em}
}
/* case study tiles: the artist's name set large until a photo is added */
.p--cs .p__img{aspect-ratio:4/3;background:radial-gradient(120% 90% at 80% 10%,rgba(255,8,235,.35),transparent 60%),radial-gradient(100% 80% at 10% 90%,rgba(1,177,244,.3),transparent 60%),var(--ink-3)}
.p--cs .p__img .p__mono{font-family:var(--display);font-weight:900;font-size:clamp(1.5rem,2.4vw,2.1rem);letter-spacing:-.04em;
  line-height:1;text-transform:none;color:var(--bone);text-align:center;padding:0 1rem}
.p--cs .p__img:has(img) .p__mono{display:none}

/* ===========================================================================
   PRICING (shared component)
   One set of cards used everywhere. The lessons page carries all four, other
   pages carry the pair that fits and link back to the full set.
   =========================================================================== */
.pr{display:grid;grid-template-columns:repeat(auto-fit,minmax(255px,1fr));gap:1px;
  background:var(--hair);border:1px solid var(--hair)}
.pr--one{max-width:28rem}
.pr--pair{max-width:54rem}
.pr__c{position:relative;background:var(--ink);padding:clamp(1.5rem,2.4vw,2.1rem);
  display:flex;flex-direction:column;transition:background .3s ease}
.pr__c:hover{background:var(--ink-2)}
.pr__c--key{background:linear-gradient(180deg,rgba(144,86,239,.12),rgba(13,13,15,0) 68%),var(--ink)}
.pr__c--key:hover{background:linear-gradient(180deg,rgba(144,86,239,.17),rgba(13,13,15,0) 68%),var(--ink-2)}
.pr__c--key::before{content:'';position:absolute;inset:0;padding:2px;background:var(--fader-x);
  -webkit-mask:linear-gradient(#000 0 0) content-box,linear-gradient(#000 0 0);
  -webkit-mask-composite:xor;mask-composite:exclude;pointer-events:none}
.pr__name{margin:0;font-family:var(--body);font-weight:500;font-size:.78rem;letter-spacing:.2em;
  text-transform:uppercase;color:var(--mute)}
.pr__tag{align-self:flex-start;margin:.85rem 0 0;padding:.32rem .72rem;font-size:.71rem;
  letter-spacing:.14em;text-transform:uppercase;color:var(--bone);background:var(--ink-3);
  border:1px solid var(--hair);border-radius:999px}
.pr__fig{margin:1rem 0 0;display:flex;align-items:baseline;gap:.55rem;flex-wrap:wrap;
  font-family:var(--display);font-weight:900;font-size:clamp(2rem,3.1vw,2.8rem);
  letter-spacing:-.04em;line-height:1}
.pr__fig small{font-family:var(--body);font-weight:400;font-size:.86rem;letter-spacing:0;color:var(--mute)}
.pr__fig--ask{font-size:clamp(1.45rem,2.1vw,1.85rem);letter-spacing:-.03em}
.pr__c--key .pr__fig{background:var(--fader-x);-webkit-background-clip:text;background-clip:text;color:transparent}
.pr__c--key .pr__fig small{-webkit-text-fill-color:var(--mute)}
.pr__desc{margin:.95rem 0 0;color:#E0E0E6;font-size:.97rem;line-height:1.6}
.pr__list{list-style:none;margin:1.05rem 0 0;padding:0}
.pr__list li{display:grid;grid-template-columns:.95rem 1fr;gap:.55rem;align-items:baseline;
  padding:.52rem 0;border-bottom:1px solid var(--hair);font-size:.95rem;color:#E0E0E6}
.pr__list li:first-child{border-top:1px solid var(--hair)}
.pr__list li::before{content:'';width:6px;height:6px;background:var(--fader)}
.pr__sub{margin:.9rem 0 0;font-size:.85rem;color:var(--cyan);letter-spacing:.02em}
/* engineer day rates: two tiles side by side, inside the card */
.pr__tiles{display:grid;grid-template-columns:1fr 1fr;gap:1px;margin:1.05rem 0 0;
  background:var(--hair);border:1px solid var(--hair)}
.pr__t{background:var(--ink-2);padding:1rem .85rem;display:flex;flex-direction:column;gap:.28rem}
.pr__t span{font-size:.7rem;letter-spacing:.16em;text-transform:uppercase;color:var(--mute)}
.pr__t b{font-family:var(--display);font-weight:900;font-size:clamp(1.45rem,2.2vw,1.9rem);
  letter-spacing:-.035em;line-height:1;
  background:var(--fader-x);-webkit-background-clip:text;background-clip:text;color:transparent}
.pr__t em{font-style:normal;font-size:.81rem;color:var(--mute)}
.pr__foot{margin-top:auto;padding-top:1.5rem}
.pr__foot .b{width:100%;justify-content:space-between}
.pr__more{margin:1.4rem 0 0;font-size:.92rem;color:var(--mute)}
.pr__more a{color:var(--bone);text-decoration:underline;text-underline-offset:3px}
@media(max-width:760px){
  .pr{grid-template-columns:1fr}
  .pr--one,.pr--pair{max-width:none}
  .pr__c{padding:1.5rem 1.35rem}
  .pr__foot{padding-top:1.3rem}
}

/* Inline price line: every service says what it costs, in its own section */
.prx{display:flex;align-items:baseline;gap:.5rem .8rem;flex-wrap:wrap;
  margin:1.6rem 0 0;padding-top:.9rem;border-top:1px solid var(--hair)}
.prx b{font-family:var(--display);font-weight:900;font-size:1.4rem;letter-spacing:-.035em;line-height:1;
  background:var(--fader-x);-webkit-background-clip:text;background-clip:text;color:transparent}
.prx span{font-size:.93rem;color:var(--mute);line-height:1.55}
.prx a{color:var(--bone);text-decoration:underline;text-underline-offset:3px;font-size:.9rem}
/* price on the home page service tiles */
.disc .disc__p{margin-top:auto;padding-top:.7rem;font-family:var(--display);font-weight:800;
  font-size:1rem;letter-spacing:-.02em;color:transparent;
  background:var(--fader-x);-webkit-background-clip:text;background-clip:text}
/* the rate list's price cell collides with the .p people card rule: no box */
.rate .p{border:0;display:inline;transform:none}
.rate .p:hover{border-color:transparent;transform:none}
/* Engineer day rates as a service of their own: stacked, larger figures */
.pr__tiles--stack{grid-template-columns:1fr;max-width:23rem}
.pr__tiles--stack .pr__t{padding:1.2rem 1.3rem;gap:.35rem}
.pr__tiles--stack .pr__t b{font-size:clamp(2rem,3.2vw,2.6rem)}
.pr__tiles--stack .pr__t em{font-size:.88rem}
/* Track production with an engineer: the studio at night behind the heading */
.phx--eng{--phx-img:url(../img/engineer-bg.jpg?v=1);--phx-pos:38% 62%}
.phx--eng .phx__bg::before{filter:saturate(1.05) contrast(1.04) brightness(.92)}
@media(max-width:900px){.phx--eng{--phx-img:url(../img/engineer-bg-sm.jpg?v=1);--phx-pos:42% 60%}}
@media(max-width:900px){
  .phx--eng .phx__bg::after{background:
    linear-gradient(180deg,var(--ink) 0%,rgba(13,13,15,.88) 20%,rgba(13,13,15,.72) 42%,rgba(13,13,15,.25) 68%,var(--ink) 100%)}
}