/* ============================================================
   ZQ HOME (v4 "Cinematic assembly") - production stylesheet.
   Extracted 1:1 from the approved .design-explorations/v4/home-v4.html
   inline <style>; only these deltas: this self-hosted font block
   replaces the Google Fonts hotlink, and the two portrait mask-image
   URLs are rebased for this file's location (../images/...).

   Fonts, self-hosted (2026-07-26 port):
   - Bricolage Grotesque: ONE variable woff2 (latin subset, opsz 12..96
     + wght axes) declared at the same five discrete weights the
     approved page requested from Google, so CSS font matching stays
     identical (a font-weight: 500 request resolves to the 400 face,
     exactly as it did hotlinked). The latin unicode-range mirrors
     Google's, so out-of-range glyphs (e.g. the U+2192 arrow) keep
     falling back to system fonts exactly as approved.
   - Spline Sans Mono: Google serves one identical file for 400 and
     500; ONE woff2 shipped, declared at both weights.
   font-optical-sizing: auto (the default, stated for intent) lets the
   opsz axis track font-size as it did via Google's serving.
   ============================================================ */

@font-face {
    font-family: 'Bricolage Grotesque';
    font-style: normal;
    font-weight: 300;
    font-stretch: 100%;
    font-display: swap;
    src: url('../fonts/BricolageGrotesque-Variable.woff2') format('woff2');
    unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
}
@font-face {
    font-family: 'Bricolage Grotesque';
    font-style: normal;
    font-weight: 400;
    font-stretch: 100%;
    font-display: swap;
    src: url('../fonts/BricolageGrotesque-Variable.woff2') format('woff2');
    unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
}
@font-face {
    font-family: 'Bricolage Grotesque';
    font-style: normal;
    font-weight: 600;
    font-stretch: 100%;
    font-display: swap;
    src: url('../fonts/BricolageGrotesque-Variable.woff2') format('woff2');
    unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
}
@font-face {
    font-family: 'Bricolage Grotesque';
    font-style: normal;
    font-weight: 700;
    font-stretch: 100%;
    font-display: swap;
    src: url('../fonts/BricolageGrotesque-Variable.woff2') format('woff2');
    unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
}
@font-face {
    font-family: 'Bricolage Grotesque';
    font-style: normal;
    font-weight: 800;
    font-stretch: 100%;
    font-display: swap;
    src: url('../fonts/BricolageGrotesque-Variable.woff2') format('woff2');
    unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
}
@font-face {
    font-family: 'Spline Sans Mono';
    font-style: normal;
    font-weight: 400;
    font-display: swap;
    src: url('../fonts/SplineSansMono-Regular.woff2') format('woff2');
    unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
}
@font-face {
    font-family: 'Spline Sans Mono';
    font-style: normal;
    font-weight: 500;
    font-display: swap;
    src: url('../fonts/SplineSansMono-Regular.woff2') format('woff2');
    unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
}

html { font-optical-sizing: auto; }

/* ============================================================
   LANE 04: CINEMATIC ASSEMBLY
   Dark graphite stage, spotlight, scroll-scrubbed timeline.
   Palette: warm graphite (OKLCH hue ~78, never navy, never pure
   black), off-white type, one accent: stamp ink vermilion.
   ============================================================ */

:root {
    --bg0: oklch(0.15 0.010 76);              /* outer darkness    */
    --bg1: oklch(0.215 0.012 78);             /* stage graphite    */
    --bg2: oklch(0.275 0.015 80);             /* lit pool          */
    --surface: oklch(0.265 0.013 78);         /* card face         */
    --surface-hi: oklch(0.315 0.014 80);      /* raised face       */
    --line: oklch(0.38 0.012 80 / 0.5);       /* hairline          */
    --line-soft: oklch(0.34 0.012 80 / 0.35);
    --ink: oklch(0.64 0.185 27);              /* stamp vermilion   */
    --ink-dim: oklch(0.58 0.16 27);
    --ink-soft: oklch(0.64 0.185 27 / 0.13);
    --fg: oklch(0.93 0.012 85);               /* off-white         */
    --fg-dim: oklch(0.72 0.013 82);
    --fg-faint: oklch(0.62 0.012 80);         /* 4.6:1+ on stage/ledger */
    --font-d: "Bricolage Grotesque", system-ui, sans-serif;
    --font-m: "Spline Sans Mono", ui-monospace, monospace;
    /* paper family for the daylight acts (lights-up pivot) */
    --paper: oklch(0.974 0.007 85);
    --paper-hi: oklch(0.99 0.006 90);
    --pink0: oklch(0.27 0.014 78);      /* warm graphite ink on paper */
}

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

html { scroll-behavior: auto; }

body {
    background: var(--bg0);
    color: var(--fg);
    font-family: var(--font-d);
    font-weight: 300;
    font-size: 15px;
    line-height: 1.55;
    -webkit-font-smoothing: antialiased;
    /* clip, not hidden: hidden would make body a scroll container and
       break position: sticky on the stage */
    overflow-x: clip;
}

::selection { background: var(--ink); color: oklch(0.97 0.008 85); }

a { color: inherit; }

/* ---------- header ----------
   Fixed and always available. Transparent while the page rests at the
   top (the approved opening); the moment anything scrolls under it, a
   stage-tinted backdrop + hairline switch on so debris can never read
   "through" it. Over the paper acts the tint flips to paper (act-aware
   class .is-paper, driven by the same scroll tracker as the rail). */

.top {
    position: fixed;
    top: 0; left: 0; right: 0;
    z-index: 80;
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    justify-content: space-between;
    padding: 14px clamp(18px, 4vw, 44px);
    color: var(--fg);
    background: transparent;
    border-bottom: 1px solid transparent;
    transition: background 360ms ease, border-color 360ms ease, color 360ms ease;
}
.top.is-scrolled {
    background: linear-gradient(oklch(0.15 0.010 76 / 0.92), oklch(0.16 0.011 77 / 0.78));
    -webkit-backdrop-filter: blur(14px);
    backdrop-filter: blur(14px);
    border-bottom-color: oklch(0.38 0.012 80 / 0.28);
}
.top.is-paper {
    --fg: oklch(0.27 0.014 78);
    --fg-dim: oklch(0.42 0.014 78);
    --fg-faint: oklch(0.55 0.012 78);
    --line: oklch(0.34 0.018 78 / 0.34);
    --line-soft: oklch(0.34 0.018 78 / 0.2);
}
.top.is-scrolled.is-paper {
    background: linear-gradient(oklch(0.974 0.007 85 / 0.94), oklch(0.974 0.007 85 / 0.82));
    border-bottom-color: oklch(0.34 0.018 78 / 0.2);
}
/* no JS: no tracker, no backdrop management; let the header scroll away */
html.no-js .top { position: absolute; }
.wordmark {
    display: flex; align-items: baseline; gap: 10px;
    text-decoration: none;
}
.wordmark .zm {
    font-family: var(--font-m); font-weight: 500; font-size: 13px;
    color: var(--ink);
    border: 1px solid var(--line);
    border-radius: 6px;
    padding: 4px 7px;
    background: oklch(0.215 0.012 78 / 0.7);
}
.top.is-paper .wordmark .zm { background: oklch(0.99 0.005 88 / 0.75); }
.wordmark .zn { font-weight: 600; font-size: 14px; letter-spacing: 0.01em; }
.socials { display: flex; gap: 8px; list-style: none; }
.socials a {
    position: relative;
    font-family: var(--font-m); font-size: 11.5px; text-decoration: none;
    color: var(--fg-dim);
    border: 1px solid var(--line-soft);
    border-radius: 999px;
    padding: 6px 11px;
    transition: color 160ms ease, border-color 160ms ease, transform 140ms ease;
}
/* 44px effective touch target without inflating the pill */
.socials a::before { content: ""; position: absolute; inset: -8px -4px; }
.socials a:hover { color: var(--fg); border-color: var(--line); }
.socials a:active { transform: scale(0.97); }

/* section nav: inline before socials on desktop. On mobile with JS the
   whole panel becomes a full-screen act-styled overlay behind the
   hamburger; without JS it falls back to the in-flow second row.
   Visual size stays small; padding + negative margin keep the hit
   area at ~44px without inflating the layout. */
.nav {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: 0 2px;
    order: 3;
    width: 100%;
    margin: 0 0 0 -9px;
}
.nav a {
    font-size: 12px;
    font-weight: 500;
    letter-spacing: 0.01em;
    color: var(--fg-dim);
    text-decoration: none;
    padding: 13px 9px;
    margin: -8px 0;
    border-radius: 6px;
    transition: color 160ms ease;
}
.nav a:hover { color: var(--fg); }
@media (min-width: 880px) {
    .nav { order: 0; width: auto; margin: 0 8px 0 auto; }
}

/* ---------- mobile menu (hamburger + full-screen act overlay) ----------
   One header row on mobile: wordmark + hamburger. The hamburger is three
   CSS bars, 44px hit target. The panel wraps nav + socials: display:
   contents on desktop and in the no-JS fallback (in-flow links), a fixed
   act-styled overlay on mobile with JS. Closed by default, so the
   settled static composition (noanim / reduced motion) has it closed. */
.menu-btn { display: none; transition: transform 140ms ease; }
.menu-btn:active { transform: scale(0.97); }
.menu-panel { display: contents; }
@media (max-width: 879px) {
    html:not(.no-js) .menu-btn {
        display: inline-grid;
        place-content: center;
        gap: 5px;
        width: 44px;
        height: 44px;
        margin: -8px -8px -8px 0;
        padding: 0;
        background: transparent;
        border: 0;
        border-radius: 8px;
        cursor: pointer;
        color: var(--fg);
    }
    .menu-btn i {
        display: block;
        width: 20px;
        height: 2px;
        border-radius: 1px;
        background: currentColor;
        transition: transform 240ms cubic-bezier(0.22, 1, 0.36, 1), opacity 160ms ease;
    }
    html.menu-open .menu-btn i:nth-child(1) { transform: translateY(7px) rotate(45deg); }
    html.menu-open .menu-btn i:nth-child(2) { opacity: 0; }
    html.menu-open .menu-btn i:nth-child(3) { transform: translateY(-7px) rotate(-45deg); }
    /* the overlay is a stage of its own: it forces the dark-theater
       tokens so it reads identically over paper and graphite acts */
    html:not(.no-js) .menu-panel {
        --fg: oklch(0.93 0.012 85);
        --fg-dim: oklch(0.72 0.013 82);
        --fg-faint: oklch(0.62 0.012 80);
        --line: oklch(0.38 0.012 80 / 0.5);
        --line-soft: oklch(0.34 0.012 80 / 0.35);
        display: grid;
        grid-template-rows: 1fr auto;
        align-items: center;
        position: fixed;
        inset: 0;
        z-index: -1;
        padding: 92px clamp(26px, 8vw, 44px) 40px;
        background:
            radial-gradient(100% 64% at 50% 12%, var(--bg2), var(--bg1) 55%, var(--bg0) 100%);
        visibility: hidden;
        opacity: 0;
        /* exit is quicker than enter: 160ms out, 260ms in */
        transition: opacity 160ms ease, visibility 0s linear 160ms;
    }
    html.menu-open .menu-panel {
        visibility: visible;
        opacity: 1;
        transition: opacity 260ms ease;
    }
    html.zq-static .menu-panel, html.zq-static .menu-btn i { transition: none; }
    html:not(.no-js) .menu-panel .nav {
        display: grid;
        align-content: center;
        gap: 2px;
        order: 0;
        width: auto;
        margin: 0;
        counter-reset: mnav;
    }
    html:not(.no-js) .menu-panel .nav a {
        display: flex;
        align-items: baseline;
        gap: 18px;
        font-size: clamp(1.6rem, 4.4vh, 2.05rem);
        font-weight: 600;
        letter-spacing: -0.015em;
        color: var(--fg);
        padding: 11px 0;
        margin: 0;
    }
    html:not(.no-js) .menu-panel .nav a::before {
        counter-increment: mnav;
        content: "0" counter(mnav);
        font-family: var(--font-m);
        font-size: 11px;
        letter-spacing: 0.06em;
        color: var(--ink);
    }
    html:not(.no-js) .menu-panel .socials { gap: 10px; }
    html:not(.no-js) .menu-panel .socials a {
        display: inline-block;
        padding: 13px 18px;
        font-size: 12px;
    }
}
/* while the overlay is up: lock page scroll, hold the header on the
   dark-theater tokens (the hamburger must never go dark-on-dark) */
