/* ============================================
   Case Study — shared layout for project pages
   Depends on landing.css for tokens (Poppins, colors, buttons).
   ============================================ */

:root {
    --cs-bg: #FAFAF9;
    --cs-alt: #F5F4F0;
    --cs-cards-bg: #F4F2EE;          /* slightly deeper crema for cards section (lifts white cards) */
    --cs-ink: #111827;
    --cs-muted: #4B5563;
    --cs-soft: #6B7280;
    --cs-line: rgba(17, 24, 39, 0.08);
    --cs-orange: #F97316;
    --cs-orange-tint: #FFEDD5;
    --cs-radius: 20px;
}

/* ============================================
   Reusable image containers (#4)
   .cs-screen   -> product screens (no phone frame, fixed 9:19.5 ratio)
   .cs-artifact -> research artifacts (CJM, SWOT, matrices)
   ============================================ */
.cs-screen {
    aspect-ratio: 9 / 19.5;
    border-radius: 24px;
    overflow: hidden;
    box-shadow: 0 20px 60px rgba(17, 24, 39, 0.12);
    background: #000;
    width: 100%;
    height: auto;
    display: block;
    object-fit: cover;
    object-position: top center;
}

/* When .cs-screen is used as a wrapper around an <img>, the inner img fills it. */
.cs-screen > img,
.cs-screen > picture > img {
    width: 100%;
    height: 100%;
    display: block;
    object-fit: cover;
    object-position: top center;
}

.cs-artifact {
    border-radius: 12px;
    overflow: hidden;
    box-shadow: 0 12px 40px rgba(17, 24, 39, 0.08);
    background: #FFFFFF;
    display: block;
    width: 100%;
}

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

.cs-page {
    padding-top: 72px; /* clear fixed navbar */
    background-color: var(--cs-bg);
    color: var(--cs-ink);
}

/* Screen-reader-only utility (a11y helper for hidden labels) */
.sr-only {
    position: absolute;
    width: 1px; height: 1px;
    padding: 0; margin: -1px;
    overflow: hidden;
    clip: rect(0, 0, 0, 0);
    white-space: nowrap;
    border: 0;
}

/* Case study has no .wave-transition, so reset the pull-up margin that
   #contact.footer inherits from landing.css (that negative margin is meant
   to overlap the wave tail on the landing only). */
.cs-page #contact.footer {
    margin-top: 0;
}

/* Container system unified with the landing (.container in landing.css):
   max-width 1350px, padding 45/32/20 per breakpoint.
   Case study HTML now uses the same .container class for consistency. */

/* ============================================
   Hero — Reusable 58/42 template  (TEMPLATE)
   --------------------------------------------
   Structure:
     .cs-hero (overflow-x clipped for bleed)
       .cs-container
         .cs-hero-inner                -> grid 58fr / 42fr
           .cs-hero-text               -> LEFT: breadcrumbs, H1, lead
           .cs-hero-visual             -> RIGHT: image stage host
             .cs-hero-images           -> fixed-width stack (predictable overlap)
               .cs-hero-img--primary   -> rotated -3, left-anchored
               .cs-hero-img--secondary -> rotated +4, right bleed past viewport
   --------------------------------------------
   Overlap is fixed (18%) via a fixed .cs-hero-images width.
   Bleed is calc'd dynamically so the secondary always ends
   exactly 35% of its width past the viewport's right edge.
   ============================================ */
.cs-hero {
    --cs-container-pad: 45px;                  /* mirrors landing .container padding per breakpoint */
    position: relative;
    overflow-x: clip;                          /* clips the secondary's bleed past vp */
    padding: clamp(40px, 6vw, 72px) 0 clamp(32px, 4vw, 56px);
}

.cs-hero-inner {
    display: grid;
    grid-template-columns: minmax(0, 60fr) minmax(0, 40fr);
    gap: clamp(32px, 5vw, 72px);
    align-items: center;
    min-height: min(84vh, 780px);
}

/* --- LEFT column ---
   `min-width: 0` is critical: without it, a wide child (e.g. a long word
   or non-breaking string) can stretch the column past its `60fr` share. */
.cs-hero-text {
    text-align: left;
    max-width: 720px;
    min-width: 0;
}

/* Breadcrumbs — orange, small caps, generous tracking */
.cs-eyebrow {
    display: inline-block;
    margin: 0 0 28px;
    font-size: 13px;
    font-weight: 600;
    letter-spacing: 0.15em;
    text-transform: uppercase;
    color: var(--cs-orange);
}

/* Hero h1 of case studies uses 80px (not 96px like the landing) — case studies tell stories, landing sells. */
.cs-hero h1 {
    font-size: clamp(40px, 7vw, 80px);
    font-weight: 700;
    line-height: 1.1;
    letter-spacing: -0.02em;
    color: var(--cs-ink);
    text-wrap: balance;
}

/* Same typeface as H1 — only italic + orange (signature, mirrors landing) */
.cs-hero h1 em {
    font-style: italic;
    font-weight: inherit;
    color: var(--cs-orange);
}

/* Single-line subtitle: regular weight, navy at 70% opacity */
.cs-hero-lead {
    margin-top: 28px;
    max-width: 60ch;
    font-size: clamp(18px, 1.6vw, 24px);
    font-weight: 400;
    color: rgba(17, 24, 39, 0.7);
    line-height: 1.45;
}

/* --- RIGHT column: positioning context for the image stage ---
   `min-width: 0` keeps the column honest about its 40fr share.
   `aspect-ratio` gives the visual its own height without magic numbers, so the
   absolute children below have a predictable canvas to anchor against. */
.cs-hero-visual {
    position: relative;
    width: 100%;
    min-width: 0;
    aspect-ratio: 4 / 5;
}

/* Image stage is now just a passthrough layer that fills .cs-hero-visual.
   No fixed width / no horizontal transform — the mockups themselves use
   percentage widths so they always stay inside the column. */
.cs-hero-images {
    position: absolute;
    inset: 0;
}

/* Mockup container. Each card is 55% of the column width (capped at 280px
   on very wide viewports). Anchoring one to `left: 0` and the other to
   `right: 0` makes them sum to 110%, producing a 10% overlap in the
   middle of the column \u2014 the editorial superposition. */
.cs-hero-img {
    position: absolute;
    display: block;
    width: 55%;
    max-width: 280px;
    aspect-ratio: 300 / 600;
    border-radius: 28px;
    overflow: hidden;
    background-color: transparent;
    box-shadow: 0 20px 60px rgba(17, 24, 39, 0.12);
    isolation: isolate;
}

.cs-hero-img > img {
    display: block;
    width: 100%;
    height: 100%;
    object-fit: cover;
    object-position: top center;
    transition: filter 300ms ease;
}

.cs-hero-img:hover > img { filter: saturate(1.05); }

/* Back card (nth-child(1) inside .cs-hero-images): \u20134\u00b0, anchored to
   the LEFT edge of the column so it shows clearly from the left. */
.cs-hero-img--primary {
    top: 5%;
    left: 0;
    right: auto;
    z-index: 1;
    transform: rotate(-4deg);
}

/* Front card (nth-child(2)): +2\u00b0, anchored to the RIGHT edge.
   Sits 10% lower than the back card for a diagonal rhythm. */
.cs-hero-img--secondary {
    top: 15%;
    right: 0;
    left: auto;
    z-index: 2;
    transform: rotate(2deg);
}

/* ============================================
   NARRATIVE BLOCK (Challenge / Solution)
   Vertical narrative with pull quote, outcomes list and integrated
   metrics. Split into two sibling sections: Challenge sits on the
   default cream, Solution on a slightly deeper cream. The colour
   change is the only seam between them — no divider element.
   ============================================ */
.cs-narrative {
    padding: clamp(56px, 9vw, 120px) 0;
    background-color: var(--cs-cards-bg);
}

/* Tighten bottom of Challenge / top of Solution so the seam reads as
   one continuous bookend, not two stacked sections with their own air. */
.cs-narrative--challenge-section {
    padding: clamp(56px, 9vw, 120px) 0 clamp(40px, 6vw, 80px);
}

.cs-narrative--solution-section {
    padding: clamp(40px, 6vw, 80px) 0 clamp(56px, 9vw, 120px);
    background-color: #ECE8E0;
}

.cs-narrative-eyebrow {
    font-size: 13px;
    font-weight: 700;
    letter-spacing: 0.15em;
    text-transform: uppercase;
    color: var(--cs-orange);
    margin: 0 0 24px;
}

.cs-narrative-quote {
    font-size: clamp(28px, 4vw, 40px);
    font-weight: 700;
    line-height: 1.2;
    letter-spacing: -0.01em;
    color: var(--cs-ink);
    margin: 0 0 28px;
    padding: 0;
    border: none;
    font-style: normal;
}

.cs-narrative-body {
    font-size: 17px;
    line-height: 1.7;
    color: var(--cs-muted);
    margin: 0 0 16px;
}

.cs-narrative-body--lead {
    font-size: 18px;
    color: var(--cs-ink);
    font-weight: 500;
    margin-bottom: 28px;
}

