/* ============================================================
VOLT NOIR shared system — loaded AFTER each page's inline CSS.
Single source of truth for: tokens, nav breakpoints, focus,
reduced motion, form/footer mobile rules, touch targets,
type roles, and progressive-enhancement gating.
============================================================ */
:root{
/* contrast-safe subtle text (≈4.75:1 on --uv); replaces #6f6c7e for text */
--dim:#7f7b8c;
--type-display-standard:clamp(2.5rem,5vw,4.5rem); /* 40–72px */
--type-display-split:clamp(2.375rem,4.3vw,4rem); /* 38–64px */
--type-section:clamp(2rem,3.6vw,3.25rem); /* 32–52px */
--type-label:12px;
}
/* ---------- type roles ---------- */
h2{font-size:var(--type-section)}
.cine-content h1{font-size:var(--type-display-split)}
.ahero h1,.shero h1,.chero h1,.abhero h1{font-size:var(--type-display-standard)}
/* ---------- skip link ---------- */
.skip{position:absolute;left:-9999px;top:0;z-index:200;background:var(--lime);color:var(--inkv);
font-family:'Archivo',sans-serif;font-weight:760;font-size:15px;padding:12px 20px;border-radius:0 0 10px 0}
.skip:focus{left:0}
/* ---------- focus visibility ---------- */
:focus-visible{outline:3px solid var(--lime);outline-offset:3px;border-radius:4px}
.fld input:focus-visible,.fld select:focus-visible,.fld textarea:focus-visible{
outline:3px solid var(--lime);outline-offset:2px;border-color:var(--lime)}
.btn:focus-visible{outline:3px solid var(--white);outline-offset:3px}
/* ---------- navigation: ONE breakpoint strategy (960 / 640 / 360) ---------- */
.nav-l a.lnk{font-size:12px;padding:12px 2px}
@media(max-width:960px){
nav{flex-wrap:wrap}
.nav-l a.lnk{display:none}
.logo b{display:none}
.burger{display:flex}
}
@media(min-width:961px){
.burger{display:none}
.mnav{display:none}
}
@media(max-width:360px){
.nav-l > .btn.sm{display:none} /* CTA stays available inside the menu */
}
.mnav a{min-height:48px;display:flex;align-items:center}
.mnav a.mbtn{display:inline-flex;justify-content:center}
/* ---------- forms ---------- */
.fld label{font-size:var(--type-label)}
.fld input,.fld select,.fld textarea{min-height:48px}
.formnote{margin-top:12px;text-align:center;font-size:12.5px;color:var(--mut);line-height:1.6}
.fnote{font-size:12px}
@media(max-width:640px){
.frow{grid-template-columns:1fr}
.fld input,.fld select,.fld textarea{font-size:16px}
form.diag .btn{min-height:52px}
}
.hp-field{position:absolute;left:-9999px;opacity:0;height:0;overflow:hidden}
.fld textarea{width:100%;background:var(--uvhero);border:2px solid var(--line);border-radius:11px;
color:var(--white);font-family:'Cabinet Grotesk',sans-serif;font-weight:520;font-size:15.5px;
padding:13px 15px;outline:none;transition:border-color .2s;appearance:none;min-height:96px;resize:vertical}
.fld textarea::placeholder{color:var(--dim)}
/* cases semantic headings keep their compact visual style */
h2.ctag{font-weight:500;line-height:1.4;letter-spacing:.1em}
h3.k{font-weight:600;line-height:1.4;letter-spacing:.16em}
/* ---------- minimum 12px functional text ---------- */
.pg .tg,.pc .num,.ms .n,.ms4 .n,.ph .n,.cst em,.day .dot,.lb,.micro,
.fbase span,.fcol em,.jhead,.toc .hd span,.toc li .no,.step .k,.ctag,
.shifts span,.tags span,.cchips span,.opc .rl,.facts,.attr{font-size:var(--type-label)}
/* ---------- touch targets ---------- */
.morecases a{display:inline-flex;align-items:center;min-height:44px;padding:6px 10px}
.fcol a{min-height:44px;display:flex;align-items:center;padding:0}
.flogo{min-height:44px;align-items:center}
@media(max-width:640px){
.fwrap{gap:26px}
.fcol{gap:2px}
}
/* ---------- hero media & the no-film hero (tablet + phone) ---------- */
.cine video{aspect-ratio:16/9}
.cine-kick,.cine-lead2,.cine-support{display:none}
@media(max-width:960px){
/* the film is a desktop experience; below 960 the hero is typographic */
.cine video,.cine .scrim{display:none}
header.cine{height:auto;min-height:0;padding-bottom:0;background:
radial-gradient(ellipse 85% 65% at 88% 0%,rgba(106,60,240,.3),transparent 62%),
radial-gradient(ellipse 70% 55% at 0% 100%,rgba(255,227,46,.09),transparent 58%),
var(--uvhero)}
.cine-content{position:relative;top:auto;bottom:auto;width:100%;display:flex;flex-direction:column;
justify-content:center;padding:clamp(64px,11vw,110px) clamp(20px,5vw,48px) clamp(56px,9vw,96px)}
.cine-content h1{font-size:clamp(42px,8vw,72px);max-width:12ch;
text-shadow:0 0 54px rgba(143,104,255,.4)}
/* quiet file-label kicker: mono, sentence case, lime dash — not an eyebrow badge */
.cine-kick{display:block;font-family:var(--mono);font-size:13px;letter-spacing:.04em;
color:var(--mut);margin-bottom:16px}
.cine-kick::before{content:'';display:inline-block;width:22px;height:2px;background:var(--lime);
vertical-align:middle;margin-right:10px;border-radius:2px;box-shadow:0 0 10px rgba(255,227,46,.5)}
/* compact hero speaks the shorter how-we-work story */
.cine-lead{display:none}
.cine-lead2{display:block;margin-top:20px;max-width:54ch;color:var(--mut);
font-size:clamp(16px,2vw,18.5px);line-height:1.62}
.cine-cta{margin-top:30px}
.cine-support{display:block;margin-top:16px;font-size:13.5px;color:var(--dim);line-height:1.6}
}
@media(min-width:641px) and (max-width:960px){
.cine-content{min-height:58svh}
}
@media(max-width:640px){
h2 br{display:none} /* headings flow naturally on phones; no forced stacks */
.cine-content{min-height:calc(100svh - 190px)}
.cine-kick{font-size:12px;letter-spacing:.02em}
.cine-kick::before{width:18px;margin-right:8px}
.cine-cta{flex-direction:column;align-items:stretch}
.cine-cta .btn{width:100%;justify-content:center}
.cine-support{text-align:center}
}
/* ---------- media plate: reusable 3D image treatment ----------
Wrap a single ![]()
in . Gives the image a
subtle 3D tilt, an ambient brand glow behind it, and a gradient overlay
that blends its edges into the dark background. */
.media-plate{position:relative;margin:0;min-width:0;perspective:1200px}
.media-plate::before{content:'';position:absolute;inset:-10%;z-index:0;pointer-events:none;
background:radial-gradient(ellipse 60% 55% at 68% 35%,rgba(106,60,240,.38),transparent 65%),
radial-gradient(ellipse 45% 40% at 22% 82%,rgba(255,227,46,.1),transparent 60%);
filter:blur(8px)}
.media-plate img{position:relative;z-index:1;display:block;width:100%;height:auto;border-radius:16px;
border:1.5px solid rgba(143,104,255,.35);
transform:rotateY(-7deg) rotateX(1.5deg);
box-shadow:-20px 26px 54px -20px rgba(5,5,8,.9),0 0 80px -24px rgba(106,60,240,.5)}
.media-plate::after{content:'';position:absolute;inset:0;z-index:2;border-radius:16px;pointer-events:none;
transform:rotateY(-7deg) rotateX(1.5deg);
background:linear-gradient(105deg,transparent 55%,rgba(14,14,20,.45) 100%),
linear-gradient(180deg,transparent 60%,rgba(14,14,20,.62) 100%)}
@media(max-width:960px){
.media-plate img,.media-plate::after{transform:none}
}
/* ---------- progressive enhancement: content visible by default ---------- */
.reveal{opacity:1;transform:none}
html.va .reveal{opacity:0;transform:translateY(30px)}
/* ---------- reduced motion ---------- */
@media(prefers-reduced-motion:reduce){
html{scroll-behavior:auto}
*,*::before,*::after{animation-duration:.01ms!important;animation-iteration-count:1!important;
transition-duration:.01ms!important}
html.va .reveal{opacity:1;transform:none}
}