/* ══════════════════════════════════════════════════════════════════════════
   PMC DXB — shared design system
   ══════════════════════════════════════════════════════════════════════════
   Every page links this file. It carries the tokens, the one-weight type
   system, the quadrant-mark graphics language, the nav, the form styling and
   the reduced-motion rules.

   The token block keeps the LEGACY ALIASES (--navy, --white, --gold, …) that
   the older per-page stylesheets still reference, so linking this file alone
   re-skins a legacy page without touching its own CSS.

   Load it AFTER a page's own <style> block so the shared tokens win.
   Page-specific layout stays in the page.
   ══════════════════════════════════════════════════════════════════════════ */

/* ───────────────── FOUNDATION — font, one-weight system, tokens, type, links ───────────────── */
@font-face {
    font-family: 'TT Commons Classic';
    /* Root-absolute: this file is served from /css/, so a relative path
       resolved to /css/fonts/… and 404'd on every page load. */
    src: url('/fonts/TT_Commons_Classic_Regular.woff2') format('woff2'),
         url('/fonts/TT_Commons_Classic_Regular.woff') format('woff');
    font-weight: 400;
    font-style: normal;
    font-display: swap;
    /* metric overrides kill the swap-in reflow jump */
    ascent-override: 94%;
    descent-override: 24%;
    line-gap-override: 0%;
}

/* ── THE ONE-WEIGHT SYSTEM ───────────────────────────────────────────
   Only the Regular (400) file exists and is licensed. Declaring 600/700
   made the browser synthesise faux bold, which at 2-3x DPR is the
   loudest cheapness signal on the page. font-synthesis:none forbids it;
   hierarchy is rebuilt from size, tracking, ink tier and register. */
html { font-synthesis: none; }
html, body,
h1, h2, h3, h4, h5, h6,
button, input, select, textarea { font-weight: 400; }
strong, b { font-weight: 400; color: var(--ink-1); letter-spacing: -.004em; }
em, i     { font-style: normal; color: var(--primary); }

* {
    margin: 0;
    padding: 0;
    box-sizing: border-box;
}

:root{
  /* ═══════════ SURFACES ═══════════ */
  --paper:        #ffffff;   /* page, cards, form fields          */
  --paper-2:      #fafbfd;   /* alternating band                  */
  --paper-3:      #f2f6fa;   /* register band, quiet rows         */
  --paper-4:      #eef3f9;   /* sunk wells, progress tracks       */
  --ink-band:     #0b1220;   /* principal chapter + footer ONLY   */
  --ink-band-2:   #14213a;   /* raised plate inside the ink band  */

  /* ═══════════ INK — four tiers replace four font weights ═══════════ */
  --ink-1: #0f172a;   /* headings, key figures                              */
  --ink-2: #3d4a5c;   /* body                                               */
  --ink-3: #5b6b7f;   /* captions, ALL mono labels, meta                    */
  --ink-4: #8496a8;   /* NON-TEXT ONLY — rules, ticks, dividers, disabled.
                         3.04:1. Never a label, never a nav link, never a
                         timecode. Enforced by review.                      */
  --on-ink-1: #e8eef6;
  --on-ink-2: #9fb1c7;
  --on-ink-3: #7d8fa6;   /* ≥14px only on --ink-band; never on --ink-band-2 */

  /* ═══════════ BRAND — azure, unchanged core ═══════════ */
  --primary:        #0b5fb0;
  --primary-press:  #094d8e;
  --primary-lit:    #1fa2e6;   /* GRAPHICS ONLY. 2.9:1. Never text on paper */
  --primary-on-ink: #5dbdf2;
  --primary-tint:   #eaf2fb;
  --primary-tint-2: #d7e7f7;

  /* ═══════════ PRACTICE TAXONOMY — one coded tick each, never decoration ═══
     Rule: a practice colour may appear in EXACTLY three places —
     (a) the filled satellite of that row's quadrant mark,
     (b) the 2px inline-start rule on that row's open panel,
     (c) that practice's chip in the hero strip.
     Nowhere else on the page. Four full-colour cards look like a candy
     store; four coded entries in a monochrome register look like a firm. */
  --prac-1: #0b5fb0;  --prac-1-tint: #eaf2fb;   /* 01 Automation & AI       */
  --prac-2: #b91c1c;  --prac-2-tint: #fdeeee;   /* 02 Security intelligence */
  --prac-3: #0f766e;  --prac-3-tint: #eaf5f3;   /* 03 Capital & advisory    */
  --prac-4: #9a4707;  --prac-4-tint: #fbf1e6;   /* 04 Electric mobility     */

  /* ═══════════ WARMTH BUDGET — margin notes and nothing else ═══════════ */
  --note-paper: #fdf8ed;
  --note-ink:   #7a5a12;
  --note-rule:  #e6d6ae;
  --note-paper-ink: rgba(255,255,255,.06);   /* the note on the ink band */

  /* ═══════════ STATUS — ventures ledger only ═══════════ */
  --live:  #047857;   --live-tint:  #e9f6f1;
  --build: #9a4707;   --build-tint: #fbf1e6;

  /* ═══════════ HAIRLINES — the whole border system, five values ═══════════ */
  --rule-1: rgba(15,23,42,.055);   /* zebra, faintest field              */
  --rule-2: rgba(15,23,42,.09);    /* card perimeter, list dividers      */
  --rule-3: rgba(15,23,42,.14);    /* inputs, section rules, edge-light  */
  --rule-4: rgba(15,23,42,.22);    /* emphasis rule, active tick         */
  --rule-ink:   rgba(255,255,255,.09);
  --rule-ink-2: rgba(255,255,255,.16);

  /* ═══════════ ELEVATION — hairline first, max shadow alpha 6% ═══════════ */
  --e-0: 0 0 0 1px var(--rule-2);
  --e-1: 0 0 0 1px var(--rule-2), 0 1px 1px rgba(15,23,42,.04);
  --e-2: 0 0 0 1px var(--rule-2),
         0 1px 1px rgba(15,23,42,.04),
         0 3px 6px rgba(15,23,42,.035),
         0 8px 16px rgba(15,23,42,.04);
  --e-3: 0 0 0 1px var(--rule-3),
         0 2px 4px rgba(15,23,42,.05),
         0 10px 22px rgba(15,23,42,.06),
         0 24px 44px rgba(15,23,42,.06);   /* modal / mobile sheet only */
  /* SOLID focus ring — passes WCAG 2.2 SC 1.4.11 at 6.41:1 against paper.
     Every alpha-ring in the four proposals measured 1.4–1.6:1 and failed. */
  --e-focus: 0 0 0 2px var(--paper), 0 0 0 4px var(--primary);
  --e-focus-ink: 0 0 0 2px var(--ink-band), 0 0 0 4px var(--primary-on-ink);

  /* ═══════════ RADII — tight. Nothing on this site is a bubble. ═══════════ */
  --r-1: 3px;    /* chips, ticks, LEDs        */
  --r-2: 6px;    /* buttons, inputs           */
  --r-3: 10px;   /* cards, plates — the max   */
  --r-pill: 999px; /* status dots only        */

  /* ═══════════ SPACE — 4px base, fluid only where it earns it ═══════════ */
  --s-1: .25rem;  --s-2: .5rem;   --s-3: .75rem;  --s-4: 1rem;
  --s-5: 1.25rem; --s-6: 1.5rem;  --s-8: 2rem;
  --s-12: clamp(2rem,   1.70rem + 1.30vw, 3rem);    /* 32 →  48 */
  --s-16: clamp(2.5rem, 2.00rem + 2.20vw, 4rem);    /* 40 →  64 */
  --s-24: clamp(2.75rem, 2.20rem + 2.40vw, 4.5rem); /* 44 →  72 */
  --s-32: clamp(3.5rem,  2.70rem + 3.60vw, 6rem);   /* 56 →  96  chapter rhythm */

  /* ═══════════ LAYOUT ═══════════ */
  --shell:     1180px;
  --shell-pad: clamp(1.25rem, .95rem + 1.5vw, 2.5rem);
  --nav-h:     64px;
  --bar-h:     62px;
  --measure:   66ch;
  --measure-s: 38ch;

  /* ═══════════ MOTION ═══════════ */
  --ease:       cubic-bezier(.25,.46,.45,.94);   /* out-quad  */
  --ease-quart: cubic-bezier(.165,.84,.44,1);
  --ease-expo:  cubic-bezier(.19,1,.22,1);
  --t-fast: 120ms; --t: 160ms; --t-slow: 240ms;

  /* ═══════════ THE QUADRANT FIELD — colour baked in, single mask layer.
     Two data URIs (paper / ink) so we never need mask-composite, which is
     the known Blink footgun that makes a masked field bleed to the edge. */
  --field-paper: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='72' height='72' viewBox='0 0 72 72'%3E%3Cg fill='none' stroke='%230b5fb0' stroke-opacity='.16' stroke-width='1' stroke-linecap='round'%3E%3Ccircle cx='36' cy='36' r='11'/%3E%3Cpath d='M36 18v7M36 47v7M18 36h7M47 36h7'/%3E%3C/g%3E%3Cg fill='%230b5fb0' fill-opacity='.13'%3E%3Ccircle cx='36' cy='36' r='2.4'/%3E%3Ccircle cx='36' cy='14' r='2.2'/%3E%3Ccircle cx='58' cy='36' r='2.2'/%3E%3Ccircle cx='36' cy='58' r='2.2'/%3E%3Ccircle cx='14' cy='36' r='2.2'/%3E%3C/g%3E%3C/svg%3E");
  --field-ink: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='72' height='72' viewBox='0 0 72 72'%3E%3Cg fill='none' stroke='%235dbdf2' stroke-opacity='.20' stroke-width='1' stroke-linecap='round'%3E%3Ccircle cx='36' cy='36' r='11'/%3E%3Cpath d='M36 18v7M36 47v7M18 36h7M47 36h7'/%3E%3C/g%3E%3Cg fill='%235dbdf2' fill-opacity='.17'%3E%3Ccircle cx='36' cy='36' r='2.4'/%3E%3Ccircle cx='36' cy='14' r='2.2'/%3E%3Ccircle cx='58' cy='36' r='2.2'/%3E%3Ccircle cx='36' cy='58' r='2.2'/%3E%3Ccircle cx='14' cy='36' r='2.2'/%3E%3C/g%3E%3C/svg%3E");

  /* ═══════════ LEGACY ALIASES — keeps the existing 2,889 lines alive.
     Delete this block only in step 12 of the implementation sequence. ═══ */
  --navy:var(--paper);            --navy-light:var(--paper-2);
  --navy-lighter:var(--paper-4);  --surface-card:var(--paper);
  --white:var(--ink-1);           --gray:var(--ink-2);
  --gray-light:var(--ink-1);      --text-muted:var(--ink-3);
  --primary-hover:var(--primary-press);
  --primary-bright:var(--primary-lit);
  --gold:var(--primary);          --gold-light:var(--primary-press);
  --gold-dim:var(--primary-tint);
  --accent:var(--prac-3);         --cyan:var(--prac-3);
  --cyan-dim:var(--prac-3-tint);  --green:var(--live);
  --green-dim:var(--live-tint);   --accent-purple:var(--primary-press);
  --accent-purple-dim:var(--primary-tint);
  --finance:var(--prac-3);        --ventures:var(--prac-4);
  --security:var(--prac-2);
  --success:var(--live);          --warning:var(--build);  --error:var(--prac-2);
  --surface-dark:var(--ink-band); --surface-dark-alt:var(--ink-band-2);
  --text-on-dark:var(--on-ink-1); --text-on-dark-muted:var(--on-ink-2);
  --accent-on-dark:var(--primary-on-ink);
  --border-subtle:var(--rule-2);
  --glass-bg:var(--paper);        --glass-border:var(--rule-2);
  --gradient-primary:linear-gradient(180deg,var(--primary),var(--primary-press));
  --transition-fast:var(--t) var(--ease);
  --transition-smooth:var(--t-slow) var(--ease-quart);
  --shadow-card:var(--e-1);       --shadow-glow-gold:var(--e-2);

  /* ═══════════ TYPE ═══════════
     Mono is the system stack: SF Mono on Apple, Roboto Mono on Android,
     Consolas on Windows. 0 KB. Swap in a self-hosted IBM Plex Mono
     (SIL OFL, ~17 KB subset) here if the register ever needs to be
     identical across platforms. */
  --font-sans:"TT Commons Classic",-apple-system,BlinkMacSystemFont,"Segoe UI",Roboto,sans-serif;
  --font-mono:ui-monospace,SFMono-Regular,"SF Mono","Roboto Mono",Menlo,Consolas,monospace;

  --t-mono-xs: .6875rem;
  --t-mono:    .75rem;
  --t-cap:     .8125rem;
  --t-sm:      .9375rem;
  --t-body:    clamp(1rem,      .966rem + .15vw, 1.0625rem);
  --t-lede:    clamp(1.0625rem, .995rem + .30vw, 1.3125rem);
  --t-h4:      clamp(1.0625rem, 1.01rem + .24vw, 1.25rem);
  --t-h3:      clamp(1.25rem,   1.14rem + .49vw, 1.5625rem);
  --t-h2:      clamp(1.6875rem, 1.39rem + 1.32vw, 2.625rem);
  --t-h1:      clamp(2.125rem,  1.55rem + 2.55vw, 4rem);
  --t-figure:  clamp(2.25rem,   1.72rem + 2.35vw, 3.75rem);
}

