/* ============================================
   CASE STUDY — Shared Styles
   ============================================ */

/* --- Page base --- */
.cs-page {
    background-color: var(--bg-primary);
    /* Consistent vertical rhythm between pattern blocks
       (matches the metadata-keyline → overview gap) */
    --cs-gap: 80px;
    /* 12-column grid gutter */
    --cs-gutter: clamp(12px, 1.5vw, 24px);
}

@media (max-width: 768px) {
    .cs-page { --cs-gap: 60px; }
}

/* ============================================
   HERO
   ============================================ */
.cs-hero {
    background-color: var(--bg-primary);
    color: var(--text-primary);
    padding: calc(var(--nav-height) + 48px) var(--pm) 40px;
}

.cs-hero-text {
    display: flex;
    flex-direction: column;
    gap: 10px;
}

.cs-hero-num {
    font-size: 12px;
    font-weight: 500;
    letter-spacing: 1.5px;
    color: var(--text-muted);
}

.cs-hero-title {
    font-size: clamp(28px, 4.2vw, 64px);
    font-weight: 500;
    line-height: 1.1;
    letter-spacing: -0.025em;
    color: var(--text-primary);
    margin: 0;
}

/* Hero image — starts with page margins, animated to full-bleed via JS */
.cs-hero-image-wrap {
    background-color: var(--bg-primary);
    padding: 0 var(--pm);
}

.cs-hero-image-wrap img {
    width: 100%;
    height: clamp(300px, 52vw, 680px);
    object-fit: cover;
    object-position: center;
    display: block;
}

/* ============================================
   METADATA STRIP
   ============================================ */
.cs-meta {
    display: grid;
    grid-template-columns: repeat(4, 1fr);
    border-bottom: 1px solid rgba(12,11,11,0.12);
}

.cs-meta-item {
    padding: 28px var(--pm);
    display: flex;
    flex-direction: column;
    gap: 6px;
    border-right: 1px solid rgba(12,11,11,0.12);
}

.cs-meta-item:last-child {
    border-right: none;
}

.cs-meta-label {
    font-size: 14px;
    font-weight: 500;
    letter-spacing: 0.12em;
    text-transform: uppercase;
    color: var(--text-muted);
}

.cs-meta-value {
    font-size: 18px;
    font-weight: 500;
    color: var(--text-primary);
    letter-spacing: -0.01em;
}

@media (max-width: 768px) {
    .cs-meta {
        grid-template-columns: repeat(2, 1fr);
    }
    .cs-meta-item:nth-child(2) {
        border-right: none;
    }
    .cs-meta-item:nth-child(2),
    .cs-meta-item:nth-child(4) {
        border-right: none;
    }
    .cs-meta-item:nth-child(3) {
        border-right: 1px solid rgba(12,11,11,0.12);
    }
    .cs-meta-item:nth-child(1),
    .cs-meta-item:nth-child(2) {
        border-bottom: 1px solid rgba(12,11,11,0.12);
    }
}

@media (max-width: 480px) {
    .cs-meta {
        grid-template-columns: 1fr 1fr;
    }
}

/* ============================================
   INTRO
   ============================================ */
.cs-intro {
    padding: var(--cs-gap) var(--pm) 0;
}

.cs-intro-inner {
    display: grid;
    grid-template-columns: repeat(12, 1fr);
    column-gap: var(--cs-gutter);
    align-items: start;
}

.cs-intro-header {
    grid-column: 1 / 3;
    grid-row: 1;
    padding-top: 10px;
}

.cs-overview-lead {
    grid-column: 1 / 13;
    grid-row: 1;
    text-indent: 14%;
    font-size: clamp(28px, 4.2vw, 64px);
    font-weight: 500;
    line-height: 1.1;
    letter-spacing: -0.025em;
    color: var(--text-primary);
    margin: 0;
}

.cs-overview-lead a {
    color: inherit;
    text-decoration: underline;
    text-decoration-thickness: 1px;
    text-underline-offset: 4px;
}

/* ============================================
   SECTIONS
   ============================================ */
.cs-section {
    padding: 80px 0;
}

.cs-section--light {
    background-color: var(--bg-primary);
    color: var(--text-primary);
}

.cs-section--dark {
    background-color: var(--bg-dark);
    color: var(--text-light);
}

.cs-section-inner {
    padding: 0 var(--pm);
    display: grid;
    grid-template-columns: 200px 1fr;
    gap: 40px 80px;
    margin-bottom: 60px;
    align-items: start;
}

.cs-section-header {
    display: flex;
    flex-direction: column;
    gap: 8px;
    padding-top: 6px;
}

.cs-section-num {
    font-size: 20px;
    font-weight: 500;
    letter-spacing: 0.12em;
    text-transform: uppercase;
    color: var(--text-muted);
}

.cs-section-title {
    font-size: clamp(22px, 2vw, 30px);
    font-weight: 700;
    line-height: 1;
    letter-spacing: -0.02em;
    text-transform: uppercase;
    overflow-wrap: break-word;
}

.cs-section-body {
    display: flex;
    flex-direction: column;
    gap: 20px;
    max-width: 680px;
}

.cs-body-text {
    font-size: clamp(15px, 1.4vw, 18px);
    font-weight: 400;
    line-height: 1.65;
    color: inherit;
    opacity: 0.8;
}

.cs-section--dark .cs-body-text {
    opacity: 0.65;
}

.cs-body-text em {
    font-style: italic;
    opacity: 0.7;
}

/* ============================================
   IMAGES
   ============================================ */
.cs-image-full {
    width: 100%;
    overflow: hidden;
    margin-bottom: 4px;
}

.cs-image-full:last-child {
    margin-bottom: 0;
}

.cs-image-full img {
    width: 100%;
    height: clamp(280px, 45vw, 640px);
    object-fit: cover;
    object-position: center top;
    display: block;
}

