/* ============================================================
   L/G® â€" Case page  ·  case.css

   Layout philosophy
   â"€â"€â"€â"€â"€â"€â"€â"€â"€â"€â"€â"€â"€â"€â"€â"€â"€
   • Flex / grid for all document flow â€" no position:absolute
     on layout elements.
   • position:relative  â€" image wrappers that own decorative
     overlays (.c-dot, .c-bar, .c-corner).
   • position:absolute  â€" only for those decorative overlay
     spans anchored to specific image coordinates.
   • position:fixed     â€" the view toggle.

   Token usage (tokens.css)
   â"€â"€â"€â"€â"€â"€â"€â"€â"€â"€â"€â"€â"€â"€â"€â"€â"€â"€â"€â"€â"€â"€â"€â"€
   Spacing  â†' --s-4 … --s-128
   Type     â†' --t-16 … --t-212
   Colour   â†' --black, --white, --gray-7
   Tracking â†' --tr-tight, --tr-tightest
   Motion   â†' --ease-out, --dur-fast

   Figma frame: node 40001251:83870  (1920 × 10035)
   Grid: 12 cols · gutter 8px · margin 16px @ 1920px
   Col width = (1920 âˆ' 32 âˆ' 88) / 12 = 150px
   ============================================================ */


/* â"€â"€ page â"€â"€â"€â"€â"€â"€â"€â"€â"€â"€â"€â"€â"€â"€â"€â"€â"€â"€â"€â"€â"€â"€â"€â"€â"€â"€â"€â"€â"€â"€â"€â"€â"€â"€â"€â"€â"€â"€â"€â"€â"€â"€â"€â"€â"€â"€â"€â"€â"€â"€â"€â"€ */
/* overflow-x: clip on html + body — clips horizontal overflow without creating a
   scroll container, so position:sticky works correctly on this page.
   base.css sets body { overflow-x: hidden } which creates a scroll container
   and breaks sticky when html also has clip. Both must use clip. */
html { overflow-x: clip; }
body { overflow-x: clip; }

.case-page {
  background: var(--bg);
  color: var(--ink);
}

.case-page .hdr-tag,
.case-page .hdr-social { display: none !important; }


/* ============================================================
   INTRO
   Vertical flex column â€" title â†' meta grid â†' hero.

   Figma y-positions @ 1920px:
     title top   161px  â†' padding-top on intro
     cols top    449px  â†' margin below title = 449 âˆ' 361 = 88px
     hero top    689px  â†' min-height on cols = 689 âˆ' 449 = 240px
     hero bottom 1487px â†' intro ends naturally in flow
   ============================================================ */
.case-intro {
  display: flex;
  flex-direction: column;
  padding-top: calc(120 * var(--u));
  padding-left: calc(16 * var(--u));
  padding-right: calc(16 * var(--u));
  gap: calc(80 * var(--u));
}

section.case-intro {}

/* â"€â"€ title â"€â"€ */
.case-title {
  font-size:      var(--t-212);
  font-weight:    400;
  line-height: 1;
  letter-spacing: -0.033em;
  color: var(--white);
  mix-blend-mode: difference;
  pointer-events: none;
  user-select: none;
  margin-left: calc(-10 * var(--u));
}

/* â"€â"€ meta columns â€" 12-col CSS grid â"€â"€
   Column x-positions from Figma:
     scope   col 1  â†' x = 16            (16 + 0×158)
     details col 4  â†' x = 490           (16 + 3×158)
     year    col 8  â†' x = 1122          (16 + 7×158)
     awards  col 10 â†' x = 1438          (16 + 9×158)   */
.case-cols {
  display: grid;
  grid-template-columns: repeat(12, 1fr);
  column-gap: var(--s-8);
  align-items: start;
  /* pushes hero to Figma y=689: 689 âˆ' 449 = 240px */
}

.case-col {
  display: flex;
  flex-direction: column;
  gap: var(--s-32);
}

