@charset "UTF-8";
/* ============================================================
   SWITCH TO — Migration Manifesto
   Editorial-brutalist. Newsprint cream + acid accents.
   Fraunces × Geist × Geist Mono.
   ============================================================ */

/* ---------- FONTS (self-hosted, GDPR: no third-party requests) ----------
   Variable fonts. Fraunces carries opsz 9..144, wght 100..900, SOFT 0..100
   in both roman and italic — the italic is a real cut, not a synthesised
   slant. Only latin + latin-ext are shipped; cyrillic/greek/vietnamese are
   deliberately omitted for a DE/EN site.
   ----------------------------------------------------------------------- */

/* Fraunces — display, roman */
@font-face {
    font-family: 'Fraunces';
    font-style: normal;
    font-weight: 100 900;
    font-display: swap;
    src: url('assets/fonts/fraunces-latin.woff2') format('woff2');
    unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
}
@font-face {
    font-family: 'Fraunces';
    font-style: normal;
    font-weight: 100 900;
    font-display: swap;
    src: url('assets/fonts/fraunces-latin-ext.woff2') format('woff2');
    unicode-range: U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF, U+0304, U+0308, U+0329, U+1D00-1DBF, U+1E00-1E9F, U+1EF2-1EFF, U+2020, U+20A0-20AB, U+20AD-20C0, U+2113, U+2C60-2C7F, U+A720-A7FF;
}

/* Fraunces — display, italic */
@font-face {
    font-family: 'Fraunces';
    font-style: italic;
    font-weight: 100 900;
    font-display: swap;
    src: url('assets/fonts/fraunces-italic-latin.woff2') format('woff2');
    unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
}
@font-face {
    font-family: 'Fraunces';
    font-style: italic;
    font-weight: 100 900;
    font-display: swap;
    src: url('assets/fonts/fraunces-italic-latin-ext.woff2') format('woff2');
    unicode-range: U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF, U+0304, U+0308, U+0329, U+1D00-1DBF, U+1E00-1E9F, U+1EF2-1EFF, U+2020, U+20A0-20AB, U+20AD-20C0, U+2113, U+2C60-2C7F, U+A720-A7FF;
}

/* Geist — body */
@font-face {
    font-family: 'Geist';
    font-style: normal;
    font-weight: 100 900;
    font-display: swap;
    src: url('assets/fonts/geist-latin.woff2') format('woff2');
    unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
}
@font-face {
    font-family: 'Geist';
    font-style: normal;
    font-weight: 100 900;
    font-display: swap;
    src: url('assets/fonts/geist-latin-ext.woff2') format('woff2');
    unicode-range: U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF, U+0304, U+0308, U+0329, U+1D00-1DBF, U+1E00-1E9F, U+1EF2-1EFF, U+2020, U+20A0-20AB, U+20AD-20C0, U+2113, U+2C60-2C7F, U+A720-A7FF;
}

/* Geist Mono — annotations, labels, terminal voice */
@font-face {
    font-family: 'Geist Mono';
    font-style: normal;
    font-weight: 100 900;
    font-display: swap;
    src: url('assets/fonts/geistmono-latin.woff2') format('woff2');
    unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
}
@font-face {
    font-family: 'Geist Mono';
    font-style: normal;
    font-weight: 100 900;
    font-display: swap;
    src: url('assets/fonts/geistmono-latin-ext.woff2') format('woff2');
    unicode-range: U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF, U+0304, U+0308, U+0329, U+1D00-1DBF, U+1E00-1E9F, U+1EF2-1EFF, U+2020, U+20A0-20AB, U+20AD-20C0, U+2113, U+2C60-2C7F, U+A720-A7FF;
}

/* ---------- TOKENS ------------------------------------------ */
:root {
    /* Ink + paper — paper pushed marginally warmer/pinker */
    --ink: #0A0A0A;
    --ink-soft: #1B1B1B;
    --paper: #F1E5CE;
    --paper-warm: #EBD8B8;
    --paper-deep: #D6BC94;
    --paper-faint: rgba(10, 10, 10, 0.06);

    /* Riso-print accents — pushed crazier, spread across the wheel:
       cobalt → ultramarine/indigo (250°),
       lime → sharper citrus (70°),
       blood → hot riso pink (330°),
       flame → new fluorescent orange (20°) reserved for urgency moments. */
    --cobalt: #3218FF;
    --lime: #E4FF33;
    --blood: #FF2E9E;
    --flame: #FF6D14;

    /* Fills only — bright accents for backgrounds, block shadows and marks on
       dark surfaces. Do NOT put small text in these on cream; they fail WCAG
       there (lime-deep is 1.15:1 on paper). */
    --lime-deep: #C6E500;

    /* Text-safe on cream. Same hues, walked down in lightness until they clear
       WCAG AA on --paper: cobalt-deep 8.9:1, flame-deep 4.6:1, blood-deep 4.6:1.
       --lime-ink only reaches 3.1:1, so it is for decorative marks and UI
       glyphs (WCAG non-text), never for body copy. */
    --cobalt-deep: #1F09C4;
    --flame-deep: #B04300;
    --blood-deep: #C7006A;
    --lime-ink: #778900;

    /* Mid-tones — night gets a slight indigo undertone to match the new cobalt */
    --night: #0F0B22;
    --night-soft: #1A1730;
    --cream-on-night: #F1E5CE;

    /* Functional aliases */
    --bg: var(--paper);
    --fg: var(--ink);
    --rule: rgba(10, 10, 10, 0.18);
    --rule-strong: rgba(10, 10, 10, 0.85);

    /* Typography */
    --font-display: 'Fraunces', 'Times New Roman', Georgia, serif;
    --font-body: 'Geist', 'Helvetica Neue', system-ui, sans-serif;
    --font-mono: 'Geist Mono', 'JetBrains Mono', ui-monospace, 'SFMono-Regular', monospace;

    /* Scale */
    --fs-xs: 0.72rem;
    --fs-sm: 0.84rem;
    --fs-base: 1rem;
    --fs-md: 1.12rem;
    --fs-lg: 1.32rem;
    --fs-xl: 1.6rem;
    --fs-2xl: 2.1rem;
    --fs-3xl: clamp(2.6rem, 4.2vw, 3.8rem);
    --fs-display: clamp(3.6rem, 9vw, 8.4rem);
    --fs-mega: clamp(5rem, 16vw, 14rem);

    /* Spacing */
    --space-1: 0.25rem;
    --space-2: 0.5rem;
    --space-3: 0.75rem;
    --space-4: 1rem;
    --space-5: 1.5rem;
    --space-6: 2rem;
    --space-7: 3rem;
    --space-8: 4rem;
    --space-9: 6rem;
    --space-10: 9rem;

    /* Geometry */
    --radius-xs: 4px;
    --radius-sm: 8px;
    --radius-md: 14px;
    --radius-pill: 999px;

    /* Shadows (only used sparingly — this design is mostly flat & sharp) */
    --shadow-block: 8px 8px 0 var(--ink);
    --shadow-block-cobalt: 8px 8px 0 var(--cobalt);
    --shadow-block-lime: 8px 8px 0 var(--lime-deep);

    /* Motion */
    --ease-out: cubic-bezier(0.16, 1, 0.3, 1);
    --ease-snap: cubic-bezier(0.6, -0.05, 0.2, 1.4);

    /* Header */
    --header-h: 78px;

    /* Scroll progress */
    --scroll-progress: 0;
}

/* ---------- RESET ------------------------------------------ */
*, *::before, *::after { box-sizing: border-box; }
* { margin: 0; padding: 0; }
html { -webkit-text-size-adjust: 100%; scroll-behavior: smooth; }
@media (prefers-reduced-motion: reduce) { html { scroll-behavior: auto; } }

body {
    font-family: var(--font-body);
    font-size: var(--fs-base);
    font-weight: 400;
    line-height: 1.55;
    color: var(--fg);
    background: var(--bg);
    min-height: 100vh;
    overflow-x: hidden;
    -webkit-font-smoothing: antialiased;
    -moz-osx-font-smoothing: grayscale;
    text-rendering: optimizeLegibility;
    position: relative;
}

img, svg, video { display: block; max-width: 100%; height: auto; }
a { color: inherit; text-decoration: none; }
button { font: inherit; cursor: pointer; background: none; border: none; color: inherit; }
ul, ol { list-style: none; }
input, select, textarea, button { font-family: inherit; }
:focus-visible {
    outline: 3px solid var(--cobalt);
    outline-offset: 3px;
    border-radius: 2px;
}

/* ---------- GLOBAL TEXTURES -------------------------------- */
/* Subtle film grain across the whole page */
body::before {
    content: '';
    position: fixed;
    inset: 0;
    pointer-events: none;
    z-index: 9000;
    opacity: 0.55;
    mix-blend-mode: multiply;
    background-image: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' width='220' height='220'><filter id='n'><feTurbulence type='fractalNoise' baseFrequency='1.4' numOctaves='2' stitchTiles='stitch'/><feColorMatrix values='0 0 0 0 0  0 0 0 0 0  0 0 0 0 0  0 0 0 0.18 0'/></filter><rect width='100%25' height='100%25' filter='url(%23n)'/></svg>");
    background-size: 220px 220px;
}

