/* ------------------------------------------------------------------
   Case-study pages (work/*). Loaded after base.css (tokens, nav).
   Reference layout: Figma "Finavia — Desktop", 1728 px wide; all sizes
   measured there are written as calc(N * var(--u)) like the homepage.
   ------------------------------------------------------------------ */
:root {
  --case-edge: calc(42 * var(--u));      /* hero text + lime rule */
  --case-left: calc(232 * var(--u));     /* section content left edge */
  --case-right: calc(242 * var(--u));
  --case-label-col: calc(274 * var(--u));/* "01 / Scale" column */
  --case-grey: #cfcfcf;                  /* captions, intros */
  --case-dim: #8a8a8a;                   /* Back */
  --module-border: rgba(255, 255, 255, 0.72);
}

html, body { background: var(--black); color: var(--white); }
.case { position: relative; z-index: 1; }

/* Hero: pinned behind everything; the body layer scrolls over it ---- */
.case-hero {
  position: sticky;
  top: 0;
  z-index: 0;
  height: calc(570 * var(--u));
  padding: calc(118 * var(--u)) var(--case-edge) 0;
  background: var(--black);
  overflow: hidden;
}
.case-hero__inner { will-change: transform, opacity; }
.case-hero__title {
  font-size: calc(85 * var(--u));
  font-weight: 700;
  line-height: 0.98;
  letter-spacing: -0.005em;
  text-transform: uppercase;
}
.case-hero__meta {
  margin-top: calc(30 * var(--u));
  padding-left: calc(6 * var(--u));
  font-size: calc(22 * var(--u));
  font-weight: 500;
  line-height: 1;
  letter-spacing: 0.005em;
  text-transform: uppercase;
  color: var(--lime);
}
.case-hero__desc {
  margin-top: calc(52 * var(--u));
  max-width: calc(1400 * var(--u));
  font-size: calc(36 * var(--u));
  font-weight: 400;
  line-height: 1.22;
}

/* Content layer ------------------------------------------------------ */
.case-body {
  position: relative;
  z-index: 1;
  background: var(--black);
}
.case-body::before {           /* lime rule, inset like the hero text */
  content: "";
  position: absolute;
  top: 0;
  left: calc(40 * var(--u));
  right: calc(40 * var(--u));
  border-top: 1px solid var(--lime);
}

.case-section {
  padding-left: var(--case-left);
  padding-right: var(--case-right);
}
.case-grid {
  display: grid;
  grid-template-columns: var(--case-label-col) minmax(0, 1fr);
  align-items: start;
}
.case-num {
  font-size: calc(16 * var(--u));
  font-weight: 400;
  line-height: 1;
}
.case-h2 {
  margin-top: calc(12 * var(--u));
  font-size: calc(52 * var(--u));
  font-weight: 400;
  line-height: 1;
  letter-spacing: -0.005em;
}
.case-h2--editorial {
  font-size: calc(52 * var(--u));
  line-height: 1.12;
  max-width: calc(1000 * var(--u));
}
.case-h2--small {
  margin-top: calc(45 * var(--u));
  font-size: calc(24 * var(--u));
  color: var(--case-grey);
}
.case-caption {
  margin-top: calc(40 * var(--u));
  font-size: calc(22 * var(--u));
  line-height: 1.3;
  color: var(--case-grey);
}
.case-lead {
  margin-top: calc(30 * var(--u));
  max-width: calc(660 * var(--u));
  font-size: calc(22 * var(--u));
  line-height: 1.25;
  color: var(--case-grey);
}
.case-intro {
  margin-top: calc(26 * var(--u));
  font-size: calc(22 * var(--u));
  line-height: 1.3;
  color: var(--case-grey);
}
.case-rule {
  margin: 0;
  border: 0;
  border-top: 1px solid var(--white);
}

/* Graphic modules (Scale, Role) ------------------------------------- */
.module {
  border: 1px solid var(--module-border);
  border-radius: calc(16 * var(--u));
  background: var(--black);
  color: var(--black);
}

/* 01 Scale */
.case-section--scale { padding-top: calc(60 * var(--u)); }
.case-section--scale .case-num { margin-top: calc(7 * var(--u)); }
.module--scale {
  display: flex;
  align-items: flex-start;
  min-height: calc(252 * var(--u));
  padding: calc(36 * var(--u)) calc(35 * var(--u));
}
.scale-tile {
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  flex: none;
  width: calc(214 * var(--u));
  height: calc(180 * var(--u));
  border-radius: calc(16 * var(--u));
  background: var(--white);
}
.scale-tile__num {
  font-size: calc(72 * var(--u));
  font-weight: 700;
  line-height: 1;
  letter-spacing: -0.01em;
}
.scale-tile__unit {
  margin-top: calc(14 * var(--u));
  font-size: calc(22 * var(--u));
  font-weight: 600;
  line-height: 1;
}
.scale-pills {
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  gap: calc(55 * var(--u));
  margin-left: calc(42 * var(--u));
  padding-top: calc(6 * var(--u));
}
.pill {
  display: inline-block;
  height: calc(58 * var(--u));
  padding: 0 calc(12 * var(--u));
  border-radius: calc(8 * var(--u));
  background: var(--white);
  font-size: calc(30 * var(--u));
  font-weight: 500;
  line-height: calc(58 * var(--u));
  letter-spacing: -0.005em;
  white-space: nowrap;
}

/* 02 Role */
.case-section--role { padding-top: calc(96 * var(--u)); }
.case-section--role .case-num { margin-top: calc(2 * var(--u)); }
.module--role {
  display: grid;
  grid-template-columns: calc(586 * var(--u)) minmax(0, 1fr);
  column-gap: calc(108 * var(--u));
  min-height: calc(500 * var(--u));
  padding: calc(22 * var(--u)) calc(28 * var(--u));
}
.role-tile {
  min-height: calc(174 * var(--u));
  padding: calc(30 * var(--u)) calc(28 * var(--u));
  border-radius: calc(12 * var(--u));
  background: var(--white);
}
.role-tile__title {
  font-size: calc(52 * var(--u));
  font-weight: 700;
  line-height: 1;
  letter-spacing: -0.01em;
}
.role-tile__sub {
  margin-top: calc(32 * var(--u));
  font-size: calc(24 * var(--u));
  font-weight: 600;
  line-height: 1;
}
.role-list {
  margin-top: calc(44 * var(--u));
  padding-left: calc(8 * var(--u));
  max-width: calc(590 * var(--u));
  font-size: calc(32 * var(--u));
  font-weight: 500;
  line-height: 1.22;
  color: var(--white);
}
.role-meta {
  margin: calc(13 * var(--u)) 0 0;
  padding-left: calc(4 * var(--u));
  color: var(--white);
}
.role-meta__item + .role-meta__item { margin-top: calc(71 * var(--u)); }
.role-meta dt {
  font-size: calc(22 * var(--u));
  font-weight: 400;
  line-height: 1;
  color: var(--lime);
}
.role-meta dd {
  margin: calc(14 * var(--u)) 0 0;
  font-size: calc(22 * var(--u));
  font-weight: 400;
  line-height: 1;
}

