/* ==========================================================================
   Case study single — Figma "Case Study" 5111:347 (29 Sep file, 1920, dark).
   Hero: eyebrow y287 · name 96px Blauer Nue Medium, 779 box (3 lines) · right column (x970): intro 20px
   white y350, service tags 20px green (6px dots) y471, stats from y667 — 64px Medium numbers, 32px Regular
   white labels at +267, a 2px white rule under each row (827 wide).
   Rows: heading 48px Regular sentence case (x103) with a 125px accent rule 108 under its top; body 20px white
   in the right column (x970); plain lines, no bullets, no dividers. Wide image 1697 × 641, square.
   Mosaic 4 × 407 × 724, 31 apart, 10px radius.
   The Execution between the two case-study-single instances is the stock scroll-stack block (fed from the
   record's `execution`), unchanged.
   ========================================================================== */
figure.card-img { margin: 0; }
.section--case-study { padding-top: clamp(96px, 9.0625vw, 174px); padding-bottom: 0; }
.section--case-study-end { padding-top: 0; padding-bottom: clamp(72px, 10vh, 130px); }   /* the part after the scroll-stack */

/* ---- Hero ---------------------------------------------------------------- */
.case-study__hero-row {
  display: grid; grid-template-columns: 860fr 849fr; column-gap: var(--col-gap); align-items: start;
}
.case-study__title { max-width: 8.2em; margin-top: 29px; font-size: clamp(48px, 5vw, 96px); line-height: 1.01; text-transform: uppercase; }
.case-study__hero-aside { padding-top: 63px; }                          /* intro y350 */
.case-study__intro { max-width: 696px; margin: 0; color: var(--fg); font-size: var(--fs-body); line-height: var(--lh-body); }
.case-study__tags { list-style: none; display: flex; flex-wrap: wrap; gap: 3px 23px; max-width: 560px; margin: 21px 0 0; padding: 0; }
.case-study__tags:empty { display: none; }
.case-study__tag { position: relative; padding-left: 21px; color: var(--accent); font-size: var(--fs-body); line-height: 1.25; }
.case-study__tag::before { content: ""; position: absolute; left: 0; top: .5em; width: 6px; height: 6px; border-radius: 50%; background: var(--accent); }
.case-study__stats { list-style: none; max-width: 827px; margin: 140px 0 0; padding: 0; }
.case-study__stats:empty { display: none; }
.case-study__stat {
  display: grid; grid-template-columns: 267fr 560fr; align-items: start;
  padding: 0 0 26px; border-bottom: 2px solid var(--fg);
}
.case-study__stat + .case-study__stat { padding-top: 26px; }
.case-study__stat-value { font-family: var(--font-display); font-weight: 500; font-size: clamp(40px, 3.333vw, 64px); line-height: 1; }
.case-study__stat-label { max-width: 435px; font-family: var(--font-display); font-weight: 400; font-size: clamp(22px, 1.667vw, 32px); line-height: 1.1; }

/* ---- Narrative rows: heading + accent rule left, body right --------------- */
.case-study__row { display: grid; grid-template-columns: 860fr 849fr; column-gap: var(--col-gap); align-items: start; margin-top: clamp(64px, 6.5vw, 125px); }
.case-study__row-head { margin: 0; font-family: var(--font-display); font-weight: 400; font-size: clamp(32px, 2.5vw, 48px); line-height: 1.229; }
.case-study__row-head::after { content: ""; display: block; width: 125px; margin-top: 49px; border-top: 2px solid var(--accent); }
.case-study__prose { max-width: 854px; color: var(--fg); font-size: var(--fs-body); line-height: var(--lh-body); }
.case-study__prose > * { margin: 0; }
.case-study__prose > * + * { margin-top: 1.24em; }                   /* a blank line between paragraphs */
.case-study__prose ul { list-style: none; padding: 0; }
.case-study__prose p + ul { margin-top: 0; }                            /* the key lines sit straight under their lead-in */
.case-study__prose li { color: var(--fg); }

/* ---- Wide image + mosaic -------------------------------------------------- */
.case-study .case-study__wide { margin: clamp(48px, 4.1vw, 79px) 0 0; aspect-ratio: 1697 / 641; overflow: hidden; border-radius: 0; }
.case-study__wide img { width: 100%; height: 100%; object-fit: cover; }
.case-study__wide--cover { aspect-ratio: 16 / 9; }
.case-study__mosaic { display: grid; grid-template-columns: repeat(4, 1fr); gap: clamp(12px, 1.6vw, 31px); margin-top: clamp(64px, 5.5vw, 105px); }
.case-study__mosaic:empty { display: none; }
.case-study__mosaic-item { aspect-ratio: 407 / 724; overflow: hidden; border-radius: 10px; }
.case-study__mosaic-item img { width: 100%; height: 100%; object-fit: cover; }

@media (max-width: 1024px) {
  .case-study__hero-row, .case-study__row { grid-template-columns: 1fr; row-gap: 24px; }
  .case-study__hero-aside { padding-top: 0; }
  .case-study__stats { margin-top: 48px; }
  .case-study__mosaic { grid-template-columns: repeat(2, 1fr); }
}
@media (max-width: 640px) {
  .section--case-study { padding-top: 48px; }
  .case-study__stat { grid-template-columns: 1fr; row-gap: 8px; }
}