html.menu-open, html.menu-open body { overflow: hidden; }
html.menu-open .top {
    --fg: oklch(0.93 0.012 85);
    --fg-dim: oklch(0.72 0.013 82);
    --fg-faint: oklch(0.62 0.012 80);
    --line: oklch(0.38 0.012 80 / 0.5);
    background: transparent;
    border-bottom-color: transparent;
    -webkit-backdrop-filter: none;
    backdrop-filter: none;
}
html.menu-open .top .wordmark .zm { background: oklch(0.215 0.012 78 / 0.7); }

/* keyboard DNA: off-white outline everywhere */
a:focus-visible,
button:focus-visible {
    outline: 2px solid var(--fg);
    outline-offset: 3px;
    border-radius: 3px;
}

/* anchored sections land clear of the fixed header (desktop bar ~57px,
   mobile row ~58px; 84px gives breathing room in both) */
#work, #capabilities, #about, #how, #contact { scroll-margin-top: 84px; }

.skip {
    position: fixed;
    top: 12px; left: 12px;
    z-index: 90;
    background: var(--surface-hi);
    color: var(--fg);
    border: 1px solid var(--line);
    border-radius: 8px;
    padding: 12px 18px;
    font-size: 13px;
    text-decoration: none;
    transform: translateY(-250%);
}
.skip:focus-visible { transform: none; }

/* ---------- stage ---------- */

.scrub { position: relative; }

.stage {
    position: relative;
    background:
        radial-gradient(58% 11% at 50% 88%, oklch(0.30 0.015 82 / 0.22), transparent 70%),
        radial-gradient(95% 75% at 50% 30%, var(--bg2), var(--bg1) 52%, var(--bg0) 100%);
    padding: 132px 18px 72px;
    overflow: hidden;
}

.vignette, .grain { position: absolute; inset: 0; pointer-events: none; }
.vignette {
    z-index: 8;
    background: radial-gradient(120% 92% at 50% 34%, transparent 42%, oklch(0.13 0.010 77 / 0.5) 76%, oklch(0.11 0.010 76 / 0.82) 100%);
}
.grain {
    z-index: 60;
    opacity: 0.05;
    background-image: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' width='140' height='140'><filter id='n'><feTurbulence type='fractalNoise' baseFrequency='0.9' numOctaves='2' stitchTiles='stitch'/><feColorMatrix type='saturate' values='0'/></filter><rect width='100%25' height='100%25' filter='url(%23n)' opacity='0.6'/></svg>");
}

/* ---------- hero ---------- */

.hero { position: relative; z-index: 30; max-width: 860px; margin: 0 auto; text-align: center; }
.hero::before {
    content: "";
    position: absolute;
    inset: -14% -18%;
    z-index: -1;
    background: radial-gradient(closest-side, oklch(0.17 0.011 77 / 0.62), transparent 74%);
    pointer-events: none;
}
h1 {
    font-weight: 700;
    font-size: clamp(2.5rem, 10vw, 5.75rem);
    line-height: 1.02;
    letter-spacing: -0.028em;
    text-wrap: balance;
}
.hero .sub {
    margin: 22px auto 0;
    max-width: 46ch;
    color: var(--fg-dim);
    font-weight: 400;
    font-size: clamp(1rem, 2.4vw, 1.17rem);
    text-wrap: balance;
}

/* ---------- debris pieces (scrub mode only) ---------- */

.debris { display: none; }

.piece {
    position: absolute;
    left: 0; top: 0;
    will-change: transform, opacity, filter;
    font-family: var(--font-m);
    font-size: 11px;
    color: var(--fg-dim);
    user-select: none;
    pointer-events: none;
}
.pc {
    background: var(--surface);
    border: 1px solid var(--line);
    border-radius: 10px;
    padding: 11px 13px;
    box-shadow:
        inset 0 1px 0 oklch(0.9 0.01 85 / 0.07),
        0 28px 60px oklch(0.08 0.008 76 / 0.5),
        0 3px 10px oklch(0.08 0.008 76 / 0.45);
}
.pc-head { display: flex; justify-content: space-between; align-items: center; gap: 12px; margin-bottom: 7px; }
.pc-app { font-weight: 500; font-size: 11.5px; color: var(--fg); letter-spacing: 0.01em; }
.pc-badge {
    font-size: 9px; letter-spacing: 0.08em; text-transform: uppercase;
    color: var(--ink);
    background: var(--ink-soft);
    border: 1px solid oklch(0.64 0.185 27 / 0.35);
    border-radius: 4px;
    padding: 2px 6px;
    white-space: nowrap;
}
.pc-badge.mut { color: var(--fg-faint); background: transparent; border-color: var(--line-soft); }
.pc-title { font-family: var(--font-d); font-weight: 400; font-size: 12.5px; color: var(--fg); }
.pc-sub { margin-top: 3px; font-size: 10px; color: var(--fg-faint); }
.skl { height: 5px; border-radius: 3px; background: oklch(0.37 0.012 80 / 0.5); margin-top: 7px; }

.p-card { width: 205px; }
.p-file { width: 205px; }
.bar { position: relative; height: 5px; border-radius: 3px; background: oklch(0.37 0.012 80 / 0.4); margin-top: 9px; overflow: hidden; }
.bar i { position: absolute; inset: 0 55% 0 0; background: var(--fg-faint); border-radius: 3px; }

.p-sheet .pc { padding: 0; overflow: hidden; width: 246px; }
.sheet-row { display: grid; grid-template-columns: 1.1fr 1fr 1fr 0.9fr; }
.sheet-row span {
    padding: 7px 9px;
    border-right: 1px solid var(--line-soft);
    border-bottom: 1px solid var(--line-soft);
    font-size: 10px;
    white-space: nowrap;
    overflow: hidden;
}
.sheet-row span:last-child { border-right: 0; }
.sheet-row.hd span { color: var(--fg-faint); font-size: 9px; text-transform: uppercase; letter-spacing: 0.07em; }
.sheet-row .bad { color: var(--ink); font-weight: 500; }

.p-dm { width: 195px; }
.dm {
    background: var(--surface-hi);
    border: 1px solid var(--line);
    border-radius: 13px 13px 13px 4px;
    padding: 9px 13px;
    font-family: var(--font-d);
    font-weight: 400;
    font-size: 12.5px;
    color: var(--fg);
    width: max-content;
    max-width: 100%;
    box-shadow: 0 22px 50px oklch(0.08 0.008 76 / 0.5);
}
.dm + .dm { margin-top: 7px; margin-left: 14px; font-size: 11.5px; color: var(--fg-dim); }
.dm-meta { margin-top: 6px; margin-left: 4px; font-size: 9px; color: var(--fg-faint); }

.p-chip .pc { display: flex; align-items: center; gap: 10px; width: max-content; border-radius: 999px; padding: 8px 16px 8px 9px; }
.chip-ic {
    width: 26px; height: 26px; border-radius: 50%;
    display: grid; place-items: center;
    background: var(--ink-soft);
    color: var(--ink);
    flex: none;
}
.chip-ic svg { width: 13px; height: 13px; }
.chip-t { font-family: var(--font-d); font-weight: 400; font-size: 12.5px; color: var(--fg); line-height: 1.25; }
.chip-t small { display: block; font-family: var(--font-m); font-size: 9.5px; color: var(--fg-faint); }

/* ---------- pipeline spine (scrub mode only) ---------- */

.machine { display: none; }
.spine-line {
    position: absolute;
    height: 2px;
    background: linear-gradient(90deg, oklch(0.44 0.012 80 / 0.15), oklch(0.5 0.012 80 / 0.75) 12%, oklch(0.5 0.012 80 / 0.75) 88%, oklch(0.44 0.012 80 / 0.15));
    transform-origin: left center;
    will-change: transform, opacity;
}
.station {
    position: absolute;
    transform: translate(-50%, -50%);
    display: grid;
    justify-items: center;
    gap: 17px;
    will-change: transform, opacity;
}
.st-dot {
    position: relative;
    width: 11px; height: 11px;
    border-radius: 3px;
    transform: rotate(45deg);
    background: var(--bg1);
    border: 1.5px solid var(--fg-dim);
}
.st-dot::after {
    content: "";
    position: absolute; inset: -7px;
    border-radius: 6px;
    border: 1.5px solid var(--ink);
    box-shadow: 0 0 16px oklch(0.64 0.185 27 / 0.55);
    opacity: var(--glow, 0);
}
/* sentence-case in the body face: tracked-caps grammar is reserved for
   stamps and dossier tabs only */
.st-label {
    font-size: 11px;
    font-weight: 400;
    letter-spacing: 0.02em;
    color: var(--fg-faint);
}

/* ---------- result: ledger + stamps ---------- */

.result {
    position: relative;
    z-index: 20;
    width: min(640px, 100%);
    margin: 56px auto 0;
    will-change: transform, opacity;
}
.ledger {
    background: oklch(0.235 0.012 78 / 0.96);
    border: 1px solid var(--line);
    border-radius: 12px;
    box-shadow: 0 40px 90px oklch(0.08 0.008 76 / 0.55), 0 4px 14px oklch(0.08 0.008 76 / 0.4);
    overflow: hidden;
}
.ledger-head {
    display: flex; justify-content: space-between; align-items: baseline;
    padding: 13px 18px;
    border-bottom: 1px solid var(--line-soft);
    font-family: var(--font-m);
    font-size: 11px;
    color: var(--fg-faint);
    letter-spacing: 0.06em;
}
.ledger-count { color: var(--fg-dim); font-variant-numeric: tabular-nums; }
.rows { list-style: none; }
.rows li {
    display: flex; align-items: flex-start; gap: 12px;
    padding: 9px 18px;
    border-bottom: 1px solid var(--line-soft);
    will-change: transform, opacity;
}
.rows li:last-child { border-bottom: 0; }
.tick {
    flex: none;
    width: 15px; height: 15px;
    margin-top: 3px;
    border-radius: 4px;
    display: grid; place-items: center;
    color: var(--ink);
    background: var(--ink-soft);
}
.tick svg { width: 9px; height: 9px; }
.r-main { font-weight: 400; font-size: 13px; color: var(--fg); line-height: 1.35; }
.r-sub { font-family: var(--font-m); font-size: 11px; color: var(--fg-faint); margin-top: 1px; }

.stamp { position: absolute; z-index: 24; }
/* stamped-at-an-angle: a real thunk never lands square */
.stamp-a { top: -52px; left: -6px; transform: rotate(-8deg); }
.stamp-b { bottom: -38px; right: -4px; transform: rotate(2.4deg); }
@media (min-width: 700px) {
    .stamp-a { top: -46px; left: -30px; }
    .stamp-b { bottom: -30px; right: -12px; }
}
.stamp-inner {
    position: relative;
    display: inline-grid;
    justify-items: center;
    gap: 2px;
    color: var(--ink);
    border: 2.5px solid var(--ink);
    border-radius: 9px;
    padding: 9px 18px 11px;
    background: oklch(0.205 0.012 78 / 0.93);
    box-shadow: 0 18px 44px oklch(0.08 0.008 76 / 0.5);
    will-change: transform, opacity;
}
.stamp-inner::before {
    content: "";
    position: absolute; inset: 3px;
    border: 1px solid oklch(0.64 0.185 27 / 0.55);
    border-radius: 5px;
    pointer-events: none;
}
.stamp-inner::after {
    content: "";
    position: absolute; inset: -13px;
    border: 2px solid var(--ink);
    border-radius: 14px;
    opacity: var(--imp, 0);
    transform: scale(calc(1 + (1 - var(--imp, 0)) * 0.14));
    pointer-events: none;
}
.stamp-big {
    font-weight: 800;
    font-size: clamp(1.35rem, 4.4vw, 2.1rem);
    letter-spacing: -0.01em;
    line-height: 1.05;
    font-variant-numeric: tabular-nums;
    white-space: nowrap;
}
.stamp-pre, .stamp-small {
    font-family: var(--font-m);
    font-size: 11px;
    letter-spacing: 0.1em;
    text-transform: uppercase;
    color: oklch(0.70 0.16 27); /* opaque, 6.3:1 on the stamp face */
    white-space: nowrap;
}

/* ---------- CTA beat ---------- */

