/* ============================================
   Ignisys LLC — Design System & Style Switcher

   COLOR LANGUAGE (four layers, modeled on IBM + Material + Stripe):
   1. INK / NEUTRALS  ~60%  structure, most surfaces & body text.
                       Dominant, so color moments carry meaning.
   2. ONE ACCENT      ~10%  the interactive ACTION only (blue).
                       nav "Inquiries" + form submit. Nothing else.
   3. DOMAIN HUES     ~30%  identity/classification, NEVER buttons:
                       teal = cloud, violet = cms, amber = compliance.
                       Used on capability icons, card numerals, tag
                       chips. This is the anti-monotone layer.
   4. STATUS GREEN         "verified / active" fact signal only:
                       registry status dot, certification bullets.

   Reading path above the fold: Name (type size) -> what it does ->
   proof it is real -> classify (hue) -> the one action (accent).

   THEMES (light & dark each): Federal Navy (default),
   Technical Spec, Editorial Stone, Saffron Paper.
   ============================================ */

@import url('https://rsms.me/inter/inter.css');

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

/* ============================================
   THEME PALETTES
   ============================================ */

/* 1. Federal Navy & Slate (Default Institutional) */
:root,
:root[data-theme="federal"] {
    --bg-primary: #FFFFFF;
    --bg-secondary: #F8FAFC;
    --surface-card: #FFFFFF;
    --text-primary: #0F172A;
    --text-secondary: #334155;
    --text-tertiary: #64748B;
    --text-faint: #CBD5E1;
    --accent-brand: #1D4ED8;
    --accent-brand-dark: #1E40AF;
    --cta-primary: #1D4ED8;
    --cta-primary-text: #FFFFFF;
    --border-warm: #E2E8F0;
    --border-strong: #CBD5E1;
    --border-input: #CBD5E1;
    --border-input-error: #DC2626;

    --on-ink-full: #FFFFFF;
    --on-ink-70: #CBD5E1;
    --on-ink-50: #94A3B8;
    --on-ink-30: #334155;
    --on-ink-10: #1E293B;

    --ink-surface: #0F172A;
    --logo-ink: #0F172A;
    --logo-flame: #3B82F6;
    --logo-flame-on-ink: #3B82F6;

    /* Domain hues — identity, not emphasis. One per capability area
       (Stripe-style product-line coding). Never used for buttons. */
    --hue-cloud: #0E7490;
    --hue-cms: #6D28D9;
    --hue-compliance: #B45309;
}

:root.dark,
:root.dark[data-theme="federal"] {
    --bg-primary: #0A0F1C;
    --bg-secondary: #111A2E;
    --surface-card: #1C2A44;
    --text-primary: #E8EEF7;
    --text-secondary: #B7C3D9;
    --text-tertiary: #8B99B0;
    --text-faint: #3E4D68;
    --accent-brand: #4D9AF5;
    --accent-brand-dark: #7CB8FF;
    --cta-primary: #2E6BE6;
    --cta-primary-text: #FFFFFF;
    --border-warm: #24314B;
    --border-strong: #35486F;
    --border-input: #46587C;
    --border-input-error: #EF4444;

    --on-ink-full: #E8EEF7;
    --on-ink-70: #B7C3D9;
    --on-ink-50: #8B99B0;
    --on-ink-30: #3E4D68;
    --on-ink-10: #111A2E;

    --ink-surface: #030712;
    --logo-ink: #F8FAFC;
    --logo-flame: #3B82F6;
    --logo-flame-on-ink: #3B82F6;

    /* Domain hues — lighter set for dark canvases */
    --hue-cloud: #22D3EE;
    --hue-cms: #A78BFA;
    --hue-compliance: #F59E0B;
}

/* 2. Technical Spec (Industrial Monochromatic) */
:root[data-theme="spec"] {
    --bg-primary: #F4F4F6;
    --bg-secondary: #EAEAEF;
    --surface-card: #FFFFFF;
    --text-primary: #111827;
    --text-secondary: #374151;
    --text-tertiary: #6B7280;
    --text-faint: #D1D5DB;
    --accent-brand: #0284C7;
    --accent-brand-dark: #0369A1;
    --cta-primary: #111827;
    --cta-primary-text: #F4F4F6;
    --border-warm: #D1D5DB;
    --border-strong: #9CA3AF;
    --border-input: #9CA3AF;
    --border-input-error: #DC2626;

    --on-ink-full: #F4F4F6;
    --on-ink-70: #D1D5DB;
    --on-ink-50: #9CA3AF;
    --on-ink-30: #374151;
    --on-ink-10: #1F2937;

    --ink-surface: #111827;
    --logo-ink: #111827;
    --logo-flame: #0284C7;
    --logo-flame-on-ink: #0284C7;

    /* Domain hues — identity, not emphasis. One per capability area
       (Stripe-style product-line coding). Never used for buttons. */
    --hue-cloud: #0E7490;
    --hue-cms: #6D28D9;
    --hue-compliance: #B45309;
}

:root.dark[data-theme="spec"] {
    --bg-primary: #121214;
    --bg-secondary: #18181B;
    --surface-card: #23232A;
    --text-primary: #F4F4F5;
    --text-secondary: #D4D4D8;
    --text-tertiary: #A1A1AA;
    --text-faint: #3F3F46;
    --accent-brand: #38BDF8;
    --accent-brand-dark: #0EA5E9;
    --cta-primary: #38BDF8;
    --cta-primary-text: #09090B;
    --border-warm: #2C2C33;
    --border-strong: #45454E;
    --border-input: #55555F;
    --border-input-error: #F87171;

    --on-ink-full: #F4F4F5;
    --on-ink-70: #D4D4D8;
    --on-ink-50: #A1A1AA;
    --on-ink-30: #3F3F46;
    --on-ink-10: #18181B;

    --ink-surface: #09090B;
    --logo-ink: #F4F4F5;
    --logo-flame: #0284C7;
    --logo-flame-on-ink: #0284C7;

    --hue-cloud: #22D3EE;
    --hue-cms: #A78BFA;
    --hue-compliance: #F59E0B;
}

