/* ==========================================================================
   STACKWRIGHT — main.css
   Dual theme: dark ("Nightyard") default, light ("Dayshift") opt-in.
   Signature device: "The Junction" — a copper spine that forks into two
   rails, mirroring the firm's two client tracks.
   ========================================================================== */

/* ---------------------------------------------------------------- TOKENS */
:root {
    /* Surfaces — dark is the default theme */
    --bg: #0A0E13;
    --bg-elevated: #111721;
    --bg-sunken: #070A0E;
    --hairline: rgba(240, 168, 104, 0.12);
    --hairline-strong: rgba(240, 168, 104, 0.24);

    /* Copper — the single accent. Discipline: vary opacity, not hue. */
    --accent: #D07A45;
    --accent-lum: #F2A36B;
    --accent-deep: #8C4A22;
    --accent-rgb: 208, 122, 69;
    --accent-lum-rgb: 242, 163, 107;

    /* Ink */
    --ink: #F4EFEA;
    --body: rgba(255, 255, 255, 0.66);
    --muted: rgba(255, 255, 255, 0.42);
    --faint: rgba(255, 255, 255, 0.20);

    /* Diagram roles — restyled SVGs read only from these */
    --dg-surface: #131A24;
    --dg-surface-accent: rgba(208, 122, 69, 0.10);
    --dg-surface-key: rgba(242, 163, 107, 0.14);
    --dg-stroke: rgba(240, 168, 104, 0.34);
    --dg-stroke-key: var(--accent-lum);
    --dg-title: #F4EFEA;
    --dg-muted: rgba(255, 255, 255, 0.52);
    --dg-arrow: rgba(240, 168, 104, 0.55);
    --dg-label: var(--accent-lum);

    /* Type */
    --font-display: 'Spectral', Georgia, serif;
    --font-body: 'Schibsted Grotesk', system-ui, -apple-system, sans-serif;
    --font-mono: 'IBM Plex Mono', ui-monospace, monospace;

    /* Space — 4px grid */
    --s-1: 0.25rem;
    --s-2: 0.5rem;
    --s-3: 0.75rem;
    --s-4: 1rem;
    --s-6: 1.5rem;
    --s-8: 2rem;
    --s-12: 3rem;
    --s-16: 4rem;
    --s-24: 6rem;
    --s-32: 8rem;
    --s-40: 10rem;

    --container: 1200px;
    --nav-h: 76px;

    /* Motion — no bounce, ever */
    --t-fast: 0.2s cubic-bezier(0.4, 0, 0.2, 1);
    --t-base: 0.3s cubic-bezier(0.22, 1, 0.36, 1);
    --t-slow: 0.7s cubic-bezier(0.22, 1, 0.36, 1);
    --ease-out-expo: cubic-bezier(0.16, 1, 0.3, 1);
}

[data-theme="light"] {
    --bg: #F7F6F4;
    --bg-elevated: #FFFFFF;
    --bg-sunken: #EFEDE9;
    --hairline: #E4E1DC;
    --hairline-strong: #D4CFC7;

    --accent: #B45F2E;
    --accent-lum: #8C4A22;
    --accent-deep: #6E3717;
    --accent-rgb: 180, 95, 46;
    --accent-lum-rgb: 140, 74, 34;

    --ink: #14100C;
    --body: #5A544C;
    --muted: #857E74;
    --faint: rgba(20, 16, 12, 0.16);

    --dg-surface: #FFFFFF;
    --dg-surface-accent: rgba(180, 95, 46, 0.07);
    --dg-surface-key: rgba(140, 74, 34, 0.10);
    --dg-stroke: rgba(140, 74, 34, 0.30);
    --dg-stroke-key: #8C4A22;
    --dg-title: #14100C;
    --dg-muted: #6B655C;
    --dg-arrow: rgba(140, 74, 34, 0.50);
    --dg-label: #8C4A22;
}

/* --------------------------------------------------------------- RESET */
*, *::before, *::after { box-sizing: border-box; margin: 0; padding: 0; }

html { scroll-behavior: smooth; -webkit-text-size-adjust: 100%; }

body {
    background: var(--bg);
    color: var(--body);
    font-family: var(--font-body);
    font-size: 1rem;
    line-height: 1.65;
    -webkit-font-smoothing: antialiased;
    -moz-osx-font-smoothing: grayscale;
    overflow-x: hidden;
    transition: background-color var(--t-base), color var(--t-base);
}

/* Suppress transitions during first paint + theme swap-in */
.no-transition, .no-transition * { transition: none !important; }

/* Film grain — a fixed noise wash over everything. This is what stops a flat
   digital cream/void from reading as "web page"; it reads as paper/film. */
body::after {
    content: '';
    position: fixed;
    inset: 0;
    z-index: 9990;
    pointer-events: none;
    background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='180' height='180'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='0.82' numOctaves='3' stitchTiles='stitch'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23n)'/%3E%3C/svg%3E");
    background-repeat: repeat;
    opacity: 0.05;
    mix-blend-mode: overlay;
}
[data-theme="light"] body::after { opacity: 0.035; mix-blend-mode: multiply; }

img, svg { max-width: 100%; display: block; }
a { color: inherit; text-decoration: none; }
button { font: inherit; color: inherit; background: none; border: none; cursor: pointer; }

::selection { background: rgba(var(--accent-rgb), 0.28); color: var(--ink); }

:focus-visible {
    outline: 2px solid var(--accent-lum);
    outline-offset: 3px;
    border-radius: 2px;
}

.container {
    width: 100%;
    max-width: var(--container);
    margin-inline: auto;
    padding-inline: var(--s-6);
}

.skip-link {
    position: absolute;
    left: -9999px;
    top: var(--s-2);
    z-index: 200;
    background: var(--accent);
    color: #0A0E13;
    padding: var(--s-2) var(--s-4);
    border-radius: 3px;
    font-family: var(--font-mono);
    font-size: 0.75rem;
}
.skip-link:focus { left: var(--s-4); }

/* ----------------------------------------------------------- TYPOGRAPHY */
h1, h2, h3, h4 {
    font-family: var(--font-display);
    font-weight: 300;
    color: var(--ink);
    line-height: 1.12;
    letter-spacing: -0.015em;
}

/* Editorial scale: display type runs big, light, and tight — hierarchy comes
   from size and space, never from weight. */
h1 { font-size: clamp(2.9rem, 6.8vw, 6.1rem); line-height: 0.98; letter-spacing: -0.028em; }
h2 { font-size: clamp(2.1rem, 4.5vw, 3.5rem); line-height: 1.03; letter-spacing: -0.022em; }
h3 { font-size: clamp(1.35rem, 2.2vw, 1.85rem); }
h4 { font-size: 1.1rem; font-weight: 400; }

.display-em {
    font-style: italic;
    color: var(--accent-lum);
    font-weight: 300;
}

p { max-width: 68ch; }
strong { color: var(--ink); font-weight: 500; }

/* Mono = structure. All eyebrows, labels, figures, nav. */
.eyebrow {
    font-family: var(--font-mono);
    font-size: 0.7rem;
    font-weight: 500;
    letter-spacing: 0.24em;
    text-transform: uppercase;
    color: var(--accent);
    display: block;
}

.eyebrow--muted { color: var(--muted); }

