/**
 * DownStreamTech — Shared Site Stylesheet
 *
 * Editorial design system: self-hosted webfonts, paper/ink color tokens
 * (light + dark), type scale, spacing, and all component styles shared by
 * index.php, privacy.php and 404.php. Served with cache-busting via
 * ?v=DST_APP_VERSION; precached by sw.js.
 *
 * Fonts: Space Grotesk, Public Sans, IBM Plex Mono — SIL OFL 1.1, licenses in
 * /assets/fonts/OFL-*.txt. Icons: Lucide (ISC) via /assets/icons/sprite.svg,
 * generated by scripts/build-icon-sprite.mjs. Everything is vendored;
 * nothing loads from a CDN.
 *
 * Developed by DownStreamTech Software Development Services
 * [https://downstreamtech.net]
 *
 * Copyright (c) 2026 DownStreamTech [https://downstreamtech.net]. All rights reserved.
 */

/* ============================================================
   1. Webfonts (self-hosted, latin subsets, woff2 only)
   ============================================================ */

@font-face {
    font-family: 'Space Grotesk';
    font-style: normal;
    font-weight: 500;
    font-display: swap;
    src: url('/assets/fonts/space-grotesk-latin-500.woff2') format('woff2');
}

@font-face {
    font-family: 'Space Grotesk';
    font-style: normal;
    font-weight: 700;
    font-display: swap;
    src: url('/assets/fonts/space-grotesk-latin-700.woff2') format('woff2');
}

@font-face {
    font-family: 'Public Sans';
    font-style: normal;
    font-weight: 400;
    font-display: swap;
    src: url('/assets/fonts/public-sans-latin-400.woff2') format('woff2');
}

@font-face {
    font-family: 'Public Sans';
    font-style: italic;
    font-weight: 400;
    font-display: swap;
    src: url('/assets/fonts/public-sans-latin-400-italic.woff2') format('woff2');
}

@font-face {
    font-family: 'Public Sans';
    font-style: normal;
    font-weight: 600;
    font-display: swap;
    src: url('/assets/fonts/public-sans-latin-600.woff2') format('woff2');
}

@font-face {
    font-family: 'IBM Plex Mono';
    font-style: normal;
    font-weight: 400;
    font-display: swap;
    src: url('/assets/fonts/ibm-plex-mono-latin-400.woff2') format('woff2');
}

/* ============================================================
   2. Design tokens
   Palette anchored to the DST logo: leaf green #3faa3f,
   royal blue #164892. Light theme is a warm paper page;
   dark theme is an ink page (never pure black).
   ============================================================ */

:root {
    /* Brand greens */
    --green-900: #12341d;
    --green-800: #17452a;
    --green-700: #1e5c33;   /* primary brand ink-green */
    --green-600: #2b7a42;
    --green-500: #3faa3f;   /* logo leaf green; decorative / large use only */
    --green-300: #8fcf9a;

    /* Logo colors, sampled from the DST mark (Misc/logo_v3_mark2025.png) */
    --logo-green: #3faa3f;
    --logo-teal: #138c80;
    --logo-blue: #164892;

    /* Tri-color accent bar — the logo's gradient as three flat segments */
    --tab-grad: linear-gradient(90deg,
        var(--logo-green) 0 34%, var(--logo-teal) 34% 67%, var(--logo-blue) 67% 100%);

    /* Logo blue — links and live references */
    --accent: #164892;

    /* Paper surfaces */
    --paper: #f8f6f0;
    --paper-2: #f1eee5;
    --paper-plate: #fffdf8;

    /* Ink */
    --ink: #1d241f;
    --ink-2: #46504a;
    --ink-3: #5f6a63;

    /* Rules (hairlines) */
    --rule: #d9d4c6;
    --rule-strong: #1d241f;

    /* Interactive */
    --link: var(--accent);
    --btn-bg: var(--green-700);
    --btn-bg-hover: #17452a;
    --btn-fg: #f8f6f0;
    --focus-ring: #1a4f8f;

    /* Full-bleed CTA band */
    --band-bg: #12341d;
    --band-fg: #f8f6f0;
    --band-fg-dim: #cfd8cf;

    /* Semantic */
    --error: #9d2b2b;
    --success: var(--green-700);

    /* Type */
    --font-display: 'Space Grotesk', 'Public Sans', system-ui, sans-serif;
    --font-text: 'Public Sans', system-ui, -apple-system, 'Segoe UI', Roboto, sans-serif;
    --font-mono: 'IBM Plex Mono', ui-monospace, 'SF Mono', 'Cascadia Mono', Consolas, monospace;

    --text-xs: 0.8125rem;
    --text-sm: 0.875rem;
    --text-base: 1.0625rem;
    --text-lg: 1.25rem;
    --text-xl: 1.5625rem;
    --text-2xl: 1.9375rem;
    --text-display: clamp(2.4rem, 5.5vw, 4rem);
    --leading-body: 1.65;
    --leading-tight: 1.12;
    --measure: 65ch;

    /* Spacing (4px base) */
    --s1: 0.25rem;
    --s2: 0.5rem;
    --s3: 0.75rem;
    --s4: 1rem;
    --s6: 1.5rem;
    --s8: 2rem;
    --s10: 2.5rem;
    --s12: 3rem;
    --s16: 4rem;
    --section-pad: clamp(3rem, 7vw, 5.5rem);
    --content-max: 1100px;

    /* Edges */
    --r-0: 0;
    --r-1: 2px;
    --r-2: 4px;
    --bw: 1px;
    --bw-strong: 2px;

    /* Chrome */
    --header-h: 64px;

    /* Blueprint grid (hero + tech section) */
    --grid-line: rgba(30, 92, 51, 0.14);

    /* Terminal panel (dark console in both themes) */
    --term-bg: #10150f;
    --term-fg: #a5dcb0;
    --term-key: #8db9e8;
    --term-dim: #6f7d70;
}

