/* ============================================================
   CASE STUDY — Arpeggio-format project template (Figma 1475:8261)
   Full-bleed hero → title/description row → meta summary band →
   overview split → laptop scene → challenge split + bento →
   solution + 3-col bento → dark laptop scene → quote →
   prev/next footer.

   Motion (case-study.js): Arpeggio grow (scale 1.6 → 1,
   CustomEase 0.5,0.26,0.31,1.01) on the hero and [data-grow]
   frames; scrubbed zoom + parallax on [data-bleed-zoom];
   scrubbed screen pans on [data-pan]; soft text reveals
   on [data-cs-reveal]. Everything below is static-safe: no JS,
   no motion, full layout.
   ============================================================ */
.case {
    background: var(--paper);
    color: var(--dark-gray);
    min-height: 100vh;

    /* Content measure — tracks the global container token exactly
       (75rem base, 81.25rem at ≥1600px via tokens.css). */
    --case-container: var(--container);
    --case-shell: calc(var(--case-container) + 2 * var(--gutter));
    --case-scene: 62rem;                   /* laptop scenes */
}

/* ------------------------------------------------------------
   HERO — full-viewport environmental photo, top bar overlaid
   ------------------------------------------------------------ */
.case-hero {
    position: relative;
    z-index: 0;
    isolation: isolate;          /* contain transformed media paints */
    /* Arpeggio hero band: ~80vh, not a full viewport */
    height: min(80svh, 52rem);
    min-height: 30rem;
    overflow: hidden;
    background: var(--deep);
}

.case-hero__media {
    position: absolute;
    inset: 0;
    margin: 0;
    overflow: hidden;              /* clip grow/parallax inside the frame */
    will-change: transform;   /* JS parallax drift */
}
.case-hero__media img {
    position: absolute;
    inset: 0;
    width: 100%;
    height: 100%;
    object-fit: cover;
    /* bias the crop upward so the kiosk header survives the 80vh band */
    object-position: 50% 38%;
    transform-origin: 50% 50%;  /* JS grows 1.6 → 1 */
}
.case-hero__media img.case-hero__focus-right {
    object-position: 78% 42%;
}
/* Vertical street-sign photo: hold the clock and BANK block in the 80vh crop */
.case-hero__media img.case-hero__focus-sign {
    object-position: 48% 62%;
}
/* Landscape clock close-up: keep the face centered in the tall hero band */
.case-hero__media img.case-hero__focus-clock {
    object-position: 50% 50%;
}
/* Phone-in-hand landscape: keep the glowing screen in the 80vh band */
.case-hero__media img.case-hero__focus-phone {
    object-position: 42% 48%;
}

/* Legibility scrims — quiet at the top for the bar, a breath at the
   bottom for the tag. The photo itself stays the star. */
.case-hero::before,
.case-hero::after {
    content: '';
    position: absolute;
    inset: 0 0 auto;
    height: 9rem;
    background: linear-gradient(rgba(13, 15, 20, 0.55), transparent);
    z-index: 1;
    pointer-events: none;
}
.case-hero::after {
    inset: auto 0 0;
    height: 8rem;
    background: linear-gradient(transparent, rgba(13, 15, 20, 0.45));
}

/* Marketing marquee — big statement mid-left over the photo. A soft
   left-side scrim rides with it so the white type clears the image. */