.cs-image-grid {
    display: grid;
    gap: 4px;
    margin-bottom: 4px;
}

.cs-image-grid:last-child {
    margin-bottom: 0;
}

.cs-image-grid--2 {
    grid-template-columns: 1fr 1fr;
}

.cs-image-grid--3 {
    grid-template-columns: 1fr 1fr 1fr;
}

.cs-image-grid img {
    width: 100%;
    height: clamp(200px, 28vw, 420px);
    object-fit: cover;
    object-position: center top;
    display: block;
}

/* ============================================
   STAT CALLOUT
   ============================================ */
.cs-stat {
    background-color: var(--bg-dark);
    color: var(--text-light);
    padding: 100px var(--pm);
}

.cs-stat-inner {
    display: flex;
    align-items: center;
    gap: clamp(40px, 6vw, 100px);
    max-width: 1100px;
}

.cs-stat-number {
    font-size: clamp(100px, 18vw, 240px);
    font-weight: 800;
    line-height: 1;
    letter-spacing: -0.04em;
    color: var(--text-light);
    white-space: nowrap;
    flex-shrink: 0;
}

.cs-stat-label {
    font-size: clamp(16px, 1.8vw, 22px);
    font-weight: 400;
    line-height: 1.5;
    color: rgba(255,255,255,0.55);
    max-width: 420px;
}

@media (max-width: 768px) {
    .cs-stat-inner {
        flex-direction: column;
        align-items: flex-start;
        gap: 24px;
    }
}

/* ============================================
   NEXT PROJECT
   ============================================ */
/* No full-width keyline above the footer on case study pages */
.cs-page .footer {
    border-top: none;
}

.cs-next {
    background-color: var(--bg-primary);
    display: flex;
    justify-content: flex-end;
    overflow: hidden;
    /* Consistent gap above the next-project block across every case study,
       independent of whatever content block precedes it. */
    padding-top: var(--cs-gap);
}

.cs-next-panel {
    width: 50%;
    padding: 48px var(--pm) 48px 0;
}

.cs-next-interactive {
    display: block;
}

/* Pill cursors are mouse-only — never hide the (non-existent) cursor on touch */
@media (hover: hover) and (pointer: fine) {
    .cs-next-interactive {
        cursor: none;
    }
}

.cs-next-label {
    font-size: 14px;
    font-weight: 500;
    letter-spacing: 0.12em;
    text-transform: uppercase;
    color: var(--text-secondary);
    display: block;
    margin-bottom: 14px;
    transition: color 0.3s ease;
}

.cs-next-rule {
    border: none;
    border-top: 1px solid rgba(12,11,11,0.12);
    margin: 0 0 14px 0;
    transition: border-color 0.3s ease;
}

.cs-next-interactive:hover .cs-next-label {
    color: var(--text-primary);
}

.cs-next-interactive:hover .cs-next-rule {
    border-color: var(--text-primary);
}

.cs-next-content {
    display: flex;
    align-items: flex-start;
}

.cs-next-title {
    flex: 0 0 33.333%;
    font-size: clamp(18px, 2.4vw, 32px);
    font-weight: 500;
    letter-spacing: -0.02em;
    line-height: 1;
    color: var(--text-secondary);
    white-space: nowrap;
    transition: color 0.3s ease;
}

.cs-next-interactive:hover .cs-next-title {
    color: var(--text-primary);
}

.cs-next-image-wrap {
    flex: 1;
    overflow: hidden;
    position: relative;
}

.cs-next-image-wrap img {
    width: 100%;
    height: auto;
    aspect-ratio: 16 / 9;
    object-fit: cover;
    object-position: center;
    display: block;
    transition: transform 1.2s var(--ease-out-expo);
}

.cs-next-interactive:hover .cs-next-image-wrap img {
    transform: scale(1.08);
    transition: transform 3s var(--ease-out-expo);
}

.cs-next-cursor,
.cs-link-cursor {
    position: fixed;
    top: 0;
    left: 0;
    /* scales up as it fades in; position is driven by left/top so movement
       is never transitioned */
    transform: translate(-50%, -50%) scale(0.85);
    display: flex;
    align-items: center;
    gap: 8px;
    background: var(--text-primary);
    color: var(--text-light);
    padding: 8px 16px 8px 12px;
    border-radius: 999px;
    font-size: 11px;
    font-weight: 500;
    letter-spacing: 0.12em;
    text-transform: uppercase;
    white-space: nowrap;
    pointer-events: none;
    z-index: 9998;
    opacity: 0;
    transition: opacity 0.25s ease, transform 0.42s var(--ease-out-expo);
}

.cs-next-cursor.visible,
.cs-link-cursor.visible {
    opacity: 1;
    transform: translate(-50%, -50%) scale(1);
}

@media (hover: hover) and (pointer: fine) {
    .cs-here-link {
        cursor: none;
    }
}

/* ============================================
   PAGE ENTRY ANIMATION
   ============================================ */
@keyframes cs-image-reveal {
    from { clip-path: polygon(50% 100%, 50% 100%, 50% 100%, 50% 100%); }
    to   { clip-path: polygon(0% 0%,   100% 0%,  100% 100%, 0% 100%); }
}

@keyframes cs-fade-up {
    from { opacity: 0; transform: translateY(10px); }
    to   { opacity: 1; transform: translateY(0);    }
}

@keyframes cs-fade-in {
    from { opacity: 0; }
    to   { opacity: 1; }
}

.cs-page #cs-hero-image img {
    animation: cs-image-reveal 2s cubic-bezier(0.16, 1, 0.3, 1) both;
}

.cs-page .cs-hero-num {
    animation: cs-fade-up 0.8s cubic-bezier(0.16, 1, 0.3, 1) 0.8s both;
}

.cs-page .cs-hero-title {
    animation: cs-fade-up 0.8s cubic-bezier(0.16, 1, 0.3, 1) 1.1s both;
}