[data-theme="dark"] {
    --paper: #141a16;
    --paper-2: #1b221d;
    --paper-plate: #20281f;

    --ink: #eae7db;
    --ink-2: #b5b2a4;
    --ink-3: #949a90;

    --rule: #333c35;
    --rule-strong: #eae7db;

    /* Remap brand + interactive so component CSS never forks */
    --green-700: #8fcf9a;
    --accent: #8db9e8;
    --link: #8db9e8;
    --btn-bg: #8fcf9a;
    --btn-bg-hover: #a5dcb0;
    --btn-fg: #12341d;
    --focus-ring: #8db9e8;

    --band-bg: #1b221d;
    --band-fg: #eae7db;
    --band-fg-dim: #b5b2a4;

    --error: #e08a8a;

    --grid-line: rgba(143, 207, 154, 0.10);
    --term-bg: #0d120e;

    /* Lightened logo colors for dark paper */
    --logo-green: #6fc26f;
    --logo-teal: #55b3a8;
    --logo-blue: #8db9e8;
}

/* ============================================================
   3. Base
   ============================================================ */

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

html {
    scroll-behavior: smooth;
    scroll-padding-top: calc(var(--header-h) + var(--s4));
}

body {
    font-family: var(--font-text);
    font-size: var(--text-base);
    line-height: var(--leading-body);
    color: var(--ink);
    background-color: var(--paper);
    -webkit-font-smoothing: antialiased;
    text-rendering: optimizeLegibility;
}

/* Faint paper grain — kept nearly imperceptible; sits under all content. */
body::before {
    content: '';
    position: fixed;
    inset: 0;
    z-index: -1;
    pointer-events: none;
    background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='160' height='160'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='0.9' numOctaves='2' stitchTiles='stitch'/%3E%3CfeColorMatrix values='0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0.05 0'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23n)'/%3E%3C/svg%3E");
}

h1, h2, h3 {
    font-family: var(--font-display);
    font-weight: 700;
    line-height: var(--leading-tight);
    letter-spacing: -0.02em;
    text-wrap: balance;
}

h3 { font-weight: 500; }

h1 { font-size: var(--text-display); }
h2 { font-size: var(--text-2xl); }
h3 { font-size: var(--text-lg); }

p { max-width: var(--measure); }

a {
    color: var(--link);
    text-decoration: underline;
    text-decoration-thickness: 1px;
    text-underline-offset: 0.2em;
}

a:hover { text-decoration-thickness: 2px; }

strong { font-weight: 600; }

img, svg { max-width: 100%; }

::selection {
    background: var(--green-700);
    color: var(--paper);
}

:focus-visible {
    outline: 2px solid var(--focus-ring);
    outline-offset: 2px;
}

.container {
    max-width: var(--content-max);
    margin-inline: auto;
    padding-inline: clamp(1.25rem, 4vw, 2.5rem);
}

/* Lucide sprite icons */
.icon {
    width: 1.25em;
    height: 1.25em;
    flex-shrink: 0;
    vertical-align: -0.25em;
}

.icon-lg { width: 1.4em; height: 1.4em; }

/* ============================================================
   4. Header + navigation
   ============================================================ */

#header {
    position: sticky;
    top: 0;
    z-index: 100;
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: var(--s4);
    min-height: var(--header-h);
    padding-inline: clamp(1.25rem, 4vw, 2.5rem);
    background: var(--paper);
    border-bottom: var(--bw) solid var(--rule);
}

.logo {
    display: flex;
    align-items: center;
    gap: var(--s3);
    color: var(--ink);
    text-decoration: none;
    font-family: var(--font-display);
    font-size: var(--text-lg);
    letter-spacing: -0.01em;
}

.logo:hover { text-decoration: none; }

/* The mark is transparent and carries its own contrast, so it needs no plate:
   a cream card would read as a sticker on the dark theme. */
.logo-image {
    width: 40px;
    height: 40px;
}

/* Full mark in About — the one place on the page with the width to show the
   2025 founding-year rule legibly. Header keeps the D monogram.
   Two files, not one: on the dark ground the 2025 numerals are #164892 at about
   1.4:1 and simply vanish, so the dark variant relights the navies (3.3:1, over
   the 3:1 bar for non-text). brand.md relights a token, never invents a hue.
   Theme here is attribute-driven only — this stylesheet has no
   prefers-color-scheme block — so [data-theme] is the whole switch. */
.about-mark {
    display: block;
    width: 240px;
    max-width: 100%;
    height: auto;
    margin-bottom: var(--s6);
}

.about-mark--dark { display: none; }
[data-theme="dark"] .about-mark--light { display: none; }
[data-theme="dark"] .about-mark--dark { display: block; }

#nav {
    display: flex;
    align-items: center;
    gap: clamp(var(--s4), 2.5vw, var(--s8));
}

.nav-link {
    display: inline-flex;
    align-items: center;
    font-family: var(--font-text);
    font-size: 0.9375rem;
    font-weight: 500;
    letter-spacing: 0.01em;
    color: var(--ink-2);
    text-decoration: none;
    padding-block: var(--s2);
    /* Accent underline, grown from the left on hover */
    background: linear-gradient(var(--accent), var(--accent)) no-repeat left calc(100% - 4px) / 0 2px;
}