.case-hero__copy {
    position: absolute;
    inset: 0;
    z-index: 2;
    display: flex;
    align-items: center;
    justify-content: center;
    padding-block: var(--space-lg) var(--space-2xl);
    padding-inline: 0;
    background: linear-gradient(100deg, rgba(13, 15, 20, 0.5), transparent 62%);
    pointer-events: none;
}
.case-hero__copy-block {
    width: min(100%, var(--case-shell));
    padding-inline: var(--gutter);
}
.case-hero__headline {
    margin: 0;
    max-width: 11.5em;   /* wraps to Arpeggio's ~3-line hero measure */
    font-family: var(--font-display);
    /* Design-system headline-lg role (Figma 96px @1440) — the impact scale */
    font-size: var(--fs-headline-lg);
    font-weight: var(--wt-display);
    letter-spacing: var(--tr-headline-lg);
    line-height: 1.02;
    color: var(--paper);
    text-wrap: balance;
    text-shadow: 0 2px 28px rgba(13, 15, 20, 0.45);
}
/* Hairline rule + subheadline under the marquee — Arpeggio type texture */
.case-hero__rule {
    display: block;
    width: min(44rem, 72%);
    height: 1px;
    margin: clamp(1.1rem, 2.4vw, 1.9rem) 0;
    background: rgba(255, 255, 255, 0.4);
}
.case-hero__sub {
    margin: 0;
    font-family: var(--font-body);
    font-size: var(--fs-paragraph-lg);
    font-weight: var(--wt-body-medium);
    line-height: 1.35;
    color: rgba(255, 255, 255, 0.92);
    text-shadow: 0 1px 18px rgba(13, 15, 20, 0.5);
}

/* Hero overlays — same centered column as .case-intro et al.
   The photo stays full-bleed; only nav, headline, and tag lock to grid. */