/* Hairline grid background behind everything */
body::after {
    content: '';
    position: fixed;
    inset: 0;
    pointer-events: none;
    z-index: -1;
    background-image:
        linear-gradient(to right, rgba(10,10,10,0.04) 1px, transparent 1px),
        linear-gradient(to bottom, rgba(10,10,10,0.04) 1px, transparent 1px);
    background-size: 56px 56px;
}

/* ---------- TYPOGRAPHY ------------------------------------- */
h1, h2, h3, h4 {
    font-family: var(--font-display);
    font-weight: 700;
    line-height: 0.96;
    letter-spacing: -0.02em;
    font-variation-settings: 'opsz' 144, 'SOFT' 30;
    color: var(--ink);
}

h1 { font-size: var(--fs-display); font-weight: 800; }
h2 { font-size: var(--fs-3xl); font-weight: 700; }
h3 { font-size: var(--fs-xl); font-weight: 600; }
h4 { font-size: var(--fs-lg); font-weight: 600; }

p { font-size: var(--fs-md); }

::selection { background: var(--lime); color: var(--ink); }

/* ---------- UTILITIES -------------------------------------- */
.container {
    width: 100%;
    max-width: 1320px;
    margin: 0 auto;
    padding: 0 clamp(1rem, 4vw, 3rem);
    position: relative;
}

.visually-hidden {
    position: absolute !important;
    width: 1px; height: 1px;
    padding: 0; margin: -1px;
    overflow: hidden;
    clip: rect(0, 0, 0, 0);
    white-space: nowrap;
    border: 0;
}

.skip-link {
    position: absolute;
    top: -40px;
    left: 0;
    background: var(--ink);
    color: var(--paper);
    padding: 8px 16px;
    z-index: 10000;
    font-family: var(--font-mono);
    font-size: var(--fs-xs);
    text-transform: uppercase;
    letter-spacing: 0.08em;
}
.skip-link:focus { top: 0; }

/* ---------- SCROLL PROGRESS BAR ---------------------------- */
.scroll-progress {
    position: fixed;
    top: 0; left: 0;
    height: 4px;
    width: 100%;
    background: var(--ink);
    transform-origin: left center;
    transform: scaleX(calc(var(--scroll-progress, 0) / 100));
    z-index: 10001;
    pointer-events: none;
}

/* ============================================================
   HEADER
   ============================================================ */
.site-header {
    position: fixed;
    top: 0; left: 0; right: 0;
    z-index: 5000;
    background: var(--paper);
    border-bottom: 1.5px solid var(--ink);
    transition: padding 0.3s var(--ease-out);
}
.site-header.is-scrolled { padding: 0; }
.site-header.is-scrolled::before {
    content: '';
    position: absolute;
    inset: 0;
    background: var(--paper);
    z-index: -1;
}

.header-inner {
    max-width: 1440px;
    margin: 0 auto;
    padding: 0 clamp(1rem, 4vw, 2.4rem);
    height: var(--header-h);
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: var(--space-5);
}

.logo {
    display: inline-flex;
    align-items: center;
    gap: 10px;
    color: var(--ink);
    font-family: var(--font-display);
    font-weight: 900;
    font-size: 1.4rem;
    letter-spacing: -0.02em;
}
.logo-image { height: 36px; width: auto; }

/* ---------- LOGO SVG — Terminal Prompt Lockup ------------- */
/* > switch_to█   cobalt prompt · ink wordmark · blinking flame caret */
.logo-image-nav { display: block; height: 32px; width: auto; overflow: visible; }
.logo-prompt {
    font-family: var(--font-mono);
    font-size: 34px;
    font-weight: 700;
    fill: var(--cobalt);
    letter-spacing: -0.02em;
}
.logo-word {
    font-family: var(--font-mono);
    font-size: 30px;
    font-weight: 600;
    fill: var(--ink);
    letter-spacing: -0.01em;
}
.logo-caret {
    fill: var(--flame);
    animation: caretBlink 1.05s steps(2, end) infinite;
    transform-origin: center;
}
@keyframes caretBlink {
    0%, 49%   { opacity: 1; }
    50%, 100% { opacity: 0; }
}

.logo:hover .logo-prompt { fill: var(--flame); }
.logo:hover .logo-caret  { animation-duration: 0.5s; fill: var(--cobalt); }

/* Footer mark — App-icon: cream rounded square with `>_` */
.footer-logo-mark {
    width: 72px;
    height: 72px;
    display: block;
    transition: transform 0.3s var(--ease-out);
}
.footer-mark-bg { fill: var(--cream-on-night); transition: fill 0.3s ease; }
.footer-mark-prompt {
    font-family: var(--font-mono);
    font-size: 46px;
    font-weight: 700;
    fill: var(--cobalt);
    transition: fill 0.3s ease;
}
.footer-mark-underscore {
    font-family: var(--font-mono);
    font-size: 46px;
    font-weight: 700;
    fill: var(--ink);
    transition: fill 0.3s ease;
}
.footer-logo-link:hover .footer-logo-mark { transform: rotate(-3deg) scale(1.05); }
.footer-logo-link:hover .footer-mark-bg { fill: var(--lime); }
.footer-logo-link:hover .footer-mark-prompt { fill: var(--ink); }

@media (prefers-reduced-motion: reduce) {
    .logo-caret { animation: none; }
}

.main-nav { display: none; }
@media (min-width: 880px) {
    .main-nav { display: block; }
    .nav-list {
        display: flex;
        align-items: center;
        gap: var(--space-4);
    }
    .nav-list > li > a {
        font-family: var(--font-mono);
        font-size: var(--fs-xs);
        text-transform: uppercase;
        letter-spacing: 0.12em;
        padding: 10px 14px;
        position: relative;
        transition: color 0.2s var(--ease-out);
    }
    .nav-list > li > a:not(.nav-cta)::after {
        content: '';
        position: absolute;
        left: 14px; right: 14px;
        bottom: 4px;
        height: 2px;
        background: var(--ink);
        transform: scaleX(0);
        transform-origin: left;
        transition: transform 0.3s var(--ease-out);
    }
    .nav-list > li > a:not(.nav-cta):hover::after { transform: scaleX(1); }
    .nav-list > li > a[aria-current]::after { transform: scaleX(1); }
}

.nav-cta {
    background: var(--ink);
    color: var(--paper) !important;
    padding: 10px 18px !important;
    border: 1.5px solid var(--ink);
    transition: all 0.2s var(--ease-out) !important;
}
.nav-cta:hover {
    background: var(--cobalt);
    border-color: var(--cobalt);
    transform: translate(-2px, -2px);
    box-shadow: 4px 4px 0 var(--ink);
}

.language-switch {
    display: inline-flex;
    align-items: center;
    border: 1.5px solid var(--ink);
    border-radius: var(--radius-pill);
    overflow: hidden;
    font-family: var(--font-mono);
    font-size: var(--fs-xs);
}
.language-switch a {
    padding: 6px 12px;
    color: var(--ink);
    letter-spacing: 0.08em;
    transition: all 0.2s var(--ease-out);
}
.language-switch a[aria-current="page"] {
    background: var(--ink);
    color: var(--paper);
}

/* Mobile menu toggle */
.mobile-menu-toggle {
    display: inline-flex;
    align-items: center;
    gap: 10px;
    padding: 10px 14px;
    border: 1.5px solid var(--ink);
    border-radius: var(--radius-pill);
    font-family: var(--font-mono);
    font-size: var(--fs-xs);
    text-transform: uppercase;
    letter-spacing: 0.1em;
}
@media (min-width: 880px) {
    .mobile-menu-toggle { display: none; }
}
.mobile-menu-icon {
    display: inline-flex;
    flex-direction: column;
    gap: 4px;
}
.hamburger-line {
    display: block;
    width: 18px;
    height: 2px;
    background: var(--ink);
    transition: transform 0.3s var(--ease-out), opacity 0.2s ease;
}
.mobile-menu-toggle[aria-expanded="true"] .hamburger-line:nth-child(1) {
    transform: translateY(6px) rotate(45deg);
}
.mobile-menu-toggle[aria-expanded="true"] .hamburger-line:nth-child(2) { opacity: 0; }
.mobile-menu-toggle[aria-expanded="true"] .hamburger-line:nth-child(3) {
    transform: translateY(-6px) rotate(-45deg);
}

/* Mobile overlay menu */
.mobile-menu {
    position: fixed;
    inset: 0;
    background: var(--ink);
    color: var(--paper);
    z-index: 4500;
    padding: calc(var(--header-h) + 20px) 24px 24px;
    opacity: 0;
    transform: translateY(-100%);
    transition: opacity 0.3s var(--ease-out), transform 0.4s var(--ease-out);
}
.mobile-menu.is-open { opacity: 1; transform: translateY(0); }
.mobile-nav-list {
    display: grid;
    gap: var(--space-5);
    font-family: var(--font-display);
    font-size: var(--fs-3xl);
    font-weight: 700;
    line-height: 1;
}
.mobile-nav-list a { color: var(--paper); }
.mobile-nav-list .nav-cta {
    display: inline-block;
    margin-top: var(--space-2);
    background: var(--lime);
    color: var(--ink) !important;
    border-color: var(--lime);
    padding: 14px 24px !important;
    font-family: var(--font-mono);
    font-size: var(--fs-base);
}
.mobile-nav-list .language-switch {
    border-color: var(--paper);
}
.mobile-nav-list .language-switch a { color: var(--paper); }
.mobile-nav-list .language-switch a[aria-current="page"] {
    background: var(--paper);
    color: var(--ink);
}
.menu-open { overflow: hidden; }