/* 03 Film */
.case-section--film { padding-top: calc(90 * var(--u)); }
.film {
  margin-top: calc(55 * var(--u));
  width: calc(1245 * var(--u));
  max-width: 100%;
}
.film__video {
  display: block;
  width: 100%;
  aspect-ratio: 16 / 9;
  background: #0a0a0a;
}

/* 04 Contexts */
.case-section--contexts { padding-top: calc(158 * var(--u)); }
.contexts {
  margin: calc(125 * var(--u)) 0 0 calc(8 * var(--u));
  width: calc(1242 * var(--u));
  max-width: 100%;
}
.contexts__img { width: 100%; height: auto; }

/* 05 Impact */
.case-section--impact { padding-top: calc(170 * var(--u)); }
.metrics {
  display: grid;
  grid-template-columns: repeat(3, calc(324 * var(--u)));
  row-gap: calc(73 * var(--u));
  margin-top: calc(60 * var(--u));
}
.metric { display: flex; flex-direction: column; align-items: flex-start; }
.metric__value {
  font-size: calc(47 * var(--u));
  font-weight: 500;
  line-height: 1;
  letter-spacing: -0.005em;
  color: var(--lime);
  font-variant-numeric: tabular-nums;
}
.metric__value::after {         /* short rule under the number */
  content: "";
  display: block;
  width: calc(180 * var(--u));
  margin-top: calc(24 * var(--u));
  border-top: 1px solid #7a7a7a;
}
.metric__label {
  margin-top: calc(28 * var(--u));
  font-size: calc(22 * var(--u));
  font-weight: 500;
  line-height: 1;
}

/* Recognition */
.case-section--recognition { padding-top: calc(83 * var(--u)); }
.awards {
  display: grid;
  grid-template-columns: calc(410 * var(--u)) calc(395 * var(--u)) calc(300 * var(--u));
  justify-content: space-between;
  align-items: start;
  margin-top: calc(45 * var(--u));
  padding-bottom: calc(100 * var(--u));
}
.award__logo { width: auto; max-width: 100%; }
.award__logo--ixd   { height: calc(150 * var(--u)); }
.award__logo--lovie { height: calc(92 * var(--u));  margin-top: calc(38 * var(--u)); }
.award__logo--webby { height: calc(170 * var(--u)); margin-top: calc(-13 * var(--u)); }
.award__name {
  margin-top: calc(36 * var(--u));
  font-size: calc(16 * var(--u));
  font-weight: 500;
  line-height: 1.3;
}
.award__detail {
  margin-top: calc(6 * var(--u));
  font-size: calc(15 * var(--u));
  line-height: 1.4;
  color: var(--case-grey);
}
.award__logo--lovie + .award__name { margin-top: calc(74 * var(--u)); }
.award__logo--webby + .award__name { margin-top: calc(29 * var(--u)); }

/* Back */
.case-footer {
  display: flex;
  justify-content: center;
  padding: calc(225 * var(--u)) 0 calc(310 * var(--u));
}
.case-back {
  display: inline-flex;
  align-items: center;
  gap: calc(14 * var(--u));
  font-size: calc(40 * var(--u));
  font-weight: 400;
  line-height: 1;
  color: var(--case-dim);
  transition: color 0.3s ease;
}
.case-back__arrow {
  width: calc(34 * var(--u));
  height: calc(34 * var(--u));
  color: var(--white);
  transition: transform 0.3s ease;
}
.case-back:hover, .case-back:focus-visible { color: var(--white); }
.case-back:hover .case-back__arrow { transform: translateX(-4px); }

/* Reduced motion: no layering, hero simply scrolls with the page ------ */
@media (prefers-reduced-motion: reduce) {
  .case-hero { position: relative; }
  .case-hero__inner { transform: none !important; opacity: 1 !important; }
  .case-back, .case-back__arrow { transition: none; }
}

/* Tablet: proportional --u scaling holds; loosen the module grids ----- */
@media (max-width: 1199px) and (min-width: 810px) {
  :root { --case-left: calc(120 * var(--u)); --case-right: calc(120 * var(--u)); --case-label-col: calc(200 * var(--u)); }
  .module--role { grid-template-columns: minmax(0, 1fr); row-gap: calc(48 * var(--u)); }
  .role-meta { display: grid; grid-template-columns: 1fr 1fr; gap: calc(32 * var(--u)); padding-left: calc(8 * var(--u)); }
  .role-meta__item + .role-meta__item { margin-top: 0; }
  .role-list { max-width: none; }
  .film, .contexts { width: 100%; margin-left: 0; }
  .metrics { grid-template-columns: repeat(3, 1fr); }
  .awards { grid-template-columns: repeat(3, 1fr); column-gap: calc(40 * var(--u)); }
}

