/* =====================================================================
   THE MISFITS — Staging Site  ·  Design System (Concept C "The Statement")
   Brand: orange #F05C22 · ink · Archivo (display) + Inter (body) + IBM Plex Sans Arabic
   ===================================================================== */

:root{
  --orange:#F05C22;
  --orange-deep:#C8410F;
  --ink:#0B0B0B;
  --ink-1:#111111;
  --ink-2:#171717;
  --ink-3:#1F1F1F;
  --line:#2A2A2A;
  --paper:#FAF7F2;
  --paper-2:#ffffff;
  --fg:#FFFFFF;
  --fg-dim:#C7C7C7;
  --fg-mute:#8C8C8C;
  --display:'Archivo',system-ui,sans-serif;
  --body:'Inter',system-ui,sans-serif;
  --arabic:'IBM Plex Sans Arabic',var(--body);
  --maxw:1280px;
  --pad:clamp(20px,5vw,40px);
  --r:6px;
  --ease:cubic-bezier(.16,1,.3,1);
}

*{margin:0;padding:0;box-sizing:border-box}
html{scroll-behavior:smooth;-webkit-text-size-adjust:100%}
body{
  font-family:var(--body);background:var(--ink);color:var(--fg);
  line-height:1.6;-webkit-font-smoothing:antialiased;overflow-x:hidden;
}
img{max-width:100%;display:block}
a{color:inherit;text-decoration:none}
h1,h2,h3,h4{font-family:var(--display);line-height:.95;letter-spacing:-.03em;font-weight:900}
::selection{background:var(--orange);color:#111}

.wrap{max-width:var(--maxw);margin:0 auto;padding-left:var(--pad);padding-right:var(--pad)}
.sr-only{position:absolute;width:1px;height:1px;overflow:hidden;clip:rect(0,0,0,0)}

/* ---------- Placeholder marker (clearly labelled) ---------- */
.ph{
  outline:2px dashed rgba(240,92,34,.5);outline-offset:-2px;
  background:repeating-linear-gradient(45deg,rgba(240,92,34,.05),rgba(240,92,34,.05) 12px,transparent 12px,transparent 24px);
  display:flex;align-items:center;justify-content:center;text-align:center;
  color:#d8895f;font:600 11px/1.45 var(--body);letter-spacing:.06em;text-transform:uppercase;padding:16px;
}
.ph--light{color:#b5481c}
.note{color:var(--orange);font-style:italic}
.imgfill{position:absolute;inset:0;background-size:cover;background-position:center;background-repeat:no-repeat}
.imgfill--contain{background-size:contain;background-repeat:no-repeat;background-position:center}
body::after{content:"";position:fixed;inset:0;background:url('../img/ai/grain.jpg') center/cover no-repeat;mix-blend-mode:screen;opacity:.05;pointer-events:none;z-index:1}

/* ---------- Staging banner ---------- */
.staging{
  background:var(--orange);color:#111;text-align:center;
  font:700 11px/1 var(--body);letter-spacing:.12em;text-transform:uppercase;padding:7px 16px;
}

/* ---------- Buttons ---------- */
.btn{
  display:inline-flex;align-items:center;gap:10px;cursor:pointer;border:none;
  background:var(--orange);color:#111;font-family:var(--display);font-weight:800;font-size:15px;
  padding:15px 28px;border-radius:var(--r);transition:transform .25s var(--ease),background .25s;
}
.btn:hover{transform:translateY(-2px);background:#ff6a31}
.btn--ghost{background:transparent;color:#fff;border:1px solid rgba(255,255,255,.45)}
.btn--ghost:hover{background:rgba(255,255,255,.08);border-color:#fff}
.btn--dark{background:var(--ink-1);color:#fff}
.btn--lg{padding:18px 34px;font-size:17px}

/* ---------- Header / Nav ---------- */
.site-head{position:sticky;top:0;z-index:60;background:rgba(11,11,11,.82);backdrop-filter:blur(12px);border-bottom:1px solid var(--line)}
.nav{display:flex;align-items:center;justify-content:space-between;height:74px}
.brand{display:flex;align-items:center;gap:10px}
.brand img{height:26px;width:auto}
.nav-links{display:flex;gap:30px;list-style:none;font-size:14.5px;font-weight:500}
.nav-links a{position:relative;padding:4px 0;color:var(--fg-dim);transition:color .2s}
.nav-links a:hover,.nav-links a[aria-current="page"]{color:#fff}
.nav-links a:after{content:"";position:absolute;left:0;bottom:-2px;height:2px;width:0;background:var(--orange);transition:width .25s var(--ease)}
.nav-links a:hover:after,.nav-links a[aria-current="page"]:after{width:100%}
.nav-right{display:flex;align-items:center;gap:16px}
.lang{display:none;border:1px solid var(--line);border-radius:30px;padding:6px 13px;font-size:12px;color:var(--fg-dim);cursor:pointer}
.lang:hover{border-color:var(--orange);color:#fff}
.burger{display:none;flex-direction:column;gap:5px;background:none;border:none;cursor:pointer;padding:6px}
.burger span{width:24px;height:2px;background:#fff;transition:.3s}
.mobile-menu{display:none}

/* ---------- Section scaffolding ---------- */
.section{padding:clamp(64px,9vw,120px) 0}
.section--tight{padding:clamp(48px,6vw,80px) 0}
.section--paper{background:var(--paper);color:#141414}
.section--ink1{background:var(--ink-1)}
.eyebrow{color:var(--orange);font:800 13px/1 var(--display);letter-spacing:.18em;text-transform:uppercase;margin-bottom:18px}
.section--paper .eyebrow{color:var(--orange-deep)}
.h-xl{font-size:clamp(40px,8vw,104px)}
.h-lg{font-size:clamp(34px,5.5vw,72px);text-transform:uppercase}
.h-md{font-size:clamp(28px,4vw,48px)}
.lead{font-size:clamp(17px,2vw,20px);color:var(--fg-dim);max-width:640px}
.section--paper .lead{color:#4a4a4a}
.center{text-align:center}.mx-auto{margin-left:auto;margin-right:auto}

/* ---------- Hero (statement) ---------- */
.hero{position:relative;min-height:92vh;display:flex;align-items:center;padding:120px 0 64px;
  background:radial-gradient(130% 90% at 85% 8%,#241a14 0%,var(--ink) 55%)}
.hero__ghost{position:absolute;top:6%;left:-2%;font-family:var(--display);font-weight:900;
  font-size:19vw;color:rgba(255,255,255,.03);white-space:nowrap;pointer-events:none;user-select:none}
.hero__inner{position:relative;z-index:3;width:100%}
.statement{font-size:clamp(46px,11vw,170px);font-weight:900;text-transform:uppercase;letter-spacing:-.035em}
.statement .ln{display:block;overflow:hidden}
.statement .w-a{font-weight:900}
.statement .w-b{font-weight:600;color:var(--orange)}
.statement .w-c{font-weight:300}
.hero__sub{display:flex;justify-content:space-between;align-items:flex-end;gap:34px;flex-wrap:wrap;margin-top:38px}
.hero__sub p{max-width:460px;color:var(--fg-dim);font-size:clamp(16px,2vw,19px)}
.hero__reel{width:240px;flex-shrink:0}
.hero__reel .thumb{aspect-ratio:16/9;border-radius:var(--r);position:relative;overflow:hidden;cursor:pointer}
.hero__reel small{display:block;margin-top:9px;color:var(--fg-mute);font:600 11px/1 var(--body);letter-spacing:.1em;text-transform:uppercase}
.hero__cta{display:flex;gap:14px;flew-wrap:wrap;margin-top:34px}

/* play button */
.play{position:absolute;top:50%;left:50%;transform:translate(-50%,-50%);width:64px;height:64px;border-radius:50%;
  border:2px solid rgba(255,255,255,.6);display:flex;align-items:center;justify-content:center;transition:.3s;background:rgba(0,0,0,.25)}
.play:after{content:"";border-left:18px solid #fff;border-top:11px solid transparent;border-bottom:11px solid transparent;margin-left:5px}
.thumb:hover .play,.play:hover{background:var(--orange);border-color:var(--orange);transform:translate(-50%,-50%) scale(1.08)}
.play--lg{width:96px;height:96px}.play--lg:after{border-left:26px solid #fff;border-top:16px solid transparent;border-bottom:16px solid transparent}

/* ---------- Marquee ---------- */
.marquee{border-top:2px solid var(--orange);border-bottom:1px solid var(--line);background:var(--orange);color:#111;overflow:hidden;white-space:nowrap}
.marquee__track{display:inline-flex;gap:46px;padding:15px 0;font-family:var(--display);font-weight:800;font-size:19px;animation:marq 26s linear infinite;will-change:transform}
.marquee__track span{opacity:.92}
@keyframes marq{from{transform:translateX(0)}to{transform:translateX(-50%)}}

/* ---------- Logo wall (real client logos on tiles) ---------- */
.logowall{display:grid;grid-template-columns:repeat(5,1fr);gap:14px}
.logowall .tile{background:#fff;border-radius:var(--r);height:96px;display:flex;align-items:center;justify-content:center;padding:18px}
.logowall .tile img{max-height:100%;max-width:100%;width:auto;object-fit:contain;filter:none}
@media(max-width:860px){.logowall{grid-template-columns:repeat(3,1fr)}}
@media(max-width:540px){.logowall{grid-template-columns:repeat(2,1fr)}}

/* ---------- Page hero (interior) ---------- */
.phead{padding:140px 0 56px;position:relative;background:radial-gradient(120% 100% at 90% 0%,#221911 0%,var(--ink) 60%);border-bottom:1px solid var(--line)}
.phead .crumb{color:var(--fg-mute);font:600 12px/1 var(--body);letter-spacing:.1em;text-transform:uppercase;margin-bottom:18px}
.phead h1{font-size:clamp(44px,8vw,108px);text-transform:uppercase}
.phead p{margin-top:20px;max-width:600px;color:var(--fg-dim);font-size:18px}

/* ---------- Work grid (filterable) ---------- */
.filters{display:flex;gap:10px;flex-wrap:wrap;margin:8px 0 30px}
.chip{border:1px solid var(--line);border-radius:30px;padding:9px 18px;font:600 13px/1 var(--body);color:var(--fg-dim);background:none;cursor:pointer;transition:.2s}
.chip:hover{border-color:var(--orange);color:#fff}
.chip.is-active{background:var(--orange);color:#111;border-color:var(--orange)}
.work-grid{display:grid;grid-template-columns:repeat(3,1fr);gap:18px}
.work-card{background:var(--ink-2);border:1px solid var(--line);border-radius:var(--r);overflow:hidden;transition:transform .3s var(--ease),box-shadow .3s}
.work-card:hover{transform:translateY(-5px);box-shadow:0 20px 50px rgba(0,0,0,.45)}
.work-card__img{aspect-ratio:4/3;position:relative;overflow:hidden}
.work-card__img .ph{position:absolute;inset:0}
.work-card__body{padding:16px 18px 20px}
.work-card__c{font-family:var(--display);font-weight:800;font-size:19px}
.work-card__m{color:var(--fg-mute);font-size:13px;margin-top:3px}
.work-card__tag{display:inline-block;margin-top:11px;font:700 11px/1 var(--body);letter-spacing:.06em;text-transform:uppercase;color:var(--orange)}

/* asymmetric gallery (home) */
.gallery{display:grid;grid-template-columns:repeat(12,1fr);gap:16px}
.gallery .g{border-radius:var(--r);overflow:hidden;position:relative}
.gallery .g .ph{position:absolute;inset:0}
.gallery .cap{position:absolute;left:16px;bottom:14px;z-index:2;font-family:var(--display);font-weight:800;font-size:17px;text-shadow:0 2px 14px rgba(0,0,0,.7)}
.gallery .g:after{content:"";position:absolute;inset:0;background:linear-gradient(0deg,rgba(0,0,0,.55),transparent 55%)}
.g-7{grid-column:span 7;aspect-ratio:16/10}
.g-5{grid-column:span 5;aspect-ratio:4/5}

/* ---------- Division blocks ---------- */
.divs{display:grid;grid-template-columns:1fr 1fr;gap:18px}
.divblock{padding:clamp(32px,4vw,52px) clamp(28px,3vw,44px);border-radius:8px;position:relative;overflow:hidden;min-height:280px;display:flex;flex-direction:column;justify-content:flex-end}
.divblock--p{background:var(--ink-2);border:1px solid var(--line)}
.divblock--s{background:var(--orange);color:#111}
.divblock .no{position:absolute;top:24px;right:30px;font-family:var(--display);font-weight:900;font-size:64px;opacity:.16}
.divblock h3{font-size:clamp(28px,3.4vw,40px);text-transform:uppercase}
.divblock .role{font:600 14px/1.4 var(--body);margin:9px 0 13px}
.divblock--p .role{color:var(--orange)}.divblock--s .role{color:#5a2c12}
.divblock p{font-size:15px}.divblock--p p{color:var(--fg-dim)}.divblock--s p{color:#3a1c0e}
.divblock a.more{margin-top:18px;font-family:var(--display);font-weight:800;font-size:14px;display:inline-flex;gap:7px;align-items:center}
.divblock--p a.more{color:var(--orange)}

/* ---------- Stats ---------- */
.stats{display:grid;grid-template-columns:repeat(3,1fr);gap:30px}
.stats--4{grid-template-columns:repeat(4,1fr)}
.stat b{font-family:var(--display);font-weight:900;font-size:clamp(42px,5vw,68px);color:var(--orange);display:block;line-height:1}
.stat span{color:var(--fg-mute);font-size:14px;margin-top:6px;display:block}
.section--paper .stat span{color:#666}

/* ---------- Team ---------- */
.team{display:grid;grid-template-columns:repeat(4,1fr);gap:20px}
.person .ph{aspect-ratio:1;border-radius:var(--r);margin-bottom:12px}
.person b{font-family:var(--display);font-size:17px;display:block}
.person span{color:var(--fg-mute);font-size:13px}
.section--paper .person span{color:#666}

/* ---------- Quote ---------- */
.quote{max-width:900px}
.quote p{font-family:var(--display);font-weight:700;font-size:clamp(22px,3vw,38px);line-height:1.2}
.quote .by{margin-top:18px;color:var(--fg-mute);font-size:14px}

/* ---------- Services list ---------- */
.svc{display:grid;grid-template-columns:1fr 1fr;gap:0;border:1px solid var(--line);border-radius:8px;overflow:hidden}
.svc__col{padding:clamp(28px,3.4vw,48px)}
.svc__col+.svc__col{border-left:1px solid var(--line)}
.svc__col .bar{width:46px;height:5px;background:var(--orange);margin-bottom:18px}
.svc__col h3{font-size:28px;text-transform:uppercase}
.svc__col .role{color:var(--orange);font:600 14px/1 var(--body);margin:8px 0 16px}
.svc__col ul{list-style:none}
.svc__col li{padding:11px 0;border-bottom:1px dashed var(--line);font-size:15px;color:var(--fg-dim);display:flex;gap:10px}
.svc__col li:before{content:"—";color:var(--orange)}

/* ---------- Contact form ---------- */
.cgrid{display:grid;grid-template-columns:1.1fr .9fr;gap:48px}
.field{margin-bottom:18px}
.field label{display:block;font:600 13px/1 var(--body);letter-spacing:.04em;text-transform:uppercase;color:var(--fg-mute);margin-bottom:8px}
.field input,.field select,.field textarea{width:100%;background:var(--ink-2);border:1px solid var(--line);border-radius:var(--r);
  color:#fff;font-family:var(--body);font-size:15px;padding:14px 16px;transition:border .2s}
.field input:focus,.field select:focus,.field textarea:focus{outline:none;border-color:var(--orange)}
.field textarea{min-height:130px;resize:vertical}
.contact-meta{border-left:2px solid var(--orange);padding-left:22px;margin-bottom:26px}
.contact-meta .k{color:var(--fg-mute);font:600 12px/1 var(--body);letter-spacing:.08em;text-transform:uppercase;margin-bottom:6px}
.contact-meta .v{font-family:var(--display);font-weight:700;font-size:19px}
.map .ph{aspect-ratio:16/9;border-radius:var(--r);margin-top:14px}

/* ---------- CTA band ---------- */
.ctaband{background:var(--paper);color:#111;text-align:center}
.ctaband h2{font-size:clamp(34px,6vw,84px);text-transform:uppercase}
.ctaband--orange{background:var(--orange);color:#111}

/* ---------- Footer ---------- */
.site-foot{border-top:1px solid var(--line);background:var(--ink);padding:64px 0 36px}
.foot-grid{display:grid;grid-template-columns:2fr 1fr 1fr 1.4fr;gap:32px;margin-bottom:44px}
.foot-grid h4{font-family:var(--display);font-size:14px;letter-spacing:.06em;text-transform:uppercase;color:var(--fg-mute);margin-bottom:16px;font-weight:700}
.foot-grid ul{list-style:none}
.foot-grid li{margin-bottom:10px}
.foot-grid a{color:var(--fg-dim);font-size:14px}.foot-grid a:hover{color:var(--orange)}
.foot-brand img{height:30px;margin-bottom:16px}
.foot-brand p{color:var(--fg-mute);font-size:14px;max-width:280px}
.foot-bottom{display:flex;justify-content:space-between;flex-wrap:wrap;gap:14px;padding-top:26px;border-top:1px solid var(--line);color:var(--fg-mute);font-size:13px}
.foot-bottom .always{font-family:var(--display);font-style:italic;font-weight:700;color:var(--orange)}

/* ---------- Reveal on scroll ---------- */
.reveal-ready .reveal{opacity:0;transform:translateY(28px);transition:opacity .8s var(--ease),transform .8s var(--ease)}
.reveal.in{opacity:1;transform:none}
.reveal.d1{transition-delay:.08s}.reveal.d2{transition-delay:.16s}.reveal.d3{transition-delay:.24s}.reveal.d4{transition-delay:.32s}

/* hero kinetic on load */
.kin{transform:translateY(110%);animation:rise .95s var(--ease) forwards}
.kin.k1{animation-delay:.05s}.kin.k2{animation-delay:.22s}.kin.k3{animation-delay:.39s}
@keyframes rise{to{transform:translateY(0)}}
.fade-late{opacity:0;animation:fadein 1s ease forwards}
.fade-late.l1{animation-delay:.7s}.fade-late.l2{animation-delay:.85s}
@keyframes fadein{to{opacity:1}}

/* ---------- Reel modal ---------- */
.modal{position:fixed;inset:0;z-index:200;background:rgba(0,0,0,.9);display:none;align-items:center;justify-content:center;padding:24px}
.modal.open{display:flex}
.modal__box{width:min(960px,100%);aspect-ratio:16/9;position:relative}
.modal__box .ph{position:absolute;inset:0;border-radius:8px}
.modal__close{position:absolute;top:-44px;right:0;background:none;border:none;color:#fff;font-size:30px;cursor:pointer;font-family:var(--display)}

/* ---------- Responsive ---------- */
@media(max-width:1000px){
  .foot-grid{grid-template-columns:1fr 1fr}
  .stats--4{grid-template-columns:1fr 1fr}
  .team{grid-template-columns:1fr 1fr}
}
@media(max-width:860px){
  .nav-links{display:none}
  .burger{display:flex}
  .mobile-menu{display:block;position:fixed;inset:74px 0 0;background:var(--ink);z-index:55;padding:32px var(--pad);transform:translateX(100%);transition:transform .35s var(--ease)}
  .mobile-menu.open{transform:none}
  .mobile-menu a{display:block;font-family:var(--display);font-weight:800;font-size:30px;text-transform:uppercase;padding:14px 0;border-bottom:1px solid var(--line)}
  .work-grid{grid-template-columns:1fr 1fr}
  .divs,.svc,.cgrid{grid-template-columns:1fr}
  .svc__col+.svc__col{border-left:none;border-top:1px solid var(--line)}
  .stats{grid-template-columns:1fr 1fr}
  .gallery .g{grid-column:span 12 !important;aspect-ratio:16/10}
  .hero__reel{width:200px}
}
@media(max-width:540px){
  .work-grid,.stats,.stats--4,.team{grid-template-columns:1fr}
  .hero__sub{flex-direction:column;align-items:flex-start}
  .foot-grid{grid-template-columns:1fr}
}

/* ---------- Reduced motion ---------- */
@media(prefers-reduced-motion:reduce){
  *{animation:none!important;transition:none!important}
  .reveal{opacity:1;transform:none}
  .kin{transform:none}.fade-late{opacity:1}
}

/* ---------- RTL hook (Arabic) ---------- */
[dir="rtl"]{font-family:var(--arabic)}
[dir="rtl"] .nav-links a:after{left:auto;right:0}
[dir="rtl"] .contact-meta{border-left:none;border-right:2px solid var(--orange);padding-left:0;padding-right:22px}
/* DEC-148 P2+a11y hardening */
body{overflow-x:clip}
.site-head{-webkit-backdrop-filter:blur(12px)}
.hero{min-height:92svh}
.burger,.modal__close{min-width:44px;min-height:44px}
:focus-visible{outline:2px solid var(--orange);outline-offset:2px;border-radius:2px}
.btn:focus-visible{outline-offset:3px}
.section--paper :focus-visible,.ctaband :focus-visible{outline-color:var(--orange-deep)}
.field input:focus-visible,.field select:focus-visible,.field textarea:focus-visible{outline:2px solid var(--orange);outline-offset:1px;border-color:var(--orange)}
[dir="rtl"]{font-family:var(--arabic)}
[dir="rtl"] .nav-links a:after{left:auto;right:0}
[dir="rtl"] .contact-meta{border-left:none;border-right:2px solid var(--orange);padding-left:0;padding-right:22px}

/* F-MISFITS-320OVERFLOW-1 — three pages scrolled sideways at 320px. Two causes.

   (a) about.html and contact.html each carry a hand-written two-column grid as an INLINE style
       (1fr 1.2fr / 1.2fr 1fr / 1fr 1fr, 34px gap) with no narrow-width collapse. Grid items default
       to min-width:auto, so the tracks refuse to shrink below their content: measured at a 320px
       viewport the about grid needed 174 + 34 + 177 = 385px inside a 280px container, pushing the
       page to 407px, and contact's needed 363px, pushing it to 383px.
       They collapse to one column on a phone now. 480px is the band where a 34px-gap two-column
       split stops being readable anyway; both defects sit well inside it.
       `!important` is required and is the legitimate case for it — the declaration it overrides is
       an inline style attribute, which no ordinary selector can outrank.

   (b) production.html's hero heading is the single word "PRODUCTION." — 11 characters, uppercase,
       weight 900. `.phead h1` is clamp(44px, 8vw, 108px), so below 550px the FLOOR holds at 44px
       and the word measures 328px inside a 280px container. It has no space to break at, so it
       overflowed and took the page with it. "STUDIOS." fits; "THE INDEX." has a space and wraps —
       which is why one page of six was affected.
       The floor is eased below 370px, the only band where it does not fit. Ordinary responsive
       type: no hyphenation, no mid-word break, and the heading stays a single line. */
@media (max-width: 480px) {
  .split-2 { grid-template-columns: 1fr !important; }
}
@media (max-width: 370px) {
  .phead h1 { font-size: clamp(36px, 11vw, 44px); }
}

/* ---------- Video facade (Vimeo, click-to-load) ------------------------------------------
   The 2026-06 decision rejected a RAW third-party hero embed (competitor leakage, branding).
   A facade keeps that intent: nothing from the video host loads until the visitor asks for it,
   so the page ships zero third-party frames and the poster is our own asset. -------------- */
.vplay{position:relative;aspect-ratio:16/9;border-radius:var(--r);overflow:hidden;background:var(--ink-2)}
.vplay iframe{position:absolute;inset:0;width:100%;height:100%;border:0;display:block}
.vplay__btn{position:absolute;inset:0;width:100%;height:100%;display:flex;align-items:center;
  justify-content:center;gap:14px;background:linear-gradient(180deg,rgba(0,0,0,.12),rgba(0,0,0,.58));
  border:0;cursor:pointer;color:#fff;font:700 15px/1 var(--body);letter-spacing:.02em;text-align:left}
.vplay__ico{flex:none;display:grid;place-items:center;width:58px;height:58px;border-radius:50%;
  background:var(--orange);color:#111;font-size:18px;padding-left:4px;transition:transform .25s var(--ease)}
.vplay__btn:hover .vplay__ico,.vplay__btn:focus-visible .vplay__ico{transform:scale(1.09)}
.vplay__btn:focus-visible{outline:3px solid var(--orange);outline-offset:-3px}
.vplay__dur{opacity:.72;font-weight:500}
.vgrid{display:grid;grid-template-columns:1fr 1fr;gap:16px}
.work-card__play{position:absolute;left:12px;bottom:12px;z-index:2;width:32px;height:32px;border-radius:50%;
  background:rgba(0,0,0,.58);color:#fff;display:grid;place-items:center;font-size:11px;padding-left:2px}
@media (max-width:700px){
  .vgrid{grid-template-columns:1fr}
  .vplay__btn{font-size:13px;gap:11px}
  .vplay__ico{width:48px;height:48px;font-size:15px}
}
@media (prefers-reduced-motion:reduce){
  .vplay__btn:hover .vplay__ico,.vplay__btn:focus-visible .vplay__ico{transform:none}
}

/* ---------- Accessibility + containment fixes (2026-08-31) --------------------------------
   All three were pre-existing and are implementation-only under rule 15 (DEC-334). ------- */

/* 1. The decorative division numeral failed WCAG large-text contrast at 1.58:1 (needs 3:1).
      Raised to the minimum that passes with margin; still reads as a ghost numeral. */
.divblock .no{opacity:.36}

/* 2. The oversized ghost headline is absolutely positioned at left:-2%. In Arabic the string is
      wider, so it painted up to 26px past section.hero with nothing but body to stop it.
      `overflow-x: clip` contains it WITHOUT creating a scroll container — the vault's own
      remedy for the DEC-147/158 overflow trap, which `overflow: hidden` would have re-armed. */
.hero{overflow-x:clip}

/* A long single word in a display-size heading cannot wrap, so at 320px it pushed the whole
   page sideways ("JACC International Music Festival" overflowed its container by 36px).
   Fixed for every heading rather than for that one title — the next long project name would
   otherwise reintroduce it, and the card grid has the same exposure. */
h1,h2,h3,h4,.work-card__c,.stat b{overflow-wrap:break-word}

/* The case-page meta bar carries 2-3 items depending on what the source actually establishes,
   so it needs its own variants — without them these fell through to the 3-column default.
   `min-width:0` is the necessary half of the fix: a grid item defaults to min-width:auto and
   refuses to shrink below min-content, so a long client name ("Physiotherabia") pushed the row
   61px past its container at 320px. min-width:0 lets the track shrink; the break-word rule
   above then actually wraps the word rather than just letting it be clipped. */
.stats--2{grid-template-columns:1fr 1fr}
.stats--3{grid-template-columns:repeat(3,1fr)}
.stat{min-width:0}
@media (max-width:560px){ .stats--3{grid-template-columns:1fr 1fr} }
@media (max-width:420px){ .stats--2,.stats--3{grid-template-columns:1fr} }

/* The Studios division block sits on ORANGE, not ink, so the single .no opacity above was
   tuned for the wrong ground: .36 gives 1.92:1 there against 3.0 required for large text.
   Split per block. .role moves to the shade the block's own paragraph text already uses
   (#3a1c0e, 4.63:1) rather than inventing a colour. Both were failing before this rebuild. */
.divblock--p .no{opacity:.36}
.divblock--s .no{opacity:.6}
.divblock--s .role{color:#3a1c0e}

/* ═══ ART DIRECTION 2026-08-31 — orange becomes an ACCENT, not a field ═════════════════════
   Haitham: orange is over-used, naming the strap after the hero and the CTA band at the bottom.
   Founder direction: use orange for emphasis — numbers, selected words, shapes, rules — not as
   large background fields. Three fields were carrying it; all three become ink, and orange is
   kept exactly where it does work: buttons, active chips, tags, rules and numerals.
   Nothing else in the approved art direction changes — the hero, type and imagery are untouched. */

/* 1. The client strap immediately after the hero. A logo strip should read quietly; the names are
      the content and a solid orange ground competed with them. Ink, with orange kept as the rule. */
.marquee{background:var(--ink-1);color:var(--fg-dim);border-top:2px solid var(--orange);
         border-bottom:1px solid var(--line)}
.marquee__track span{color:var(--fg-dim)}
.marquee__track span::after{color:var(--orange)}

/* 2. The Studios division block sat on solid orange while its Production sibling sat on ink, so
      Studios shouted and Production whispered — an accident of colour, not a hierarchy decision.
      Both now share the ink ground; Studios keeps an orange edge as its mark. */
.divblock--s{background:var(--ink-2);color:var(--fg);border-left:3px solid var(--orange)}
.divblock--s .role{color:var(--orange)}
.divblock--s p{color:var(--fg-dim)}
.divblock--s .no{opacity:.36;color:var(--fg)}
.divblock--s a.more{color:var(--orange)}

/* 3. The CTA band shipped a full-bleed orange field on all 70 pages. The call to action is the
      button — that is where orange belongs and where it now stays. */
.ctaband--orange{background:var(--ink-1);color:var(--fg);border-top:2px solid var(--orange)}
.ctaband--orange h2{color:var(--fg)}
.ctaband--orange .btn--dark{background:var(--orange);color:#111;border-color:var(--orange)}
.ctaband--orange .btn--dark:hover{background:var(--orange-deep);border-color:var(--orange-deep)}