.cta-beat {
    position: relative;
    z-index: 30;
    margin: 84px auto 0;
    max-width: 560px;
    text-align: center;
    will-change: transform, opacity;
}
.cta-line { color: var(--fg-dim); font-size: 1.05rem; font-weight: 400; margin-bottom: 20px; }
.btn {
    display: inline-block;
    /* button face darker than stamp ink: off-white label reads 4.8:1;
       stamps and accents keep the brighter --ink vermilion */
    background: oklch(0.55 0.17 27);
    color: oklch(0.97 0.008 85);
    text-decoration: none;
    font-weight: 600;
    font-size: 1.02rem;
    letter-spacing: 0.01em;
    border-radius: 9px;
    padding: 16px 32px;
    box-shadow: 0 16px 40px oklch(0.64 0.185 27 / 0.22);
    transition: transform 140ms ease, background 160ms ease;
}
.btn:hover { background: oklch(0.585 0.17 27); }
.btn:active { transform: scale(0.97); }
.btn:focus-visible { outline: 2px solid var(--fg); outline-offset: 3px; }
.cta-sec {
    display: block;
    width: max-content;
    /* 44px hit area: 13px padding-block, margins keep the visual rhythm */
    margin: 3px auto -13px;
    padding: 13px 10px;
    font-family: var(--font-m);
    font-size: 11.5px;
    color: var(--fg-faint);
    text-decoration: none;
}
.cta-sec:hover { color: var(--fg-dim); text-decoration: underline; text-underline-offset: 3px; }

/* ---------- scroll cue + beat rail (scrub only) ---------- */

.cue, .rail { display: none; }

/* ============================================================
   LIGHTS UP: the paper acts (lights-up pivot, adjustment pass 1)
   Dark bookends, paper middle. Hero + scrub keep the graphite
   theater; right after Proof the house lights come up and Case
   Files, Capabilities, Operator and Run Order play in warm paper
   daylight. Contact returns to the dark stage. The .act-paper
   scope re-resolves the shared tokens so the whole component
   grammar (cards, ledgers, stamps, rails, dots) repaints itself;
   hard-coded dark values get explicit overrides below.
   ============================================================ */

.act-paper {
    --surface: oklch(0.992 0.004 88);
    --surface-hi: oklch(0.998 0.002 90);
    --line: oklch(0.34 0.018 78 / 0.32);
    --line-soft: oklch(0.34 0.018 78 / 0.17);
    --fg: oklch(0.27 0.014 78);
    --fg-dim: oklch(0.42 0.014 78);
    --fg-faint: oklch(0.55 0.012 78);
    --ink-soft: oklch(0.64 0.185 27 / 0.09);
    background: var(--paper);
    color: var(--fg);
}
/* paper physics: shadows are soft ink, not stage voids */
.act-paper .pc,
.act-paper .dm {
    box-shadow:
        inset 0 1px 0 oklch(1 0.002 90 / 0.85),
        0 14px 30px oklch(0.35 0.03 70 / 0.13),
        0 2px 6px oklch(0.35 0.03 70 / 0.09);
}
.act-paper .st-dot { background: var(--paper); }
.act-paper .skl { background: oklch(0.87 0.012 82 / 0.9); }
.act-paper .bar { background: oklch(0.88 0.012 82 / 0.8); }
.act-paper .bar i { background: oklch(0.66 0.012 80); }
.act-paper .cf-ledger {
    background: oklch(0.995 0.003 88);
    box-shadow: 0 22px 48px oklch(0.35 0.03 70 / 0.16), 0 3px 9px oklch(0.35 0.03 70 / 0.1);
}
/* red stamp ink on paper: more authentic than on black; the pad
   bleeds a little */
.act-paper .stamp-inner {
    background: oklch(0.985 0.005 87 / 0.97);
    box-shadow: 0 14px 32px oklch(0.35 0.03 70 / 0.14);
}
/* stamp captions on paper: deeper pad ink, no alpha (5.6:1) */
.act-paper .stamp-pre,
.act-paper .stamp-small { color: oklch(0.52 0.17 27); }
.act-paper .cf-rail::before,
.act-paper .cf2-line,
.act-paper .how-line {
    background: linear-gradient(oklch(0.36 0.016 78 / 0.12), oklch(0.36 0.016 78 / 0.55) 25%, oklch(0.36 0.016 78 / 0.55) 75%, oklch(0.36 0.016 78 / 0.12));
}
@media (min-width: 880px) {
    .act-paper .cf2-line,
    .act-paper .how-line {
        background: linear-gradient(90deg, oklch(0.36 0.016 78 / 0.12), oklch(0.36 0.016 78 / 0.55) 8%, oklch(0.36 0.016 78 / 0.55) 92%, oklch(0.36 0.016 78 / 0.12));
    }
}
.act-paper .grain { opacity: 0.045; }
.act-paper ::selection { background: var(--ink); color: oklch(0.97 0.008 85); }

/* ---------- lights-up / dusk seams ----------
   Scroll-through moments, never a second scrub. The seam paints
   the light ramp; a veil (scrub mode only) holds the previous
   act's light and lifts once, on enter, so the flood reads as an
   event. Static/no-JS render the ramp already settled. */

.seam { position: relative; overflow: hidden; }
/* long oklab ramps: eight stops each so no segment spans enough
   lightness to band; the seam grain layer dithers what remains */
.seam-up {
    height: clamp(330px, 48vh, 520px);
    background:
        radial-gradient(92% 58% at 50% 103%, oklch(0.992 0.009 92 / 0.9), transparent 74%),
        linear-gradient(in oklab, var(--bg0) 0%, oklch(0.185 0.011 77) 12%, oklch(0.25 0.014 78) 26%, oklch(0.37 0.017 79) 40%, oklch(0.52 0.02 80) 54%, oklch(0.68 0.018 82) 68%, oklch(0.82 0.014 84) 80%, oklch(0.92 0.010 85) 90%, var(--paper) 100%);
}
.seam-down {
    height: clamp(280px, 40vh, 430px);
    background:
        radial-gradient(84% 52% at 50% -3%, oklch(0.992 0.008 92 / 0.5), transparent 72%),
        linear-gradient(in oklab, var(--paper) 0%, oklch(0.9 0.011 84) 12%, oklch(0.78 0.014 82) 26%, oklch(0.62 0.017 80) 42%, oklch(0.46 0.017 79) 58%, oklch(0.32 0.015 78) 74%, oklch(0.22 0.012 77) 88%, var(--bg0) 100%);
}
.seam .grain { opacity: 0.06; }
.seam-veil { position: absolute; inset: 0; z-index: 2; opacity: 0; pointer-events: none; }
.seam-up .seam-veil { background: linear-gradient(var(--bg0), oklch(0.15 0.010 76 / 0.95) 55%, oklch(0.15 0.010 76 / 0.62)); }
.seam-down .seam-veil { background: linear-gradient(oklch(0.974 0.007 85 / 0.95), oklch(0.974 0.007 85 / 0.55) 55%, oklch(0.974 0.007 85 / 0)); }
.zq-scrub .seam .seam-veil { transition: opacity 1500ms cubic-bezier(0.3, 0, 0.2, 1) 120ms; }
.zq-scrub .seam:not(.is-in) .seam-veil { opacity: 1; }
/* the drop line pierces the flood and lands on the first paper act */
.seam-drop {
    position: relative;
    z-index: 3;
    height: 100%;
    display: grid;
    justify-items: center;
    align-content: end;
    gap: 13px;
    padding-bottom: 26px;
}
.seam-drop i {
    display: block;
    width: 1.5px;
    height: clamp(72px, 15vh, 130px);
    background: linear-gradient(oklch(0.6 0.012 80 / 0), oklch(0.35 0.016 78 / 0.75));
    transform-origin: top center;
}
.seam-drop .st-dot { background: var(--paper); border-color: oklch(0.43 0.014 78); }
.seam-drop .st-label { color: oklch(0.45 0.013 78); }
.seam-down .seam-drop i { background: linear-gradient(oklch(0.35 0.016 78 / 0.55), oklch(0.75 0.012 82 / 0.7)); }
.seam-down .seam-drop .st-dot { background: var(--bg1); border-color: var(--fg-dim); }
/* one line of theater in the dusk ramp's bottom third: light ink that
   resolves as the ground darkens beneath it */
.dusk-line {
    font-size: 13px;
    font-weight: 400;
    letter-spacing: 0.01em;
    color: oklch(0.78 0.013 83);
    text-wrap: balance;
    text-align: center;
    padding: 0 18px;
}
.zq-scrub .seam .dusk-line { transition: opacity 700ms ease 380ms; }
.zq-scrub .seam:not(.is-in) .dusk-line { opacity: 0; }
.zq-scrub .seam .seam-drop i { transition: transform 700ms cubic-bezier(0.23, 1, 0.32, 1) 250ms; }
.zq-scrub .seam:not(.is-in) .seam-drop i { transform: scaleY(0); }
.zq-scrub .seam .seam-drop .st-dot,
.zq-scrub .seam .seam-drop .st-label { transition: opacity 420ms ease 600ms; }
.zq-scrub .seam:not(.is-in) .seam-drop .st-dot,
.zq-scrub .seam:not(.is-in) .seam-drop .st-label { opacity: 0; }

/* ============================================================
   ACT: CASE FILES (work / proof), first paper act.
   Real paper documents in daylight. No second scrub: each file
   lands with strong single-fire beats gated by an
   IntersectionObserver. Base styles below are the settled
   composition (zq-static, noanim, reduced motion, JS off);
   pre-states and beat transitions live under .zq-scrub only.
   ?state=work|work2|work3 pins the hero timeline done, forces
   every beat settled and jumps here for deterministic captures.
   ============================================================ */

.work {
    position: relative;
    background:
        radial-gradient(58% 30% at 50% 0%, oklch(0.99 0.007 90 / 0.85), transparent 74%),
        var(--paper);
    padding: clamp(24px, 4vh, 44px) clamp(18px, 4vw, 44px) clamp(72px, 9vw, 110px);
    overflow: hidden;
}

/* act opening: the drop line now lives in the seam above */
.w-open { position: relative; max-width: 860px; margin: 0 auto; text-align: center; }
.work h2 {
    font-weight: 700;
    font-size: clamp(1.8rem, 5vw, 2.9rem);
    line-height: 1.08;
    letter-spacing: -0.025em;
    text-wrap: balance;
    margin: 0 auto;
}
.w-sub { color: var(--fg-dim); max-width: 56ch; margin: 16px auto 0; text-wrap: balance; }

/* file shells: no card chrome; on paper the pools become window
   light, a touch brighter and warmer than the sheet around them */
.cf { position: relative; max-width: 1060px; margin: clamp(64px, 8vw, 108px) auto 0; }
.cf::before { content: ""; position: absolute; z-index: 0; inset: -14% -22%; pointer-events: none; }
.cf-1::before { background: radial-gradient(58% 62% at 26% 38%, oklch(0.995 0.01 94 / 0.85), transparent 72%); }
.cf-2::before { background: radial-gradient(74% 58% at 50% 42%, oklch(0.995 0.01 94 / 0.75), transparent 74%); }
.cf-3::before { background: radial-gradient(58% 62% at 72% 36%, oklch(0.995 0.01 94 / 0.85), transparent 72%); }
.cf > * { position: relative; z-index: 1; }

.cf-tab {
    display: flex;
    flex-wrap: wrap;
    align-items: baseline;
    gap: 6px 16px;
    font-family: var(--font-m);
    font-size: 10px;
    letter-spacing: 0.12em;
    text-transform: uppercase;
    color: var(--fg-faint);
    padding-bottom: 11px;
    border-bottom: 1px solid var(--line-soft);
}
/* the file number rides a physical folder tab on the rule line */
.cf-tab .no {
    color: var(--fg-dim);
    background: oklch(0.955 0.012 85);
    border: 1px solid var(--line-soft);
    border-bottom: 0;
    border-radius: 6px 6px 0 0;
    padding: 6px 10px 17px;
    margin-bottom: -11px;
}
.cf-meta { display: contents; }
.cf-tab .who { letter-spacing: 0.05em; width: 100%; }
@media (min-width: 640px) { .cf-tab .who { width: auto; margin-left: auto; } }
/* phones: no folder-tab trick; tab, meta and client stack as three
   clean rows above the rule */
@media (max-width: 639px) {
    .cf-tab { display: grid; justify-items: start; gap: 8px; }
    .cf-meta { display: flex; flex-wrap: wrap; gap: 6px 16px; }
    .cf-tab .no {
        margin-bottom: 0;
        padding: 5px 9px 6px;
        border-bottom: 1px solid var(--line-soft);
        border-radius: 6px;
    }
    .cf-tab .who { width: auto; }
}

