/**
 * Techromatic — Brand Color Tokens
 * Light mode default.
 *
 * Palette (6 colors):
 *   Light: Ivory #FBFCEF, Lavender #CECAE2, Celadon #BAD5BD (swingable)
 *   Dark:  Evergreen #0D2C11, Indigo Velvet #3D3172, Lime Green #3ACD48 (swingable)
 *
 * WCAG AAA (7:1): Evergreen↔Ivory, Evergreen↔Lavender, Evergreen↔LimeGreen,
 *                 Evergreen↔Celadon, Indigo↔Ivory, Indigo↔Lavender, Indigo↔Celadon
 * WCAG AA (4.5:1): Indigo↔LimeGreen
 * Not compliant:   Ivory↔LimeGreen, Ivory↔Celadon, Ivory↔Lavender,
 *                  Celadon↔LimeGreen, Celadon↔Lavender, Lavender↔LimeGreen,
 *                  Indigo↔Evergreen
 */

:root {
    /* Header height — larger than parent default (64px) to give ascii btn room */
    --mv-header-height: 72px;

    /* Named palette */
    --mv-color-evergreen: #0D2C11;
    --mv-color-lime:      #3ACD48;
    --mv-color-celadon:   #BAD5BD;
    --mv-color-ivory:     #FBFCEF;
    --mv-color-indigo:    #3D3172;
    --mv-color-lavender:  #CECAE2;

    /* Gradient bar midpoints — lime (#3ACD48) → indigo (#3D3172) in sRGB thirds */
    --tr-color-bar-mid-1: #3B9956;  /* 33% */
    --tr-color-bar-mid-2: #3C6664;  /* 66% */

    /* Semantic aliases */
    --mv-brand-primary:   #3ACD48;
    --mv-brand-secondary: #3D3172;

    /* ── TYPE SYSTEM ──────────────────────────────────────────────── */
    /* 6 headings · 3 body sizes · 1 label  (10-level scale) */

    /* Font families — Cairo for headings, Open Sans for body, monospace stack for terminal/code */
    --tr-font-display: 'Cairo', system-ui, sans-serif;
    --tr-font-body:    'Open Sans', system-ui, sans-serif;
    --tr-font-mono:    'SF Mono', 'Fira Code', 'Fira Mono', 'Cascadia Code', ui-monospace, monospace;

    /* ─ Heading sizes — perfect-fourth scale (×1.333), H1–H5 fluid, H6 fixed ─
       Max-viewport ratios: 72 → 54 → 40 → 30 → 22 → 16 ≈ ×0.74 each step */
    --tr-size-h1: clamp(44px, 5.5vw, 72px);   /* hero headlines */
    --tr-size-h2: clamp(34px, 4.2vw, 54px);   /* page heroes, CTA finals */
    --tr-size-h3: clamp(26px, 3.2vw, 40px);   /* section headings */
    --tr-size-h4: clamp(20px, 2.4vw, 30px);   /* card / step / case titles */
    --tr-size-h5: clamp(17px, 1.8vw, 22px);   /* sub-heads, node titles, callout titles */
    --tr-size-h6: 16px;                        /* smallest heading — Cairo 600 carries the distinction */

    /* Heading weight — unified across all levels */
    --tr-weight-heading: 600;

    /* Letter-spacing — tighter at larger sizes, eases off toward H6 */
    --tr-tracking-h1: -0.04em;
    --tr-tracking-h2: -0.035em;
    --tr-tracking-h3: -0.025em;
    --tr-tracking-h4: -0.02em;
    --tr-tracking-h5: -0.015em;
    --tr-tracking-h6: -0.01em;

    /* Line heights — opens progressively as size decreases */
    --tr-leading-h1: 1.05;    /* hero headline — densest */
    --tr-leading-h2: 1.08;    /* page hero */
    --tr-leading-h3: 1.15;    /* section headings */
    --tr-leading-h4: 1.25;    /* card / component titles */
    --tr-leading-h5: 1.35;    /* sub-heads */
    --tr-leading-h6: 1.45;    /* smallest heading — most open */

    /* ─ Body sizes — 3 distinct steps ─ */
    --tr-size-body-lg: 18px;   /* hero subtitles, large intro text */
    --tr-size-body:    16px;   /* standard section prose */
    --tr-size-body-sm: 14px;   /* compact body: lists, cases, secondary text */

    /* Line heights — body */
    --tr-leading-body-lg: 1.65;   /* 18px — slightly tighter than standard */
    --tr-leading-body:    1.72;   /* 16px and 14px — standard Open Sans cadence */

    /* ─ Label — 1 level ─ */
    --tr-size-label:   12px;   /* meta, KPI labels, proof notes, eyebrow text */
    --tr-leading-label: 1.5;   /* short lines, no excessive air */

    /* ─ Extended sizes — used sparingly for non-standard contexts ─ */
    --tr-size-xs:       10px;   /* tiny meta labels, regulation codes */
    --tr-size-sm:       11px;   /* mono prefixes, terminal labels */
    --tr-size-body-md:  13px;   /* nav compact, footer links, between body-sm and body */
    --tr-size-h1-inner: clamp(28px, 4vw, 48px); /* inner page hero headlines (smaller than homepage) */

    /* ─ Extended heading weight ─ */
    --tr-weight-bold:   700;   /* wordmark, featured/emphasized headings */

    /* ─ Display line-height — for oversized numerals and hero text at 1:1 ─ */
    --tr-leading-display: 1;

    /* ─ Positive letter-spacing — for uppercase labels and captions ─ */
    --tr-tracking-caps:      0.08em;  /* standard uppercase labels, eyebrows */
    --tr-tracking-caps-sm:   0.04em;  /* captions, small caps, button text */
    --tr-tracking-caps-wide: 0.12em;  /* wide-spaced section labels */

    /* ─ Eyebrow tokens — standardised across all bracket + pill eyebrows ─ */
    --tr-eyebrow-padding:  8px 20px;
    --tr-eyebrow-weight:   600;
    --tr-eyebrow-shadow:   0 1px 1px rgba(0, 0, 0, 0.06);

    /* ─ Semantic color: red — strikethrough / "before" comparison text ─ */
    --tr-color-red: rgba(220, 60, 50, 0.65);

    /* ─ Additional line-height + letter-spacing tokens ─ */
    --tr-leading-snug:    1.3;    /* compact cards, tight headings */
    --tr-leading-relaxed: 1.6;   /* expanded body, forms */
    --tr-tracking-tight: -0.02em; /* non-heading tight tracking */
    --tr-tracking-wide:   0.06em; /* expanded label/badge tracking */
    --tr-size-h6-lg:      20px;   /* footer wordmark, slightly larger than h6 */

    /* ── COLOR OPACITY SCALE ────────────────────────────────────────── */
    /* 7 tiers per base color: wash → subtle → border → muted → soft → mid → strong
       "full" = use the hex var (--mv-color-*). Snap all raw rgba() to nearest tier. */

    /* Evergreen (13, 44, 17) */
    --tr-ev-wash:    rgba(13, 44, 17, 0.04);
    --tr-ev-subtle:  rgba(13, 44, 17, 0.07);
    --tr-ev-border:  rgba(13, 44, 17, 0.12);
    --tr-ev-muted:   rgba(13, 44, 17, 0.20);
    --tr-ev-soft:    rgba(13, 44, 17, 0.40);
    --tr-ev-mid:     rgba(13, 44, 17, 0.55);
    --tr-ev-strong:  rgba(13, 44, 17, 0.75);

    /* Ivory (251, 252, 239) */
    --tr-iv-wash:    rgba(251, 252, 239, 0.04);
    --tr-iv-subtle:  rgba(251, 252, 239, 0.08);
    --tr-iv-border:  rgba(251, 252, 239, 0.12);
    --tr-iv-muted:   rgba(251, 252, 239, 0.20);
    --tr-iv-soft:    rgba(251, 252, 239, 0.40);
    --tr-iv-mid:     rgba(251, 252, 239, 0.55);
    --tr-iv-strong:  rgba(251, 252, 239, 0.75);

    /* Lime (58, 205, 72) */
    --tr-lime-wash:    rgba(58, 205, 72, 0.04);
    --tr-lime-subtle:  rgba(58, 205, 72, 0.08);
    --tr-lime-border:  rgba(58, 205, 72, 0.12);
    --tr-lime-muted:   rgba(58, 205, 72, 0.20);
    --tr-lime-soft:    rgba(58, 205, 72, 0.40);
    --tr-lime-mid:     rgba(58, 205, 72, 0.55);
    --tr-lime-strong:  rgba(58, 205, 72, 0.75);

    /* Indigo (61, 49, 114) */
    --tr-ind-wash:    rgba(61, 49, 114, 0.04);
    --tr-ind-subtle:  rgba(61, 49, 114, 0.08);
    --tr-ind-border:  rgba(61, 49, 114, 0.12);
    --tr-ind-muted:   rgba(61, 49, 114, 0.20);
    --tr-ind-soft:    rgba(61, 49, 114, 0.40);
    --tr-ind-mid:     rgba(61, 49, 114, 0.55);
    --tr-ind-strong:  rgba(61, 49, 114, 0.75);

    /* Lavender (206, 202, 226) */
    --tr-lav-wash:    rgba(206, 202, 226, 0.08);
    --tr-lav-subtle:  rgba(206, 202, 226, 0.12);
    --tr-lav-border:  rgba(206, 202, 226, 0.20);
    --tr-lav-muted:   rgba(206, 202, 226, 0.32);
    --tr-lav-soft:    rgba(206, 202, 226, 0.40);
    --tr-lav-mid:     rgba(206, 202, 226, 0.55);
    --tr-lav-strong:  rgba(206, 202, 226, 0.75);

    /* Celadon (186, 213, 189) */
    --tr-cel-wash:    rgba(186, 213, 189, 0.08);
    --tr-cel-subtle:  rgba(186, 213, 189, 0.12);
    --tr-cel-border:  rgba(186, 213, 189, 0.20);
    --tr-cel-muted:   rgba(186, 213, 189, 0.32);
    --tr-cel-soft:    rgba(186, 213, 189, 0.40);
    --tr-cel-mid:     rgba(186, 213, 189, 0.55);
    --tr-cel-strong:  rgba(186, 213, 189, 0.75);

    /* ── SPACING — Section vertical rhythm ──────────────────────────── */
    /* Used for padding-top / padding-bottom on full-width sections.
       Always pair with a matching responsive token at tablet/mobile breakpoints:
         desktop → xl or lg  |  tablet (≤1024) → sm  |  mobile (≤768) → xs  */
    --tr-space-section-xl: 108px;  /* homepage primary / hero-scale sections */
    --tr-space-section-lg:  96px;  /* inner page standard */
    --tr-space-section-md:  88px;  /* compact / secondary sections */
    --tr-space-section-sm:  72px;  /* tablet breakpoint target */
    --tr-space-section-xs:  64px;  /* mobile breakpoint target */

    /* ── SPACING — Component gaps ────────────────────────────────────── */
    /* Used for grid gaps, flex gaps, and stack spacing within sections.
       Do not use section tokens for component gaps — they are too large. */
    --tr-space-gap-xl: 48px;  /* two-column card grids */
    --tr-space-gap-lg: 32px;  /* multi-column grids, list stacks */
    --tr-space-gap-md: 24px;  /* inline groups, tight card rows */
    --tr-space-gap-sm: 16px;  /* compact inline spacing */

    /* ── ELEVATION — Two-level card shadow system ────────────────────── */
    /* Brand-tinted shadows using Evergreen at low opacity.
       Use --tr-shadow-card at rest; --tr-shadow-card-hover on :hover/:focus. */
    --tr-shadow-card:       0 1px 3px var(--tr-ev-wash), 0 4px 16px var(--tr-ev-wash);
    --tr-shadow-card-hover: 0 1px 3px var(--tr-ev-wash), 0 16px 48px var(--tr-ev-border);

    /* ── MOTION — Easing curves ──────────────────────────────────────── */
    /* Spring: use for transforms (translateY, scale). Matches iOS spring feel.
       Ease: use for color, opacity, and other non-geometric properties. */
    --tr-ease-spring: cubic-bezier(0.16, 1, 0.3, 1);
    --tr-ease-out:    ease;

    /* ── BORDER RADIUS — Three-level scale ───────────────────────────── */
    /* sm = UI chrome (buttons, inputs, pills, tags)
       md = cards, panels, callout containers
       lg = featured cards, large surface containers */
    --tr-radius-sm:  6px;
    --tr-radius-md: 12px;
    --tr-radius-lg: 16px;
}