.cs-page .cs-meta {
    animation: cs-fade-up 0.8s cubic-bezier(0.16, 1, 0.3, 1) 1.1s both;
}

.cs-page .navbar {
    animation: cs-fade-in 0.6s ease 1.8s both;
}

/* ============================================
   RESPONSIVE
   ============================================ */
@media (max-width: 1024px) {
    .cs-section-inner {
        grid-template-columns: 160px 1fr;
        gap: 32px 48px;
    }
}

@media (max-width: 1024px) {
    .cs-intro-header {
        width: 160px;
    }

    /* Full-width note: the lead's first line is indented 14% to clear the
       label sitting beside it. That percentage shrinks with the viewport, so
       below ~950px the indent became narrower than the label itself and the
       text ran into it (measured: -24px at 769px for the longest label,
       "Overview"). A 150px floor holds a steady ~24px gap across this whole
       band — comparable to the desktop treatment, which runs 8px at 1025px up
       to 66px at 1440px. Applies to every full-width note via the shared
       .cs-overview-lead class. Stacked layout at ≤768px still resets it to 0. */
    .cs-overview-lead {
        text-indent: max(14%, 150px);
    }

    /* Was a hard 32px step at 768px, which read small next to the homepage
       headlines and jumped at the breakpoint. Same convergent formula as
       .hero-caption: raised floor, capped at the value the base clamp gives
       at 1025px, so it meets desktop seamlessly. */
    .cs-hero-title {
        font-size: clamp(34px, 4.2vw + 12px, 43px);
    }
}

@media (max-width: 768px) {

    .cs-hero-text {
        padding: 0;
    }

    .cs-intro {
        padding: var(--cs-gap) var(--pm) 0;
    }

    .cs-intro-header {
        float: none;
        width: auto;
        padding-top: 0;
        /* spacing now comes from .cs-intro-inner's row-gap, so the label and
           lead sit exactly 16px apart like the right-column note */
        margin-bottom: 0;
    }

    .cs-section {
        padding: 60px 0;
    }

    .cs-section-inner {
        grid-template-columns: 1fr;
        gap: 24px;
        margin-bottom: 40px;
    }

    .cs-section-header {
        flex-direction: row;
        align-items: baseline;
        gap: 12px;
    }

    .cs-image-grid--2,
    .cs-image-grid--3 {
        grid-template-columns: 1fr;
    }

    .cs-image-grid img {
        height: clamp(200px, 60vw, 360px);
    }

    .cs-next-panel {
        width: 100%;
        padding-left: var(--pm);
    }

    .cs-stat {
        padding: 72px var(--pm);
    }
}

/* ============================================
   PLACEHOLDER IMAGES (no asset yet)
   ============================================ */
.cs-hero-image-placeholder {
    width: 100%;
    height: clamp(300px, 52vw, 680px);
    background-color: #2a2a2a;
    display: block;
}

.cs-page #cs-hero-image .cs-hero-image-placeholder {
    animation: cs-image-reveal 2s cubic-bezier(0.16, 1, 0.3, 1) both;
}

.cs-next-image-placeholder {
    width: 100%;
    aspect-ratio: 16 / 9;
    background-color: #2a2a2a;
    display: block;
    transition: transform 1.2s var(--ease-out-expo);
}

.cs-next-interactive:hover .cs-next-image-placeholder {
    transform: scale(1.08);
    transition: transform 3s var(--ease-out-expo);
}

/* Scroll animations removed from body content — text renders statically.
   Reveal transitions live in .cs-reveal (charts only). */

/* ============================================
   CASE STUDY — Content Components
   (Bases; namespaced, shared-safe)
   ============================================ */

/* --- Overview meta line --- */
.cs-overview-note {
    margin-top: 28px;
    font-size: clamp(14px, 1.3vw, 16px);
    font-weight: 400;
    line-height: 1.6;
    color: var(--text-secondary);
    max-width: 560px;
}

/* --- Section headline (the 1–2 sentence takeaway) --- */
.cs-section-headline {
    font-size: clamp(22px, 2.6vw, 34px);
    font-weight: 600;
    line-height: 1.15;
    letter-spacing: -0.02em;
    margin-bottom: 4px;
}

.cs-subhead {
    font-size: 12px;
    font-weight: 600;
    letter-spacing: 0.12em;
    text-transform: uppercase;
    opacity: 0.45;
    margin-top: 24px;
}

/* ============================================
   BIG STATEMENT — dark text on light background
   (recurring vision-type treatment)
   ============================================ */
.cs-statement {
    padding: clamp(90px, 12vw, 160px) var(--pm);
    background: var(--bg-primary);
    color: var(--text-primary);
}

.cs-statement-label {
    display: block;
    font-size: 14px;
    font-weight: 500;
    letter-spacing: 0.12em;
    text-transform: uppercase;
    color: var(--text-muted);
    margin-bottom: 28px;
}

.cs-statement-title {
    font-size: clamp(34px, 5.2vw, 76px);
    font-weight: 600;
    line-height: 1.02;
    letter-spacing: -0.03em;
    max-width: 20ch;
    margin: 0;
}

.cs-statement-body {
    margin-top: 40px;
    font-size: clamp(15px, 1.4vw, 18px);
    font-weight: 400;
    line-height: 1.6;
    color: var(--text-secondary);
    max-width: 560px;
}

.cs-statement--center .cs-statement-title { max-width: none; }

.cs-quote-row {
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    gap: 32px;
    margin-top: 64px;
}

.cs-quote {
    border-top: 1px solid rgba(12,11,11,0.2);
    padding-top: 18px;
    font-size: clamp(16px, 1.6vw, 20px);
    font-weight: 500;
    line-height: 1.4;
    letter-spacing: -0.01em;
    color: var(--text-primary);
}