/* 3. Editorial Stone (Warm Archival & Forest Spruce) */
:root[data-theme="editorial"] {
    --bg-primary: #F5F5F3;
    --bg-secondary: #EBEAE5;
    --surface-card: #FFFFFF;
    --text-primary: #1C1917;
    --text-secondary: #44403C;
    --text-tertiary: #78716C;
    --text-faint: #D6D3CD;
    --accent-brand: #1B4332;
    --accent-brand-dark: #143225;
    --cta-primary: #1B4332;
    --cta-primary-text: #F5F5F3;
    --border-warm: #E7E5E0;
    --border-strong: #D6D3CD;
    --border-input: #A8A29E;
    --border-input-error: #B91C1C;

    --on-ink-full: #F5F5F3;
    --on-ink-70: #D6D3CD;
    --on-ink-50: #A8A29E;
    --on-ink-30: #44403C;
    --on-ink-10: #292524;

    --ink-surface: #1C1917;
    --logo-ink: #1C1917;
    --logo-flame: #40916C;
    --logo-flame-on-ink: #40916C;

    --hue-cloud: #0F766E;
    --hue-cms: #6D28D9;
    --hue-compliance: #A16207;
}

:root.dark[data-theme="editorial"] {
    --bg-primary: #171614;
    --bg-secondary: #1F1E1B;
    --surface-card: #2D2B26;
    --text-primary: #F5F5F4;
    --text-secondary: #D6D3D1;
    --text-tertiary: #A8A29E;
    --text-faint: #44403C;
    --accent-brand: #52B788;
    --accent-brand-dark: #74C69D;
    --cta-primary: #52B788;
    --cta-primary-text: #0E1B14;
    --border-warm: #34312B;
    --border-strong: #4E4A44;
    --border-input: #5F5B54;
    --border-input-error: #EF4444;

    --on-ink-full: #F5F5F4;
    --on-ink-70: #D6D3D1;
    --on-ink-50: #A8A29E;
    --on-ink-30: #44403C;
    --on-ink-10: #1C1917;

    --ink-surface: #0F0E0D;
    --logo-ink: #F5F5F4;
    --logo-flame: #40916C;
    --logo-flame-on-ink: #40916C;

    --hue-cloud: #5EEAD4;
    --hue-cms: #C4B5FD;
    --hue-compliance: #FBBF24;
}

/* 4. Saffron Paper (Original Swiss Warm Paper) */
:root[data-theme="saffron"] {
    --bg-primary: #FAF7F2;
    --bg-secondary: #F1ECE3;
    --surface-card: #FDFBF7;
    --text-primary: #1A1A1A;
    --text-secondary: #3A3A38;
    --text-tertiary: #454442;
    --text-faint: #CECBC7;
    --accent-brand: #98260E;
    --accent-brand-dark: #8C200C;
    --cta-primary: #98260E;
    --cta-primary-text: #FAF7F2;
    --border-warm: #EAE2D6;
    --border-strong: #D0CDC7;
    --border-input: #C4C1BA;
    --border-input-error: #D92D20;

    --on-ink-full: #FAF7F2;
    --on-ink-70: #B7B5B1;
    --on-ink-50: #ACAAA6;
    --on-ink-30: #5D5C5B;
    --on-ink-10: #303030;

    --ink-surface: #1A1A1A;
    /* Saffron theme keeps the authentic brand coral from logo-paths.svg */
    --logo-ink: #1A1A1A;
    --logo-flame: #FF4B34;
    --logo-flame-on-ink: #FF4B34;

    --hue-cloud: #0F766E;
    --hue-cms: #7C3AED;
    --hue-compliance: #B45309;
}

:root.dark[data-theme="saffron"] {
    --bg-primary: #0E1830;
    --bg-secondary: #14203A;
    --surface-card: #1D2E52;
    --text-primary: #F2EDE3;
    --text-secondary: #CFC9BC;
    --text-tertiary: #9A94A6;
    --text-faint: #3A4556;
    --accent-brand: #FF8E70;
    --accent-brand-dark: #E8694C;
    --cta-primary: #FF8E70;
    --cta-primary-text: #0E1830;
    --border-warm: #33405F;
    --border-strong: #44527A;
    --border-input: #5F6E90;
    --border-input-error: #FF6B5E;

    --on-ink-full: #F2EDE3;
    --on-ink-70: #CFC9BC;
    --on-ink-50: #ACAAA6;
    --on-ink-30: #5C6A82;
    --on-ink-10: #14203A;

    --ink-surface: #0B1426;
    --logo-ink: #F2EDE3;
    --logo-flame: #E85A38;
    --logo-flame-on-ink: #FF4B34;

    --hue-cloud: #22D3EE;
    --hue-cms: #C4B5FD;
    --hue-compliance: #FBBF24;
}

/* ============================================
   SHARED FOUNDATION TOKENS
   ============================================ */

/* Soften shadows in dark mode — elevation reads as light, not darkness */
:root.dark {
    --shadow-card: 0 1px 3px rgba(0, 0, 0, 0.3), 0 8px 24px rgba(0, 0, 0, 0.25);
    --shadow-card-hover: 0 2px 6px rgba(0, 0, 0, 0.35), 0 12px 32px rgba(0, 0, 0, 0.3);
    --shadow-header: 0 1px 2px rgba(0, 0, 0, 0.2), 0 4px 16px rgba(0, 0, 0, 0.25);
}

:root {
    /* Fonts */
    --font-sans: 'Inter', 'Inter var', -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, sans-serif;
    --font-mono: 'IBM Plex Mono', ui-monospace, 'SF Mono', Menlo, monospace;

    /* Status palette */
    --status-success: #22A06B;
    --status-error: #E2483D;
    --status-warning: #FFD43B;

    /* Grid tokens */
    --grid-columns: 12;
    --grid-margin: 32px;
    --grid-gutter: 24px;
    --section-pad-y: 80px;
    --content-max: 1200px;

    /* Typography */
    --type-display: clamp(2.4rem, 4.5vw, 3.75rem);
    --type-title: clamp(1.6rem, 2.5vw, 2.25rem);
    --type-h3: 1.35rem;
    --type-body: 1.0625rem;
    --type-label: 0.8125rem;
    --type-data: 0.9375rem;

    --lh-display: 1.1;
    --lh-title: 1.2;
    --lh-h3: 1.35;
    --lh-body: 1.6;
    --lh-label: 1.4;
    --lh-data: 1.5;

    --tracking-label: 0.1em;
    --tracking-tight: -0.02em;
    --tracking-snug: -0.01em;

    /* Spacing */
    --space-1: 4px;
    --space-2: 8px;
    --space-3: 12px;
    --space-4: 16px;
    --space-5: 20px;
    --space-6: 24px;
    --space-7: 28px;
    --space-8: 32px;
    --space-9: 36px;
    --space-10: 40px;
    --space-11: 44px;
    --space-12: 48px;
    --space-14: 56px;
    --space-18: 72px;
    --space-24: 96px;

    /* Motion */
    --motion-xs: 140ms;
    --motion-sm: 220ms;
    --motion-md: 400ms;
    --ease-return: cubic-bezier(0.23, 1, 0.32, 1);

    /* Radius — softened for smooth surface steps */
    --radius-none: 0;
    --radius-sm: 8px;
    --radius-md: 12px;
    --radius-lg: 16px;
    --radius-pill: 9999px;

    /* Soft elevation — replaces hard border lines */
    --shadow-card: 0 1px 3px rgba(15, 23, 42, 0.04), 0 8px 24px rgba(15, 23, 42, 0.05);
    --shadow-card-hover: 0 2px 6px rgba(15, 23, 42, 0.06), 0 12px 32px rgba(15, 23, 42, 0.08);
    --shadow-header: 0 1px 2px rgba(15, 23, 42, 0.03), 0 4px 16px rgba(15, 23, 42, 0.05);
    --shadow-none: none;

    /* Focus ring */
    --focus-ring: 0 0 0 2px var(--bg-primary), 0 0 0 4px var(--accent-brand);
}