/* Light mode (default for Techromatic) */
:root,
[data-theme="light"] {
    /* Core surfaces */
    --mv-bg:              #FBFCEF;       /* Ivory — primary page bg */
    --mv-bg-elevated:     #f0f2e5;       /* Ivory-tinted elevated surface */
    --mv-bg-surface:      #f5f7ea;       /* Ivory-tinted card/panel surface */
    --mv-bg-glass:        rgba(251, 252, 239, 0.68); /* Ivory glass (pill header) */

    /* Celadon surfaces */
    --mv-bg-celadon:      #BAD5BD;       /* Celadon — full surface */
    --mv-bg-celadon-subtle: var(--tr-cel-muted);    /* Celadon wash (0.32) */
    --mv-bg-badge:        var(--tr-ev-subtle);     /* Subtle evergreen wash (0.07) */

    /* Lavender surfaces */
    --mv-bg-lavender:     #CECAE2;       /* Lavender — full surface */
    --mv-bg-lavender-subtle: var(--tr-lav-muted);   /* Lavender wash (0.32) */
    --mv-bg-badge-lavender: #CECAE2;    /* Badge/pill bg (Lavender) */

    /* Text */
    --mv-text:            #0D2C11;
    --mv-text-accent:     #3D3172;
    --mv-text-75:         var(--tr-ev-strong);   /* 0.75 */
    --mv-text-60:         var(--tr-text-tertiary); /* 0.65 — bumped from 0.60 for WCAG */
    --mv-text-50:         var(--tr-ev-mid);      /* 0.55 — bumped from 0.50 */
    --mv-text-40:         var(--tr-ev-soft);     /* 0.40 */
    --mv-text-20:         var(--tr-ev-muted);    /* 0.20 */

    /* Borders */
    --mv-border:          var(--tr-ev-border);   /* 0.12 */
    --mv-border-strong:   var(--tr-ev-muted);    /* 0.20 */

    /* Dot grid — CSS-native technical texture; pair with --mv-dot-grid-size */
    --mv-dot-grid:      radial-gradient(circle, var(--tr-ev-subtle) 1.5px, transparent 1.5px);
    --mv-dot-grid-size: 24px 24px;

    /* Section surface washes — use instead of full-color block backgrounds */
    --mv-bg-wash-lavender: var(--tr-lav-wash);    /* 0.08 */
    --mv-bg-wash-celadon:  var(--tr-cel-wash);    /* 0.08 */

    /* Hairlines — finer than --mv-border for section separation */
    --mv-hairline:     var(--tr-ev-subtle);   /* 0.07 */
    --mv-hairline-mid: var(--tr-ev-border);  /* 0.12 */

    /* ── WCAG-compliant text opacity tiers (Evergreen on Ivory) ────────
       Use these instead of arbitrary rgba opacity values.
       All "text" tiers pass WCAG AA for their intended use case.        */
    --tr-text-primary:   rgba(13, 44, 17, 1);      /* headings, primary body */
    --tr-text-secondary: rgba(13, 44, 17, 0.75);   /* secondary body — 5.8:1 on ivory */
    --tr-text-tertiary:  rgba(13, 44, 17, 0.65);   /* tertiary / muted body — 4.6:1 on ivory (AA) */
    --tr-text-caption:   rgba(13, 44, 17, 0.55);   /* captions, large text only — 3.6:1 (AA large) */
    --tr-text-decorative:rgba(13, 44, 17, 0.40);   /* decorative only, not essential info — 2.3:1 */

    /* ── WCAG-compliant text opacity tiers (Ivory on Evergreen) ────────
       For dark section contexts (pricing cards, terminal, footer, CTA). */
    --tr-light-primary:   rgba(251, 252, 239, 1);    /* headings on dark */
    --tr-light-secondary: rgba(251, 252, 239, 0.75); /* secondary body on dark — 6.2:1 */
    --tr-light-tertiary:  rgba(251, 252, 239, 0.65); /* tertiary on dark — 5.0:1 (AA) */
    --tr-light-caption:   rgba(251, 252, 239, 0.55); /* large text on dark — 3.8:1 (AA large) */
    --tr-light-decorative:rgba(251, 252, 239, 0.40); /* decorative on dark — 2.7:1 */
}

