/*
  a.css: the shared system for /a (Mulholland lab, 2026-09-24).
  Original code. Layout, proportions, type scale, spacing and motion are
  reproduced from measurements in reference/study and reference/a-study;
  nothing here is copied from the reference site. See COMPONENTS.md.

  Sections
   0  Fonts
   1  Tokens: the fluid root (every value lives in tokens.css)
   2  Base, grounds, grid, type roles, utilities
   3  Motion verbs (reveal, draw, mask, scramble, underline)
   4  Chrome: load bar, header, mobile menu, footer, section switcher
   5  Heroes: page, family, product, wordmark, page head
   6  Slices: spacer, statement, headline split, rich text 4/4/4 and 6/6,
      image column, feature rows, stat rows, media-link cards
   7  Product block, outlined button, link button, icon link
   8  Tabbed capabilities, spec cards, accordion (+ accordion log)
   9  Cards (+ media cards), numbered media cards, media with rows, band
  10  News (slice, featured, rows, index list, search band, pager), article
  11  Media (caption, focus, demo crop), placeholder frame, drawn diagram,
      dot field, wavefield
  12  Reduced motion
  13  Homepage v2: stage, scroll pane, client rows, film band
  14  Homepage v3: projector (panel, frames, slate, footer, credits)
  15  Homepage v4: cine (film layer, vignette, veil, hero, list, footer)
  16  Homepage v5: reel (the scrubbed film: film layer, stage, hero, list, footer, timecode)
*/

/* The one token file comes first (pages link it first too; out-of-scope pages on a.css, like
   /a/v2-v4, get it from here). */
@import url("/tokens.css?v=c1dd846d594d");

/* 0  Fonts --------------------------------------------------------------
   @font-face weights describe the font files (a descriptor, where var() is not allowed), not a
   design choice; the type roles pick weights through --type-weight-*. */

@font-face { font-family: "A Display"; src: url("/vendor/fonts/helvetica-now/HelveticaNowDisplay-Regular.otf") format("opentype"); font-weight: 400; font-style: normal; font-display: swap; }
@font-face { font-family: "A Display"; src: url("/vendor/fonts/helvetica-now/HelveticaNowDisplay-Md.otf") format("opentype"); font-weight: 500; font-style: normal; font-display: swap; }
@font-face { font-family: "A Display"; src: url("/vendor/fonts/helvetica-now/HelveticaNowDisplay-Bold.otf") format("opentype"); font-weight: 700; font-style: normal; font-display: swap; }
@font-face { font-family: "A Text"; src: url("/vendor/fonts/helvetica-now/HelveticaNowText-Regular.otf") format("opentype"); font-weight: 400; font-style: normal; font-display: swap; }
@font-face { font-family: "A Text"; src: url("/vendor/fonts/helvetica-now/HelveticaNowTextMedium.otf") format("opentype"); font-weight: 500; font-style: normal; font-display: swap; }
@font-face { font-family: "A Micro"; src: url("/vendor/fonts/helvetica-now/HelveticaNowMicro.otf") format("opentype"); font-weight: 400; font-style: normal; font-display: swap; }
@font-face { font-family: "A Micro"; src: url("/vendor/fonts/helvetica-now/HelveticaNowMicroMedium.otf") format("opentype"); font-weight: 500; font-style: normal; font-display: swap; }

/* 1  Tokens -------------------------------------------------------------
   Every value lives in tokens.css (the one token file: primitives, semantic roles, component
   tokens), imported at the top of this file and linked first by every page. This file spends the
   semantic and component tiers only. */

/* Fluid root: 14px to 1280, 16px at 1440, 18px at 1920, 24px from 2400 (the steps are in tokens.css). */
html { font-size: var(--root-font-size); }

/* 2  Base --------------------------------------------------------------- */

*, *::before, *::after { box-sizing: border-box; }
html { -webkit-text-size-adjust: 100%; text-size-adjust: 100%; background: var(--surface-base); overflow-x: clip; }
body {
  margin: 0; min-height: var(--screen-height); overflow-x: clip;
  background: var(--surface-base); color: var(--surface-canvas-foreground);
  font-family: var(--type-family); font-weight: var(--type-weight);
  font-size: var(--type-p-size); line-height: var(--type-p-leading); letter-spacing: var(--type-p-tracking);
  -webkit-font-smoothing: antialiased; -moz-osx-font-smoothing: grayscale;
  font-kerning: normal; text-rendering: optimizeLegibility;
}
html.is-locked, html.is-locked body { overflow: hidden; }
h1, h2, h3, h4, h5, h6, p, figure, blockquote, dl, dd { margin: 0; font-size: inherit; font-weight: inherit; line-height: inherit; letter-spacing: inherit; }
ul, ol { margin: 0; padding: 0; list-style: none; }
a { color: inherit; text-decoration: none; }
button { margin: 0; padding: 0; border: 0; background: none; color: inherit; font: inherit; letter-spacing: inherit; text-align: inherit; cursor: pointer; }
img, video, canvas, svg { display: block; max-width: 100%; }
::selection { background: var(--selection); }
main { position: relative; z-index: var(--layer-raised); display: block; }

/* Focus: visible everywhere, drawn in the current text colour. */
:focus { outline: none; }
:focus-visible { outline: var(--ring-width) solid currentColor; outline-offset: var(--ring-offset); }

.sr-only { position: absolute !important; width: var(--hairline); height: var(--hairline); padding: 0; margin: calc(var(--hairline) * -1); overflow: hidden; clip: rect(0 0 0 0); clip-path: inset(50%); white-space: nowrap; border: 0; }
.skip { position: fixed; left: var(--page-margin); top: var(--spacing-xs); z-index: var(--layer-skip); padding: var(--spacing-2xs) var(--control-padding-inline); background: var(--surface-card); color: var(--surface-canvas-foreground); font-size: var(--type-small-size); transform: translateY(calc(var(--skip-offset) * -1)); }
.skip:focus-visible { transform: none; }

/* Grounds. Every slice declares one. tokens.css rebinds each ground's --background and --foreground
   (and, on coral and the blue, --muted-opacity) at the end of tier 2; here the ground paints them. */
.on-ink, .on-black, .on-bone, .on-white, .on-stone, .on-coral, .on-slate, .on-clear { background: var(--background); color: var(--foreground); }
.on-pop   { background: var(--background); color: var(--foreground); }
.on-pink  { background: var(--background); color: var(--foreground); } /* Sam, 2026-09-27: "an accent pink for some bottom sections" */

/* Grid: 12 columns, margins on the wrapper. */
.wrap { padding-inline: var(--page-margin); }
.grid { display: grid; grid-template-columns: repeat(12, minmax(0, 1fr)); column-gap: var(--gutter); row-gap: var(--row-gap); }
.col { --from: 1; --to: 13; --m-from: 1; --m-to: 13; grid-column: var(--from) / var(--to); }
@media (max-width: 767.98px) { .col { grid-column: var(--m-from) / var(--m-to); } }

/* Type roles */
.t-label, .t-code { font-size: var(--type-label-size); line-height: var(--type-label-leading); letter-spacing: var(--type-label-tracking); font-weight: var(--type-weight-medium); text-transform: uppercase; }
.t-code { font-family: var(--type-family-code); }
.t-small { font-size: var(--type-small-size); line-height: var(--type-small-leading); letter-spacing: var(--type-small-tracking); }
.t-p { font-size: var(--type-p-size); line-height: var(--type-p-leading); letter-spacing: var(--type-p-tracking); }
.t-lg { font-size: var(--type-lg-size); line-height: var(--type-lg-leading); letter-spacing: var(--type-lg-tracking); }
.t-h7 { font-size: var(--type-h7-size); line-height: var(--type-h7-leading); letter-spacing: var(--type-h7-tracking); }
.t-h6 { font-size: var(--type-h6-size); line-height: var(--type-h6-leading); letter-spacing: var(--type-h6-tracking); }
.t-h5 { font-size: var(--type-h5-size); line-height: var(--type-h5-leading); letter-spacing: var(--type-h5-tracking); }
.t-h4 { font-size: var(--type-h4-size); line-height: var(--type-h4-leading); letter-spacing: var(--type-h4-tracking); }
.t-h3 { font-size: var(--type-h3-size); line-height: var(--type-h3-leading); letter-spacing: var(--type-h3-tracking); }
.t-h2 { font-size: var(--type-h2-size); line-height: var(--type-h2-leading); letter-spacing: var(--type-h2-tracking); }
.t-h1 { font-size: var(--type-h1-size); line-height: var(--type-h1-leading); letter-spacing: var(--type-h1-tracking); font-weight: var(--type-weight-bold); }
.t-mega { font-size: var(--type-mega-size); line-height: var(--type-mega-leading); letter-spacing: var(--type-mega-tracking); font-weight: var(--type-weight-bold); }
.t-display { font-size: calc(var(--type-display-size) * var(--fit, 1)); line-height: var(--type-display-leading); letter-spacing: var(--type-display-tracking); font-weight: var(--type-weight-medium); text-transform: uppercase; }
.t-numeral { font-size: var(--type-numeral-size); line-height: var(--type-numeral-leading); letter-spacing: var(--type-numeral-tracking); }
.t-body { font-size: var(--type-body-size); line-height: var(--type-body-leading); letter-spacing: var(--type-body-tracking); }
.fw-400 { font-weight: var(--type-weight); } .fw-500 { font-weight: var(--type-weight-medium); } .fw-700 { font-weight: var(--type-weight-bold); }
.is-upper { text-transform: uppercase; }
.is-title { text-transform: var(--type-title-transform); }
.is-dim { --o: var(--muted-opacity); opacity: var(--o); }
.is-invert { filter: invert(1); }

/* Hairline: a 1px div in the current colour, never a border. */
.rule { display: block; height: var(--hairline); background: currentColor; --o: var(--muted-opacity); opacity: var(--o); transform-origin: 0 50%; }
.rule--solid { --o: 1; }
.rule--faint { --o: var(--faint-opacity); }
.rule--half { height: var(--hairline-half); }

/* 3  Motion verbs --------------------------------------------------------
   JS adds .is-in when an element is revealed (in view, on load, or at once
   under reduced motion). Initial states apply only when html.js is set. */

[data-reveal] {
  opacity: var(--o, 1);
  transition-property: opacity, transform;
  transition-duration: var(--dur, var(--motion-reveal));
  transition-timing-function: var(--ease, var(--motion-ease-reveal));
  transition-delay: var(--delay, 0s);
}
[data-reveal="shift"] { --dur: var(--motion-slow); --ease: var(--motion-ease-ui); }
[data-reveal="card"]  { --dur: var(--motion-card); --ease: var(--motion-ease-ui); }
[data-reveal="rise"], [data-reveal="up"] { --dur: var(--motion-rise); }
[data-reveal="draw"]  { --dur: var(--motion-draw); }
[data-reveal="fade"]  { --dur: var(--motion-slow); --ease: var(--motion-ease-ui); }

html.js [data-reveal="slide"]:not(.is-in) { opacity: 0; transform: translate3d(calc(var(--reveal-shift) * -1), 0, 0); }
html.js [data-reveal="card"]:not(.is-in)  { opacity: 0; transform: translate3d(calc(var(--reveal-shift) * -1), 0, 0); }
html.js [data-reveal="far"]:not(.is-in)   { opacity: 0; transform: translate3d(calc(var(--reveal-shift-far) * -1), 0, 0); }
html.js [data-reveal="shift"]:not(.is-in) { opacity: 0; transform: translate3d(calc(var(--spacing-xl) * -1), 0, 0); }
html.js [data-reveal="rise"]:not(.is-in)  { opacity: 0; transform: translate3d(0, var(--reveal-shift-rise), 0); }
html.js [data-reveal="up"]:not(.is-in)    { opacity: 0; transform: translate3d(0, 50%, 0); }
html.js [data-reveal="fade"]:not(.is-in)  { opacity: 0; }
html.js [data-reveal="draw"]:not(.is-in)  { transform: scaleX(0); }

/* Mask rise: the heading clips, its inner line rises into place. */
[data-reveal="mask"] { overflow: clip; transition: none; }
.mask-in { display: block; transform: translate3d(0, calc(var(--reveal-mask-rest) * -1), 0); transition: transform var(--motion-rise) var(--motion-ease-reveal) var(--delay, 0s); }
html.js [data-reveal="mask"]:not(.is-in) .mask-in { transform: translate3d(0, 100%, 0); }

/* Scramble: an in-flow copy keeps the box; the live copy sits on top. */
.scr { position: relative; }
.scr__live { position: absolute; left: 0; top: 0; width: 100%; display: none; }
.scr.is-scrambling .scr__ghost { opacity: 0; }
.scr.is-scrambling .scr__live { display: block; }

/* Underline draw and replay (link button). */
@keyframes a-underline-replay {
  0%     { transform: scaleX(1); transform-origin: 100% 50%; }
  49.99% { transform: scaleX(0); transform-origin: 100% 50%; }
  50%    { transform: scaleX(0); transform-origin: 0 50%; }
  100%   { transform: scaleX(1); transform-origin: 0 50%; }
}

/* 4  Chrome ------------------------------------------------------------- */

/* Load bar */
.loadbar { position: fixed; left: 0; top: 0; z-index: var(--layer-loadbar); width: 100%; height: var(--loadbar-height); background: var(--flash, var(--highlight)); box-shadow: 0 0 var(--loadbar-glow) var(--flash, var(--highlight)); transform: translate3d(-100%, 0, 0); pointer-events: none; }
.loadbar.is-run { transform: none; transition: transform var(--motion-bar) var(--motion-ease-ui); }
.loadbar.is-done { opacity: 0; transition: transform var(--motion-bar) var(--motion-ease-ui), opacity var(--motion-normal) var(--motion-ease-fade); }

/* Header: the earlier homepages' header and mobile menu (a/v2-v4 only). Every draft page carries the
   Nav instead (a/nav.css, a/nav.js), homepage v1's top chrome. */
.site-header { position: fixed; left: 0; right: 0; top: 0; z-index: var(--layer-header); color: var(--surface-canvas-foreground); pointer-events: none; transition: color var(--motion-normal) var(--motion-ease-fade); }
.site-header[data-theme="dark"]:not(.is-frosted):not(.is-menu) { color: var(--surface-inverse-foreground); }
.site-header__bar {
  position: relative; display: flex; align-items: center; justify-content: space-between;
  height: var(--header-height); padding: var(--spacing-md) var(--page-margin);
  pointer-events: auto; transform: translate3d(0, var(--header-y, 0px), 0);
}
.site-header__bar::before {
  content: ""; position: absolute; inset: 0; z-index: var(--layer-below);
  background: var(--overlay-light); -webkit-backdrop-filter: blur(var(--frost-blur)); backdrop-filter: blur(var(--frost-blur));
  opacity: 0; transition: opacity var(--motion-normal) var(--motion-ease-fade);
}
.site-header.is-frosted:not(.is-menu) .site-header__bar::before { opacity: 1; }
.site-header__logo { position: relative; display: block; align-self: flex-start; height: var(--logo-height); margin-top: calc(var(--logo-nudge) * -1); flex: none; }
.site-header__logo img { height: 100%; width: auto; transition: opacity var(--motion-normal) var(--motion-ease-fade); }
.site-header__logo .logo-light { position: absolute; left: 0; top: 0; opacity: 0; }
.site-header[data-theme="dark"]:not(.is-frosted):not(.is-menu) .logo-light { opacity: 1; }
.site-header[data-theme="dark"]:not(.is-frosted):not(.is-menu) .logo-dark { opacity: 0; }
.site-nav { position: absolute; left: 50%; top: var(--spacing-md); height: calc(var(--header-height) - var(--spacing-md) * 2); display: flex; align-items: center; gap: var(--nav-gap); transform: translateX(-50%); }
.site-nav a, .site-header__action { font-size: var(--type-small-size); line-height: var(--type-small-leading); letter-spacing: var(--type-small-tracking); white-space: nowrap; }
.site-nav a { transition: opacity var(--motion-fast) var(--motion-ease-ui); }
.site-nav a:hover { opacity: var(--soft-opacity); }
.site-header__action { transition: opacity var(--motion-normal) var(--motion-ease-fade); }
.site-header__action:hover { opacity: var(--muted-opacity); }
.site-header__burger { display: none; }

@media (max-width: 767.98px) {
  .site-header__bar { padding: 0 var(--page-margin); }
  .site-header__logo { align-self: center; height: var(--logo-height-mobile); }
  .site-nav, .site-header__action { display: none; }
  .site-header__burger { position: relative; display: block; width: var(--burger-size); height: var(--burger-size); }
  .site-header__burger span { position: absolute; left: var(--burger-inset); right: var(--burger-inset); height: var(--line-medium); background: currentColor; transition: transform var(--motion-normal) var(--motion-ease-ui); }
  .site-header__burger span:nth-child(1) { top: calc(50% - var(--burger-line-1-offset)); }
  .site-header__burger span:nth-child(2) { top: calc(50% + var(--burger-line-2-offset)); }
  .site-header__burger[aria-expanded="true"] span:nth-child(1) { transform: translateY(var(--spacing-3xs)) rotate(45deg); }
  .site-header__burger[aria-expanded="true"] span:nth-child(2) { transform: translateY(calc(var(--spacing-3xs) * -1)) rotate(-45deg); }
}

/* Mobile menu: a full-screen frosted sheet from the right. */
.site-menu { display: none; }
@media (max-width: 767.98px) {
  .site-menu {
    position: fixed; inset: 0; z-index: var(--layer-menu); display: flex; flex-direction: column; gap: var(--spacing-xl);
    padding: calc(var(--header-height) + var(--spacing-lg)) var(--page-margin) var(--spacing-xl); overflow-y: auto;
    background: var(--overlay-light); -webkit-backdrop-filter: blur(var(--frost-blur)); backdrop-filter: blur(var(--frost-blur)); color: var(--surface-canvas-foreground);
    transform: translate3d(100%, 0, 0); visibility: hidden;
    transition: transform var(--motion-slow) var(--motion-ease-ui), visibility 0s var(--motion-ease-steady) var(--motion-slow);
  }
  .site-menu.is-open { transform: none; visibility: visible; transition: transform var(--motion-slow) var(--motion-ease-ui), visibility 0s; }
  .site-menu__list a { display: block; padding: var(--spacing-2xs) 0; font-size: var(--type-menu-size); line-height: var(--type-menu-leading); letter-spacing: var(--type-menu-tracking); }
  .site-menu__group { display: flex; flex-direction: column; gap: var(--spacing-sm); }
  .site-menu__group .t-label { opacity: var(--muted-opacity); }
}

/* Footer */
.site-footer { position: relative; z-index: var(--layer-raised); padding: var(--footer-padding-block) 0; background: var(--surface-base); color: var(--surface-base-foreground); }
.site-footer__inner { display: flex; flex-direction: column; gap: var(--spacing-3xl); padding-inline: var(--page-margin); }
.site-footer__top { position: relative; display: grid; grid-template-columns: repeat(12, minmax(0, 1fr)); column-gap: var(--gutter); }
.site-footer__logo { position: absolute; left: 0; top: 0; display: block; height: var(--footer-logo-height); }
.site-footer__logo img { height: 100%; width: auto; }
.fcol { grid-column: span 2; }
.site-footer__top > .fcol:nth-child(2) { grid-column: 7 / 9; }
.site-footer__top > .fcol:nth-child(3) { grid-column: 9 / 11; }
.site-footer__top > .fcol:nth-child(4) { grid-column: 11 / 13; }
.fcol--contact { display: none; }
.fcol__title { display: block; }
.fcol__btn { display: flex; align-items: flex-start; justify-content: space-between; width: 100%; height: var(--footer-column-head-height); padding-top: var(--spacing-xs); cursor: default; }
.fcol__btn .t-label { opacity: var(--muted-opacity); }
.fcol__plus { display: none; }
.fcol__panel { display: block; }
.fcol__links a { display: block; padding-top: var(--spacing-3xs); font-size: var(--type-lg-size); line-height: var(--footer-link-leading); letter-spacing: var(--type-lg-tracking); }
.fcol__links li:first-child a { padding-top: 0; }
.site-footer__bottom { display: grid; grid-template-columns: repeat(12, minmax(0, 1fr)); column-gap: var(--gutter); }
.site-footer__legal { grid-column: 1 / 7; display: flex; flex-direction: column; align-items: flex-start; }
.site-footer__legal .t-label + a { margin-top: var(--spacing-sm); }
.site-footer__small { margin-top: var(--spacing-3xs); font-size: var(--type-label-size); line-height: var(--type-label-leading); letter-spacing: var(--type-label-tracking); font-weight: var(--type-weight-medium); text-transform: var(--type-title-transform); opacity: var(--muted-opacity); }
.site-footer__contact { grid-column: 11 / 13; }
.site-footer__contact .t-label { opacity: var(--muted-opacity); }
.site-footer__email { display: inline-block; margin-top: var(--spacing-md); font-size: var(--footer-email-size); line-height: var(--footer-email-leading); letter-spacing: var(--footer-email-tracking); }

@media (max-width: 767.98px) {
  .site-footer { padding: var(--footer-padding-block) 0 var(--footer-padding-bottom-mobile); }
  .site-footer__inner { gap: var(--spacing-3xl); }
  .site-footer__top { display: flex; flex-direction: column; }
  .site-footer__logo { position: static; height: var(--logo-height-mobile); margin-bottom: var(--footer-logo-gap-mobile); }
  .fcol, .fcol--contact { display: block; }
  .fcol__btn { height: var(--footer-column-head-height-mobile); align-items: center; padding-top: 0; cursor: pointer; }
  .fcol__plus { position: relative; display: block; width: var(--icon-size-small); height: var(--icon-size-small); flex: none; }
  .fcol__plus::before, .fcol__plus::after { content: ""; position: absolute; left: 0; top: 50%; width: 100%; height: var(--line-medium); margin-top: calc(var(--line-medium) / -2); background: currentColor; transition: transform var(--motion-normal) var(--motion-ease-fade); }
  .fcol__plus::after { transform: rotate(90deg); }
  .fcol.is-open .fcol__plus::after { transform: rotate(0deg); }
  .fcol__panel { display: grid; grid-template-rows: 0fr; transition: grid-template-rows var(--motion-normal) var(--motion-ease-fade); }
  .fcol.is-open .fcol__panel { grid-template-rows: 1fr; }
  .fcol__panel > * { overflow: hidden; min-height: 0; }
  .fcol__links { padding-bottom: var(--spacing-md); }
  .fcol__links a { padding-top: var(--footer-link-gap-mobile); }
  .fcol--contact .site-footer__email { margin: 0 0 var(--spacing-md); font-size: var(--type-lg-size); line-height: var(--footer-link-leading); }
  .site-footer__bottom { display: block; }
  .site-footer__contact { display: none; }
  .site-footer__small { margin-top: var(--footer-small-gap-mobile); }
  html:not(.js) .fcol__panel { grid-template-rows: 1fr; }
}