.case-col--scope   { grid-column: 1  / span 2; }
.case-col--details { grid-column: 4  / span 3; }
.case-col--year    { grid-column: 8  / span 1; }
.case-col--awards  { grid-column: 10 / span 3; }

.case-col-label {
  margin: 0;
  font-size:      var(--t-28);
  font-weight: 400;
  line-height:    1;
  letter-spacing: -1%;
  color: var(--white);
  mix-blend-mode: difference;
}

.case-col-body,
.case-col-list {
  margin: 0;
  padding: 0;
  list-style: none;
  font-size:      var(--t-16);
  font-weight:    500;
  line-height:    calc(18 / 16);
  letter-spacing: var(--tr-tight);
  color: var(--gray-7);
}

.case-col-list {
  display: flex;
  flex-direction: column;
  gap: var(--s-4);
}

.case-col-link {
  font-size:      var(--t-16);
  font-weight:    500;
  line-height:    calc(18 / 16);
  letter-spacing: var(--tr-tight);
  color: var(--gray-7);
  text-decoration: underline;
  text-underline-position: from-font;
  transition: opacity var(--dur-fast) var(--ease-out);
}
.case-col-link:hover { opacity: .7; }

/* â"€â"€ hero image â"€â"€
   Figma: x=16 w=1888 h=798 r=2 â†' margin-inline=16px  */
.case-hero {
  height: calc(800 * var(--u));
  overflow: hidden;
  width: 100%;
  border-radius: calc(2 * var(--u));
  background: var(--black);
  margin: 0;
}
.case-hero img {
  width: 100%; height: 100%;
  object-fit: cover; display: block;
}

/* â"€â"€ clip-mask word reveal â"€â"€
   .word clips; .word-inner slides up into view.
   @keyframes word-reveal is defined in site.css (loads first). */
.case-intro .word {
  display: inline-block;
  overflow: hidden;
  vertical-align: bottom;
  line-height: inherit;
  padding-bottom: 0.13em;
  margin-bottom:  -0.13em;
}
.case-intro .word-inner {
  display: inline-block;
  animation: word-reveal 700ms cubic-bezier(0.22, 1, 0.36, 1) backwards;
  animation-delay: calc(var(--i, 0) * 22ms + var(--delay, 80ms));
}

/* title gets a longer, more relaxed reveal so its ending overlaps
   naturally with the column texts appearing (700ms+) */
.case-title .word-inner {
  animation-duration: 1000ms;
  animation-delay:    calc(var(--i, 0) * 42ms + var(--delay, 80ms));
}


/* ============================================================
   DETAILED VIEW â€" content sections
   10/12 grid: padding-inline = 1/12 × 1920 = 160px each side
   ============================================================ */
.case-section {
  display: flex;
  flex-direction: column;
  gap: var(--s-64);
}

.case-section + .case-section {
  margin-top: calc(160 * var(--u));
}

/* â"€â"€ text block â"€â"€ */
.case-textblock {
  width: 100%;
  margin-inline: auto;
  display: flex;
  flex-direction: column;
  gap: var(--s-48);
  align-items: center;
  text-align: center;
}

.case-textblock__title {
  margin: 0;
  font-size:      calc(40 * var(--u));
  font-weight:    300;
  line-height:    1;
  letter-spacing: -0.01em;
}

.case-textblock__body {
  margin: 0;
  width: calc(780 * var(--u));
  font-size:      var(--t-16);
  font-weight:    400;
  line-height:    1.35;
  letter-spacing: 0.0125em;
  color: var(--gray-7);
}

/* â"€â"€ image wrappers â"€â"€
   position:relative is the containing block for .c-dot,
   .c-bar and .c-corner decorative overlays â€" legitimate.  */
.case-imgwrap {
  position: relative;
  overflow: hidden;
  background: var(--black);
}
.case-imgwrap img {
  width: 100%; height: 100%;
  object-fit: cover; display: block;
}