.cs-quote cite {
    display: block;
    margin-top: 10px;
    font-style: normal;
    font-size: 10px;
    letter-spacing: 0.1em;
    text-transform: uppercase;
    color: var(--text-muted);
}

/* ============================================
   FIGURES — grey placeholders + captions
   ============================================ */
.cs-fig {
    width: 100%;
    background-color: #2a2a2a;
    display: flex;
    align-items: center;
    justify-content: center;
    min-height: 180px;
    overflow: hidden;
}

.cs-fig img {
    width: 100%;
    height: 100%;
    object-fit: cover;
    object-position: center;
    display: block;
}

.cs-fig-label {
    font-size: 14px;
    font-weight: 500;
    letter-spacing: 0.12em;
    text-transform: uppercase;
    color: rgba(255,255,255,0.35);
    text-align: center;
    padding: 0 24px;
}

.cs-caption {
    font-size: 14px;
    font-weight: 400;
    line-height: 1.55;
    color: var(--text-secondary);
    max-width: 300px;
    margin-top: 12px;
}

/* Full-width closeup (1270x1060 equivalent) */
.cs-figure-full {
    padding: 0 var(--pm);
    margin: 4px 0;
}

.cs-figure-full .cs-fig {
    height: clamp(340px, 62vw, 900px);
}

/* Pair: one larger image next to a smaller one (755x900 + 510x745) */
.cs-pair {
    padding: 0 var(--pm);
    display: grid;
    grid-template-columns: 59fr 40fr;
    gap: clamp(16px, 2vw, 28px);
    align-items: start;
    margin: 4px 0;
}

.cs-pair--flip {
    grid-template-columns: 40fr 59fr;
}

.cs-pair .cs-fig--lg { aspect-ratio: 755 / 900; }
.cs-pair .cs-fig--sm { aspect-ratio: 510 / 745; }
.cs-pair .cs-fig--sq { aspect-ratio: 1 / 1; }

/* ============================================
   PHONE SCREENS (375x812, 32px corners)
   ============================================ */
.cs-phone {
    aspect-ratio: 375 / 812;
    background: #2a2a2a;
    border-radius: clamp(14px, 2.3vw, 32px);
    flex-shrink: 0;
    overflow: hidden;
}

.cs-phone img {
    width: 100%;
    height: 100%;
    object-fit: cover;
    display: block;
}

/* Wall of screens — two rows, edge bleed, opposing scroll motion */
.cs-wall {
    overflow: hidden;
    padding: clamp(60px, 8vw, 100px) 0;
    display: flex;
    flex-direction: column;
    gap: clamp(10px, 1.2vw, 18px);
}

.cs-wall-row {
    display: flex;
    gap: clamp(10px, 1.2vw, 18px);
    width: max-content;
    will-change: transform;
}

.cs-wall-row .cs-phone {
    width: clamp(150px, 19vw, 272px);
}

.cs-wall-row--a { margin-left: -8vw; }
.cs-wall-row--b { margin-left: -14vw; }

/* ============================================
   LIST BLOCKS
   ============================================ */
.cs-list {
    display: flex;
    flex-direction: column;
}

.cs-list-item {
    display: grid;
    grid-template-columns: 48px 1fr;
    gap: 16px;
    padding: 16px 0;
    border-top: 1px solid rgba(12,11,11,0.12);
    font-size: clamp(15px, 1.5vw, 18px);
    font-weight: 500;
    line-height: 1.45;
    letter-spacing: -0.01em;
}

.cs-list-num {
    font-size: 14px;
    font-weight: 500;
    letter-spacing: 0.12em;
    color: var(--text-muted);
    padding-top: 5px;
}

.cs-list-item p { margin: 0; }

.cs-list-item .cs-list-sub {
    display: block;
    font-size: clamp(13px, 1.2vw, 15px);
    font-weight: 400;
    color: var(--text-secondary);
    margin-top: 5px;
    line-height: 1.55;
}

/* Term → definition mappings (light) */
.cs-map {
    padding: 0 var(--pm);
    margin-top: 56px;
    display: flex;
    flex-direction: column;
}

.cs-map-row {
    display: grid;
    grid-template-columns: 220px 1fr;
    gap: 24px;
    padding: 18px 0;
    border-top: 1px solid rgba(12,11,11,0.15);
    align-items: start;
}

.cs-map-term {
    font-size: clamp(14px, 1.4vw, 17px);
    font-weight: 700;
    letter-spacing: 0.02em;
    text-transform: uppercase;
}

.cs-map-def {
    font-size: clamp(13px, 1.3vw, 16px);
    line-height: 1.6;
    color: var(--text-secondary);
    max-width: 640px;
}

/* ============================================
   RESEARCH FINDINGS GRID
   ============================================ */
.cs-findings {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 4px;
    padding: 0 var(--pm);
    margin-bottom: 60px;
}

.cs-finding {
    background: #fff;
    padding: clamp(24px, 3vw, 40px);
    display: flex;
    flex-direction: column;
    gap: 14px;
}

.cs-finding-top {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 16px;
}

.cs-finding-kicker {
    font-size: 14px;
    font-weight: 500;
    letter-spacing: 0.12em;
    text-transform: uppercase;
    color: var(--text-muted);
}

.cs-tag {
    font-size: 10px;
    font-weight: 600;
    letter-spacing: 0.12em;
    text-transform: uppercase;
    padding: 5px 12px;
    border-radius: 999px;
    white-space: nowrap;
}

.cs-tag--confirmed { background: var(--text-primary); color: var(--text-light); }
.cs-tag--open      { background: transparent; color: var(--text-primary); border: 1px solid rgba(12,11,11,0.35); }

.cs-finding-title {
    font-size: clamp(16px, 1.6vw, 21px);
    font-weight: 600;
    line-height: 1.3;
    letter-spacing: -0.015em;
}