/* Phone -------------------------------------------------------------- */
@media (max-width: 809px) {
  :root {
    --case-edge: 20px;
    --case-left: 20px;
    --case-right: 20px;
  }

  .case-hero {
    height: auto;
    min-height: 0;
    padding: 118px 20px 44px;
  }
  .case-hero__title { font-size: 40px; line-height: 1.05; }
  .case-hero__meta { margin-top: 22px; padding-left: 0; font-size: 13px; letter-spacing: 0.02em; line-height: 1.3; }
  .case-hero__desc { margin-top: 28px; font-size: 20px; line-height: 1.3; }
  .case-body::before { left: 20px; right: 20px; }

  .case-grid { grid-template-columns: 1fr; row-gap: 26px; }
  .case-num { font-size: 13px; }
  .case-h2 { margin-top: 8px; font-size: 32px; }
  .case-h2--editorial { font-size: 34px; line-height: 1.05; max-width: none; }
  .case-h2--small { margin-top: 32px; font-size: 18px; }
  .case-caption { margin-top: 18px; font-size: 15px; }
  .case-lead { margin-top: 16px; font-size: 18px; line-height: 1.3; max-width: none; }
  .case-intro { margin-top: 14px; font-size: 15px; }

  .module { border-radius: 14px; }

  /* 01 Scale */
  .case-section--scale { padding-top: 48px; }
  .case-section--scale .case-num { margin-top: 0; }
  .module--scale { flex-direction: column; min-height: 0; padding: 20px; }
  .scale-tile { width: 164px; height: 136px; border-radius: 14px; }
  .scale-tile__num { font-size: 56px; }
  .scale-tile__unit { margin-top: 10px; font-size: 17px; }
  .scale-pills { margin: 22px 0 0; padding-top: 0; gap: 12px; }
  .pill { height: 44px; padding: 0 12px; border-radius: 8px; font-size: 20px; line-height: 44px; }

  /* 02 Role */
  .case-section--role { padding-top: 72px; }
  .module--role { grid-template-columns: 1fr; row-gap: 32px; min-height: 0; padding: 12px 12px 24px; }
  .role-tile { min-height: 0; padding: 22px 20px; border-radius: 10px; }
  .role-tile__title { font-size: 30px; }
  .role-tile__sub { margin-top: 18px; font-size: 16px; }
  .role-list { margin-top: 22px; padding-left: 8px; max-width: none; font-size: 20px; line-height: 1.3; }
  .role-meta { display: grid; grid-template-columns: 1fr 1fr; gap: 24px 16px; margin: 0; padding-left: 8px; }
  .role-meta__item + .role-meta__item { margin-top: 0; }
  .role-meta dt, .role-meta dd { font-size: 15px; }
  .role-meta dd { margin-top: 8px; }

  /* 03 Film */
  .case-section--film { padding-top: 80px; }
  .film { margin-top: 28px; width: 100%; }

  /* 04 Contexts: full-bleed so the product work keeps its presence */
  .case-section--contexts { padding-top: 96px; }
  .contexts { width: 100vw; margin: 44px 0 0 -20px; max-width: none; }

  /* 05 Impact: one column, easy to scan */
  .case-section--impact { padding-top: 96px; }
  .metrics { grid-template-columns: 1fr; row-gap: 40px; margin-top: 40px; }
  .metric__value { font-size: 44px; }
  .metric__value::after { width: 160px; margin-top: 16px; }
  .metric__label { margin-top: 16px; font-size: 16px; }

  /* Recognition */
  .case-section--recognition { padding-top: 64px; }
  .awards { grid-template-columns: 1fr; row-gap: 40px; margin-top: 32px; padding-bottom: 56px; }
  .award__logo--ixd   { height: 64px; }
  .award__logo--lovie { height: 40px; margin-top: 0; }
  .award__logo--webby { height: 72px; margin-top: 0; }
  .award__name { margin-top: 18px; font-size: 14px; }
  .award__logo--lovie + .award__name, .award__logo--webby + .award__name { margin-top: 18px; }
  .award__detail { font-size: 13px; }

  .case-footer { padding: 110px 0 150px; }
  .case-back { gap: 10px; font-size: 24px; }
  .case-back__arrow { width: 22px; height: 22px; }
}

/* ==================================================================
   Third case variant (case-hero--3). Shares the tokens,
   hero, modules, role card and Back treatment above.
   ================================================================== */
.case-hero--3 { height: calc(668 * var(--u)); }
.sr-only { position: absolute; width: 1px; height: 1px; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; }
.case-copy {
  margin-top: calc(28 * var(--u));
  max-width: calc(960 * var(--u));
  font-size: calc(22 * var(--u));
  line-height: 1.3;
  color: var(--case-grey);
}
.case-copy--spaced { margin-top: calc(40 * var(--u)); }
.case-intro--strong { color: var(--white); font-weight: 500; }

/* 01 The problem */
.case-section--problem { padding-top: calc(88 * var(--u)); }
.case-section--problem .case-num { margin-top: calc(4 * var(--u)); }
.module--problem {
  padding: calc(32 * var(--u)) calc(38 * var(--u)) calc(40 * var(--u));
  min-height: calc(583 * var(--u));
}
.problem-tile {
  width: calc(715 * var(--u));
  max-width: 100%;
  padding: calc(30 * var(--u)) calc(36 * var(--u));
  border-radius: calc(16 * var(--u));
  background: var(--white);
  font-size: calc(30 * var(--u));
  font-weight: 700;
  line-height: 1.15;
  letter-spacing: -0.01em;
}
.compare { margin-top: calc(80 * var(--u)); color: var(--white); }
.compare--versus { margin-top: calc(72 * var(--u)); padding-left: calc(26 * var(--u)); }
.compare__terms {
  display: flex;
  justify-content: space-between;
  width: calc(690 * var(--u));
  max-width: 100%;
  padding-bottom: calc(22 * var(--u));
  border-bottom: 1px solid var(--white);
  font-size: calc(30 * var(--u));
  font-weight: 700;
  line-height: 1;
  letter-spacing: -0.01em;
}
.compare--versus .compare__terms { width: calc(658 * var(--u)); }
.compare__label {
  width: calc(690 * var(--u));
  max-width: 100%;
  margin-top: calc(22 * var(--u));
  text-align: center;
  font-size: calc(30 * var(--u));
  font-weight: 700;
  line-height: 1;
  letter-spacing: -0.01em;
  color: var(--lime);
}
.compare--versus .compare__label { width: calc(658 * var(--u)); }

/* 02 My role (variant 3: prose responsibilities, spread meta) */
.role-list--prose { font-weight: 500; max-width: calc(580 * var(--u)); }
.role-tile__title--fit { font-size: calc(44 * var(--u)); }
.role-meta--spread { display: flex; flex-direction: column; justify-content: space-between; margin-top: calc(6 * var(--u)); padding-bottom: calc(30 * var(--u)); }
.role-meta--spread .role-meta__item + .role-meta__item { margin-top: calc(60 * var(--u)); }
.role-meta--spread dd { line-height: 1.25; }

/* 03 / 04 typographic chains */
.case-section--hypothesis { padding-top: calc(120 * var(--u)); }
.case-section--pilots { padding-top: calc(170 * var(--u)); }
.chain--hypothesis { margin-top: calc(110 * var(--u)); }
.chain--hypothesis .chain__step + .chain__step::before { color: var(--lime); }
.chain {
  display: flex;
  align-items: flex-start;
  margin: calc(84 * var(--u)) 0 0;
  padding: 0;
  list-style: none;
}
.chain__step {
  position: relative;
  display: flex;
  flex-direction: column;
  align-items: center;
  text-align: center;
}
.chain__step + .chain__step { margin-left: calc(84 * var(--u)); }
.chain__step + .chain__step::before {         /* arrow between steps */
  content: "→";
  position: absolute;
  left: calc(-62 * var(--u));
  top: 0;
  font-size: calc(36 * var(--u));
  font-weight: 500;
  line-height: 1;
  color: var(--white);
}
.chain__term {
  font-size: calc(36 * var(--u));
  font-weight: 500;
  line-height: 1;
  letter-spacing: -0.005em;
  text-transform: uppercase;
  white-space: nowrap;
}
.chain__sub {
  margin-top: calc(18 * var(--u));
  font-size: calc(16 * var(--u));
  line-height: 1.3;
  color: var(--lime);
  white-space: nowrap;
}
.chain--pilots { margin: calc(100 * var(--u)) 0 0 0; flex-wrap: wrap; justify-content: center; row-gap: calc(48 * var(--u)); }
.chain--pilots .chain__term { font-size: calc(30 * var(--u)); font-weight: 600; }
.chain--pilots .chain__step + .chain__step { margin-left: calc(56 * var(--u)); }
.chain--pilots .chain__step + .chain__step::before { left: calc(-46 * var(--u)); font-size: calc(34 * var(--u)); font-weight: 600; }