/* Dark mode (when user toggles — future use for Techrobotic) */
[data-theme="dark"] {
    /* Core surfaces */
    --mv-bg:              #0D2C11;
    --mv-bg-elevated:     #122e16;
    --mv-bg-surface:      #163a1b;
    --mv-bg-glass:        rgba(13, 44, 17, 0.84);

    /* Celadon surfaces (muted in dark context) */
    --mv-bg-celadon:      var(--tr-cel-subtle);       /* 0.12 — snapped from 0.10 */
    --mv-bg-celadon-subtle: var(--tr-cel-wash);        /* 0.08 — snapped from 0.06 */
    --mv-bg-badge:        #1e4d24;

    /* Lavender surfaces (muted in dark context) */
    --mv-bg-lavender:     var(--tr-lav-subtle);        /* 0.12 — snapped from 0.10 */
    --mv-bg-lavender-subtle: var(--tr-lav-wash);       /* 0.08 — snapped from 0.06 */
    --mv-bg-badge-lavender: var(--tr-lav-border);      /* 0.20 — snapped from 0.15 */

    /* Text */
    --mv-text:            #FBFCEF;
    --mv-text-accent:     #3ACD48;
    --mv-text-75:         var(--tr-iv-strong);    /* 0.75 */
    --mv-text-60:         var(--tr-light-tertiary); /* 0.65 — bumped for WCAG */
    --mv-text-50:         var(--tr-iv-mid);       /* 0.55 — bumped */
    --mv-text-40:         var(--tr-iv-soft);      /* 0.40 */
    --mv-text-20:         var(--tr-iv-muted);     /* 0.20 */

    /* Borders */
    --mv-border:          var(--tr-cel-subtle);   /* celadon 0.12 */
    --mv-border-strong:   var(--tr-cel-border);   /* celadon 0.20 */
}

