/* ============================================================
   VOX ATELIER · Design System
   Palette: Burnt Orange / Charcoal / Cream · premium, adult
   ============================================================ */
:root{
  --orange:#EB5B26;
  --orange-deep:#C8461A;
  --orange-soft:#F4763F;
  --ink:#141312;
  --char:#1C1A18;
  --char-2:#242220;
  --cream:#F6F0E4;
  --cream-2:#EEE5D4;
  --line:rgba(20,19,18,.12);
  --line-light:rgba(246,240,228,.14);
  --violet:#8B7FD4;
  --green:#3E7C52;
  --gold:#E3A83B;
  --radius:0px;
  --nav-h:64px;
  --font:'Archivo',system-ui,-apple-system,sans-serif;
  --serif:'Fraunces',Georgia,serif;
}
*{margin:0;padding:0;box-sizing:border-box}
html{scroll-behavior:smooth}
body{
  font-family:var(--font);
  background:var(--cream);
  color:var(--ink);
  -webkit-font-smoothing:antialiased;
  overflow-x:hidden;
  line-height:1.55;
}
::selection{background:var(--orange);color:var(--cream)}
img{display:block;max-width:100%}
a{color:inherit;text-decoration:none}
.wrap{max-width:1280px;margin:0 auto;padding:0 clamp(20px,4vw,56px)}

/* grain overlay for premium texture */
body::after{
  content:"";position:fixed;inset:0;pointer-events:none;z-index:9999;opacity:.05;
  background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='160' height='160'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='0.9' numOctaves='2'/%3E%3C/filter%3E%3Crect width='160' height='160' filter='url(%23n)' opacity='1'/%3E%3C/svg%3E");
}

/* ---------- Typography ---------- */
.display{
  font-weight:900;letter-spacing:-.035em;line-height:.96;
  font-size:clamp(44px,7.2vw,104px);
}
.display .accent{
  font-family:var(--serif);font-style:italic;font-weight:500;
  letter-spacing:-.01em;color:var(--orange);
}
h2.sec{
  font-weight:900;letter-spacing:-.03em;line-height:1;
  font-size:clamp(34px,4.6vw,64px);
}
h2.sec .accent{font-family:var(--serif);font-style:italic;font-weight:500;color:var(--orange)}
.kicker{
  display:inline-flex;align-items:center;gap:10px;
  font-size:12px;font-weight:700;letter-spacing:.22em;text-transform:uppercase;
  color:var(--orange);margin-bottom:22px;
}
.kicker::before{content:"";width:26px;height:2px;background:var(--orange)}
.lead{font-size:clamp(16px,1.6vw,20px);font-weight:500;color:rgba(20,19,18,.72);max-width:62ch}
.on-dark .lead{color:rgba(246,240,228,.72)}

/* ---------- Nav ---------- */
/* Centred with left:0/right:0 + margin auto, NOT left:50% + translateX(-50%).
   For a fixed element, left:50% makes the available width only the half of
   the viewport to its right, so the pill was capped at 720px on a 1440 screen
   and wrapped the logo onto two lines anywhere under ~1260px and on every
   phone. That wrap changes the pill's height from 58px to 79px, which is what
   made the notice badge beside it look out of line. Do not put left:50% back. */
