/* Layout: nachtstudio. Zwarte vloer, posterletters in crème, elke sectie is een spoor met een eigen spoorkleur
   zoals in een DAW. De hero gebruikt de volle breedte. Eén donkere look, net als het logo (wit op zwart). */
:root{
  --ink:#0b0d0f;        /* vloer */
  --panel:#13171a;      /* panelen */
  --raised:#1b2023;     /* knoppen, velden */
  --line:#2c3438;       /* lijnen */
  --paper:#f2ede2;      /* tekst, randen */
  --muted:#a9b2b5;
  --dim:#6f7a7e;
  --c1:#22BABD;         /* turquoise: beats, acties */
  --c2:#226DBD;         /* blauw: workshops */
  --c3:#2522BD;         /* indigo: playground */
  --c3-text:#8f8df5;    /* indigo dat leesbaar is op zwart */
  --err:#ff6b5e;
  --ok:#5fd6a0;
  --f-disp:"Anton",Impact,"Arial Narrow Bold","Helvetica Neue Condensed",sans-serif;
  --f-body:"Barlow",system-ui,-apple-system,"Segoe UI",sans-serif;
  --f-cond:"Barlow Condensed","Arial Narrow",system-ui,sans-serif;
  --f-mono:"IBM Plex Mono",ui-monospace,Menlo,Consolas,monospace;
  --gutter-l:max(16px,env(safe-area-inset-left,0px));
  --gutter-r:max(16px,env(safe-area-inset-right,0px));
  --head-h:64px;
  color-scheme:dark;
}
*,*::before,*::after{box-sizing:border-box}
[hidden]{display:none!important}
html{background:var(--ink);scroll-padding-top:calc(var(--head-h) + env(safe-area-inset-top,0px) + 12px);-webkit-text-size-adjust:100%}
@media (prefers-reduced-motion:no-preference){html{scroll-behavior:smooth}}
body{margin:0;background:var(--ink);color:var(--paper);font:400 18px/1.6 var(--f-body);-webkit-tap-highlight-color:transparent}
body::before{content:"";position:fixed;inset:0 0 auto;height:env(safe-area-inset-top,0px);z-index:30;background:var(--ink)}
img{max-width:100%;height:auto;display:block}
a{color:var(--c1);text-underline-offset:3px}
a:hover{color:var(--paper)}
:focus-visible{outline:3px solid var(--c1);outline-offset:3px}
h1,h2,h3{margin:0;font-weight:400;text-wrap:balance}
p{margin:0}
.wrap{max-width:1180px;margin:0 auto;padding-left:var(--gutter-l);padding-right:var(--gutter-r)}
.skip{position:absolute;left:-9999px;top:8px;z-index:50;background:var(--paper);color:var(--ink);padding:8px 14px;border-radius:8px;font:600 16px var(--f-cond)}
.skip:focus{left:16px}
.vh{position:absolute!important;width:1px;height:1px;overflow:hidden;clip:rect(0 0 0 0);clip-path:inset(50%);white-space:nowrap}

/* ---------- Kop ---------- */
.site-head{position:sticky;top:env(safe-area-inset-top,0px);z-index:20;background:color-mix(in srgb,var(--ink) 92%,transparent);
  -webkit-backdrop-filter:blur(10px);backdrop-filter:blur(10px);border-bottom:1px solid var(--line)}
.site-head .wrap{display:flex;flex-wrap:wrap;align-items:center;justify-content:space-between;gap:6px 24px;min-height:var(--head-h);padding-block:8px}
.brand{display:flex;align-items:center;gap:10px;color:var(--paper);text-decoration:none}
.brand-logo{height:40px;width:auto}
.brand-name{font:600 12.5px/1.1 var(--f-cond);letter-spacing:.14em;text-transform:uppercase;color:var(--muted)}
.nav{display:flex;flex-wrap:wrap;gap:2px 4px;margin:0;padding:0;list-style:none}
.nav a{display:block;padding:8px 10px;border-radius:8px;color:var(--paper);text-decoration:none;font:600 16px/1 var(--f-cond);letter-spacing:.08em;text-transform:uppercase;
  box-shadow:inset 0 -3px 0 transparent;transition:box-shadow .15s,background .15s}
