/* ══════════════════════════════════════════════════════════════
   Evo3D Innovations — shared stylesheet
   One cached file across all pages instead of ~700 lines inlined
   into every page. Fewer bytes per page = better Core Web Vitals.
   ══════════════════════════════════════════════════════════════ */

:root {
    --bg: #f0f0ed;
    --bg-2: #e8e8e4;
    --bg-3: #deded9;
    --accent: #0d9e6e;
    --accent-bright: #10c98a;
    --accent-dim: rgba(13, 158, 110, 0.08);
    --accent-border: rgba(13, 158, 110, 0.22);
    /* Muted/subtle tokens were set for looks, not legibility: body copy
       measured 3.66:1 and small labels 1.86:1, both under the 4.5:1 AA
       floor. Raised to ~6.6:1 and ~3.2:1. Still grey, not black. */
    --text: #111110;
    --text-muted: rgba(17, 17, 16, 0.70);
    --text-subtle: rgba(17, 17, 16, 0.60);
    --border: rgba(17, 17, 16, 0.09);
    --border-hover: rgba(17, 17, 16, 0.18);
    --grid-color: rgba(17, 17, 16, 0.055);
    --nav-bg: rgba(26, 31, 28, 0.90);
    --hero-bg: #1a1f1c;
    --hero-text: #f0f0ed;
    --hero-muted: rgba(240, 240, 237, 0.6);
    --hero-subtle: rgba(240, 240, 237, 0.35);
}

*, *::before, *::after { box-sizing: border-box; margin: 0; padding: 0; }
html { scroll-behavior: smooth; }

body {
    font-family: 'DM Sans', sans-serif;
    background: var(--bg);
    color: var(--text);
    overflow-x: hidden;
    -webkit-font-smoothing: antialiased;
}

/* Grid texture overlay */
body::before {
    content: '';
    position: fixed;
    inset: 0;
    background-image:
        linear-gradient(var(--grid-color) 1px, transparent 1px),
        linear-gradient(90deg, var(--grid-color) 1px, transparent 1px);
    background-size: 48px 48px;
    pointer-events: none;
    z-index: 0;
}

