/* =====================================================================
   VISUAL LAB — WEBSITE 2026
   The gallery. Visual Lab started as a production house, so the site is
   built like the room a show is run from: every picture sits on a monitor
   with a bezel and a UMD strip, the VL monogram is the station bug on
   every screen, controls are keys with an LED, figures sit in LCD windows.
   The accent is a tally light: one lit point in a frame, never a fill,
   never text on paper. Monochrome, Archivo Expanded / Archivo / Inter.
   work.css adds the dark control room for work.html and the case pages.
   ===================================================================== */

:root{
  --black:#231F20; --ink:#231F20; --ink-2:#4A4748; --ink-3:#6F6C6D;
  --muted:#94908F; --line:#E6E4E3; --line-2:#D6D3D2;
  --paper:#FFFFFF; --paper-2:#F6F5F4; --paper-3:#EFEDEC;
  --on-black:#F4F3F2; --on-black-2:#A6A2A1;
  --accent:#F77E2D;             /* the kit's one accent: a tally, a marker */
  --accent-deep:#C24E12;        /* legacy inline uses only; not for new work */
  --space:#0B0B0D;              /* the observation plate, deeper than brand black */

  /* the gallery hardware */
  --bezel:#070707; --screen:#000; --umd:#0D0C0C; --umd-ink:#DAD6D4;
  --lcd:#F59A62; --lcd-bg:#0E0D0C;
  --led-off:#D6D3D2; --glow:0 0 8px rgba(247,126,45,.75);
  --mark:url(../assets/vl-symbol-white.svg);

  --f-display:'Archivo','Archivo Expanded',sans-serif;
  --display-width:125%;         /* Archivo's wdth axis = the kit's Archivo Expanded */
  --f-head:'Archivo',sans-serif;
  --f-body:'Inter',sans-serif;
  --f-mono:ui-monospace,'SF Mono',Menlo,Consolas,monospace;

  --ease:cubic-bezier(.22,1,.36,1);
  --z-nav:100; --z-mcta:150; --z-menu:200; --z-loader:400;
  --pad-x:clamp(1.25rem,4vw,4rem);
  --sec-y:clamp(4.5rem,9vw,8rem);
}