/* Section switcher: fixed, bottom centre. */
.switcher { position: fixed; left: 50%; bottom: 0; z-index: var(--layer-switcher); transform: translateX(-50%); opacity: 0; visibility: hidden; transition: opacity var(--motion-normal) var(--motion-ease-standard), visibility 0s var(--motion-ease-steady) var(--motion-normal); }
.switcher.is-shown { opacity: 1; visibility: visible; transition: opacity var(--motion-normal) var(--motion-ease-standard), visibility 0s; }
.switcher:not(.is-shown) { pointer-events: none; }   /* draft 1: nothing under a fading pill takes a tap or hides a focus ring */
.switcher__list { display: flex; gap: var(--spacing-lg); padding: var(--switcher-padding-block) var(--spacing-lg); background: var(--overlay); -webkit-backdrop-filter: blur(var(--veil-blur)); backdrop-filter: blur(var(--veil-blur)); border-radius: var(--radius) var(--radius) 0 0; }
.switcher__link { display: block; font-size: var(--type-link-size); line-height: var(--switcher-leading); font-weight: var(--type-weight-medium); letter-spacing: var(--switcher-tracking); color: var(--muted-foreground-inverse); white-space: nowrap; transition: color var(--motion-brisk) var(--motion-ease-fade); }
.switcher__link:hover, .switcher__link[aria-current] { color: var(--overlay-foreground); }
.switcher__link[aria-current] { font-weight: var(--type-weight-bold); }
.switcher__current { display: none; }
@media (max-width: 767.98px) {
  .switcher__current { display: block; padding: var(--spacing-sm) var(--spacing-xl); background: var(--overlay); -webkit-backdrop-filter: blur(var(--veil-blur)); backdrop-filter: blur(var(--veil-blur)); color: var(--overlay-foreground); font-size: var(--switcher-current-size-mobile); line-height: var(--switcher-leading); white-space: nowrap; }
  .switcher__list { position: absolute; left: 50%; bottom: 100%; display: none; flex-direction: column; gap: 0; min-width: 100%; padding: 0; transform: translateX(-50%); }
  .switcher.is-open .switcher__list { display: flex; }
  .switcher__link { padding: var(--spacing-sm) var(--spacing-xl); line-height: var(--switcher-leading); }
}

/* 5  Heroes ------------------------------------------------------------- */

/* Scroll cue: our own 24px down arrow. */
.scroll-cue { display: block; width: var(--icon-size); height: var(--icon-size); flex: none; color: inherit; }
.scroll-cue svg { width: 100%; height: 100%; }

/* Page hero (mission): air above, 50% headline, cue row, full-bleed media. */
.hero-page { padding-top: var(--page-top); padding-top: var(--page-top-dynamic); }
.hero-page__text { padding: 0 var(--page-margin) var(--spacing-lg); }
.hero-page__title { width: var(--hero-page-title-width); margin-top: var(--spacing-md); }
.hero-page__sub { width: var(--hero-page-title-width); margin-top: var(--spacing-sm); }
.hero-page__row { display: flex; align-items: flex-end; justify-content: space-between; margin-top: var(--spacing-4xl); }
.hero-page__desc { width: var(--hero-page-desc-width); }
.hero-page__media { aspect-ratio: var(--hero-page-aspect); }
@media (max-width: 767.98px) {
  .hero-page__title, .hero-page__sub { width: 100%; }
  .hero-page__desc { width: var(--hero-page-desc-width-mobile); }   /* the cue row keeps its 7rem (98): cue y418.8, media 467.8 at 390 */
  .hero-page__media { aspect-ratio: var(--hero-aspect-mobile); }
}

/* Shared details row: tag or code, uppercase paragraph, anchors, cue. */
.hero-details { display: grid; grid-template-columns: repeat(12, minmax(0, 1fr)); column-gap: var(--gutter); row-gap: var(--spacing-xl); align-items: start; }
.hero-details__tag { grid-column: 1 / 3; max-width: var(--hero-details-measure); }
.hero-details__tag .t-code { margin-top: var(--spacing-xs); }
/* Reserve (counter-uas): the tag column stands two label lines plus an empty
   code line tall even for a one-word tag (31.2 at 1440, 32.6 at 390). Only
   visible on mobile, where the paragraph starts 3rem below this block. Use it
   when the tag has no code line. */
.hero-details__tag--reserve { min-height: calc(var(--type-label-size) * var(--type-label-leading) * 2 + var(--hero-details-reserve-gap)); }
.hero-details__text { grid-column: 3 / 6; max-width: var(--hero-details-measure); }
.hero-details__draft { margin-top: var(--hero-details-reserve-gap); }   /* a line under the tag, inside its reserve (/a/models/: the draft line, 2 lines at 1440, 1 at 390) */
.hero-details__anchors { grid-column: 7 / 12; display: flex; flex-wrap: wrap; gap: var(--spacing-sm) var(--spacing-lg); }
.hero-details__cue { grid-column: 12 / 13; justify-self: end; align-self: end; }
.hero-anchor { font-size: var(--type-label-size); line-height: var(--type-label-leading); letter-spacing: var(--type-label-tracking); font-weight: var(--type-weight-medium); text-transform: uppercase; color: var(--muted-foreground); text-decoration: underline; text-decoration-thickness: var(--hairline); text-underline-offset: var(--underline-offset); }
.hero-anchor:hover { color: var(--surface-canvas-foreground); }

/* Family hero (counter-uas, air-trs). */
.hero-fam { padding-top: var(--hero-fam-top); }
.hero-fam__top { padding: 0 var(--page-margin) var(--spacing-lg); }
.hero-fam__title { margin: var(--spacing-lg) 0 var(--spacing-3xl); }
.hero-fam__media { aspect-ratio: var(--aspect-video); }
@media (max-width: 767.98px) {
  .hero-fam { padding-top: var(--hero-fam-top-mobile); }
  .hero-fam__title { margin: var(--spacing-lg) 0 var(--spacing-xl); }
  .hero-details__tag { grid-column: 1 / -1; }
  .hero-details__text { grid-column: 1 / 11; }
  .hero-details__anchors { grid-column: 1 / 12; }
  .hero-details__cue { grid-column: 12 / 13; margin-top: calc(var(--spacing-2xs) * -1); }
  .hero-fam__media { aspect-ratio: var(--hero-aspect-mobile); }
}

/* Product hero (space): 160 bold mask-rise title, inset photo. */
.hero-prod { display: flex; flex-direction: column; gap: var(--spacing-lg); padding-bottom: var(--spacing-2xl); }
.hero-prod__text { padding: var(--hero-prod-top) var(--page-margin) var(--spacing-lg); }
.hero-prod .hero-details { margin-top: var(--spacing-lg); }
.hero-details--prod .hero-details__code { grid-column: 1 / 3; margin-top: var(--spacing-lg); }
.hero-details--prod .hero-details__text { grid-column: 3 / 8; max-width: var(--hero-details-measure-prod); }
.hero-details--prod .hero-details__cue { grid-column: 8 / 13; }
.hero-prod__media { padding-inline: var(--page-margin); }
.hero-prod__figure { aspect-ratio: var(--hero-prod-aspect); }
@media (max-width: 767.98px) {
  .hero-prod { gap: var(--spacing-lg); padding-bottom: var(--spacing-2xl); }
  .hero-prod__text { padding: var(--hero-prod-top) var(--page-margin) var(--spacing-lg); }
  .hero-details--prod { row-gap: var(--hero-details-prod-row-gap-mobile); }
  .hero-details--prod .hero-details__code { grid-column: 1 / -1; }
  .hero-details--prod .hero-details__text { grid-column: 1 / 12; max-width: var(--hero-details-measure-prod-mobile); }
  .hero-details--prod .hero-details__cue { grid-column: 12 / 13; grid-row: 2; }
}

/* Wordmark hero (lattice): eyebrow and bold title over the dot field, or the wavefield; its ink turns white
   on the wavefield's dark ground (--hero-wm-foreground, rebound in tokens.css). */
.hero-wm { position: relative; display: flex; flex-direction: column; gap: var(--spacing-2xl); padding: var(--page-top) var(--page-margin) var(--spacing-2xl); padding-top: var(--page-top-dynamic); background: var(--surface-clear); color: var(--hero-wm-foreground); }
.hero-wm__group { display: flex; flex-direction: column; gap: var(--spacing-md); }
.hero-wm__title { display: flex; align-items: center; width: var(--hero-wm-title-width); height: calc(var(--type-h1-size) * var(--type-h1-leading)); }
.hero-wm__title svg { width: auto; height: var(--wordmark-height); }
.hero-wm__details { min-height: 0; }
@media (max-width: 767.98px) {
  .hero-wm__title svg { height: var(--wordmark-height-mobile); }
}

/* Page head (news index): kicker and 56px title. */
.page-head { padding: var(--page-head-top) var(--page-margin) var(--page-head-bottom); }
.page-head__title { margin-top: var(--spacing-sm); }
@media (max-width: 767.98px) {
  .page-head { padding: var(--spacing-4xl) var(--page-margin) var(--spacing-xl); }
}

/* 6  Slices ------------------------------------------------------------- */

/* Gap: the only vertical-spacing primitive between slices. */
.gap { position: relative; height: var(--spacing-2xl); padding-inline: var(--page-margin); }
.gap--xs { height: var(--spacing-2xs); } .gap--sm { height: var(--spacing-sm); } .gap--base { height: var(--spacing-lg); }
.gap--lg { height: var(--spacing-xl); } .gap--xl { height: var(--spacing-2xl); } .gap--xxl { height: var(--spacing-4xl); }
.gap__rule { display: none; }
.gap--rule .gap__rule { display: block; --o: var(--faint-opacity); }

/* Display statement: the one centred line. */
.statement { padding-inline: var(--page-margin); }
.statement__text { display: flex; justify-content: center; width: 100%; margin-inline: auto; text-align: center; }
.statement__text > span { display: block; }
.statement__text--w100 { width: 100%; } .statement__text--w90 { width: var(--statement-width-90); } .statement__text--w80 { width: var(--statement-width-80); }
.statement__text--w70 { width: var(--statement-width-70); } .statement__text--w60 { width: var(--statement-width-60); } .statement__text--w50 { width: var(--statement-width-50); }
.statement__text--w40 { width: var(--statement-width-40); } .statement__text--w30 { width: var(--statement-width-30); } .statement__text--w20 { width: var(--statement-width-20); }
@media (max-width: 767.98px) { .statement__text[class*="--w"] { width: 100%; } }
/* Line breaks that differ by size: br.br-d breaks at 768 and up, br.br-m
   below. .nobr keeps a hyphenated word whole (a.js then shrinks the line
   if that word is wider than the slice, e.g. on 360px phones). */
br.br-m { display: none; }
@media (max-width: 767.98px) { br.br-d { display: none; } br.br-m { display: inline; } }
.nobr { white-space: nowrap; }

/* Headline split (mission): eyebrow cols 1-5 (its line plus 2em); right
   column cols 7-12 = lead, 2rem, optional body (+1rem), optional link. With
   no body the lead keeps 3rem below it (the reference's empty body slot
   still takes 48). */
.lead-split { padding: var(--spacing-2xl) var(--page-margin) var(--spacing-3xl); }
.lead-split__eyebrow { grid-column: 1 / 6; padding-bottom: var(--lead-split-eyebrow-gap); }
.lead-split__lead { grid-column: 7 / 13; }
.lead-split__right { grid-column: 7 / 13; display: flex; flex-direction: column; align-items: flex-start; gap: var(--spacing-lg); }
.lead-split__right > .lead-split__lead { width: 100%; }
.lead-split__body { margin-bottom: var(--spacing-sm); }
/* several short paragraphs read as one piece: a paragraph space between them, not a block gap */
.lead-split__prose { display: flex; flex-direction: column; gap: var(--spacing-sm); }
.lead-split__prose > .lead-split__body { margin-bottom: 0; }
.lead-split__lead:last-child { margin-bottom: var(--spacing-xl); }
@media (max-width: 767.98px) {
  .lead-split { padding-bottom: var(--spacing-lg); }
  .lead-split .grid { row-gap: var(--spacing-lg); }
  .lead-split__eyebrow, .lead-split__lead, .lead-split__right { grid-column: 1 / -1; }
}
.team-experience { width: 100%; }
.team-experience__groups { display: grid; gap: var(--spacing-lg); }
.team-experience__logos { list-style: none; display: grid; grid-template-columns: repeat(4,minmax(0,1fr)); gap: var(--spacing-lg); padding: var(--spacing-sm) 0 0; margin: 0; }
.team-experience__logos li { display: flex; align-items: center; min-width: 0; }
.team-experience__logos img { display: block; width: auto; max-width: 100%; height: var(--spacing-lg); object-fit: contain; }
.team-experience__logos img[alt="J.P. Morgan"] { height: var(--spacing-md); }
.team-experience.is-ready .team-experience__groups { gap: 0; }
.team-experience.is-ready .team-experience__logos { grid-area: 1 / 1; opacity: var(--hidden-opacity); visibility: hidden; transition: opacity var(--motion-normal) var(--motion-ease-swap), visibility 0s var(--motion-normal); }
.team-experience.is-ready .team-experience__logos.is-active { opacity: var(--shown-opacity); visibility: visible; transition-delay: 0s; }
@media (max-width: 767px) {
  .team-experience__logos { grid-template-columns: repeat(2,minmax(0,1fr)); }
}
@media (prefers-reduced-motion: reduce) {
  .team-experience.is-ready .team-experience__logos { transition: none; }
}

.team-experience__logos img[alt="Flamingo DAO"] { filter: invert(var(--brand-mark-invert)); }
.data-work { padding: var(--spacing-3xl) var(--page-margin); }
.data-work__intro { row-gap: var(--spacing-lg); }
.data-work__heading { grid-column: 1 / 7; }
.data-work__heading h2 { margin-top: var(--spacing-sm); }
.data-work__prose { grid-column: 8 / 13; display: grid; gap: var(--spacing-md); }
.data-work__diagram { margin: var(--spacing-xl) 0; }
.data-work__diagram svg { display: block; width: 100%; height: auto; }
.data-work__diagram .data-work__cut--phone { display: none; }
.data-work__steps { display: grid; grid-template-columns: repeat(3,minmax(0,1fr)); gap: var(--spacing-xl); list-style: none; padding: 0; margin: 0 0 var(--spacing-lg); }
.data-work__steps li { border-top: var(--hairline) solid var(--border-strong); padding-top: var(--spacing-md); }
.data-work__steps h3 { margin-bottom: var(--spacing-sm); }
@media (max-width: 767px) {
  .data-work__heading, .data-work__prose { grid-column: 1 / -1; }
  .data-work__diagram .data-work__cut--desktop { display: none; }
  .data-work__diagram .data-work__cut--phone { display: block; }
  .data-work__steps { grid-template-columns: minmax(0,1fr); }
}

/* Further reading uses the same folded-paper cards as the client pages. */
.services-reading.speccards { padding: var(--spacing-2xl) var(--page-margin) var(--spacing-3xl); }
.services-reading__intro { align-items: end; row-gap: var(--spacing-lg); margin-bottom: var(--spacing-xl); }
.services-reading__intro > div { grid-column: 1 / 7; }
.services-reading__intro > p { grid-column: 8 / 13; }
.services-reading__intro h2 { margin-top: var(--spacing-sm); }
.services-reading .speccards__grid { grid-template-columns: repeat(2,minmax(0,1fr)); align-items: start; }
.services-reading .reading-card { min-width: 0; gap: var(--spacing-lg); }
.services-reading .reading-card__publisher { aspect-ratio: auto; min-height: var(--spacing-3xl); display: flex; flex-direction: column; justify-content: center; gap: var(--spacing-xs); }
.reading-card__body { display: grid; gap: var(--spacing-sm); }
.reading-card__byline { margin: 0; }
.reading-card__byline .speccard__spec { display: grid; grid-template-columns: max-content minmax(0,1fr); gap: var(--spacing-lg); }
.reading-card__byline dd { margin: 0; text-align: right; }
.reading-card__foot { margin-top: auto; display: flex; flex-direction: column; align-items: flex-start; gap: var(--spacing-md); width: 100%; }
.reading-card__video { width: 100%; border-top: var(--hairline) solid var(--border-strong); padding-top: var(--spacing-sm); }
.reading-card__video summary { cursor: pointer; padding: var(--spacing-2xs) 0; }
.reading-card__video-note { margin-top: var(--spacing-sm); }
.reading-card__player { width: 100%; min-width: 0; max-width: 100%; aspect-ratio: var(--aspect-video); min-height: var(--video-player-min-height); margin: var(--spacing-sm) 0; background: var(--surface-inverse); }
.reading-card__player:empty { display: none; }
.reading-card__player iframe { display: block; width: 100%; height: 100%; min-height: var(--video-player-min-height); border: 0; }
@media (max-width: 767px) {
  .services-reading__intro > div, .services-reading__intro > p { grid-column: 1 / -1; }
  .services-reading .speccards__grid { grid-template-columns: minmax(0,1fr); }
}

/* Headline split with a figure (the 10mark page, 2026-09-27): figure.lead-split__fig sits under the eyebrow in
   cols 1-4, beside the right column, which spans both rows; the eyebrow's row keeps its own height (auto) and the
   figure's row takes the rest (1fr). The figure is an .imgcol__fig box with an .imgcol__cap caption. Below 768 it
   follows the text. */
.lead-split--fig .grid { grid-template-rows: auto 1fr; }
.lead-split--fig .lead-split__right { grid-row: 1 / span 2; }
.lead-split__fig { grid-column: 1 / 5; grid-row: 2; margin: 0; min-width: 0; }
@media (max-width: 767.98px) {
  .lead-split--fig .grid { grid-template-rows: none; }
  .lead-split--fig .lead-split__right, .lead-split__fig { grid-row: auto; grid-column: 1 / -1; }
}

/* Rich text 4/4/4 (lattice intro): label cols 1-4, prose cols 9-12. */
.rich444 { padding: var(--spacing-2xl) var(--page-margin); }
.rich444__label { grid-column: 1 / 5; }
.rich444__prose { grid-column: 9 / 13; display: flex; flex-direction: column; gap: var(--spacing-lg); }
.rich444__prose p { margin-bottom: var(--type-p-size); }
@media (max-width: 767.98px) {
  .rich444 .grid { row-gap: var(--spacing-2xs); }
  .rich444__label, .rich444__prose { grid-column: 1 / -1; }
  .rich444__label { margin-bottom: calc(var(--type-label-size) + var(--spacing-2xs)); } /* label to prose 28, as measured (marzyos pass) */
}

/* Rich text 6/6 (space): heading and body in cols 1-6, cols 7-12 empty. */
.rich66 { padding: var(--spacing-xl) var(--page-margin); }
.rich66__col { grid-column: 1 / 7; }
.rich66__col .t-h4 { margin-bottom: var(--rich66-heading-gap); }
.rich66__col p { margin-bottom: var(--type-p-size); }
.rich66__col--2 { grid-column: 7 / 13; }
@media (max-width: 767.98px) { .rich66__col, .rich66__col--2 { grid-column: 1 / -1; } }

/* Image column (mission): inset figures, one, two or three across. */
.imgcol { padding: 0 var(--page-margin) var(--spacing-2xl); }
.imgcol__grid { display: grid; grid-template-columns: 1fr; column-gap: var(--gutter); row-gap: var(--row-gap); }
.imgcol--two .imgcol__grid { grid-template-columns: 1fr 1fr; }
.imgcol--three .imgcol__grid { grid-template-columns: 1fr 1fr 1fr; }
.imgcol__fig { aspect-ratio: var(--imgcol-aspect); border-radius: var(--radius); overflow: hidden; }
@media (max-width: 767.98px) {
  .imgcol { padding-bottom: var(--spacing-lg); }
  .imgcol--two .imgcol__grid, .imgcol--three .imgcol__grid { grid-template-columns: 1fr; }
}
/* Image column: head and four across (draft 1, 2026-09-25; first on /a/clients/lulu-georgia/).
   .imgcol__head.grid (h2.imgcol__title .t-h5 cols 1-6, optional p.imgcol__note .t-small cols 7-11,
   bottom-aligned), then .imgcol--four: figure.imgcol__item > .imgcol__fig.imgcol__fig--portrait.media
   (4:5) + figcaption.imgcol__cap .t-label; two across below 768. */
.imgcol__head { align-items: end; padding-bottom: var(--spacing-lg); }
.imgcol__title { grid-column: 1 / 7; }
.imgcol__note { grid-column: 7 / 12; }
.imgcol--four .imgcol__grid { grid-template-columns: repeat(4, minmax(0, 1fr)); }
.imgcol__item { margin: 0; min-width: 0; }
.imgcol__fig--portrait { aspect-ratio: var(--aspect-portrait); }
.imgcol__cap { margin-top: var(--spacing-xs); }
@media (max-width: 767.98px) {
  .imgcol__head { row-gap: var(--spacing-sm); padding-bottom: var(--spacing-md); }
  .imgcol__title, .imgcol__note { grid-column: 1 / -1; }
  .imgcol--four .imgcol__grid { grid-template-columns: 1fr 1fr; row-gap: var(--spacing-md); }
}