.lede {
    font-size: clamp(1.05rem, 1.6vw, 1.3rem);
    color: var(--body);
    line-height: 1.6;
}

.mono { font-family: var(--font-mono); font-variant-numeric: tabular-nums; }

/* ------------------------------------------------------------------ NAV */
.nav {
    position: fixed;
    inset: 0 0 auto 0;
    height: var(--nav-h);
    z-index: 100;
    display: flex;
    align-items: center;
    background: color-mix(in srgb, var(--bg) 82%, transparent);
    backdrop-filter: blur(14px);
    -webkit-backdrop-filter: blur(14px);
    border-bottom: 1px solid transparent;
    transition: border-color var(--t-base), background-color var(--t-base);
}
.nav.is-scrolled { border-bottom-color: var(--hairline); }

.nav__inner {
    width: 100%;
    max-width: var(--container);
    margin-inline: auto;
    padding-inline: var(--s-6);
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: var(--s-6);
}

/* Wordmark — glyph (three stepped strokes) + two-tone name */
.wordmark { display: flex; align-items: center; gap: 0.6rem; flex-shrink: 0; }

.wordmark__glyph { width: 22px; height: 22px; overflow: visible; }
.wordmark__glyph rect { fill: var(--accent); transition: fill var(--t-base), transform var(--t-base); }
.wordmark__glyph rect:nth-child(2) { fill: var(--accent-lum); }
.wordmark:hover .wordmark__glyph rect:nth-child(1) { transform: translateX(-1.5px); }
.wordmark:hover .wordmark__glyph rect:nth-child(3) { transform: translateX(1.5px); }

.wordmark__text {
    font-family: var(--font-display);
    font-size: 1.32rem;
    font-weight: 400;
    letter-spacing: -0.01em;
    color: var(--ink);
    white-space: nowrap;
}
.wordmark__text b { font-weight: 400; color: var(--accent); }

.nav__links { display: flex; align-items: center; gap: var(--s-6); }

.nav__link {
    font-family: var(--font-mono);
    font-size: 0.72rem;
    letter-spacing: 0.16em;
    text-transform: uppercase;
    color: var(--muted);
    position: relative;
    padding-block: var(--s-2);
    transition: color var(--t-fast);
    white-space: nowrap;
}
.nav__link::after {
    content: '';
    position: absolute;
    left: 0; bottom: 2px;
    width: 100%; height: 1px;
    background: var(--accent);
    transform: scaleX(0);
    transform-origin: left;
    transition: transform var(--t-base);
}
.nav__link:hover { color: var(--ink); }
.nav__link:hover::after { transform: scaleX(1); }
.nav__link[aria-current="page"] { color: var(--ink); }
.nav__link[aria-current="page"]::after { transform: scaleX(1); background: var(--accent-lum); }

.nav__cta {
    color: var(--ink);
    border: 1px solid var(--hairline-strong);
    border-radius: 2px;
    padding: 0.5rem 0.95rem;
}
.nav__cta::after { display: none; }
.nav__cta:hover { background: rgba(var(--accent-rgb), 0.12); border-color: var(--accent); }

.theme-toggle {
    width: 38px; height: 38px;
    display: grid; place-items: center;
    border: 1px solid var(--hairline);
    border-radius: 50%;
    color: var(--muted);
    transition: color var(--t-fast), border-color var(--t-fast), background-color var(--t-fast);
    flex-shrink: 0;
}
.theme-toggle:hover { color: var(--accent-lum); border-color: var(--accent); background: rgba(var(--accent-rgb), 0.08); }
.theme-icon { transition: opacity var(--t-base), transform var(--t-base); }
.theme-icon-moon { display: none; }
[data-theme="light"] .theme-icon-sun { display: none; }
[data-theme="light"] .theme-icon-moon { display: block; }

/* Mobile nav */
.nav__toggle { display: none; width: 38px; height: 38px; place-items: center; color: var(--ink); }

@media (max-width: 860px) {
    .nav__toggle { display: grid; }
    .nav__links {
        position: fixed;
        inset: var(--nav-h) 0 auto 0;
        flex-direction: column;
        align-items: stretch;
        gap: 0;
        background: var(--bg-elevated);
        border-bottom: 1px solid var(--hairline);
        padding: var(--s-2) var(--s-6) var(--s-6);
        transform: translateY(-12px);
        opacity: 0;
        pointer-events: none;
        transition: opacity var(--t-base), transform var(--t-base);
    }
    .nav__links.is-open { transform: translateY(0); opacity: 1; pointer-events: auto; }
    .nav__link { padding-block: var(--s-4); border-bottom: 1px solid var(--hairline); font-size: 0.8rem; }
    .nav__link::after { display: none; }
    .nav__cta { border: 1px solid var(--accent); text-align: center; margin-top: var(--s-4); }
    .nav__theme-wrap { display: flex; justify-content: flex-start; padding-top: var(--s-4); }
}

@media (min-width: 861px) {
    .nav__theme-wrap { display: contents; }
}

/* --------------------------------------------------------------- LAYOUT */
main { padding-top: var(--nav-h); }

.section { padding-block: clamp(var(--s-24), 12vw, var(--s-32)); position: relative; }
.section--tight { padding-block: clamp(var(--s-16), 8vw, var(--s-24)); }
.section--sunken { background: var(--bg-sunken); }

.section-head { max-width: 760px; margin-bottom: var(--s-16); position: relative; }
.section-head .eyebrow {
    margin-bottom: var(--s-6);
    display: flex;
    align-items: center;
    gap: var(--s-4);
}
/* The rule extends from the label to the edge of the measure — print register. */
.section-head .eyebrow::after {
    content: '';
    flex: 1;
    height: 1px;
    background: var(--hairline-strong);
}
.section-head h2 { margin-bottom: var(--s-6); }

/* Giant ghost numeral in the margin — auto-numbered per page, so it can
   never desync from the content. */
body { counter-reset: sec; }
.section-head::before {
    counter-increment: sec;
    content: counter(sec, decimal-leading-zero);
    position: absolute;
    left: calc(100% + var(--s-12));
    top: -0.08em;
    font-family: var(--font-display);
    font-size: clamp(4.5rem, 9vw, 8rem);
    font-weight: 300;
    line-height: 1;
    color: color-mix(in srgb, var(--ink) 7%, transparent);
    font-variant-numeric: tabular-nums;
    pointer-events: none;
}
@media (max-width: 1120px) { .section-head::before { display: none; } }

/* ------------------------------------------------- THE JUNCTION (SPINE) */
/* A copper line running the page, drawn on scroll. Forks into two rails at
   the track split — the firm's structure rendered as its ornament. */
.spine {
    position: absolute;
    left: 50%;
    transform: translateX(-50%);
    width: 1px;
    background: linear-gradient(180deg, transparent, var(--hairline-strong) 12%, var(--hairline-strong) 88%, transparent);
    top: 0; bottom: 0;
    pointer-events: none;
    z-index: 0;
}

.spine-svg { width: 100%; height: 100%; overflow: visible; }
.spine-path {
    fill: none;
    stroke: var(--accent);
    stroke-width: 1.5;
    stroke-linecap: round;
    stroke-dasharray: var(--dash, 1200);
    stroke-dashoffset: var(--dash, 1200);
    transition: stroke-dashoffset 1.2s var(--ease-out-expo);
    opacity: 0.55;
}
.spine-path.is-drawn { stroke-dashoffset: 0; }
.spine-path--lum { stroke: var(--accent-lum); }