.case-hero__bar {
    position: absolute;
    inset: 0 0 auto;
    left: 50%;
    z-index: 2;
    transform: translateX(-50%);
    width: min(100%, var(--case-shell));
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: var(--space-md);
    padding: 1.4rem var(--gutter);
}
.case-hero__logo img {
    display: block;
    width: 9rem;
    height: auto;
    filter: brightness(0) invert(1);  /* white mark over the photo */
}
.case-hero__back {
    font-family: var(--font-body);
    font-size: var(--fs-paragraph-sm);
    font-weight: 700;
    letter-spacing: 0.08em;
    text-transform: uppercase;
    color: rgba(255, 255, 255, 0.85);
    text-decoration: none;
    transition: color var(--dur-fast) var(--ease-out);
}
.case-hero__back:hover { color: #fff; }

.case-hero__tag {
    position: absolute;
    left: 50%;
    bottom: 1.6rem;
    z-index: 2;
    transform: translateX(-50%);
    width: min(100%, var(--case-shell));
    margin: 0;
    padding-inline: var(--gutter);
    font-family: var(--font-body);
    font-size: var(--fs-paragraph-sm);
    font-weight: 700;
    letter-spacing: 0.18em;
    text-transform: uppercase;
    color: rgba(255, 255, 255, 0.9);
}

/* ------------------------------------------------------------
   INTRO — huge title left, brief description right (Arpeggio row)
   ------------------------------------------------------------ */
.case-intro {
    position: relative;
    z-index: 1;                  /* sit above any hero compositor bleed on scroll */
    background: var(--paper);
    display: grid;
    grid-template-columns: 1.05fr 1fr;
    gap: clamp(1.5rem, 4vw, 4.5rem);
    align-items: start;
    max-width: calc(var(--case-container) + 2 * var(--gutter));
    margin-inline: auto;
    padding: var(--space-xl) var(--gutter);
}
.case-intro__title {
    margin: 0;
    font-family: var(--font-display);
    font-size: clamp(2.3rem, 4.4vw, 4.1rem);
    font-weight: var(--wt-display);
    letter-spacing: -0.035em;
    line-height: 1.02;
    color: var(--blue);
    text-wrap: balance;
}
.case-intro__desc {
    margin: 0.5em 0 0;
    font-family: var(--font-body);
    font-size: var(--fs-paragraph-lg);
    line-height: 1.5;
    color: var(--muted);
    text-wrap: pretty;
}

/* ------------------------------------------------------------
   META BAND — light-gray summary strip (client · date · type · tech)
   ------------------------------------------------------------ */
/* Full-bleed gray plate; content constrained to the container grid. */
.case-meta {
    position: relative;
    isolation: isolate;   /* z:-1 texture/plate stay inside this box */
    background: var(--light-gray);
    padding: var(--space-xl) 0;
}

/* Interactive rules texture (the hero's line field) on light sections.
   z:-1 inside the isolated section: above the background plate, below
   all content. --bleed escapes the container to cover the full-width
   gray plate on the meta band. */
.case-rules {
    position: absolute;
    inset: 0;
    z-index: -1;
    width: 100%;
    height: 100%;
    pointer-events: none;
}
.case-rules--bleed {
    left: 50%;
    width: 100vw;
    transform: translateX(-50%);
}
.case-meta__anchor,
.case-meta__grid {
    max-width: calc(var(--case-container) + 2 * var(--gutter));
    margin-inline: auto;
    padding-inline: var(--gutter);
}
@media (min-width: 900px) {
    .case-meta {
        position: relative;
        isolation: isolate;   /* keeps the z:-1 plate inside this box */
        background: none;
        display: grid;
        /* Figma cs-project: 640 / 640 halves with the standard gap */
        grid-template-columns: 1fr 1fr;
        gap: var(--gap-sm);
        max-width: calc(var(--case-container) + 2 * var(--gutter));
        margin-inline: auto;
        padding: var(--space-xl) var(--gutter);
    }
    .case-meta::before {
        /* the gray plate escapes the container back to full-bleed */
        content: '';
        position: absolute;
        inset: 0;
        left: 50%;
        width: 100vw;
        transform: translateX(-50%);
        background: var(--light-gray);
        z-index: -1;
    }
    .case-meta__anchor,
    .case-meta__grid {
        max-width: none;
        margin-inline: 0;
        padding-inline: 0;
    }
}
/* Small-caps anchor line (Figma "A partnership, not a project") */
.case-meta__anchor {
    margin: 0 0 var(--space-lg);
    font-family: var(--font-body);
    font-size: var(--fs-paragraph-sm);
    font-weight: 700;
    letter-spacing: 0.16em;
    text-transform: uppercase;
    line-height: 1.15;
    color: var(--dark-gray);
}
@media (min-width: 900px) { .case-meta__anchor { margin-bottom: 0; } }

/* Fact cells: 2×2 grid; values stack one per line (Figma paragraph 16/24) */
.case-meta__grid {
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: var(--space-lg) var(--gap-md);
    margin-block: 0;
}
.case-meta__grid dt {
    margin: 0 0 0.65rem;
    font-family: var(--font-display);
    font-size: var(--fs-section-title);
    font-weight: var(--wt-display);
    letter-spacing: var(--tr-section-title);
    line-height: var(--lh-section-title);
    color: var(--dark-gray);
}
.case-meta__grid dd {
    margin: 0;
    font-family: var(--font-body);
    font-size: var(--fs-paragraph);
    font-weight: var(--wt-body-medium);
    line-height: var(--lh-paragraph);
    color: var(--muted);
    text-wrap: pretty;
}
.case-meta__grid dd + dd { margin-top: 0.4rem; }

/* ------------------------------------------------------------
   NARRATIVE SECTIONS (overview / challenge / solution)
   ------------------------------------------------------------ */
.case-section {
    max-width: calc(var(--case-container) + 2 * var(--gutter));
    margin-inline: auto;
    padding: var(--space-xl) var(--gutter);
}

/* Figma split — title/heading on the left half, content on the right
   (Overview, Challenge). Mirrors the intro row's 640/640 geometry. */
@media (min-width: 900px) {
    .case-split {
        display: grid;
        grid-template-columns: 1fr 1fr;
        gap: var(--gap-sm);
        align-items: start;
    }
}

/* Lede — design-system "lede" role (Figma 36/44 Raleway 400) */
.case-lede {
    margin: 0;
    font-family: var(--font-body);
    font-size: var(--fs-lede);
    font-weight: var(--wt-body);
    letter-spacing: 0;
    line-height: var(--lh-lede);
    color: var(--dark-gray);
    text-wrap: pretty;
}
.case-lede--full { margin-top: var(--space-md); }

.case-body {
    margin: var(--space-md) 0 0;
    max-width: 40rem;
    font-family: var(--font-body);
    font-size: var(--fs-paragraph);
    font-weight: var(--wt-body-medium);
    line-height: var(--lh-paragraph);
    color: var(--muted);
    text-wrap: pretty;
}
.case-body p + p { margin-top: 1.1em; }

.case-caption {
    margin: var(--space-md) 0 0;
    max-width: 34rem;
    font-family: var(--font-body);
    font-size: var(--fs-paragraph);
    line-height: 1.55;
    color: var(--muted);
}
.case-caption--center {
    margin-inline: auto;
    text-align: center;
}

/* ------------------------------------------------------------
   DEVICE SCENES — laptop mockup with a panning full-page capture
   ------------------------------------------------------------ */
.case-scene {
    position: relative;
    isolation: isolate;   /* hosts the z:-1 rules texture */
    background: var(--paper-warm);
    padding: var(--space-2xl) var(--gutter);
}
.case-scene--dark {
    background: var(--deep);
}
.case-scene--dark .case-caption { color: var(--muted-dark); }
.case-scene__inner {
    max-width: var(--case-scene);
    margin-inline: auto;
    display: flex;
    flex-direction: column;
    align-items: center;
}

/* CSS laptop — thin ink bezel, panning 16:10 viewport, aluminum base */
.laptop {
    width: 100%;
    margin: 0;
}
.laptop__lid {
    display: block;
    background: #101216;
    border-radius: clamp(0.6rem, 1.4vw, 1.1rem) clamp(0.6rem, 1.4vw, 1.1rem) 0 0;
    padding: clamp(0.5rem, 1.2vw, 0.95rem);
    box-shadow: 0 30px 80px rgba(13, 15, 20, 0.28);
}
.laptop__viewport {
    display: block;
    position: relative;
    aspect-ratio: 16 / 10;
    overflow: hidden;
    border-radius: 0.3rem;
    background: #fff;
}
.laptop__viewport img {
    display: block;
    width: 100%;
    height: auto;          /* full-page capture; JS pans it upward */
    will-change: transform;
}
.laptop__base {
    display: block;
    position: relative;
    height: clamp(0.55rem, 1.3vw, 0.95rem);
    margin-inline: -4.5%;
    background: linear-gradient(#eef0f3, #c6cbd3);
    border-radius: 0 0 clamp(0.8rem, 2vw, 1.4rem) clamp(0.8rem, 2vw, 1.4rem);
}
.laptop__base::after {
    content: '';
    position: absolute;
    top: 0;
    left: 50%;
    transform: translateX(-50%);
    width: 12%;
    height: 42%;
    background: #aeb4bd;
    border-radius: 0 0 0.5rem 0.5rem;
}

/* ------------------------------------------------------------
   FULL-BLEED IMAGE MOMENT — Arpeggio grow frame
   ------------------------------------------------------------ */
.case-bleed {
    margin: 0;
    padding: 0 0 var(--space-xl);
}
.case-bleed__frame {
    display: block;
    position: relative;   /* contain absolutely positioned .case-ph placeholders */
    height: clamp(24rem, 78svh, 46rem);
    overflow: hidden;
    background: var(--deep);
}
.case-bleed__frame img {
    display: block;
    width: 100%;
    height: 100%;
    object-fit: cover;
    transform-origin: 50% 50%;   /* JS: grow, or bleed-zoom + parallax */
}
.case-bleed__frame[data-bleed-zoom] img {
    will-change: transform;
}
.case-bleed .case-caption { padding-inline: var(--gutter); }

/* Gray SWAP slots — replace with imagery when project assets land.
   Same box geometry as the real frames so the template holds. */
.case-ph {
    display: block;
    width: 100%;
    height: 100%;
    background: #e4e4e4;
}
.case-hero .case-ph {
    position: absolute;
    inset: 0;
    width: 100%;
    height: 100%;
    min-height: 100%;
    background: #1c2028;
}
.laptop__viewport .case-ph {
    position: absolute;
    inset: 0;
    background: #d8dbe0;
}
.case-scene--dark .laptop__viewport .case-ph {
    background: #2a3038;
}
.case-bento__frame .case-ph,
.case-bleed__frame .case-ph {
    position: absolute;
    inset: 0;
}

/* ------------------------------------------------------------
   SECTION TITLES — Figma case-study-section-title: quiet eyebrow
   (client name) over the display heading (headline role, 60px)
   ------------------------------------------------------------ */
.case-title { margin: 0 0 var(--space-md); }
.case-split .case-title { margin-bottom: 0; }
.case-eyebrow {
    margin: 0 0 1.25rem;
    font-family: var(--font-body);
    font-size: var(--fs-paragraph-sm);
    color: var(--muted);
}
.case-heading {
    margin: 0;
    font-family: var(--font-display);
    font-size: var(--fs-headline);
    font-weight: var(--wt-display);
    letter-spacing: var(--tr-headline);
    line-height: var(--lh-headline);
    color: var(--blue);
}

/* ------------------------------------------------------------
   BENTO — image arrangements (scaffold; swap imagery freely)
   ------------------------------------------------------------ */
.case-bento {
    display: grid;
    gap: clamp(1rem, 2.2vw, 2rem);
    max-width: calc(var(--case-container) + 2 * var(--gutter));
    margin-inline: auto;
    padding: 0 var(--gutter) var(--space-lg);
}
.case-bento[hidden],
.case-bleed[hidden] {
    display: none;
}
/* DEBI only: one letter-size capture filling the case container, not bleed */
.case-bento--page {
    display: block;
}
.case-bento--page .case-bento__frame--page {
    height: auto;
    aspect-ratio: 612 / 792;
    background: var(--paper);
    border-radius: var(--radius);
}
.case-bento--page .case-bento__frame--page img {
    object-fit: cover;
}
.case-bento--page .case-caption {
    margin-block: var(--space-md) 0;
}
.case-bento__item { margin: 0; }
.case-bento__frame {
    display: block;
    position: relative;
    overflow: hidden;
    border-radius: var(--radius);
    background: var(--light-gray);
    height: 100%;
}
.case-bento__frame img,
.case-bento__frame video {
    display: block;
    width: 100%;
    height: 100%;
    object-fit: cover;
    transform-origin: 50% 50%;   /* JS: Arpeggio grow 1.6 → 1 */
}
/* Panning frames hold tall site captures: natural height, JS scrolls them */
.case-bento__frame[data-pan] img {
    height: auto;
    will-change: transform;
}

/* Challenge (Figma Bento Image Box 1): tall portrait left spanning both
   rows (640×786), two landscapes stacked right (640×383 each) */
.case-bento--challenge {
    grid-template-columns: 1fr 1fr;
    grid-template-rows: auto auto;
}
.case-bento--challenge .case-bento__item--tall {
    grid-row: 1 / span 2;
}
.case-bento--challenge .case-bento__item--tall .case-bento__frame {
    aspect-ratio: 640 / 786;
}
.case-bento__frame--landscape { aspect-ratio: 640 / 383; }
/* Vertical slice biased toward the kiosk in the wide lobby photo */
.case-bento__crop-left { object-position: 38% 50%; }
/* Tall site captures shown as stills: hold the page top */
.case-bento__crop-top { object-position: 50% 0; }
/* Pin the crop to the left edge (IB clock in a tall frame) */
.case-bento__crop-start { object-position: 0 50%; }
/* Vertical slice of the station photo, centered on the kiosk */
.case-bento__crop { object-position: 42% 50%; }

/* Solution (Figma Bento - Solution): 3 equal columns — col 1 is a
   shorter frame (420×505) with the closing paragraph beneath;
   cols 2–3 run deeper (420×700, staggered baseline) */
.case-bento--solution {
    grid-template-columns: repeat(3, 1fr);
    align-items: start;
}
.case-bento__col {
    display: flex;
    flex-direction: column;
    gap: var(--space-md);
}
.case-bento__frame--short { aspect-ratio: 420 / 505; }
.case-bento__frame--deep  { aspect-ratio: 420 / 700; }
/* Product art (cards, cutouts) — show the whole object on a dark field */
.case-bento__frame--contain {
    background: #1a1c20;
}
.case-bento__frame--contain img {
    object-fit: contain;
    padding: 12%;
}
.case-bento__crop-cafe { object-position: 78% 42%; }
/* Landscape photo in a tall cell — keep the subject on the right */
.case-bento__crop-right { object-position: 72% 50%; }

/* Wide diagrams (ACAPT Compass): show the whole graphic, do not crop labels */
.case-bleed__frame--diagram {
    height: auto;
    aspect-ratio: 3644 / 1390;
    background: var(--paper);
}
.case-bleed__frame--diagram img {
    object-fit: contain;
    object-position: 50% 50%;
    box-sizing: border-box;
    padding: 0.5rem clamp(0.35rem, 2vw, 2rem);
}

/* Click-through from a bento cell (ANPT → dedicated LMS case study) */
a.case-bento__launch {
    display: flex;
    flex-direction: column;
    gap: var(--space-md);
    text-decoration: none;
    color: inherit;
}
.case-bento__more {
    display: inline-flex;
    align-items: center;
    gap: 0.4em;
    margin-top: 0.85em;
    font-family: var(--font-body);
    font-size: var(--fs-paragraph-sm);
    font-weight: var(--wt-body-bold);
    letter-spacing: 0.1em;
    text-transform: uppercase;
    color: var(--orange);
    transition: color var(--dur-fast) var(--ease-out);
}
a.case-bento__launch:hover .case-bento__more,
a.case-bento__launch:focus-visible .case-bento__more {
    color: var(--blue);
}
a.case-bento__launch:focus-visible {
    outline: 2px solid var(--orange);
    outline-offset: 6px;
    border-radius: var(--radius);
}

/* Closing paragraph under the col-1 frame (interchangeable texture) */
.case-bento__note {
    margin: 0;
    font-family: var(--font-body);
    font-size: var(--fs-paragraph);
    font-weight: var(--wt-body-medium);
    line-height: var(--lh-paragraph);
    color: var(--muted);
    text-wrap: pretty;
}

/* Minimal browser chrome around site captures */
.browser-frame {
    display: block;
    margin: 0;
    border-radius: 0.45rem;
    overflow: hidden;
    background: var(--paper);
    box-shadow: 0 24px 64px rgba(13, 15, 20, 0.18);
}
.browser-frame__bar {
    display: flex;
    gap: 5px;
    padding: 9px 12px;
    background: #eceff3;
}
.browser-frame__bar i {
    width: 9px;
    height: 9px;
    border-radius: 50%;
    background: #d2d8e0;
}
.browser-frame__viewport {
    display: block;
    position: relative;
    aspect-ratio: 5 / 4;
    overflow: hidden;
}
.browser-frame__viewport img {
    display: block;
    width: 100%;
    height: auto;
    will-change: transform;
}

/* Brand-blue duotone — grayscale image multiplied over a blue plate,
   warmed in the highlights. Keeps mixed-quality photography on-brand. */
.duo {
    position: relative;
    background: var(--blue);
}
.duo > img {
    filter: grayscale(1) invert(0.18) brightness(2) contrast(0.9);
    mix-blend-mode: multiply;
}
.duo::after {
    content: '';
    position: absolute;
    inset: 0;
    background: linear-gradient(160deg, rgba(240, 82, 35, 0.18), transparent 55%);
    mix-blend-mode: screen;
    pointer-events: none;
}

/* ------------------------------------------------------------
   PULL QUOTE — matches homepage .quote: orange mark above display
   type, then quiet attribution. Same tokens as css/sections.css.
   ------------------------------------------------------------ */
.case-quote {
    display: flex;
    flex-direction: column;
    align-items: flex-start;
    gap: var(--space-md);
    margin: 0;
    text-align: left;
}
/* Exported Figma asset. Both dimensions are explicit: the SVG carries
   preserveAspectRatio="none", so a single-axis size would distort it. */
.case-quote__mark {
    flex: none;
    width: 75.8px;
    height: 54.6px;
}
.case-quote blockquote { margin: 0; }
.case-quote blockquote p {
    margin: 0;
    font-family: var(--font-display);
    font-size: var(--fs-headline);
    font-weight: var(--wt-display);
    letter-spacing: var(--tr-headline);
    line-height: 1.12;
    color: var(--blue);
    text-wrap: pretty;
}
.case-quote figcaption {
    margin: 0;
    font-family: var(--font-body);
    font-size: var(--fs-paragraph-lg);
    font-weight: var(--wt-body-medium);
    line-height: 1.4;
    letter-spacing: 0;
    color: var(--muted);
}

/* ------------------------------------------------------------
   FOOTER — CTA + next-project nav
   ------------------------------------------------------------ */
.case-footer {
    max-width: calc(var(--case-container) + 2 * var(--gutter));
    margin-inline: auto;
    padding: var(--space-xl) var(--gutter) var(--space-2xl);
    border-top: 1px solid var(--line);
}
.case-footer__note {
    margin: 0;
    font-family: var(--font-body);
    font-size: var(--fs-paragraph);
    color: var(--muted);
}
.case-footer__note a {
    color: var(--orange);
    text-decoration: underline;
    text-underline-offset: 0.15em;
}
/* Prev / Next pair — SWAP hrefs as sibling case studies ship */
.case-footer__nav {
    display: flex;
    justify-content: space-between;
    align-items: end;
    gap: var(--space-md);
    margin-top: var(--space-lg);
}
.case-footer__link {
    display: block;
    text-decoration: none;
}
.case-footer__link--next { text-align: right; }
.case-footer__link-label {
    display: block;
    font-family: var(--font-body);
    font-size: var(--fs-paragraph-sm);
    font-weight: 700;
    letter-spacing: 0.18em;
    text-transform: uppercase;
    color: var(--muted);
}
.case-footer__link-title {
    display: block;
    margin-top: 0.35rem;
    font-family: var(--font-display);
    font-size: clamp(1.6rem, 3.4vw, 2.8rem);
    font-weight: var(--wt-display);
    letter-spacing: -0.03em;
    color: var(--blue);
    transition: color var(--dur-fast) var(--ease-out);
}
.case-footer__link:hover .case-footer__link-title { color: var(--orange); }

/* ------------------------------------------------------------
   RESPONSIVE
   ------------------------------------------------------------ */
@media (max-width: 899px) {
    .case-intro { grid-template-columns: 1fr; }
    /* Splits stack: title above content */
    .case-split .case-title,
    .case-split > .case-heading { margin-bottom: var(--space-md); }
    /* Bentos collapse for portrait tablets / phones */
    .case-bento--challenge,
    .case-bento--solution {
        grid-template-columns: 1fr;
    }
    .case-bento--challenge .case-bento__item--tall {
        grid-row: auto;
    }
    .case-bento--challenge .case-bento__item--tall .case-bento__frame {
        aspect-ratio: 4 / 3;
    }
    .case-bento__frame--short { aspect-ratio: 4 / 3.4; }
    .case-bento__frame--deep {
        aspect-ratio: 3 / 4;
        max-width: 24rem;
        margin-inline: auto;
        width: 100%;
    }
    /* Footer prev/next stacks */
    .case-footer__nav {
        flex-direction: column;
        align-items: flex-start;
        gap: var(--space-lg);
    }
    .case-footer__link--next { text-align: left; }
}
/* Portrait tablets and phones: the kiosk fills the narrow frame, so the
   marquee drops to the darker floor area under a stronger bottom scrim. */
@media (max-width: 899px) {
    .case-hero__copy {
        align-items: flex-end;
        padding-bottom: 7.5rem;   /* clears the wrapped subline tag */
        background: linear-gradient(
            transparent 30%,
            rgba(13, 15, 20, 0.42) 62%,
            rgba(13, 15, 20, 0.78)
        );
    }
    .case-hero__headline { font-size: clamp(2rem, 6.6vw, 2.9rem); }
    .case-hero__rule { width: min(20rem, 78%); }
    .case-hero__sub { font-size: var(--fs-paragraph); }
}
@media (max-width: 599px) {
    .case-meta__grid { grid-template-columns: 1fr; gap: var(--space-md); }
    .case-hero { min-height: 28rem; }
}