/* Responsive Grid */
@media (min-width: 600px) and (max-width: 1023px) {
    :root {
        --grid-margin: 24px;
        --grid-gutter: 18px;
        --section-pad-y: 64px;
        --type-h3: 1.25rem;
        --type-body: 1rem;
    }
}

@media (max-width: 599px) {
    :root {
        --grid-columns: 4;
        --grid-margin: 18px;
        --grid-gutter: 12px;
        --section-pad-y: 52px;
        --type-h3: 1.15rem;
        --type-body: 0.95rem;
        --type-data: 0.85rem;
    }
}

html {
    scroll-behavior: smooth;
    scroll-padding-top: 100px;
    -webkit-text-size-adjust: 100%;
    font-optical-sizing: auto;
    text-rendering: optimizeLegibility;
    word-spacing: 0.04em;
    scrollbar-color: var(--border-warm) var(--bg-primary);
    scrollbar-width: thin;
}

body {
    font-family: var(--font-sans);
    font-size: var(--type-body);
    line-height: var(--lh-body);
    font-weight: 400;
    color: var(--text-primary);
    background: var(--bg-primary);
    -webkit-font-smoothing: antialiased;
    -moz-osx-font-smoothing: grayscale;
    transition: background var(--motion-xs) var(--ease-return),
                color var(--motion-xs) var(--ease-return);
}

[id] { scroll-margin-top: 100px; }

.container {
    width: 100%;
    max-width: var(--content-max);
    margin: 0 auto;
    padding-inline: var(--grid-margin);
}

h1, h2, h3, h4 { text-wrap: balance; }
p, li { text-wrap: pretty; }

/* Skip Link */
.skip-link {
    position: absolute;
    top: -100px;
    left: var(--space-4);
    z-index: 9999;
    padding: var(--space-3) var(--space-5);
    background: var(--accent-brand);
    color: var(--bg-primary);
    border-radius: var(--radius-sm);
    font-family: var(--font-mono);
    font-weight: 500;
    font-size: var(--type-label);
    transition: top var(--motion-sm) var(--ease-return);
}
.skip-link:focus { top: var(--space-4); }

:where(a, button, input, textarea, select, summary):focus-visible {
    outline: 2px solid var(--accent-brand);
    outline-offset: 3px;
    border-radius: var(--radius-sm);
}
:where(a, button, input, textarea, select, summary):focus:not(:focus-visible) {
    outline: none;
}

/* ============================================
   TYPOGRAPHY
   ============================================ */
h1, h2, h3, h4 {
    color: var(--text-primary);
    font-weight: 600;
    letter-spacing: var(--tracking-snug);
    line-height: var(--lh-title);
}

h1 {
    font-size: var(--type-display);
    font-weight: 700;
    line-height: var(--lh-display);
    letter-spacing: var(--tracking-tight);
}

h2 {
    font-size: var(--type-title);
    font-weight: 600;
    line-height: var(--lh-title);
    letter-spacing: var(--tracking-tight);
}

h3 {
    font-size: var(--type-h3);
    font-weight: 600;
    line-height: var(--lh-h3);
}

h4 {
    font-size: var(--type-body);
    font-weight: 600;
    line-height: var(--lh-label);
}

p { margin-bottom: var(--space-4); }

a {
    color: var(--text-primary);
    text-decoration: underline;
    text-decoration-thickness: 1px;
    text-underline-offset: 2px;
    transition: color var(--motion-xs) var(--ease-return);
}
a:hover { color: var(--accent-brand); }

strong { font-weight: 600; color: var(--text-primary); }

.eyebrow {
    display: inline-block;
    font-family: var(--font-mono);
    font-size: var(--type-label);
    font-weight: 600;
    text-transform: uppercase;
    letter-spacing: var(--tracking-label);
    color: var(--text-tertiary);
    margin-bottom: var(--space-2);
}

/* Buttons */
.btn {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: var(--space-2);
    min-height: 40px;
    padding: var(--space-2) var(--space-5);
    border-radius: var(--radius-sm);
    font-family: var(--font-mono);
    font-weight: 500;
    font-size: var(--type-label);
    text-transform: uppercase;
    letter-spacing: var(--tracking-label);
    line-height: 1;
    border: none;
    cursor: pointer;
    text-decoration: none;
    transition: background var(--motion-xs) var(--ease-return),
                color var(--motion-xs) var(--ease-return),
                box-shadow var(--motion-xs) var(--ease-return),
                transform var(--motion-xs) var(--ease-return);
}

.btn-primary {
    background: var(--cta-primary);
    color: var(--cta-primary-text);
    box-shadow: 0 2px 8px color-mix(in srgb, var(--cta-primary) 25%, transparent);
}
.btn-primary:hover {
    background: var(--accent-brand-dark);
    color: var(--cta-primary-text);
    box-shadow: 0 4px 12px color-mix(in srgb, var(--cta-primary) 35%, transparent);
    transform: translateY(-1px);
}
.btn-primary:active { transform: translateY(0); }

.btn-outline {
    background: color-mix(in srgb, var(--bg-secondary) 60%, transparent);
    color: var(--text-primary);
}
.btn-outline:hover {
    background: var(--bg-secondary);
    color: var(--accent-brand);
}

/* btn-quiet — the primary above-the-fold navigation affordance.
   Borderless text + arrow, underline reveals on hover. Deliberately
   NOT accent-filled: the only accent-solid action on the page is the
   contact CTA. This keeps a single, calm color hierarchy. */
.btn-quiet {
    background: transparent;
    border: none;
    color: var(--text-secondary);
    padding-inline: 0;
    min-height: auto;
    gap: var(--space-2);
    position: relative;
}
.btn-quiet::after {
    content: '\2192';
    transition: transform var(--motion-xs) var(--ease-return);
}
.btn-quiet:hover {
    color: var(--text-primary);
    background: transparent;
    box-shadow: none;
    transform: none;
}
.btn-quiet:hover::after { transform: translateX(4px); }