/* Outcomes list with orange checkmarks */
.cs-narrative-outcomes {
    list-style: none;
    padding: 0;
    margin: 0 0 40px;
    display: grid;
    gap: 10px;
}

.cs-narrative-outcomes li {
    position: relative;
    padding-left: 28px;
    font-size: 16px;
    line-height: 1.6;
    color: var(--cs-ink);
    font-weight: 500;
}

.cs-narrative-outcomes li::before {
    content: "✓";
    position: absolute;
    left: 0;
    top: 0;
    color: var(--cs-orange);
    font-weight: 700;
    font-size: 16px;
}

/* Metrics integrated as evidence — same max-content pattern as .cs-meta
   so each tile is only as wide as it needs (keeps "14 → 5" on one line)
   and they all anchor to the left rather than stretching to fill.
   Vertical dividers between tiles are scoped here so they group
   visually inside the narrative block. */
.cs-narrative-metrics {
    display: grid;
    grid-template-columns: repeat(4, max-content);
    gap: 24px;
    justify-content: start;
    margin-top: 40px;
    padding-top: 32px;
    border-top: 1px solid var(--cs-line);
}

/* Reset the global .cs-metric padding and rebuild left-only padding
   so each divider has consistent breathing room. */
.cs-narrative-metrics .cs-metric {
    border-left: 1px solid var(--cs-line);
    padding: 0 0 0 32px;
}

.cs-narrative-metrics .cs-metric:first-child {
    border-left: none;
    padding-left: 0;
}

/* Cap labels so a future long label can't blow up its tile and break
   the row's total width. 200px sits above all current labels' natural
   widths (~170px max) — kicks in only if copy grows. */
.cs-narrative-metrics .cs-metric-label {
    max-width: 200px;
}

@media (max-width: 1280px) {
    .cs-narrative-metrics {
        grid-template-columns: repeat(2, max-content);
        gap: 32px 40px;
    }
    /* 3rd tile starts a new row → it becomes a "first-of-row" visually. */
    .cs-narrative-metrics .cs-metric:nth-child(3) {
        border-left: none;
        padding-left: 0;
    }
}

@media (max-width: 480px) {
    .cs-narrative-metrics {
        grid-template-columns: 1fr;
        gap: 24px;
    }
    .cs-narrative-metrics .cs-metric {
        border-left: none;
        padding-left: 0;
    }
}

/* Meta grid — lives INSIDE the hero left column, below the subtitle.
   3 columns on desktop, 2 columns on tablet, 1 column on mobile.
   No padded background — small caps labels + regular values, sits naturally
   in the text column. */
.cs-meta {
    margin: clamp(36px, 4vw, 48px) 0 0;
    padding: clamp(24px, 3vw, 28px) 0 0;
    border-top: 1px solid var(--cs-line);
    display: grid;
    grid-template-columns: repeat(3, max-content);
    column-gap: 64px;
    row-gap: 24px;
    justify-content: start;
}

.cs-meta > div { min-width: 0; }

.cs-meta dt {
    font-size: 11px;
    font-weight: 600;
    letter-spacing: 0.1em;
    text-transform: uppercase;
    color: var(--cs-soft);
    margin-bottom: 6px;
}

.cs-meta dd {
    font-size: 15px;
    font-weight: 400;
    color: var(--cs-ink);
    line-height: 1.5;
}

/* ============================================
   Sticky index (#3)
   Desktop (>=1024px): vertical sidebar, sticky on left, fixed-width column.
   Tablet  (768-1023px): horizontal bar at top, scroll-snapped, sticky.
   Mobile  (<768px): hidden — FAB triggers a bottom sheet instead.
   ============================================ */

/* Defaults: hide on mobile */
.cs-index {
    display: none;
}

/* Desktop: sticky left rail INSIDE the .cs-page-layout grid, vertically
   centered in the viewport.

   `top: 50vh` + `translateY(-50%)` keeps the sidebar visually pinned to the
   middle of the viewport while it scrolls with its grid column. The fade
   uses a small extra offset on the hidden state \u2014 since `transform` can
   only hold one value at a time, the centering and fade-offset are
   composed into a single `translateY(calc(...))`. Splitting them across
   separate rules would lose the centering.

   z-index: 10 keeps the sidebar above any section that paints a full-width
   background through the breakout trick (sections have z-index: 1).
   Symmetric 400ms ease fade for entry/exit. */
@media (min-width: 1024px) {
    .cs-index {
        display: block;
        position: sticky;
        top: 50vh;
        align-self: start;
        height: max-content;
        max-width: 220px;
        z-index: 10;
        opacity: 0;
        transform: translateY(calc(-50% - 8px));
        pointer-events: none;
        transition: opacity 0.4s ease, transform 0.4s ease;
    }

    .cs-index.is-visible {
        opacity: 1;
        transform: translateY(-50%);
        pointer-events: auto;
    }

    .cs-index-list {
        list-style: none;
        margin: 0;
        padding: 0;
        display: flex;
        flex-direction: column;
        gap: 4px;
    }

    .cs-index-item a {
        display: flex;
        align-items: baseline;
        gap: 14px;
        padding: 10px 14px;
        border-left: 2px solid transparent;
        font-size: 13px;
        line-height: 1.5;
        text-decoration: none;
        color: var(--cs-ink);
        transition: border-color 200ms ease, color 200ms ease;
    }

    .cs-index-num {
        font-size: 12px;
        font-weight: 600;
        color: var(--cs-orange);
        letter-spacing: 0.05em;
        flex-shrink: 0;
    }

    .cs-index-title {
        font-weight: 400;
        color: rgba(17, 24, 39, 0.7);
    }

    /* Active state: orange line + medium weight title */
    .cs-index-item a.is-active {
        border-left-color: var(--cs-orange);
    }

    .cs-index-item a.is-active .cs-index-title {
        color: var(--cs-ink);
        font-weight: 500;
    }

    .cs-index-item a:hover .cs-index-title { color: var(--cs-ink); }
    .cs-index-item a:focus-visible { outline: 2px solid var(--cs-orange); outline-offset: 2px; }
}

/* Tablet: horizontal bar.
   Renders once in its natural position (right after the metrics strip,
   above the content). NOT sticky \u2014 it scrolls away with the page, and the
   FAB takes over as the persistent navigation handle. */
@media (min-width: 768px) and (max-width: 1023px) {
    .cs-index {
        display: block;
        position: static;
        background: rgba(250, 250, 249, 0.92);
        border-bottom: 1px solid var(--cs-line);
        opacity: 0;
        transform: translateY(-8px);
        pointer-events: none;
        /* Symmetric fade: same duration + curve in both directions. */
        transition: opacity 0.4s ease, transform 0.4s ease;
    }

    .cs-index.is-visible {
        opacity: 1;
        transform: translateY(0);
        pointer-events: auto;
    }

    .cs-index-list {
        list-style: none;
        margin: 0;
        padding: 0 clamp(20px, 4vw, 32px);
        display: flex;
        gap: 0;
        overflow-x: auto;
        scrollbar-width: none;
    }

    .cs-index-list::-webkit-scrollbar { display: none; }

    .cs-index-item a {
        display: flex;
        align-items: center;
        gap: 8px;
        padding: 14px 16px;
        border-bottom: 2px solid transparent;
        font-size: 13px;
        white-space: nowrap;
        text-decoration: none;
        color: rgba(17, 24, 39, 0.7);
        transition: color 200ms ease, border-color 200ms ease;
    }

    .cs-index-num {
        font-size: 11px;
        font-weight: 600;
        color: var(--cs-orange);
        letter-spacing: 0.05em;
    }

    .cs-index-item a.is-active {
        border-bottom-color: var(--cs-orange);
        color: var(--cs-ink);
        font-weight: 500;
    }

    .cs-index-item a:focus-visible { outline: 2px solid var(--cs-orange); outline-offset: -2px; }
}

/* Mobile FAB + bottom sheet */
.cs-index-fab,
.cs-index-sheet,
.cs-index-sheet-backdrop {
    display: none;
}

/* FAB + bottom sheet are visible on BOTH tablet and mobile (\u22641023px).
   The horizontal bar lives in its natural DOM position above the content;
   once the user scrolls past it the FAB is the only navigation handle left,
   giving "relevo" (relay) to navigation. */