.cs-finding-body {
    font-size: clamp(13px, 1.2vw, 15px);
    line-height: 1.6;
    color: var(--text-secondary);
}

.cs-finding-body strong { color: var(--text-primary); font-weight: 600; }

/* ============================================
   RANKED BARS
   ============================================ */
.cs-bars {
    display: flex;
    flex-direction: column;
    gap: 20px;
    margin-top: 8px;
}

.cs-bar-row { width: 100%; }

.cs-bar-head {
    display: flex;
    justify-content: space-between;
    align-items: baseline;
    gap: 16px;
    margin-bottom: 8px;
}

.cs-bar-name {
    font-size: clamp(14px, 1.3vw, 16px);
    font-weight: 500;
    letter-spacing: -0.01em;
}

.cs-bar-val {
    font-size: 14px;
    font-weight: 500;
    letter-spacing: 0.06em;
    color: var(--text-secondary);
    white-space: nowrap;
}

.cs-bar-track {
    width: 100%;
    height: 6px;
    background: rgba(12,11,11,0.08);
    overflow: hidden;
}

.cs-bar-fill {
    height: 100%;
    background: var(--text-primary);
    width: 0;
    transition: width 1.4s var(--ease-out-expo) 0.2s;
}

.visible .cs-bar-fill { width: var(--w); }

/* ============================================
   PIPELINE (process arrows)
   ============================================ */
.cs-pipeline {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: 10px 14px;
    margin: 8px 0;
}

/* Emerging design flow — image matched to the width of the right stagger item
   (7 of 12 columns), left-aligned, with its label left-aligned above it */
.cs-flow {
    padding: 0 var(--pm);
    display: grid;
    grid-template-columns: repeat(12, 1fr);
    column-gap: var(--cs-gutter);
}

.cs-flow-label {
    grid-column: 1 / 8;   /* cols 1–7, left-aligned */
    /* match the section eyebrow labels (.cs-note-label), overriding .cs-subhead */
    font-size: 20px;
    font-weight: 500;
    letter-spacing: 0.12em;
    text-transform: uppercase;
    color: var(--text-muted);
    opacity: 1;
    margin: 0 0 8px;
}

.cs-flow-img {
    grid-column: 1 / 8;   /* same 7-column width as the right stagger item */
    display: block;
    width: 100%;
    height: auto;
    margin: 0;
}

/* Force the whole flow onto a single line */
.cs-pipeline--inline {
    flex-wrap: nowrap;
}

.cs-pipeline span {
    font-size: clamp(13px, 1.2vw, 15px);
    font-weight: 500;
    padding: 8px 16px;
    border: 1px solid rgba(12,11,11,0.25);
    border-radius: 999px;
    white-space: nowrap;
}

.cs-pipeline .cs-pipe-arrow {
    border: none;
    padding: 0;
    opacity: 0.35;
}

/* ============================================
   WIP BADGE
   ============================================ */
.cs-wip {
    display: inline-flex;
    align-items: center;
    gap: 10px;
    font-size: 11px;
    font-weight: 600;
    letter-spacing: 0.12em;
    text-transform: uppercase;
    padding: 8px 16px;
    border: 1px solid rgba(12,11,11,0.3);
    border-radius: 999px;
    margin-bottom: 20px;
}

.cs-wip::before {
    content: '';
    width: 7px;
    height: 7px;
    border-radius: 50%;
    background: #2f9e63;
    animation: cs-pulse 2s ease-in-out infinite;
}

@keyframes cs-pulse {
    0%, 100% { opacity: 1; }
    50%      { opacity: 0.35; }
}

/* ============================================
   LEARNING ARC DIAGRAM
   ============================================ */
.cs-arc {
    display: grid;
    grid-template-columns: repeat(4, 1fr);
    padding: 0 var(--pm);
    margin: 24px 0 60px;
}

.cs-arc-stage {
    border-top: 1px solid rgba(12,11,11,0.25);
    padding: 24px 32px 8px 0;
    position: relative;
}

.cs-arc-stage::after {
    content: '\2192';
    position: absolute;
    top: 22px;
    right: 24px;
    font-size: 18px;
    opacity: 0.3;
}

.cs-arc-stage:last-child::after { content: none; }

.cs-arc-num {
    display: block;
    font-size: 11px;
    font-weight: 500;
    letter-spacing: 0.12em;
    color: var(--text-muted);
    margin-bottom: 14px;
}

.cs-arc-name {
    display: block;
    font-size: clamp(17px, 1.8vw, 24px);
    font-weight: 700;
    letter-spacing: -0.02em;
    text-transform: uppercase;
    margin-bottom: 10px;
}

.cs-arc-desc {
    font-size: clamp(13px, 1.15vw, 15px);
    line-height: 1.55;
    color: var(--text-secondary);
}

/* ============================================
   STAGGERED MEDIA PAIR (offset two-up)
   ============================================ */
.cs-stagger {
    padding: var(--cs-gap) var(--pm) 0;
    display: grid;
    grid-template-columns: repeat(12, 1fr);
    column-gap: var(--cs-gutter);
    align-items: end;
}

.cs-stagger-item:first-child { grid-column: 1 / 8; }  /* cols 1–7 */
.cs-stagger-item:last-child  { grid-column: 8 / 13; } /* cols 8–12 */

/* Flipped: narrower item left, wider/taller item on the right */
.cs-stagger--flip .cs-stagger-item:first-child { grid-column: 1 / 6; }  /* cols 1–5 */
.cs-stagger--flip .cs-stagger-item:last-child  { grid-column: 6 / 13; } /* cols 6–12 */

.cs-stagger .cs-fig--tall { aspect-ratio: 1 / 1; }
.cs-stagger .cs-fig--wide { aspect-ratio: 4 / 5; }

/* ============================================
   RIGHT-COLUMN NOTE (far-left label + right paragraph)
   ============================================ */
