/* ============================================================
   Case Study — Main wrapper
   Adds white gap between fixed nav and hero banner,
   matching the 43px carousel offset on the homepage.
   ============================================================ */
.cs-main {
    padding-top: calc(var(--nav-height) + var(--nav-offset) + 43px);
    background-color: var(--color-white);
}

/* ============================================================
   Case Study — Hero banner (full-width, image background)
   ============================================================ */
.cs-hero {
    position: relative;
    width: 100%;
    min-height: 520px;
    background-color: var(--color-dark-blue); /* fallback if hero image fails to load */
    background-size: cover;
    background-position: center;
    display: flex;
    align-items: flex-end;
}

/* Dark overlay */
.cs-hero::after {
    content: '';
    position: absolute;
    inset: 0;
    background: rgba(10, 20, 40, 0.62);
    z-index: 0;
}

.cs-hero-inner {
    position: relative;
    width: 60%;
    margin: 0 auto;
    padding: 64px 0 80px;
    z-index: 1;
}

/* Hero text colours — white on dark */
.cs-hero .cs-category     { color: rgba(255, 255, 255, 0.65); }
.cs-hero .cs-title        { color: var(--color-white); }
.cs-hero .cs-subtitle     { color: rgba(255, 255, 255, 0.85); }
.cs-hero .cs-meta         { color: rgba(255, 255, 255, 0.6); }
.cs-hero .cs-award        { border-color: rgba(255, 255, 255, 0.25); background-color: rgba(255, 255, 255, 0.08); margin-top: 32px; }
.cs-hero .cs-award-text   { color: var(--color-white); }
.cs-hero .cs-award-text span { color: rgba(255, 255, 255, 0.6); }
.cs-hero .cs-img-placeholder { background-color: rgba(255, 255, 255, 0.15); }

/* ============================================================
   Case Study — Grid layout (content sections)
   ============================================================ */
.cs-grid {
    display: grid;
    grid-template-columns: 35% 65%;
    background-color: var(--color-light-grey);
}

.cs-left {
    background-color: var(--color-white);
    padding: 60px 40px 60px 32px;
}

.cs-right {
    background-color: var(--color-white);
    padding: 60px 32px 60px 40px;
}

/* Subtle divider between sections */
.cs-section .cs-left,
.cs-section .cs-right {
    border-top: 1px solid var(--color-light-grey);
}

/* ============================================================
   Case Study — Full-width callout block
   ============================================================ */
.cs-callout {
    background-color: var(--color-dark-blue);
    width: 100%;
    padding: 72px 0;
}

.cs-callout-inner {
    width: 60%;
    margin: 0 auto;
}

/* ============================================================
   Case Study — Callout variant: full-width 50-50 split
   Grid sits directly on the callout div itself so the dark-blue
   background is never separated from the layout columns.
   Left column = image; right column = text with its own padding.
   ============================================================ */
.cs-callout--split {
    display: grid;
    grid-template-columns: 1fr 1fr;
    padding: 0;        /* override default 72px 0 padding */
    align-items: stretch;
    gap: 0;
}

/* Image column */
.cs-callout--split .cs-callout-img {
    background-color: var(--color-dark-blue);
    min-height: 440px;
    overflow: hidden;
}

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

/* Text column: explicit background + own padding */
.cs-callout-text {
    background-color: var(--color-dark-blue);
    padding: 64px 10% 64px 7%;
}

/* ============================================================
   Case Study — Intro / category typography
   ============================================================ */
.cs-category {
    display: block;
    font-size: 11px;
    font-weight: 400;
    text-transform: uppercase;
    letter-spacing: 0.12em;
    color: var(--color-light-blue);
    line-height: 1.2;
    margin-bottom: 20px;
}

.cs-title {
    font-size: clamp(2rem, 4vw, 3.25rem);
    font-weight: 700;
    color: var(--color-dark-blue);
    line-height: 1.05;
    letter-spacing: -0.02em;
    margin-bottom: 16px;
}

.cs-subtitle {
    font-size: clamp(1rem, 1.4vw, 1.15rem);
    font-weight: 400;
    color: var(--color-light-blue);
    line-height: 1.2;
    margin-bottom: 20px;
}

.cs-meta {
    font-size: 0.875rem;
    color: var(--color-mid-grey);
    line-height: 1.2;
    margin-bottom: 4px;
}

/* ============================================================
   Case Study — Award block (Camp PwC only)
   ============================================================ */