@media (max-width: 1023px) {
    .cs-index-fab {
        display: flex;
        align-items: center;
        justify-content: center;
        position: fixed;
        bottom: 24px;
        right: 24px;
        z-index: 50;
        width: 56px;
        height: 56px;
        border-radius: 50%;
        border: none;
        background-color: var(--cs-ink);
        color: #FFFFFF;
        box-shadow: 0 8px 24px rgba(17, 24, 39, 0.2);
        cursor: pointer;
        opacity: 0;
        transform: translateY(8px);
        pointer-events: none;
        /* Symmetric fade: matches the desktop / tablet index timing. */
        transition: opacity 0.4s ease, transform 0.4s ease;
    }

    .cs-index-fab.is-visible {
        opacity: 1;
        transform: translateY(0);
        pointer-events: auto;
    }

    .cs-index-fab:focus-visible {
        outline: 2px solid var(--cs-orange);
        outline-offset: 4px;
    }

    .cs-index-sheet-backdrop {
        display: block;
        position: fixed;
        inset: 0;
        z-index: 60;
        background-color: rgba(17, 24, 39, 0.4);
        opacity: 0;
        pointer-events: none;
        transition: opacity 220ms ease;
    }

    .cs-index-sheet-backdrop.is-open {
        opacity: 1;
        pointer-events: auto;
    }

    .cs-index-sheet {
        display: block;
        position: fixed;
        left: 0;
        right: 0;
        bottom: 0;
        z-index: 70;
        max-height: 70vh;
        background-color: var(--cs-bg);
        border-radius: 24px 24px 0 0;
        padding: 32px 24px calc(env(safe-area-inset-bottom, 0px) + 32px);
        box-shadow: 0 -16px 40px rgba(17, 24, 39, 0.18);
        transform: translateY(100%);
        transition: transform 280ms cubic-bezier(0.2, 0.8, 0.2, 1);
        overflow-y: auto;
    }

    .cs-index-sheet.is-open {
        transform: translateY(0);
    }

    .cs-index-sheet::before {
        content: "";
        display: block;
        width: 40px;
        height: 4px;
        border-radius: 2px;
        background-color: rgba(17, 24, 39, 0.16);
        margin: -8px auto 24px;
    }

    .cs-index-sheet-list {
        list-style: none;
        margin: 0;
        padding: 0;
    }

    .cs-index-sheet-list li {
        border-top: 1px solid var(--cs-line);
    }

    .cs-index-sheet-list li:first-child { border-top: none; }

    .cs-index-sheet-list a {
        display: flex;
        align-items: center;
        gap: 16px;
        padding: 18px 8px;
        text-decoration: none;
    }

    .cs-index-sheet-num {
        font-size: 22px;
        font-weight: 700;
        color: var(--cs-orange);
        letter-spacing: -0.02em;
        min-width: 32px;
    }

    .cs-index-sheet-title {
        font-size: 17px;
        color: var(--cs-ink);
        font-weight: 500;
    }

    .cs-index-sheet a.is-active .cs-index-sheet-title {
        font-weight: 700;
    }
}

/* Honor reduced-motion: short fade only, no slide.
   Desktop keeps `translateY(-50%)` (it's centering, not animation). */
@media (prefers-reduced-motion: reduce) {
    .cs-index,
    .cs-index-fab {
        transition: opacity 0.15s linear;
    }

    /* Desktop: keep the centering translateY(-50%); just drop the entry slide. */
    @media (min-width: 1024px) {
        .cs-index,
        .cs-index.is-visible {
            transform: translateY(-50%);
        }
    }

    /* Tablet: cancel the -8px slide */
    @media (min-width: 768px) and (max-width: 1023px) {
        .cs-index {
            transform: none;
        }
    }

    /* Tablet + Mobile FAB: cancel the +8px slide */
    @media (max-width: 1023px) {
        .cs-index-fab {
            transform: none;
        }
        .cs-index-fab.is-visible {
            transform: none;
        }
    }

    /* Bottom sheet animations \u2014 flatten the slide too */
    .cs-index-sheet,
    .cs-index-sheet-backdrop {
        transition: opacity 0.15s linear;
    }
}

/* ============================================
   Metrics strip — sits between hero and Challenge/Solution cards
   4 columns desktop, 2x2 tablet, stacked mobile.
   Numbers are typographic (no icons). Orange ONLY on the arrow in 14 \u2192 5.
   ============================================ */
.cs-metric {
    padding: 8px clamp(16px, 2vw, 32px);
    border-left: 1px solid rgba(17, 24, 39, 0.08);
}

.cs-metric:first-child { border-left: none; padding-left: 0; }
.cs-metric:last-child  { padding-right: 0; }

.cs-metric-num {
    font-size: clamp(48px, 5.6vw, 72px);
    font-weight: 700;
    line-height: 1;
    letter-spacing: -0.03em;
    color: var(--cs-ink);
    margin: 0 0 12px;
    display: flex;
    align-items: baseline;
    gap: 8px;
    flex-wrap: wrap;
}

/* The orange arrow in "14 \u2192 5" */
.cs-metric-arrow {
    color: var(--cs-orange);
    font-weight: 600;
}

/* The smaller secondary line under "8" (across 4 user types) */
.cs-metric-sub {
    display: block;
    font-size: 14px;
    font-weight: 400;
    color: var(--cs-soft);
    line-height: 1.4;
    margin-top: 8px;
    letter-spacing: 0;
}

.cs-metric-label {
    font-size: 13px;
    font-weight: 600;
    letter-spacing: 0.1em;
    text-transform: uppercase;
    color: var(--cs-soft);
}

/* Mobile: tighter spacing and a slightly smaller number to fit the narrower column.
   Border/layout reorganization for the 1-col stack lives in .cs-narrative-metrics. */
@media (max-width: 640px) {
    .cs-metric {
        padding: 0 16px;
    }

    .cs-metric-num {
        font-size: 44px;
    }

    .cs-metric-label {
        font-size: 11px;
    }

    .cs-metric-sub {
        font-size: 12px;
    }
}

/* ============================================
   Section wrappers
   ============================================ */
.cs-section {
    padding: clamp(56px, 8vw, 96px) 0;
}

.cs-section-alt {
    background-color: var(--cs-alt);
}

.cs-section-heading {
    font-size: clamp(28px, 3.5vw, 40px);
    font-weight: 800;
    letter-spacing: -0.02em;
    color: var(--cs-ink);
    margin-bottom: 12px;
}

.cs-section-lead {
    max-width: 68ch;
    font-size: 16px;
    color: var(--cs-muted);
    line-height: 1.7;
    margin-bottom: clamp(32px, 4vw, 48px);
}

.cs-sub-heading {
    font-size: clamp(22px, 2.6vw, 28px);
    font-weight: 700;
    letter-spacing: -0.015em;
    color: var(--cs-ink);
    margin: clamp(40px, 5vw, 56px) 0 14px;
}

.cs-section p {
    font-size: 17px;
    color: rgba(17, 24, 39, 0.75);
    line-height: 1.6;
    margin-bottom: 16px;
    max-width: 72ch;
}

.cs-section p strong {
    color: var(--cs-ink);
    font-weight: 600;
}

/* ============================================
   Editorial layout — 2-col narrative sections
   (eyebrow + display heading sticky on the left,
   paragraphs on the right)
   ============================================ */
.cs-editorial-grid {
    display: grid;
    grid-template-columns: 2fr 3fr;
    gap: clamp(48px, 8vw, 120px);
    align-items: start;
    margin-bottom: clamp(48px, 6vw, 80px);
}

.cs-editorial-col-left {
    position: sticky;
    top: 112px;                                 /* navbar (~64) + breathing (~48) */
    align-self: start;
}

.cs-editorial-col-right {
    min-width: 0;                               /* allow grid item to shrink */
}

/* Magazine-style display heading */
.cs-editorial-heading {
    font-size: clamp(36px, 5vw, 64px);
    font-weight: 700;
    line-height: 1.06;
    letter-spacing: -0.025em;
    color: var(--cs-ink);
    margin: 0;
    max-width: 16ch;                            /* forces dramatic line breaks */
    text-wrap: balance;
}

/* Per design system: italic-orange <em> is reserved for the hero H1 only.
   Section headings use plain navy with no color accent. */
.cs-editorial-heading em {
    font-style: normal;
    font-weight: inherit;
    color: inherit;
}

/* Single-column reading block (Section 3 rhythm) */
.cs-single-column {
    max-width: 72ch;
    margin-inline: auto;
}

/* Inside the single column, the editorial heading sits naturally (no forced
   narrow wrap) — book-like rather than magazine-cover dramatic. */
.cs-single-column .cs-editorial-heading {
    max-width: none;
    margin-bottom: clamp(24px, 3vw, 40px);
}

/* Collapse to stack on narrow viewports */
@media (max-width: 900px) {
    .cs-editorial-grid {
        grid-template-columns: minmax(0, 1fr);
        gap: clamp(20px, 4vw, 32px);
        margin-bottom: clamp(28px, 4vw, 40px);
    }

    .cs-editorial-col-left {
        position: static;                       /* disable sticky when stacked */
    }

    .cs-editorial-heading {
        max-width: none;
    }
}

/* ============================================
   Process — Double Diamond phases
   Editorial timeline: large orange numerals as protagonists,
   thin connector line behind them, no boxes.
   The connector line and per-phase visibility are scaffolded for a
   future scroll-driven animation (Tanda 4.9):
   - .cs-phases::before will swap to a gradient driven by --line-progress
   - .cs-phase will get opacity 0 + transform, .is-visible toggles them
   For now the section is fully static.
   ============================================ */

/* Full-width editorial header (replaces the prior 2-col cs-editorial-grid
   only inside #process — other sections still use cs-editorial-grid). */
