/* VOYCE UX layer v1 (2026-10-03)
   Same brand: Inter only, black/graphite, white type, hairline rules, pill CTAs (matches .vn).
   Adds: depth, rhythm, factual components (vx-*), microinteractions, focus, forms, mobile action bar. */
:root{
  --vx-line:rgba(255,255,255,.12);
  --vx-line2:rgba(255,255,255,.24);
  --vx-mute:#8a8a8a;
  --vx-body:#d8d8d8;
  --vx-e:cubic-bezier(.19,1,.22,1);
}

/* ---------- global microinteractions ---------- */
#page a:focus-visible,#page button:focus-visible,#page input:focus-visible,#page select:focus-visible,#page textarea:focus-visible,
.vxn a:focus-visible,.vxn button:focus-visible,.vx-bar a:focus-visible{outline:1px solid #fff!important;outline-offset:4px;border-radius:2px}
.sqs-block-button-element,.vn-cta,.vx-cta{transition:background-color .35s ease,color .35s ease,border-color .35s ease,transform .18s ease!important}
.sqs-block-button-element:active,.vn-cta:active,.vx-cta:active{transform:scale(.97)}
.vn-cta:hover,.vn-cta:focus-visible{border-color:#fff!important}

/* forms: clear focus, readable labels, comfortable touch targets */
#page form input[type=text],#page form input[type=email],#page form input[type=tel],#page form input[type=number],#page form input[type=date],#page form select,#page form textarea{min-height:48px;transition:border-color .3s ease,background-color .3s ease}
#page form textarea{min-height:120px}
#page form input:focus,#page form select:focus,#page form textarea:focus{border-color:#fff!important;background-color:rgba(255,255,255,.04)!important}
#page form .title,#page form legend,#page form label{letter-spacing:.01em}
#page form [aria-invalid=true],#page form .error input{border-color:#e5e5e5!important}
#page form button[type=submit],#page form input[type=submit]{min-height:48px;cursor:pointer}

/* ---------- depth on the existing "start here" bands ---------- */
section.vn{position:relative;background:radial-gradient(70% 120% at 50% 0%,rgba(255,255,255,.045),rgba(255,255,255,0) 60%),#000!important}
section.vn::before{content:"";position:absolute;left:0;right:0;top:-1px;height:1px;background:linear-gradient(90deg,rgba(255,255,255,0),rgba(255,255,255,.45),rgba(255,255,255,0));pointer-events:none}

/* ---------- vx section shell ---------- */
.vx{position:relative;background:#000;border-top:1px solid var(--vx-line);color:#fff;font-family:Inter,sans-serif}
.vx--lift{background:linear-gradient(180deg,#070707,#000 85%)}
.vx--edge::before{content:"";position:absolute;left:0;right:0;top:-1px;height:1px;background:linear-gradient(90deg,rgba(255,255,255,0),rgba(255,255,255,.4),rgba(255,255,255,0));pointer-events:none}
.vx-in{max-width:1240px;margin:0 auto;padding:clamp(56px,7vw,104px) 6vw}
.vx-in--tight{padding-top:clamp(40px,5vw,72px);padding-bottom:clamp(40px,5vw,72px)}
.vx-k{font-size:var(--vt-label,11px);letter-spacing:.2em;text-transform:uppercase;color:var(--vx-mute);margin:0 0 16px;font-weight:400}
.vx-h{font-weight:700;font-size:var(--vt-head,clamp(24px,3.4vw,44px));line-height:1.04;letter-spacing:-.03em;color:#fff;margin:0;text-transform:lowercase}
.vx-h--lg{font-size:var(--vt-display,clamp(34px,6vw,68px));letter-spacing:-.045em}
.vx-p{font-size:var(--vt-body,16px);line-height:1.72;color:var(--vx-body);margin:18px 0 0;max-width:62ch}
.vx-p a{color:#fff;text-decoration:underline;text-decoration-color:rgba(255,255,255,.35);text-underline-offset:3px;transition:text-decoration-color .3s}
.vx-p a:hover{text-decoration-color:#fff}
.vx-note{font-size:var(--vt-small,13px);line-height:1.6;color:var(--vx-mute);margin:14px 0 0;max-width:70ch}
.vx-head{display:grid;grid-template-columns:minmax(0,1fr) minmax(0,1.2fr);gap:clamp(24px,5vw,80px);align-items:end;margin-bottom:clamp(32px,4vw,56px)}
.vx-head .vx-p{margin:0}

/* CTAs: same pill as .vn-cta */
.vx-row{margin:34px 0 0;display:flex;flex-wrap:wrap;gap:12px;align-items:center}
.vx-cta{display:inline-flex;align-items:center;gap:10px;min-height:48px;padding:0 28px;border:1px solid var(--vx-line2);border-radius:40px;color:#fff!important;font-size:14px;letter-spacing:.02em;line-height:1;text-decoration:none!important;background:transparent;white-space:nowrap}
.vx-cta:hover,.vx-cta:focus-visible{background:#fff;color:#000!important;border-color:#fff}
.vx-cta--solid{background:#fff;color:#000!important;border-color:#fff}
.vx-cta--solid:hover,.vx-cta--solid:focus-visible{background:transparent;color:#fff!important}
.vx-cta .vx-arr{display:inline-block;transition:transform .35s var(--vx-e)}
.vx-cta:hover .vx-arr{transform:translateX(3px)}
.vx-link{color:#fff!important;font-size:14px;text-decoration:none!important;border-bottom:1px solid var(--vx-line2);padding-bottom:3px;transition:border-color .3s}
.vx-link:hover{border-color:#fff}

/* ---------- facts rail (statement -> facts -> action) ---------- */
.vx-facts{display:grid;grid-template-columns:repeat(4,minmax(0,1fr));border-top:1px solid var(--vx-line)}
.vx-f{padding:22px 24px 4px 0;border-right:1px solid var(--vx-line);min-width:0}
.vx-f+.vx-f{padding-left:24px}
.vx-f:last-child{border-right:0}
.vx-f dt{font-size:var(--vt-label,11px);letter-spacing:.2em;text-transform:uppercase;color:var(--vx-mute);margin:0 0 12px}
.vx-f dd{margin:0;font-size:var(--vt-sub,clamp(21px,2.6vw,28px));font-weight:700;letter-spacing:-.025em;line-height:1.1;color:#fff}
.vx-f dd small{display:block;margin-top:8px;font-size:var(--vt-small,13px);font-weight:400;letter-spacing:0;line-height:1.5;color:var(--vx-mute)}
.vx-f dd a{color:#fff!important;text-decoration:none!important}

/* ---------- rate rows (INDEX: a rule extends on the active row) ---------- */
.vx-rows{list-style:none;margin:0;padding:0;border-top:1px solid var(--vx-line)}
.vx-rows li{position:relative;display:grid;grid-template-columns:minmax(0,1.1fr) minmax(0,1.4fr) auto;gap:24px;align-items:baseline;padding:18px 0;border-bottom:1px solid var(--vx-line);transition:background-color .4s ease}
.vx-rows li::before{content:"";position:absolute;left:0;bottom:-1px;height:1px;width:0;background:#fff;transition:width .7s var(--vx-e)}
.vx-rows li:hover::before{width:100%}
.vx-rows b{font-weight:700;font-size:var(--vt-lead,clamp(16px,1.5vw,21px));letter-spacing:-.015em;color:#fff;text-transform:lowercase}
.vx-rows span{font-size:var(--vt-small,13px);line-height:1.55;color:var(--vx-mute)}
.vx-rows em{font-style:normal;font-size:var(--vt-body,16px);color:#fff;white-space:nowrap;text-align:right;font-variant-numeric:tabular-nums}

/* ---------- two-column composition ---------- */
.vx-split{display:grid;grid-template-columns:minmax(0,1fr) minmax(0,1.25fr);gap:clamp(32px,6vw,96px);align-items:start}
.vx-split--rev{grid-template-columns:minmax(0,1.25fr) minmax(0,1fr)}
.vx-media{position:relative;margin:0;overflow:hidden;border-radius:2px;background:#050505;box-shadow:0 0 0 1px var(--vx-line),0 40px 80px -40px rgba(0,0,0,.9)}
.vx-media img{display:block;width:100%;height:100%;object-fit:cover;filter:grayscale(1);transition:transform 1.4s var(--vx-e)}
.vx-media::after{content:"";position:absolute;inset:0;background:linear-gradient(180deg,rgba(0,0,0,0) 55%,rgba(0,0,0,.55));pointer-events:none}
.vx-media:hover img{transform:scale(1.03)}
.vx-media figcaption{position:absolute;left:16px;bottom:14px;z-index:1;font-size:var(--vt-label,11px);letter-spacing:.2em;text-transform:uppercase;color:#cfcfcf}

/* ---------- steps ---------- */
.vx-steps{list-style:none;margin:0;padding:0;display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:0;border-top:1px solid var(--vx-line);counter-reset:vx}
.vx-steps li{counter-increment:vx;padding:22px 24px 0 0;border-right:1px solid var(--vx-line)}
.vx-steps li+li{padding-left:24px}
.vx-steps li:last-child{border-right:0}
.vx-steps li::before{content:"0" counter(vx);display:block;font-size:var(--vt-label,11px);letter-spacing:.2em;color:var(--vx-mute);margin-bottom:14px}
.vx-steps b{display:block;font-size:var(--vt-lead,19px);font-weight:700;letter-spacing:-.015em;text-transform:lowercase;color:#fff}
.vx-steps span{display:block;margin-top:8px;font-size:var(--vt-small,13px);line-height:1.6;color:var(--vx-mute);max-width:34ch}

/* ---------- home: where to go (ALIGN: rule draws on the chosen column) ---------- */
.vx-index{display:grid;grid-template-columns:repeat(4,minmax(0,1fr));gap:0;border-top:1px solid var(--vx-line)}
.vx-ix{position:relative;padding:26px 24px 30px 0;border-right:1px solid var(--vx-line);display:flex;flex-direction:column;min-height:280px}
.vx-ix+.vx-ix{padding-left:24px}
.vx-ix:last-child{border-right:0}
.vx-ix::before{content:"";position:absolute;left:0;right:0;top:-1px;height:1px;background:#fff;transform:scaleX(0);transform-origin:left;transition:transform .8s var(--vx-e)}
.vx-ix+.vx-ix::before{left:0}
.vx-ix:hover::before,.vx-ix:focus-within::before{transform:scaleX(1)}
.vx-ix .vx-k{margin-bottom:28px}
.vx-ix h3{margin:0;font-size:var(--vt-sub,28px);font-weight:700;letter-spacing:-.03em;line-height:1;text-transform:lowercase;color:#fff}
.vx-ix p{margin:12px 0 0;font-size:var(--vt-small,13px);line-height:1.6;color:var(--vx-mute);max-width:30ch;transition:color .4s}
.vx-ix:hover p{color:var(--vx-body)}
.vx-ix .vx-acts{margin-top:auto;padding-top:24px;display:flex;flex-direction:column;gap:12px;align-items:flex-start}

/* ---------- sticky sub-index (academy) ---------- */
.vx-sub{position:sticky;top:0;z-index:20;transition:background-color .35s var(--vx-e);background:rgba(0,0,0,.94);border-top:1px solid var(--vx-line);border-bottom:1px solid var(--vx-line)}
.vx-sub ul{list-style:none;margin:0 auto;padding:0 6vw;max-width:1240px;display:flex;gap:4px;overflow-x:auto;scrollbar-width:none}
.vx-sub ul::-webkit-scrollbar{display:none}
.vx-sub a{position:relative;display:block;padding:16px 14px;font-size:13px;letter-spacing:.14em;color:var(--vx-mute)!important;text-decoration:none!important;white-space:nowrap;transition:color .4s}
.vx-sub a::after{content:"";position:absolute;left:14px;right:14px;bottom:-1px;height:1px;background:#fff;transform:scaleX(0);transition:transform .6s var(--vx-e)}
.vx-sub a:hover{color:#fff!important}
.vx-sub a.is-on{color:#fff!important}
.vx-sub a.is-on::after{transform:scaleX(1)}

body:has(.vxn:not(.vxn-hide)) .vx-sub{top:85px}
@media (max-width:1000px){body:has(.vxn:not(.vxn-hide)) .vx-sub{top:69px}}
/* ---------- path chooser (academy) ---------- */
.vx-paths{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:12px}
.vx-path{position:relative;display:flex;flex-direction:column;padding:26px;border:1px solid var(--vx-line);border-radius:2px;background:linear-gradient(180deg,#080808,#000);color:#fff!important;text-decoration:none!important;min-height:250px;transition:border-color .45s ease,transform .45s var(--vx-e)}
.vx-path:hover,.vx-path:focus-visible{border-color:rgba(255,255,255,.55);transform:translateY(-3px)}
.vx-path .vx-k{margin-bottom:22px}
.vx-path b{font-size:var(--vt-sub,28px);font-weight:700;letter-spacing:-.03em;text-transform:lowercase;line-height:1}
.vx-path span{display:block;margin-top:12px;font-size:var(--vt-small,13px);line-height:1.6;color:var(--vx-mute)}
.vx-path i{font-style:normal;margin-top:auto;padding-top:20px;font-size:13px;color:#fff;display:flex;justify-content:space-between;border-top:1px solid var(--vx-line)}

/* academy tier price tag (added inside existing course entries) */
.vx-fee{display:inline-block;margin:10px 0 0;padding:6px 12px;border:1px solid var(--vx-line2);border-radius:40px;font-size:12px;letter-spacing:.04em;color:#fff;font-variant-numeric:tabular-nums}

/* copy chip (connect) */
.vx-copy{appearance:none;background:none;border:1px solid var(--vx-line);border-radius:40px;color:var(--vx-mute);font:inherit;font-size:11px;letter-spacing:.14em;text-transform:uppercase;padding:6px 12px;margin-left:12px;cursor:pointer;vertical-align:middle;transition:color .3s,border-color .3s}
.vx-copy:hover{color:#fff;border-color:#fff}
.vx-copy.is-done{color:#fff;border-color:#fff}

/* ---------- mobile action bar (Fitts: primary action within thumb reach) ---------- */
.vx-bar{display:none}
@media (max-width:760px){
  .vx-bar{display:flex;position:fixed;left:12px;right:12px;bottom:calc(12px + env(safe-area-inset-bottom));z-index:9990;align-items:center;justify-content:space-between;gap:12px;padding:8px 8px 8px 18px;background:#0a0a0a;border:1px solid var(--vx-line2);border-radius:40px;box-shadow:0 18px 40px -10px rgba(0,0,0,.9);transform:translateY(160%);transition:transform .6s var(--vx-e);font-family:Inter,sans-serif}
  .vx-bar.is-on{transform:none}
  .vx-bar span{font-size:12px;line-height:1.3;color:var(--vx-mute)}
  .vx-bar span b{display:block;color:#fff;font-weight:700;font-size:13px;text-transform:lowercase}
  .vx-bar a{display:inline-flex;align-items:center;min-height:44px;padding:0 20px;border-radius:40px;background:#fff;color:#000!important;font-size:14px;text-decoration:none!important;white-space:nowrap}
}

/* ---------- SEAT: content settles into place once, when its section is reached ---------- */
.vx-seat{opacity:0;transform:translateY(18px);transition:opacity .9s var(--vx-e),transform 1.1s var(--vx-e)}
.vx-seat.is-in{opacity:1;transform:none}
.vx-seat.d1{transition-delay:.08s}.vx-seat.d2{transition-delay:.16s}.vx-seat.d3{transition-delay:.24s}

/* ---------- responsive recomposition ---------- */
@media (max-width:1024px){
  .vx-facts{grid-template-columns:repeat(2,minmax(0,1fr))}
  .vx-f:nth-child(2){border-right:0}
  .vx-f:nth-child(3){padding-left:0}
  .vx-f:nth-child(n+3){border-top:1px solid var(--vx-line)}
  .vx-index{grid-template-columns:repeat(2,minmax(0,1fr))}
  .vx-ix:nth-child(2){border-right:0}
  .vx-ix:nth-child(3){padding-left:0}
  .vx-ix:nth-child(n+3){border-top:1px solid var(--vx-line)}
  .vx-paths{grid-template-columns:1fr}
  .vx-path{min-height:0}
}
@media (max-width:760px){
  .vx-head,.vx-split,.vx-split--rev{grid-template-columns:1fr}
  .vx-facts,.vx-index,.vx-steps{grid-template-columns:1fr}
  .vx-f,.vx-f+.vx-f,.vx-ix,.vx-ix+.vx-ix,.vx-steps li,.vx-steps li+li{padding-left:0;padding-right:0;border-right:0}
  .vx-f+.vx-f,.vx-ix+.vx-ix,.vx-steps li+li{border-top:1px solid var(--vx-line)}
  .vx-f{padding-bottom:18px}
  .vx-ix{min-height:0;padding-bottom:26px}
  .vx-steps li{padding-bottom:20px}
  .vx-rows li{grid-template-columns:1fr auto;gap:6px 16px}
  .vx-rows span{grid-column:1/-1;grid-row:2}
  .vx-row .vx-cta{flex:1 1 100%;justify-content:center}
  body:has(.vxn:not(.vxn-hide)) .vx-sub{top:69px}
  .vx-sub a{padding:14px 10px}
}
@media (max-width:360px){.vx-in{padding-left:20px;padding-right:20px}.vx-sub ul{padding:0 12px}}
@media (prefers-reduced-motion:reduce){.vx-seat{opacity:1;transform:none;transition:none}.vx *{transition:none!important}.vx-bar{transition:none}}
/* footer: department paths */
.vx-foot-dept{margin:18px auto 0!important;max-width:640px;font-size:13px!important;letter-spacing:.04em;line-height:2.1!important;text-align:center}
.vx-foot-dept a{color:#fff!important;text-decoration:none!important;opacity:.72;transition:opacity .3s;white-space:nowrap}
.vx-foot-dept a:hover,.vx-foot-dept a:focus-visible{opacity:1}
.vx-foot-dept i{font-style:normal;color:#5a5a5a;margin:0 8px}
/* guard vx typography against inherited site heading styles */
.vx{text-align:left}
.vx .vx-k{color:var(--vx-mute)!important;font-weight:400!important;text-transform:uppercase!important;letter-spacing:.2em!important;font-size:var(--vt-label,11px)!important;line-height:1.4!important}
.vx-f{padding-bottom:22px}
.vx-facts+.vx-note{margin-top:20px}
@media (max-width:760px){
  .vx-facts{grid-template-columns:repeat(2,minmax(0,1fr));border-top:0}
  .vx-f,.vx-f+.vx-f{padding:18px 12px 18px 0;border-top:1px solid var(--vx-line);border-right:0}
  .vx-f:nth-child(odd){border-right:1px solid var(--vx-line)}
  .vx-f:nth-child(even){padding-left:16px}
  .vx-f dd{font-size:20px}
}
/* align legacy text sections with the vx grid */
.vx-pad .content-wrapper{padding-left:6vw!important;padding-right:6vw!important;box-sizing:border-box}
/* records: releases behave like objects; the newest one leads */
.vd-grid>.vd-item{position:relative}
.vd-item .vd-art{display:block;overflow:hidden;box-shadow:0 0 0 1px rgba(255,255,255,.08);transition:transform .6s var(--vx-e),box-shadow .6s ease}
.vd-item .vd-art img{transition:transform 1.2s var(--vx-e)}
.vd-item:hover .vd-art,.vd-item:focus-visible .vd-art{transform:translateY(-4px);box-shadow:0 0 0 1px rgba(255,255,255,.32),0 30px 50px -25px rgba(0,0,0,.95)}
.vd-item:hover .vd-art img{transform:scale(1.025)}
.vd-item .vd-art::after{content:"beatport ↗";position:absolute;right:10px;top:10px;padding:5px 9px;border-radius:40px;background:rgba(0,0,0,.72);color:#fff;font:11px/1 Inter,sans-serif;letter-spacing:.1em;opacity:0;transform:translateY(-4px);transition:opacity .35s ease,transform .5s var(--vx-e)}
.vd-item:hover .vd-art::after,.vd-item:focus-visible .vd-art::after{opacity:1;transform:none}
.vd-item .vd-art{position:relative}
.vd-list .vd-grid>.vd-item:first-child{grid-column:span 2;grid-row:span 2}@media (max-width:767px){.vd-list .vd-grid>.vd-item:first-child{grid-column:1/-1;grid-row:auto}}
.vd-grid>.vd-item:first-child .vd-t{font-size:var(--vt-sub,28px)!important;font-weight:700;letter-spacing:-.03em;line-height:1.1}
.vd-grid>.vd-item:first-child .vd-art::before{content:"latest release";position:absolute;left:12px;bottom:12px;z-index:1;padding:6px 10px;border-radius:40px;background:rgba(0,0,0,.72);color:#fff;font:11px/1 Inter,sans-serif;letter-spacing:.18em;text-transform:uppercase}
.vx-sr{position:absolute!important;width:1px!important;height:1px!important;padding:0!important;margin:-1px!important;overflow:hidden!important;clip:rect(0 0 0 0)!important;white-space:nowrap!important;border:0!important}
@media (max-width:360px){.vx-bar{padding-left:14px}.vx-bar span{font-size:0}.vx-bar span b{font-size:12px}.vx-bar a{padding:0 16px}}
/* video hero: every page opens on its own film, content follows */
.vx-hero{position:relative;height:100vh;height:100svh;min-height:520px;overflow:hidden;background:#000}
.vx-hero-m{position:absolute;inset:0}
.vx-hero-m video{display:block;width:100%;height:100%;object-fit:cover}
.vx-hero::after{content:"";position:absolute;inset:0;background:linear-gradient(180deg,rgba(0,0,0,.45) 0%,rgba(0,0,0,0) 30%,rgba(0,0,0,0) 62%,rgba(0,0,0,.85) 100%);pointer-events:none}
.vx-hero-in{position:absolute;left:6vw;right:6vw;bottom:clamp(32px,7vh,72px);z-index:2;display:flex;justify-content:space-between;align-items:flex-end;gap:24px;font-family:Inter,sans-serif}
.vx-hero-k{margin:0;font-size:11px;letter-spacing:.2em;text-transform:uppercase;color:#d8d8d8}
.vx-hero-cue{font-size:11px;letter-spacing:.2em;text-transform:uppercase;color:#8a8a8a!important;text-decoration:none!important;transition:color .3s}
.vx-hero-cue:hover,.vx-hero-cue:focus-visible{color:#fff!important}
.vx-herofull{min-height:100vh!important;min-height:100svh!important}
.section-background video.vx-swap{position:absolute;inset:0;width:100%;height:100%;object-fit:cover}
/* ===== book system (from the 2026/2027 VOYCE books) ===== */
/* groups: a bold label over a quiet three-column list, as on "what we do" */
.vx-groups{display:grid;gap:clamp(28px,3.4vw,44px)}
.vx-g h3{margin:0 0 12px;font-size:var(--vt-body,16px);font-weight:700;letter-spacing:-.005em;line-height:1.3;color:#fff;text-transform:lowercase}
.vx-g p.vx-gl{margin:-6px 0 12px;font-size:var(--vt-small,13px);line-height:1.6;color:#8a8a8a;max-width:70ch}
.vx-g ul{list-style:none;margin:0;padding:0;display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:6px 28px}
.vx-g li{margin:0;padding:0;font-size:var(--vt-small,13px);line-height:1.55;color:#b4b4b4}
.vx-foot{margin:clamp(28px,3vw,40px) 0 0;padding-top:14px;border-top:1px solid rgba(255,255,255,.08);font-size:12px;line-height:1.6;color:#8a8a8a;max-width:110ch}
.vx-foot a{color:#d8d8d8!important;text-decoration:underline;text-decoration-color:rgba(255,255,255,.3);text-underline-offset:3px}
/* numbered rows: 01 title / description, on fine rules */
.vx-num{list-style:none;margin:0;padding:0;border-top:1px solid rgba(255,255,255,.1)}
.vx-num li{position:relative;display:grid;grid-template-columns:48px minmax(140px,240px) minmax(0,1fr);gap:20px;padding:22px 0;border-bottom:1px solid rgba(255,255,255,.1)}
.vx-num li::after{content:"";position:absolute;left:0;bottom:-1px;height:1px;width:0;background:rgba(255,255,255,.7);transition:width .8s var(--vx-e)}
.vx-num li:hover::after{width:100%}
.vx-num i{font-style:normal;font-size:11px;letter-spacing:.2em;color:#8a8a8a;padding-top:4px}
.vx-num b{font-size:var(--vt-body,16px);font-weight:700;color:#fff;text-transform:lowercase;line-height:1.35}
.vx-num span{font-size:var(--vt-small,13px);line-height:1.65;color:#b4b4b4;max-width:62ch}
/* tabs: one selection at a time, the active one locks under a rule */
.vx-tabs [role=tablist]{display:flex;flex-wrap:wrap;gap:0;border-bottom:1px solid rgba(255,255,255,.12);margin-bottom:clamp(28px,3vw,40px)}
.vx-tabs [role=tab]{appearance:none;background:none;border:0;position:relative;padding:14px 18px 16px 0;margin-right:22px;font:inherit;font-size:var(--vt-body,16px);font-weight:700;letter-spacing:-.01em;color:#5c5c5c;cursor:pointer;text-transform:lowercase;transition:color .4s ease}
.vx-tabs [role=tab]::after{content:"";position:absolute;left:0;right:18px;bottom:-1px;height:1px;background:#fff;transform:scaleX(0);transform-origin:left;transition:transform .7s var(--vx-e)}
.vx-tabs [role=tab]:hover,.vx-tabs [role=tab]:focus-visible{color:#d8d8d8;outline:none}
.vx-tabs [role=tab][aria-selected=true]{color:#fff}
.vx-tabs [role=tab][aria-selected=true]::after{transform:scaleX(1)}
.vx-tabs [role=tab] small{display:block;font-size:11px;font-weight:400;letter-spacing:.16em;text-transform:uppercase;color:#8a8a8a;margin-bottom:4px}
.vx-tabs [role=tabpanel]{animation:vxSeat .6s var(--vx-e)}
.vx-tabs [role=tabpanel][hidden]{display:none}
@keyframes vxSeat{from{opacity:0;transform:translateY(8px)}to{opacity:1;transform:none}}
.vx-panel{display:grid;grid-template-columns:minmax(0,1fr) minmax(0,1.6fr);gap:clamp(28px,5vw,72px);align-items:start}
.vx-panel .vx-pk{font-size:11px;letter-spacing:.2em;text-transform:uppercase;color:#8a8a8a;margin:0 0 10px}
.vx-panel .vx-pt{font-size:var(--vt-sub,28px);font-weight:700;letter-spacing:-.03em;line-height:1.08;color:#fff;margin:0;text-transform:lowercase}
.vx-panel .vx-pp{font-size:var(--vt-body,16px);line-height:1.7;color:#d8d8d8;margin:14px 0 0;max-width:46ch}
.vx-panel .vx-row{margin-top:24px}
/* department environments: colour as light, never as UI */
.vx--rec{background:radial-gradient(70% 90% at 0% 0%,rgba(140,8,14,.28),rgba(140,8,14,0) 62%),#000!important}
.vx--rec.vx--edge::before{background:linear-gradient(90deg,rgba(200,20,30,0),rgba(200,20,30,.55),rgba(200,20,30,0))}
.vx--acad .vx-h::after,.vx--acad .vx-h--u::after{content:"";display:block;width:64px;height:2px;margin-top:16px;background:linear-gradient(90deg,#f39200,#e3262b 40%,#9b3fd1 70%,#3b6fe0)}
/* cover lockup after the hero: voyce / department / one line */
.vx-cover .vx-ck{margin:0;font-size:clamp(20px,2vw,26px);font-weight:400;color:#fff;line-height:1}
.vx-cover .vx-cd{margin:4px 0 0;font-size:var(--vt-display,68px);font-weight:700;letter-spacing:-.05em;line-height:.95;color:#fff;text-transform:lowercase}
.vx-cover .vx-cl1{margin:20px 0 0;font-size:var(--vt-lead,19px);line-height:1.55;color:#d8d8d8;max-width:56ch}
.vx--acad .vx-cd{background:linear-gradient(90deg,#f39200,#e3262b 38%,#9b3fd1 68%,#3b6fe0);-webkit-background-clip:text;background-clip:text;color:transparent}
.vx--rec .vx-cd{color:#fff}
/* academy course finder */
.vx-finder .vx-levels{display:flex;flex-wrap:wrap;gap:8px;margin:0 0 22px}
.vx-finder .vx-levels button{appearance:none;font:inherit;font-size:12px;letter-spacing:.08em;text-transform:lowercase;color:#b4b4b4;background:transparent;border:1px solid rgba(255,255,255,.18);border-radius:40px;padding:8px 14px;min-height:36px;cursor:pointer;transition:color .3s,border-color .3s,background .3s}
.vx-finder .vx-levels button:hover{color:#fff;border-color:rgba(255,255,255,.5)}
.vx-finder .vx-levels button[aria-pressed=true]{background:#fff;color:#000;border-color:#fff}
.vx-course{border-top:1px solid rgba(255,255,255,.1)}
.vx-course:last-child{border-bottom:1px solid rgba(255,255,255,.1)}
.vx-course[hidden]{display:none}
.vx-course summary{list-style:none;cursor:pointer;display:grid;grid-template-columns:minmax(0,1.2fr) minmax(0,.8fr) auto 28px;gap:20px;align-items:baseline;padding:20px 0;transition:background-color .3s}
.vx-course summary::-webkit-details-marker{display:none}
.vx-course summary b{font-size:var(--vt-lead,19px);font-weight:700;letter-spacing:-.015em;color:#fff;text-transform:lowercase}
.vx-course summary span{font-size:11px;letter-spacing:.18em;text-transform:uppercase;color:#8a8a8a}
.vx-course summary em{font-style:normal;font-size:13px;color:#b4b4b4;white-space:nowrap}
.vx-course summary i{font-style:normal;justify-self:end;color:#8a8a8a;transition:transform .5s var(--vx-e)}
.vx-course[open] summary i{transform:rotate(45deg);color:#fff}
.vx-course summary:focus-visible{outline:1px solid #fff;outline-offset:4px}
.vx-cbody{padding:4px 0 34px;display:grid;grid-template-columns:minmax(0,1fr) minmax(0,1fr);gap:22px 48px;animation:vxSeat .6s var(--vx-e)}
.vx-cbody .vx-ci{grid-column:1/-1;font-size:var(--vt-body,16px);line-height:1.7;color:#d8d8d8;max-width:72ch;margin:0}
.vx-cbody h4{margin:0 0 8px;font-size:11px;font-weight:400;letter-spacing:.2em;text-transform:uppercase;color:#8a8a8a}
.vx-cbody p{margin:0;font-size:var(--vt-small,13px);line-height:1.65;color:#b4b4b4}
.vx-cbody ul{grid-column:1/-1;list-style:none;margin:0;padding:0;display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:8px 48px}
.vx-cbody li{position:relative;padding-left:18px;font-size:var(--vt-small,13px);line-height:1.6;color:#b4b4b4}
.vx-cbody li::before{content:"";position:absolute;left:0;top:.7em;width:8px;height:1px;background:#5c5c5c}
.vx-cbody .vx-cfull{grid-column:1/-1}
.vx-cbody .vx-row{grid-column:1/-1;margin-top:6px}
@media (max-width:1024px){.vx-g ul{grid-template-columns:repeat(2,minmax(0,1fr))}.vx-panel{grid-template-columns:1fr}}
@media (max-width:760px){
  .vx-g ul{grid-template-columns:1fr 1fr;gap:6px 18px}
  .vx-num li{grid-template-columns:36px 1fr;gap:6px 14px}
  .vx-num li span{grid-column:2}
  .vx-tabs [role=tablist]{flex-wrap:nowrap;overflow-x:auto;scrollbar-width:none}
  .vx-tabs [role=tab]{white-space:nowrap;margin-right:14px}
  .vx-course summary{grid-template-columns:1fr 24px;gap:4px 12px}
  .vx-course summary span,.vx-course summary em{grid-column:1}
  .vx-course summary i{grid-row:1;grid-column:2}
  .vx-cbody,.vx-cbody ul{grid-template-columns:1fr}
}
@media (max-width:400px){.vx-g ul{grid-template-columns:1fr}}
@media (prefers-reduced-motion:reduce){.vx-tabs [role=tabpanel],.vx-cbody{animation:none}}

/* forms: keep the 3D field quiet behind form fields */
.vfm-sec,section.vx:has(.vfm),section.page-section:has(.vfm)>.section-background,section.page-section:has(.vfm-inline:not([hidden]))>.section-background,.vfm-inline:not([hidden]){background:rgba(0,0,0,.9)!important}

/* vp-hb mobile fix: facts bar takes its own row */
@media (max-width:767px){section:has(>.vp-hb){flex-wrap:wrap}section>.vp-hb{flex:0 0 100%;width:100%;max-width:100%;order:99;padding-left:16px;padding-right:16px;box-sizing:border-box}.vp-hb-in{flex-wrap:wrap;gap:16px}.vp-hb-in>*{flex:1 1 100%;min-width:0}.vp-acts{flex-wrap:wrap}}

/* ---------- academy hero: stack on mobile ----------
   The hero section is display:flex / row / nowrap, and two in-flow children share the
   row: .content-wrapper (headline + lede) and .va-hb (the injected facts panel). At 390
   that gave the text 186px against the panel's 204px, so the h1 broke mid-word into
   "acade / my" and the lede ran 139px wide and 460px tall. At 320 the h1 took three
   lines and the lede was 85px wide and 805px tall.
   Measured after: full width, h1 on one line, and the section 417px shorter at 320. */
@media (max-width:760px){
  section:has(>.va-hb){flex-wrap:wrap;height:auto;min-height:0}
  section:has(>.va-hb)>.content-wrapper,
  section:has(>.va-hb)>.va-hb{flex:1 0 100%;max-width:100%}
}

/* academy hero, part 2: clear the HUD and collapse the reserved grid rows.
   Stacking the hero (above) made the h1 full width, which pushed it under the
   .vf-hud coordinate/clock overlay sitting at x 208-370, y 79-111 - measured clash on
   all four HUD strings. And the fluid-engine grid reserves six fixed 85.48px rows for a
   text block whose content is ~220px, leaving a 352px void above the facts panel.
   display:block lets the grid size to its content; the padding restores the gutter the
   grid columns were providing and clears the HUD. Measured after, at 320/360/390/430:
   symmetric insets, h1 on one line, zero HUD clash, void 352 -> 103-145, hero not taller. */
@media (max-width:760px){
  section:has(>.va-hb)>.content-wrapper{height:auto;min-height:0}
  section:has(>.va-hb)>.content-wrapper .content{height:auto;min-height:0}
  section:has(>.va-hb) .fluid-engine{display:block;padding:56px clamp(20px,5.4vw,28px) 0}
  section:has(>.va-hb) .fluid-engine>.fe-block{width:100%;max-width:100%}
}

/* ---------- hero facts bar: let its section grow to fit ----------
   On /access the .vp-hb facts bar sits in a section with a fixed computed height of
   296px while its list content runs to 405px, so it SPILLED 109px into the hero section
   below. Measured result: the "voyce access" headline sat on top of "90 DAYS FOR ACADEMY
   STUDENTS", and the "apply for access" button cut through the opening paragraph - three
   text-on-text collisions.
   The handoff records this bar as already wrapping correctly on mobile; it does not.
   Letting the section size to its content gives 0 overlaps and 0 spill. */
@media (max-width:760px){
  /* !important is required and measured, not reflexive: the height comes from a
     Squarespace section-height--* class rule whose specificity beats
     section:has(.vp-hb) (0,1,1). Plain height:auto leaves it at 295.938px; with
     !important the section grows to 498.875px and the spill goes to 0. The handoff's
     own engineering notes sanction this for Squarespace overrides. */
  section:has(.vp-hb){height:auto!important;min-height:0!important}
  section:has(.vp-hb) .content-wrapper{height:auto!important;min-height:0!important}
}

/* ---------- align form sections to the site's text column ----------
   Measured on /studios at 390: body text sits at left=23px across 20 blocks, but the
   four blocks inside the enquiry form sit at left=20px. Cause is two containers that are
   identical except for one declaration:

     .vx-in           max-width:1240px; margin:0 auto; padding: clamp(56px,7vw,104px) 6vw
     .vfm-sec .vfm-in max-width:1240px; margin:0 auto; padding: clamp(56px,7vw,104px) clamp(20px,5vw,80px)

   At 390, 5vw is 19.5 so the form clamps to its 20px floor while the page uses 6vw=23.4.
   The gap widens on desktop: at 1440 the site uses 86.4px and the form 72px, a 14px
   misalignment. Matching the horizontal padding aligns both.
   section.vfm-sec is (0,2,1), which beats the runtime-injected .vfm-sec .vfm-in (0,2,0)
   without needing !important. */
section.vfm-sec .vfm-in{padding-left:6vw;padding-right:6vw}

/* ---------- go360 hero: put the content block back in normal flow ----------
   Two mechanisms broke this hero on mobile, both measured:

   1. The .fe-block carrying the h1 and lede is position:absolute inside the
      fluid-engine, so it escapes the grid's box entirely. An absolute box contributes
      no height, which is why the grid measured 0-59px while its content needed 198px,
      and why every height:auto attempt was a no-op.
   2. That same block carries transform matrix(1,0,0,1,0,-87.46) - a parallax translate
      driven through Squarespace's --block-transform variable. It is NOT the .v3-float
      class (only .content-wrapper and .vp-hb carry that), so targeting .v3-float alone
      missed it.

   Result before: h1 at y10-54 behind the 69px fixed nav, lede running to y185 across
   the facts bar at y127, and 8 text-on-text overlaps whose count shifted with scroll
   position because the parallax moves as you scroll.

   The #page prefix is needed: a competing !important rule beat the same declarations at
   lower specificity (proved by forcing it inline, which worked where the stylesheet
   rule did not).

   Scoped to this one section id deliberately. section:has(>.vp-hb) would also match
   /access, /studios and /films, which measure clean at 0 spill and 0 overlaps - there is
   no reason to rebuild their grids.

   Measured after, at 390: overlaps 8 -> 0, grid height 0 -> 198, facts bar moved from
   under the text (y127) to below it (y322), horizontal overflow 0. */
@media (max-width:760px){
  #page section[data-section-id="6a8d4a866bfd3d33e45a0e92"] .v3-float{transform:none!important;transition:none!important}
  #page section[data-section-id="6a8d4a866bfd3d33e45a0e92"] div.fluid-engine{display:flex!important;flex-direction:column!important;grid-template-rows:none!important;grid-template-columns:none!important;row-gap:0!important;padding:56px 6vw 0!important;height:auto!important;min-height:0!important}
  #page section[data-section-id="6a8d4a866bfd3d33e45a0e92"] div.fluid-engine>div.fe-block{position:relative!important;grid-area:auto!important;width:100%!important;max-width:100%!important;top:auto!important;left:auto!important;transform:none!important;--block-transform:none!important}
}

/* Match the site's narrow-width padding floor. .vx-in takes 20px below 360px, while
   plain 6vw gives 19.2px at 320 - a 1px mismatch the main alignment rule left behind. */
@media (max-width:360px){
  section.vfm-sec .vfm-in{padding-left:20px;padding-right:20px}
}

/* ---------- §19 touch targets ----------
   Measured at 390: .vac-lvl rendered 24px tall and .vac-tab 39px, both under the 44px
   minimum, and the nav logo 18px.

   Real height rather than a pseudo-element hit area on the two buttons, because the
   pseudo approach was TESTED AND FAILED on .vac-tab: a tap 4px outside the box landed on
   div.vac-bar, the pill clipping its own ::after. It works on .vxn-logo, verified by
   hit-testing 4px above and below, so that one keeps the invisible expansion and its
   18px visual.

   A blanket 44px hit area would have made things worse: .vac-lvl wraps onto rows only
   6px apart, so expanding each by 10px top and bottom would overlap neighbouring rows by
   14px and send taps to the wrong filter. Growing the real box keeps the 6px separation
   intact. Verified after: both 44px, both hit-test OK, row gap still 6px, 0 overflow. */
@media (max-width:760px){
  .vac-lvl{min-height:44px!important}
  .vac-tab{min-height:44px!important}
  .vxn-logo{position:relative}
  .vxn-logo::after{content:"";position:absolute;left:0;right:0;top:50%;transform:translateY(-50%);height:44px}
}

/* §19 touch targets, part 2: the studios service triggers.
   Those rows are <b role="button" tabindex="0"> at 327x24 with an 86px vertical pitch,
   so 62px of clear space sits between them and a 44px hit area cannot reach a neighbour.
   Hit-tested after: HIT at centre, 8px above and 8px below.
   .vx-link (28px) expands upward only - a tap 8px below still lands on div.vx-in - so it
   is a partial gain rather than a full fix, kept because it adds area without taking any
   away. */
@media (max-width:760px){
  #page b[role="button"],#page a.vx-link{position:relative}
  #page b[role="button"]::after,#page a.vx-link::after{content:"";position:absolute;left:0;right:0;top:50%;transform:translateY(-50%);height:44px}
}
/* record-label mobile hero: a collection-scoped inline rule in the page forces
   padding-top:0!important on .vr-hero, which put the h1 entirely behind the
   69px fixed nav at <=767px. --header-height is 0px site-wide so the stock
   calc() collapsed to 9vh and could not clear the nav on short viewports.
   Key off the real mobile nav height instead. Desktop is unaffected. */
@media (max-width:767px){html body.collection-68b054d32ed0fe4c0ec0f528 section.vr-hero{padding-top:calc(69px + 6vh)!important}}
/* mobile tap targets: standalone (non-prose) links that were 24-25px tall.
   Hit area only - no layout change. Scoped to dd>a and .vb-h heading links,
   which were verified to carry no existing ::after on any page, so nothing
   decorative is overwritten. Inline links inside <p> are deliberately left
   alone: a 44px box on a 16px inline link overlaps neighbouring text lines. */
@media (max-width:760px){
#page dd>a[href],#page h2.vb-h>a[href],#page h3.vb-h>a[href]{position:relative}
#page dd>a[href]::after,#page h2.vb-h>a[href]::after,#page h3.vb-h>a[href]::after{content:"";position:absolute;left:0;right:0;top:50%;transform:translateY(-50%);height:44px}
}
/* mobile tap targets, round 2. academy tier switcher (40px) and footer command
   button (34px) get real height; pricing sub-nav links, pricing section-heading
   links and the hero scroll cue get hit-area overlays only (no layout change).
   All verified to carry no existing ::after, so nothing decorative is lost.
   Net page-height cost measured at +10px. Inline prose links untouched. */
@media (max-width:760px){
.vac-tsw-b{min-height:44px!important}
.vf-k{min-height:44px}
#page .vx-hero-cue,#page nav.vp-nav>a[href],#page h2.vp-h>a[href]{position:relative}
#page .vx-hero-cue::after,#page nav.vp-nav>a[href]::after,#page h2.vp-h>a[href]::after{content:"";position:absolute;left:0;right:0;top:50%;transform:translateY(-50%);height:44px}
}
/* mobile tap targets, round 3. connect contact-directory email rows (30px):
   hit-area overlay only, zero layout cost - row pitch measured at 54px so the
   44px box cannot overlap a neighbour. The one mailto inside a <p> is excluded
   on purpose. Map link and radio mute button get real height. */
@media (max-width:760px){
#page li>a[href^="mailto:"]{position:relative}
#page li>a[href^="mailto:"]::after{content:"";position:absolute;left:0;right:0;top:50%;transform:translateY(-50%);height:44px}
a.voyce-map-open{min-height:44px;display:inline-flex;align-items:center}
button.vr-sm{min-height:44px}
}
/* mobile tap targets, round 4. record-label availability-row icon links (40px).
   Horizontal row, so a 44px overlay has no vertical neighbour to collide with.
   Zero layout cost - page height measured identical before and after. */
@media (max-width:760px){
#page .va-avail-row>a[href]{position:relative}
#page .va-avail-row>a[href]::after{content:"";position:absolute;left:0;right:0;top:50%;transform:translateY(-50%);height:44px}
}
/* /pricing mobile: the hero bottom chrome (.vx-hero-in, "VOYCE . PRICING / SCROLL")
   is position:absolute anchored to the hero bottom. At <=390 the following body
   paragraph wraps to 168px (vs 96px at 768) and grows into that band, putting
   label text directly over body text - 24px of overlap, measured. Desktop is
   clear by 47px at 768 and 66px at 1440, so this is mobile-only.
   All 11 pages carrying .vx-hero-in were collision-tested; only pricing collides,
   so this is scoped to pricing alone and the label is preserved on the other 10.
   Zero layout cost - the element is absolute, so hiding it shifts nothing. */
@media (max-width:760px){
html body.collection-6a8edaa15363f22773324adf section.vx-hero .vx-hero-in{display:none!important}
}
/* films hero CTA: the solid button degrades at mobile only - display:block with
   padding:6px 0 and no horizontal padding, rendering a cramped white pill 58px
   tall beside its 48px ghost sibling. Correct at 768 and 1440 (flex, 0 22px), so
   this restores the declared treatment below the breakpoint only.
   Not our CSS: voyce-ux.css has no vp-b rules; the hero applies .vp-b at runtime
   while the page stylesheet defines .vn-cta - a class-name mismatch.
   The pair then exceeds the row and wraps to two full-width CTAs, matching the
   record-label hero convention. Measured: both 48px, 318px wide, 12px apart. */
@media (max-width:760px){
#page .vp-b.solid{display:inline-flex!important;align-items:center!important;justify-content:center!important;min-height:48px!important;padding:0 22px!important;line-height:1!important}
}
/* Department email CTAs lost their button shape at mobile on 10 pages.
   Cause: 8b9ee26e_custom.css carries a site-wide
     a[href^="mailto:"],a[href^="tel:"]{display:inline-block;padding:6px 0}
   intended for inline email links in prose. Its specificity (0,1,1) beats
   .vn-cta (0,1,0), so any email styled as a button rendered 62px tall with
   zero horizontal padding beside 50px flex siblings. Correct at 768 and 1440,
   broken at or below 767. Restores the .vn-cta treatment for mailto buttons
   only - inline mailto links in prose keep the generic rule untouched.
   Affects films, media360, go360, record-label, academy, symphony, lab,
   tech360, design360, entertainment. Measured spread 12px -> 0px. */
@media (max-width:767px){
a.vn-cta[href^="mailto:"]{display:inline-flex!important;align-items:center!important;justify-content:center!important;min-height:48px!important;padding:0 28px!important}
}
/* Form choice controls: checkbox and radio rows on the access application and
   academy student registration rendered a 26px effective tap target at mobile
   (the input itself is 15px; its label only 26px). Text and tel inputs were
   already 59px. Raise the label row to the 44px minimum used site-wide.
   Measured: access 14 -> 0 under 44px (+149px page height),
   student-registration 9 -> 0 (+91px). No horizontal scroll introduced. */
@media (max-width:760px){
label:has(> input[type=checkbox]),label:has(> input[type=radio]){min-height:44px!important;display:flex!important;align-items:center!important;gap:10px!important}
}
/* /access application form overflowed small viewports. The .voyce-gform-host wrapper
   computed to 377.6px inside a 282px parent, so it sat at left:-29 on a 320 viewport and
   bled off both edges - 4 form controls were clipped off-screen. max-width (not width)
   caps it to the parent without expanding anything at larger sizes.
   Measured at 320: host 378 -> 282, left -29 -> 19, controls clipped 4 -> 0. */
.voyce-gform-host{max-width:100%!important;box-sizing:border-box!important}
.voyce-gform-host form,.voyce-gform-host .field-list,.voyce-gform-host .form-item{max-width:100%!important;box-sizing:border-box!important}
/* Homepage fluid-engine blocks overflowed small viewports: .fe-block carried an explicit
   width:320px PLUS 26px horizontal padding under box-sizing:content-box, totalling 372px
   inside a 320px grid parent (left:-26). Text was spilling off both edges.
   border-box folds the padding into the declared width. Measured at 320: overflow 2 -> 0,
   no change on academy or record-label; home grows 168px because copy now wraps instead
   of overflowing, which is the correct outcome. */
@media (max-width:760px){
.fluid-engine>.fe-block{box-sizing:border-box!important}
}
/* CRITICAL: desktop primary nav was invisible under prefers-reduced-motion.
   voyce-nav.js sets .vxn-links li{opacity:0;animation:vxnIn ...} and the keyframe
   (to{opacity:1}) is the ONLY path to visible. Its reduced-motion block then does
   animation:none!important while resetting opacity via .vxn * (0,1,0) WITHOUT
   !important - which loses to .vxn-links li (0,1,1). Opacity 0 became terminal, so
   reduce-motion visitors saw no navigation at all above 1000px, on every page.
   Fourth instance of the specificity/!important failure class on this project. */
@media (prefers-reduced-motion:reduce){
#page ~ * .vxn-links li,.vxn .vxn-links li,.vxn-links li{opacity:1!important;transform:none!important;animation:none!important}
}
/* /access: Google-Form fieldsets carried the UA default min-width:min-content and
   computed 377.641px inside a 282px parent, pushing legend and radio rows 77px
   off-screen at 320. This was also the origin of the odd 377.641px host width. */
.voyce-gform-host fieldset{min-width:0!important;max-width:100%!important}
.voyce-gform-host legend,.voyce-gform-host .title{max-width:100%!important}
/* PRINT: the site has six independent scroll-reveal systems and had no print rules at all.
   Reveals are IntersectionObserver-driven, and printing never scrolls, so any content the
   reader had not reached printed blank - opacity:0, clip-path inset(0 0 100%) or
   translateY. Force every reveal state to its finished value for print, and drop fixed
   chrome and media that print badly. */
@media print{
.preFade,.preSlide,.fadeIn,.slideIn,.vr-armed,.vx-seat,.vxm-h,.vxm-i,
[class*=preFade],[class*=preSlide],[class*=vxm-]{
opacity:1!important;transform:none!important;clip-path:none!important;
visibility:visible!important;animation:none!important;transition:none!important}
.vxn,.vx-bar,.vf-k,.vx-hero-cue,video,canvas,spline-viewer,iframe[src*=youtube]{display:none!important}
body{background:#fff!important;color:#000!important}
a[href^="http"]::after{content:" (" attr(href) ")";font-size:10px;color:#555}
}
/* PRINT, second pass. The first print block used bare class selectors (0,1,0) and lost the
   cascade to the more specific reveal rules - measured 7 hidden headings on /pricing, only
   1 freed. Raise specificity to html body #page ... (1,1,2), which was verified to win:
   #page h2.vp-h{opacity:1!important} restored the element in the live cascade. */
@media print{
html body #page [class*=preFade],html body #page [class*=preSlide],
html body #page [class*=fadeIn],html body #page [class*=slideIn],
html body #page [class*=vr-armed],html body #page [class*=vx-seat],
html body #page [class*=vxm-],html body #page [class*=vd-],
html body #page h1,html body #page h2,html body #page h3,html body #page h4,
html body #page p,html body #page li,html body #page section,html body #page div{
opacity:1!important;transform:none!important;clip-path:none!important;
visibility:visible!important;animation:none!important;transition:none!important;
filter:none!important}
}
/* FORM CONTRAST (WCAG 2.2 SC 1.4.11 / 1.4.3). voyce-forms.js draws every field as a bare
   underline in rgba(255,255,255,.22), which over #000 composites to #383838 = 1.74:1 -
   below the 3:1 floor for the boundary of a UI component. Fields are background:transparent
   with border:0, so that rule is the ONLY thing marking where an input is. Raised to .38
   = #595959 = 3.56:1. Same single-pixel rule, same colour family, just visible.
   The <b>optional</b> marker and .vfm-note were #5c5c5c = 3.29:1, under the 4.5:1 floor for
   small text - and that marker is the only signal separating required from optional fields.
   Moved to #8a8a8a = 6.41:1, already the label colour. */
.vfm input,.vfm textarea,.vfm select{border-bottom-color:rgba(255,255,255,.38)!important}
.vfm-chips label{border-color:rgba(255,255,255,.38)!important}
.vfm label b,.vfm legend b,.vfm-note{color:#8a8a8a!important}

/* FOCUS NOT OBSCURED (WCAG 2.2 SC 2.4.11). Tab moving focus below the fold scrolled the
   target to viewport top - directly under the 84px fixed nav - so keyboard users lost the
   focused control behind the bar. Also fixes in-page anchors and scrollIntoView. */
html{scroll-padding-top:96px}
@media (max-width:1000px){html{scroll-padding-top:80px}}
/* Skip link (WCAG 2.4.1 Level A). Our nav CSS hides the Squarespace header that held the
   only one, so there was no bypass mechanism at all - 22 Tab presses to reach content.
   Off-screen until focused; lowercase Inter, thin rule, no new visual language. */
.vxn-skip{position:absolute;left:-9999px;top:0;z-index:10000;
background:#000;color:#fff!important;border:1px solid rgba(255,255,255,.5);
font:400 13px/1 Inter,sans-serif;letter-spacing:.04em;text-transform:lowercase;
padding:12px 18px;border-radius:40px;text-decoration:none!important}
.vxn-skip:focus,.vxn-skip:focus-visible{left:18px;top:14px;outline:2px solid #fff;outline-offset:2px}
/* Form error live region. .vfm-msg has role="alert" but voyce-forms.js renders it
   display:none until .is-on, and writes its text BEFORE adding that class - so the
   mutation happens outside the accessibility tree and nothing is announced, including
   the fallback mailto that is the only remaining route when the network fails.
   display:none and visibility:hidden BOTH remove a node from the tree, so clip it
   instead: always present and announceable, visually absent until it has something
   to say. */
.vfm .vfm-msg{display:block!important;position:absolute;width:1px;height:1px;
padding:0!important;margin:-1px!important;overflow:hidden;clip:rect(0 0 0 0);
white-space:nowrap;border-width:0!important}
.vfm .vfm-msg.is-on{position:static;width:auto;height:auto;overflow:visible;
clip:auto;white-space:normal;padding:16px 18px!important;margin:22px 0 0!important;
border:1px solid rgba(255,255,255,.3)!important}

/* WCAG 2.5.8 AA target size: /lab's member-rate link is 15px tall inside a
   <small> in a <dd>, so #page dd>a[href] never matched it. This dd holds exactly
   one link, so the 44px hit area cannot overlap another target. */
@media (max-width:760px){
#page dd small>a[href]{position:relative}
#page dd small>a[href]::after{content:"";position:absolute;left:0;right:0;top:50%;transform:translateY(-50%);height:44px}
}

/* ── VOYCE-RECORDS-POLISH ── /record-label, 2026-10-13 ──────────────────────────
   Minimal, records-native. No new font, colour or motif: the rules below only
   tighten type and reuse the page's own hairline/ring language.
   Scope note: .vd-item and .vd-grid are shared with films, lab, symphony,
   design360, tech360 and media360. .vd-list and .vd-art exist ONLY on
   record-label, so every catalogue rule is anchored to .vd-list and cannot
   reach those six pages. */

/* The only .sqs-shape on the page: a 300x150 rectangle filled rgb(255,168,168),
   laid directly over the "your sound" headline. Salmon appears nowhere else in
   the brand. Hidden rather than deleted from the markup, so it can be restored
   from the CMS if it was ever deliberate. */
section[data-section-id="68b054d32ed0fe4c0ec0f52b"] .sqs-shape{display:none!important}

/* That band's type computed #d8d8d8 on near-black, which read as washed out
   beside the white display type everywhere else on the page. */
section[data-section-id="68b054d32ed0fe4c0ec0f52b"] .sqsrte-scaled-text,
section[data-section-id="68b054d32ed0fe4c0ec0f52b"] .sqsrte-scaled-text p,
section[data-section-id="68b054d32ed0fe4c0ec0f52b"] .sqsrte-text-color--white{
  color:#fff!important
}
/* and the small line above it reads as a label statement, not a stray caption */
section[data-section-id="68b054d32ed0fe4c0ec0f52b"] p.sqsrte-small{
  letter-spacing:.12em;opacity:.72
}

/* Catalogue: titles wrapped to 1-3 lines, so the artist and date baselines never
   lined up across a row. Clamp to two lines and reserve that space, so every row
   reads as a row. */
.vd-list .vd-grid .vd-t{
  display:-webkit-box;-webkit-line-clamp:2;-webkit-box-orient:vertical;
  overflow:hidden;line-height:1.24
}

/* One release credits eleven artists and ran to three lines, swamping its card. */
.vd-list .vd-grid .vd-a{
  display:block;white-space:nowrap;overflow:hidden;text-overflow:ellipsis
}

/* The date now reads as a catalogue entry rather than body copy. Tabular figures
   so the column of dates aligns down the grid. */
.vd-list .vd-grid .vd-d{
  font-variant-numeric:tabular-nums;letter-spacing:.1em;
  text-transform:uppercase;font-size:10px
}

/* A hairline under each entry - a release-log rule. This is the whole of the
   added decoration, and it is the page's existing hairline weight. */
.vd-list .vd-grid .vd-item{
  padding-bottom:15px;
  border-bottom:1px solid rgba(255,255,255,.07);
  transition:border-color .32s ease
}
.vd-list .vd-grid .vd-item:hover,
.vd-list .vd-grid .vd-item:focus-visible{border-bottom-color:rgba(255,255,255,.34)}

/* Every entry opens on Beatport in a new tab and nothing said so. The existing
   hover already scales the art; this adds the outbound cue, on hover and focus. */
.vd-list .vd-grid .vd-t::after{
  content:"↗";margin-left:.38em;font-size:.7em;display:inline-block;
  opacity:0;transform:translate(-3px,2px);
  transition:opacity .26s ease,transform .26s ease
}
.vd-list .vd-grid .vd-item:hover .vd-t::after,
.vd-list .vd-grid .vd-item:focus-visible .vd-t::after{opacity:.8;transform:none}

@media (prefers-reduced-motion:reduce){
  .vd-list .vd-grid .vd-item,
  .vd-list .vd-grid .vd-t::after{transition:none}
}
/* ── VOYCE-RECORDS-PREMIUM ── /record-label catalogue, 2026-10-13 ───────────────
   Still scoped to .vd-list, which exists only on record-label. */

/* Fewer, larger sleeves, and considerably more air between them. */
.vd-list .vd-grid{grid-template-columns:repeat(4,minmax(0,1fr))!important;gap:56px 32px!important}
@media (min-width:1700px){.vd-list .vd-grid{grid-template-columns:repeat(5,minmax(0,1fr))!important}}
@media (max-width:1100px){.vd-list .vd-grid{grid-template-columns:repeat(3,minmax(0,1fr))!important;gap:46px 26px!important}}
@media (max-width:700px){.vd-list .vd-grid{grid-template-columns:repeat(2,minmax(0,1fr))!important;gap:34px 18px!important}}

/* The wall settles into the page's monochrome and returns to full colour on
   hover. Artwork stays readable at .55 - this unifies, it does not hide. */

/* Lighter, better-tracked type. Nothing shrinks; it just stops shouting. */
.vd-list .vd-grid .vd-t{font-weight:500;letter-spacing:-.012em}
.vd-list .vd-grid .vd-d{opacity:.55}

/* The ledger hairline from the first pass is removed: with this much air the
   grid reads cleaner without a rule under every entry. */
.vd-list .vd-grid .vd-item{border-bottom:0!important;padding-bottom:0!important}

@media (prefers-reduced-motion:reduce){
  .vd-list .vd-grid .vd-art img{transition:none}
}
/* ── VOYCE-RECORDS-WIDE ── /record-label catalogue measure, 2026-10-13 ──────────
   The grid was boxed into the site's TEXT measure (.vd-in, max-width:1240px with
   139.6px side padding), leaving 961px of grid - 41% of a 2327px viewport - and
   166px sleeves. Artwork is not text. The copy above the grid keeps the 1240px
   measure; only the wall widens, and only above 1400px. */
@media (min-width:1400px){
  #page .vd-list{
    --vd-w:min(1680px,92vw);
    width:var(--vd-w);max-width:none;
    /* !important only here: the page's own .vd-list{margin:60px 0 0} shorthand
       otherwise zeroes this and the wall grows rightwards off the screen.
       transform is deliberately untouched - .vd-anim owns it for the reveal. */
    margin-left:calc(50% - var(--vd-w)/2)!important
  }
}

/* ── VOYCE-SUBNAV-RHYTHM ── sticky section nav, /record-label + /academy ────────
   Measured at 1440: the ul is flex with gap:4px, so six items at 13px/1.82px
   letter-spacing ran together as one strip. And the first link's 14px padding
   put its text at 114px while page content starts at 100px, leaving the whole
   bar 14px out from the column beneath it. */
#page .vx-sub ul{gap:0 26px}
#page .vx-sub li:first-child a{padding-left:0}

/* Wrapping rows need their own breathing room on narrow screens, where six
   items cannot sit on one line. */
@media (max-width:900px){
  #page .vx-sub ul{gap:0 18px;flex-wrap:wrap}
}

/* ── VOYCE-COVER-WALL ── /record-label, LIVE ───────────────
   Built to the measurements of the owner's references. Drumcode at 2560px: 4 per
   row, 580px covers, 41px gaps, 62px page margin, black ground. VOYCE was 5 per
   row at 166px inside a 1680px box with 323px margins — a third the size and
   boxed into the text column. Everything below is scale and restraint; no new
   font, colour or motif. */

/* break the wall out of the 1240px TEXT measure, to a near-full-bleed page margin.
   !important on the margins: the page's own .vd-list{margin:60px 0 0} shorthand
   otherwise zeroes them (same trap as the earlier wide-measure rule). */
html #page .vd-list{
  --vxp-m:clamp(18px,3.2vw,64px);
  width:auto!important;max-width:none!important;
  margin-left:calc(50% - 50vw + var(--vxp-m))!important;
  margin-right:calc(50% - 50vw + var(--vxp-m))!important
}
html #page .vd-list .vd-grid{
  grid-template-columns:repeat(4,minmax(0,1fr))!important;
  gap:clamp(30px,2.6vw,48px) clamp(18px,1.7vw,41px)!important
}
@media (max-width:1250px){
  html #page .vd-list .vd-grid{grid-template-columns:repeat(3,minmax(0,1fr))!important}
}
@media (max-width:760px){
  html #page .vd-list .vd-grid{
    grid-template-columns:repeat(2,minmax(0,1fr))!important;
    gap:26px 14px!important
  }
}

/* the featured sleeve stops spanning: on a wall this size every record is equal */
html #page .vd-grid>.vd-item:first-child{grid-column:auto!important;grid-row:auto!important}
html #page .vd-grid>.vd-item:first-child .vd-t{
  font-size:15px!important;font-weight:600;letter-spacing:-.01em;line-height:1.3
}

/* registration marks — Drumcode's single piece of decoration, and the same
   hairline weight this site already uses elsewhere. Eight gradients, four corners. */
html #page .vd-art{position:relative;overflow:visible}
html #page .vd-art::after{
  content:"";position:absolute;inset:-7px;pointer-events:none;z-index:2;
  background-image:
    linear-gradient(#fff,#fff),linear-gradient(#fff,#fff),
    linear-gradient(#fff,#fff),linear-gradient(#fff,#fff),
    linear-gradient(#fff,#fff),linear-gradient(#fff,#fff),
    linear-gradient(#fff,#fff),linear-gradient(#fff,#fff);
  background-size:11px 1px,1px 11px,11px 1px,1px 11px,11px 1px,1px 11px,11px 1px,1px 11px;
  background-position:
    left top,left top,right top,right top,
    left bottom,left bottom,right bottom,right bottom;
  background-repeat:no-repeat;
  opacity:.3;transition:opacity .3s ease
}
html #page .vd-item:hover .vd-art::after,
html #page .vd-item:focus-visible .vd-art::after{opacity:.85}

/* the sleeve lifts; the title takes a rule. The references all reveal a PLAY
   control here — VOYCE has no audio source wired, so the lift stands in. */
html #page .vd-item .vd-art{transition:transform .5s cubic-bezier(.16,1,.3,1)}
html #page .vd-item:hover .vd-art{transform:translateY(-6px)}
html #page .vd-item:hover .vd-t{text-decoration:underline;text-underline-offset:5px;text-decoration-thickness:1px}

/* type sits closer to its sleeve at this scale */
html #page .vd-grid .vd-t{margin-top:18px!important;font-size:15px!important}
html #page .vd-grid .vd-d{opacity:.45}

@media (prefers-reduced-motion:reduce){
  html #page .vd-item .vd-art,
  html #page .vd-art::after{transition:none}
  html #page .vd-item:hover .vd-art{transform:none}
}
/* ── VOYCE-WALL-MONO ── /record-label, LIVE ────────────────────────────
   Sleeves sit monochrome in the wall and return to full colour under the cursor.
   record-label.html sets .vd-art img{filter:none!important}, so this is won on
   specificity: (1,2,2) here against (0,1,1) there, !important on both sides.
   The page's own transform transition is restated so the hover zoom survives. */
html #page .vd-art img{
  filter:grayscale(1) contrast(1.03)!important;
  -webkit-filter:grayscale(1) contrast(1.03)!important;
  transition:filter .5s cubic-bezier(.16,1,.3,1),
             transform .6s cubic-bezier(.16,.9,.28,1)!important
}
html #page .vd-item:hover .vd-art img,
html #page .vd-item:focus-visible .vd-art img{
  filter:none!important;-webkit-filter:none!important
}

/* the sleeve under the cursor is the only one in colour, so the rest recede a
   little further to let it carry the eye */
@media (hover:hover){
  html #page .vd-grid:hover>.vd-item{opacity:.72;transition:opacity .4s ease}
  html #page .vd-grid>.vd-item:hover,
  html #page .vd-grid>.vd-item:focus-visible{opacity:1}
}

@media (prefers-reduced-motion:reduce){
  html #page .vd-art img{transition:none!important}
  html #page .vd-grid:hover>.vd-item{transition:none}
}
/* ── VOYCE-WALL-ORDER ── /record-label, LIVE ───────────────────────────
   Catalogue first. section.region is display:flex/column and its sections carry
   explicit order values (hero 0, band 1, catalogue 2, rest 2), so this has to be
   done with `order` — moving the section in the DOM does nothing.
   Addressed by [data-section-id] because a CSS identifier cannot start with a
   digit. */
html #page .region>section[data-section-id="6a903809b8a04c67764f5226"]{order:1!important}
html #page .region>section[data-section-id="6a8ee28de536f25ccd27fc33"]{order:2!important}
/* ── Hero lede legibility over moving backgrounds ────────────────────────────
   The hero lockups sit over video. Background luminance therefore changes frame to
   frame, and on /studios and /pricing the lede crossed bright passages: measured by
   ablation (text hidden, background photographed, compared against the text's own
   colour) 16.1% of the studios lede area and 10.7% of the pricing lede area fell below
   4.5:1, bottoming out at 1.82:1. A single frame is only a sample of a video, so the
   fix is a scrim rather than a tweak: a soft radial wash anchored under the text,
   leaving the right of the frame clear so the image still reads. */
.vs-lockup,.vp-lock{isolation:isolate}
/* A rectangular wash, however it is masked, still reads as a bar laid on the photograph: the
   first version stepped 1px at y=305 and y=610 straight across the studios hero, and a 95px
   vertical mask was not enough to hide it because the left of the band stays fully opaque.
   An ellipse centred on the text has no straight edge anywhere, so it reads as light falling
   off rather than as a panel. Proven by ablation: with this rule disabled the band disappears
   and the lede becomes unreadable across the bright desk, which is the defect it exists for. */
.vs-lockup::before,.vp-lock::before{
  content:"";position:absolute;inset:-80% 0 -90% -10%;z-index:-1;pointer-events:none;
  background:radial-gradient(ellipse 72% 150% at 26% 50%,
    rgba(0,0,0,.96) 0%,rgba(0,0,0,.93) 34%,rgba(0,0,0,.74) 54%,
    rgba(0,0,0,.40) 70%,rgba(0,0,0,.12) 80%,rgba(0,0,0,0) 88%);
}
@media(max-width:900px){
  .vs-lockup::before,.vp-lock::before{
    inset:-70% 0 -80% -4%;   /* a negative RIGHT inset adds to scrollWidth: measured 31px of overflow on /studios at 768, which is -4% of the lockup exactly */
    background:radial-gradient(ellipse 96% 140% at 50% 50%,
      rgba(0,0,0,.94) 0%,rgba(0,0,0,.90) 40%,rgba(0,0,0,.62) 64%,
      rgba(0,0,0,.24) 80%,rgba(0,0,0,0) 94%);
  }
}

/* ── Hero ghost buttons over video ───────────────────────────────────────────
   `.vp-b.ghost` / `.va-b.ghost` sit on a playing hero loop with a fully transparent
   fill, so their contrast is whatever frame happens to be behind them. Measured on
   go360 at 3.10:1, below the 3:1 floor for large text and far below the 4.5:1 these
   13px labels need. .46 was not enough either: on the brightest frame of the go360 loop it
   still measured 2.78:1 with 44% of the label area failing. .80 holds above 4.5:1 on every
   frame sampled. The blur and the white hairline keep it reading as glass, not as a slab. */
.vp-b.ghost,.va-b.ghost{
  background:rgba(0,0,0,.80) !important;
  -webkit-backdrop-filter:blur(10px) saturate(.92);
          backdrop-filter:blur(10px) saturate(.92);
  border-color:rgba(255,255,255,.34) !important;
}
.vp-b.ghost:hover,.va-b.ghost:hover,
.vp-b.ghost:focus-visible,.va-b.ghost:focus-visible{
  background:rgba(0,0,0,.66) !important;border-color:rgba(255,255,255,.60) !important;
}

/* ── Footer marquee must clip ────────────────────────────────────────────────
   `.vfl-track` is a 4,986px flex row translated by a CSS animation. Nothing clipped it,
   so on pages with no clipping ancestor it pushed the document wider than the viewport:
   measured /films 223px and /access 127px of horizontal overflow at 768, and /films 24px
   at 1024. A horizontal scrollbar on a page with nothing to scroll to. */
.vfl{overflow:hidden}

/* ── Hero facts bar: the gap between the mobile rule and desktop ─────────────
   `.vp-hb-in` is a nowrap flex row holding the stat list and the hero buttons. The
   existing mobile treatment stops at 767px, so from 768 up to roughly 1100 the row
   simply ran past the viewport: measured `.vp-hb-in` width 768 against scrollWidth 991
   on /films at 768 (223px of document overflow, exactly) and 1024 against 1048 at 1024
   (24px). /access the same at 127px. Letting the row wrap costs nothing on desktop,
   where it already fits on one line. */
@media (min-width:768px) and (max-width:1100px){
  .vp-hb-in{flex-wrap:wrap;row-gap:16px}
  .vp-hb-in>*{min-width:0}
  .vp-st{flex-wrap:wrap;row-gap:12px}
}