/* 05 What we learned: 2×2 grid */
.case-section--learned { padding-top: calc(90 * var(--u)); }
.learned {
  position: relative;
  display: grid;
  grid-template-columns: 1fr 1fr;
  margin-top: calc(44 * var(--u));
  border: 1px solid var(--white);
  padding: calc(22 * var(--u)) 0 calc(28 * var(--u));
}
.learned__cell {
  position: relative;
  padding: calc(14 * var(--u)) calc(18 * var(--u)) calc(36 * var(--u)) calc(42 * var(--u));
}
.learned__cell:nth-child(even) { padding-left: calc(54 * var(--u)); }
.learned__cell:nth-child(odd)::after {          /* vertical divider, inset from the frame */
  content: "";
  position: absolute;
  right: 0;
  top: calc(20 * var(--u));
  bottom: calc(-12 * var(--u));
  border-right: 1px solid var(--white);
}
.learned__cell:nth-child(-n+2) { padding-bottom: calc(44 * var(--u)); }
.learned__cell:nth-child(n+3) { padding-top: calc(44 * var(--u)); }
.learned::before {                               /* horizontal divider */
  content: "";
  position: absolute;
  left: calc(56 * var(--u));
  right: calc(18 * var(--u));
  top: 50%;
  border-top: 1px solid var(--white);
}
.learned__shift {
  font-size: calc(26 * var(--u));
  font-weight: 400;
  line-height: 1.15;
  color: var(--lime);
}
.learned__shift .arrow { margin: 0 0.1em; }
.learned__note {
  margin-top: calc(34 * var(--u));
  max-width: calc(540 * var(--u));
  font-size: calc(22 * var(--u));
  line-height: 1.25;
  color: var(--white);
}

/* 06 Where value emerged */
.case-section--value { padding-top: calc(145 * var(--u)); }
.value { margin: calc(64 * var(--u)) auto 0; width: calc(1100 * var(--u)); max-width: 100%; }
.value__row { display: flex; align-items: flex-end; }
.value__kicker {
  margin-bottom: calc(36 * var(--u));
  font-size: calc(22 * var(--u));
  font-weight: 500;
  line-height: 1;
  text-transform: uppercase;
  color: var(--lime);
}
.value__end--far .value__kicker { text-align: center; }
.value__end { text-align: center; flex: none; }
.value__who { font-size: calc(24 * var(--u)); font-weight: 500; line-height: 1; white-space: nowrap; }
.value__note {
  margin: calc(20 * var(--u)) auto 0;
  max-width: calc(300 * var(--u));
  font-size: calc(18 * var(--u));
  line-height: 1.25;
  color: var(--case-grey);
}
.value__end--far .value__note { max-width: calc(340 * var(--u)); }
.value__context { flex: none; margin: 0 calc(14 * var(--u)); font-size: calc(24 * var(--u)); font-weight: 500; line-height: 1; }
.value__line {
  position: relative;
  flex: 1 1 auto;
  height: 1px;
  margin: 0 calc(8 * var(--u)) calc(76 * var(--u));   /* centred on the who-line: note 44u + gap 20u + half of 24u */
  background: var(--white);
}
.value__context { margin-bottom: calc(64 * var(--u)); }
.value__end { display: flex; flex-direction: column; align-items: center; }
.value__note { height: calc(44 * var(--u)); }
.value__line--arrow::after {
  content: "";
  position: absolute;
  right: -1px;
  top: calc(-7 * var(--u));
  border-style: solid;
  border-width: calc(7 * var(--u)) 0 calc(7 * var(--u)) calc(16 * var(--u));
  border-color: transparent transparent transparent var(--white);
}

/* 07 Current direction */
.case-section--direction { padding-top: calc(145 * var(--u)); }
.flow {
  display: flex;
  flex-direction: column;
  align-items: center;
  width: calc(600 * var(--u));
  margin: calc(128 * var(--u)) auto 0;
  text-align: center;
}
.flow__node { font-size: calc(22 * var(--u)); font-weight: 500; line-height: 1; text-transform: uppercase; }
.flow__down { display: block; margin: calc(8 * var(--u)) 0 calc(18 * var(--u)); font-size: calc(22 * var(--u)); line-height: 1; color: var(--lime); }
.flow__fan {                                     /* bracket: line with an arrow at each end */
  position: relative;
  width: calc(560 * var(--u));
  height: calc(22 * var(--u));
  margin-top: calc(-6 * var(--u));
  border-top: 1px solid var(--lime);
}
.flow__fan span {
  position: absolute;
  top: calc(-11 * var(--u));
  font-size: calc(22 * var(--u));
  line-height: 1;
  color: var(--lime);
}
.flow__fan span::before { content: "↓"; }
.flow__fan span:first-child { left: calc(-6 * var(--u)); }
.flow__fan span:last-child { right: calc(-6 * var(--u)); }
.flow__outs {
  display: flex;
  justify-content: space-between;
  width: calc(600 * var(--u));
  margin-top: calc(10 * var(--u));
  font-size: calc(22 * var(--u));
  font-weight: 500;
  line-height: 1;
}
.flow__criteria {
  margin-top: calc(50 * var(--u));
  font-size: calc(22 * var(--u));
  font-weight: 500;
  line-height: 1;
  color: var(--lime);
}
.case-footer--tight { padding: calc(340 * var(--u)) 0 calc(220 * var(--u)); }

/* Tablet */
@media (max-width: 1199px) and (min-width: 810px) {
  .case-label .case-h2 { font-size: calc(40 * var(--u)); line-height: 1.05; padding-right: calc(16 * var(--u)); }
  .chain { flex-wrap: wrap; row-gap: calc(40 * var(--u)); }
  .chain--pilots { margin-right: 0; }
  .role-meta--spread { display: grid; grid-template-columns: 1fr 1fr; gap: calc(32 * var(--u)); padding-bottom: 0; }
  .role-meta--spread .role-meta__item + .role-meta__item { margin-top: 0; }
}