.cs-process-header {
    max-width: 880px;
    margin-bottom: clamp(56px, 8vw, 96px);
}

.cs-process-header .cs-eyebrow {
    margin-bottom: 16px;
}

.cs-process-header .cs-editorial-heading {
    margin-bottom: 32px;
}

.cs-process-intro {
    font-size: 18px;
    line-height: 1.6;
    color: var(--cs-muted);
    max-width: 720px;
}

.cs-phases {
    list-style: none;
    margin: 0;
    padding: 0;
    display: grid;
    grid-template-columns: repeat(4, 1fr);
    gap: 32px;
    position: relative;
}

/* Static connector line — runs through the centre of the 80px numerals.
   HOOK (Tanda 4.9): swap to a progress-driven gradient, e.g.
   linear-gradient(to right,
     var(--cs-ink) 0%,
     var(--cs-ink) var(--line-progress, 0%),
     var(--cs-line) var(--line-progress, 0%),
     var(--cs-line) 100%)  */
.cs-phases::before {
    content: "";
    position: absolute;
    top: 40px;
    left: 0;
    right: 0;
    height: 1px;
    background-color: rgba(17, 24, 39, 0.12);
    z-index: 0;
}

.cs-phase {
    background: none;
    border: none;
    border-radius: 0;
    padding: 0;
    display: flex;
    flex-direction: column;
    position: relative;
    z-index: 1;
}

/* Number is the protagonist — large, orange, masks the connector behind it
   so the line reads as discrete segments between phases. */
.cs-phase-num {
    width: 80px;
    height: 80px;
    background-color: transparent;
    border-radius: 0;
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 72px;
    font-weight: 900;
    line-height: 1;
    color: var(--cs-orange);
    letter-spacing: -0.03em;
    position: relative;
    margin-bottom: 24px;
}

/* Bg-coloured mask behind the number to break the connector line
   visually — section bg here is var(--cs-bg). */
.cs-phase-num::before {
    content: "";
    position: absolute;
    inset: 0;
    background-color: var(--cs-bg);
    z-index: -1;
}

.cs-phase h3 {
    font-size: 14px;
    font-weight: 700;
    letter-spacing: 0.08em;
    text-transform: uppercase;
    color: var(--cs-ink);
    margin: 0 0 16px 0;
}

.cs-phase ul {
    list-style: none;
    padding: 0;
    margin: 0;
    display: flex;
    flex-direction: column;
    gap: 10px;
}

.cs-phase ul li {
    font-size: 15px;
    line-height: 1.5;
    color: var(--cs-muted);
    padding-left: 16px;
    position: relative;
}

.cs-phase ul li::before {
    content: "\2014";
    position: absolute;
    left: 0;
    top: 0;
    color: rgba(17, 24, 39, 0.4);
}

/* Desktop (≥1024px): split layout — sticky header on the left (35%),
   phases scroll on the right (65%). The phases adopt the same vertical
   stack + horizontal-row-per-phase pattern as tablet, but live inside
   the right column so the header stays in view while the user scrolls
   through the four phases.
   Wrapped in min-width so the rules don't fight the tablet/mobile
   `.cs-phase { flex-direction: column }` overrides on specificity. */
@media (min-width: 1024px) {
    .cs-process-split {
        display: grid;
        grid-template-columns: 40% 60%;
        gap: 48px;
        align-items: start;
    }

    /* Header sticks to the top of the viewport with a 100px offset so
       it doesn't crash into the navbar; align-self: start reinforces
       sticky inside the grid item. min-width:0 so the header column
       doesn't push past its 40% allocation when copy is long. */
    .cs-process-split .cs-process-header {
        position: sticky;
        top: 100px;
        margin-bottom: 0;
        min-width: 0;
        max-width: none;
        align-self: start;
    }

    /* Phases drop the desktop 4-col grid for a vertical stack inside
       the 60% column. Reset padding-left/max-width that the tablet
       rule (≤1023px) would otherwise leave dormant in cascade. */
    .cs-process-split .cs-phases {
        grid-template-columns: 1fr;
        gap: 48px;
        padding-left: 0;
        max-width: none;
        width: 100%;
        box-sizing: border-box;
    }

    /* Connector line flips from horizontal-across-the-row to
       vertical-along-the-stack, sitting at the centre of the numbers. */
    .cs-process-split .cs-phases::before {
        top: 0;
        bottom: 0;
        left: 40px;
        width: 1px;
        height: auto;
        right: auto;
    }

    /* Each phase becomes "number | content" horizontally — same
       pattern as tablet but at full desktop scale. */
    .cs-process-split .cs-phase {
        flex-direction: row;
        align-items: flex-start;
        gap: 48px;
    }

    .cs-process-split .cs-phase-num {
        flex-shrink: 0;
        width: 80px;
        height: 80px;
        font-size: 64px;
        margin-bottom: 0;
    }

    .cs-process-split .cs-phase-content {
        flex: 1;
        min-width: 0;
        display: flex;
        flex-direction: column;
    }

    .cs-process-split .cs-phase-content h3 {
        margin: 8px 0 16px 0;
    }

    .cs-process-split .cs-phase-content ul {
        margin: 0;
    }

    /* Fallback for the scroll-driven gradient: if JS never runs, the
       line stays fully drawn (100%) and the static look is identical
       to the pre-animation behaviour. JS overrides this to 0% on init. */
    .cs-process-split .cs-phases {
        --line-progress: 100%;
    }
}

/* ============================================
   Scroll-driven animation (desktop ≥1024px, motion OK)
   - Connector line grows from top to bottom as the user scrolls.
   - Each phase number lights up (charcoal → orange) when the line
     reaches it; .is-active is toggled by JS.
   - Phase content fades in when the phase enters the viewport;
     .is-visible is toggled by an IntersectionObserver.
   All initial states only fire when motion is allowed AND we're at
   desktop — tablet/mobile and reduced-motion users see the static
   final state from the rules above.
   ============================================ */
@media (min-width: 1024px) and (prefers-reduced-motion: no-preference) {
    .cs-process-split .cs-phases::before {
        background: linear-gradient(
            to bottom,
            rgba(17, 24, 39, 0.35) 0%,
            rgba(17, 24, 39, 0.35) var(--line-progress, 0%),
            rgba(17, 24, 39, 0.08) var(--line-progress, 0%),
            rgba(17, 24, 39, 0.08) 100%
        );
        width: 1.5px;
    }

    .cs-process-split .cs-phase-num {
        color: rgba(17, 24, 39, 0.18);
        transition: color 0.5s cubic-bezier(0.22, 1, 0.36, 1);
    }

    .cs-process-split .cs-phase.is-active .cs-phase-num,
    .cs-process-split .cs-phase.is-passed .cs-phase-num {
        color: var(--cs-orange);
    }

    /* Asymmetric transitions: slower, easeOut on the way in (the moment
       the user notices) and faster, easeIn on the way out (so reverse
       scroll doesn't drag). */
    .cs-process-split .cs-phase-content {
        opacity: 0;
        transform: translateY(16px);
        transition: opacity 0.4s cubic-bezier(0.4, 0, 1, 1),
                    transform 0.4s cubic-bezier(0.4, 0, 1, 1);
    }

    .cs-process-split .cs-phase.is-visible .cs-phase-content {
        opacity: 1;
        transform: translateY(0);
        transition: opacity 0.7s cubic-bezier(0.22, 1, 0.36, 1),
                    transform 0.7s cubic-bezier(0.22, 1, 0.36, 1);
    }
}

/* Tablet (≤1023px): 1 column with vertical connector line on the left.
   Each phase becomes a 2-column row — number anchors left, the
   content wrapper (h3 + ul stacked) takes the remaining width.
   The line passes through the centre of the numbers.
   Boundary at 1023 (not 1024) so the desktop split layout owns
   exactly 1024 without overlap. */
@media (max-width: 1023px) {
    .cs-phases {
        grid-template-columns: 1fr;
        gap: 48px;
        padding-left: 0;
        max-width: 720px;
    }
    .cs-phases::before {
        display: block;
        top: 0;
        bottom: 0;
        left: 40px;
        width: 1px;
        height: auto;
        right: auto;
    }
    .cs-phase {
        flex-direction: row;
        align-items: flex-start;
        gap: 48px;
    }
    .cs-phase-num {
        flex-shrink: 0;
        width: 80px;
        height: 80px;
        font-size: 64px;
        margin-bottom: 0;
    }
    /* Content wrapper takes the remaining row width and stacks
       h3 + ul vertically inside. min-width:0 lets long bullet copy
       wrap instead of overflowing. */
    .cs-phase-content {
        flex: 1;
        min-width: 0;
        display: flex;
        flex-direction: column;
    }
    .cs-phase-content h3 {
        margin: 8px 0 16px 0;
    }
    .cs-phase-content ul {
        margin: 0;
    }
}

/* Mobile (≤767px): same vertical-line idea, but each phase stacks
   again (number on top, content below) and the line shifts to track
   the smaller number's centre. */
