/* Nunito Sans is loaded via <link rel=preconnect> + <link rel=stylesheet> in each
   page <head>. An @import here is invisible to the preload scanner and adds a
   serial round trip (HTML -> style.css -> googleapis -> gstatic) before paint. */

:root{
  --paper:#F5F5F3;
  --ink:#050404;
  --ink2:#0D0D0D;
  --red:#9B0000;            /* THE accent. A hairline, an underline, a hover ring, the focus ring. Never a fill, never text on ink. */
  --grey:#8f8f8f;
  --label-on-paper:#4a4a4a; /* labels on paper, 7:1 */
  --hatch-a:#0a0a0a;--hatch-b:#101010;     /* motif 9, dark */
  --hatch-pa:#e6e4df;--hatch-pb:#eceae5;   /* motif 9, paper */
  --disp:'Avenir Next','Avenir','Nunito Sans','Segoe UI',system-ui,sans-serif;
  --body:'Avenir Next','Avenir','Nunito Sans','Segoe UI',system-ui,sans-serif;
  /* container + rhythm (spec §1.3) */
  --gutter:clamp(18px,5vw,64px);
  --wrap:min(100% - 2*var(--gutter),1312px);
  --sec:clamp(56px,7vw,96px);
  --sec-s:clamp(36px,4vw,56px);
  --gap:clamp(20px,2.6vw,36px);
  --mark-h:calc(min(92vw,1312px) / 9.733);   /* the hero mark's rendered height at any width (9.733:1) — spec §2.2 */
  --lab:10.5px;             /* counsel r7 #4 — the ONE label size (was seven, 8–11 px). 11.5 at ≥1024 below */
}
@media(min-width:1024px){:root{--lab:11.5px;}}
*{box-sizing:border-box;margin:0;padding:0;}
html{-webkit-font-smoothing:antialiased;scroll-behavior:smooth;}
body{font-family:var(--body);background:var(--ink);color:var(--paper);line-height:1.5;overflow-x:hidden;}
a{color:inherit;text-decoration:none;}
img,video{display:block;max-width:100%;}
button{font-family:inherit;}

/* visually hidden — for headings carried by an image */
.sr{position:absolute;width:1px;height:1px;overflow:hidden;clip:rect(0 0 0 0);clip-path:inset(50%);white-space:nowrap;}

/* ── skip link — off-screen until it has keyboard focus ── */
.skip{position:absolute;left:-9999px;top:12px;z-index:100;font-size:var(--lab);letter-spacing:.28em;text-transform:uppercase;
  font-weight:700;background:var(--ink);color:var(--paper);padding:12px 18px;border-bottom:2px solid var(--red);}
.skip:focus{left:12px;outline:2px solid var(--paper);outline-offset:3px;}

/* ── film grain overlay ── */
.grain{position:fixed;inset:-50%;z-index:60;pointer-events:none;opacity:.055;
  background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='220' height='220'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='.85' numOctaves='4'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23n)'/%3E%3C/svg%3E");
  animation:grain 1.1s steps(3) infinite;}
@keyframes grain{0%{transform:translate(0,0)}33%{transform:translate(-3%,2%)}66%{transform:translate(2%,-3%)}100%{transform:translate(0,0)}}
@media(max-width:640px){.grain{inset:-30%;}}   /* smaller translate field on phones (spec §9.3) */

/* ── slate label ── */
.slate{font-family:var(--body);font-size:var(--lab);letter-spacing:.28em;text-transform:uppercase;
  font-weight:600;color:var(--grey);}
