/* ============================================================
   Good Unicorn — case-study design system (shared, external)
   Superset of the two hand-authored case studies (CHOC + Story
   Spark), reconciled into one stylesheet the CMS renders against.
   Header standardised to sticky; 2-up figures unified to
   .cs-figure-grid (legacy .cs-figure-pair / .cs-figures-grid alias).
   ============================================================ */

/* ============ Design system tokens ============ */
:root {
    --gu-purple-950: #0E0124;
    --gu-purple-900: #1C0447;
    --gu-eggplant-800: #221D38;
    --gu-purple-700: #341E52;
    --gu-purple-600: #381C55;
    --gu-purple-500: #4A2A6B;
    --gu-lilac-400: #B49BF0;
    --gu-lilac-300: #C4AAF3;
    --gu-lilac-200: #D0C1FF;
    --gu-lilac-100: #E5DDFF;
    --gu-lilac-050: #F2EEFF;
    --gu-white: #FFFFFF;
    --gu-paper: #FAFAFA;
    --gu-paper-dim: #F0EEF4;
    --gu-ink-soft: #6F6A7D;

    --font-display: "Red Hat Display", system-ui, -apple-system, "Segoe UI", sans-serif;
    --font-body: "DM Sans", system-ui, -apple-system, "Segoe UI", sans-serif;
    --font-logo: "Red Hat Display", system-ui, -apple-system, "Segoe UI", sans-serif;

    --fs-h1: clamp(34px, 5.2vw, 56px);
    --fs-h2: clamp(28px, 3.6vw, 40px);
    --fs-h3: clamp(22px, 2.6vw, 30px);
    --fs-body-lg: 20px;
    --fs-body: 17px;
    --fs-body-sm: 15px;
    --fs-label: 13px;
    --lh-display: 1.05;
    --lh-body: 1.45;
    --ls-display: -0.01em;
    --ls-label: 0.08em;

    --radius-pill: 999px;
    --radius-md: 16px;
    --border-width: 2px;
    --ease-standard: cubic-bezier(0.2, 0.7, 0.2, 1);
    --ease-out: cubic-bezier(0.16, 1, 0.3, 1);
    --dur-fast: 120ms; --dur: 200ms; --dur-slow: 360ms;

    --container: 1140px;

    --space-4: 16px; --space-5: 24px; --space-6: 32px;
    --space-7: 48px; --space-8: 64px; --space-9: 96px; --space-10: 128px;

    /* Semantic */
    --surface-deep: var(--gu-purple-900);
    --surface-eggplant: var(--gu-eggplant-800);
    --surface-paper: var(--gu-paper);
    --text-on-dark: var(--gu-paper);
    --text-on-dark-accent: var(--gu-lilac-200);
    --text-on-dark-muted: rgba(250,250,250,0.66);
    --text-on-light: var(--gu-purple-900);
    --text-on-light-muted: var(--gu-ink-soft);
    --stroke-on-dark: rgba(250,250,250,0.85);
    --stroke-on-light: var(--gu-purple-900);
    --focus-ring: var(--gu-lilac-200);
}

/* ============ Base ============ */
*, *::before, *::after { box-sizing: border-box; margin: 0; padding: 0; }
html { scroll-behavior: smooth; -webkit-text-size-adjust: 100%; }
body {
    font-family: var(--font-body);
    font-size: var(--fs-body);
    line-height: var(--lh-body);
    color: var(--text-on-dark);
    background: var(--surface-deep);
    -webkit-font-smoothing: antialiased;
}
img, video { max-width: 100%; height: auto; display: block; }
.cs-figure img, .cs-figure video { border-radius: var(--radius-md); width: 100%; }
a { color: inherit; }
:focus-visible { outline: 3px solid var(--focus-ring); outline-offset: 3px; border-radius: 4px; }

/* ============ Skip link ============ */
.skip-link {
    position: absolute; left: -9999px; top: 0; z-index: 1000;
    padding: 12px 20px;
    background: var(--gu-lilac-200); color: var(--gu-purple-900);
    font-family: var(--font-display); font-weight: 700;
    text-decoration: none; border-radius: 0 0 var(--radius-md) 0;
}
.skip-link:focus { left: 0; }

/* ============ Layout ============ */
.container { max-width: var(--container); margin: 0 auto; padding: 0 var(--space-5); }
@media (min-width: 768px) { .container { padding: 0 var(--space-7); } }