/* Phone */
@media (max-width: 809px) {
  .case-hero--3 { height: auto; }
  .case-copy { margin-top: 16px; font-size: 17px; line-height: 1.35; max-width: none; }
  .case-copy--spaced { margin-top: 28px; }

  /* 01 */
  .case-section--problem { padding-top: 56px; }
  .module--problem { min-height: 0; padding: 12px 12px 28px; }
  .problem-tile { width: 100%; padding: 20px 18px; border-radius: 10px; font-size: 20px; }
  .compare { margin-top: 36px; padding: 0 8px; }
  .compare--versus { margin-top: 36px; padding-left: 8px; }
  .compare__terms { width: 100%; flex-wrap: wrap; gap: 10px 22px; padding-bottom: 16px; font-size: 19px; line-height: 1.1; }
  .compare--versus .compare__terms { width: 100%; }
  .compare__label { width: 100%; text-align: left; margin-top: 14px; font-size: 17px; line-height: 1.2; }
  .compare--versus .compare__label { width: 100%; }

  /* 02 */
  .role-list--prose { font-size: 19px; max-width: none; }
  .role-meta--spread { display: grid; grid-template-columns: 1fr; gap: 20px; padding-bottom: 0; }
  .role-meta--spread .role-meta__item + .role-meta__item { margin-top: 0; }

  /* 03 / 04: chains stack vertically */
  .case-section--hypothesis, .case-section--pilots, .case-section--learned { padding-top: 80px; }
  .chain, .chain--pilots { flex-direction: column; align-items: flex-start; margin: 40px 0 0; }
  .chain--pilots .chain__term, .chain--pilots .chain__step + .chain__step::before { font-size: 24px; }
  .role-tile__title--fit { font-size: 30px; }
  .chain__step { align-items: flex-start; text-align: left; }
  .chain__step + .chain__step, .chain--pilots .chain__step + .chain__step { margin-left: 0; margin-top: 34px; }
  .chain__step + .chain__step::before, .chain--pilots .chain__step + .chain__step::before {
    content: "↓"; position: static; display: block; margin-bottom: 14px; font-size: 22px; color: var(--lime);
  }
  .chain__term { font-size: 24px; white-space: normal; }
  .chain__sub { margin-top: 8px; font-size: 14px; white-space: normal; }

  /* 05: single column */
  .learned { grid-template-columns: 1fr; margin-top: 28px; padding: 0; }
  .learned__cell, .learned__cell:nth-child(even), .learned__cell:nth-child(-n+2), .learned__cell:nth-child(n+3) { padding: 28px 20px 30px; }
  .learned__cell + .learned__cell { border-top: 1px solid var(--white); }
  .learned__cell:nth-child(odd)::after, .learned::before { display: none; }
  .learned__shift { font-size: 22px; }
  .learned__note { margin-top: 16px; font-size: 16px; max-width: none; }

  /* 06: vertical direction, top → bottom */
  .case-section--value, .case-section--direction { padding-top: 88px; }
  .value { margin-top: 36px; width: 100%; }
  .value__row { flex-direction: column; align-items: flex-start; margin-top: 0; }
  .value__end { text-align: left; }
  .value__kicker { font-size: 13px; margin-bottom: 10px; }
  .value__end { align-items: flex-start; }
  .value__note { height: auto; }
  .value__context { margin-bottom: 0; }
  .value__end--far .value__kicker { text-align: left; }
  .value__who { font-size: 20px; white-space: normal; line-height: 1.2; }
  .value__note { margin: 8px 0 0; max-width: none; font-size: 15px; }
  .value__end--far .value__note { max-width: none; }
  .value__context { margin: 0; font-size: 20px; }
  .value__line { flex: none; width: 1px; height: 40px; margin: 16px 0 16px 10px; }
  .chain--hypothesis { margin-top: 40px; }
  .value__line--arrow::after {
    right: auto; top: auto; left: -7px; bottom: -1px;
    border-width: 14px 7px 0 7px;
    border-color: var(--white) transparent transparent transparent;
  }

  /* 07 */
  .flow { width: 100%; margin: 40px 0 0; align-items: flex-start; text-align: left; }
  .flow__node { font-size: 18px; }
  .flow__down { margin: 10px 0 14px; font-size: 20px; }
  .flow__fan { display: none; }
  .flow__outs { flex-direction: column; gap: 10px; width: auto; margin-top: 0; font-size: 18px; }
  .flow__criteria { margin-top: 32px; font-size: 16px; line-height: 1.4; }
  .case-footer--tight { padding: 110px 0 150px; }
}

/* ==================================================================
   Finavia additions: taller hero for the three-line title, challenge note
   under the Scale module, journeys row in "Designing across contexts".
   ================================================================== */
.case-hero--finavia { height: calc(640 * var(--u)); }
.scale-note { grid-column: 2; margin-top: calc(44 * var(--u)); max-width: calc(900 * var(--u)); }
.compare--journeys { margin-top: calc(70 * var(--u)); }
.compare--journeys .compare__terms,
.compare--journeys .compare__label { width: calc(1180 * var(--u)); }
.compare--journeys .compare__terms { font-size: calc(28 * var(--u)); }
.compare--journeys .compare__label { font-size: calc(28 * var(--u)); }
.case-section--contexts .case-copy { max-width: calc(1000 * var(--u)); }

/* ==================================================================
   Confidential AI product case (work/confidential-ai). Built on the
   third-case variant above; adds the evolution figure, trust list and
   artifact/ritual grid.
   ================================================================== */
.evolution { margin: calc(72 * var(--u)) 0 0; width: calc(1240 * var(--u)); max-width: 100%; }
.evolution svg { display: block; width: 100%; height: auto; }
.evolution figcaption { margin-top: calc(18 * var(--u)); font-size: calc(14 * var(--u)); line-height: 1.4; color: var(--case-dim); }

.case-section--trust { padding-top: calc(150 * var(--u)); }
.case-section--trust .case-h2--editorial { max-width: calc(1100 * var(--u)); }
.trust { margin-top: calc(64 * var(--u)); border-top: 1px solid var(--white); }
.trust__row {
  display: grid;
  grid-template-columns: calc(360 * var(--u)) minmax(0, 1fr);
  column-gap: calc(40 * var(--u));
  padding: calc(34 * var(--u)) 0 calc(36 * var(--u));
  border-bottom: 1px solid var(--white);
}
.trust__term { font-size: calc(22 * var(--u)); font-weight: 500; line-height: 1.2; text-transform: uppercase; color: var(--lime); }
.trust__q { font-size: calc(30 * var(--u)); font-weight: 500; line-height: 1.2; letter-spacing: -0.005em; }
.trust__note { margin-top: calc(14 * var(--u)); max-width: calc(760 * var(--u)); font-size: calc(20 * var(--u)); line-height: 1.3; color: var(--case-grey); }

.case-section--ritual { padding-top: calc(150 * var(--u)); }
.case-section--ritual .grid4 { margin-top: calc(56 * var(--u)); }
.case-section--ritual .case-finding { margin-top: calc(48 * var(--u)); }

.case-closing--wide { margin: calc(140 * var(--u)) auto 0; max-width: calc(1000 * var(--u)); text-align: center; font-size: calc(30 * var(--u)); line-height: 1.25; }
.case-closing__note { margin-top: calc(26 * var(--u)); font-size: calc(20 * var(--u)); font-weight: 400; color: var(--case-grey); }

@media (max-width: 1199px) and (min-width: 810px) {
  .compare--journeys .compare__terms { flex-wrap: wrap; gap: calc(16 * var(--u)) calc(40 * var(--u)); }
  .trust__row { grid-template-columns: calc(240 * var(--u)) minmax(0, 1fr); }
}