/* rounded â€" section 1, h=913 */
.case-imgwrap--rounded {
  height: calc(892 * var(--u));
  border-radius: calc(20 * var(--u));
  width: 100%;
}

/* annotation dots â€" at specific pixel coords inside the image */
.c-dot {
  position: absolute;
  left: calc(var(--dx) * var(--u));
  top:  calc(var(--dy) * var(--u));
  width:  calc(18.5 * var(--u));
  height: calc(4.9  * var(--u));
  background: #ffc470;
  border-radius: calc(20 * var(--u));
  pointer-events: none;
}

/* section 2 â€" column of two images */
.case-imgs-col {
  display: flex;
  flex-direction: column;
  gap: calc(20 * var(--u));
}

/* bar image, h=746 */
.case-imgwrap--bar { height: calc(746 * var(--u)); }

/* dark menu-bar overlay â€" at specific image coords */
.c-bar {
  position: absolute;
  left:   calc(137 * var(--u));
  top:    calc(36  * var(--u));
  width:  calc(1191 * var(--u));
  height: calc(84  * var(--u));
  background: #242424;
  pointer-events: none;
}

/* dark screenshots â€" two images stacked via CSS grid */
.case-imgwrap--dark {
  display: grid;
  height: calc(847 * var(--u));
}
.case-imgwrap--dark img {
  grid-column: 1;
  grid-row: 1;
  width: 100%; height: 100%;
  object-fit: cover; display: block;
  object-position: center top;
}
.case-imgwrap__behind { z-index: 1; }
.case-imgwrap__front  { z-index: 2; }

/* corner patch â€" decorative overlay anchored top-right */
.c-corner {
  position: absolute;
  right: 0; top: 0;
  width:  calc(156 * var(--u));
  height: calc(95  * var(--u));
  background: #191819;
  z-index: 3;
  pointer-events: none;
}

/* â"€â"€ collage â€" section 3 â"€â"€ */
.case-collage {
  display: flex;
  flex-direction: column;
  gap: var(--s-16);
}

.case-collage__main,
.case-collage__full,
.case-collage__left,
.case-collage__right {
  overflow: hidden;
  background: var(--black);
}

.case-collage__main { height: calc(1020 * var(--u)); }
.case-collage__full { height: calc(746  * var(--u)); }

.case-collage__row {
  display: flex;
  gap: var(--s-8);
  height: calc(524 * var(--u));
}

/* dotz2 w=930 · dotz1 fills remainder */
.case-collage__left  {flex: 0 0 calc(930 * var(--u));height: 100%;margin: 0;}
.case-collage__right { flex: 1 1 auto; height: 100%; }

.case-collage__main img,
.case-collage__full img,
.case-collage__left img,
.case-collage__right img {
  width: 100%; height: 100%;
  object-fit: cover; display: block;
}

/* â"€â"€ standalone images â"€â"€ */
.case-standalone {
  margin-top:    calc(80  * var(--u));
  margin-inline: calc(160 * var(--u));
  height: calc(900 * var(--u));
  overflow: hidden;
  background: var(--black);
}
.case-standalone--last { margin-bottom: calc(160 * var(--u)); }
.case-standalone img {
  width: 100%; height: 100%;
  object-fit: cover; display: block;
}


/* ============================================================
   VIEW TOGGLE â€" fixed · centered · same in both modes
   ============================================================ */
.view-toggle {
  position: fixed;
  bottom: calc(24 * var(--u));
  left: 50%;
  transform: translateX(-50%);
  z-index: 200;
  display: flex;
  align-items: center;
  padding: var(--s-4);
  background: rgba(255, 255, 255, 0.01);
  backdrop-filter: blur(32px);
  -webkit-backdrop-filter: blur(32px);
  border: 1px solid rgba(255, 255, 255, 0.45);
  border-radius: calc(16 * var(--u));
  overflow: hidden;
  transition: opacity 0.4s ease;
  /* mix-blend-mode: color-dodge; */
}