@media (max-width: 767px) {
    .cs-phases {
        gap: 48px;
        padding-left: 0;
    }
    .cs-phases::before {
        left: 32px;
    }
    .cs-phase {
        flex-direction: column;
        align-items: flex-start;
        gap: 0;
    }
    .cs-phase-num {
        width: 64px;
        height: 64px;
        font-size: 56px;
        margin-bottom: 16px;
    }
    .cs-phase-content h3 {
        margin-top: 0;
        font-size: 13px;
        margin-bottom: 16px;
    }
}

/* ============================================
   Insights (personas)
   ============================================ */
.cs-insights {
    margin-top: clamp(24px, 3vw, 32px);
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: 20px;
}

.cs-insight {
    background-color: #FFFFFF;
    border: 1px solid var(--cs-line);
    border-radius: var(--cs-radius);
    padding: clamp(24px, 3vw, 32px);
}

.cs-insight-head {
    display: flex;
    align-items: center;
    gap: 16px;
    margin-bottom: 20px;
}

.cs-insight-avatar {
    flex: 0 0 112px;
    width: 112px;
    height: 112px;
    border-radius: 50%;
    overflow: hidden;
    background-color: var(--cs-alt);
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 11px;
    color: var(--cs-orange);
    text-align: center;
    font-weight: 600;
}

.cs-insight-avatar > img {
    width: 100%;
    height: 100%;
    display: block;
    object-fit: cover;
    object-position: center 22%;                /* default: pulls head up for images with padding */
}

.cs-insight-avatar--tight > img {
    object-position: center center;             /* for tightly-cropped portraits (no padding) */
}

.cs-insight-head h4 {
    font-size: 22px;
    font-weight: 700;
    color: var(--cs-ink);
}

.cs-insight h5 {
    font-size: 12px;
    font-weight: 700;
    letter-spacing: 0.08em;
    text-transform: uppercase;
    color: var(--cs-orange);
    margin: 18px 0 8px;
}

.cs-insight h5:first-of-type { margin-top: 0; }

.cs-insight ul {
    list-style: none;
    padding: 0;
    margin: 0;
}

.cs-insight li {
    font-size: 14px;
    color: var(--cs-muted);
    line-height: 1.6;
    padding: 4px 0 4px 16px;
    position: relative;
}

.cs-insight li::before {
    content: "";
    position: absolute;
    left: 0;
    top: 11px;
    width: 5px;
    height: 5px;
    border-radius: 50%;
    background-color: var(--cs-ink);
    opacity: 0.4;
}

/* ============================================
   Image / figure placeholder
   ============================================ */
.cs-placeholder {
    display: flex;
    align-items: center;
    justify-content: center;
    width: 100%;
    min-height: 220px;
    margin: 20px 0;
    padding: 24px;
    background-color: rgba(249, 115, 22, 0.05);
    border: 2px dashed rgba(249, 115, 22, 0.4);
    border-radius: var(--cs-radius);
    color: var(--cs-orange);
    font-size: 14px;
    font-weight: 500;
    text-align: center;
}

.cs-placeholder-wide { min-height: 360px; }
.cs-placeholder-tall { min-height: 480px; }

.cs-placeholder-mobile {
    aspect-ratio: 9 / 19;
    max-width: 240px;
    min-height: 0;
    margin: 0 auto;
}

/* Reusable: vertically-stacked figure (multiple images share one caption/block) */
.cs-figure-stack {
    display: flex;
    flex-direction: column;
    gap: clamp(16px, 2vw, 24px);
    margin: 20px 0;
    padding: 0;
}

.cs-figure-stack img {
    width: 100%;
    height: auto;
    display: block;
    border-radius: var(--cs-radius);
    box-shadow: 0 4px 24px rgba(0, 0, 0, 0.06);
}

/* Reusable: horizontally-aligned figure (equal-width columns; stacks on narrow) */
.cs-figure-row {
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: clamp(16px, 2vw, 32px);
    align-items: center;
    margin: 20px 0;
    padding: 0;
}

.cs-figure-row img {
    width: 100%;
    height: auto;
    display: block;
    border-radius: var(--cs-radius);
    box-shadow: 0 4px 24px rgba(0, 0, 0, 0.06);
}

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

/* Reusable: 4-up horizontal figure (collapses to 2x2 on tablet, 1-col on mobile) */
.cs-figure-row-4 {
    display: grid;
    grid-template-columns: repeat(4, minmax(0, 1fr));
    gap: clamp(12px, 1.5vw, 20px);
    align-items: start;
    margin: 20px 0;
    padding: 0;
}

.cs-figure-row-4 img {
    width: 100%;
    height: auto;
    display: block;
    border-radius: var(--cs-radius);
    box-shadow: 0 4px 24px rgba(0, 0, 0, 0.06);
}

@media (max-width: 1024px) {
    .cs-figure-row-4 {
        grid-template-columns: repeat(2, minmax(0, 1fr));
    }
}

@media (max-width: 560px) {
    .cs-figure-row-4 {
        grid-template-columns: 1fr;
        max-width: 420px;
        margin-left: auto;
        margin-right: auto;
    }
}

/* ============================================
   Bullet blocks for findings
   ============================================ */
.cs-bullet-blocks {
    list-style: none;
    padding: 0;
    margin: 20px 0;
    display: grid;
    gap: 14px;
}

.cs-bullet-blocks li {
    background-color: #FFFFFF;
    border: 1px solid var(--cs-line);
    border-left: 4px solid var(--cs-orange);
    border-radius: 12px;
    padding: 16px 20px;
    font-size: 15px;
    color: var(--cs-muted);
    line-height: 1.7;
}

.cs-bullet-blocks strong {
    color: var(--cs-ink);
    font-weight: 700;
    display: block;
    margin-bottom: 4px;
}

/* ============================================
   Feature grid (MVP features)
   ============================================ */
.cs-feature-grid {
    margin: clamp(24px, 3vw, 32px) 0;
    display: grid;
    grid-template-columns: repeat(3, minmax(0, 1fr));
    gap: 16px;
}

.cs-feature {
    background-color: #FFFFFF;
    border: 1px solid var(--cs-line);
    border-radius: var(--cs-radius);
    padding: 22px;
}

.cs-feature h4 {
    font-size: 16px;
    font-weight: 700;
    color: var(--cs-ink);
    margin-bottom: 8px;
}

.cs-feature p {
    font-size: 14px !important;
    color: var(--cs-muted);
    line-height: 1.6;
    margin: 0 !important;
}

/* Specificity over .cs-section p so the note reads lighter than body text. */
.cs-section p.cs-feature-note {
    margin-top: 16px;
    font-size: 14px;
    line-height: 1.5;
    color: var(--cs-soft);
    max-width: 680px;
}

.cs-feature-note em {
    font-style: italic;
}

/* ============================================
   Flow blocks
   ============================================ */
.cs-flow {
    margin-top: clamp(24px, 3vw, 32px);
}

.cs-flow h4 {
    font-size: 16px;
    font-weight: 700;
    color: var(--cs-ink);
    margin-bottom: 12px;
    padding: 6px 14px;
    background-color: var(--cs-orange-tint);
    border-radius: 999px;
    display: inline-block;
}

/* ============================================
   Design decisions
   ============================================ */
/* ============================================
   Research artifact + INSIGHT block + Lightbox (#7)

   .cs-artifact-block          — row layout: artifact image + insight text
   .cs-artifact[data-zoom]     — click to open lightbox
   .cs-insight-block           — the takeaway sidebar (eyebrow + line + link)
   .cs-lightbox                — full-screen modal, vanilla JS driven
   ============================================ */
.cs-artifact-block {
    margin: clamp(28px, 4vw, 40px) 0;
    display: grid;
    grid-template-columns: minmax(0, 3fr) minmax(0, 2fr);
    gap: clamp(24px, 4vw, 48px);
    align-items: center;
}

.cs-artifact-block .cs-artifact { margin: 0; }

/* The artifact (CJM/SWOT/Matrix) acts as a clickable thumbnail */
.cs-artifact[data-zoom] {
    cursor: zoom-in;
    position: relative;
}

.cs-artifact[data-zoom]:hover img {
    filter: brightness(0.95);
}

.cs-artifact[data-zoom]:focus-visible {
    outline: 2px solid var(--cs-orange);
    outline-offset: 4px;
}

/* Magnifier badge in the top-right — hints the image is clickable */
.cs-artifact-zoom-hint {
    position: absolute;
    top: 12px;
    right: 12px;
    width: 36px;
    height: 36px;
    border-radius: 50%;
    background: rgba(255, 255, 255, 0.92);
    backdrop-filter: blur(6px);
    -webkit-backdrop-filter: blur(6px);
    display: flex;
    align-items: center;
    justify-content: center;
    color: var(--cs-ink);
    box-shadow: 0 4px 12px rgba(17, 24, 39, 0.12);
    pointer-events: none;
}

/* Insight block — sits next to the artifact crop */
.cs-insight-block {
    max-width: 38ch;
}

.cs-insight-block-eyebrow {
    display: block;
    font-size: 12px;
    font-weight: 600;
    letter-spacing: 0.15em;
    text-transform: uppercase;
    color: var(--cs-orange);
    margin-bottom: 14px;
}