.mv-button--solid {
    background-color: var(--mv-brand-primary);
    color: var(--mv-color-evergreen);
    border-color: var(--mv-brand-primary);
}
.mv-button--solid:hover {
    background-color: #32b83e;
    border-color: #32b83e;
}
.mv-button--outline {
    border-color: var(--mv-brand-primary);
    color: var(--mv-brand-primary);
}
.mv-button--outline:hover {
    background-color: var(--mv-color-indigo);
    color: var(--mv-color-ivory);
}

/* Global focus-visible ring — Indigo, legible on ivory backgrounds */
.mv-button:focus-visible,
a:focus-visible,
button:focus-visible,
input:focus-visible,
select:focus-visible,
textarea:focus-visible {
    outline: 2px solid var(--mv-color-indigo);
    outline-offset: 3px;
}

.site-header__cta:focus-visible {
    outline: 2px solid var(--mv-color-indigo);
    outline-offset: 3px;
}

/* ===================================================================
   HEADER — Techromatic brand overrides
   =================================================================== */

/* Header CTA — styled via .mv-ascii-btn; no hardcoded bg needed */
.site-header__cta:hover {
    opacity: 1;
}

/* Techromatic is always light mode — hide both theme toggles */
.theme-toggle,
.theme-toggle--footer {
    display: none !important;
}

/* ===================================================================
   FOOTER — Techromatic
   Evergreen dark terminus. Three zones: main (brand + nav), bottom bar.
   =================================================================== */

/* Legacy .tr-footer — kept for ASCII canvas targeting */
.tr-footer-ascii-canvas {
    position: absolute;
    inset: 0;
    z-index: 0;
    pointer-events: none;
    display: block;
}

/* ── New footer (Techrobotic structure, Techromatic identity) ── */
.footer {
    position: relative;
    z-index: 2;
    border-top: 1px solid var(--tr-cel-subtle);
    padding: 64px 24px 32px;
    background: #0e2a13;
}

.footer__main {
    max-width: 1420px;
    margin: 0 auto;
    display: grid;
    grid-template-columns: 4fr 1fr 1fr;
    gap: 48px;
    padding-bottom: 48px;
    border-bottom: 1px solid rgba(251, 252, 239, 0.09);
    position: relative;
    z-index: 1;
}