.cs-note {
    padding: var(--cs-gap) var(--pm) 0;
    display: grid;
    grid-template-columns: repeat(12, 1fr);
    column-gap: var(--cs-gutter);
    align-items: start;
}

.cs-note-label {
    grid-column: 1 / 5;
    font-size: 20px;
    font-weight: 500;
    letter-spacing: 0.12em;
    text-transform: uppercase;
    color: var(--text-muted);
    padding-top: 7px;
}

.cs-note-body {
    grid-column: 6 / 13;
    display: flex;
    flex-direction: column;
    gap: 22px;
}

/* Flipped note: text on the left, label on the right (mirror of default) */
.cs-note--flip .cs-note-body {
    grid-column: 1 / 8;
}

.cs-note--flip .cs-note-label {
    grid-column: 9 / 13;
    text-align: right;
}

.cs-note-caption {
    font-size: 12px;
    font-weight: 600;
    letter-spacing: 0.12em;
    text-transform: uppercase;
    color: var(--text-secondary);
}

.cs-note-lead {
    font-size: clamp(22px, 2.6vw, 34px);
    font-weight: 600;
    line-height: 1.15;
    letter-spacing: -0.02em;
    color: var(--text-primary);
    margin: 0;
}

.cs-note-text {
    font-size: clamp(17px, 1.7vw, 22px);
    font-weight: 400;
    line-height: 1.5;
    letter-spacing: -0.01em;
    color: var(--text-primary);
    text-indent: 8ch;
    margin: 0;
}

/* ============================================
   HOW-MIGHT-WE LIST (numbered prompts, sits inside a note body)
   Number reuses the label type style; prompt text sits between the
   body and full-width-note scale, set in primary/black.
   ============================================ */
.cs-hmw {
    display: flex;
    flex-direction: column;
    /* Regular block rhythm below the note text, minus the note-body's 22px flex gap */
    margin-top: calc(var(--cs-gap) - 22px);
}

/* When the list stands alone in a note body (no note text above), drop the extra top gap */
.cs-note-body > .cs-hmw:first-child {
    margin-top: 0;
}

.cs-hmw-row {
    display: flex;
    gap: 20px;
    align-items: flex-start;
    padding: 18px 0;
}

.cs-hmw-row:first-child { padding-top: 0; }
.cs-hmw-row:last-child  { padding-bottom: 0; }

/* Keyline between rows only — never above the first or below the last */
.cs-hmw-row + .cs-hmw-row {
    border-top: 1px solid var(--text-muted);
}

.cs-hmw-num {
    flex: 0 0 auto;
    font-size: 20px;
    font-weight: 500;
    line-height: 1.2;
    letter-spacing: 0.12em;
    text-transform: uppercase;
    color: var(--text-muted);
    /* Drop the small number onto the cap line of the larger prompt text */
    padding-top: 4px;
}

.cs-hmw-text {
    margin: 0;
    font-size: clamp(20px, 2.2vw, 28px);
    font-weight: 500;
    line-height: 1.2;
    letter-spacing: -0.02em;
    color: var(--text-primary);
}

/* Heading + subcaption stacked beside the number */
.cs-hmw-body {
    display: flex;
    flex-direction: column;
    gap: 6px;
}

.cs-hmw-sub {
    margin: 0;
    font-size: clamp(15px, 1.4vw, 18px);
    font-weight: 400;
    line-height: 1.6;
    color: var(--text-primary);
    opacity: 0.8;
}

/* ============================================
   RECOMMENDATIONS — stacked left block (label floats above the list)
   ============================================ */
.cs-reco {
    padding: var(--cs-gap) var(--pm) 0;
}

.cs-reco .cs-note-label {
    display: block;
    padding-top: 0;
    margin-bottom: 24px;
}

.cs-reco .cs-hmw {
    margin-top: 0;
    max-width: 640px;
}

/* ============================================
   TWO SQUARES (equal, scaling, same height)
   ============================================ */
.cs-squares {
    padding: var(--cs-gap) var(--pm) 0;
    display: grid;
    grid-template-columns: repeat(12, 1fr);
    column-gap: var(--cs-gutter);
    align-items: start;
}

.cs-squares-item:first-child { grid-column: 1 / 7; }  /* cols 1–6 */
.cs-squares-item:last-child  { grid-column: 7 / 13; } /* cols 7–12 */

.cs-squares .cs-fig {
    aspect-ratio: 1 / 1;
}

/* Caption sitting directly under a figure inside a squares item. These were
   per-page inline margins (natwest --cs-gutter/2, specsavers --cs-gutter);
   lifted to classes so the mobile tier below can reach them. Desktop values
   are preserved exactly as they were on each page. */
.cs-fig-caption {
    margin-top: calc(var(--cs-gutter) / 2);
}

.cs-fig-caption--wide {
    margin-top: var(--cs-gutter);
}

/* ============================================
   FIGMA-STYLE FRAME LABELS
   Top-left, 16px inset, on #D6D4CF frames.
   Shared across case studies — edit here once.
   ============================================ */
.cs-frame {
    position: relative;
}

.cs-frame-label {
    position: absolute;
    top: 16px;
    left: 16px;
    z-index: 3;
    font-family: 'Inter Tight', sans-serif;
    font-size: 11px;
    font-weight: 600;
    line-height: 1;
    letter-spacing: 0.12em;
    text-transform: uppercase;
    color: rgba(12, 11, 11, 0.6);
    background: rgba(214, 212, 207, 0.85);
    padding: 6px 10px;
    border-radius: 4px;
    pointer-events: none;
    -webkit-backdrop-filter: blur(2px);
    backdrop-filter: blur(2px);
}

/* ============================================
   PAN BOARDS (Figma-style, two synced canvases)
   ============================================ */
.cs-board {
    position: relative;
    background-color: #D6D4CF;
}