/* Feature rows (mission): rule, then headline / subhead / body. */
.features { padding: var(--spacing-2xl) var(--spacing-lg) 0; }   /* 2rem sides at every size (28 on mobile, not the 20 margin) */
.frow__grid { padding: var(--spacing-sm) 0 var(--spacing-xl); }
.frow__head { grid-column: 1 / 4; }
.frow__sub  { grid-column: 5 / 8; font-weight: var(--type-weight-medium); }
.frow__body { grid-column: 9 / 13; }
.frow--nosub .frow__head { grid-column: 1 / 6; }
.frow--nosub .frow__body { grid-column: 7 / 13; }
/* Title (Models, 2026-09-26): an optional slice title over the rows, as the cards, media rows and band carry. */
.features__title { margin-bottom: var(--spacing-lg); }
@media (max-width: 767.98px) {
  .frow__grid { row-gap: var(--spacing-sm); }
  .frow__head, .frow__sub, .frow__body, .frow--nosub .frow__head, .frow--nosub .frow__body { grid-column: 1 / -1; }
}

/* Stat rows (land product page): numeral + label left, proof right. */
.stats { padding: 0 var(--page-margin); }
.stat { padding-bottom: var(--spacing-2xl); }
.stat__grid { padding-top: var(--spacing-lg); }
.stat__left { grid-column: 1 / 6; display: flex; flex-direction: column; gap: var(--spacing-2xs); }
.stat__num { text-transform: var(--type-title-transform); }
.stat__label { text-transform: var(--type-title-transform); }
.stat__body { grid-column: 9 / 13; }
@media (max-width: 767.98px) {
  .stat__left, .stat__body { grid-column: 1 / -1; }
  .stat__grid { row-gap: var(--spacing-md); }
}

/* Media-link cards (mission): two half-width colour panels. */
.mlinks { display: grid; grid-template-columns: 1fr 1fr; }
.mlink { display: flex; flex-direction: column; gap: var(--spacing-lg); padding: var(--spacing-2xl) var(--spacing-lg) var(--spacing-4xl); }
.mlink__top { display: flex; align-items: flex-end; justify-content: space-between; gap: var(--spacing-sm); }
.mlink__top .link-btn { margin-top: var(--spacing-lg); }   /* row = link + 32: the title sits 10px lower */
.mlink__fig { position: relative; }
.mlink__img { aspect-ratio: var(--mlink-aspect); border-radius: var(--radius); overflow: hidden; }   /* 656 x 364.4 */
.mlink__num { position: absolute; right: var(--spacing-lg); bottom: calc(var(--spacing-lg) * -1); white-space: nowrap; }
.mlink .rule { --dur: var(--motion-rise); }
@media (max-width: 767.98px) {
  .mlinks { grid-template-columns: 1fr; }
  .mlink { position: sticky; top: 0; padding: var(--spacing-xl) var(--page-margin) var(--spacing-2xl); }
  .mlink__top .link-btn { margin-top: var(--spacing-2xl); }
  .mlink__num { right: var(--spacing-sm); bottom: calc(var(--mlink-num-offset-mobile) * -1); }
}

/* 7  Product block and buttons ----------------------------------------- */

.pblock { padding: var(--spacing-lg); }
.pblock__grid { margin: var(--spacing-sm) 0 var(--spacing-2xl); row-gap: var(--spacing-lg); }
.pblock__decal { grid-column: 1 / 6; display: grid; grid-template-columns: var(--pblock-decal-column) var(--pblock-decal-column); column-gap: var(--spacing-sm); width: var(--pblock-decal-width); align-content: start; margin-bottom: var(--spacing-md); }   /* the 1.5rem shows only when stacked: 21 at 390 */
.pblock__decal-col { display: flex; flex-direction: column; align-items: flex-start; }
.pblock__tag { white-space: nowrap; }
.pblock__code { margin-top: var(--spacing-md); }
.pblock__body { grid-column: 7 / 12; display: flex; flex-direction: column; align-items: flex-start; }
.pblock__name { margin-bottom: var(--spacing-sm); }
.pblock__desc { margin-bottom: var(--spacing-lg); }
.pblock__media { display: flex; gap: var(--spacing-sm); height: var(--pblock-media-height); }
.pblock__img { position: relative; flex: 1 1 0; min-width: 0; border-radius: var(--radius); overflow: hidden; }
.pblock__img > img, .pblock__img > picture > img, .pblock__img > video { width: 100%; height: 100%; object-fit: cover; object-position: 50% var(--media-focus-y); }
.pblock--swap .pblock__decal { grid-column: 8 / 13; grid-row: 1; justify-self: end; }
.pblock--swap .pblock__body { grid-column: 1 / 6; grid-row: 1; }
/* Model rows (/a/models/, 2026-09-26, matched to counter-uas by the numbers): the model's status sits in the decal's
   second column (p.pblock__status.t-label: x295 at 1440, x195 at 390; the reference leaves it empty), so the name,
   the description and the button keep the reference's gaps. The workflows (ul.pblock__list.t-p) follow the
   description in its type, --spacing-sm under it (the name-to-description gap) and --spacing-lg above the button (the
   reference's description-to-button gap); only the block grows. Each workflow is a solid link in the sentence case
   its client page uses ("Claims and denials"), in the list's type, then the client and that page's status, dim, on
   the same line where it fits and on the next where it does not. */
.pblock__decal:has(.pblock__status) .pblock__tag { white-space: normal; text-wrap: balance; }   /* a long industry wraps inside its own
   column instead of running into the status ("Dental and healthcare revenue cycle" did at every width from 768 up); same line count on phones */
.pblock__desc:has(+ .pblock__list) { margin-bottom: var(--spacing-sm); }
.pblock__list { display: flex; flex-direction: column; gap: var(--spacing-2xs); margin-bottom: var(--spacing-lg); }
.pblock__item { display: flex; flex-wrap: wrap; align-items: baseline; gap: var(--spacing-3xs) var(--spacing-2xs); }
.pblock__item .link-btn { font-size: inherit; line-height: inherit; letter-spacing: inherit; text-transform: none; }
@media (max-width: 767.98px) {
  .pblock { padding: var(--spacing-lg) var(--page-margin); }
  .pblock__grid { display: flex; flex-direction: column; gap: var(--spacing-sm); margin: var(--spacing-lg) 0; }
  .pblock__decal { grid-template-columns: 1fr 1fr; column-gap: 0; width: 100%; }
  .pblock__tag { white-space: normal; max-width: var(--pblock-tag-measure-mobile); }
  .pblock__code { margin-top: 0; }
  .pblock__name { margin-top: var(--spacing-sm); }
  .pblock__media { height: var(--pblock-media-height-mobile); }
}

/* Model drawings (/a/models/, 2026-09-27; reference/a-build/diagrams/models-page/PLAN.md). Each model row's slot holds
   one drawing of the exploded-axonometric family (reference/a-build/diagrams/kit.js), inlined as four svg.dx cuts. The
   kit's stylesheet lives here once, so no inline svg carries a <style>; every value is a token, and the drawing takes
   the row's ground (--background, --foreground). Each cut is drawn 1:1 at one slot and shows only in its own band, so
   its 11-unit text never renders under 10px and its 13-unit title never over 20px (measured, PLAN.md):
     svg.dx-cut--phone-s  below 470    280 x 350    the 320 slot; the slot takes --pblock-drawing-aspect-phone (4:5)
     svg.dx-cut--phone-l  470 to 767   470 x 382.5  the 510 slot; the slot keeps --pblock-media-height-mobile (75vw)
     svg.dx-cut--tablet   768 to 1179  744 x 418.5  the 800 slot; the slot takes --pblock-drawing-aspect-tablet (16:9)
     svg.dx-cut--desk     1180 up      1224 x 448   the 1280 slot; the slot keeps --pblock-media-height (35vw) */
.pblock__media--drawing .dx-cut { display: none; width: 100%; height: 100%; }
@media (min-width: 1180px) { .pblock__media--drawing .dx-cut--desk { display: block; } }
@media (min-width: 768px) and (max-width: 1179.98px) {
  .pblock__media--drawing { height: auto; aspect-ratio: var(--pblock-drawing-aspect-tablet); }
  .pblock__media--drawing .dx-cut--tablet { display: block; }
}
@media (min-width: 470px) and (max-width: 767.98px) { .pblock__media--drawing .dx-cut--phone-l { display: block; } }
@media (max-width: 469.98px) {
  .pblock__media--drawing { height: auto; aspect-ratio: var(--pblock-drawing-aspect-phone); }
  .pblock__media--drawing .dx-cut--phone-s { display: block; }
}
.dx { color: var(--foreground); }
.dx text { fill: currentColor; font-family: var(--type-family-code); font-weight: var(--type-weight); letter-spacing: 0; }   /* the page's tracking stops here: the kit measures every label untracked */
.dx .ln, .dx .ghost, .dx .ghost-d, .dx .rule, .dx .flow, .dx .flow-q, .dx .bound, .dx .bound-q, .dx .lead, .dx .sight, .dx .plane-open { fill: none; stroke: currentColor; stroke-width: var(--hairline); stroke-linecap: round; stroke-linejoin: round; }
.dx .face { fill: var(--background); stroke: currentColor; stroke-width: var(--hairline); stroke-linejoin: round; }
.dx .shade { fill: color-mix(in srgb, currentColor calc(var(--diagram-area-opacity) * 100%), var(--background)); stroke: currentColor; stroke-width: var(--hairline); stroke-linejoin: round; }
.dx .plane, .dx .tint { fill: currentColor; fill-opacity: var(--diagram-area-opacity); stroke: none; }
.dx .plane-ln { fill: currentColor; fill-opacity: var(--diagram-area-opacity); stroke: currentColor; stroke-width: var(--hairline); stroke-linejoin: round; }
.dx .plane-open, .dx .flow, .dx .flow-q, .dx .ghost-d { stroke-dasharray: var(--diagram-dash); stroke-linecap: butt; }
.dx .bound, .dx .bound-q { stroke-dasharray: var(--diagram-dash-bound); stroke-linecap: butt; }
.dx .bound { stroke-width: var(--icon-stroke); }
.dx .solid { fill: currentColor; stroke: none; }
.dx .solid-ln { fill: currentColor; stroke: currentColor; stroke-width: var(--hairline); stroke-linejoin: round; }
.dx .ghost, .dx .rule, .dx .sight { stroke-opacity: var(--faint-opacity); }
.dx .ghost-d, .dx .flow-q { stroke-opacity: var(--soft-opacity); }
.dx .lead { stroke-opacity: var(--muted-opacity); }
.dx .rule { opacity: var(--shown-opacity); }   /* a.css 1 dims every .rule (the page's hairline) to --muted-opacity; the drawing's faint page rules keep their own */
.dx .ring { fill: var(--background); stroke: currentColor; stroke-width: var(--hairline); }
.dx .knock { fill: var(--background); stroke: none; }
.dx .fig { fill: currentColor; opacity: var(--faint-opacity); }
.dx .fig-ink, .dx .dot { fill: currentColor; }
.dx .lab, .dx .cap { font-size: var(--diagram-text-md); }
.dx .tag, .dx .num { font-size: var(--diagram-text); font-weight: var(--type-weight-medium); }
.dx .ttl { font-size: var(--diagram-text-lg); font-weight: var(--type-weight-medium); }
.dx .tag, .dx .ttl { letter-spacing: var(--diagram-tracking); }
/* The pipeline drawings (STYLE-v2, reference/a-build/diagrams/STYLE-v2.md): extruded solids shaded by face, the
   foreground's share over the ground (--diagram-face-top, -front, -side; a dark ground turns the light around), one
   accent for the data moving and the chosen cells (--diagram-accent, rebound where pink falls under 3:1), boxed stage
   tags and short callouts. Every value is a token; the drawing follows the row's ground. */
.dx .f-top, .dx .f-front, .dx .f-side, .dx .a-top, .dx .a-front, .dx .a-side { stroke: currentColor; stroke-opacity: var(--muted-opacity); stroke-width: var(--hairline); stroke-linejoin: round; }   /* the solids' edges soft, as the reference's are; the words, the flows and the people keep the full ink */
.dx .f-top { fill: color-mix(in srgb, currentColor calc(var(--diagram-face-top) * 100%), var(--background)); }
.dx .f-front { fill: color-mix(in srgb, currentColor calc(var(--diagram-face-front) * 100%), var(--background)); }
.dx .f-side { fill: color-mix(in srgb, currentColor calc(var(--diagram-face-side) * 100%), var(--background)); }
.dx .a-top { fill: color-mix(in srgb, currentColor calc(var(--diagram-face-top) * 100%), var(--diagram-accent)); }
.dx .a-front { fill: color-mix(in srgb, currentColor calc(var(--diagram-face-front) * 100%), var(--diagram-accent)); }
.dx .a-side { fill: color-mix(in srgb, currentColor calc(var(--diagram-face-side) * 100%), var(--diagram-accent)); }
.dx .acc { fill: var(--diagram-accent); stroke: none; }
.dx .acc-zone { fill: var(--diagram-accent); fill-opacity: var(--diagram-area-opacity); stroke: var(--diagram-accent); stroke-width: var(--hairline); stroke-dasharray: var(--diagram-dash); }
.dx .acc-flow { fill: none; stroke: var(--diagram-accent); stroke-width: var(--icon-stroke); stroke-dasharray: var(--diagram-dash); stroke-linecap: butt; }
.dx .stg-box { fill: var(--background); stroke: currentColor; stroke-width: var(--hairline); }
.dx .stg { font-size: var(--diagram-text); font-weight: var(--type-weight-medium); letter-spacing: var(--diagram-tracking); }
.dx .call { font-size: var(--diagram-text-md); }
/* The rows' own links (the benchmark post in Altadena's row and the first "why" row): outside .art-prose, a.css leaves
   every a undecorated, so these reuse .art-prose a's underline. */
.pblock__desc a, .frow__body a { text-decoration: underline; text-underline-offset: var(--underline-offset); text-decoration-thickness: var(--hairline); }

/* Outlined button: 1px outline, fills on hover (--button-fill, --button-ink: tokens.css rebinds them by ground). */
.btn-outline {
  display: inline-flex; align-items: center; padding: var(--spacing-2xs) var(--control-padding-inline);
  outline: var(--hairline) solid currentColor; outline-offset: 0;
  font-size: var(--type-button-size); line-height: var(--type-button-leading); letter-spacing: var(--type-button-tracking); text-transform: var(--type-title-transform);
  transition: background-color var(--motion-normal) var(--motion-ease-fade), color var(--motion-normal) var(--motion-ease-fade), outline-color var(--motion-normal) var(--motion-ease-fade);
}
.btn-outline:hover { background-color: var(--button-fill); color: var(--button-ink); outline-color: var(--button-fill); }
.btn-outline:focus-visible { outline-width: var(--ring-width); outline-offset: var(--button-ring-offset); }

/* Link button: text, our own arrow, underline that draws in and replays. */
.link-btn { position: relative; display: inline-flex; align-items: center; gap: var(--spacing-2xs); font-size: var(--type-link-size); line-height: var(--type-link-leading); letter-spacing: var(--type-link-tracking); text-transform: var(--type-title-transform); white-space: nowrap; opacity: var(--muted-opacity); transition: opacity var(--motion-normal) var(--motion-ease-fade); }
.link-btn--solid { opacity: 1; }
.link-btn:hover, a:hover .link-btn, .nfeat:hover .link-btn, .nrow:hover .link-btn, .mlink:hover .link-btn { opacity: 1; }
.link-btn__label { position: relative; }
.link-btn__label::after { content: ""; position: absolute; left: 0; right: 0; bottom: calc(var(--link-underline-offset) * -1); height: var(--hairline); background: currentColor; transform: scaleX(0); transform-origin: 0 50%; transition: transform var(--motion-normal) var(--motion-ease-fade); }
.link-btn.is-in .link-btn__label::after { transform: scaleX(1); }
.link-btn.is-replay .link-btn__label::after { animation: a-underline-replay var(--motion-fade) var(--motion-ease-fade); }
.link-btn__icon, .icon-link__icon { width: var(--icon-size-arrow); height: var(--icon-size-arrow); flex: none; }
html:not(.js) .link-btn__label::after { transform: scaleX(1); }

/* Icon-only link (news slice 'all'). */
.icon-link { display: inline-flex; align-items: center; opacity: var(--muted-opacity); transition: opacity var(--motion-normal) var(--motion-ease-fade); }
.icon-link:hover { opacity: 1; }

/* 8  Tabbed capabilities, spec cards, accordion ------------------------ */

.caps { display: flex; flex-direction: column; gap: var(--spacing-lg); padding: var(--spacing-2xl) var(--page-margin); }
.caps__tabs {
  position: relative; display: flex; gap: var(--spacing-lg); padding-bottom: var(--hairline);
  overflow-x: auto; scrollbar-width: none;
  background: linear-gradient(var(--border), var(--border)) 0 100% / 100% var(--hairline) no-repeat;
}
.caps__tabs::-webkit-scrollbar { display: none; }
.caps__tab {
  flex: none; padding: var(--spacing-sm) 0; white-space: nowrap;
  font-size: var(--type-small-size); line-height: var(--type-small-leading); letter-spacing: var(--type-small-tracking);
  opacity: var(--muted-opacity);
  transition: opacity var(--motion-reveal) var(--motion-ease-reveal) var(--tab-delay, 0s), transform var(--motion-reveal) var(--motion-ease-reveal) var(--tab-delay, 0s);
}
.caps__tab[aria-selected="true"] { opacity: 1; }
.caps__tab:focus-visible { outline-offset: var(--ring-offset-inset); }
@media (hover: hover) { .caps__tab:hover { opacity: 1; } }
html.js .caps:not(.is-mounted) .caps__tab { opacity: var(--soft-opacity); transform: translate3d(calc(var(--reveal-shift) * -1), 0, 0); }
.caps__ind { position: absolute; left: 0; bottom: 0; width: var(--hairline); height: var(--hairline); background: currentColor; transform-origin: 0 0; transition: transform var(--motion-reveal) var(--motion-ease-reveal); pointer-events: none; }

.caps__frame { display: grid; padding: var(--spacing-lg) 0; background: var(--surface-muted); color: var(--surface-canvas-foreground); }
.caps__item {
  grid-area: 1 / 1; display: grid; grid-template-columns: repeat(12, minmax(0, 1fr)); grid-template-rows: auto 1fr auto;
  column-gap: var(--gutter); row-gap: var(--row-gap); visibility: hidden;
}
.caps__item.is-active, .caps__item.is-leaving { visibility: visible; }
.caps__item.is-active { z-index: var(--layer-above); }
.caps__item.is-leaving { z-index: var(--layer-raised); }
.caps__item:focus-visible { outline-offset: var(--ring-offset-inset); }
.caps__count { grid-column: 1 / 3; grid-row: 1; display: flex; gap: 0; padding-left: var(--spacing-lg); }
/* The total sits a fixed 1.2rem from where the digits start (x64 -> x83.2 at
   1440), whatever their width; the slot clips vertically only. */
.caps__count > .roll { flex: none; width: var(--caps-count-width); overflow: visible; clip-path: inset(0 calc(var(--caps-count-bleed) * -1) 0 0); }
.caps__label { grid-column: 3 / 9; grid-row: 1; }
.caps__desc { grid-column: 3 / 7; grid-row: 2; padding-bottom: var(--caps-desc-padding-bottom); }
.caps__num { grid-column: 1 / 3; grid-row: 3; align-self: end; height: var(--caps-num-height); margin-bottom: calc(var(--spacing-sm) * -1); padding-left: var(--spacing-lg); overflow: hidden; }
.caps__media { grid-column: 9 / 13; grid-row: 1 / 4; align-self: start; margin-right: var(--spacing-lg); aspect-ratio: var(--aspect-video); overflow: hidden; }
.caps__fig { width: 100%; height: 100%; }
.caps__fig > img, .caps__fig > picture > img, .caps__fig > video, .caps__fig > .ph { width: 100%; height: 100%; object-fit: cover; }

/* Parts swap between panels: rolling digits, masked lines, pushed image. */
.roll { display: inline-block; overflow: hidden; vertical-align: top; }
.roll__in { display: block; transform: translate3d(0, 100%, 0); }
.caps__item.is-active .roll__in { transform: none; transition: transform var(--motion-slow) var(--motion-ease-swap); }
.caps__item.is-leaving .roll__in { transform: translate3d(0, -100%, 0); transition: transform var(--motion-slow) var(--motion-ease-swap); }
.caps__num .roll { display: block; }
.caps__item.is-active .caps__num .roll__in, .caps__item.is-leaving .caps__num .roll__in { transition-duration: var(--motion-bar); }
.caps__item.is-leaving .caps__total { visibility: hidden; }
.caps__label { opacity: 0; -webkit-mask-image: linear-gradient(90deg, var(--mask-solid) var(--caps-label-fade-start), var(--mask-clear) var(--caps-label-fade-end)); mask-image: linear-gradient(90deg, var(--mask-solid) var(--caps-label-fade-start), var(--mask-clear) var(--caps-label-fade-end)); -webkit-mask-size: var(--caps-label-mask-size) 100%; mask-size: var(--caps-label-mask-size) 100%; -webkit-mask-position: 100% 0; mask-position: 100% 0; }
.caps__item.is-active .caps__label { opacity: 1; -webkit-mask-position: 0 0; mask-position: 0 0; transition: -webkit-mask-position var(--motion-mask) var(--motion-ease-ui), mask-position var(--motion-mask) var(--motion-ease-ui); }
.caps__item.is-leaving .caps__label { opacity: 0; -webkit-mask-position: 0 0; mask-position: 0 0; transition: opacity var(--motion-slow) var(--motion-ease-reveal); }
.caps__desc .split-line { display: block; overflow: hidden; }
.caps__desc .split-line__in { display: block; transform: translate3d(0, 100%, 0); }
.caps__item.is-active .split-line__in { transform: none; transition: transform var(--motion-swap) var(--motion-ease-swap) calc(var(--li, 0) * var(--motion-stagger)); }
.caps__item.is-leaving .split-line__in { transform: translate3d(0, -100%, 0); transition: transform var(--motion-swap) var(--motion-ease-swap) calc(var(--li, 0) * var(--motion-stagger)); }
.caps__fig { transform: translate3d(100%, 0, 0); }
.caps__item.is-active .caps__fig { transform: none; transition: transform var(--motion-swap) var(--motion-ease-swap); }
.caps__item.is-leaving .caps__fig { transform: translate3d(-50%, 0, 0); transition: transform var(--motion-swap) var(--motion-ease-swap); }
@media (max-width: 767.98px) {
  .caps { gap: var(--spacing-lg); padding: var(--spacing-2xl) var(--page-margin); }
  .caps__tabs { gap: var(--spacing-lg); }
  .caps__frame { padding: var(--spacing-lg) 0; }
  .caps__item { row-gap: 0; }
  .caps__count { grid-column: 2 / 5; padding-left: 0; }
  .caps__label { grid-column: 5 / 13; justify-self: end; width: var(--caps-label-width-mobile); }   /* x161 w209 on a 350 frame */
  .caps__desc { grid-column: 2 / 12; padding: var(--spacing-sm) 0 var(--spacing-xl); }
  .caps__num { grid-column: 2 / 5; height: auto; margin-bottom: calc(var(--caps-num-pull-mobile) * -1); padding-left: 0; }
  .caps__media { grid-column: 5 / 13; grid-row: 3; align-self: end; justify-self: end; width: var(--caps-media-width-mobile); margin-right: var(--spacing-lg); }   /* 181x102 at x161 */
}