.cf h3 {
    font-weight: 600;
    font-size: clamp(1.35rem, 3.4vw, 1.9rem);
    line-height: 1.12;
    letter-spacing: -0.02em;
    margin-top: 20px;
    max-width: 26ch;
    text-wrap: balance;
}
.cf h3 a { text-decoration: none; }
.cf h3 a:hover {
    text-decoration: underline;
    text-decoration-thickness: 1.5px;
    text-underline-offset: 5px;
    text-decoration-color: var(--fg-faint);
}
.cf-mess { color: var(--fg-dim); margin-top: 14px; max-width: 54ch; }
.cf-lead {
    font-family: var(--font-m);
    font-size: 11px;
    letter-spacing: 0.04em;
    color: var(--fg-faint);
    margin-bottom: 18px;
}
.cf-open {
    position: relative;
    display: inline-block;
    font-family: var(--font-m);
    font-size: 11.5px;
    letter-spacing: 0.02em;
    color: var(--fg-dim);
    text-decoration: none;
    border: 1px solid var(--line-soft);
    border-radius: 999px;
    padding: 8px 16px;
    transition: color 160ms ease, border-color 160ms ease, transform 140ms ease;
}
/* 44px effective touch target */
.cf-open::before { content: ""; position: absolute; inset: -6px 0; }
.cf-open:hover { color: var(--fg); border-color: var(--line); }
.cf-open:active { transform: scale(0.97); }
.cf-open:focus-visible { outline: 2px solid var(--fg); outline-offset: 3px; }

/* shared station grammar (rail + band) */
.cf-st-name { font-weight: 500; font-size: 13.5px; color: var(--fg); }
.cf-st-note { font-family: var(--font-m); font-size: 11px; color: var(--fg-faint); line-height: 1.55; }

/* stamps in the files: wrapper holds the tilt, inner takes the thunk */
.cf-stamp { display: inline-block; transform: rotate(var(--rot, 0deg)); }
.cf-stamp-note {
    font-family: var(--font-m);
    font-size: 11px;
    letter-spacing: 0.04em;
    color: var(--fg-faint);
}

/* ---------- file 01: split desk (Stripe x QuickBooks) ---------- */

.cf1-grid { display: grid; gap: 44px; margin-top: 8px; }
@media (min-width: 880px) {
    .cf1-grid { grid-template-columns: minmax(0, 10fr) minmax(0, 11fr); gap: clamp(44px, 5vw, 76px); align-items: start; }
    .cf1-left { padding-top: 8px; }
}
.cf-desk { position: relative; margin-top: 34px; height: 208px; }
.cf-art { position: absolute; font-family: var(--font-m); font-size: 11px; color: var(--fg-dim); }
.art-sheet { left: 0; top: 0; width: min(276px, 82%); transform: rotate(-2.2deg); }
.art-sheet .pc { padding: 0; overflow: hidden; }
.art-csv { right: 0; bottom: 0; width: 215px; transform: rotate(2.4deg); }

.cf1-right .cf-lead { margin-top: 26px; }
@media (min-width: 880px) { .cf1-right .cf-lead { margin-top: 0; } }
.cf-rail { position: relative; display: grid; gap: 20px; list-style: none; }
.cf-rail::before {
    content: "";
    position: absolute;
    left: 5px; top: 10px; bottom: 10px;
    width: 1.5px;
    background: linear-gradient(oklch(0.5 0.012 80 / 0.2), oklch(0.5 0.012 80 / 0.7) 25%, oklch(0.5 0.012 80 / 0.7) 75%, oklch(0.5 0.012 80 / 0.2));
    transform-origin: top center;
}
.cf-st { display: grid; grid-template-columns: 11px minmax(0, 1fr); column-gap: 16px; row-gap: 2px; align-items: start; }
.cf-st .st-dot { grid-row: 1 / span 2; margin-top: 4px; }

.cf-ledger {
    position: relative;
    margin-top: 36px;
    background: oklch(0.235 0.012 78 / 0.96);
    border: 1px solid var(--line);
    border-radius: 12px;
    box-shadow: 0 40px 90px oklch(0.08 0.008 76 / 0.55), 0 4px 14px oklch(0.08 0.008 76 / 0.4);
}
.cf-ledger-head {
    display: flex;
    justify-content: space-between;
    align-items: baseline;
    gap: 12px;
    padding: 12px 18px;
    border-bottom: 1px solid var(--line-soft);
    font-family: var(--font-m);
    font-size: 11px;
    color: var(--fg-faint);
    letter-spacing: 0.06em;
}
.cf-rows { list-style: none; }
.cf-rows li {
    display: flex;
    align-items: flex-start;
    gap: 12px;
    padding: 10px 18px;
    border-bottom: 1px solid var(--line-soft);
}
.cf-rows li:last-child { border-bottom: 0; padding-bottom: 56px; }
@media (min-width: 640px) { .cf-rows li:last-child { padding-bottom: 38px; } }
.cf1-stamp { position: absolute; z-index: 3; bottom: -46px; right: -8px; --rot: 2.4deg; }
@media (min-width: 880px) { .cf1-stamp { bottom: -54px; right: -20px; } }
.cf1-foot {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    justify-content: space-between;
    gap: 14px 20px;
    margin-top: 58px;
}

/* ---------- file 02: full-width pipeline (n8n x Claude) ---------- */

.cf2-cols { display: grid; gap: 18px; margin-top: 8px; }
@media (min-width: 880px) {
    .cf2-cols { grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); gap: clamp(40px, 5vw, 80px); align-items: end; }
    .cf2-cols .cf-mess { margin-top: 0; }
}
.cf2-mess-strip { display: flex; flex-wrap: wrap; align-items: center; gap: 14px 30px; margin-top: 38px; }
.cf-queue { position: relative; display: flex; align-items: flex-start; height: 122px; }
.q-card { width: 172px; font-family: var(--font-m); font-size: 11px; color: var(--fg-dim); }
.q-card + .q-card { margin-left: -118px; }
.q-card:nth-child(1) { transform: rotate(-3.4deg); z-index: 3; }
.q-card:nth-child(2) { transform: translateY(14px) rotate(1.8deg); z-index: 2; }
.q-card:nth-child(3) { transform: translateY(30px) rotate(6deg); z-index: 1; }
.cf-queue-cap { font-family: var(--font-m); font-size: 11px; color: var(--fg-faint); max-width: 30ch; line-height: 1.65; }

.cf-2 > .cf-lead { margin-top: 34px; margin-bottom: 0; }
.cf2-band { position: relative; margin-top: 22px; }
.cf2-line {
    position: absolute;
    left: 5px; top: 10px; bottom: 10px;
    width: 1.5px;
    background: linear-gradient(oklch(0.5 0.012 80 / 0.2), oklch(0.5 0.012 80 / 0.75) 15%, oklch(0.5 0.012 80 / 0.75) 85%, oklch(0.5 0.012 80 / 0.2));
    transform-origin: top center;
}
.cf2-sts { list-style: none; display: grid; gap: 20px; }
.cf2-sts li { display: grid; grid-template-columns: 11px minmax(0, 1fr); column-gap: 16px; row-gap: 2px; align-items: start; }
.cf2-sts li .st-dot { grid-row: 1 / span 2; margin-top: 4px; }
@media (min-width: 880px) {
    .cf2-line {
        left: 5px; right: 5px; top: 5px; bottom: auto;
        width: auto; height: 1.5px;
        background: linear-gradient(90deg, oklch(0.5 0.012 80 / 0.2), oklch(0.5 0.012 80 / 0.75) 8%, oklch(0.5 0.012 80 / 0.75) 92%, oklch(0.5 0.012 80 / 0.2));
        transform-origin: left center;
    }
    .cf2-sts { grid-template-columns: repeat(6, minmax(0, 1fr)); gap: 18px; }
    .cf2-sts li { grid-template-columns: minmax(0, 1fr); grid-template-rows: 11px auto auto; row-gap: 0; }
    .cf2-sts li .st-dot { grid-row: 1; margin-top: 0; }
    .cf2-sts li .cf-st-name { margin-top: 14px; }
    .cf2-sts li .cf-st-note { margin-top: 3px; padding-right: 6px; }
}
.cf2-close { display: flex; flex-direction: column; align-items: flex-start; gap: 30px; margin-top: 42px; }
@media (min-width: 880px) {
    .cf2-close { flex-direction: row-reverse; justify-content: space-between; align-items: center; gap: 40px; }
}
.cf2-stamp { --rot: -2.2deg; margin-left: 4px; }
.cf2-close-copy { max-width: 52ch; color: var(--fg-dim); font-size: 0.92rem; }
.cf2-close-copy .cf-open { margin-top: 20px; }

/* ---------- file 03: message log (Jobber x Zapier) ---------- */

.cf3-grid { display: grid; gap: 44px; margin-top: 8px; grid-template-areas: "text" "thread" "close"; }
@media (min-width: 880px) {
    .cf3-grid {
        grid-template-columns: minmax(0, 10fr) minmax(0, 9fr);
        grid-template-areas: "thread text" "thread close";
        grid-template-rows: auto 1fr;
        column-gap: clamp(48px, 6vw, 90px);
        row-gap: 34px;
        align-items: start;
    }
}
.cf3-text { grid-area: text; }
.cf3-thread-col { grid-area: thread; }
.cf3-close { grid-area: close; display: flex; flex-direction: column; align-items: flex-start; gap: 26px; }
.cf3-thread-col .cf-lead { margin-top: 8px; }
.cf-thread { list-style: none; display: grid; gap: 12px; max-width: 430px; }
.cf-thread li { display: grid; grid-template-columns: 64px minmax(0, 1fr); gap: 13px; align-items: start; }
.th-tag {
    font-family: var(--font-m);
    font-size: 11px;
    letter-spacing: 0.03em;
    color: var(--fg-faint);
    text-align: right;
    padding-top: 11px;
    white-space: nowrap;
}
.th-note {
    font-family: var(--font-m);
    font-size: 11px;
    color: var(--fg-faint);
    line-height: 1.6;
    margin-top: 6px;
    padding-left: 4px;
    max-width: 36ch;
}
.cf3-foot-note {
    font-family: var(--font-m);
    font-size: 11px;
    color: var(--fg-faint);
    line-height: 1.65;
    margin-top: 24px;
    max-width: 46ch;
}
.cf3-stamp { --rot: -2deg; margin-top: 6px; }

/* ---------- act close ---------- */

.w-close { position: relative; max-width: 860px; margin: clamp(56px, 8vw, 96px) auto 0; text-align: center; }
.w-close p { color: var(--fg-faint); font-size: 0.95rem; max-width: 48ch; margin: 0 auto; text-wrap: balance; }
.w-all {
    position: relative;
    display: inline-block;
    margin-top: 16px;
    font-family: var(--font-m);
    font-size: 12px;
    color: var(--fg-dim);
    text-decoration: none;
    border-bottom: 1px solid var(--line);
    padding-bottom: 3px;
    transition: color 160ms ease, border-color 160ms ease, transform 140ms ease;
}
/* 44px effective touch target */
.w-all::before { content: ""; position: absolute; inset: -12px -10px; }
.w-all:hover { color: var(--fg); border-color: var(--fg-dim); }
.w-all:active { transform: scale(0.97); }

/* ---------- case-file beats (scrub mode only, single-fire) ----------
   Every pre-state is scoped to :not(.is-in) under .zq-scrub, so the
   settled composition is always the default. Stamps key off their own
   local zone (.sz: the ledger / close block that carries them), not
   the whole article, so the thunk happens in frame at reading pace. */

.zq-scrub .w-open h2 { transition: opacity 560ms ease 90ms, transform 560ms cubic-bezier(0.22, 1, 0.36, 1) 90ms; }
.zq-scrub .w-open:not(.is-in) h2 { opacity: 0; transform: translateY(20px); }
.zq-scrub .w-open .w-sub { transition: opacity 560ms ease 210ms, transform 560ms cubic-bezier(0.22, 1, 0.36, 1) 210ms; }
.zq-scrub .w-open:not(.is-in) .w-sub { opacity: 0; transform: translateY(16px); }

.zq-scrub .cf .cf-tab { transition: opacity 460ms ease; }
.zq-scrub .cf:not(.is-in) .cf-tab { opacity: 0; }
.zq-scrub .cf h3,
.zq-scrub .cf .cf-mess,
.zq-scrub .cf .cf-lead,
.zq-scrub .cf .cf-open,
.zq-scrub .cf .cf-queue-cap,
.zq-scrub .cf .cf3-foot-note,
.zq-scrub .cf .cf2-close-copy { transition: opacity 520ms ease 90ms, transform 520ms cubic-bezier(0.22, 1, 0.36, 1) 90ms; }
.zq-scrub .cf:not(.is-in) h3,
.zq-scrub .cf:not(.is-in) .cf-mess,
.zq-scrub .cf:not(.is-in) .cf-lead,
.zq-scrub .cf:not(.is-in) .cf-open,
.zq-scrub .cf:not(.is-in) .cf-queue-cap,
.zq-scrub .cf:not(.is-in) .cf3-foot-note,
.zq-scrub .cf:not(.is-in) .cf2-close-copy { opacity: 0; transform: translateY(12px); }