.nav a:hover{background:var(--raised)}
.nav a[href="#beats"]{--track:var(--c1)} .nav a[href="#workshops"]{--track:var(--c2)} .nav a[href="#playground"]{--track:var(--c3-text)} .nav a[href="#over"]{--track:var(--paper)}
.nav a[aria-current="true"]{box-shadow:inset 0 -3px 0 var(--track,var(--c1))}
.nav .nav-cta a{background:var(--c1);color:var(--ink)}
.nav .nav-cta a:hover{background:var(--paper)}
@media (max-width:640px){
  :root{--head-h:96px}
  .site-head .wrap{gap:2px 12px}
  .nav{width:100%;justify-content:space-between}
  .nav a{padding:8px 6px;font-size:15px;letter-spacing:.05em}
}

/* ---------- Knoppen ---------- */
.btn{display:inline-flex;align-items:center;justify-content:center;gap:8px;min-height:48px;padding:0 20px;border-radius:12px;border:2px solid var(--paper);
  font:600 18px/1 var(--f-cond);letter-spacing:.06em;text-transform:uppercase;text-decoration:none;cursor:pointer;transition:translate .08s,box-shadow .08s,background .15s,color .15s}
.btn-primary{background:var(--paper);color:var(--ink);box-shadow:4px 4px 0 var(--c1)}
.btn-primary:hover{background:var(--c1);color:var(--ink)}
.btn-ghost{background:transparent;color:var(--paper);box-shadow:4px 4px 0 var(--c2)}
.btn-ghost:hover{background:var(--raised);color:var(--paper)}
.btn-ghost:active{box-shadow:2px 2px 0 var(--c2)}
.btn:active{translate:2px 2px;box-shadow:2px 2px 0 var(--c1)}
.btn[disabled]{opacity:.55;cursor:progress}
.btn-row{display:flex;flex-wrap:wrap;gap:12px}

/* ---------- Hero ---------- */
.hero .wrap{display:block;padding-block:72px 96px}
.hero-text{min-width:0}
.kicker{font:500 13px/1.4 var(--f-mono);letter-spacing:.12em;text-transform:uppercase;color:var(--muted)}
.hero h1{margin-top:14px;font:400 clamp(72px,9.4vw,128px)/.86 var(--f-disp);text-transform:uppercase;letter-spacing:.005em}
.hero h1 .to{color:var(--c1)}
.hero h1 small{display:block;margin-top:14px;font:500 clamp(14px,1.6vw,18px)/1 var(--f-mono);letter-spacing:.42em;color:var(--muted)}
/* "Productions" even breed als de regels erboven: letters over de volle breedte verdeeld */
.hero h1{width:fit-content;max-width:100%}
.hero h1 .h1-sub{display:block;margin-top:.2em;font:600 .235em/1 var(--f-cond);letter-spacing:0;color:var(--paper)}
.hero h1 .spread{display:flex;justify-content:space-between;padding-top:.32em;border-top:.09em solid var(--c1)}
.hero .lead{margin-top:28px;max-width:34em;font-size:20px;color:var(--paper)}
.hero .btn-row{margin-top:32px}
/* Hero: gecentreerd, de kop is even breed als de site (container-eenheden), ook op een telefoon */
.hero .wrap{container-type:inline-size}
.hero-text{text-align:center}
.hero h1{font-size:clamp(72px,9.4vw,128px);margin-inline:auto}
.hero.soon h1{font-size:clamp(64px,9vw,112px)}
.hero .lead{max-width:44em;margin-inline:auto}
.hero .btn-row{justify-content:center}
@media (max-width:900px){.hero .wrap{padding-block:44px 64px}.hero .lead{max-width:none}}
@media (max-width:640px){.hero h1{font-size:clamp(56px,25vw,128px)}@supports (width:1cqw){.hero h1{font-size:calc(100cqw / 3.56)}.hero.soon h1{font-size:calc(100cqw / 4.52)}}.hero .lead{font-size:18px}.hero .btn-row{display:grid;grid-template-columns:1fr}.hero .btn-row .btn{width:100%}}