/* ============================================
   HEADER & NAVIGATION
   ============================================ */
.site-header {
    position: sticky;
    top: 0;
    z-index: 100;
    background: var(--bg-primary);
    box-shadow: var(--shadow-none);
    transition: background var(--motion-xs) var(--ease-return),
                box-shadow var(--motion-sm) var(--ease-return);
}

.site-header.is-scrolled {
    box-shadow: var(--shadow-header);
}

.header-inner {
    display: flex;
    align-items: center;
    justify-content: space-between;
    height: 64px;
    max-width: var(--content-max);
    margin: 0 auto;
    padding-inline: var(--grid-margin);
}

.logo {
    display: flex;
    align-items: center;
    gap: var(--space-3);
    font-family: var(--font-sans);
    font-weight: 700;
    font-size: 1.25rem;
    color: var(--text-primary);
    text-decoration: none;
    letter-spacing: var(--tracking-snug);
}
.logo:hover { color: var(--text-primary); }

.logo-mark {
    display: block;
    flex: 0 0 auto;
    /* Mark is tall/narrow (viewBox 64 8 128 240) — size by height.
       Source of truth: assets/logo-2.svg ("Base outline" + "S outer").
       The inline <svg class="logo-mark"> in each page mirrors path1/path2
       verbatim with fills swapped to var(--logo-ink)/var(--logo-flame)
       so the mark themes in dark mode and across color schemes.
       viewBox 64 8 128 240 crops the file's 256-canvas to the artwork
       bounds (x 64–192, y 8–248) — do not change without resizing. */
    height: 30px;
    width: auto;
}

.main-nav {
    display: flex;
    align-items: center;
    gap: var(--space-6);
}

.main-nav a {
    font-family: var(--font-mono);
    color: var(--text-secondary);
    font-weight: 500;
    font-size: var(--type-label);
    text-transform: uppercase;
    letter-spacing: var(--tracking-label);
    text-decoration: none;
    padding: var(--space-2) 0;
    position: relative;
    transition: color var(--motion-xs) var(--ease-return);
}
.main-nav a:hover { color: var(--accent-brand); }

.main-nav a.is-active {
    color: var(--text-primary);
    font-weight: 600;
}
.main-nav a.is-active::after {
    content: '';
    position: absolute;
    bottom: -2px;
    left: 0;
    right: 0;
    height: 2px;
    background: var(--accent-brand);
}

.nav-cta {
    background: var(--cta-primary) !important;
    color: var(--cta-primary-text) !important;
    padding: 6px 14px !important;
    border-radius: var(--radius-pill);
    border: none;
}
.nav-cta:hover {
    background: var(--accent-brand-dark) !important;
}
.nav-cta.is-active::after { display: none; }

.theme-toggle {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 34px;
    height: 34px;
    padding: 0;
    background: transparent;
    border: none;
    border-radius: var(--radius-sm);
    color: var(--text-primary);
    cursor: pointer;
    flex: 0 0 auto;
    transition: background var(--motion-xs) var(--ease-return),
                color var(--motion-xs) var(--ease-return);
}
.theme-toggle:hover {
    background: var(--bg-secondary);
    color: var(--accent-brand);
}
.theme-toggle svg { width: 17px; height: 17px; display: block; }
.theme-toggle .icon-moon { display: none; }
:root.dark .theme-toggle .icon-sun { display: none; }
:root.dark .theme-toggle .icon-moon { display: block; }

.mobile-menu-toggle {
    display: none;
    flex-direction: column;
    gap: 5px;
    background: none;
    border: none;
    cursor: pointer;
    padding: var(--space-2);
}
.mobile-menu-toggle span {
    display: block;
    width: 22px;
    height: 2px;
    background: var(--text-primary);
    border-radius: var(--radius-sm);
    transition: transform var(--motion-sm) var(--ease-return), opacity var(--motion-sm) var(--ease-return);
}
.mobile-menu-toggle.active span:nth-child(1) { transform: translateY(7px) rotate(45deg); }
.mobile-menu-toggle.active span:nth-child(2) { opacity: 0; }
.mobile-menu-toggle.active span:nth-child(3) { transform: translateY(-7px) rotate(-45deg); }

/* ============================================
   HERO / CORPORATE DECLARATION
   ============================================ */
.hero {
    position: relative;
    padding: clamp(48px, 7vw, 84px) 0 clamp(40px, 5vw, 72px);
    background:
        radial-gradient(ellipse 80% 50% at 70% -10%, var(--bg-secondary), transparent),
        var(--bg-primary);
}

.hero-content {
    max-width: 900px;
}

/* Hero eyebrow — quiet inline marker, not a filled chip.
   Reads as a verification note, not a button. */
.hero-badge {
    display: inline-flex;
    align-items: center;
    gap: var(--space-2);
    font-family: var(--font-mono);
    font-size: var(--type-label);
    font-weight: 500;
    letter-spacing: var(--tracking-label);
    margin-bottom: var(--space-4);
    color: var(--text-tertiary);
    background: none;
    padding: 0;
}
.hero-badge-icon {
    width: 15px;
    height: 15px;
    color: var(--text-secondary);
    stroke-width: 2;
    flex-shrink: 0;
}

.hero-title {
    margin-bottom: var(--space-4);
}

.hero-subtitle {
    font-size: var(--type-h3);
    color: var(--text-secondary);
    max-width: 720px;
    margin-bottom: var(--space-10);
    line-height: var(--lh-body);
}

/* ============================================
   REGISTRY BAND — dark inverted verification strip
   ============================================ */
.registry-band {
    background: var(--ink-surface);
    color: var(--on-ink-full);
    padding-block: var(--space-10);
}

.registry-head {
    display: flex;
    align-items: baseline;
    justify-content: space-between;
    gap: var(--space-4);
    flex-wrap: wrap;
    margin-bottom: var(--space-6);
}

.registry-title {
    font-family: var(--font-mono);
    font-size: var(--type-label);
    font-weight: 600;
    text-transform: uppercase;
    letter-spacing: var(--tracking-label);
    color: var(--on-ink-full);
}

.registry-status {
    display: inline-flex;
    align-items: center;
    gap: var(--space-2);
    font-family: var(--font-mono);
    font-size: var(--type-label);
    font-weight: 500;
    letter-spacing: 0.05em;
    color: var(--on-ink-70);
}
.registry-status::before {
    content: '';
    width: 8px;
    height: 8px;
    border-radius: var(--radius-pill);
    background: #34D399;
    box-shadow: 0 0 0 3px rgba(52, 211, 153, 0.2);
}