.footer__brand {
    display: flex;
    flex-direction: column;
    align-items: flex-start;
}

.footer__logo {
    display: block;
    margin-bottom: 12px;
    color: var(--mv-color-ivory);
    text-decoration: none;
    transition: color 0.2s ease;
}

.footer__logo:hover {
    color: var(--mv-color-lime);
}

.footer__tagline {
    font-family: var(--tr-font-body);
    font-size: 0.9rem;
    color: rgba(251, 252, 239, 0.75);
    line-height: 1.55;
    margin: 0 0 24px;
    max-width: 320px;
}

.footer .mv-ascii-btn--footer,
.mv-ascii-btn--footer {
    --ascii-bg: var(--mv-color-ivory) !important;
    --ascii-bg-hover: #f0f2e5 !important;
    --ascii-color: var(--mv-color-evergreen) !important;
    --ascii-accent: var(--mv-color-indigo) !important;
    background: var(--mv-color-ivory) !important;
    color: var(--mv-color-evergreen) !important;
    font-size: var(--tr-size-body-sm);
}

.footer__powered-link {
    font-size: 0.8rem;
    color: rgba(251, 252, 239, 0.55);
    text-decoration: none;
    margin-top: 12px;
    transition: color 0.2s ease;
}

.footer__powered-link strong {
    color: inherit;
    transition: color 0.2s ease;
}

.footer__powered-link:hover,
.footer__powered-link:hover strong {
    color: var(--mv-color-ivory);
}

.footer__bottom-left {
    display: flex;
    align-items: center;
    gap: 16px;
}

.footer__made-in-ny {
    width: 36px;
    height: 36px;
}

.footer__heading {
    display: block;
    font-family: var(--tr-font-display);
    font-weight: 700;
    font-size: 0.8rem;
    text-transform: uppercase;
    letter-spacing: 0.06em;
    color: rgba(251, 252, 239, 0.9);
    margin-bottom: 16px;
}

.footer__nav,
.footer__contact {
    display: flex;
    flex-direction: column;
    gap: 10px;
}

.footer__nav a,
.footer__contact a,
.footer__contact span:not(.footer__heading) {
    font-family: var(--tr-font-body);
    font-size: 0.9rem;
    color: rgba(251, 252, 239, 0.75);
    text-decoration: none;
    transition: color 0.2s ease;
    display: block;
}

.footer__nav a:hover,
.footer__contact a:hover {
    color: var(--mv-color-ivory);
}

.footer__bottom {
    max-width: 1420px;
    margin: 0 auto;
    display: flex;
    align-items: center;
    justify-content: space-between;
    padding-top: 24px;
    position: relative;
    z-index: 1;
}

.footer__copy {
    font-size: 0.8rem;
    color: rgba(251, 252, 239, 0.85);
}

.footer__legal {
    display: flex;
    gap: 24px;
}

.footer__legal a {
    font-size: 0.8rem;
    color: rgba(251, 252, 239, 0.75);
    text-decoration: none;
    transition: color 0.2s ease;
}

.footer__legal a:hover {
    color: var(--mv-color-ivory);
}

@media (max-width: 768px) {
    .footer__main {
        grid-template-columns: 1fr;
        gap: 40px;
    }
    .footer__bottom {
        flex-direction: column;
        align-items: flex-start;
        gap: 12px;
    }
}

/* ── Old footer classes (can be removed once fully migrated) ── */
.tr-footer__main,
.tr-footer__bottom {
    position: relative;
    z-index: 1;
}

.tr-footer__inner {
    max-width: 1420px;
    margin: 0 auto;
    padding: 0 32px;
}

/* Main footer: brand left, two nav columns right */
.tr-footer__main {
    padding: 72px 0 64px;
}

.tr-footer__main .tr-footer__inner {
    display: grid;
    grid-template-columns: 3fr auto auto;
    gap: 48px 56px;
    align-items: start;
}

/* Brand block */
.tr-footer__brand {
    display: flex;
    flex-direction: column;
    align-items: flex-start;
    gap: 0;
}

/* Logo SVG — footer (ivory on dark green, lime on hover) */
.tr-footer__brand .tr-logo {
    height: 24px;
    width: auto;
    display: block;
    color: var(--mv-color-ivory);
    opacity: 0.9;
    margin-bottom: 20px;
    transition: color 0.2s ease, opacity 0.2s ease;
}

.tr-footer__brand .tr-logo-link:hover .tr-logo {
    color: var(--mv-color-lime);
    opacity: 1;
}

.tr-footer__wordmark {
    font-family: var(--tr-font-display);
    font-size: var(--tr-size-h6-lg);
    font-weight: var(--tr-weight-bold);
    letter-spacing: var(--tr-tracking-h3);
    color: var(--mv-color-ivory);
    text-decoration: none;
    display: block;
    margin-bottom: 20px;
    transition: opacity 0.2s ease;
}

.tr-footer__wordmark:hover {
    opacity: 0.7;
}

.tr-footer__tagline {
    font-family: var(--tr-font-body);
    font-size: var(--tr-size-body-sm);
    line-height: var(--tr-leading-body);
    color: var(--tr-light-secondary); /* 0.75 — WCAG AA 6.2:1 on evergreen */
    margin: 0 0 32px;
    max-width: 300px;
}