.view-toggle__btn {
  display: flex;
  align-items: center;
  justify-content: center;
  padding: calc(16 * var(--u)) var(--s-16);
  border-radius: calc(12 * var(--u));
  cursor: pointer;
  font-family: inherit;
  font-size: var(--t-18);
  font-weight:    400;
  line-height: 1;
  letter-spacing: 1%;
  white-space: nowrap;
  background: transparent;
  color: var(--black);
  transition: background var(--dur-fast) var(--ease-out),
              color     var(--dur-fast) var(--ease-out);
  background-blend-mode: difference;
}

.view-toggle__btn.is-active {
  background: var(--white);
  color: #212121;
  font-weight: 500;
}

.view-toggle__btn:not(.is-active)       {opacity: .85;}
.view-toggle__btn:not(.is-active):hover { opacity: 1; }


/* ============================================================
   UNIFIED CONTENT
   Single content block shared by both modes.
   Flexbox gap handles spacing between all children —
   display:none items are excluded from gap calculation so
   hidden .det-only elements never break the image rhythm.
   ============================================================ */
.case-content {
  display: flex;
  flex-direction: column;
  gap: var(--s-8);
  padding-top:    calc(96  * var(--u));
  padding-bottom: calc(48  * var(--u));
  padding-right: calc(160  * var(--u));
  padding-left: calc(160  * var(--u));
}

/* ── detailed-only elements: hidden in simplified mode ── */
html.is-simplified .det-only { display: none; }

/* standalone textblock wrappers need horizontal inset */
.det-only > .case-textblock {
  padding-inline: calc(160 * var(--u));
}

/* ============================================================
   DETAILED TEXT BLOCK — animated collapse on simplified
   ─────────────────────────────────────────────────────────────
   .det-text  : outer wrapper — padding + grid-row collapse
   Use alongside .det-only. The override below cancels display:none
   so the transition can run; at 0fr the block is visually gone.
   ============================================================ */
.det-text {
  display: grid;
  grid-template-rows: 1fr;
  padding-top:    calc(96 * var(--u));
  padding-bottom: calc(64 * var(--u));
  transition:
    grid-template-rows 240ms ease,
    padding-top        240ms ease,
    padding-bottom     240ms ease;
}

/* direct child = clip container; min-height:0 is required for 0fr collapse */
.det-text > * {
  overflow: hidden;
  min-height: 0;
}

/* text — enter / idle state (detailed mode) */
.det-text .case-textblock__title,
.det-text .case-textblock__body,
.det-text .case-outcomes__title,
.det-text .case-outcomes__num,
.det-text .case-outcomes__label {
  transform: translateY(0);
  opacity: 1;
  transition:
    transform 240ms cubic-bezier(0.22, 1, 0.36, 1),
    opacity   200ms ease;
}

/* simplified — cancel display:none, collapse via grid, animate text out.
   html.is-simplified gives specificity 0,3,1 — beats .det-only (0,2,1)
   and the text-idle rule (0,2,0) so both overrides win cleanly. */
html.is-simplified .det-only.det-text {
  display: grid;           /* stay in flow so the transition can run */
  grid-template-rows: 0fr;
  padding-top:    0;
  padding-bottom: 0;
}

html.is-simplified .det-text .case-textblock__title,
html.is-simplified .det-text .case-textblock__body,
html.is-simplified .det-text .case-outcomes__title,
html.is-simplified .det-text .case-outcomes__num,
html.is-simplified .det-text .case-outcomes__label {
  transform: translateY(-20px);
  opacity: 0;
  transition:
    transform 180ms cubic-bezier(0.4, 0, 1, 1),
    opacity   160ms ease;
}