.cs-insight-block p {
    font-size: clamp(18px, 1.6vw, 22px);
    line-height: 1.45;
    color: var(--cs-ink);
    font-weight: 500;
    margin: 0 0 20px;
    max-width: none;
    letter-spacing: -0.01em;
}

.cs-insight-block-link {
    display: inline-flex;
    align-items: center;
    gap: 6px;
    font-size: 14px;
    font-weight: 600;
    color: var(--cs-ink);
    text-decoration: none;
    border-bottom: 1px solid var(--cs-line);
    padding-bottom: 4px;
    transition: color 200ms ease, border-color 200ms ease;
    cursor: pointer;
    background: none;
    border-left: none;
    border-right: none;
    border-top: none;
}

.cs-insight-block-link:hover { color: var(--cs-orange); border-bottom-color: var(--cs-orange); }
.cs-insight-block-link:focus-visible { outline: 2px solid var(--cs-orange); outline-offset: 2px; }

/* Stack on tablet/mobile */
@media (max-width: 900px) {
    .cs-artifact-block {
        grid-template-columns: 1fr;
        gap: 24px;
    }
}

/* ============================================
   Lightbox — full-screen artifact viewer
   ============================================ */
.cs-lightbox {
    position: fixed;
    inset: 0;
    z-index: 100;
    background-color: rgba(17, 24, 39, 0.92);
    display: flex;
    align-items: center;
    justify-content: center;
    padding: clamp(16px, 4vw, 48px);
    opacity: 0;
    pointer-events: none;
    transition: opacity 220ms ease;
}

.cs-lightbox.is-open {
    opacity: 1;
    pointer-events: auto;
}

/* --- Normal mode (default): image fits the viewport, centered --- */
.cs-lightbox-image {
    max-width: 95vw;
    max-height: 95vh;
    object-fit: contain;
    background-color: #FFFFFF;
    border-radius: 12px;
    box-shadow: 0 24px 80px rgba(0, 0, 0, 0.5);
    /* Allow native pinch-zoom on touch devices */
    touch-action: pinch-zoom;
}

/* --- Panoramic mode: very wide images (aspect > ~2.8). Image is locked to
       80% viewport height; user pans horizontally with trackpad / drag / swipe. */
.cs-lightbox.is-panoramic {
    overflow-x: auto;
    overflow-y: hidden;
    align-items: center;
    justify-content: flex-start;
    padding-inline: clamp(24px, 6vw, 80px);
    padding-block: 10vh;
    -webkit-overflow-scrolling: touch;
    scrollbar-width: thin;
    scrollbar-color: rgba(255, 255, 255, 0.2) transparent;
}

.cs-lightbox.is-panoramic::-webkit-scrollbar { height: 6px; }
.cs-lightbox.is-panoramic::-webkit-scrollbar-thumb { background: rgba(255, 255, 255, 0.2); border-radius: 4px; }

.cs-lightbox.is-panoramic .cs-lightbox-image {
    max-width: none;
    max-height: 80vh;
    height: 80vh;
    width: auto;
    flex-shrink: 0;
    touch-action: pan-x pinch-zoom;
}

/* "\u2190 Scroll to explore \u2192" hint, only visible in panoramic mode for ~5s */
.cs-lightbox-hint {
    position: fixed;
    bottom: clamp(20px, 4vh, 36px);
    left: 50%;
    transform: translateX(-50%);
    padding: 10px 18px;
    background: rgba(255, 255, 255, 0.14);
    -webkit-backdrop-filter: blur(8px);
    backdrop-filter: blur(8px);
    color: #FFFFFF;
    font-size: 13px;
    font-weight: 500;
    letter-spacing: 0.02em;
    border-radius: 100px;
    pointer-events: none;
    opacity: 0;
    transition: opacity 280ms ease;
    z-index: 110;
    white-space: nowrap;
}

.cs-lightbox-hint.is-visible {
    opacity: 1;
}

.cs-lightbox-close {
    position: fixed;             /* fixed inside scrollable lightbox */
    top: clamp(12px, 2vw, 20px);
    right: clamp(12px, 2vw, 20px);
    width: 44px;
    height: 44px;
    border-radius: 50%;
    border: none;
    background-color: rgba(255, 255, 255, 0.12);
    color: #FFFFFF;
    cursor: pointer;
    display: flex;
    align-items: center;
    justify-content: center;
    transition: background-color 180ms ease;
    z-index: 110;
}

.cs-lightbox-close:hover { background-color: rgba(255, 255, 255, 0.22); }
.cs-lightbox-close:focus-visible {
    outline: 2px solid #FFFFFF;
    outline-offset: 2px;
}

@media (prefers-reduced-motion: reduce) {
    .cs-lightbox,
    .cs-lightbox-hint { transition: none; }
}

/* ============================================
   Handwritten annotations (#6)
   Applied SPARINGLY — only 2 product screens carry annotations.

   Structure (per annotated screen):
     .cs-annotated                       — relative wrapper
       .cs-screen                        — the product mockup
       .cs-anchor[data-letter]           — small dot on screen pointing at element
       .cs-annotation[data-letter]       — floating text + curved SVG arrow (desktop)
       .cs-annotation-list               — letter-prefixed list shown only on mobile

   Desktop  : anchors are 8px navy dots; floating annotations sit around the screen.
   Mobile   : anchors become 28px letter circles; list below shows the texts.

   Note for designer: the SVG arrow shapes here are HAND-DRAWN-STYLE PLACEHOLDERS
   (single bezier curve with arrowhead). For final polish, swap each .cs-annotation-arrow
   inner <path> with a Figma-exported irregular hand-drawn arrow.
   ============================================ */

.cs-annotated {
    position: relative;
    width: 100%;
    max-width: 320px;
    margin-inline: auto;
}

/* Anchor dot on the screen (desktop default — small, navy) */
.cs-anchor {
    position: absolute;
    width: 12px;
    height: 12px;
    border-radius: 50%;
    background: var(--cs-ink);
    border: 2px solid #FFFFFF;
    box-shadow: 0 0 0 2px rgba(17, 24, 39, 0.18);
    z-index: 3;
    transform: translate(-50%, -50%);
    pointer-events: none;
}

.cs-anchor::after {
    /* Hide the letter on desktop — only shown on mobile */
    content: attr(data-letter);
    display: none;
}

/* Floating annotation (text + arrow). Positioned absolutely around the screen. */
.cs-annotation {
    position: absolute;
    font-family: 'Caveat', cursive;
    font-size: 22px;
    font-weight: 500;
    line-height: 1.25;
    color: rgba(17, 24, 39, 0.85);
    letter-spacing: 0.5px;
    max-width: 200px;
    z-index: 2;
}

/* Hand-drawn-style SVG arrow inside each annotation */
.cs-annotation-arrow {
    position: absolute;
    overflow: visible;
    pointer-events: none;
}

.cs-annotation-arrow path {
    fill: none;
    stroke: rgba(17, 24, 39, 0.7);
    stroke-width: 1.5;
    stroke-linecap: round;
    stroke-linejoin: round;
}

/* Annotation positions (extend past the .cs-annotated wrapper) */
.cs-annotation--top-right    { top: -12%;  left: 110%;  transform: translateY(0); }
.cs-annotation--right        { top: 36%;   left: 112%;  }
.cs-annotation--bottom-right { bottom: -8%; left: 110%; }
.cs-annotation--top-left     { top: -12%;  right: 110%; text-align: right; }
.cs-annotation--left         { top: 36%;   right: 112%; text-align: right; }
.cs-annotation--bottom-left  { bottom: -8%; right: 110%; text-align: right; }

/* Mobile letter-marker list (hidden on desktop) */
.cs-annotation-list {
    display: none;
    list-style: none;
    margin: 24px 0 0;
    padding: 0;
    text-align: left;
}

.cs-annotation-list li {
    display: flex;
    align-items: flex-start;
    gap: 12px;
    padding: 12px 0;
    border-top: 1px solid var(--cs-line);
}

.cs-annotation-list li:first-child { border-top: none; }

.cs-annotation-letter {
    flex-shrink: 0;
    width: 28px; height: 28px;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    border-radius: 50%;
    background: transparent;
    color: var(--cs-orange);
    font-family: 'Caveat', cursive;
    font-size: 22px;
    font-weight: 600;
    line-height: 1;
}

.cs-annotation-list .cs-annotation-list-text {
    font-family: 'Caveat', cursive;
    font-size: 18px;
    line-height: 1.4;
    color: rgba(17, 24, 39, 0.85);
    flex: 1;
}

/* Mobile: convert anchors to letter circles, hide floating annotations,
   show the list below */