/* ASCII wordmark — large block-letter identity mark */
.tr-footer__ascii {
    padding: 40px 0 0;
    overflow: hidden;
    pointer-events: none;
    user-select: none;
    line-height: 1;
    position: relative;
    z-index: 1;
}

.tr-footer__ascii-art {
    font-family: ui-monospace, 'SF Mono', monospace;
    font-size: clamp(3.5px, 1.05vw, 10px);
    line-height: 1.25;
    color: #3ACD48;
    opacity: 0.35;
    white-space: pre;
    overflow: hidden;
    display: block;
    margin: 0;
    padding: 0 0 0 32px;
}

.tr-footer__ascii-rule {
    display: flex;
    align-items: center;
    justify-content: space-between;
    padding: 10px 32px 0;
    opacity: 0.30;
}

.tr-footer__ascii-meta {
    font-family: ui-monospace, 'SF Mono', monospace;
    font-size: 9px;
    letter-spacing: 0.12em;
    text-transform: uppercase;
    color: rgba(186, 213, 189, 0.60);
}

.tr-footer__ascii-build {
    font-family: ui-monospace, 'SF Mono', monospace;
    font-size: 9px;
    letter-spacing: 0.08em;
    color: rgba(58, 205, 72, 0.50);
}

@media (max-width: 480px) {
    .tr-footer__ascii-art {
        font-size: clamp(3px, 0.85vw, 7px);
        opacity: 0.20;
    }
    .tr-footer__ascii-rule {
        opacity: 0.18;
    }
}

/* Contact column in footer */
.tr-footer__contact {
    flex-shrink: 0;
}

.tr-footer__cta-link {
    font-family: var(--tr-font-body);
    font-size: var(--tr-size-body-md);
    font-weight: var(--tr-weight-heading);
    color: var(--mv-color-lime);
    text-decoration: none;
    letter-spacing: 0.01em;
    transition: color 0.2s ease;
}

.tr-footer__cta-link:hover {
    color: var(--mv-color-ivory); /* brightens to ivory — consistent with nav link hover pattern */
}

/* Nav columns — flex row so Services/Company gap is controlled independently */
.tr-footer__nav {
    display: flex;
    gap: 56px;
    align-items: flex-start;
}

.tr-footer__nav-heading {
    display: block;
    font-family: var(--tr-font-body);
    font-size: var(--tr-size-label);
    font-weight: var(--tr-weight-heading);
    letter-spacing: var(--tr-tracking-caps);
    text-transform: uppercase;
    color: var(--tr-light-tertiary); /* 0.65 — WCAG AA 5.0:1 for 12px uppercase labels */
    margin-bottom: 20px;
}

.tr-footer__nav-list {
    list-style: none;
    margin: 0;
    padding: 0;
    display: flex;
    flex-direction: column;
    gap: 0;
}

.tr-footer__nav-list a {
    font-family: var(--tr-font-body);
    font-size: var(--tr-size-body-sm);
    color: var(--mv-color-ivory);
    text-decoration: none;
    transition: color 0.2s ease;
    display: inline-block;
    padding: 6px 0;
}

.tr-footer__nav-list a:hover {
    color: var(--mv-color-lime); /* lime — lime = active in this palette */
}

/* Bottom bar */
.tr-footer__bottom {
    border-top: 1px solid var(--tr-cel-border);
    padding: 22px 0;
}

.tr-footer__bottom .tr-footer__inner {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 24px;
    flex-wrap: wrap;
}

.tr-footer__copy {
    font-family: var(--tr-font-body);
    font-size: var(--tr-size-body-md);
    color: var(--tr-light-secondary); /* 0.75 — WCAG AA 6.2:1 on evergreen */
}

.tr-footer__legal {
    display: flex;
    align-items: center;
    gap: 24px;
}

.tr-footer__legal a {
    font-family: var(--tr-font-body);
    font-size: var(--tr-size-body-md);
    color: var(--mv-color-ivory);
    text-decoration: none;
    transition: color 0.2s ease;
    display: inline-block;
    padding: 6px 0;
}

.tr-footer__legal a:hover {
    color: var(--mv-color-lime);
}

.tr-footer__legal a:focus-visible,
.tr-footer__cta-link:focus-visible,
.tr-footer__wordmark:focus-visible,
.tr-footer__nav-list a:focus-visible {
    outline: 2px solid var(--mv-color-celadon);
    outline-offset: 3px;
    border-radius: 2px;
}

/* Footer responsive */
@media (max-width: 1024px) {
    /* Brand full-width top row; nav columns side-by-side below */
    .tr-footer__main .tr-footer__inner {
        grid-template-columns: 1fr;
        gap: 48px 0;
        padding: 0 24px;
    }

    .tr-footer__bottom .tr-footer__inner {
        padding: 0 24px;
    }
}

@media (max-width: 768px) {
    .tr-footer__main {
        padding: 56px 0 48px;
    }

    .tr-footer__main .tr-footer__inner {
        padding: 0 16px;
    }

    .tr-footer__nav {
        flex-direction: column;
        gap: 32px;
    }

    .tr-footer__bottom .tr-footer__inner {
        flex-direction: column;
        align-items: flex-start;
        gap: 12px;
        padding: 0 16px;
    }
}