html {
    scroll-behavior: smooth;
}

html { font-size: 16px; -webkit-text-size-adjust: 100%; hanging-punctuation: first last; }
body {
    font-family: var(--font-sans);
    background-color: var(--paper);
    color: var(--ink-2);
    line-height: 1.65;
    font-size: var(--t-body);
    letter-spacing: -.006em;
    overflow-x: hidden;
    -webkit-font-smoothing: antialiased;
    -moz-osx-font-smoothing: grayscale;
}

/* Subtle noise texture overlay */
/* Removed: fixed full-viewport feTurbulence noise overlay at z-index 9999.
   It painted over the entire page on every frame for 1.2% opacity. */

/* Typography */
h1, h2, h3, h4, h5, h6 { margin: 0 0 var(--s-4); color: var(--ink-1); }
h1, h2, .section-title, .stat-number { font-family: var(--font-sans); }

h1 { font-size: var(--t-h1); line-height: 1.05; letter-spacing: -.030em; }
h2 { font-size: var(--t-h2); line-height: 1.12; letter-spacing: -.024em; }
h3 { font-size: var(--t-h3); line-height: 1.28; letter-spacing: -.016em; }
h4 { font-size: var(--t-h4); line-height: 1.40; letter-spacing: -.010em; }

h1, h2, h3, .lede { text-wrap: balance; }
p, li { text-wrap: pretty; }

p {
    margin-bottom: 1rem;
    color: var(--ink-2);
    max-inline-size: var(--measure);
}

.lede { font-size: var(--t-lede); line-height: 1.5; letter-spacing: -.012em;
        color: var(--ink-2); max-inline-size: 48ch; }
.measure-s { max-inline-size: var(--measure-s); }
.cap { font-size: var(--t-cap); line-height: 1.5; color: var(--ink-3); }

/* ── THE MONO REGISTER — eyebrows, labels, timecodes, units, status ── */
.mono, .eyebrow, .tc, .label, .metric__l, .status, .prac__i {
    font-family: var(--font-mono);
    font-size: var(--t-mono);
    letter-spacing: .12em;
    text-transform: uppercase;
    color: var(--ink-3);
    font-weight: 400;
}
.tc { text-transform: none; letter-spacing: .06em;
      font-variant-numeric: lining-nums tabular-nums; }

/* every number on the site sits on the same rhythm */
.tnum, .metric__v, .receipt__v, .spec__v, .run__n, td.num {
    font-variant-numeric: lining-nums tabular-nums slashed-zero;
    font-feature-settings: "tnum" 1, "lnum" 1, "zero" 1;
}

/* emphasis without bold — three approved forms, no others */
.hl      { color: var(--primary); }
.hl-rule { color: var(--ink-1); box-shadow: inset 0 -.09em 0 var(--primary-tint-2); }

/* cap-height lands on the grid where supported. Progressive, zero risk. */
@supports (text-box: trim-both cap alphabetic) {
    h1, h2, h3, h4, .lede, .metric__v, .receipt__v { text-box: trim-both cap alphabetic; }
}