@media (max-width: 1023px) {
    /* Tablet too — floating annotations don't have room around a 240-280px screen */
    .cs-annotation { display: none; }
    .cs-annotation-list { display: block; }

    .cs-anchor {
        width: 28px;
        height: 28px;
        background: var(--cs-ink);
        border: 2px solid #FFFFFF;
        box-shadow: 0 4px 12px rgba(17, 24, 39, 0.2);
    }

    .cs-anchor::after {
        display: flex;
        align-items: center;
        justify-content: center;
        position: absolute;
        inset: 0;
        color: #FFFFFF;
        font-family: 'Caveat', cursive;
        font-size: 16px;
        font-weight: 600;
        line-height: 1;
    }
}

/* Honor reduced motion (no transitions on annotations either way) */
@media (prefers-reduced-motion: reduce) {
    .cs-annotation, .cs-annotation-arrow { transition: none; }
}

/* ============================================
   Key Decisions — editorial cards (#5)
   Two-column grid that alternates side per block.
   Watermark number above eyebrow + heading + paragraph.
   ============================================ */
.cs-decisions {
    margin-top: clamp(48px, 6vw, 80px);
    max-width: 1100px;
    margin-inline: auto;
}

.cs-decisions-intro {
    max-width: 60ch;
    margin: 0 auto clamp(40px, 5vw, 56px);
    text-align: center;
    font-size: 17px;
    line-height: 1.6;
    color: rgba(17, 24, 39, 0.75);
}

.cs-decision {
    margin-top: clamp(64px, 9vw, 120px);
    display: grid;
    grid-template-columns: minmax(0, 40fr) minmax(0, 60fr);
    gap: clamp(40px, 5vw, 72px);
    align-items: center;
    border-top: none;          /* watermark numbers replace dividers */
    padding-top: 0;
}

.cs-decision:first-of-type {
    margin-top: clamp(40px, 5vw, 56px);
}

/* Alternate sides: even index puts the screenshot on the right, odd on the left */
.cs-decision:nth-of-type(even) .cs-decision-visual {
    order: 2;
}

.cs-decision-visual {
    width: 100%;
    max-width: 320px;
    justify-self: center;
}

.cs-decision-text {
    position: relative;
    padding-top: clamp(48px, 6vw, 72px);   /* room for the watermark number */
}

/* Watermark number (01, 02, 03) — display family, navy@12%
   Higher specificity so it overrides .cs-section p. */
p.cs-decision-num {
    font-size: clamp(96px, 12vw, 140px);
    font-weight: 700;
    line-height: 1;
    letter-spacing: -0.04em;
    color: rgba(17, 24, 39, 0.12);
    margin: 0 0 -28px;
    max-width: none;
    user-select: none;
}

.cs-decision-eyebrow {
    display: block;
    font-size: 12px;
    font-weight: 600;
    letter-spacing: 0.15em;
    text-transform: uppercase;
    color: var(--cs-orange);
    margin-bottom: 16px;
}

.cs-decision h4 {
    font-size: clamp(24px, 3vw, 32px);
    font-weight: 700;
    line-height: 1.2;
    letter-spacing: -0.015em;
    color: var(--cs-ink);
    margin-bottom: 18px;
}

/* Body paragraph inside the decision card (specificity over .cs-section p) */
.cs-decision-text > p:not(.cs-decision-num) {
    font-size: 17px;
    line-height: 1.6;
    color: rgba(17, 24, 39, 0.75);
    max-width: 50ch;
    margin: 0;
}

/* Tablet — keep alternation, slightly smaller */
@media (max-width: 1023px) {
    .cs-decision {
        gap: clamp(28px, 4vw, 48px);
    }
    .cs-decision-num { font-size: clamp(80px, 11vw, 120px); }
}

/* Mobile — always stack with screenshot ABOVE text (no alternation) */
@media (max-width: 767px) {
    .cs-decision,
    .cs-decision:nth-of-type(even) {
        grid-template-columns: 1fr;
        gap: 24px;
    }

    .cs-decision:nth-of-type(even) .cs-decision-visual {
        order: 0;             /* reset — always on top */
    }

    .cs-decision-visual {
        order: 0;
        max-width: 280px;
    }

    .cs-decision-num {
        font-size: 96px;
        margin-bottom: -20px;
    }

    .cs-decision-text {
        padding-top: 32px;
    }
}

.cs-decision ul {
    list-style: none;
    padding: 0;
    margin: 16px 0;
    display: grid;
    gap: 12px;
}

.cs-decision ul li {
    font-size: 15px;
    color: var(--cs-muted);
    line-height: 1.7;
    padding-left: 16px;
    position: relative;
}

.cs-decision ul li::before {
    content: "";
    position: absolute;
    left: 0;
    top: 11px;
    width: 6px;
    height: 6px;
    border-radius: 50%;
    background-color: var(--cs-orange);
}

.cs-decision ul li strong {
    color: var(--cs-ink);
    font-weight: 700;
}

.cs-mockup-row {
    margin-top: clamp(20px, 3vw, 28px);
    display: grid;
    grid-template-columns: repeat(3, minmax(0, 1fr));
    gap: 20px;
    padding: clamp(24px, 4vw, 40px);
    background: linear-gradient(180deg, var(--cs-alt) 0%, #FFFFFF 100%);
    border-radius: var(--cs-radius);
}

.cs-mockup-row-2 {
    grid-template-columns: repeat(2, minmax(0, 1fr));
    max-width: 560px;
}

/* When a row uses .cs-screen children, each one is the column item itself
   (figure with shadow + aspect ratio handled by .cs-screen). Cap width so
   3-up rows don't render too large. */
.cs-mockup-row .cs-screen {
    max-width: 240px;
    margin: 0 auto;
}

/* ============================================
   Conclusion
   ============================================ */
.cs-conclusion {
    margin-top: clamp(24px, 3vw, 32px);
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: 24px;
}

.cs-conclusion > div {
    background-color: #FFFFFF;
    border: 1px solid var(--cs-line);
    border-radius: var(--cs-radius);
    padding: clamp(24px, 3vw, 32px);
}

/* ============================================
   Conclusion v2 — Key Takeaway as a heavy editorial quote,
   Next Steps as a single quiet line below.
   ============================================ */
.cs-conclusion-v2 {
    grid-template-columns: 1fr;          /* stack vertically, no cards */
    gap: clamp(32px, 4vw, 48px);
}

.cs-conclusion-v2 > div {
    background: transparent;             /* no card chrome */
    border: none;
    padding: 0;
}

/* Higher specificity to win over .cs-conclusion h3 (equal specificity, defined later) */
.cs-conclusion.cs-conclusion-v2 h3 {
    font-size: 12px;
    font-weight: 600;
    letter-spacing: 0.15em;
    text-transform: uppercase;
    color: var(--cs-orange);
    margin-bottom: 16px;
}

/* Suppress the orange dot decoration from the v1 rule */
.cs-conclusion.cs-conclusion-v2 h3::before {
    display: none;
}

.cs-takeaway-quote {
    margin: 0;
    font-size: clamp(22px, 2.4vw, 32px);
    font-weight: 500;
    line-height: 1.35;
    color: var(--cs-ink);
    letter-spacing: -0.015em;
    border-left: 3px solid var(--cs-ink);
    padding-left: clamp(20px, 2vw, 28px);
    max-width: 36ch;
    text-wrap: pretty;
}

.cs-next-steps-line {
    font-size: 16px;
    line-height: 1.6;
    color: rgba(17, 24, 39, 0.7);
    max-width: 56ch;
    margin: 0;
}

.cs-conclusion h3 {
    font-size: 20px;
    font-weight: 700;
    color: var(--cs-ink);
    margin-bottom: 12px;
}

.cs-conclusion h3::before {
    content: "";
    display: inline-block;
    width: 8px;
    height: 8px;
    background-color: var(--cs-orange);
    border-radius: 50%;
    margin-right: 10px;
    vertical-align: middle;
}

.cs-conclusion p {
    font-size: 15px;
    color: var(--cs-muted);
    line-height: 1.7;
    margin: 0;
}

/* ============================================
   Other case studies — post-conclusion entry to the rest of the work.
   Template: each case study renders this block excluding itself.
   ============================================ */
.cs-other-cases {
    padding: clamp(56px, 8vw, 96px) 0;
    background-color: var(--cs-bg);
}

.cs-other-cases-eyebrow {
    font-size: 13px;
    font-weight: 600;
    letter-spacing: 0.15em;
    text-transform: uppercase;
    color: var(--cs-soft);
    margin: 0 0 32px;
    text-align: center;
}

.cs-other-cases-grid {
    display: grid;
    grid-template-columns: repeat(2, 1fr);
    gap: 24px;
}

.cs-other-case {
    display: grid;
    grid-template-columns: 96px 1fr auto;
    align-items: center;
    gap: 20px;
    padding: 20px;
    background-color: #FFFFFF;
    border-radius: 16px;
    text-decoration: none;
    color: var(--cs-ink);
    transition: transform 0.25s ease, box-shadow 0.25s ease;
    box-shadow: 0 2px 12px rgba(17, 24, 39, 0.04);
}

.cs-other-case:hover {
    transform: translateY(-2px);
    box-shadow: 0 8px 24px rgba(17, 24, 39, 0.08);
}

.cs-other-case-visual {
    width: 96px;
    height: 96px;
    border-radius: 12px;
    background-color: var(--cs-alt);
}

/* Per-project gradients — mirror the landing system. */
.cs-other-case-visual--laskie {
    background-image: linear-gradient(135deg, rgb(30, 64, 175) 0%, rgb(59, 130, 246) 50%, rgb(147, 197, 253) 100%);
}

.cs-other-case-visual--abinbev {
    background-image: linear-gradient(135deg, rgb(217, 119, 6) 0%, rgb(245, 158, 11) 50%, rgb(253, 230, 138) 100%);
}

.cs-other-case-visual--esports {
    background-image: linear-gradient(135deg, rgb(13, 148, 136) 0%, rgb(52, 211, 153) 50%, rgb(167, 243, 208) 100%);
}

.cs-other-case-meta {
    display: flex;
    flex-direction: column;
    gap: 4px;
    min-width: 0;
}

.cs-other-case-client {
    font-size: 11px;
    font-weight: 600;
    letter-spacing: 0.12em;
    text-transform: uppercase;
    color: var(--cs-soft);
    margin-bottom: 4px;
}

.cs-other-case-title {
    font-size: 17px;
    font-weight: 700;
    color: var(--cs-ink);
    letter-spacing: -0.01em;
    line-height: 1.35;
}

.cs-other-case-arrow {
    font-size: 20px;
    color: var(--cs-soft);
    transition: transform 0.25s ease, color 0.25s ease;
}

.cs-other-case:hover .cs-other-case-arrow {
    color: var(--cs-orange);
    transform: translateX(4px);
}

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

/* ============================================
   Responsive
   ============================================ */

/* --- Tablet: 768–1024px — keep 58/42 split, shrink H1 + images --- */
@media (max-width: 1024px) and (min-width: 769px) {
    .cs-hero {
        --cs-container-pad: 32px;              /* match landing .container padding */
    }

    .cs-hero h1 {
        font-size: 64px;
    }

}

/* --- Tablet (768-1023px): vertical breathing room between the hero and the
   metrics strip. The default clamp values (~33/66 px at this width) were
   too tight when the hero collapses to a single column. */
@media (min-width: 768px) and (max-width: 1023px) {
    .cs-hero {
        padding-bottom: 80px;
    }
}

/* --- Mobile (\u2264767px): proportional adjustment, slightly tighter than tablet. */
@media (max-width: 767px) {
    .cs-hero {
        padding-bottom: 60px;
    }
}

/* --- Secondary-section responsive (2-col collapse) at <=900px --- */
@media (max-width: 900px) {
    .cs-insights,
    .cs-conclusion {
        grid-template-columns: 1fr;
    }

    .cs-meta         { grid-template-columns: repeat(2, minmax(0, 1fr)); }
    .cs-feature-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); }
    /* .cs-phases collapse handled by its own @1024 / @767 queries below. */

    .cs-mockup-row,
    .cs-mockup-row-2 {
        grid-template-columns: repeat(2, minmax(0, 1fr));
    }
}