section { padding: var(--space-9) 0; }
@media (min-width: 900px) { section { padding: var(--space-10) 0; } }

/* ============ Surface colours ============ */
.s-paper { background: var(--surface-paper); color: var(--text-on-light); }
.s-eggplant { background: var(--surface-eggplant); color: var(--text-on-dark); }
.s-deep { background: var(--surface-deep); color: var(--text-on-dark); }
.on-light { color: var(--text-on-light); }

/* Noise texture on dark surfaces */
.s-deep, .s-eggplant { position: relative; }
.s-deep::after, .s-eggplant::after {
    content: ""; position: absolute; inset: 0; z-index: 1;
    pointer-events: none; opacity: 0.05;
    background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='160' height='160'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='0.8' numOctaves='2' stitchTiles='stitch'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23n)'/%3E%3C/svg%3E");
    background-size: 160px 160px; mix-blend-mode: overlay;
}
.s-deep > .container, .s-eggplant > .container { position: relative; z-index: 2; }

/* ============ Typography ============ */
h1, h2, h3, h4 {
    font-family: var(--font-display);
    line-height: var(--lh-display);
    letter-spacing: var(--ls-display);
    font-weight: 800;
}
h1 { font-size: var(--fs-h1); }
h2 { font-size: var(--fs-h2); margin-bottom: var(--space-6); max-width: 22ch; }
h3 { font-size: var(--fs-h3); margin-bottom: var(--space-4); font-weight: 700; }
p  { margin-bottom: var(--space-5); max-width: 68ch; }
p:last-child { margin-bottom: 0; }

.eyebrow {
    display: inline-block;
    font-family: var(--font-display);
    font-size: var(--fs-label); font-weight: 700;
    letter-spacing: var(--ls-label); text-transform: uppercase;
    color: var(--text-on-dark-accent); margin-bottom: var(--space-4);
}
.on-light .eyebrow { color: var(--gu-purple-500); }

.gu-word {
    font-family: var(--font-logo);
    font-weight: 900;
    color: var(--text-on-dark-accent);
    letter-spacing: 0.005em;
}
.on-light .gu-word { color: var(--gu-purple-600); }

/* ============ Buttons ============ */
.btn {
    position: relative;
    display: inline-flex; align-items: center; gap: 10px;
    padding: 14px 28px;
    font-family: var(--font-display);
    font-size: var(--fs-body-sm); font-weight: 700; letter-spacing: 0.02em;
    text-decoration: none;
    border-radius: var(--radius-pill);
    border: var(--border-width) solid transparent;
    cursor: pointer; overflow: hidden; isolation: isolate;
    transition: color var(--dur) var(--ease-standard),
                border-color var(--dur) var(--ease-standard),
                transform var(--dur-fast) var(--ease-standard);
}
.btn:active { transform: scale(0.98); }
.btn::before {
    content: ""; position: absolute; inset: 0; z-index: -1;
    border-radius: inherit; transform: translateY(101%);
    transition: transform var(--dur-slow) var(--ease-out);
}
.btn:hover::before, .btn:focus-visible::before { transform: translateY(0); }
.btn .arrow { transition: transform var(--dur) var(--ease-standard); }
.btn:hover .arrow { transform: translateX(4px); }

.btn-primary { background: var(--gu-lilac-200); color: var(--gu-purple-900); }
.btn-primary::before { background: var(--gu-paper); }
.btn-outline { background: transparent; color: var(--gu-lilac-200); border-color: var(--gu-lilac-200); }
.btn-outline::before { background: var(--gu-lilac-200); }
.btn-outline:hover, .btn-outline:focus-visible { color: var(--gu-purple-900); }

/* ============ Site header (sticky) ============ */
.site-header {
    position: sticky; top: 0; z-index: 100;
    padding: 14px 0;
    background: var(--gu-purple-900);
    border-bottom: 1px solid rgba(208,193,255,0.18);
}
.site-header .container { display: flex; align-items: center; justify-content: space-between; }
.site-header .btn { padding: 10px 22px; font-size: var(--fs-body-sm); }

/* Logo via CSS mask */
.logo-mask {
    display: inline-block;
    background-color: var(--gu-lilac-200);
    -webkit-mask-image: url("../images/GoodUnicorn_logo.svg");
    -webkit-mask-repeat: no-repeat; -webkit-mask-position: center; -webkit-mask-size: contain;
    mask-image: url("../images/GoodUnicorn_logo.svg");
    mask-repeat: no-repeat; mask-position: center; mask-size: contain;
    aspect-ratio: 560 / 185;
}
.site-header .logo-mask { height: 34px; }
.footer-logo { height: 32px; }