@media (max-width: 809px) {
  .case-hero--finavia { height: auto; }
  .scale-note { grid-column: auto; margin-top: 0; max-width: none; }
  .compare--journeys { margin-top: 32px; padding: 0; }
  .compare--journeys .compare__terms, .compare--journeys .compare__label { width: 100%; }
  .compare--journeys .compare__terms { font-size: 18px; }
  .compare--journeys .compare__label { font-size: 17px; }

  /* Phone: the model pans sideways at a readable size instead of shrinking */
  .evolution { margin: 32px 0 0 -20px; width: 100vw; max-width: none; }
  .evolution .evolution__scroll { overflow-x: auto; overflow-y: hidden; padding: 0 20px; scrollbar-width: thin; -webkit-overflow-scrolling: touch; }
  .evolution svg { width: 940px; }
  .evolution figcaption { margin: 12px 20px 0; font-size: 13px; }
  .case-section--trust, .case-section--ritual { padding-top: 88px; }
  .trust { margin-top: 28px; }
  .trust__row { grid-template-columns: 1fr; row-gap: 8px; padding: 22px 0 24px; }
  .trust__term { font-size: 14px; }
  .trust__q { font-size: 20px; }
  .trust__note { margin-top: 8px; max-width: none; font-size: 15px; }
  .case-section--ritual .grid4 { margin-top: 28px; }
  .case-section--ritual .case-finding { margin-top: 28px; }
  .case-closing--wide { margin: 64px 0 0; max-width: none; text-align: left; font-size: 20px; }
  .case-closing__note { margin-top: 14px; font-size: 15px; }
}

/* ==================================================================
   VTT case (work/vtt). Shares hero, modules, role card, chains,
   metrics and Back with the other cases.
   ================================================================== */
.case-hero--vtt { height: calc(613 * var(--u)); }
.case-copy--wide { max-width: calc(1240 * var(--u)); }

/* 01 The challenge */
.case-section--challenge { padding-top: calc(88 * var(--u)); }
.case-section--challenge .case-num { margin-top: calc(4 * var(--u)); }
.module--challenge {
  padding: calc(32 * var(--u)) calc(36 * var(--u)) calc(34 * var(--u)) calc(38 * var(--u));
  color: var(--white);
}
.module--challenge .problem-tile { color: var(--black); }
.module-body {
  margin-top: calc(40 * var(--u));
  max-width: calc(905 * var(--u));
  font-size: calc(32 * var(--u));
  font-weight: 500;
  line-height: 1.22;
}
.module-rule {
  margin: calc(44 * var(--u)) 0 0;
  border: 0;
  border-top: 1px solid var(--white);
}
.questions {
  margin-top: calc(34 * var(--u));
  max-width: calc(860 * var(--u));
  font-size: calc(30 * var(--u));
  font-weight: 700;
  line-height: 1.3;
  letter-spacing: -0.005em;
  text-transform: uppercase;
}
.questions .arrow { color: var(--lime); margin: 0 0.15em; }

/* 02 My role (VTT: wider tile, three long meta items) */
.module--role-vtt { grid-template-columns: calc(640 * var(--u)) minmax(0, 1fr); column-gap: calc(54 * var(--u)); min-height: calc(863 * var(--u)); }
.module--role-vtt .role-list--prose { max-width: calc(560 * var(--u)); }

/* 03 / 05 framed 2×2 grids */
.grid4 {
  position: relative;
  display: grid;
  grid-template-columns: 1fr 1fr;
  margin-top: calc(60 * var(--u));
  border: 1px solid var(--white);
  padding: calc(34 * var(--u)) 0 calc(38 * var(--u));
}
.grid4__cell { position: relative; padding: calc(26 * var(--u)) calc(24 * var(--u)) calc(30 * var(--u)) calc(25 * var(--u)); }
.grid4__cell:nth-child(even) { padding-left: calc(62 * var(--u)); }
.grid4__cell:nth-child(odd)::after {
  content: "";
  position: absolute;
  right: 0;
  top: calc(-4 * var(--u));
  bottom: calc(-4 * var(--u));
  border-right: 1px solid var(--white);
}
.grid4__cell:nth-child(-n+2) { padding-bottom: calc(44 * var(--u)); }
.grid4__cell:nth-child(n+3) { padding-top: calc(44 * var(--u)); }
.grid4::before {
  content: "";
  position: absolute;
  left: calc(22 * var(--u));
  right: calc(22 * var(--u));
  top: 50%;
  border-top: 1px solid var(--white);
}
.grid4__label { font-size: calc(22 * var(--u)); font-weight: 600; line-height: 1.2; color: var(--lime); }
.grid4__text { margin-top: calc(4 * var(--u)); max-width: calc(500 * var(--u)); font-size: calc(22 * var(--u)); line-height: 1.25; }
.grid4__text--muted { color: var(--case-grey); }
.grid4__shift { font-size: calc(22 * var(--u)); font-weight: 500; line-height: 1.2; text-transform: uppercase; color: var(--lime); }
.grid4__title { margin-top: calc(26 * var(--u)); font-size: calc(20 * var(--u)); font-weight: 600; line-height: 1.2; }
.grid4--design .grid4__text { margin-top: calc(16 * var(--u)); max-width: calc(500 * var(--u)); font-size: calc(20 * var(--u)); line-height: 1.35; }
.grid4--design { padding: calc(26 * var(--u)) 0 calc(36 * var(--u)); }
.case-finding {
  margin-top: calc(40 * var(--u));
  max-width: calc(1070 * var(--u));
  font-size: calc(22 * var(--u));
  font-weight: 500;
  line-height: 1.25;
}
.case-section--story { padding-top: calc(120 * var(--u)); }

/* 04 The strategic shift + result preview */
.case-section--shift { padding-top: calc(120 * var(--u)); }
.chain--story { margin: calc(78 * var(--u)) 0 0; }
.chain--story .chain__term { font-size: calc(52 * var(--u)); font-weight: 700; text-transform: none; letter-spacing: -0.01em; }
.chain--story .chain__sub { margin-top: calc(20 * var(--u)); font-size: calc(16 * var(--u)); line-height: 1.2; white-space: normal; text-align: center; }
.chain--story .chain__step + .chain__step { margin-left: calc(96 * var(--u)); }
.chain--story .chain__step + .chain__step::before { left: calc(-70 * var(--u)); top: calc(10 * var(--u)); font-size: calc(32 * var(--u)); font-weight: 700; color: var(--lime); }

.result { margin-top: calc(70 * var(--u)); }
.result__label {
  display: flex;
  align-items: baseline;
  gap: calc(18 * var(--u));
  margin: 0 0 calc(18 * var(--u)) calc(4 * var(--u));
}
.result__kicker { font-size: calc(14 * var(--u)); font-weight: 600; letter-spacing: 0.04em; text-transform: uppercase; color: var(--lime); }
.result__hint { font-size: calc(16 * var(--u)); color: var(--case-grey); }
/* Supplied frame graphic (Frame.png: 6px black border, 11px inner radius, white fill),
   applied as a 9-slice border image so it scales without distorting the corners. */