/* Spec cards (space): bone cards with a 40px top-right chamfer. */
.speccards { padding: 0 var(--page-margin) var(--spacing-2xl); }
.speccards__grid { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); column-gap: var(--gutter); row-gap: var(--row-gap); }
.speccard {
  display: flex; flex-direction: column; gap: var(--spacing-xl); padding: var(--spacing-lg);
  background: var(--surface-canvas); color: var(--surface-canvas-foreground);
  clip-path: polygon(0 0, calc(100% - var(--speccard-chamfer)) 0, 100% var(--speccard-chamfer), 100% 100%, 0 100%);
}
.speccard__head { display: flex; align-items: flex-start; gap: var(--spacing-lg); }
.speccard__title { font-weight: var(--type-weight-bold); }
.speccard__fig { aspect-ratio: var(--speccard-aspect); }
.speccard__fig > img, .speccard__fig > picture > img, .speccard__fig > .ph, .speccard__fig > svg { width: 100%; height: 100%; object-fit: contain; }   /* svg: our own line drawing in the card ink (Models, 2026-09-26) */
.speccard__specs { display: flex; flex-direction: column; gap: var(--spacing-xs); }
.speccard__spec { padding-top: var(--spacing-2xs); border-top: var(--hairline) solid var(--border-strong); }
.speccard__spec dt { font-weight: var(--type-weight-bold); }
@media (max-width: 767.98px) {
  .speccards { padding: 0 var(--page-margin) var(--spacing-2xl); }
  .speccards__grid { grid-template-columns: 1fr; row-gap: var(--spacing-sm); }
  .speccard { gap: var(--spacing-lg); padding: var(--spacing-lg); }
  .speccard__fig { aspect-ratio: var(--speccard-aspect-mobile); }
  .speccard__specs { gap: var(--spacing-sm); }
  .speccard__spec { padding-top: var(--spacing-2xs); }
}

/* Accordion (space): hover band from the bottom, height expand, +/-. */
.acc { padding: var(--spacing-2xl) var(--page-margin) var(--spacing-3xl); }
.acc__item { position: relative; }
.acc__btn {
  position: relative; isolation: isolate; display: grid; grid-template-columns: repeat(12, minmax(0, 1fr)); column-gap: var(--gutter);
  align-items: center; width: 100%; padding: var(--spacing-lg) 0; transition: color var(--motion-normal) var(--motion-ease-panel);
}
.acc__btn::before { content: ""; position: absolute; inset: 0; z-index: var(--layer-below); background: var(--surface-card); transform: scaleY(0); transform-origin: 50% 100%; transition: transform var(--motion-normal) var(--motion-ease-panel); }
.acc__icon { position: relative; grid-column: 2 / 3; width: var(--accordion-icon-size); height: var(--accordion-icon-size); }
.acc__icon::before, .acc__icon::after { content: ""; position: absolute; left: 0; top: 50%; width: 100%; height: var(--line-medium); margin-top: calc(var(--line-medium) / -2); background: currentColor; transition: transform var(--motion-normal) var(--motion-ease-panel); }
.acc__icon::after { transform: rotate(90deg); }
.acc__item.is-open .acc__icon::after { transform: rotate(90deg) scaleX(0); }
.acc__title { grid-column: 5 / 10; }
.acc__tag { grid-column: 10 / 12; display: flex; align-items: center; min-height: var(--accordion-tag-height); }
.acc__tag img { height: var(--accordion-tag-height); width: auto; transition: filter var(--motion-normal) var(--motion-ease-panel); }
.acc__panel { display: grid; grid-template-rows: 0fr; transition: grid-template-rows var(--motion-slow) var(--motion-ease-panel); }
.acc__item.is-open .acc__panel { grid-template-rows: 1fr; }
.acc__panel > * { min-height: 0; overflow: hidden; }
.acc__panel-grid { display: grid; grid-template-columns: repeat(12, minmax(0, 1fr)); column-gap: var(--gutter); }
.acc__desc { grid-column: 5 / 9; max-width: var(--accordion-desc-measure); padding: var(--spacing-sm) 0 var(--spacing-lg); }
.acc__logos { grid-column: 10 / 13; display: grid; grid-template-columns: 1fr 1fr; gap: var(--spacing-2xs); padding: var(--spacing-sm) 0 var(--spacing-lg); }
@media (hover: hover) {
  .acc__item:not(.is-open) .acc__btn:hover { color: var(--surface-canvas-foreground); }
  .acc__item:not(.is-open) .acc__btn:hover::before { transform: scaleY(1); }
  .acc__item:not(.is-open) .acc__btn:hover .acc__tag img { filter: invert(1); }
}
.acc__btn:focus-visible { outline-offset: var(--ring-offset-inset); }
html:not(.js) .acc__panel { grid-template-rows: 1fr; }
.acc__h { display: block; }
.acc__row { --dur: var(--motion-rise); }
.acc__rule { color: var(--muted-foreground-inverse); --o: 1; --dur: var(--motion-rise); }
.on-pink .acc__rule { color: inherit; --o: var(--muted-opacity); } /* on the pink the rules take the ink, not the ink ground's light grey */
@media (max-width: 767.98px) {
  .acc { padding: var(--spacing-2xl) var(--page-margin) var(--spacing-3xl); }
  .acc__btn { padding: var(--spacing-lg) 0; }
  .acc__icon { grid-column: 1 / 2; }
  .acc__title { grid-column: 3 / 10; }
  .acc__tag { grid-column: 10 / 13; justify-content: flex-end; min-height: var(--accordion-tag-height-mobile); }
  .acc__desc { grid-column: 3 / 13; max-width: none; padding: var(--spacing-sm) 0 var(--spacing-lg); }
  .acc__logos { grid-column: 3 / 13; }
}

/* Accordion log: a keyed list in a panel for content longer than the 360
   description (a dated build log, next steps keyed by state). Cols 5-12,
   7.5rem key column, 1rem gap, reference right-aligned, rows split by a
   1px line at 20% of the text colour. Mobile: key above text, cols 3-12. */
.acc__log { grid-column: 5 / 12; padding: var(--spacing-sm) 0 0; }
.acc__log-row {
  display: grid; grid-template-columns: var(--accordion-log-date-width) minmax(0, 1fr) auto; column-gap: var(--spacing-sm); align-items: baseline;
  padding: var(--list-row-padding-top) 0 var(--list-row-padding-bottom);
  border-top: var(--hairline) solid var(--border-subtle);
}
.acc__log-row:first-child { border-top: 0; padding-top: 0; }
.acc__log-key, .acc__log-ref { opacity: var(--muted-opacity); white-space: nowrap; }
.acc__log-ref { text-transform: none; }   /* commit hashes and PR numbers keep their case */
.acc__log-text { min-width: 0; }
.acc__log-note { grid-column: 5 / 12; display: flex; flex-wrap: wrap; align-items: baseline; gap: var(--spacing-2xs) var(--spacing-md); padding: var(--spacing-md) 0 var(--spacing-lg); }
.acc__log:last-child { padding-bottom: var(--spacing-lg); }
@media (max-width: 767.98px) {
  .acc__log, .acc__log-note { grid-column: 3 / 13; }
  .acc__log-row { grid-template-columns: minmax(0, 1fr) auto; row-gap: var(--accordion-log-row-gap-mobile); }
  .acc__log-key { grid-column: 1; grid-row: 1; }
  .acc__log-ref { grid-column: 2; grid-row: 1; }
  .acc__log-text { grid-column: 1 / -1; grid-row: 2; }
}

/* 9  Cards ---------------------------------------------------------------- */

/* Cards (land missions; + figure = lattice features). Mobile: swipe track. */
.cards { display: flex; flex-direction: column; gap: var(--spacing-sm); padding: var(--spacing-lg) 0; }
.cards__title { padding-inline: var(--page-margin); margin-bottom: var(--spacing-xl); }
.cards__track { display: flex; gap: var(--spacing-sm); padding-inline: var(--page-margin); }
.cards__cell { display: flex; flex: 1 1 0; min-width: 0; }
.card { display: flex; flex-direction: column; flex: 1 1 auto; padding: var(--spacing-lg) var(--spacing-sm); background: var(--surface-inverse); color: var(--surface-inverse-foreground); }
.card__title { min-height: var(--card-title-min-height); font-weight: var(--type-weight-medium); }
.card__fig { display: flex; align-items: center; justify-content: center; margin: var(--spacing-sm) 0; aspect-ratio: var(--card-aspect); }
.card__fig > img, .card__fig > svg, .card__fig > .ph { max-width: var(--card-figure-width); height: 100%; width: auto; object-fit: contain; border-radius: var(--radius); }
.card__fig > .ph { width: var(--card-figure-width); aspect-ratio: auto; }

/* Numbered media cards (lattice characteristics). */
.ncards { padding: var(--spacing-2xl) 0; }
.ncards__title { padding: 0 var(--page-margin) var(--spacing-lg); }
.ncards .cards__track { gap: var(--spacing-sm); }
.ncard { display: flex; flex-direction: column; flex: 1 1 auto; padding: var(--spacing-sm); background: var(--surface-inverse); color: var(--surface-inverse-foreground); }
.ncard__fig { margin-top: var(--spacing-sm); margin-bottom: var(--media-line-gap); aspect-ratio: var(--ncard-aspect); border-radius: var(--radius); overflow: hidden; } /* +4px below the media, as measured (marzyos pass) */
.ncard__title { margin-top: var(--spacing-sm); padding-bottom: var(--spacing-sm); border-bottom: var(--hairline) solid var(--surface-inverse-foreground); }
.ncard__body { margin-top: var(--ncard-body-gap); }
/* Link row (Models, 2026-09-26): a link button under the body, held at the card foot so the links line up across the row. */
.ncard__more { margin-top: auto; padding-top: var(--spacing-lg); }

@media (max-width: 767.98px) {
  .cards { gap: var(--spacing-sm); padding: var(--spacing-lg) 0; }
  .cards__title { margin-bottom: var(--spacing-xl); }
  .cards__track, .ncards .cards__track { gap: 0; padding-inline: var(--page-margin); overflow-x: auto; scroll-snap-type: x mandatory; scroll-padding-inline: var(--page-margin); scrollbar-width: none; overscroll-behavior-x: contain; }
  .cards__track::-webkit-scrollbar { display: none; }
  .cards__cell { flex: 0 0 var(--cards-cell-width-mobile); padding-right: var(--cards-cell-gap-mobile); scroll-snap-align: start; }
  .ncards .cards__cell { flex-basis: var(--ncards-cell-width-mobile); }
  .cards__cell:last-child { flex-basis: calc(var(--cards-cell-width-mobile) - var(--cards-cell-gap-mobile)); padding-right: 0; }
  .ncards .cards__cell:last-child { flex-basis: calc(var(--ncards-cell-width-mobile) - var(--cards-cell-gap-mobile)); }
  .card { padding: var(--spacing-lg) var(--spacing-sm); }
  .card__fig { aspect-ratio: var(--card-aspect-mobile); }
  .card__body { padding-top: var(--spacing-lg); } /* 28 measured (marzyos pass) */
  .ncards { padding: var(--spacing-2xl) 0; }
  .ncards__title { margin-right: var(--spacing-lg); }
  .ncard__body { margin-top: var(--ncard-body-gap-mobile); }
}

/* Media with rows (lattice mission cycles). */
.mrows { padding: var(--spacing-2xl) var(--page-margin) var(--spacing-lg); }
.mrows__title { margin-bottom: var(--spacing-lg); }
.mrows__media { grid-column: 1 / 7; align-self: start; margin-bottom: var(--media-line-gap); aspect-ratio: var(--aspect-video); border-radius: var(--radius); overflow: hidden; } /* +4px below the media, as measured (marzyos pass) */
.mrows__list { grid-column: 7 / 13; }
.mrow__grid { display: grid; grid-template-columns: repeat(12, minmax(0, 1fr)); column-gap: var(--gutter); padding: var(--spacing-sm) 0 var(--spacing-lg); }
.mrow__num { grid-column: 1 / 2; margin-top: var(--mrow-num-nudge); }
.mrow__title { grid-column: 2 / 7; }
.mrow__body { grid-column: 7 / 13; }
@media (max-width: 767.98px) {
  .mrows { padding: var(--spacing-2xl) var(--page-margin) var(--spacing-lg); }
  .mrows .grid { row-gap: var(--spacing-lg); }
  .mrows__media, .mrows__list { grid-column: 1 / -1; }
  .mrow__grid { row-gap: var(--spacing-sm); padding: var(--spacing-sm) 0 var(--spacing-xl); }
  .mrow__num { grid-column: 1 / 3; }
  .mrow__title { grid-column: 3 / 13; }
  .mrow__body { grid-column: 3 / 13; }
}

/* Timeline (draft 1, 2026-09-25; first on /a/clients/amoroso-companies/): media with rows
   whose media is a sticky screen holding one picture per row.
   section.mrows.mrows--timeline[data-timeline] > .grid > .mrows__media.timeline__screen
   (> .timeline__frame.media[data-key] x n) + .mrows__list > .mrow[data-key] x n. a.js
   (initTimeline) shows the frame of the current row, the last whose top has passed the reading
   line; the current row is at full strength, the rest at --muted-opacity. A new frame fades in over the one
   before (which stays opaque beneath it, so the screen never dips to the ground) and settles from
   a 4% push. On a phone the screen sticks above the rows with a ring of the ground round it, so
   rows pass under it cleanly. Reduced motion: frames switch with no fade or push. No script: the
   first frame, every row at full strength. */
.mrows--timeline .timeline__screen { position: sticky; top: calc(var(--header-vis, 0px) + var(--spacing-lg)); z-index: var(--layer-raised); background: var(--surface-muted); }
.timeline__screen > .timeline__frame { position: absolute; inset: 0; border-radius: var(--radius); } /* beats .media { position: relative } (section 11) */
html:not(.js) .timeline__frame ~ .timeline__frame { display: none; }
html.js .timeline__frame { opacity: 0; z-index: var(--layer-base); }
html.js .timeline__frame.is-was { opacity: 1; z-index: var(--layer-raised); }
html.js .timeline__frame.is-on { opacity: 1; z-index: var(--layer-above); transition: opacity var(--motion-frame) var(--motion-ease-ui); }
.timeline__frame > img, .timeline__frame > picture > img { transition: opacity var(--motion-image) var(--motion-ease-fade), transform var(--motion-push) var(--motion-ease-reveal); }
html.js .timeline__frame:not(.is-on) > img, html.js .timeline__frame:not(.is-on) > picture > img { transform: scale(var(--timeline-frame-scale)); }
.mrows--timeline .mrow { min-height: var(--timeline-row-min-height); }
html.js .mrows--timeline .mrow { opacity: var(--muted-opacity); transition: opacity var(--motion-dim) var(--motion-ease-ui); }
html.js .mrows--timeline .mrow.is-current { opacity: 1; }
@media (max-width: 767.98px) {
  /* the rows pass under the screen: a strip of the ground above it and a fade below it (the frames clip themselves) */
  .mrows--timeline .timeline__screen { top: calc(var(--header-vis, 0px) + var(--spacing-xs)); overflow: visible; }
  .mrows--timeline .timeline__screen::before, .mrows--timeline .timeline__screen::after { content: ""; position: absolute; left: calc(-1 * var(--page-margin)); right: calc(-1 * var(--page-margin)); pointer-events: none; }
  .mrows--timeline .timeline__screen::before { bottom: 100%; height: var(--timeline-screen-lead-mobile); background: var(--background); }
  .mrows--timeline .timeline__screen::after { top: 100%; height: var(--timeline-screen-fade-mobile); background: linear-gradient(var(--background) var(--timeline-screen-fade-solid), var(--surface-clear)); }
  .mrows--timeline .mrow { min-height: 0; }
}
@media (prefers-reduced-motion: reduce) {
  html.js .timeline__frame.is-on, .timeline__frame > img, .timeline__frame > picture > img, html.js .mrows--timeline .mrow { transition: none; }
  html.js .timeline__frame:not(.is-on) > img, html.js .timeline__frame:not(.is-on) > picture > img { transform: none; }
}

/* Band (lattice resources): coloured ground, title, rule, three columns. */
.band { padding: var(--spacing-2xl) var(--page-margin) var(--band-padding-bottom); }
.band__title { margin-bottom: var(--spacing-lg); }
.band [data-reveal] { --dur: var(--motion-rise); }
.band__grid { padding: var(--spacing-xl) 0 var(--spacing-2xl); }
.band__c1 { grid-column: 1 / 3; }
.band__c2 { grid-column: 4 / 6; }
.band__c3 { grid-column: 9 / 12; display: flex; flex-direction: column; align-items: flex-start; gap: var(--spacing-sm); }
@media (max-width: 767.98px) {
  .band { padding: var(--spacing-xl) var(--page-margin) 0; }
  .band__grid { display: flex; flex-direction: column; gap: var(--spacing-lg); padding: var(--spacing-xl) 0 var(--spacing-2xl); }
}

/* Publisher conversations: site-native cards with a reader-started video. */
.video-notes { padding: var(--spacing-xl) var(--page-margin); }
.video-notes__heading { margin-bottom: var(--spacing-lg); }
.video-notes__grid { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: var(--gutter); }
.video-note { min-width: 0; padding: var(--spacing-md); display: flex; flex-direction: column; gap: var(--spacing-sm); }
.video-note__intro { max-width: none; }
.video-note__video { width: 100%; }
.video-note__video .reading-card__player { margin: 0 0 var(--spacing-sm); }
.video-note__foot { display: flex; justify-content: space-between; flex-wrap: wrap; gap: var(--spacing-sm); margin-top: auto; }
.video-note__foot a { text-decoration: underline; text-underline-offset: var(--spacing-3xs); }
.art-video { margin-top: var(--article-media-gap); }
.source-note { display: flex; flex-direction: column; align-items: flex-start; gap: var(--spacing-sm); padding: var(--spacing-lg); margin-top: var(--article-media-gap); }
.source-note a { text-decoration: underline; text-underline-offset: var(--spacing-3xs); }
.source-thumb { display: flex; align-items: center; justify-content: center; padding: var(--spacing-2xs); text-align: center; overflow-wrap: anywhere; }
.source-thumb .t-label { text-transform: none; }
@media (max-width: 767px) {
  .video-notes__grid { grid-template-columns: 1fr; gap: var(--spacing-md); }
  .video-note { padding: var(--spacing-sm); }
}

/* 10  News and article ---------------------------------------------------- */

.news { display: flex; flex-direction: column; gap: var(--spacing-lg); padding: var(--spacing-xl) 0; }
.news__head { margin: 0 var(--page-margin); }
.news__title { grid-column: 1 / 7; text-transform: var(--type-title-transform); }
.news__all { grid-column: 7 / 8; justify-self: start; align-self: stretch; display: flex; align-items: center; padding-right: var(--spacing-xs); }
.news__head .rule { grid-column: 1 / 13; }
.news__list { padding-inline: var(--page-margin); }
.news__heading { padding: 0 var(--page-margin) var(--spacing-lg); text-transform: var(--type-title-transform); }
@media (max-width: 767.98px) {
  .news { gap: var(--spacing-lg); padding: var(--spacing-xl) 0; }
  .news__head { row-gap: var(--spacing-lg); }                            /* rule 28 under the title */
  .news__title { grid-column: 1 / 8; }
  .news__all { grid-column: 8 / 9; justify-self: start; }   /* right after the title: x227 at 390 */
  .news .nfeat { padding-bottom: var(--spacing-2xl); }                    /* 56 reserved under the featured text */
}

/* Featured item: text cols 1-5, 16:9 image cols 7-12. */
.nfeat { position: relative; padding-inline: var(--page-margin); }
.nfeat__text { grid-column: 1 / 6; display: flex; flex-direction: column; align-items: flex-start; gap: var(--spacing-xl); }
.nfeat__head { display: flex; flex-direction: column; gap: var(--spacing-2xs); align-self: stretch; }
.nfeat__title { text-transform: var(--type-title-transform); }
.nrow__byline { margin-top: var(--spacing-sm); }
.nfeat__title a::after { content: ""; position: absolute; inset: 0; z-index: var(--layer-raised); }
.nfeat__desc { width: var(--nfeat-desc-width); }
.nfeat__media { grid-column: 7 / 13; margin-bottom: var(--media-line-gap); aspect-ratio: var(--aspect-video); border-radius: var(--radius); overflow: hidden; }   /* its box stands 4px taller than the image: 385.9 for 381.9 */
@media (max-width: 767.98px) {
  .nfeat .grid { display: flex; flex-direction: column; gap: var(--spacing-lg); }
  .nfeat__media { order: -1; width: 100%; }
  .nfeat__text { gap: var(--spacing-lg); }
  .nfeat__desc { width: 100%; }
}
/* On the index page the featured item keeps 68 (4rem + the image's 4px) above
   the list heading [5rem below the text on mobile]. */
.nfeat--index { padding-bottom: var(--spacing-2xl); }
@media (max-width: 767.98px) { .nfeat--index { padding-bottom: var(--nfeat-index-padding-bottom-mobile); } }