/* ============ Back link ============ */
.cs-back { padding: 20px 0 0; }
.cs-back-link {
    font-size: var(--fs-body-sm); font-weight: 600;
    color: var(--gu-lilac-200); text-decoration: none;
    opacity: 0.8; transition: opacity var(--dur);
}
.cs-back-link:hover { opacity: 1; }

/* ============ Case study hero ============ */
.cs-hero { padding-top: var(--space-8); padding-bottom: var(--space-9); }
@media (min-width: 900px) { .cs-hero { padding-top: var(--space-10); padding-bottom: var(--space-10); } }
.cs-hero h1 { max-width: 16ch; margin-bottom: var(--space-5); }
.cs-hero .subheading {
    font-size: var(--fs-body-lg); color: var(--text-on-dark-muted);
    max-width: 60ch; margin: 0 0 var(--space-6); line-height: 1.5;
}
.cs-tags { display: flex; flex-wrap: wrap; gap: 8px; margin: var(--space-5) 0; }
.cs-tag {
    display: inline-block; padding: 6px 14px;
    border: var(--border-width) solid rgba(208,193,255,0.4);
    border-radius: var(--radius-pill);
    font-family: var(--font-display);
    font-size: var(--fs-label); font-weight: 700;
    letter-spacing: var(--ls-label); text-transform: uppercase;
    color: var(--gu-lilac-200); white-space: nowrap;
}
.cs-meta { margin-top: var(--space-6); font-size: var(--fs-body-sm); color: var(--text-on-dark-muted); }
.cs-meta p { margin: 0 0 6px; max-width: none; }
.cs-attribution { font-size: var(--fs-body-sm); color: var(--text-on-dark-muted); font-style: italic; margin-top: 4px; }

/* ============ SDG badges ============ */
.sdg-badges { display: flex; flex-wrap: wrap; gap: 6px; margin-top: 14px; }
.sdg-badge {
    display: inline-flex; align-items: center; line-height: 1;
    font-size: 10px; font-weight: 700; letter-spacing: 0.07em; text-transform: uppercase;
    padding: 4px 8px; border-radius: var(--radius-pill);
    cursor: default; user-select: none;
    background: #D0C1FF; color: var(--gu-purple-900); opacity: 0.75;
}
.sdg-tooltip {
    position: absolute; z-index: 9999;
    background: var(--gu-purple-950); color: var(--gu-paper);
    padding: 14px 18px; border-radius: 6px;
    pointer-events: none; white-space: nowrap;
    box-shadow: 0 4px 16px rgba(0,0,0,0.4);
    letter-spacing: 0; text-transform: none;
    display: flex; flex-direction: column; gap: 2px;
}
.sdg-tip-l1 { font-size: 10px; font-weight: 500; opacity: 0.6; }
.sdg-tip-l2 { font-size: 11px; font-weight: 600; opacity: 0.85; }
.sdg-tip-l3 { font-size: 13px; font-weight: 700; }

/* ============ Process phases ============ */
.cs-phases { display: grid; gap: var(--space-6); margin-top: var(--space-7); }
@media (min-width: 800px) { .cs-phases { grid-template-columns: repeat(3, 1fr); } }
.cs-phase { background: var(--gu-purple-700); border-radius: var(--radius-md); padding: var(--space-6); }
.cs-phase-label {
    display: block; font-size: var(--fs-label); font-weight: 700;
    letter-spacing: var(--ls-label); text-transform: uppercase;
    color: var(--gu-lilac-300); margin-bottom: var(--space-4);
}
.cs-phase h3 { font-size: 20px; margin-bottom: 10px; }
.cs-phase p { font-size: var(--fs-body-sm); color: var(--text-on-dark-muted); margin: 0; }
.on-light .cs-phase { background: rgba(52,30,82,0.05); }
.on-light .cs-phase-label { color: var(--gu-purple-500); }
.on-light .cs-phase p { color: var(--text-on-light-muted); }
.on-light .cs-phase h3 { color: var(--text-on-light); }