/* artifacts settle onto the desk */
.zq-scrub .cf .cf-art { transition: opacity 520ms ease var(--d, 0ms), transform 520ms cubic-bezier(0.22, 1, 0.36, 1) var(--d, 0ms); }
.art-sheet { --d: 100ms; }
.art-csv { --d: 220ms; }
.zq-scrub .cf:not(.is-in) .art-sheet { opacity: 0; transform: rotate(-5.5deg) translateY(-30px); }
.zq-scrub .cf:not(.is-in) .art-csv { opacity: 0; transform: rotate(6.5deg) translateY(-24px); }

.zq-scrub .cf .q-card { transition: opacity 480ms ease var(--d, 0ms), transform 480ms cubic-bezier(0.22, 1, 0.36, 1) var(--d, 0ms); }
.q-card:nth-child(1) { --d: 100ms; }
.q-card:nth-child(2) { --d: 180ms; }
.q-card:nth-child(3) { --d: 240ms; }
.zq-scrub .cf:not(.is-in) .q-card:nth-child(1) { opacity: 0; transform: rotate(-7.5deg) translateY(-26px); }
.zq-scrub .cf:not(.is-in) .q-card:nth-child(2) { opacity: 0; transform: translateY(-12px) rotate(4.5deg); }
.zq-scrub .cf:not(.is-in) .q-card:nth-child(3) { opacity: 0; transform: translateY(4px) rotate(10deg); }

/* rails and bands draw, stations populate */
.zq-scrub .cf-rail::before { transition: transform 680ms cubic-bezier(0.23, 1, 0.32, 1) 120ms; }
.zq-scrub .cf:not(.is-in) .cf-rail::before { transform: scaleY(0); }
.zq-scrub .cf .cf-st { transition: opacity 460ms ease var(--d, 0ms), transform 460ms cubic-bezier(0.22, 1, 0.36, 1) var(--d, 0ms); }
.cf-st:nth-child(1) { --d: 220ms; }
.cf-st:nth-child(2) { --d: 300ms; }
.cf-st:nth-child(3) { --d: 380ms; }
.cf-st:nth-child(4) { --d: 460ms; }
.zq-scrub .cf:not(.is-in) .cf-st { opacity: 0; transform: translateY(10px); }

.zq-scrub .cf2-line { transition: transform 720ms cubic-bezier(0.23, 1, 0.32, 1) 120ms; }
.zq-scrub .cf-2:not(.is-in) .cf2-line { transform: scaleY(0); }
@media (min-width: 880px) { .zq-scrub .cf-2:not(.is-in) .cf2-line { transform: scaleX(0); } }
.zq-scrub .cf-2 .cf2-sts li { transition: opacity 460ms ease var(--d, 0ms), transform 460ms cubic-bezier(0.22, 1, 0.36, 1) var(--d, 0ms); }
.cf2-sts li:nth-child(1) { --d: 240ms; }
.cf2-sts li:nth-child(2) { --d: 315ms; }
.cf2-sts li:nth-child(3) { --d: 390ms; }
.cf2-sts li:nth-child(4) { --d: 465ms; }
.cf2-sts li:nth-child(5) { --d: 540ms; }
.cf2-sts li:nth-child(6) { --d: 615ms; }
.zq-scrub .cf-2:not(.is-in) .cf2-sts li { opacity: 0; transform: translateY(10px); }

/* ledger populates like the one upstairs */
.zq-scrub .cf .cf-ledger { transition: opacity 520ms ease 360ms, transform 520ms cubic-bezier(0.22, 1, 0.36, 1) 360ms; }
.zq-scrub .cf:not(.is-in) .cf-ledger { opacity: 0; transform: translateY(16px); }
.zq-scrub .cf .cf-rows li { transition: opacity 420ms ease var(--d, 0ms), transform 420ms cubic-bezier(0.22, 1, 0.36, 1) var(--d, 0ms); }
.cf-rows li:nth-child(1) { --d: 500ms; }
.cf-rows li:nth-child(2) { --d: 580ms; }
.cf-rows li:nth-child(3) { --d: 660ms; }
.zq-scrub .cf:not(.is-in) .cf-rows li { opacity: 0; transform: translateX(16px); }

/* messages arrive in order */
.zq-scrub .cf .cf-thread li { transition: opacity 460ms ease var(--d, 0ms), transform 460ms cubic-bezier(0.22, 1, 0.36, 1) var(--d, 0ms); }
.cf-thread li:nth-child(1) { --d: 120ms; }
.cf-thread li:nth-child(2) { --d: 190ms; }
.cf-thread li:nth-child(3) { --d: 260ms; }
.cf-thread li:nth-child(4) { --d: 330ms; }
.cf-thread li:nth-child(5) { --d: 400ms; }
.cf-thread li:nth-child(6) { --d: 470ms; }
.zq-scrub .cf:not(.is-in) .cf-thread li { opacity: 0; transform: translateY(12px); }

/* the thunk: same impact grammar as the hero stamps. The pre-state
   zero lives under .zq-scrub only: base .stamp-inner is opacity 1,
   settled by default (noanim / reduced motion / no-JS). */
.zq-scrub .sz:not(.is-in) .cf-stamp .stamp-inner { opacity: 0; }
.zq-scrub .sz.is-in .cf-stamp .stamp-inner { animation: cf-stamp 560ms cubic-bezier(0.16, 1, 0.3, 1) 200ms both; }
.zq-scrub .sz.is-in .cf-stamp .stamp-inner::after { animation: cf-ring 620ms ease-out 500ms both; }
@keyframes cf-stamp {
    0% { opacity: 0; transform: scale(1.8); }
    12% { opacity: 1; }
    100% { opacity: 1; transform: scale(1); }
}
@keyframes cf-ring {
    0% { opacity: 0; transform: scale(1.18); }
    40% { opacity: 0.85; transform: scale(1.05); }
    100% { opacity: 0; transform: scale(1); }
}
.zq-scrub .cf .cf-stamp-note { transition: opacity 460ms ease 900ms; }
.zq-scrub .cf:not(.is-in) .cf-stamp-note { opacity: 0; }

.zq-scrub .w-close { transition: opacity 520ms ease, transform 520ms cubic-bezier(0.22, 1, 0.36, 1); }
.zq-scrub .w-close:not(.is-in) { opacity: 0; transform: translateY(14px); }

/* ?state= capture mode: everything settled, no motion. Id-qualified so
   these outrank every .zq-scrub pre-state/transition rule. */
#work.zq-jump *, #work.zq-jump *::before, #work.zq-jump *::after,
#seam-up.zq-jump *, #seam-up.zq-jump *::before, #seam-up.zq-jump *::after,
#seam-down.zq-jump *, #seam-down.zq-jump *::before, #seam-down.zq-jump *::after,
#capabilities.zq-jump *, #capabilities.zq-jump *::before, #capabilities.zq-jump *::after,
#about.zq-jump *, #about.zq-jump *::before, #about.zq-jump *::after,
#how.zq-jump *, #how.zq-jump *::before, #how.zq-jump *::after,
#contact.zq-jump *, #contact.zq-jump *::before, #contact.zq-jump *::after { transition: none; animation: none; }

/* ============================================================
   ACT: CAPABILITIES (station catalogue)
   Own pool of light, top-left. Opening grammar: drafting-table
   title block, a rule that draws out to the right edge. Body is
   a ruled definition list: no cards, no icons; every line names
   platforms and the artifact that lands in the client's hands.
   ============================================================ */

.cap {
    position: relative;
    border-top: 1px solid var(--line-soft);
    background:
        radial-gradient(50% 34% at 14% 4%, oklch(0.995 0.01 94 / 0.85), transparent 74%),
        var(--paper);
    padding: clamp(64px, 8vw, 100px) clamp(18px, 4vw, 44px) clamp(72px, 9vw, 112px);
    overflow: hidden;
}
.cap-inner { position: relative; z-index: 1; max-width: 1060px; margin: 0 auto; }
.cap-tag {
    display: flex;
    align-items: center;
    gap: 16px;
    font-size: 13px;
    color: var(--fg-faint);
}
.cap-tag i {
    display: block;
    flex: 1;
    height: 1px;
    background: linear-gradient(90deg, oklch(0.36 0.016 78 / 0.5), oklch(0.36 0.016 78 / 0.06));
    transform-origin: left center;
}
.cap h2 {
    font-weight: 700;
    font-size: clamp(1.8rem, 5vw, 2.9rem);
    line-height: 1.08;
    letter-spacing: -0.025em;
    text-wrap: balance;
    margin-top: 30px;
    max-width: 24ch;
}
.cap-sub { color: var(--fg-dim); max-width: 54ch; margin-top: 16px; }
.cap-rows { list-style: none; margin-top: clamp(40px, 5vw, 64px); }
.cap-row { position: relative; display: grid; gap: 12px 40px; padding: 26px 0 30px; }
.cap-row::before,
.cap-row:last-child::after {
    content: "";
    position: absolute;
    left: 0; right: 0;
    height: 1px;
    background: var(--line-soft);
    transform-origin: left center;
}
.cap-row::before { top: 0; }
.cap-row:last-child::after { bottom: 0; }
@media (min-width: 880px) {
    .cap-row { grid-template-columns: minmax(0, 5fr) minmax(0, 7fr); padding: 32px 0 36px; }
}
.cap-no { font-family: var(--font-m); font-size: 11px; color: var(--fg-faint); }
.cap-name h3 {
    display: flex;
    align-items: flex-start;
    gap: 13px;
    font-weight: 600;
    font-size: clamp(1.05rem, 2.4vw, 1.25rem);
    letter-spacing: -0.01em;
    line-height: 1.25;
    margin-top: 10px;
}
.cap-name h3 .st-dot { flex: none; margin-top: 5px; }
.cap-spec { color: var(--fg-dim); font-size: 0.95rem; max-width: 58ch; }

/* ============================================================
   ACT: OPERATOR (about + career log)
   Daylight act. Split stage: bio left, portrait printed on the
   paper right (warm duotone, no backdrop halo), a timestamped
   career log under the bio. No stat blocks: the numbers ride
   one mono metadata line.
   ============================================================ */

.about {
    position: relative;
    border-top: 1px solid var(--line-soft);
    background:
        radial-gradient(52% 42% at 80% 22%, oklch(0.995 0.01 94 / 0.9), transparent 72%),
        var(--paper);
    padding: clamp(64px, 8vw, 100px) clamp(18px, 4vw, 44px) clamp(72px, 9vw, 112px);
    overflow: hidden;
}
.ab-grid {
    position: relative;
    z-index: 1;
    max-width: 1060px;
    margin: 0 auto;
    display: grid;
    gap: 44px;
    grid-template-areas: "head" "photo" "rail";
}
@media (min-width: 880px) {
    .ab-grid {
        grid-template-columns: minmax(0, 11fr) minmax(0, 9fr);
        grid-template-areas: "head photo" "rail rail";
        column-gap: clamp(40px, 4.5vw, 64px);
        row-gap: clamp(44px, 5vw, 64px);
        align-items: start;
    }
}
.ab-head { grid-area: head; }
.about h2 {
    font-weight: 700;
    font-size: clamp(1.8rem, 5vw, 2.9rem);
    line-height: 1.08;
    letter-spacing: -0.025em;
    text-wrap: balance;
}
.ab-lede { color: var(--fg); font-size: 1.02rem; margin-top: 18px; max-width: 54ch; }
.ab-more { color: var(--fg-dim); font-size: 0.95rem; margin-top: 14px; max-width: 54ch; }
.ab-meta {
    margin-top: 22px;
    font-family: var(--font-m);
    font-size: 11px;
    letter-spacing: 0.04em;
    color: var(--fg-faint);
}
.ab-photo {
    grid-area: photo;
    position: relative;
    margin: 0;
    /* one row with the headline block: top-aligned beside it, not
       floating vertically centered */
    align-self: start;
    justify-self: center;
    width: min(100%, 400px);
}
/* the cut-out print: background-removed portrait laid straight onto the
   sheet. No photo rectangle, no gradient blending: paper shows through
   around the subject. Warm ink duotone rides the subject only (the
   silhouette itself masks the shadow-lift overlay), and a soft contact
   shadow sits on the paper beneath the print. Display capped at 400px
   so the 500px source stays crisp. */