/* List row: rule, date and title left, 16:9 thumbnail cols 11-12. */
.nrow { position: relative; padding-bottom: var(--spacing-xl); }
.nrow__grid { margin-top: var(--spacing-sm); row-gap: 0; }
.nrow__text { grid-column: 1 / 7; display: flex; flex-direction: column; justify-content: space-between; align-items: flex-start; gap: var(--spacing-sm); }
.nrow__text > div { align-self: stretch; }   /* full column, so the 90% title never wraps early on a short title */
.nrow__title { width: var(--nrow-title-width); margin-top: var(--nrow-title-gap); }
.nrow__title a::after { content: ""; position: absolute; inset: 0; z-index: var(--layer-raised); }
.nrow__thumb { grid-column: 11 / 13; aspect-ratio: var(--aspect-video); border-radius: var(--radius); overflow: hidden; }
@media (max-width: 767.98px) {
  .nrow__text { grid-column: 1 / 10; justify-content: flex-start; gap: var(--spacing-lg); }
  .nrow__title { font-size: var(--type-small-size); line-height: var(--type-small-leading); letter-spacing: var(--type-small-tracking); }
  .nrow__thumb { grid-column: 10 / 13; }
}

/* Index list (news index): rows 1rem under the search band, 2rem above the pager. */
.nidx-list__rows { padding-top: var(--spacing-sm); padding-bottom: var(--spacing-lg); }

/* Search band (news index): a full-bleed ink band that filters the rows of the
   list it names (a.js; nothing is sent anywhere). 1440: 91 tall = 1rem + 43
   input + 2rem, 2rem to the list; field 50% wide, 16px icon, 1px warm-1
   underline that turns white on focus. 390: 72 tall with a caps Search
   button that opens the field in place. */
.sband { display: block; padding: var(--spacing-sm) var(--page-margin) var(--spacing-lg); margin: 0 0 var(--spacing-lg); }
.sband__field { position: relative; display: block; width: var(--sband-field-width); }
.sband__icon { position: absolute; left: 0; top: var(--sband-icon-top); width: var(--icon-size-small); height: var(--icon-size-small); pointer-events: none; }
.sband__input {
  display: block; width: 100%; height: calc(var(--spacing-md) + var(--type-small-size) * var(--type-small-leading) + var(--hairline)); margin: 0;
  padding: var(--spacing-sm) 0 var(--spacing-2xs) var(--spacing-lg); border: 0; border-bottom: var(--hairline) solid var(--border); border-radius: 0;
  background: var(--surface-clear); color: inherit; -webkit-appearance: none; appearance: none;
  font-family: var(--type-family); font-weight: var(--type-weight);
  font-size: var(--type-small-size); line-height: var(--type-small-leading); letter-spacing: var(--type-small-tracking);
  transition: border-color var(--motion-normal) var(--motion-ease-fade);
}
.sband__input::placeholder { color: inherit; opacity: var(--muted-opacity); text-transform: uppercase; }
.sband__input::-webkit-search-cancel-button, .sband__input::-webkit-search-decoration { -webkit-appearance: none; appearance: none; }
.sband__input:focus { border-bottom-color: var(--surface-inverse-foreground); }
.sband__input:focus-visible { outline: var(--ring-width) solid currentColor; outline-offset: var(--ring-offset-control); }
.sband__toggle { display: none; }
.sband__empty { padding: var(--spacing-sm) 0 var(--spacing-xl); }
.nrow[hidden], .sband__empty[hidden] { display: none; }
@media (max-width: 767.98px) {
  .sband { padding: var(--spacing-lg) var(--page-margin); }
  .sband__toggle { display: flex; align-items: center; padding-block: var(--sband-toggle-padding-block-mobile); }
  .sband__field { display: none; width: 100%; margin-top: var(--spacing-sm); }
  .sband.is-open .sband__field { display: block; }
}

/* Pager (news index): right-aligned under the list, 2rem around; 28px round
   arrows (1px border, our own 10px arrow) that fill with the text colour on
   hover (.5s), disabled at .2; 2rem-square page numbers at .6, current 1. */
.pager { display: flex; justify-content: flex-end; align-items: center; gap: var(--spacing-sm); padding: var(--spacing-lg) var(--page-margin); }
.pager__pages { display: flex; align-items: center; }
.pager__page {
  display: flex; align-items: center; justify-content: center; width: var(--pager-page-size); height: var(--pager-page-size);
  font-size: var(--type-link-size); line-height: var(--type-link-leading); letter-spacing: var(--type-link-tracking);
  opacity: var(--muted-opacity); transition: opacity var(--motion-slow) var(--motion-ease-standard);
}
.pager__page[aria-current], .pager__page:hover { opacity: 1; }
.pager__page:focus-visible { outline-offset: var(--ring-offset-inset); }
.pager__arrow {
  display: flex; align-items: center; justify-content: center; flex: none;
  width: var(--pager-arrow-size); height: var(--pager-arrow-size); padding: var(--pager-arrow-padding); border: var(--hairline) solid currentColor; border-radius: var(--pager-arrow-radius);
  transition: background-color var(--motion-slow) var(--motion-ease-standard), color var(--motion-slow) var(--motion-ease-standard);
}
.pager__arrow svg { width: var(--pager-arrow-icon-size); height: var(--pager-arrow-icon-size); }
.pager__arrow:not(:disabled):hover { background-color: var(--foreground, var(--surface-inverse)); color: var(--background, var(--surface-inverse-foreground)); }
.pager__arrow:disabled { opacity: var(--disabled-opacity); cursor: default; }

/* Article */
.art-head { padding: var(--article-top) var(--page-margin) 0; }
.art-head__title { grid-column: 1 / 8; text-wrap: balance; }   /* same line count, no one-word last line */
.art-head__meta { margin-top: var(--article-meta-gap); display: flex; flex-direction: column; gap: var(--spacing-sm); }
.art-head__byline { text-transform: var(--type-title-transform); }
.author-byline { display: flex; align-items: center; gap: var(--spacing-2xs); }
.author-byline__photo { display: block; width: var(--author-photo-size); height: var(--author-photo-size); flex: 0 0 var(--author-photo-size); object-fit: cover; border-radius: var(--round-radius); }
.art-head__media { margin-top: var(--article-media-gap); aspect-ratio: var(--aspect-video); border-radius: var(--radius); overflow: hidden; }
.art-head .rule { margin-top: calc(var(--spacing-lg) + var(--media-line-gap)); }   /* their image box carries a 4px line gap */
.art-body { padding: var(--spacing-lg) var(--page-margin) var(--article-bottom); }
.art-rail { grid-column: 1 / 4; align-self: start; position: sticky; top: calc(var(--header-vis, 0px) + var(--spacing-lg)); transition: top var(--motion-slow) var(--motion-ease-ui); }
.art-share { display: flex; align-items: baseline; gap: var(--spacing-sm); margin-top: var(--spacing-lg); }
.art-share__btn { font-size: var(--type-label-size); line-height: var(--type-label-leading); letter-spacing: var(--type-label-tracking); font-weight: var(--type-weight-bold); text-transform: uppercase; transition: opacity var(--motion-normal) var(--motion-ease-fade); }
.art-share__btn:hover { opacity: var(--muted-opacity); }
.art-share__status { position: absolute; width: var(--hairline); height: var(--hairline); overflow: hidden; clip-path: inset(50%); white-space: nowrap; }
.art-prose { grid-column: 7 / 13; font-size: var(--type-body-size); line-height: var(--type-body-leading); letter-spacing: var(--type-body-tracking); --prose-measure: none; max-width: var(--prose-measure); }
.art-prose > * + * { margin-top: var(--prose-gap); }
.art-prose h2, .art-prose h3 { font-size: var(--type-h6-size); line-height: var(--type-h6-leading); letter-spacing: var(--type-h6-tracking); font-weight: var(--type-weight-medium); }
.art-prose p + h2, .art-prose p + h3 { margin-top: var(--spacing-4xl); }
.art-prose figure { margin: var(--spacing-4xl) 0; }
.art-prose figure + * { margin-top: 0; }
.art-prose strong { font-weight: var(--type-weight-medium); }
.art-prose a { text-decoration: underline; text-underline-offset: var(--underline-offset); text-decoration-thickness: var(--hairline); }
.art-prose ul { padding-left: var(--prose-indent); list-style: disc; }
.art-prose figcaption { margin-top: var(--spacing-sm); font-size: var(--type-small-size); line-height: var(--type-small-leading); opacity: var(--muted-opacity); }
/* Run-in subhead: body size at 500, one blank line above, no gap below. */
.art-prose .art-sub { font-size: inherit; line-height: inherit; letter-spacing: inherit; font-weight: var(--type-weight-medium); }
.art-prose p + .art-sub, .art-prose ul + .art-sub { margin-top: var(--prose-gap); }
.art-prose > .art-sub + * { margin-top: 0; }
/* Prose figure: the frame takes the image's own ratio. */
.art-fig__frame { aspect-ratio: var(--ratio, var(--article-figure-aspect)); }
@media (max-width: 767.98px) {
  .art-head { padding-top: var(--article-top); }
  .art-head__title { grid-column: 1 / -1; }
  .art-head__meta { margin-top: var(--spacing-xl); }    /* date 42 under the title */
  .art-head__media { margin-top: var(--spacing-lg); }   /* hero 28 under the byline */
  .art-rail { display: none; }
  .art-prose { grid-column: 1 / -1; }
}

/* 11  Media, placeholder, dot field, wavefield ---------------------------- */

.media { position: relative; overflow: hidden; }
.media > img, .media > video, .media > picture > img { width: 100%; height: 100%; object-fit: cover; }
/* A responsive still (<picture> with AVIF and WebP sources, COMPONENTS.md "Product media")
   takes no box of its own, so its img lays out, crops and fades exactly as a bare img. */
.media > picture { display: contents; }
.media > .ph { position: absolute; inset: 0; aspect-ratio: auto; height: 100%; }
.media--contain > img, .media--contain > picture > img { object-fit: contain; }
/* Focus: move a cover crop without an inline object-position. Default is the
   product block's 50% 20%; --focus-m overrides it below 768. */
.has-focus > img, .has-focus > picture > img, .has-focus > video { object-position: var(--focus, 50% var(--media-focus-y)); }
@media (max-width: 767.98px) { .has-focus > img, .has-focus > picture > img, .has-focus > video { object-position: var(--focus-m, var(--focus, 50% var(--media-focus-y))); } }
/* Demo crop: our recordings (/a/media/product/<app>/, 2880x1710; the old
   /media/demo 2400x1426 files have the same framing) are an app window on a
   white field (14.9-97.6% across, 11.9-97.3% down). Scale until the window
   fills the box width and centre it vertically. Set --demo-box-aspect (height / width)
   when the box is not 16:9, e.g. .3663 for a 1376x504 product image. */
.media--demo > video, .media--demo > img, .media--demo > picture > img {
  width: var(--demo-crop-width); height: auto; max-width: none; object-fit: fill;
  margin-left: calc(var(--demo-crop-left) * -1); margin-top: calc((var(--demo-box-aspect) / 2 - var(--demo-crop-centre)) * 100%);
}
html.js .media img:not(.is-loaded) { opacity: 0; }
.media img { transition: opacity var(--motion-image) var(--motion-ease-fade); }
/* Caption chip: what the frame shows (e.g. "Invented data"), bottom-left on
   a veil so it reads over light captures and dark film alike. Takes no
   space; the Pause/Play toggle sits bottom-right, so they never meet. */
.media__cap {
  position: absolute; left: var(--spacing-sm); bottom: var(--spacing-sm); z-index: var(--layer-above);
  max-width: calc(100% - var(--media-cap-clearance)); margin: 0; padding: var(--media-cap-padding-block) var(--media-cap-padding-inline);
  background: var(--overlay); -webkit-backdrop-filter: blur(var(--veil-blur)); backdrop-filter: blur(var(--veil-blur));
  border-radius: var(--radius); color: var(--overlay-foreground);
  font-family: var(--type-family-code); font-size: var(--type-label-size); font-weight: var(--type-weight); line-height: var(--type-code-leading); letter-spacing: var(--type-code-tracking); text-transform: none;
  pointer-events: none;
}
@media (max-width: 767.98px) { .media__cap { left: var(--media-cap-inset-mobile); bottom: var(--media-cap-inset-mobile); max-width: calc(100% - var(--media-cap-clearance-mobile)); } }
.media__toggle {
  position: absolute; right: var(--spacing-sm); bottom: var(--spacing-sm); z-index: var(--layer-controls); padding: var(--spacing-2xs) var(--control-padding-inline);
  background: var(--overlay); color: var(--overlay-foreground);
  font-size: var(--type-label-size); line-height: var(--type-label-leading); letter-spacing: var(--type-label-tracking); font-weight: var(--type-weight-medium); text-transform: uppercase;
  opacity: 0; pointer-events: none;
}
.media__toggle:focus-visible { opacity: 1; pointer-events: auto; outline-color: var(--overlay-foreground); }

/* Placeholder frame: a neutral field at the slot's exact ratio. */
.ph {
  position: relative; display: flex; align-items: flex-end; justify-content: flex-start;
  width: 100%; aspect-ratio: var(--ratio, var(--aspect-video)); padding: var(--spacing-sm);
  background: var(--ph-bg, var(--surface-inverse)); color: var(--ph-fg, var(--surface-inverse-foreground));
  box-shadow: inset 0 0 0 var(--hairline) var(--ph-line, var(--placeholder-line));
}
.ph--fill { position: absolute; inset: 0; aspect-ratio: auto; height: 100%; }
.ph--bone { --ph-bg: var(--surface-canvas); --ph-fg: var(--surface-canvas-foreground); --ph-line: var(--placeholder-line-inverse); }
.ph--stone { --ph-bg: var(--surface-muted); --ph-fg: var(--surface-canvas-foreground); --ph-line: var(--placeholder-line-inverse); }
.ph__label { font-family: var(--type-family-code); font-size: var(--type-label-size); line-height: var(--type-code-leading); letter-spacing: var(--type-code-tracking); opacity: var(--placeholder-label-opacity); }

/* Drawn diagram: an inline SVG (viewBox 640x360 fills a 16:9 slot) standing in
   where no capture exists yet. Strokes and text follow currentColor; labels in
   the code face, uppercase; each carries role="img", a full aria-label and a
   "Placeholder drawing" note. Bone with ink by default, .dg--surface-canvas-foreground inverts. */
.dg { display: block; width: 100%; height: 100%; background: var(--surface-canvas); color: var(--surface-canvas-foreground); }
.dg--ink { background: var(--surface-inverse); color: var(--surface-inverse-foreground); }
.dg-t { fill: currentColor; font-family: var(--type-family-code); font-weight: var(--type-weight-medium); letter-spacing: var(--diagram-tracking); text-transform: uppercase; }
.dg-dim { opacity: var(--soft-opacity); }
.dg-raw .dg-t, .dg-t.dg-raw { text-transform: none; letter-spacing: 0; }   /* identifiers keep their case */
.dg-box { fill: none; stroke: currentColor; stroke-width: var(--icon-stroke); vector-effect: non-scaling-stroke; }
.dg-solid { fill: currentColor; stroke: none; }
.dg-line { fill: none; stroke: currentColor; stroke-width: var(--icon-stroke); vector-effect: non-scaling-stroke; }
.dg-arrow { fill: currentColor; stroke: none; }
.dg-inv { fill: var(--surface-canvas); }
.dg--ink .dg-inv { fill: var(--surface-inverse); }

/* Live drawing: svg.dg.dg--live[data-inview] (a.js adds .is-in in view). The
   drawing assembles once and rests; one pass, under five seconds, so it needs
   no pause control (WCAG 2.2.2). Parts, each timed by --beat (its delay in beats of
   --motion-stagger, 50ms):
   .dg-fade fades in; .dg-draw (a path with pathLength="1") draws from its
   start, scaling with the drawing (a dash ignores pathLength under a
   non-scaling stroke); g.dg-step (rect.dg-box + rect.dg-step__fill +
   text.dg-step__t) lights solid for a beat, so a row of steps reads as work
   moving through them; .dg-step--hold stays lit. Reduced motion, no script:
   the finished drawing. First used on /a/clients/lazar-company/. */
.dg--live { --dg-inv: var(--surface-canvas); }
.dg--live.dg--ink { --dg-inv: var(--surface-inverse); }
.dg-draw { stroke-dasharray: 1 1; vector-effect: none; stroke-width: var(--diagram-stroke); }
.dg-step__fill { fill: currentColor; fill-opacity: 0; stroke: none; }
.dg-step--hold .dg-step__fill { fill-opacity: 1; }
.dg-step--hold .dg-step__t { fill: var(--dg-inv, var(--surface-canvas)); }
html.js .dg--live:not(.is-in) .dg-fade { opacity: 0; }
html.js .dg--live:not(.is-in) .dg-draw { stroke-dashoffset: 1; }
html.js .dg--live:not(.is-in) .dg-step--hold .dg-step__fill { fill-opacity: 0; }
html.js .dg--live:not(.is-in) .dg-step--hold .dg-step__t { fill: currentColor; }
@media (prefers-reduced-motion: no-preference) {
  .dg--live .dg-fade { transition: opacity var(--motion-fade) var(--motion-ease-ui) calc(var(--beat, 0) * var(--motion-stagger)); }
  .dg--live .dg-draw { transition: stroke-dashoffset var(--motion-draw-line) var(--motion-ease-reveal) calc(var(--beat, 0) * var(--motion-stagger)); }
  .dg--live.is-in .dg-step:not(.dg-step--hold) .dg-step__fill { animation: dg-beat var(--motion-beat) var(--motion-ease-ui) calc(var(--beat, 0) * var(--motion-stagger)) both; }
  .dg--live.is-in .dg-step:not(.dg-step--hold) .dg-step__t { animation: dg-beat-t var(--motion-beat) var(--motion-ease-ui) calc(var(--beat, 0) * var(--motion-stagger)) both; }
  .dg--live.is-in .dg-step--hold .dg-step__fill { animation: dg-lit var(--motion-bar) var(--motion-ease-ui) calc(var(--beat, 0) * var(--motion-stagger)) both; }
  .dg--live.is-in .dg-step--hold .dg-step__t { animation: dg-lit-t var(--motion-bar) var(--motion-ease-ui) calc(var(--beat, 0) * var(--motion-stagger)) both; }
}
@keyframes dg-beat { 0%, 100% { fill-opacity: 0; } 30%, 55% { fill-opacity: 1; } }
@keyframes dg-beat-t { 0%, 100% { fill: currentColor; } 30%, 55% { fill: var(--dg-inv); } }
@keyframes dg-lit { from { fill-opacity: 0; } to { fill-opacity: 1; } }
@keyframes dg-lit-t { from { fill: currentColor; } to { fill: var(--dg-inv); } }

/* Dot field: our own canvas behind the wordmark hero. */
.dotfield { position: fixed; left: 0; top: 0; z-index: var(--layer-base); width: 100%; height: var(--screen-height); pointer-events: none; background: var(--surface-muted); }

/* Wavefield: the dot field's plane drawn as a line mesh, the same canvas behind the wordmark hero (its ground
   before a.js draws; stone, or the warm charcoal in its dark mode). */
.wavefield { position: fixed; left: 0; top: 0; z-index: var(--layer-base); width: 100%; height: var(--screen-height); pointer-events: none; background: var(--wavefield-background); }

/* 12  Reduced motion ------------------------------------------------------ */

@media (prefers-reduced-motion: reduce) {
  html.js [data-reveal], html.js [data-reveal]:not(.is-in) { opacity: var(--o, 1); transform: none; transition: none; }
  html.js [data-reveal="mask"] .mask-in, .mask-in { transform: translate3d(0, calc(var(--reveal-mask-rest) * -1), 0); transition: none; }
  .loadbar { display: none; }
  .site-header, .site-header__bar::before, .site-menu, .site-menu.is-open, .switcher, .switcher.is-shown { transition: none; }
  html.js .caps:not(.is-mounted) .caps__tab { opacity: var(--muted-opacity); transform: none; }
  .caps__tab, .caps__ind, .roll__in, .split-line__in, .caps__fig, .caps__label,
  .caps__item.is-active .roll__in, .caps__item.is-leaving .roll__in,
  .caps__item.is-active .split-line__in, .caps__item.is-leaving .split-line__in,
  .caps__item.is-active .caps__fig, .caps__item.is-leaving .caps__fig,
  .caps__item.is-active .caps__label, .caps__item.is-leaving .caps__label { transition: none; }
  .acc__panel, .acc__btn, .acc__btn::before, .acc__icon::after, .fcol__panel { transition: none; }
  .link-btn__label::after { transition: none; }
  .link-btn.is-replay .link-btn__label::after { animation: none; }
  .art-rail { transition: none; }
  .pager__page, .pager__arrow, .sband__input { transition: none; }
}

/* 13  Homepage v2 ---------------------------------------------------------
   /a/v2/: one viewport tall, and the document never scrolls. The header sits
   on bone; the client list lives in a bone pane, the only thing that scrolls;
   a wide, low film band is pinned to the bottom with the footer on it.
   Everything below is namespaced (stage, pane, crow, filmband) and applies
   only where that markup is used. See COMPONENTS.md, "Homepage v2". */

/* Stage: <html class="stage">. The body is exactly one viewport tall (100dvh,
   100vh where dvh is unknown): the header's height, the pane, the film band. */
html.stage { height: 100%; overflow: hidden; overscroll-behavior: none; background: var(--surface-canvas); }
html.stage body {
  display: flex; flex-direction: column;
  height: var(--screen-height); height: var(--screen-height-dynamic); min-height: 0; overflow: hidden;
  padding-top: var(--header-height);
  background: var(--surface-canvas); color: var(--surface-canvas-foreground);
}

/* Scroll pane: .pane > main.pane__scroll[tabindex=0][aria-label]. The list
   starts where the About eyebrow does (20dvh from the top of the window) at
   the page margin; the content fades out over --fade at the bottom edge (and
   --fade-top at the top once scrolled), and can scroll well past its last row.
   The ring is drawn on the pane's frame (.pane), inset 2px. */