/* ============ Figures ============ */
.cs-figure { margin: var(--space-7) 0; }
.cs-figure figcaption {
    margin-top: 10px; font-size: var(--fs-body-sm);
    color: var(--text-on-dark-muted); font-style: italic;
}
.on-light .cs-figure figcaption { color: var(--text-on-light-muted); }
.cs-figure__placeholder {
    width: 100%; aspect-ratio: 16 / 9;
    background: var(--gu-purple-700); border: 2px dashed var(--gu-lilac-400);
    border-radius: var(--radius-md);
    display: flex; align-items: center; justify-content: center;
    color: var(--gu-lilac-300); font-size: var(--fs-body-sm);
    font-weight: 600; letter-spacing: var(--ls-label); text-transform: uppercase;
}
.on-light .cs-figure__placeholder { background: var(--gu-paper-dim); color: var(--gu-ink-soft); }

/* Two-up figure grid (unified). Legacy names kept as aliases. */
.cs-figure-grid, .cs-figure-pair, .cs-figures-grid { display: grid; gap: var(--space-6); margin: var(--space-7) 0; }
@media (min-width: 700px) {
    .cs-figure-grid, .cs-figure-pair, .cs-figures-grid { grid-template-columns: 1fr 1fr; }
}
.cs-figure-grid .cs-figure, .cs-figure-pair .cs-figure, .cs-figures-grid .cs-figure { margin: 0; }

/* ============ Timeline / deliverables grid ============ */
.cs-timeline { display: grid; gap: var(--space-5); margin-top: var(--space-7); }
@media (min-width: 700px) { .cs-timeline { grid-template-columns: repeat(2, 1fr); } }
@media (min-width: 1000px) { .cs-timeline { grid-template-columns: repeat(4, 1fr); } }
.cs-timeline-col {
    background: rgba(208,193,255,0.06); border: 1px solid rgba(208,193,255,0.15);
    border-radius: var(--radius-md); padding: var(--space-5) var(--space-5) var(--space-6);
}
.cs-timeline-col h4 {
    font-size: var(--fs-label); font-weight: 700; letter-spacing: var(--ls-label);
    text-transform: uppercase; color: var(--gu-lilac-400); margin-bottom: var(--space-4);
}
.cs-timeline-col ul { list-style: none; padding: 0; margin: 0; display: flex; flex-direction: column; gap: 8px; }
.cs-timeline-col li { font-size: var(--fs-body-sm); color: var(--text-on-dark-muted); padding-left: 14px; position: relative; }
.cs-timeline-col li::before {
    content: ''; position: absolute; left: 0; top: 8px; width: 5px; height: 5px;
    border-radius: 50%; background: var(--gu-lilac-400); opacity: 0.5;
}

/* ============ Stats row ============ */
.cs-stats { display: grid; gap: var(--space-5); margin: var(--space-7) 0; }
@media (min-width: 540px) { .cs-stats { grid-template-columns: repeat(2, 1fr); } }
@media (min-width: 900px) { .cs-stats { grid-template-columns: repeat(4, 1fr); } }
.cs-stat { background: rgba(208,193,255,0.06); border: 1px solid rgba(208,193,255,0.15); border-radius: var(--radius-md); padding: var(--space-6); }
.cs-stat-number {
    font-family: var(--font-display); font-size: clamp(32px, 4vw, 48px); font-weight: 900;
    letter-spacing: -0.02em; color: var(--gu-lilac-200); line-height: 1; margin-bottom: 6px;
}
.cs-stat-label { font-size: var(--fs-body-sm); color: var(--text-on-dark-muted); line-height: 1.35; }
.on-light .cs-stat { background: rgba(52,30,82,0.05); border-color: rgba(52,30,82,0.12); }
.on-light .cs-stat-number { color: var(--gu-purple-600); }
.on-light .cs-stat-label { color: var(--text-on-light-muted); }

/* ============ Tech stack diagram ============ */
.cs-stack { display: flex; flex-direction: column; align-items: center; gap: var(--space-4); margin: var(--space-7) 0; }
@media (min-width: 700px) { .cs-stack { flex-direction: row; justify-content: center; flex-wrap: wrap; } }
.cs-stack-item {
    background: rgba(208,193,255,0.08); border: 1px solid rgba(208,193,255,0.2);
    border-radius: var(--radius-md); padding: var(--space-5) var(--space-6); text-align: center; min-width: 140px;
}
.cs-stack-item h3 { font-size: var(--fs-body); font-weight: 700; margin-bottom: 4px; color: var(--gu-lilac-200); }
.cs-stack-item p { font-size: var(--fs-body-sm); color: var(--text-on-dark-muted); margin: 0; }
.cs-stack-arrow { font-size: 20px; color: var(--gu-lilac-400); opacity: 0.5; flex: none; }
@media (max-width: 699px) { .cs-stack-arrow { transform: rotate(90deg); } }
.on-light .cs-stack-item { background: rgba(52,30,82,0.05); border-color: rgba(52,30,82,0.12); }
.on-light .cs-stack-item h3 { color: var(--gu-purple-600); }
.on-light .cs-stack-item p { color: var(--text-on-light-muted); }