/* --- Tablet/single-column (<=1023px) ---
   Hero collapses to one column; mockups stack centered below the text but
   keep the editorial superposition. */
@media (max-width: 1023px) {
    .cs-hero-inner {
        grid-template-columns: minmax(0, 1fr);
        gap: clamp(32px, 5vw, 48px);
    }

    .cs-hero-visual {
        aspect-ratio: 1 / 1;
        max-width: 480px;
        margin: 0 auto;
    }

    .cs-hero-img {
        width: 55%;
        max-width: 260px;
    }
}

/* --- Mobile (<=767px) ---
   Show only the front card, full-width inside its smaller stage. */
@media (max-width: 767px) {
    .cs-hero-text {
        max-width: none;
    }

    .cs-hero h1 {
        font-size: clamp(40px, 11vw, 56px);
    }

    .cs-hero-visual {
        /* Same 4/5 stage as desktop so the desktop composition (back card
           anchored left, front card anchored right, 10% overlap) cascades
           down to mobile. Width capped tight enough that both mockups
           still fit on a narrow phone. */
        aspect-ratio: 4 / 5;
        max-width: 320px;
    }
    /* No mockup overrides on mobile — desktop rules
       (.cs-hero-img--primary / --secondary) cascade unchanged. */
}

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

    /* .cs-phases handled by its own @767 query above. */
    .cs-feature-grid,
    .cs-mockup-row,
    .cs-mockup-row-2 {
        grid-template-columns: 1fr;
    }

    .cs-placeholder-mobile {
        max-width: 200px;
    }
}

/* ============================================
   Page layout grid \u2014 sidebar + content
   ----------------------------------------------
   Wraps the 5 case-study content sections so the sidebar always has its
   own column (fixes the 1024-1440px overlap bug). Hero / metrics / next
   case / footer remain OUTSIDE this grid (full-width as before).

   Section backgrounds (.cs-narrative, .cs-section-alt) used to span
   the whole viewport when the sections were top-level. Now that they live
   inside .cs-content, we extend their background colour out to the
   viewport edges with a box-shadow + clip-path trick \u2014 see "section bg
   breakout" rules below.
   ============================================ */
.cs-page-layout {
    display: grid;
    grid-template-columns: 240px minmax(0, 1fr);
    gap: 40px;
    max-width: 1400px;
    margin: 0 auto;
    padding: 0 48px;            /* horizontal only; sections own their vertical rhythm */
    /* Allow children (sections with breakout bg) to bleed horizontally */
    overflow: visible;
}

.cs-content {
    min-width: 0;               /* CRITICAL: lets wide images shrink instead of breaking the grid */
}

/* Stack content sections BELOW the sidebar so full-width section backgrounds
   (cards, alt) don't paint over the sidebar. Sidebar is z-index: 10. */
.cs-content > section {
    position: relative;
    z-index: 1;
}

/* Section background breakout \u2014 paints the section bg colour all the way
   to the viewport edges even though the section itself is column-bounded.
   `box-shadow: 0 0 0 100vmax <colour>` paints a huge ring; `clip-path` then
   lets that ring bleed left/right but blocks top/bottom so the colour stays
   confined to the section's vertical extent. */
.cs-content > .cs-narrative,
.cs-content > .cs-section-alt {
    position: relative;
    isolation: isolate;
}

.cs-content > .cs-narrative {
    box-shadow: 0 0 0 100vmax var(--cs-cards-bg);
    clip-path: inset(0 -100vmax);
}

/* Solution section uses the deeper cream — its viewport-edge bleed
   has to follow, otherwise the bg colour stops at the column edge. */
.cs-content > .cs-narrative--solution-section {
    box-shadow: 0 0 0 100vmax #ECE8E0;
}

.cs-content > .cs-section-alt {
    box-shadow: 0 0 0 100vmax var(--cs-alt);
    clip-path: inset(0 -100vmax);
}

/* Tighter sidebar column at desktop 1024-1199px so the content has more breathing room. */
@media (min-width: 1024px) and (max-width: 1199px) {
    .cs-page-layout {
        grid-template-columns: 200px minmax(0, 1fr);
        gap: 60px;
        padding: 0 32px;
    }
}

/* Tablet 768-1023px: layout collapses to a single column. The sidebar
   keeps its existing horizontal-bar treatment (sticky to viewport top). */
@media (max-width: 1023px) {
    .cs-page-layout {
        display: block;
        max-width: none;
        padding: 0;
    }
}

/* The sidebar in tablet still uses position:sticky to top:0; nothing extra
   needed here \u2014 the existing tablet rule for .cs-index handles it. */

/* Mobile <=767px: page-layout stays block; sidebar is hidden by the existing
   .cs-index { display:none } default and the FAB takes over. */

/* ============================================
   FOOTER — reduced scale inside case studies only
   Same identity (orange bg, rounded top, recent work, social)
   but scaled to ~70% of the landing footer's typographic weight.
   Scoped to .cs-body so the landing footer stays untouched.
   ============================================ */
.cs-body .footer {
    padding-top: clamp(40px, 6vw, 64px);
    padding-bottom: clamp(24px, 3vw, 32px);
    /* Drop the landing's pronounced top curve — case studies want a clean rectangular footer. */
    border-radius: 0;
}

.cs-body .footer .contact-title {
    font-size: clamp(28px, 4vw, 40px);
    margin-bottom: 8px;
}

.cs-body .footer .contact-warm {
    font-size: 16px;
    margin: 12px auto 0;
}

.cs-body .footer .contact-buttons {
    margin: 24px auto 32px;
}

.cs-body .footer .contact-buttons .hero-btn {
    font-size: 16px;
    padding: 10px 20px;
}

.cs-body .footer .footer-divider {
    margin: 24px auto;
}

/* "Recent work" line is redundant inside case studies — the
   .cs-other-cases section above already covers the same navigation. */
.cs-body .footer .footer-recent {
    display: none;
}

.cs-body .footer .footer-bottom {
    margin-top: 16px;
    gap: 6px 16px;
}

.cs-body .footer .footer-social a,
.cs-body .footer .footer-meta-text,
.cs-body .footer .footer-copy {
    font-size: 12px;
}