/* Case study pages — Swiss numbered-process layout.
   Each page sets --case-accent (client colour) and optionally --case-wash. */

.case-top { padding-top: calc(var(--nav-h) + clamp(26px, 4.6vw, 64px)); }
.case-top .eyebrow { margin-bottom: 14px; }
.case-top h1 {
  font-size: clamp(44px, 9vw, 140px);
  font-weight: 745; letter-spacing: -0.037em; line-height: 0.95;
}
.case-top__hook {
  font-size: clamp(18px, 2vw, 26px); font-weight: 480; color: var(--ink-2);
  max-width: 46ch; margin-top: 20px; letter-spacing: -0.01em;
}
.case-top__hook strong { color: var(--ink); font-weight: 620; }
.case-hero { margin-top: clamp(26px, 4vw, 56px); border-top: 1px solid var(--rule-strong); border-bottom: 1px solid var(--rule-strong); }
.case-hero .media-frame { aspect-ratio: 16 / 8.5; max-height: 80vh; }

/* snapshot bar */
.snapshot { display: grid; grid-template-columns: repeat(5, 1fr); border-bottom: 1px solid var(--rule-strong); }
.snapshot > div { padding: 18px clamp(14px, 1.6vw, 26px) 22px; border-right: 1px solid var(--rule); }
.snapshot > div:first-child { padding-left: var(--gutter); }
.snapshot > div:last-child { border-right: 0; padding-right: var(--gutter); }
.snapshot .eyebrow { margin-bottom: 6px; }
.snapshot p { font-size: 14.5px; font-weight: 540; letter-spacing: -0.01em; }
@media (max-width: 900px) {
  .snapshot { grid-template-columns: 1fr 1fr; }
  .snapshot > div { border-top: 1px solid var(--rule); padding-left: var(--gutter); }
  .snapshot > div:nth-child(-n+2) { border-top: 0; }
}

/* numbered process sections */
.proc { border-top: 1px solid var(--rule-strong); padding: clamp(34px, 5vw, 76px) var(--gutter) clamp(40px, 6vw, 88px); }
.proc__grid {
  display: grid;
  grid-template-columns: minmax(120px, 3fr) minmax(0, 9fr);
  gap: clamp(20px, 3vw, 64px);
  align-items: start;
}
.proc__grid > * { min-width: 0; }
.proc__n {
  font-size: clamp(72px, 10vw, 168px);
  font-weight: 780; letter-spacing: -0.045em; line-height: .84;
  color: var(--ink);
}
.proc--accent .proc__n { color: var(--case-accent); }
.proc__head h2 { font-size: clamp(26px, 3.2vw, 46px); font-weight: 680; letter-spacing: -0.028em; line-height: 1.05; }
.proc__head .sub { margin-top: 8px; font-size: 13px; font-weight: 560; letter-spacing: .08em; text-transform: uppercase; color: var(--ink-2); }
.proc__body { margin-top: clamp(18px, 2.4vw, 30px); columns: 2; column-gap: clamp(24px, 3vw, 56px); }
.proc__body p { font-size: 15.5px; color: var(--ink-2); margin-bottom: 14px; break-inside: avoid; max-width: 62ch; }
.proc__body p strong, .proc__body p b { color: var(--ink); font-weight: 600; }
.proc__body.one-col { columns: 1; max-width: 68ch; }
@media (max-width: 900px) {
  .proc__grid { grid-template-columns: 1fr; gap: 16px; }
  .proc__n { font-size: clamp(56px, 15vw, 96px); }
  .proc__body { columns: 1; }
}

/* insight list (research findings) */
.insights { margin-top: clamp(22px, 3vw, 40px); border-top: 1px solid var(--rule); }
.insights li { display: grid; grid-template-columns: 52px 1fr; gap: 14px; padding: 16px 0; border-bottom: 1px solid var(--rule); }
.insights .k { font-size: 13px; font-weight: 600; color: var(--case-accent); }
.insights p { font-size: 15px; color: var(--ink); max-width: 70ch; }
.insights p span { color: var(--ink-2); }

/* pull quote / strategy statement */
.pull {
  font-size: clamp(26px, 3.6vw, 54px);
  font-weight: 660; letter-spacing: -0.028em; line-height: 1.08;
  max-width: 24ch; margin-top: clamp(22px, 3vw, 44px);
  text-wrap: balance;
}
.pull em { font-style: italic; font-weight: 480; color: var(--case-accent); }