/* ============ Pull-quote (with attribution) ============ */
.cs-pullquote {
    border-left: 3px solid var(--gu-lilac-400);
    padding: var(--space-5) var(--space-6); margin: var(--space-7) 0;
    background: rgba(180,155,240,0.06); border-radius: 0 var(--radius-md) var(--radius-md) 0;
}
.cs-pullquote blockquote { font-size: var(--fs-body-lg); font-style: italic; color: var(--text-on-dark); margin-bottom: var(--space-4); max-width: 70ch; }
.cs-pullquote cite { font-size: var(--fs-body-sm); color: var(--text-on-dark-muted); font-style: normal; }
.on-light .cs-pullquote { background: rgba(52,30,82,0.04); }
.on-light .cs-pullquote blockquote { color: var(--text-on-light); }
.on-light .cs-pullquote cite { color: var(--text-on-light-muted); }

/* ============ Data-quote (statistic callout, no attribution) ============ */
.cs-data-quote {
    border-left: 3px solid var(--gu-lilac-400);
    padding: var(--space-5) var(--space-6); margin: var(--space-7) 0;
    background: rgba(180,155,240,0.06); border-radius: 0 var(--radius-md) var(--radius-md) 0;
}
.cs-data-quote p { font-size: var(--fs-body-lg); font-style: italic; color: var(--text-on-light); margin: 0; max-width: 70ch; }
.s-eggplant .cs-data-quote, .s-deep .cs-data-quote { background: rgba(180,155,240,0.08); }
.s-eggplant .cs-data-quote p, .s-deep .cs-data-quote p { color: var(--text-on-dark); }

/* ============ Placeholder panel ============ */
.cs-placeholder-panel {
    border: 2px dashed var(--gu-lilac-400); border-radius: var(--radius-md);
    padding: var(--space-7); text-align: center; color: var(--text-on-dark-muted); font-style: italic;
}
.on-light .cs-placeholder-panel { border-color: var(--gu-ink-soft); color: var(--text-on-light-muted); }

/* ============ CTA section ============ */
.cs-cta-section { text-align: center; }
.cs-cta-section h2 { max-width: none; margin-bottom: var(--space-5); }
.cs-cta-section .subtext { font-size: var(--fs-body-lg); color: var(--text-on-dark-muted); max-width: 54ch; margin: 0 auto var(--space-7); }

/* ============ Footer ============ */
footer { padding: var(--space-7) 0; font-size: var(--fs-body-sm); color: var(--text-on-dark-muted); }
footer .container { display: flex; flex-direction: column; align-items: center; gap: var(--space-4); text-align: center; }
footer a { color: var(--gu-lilac-200); text-decoration: none; }
footer a:hover { text-decoration: underline; }

/* ============ Scroll reveal ============ */
.reveal {
    opacity: 0; transform: translateY(28px);
    transition: opacity 0.7s var(--ease-out), transform 0.7s var(--ease-out);
    transition-delay: var(--reveal-delay, 0ms);
}
.reveal.is-in { opacity: 1; transform: none; }

/* ============================================================
   Opt-in extensions (all gated by front-matter flags so existing
   case studies render byte-identically without them).
   ============================================================ */

/* ============ Eggplant page theme (theme: eggplant) ============
   The CHOC mock uses ONE uniform #221D38 surface for the whole page
   (header, hero, every section, footer) and a wider container. */
.theme-eggplant { --container: 1280px; background: var(--surface-eggplant); }
@media (min-width: 768px) {
    .theme-eggplant .container { padding-left: 40px; padding-right: 40px; }
}
.theme-eggplant .site-header {
    background: var(--surface-eggplant);
    border-bottom-color: rgba(208,193,255,0.12);
    padding: 22px 0;
}
.theme-eggplant .site-header .logo-mask { height: 40px; }
.theme-eggplant .cs-back { padding-top: 56px; }
.theme-eggplant footer.s-deep { background: var(--surface-eggplant); }
.theme-eggplant .cs-back-link {
    font-family: var(--font-display);
    font-weight: 700; letter-spacing: var(--ls-label); text-transform: uppercase;
    opacity: 1;
}
.theme-eggplant .cs-back-link:hover { color: var(--gu-white); }