.ab-photo img {
    position: relative;
    z-index: 1;
    display: block;
    width: 100%;
    height: auto;
    /* mirrored so the operator faces the headline on his left */
    transform: scaleX(-1);
    filter: grayscale(1) sepia(0.36) hue-rotate(-8deg) brightness(1.05) contrast(1.07) saturate(0.9)
        drop-shadow(0 10px 14px oklch(0.35 0.03 70 / 0.12));
    /* bottom fade into the sheet: the waist-cut reads as print trim,
       not sticker shear (vertical ramp, unaffected by the mirror) */
    -webkit-mask-image: linear-gradient(oklch(0 0 0) 0%, oklch(0 0 0) 88%, transparent 100%);
    mask-image: linear-gradient(oklch(0 0 0) 0%, oklch(0 0 0) 88%, transparent 100%);
}
/* shadows -> warm graphite ink, clipped to the silhouette and to the
   same trim fade (composited: silhouette AND fade) */
.ab-photo::before {
    content: "";
    position: absolute; inset: 0;
    z-index: 2;
    background: oklch(0.31 0.03 62);
    mix-blend-mode: lighten;
    /* mirrored with the print so the silhouette mask keeps registration */
    transform: scaleX(-1);
    -webkit-mask-image: url("../images/mine/Zaid_Qayyum_-_DP-removebg-preview.png"), linear-gradient(oklch(0 0 0) 0%, oklch(0 0 0) 88%, transparent 100%);
    -webkit-mask-size: 100% 100%, 100% 100%;
    -webkit-mask-composite: destination-in;
    mask-image: url("../images/mine/Zaid_Qayyum_-_DP-removebg-preview.png"), linear-gradient(oklch(0 0 0) 0%, oklch(0 0 0) 88%, transparent 100%);
    mask-size: 100% 100%, 100% 100%;
    mask-composite: intersect;
    pointer-events: none;
}
/* ---------- career receipt rail ----------
   The vertical log is gone; the record now rides a horizontal rail of
   dated paper receipt slips under the operator + photo row. Native
   horizontal scroll (swipe on touch, drag on desktop, arrow keys when
   the region is focused); never an auto-marquee, never a loop. The
   scroller is the overflow container, so the page never grows a
   horizontal scrollbar. */
.ab-rail-block { grid-area: rail; min-width: 0; }
.ab-rail-block h3 { font-weight: 600; font-size: 1.05rem; letter-spacing: -0.01em; }
.ab-rail { position: relative; margin-top: 4px; }
/* edge fades: the paper swallows the rail's ends, hinting at more */
.ab-rail::before,
.ab-rail::after {
    content: "";
    position: absolute;
    top: 0; bottom: 12px;
    width: 48px;
    z-index: 2;
    pointer-events: none;
    opacity: 0;
    transition: opacity 240ms ease;
}
.ab-rail::before { left: 0; background: linear-gradient(90deg, var(--paper), oklch(0.974 0.007 85 / 0)); }
.ab-rail::after { right: 0; background: linear-gradient(270deg, var(--paper), oklch(0.974 0.007 85 / 0)); }
.ab-rail.can-left::before { opacity: 1; }
.ab-rail.can-right::after { opacity: 1; }
.ab-rail-scroller {
    list-style: none;
    display: flex;
    align-items: flex-start;
    gap: 20px;
    overflow-x: auto;
    overscroll-behavior-x: contain;
    scroll-snap-type: x proximity;
    padding: 18px 6px 20px;
    cursor: grab;
    scrollbar-width: thin;
    scrollbar-color: oklch(0.34 0.018 78 / 0.32) oklch(0.34 0.018 78 / 0.08);
}
.ab-rail-scroller.is-dragging { cursor: grabbing; scroll-snap-type: none; user-select: none; }
.ab-rail-scroller:focus-visible { outline: 2px solid var(--fg); outline-offset: 3px; border-radius: 4px; }
.ab-rail-scroller::-webkit-scrollbar { height: 6px; }
.ab-rail-scroller::-webkit-scrollbar-track { background: oklch(0.34 0.018 78 / 0.08); border-radius: 3px; }
.ab-rail-scroller::-webkit-scrollbar-thumb { background: oklch(0.34 0.018 78 / 0.32); border-radius: 3px; }
/* one slip: mono date line, printed dashed rules, serrated tear-off
   bottom, hand-placed tilt variance. The drop-shadow rides the parent
   so it follows the serrated silhouette. NO stamps here: the page's
   six-stamp ceiling stands. */
.rcpt {
    flex: 0 0 auto;
    width: 252px;
    scroll-snap-align: start;
    transform: rotate(var(--tilt, 0deg));
    filter: drop-shadow(0 12px 18px oklch(0.35 0.03 70 / 0.13)) drop-shadow(0 2px 5px oklch(0.35 0.03 70 / 0.1));
}
.rcpt-inner {
    background: linear-gradient(oklch(0.992 0.005 88), oklch(0.981 0.006 86));
    padding: 13px 16px 24px;
    clip-path: polygon(0 0, 100% 0, 100% calc(100% - 6px), 98% 100%, 96% calc(100% - 6px), 94% 100%, 92% calc(100% - 6px), 90% 100%, 88% calc(100% - 6px), 86% 100%, 84% calc(100% - 6px), 82% 100%, 80% calc(100% - 6px), 78% 100%, 76% calc(100% - 6px), 74% 100%, 72% calc(100% - 6px), 70% 100%, 68% calc(100% - 6px), 66% 100%, 64% calc(100% - 6px), 62% 100%, 60% calc(100% - 6px), 58% 100%, 56% calc(100% - 6px), 54% 100%, 52% calc(100% - 6px), 50% 100%, 48% calc(100% - 6px), 46% 100%, 44% calc(100% - 6px), 42% 100%, 40% calc(100% - 6px), 38% 100%, 36% calc(100% - 6px), 34% 100%, 32% calc(100% - 6px), 30% 100%, 28% calc(100% - 6px), 26% 100%, 24% calc(100% - 6px), 22% 100%, 20% calc(100% - 6px), 18% 100%, 16% calc(100% - 6px), 14% 100%, 12% calc(100% - 6px), 10% 100%, 8% calc(100% - 6px), 6% 100%, 4% calc(100% - 6px), 2% 100%, 0% calc(100% - 6px));
}
.rcpt-head {
    display: flex;
    justify-content: space-between;
    align-items: baseline;
    gap: 10px;
    font-family: var(--font-m);
    font-size: 10.5px;
    letter-spacing: 0.05em;
    color: var(--fg-faint);
}
.rcpt-head .t { color: var(--fg-dim); white-space: nowrap; }
.rcpt-rule { border: 0; border-top: 1px dashed oklch(0.34 0.018 78 / 0.3); margin: 10px 0 11px; }
.rcpt b { display: block; font-weight: 600; font-size: 13.5px; line-height: 1.3; color: var(--fg); }
.rcpt .org { font-family: var(--font-m); font-size: 11px; color: var(--fg-dim); margin-top: 3px; }
.rcpt .d { font-weight: 300; font-size: 12.5px; line-height: 1.5; color: var(--fg-dim); margin-top: 9px; }

/* ============================================================
   ACT: RUN ORDER (how it runs)
   Centered opening, no drop line (that scaffold belongs to the
   case files act). Three stations on one spine: call, build,
   handoff. Readable start to finish in under a minute.
   ============================================================ */

.how {
    position: relative;
    border-top: 1px solid var(--line-soft);
    background:
        radial-gradient(64% 32% at 50% 6%, oklch(0.995 0.01 94 / 0.85), transparent 76%),
        var(--paper);
    padding: clamp(64px, 8vw, 100px) clamp(18px, 4vw, 44px) clamp(72px, 9vw, 112px);
    overflow: hidden;
}
.how-inner { position: relative; z-index: 1; max-width: 1060px; margin: 0 auto; }
.how-open { max-width: 760px; margin: 0 auto; text-align: center; }
.how h2 {
    font-weight: 700;
    font-size: clamp(1.8rem, 5vw, 2.9rem);
    line-height: 1.08;
    letter-spacing: -0.025em;
    text-wrap: balance;
}
.how-sub { color: var(--fg-dim); max-width: 50ch; margin: 16px auto 0; text-wrap: balance; }
.how-band { position: relative; margin-top: clamp(40px, 5vw, 64px); }
.how-line {
    position: absolute;
    left: 5px; top: 10px; bottom: 10px;
    width: 1.5px;
    background: linear-gradient(oklch(0.5 0.012 80 / 0.2), oklch(0.5 0.012 80 / 0.75) 15%, oklch(0.5 0.012 80 / 0.75) 85%, oklch(0.5 0.012 80 / 0.2));
    transform-origin: top center;
}
.how-steps { list-style: none; display: grid; gap: 30px; }
.how-step {
    display: grid;
    grid-template-columns: 11px minmax(0, 1fr);
    column-gap: 16px;
    row-gap: 3px;
    align-items: start;
}
.how-step .st-dot { grid-row: 1 / span 3; margin-top: 4px; }
.how-no { font-family: var(--font-m); font-size: 11px; color: var(--fg-faint); }
.how-step h3 { font-weight: 600; font-size: 1.12rem; letter-spacing: -0.01em; margin-top: 2px; }
.how-step p { color: var(--fg-dim); font-size: 0.93rem; margin-top: 8px; max-width: 54ch; }
@media (min-width: 880px) {
    .how-line {
        left: 5px; right: 5px; top: 5px; bottom: auto;
        width: auto; height: 1.5px;
        background: linear-gradient(90deg, oklch(0.5 0.012 80 / 0.2), oklch(0.5 0.012 80 / 0.75) 8%, oklch(0.5 0.012 80 / 0.75) 92%, oklch(0.5 0.012 80 / 0.2));
        transform-origin: left center;
    }
    .how-steps { grid-template-columns: repeat(3, minmax(0, 1fr)); gap: clamp(28px, 4vw, 54px); }
    .how-step { grid-template-columns: minmax(0, 1fr); grid-template-rows: 11px auto auto auto; row-gap: 0; }
    .how-step .st-dot { grid-row: 1; margin-top: 0; }
    .how-no { margin-top: 16px; }
    .how-step h3 { margin-top: 6px; }
    .how-step p { padding-right: 6px; }
}
.how-close {
    text-align: center;
    margin: clamp(44px, 5vw, 64px) auto 0;
    color: var(--fg-faint);
    font-size: 0.95rem;
    max-width: 52ch;
    text-wrap: balance;
}
.how-close a {
    color: var(--fg-dim);
    font-family: var(--font-m);
    font-size: 11.5px;
    text-decoration: none;
    border-bottom: 1px solid var(--line);
    padding-bottom: 2px;
    margin-left: 6px;
    white-space: nowrap;
    transition: color 160ms ease, border-color 160ms ease;
}
.how-close a:hover { color: var(--fg); border-color: var(--fg-dim); }

/* ============================================================
   ACT: CONTACT CLOSE
   The emptied stage: one wide pool of light, the booking slip
   sitting in it. The form IS the booking path, so the submit
   button carries the primary CTA.
   ============================================================ */

.close-act {
    position: relative;
    background:
        radial-gradient(72% 56% at 50% 30%, oklch(0.262 0.014 79 / 0.6), transparent 78%),
        var(--bg0);
    padding: clamp(64px, 9vw, 120px) clamp(18px, 4vw, 44px) clamp(84px, 10vw, 130px);
    overflow: hidden;
}
.ct-inner { position: relative; z-index: 1; max-width: 980px; margin: 0 auto; }
.ct-open { text-align: center; max-width: 760px; margin: 0 auto; }
.close-act h2 {
    font-weight: 700;
    font-size: clamp(2rem, 6vw, 3.3rem);
    line-height: 1.05;
    letter-spacing: -0.028em;
    text-wrap: balance;
}
.ct-sub { color: var(--fg-dim); font-weight: 400; max-width: 52ch; margin: 18px auto 0; text-wrap: balance; }
.ct-grid { display: grid; gap: 44px; margin-top: clamp(48px, 6vw, 72px); }
@media (min-width: 880px) {
    .ct-grid { grid-template-columns: minmax(0, 6fr) minmax(0, 11fr); gap: clamp(48px, 6vw, 84px); align-items: start; }
}
.ct-list { list-style: none; display: grid; gap: 20px; }
.ct-list .k {
    display: block;
    font-size: 11.5px;
    color: var(--fg-faint);
    margin-bottom: 4px;
}
.ct-list a {
    position: relative;
    color: var(--fg);
    font-weight: 400;
    text-decoration: none;
    border-bottom: 1px solid var(--line);
    padding-bottom: 1px;
    transition: border-color 160ms ease;
}
/* 44px effective touch target */
.ct-list a::before { content: ""; position: absolute; inset: -12px -6px; }
.ct-list a:hover { border-color: var(--fg-dim); }
.ct-list .v { color: var(--fg); font-weight: 400; }