/* ── NAV ── */
nav {
    position: fixed;
    top: 0; left: 0; right: 0;
    z-index: 100;
    display: flex;
    align-items: center;
    justify-content: space-between;
    padding: 0 48px;
    height: 64px;
    background: var(--nav-bg);
    backdrop-filter: blur(14px);
    border-bottom: 1px solid rgba(240, 240, 237, 0.12);
}
.nav-logo {
    font-family: 'Syne', sans-serif;
    font-weight: 800;
    font-size: 17px;
    color: var(--hero-text);
    text-decoration: none;
    display: flex;
    align-items: center;
    gap: 10px;
}
.nav-logo .logo-mark {
    width: 28px; height: 28px;
    border: 1.5px solid var(--accent-bright);
    display: flex;
    align-items: center;
    justify-content: center;
    font-family: 'Space Mono', monospace;
    font-size: 9px;
    color: var(--accent-bright);
    letter-spacing: 0;
}
.nav-links { display: flex; align-items: center; gap: 4px; list-style: none; }
.nav-links a {
    font-family: 'Space Mono', monospace;
    font-size: 10px;
    letter-spacing: 1.5px;
    text-transform: uppercase;
    color: rgba(240, 240, 237, 0.72);
    text-decoration: none;
    padding: 8px 16px;
    border: 1px solid transparent;
    transition: all 0.2s;
}
.nav-links a:hover { color: var(--accent-bright); border-color: rgba(16,201,138,0.45); background: rgba(16,201,138,0.10); }
.nav-cta { background: var(--accent) !important; color: #fff !important; border-color: var(--accent) !important; font-weight: 700 !important; }
.nav-cta:hover { background: var(--accent-bright) !important; border-color: var(--accent-bright) !important; color: #fff !important; }

/* ── HERO — stays dark for drama, rest of page is light ── */
.hero {
    position: relative;
    height: 100vh;
    min-height: 700px;
    display: flex;
    align-items: center;
    overflow: hidden;
    background: var(--hero-bg);
}
/* override body grid for hero — lighter lines on dark */
.hero::after {
    content: '';
    position: absolute;
    inset: 0;
    background-image:
        linear-gradient(rgba(255,255,255,0.04) 1px, transparent 1px),
        linear-gradient(90deg, rgba(255,255,255,0.04) 1px, transparent 1px);
    background-size: 48px 48px;
    pointer-events: none;
    z-index: 0;
}
.hero-content {
    position: relative;
    z-index: 2;
    padding: 0 48px;
    max-width: 780px;
    margin: 0 auto;
    text-align: center;
}
.hero-eyebrow {
    font-family: 'Space Mono', monospace;
    font-size: 10px;
    letter-spacing: 3px;
    text-transform: uppercase;
    color: var(--accent-bright);
    margin-bottom: 28px;
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 12px;
}
.hero h1 {
    font-family: 'Syne', sans-serif;
    font-size: clamp(52px, 7vw, 88px);
    font-weight: 800;
    line-height: 0.95;
    letter-spacing: -2px;
    color: var(--hero-text);
    margin-bottom: 28px;
}
.hero h1 em { font-style: normal; color: var(--accent-bright); }
.hero-sub {
    font-size: 17px;
    color: var(--hero-muted);
    line-height: 1.65;
    max-width: 460px;
    margin: 0 auto 44px;
    font-weight: 300;
}
.hero-actions { display: flex; gap: 14px; align-items: center; flex-wrap: wrap; justify-content: center; }

.btn-primary {
    display: inline-flex;
    align-items: center;
    gap: 8px;
    background: var(--accent);
    color: #fff;
    font-family: 'Space Mono', monospace;
    font-size: 11px;
    font-weight: 700;
    letter-spacing: 1.5px;
    text-transform: uppercase;
    padding: 14px 28px;
    text-decoration: none;
    border: 1px solid var(--accent);
    transition: all 0.2s;
}
.btn-primary:hover { background: var(--accent-bright); border-color: var(--accent-bright); }
.btn-primary svg { width: 13px; height: 13px; stroke: currentColor; fill: none; stroke-width: 2; }

.btn-secondary {
    display: inline-flex;
    align-items: center;
    gap: 8px;
    background: transparent;
    color: var(--hero-muted);
    font-family: 'Space Mono', monospace;
    font-size: 11px;
    letter-spacing: 1.5px;
    text-transform: uppercase;
    padding: 14px 28px;
    text-decoration: none;
    border: 1px solid rgba(255,255,255,0.18);
    transition: all 0.2s;
}
.btn-secondary:hover { color: var(--hero-text); background: rgba(255,255,255,0.06); }

.hero-corner {
    position: absolute;
    bottom: 48px; right: 48px;
    z-index: 2;
    text-align: right;
}
.hero-corner-label {
    font-family: 'Space Mono', monospace;
    font-size: 9px;
    letter-spacing: 2px;
    color: var(--hero-subtle);
    text-transform: uppercase;
    margin-bottom: 6px;
}
.hero-corner-val {
    font-family: 'Syne', sans-serif;
    font-size: 13px;
    color: var(--accent-bright);
}

/* ── STATS ── */
.stats-bar {
    border-top: 1px solid var(--border);
    border-bottom: 1px solid var(--border);
    background: var(--text);
    position: relative;
    z-index: 1;
}
.stats-inner {
    max-width: 1200px;
    margin: 0 auto;
    padding: 0 48px;
    display: grid;
    grid-template-columns: repeat(4, 1fr);
    gap: 1px;
    background: rgba(255,255,255,0.08);
}
.stat-item {
    background: var(--text);
    padding: 40px 36px;
    text-align: center;
}
.stat-num {
    font-family: 'Syne', sans-serif;
    font-size: 44px;
    font-weight: 800;
    color: var(--accent-bright);
    letter-spacing: -2px;
    line-height: 1;
    margin-bottom: 8px;
}
.stat-label {
    font-family: 'Space Mono', monospace;
    font-size: 10px;
    letter-spacing: 2px;
    text-transform: uppercase;
    color: rgba(240,240,237,0.45);
}

/* ── SECTION BASE ── */
/* The background is a safety floor, not decoration. Now that a fixed
   .machine layer sits behind every page, any section without its own
   background would let the dark ground show through beneath dark body
   copy. Every direct child of <main> is a <section>, so this one rule
   closes the gap site-wide; .hero and .page-hero override it back to
   transparent, and the specific section rules below still win. */
section { position: relative; z-index: 1; background: var(--bg); }
.section-inner { max-width: 1200px; margin: 0 auto; padding: 100px 48px; }
.section-header {
    display: flex;
    align-items: flex-start;
    justify-content: space-between;
    gap: 40px;
    margin-bottom: 64px;
}
.section-label {
    font-family: 'Space Mono', monospace;
    font-size: 10px;
    letter-spacing: 3px;
    text-transform: uppercase;
    color: var(--accent);
    margin-bottom: 16px;
    display: flex;
    align-items: center;
    gap: 10px;
}
.section-label::before {
    content: '';
    display: block;
    width: 20px;
    height: 1px;
    background: var(--accent);
}
.section-title {
    font-family: 'Syne', sans-serif;
    font-size: clamp(32px, 4vw, 52px);
    font-weight: 800;
    letter-spacing: -1px;
    line-height: 1.0;
    color: var(--text);
}
.section-desc {
    font-size: 16px;
    color: var(--text-muted);
    line-height: 1.7;
    max-width: 380px;
    font-weight: 300;
    flex-shrink: 0;
    align-self: flex-end;
}

/* ── SERVICES ── */
#services { border-top: 1px solid var(--border); background: var(--bg); }
.services-grid {
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    gap: 1px;
    background: var(--border);
    border: 1px solid var(--border);
}
.service-card {
    background: var(--bg);
    padding: 44px 36px;
    position: relative;
    overflow: hidden;
    transition: background 0.3s;
}
.service-card::before {
    content: '';
    position: absolute;
    top: 0; left: 0; right: 0;
    height: 2px;
    background: var(--accent);
    transform: scaleX(0);
    transform-origin: left;
    transition: transform 0.35s ease;
}
.service-card:hover { background: #e8ede9; }
.service-card:hover::before { transform: scaleX(1); }

.service-num {
    font-family: 'Space Mono', monospace;
    font-size: 11px;
    color: var(--text-subtle);
    letter-spacing: 2px;
    margin-bottom: 32px;
}
.service-icon {
    width: 44px; height: 44px;
    border: 1px solid var(--accent-border);
    background: var(--accent-dim);
    display: flex;
    align-items: center;
    justify-content: center;
    margin-bottom: 24px;
}
.service-icon svg { width: 20px; height: 20px; stroke: var(--accent); fill: none; stroke-width: 1.5; }
.service-card h3 {
    font-family: 'Syne', sans-serif;
    font-size: 22px;
    font-weight: 700;
    color: var(--text);
    margin-bottom: 14px;
    letter-spacing: -0.3px;
}
.service-card p {
    font-size: 15px;
    color: var(--text-muted);
    line-height: 1.65;
    font-weight: 300;
}
.service-link {
    display: inline-flex;
    align-items: center;
    gap: 8px;
    margin-top: 28px;
    font-family: 'Space Mono', monospace;
    font-size: 10px;
    letter-spacing: 1.5px;
    text-transform: uppercase;
    color: var(--accent);
    text-decoration: none;
    opacity: 0;
    transition: opacity 0.2s;
}
.service-card:hover .service-link { opacity: 1; }
.service-link svg { width: 13px; height: 13px; stroke: currentColor; fill: none; stroke-width: 2; }

/* ── PORTFOLIO ── */
#portfolio { border-top: 1px solid var(--border); background: var(--bg-2); }
.portfolio-grid {
    display: grid;
    grid-template-columns: repeat(2, 1fr);
    gap: 16px;
}
.portfolio-item {
    position: relative;
    background: var(--bg);
    border: 1px solid var(--border);
    padding: 48px 36px;
    overflow: hidden;
    transition: border-color 0.3s, background 0.3s;
    min-height: 220px;
    display: flex;
    flex-direction: column;
    justify-content: flex-end;
}
.portfolio-item:hover { border-color: var(--accent-border); background: #edf5f0; }
.portfolio-item-tag {
    font-family: 'Space Mono', monospace;
    font-size: 9px;
    letter-spacing: 2px;
    text-transform: uppercase;
    color: var(--accent);
    background: var(--accent-dim);
    border: 1px solid var(--accent-border);
    padding: 4px 10px;
    width: fit-content;
    margin-bottom: 12px;
}
.portfolio-item h3 {
    font-family: 'Syne', sans-serif;
    font-size: 22px;
    font-weight: 700;
    color: var(--text);
    letter-spacing: -0.3px;
    margin-bottom: 8px;
}
.portfolio-item p { font-size: 14px; color: var(--text-muted); font-weight: 300; }
.portfolio-placeholder {
    position: absolute;
    top: 28px; right: 28px;
    font-family: 'Space Mono', monospace;
    font-size: 10px;
    color: var(--text-subtle);
    letter-spacing: 1px;
}
.portfolio-large { grid-column: span 2; min-height: 180px; }
.portfolio-cta {
    grid-column: span 2;
    display: flex;
    align-items: center;
    justify-content: space-between;
    padding: 28px 0 0;
    border-top: 1px solid var(--border);
}
.portfolio-cta p { font-size: 15px; color: var(--text-muted); }

/* ── CONTACT ── */
/* The background is load-bearing, not cosmetic: it is the same colour the
   section already inherited from body, but it stops the fixed .machine
   layer showing through behind the copy. Every other section on the home
   page already carries one; this was the only transparent one. */
#contact { border-top: 1px solid var(--border); background: var(--bg); }
.contact-grid {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 80px;
    align-items: start;
}
.contact-info h2 {
    font-family: 'Syne', sans-serif;
    font-size: clamp(32px, 4vw, 52px);
    font-weight: 800;
    letter-spacing: -1px;
    line-height: 1.0;
    margin-bottom: 24px;
    color: var(--text);
}
.contact-info h2 em { font-style: normal; color: var(--accent); }
.contact-info > p {
    font-size: 16px;
    color: var(--text-muted);
    line-height: 1.7;
    margin-bottom: 40px;
    font-weight: 300;
}
.contact-details { display: flex; flex-direction: column; gap: 24px; }
.contact-detail { display: flex; flex-direction: column; gap: 5px; }
.contact-detail-label {
    font-family: 'Space Mono', monospace;
    font-size: 9px;
    letter-spacing: 2px;
    text-transform: uppercase;
    color: var(--text-subtle);
}
.contact-detail-val { font-size: 15px; color: var(--text-muted); }
.contact-detail-val a { color: var(--accent); text-decoration: none; }
.contact-detail-val a:hover { text-decoration: underline; }

/* Form */
.contact-form {
    background: var(--bg-2);
    border: 1px solid var(--border);
    padding: 44px;
}
.form-group { margin-bottom: 20px; }
.form-label {
    display: block;
    font-family: 'Space Mono', monospace;
    font-size: 9px;
    letter-spacing: 2px;
    text-transform: uppercase;
    color: var(--text-subtle);
    margin-bottom: 8px;
}
.form-control {
    width: 100%;
    background: var(--bg);
    border: 1px solid var(--border);
    color: var(--text);
    font-family: 'DM Sans', sans-serif;
    font-size: 15px;
    padding: 13px 16px;
    outline: none;
    transition: border-color 0.2s, background 0.2s;
    -webkit-appearance: none;
    border-radius: 0;
}
.form-control::placeholder { color: var(--text-subtle); }
.form-control:focus { border-color: var(--accent-border); background: #fff; }
select.form-control { cursor: pointer; }
select.form-control option { background: var(--bg); color: var(--text); }
textarea.form-control { height: 120px; resize: vertical; }
.form-row { display: grid; grid-template-columns: 1fr 1fr; gap: 16px; }
.btn-submit {
    width: 100%;
    background: var(--accent);
    color: #fff;
    font-family: 'Space Mono', monospace;
    font-size: 11px;
    font-weight: 700;
    letter-spacing: 2px;
    text-transform: uppercase;
    padding: 16px;
    border: none;
    cursor: pointer;
    margin-top: 8px;
    transition: background 0.2s;
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 10px;
}
.btn-submit:hover { background: var(--accent-bright); }
.btn-submit:disabled { opacity: 0.5; cursor: not-allowed; }
.btn-submit svg { width: 13px; height: 13px; stroke: currentColor; fill: none; stroke-width: 2; }
.form-status {
    margin-top: 14px;
    font-family: 'Space Mono', monospace;
    font-size: 10px;
    letter-spacing: 1px;
    text-align: center;
    display: none;
    line-height: 1.6;
}
.form-status.success { color: var(--accent); display: block; }
.form-status.error { color: #c0392b; display: block; }

/* ── FOOTER ── */
footer {
    border-top: 1px solid var(--border);
    background: var(--text);
    position: relative;
    z-index: 1;
}
.footer-inner {
    max-width: 1200px;
    margin: 0 auto;
    padding: 36px 48px;
    display: flex;
    align-items: center;
    justify-content: space-between;
}
.footer-logo {
    font-family: 'Syne', sans-serif;
    font-weight: 800;
    font-size: 14px;
    color: rgba(240,240,237,0.4);
}
.footer-copy {
    font-family: 'Space Mono', monospace;
    font-size: 10px;
    letter-spacing: 1px;
    color: rgba(240,240,237,0.25);
}
.footer-links { display: flex; gap: 24px; list-style: none; }
.footer-links a {
    font-family: 'Space Mono', monospace;
    font-size: 10px;
    letter-spacing: 1px;
    text-transform: uppercase;
    color: rgba(240,240,237,0.3);
    text-decoration: none;
    transition: color 0.2s;
}
.footer-links a:hover { color: var(--accent-bright); }

/* ── RESPONSIVE ── */
@media (max-width: 900px) {
    nav { padding: 0 20px; }
    .nav-toggle { display: flex; }
    /* Mobile menu now actually opens instead of just disappearing —
       Google indexes mobile-first, and a nav with no way to reach
       Services / Pricing / Contact on a phone hurts both crawling and UX. */
    .nav-links {
        position: absolute;
        top: 64px; left: 0; right: 0;
        flex-direction: column;
        align-items: stretch;
        gap: 0;
        background: var(--nav-bg);
        backdrop-filter: blur(14px);
        border-bottom: 1px solid rgba(240, 240, 237, 0.12);
        padding: 8px 20px 16px;
        display: none;
    }
    .nav-links.open { display: flex; }
    .nav-links a { padding: 14px 4px; font-size: 11px; }
    .nav-cta { text-align: center; margin-top: 8px; padding: 14px !important; }
    .pricing-grid { grid-template-columns: 1fr; }
    .care-grid { grid-template-columns: 1fr; }
    .price-card .price-who { min-height: 0; }
    .faq-q { font-size: 16px; padding-right: 32px; }
    .faq-a { padding-right: 20px; }
    .hero-content { padding: 0 24px; }
    .hero-corner { display: none; }
    .section-inner { padding: 64px 24px; }
    .section-header { flex-direction: column; gap: 20px; }
    .section-desc { max-width: 100%; }
    .services-grid { grid-template-columns: 1fr; }
    .portfolio-grid { grid-template-columns: 1fr; }
    .portfolio-large { grid-column: span 1; }
    .portfolio-cta { grid-column: span 1; flex-direction: column; align-items: flex-start; gap: 16px; }
    .stats-inner { grid-template-columns: repeat(2, 1fr); }
    .contact-grid { grid-template-columns: 1fr; gap: 48px; }
    .form-row { grid-template-columns: 1fr; }
    .footer-inner { flex-direction: column; gap: 16px; text-align: center; }
    .footer-links { justify-content: center; }
}

/* ── SCROLL ANIMATIONS ──
   Scoped to html.js so that if JavaScript fails, is blocked, or a crawler
   doesn't execute it, all content stays visible instead of invisible. */
html.js .reveal {
    opacity: 0;
    transform: translateY(20px);
    transition: opacity 0.55s ease, transform 0.55s ease;
}
html.js .reveal.visible { opacity: 1; transform: translateY(0); }

@media (prefers-reduced-motion: reduce) {
    html { scroll-behavior: auto; }
    html.js .reveal { opacity: 1; transform: none; transition: none; }
    *, *::before, *::after { animation-duration: 0.001ms !important; transition-duration: 0.001ms !important; }
}

/* ── ACCESSIBILITY: SKIP LINK ── */
.skip-link {
    position: absolute;
    left: -9999px;
    top: 0;
    z-index: 200;
    background: var(--accent);
    color: #fff;
    padding: 12px 20px;
    font-family: 'Space Mono', monospace;
    font-size: 11px;
    letter-spacing: 1.5px;
    text-transform: uppercase;
    text-decoration: none;
}
.skip-link:focus { left: 8px; top: 8px; }

/* ── MOBILE NAV TOGGLE ── */
.nav-toggle {
    display: none;
    background: transparent;
    border: 1px solid rgba(240, 240, 237, 0.28);
    width: 40px; height: 34px;
    cursor: pointer;
    align-items: center;
    justify-content: center;
    flex-direction: column;
    gap: 4px;
    padding: 0;
}
.nav-toggle span {
    display: block;
    width: 16px; height: 1.5px;
    background: var(--hero-text);
    transition: transform 0.25s, opacity 0.2s;
}
.nav-toggle[aria-expanded="true"] span:nth-child(1) { transform: translateY(5.5px) rotate(45deg); }
.nav-toggle[aria-expanded="true"] span:nth-child(2) { opacity: 0; }
.nav-toggle[aria-expanded="true"] span:nth-child(3) { transform: translateY(-5.5px) rotate(-45deg); }

/* ── PRICING ── */
#pricing { border-top: 1px solid var(--border); background: var(--bg); }
.pricing-grid {
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    gap: 1px;
    background: var(--border);
    border: 1px solid var(--border);
    margin-bottom: 56px;
}
.price-card {
    background: var(--bg);
    padding: 40px 32px;
    display: flex;
    flex-direction: column;
    position: relative;
}
.price-card.featured { background: #e8ede9; }
.price-card.featured::before {
    content: '';
    position: absolute;
    top: 0; left: 0; right: 0;
    height: 2px;
    background: var(--accent);
}
.price-badge {
    position: absolute;
    top: -1px; right: 24px;
    font-family: 'Space Mono', monospace;
    font-size: 8px;
    letter-spacing: 1.5px;
    text-transform: uppercase;
    background: var(--accent);
    color: #fff;
    padding: 4px 10px;
}
.price-tier {
    font-family: 'Space Mono', monospace;
    font-size: 10px;
    letter-spacing: 2px;
    text-transform: uppercase;
    color: var(--accent);
    margin-bottom: 18px;
}
.price-card h3 {
    font-family: 'Syne', sans-serif;
    font-size: 21px;
    font-weight: 700;
    letter-spacing: -0.3px;
    margin-bottom: 10px;
    color: var(--text);
}
.price-card .price-who {
    font-size: 14px;
    color: var(--text-muted);
    line-height: 1.6;
    font-weight: 300;
    margin-bottom: 26px;
    min-height: 66px;
}
.price-amount {
    display: flex;
    align-items: baseline;
    gap: 6px;
    margin-bottom: 4px;
}
.price-from {
    font-family: 'Space Mono', monospace;
    font-size: 10px;
    letter-spacing: 1.5px;
    text-transform: uppercase;
    color: var(--text-subtle);
}
.price-num {
    font-family: 'Syne', sans-serif;
    font-size: 42px;
    font-weight: 800;
    letter-spacing: -2px;
    line-height: 1;
    color: var(--text);
}
.price-note {
    font-family: 'Space Mono', monospace;
    font-size: 9px;
    letter-spacing: 1px;
    color: var(--text-subtle);
    margin-bottom: 26px;
}
.price-features {
    list-style: none;
    display: flex;
    flex-direction: column;
    gap: 11px;
    margin-bottom: 32px;
    flex: 1;
}
.price-features li {
    font-size: 14px;
    color: var(--text-muted);
    line-height: 1.55;
    font-weight: 300;
    padding-left: 20px;
    position: relative;
}
.price-features li::before {
    content: '';
    position: absolute;
    left: 0; top: 8px;
    width: 7px; height: 7px;
    border: 1px solid var(--accent);
    background: var(--accent-dim);
}
.price-cta {
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 8px;
    font-family: 'Space Mono', monospace;
    font-size: 10px;
    font-weight: 700;
    letter-spacing: 1.5px;
    text-transform: uppercase;
    text-decoration: none;
    padding: 13px 20px;
    border: 1px solid var(--accent);
    color: var(--accent);
    transition: all 0.2s;
}
.price-cta:hover { background: var(--accent); color: #fff; }
.price-cta.solid { background: var(--accent); color: #fff; }
.price-cta.solid:hover { background: var(--accent-bright); border-color: var(--accent-bright); }

/* Care plans */
.care-header { margin-bottom: 28px; }
.care-header h3 {
    font-family: 'Syne', sans-serif;
    font-size: 26px;
    font-weight: 800;
    letter-spacing: -0.5px;
    margin-bottom: 8px;
    color: var(--text);
}
.care-header p { font-size: 15px; color: var(--text-muted); font-weight: 300; max-width: 620px; line-height: 1.65; }
.care-grid {
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    gap: 16px;
    margin-bottom: 40px;
}
.care-card {
    border: 1px solid var(--border);
    background: var(--bg-2);
    padding: 28px 26px;
}
.care-card:hover { border-color: var(--accent-border); }
.care-name {
    font-family: 'Syne', sans-serif;
    font-size: 17px;
    font-weight: 700;
    margin-bottom: 12px;
    color: var(--text);
}
.care-price {
    display: flex;
    align-items: baseline;
    gap: 4px;
    margin-bottom: 18px;
}
.care-price-num {
    font-family: 'Syne', sans-serif;
    font-size: 28px;
    font-weight: 800;
    letter-spacing: -1px;
    color: var(--accent);
}
.care-price-per {
    font-family: 'Space Mono', monospace;
    font-size: 10px;
    color: var(--text-subtle);
    letter-spacing: 1px;
}
.care-list { list-style: none; display: flex; flex-direction: column; gap: 8px; }
.care-list li {
    font-size: 13.5px;
    color: var(--text-muted);
    font-weight: 300;
    line-height: 1.5;
    padding-left: 16px;
    position: relative;
}
.care-list li::before {
    content: '';
    position: absolute;
    left: 0; top: 8px;
    width: 5px; height: 1px;
    background: var(--accent);
}
.pricing-footnote {
    border-top: 1px solid var(--border);
    padding-top: 28px;
    display: flex;
    align-items: flex-start;
    justify-content: space-between;
    gap: 40px;
    flex-wrap: wrap;
}
.pricing-footnote p {
    font-size: 14px;
    color: var(--text-muted);
    font-weight: 300;
    line-height: 1.7;
    max-width: 560px;
}
.pricing-footnote strong { color: var(--text); font-weight: 500; }
.pricing-footnote p a {
    color: var(--accent);
    text-decoration: none;
    border-bottom: 1px solid var(--accent-border);
}
.pricing-footnote p a:hover { border-bottom-color: var(--accent); }

/* ── FAQ ── */
#faq { border-top: 1px solid var(--border); background: var(--bg-2); }
.faq-list { border-top: 1px solid var(--border); }
.faq-item { border-bottom: 1px solid var(--border); }
.faq-q {
    width: 100%;
    background: transparent;
    border: none;
    cursor: pointer;
    text-align: left;
    padding: 24px 40px 24px 0;
    font-family: 'Syne', sans-serif;
    font-size: 17px;
    font-weight: 700;
    color: var(--text);
    position: relative;
    letter-spacing: -0.2px;
    line-height: 1.4;
}
.faq-q:hover { color: var(--accent); }
.faq-q::after {
    content: '+';
    position: absolute;
    right: 6px; top: 50%;
    transform: translateY(-50%);
    font-family: 'Space Mono', monospace;
    font-size: 18px;
    font-weight: 400;
    color: var(--accent);
}
.faq-q[aria-expanded="true"]::after { content: '–'; }
.faq-a {
    padding: 0 60px 26px 0;
    font-size: 15px;
    line-height: 1.75;
    color: var(--text-muted);
    font-weight: 300;
}
.faq-a[hidden] { display: none; }

/* ── FOOTER NAP ── */
.footer-nap {
    font-family: 'Space Mono', monospace;
    font-size: 10px;
    letter-spacing: 0.5px;
    line-height: 1.9;
    color: rgba(240,240,237,0.3);
}
.footer-nap a { color: rgba(240,240,237,0.45); text-decoration: none; }
.footer-nap a:hover { color: var(--accent-bright); }

/* ══════════════════════════════════════════════════════════════
   INTERIOR PAGE COMPONENTS
   Added for the multi-page build (service pages, pricing,
   portfolio, contact). The home page keeps the tall 3D hero;
   interior pages use a shorter static header so they load fast.
   ══════════════════════════════════════════════════════════════ */

/* ── PAGE HEADER (interior pages) ── */
/* Transparent so the machine reads through, exactly as .hero does on the
   home page — .m-ground supplies the dark now. Taller than it was (was
   just padding) to give the camera somewhere to move, but deliberately
   short of 100vh so the actual page content still starts above the fold. */
.page-hero {
    background: transparent;
    position: relative;
    overflow: hidden;
    padding: 140px 0 72px;
    min-height: 78vh;
    display: flex;
    align-items: center;
}
.page-hero::after {
    content: '';
    position: absolute;
    inset: 0;
    background-image:
        linear-gradient(rgba(255,255,255,0.04) 1px, transparent 1px),
        linear-gradient(90deg, rgba(255,255,255,0.04) 1px, transparent 1px);
    background-size: 48px 48px;
    pointer-events: none;
}
.page-hero-inner {
    position: relative;
    z-index: 2;
    width: 100%;          /* .page-hero is a flex container now */
    max-width: 1200px;
    margin: 0 auto;
    padding: 0 48px;
}
.page-hero h1 {
    font-family: 'Syne', sans-serif;
    font-size: clamp(36px, 5vw, 60px);
    font-weight: 800;
    line-height: 1.02;
    letter-spacing: -1.5px;
    color: var(--hero-text);
    max-width: 780px;
    margin-bottom: 22px;
}
.page-hero h1 em { font-style: normal; color: var(--accent-bright); }
.page-hero-sub {
    font-size: 17px;
    line-height: 1.7;
    color: var(--hero-muted);
    max-width: 620px;
    font-weight: 300;
    margin-bottom: 32px;
}
.page-hero .hero-actions { justify-content: flex-start; }

/* ── BREADCRUMBS ── */
.breadcrumb {
    font-family: 'Space Mono', monospace;
    font-size: 9px;
    letter-spacing: 2px;
    text-transform: uppercase;
    margin-bottom: 24px;
}
.breadcrumb ol { list-style: none; display: flex; flex-wrap: wrap; gap: 8px; align-items: center; }
.breadcrumb a { color: var(--hero-subtle); text-decoration: none; }
.breadcrumb a:hover { color: var(--accent-bright); }
.breadcrumb li:not(:last-child)::after { content: '/'; margin-left: 8px; color: rgba(240,240,237,0.15); }
.breadcrumb [aria-current] { color: var(--accent-bright); }

/* ── PROSE ── */
.prose { max-width: 760px; }
.prose h2 {
    font-family: 'Syne', sans-serif;
    font-size: clamp(26px, 3vw, 36px);
    font-weight: 800;
    letter-spacing: -0.8px;
    line-height: 1.1;
    color: var(--text);
    margin: 56px 0 18px;
}
.prose h2:first-child { margin-top: 0; }
.prose h3 {
    font-family: 'Syne', sans-serif;
    font-size: 19px;
    font-weight: 700;
    letter-spacing: -0.2px;
    color: var(--text);
    margin: 32px 0 10px;
}
.prose p {
    font-size: 16px;
    line-height: 1.75;
    color: var(--text-muted);
    font-weight: 300;
    margin-bottom: 18px;
}
.prose p strong { color: var(--text); font-weight: 500; }
.prose code { font-family: 'Space Mono', monospace; font-size: 0.88em; background: var(--bg-3); border: 1px solid var(--border); border-radius: 3px; padding: 0.1em 0.35em; }
.prose a { color: var(--accent); text-decoration: none; border-bottom: 1px solid var(--accent-border); }
.prose a:hover { border-bottom-color: var(--accent); }
.prose ul, .prose ol { margin: 0 0 22px 0; padding-left: 0; list-style: none; }
.prose ul li {
    font-size: 16px;
    line-height: 1.7;
    color: var(--text-muted);
    font-weight: 300;
    padding-left: 22px;
    position: relative;
    margin-bottom: 10px;
}
.prose ul li::before {
    content: '';
    position: absolute;
    left: 0; top: 10px;
    width: 7px; height: 7px;
    border: 1px solid var(--accent);
    background: var(--accent-dim);
}
.prose ul li strong { color: var(--text); font-weight: 500; }

/* Pull quote / callout */
.callout {
    border-left: 2px solid var(--accent);
    background: var(--accent-dim);
    padding: 22px 26px;
    margin: 32px 0;
}
.callout p { margin: 0; font-size: 15.5px; color: var(--text); line-height: 1.7; }

/* ── PROCESS STEPS ── */
.steps { display: grid; gap: 1px; background: var(--border); border: 1px solid var(--border); margin: 36px 0 8px; }
.step { background: var(--bg); padding: 28px 32px; display: grid; grid-template-columns: 56px 1fr; gap: 20px; align-items: start; }
.step-num {
    font-family: 'Space Mono', monospace;
    font-size: 11px;
    letter-spacing: 1px;
    color: var(--accent);
    padding-top: 4px;
}
.step h3 { font-family: 'Syne', sans-serif; font-size: 18px; font-weight: 700; margin-bottom: 7px; color: var(--text); }
.step p { font-size: 15px; line-height: 1.65; color: var(--text-muted); font-weight: 300; margin: 0; }

/* ── COMPARISON TABLE ── */
.cmp-wrap { overflow-x: auto; margin: 32px 0; border: 1px solid var(--border); }
table.cmp { width: 100%; border-collapse: collapse; min-width: 520px; background: var(--bg); }
table.cmp caption {
    caption-side: top;
    text-align: left;
    font-family: 'Space Mono', monospace;
    font-size: 9px;
    letter-spacing: 2px;
    text-transform: uppercase;
    color: var(--text-subtle);
    padding: 16px 20px 12px;
}
table.cmp th, table.cmp td {
    text-align: left;
    padding: 14px 20px;
    border-top: 1px solid var(--border);
    font-size: 14.5px;
    font-weight: 300;
    color: var(--text-muted);
    line-height: 1.55;
}
table.cmp thead th {
    font-family: 'Space Mono', monospace;
    font-size: 9px;
    letter-spacing: 1.5px;
    text-transform: uppercase;
    color: var(--text);
    font-weight: 700;
}
table.cmp tbody th { color: var(--text); font-weight: 500; font-family: 'DM Sans', sans-serif; font-size: 14.5px; }
table.cmp .yes { color: var(--accent); }

/* ── CTA BAND ── */
.cta-band { background: var(--text); position: relative; z-index: 1; }
.cta-band-inner {
    max-width: 1200px;
    margin: 0 auto;
    padding: 64px 48px;
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 40px;
    flex-wrap: wrap;
}
.cta-band h2 {
    font-family: 'Syne', sans-serif;
    font-size: clamp(26px, 3.4vw, 40px);
    font-weight: 800;
    letter-spacing: -1px;
    line-height: 1.05;
    color: var(--hero-text);
    margin-bottom: 12px;
}
.cta-band h2 em { font-style: normal; color: var(--accent-bright); }
.cta-band p { font-size: 15.5px; color: rgba(240,240,237,0.45); font-weight: 300; max-width: 520px; line-height: 1.65; }

/* ── RELATED / NEXT LINKS ── */
.related { border-top: 1px solid var(--border); margin-top: 64px; padding-top: 36px; }
.related-label {
    font-family: 'Space Mono', monospace;
    font-size: 9px;
    letter-spacing: 2px;
    text-transform: uppercase;
    color: var(--text-subtle);
    margin-bottom: 20px;
}
.related-grid { display: grid; grid-template-columns: repeat(3, 1fr); gap: 16px; }
.related-card {
    border: 1px solid var(--border);
    background: var(--bg-2);
    padding: 24px 26px;
    text-decoration: none;
    display: block;
    transition: border-color 0.2s, background 0.2s;
}
.related-card:hover { border-color: var(--accent-border); background: #edf5f0; }
.related-card .rc-title {
    font-family: 'Syne', sans-serif;
    font-size: 17px;
    font-weight: 700;
    color: var(--text);
    margin-bottom: 6px;
}
.related-card .rc-desc { font-size: 13.5px; color: var(--text-muted); font-weight: 300; line-height: 1.55; }

/* ── PORTFOLIO DETAIL ── */
.case { border: 1px solid var(--border); background: var(--bg); padding: 40px 40px 36px; margin-bottom: 20px; }
.case-meta { display: flex; flex-wrap: wrap; gap: 8px; margin-bottom: 18px; }
.case h2 {
    font-family: 'Syne', sans-serif;
    font-size: 27px;
    font-weight: 800;
    letter-spacing: -0.6px;
    color: var(--text);
    margin-bottom: 14px;
}
.case p { font-size: 15.5px; line-height: 1.72; color: var(--text-muted); font-weight: 300; margin-bottom: 14px; }
.case-facts { display: grid; grid-template-columns: repeat(3, 1fr); gap: 1px; background: var(--border); border: 1px solid var(--border); margin: 24px 0 22px; }
.case-fact { background: var(--bg-2); padding: 18px 20px; }
.case-fact-label {
    font-family: 'Space Mono', monospace;
    font-size: 8px;
    letter-spacing: 1.5px;
    text-transform: uppercase;
    color: var(--text-subtle);
    margin-bottom: 5px;
}
.case-fact-val { font-size: 14px; color: var(--text); font-weight: 500; }

/* ── ACTIVE NAV STATE ── */
.nav-links a[aria-current="page"] { color: var(--accent-bright); border-color: rgba(16,201,138,0.45); background: rgba(16,201,138,0.10); }
.nav-links a.nav-cta[aria-current="page"] { color: #fff !important; }

/* ── INTERIOR RESPONSIVE ── */
@media (max-width: 900px) {
    .page-hero { padding: 108px 0 52px; }
    .page-hero-inner { padding: 0 24px; }
    .related-grid { grid-template-columns: 1fr; }
    .case { padding: 28px 24px; }
    .case-facts { grid-template-columns: 1fr; }
    .cta-band-inner { padding: 48px 24px; flex-direction: column; align-items: flex-start; }
    .step { grid-template-columns: 1fr; gap: 8px; padding: 24px; }
    .prose h2 { margin-top: 44px; }
}

/* ── CONCEPT BUILDS (/concept-builds/) ── */
.concept-badge {
    display: inline-flex;
    align-items: center;
    gap: 7px;
    font-family: 'Space Mono', monospace;
    font-size: 10px;
    letter-spacing: 1.4px;
    text-transform: uppercase;
    color: var(--accent);
    border: 1px solid var(--accent-border);
    background: var(--accent-dim);
    padding: 4px 10px;
}
.tier-rail {
    display: grid;
    gap: 1px;
    background: var(--border);
    border: 1px solid var(--border);
    margin-bottom: 56px;
}
@media (min-width: 820px) {
    .tier-rail { grid-template-columns: repeat(3, 1fr); }
}
.tier-cell {
    background: var(--bg);
    padding: 22px 24px 26px;
    text-decoration: none;
    display: block;
    transition: background .2s;
}
.tier-cell:hover { background: var(--bg-2); }
.tier-cell .tc-tier {
    font-family: 'Space Mono', monospace;
    font-size: 10px;
    letter-spacing: 1.6px;
    text-transform: uppercase;
    color: var(--text-subtle);
}
.tier-cell .tc-name {
    font-family: 'Syne', sans-serif;
    font-weight: 700;
    font-size: 21px;
    margin: 9px 0 4px;
    color: var(--text);
}
.tier-cell .tc-price { font-family: 'Space Mono', monospace; font-size: 13px; color: var(--accent); }
.tier-cell .tc-desc { font-size: 14.5px; color: var(--text-muted); margin-top: 10px; line-height: 1.55; }
.case-demo {
    border-left: 2px solid var(--accent);
    padding-left: 22px;
    margin: 26px 0;
}
.case-demo .cd-label {
    font-family: 'Space Mono', monospace;
    font-size: 10px;
    letter-spacing: 1.5px;
    text-transform: uppercase;
    color: var(--text-subtle);
    margin-bottom: 9px;
}
.case-demo ul { margin: 0; padding-left: 19px; display: grid; gap: 7px; }
.case-demo li { font-size: 15.5px; color: var(--text-muted); line-height: 1.55; }
.case-demo li strong { color: var(--text); font-weight: 500; }
.demo-actions { display: flex; gap: 12px; flex-wrap: wrap; align-items: center; margin-top: 8px; }


/* ── Mobile layout corrections ──────────────────────────────────────────
   .pricing-grid / .care-grid set repeat(3,1fr) later in this file than the
   max-width:900px block that sets them to 1fr, so the desktop rule was
   winning the cascade and both grids overflowed the viewport on phones.
   Re-declared here, at the end, where the media query can take effect. */
@media (max-width: 900px) {
  .pricing-grid,
  .care-grid { grid-template-columns: 1fr; }
  /* grid items default to min-width:auto and refuse to shrink below their
     content, which is what pushed the columns past the screen edge */
  .pricing-grid > *,
  .care-grid > *,
  .stats-inner > * { min-width: 0; }
}
@media (max-width: 640px) {
  .stats-inner { grid-template-columns: 1fr; }
}

/* Footer link row had no wrap, so it sat 5px wider than the viewport. */
.footer-links { flex-wrap: wrap; }

/* The nav is dark now (--nav-bg), so the monogram no longer needs the
   dimmed #075c42 it wore to clear 4.5:1 against a light composited bar.
   Brand green on the dark nav measures ~8:1. */

/* ══════════════════════════════════════════════════════════════
   THE MACHINE — home-page scroll background
   Replaces the three.js torus knot. A monitor and keyboard drawn as
   SVG line art on one fixed layer; scrolling moves the camera from
   inside the screen, out, and down over the desk to the keyboard.

   site.js recomputes the custom properties below on scroll, so all
   the easing maths lives in one function there rather than being
   smeared across a dozen keyframe blocks here.

   Every default value below is the composed "both in shot" frame, so
   with JavaScript off — or reduced motion on — the page still gets a
   sensible static picture instead of a blank dark box.

   Only index.html carries .machine / .hero / .stats-bar markup, so
   none of this reaches the inner pages.
   ══════════════════════════════════════════════════════════════ */
/* Confined to the hero by default, and only promoted to a full-viewport
   fixed layer once site.js is actually driving the camera.

   This matters: the defaults below paint an opaque dark ground. If the
   layer were fixed and full-page before the script ran — or for a
   reduced-motion visitor, or one with JS blocked — that dark ground would
   sit behind every section on the page, and the light theme's dark body
   copy would be invisible on top of it. Scoping it to the hero means the
   static fallback is a correct picture rather than a broken page. */
.machine {
    position: absolute;
    top: 0; left: 0; right: 0;
    height: 100vh;
    min-height: 700px;   /* matches .hero / .page-hero */
    z-index: 0;
    pointer-events: none;
    overflow: hidden;
}
body.machine-live .machine {
    position: fixed;
    inset: 0;
    height: auto;
    min-height: 0;
}
.m-ground {
    position: absolute; inset: 0;
    background: var(--hero-bg);
    opacity: var(--ground-a, 1);
}
/* Room light spilling off the screen. */
.m-glow {
    position: absolute; inset: 0;
    opacity: var(--glow-a, 0.35);
    background:
        radial-gradient(ellipse 92% 72% at 50% 42%,
            rgba(16, 201, 138, 0.20),
            rgba(13, 158, 110, 0.06) 45%,
            transparent 72%);
}
/* Desk surface — a horizon line plus a pool of bounced light. */
.m-desk {
    position: absolute;
    left: -12vw; right: -12vw; bottom: 0;
    height: 72vh;
    opacity: var(--desk-a, 1);
    transform: translate3d(0, var(--desk-y, 6%), 0);
    border-top: 1px solid rgba(110, 231, 183, 0.20);
    background: linear-gradient(to top,
        rgba(13, 158, 110, 0.11),
        rgba(13, 158, 110, 0.02) 42%,
        transparent 72%);
}
/* Monitor. Width is set in px by site.js so the opening scale can be
   solved exactly — at the top of the page the inner screen rect covers
   the viewport on both axes, whatever shape the window is. */
.m-monitor {
    position: absolute; inset: 0;
    display: grid; place-items: center;
    perspective: 1700px;
    opacity: var(--mon-a, 1);
}
.m-monitor svg {
    width: var(--mon-w, min(86vw, 79vh));
    height: auto;
    overflow: visible;
    transform:
        translate3d(0, var(--mon-y, -16vh), 0)
        rotateX(var(--mon-rot, 0deg))
        scale(var(--mon-scale, 1));
    transform-origin: 50% 39%;
    color: rgb(var(--mon-rgb, 110 231 183));
}
/* Strokes ride currentColor so the whole machine can travel from
   green-on-dark to ink-on-light; the solid bezel and stand fill
   dissolves into the page background, leaving pure line art. */
.m-bezel  { fill: rgb(var(--bezel-rgb, 20 25 23)); stroke: currentColor; stroke-opacity: 0.34; stroke-width: 3; }
.m-screen { fill: none; stroke: currentColor; stroke-opacity: 0.22; stroke-width: 2; }
.m-chrome { fill: none; stroke: currentColor; stroke-opacity: 0.28; stroke-width: 3; }
.m-stand  { fill: rgb(var(--bezel-rgb, 20 25 23)); stroke: currentColor; stroke-opacity: 0.30; stroke-width: 3; }
.m-brand  { fill: currentColor; fill-opacity: 0.38; font-family: 'Space Mono', monospace; font-size: 22px; letter-spacing: 5px; text-anchor: middle; }
.m-scrglow { opacity: var(--scrglow-a, 1); }
.m-led     { fill: #10c98a; opacity: var(--led-a, 1); }

/* Keyboard. Drawn flat, then given real perspective by rotateX — far
   cheaper and more accurate than hand-drawing trapezoids. Sized off
   viewport HEIGHT, because rotateX collapses the drawing to ~cos(rot)
   of its flat height; the vw term is the portrait guard. */
.m-keyboard {
    position: absolute;
    left: 50%; bottom: 0;
    width: min(186vh, 230vw);
    transform: translate3d(-50%, 0, 0);
    perspective: 1150px;
    /* --kb-boost lifts the watermark only while the handoff line is
       being produced. The 22% ceiling --kb-a settles at exists because
       ink above that competes with body copy, so it is raised for the
       moment something is happening and released again, not relaxed. */
    opacity: calc(var(--kb-a, 1) * var(--kb-boost, 1));
}
.kb-tilt {
    transform:
        translate3d(0, var(--kb-y, 6vh), 0)
        rotateX(var(--kb-rot, 64deg))
        scale(var(--kb-scale, 1));
    transform-origin: 50% 100%;
}
.m-keyboard svg {
    width: 100%; height: auto; display: block;
    color: rgb(var(--kb-rgb, 110 231 183));
}
.kb-case { fill: none; stroke: currentColor; stroke-opacity: 0.32; stroke-width: 3; }
.kb-key  { fill: currentColor; fill-opacity: 0.045; stroke: currentColor; stroke-opacity: 0.28; stroke-width: 2; }
.kb-lab  { fill: currentColor; fill-opacity: 0.30; font-family: 'Space Mono', monospace; font-size: 27px; text-anchor: middle; }
.kb-lab.sm { font-size: 19px; }
.kb-bump { fill: currentColor; fill-opacity: 0.45; }
/* E V O 3 D stay lit. */
.kb-key.brand { fill-opacity: 0.15; stroke-opacity: 0.52; }

body.keys-on .kb-key       { animation: keyPulse 5.4s ease-in-out infinite; }
body.keys-on .kb-key.brand { animation: brandPulse 3.4s ease-in-out infinite; }
@keyframes keyPulse   { 0%, 86%, 100% { fill-opacity: 0.045 } 92% { fill-opacity: 0.20 } }
@keyframes brandPulse { 0%, 100% { fill-opacity: 0.13 } 50% { fill-opacity: 0.26 } }

/* CRT treatment. Only meaningful while we are still inside the screen,
   hence the 0 default — it is scrolled in, never scrolled out of. */
.m-scan {
    position: absolute; inset: -4px;
    opacity: var(--scan-a, 0);
    background: repeating-linear-gradient(to bottom,
        rgba(0,0,0,0.30) 0 1px, rgba(0,0,0,0) 1px 3px);
    animation: scanDrift 7s linear infinite;
}
@keyframes scanDrift { to { transform: translate3d(0, 3px, 0); } }
.m-vign {
    position: absolute; inset: 0;
    opacity: var(--scan-a, 0);
    background: radial-gradient(ellipse 80% 70% at 50% 45%, transparent 40%, rgba(0,0,0,0.55));
}

/* The hero is now the monitor's display, so .m-ground supplies the dark
   rather than the section itself. */
.hero { background: transparent; }
/* Stats bar was opaque #111110; made translucent so the keyboard is
   visible travelling behind it as the camera comes down. */
.stats-bar   { background: rgba(17,17,16,0.55); backdrop-filter: blur(3px); border-color: rgba(240,240,237,0.10); }
.stats-inner { background: rgba(255,255,255,0.06); }
.stat-item   { background: transparent; }

/* Handoff band. Load-bearing, not decorative: #services has an opaque
   background, so without this stretch of runway the last third of the
   camera move would happen behind it and never be seen.

   The two paddings are not a style preference. The keyboard is drawn at
   the BOTTOM of the machine layer, so in the moving case the caption
   and the keys producing it are only on screen together while #services
   is still below the fold — 58vh of tail is what buys that frame. The
   reduced-motion case has no camera and no such constraint. */
/* The base padding is the no-JS case, where nothing moves and the long
   tail would just be dead space. mode-motion is what visitors with the
   camera running get, which since 2026-08-21 is everyone with JS. */
.handoff { position: relative; z-index: 1; text-align: center; padding: 22vh 32px; }
body.mode-motion .handoff { padding: 18vh 32px 58vh; }
.handoff p {
    font-family: 'Space Mono', monospace;
    font-size: clamp(13px, 1.6vw, 17px);
    letter-spacing: 3px;
    text-transform: uppercase;
    /* Fallback is ink, not paper. --hand-rgb is only driven toward ink
       by the camera, so with JS off it is never set at all and a paper
       fallback left this line invisible on the light page. */
    color: rgb(var(--hand-rgb, 17 17 16));
    opacity: 0.62;
    min-height: 1.7em;   /* no reflow as the line is produced */
}

/* ══════════════════════════════════════════════════════════════
   THE HANDOFF LINE — the caption is produced by the keyboard
   Scrubbed with scroll a character at a time with the matching keycap
   lighting, or printed whole with every key it uses lit at once when
   the camera is not running. Driven by the handoff section of
   heroMachine() in site.js.
   ══════════════════════════════════════════════════════════════ */
/* display:none by default rather than opacity:0, because an invisible
   inline-block still takes its width — which pushed this centred line
   6px off centre everywhere the caret is never used: the reduced-motion
   render, and any visit with JS off. Only the moving path shows one. */
.ht-caret {
    display: none;
    width: 0.58em; height: 1.02em;
    margin-left: 3px;
    vertical-align: -0.16em;
    background: var(--accent-bright);
    opacity: 0;
}
body.mode-motion .ht-caret { display: inline-block; }
body.ht-armed .ht-caret { opacity: 1; animation: htBlink 1s steps(1) infinite; }
body.ht-done  .ht-caret { animation-duration: 1.5s; }
@keyframes htBlink { 0%, 49% { opacity: 1 } 50%, 100% { opacity: 0 } }

/* The string is in the markup twice: .ht-out is the visible copy and is
   hidden from assistive tech, .ht-sr is the reverse. The driver only
   empties .ht-out at the moment it takes over, so before the deferred
   script runs — or with JS off entirely — the caption is simply there. */
.ht-sr {
    position: absolute; width: 1px; height: 1px;
    overflow: hidden; white-space: nowrap;
    clip: rect(0 0 0 0); clip-path: inset(50%);
}

/* Keycap strike is brand green rather than ink, deliberately: ink here
   would read as more line art and compete with the body copy of
   #services below. Green reads as a light coming on. */
.kb-key.kb-hit {
    animation: none;
    fill: var(--accent-bright); fill-opacity: 0.88;
    stroke: var(--accent-bright); stroke-opacity: 0.95;
}

/* ══════════════════════════════════════════════════════════════
   THE PLATE — the band annotated as an engineering drawing
   Sheet border, zone ticks, one dimension, a third-angle projection
   symbol and a title block. Colour rides --hand-rgb, the same token the
   camera lerps from paper to ink, so it stays legible on the dark
   ground and on the light page alike. No fills anywhere: a real plate
   is rules and text on the sheet, and pure line art also sidesteps the
   light/dark question entirely.
   ══════════════════════════════════════════════════════════════ */
.m-annot {
    position: absolute; inset: 0;
    opacity: var(--annot-a, 0);
    color: rgb(var(--hand-rgb, 17 17 16));
    font-family: 'Space Mono', monospace;
}
/* Sheet border — outer rule and inner rule, as plotted. */
.an-frame {
    position: absolute; inset: 20px;
    border: 1px solid currentColor;
    opacity: 0.15;
}
.an-frame::before {
    content: ""; position: absolute; inset: 6px;
    border: 1px solid currentColor;
    opacity: 0.55;
}
.an-ticks-t, .an-ticks-l { position: absolute; opacity: 0.22; }
.an-ticks-t {
    top: 20px; left: 20px; right: 20px; height: 7px;
    background: repeating-linear-gradient(90deg, currentColor 0 1px, transparent 1px 12.5%);
}
.an-ticks-l {
    top: 20px; bottom: 20px; left: 20px; width: 7px;
    background: repeating-linear-gradient(180deg, currentColor 0 1px, transparent 1px 16.667%);
}

/* Dimension, lower left. 15.00 U is a real number, not filler: every row
   of the generated keyboard sums to exactly 15 keycap units, which is
   why the rows line up. See ROWS in site.js. */
.an-dim {
    position: absolute; left: 44px; bottom: 44px;
    width: min(34vw, 380px);
    display: flex; align-items: center; gap: 7px;
    font-size: 10px; letter-spacing: 2px;
    opacity: 0.5;
}
.an-dim .an-tick { width: 1px; height: 11px; background: currentColor; flex: none; }
.an-dim .an-rule { height: 1px; background: currentColor; flex: 1 1 auto; }
.an-dim .an-arw {
    width: 0; height: 0; flex: none;
    border-top: 3.5px solid transparent;
    border-bottom: 3.5px solid transparent;
}
.an-dim .an-arw.l { border-right: 7px solid currentColor; }
.an-dim .an-arw.r { border-left: 7px solid currentColor; }
.an-dim .an-lab  { flex: none; white-space: nowrap; }

/* Third-angle projection symbol, upper right. The detail that makes a
   plate read as a plate rather than a box with text in it. */
.an-proj {
    position: absolute; top: 44px; right: 44px;
    display: flex; align-items: center; gap: 9px;
    font-size: 9px; letter-spacing: 2px; opacity: 0.42;
}
.an-proj svg { display: block; overflow: visible; }
.an-proj svg * { stroke: currentColor; fill: none; stroke-width: 1; }
.an-proj svg .ctr { stroke-dasharray: 3 2; stroke-opacity: 0.6; }

/* Title block. Hairline rules only — the cells are made of borders. */
.an-tb {
    position: absolute; right: 44px; bottom: 44px;
    width: min(46vw, 430px);
    border: 1px solid currentColor;
    border-bottom-width: 0; border-right-width: 0;
    opacity: 0.72;
}
.tb-row  { display: flex; }
.tb-cell {
    flex: 1 1 0; min-width: 0;
    padding: 7px 10px 8px;
    border-right: 1px solid currentColor;
    border-bottom: 1px solid currentColor;
}
.tb-cell.grow { flex: 2.4 1 0; }
.tb-cell b {
    display: block;
    font-size: 8px; font-weight: 400; letter-spacing: 2px;
    opacity: 0.55; margin-bottom: 3px;
}
.tb-cell span {
    display: block;
    font-size: 11px; letter-spacing: 1.2px;
    white-space: nowrap; overflow: hidden; text-overflow: ellipsis;
}
.tb-cell span.lg { font-size: 13px; font-weight: 700; letter-spacing: 2px; }

/* Narrow viewports: drop the dimension and the projection symbol first
   (both need horizontal room to read), then the plate entirely. */
@media (max-width: 1100px) { .an-dim, .an-proj { display: none; } }
@media (max-width: 860px)  { .m-annot { display: none; } }

@media (prefers-reduced-motion: reduce) {
    .m-scan { animation: none; }
    /* NOTE: there was a `.handoff p { --hand-rgb: 17 17 16 }` pin here,
       fixing a paper-white-on-paper caption in the old static render.
       It was removed on 2026-08-21 when the camera stopped honouring
       this media query — the camera now always drives --hand-rgb, so
       pinning it would freeze the caption at ink and make it invisible
       against the dark ground instead. Restore the pin if the static
       render ever comes back. See the note in site.js. */
}