.registry-grid {
    display: grid;
    grid-template-columns: repeat(6, 1fr);
    gap: var(--space-6) var(--space-8);
    margin: 0;
}

.registry-cell dt {
    font-family: var(--font-mono);
    font-size: 0.7rem;
    font-weight: 500;
    text-transform: uppercase;
    letter-spacing: var(--tracking-label);
    color: var(--on-ink-50);
    margin-bottom: 6px;
}

.registry-cell dd {
    font-size: var(--type-data);
    font-weight: 500;
    color: var(--on-ink-full);
    margin: 0;
}
.registry-cell dd a {
    color: var(--on-ink-70);
    text-decoration-color: var(--on-ink-30);
    transition: color var(--motion-xs) var(--ease-return),
                text-decoration-color var(--motion-xs) var(--ease-return);
}
.registry-cell dd a:hover {
    color: var(--on-ink-full);
    text-decoration-color: currentColor;
}

@media (max-width: 1023px) {
    .registry-grid { grid-template-columns: repeat(3, 1fr); }
}
@media (max-width: 599px) {
    .registry-grid { grid-template-columns: repeat(2, 1fr); }
}

/* ============================================
   CAPABILITIES — cards with icon anchors
   ============================================ */
.capability-cards {
    grid-column: 2 / -1;
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    gap: var(--space-6);
}

.cap-card {
    background: var(--surface-card);
    border-radius: var(--radius-md);
    padding: var(--space-8);
    box-shadow: var(--shadow-card);
    position: relative;
    display: flex;
    flex-direction: column;
    transition: box-shadow var(--motion-sm) var(--ease-return),
                transform var(--motion-sm) var(--ease-return);
}
.cap-card:hover {
    box-shadow: var(--shadow-card-hover);
    transform: translateY(-3px);
}

.cap-icon {
    width: 48px;
    height: 48px;
    border-radius: var(--radius-md);
    background: color-mix(in srgb, var(--cap-hue, var(--text-primary)) 10%, var(--bg-secondary));
    color: var(--cap-hue, var(--text-primary));
    display: flex;
    align-items: center;
    justify-content: center;
    margin-bottom: var(--space-5);
}
.cap-icon svg { width: 26px; height: 26px; }

/* Domain hue per capability — stable identity coding:
   Cloud=teal, CMS=violet, Compliance=amber. Stripe-style product hues. */
.capability-cards .cap-card:nth-child(1) { --cap-hue: var(--hue-cloud); }
.capability-cards .cap-card:nth-child(2) { --cap-hue: var(--hue-cms); }
.capability-cards .cap-card:nth-child(3) { --cap-hue: var(--hue-compliance); }

.cap-num {
    position: absolute;
    top: var(--space-6);
    right: var(--space-6);
    font-family: var(--font-mono);
    font-size: var(--type-label);
    font-weight: 500;
    letter-spacing: 0.05em;
    color: color-mix(in srgb, var(--cap-hue, var(--text-faint)) 40%, var(--text-faint));
    font-variant-numeric: tabular-nums;
}

.cap-card h3 {
    font-size: 1.15rem;
    margin-bottom: var(--space-3);
    padding-right: var(--space-10);
}

.cap-card p {
    font-size: var(--type-data);
    color: var(--text-secondary);
    line-height: var(--lh-body);
    margin-bottom: var(--space-5);
    flex-grow: 1;
}

.cap-tags {
    list-style: none;
    display: flex;
    flex-wrap: wrap;
    gap: var(--space-2);
    padding: 0;
    margin: 0;
}
.cap-tags li {
    font-family: var(--font-mono);
    font-size: 0.68rem;
    font-weight: 500;
    text-transform: uppercase;
    letter-spacing: 0.06em;
    padding: 3px 10px;
    background: color-mix(in srgb, var(--cap-hue, var(--text-secondary)) 9%, var(--bg-secondary));
    border-radius: var(--radius-pill);
    color: color-mix(in srgb, var(--cap-hue, var(--text-secondary)) 55%, var(--text-primary));
}

@media (max-width: 1023px) {
    .capability-cards { grid-column: 1 / -1; }
}
@media (max-width: 860px) {
    .capability-cards { grid-template-columns: 1fr; max-width: 560px; }
}

.hero-actions {
    display: flex;
    gap: var(--space-3);
    flex-wrap: wrap;
}/* ============================================
   SECTIONS & GRID
   ============================================ */
.section {
    display: grid;
    grid-template-columns: repeat(var(--grid-columns), minmax(0, 1fr));
    column-gap: var(--grid-gutter);
    padding-inline: var(--grid-margin);
    padding-block: var(--section-pad-y);
    max-width: var(--content-max);
    margin-inline: auto;
    position: relative;
}

.section-alt {
    background: var(--bg-secondary);
    /* Soft rounded surface — a gentle color step, not a ruled band */
    border-radius: var(--radius-lg);
}

.section-header {
    grid-column: 2 / -1;
    text-align: left;
    max-width: 680px;
    margin-bottom: var(--space-10);
}

.section-title {
    margin-bottom: var(--space-3);
}

.section-subtitle {
    font-size: var(--type-body);
    color: var(--text-secondary);
    line-height: var(--lh-body);
}

/* ============================================
   ABOUT & FOUNDER CREDENTIALS
   ============================================ */
.about-single {
    grid-column: 5 / span 7;
    max-width: none;
    margin: 0;
    text-align: left;
}

.about-single .about-lead {
    font-size: 1.25rem;
    color: var(--text-primary);
    font-weight: 500;
    margin-bottom: var(--space-5);
    line-height: var(--lh-body);
}

.about-single p {
    color: var(--text-secondary);
    margin-bottom: var(--space-5);
    line-height: var(--lh-body);
}

.about-highlights {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: var(--space-6);
    margin-top: var(--space-8);
}

.highlight {
    background: var(--surface-card);
    border-radius: var(--radius-md);
    padding: var(--space-6);
    box-shadow: var(--shadow-card);
}

.highlight-value {
    display: block;
    font-family: var(--font-mono);
    font-weight: 600;
    font-size: var(--type-data);
    color: var(--text-primary);
    margin-bottom: var(--space-1);
    text-transform: uppercase;
    letter-spacing: var(--tracking-label);
}

.highlight-text {
    font-size: var(--type-label);
    color: var(--text-secondary);
    line-height: var(--lh-label);
}

/* ============================================
   TECHNICAL NOTES (BLOG)
   ============================================ */
.blog-index {
    grid-column: 2 / -1;
    max-width: 800px;
}