a {
    color: var(--gold);
    text-decoration: none;
    transition: color var(--transition-fast), text-shadow var(--transition-fast);
}

a:hover {
    color: var(--gold-light);
    text-shadow: 0 0 12px rgba(11, 95, 176, 0.2);
}


/* ───────────────── DEVICE LAYER — the graphics language ───────────────── */
/* ══════════════════════════════════════════════════════════════════
   THE DEVICE LAYER — the graphics language.
   One geometry (the quadrant mark: one centre, four nodes, lifted
   from the site's own favicon) reused at five scales. It draws the
   argument the site makes: one principal, four practices.
   ══════════════════════════════════════════════════════════════════ */
.qm{
  inline-size:var(--qm,32px); block-size:var(--qm,32px); flex:none; display:block;
  fill:none; stroke:var(--rule-4); stroke-width:1.2; stroke-linecap:round;
}
.qm__core{ fill:var(--ink-4); stroke:none; }
.qm__n{ fill:var(--paper); }
/* the ONE place a practice colour touches the mark */
.qm[data-node="1"] .n1,.qm[data-node="2"] .n2,
.qm[data-node="3"] .n3,.qm[data-node="4"] .n4{
  fill:var(--practice,var(--primary)); stroke:var(--practice,var(--primary));
}
.qm[data-node] .qm__core{ fill:var(--practice,var(--primary)); }
.qm[data-node] .qm__ring{ stroke:var(--rule-4); }

/* on the ink band */
[data-surface="ink"] .qm{ stroke:var(--rule-ink-2); }
[data-surface="ink"] .qm__n{ fill:var(--ink-band); }
[data-surface="ink"] .qm__core{ fill:var(--primary-on-ink); }