/* ---------- the booking slip ----------
   The contact act's prop: a paper slip sitting in the pool of light on
   the dark stage. Two paper file-tabs ride its top edge: "Book a time"
   (Google Calendar embed, lazy-injected on approach) and "Send a
   message" (the existing form, unchanged). Tokens re-resolve to
   ink-on-paper inside the slip only; the stage and aside stay dark.
   No JS: no tabs, the form renders with a plain booking link above. */
.ct-slip {
    position: relative;
    --fg: oklch(0.27 0.014 78);
    --fg-dim: oklch(0.42 0.014 78);
    --fg-faint: oklch(0.55 0.012 78);
    --line: oklch(0.34 0.018 78 / 0.34);
    --line-soft: oklch(0.34 0.018 78 / 0.2);
    background: var(--paper);
    border-radius: 10px;
    box-shadow: 0 34px 80px oklch(0.08 0.008 76 / 0.55), 0 4px 14px oklch(0.08 0.008 76 / 0.4);
    color: var(--fg);
}
.slip-no {
    position: absolute;
    top: 13px; right: 15px;
    font-family: var(--font-m);
    font-size: 11px;
    letter-spacing: 0.09em;
    color: var(--fg-faint);
}
/* paper file-tabs: same folder grammar as the case-file tabs. The
   active tab merges into the slip body; the resting tab sits slightly
   recessed on the rule. */
.ct-tabs {
    display: flex;
    align-items: flex-end;
    gap: 8px;
    padding: 12px 96px 0 clamp(14px, 2.4vw, 22px);
    border-bottom: 1px solid var(--line-soft);
}
.ct-tab {
    appearance: none;
    font-family: var(--font-m);
    font-size: 10.5px;
    letter-spacing: 0.1em;
    text-transform: uppercase;
    color: var(--fg-faint);
    background: oklch(0.955 0.012 85);
    border: 1px solid var(--line-soft);
    border-bottom: 0;
    border-radius: 6px 6px 0 0;
    padding: 15px 16px 14px;
    min-height: 44px;
    margin-bottom: -1px;
    cursor: pointer;
    transition: color 160ms ease, background 160ms ease;
}
.ct-tab:hover { color: var(--fg-dim); }
.ct-tab[aria-selected="true"] {
    color: var(--fg);
    background: var(--paper);
    /* covers the tablist rule so tab and panel read as one sheet */
    box-shadow: 0 1.5px 0 var(--paper);
}
.ct-tab:focus-visible { outline: 2px solid var(--fg); outline-offset: -4px; border-radius: 6px 6px 0 0; }
html.no-js .ct-tabs { display: none; }
/* phones: tighter tabs so both labels hold one line beside SLIP 001 */
@media (max-width: 479px) {
    .ct-tabs { padding: 12px 76px 0 14px; gap: 6px; }
    .ct-tab { padding: 15px 11px 14px; letter-spacing: 0.06em; }
}
.ct-panel { padding: 26px clamp(20px, 3.4vw, 30px) 28px; }
.ct-panel[hidden] { display: none; }
html.no-js .ct-panel-book { display: none; }
/* calendar embed: mount is sized ahead of the lazy inject so the slip
   never jumps; quiet fallback link below */
.ct-cal { min-height: 600px; border-radius: 7px; overflow: hidden; background: oklch(0.99 0.004 88); }
.ct-cal iframe { display: block; width: 100%; border: 0; }
.ct-cal-wait {
    font-family: var(--font-m);
    font-size: 11px;
    color: var(--fg-faint);
    padding: 22px 4px;
}
.ct-cal-link {
    display: inline-block;
    margin-top: 4px;
    padding: 12px 2px;
    font-family: var(--font-m);
    font-size: 11px;
    letter-spacing: 0.02em;
    color: var(--fg-dim);
    text-decoration: underline;
    text-underline-offset: 3px;
    text-decoration-color: var(--fg-faint);
}
.ct-cal-link:hover { color: var(--fg); }
/* no-JS booking path: one plain line above the form */
.ct-nojs-book { font-size: 13px; color: var(--fg-dim); }
.ct-nojs-book a { color: var(--fg); }
html:not(.no-js) .ct-nojs-book { display: none; }
/* the success stamp: thunks onto the slip once the Worker accepts.
   Hidden until .is-received; static mode shows it without animation.
   The settled page composition never includes it. */
.slip-stamp {
    position: absolute;
    z-index: 3;
    top: 40%;
    right: clamp(8px, 5vw, 44px);
    --rot: -4deg;
    opacity: 0;
    pointer-events: none;
}
.ct-form .stamp-inner {
    background: oklch(0.985 0.005 87 / 0.97);
    box-shadow: 0 14px 32px oklch(0.35 0.03 70 / 0.18);
}
.ct-form .stamp-pre,
.ct-form .stamp-small { color: oklch(0.52 0.17 27); }
.ct-form { position: relative; display: grid; gap: 18px; }
.ct-form.is-received .slip-stamp { opacity: 1; }
html.zq-scrub .ct-form.is-received .slip-stamp .stamp-inner { animation: cf-stamp 560ms cubic-bezier(0.16, 1, 0.3, 1) 60ms both; }
html.zq-scrub .ct-form.is-received .slip-stamp .stamp-inner::after { animation: cf-ring 620ms ease-out 340ms both; }
.ct-pair { display: grid; gap: 18px; }
@media (min-width: 640px) { .ct-pair { grid-template-columns: 1fr 1fr; } }
.ct-field label {
    display: block;
    font-size: 12px;
    color: var(--fg-dim);
    margin-bottom: 7px;
}
.ct-field input,
.ct-field textarea {
    width: 100%;
    background: oklch(0.99 0.004 88);
    border: 1px solid var(--line-soft);
    border-radius: 9px;
    padding: 13px 15px;
    color: var(--fg);
    font-family: var(--font-d);
    font-weight: 400;
    font-size: 16px;
    line-height: 1.45;
    transition: border-color 160ms ease;
}
.ct-field input::placeholder,
.ct-field textarea::placeholder { color: var(--fg-faint); opacity: 1; }
.ct-field input:hover,
.ct-field textarea:hover { border-color: var(--line); }
.ct-field input:focus-visible,
.ct-field textarea:focus-visible {
    outline: 2px solid var(--fg);
    outline-offset: 2px;
    border-color: var(--line);
}
.ct-field textarea { min-height: 128px; resize: vertical; }
.cf-turnstile:not(:empty) { margin-top: 2px; }
.ct-send { display: flex; flex-wrap: wrap; align-items: center; gap: 16px; margin-top: 4px; }
button.btn { border: 0; cursor: pointer; font-family: inherit; }
.zq-form-status { font-family: var(--font-m); font-size: 11px; color: var(--fg-dim); }
.zq-form-status.is-error { color: oklch(0.52 0.17 27); }
.zq-form-status.is-success { color: var(--fg); }

/* ---------- deep-act beats (scrub mode only, single-fire) ----------
   Same contract as the case files: every pre-state is scoped to
   :not(.is-in) under .zq-scrub, so noanim / reduced motion / no-JS
   always render the settled composition. */

/* capabilities */
.zq-scrub .cap-open .cap-tag i { transition: transform 680ms cubic-bezier(0.23, 1, 0.32, 1) 80ms; }
.zq-scrub .cap-open:not(.is-in) .cap-tag i { transform: scaleX(0); }
.zq-scrub .cap-open .cap-tag span { transition: opacity 400ms ease; }
.zq-scrub .cap-open:not(.is-in) .cap-tag span { opacity: 0; }
.zq-scrub .cap-open h2 { transition: opacity 560ms ease 150ms, transform 560ms cubic-bezier(0.22, 1, 0.36, 1) 150ms; }
.zq-scrub .cap-open:not(.is-in) h2 { opacity: 0; transform: translateY(18px); }
.zq-scrub .cap-open .cap-sub { transition: opacity 560ms ease 250ms, transform 560ms cubic-bezier(0.22, 1, 0.36, 1) 250ms; }
.zq-scrub .cap-open:not(.is-in) .cap-sub { opacity: 0; transform: translateY(14px); }
.zq-scrub .cap-row::before,
.zq-scrub .cap-row:last-child::after { transition: transform 600ms cubic-bezier(0.23, 1, 0.32, 1); }
.zq-scrub .cap-row:not(.is-in)::before,
.zq-scrub .cap-row:last-child:not(.is-in)::after { transform: scaleX(0); }
.zq-scrub .cap-row .cap-name { transition: opacity 480ms ease 120ms, transform 480ms cubic-bezier(0.22, 1, 0.36, 1) 120ms; }
.zq-scrub .cap-row .cap-spec { transition: opacity 480ms ease 220ms, transform 480ms cubic-bezier(0.22, 1, 0.36, 1) 220ms; }
.zq-scrub .cap-row:not(.is-in) .cap-name,
.zq-scrub .cap-row:not(.is-in) .cap-spec { opacity: 0; transform: translateY(10px); }

/* operator */
.zq-scrub .ab-head h2 { transition: opacity 560ms ease, transform 560ms cubic-bezier(0.22, 1, 0.36, 1); }
.zq-scrub .ab-head:not(.is-in) h2 { opacity: 0; transform: translateY(18px); }
.zq-scrub .ab-head .ab-lede { transition: opacity 520ms ease 110ms, transform 520ms cubic-bezier(0.22, 1, 0.36, 1) 110ms; }
.zq-scrub .ab-head .ab-more { transition: opacity 520ms ease 210ms, transform 520ms cubic-bezier(0.22, 1, 0.36, 1) 210ms; }
.zq-scrub .ab-head .ab-meta { transition: opacity 520ms ease 320ms; }
.zq-scrub .ab-head:not(.is-in) .ab-lede,
.zq-scrub .ab-head:not(.is-in) .ab-more { opacity: 0; transform: translateY(12px); }
.zq-scrub .ab-head:not(.is-in) .ab-meta { opacity: 0; }
.zq-scrub .ab-photo { transition: opacity 900ms ease 80ms, transform 900ms cubic-bezier(0.22, 1, 0.36, 1) 80ms; }
.zq-scrub .ab-photo:not(.is-in) { opacity: 0; transform: scale(1.02); }
.zq-scrub .ab-rail-block h3 { transition: opacity 460ms ease; }
.zq-scrub .ab-rail-block:not(.is-in) h3 { opacity: 0; }
/* slips settle onto the sheet once, hand-placed order; static and
   reduced-motion render them already settled */
.zq-scrub .ab-rail-block .rcpt { transition: opacity 460ms ease var(--d, 0ms), transform 540ms cubic-bezier(0.22, 1, 0.36, 1) var(--d, 0ms); }
.rcpt:nth-child(1) { --tilt: -1.3deg; --d: 90ms; }
.rcpt:nth-child(2) { --tilt: 1.1deg; --d: 165ms; }
.rcpt:nth-child(3) { --tilt: -0.7deg; --d: 240ms; }
.rcpt:nth-child(4) { --tilt: 1.5deg; --d: 315ms; }
.rcpt:nth-child(5) { --tilt: -1.0deg; --d: 390ms; }
.zq-scrub .ab-rail-block:not(.is-in) .rcpt { opacity: 0; transform: rotate(var(--tilt, 0deg)) translateY(14px); }