.nav{
  position:fixed;top:18px;left:0;right:0;margin-inline:auto;
  width:max-content;max-width:calc(100% - 32px);z-index:100;
  display:flex;align-items:center;gap:6px;
  background:rgba(20,19,18,.92);backdrop-filter:blur(14px);
  border:1px solid rgba(246,240,228,.08);
  border-radius:999px;padding:7px;
  box-shadow:0 12px 40px rgba(0,0,0,.28);
  transition:transform .35s ease;
}
.nav.hide{transform:translateY(-130%)}
.nav .logo-chip{
  display:flex;align-items:center;gap:9px;
  background:var(--orange);border-radius:999px;padding:8px 16px 8px 10px;
  font-weight:900;letter-spacing:-.02em;color:#fff;font-size:15px;
}
.nav .logo-chip svg{width:26px;height:26px}
.nav a.link{
  padding:10px 16px;border-radius:999px;font-size:14px;font-weight:600;
  color:rgba(246,240,228,.75);transition:.2s;
}
.nav a.link:hover{color:#fff;background:rgba(246,240,228,.08)}
.nav a.link.active{color:#fff;background:rgba(246,240,228,.12)}
.nav .cta{
  margin-left:4px;background:var(--cream);color:var(--ink);
  padding:10px 20px;border-radius:999px;font-size:14px;font-weight:800;
  transition:.2s;white-space:nowrap;
}
.nav .cta:hover{background:var(--orange);color:#fff}
@media(max-width:860px){
  .nav a.link{display:none}
  .nav{gap:10px}
}

/* ---------- Buttons ---------- */
.btn{
  display:inline-flex;align-items:center;gap:10px;
  padding:16px 30px;border-radius:999px;font-weight:800;font-size:15px;
  transition:.25s;border:1.5px solid transparent;cursor:pointer;
}
.btn .arr{transition:transform .25s}
.btn:hover .arr{transform:translateX(4px)}
.btn-orange{background:var(--orange);color:#fff}
.btn-orange:hover{background:var(--orange-deep)}
.btn-ghost-dark{border-color:rgba(20,19,18,.25);color:var(--ink)}
.btn-ghost-dark:hover{border-color:var(--ink);background:var(--ink);color:var(--cream)}
.btn-ghost-light{border-color:rgba(246,240,228,.3);color:var(--cream)}
.btn-ghost-light:hover{border-color:var(--cream);background:var(--cream);color:var(--ink)}

/* ---------- Hero ---------- */
.hero{
  background:var(--ink);color:var(--cream);
  padding:calc(var(--nav-h) + 90px) 0 0;position:relative;overflow:hidden;
}
.hero .display{max-width:12ch}
.hero-grid{display:grid;grid-template-columns:1.1fr .9fr;gap:48px;align-items:end}
@media(max-width:900px){.hero-grid{grid-template-columns:1fr}}
.lang-chips{display:flex;flex-wrap:wrap;gap:8px;margin:20px 0 0}
/* compact sizing: the hero carries 8 language chips, so they must wrap to 2 tidy rows */
.lang-chips .chip{padding:7px 13px;font-size:12.5px;gap:7px}
.chip{
  display:inline-flex;align-items:center;gap:8px;
  border:1px solid rgba(246,240,228,.18);border-radius:999px;
  padding:8px 16px;font-size:13.5px;font-weight:600;color:rgba(246,240,228,.85);
}
.chip em{font-style:normal;font-size:15px}
/* regional variant tag inside a language chip, e.g. English US */
.chip b{font-weight:800;font-size:11px;letter-spacing:.1em;text-transform:uppercase;opacity:.55}
.hero-img{
  margin-top:64px;border-radius:0;overflow:hidden;
  border:1px solid rgba(246,240,228,.1);border-bottom:none;
}
.hero-img img{width:100%;height:clamp(260px,42vw,560px);object-fit:cover}

/* ---------- Marquee ---------- */
.marquee{
  background:var(--orange);color:var(--ink);overflow:hidden;
  padding:16px 0;border-top:1px solid rgba(0,0,0,.15);border-bottom:1px solid rgba(0,0,0,.15);
}
.marquee-track{display:flex;gap:0;width:max-content;animation:scroll 28s linear infinite}
.marquee span{
  font-weight:900;font-size:20px;letter-spacing:.02em;white-space:nowrap;
  padding:0 18px;display:flex;align-items:center;gap:36px;color:#141312;
}
.marquee span::after{content:"✦";font-size:14px}
@keyframes scroll{to{transform:translateX(-50%)}}

/* ---------- Stats ---------- */
.stats{background:var(--ink);color:var(--cream);padding:80px 0}
.stats-grid{display:grid;grid-template-columns:repeat(4,1fr);gap:1px;background:var(--line-light);border:1px solid var(--line-light);border-radius:var(--radius);overflow:hidden}
@media(max-width:860px){.stats-grid{grid-template-columns:repeat(2,1fr)}}
.stat{background:var(--ink);padding:38px 30px}
.stat b{display:block;font-size:clamp(38px,4.4vw,60px);font-weight:900;letter-spacing:-.03em;line-height:1;color:var(--orange)}
.stat > span{display:block;margin-top:10px;font-size:14px;font-weight:600;color:rgba(246,240,228,.65)}

/* ---------- Sections ---------- */
section.pad{padding:clamp(80px,10vw,140px) 0}
.sec-head{display:flex;justify-content:space-between;align-items:end;gap:32px;margin-bottom:clamp(40px,5vw,72px);flex-wrap:wrap}

/* Services cards */
.svc-grid{display:grid;grid-template-columns:repeat(3,1fr);gap:18px}
@media(max-width:1000px){.svc-grid{grid-template-columns:repeat(2,1fr)}}
@media(max-width:640px){.svc-grid{grid-template-columns:1fr}}
.svc{
  background:#fff;border:1px solid var(--line);border-radius:var(--radius);
  padding:34px 30px;position:relative;overflow:hidden;transition:.3s;min-height:250px;
  display:flex;flex-direction:column;
}
.svc:hover{transform:translateY(-6px);box-shadow:0 24px 60px rgba(20,19,18,.12);border-color:var(--orange)}
.svc .num{font-size:13px;font-weight:800;color:var(--orange);letter-spacing:.14em}
.svc h3{font-size:22px;font-weight:800;letter-spacing:-.02em;margin:14px 0 10px}
.svc p{font-size:14.5px;color:rgba(20,19,18,.66);flex:1}
.svc .go{margin-top:18px;font-weight:800;font-size:13.5px;color:var(--orange);display:inline-flex;gap:8px;align-items:center}
.svc.dark{background:var(--ink);color:var(--cream);border-color:var(--ink)}
.svc.dark p{color:rgba(246,240,228,.66)}
.svc.orange-card{background:var(--orange);color:#fff;border-color:var(--orange)}
.svc.orange-card .num,.svc.orange-card .go{color:#fff}
.svc.orange-card p{color:rgba(255,255,255,.85)}

/* Work cards */
.work-grid{display:grid;grid-template-columns:repeat(3,1fr);gap:18px}
@media(max-width:1000px){.work-grid{grid-template-columns:repeat(2,1fr)}}
@media(max-width:640px){.work-grid{grid-template-columns:1fr}}
.wcard{
  border-radius:var(--radius);overflow:hidden;position:relative;background:var(--char);
  border:1px solid var(--line);transition:.3s;display:block;
}
.wcard:hover{transform:translateY(-6px);box-shadow:0 26px 60px rgba(20,19,18,.22)}
.wcard .thumb{position:relative;aspect-ratio:16/10;overflow:hidden}
.wcard.portrait .thumb{aspect-ratio:3/4}
.wcard .thumb img{width:100%;height:100%;object-fit:cover;transition:transform .5s ease}
.wcard:hover .thumb img{transform:scale(1.05)}
.wcard .views{
  position:absolute;top:14px;left:14px;background:var(--orange);color:#fff;
  font-size:12.5px;font-weight:800;padding:7px 13px;border-radius:999px;letter-spacing:.02em;
}
.wcard .meta{padding:18px 20px 20px;background:var(--ink);color:var(--cream)}
.wcard .meta h3{font-size:16.5px;font-weight:800;letter-spacing:-.01em;line-height:1.3}
.wcard .meta span{display:inline-block;margin-top:8px;font-size:12.5px;font-weight:600;color:rgba(246,240,228,.6)}
.wcard .meta .lang{border:1px solid rgba(246,240,228,.2);padding:4px 10px;border-radius:999px;margin-right:6px}

/* Split feature rows */
.feature{display:grid;grid-template-columns:1fr 1fr;gap:clamp(36px,5vw,80px);align-items:center}
@media(max-width:900px){.feature{grid-template-columns:1fr}}
.feature .img{border-radius:var(--radius);overflow:hidden;border:1px solid var(--line)}
.feature .img img{width:100%;height:100%;object-fit:cover}
.feature ul.ticks{list-style:none;margin-top:24px;display:grid;gap:12px}
.feature ul.ticks li{display:flex;gap:12px;font-weight:600;font-size:15px}
.feature ul.ticks li::before{content:"→";color:var(--orange);font-weight:900}

/* Dark band */
.band-dark{background:var(--ink);color:var(--cream)}
.band-dark .svc{background:var(--char-2);border-color:rgba(246,240,228,.08);color:var(--cream)}
.band-dark .svc p{color:rgba(246,240,228,.62)}

/* Software / OS section */
.os-panel{
  background:linear-gradient(140deg,var(--char) 0%,var(--ink) 100%);
  border:1px solid rgba(246,240,228,.09);border-radius:0;
  padding:clamp(36px,5vw,72px);color:var(--cream);position:relative;overflow:hidden;
}
.os-panel::before{
  content:"";position:absolute;right:-120px;top:-120px;width:420px;height:420px;border-radius:50%;
  background:radial-gradient(circle,rgba(235,91,38,.22),transparent 65%);
}
.os-stats{display:flex;gap:36px;flex-wrap:wrap;margin-top:34px}
.os-stats div b{font-size:34px;font-weight:900;color:var(--orange);letter-spacing:-.02em}
.os-stats div span{display:block;font-size:13px;color:rgba(246,240,228,.6);font-weight:600;margin-top:4px}

/* Cities */
.cities-img{border-radius:var(--radius);overflow:hidden;border:1px solid var(--line);margin-top:48px}
.city-cols{display:grid;grid-template-columns:1fr 1fr;gap:18px;margin-top:18px}
@media(max-width:700px){.city-cols{grid-template-columns:1fr}}
.city{
  background:#fff;border:1px solid var(--line);border-radius:var(--radius);padding:30px;
}
.city h3{font-size:24px;font-weight:900;letter-spacing:-.02em}
.city .tag{font-size:12px;font-weight:800;letter-spacing:.18em;text-transform:uppercase;color:var(--orange)}
.city p{margin-top:10px;font-size:14.5px;color:rgba(20,19,18,.66)}

/* CTA band */
.cta-band{background:var(--orange);color:#fff;text-align:center;padding:clamp(80px,10vw,130px) 0}
.cta-band h2{font-weight:900;letter-spacing:-.03em;line-height:1;font-size:clamp(40px,6vw,84px)}
.cta-band .accent{font-family:var(--serif);font-style:italic;font-weight:500}
.cta-band p{margin:22px auto 36px;max-width:52ch;color:rgba(255,255,255,.85);font-weight:500}
.cta-band .btn{background:var(--ink);color:var(--cream)}
.cta-band .btn:hover{background:#fff;color:var(--ink)}

/* Footer */
footer{background:var(--ink);color:var(--cream);padding:80px 0 40px}
.foot-grid{display:grid;grid-template-columns:2fr 1fr 1fr 1fr;gap:40px;padding-bottom:56px;border-bottom:1px solid var(--line-light)}
@media(max-width:860px){.foot-grid{grid-template-columns:1fr 1fr}}
.foot-grid h4{font-size:12.5px;font-weight:800;letter-spacing:.18em;text-transform:uppercase;color:rgba(246,240,228,.5);margin-bottom:18px}
.foot-grid a{display:block;padding:5px 0;font-size:14.5px;font-weight:600;color:rgba(246,240,228,.78)}
.foot-grid a:hover{color:var(--orange)}
.foot-brand svg{width:54px;height:54px;margin-bottom:18px}
.foot-brand p{font-size:14.5px;color:rgba(246,240,228,.6);max-width:34ch}
/* Companies (Trading Disclosures) Regulations: a limited company has to show
   its registered name, number, place of registration and registered office on
   its websites. This line carries all four, on every page. */
.foot-id{
  padding-top:26px;margin-bottom:-6px;
  font-size:12px;line-height:1.6;font-weight:500;color:rgba(246,240,228,.42);
  max-width:80ch;
}
.foot-bottom{display:flex;justify-content:space-between;gap:16px;flex-wrap:wrap;padding-top:28px;font-size:13px;color:rgba(246,240,228,.45);font-weight:500}

/* Page hero (inner pages) */
.page-hero{background:var(--ink);color:var(--cream);padding:calc(var(--nav-h) + 100px) 0 90px}
.page-hero.has-img{padding-bottom:0}
.page-hero .display{font-size:clamp(40px,6.4vw,92px)}

/* Contact */
.contact-grid{display:grid;grid-template-columns:1.1fr .9fr;gap:clamp(36px,5vw,72px)}
@media(max-width:900px){.contact-grid{grid-template-columns:1fr}}
.c-item{padding:26px 0;border-bottom:1px solid var(--line)}
.c-item .lbl{font-size:12px;font-weight:800;letter-spacing:.18em;text-transform:uppercase;color:var(--orange)}
.c-item .val{font-size:clamp(20px,2.4vw,30px);font-weight:800;letter-spacing:-.02em;margin-top:8px}
.c-item .val a:hover{color:var(--orange)}
form.demo{background:#fff;border:1px solid var(--line);border-radius:var(--radius);padding:clamp(26px,3vw,44px)}
form.demo label{display:block;font-size:13px;font-weight:800;margin:18px 0 8px;letter-spacing:.04em}
form.demo input,form.demo select,form.demo textarea{
  width:100%;padding:14px 16px;border-radius:0;border:1.5px solid var(--line);
  font-family:var(--font);font-size:15px;background:var(--cream);outline:none;transition:.2s;
}
form.demo input:focus,form.demo select:focus,form.demo textarea:focus{border-color:var(--orange)}
form.demo button{margin-top:26px;width:100%;justify-content:center}

/* Reveal animation */
.js .rv{opacity:0;transform:translateY(28px);transition:opacity .7s ease,transform .7s ease}
.js .rv.in{opacity:1;transform:none}
.rv.d1{transition-delay:.08s}.rv.d2{transition-delay:.16s}.rv.d3{transition-delay:.24s}

/* Misc */
.pill-list{display:flex;gap:10px;flex-wrap:wrap;margin-top:26px}
.pill-list .chip{border-color:rgba(20,19,18,.18);color:rgba(20,19,18,.8)}
.on-dark .pill-list .chip{border-color:rgba(246,240,228,.18);color:rgba(246,240,228,.85)}

/* ============================================================
   V2 · MOTION & POP
   ============================================================ */

/* Preloader */
.preloader{
  position:fixed;inset:0;z-index:10000;background:var(--ink);
  display:flex;align-items:center;justify-content:center;
}
.preloader .pre-mark{width:110px;height:92px}
.preloader path{stroke:var(--orange);stroke-dasharray:260;stroke-dashoffset:260}
html:not(.js) .preloader{display:none}

/* Hero v2 */
.hero-v2{
  min-height:100svh;background:var(--ink);color:var(--cream);
  position:relative;overflow:hidden;display:flex;flex-direction:column;justify-content:flex-end;
}
.hero-art{position:absolute;inset:0;z-index:0}
.hero-art img{width:100%;height:100%;object-fit:cover;opacity:.94}
.hero-art::after{
  content:"";position:absolute;inset:0;
  background:linear-gradient(180deg,rgba(20,19,18,.86) 0%,rgba(20,19,18,.35) 45%,rgba(20,19,18,.72) 100%);
}
.hero-v2 .wrap{position:relative;z-index:2;padding-top:calc(var(--nav-h) + 46px);padding-bottom:40px}
.hero-v2 .display{font-size:clamp(44px,6.6vw,104px);line-height:.94;text-transform:uppercase}
.hero-v2 .display .accent{text-transform:none}
.line{display:block;overflow:hidden}
.line-inner{display:block;will-change:transform}
html:not(.js) .line-inner{transform:none!important}
.hero-sub{display:flex;align-items:flex-end;justify-content:space-between;gap:30px;margin-top:26px;flex-wrap:wrap}
.hero-fade{will-change:transform,opacity}
html:not(.js) .hero-fade{opacity:1!important;transform:none!important}
.hero-wave{position:relative;z-index:2;height:60px;margin-top:26px}
.hero-wave canvas{width:100%;height:100%;display:block}

/* Rotating orbit badge */
.orbit-wrap{position:absolute;top:calc(var(--nav-h) + 66px);right:clamp(20px,5vw,72px);z-index:3;width:120px;height:120px}
.orbit{width:100%;height:100%}
.orbit text{fill:var(--cream);font-size:10.2px;font-weight:700;letter-spacing:.24em;text-transform:uppercase}
.orbit-wrap::after{
  content:"";position:absolute;inset:38px;border-radius:50%;background:var(--orange);
  mask:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 120 100'%3E%3Cg fill='none' stroke='black' stroke-width='17' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M12 16 L36 84 L60 16'/%3E%3Cpath d='M62 84 L86 16 L110 84'/%3E%3Cpath d='M75 57 L98 57'/%3E%3C/g%3E%3C/svg%3E") center/60% no-repeat;
}
@media(max-width:860px){.orbit-wrap{display:none}}

/* Giant outline tickers */
.ticker{overflow:hidden;padding:clamp(30px,4vw,52px) 0;background:var(--ink)}
.ticker.on-cream{background:var(--cream)}
.ticker-track{white-space:nowrap;display:flex;gap:48px;will-change:transform}
.ticker-track b{
  font-size:clamp(64px,10vw,150px);font-weight:900;letter-spacing:-.02em;line-height:1;text-transform:uppercase;
  color:transparent;-webkit-text-stroke:2px rgba(246,240,228,.34);white-space:nowrap;
}
.ticker.on-cream .ticker-track b{-webkit-text-stroke:2px rgba(20,19,18,.3)}
.ticker-track b.fill{color:var(--orange);-webkit-text-stroke:0}

/* Horizontal reel */
.reel{background:var(--ink);color:var(--cream);overflow:hidden}
.reel .reel-head{padding:clamp(70px,8vw,110px) 0 34px}
.reel-track{display:flex;gap:26px;padding:0 clamp(20px,4vw,56px) clamp(70px,8vw,110px);width:max-content;align-items:stretch}
.reel-card{
  width:clamp(300px,30vw,430px);flex-shrink:0;border-radius:var(--radius);overflow:hidden;
  background:var(--char-2);border:1px solid rgba(246,240,228,.09);display:block;position:relative;
}
.reel-card .thumb{aspect-ratio:16/10;overflow:hidden;position:relative}
.reel-card.tall .thumb{aspect-ratio:3/4}
.reel-card .thumb img{width:100%;height:100%;object-fit:cover}
.reel-card .views{position:absolute;top:14px;left:14px;background:var(--orange);color:#fff;font-size:12.5px;font-weight:800;padding:7px 13px;border-radius:999px}
.reel-card .meta{padding:18px 20px 22px}
.reel-card .meta h3{font-size:17px;font-weight:800;line-height:1.3}
.reel-card .meta span{display:inline-block;margin-top:8px;font-size:12.5px;font-weight:600;color:rgba(246,240,228,.6)}
.reel-card .meta .lang{border:1px solid rgba(246,240,228,.2);padding:4px 10px;border-radius:999px;margin-right:6px}
.reel-note{display:flex;align-items:center;gap:14px;font-size:13px;font-weight:700;letter-spacing:.16em;text-transform:uppercase;color:rgba(246,240,228,.5)}
.reel-note::after{content:"";flex:0 0 60px;height:2px;background:var(--orange);animation:pulse-w 1.6s ease-in-out infinite}
@keyframes pulse-w{50%{transform:scaleX(.4);opacity:.4}}
@media(max-width:860px){
  .reel-track{width:auto;overflow-x:auto;scroll-snap-type:x mandatory}
  .reel-card{scroll-snap-align:start}
}

/* Equalizer chip */
.eq{display:inline-flex;gap:3px;align-items:flex-end;height:16px}
.eq i{width:3px;background:var(--orange);border-radius:2px;animation:eq 1s ease-in-out infinite}
.eq i:nth-child(2){animation-delay:.15s}.eq i:nth-child(3){animation-delay:.3s}.eq i:nth-child(4){animation-delay:.45s}
@keyframes eq{0%,100%{height:5px}50%{height:16px}}

/* Floating motifs */
.float-slow{animation:floaty 5.5s ease-in-out infinite}
.float-slower{animation:floaty 7.5s ease-in-out infinite reverse}
@keyframes floaty{50%{transform:translateY(-12px)}}

/* Card sheen sweep */
.wcard::after,.svc::after{
  content:"";position:absolute;inset:0;pointer-events:none;
  background:linear-gradient(115deg,transparent 40%,rgba(255,255,255,.09) 50%,transparent 60%);
  transform:translateX(-120%);transition:transform .7s ease;
}
.wcard:hover::after,.svc:hover::after{transform:translateX(120%)}
.wcard,.svc{will-change:transform}

/* Services page: sticky numbers */
.svc-row-num{
  font-size:clamp(70px,9vw,130px);font-weight:900;letter-spacing:-.04em;line-height:1;
  color:transparent;-webkit-text-stroke:2.5px var(--orange);opacity:.85;
}

/* CTA band v2 */
.cta-band{position:relative;overflow:hidden}
.cta-band .ticker-bg{
  position:absolute;top:50%;left:0;transform:translateY(-50%);width:100%;overflow:hidden;opacity:.14;pointer-events:none;
}
.cta-band .ticker-bg b{font-size:clamp(120px,20vw,260px);font-weight:900;letter-spacing:-.02em;white-space:nowrap;color:#fff;text-transform:uppercase;display:inline-block;padding-right:60px;animation:cta-scroll 16s linear infinite}
@keyframes cta-scroll{to{transform:translateX(-50%)}}
.cta-band .wrap{position:relative;z-index:1}

/* Footer wave */
footer .foot-wave{height:44px;margin-bottom:34px}
footer .foot-wave canvas{width:100%;height:100%}

/* Static fallback when no JS */
html:not(.js) .rv{opacity:1;transform:none}

/* ============================================================
   V3 · SHARP EDITORIAL + ATRIVOX
   ============================================================ */
.img, .feature .img, .cities-img, .hero-img { border-radius:0 !important; }

/* hairline section rules */
.sec-head{border-bottom:1px solid var(--line);padding-bottom:26px}
.band-dark .sec-head,.on-dark .sec-head{border-bottom-color:var(--line-light)}
section.pad{position:relative}

/* sharp cards with print-style offset shadow */
.svc{border-radius:0;border:1px solid var(--line)}
.svc:hover{box-shadow:8px 8px 0 var(--orange);transform:translate(-4px,-4px)}
.svc .num{font-size:15px}
.wcard{border-radius:0}
.wcard:hover{box-shadow:10px 10px 0 var(--orange);transform:translate(-5px,-5px)}
.reel-card{border-radius:0}
.city{border-radius:0}
.stat{padding:42px 34px}
.stats-grid{border-radius:0}
form.demo{border-radius:0;border:1px solid var(--line);box-shadow:10px 10px 0 var(--orange)}
.os-panel{border-radius:0}

/* ATRIVOX band */
.atrivox{background:var(--orange);color:var(--ink);position:relative;overflow:hidden;padding:clamp(80px,9vw,130px) 0}
.atrivox .grid-lines{position:absolute;inset:0;pointer-events:none;opacity:.14;
  background-image:linear-gradient(rgba(20,19,18,.5) 1px,transparent 1px),linear-gradient(90deg,rgba(20,19,18,.5) 1px,transparent 1px);
  background-size:72px 72px}
.atrivox .wrap{position:relative;z-index:1}
.atrivox h2{font-weight:900;letter-spacing:-.03em;line-height:.98;font-size:clamp(38px,5.6vw,84px);text-transform:uppercase;max-width:16ch}
.atrivox h2 em{font-style:normal;background:var(--ink);color:var(--orange);padding:0 14px;display:inline-block;transform:rotate(-1.2deg)}
.atrivox .lead{color:rgba(20,19,18,.78);max-width:56ch}
.atrivox .btn{background:var(--ink);color:var(--cream);border-radius:0}
.atrivox .btn:hover{background:#000}

/* stamp sticker */
.stamp{
  display:inline-flex;align-items:center;gap:10px;
  background:var(--ink);color:var(--cream);border:2px solid var(--orange);
  padding:12px 18px;font-size:12.5px;font-weight:800;letter-spacing:.16em;text-transform:uppercase;
  transform:rotate(-2deg);box-shadow:5px 5px 0 var(--orange);
  transition:.25s;
}
/* hover only when the stamp is an actual link, so the static badge doesn't imply a click target */
a.stamp:hover{transform:rotate(0deg) scale(1.03)}
.stamp .dot{width:8px;height:8px;background:var(--orange);border-radius:50%;animation:blink 1.4s steps(2) infinite}
@keyframes blink{50%{opacity:.25}}

/* contact-now button with sub-label */
.btn-contact{display:inline-flex;flex-direction:column;align-items:center;gap:2px;padding:15px 30px;border-radius:0;background:var(--orange);color:#fff;font-weight:900;font-size:16px;letter-spacing:.01em;box-shadow:6px 6px 0 rgba(20,19,18,.9);transition:.2s}
.btn-contact small{font-weight:600;font-size:11.5px;letter-spacing:.06em;opacity:.85;text-transform:uppercase}
.btn-contact:hover{transform:translate(-3px,-3px);box-shadow:9px 9px 0 rgba(20,19,18,.9)}
.on-dark .btn-contact{box-shadow:6px 6px 0 rgba(246,240,228,.25)}
.cta-band .btn-contact{background:var(--ink);color:var(--cream);box-shadow:6px 6px 0 rgba(20,19,18,.35)}

/* sharpen buttons (keep nav pill) */
.btn{border-radius:0}
.marquee span::after{content:"■";font-size:10px}

/* ATRIVOX HQ dashboard mock */
.hq{background:var(--ink);border:1px solid rgba(20,19,18,.9);box-shadow:12px 12px 0 rgba(20,19,18,.9);color:var(--cream);font-size:13px}
.hq-bar{display:flex;align-items:center;gap:8px;padding:12px 16px;border-bottom:1px solid rgba(246,240,228,.1)}
.hq-bar i{width:10px;height:10px;border-radius:50%;background:rgba(246,240,228,.18)}
.hq-bar i:first-child{background:var(--orange)}
.hq-bar b{margin-left:8px;font-size:11px;letter-spacing:.22em;text-transform:uppercase}
.hq-bar .live{margin-left:auto;display:flex;align-items:center;gap:7px;font-size:10.5px;font-weight:800;letter-spacing:.14em;color:var(--orange)}
.hq-bar .live::before{content:"";width:7px;height:7px;border-radius:50%;background:var(--orange);animation:blink 1.2s steps(2) infinite}
.hq-row{display:flex;align-items:center;gap:12px;padding:13px 16px;border-bottom:1px solid rgba(246,240,228,.07)}
.hq-row .av{width:30px;height:30px;border-radius:50%;display:flex;align-items:center;justify-content:center;font-weight:900;font-size:11px;flex-shrink:0;color:var(--ink)}
.hq-row .who{min-width:0;flex:1}
.hq-row .who b{display:block;font-size:12.5px;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.hq-row .who span{font-size:10.5px;color:rgba(246,240,228,.5);font-weight:600;letter-spacing:.06em}
.hq-row .tag{font-size:9.5px;font-weight:800;letter-spacing:.12em;padding:4px 8px;border:1px solid rgba(246,240,228,.2);color:rgba(246,240,228,.75);white-space:nowrap}
.hq-row .bar{flex:0 0 90px;height:4px;background:rgba(246,240,228,.12);overflow:hidden}
.hq-row .bar i{display:block;height:100%;background:var(--orange);animation:hqload 3.2s ease-in-out infinite}
.hq-row:nth-child(3) .bar i{animation-delay:.6s}.hq-row:nth-child(4) .bar i{animation-delay:1.1s}.hq-row:nth-child(5) .bar i{animation-delay:1.7s}
@keyframes hqload{0%{width:8%}55%{width:86%}100%{width:8%}}
.hq-foot{display:flex;justify-content:space-between;padding:12px 16px;font-size:10.5px;font-weight:700;letter-spacing:.14em;color:rgba(246,240,228,.45);text-transform:uppercase}
.hq-wavebox{height:56px;padding:10px 16px;border-bottom:1px solid rgba(246,240,228,.07)}
.hq-wavebox canvas{width:100%;height:100%}

/* ============================================================
   V4 · ORANGE FIELD IDENTITY (ATRIVOX look as main)
   ============================================================ */
.field{position:relative;background:var(--orange);color:var(--ink)}
.field .grid-lines{position:absolute;inset:0;pointer-events:none;opacity:.14;
  background-image:linear-gradient(rgba(20,19,18,.5) 1px,transparent 1px),linear-gradient(90deg,rgba(20,19,18,.5) 1px,transparent 1px);
  background-size:72px 72px}
.field > .wrap{position:relative;z-index:1}

/* highlight block word */
.hl{background:var(--ink);color:var(--orange);padding:0 16px 4px;display:inline-block;transform:rotate(-1.2deg);box-decoration-break:clone}

/* hero orange */
.hero-o{min-height:100svh;display:flex;align-items:center;overflow:hidden;padding:calc(var(--nav-h) + 40px) 0 48px}
.hero-o .display{font-size:clamp(42px,5.9vw,92px);line-height:.96;text-transform:uppercase;letter-spacing:-.03em}
.hero-o .lead{color:rgba(20,19,18,.78);margin-top:20px;font-size:clamp(15px,1.4vw,18px)}
.hero-o .lead b{color:var(--ink)}
.hero-o-grid{display:grid;grid-template-columns:1.05fr .95fr;gap:clamp(36px,4vw,72px);align-items:center}
@media(max-width:980px){.hero-o-grid{grid-template-columns:1fr}}
.hero-o .stamp{background:var(--ink);color:var(--cream);border-color:var(--ink);box-shadow:5px 5px 0 rgba(20,19,18,.35)}
.hero-o .chip{border-color:rgba(20,19,18,.3);color:var(--ink)}
.hero-o .btn-ghost-light{border-color:rgba(20,19,18,.4);color:var(--ink)}
.hero-o .btn-ghost-light:hover{background:var(--ink);color:var(--cream);border-color:var(--ink)}
.hero-o .btn-contact{background:var(--ink);color:var(--cream);box-shadow:6px 6px 0 rgba(20,19,18,.35)}
.hero-o .kicker{color:var(--ink)}
.hero-o .kicker::before{background:var(--ink)}
.hero-o .orbit-wrap::after{background:var(--ink)}
.hero-o .orbit text{fill:var(--ink)}

/* framed window card (like session board) */
.frame{background:var(--ink);color:var(--cream);box-shadow:14px 14px 0 rgba(20,19,18,.9);position:relative}
.frame .frame-bar{display:flex;align-items:center;gap:8px;padding:12px 16px;border-bottom:1px solid rgba(246,240,228,.1)}
.frame .frame-bar i{width:10px;height:10px;border-radius:50%;background:rgba(246,240,228,.18)}
.frame .frame-bar i:first-child{background:var(--orange)}
.frame .frame-bar b{margin-left:8px;font-size:11px;letter-spacing:.22em;text-transform:uppercase}
.frame .frame-bar .live{margin-left:auto;display:flex;align-items:center;gap:7px;font-size:10.5px;font-weight:800;letter-spacing:.14em;color:var(--orange)}
.frame .frame-bar .live::before{content:"";width:7px;height:7px;border-radius:50%;background:var(--orange);animation:blink 1.2s steps(2) infinite}
.frame .frame-body img{width:100%;display:block}
.frame .frame-wave{height:46px;padding:8px 14px;border-top:1px solid rgba(246,240,228,.1)}
.frame .frame-wave canvas{width:100%;height:100%}

/* orange page heroes for inner pages */
.page-hero-o{padding:calc(var(--nav-h) + 90px) 0 80px}
.page-hero-o .display{font-size:clamp(40px,6vw,92px);text-transform:uppercase;letter-spacing:-.03em;line-height:.96}
.page-hero-o .lead{color:rgba(20,19,18,.78);margin-top:24px}
.page-hero-o .kicker{color:var(--ink)}
.page-hero-o .kicker::before{background:var(--ink)}

/* marquee inverted for contrast on orange */
.marquee-ink{background:var(--ink);border:none}
.marquee-ink span{color:var(--orange)}

/* preloader orange */
.preloader{background:var(--orange)}
.preloader path{stroke:var(--ink)}

/* cta band grid */
.cta-band .grid-lines{position:absolute;inset:0;pointer-events:none;opacity:.14;
  background-image:linear-gradient(rgba(20,19,18,.5) 1px,transparent 1px),linear-gradient(90deg,rgba(20,19,18,.5) 1px,transparent 1px);
  background-size:72px 72px}
.cta-band h2 .accent{font-family:var(--font);font-style:normal}
.cta-band h2 em{font-style:normal;background:var(--ink);color:var(--orange);padding:0 14px 4px;display:inline-block;transform:rotate(-1.2deg)}

/* ============================================================
   V5 · FLOATING MAIL BUTTON
   Fixed bottom-left quick contact. Deliberately built as a
   sibling of .stamp (ink plate + 2px orange border + hard orange
   offset shadow) because it floats over orange, cream AND ink
   sections: the ink plate carries it on light ground, the orange
   border carries it on dark ground. No JS, no radius.
   ============================================================ */
.mail-fab{
  position:fixed;left:clamp(16px,2.4vw,28px);bottom:clamp(16px,2.4vw,28px);z-index:95;
  display:inline-flex;align-items:center;
  background:var(--ink);color:var(--cream);
  border:2px solid var(--orange);
  /* translucent ink, not orange: the button floats over orange fields where an
     orange shadow is invisible. Same trick .hero-o .stamp uses. On ink sections
     the shadow vanishes and the orange border does the defining instead. */
  box-shadow:5px 5px 0 rgba(20,19,18,.4);
  transition:transform .25s ease,box-shadow .25s ease;
}
.mail-fab .ic{flex:0 0 50px;height:50px;display:flex;align-items:center;justify-content:center}
.mail-fab .ic svg{width:21px;height:21px;stroke:var(--orange);transition:stroke .25s ease}
.mail-fab .lb{
  max-width:0;opacity:0;overflow:hidden;white-space:nowrap;
  font-size:13px;font-weight:800;letter-spacing:.02em;
  transition:max-width .4s cubic-bezier(.4,0,.2,1),opacity .3s ease,padding .4s cubic-bezier(.4,0,.2,1);
}
.mail-fab:hover,.mail-fab:focus-visible{transform:translate(-3px,-3px);box-shadow:8px 8px 0 rgba(20,19,18,.4);outline:none}
.mail-fab:hover .lb,.mail-fab:focus-visible .lb{max-width:280px;opacity:1;padding-right:20px}
/* touch: no hover to expand on, so stay an icon and let the tap fire mailto */
@media(max-width:640px){
  .mail-fab .ic{flex:0 0 44px;height:44px}
  .mail-fab .ic svg{width:19px;height:19px}
  .mail-fab:hover .lb,.mail-fab:focus-visible .lb{max-width:0;opacity:0;padding-right:0}
}
@media(prefers-reduced-motion:reduce){
  .mail-fab,.mail-fab .lb,.mail-fab .ic svg{transition:none}
}

/* ============================================================
   V6 · ACCESSIBILITY (WCAG 2.1 AA)
   Contrast remediation + keyboard focus. Measured, not guessed:
   brand --orange on cream was 3.05:1 and on white 3.47:1, both
   below the 4.5:1 bar for small text. --orange-text is the same
   hue (drift 0.19deg) darkened until it clears: 4.68:1 on cream,
   5.31:1 on white. It is for SMALL TEXT ON LIGHT GROUND ONLY.
   On ink it drops to 3.5:1, so dark sections keep bright --orange
   (5.35:1). Large display type keeps --orange too (passes at 3:1).
   ============================================================ */
:root{ --orange-text:#BF4012; }

/* small orange text on light ground -> darkened token */
.kicker,
.svc .num,.svc .go,
.city .tag,
.c-item .lbl,
.feature ul.ticks li::before{ color:var(--orange-text) }

/* ...but dark sections restore the bright brand orange (5.35:1 on ink) */
.on-dark .kicker,.band-dark .kicker,footer .kicker,
.reel .kicker,.stats .kicker,
.band-dark .svc .num,.band-dark .svc .go,
.on-dark .feature ul.ticks li::before{ color:var(--orange) }
/* orange fields already force ink; keep that winning */
.hero-o .kicker,.page-hero-o .kicker,.field .kicker{ color:var(--ink) }

/* white-on-orange was 3.47:1. Ink-on-orange is 5.35:1 and is the
   brand's own hero treatment, so this is more on-brand, not less. */
.btn-orange{ color:var(--ink) }
.btn-orange:hover{ background:var(--orange-deep);color:var(--cream) }
.nav .cta:hover{ color:var(--ink) }
.wcard .views,.reel-card .views{ color:var(--ink) }
.svc.orange-card,.svc.orange-card .num,.svc.orange-card .go{ color:var(--ink) }
.svc.orange-card p{ color:rgba(20,19,18,.82) }
.cta-band p{ color:rgba(20,19,18,.82) }

/* ---------- keyboard focus: there was none sitewide ---------- */
:focus-visible{
  outline:3px solid var(--ink);
  outline-offset:3px;
}
/* on dark ground an ink ring is invisible, so flip to cream */
.nav :focus-visible,
.on-dark :focus-visible,.band-dark :focus-visible,
footer :focus-visible,.reel :focus-visible,.stats :focus-visible,
.hq :focus-visible,.frame :focus-visible{
  outline-color:var(--cream);
}
/* form fields had outline:none with only a border tint on focus */
form.demo input:focus-visible,
form.demo select:focus-visible,
form.demo textarea:focus-visible{
  outline:3px solid var(--ink);outline-offset:2px;border-color:var(--ink);
}
/* the floating mail button had outline:none, which killed its focus ring */
.mail-fab:focus-visible{ outline:3px solid var(--cream);outline-offset:3px }

/* ---------- skip link ---------- */
.skip-link{
  position:absolute;left:-9999px;top:0;z-index:10001;
  background:var(--ink);color:var(--cream);
  padding:14px 22px;font-weight:800;font-size:14px;
  letter-spacing:.08em;text-transform:uppercase;
  border:2px solid var(--orange);
}
.skip-link:focus{ left:12px;top:12px }

/* ============================================================
   V7 · LEGAL PAGES
   ============================================================ */
.lg-wrap{ padding:clamp(56px,7vw,96px) 0 clamp(70px,9vw,120px) }
.lg-grid{ display:grid;grid-template-columns:230px 1fr;gap:clamp(32px,5vw,72px);align-items:start }
@media(max-width:900px){ .lg-grid{ grid-template-columns:1fr } }

/* contents rail */
.lg-toc{ position:sticky;top:calc(var(--nav-h) + 34px) }
@media(max-width:900px){
  .lg-toc{ position:static;border-bottom:1px solid var(--line);padding-bottom:22px }
}
.lg-toc h2{
  font-size:11px;font-weight:800;letter-spacing:.2em;text-transform:uppercase;
  color:rgba(20,19,18,.45);margin-bottom:14px;
}
.lg-toc a{
  display:block;padding:6px 0;font-size:13.5px;font-weight:600;
  color:rgba(20,19,18,.66);border-bottom:1px solid var(--line);
}
.lg-toc a:hover{ color:var(--orange-text) }

/* body copy: readable measure */
.lg-body{ max-width:74ch }
.lg-body h2.lg-h2{
  font-size:clamp(21px,2.3vw,27px);font-weight:900;letter-spacing:-.02em;
  line-height:1.15;margin:44px 0 14px;padding-top:22px;
  border-top:1px solid var(--line);text-transform:none;
}
.lg-body h2.lg-h2:first-child{ margin-top:0;border-top:none;padding-top:0 }
.lg-body h3.lg-h3{
  font-size:15.5px;font-weight:800;letter-spacing:-.01em;margin:26px 0 8px;
}
.lg-body p{ font-size:15px;line-height:1.68;color:rgba(20,19,18,.78);margin-bottom:14px }
.lg-body a{ color:var(--orange-text);text-decoration:underline;text-underline-offset:3px }
.lg-body a:hover{ color:var(--ink) }
.lg-body strong,.lg-body b{ color:var(--ink);font-weight:800 }
.lg-list{ list-style:none;margin:0 0 16px }
.lg-list li{
  position:relative;padding:5px 0 5px 22px;font-size:15px;line-height:1.6;
  color:rgba(20,19,18,.78);
}
.lg-list li::before{
  content:"";position:absolute;left:0;top:13px;width:9px;height:2px;background:var(--orange);
}
.lg-table{ width:100%;border-collapse:collapse;margin:8px 0 20px;font-size:13.5px }
.lg-table th{
  text-align:left;font-size:10.5px;font-weight:800;letter-spacing:.14em;text-transform:uppercase;
  color:rgba(20,19,18,.5);padding:0 12px 8px 0;border-bottom:2px solid var(--ink);
}
.lg-table td{
  padding:11px 12px 11px 0;border-bottom:1px solid var(--line);
  color:rgba(20,19,18,.78);vertical-align:top;line-height:1.5;
}
.lg-table tr td:first-child{ font-weight:700;color:var(--ink) }
.lg-note{
  border-left:3px solid var(--orange);background:rgba(235,91,38,.07);
  padding:18px 22px;margin:20px 0;
}
.lg-note b{
  display:block;font-size:12px;font-weight:900;letter-spacing:.12em;text-transform:uppercase;
  color:var(--ink);margin-bottom:6px;
}
.lg-note p{ font-size:14px;margin:0;color:rgba(20,19,18,.78) }
.lg-note p + p{ margin-top:8px }
/* unresolved facts a human must supply, deliberately loud */
.lg-todo{
  display:inline-block;background:var(--ink);color:var(--gold);
  padding:1px 8px;font-size:12.5px;font-weight:800;letter-spacing:.04em;
}
.lg-meta{
  margin-top:44px;padding-top:20px;border-top:2px solid var(--ink);
  font-size:12.5px;font-weight:700;letter-spacing:.06em;color:rgba(20,19,18,.6);
}

/* ============================================================
   V8 · COOKIE CONSENT
   Equal-weight Accept/Reject by design: both buttons share one
   class and identical dimensions, so neither is visually favoured.
   ============================================================ */
.cc-banner{
  position:fixed;left:0;right:0;bottom:0;z-index:9998;
  background:var(--ink);color:var(--cream);
  border-top:3px solid var(--orange);
  box-shadow:0 -14px 40px rgba(0,0,0,.3);
  padding:clamp(18px,2.4vw,26px) 0;
}
.cc-in{
  max-width:1280px;margin:0 auto;padding:0 clamp(20px,4vw,56px);
  display:grid;grid-template-columns:1fr auto;gap:clamp(20px,3vw,44px);align-items:center;
}
@media(max-width:860px){ .cc-in{ grid-template-columns:1fr;gap:18px } }
.cc-title{
  font-size:13px;font-weight:900;letter-spacing:.16em;text-transform:uppercase;
  color:var(--orange);margin-bottom:8px;
}
.cc-copy{ font-size:14px;line-height:1.6;color:rgba(246,240,228,.78);max-width:70ch }
.cc-copy a{ color:var(--cream);text-decoration:underline;text-underline-offset:3px }
.cc-actions{ display:flex;gap:10px;flex-wrap:wrap;align-items:center }
/* identical weight: same padding, same size, same treatment */
.cc-btn{
  appearance:none;border:2px solid var(--cream);background:var(--cream);color:var(--ink);
  font-family:var(--font);font-weight:900;font-size:14px;letter-spacing:.02em;
  padding:13px 26px;min-width:132px;text-align:center;cursor:pointer;border-radius:0;
  transition:transform .2s ease,box-shadow .2s ease;
}
.cc-btn:hover{ transform:translate(-2px,-2px);box-shadow:4px 4px 0 var(--orange) }
.cc-btn-alt{
  appearance:none;border:2px solid rgba(246,240,228,.5);background:transparent;color:var(--cream);
  font-family:var(--font);font-weight:800;font-size:13px;letter-spacing:.02em;
  padding:13px 20px;cursor:pointer;border-radius:0;transition:.2s;
}
.cc-btn-alt:hover{ border-color:var(--cream);background:rgba(246,240,228,.08) }

/* settings dialog */
.cc-modal{
  position:fixed;inset:0;z-index:9999;display:flex;align-items:center;justify-content:center;
  background:rgba(20,19,18,.72);padding:20px;
}
.cc-panel{
  background:var(--cream);color:var(--ink);width:min(620px,100%);
  max-height:86vh;overflow-y:auto;border:2px solid var(--ink);
  box-shadow:12px 12px 0 var(--orange);padding:clamp(24px,3.4vw,38px);
}
.cc-panel h2{
  font-size:clamp(22px,2.6vw,30px);font-weight:900;letter-spacing:-.02em;
  text-transform:uppercase;line-height:1.05;
}
.cc-panel > p{ font-size:14px;line-height:1.6;color:rgba(20,19,18,.75);margin-top:12px }
.cc-cat{ border-top:1px solid var(--line);padding:18px 0;display:grid;grid-template-columns:1fr auto;gap:18px;align-items:start }
.cc-cat h3{ font-size:15px;font-weight:900;letter-spacing:-.01em }
.cc-cat p{ font-size:13px;line-height:1.55;color:rgba(20,19,18,.68);margin-top:5px }
.cc-cat .cc-state{ font-size:11px;font-weight:800;letter-spacing:.12em;text-transform:uppercase;color:var(--orange-text);margin-top:6px;display:block }
/* square switch, no radius, per the identity */
.cc-sw{ display:inline-flex;align-items:center;gap:9px;cursor:pointer;white-space:nowrap }
.cc-sw input{ position:absolute;opacity:0;width:0;height:0 }
.cc-sw .box{
  width:46px;height:26px;background:rgba(20,19,18,.16);border:2px solid var(--ink);
  position:relative;transition:background .2s ease;flex:0 0 46px;
}
.cc-sw .box::after{
  content:"";position:absolute;top:2px;left:2px;width:18px;height:18px;
  background:var(--ink);transition:transform .2s ease;
}
.cc-sw input:checked + .box{ background:var(--orange) }
.cc-sw input:checked + .box::after{ transform:translateX(20px) }
.cc-sw input:focus-visible + .box{ outline:3px solid var(--ink);outline-offset:3px }
.cc-sw input:disabled + .box{ opacity:.55;cursor:not-allowed }
.cc-sw .txt{ font-size:12px;font-weight:800;letter-spacing:.1em;text-transform:uppercase }
.cc-panel-actions{
  display:flex;gap:10px;flex-wrap:wrap;margin-top:24px;padding-top:20px;border-top:2px solid var(--ink);
}
.cc-panel .cc-btn{ border-color:var(--ink);background:var(--ink);color:var(--cream) }
.cc-panel .cc-btn:hover{ box-shadow:4px 4px 0 var(--orange) }
.cc-panel .cc-btn-alt{ border-color:rgba(20,19,18,.4);color:var(--ink) }
.cc-panel .cc-btn-alt:hover{ border-color:var(--ink);background:rgba(20,19,18,.06) }

/* the mail button would sit under the banner, so stand it down while the banner is open */
html.cc-open .mail-fab{ display:none }

/* footer legal row */
.foot-legal{
  display:flex;flex-wrap:wrap;gap:10px 24px;align-items:center;
  padding-top:26px;margin-top:4px;
}
.foot-legal a,.foot-legal .cc-link{
  font-size:13px;font-weight:700;color:rgba(246,240,228,.72);
  background:none;border:none;padding:0;cursor:pointer;font-family:var(--font);
  text-decoration:none;letter-spacing:.01em;
}
.foot-legal a:hover,.foot-legal .cc-link:hover{ color:var(--orange);text-decoration:underline;text-underline-offset:3px }

@media(prefers-reduced-motion:reduce){
  .cc-btn,.cc-sw .box,.cc-sw .box::after{ transition:none }
}

/* ---------- form: privacy notice + consent ---------- */
.form-privacy{
  font-size:12.5px;line-height:1.55;color:rgba(20,19,18,.68);
  margin-top:22px;padding:14px 16px;background:var(--cream);
  border-left:3px solid var(--orange);
}
.form-privacy b{ color:var(--ink);font-weight:800 }
.form-privacy a{ color:var(--orange-text);text-decoration:underline;text-underline-offset:2px }
.form-consent{
  display:grid !important;grid-template-columns:auto 1fr;gap:11px;align-items:start;
  margin:16px 0 0 !important;font-size:12.5px !important;font-weight:600 !important;
  line-height:1.5;color:rgba(20,19,18,.78);letter-spacing:0 !important;cursor:pointer;
}
.form-consent input[type=checkbox]{
  width:20px !important;height:20px;margin:1px 0 0;padding:0 !important;flex:0 0 20px;
  appearance:none;-webkit-appearance:none;background:#fff;
  border:2px solid var(--ink) !important;border-radius:0;cursor:pointer;position:relative;
}
.form-consent input[type=checkbox]:checked{ background:var(--orange) }
.form-consent input[type=checkbox]:checked::after{
  content:"";position:absolute;left:5px;top:1px;width:5px;height:11px;
  border:solid var(--ink);border-width:0 2.5px 2.5px 0;transform:rotate(45deg);
}
.form-consent input[type=checkbox]:focus-visible{ outline:3px solid var(--ink);outline-offset:3px }
.form-consent a{ color:var(--orange-text);text-decoration:underline;text-underline-offset:2px }
/* honeypot: off-screen, unreachable by keyboard, hidden from assistive tech */
.hp{ position:absolute !important;left:-9999px !important;width:1px;height:1px;overflow:hidden }
/* the form composes a mailto in JS, so without JS point people at the address instead
   of leaving a submit button that cannot work */
.form-nojs{ display:none;font-size:12.5px;line-height:1.55;margin-top:16px;
  padding:14px 16px;background:var(--ink);color:var(--cream) }
.form-nojs a{ color:var(--orange);text-decoration:underline;text-underline-offset:2px }
html:not(.js) .form-nojs{ display:block }
html:not(.js) form.demo button[type=submit]{ display:none }

/* ============================================================
   V9 · MESSAGE TO VOICE ACTORS
   People are using the studio's name to approach voice actors.
   A small badge at the top left of the home hero, above the
   ATRIVOX stamp, opens the full notice. That badge is the whole
   visible footprint on purpose: see the note above .imp-note for
   the six placements tried before it. The nav is untouched.

   Opening is :target-driven so the notice works with JS disabled
   and so #recruitment-notice is a shareable deep link an actor can
   be sent directly. When JS is present it drives the panel instead
   (focus handling, Escape, no history jump) and :target stands down.
   ============================================================ */

/* ---------- the notice badge ---------- */
/* Top-left of the hero, in flow, directly above the ATRIVOX .stamp. Square
   and hard-shadowed like everything else outside the nav pill, so it belongs
   to the page rather than to the site's chrome.

   In flow rather than absolutely positioned: the nav is a centred pill and at
   900px and below it reaches across the top-left, so anything pinned up there
   collides with it. Sitting first in the hero copy column puts it in the same
   corner with nothing to fight.

   Six placements were tried before this one, each rejected in the client's
   own words:
     1. a full-width bar above the nav — "it makes it look like the site is
        broken"; over a floating pill nav a strip reads as a browser error bar;
     2. a band under the hero, and 3. a card in the hero under the ON AIR
        frame — a paragraph of scam warning talking over the pitch, and
        clients are the paying audience;
     4. that card shrunk into the hero's top-right corner — it displaced the
        orbit badge and still sat inside the composition;
     5. a chip in the nav — "too central, it's like it's part of the site";
     6. a tab on the window's right edge — "too out the way".
   Two lines, the way .btn-contact does it: who it is for, then what to do.
   Everything else stays behind the click, so a client never has to read it. */
.imp-note{
  /* pinned in the hero's own top-left corner, on the same line as the nav
     pill. It is a direct child of the <header>, not of .wrap: .field is
     position:relative but so is .field > .wrap, so anything inside the wrap
     would position against the wrap (which starts below the hero's top
     padding) instead of against the corner. */
  position:absolute;z-index:4;
  top:22px;left:clamp(20px,4vw,56px);
  display:flex;width:max-content;max-width:100%;
  flex-direction:column;align-items:flex-start;gap:2px;
  background:var(--ink);color:var(--cream);
  border:2px solid var(--orange);
  box-shadow:5px 5px 0 rgba(20,19,18,.35);
  padding:8px 14px;
  transition:transform .25s ease,box-shadow .25s ease;
}
.imp-note b{
  font-size:12.5px;font-weight:800;line-height:1.2;letter-spacing:.01em;color:var(--cream);
}
.imp-note small{
  font-size:10px;font-weight:700;line-height:1.2;letter-spacing:.03em;color:var(--orange);
}
.imp-note:hover{ transform:translate(-2px,-2px);box-shadow:7px 7px 0 rgba(20,19,18,.35) }
.imp-note:focus-visible{ outline:3px solid var(--ink);outline-offset:3px }

/* Holding the nav's line is the whole point, so the badge tightens to keep it
   rather than dropping below it. The nav is a centred 630px pill (314px once
   the links hide under 861px), so the room to its left closes as the window
   narrows: 145px at 1000, 89px at 900, 72px at 520, and nothing at all by 500. */
@media(max-width:1000px){
  .imp-note{ top:26px;padding:6px 11px }
  .imp-note b{ font-size:11.5px }
  .imp-note small{ font-size:9px }
}
/* under 500 the pill reaches the corner itself and there is genuinely nothing
   left of it, so here and only here the badge drops beneath the nav and the
   hero's top padding grows to match. The pill is a flat 58px tall now that it
   no longer wraps, so 92 clears it. */
@media(max-width:519px){
  .imp-note{ top:92px;padding:7px 12px }
  .imp-note b{ font-size:12px }
  .imp-note small{ font-size:9.5px }
  .hero-o{ padding-top:calc(var(--nav-h) + 96px) }
}

@media(prefers-reduced-motion:reduce){
  .imp-note{ transition:none }
  .imp-note:hover{ transform:none }
}

/* ---------- the notice panel ---------- */
.imp-modal{
  display:none;position:fixed;inset:0;z-index:9999;
  align-items:center;justify-content:center;
  background:rgba(20,19,18,.78);padding:20px;
}
html:not(.js) .imp-modal:target{display:flex}
html.js .imp-modal.is-open{display:flex}

.imp-panel{
  background:var(--cream);color:var(--ink);width:min(660px,100%);
  max-height:88vh;overflow-y:auto;border:2px solid var(--ink);
  box-shadow:12px 12px 0 var(--orange);
}
.imp-panel-in{padding:clamp(22px,3.2vw,38px)}

/* ink strip so the panel reads as a notice, not a marketing card */
.imp-bar{
  position:sticky;top:0;z-index:2;
  display:flex;align-items:center;gap:12px;
  background:var(--ink);color:var(--cream);padding:13px clamp(18px,2.6vw,26px);
}
.imp-bar .ic{font-size:16px;line-height:1}
.imp-bar b{
  flex:1;font-size:11px;font-weight:900;letter-spacing:.18em;text-transform:uppercase;
  color:var(--orange);
}
.imp-x{
  appearance:none;background:none;border:2px solid rgba(246,240,228,.35);color:var(--cream);
  font-family:var(--font);font-size:15px;font-weight:800;line-height:1;
  width:32px;height:32px;display:flex;align-items:center;justify-content:center;
  cursor:pointer;text-decoration:none;transition:.2s;flex:0 0 32px;
}
.imp-x:hover{border-color:var(--orange);background:rgba(235,91,38,.16)}
.imp-x:focus-visible{outline:3px solid var(--orange);outline-offset:2px}

.imp-panel h2{
  font-size:clamp(24px,3vw,34px);font-weight:900;letter-spacing:-.025em;
  text-transform:uppercase;line-height:1.02;
}
.imp-panel h2 .accent{font-family:var(--serif);font-style:italic;font-weight:500;text-transform:none;color:var(--orange-text)}
.imp-panel p{font-size:15px;line-height:1.66;color:rgba(20,19,18,.78);margin-top:14px}
.imp-panel p b,.imp-panel p strong{color:var(--ink);font-weight:800}
.imp-panel a{color:var(--orange-text);text-decoration:underline;text-underline-offset:3px}
.imp-panel a:hover{color:var(--ink)}
.imp-lead{font-size:16px !important;color:rgba(20,19,18,.82) !important}

/* the one rule: inverted so it is the thing the eye lands on */
.imp-rule{
  background:var(--ink);color:var(--cream);
  border-left:5px solid var(--orange);
  padding:20px 22px;margin:24px 0 4px;
}
.imp-rule .lbl{
  display:block;font-size:11px;font-weight:900;letter-spacing:.18em;text-transform:uppercase;
  color:var(--orange);margin-bottom:9px;
}
.imp-rule p{font-size:15px;line-height:1.62;color:rgba(246,240,228,.86);margin:0}
.imp-rule p + p{margin-top:10px}
.imp-panel .imp-rule p b,.imp-panel .imp-rule p strong{color:var(--cream);font-weight:800}
.imp-rule a{color:var(--orange);text-decoration:underline;text-underline-offset:3px}
.imp-rule a:hover{color:var(--cream)}

/* named-person callout: the single fastest tell for an actor */
.imp-name{
  display:flex;align-items:baseline;gap:12px;flex-wrap:wrap;
  border-top:2px solid var(--ink);border-bottom:2px solid var(--ink);
  padding:16px 0;margin:26px 0;
}
.imp-name .who{font-size:clamp(19px,2.4vw,25px);font-weight:900;letter-spacing:-.02em;line-height:1}
.imp-name .role{font-size:12px;font-weight:800;letter-spacing:.14em;text-transform:uppercase;color:var(--orange-text)}
.imp-name .sub{flex:0 0 100%;font-size:14px;line-height:1.55;color:rgba(20,19,18,.72)}

.imp-cta{
  display:flex;gap:12px;flex-wrap:wrap;align-items:center;
  margin-top:26px;padding-top:22px;border-top:2px solid var(--ink);
}
.imp-btn{
  display:inline-block;background:var(--ink);color:var(--cream) !important;
  font-weight:900;font-size:14px;letter-spacing:.02em;padding:14px 24px;
  border:2px solid var(--ink);text-decoration:none !important;
  transition:transform .2s ease,box-shadow .2s ease;
}
.imp-btn:hover{transform:translate(-3px,-3px);box-shadow:5px 5px 0 var(--orange);color:var(--cream) !important}
.imp-btn-alt{
  appearance:none;display:inline-block;background:none;border:2px solid rgba(20,19,18,.35);
  color:var(--ink) !important;font-family:var(--font);font-weight:800;font-size:14px;
  padding:14px 22px;cursor:pointer;text-decoration:none !important;transition:.2s;
}
.imp-btn-alt:hover{border-color:var(--ink);background:rgba(20,19,18,.06)}

.imp-meta{
  margin-top:24px;padding-top:16px;border-top:1px solid var(--line);
  font-size:12px;font-weight:700;letter-spacing:.04em;color:rgba(20,19,18,.58);line-height:1.5;
}

@media(max-width:640px){
  .imp-modal{padding:0;align-items:flex-end}
  .imp-panel{max-height:92vh;width:100%;border-width:2px 0 0;box-shadow:none}
  .imp-rule{padding:17px 18px}
}

@media(prefers-reduced-motion:reduce){
  .imp-btn,.imp-x{transition:none}
}

/* ============================================================
   V10 · COMPLIANCE PASS (2026-08-26)
   Every value here was measured on the live pages, not guessed.
   See COMPLIANCE-AUDIT.md for what prompted each one.
   ============================================================ */

/* ---------- 1. the missing marker style ----------
   40 spans carry class "lg-tbc" across the five legal pages and NOTHING in
   this stylesheet ever defined it. The rule that was written is .lg-todo, a
   different name, so every one of those 40 "(to be confirmed)" notes has been
   rendering to the public as ordinary body copy, indistinguishable from the
   policy itself. They stay visible on purpose until the facts are settled:
   a visibly unfinished page is honest, a silently wrong one is not. But they
   must read as editorial notes, not as policy. */
.lg-tbc{
  display:inline;font-style:italic;font-weight:600;
  color:var(--orange-text);
  border-bottom:1px dotted var(--orange-text);
  white-space:normal;
}
.lg-body .lg-tbc{ font-size:.94em }

/* ---------- 2. contrast, measured ----------
   Failures found on the live site at 1440px, ratio in brackets. */
.lead{ color:rgba(20,19,18,.86) }
/* the orange heroes are the real failure: ink at .78 on --orange measures
   4.06:1, just under the bar. These three rules out-specify .lead above. */
.page-hero-o .lead,.hero-o .lead,.atrivox .lead{ color:rgba(20,19,18,.9) }
.lg-toc h2{ color:rgba(20,19,18,.64) }               /* was .45 (2.93:1) */
.lg-table th{ color:rgba(20,19,18,.66) }             /* was .50 (3.40:1) */
.foot-bottom{ color:rgba(246,240,228,.62) }          /* was .45 (4.13:1) */
.foot-id{ color:rgba(246,240,228,.62) }              /* was .42 (3.75:1) */
.hq-foot span{ color:rgba(246,240,228,.62) }         /* was .45 (4.13:1) */
/* --orange-text is tuned for CREAM ground; on the orange card it drops to
   3.5:1, so that one card uses ink instead */
.svc.orange-card .num,
.svc.orange-card .go{ color:var(--ink) }
.svc.orange-card p{ color:rgba(20,19,18,.9) }
/* and the ink card is the mirror problem: --orange-text is a darkened orange
   for light ground, so on ink it drops to 3.5:1. Bright --orange is 5.4:1 there. */
.svc.dark .num,
.svc.dark .go{ color:var(--orange) }
/* the logo wordmark is exempt as a logotype under WCAG 1.4.3 and is left alone */

/* ---------- 3. nothing may push the page wider than the screen ----------
   Measured: the ATRIVOX heading and the tables in the legal pages were
   forcing horizontal overflow on every common phone, so the ends of
   sentences could not be reached at all. */
.hl{ white-space:normal;overflow-wrap:anywhere }
.lg-body,.lg-body p,.lg-body li{ overflow-wrap:anywhere }
.lg-table{ display:block;overflow-x:auto;-webkit-overflow-scrolling:touch;max-width:100% }
.lg-table thead,.lg-table tbody,.lg-table tr{ width:100% }
@media(max-width:640px){
  .lg-table{ font-size:12.5px }
  .lg-table td,.lg-table th{ min-width:8.5em }
}
html,body{ overflow-x:hidden }
.wrap,.lg-wrap,.lg-grid,.lg-body{ max-width:100%;min-width:0 }

/* ---------- 4. reduced motion, actually honoured ----------
   The accessibility statement promised looping animation stops for anyone who
   has asked their system to reduce motion. Ten loops kept running, including
   both scrolling text strips. This stops all of them, everywhere, and the
   scroll-triggered speed-up on the marquee is disabled in js/main.js too. */
@media(prefers-reduced-motion:reduce){
  *,*::before,*::after{
    animation-duration:.001ms !important;
    animation-iteration-count:1 !important;
    transition-duration:.001ms !important;
    scroll-behavior:auto !important;
  }
  .marquee-track,.ticker-track,.cta-band .ticker-bg b,.orbit{
    animation:none !important;transform:none !important;
  }
  .stamp .dot,.frame .frame-bar .live::before,.hq-bar .live::before{
    animation:none !important;opacity:1 !important;
  }
  .hq-row .bar i,.eq i,.reel-note::after,.float-slow,.float-slower{
    animation:none !important;
  }
  .marquee-track{ width:auto;flex-wrap:wrap }
}

/* ---------- 5. the floating mail button was sitting on the footer ----------
   .mail-fab is fixed to the bottom-left of the VIEWPORT, so once you scroll to
   the very end of the page it lands on top of whatever the footer's last line
   is. Since the company identity line was added that line is the copyright,
   and the button was covering it.

   Solved with padding rather than by hiding the button on scroll: .mail-fab is
   deliberately pure CSS with no JavaScript (see the V5 note), and an
   IntersectionObserver just to move a decorative button is not worth breaking
   that for. The reserve is the button's height plus its inset plus its shadow.
   Applied on every page: contact.html has no button, and there the extra space
   simply reads as footer breathing room. */
footer .wrap{ padding-bottom:104px }
@media(max-width:640px){ footer .wrap{ padding-bottom:88px } }

/* ---------- 6. the trust row ----------
   Three statements of fact in the footer, each linking to the page that proves
   it. Deliberately NOT badge-like in the usual sense:

   - No ICO logo, no crest, no imitation of their colours or mark. Using the
     Information Commissioner's logo without consent infringes their copyright
     and implies they have approved us, which paying a registration fee does
     not mean. They actively chase misuse. This is our own typography saying a
     true thing instead.
   - The word is "registered", never "certified", "approved" or "accredited".
     Paying the data protection fee is a legal duty, not an accreditation.
   - Every line is a claim that has to be defensible, so each one links to the
     page carrying the detail. A claim that cites its own evidence is the only
     kind worth making.
   - Nothing here promises a standard of care we have not written down. The
     roster policy still has open questions in it; the badge says a policy
     exists and points at it, which is true, rather than describing how good it
     is, which would not be. */
.trust{
  list-style:none;margin:0;padding:26px 0 4px;
  display:grid;grid-template-columns:repeat(3,minmax(0,1fr));
  gap:12px;border-top:1px solid var(--line-light);
}
@media(max-width:860px){ .trust{ grid-template-columns:1fr;gap:10px } }
.trust li{ min-width:0 }
.trust a{
  display:flex;align-items:flex-start;gap:11px;height:100%;
  padding:13px 15px;
  border:1px solid rgba(246,240,228,.16);
  background:rgba(246,240,228,.03);
  transition:border-color .2s ease,background .2s ease;
}
.trust a:hover,.trust a:focus-visible{
  border-color:var(--orange);background:rgba(235,91,38,.09);outline:none;
}
.trust a:focus-visible{ outline:2px solid var(--orange);outline-offset:2px }
.trust .tk{
  flex:0 0 17px;width:17px;height:17px;margin-top:1px;
  stroke:var(--orange);
}
.trust span{ display:block;min-width:0 }
.trust b{
  display:block;font-size:12px;font-weight:900;letter-spacing:.05em;
  text-transform:uppercase;color:var(--cream);margin-bottom:3px;
}
.trust span{ font-size:12px;line-height:1.45;color:rgba(246,240,228,.62) }
@media(prefers-reduced-motion:reduce){ .trust a{ transition:none } }

/* the practical ask sits just under the security rule, close enough to the
   email instruction to be read with it, but outside the inverted block so it
   does not dilute the one thing that block exists to say */
.imp-panel .imp-ask{
  border-left:4px solid var(--orange);
  background:rgba(235,91,38,.08);
  padding:13px 16px;margin-top:14px;
  font-size:14.5px;line-height:1.6;color:rgba(20,19,18,.82);
}
.imp-panel .imp-ask b{color:var(--ink);font-weight:800}