.cs-board-scroller {
    position: absolute;
    inset: 0;
    overflow: hidden;               /* pan via transform, not native scroll */
    cursor: grab;
    touch-action: none;
}

/* Touch (769px+ tablets, where boards stay interactive): pan-y hands vertical
   swipes back to the browser so the page always scrolls — touch-action: none
   would trap the user on the board. Horizontal drags still pan the canvas. */
@media (pointer: coarse) {
    .cs-board-scroller {
        touch-action: pan-y;
    }
}

/* ≤768px the boards degrade to a static contained image (case-study.js adds
   .is-static and clears its inline sizing) — no pan, no trapped scroll. */
.cs-board.is-static .cs-board-scroller {
    overflow: hidden;
    cursor: default;
    touch-action: auto;
}

.cs-board.is-static .cs-board-canvas {
    position: absolute;
    inset: 0;
    width: 100%;
    height: 100%;
    transform: none !important;
}

.cs-board.is-static .cs-board-img {
    position: absolute;
    inset: 0;
    width: 100% !important;
    height: 100% !important;
    object-fit: contain;
}

/* Static boards keep the canvas-grey letterbox; give the full-width matched
   board (no intrinsic height once JS stops sizing it) a stable frame. */
.cs-board-full .cs-board.is-static {
    aspect-ratio: 4 / 3;
}

.cs-board-scroller.is-panning {
    cursor: grabbing;
}

.cs-board-canvas {
    position: absolute;
    top: 0;
    left: 0;
    transform-origin: 0 0;
    will-change: transform;
}

/* Full-width board sits just below the two squares; height is set by JS
   to match the square boards */
.cs-board-full {
    padding: var(--cs-gutter) var(--pm) 0;
}

.cs-board-full .cs-fig {
    width: 100%;
}

/* Higher specificity than `.cs-fig img` so the base cover/stretch rules don't apply.
   Exact px size + position are set inline by JS. */
.cs-board .cs-board-img {
    position: absolute;
    top: 0;
    left: 0;
    max-width: none;
    object-fit: fill;
    user-select: none;
    -webkit-user-drag: none;
    display: block;
}

/* ============================================
   PROCESS DIAGRAM (wide placeholder)
   ============================================ */
.cs-diagram {
    padding: var(--cs-gap) var(--pm) 0;
}

.cs-diagram .cs-fig {
    aspect-ratio: 16 / 7;
    min-height: 280px;
}

/* Transparent-background infographic: sit on the true site background,
   render full width at its natural height (no fixed frame, no letterbox) */
.cs-fig--infographic {
    background-color: var(--bg-primary);
    overflow: visible;
}

.cs-diagram .cs-fig.cs-fig--infographic {
    aspect-ratio: auto;
    min-height: 0;
}

/* Diagram left-aligned across 6 of 12 columns, with a label above it */
.cs-diagram--col6 {
    display: grid;
    grid-template-columns: repeat(12, 1fr);
    column-gap: var(--cs-gutter);
}

.cs-diagram--col6 .cs-diagram-label {
    grid-column: 1 / 10;
    margin: 0 0 8px;
}

.cs-diagram--col6 .cs-fig {
    grid-column: 1 / 10;   /* 9 columns wide, left-aligned */
}

/* Bottom sequence — full-width board → motion wall → desktop image → final
   mockups: every vertical gap equals the gutter between the square boards and
   the full-width board (--cs-gutter) */
.cs-wall--flush { padding: var(--cs-gutter) 0 0; }
.cs-diagram--flush { padding-top: var(--cs-gutter); }
.cs-squares--flush { padding-top: var(--cs-gutter); }

.cs-fig--infographic img {
    object-fit: contain;
    height: auto;
}

/* ============================================
   RESEARCH FINDINGS GRID (2×2, keyline dividers)
   ============================================ */
.cs-grid {
    padding: var(--cs-gap) var(--pm) 0;
}

/* #D6D4CF panel holding the 2×2 hypothesis grid — square corners, full-bleed dividers.
   Content inset lives on the cells so the divider lines reach the panel edges. */
.cs-grid-panel {
    background-color: #D6D4CF;
    display: grid;
    grid-template-columns: 1fr; /* mobile: single column */
    border: 1px solid rgba(12, 11, 11, 0.16); /* outline matches the inner keylines */
}

.cs-grid-cell {
    display: flex;
    flex-direction: column;
    gap: 12px;
    padding: clamp(24px, 6vw, 32px);
    border-top: 1px solid rgba(12, 11, 11, 0.16);
}

.cs-grid-cell:first-child {
    border-top: none;
}

.cs-grid-head {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 16px;
}

.cs-grid-kicker {
    font-size: 20px;
    font-weight: 500;
    letter-spacing: 0.12em;
    text-transform: uppercase;
    color: var(--text-muted);
}

.cs-grid-num {
    margin-right: 8px;
}

/* Status — inline on the kicker, same colour/size as the label (no pill) */
.cs-grid-status {
    white-space: nowrap;
}

.cs-grid-status-icon {
    margin-right: 5px;
    font-weight: 700;
}

.cs-grid-line {
    margin: 0;
    font-size: clamp(20px, 2.2vw, 28px);
    font-weight: 500;
    line-height: 1.2;
    letter-spacing: -0.02em;
    color: var(--text-primary);
}

.cs-grid-lead {
    color: var(--text-primary);
}

.cs-grid-points {
    list-style: none;
    margin: 2px 0 0;
    padding: 0;
    display: flex;
    flex-direction: column;
    gap: 8px;
}

.cs-grid-points li {
    position: relative;
    padding-left: 18px;
    font-size: clamp(14px, 1.3vw, 16px);
    line-height: 1.55;
    color: var(--text-secondary);
}

.cs-grid-points li::before {
    content: '';
    position: absolute;
    left: 2px;
    top: 0.62em;
    width: 4px;
    height: 4px;
    border-radius: 50%;
    background: var(--text-muted);
}