.blog-list {
    display: flex;
    flex-direction: column;
}

.blog-item {
    padding-block: var(--space-7);
}
.blog-list .blog-item + .blog-item {
    /* Whisper-faint divider — one hairline, not a boxed grid */
    border-top: 1px solid color-mix(in srgb, var(--border-warm) 55%, transparent);
}

/* Editorial date block layout (homepage) */
.blog-item:has(.blog-date-block) {
    display: grid;
    grid-template-columns: 88px 1fr;
    gap: 0 var(--space-8);
    align-items: start;
}

.blog-date-block {
    display: flex;
    flex-direction: column;
    align-items: flex-start;
    padding-top: 2px;
}

.blog-date-day {
    font-family: var(--font-mono);
    font-size: 2.25rem;
    font-weight: 600;
    line-height: 1;
    letter-spacing: var(--tracking-tight);
    color: var(--text-primary);
    font-variant-numeric: tabular-nums lining-nums;
}

.blog-date-month {
    font-family: var(--font-mono);
    font-size: 0.7rem;
    font-weight: 500;
    text-transform: uppercase;
    letter-spacing: var(--tracking-label);
    color: var(--date-hue, var(--text-tertiary));
    margin-top: 6px;
}

@media (max-width: 599px) {
    .blog-item:has(.blog-date-block) {
        grid-template-columns: 64px 1fr;
        gap: 0 var(--space-5);
    }
    .blog-date-day { font-size: 1.75rem; }
}

.blog-item-meta {
    font-family: var(--font-mono);
    font-size: var(--type-label);
    font-weight: 500;
    text-transform: uppercase;
    letter-spacing: var(--tracking-label);
    color: var(--text-tertiary);
    margin-bottom: var(--space-2);
}
.blog-item-meta .separator { margin: 0 4px; }

.blog-item-title {
    font-size: var(--type-h3);
    font-weight: 600;
    margin-bottom: var(--space-2);
}
.blog-item-title a {
    color: var(--text-primary);
    text-decoration: none;
    transition: color var(--motion-xs) var(--ease-return);
}
.blog-item-title a:hover { color: var(--accent-brand); }

.blog-item-excerpt {
    font-size: var(--type-body);
    color: var(--text-secondary);
    line-height: var(--lh-body);
    margin-bottom: var(--space-3);
}

.blog-item-readmore {
    font-family: var(--font-mono);
    font-size: var(--type-label);
    font-weight: 500;
    text-transform: uppercase;
    letter-spacing: var(--tracking-label);
    color: var(--text-secondary);
    text-decoration: none;
    display: inline-flex;
    align-items: center;
    gap: var(--space-2);
    transition: gap var(--motion-xs) var(--ease-return), color var(--motion-xs) var(--ease-return);
}
.blog-item-readmore:hover { gap: var(--space-3); color: var(--text-primary); text-decoration: underline; }

.blog-more {
    display: inline-flex;
    margin-top: var(--space-6);
}

/* ============================================
   BLOG POST — LONG-FORM ARTICLE (borderless)
   ============================================ */
.article {
    display: grid;
    grid-template-columns: repeat(var(--grid-columns), minmax(0, 1fr));
    column-gap: var(--grid-gutter);
    padding-inline: var(--grid-margin);
    padding-block: var(--section-pad-y) calc(var(--section-pad-y) * 1.1);
    max-width: var(--content-max);
    margin-inline: auto;
}

.article-header {
    grid-column: 3 / span 8;
    margin-bottom: var(--space-12);
}

.article-header .eyebrow { margin-bottom: var(--space-2); }

.article-title {
    font-size: var(--type-display);
    font-weight: 700;
    line-height: var(--lh-display);
    letter-spacing: var(--tracking-tight);
    margin-bottom: var(--space-5);
    text-wrap: balance;
}

.article-deck {
    font-size: var(--type-h3);
    color: var(--text-secondary);
    line-height: var(--lh-body);
    margin-bottom: var(--space-6);
    text-wrap: pretty;
}

.article-meta {
    display: flex;
    align-items: center;
    gap: var(--space-3);
    flex-wrap: wrap;
    font-family: var(--font-mono);
    font-size: var(--type-label);
    font-weight: 500;
    text-transform: uppercase;
    letter-spacing: var(--tracking-label);
    color: var(--text-tertiary);
    font-variant-numeric: tabular-nums;
}
.article-meta .separator { color: var(--text-faint); }
.article-meta a { color: var(--text-tertiary); text-decoration: none; }
.article-meta a:hover { color: var(--accent-brand); }

.article-body {
    grid-column: 3 / span 8;
}

.article-body h2 {
    font-size: var(--type-title);
    font-weight: 600;
    line-height: var(--lh-title);
    letter-spacing: var(--tracking-tight);
    margin-top: var(--space-14);
    margin-bottom: var(--space-4);
}
.article-body h2:first-child { margin-top: 0; }

.article-body h3 {
    font-size: var(--type-h3);
    font-weight: 600;
    margin-top: var(--space-10);
    margin-bottom: var(--space-3);
}

.article-body p {
    font-size: var(--type-body);
    line-height: var(--lh-body);
    color: var(--text-primary);
    margin-bottom: var(--space-4);
    max-width: 68ch;
}

.article-body > p:first-of-type {
    font-size: var(--type-h3);
    color: var(--text-primary);
    font-weight: 400;
    line-height: var(--lh-body);
    margin-bottom: var(--space-5);
}

.article-body strong { font-weight: 600; }
.article-body a {
    color: var(--text-primary);
    text-decoration: underline;
    text-decoration-thickness: 1px;
    text-underline-offset: 3px;
    text-decoration-color: var(--text-faint);
    transition: color var(--motion-xs) var(--ease-return),
                text-decoration-color var(--motion-xs) var(--ease-return);
}
.article-body a:hover {
    color: var(--accent-brand);
    text-decoration-color: var(--accent-brand);
}
.article-body code {
    font-family: var(--font-mono);
    font-size: 0.9em;
    background: var(--bg-secondary);
    padding: 0.15em 0.4em;
    border-radius: var(--radius-sm);
}

.article-body blockquote {
    margin-block: var(--space-10);
    padding: var(--space-6) var(--space-8);
    background: var(--bg-secondary);
    border-radius: var(--radius-md);
    font-size: var(--type-h3);
    line-height: var(--lh-body);
    font-weight: 400;
    color: var(--text-primary);
    text-wrap: balance;
}
.article-body blockquote p { font-size: inherit; max-width: none; margin-bottom: 0; }
.article-body blockquote cite {
    display: block;
    margin-top: var(--space-3);
    font-family: var(--font-mono);
    font-size: var(--type-label);
    text-transform: uppercase;
    letter-spacing: var(--tracking-label);
    color: var(--text-tertiary);
    font-style: normal;
}