/* ============ Split hero (hero.split) ============ */
.cs-hero--split { padding-bottom: 0; }
@media (min-width: 900px) { .cs-hero--split { padding-top: 72px; padding-bottom: 0; } }
.cs-hero--split .subheading { font-size: 18px; }
.cs-hero-grid { display: grid; gap: var(--space-6); }
@media (min-width: 900px) {
    .cs-hero-grid {
        grid-template-columns: minmax(0, 1.2fr) minmax(0, 1fr);
        column-gap: var(--space-9);
        align-items: start;
    }
    /* right column top-aligns with the H1 (one eyebrow line lower) */
    .cs-hero-right { padding-top: 42px; }
}
.cs-hero--split h1 { color: var(--gu-white); }
.cs-hero--split .cs-hero-right .subheading { margin: 0 0 var(--space-6); }
.cs-hero--split .cs-meta { margin-top: var(--space-6); }
.cs-readmore { color: var(--gu-paper); border-color: rgba(250,250,250,0.7); background: transparent; }
.cs-readmore::before { background: var(--gu-paper); }
.cs-readmore:hover, .cs-readmore:focus-visible { color: var(--gu-purple-900); }

/* ============ Hero project carousel (heroCarousel) ============
   Auto-scrolling marquee: the image strip is duplicated in the markup and the
   spacing lives on each card's margin so translate3d(-50%) loops seamlessly
   with no gap (same pattern as the brand marquee / Our Story columns). The
   track is GPU-composited (translate3d + backface-visibility) so it stays
   glitch-free. Hover pauses; reduced-motion falls back to a scrollable row. */
.cs-carousel-wrap { position: relative; z-index: 2; margin-top: var(--space-8); overflow: hidden; }
.cs-carousel {
    display: flex; width: max-content;
    will-change: transform; backface-visibility: hidden; transform: translate3d(0, 0, 0);
    animation: cs-carousel-scroll var(--cs-carousel-dur, 95s) linear infinite;
}
.cs-carousel-wrap:hover .cs-carousel { animation-play-state: paused; }
.cs-carousel img {
    height: clamp(240px, 32.3vw, 465px); width: auto; max-width: none;
    border-radius: 12px; flex: none;
    /* spacing on the card (not flex gap) so translate3d(-50%) loops seamlessly */
    margin-right: var(--space-4);
}
.cs-carousel img.is-cutout { border-radius: 0; }
@keyframes cs-carousel-scroll {
    from { transform: translate3d(0, 0, 0); }
    to   { transform: translate3d(-50%, 0, 0); }
}
@media (prefers-reduced-motion: reduce) {
    .cs-carousel { animation: none; }
    .cs-carousel-wrap { overflow-x: auto; }
}

/* ============ Split sections (splitSections) ============
   Eyebrow + H2 in the left column, paragraph blocks in the right
   column, everything else (figures, stats, stack, quotes, H3s)
   spanning the full width. Stacks naturally below 900px. */
.cs-block-p { margin-bottom: var(--space-5); }
.cs-block-p:last-child { margin-bottom: 0; }
@media (min-width: 900px) {
    .cs-split {
        display: grid;
        grid-template-columns: minmax(0, 1.2fr) minmax(0, 1fr);
        column-gap: var(--space-9);
        align-items: start;
    }
    .cs-split > * { grid-column: 1 / -1; }
    .cs-split > .cs-split-head { grid-column: 1; }
    .cs-split > .cs-split-lead,
    .cs-split > .cs-block-p { grid-column: 2; }
    .cs-split-head h2 { margin-bottom: 0; }
    /* H3 sub-dividers sit in the left column, pairing with their copy on the right */
    .cs-split > h3 { grid-column: 1; padding-top: var(--space-7); margin-bottom: 0; }
    .cs-split > h3 + .cs-block-p { padding-top: var(--space-7); }
}

/* ============ Reduced motion ============ */
@media (prefers-reduced-motion: reduce) {
    html { scroll-behavior: auto; }
    .reveal { opacity: 1; transform: none; transition: none; }
    .btn::before { transition: none; }
}