/* ============================================================
   TACIT SOURCE — PUBLIC SITE · DESIGN SYSTEM
   TCT-SITE-CSS-001 · R2.0 · 2026-09-11

   R1.0 — the full-depth rebuild, on the owner's instruction: "full depth
   expansion, deepening and proper development... needs to exceed current
   competition and tech industry website and marketing", "vectors,
   information movement", "needs to be high end tech presentation".

   R2.0 — the presentation pass, on the owner's instruction: "final
   presentation pass… full animation… we should brighten it too, pretty
   dark". The ground lifted two steps and every scrim thinned (tokens,
   PHOTOGRAPH BANDS); motion throughout (MOTION), driven by
   assets/js/tct.js — every effect is progressive and honours
   prefers-reduced-motion; the languages hub (its own section).

   THREE RULINGS SHAPE THIS FILE.

   1 · DARK IS THE GROUND. R0.x inherited Even Steven's white editorial
       system. This issue leaves it. The mark is a metallic red-and-silver
       wing: metal reads on black and goes flat on white, and the mark's
       own brightest red (#F8373D, sampled) clears AA on the dark ground
       but fails it on white — so the dark presentation is the one where
       the brand is true, not a styling preference. Light sections remain
       for documents meant to be printed or read long.

   2 · THE VISUAL SUBJECT IS INFORMATION MOVEMENT. (R1.x added the
       group's own equipment photography, graded to black and white —
       PHOTOGRAPH BANDS below. The vectors remain the argument and the
       photographs are the ground.) Depth comes from
       vector schematics of how information moves — capture, admission,
       release, count — drawn in the mark's own geometry: layered parallel
       chevrons as flow vectors. The `.dgm` system at the foot of this file
       is that language. A boundary that information does NOT cross is
       drawn as deliberately as a flow that it does, because the boundaries
       are the product.

   3 · NO STATUS APPARATUS. Joe's standing rule for every public site
       (2026-09-07): no maturity chips, no proof strips, no "what we do not
       say" tables, no "not yet" hedging. This file therefore carries no
       badge, pill or chip component whose content is a status. Facts stay;
       commentary about our own honesty does not ship.

   Type is the estate kit, self-hosted: Barlow for reading, Barlow
   Condensed for display, a system mono for technical labels and eyebrows.

   ONE STYLESHEET, EVERY PAGE. Page-specific style goes in that page's own
   <style> block, built on these tokens. DO NOT FORK.
   ============================================================ */

/* ---------- self-hosted type ---------- */
@font-face{font-family:"Barlow";font-style:normal;font-weight:400;font-display:swap;src:url("../fonts/Barlow-400.woff2") format("woff2")}
@font-face{font-family:"Barlow";font-style:normal;font-weight:500;font-display:swap;src:url("../fonts/Barlow-500.woff2") format("woff2")}
@font-face{font-family:"Barlow";font-style:normal;font-weight:600;font-display:swap;src:url("../fonts/Barlow-600.woff2") format("woff2")}
@font-face{font-family:"Barlow";font-style:normal;font-weight:700;font-display:swap;src:url("../fonts/Barlow-700.woff2") format("woff2")}
@font-face{font-family:"Barlow Condensed";font-style:normal;font-weight:600;font-display:swap;src:url("../fonts/BarlowCondensed-600.woff2") format("woff2")}
@font-face{font-family:"Barlow Condensed";font-style:normal;font-weight:700;font-display:swap;src:url("../fonts/BarlowCondensed-700.woff2") format("woff2")}

/* ---------- tokens ---------- */
:root{
  /* Ground. Near-black with a trace of green-blue so the metal reads warm against it. */
  /* R2.0 lifted the whole ground two steps ("pretty dark"). The mark's red
     still clears AA on every surface it is set on: 4.9:1 on --ground,
     4.6:1 on --raise. */
  --void:#0B0D11;          /* deepest — page ground */
  --ground:#111419;        /* primary dark surface */
  --raise:#181C22;         /* raised card / panel */
  --raise-2:#20252C;       /* second raise — inputs, table heads */

  /* Ink-on-light, kept for the long-read and print surfaces */
  --paper:#FFFFFF;
  --paper-2:#F4F6F7;
  --ink:#0C0E11;

  /* Type on dark */
  --text:#F2F4F6;          /* primary reading colour on dark — 16.5:1 */
  --dim:#BCC3CA;           /* secondary — 9.6:1 */
  --faint:#8B949D;         /* tertiary, labels — 6.0:1 */

  /* Rules and edges */
  --line:rgba(255,255,255,.11);
  --line-2:rgba(255,255,255,.20);
  --line-ink:#E2E6E9;

  /* Brand. Sampled from TCT-BRD-MARK_R1. See TCT-BRD-001 §2A. */
  --red:#F8373D;           /* the mark's own highlight red — 5.07:1 on --ground */
  --red-deep:#AA0000;      /* the mark's wing shadow — 7.75:1 on white, for light sections */
  --red-glow:rgba(248,55,61,.20);
  --silver:#C9CFD5;        /* the mark's metal */
  --silver-dim:#8C949C;

  /* stable */
  --sans:"Barlow","Helvetica Neue",Helvetica,Arial,sans-serif;
  --disp:"Barlow Condensed","Arial Narrow","Helvetica Neue",Arial,sans-serif;
  --mono:ui-monospace,SFMono-Regular,"SF Mono",Menlo,Consolas,monospace;
  --wrap:1280px;
  --wrap-narrow:920px;
  --gut:clamp(20px,4vw,64px);
  --band:clamp(64px,8vw,132px);
}

/* ---------- reset ---------- */
*,*::before,*::after{box-sizing:border-box}
html{-webkit-text-size-adjust:100%;scroll-behavior:smooth}
@media (prefers-reduced-motion:reduce){html{scroll-behavior:auto}}
body{margin:0;background:var(--void);color:var(--text);font-family:var(--sans);
  font-size:17px;line-height:1.62;-webkit-font-smoothing:antialiased;
  -moz-osx-font-smoothing:grayscale;overflow-x:hidden}
img,svg{max-width:100%;display:block}
a{color:inherit}
main p a,main li a{color:var(--text);text-decoration:underline;
  text-decoration-color:var(--red);text-underline-offset:3px;text-decoration-thickness:1px}
