/* Case-study pages: dark ground, full-bleed hero, story column + image bands.
   Shared by mpay.html, start-screens.html, wallet-redesign.html, global-wallet.html */
:root { color-scheme: dark; --lav-text: #aaa2ff; }
body { background: var(--ink); color: var(--paper); }
body::before { content: ""; position: fixed; inset: 0 0 auto; height: env(safe-area-inset-top, 0px); z-index: 10; background: var(--ink); }

.site-header { position: fixed; left: 0; right: 0; }
.logo img { filter: none; }

/* Hero: full-bleed image, height follows the design's ratio */
/* All case heroes share one shape: 16:9, capped so the title peeks above the fold */
.hero { position: relative; width: 100%; height: min(56.25vw, 86svh); min-height: 260px; overflow: hidden; background: var(--ink); }
.hero > img { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; object-position: var(--focus, 50% 50%); display: block; }

/* Wide wrapper for bands that run past the 1200 column (40px gutters at 1440) */
.wide {
  width: 100%; max-width: 1440px; margin: 0 auto;
  padding-left: max(clamp(16px, 2.78vw, 40px), env(safe-area-inset-left, 0px));
  padding-right: max(clamp(16px, 2.78vw, 40px), env(safe-area-inset-right, 0px));
}

.story { padding-block: 60px 0; }
.story h1 {
  font-weight: 400; font-size: clamp(32px, 3.89vw, 56px); line-height: 1.07;
  letter-spacing: -0.02em; text-transform: uppercase; max-width: 1080px; text-wrap: balance;
}
.lede { margin-top: 22px; max-width: 1080px; }
.lede > p:first-child { font-size: clamp(20px, 2.22vw, 32px); line-height: 1.28; letter-spacing: -0.02em; text-transform: uppercase; }
.lede > p + p { margin-top: 1.28em; font-size: 16px; line-height: 1.4; color: var(--paper-2); max-width: 70ch; }

.block { --in: 60px; margin-top: clamp(96px, 12.5vw, 180px); display: flex; flex-direction: column; min-width: 0; }
.block.roomy { --in: clamp(48px, 8.333vw, 120px); margin-top: clamp(96px, 15vw, 240px); }
.label { font-size: 20px; letter-spacing: -0.02em; text-transform: uppercase; color: rgba(255,255,255,.75); margin-bottom: 20px; }
.shot { display: block; width: 100%; height: auto; }
.shot.natural { width: auto; max-width: 100%; }
.strip + .label, .shot + .label { margin-top: clamp(48px, 5.3vw, 77px); }

/* Wide strips stay legible on phones by scrolling inside their own row */
.strip { overflow-x: auto; overscroll-behavior-x: contain; scrollbar-width: thin; }
@media (max-width: 760px) {
  .strip { margin-right: calc(-1 * max(16px, env(safe-area-inset-right, 0px))); padding-right: 16px; }
  .strip .shot { min-width: var(--m, 0px); }
}

.text { margin-top: var(--in, 60px); max-width: 894px; display: flex; flex-direction: column; gap: 20px; }
.text h2 { font-weight: 400; font-size: var(--t-h2); line-height: 1.28; letter-spacing: -0.02em; text-transform: uppercase; }
.text h2.small { font-size: var(--t-body); line-height: 1.28; }
.text p, .text li { font-size: var(--t-body); line-height: 1.28; letter-spacing: -0.02em; color: var(--paper-2); }
.text p.lead { color: var(--paper); }
.text > div { display: flex; flex-direction: column; gap: 1.28em; }
.text.tight { gap: 0; }
.text.tight > div { margin-top: 0; }
.text ul { padding-left: 1.2em; display: flex; flex-direction: column; gap: .2em; }

.next { padding-block: clamp(96px, 12.5vw, 180px) 120px; }
.next .wrap { display: flex; justify-content: space-between; gap: 24px; flex-wrap: wrap; }
.next a { font-size: var(--t-h2); text-transform: uppercase; letter-spacing: -0.02em; transition: opacity .2s; }
.next a:hover { opacity: .6; }

/* Early results: three stat columns */
.results-section { padding-block: clamp(96px, 12.5vw, 180px) 0; }
.results { max-width: 1200px; display: flex; flex-direction: column; gap: 20px; }
.results h2 { font-weight: 400; font-size: var(--t-h2); line-height: 1.28; letter-spacing: -0.02em; text-transform: uppercase; }
.results > p { font-size: var(--t-body); line-height: 1.28; letter-spacing: -0.02em; color: var(--paper-2); max-width: 894px; }
.results dl { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: clamp(24px, 3vw, 40px); margin-top: 20px; }
.results dt { font-size: clamp(32px, 3.89vw, 56px); line-height: 1.07; letter-spacing: -0.02em; font-variant-numeric: tabular-nums; }
.results dd { margin-top: 12px; font-size: var(--t-body); line-height: 1.28; letter-spacing: -0.02em; color: var(--paper-2); }
@media (max-width: 760px) { .results dl { grid-template-columns: 1fr; } }

/* Project year, under the case title */
.case-year { margin-top: 14px; font-size: 14px; letter-spacing: .08em; color: var(--paper-2); font-variant-numeric: tabular-nums; }

/* Breathing room at the end of each case now that the bottom links are gone */
main > section:last-of-type { padding-bottom: clamp(96px, 12.5vw, 180px); }

/* Strategy / Concept / UX summary under each case intro */
.approach { margin-top: clamp(40px, 5vw, 72px); display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: clamp(24px, 3vw, 40px); border-top: 1px solid #3a3a3a; padding-top: clamp(20px, 2.2vw, 32px); max-width: 1200px; }
.approach dt { font-size: 13px; letter-spacing: .08em; text-transform: uppercase; color: var(--paper-2); }
.approach dd { margin-top: 10px; font-size: var(--t-body); line-height: 1.35; letter-spacing: -0.02em; color: var(--paper); }
@media (max-width: 760px) { .approach { grid-template-columns: 1fr; } }

/* Lead-in phrases inside case text */
.text p b { font-weight: 400; color: var(--paper); }