.frame {
  position: relative;
  box-sizing: border-box;
  width: calc(1248 * var(--u));
  max-width: 100%;
  height: calc(805 * var(--u));
  border: calc(16 * var(--u)) solid transparent;
  border-image: url('../assets/img/vtt/frame.png') 16 fill / calc(16 * var(--u)) stretch;
}
.preview {
  position: absolute;
  inset: calc(-10 * var(--u));            /* the frame's border is 6px of its 16px slice */
  overflow-y: auto;
  overflow-x: hidden;
  border-radius: calc(11 * var(--u));
  scrollbar-width: thin;
  scrollbar-color: rgba(0, 0, 0, 0.4) transparent;
  -webkit-overflow-scrolling: touch;
}
.preview::-webkit-scrollbar { width: 8px; }
.preview::-webkit-scrollbar-thumb { background: rgba(0, 0, 0, 0.4); border-radius: 4px; }
.preview::-webkit-scrollbar-track { background: transparent; }
.preview:focus-visible { outline: 2px solid var(--lime); outline-offset: 3px; }
.preview__img { display: block; width: 100%; height: auto; }

/* 05 */
.case-section--design { padding-top: calc(100 * var(--u)); }
.case-section--design .grid4 { margin-top: calc(40 * var(--u)); }

/* 06 Impact + reflection */
.case-section--impact-vtt { padding-top: calc(120 * var(--u)); }
.metrics--flow {
  display: flex;
  flex-wrap: wrap;
  gap: calc(60 * var(--u)) calc(115 * var(--u));
  margin-top: calc(70 * var(--u));
}
.metrics--flow .metric__value { text-transform: uppercase; }
.metrics--flow .metric__value::after { width: 100%; }
.metrics--flow .metric__label { line-height: 1.2; }
.metrics--flow .metric__label .arrow { color: var(--white); }
.reflection { margin: calc(110 * var(--u)) 0 0; }
.reflection__quote { margin: 0; max-width: calc(640 * var(--u)); }
.reflection__quote p {
  font-size: calc(36 * var(--u));
  font-style: italic;
  font-weight: 500;
  line-height: 1.1;
  letter-spacing: -0.01em;
}
.reflection__source { margin-top: calc(34 * var(--u)); }
.reflection__logo { width: auto; height: calc(44 * var(--u)); }
.case-footer--vtt { padding: calc(130 * var(--u)) 0 calc(130 * var(--u)); }

/* Tablet */
@media (max-width: 1199px) and (min-width: 810px) {
  .module--role-vtt { grid-template-columns: minmax(0, 1fr); }
  .chain--story { flex-wrap: wrap; row-gap: calc(48 * var(--u)); }
  .chain--story .chain__step + .chain__step { margin-left: calc(80 * var(--u)); }
  .frame { width: 100%; height: calc(760 * var(--u)); }
}

/* Phone */
@media (max-width: 809px) {
  .case-hero--vtt { height: auto; }
  .case-copy--wide { max-width: none; }

  .case-section--challenge { padding-top: 56px; }
  .module--challenge { padding: 12px 12px 24px; }
  .module--challenge .problem-tile { font-size: 20px; }
  .module-body { margin-top: 24px; max-width: none; font-size: 19px; line-height: 1.3; padding: 0 8px; }
  .module-body br { display: none; }
  .module-rule { margin: 28px 8px 0; }
  .questions { margin: 22px 8px 0; max-width: none; font-size: 18px; line-height: 1.35; }

  .module--role-vtt { grid-template-columns: 1fr; min-height: 0; }
  .module--role-vtt .role-list--prose { max-width: none; }
  .module--challenge .problem-tile br { display: none; }
  .chain--story .chain__step + .chain__step { margin-left: 0; margin-top: 34px; }
  .chain--story .chain__step + .chain__step::before {
    content: "↓"; position: static; display: block; margin-bottom: 14px; font-size: 22px; font-weight: 400; color: var(--lime);
  }

  .case-section--story, .case-section--shift, .case-section--impact-vtt { padding-top: 80px; }
  .case-section--design { padding-top: 72px; }
  .grid4, .grid4--design { grid-template-columns: 1fr; margin-top: 28px; padding: 0; }
  .case-section--design .grid4 { margin-top: 28px; }
  .grid4__cell, .grid4__cell:nth-child(even), .grid4__cell:nth-child(-n+2), .grid4__cell:nth-child(n+3) { padding: 24px 20px 26px; }
  .grid4__cell + .grid4__cell { border-top: 1px solid var(--white); }
  .grid4__cell:nth-child(odd)::after, .grid4::before { display: none; }
  .grid4__label, .grid4__shift { font-size: 17px; }
  .grid4__text, .grid4--design .grid4__text { margin-top: 8px; font-size: 16px; max-width: none; }
  .grid4__title { margin-top: 14px; font-size: 17px; }
  .case-finding { margin-top: 28px; max-width: none; font-size: 17px; line-height: 1.35; }

  .chain--story { margin: 36px 0 0; }
  .chain--story .chain__term { font-size: 34px; }
  .chain--story .chain__sub { margin-top: 6px; font-size: 14px; text-align: left; }
  .chain--story .chain__sub br { display: none; }
  .chain--story .chain__step + .chain__step::before { color: var(--lime); }

  .result { margin-top: 56px; }
  .result__label { flex-direction: column; align-items: flex-start; gap: 6px; margin: 0 0 14px; }
  .result__kicker { font-size: 12px; }
  .result__hint { font-size: 14px; }
  .frame { width: 100%; height: 72vh; max-height: 640px; border-width: 16px; border-image-width: 16px; }
  .preview { inset: -10px; border-radius: 11px; }

  .metrics--flow { flex-direction: column; gap: 40px; margin-top: 40px; }
  .metrics--flow .metric__value::after { width: 160px; }
  .reflection { margin-top: 64px; }
  .reflection__quote { max-width: none; }
  .reflection__quote p { font-size: 24px; line-height: 1.2; }
  .reflection__source { margin-top: 22px; }
  .reflection__logo { height: 30px; }
  .case-footer--vtt { padding: 100px 0 140px; }
}

/* ==================================================================
   Klinikk for Alle case (work/klinik-for-alle).
   ================================================================== */
.case-hero--kfa { height: calc(637 * var(--u)); }
.case-copy--narrow { max-width: calc(600 * var(--u)); }