/* galleries */
.gal { display: grid; gap: clamp(12px, 1.6vw, 24px); margin-top: clamp(24px, 3.4vw, 52px); }
.gal--2 { grid-template-columns: 1fr 1fr; }
.gal--3 { grid-template-columns: repeat(3, 1fr); }
.gal--4 { grid-template-columns: repeat(4, 1fr); }
.gal figure, .gal > div { position: relative; min-width: 0; }
.gal img { width: 100%; }
.gal .media-frame { width: 100%; }
.gal figcaption { margin-top: 8px; font-size: 12.5px; color: var(--ink-2); }
.gal .span2 { grid-column: span 2; }
@media (max-width: 760px) {
  .gal--3, .gal--4 { grid-template-columns: 1fr 1fr; }
  .gal .span2 { grid-column: span 2; }
}

/* full-bleed band */
.band { border-top: 1px solid var(--rule-strong); border-bottom: 1px solid var(--rule-strong); }
.band .media-frame { aspect-ratio: 21 / 9; max-height: 76vh; }

/* palette + type system */
.sys { display: grid; grid-template-columns: repeat(6, 1fr); gap: clamp(10px, 1.4vw, 20px); margin-top: clamp(24px, 3.4vw, 52px); }
.sys .chip { aspect-ratio: 1 / 1.15; border: 1px solid var(--rule); display: flex; align-items: flex-end; padding: 10px; }
.sys .chip span { font-size: 11.5px; font-weight: 560; letter-spacing: .04em; }
.sys--4 { grid-template-columns: repeat(4, 1fr); }
@media (max-width: 760px) { .sys, .sys--4 { grid-template-columns: repeat(2, 1fr); } }
.sys .chip span { overflow-wrap: anywhere; }

/* video block */
.vid { position: relative; margin-top: clamp(24px, 3.4vw, 52px); }
.vid video { width: 100%; display: block; background: #000; }
.vid__play {
  position: absolute; inset: 0; display: flex; align-items: center; justify-content: center;
  background: rgba(0,0,0,.18); transition: opacity .3s;
}
.vid__play span {
  width: 84px; height: 84px; border-radius: 50%; background: var(--paper); color: var(--ink);
  display: flex; align-items: center; justify-content: center; font-size: 22px; padding-left: 5px;
}
.vid.playing .vid__play { opacity: 0; pointer-events: none; }

/* outcomes */
.outcomes { display: grid; grid-template-columns: repeat(3, 1fr); gap: 1px; background: var(--rule); border: 1px solid var(--rule); margin-top: clamp(24px, 3.4vw, 52px); }
.outcomes > div { background: var(--paper); padding: clamp(20px, 2.6vw, 38px); }
.outcomes .num { font-size: clamp(38px, 5vw, 72px); font-weight: 740; letter-spacing: -0.035em; line-height: 1; color: var(--case-accent); }
.outcomes p { margin-top: 10px; font-size: 14px; color: var(--ink-2); max-width: 26ch; }
@media (max-width: 760px) { .outcomes { grid-template-columns: 1fr; } }

/* prev / next ring */
.ring { display: grid; grid-template-columns: 1fr 1fr; border-top: 1px solid var(--rule-strong); }
.ring a { padding: clamp(26px, 4vw, 56px) var(--gutter); }
.ring a + a { border-left: 1px solid var(--rule-strong); text-align: right; }
.ring .plabel { color: var(--ink-2); }
.ring h3 { font-size: clamp(24px, 3.4vw, 52px); font-weight: 700; letter-spacing: -0.03em; margin-top: 10px; }
.ring a:hover h3 { color: var(--case-accent); }

/* lightbox */
.lightbox {
  position: fixed; inset: 0; z-index: 90; background: rgba(15,14,12,.94);
  display: flex; align-items: center; justify-content: center; padding: 4vmin;
  cursor: zoom-out;
}
.lightbox[hidden] { display: none; }
.lightbox img { max-width: 94vw; max-height: 92vh; width: auto; height: auto; object-fit: contain; }
.lightbox__close {
  position: absolute; top: 14px; right: 20px; font-size: 34px; color: #fff; line-height: 1;
  width: 48px; height: 48px;
}

/* variant toggle (BLEP design-system demo) */
.variants { margin-top: clamp(24px, 3.4vw, 52px); }
.variants__ctrl { display: flex; gap: 10px; margin-bottom: 18px; }
.variants__ctrl button {
  border: 1px solid var(--rule-strong); border-radius: 999px; padding: 9px 22px;
  font-size: 14px; font-weight: 560; transition: background .2s, color .2s;
}
.variants__ctrl button[aria-pressed="true"] { background: var(--ink); color: var(--paper); }
.variants__panes { position: relative; }
.variants__pane { display: none; }
.variants__pane.on { display: grid; }