/* ---------- Secties ---------- */
.sec{padding-block:96px;border-top:1px solid var(--line);--track:var(--c1)}
.sec-beats{--track:var(--c1)} .sec-workshops{--track:var(--c2)} .sec-playground{--track:var(--c3-text)} .sec-over{--track:var(--paper)} .sec-contact{--track:var(--c2)}
.sec-head{display:grid;gap:14px;max-width:46em;margin-bottom:44px}
.sec h2{display:flex;align-items:center;gap:14px;font:400 clamp(44px,6.4vw,80px)/.95 var(--f-disp);text-transform:uppercase}
.sec h2::before{content:"";flex:none;width:clamp(14px,1.6vw,20px);height:.78em;background:var(--track);border-radius:3px}
.sec-head p{font-size:20px;color:var(--muted);max-width:38em}
@media (max-width:640px){.sec{padding-block:64px}.sec-head{margin-bottom:32px}.sec-head p{font-size:18px}}
.tag{display:inline-flex;align-items:center;min-height:26px;padding:2px 9px;border:1.5px solid var(--line);border-radius:999px;font:600 13px/1 var(--f-cond);letter-spacing:.1em;text-transform:uppercase;color:var(--muted)}
.label{font:500 12.5px/1.3 var(--f-mono);letter-spacing:.12em;text-transform:uppercase;color:var(--muted)}

/* ---------- Beats ---------- */
.beats-grid{display:grid;grid-template-columns:minmax(0,1.55fr) minmax(0,1fr);gap:40px;align-items:start}
@media (max-width:900px){.beats-grid{grid-template-columns:minmax(0,1fr)}}
.tracks{list-style:none;margin:0;padding:0;border:2px solid var(--line);border-radius:16px;overflow:hidden;background:var(--panel)}
.track{display:grid;grid-template-columns:auto minmax(0,1fr) auto;grid-template-areas:"play info time" "play bar bar";gap:6px 16px;align-items:center;padding:14px 18px;border-top:1px solid var(--line)}
.track:first-child{border-top:0}
.track.is-active{background:var(--raised);box-shadow:inset 4px 0 0 var(--c1)}
.t-play{grid-area:play;width:52px;height:52px;border-radius:50%;border:2px solid var(--paper);background:transparent;color:var(--paper);display:grid;place-items:center;cursor:pointer;transition:background .15s,color .15s}
.t-play:hover{background:var(--paper);color:var(--ink)}
.t-play[aria-pressed="true"]{background:var(--c1);border-color:var(--c1);color:var(--ink)}
.t-play svg{width:18px;height:18px}
.t-play .i-pause,.t-play[aria-pressed="true"] .i-play{display:none}
.t-play[aria-pressed="true"] .i-pause{display:block}
.t-info{grid-area:info;display:flex;flex-wrap:wrap;align-items:baseline;gap:4px 10px;min-width:0}
.t-cat{font:500 13px var(--f-mono);color:var(--dim);font-variant-numeric:tabular-nums}
.t-title{font:600 22px/1.15 var(--f-cond);letter-spacing:.01em}
.t-tags{display:flex;flex-wrap:wrap;gap:6px;width:100%}
.t-time{grid-area:time;font:500 13px var(--f-mono);font-variant-numeric:tabular-nums;color:var(--muted);white-space:nowrap}
.t-bar{grid-area:bar;width:100%;height:22px;margin:0;-webkit-appearance:none;appearance:none;background:transparent;--p:0%}
.t-bar::-webkit-slider-runnable-track{height:4px;border-radius:2px;background:linear-gradient(90deg,var(--c1) var(--p),var(--line) var(--p))}
.t-bar::-webkit-slider-thumb{-webkit-appearance:none;width:16px;height:16px;margin-top:-6px;border-radius:50%;background:var(--paper);border:3px solid var(--c1)}
.t-bar::-moz-range-track{height:4px;border-radius:2px;background:var(--line)}
.t-bar::-moz-range-progress{height:4px;border-radius:2px;background:var(--c1)}
.t-bar::-moz-range-thumb{width:12px;height:12px;border-radius:50%;background:var(--paper);border:3px solid var(--c1)}
.t-bar:disabled{opacity:.35}
.t-msg{grid-column:2/-1;font-size:15px;color:var(--err)}
@media (max-width:520px){.track{padding:12px 14px;gap:4px 12px}.t-play{width:46px;height:46px}.t-title{font-size:20px}}