.pane {
  --fade: var(--pane-fade-length);
  --fade-top: var(--pane-fade-top-length);
  --pane-top: calc(var(--page-top) - var(--header-height));
  position: relative; flex: 1 1 auto; min-height: 0;
}
@supports (height: 1dvh) { .pane { --pane-top: calc(var(--page-top-dynamic) - var(--header-height)); } }
.pane__scroll {
  height: 100%; overflow-x: hidden; overflow-y: auto; overscroll-behavior: contain;
  padding: var(--pane-top) var(--page-margin) calc(var(--fade) + var(--pane-scroll-tail));
  scroll-padding-block: var(--fade-top) var(--fade);
  scrollbar-width: thin; scrollbar-color: var(--pane-scrollbar-thumb) var(--surface-clear);
  --pane-mask: linear-gradient(to bottom, var(--mask-clear), var(--mask-solid) var(--fade-top), var(--mask-solid) calc(100% - var(--fade)), var(--pane-mask-soft) calc(100% - var(--fade) * var(--pane-mask-soft-at)), var(--pane-mask-faint) calc(100% - var(--fade) * var(--pane-mask-faint-at)), var(--mask-clear) calc(100% - var(--pane-mask-edge)));
  -webkit-mask-image: var(--pane-mask); mask-image: var(--pane-mask);
}
.pane__scroll:focus-visible { outline: none; }
.pane:has(> .pane__scroll:focus-visible) { outline: var(--ring-width) solid var(--surface-canvas-foreground); outline-offset: var(--ring-offset-inset); }
@media (max-width: 767.98px) { .pane { --fade: var(--pane-fade-length-mobile); } }
@media (max-height: 540px) { .pane { --fade: var(--pane-fade-length-short); } }   /* short windows (a phone held sideways) */

/* Client rows: ul.crows[data-crows] > li.crow, after a lede (h1.crows__lede).
   Each row is a disclosure: button.crow__trigger[aria-expanded][aria-controls]
   > span.crow__line > span.crow__name + span.crow__tag > span.crow__tag-label;
   then div.crow__detail#id > div.crow__body > ul.crow__items[aria-label] of
   li (text, or a.crow__link; li[data-state=unavailable] = in build, dim).
   The homepage row, set in the display face: collapsed to one tight line; a
   row opens on hover (mouse), tap (touch) or keyboard focus. The tag is a
   label that stays hidden (taking no width) until it decodes in: one row at a
   time when idle, and on the row that is open. */
.crows__lede { font-size: var(--type-h6-size); line-height: var(--type-h6-leading); letter-spacing: var(--type-h6-tracking); opacity: var(--muted-opacity); }
.crows {
  --row-fs: var(--client-row-size); --row-lh: var(--client-row-leading); --row-ls: var(--client-row-tracking);           /* 40/46 at 1440 */
  --sub-fs: var(--type-h6-size); --sub-lh: var(--type-h6-leading); --sub-ls: var(--type-h6-tracking);
  margin-top: var(--spacing-md);
}
/* a row is as wide as its widest line (name + tag, or the workflows), so the
   hit area and the focus ring are the text, not the empty bone beside it */
.crow { position: relative; width: fit-content; max-width: 100%; }
.crow__trigger {
  display: block; width: 100%;
  font-size: var(--row-fs); line-height: var(--row-lh); letter-spacing: var(--row-ls);
  -webkit-user-select: none; user-select: none;
  transition: opacity var(--motion-normal) var(--motion-ease-fade);
}
.crow__line { text-wrap: balance; }
.crow__trigger:focus-visible { outline: none; }
.crow:has(> .crow__trigger:focus-visible) { outline: var(--ring-width) solid currentColor; outline-offset: var(--client-row-ring-offset); }

.crow__tag {
  position: relative; display: inline-block; margin-left: var(--spacing-xs);
  font-size: var(--type-label-size); line-height: var(--type-label-leading); letter-spacing: var(--type-label-tracking); font-weight: var(--type-weight-medium); text-transform: uppercase;
  white-space: nowrap; opacity: var(--muted-opacity); transition: opacity var(--motion-normal) var(--motion-ease-fade);
}
/* hidden (and undecided while the script loads): read, but no width */
html.js .crow__tag:not([data-tag]), .crow__tag[data-tag="hidden"] { margin-left: 0; }
html.js .crow__tag:not([data-tag]) .crow__tag-label, .crow__tag[data-tag="hidden"] .crow__tag-label {
  position: absolute; width: var(--hairline); height: var(--hairline); overflow: hidden; clip-path: inset(50%);
}
/* decoding in or out: the label keeps the box (transparent, still read);
   the aria-hidden live copy draws the letters on top of it */
.crow__tag[data-tag="in"] .crow__tag-label, .crow__tag[data-tag="out"] .crow__tag-label { color: var(--surface-clear); }
.crow__tag-live { position: absolute; left: 0; top: 0; display: none; white-space: pre; }
.crow__tag[data-tag="in"] .crow__tag-live, .crow__tag[data-tag="out"] .crow__tag-live { display: block; }

.crow__detail {
  display: grid; grid-template-rows: 0fr; opacity: 0; visibility: hidden;
  transition: grid-template-rows var(--motion-normal) var(--motion-ease-ui), opacity var(--motion-normal) var(--motion-ease-ui), visibility 0s var(--motion-ease-steady) var(--motion-normal);
}
.crow__trigger[aria-expanded="true"] + .crow__detail, html:not(.js) .crow__detail {
  grid-template-rows: 1fr; opacity: 1; visibility: visible;
  transition: grid-template-rows var(--motion-normal) var(--motion-ease-ui), opacity var(--motion-normal) var(--motion-ease-ui), visibility 0s;
}
/* the clip box reaches .5rem past the text so a link's focus ring is not cut */
.crow__body { min-height: 0; overflow: hidden; margin-inline: calc(var(--spacing-2xs) * -1); padding-inline: var(--spacing-2xs); }
.crow__items {
  display: flex; flex-wrap: wrap; gap: 0 var(--client-row-items-gap); padding: var(--client-row-items-padding-top) 0 var(--client-row-items-padding-bottom);
  font-size: var(--sub-fs); line-height: var(--sub-lh); letter-spacing: var(--sub-ls);
}
.crow__items [data-state="unavailable"] { opacity: var(--muted-opacity); }
.crow__link {
  text-decoration: underline; text-decoration-thickness: var(--hairline); text-underline-offset: var(--underline-offset-row);
  text-decoration-color: var(--underline-soft); transition: text-decoration-color var(--motion-normal) var(--motion-ease-fade);
}
.crow__link:hover { text-decoration-color: currentColor; }

/* pointed at (wide windows, fine pointers): the other rows fall to --muted-opacity and
   drop their tags */
@media (min-width: 64em) and (hover: hover) and (pointer: fine) {
  .crows:has(> .crow:hover, > .crow :focus-visible) > .crow:not(:hover):not(:has(:focus-visible)) .crow__trigger { opacity: var(--muted-opacity); }
  .crows:has(> .crow:hover, > .crow :focus-visible) > .crow:not(:hover):not(:has(:focus-visible)) .crow__tag { opacity: 0; }
}

@media (max-width: 767.98px) {
  .crows__lede { font-size: var(--type-p-size); line-height: var(--type-p-leading); letter-spacing: var(--type-p-tracking); }
  .crows {
    --row-fs: var(--client-row-size-mobile); --row-lh: var(--client-row-leading-mobile); --row-ls: var(--client-row-tracking-mobile);         /* 24/28.8 at 390 */
    --sub-fs: var(--type-small-size); --sub-lh: var(--type-small-leading); --sub-ls: var(--type-small-tracking);
    margin-top: var(--client-rows-gap-mobile);
  }
  .crow__tag { margin-left: var(--spacing-2xs); }
  .crow__items { padding: var(--spacing-3xs) 0 var(--client-row-items-padding-bottom-mobile); }
}

/* Film band: footer.filmband[data-filmband] > video.filmband__video (muted,
   loop, playsinline, preload none, poster; aria-hidden) + .filmband__bar
   (nav.filmband__nav of links, button.filmband__toggle[data-filmband-toggle]
   Pause/Play). Full bleed, pinned under the pane, about 5.3:1 of the window
   width (270 at 1440, clamped 200 to 320; the floor gives way to 32vh on a
   short window, e.g. a phone held sideways). The film covers the band under an
   ink veil that holds the footer text at 4.5:1 or better over its brightest
   frames (measured, reference/a-build/v2 and v2/verify: worst 5.66:1). */
.filmband {
  --filmband-h: clamp(min(var(--filmband-height-min), var(--filmband-height-min-vh)), min(var(--filmband-height-fluid), var(--filmband-height-fluid-vh)), var(--filmband-height-max)); /* Sam 2026-09-24: "a touch more height" (was 168-260, 220 at 1440) */
  --filmband-veil: linear-gradient(to top, var(--film-plate), var(--film-plate) var(--filmband-veil-hold), var(--filmband-veil-end));
  position: relative; flex: none; height: var(--filmband-h); overflow: hidden;
  background: var(--surface-inverse); color: var(--overlay-foreground);
}
.filmband__video { position: absolute; inset: 0; width: 100%; height: 100%; max-width: none; object-fit: cover; object-position: 50% 50%; }
.filmband::before { content: ""; position: absolute; inset: 0; z-index: var(--layer-raised); background: var(--filmband-veil); pointer-events: none; }
.filmband__bar {
  position: absolute; left: 0; right: 0; bottom: 0; z-index: var(--layer-above);
  display: flex; align-items: flex-end; justify-content: space-between; gap: var(--spacing-2xs) var(--spacing-lg);
  padding: 0 var(--page-margin) var(--spacing-md);
}
.filmband__nav { display: flex; flex-wrap: wrap; gap: var(--spacing-3xs) var(--spacing-lg); }
.filmband__nav a, .filmband__toggle {
  display: block; font-size: var(--type-small-size); line-height: var(--type-small-leading); letter-spacing: var(--type-small-tracking);
  white-space: nowrap;
  text-decoration: underline var(--hairline) var(--surface-clear); text-underline-offset: var(--underline-offset-row); transition: text-decoration-color var(--motion-normal) var(--motion-ease-fade);
}
/* hover underlines, as on the /a/ homepage footer, instead of dimming: a word at
   --muted-opacity over the film's brightest frames falls to about 3.2:1 */
.filmband__nav a:hover, .filmband__toggle:hover { text-decoration-color: currentColor; }
.filmband__toggle[hidden] { display: none; }
@media (max-width: 767.98px) {
  .filmband__bar { gap: var(--spacing-sm); padding-bottom: var(--spacing-sm); }
  .filmband__nav { flex-wrap: nowrap; gap: 0 var(--spacing-sm); }
  .filmband__nav a, .filmband__toggle { padding-block: var(--spacing-2xs); }
}

@media (prefers-reduced-motion: reduce) {
  .crow__trigger, .crow__tag, .crow__detail, .crow__trigger[aria-expanded="true"] + .crow__detail, .crow__link,
  .filmband__nav a, .filmband__toggle { transition: none; }
}

/* 14  Homepage v3: projector ----------------------------------------------
   /a/v3/: the stage of section 13 with the client list on the left and a
   tall panel on the right, between the header and the footer. The brand
   film plays in it while no row is open; the open row (pointed at, focused
   or tapped) plays its client's reel instead: their world, then our product
   for them. Nothing is laid over the imagery: the one caption and Pause/Play
   sit under the panel, in the footer's row, and the footer is plain text on
   bone. Below 64em the panel becomes a 16:10 card over the list. Namespaced
   (proj); does nothing on a page without [data-projector]. See COMPONENTS.md,
   "Projector". */

/* Layout: div.proj[data-projector] > .pane + .proj__panel + footer.proj__foot.
   Two columns: the list, then the panel, five columns of the page grid wide
   (563 at 1440, 39%; 394 at 1024), on the right margin. Two rows: the pane
   and the panel's screen, then the footer's row, as tall as the header.
   It keeps the one-screen stage (only the pane scrolls) on purpose: the
   panel must stay beside whichever row drives it, and on a phone the card
   must stay in view while rows further down are tapped; a scrolling
   document would carry the panel, the footer and the card away. */
.proj {
  --proj-w: calc((var(--screen-width) - 2 * var(--page-margin) - 11 * var(--gutter)) * 5 / 12 + 4 * var(--gutter));
  --foot-h: var(--header-height);
  --foot-pad: calc((var(--foot-h) - var(--type-small-size) * var(--type-small-leading)) / 2);
  flex: 1 1 auto; min-height: 0;
  display: grid; grid-template-columns: minmax(0, 1fr) var(--proj-w); grid-template-rows: minmax(0, 1fr) var(--foot-h);
  column-gap: var(--gutter); padding-right: var(--page-margin);
}
.proj > .pane { grid-area: 1 / 1 / 2 / 2; min-width: 0; }
.proj .pane__scroll { padding-right: var(--spacing-2xs); }
/* A workflow link is an inline block as tall as its line, so its focus ring
   (2px out, 2px wide) stays inside the open row's clip box (.crow__body);
   as a plain inline box its font's content area reaches past the line and
   the clip cuts the ring's top edge (v2 still does). */
.proj .crow__link { display: inline-block; }
.proj__panel { grid-area: 1 / 2 / 3 / 3; display: grid; grid-template-rows: minmax(0, 1fr) var(--foot-h); min-width: 0; min-height: 0; }

/* Screen: .proj__screen[aria-hidden] > video.proj__film + .proj__frame x n
   (added by a.js from template[data-frame]). The film covers the screen,
   centred: its black scenes are a reticle and figures around the centre, so
   a tall crop keeps them. Each frame covers it too, at its --focus (below
   64em --focus-m), and stacks above the last; .is-on fades it in over
   --proj-fade (set per cut by a.js), .is-push pushes it in very slowly
   (1.12 over 24s, from its focus). A product screen (.proj__frame--screen)
   is a window on stone instead: the capture's top-left corner --inset from
   the screen's, 1.1x the height left under it, so it always bleeds off the
   right and bottom edges and every crop starts at the app's own corner
   (its sidebar and header) at any panel size; it pushes from that corner. */
.proj__screen { position: relative; overflow: hidden; min-height: 0; border-radius: var(--radius); background: var(--surface-inverse); isolation: isolate; }
.proj__film { position: absolute; inset: 0; width: 100%; height: 100%; max-width: none; object-fit: cover; object-position: 50% 50%; }
.proj__frame { position: absolute; inset: 0; opacity: 0; transition: opacity var(--proj-fade, var(--motion-frame)) var(--motion-ease-panel); }
.proj__frame--screen { --inset: var(--page-margin); background: var(--surface-muted); }
.proj__frame.is-on { opacity: 1; }
.proj__frame > picture { display: contents; }
.proj__frame img {
  position: absolute; inset: 0; width: 100%; height: 100%; max-width: none;
  object-fit: cover; object-position: var(--focus, 50% 50%); transform-origin: var(--focus, 50% 50%);
}
.proj__frame.is-push img { animation: proj-push var(--motion-push-long) var(--motion-ease-steady) both; }
.proj__frame--screen img {
  inset: var(--inset) auto auto var(--inset); width: auto; height: calc((100% - var(--inset)) * var(--proj-screen-scale));
  object-fit: fill; transform-origin: 0 0; border-top-left-radius: var(--radius);
}
@keyframes proj-push { to { transform: scale(var(--proj-push-scale)); } }
html[data-motion="off"] .proj__frame img { animation-play-state: paused; }
/* An archival photograph (.proj__frame--print; style --print-w: its pixel
   width over 2, in px; --print-ar: its width over its height) is a print on
   stone instead: shown whole, never cropped, and never wider than its own
   pixels hold at 2x. It is as wide as the screen less --inset each side, at
   most --print-w, and short enough to keep --inset above it; it stands
   centred on the screen's floor, --inset up, over its caption, and pushes in
   from its base. In the phone card that makes it the card's height, centred. */
.proj__screen { container-type: size; }
.proj__frame--print { --print-w: 100%; --print-ar: 1; --inset: var(--page-margin); background: var(--surface-muted); }
.proj__frame--print img {
  inset: auto auto var(--inset) 50%; translate: -50% 0;
  width: min(calc(100% - 2 * var(--inset)), var(--print-w, 100%)); height: auto;
  transform-origin: 50% 100%;
}
@supports (width: 1cqh) {
  .proj__frame--print img { width: min(var(--container-width) - 2 * var(--inset), var(--print-w, var(--container-width)), (var(--container-height) - 2 * var(--inset)) * var(--print-ar, 1)); }
}

/* Slate: .proj__slate > p.proj__cap[data-projector-cap][aria-hidden] +
   button.proj__toggle[data-projector-toggle][hidden] (span[data-projector-word]
   Pause/Play + .sr-only " the film"). Under the screen, on the footer's
   baseline: the caption in the label style at --muted-opacity (at most two lines, so
   the row never grows; a.js writes a no-break space when there is none, so
   it always has a baseline to sit on), the toggle on the right margin. The
   toggle keeps its box while hidden (until a.js runs), so nothing moves when
   it appears. */
.proj__slate { display: flex; align-items: baseline; justify-content: space-between; gap: var(--spacing-sm); min-width: 0; padding-top: var(--foot-pad); }
.proj__cap {
  flex: 1 1 auto; min-width: 0;
  font-size: var(--type-label-size); line-height: var(--proj-cap-leading); letter-spacing: var(--type-label-tracking); font-weight: var(--type-weight-medium); text-transform: uppercase;
  opacity: var(--muted-opacity);
  display: -webkit-box; -webkit-box-orient: vertical; -webkit-line-clamp: 2; overflow: hidden;
}
.proj__toggle { flex: none; min-width: var(--film-toggle-min-width); text-align: right; }   /* holds Pause and Play alike */
.proj__toggle[hidden] { display: block; visibility: hidden; }

/* Footer: footer.proj__foot > nav.proj__nav[aria-label] of links and the
   Credits button. Plain text on bone, on the slate's baseline. */
.proj__foot { grid-area: 2 / 1 / 3 / 2; min-width: 0; padding: var(--foot-pad) 0 0 var(--page-margin); }
.proj__nav { display: flex; flex-wrap: wrap; gap: var(--spacing-3xs) var(--spacing-lg); }
.proj__nav a, .proj__nav button, .proj__toggle, .proj__credits button {
  display: block; font-size: var(--type-small-size); line-height: var(--type-small-leading); letter-spacing: var(--type-small-tracking); white-space: nowrap;
  text-decoration: underline var(--hairline) var(--surface-clear); text-underline-offset: var(--underline-offset-row); transition: text-decoration-color var(--motion-normal) var(--motion-ease-fade);
}
.proj__nav a:hover, .proj__nav button:hover, .proj__toggle:hover, .proj__credits button:hover { text-decoration-color: currentColor; }

/* Credits: div.proj__credits#id[popover] (opened by the footer's Credits
   button; Escape, a click outside or Close dismiss it). An ink sheet on the
   left margin, just above the footer: who took each photograph and under
   which licence, linked. */
.proj__credits {
  position: fixed; inset: auto auto var(--header-height) var(--page-margin); margin: 0;   /* the footer's row is as tall as the header */
  width: min(var(--proj-credits-width), calc(var(--screen-width) - 2 * var(--page-margin))); max-height: calc(var(--screen-height-dynamic) - 2 * var(--header-height) - var(--spacing-sm)); overflow: auto;
  padding: var(--proj-credits-padding-top) var(--spacing-md) var(--spacing-md); border: 0; border-radius: var(--radius);
  background: var(--surface-inverse); color: var(--overlay-foreground);
  font-size: var(--type-small-size); line-height: var(--proj-credits-leading); letter-spacing: var(--type-small-tracking);
}
.proj__credits::backdrop { background: var(--surface-clear); }
@supports not selector(:popover-open) { .proj__credits { display: none; } }   /* no Popover API: the sheet must not fall into the stage */
.proj__credits-head { display: flex; align-items: baseline; justify-content: space-between; gap: var(--spacing-sm); margin-bottom: var(--spacing-sm); }
.proj__credits-head .t-label { opacity: var(--muted-opacity); }
.proj__credits li + li { margin-top: var(--spacing-xs); }
.proj__credits a { text-decoration: underline var(--hairline) var(--underline-inverse-soft); text-underline-offset: var(--underline-offset-row); transition: text-decoration-color var(--motion-normal) var(--motion-ease-fade); }
.proj__credits a:hover { text-decoration-color: currentColor; }

/* Below 64em: one column. The panel becomes a card at the top (16:10 of the
   content width, at most 38% of the window's height), the slate under it,
   then the pane (its list starts 1.75rem down, just clear of the top fade),
   then the footer. */
@media (max-width: 63.99em) {
  .proj { grid-template-columns: minmax(0, 1fr); grid-template-rows: auto minmax(0, 1fr) auto; column-gap: 0; padding-right: 0; }
  .proj > .pane { grid-area: 2 / 1 / 3 / 2; --pane-top: var(--proj-pane-top-narrow); }
  .proj__panel { grid-area: 1 / 1 / 2 / 2; grid-template-rows: auto auto; padding: 0 var(--page-margin); }
  .proj__screen { height: min(calc((var(--screen-width) - 2 * var(--page-margin)) / var(--proj-screen-ratio-narrow)), var(--proj-screen-height-cap-narrow)); }
  .proj__frame--screen, .proj__frame--print { --inset: var(--proj-inset-narrow); }
  .proj__slate { padding-top: var(--spacing-xs); }
  .proj__cap { min-height: var(--proj-cap-min-height-narrow); }   /* two lines held open, so a longer caption never moves the list */
  .proj__foot { grid-area: 3 / 1 / 4 / 2; padding: var(--spacing-xs) var(--page-margin) var(--spacing-sm); }
  .proj__credits { bottom: var(--proj-credits-bottom-narrow); max-height: calc(var(--screen-height-dynamic) - var(--header-height) - var(--proj-credits-clearance-narrow)); }
}
@media (max-width: 767.98px) {
  .proj__nav { flex-wrap: nowrap; gap: 0 var(--spacing-sm); }
  .proj__slate { padding-top: var(--spacing-3xs); }
  .proj__foot { padding: var(--spacing-3xs) var(--page-margin) var(--spacing-2xs); }
  .proj__nav a, .proj__nav button, .proj__toggle { padding-block: var(--spacing-2xs); }
}