main p a:hover,main li a:hover{color:#fff;text-decoration-thickness:2px}
h1,h2,h3,h4{font-family:var(--disp);text-transform:uppercase;font-weight:700;
  line-height:1.02;letter-spacing:.004em;margin:0 0 .5em;text-wrap:balance;color:#fff}
h1{font-size:clamp(40px,5.6vw,82px)}
h2{font-size:clamp(28px,3.8vw,54px)}
h3{font-size:clamp(18px,1.7vw,24px)}
p{margin:0 0 1.1em;max-width:72ch;text-wrap:pretty}
ul,ol{margin:0 0 1.1em;padding-left:1.2em}
li{margin-bottom:.5em;max-width:70ch}
strong,b{color:#fff;font-weight:600}
code{font-family:var(--mono);font-size:.88em;background:var(--raise-2);
  border:1px solid var(--line);padding:.12em .4em;color:var(--silver)}

/* ---------- the languages hub ---------- */
.lgrid{gap:14px}
.lcard{padding:18px 18px 16px;display:flex;flex-direction:column;gap:4px}
.lcard .flag{width:44px;height:33px;object-fit:cover;border:1px solid var(--line-2);margin-bottom:10px;
  filter:saturate(.55) brightness(.92);transition:filter .25s}
.lcard:hover .flag{filter:none}
.lcard h3{margin:0;font-size:clamp(18px,1.5vw,22px)}
.lcard p{margin:0;font-size:13.5px;color:var(--faint)}
.lcard.soon{border-style:dashed;color:var(--dim)}
.lcard.soon .flag{filter:saturate(.25) brightness(.8)}
.lcard.soon h3{color:var(--dim)}
@media (max-width:760px){.lgrid{grid-template-columns:repeat(2,1fr)}}

/* ---------- focus ---------- */
:where(a,button,input,select,textarea):focus-visible{outline:2px solid var(--red);outline-offset:2px}

/* ---------- skeleton ---------- */
.wrap{max-width:var(--wrap);margin:0 auto;padding-left:var(--gut);padding-right:var(--gut)}
/* A narrow section keeps the page's left edge rather than centring on its own axis:
   one rail down the whole site reads as rigour, a wandering one reads as accident. */
.wrap.narrow{max-width:var(--wrap)}
.wrap.narrow>*{max-width:var(--wrap-narrow)}
.sec{padding-block:var(--band);position:relative;overflow-x:clip}
/* clip, not hidden: clip does not make a scroll container, so a full-bleed
   figure can still break the text measure without the page gaining a
   horizontal scrollbar on a phone. */
.sec.raise{background:var(--ground);border-block:1px solid var(--line)}
.sec.panel{background:var(--raise);border-block:1px solid var(--line)}

/* the light long-read surface, for legal and specification pages */
.sec.light{background:var(--paper);color:var(--ink);border-block:1px solid var(--line-ink)}
.sec.light h2,.sec.light h3{color:var(--ink)}
.sec.light p,.sec.light li{color:#2C3238}
.sec.light strong,.sec.light b{color:var(--ink)}
.sec.light .kicker{color:var(--red-deep);border-left-color:var(--red-deep)}
.sec.light .lede{color:#454C53}
.sec.light code{background:var(--paper-2);border-color:var(--line-ink);color:#3A4249}

/* ---------- eyebrow / kicker ---------- */
.kicker{font-family:var(--mono);font-size:11px;font-weight:700;letter-spacing:.24em;
  text-transform:uppercase;color:var(--red);display:block;margin-bottom:18px;
  padding-left:14px;border-left:2px solid var(--red)}
.kicker.plain{padding-left:0;border-left:0;color:var(--faint)}
main{counter-reset:sec}
.kicker.num{counter-increment:sec}
.kicker.num::after{content:"\00a0\00a0/\00a0\00a0" counter(sec,decimal-leading-zero);color:var(--faint)}

.lede{font-size:clamp(18px,1.65vw,22px);line-height:1.55;color:var(--dim);max-width:64ch}
.sec-head{margin-bottom:clamp(28px,3.6vw,52px)}
.sec-head .lede{margin-bottom:0}

/* ---------- header ---------- */
.skip{position:absolute;left:-9999px}
.skip:focus{left:12px;top:12px;z-index:100;background:var(--red);color:#fff;padding:10px 14px}
header.site{position:sticky;top:0;z-index:60;background:rgba(11,13,17,.80);
  backdrop-filter:saturate(160%) blur(14px);-webkit-backdrop-filter:saturate(160%) blur(14px);
  border-bottom:1px solid var(--line)}
html.scrolled header.site{border-bottom-color:var(--line-2);
  box-shadow:0 12px 40px rgba(0,0,0,.5)}
header.site .bar{max-width:var(--wrap);margin:0 auto;padding:13px var(--gut);
  display:flex;align-items:center;gap:22px}
.lockup{display:block;line-height:0;text-decoration:none;flex:0 0 auto;padding-block:4px}
.lockup img{height:clamp(32px,2.9vw,40px);width:auto}

nav.site{margin-left:auto;display:flex;gap:clamp(8px,1vw,14px);align-items:center}
nav.site .grp{position:relative}
nav.site .grp-t{font-family:var(--mono);font-size:11px;font-weight:700;letter-spacing:.1em;
  text-transform:uppercase;color:var(--dim);padding:8px 2px;border:0;border-bottom:2px solid transparent;
  background:none;cursor:pointer;white-space:nowrap;line-height:inherit}
nav.site .grp-t::after{content:"\00a0\25BE";font-size:8px;opacity:.5}

/* The plain-words group sits first and in a box, on the owner's instruction:
   the rest of this site is written for a licensee's counsel, and the person
   whose work is being licensed should not have to go looking for their own
   door. Boxed rather than filled — the red button is the enquiry, and two
   filled marks in one bar would compete. */
nav.site .grp.boxed>.grp-t{color:var(--text);border:1px solid var(--line-2);
  border-bottom:1px solid var(--line-2);padding:8px 14px;margin-right:4px}
nav.site .grp.boxed>.grp-t:hover{border-color:var(--silver);color:#fff}
nav.site .grp.boxed.open>.grp-t,
nav.site .grp.boxed.has-current>.grp-t{border-color:var(--red);color:#fff}
@media (max-width:1180px){
  nav.site .grp.boxed>.grp-t{border:0;padding:8px 2px;margin-right:0}
}
nav.site .grp-t:hover,nav.site .grp.open .grp-t,nav.site .grp.has-current .grp-t{color:#fff;border-bottom-color:var(--red)}
nav.site .grp-m{position:absolute;top:calc(100% + 12px);left:-14px;min-width:310px;
  background:var(--raise);border:1px solid var(--line-2);border-top:2px solid var(--red);
  box-shadow:0 24px 60px rgba(0,0,0,.6);padding:8px;display:none;z-index:70}
nav.site .grp-m::before{content:"";position:absolute;left:0;right:0;top:-14px;height:14px}
nav.site .grp.open .grp-m,nav.site .grp:hover .grp-m,nav.site .grp:focus-within .grp-m{display:block}
nav.site .grp-m a{display:block;padding:10px 12px;text-decoration:none;
  font-family:var(--mono);font-size:11.5px;font-weight:700;letter-spacing:.06em;
  text-transform:uppercase;color:var(--text);white-space:normal;line-height:1.25}
nav.site .grp-m a small{display:block;font-family:var(--sans);font-size:12.5px;font-weight:400;
  letter-spacing:0;text-transform:none;color:var(--faint);margin-top:3px}
nav.site .grp-m a:hover{background:var(--raise-2);color:#fff}
nav.site .grp-m a:hover small{color:var(--dim)}
nav.site .grp-m a[aria-current="page"]{background:var(--raise-2);box-shadow:inset 2px 0 0 var(--red)}
nav.site .grp.right .grp-m{left:auto;right:-14px}
nav.site>a.top{font-family:var(--mono);font-size:11px;font-weight:700;letter-spacing:.1em;
  text-transform:uppercase;color:var(--dim);padding:8px 2px;text-decoration:none;
  border-bottom:2px solid transparent;white-space:nowrap}
nav.site>a.top:hover,nav.site>a.top[aria-current="page"]{color:#fff;border-bottom-color:var(--red)}
/* the globe: one hub, English, unprefixed from every edition — STE's pattern */
nav.site .lang-switch{font-size:17px;padding:8px 9px;line-height:1;opacity:.72;text-decoration:none;
  transition:opacity .2s,transform .2s}
nav.site .lang-switch:hover{opacity:1;transform:scale(1.08)}
nav.site .lang-switch[aria-current="page"]{opacity:1}
nav.site .enq{font-family:var(--mono);font-size:11px;font-weight:700;letter-spacing:.1em;
  text-transform:uppercase;text-decoration:none;color:#fff;background:var(--red);
  border:1px solid var(--red);padding:10px 16px;margin-left:6px;white-space:nowrap}
nav.site .enq:hover{background:#fff;border-color:#fff;color:var(--void)}

.burger{display:none;margin-left:auto;font-family:var(--mono);font-size:11px;font-weight:700;
  letter-spacing:.1em;text-transform:uppercase;background:none;border:1px solid var(--line-2);
  padding:10px 14px;cursor:pointer;color:var(--text);min-height:44px}
@media (max-width:1180px){
  .burger{display:inline-flex;align-items:center}
  nav.site{display:none;order:3;width:100%;flex-direction:column;align-items:stretch;gap:0;
    padding-bottom:14px}
  nav.site.open{display:flex;max-height:calc(100dvh - 86px);overflow-y:auto;overscroll-behavior:contain}
  nav.site .grp{width:100%}
  nav.site .grp-t{display:block;width:100%;text-align:left;pointer-events:none;
    padding:18px 0 6px;color:var(--faint);font-size:10px;letter-spacing:.2em;border:0}
  nav.site .grp-t::after{content:""}
  nav.site .grp-m{position:static;display:block;border:0;box-shadow:none;padding:0;min-width:0;background:none}
  nav.site .grp-m::before{display:none}
  nav.site .grp-m a{padding:13px 0;border-bottom:1px solid var(--line);font-size:12px}
  nav.site .grp-m a small{display:none}
  nav.site>a.top{display:block;padding:14px 0;border-bottom:1px solid var(--line)}
  nav.site .enq{margin:16px 0 0;text-align:center;padding:14px}
  header.site .bar{flex-wrap:wrap}
}

/* ---------- hero ---------- */
.hero{padding-block:clamp(72px,11vw,168px);position:relative;overflow:hidden}
.hero::before{content:"";position:absolute;inset:0;pointer-events:none;
  background:radial-gradient(120% 90% at 82% 12%,var(--red-glow),transparent 58%)}
.hero .wrap{position:relative;z-index:1}
.hero h1{margin-bottom:.36em}
.hero .lede{font-size:clamp(19px,2vw,27px);color:var(--dim);max-width:60ch}
.hero .tagline{font-family:var(--mono);font-size:11px;letter-spacing:.3em;text-transform:uppercase;
  color:var(--faint);margin-top:clamp(28px,3.5vw,44px)}
.hero.split-hero .wrap{display:grid;gap:clamp(32px,5vw,72px);align-items:center;
  grid-template-columns:1fr}
@media (min-width:1000px){.hero.split-hero .wrap{grid-template-columns:minmax(0,1.05fr) minmax(0,.95fr)}}

/* ---------- buttons ---------- */
.btn{display:inline-flex;align-items:center;gap:.6em;font-family:var(--mono);font-size:11.5px;
  font-weight:700;letter-spacing:.12em;text-transform:uppercase;text-decoration:none;
  padding:15px 26px;background:var(--red);color:#fff;border:1px solid var(--red);white-space:nowrap;max-width:100%}
@media (max-width:620px){.btn{white-space:normal;text-align:center}}
.btn:hover{background:#fff;border-color:#fff;color:var(--void)}
.btn.ghost{background:transparent;color:var(--text);border-color:var(--line-2)}
.btn.ghost:hover{background:#fff;border-color:#fff;color:var(--void)}
.btn.small{padding:11px 18px;font-size:10.5px}
.sec.light .btn.ghost{color:var(--ink);border-color:var(--line-ink)}
.sec.light .btn.ghost:hover{background:var(--ink);border-color:var(--ink);color:#fff}
.btns{display:flex;flex-wrap:wrap;gap:14px;margin-top:clamp(26px,3.2vw,40px)}
@media (max-width:600px){.btns{flex-direction:column;align-items:stretch}.btns .btn{justify-content:center}}
.btn-text{display:inline-block;padding:6px 0;font-family:var(--mono);font-size:11.5px;font-weight:700;
  letter-spacing:.12em;text-transform:uppercase;color:var(--red);text-decoration:none}
.btn-text::after{content:"\00a0\2192";display:inline-block;transition:transform .2s ease}
.btn-text:hover{color:#fff}
.btn-text:hover::after{transform:translateX(5px)}
.sec.light .btn-text{color:var(--red-deep)}
.sec.light .btn-text:hover{color:var(--ink)}

/* ---------- grids ---------- */
.cols{display:grid;gap:clamp(22px,2.8vw,42px);grid-template-columns:1fr;margin-top:clamp(28px,3.6vw,52px)}
@media (min-width:740px){.cols.c2{grid-template-columns:repeat(2,1fr)}
  .cols.c4{grid-template-columns:repeat(2,1fr)}}
@media (min-width:1000px){.cols.c3{grid-template-columns:repeat(3,1fr)}
  .cols.c4{grid-template-columns:repeat(4,1fr)}}
.blk{border-top:1px solid var(--line-2);padding-top:20px;position:relative}
.blk::before{content:"";position:absolute;left:0;top:-1px;width:44px;height:2px;background:var(--red)}
.blk h3{margin-bottom:10px}
.blk p{font-size:15.5px;color:var(--dim);margin-bottom:0}
.sec.light .blk{border-top-color:var(--line-ink)}
.sec.light .blk p{color:#4A5158}

/* ---------- cards ---------- */
.grid{display:grid;gap:clamp(16px,2vw,24px);margin-top:clamp(28px,3.6vw,52px)}
.grid.g2{grid-template-columns:repeat(auto-fit,minmax(min(100%,340px),1fr))}
.grid.g3{grid-template-columns:repeat(auto-fit,minmax(min(100%,290px),1fr))}
.grid.g4{grid-template-columns:repeat(auto-fit,minmax(min(100%,236px),1fr))}
.card{background:var(--raise);border:1px solid var(--line);padding:clamp(22px,2.6vw,32px);
  position:relative;display:flex;flex-direction:column}
.card .k{display:block;font-family:var(--mono);font-size:10px;font-weight:700;letter-spacing:.2em;
  text-transform:uppercase;color:var(--red);margin-bottom:14px}
.card h3{margin-bottom:11px}
.card p{font-size:15.5px;color:var(--dim);margin-bottom:10px}
.card p:last-child{margin-bottom:0}
.card ul{margin-bottom:0}
.card li{font-size:15px;color:var(--dim)}
.card .btn-text{margin-top:auto;padding-top:16px}
a.card{text-decoration:none;color:inherit;transition:border-color .22s,transform .22s,box-shadow .22s}
a.card:hover{border-color:var(--red);transform:translateY(-3px);box-shadow:0 20px 48px rgba(0,0,0,.5)}
.card.lead{border-top:2px solid var(--red)}
.sec.light .card{background:var(--paper-2);border-color:var(--line-ink)}
.sec.light .card .k{color:var(--red-deep)}
.sec.light .card p,.sec.light .card li{color:#4A5158}

/* ---------- numbered sequence ---------- */
.seq{list-style:none;margin:clamp(30px,3.8vw,52px) 0 0;padding:0;border-top:1px solid var(--line)}
.seq li{display:grid;grid-template-columns:74px 1fr;gap:clamp(16px,2.4vw,34px);
  padding:clamp(22px,2.6vw,34px) 0;border-bottom:1px solid var(--line);align-items:start;
  margin:0;max-width:none}
.seq .n{font-family:var(--mono);font-size:11px;font-weight:700;letter-spacing:.16em;color:var(--red);
  padding-top:9px}
.seq b{display:block;font-family:var(--disp);text-transform:uppercase;font-weight:700;
  font-size:clamp(20px,2.1vw,30px);line-height:1.04;margin-bottom:9px;color:#fff}
.seq .d{display:block;font-size:15.5px;line-height:1.6;color:var(--dim);max-width:66ch}
.sec.light .seq{border-top-color:var(--line-ink)}
.sec.light .seq li{border-bottom-color:var(--line-ink)}
.sec.light .seq b{color:var(--ink)}
.sec.light .seq .d{color:#4A5158}
@media (max-width:620px){.seq li{grid-template-columns:1fr;gap:8px}.seq .n{padding-top:0}}

/* ---------- callout ---------- */
.callout{border-left:2px solid var(--red);padding-left:clamp(18px,2.2vw,30px);
  margin-block:clamp(26px,3.2vw,44px);max-width:74ch}
.callout p{font-size:clamp(17px,1.5vw,21px);line-height:1.5;color:#fff;margin-bottom:0}
.sec.light .callout{border-left-color:var(--red-deep)}
.sec.light .callout p{color:var(--ink)}

/* ---------- note / aside ---------- */
.note{background:var(--raise);border:1px solid var(--line);border-left:2px solid var(--silver-dim);
  padding:22px 26px;margin:26px 0;max-width:74ch}
.note .k{display:block;font-family:var(--mono);font-size:10px;font-weight:700;letter-spacing:.2em;
  text-transform:uppercase;color:var(--silver);margin-bottom:10px}
.note p{font-size:15.5px;color:var(--dim);margin-bottom:0}
.note p+p{margin-top:10px}
.sec.light .note{background:var(--paper-2);border-color:var(--line-ink);border-left-color:var(--silver-dim)}
.sec.light .note .k{color:#5A626A}
.sec.light .note p{color:#4A5158}

/* ---------- tables ---------- */
.tbl-wrap{overflow-x:auto;border:1px solid var(--line);margin-top:clamp(26px,3.2vw,44px)}
table.tbl{width:100%;min-width:600px;border-collapse:collapse;background:var(--raise)}
.tbl th{font-family:var(--mono);font-size:10px;font-weight:700;letter-spacing:.18em;
  text-transform:uppercase;color:var(--faint);text-align:left;padding:15px 18px;
  background:var(--raise-2);border-bottom:1px solid var(--line-2)}
.tbl td{padding:16px 18px;border-bottom:1px solid var(--line);font-size:15px;line-height:1.55;
  vertical-align:top;color:var(--dim)}
.tbl tr:last-child td{border-bottom:0}
.tbl td b,.tbl td strong{color:#fff}
.tbl td.k{font-family:var(--mono);font-size:11.5px;font-weight:700;letter-spacing:.05em;
  color:var(--red);white-space:nowrap}
.sec.light .tbl-wrap{border-color:var(--line-ink)}
.sec.light table.tbl{background:var(--paper)}
.sec.light .tbl th{background:var(--paper-2);color:#5A626A;border-bottom-color:var(--line-ink)}
.sec.light .tbl td{border-bottom-color:var(--line-ink);color:#4A5158}
.sec.light .tbl td b{color:var(--ink)}
.sec.light .tbl td.k{color:var(--red-deep)}
@media (max-width:740px){
  .tbl-wrap{border:0;overflow-x:visible}
  table.tbl{display:block;min-width:0;background:none}
  table.tbl tbody,table.tbl tr{display:block}
  table.tbl thead{display:none}
  table.tbl tr{border:1px solid var(--line);padding:14px 18px;margin-bottom:12px;background:var(--raise)}
  table.tbl td{display:block;padding:7px 0;border:0}
  table.tbl td::before{content:attr(data-th);display:block;font-family:var(--mono);font-size:9.5px;
    font-weight:700;letter-spacing:.18em;text-transform:uppercase;color:var(--faint);margin-bottom:3px}
  table.tbl td.k::before{content:attr(data-th)}
  .sec.light table.tbl tr{background:var(--paper-2);border-color:var(--line-ink)}
}

/* ---------- definition rows ---------- */
.facts{display:grid;gap:18px 32px;grid-template-columns:repeat(auto-fit,minmax(min(100%,230px),1fr));
  margin:clamp(28px,3.6vw,52px) 0 0}
.facts div{border-top:1px solid var(--line-2);padding-top:13px}
.facts dt{font-family:var(--mono);font-size:10px;font-weight:700;letter-spacing:.18em;
  text-transform:uppercase;color:var(--red);margin-bottom:7px}
.facts dd{font-size:15.5px;color:var(--text);margin:0}
.facts dd small{display:block;color:var(--faint);font-size:13px;margin-top:5px}
.sec.light .facts div{border-top-color:var(--line-ink)}
.sec.light .facts dt{color:var(--red-deep)}
.sec.light .facts dd{color:var(--ink)}

/* ---------- glossary ---------- */
.gloss{display:grid;grid-template-columns:1fr;margin:clamp(30px,3.8vw,52px) 0 0}
.gloss div{display:grid;grid-template-columns:minmax(170px,250px) 1fr;gap:14px 28px;
  padding:18px 0;border-top:1px solid var(--line)}
.gloss div:last-child{border-bottom:1px solid var(--line)}
.gloss dt{font-family:var(--disp);font-weight:700;font-size:21px;text-transform:uppercase;
  line-height:1.08;color:#fff}
.gloss dt small{display:block;font-family:var(--mono);font-size:9.5px;font-weight:700;
  letter-spacing:.16em;color:var(--red);margin-top:5px;text-transform:uppercase}
.gloss dd{margin:0;font-size:15.5px;color:var(--dim);max-width:70ch}
@media (max-width:660px){.gloss div{grid-template-columns:1fr;gap:7px}}
.sec.light .gloss div{border-top-color:var(--line-ink)}
.sec.light .gloss div:last-child{border-bottom-color:var(--line-ink)}
.sec.light .gloss dt{color:var(--ink)}
.sec.light .gloss dt small{color:var(--red-deep)}
.sec.light .gloss dd{color:#4A5158}

/* ---------- tick / refuse lists ---------- */
ul.tick{list-style:none;padding:0;margin:clamp(20px,2.4vw,32px) 0 0}
ul.tick li{position:relative;padding-left:30px;margin-bottom:12px;color:var(--text)}
ul.tick li::before{content:"";position:absolute;left:0;top:.62em;width:14px;height:2px;background:var(--red)}
ul.tick.refuse li::before{width:11px;height:11px;top:.42em;border:1.5px solid var(--silver-dim);
  background:transparent;border-radius:50%}
.sec.light ul.tick li{color:#2C3238}

/* ---------- on-this-page subnav ---------- */
.subnav{display:flex;flex-wrap:wrap;gap:10px 24px;align-items:center;padding:14px 0;
  border-bottom:1px solid var(--line);margin-bottom:clamp(28px,3.4vw,44px);max-width:none}
.subnav .lbl{font-family:var(--mono);font-size:9.5px;font-weight:700;letter-spacing:.2em;
  text-transform:uppercase;color:var(--red)}
.subnav a{font-family:var(--mono);font-size:10.5px;font-weight:700;letter-spacing:.07em;
  text-transform:uppercase;color:var(--faint);text-decoration:none;padding:5px 0;
  border-bottom:1px solid transparent}
.subnav a:hover{color:#fff;border-bottom-color:var(--red)}
.sec.light .subnav{border-bottom-color:var(--line-ink)}
.sec.light .subnav .lbl{color:var(--red-deep)}
.sec.light .subnav a{color:#5A626A}
.sec.light .subnav a:hover{color:var(--ink);border-bottom-color:var(--red-deep)}
h2[id],h3[id],section[id]{scroll-margin-top:96px}

/* ---------- compare columns ---------- */
.compare{display:grid;gap:clamp(14px,1.8vw,22px);
  grid-template-columns:repeat(auto-fit,minmax(min(100%,300px),1fr));margin-top:clamp(28px,3.6vw,48px)}
.compare .col{border:1px solid var(--line);padding:clamp(20px,2.4vw,28px);background:var(--raise)}
.compare .col.now{border-top:2px solid var(--red);background:var(--raise-2)}
.compare .col .k{display:block;font-family:var(--mono);font-size:10px;font-weight:700;
  letter-spacing:.18em;text-transform:uppercase;color:var(--faint);margin-bottom:12px}
.compare .col.now .k{color:var(--red)}
.compare .col h3{margin-bottom:11px}
.compare .col p,.compare .col li{font-size:15px;color:var(--dim)}
.compare .col p:last-child{margin-bottom:0}

/* ---------- quote ---------- */
.quote{font-family:var(--disp);font-weight:700;font-size:clamp(24px,3vw,40px);line-height:1.08;
  text-transform:none;letter-spacing:0;color:#fff;max-width:24ch;margin:clamp(22px,2.6vw,34px) 0 0}
.quote+.src{font-family:var(--mono);font-size:10px;letter-spacing:.16em;text-transform:uppercase;
  color:var(--faint);margin-top:14px;max-width:none}

/* ---------- the form ---------- */
.form{display:grid;gap:18px;grid-template-columns:repeat(auto-fit,minmax(min(100%,270px),1fr));
  margin-top:clamp(26px,3.2vw,44px);position:relative}
.form .full{grid-column:1/-1}
.form label{display:block;font-family:var(--mono);font-size:10px;font-weight:700;letter-spacing:.18em;
  text-transform:uppercase;color:var(--faint);margin-bottom:8px}
.form label .req{color:var(--red)}
.form input,.form select,.form textarea{width:100%;font:inherit;font-size:16px;color:var(--text);
  background:var(--raise-2);border:1px solid var(--line-2);padding:13px 15px;min-height:50px}
.form textarea{min-height:160px;resize:vertical}
.form input:focus,.form select:focus,.form textarea:focus{border-color:var(--red);outline:none;
  box-shadow:0 0 0 3px var(--red-glow)}
.form select{appearance:none;-webkit-appearance:none;
  background-image:url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' width='14' height='9' viewBox='0 0 14 9'><path d='M1 1l6 6 6-6' fill='none' stroke='%23A8B0B8' stroke-width='2'/></svg>");
  background-repeat:no-repeat;background-position:right 15px center;padding-right:40px}
.form .help{font-size:13px;color:var(--faint);margin-top:7px}
.form .hp{position:absolute;left:-9999px;opacity:0;height:0;overflow:hidden}
.form-status{font-size:15px;margin-top:8px;min-height:1.4em}
.form-status.ok{color:#fff;font-weight:600}
.form-status.err{color:var(--red);font-weight:600}

/* ---------- CTA band ---------- */
.cta-band{background:var(--ground);border-block:1px solid var(--line);
  padding-block:clamp(44px,5.4vw,76px);position:relative;overflow:hidden}
.cta-band::before{content:"";position:absolute;inset:0;pointer-events:none;
  background:radial-gradient(80% 140% at 12% 50%,var(--red-glow),transparent 60%)}
.cta-band .wrap{display:flex;flex-wrap:wrap;align-items:center;justify-content:space-between;
  gap:24px 48px;position:relative;z-index:1}
.cta-band h2{font-size:clamp(26px,3.4vw,44px);max-width:22ch;margin-bottom:10px}
.cta-band p{color:var(--dim);margin-bottom:0;max-width:54ch}
.cta-band .btns{margin-top:0}

/* ---------- footer ---------- */
footer.site{background:var(--void);border-top:1px solid var(--line);
  padding-block:clamp(52px,6.4vw,88px)}
footer.site .fgrid{display:grid;gap:34px 26px;grid-template-columns:1.6fr repeat(4,1fr)}
@media (max-width:1080px){footer.site .fgrid{grid-template-columns:repeat(3,1fr)}
  footer.site .brandcol{grid-column:1/-1}}
@media (max-width:700px){footer.site .fgrid{grid-template-columns:1fr 1fr}}
@media (max-width:460px){footer.site .fgrid{grid-template-columns:1fr}}
footer.site h2{font-family:var(--mono);font-size:10px;font-weight:700;letter-spacing:.2em;
  text-transform:uppercase;color:var(--faint);margin-bottom:16px}
footer.site a{display:block;color:var(--dim);text-decoration:none;font-size:14.5px;padding:6px 0}
footer.site a:hover{color:#fff}
@media (max-width:760px){footer.site a{padding:11px 0}}
footer.site .brandcol img{height:34px;width:auto;margin-bottom:18px}
footer.site .brandcol p{font-size:14.5px;color:var(--faint);max-width:42ch;margin-bottom:0}
.rule-line{max-width:none;font-family:var(--mono);font-size:10px;letter-spacing:.18em;
  text-transform:uppercase;color:var(--faint);margin-top:clamp(40px,4.6vw,64px);padding-top:24px;
  border-top:1px solid var(--line)}
.rule-line .cl{white-space:nowrap}
@media (max-width:640px){.rule-line .cl{display:block;margin-bottom:6px}.rule-line .sep{display:none}}
.colophon{font-size:12.5px;color:var(--faint);margin-top:14px;max-width:80ch}

/* ============================================================
   THE DIAGRAM SYSTEM — `.dgm`
   Information movement, drawn in the mark's own geometry.

   Rules of the language, so every schematic on the site reads the same:
     · flow runs left to right; returns run right to left on a lower track
     · a NODE is a thin-stroked rectangle with a mono label
     · a VECTOR is three stacked chevrons, red leading, silver trailing —
       the mark's own figure, used as the arrowhead
     · a BOUNDARY that information does not cross is a dashed vertical rule
     · an object that is SEALED (signed, hash-chained) carries a seal dot
     · nothing in a diagram is decorative; if it is drawn, it is claimed
   ============================================================ */
.dgm{width:100%;height:auto;display:block;margin-top:clamp(28px,3.6vw,48px);overflow:visible}
.dgm-wrap{margin-top:clamp(28px,3.6vw,48px);overflow-x:auto;padding-bottom:6px;
  /* A figure is the argument, not an illustration of it: let it break the text
     measure and run as wide as the viewport sensibly allows. */
  position:relative;left:50%;transform:translateX(-50%);
  width:min(calc(100vw - 2*var(--gut)),1580px)}
.wrap.narrow .dgm-wrap{width:min(calc(100vw - 2*var(--gut)),1580px)}
.dgm-wrap .dgm{margin-top:0;min-width:640px}
/* A table's caption is its label, set like every other technical label on the site. */
.tbl caption{caption-side:top;text-align:left;font-family:var(--mono);font-size:10px;
  letter-spacing:.16em;text-transform:uppercase;color:var(--faint);
  padding:0 0 12px;max-width:74ch}
.sec.light .tbl caption{color:#5A626A}

.dgm-cap{font-family:var(--mono);font-size:10px;letter-spacing:.16em;text-transform:uppercase;
  color:var(--faint);margin-top:16px}

/* node */
.dgm .node{fill:var(--raise);stroke:var(--line-2);stroke-width:1}
.dgm .node-lead{fill:var(--raise-2);stroke:var(--red);stroke-width:1.5}
.dgm .node-label{font-family:var(--disp);font-size:15px;font-weight:700;text-transform:uppercase;
  fill:#fff;letter-spacing:.02em}
.dgm .node-sub{font-family:var(--mono);font-size:8.5px;letter-spacing:.14em;text-transform:uppercase;
  fill:var(--faint)}

/* flow line and the chevron vector */
.dgm .flow{stroke:var(--silver-dim);stroke-width:1.25;fill:none}
.dgm .flow-lead{stroke:var(--red);stroke-width:1.75;fill:none}
.dgm .flow-back{stroke:var(--silver-dim);stroke-width:1.25;fill:none;stroke-dasharray:1 0}
.dgm .chev-a{fill:var(--red)}
.dgm .chev-b{fill:var(--silver)}
.dgm .chev-c{fill:var(--silver-dim)}

/* boundary — what does not cross */
.dgm .bound{stroke:var(--red);stroke-width:1.25;stroke-dasharray:5 5;opacity:.85}
.dgm .bound-label{font-family:var(--mono);font-size:8.5px;letter-spacing:.16em;
  text-transform:uppercase;fill:var(--red)}

/* seal — a signed, chained object */
.dgm .seal{fill:none;stroke:var(--red);stroke-width:1.25}
.dgm .seal-dot{fill:var(--red)}

/* edge labels */
.dgm .edge-label{font-family:var(--mono);font-size:8.5px;letter-spacing:.14em;
  text-transform:uppercase;fill:var(--silver-dim)}
.dgm .tick-label{font-family:var(--mono);font-size:8px;letter-spacing:.1em;fill:var(--faint)}

/* light-surface variants */
.sec.light .dgm .node{fill:var(--paper-2);stroke:var(--line-ink)}
.sec.light .dgm .node-lead{fill:#fff;stroke:var(--red-deep)}
.sec.light .dgm .node-label{fill:var(--ink)}
.sec.light .dgm .node-sub{fill:#6B747C}
.sec.light .dgm .flow{stroke:#98A0A8}
.sec.light .dgm .flow-lead{stroke:var(--red-deep)}
.sec.light .dgm .chev-a{fill:var(--red-deep)}
.sec.light .dgm .chev-b{fill:#7E868E}
.sec.light .dgm .chev-c{fill:#A8B0B8}
.sec.light .dgm .bound,.sec.light .dgm .seal{stroke:var(--red-deep)}
.sec.light .dgm .bound-label{fill:var(--red-deep)}
.sec.light .dgm .seal-dot{fill:var(--red-deep)}
.sec.light .dgm .edge-label{fill:#6B747C}

/* ============================================================
   WATERMARK BANDS — the house effect, inverted for a dark ground
   The estate's tiles are line art struck from the group's own
   equipment geometry ("strip the text, keep the geometry",
   STE-BOK-UPDATE-249) and laid behind a band at about a tenth.
   On Even Steven's white paper that is ink multiplied onto the page.
   On this ground multiply would do nothing — the tile is inverted to
   white line on transparent and laid at a low opacity instead, which
   is the same effect the other way up. Tiles alternate sides so the
   drawings do not stack down one margin.
   ============================================================ */
.wm{position:relative;overflow:hidden}
.wm>.wrap{position:relative;z-index:1}
.wm::before{content:"";position:absolute;inset:0;pointer-events:none;
  background-repeat:no-repeat;background-size:cover;background-position:center;
  opacity:.16;
  -webkit-mask-image:radial-gradient(ellipse 82% 92% at 50% 50%,#000 34%,transparent 100%);
  mask-image:radial-gradient(ellipse 82% 92% at 50% 50%,#000 34%,transparent 100%)}
.wm.wm-cab::before{background-image:url("../wm/tct-wm-cab.webp?v=r2.2")}
.wm.wm-track::before{background-image:url("../wm/tct-wm-track.webp?v=r2.2")}
.wm.wm-hyd::before{background-image:url("../wm/tct-wm-hyd.webp?v=r2.2")}
.wm.wm-breaker::before{background-image:url("../wm/tct-wm-breaker.webp?v=r2.2")}
.wm.wm-filters::before{background-image:url("../wm/tct-wm-filters.webp?v=r2.2")}
.wm.wm-idler::before{background-image:url("../wm/tct-wm-idler.webp?v=r2.2")}
.wm.wm-drive::before{background-image:url("../wm/tct-wm-drive.webp?v=r2.2")}
.cta-band.wm::before{opacity:.19}
/* on the light long-read surface the tile behaves the house way: ink, multiplied */
.sec.light.wm::before{opacity:.10;filter:invert(1);mix-blend-mode:multiply}
@media (max-width:760px){.wm::before{opacity:.12}}

/* ============================================================
   PHOTOGRAPH BANDS — the group's own field and fleet photography,
   graded to black and white so it sits under white type.
   ============================================================ */
.hero.shot{padding:0;min-height:clamp(520px,80vh,860px);display:flex;align-items:flex-end;
  position:relative;overflow:hidden;background:var(--void)}
.hero.shot .media,.hero.shot .media img{position:absolute;inset:0;width:100%;height:100%;
  object-fit:cover;object-position:center}
/* R2.0: the photograph set was graded to a 0.47 mean for the darker R1
   ground; on the lifted ground it is brought up a step here rather than
   re-cut, so the archive masters and the graded files stay as they are. */
.hero.shot .media img,.sec.frame .media img,.sec.shot .media img{filter:brightness(1.12) contrast(1.03)}
/* the homepage frame is composed off-centre: its subject sits right of middle */
.hero.shot.anchor-r .media img{object-position:64% 50%}
.hero.shot.anchor-l .media img{object-position:32% 50%}
/* The scrim earns the type its legibility and then gets out of the way. Heavy only
   under the text block; effectively clear past two thirds, so the machine is seen. */
.hero.shot .scrim{position:absolute;inset:0;z-index:1;
  background:linear-gradient(90deg,rgba(11,13,17,.86) 0%,rgba(11,13,17,.80) 30%,rgba(11,13,17,.62) 46%,rgba(11,13,17,.30) 60%,rgba(11,13,17,.06) 78%,rgba(11,13,17,0) 92%),
             linear-gradient(180deg,rgba(11,13,17,.36) 0%,rgba(11,13,17,.02) 34%,rgba(11,13,17,.04) 58%,rgba(11,13,17,.46) 100%)}
.hero.shot .wrap{position:relative;z-index:2;width:100%;
  padding-top:clamp(80px,12vw,170px);padding-bottom:clamp(44px,6vw,82px)}
.hero.shot .plate{max-width:780px}
@media (max-width:760px){
  .hero.shot{min-height:min(82svh,740px)}
  .hero.shot .scrim{background:linear-gradient(180deg,rgba(11,13,17,.40) 0%,rgba(11,13,17,.18) 30%,rgba(11,13,17,.88) 78%)}
}

/* A FRAME — a photograph on its own, between blocks of copy.
   No scrim and no text: the rhythm device, not a place to say something.
   Full bleed, ruled top and bottom so it reads as deliberate rather than
   as a picture that wandered in. */
.sec.frame{position:relative;padding:0;overflow:hidden;background:var(--void);
  border-block:1px solid var(--line);height:clamp(220px,38vw,460px)}
.sec.frame .media,.sec.frame .media img{position:absolute;inset:0;width:100%;height:100%;
  object-fit:cover;object-position:center}
/* a light, even veil so a frame sits in the page rather than glaring out of it */
.sec.frame::after{content:"";position:absolute;inset:0;pointer-events:none;
  background:linear-gradient(180deg,rgba(11,13,17,.30) 0%,rgba(11,13,17,.08) 38%,rgba(11,13,17,.08) 62%,rgba(11,13,17,.34) 100%)}
@media (max-width:760px){.sec.frame{height:clamp(180px,52vw,300px)}}

.sec.shot{position:relative;min-height:clamp(360px,52vh,600px);display:flex;align-items:flex-end;
  padding:0;overflow:hidden;background:var(--void);border-block:1px solid var(--line)}
.sec.shot .media,.sec.shot .media img{position:absolute;inset:0;width:100%;height:100%;
  object-fit:cover;object-position:center}
.sec.shot .scrim{position:absolute;inset:0;z-index:1;
  background:linear-gradient(90deg,rgba(11,13,17,.84) 0%,rgba(11,13,17,.46) 46%,rgba(11,13,17,.10) 100%),
             linear-gradient(180deg,rgba(11,13,17,.20) 0%,rgba(11,13,17,0) 40%,rgba(11,13,17,.62) 100%)}
.sec.shot .wrap{position:relative;z-index:2;width:100%;
  padding-top:clamp(44px,6vw,80px);padding-bottom:clamp(38px,5vw,64px)}
.sec.shot h2{max-width:22ch}
.sec.shot .lede{color:rgba(255,255,255,.90)}
@media (max-width:760px){
  .sec.shot .scrim{background:linear-gradient(180deg,rgba(11,13,17,.28) 0%,rgba(11,13,17,.14) 32%,rgba(11,13,17,.86) 80%)}
}

figure.ph{margin:0;position:relative}
figure.ph img{width:100%;aspect-ratio:3/2;object-fit:cover;background:var(--raise)}
figure.ph.tall img{aspect-ratio:4/5}
figure.ph.wide img{aspect-ratio:21/9}

/* ============================================================
   MOTION — R2.0. Driven by assets/js/tct.js, which arms the root with
   `rv-armed` only when the reader has not asked for reduced motion, and
   marks the reveal candidates `.rv` at run time. No markup carries
   motion, so a translated edition moves exactly like the English.
   Rules of the motion, so the site moves as one thing:
     · nothing moves that is not arriving, being pointed at, or flowing
     · a reveal is one rise and a fade; siblings arriving together
       cascade 70ms apart, a lone arrival does not wait
     · a diagram draws its flow lines at their own length, then the
       chevrons pulse tail-to-lead a few times and rest — the figure is
       read, not watched
     · the hero settles: the frame eases from 1.06 to 1, the plate rises
     · with reduced motion, or with no script, everything is simply there
   ============================================================ */
.rv{opacity:1}
@media (prefers-reduced-motion:no-preference){
  /* The reveal only ever sets a transform while an element is hidden. Once it
     is in, the element's own transform is its own again — the figure wrap
     centres itself with translateX(-50%), a card lifts on hover — which an
     `.in{transform:none}` would have overridden (R2.0 shipped with exactly
     that, and every full-bleed figure sat half a screen to the right). */
  html.rv-armed .rv{transition:opacity .72s cubic-bezier(.22,.61,.36,1),transform .72s cubic-bezier(.22,.61,.36,1)}
  html.rv-armed .rv:not(.in){opacity:0}
  /* anything that carries a transform of its own (.rv-fade) is faded, never
     moved: the reveal declares no transform on it in either state */
  html.rv-armed .rv:not(.in):not(.rv-fade){transform:translateY(18px)}
  html.rv-armed .rv.rv-soft{transition-duration:.6s}
  html.rv-armed .rv.rv-soft:not(.in):not(.rv-fade){transform:translateY(8px)}
  html.rv-armed .rule-line .cl{display:inline-block}

  /* arrival */
  html.rv-armed .lockup,html.rv-armed nav.site,html.rv-armed .burger{animation:tct-fade .7s ease-out both}
  html.rv-armed .hero .plate>*{animation:tct-rise .9s cubic-bezier(.22,.61,.36,1) both}
  html.rv-armed .hero .plate>:nth-child(1){animation-delay:.08s}
  html.rv-armed .hero .plate>:nth-child(2){animation-delay:.20s}
  html.rv-armed .hero .plate>:nth-child(3){animation-delay:.32s}
  html.rv-armed .hero .plate>:nth-child(4){animation-delay:.44s}
  html.rv-armed .hero .plate>:nth-child(5){animation-delay:.56s}
  html.rv-armed .hero.shot .media img{animation:tct-settle 12s cubic-bezier(.16,.6,.3,1) both}
  @keyframes tct-fade{from{opacity:0}to{opacity:1}}
  @keyframes tct-rise{from{opacity:0;transform:translateY(24px)}to{opacity:1;transform:none}}
  @keyframes tct-settle{from{transform:scale(1.06)}to{transform:scale(1)}}

  /* the bar: a red rule under it is how far down the page the reader is */
  header.site{transition:box-shadow .24s,border-color .24s}
  header.site::after{content:"";position:absolute;left:0;right:0;bottom:-1px;height:2px;
    background:var(--red);transform:scaleX(var(--sp,0));transform-origin:0 50%;pointer-events:none}
  nav.site .grp-t,nav.site>a.top,nav.site .enq,.burger{transition:color .2s,border-color .2s,background .2s}
  @media (min-width:1181px){
    nav.site .grp-m{display:block;visibility:hidden;opacity:0;transform:translateY(-8px);
      transition:opacity .2s ease,transform .22s cubic-bezier(.22,.61,.36,1),visibility 0s linear .22s}
    nav.site .grp.open .grp-m,nav.site .grp:hover .grp-m,nav.site .grp:focus-within .grp-m{
      visibility:visible;opacity:1;transform:none;transition-delay:0s}
    nav.site .grp-m a{transition:background .15s,color .15s}
  }
  nav.site .lang-switch:hover{transform:rotate(-14deg) scale(1.12)}

  /* pointing */
  .btn{transition:background .2s,color .2s,border-color .2s,transform .18s,box-shadow .2s}
  .btn:hover{transform:translateY(-2px);box-shadow:0 10px 28px rgba(0,0,0,.35)}
  .btn-text::after{transition:transform .2s ease}
  main p a,main li a{transition:color .15s,text-decoration-thickness .15s}
  a.card{transition:border-color .24s,transform .24s,box-shadow .24s}
  a.card::after{content:"";position:absolute;left:0;right:0;top:-1px;height:2px;background:var(--red);
    transform:scaleX(0);transform-origin:0 50%;transition:transform .34s cubic-bezier(.22,.61,.36,1)}
  a.card:hover::after{transform:scaleX(1)}
  .lcard .flag{transition:filter .25s,transform .25s}
  .lcard:hover .flag{transform:scale(1.06)}
  .tbl tbody tr{transition:background .15s}
  .tbl tbody tr:hover td{background:rgba(255,255,255,.025)}
  footer.site a{transition:color .18s,transform .18s}
  footer.site a:hover{transform:translateX(3px)}

  /* flow: the diagrams */
  .dgm.in .flow,.dgm.in .flow-lead,.dgm.in .flow-back{animation:tct-draw 1.5s cubic-bezier(.22,.61,.36,1) .15s forwards}
  .dgm.in .chev-c{animation:tct-chev 2.4s ease-in-out 1.0s 5}
  .dgm.in .chev-b{animation:tct-chev 2.4s ease-in-out 1.18s 5}
  .dgm.in .chev-a{animation:tct-chev 2.4s ease-in-out 1.36s 5}
  .dgm.in .seal-dot{transform-box:fill-box;transform-origin:center;animation:tct-seal 2.4s ease-in-out 1.2s 5}
  .dgm.in .bound{animation:tct-march 1.6s linear 1.2s 10}
  @keyframes tct-draw{to{stroke-dashoffset:0}}
  @keyframes tct-chev{0%,100%{opacity:1}50%{opacity:.4}}
  @keyframes tct-seal{0%,100%{transform:scale(1)}50%{transform:scale(1.6);opacity:.75}}
  @keyframes tct-march{to{stroke-dashoffset:-10}}
}

/* ---------- print: the legal pages are printed and read on paper ---------- */
@media print{
  html,body{background:#fff;color:#000}
  header.site,.burger,.skip,.btns,.subnav,.cta-band,footer.site .fgrid{display:none}
  .sec,.sec.raise,.sec.panel,.sec.light{background:#fff;color:#000;padding-block:18pt;border:0}
  h1,h2,h3,.card h3,.seq b,.gloss dt{color:#000}
  p,li,.lede,.card p,.tbl td,.gloss dd,.seq .d{color:#000}
  .kicker{color:#000;border-left-color:#000}
  .card,.note,.compare .col,.tbl-wrap{background:#fff;border-color:#999}
  table.tbl{background:#fff}
  .tbl th{background:#eee;color:#000}
  .tbl td{color:#000;border-bottom-color:#ccc}
  .callout{border-left-color:#000}
  .callout p{color:#000}
  .rv{opacity:1!important;transform:none!important}
  .hero .plate>*,.lockup{animation:none!important;opacity:1!important}
  .dgm .flow,.dgm .flow-lead,.dgm .flow-back{stroke-dasharray:none!important;stroke-dashoffset:0!important;animation:none!important}
  .dgm .node{fill:#fff;stroke:#666}
  .dgm .node-label{fill:#000}
  .dgm .flow,.dgm .flow-lead{stroke:#333}
  .dgm .chev-a,.dgm .chev-b,.dgm .chev-c{fill:#333}
  a{text-decoration:none;color:#000}
}