.cs-award {
    display: inline-flex;
    align-items: flex-start;
    gap: 16px;
    padding: 16px;
    border: 1px solid var(--color-light-grey);
}

.cs-award-text {
    font-size: 1rem;
    font-weight: 700;
    color: var(--color-near-black);
    line-height: 1.2;
}

.cs-award-text span {
    display: block;
    font-weight: 400;
    color: var(--color-mid-grey);
    margin-top: 2px;
}

/* ============================================================
   Case Study — Section typography
   ============================================================ */
.cs-section-title {
    font-size: clamp(1.6rem, 2.5vw, 2.1rem);
    font-weight: 700;
    color: var(--color-dark-blue);
    line-height: 1.05;
    letter-spacing: -0.02em;
    margin-bottom: 10px;
}

.cs-section-subtitle {
    font-size: 1.1875rem;
    font-weight: 400;
    color: var(--color-light-blue);
    line-height: 1.2;
    margin-bottom: 32px;
}

/* Lead paragraph — first paragraph in each section */
.cs-body-lead {
    font-size: 1.1875rem;
    color: var(--color-near-black);
    line-height: 1.2;
    margin-bottom: 28px;
}

/* Standard body text */
.cs-body {
    font-size: 0.9375rem;
    color: var(--color-near-black);
    line-height: 1.2;
    margin-bottom: 24px;
}

.cs-detail {
    font-size: 0.9375rem;
    color: var(--color-near-black);
    line-height: 1.2;
    margin-bottom: 12px;
}

.cs-detail strong {
    font-weight: 700;
}

.cs-subhead {
    font-size: 1.1875rem;
    font-weight: 700;
    color: var(--color-near-black);
    margin-top: 24px;
    margin-bottom: 10px;
}

.cs-bullets {
    list-style: disc;
    padding-left: 20px;
    margin-bottom: 8px;
}

.cs-bullets li {
    font-size: 0.9375rem;
    color: var(--color-near-black);
    line-height: 1.2;
    margin-bottom: 8px;
}

.cs-bullets li strong {
    font-weight: 700;
}

.cs-caption {
    font-size: 0.75rem;
    color: var(--color-mid-grey);
    line-height: 1.2;
    font-style: italic;
    margin-top: 12px;
}

/* ============================================================
   Case Study — Image placeholders and real images
   Images always crop to fill — never stretch or squash.
   ============================================================ */
.cs-img-placeholder {
    background-color: var(--color-light-grey);
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 0.7rem;
    color: var(--color-mid-grey);
    text-align: center;
    width: 100%;
    overflow: hidden;
}

/* When <img> replaces or sits inside a placeholder,
   it fills the container and crops — never distorts. */
.cs-img-placeholder img {
    width: 100%;
    height: 100%;
    object-fit: cover;
    display: block;
}

/* Natural-size images — auto height, full image visible, no crop */
.cs-img-natural {
    height: auto !important;
    aspect-ratio: unset !important;
}
.cs-img-natural img {
    height: auto !important;
    object-fit: contain;
    object-position: center;
}

/* Execution mockup images — fixed equal height, full image visible */
.cs-exec-image {
    height: 280px;
}
.cs-exec-image img {
    object-fit: contain;
    object-position: center;
}

/* Right collage column — show full image, no side cropping */
.cs-collage-right img {
    object-fit: contain;
    object-position: center;
}

.cs-img-full    { aspect-ratio: 3 / 2; }
.cs-img-portrait { aspect-ratio: 3 / 4; }
.cs-img-strip   { aspect-ratio: 10 / 3; }
.cs-img-square  { aspect-ratio: 1; }

/* ============================================================
   Case Study — Visual groups (right column labels)
   ============================================================ */
.cs-visual-group {
    margin-bottom: 28px;
}

.cs-visual-group:last-child {
    margin-bottom: 0;
}

.cs-visual-label {
    display: block;
    font-size: 11px;
    font-weight: 400;
    text-transform: uppercase;
    letter-spacing: 0.12em;
    color: var(--color-mid-grey);
    line-height: 1.2;
    margin-bottom: 6px;
}

.cs-visual-subhead {
    font-size: 0.875rem;
    font-weight: 700;
    color: var(--color-near-black);
    line-height: 1.2;
    margin-bottom: 18px;
}

/* ============================================================
   Case Study — Colour swatches
   ============================================================ */