/* Typographic ladder (know → guidance → don't know) */
.module--ladder { min-height: calc(550 * var(--u)); padding-bottom: calc(40 * var(--u)); }
.ladder {
  margin: calc(50 * var(--u)) 0 0 calc(8 * var(--u));
  padding: 0;
  list-style: none;
  color: var(--white);
}
.ladder__step { display: flex; flex-direction: column; align-items: flex-start; }
.ladder__step + .ladder__step { margin-top: calc(22 * var(--u)); }
.ladder__step + .ladder__step::before {
  content: "↓";
  display: block;
  margin-bottom: calc(10 * var(--u));
  font-size: calc(30 * var(--u));
  line-height: 1;
}
.ladder__step--gap { margin-top: calc(40 * var(--u)) !important; }
.ladder__term {
  font-size: calc(30 * var(--u));
  font-weight: 700;
  line-height: 1.1;
  letter-spacing: -0.005em;
  text-transform: uppercase;
}
.ladder__sub { margin-top: calc(6 * var(--u)); font-size: calc(16 * var(--u)); line-height: 1.3; color: var(--lime); }
.ladder--open { margin: calc(84 * var(--u)) 0 0; }
.ladder--open .ladder__step + .ladder__step { margin-top: calc(34 * var(--u)); }
.ladder--open .ladder__step + .ladder__step::before { margin-bottom: calc(30 * var(--u)); }

/* 02 role variant */
.module--role-kfa { min-height: calc(590 * var(--u)); }
.module--role-kfa .role-list--prose { max-width: calc(580 * var(--u)); }

/* 03 research snapshot */
.case-section--research { padding-top: calc(120 * var(--u)); }
.snapshot { margin-top: calc(60 * var(--u)); }
.snapshot__title {
  font-size: calc(22 * var(--u));
  font-weight: 500;
  line-height: 1;
  text-transform: uppercase;
  color: var(--lime);
}
.snapshot__list { margin-top: calc(12 * var(--u)); font-size: calc(22 * var(--u)); line-height: 1.25; color: var(--case-grey); }
.snapshot__list strong { font-weight: 600; color: var(--white); }

/* 04 learned, uppercase variant */
.learned--caps .learned__shift { font-size: calc(22 * var(--u)); font-weight: 500; text-transform: uppercase; }
.learned--caps .learned__note { margin-top: calc(24 * var(--u)); color: var(--case-grey); }

/* 05 insight + flows */
.case-section--insight { padding-top: calc(120 * var(--u)); }
.case-rule--insight { margin-top: calc(50 * var(--u)); }
.case-section--insight .case-rule--insight + .case-intro { margin-top: calc(66 * var(--u)); }
.flows { margin-top: calc(90 * var(--u)); }
.flow-item + .flow-item { margin-top: calc(110 * var(--u)); }
.flow-item__title {
  font-size: calc(30 * var(--u));
  font-weight: 700;
  line-height: 1.1;
  letter-spacing: -0.005em;
  text-transform: uppercase;
}
.flow-item__sub { margin-top: calc(10 * var(--u)); font-size: calc(16 * var(--u)); line-height: 1.3; color: var(--lime); }
.flow-view {
  margin-top: calc(50 * var(--u));
  width: 100%;
  overflow-x: auto;                            /* the flow is wider than the viewport and pans sideways */
  overflow-y: hidden;
  scrollbar-width: thin;
  scrollbar-color: rgba(255, 255, 255, 0.35) transparent;
  -webkit-overflow-scrolling: touch;
}
.flow-view::-webkit-scrollbar { width: 8px; height: 8px; }
.flow-view::-webkit-scrollbar-thumb { background: rgba(255, 255, 255, 0.35); border-radius: 4px; }
.flow-view::-webkit-scrollbar-track { background: transparent; }
.flow-view:focus-visible { outline: 2px solid var(--lime); outline-offset: 3px; }
.flow-view__img { display: block; width: auto; max-width: none; height: calc(813 * var(--u)); }  /* 3× exports shown at 1/3: one screen ≈ 400u wide */
.flow-item__hint { margin-top: calc(14 * var(--u)); font-size: calc(14 * var(--u)); color: var(--case-dim); }

/* 06 validation */
.case-section--validation { padding-top: calc(120 * var(--u)); }
.case-section--validation .case-copy { margin-top: calc(34 * var(--u)); }
.case-section--validation .metrics--flow { margin-top: calc(70 * var(--u)); }
.reflection--kfa { margin-top: calc(90 * var(--u)); }
.reflection__source--text { font-size: calc(18 * var(--u)); color: var(--case-grey); }
.case-closing {
  margin-top: calc(90 * var(--u));
  max-width: calc(900 * var(--u));
  font-size: calc(22 * var(--u));
  font-weight: 500;
  line-height: 1.3;
}

/* Tablet */
@media (max-width: 1199px) and (min-width: 810px) {
  .module--role-kfa { grid-template-columns: minmax(0, 1fr); }
}

/* Phone: each flow becomes a full-width, touch-scrollable viewport with the
   screens kept at a readable size (the image is wider than the screen and pans inside). */
@media (max-width: 809px) {
  .case-hero--kfa { height: auto; }
  .case-copy--narrow { max-width: none; }
  .module--ladder { min-height: 0; padding-bottom: 24px; }
  .ladder { margin: 28px 0 0 8px; }
  .ladder__term { font-size: 20px; }
  .ladder__sub { font-size: 14px; }
  .ladder__step + .ladder__step { margin-top: 16px; }
  .ladder__step + .ladder__step::before { font-size: 22px; margin-bottom: 8px; }
  .ladder__step--gap { margin-top: 24px !important; }
  .ladder--open { margin: 36px 0 0; }
  .ladder--open .ladder__step + .ladder__step { margin-top: 20px; }
  .ladder--open .ladder__step + .ladder__step::before { margin-bottom: 14px; }
  .module--role-kfa { min-height: 0; }
  .module--role-kfa .role-list--prose { max-width: none; }
  .case-section--research, .case-section--insight, .case-section--validation { padding-top: 80px; }
  .snapshot { margin-top: 32px; }
  .snapshot__title { font-size: 15px; }
  .snapshot__list { font-size: 17px; line-height: 1.4; }
  .learned--caps .learned__shift { font-size: 17px; }
  .case-rule--insight { margin-top: 32px; }
  .case-section--insight .case-rule--insight + .case-intro { margin-top: 40px; }
  .flows { margin-top: 48px; }
  .flow-item + .flow-item { margin-top: 64px; }
  .flow-item__title { font-size: 22px; }
  .flow-item__sub { font-size: 14px; }
  .flow-view { margin: 22px 0 0 -20px; width: 100vw; }
  .flow-view__img { width: auto; height: 525px; max-width: none; }   /* ~320px per screen: readable, pans inside the viewport */
  .flow-item__hint { margin: 10px 0 0; font-size: 13px; }
  .case-section--validation .metrics--flow { margin-top: 40px; }
  .reflection--kfa { margin-top: 56px; }
  .reflection__source--text { font-size: 15px; }
  .case-closing { margin-top: 48px; max-width: none; font-size: 18px; }
}