*{box-sizing:border-box; margin:0}
html{scroll-behavior:smooth; overflow-x:hidden; scrollbar-color:var(--ink-3) var(--paper-2); -webkit-text-size-adjust:100%}
html.lenis{height:auto}
.lenis.lenis-smooth{scroll-behavior:auto}
body{
  background:var(--paper); color:var(--ink);
  font-family:var(--f-body); font-size:1.0625rem; line-height:1.6;
  letter-spacing:-0.003em; -webkit-font-smoothing:antialiased;
  text-rendering:optimizeLegibility; overflow-x:hidden;
}
img,video{max-width:100%; display:block}
a{color:inherit; text-decoration:none; text-underline-offset:.18em}
h1,h2,h3{color:inherit}
input,select,textarea{caret-color:var(--accent)}
::selection{background:var(--black); color:#fff}
.svc--black ::selection,.cta ::selection,.foot-lite ::selection,.plate ::selection,.lab-tease ::selection,.menu ::selection,.pvw--dark ::selection{background:#fff; color:var(--black)}
::-webkit-scrollbar{width:11px; height:11px}
::-webkit-scrollbar-track{background:var(--paper-2)}
::-webkit-scrollbar-thumb{background:var(--ink-3); border:3px solid var(--paper-2)}
::-webkit-scrollbar-thumb:hover{background:var(--ink)}
:focus-visible{outline:2px solid var(--ink); outline-offset:3px}
.svc--black :focus-visible,.cta :focus-visible,.foot-lite :focus-visible,.plate :focus-visible,.lab-tease :focus-visible,.menu :focus-visible,.clap :focus-visible,
.fg-cta :focus-visible,.fgx-cta :focus-visible,.fgx-band--dark :focus-visible,.post-cta :focus-visible,body.fg-dark :focus-visible,.pvw--dark :focus-visible{outline-color:var(--accent)}
[hidden]{display:none !important}
.vh{position:absolute !important; width:1px; height:1px; overflow:hidden; clip:rect(0 0 0 0); white-space:nowrap}

/* film grain: kept exactly viewport-sized and moved by background-position,
   because a transformed fixed layer wider than the viewport widens the page
   on mobile browsers */
body::after{
  content:""; position:fixed; inset:0; z-index:2000; pointer-events:none;
  background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='240' height='240'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='0.9' numOctaves='2' stitchTiles='stitch'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23n)'/%3E%3C/svg%3E");
  background-size:240px 240px; opacity:.045; mix-blend-mode:overlay;
  animation:grain 9s steps(6) infinite;
}
@keyframes grain{
  0%,100%{background-position:0 0} 20%{background-position:-12px 9px}
  40%{background-position:9px -12px} 60%{background-position:-9px -6px} 80%{background-position:12px 12px}
}
@media (prefers-reduced-motion:reduce){ body::after{animation:none} }

.wrap{max-width:1360px; margin:0 auto; padding-inline:var(--pad-x)}

/* a cross-reference: the monogram marks it */
.xref{position:relative; padding-left:calc(12px + .7rem); max-width:62ch; font-size:.95rem; line-height:1.55; color:var(--ink-3); text-wrap:pretty}
.xref::before{content:""; position:absolute; left:0; top:.4em; width:12px; height:12px; background:var(--ink); -webkit-mask:var(--mark) center/contain no-repeat; mask:var(--mark) center/contain no-repeat}
.xref a{color:var(--ink); font-weight:600; text-decoration:underline; text-decoration-color:var(--accent); text-decoration-thickness:1.5px}
.xref a:hover{text-decoration-thickness:3px}
.svc--black .xref{color:var(--on-black-2)}
.svc--black .xref::before{background:var(--on-black)}
.svc--black .xref a{color:var(--on-black)}
* + .xref{margin-top:clamp(1.75rem,3vw,2.5rem)}

/* =====================================================================
   KEYS — every button is a hardware key: square cap, a skirt that
   presses in, and an LED that lights on hover and focus. The armed key
   (.btn--accent) keeps its LED lit.
   ===================================================================== */
.btn{
  --led:var(--led-off); --skirt:#000;
  position:relative; display:inline-flex; align-items:center; gap:.7rem;
  min-height:48px; padding:.78rem 1.3rem .78rem 1.05rem;
  font-family:var(--f-head); font-weight:700; font-size:.9375rem; line-height:1.1;
  color:#fff; background:var(--black); cursor:pointer; white-space:nowrap;
  border:1.5px solid var(--black); border-bottom:4px solid var(--skirt); border-radius:2px;
  transition:transform .08s, border-bottom-width .08s, margin .08s, background .2s, color .2s;
  -webkit-tap-highlight-color:transparent;
}
.btn::before{content:""; flex:none; width:7px; height:7px; background:var(--led); transition:background .15s, box-shadow .15s}
.btn:hover,.btn:focus-visible{--led:var(--accent)}
.btn:hover::before,.btn:focus-visible::before,.btn--accent::before{box-shadow:var(--glow)}
.btn:active{transform:translateY(2px); border-bottom-width:2px; margin-bottom:2px}
.btn--accent{--led:var(--accent)}
.btn--ghost{--skirt:var(--black); color:var(--ink); background:var(--paper); border-color:var(--black)}
.btn--ghost:hover{background:var(--paper-2)}
.btn--white{--led:#6F6C6D; --skirt:#8E898A; color:var(--black); background:#fff; border-color:#fff}
.btn--white:hover{background:var(--paper-2); border-color:var(--paper-2)}
.btn--nav{min-height:40px; padding:.5rem 1rem .5rem .85rem; font-size:.875rem; border-bottom-width:3px}
.btn--nav:active{border-bottom-width:1px}
/* the armed key on a dark field turns white so it still reads as the one to press */
.svc--black .btn--accent,.cta .btn--accent,.foot-lite .btn--accent,.plate .btn--accent,.lab-tease .btn--accent,.pvw--dark .btn--accent{--skirt:#8E898A; color:var(--black); background:#fff; border-color:#fff}
.svc--black .btn--ghost,.foot-lite .btn--ghost,.lab-tease .btn--ghost,.fg-dark .btn--ghost,.pvw--dark .btn--ghost{--skirt:rgba(255,255,255,.55); --led:#4A4748; color:var(--on-black); background:transparent; border-color:rgba(255,255,255,.55)}
.svc--black .btn--ghost:hover,.foot-lite .btn--ghost:hover,.lab-tease .btn--ghost:hover,.fg-dark .btn--ghost:hover,.pvw--dark .btn--ghost:hover{background:rgba(255,255,255,.06); --led:var(--accent)}
@media (prefers-reduced-motion:reduce){ .btn{transition:none} }

/* ---------- loader ---------- */
.loader{
  position:fixed; inset:0; z-index:var(--z-loader);
  background:var(--black); color:var(--on-black);
  display:flex; align-items:center; justify-content:center;
  transition:transform .7s var(--ease);
}
.loader.done{transform:translateY(-100%)}
.loader__mark{width:clamp(64px,8vw,104px)}
@media (prefers-reduced-motion:reduce){ .loader{display:none} }

/* ---------- nav ---------- */
.nav{
  position:fixed; top:0; left:0; right:0; z-index:var(--z-nav);
  display:flex; align-items:center; gap:2rem;
  padding:.85rem var(--pad-x);
  transition:background .3s, box-shadow .3s;
}
.nav.scrolled{background:var(--paper); box-shadow:0 1px 0 var(--line-2)}
.nav__logo{display:flex; align-items:center; padding-block:.6rem; margin-block:-.6rem}
.nav__logo img{height:22px; width:auto}
.nav__links{display:flex; gap:1.6rem; margin-left:auto}
.nav__links a{font-family:var(--f-head); font-weight:600; font-size:.9rem; position:relative; padding-block:.3rem}
.nav__links a::after{
  content:""; position:absolute; left:0; bottom:0; height:2px; width:100%;
  background:var(--accent); transform:scaleX(0); transform-origin:right;
  transition:transform .35s var(--ease);
}
.nav__links a:hover::after,.nav__links a[aria-current="page"]::after{transform:scaleX(1); transform-origin:left}
.nav__burger{display:none}
.nav .btn--nav + .btn--nav{margin-left:-1.25rem}

/* mobile menu */
.menu{
  position:fixed; inset:0; z-index:var(--z-menu);
  background:var(--black); color:var(--on-black);
  display:flex; flex-direction:column; justify-content:center;
  padding:clamp(1.5rem,6vw,4rem);
  transform:translateY(-102%); transition:transform .55s var(--ease);
  overflow-y:auto;
}
.menu.open{transform:none}
.menu nav{display:flex; flex-direction:column}
.menu a{
  display:flex; align-items:center; gap:.9rem; padding:.35rem 0;
  font-family:var(--f-display); font-stretch:var(--display-width); font-weight:800;
  font-size:clamp(1.6rem,7vw,2.6rem); letter-spacing:-.02em; line-height:1.15;
}
.menu a::before{content:""; flex:none; width:9px; height:9px; background:#4A4748}
.menu a:hover::before,.menu a:focus-visible::before{background:var(--accent); box-shadow:var(--glow)}
.menu__meta{margin-top:2.5rem; color:var(--on-black-2); font-size:.875rem}

@media (max-width:860px){
  .nav__links,.btn--nav{display:none}
  .nav__burger{
    display:block; margin-left:auto; background:none; border:0; cursor:pointer;
    width:44px; height:44px; position:relative; z-index:calc(var(--z-menu) + 1);
  }
  .nav__burger span{
    position:absolute; left:10px; right:10px; height:2px; background:var(--ink);
    transition:transform .35s var(--ease), background .35s;
  }
  .nav__burger span:nth-child(1){top:17px}
  .nav__burger span:nth-child(2){top:25px}
  .nav__burger.open span{background:#fff}
  .nav__burger.open span:nth-child(1){transform:translateY(4px) rotate(45deg)}
  .nav__burger.open span:nth-child(2){transform:translateY(-4px) rotate(-45deg)}
}

/* ---------- hero ---------- */
.hero{min-height:100svh; display:flex; flex-direction:column; padding-top:clamp(5.5rem,10vh,7.5rem)}
.hero__inner{
  flex:1; display:grid; grid-template-columns:minmax(0,6.4fr) minmax(0,5.6fr);
  align-items:center; gap:2rem;
  max-width:1360px; width:100%; margin:0 auto; padding-inline:var(--pad-x);
}
.hero__title{
  font-family:var(--f-display); font-stretch:var(--display-width); font-weight:900;
  font-size:clamp(1.9rem,3.9vw,3.55rem); line-height:1.04; letter-spacing:-.035em;
}
/* mask the line-rise so entering lines never paint over the subhead */
.hero__title,.cta__title{clip-path:inset(-0.1em -0.15em -0.2em -0.15em)}
.hero__title .line{display:block; white-space:nowrap}
.line--stroke{color:transparent; -webkit-text-stroke:2px var(--black)}
.hero__sub{margin-top:1.75rem; max-width:34rem; font-size:1.125rem; line-height:1.55; color:var(--ink-2); text-wrap:pretty}
.hero__cta{margin-top:2.25rem; display:flex; gap:.9rem; flex-wrap:wrap}
.hero__stage{position:relative; min-width:0; height:min(58vh,620px); min-height:340px}
.hero__canvas{position:absolute; inset:0; width:100%; height:100%}
/* poster sized to the 3D mark (62% of the stage height, 404/364 viewBox margin), so the handover doesn't jump */
.hero__fallback{position:absolute; inset:0; margin:auto; width:auto; height:68%; max-width:69%; object-fit:contain; opacity:.92; transition:opacity .6s var(--ease)}
.hero__stage.gl-ready .hero__fallback{opacity:0}
.hero__stage.no-gl .hero__canvas{display:none}
.hero__shadow{
  position:absolute; left:15%; right:15%; bottom:4%; height:9%; pointer-events:none;
  background:radial-gradient(ellipse at center, rgba(35,31,32,.18), transparent 68%); filter:blur(4px);
}
.hero__foot{
  display:flex; align-items:center; gap:1.5rem;
  max-width:1360px; width:100%; margin:0 auto;
  padding:1.1rem var(--pad-x) 1.4rem; border-top:1px solid var(--line);
  font-size:.82rem; color:var(--ink-3);
}
.hero__scroll{margin-left:auto; display:flex; align-items:center; gap:.6rem; font-size:.75rem; letter-spacing:.08em; text-transform:uppercase}
.hero__scrollbar{width:44px; height:2px; background:var(--line-2); position:relative; overflow:hidden}
.hero__scrollbar::after{content:""; position:absolute; inset:0; background:var(--ink); transform:translateX(-100%); animation:scrollhint 2.2s var(--ease) infinite}
@keyframes scrollhint{ 40%{transform:none} 100%{transform:translateX(100%)} }
@media (prefers-reduced-motion:reduce){ .hero__scrollbar::after{animation:none; transform:none} }
@media (max-width:1100px) and (min-width:901px){ .hero__title{font-size:clamp(1.9rem,3.6vw,3rem)} }
@media (max-width:900px){
  .hero{min-height:auto}
  .hero__inner{grid-template-columns:1fr; align-content:start; gap:0}
  .hero__stage{order:-1; height:34vh; min-height:240px; margin-bottom:.5rem}
  .hero__title{font-size:clamp(1.5rem,6.3vw,2.9rem)}
  .hero__cta{margin-bottom:2.5rem}
}
@media (max-width:640px){
  .hero__scroll{display:none}
  .hero__cta{flex-direction:column; align-items:stretch; gap:.7rem}
  .hero__cta .btn{justify-content:center}
  /* at phone sizes a 2px outline closes the counters, so the line keeps its outline at 1px */
  .hero__title .line--stroke{-webkit-text-stroke-width:1px}
}
@media (max-width:380px){ .hero__title .line{white-space:normal} }

/* ---------- clients marquee: client logos, the monogram between them ----------
   --h on each logo is its Work page roll height; --u scales the strip down on phones.
   Each set carries its own trailing gap, so -50% is exactly one set and the loop never jumps. */
.clients{--u:clamp(.8px,.07vw,1px); --mg:clamp(1.5rem,2.7vw,2.4rem); padding:clamp(2.5rem,4.5vw,3.25rem) 0; border-bottom:1px solid var(--line)}
.marquee{overflow:hidden}
.marquee__track{display:flex; width:max-content; animation:marq 70s linear infinite; will-change:transform}
.marquee__set{display:flex; align-items:center; gap:var(--mg); padding-right:var(--mg)}
.marquee__set img{flex:none; width:auto; height:calc(var(--h) * var(--u))}
.marquee__set i{flex:none; width:clamp(16px,1.6vw,22px); height:clamp(16px,1.6vw,22px); background:var(--ink-3); -webkit-mask:var(--mark) center/contain no-repeat; mask:var(--mark) center/contain no-repeat}
/* subcontracted brands close each set as one group under the Work roll's own label, so the words travel with the marks */
.marquee__sub{flex:none; display:flex; align-items:center; gap:var(--mg)}
.marquee__tag{flex:none; max-width:15ch; padding:.2rem 0 .2rem .7rem; border-left:2px solid var(--ink-3); font-family:var(--f-mono); font-size:.6875rem; font-weight:600; line-height:1.35; letter-spacing:.16em; text-transform:uppercase; color:var(--ink-2)}
@media (hover:hover){ .marquee:hover .marquee__track{animation-play-state:paused} }
@keyframes marq{to{transform:translateX(-50%)}}
@media (prefers-reduced-motion:reduce){
  .clients{--u:clamp(.62px,.07vw,1px)}
  .marquee__track{animation:none; width:auto}
  .marquee__set{flex-wrap:wrap; justify-content:center; padding-inline:var(--pad-x); row-gap:clamp(1rem,2vw,1.5rem)}
  .marquee__set + .marquee__set, .marquee__set i{display:none}
  .marquee__sub{flex:0 0 100%; flex-wrap:wrap; justify-content:center; row-gap:clamp(1rem,2vw,1.5rem); margin-top:.5rem}
  .marquee__tag{flex:0 0 100%; max-width:none; padding:0; border:0; text-align:center}
}

/* ---------- section heads ---------- */
.sec-head{display:flex; align-items:baseline; gap:1rem 2rem; flex-wrap:wrap; margin-bottom:clamp(2.75rem,5vw,4.5rem)}
.sec-title{
  position:relative;
  font-family:var(--f-display); font-stretch:var(--display-width); font-weight:800;
  font-size:clamp(1.75rem,3.6vw,2.85rem); letter-spacing:-.03em; line-height:1.06; text-wrap:balance;
}
.sec-title::after{content:"."; color:var(--accent)}
.sec-sub{color:var(--ink-3); font-size:1rem; margin-left:auto; max-width:40ch}
@media (max-width:760px){ .sec-sub{margin-left:0} }

/* ---------- doors ---------- */
.doors{padding:var(--sec-y) 0; background:var(--paper)}
.door{
  display:grid; grid-template-columns:auto minmax(0,1fr) auto; align-items:center;
  gap:clamp(1rem,2.2vw,1.9rem);
  padding:clamp(1.6rem,3.5vw,2.75rem) clamp(1rem,2.5vw,2rem);
  border-top:1.5px solid var(--black);
  position:relative; overflow:hidden; isolation:isolate;
  transition:color .45s var(--ease);
}
.door:last-of-type{border-bottom:1.5px solid var(--black)}
.door::before{
  content:""; position:absolute; inset:0; z-index:-1;
  background:linear-gradient(90deg, rgba(35,31,32,.95) 0%, rgba(35,31,32,.84) 50%, rgba(35,31,32,.55) 100%);
  transform:scaleY(0); transform-origin:bottom; transition:transform .5s var(--ease);
}
/* on hover the door goes to air: the picture comes up and the bug appears */
.door::after{
  content:""; position:absolute; top:clamp(1rem,2vw,1.5rem); right:clamp(1rem,2vw,1.5rem);
  width:22px; height:22px; background:#fff; opacity:0;
  -webkit-mask:var(--mark) center/contain no-repeat; mask:var(--mark) center/contain no-repeat;
  transition:opacity .4s .1s;
}
.door:hover,.door:focus-visible{color:#fff}
.door:hover::before,.door:focus-visible::before{transform:none}
.door:hover::after,.door:focus-visible::after{opacity:.75}
.door__img{
  position:absolute; inset:0; z-index:-2; width:100%; height:100%;
  object-fit:cover; opacity:0; pointer-events:none;
  filter:grayscale(1) brightness(.62); transform:scale(1.06);
  transition:opacity .5s var(--ease), transform .8s var(--ease);
}
.door:hover .door__img,.door:focus-visible .door__img{opacity:1; transform:none}
@media (hover:none){ .door__img{display:none} }
.door__title{
  display:block; font-family:var(--f-display); font-stretch:var(--display-width); font-weight:800;
  font-size:clamp(1.45rem,3.4vw,2.6rem); letter-spacing:-.03em; line-height:1.06;
}
.door__desc{display:block; margin-top:.8rem; max-width:44rem; font-size:1rem; line-height:1.5; color:var(--ink-2); transition:color .45s}
.door:hover .door__desc,.door:focus-visible .door__desc{color:var(--on-black-2)}
.door__tags{display:flex; flex-wrap:wrap; row-gap:.4rem; margin-top:1.1rem}
.door__tags em{
  font-style:normal; font-family:var(--f-head); font-weight:600; font-size:.72rem;
  letter-spacing:.12em; text-transform:uppercase; color:var(--ink-3);
  padding:0 .8rem; border-left:1px solid var(--line-2); transition:color .45s, border-color .45s;
}
.door__tags em:first-child{padding-left:0; border-left:0}
.door:hover .door__tags em,.door:focus-visible .door__tags em{color:var(--on-black); border-color:rgba(255,255,255,.3)}
/* each door is a bus on the router, lettered the way the services rundown letters its blocks */
.door .door__bus{align-self:start; font-size:clamp(.95rem,1.6vw,1.5rem); padding:.38rem .7rem; transition:text-shadow .3s}
.door:hover .door__bus,.door:focus-visible .door__bus{text-shadow:0 0 9px rgba(245,154,98,.85)}
/* a drawn arrow, not a glyph */
.door__arrow{position:relative; width:clamp(1.8rem,3vw,2.6rem); height:2px; background:currentColor; transition:transform .45s var(--ease), color .3s}
.door__arrow::after{content:""; position:absolute; right:1px; top:50%; width:11px; height:11px; border-top:2px solid; border-right:2px solid; transform:translateY(-50%) rotate(45deg)}
.door:hover .door__arrow,.door:focus-visible .door__arrow{transform:translateX(8px); color:var(--accent)}
@media (max-width:700px){
  .door{grid-template-columns:auto minmax(0,1fr); column-gap:.9rem; position:relative}
  .door__body{padding-right:2.4rem}
  .door__arrow{position:absolute; top:clamp(1.9rem,6vw,2.4rem); right:0; width:1.6rem}
  /* legends wrap on a phone, so they part with space rather than rules that would start a line */
  .door__tags{column-gap:1.1rem}
  .door__tags em{padding:0; border-left:0}
}
@media (prefers-reduced-motion:reduce){ .door__img{transition:opacity .01s; transform:none} .door__arrow{transition:none} }

/* =====================================================================
   MONITORS — the picture frame of the whole site. A bezel, a screen, the
   station bug in the corner, and a UMD strip that names the source.
   ===================================================================== */
.mon{position:relative; margin:0; padding:clamp(5px,.6vw,9px); background:var(--bezel); border-radius:3px; box-shadow:0 0 0 1px #000, inset 0 1px 0 rgba(255,255,255,.06); transition:box-shadow .3s}
.mon__screen{position:relative; aspect-ratio:16/9; overflow:hidden; background:var(--screen); border-radius:1px; isolation:isolate}
.mon--portrait .mon__screen{aspect-ratio:9/16}
.mon--web .mon__screen{aspect-ratio:16/10}
.mon__screen > img:not(.mon__bug),.mon__screen > video,.mon__screen > picture,.mon__screen > picture img{position:absolute; inset:0; width:100%; height:100%; object-fit:cover}
/* a Vimeo source streams over its own still and fades up only once frames are moving; clicks fall through to the link */
.mon__screen > iframe{position:absolute; inset:0; width:100%; height:100%; border:0; pointer-events:none; opacity:0; transition:opacity .6s}
.mon__screen > iframe.is-on{opacity:1}
.mon--web .mon__screen > img:not(.mon__bug){object-position:top}
.mon--pillar .mon__screen > img:not(.mon__bug){object-fit:contain}
/* a vertical clip on a 16:9 monitor is pillarboxed over a blurred fill of its own frame, as a program monitor shows it */
.mon__screen > img.mon__fill{display:none}
.mon--pillar .mon__screen > img.mon__fill{display:block; object-fit:cover; filter:blur(18px) brightness(.42) saturate(.8); transform:scale(1.15)}
.mon__screen::after{content:""; position:absolute; inset:0; z-index:3; pointer-events:none;
  background:linear-gradient(155deg,rgba(255,255,255,.07) 0%,rgba(255,255,255,0) 36%), radial-gradient(125% 95% at 50% 50%,transparent 62%,rgba(0,0,0,.3) 100%)}
.mon__bug{position:absolute; z-index:2; top:6%; right:4.5%; width:clamp(13px,6.5%,28px); height:auto; opacity:.72; pointer-events:none; filter:drop-shadow(0 1px 2px rgba(0,0,0,.45))}
.mon--portrait .mon__bug{width:clamp(13px,10%,26px); top:4%}
.mon__safe{position:absolute; z-index:2; inset:8% 6%; pointer-events:none; opacity:0; transition:opacity .35s;
  --c:rgba(255,255,255,.75); --l:14px;
  background:
    linear-gradient(var(--c),var(--c)) top left/var(--l) 1px no-repeat, linear-gradient(var(--c),var(--c)) top left/1px var(--l) no-repeat,
    linear-gradient(var(--c),var(--c)) top right/var(--l) 1px no-repeat, linear-gradient(var(--c),var(--c)) top right/1px var(--l) no-repeat,
    linear-gradient(var(--c),var(--c)) bottom left/var(--l) 1px no-repeat, linear-gradient(var(--c),var(--c)) bottom left/1px var(--l) no-repeat,
    linear-gradient(var(--c),var(--c)) bottom right/var(--l) 1px no-repeat, linear-gradient(var(--c),var(--c)) bottom right/1px var(--l) no-repeat}
.mon--pgm .mon__safe,.mon--hero .mon__safe{opacity:.32}
.umd{display:flex; align-items:center; gap:.55rem; margin-top:clamp(5px,.6vw,8px); padding:.36rem .55rem; background:var(--umd); border:1px solid #000; border-radius:1px;
  font-family:var(--f-mono); font-size:.6875rem; font-weight:600; letter-spacing:.14em; text-transform:uppercase; color:var(--umd-ink); box-shadow:inset 0 1px 3px rgba(0,0,0,.8)}
.umd__l{flex:1; min-width:0; overflow:hidden; text-overflow:ellipsis; white-space:nowrap}
.umd__tc{color:var(--lcd); letter-spacing:.06em; font-variant-numeric:tabular-nums; white-space:nowrap}
.umd__tc:empty{display:none}
.tally{width:8px; height:8px; flex:none; border-radius:1px; background:#3a1d12; box-shadow:inset 0 1px 1px rgba(0,0,0,.6); transition:background .2s, box-shadow .2s}
.tally--on,.mon.is-live .tally{background:var(--accent); box-shadow:0 0 7px rgba(247,126,45,.85)}
.lcd{
  display:inline-flex; align-items:center; min-height:44px; padding:.5rem .85rem;
  font-family:var(--f-mono); font-size:.8rem; font-weight:600; letter-spacing:.1em; text-transform:uppercase;
  color:var(--lcd); background:var(--lcd-bg); border:1px solid #000; border-radius:2px;
  box-shadow:inset 0 2px 6px rgba(0,0,0,.85), inset 0 0 0 1px rgba(245,154,98,.06);
  text-shadow:0 0 6px rgba(245,154,98,.45); font-variant-numeric:tabular-nums;
}
.lcd--n{min-width:3.4ch; min-height:0; justify-content:center; padding:.3rem .55rem; font-size:1rem}

/* a monitor that links to a case: the tally lights when you point at it */
.feed{display:block; color:inherit}
.feed:hover .mon,.feed:focus-visible .mon{box-shadow:0 0 0 1px var(--accent), inset 0 1px 0 rgba(255,255,255,.06)}
.feed:hover .tally,.feed:focus-visible .tally{background:var(--accent); box-shadow:0 0 7px rgba(247,126,45,.85)}
.feed:hover .mon__screen > img:not(.mon__bug){transform:scale(1.03)}
.mon__screen > img:not(.mon__bug){transition:transform .6s var(--ease)}
.feed:focus-visible{outline:none}
.feed:focus-visible .mon{outline:2px solid var(--ink); outline-offset:3px}
.feed__name{display:block; margin-top:.85rem; font-family:var(--f-display); font-stretch:var(--display-width); font-weight:800; font-size:clamp(1rem,1.5vw,1.25rem); letter-spacing:-.015em; line-height:1.12}
.feed__what{display:block; margin-top:.3rem; font-size:.9rem; line-height:1.45; color:var(--ink-2)}

/* ---------- the home multiviewer: PGM big, six sources beside it ---------- */
.work{padding:var(--sec-y) 0; background:var(--paper-3)}
.work .sec-sub,.work .xref,.slateboard .xref{color:var(--ink-2)}
.wall{list-style:none; padding:0; margin:0; display:grid; grid-template-columns:repeat(5,minmax(0,1fr)); gap:clamp(.7rem,1.3vw,1.1rem)}
.wall > li{min-width:0}
.wall__pgm{grid-column:1 / 3; grid-row:1 / 3}
.wall__pgm .feed{height:100%; display:flex; flex-direction:column}
.wall__pgm .mon{flex:1; display:flex; flex-direction:column}
.wall__pgm .mon__screen{flex:1; aspect-ratio:auto; min-height:220px}
.wall .umd{font-size:.6rem}
.wall__more{margin-top:clamp(2rem,4vw,3rem); display:flex; flex-wrap:wrap; align-items:center; gap:1rem 1.5rem}
.wall__more p{color:var(--ink-2); font-size:.95rem; max-width:52ch}
@media (max-width:1200px){
  .wall{grid-template-columns:repeat(3,minmax(0,1fr))}
  .wall__pgm{grid-column:1 / -1; grid-row:auto}
  .wall__pgm .mon__screen{aspect-ratio:16/9}
}
@media (max-width:1000px){ .wall{grid-template-columns:repeat(2,minmax(0,1fr))} }
@media (max-width:520px){
  .wall .umd__tc{display:none}
  .wall .umd__x{display:none}
  .wall .feed__name{margin-top:.6rem; font-size:.95rem}
  .wall .feed__what{font-size:.8rem}
}

/* ---------- stills strip: a row of monitors between sections ---------- */
.fstrip{padding:clamp(2.5rem,5vw,4rem) 0; background:var(--paper-3); border-block:1px solid var(--line)}
.fstrip .wrap{display:grid; grid-template-columns:repeat(auto-fit,minmax(min(100%,220px),1fr)); gap:clamp(.7rem,1.3vw,1.1rem)}
.fstrip figure{margin:0; padding:clamp(5px,.6vw,8px); background:var(--bezel); border-radius:3px; box-shadow:0 0 0 1px #000}
.fstrip figure a{position:relative; display:block; color:inherit}
.fstrip figure img{width:100%; height:auto; aspect-ratio:16/9; object-fit:cover; transition:filter .3s}
.fstrip figure.is-web img,.fstrip figure.is-top img{object-position:top}
.fstrip figcaption .s{display:none}
@media (max-width:600px){
  .fstrip .wrap{grid-template-columns:repeat(2,minmax(0,1fr)); gap:.6rem}
  .fstrip figure:last-child:nth-child(odd){grid-column:1 / -1}
  .fstrip figcaption{font-size:.6875rem; letter-spacing:.06em}
  .fstrip figcaption .l{display:none}
  .fstrip figcaption .s{display:inline}
}
.fstrip figure a::before{content:""; position:absolute; z-index:2; top:5%; right:4%; width:clamp(12px,6%,20px); aspect-ratio:1; background:#fff; opacity:.72; -webkit-mask:var(--mark) center/contain no-repeat; mask:var(--mark) center/contain no-repeat; pointer-events:none}
.fstrip figcaption{display:flex; align-items:center; gap:.5rem; margin-top:clamp(5px,.6vw,7px); padding:.34rem .5rem; background:var(--umd); border:1px solid #000;
  font-family:var(--f-mono); font-size:.6875rem; font-weight:600; letter-spacing:.14em; text-transform:uppercase; color:var(--umd-ink); white-space:nowrap; overflow:hidden; text-overflow:ellipsis}
.fstrip figcaption::before{content:""; flex:none; width:7px; height:7px; background:#3a1d12; transition:background .2s, box-shadow .2s}
.fstrip figure a:hover img{filter:brightness(1.1)}
.fstrip figure a:hover figcaption::before,.fstrip figure a:focus-visible figcaption::before{background:var(--accent); box-shadow:0 0 7px rgba(247,126,45,.85)}
/* the ring goes round the whole monitor: drawn on the link, it would sit on the black bezel and vanish */
.fstrip figure a:focus-visible{outline:none}
.fstrip figure:has(a:focus-visible){outline:2px solid var(--ink); outline-offset:3px}
.fstrip figcaption span{min-width:0; overflow:hidden; text-overflow:ellipsis}
/* a strip never splits three-and-one: four frames sit two by two until all four have room for a full label, three stay on one row */
@media (min-width:601px){ .fstrip .wrap:has(> figure:nth-child(3):last-child){grid-template-columns:repeat(3,minmax(0,1fr))} }
@media (min-width:601px) and (max-width:1100px){ .fstrip .wrap:has(> figure:nth-child(4):last-child){grid-template-columns:repeat(2,minmax(0,1fr))} }
@media (min-width:1101px){ .fstrip .wrap:has(> figure:nth-child(4):last-child){grid-template-columns:repeat(4,minmax(0,1fr))} }
/* a frame too narrow for the client and the shot falls back to the short label, the same one a phone shows */
.fstrip figure{container-type:inline-size}
@container (max-width:210px){ .fstrip figcaption .l{display:none} .fstrip figcaption .s{display:inline} }

/* ---------- service sections ---------- */
.svc{padding:var(--sec-y) 0; background:var(--paper)}
.svc__grid{display:grid; grid-template-columns:minmax(0,5fr) minmax(0,7fr); gap:clamp(2rem,5vw,5rem)}
.svc__title{
  font-family:var(--f-display); font-stretch:var(--display-width); font-weight:800;
  font-size:clamp(1.65rem,3vw,2.5rem); letter-spacing:-.03em; line-height:1.06; text-wrap:balance;
}
.svc__lead{font-size:1.15rem; line-height:1.6; color:var(--ink-2); max-width:56ch; text-wrap:pretty}
.svc__lead + .svc__lead{margin-top:1.25rem}
@media (max-width:900px){ .svc__grid{grid-template-columns:1fr} }
.svc--black{background:var(--black); color:var(--on-black)}
.svc--black .svc__lead,.svc--black .sec-sub{color:var(--on-black-2)}

/* the rundown: what we do, listed the way a gallery screen shows the running order.
   Page numbers run in blocks, A01 then B01, the way a rundown numbers its segments */
.rd{margin-top:2.5rem; container-type:inline-size}
.rd .mon__screen{aspect-ratio:auto}
.rd .mon__screen::after{background:linear-gradient(155deg,rgba(255,255,255,.06) 0%,rgba(255,255,255,0) 34%)}
.rd__head,.rd__list > li{display:grid; grid-template-columns:3.2rem minmax(0,13rem) minmax(0,1fr); column-gap:clamp(1rem,2vw,1.5rem); padding-inline:clamp(.9rem,2.2vw,1.5rem)}
.rd__head{position:relative; align-items:center; padding-block:.6rem; padding-right:calc(clamp(.9rem,2.2vw,1.5rem) + 22px); background:var(--umd); border-bottom:1px solid #000;
  font-family:var(--f-mono); font-size:.6875rem; font-weight:600; letter-spacing:.2em; text-transform:uppercase; color:#8E898A}
.rd__head::after{content:""; position:absolute; right:clamp(.9rem,2.2vw,1.5rem); top:50%; width:14px; height:14px; margin-top:-7px; background:var(--on-black); opacity:.72; -webkit-mask:var(--mark) center/contain no-repeat; mask:var(--mark) center/contain no-repeat}
.rd__list{list-style:none; margin:0; padding:0}
.rd__list > li{align-items:baseline; row-gap:.3rem; padding-block:1.05rem; border-top:1px solid #1E1B1C}
.rd__list > li:first-child{border-top:0}
.rd__pg{font-family:var(--f-mono); font-size:.8125rem; font-weight:600; letter-spacing:.08em; color:var(--lcd); font-variant-numeric:tabular-nums; text-shadow:0 0 6px rgba(245,154,98,.35)}
.rd__slug{font-family:var(--f-head); font-weight:700; font-size:1rem; line-height:1.35; color:var(--on-black)}
.rd__note{font-size:.95rem; line-height:1.5; color:var(--on-black-2); text-wrap:pretty}
/* on a narrow monitor the notes drop under the slug, as a rundown does in its compact view */
@container (max-width:540px){
  .rd__head,.rd__list > li{grid-template-columns:2.6rem minmax(0,1fr)}
  .rd__head span:nth-child(3),.rd__u{display:none}
  .rd__note{grid-column:2}
}

/* detail-page keys under a service block */
.svc__more{margin-top:clamp(2rem,4vw,2.75rem); display:flex; flex-wrap:wrap; gap:.7rem; align-items:center}
.svc__more-t{width:100%; font-size:.9rem; color:var(--ink-3); margin-bottom:.1rem}
.svc--black .svc__more-t{color:var(--on-black-2)}
.svc__more a{
  --led:var(--led-off);
  display:inline-flex; align-items:center; gap:.6rem; min-height:44px; padding:.6rem 1.1rem .6rem .9rem;
  font-family:var(--f-head); font-weight:700; font-size:.9rem; color:var(--ink); background:var(--paper);
  border:1.5px solid var(--black); border-bottom-width:3px; border-radius:2px; transition:background .2s;
}
.svc__more a::before{content:""; width:7px; height:7px; background:var(--led)}
.svc__more a:hover,.svc__more a:focus-visible{--led:var(--accent); background:var(--paper-2)}
.svc__more a:hover::before,.svc__more a:focus-visible::before{box-shadow:var(--glow)}
.svc--black .svc__more a{--led:#4A4748; color:var(--on-black); background:transparent; border-color:rgba(255,255,255,.5)}
.svc--black .svc__more a:hover{background:rgba(255,255,255,.06); --led:var(--accent)}

/* ---------- studio story ---------- */
.studio{padding:var(--sec-y) 0; background:var(--paper)}
.studio__grid{display:grid; grid-template-columns:minmax(0,5fr) minmax(0,7fr); gap:clamp(2rem,5vw,5rem)}
.studio__body p{font-size:1.15rem; line-height:1.6; color:var(--ink-2); max-width:40rem; text-wrap:pretty}
.studio__body p+p{margin-top:1.25rem}
@media (max-width:900px){ .studio__grid{grid-template-columns:1fr} }

/* ---------- steps: a rundown, each segment numbered in an LCD window ---------- */
.steps{list-style:none; padding:0; margin-top:clamp(2rem,4vw,3rem); border-top:1.5px solid var(--black); counter-reset:seg}
.step{display:grid; grid-template-columns:auto minmax(0,13rem) minmax(0,1fr); gap:.4rem clamp(1rem,2.5vw,2rem); align-items:baseline; padding:1.15rem 0; border-bottom:1px solid var(--line-2)}
.step__n{align-self:center; display:inline-flex; justify-content:center; min-width:3.2ch; padding:.28rem .5rem;
  font-family:var(--f-mono); font-size:.9rem; font-weight:600; font-variant-numeric:tabular-nums; color:var(--lcd); background:var(--lcd-bg); border:1px solid #000; border-radius:2px; box-shadow:inset 0 2px 5px rgba(0,0,0,.85)}
.step__t{font-family:var(--f-head); font-weight:700; font-size:1.08rem}
.step__d{color:var(--ink-2); font-size:.95rem; line-height:1.55}
.svc--black .steps{border-color:rgba(255,255,255,.55)}
.svc--black .step{border-color:rgba(255,255,255,.14)}
.svc--black .step__d{color:var(--on-black-2)}
@media (max-width:760px){
  .step{grid-template-columns:auto minmax(0,1fr)}
  .step__d{grid-column:2}
}

/* ---------- studio slate: the clapperboard, in place of a stats band ---------- */
.slateboard{padding:var(--sec-y) 0; background:var(--paper-3)}
.clap{max-width:980px; margin:0 auto; background:#1A1718; color:var(--on-black); border:1px solid #000; border-radius:3px; box-shadow:0 0 0 1px #000}
.clap__sticks{position:relative; height:clamp(34px,5vw,50px); border-bottom:3px solid #000;
  background:repeating-linear-gradient(-45deg,#F4F3F2 0 18px,#231F20 18px 36px)}
.clap__sticks::after{content:""; position:absolute; left:14px; top:50%; width:14px; height:14px; transform:translateY(-50%); border-radius:50%; background:#8E898A; box-shadow:inset 0 1px 2px rgba(0,0,0,.6), 0 0 0 2px #231F20}
.clap__grid{display:grid; grid-template-columns:repeat(3,minmax(0,1fr))}
.clap__cell{padding:clamp(1rem,2.2vw,1.6rem) clamp(1rem,2.2vw,1.75rem); border-right:1px solid rgba(255,255,255,.14); border-bottom:1px solid rgba(255,255,255,.14); min-width:0}
.clap__cell:nth-child(3n){border-right:0}
.clap__cell:nth-last-child(-n+3){border-bottom:0}
.clap__k{display:block; font-family:var(--f-mono); font-size:.6875rem; letter-spacing:.2em; text-transform:uppercase; color:var(--on-black-2)}
.clap__v{display:block; margin-top:.5rem; font-family:var(--f-display); font-stretch:var(--display-width); font-weight:800; font-size:clamp(1.15rem,2.4vw,1.85rem); letter-spacing:-.02em; line-height:1.1; font-variant-numeric:tabular-nums; overflow-wrap:anywhere}
.clap__v small{display:block; margin-top:.3rem; font-family:var(--f-body); font-stretch:normal; font-weight:500; font-size:.85rem; letter-spacing:0; color:var(--on-black-2)}
.clap__v a{text-decoration:underline; text-decoration-color:var(--accent); text-decoration-thickness:2px}
.clap__foot{display:flex; align-items:center; gap:.7rem; padding:.8rem clamp(1rem,2.2vw,1.75rem); border-top:1px solid rgba(255,255,255,.14); font-family:var(--f-mono); font-size:.6875rem; letter-spacing:.16em; text-transform:uppercase; color:var(--on-black-2)}
.clap__foot img{width:16px; height:16px; opacity:.8}
@media (max-width:640px){
  .clap__grid{grid-template-columns:repeat(2,minmax(0,1fr))}
  .clap__cell:nth-child(3n){border-right:1px solid rgba(255,255,255,.14)}
  .clap__cell:nth-child(2n){border-right:0}
  .clap__cell:nth-last-child(-n+3){border-bottom:1px solid rgba(255,255,255,.14)}
  .clap__cell:nth-last-child(-n+2){border-bottom:0}
}

/* ---------- enquiry status: the same slate, one take (status) ---------- */
.clap__ref{padding:clamp(1.25rem,2.6vw,2rem) clamp(1rem,2.2vw,1.75rem); border-bottom:1px solid rgba(255,255,255,.14)}
.clap__ref .clap__v{font-size:clamp(1.7rem,4.6vw,3.1rem); color:var(--lcd)}
.clap--status .clap__v{font-size:clamp(1.05rem,1.9vw,1.4rem)}
.clap--status .clap__ref .clap__v{font-size:clamp(1.7rem,4.6vw,3.1rem)}
.clap__stages{list-style:none; margin:0; padding:0; display:grid; grid-template-columns:repeat(4,minmax(0,1fr)); border-top:1px solid rgba(255,255,255,.14)}
.clap__stages li{display:flex; align-items:center; gap:.6rem; padding:.95rem clamp(1rem,2.2vw,1.75rem); border-right:1px solid rgba(255,255,255,.14); font-size:.88rem; color:rgba(244,243,242,.45)}
.clap__stages li:last-child{border-right:0}
.clap__stages li.is-on{color:var(--on-black)}
.clap__stages li.is-on .tally{background:var(--accent); box-shadow:0 0 7px rgba(247,126,45,.85)}
.clap__note{max-width:980px; margin-left:auto; margin-right:auto}
@media (max-width:640px){
  .clap--status .clap__grid{grid-template-columns:minmax(0,1fr)}
  .clap--status .clap__grid > .clap__cell{border-right:0; border-bottom:1px solid rgba(255,255,255,.14)}
  .clap--status .clap__grid > .clap__cell:last-child{border-bottom:0}
  .clap__stages{grid-template-columns:repeat(2,minmax(0,1fr))}
  .clap__stages li:nth-child(2n){border-right:0}
  .clap__stages li:nth-child(-n+2){border-bottom:1px solid rgba(255,255,255,.14)}
}

/* ---------- CTA footer (start, portal) ---------- */
.cta{background:var(--black); color:var(--on-black); padding:clamp(5rem,10vw,8.5rem) 0 2.5rem}
.cta__title{
  font-family:var(--f-display); font-stretch:var(--display-width); font-weight:900;
  font-size:clamp(2.5rem,7.6vw,6rem); line-height:.98; letter-spacing:-.035em;
  margin:0 0 2.5rem;
}
.cta__title .line{display:block}
.cta__note{max-width:34rem; color:var(--on-black-2); font-size:.98rem; line-height:1.6}
.cta__body{display:grid; grid-template-columns:minmax(0,1fr) minmax(0,720px); grid-template-rows:auto 1fr; grid-template-areas:"note form" "direct form"; gap:2rem clamp(2.5rem,6vw,6rem); align-items:start}
.cta__body > .cta__note{grid-area:note; max-width:26rem; font-size:1.05rem; color:var(--on-black)}
.cta__body > .intake{grid-area:form; margin-top:0}
.cta__direct{grid-area:direct; max-width:26rem; font-size:.9rem; line-height:1.45; border-top:1px solid rgba(255,255,255,.2)}
.cta__direct div{display:grid; grid-template-columns:5.75rem minmax(0,1fr); gap:.75rem; padding:.7rem 0; border-bottom:1px solid rgba(255,255,255,.1)}
.cta__direct dt{color:var(--on-black-2)}
.cta__direct dd{color:var(--on-black)}
.cta__direct a{text-decoration:underline; text-decoration-color:var(--accent); text-decoration-thickness:1.5px; text-underline-offset:.2em}
@media (max-width:1180px){
  .cta__body{grid-template-columns:minmax(0,1fr); grid-template-rows:none; grid-template-areas:"note" "form" "direct"}
  .cta__body > .intake{max-width:none}
}
.foot{
  margin-top:clamp(4rem,8vw,6.5rem); padding-top:2rem; border-top:1px solid rgba(255,255,255,.16);
  display:flex; align-items:center; gap:1.5rem 2.5rem; flex-wrap:wrap;
}

/* =====================================================================
   PREVIEW — the call to action. In a gallery the PVW monitor holds the
   next source before it goes to air, so this one holds the reader's
   project: a standby test card with a lower third naming it. Pointing at
   the armed key lights the tally and the readout goes from STBY to TAKE.
   ===================================================================== */
.pvw{padding:clamp(3.5rem,7vw,6rem) 0; background:var(--paper-2); border-block:1px solid var(--line)}
.pvw__in{display:grid; grid-template-columns:minmax(0,5fr) minmax(0,6fr); gap:clamp(2rem,5vw,5rem); align-items:center}
.pvw__mon{display:block; color:inherit}
/* greyscale bars, the castellation row, then the bottom row, as a line-up card is laid out */
.pvw__card{background:#141213; container-type:inline-size}
.pvw__card::before{content:""; position:absolute; inset:0 0 28% 0;
  background:linear-gradient(90deg,#F4F3F2 0 14.29%,#D6D3D2 0 28.57%,#A6A2A1 0 42.86%,#8E898A 0 57.14%,#6F6C6D 0 71.43%,#4A4748 0 85.71%,#231F20 0)}
.pvw__cast{position:absolute; left:0; right:0; top:72%; height:8%;
  background:linear-gradient(90deg,#231F20 0 14.29%,#141213 0 28.57%,#4A4748 0 42.86%,#141213 0 57.14%,#8E898A 0 71.43%,#141213 0 85.71%,#D6D3D2 0)}
.pvw__pluge{position:absolute; inset:80% 0 0 0;
  background:linear-gradient(90deg,#262223 0 18%,#F4F3F2 0 34%,#262223 0 52%,#0B0A0A 0 72%,#151314 0 78%,#0B0A0A 0 84%,#1D1A1B 0 90%,#262223 0)}
.pvw__super{position:absolute; z-index:2; left:5%; bottom:12%; display:flex; font-family:var(--f-head); line-height:1.15; pointer-events:none}
.pvw__super b{background:var(--black); color:#fff; padding:.42em .8em; font-weight:800; font-size:clamp(10px,5.2cqi,22px); letter-spacing:.01em}
.pvw__super span{display:flex; align-items:center; background:var(--paper); color:var(--ink); padding:.45em .85em; font-family:var(--f-mono); font-weight:600; font-size:clamp(8px,3.1cqi,13px); letter-spacing:.14em; text-transform:uppercase}
@container (max-width:260px){ .pvw__super span{display:none} }
.pvw__g{display:none}
.pvw:has(.pvw__keys .btn--accent:hover,.pvw__keys .btn--accent:focus-visible,.pvw__mon:hover) .mon{box-shadow:0 0 0 1px var(--accent), inset 0 1px 0 rgba(255,255,255,.06)}
.pvw:has(.pvw__keys .btn--accent:hover,.pvw__keys .btn--accent:focus-visible,.pvw__mon:hover) .tally{background:var(--accent); box-shadow:0 0 7px rgba(247,126,45,.85)}
.pvw:has(.pvw__keys .btn--accent:hover,.pvw__keys .btn--accent:focus-visible,.pvw__mon:hover) .pvw__s{display:none}
.pvw:has(.pvw__keys .btn--accent:hover,.pvw__keys .btn--accent:focus-visible,.pvw__mon:hover) .pvw__g{display:inline}
.pvw__t{font-family:var(--f-display); font-stretch:var(--display-width); font-weight:800; font-size:clamp(1.6rem,3.3vw,2.6rem); letter-spacing:-.03em; line-height:1.06; text-wrap:balance}
.pvw__d{margin-top:1rem; max-width:48ch; color:var(--ink-2); font-size:1.05rem; line-height:1.6; text-wrap:pretty}
.pvw__keys{margin-top:1.75rem; display:flex; flex-wrap:wrap; align-items:center; gap:.8rem 1rem}
.pvw--dark{background:var(--cr-desk,#1C1A1B); color:var(--on-black); border-color:rgba(255,255,255,.09)}
.pvw--dark .pvw__d{color:var(--on-black-2)}
@media (max-width:820px){ .pvw__in{grid-template-columns:minmax(0,1fr); gap:1.75rem} .pvw__mon{max-width:520px} }
/* a phone keeps the monitor beside the question, the way a PVW sits next to its label */
@media (max-width:600px){
  .pvw__in{grid-template-columns:minmax(0,1fr) minmax(0,1fr); grid-template-areas:"mon t" "d d" "keys keys"; gap:0 1rem}
  .pvw__body{display:contents}
  .pvw__mon{grid-area:mon; align-self:center}
  .pvw__t{grid-area:t; align-self:center; font-size:clamp(1.15rem,5.4vw,1.5rem)}
  .pvw__d{grid-area:d; margin-top:1.25rem}
  .pvw__keys{grid-area:keys; margin-top:1.4rem}
  .pvw__keys .btn{flex:1 1 auto; justify-content:center}
  .pvw .umd{gap:.4rem; padding:.3rem .4rem; font-size:.52rem; letter-spacing:.06em}
  .pvw .umd__tc{display:none}
  .pvw .tally{width:7px; height:7px}
}
@media (max-width:360px){ .pvw .umd{gap:.3rem; letter-spacing:.04em} }

/* a key row after a block of copy: the armed key and one line on what happens next */
.act{display:flex; flex-wrap:wrap; align-items:center; gap:.9rem 1.4rem}
* + .act{margin-top:clamp(1.75rem,3.5vw,2.5rem)}
.act__t{max-width:36ch; font-size:.92rem; line-height:1.5; color:var(--ink-3)}
.act__t a{color:var(--ink); font-weight:600; text-decoration:underline; text-decoration-color:var(--accent); text-decoration-thickness:1.5px}
.svc--black .act__t{color:var(--on-black-2)}
.svc--black .act__t a{color:var(--on-black)}

/* ---------- the observation plate (manifesto) ---------- */
.plate{position:relative; background:var(--space); color:var(--on-black); padding:clamp(6rem,13vw,10rem) 0; overflow:hidden; isolation:isolate}
.plate__stars{position:absolute; inset:0; z-index:0; width:100%; height:100%; opacity:.9}
.plate__comet{
  position:absolute; z-index:0; top:8%; right:-6%; width:56%; height:3px; border-radius:999px;
  background:linear-gradient(90deg, transparent, rgba(255,255,255,.16) 55%, rgba(255,255,255,.95));
  transform:rotate(-24deg); transform-origin:right center; filter:drop-shadow(0 0 8px rgba(255,255,255,.5));
}
.plate__comet::after{content:""; position:absolute; right:-7px; top:50%; transform:translateY(-50%); width:14px; height:14px; border-radius:50%; background:radial-gradient(circle, #fff 0%, rgba(255,255,255,.35) 55%, transparent 75%)}
.plate__inner{position:relative; z-index:1; max-width:1160px}
.plate__title{
  font-family:var(--f-display); font-stretch:var(--display-width); font-weight:900;
  font-size:clamp(1.9rem,6.2vw,5.1rem); line-height:1.02; letter-spacing:-.035em; margin:0 0 2.5rem;
}
.plate__title .p-line{display:block; will-change:transform}
.p-line--accent{color:transparent; -webkit-text-stroke:2px var(--on-black)}
.p-line--accent em,.plate .accent{color:var(--accent)}
.plate__body{max-width:44rem; display:grid; gap:1.1rem}
.plate__body p{color:rgba(244,243,242,.8); font-size:1.125rem; line-height:1.65; text-wrap:pretty}

/* sections sit flat and square; no stacked sheets */
.sheet{position:relative}

/* ---------- entry products: spec sheets ---------- */
.offers{padding:var(--sec-y) 0; background:var(--paper)}
.rate{list-style:none; padding:0; margin:0; border-top:1.5px solid var(--black)}
.rate__row{display:grid; grid-template-columns:minmax(0,1.3fr) minmax(0,1fr) 12rem; gap:1.1rem clamp(1.5rem,3.2vw,3.25rem); align-items:start; padding:clamp(1.5rem,2.6vw,2.1rem) 0; border-bottom:1px solid var(--line-2)}
.rate__name{font-family:var(--f-display); font-stretch:var(--display-width); font-weight:800; font-size:clamp(1.25rem,2vw,1.55rem); letter-spacing:-.025em; line-height:1.1}
.rate__d{margin-top:.65rem; max-width:54ch; color:var(--ink-2); font-size:.95rem; line-height:1.55; text-wrap:pretty}
.rate__spec{font-size:.9rem; line-height:1.4}
.rate__spec div{display:grid; grid-template-columns:6.5rem minmax(0,1fr); gap:.75rem; padding:.45rem 0; border-bottom:1px solid var(--line)}
.rate__spec div:first-child{padding-top:.1rem}
.rate__spec div:last-child{border-bottom:0}
.rate__spec dt{color:var(--ink-3)}
.rate__buy{display:flex; flex-direction:column; align-items:flex-end; gap:1rem}
.rate__from{font-size:.85rem; color:var(--ink-3); text-align:right}
.rate__from b{display:block; margin-top:.15rem; font-family:var(--f-display); font-stretch:var(--display-width); font-weight:800; font-size:clamp(1.55rem,2.5vw,2rem); letter-spacing:-.025em; line-height:1; color:var(--ink); font-variant-numeric:tabular-nums}
.rate__row--free .rate__from b{margin-top:0}

/* ---------- price table (pricing) ---------- */
.ptable{width:100%; margin-top:1.75rem; border-collapse:collapse; border-top:1.5px solid var(--black); font-size:.95rem; line-height:1.45}
.ptable th,.ptable td{padding:1.05rem 1.25rem 1.05rem 0; text-align:left; vertical-align:top; border-bottom:1px solid var(--line-2)}
.ptable thead th{padding-top:.65rem; padding-bottom:.65rem; font-family:var(--f-body); font-weight:500; font-size:.8rem; color:var(--ink-3)}
.ptable tbody th{font-family:var(--f-display); font-stretch:var(--display-width); font-weight:800; font-size:1.02rem; letter-spacing:-.02em; line-height:1.25; color:var(--ink); white-space:nowrap}
.ptable td{color:var(--ink-2)}
.ptable .ptable__p{padding-right:0; text-align:right; white-space:nowrap}
.ptable tbody .ptable__p{font-family:var(--f-display); font-stretch:var(--display-width); font-weight:800; font-size:1.2rem; letter-spacing:-.02em; line-height:1.15; color:var(--ink); font-variant-numeric:tabular-nums}
.ptable__note{margin-top:.75rem; font-size:.85rem; color:var(--ink-3)}
.ptable__note + .xref{margin-top:1.5rem}
@media (max-width:700px){
  .ptable,.ptable tbody{display:block}
  .ptable thead{position:absolute; width:1px; height:1px; overflow:hidden; clip:rect(0 0 0 0); white-space:nowrap}
  .ptable tr{display:grid; grid-template-columns:minmax(0,1fr) auto; gap:.45rem 1rem; padding:1.05rem 0; border-bottom:1px solid var(--line-2)}
  .ptable th,.ptable td{display:block; padding:0; border:0}
  .ptable tbody th{grid-column:1; grid-row:1; white-space:normal}
  .ptable tbody .ptable__p{grid-column:2; grid-row:1}
  .ptable tbody td:not(.ptable__p){grid-column:1 / -1}
  .ptable td[data-label]{font-size:.88rem; color:var(--ink-3)}
  .ptable td[data-label]::before{content:attr(data-label) ": "}
}

/* ---------- the Quick Observation: a rundown of seven items, answered on latching keys (snapshot) ---------- */
.qo{padding-bottom:var(--sec-y)}
.qo > form,.qo__result{max-width:1120px}
.qo__q{margin:0; padding:clamp(1.4rem,2.6vw,2rem) 0; border:0; border-top:1px solid var(--line-2); min-width:0}
.qo__q:first-child{border-top:1.5px solid var(--black)}
.qo__q::after{content:""; display:table; clear:both}
.qo__t{float:left; width:42%; padding:0 clamp(1.5rem,4vw,3.5rem) 0 0; font-family:var(--f-display); font-stretch:var(--display-width); font-weight:800; font-size:clamp(1.1rem,1.7vw,1.35rem); letter-spacing:-.02em; line-height:1.2; color:var(--ink); text-wrap:balance}
.qo__t span{display:flex; align-items:center; gap:.5rem; margin-bottom:.5rem; font-family:var(--f-body); font-stretch:normal; font-weight:600; font-size:.82rem; letter-spacing:0; color:var(--ink-3)}
.qo__q.is-missing .qo__t span{color:var(--ink)}
.qo__q.is-missing .qo__t span::before{content:""; flex:none; width:7px; height:7px; background:var(--accent); box-shadow:var(--glow)}
.qo__keys{margin-left:42%; display:grid; gap:.55rem}
.qo__key{position:relative; display:block; cursor:pointer}
.qo__key input{position:absolute; top:0; left:0; width:1px; height:1px; margin:0; opacity:0; pointer-events:none}
.qo__key span{display:flex; align-items:flex-start; gap:.75rem; min-height:48px; padding:.8rem 1rem .8rem .95rem; border:1.5px solid var(--black); border-bottom-width:4px; border-radius:2px; background:var(--paper); color:var(--ink-2); font-size:.95rem; line-height:1.4; transition:background .2s, color .2s, transform .08s, border-bottom-width .08s, margin .08s}
.qo__key span::before{content:""; flex:none; width:7px; height:7px; margin-top:.45em; background:var(--led-off); transition:background .15s, box-shadow .15s}
.qo__key:hover span{background:var(--paper-2); color:var(--ink)}
.qo__key:hover span::before{background:var(--accent)}
.qo__key input:focus-visible + span{outline:2px solid var(--accent); outline-offset:3px}
.qo__key input:checked + span{transform:translateY(2px); margin-bottom:2px; border-bottom-width:2px; background:var(--black); color:#fff}
.qo__key input:checked + span::before{background:var(--accent); box-shadow:var(--glow)}
.qo__actions{display:flex; flex-wrap:wrap; align-items:center; gap:1rem 1.5rem; padding-top:clamp(1.5rem,3vw,2rem); border-top:1.5px solid var(--black)}
.qo__hint{font-size:.9rem; color:var(--ink-3)}
.qo__err{display:none; width:100%; font-size:.95rem; font-weight:600; color:var(--ink)}
.qo__err.show{display:block}
.qo__result{margin-top:clamp(3rem,6vw,4.5rem); padding-top:clamp(2rem,4vw,3rem); border-top:1.5px solid var(--black); outline:0}
.qo__band{font-family:var(--f-display); font-stretch:var(--display-width); font-weight:800; font-size:clamp(1.8rem,4.4vw,3.2rem); letter-spacing:-.03em; line-height:1.05; text-wrap:balance}
.qo__read{margin-top:1.1rem; max-width:62ch; font-size:1.05rem; line-height:1.65; color:var(--ink-2); text-wrap:pretty}
.qo__guides{list-style:none; margin:1.25rem 0 0; padding:0; display:grid; gap:.65rem}
.qo__guides .xref{margin-top:0}
.qo__fine{margin-top:clamp(1.75rem,3vw,2.25rem); max-width:62ch; font-size:.88rem; line-height:1.55; color:var(--ink-3)}
.qo__fine a{color:var(--ink); text-decoration:underline; text-decoration-color:var(--accent)}
/* the result as a meter bridge: one channel per answer, six segments each */
.meter{list-style:none; margin:2rem 0 0; padding:0; max-width:44rem; border-top:1px solid var(--line-2)}
.meter li{display:grid; grid-template-columns:minmax(0,1fr) auto 5.5rem; align-items:center; gap:1rem; padding:.75rem 0; border-bottom:1px solid var(--line-2)}
.meter__k{font-family:var(--f-head); font-weight:700; font-size:.98rem}
.meter__leds{display:flex; gap:3px}
.meter__leds i{display:block; width:12px; height:10px; background:var(--led-off)}
.meter__leds i.on{background:var(--accent); box-shadow:0 0 6px rgba(247,126,45,.55)}
.meter__v{font-size:.9rem; color:var(--ink-3); text-align:right}
.meter li.is-first .meter__v{color:var(--ink); font-weight:600}
@media (max-width:800px){
  .qo__t{width:100%; padding:0 0 1rem}
  .qo__keys{margin-left:0; clear:both}
}
@media (max-width:360px){
  .meter li{grid-template-columns:minmax(0,1fr) auto; gap:.35rem 1rem}
  .meter__v{grid-column:1 / -1; grid-row:2; text-align:left}
}
@media (max-width:1100px){
  .rate__row{grid-template-columns:minmax(0,1fr) 11rem}
  .rate__spec{grid-column:1 / -1; grid-row:2}
  .rate__buy{grid-column:2; grid-row:1}
}
@media (max-width:560px){
  .rate__row{grid-template-columns:minmax(0,1fr)}
  .rate__buy{grid-column:1; grid-row:3; flex-direction:row; align-items:center; justify-content:space-between}
  .rate__from{text-align:left}
}
.offer-grid{display:grid; gap:clamp(1rem,2vw,1.5rem); grid-template-columns:repeat(2,minmax(0,1fr))}
@media (max-width:760px){ .offer-grid{grid-template-columns:1fr} }
.offer{border:1.5px solid var(--black); border-radius:2px; background:var(--paper); padding:clamp(1.4rem,2.5vw,1.9rem); display:flex; flex-direction:column; gap:1rem}
.offer h3{font-family:var(--f-display); font-stretch:var(--display-width); font-weight:800; font-size:clamp(1.25rem,2vw,1.5rem); letter-spacing:-.025em; line-height:1.1}
.offer p{font-size:.95rem; color:var(--ink-2); line-height:1.55; flex:1}
.offer .btn{align-self:flex-start}

/* ---------- intake (footer form) ---------- */
.intake{margin-top:2.5rem; max-width:720px}
.intake__grid{display:grid; gap:.9rem; grid-template-columns:1fr 1fr}
.intake__grid .wide{grid-column:1 / -1}
.intake label{display:block; font-family:var(--f-head); font-weight:600; font-size:.72rem; letter-spacing:.08em; text-transform:uppercase; color:var(--on-black-2); margin-bottom:.4rem}
.intake label .opt{text-transform:none; letter-spacing:0; opacity:.75}
.intake input,.intake select,.intake textarea{
  width:100%; min-height:48px; background:#171415; border:1px solid rgba(255,255,255,.28); border-bottom-width:2px;
  border-radius:2px; color:var(--on-black); font-family:var(--f-body); font-size:1rem;
  padding:.7rem .85rem; outline:none; transition:border-color .2s, background .2s;
}
.intake input:focus,.intake select:focus,.intake textarea:focus{border-color:var(--accent); background:#1C191A; box-shadow:0 0 0 1px var(--accent)}
.intake select{appearance:none; -webkit-appearance:none; padding-right:2.4rem;
  background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='10' height='6' viewBox='0 0 10 6'%3E%3Cpath d='M1 1l4 4 4-4' fill='none' stroke='%23F4F3F2' stroke-width='1.6'/%3E%3C/svg%3E");
  background-repeat:no-repeat; background-position:right .9rem center; background-size:10px 6px}
.intake select option{color:var(--ink); background:#fff}
.intake textarea{min-height:120px; resize:vertical}
.intake__actions{display:flex; align-items:center; gap:1.25rem; margin-top:1.25rem; flex-wrap:wrap}
.intake__alt{flex-basis:100%; font-size:.85rem; line-height:1.55; color:var(--on-black-2)}
/* the send key's readout: the tally stays dark until the message has actually gone */
.intake__state{align-self:stretch; display:inline-flex; align-items:center; gap:.55rem; padding:.36rem .8rem; background:var(--umd); border:1px solid #000; border-radius:1px; box-shadow:inset 0 1px 3px rgba(0,0,0,.8);
  font-family:var(--f-mono); font-size:.6875rem; font-weight:600; letter-spacing:.14em; text-transform:uppercase; color:var(--umd-ink); font-variant-numeric:tabular-nums}
.intake__state.is-sent .tally{background:var(--accent); box-shadow:0 0 7px rgba(247,126,45,.85)}
@media (prefers-reduced-motion:no-preference){ .intake__state.is-sending .tally{animation:tally-blink .9s steps(2,jump-none) infinite} }
@keyframes tally-blink{to{background:var(--accent)}}
.intake__alt a{padding-block:.3rem; text-decoration:underline; text-decoration-color:var(--accent)}
.intake .hp{position:absolute; left:-9999px; width:1px; height:1px; overflow:hidden}
.obs-stub{
  display:none; position:relative; margin-top:1.5rem; border:1px solid rgba(255,255,255,.28); border-radius:2px;
  background:#121011; padding:1rem 1.25rem 1rem 2.5rem;
  font-size:.95rem; line-height:1.6; color:var(--on-black-2);
}
.obs-stub::before{content:""; position:absolute; left:1.15rem; top:1.55rem; width:7px; height:7px; background:var(--accent); box-shadow:var(--glow)}
.obs-stub.show,.obs-stub--static:target{display:block}
.obs-stub b{color:var(--on-black); font-weight:600}
.obs-stub .ref{font-family:var(--f-mono); font-size:1rem; font-weight:700; color:var(--lcd); letter-spacing:.04em}
.obs-stub a{color:var(--on-black); text-decoration:underline; text-decoration-color:var(--accent)}
.intake__err{display:none; margin-top:1rem; font-size:.9rem; color:var(--on-black)}
.intake__err.show{display:block}
.intake__err a{text-decoration:underline; text-decoration-color:var(--accent)}
@media (max-width:640px){ .intake__grid{grid-template-columns:1fr} }

/* skip link */
.skip{position:fixed; left:-9999px; top:0; z-index:1000; background:var(--black); color:#fff; font-family:var(--f-head); font-weight:700; padding:.75rem 1.2rem}
.skip:focus{left:0}

/* ---------- FAQ: ruled rows; a tally lights on the open question ---------- */
.faq{padding:var(--sec-y) 0; background:var(--paper)}
.reviews + .faq{border-top:1px solid var(--line)}
.faq-grid{display:grid; grid-template-columns:1fr 1fr; gap:0 clamp(1.5rem,4vw,3.5rem); align-items:start}
.faq details{border-top:1px solid var(--line-2); padding:0}
.faq-grid > details:nth-last-child(-n+2),.faq-grid > details:last-child{border-bottom:1px solid var(--line-2)}
.faq summary{
  display:grid; grid-template-columns:auto minmax(0,1fr) auto; align-items:center; gap:.9rem;
  padding:1.15rem 0; cursor:pointer; list-style:none;
  font-family:var(--f-head); font-weight:700; font-size:1.02rem; line-height:1.35;
}
.faq summary::-webkit-details-marker{display:none}
.faq summary::before{content:""; width:8px; height:8px; background:var(--led-off); transition:background .2s, box-shadow .2s}
.faq summary::after{content:""; width:14px; height:14px; transition:transform .3s var(--ease);
  background:linear-gradient(currentColor,currentColor) center/14px 2px no-repeat, linear-gradient(currentColor,currentColor) center/2px 14px no-repeat}
.faq details[open] summary::before{background:var(--accent); box-shadow:var(--glow)}
.faq details[open] summary::after{transform:rotate(45deg)}
.faq summary:hover::before{background:var(--ink-3)}
.faq details p{margin:0 0 1.3rem calc(8px + .9rem); max-width:62ch; color:var(--ink-2); line-height:1.6; font-size:.97rem}
.faq details a{text-decoration:underline; text-decoration-color:var(--accent); text-decoration-thickness:1.5px}
@media (max-width:760px){
  .faq-grid{grid-template-columns:1fr}
  .faq-grid > details:nth-last-child(2){border-bottom:0}
}

/* ---------- mobile CTA strap, docked to the bottom edge ---------- */
.mcta{
  position:fixed; left:0; right:0; bottom:0; z-index:var(--z-mcta);
  display:none; align-items:center; justify-content:center; gap:.7rem;
  background:var(--black); color:#fff; border-top:1px solid #000;
  font-family:var(--f-head); font-weight:700; font-size:.95rem;
  min-height:52px; padding:.85rem 1rem calc(.85rem + env(safe-area-inset-bottom, 0px));
  transform:translateY(110%); transition:transform .4s var(--ease);
}
.mcta::before{content:""; width:7px; height:7px; background:var(--accent); box-shadow:var(--glow)}
.mcta.show{transform:none}
.cr .mcta{border-top-color:rgba(255,255,255,.16)}
@media (max-width:860px){ .mcta{display:flex} }

/* ---------- The Observer (chat console) ---------- */
.obs-launch{
  position:fixed; right:1.1rem; bottom:1.1rem; z-index:400;
  display:flex; align-items:center; gap:.6rem; min-height:44px;
  background:var(--space); color:var(--on-black);
  border:1px solid rgba(255,255,255,.3); border-bottom:3px solid #000; border-radius:2px;
  font-family:var(--f-mono); font-size:.72rem; letter-spacing:.08em; text-transform:uppercase;
  padding:.7rem 1rem; cursor:pointer;
}
.obs-launch:hover{background:#17171A}
.obs-launch .dot{width:7px; height:7px; background:var(--accent); box-shadow:var(--glow)}
@media (max-width:860px){ .obs-launch{bottom:calc(64px + env(safe-area-inset-bottom, 0px)); right:.75rem} }
.obs-panel{
  position:fixed; right:1.1rem; bottom:1.1rem; z-index:410;
  width:min(400px, calc(100vw - 1.5rem)); height:min(560px, calc(100dvh - 2rem));
  background:var(--space); color:var(--on-black);
  border:1px solid rgba(255,255,255,.25); border-radius:3px;
  display:none; flex-direction:column; overflow:hidden;
  box-shadow:0 0 0 1px #000;
}
.obs-panel.open{display:flex}
.obs-head{display:flex; align-items:center; gap:.7rem; padding:.85rem 1rem; border-bottom:1px solid rgba(255,255,255,.16); background:var(--umd);
  font-family:var(--f-mono); font-size:.7rem; letter-spacing:.1em; text-transform:uppercase; color:var(--on-black-2)}
.obs-head .dot{width:7px; height:7px; background:var(--accent); box-shadow:var(--glow)}
.obs-head b{color:var(--on-black); font-weight:600}
.obs-close{margin-left:auto; min-width:40px; min-height:40px; background:none; border:0; color:var(--on-black-2); font-size:1.3rem; cursor:pointer; line-height:1}
.obs-close:hover{color:#fff}
.obs-msgs{flex:1; overflow-y:auto; padding:1.1rem 1rem; display:flex; flex-direction:column; gap:.9rem}
.obs-m{max-width:92%; font-size:.92rem; line-height:1.55; white-space:pre-wrap; overflow-wrap:break-word}
.obs-m.bot{align-self:flex-start; padding:.1rem 0 .1rem .85rem; border-left:2px solid rgba(255,255,255,.28); color:var(--on-black)}
.obs-m.user{align-self:flex-end; padding:.6rem .85rem; background:#242122; border:1px solid rgba(255,255,255,.14); border-radius:2px; color:#fff}
.obs-m.bot a{color:var(--on-black); text-decoration:underline; text-decoration-color:var(--accent)}
.obs-m .obsref{font-family:var(--f-mono); color:var(--lcd); font-weight:700}
.obs-typing{align-self:flex-start; display:flex; gap:5px; padding:.5rem 0 .5rem .85rem; border-left:2px solid rgba(255,255,255,.28)}
.obs-typing span{width:6px; height:6px; background:var(--on-black-2); animation:obsb 1.2s infinite}
.obs-typing span:nth-child(2){animation-delay:.15s}.obs-typing span:nth-child(3){animation-delay:.3s}
@keyframes obsb{0%,60%,100%{opacity:.3}30%{opacity:1}}
.obs-in{display:flex; gap:.6rem; padding:.85rem 1rem; border-top:1px solid rgba(255,255,255,.16)}
.obs-in input{flex:1; min-width:0; min-height:44px; background:#171415; border:1px solid rgba(255,255,255,.24); border-radius:2px; color:var(--on-black); font-family:var(--f-body); font-size:1rem; padding:.6rem .8rem; outline:none}
.obs-in input:focus{border-color:var(--accent)}
.obs-in button{min-height:44px; background:#fff; color:var(--black); border:0; border-bottom:3px solid #8E898A; border-radius:2px; font-family:var(--f-head); font-weight:700; font-size:.88rem; padding:0 1.1rem; cursor:pointer}
.obs-in button:active{border-bottom-width:1px; margin-top:2px}
.obs-in button:disabled{opacity:.4; cursor:default}
.obs-note{padding:.4rem 1rem .8rem; font-size:.75rem; line-height:1.45; color:rgba(244,243,242,.55)}
@media (max-width:480px){ .obs-panel{right:.75rem; left:.75rem; width:auto} }

/* ---------- reviews: talkback monitors ---------- */
.reviews{padding:var(--sec-y) 0; background:var(--paper)}
.rev-grid{display:grid; grid-template-columns:repeat(auto-fill,minmax(min(100%,300px),1fr)); gap:clamp(.9rem,2vw,1.5rem)}
.rev{margin:0; padding:clamp(5px,.6vw,8px); background:var(--bezel); border-radius:3px; box-shadow:0 0 0 1px #000; display:flex; flex-direction:column}
.rev__text{position:relative; flex:1; margin:0; padding:clamp(1.4rem,2.6vw,2rem) clamp(1.25rem,2.4vw,1.75rem) clamp(1.5rem,2.6vw,2rem); background:#141213;
  color:var(--on-black); font-size:.98rem; line-height:1.65; text-wrap:pretty}
.rev__text::after{content:""; position:absolute; top:.85rem; right:.85rem; width:14px; height:14px; background:#fff; opacity:.5; -webkit-mask:var(--mark) center/contain no-repeat; mask:var(--mark) center/contain no-repeat}
.rev__who{display:flex; align-items:center; gap:.55rem; margin-top:clamp(5px,.6vw,8px); padding:.4rem .6rem; background:var(--umd); border:1px solid #000;
  font-family:var(--f-mono); font-size:.6875rem; font-weight:600; letter-spacing:.12em; text-transform:uppercase; color:var(--umd-ink)}
.rev__who::before{content:""; flex:none; width:8px; height:8px; background:var(--accent); box-shadow:0 0 7px rgba(247,126,45,.7)}
.rev__who span{margin-left:auto; font-weight:500; color:var(--lcd); letter-spacing:.06em; white-space:nowrap}
.rev--feature .rev__text{font-size:clamp(1.02rem,1.4vw,1.14rem)}
@media (min-width:1000px){ .rev-grid{grid-template-columns:repeat(3,1fr)} .rev--feature{grid-row:span 2} }
/* the ninth monitor: the source feed, with the rating on its LCD */
.rev--src{color:var(--on-black); text-decoration:none}
.rev--src .rev__text{display:flex; flex-direction:column; align-items:flex-start; justify-content:center; gap:.7rem; min-height:11rem}
.rev--src .rev__text::after{display:none}
.rev--src .lcd{font-size:clamp(1.9rem,3vw,2.4rem); padding:.35rem .75rem; min-height:0; letter-spacing:.04em}
.rev__src-l{font-size:.95rem; color:var(--on-black-2)}
.rev__src-go{display:inline-flex; align-items:center; gap:.5rem; margin-top:.4rem; font-weight:600; font-size:.95rem; text-decoration:underline; text-decoration-color:var(--accent); text-decoration-thickness:1.5px; text-underline-offset:.25em}
.rev--src:hover .rev__src-go,.rev--src:focus-visible .rev__src-go{color:var(--accent)}
.rev--src .rev__who::before{background:#3a3536; box-shadow:none}
.rev--src:hover .rev__who::before,.rev--src:focus-visible .rev__who::before{background:var(--accent); box-shadow:0 0 7px rgba(247,126,45,.7)}

/* ---------- Lab flight teaser (home page) ---------- */
.lab-tease{padding:var(--sec-y) 0; background:var(--space); color:var(--on-black)}
.lab-tease .sec-title{color:#fff}
.lab-tease__frame{display:block}
.lab-tease__frame .mon__screen{aspect-ratio:16/8}
.lab-tease__frame .mon__screen img{transition:transform .8s var(--ease)}
.lab-tease__frame:hover .mon__screen img{transform:scale(1.02)}
.lab-tease__frame:hover .tally{background:var(--accent); box-shadow:0 0 7px rgba(247,126,45,.85)}
.lab-tease__row{display:flex; flex-wrap:wrap; align-items:center; gap:1.25rem 2rem; margin-top:clamp(1.5rem,3vw,2.25rem)}
.lab-tease__note{max-width:60ch; color:var(--on-black-2); font-size:1rem; line-height:1.6}
@media (max-width:640px){ .lab-tease__frame .mon__screen{aspect-ratio:4/3} }

/* ---------- sub-page header ---------- */
.page-head{padding:clamp(8rem,13vw,11rem) 0 clamp(3rem,6vw,5rem)}
.page-head__title{font-family:var(--f-display); font-stretch:var(--display-width); font-weight:800; letter-spacing:-0.03em; line-height:1.03; font-size:clamp(2.1rem,5.6vw,4.3rem); text-wrap:balance}
.page-head__title > span{display:block}
.page-head__sub{margin-top:1.5rem; max-width:58ch; color:var(--ink-2); font-size:clamp(1.02rem,1.4vw,1.18rem); line-height:1.6}
.page-head .xref{margin-top:1.5rem}
.page-head__act{margin-top:2rem; display:flex; flex-wrap:wrap; align-items:center; gap:1rem 1.5rem}
.page-head__hint{max-width:34ch; font-size:.92rem; line-height:1.5; color:var(--ink-3)}

/* privacy and other plain-text pages: one readable column, subheads close on the orange full stop like every section title */
.legal{padding:0 0 clamp(4rem,8vw,7rem)}
.legal h2{font-family:var(--f-display); font-stretch:var(--display-width); font-weight:800; font-size:clamp(1.2rem,2vw,1.45rem); letter-spacing:-.015em; line-height:1.2; color:var(--ink); margin:2.6rem 0 .75rem}
.legal h2:first-child{margin-top:0}
.legal h2::after{content:"."; color:var(--accent)}
.legal p{max-width:66ch; margin:0 0 1.1rem; font-size:1.0625rem; line-height:1.7; color:var(--ink-2); text-wrap:pretty}
.legal a{color:var(--ink); font-weight:600; text-decoration:underline; text-decoration-color:var(--accent); text-decoration-thickness:1.5px; text-underline-offset:3px}
.legal a:hover{text-decoration-thickness:3px}

/* 404: a monitor with nothing routed to it. Grey-scale chart on the screen, the no-signal box, the tally dark */
.nosig{padding-bottom:clamp(4.5rem,9vw,6.5rem)}
.nosig__wrap{display:grid; grid-template-columns:minmax(0,1fr) minmax(0,1.1fr); gap:clamp(2.5rem,5vw,5rem); align-items:center}
.nosig__mon .mon__screen{background:linear-gradient(90deg,#F4F3F2 0 10%,#D9D7D4 0 20%,#BDBAB6 0 30%,#A19E9A 0 40%,#86837F 0 50%,#6B6865 0 60%,#52504D 0 70%,#3A3836 0 80%,#242322 0 90%,#0B0B0D 0)}
.nosig__box{position:absolute; z-index:2; left:50%; top:50%; transform:translate(-50%,-50%); min-height:0; white-space:nowrap}
@media (max-width:900px){ .nosig__wrap{grid-template-columns:minmax(0,1fr)} .nosig__mon{max-width:560px} }
.sec--tight-top{padding-top:clamp(3rem,6vw,5rem)}

/* ---------- compact footer ---------- */
.foot-lite{background:var(--black); color:var(--on-black); padding:clamp(3.5rem,7vw,5.5rem) 0 2rem}
.foot-lite .wrap{display:flex; flex-wrap:wrap; align-items:center; gap:2rem; justify-content:space-between}
.foot-lite__cta{display:flex; align-items:center; flex-wrap:wrap; gap:1.25rem 1.75rem}
.foot-lite__cta .t{font-family:var(--f-display); font-stretch:var(--display-width); font-weight:800; font-size:clamp(1.3rem,2.6vw,2rem); letter-spacing:-.025em}
.foot-lite__cta .btn{white-space:nowrap}
.foot-lite nav{display:flex; gap:.2rem 1.4rem; flex-wrap:wrap; font-size:.9rem}
.foot-lite nav a{padding-block:.45rem; color:var(--on-black)}
.foot-lite nav a:hover{text-decoration:underline; text-decoration-color:var(--accent); text-decoration-thickness:2px}
.foot-lite .meta{width:100%; display:flex; align-items:center; justify-content:space-between; flex-wrap:wrap; gap:1rem 2rem; color:var(--on-black-2); font-size:.8rem; border-top:1px solid rgba(255,255,255,.14); padding-top:1.5rem; margin-top:.5rem}
.foot-lite .meta::before{content:""; width:132px; height:18px; flex:none; background:url(../assets/vl-logotype-white.svg) left center/contain no-repeat; opacity:.9}
.foot-lite .meta span{flex:1 1 auto}
.foot-lite .meta a{padding-block:.35rem; color:inherit; text-decoration:underline; text-decoration-color:rgba(255,255,255,.3); text-underline-offset:.2em}
.foot-lite .meta a:hover{color:var(--on-black); text-decoration-color:var(--accent)}
.foot-lite .meta span:last-child{flex:0 0 auto}
@media (max-width:600px){ .foot-lite__cta{flex-direction:column; align-items:flex-start} .foot-lite .meta::before{width:118px} }

/* ---------- Lab flight (scroll-world) in the house kit ----------
   The engine wraps its styles in @layer sw, which loses to this sheet's
   unlayered rules, so these ID-scoped overrides hold. Its stock chrome
   (pill tags, round glowing dots, a mouse icon, an accent progress bar)
   is replaced with the site's own parts: keys, a UMD strip, tally lights. */
#labFlight{--sw-copy-r:calc(clamp(18px,5vw,64px) + min(42vw,460px))}
/* The flight is a fixed stack (z 0 to 40). The intro and the footer sit above it, so the first
   set waits under the intro and the footer rises over the last one. */
.page-head:has(+ #labFlight){position:relative; z-index:45; background:var(--paper)}
#labFlight + .foot-lite{position:relative; z-index:45}
/* the scrim is at full strength under the whole copy column, then falls away,
   so body text holds contrast over the dark edit suite and city sets */
#labFlight .sw-copylayer::before{width:calc(var(--sw-copy-r) + 22vw);
  background:linear-gradient(90deg,var(--sw-bg) 0,color-mix(in srgb,var(--sw-bg) 92%,transparent) calc(var(--sw-copy-r) * .72),color-mix(in srgb,var(--sw-bg) 80%,transparent) var(--sw-copy-r),transparent 100%)}
#labFlight .sw-copy__num{font-size:.75rem}
/* tags: one UMD strip under the monitor, its tally lit */
#labFlight .sw-copy__tags{display:inline-flex; align-items:center; flex-wrap:wrap; gap:0; margin-top:clamp(30px,4.5vh,44px);
  padding:.42rem .7rem .42rem .6rem; background:var(--umd); border:1px solid #000; border-radius:1px; box-shadow:inset 0 1px 3px rgba(0,0,0,.8)}
#labFlight .sw-copy__tags::before{content:""; flex:none; width:8px; height:8px; margin-right:.65rem; border-radius:1px; background:var(--accent); box-shadow:0 0 7px rgba(247,126,45,.85)}
#labFlight .sw-copy__tags li{padding:0; background:none; border:0; border-radius:0; font-family:var(--f-mono); font-size:.6875rem; font-weight:600;
  line-height:1.5; letter-spacing:.14em; text-transform:uppercase; color:var(--umd-ink)}
#labFlight .sw-copy__tags li+li::before{content:"\00B7"; margin:0 .6em; color:#8B8689}
/* the CTA is the site's key: black cap, 4px skirt, LED that lights on hover and focus */
#labFlight .sw-copy__cta{margin-top:clamp(20px,3vh,28px)}
#labFlight .sw-btn{--led:var(--led-off); --skirt:#000; display:inline-flex; align-items:center; gap:.7rem; min-height:48px; padding:.78rem 1.3rem .78rem 1.05rem;
  font-family:var(--f-head); font-weight:700; font-size:.9375rem; line-height:1.1; border-radius:2px; text-shadow:none;
  transition:transform .08s, border-bottom-width .08s, margin .08s, background .2s}
#labFlight .sw-btn::before{content:""; flex:none; width:7px; height:7px; background:var(--led); transition:background .15s, box-shadow .15s}
#labFlight .sw-btn:hover,#labFlight .sw-btn:focus-visible{--led:var(--accent); transform:none}
#labFlight .sw-btn:hover::before,#labFlight .sw-btn:focus-visible::before{box-shadow:var(--glow)}
#labFlight .sw-btn:active{transform:translateY(2px); border-bottom-width:2px; margin-bottom:2px}
#labFlight .sw-btn--primary{color:#fff !important; background:var(--black); border:1.5px solid var(--black); border-bottom:4px solid var(--skirt)}
#labFlight .sw-btn--ghost{color:var(--ink) !important; background:var(--paper); border:1.5px solid var(--black); border-bottom:4px solid var(--black)}
#labFlight .sw-btn--ghost:hover{background:var(--paper-2)}
/* the route is a rack of tally lights: the live stage lit, the rest dark */
#labFlight .sw-route::before{width:1px; background:var(--ink); opacity:.16}
#labFlight .sw-route__dot i{width:7px; height:7px; border-radius:1px; background:var(--ink-3); box-shadow:none; transition:background .2s, box-shadow .2s, transform .2s}
#labFlight .sw-route__dot:hover i{background:var(--ink); transform:none}
#labFlight .sw-route__dot.is-active i{width:9px; height:9px; background:var(--accent); transform:none; box-shadow:var(--glow)}
#labFlight .sw-route__label{padding:.3rem .5rem; background:var(--umd); backdrop-filter:none; border:1px solid #000; border-radius:1px; box-shadow:inset 0 1px 3px rgba(0,0,0,.8);
  font-family:var(--f-mono); font-size:.6875rem; font-weight:600; letter-spacing:.14em; text-transform:uppercase; color:var(--umd-ink)}
/* progress already shows on the route; the stock accent bar under the nav goes,
   and so do the sky's peach glow and drifting particles: the stage is a white void */
#labFlight .sw-scrollbar,#labFlight .sw-sky__grad,#labFlight .sw-sky__glow,#labFlight .sw-particles{display:none}
/* the scroll hint is a standby light, not a mouse icon */
#labFlight .sw-hint{flex-direction:row; gap:.6rem; white-space:nowrap; padding:.42rem .7rem .42rem .6rem; background:var(--umd); border:1px solid #000; border-radius:1px; box-shadow:inset 0 1px 3px rgba(0,0,0,.8); font-family:var(--f-mono); font-size:.6875rem; font-weight:600; line-height:1.5; letter-spacing:.14em; color:var(--umd-ink)}
#labFlight .sw-hint i{order:-1; width:8px; height:8px; border:0; border-radius:1px; background:var(--accent); box-shadow:var(--glow); animation:lab-standby 1.6s steps(1) infinite}
#labFlight .sw-hint i::after{display:none}
@keyframes lab-standby{50%{opacity:.2}}
@media (prefers-reduced-motion:reduce){ #labFlight .sw-hint i{animation:none} }
@media (max-width:860px){
  #labFlight .sw-copylayer::before{width:100%; height:80%; top:auto; bottom:0;
    background:linear-gradient(0deg,var(--sw-bg) 0,color-mix(in srgb,var(--sw-bg) 94%,transparent) 30%,color-mix(in srgb,var(--sw-bg) 84%,transparent) 56%,transparent 100%)}
  #labFlight .sw-copy__tags{margin-top:clamp(22px,3.5vh,32px)}
  #labFlight .sw-copy__cta{margin-top:18px}
}

/* ---------- Inside-the-Lab switcher: a bus of keys, the live one lit ---------- */
.lab-switch{display:flex; flex-wrap:wrap; gap:.5rem; margin-top:2rem}
.lab-switch a{
  --led:var(--led-off);
  display:inline-flex; align-items:center; gap:.55rem; min-height:44px; padding:.55rem .95rem .55rem .8rem;
  font-family:var(--f-head); font-weight:700; font-size:.85rem; color:var(--ink); background:var(--paper);
  border:1.5px solid var(--black); border-bottom-width:3px; border-radius:2px; transition:background .2s;
}
.lab-switch a::before{content:""; width:7px; height:7px; background:var(--led)}
.lab-switch a:hover{--led:var(--ink-3); background:var(--paper-2)}
.lab-switch a[aria-current="page"]{--led:var(--accent); color:#fff; background:var(--black)}
.lab-switch a[aria-current="page"]::before{box-shadow:var(--glow)}

/* ---------- human sitemap ---------- */
.sm-grid{display:grid; gap:clamp(2.5rem,5vw,4rem); grid-template-columns:repeat(auto-fit,minmax(min(100%,280px),1fr))}
.sm-group__t{font-family:var(--f-display); font-stretch:var(--display-width); font-weight:800; font-size:1.2rem; letter-spacing:-.02em}
.sm-group__n{margin-top:.5rem; color:var(--ink-3); font-size:.9rem; line-height:1.5}
.sm-list{list-style:none; padding:0; margin:1.25rem 0 0; border-bottom:1px solid var(--line)}
.sm-list li{border-top:1px solid var(--line)}
.sm-list a{display:block; padding:.7rem 0; font-size:.95rem; color:var(--ink-2); transition:color .2s, transform .25s var(--ease)}
.sm-list a:hover{color:var(--ink); transform:translateX(.45rem); text-decoration:underline; text-decoration-color:var(--accent); text-decoration-thickness:2px}

/* ---------- website proof: sites on monitors ---------- */
.sites{list-style:none; padding:0; margin:0; display:grid; grid-template-columns:repeat(2,minmax(0,1fr)); gap:clamp(2rem,3vw,2.5rem)}
.sites > li{min-width:0}
.sites__live{display:inline-flex; align-items:center; gap:.2rem; margin-top:.3rem; margin-bottom:-.25rem; padding-block:.25rem; font-size:.9rem; color:var(--ink-2); text-decoration:underline; text-decoration-color:var(--accent); text-decoration-thickness:1.5px; text-underline-offset:.22em}
.sites__live:hover{color:var(--ink)}
@media (max-width:760px){ .sites{grid-template-columns:1fr} }

/* ---------- drawn marks: arrows and play heads are CSS, never glyphs ---------- */
.i-play,.i-arr,.i-out{position:relative; display:inline-block; flex:none; vertical-align:middle}
.i-play{width:.6em; height:.7em; background:currentColor; clip-path:polygon(0 0,100% 50%,0 100%)}
.i-arr{width:1.05em; height:1.5px; background:currentColor; margin-left:.1em}
.i-arr::after{content:""; position:absolute; right:0; top:50%; width:.42em; height:.42em; border-top:1.5px solid; border-right:1.5px solid; transform:translateY(-50%) rotate(45deg)}
.i-back{transform:scaleX(-1); margin:0 .1em 0 0}
.i-out{width:.62em; height:.62em; border-top:1.5px solid; border-right:1.5px solid; margin-left:.15em; transform:translateY(-.08em)}
.i-out::after{content:""; position:absolute; right:-1.5px; top:-1.5px; width:1.5px; height:.88em; background:currentColor; transform-origin:top center; transform:rotate(45deg)}