.slate .b{color:#7a7a7a;}
.bkt{display:inline-flex;align-items:center;gap:12px;}
.bkt::before{content:"[";color:var(--grey);font-size:15px;line-height:1;}
.bkt::after{content:"]";color:var(--grey);font-size:15px;line-height:1;}
.dash{display:inline-block;width:34px;height:1px;background:#7a7a7a;vertical-align:middle;}

/* ── corner registration brackets ── */
.regs{position:absolute;inset:22px;pointer-events:none;z-index:5;}
.regs i{position:absolute;width:26px;height:26px;border:1.5px solid rgba(245,245,243,.5);}
.regs i:nth-child(1){top:0;left:0;border-right:0;border-bottom:0;}
.regs i:nth-child(2){top:0;right:0;border-left:0;border-bottom:0;}
.regs i:nth-child(3){bottom:0;left:0;border-right:0;border-top:0;}
.regs i:nth-child(4){bottom:0;right:0;border-left:0;border-top:0;}

/* ── top bar — spec §1.6: no blend; a one-colour scrim ::before over the hero, an ink ground once docked ── */
.bar{position:fixed;top:0;left:0;right:0;z-index:50;display:flex;align-items:center;
  justify-content:space-between;padding:22px var(--gutter);color:var(--paper);
  transition:background .3s ease,backdrop-filter .3s ease;}
.bar::before{content:"";position:absolute;inset:0;z-index:-1;pointer-events:none;
  background:linear-gradient(180deg,rgba(5,4,4,.72),rgba(5,4,4,0));}   /* transparency scrim, one colour */
.bar.docked{background:rgba(5,4,4,.86);
  -webkit-backdrop-filter:blur(12px);backdrop-filter:blur(12px);
  box-shadow:0 1px 0 rgba(245,245,243,.08);}
.bar.docked::before{display:none;}
@media (prefers-reduced-motion:reduce){.bar{transition:none;}}
.bar .logo{flex:0 0 auto;line-height:0;}
.bar .logo img{height:20px;width:auto;max-width:none;}
.bar .menu{display:flex;gap:clamp(14px,2.4vw,30px);font-size:var(--lab);letter-spacing:.26em;
  text-transform:uppercase;font-weight:700;color:#bdbdbd;}
.bar .menu a{padding:4px 0;}
.bar .menu a:hover{color:#fff;box-shadow:0 2px 0 var(--red);}
.bar .menu a.on{color:#fff;box-shadow:0 2px 0 var(--red);}    /* active = red underline (spec §1.6) */

/* mobile nav (spec §1.7): a [ MENU ] label button and a full-screen overlay */
.bar .menubtn{display:none;background:none;border:0;color:#bdbdbd;cursor:pointer;
  font-size:var(--lab);letter-spacing:.26em;text-transform:uppercase;font-weight:700;padding:8px 0;min-height:44px;}
.bar .menubtn:hover{color:#fff;}
.menu-overlay{position:fixed;inset:0;z-index:70;background:rgba(5,4,4,.97);display:none;
  flex-direction:column;justify-content:center;padding:0 24px;}
.menu-overlay.open{display:flex;}
.menu-overlay nav{display:flex;flex-direction:column;}
.menu-overlay nav a{font-family:var(--disp);font-weight:900;font-size:clamp(32px,9vw,44px);
  line-height:1.1;letter-spacing:-.025em;text-transform:uppercase;padding:8px 0;width:max-content;}
.menu-overlay nav a.on{box-shadow:inset 0 -2px 0 var(--red);}
.menu-overlay .x{position:absolute;top:16px;right:18px;background:none;border:0;color:#bdbdbd;cursor:pointer;
  font-size:var(--lab);letter-spacing:.26em;text-transform:uppercase;font-weight:700;padding:8px 0;min-height:44px;}
.menu-overlay .x:hover{color:#fff;}
.menu-overlay .ft{margin-top:40px;display:flex;flex-direction:column;gap:10px;
  font-size:var(--lab);letter-spacing:.24em;text-transform:uppercase;color:#8f8f8f;font-weight:700;}
.menu-overlay .ft a:hover{color:var(--paper);}
body.menu-open .bar{visibility:hidden;}

/* ══ HERO — spec §2.2: five numbered films, one active; the real mark as an <img> (Bible §6 STOP rule) ══ */
.hero{position:relative;height:100svh;min-height:560px;overflow:hidden;background:var(--ink);}
.hero .films{position:absolute;inset:0;}
.hero .film{position:absolute;inset:0;width:100%;height:100%;object-fit:cover;opacity:0;
  filter:grayscale(1) contrast(1.12) brightness(.82);transition:opacity .4s ease;}
.hero .film.on{opacity:1;}
.hero .wash{position:absolute;inset:0;background:
  linear-gradient(180deg,rgba(5,4,4,.62) 0%,rgba(5,4,4,.46) 34%,rgba(5,4,4,.78) 72%,rgba(5,4,4,.97) 100%);}  /* one-colour scrim; counsel r7 #3 lifts 34 % from .30 to .46 so the door descriptors hold on bright frames */
/* the mark — assets/klass-white.png. Width drives, height auto: 1312×135 at 1440, 354×36 at 390. Never type. */
.knock{position:absolute;left:50%;bottom:clamp(18px,3vh,32px);transform:translateX(-50%);z-index:4;
  width:min(92vw,1312px);height:auto;opacity:.97;filter:drop-shadow(0 6px 60px rgba(0,0,0,.55));}
.hero .stack{position:absolute;inset:0;z-index:6;display:flex;flex-direction:column;
  align-items:center;justify-content:center;gap:clamp(18px,3vh,30px);
  padding-inline:var(--gutter);padding-bottom:calc(var(--mark-h) + 8vh);}
.hero .code{position:absolute;right:clamp(20px,4vw,46px);top:50%;transform:translateY(-50%) rotate(90deg);
  transform-origin:right center;font-size:10px;letter-spacing:.32em;color:rgba(245,245,243,.42);
  font-weight:600;z-index:6;white-space:nowrap;}

/* doors */
.doors{display:flex;justify-content:center;gap:clamp(20px,5vw,72px);}
.doors a{font-family:var(--disp);font-weight:900;font-size:clamp(19px,3vw,34px);color:var(--paper);
  text-transform:uppercase;letter-spacing:.16em;line-height:1;position:relative;
  text-shadow:0 2px 26px rgba(0,0,0,.85);transition:color .2s;}   /* counsel r7 #5: letter-spacing no longer animates (it reflowed the row); the red ::after wipe is the hover */
.doors a::after{content:"";position:absolute;left:0;right:100%;bottom:-8px;height:2px;
  background:var(--red);transition:right .28s cubic-bezier(.2,.7,.2,1);}
.doors a:hover{color:#fff;}
.doors a:hover::after{right:0;}

/* play reel — the one sound path on the homepage; opens the lightbox with the showreel (spec §2.2) */
.reelbtn{display:flex;align-items:center;gap:14px;cursor:pointer;margin-top:6px;
  background:none;border:0;color:inherit;padding:0;}
.reelbtn .ring{width:44px;height:44px;border:1.5px solid rgba(245,245,243,.9);border-radius:50%;
  display:flex;align-items:center;justify-content:center;transition:background .25s,border-color .25s;flex:0 0 auto;}
.reelbtn .ring::before{content:"";border-left:11px solid #fff;border-top:7px solid transparent;border-bottom:7px solid transparent;margin-left:3px;}
.reelbtn:hover .ring,.reelbtn:focus-visible .ring{background:var(--red);border-color:var(--red);}
.reelbtn .t{font-size:var(--lab);letter-spacing:.3em;text-transform:uppercase;font-weight:700;color:var(--paper);text-shadow:0 2px 12px rgba(0,0,0,.8);}
.reelbtn .t .m{display:none;}   /* short label, phones only (spec §10) */

/* numbered pagination — bottom-left, labels register (spec §2.2) */
.hero .pag{position:absolute;left:var(--gutter);bottom:calc(var(--mark-h) + clamp(40px,6vh,64px));
  z-index:6;display:flex;gap:6px;list-style:none;margin-left:-8px;}
.hero .pag button{font-size:var(--lab);letter-spacing:.28em;font-weight:700;color:rgba(245,245,243,.42);
  padding:12px 8px;min-width:44px;background:none;border:0;cursor:pointer;transition:color .25s;font-family:inherit;}
.hero .pag button.on{color:#fff;box-shadow:inset 0 -2px 0 var(--red);}
.hero .pag button:hover{color:#fff;}

/* subject — bottom-right, the two-line tile grammar (§3) */
.hero .subj{position:absolute;right:calc(var(--gutter) + 34px);bottom:calc(var(--mark-h) + clamp(40px,6vh,64px));
  z-index:6;text-align:right;max-width:38ch;padding-bottom:12px;}   /* 12px = the pag button's bottom padding, so baselines align */
.hero .subj-t{font-family:var(--disp);font-weight:900;font-size:14px;letter-spacing:-.02em;text-transform:uppercase;line-height:1.2;}
.hero .subj-k{margin-top:4px;font-size:var(--lab);letter-spacing:.26em;text-transform:uppercase;font-weight:700;color:var(--grey);min-height:15px;}

/* ══ sections ══ */
section{position:relative;padding:var(--sec) var(--gutter);}   /* spec §1.3 — was clamp(80px,13vw,180px) */
.paper{background:var(--paper);color:var(--ink);}
.dark{background:var(--ink);color:var(--paper);}

.big{font-family:var(--disp);font-weight:900;font-size:clamp(44px,10vw,138px);line-height:.9;
  letter-spacing:-.028em;text-transform:uppercase;text-align:center;}
/* the one red-marked word: white text, red underline. Red is a line on ink, never text (Bible §3). */
.big .r{color:inherit;text-decoration:underline;text-decoration-color:var(--red);
  text-decoration-thickness:.04em;text-underline-offset:.08em;}
.mid{font-family:var(--disp);font-weight:900;font-size:clamp(32px,7vw,90px);line-height:.9;text-transform:uppercase;letter-spacing:-.028em;}
/* manifesto band — one .big, two lines, after the evidence (spec §2.4) */
.band{padding:var(--sec-s) var(--gutter);}
.band .big{font-size:clamp(36px,7.4vw,104px);}

/* section head: slate left, link right (spec §2.3) */
.sechead{position:relative;z-index:2;display:flex;justify-content:space-between;align-items:baseline;
  gap:16px;flex-wrap:wrap;margin-bottom:clamp(28px,4vw,44px);}
.sechead .more{cursor:pointer;}
.sechead .more:hover{color:var(--paper);box-shadow:0 2px 0 var(--red);}
.paper .sechead .more:hover{color:var(--ink);}

/* bracketed video window */
.win{position:relative;max-width:920px;margin:clamp(34px,5vw,60px) auto;padding:0 46px;}
.win::before,.win::after{position:absolute;top:50%;transform:translateY(-50%);
  font-family:var(--body);font-weight:300;font-size:clamp(80px,13vw,180px);line-height:.7;color:currentColor;opacity:.9;}
.win::before{content:"[";left:0;}
.win::after{content:"]";right:0;}
.win video,.win img{width:100%;aspect-ratio:16/7;object-fit:cover;filter:grayscale(1) contrast(1.1);}

/* ghost watermark type */
.ghost{position:absolute;inset:0;display:flex;align-items:center;justify-content:center;
  font-family:var(--disp);font-weight:900;font-size:clamp(40px,9.5vw,128px);line-height:.86;text-align:center;
  color:rgba(0,0,0,.045);text-transform:uppercase;pointer-events:none;user-select:none;padding:0 5vw;}
.dark .ghost{color:rgba(245,245,243,.045);}
@media(max-width:768px){.ghost{display:none;}}   /* it lands across the project rows on phones */

/* ══ services ══ */
.svcs{display:grid;gap:1px;background:rgba(245,245,243,.13);border:1px solid rgba(245,245,243,.13);}
.svc{position:relative;background:var(--ink);padding:clamp(26px,4vw,48px);transition:background .25s;}
.svc:hover{background:#0f0f0f;}
.svc .n{font-size:var(--lab);letter-spacing:.3em;font-weight:700;color:var(--grey);text-transform:uppercase;}
.svc .h{font-family:var(--disp);font-weight:900;font-size:clamp(28px,5vw,62px);line-height:.95;margin-top:12px;text-transform:uppercase;}
.svc:hover .h{color:#fff;}
/* the red state is a hairline drawing in along the bottom edge, not red type */
.svc::after{content:"";position:absolute;left:0;bottom:0;height:1.5px;width:0;background:var(--red);
  transition:width .38s cubic-bezier(.2,.6,.2,1);}
.svc:hover::after,.svc:focus-visible::after{width:100%;}
.svc .d{margin-top:14px;font-size:14px;color:#9a9a9a;max-width:34ch;}
.svcs-lede{font-size:clamp(17px,2.4vw,26px);line-height:1.4;max-width:34ch;color:#b4b4b4;font-weight:500;
  margin:18px auto clamp(40px,6vw,70px);text-align:center;}
@media(min-width:860px){.svcs{grid-template-columns:repeat(3,1fr);}}

/* ══ room header ══ */
.rhead{padding:clamp(88px,12vh,120px) var(--gutter) clamp(28px,4vw,44px);position:relative;}
.rhead h1{font-family:var(--disp);font-weight:900;font-size:clamp(44px,11vw,150px);line-height:.88;
  text-transform:uppercase;letter-spacing:-.028em;}
.rhead .sub{margin-top:20px;font-size:clamp(14px,1.8vw,18px);color:#9a9a9a;max-width:44ch;}
/* Rep: the real lockup carries the heading (assets/klass-rep-white.png, 1500×307) */
.rhead h1.lockup{margin-top:18px;line-height:0;}
.rhead h1.lockup img{width:min(100%,520px);height:auto;}
.rhead .toggle{margin-top:28px;}
/* Studios header = Sound's brand column pattern (spec §8): the real mark, a rule, the arm as the h1. Not a lockup. */
.rhead .mark{width:min(100%,360px);height:auto;margin-top:18px;}
.rhead .rule{width:34px;height:1px;background:#5a5a5a;margin:26px 0 18px;}
.rhead h1.arm{font-size:clamp(44px,6.4vw,96px);line-height:.88;}
@media(max-width:640px){.rhead .mark{width:min(100%,280px);} .rhead h1.arm{font-size:clamp(40px,12vw,56px);}}

/* ══ discipline / roster toggle — inline text, active underlined, no chrome (spec §4.4) ══ */
.toggle{display:flex;gap:clamp(14px,2vw,26px);flex-wrap:wrap;}
.toggle button{font-size:var(--lab);letter-spacing:.28em;text-transform:uppercase;font-weight:700;color:var(--grey);
  background:none;border:0;padding:6px 0;cursor:pointer;transition:color .2s;min-height:44px;}
.toggle button:hover{color:var(--paper);}
.toggle button.on{color:var(--paper);box-shadow:0 2px 0 var(--red);}
@media(max-width:640px){.toggle{flex-wrap:nowrap;overflow-x:auto;white-space:nowrap;-webkit-overflow-scrolling:touch;}}

/* ══ roster: an index of seven rows — the name is the object, the portrait slot is evidence on the right (spec §5.2) ══ */
.roster{list-style:none;border-top:1px solid rgba(245,245,243,.14);position:relative;z-index:2;}
.face{display:block;}
.face a{display:grid;grid-template-columns:64px 1fr clamp(72px,8vw,120px);align-items:center;
  column-gap:clamp(16px,2.4vw,32px);padding:clamp(14px,2vw,22px) 0;
  border-bottom:1px solid rgba(245,245,243,.12);position:relative;color:inherit;}
.face .idx{font-size:var(--lab);letter-spacing:.24em;font-weight:700;color:rgba(245,245,243,.62);transition:color .25s;}
.face .n{display:block;font-family:var(--disp);font-weight:900;font-size:clamp(28px,4vw,56px);
  line-height:.95;letter-spacing:-.028em;text-transform:uppercase;}
.face .disc{display:block;margin-top:8px;font-size:var(--lab);letter-spacing:.26em;text-transform:uppercase;color:var(--grey);font-weight:700;}
.face .disc .dash{width:18px;margin:0 8px;}
.face .ph{aspect-ratio:4/5;width:100%;background:#0e0e0e;overflow:hidden;position:relative;}
.face .ph img{width:100%;height:100%;object-fit:cover;filter:grayscale(1) contrast(1.06);
  transition:filter .45s,transform .45s cubic-bezier(.2,.6,.2,1);}
.face a:hover .ph img{filter:grayscale(0);transform:scale(1.03);}
/* motif 9 — the honest empty state. The slot is the same box the photograph will occupy. */
.face .ph.empty{display:flex;align-items:center;justify-content:center;
  background:repeating-linear-gradient(135deg,var(--hatch-a) 0 13px,var(--hatch-b) 13px 26px);}
.face .ph.empty span{font-size:var(--lab);letter-spacing:.26em;color:#6a6a6a;text-transform:uppercase;text-align:center;}
.face a:hover .ph.empty{background:repeating-linear-gradient(135deg,#0a0a0a 0 13px,#141414 13px 26px);}
.face a:hover .ph.empty span{color:#8f8f8f;}
/* the only motion — the red rule under the row */
.face a::after{content:"";position:absolute;left:0;bottom:-1px;height:1.5px;width:0;background:var(--red);
  transition:width .38s cubic-bezier(.2,.6,.2,1);}
.face a:hover::after,.face a:focus-visible::after{width:100%;}
.face a:hover .idx{color:#fff;}
.face[hidden]{display:none;}
.roster-tier{margin:clamp(28px,4vw,44px) 0 12px;}
@media(max-width:640px){
  .face a{grid-template-columns:1fr 72px;column-gap:14px;padding:16px 0;}
  .face .idx{position:absolute;top:8px;left:0;}
  .face .meta{padding-top:18px;}
  .face .meta{min-width:0;}
  .face .n{font-size:min(28px,7.4vw);}   /* 12-letter names fit the 1fr track at 320 (198px) without breaking the word */
}

/* ══ talent page ══ */
.thead .back{display:block;width:max-content;font-size:var(--lab);letter-spacing:.26em;
  text-transform:uppercase;color:var(--grey);text-decoration:none;font-weight:700;transition:color .2s;}
.thead .back:hover{color:#fff;box-shadow:0 2px 0 var(--red);}
.thead h1{font-size:min(clamp(44px,8vw,110px),9.5vw);margin-bottom:32px;}   /* 9.5vw cap: a 12-letter name (BASHMOHANNAD, ~9.2em measured) fits 320 and 390 without breaking the word */   /* 14px gap + 18px alias line, reserved whether or not there is an a.k.a. */
.thead .also{margin-top:-18px;font-size:12px;letter-spacing:.2em;text-transform:uppercase;color:var(--grey);}
.tgrid{display:grid;grid-template-columns:minmax(280px,.85fr) 1fr;gap:clamp(28px,5vw,72px);align-items:start;}
@media(max-width:820px){.tgrid{grid-template-columns:1fr;}}
.tp{aspect-ratio:4/5;overflow:hidden;background:#0e0e0e;position:relative;}
.tp img{width:100%;height:100%;object-fit:cover;}
.tp.empty{display:flex;align-items:center;justify-content:center;
  background:repeating-linear-gradient(135deg,var(--hatch-a) 0 13px,var(--hatch-b) 13px 26px);}
.tp.empty span{font-size:var(--lab);letter-spacing:.26em;color:#6a6a6a;text-transform:uppercase;}
.role{font-size:var(--lab);letter-spacing:.24em;text-transform:uppercase;color:#bdbdbd;font-weight:700;line-height:1.9;
  max-width:60ch;margin-bottom:16px;}
.tbio{font-size:clamp(14px,1.7vw,17px);line-height:1.62;color:#a4a4a4;max-width:46ch;margin-top:18px;}
.credits{border-top:1px solid rgba(245,245,243,.14);}
.cr{display:flex;justify-content:space-between;gap:20px;padding:15px 0;
  border-bottom:1px solid rgba(245,245,243,.09);}
.cr-t{font-family:var(--disp);font-weight:900;font-size:14px;letter-spacing:-.02em;text-transform:uppercase;line-height:1.2;}
.cr-k{font-size:var(--lab);letter-spacing:.2em;text-transform:uppercase;color:var(--grey);
  font-weight:700;text-align:right;flex-shrink:0;max-width:52%;padding-top:3px;}

/* ══ contact ══ */
form{max-width:720px;margin-top:clamp(26px,4vw,44px);position:relative;}
.f2{display:grid;grid-template-columns:1fr 1fr;gap:0 clamp(20px,3vw,40px);}
@media(max-width:640px){.f2{grid-template-columns:1fr;}}
label{display:block;font-size:var(--lab);letter-spacing:.28em;text-transform:uppercase;
  color:var(--grey);font-weight:700;margin:26px 0 6px;}
input,textarea{width:100%;background:transparent;border:0;border-bottom:1px solid rgba(245,245,243,.22);
  color:var(--paper);font-family:inherit;font-size:16px;padding:10px 0;outline:none;transition:border-color .2s;border-radius:0;}
input:focus,textarea:focus{border-color:var(--red);}
input::placeholder,textarea::placeholder{color:#5a5a5a;}
textarea{resize:vertical;min-height:100px;}
.hp{position:absolute;left:-9999px;}
/* the CTA — a label + 2px red underline. Bible §3: a line, not a fill. */
.send{position:relative;margin-top:30px;background:none;border:0;color:var(--paper);cursor:pointer;
  font-size:var(--lab);letter-spacing:.3em;text-transform:uppercase;font-weight:700;padding:12px 0;}
.send .ul{position:absolute;left:0;right:0;bottom:6px;height:2px;background:var(--red);}
.send:hover .ul,.send:focus-visible .ul{box-shadow:0 0 0 1px var(--red);}   /* hover thickens by the hairline, no fill */

.cta{margin-top:clamp(36px,6vw,66px);}
.cta .k{font-size:var(--lab);letter-spacing:.28em;text-transform:uppercase;color:var(--grey);font-weight:700;}
.cta a{display:inline-block;margin-top:10px;font-family:var(--disp);font-weight:900;
  font-size:clamp(22px,4vw,44px);text-transform:uppercase;border-bottom:2px solid var(--red);padding-bottom:2px;}
.cta a:hover{color:#fff;}
/* on --paper the brand red already clears 8:1 — red text is allowed there */
.paper .big .r,.paper .cta a:hover{color:var(--red);}

/* .soundon and the lightbox controls are real <button>s (keyboard reachability) — strip
   the UA button skin so they look exactly as they did as <div>/<span>. */
.soundon,.lb button{-webkit-appearance:none;appearance:none;background:transparent;border:0;
  padding:0;margin:0;font-family:inherit;font-size:inherit;color:inherit;text-align:inherit;}

/* ══ lightbox (spec §7): top row / stage with registration brackets / foot with prev · caption · next ══ */
.lb{position:fixed;inset:0;z-index:80;background:rgba(5,4,4,.97);display:none;flex-direction:column;
  padding:20px var(--gutter);color:var(--paper);}
.lb.open{display:flex;}
body.lb-open .bar{visibility:hidden;}   /* the difference-blended bar showed through the 97% scrim */
.lb-top{display:flex;justify-content:space-between;align-items:center;height:44px;flex:0 0 auto;}
.lb .x,.lb .nav{color:#bdbdbd;cursor:pointer;padding:12px 0;min-height:44px;
  font-size:var(--lab);letter-spacing:.28em;text-transform:uppercase;font-weight:700;white-space:nowrap;}
.lb .x:hover,.lb .nav:hover{color:#fff;}
.lb .x .kbd{margin-left:10px;font-size:var(--lab);letter-spacing:.3em;color:#5a5a5a;}
.lb-idx{font-variant-numeric:tabular-nums;}
.lb-stage{position:relative;flex:1;display:flex;align-items:center;justify-content:center;min-height:0;padding:22px;}
.lb-stage .regs{inset:0;}
.lb-stage .regs i{border-color:rgba(245,245,243,.35);}
.lb video{width:min(1200px,100%);max-height:min(72vh,calc((100vw - 2*var(--gutter) - 44px)*9/16));aspect-ratio:16/9;background:#000;}
.lb-foot{flex:0 0 auto;display:grid;grid-template-columns:auto 1fr auto;align-items:start;column-gap:clamp(16px,3vw,40px);
  padding-top:14px;border-top:1px solid rgba(245,245,243,.12);}
.lb-cap{text-align:center;min-width:0;}
.lb-t{font-family:var(--disp);font-weight:900;font-size:clamp(14px,1.4vw,18px);letter-spacing:-.02em;text-transform:uppercase;line-height:1.2;}
.lb-k{margin-top:5px;font-size:var(--lab);letter-spacing:.26em;text-transform:uppercase;font-weight:700;color:var(--grey);}
.lb-k .y{margin-left:14px;}
.lb-k a{box-shadow:0 1px 0 var(--red);}
.lb-k a:hover{color:#fff;}
.lb-cr{margin-top:6px;font-size:var(--lab);letter-spacing:.2em;text-transform:uppercase;font-weight:600;color:#7d7d7d;line-height:1.7;}
.lb-k:empty,.lb-cr:empty{display:none;}
.lb .nav[disabled]{opacity:.3;pointer-events:none;}
.lb .nav[hidden]{display:none;}
@media(max-width:640px){
  .lb{padding:12px 16px;}
  .lb-stage{padding:0;}
  .lb-stage .regs{display:none;}
  .lb-foot{grid-template-columns:1fr 1fr;}
  .lb-cap{grid-column:1 / -1;grid-row:1;text-align:left;padding-bottom:12px;}
  .lb .next{text-align:right;}
}

/* ══ footer ══ */
footer{background:var(--ink);border-top:1px solid rgba(245,245,243,.12);
  padding:clamp(34px,5vw,56px) var(--gutter);
  display:flex;justify-content:space-between;flex-wrap:wrap;gap:22px;
  font-size:var(--lab);letter-spacing:.24em;text-transform:uppercase;color:#8f8f8f;font-weight:700;}
footer a:hover{color:var(--paper);}
footer .ig{display:flex;gap:22px;flex-wrap:wrap;}
footer .about{margin-left:14px;}

/* ══ hero + bar on phones (spec §10) ══ */
@media(max-width:640px){
  .knock{width:calc(100vw - 36px);bottom:18px;}                 /* 354×36 at 390, 284×29 at 320 */
  .doors{gap:16px;}
  .doors a{font-size:19px;letter-spacing:.12em;}
  .hero .stack{padding-bottom:196px;gap:18px;}                  /* clears numbers + subject + mark */
  .hero .pag{left:18px;bottom:calc(36px + 96px);margin-left:-8px;}
  .hero .subj{left:18px;right:auto;bottom:calc(36px + 44px);text-align:left;max-width:calc(100vw - 36px);padding-bottom:0;}
  .hero .subj-t{font-size:13px;}
  .reelbtn .t .d{display:none;}  .reelbtn .t .m{display:inline;}   /* PLAY REEL · 1:10 */
  .hero .code{display:none;}
  .bar{padding:16px 18px;}
  .bar .logo img{height:15px;}
  .bar .menu{display:none;}
  .bar .menubtn{display:inline-flex;align-items:center;}
  footer{flex-direction:column;}
}

/* ══ work tiles — the two-line credit grammar (spec §3) ══ */
.reel-grid{display:grid;grid-template-columns:repeat(auto-fill,minmax(min(330px,100%),1fr));gap:var(--gap);}
.cell{cursor:pointer;}
.cell[hidden]{display:none;}
.cell-img{position:relative;aspect-ratio:16/9;overflow:hidden;background:#0c0c0c;}
.cell-img img{width:100%;height:100%;object-fit:cover;filter:grayscale(1) contrast(1.08);
  transition:transform .45s cubic-bezier(.2,.6,.2,1),filter .45s;}
.cell:hover .cell-img img,.cell:focus-visible .cell-img img{transform:scale(1.03);filter:grayscale(0) contrast(1.02);}
.cell-img::after{content:"";position:absolute;inset:0;
  background:linear-gradient(180deg,transparent 58%,rgba(0,0,0,.5));}
.cell-img .idx{position:absolute;z-index:3;top:11px;left:11px;font-size:var(--lab);letter-spacing:.24em;font-weight:700;
  color:rgba(245,245,243,.62);transition:color .25s;}
.cell:hover .cell-img .idx{color:#fff;}
.cell-img .pl{position:absolute;left:16px;bottom:14px;z-index:2;width:36px;height:36px;
  border:1.5px solid rgba(245,245,243,.9);border-radius:50%;
  display:flex;align-items:center;justify-content:center;transition:all .22s;}
.cell-img .pl::before{content:"";border-left:9px solid #fff;border-top:6px solid transparent;
  border-bottom:6px solid transparent;margin-left:2px;}
.cell:hover .cell-img .pl{background:var(--red);border-color:var(--red);}
/* line 1 — the work: the display register at caption scale (900 / uppercase / negative tracking). Not a third register. */
.cell-t{margin-top:14px;font-family:var(--disp);font-weight:900;font-size:14px;letter-spacing:-.02em;
  line-height:1.2;text-transform:uppercase;}
/* line 2 — the human + discipline, and the year. Labels register. */
.cell-row{display:flex;justify-content:space-between;align-items:baseline;gap:12px;margin-top:4px;flex-wrap:wrap;}
.cell-k{font-size:var(--lab);letter-spacing:.26em;text-transform:uppercase;color:var(--grey);font-weight:700;}
.cell-y{font-size:var(--lab);letter-spacing:.26em;font-weight:700;color:var(--grey);flex-shrink:0;}
.cell-c{margin-top:5px;font-size:var(--lab);letter-spacing:.2em;text-transform:uppercase;color:#7d7d7d;font-weight:600;line-height:1.7;}

/* ══ about copy ══ */
.lede{font-size:clamp(17px,2.4vw,26px);line-height:1.5;max-width:34ch;color:#b4b4b4;font-weight:500;}
.lede b{color:var(--paper);font-weight:800;}

/* ══ showreel — the money asset ══ */
.reelbox{position:relative;margin:0 0 clamp(50px,7vw,84px);}
.reel-stage{position:relative;}   /* the button centres on the video, not on the box (the caption + copy lines below it made the 50% centre drift 55px low at 1440, off the frame at 320) */
.reelbox video{width:100%;aspect-ratio:16/9;object-fit:cover;background:#000;display:block;}
.reelbox .cap{display:flex;justify-content:space-between;align-items:baseline;
  margin-top:14px;flex-wrap:wrap;gap:10px;}
.reelbox .cap .l{font-size:var(--lab);letter-spacing:.28em;text-transform:uppercase;
  color:var(--grey);font-weight:700;}
.reelbox .cap .r{font-size:var(--lab);letter-spacing:.28em;text-transform:uppercase;
  color:var(--paper);font-weight:700;}
.reelbox .line{margin-top:10px;font-size:var(--lab);letter-spacing:.24em;text-transform:uppercase;
  color:#bdbdbd;font-weight:700;line-height:1.9;}
.soundon{position:absolute;left:50%;top:50%;transform:translate(-50%,-50%);z-index:3;
  display:flex;flex-direction:column;align-items:center;gap:14px;cursor:pointer;
  transition:opacity .3s;}
.soundon .ring{width:82px;height:82px;border:1.5px solid rgba(245,245,243,.9);border-radius:50%;
  display:flex;align-items:center;justify-content:center;transition:all .25s;}
.soundon .ring::before{content:"";border-left:20px solid #fff;border-top:12px solid transparent;
  border-bottom:12px solid transparent;margin-left:5px;}
.soundon:hover .ring{background:var(--red);border-color:var(--red);}
.soundon .t{font-size:var(--lab);letter-spacing:.3em;text-transform:uppercase;
  color:var(--paper);font-weight:700;text-shadow:0 2px 12px rgba(0,0,0,.8);}
.reelbox.playing .soundon{opacity:0;pointer-events:none;}
/* ≤640px: the label was wrapping onto the poster's burnt-in caption; keep it one line, ring a touch smaller */
@media(max-width:640px){
  .soundon .t{white-space:nowrap;font-size:var(--lab);letter-spacing:.2em;}
  .soundon .ring{width:64px;height:64px;}
}

/* ══ SOUND — split-lock (spec §4.2, Ref #9): sticky brand column · wall = reel → services → 16 tiles → brief ══ */
.split-lock{display:grid;grid-template-columns:minmax(300px,34%) 1fr;column-gap:clamp(28px,4vw,64px);
  padding:0 var(--gutter);max-width:1440px;margin:0 auto;}
.brand{position:sticky;top:0;height:100svh;padding:clamp(88px,12vh,120px) 0 40px;
  display:flex;flex-direction:column;border-right:1px solid rgba(245,245,243,.12);padding-right:clamp(20px,3vw,40px);}
.brand .mark{width:min(100%,360px);height:auto;margin-top:18px;}                  /* the real mark, 360×37 */
.brand .rule{width:34px;height:1px;background:#5a5a5a;margin:26px 0 18px;}        /* keeps mark and heading from reading as one lockup (Bible §6) */
.brand .arm{font-family:var(--disp);font-weight:900;font-size:clamp(44px,6.4vw,96px);line-height:.88;
  letter-spacing:-.028em;text-transform:uppercase;}
.brand .sub{margin-top:18px;font-size:clamp(14px,1.2vw,16px);color:#9a9a9a;max-width:34ch;}
.brand .credit{margin-top:26px;}
.brand .credit .dash{width:18px;}
.brand-ft{margin-top:auto;display:flex;flex-direction:column;gap:10px;align-items:flex-start;}
.brand-ft .slate{color:#bdbdbd;transition:color .2s;}
.brand-ft .slate:hover{color:#fff;box-shadow:0 2px 0 var(--red);}
.brand .code{position:absolute;right:-14px;top:50%;transform:translateY(-50%) rotate(90deg);transform-origin:right center;
  font-size:10px;letter-spacing:.32em;color:rgba(245,245,243,.42);font-weight:600;white-space:nowrap;}  /* runs down the seam */
.wall{padding-top:clamp(88px,12vh,120px);min-width:0;}
.wall section{padding-left:0;padding-right:0;}
.wall .reelbox{margin:0 0 var(--sec);}
.svcblock{padding:0 0 var(--sec);}
.svcs.three{grid-template-columns:repeat(3,1fr);margin-top:22px;}
.wall .svc .h{font-size:clamp(20px,1.9vw,28px);letter-spacing:-.025em;}   /* one notch down inside the wall */
.wall .svc .d{font-size:14px;max-width:26ch;}
.how{margin-top:22px;color:#bdbdbd;letter-spacing:.22em;line-height:1.9;max-width:64ch;text-transform:uppercase;font-size:var(--lab);}
.workwall{padding:0 0 var(--sec);}
.reel-grid.two{grid-template-columns:repeat(2,1fr);}
.wall .contact{padding:var(--sec) 0;border-top:1px solid rgba(245,245,243,.12);}
.wall .contact .mid{margin-top:22px;font-size:clamp(28px,3.4vw,52px);}
.cell.off{display:none;}
@media(max-width:1023px){
  .split-lock{display:block;}
  .brand{position:static;height:auto;border-right:0;padding:clamp(88px,12vh,110px) 0 28px;}
  .brand .code{display:none;}
  .brand-ft{margin-top:22px;flex-direction:row;flex-wrap:wrap;gap:10px 22px;}   /* the column's own two lines, as a row under the credit (counsel r2 #5) */
  .wall{padding-top:0;}
  .reel-grid.two{grid-template-columns:repeat(2,1fr);}
  .svcs.three{grid-template-columns:1fr;}
}
@media(max-width:640px){
  .brand .mark{width:min(100%,280px);}
  .brand .arm{font-size:clamp(40px,12vw,56px);}
  .reel-grid.two{grid-template-columns:1fr;}
}

/* ══ ledger — one column, every room (spec §6) ══ */
.ledger .yr{margin:clamp(22px,3vw,34px) 0 8px;}
.log{list-style:none;border-top:1px solid rgba(5,4,4,.12);}
.row{display:grid;grid-template-columns:112px 1fr auto;column-gap:clamp(16px,2.4vw,32px);align-items:baseline;
  padding:13px 0;border-bottom:1px solid rgba(5,4,4,.1);position:relative;color:var(--ink);}
.row .d{font-size:var(--lab);letter-spacing:.28em;font-weight:700;color:var(--label-on-paper);font-variant-numeric:tabular-nums;}
.row .e{font-size:var(--lab);letter-spacing:.2em;font-weight:600;text-transform:uppercase;line-height:1.75;}
.row .dc{color:#5a5a5a;margin-left:8px;font-weight:600;}   /* the date class — invoice / release / delivery / master — dimmer, never mistaken for the credit */
.row .r{font-size:var(--lab);letter-spacing:.3em;font-weight:700;text-transform:uppercase;color:var(--label-on-paper);}
.row[data-v]{cursor:pointer;}
.row::after{content:"";position:absolute;left:0;bottom:-1px;height:1.5px;width:0;background:var(--red);
  transition:width .38s cubic-bezier(.2,.6,.2,1);}
.row[data-v]:hover::after,.row[data-v]:focus-visible::after{width:100%;}
.row[data-v]:hover .e{color:var(--red);}
.ledger .note{margin-top:clamp(22px,3vw,34px);font-size:var(--lab);letter-spacing:.2em;text-transform:uppercase;
  color:var(--label-on-paper);font-weight:600;line-height:1.8;max-width:64ch;}
@media(max-width:640px){
  .row{grid-template-columns:1fr auto;row-gap:4px;}
  .row .d{grid-column:1;}  .row .r{grid-column:2;grid-row:1;}  .row .e{grid-column:1 / -1;}
}

/* ── counsel fixes ── */
/* labels on light sections need real contrast (2.96:1 -> 7:1) */
.paper .slate,.paper .slate::before,.paper .slate::after{color:var(--label-on-paper);}
.paper .dash{background:var(--label-on-paper);}
/* focus ring must clear 3:1 on both grounds */
a:focus-visible,button:focus-visible,[tabindex]:focus-visible{
  outline:2px solid #fff;outline-offset:3px;box-shadow:0 0 0 5px var(--red);}
.paper a:focus-visible,.paper [tabindex]:focus-visible{outline-color:var(--ink);}
/* respect reduced motion */
@media(prefers-reduced-motion:reduce){
  html{scroll-behavior:auto;}
  .grain{animation:none;}
  .hero .film{transition:none;}
  *,*::before,*::after{animation-duration:.001ms!important;animation-iteration-count:1!important;transition-duration:.001ms!important;}
}

/* work grid on paper: 3 fixed at ≥1024, 2 on tablet, 1 on phones (spec §2.3) */
.paper .reel-grid{grid-template-columns:repeat(3,1fr);}
@media(max-width:1023px){.paper .reel-grid{grid-template-columns:repeat(2,1fr);}}
@media(max-width:640px){.paper .reel-grid{grid-template-columns:1fr;}}
.paper .cell-t{color:var(--ink);}
.paper .cell-k,.paper .cell-y{color:var(--label-on-paper);}
.paper .cell-c{color:#5a5a5a;}
.paper .cell-img{background:var(--hatch-pa);}

/* studios: square record sleeves */
.sleeve-grid{display:grid;grid-template-columns:repeat(3,1fr);gap:var(--gap);}
@media(max-width:1023px){.sleeve-grid{grid-template-columns:repeat(2,1fr);}}
@media(max-width:640px){.sleeve-grid{grid-template-columns:1fr;}}
.sleeve-grid .cell{cursor:default;}
.sleeve-grid .cell-img{aspect-ratio:1/1;}
.sleeve-grid .cell-img::after{background:linear-gradient(180deg,transparent 66%,rgba(0,0,0,.42));}

.cell-img.empty-art{display:flex;align-items:center;justify-content:center;
  background:repeating-linear-gradient(135deg,var(--hatch-a) 0 14px,var(--hatch-b) 14px 28px);}
.cell-img.empty-art span{font-size:var(--lab);letter-spacing:.26em;color:#6a6a6a;text-transform:uppercase;}

/* footer: arm label above handle */
footer .ig a{display:flex;flex-direction:column;gap:3px;}
footer .ig a i{font-style:normal;color:#8f8f8f;font-size:var(--lab);letter-spacing:.3em;}
footer .ig a:hover i{color:var(--paper);}

/* touch targets ≥ 24 px (WCAG 2.5.8) without moving a pixel: pad the box, pull it back with the same margin (counsel r2 #4) */
.doors a{padding:12px 0;margin:-12px 0;}
.doors a::after{bottom:4px;}                              /* was -8px on the unpadded box */
.bar .logo{padding:12px 0;margin:-12px 0;}
.sechead .more,.thead .back{padding:12px 0;margin:-12px 0;}
footer a{display:inline-block;padding:8px 0;margin:-8px 0;}
footer .ig a{display:flex;}                               /* keeps the arm-label-over-handle stack */
.hero .pag button{padding:15px 8px;}                      /* 38 → 44 */
.brand-ft a{padding:8px 0;margin:-8px 0;}                 /* the two /sound column links r2 #5 just made visible on phones were 16 px tall */

/* room heads = one construction (counsel r3 #3): 1 X clear above and below the mark (37 px ≥641, 29 px ≤640, §2);
   Rep's lockup scaled so its wordmark band is 360/280 like Sound and Studios; the PNG's 21/1500 padding pulled off the gutter */
.brand .mark,.rhead .mark{margin-top:37px;}
.brand .rule,.rhead .rule{margin:37px 0 18px;}
.rhead .sub{margin-top:18px;font-size:clamp(14px,1.2vw,16px);max-width:34ch;}   /* = .brand .sub */
.rhead h1.lockup{margin-top:32px;margin-left:-5px;}        /* 32 + 5 px padding = 37 to the ink; the K lands on the gutter */
.rhead h1.lockup img{width:min(100%,373px);}               /* 373 × 1447/1500 = 360 px wordmark; REP suffix cap 22 px */
.rhead h1.lockup + .sub{margin-top:32px;}                  /* 32 + 5 px padding = 37 under the suffix */
.rhead:not(.thead)>.slate{display:flex;}                   /* the inline-flex slate sat in an anonymous line box whose descender added 3.6 px under it on Studios/Rep (Sound's flex column blockifies it); block-level = the 37 measures ink to ink (builder r3) */
@media(max-width:640px){
  .brand .mark,.rhead .mark{margin-top:29px;} .brand .rule,.rhead .rule{margin:29px 0 18px;}
  .rhead h1.lockup{margin-top:25px;margin-left:-4px;} .rhead h1.lockup img{width:min(100%,290px);} .rhead h1.lockup + .sub{margin-top:25px;}
}
/* motif 7 on the reel: grayscale until the click for sound, colour on play (counsel r3 #5) */
.reelbox video{filter:grayscale(1) contrast(1.06);transition:filter .45s;}
.reelbox.playing video{filter:none;}
/* motif 8: the index reads on light artwork — a one-colour halo, the same device .hero .lab .slate uses (style.css:115).
   Builder r3: the counsel's two layers alone left [ 02 ] invisible on doritos (1.2:1 measured on the composite); three tight 2 px layers of the same black
   in front of them give the 9 px glyphs an outline that reads on every tile. Same colour, same device, no wash; the .62 token untouched. */
.cell-img .idx{text-shadow:0 0 2px #000,0 0 2px #000,0 0 2px #000,0 1px 3px rgba(0,0,0,.9),0 0 14px rgba(0,0,0,.7);}

/* round 3 close-out: tile index solid paper so [ nn ] passes 3:1 on light artwork (measured 3.34-5.38 vs 1.6-2.5 at .62) */
.cell-img .idx{color:var(--paper);}

/* the empty slate follows the text on phones and tablets (counsel r5 #3); .tp.empty only — a licensed photograph (build-rep.py:107) goes back to the top with no CSS change */
@media(max-width:820px){.tp.empty{order:2;}}
/* round 6: #work / #services land clear of the fixed bar (head 28-29px below bar at all widths) */
.workwall,.svcblock{scroll-margin-top:96px;}
@media(max-width:640px){.workwall,.svcblock{scroll-margin-top:104px;}}

/* ══ clickthrough QA 2026-09-29 (qa/clickthrough.js) ══ */
/* a hash link (#contact, #work) must land with its heading below the fixed bar, not under it — the phone menu's Contact put "Brief us" / talent booking 14–73 px under the bar */
html{scroll-padding-top:96px;}
@media(max-width:640px){html{scroll-padding-top:104px;}}
/* the word KLASS is only ever the logo PNG (Bible §6): an address or handle is set as written, never uppercased into a typeset "KLASS" */
a[href^="mailto:"],a[href*="instagram.com/"]{text-transform:none;}
/* below 1120 px the gutter (5vw) is narrower than the corner marks (22 + 26 px): they sat on the bar logo and across the
   knock-out mark at 390 and 768 (clear space, guidelines §12 #3). The marks frame the hero only where they clear the mark. */
@media(max-width:1119px){.hero .regs{display:none;}}
/* 320: the hero label broke onto two lines ("MUSIC & / SOUND") — hold it on one line */
/* the arm name beside a handle stays in the label register; only the handle itself is set as written */
footer .ig a i,.menu-overlay .ft a i{font-style:normal;text-transform:uppercase;}

/* ══ counsel round 7 (2026-09-30) ══ */
/* #2 — unlicensed talent is type, like Somesuch /directors. No slot until licensed:true; .has-photos (build-rep.py) restores the photo track with no CSS change */
.roster:not(.has-photos) .face a{grid-template-columns:64px 1fr;padding:clamp(18px,2.2vw,28px) 0;}
@media(min-width:641px){.roster:not(.has-photos) .face .n{font-size:clamp(28px,5vw,72px);}}
@media(max-width:640px){.roster:not(.has-photos) .face a{grid-template-columns:1fr;}}
.tgrid--type{grid-template-columns:minmax(0,1fr) minmax(0,1fr);}
.tgrid--type .tside{padding-top:0;}
@media(max-width:820px){.tgrid--type{grid-template-columns:1fr;} .tgrid--type .tside{padding-top:38px;}}

/* #3 — one list of rooms: each door carries its own descriptor (the slate above it is gone) */
.doors a{text-align:center;}
.doors a small{display:block;margin-top:12px;font:700 var(--lab)/1 var(--body);letter-spacing:.28em;color:var(--paper);
  text-shadow:0 1px 3px rgba(5,4,4,.9),0 0 14px rgba(5,4,4,.85);}   /* builder r7: the counsel's .78 measured 3.55:1 worst case over film 01's window highlights; solid paper + a tight one-colour halo (the .idx device) holds ≥4.5 */
@media(max-width:640px){.doors a small{letter-spacing:.14em;margin-top:9px;}}
@media(max-width:360px){.doors{gap:10px;} .doors a small{letter-spacing:.06em;}}
/* one mark per screen: while the page's own mark (hero .knock, the /sound column mark, the /studios head mark) is on screen, the bar logo steps back (app.js toggles body.at-mark) */
.bar .logo{transition:opacity .35s ease,visibility 0s linear 0s;}
body.at-mark .bar .logo{opacity:0;visibility:hidden;pointer-events:none;transition:opacity .35s ease,visibility 0s linear .35s;}
/* the column mark is the way home on /sound and /studios */
.markhome{display:block;width:min(100%,360px);line-height:0;}
.markhome .mark{width:100%;}
@media(max-width:640px){.markhome{width:min(100%,280px);}}

/* #4 — the credits at desktop scale: the title line lifts, the credit reads as a line, not a code */
.cell-t{font-size:clamp(14px,1.25vw,18px);}
.cell-c{letter-spacing:.14em;}
.cr-t{font-size:clamp(14px,1.1vw,16px);}

/* #5 — the play ring is intent, not furniture: hidden at rest where there is a hover; always on for touch */
@media(hover:hover){.cell-img .pl{opacity:0;transition:opacity .25s,background .22s,border-color .22s;}
  .cell:hover .cell-img .pl,.cell:focus-visible .cell-img .pl{opacity:1;}}

/* ══ /brief — the Rep project brief. One document, two languages: every string sits in the HTML twice ([lang=en] /
   [lang=ar]); html[data-lang] shows one. AR: RTL, Noto Sans Arabic, no tracking or caps (Latin typography only). ══ */
html:not([data-lang="ar"]) body [lang="ar"]{display:none;}
html[data-lang="ar"] body [lang="en"]{display:none;}
.lang button.arabic{font-family:'Noto Sans Arabic',var(--body);letter-spacing:0;text-transform:none;font-size:14px;}
.brief-sec{padding-top:clamp(40px,6vw,72px);}
.brief-sec form{max-width:720px;margin-top:0;}
.qs{list-style:none;margin:0;padding:0;}
.q{position:relative;padding:clamp(28px,4vw,42px) 0;border-top:1px solid rgba(5,4,4,.12);}
.q:first-child{border-top:0;padding-top:0;}
.q .idx{font-size:var(--lab);letter-spacing:.28em;font-weight:700;color:var(--label-on-paper);}
.q .t{display:block;margin:10px 0 8px;font-family:var(--disp);font-weight:900;font-size:clamp(21px,2.4vw,28px);line-height:1.05;
  letter-spacing:-.02em;text-transform:uppercase;color:var(--ink);padding:0;}
.q .help{color:#3f3f3f;font-size:15px;line-height:1.55;max-width:62ch;margin:0 0 2px;}
.q .terms{margin-top:14px;}
.q fieldset{border:0;margin:0;padding:0;min-width:0;}
.paper input,.paper textarea{color:var(--ink);border-bottom-color:rgba(5,4,4,.3);}
.paper input:focus,.paper textarea:focus{border-color:var(--red);}
.paper input::placeholder,.paper textarea::placeholder{color:#8a8a8a;}
.paper label{color:var(--label-on-paper);}
.q textarea{min-height:0;margin-top:2px;}
.dk{background:none;border:0;padding:8px 0;margin-top:4px;cursor:pointer;font-size:var(--lab);letter-spacing:.24em;
  text-transform:uppercase;font-weight:700;color:var(--label-on-paper);min-height:44px;}
.dk:hover{color:var(--ink);box-shadow:0 2px 0 var(--red);}
/* the budget band: a radio is a hairline square; checked = ink dot + the red hairline ring. A line, never a fill. */
.opt{display:flex;gap:14px;align-items:center;padding:9px 0;margin:0;cursor:pointer;position:relative;
  font-size:16px;font-weight:600;color:var(--ink);text-transform:none;letter-spacing:0;min-height:44px;}
.opt input{position:absolute;opacity:0;width:1px;height:1px;margin:0;pointer-events:none;}
.opt .box{flex:0 0 auto;width:18px;height:18px;border:1.5px solid rgba(5,4,4,.5);position:relative;transition:box-shadow .15s;}
.opt input:checked+.box{border-color:var(--ink);box-shadow:0 0 0 1px var(--red);}
.opt input:checked+.box::after{content:"";position:absolute;inset:4px;background:var(--ink);}
.opt input:focus-visible+.box{outline:2px solid var(--ink);outline-offset:3px;}
.usd{max-width:220px;margin:-2px 0 6px 32px;padding-top:4px;}
.reply{margin-top:clamp(28px,4vw,42px);padding-top:clamp(28px,4vw,42px);border-top:1px solid rgba(5,4,4,.12);max-width:420px;}
.reply label{margin-top:0;}
.paper .send{color:var(--ink);}
.paper .send[disabled]{opacity:.45;cursor:wait;}
.paper .how{color:#3f3f3f;}
.err{margin-top:18px;color:var(--ink);font-size:15px;line-height:1.65;max-width:62ch;}
.err a{text-decoration:underline;text-decoration-color:var(--red);text-decoration-thickness:2px;text-underline-offset:4px;font-weight:700;}
#sent{max-width:720px;outline:none;}
#sent .mid{margin-top:14px;}
#sent .sent-p{margin-top:18px;font-size:clamp(15px,1.4vw,18px);line-height:1.6;max-width:52ch;color:var(--ink);}
.paper .cta .k{color:var(--label-on-paper);}
/* Arabic: RTL, its own face, no tracking, no caps; the Latin brackets and the email keep their direction */
html[data-lang="ar"] main{font-family:'Noto Sans Arabic','Nunito Sans',system-ui,sans-serif;}
html[data-lang="ar"] .rhead .sub{max-width:40ch;font-size:clamp(15px,1.9vw,19px);line-height:1.75;}
html[data-lang="ar"] .q .t,html[data-lang="ar"] #sent .mid{font-family:'Noto Sans Arabic',var(--disp);font-weight:800;letter-spacing:0;text-transform:none;line-height:1.35;}
html[data-lang="ar"] .q .help,html[data-lang="ar"] .opt,html[data-lang="ar"] .err,html[data-lang="ar"] #sent .sent-p{line-height:1.8;}
html[data-lang="ar"] .dk,html[data-lang="ar"] .send,html[data-lang="ar"] .how,html[data-lang="ar"] .reply label,html[data-lang="ar"] .cta .k,
html[data-lang="ar"] .slate [lang="ar"],html[data-lang="ar"] #sent .slate{letter-spacing:0;text-transform:none;font-size:13px;}
html[data-lang="ar"] .q .idx{direction:ltr;text-align:right;}
html[data-lang="ar"] .usd{margin:-2px 32px 6px 0;}
html[data-lang="ar"] textarea{text-align:right;}