@media (prefers-reduced-motion: reduce) {
  .proj__frame { transition: none; }
  .proj__frame img { animation: none; }
  .proj__nav a, .proj__nav button, .proj__toggle, .proj__credits button, .proj__credits a { transition: none; }
}

/* 15  Homepage v4: cine ----------------------------------------------------
   /a/v4/: the film is the page. One fixed layer behind everything holds the
   brand film under a vignette (.cine__shade); the page scrolls over it: a
   full-screen hero with the headline, the client rows (section 13's .crows,
   white on the film), then the footer on the film's bottom edge. Each block
   of words carries its own soft scrim and scrolls with it, so the film stays
   open wherever there is nothing to read; as the list comes in, the film
   travels from its centre to its bottom edge. Every word holds 4.5:1 over
   the film's brightest frames (measured, reference/a-build/v4). Namespaced
   (cine); does nothing on a page without html.cine. See COMPONENTS.md,
   "Homepage v4". */

html.cine { background: var(--surface-inverse); scroll-padding-block: calc(var(--header-height) + var(--spacing-md)) var(--film-page-scroll-padding-end); }
html.cine body { background: var(--surface-inverse); color: var(--overlay-foreground); }
/* Two screens and a footer: the list section grows until it and the footer
   fill at least the window, so the page ends on one composed screen (the
   lede, every row and the footer over the film's bottom edge) instead of
   scrolling the top of the list away. */
html.cine body { display: flex; flex-direction: column; min-height: var(--screen-height-double); min-height: calc(var(--screen-height-small) + var(--screen-height-dynamic)); }
html.cine main { flex: 1 0 auto; display: flex; flex-direction: column; }

/* Header: white on the film at the top (data-theme="dark"); once scrolled it
   stays white and frosts dark (the system's --overlay) instead of bone, so it
   never flashes a light bar over the film. The mobile menu is the same dark
   frost with white text. */
html.cine .site-header__bar::before { background: var(--overlay); -webkit-backdrop-filter: blur(var(--veil-blur)); backdrop-filter: blur(var(--veil-blur)); }
html.cine .site-header[data-theme="dark"].is-frosted, html.cine .site-header[data-theme="dark"].is-menu { color: var(--overlay-foreground); }
html.cine .site-header[data-theme="dark"].is-frosted .logo-light, html.cine .site-header[data-theme="dark"].is-menu .logo-light { opacity: 1; }
html.cine .site-header[data-theme="dark"].is-frosted .logo-dark, html.cine .site-header[data-theme="dark"].is-menu .logo-dark { opacity: 0; }
html.cine .site-menu { background: var(--overlay); color: var(--overlay-foreground); }

/* Film: div.cine__film[data-cine][aria-hidden] > video.cine__video +
   .cine__shade. Fixed, as tall as the largest viewport (a phone's toolbars
   never resize it), under everything. The film is --cine-k times the
   frame's height so it can travel: centred at rest, its bottom edge on the
   frame's bottom once the list is in (--cine-f 0 -> 1, from the scroll;
   held at 0 under reduced motion and without script). */
.cine__film {
  --cine-k: var(--film-scale); --cine-f: 0;
  position: fixed; left: 0; top: 0; z-index: var(--layer-base);
  width: 100%; height: var(--screen-height); height: var(--screen-height-large); overflow: hidden;
  background: var(--surface-inverse); pointer-events: none;
}
.cine__video {
  position: absolute; left: 0; top: 0; width: 100%; height: calc(100% * var(--cine-k)); max-width: none;
  object-fit: cover; object-position: 50% 50%;
  transform: translate3d(0, calc(-50% * (1 - 1 / var(--cine-k)) * (1 + var(--cine-f))), 0);
}
/* Vignette: the header's band, the footer's band, the two sides and the
   corners go dark; the middle of the frame stays open. */
.cine__shade {
  position: absolute; inset: 0;
  background:
    linear-gradient(to bottom, var(--film-shade-top), var(--film-shade-hold) var(--header-height), var(--film-shade-clear) var(--film-shade-reach)),
    linear-gradient(to top, var(--film-shade-bottom), var(--film-shade-hold) var(--cine-foot, var(--film-shade-foot)), var(--film-shade-clear) var(--film-shade-bottom-reach)),
    linear-gradient(to right, var(--film-shade-side), var(--film-shade-clear) var(--film-shade-reach), var(--film-shade-clear) var(--film-shade-side-far), var(--film-shade-side)),
    radial-gradient(ellipse var(--film-vignette-width) var(--film-vignette-height) at 50% var(--film-vignette-y), var(--film-shade-clear) var(--film-vignette-clear), var(--film-vignette));
}

/* Scrim: a soft dark field behind a block of words that scrolls with it
   (the block's ::before, under its text, over the film): solid ink under
   the words, faded by two masks intersected (--cine-mask-x across,
   --cine-mask-y down), so the film stays open around the words. */
.cine-hero__title, .cine-list { position: relative; }
.cine-hero__title::before, .cine-list::before {
  content: ""; position: absolute; z-index: var(--layer-below); pointer-events: none;
  -webkit-mask-image: var(--cine-mask-x), var(--cine-mask-y); -webkit-mask-composite: source-in;
  mask-image: var(--cine-mask-x), var(--cine-mask-y); mask-composite: intersect;
}

/* Hero: section.cine-hero[data-hero] > p.cine-hero__title +
   button.scroll-cue.cine-hero__cue. The small viewport tall; the headline
   bottom-left on the page margin, the cue on the right margin on its last
   baseline; both come in on load (the headline shifts in, the cue fades
   after it). The headline is the display size (--type-display-size: 128 at 1440,
   84 at 1024, 56 at 390) in sentence case, as the rows are, at 500 with
   tight tracking; balanced, so it breaks into two even lines (three on a
   phone). */
.cine-hero {
  flex: none; display: flex; align-items: flex-end; justify-content: space-between; gap: var(--spacing-lg);
  height: var(--screen-height); height: var(--screen-height-small); min-height: var(--film-hero-min-height);
  padding: var(--header-height) var(--page-margin) var(--spacing-xl);
  color: var(--overlay-foreground);
}
.cine-hero__title { min-width: 0; max-width: var(--film-title-measure); font-size: var(--type-display-size); line-height: var(--film-title-leading); letter-spacing: var(--film-title-tracking); font-weight: var(--type-weight-medium); text-wrap: balance; }
.cine-hero__title::before {
  --cine-fade: var(--film-title-fade); --cine-fade-x: var(--film-title-fade-x);
  left: calc(-1 * var(--page-margin)); right: calc(-1 * var(--cine-fade-x)); top: calc(-1 * var(--cine-fade)); bottom: calc(var(--spacing-3xl) * -1);
  background: var(--film-plate);
  --cine-mask-x: linear-gradient(to right, var(--mask-solid) calc(100% - var(--cine-fade-x)), var(--mask-clear));
  --cine-mask-y: linear-gradient(to bottom, var(--mask-clear), var(--mask-solid) var(--cine-fade), var(--mask-solid) calc(100% - var(--film-title-fade-end)), var(--mask-clear));
}
.cine-hero__cue { margin-bottom: var(--spacing-xs); }

/* List: section.cine-list > h1.crows__lede + ul.crows (section 13, the same
   rows as /a/v2/). Starts 20dvh below the top of the section, so it settles
   where the v2 list does; white on the film, on a scrim as deep as the
   rows' secondary text (the tags, at --muted-opacity) needs: ink .74 out to where a
   row can reach (--cine-reach), easing to .22 at the right edge, and fading
   out over the space under the last row (--cine-bottom) toward the footer.
   It grows (flex) to fill the last screen with the footer. */
.cine-list { --cine-reach: calc(var(--page-margin) + var(--film-list-reach)); --cine-bottom: clamp(var(--film-list-bottom-min), var(--film-list-bottom-fluid), var(--film-list-bottom-max)); flex: 1 0 auto; padding: var(--page-top) var(--page-margin) var(--cine-bottom); color: var(--overlay-foreground); }
@supports (height: 1dvh) { .cine-list { padding-top: var(--page-top-dynamic); } }
.cine-list::before {
  --cine-fade: var(--film-list-fade);
  left: 0; right: 0; top: calc(var(--page-top) - var(--cine-fade) - var(--spacing-sm)); bottom: 0;
  background: linear-gradient(to right, var(--film-list-plate), var(--film-list-plate) var(--cine-reach), var(--film-list-plate-end));
  --cine-mask-x: linear-gradient(var(--mask-solid), var(--mask-solid));
  --cine-mask-y: linear-gradient(to bottom, var(--mask-clear), var(--mask-solid) var(--cine-fade), var(--mask-solid) calc(100% - var(--cine-bottom)), var(--mask-clear));
}
@supports (height: 1dvh) { .cine-list::before { top: calc(var(--page-top-dynamic) - var(--cine-fade) - var(--spacing-sm)); } }
/* a workflow link is an inline block as tall as its line (as in .proj), so
   its focus ring stays inside the open row's clip box, top edge included */
.cine-list .crow__link { display: inline-block; text-decoration-color: var(--underline-inverse-soft); }
.cine-list .crow__link:hover { text-decoration-color: currentColor; }

/* Footer: footer.cine-foot > nav.cine-foot__nav (the /a footer links) +
   p.cine-foot__place (company, place, local time) + Pause/Play. One line on
   the grid, 1.5rem from the bottom, on the film's bottom edge. */
.cine-foot {
  position: relative; z-index: var(--layer-raised);
  display: grid; grid-template-columns: repeat(12, minmax(0, 1fr)); column-gap: var(--gutter); align-items: end;
  padding: 0 var(--page-margin) var(--spacing-md); color: var(--overlay-foreground);
}
.cine-foot__nav { grid-column: 1 / 7; display: flex; flex-wrap: wrap; gap: var(--spacing-3xs) var(--spacing-lg); }
.cine-foot__place { grid-column: 7 / 12; display: flex; flex-wrap: wrap; gap: var(--spacing-3xs) var(--spacing-lg); }
.cine-foot__toggle { grid-column: 12 / 13; justify-self: end; min-width: var(--film-toggle-min-width); text-align: right; }
.cine-foot__nav a, .cine-foot__place, .cine-foot__toggle { font-size: var(--type-small-size); line-height: var(--type-small-leading); letter-spacing: var(--type-small-tracking); white-space: nowrap; }
.cine-foot__nav a, .cine-foot__toggle, .cine-foot__place > span { display: block; }
.cine-foot__nav a, .cine-foot__toggle { text-decoration: underline var(--hairline) var(--surface-clear); text-underline-offset: var(--underline-offset-row); transition: text-decoration-color var(--motion-normal) var(--motion-ease-fade); }
.cine-foot__nav a:hover, .cine-foot__toggle:hover { text-decoration-color: currentColor; }
.cine-foot__time { font-variant-numeric: tabular-nums; min-width: var(--film-timecode-width); }
/* both keep their box until a.js fills them, so nothing moves */
html.js .cine-foot__time[hidden], .cine-foot__toggle[hidden] { display: block; visibility: hidden; }

@media (max-width: 767.98px) {
  .cine__film { --cine-k: var(--film-scale-mobile); }   /* a phone already crops the film hard */
  .cine__shade { --cine-foot: var(--film-shade-foot-mobile); }
  .cine-hero { padding-bottom: var(--spacing-lg); }
  .cine-hero__title::before { --cine-fade-x: var(--film-title-fade-x-mobile); }
  .cine-hero__cue { margin-bottom: var(--spacing-2xs); }
  .cine-foot { grid-template-columns: minmax(0, 1fr) auto; row-gap: var(--spacing-2xs); padding-bottom: var(--spacing-sm); }
  .cine-foot__nav { grid-column: 1 / -1; flex-wrap: nowrap; gap: 0 var(--spacing-sm); }
  .cine-foot__place { grid-column: 1 / 2; gap: 0 var(--spacing-sm); }
  .cine-foot__toggle { grid-column: 2 / 3; }
  .cine-foot__nav a, .cine-foot__toggle { padding-block: var(--spacing-2xs); }
  .cine-foot__place { padding-block: var(--spacing-2xs); }
}

@media (prefers-reduced-motion: reduce) {
  .cine-foot__nav a, .cine-foot__toggle { transition: none; }
}
/* END Homepage v4 */
/* 16  Homepage v5: reel ----------------------------------------------------
   /a/v5/: the film is the page (Sam, 2026-09-25: "is there any other version
   of this u think would be super OP"). The 48.6 s brand film is the whole
   homepage and scrolling scrubs it, frame-exact. div.reel__film[data-reel-film]
   is one fixed layer under everything: the video (the fallback's film and,
   in the reel, the poster under the canvas), the canvas the frames are drawn
   on, the vignette (.reel__shade, v4's). section.reel[data-reel] is the tall
   scroller (a.js sets its height: one viewport plus one ninth of the viewport
   per second of film, 100px a second at 900) and .reel__stage sticks to the
   top through it, holding the headline (.reel-hero, v4's, out at its moment),
   the client list (.reel-list: section 13's rows, in one at a time at their
   frames and staying), the footer (.reel-foot, v4's, in with the last frames)
   and the timecode (.reel__tc, the micro face, top right under the header).
   Without script, under reduced motion, with Save-Data or on a slow first
   chunk (html.reel-on absent) the page is v4's: the film plays with the
   headline over it, then the list, then the footer, in the flow. Namespaced
   (reel); does nothing on a page without html.reel-page. See COMPONENTS.md,
   "Homepage v5". */

html.reel-page { background: var(--surface-inverse); scroll-padding-block: calc(var(--header-height) + var(--spacing-md)) var(--film-page-scroll-padding-end); }
/* in the reel everything focusable sits inside the sticky stage, on screen: the
   fallback's scroll padding would make the browser "reveal" a footer link at the
   bottom edge by scrolling the document, and with the stage stuck that runs the
   film to its end on Tab (measured: 46 s -> 48.5 s on every footer link) */
html.reel-on { scroll-padding-block: 0; }
html.reel-page body { background: var(--surface-inverse); color: var(--overlay-foreground); }

/* Header: white on the film at the top (data-theme="dark"); once scrolled it
   stays white and frosts dark (the system's --overlay), as v4. While the film is
   scrubbed the bar is pinned: the page is one scene, so it never hides. */
html.reel-page .site-header__bar::before { background: var(--overlay); -webkit-backdrop-filter: blur(var(--veil-blur)); backdrop-filter: blur(var(--veil-blur)); }
html.reel-page .site-header[data-theme="dark"].is-frosted:not(.is-menu) { color: var(--overlay-foreground); }
html.reel-page .site-header[data-theme="dark"].is-frosted:not(.is-menu) .logo-light { opacity: 1; }
html.reel-page .site-header[data-theme="dark"].is-frosted:not(.is-menu) .logo-dark { opacity: 0; }
html.reel-on .site-header__bar { transform: none; }

/* Film layer: div.reel__film[data-reel-film][aria-hidden] > video.reel__video
   + canvas.reel__canvas + .reel__shade. Fixed, as tall as the largest
   viewport (a phone's toolbars never resize it). The video shows its poster
   until the first frame is drawn over it (and is the film in the fallback);
   the canvas covers the layer, drawn by a.js in device pixels. */
.reel__film {
  position: fixed; left: 0; top: 0; z-index: var(--layer-base);
  width: 100%; height: var(--screen-height); height: var(--screen-height-large); overflow: hidden;
  background: var(--surface-inverse); pointer-events: none;
}
.reel__video, .reel__canvas { position: absolute; left: 0; top: 0; width: 100%; height: 100%; max-width: none; object-fit: cover; object-position: 50% 50%; }
.reel__canvas { display: none; }
html.reel-on .reel__canvas { display: block; }
/* Vignette (v4's): the header's band, the footer's band, the two sides and the
   corners go dark; the middle of the frame stays open. */
.reel__shade {
  position: absolute; inset: 0;
  background:
    linear-gradient(to bottom, var(--film-shade-top), var(--film-shade-hold) var(--header-height), var(--film-shade-clear) var(--film-shade-reach)),
    linear-gradient(to top, var(--film-shade-bottom), var(--film-shade-hold) var(--reel-foot, var(--film-shade-foot)), var(--film-shade-clear) var(--film-shade-bottom-reach)),
    linear-gradient(to right, var(--film-shade-side), var(--film-shade-clear) var(--film-shade-reach), var(--film-shade-clear) var(--film-shade-side-far), var(--film-shade-side)),
    radial-gradient(ellipse var(--film-vignette-width) var(--film-vignette-height) at 50% var(--film-vignette-y), var(--film-shade-clear) var(--film-vignette-clear), var(--film-vignette));
}

/* Scrims (v4's): a soft dark field behind a block of words (the block's
   ::before, under its text, over the film), fading out at its edges. */
.reel-hero__title, .reel-list { position: relative; }
.reel-hero__title::before, .reel-list::before {
  content: ""; position: absolute; z-index: var(--layer-below); pointer-events: none;
  -webkit-mask-image: var(--reel-mask-x), var(--reel-mask-y); -webkit-mask-composite: source-in;
  mask-image: var(--reel-mask-x), var(--reel-mask-y); mask-composite: intersect;
}

/* Stage: section.reel[data-reel] > .reel__stage. In the flow (fallback) the
   stage is the page: hero, list, footer. In the reel it is one viewport tall
   and sticks to the top; the three sit in it at their places and the film
   brings them in. */
.reel__main { position: relative; z-index: var(--layer-raised); }
html.reel-on .reel__stage { position: sticky; top: 0; height: var(--screen-height); height: var(--screen-height-dynamic); overflow: hidden; }

/* Hero: section.reel-hero[data-hero] > p.reel-hero__title + button.scroll-cue
   (v4's hero). The headline stands at the open; in the reel it leaves on its
   frame (rises and fades, .4s) and returns when the film is scrubbed back. */
.reel-hero {
  display: flex; align-items: flex-end; justify-content: space-between; gap: var(--spacing-lg);
  height: var(--screen-height); height: var(--screen-height-small); min-height: var(--film-hero-min-height);
  padding: var(--header-height) var(--page-margin) var(--spacing-xl);
  color: var(--overlay-foreground);
}
.reel-hero__title { min-width: 0; max-width: var(--film-title-measure); font-size: var(--type-display-size); line-height: var(--film-title-leading); letter-spacing: var(--film-title-tracking); font-weight: var(--type-weight-medium); text-wrap: balance; }
.reel-hero__title::before {
  --reel-fade: var(--film-title-fade); --reel-fade-x: var(--film-title-fade-x);
  left: calc(-1 * var(--page-margin)); right: calc(-1 * var(--reel-fade-x)); top: calc(-1 * var(--reel-fade)); bottom: calc(var(--spacing-3xl) * -1);
  background: var(--film-plate);
  --reel-mask-x: linear-gradient(to right, var(--mask-solid) calc(100% - var(--reel-fade-x)), var(--mask-clear));
  --reel-mask-y: linear-gradient(to bottom, var(--mask-clear), var(--mask-solid) var(--reel-fade), var(--mask-solid) calc(100% - var(--film-title-fade-end)), var(--mask-clear));
}
.reel-hero__cue { margin-bottom: var(--spacing-xs); }
html.reel-on .reel-hero {
  position: absolute; inset: 0; height: auto; min-height: 0;
  transition: opacity var(--motion-slow) var(--motion-ease-ui), transform var(--motion-slow) var(--motion-ease-ui), visibility 0s;
}
html.reel-on .reel-hero.is-out {
  opacity: 0; transform: translateY(calc(var(--spacing-sm) * -1)); visibility: hidden;
  transition: opacity var(--motion-leave) var(--motion-ease-ui), transform var(--motion-leave) var(--motion-ease-ui), visibility 0s var(--motion-ease-steady) var(--motion-leave);
}

/* List: section.reel-list > h1.crows__lede + ul.crows (section 13, the rows
   as /a/v2/). Fallback: v4's list block (20dvh down, its scrim). In the reel
   it sits under the header at --reel-top, on the page margin; the lede and
   the scrim come in at the lede's frame, each row at its own (opacity and a
   slide from -10% of its width over 1s, the system's "slide"; .3s back out).
   A row the film has not reached takes no pointer but keeps its place in
   the tab order and the accessibility tree: focus on it scrolls the film to
   it (a.js). */
.reel-list { --reel-reach: calc(var(--page-margin) + var(--film-list-reach)); --reel-bottom: var(--reel-list-bottom); padding: var(--page-top) var(--page-margin) var(--reel-bottom); color: var(--overlay-foreground); }
@supports (height: 1dvh) { .reel-list { padding-top: var(--page-top-dynamic); } }
.reel-list::before {
  --reel-fade: var(--film-list-fade);
  left: 0; right: 0; top: calc(var(--page-top) - var(--reel-fade) - var(--spacing-sm)); bottom: calc(var(--reel-bottom) - var(--reel-list-plate-overhang));
  background: linear-gradient(to right, var(--film-list-plate), var(--film-list-plate) var(--reel-reach), var(--film-list-plate-end));
  --reel-mask-x: linear-gradient(var(--mask-solid), var(--mask-solid));
  --reel-mask-y: linear-gradient(to bottom, var(--mask-clear), var(--mask-solid) var(--reel-fade), var(--mask-solid) calc(100% - var(--reel-list-fade-end)), var(--mask-clear));
}
@supports (height: 1dvh) { .reel-list::before { top: calc(var(--page-top-dynamic) - var(--reel-fade) - var(--spacing-sm)); } }
.reel-list .crow__link { text-decoration-color: var(--underline-inverse-soft); }
.reel-list .crow__link:hover { text-decoration-color: currentColor; }
html.reel-on .reel-list { --reel-top: calc(var(--header-height) + var(--spacing-lg)); position: absolute; left: 0; right: 0; top: var(--reel-top); padding: 0 var(--page-margin); }
html.reel-on .reel-list::before {
  top: calc(-1 * var(--reel-top)); bottom: calc(var(--reel-list-plate-overhang) * -1); opacity: 0; transition: opacity var(--motion-fade) var(--motion-ease-ui);
  --reel-mask-y: linear-gradient(to bottom, var(--mask-clear), var(--mask-solid) calc(var(--reel-top) - var(--spacing-lg)), var(--mask-solid) calc(100% - var(--reel-list-fade-end)), var(--mask-clear));
}
html.reel-on .reel-list.is-in::before { opacity: 1; }
html.reel-on .crows__lede { opacity: 0; transition: opacity var(--motion-normal) var(--motion-ease-ui); }
html.reel-on .reel-list.is-in .crows__lede { opacity: var(--muted-opacity); transition: opacity var(--motion-reveal) var(--motion-ease-reveal); }
html.reel-on .reel-list .crow { opacity: 0; transform: translateX(calc(var(--reveal-shift) * -1)); pointer-events: none; transition: opacity var(--motion-normal) var(--motion-ease-ui), transform var(--motion-normal) var(--motion-ease-ui); }
html.reel-on .reel-list .crow.is-in { opacity: 1; transform: none; pointer-events: auto; transition: opacity var(--motion-reveal) var(--motion-ease-reveal), transform var(--motion-reveal) var(--motion-ease-reveal); }
/* the blocks take no pointer until they are in (an unseen footer must not swallow a tap on the cue) */
html.reel-on .reel-list, html.reel-on .reel-foot:not(.is-in), html.reel-on .reel__tc { pointer-events: none; }