/* ============================================================
   BUTTONS
   ============================================================ */
.btn {
    display: inline-flex;
    align-items: center;
    gap: 10px;
    padding: 14px 22px;
    border: 1.5px solid var(--ink);
    background: var(--paper);
    color: var(--ink);
    font-family: var(--font-mono);
    font-size: var(--fs-sm);
    font-weight: 500;
    text-transform: uppercase;
    letter-spacing: 0.1em;
    /* Block shadow via box-shadow — always renders behind the box,
       never obscures the label even when :hover creates a new
       stacking context. */
    box-shadow: 6px 6px 0 var(--ink);
    transition: transform 0.2s var(--ease-out), box-shadow 0.2s var(--ease-out), background 0.2s ease;
    position: relative;
    cursor: pointer;
}
.btn:hover { transform: translate(-2px, -2px); box-shadow: 8px 8px 0 var(--ink); }
.btn:active { transform: translate(0, 0); box-shadow: 3px 3px 0 var(--ink); }

/* Guarantee background + text color on hover so no inherited or
   animated state can wash the label out. */
.btn-primary:hover,
.btn-primary:focus-visible {
    background: var(--cobalt);
    color: #fff;
    border-color: var(--ink);
    box-shadow: 8px 8px 0 var(--lime-deep);
}
.btn-secondary:hover,
.btn-secondary:focus-visible {
    background: var(--paper);
    color: var(--ink);
    border-color: var(--ink);
    box-shadow: 8px 8px 0 var(--ink);
}

.btn-primary {
    background: var(--cobalt);
    color: #fff;
    border-color: var(--ink);
    box-shadow: 6px 6px 0 var(--lime-deep);
}
.btn-primary:active { box-shadow: 3px 3px 0 var(--lime-deep); }

.btn-secondary {
    background: var(--paper);
}

.btn-large { padding: 18px 28px; font-size: var(--fs-base); }

.btn-arrow { transition: transform 0.25s var(--ease-out); }
.btn:hover .btn-arrow { transform: translateX(4px); }

.btn-spinner {
    width: 14px; height: 14px;
    border-radius: 50%;
    border: 2px solid currentColor;
    border-top-color: transparent;
    animation: spin 0.7s linear infinite;
}
@keyframes spin { to { transform: rotate(360deg); } }

.btn-text-mobile { display: none; }
@media (max-width: 520px) {
    .btn-text { display: none; }
    .btn-text-mobile { display: inline; }
}

/* ============================================================
   HERO
   ============================================================ */
.hero {
    position: relative;
    padding: calc(var(--header-h) + var(--space-8)) 0 var(--space-8);
    overflow: hidden;
    border-bottom: 1.5px solid var(--ink);
    background: var(--paper);
}

.hero-background {
    position: absolute;
    inset: 0;
    pointer-events: none;
    overflow: hidden;
}
.hero-grid-surface {
    position: absolute;
    inset: -20% -10%;
    background-image:
        linear-gradient(to right, rgba(10,10,10,0.08) 1px, transparent 1px),
        linear-gradient(to bottom, rgba(10,10,10,0.08) 1px, transparent 1px);
    background-size: 80px 80px;
    opacity: 0.5;
}
.hero-axis-x, .hero-axis-y {
    position: absolute;
    background: var(--ink);
}
.hero-axis-x {
    left: -10%; right: -10%;
    top: 50%;
    height: 1.5px;
    opacity: 0.5;
}
.hero-axis-y {
    top: -10%; bottom: -10%;
    left: 55%;
    width: 1.5px;
    opacity: 0.4;
}

/* Decorative tags floating in hero bg */
.hero::before {
    content: '<migration year="2026" status="in_progress" />';
    position: absolute;
    top: calc(var(--header-h) + 12px);
    right: 32px;
    font-family: var(--font-mono);
    font-size: var(--fs-xs);
    color: var(--ink);
    opacity: 0.45;
    letter-spacing: 0.04em;
    pointer-events: none;
}
.hero::after {
    content: '// est. 2026 — Hamburg, DE';
    position: absolute;
    bottom: 16px;
    left: 32px;
    font-family: var(--font-mono);
    font-size: var(--fs-xs);
    color: var(--ink);
    opacity: 0.45;
    pointer-events: none;
}

.hero-shell {
    display: grid;
    gap: var(--space-7);
    grid-template-columns: 1fr;
    position: relative;
    z-index: 2;
}
@media (min-width: 980px) {
    .hero-shell {
        grid-template-columns: minmax(0, 1.45fr) minmax(360px, 1fr);
        gap: var(--space-9);
        align-items: end;
    }
}

.hero-copy { position: relative; }

.hero-eyebrow {
    font-family: var(--font-mono);
    font-size: var(--fs-xs);
    text-transform: uppercase;
    letter-spacing: 0.18em;
    color: var(--ink);
    margin-bottom: var(--space-5);
    display: inline-flex;
    align-items: center;
    gap: 12px;
}
.hero-eyebrow::before {
    content: '';
    width: 32px;
    height: 1.5px;
    background: var(--cobalt);
}
.hero-eyebrow::after {
    content: '/ 001';
    color: var(--cobalt);
    font-weight: 500;
}

.hero-title {
    font-family: var(--font-display);
    font-size: var(--fs-display);
    font-weight: 900;
    line-height: 0.92;
    letter-spacing: -0.035em;
    margin-bottom: var(--space-5);
    color: var(--ink);
    font-variation-settings: 'opsz' 144, 'SOFT' 50;
}
.hero-title em {
    font-style: italic;
    font-weight: 400;
    color: var(--cobalt);
    font-variation-settings: 'opsz' 144, 'SOFT' 100;
}

.hero-subtitle {
    font-size: var(--fs-lg);
    line-height: 1.5;
    max-width: 56ch;
    color: var(--ink-soft);
    margin-bottom: var(--space-6);
}

.hero-cta {
    display: flex;
    flex-wrap: wrap;
    gap: var(--space-3);
    margin-bottom: var(--space-6);
}

.hero-proof {
    display: flex;
    flex-wrap: wrap;
    gap: var(--space-2);
    margin-top: var(--space-3);
}
.proof-badge {
    display: inline-flex;
    align-items: center;
    gap: 6px;
    padding: 6px 12px;
    border: 1.5px solid var(--ink);
    background: var(--paper);
    border-radius: var(--radius-pill);
    font-family: var(--font-mono);
    font-size: var(--fs-xs);
    letter-spacing: 0.06em;
    text-transform: uppercase;
}
.proof-badge::before {
    content: '✓';
    color: var(--cobalt);
    font-weight: 700;
}

/* Hero right side panel */
.hero-side { display: grid; gap: var(--space-4); }

.hero-panel {
    background: var(--ink);
    color: var(--paper);
    padding: var(--space-6);
    border-radius: 0;
    border: 1.5px solid var(--ink);
    position: relative;
    box-shadow: var(--shadow-block-lime);
    transform: rotate(0.4deg);
}
.hero-panel::before {
    content: '// WHY';
    position: absolute;
    top: -10px;
    left: 16px;
    background: var(--lime);
    color: var(--ink);
    padding: 2px 8px;
    font-family: var(--font-mono);
    font-size: 10px;
    letter-spacing: 0.16em;
    border: 1.5px solid var(--ink);
}
.hero-panel-label {
    font-family: var(--font-mono);
    font-size: var(--fs-xs);
    text-transform: uppercase;
    letter-spacing: 0.16em;
    color: var(--lime);
    margin-bottom: var(--space-5);
}
.hero-panel-row {
    padding: var(--space-3) 0;
    border-bottom: 1px dashed rgba(237, 229, 208, 0.18);
}
.hero-panel-row:last-child { border-bottom: 0; }
.hero-panel-row span {
    display: block;
    font-family: var(--font-display);
    font-size: var(--fs-md);
    font-weight: 700;
    margin-bottom: 4px;
    color: var(--paper);
}
.hero-panel-row p {
    font-size: var(--fs-sm);
    color: rgba(237, 229, 208, 0.78);
    line-height: 1.45;
}

.hero-cms-strip {
    display: flex;
    flex-wrap: wrap;
    gap: 8px;
    padding: var(--space-3) var(--space-4);
    border: 1.5px solid var(--ink);
    background: var(--paper-deep);
    font-family: var(--font-mono);
    font-size: var(--fs-xs);
    letter-spacing: 0.08em;
    text-transform: uppercase;
}
.hero-cms-strip span {
    padding: 4px 8px;
    background: var(--paper);
    border: 1px solid var(--ink);
    border-radius: var(--radius-xs);
}

/* ============================================================
   MARQUEE TICKER
   ============================================================ */