/* Execution media (Figma Case Study 5111:347 y5152): a 1732 × 978 photo with a website screen inset at
   +348 / +163, 1034 × 653; the screen's scroll recording autoplays while in view (client comment). */
.case-study__exec-media { position: relative; margin: clamp(48px, 5.625vw, 108px) 0 clamp(0px, 1vw, 19px);   /* Figma: 108 under the steps, results 144 below */ aspect-ratio: 1732 / 978; overflow: hidden; }
.case-study__exec-bg { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; }
.case-study__exec-screen {
  position: absolute;
  left: calc(348 / 1732 * 100%);
  top: calc(163 / 978 * 100%);
  width: calc(1034 / 1732 * 100%);
  aspect-ratio: 1034 / 653;
  overflow: hidden;
  background: #1a1a1a;
}
.case-study__exec-screen img,
.case-study__exec-screen video { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; object-position: 50% 0; }
.case-study__exec-screen video { opacity: 0; transition: opacity .6s ease; }
.case-study__exec-screen video.is-playing { opacity: 1; }

/* Mosaic tiles may carry a video (client comment: "alternating static and auto playing video"): it plays over
   its still while in view (js/blocks/case-study-single.js). */
.case-study__mosaic-item { position: relative; }
.case-study__mosaic-item video { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; opacity: 0; transition: opacity .6s ease; }
.case-study__mosaic-item video.is-playing { opacity: 1; }

/* ---- Commercials: "Take a listen" (Figma 5111:347 y5238, client call 30 Sep) ------------------------------
   Eyebrow + 80px heading left; right column (x970): per ad a 68px green play circle and a 751 × 119 waveform
   99 to its right, rows 131 apart; the caption 20px white under the last. Played bars turn green. */
.case-study__listen { display: grid; grid-template-columns: 860fr 849fr; column-gap: var(--col-gap); align-items: start; margin-top: clamp(80px, 7.8vw, 150px); }
.case-study__listen-title { margin-top: 21px; font-size: clamp(44px, 4.167vw, 80px); line-height: 1; text-transform: uppercase; }
.case-study__listen-list { padding-top: 25px; }
.case-study__track { display: grid; grid-template-columns: 68px minmax(0, 1fr); column-gap: 31px; align-items: center; }
.case-study__track + .case-study__track { margin-top: 12px; }
.case-study__track-play { position: relative; width: 68px; height: 66px; padding: 0; border: 0; border-radius: 50%; background: var(--accent); cursor: pointer; }
.case-study__track-icon { position: absolute; left: 50%; top: 50%; width: 0; height: 0; margin: -8.5px 0 0 -5px; border-style: solid; border-width: 8.5px 0 8.5px 15px; border-color: transparent transparent transparent #000; }
.case-study__track.is-playing .case-study__track-icon { width: 14px; height: 17px; margin: -8.5px 0 0 -7px; border: 0; border-left: 5px solid #000; border-right: 5px solid #000; }
.case-study__track-wave { display: flex; align-items: center; gap: 2px; height: 119px; max-width: 751px; cursor: pointer; }
.case-study__track-wave i { flex: 1 1 0; min-width: 2px; height: calc(var(--h) * 1%); min-height: 6px; background: var(--fg); border-radius: 1px; transition: background-color .15s; }
.case-study__track-wave i.is-played { background: var(--accent); }
.case-study__track-wave:focus-visible { outline: 2px solid var(--accent); outline-offset: 4px; }
.case-study__listen-caption { margin: 34px 0 0; color: var(--fg); font-size: var(--fs-body); line-height: var(--lh-body); }

/* ---- Gallery: the client's media rows after The Execution (full / website / pair), 165 apart ------------- */
.case-study__gallery { display: grid; row-gap: clamp(40px, 8.6vw, 165px); margin-top: clamp(64px, 8.6vw, 165px); }
.case-study__gallery:empty { display: none; }   /* no rows (the wrapper is always rendered: a {{#list.0}} guard would put row 0 on the lookup stack) */
.case-study__gallery .case-study__exec-media { margin: 0; }
.case-study__g-full { margin: 0; aspect-ratio: 1732 / 978; overflow: hidden; }
.case-study__g-full img, .case-study__g-full video { display: block; width: 100%; height: 100%; object-fit: cover; }
.case-study__g-pair { display: grid; grid-template-columns: 1fr 1fr; gap: clamp(12px, 1.7vw, 33px); }
.case-study__g-pair figure { margin: 0; aspect-ratio: 850 / 978; overflow: hidden; }
.case-study__g-pair img { width: 100%; height: 100%; object-fit: cover; }
@media (max-width: 1024px) {
  .case-study__listen { grid-template-columns: 1fr; row-gap: 32px; }
  .case-study__listen-list { padding-top: 0; }
  .case-study__track-wave { height: 72px; }
}
@media (max-width: 640px) {
  .case-study__g-pair { grid-template-columns: 1fr; }
  .case-study__track { grid-template-columns: 52px minmax(0, 1fr); column-gap: 16px; }
  .case-study__track-wave { gap: 1px; min-width: 0; }                 /* 96 bars fit a phone: 1px bars + 1px gaps */
  .case-study__track-wave i { min-width: 1px; }
  .case-study__track-play { width: 52px; height: 52px; }
}