.cs-swatches {
    display: flex;
    flex-wrap: wrap;
    gap: 8px;
}

.cs-swatch {
    width: 44px;
    height: 44px;
    border-radius: 2px;
}

/* ============================================================
   Case Study — Setting Up Camp collage (2-col)
   ============================================================ */
.cs-collage {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 8px;
    align-items: stretch;
}

.cs-collage-left .cs-img-placeholder {
    height: 100%;
    aspect-ratio: unset;
    min-height: 480px;
}

/* Signpost shows full image without side cropping */
.cs-collage-left img {
    object-fit: contain;
    object-position: center;
}

.cs-collage-right {
    display: flex;
    flex-direction: column;
    gap: 8px;
}

.cs-collage-right .cs-img-placeholder {
    width: 100%;
}

/* ============================================================
   Case Study — Split-pair: two half-images side-by-side, no gap
   Stacks vertically on mobile.
   ============================================================ */
.cs-split-pair {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 0;
}

.cs-split-pair img {
    width: 100%;
    height: auto;
    display: block;
}

/* ============================================================
   Case Study — Earning Our Badges photo grid
   ============================================================ */
.cs-photo-grid {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 8px;
    overflow: hidden;
}

/* Prevent grid items from overflowing their track */
.cs-photo-grid > * {
    min-width: 0;
}

.cs-photo-grid-full {
    grid-column: 1 / -1;
}

/* ============================================================
   Case Study — Execution delivery grid
   2/3 + 1/3 top row, 1/2 + 1/2 bottom row, equal image heights
   ============================================================ */
.cs-exec-grid {
    display: grid;
    grid-template-columns: repeat(6, 1fr);
    gap: 16px;
}

.cs-exec-grid .cs-img-placeholder {
    aspect-ratio: unset;
    height: 280px;
    width: 100%;
    background-color: #ffffff;
}

.cs-exec-grid .cs-img-placeholder img {
    object-fit: contain;
    object-position: center;
}

/* ============================================================
   Case Study — Callout block typography
   ============================================================ */
.cs-callout-title {
    font-size: 1.1rem;
    font-weight: 700;
    color: var(--color-white);
    line-height: 1.2;
    margin-bottom: 20px;
}

/* 3-column layout inside a full-width callout block */
.cs-callout-cols {
    display: grid;
    grid-template-columns: 2fr 2fr 1fr;
    gap: 40px;
    align-items: start;
}

.cs-callout-label {
    font-size: 0.8125rem;
    font-weight: 700;
    color: var(--color-white);
    line-height: 1.2;
    margin-top: 20px;
    margin-bottom: 8px;
}

.cs-callout-body {
    font-size: 0.875rem;
    color: rgba(255, 255, 255, 0.85);
    line-height: 1.2;
    margin-bottom: 10px;
}

.cs-callout-body strong {
    color: var(--color-white);
}

.cs-callout-bullets {
    list-style: disc;
    padding-left: 20px;
    margin-bottom: 8px;
}

.cs-callout-bullets li {
    font-size: 0.875rem;
    color: rgba(255, 255, 255, 0.85);
    line-height: 1.2;
    margin-bottom: 8px;
}

.cs-callout-result {
    font-size: 0.875rem;
    color: var(--color-white);
    line-height: 1.2;
    border-top: 1px solid rgba(255, 255, 255, 0.2);
    padding-top: 20px;
    margin-top: 24px;
}

.cs-callout-result strong {
    font-weight: 700;
}

/* ============================================================
   Case Study — Sidebar callout (dark box within a column)
   Used for in-column process/innovation callouts e.g. Trust Roadmap
   ============================================================ */
.cs-sidebar-callout {
    background-color: var(--color-dark-blue);
    padding: 24px;
    margin-top: 8px;
}

.cs-sidebar-callout-title {
    font-size: 1rem;
    font-weight: 700;
    color: #ffffff;
    line-height: 1.3;
    margin-bottom: 12px;
}

.cs-sidebar-callout-body {
    font-size: 0.875rem;
    color: rgba(255, 255, 255, 0.85);
    line-height: 1.6;
    margin: 0;
}

/* ============================================================
   Case Study — Photo row grid (e.g. Office Refresh before/after)
   ============================================================ */
.cs-photo-row {
    display: grid;
    grid-template-columns: repeat(4, 1fr);
    gap: 6px;
    margin-top: 8px;
    margin-bottom: 24px;
}

.cs-photo-row-3 {
    grid-template-columns: repeat(3, 1fr);
}