/* Footer: footer.reel-foot > nav.reel-foot__nav (the /a footer links) +
   p.reel-foot__place (company, place, local time) + Pause/Play (v4's footer:
   one line on the grid, 1.5rem from the bottom). In the reel it sits on the
   stage's bottom edge and comes in with the last frames (1s, .3s back out);
   the toggle there pauses the tags' idle decode. */
.reel-foot {
  position: relative; z-index: var(--layer-raised);
  display: grid; grid-template-columns: repeat(12, minmax(0, 1fr)); column-gap: var(--gutter); align-items: end;
  padding: 0 var(--page-margin) var(--spacing-md); color: var(--overlay-foreground);
}
.reel-foot__nav { grid-column: 1 / 7; display: flex; flex-wrap: wrap; gap: var(--spacing-3xs) var(--spacing-lg); }
.reel-foot__place { grid-column: 7 / 12; display: flex; flex-wrap: wrap; gap: var(--spacing-3xs) var(--spacing-lg); }
.reel-foot__toggle { grid-column: 12 / 13; justify-self: end; min-width: var(--film-toggle-min-width); text-align: right; }
.reel-foot__nav a, .reel-foot__place, .reel-foot__toggle { font-size: var(--type-small-size); line-height: var(--type-small-leading); letter-spacing: var(--type-small-tracking); white-space: nowrap; }
.reel-foot__nav a, .reel-foot__toggle, .reel-foot__place > span { display: block; }
.reel-foot__nav a, .reel-foot__toggle { text-decoration: underline var(--hairline) var(--surface-clear); text-underline-offset: var(--underline-offset-row); transition: text-decoration-color var(--motion-normal) var(--motion-ease-fade); }
.reel-foot__nav a:hover, .reel-foot__toggle:hover { text-decoration-color: currentColor; }
.reel-foot__time { font-variant-numeric: tabular-nums; min-width: var(--film-timecode-width); }
/* both keep their box until a.js fills them, so nothing moves */
html.js .reel-foot__time[hidden], .reel-foot__toggle[hidden] { display: block; visibility: hidden; }
html.reel-on .reel-foot {
  position: absolute; left: 0; right: 0; bottom: 0;
  opacity: 0; transform: translateY(var(--spacing-xs));
  transition: opacity var(--motion-normal) var(--motion-ease-ui), transform var(--motion-normal) var(--motion-ease-ui);
}
html.reel-on .reel-foot.is-in { opacity: 1; transform: none; transition: opacity var(--motion-reveal) var(--motion-ease-reveal), transform var(--motion-reveal) var(--motion-ease-reveal); }

/* Timecode: p.reel__tc.t-code[data-reel-tc][aria-hidden]. The tape being
   scrubbed (00:31.2), the micro face at --muted-opacity, top right under the header on
   the lede's line; reel only. */
.reel__tc { display: none; }
html.reel-on .reel__tc {
  display: block; position: absolute; right: var(--page-margin); top: calc(var(--header-height) + var(--spacing-lg) + var(--reel-timecode-nudge)); margin: 0;
  opacity: var(--muted-opacity); font-variant-numeric: tabular-nums; white-space: nowrap;
}
html.reel-on .reel__tc[hidden] { display: none; }

@media (max-width: 767.98px) {
  .reel__shade { --reel-foot: var(--film-shade-foot-mobile); }
  .reel-hero { padding-bottom: var(--spacing-lg); }
  .reel-hero__title::before { --reel-fade-x: var(--film-title-fade-x-mobile); }
  .reel-hero__cue { margin-bottom: var(--spacing-2xs); }
  .reel-foot { grid-template-columns: minmax(0, 1fr) auto; row-gap: var(--spacing-2xs); padding-bottom: var(--spacing-sm); }
  .reel-foot__nav { grid-column: 1 / -1; flex-wrap: nowrap; gap: 0 var(--spacing-sm); }
  .reel-foot__place { grid-column: 1 / 2; gap: 0 var(--spacing-sm); }
  .reel-foot__toggle { grid-column: 2 / 3; }
  .reel-foot__nav a, .reel-foot__toggle { padding-block: var(--spacing-2xs); }
  .reel-foot__place { padding-block: var(--spacing-2xs); }
  /* the timecode takes the line under the header; the list starts under it */
  html.reel-on .reel__tc { top: calc(var(--header-height) + var(--spacing-lg)); }
  html.reel-on .reel-list { --reel-top: calc(var(--header-height) + var(--spacing-lg) + var(--type-label-leading) * var(--type-label-size) + var(--reel-list-top-gap-mobile)); }
}
/* short windows: the rows step down so the whole list and an open row clear the footer */
@media (min-width: 768px) and (max-height: 700px) { html.reel-on .crows { --row-fs: var(--client-row-size-short); --row-ls: var(--client-row-tracking-short); } }
@media (max-width: 767.98px) and (max-height: 700px) { html.reel-on .crows { --row-fs: var(--client-row-size-mobile-short); --row-ls: var(--client-row-tracking-mobile-short); } }

@media (prefers-reduced-motion: reduce) {
  .reel-foot__nav a, .reel-foot__toggle { transition: none; }
}
/* END Homepage v5 */

/* 17  Drawings that trace, drawings cut by size, the play mark (draft 1, 2026-09-25) ---
   Traced line: path.dg-trace[pathLength="1"][data-reveal="trace"] draws itself from its
   start when revealed (1.4s expo; --dur/--delay as any reveal, so a data-stagger-steps on the svg
   sequences it); reduced motion shows it drawn. A .dg shape with data-reveal="draw" (a bar)
   grows from its own left edge. .dg-area is a shaded range. One drawing cut twice: .dg-d
   shows from 768 up and .dg-m below it (on the svg, or on its slot). Play mark: span.playmark
   in a linked .media box (a film that plays elsewhere), our own triangle in a ring, centred;
   it fills on hover of the link. */
.dg-trace { fill: none; stroke: currentColor; stroke-width: var(--icon-stroke); stroke-linecap: round; stroke-linejoin: round; }
.dg-trace--bold { stroke-width: var(--diagram-stroke-bold); }
[data-reveal="trace"] { stroke-dasharray: 1 1; stroke-dashoffset: 0; transition-property: opacity, stroke-dashoffset; --dur: var(--motion-trace); }
html.js [data-reveal="trace"]:not(.is-in) { stroke-dashoffset: 1; }
.dg [data-reveal="draw"] { transform-box: fill-box; transform-origin: 0 50%; }
.dg-area { fill: currentColor; fill-opacity: var(--diagram-area-opacity); stroke: none; }
@media (max-width: 767.98px) { .dg-d { display: none !important; } }
@media (min-width: 768px) { .dg-m { display: none !important; } }
.playmark { position: absolute; left: 50%; top: 50%; width: var(--playmark-size); height: var(--playmark-size); margin: calc(var(--playmark-size) / -2) 0 0 calc(var(--playmark-size) / -2); display: grid; place-items: center; border: var(--line-medium) solid var(--overlay-foreground); border-radius: var(--round-radius); color: var(--overlay-foreground); background: var(--overlay-subtle); -webkit-backdrop-filter: blur(var(--disc-blur)); backdrop-filter: blur(var(--disc-blur)); transition: background-color var(--motion-normal) var(--motion-ease-fade), color var(--motion-normal) var(--motion-ease-fade); }
.playmark svg { width: var(--playmark-icon-size); height: var(--playmark-icon-size); fill: currentColor; margin-left: var(--playmark-icon-nudge); }
a:hover > .playmark { background-color: var(--surface-card); color: var(--surface-canvas-foreground); }
@media (max-width: 767.98px) { .playmark { width: var(--playmark-size-mobile); height: var(--playmark-size-mobile); margin: calc(var(--playmark-size-mobile) / -2) 0 0 calc(var(--playmark-size-mobile) / -2); } }
@media (prefers-reduced-motion: reduce) { .playmark { transition: none; } }
/* END 17 */

/* 18  Company pages: contact opening and form, place, contents rail, isolation drawing (draft 1, 2026-09-25) ---
   /a/contact/, /a/jobs/, /a/security/, /a/legal/, /a/policies/ and its three articles.
   Contact opening: section.contact on the hero-page rhythm (eyebrow at 20dvh), copy cols 1-5,
   form cols 7-12. Form: form.cform[data-cform][novalidate] (a.js "Company pages"): labelled
   fields with an underline in the sband's manner, an inline error under each, a Send button
   (.btn-outline), and a confirmation that replaces the fields in place. Nothing is sent.
   Place: section.place, a 3:2 figure cols 1-7 and the address, local time and mailboxes
   cols 9-12. Contents rail: nav.art-toc[data-toc] in an article's rail, the section it is in
   marked aria-current. Isolation drawing: svg.dg.iso[data-iso] cycles one tenant at a time. */

/* Contact opening */
.contact { padding: var(--page-top) var(--page-margin) var(--spacing-3xl); padding-top: var(--page-top-dynamic); }
.contact__grid { row-gap: var(--spacing-2xl); align-items: start; }
.contact__copy { grid-column: 1 / 6; display: flex; flex-direction: column; align-items: flex-start; }
.contact__title { margin-top: var(--spacing-md); }
.contact__lede { margin-top: var(--spacing-lg); max-width: var(--contact-lede-measure); }
.contact__mail { margin-top: var(--spacing-2xl); display: flex; flex-direction: column; align-items: flex-start; gap: var(--spacing-xs); }
.contact__address { font-size: var(--type-h5-size); line-height: var(--type-h5-leading); letter-spacing: var(--type-h5-tracking); -webkit-user-select: all; user-select: all; }
.contact__mail-row { display: flex; flex-wrap: wrap; align-items: center; gap: var(--spacing-xs) var(--spacing-lg); margin-top: var(--spacing-2xs); }
.contact__copy-btn { font-size: var(--type-link-size); line-height: var(--type-link-leading); letter-spacing: var(--type-link-tracking); text-transform: var(--type-title-transform); opacity: var(--muted-opacity); transition: opacity var(--motion-normal) var(--motion-ease-fade); text-decoration: underline; text-decoration-thickness: var(--hairline); text-underline-offset: var(--link-underline-offset); }
.contact__copy-btn:hover { opacity: 1; }
.contact__form { grid-column: 7 / 13; }
@media (max-width: 767.98px) {
  .contact { padding-bottom: var(--spacing-2xl); }
  .contact__copy, .contact__form { grid-column: 1 / -1; }
  .contact__mail { margin-top: var(--spacing-xl); }
}

/* Form */
.cform { --cform-line: var(--border-strong); display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); column-gap: var(--gutter); row-gap: var(--form-row-gap); }
.on-ink .cform, .on-black .cform { --cform-line: var(--border); }
.cform__head { grid-column: 1 / -1; display: flex; flex-direction: column; gap: var(--spacing-sm); margin-bottom: var(--spacing-2xs); }
.cform__field { display: flex; flex-direction: column; gap: var(--form-field-gap); min-width: 0; }
.cform__field--wide { grid-column: 1 / -1; }
.cform__label { opacity: var(--muted-opacity); }
.cform__input {
  display: block; width: 100%; margin: 0; padding: var(--form-input-padding-block) 0 var(--form-input-padding-block); border: 0; border-bottom: var(--hairline) solid var(--cform-line); border-radius: 0;
  background: var(--surface-clear); color: inherit; -webkit-appearance: none; appearance: none;
  font-family: var(--type-family); font-weight: var(--type-weight); font-size: var(--type-p-size); line-height: var(--type-p-leading); letter-spacing: var(--type-p-tracking);
  transition: border-color var(--motion-normal) var(--motion-ease-fade);
}
textarea.cform__input { min-height: var(--form-textarea-min-height); resize: vertical; }
.cform__input::placeholder { color: inherit; opacity: var(--muted-opacity); }
.cform__input:hover, .cform__input:focus { border-bottom-color: currentColor; }
.cform__input:focus-visible { outline: var(--ring-width) solid currentColor; outline-offset: var(--ring-offset-control); }
.cform__input[aria-invalid="true"] { border-bottom: var(--form-error-line) solid currentColor; padding-bottom: calc(var(--form-input-padding-block) - var(--hairline)); }
.cform__err { font-size: var(--type-small-size); line-height: var(--type-small-leading); letter-spacing: var(--type-small-tracking); }
.cform__err::before { content: "\2014\00a0"; }
.cform__err[hidden] { display: none; }
.cform__foot { grid-column: 1 / -1; display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: var(--spacing-sm) var(--spacing-lg); }
.cform__note { opacity: var(--muted-opacity); max-width: var(--form-note-measure); }
button.btn-outline { cursor: pointer; }
.cform__done { grid-column: 1 / -1; display: flex; flex-direction: column; align-items: flex-start; gap: var(--form-done-gap); padding: var(--spacing-lg) 0 0; border-top: var(--hairline) solid currentColor; }
.cform__done[hidden] { display: none; }
.cform__done:focus { outline: none; }
.cform__done:focus-visible { outline: var(--ring-width) solid currentColor; outline-offset: var(--ring-offset-control); }
.cform.is-sent > :not(.cform__head):not(.cform__done) { display: none; }
@media (max-width: 767.98px) {
  .cform { grid-template-columns: minmax(0, 1fr); row-gap: var(--spacing-lg); }
}

/* Place: a figure and the address beside it */
.place { padding: var(--spacing-2xl) var(--page-margin); }
.place__grid { row-gap: var(--spacing-lg); align-items: end; }
.place__fig { grid-column: 1 / 8; aspect-ratio: var(--place-aspect); border-radius: var(--radius); }
.place__text { grid-column: 9 / 13; display: flex; flex-direction: column; gap: var(--spacing-lg); }
.place__lines { display: flex; flex-direction: column; gap: var(--spacing-xs); }
.place__clock { font-variant-numeric: tabular-nums; min-width: var(--place-clock-width); }
.place__clock[hidden] { display: block; visibility: hidden; }
.place__dl { display: flex; flex-direction: column; }
.place__dl > div { display: grid; grid-template-columns: var(--place-term-width) minmax(0, 1fr); column-gap: var(--spacing-sm); align-items: baseline; padding: var(--list-row-padding-top) 0 var(--list-row-padding-bottom); border-top: var(--hairline) solid var(--border-subtle); }
.place__dl dt { opacity: var(--muted-opacity); }
.place__dl a { text-decoration: underline; text-decoration-thickness: var(--hairline); text-underline-offset: var(--underline-offset); }
@media (max-width: 767.98px) {
  .place__fig, .place__text { grid-column: 1 / -1; }
}

/* Feature rows whose body carries a link under its text */
.frow__body--link { display: flex; flex-direction: column; align-items: flex-start; gap: var(--spacing-md); }

/* Sources line (the 10mark page, 2026-09-27): under a fact, the public pages it comes from, in the small type at the
   muted strength (.is-dim); each source is an underlined link that opens a new tab. */
.src { margin-top: var(--spacing-xs); }
.src a { text-decoration: underline; text-decoration-thickness: var(--hairline); text-underline-offset: var(--underline-offset); }

/* Contents rail (policies): the section being read is full strength */
.art-toc { margin-top: var(--toc-gap); }
.art-toc__list { display: flex; flex-direction: column; gap: var(--toc-list-gap); margin-top: var(--spacing-sm); }
.art-toc__list a { position: relative; display: inline-block; font-size: var(--type-small-size); line-height: var(--type-small-leading); letter-spacing: var(--type-small-tracking); opacity: var(--muted-opacity); transition: opacity var(--motion-normal) var(--motion-ease-fade), transform var(--motion-normal) var(--motion-ease-ui); }
.art-toc__list a:hover { opacity: 1; }
.art-toc__list a[aria-current] { opacity: 1; transform: translateX(var(--spacing-xs)); }
.art-toc__list a[aria-current]::before { content: ""; position: absolute; left: calc(var(--spacing-xs) * -1); top: var(--toc-marker-top); width: var(--toc-marker-width); height: var(--hairline); background: currentColor; }
.art-prose h2[id] { outline-offset: var(--ring-offset-control); }
.art-prose .art-sub + ul { margin-top: 0; }

/* Isolation drawing: one tenant at a time is followed through the policy to its rows */
.iso .iso-t { transition: opacity var(--motion-fade) var(--motion-ease-ui); }
.iso[data-on] .iso-t { opacity: var(--disabled-opacity); }
.iso[data-on="a"] .iso-t--a, .iso[data-on="b"] .iso-t--b, .iso[data-on="c"] .iso-t--c { opacity: 1; }
.iso .iso-fill { opacity: 0; transition: opacity var(--motion-fade) var(--motion-ease-ui); }
.iso[data-on="a"] .iso-t--a .iso-fill, .iso[data-on="b"] .iso-t--b .iso-fill, .iso[data-on="c"] .iso-t--c .iso-fill { opacity: 1; }
.iso .iso-t .iso-ink { transition: fill var(--motion-fade) var(--motion-ease-ui); }
.iso[data-on="a"] .iso-t--a .iso-ink, .iso[data-on="b"] .iso-t--b .iso-ink, .iso[data-on="c"] .iso-t--c .iso-ink { fill: var(--surface-canvas); }
.iso .iso-path { fill: none; stroke: currentColor; stroke-width: var(--icon-stroke); stroke-dasharray: 1 1; stroke-dashoffset: 1; transition: stroke-dashoffset var(--motion-beat) var(--motion-ease-reveal); }
.iso[data-on="a"] .iso-t--a .iso-path, .iso[data-on="b"] .iso-t--b .iso-path, .iso[data-on="c"] .iso-t--c .iso-path { stroke-dashoffset: 0; }
.iso .iso-ghost { fill: none; stroke: currentColor; stroke-width: var(--iso-ghost-stroke); stroke-dasharray: var(--iso-ghost-dash); opacity: var(--iso-ghost-opacity); }
.media--iso { background: var(--surface-canvas); }
@media (max-width: 767.98px) { .mrows__media.media--iso { aspect-ratio: var(--iso-aspect-mobile); } }

@media (prefers-reduced-motion: reduce) {
  .cform__input, .contact__copy-btn, .art-toc__list a, .iso .iso-t, .iso .iso-fill, .iso .iso-ink, .iso .iso-path { transition: none; }
}
/* END 18 */

/* 19  Version switcher (draft only, 2026-09-26) ----------------------------
   Sam, 2026-09-26: "On iPhone i can't see the new marzyOS versions." A draft-review control on /a/marzyos/,
   /a/marzyos/v1/ and /a/marzyos/v2/ only: three links between the MarzyOS hero versions (Dots, Mesh light,
   Mesh dark), the current one marked. Pinned bottom-left over the page on the veil (as the caption chip), so it
   reads the same on the stone hero, the charcoal hero and every slice below; it takes no space, so nothing on
   the page moves. Each link is a thumb's tap tall. a.js (initVersions) steps it aside while the footer is on
   screen or holds focus, so it never covers a footer link.
   REMOVE BEFORE LAUNCH: the markup on the three pages, this section, --vswitch-target and --px-44 (tokens.css)
   and a.js initVersions. */
.vswitch { position: fixed; left: var(--spacing-sm); bottom: var(--spacing-sm); z-index: var(--layer-switcher); opacity: var(--shown-opacity); transition: opacity var(--motion-normal) var(--motion-ease-standard), visibility 0s var(--motion-ease-steady); }
.vswitch.is-away { opacity: var(--hidden-opacity); visibility: hidden; pointer-events: none; transition: opacity var(--motion-normal) var(--motion-ease-standard), visibility 0s var(--motion-ease-steady) var(--motion-normal); }
.vswitch__list { display: flex; margin: 0; padding: var(--spacing-3xs); list-style: none; background: var(--overlay); -webkit-backdrop-filter: blur(var(--veil-blur)); backdrop-filter: blur(var(--veil-blur)); border-radius: var(--radius); }
.vswitch__list > li { margin: 0; padding: 0; }
.vswitch__link {
  display: flex; align-items: center; min-height: var(--vswitch-target); padding-inline: var(--control-padding-inline);
  color: var(--muted-foreground-inverse); font-family: var(--type-family-code); font-size: var(--type-label-size); font-weight: var(--type-weight-medium); line-height: var(--type-code-leading); letter-spacing: var(--type-code-tracking); white-space: nowrap;
  text-decoration-line: underline; text-decoration-color: var(--surface-clear); text-decoration-thickness: var(--hairline); text-underline-offset: var(--underline-offset);
  transition: color var(--motion-brisk) var(--motion-ease-fade), text-decoration-color var(--motion-brisk) var(--motion-ease-fade);
}
.vswitch__link:hover, .vswitch__link[aria-current] { color: var(--overlay-foreground); }
.vswitch__link[aria-current] { text-decoration-color: currentColor; }
.vswitch__link:focus-visible { outline-color: var(--overlay-foreground); outline-offset: var(--ring-offset-inset); }
@media (prefers-reduced-motion: reduce) {
  .vswitch, .vswitch.is-away, .vswitch__link { transition: none; }
}
/* END 19 */