/* ── simplified image order override ──────────────────────────────────
   Figma Simplified: screens-2 → screens-1 → tokens-system.
   Detailed narrative keeps screens-1 before screens-2 (document order).
   .case-content is flex-column; display:none det-only items leave the
   flow, so only these three need explicit order values to match Figma. */
html.is-simplified [data-simp-order="1"] { order: 1; }
html.is-simplified [data-simp-order="2"] { order: 2; }
html.is-simplified [data-simp-order="3"] { order: 3; }

/* ── base image block ──
   position:relative anchors the .c-bar decorative overlay */
.simp-img {
  position: relative;
  margin: 0;
  overflow: hidden;
  background: var(--black);
}
.simp-img img,
.simp-video {
  width: 100%; height: 100%;
  object-fit: cover; display: block;
}

/* gaps handled by flex gap on .case-content */

/* height variants */
.simp-img--h486  { height: calc(486  * var(--u)); }
.simp-img--h746  { height: calc(746  * var(--u)); }
.simp-img--h821  { height: calc(821  * var(--u)); }
.simp-img--h900  { height: calc(900  * var(--u)); }
.simp-img--h1020 { height: calc(1020 * var(--u)); }
.simp-img--h1028 { height: calc(1028 * var(--u)); }
.simp-img--h524  { height: calc(524  * var(--u)); }
.simp-img--h559  { height: calc(559  * var(--u)); }
.simp-img--h665  { height: calc(665  * var(--u)); }
.simp-img--h1052 { height: calc(1052 * var(--u)); }