/* ============================================================
   Case Study — Element category grid (3 equal columns)
   Used for Office Refresh PwC Canada elements
   ============================================================ */
.cs-element-grid {
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    gap: 20px;
    margin-top: 8px;
}

.cs-element-col-title {
    font-size: 0.9375rem;
    font-weight: 700;
    color: var(--color-near-black);
    margin-bottom: 4px;
}

.cs-element-col-subtitle {
    font-size: 0.8125rem;
    color: var(--color-mid-grey);
    margin-bottom: 10px;
    line-height: 1.3;
}

/* ============================================================
   Case Study — Footnote
   ============================================================ */
.cs-footnote {
    font-size: 0.8125rem;
    color: var(--color-mid-grey);
    line-height: 1.5;
    border-top: 1px solid var(--color-light-grey);
    padding-top: 16px;
    margin-top: 24px;
}

/* ============================================================
   Case Study — Hero award line
   ============================================================ */
.cs-hero-award {
    display: inline-block;
    font-size: 0.8125rem;
    color: rgba(255, 255, 255, 0.85);
    margin-top: 12px;
}

/* ============================================================
   Case Study — Stat block (top of results section)
   ============================================================ */
.cs-stats {
    margin-bottom: 40px;
    padding: 24px;
    border: 1px solid var(--color-light-blue);
}

/* Default: 3-column grid (most case studies) */
.cs-stat-grid {
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    gap: 24px;
    margin-bottom: 28px;
}

/* 7-column variant (Consumer Insights) —
   Stat 1: 2/7, Stat 2: 2/7, Stat 3: 3/7
   Uses flex so proportions are maintained without grid column overflow. */
.cs-stat-grid--7col {
    display: flex;
    gap: 16px;
}

.cs-stat-grid--7col .cs-stat:nth-child(1) { flex: 2 1 0; min-width: 0; }
.cs-stat-grid--7col .cs-stat:nth-child(2) { flex: 2 1 0; min-width: 0; }
.cs-stat-grid--7col .cs-stat:nth-child(3) { flex: 3 1 0; min-width: 0; }

/* Split-paragraph stat (stat 3 — "Fully bilingual" / "AODA compliant") */
.cs-stat-split p {
    font-size: 1rem;
    font-weight: 400;
    color: var(--color-light-blue);
    line-height: 1.2;
    margin: 0;
}

.cs-stat-split p + p {
    margin-top: 0.3em;
}

.cs-stat-split p strong {
    font-weight: 700;
    color: var(--color-light-blue);
}

/* 2-column variant (Camp PwC) —
   Two explicit rows so icon and number share row 1,
   both labels share row 2, and tops align automatically. */
.cs-stat-grid--2 {
    grid-template-columns: repeat(2, 1fr);
    grid-template-rows: auto auto;
    column-gap: 24px;
    row-gap: 0;
}

/* Dissolve the cell wrappers into the parent grid */
.cs-stat-grid--2 .cs-stat {
    display: contents;
}

/* Col 1: award icon (row 1) + its label (row 2) */
.cs-stat-grid--2 .cs-stat:nth-child(1) > :first-child {
    grid-area: 1 / 1;
    align-self: start;
    justify-self: start; /* left-align the icon */
}
.cs-stat-grid--2 .cs-stat:nth-child(1) > :last-child {
    grid-area: 2 / 1;
    align-self: start;
}

/* Col 2: stat number (row 1) + its label (row 2) */
.cs-stat-grid--2 .cs-stat:nth-child(2) > :first-child {
    grid-area: 1 / 2;
    align-self: start;
}
.cs-stat-grid--2 .cs-stat:nth-child(2) > :last-child {
    grid-area: 2 / 2;
    align-self: start;
}

/* ============================================================
   Case Study — 2+1 stat grid: two stats per row, third full-width
   Applied at all viewport sizes (not just mobile)
   ============================================================ */
.cs-stat-grid--2-plus-1 {
    grid-template-columns: repeat(2, 1fr);
}

.cs-stat-grid--2-plus-1 .cs-stat:last-child {
    grid-column: 1 / -1;
}

.cs-stat-icon {
    height: 56px;
    width: auto;
    display: block;
}

.cs-stat-number {
    display: block;
    font-size: clamp(2.5rem, 4vw, 3.5rem);
    font-weight: 700;
    color: var(--color-light-blue);
    line-height: 1;
}