.waypoint {
    display: flex;
    align-items: center;
    gap: var(--s-4);
    font-family: var(--font-mono);
    font-size: 0.7rem;
    letter-spacing: 0.24em;
    color: var(--muted);
    text-transform: uppercase;
}
.waypoint::before {
    content: '';
    width: 7px; height: 7px;
    border-radius: 50%;
    background: var(--accent);
    box-shadow: 0 0 0 4px rgba(var(--accent-rgb), 0.14);
    flex-shrink: 0;
}

/* ------------------------------------------------------- CORNER TICKS */
/* The card language: instead of a full drawn box, four small copper
   brackets mark the corners — the technical-drawing register. The old
   1px border drops to a whisper so the ticks carry the frame. */
.track, .work-card, .svc, .person, .case__diagram, .crosslink, .stats {
    position: relative;
    border-color: color-mix(in srgb, var(--hairline) 55%, transparent);
    border-radius: 0;
}

.track::after, .work-card::after, .svc::after, .person::after,
.case__diagram::after, .crosslink::after, .stats::after {
    content: '';
    position: absolute;
    inset: 0;
    pointer-events: none;
    --ts: 14px;                                   /* tick length */
    --tw: 1.5px;                                  /* tick weight */
    --tc: rgba(var(--accent-rgb), 0.75);          /* tick colour */
    background-image:
        linear-gradient(var(--tc), var(--tc)),
        linear-gradient(var(--tc), var(--tc)),
        linear-gradient(var(--tc), var(--tc)),
        linear-gradient(var(--tc), var(--tc)),
        linear-gradient(var(--tc), var(--tc)),
        linear-gradient(var(--tc), var(--tc)),
        linear-gradient(var(--tc), var(--tc)),
        linear-gradient(var(--tc), var(--tc));
    background-repeat: no-repeat;
    background-size:
        var(--ts) var(--tw), var(--tw) var(--ts),
        var(--ts) var(--tw), var(--tw) var(--ts),
        var(--ts) var(--tw), var(--tw) var(--ts),
        var(--ts) var(--tw), var(--tw) var(--ts);
    background-position:
        top left, top left,
        top right, top right,
        bottom left, bottom left,
        bottom right, bottom right;
    transition: opacity var(--t-base);
}

/* Hover: the frame commits — ticks brighten instead of a border colour swap. */
.track:hover::after, .work-card:hover::after, .svc:hover::after, .person:hover::after {
    --tc: var(--accent-lum);
}
.track:hover, .work-card:hover, .svc:hover, .person:hover {
    border-color: color-mix(in srgb, var(--hairline) 55%, transparent);
}
.track.is-active { border-color: color-mix(in srgb, var(--hairline) 55%, transparent); }
.track.is-active::after { --tc: var(--accent-lum); }

/* ------------------------------------------------------------ REVEALS */
[data-reveal] {
    opacity: 0;
    transform: translateY(22px);
    transition: opacity var(--t-slow), transform var(--t-slow);
}
[data-reveal].revealed { opacity: 1; transform: none; }
[data-reveal][data-delay="1"] { transition-delay: 0.08s; }
[data-reveal][data-delay="2"] { transition-delay: 0.16s; }
[data-reveal][data-delay="3"] { transition-delay: 0.24s; }

/* --------------------------------------------------------------- HERO */
.hero {
    min-height: calc(100svh - var(--nav-h));
    display: flex;
    align-items: center;
    position: relative;
    padding-block: var(--s-24) var(--s-16);
    overflow: hidden;
}

.hero__glow {
    position: absolute;
    top: -18%; left: 50%;
    transform: translateX(-50%);
    width: min(1000px, 130vw);
    aspect-ratio: 1;
    background: radial-gradient(circle, rgba(var(--accent-rgb), 0.10) 0%, transparent 68%);
    pointer-events: none;
    z-index: 0;
}
[data-theme="light"] .hero__glow { background: radial-gradient(circle, rgba(var(--accent-rgb), 0.08) 0%, transparent 66%); }

/* Second glow, seated behind the drafting scene on the right */
.hero__glow--art {
    top: 8%; left: auto; right: -12%;
    transform: none;
    width: min(820px, 70vw);
    background: radial-gradient(circle, rgba(var(--accent-rgb), 0.12) 0%, transparent 62%);
}
[data-theme="light"] .hero__glow--art { background: radial-gradient(circle, rgba(var(--accent-rgb), 0.09) 0%, transparent 60%); }

/* Drafting-table grid — full-bleed, fading out toward the edges so the copy
   sits on calm ground while the scene sits on graph paper. Drifts slowly. */