.nav-icon {
    display: none; /* Hidden on desktop, shown in mobile menu */
}

.nav-link:hover {
    color: var(--ink);
    background-size: 100% 2px;
}

@media (prefers-reduced-motion: no-preference) {
    .nav-link { transition: color 0.15s ease, background-size 0.2s ease; }
}

.nav-cta {
    padding: 0.4rem 1rem;
    background: var(--accent);
    color: var(--paper);
    border-radius: 999px;
}

.nav-cta:hover {
    color: var(--paper);
    background: var(--accent);
    background-size: auto;
    opacity: 0.88;
}

.header-controls {
    display: flex;
    align-items: center;
    gap: var(--s2);
}

.theme-toggle,
.mobile-menu-toggle {
    position: relative;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 36px;
    height: 36px;
    background: none;
    border: none;
    border-radius: 50%;
    color: var(--ink);
    cursor: pointer;
}

/* Visual size is sub-44px; the pseudo-element keeps the 44px touch target */
.theme-toggle::before,
.mobile-menu-toggle::before {
    content: "";
    position: absolute;
    inset: calc((44px - 100%) / -2);
    border-radius: 50%;
}

.theme-toggle:hover,
.mobile-menu-toggle:hover { background: var(--rule); }

.mobile-menu-toggle svg {
    width: 20px;
    height: 20px;
}

.theme-toggle svg {
    width: 18px;
    height: 18px;
}

/* forced-colors strips backgrounds but honors borders — without these the
   circular controls render as bare floating glyphs in High Contrast mode */
@media (forced-colors: active) {
    .theme-toggle,
    .mobile-menu-toggle,
    .back-to-top { border: 1px solid ButtonText; }
}

.theme-toggle .icon-sun { display: none; }
[data-theme="dark"] .theme-toggle .icon-sun { display: block; }
[data-theme="dark"] .theme-toggle .icon-moon { display: none; }

.mobile-menu-toggle { display: none; }

.mobile-menu-overlay {
    display: none;
    position: fixed;
    inset: 0;
    z-index: 90;
    background: rgba(20, 26, 22, 0.45);
}

.mobile-menu-overlay.active { display: block; }

@media (max-width: 768px) {
    .mobile-menu-toggle { display: inline-flex; }

    #nav {
        display: none;
        position: fixed;
        top: var(--header-h);
        left: 0;
        right: 0;
        z-index: 95;
        flex-direction: column;
        align-items: stretch;
        gap: 0;
        background: var(--paper);
        border-bottom: var(--bw-strong) solid var(--rule-strong);
        padding: var(--s2) clamp(1.25rem, 4vw, 2.5rem) var(--s4);
    }

    #nav.active { display: flex; }

    #nav .nav-link {
        display: flex;
        align-items: center;
        gap: var(--s3);
        padding-block: var(--s4);
        border-top: var(--bw) solid var(--rule);
        font-size: var(--text-base);
        background: none;
    }

    #nav .nav-link:first-child { border-top: 0; }

    #nav .nav-icon {
        display: block;
        width: 20px;
        height: 20px;
        stroke: currentColor;
        flex-shrink: 0;
    }

    /* CTA pill reads as a plain list row inside the mobile drawer */
    #nav .nav-cta {
        background: none;
        color: var(--ink-2);
        border-radius: 0;
        padding-inline: 0;
    }
}

/* ============================================================
   5. Hero — document masthead
   ============================================================ */

.hero {
    position: relative;
    padding-block: clamp(4rem, 10vw, 7.5rem) clamp(3.5rem, 8vw, 6rem);
    /* Blueprint grid — the engineering-document texture behind the masthead */
    background-image:
        linear-gradient(var(--grid-line) 1px, transparent 1px),
        linear-gradient(90deg, var(--grid-line) 1px, transparent 1px);
    background-size: 32px 32px;
}

/* Grid fades out toward the first section so it reads as a drafting sheet,
   not wallpaper. */
.hero::after {
    content: '';
    position: absolute;
    inset: 60% 0 0 0;
    pointer-events: none;
    background: linear-gradient(transparent, var(--paper));
}

.hero .container {
    position: relative;
    z-index: 1;
    display: grid;
    grid-template-columns: minmax(0, 7fr) minmax(0, 5fr);
    gap: var(--s10) var(--s16);
    align-items: center;
}

@media (max-width: 960px) {
    .hero .container { grid-template-columns: minmax(0, 1fr); }
}

/* Terminal status panel — a real console, every line verifiable */
.hero-terminal {
    background: var(--term-bg);
    border: var(--bw) solid var(--rule);
    border-radius: var(--r-2);
    overflow: hidden;
    font-family: var(--font-mono);
    font-size: var(--text-sm);
    box-shadow: 0 12px 30px rgba(18, 52, 29, 0.18);
}

@media (max-width: 480px) {
    .hero-terminal {
        font-size: var(--text-xs);
    }

    .term-body {
        padding: var(--s3) var(--s3) var(--s4);
        overflow-x: auto;
        -webkit-overflow-scrolling: touch;
    }

    .term-line {
        white-space: nowrap;
    }
}

.term-bar {
    display: flex;
    align-items: center;
    gap: var(--s3);
    padding: var(--s2) var(--s4);
    border-bottom: 1px solid rgba(165, 220, 176, 0.18);
}

/* Window dots in the logo's three colors */
.term-bar::before {
    content: '';
    width: 9px;
    height: 9px;
    border-radius: 50%;
    background: #3faa3f;
    box-shadow: 15px 0 0 #138c80, 30px 0 0 #164892;
    margin-right: 30px;
}