.cs-stat-label {
    display: block;
    font-size: 1rem;
    color: var(--color-light-blue);
    line-height: 1.2;
}

/* Mixed-weight text stat (no large number — e.g. "On time / On brand") */
.cs-stat-text {
    font-size: 1rem;
    font-weight: 400;
    color: var(--color-light-blue);
    line-height: 1.2;
    margin: 0;
}

.cs-stat-text strong {
    font-weight: 700;
    color: var(--color-light-blue);
}

/* ============================================================
   Case Study — Quote block (inline mark)
   ============================================================ */
.cs-quote-block {
    display: flex;
    align-items: flex-start;
    gap: 12px;
}

.cs-quote-mark {
    height: 38px;
    width: auto;
    flex-shrink: 0;
    display: block;
}

.cs-quote-content {
    flex: 1;
}

.cs-quote-text {
    font-size: 1rem;
    font-weight: 700;
    color: var(--color-light-blue);
    line-height: 1.2;
    margin-bottom: 4px;
}

.cs-quote-attribution {
    font-size: 0.8125rem;
    color: var(--color-light-blue);
    line-height: 1.2;
}

/* ============================================================
   Case Study — CTA button
   ============================================================ */
.cs-cta {
    display: inline-block;
    margin-top: 40px;
    padding: 14px 24px;
    font-size: 0.875rem;
    font-weight: 700;
    color: var(--color-white);
    background-color: var(--color-light-blue);
    line-height: 1.2;
    text-align: left;
    transition: background-color 0.2s ease;
}

.cs-cta:hover {
    background-color: var(--color-dark-blue);
    color: var(--color-white);
}

.cs-cta:focus-visible {
    outline: 2px solid var(--color-dark-blue);
    outline-offset: 3px;
}

/* ============================================================
   Case Study — Translations grid
   Left col: conference theme in serif display; right 2 cols: language translations
   ============================================================ */
.cs-translations-grid {
    display: grid;
    grid-template-columns: 1.15fr 1fr 1fr;
    gap: 24px;
    margin-top: 12px;
    padding-top: 16px;
    border-top: 1px solid var(--color-light-grey);
}

/* Small event label above display text */
.cs-translations-event {
    font-family: 'Helvetica Neue', Helvetica, Arial, sans-serif;
    font-size: 0.75rem;
    font-weight: 400;
    color: var(--color-mid-grey);
    display: block;
    margin-bottom: 12px;
    line-height: 1.3;
}

/* Large serif display text: "Connect. Elevate. Inspire." */
.cs-translations-display {
    font-family: 'ITC Charter', Georgia, 'Times New Roman', serif;
    font-size: clamp(2rem, 2.8vw, 2.8rem);
    font-weight: 400;
    color: var(--color-near-black);
    line-height: 1.1;
    margin: 0;
}

/* Language column headers (Ucwalmícwts / Sḵwx̱wú7mesh) */
.cs-translations-lang {
    font-family: 'Helvetica Neue', Helvetica, Arial, sans-serif;
    font-size: 0.875rem;
    font-weight: 400;
    color: var(--color-near-black);
    display: block;
    margin-bottom: 14px;
    padding-bottom: 10px;
    border-bottom: 1px solid var(--color-light-grey);
    text-transform: none;
    letter-spacing: 0;
}

/* Native-language phrase (bold) */
.cs-translations-phrase {
    font-family: 'Helvetica Neue', Helvetica, Arial, sans-serif;
    font-size: 0.9375rem;
    font-weight: 700;
    color: var(--color-near-black);
    line-height: 1.3;
    display: block;
    margin-bottom: 2px;
}

/* English meaning below native phrase */
.cs-translations-meaning {
    font-family: 'Helvetica Neue', Helvetica, Arial, sans-serif;
    font-size: 0.875rem;
    font-weight: 400;
    color: var(--color-near-black);
    line-height: 1.4;
    display: block;
    margin-bottom: 14px;
}

/* ============================================================
   Case Study — Venue caption (challenge grid labels)
   ============================================================ */
.cs-venue-caption {
    font-size: 0.75rem;
    color: var(--color-mid-grey);
    text-align: center;
    margin-top: 6px;
    line-height: 1.2;
}

/* ============================================================
   Case Study — Responsive: tablet (≤ 960px)
   ============================================================ */