/* ===================================================================
   BUTTONS — Rounded rectangle
   Components library standard: 6px (matches .pv-btn-primary).
   Overrides default pill shape (100px) from parent theme.
   =================================================================== */

.mv-button {
    border-radius: var(--tr-radius-sm);
}

.site-header__cta {
    border-radius: var(--tr-radius-sm);
}

.site-header {
    border-radius: var(--tr-radius-md);
    box-shadow: 0 2px 8px var(--tr-ev-border);
}

.site-header.is-scrolled {
    box-shadow: 0 4px 14px var(--tr-ev-muted);
}

/* Nav item hover pill → matches button radius, 44px min touch target */
.main-navigation .menu-item > a {
    border-radius: var(--tr-radius-sm);
    padding: 11px 14px;
}

/* Active page — green pill background (matches section nav active style) */
.main-navigation .menu-item.current-menu-item > a,
.main-navigation .menu-item.current_page_item > a,
.main-navigation .menu-item.current-menu-ancestor > a {
    background: var(--tr-ev-subtle);
    color: var(--mv-color-evergreen);
    font-weight: var(--tr-weight-heading);
}

/* Logo image — header */
.site-branding .tr-logo-link {
    display: block;
    line-height: 0;
}

.site-branding .tr-logo {
    height: 22px;
    width: auto;
    display: block;
    color: var(--mv-color-evergreen);
    transition: color 0.2s ease;
}

.site-branding .tr-logo-link:hover .tr-logo {
    color: var(--mv-color-indigo);
}

/* ===================================================================
   ASCII BUTTON — global base styles
   Enables .mv-ascii-btn on any page (not just components page).
   CSS vars overridden per context: .site-header, .tr-hero, etc.
   =================================================================== */

.mv-ascii-btn {
    --ascii-bg:           var(--mv-color-evergreen);
    --ascii-bg-hover:     #122e16;
    --ascii-color:        var(--mv-color-ivory);
    --ascii-accent:       var(--mv-color-lime);
    --ascii-pad:          14px 24px;
    --ascii-font-size:    var(--tr-size-body-sm);
    --ascii-weight:       var(--tr-weight-heading);
    --ascii-radius:       var(--tr-radius-sm);
    --ascii-shadow:       0 2px 8px var(--tr-ev-muted);
    --ascii-shadow-hover: 0 4px 14px var(--tr-ev-muted);

    box-sizing: border-box;
    padding: var(--ascii-pad);
    display: inline-flex;
    align-items: center;
    justify-content: center;
    color: var(--ascii-color);
    font-size: var(--ascii-font-size);
    font-weight: var(--ascii-weight);
    font-family: var(--tr-font-body);
    background: var(--ascii-bg);
    border: 1.5px solid transparent;
    border-radius: var(--ascii-radius);
    cursor: pointer;
    text-decoration: none;
    box-shadow: var(--ascii-shadow);
    transition: background 0.25s ease, border-color 0.25s ease, box-shadow 0.25s ease;
    -webkit-font-smoothing: antialiased;
}

.mv-ascii-btn:hover,
.mv-ascii-btn:focus-visible {
    background: var(--ascii-bg-hover);
    box-shadow: var(--ascii-shadow-hover);
}

.mv-ascii-btn span {
    letter-spacing: var(--tr-tracking-caps-sm);
    transition: color 0.15s ease;
    box-sizing: border-box;
}

.mv-ascii-btn:hover span,
.mv-ascii-btn:focus-visible span {
    color: var(--ascii-accent);
}

.mv-ascii-btn--stroke {
    background: transparent !important;
    border-color: currentColor;
}

.mv-ascii-btn--stroke:hover,
.mv-ascii-btn--stroke:focus-visible {
    background: transparent !important;
    border-color: var(--ascii-accent);
}

/* ===================================================================
   HEADER — nav centering + CTA button sizing
   =================================================================== */

/* Equal side zones — wordmark anchors far-left, CTA anchors far-right.
   Nav sits absolutely centered across the full pill width.
   pointer-events: none on the zones so they don't block nav link clicks
   in the overlapping area (z-index: 2 branding/actions vs z-index: 3 nav). */
.site-branding {
    flex: 1;
    pointer-events: none;
}

.site-branding > * {
    pointer-events: auto;
}

.site-header__actions {
    flex: 1;
    justify-content: flex-end;
    pointer-events: none;
}

.site-header__actions > * {
    pointer-events: auto;
}

/* Center nav links absolutely in the pill — above side zones */
.main-navigation {
    position: absolute;
    left: 50%;
    transform: translateX(-50%);
    flex: none;
    z-index: 3;
}

/* Header ASCII CTA — compact sizing for the pill nav bar */
.site-header__cta.mv-ascii-btn {
    --ascii-pad:       10px 20px;
    --ascii-font-size: 13px;
}

/* Mobile CTA (ASCII button) inside nav panel — full width */
.site-header__nav-cta .mv-ascii-btn {
    width: 100%;
    justify-content: center;
    font-size: var(--tr-size-body-sm);
    padding: 14px 24px;
}

/* ===================================================================
   MOBILE NAV — connect dropdown seamlessly to pill
   =================================================================== */