.article-body ul,
.article-body ol {
    margin-bottom: var(--space-4);
    padding-left: var(--space-6);
    max-width: 68ch;
}
.article-body li {
    font-size: var(--type-body);
    line-height: var(--lh-body);
    color: var(--text-primary);
    margin-bottom: var(--space-2);
}
.article-body li::marker { color: var(--text-tertiary); font-family: var(--font-mono); }

.article-body figure {
    margin-block: var(--space-10);
}
.article-body figcaption {
    font-family: var(--font-mono);
    font-size: var(--type-label);
    font-weight: 500;
    text-transform: uppercase;
    letter-spacing: var(--tracking-label);
    color: var(--text-tertiary);
    margin-top: var(--space-3);
    max-width: none;
}

.article-body pre {
    margin-block: var(--space-10);
    padding: var(--space-6);
    background: var(--bg-secondary);
    border-radius: var(--radius-md);
    overflow-x: auto;
    font-family: var(--font-mono);
    font-size: var(--type-data);
    line-height: var(--lh-data);
    color: var(--text-primary);
}
.article-body pre:focus-visible {
    outline: 2px solid var(--accent-brand);
    outline-offset: 2px;
}
.article-body pre code {
    background: none;
    padding: 0;
    border-radius: 0;
    font-size: inherit;
}

.article-body hr {
    border: none;
    margin-block: var(--space-14);
    height: 1px;
    background: linear-gradient(to right, transparent, var(--border-warm), transparent);
}

.article-footer {
    grid-column: 3 / span 8;
    margin-top: var(--space-14);
}

.article-footer .article-back {
    display: inline-flex;
    align-items: center;
    gap: var(--space-2);
    font-family: var(--font-mono);
    font-size: var(--type-label);
    font-weight: 500;
    text-transform: uppercase;
    letter-spacing: var(--tracking-label);
    color: var(--text-tertiary);
    text-decoration: none;
    transition: color var(--motion-xs) var(--ease-return), gap var(--motion-xs) var(--ease-return);
}
.article-footer .article-back:hover {
    color: var(--accent-brand);
    gap: var(--space-3);
}

/* ============================================
   CONTACT / DIRECT INQUIRIES
   ============================================ */
.contact-grid {
    grid-column: 2 / -1;
    display: grid;
    grid-template-columns: 1fr 1.2fr;
    gap: var(--space-8);
    align-items: stretch;
}

/* Dark ink info panel — contrast anchor before the footer */
.panel-ink {
    background: var(--ink-surface);
    color: var(--on-ink-full);
    border-radius: var(--radius-md);
    padding: var(--space-8);
}
.panel-ink .eyebrow { color: var(--on-ink-50); }
.panel-ink .section-title { color: var(--on-ink-full); }
.panel-ink.contact-info p { color: var(--on-ink-70); }

.contact-info .eyebrow { margin-bottom: var(--space-2); }
.contact-info h2 { margin-bottom: var(--space-3); }
.contact-info p {
    color: var(--text-secondary);
    margin-bottom: var(--space-6);
    line-height: var(--lh-body);
}

.contact-methods {
    display: flex;
    flex-direction: column;
    gap: var(--space-4);
}

.contact-method {
    display: flex;
    align-items: flex-start;
    gap: var(--space-3);
}

.contact-method-icon {
    width: 36px;
    height: 36px;
    border-radius: var(--radius-sm);
    background: var(--bg-secondary);
    color: var(--accent-brand);
    display: flex;
    align-items: center;
    justify-content: center;
    flex-shrink: 0;
}
.contact-method-icon svg { width: 18px; height: 18px; }

.contact-method-label {
    font-family: var(--font-mono);
    font-size: var(--type-label);
    font-weight: 600;
    text-transform: uppercase;
    letter-spacing: var(--tracking-label);
    color: var(--text-tertiary);
    margin-bottom: 2px;
}
.contact-method-value {
    color: var(--text-primary);
    font-weight: 500;
    font-size: var(--type-data);
}

/* Inverted versions for the ink panel */
.panel-ink .contact-method-icon {
    background: var(--on-ink-10);
    color: var(--on-ink-70);
}
.panel-ink .contact-method-label { color: var(--on-ink-50); }
.panel-ink .contact-method-value { color: var(--on-ink-full); }
.panel-ink .contact-method-value a {
    color: var(--on-ink-full);
    text-decoration-color: var(--on-ink-30);
}
.panel-ink .contact-method-value a:hover { text-decoration-color: currentColor; }

.contact-form {
    background: var(--surface-card);
    border-radius: var(--radius-md);
    padding: var(--space-8);
    box-shadow: var(--shadow-card);
}

.form-group {
    margin-bottom: var(--space-5);
}

.form-row {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: var(--space-4);
}

.form-label {
    display: block;
    font-family: var(--font-mono);
    font-size: var(--type-label);
    font-weight: 600;
    text-transform: uppercase;
    letter-spacing: var(--tracking-label);
    color: var(--text-secondary);
    margin-bottom: var(--space-2);
}
.form-label .required {
    color: var(--accent-brand);
    margin-left: 2px;
}

.form-input,
.form-textarea {
    width: 100%;
    padding: var(--space-3);
    font-size: var(--type-body);
    font-family: var(--font-sans);
    color: var(--text-primary);
    background: var(--bg-primary);
    border: 1px solid color-mix(in srgb, var(--border-input) 65%, transparent);
    border-radius: var(--radius-sm);
    transition: border-color var(--motion-xs) var(--ease-return),
                box-shadow var(--motion-xs) var(--ease-return),
                background var(--motion-xs) var(--ease-return);
}
.form-textarea { resize: vertical; min-height: 100px; }

.form-input:focus,
.form-textarea:focus {
    outline: none;
    border-color: var(--accent-brand);
    box-shadow: 0 0 0 3px color-mix(in srgb, var(--accent-brand) 15%, transparent);
}

.form-input.has-error,
.form-textarea.has-error {
    border-color: var(--border-input-error);
}

.form-error {
    display: none;
    font-family: var(--font-mono);
    font-size: var(--type-label);
    color: var(--status-error);
    margin-top: var(--space-1);
    font-weight: 500;
}
.form-error.visible { display: block; }

.form-honeypot {
    position: absolute;
    left: -9999px;
    width: 1px;
    height: 1px;
    overflow: hidden;
}