@media (max-width: 960px) {
    .cs-main {
        padding-top: calc(var(--nav-height) + var(--nav-offset));
    }

    .cs-hero-inner {
        width: 88%;
    }

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

    .cs-left,
    .cs-right {
        padding: 40px 32px;
    }

    .cs-callout-inner {
        width: 88%;
    }

    .cs-stat-grid {
        grid-template-columns: repeat(3, 1fr);
    }

    .cs-stat-grid--7col {
        gap: 16px;
    }

    .cs-stat-grid--2 {
        grid-template-columns: repeat(2, 1fr);
    }

    .cs-callout--split {
        grid-template-columns: 1fr;
    }

    .cs-callout--split .cs-callout-img {
        min-height: 280px;
    }

    .cs-callout-text {
        padding: 48px 6%;
    }

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

/* ============================================================
   Case Study — Responsive: mobile (≤ 600px)
   ============================================================ */
@media (max-width: 600px) {
    .cs-main {
        padding-top: calc(var(--nav-height) + var(--nav-offset));
    }

    .cs-hero {
        min-height: 400px;
    }

    .cs-hero-inner {
        width: 100%;
        padding: 40px 20px 56px;
    }

    /* Awards — stack vertically on mobile */
    .cs-hero .cs-award {
        flex-direction: column;
        gap: 8px;
    }

    .cs-left,
    .cs-right {
        padding: 32px 20px;
    }

    .cs-callout {
        padding: 48px 0;
    }

    .cs-callout-inner {
        width: 100%;
        padding: 0 20px;
    }

    .cs-stat-grid {
        grid-template-columns: 1fr 1fr;
        gap: 20px;
    }

    /* Third stat spans full width on mobile */
    .cs-stat-grid .cs-stat:last-child {
        grid-column: 1 / -1;
    }

    .cs-stat-grid--7col {
        flex-wrap: wrap;
        gap: 16px;
    }

    .cs-stat-grid--7col .cs-stat:nth-child(1),
    .cs-stat-grid--7col .cs-stat:nth-child(2),
    .cs-stat-grid--7col .cs-stat:nth-child(3) {
        flex: 1 1 auto;
    }

    .cs-stat-grid--2 {
        grid-template-columns: 1fr 1fr;
        column-gap: 20px;
        row-gap: 0;
    }

    .cs-stat-icon {
        height: 64px;
    }

    .cs-stat-number {
        font-size: 3.5rem;
    }

    .cs-collage-left .cs-img-placeholder {
        height: auto;
        min-height: unset;
        aspect-ratio: 2 / 3;
    }

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

    .cs-photo-grid-full {
        grid-column: auto;
    }

    /* Execution grid — single column, full-width stacking */
    .cs-exec-grid {
        grid-template-columns: 1fr;
        gap: 20px;
    }

    /* Override all inline span styles so every item goes full-width */
    .cs-exec-grid > div {
        grid-column: 1 / -1 !important;
    }

    /* Uniform image height, slightly reduced for mobile */
    .cs-exec-grid .cs-img-placeholder {
        height: 220px;
    }

    /* PDF is visually heavier at full width — reduce by ~20% */
    .cs-exec-grid > div:nth-child(2) .cs-img-placeholder {
        height: 175px;
    }

    /* Callout 3-col grid — stack on mobile */
    .cs-callout-cols {
        grid-template-columns: 1fr;
        gap: 24px;
    }

    /* Third stat — collapse to single line on mobile */
    .cs-stat-split {
        display: block;
    }

    .cs-stat-split p {
        display: inline;
        line-height: 1.5;
    }

    .cs-stat-split p + p::before {
        content: " | ";
        font-weight: 400;
        color: var(--color-light-blue);
    }

    /* 4-col photo rows — drop to 2 columns on mobile */
    .cs-photo-row {
        grid-template-columns: repeat(2, 1fr);
    }

    /* Split-pair — stack on mobile */
    .cs-split-pair {
        grid-template-columns: 1fr;
    }

    /* Office elements — stack columns on mobile */
    .cs-office-elements {
        grid-template-columns: 1fr !important;
    }

    /* Translations — stack all three columns on mobile */
    .cs-translations-grid {
        grid-template-columns: 1fr;
    }

    .cs-translations-display {
        font-size: 2.25rem;
    }

    .cs-callout-text {
        padding: 40px 20px;
    }
}

/* ============================================================
   Case Study — Reduced motion
   ============================================================ */
@media (prefers-reduced-motion: reduce) {
    .cs-cta {
        transition: none;
    }
}