.term-title {
    color: var(--term-dim);
    font-size: var(--text-xs);
    letter-spacing: 0.06em;
}

.term-body { padding: var(--s4) var(--s4) var(--s6); }

.term-line {
    color: var(--term-fg);
    line-height: 1.9;
    white-space: nowrap;
    overflow: hidden;
    max-width: none;
}

.term-cmd { color: #eae7db; }

.term-key {
    display: inline-block;
    min-width: 11ch;
    color: var(--term-key);
}

.term-line a {
    color: var(--term-fg);
    text-decoration-color: var(--term-dim);
}

.term-caret {
    color: var(--green-500);
}

@media (prefers-reduced-motion: no-preference) {
    /* Lines type on in sequence; caret blinks forever */
    .term-body .term-line {
        width: 0;
        animation: term-type 0.6s steps(30, end) forwards;
    }

    .term-body .term-line:nth-child(1) { animation-delay: 0.4s; }
    .term-body .term-line:nth-child(2) { animation-delay: 1.0s; }
    .term-body .term-line:nth-child(3) { animation-delay: 1.35s; }
    .term-body .term-line:nth-child(4) { animation-delay: 1.7s; }
    .term-body .term-line:nth-child(5) { animation-delay: 2.05s; }
    .term-body .term-line:nth-child(6) { animation-delay: 2.4s; }
    .term-body .term-line:nth-child(7) { animation-delay: 2.9s; }

    @keyframes term-type {
        from { width: 0; }
        to { width: 100%; }
    }

    .term-caret {
        animation: caret-blink 1.1s steps(2, start) infinite;
    }
}

.hero-dateline {
    display: block;
    font-family: var(--font-mono);
    font-size: var(--text-xs);
    text-transform: uppercase;
    letter-spacing: 0.14em;
    color: var(--ink-3);
    border-block: var(--bw) solid var(--rule);
    padding-block: var(--s2);
    margin-bottom: clamp(var(--s8), 5vw, var(--s12));
}

.hero h1 {
    max-width: 18ch;
    margin-bottom: var(--s6);
}

.hero-subtitle {
    font-size: var(--text-lg);
    color: var(--ink-2);
    max-width: 55ch;
    margin-bottom: var(--s8);
}

.hero-cta {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: var(--s4) var(--s6);
}

@media (prefers-reduced-motion: no-preference) {
    .hero-main > * {
        animation: hero-fade 0.5s ease-out both;
    }

    .hero-main > h1 { animation-delay: 0.08s; }
    .hero-main > .hero-subtitle { animation-delay: 0.16s; }
    .hero-main > .hero-cta { animation-delay: 0.24s; }

    .hero-terminal { animation: hero-fade 0.5s ease-out 0.2s both; }

    @keyframes hero-fade {
        from { opacity: 0; transform: translateY(10px); }
        to { opacity: 1; transform: none; }
    }

    @keyframes caret-blink {
        50% { opacity: 0; }
    }
}

/* ============================================================
   6. Buttons
   ============================================================ */

.btn {
    display: inline-flex;
    align-items: center;
    gap: var(--s2);
    font-family: var(--font-text);
    font-size: var(--text-sm);
    font-weight: 600;
    letter-spacing: 0.02em;
    padding: 0.8rem 1.4rem;
    border: var(--bw) solid transparent;
    border-radius: var(--r-1);
    cursor: pointer;
    text-decoration: none;
}

.btn-primary {
    background: var(--btn-bg);
    color: var(--btn-fg);
}

.btn-primary:hover {
    background: var(--btn-bg-hover);
    text-decoration: none;
}

.btn-outline,
.btn-secondary {
    background: transparent;
    color: var(--ink);
    border-color: var(--ink-3);
}

.btn-outline:hover,
.btn-secondary:hover {
    border-color: var(--ink);
    text-decoration: none;
}

.btn .icon { width: 1.1em; height: 1.1em; }

/* ============================================================
   7. Sections — shared editorial grammar
   ============================================================ */

.section,
.tech-showcase,
.registration {
    padding-block: var(--section-pad);
}

.section-head {
    border-top: var(--bw-strong) solid var(--rule-strong);
    padding-top: var(--s6);
    margin-bottom: clamp(var(--s8), 5vw, var(--s12));
}

.eyebrow {
    font-family: var(--font-mono);
    font-size: var(--text-xs);
    text-transform: uppercase;
    letter-spacing: 0.14em;
    color: var(--ink-3);
    margin-bottom: var(--s4);
    max-width: none;
}

.section-head h2 {
    max-width: 26ch;
    margin-bottom: var(--s4);
}

.section-description {
    color: var(--ink-2);
    max-width: var(--measure);
}

/* Indexed entry — the shared unboxed unit (value prop, who we serve) */
.entry-grid {
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: var(--s8) var(--s10);
}

@media (max-width: 700px) {
    .entry-grid { grid-template-columns: minmax(0, 1fr); }
}

.entry {
    border-top: var(--bw) solid var(--rule);
    padding-top: var(--s4);
}

.entry-num {
    display: block;
    font-family: var(--font-mono);
    font-size: var(--text-xs);
    color: var(--ink-3);
    margin-bottom: var(--s3);
}

.entry h3 {
    display: flex;
    align-items: center;
    gap: var(--s3);
    margin-bottom: var(--s2);
}

.entry h3 .icon { color: var(--green-700); }

.entry p { color: var(--ink-2); }

/* ============================================================
   8. Services — index list
   ============================================================ */

.svc-list { display: block; }

.svc {
    display: grid;
    grid-template-columns: minmax(0, 6fr) minmax(0, 5fr);
    gap: var(--s4) var(--s10);
    border-top: var(--bw) solid var(--rule);
    padding-block: var(--s6);
}

@media (max-width: 768px) {
    .svc { grid-template-columns: minmax(0, 1fr); }
}

.svc-main .entry-num { margin-bottom: var(--s2); }

.svc-main h3 {
    display: flex;
    align-items: center;
    gap: var(--s3);
    margin-bottom: var(--s2);
}

.svc-main h3 .icon { color: var(--green-700); }

.svc-main p { color: var(--ink-2); }

.svc-points {
    list-style: none;
    align-self: center;
}

.svc-points li {
    position: relative;
    padding-left: 1.4rem;
    padding-block: var(--s1);
    color: var(--ink-2);
}

.svc-points li::before {
    content: '—';
    position: absolute;
    left: 0;
    color: var(--green-700);
}

/* Generic dashed list (About, FAQ answers) */
.commitment-list {
    list-style: none;
    margin-block: var(--s3);
}

.commitment-list li {
    position: relative;
    padding-left: 1.4rem;
    padding-block: var(--s1);
    max-width: var(--measure);
}

.commitment-list li::before {
    content: '—';
    position: absolute;
    left: 0;
    color: var(--green-700);
}

/* ============================================================
   9. Selected Work — case files
   ============================================================ */

.case-list { display: block; }

.case {
    border-top: var(--bw) solid var(--rule);
    padding-block: var(--s8);
    display: grid;
    grid-template-columns: minmax(0, 5fr) minmax(0, 6fr);
    gap: var(--s4) var(--s10);
}

@media (max-width: 768px) {
    .case { grid-template-columns: minmax(0, 1fr); }
}

.case-id {
    font-family: var(--font-mono);
    font-size: var(--text-xs);
    text-transform: uppercase;
    letter-spacing: 0.1em;
    color: var(--ink-3);
    margin-bottom: var(--s2);
}

.case h3 {
    display: flex;
    align-items: center;
    gap: var(--s3);
    margin-bottom: var(--s3);
}

.case h3 .icon { color: var(--green-700); }

.case-summary { color: var(--ink-2); }

.case-link {
    display: inline-flex;
    align-items: center;
    gap: var(--s2);
    font-family: var(--font-mono);
    font-size: var(--text-sm);
    margin-top: var(--s3);
}

.work-meta {
    list-style: none;
    align-self: center;
}

.work-meta li {
    padding-block: var(--s2);
    border-top: var(--bw) solid var(--rule);
    color: var(--ink-2);
    max-width: var(--measure);
}

.work-meta li:first-child { border-top: 0; }

.work-meta strong {
    display: block;
    font-family: var(--font-mono);
    font-weight: 400;
    font-size: var(--text-xs);
    text-transform: uppercase;
    letter-spacing: 0.1em;
    color: var(--ink-3);
}

/* Closing note ("Your System Could Be Next") */
.case-note {
    border: var(--bw) solid var(--rule-strong);
    border-radius: var(--r-1);
    padding: var(--s8);
    margin-top: var(--s8);
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    justify-content: space-between;
    gap: var(--s4) var(--s8);
}

.case-note h3 { margin-bottom: var(--s1); }

.case-note p { color: var(--ink-2); }

/* ============================================================
   10. How We Work — numbered ledger
   ============================================================ */

.steps {
    list-style: none;
    counter-reset: step;
    border-left: var(--bw) solid var(--rule);
    max-width: 46rem;
}

.steps li {
    counter-increment: step;
    position: relative;
    padding: 0 0 var(--s8) var(--s10);
}

.steps li:last-child { padding-bottom: 0; }

.steps li::before {
    content: '0' counter(step);
    position: absolute;
    left: calc(-1 * var(--s1));
    top: 0.1rem;
    transform: translateX(-50%);
    font-family: var(--font-mono);
    font-size: var(--text-sm);
    color: var(--green-700);
    background: var(--paper);
    padding-block: var(--s1);
}

.steps h3 { margin-bottom: var(--s2); }

.steps p { color: var(--ink-2); }

/* ============================================================
   11. Technology — specimen list
   ============================================================ */

.spec-list {
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: 0 var(--s10);
}

@media (max-width: 700px) {
    .spec-list { grid-template-columns: minmax(0, 1fr); }
}

.spec-item {
    display: flex;
    align-items: center;
    gap: var(--s4);
    border-top: var(--bw) solid var(--rule);
    padding-block: var(--s3);
}

.spec-item .svg-icon,
.spec-item .icon {
    width: 22px;
    height: 22px;
    flex-shrink: 0;
}

.spec-item .icon { color: var(--green-700); }

[data-theme="dark"] .spec-item .svg-icon { filter: brightness(1.6); }

.spec-name {
    font-family: var(--font-mono);
    font-size: var(--text-sm);
    color: var(--ink);
    min-width: 11ch;
}

.spec-role {
    font-size: var(--text-sm);
    color: var(--ink-3);
}

/* ============================================================
   12. About — asymmetric prose
   ============================================================ */

.about-grid {
    display: grid;
    grid-template-columns: minmax(0, 4fr) minmax(0, 7fr);
    gap: var(--s8) var(--s16);
    border-top: var(--bw-strong) solid var(--rule-strong);
    padding-top: var(--s6);
}

@media (max-width: 860px) {
    .about-grid { grid-template-columns: minmax(0, 1fr); }
}

.about-side h2 {
    max-width: 16ch;
    margin-block: var(--s4);
}

.about-side .section-description { color: var(--ink-2); }

.about-text p { margin-bottom: var(--s4); }

.about-text h3 {
    margin: var(--s8) 0 var(--s3);
}

/* ============================================================
   13. Why Open Source — argument clauses
   ============================================================ */

.clauses { max-width: 50rem; }

.clause {
    display: grid;
    grid-template-columns: 4rem minmax(0, 1fr);
    gap: var(--s6);
    border-top: var(--bw) solid var(--rule);
    padding-block: var(--s5, 1.25rem) var(--s6);
    padding-top: var(--s4);
    padding-bottom: var(--s6);
}

.clause-num {
    font-family: var(--font-mono);
    font-size: var(--text-sm);
    color: var(--green-700);
    padding-top: 0.3rem;
}

.clause h3 {
    display: flex;
    align-items: center;
    gap: var(--s3);
    margin-bottom: var(--s2);
}

.clause h3 .icon { color: var(--green-700); }

.clause p { color: var(--ink-2); }

@media (max-width: 560px) {
    .clause { grid-template-columns: minmax(0, 1fr); gap: var(--s2); }
    .clause-num { padding-top: 0; }
}

/* ============================================================
   14. Registrations — certificate ledgers
   ============================================================ */

.registration-grid {
    display: grid;
    grid-template-columns: minmax(0, 6fr) minmax(0, 5fr);
    gap: var(--s8) var(--s12);
    border-top: var(--bw-strong) solid var(--rule-strong);
    padding-top: var(--s6);
}

@media (max-width: 860px) {
    .registration-grid { grid-template-columns: minmax(0, 1fr); }
}

.registration-info h2 { margin-bottom: var(--s4); }

.registration-info > p {
    color: var(--ink-2);
    margin-bottom: var(--s4);
}

.registration-meta {
    list-style: none;
    margin-bottom: var(--s6);
}

.registration-meta li {
    display: flex;
    align-items: baseline;
    gap: var(--s3);
    border-top: var(--bw) solid var(--rule);
    padding-block: var(--s2);
    font-family: var(--font-mono);
    font-size: var(--text-sm);
}

.registration-meta li:last-child { border-bottom: var(--bw) solid var(--rule); }

.registration-meta strong {
    display: inline-flex;
    align-items: center;
    gap: var(--s2);
    font-weight: 400;
    font-size: var(--text-xs);
    text-transform: uppercase;
    letter-spacing: 0.08em;
    color: var(--ink-3);
    min-width: 12ch;
    flex-shrink: 0;
}

.registration-meta .icon { width: 1em; height: 1em; color: var(--green-700); }

.registration-cert { align-self: start; }

.registration-cert-text {
    background: var(--paper-2);
    border: var(--bw) solid var(--rule);
    border-radius: var(--r-1);
    padding: var(--s6);
}

.registration-cert-text p {
    color: var(--ink-2);
    font-size: var(--text-sm);
}

.registration-cert-text p + p { margin-top: var(--s3); }

.registration-cert-text .icon { color: var(--green-700); }

.registration-cert-caption {
    font-family: var(--font-mono);
    font-size: var(--text-xs);
    color: var(--ink-3);
}

/* ============================================================
   15. FAQ
   ============================================================ */

.faq-list {
    max-width: 50rem;
    border-bottom: var(--bw) solid var(--rule);
}

.faq-item { border-top: var(--bw) solid var(--rule); }

.faq-item summary {
    list-style: none;
    display: flex;
    align-items: baseline;
    justify-content: space-between;
    gap: var(--s6);
    padding-block: var(--s4);
    font-weight: 600;
    cursor: pointer;
}

.faq-item summary::-webkit-details-marker { display: none; }

.faq-item summary::after {
    content: '+';
    font-family: var(--font-mono);
    font-size: var(--text-lg);
    color: var(--green-700);
    line-height: 1;
    flex-shrink: 0;
}

.faq-item[open] summary::after { content: '\00d7'; }

.faq-item p,
.faq-item ul {
    padding-bottom: var(--s4);
    color: var(--ink-2);
}

.faq-item p { max-width: var(--measure); }

.faq-cta {
    margin-top: var(--s10);
}

.faq-cta p {
    color: var(--ink-2);
    margin-bottom: var(--s3);
}

/* ============================================================
   16. CTA band
   ============================================================ */

.cta-section {
    background: var(--band-bg);
    color: var(--band-fg);
    padding-block: var(--s16);
    border-block: var(--bw-strong) solid var(--rule-strong);
}

.cta-section h2 {
    color: var(--band-fg);
    max-width: 22ch;
    margin-bottom: var(--s4);
}

.cta-section p {
    color: var(--band-fg-dim);
    margin-bottom: var(--s8);
}

.cta-section .btn-primary {
    background: var(--band-fg);
    color: var(--band-bg);
}

.cta-section .btn-primary:hover { background: #fffdf8; }

[data-theme="dark"] .cta-section .btn-primary {
    background: var(--btn-bg);
    color: var(--btn-fg);
}

[data-theme="dark"] .cta-section .btn-primary:hover { background: var(--btn-bg-hover); }

/* ============================================================
   17. Contact
   ============================================================ */

.contact-wrap {
    display: grid;
    grid-template-columns: minmax(0, 4fr) minmax(0, 7fr);
    gap: var(--s10) var(--s16);
}

@media (max-width: 860px) {
    .contact-wrap { grid-template-columns: minmax(0, 1fr); }
}

.contact-rail .section-description { margin-bottom: var(--s8); }

.contact-coords {
    list-style: none;
}

.contact-coords li {
    display: flex;
    align-items: baseline;
    gap: var(--s3);
    border-top: var(--bw) solid var(--rule);
    padding-block: var(--s3);
    font-family: var(--font-mono);
    font-size: var(--text-sm);
    color: var(--ink);
}

.contact-coords strong {
    display: inline-flex;
    align-items: center;
    gap: var(--s2);
    font-weight: 400;
    font-size: var(--text-xs);
    text-transform: uppercase;
    letter-spacing: 0.08em;
    color: var(--ink-3);
    min-width: 9ch;
    flex-shrink: 0;
}

.contact-coords .icon { width: 1em; height: 1em; color: var(--green-700); }

.contact-coords a { color: var(--link); }

/* Form */
.contact-form {
    display: grid;
    gap: var(--s6);
}

.form-legend {
    font-family: var(--font-mono);
    font-size: var(--text-xs);
    color: var(--ink-3);
}

.req { color: var(--error); }

.form-group { display: grid; gap: var(--s2); }

.form-row-2 {
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: var(--s6);
}

@media (max-width: 560px) {
    .form-row-2 { grid-template-columns: minmax(0, 1fr); }
}

.form-label {
    font-weight: 600;
    font-size: var(--text-sm);
}

.field-hint {
    font-size: var(--text-sm);
    color: var(--ink-3);
}

.form-input,
.form-select,
.form-textarea {
    width: 100%;
    font: inherit;
    font-size: var(--text-base);
    color: var(--ink);
    background: var(--paper-plate);
    border: var(--bw) solid var(--rule);
    border-radius: var(--r-1);
    padding: 0.65rem 0.8rem;
}

.form-input::placeholder,
.form-textarea::placeholder { color: var(--ink-3); }

.form-input:focus-visible,
.form-select:focus-visible,
.form-textarea:focus-visible {
    outline: 2px solid var(--focus-ring);
    outline-offset: 0;
    border-color: var(--focus-ring);
}

.form-textarea { min-height: 9rem; resize: vertical; }

.checkbox-grid {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(240px, 1fr));
    gap: var(--s1) var(--s4);
}

.checkbox-item {
    display: flex;
    align-items: flex-start;
    gap: var(--s2);
    padding: var(--s2);
    border-radius: var(--r-1);
    cursor: pointer;
    font-size: var(--text-sm);
}

.checkbox-item:hover { background: var(--paper-2); }

.checkbox-item input {
    margin-top: 0.2rem;
    width: 16px;
    height: 16px;
    flex-shrink: 0;
    accent-color: var(--green-700);
}

.scoping-heading {
    border-top: var(--bw) solid var(--rule);
    padding-top: var(--s6);
    margin-top: var(--s2);
}

.consent-row {
    display: flex;
    align-items: flex-start;
    gap: var(--s3);
}

.consent-row input {
    margin-top: 0.3rem;
    width: 18px;
    min-width: 18px;
    height: 18px;
    flex-shrink: 0;
    accent-color: var(--green-700);
    cursor: pointer;
}

.consent-row label {
    font-size: var(--text-sm);
    color: var(--ink-2);
    cursor: pointer;
}

.submit-row { justify-self: start; }

/* Honeypot — kept out of sight and out of the tab order; bots still see it. */
.hp {
    position: absolute;
    left: -9999px;
    top: -9999px;
}

/* ============================================================
   18. Footer
   ============================================================ */

footer {
    border-top: var(--bw-strong) solid var(--rule-strong);
    background: var(--paper-2);
    padding-block: var(--s12) var(--s8);
}

.footer-content {
    max-width: var(--content-max);
    margin-inline: auto;
    padding-inline: clamp(1.25rem, 4vw, 2.5rem);
    display: grid;
    grid-template-columns: minmax(0, 2fr) minmax(0, 1fr) minmax(0, 1fr);
    gap: var(--s8);
}

@media (max-width: 700px) {
    .footer-content { grid-template-columns: minmax(0, 1fr); }
}

.footer-section h3 {
    font-family: var(--font-mono);
    font-weight: 400;
    font-size: var(--text-xs);
    text-transform: uppercase;
    letter-spacing: 0.14em;
    color: var(--ink-3);
    margin-bottom: var(--s4);
}

.footer-section p { color: var(--ink-2); }

.footer-links { list-style: none; }

.footer-links li { padding-block: var(--s1); }

.footer-links a {
    color: var(--ink-2);
    text-decoration: none;
}

.footer-links a:hover {
    color: var(--ink);
    text-decoration: underline;
}

.footer-bottom {
    max-width: var(--content-max);
    margin-inline: auto;
    padding-inline: clamp(1.25rem, 4vw, 2.5rem);
    margin-top: var(--s10);
    border-top: var(--bw) solid var(--rule);
    padding-top: var(--s6);
    display: grid;
    gap: var(--s4);
}

.footer-bottom p {
    font-size: var(--text-sm);
    color: var(--ink-2);
}

.footer-trust {
    font-family: var(--font-mono);
    font-size: var(--text-xs);
    text-transform: uppercase;
    letter-spacing: 0.1em;
    color: var(--ink-3);
    display: inline-flex;
    align-items: center;
    gap: var(--s2);
}

.footer-trust .icon { width: 1.1em; height: 1.1em; color: var(--green-700); }

.footer-independence {
    border: var(--bw) solid var(--rule);
    border-radius: var(--r-1);
    padding: var(--s4);
    font-size: var(--text-xs);
    color: var(--ink-3);
    max-width: 75ch;
}

/* ============================================================
   19. Back to top + toasts
   ============================================================ */

.back-to-top {
    position: fixed;
    bottom: var(--s6);
    right: var(--s6);
    z-index: 80;
    width: 40px;
    height: 40px;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    background: var(--accent);
    border: none;
    border-radius: 50%;
    color: var(--paper);
    cursor: pointer;
    opacity: 0;
    visibility: hidden;
    transition: opacity 0.2s ease;
}

/* Visual size is sub-44px; the pseudo-element keeps the 44px touch target */
.back-to-top::before {
    content: "";
    position: absolute;
    inset: calc((44px - 100%) / -2);
    border-radius: 50%;
}

.back-to-top.visible {
    opacity: 1;
    visibility: visible;
}

.back-to-top .icon { width: 18px; height: 18px; }

.toast {
    position: fixed;
    top: var(--s6);
    right: var(--s6);
    z-index: 10000;
    max-width: 320px;
    background: var(--paper-plate);
    border: var(--bw) solid var(--rule);
    border-left: 3px solid var(--success);
    border-radius: var(--r-1);
    padding: var(--s4) var(--s6);
    color: var(--ink);
    box-shadow: 0 2px 10px rgba(0, 0, 0, 0.12);
}

.toast--error { border-left-color: var(--error); }

.toast strong { display: block; margin-bottom: var(--s1); }

.toast small {
    font-size: var(--text-sm);
    color: var(--ink-2);
}

@media (prefers-reduced-motion: no-preference) {
    .toast { animation: toast-in 0.25s ease-out; }

    @keyframes toast-in {
        from { opacity: 0; transform: translateY(-6px); }
        to { opacity: 1; transform: none; }
    }
}

/* ============================================================
   20. Document pages (privacy.php, 404.php)
   ============================================================ */

.doc-page {
    max-width: 46rem;
    margin-inline: auto;
    padding: var(--s12) clamp(1.25rem, 4vw, 2.5rem) var(--s16);
}

.doc-page h1 { font-size: var(--text-2xl); margin-bottom: var(--s4); }

.doc-page h2 {
    font-size: var(--text-xl);
    border-top: var(--bw) solid var(--rule);
    padding-top: var(--s6);
    margin-top: var(--s8);
    margin-bottom: var(--s3);
}

.doc-page p, .doc-page ul, .doc-page ol { margin-bottom: var(--s4); color: var(--ink-2); }

.doc-page ul, .doc-page ol { padding-left: 1.4rem; }

.doc-meta {
    font-family: var(--font-mono);
    font-size: var(--text-xs);
    text-transform: uppercase;
    letter-spacing: 0.1em;
    color: var(--ink-3);
    border-block: var(--bw) solid var(--rule);
    padding-block: var(--s2);
    margin-bottom: var(--s8);
}

.error-code {
    font-family: var(--font-mono);
    font-size: clamp(4rem, 15vw, 8rem);
    color: var(--green-700);
    line-height: 1;
}

/* ============================================================
   21. Motion — scroll reveals + hover feedback
   The reveal classes are added by JS; without JS everything is
   simply visible. All entrance motion is reduced-motion-gated.
   ============================================================ */

.section-head { position: relative; }

/* The logo's three colors sit over each section's top rule */
.section-head::after {
    content: '';
    position: absolute;
    top: -3px;
    left: 0;
    height: 4px;
    width: 96px;
    background: var(--tab-grad);
}

.entry, .svc, .case, .spec-item, .clause, .faq-item,
.registration-meta li, .contact-coords li {
    transition: border-color 0.25s ease;
}

.entry:hover, .svc:hover, .case:hover, .spec-item:hover, .clause:hover {
    border-top-color: var(--green-600);
}

.entry:hover .entry-num, .svc:hover .entry-num, .case:hover .case-id {
    color: var(--green-700);
}

.entry-num, .case-id { transition: color 0.25s ease; }

.entry h3 .icon, .svc-main h3 .icon, .case h3 .icon, .clause h3 .icon {
    transition: transform 0.25s ease;
}

.entry:hover h3 .icon, .svc:hover h3 .icon,
.case:hover h3 .icon, .clause:hover h3 .icon {
    transform: translateY(-2px);
}

.btn { transition: background-color 0.2s ease, border-color 0.2s ease; }

.btn .icon { transition: transform 0.2s ease; }

.btn:hover .icon { transform: translateX(3px); }

.theme-toggle svg { transition: transform 0.3s ease; }

.theme-toggle:hover svg { transform: rotate(15deg); }

/* Blueprint grid on the tech specimen list, echoing the hero */
.tech-showcase {
    background-image:
        linear-gradient(var(--grid-line) 1px, transparent 1px),
        linear-gradient(90deg, var(--grid-line) 1px, transparent 1px);
    background-size: 32px 32px;
}

@media (prefers-reduced-motion: no-preference) {
    .reveal {
        opacity: 0;
        transform: translateY(14px);
        transition: opacity 0.55s ease-out, transform 0.55s ease-out;
    }

    .reveal.visible {
        opacity: 1;
        transform: none;
    }

    /* With motion allowed, the tri-color tab draws itself in on reveal */
    .section-head.reveal::after {
        width: 0;
        transition: width 0.7s ease-out 0.15s;
    }

    .section-head.reveal.visible::after { width: 96px; }
}

/* Print: every scroll-revealed element must be on the paper */
@media print {
    .reveal {
        opacity: 1 !important;
        transform: none !important;
    }

    .hero-terminal, .back-to-top { display: none; }
}

/* ============================================================
   22. Motion guard
   ============================================================ */

@media (prefers-reduced-motion: reduce) {
    html { scroll-behavior: auto; }

    *,
    *::before,
    *::after {
        animation-duration: 0.01ms !important;
        animation-iteration-count: 1 !important;
        transition-duration: 0.01ms !important;
    }
}