/* run order */
.zq-scrub .how-open h2 { transition: opacity 560ms ease, transform 560ms cubic-bezier(0.22, 1, 0.36, 1); }
.zq-scrub .how-open:not(.is-in) h2 { opacity: 0; transform: translateY(18px); }
.zq-scrub .how-open .how-sub { transition: opacity 560ms ease 120ms, transform 560ms cubic-bezier(0.22, 1, 0.36, 1) 120ms; }
.zq-scrub .how-open:not(.is-in) .how-sub { opacity: 0; transform: translateY(14px); }
.zq-scrub .how-line { transition: transform 720ms cubic-bezier(0.23, 1, 0.32, 1) 90ms; }
.zq-scrub .how-band:not(.is-in) .how-line { transform: scaleY(0); }
@media (min-width: 880px) { .zq-scrub .how-band:not(.is-in) .how-line { transform: scaleX(0); } }
.zq-scrub .how-step { transition: opacity 480ms ease var(--d, 0ms), transform 480ms cubic-bezier(0.22, 1, 0.36, 1) var(--d, 0ms); }
.how-step:nth-child(1) { --d: 210ms; }
.how-step:nth-child(2) { --d: 320ms; }
.how-step:nth-child(3) { --d: 430ms; }
.zq-scrub .how-band:not(.is-in) .how-step { opacity: 0; transform: translateY(12px); }
.zq-scrub .how-close { transition: opacity 520ms ease 110ms; }
.zq-scrub .how-close:not(.is-in) { opacity: 0; }

/* contact close */
.zq-scrub .ct-open h2 { transition: opacity 560ms ease, transform 560ms cubic-bezier(0.22, 1, 0.36, 1); }
.zq-scrub .ct-open:not(.is-in) h2 { opacity: 0; transform: translateY(18px); }
.zq-scrub .ct-open .ct-sub { transition: opacity 560ms ease 120ms, transform 560ms cubic-bezier(0.22, 1, 0.36, 1) 120ms; }
.zq-scrub .ct-open:not(.is-in) .ct-sub { opacity: 0; transform: translateY(14px); }
.zq-scrub .ct-grid .ct-aside { transition: opacity 520ms ease 100ms, transform 520ms cubic-bezier(0.22, 1, 0.36, 1) 100ms; }
.zq-scrub .ct-grid .ct-slip { transition: opacity 520ms ease 210ms, transform 520ms cubic-bezier(0.22, 1, 0.36, 1) 210ms; }
.zq-scrub .ct-grid:not(.is-in) .ct-aside,
.zq-scrub .ct-grid:not(.is-in) .ct-slip { opacity: 0; transform: translateY(14px); }

/* ---------- footer ---------- */

footer {
    border-top: 1px solid var(--line-soft);
    padding: 34px clamp(18px, 4vw, 44px) 40px;
    display: grid;
    gap: 22px;
    color: var(--fg-faint);
    font-size: 12.5px;
}
.foot-top,
.foot-bottom {
    display: flex;
    flex-wrap: wrap;
    gap: 14px 24px;
    align-items: center;
    justify-content: space-between;
}
.foot-tag { color: var(--fg-faint); }

/* ============================================================
   SCRUB MODE OVERRIDES
   Only when JS is on and motion allowed. Base layout above is
   the static composed scene (noanim / reduced motion / no-JS).
   ============================================================ */

/* pre-adjustment travel restored: the x0.72 speedup stays reverted
   inside the hero scrub (below-fold acts keep their tightened pacing) */
.zq-scrub .scrub { height: 700vh; }
.zq-scrub .stage {
    position: sticky;
    top: 0;
    height: 100vh;
    height: 100dvh;
    padding: 0;
}
.zq-scrub .debris {
    display: block;
    position: absolute; inset: 0;
    z-index: 10;
    perspective: 1150px;
}
.zq-scrub .scene {
    position: absolute; inset: 0;
    transform-style: preserve-3d;
    will-change: transform;
}
.zq-scrub .machine { display: block; position: absolute; inset: 0; z-index: 12; will-change: opacity; }
.zq-scrub .hero {
    position: absolute;
    z-index: 30;
    left: 50%;
    top: 30%;
    transform: translate(-50%, -50%);
    width: min(880px, calc(100vw - 36px));
    margin: 0;
    will-change: transform, opacity;
}
.zq-scrub .result {
    position: absolute;
    left: 50%;
    margin: 0;
    width: min(640px, calc(100vw - 34px));
    transform: translateX(-50%);
    /* scale (short-viewport fit) grows downward from the ledger top */
    transform-origin: 50% 0;
}
.zq-scrub .cta-beat {
    position: absolute;
    left: 50%;
    bottom: 7.5%;
    margin: 0;
    width: min(560px, calc(100vw - 36px));
    transform: translateX(-50%);
    opacity: 0;
}
.zq-scrub .ledger { opacity: 0; }
.zq-scrub .rows li { opacity: 0; }
/* hero stamps only: JS drives these. Case-file stamps carry their own
   .sz scoping; the slip stamp its own .is-received state. */
.zq-scrub .result .stamp-inner { opacity: 0; }
.zq-scrub .spine-line { transform: scaleX(0); }
.zq-scrub .station { opacity: 0; }

.zq-scrub .cue {
    display: grid;
    justify-items: center;
    gap: 10px;
    position: absolute;
    z-index: 30;
    left: 50%;
    bottom: 62px;
    transform: translateX(-50%);
    font-size: 11px;
    letter-spacing: 0.04em;
    color: var(--fg-faint);
    white-space: nowrap;
    will-change: opacity;
}
@media (min-width: 700px) { .zq-scrub .cue { font-size: 12px; } }
.cue i { display: block; width: 1px; height: 42px; background: linear-gradient(var(--fg-faint), transparent); }
/* quiet provenance caption inside the cue: one grid row under the
   descender line, fades with the cue as one group (no bespoke JS) */
.cue .cue-note {
    white-space: normal;
    text-align: center;
    max-width: min(80vw, 340px);
}

.zq-scrub .rail {
    position: fixed;
    z-index: 70;
    right: 12px;
    top: 50%;
    transform: translateY(-50%);
    list-style: none;
    display: grid;
    gap: 18px;
    padding: 16px 14px;
    font-family: var(--font-m);
    font-size: 9.5px;
    letter-spacing: 0.05em;
    color: var(--fg-dim);
    pointer-events: none;
    transition: color 360ms ease;
}
/* per-item halo while the rail rides a seam ramp: a feathered
   text-shadow keeps markers legible through the mid-greys with no
   rounded-card read; the tint follows the act flip */
.rail.in-seam li { text-shadow: 0 1px 12px oklch(0.15 0.010 76 / 0.9), 0 0 24px oklch(0.15 0.010 76 / 0.7); }
.rail.is-paper.in-seam li { text-shadow: 0 1px 12px oklch(0.977 0.007 85 / 0.95), 0 0 24px oklch(0.977 0.007 85 / 0.8); }
/* one live grammar for all nine markers: the tick fills out and gives a
   single pulse whenever a marker takes the light, hero and act alike */
.rail li { display: flex; align-items: center; gap: 9px; opacity: 0.7; transition: opacity 240ms ease, color 240ms ease; }
.rail li::before {
    content: "";
    width: 14px; height: 1px;
    background: currentColor;
    transform-origin: right center;
    transition: width 260ms cubic-bezier(0.22, 1, 0.36, 1);
}
.rail li.on { opacity: 1; color: var(--ink); }
.rail li.on::before { width: 24px; height: 2px; animation: rail-live 620ms cubic-bezier(0.16, 1, 0.3, 1); }
@keyframes rail-live {
    0% { transform: scaleX(0.25); box-shadow: 0 0 0 currentColor; }
    45% { box-shadow: 0 0 9px currentColor; }
    100% { transform: scaleX(1); box-shadow: 0 0 0 currentColor; }
}
/* act-aware ink: over the paper acts the resting markers switch to
   warm graphite so they stay legible on the light field */
.rail.is-paper { color: oklch(0.44 0.014 78); }
.rail li[data-act="work"] { margin-top: 14px; }
@media (max-width: 899px) { .zq-scrub .rail { display: none; } }

/* comp-only sizing bump for wide viewports */
@media (min-width: 700px) {
    .piece { font-size: 11.5px; }
    .p-card, .p-file { width: 225px; }
    .p-sheet .pc { width: 268px; }
}

/* ---------- short-viewport recompose (640-820px tall) ----------
   Narrow-and-short screens trade size for clearance; the wide-short
   block below (Zaid's 1366x690 laptop, the PRIMARY calibration
   viewport) restores the monumental composition instead. The
   scale/stagger of the Proof beat itself is computed per-viewport
   in layout(). */
@media (max-height: 820px) {
    .zq-scrub h1 { font-size: clamp(2.4rem, 7vh, 4.5rem); }
    .zq-scrub .hero { top: 33%; }
    .zq-scrub .hero .sub { margin-top: 14px; font-size: clamp(0.95rem, 2vh, 1.08rem); }
    .zq-scrub .ledger-head { padding: 10px 16px; }
    .zq-scrub .rows li { padding: 7px 16px; }
    .zq-scrub .stamp-big { font-size: clamp(1.2rem, 3.4vh, 1.8rem); }
    .zq-scrub .stamp-inner { padding: 8px 15px 10px; }
    .zq-scrub .stamp-a { top: -44px; }
    .zq-scrub .stamp-b { bottom: -32px; }
    .zq-scrub .cta-line { font-size: 0.98rem; margin-bottom: 12px; }
    .zq-scrub .cta-beat .btn { padding: 13px 26px; font-size: 0.98rem; }
    /* visual gap ~8px (13px hit padding rides inside) so the skip line
       stays fully on stage at phone-short heights */
    .zq-scrub .cta-sec { margin-top: -5px; }
}

/* ---------- wide-short: the owner's laptop lid (1366x690-ish) ----------
   The main experience, not a fallback. The headline is monumental
   again (72-84px band for the two-line setting), the ledger keeps its
   full row rhythm, and the stamps reflow to the ledger's flanks so the
   Proof beat gives up zero height to overhangs: presence over shrink.
   layout() mirrors this media test for the fit-band extents. */
@media (min-width: 1340px) and (max-height: 820px) {
    .zq-scrub h1 { font-size: clamp(4.5rem, 11.6vh, 5.3rem); }
    .zq-scrub .hero { top: 45%; }
    .zq-scrub .hero .sub { margin-top: 20px; font-size: 1.1rem; }
    .zq-scrub .ledger-head { padding: 12px 18px; }
    .zq-scrub .rows li { padding: 8px 18px; }
    .zq-scrub .stamp-big { font-size: clamp(1.5rem, 4.2vh, 2rem); }
    .zq-scrub .stamp-inner { padding: 9px 18px 11px; }
    .zq-scrub .cta-line { font-size: 1.02rem; margin-bottom: 14px; }
    .zq-scrub .cta-beat .btn { padding: 14px 30px; font-size: 1rem; }
    .zq-scrub .cta-sec { margin-top: 0; }
}

/* ---------- stamp A never buries the ledger header ----------
   Below 1340px there is no room to flank a full-size stamp (it needs
   ~350px of margin), so every viewport under 1340 gets the apron: the
   head zone grows ~30px and the stamp rides above it. At >=1340 the
   stamps flank the ledger at ANY height, so tall desktops stop burying
   the header too. layout() mirrors the 1340 test. */
@media (min-width: 700px) and (max-width: 1339px) {
    .ledger-head, .zq-scrub .ledger-head { padding-top: 48px; }
    .stamp-a, .zq-scrub .stamp-a { top: -72px; }
    /* static flow only (scrub positions the result absolutely): the
       tilted stamp's corner reaches ~97px above the ledger, so the
       composed scene opens more headroom under the hero sub */
    .result { margin-top: 104px; }
}
@media (min-width: 1340px) {
    .zq-scrub .stamp-a { top: 4%; left: auto; right: calc(100% - 16px); }
    .zq-scrub .stamp-b { bottom: 3%; right: -150px; }
    /* static composition (noanim / reduced motion / no-JS) has no
       flank: it takes the apron instead, same contract */
    html.zq-static .ledger-head,
    html.no-js .ledger-head { padding-top: 48px; }
    html.zq-static .stamp-a,
    html.no-js .stamp-a { top: -72px; }
    html.zq-static .result,
    html.no-js .result { margin-top: 104px; }
}

/* ---------- mobile Proof niggle: stamp B off ledger row 8 ----------
   The last row grows a paper apron and the stamp sits in it: the
   stamped-paper overlap stays, the row text stays readable. Placed
   after the compact blocks so it wins the cascade at phone-short.
   Stamp A gets the same apron treatment at the top: the head zone
   grows ~30px so "Tuesday, processed" is never buried on phones. */
@media (max-width: 699px) {
    .ledger-head, .zq-scrub .ledger-head { padding-top: 43px; }
    .stamp-a, .zq-scrub .stamp-a { top: -68px; left: -6px; right: auto; }
    .rows li:last-child, .zq-scrub .rows li:last-child { padding-bottom: 64px; }
    .stamp-b, .zq-scrub .stamp-b { bottom: -30px; right: 2px; }
    .result { margin-top: 108px; }
}