.marquee {
    overflow: hidden;
    border-block: 1.5px solid var(--ink);
    background: var(--lime);
    color: var(--ink);
    font-family: var(--font-display);
    font-weight: 800;
    font-size: clamp(2rem, 4vw, 3.4rem);
    letter-spacing: -0.02em;
    line-height: 1;
    padding: var(--space-4) 0;
    position: relative;
}
.marquee--cobalt { background: var(--cobalt); color: #fff; }
.marquee--blood { background: var(--blood); color: var(--ink); }
.marquee--ink { background: var(--ink); color: var(--lime); }

.marquee-track {
    display: inline-flex;
    gap: var(--space-7);
    white-space: nowrap;
    animation: marquee 28s linear infinite;
    padding-right: var(--space-7);
}
.marquee--reverse .marquee-track {
    animation-direction: reverse;
}
.marquee:hover .marquee-track { animation-play-state: paused; }

.marquee-track span {
    display: inline-flex;
    align-items: center;
    gap: var(--space-4);
    font-variation-settings: 'opsz' 144, 'SOFT' 80;
}
.marquee-track span::after {
    content: '◆';
    color: var(--ink);
    font-size: 0.6em;
    opacity: 0.6;
}

@keyframes marquee {
    from { transform: translateX(0); }
    to { transform: translateX(-50%); }
}

@media (prefers-reduced-motion: reduce) {
    .marquee-track { animation: none; }
}

/* ============================================================
   SECTION SHELL
   ============================================================ */
.section {
    padding: var(--space-9) 0;
    position: relative;
    border-bottom: 1.5px solid var(--ink);
}
@media (max-width: 720px) { .section { padding: var(--space-8) 0; } }

.section-eyebrow {
    font-family: var(--font-mono);
    font-size: var(--fs-xs);
    text-transform: uppercase;
    letter-spacing: 0.18em;
    color: inherit;
    margin-bottom: var(--space-4);
    display: inline-flex;
    align-items: center;
    gap: 10px;
    opacity: 0.85;
}
.section-eyebrow::before {
    content: '';
    width: 24px;
    height: 1.5px;
    background: currentColor;
}

.section-headline {
    font-family: var(--font-display);
    font-size: var(--fs-3xl);
    font-weight: 800;
    line-height: 1;
    letter-spacing: -0.025em;
    color: inherit;
    font-variation-settings: 'opsz' 144, 'SOFT' 50;
    max-width: 22ch;
}
.section-headline em {
    font-style: italic;
    font-weight: 400;
    font-variation-settings: 'opsz' 144, 'SOFT' 100;
}

.section-description {
    font-size: var(--fs-lg);
    line-height: 1.5;
    max-width: 56ch;
    color: inherit;
    opacity: 0.78;
}

.section-heading-grid {
    display: grid;
    gap: var(--space-5);
    grid-template-columns: 1fr;
    margin-bottom: var(--space-7);
    padding-bottom: var(--space-5);
    border-bottom: 1px dashed var(--rule);
    position: relative;
}
@media (min-width: 880px) {
    .section-heading-grid {
        grid-template-columns: minmax(0, 1.4fr) minmax(0, 1fr);
        gap: var(--space-8);
        align-items: end;
    }
}
.section-description-side {
    align-self: end;
    padding-bottom: 4px;
}

.section-intro-block { display: grid; gap: var(--space-3); }
.section-intro-block-compact { gap: var(--space-3); }

/* ============================================================
   SECTION: SWITCH (before / after) — split black + cream
   ============================================================ */
.section-switch {
    background: var(--ink);
    color: var(--cream-on-night);
    border-bottom: 1.5px solid var(--ink);
    overflow: hidden;
    position: relative;
}
.section-switch::before {
    content: '01 // BEFORE & AFTER';
    position: absolute;
    top: 24px;
    right: 32px;
    font-family: var(--font-mono);
    font-size: var(--fs-xs);
    color: var(--lime);
    letter-spacing: 0.16em;
    opacity: 0.8;
}
.section-switch .section-eyebrow { color: var(--lime); }
.section-switch .section-headline { color: var(--paper); }
.section-switch .section-description { color: rgba(237, 229, 208, 0.78); }
.section-switch .section-heading-grid { border-bottom-color: rgba(237, 229, 208, 0.18); }

.switch-grid {
    display: grid;
    gap: var(--space-6);
    grid-template-columns: 1fr;
    position: relative;
}

/* Mobile/tablet: cards stack — insert a downward-pointing chevron between them */
@media (max-width: 819px) {
    .switch-grid {
        grid-template-columns: 1fr;
        grid-template-rows: auto auto auto;
        gap: var(--space-4);
    }
    .switch-card-dark  { grid-row: 1; grid-column: 1; }
    .switch-grid::before {
        content: '❯❯❯';
        grid-row: 2;
        grid-column: 1;
        justify-self: center;
        font-family: var(--font-mono);
        font-size: 1.8rem;
        font-weight: 700;
        color: var(--lime);
        letter-spacing: 0.22em;
        line-height: 1;
        transform: rotate(90deg);
        transform-origin: center;
        margin: var(--space-3) 0;
    }
    .switch-card-light { grid-row: 3; grid-column: 1; }
}

/* Desktop: cards side-by-side — the chevron gets its own grid column.
   It used to be absolutely centred with an opaque ink background, but the
   chip is sized by its content (~146px) while the gap was fixed at 64px, so
   it overhung both cards and painted over their text. A dedicated track
   reserves the space instead, which makes the overlap structurally
   impossible and drops the need for a masking background. */
@media (min-width: 820px) {
    .switch-grid {
        grid-template-columns: minmax(0, 1fr) auto minmax(0, 1fr);
        gap: var(--space-6);
    }
    /* All three are pinned to row 1 on purpose. The ::before precedes the
       cards in source order, so placing it in column 2 pushes the cursor
       past column 1 — sparse auto-placement cannot go back, and the dark
       card would drop into a second row, leaving the chevron stranded
       above both cards. */
    .switch-card-dark { grid-column: 1; grid-row: 1; }
    .switch-grid::before {
        content: '❯❯❯';
        grid-column: 2;
        grid-row: 1;
        justify-self: center;
        align-self: center;
        font-family: var(--font-mono);
        font-size: clamp(2rem, 3.2vw, 3.4rem);
        font-weight: 700;
        line-height: 1;
        letter-spacing: 0.06em;
        color: var(--lime);
    }
    .switch-card-light { grid-column: 3; grid-row: 1; }
}

.switch-card {
    padding: var(--space-6);
    border: 1.5px solid var(--paper);
    position: relative;
    transition: transform 0.4s var(--ease-out);
}
.switch-card-dark {
    background: transparent;
    color: var(--paper);
    transform: rotate(-0.6deg);
}
.switch-card-dark:hover { transform: rotate(-1deg) translateY(-4px); }

.switch-card-light {
    background: var(--paper);
    color: var(--ink);
    border-color: var(--paper);
    transform: rotate(0.6deg);
    box-shadow: 12px 12px 0 var(--lime);
}
.switch-card-light:hover { transform: rotate(1deg) translateY(-4px); }

.switch-label {
    font-family: var(--font-mono);
    font-size: var(--fs-xs);
    text-transform: uppercase;
    letter-spacing: 0.18em;
    margin-bottom: var(--space-4);
    color: inherit;
    opacity: 0.7;
    display: inline-flex;
    align-items: center;
    gap: 8px;
}
.switch-card-dark .switch-label::before {
    content: '❯';
    color: var(--blood);
}
.switch-card-light .switch-label::before {
    content: '❯❯';
    color: var(--cobalt);
}

.switch-card h3 {
    font-family: var(--font-display);
    font-size: clamp(1.8rem, 2.4vw, 2.4rem);
    font-weight: 700;
    line-height: 1.05;
    margin-bottom: var(--space-5);
    font-variation-settings: 'opsz' 144, 'SOFT' 50;
}

.switch-card-light h3 { color: var(--ink); }

.switch-list { display: grid; gap: var(--space-3); }
.switch-list li {
    position: relative;
    padding-left: 28px;
    font-size: var(--fs-md);
    line-height: 1.45;
}
.switch-list li::before {
    content: '';
    position: absolute;
    left: 0;
    top: 0.6em;
    width: 16px;
    height: 1.5px;
    background: currentColor;
    opacity: 0.6;
}
.switch-card-dark .switch-list li::before { background: var(--blood); opacity: 1; }
.switch-card-light .switch-list li::before { background: var(--cobalt); opacity: 1; }

/* Stamped overlay on the "after" card */
.switch-card-light::after {
    content: 'MIGRATED ❯❯❯';
    position: absolute;
    top: 18px;
    right: -8px;
    background: var(--blood);
    color: var(--ink);
    padding: 6px 14px;
    font-family: var(--font-mono);
    font-size: var(--fs-xs);
    letter-spacing: 0.16em;
    transform: rotate(8deg);
    border: 1.5px solid var(--ink);
    box-shadow: 3px 3px 0 var(--ink);
}

/* ============================================================
   SECTION: ANSWER — Cobalt flood
   ============================================================ */
.section-answer {
    background: var(--cobalt);
    color: #fff;
    overflow: hidden;
    position: relative;
}
.section-answer::before {
    content: '02';
    position: absolute;
    bottom: -3rem;
    right: -1rem;
    font-family: var(--font-display);
    font-weight: 900;
    font-size: clamp(12rem, 24vw, 22rem);
    color: rgba(255, 255, 255, 0.08);
    line-height: 0.85;
    letter-spacing: -0.06em;
    pointer-events: none;
}
.section-answer::after {
    content: '❯ ❯ ❯ ❯ ❯ ❯ ❯ ❯ ❯ ❯ ❯ ❯ ❯ ❯ ❯ ❯ ❯ ❯';
    position: absolute;
    top: 20px;
    left: 0; right: 0;
    text-align: center;
    color: rgba(255, 255, 255, 0.3);
    font-size: 12px;
    letter-spacing: 1em;
    pointer-events: none;
}
.section-answer .section-eyebrow { color: var(--lime); }
.section-answer .section-headline { color: #fff; }

.answer-layout {
    display: grid;
    gap: var(--space-6);
    grid-template-columns: 1fr;
    align-items: start;
    position: relative;
    z-index: 2;
}
@media (min-width: 980px) {
    .answer-layout {
        grid-template-columns: minmax(0, 0.7fr) minmax(360px, 1fr);
        gap: var(--space-8);
    }
}

.answer-card {
    background: var(--paper);
    color: var(--ink);
    padding: var(--space-6);
    border: 1.5px solid var(--ink);
    box-shadow: 10px 10px 0 var(--ink);
    position: relative;
}
.answer-card::before {
    content: '<answer>';
    position: absolute;
    top: -14px;
    left: 16px;
    background: var(--ink);
    color: var(--lime);
    font-family: var(--font-mono);
    font-size: 11px;
    padding: 3px 10px;
    letter-spacing: 0.08em;
}
.answer-card > p {
    font-size: var(--fs-md);
    line-height: 1.55;
    margin-bottom: var(--space-5);
}

.answer-list { display: grid; gap: var(--space-3); }
.answer-list li {
    padding: var(--space-3) 0;
    border-top: 1px dashed var(--rule);
    font-size: var(--fs-md);
}
.answer-list li:first-child { border-top: 0; padding-top: 0; }
.answer-list li strong {
    display: inline-block;
    font-family: var(--font-mono);
    font-size: var(--fs-xs);
    text-transform: uppercase;
    letter-spacing: 0.12em;
    color: var(--cobalt);
    margin-right: 8px;
    font-weight: 600;
}

/* ============================================================
   SECTION: BENEFITS — paper with arrows
   ============================================================ */
.section-benefits {
    background: var(--paper);
    color: var(--ink);
    position: relative;
}
.section-benefits::before {
    content: '03 // SERVICES';
    position: absolute;
    top: 24px;
    right: 32px;
    font-family: var(--font-mono);
    font-size: var(--fs-xs);
    color: var(--ink);
    opacity: 0.5;
    letter-spacing: 0.16em;
}

.feature-grid {
    display: grid;
    gap: var(--space-5);
    grid-template-columns: 1fr;
}
@media (min-width: 720px) {
    .feature-grid { grid-template-columns: repeat(3, 1fr); }
}

.feature-card {
    background: var(--paper);
    border: 1.5px solid var(--ink);
    padding: var(--space-6);
    position: relative;
    transition: transform 0.3s var(--ease-out), box-shadow 0.3s var(--ease-out);
    counter-increment: feature;
}
.feature-card::before {
    content: '❯❯';
    position: absolute;
    top: 18px;
    right: 20px;
    color: var(--cobalt);
    font-size: 1.4rem;
    transition: transform 0.4s var(--ease-out);
}
.feature-card:hover {
    transform: translate(-4px, -4px);
    box-shadow: 8px 8px 0 var(--cobalt);
}
.feature-card:hover::before { transform: rotate(180deg); color: var(--blood-deep); }
.feature-card:nth-child(2)::before { color: var(--blood-deep); }
.feature-card:nth-child(2):hover { box-shadow: 8px 8px 0 var(--blood); }
.feature-card:nth-child(2):hover::before { color: var(--lime-ink); }
.feature-card:nth-child(3)::before { color: var(--lime-ink); }
.feature-card:nth-child(3):hover { box-shadow: 8px 8px 0 var(--lime-deep); }
.feature-card:nth-child(3):hover::before { color: var(--cobalt); }

.feature-card h3 {
    font-family: var(--font-display);
    font-size: var(--fs-2xl);
    font-weight: 700;
    line-height: 1.05;
    margin-bottom: var(--space-3);
    font-variation-settings: 'opsz' 144, 'SOFT' 50;
    padding-right: 32px;
}
.feature-card p {
    font-size: var(--fs-md);
    line-height: 1.5;
    color: var(--ink-soft);
}

.section-links {
    margin-top: var(--space-7);
    padding-top: var(--space-5);
    border-top: 1px dashed var(--rule);
    display: flex;
    flex-wrap: wrap;
    align-items: baseline;
    gap: var(--space-4);
}
.section-links-label {
    font-family: var(--font-mono);
    font-size: var(--fs-xs);
    text-transform: uppercase;
    letter-spacing: 0.16em;
    opacity: 0.7;
}
.text-link {
    font-family: var(--font-mono);
    font-size: var(--fs-sm);
    color: var(--cobalt);
    border-bottom: 1.5px solid var(--cobalt);
    padding-bottom: 2px;
    transition: all 0.2s var(--ease-out);
    display: inline-flex;
    align-items: center;
    gap: 6px;
}
.text-link::after {
    content: '↗';
    transition: transform 0.2s var(--ease-out);
}
.text-link:hover {
    color: var(--blood-deep);
    border-color: var(--blood-deep);
}
.text-link:hover::after { transform: translate(2px, -2px); }

/* ============================================================
   SECTION: PROCESS — Deep night with massive numbers
   ============================================================ */
.section-process {
    background: var(--night);
    color: var(--cream-on-night);
    overflow: hidden;
    position: relative;
}
.section-process::before {
    content: '';
    position: absolute;
    inset: 0;
    background-image:
        radial-gradient(circle at 20% 30%, rgba(21, 56, 255, 0.18) 0%, transparent 40%),
        radial-gradient(circle at 80% 70%, rgba(215, 255, 61, 0.1) 0%, transparent 35%);
    pointer-events: none;
}
.section-process .section-eyebrow { color: var(--lime); }
.section-process .section-headline { color: var(--paper); }
.section-process .section-description { color: rgba(237, 229, 208, 0.78); }
.section-process .section-heading-grid { border-bottom-color: rgba(237, 229, 208, 0.2); }

.process-grid {
    display: grid;
    gap: var(--space-5);
    grid-template-columns: 1fr;
    position: relative;
    z-index: 2;
}
@media (min-width: 880px) {
    .process-grid { grid-template-columns: repeat(3, 1fr); }
}

.process-card {
    background: rgba(237, 229, 208, 0.04);
    border: 1.5px solid rgba(237, 229, 208, 0.18);
    padding: var(--space-6);
    position: relative;
    overflow: hidden;
    transition: all 0.3s var(--ease-out);
}
.process-card:hover {
    background: rgba(21, 56, 255, 0.12);
    border-color: var(--cobalt);
    transform: translateY(-4px);
}

.process-number {
    display: block;
    font-family: var(--font-display);
    font-weight: 900;
    font-size: clamp(5rem, 9vw, 8rem);
    line-height: 1;
    letter-spacing: -0.05em;
    color: var(--lime);
    margin-bottom: var(--space-6);
    padding-bottom: 0.15em;
    position: relative;
    -webkit-text-stroke: 1.5px var(--lime);
    color: transparent;
    transition: color 0.3s ease;
    overflow: visible;
}
.process-card:hover .process-number {
    color: var(--lime);
    -webkit-text-stroke: 0;
}

.process-card h3 {
    font-family: var(--font-display);
    font-size: var(--fs-2xl);
    font-weight: 700;
    line-height: 1.05;
    margin-bottom: var(--space-3);
    color: var(--paper);
    font-variation-settings: 'opsz' 144, 'SOFT' 50;
}
.process-card p {
    font-size: var(--fs-md);
    line-height: 1.5;
    color: rgba(237, 229, 208, 0.78);
}

/* ============================================================
   SECTION: FAQ — Paper
   ============================================================ */
.section-faq {
    background: var(--paper);
    color: var(--ink);
    position: relative;
}
.section-faq::before {
    content: '05 // FAQ';
    position: absolute;
    top: 24px;
    right: 32px;
    font-family: var(--font-mono);
    font-size: var(--fs-xs);
    color: var(--ink);
    opacity: 0.5;
    letter-spacing: 0.16em;
}
.section-faq .section-headline {
    max-width: none;
    white-space: nowrap;
    font-size: clamp(2rem, 4vw, 3.6rem);
}
.section-faq .section-intro-block { margin-bottom: var(--space-7); }
@media (max-width: 640px) {
    .section-faq .section-headline { white-space: normal; }
}

.faq-list {
    display: grid;
    gap: 0;
    border-top: 1.5px solid var(--ink);
}

.faq-item {
    border-bottom: 1.5px solid var(--ink);
    background: var(--paper);
    transition: background 0.3s ease;
    position: relative;
}
.faq-item[open] { background: var(--paper-deep); }

.faq-item summary {
    list-style: none;
    cursor: pointer;
    padding: var(--space-5) var(--space-6) var(--space-5) var(--space-4);
    font-family: var(--font-display);
    font-size: clamp(1.2rem, 2vw, 1.6rem);
    font-weight: 600;
    line-height: 1.25;
    color: var(--ink);
    display: flex;
    align-items: flex-start;
    justify-content: space-between;
    gap: var(--space-4);
    font-variation-settings: 'opsz' 144, 'SOFT' 50;
    position: relative;
}
.faq-item summary::-webkit-details-marker { display: none; }
.faq-item summary::after {
    content: '+';
    font-family: var(--font-mono);
    font-size: 1.8rem;
    line-height: 1;
    color: var(--cobalt);
    font-weight: 400;
    transition: transform 0.3s var(--ease-snap);
    flex-shrink: 0;
}
.faq-item[open] summary::after {
    transform: rotate(45deg);
    color: var(--blood-deep);
}

.faq-item summary::before {
    content: '';
    position: absolute;
    left: 0; top: 0; bottom: 0;
    width: 4px;
    background: transparent;
    transition: background 0.3s ease;
}
.faq-item[open] summary::before { background: var(--cobalt); }
.faq-item:hover summary::before { background: var(--lime); }

.faq-item > p {
    padding: 0 var(--space-6) var(--space-5) var(--space-4);
    font-size: var(--fs-md);
    line-height: 1.55;
    color: var(--ink-soft);
    max-width: 70ch;
}

/* ============================================================
   SECTION: CTA — Lime flood with strong contact form
   ============================================================ */
.section-cta {
    background: var(--lime);
    color: var(--ink);
    position: relative;
    overflow: hidden;
    border-bottom: 1.5px solid var(--ink);
}
.section-cta::before {
    content: '06 // CONTACT';
    position: absolute;
    top: 24px;
    right: 32px;
    font-family: var(--font-mono);
    font-size: var(--fs-xs);
    color: var(--ink);
    letter-spacing: 0.16em;
    z-index: 3;
}
.cta-background {
    position: absolute;
    inset: 0;
    background-image:
        repeating-linear-gradient(135deg, transparent 0 20px, rgba(10,10,10,0.04) 20px 22px);
    pointer-events: none;
}

.cta-content {
    position: relative;
    z-index: 2;
    max-width: 980px;
    margin: 0 auto;
    text-align: left;
}

.cta-headline {
    font-family: var(--font-display);
    font-size: clamp(2.8rem, 6vw, 5.5rem);
    font-weight: 900;
    line-height: 0.96;
    letter-spacing: -0.035em;
    color: var(--ink);
    margin-bottom: var(--space-4);
    font-variation-settings: 'opsz' 144, 'SOFT' 60;
    max-width: 22ch;
}
.cta-description {
    font-size: var(--fs-lg);
    line-height: 1.5;
    max-width: 56ch;
    margin-bottom: var(--space-5);
}

.cta-points {
    display: flex;
    flex-wrap: wrap;
    gap: var(--space-2);
    margin-bottom: var(--space-7);
}
.cta-points span {
    padding: 6px 14px;
    background: var(--ink);
    color: var(--lime);
    font-family: var(--font-mono);
    font-size: var(--fs-xs);
    letter-spacing: 0.08em;
    text-transform: uppercase;
    border-radius: var(--radius-pill);
}

/* CTA Form */
.cta-form {
    background: var(--paper);
    color: var(--ink);
    padding: clamp(1.5rem, 4vw, 2.8rem);
    border: 1.5px solid var(--ink);
    box-shadow: 12px 12px 0 var(--ink);
    position: relative;
    margin-bottom: var(--space-5);
}
.cta-form::before {
    content: '<form action="/assessment">';
    position: absolute;
    top: -14px;
    left: 16px;
    background: var(--ink);
    color: var(--lime);
    font-family: var(--font-mono);
    font-size: 11px;
    padding: 3px 10px;
    letter-spacing: 0.06em;
}

.bot-field { position: absolute; left: -10000px; opacity: 0; pointer-events: none; }

.form-grid {
    display: grid;
    gap: var(--space-4);
    grid-template-columns: 1fr;
    margin-bottom: var(--space-5);
}
@media (min-width: 720px) {
    .form-grid { grid-template-columns: 1fr 1fr; }
    .form-field-wide { grid-column: 1 / -1; }
}

.form-field { display: grid; gap: 6px; }
.form-field label {
    font-family: var(--font-mono);
    font-size: var(--fs-xs);
    text-transform: uppercase;
    letter-spacing: 0.14em;
    color: var(--ink);
    font-weight: 500;
}

.form-input {
    width: 100%;
    padding: 12px 14px;
    background: var(--paper);
    border: 1.5px solid var(--ink);
    color: var(--ink);
    font-family: var(--font-body);
    font-size: var(--fs-base);
    transition: all 0.2s var(--ease-out);
    border-radius: 0;
    appearance: none;
}
.form-input:focus {
    outline: 0;
    background: var(--lime);
    transform: translate(-2px, -2px);
    box-shadow: 4px 4px 0 var(--cobalt);
}
.form-textarea { resize: vertical; min-height: 90px; font-family: var(--font-body); }
select.form-input {
    background-image: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' width='12' height='8' viewBox='0 0 12 8'><path d='M1 1l5 5 5-5' stroke='%230A0A0A' stroke-width='1.5' fill='none' stroke-linecap='round' stroke-linejoin='round'/></svg>");
    background-repeat: no-repeat;
    background-position: right 14px center;
    padding-right: 36px;
}

.form-actions {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: var(--space-4);
}
.form-feedback {
    font-family: var(--font-mono);
    font-size: var(--fs-sm);
}
.feedback.error { color: var(--flame-deep); font-weight: 500; }
.feedback.success { color: var(--cobalt-deep); }
.feedback.info { color: var(--ink-soft); }

.form-hint {
    margin-top: var(--space-3);
    font-size: var(--fs-sm);
    color: var(--ink-soft);
}
.form-hint a {
    color: var(--cobalt);
    text-decoration: underline;
    text-underline-offset: 3px;
}

.cta-alternative {
    margin-top: var(--space-4);
    display: flex;
    flex-wrap: wrap;
    align-items: baseline;
    gap: var(--space-3);
    font-family: var(--font-mono);
    font-size: var(--fs-sm);
}
.cta-email {
    font-family: var(--font-display);
    font-size: var(--fs-xl);
    font-weight: 700;
    color: var(--ink);
    border-bottom: 2px solid var(--ink);
    padding-bottom: 2px;
    font-variation-settings: 'opsz' 144, 'SOFT' 50;
}
.cta-email:hover { color: var(--cobalt); border-color: var(--cobalt); }

/* ============================================================
   FOOTER
   ============================================================ */
.site-footer {
    background: var(--ink);
    color: var(--cream-on-night);
    padding: var(--space-9) 0 var(--space-5);
    position: relative;
    overflow: hidden;
}
.site-footer::before {
    content: 'SWITCH·TO·SWITCH·TO·SWITCH·TO·SWITCH·TO·SWITCH·TO·';
    position: absolute;
    bottom: -8rem;
    left: -2rem; right: -2rem;
    font-family: var(--font-display);
    font-weight: 900;
    font-size: clamp(8rem, 18vw, 18rem);
    line-height: 0.85;
    color: rgba(237, 229, 208, 0.06);
    white-space: nowrap;
    overflow: hidden;
    letter-spacing: -0.04em;
    pointer-events: none;
}

.footer-content {
    display: grid;
    gap: var(--space-7);
    grid-template-columns: 1fr;
    margin-bottom: var(--space-7);
    padding-bottom: var(--space-6);
    border-bottom: 1px dashed rgba(237, 229, 208, 0.18);
    position: relative;
    z-index: 2;
}
@media (min-width: 880px) {
    .footer-content { grid-template-columns: 1.2fr 2.4fr; gap: var(--space-9); }
}

.footer-brand { display: grid; gap: var(--space-4); align-content: start; }
.footer-logo-link { display: inline-block; }
.footer-logo { height: 64px; width: auto; }
.footer-tagline {
    font-family: var(--font-display);
    font-size: var(--fs-lg);
    line-height: 1.2;
    color: var(--paper);
    max-width: 28ch;
    font-variation-settings: 'opsz' 144, 'SOFT' 50;
}

.footer-columns {
    display: grid;
    gap: var(--space-6);
    grid-template-columns: 1fr 1fr;
}
@media (min-width: 720px) {
    .footer-columns { grid-template-columns: repeat(4, 1fr); }
}

.footer-col { display: grid; gap: 10px; align-content: start; }
.footer-title {
    font-family: var(--font-mono);
    font-size: var(--fs-xs);
    text-transform: uppercase;
    letter-spacing: 0.16em;
    color: var(--lime);
    margin-bottom: 6px;
    font-weight: 500;
}
.footer-text { font-size: var(--fs-sm); color: rgba(237, 229, 208, 0.7); }
.footer-link {
    font-family: var(--font-body);
    font-size: var(--fs-sm);
    color: var(--paper);
    border-bottom: 1px solid transparent;
    padding-bottom: 1px;
    transition: all 0.2s var(--ease-out);
    width: fit-content;
}
.footer-link:hover { color: var(--lime); border-bottom-color: var(--lime); }

.footer-bottom {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: var(--space-3);
    font-family: var(--font-mono);
    font-size: var(--fs-xs);
    text-transform: uppercase;
    letter-spacing: 0.1em;
    color: rgba(237, 229, 208, 0.55);
    position: relative;
    z-index: 2;
}
.footer-separator { opacity: 0.4; }

/* ============================================================
   BREADCRUMB (landing pages)
   ============================================================ */
.breadcrumb {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: 10px;
    margin-bottom: var(--space-5);
    font-family: var(--font-mono);
    font-size: var(--fs-xs);
    text-transform: uppercase;
    letter-spacing: 0.12em;
    color: var(--ink-soft);
}
.breadcrumb a {
    color: var(--ink-soft);
    border-bottom: 1px dashed var(--rule);
    padding-bottom: 1px;
    transition: color 0.2s var(--ease-out), border-color 0.2s var(--ease-out);
}
.breadcrumb a:hover {
    color: var(--cobalt);
    border-bottom-color: var(--cobalt);
    border-bottom-style: solid;
}
.breadcrumb [aria-current="page"] {
    color: var(--ink);
    font-weight: 500;
}
.breadcrumb-sep {
    color: var(--cobalt);
    font-weight: 500;
    opacity: 0.7;
}

/* ============================================================
   PAGE HERO (landing pages)
   ============================================================ */
.page-hero {
    padding: calc(var(--header-h) + var(--space-8)) 0 var(--space-8);
    background: var(--paper);
    border-bottom: 1.5px solid var(--ink);
    position: relative;
    overflow: hidden;
}
.page-hero::before {
    content: '◆';
    position: absolute;
    top: calc(var(--header-h) + 24px);
    right: 32px;
    font-size: clamp(8rem, 14vw, 14rem);
    color: var(--cobalt);
    opacity: 0.1;
    line-height: 1;
    pointer-events: none;
}
.page-hero .container { position: relative; z-index: 2; }
.page-hero .section-headline {
    font-size: clamp(2.6rem, 6vw, 5.6rem);
    margin-bottom: var(--space-5);
    max-width: 24ch;
}
.page-hero .section-description {
    margin-bottom: var(--space-6);
    font-size: var(--fs-lg);
}

/* Service layout (landing page body) */
.service-layout {
    display: grid;
    gap: var(--space-7);
    grid-template-columns: 1fr;
}
@media (min-width: 880px) {
    .service-layout { grid-template-columns: 2fr 1fr; gap: var(--space-9); align-items: start; }
}

.service-content h2 {
    font-family: var(--font-display);
    font-size: var(--fs-3xl);
    font-weight: 700;
    line-height: 1.05;
    margin: var(--space-6) 0 var(--space-3);
    color: var(--ink);
    font-variation-settings: 'opsz' 144, 'SOFT' 50;
    max-width: 22ch;
}
.service-content h2:first-child { margin-top: 0; }
.service-content p {
    font-size: var(--fs-lg);
    line-height: 1.55;
    margin-bottom: var(--space-4);
    color: var(--ink-soft);
    max-width: 56ch;
}

.check-list {
    display: grid;
    gap: var(--space-3);
    margin-top: var(--space-4);
}
.check-list li {
    position: relative;
    padding-left: 32px;
    font-size: var(--fs-md);
    line-height: 1.5;
    color: var(--ink);
}
.check-list li::before {
    content: '❯❯';
    position: absolute;
    left: 0; top: 0;
    color: var(--cobalt);
    font-family: var(--font-display);
    font-weight: 700;
    font-size: 1.2em;
}

.service-aside {
    background: var(--ink);
    color: var(--paper);
    padding: var(--space-6);
    border: 1.5px solid var(--ink);
    box-shadow: 10px 10px 0 var(--lime);
    position: relative;
    transform: rotate(-0.6deg);
}
.service-aside::before {
    content: '// NOTE';
    position: absolute;
    top: -10px;
    left: 16px;
    background: var(--lime);
    color: var(--ink);
    padding: 2px 10px;
    font-family: var(--font-mono);
    font-size: 11px;
    letter-spacing: 0.1em;
    border: 1.5px solid var(--ink);
}
.service-aside h2 {
    color: var(--paper);
    font-family: var(--font-display);
    font-size: var(--fs-xl);
    line-height: 1.1;
    margin-bottom: var(--space-3);
}
.service-aside p {
    color: rgba(237, 229, 208, 0.85);
    font-size: var(--fs-md);
    line-height: 1.5;
}

/* ============================================================
   LEGAL PAGES (impressum / datenschutz / privacy / imprint)
   ============================================================ */
.legal-page { background: var(--paper); }

.section-legal {
    padding: calc(var(--header-h) + var(--space-7)) 0 var(--space-8);
    background: var(--paper);
    border-bottom: 1.5px solid var(--ink);
}

/* The page title is its own block: a little more air inside the cluster and a
   clear break before the document body starts. Without the bottom margin the
   first <h2> sat flush against the description — measured 0px. */
.section-legal .section-intro-block {
    gap: var(--space-4);
    /* Same measure as .legal-grid so the title, the rule beneath it and the
       section rules all sit on one axis — the page reads as one document
       column instead of a wide header over a narrow body. */
    max-width: 900px;
    margin: 0 auto var(--space-7);
    padding-bottom: var(--space-5);
    border-bottom: 1px dashed var(--rule);
}

.legal-grid {
    display: grid;
    gap: var(--space-7);
    grid-template-columns: 1fr;
    max-width: 900px;
    margin: 0 auto;
}

/* The divider belongs to the section, not to the heading. As
   `.legal-grid h2:first-of-type` it silently matched every heading, because
   each h2 is the only one inside its own <section> — so the intended rules
   and top spacing were zeroed out everywhere. */
.legal-grid > section + section {
    padding-top: var(--space-6);
    border-top: 1px dashed var(--rule);
}

.legal-grid h2 {
    font-family: var(--font-display);
    font-size: var(--fs-2xl);
    font-weight: 700;
    color: var(--ink);
    margin: 0 0 var(--space-4);
    font-variation-settings: 'opsz' 144, 'SOFT' 50;
}
.legal-grid h3 {
    font-family: var(--font-display);
    font-size: var(--fs-lg);
    font-weight: 600;
    margin: var(--space-4) 0 var(--space-2);
}
.legal-grid p,
.legal-grid li {
    font-size: var(--fs-md);
    line-height: 1.6;
    color: var(--ink-soft);
}
.legal-grid p { margin-bottom: var(--space-3); max-width: 70ch; }
.legal-grid ul {
    margin-bottom: var(--space-4);
    padding-left: var(--space-5);
    list-style: none;
}
.legal-grid ul li {
    position: relative;
    padding-left: 18px;
    margin-bottom: var(--space-2);
    max-width: 70ch;
}
.legal-grid ul li::before {
    content: '❯';
    position: absolute;
    left: 0; top: 4px;
    color: var(--cobalt);
    font-size: 10px;
}
.legal-grid a {
    color: var(--cobalt);
    border-bottom: 1px solid var(--cobalt);
    transition: all 0.2s var(--ease-out);
}
.legal-grid a:hover { color: var(--blood-deep); border-color: var(--blood-deep); }
.legal-grid strong { color: var(--ink); font-weight: 600; }

.legal-alert {
    background: var(--lime);
    color: var(--ink);
    padding: var(--space-5);
    border: 1.5px solid var(--ink);
    box-shadow: 6px 6px 0 var(--ink);
    margin-bottom: var(--space-6);
    font-family: var(--font-mono);
    font-size: var(--fs-sm);
    line-height: 1.5;
    position: relative;
}
.legal-alert::before {
    content: '!';
    position: absolute;
    top: -12px;
    left: 16px;
    width: 26px; height: 26px;
    border: 1.5px solid var(--ink);
    background: var(--blood);
    color: var(--paper);
    font-family: var(--font-display);
    font-weight: 900;
    display: grid;
    place-items: center;
    border-radius: 50%;
}

.thank-you-logo { /* applied to .logo on danke/thank-you pages */ }

/* ============================================================
   REVEAL / SCROLL ANIMATIONS
   ============================================================ */
.reveal {
    opacity: 1;
    transform: none;
}
.gsap-prep .reveal {
    opacity: 0;
    transform: translateY(28px);
}
.gsap-enhanced .reveal {
    opacity: 1;
    transform: none;
    transition: none;
}

/* Non-GSAP fallback */
.js-enabled:not(.gsap-enhanced) .reveal {
    opacity: 0;
    transform: translateY(28px);
    transition: opacity 0.7s var(--ease-out), transform 0.7s var(--ease-out);
}
.js-enabled:not(.gsap-enhanced) .reveal.is-visible {
    opacity: 1;
    transform: translateY(0);
}

/* Fade in for hero items (no JS or GSAP) */
.animate-fade-in,
.animate-fade-in-up {
    opacity: 0;
    transform: translateY(20px);
    animation: fadeUp 0.9s var(--ease-out) forwards;
}
.animate-fade-in { transform: none; }
.delay-1 { animation-delay: 0.12s; }
.delay-2 { animation-delay: 0.24s; }
.delay-3 { animation-delay: 0.36s; }
@keyframes fadeUp {
    to { opacity: 1; transform: translateY(0); }
}
@media (prefers-reduced-motion: reduce) {
    .animate-fade-in,
    .animate-fade-in-up {
        opacity: 1;
        transform: none;
        animation: none;
    }
}

/* GSAP takes over: hide initial state */
.gsap-enhanced .animate-fade-in,
.gsap-enhanced .animate-fade-in-up { opacity: 1; transform: none; animation: none; }

/* ============================================================
   RESPONSIVE TWEAKS
   ============================================================ */
@media (max-width: 720px) {
    .hero-title { font-size: clamp(3rem, 12vw, 4.2rem); }
    .hero-subtitle { font-size: var(--fs-md); }
    .hero-panel { transform: none; }
    .switch-card-dark, .switch-card-light { transform: none; }
    .switch-grid::before { display: none; }
    .hero::before, .hero::after,
    .section-switch::before,
    .section-benefits::before,
    .section-faq::before,
    .section-cta::before { display: none; }
    .answer-card { box-shadow: 5px 5px 0 var(--ink); }
    .cta-form { box-shadow: 5px 5px 0 var(--ink); }
}

@media (max-width: 520px) {
    .container { padding: 0 18px; }
    .header-inner { padding: 0 18px; }
    body::after { background-size: 40px 40px; }
}

/* Print niceties */
@media print {
    body::before, body::after, .marquee, .scroll-progress { display: none; }
    .site-header { position: static; }
}

/* ============================================================
   MOTION LAYER — harmonized
   Shared rhythm: 4s / 8s sine. Cobalt + Lime only in loops;
   Blood reserved for hover and emphasis moments.
   Everything below respects prefers-reduced-motion.
   ============================================================ */

/* Sparkle palette — shown even with reduced motion, just not animated */
.sparkle-shape { fill: var(--cobalt); }
.sparkle:nth-child(2) .sparkle-shape { fill: var(--lime-deep); }
.sparkle:nth-child(3) .sparkle-shape { fill: var(--cobalt); }
.sparkle:nth-child(4) .sparkle-shape { fill: var(--lime-deep); }
.sparkle:nth-child(5) .sparkle-shape { fill: var(--cobalt); }

@media (prefers-reduced-motion: no-preference) {

    /* ----- 1. LIVE badge — soft pulse, fixed shadow ----- */
    .live-badge {
        position: fixed;
        top: calc(var(--header-h) + 14px);
        right: 18px;
        z-index: 4000;
        display: inline-flex;
        align-items: center;
        gap: 8px;
        padding: 6px 12px 6px 10px;
        background: var(--ink);
        color: var(--paper);
        font-family: var(--font-mono);
        font-size: 10px;
        text-transform: uppercase;
        letter-spacing: 0.18em;
        border: 1.5px solid var(--ink);
        box-shadow: 4px 4px 0 var(--cobalt);
        pointer-events: none;
    }
    .live-badge::before {
        content: '';
        width: 8px; height: 8px;
        border-radius: 50%;
        background: var(--flame);
        animation: dotPulse 1.6s cubic-bezier(0.4, 0, 0.6, 1) infinite;
    }
    .live-badge::after {
        content: 'migrating';
        font-style: italic;
        opacity: 0.7;
    }
    @keyframes dotPulse {
        0%, 100% { opacity: 1;   transform: scale(1); }
        50%      { opacity: 0.45; transform: scale(0.8); }
    }

    /* ----- 2. Hero title — rare, gentle glitch ----- */
    .hero-title {
        position: relative;
        animation: glitchSlip 14s cubic-bezier(0.4, 0, 0.6, 1) infinite;
    }
    @keyframes glitchSlip {
        0%, 96%, 100% { text-shadow: none; transform: translate(0, 0); }
        97%           { text-shadow: -1.5px 0 var(--cobalt), 1.5px 0 var(--lime-deep); transform: translate(-1px, 0); }
        98%           { text-shadow: none; transform: translate(0, 0); }
    }
    .hero-title em {
        display: inline-block;
        animation: emWave 8s cubic-bezier(0.4, 0, 0.6, 1) infinite;
    }
    @keyframes emWave {
        0%, 100% { transform: translateY(0) rotate(0deg); }
        50%      { transform: translateY(-2px) rotate(-0.8deg); }
    }

    /* ----- 3. Marquees — calm continuous scroll ----- */
    .marquee-track { animation-duration: 32s; }

    /* ----- 4. Hero panel — gentle sway, locked lime shadow ----- */
    .hero-panel {
        animation: panelSway 8s cubic-bezier(0.4, 0, 0.6, 1) infinite;
    }
    @keyframes panelSway {
        0%, 100% { transform: rotate(0.4deg) translateY(0); }
        50%      { transform: rotate(-0.4deg) translateY(-3px); }
    }

    /* ----- 5. MIGRATED stamp — breath, scale only ----- */
    .switch-card-light::after {
        animation: stampBreath 4s cubic-bezier(0.4, 0, 0.6, 1) infinite;
    }
    @keyframes stampBreath {
        0%, 100% { transform: rotate(8deg)  scale(1); }
        50%      { transform: rotate(10deg) scale(1.05); }
    }

    /* ----- 6. Process numbers — soft glow breath ----- */
    .process-number {
        animation: numberGlow 4s cubic-bezier(0.4, 0, 0.6, 1) infinite;
    }
    @keyframes numberGlow {
        0%, 100% { filter: drop-shadow(0 0 6px  rgba(215, 255, 61, 0.25)); }
        50%      { filter: drop-shadow(0 0 14px rgba(215, 255, 61, 0.55)); }
    }

    /* ----- 7. CRT scanlines on dark sections ----- */
    .section-switch::after,
    .section-process::after {
        content: '';
        position: absolute;
        inset: 0;
        background-image: repeating-linear-gradient(
            0deg,
            rgba(237, 229, 208, 0.035) 0,
            rgba(237, 229, 208, 0.035) 2px,
            transparent 2px,
            transparent 4px
        );
        animation: scanlineShift 8s linear infinite;
        pointer-events: none;
        z-index: 1;
    }
    @keyframes scanlineShift {
        from { background-position: 0 0; }
        to   { background-position: 0 12px; }
    }

    /* ----- 8. Sparkles — slower, only 3 active, calm fade ----- */
    .sparkle {
        position: absolute;
        width: 12px; height: 12px;
        pointer-events: none;
        animation: sparkleFade 4s cubic-bezier(0.4, 0, 0.6, 1) infinite;
        z-index: 3;
    }
    .sparkle svg { display: block; width: 100%; height: 100%; }
    .sparkle:nth-child(1) { top: 18%; left: 8%;  animation-delay: 0s; }
    .sparkle:nth-child(2) { top: 60%; left: 45%; animation-delay: 1.4s; }
    .sparkle:nth-child(3) { top: 30%; left: 70%; animation-delay: 2.8s; }
    /* sparkle 4 and 5 stay dormant for a calmer hero */
    .sparkle:nth-child(4),
    .sparkle:nth-child(5) { opacity: 0; }

    @keyframes sparkleFade {
        0%, 100% { transform: scale(0)    rotate(0deg);   opacity: 0; }
        20%      { transform: scale(1)    rotate(180deg); opacity: 1; }
        80%      { transform: scale(0.85) rotate(540deg); opacity: 0.55; }
    }

    /* ----- 9. Body grain — barely perceptible drift ----- */
    body::before {
        animation: noiseDrift 12s linear infinite;
    }
    @keyframes noiseDrift {
        0%   { background-position: 0 0; }
        100% { background-position: 220px 220px; }
    }

    /* ----- 10. Hero migration tag — calm tone, no flicker ----- */
    .hero::before { opacity: 0.5; }

    /* ----- 11. Migration conduit -----------------------------------------
       The chevrons between the before/after cards are the one place on the
       page where loud motion is the point: they read as a transfer actually
       running. A light pulse travels through the glyphs from the old card
       towards the new one, and the whole group steps forward mechanically.

       The pulse is a gradient clipped to the text, so it needs no extra DOM
       and stays inside the chevron's own grid track — the overlap that used
       to cover the card text cannot come back.

       Tempo is locked to the 1.6s of the LIVE dot so this belongs to the
       same family instead of introducing a rogue rhythm.
       -------------------------------------------------------------------- */
    @supports ((background-clip: text) or (-webkit-background-clip: text)) {
        .switch-grid::before {
            background-image: linear-gradient(90deg,
                var(--lime)  0%,   var(--lime)  20%,
                var(--flame) 33%,  #FFFFFF     42%,  var(--blood) 51%,
                var(--lime)  64%,  var(--lime) 100%);
            background-size: 260% 100%;
            background-repeat: no-repeat;
            -webkit-background-clip: text;
            background-clip: text;
            -webkit-text-fill-color: transparent;
            filter: drop-shadow(0 0 10px rgba(228, 255, 51, 0.45));
        }
        @keyframes chevTransfer {
            from { background-position: 128% 50%; }
            to   { background-position: -28% 50%; }
        }
    }

    /* The step has to compose with each layout's own base transform, so it is
       declared per breakpoint rather than once globally. */
    @media (min-width: 820px) {
        .switch-grid::before {
            animation: chevTransfer 1.6s linear infinite,
                       chevStepRight 1.6s steps(3, end) infinite;
        }
        @keyframes chevStepRight {
            0%, 100% { transform: translateX(-3px); }
            50%      { transform: translateX(3px); }
        }
    }
    @media (max-width: 819px) {
        .switch-grid::before {
            animation: chevTransfer 1.6s linear infinite,
                       chevStepDown 1.6s steps(3, end) infinite;
        }
        /* rotate() first: in the rotated frame translateX travels downward,
           which is the direction this variant's chevrons point. */
        @keyframes chevStepDown {
            0%, 100% { transform: rotate(90deg) translateX(-3px); }
            50%      { transform: rotate(90deg) translateX(3px); }
        }
    }
}