.field{
  position:absolute; inset:0; z-index:0; pointer-events:none;
  background-image:var(--field-paper);
  background-repeat:repeat;
  background-size:var(--field-size,72px) var(--field-size,72px);
  background-position:center top;
  -webkit-mask-image:radial-gradient(ellipse 76% 64% at 24% 30%,
        rgba(0,0,0,.72) 4%, rgba(0,0,0,.30) 46%, transparent 74%);
          mask-image:radial-gradient(ellipse 76% 64% at 24% 30%,
        rgba(0,0,0,.72) 4%, rgba(0,0,0,.30) 46%, transparent 74%);
}
/* one static warm-cool light, both stops under 8% */
.field::after{
  content:""; position:absolute; inset:0;
  background:
    radial-gradient(60% 48% at 16% 4%,  rgba(11,95,176,.070) 0%, transparent 62%),
    radial-gradient(48% 42% at 90% 10%, rgba(15,118,110,.038) 0%, transparent 58%);
}
[data-surface="ink"] .field{
  background-image:var(--field-ink);
  -webkit-mask-image:radial-gradient(ellipse 70% 70% at 78% 40%,
        #000 4%, rgba(0,0,0,.38) 46%, transparent 76%);
          mask-image:radial-gradient(ellipse 70% 70% at 78% 40%,
        #000 4%, rgba(0,0,0,.38) 46%, transparent 76%);
}
[data-surface="ink"] .field::after{ display:none; }
@media (max-width:600px){ .field{ --field-size:56px; } }
@media (prefers-reduced-transparency:reduce){ .field{ display:none; } }

.plate{
  position:relative; isolation:isolate;
  background:var(--paper); border-radius:var(--r-3);
  box-shadow:var(--e-1); padding:var(--s-6);
  transition:var(--t) var(--ease);
  transition-property:box-shadow,background-color,transform;
}
.plate::after{
  content:""; position:absolute; inset:0; z-index:1; pointer-events:none;
  border-radius:inherit; border:1px solid var(--rule-3);
  -webkit-mask:radial-gradient(128% 128% at 100% 100%, #000 0%, #0000 54%);
          mask:radial-gradient(128% 128% at 100% 100%, #000 0%, #0000 54%);
}
.plate--sunk{ background:var(--paper-3); box-shadow:var(--e-0); }
.plate--flat{ box-shadow:var(--e-0); }
[data-surface="ink"] .plate{
  background:var(--ink-band-2); box-shadow:inset 0 0 0 1px var(--rule-ink-2);
}
[data-surface="ink"] .plate::after{ display:none; }

/* Hover guarded so a touch device NEVER gets a stuck hover state */
@media (any-hover:hover){
  a.plate:hover,button.plate:hover{ box-shadow:var(--e-2); transform:translateY(-2px); }
}
a.plate:active,button.plate:active{ transform:scale(.985); }

/* GLOBAL focus — solid ring, 6.41:1, follows border-radius correctly */
:where(a,button,input,select,textarea,summary,[tabindex]):focus-visible{
  outline:none; box-shadow:var(--e-focus); border-radius:var(--r-2);
}
[data-surface="ink"] :where(a,button,summary):focus-visible{ box-shadow:var(--e-focus-ink); }

.chcard{
  display:block; text-decoration:none; color:inherit;
  border-radius:var(--r-3); background:var(--paper);
  box-shadow:var(--e-2); overflow:hidden;
  transition:box-shadow var(--t) var(--ease), transform var(--t) var(--ease);
}
.chcard__stage{
  position:relative; display:block; aspect-ratio:16/9; overflow:hidden;
  background:linear-gradient(158deg,#16233a 0%,var(--ink-band) 74%);
  display:grid; place-items:center; isolation:isolate;
}
/* POSTER SLOT — the single line that swaps in a real still, see §5.5 */
.chcard__field{
  position:absolute; inset:0;
  background-image:var(--poster,var(--field-ink));
  background-size:var(--poster-size,64px);
  background-position:center;
  -webkit-mask-image:radial-gradient(70% 70% at 50% 46%,#000 10%,transparent 78%);
          mask-image:radial-gradient(70% 70% at 50% 46%,#000 10%,transparent 78%);
}
.chcard__watermark{ position:absolute; --qm:118px; opacity:.5;
                    stroke:var(--rule-ink-2); }
.chcard__watermark .qm__core,.chcard__watermark .qm__n{ fill:var(--primary-on-ink);
                    opacity:.55; stroke:none; }
.chcard__play{
  position:relative; z-index:2; display:grid; place-items:center;
  inline-size:60px; block-size:60px; border-radius:var(--r-pill);
  background:var(--paper); color:var(--ink-1); padding-inline-start:3px;
  box-shadow:0 6px 20px rgba(5,12,24,.34);
  transition:transform var(--t) var(--ease);
}
.chcard__dur{
  position:absolute; z-index:2; inset-block-end:10px; inset-inline-end:10px;
  padding:3px 7px; border-radius:var(--r-1);
  color:var(--on-ink-1); background:rgba(5,12,24,.66);
  box-shadow:inset 0 0 0 1px var(--rule-ink-2);
  letter-spacing:.06em; text-transform:none;
}
.chcard__meta{ display:grid; gap:6px; padding:var(--s-4) var(--s-5) var(--s-5); }
.chcard__title{ color:var(--ink-1); font-size:var(--t-h4); line-height:1.35; }
@media (any-hover:hover){
  .chcard:hover{ box-shadow:var(--e-3); transform:translateY(-2px); }
  .chcard:hover .chcard__play{ transform:scale(1.06); }
}

.pplate{
  --pp:min(300px,64vw);
  position:relative; inline-size:var(--pp); aspect-ratio:4/5; margin:0;
  border-radius:var(--r-3); overflow:hidden; isolation:isolate;
  background:
    var(--portrait,none) center 22%/cover no-repeat,   /* ← the photo slot */
    linear-gradient(158deg,var(--ink-band-2) 0%,var(--ink-band) 100%);
  box-shadow:inset 0 0 0 1px var(--rule-ink-2);
  display:grid; place-items:center;
}
.pplate__field{
  position:absolute; inset:0; z-index:0;
  background-image:var(--field-ink); background-size:52px;
  -webkit-mask-image:radial-gradient(66% 60% at 50% 42%,#000 8%,transparent 76%);
          mask-image:radial-gradient(66% 60% at 50% 42%,#000 8%,transparent 76%);
}
.pplate__mono{
  position:relative; z-index:1;
  font-family:var(--font-mono); font-size:calc(var(--pp)*.15);
  letter-spacing:.10em; color:var(--on-ink-1); opacity:.92;
}
/* corner registration mark — hairline, 14px, top-inline-start */
.pplate::before{
  content:""; position:absolute; z-index:2; inset-block-start:12px;
  inset-inline-start:12px; inline-size:16px; block-size:16px;
  border-inline-start:1px solid var(--rule-ink-2);
  border-block-start:1px solid var(--rule-ink-2);
}
.pplate[style*="--portrait"] .pplate__field,
.pplate[style*="--portrait"] .pplate__mono{ display:none; }

.run{ --step:.38s; --lead:.35s;
      border-radius:var(--r-3); overflow:hidden; box-shadow:var(--e-1);
      background:var(--paper); }
.run__bar{ display:flex; align-items:center; gap:var(--s-2);
  block-size:38px; padding-inline:var(--s-4);
  border-block-end:1px solid var(--rule-2);
  background:var(--paper-2); color:var(--ink-3);
  letter-spacing:.05em; text-transform:none; white-space:nowrap; }
.run__bar .sep{ color:var(--ink-4); }
.run__t{ margin-inline-start:auto; }
.led{ inline-size:6px; block-size:6px; border-radius:var(--r-pill); flex:none;
      background:var(--live); box-shadow:0 0 0 3px var(--live-tint); }

.run__row{ display:grid; grid-template-columns:20px 1fr auto;
  align-items:center; gap:var(--s-3);
  padding:11px var(--s-4); border-block-end:1px solid var(--rule-1);
  font-size:var(--t-cap); color:var(--ink-2); }
.run__n{ font-family:var(--font-mono); font-size:11px; color:var(--ink-4); }
.run__task{ overflow:hidden; text-overflow:ellipsis; white-space:nowrap; }
.run__task em{ font-style:normal; color:var(--ink-3);
  font-family:var(--font-mono); font-size:11px; margin-inline-start:var(--s-2); }

.run__state{ position:relative; display:grid; min-inline-size:74px; justify-items:end; }
.run__state > span{ grid-area:1/1; display:inline-flex; align-items:center;
  padding:3px 7px; border-radius:var(--r-1);
  font-family:var(--font-mono); font-size:10.5px; letter-spacing:.08em;
  text-transform:uppercase; }
.run__q{ color:var(--build); background:var(--build-tint); }
.run__d{ color:var(--live);  background:var(--live-tint); opacity:0; }

/* fires only when .is-on lands (single shared IntersectionObserver, §10) */
@media (prefers-reduced-motion:no-preference){
  .run.is-on .run__q{ animation:qOut .22s var(--ease) both;
    animation-delay:calc(var(--lead) + var(--i)*var(--step)); }
  .run.is-on .run__d{ animation:dIn .30s var(--ease-quart) both;
    animation-delay:calc(var(--lead) + var(--i)*var(--step) + .06s); }
  .run.is-on .run__row{ animation:rowLit .30s var(--ease) both;
    animation-delay:calc(var(--lead) + var(--i)*var(--step)); }
  .run.is-on .run__fill{ animation:fill 2.4s var(--ease-quart) both; }
  .run.is-on .run__saved{ animation:dIn .4s var(--ease-quart) both;
    animation-delay:2.4s; }
}
@keyframes qOut  { to{ opacity:0; transform:translateY(-4px) } }
@keyframes dIn   { from{ opacity:0; transform:translateY(5px) } to{ opacity:1; transform:none } }
@keyframes rowLit{ 0%{background:transparent} 40%{background:var(--primary-tint)} 100%{background:transparent} }
@keyframes fill  { from{ transform:scaleX(0) } to{ transform:scaleX(1) } }

.run__foot{ display:flex; align-items:center; gap:var(--s-3);
  padding:var(--s-3) var(--s-4); background:var(--paper-2);
  border-block-start:1px solid var(--rule-2); color:var(--ink-3);
  text-transform:none; letter-spacing:.04em; }
.run__track{ flex:1; block-size:2px; border-radius:2px; overflow:hidden;
             background:var(--paper-4); }
.run__fill{ display:block; block-size:100%; transform-origin:left;
            background:linear-gradient(90deg,var(--primary),var(--primary-lit)); }
.run__saved{ color:var(--ink-1); }
/* reduced motion / no-JS: final state, no animation */
@media (prefers-reduced-motion:reduce){
  .run__q{ opacity:0 } .run__d{ opacity:1 }
}
.no-js .run__q{ opacity:0 } .no-js .run__d{ opacity:1 }

.pmark{ display:flex; align-items:center; gap:var(--s-4);
  margin:var(--s-6) 0 0; padding-block-start:var(--s-4);
  border-block-start:1px solid var(--rule-2);
  font-size:var(--t-cap); color:var(--ink-3); }
.pmark__glyph{ position:relative; display:grid; place-items:center;
  padding:0 4px 10px; flex:none; }
.pmark__glyph b{ font-family:var(--font-mono); font-weight:400;
  font-size:var(--t-mono); letter-spacing:.18em; color:var(--ink-1); }
.pmark__glyph i{ position:absolute; inset-block-end:0; inset-inline:0;
  block-size:9px;
  border-block-end:1.6px solid var(--primary);
  border-inline-start:1.6px solid var(--primary);
  border-end-start-radius:12px 9px; transform:rotate(-6deg); }
.pmark__txt strong{ color:var(--ink-1); }

.aside-grid{ display:grid; gap:var(--s-12); }
@media (min-width:1100px){
  .aside-grid{ grid-template-columns:minmax(0,1fr) 19rem; gap:var(--s-16);
               align-items:start; }
}
.note{
  position:relative; padding:var(--s-5);
  background:var(--note-paper); color:var(--note-ink);
  border-radius:var(--r-2); border-start-end-radius:0;   /* one squared corner */
  box-shadow:0 0 0 1px var(--note-rule);
  max-inline-size:34ch;
}
.note p{ margin:0; font-size:var(--t-sm); line-height:1.6; max-inline-size:none; }
.note__by{ display:block; margin-block-start:var(--s-3);
  font-size:11px; letter-spacing:.14em; color:#96762c; text-transform:none; }
.note__arrow{ position:absolute; inline-size:52px; block-size:auto;
  inset-block-start:-40px; inset-inline-start:-26px;
  rotate:-8deg; color:var(--note-rule); pointer-events:none; }
.note__arrow path{ fill:none; stroke:currentColor; stroke-width:2.2;
  stroke-linecap:round; stroke-linejoin:round; }
@media (max-width:1099px){
  .note{ max-inline-size:none; }
  .note__arrow{ display:none; }
}
/* the one note on the ink band */
[data-surface="ink"] .note{
  background:var(--note-paper-ink); color:var(--on-ink-1);
  box-shadow:0 0 0 1px var(--rule-ink-2);
}
[data-surface="ink"] .note__by{ color:var(--on-ink-3); }

.chapter{ margin-block-end:var(--s-24); }
.chapter__mark{ display:flex; align-items:center; gap:.7rem; margin:0 0 var(--s-5);
  font-family:var(--font-mono); font-size:var(--t-mono); letter-spacing:.12em;
  text-transform:uppercase; color:var(--ink-3); }
.chapter__mark .tc{ color:var(--primary); background:var(--primary-tint);
  padding:2px 6px; border-radius:var(--r-1);
  box-shadow:inset 0 0 0 1px rgba(11,95,176,.14); }
.chapter__dash{ inline-size:28px; block-size:1px; background:var(--rule-4); flex:none; }

.chapter__rule{ position:relative; block-size:1px; background:var(--rule-3);
                margin-block-end:var(--s-6); }
.chapter__rule::before{                       /* 24px of the ONE accent */
  content:""; position:absolute; inset-inline-start:0; inset-block-start:-1px;
  inline-size:24px; block-size:3px; background:var(--primary);
  border-radius:var(--r-1); }
.chapter__no{ position:absolute; inset-inline-end:0; inset-block-start:-.58em;
  background:var(--paper); padding-inline-start:var(--s-3); color:var(--ink-3); }

.chapter__split{ display:grid; gap:var(--s-4); }
@media (min-width:900px){
  .chapter__split{ grid-template-columns:minmax(0,1.12fr) minmax(0,.88fr);
                   gap:var(--s-12); align-items:start; }
  .chapter__desc{ padding-block-start:.55em; }
}
.chapter__desc{ color:var(--ink-3); font-size:var(--t-lede); line-height:1.5; margin:0; }
.chapter__title,h2{ margin:0; }

/* surface-aware */
.band--2 .chapter__no{ background:var(--paper-2); }
.band--3 .chapter__no{ background:var(--paper-3); }
[data-surface="ink"] .chapter__rule{ background:var(--rule-ink-2); }
[data-surface="ink"] .chapter__rule::before{ background:var(--primary-on-ink); }
[data-surface="ink"] .chapter__no{ background:var(--ink-band); color:var(--on-ink-3); }
[data-surface="ink"] .chapter__mark .tc{ color:var(--primary-on-ink);
  background:rgba(93,189,242,.12); box-shadow:inset 0 0 0 1px rgba(93,189,242,.22); }
[data-surface="ink"] h2{ color:var(--on-ink-1); }
[data-surface="ink"] .chapter__desc{ color:var(--on-ink-2); }

/* THE SEAM — letterpress double rule with the mark centred, at every surface change */
.seam{ position:relative; block-size:0; }
.seam::before{ content:""; display:block; block-size:1px; background:var(--rule-2); }
.seam::after { content:""; display:block; block-size:1px; background:var(--paper); }
.seam .qm{ position:absolute; --qm:16px; inset-block-start:-8px;
  inset-inline-start:50%; transform:translateX(-50%);
  background:var(--paper); box-shadow:0 0 0 6px var(--paper); }

/* RECEIPT — proof as a story, no card, no icon-in-a-circle, no modal */
.receipts{ display:grid; gap:var(--s-16); }
@media (min-width:900px){ .receipts{ grid-template-columns:repeat(3,1fr); gap:var(--s-12); } }
.receipt{ position:relative; padding-block-start:var(--s-5); }
.receipt::before{ content:""; position:absolute; inset-block-start:0;
  inset-inline-start:0; inline-size:1px; block-size:26px; background:var(--rule-4); }
.receipt:first-child::before{ inline-size:2px; background:var(--primary); }
.receipt__meta{ margin:0 0 var(--s-5); }
.receipt__v{ margin:0; color:var(--ink-1); font-size:var(--t-figure);
  line-height:.96; letter-spacing:-.032em; }
.receipt__u{ display:block; margin-block-start:.45rem; color:var(--prac-3);
  font-family:var(--font-mono); font-size:var(--t-mono); letter-spacing:.10em;
  text-transform:uppercase; }
.receipt__claim{ margin:var(--s-4) 0 var(--s-5); font-size:var(--t-h4);
  color:var(--ink-2); letter-spacing:-.014em; max-inline-size:22ch; }
.receipt__story{ margin:0; padding-block-start:var(--s-5);
  border-block-start:1px solid var(--rule-2); }
.receipt__story dt{ font-family:var(--font-mono); font-size:10.5px;
  letter-spacing:.12em; text-transform:uppercase; color:var(--ink-3);
  margin-block-start:var(--s-4); }
.receipt__story dt:first-child{ margin-block-start:0; }
.receipt__story dd{ margin:6px 0 0; font-size:var(--t-sm);
  color:var(--ink-2); line-height:1.6; }

/* METRIC PLINTH — full hairline + a short accent step. NO count-up, ever. */
.metrics{ display:grid; grid-template-columns:repeat(2,1fr); gap:var(--s-8) var(--s-6); }
@media (min-width:820px){ .metrics{ grid-template-columns:repeat(4,1fr); gap:0; } }
.metric{ position:relative; padding:var(--s-5) var(--s-5) var(--s-4) 0; }
.metric::before{ content:""; position:absolute; inset-block-start:0; inset-inline:0;
  block-size:1px; background:var(--rule-3); }
.metric::after{ content:""; position:absolute; inset-block-start:0;
  inset-inline-start:0; inline-size:26px; block-size:3px; background:var(--primary); }
.metric__v{ display:block; font-size:var(--t-h2); line-height:1;
  letter-spacing:-.024em; color:var(--ink-1); }
.metric__l{ display:block; margin-block-start:.6rem; }
[data-surface="ink"] .metric::before{ background:var(--rule-ink); }
[data-surface="ink"] .metric::after{ background:var(--primary-on-ink); }
[data-surface="ink"] .metric__v{ color:var(--on-ink-1); }
[data-surface="ink"] .metric__l{ color:var(--on-ink-2); }

.btn{
  display:inline-flex; align-items:center; justify-content:center; gap:.55rem;
  min-block-size:52px; padding-inline:1.4rem;
  border:0; border-radius:var(--r-2); cursor:pointer; text-decoration:none;
  font-family:var(--font-sans); font-size:1rem; letter-spacing:-.008em;
  transition:var(--t) var(--ease);
  transition-property:background-color,color,box-shadow,transform;
}
.btn--primary{ background:var(--primary); color:#fff;
  box-shadow:inset 0 1px 0 rgba(255,255,255,.16), 0 1px 2px rgba(9,77,142,.28); }
.btn--quiet{ background:var(--paper); color:var(--ink-1); box-shadow:var(--e-1); }
.btn--block{ inline-size:100%; }
@media (any-hover:hover){
  .btn--primary:hover{ background:var(--primary-press); }
  .btn--quiet:hover{ background:var(--paper-2); box-shadow:var(--e-2); }
}
.btn:active{ transform:scale(.975); }
    

/* ───────────────── NAVIGATION + ordering fixes ───────────────── */
/* ═══════════ NAVIGATION — click-toggled, touch + keyboard safe ═══════════ */
.nav{ position:fixed; inset-block-start:0; inset-inline:0; z-index:80;
  background:var(--paper);                       /* SOLID. No backdrop-filter. */
  box-shadow:inset 0 -1px 0 transparent;
  transition:box-shadow var(--t-slow) var(--ease); }
.nav[data-scrolled]{ box-shadow:inset 0 -1px 0 var(--rule-3); }
.nav__in{ display:flex; align-items:center; gap:var(--s-6); block-size:var(--nav-h); }
.nav__logo{ display:flex; align-items:center; gap:.55rem; text-decoration:none;
  color:var(--ink-1); font-size:1.0625rem; letter-spacing:-.018em;
  margin-inline-end:auto; }
.nav__logo .qm{ stroke:var(--primary); }
.nav__logo .qm__core,.nav__logo .qm__n{ fill:var(--primary); stroke:none; }

.nav__links{ display:none; gap:var(--s-6); list-style:none; margin:0; padding:0; }
@media (min-width:1000px){ .nav__links{ display:flex; align-items:center; } }
.nav__links a,.nav__btn{
  position:relative; display:inline-flex; align-items:center; gap:.3rem;
  padding-block:.4rem; border:0; background:none; cursor:pointer;
  font-family:var(--font-sans); font-size:var(--t-sm); color:var(--ink-2);
  text-decoration:none; letter-spacing:-.008em;
  transition:color var(--t) var(--ease); }
.nav__links a::after,.nav__btn::after{
  content:""; position:absolute; inset-inline:0; inset-block-end:0; block-size:1.5px;
  background:var(--primary); transform:scaleX(0); transform-origin:left;
  transition:transform var(--t) var(--ease); }
@media (any-hover:hover){
  .nav__links a:hover,.nav__btn:hover{ color:var(--ink-1); }
  .nav__links a:hover::after,.nav__btn:hover::after{ transform:scaleX(1); }
}
.nav__links a[aria-current="true"]{ color:var(--primary); }
.nav__links a[aria-current="true"]::after{ transform:scaleX(1); }
.nav__btn[aria-expanded="true"]{ color:var(--primary); }
.nav__btn[aria-expanded="true"]::after{ transform:scaleX(1); }
.nav__btn[aria-expanded="true"] svg{ rotate:180deg; }
.nav__btn svg{ transition:rotate var(--t) var(--ease); }

.nav__cta{ display:none; min-block-size:40px; padding-inline:1rem; font-size:var(--t-sm); }
@media (min-width:1000px){ .nav__cta{ display:inline-flex; } .nav__burger{ display:none; } }

.nav__panel{ display:none; background:var(--paper);
  box-shadow:inset 0 -1px 0 var(--rule-3), 0 12px 24px -18px rgba(15,23,42,.20); }
@media (min-width:1000px){ .nav__panel:not([hidden]){ display:block; } }
.nav__panel-grid{ display:grid; grid-template-columns:repeat(4,1fr);
  gap:var(--s-4); padding-block:var(--s-6); }
.nav__panel-grid a{ display:grid; gap:4px; padding:var(--s-4);
  border-radius:var(--r-2); text-decoration:none; color:var(--ink-2);
  box-shadow:inset 0 0 0 1px var(--rule-2);
  transition:background-color var(--t) var(--ease), box-shadow var(--t) var(--ease); }
.nav__panel-grid b{ font-weight:400; color:var(--ink-1); font-size:var(--t-sm); }
.nav__panel-grid span{ font-size:var(--t-cap); color:var(--ink-3); }
@media (any-hover:hover){
  .nav__panel-grid a:hover{ background:var(--paper-2);
    box-shadow:inset 0 0 0 1px var(--rule-3); }
}

.nav__burger{ display:grid; gap:5px; place-content:center;
  inline-size:44px; block-size:44px; margin-inline-end:-8px;
  background:none; border:0; cursor:pointer; }
.nav__burger span{ display:block; inline-size:20px; block-size:1.5px;
  border-radius:1px; background:var(--ink-1);
  transition:transform var(--t) var(--ease); }
.nav__burger[aria-expanded="true"] span:first-child{ transform:translateY(3.25px) rotate(45deg); }
.nav__burger[aria-expanded="true"] span:last-child { transform:translateY(-3.25px) rotate(-45deg); }

.sheet{ position:fixed; inset:var(--nav-h) 0 0; z-index:75;
  background:var(--paper); overflow-y:auto; overscroll-behavior:contain;
  padding:var(--s-4) var(--shell-pad) max(var(--s-8),env(safe-area-inset-bottom));
  display:grid; align-content:start; gap:var(--s-5);
  opacity:0; transform:translateY(-8px);
  transition:opacity var(--t-slow) var(--ease-quart),
             transform var(--t-slow) var(--ease-quart); }
.sheet[hidden]{ display:none; }
.sheet.is-open{ opacity:1; transform:none; }
@media (min-width:1000px){ .sheet{ display:none !important; } }

.sheet__chapters{ list-style:none; margin:0; padding:0; }
.sheet__chapters a{ display:flex; align-items:center; gap:var(--s-4);
  min-block-size:58px; text-decoration:none; color:var(--ink-1);
  font-size:1.1875rem; letter-spacing:-.018em;
  border-block-end:1px solid var(--rule-1); }
.sheet__chapters .tc{ inline-size:3.2rem; flex:none; color:var(--ink-3);
  font-size:11px; }
.sheet__lbl{ margin:var(--s-2) 0 0; }
.sheet__prac{ list-style:none; margin:0; padding:0; }
.sheet__prac a{ display:flex; align-items:center; gap:var(--s-3);
  min-block-size:52px; text-decoration:none; color:var(--ink-2);
  font-size:var(--t-body); border-block-end:1px solid var(--rule-1); }
.sheet__prac b{ font-weight:400; }
.sheet__foot{ margin-block-start:var(--s-2); }
.sheet__links{ display:flex; gap:var(--s-5); justify-content:center;
  margin:var(--s-4) 0 0; }
.sheet__links a{ font-family:var(--font-mono); font-size:var(--t-mono);
  letter-spacing:.12em; text-transform:uppercase; color:var(--ink-3);
  text-decoration:none; }
.sheet a:active{ background:var(--paper-3); }
    
/* ── Ordering fixes ────────────────────────────────────────────────
   The spec declared `@media (min-width:1000px){ .nav__burger{display:none} }`
   BEFORE the `.nav__burger{ display:grid }` base rule, so the base rule
   won at every width and the burger showed on desktop. Same specificity,
   later wins — so the desktop override has to come last. */
@media (min-width: 1000px) {
    .nav__burger { display: none; }
}
    

/* ───────────────── CONTACT FORM ───────────────── */
/* ══════════ CONTACT FORM — light fields, 16px, thumb-sized ══════════ */
.cform{ display:grid; gap:var(--s-4); padding:var(--s-5); }
.cform__row{ display:grid; gap:6px; }
.cform label{ font-family:var(--font-mono); font-size:var(--t-mono);
  letter-spacing:.12em; text-transform:uppercase; color:var(--ink-3); }
.cform input,.cform select,.cform textarea{
  inline-size:100%; min-block-size:52px; padding:12px 14px;
  font-family:var(--font-sans);
  font-size:16px;               /* MANDATORY — anything smaller zooms iOS */
  line-height:1.4; color:var(--ink-1);
  background:var(--paper);      /* light, never a dark translucent field */
  border:0; border-radius:var(--r-2);
  box-shadow:inset 0 0 0 1px var(--rule-3);
  -webkit-appearance:none; appearance:none;
  transition:box-shadow var(--t) var(--ease);
}
.cform textarea{ min-block-size:100px; resize:vertical; }
.cform :is(input,select,textarea)::placeholder{ color:var(--ink-4); }
.cform :is(input,select,textarea):focus{
  outline:none; box-shadow:inset 0 0 0 1px var(--primary), var(--e-focus); }
.cform__more{ margin-block:calc(var(--s-2) * -1); }
.cform__more summary{ min-block-size:44px; display:flex; align-items:center;
  cursor:pointer; list-style:none;
  font-family:var(--font-mono); font-size:var(--t-mono);
  letter-spacing:.12em; text-transform:uppercase; color:var(--primary); }
.cform__more summary::-webkit-details-marker{ display:none; }
.cform__more[open] summary{ margin-block-end:var(--s-3); }
.cform__more > .cform__row + .cform__row{ margin-block-start:var(--s-4); }
.cform__status{ margin:0; text-transform:none; letter-spacing:0;
  font-size:var(--t-cap); color:var(--ink-3); }
.cform__status:empty{ display:none; }
    

/* ───────────────── REDUCED MOTION ───────────────── */
/* ══════════ REDUCED MOTION ══════════ */
@media (prefers-reduced-motion: reduce) {
    *, *::before, *::after {
        animation-duration: .01ms !important;
        animation-iteration-count: 1 !important;
        transition-duration: .01ms !important;
        scroll-behavior: auto !important;
    }
    .run__q { opacity: 0 !important; }
    .run__d { opacity: 1 !important; }
    .run__fill { transform: scaleX(1) !important; }
}
@media (prefers-reduced-transparency: reduce) { .field { display: none; } }

/* ───────────────── wrappers the shared nav needs ───────────────── */
.nav__qm{ display:inline-grid; place-items:center;
  inline-size:var(--qm,26px); block-size:var(--qm,26px); flex:none; }
.nav__qm .qm{ inline-size:100%; block-size:100%; }


/* ══════════════════════════════════════════════════════════════════════════
   COMPACTNESS + FRONTIER LAYER
   ══════════════════════════════════════════════════════════════════════════
   Density as a premium signal. 128px chapter gaps only read as generous when
   the chapter opens with display type; --t-h2 tops out at 42px, so that much
   air read as empty rather than considered.

   Everything below degrades to today's rendering when unsupported. The static
   page is the finished page; none of this is load-bearing.
   ══════════════════════════════════════════════════════════════════════════ */

/* Chapter headers were paying --s-24 twice over. */
.chapter{ margin-block-end: var(--s-12); }

/* Retune the legacy sections every page still uses. One place, 59 pages. */
section{ padding-block: var(--s-12); }   /* 32→48, was a hard 48 */
.section-header{ margin-bottom: var(--s-8); }
.section-title{ margin-bottom: var(--s-2); }
.trust-bar{ padding: var(--s-5) 0; }
.trust-label{ margin-bottom: var(--s-3); }
.newsletter-card{ padding: var(--s-6); }
footer{ padding-block: var(--s-12); }
.blog-view-all{ margin-top: var(--s-5); }

/* Android forced-dark otherwise recolours form fields and scrollbars on
   exactly the device this traffic arrives on. */
:root{ color-scheme: light; }

/* ── Skip layout+paint for off-screen sections. The single biggest perf win
      available to a long static page. `auto` intrinsic size remembers the real
      height after first render, so there is no scrollbar jump. NEVER on .hero
      (it holds the LCP element). ── */
/* MUST stay qualified to real sections. Unqualified, `.insights` also matched
   the `class="category insights"` chip on every blog card and `.contact` matched
   .contact-item/.contact-info/.contact-form — handing each a 600px intrinsic
   box. Chrome collapsed them once rendered; Safari left the gap, which blew a
   full-height hole through the blog cards. */
section.case-studies, section.businesses, section#insights,
section.newsletter-section, section.contact, body > footer{
  content-visibility: auto;
  contain-intrinsic-size: auto 600px;
}

/* ── Optical centring inside boxed UI. TT Commons' line gap otherwise leaves
      52px targets a pixel or two high. This is much of why a page reads as
      "machined". ── */
@supports (text-box: trim-both cap alphabetic){
  .btn, .chip, .prac__mark, .ribbon, .nav__cta, .pstrip b{
    text-box: trim-both cap alphabetic;
  }
}

/* ── The register becomes aware of itself: the open row holds the light.
      Hover-capable pointers only, so touch never gets stuck dimmed. ── */
@media (any-hover: hover){
  .reg:has(.prac[open]) .prac:not([open]) > summary{
    opacity:.55; transition: opacity var(--t) var(--ease);
  }
  .reg:has(.prac[open]) .prac:not([open]) > summary:hover{ opacity:1; }
}

/* ── Field-level validation ink, no JS. :user-invalid only fires after the
      user has left the field, so it never scolds mid-typing. ── */
.cform__row:has(:user-invalid) :is(input,select,textarea){
  box-shadow: inset 0 0 0 1px var(--prac-2);
}
.cform__row:has(:user-invalid) label{ color: var(--prac-2); }
/* ...and after a blocked submit, so a required field the user never touched
   still shows why the form did not send. pmcValidateForm() adds .is-checked. */
.cform.is-checked .cform__row:has(:invalid) :is(input,select,textarea){
  box-shadow: inset 0 0 0 1px var(--prac-2);
}
.cform.is-checked .cform__row:has(:invalid) label{ color: var(--prac-2); }
.cform textarea{ field-sizing: content; }

/* ── The panel sits inside a 1fr/19rem grid, so its width is NOT the
      viewport's. Media queries were measuring the wrong box. ── */
.reg{ container-type: inline-size; }
@container (max-width: 26rem){
  .prac__panel{ margin-inline-start:0; padding-inline-start: var(--s-4); }
  .strip__row{ flex-wrap: wrap; }
  .strip__k{ inline-size: 100%; }
}

/* ── Derive the practice tints so all four rows carry equal perceptual
      weight forever. Hand-picked hexes above remain the fallback layer. ── */
@supports (color: color-mix(in oklch, red, blue)){
  :root{
    --prac-1-tint: color-mix(in oklch, var(--prac-1) 8%, var(--paper));
    --prac-2-tint: color-mix(in oklch, var(--prac-2) 8%, var(--paper));
    --prac-3-tint: color-mix(in oklch, var(--prac-3) 8%, var(--paper));
    --prac-4-tint: color-mix(in oklch, var(--prac-4) 8%, var(--paper));
  }
}

/* ── The register opens like an instrument instead of snapping. Chromium
      today; everywhere else keeps exactly the current behaviour. ── */
@supports selector(::details-content){
  .prac::details-content{
    block-size: 0; overflow: clip;
    transition: block-size var(--t-slow) var(--ease-quart),
                content-visibility var(--t-slow) allow-discrete;
  }
  .prac[open]::details-content{ block-size: auto; }
}

/* ── One typed angle, one living surface. Without @property a gradient angle
      is a string and cannot interpolate. Used once, on the card we are asking
      a stranger to act on. ── */
@property --sweep{ syntax:"<angle>"; inherits:false; initial-value:0deg; }
.auditcard__stage::before{
  content:""; position:absolute; inset:0; pointer-events:none; z-index:1;
  background: conic-gradient(from var(--sweep,0deg) at 50% 46%,
              transparent 0deg, rgba(93,189,242,.10) 42deg, transparent 84deg);
}
@media (prefers-reduced-motion: no-preference){
  .auditcard__stage::before{ animation: sweep 16s linear infinite; }
  @keyframes sweep{ to{ --sweep: 360deg } }
}
@media (prefers-reduced-transparency: reduce){
  .auditcard__stage::before{ display:none; }
}

/* ── SCROLL-DRIVEN BEHAVIOUR — exactly three, each tied to meaning rather
      than decoration: position in the document, chapter arrival, row
      attention. Compositor-driven (transform only), off the main thread.
      Unsupported engines run nothing at all, which is the correct fallback. ── */
@supports (animation-timeline: scroll()){
  @media (prefers-reduced-motion: no-preference){

    /* the page is a document — give it a position indicator */
    .nav::after{
      content:""; position:absolute; inset-inline:0; inset-block-end:-1px;
      block-size:2px; background:var(--primary);
      transform:scaleX(0); transform-origin:left;
      animation: navFill linear both;
      animation-timeline: scroll(root);
    }
    @keyframes navFill{ to{ transform: scaleX(1) } }

    /* the chapter rule draws itself as the chapter arrives */
    .chapter__rule::before{
      transform-origin:left;
      animation: ruleIn linear both;
      animation-timeline: view();
      animation-range: entry 5% entry 45%;
    }
    @keyframes ruleIn{ from{ transform: scaleX(0) } }

    /* the motif acknowledges where you are */
    .reg__row .qm__core{
      transform-box: fill-box; transform-origin: center;
      animation: corePulse linear both;
      animation-timeline: view();
      animation-range: cover 15% cover 85%;
    }
    @keyframes corePulse{ 0%,100%{ transform:scale(1) } 50%{ transform:scale(1.28) } }
  }
}

/* ── CONTINUITY ACROSS DOCUMENTS.
      A multi-page static site can now have what SPAs ship 200 KB of router to
      fake. The quadrant mark detaches from a register row and becomes the
      header mark of the practice page. Failure mode everywhere else: a normal
      page load. ── */
@view-transition{ navigation: auto; }
::view-transition-old(root), ::view-transition-new(root){ animation-duration: 180ms; }
@media (prefers-reduced-motion: reduce){
  @view-transition{ navigation: none; }
}

/* The one named element that exists on BOTH sides of every navigation, so the
   identity mark is continuous rather than re-drawn. One name = one snapshot. */
.nav__logo .qm{ view-transition-name: pmc-mark; }
.nav__logo span{ view-transition-name: pmc-wordmark; }
::view-transition-group(pmc-mark),
::view-transition-group(pmc-wordmark){ animation-duration: 220ms; }

/* ── THE LEDGER — the register grammar applied to the venture portfolio.
      Rows, hairlines, mono status. Says in ~380px what nine cards said in
      1,350px, and reads as a firm's holdings rather than a market stall. ── */
.ledger{ list-style:none; margin:0; padding:0;
  border-block-start:1px solid var(--rule-3); container-type:inline-size; }
.ledger__row{ border-block-end:1px solid var(--rule-1); }
.ledger__row a{
  display:grid; align-items:center; gap:var(--s-2) var(--s-4);
  grid-template-columns:5.5rem minmax(11rem,auto) 1fr auto;
  grid-template-areas:"st name role arw" "st desc desc arw";
  padding:var(--s-4) var(--s-2);
  text-decoration:none; color:var(--ink-2);
  transition:background-color var(--t) var(--ease), padding-inline-start var(--t) var(--ease);
}
@media (any-hover:hover){
  .ledger__row a:hover{ background:var(--paper-2); padding-inline-start:var(--s-4); }
  .ledger__row a:hover .ledger__arw{ transform:translateX(3px); }
}
.ledger__st{ grid-area:st; justify-self:start; font-size:var(--t-mono-xs);
  padding:3px 8px; border-radius:var(--r-1); letter-spacing:.14em; }
.ledger__st[data-st="live"]{ color:var(--live); background:var(--live-tint); }
.ledger__st[data-st="beta"]{ color:var(--build); background:var(--build-tint); }
.ledger__name{ grid-area:name; color:var(--ink-1); font-size:var(--t-body); letter-spacing:-.012em; }
.ledger__role{ grid-area:role; font-size:var(--t-mono-xs); color:var(--ink-4); }
.ledger__desc{ grid-area:desc; font-size:var(--t-cap); color:var(--ink-3); }
.ledger__arw{ grid-area:arw; color:var(--primary);
  transition:transform var(--t) var(--ease); }
@container (max-width: 34rem){
  .ledger__row a{ grid-template-columns:4.5rem 1fr auto;
    grid-template-areas:"st name arw" "st role arw" "st desc desc"; }
}

/* ══════════ TRUST BAR — legible, centred, no clipping ══════════
   Was: a max-content flex track built for a marquee, with edge fade overlays
   and rgba(0,0,0,.25) text (~2.6:1, well under AA). With the marquee gone the
   track no longer centred, so the first name sat off the left edge under a
   fade. It is a short list — it does not need to scroll, it needs to be read. */
.trust-bar{
  padding-block: var(--s-6);
  border-block: 1px solid var(--rule-2);
  overflow: visible;
}
.trust-label{
  text-align:center; margin-block-end: var(--s-4);
  font-family: var(--font-mono); font-size: var(--t-mono);
  letter-spacing:.18em; text-transform:uppercase; color: var(--ink-3);
}
.trust-marquee{ overflow: visible; }
/* the fades existed only to mask the marquee's wrap point */
.trust-marquee::before, .trust-marquee::after{ content:none; }

.trust-track{
  inline-size:auto; width:auto;
  display:flex; flex-wrap:wrap;
  justify-content:center; align-items:center;
  gap: var(--s-3) var(--s-8);
  padding-inline: var(--shell-pad);
  animation: none;
}
.trust-logo{
  white-space:nowrap;
  font-size: var(--t-sm);
  letter-spacing:.01em;
  color: var(--ink-3);              /* 5.4:1 — readable, still quiet */
  transition: color var(--t) var(--ease);
}
@media (any-hover:hover){ .trust-logo:hover{ color: var(--ink-1); } }
@media (max-width: 560px){
  .trust-track{ gap: var(--s-2) var(--s-5); }
  .trust-logo{ font-size: var(--t-cap); }
}

/* ══════════ SECOND COMPACTNESS PASS ══════════
   Sections are already flush (zero margins) — the space between them was all
   internal padding: 64px band troughs, a 48px strip margin and a 48px chapter
   margin stacking into ~160px of air between the hero and the first heading. */
.band{ padding-block: var(--s-12); }          /* was --s-24 (64px) */
.pstrip{ margin-block-start: var(--s-8); }    /* was --s-12 */
.chapter{ margin-block-end: var(--s-8); }     /* was --s-12 */
.hero{ padding-block-end: var(--s-8); }       /* was --s-12 */
.section-header{ margin-bottom: var(--s-6); }
.trust-bar{ padding-block: var(--s-5); }
.newsletter-section{ padding-block: var(--s-8); }
footer{ padding-block: var(--s-8); }

/* The type layer caps every <p> at --measure (66ch) for readability. That is
   right for body copy and wrong for centred UI labels: the box stays narrow, so
   text-align:center centres text inside a 477px box sitting at the left edge.
   Centred labels opt out of the measure and centre as blocks. */
.trust-label,
.section-subtitle,
.newsletter-card p,
.hero__derisk{ max-inline-size: none; }
.trust-label, .section-subtitle{ margin-inline: auto; }
.section-subtitle{ max-inline-size: 62ch; }

/* Trade licence line. UAE businesses publish this as a legitimacy signal and it
   is verifiable against Dubai Economy — but keep it quiet, it is a footnote and
   not a claim. Personal ID and register numbers are deliberately NOT here. */
.footer-licence{
  margin:.4rem 0 0; max-inline-size:none;
  font-family:var(--font-mono); font-size:11px; line-height:1.7;
  letter-spacing:.04em; color:var(--on-ink-2);
}

/* The run panel is a designed animation, not instrumentation. Label it — a
   technical reader assumes staged telemetry is staged, then wonders what else is. */
.run__note{ margin:var(--s-2) 0 0; font-size:var(--t-mono-xs); letter-spacing:.14em;
  text-transform:uppercase; color:var(--ink-4); }
/* the bridge from practice 01 to the lab-scale venture */
.prac__bridge{ margin:var(--s-4) 0 0; padding-block-start:var(--s-4);
  border-block-start:1px solid var(--rule-1);
  font-size:var(--t-cap); line-height:1.6; color:var(--ink-3); }
.prac__bridge a{ color:var(--primary); }

.principal__links{ display:flex; gap:2px; margin-inline-start:auto; }
.principal__links a{ display:grid; place-items:center; inline-size:40px; block-size:40px;
  border-radius:var(--r-2); color:var(--ink-3);
  transition:color var(--t) var(--ease), background-color var(--t) var(--ease); }
@media (any-hover:hover){ .principal__links a:hover{ color:var(--primary); background:var(--primary-tint); } }

/* ══════════ THE CAPABILITY STACK ══════════
   Four layers of the AI stack as a numbered register — same grammar as the
   practice list, so breadth reads as structure rather than as a menu. */
.stack{ list-style:none; margin:var(--s-5) 0 0; padding:0;
  border-block-start:1px solid var(--rule-2); }
.stack__l{ display:grid; grid-template-columns:2.6rem 1fr; gap:var(--s-3);
  padding-block:var(--s-4); border-block-end:1px solid var(--rule-1); }
.stack__n{ color:var(--ink-4); font-size:var(--t-mono-xs); padding-block-start:.25rem;
  border-inline-start:2px solid var(--practice,var(--primary)); padding-inline-start:.55rem; }
.stack__b{ display:block; font-size:var(--t-sm); line-height:1.6; color:var(--ink-2);
  max-inline-size:62ch; }
.stack__b b{ display:block; color:var(--ink-1); font-weight:400;
  font-size:var(--t-body); letter-spacing:-.012em; margin-block-end:.3rem; }
.stack__b em{ display:block; margin-block-start:.4rem; font-style:normal;
  font-size:var(--t-cap); color:var(--ink-3); }
.stack__b a{ color:var(--primary); }

/* The boundary statement. Saying what you do NOT do is the most credible
   sentence on a capability page — it is the one nobody fakes. */
.stack__limit{ margin:var(--s-5) 0 0; padding:var(--s-4) var(--s-5);
  background:var(--paper-3); border-radius:var(--r-2);
  border-inline-start:2px solid var(--ink-4);
  font-size:var(--t-cap); line-height:1.65; color:var(--ink-2); }
.stack__limit b{ color:var(--ink-1); }
@media (max-width:560px){
  .stack__l{ grid-template-columns:2.1rem 1fr; gap:var(--s-2); }
}

/* ══════════════════════════════════════════════════════════════════════════
   ARTICLE BODY — repair the dark-theme leftovers in the templated posts
   ══════════════════════════════════════════════════════════════════════════
   45 of the 50 posts hardcode `color:#b0bec9` on .article-body p. That was a
   light grey for a dark background; against the white this file now paints it
   measures 1.9:1, well under the 4.5:1 minimum. The body copy of the entire
   blog was effectively invisible.

   Fixed here rather than in 45 files: pmc.css loads after each page's own
   <style>, and these selectors match the originals exactly, so later-wins
   settles it. Newer posts that use var(--gray)/var(--white) already resolve
   correctly through the legacy aliases and are unaffected by this block. */
.article-body p,
.article-body li,
.article-body ul,
.article-body ol,
.article-body td{ color: var(--ink-2); }

.article-body h1,
.article-body h2,
.article-body h3,
.article-body h4,
.article-header h1{ color: var(--ink-1); }

.article-body strong,
.article-body b{ color: var(--ink-1); }

.article-body a{ color: var(--primary); }

.article-body blockquote{
  color: var(--ink-2);
  border-inline-start: 2px solid var(--primary);
  background: var(--paper-2);
}

.article-meta,
.article-body figcaption,
.article-body small{ color: var(--ink-3); }

.article-category{ color: var(--primary); background: var(--primary-tint); }

/* the CTA block at the foot of each post */
.article-cta{ background: var(--paper-3); border: 1px solid var(--rule-2); }
.article-cta p{ color: var(--ink-2); }
.article-cta h3, .article-cta h2{ color: var(--ink-1); }