/* ===================================================================
   Case Studies page — per-page styles (loads after css/styles.css). Namespace: .case-* only.
   Ported 2026-09-18 from case-studies-lab.html with the user's LOCKED values baked in as
   plain CSS (no lab panel, no runtime overrides). CASE-STUDIES-LAB-SPEC.md §3 lists the lock.
   =================================================================== */

  .case {
    --case-mq-mask: 15px;
    --case-mq-gap: 20px;
    --case-mq-h: 45px;
    --case-mq-op: .5;
    --case-mq-dur: 24s;
    --case-title-weight: 400;
    --case-title-tracking: -.028em;
    --case-title-top: 20px;
    --case-title-x: 140px;
    --case-gap-x: 30px;
    --case-gap-y: 40px;
    --case-radius: 24px;
    --case-sticky-off: 24px;
    --case-big-title: 35px;
    --case-shade: .85;
    --case-overlay-color: rgba(33, 33, 33, .6);
    --case-overlay-op: 1;
    --case-zoom: 1.05;
    --case-zoom-big: 1.03;
    --case-zoom-dur: .5s;
    --case-wall-w: 292px;
    --case-wall-gap: 12px;
    --case-wall-dur: 75s;
    --case-wall-tint: #FFF5F0;
    --case-wall-fade: .25;
  }

  .case { display: block; }
  .case-wrap { width: min(1312px, 100% - 2 * var(--gutter)); margin-inline: auto; }
  .case-h2 { font-family: "Geist", sans-serif; font-weight: 400; font-size: 40px; line-height: 1.2; letter-spacing: -.025em; color: var(--text-strong); margin: 0 auto; max-width: 960px; }
  .case-lead { font-size: 16px; line-height: 1.375; color: #565656; max-width: 540px; margin: 24px auto 0; }
  :root[data-theme="dark"] .case-lead { color: var(--text); }

  /* ---- 1 . Hero display title ---- */
  .case-hero { padding-top: 0; overflow-x: clip; }   /* clip, not hidden: a shifted title must not grow the page's scroll width, and clip keeps this out of scroll-container land */
  .case-title {
    font-family: "Geist", sans-serif;
    font-weight: var(--case-title-weight);
    letter-spacing: var(--case-title-tracking);
    line-height: .92;
    color: var(--headline);
    white-space: nowrap;
    margin: var(--case-title-top) 0 0;
    /* 2026-10-18 (the user): the cap 190 → 130 px and the title CENTRED — the lab's 140 px visual shift (--case-title-x,
       translateX) belonged to the full-width 190 title and is dropped; case-studies.js TITLE_CAP = the same 130 */
    text-align: center;
    transform: none;
    font-size: 130px;
  }

  /* ---- 2 . Logo marquee ---- */
  .case-logos { margin-top: 64px; }
  .case-logos__lead { font-size: 16px; line-height: 1.375; color: #565656; text-align: center; margin: 24px 0 32px; }
  :root[data-theme="dark"] .case-logos__lead { color: var(--text); }
  .case-marquee + .case-marquee { margin-top: 20px; }
  .case-marquee__mask {
    overflow: clip;
    -webkit-mask-image: linear-gradient(90deg, transparent 0, #000 var(--case-mq-mask), #000 calc(100% - var(--case-mq-mask)), transparent 100%);
    mask-image: linear-gradient(90deg, transparent 0, #000 var(--case-mq-mask), #000 calc(100% - var(--case-mq-mask)), transparent 100%);
  }
  .case-marquee__track {
    display: flex;
    width: max-content;
    animation: case-mq var(--case-mq-dur) linear infinite;
  }
  .case-marquee__track[data-dir="reverse"] { animation-direction: reverse; }
  .case-marquee__item { padding: 0 var(--case-mq-gap); display: flex; align-items: center; }
  .case-marquee__item img {
    height: var(--case-mq-h); width: auto; object-fit: contain;
    opacity: var(--case-mq-op);   /* 2026-09-18: the grayscale(1) filter is GONE — the user wants the marquee logos in colour, like the landing carousel */
    transition: opacity .2s ease;
  }
  .case-marquee__item img:hover { opacity: 1; }
  :root[data-theme="dark"] .case-marquee__item img { filter: var(--logo-filter); }
  @keyframes case-mq { to { transform: translateX(-50%); } }

  /* ---- 3 . Featured grid ---- */
  .case-featured { margin-top: 64px; }
  .case-featured__grid { display: grid; grid-template-columns: 1fr 1fr; gap: var(--case-gap-y) var(--case-gap-x); }
  .case-big { grid-row: span 2; height: 100%; }
  .case-big__sticky { position: sticky; top: calc(74px + var(--case-sticky-off)); }
  .case-big__link { display: block; color: #fff; }
  .case-big__media { width: 100%; aspect-ratio: 3 / 4; max-height: calc(100vh - 74px - 48px); overflow: hidden; border-radius: var(--case-radius); position: relative; background: #0a1128; }
  .case-cover { position: absolute; inset: 0; transition: transform var(--case-zoom-dur) ease-in-out; transform-origin: center; }
  .case-cover--photo { width: 100%; height: 100%; object-fit: cover; }
  .case [hidden] { display: none !important; }   /* styles.css resets img/a to display:block, which beats the UA [hidden] rule (the closer-form gotcha) */
  .case-cover--navy { background: radial-gradient(120% 80% at 20% 10%, #263768, #0a1128 70%); }
  .case-cover--coral { background: linear-gradient(160deg, #ff8d47, #fa573e 55%, #7a2a1a); }
  .case-cover--steel { background: linear-gradient(160deg, #5674a6, #0a1733); }
  .case-cover__map { position: absolute; inset: 0; background: url("../assets/img/hero/worldmap-dots.svg?v=2") center / 140% no-repeat; opacity: .35; mix-blend-mode: screen; pointer-events: none; }
  .case-card .case-cover__map { background: url("../assets/img/case-studies/globe.png?v=1") 50% 55% / 96% no-repeat; opacity: 1; mix-blend-mode: normal; }   /* the Stripe globe in its own colours (a still of globe-stripe-lab.html, rotY .45, reduced motion) instead of the flat map on the small cards — the user's pick, 2026-10-18 (it fades on the coral covers, accepted) */
  .case-big__link:hover .case-cover { transform: scale(var(--case-zoom-big)); }
  .case-big__shade { position: absolute; inset: 0; background: linear-gradient(to top, rgba(10, 23, 51, var(--case-shade)), transparent 55%); pointer-events: none; }
  .case-big__overlay { position: absolute; inset: 0; padding: 32px; display: flex; flex-direction: column; justify-content: flex-end; }
  .case-big__logo { width: 230px; max-width: 60%; height: auto; filter: brightness(0) invert(1); }
  .case-big__title { font-family: "Geist", sans-serif; font-weight: 500; font-size: var(--case-big-title); line-height: 1.1; color: #fff; margin: 0; text-wrap: pretty; }
  .case-big__link:hover .case-big__title { text-decoration: underline; text-underline-offset: .12em; }

  .case-featured__right { display: flex; flex-direction: column; }
  .case-grid { display: grid; grid-template-columns: 1fr 1fr; gap: var(--case-gap-y) var(--case-gap-x); }
  .case-card { display: block; color: inherit; }
  .case-card__media { aspect-ratio: 3 / 4; overflow: hidden; border-radius: var(--case-radius); position: relative; isolation: isolate; background: #0a1128; }
  .case-card:hover .case-cover, .case-card:focus-visible .case-cover { transform: scale(var(--case-zoom)); }
  .case-card__top { position: absolute; inset: 0 0 auto 0; height: 80px; background: linear-gradient(to bottom, rgba(10, 23, 51, .5), transparent); pointer-events: none; z-index: 2; }
  .case-card__logo { position: absolute; left: 16px; top: 16px; height: 40px; max-width: calc(100% - 32px); object-fit: contain; object-position: left center; filter: brightness(0) invert(1); z-index: 3; }
  .case-card__hover { position: absolute; inset: 0; background: var(--case-overlay-color); opacity: 0; transition: opacity var(--case-zoom-dur) ease-in-out; display: flex; align-items: flex-end; padding: 0 16px 20px; z-index: 3; }
  .case-card:hover .case-card__hover, .case-card:focus-visible .case-card__hover { opacity: var(--case-overlay-op); }
  .case-stat { color: #fff; }
  .case-stat__row { display: flex; align-items: flex-end; gap: 8px; }
  .case-stat__num { font-family: "Geist", sans-serif; font-weight: 500; font-size: 40px; line-height: 1.05; color: #fff; }
  .case-stat__unit { font-size: 18px; line-height: 1.3; color: #fff; }
  .case-stat__desc { display: block; font-size: 16px; line-height: 1.375; color: rgba(255, 255, 255, .75); margin-top: 12px; }
  .case-card__title { font-family: "Geist", sans-serif; font-weight: 500; font-size: 20px; line-height: 1.3; color: var(--text-strong); margin: 24px 0 0; text-wrap: pretty; }
  .case-card:hover .case-card__title { text-decoration: underline; text-underline-offset: .12em; }
  .case-tags { display: flex; flex-wrap: wrap; align-items: center; gap: 8px; margin-top: 12px; font-size: 13px; letter-spacing: .04em; text-transform: uppercase; color: #565656; }
  :root[data-theme="dark"] .case-tags { color: var(--text); }
  .case-tags--light { color: rgba(255, 255, 255, .78); }
  .case-tags__sep { opacity: .5; }


  /* ---- 5 . Stats wall ---- */
  .case-wall { padding-top: 128px; overflow-x: clip; }   /* the 100vw viewport below breaks out by scrollbar/2 on each side; clip it here so the page never gains a horizontal scrollbar (review 2026-09-18) */
  .case-wall__head { text-align: center; }
  .case-wall__viewport { overflow: hidden; margin-top: 64px; width: 100vw; margin-left: calc(50% - 50vw); }
  .case-wall__track { display: flex; gap: var(--case-wall-gap); width: max-content; animation: case-wall var(--case-wall-dur) linear infinite; }
  @keyframes case-wall { to { transform: translateX(calc(-50% - var(--case-wall-gap) / 2)); } }
  .case-wall__col { flex: 0 0 var(--case-wall-w); display: flex; flex-direction: column; gap: var(--case-wall-gap); }
  .case-wall__card { width: var(--case-wall-w); padding: calc(var(--case-wall-w) * .08); border-radius: calc(var(--case-wall-w) * .08); display: flex; flex-direction: column; justify-content: space-between; align-items: flex-start; overflow: hidden; text-decoration: none; }
  .case-wall__card--tall { height: calc(var(--case-wall-w) * 1.4); background: var(--case-wall-tint); }
  .case-wall__card--short { height: var(--case-wall-w); background: var(--surface); border: 1px solid #EDEDED; }
  .case-wall__card.is-faded { opacity: var(--case-wall-fade); }
  .case-wall__logo { height: calc(var(--case-wall-w) * .15); max-width: 70%; object-fit: contain; opacity: .6; filter: grayscale(1); }
  :root[data-theme="dark"] .case-wall__logo { filter: var(--logo-filter); }
  .case-wall__statrow { display: flex; align-items: baseline; }
  .case-wall__stat { font-family: "Geist", sans-serif; font-weight: 500; font-size: calc(var(--case-wall-w) * .277); letter-spacing: -.04em; line-height: 1; white-space: nowrap; color: var(--text-strong); }
  .case-wall__card--tall .case-wall__stat { color: var(--brand); }   /* #FF5F16 by marketing's decision (2026-10-13): 2.7:1 on the #FFF5F0 tint; the AA shade (4.0:1) before it */
  .case-wall__unit { font-size: calc(var(--case-wall-w) * .052); margin-left: .35em; color: inherit; }
  .case-wall__desc { font-size: calc(var(--case-wall-w) * .052); line-height: 1.375; margin-top: .3em; color: #565656; }
  .case-wall__card--tall .case-wall__desc { color: #0A1733; }
  :root[data-theme="dark"] .case-wall__card--short { border-color: var(--border); }
  :root[data-theme="dark"] .case-wall__card--short .case-wall__desc { color: var(--text); }
  :root[data-theme="dark"] .case-wall__card--tall { background: rgba(255, 95, 22, .12); }
  :root[data-theme="dark"] .case-wall__card--tall .case-wall__desc { color: rgba(255, 255, 255, .8); }


  /* ---- 7 . CTA ---- */
  /* The landing closer's orange wash, 1:1 (styles.css .closer): cta-wash.svg is the 1440x600 Figma curves
     (opacity .1 + blur baked), the band tracks the artwork aspect (440/1440 of the width) and object-fit:cover
     keeps it 1:1 + centred = artwork y80..520, exactly the landing band. No neighbour slices here (the wall
     above sits on the plain bg, the navy footer follows), so the wash's TOP edge fades in over 140px instead of
     hard-cutting at the seam (the far-edge rule); the bottom edge meets the footer's navy. */
  .case-cta { position: relative; overflow: hidden; height: calc(100vw * 440 / 1440); padding: 40px 0; display: flex; align-items: center; justify-content: center; }
  .case-cta__wash { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; pointer-events: none; user-select: none; z-index: 0;
    -webkit-mask-image: linear-gradient(to bottom, transparent, #000 140px); mask-image: linear-gradient(to bottom, transparent, #000 140px); }
  :root[data-theme="dark"] .case-cta__wash { opacity: .75; }
  .case-cta .case-wrap { position: relative; z-index: 1; text-align: center; }
  .case-cta .closer__form { margin: 40px auto 0; }
  .case-cta .closer__done { margin: 40px auto 0; justify-content: center; }

  /* ---- reduced motion ---- */
  @media (prefers-reduced-motion: reduce) {
    .case-marquee__track, .case-wall__track { animation-play-state: paused; }
    .case-cover, .case-card__hover { transition: none; }
  }