.hero__grid {
    position: absolute;
    inset: 0;
    background-image:
        linear-gradient(rgba(var(--accent-rgb), var(--grid-a, 0.08)) 1px, transparent 1px),
        linear-gradient(90deg, rgba(var(--accent-rgb), var(--grid-a, 0.08)) 1px, transparent 1px);
    background-size: 56px 56px;
    -webkit-mask-image: radial-gradient(ellipse 78% 82% at 66% 44%, #000 26%, transparent 76%);
    mask-image: radial-gradient(ellipse 78% 82% at 66% 44%, #000 26%, transparent 76%);
    animation: ha-grid-drift 80s linear infinite;
    pointer-events: none;
    z-index: 0;
}
[data-theme="light"] .hero__grid { --grid-a: 0.10; }
@keyframes ha-grid-drift { to { background-position: 56px 56px; } }

/* The drafting scene — an exploded axonometric of the four-layer stack.
   Sits right of the copy on desktop; hidden below 1100px where it would
   collide with the text. Follows the cursor gently (see 7e in main.js). */
.hero__art {
    position: absolute;
    top: 50%;
    right: 0.5%;
    transform: translate3d(var(--hpx, 0px), calc(-50% + var(--hpy, 0px)), 0);
    transition: transform 0.7s var(--ease-out-expo);
    width: min(640px, 47vw);
    height: auto;
    pointer-events: none;
    z-index: 0;
}
@media (max-width: 1100px) { .hero__art { display: none; } }

/* Compass arcs — counter-parallax for depth, near-still rotation for life */
.ha-arcs {
    transform: translate3d(calc(var(--hpx, 0px) * -0.8), calc(var(--hpy, 0px) * -0.8), 0);
    transition: transform 0.9s var(--ease-out-expo);
}
.ha-arc {
    fill: none;
    stroke: rgba(var(--accent-rgb), 0.30);
    stroke-width: 1;
    stroke-dasharray: 2 10;
    transform-box: fill-box;
    transform-origin: center;
}
.ha-arc--1 { animation: ha-rotate 110s linear infinite; }
.ha-arc--2 { stroke: rgba(var(--accent-rgb), 0.19); stroke-dasharray: 2 14; animation: ha-rotate 160s linear infinite reverse; }
@keyframes ha-rotate { to { transform: rotate(360deg); } }

/* The whole structure breathes — a slow levitation */
.ha-float { animation: ha-float 11s ease-in-out infinite alternate; }
@keyframes ha-float {
    from { transform: translateY(5px); }
    to   { transform: translateY(-7px); }
}

/* Signal spine: draws itself upward once, then carries pulses forever */
.ha-spine {
    stroke: var(--dg-arrow);
    stroke-width: 1;
    opacity: 0.55;
    stroke-dasharray: 614;
    stroke-dashoffset: 614;
    animation: ha-draw 1.5s var(--ease-out-expo) 0.35s forwards;
}
@keyframes ha-draw { to { stroke-dashoffset: 0; } }

.ha-pulse {
    fill: var(--accent-lum);
    transform-box: fill-box;
    opacity: 0;
    animation: ha-pulse 6.4s linear infinite;
    animation-delay: 2s;
}
.ha-pulse--2 { animation-delay: 5.2s; }
@keyframes ha-pulse {
    0%   { opacity: 0;   transform: translateY(0); }
    6%   { opacity: 0.9; }
    86%  { opacity: 0.9; }
    100% { opacity: 0;   transform: translateY(-614px); }
}

/* Plates — wireframe isometric slabs with a whisper of copper in the faces */
.iso-top {
    fill: var(--dg-surface-accent);
    stroke: var(--dg-stroke);
    stroke-width: 1;
}
.iso-side { stroke: var(--dg-stroke); stroke-width: 1; }
.iso-side--l { fill: rgba(var(--accent-rgb), 0.07); }
.iso-side--r { fill: rgba(var(--accent-rgb), 0.04); }
.iso-top--key {
    fill: var(--dg-surface-key);
    stroke: var(--dg-stroke-key);
    stroke-width: 1.2;
}
.iso-side--key { stroke: var(--dg-stroke-key); }

.ha-beacon-dot { fill: var(--accent-lum); }
.ha-beacon-ring {
    stroke: var(--accent-lum);
    fill: none;
    transform-box: fill-box;
    transform-origin: center;
    opacity: 0;
    animation: ha-ring 2.8s ease-out infinite;
    animation-delay: 1.9s;
}
@keyframes ha-ring {
    0%   { transform: scale(0.35); opacity: 0.8; }
    70%  { opacity: 0; }
    100% { transform: scale(3.1); opacity: 0; }
}

.ha-lead { stroke: var(--dg-stroke); stroke-width: 1; }
.ha-num {
    fill: var(--accent);
    font-family: var(--font-mono);
    font-size: 13px;
    font-weight: 500;
    letter-spacing: 0.1em;
}
.ha-num--key { fill: var(--accent-lum); }
.ha-name {
    fill: var(--dg-title);
    font-family: var(--font-mono);
    font-size: 12px;
    font-weight: 500;
    letter-spacing: 0.22em;
}
.ha-name--key { fill: var(--dg-title); }
.ha-sub {
    fill: var(--dg-muted);
    font-family: var(--font-body);
    font-size: 11px;
}
.ha-dimline { stroke: var(--dg-stroke); stroke-width: 1; }
.ha-dimtext {
    fill: var(--muted);
    font-family: var(--font-mono);
    font-size: 8.5px;
    letter-spacing: 0.26em;
}

/* Laid bottom-up: 01 lands first, then each layer settles on top of it.
   Callouts fade in after their plates; the dimension line arrives last. */
.plate {
    opacity: 0;
    transform: translateY(20px);
    transform-box: fill-box;
    animation: slab-lay 0.8s var(--ease-out-expo) forwards;
    animation-delay: calc(0.3s + var(--pl-i, 0) * 0.16s);
}
.ha-callout {
    opacity: 0;
    animation: slab-fade 0.8s ease-out forwards;
    animation-delay: calc(0.95s + var(--pl-i, 0) * 0.14s);
}
.ha-dim {
    opacity: 0;
    animation: slab-fade 0.8s ease-out forwards;
    animation-delay: 1.5s;
}
@keyframes slab-lay { to { opacity: 1; transform: translateY(0); } }
@keyframes slab-fade { to { opacity: 1; } }

@media (prefers-reduced-motion: reduce) {
    .plate, .ha-callout, .ha-dim { animation: none; opacity: 1; transform: none; }
    .ha-spine { animation: none; stroke-dashoffset: 0; }
    .ha-pulse, .ha-beacon-ring { display: none; }
    .ha-float, .ha-arc, .hero__grid { animation: none; }
    .hero__art, .ha-arcs { transition: none; }
}

.hero__inner { position: relative; z-index: 1; }
.hero__eyebrow { margin-bottom: var(--s-6); }
.hero__title { margin-bottom: var(--s-8); max-width: 17ch; }
.hero__sub { max-width: 60ch; margin-bottom: var(--s-8); min-height: 3.2em; }

.hero__meta {
    display: flex;
    flex-wrap: wrap;
    justify-content: space-between;
    gap: var(--s-4) var(--s-8);
    margin-top: var(--s-12);
    padding-top: var(--s-8);
    border-top: 1px solid var(--hairline);
    font-family: var(--font-mono);
    font-size: 0.72rem;
    letter-spacing: 0.1em;
    color: var(--muted);
    text-transform: uppercase;
}
.hero__meta-left, .hero__meta-right { display: flex; flex-wrap: wrap; gap: var(--s-6); }
/* Marginalia — coordinates and clock floating in the whitespace. */
.hero__meta-right { color: var(--faint); }

/* ----------------------------------------------------- THE SWITCH */
/* Two-position control. Flipping it re-voices the hero for the other buyer
   and pre-selects that track downstream. Segmentation as clarity. */
.switch {
    display: inline-flex;
    align-items: center;
    padding: 4px;
    gap: 4px;
    border: 1px solid var(--hairline-strong);
    border-radius: 3px;
    background: var(--bg-elevated);
    margin-bottom: var(--s-8);
    position: relative;
}

.switch__label {
    font-family: var(--font-mono);
    font-size: 0.64rem;
    letter-spacing: 0.2em;
    text-transform: uppercase;
    color: var(--muted);
    padding: 0.55rem 0.9rem;
    align-self: center;
    border-right: 1px solid var(--hairline);
    margin-right: 2px;
}

.switch__btn {
    font-family: var(--font-mono);
    font-size: 0.7rem;
    letter-spacing: 0.14em;
    text-transform: uppercase;
    color: var(--muted);
    padding: 0.6rem 1.05rem;
    border-radius: 2px;
    transition: color var(--t-fast), background-color var(--t-fast);
    white-space: nowrap;
}
.switch__btn:hover { color: var(--ink); }
.switch__btn[aria-pressed="true"] { color: var(--ink); background: rgba(var(--accent-rgb), 0.16); }
.switch__btn[aria-pressed="true"].switch__btn--b { background: rgba(var(--accent-lum-rgb), 0.18); }

@media (max-width: 620px) {
    .switch { flex-wrap: wrap; }
    .switch__label { border-right: none; border-bottom: 1px solid var(--hairline); width: 100%; margin: 0 0 2px; }
    .switch__btn { flex: 1; text-align: center; }
}

/* -------------------------------------------------------------- BUTTONS */
.btn {
    display: inline-flex;
    align-items: center;
    gap: 0.6rem;
    font-family: var(--font-mono);
    font-size: 0.74rem;
    letter-spacing: 0.16em;
    text-transform: uppercase;
    padding: 0.95rem 1.6rem;
    border-radius: 2px;
    border: 1px solid var(--accent);
    color: var(--ink);
    transition: background-color var(--t-base), border-color var(--t-base), color var(--t-base), transform var(--t-fast);
}
.btn:hover { background: rgba(var(--accent-rgb), 0.14); border-color: var(--accent-lum); }
.btn:active { transform: translateY(1px); }

.btn--solid { background: var(--accent); color: #0A0E13; border-color: var(--accent); }
.btn--solid:hover { background: var(--accent-lum); border-color: var(--accent-lum); color: #0A0E13; }
[data-theme="light"] .btn--solid { color: #FFFFFF; }
[data-theme="light"] .btn--solid:hover { color: #FFFFFF; }

.btn--ghost { border-color: var(--hairline-strong); color: var(--body); }
.btn--ghost:hover { color: var(--ink); border-color: var(--accent); background: transparent; }

.btn-row { display: flex; flex-wrap: wrap; gap: var(--s-4); }

.btn__arrow { transition: transform var(--t-base); }
.btn:hover .btn__arrow { transform: translateX(3px); }

/* ---------------------------------------------------------- TRACK CARDS */
/* The fork. Track A = deep copper (engraved, enterprise).
   Track B = luminous copper (warmer, plain-spoken). One hue, two intensities. */
.junction { position: relative; }

/* The fork sits ABOVE the cards and stops short of them — the rails point at
   each track rather than cutting across the card tops. */
.junction__fork {
    display: block;
    margin-inline: auto;
    width: min(760px, 82%);
    height: 108px;
    margin-bottom: var(--s-6);
    position: relative;
    z-index: 0;
}

.spine-cap {
    opacity: 0;
    transition: opacity 0.4s var(--ease-out-expo) 1s;
}
.spine-cap.is-drawn { opacity: 1; }

.tracks {
    display: grid;
    grid-template-columns: repeat(2, 1fr);
    gap: var(--s-6);
}

.track {
    position: relative;
    display: flex;
    flex-direction: column;
    padding: var(--s-8);
    background: var(--bg-elevated);
    border: 1px solid var(--hairline);
    border-radius: 3px;
    overflow: hidden;
    transition: border-color var(--t-base), transform var(--t-base);
}
.track::before {
    content: '';
    position: absolute;
    top: 0; left: 0;
    width: 100%; height: 2px;
    background: var(--accent-deep);
    transform: scaleX(0.14);
    transform-origin: left;
    transition: transform var(--t-slow);
}
.track--b::before { background: var(--accent-lum); }
.track:hover { border-color: var(--hairline-strong); transform: translateY(-3px); }
.track:hover::before, .track.is-active::before { transform: scaleX(1); }
.track.is-active { border-color: var(--accent); }

.track__id {
    font-family: var(--font-mono);
    font-size: 0.68rem;
    letter-spacing: 0.24em;
    text-transform: uppercase;
    color: var(--accent);
    margin-bottom: var(--s-4);
}
.track--b .track__id { color: var(--accent-lum); }

.track__title { margin-bottom: var(--s-4); }
.track__line { color: var(--body); margin-bottom: var(--s-6); flex-grow: 0; }

.track__list { list-style: none; margin-bottom: var(--s-8); }
.track__list li {
    position: relative;
    padding-left: var(--s-6);
    padding-block: 0.42rem;
    font-size: 0.94rem;
    border-bottom: 1px solid var(--hairline);
}
.track__list li:last-child { border-bottom: none; }
.track__list li::before {
    content: '';
    position: absolute;
    left: 0; top: 1.05rem;
    width: 10px; height: 1px;
    background: var(--accent);
}

.track__foot {
    margin-top: auto;
    padding-top: var(--s-6);
    border-top: 1px solid var(--hairline);
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: var(--s-4);
    flex-wrap: wrap;
}
.track__price {
    font-family: var(--font-mono);
    font-size: 0.72rem;
    letter-spacing: 0.08em;
    color: var(--muted);
    font-variant-numeric: tabular-nums;
}
.track__link {
    font-family: var(--font-mono);
    font-size: 0.72rem;
    letter-spacing: 0.16em;
    text-transform: uppercase;
    color: var(--accent-lum);
    display: inline-flex;
    align-items: center;
    gap: 0.45rem;
    transition: gap var(--t-base);
}
.track__link:hover { gap: 0.8rem; }

@media (max-width: 800px) {
    .tracks { grid-template-columns: 1fr; }
    .junction__fork { height: 60px; }
}

/* ------------------------------------------------------------ LEDGER */
/* Aligned mono rows. Credentials and figures never become badge-pill soup. */
.ledger { border-top: 1px solid var(--hairline); }
.ledger__row {
    display: grid;
    grid-template-columns: 180px 1fr;
    gap: var(--s-6);
    padding-block: var(--s-4);
    border-bottom: 1px solid var(--hairline);
    align-items: baseline;
}
.ledger__key {
    font-family: var(--font-mono);
    font-size: 0.68rem;
    letter-spacing: 0.18em;
    text-transform: uppercase;
    color: var(--muted);
}
.ledger__val { color: var(--body); }
.ledger__val strong { color: var(--ink); }

@media (max-width: 640px) {
    .ledger__row { grid-template-columns: 1fr; gap: var(--s-1); }
}

/* ---------------------------------------------------------- INK BAND */
/* One full-bleed warm-charcoal band inside the light system (Pentagram
   rhythm move). Implemented by locally reassigning the theme tokens, so
   every child — stats, buttons, rules — recolours itself. */
.band {
    background: #191512;
    --bg: #191512;
    --bg-elevated: #211C17;
    --ink: #F4EFEA;
    --body: rgba(244, 239, 234, 0.62);
    --muted: rgba(244, 239, 234, 0.40);
    --faint: rgba(244, 239, 234, 0.18);
    --hairline: rgba(242, 163, 107, 0.15);
    --hairline-strong: rgba(242, 163, 107, 0.28);
    --accent: #D07A45;
    --accent-lum: #F2A36B;
    --accent-rgb: 208, 122, 69;
    color: var(--body);
}
[data-theme="dark"] .band { background: #10151D; --bg: #10151D; --bg-elevated: #161C26; }

/* -------------------------------------------------------------- STATS */
/* Editorial columns: a hairline opens each figure, the numeral runs big.
   No boxes — the rules and scale carry it. */
.stats {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(200px, 1fr));
    gap: var(--s-8) var(--s-8);
}
.stat { padding-left: var(--s-6); border-left: 1px solid var(--hairline-strong); }
.stat__num {
    font-family: var(--font-mono);
    font-variant-numeric: tabular-nums;
    font-size: clamp(2.6rem, 4.6vw, 3.9rem);
    font-weight: 500;
    color: var(--accent-lum);
    line-height: 1;
    margin-bottom: var(--s-4);
    letter-spacing: -0.03em;
}
.stat__label {
    font-family: var(--font-mono);
    font-size: 0.68rem;
    letter-spacing: 0.16em;
    text-transform: uppercase;
    color: var(--muted);
    line-height: 1.6;
}

/* ----------------------------------------------------------- WORK GRID */
.work-grid {
    display: grid;
    grid-template-columns: repeat(2, 1fr);
    gap: var(--s-6);
}

.work-card {
    display: flex;
    flex-direction: column;
    background: var(--bg-elevated);
    border: 1px solid var(--hairline);
    border-radius: 3px;
    overflow: hidden;
    transition: border-color var(--t-base), transform var(--t-base);
}
.work-card:hover { border-color: var(--accent); transform: translateY(-3px); }

.work-card__thumb {
    background: var(--bg-sunken);
    border-bottom: 1px solid var(--hairline);
    padding: var(--s-6) var(--s-6) var(--s-4);
    display: grid;
    place-items: center;
    overflow: hidden;
}
.work-card__thumb svg { width: 100%; height: auto; }

/* Card thumbnails — miniature architectures that name the real systems.
   Legibility over decoration: an unlabelled box says nothing. */
.thumb { display: block; }
.tb-box {
    fill: var(--dg-surface);
    stroke: var(--dg-stroke);
    stroke-width: 1;
}
.tb-box--mid { fill: var(--dg-surface-accent); }
.tb-box--key { fill: var(--dg-surface-key); stroke: var(--dg-stroke-key); }
.tb-box--dashed { fill: none; stroke-dasharray: 3 3; }
.tb-flow { fill: none; stroke: var(--dg-arrow); stroke-width: 1; }
.tb-text {
    fill: var(--dg-muted);
    font-family: var(--font-body);
    font-size: 9.5px;
}
.tb-text--key { fill: var(--dg-title); font-weight: 500; }
.tb-label {
    fill: var(--dg-label);
    font-family: var(--font-mono);
    font-size: 7.5px;
    font-weight: 500;
    letter-spacing: 0.16em;
    text-transform: uppercase;
}
.tb-rule { stroke: var(--hairline); stroke-width: 1; }
.tb-foot {
    fill: var(--muted);
    font-family: var(--font-mono);
    font-size: 8px;
    letter-spacing: 0.08em;
}

.work-card__body { padding: var(--s-6); display: flex; flex-direction: column; flex-grow: 1; }

.work-card__flag {
    font-family: var(--font-mono);
    font-size: 0.64rem;
    letter-spacing: 0.22em;
    text-transform: uppercase;
    color: var(--accent);
    margin-bottom: var(--s-3);
}
.work-card--b .work-card__flag { color: var(--accent-lum); }

.work-card__title { font-size: 1.25rem; margin-bottom: var(--s-3); }
.work-card__desc { font-size: 0.94rem; color: var(--body); margin-bottom: var(--s-6); }

.work-card__metric {
    margin-top: auto;
    padding-top: var(--s-4);
    border-top: 1px solid var(--hairline);
    font-family: var(--font-mono);
    font-size: 0.74rem;
    letter-spacing: 0.08em;
    color: var(--accent-lum);
    font-variant-numeric: tabular-nums;
}

@media (max-width: 800px) { .work-grid { grid-template-columns: 1fr; } }

/* --------------------------------------------------------- CASE STUDIES */
.case {
    padding-block: var(--s-24);
    border-top: 1px solid var(--hairline);
}
.case:first-of-type { border-top: none; padding-top: var(--s-8); }

.case__meta {
    display: flex;
    flex-wrap: wrap;
    gap: var(--s-6);
    padding-bottom: var(--s-6);
    margin-bottom: var(--s-8);
    border-bottom: 1px solid var(--hairline);
    font-family: var(--font-mono);
    font-size: 0.68rem;
    letter-spacing: 0.16em;
    text-transform: uppercase;
    color: var(--muted);
}
.case__meta span strong { color: var(--accent-lum); font-weight: 500; }

.case__title { margin-bottom: var(--s-6); max-width: 20ch; }

.case__diagram {
    background: var(--bg-elevated);
    border: 1px solid var(--hairline);
    border-radius: 3px;
    padding: var(--s-6);
    margin-block: var(--s-12);
    overflow-x: auto;
}
.case__diagram svg { width: 100%; min-width: 680px; height: auto; }

/* Narrative columns: numbered, divided by hairlines, each opened by a short
   copper stroke — editorial, not three grey boxes of text. */
.case__blocks {
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    counter-reset: caseblock;
}
.case__block {
    counter-increment: caseblock;
    padding-block: var(--s-2);
}
.case__block h4 {
    font-family: var(--font-mono);
    font-size: 0.66rem;
    font-weight: 500;
    letter-spacing: 0.22em;
    text-transform: uppercase;
    color: var(--muted);
    margin-bottom: var(--s-6);
    display: flex;
    flex-direction: column;
    gap: var(--s-4);
}
.case__block h4::before {
    content: '';
    display: block;
    width: 26px;
    height: 2px;
    background: var(--accent);
}
.case__block { position: relative; }
.case__block::before {
    content: counter(caseblock, decimal-leading-zero);
    position: absolute;
    top: var(--s-2);
    right: var(--s-8);
    font-family: var(--font-mono);
    font-size: 0.66rem;
    letter-spacing: 0.1em;
    color: var(--faint);
}
.case__block p { font-size: 0.95rem; line-height: 1.75; }

@media (min-width: 861px) {
    .case__block { padding-right: var(--s-8); }
    .case__block + .case__block {
        border-left: 1px solid var(--hairline);
        padding-left: var(--s-8);
    }
}
@media (max-width: 860px) {
    .case__blocks { grid-template-columns: 1fr; }
    .case__block + .case__block {
        border-top: 1px solid var(--hairline);
        padding-top: var(--s-6);
        margin-top: var(--s-6);
    }
}

/* Diagram caption + hint */
.diagram-hint {
    font-family: var(--font-mono);
    font-size: 0.66rem;
    letter-spacing: 0.14em;
    text-transform: uppercase;
    color: var(--muted);
    margin-top: var(--s-4);
    text-align: center;
}

/* ------------------------------------------------------- DIAGRAM STYLES */
/* Restyled SVGs read ONLY these classes — no hardcoded hex survives, so
   both themes are automatic. <marker> fills need the class too; markers
   do not inherit currentColor. */
.dg-box { fill: var(--dg-surface); stroke: var(--dg-stroke); stroke-width: 1; }
.dg-box--accent { fill: var(--dg-surface-accent); stroke: var(--dg-stroke); }
.dg-box--key { fill: var(--dg-surface-key); stroke: var(--dg-stroke-key); stroke-width: 1.5; }
.dg-box--plain { fill: none; stroke: var(--dg-stroke); }
.dg-title { fill: var(--dg-title); font-family: var(--font-body); font-weight: 500; }
.dg-title--lg { fill: var(--dg-title); font-family: var(--font-display); font-weight: 400; }
.dg-muted { fill: var(--dg-muted); font-family: var(--font-body); }
.dg-label {
    fill: var(--dg-label);
    font-family: var(--font-mono);
    font-weight: 500;
    letter-spacing: 0.18em;
    text-transform: uppercase;
}
.dg-key { fill: var(--dg-stroke-key); font-family: var(--font-mono); font-weight: 500; }
.dg-line { stroke: var(--dg-arrow); stroke-width: 1; fill: none; }
.dg-arrow { fill: var(--dg-arrow); }
.dg-tick { stroke: var(--dg-stroke-key); stroke-width: 1.6; fill: none; }
/* A node framed by corner ticks carries stroke="none" inline — honour it over
   the class stroke, so key nodes read as tick-framed, not double-boxed. */
.diagram rect[stroke="none"] { stroke: none; }
.dg-rule { stroke: var(--dg-stroke); stroke-width: 1; opacity: 0.6; }

.diagram { display: block; }
.diagram text { transition: fill var(--t-base); }

/* Trace-through: nodes light up in sequence as the diagram scrolls in. */
.diagram .dg-node { opacity: 0; transition: opacity 0.5s var(--ease-out-expo); }
.diagram.is-traced .dg-node { opacity: 1; }
.diagram.is-traced .dg-node:nth-of-type(1) { transition-delay: 0.05s; }
.diagram.is-traced .dg-node:nth-of-type(2) { transition-delay: 0.15s; }
.diagram.is-traced .dg-node:nth-of-type(3) { transition-delay: 0.25s; }
.diagram.is-traced .dg-node:nth-of-type(4) { transition-delay: 0.35s; }
.diagram.is-traced .dg-node:nth-of-type(5) { transition-delay: 0.45s; }
.diagram.is-traced .dg-node:nth-of-type(6) { transition-delay: 0.55s; }
.diagram.is-traced .dg-node:nth-of-type(7) { transition-delay: 0.65s; }
.diagram.is-traced .dg-node:nth-of-type(8) { transition-delay: 0.75s; }
.diagram.is-traced .dg-node:nth-of-type(n+9) { transition-delay: 0.85s; }

/* Thumbnails never animate — they must read instantly. */
.work-card__thumb .diagram .dg-node { opacity: 1; transition: none; }

/* -------------------------------------------------------------- TEAM */
.team {
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    gap: var(--s-6);
}

.person {
    background: var(--bg-elevated);
    border: 1px solid var(--hairline);
    border-radius: 3px;
    padding: var(--s-8);
    display: flex;
    flex-direction: column;
    transition: border-color var(--t-base), transform var(--t-base);
}
.person:hover { border-color: var(--hairline-strong); transform: translateY(-3px); }

.person__avatar {
    width: 84px; height: 84px;
    border-radius: 3px;
    margin-bottom: var(--s-6);
    overflow: hidden;
    border: 1px solid var(--hairline-strong);
    display: grid;
    place-items: center;
    background: var(--bg-sunken);
    flex-shrink: 0;
}
.person__avatar img {
    width: 100%; height: 100%;
    object-fit: cover;
    filter: grayscale(1) contrast(1.05);
    transition: filter var(--t-slow);
}
.person:hover .person__avatar img { filter: grayscale(0); }

/* Monogram placeholder until real photos arrive */
.person__monogram {
    font-family: var(--font-display);
    font-size: 1.9rem;
    color: var(--accent);
    letter-spacing: 0.02em;
}

.person__role {
    font-family: var(--font-mono);
    font-size: 0.66rem;
    letter-spacing: 0.22em;
    text-transform: uppercase;
    color: var(--accent);
    margin-bottom: var(--s-3);
}
.person__name { font-size: 1.4rem; margin-bottom: var(--s-3); }
.person__title { font-size: 0.9rem; color: var(--muted); margin-bottom: var(--s-6); }
.person__bio { font-size: 0.94rem; margin-bottom: var(--s-6); }
.person__bio + .person__bio { margin-top: calc(var(--s-6) * -0.5); }

@media (max-width: 900px) { .team { grid-template-columns: 1fr; } }

/* Team page stations */
.station { padding-block: var(--s-24); border-top: 1px solid var(--hairline); }
.station:first-of-type { border-top: none; }
.station__grid {
    display: grid;
    grid-template-columns: 300px 1fr;
    gap: var(--s-16);
    align-items: start;
}
.station__aside { position: sticky; top: calc(var(--nav-h) + var(--s-8)); }
.station__portrait {
    width: 100%;
    aspect-ratio: 1;
    max-width: 260px;
    border-radius: 3px;
    border: 1px solid var(--hairline-strong);
    background: var(--bg-sunken);
    display: grid;
    place-items: center;
    overflow: hidden;
    margin-bottom: var(--s-6);
}
.station__portrait img { width: 100%; height: 100%; object-fit: cover; filter: grayscale(1); transition: filter var(--t-slow); }
.station__portrait:hover img { filter: grayscale(0); }
.station__portrait .person__monogram { font-size: 4rem; }

@media (max-width: 900px) {
    .station__grid { grid-template-columns: 1fr; gap: var(--s-8); }
    .station__aside { position: static; }
    .station__portrait { max-width: 160px; }
}

/* ------------------------------------------------------------ SERVICES */
.svc-grid {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(280px, 1fr));
    gap: var(--s-6);
}
.svc {
    background: var(--bg-elevated);
    border: 1px solid var(--hairline);
    border-radius: 3px;
    padding: var(--s-8);
    position: relative;
    transition: border-color var(--t-base), transform var(--t-base);
}
.svc:hover { border-color: var(--accent); transform: translateY(-3px); }
.svc__num {
    font-family: var(--font-mono);
    font-size: 0.68rem;
    letter-spacing: 0.2em;
    color: var(--faint);
    margin-bottom: var(--s-4);
}
.svc h3 { font-size: 1.3rem; margin-bottom: var(--s-4); }
.svc p { font-size: 0.94rem; }
.svc__tags {
    display: flex; flex-wrap: wrap; gap: var(--s-2);
    margin-top: var(--s-6); padding-top: var(--s-4);
    border-top: 1px solid var(--hairline);
}
.svc__tag {
    font-family: var(--font-mono);
    font-size: 0.62rem;
    letter-spacing: 0.12em;
    text-transform: uppercase;
    color: var(--muted);
}
.svc__tag + .svc__tag::before { content: '·'; margin-right: var(--s-2); color: var(--faint); }

/* Cross-track link */
.crosslink {
    display: flex;
    align-items: center;
    justify-content: space-between;
    flex-wrap: wrap;
    gap: var(--s-6);
    padding: var(--s-8);
    border: 1px solid var(--hairline);
    border-left: 2px solid var(--accent-lum);
    border-radius: 3px;
    background: var(--bg-elevated);
}
.crosslink p { font-size: 0.96rem; margin: 0; }

/* ------------------------------------------------------------- CONTACT */
.contact-grid {
    display: grid;
    grid-template-columns: 1fr 380px;
    gap: var(--s-16);
    align-items: start;
}
@media (max-width: 900px) { .contact-grid { grid-template-columns: 1fr; gap: var(--s-12); } }

.field { margin-bottom: var(--s-6); }
.field label {
    display: block;
    font-family: var(--font-mono);
    font-size: 0.66rem;
    letter-spacing: 0.18em;
    text-transform: uppercase;
    color: var(--muted);
    margin-bottom: var(--s-3);
}
.field input, .field textarea, .field select {
    width: 100%;
    background: var(--bg-elevated);
    border: 1px solid var(--hairline);
    border-radius: 2px;
    padding: 0.8rem 0.95rem;
    color: var(--ink);
    font-family: var(--font-body);
    font-size: 0.95rem;
    transition: border-color var(--t-fast), background-color var(--t-fast);
}
.field textarea { min-height: 140px; resize: vertical; }
.field input:focus, .field textarea:focus, .field select:focus {
    outline: none;
    border-color: var(--accent);
    background: var(--bg-sunken);
}
.field input::placeholder, .field textarea::placeholder { color: var(--faint); }

.field-row { display: grid; grid-template-columns: 1fr 1fr; gap: var(--s-4); }
@media (max-width: 560px) { .field-row { grid-template-columns: 1fr; gap: 0; } }

.form-note {
    font-family: var(--font-mono);
    font-size: 0.66rem;
    letter-spacing: 0.1em;
    color: var(--muted);
    margin-top: var(--s-4);
    line-height: 1.7;
}

.direct { border-top: 1px solid var(--hairline); }
.direct__row {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: var(--s-4);
    padding-block: var(--s-4);
    border-bottom: 1px solid var(--hairline);
}
.direct__key {
    font-family: var(--font-mono);
    font-size: 0.66rem;
    letter-spacing: 0.18em;
    text-transform: uppercase;
    color: var(--muted);
    flex-shrink: 0;
}
.direct__val { color: var(--ink); font-size: 0.95rem; word-break: break-word; text-align: right; }
a.direct__val:hover { color: var(--accent-lum); }

.copy-btn {
    font-family: var(--font-mono);
    font-size: 0.62rem;
    letter-spacing: 0.16em;
    text-transform: uppercase;
    color: var(--muted);
    border: 1px solid var(--hairline);
    border-radius: 2px;
    padding: 0.34rem 0.6rem;
    transition: color var(--t-fast), border-color var(--t-fast);
    flex-shrink: 0;
}
.copy-btn:hover { color: var(--accent-lum); border-color: var(--accent); }
.copy-btn.is-copied { color: var(--accent-lum); border-color: var(--accent-lum); }

/* --------------------------------------------------------------- CTA */
.cta {
    text-align: center;
    padding-block: clamp(var(--s-24), 12vw, var(--s-32));
    position: relative;
    overflow: hidden;
}
.cta__glow {
    position: absolute;
    bottom: -40%; left: 50%;
    transform: translateX(-50%);
    width: min(900px, 120vw);
    aspect-ratio: 1;
    background: radial-gradient(circle, rgba(var(--accent-rgb), 0.09) 0%, transparent 66%);
    pointer-events: none;
}
.cta__inner { position: relative; z-index: 1; }
.cta h2 { margin-bottom: var(--s-6); }
.cta p { margin-inline: auto; margin-bottom: var(--s-8); }
.cta .btn-row { justify-content: center; }

/* ---------------------------------------------------- LINE-MASK REVEAL */
/* Headlines rise line-by-line out of an overflow mask — the single most
   recognisable top-tier text move. JS splits lines after fonts load. */
.is-split .sw-line { display: block; overflow: hidden; }
.sw-line__inner {
    display: block;
    transform: translateY(112%);
    transition: transform 0.9s var(--ease-out-expo);
}
.lines-in .sw-line__inner { transform: none; }

/* Split headlines opt out of the parent block's slide so the lines do the
   moving; the parent still fades. */
[data-reveal] .is-split { transform: none; }

/* ------------------------------------------------------------- MARQUEE */
.marquee {
    overflow: hidden;
    border-block: 1px solid var(--hairline);
    padding-block: var(--s-4);
    -webkit-mask-image: linear-gradient(90deg, transparent, #000 10%, #000 90%, transparent);
    mask-image: linear-gradient(90deg, transparent, #000 10%, #000 90%, transparent);
}
.marquee__track {
    display: flex;
    width: max-content;
    animation: marquee 34s linear infinite;
}
.marquee:hover .marquee__track { animation-play-state: paused; }
.marquee__item {
    font-family: var(--font-mono);
    font-size: 0.72rem;
    letter-spacing: 0.22em;
    text-transform: uppercase;
    color: var(--muted);
    white-space: nowrap;
    display: flex;
    align-items: center;
}
.marquee__item::after {
    content: '';
    width: 5px; height: 5px;
    background: var(--accent);
    transform: rotate(45deg);
    margin-inline: var(--s-8);
    flex-shrink: 0;
}
@keyframes marquee { to { transform: translateX(-50%); } }

/* ------------------------------------------------------------- FOOTER */
/* The footer is a second hero: a display-scale invitation, the working
   rows, then the wordmark as a cropped watermark filling the width. */
.footer {
    border-top: 1px solid var(--hairline);
    position: relative;
    overflow: hidden;
}

.footer__cta {
    padding-block: clamp(var(--s-16), 9vw, var(--s-32)) clamp(var(--s-12), 6vw, var(--s-24));
}
.footer__cta .eyebrow { margin-bottom: var(--s-6); }

.footer__mail {
    display: inline-block;
    font-family: var(--font-display);
    font-size: clamp(1.7rem, 5.2vw, 4.4rem);
    font-weight: 300;
    letter-spacing: -0.02em;
    line-height: 1.05;
    color: var(--ink);
    text-decoration: underline;
    text-decoration-thickness: 0.045em;
    text-decoration-color: rgba(var(--accent-rgb), 0.45);
    text-underline-offset: 0.14em;
    transition: color var(--t-base), text-decoration-color var(--t-base);
    overflow-wrap: anywhere;
}
.footer__mail:hover {
    color: var(--accent-lum);
    text-decoration-style: dashed;
    text-decoration-color: var(--accent-lum);
}

.footer__inner {
    display: flex;
    flex-wrap: wrap;
    gap: var(--s-8);
    align-items: center;
    justify-content: space-between;
    padding-block: var(--s-8);
    border-top: 1px solid var(--hairline);
}
.footer__links { display: flex; flex-wrap: wrap; gap: var(--s-6); }
.footer__link {
    font-family: var(--font-mono);
    font-size: 0.68rem;
    letter-spacing: 0.16em;
    text-transform: uppercase;
    color: var(--muted);
    transition: color var(--t-fast);
}
.footer__link:hover { color: var(--accent-lum); }

.footer__meta {
    display: flex;
    flex-wrap: wrap;
    gap: var(--s-4) var(--s-8);
    justify-content: space-between;
    padding-block: var(--s-6);
    border-top: 1px solid var(--hairline);
    font-family: var(--font-mono);
    font-size: 0.64rem;
    letter-spacing: 0.14em;
    text-transform: uppercase;
    color: var(--faint);
}

.footer__watermark {
    font-family: var(--font-display);
    font-weight: 300;
    font-size: clamp(5rem, 17.5vw, 15.5rem);
    line-height: 0.78;
    letter-spacing: -0.03em;
    text-align: center;
    color: transparent;
    -webkit-text-stroke: 1px var(--hairline-strong);
    user-select: none;
    pointer-events: none;
    margin-bottom: -0.16em;
    white-space: nowrap;
}

/* ------------------------------------------------------ MAGNETIC CTA */
/* Solid buttons lean toward the cursor on fine pointers; JS drives the
   transform, this provides the spring home. */
@media (hover: hover) and (pointer: fine) {
    .btn--solid { will-change: transform; }
    .btn--solid.is-springing { transition: transform 0.5s var(--ease-out-expo), background-color var(--t-base), border-color var(--t-base); }
}

/* ------------------------------------------------------ REDUCED MOTION */
@media (prefers-reduced-motion: reduce) {
    html { scroll-behavior: auto; }
    *, *::before, *::after {
        animation-duration: 0.001ms !important;
        animation-iteration-count: 1 !important;
        transition-duration: 0.001ms !important;
    }
    [data-reveal] { opacity: 1; transform: none; }
    .spine-path { stroke-dashoffset: 0; }
    .diagram .dg-node { opacity: 1; }
    .sw-line__inner { transform: none; }
    .marquee__track { animation: none; }
}