.services{display:grid;gap:14px}
.service{border:2px solid var(--line);border-radius:16px;padding:20px 20px 18px;display:grid;gap:8px;background:var(--ink)}
.service h3{font:400 26px/1.05 var(--f-disp);text-transform:uppercase;letter-spacing:.01em}
.service p{color:var(--muted);font-size:17px}
.service a{font:600 16px var(--f-cond);letter-spacing:.08em;text-transform:uppercase;justify-self:start}
.service.featured{border-color:var(--c1);background:var(--panel)}
.service.featured h3{color:var(--c1)}

/* ---------- Workshops ---------- */
.cards{display:grid;gap:16px;margin-bottom:48px}
.cards-3{grid-template-columns:repeat(3,minmax(0,1fr))}
@media (max-width:900px){.cards-3{grid-template-columns:minmax(0,1fr)}}
.card{display:flex;flex-direction:column;gap:12px;padding:22px 22px 20px;border:2px solid var(--line);border-radius:16px;background:var(--panel);min-width:0}
.card h3{display:flex;align-items:center;gap:10px;font:400 30px/1 var(--f-disp);text-transform:uppercase;letter-spacing:.01em}
.card h3::before{content:"";width:12px;height:12px;border-radius:50%;background:var(--c2);border:1.5px solid var(--paper);flex:none}
.card p{color:var(--muted);font-size:17px}

.school{display:grid;gap:28px;padding:30px 30px 28px;border:3px solid var(--paper);border-radius:18px 24px 20px 26px;background:var(--panel);
  margin:0}
.school-head{display:grid;gap:10px;max-width:44em}
.badge{justify-self:start;font:400 15px/1 var(--f-disp);letter-spacing:.06em;text-transform:uppercase;padding:6px 9px 5px;border-radius:5px;background:var(--c1);color:var(--ink);transform:rotate(-2deg)}
.school h3{font:400 clamp(34px,4.4vw,52px)/1 var(--f-disp);text-transform:uppercase}
.school-head p{font-size:19px}
.school-cols{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:16px}
.school-col{display:grid;gap:8px;align-content:start;padding:20px 22px;border-radius:14px;background:var(--raised);border:2px solid var(--line);min-width:0}
.school-col .label{color:var(--c1)}
.school-col h4{margin:0;font:600 25px/1.15 var(--f-cond);letter-spacing:.01em}
.school-col p{color:var(--muted);font-size:17px}
.school-points{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:14px 24px;margin:0;padding:0;list-style:none}
.school-points li{display:grid;gap:4px;align-content:start;padding-left:14px;border-left:3px solid var(--c2)}
.school-points b{font:600 17px var(--f-cond);letter-spacing:.08em;text-transform:uppercase}
.school-points span{font-size:16px;color:var(--muted)}
.school-foot{display:flex;flex-wrap:wrap;align-items:center;gap:12px 20px}
.school-foot p{font-size:16px;color:var(--muted);max-width:30em}
@media (max-width:900px){.school-points{grid-template-columns:minmax(0,1fr)}}
@media (max-width:640px){.school-cols{grid-template-columns:minmax(0,1fr)}.school{padding:22px 18px 20px}}