.form-submit {
    width: 100%;
    min-height: 42px;
    padding: var(--space-3) var(--space-5);
    font-family: var(--font-mono);
    font-size: var(--type-label);
    font-weight: 600;
    text-transform: uppercase;
    letter-spacing: var(--tracking-label);
    background: var(--cta-primary);
    color: var(--cta-primary-text);
    border: none;
    border-radius: var(--radius-sm);
    cursor: pointer;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: var(--space-2);
    transition: background var(--motion-xs) var(--ease-return),
                transform var(--motion-xs) var(--ease-return),
                box-shadow var(--motion-xs) var(--ease-return);
    box-shadow: 0 2px 8px color-mix(in srgb, var(--cta-primary) 25%, transparent);
}
.form-submit:hover {
    background: var(--accent-brand-dark);
    box-shadow: 0 4px 12px color-mix(in srgb, var(--cta-primary) 35%, transparent);
    transform: translateY(-1px);
}
.form-submit:active { transform: translateY(0); }
.form-submit:disabled { opacity: 0.7; cursor: not-allowed; transform: none; }

.form-submit-spinner {
    display: none;
    width: 16px;
    height: 16px;
    border: 2px solid var(--on-ink-30);
    border-top-color: var(--bg-primary);
    border-radius: var(--radius-pill);
    animation: spin 0.6s linear infinite;
}
.form-submit.loading .form-submit-spinner { display: block; }
.form-submit.loading .form-submit-text { display: none; }
@keyframes spin { to { transform: rotate(360deg); } }

.form-reassurance {
    font-family: var(--font-mono);
    font-size: 0.75rem;
    color: var(--text-tertiary);
    text-align: center;
    margin-top: var(--space-3);
}

.form-success {
    display: none;
    text-align: left;
    padding: var(--space-6) var(--space-4);
}
.form-success.visible { display: block; }

.form-success-icon {
    width: 44px;
    height: 44px;
    border-radius: var(--radius-pill);
    background: rgba(34, 160, 107, 0.12);
    color: var(--status-success);
    display: flex;
    align-items: center;
    justify-content: center;
    margin: 0 auto var(--space-4);
    font-size: var(--type-h3);
}
.form-success h3 { margin-bottom: var(--space-2); }
.form-success p { color: var(--text-secondary); }

/* ============================================
   FOOTER
   ============================================ */
.site-footer {
    background: var(--ink-surface);
    color: var(--on-ink-full);
    padding-top: var(--space-12);
    padding-bottom: var(--space-8);
    /* Footer is always an ink surface in both modes: emblem structure
       flips to white, flame uses the on-ink variant (>= 3:1 on ink
       and on white in every theme — verified). */
    --logo-ink: #FFFFFF;
    --logo-flame: var(--logo-flame-on-ink);
}

.footer-main {
    display: grid;
    grid-template-columns: 2fr 1fr 1.2fr;
    gap: var(--space-10);
    margin-bottom: var(--space-10);
}

.footer-brand .logo {
    color: var(--on-ink-full);
    margin-bottom: var(--space-3);
}
.footer-brand p {
    color: var(--on-ink-70);
    font-size: var(--type-data);
    line-height: var(--lh-body);
    max-width: 320px;
}

.footer-col h4 {
    font-family: var(--font-mono);
    font-size: var(--type-label);
    font-weight: 600;
    text-transform: uppercase;
    letter-spacing: var(--tracking-label);
    color: var(--on-ink-50);
    margin-bottom: var(--space-3);
}

.footer-col nav {
    display: flex;
    flex-direction: column;
    gap: var(--space-2);
}
.footer-col nav a {
    color: var(--on-ink-70);
    font-size: var(--type-data);
    text-decoration: none;
    transition: color var(--motion-xs) var(--ease-return);
}
.footer-col nav a:hover { color: var(--on-ink-full); }

.footer-spec-item {
    font-family: var(--font-mono);
    font-size: var(--type-label);
    color: var(--on-ink-70);
    margin-bottom: var(--space-2);
}
.footer-spec-item a { color: var(--on-ink-full); }

.footer-bottom {
    padding-top: var(--space-8);
    margin-top: var(--space-2);
    display: flex;
    justify-content: space-between;
    align-items: center;
    flex-wrap: wrap;
    gap: var(--space-3);
}

.footer-bottom p {
    margin-bottom: 0;
    color: var(--on-ink-50);
    font-size: var(--type-label);
}

.footer-meta {
    display: flex;
    gap: var(--space-3);
    align-items: center;
}
.footer-meta a {
    color: var(--on-ink-50);
    font-size: var(--type-label);
    text-decoration: none;
}
.footer-meta a:hover { color: var(--on-ink-full); }
.footer-meta .separator { color: var(--on-ink-30); }

/* Animated Underline */
.link-underline {
    text-decoration: underline;
    text-decoration-color: transparent;
    text-underline-offset: 3px;
    text-decoration-thickness: 1px;
    transition: text-decoration-color var(--motion-sm) var(--ease-return);
}
.link-underline:hover {
    text-decoration-color: currentColor;
}

/* ============================================
   RESPONSIVE DESIGN
   ============================================ */
@media (max-width: 1023px) {
    .section-header { grid-column: 1 / -1; }
    .about-single { grid-column: 1 / -1; }
    .blog-index { grid-column: 1 / -1; }
    .contact-grid { grid-template-columns: 1fr; gap: var(--space-6); }
    .footer-main { grid-template-columns: 1fr 1fr; }
    .footer-brand { grid-column: 1 / -1; }
    .article-header,
    .article-body,
    .article-footer,
    .blog-index { grid-column: 2 / span 10; }
}

@media (max-width: 599px) {
    .main-nav { display: none; }
    .main-nav.active {
        display: flex;
        position: absolute;
        top: 64px;
        left: 0;
        right: 0;
        flex-direction: column;
        background: var(--bg-primary);
        border-radius: 0 0 var(--radius-md) var(--radius-md);
        padding: var(--space-6);
        gap: var(--space-4);
        box-shadow: 0 10px 25px rgba(0,0,0,0.1);
    }
    .main-nav.active a { width: 100%; }
    .nav-cta { text-align: center; }
    .mobile-menu-toggle { display: flex; }
    .form-row { grid-template-columns: 1fr; }
    .about-highlights { grid-template-columns: 1fr; }
    .footer-main { grid-template-columns: 1fr; }
    .footer-bottom { flex-direction: column; align-items: flex-start; }
    .theme-toggle { margin-left: auto; }
    .article-header,
    .article-body,
    .article-footer,
    .blog-index { grid-column: 1 / -1; }
}

/* Print */
@media print {
    .theme-toggle, .mobile-menu-toggle,
    .nav-cta, .skip-link, .contact-form { display: none !important; }
    body { background: white !important; color: black !important; }
}