@media (max-width: 1024px) {
    /* Reset equal-zones — mobile pill uses justify-content: space-between */
    .site-branding {
        flex: 0 0 auto;
        pointer-events: auto;
    }

    .site-header__actions {
        flex: 0 0 auto;
        pointer-events: auto;
    }

    /* Hide desktop ASCII CTA */
    .site-header__cta {
        display: none !important;
    }

    /* Fix ASCII button span — JS measures 0px width when nav is hidden on init */
    .site-header__nav-cta .mv-ascii-btn span {
        width: auto !important;
    }
}

/* ===================================================================
   EYEBROW BRACKET — override parent round pill with bracket [ ] shape
   Replaces full border + pill radius. Brackets drawn via ::before/::after.
   Uses currentColor so all 6 colorways adapt automatically.
   =================================================================== */

.mv-eyebrow {
    border: none;
    border-radius: 3px;
    position: relative;
    padding: var(--tr-eyebrow-padding);
    font-weight: var(--tr-eyebrow-weight);
    text-shadow: var(--tr-eyebrow-shadow);
}

.mv-eyebrow::before,
.mv-eyebrow::after {
    content: '';
    position: absolute;
    top: 0;
    bottom: 0;
    width: 7px;
    border-top: 1px solid currentColor;
    border-bottom: 1px solid currentColor;
    opacity: 0.65;
    pointer-events: none;
}

.mv-eyebrow::before {
    left: 0;
    border-left: 1px solid currentColor;
}

.mv-eyebrow::after {
    right: 0;
    border-right: 1px solid currentColor;
}

/* Eyebrow → heading: neutralise browser-default margin-top on headings
   that immediately follow an eyebrow. Eyebrow margin-bottom alone controls
   the gap — prevents ~0.83em phantom space on h2/h3 in section layouts. */
.mv-eyebrow + h1,
.mv-eyebrow + h2,
.mv-eyebrow + h3,
.mv-eyebrow + h4,
.mv-eyebrow + h5 {
    margin-top: 0;
}

/* ===================================================================
   TYPOGRAPHY — Utility classes
   10 levels: 6 heading (H1→H6) + 3 body (Body-LG→Body-SM) + 1 label.
   Apply to any element to set the full type treatment for that level.
   All new code should use these instead of bespoke font values.
   =================================================================== */

/* H1 — hero headlines (clamp 44–72px) */
.tr-h1 {
    font-family: var(--tr-font-display);
    font-size: var(--tr-size-h1);
    font-weight: var(--tr-weight-heading);
    letter-spacing: var(--tr-tracking-h1);
    line-height: var(--tr-leading-h1);
}

/* H2 — page heroes, CTA finals (clamp 34–54px) */
.tr-h2 {
    font-family: var(--tr-font-display);
    font-size: var(--tr-size-h2);
    font-weight: var(--tr-weight-heading);
    letter-spacing: var(--tr-tracking-h2);
    line-height: var(--tr-leading-h2);
}

/* H3 — section headings (clamp 26–40px) */
.tr-h3 {
    font-family: var(--tr-font-display);
    font-size: var(--tr-size-h3);
    font-weight: var(--tr-weight-heading);
    letter-spacing: var(--tr-tracking-h3);
    line-height: var(--tr-leading-h3);
}

/* H4 — card titles, step titles, case card titles (clamp 20–30px) */
.tr-h4 {
    font-family: var(--tr-font-display);
    font-size: var(--tr-size-h4);
    font-weight: var(--tr-weight-heading);
    letter-spacing: var(--tr-tracking-h4);
    line-height: var(--tr-leading-h4);
}

/* H5 — sub-heads, node titles, proof callout titles (clamp 17–22px) */
.tr-h5 {
    font-family: var(--tr-font-display);
    font-size: var(--tr-size-h5);
    font-weight: var(--tr-weight-heading);
    letter-spacing: var(--tr-tracking-h5);
    line-height: var(--tr-leading-h5);
}

/* H6 — smallest heading (16px fixed); Cairo 600 distinguishes from body */
.tr-h6 {
    font-family: var(--tr-font-display);
    font-size: var(--tr-size-h6);
    font-weight: var(--tr-weight-heading);
    letter-spacing: var(--tr-tracking-h6);
    line-height: var(--tr-leading-h6);
}

/* Body LG — hero subtitles, large intro text (18px) */
.tr-body-lg {
    font-family: var(--tr-font-body);
    font-size: var(--tr-size-body-lg);
    line-height: var(--tr-leading-body-lg);
}

/* Body — standard section prose (16px) */
.tr-body {
    font-family: var(--tr-font-body);
    font-size: var(--tr-size-body);
    line-height: var(--tr-leading-body);
}

/* Body SM — compact body: lists, cases, secondary text (14px) */
.tr-body-sm {
    font-family: var(--tr-font-body);
    font-size: var(--tr-size-body-sm);
    line-height: var(--tr-leading-body);
}

/* Label — meta, KPI labels, proof notes, eyebrow text (12px) */
.tr-label {
    font-family: var(--tr-font-body);
    font-size: var(--tr-size-label);
    font-weight: var(--tr-weight-heading);
    letter-spacing: var(--tr-tracking-caps);
    text-transform: uppercase;
    line-height: var(--tr-leading-label);
}