/* colour fills */
.simp-img--light   { background: #f3f0ed; }
.simp-img--dark    { background: #37322e; }
.simp-img--white   { background: #ffffff; }

/* contain fit (for screenshot-style images with transparent/white padding) */
.simp-img--contain img { object-fit: contain; }

/* â"€â"€ side-by-side pair â"€â"€ */
.simp-pair {
  display: flex;
  height: calc(524 * var(--u));
  gap: var(--s-8);
}
.simp-pair figure {
  margin: 0;
  overflow: hidden;
  background: var(--black);
}
.simp-pair img {
  width: 100%; height: 100%;
  object-fit: cover; display: block;
}
.simp-pair__left  { flex: 0 0 calc(930 * var(--u)); }
.simp-pair__right { flex: 1 1 auto; }

/* equal-width variant (used for interview + mapping-triad) */
.simp-pair--equal {
  height: auto;
  gap: calc(20 * var(--u));
}
.simp-pair--equal .simp-pair__left,
.simp-pair--equal .simp-pair__right {
  flex: 1 1 0;
  height: auto;
  aspect-ratio: 1 / 1;
}

/* ── 3-column image trio (det-only think images) ── */
.case-imgs-trio {
  display: flex;
  gap: var(--s-8);
  height: calc(524 * var(--u));
}
.case-imgs-trio figure {
  flex: 1 1 0;
  margin: 0;
  overflow: hidden;
  background: var(--black);
}
.case-imgs-trio img {
  width: 100%; height: 100%;
  object-fit: cover; display: block;
}


/* ── next-project sticky scroll track ─────────────────────────────
   400vh gives plenty of scroll budget:
   - Phase 1: 0 → 1×vh  (camera window, sticky)
   - Phase 2: 1×vh → 2×vh  (window expands to full viewport)
   - remaining 200vh = safety margin
   ──────────────────────────────────────────────────────────────── */
.next-scroll-track {
  position: relative;
  height: 200vh;
}

.simp-next {
  position: sticky;
  top: 0;
  height: 100vh;
  overflow: hidden;
}

/* CSS transition handles the expand; JS adds .is-expanding class on trigger. */
.simp-next__window {
  position: absolute;
  overflow: hidden;
  background: var(--black);
  /* centred, 720/1920 = 37.5 vw natural size */
  width:  37.5vw;
  height: 37.5vw;
  left:   31.25vw;
  top:    calc((100vh - 37.5vw) / 2);
  transition: left   1.3s cubic-bezier(0.76, 0, 0.24, 1),
              top    1.3s cubic-bezier(0.76, 0, 0.24, 1),
              width  1.3s cubic-bezier(0.76, 0, 0.24, 1),
              height 1.3s cubic-bezier(0.76, 0, 0.24, 1);
}
/* expanded state — JS adds .is-expanding on .simp-next */
.simp-next.is-expanding .simp-next__window {
  left:   0;
  top:    0;
  width:  100vw;
  height: 100vh;
}
.simp-next__window img {
  width: 100%; height: 100%;
  object-fit: cover; display: block;
}

/* overlay sits on top, centers text over the image */
.simp-next__overlay {
  position: absolute;
  inset: 0;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: var(--s-8);
  pointer-events: none;
}
.simp-next__overlay a { pointer-events: auto; }

.simp-next__label {
  margin: 0;
  font-size:      calc(40 * var(--u));
  font-weight:    500;
  line-height:    calc(44 / 40);
  letter-spacing: var(--tr-tightest);
  color: var(--white);
  mix-blend-mode: difference;
  text-align: center;
  white-space: nowrap;
}

.simp-next__title {
  display: block;
  font-size:      calc(148 * var(--u));
  font-weight:    400;
  line-height:    calc(140 / 148);
  letter-spacing: var(--tr-tightest);
  color: var(--white);
  mix-blend-mode: difference;
  text-decoration: none;
  text-align: center;
  white-space: nowrap;
  transition: opacity var(--dur-fast) ease;
}
.simp-next__title:hover { opacity: .7; }


/* ============================================================
   OUTCOMES STATS BLOCK  — det-only, above last image
   Figma node 40001277:106768
   ============================================================ */
.case-outcomes {
  /* padding-inline: calc(160 * var(--u)); */
  display: flex;
  flex-direction: column;
  gap: calc(64 * var(--u));
  text-align: center;
}

/* title — 40px Regular, mix-blend-difference — matches case-col-label weight */
.case-outcomes__title {
  margin: 0;
  font-size:      calc(40 * var(--u));
  font-weight: 300;
  line-height: 1;
  letter-spacing: var(--tr-tightest);
  color: var(--white);
  mix-blend-mode: difference;
}

/* 4-col stats row */
.case-outcomes__grid {
  display: flex;
  gap: calc(24 * var(--u));
  padding-bottom: calc(96 * var(--u));
}

.case-outcomes__stat {
  flex: 1 0 0;
  min-width: 0;
  display: flex;
  flex-direction: column;
  gap: calc(12 * var(--u));
  align-items: center;
}

/* large number — 80px Regular, mix-blend-difference */
.case-outcomes__num {
  margin: 0;
  font-size:      calc(80 * var(--u));
  font-weight:    400;
  line-height:    1;
  letter-spacing: var(--tr-tightest);
  color: var(--white);
  mix-blend-mode: difference;
}
/* the % suffix is Bold and slightly smaller */
.case-outcomes__num strong {
  font-size:   calc(64 * var(--u));
  font-weight: 500;
}

/* descriptor label — 16px medium, matches case-col-body pattern */
.case-outcomes__label {
  margin: 0;
  font-size:      var(--t-16);
  font-weight:    500;
  line-height:    calc(18 / 16);
  letter-spacing: var(--tr-tight);
  color: var(--gray-7);
}


/* ============================================================
   RESPONSIVE
   ============================================================ */
@media (max-width: 900px) {

  /* intro */
  .case-intro { padding-top: calc(120 * var(--u)); }

  .case-title {
    font-size:   calc(110 * var(--u));
    line-height: 1;
    margin: 0 var(--s-16) var(--s-32);
  }

  /* cols stack vertically */
  .case-cols {
    display: flex;
    flex-direction: column;
    gap: var(--s-32);
    padding-inline: var(--s-16);
    min-height: unset;
  }

  .case-hero {
    height: auto;
    aspect-ratio: 1888 / 798;
    margin: var(--s-32) var(--s-16);
  }

  /* detailed */
  .case-section { padding-inline: var(--s-16); }
  .case-section + .case-section { margin-top: calc(80 * var(--u)); }

  .case-textblock       { width: 100%; }
  .case-textblock__body { width: 100%; }

  .case-imgwrap--rounded { height: auto; aspect-ratio: 1600 / 913; }
  .case-imgwrap--bar     { height: auto; aspect-ratio: 1600 / 746; }
  .case-imgwrap--dark    { height: auto; aspect-ratio: 1600 / 847; }

  .case-collage__main  { height: auto; aspect-ratio: 1600 / 1020; }
  .case-collage__full  { height: auto; aspect-ratio: 1600 / 746;  }
  .case-collage__row   { height: auto; }
  .case-collage__left  { flex: 0 0 58%; height: auto; aspect-ratio: 930 / 524; }
  .case-collage__right { height: auto; aspect-ratio: 663 / 524; }

  .case-standalone {
    margin-inline: var(--s-16);
    height: auto;
    aspect-ratio: 1600 / 900;
  }

  /* simplified */
  .simp-img  { margin-inline: var(--s-16); }
  .simp-pair { margin-inline: var(--s-16); height: auto; }

  .simp-pair__left  { flex: 0 0 58%; height: auto; aspect-ratio: 930 / 524; }
  .simp-pair__right { height: auto; aspect-ratio: 663 / 524; }

  .simp-img--h486  { height: auto; aspect-ratio: 1600 / 486;  }
  .simp-img--h746  { height: auto; aspect-ratio: 1600 / 746;  }
  .simp-img--h821  { height: auto; aspect-ratio: 1600 / 821;  }
  .simp-img--h900  { height: auto; aspect-ratio: 1600 / 900;  }
  .simp-img--h1020 { height: auto; aspect-ratio: 1600 / 1020; }
  .simp-img--h1028 { height: auto; aspect-ratio: 1600 / 1028; }
  .simp-img--h524  { height: auto; aspect-ratio: 1600 / 524;  }
  .simp-img--h559  { height: auto; aspect-ratio: 1600 / 559;  }
  .simp-img--h665  { height: auto; aspect-ratio: 1600 / 665;  }
  .simp-img--h1052 { height: auto; aspect-ratio: 1600 / 1052; }

  .case-imgs-trio  { margin-inline: var(--s-16); height: auto; }
  .case-imgs-trio figure { aspect-ratio: 1 / 1; }

  .simp-next         { height: 100vh; }
  .simp-next__title  { font-size: calc(80 * var(--u)); }

  .view-toggle { border-radius: calc(16 * var(--u)); }

  /* outcomes */
  .case-outcomes            { padding-inline: var(--s-16); gap: calc(48 * var(--u)); }
  .case-outcomes__title     { font-size: calc(28 * var(--u)); }
  .case-outcomes__num       { font-size: calc(56 * var(--u)); }
  .case-outcomes__num strong{ font-size: calc(44 * var(--u)); }
}

@media (max-width: 560px) {
  .case-title            { font-size: calc(64 * var(--u)); }
  .case-textblock__title { font-size: calc(28 * var(--u)); }
  .case-col-label        { font-size: var(--t-20); }
  .view-toggle__btn      { padding: calc(14 * var(--u)) calc(18 * var(--u)); font-size: var(--t-16); }

  /* outcomes: wrap to 2×2 on small screens */
  .case-outcomes__grid  { flex-wrap: wrap; }
  .case-outcomes__stat  { flex: 1 0 calc(50% - calc(12 * var(--u))); }
  .case-outcomes__num   { font-size: calc(48 * var(--u)); }
  .case-outcomes__num strong { font-size: calc(38 * var(--u)); }
}