/* ---------- Playground ---------- */
.pg{display:grid;grid-template-columns:minmax(0,.85fr) minmax(0,1.15fr);gap:48px;align-items:center}
@media (max-width:900px){.pg{grid-template-columns:minmax(0,1fr);gap:32px}}
.pg-art{position:relative;background:var(--ink);border:3px solid var(--paper);border-radius:22px 28px 20px 30px;
  margin:0}
.pg-visual{width:100%;border-radius:19px 25px 17px 27px}
.pg-art .sticker{position:absolute;right:-6px;top:18px;font:400 16px/1 var(--f-disp);letter-spacing:.05em;text-transform:uppercase;background:var(--c1);color:var(--ink);padding:7px 10px 6px;border-radius:6px;transform:rotate(5deg);box-shadow:3px 3px 0 var(--ink)}
.pg-text{display:grid;gap:18px;min-width:0}
.pg-text h3{font:400 clamp(34px,4.4vw,52px)/1 var(--f-disp);text-transform:uppercase}
.pg-text h3 span{color:var(--c3-text)}
.pg-text > p{font-size:19px}
.feat{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:10px 24px;margin:0;padding:0;list-style:none}
.feat li{display:grid;gap:2px;padding-left:14px;border-left:3px solid var(--c3)}
.feat b{font:500 13px var(--f-mono);letter-spacing:.1em;text-transform:uppercase;color:var(--c3-text)}
.feat span{font-size:16px;color:var(--muted)}
@media (max-width:520px){.feat{grid-template-columns:minmax(0,1fr)}}
.pg-lead{font-size:21px;line-height:1.35}
.pg-steps{display:grid;gap:12px;margin:0;padding:0;list-style:none}
.pg-steps li{--sc:var(--c1);--st:var(--c1);display:grid;grid-template-columns:auto minmax(0,1fr);gap:14px;align-items:center;padding:14px 16px;background:var(--panel);border:2px solid var(--line);border-left:6px solid var(--sc);border-radius:14px}
.pg-steps .st2{--sc:var(--c2);--st:#5aa0ee}.pg-steps .st3{--sc:var(--c3);--st:var(--c3-text)}
.st-n{display:grid;place-items:center;width:44px;height:44px;border-radius:50%;background:var(--sc);color:#fff;font:400 24px/1 var(--f-disp)}
.pg-steps .st1 .st-n{color:var(--ink)}
.pg-steps b{display:block;font:400 26px/1 var(--f-disp);letter-spacing:.03em;text-transform:uppercase;color:var(--st)}
.pg-steps span:not(.st-n){display:block;margin-top:4px;font-size:16px;color:var(--muted)}
.pg-chips{display:flex;flex-wrap:wrap;gap:8px;margin:0;padding:0;list-style:none}
.pg-chips li{padding:6px 12px;border:2px solid var(--line);border-radius:999px;font:500 13px var(--f-mono);letter-spacing:.06em;text-transform:uppercase;color:var(--paper)}
.pg-chips li:nth-child(3n+1){border-color:var(--c1)}.pg-chips li:nth-child(3n+2){border-color:var(--c2)}.pg-chips li:nth-child(3n){border-color:var(--c3-text)}
.pg-note{font-size:15px;color:var(--muted)}

/* ---------- Over ---------- */
.over{display:grid;grid-template-columns:minmax(0,1fr) minmax(0,1fr);gap:56px;align-items:start}
@media (max-width:900px){.over{grid-template-columns:minmax(0,1fr);gap:36px}}
.mottos{display:grid;gap:8px}
.motto{font:400 clamp(52px,7.6vw,104px)/.9 var(--f-disp);text-transform:uppercase}
.motto em{font-style:normal;color:var(--c1)}
.motto.second em{color:var(--c2)}
.over-text{display:grid;gap:18px}
.over-text p{max-width:36em}
.credo{display:grid;gap:8px;padding:18px 20px;border:2px solid var(--line);border-radius:14px;background:var(--panel)}
.credo ol,.credo ul{display:flex;flex-wrap:wrap;align-items:center;gap:8px;margin:0;padding:0;list-style:none}
.credo li{font:600 19px/1 var(--f-cond);letter-spacing:.06em;text-transform:uppercase;padding:8px 12px;border-radius:9px;background:var(--raised)}
.credo ol li + li::before{content:"→";margin-right:10px;color:var(--c2)}

/* ---------- Contact ---------- */
.contact{display:grid;grid-template-columns:minmax(0,1.4fr) minmax(0,1fr);gap:48px;align-items:start}
@media (max-width:900px){.contact{grid-template-columns:minmax(0,1fr)}}
.form{display:grid;gap:18px;padding:26px;border:2px solid var(--line);border-radius:18px;background:var(--panel)}
.row2{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:18px}
@media (max-width:640px){.row2{grid-template-columns:minmax(0,1fr)}.form{padding:20px 16px}}
.field{display:grid;gap:6px;min-width:0}
.field label{font:600 14px/1.2 var(--f-cond);letter-spacing:.12em;text-transform:uppercase;color:var(--muted)}
.field label .opt{text-transform:none;letter-spacing:.02em;font-weight:500;color:var(--dim)}
.field input,.field select,.field textarea{width:100%;min-height:50px;padding:12px 14px;border-radius:12px;border:2px solid var(--line);background:var(--ink);color:var(--paper);font:400 18px/1.4 var(--f-body)}
.field textarea{min-height:170px;resize:vertical}
.field select{appearance:none;-webkit-appearance:none;background-image:linear-gradient(45deg,transparent 50%,var(--muted) 50%),linear-gradient(135deg,var(--muted) 50%,transparent 50%);
  background-position:calc(100% - 22px) 52%,calc(100% - 16px) 52%;background-size:6px 6px;background-repeat:no-repeat;padding-right:40px}
.field input:focus,.field select:focus,.field textarea:focus{outline:none;border-color:var(--c1);box-shadow:0 0 0 3px color-mix(in srgb,var(--c1) 35%,transparent)}
.field [aria-invalid="true"]{border-color:var(--err)}
.err{font-size:15px;color:var(--err)}
.hp{position:absolute!important;left:-10000px;width:1px;height:1px;overflow:hidden}
.form-foot{display:flex;flex-wrap:wrap;align-items:center;gap:12px 20px}
.form-note{font-size:15px;color:var(--muted);max-width:34em}
.status{padding:14px 16px;border-radius:12px;font-size:17px;border:2px solid currentColor}
.status.ok{color:var(--ok);background:color-mix(in srgb,var(--ok) 10%,transparent)}
.status.bad{color:var(--err);background:color-mix(in srgb,var(--err) 10%,transparent)}
.status-target{display:none}
.status-target:target{display:block}
.contact-side{display:grid;gap:20px}
.contact-side h3{font:400 30px/1.05 var(--f-disp);text-transform:uppercase}
.contact-side dl{display:grid;grid-template-columns:auto minmax(0,1fr);gap:8px 18px;margin:0}
.contact-side dt{font:500 12.5px/1.9 var(--f-mono);letter-spacing:.12em;text-transform:uppercase;color:var(--dim)}
.contact-side dd{margin:0;font-variant-numeric:tabular-nums}
.contact-side p{color:var(--muted);font-size:17px}

/* ---------- Voet ---------- */
.site-foot{border-top:1px solid var(--line);background:var(--panel)}
.site-foot .wrap{display:grid;grid-template-columns:minmax(0,1fr) auto;gap:24px 40px;padding-block:40px calc(40px + env(safe-area-inset-bottom,0px))}
.foot-brand{display:grid;gap:6px}
.foot-logo{width:84px;height:auto}
.foot-legal{font:500 13px/1.8 var(--f-mono);color:var(--muted);font-variant-numeric:tabular-nums}
.foot-nav{display:flex;flex-wrap:wrap;gap:4px 18px;margin:0;padding:0;list-style:none;align-self:start}
.foot-nav a{font:600 16px var(--f-cond);letter-spacing:.08em;text-transform:uppercase;color:var(--paper);text-decoration:none}
.foot-nav a:hover{color:var(--c1)}
.privacy{grid-column:1/-1;border-top:1px dashed var(--line);padding-top:18px}
.privacy summary{cursor:pointer;font:600 17px var(--f-cond);letter-spacing:.08em;text-transform:uppercase;color:var(--paper)}
.privacy-body{display:grid;gap:12px;margin-top:14px;max-width:46em;font-size:16px;color:var(--muted)}
.privacy-body h3{font:600 17px var(--f-cond);letter-spacing:.06em;text-transform:uppercase;color:var(--paper);margin-top:6px}
@media (max-width:640px){.site-foot .wrap{grid-template-columns:minmax(0,1fr)}}

@media (prefers-reduced-motion:reduce){*,*::before,*::after{transition:none!important}}

/* ---------- Speler onderin ---------- */
.dock{position:fixed;left:0;right:0;bottom:0;z-index:25;background:color-mix(in srgb,var(--panel) 95%,transparent);-webkit-backdrop-filter:blur(10px);backdrop-filter:blur(10px);
  border-top:2px solid var(--paper);box-shadow:0 -6px 0 0 color-mix(in srgb,var(--c1) 55%,transparent);padding-bottom:env(safe-area-inset-bottom,0px)}
.dock-in{display:grid;grid-template-columns:auto minmax(0,1fr) auto auto;grid-template-areas:"ctl info time close" "ctl seek seek close";gap:0 18px;align-items:center;padding-block:10px 8px}
.dock-ctl{grid-area:ctl;display:flex;align-items:center;gap:8px}
.dock-btn{width:42px;height:42px;border-radius:50%;border:2px solid var(--line);background:transparent;color:var(--paper);display:grid;place-items:center;cursor:pointer;transition:background .15s,border-color .15s}
.dock-btn:hover{background:var(--raised);border-color:var(--paper)}
.dock-btn svg{width:16px;height:16px}
.dock-btn:disabled{opacity:.35;cursor:default}
.dock-play{width:54px;height:48px;border-radius:12px 16px 11px 15px;background:var(--paper);color:var(--ink);border:3px solid var(--ink);box-shadow:4px 4px 0 var(--c1);display:grid;place-items:center;cursor:pointer}
.dock-play:active{translate:2px 2px;box-shadow:2px 2px 0 var(--c1)}
.dock-play[aria-pressed="true"]{background:var(--c1)}
.dock-play svg{width:20px;height:20px}
.dock-play .i-pause,.dock-play[aria-pressed="true"] .i-play{display:none}
.dock-play[aria-pressed="true"] .i-pause{display:block}
.dock-info{grid-area:info;display:flex;align-items:baseline;gap:4px 10px;min-width:0;color:var(--paper);text-decoration:none;white-space:nowrap;overflow:hidden}
.dock-info:hover .dock-title{color:var(--c1)}
.dock-title{font:600 21px/1.2 var(--f-cond);letter-spacing:.01em;overflow:hidden;text-overflow:ellipsis}
.dock-tags{font:600 13px/1 var(--f-cond);letter-spacing:.1em;text-transform:uppercase;color:var(--muted);overflow:hidden;text-overflow:ellipsis}
.dock-time{grid-area:time}
.dock-close{grid-area:close}
.dock-seek{grid-area:seek;height:18px}
body.has-dock{padding-bottom:calc(84px + env(safe-area-inset-bottom,0px))}
@media (max-width:640px){
  .dock-in{gap:0 10px;padding-block:8px 6px}
  .dock-btn{width:36px;height:36px}
  .dock-play{width:48px;height:42px}
  .dock-ctl{gap:6px}
  .dock-info .t-cat{display:none}
  .dock-tags{font-size:11px}
  .dock-title{font-size:18px}
  .dock-time{font-size:12px}
}
@media (max-width:380px){.dock-time{display:none}.dock-in{grid-template-areas:"ctl info close close" "ctl seek seek seek"}}

/* Kop: naam op één regel als er ruimte is; anders zakt "Productions" naar de tweede regel, zodat het menu ruimte houdt */
.brand{flex:1 1 220px;min-width:0}
.brand-name span{display:inline-block}
.nav{flex:0 0 auto}
@media (max-width:640px){.nav{flex-basis:100%}}
.soon-page .brand{flex:0 1 auto}

/* Heel smalle telefoons: menu op één regel houden */
@media (max-width:380px){.nav a{padding:8px 3px;font-size:13.5px;letter-spacing:.02em}}

/* Tekstpagina (privacy) */
.doc{padding:32px 0 64px}
.doc .wrap{max-width:46rem}
.doc h1{font-size:clamp(34px,7vw,56px);line-height:1.05;margin:.2em 0 .4em}
.doc h2{font:600 19px var(--f-cond);letter-spacing:.07em;text-transform:uppercase;color:var(--paper);margin:1.6em 0 .4em}
.doc p,.doc li{font-size:17px;line-height:1.6;color:var(--muted)}
.doc ul{padding-left:1.2em;display:grid;gap:.5em}
.doc b{color:var(--paper)}
.doc a{color:var(--c1);text-underline-offset:3px}
.doc .kicker{margin:0 0 12px}
.doc .note{margin-top:2em;font-size:14px}

/* Balans: een oneven aantal of een halve laatste rij staat in het midden */
.pg-chips{display:grid;grid-template-columns:repeat(3,max-content);justify-content:center}
.pg-chips li{text-align:center}
@media (max-width:440px){.pg-chips{grid-template-columns:repeat(2,max-content)}}
/* Op een telefoon: knoppen onder elkaar even breed, net als bovenaan */
@media (max-width:640px){.pg .btn-row,.school-foot{display:grid;grid-template-columns:1fr}.pg .btn-row .btn,.school-foot .btn{width:100%}.school-foot p{text-align:center;max-width:none}}

/* Balans: knoppen en losse regels onder een blok staan in het midden */
.school-foot{justify-content:center;text-align:center}
.school-foot p{text-align:center}
.pg-lead,.pg-note{text-align:center}
.pg .btn-row{justify-content:center}
/* Balans: de diensten naast de beats zijn samen even hoog als de lijst; contactgegevens even hoog als het formulier */
.beats-grid{align-items:stretch}
.services{grid-auto-rows:1fr}
.service{align-content:center}
.contact{align-items:stretch}
.contact-side{padding:26px;border:2px solid var(--line);border-radius:18px;background:var(--panel);align-content:center}
@media (max-width:640px){.contact-side{padding:20px 16px}}
/* Telefoon: voet in het midden (menu 2 × 2) en de verstuurknop even breed als de velden */
@media (max-width:640px){
  .foot-brand{justify-items:center;text-align:center}
  .foot-nav{display:grid;grid-template-columns:repeat(2,max-content);justify-content:center;gap:10px 28px;justify-self:center;text-align:center}
  .form-foot{display:grid;grid-template-columns:1fr}.form-foot .btn{width:100%}
  .site-foot .privacy summary{text-align:center}
}
.doc .lead+.lead{margin-top:14px}
.e404 h1{line-height:1}