.cs-grid-quote {
    margin: 18px 0 0;
    font-size: clamp(14px, 1.3vw, 16px);
    font-style: italic;
    line-height: 1.55;
    color: var(--text-secondary);
}

@media (min-width: 769px) {
    .cs-grid-panel { grid-template-columns: 1fr 1fr; }
    .cs-grid-cell {
        padding: clamp(32px, 3.4vw, 48px);
        border-top: none;
    }
    /* central cross — both lines run the full width/height of the panel */
    .cs-grid-cell:nth-child(even) { border-left: 1px solid rgba(12, 11, 11, 0.16); }
    .cs-grid-cell:nth-child(n+3)  { border-top: 1px solid rgba(12, 11, 11, 0.16); }
}

@media (max-width: 768px) {
    /* Full-width note: on desktop the label and lead deliberately share row 1
       (the lead's 14% text-indent clears the label). Collapsing to one column
       kept both pinned to row 1, so they landed in the same cell and
       overlapped. Releasing the row lets the label stack above the text, with
       the same label→text gap the right-column note uses (16px). */
    .cs-intro-inner {
        grid-template-columns: 1fr;
        row-gap: 16px;
    }

    .cs-intro-header,
    .cs-overview-lead {
        grid-column: 1 / -1;
        grid-row: auto;
    }

    .cs-overview-lead { text-indent: 0; }

    .cs-stagger { grid-template-columns: 1fr; row-gap: 32px; }
    .cs-stagger-item:first-child,
    .cs-stagger-item:last-child,
    .cs-stagger--flip .cs-stagger-item:first-child,
    .cs-stagger--flip .cs-stagger-item:last-child { grid-column: 1 / -1; }

    .cs-flow { grid-template-columns: 1fr; }
    .cs-flow-label,
    .cs-flow-img { grid-column: 1 / -1; }

    .cs-diagram--col6 { grid-template-columns: 1fr; }
    .cs-diagram--col6 .cs-diagram-label,
    .cs-diagram--col6 .cs-fig { grid-column: 1 / -1; }

    .cs-note { grid-template-columns: 1fr; row-gap: 16px; }
    .cs-note-label,
    .cs-note-body,
    .cs-note--flip .cs-note-label,
    .cs-note--flip .cs-note-body { grid-column: 1 / -1; }
    .cs-note--flip .cs-note-label { text-align: left; }
    .cs-note-text { text-indent: 0; }

    /* Stacked squares now use the same 32px rhythm as the staggered media
       pair (.cs-stagger), which is the reference for two-image patterns.
       Was 4px — the desktop column gutter, which read as a seam once the
       items sat one above the other. */
    .cs-squares { grid-template-columns: 1fr; row-gap: 32px; }
    .cs-squares-item:first-child,
    .cs-squares-item:last-child { grid-column: 1 / -1; }

    /* Image → its own caption: tight enough that the pair still reads as one
       block against the 32px gap separating the blocks. Unified across pages
       (was 6px on natwest, 12px on specsavers). */
    .cs-fig-caption,
    .cs-fig-caption--wide {
        margin-top: 16px;
    }

    .cs-diagram .cs-fig { aspect-ratio: 4 / 3; }
}

/* ============================================
   SUBTLE IMAGE DRIFT (scroll parallax)
   ============================================ */
[data-drift] {
    will-change: transform;
}

/* ============================================
   SCROLL REVEAL — charts only (body text static)
   ============================================ */
.cs-reveal {
    opacity: 0;
    transform: translateY(16px);
    transition: opacity 0.6s var(--ease-out-expo), transform 0.6s var(--ease-out-expo);
}

.cs-reveal.visible {
    opacity: 1;
    transform: translateY(0);
}

/* ============================================
   RESPONSIVE — content components
   ============================================ */
@media (max-width: 1024px) {
    .cs-findings { grid-template-columns: 1fr; }
    .cs-map-row  { grid-template-columns: 160px 1fr; }
}

/* ============================================
   REDUCED MOTION
   (mirrors the .hiw accordion pattern in about.css)
   ============================================ */
@media (prefers-reduced-motion: reduce) {
    /* Page-entry choreography renders in its end state */
    .cs-page #cs-hero-image img,
    .cs-page #cs-hero-image .cs-hero-image-placeholder,
    .cs-page .cs-hero-num,
    .cs-page .cs-hero-title,
    .cs-page .cs-meta,
    .cs-page .navbar,
    .cs-wip::before {
        animation: none;
    }

    /* Scroll-linked motion walls + parallax drift stay put
       (case-study.js also skips binding their scroll listeners) */
    .cs-wall-row,
    [data-drift] {
        transform: none !important;
    }

    /* Reveals and bar fills appear without transition */
    .cs-reveal {
        opacity: 1;
        transform: none;
        transition: none;
    }

    .cs-bar-fill {
        transition: none;
        width: var(--w);
    }

    .cs-next-image-wrap img,
    .cs-next-image-placeholder {
        transition: none;
    }
}

@media (max-width: 768px) {
    .cs-arc { grid-template-columns: 1fr; }

    .cs-arc-stage { padding: 20px 0; }

    .cs-arc-stage::after {
        content: '\2193';
        top: auto;
        bottom: 2px;
        right: auto;
        left: 0;
    }

    .cs-arc-stage:last-child::after { content: none; }

    .cs-quote-row {
        grid-template-columns: 1fr;
        gap: 20px;
        margin-top: 44px;
    }

    .cs-pair,
    .cs-pair--flip { grid-template-columns: 1fr; }

    .cs-map-row { grid-template-columns: 1fr; gap: 8px; }

    .cs-list-item { grid-template-columns: 36px 1fr; }

    .cs-wall-row .cs-phone { width: clamp(110px, 26vw, 160px); }
}