/* ═══════════════════════════════════════════════════════════════════════
   system.css — shared design-system layer
   Loads AFTER styles.css and the case-study inline <style> blocks, so it
   re-skins every existing component from tokens. Each direction supplies
   its tokens + signature moments in theme.css.
   Nothing here changes markup, state classes, or JS behaviour.
═══════════════════════════════════════════════════════════════════════ */

/* Cross-document view transitions (progressive enhancement: Chrome/Edge/Safari 18.2+) */
@view-transition { navigation: auto; }

/* ── 0. Token fallbacks (themes override all of these) ───────────────── */
:root {
  --max: 1200px;
  --pad: clamp(20px, 4.5vw, 56px);
  --nav-h: 68px;
  --sec-y: clamp(72px, 9vw, 128px);
  --r: 12px; --r-sm: 8px; --r-lg: 24px;
  --bw: 1px;
  --ease: cubic-bezier(.2, .8, .2, 1);
  --fs-body: 1.0625rem; --lh-body: 1.62;
  --h1-size: clamp(2.75rem, 6vw, 5.5rem); --h1-w: 700; --h1-ls: -.03em; --h1-lh: 1; --h1-tt: none;
  --h2-size: clamp(2rem, 4.2vw, 3.5rem);  --h2-w: 700; --h2-ls: -.025em; --h2-lh: 1.05; --h2-tt: none;
  --h3-size: 1.125rem; --h3-w: 650; --h3-ls: -.01em; --h3-ff: var(--body);
  --label-size: .875rem; --label-w: 600; --label-ls: 0; --label-tt: none;
  --focus: var(--teal);
  --on-ink: #fff;
  --on-ink-mid: rgba(255,255,255,.72);
  --chip-r: 999px;
}

/* ── 1. Base ─────────────────────────────────────────────────────────── */
/* The original set overflow-x:hidden on html AND body, which silently breaks position:sticky (nav, tabs).
   `clip` still prevents sideways scroll without creating a scroll container. */
html, body { overflow-x: clip; }
html { font-size: 100%; scroll-padding-top: calc(var(--nav-h) + 20px); }
body {
  font-family: var(--body);
  font-size: var(--fs-body);
  line-height: var(--lh-body);
  color: var(--ink-mid);
  background: var(--bg);
  font-kerning: normal;
  font-optical-sizing: auto;
}
body p { font-size: var(--fs-body); line-height: 1.65; max-width: 68ch; text-wrap: pretty; }
::selection { background: var(--sel-bg, var(--teal)); color: var(--sel-fg, #fff); }
:focus-visible { outline: 3px solid var(--focus); outline-offset: 3px; }
a { text-underline-offset: .18em; text-decoration-thickness: .08em; }
body .container { max-width: var(--max); padding: 0 var(--pad); }
body section { padding: var(--sec-y) 0; border-bottom: var(--sec-bd, 1px solid var(--rule)); }
body main > section:last-of-type { border-bottom: none; }
.skip { position: absolute; left: 12px; top: -80px; z-index: 1000; background: var(--ink); color: var(--bg);
        padding: 12px 18px; font-weight: 600; border-radius: var(--r-sm); }
.skip:focus { top: 12px; }

/* ── 2. Type ─────────────────────────────────────────────────────────── */
body h1, body .about-body h1, body .page-hero h1 {
  font-family: var(--serif); font-style: normal;
  font-size: var(--h1-size); font-weight: var(--h1-w); letter-spacing: var(--h1-ls);
  line-height: var(--h1-lh); text-transform: var(--h1-tt); color: var(--ink); text-wrap: balance;
}
body h2 {
  font-family: var(--serif);
  font-size: var(--h2-size); font-weight: var(--h2-w); letter-spacing: var(--h2-ls);
  line-height: var(--h2-lh); text-transform: var(--h2-tt); color: var(--ink); text-wrap: balance;
}
body h3 {
  font-family: var(--h3-ff); font-size: var(--h3-size); font-weight: var(--h3-w);
  letter-spacing: var(--h3-ls); line-height: 1.25; color: var(--ink); text-wrap: balance;
}
/* the italic-accent device is retired site-wide */
h1 em, h2 em, h3 em, .overlay-headline em, .case-cover-headline em, .about-body h1 em {
  font-style: normal; font-family: inherit; letter-spacing: inherit; font-weight: inherit; color: inherit;
}
/* micro-labels: bigger, sentence-case by default (themes may opt into caps) */
body .label, body .page-eyebrow, body .case-client, body .fig-label, body .rd-label, body .kpi-label,
body .reframe-title, body .case-tldr-label, body .fig-index-label, body .writing-tag,
body .collab-block-label, body .sidebar-block h4, body .link-label, body .ob-fw-num, body .ob-fw-tag,
body .ob-fw-dlabel, body .ob-ia-cell label, body .case-next-btn span:first-child {
  font-family: var(--body); font-size: var(--label-size); font-weight: var(--label-w);
  letter-spacing: var(--label-ls); text-transform: var(--label-tt);
}
body .label { color: var(--label-color, var(--ink-light)); margin-bottom: 16px; }

/* ── 3. Chrome ───────────────────────────────────────────────────────── */
body nav {
  position: sticky; top: 0; z-index: 100; height: var(--nav-h);
  padding: 0 max(var(--pad), calc((100% - var(--max)) / 2 + var(--pad)));   /* align with .container edges */
  display: flex; align-items: center; justify-content: flex-start; gap: clamp(16px, 3vw, 40px);
  background: var(--nav-bg, var(--bg)); border-bottom: var(--nav-bd, 1px solid var(--rule));
  view-transition-name: site-nav;
}
body nav.is-scrolled { box-shadow: var(--nav-shadow, none); }
body .nav-logo { font-family: var(--serif); font-weight: var(--logo-w, 700); font-size: var(--logo-size, 1.125rem);
                 letter-spacing: var(--logo-ls, -.02em); color: var(--ink); text-transform: var(--logo-tt, none); white-space: nowrap; }
body .nav-links { margin-left: auto; gap: clamp(18px, 2.4vw, 34px); align-items: center; }
body .nav-links a {
  font-family: var(--body); font-size: .9375rem; font-weight: 500; letter-spacing: 0; text-transform: none;
  color: var(--ink-mid); padding: 12px 2px; min-height: 44px; display: inline-flex; align-items: center;
}
body .nav-links a:hover, body .nav-links a.active { color: var(--ink); }
body .nav-links a::after { bottom: 6px; height: 2px; background: var(--teal); }
body .nav-cta { white-space: nowrap; }
body .nav-hamburger { width: 44px; height: 44px; margin-left: auto; }
body .nav-hamburger span { height: 2px; background: var(--ink); }
body .nav-mobile-menu { inset: var(--nav-h) 0 0 0; background: var(--bg); border-top: var(--nav-bd, 1px solid var(--rule)); }
body .nav-mobile-menu a {
  font-family: var(--serif); font-style: normal; font-weight: var(--h2-w); letter-spacing: var(--h2-ls);
  text-transform: var(--h2-tt); font-size: clamp(2rem, 9vw, 3rem); color: var(--ink); padding: .5rem 0;
  border-bottom: 1px solid var(--rule);
}
body .nav-mobile-menu a.active { color: var(--teal); }
@media (max-width: 760px) {
  body .nav-links, body .nav-cta { display: none; }
  body .nav-hamburger { display: flex; }
}

body .btn {
  font-family: var(--body); font-size: .9375rem; font-weight: 600; letter-spacing: 0; text-transform: none;
  padding: 0 1.5rem; min-height: 52px; border-radius: var(--btn-r, var(--r-sm));
  transition: background-color .2s, color .2s, border-color .2s, transform .2s var(--ease);
}
body .btn-primary { background: var(--ink); color: var(--bg); border-color: var(--ink); }
body .btn-primary:hover { background: var(--teal); border-color: var(--teal); color: var(--on-teal, #fff); }
body .btn:active { transform: translateY(1px); }

body footer {
  border-top: var(--foot-bd, 1px solid var(--rule)); padding: 28px max(var(--pad), calc((100% - var(--max)) / 2 + var(--pad)));
  font-size: .9375rem; letter-spacing: 0; color: var(--ink-light);
}
body footer a { color: var(--ink-mid); padding: 10px 0; }
body footer a:hover { color: var(--ink); text-decoration: underline; }

/* ── 4. Shared home/work hooks (themes style them) ───────────────────── */
.theme-hidden { display: none !important; }
body .theme-filter-btn, body .case-tag.theme-filter-btn {
  font: inherit; font-size: .9375rem !important; font-weight: 500; padding: 0 18px !important; min-height: 44px;
  border-radius: var(--chip-r); border: 1px solid var(--rule-dark); background: transparent; color: var(--ink-mid);
  letter-spacing: 0; transition: background-color .15s, color .15s, border-color .15s;
}
body .theme-filter-btn:hover:not(.is-active) { border-color: var(--ink); color: var(--ink); }
body .theme-filter-btn.is-active { background: var(--ink) !important; color: var(--bg) !important; border-color: var(--ink) !important; }

body .advisory-block { background: var(--ink); color: var(--on-ink); border-radius: var(--r); }
body .advisory-block h3 { font-family: var(--serif); font-weight: var(--h2-w); letter-spacing: var(--h2-ls);
                          text-transform: var(--h2-tt); font-size: clamp(1.75rem, 3.4vw, 2.75rem); color: var(--on-ink); line-height: 1.05; }
body .advisory-block p { color: var(--on-ink-mid); font-size: 1rem; max-width: 52ch; }
body .advisory-block .btn { min-height: 56px; }

/* ── 5. About / Writing / Contact ────────────────────────────────────── */
body .about-headshot { border: none; border-radius: var(--r); }
body .arc-year { font-size: .9375rem; color: var(--teal); letter-spacing: 0; font-weight: 700; min-width: 76px; }
body .arc-detail h3 { font-size: 1.125rem; }
body .arc-detail p { font-size: 1rem; color: var(--ink-mid); line-height: 1.6; }
body .about-3col p { font-size: 1rem !important; }
body .logos-grid img { opacity: .8; filter: grayscale(1) contrast(.9); }
body .endorsement-grid { background: transparent; border: none; gap: 20px; }
body .endorsement { background: var(--bg-warm); border-radius: var(--r); padding: clamp(24px, 3vw, 40px); }
body .endorsement:hover { background: var(--teal-light); }
body .endorsement blockquote { font-family: var(--body); font-style: normal; font-weight: 500; font-size: 1.0625rem; line-height: 1.6; }
body .endorsement cite { font-size: .9375rem; }
body .endorsement cite strong { font-size: 1rem; }

body .writing-item-img { border-radius: var(--r); }
body .writing-tag { color: var(--ink-light); margin-bottom: 10px; }
body .writing-title { font-family: var(--serif); font-weight: var(--h3-w2, 650); letter-spacing: var(--h3-ls2, -.02em);
                      text-transform: var(--h3-tt2, none); font-size: clamp(1.5rem, 2.6vw, 2rem); line-height: 1.12; }
body .writing-thesis { font-size: 1.0625rem; color: var(--ink); font-weight: 500; max-width: 52ch; }
body .writing-item p:not(.writing-thesis) { font-size: 1rem; line-height: 1.6; max-width: 60ch; }
body .writing-link { font-size: .9375rem; letter-spacing: 0; text-transform: none; font-weight: 600; color: var(--teal);
                     text-decoration: underline; text-decoration-thickness: 2px; min-height: 44px; display: inline-flex; align-items: center; }

body .page-hero h1 { margin-bottom: 20px; }
body .form-title { font-family: var(--serif); font-weight: var(--h2-w); letter-spacing: var(--h2-ls); text-transform: var(--h2-tt);
                   font-size: clamp(1.5rem, 2.6vw, 2rem); }
body .form-group label { font-size: .9375rem; font-weight: 600; letter-spacing: 0; text-transform: none; color: var(--ink); }
body .form-group input, body .form-group select, body .form-group textarea {
  font-size: 1rem; min-height: 52px; border-radius: var(--r-sm); background: var(--white); border: 1.5px solid var(--rule-dark);
}
body .form-group textarea { min-height: 150px; }
body .form-group input:focus, body .form-group select:focus, body .form-group textarea:focus { border-color: var(--teal); outline: 3px solid var(--teal-light); }
body .avail-block { background: var(--teal-light); border-radius: var(--r); border: none; }
body .avail-status { color: var(--teal); font-size: 1rem; }
body .avail-detail { color: var(--ink); font-size: .9375rem; }
body .sidebar-block h4 { color: var(--ink); margin-bottom: 12px; font-size: 1rem; }
body .contact-link { font-size: 1rem; min-height: 48px; }
body .contact-link:hover { color: var(--teal); }
body .link-label { color: var(--ink-light); }
body .form-success { background: var(--teal-light); color: var(--ink); border-radius: var(--r); font-size: 1.0625rem; }

/* ── 6. Case-study components ────────────────────────────────────────── */
body .case-number { display: none; }                         /* decorative "01" — only one case per page */
body .case-study-block { border-bottom: none !important; }
body .case-client { color: var(--teal); margin-bottom: 14px; }
body .case-title { font-family: var(--serif); font-weight: var(--h2-w); letter-spacing: var(--h2-ls); text-transform: var(--h2-tt);
                   font-size: clamp(2.25rem, 5vw, 4rem); line-height: var(--h2-lh); color: var(--ink); text-wrap: balance; margin-bottom: 24px; }
body .case-subtitle { font-size: clamp(1.0625rem, 1.5vw, 1.25rem); color: var(--ink-mid); line-height: 1.6; max-width: 56ch; }
body .case-tag { font-size: .875rem; padding: 6px 14px; border-radius: var(--chip-r); border: 1px solid var(--rule-dark);
                 color: var(--ink-mid); letter-spacing: 0; }
body .case-header { grid-template-columns: minmax(0, 1.05fr) minmax(0, 1fr); gap: clamp(32px, 5vw, 80px); align-items: center; }
body .case-cover-wrap { border: none; border-radius: var(--r-lg); }
body .case-cover-overlay { padding: clamp(18px, 2.4vw, 32px); }
body .case-cover-label { font-size: .8125rem; letter-spacing: 0; text-transform: none; font-weight: 600; color: rgba(255,255,255,.82); }
body .case-cover-headline { font-family: var(--serif); font-weight: var(--h2-w); letter-spacing: var(--h2-ls); text-transform: var(--h2-tt);
                            font-size: clamp(1.25rem, 2.2vw, 1.875rem); line-height: 1.1; color: #fff; }
body .case-cover-metric { font-size: .875rem; letter-spacing: 0; text-transform: none; font-weight: 700; color: var(--cover-metric, #fff); }

body .case-tldr { border: none; border-radius: var(--r-lg); background: var(--tldr-bg, var(--bg-warm)); gap: 0; margin: 8px 0 clamp(32px, 5vw, 56px); }
body .case-tldr-item { padding: clamp(22px, 2.6vw, 36px); border-right: 1px solid var(--tldr-rule, var(--rule-dark)); }
body .case-tldr-label { color: var(--tldr-label, var(--teal)); font-size: .9375rem; margin-bottom: 10px; }
body .case-tldr-text { font-size: 1.0625rem; line-height: 1.55; color: var(--tldr-ink, var(--ink)); font-weight: 500; }

body .case-tabs { gap: 8px; margin-bottom: clamp(32px, 5vw, 56px); }
body .case-tab { font-family: var(--body); font-size: .9375rem; font-weight: 600; padding: 12px 18px; min-height: 48px;
                 border-radius: var(--tab-r, var(--chip-r)); border: 1.5px solid var(--rule-dark); color: var(--ink-mid);
                 display: inline-flex; align-items: center; justify-content: center; letter-spacing: 0; }
body .case-tab:hover { background: var(--ink); border-color: var(--ink); color: var(--bg); }
body .case-tab.active { background: var(--tab-active-bg, var(--ink)); border-color: var(--tab-active-bg, var(--ink)); color: var(--tab-active-fg, var(--bg)); }
@media (min-width: 601px) {
  body .case-tabs { position: sticky; top: calc(var(--nav-h) + 10px); z-index: 20; padding: 10px; margin-left: -10px; margin-right: -10px;
                    background: color-mix(in srgb, var(--bg) 88%, transparent); backdrop-filter: blur(14px) saturate(1.4);
                    border-radius: var(--r); width: calc(100% + 20px); }
}
body .tab-content > .label, body .tab-content .label { color: var(--ink); font-family: var(--serif); font-weight: var(--h2-w);
  letter-spacing: var(--h2-ls); text-transform: var(--h2-tt); font-size: clamp(1.5rem, 2.6vw, 2.125rem); line-height: 1.1; margin-bottom: 20px; }
body .reframe-brief .label, body .reframe-new .label, body .transferable .label, body .r-step .label, body .hindsight .label,
body .bridge-note .label, body .reframe-cols .label {
  font-family: var(--body); font-weight: 700; text-transform: none; letter-spacing: 0; font-size: .9375rem; line-height: 1.3;
}
body .tab-content p { max-width: 68ch; }
body .section-head { grid-template-columns: minmax(0, 220px) 1fr; }
body .rd-val { font-size: 1rem; }

body .reframe-cols { gap: 12px; }
body .reframe-brief, body .reframe-new { border-radius: var(--r); padding: clamp(24px, 3vw, 40px); }
body .reframe-brief { background: var(--bg-warm); }
body .reframe-brief p { font-style: normal; font-size: 1.125rem; color: var(--ink-light); text-decoration: line-through;
                        text-decoration-color: var(--teal); text-decoration-thickness: 2px; text-decoration-skip-ink: none; }
body .reframe-new { background: var(--teal-light); }
body .reframe-new p { color: var(--ink); font-size: 1.125rem; font-weight: 600; }

body .decision-log { border-top: var(--bw-strong, 2px) solid var(--ink); }
body .dl-header { border-bottom: 1px solid var(--ink); }
body .dl-header span { font-size: .9375rem; text-transform: none; letter-spacing: 0; font-weight: 700; }
body .dl-cell { font-size: 1rem; line-height: 1.55; }
body .dl-cell.chosen { color: var(--chosen, var(--teal)); font-weight: 600; }

body .r-chain { gap: 12px; }
body .r-step { border-radius: var(--r); }
body .r-step:nth-child(1) { background: var(--bg-warm); }
body .r-step p { font-size: 1rem; }
body .r-step-title { font-size: 1.0625rem; font-weight: 650; }

body .transferable { background: var(--amber-light); border: none; border-left: 4px solid var(--amber); border-radius: 0 var(--r) var(--r) 0; }
body .transferable .label { color: var(--amber); }
body .transferable p { color: var(--ink); font-size: 1.0625rem; }
body .collab-block { background: var(--teal-light); border-radius: 0 var(--r) var(--r) 0; }
body .collab-block p, body .bridge-note p { color: var(--ink); font-size: 1rem; }
body .collab-block-label { font-size: .9375rem; }
body .hindsight { border: none; background: var(--bg-warm); border-radius: var(--r-lg); padding: clamp(28px, 4vw, 56px); }
body .hindsight p { font-family: var(--body); font-size: clamp(1.125rem, 1.6vw, 1.375rem); line-height: 1.6; color: var(--ink); }

body .stats { background: var(--stats-bg, var(--ink)); border-radius: var(--r-lg); }
body .stat-num { font-family: var(--serif); font-weight: var(--h2-w); letter-spacing: var(--h2-ls); color: var(--stats-num, var(--bg)); }
body .stat-label { font-size: .9375rem; color: var(--stats-label, rgba(255,255,255,.72)); }
body .kpi-val { font-family: var(--serif); font-weight: var(--h2-w); letter-spacing: var(--h2-ls); }
body .kpi-label { font-size: .9375rem; }

body .fig-header { gap: 14px; margin-bottom: 14px; }
body .fig-label { color: var(--teal); }
body .fig-title { font-size: 1.0625rem; font-weight: 650; color: var(--ink); }
body .fig img, body .fig .ab-table, body .cs-clinicaltrials-1 { border-radius: var(--r); border-color: var(--rule); }
body .fig-caption { font-size: 1rem; line-height: 1.6; }
body .fig-outcome { font-size: .9375rem; color: var(--ink); font-weight: 600; border-top-color: var(--rule); }
body .fig-outcome::before { color: var(--teal); opacity: 1; }
body .fig-index { border-radius: var(--r); background: var(--bg-warm); border: none; }
body .fig-index-label { color: var(--ink); }
body .fig-index-list a { font-size: .9375rem; color: var(--ink); }
body .fig-index-list a:hover, body .fig-index-list a.active { color: var(--teal); border-bottom-color: var(--teal); }
body .fig-toggle { font-size: .9375rem; letter-spacing: 0; text-transform: none; min-height: 44px; }
body .cs-abbott-18, body .cs-obesity-5 { background: var(--bg-warm); }

body .ob-fw-module, body .ob-ia-pill { border-radius: var(--r-sm); }
body .ob-fw-name, body .ob-fw-dtitle { font-family: var(--serif); font-style: normal; font-weight: 650; letter-spacing: -.01em; text-transform: none; }
body .ob-fw-dtext, body .ob-ia-cell p { font-size: .9375rem; }
body .ob-fw-fn { font-size: .875rem; }
body .ob-fw-seq-note, body .ob-ia-gate-txt { font-style: normal; }
body .ob-fw-detail { background: var(--bg-warm); border-radius: var(--r); }
body .ob-ia-pill { font-size: .9375rem; }

body .case-next-nav { border-top: var(--bw-strong, 2px) solid var(--ink); }
body .case-next-btn:hover { background: var(--bg-warm); }
body .case-next-label { font-family: var(--serif); font-weight: var(--h2-w); letter-spacing: var(--h2-ls); text-transform: var(--h2-tt);
                        font-size: clamp(1.75rem, 3.4vw, 2.75rem); }
body .case-all-link { font-size: .9375rem; letter-spacing: 0; }
body .back-to-menu { border-radius: 999px; font-size: .9375rem; min-height: 44px; }

/* lightbox keeps the dark scrim; just make the controls reachable */
body .lightbox-close { width: 48px; height: 48px; }
body .fig-zoom-badge { background: var(--ink); }

/* ── 7. Motion hygiene ───────────────────────────────────────────────── */
@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after { animation-duration: .001ms !important; animation-iteration-count: 1 !important;
                           transition-duration: .001ms !important; scroll-behavior: auto !important; }
  ::view-transition-group(*), ::view-transition-old(*), ::view-transition-new(*) { animation: none !important; }
}
@media (max-width: 768px) {
  body .case-tldr-item { border-right: none; border-bottom: 1px solid var(--tldr-rule, var(--rule-dark)); }
  body .case-tldr-item:last-child { border-bottom: none; }
  body .case-header { grid-template-columns: 1fr; }
}

/* utility: visually hidden but available to assistive tech */
.vh { position: absolute; width: 1px; height: 1px; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; }


/* supporting copy that was 14.4px (and italic) next to 16px body text */
body .cs-abbott-3, body .cs-abbott-4, body .section-head-body p { font-size: 1rem; line-height: 1.6; font-style: normal; }

/* ── 8. Mobile case-study layout ─────────────────────────────────────────
   The original stylesheet collapses these grids on phones; the desktop re-declarations above use a
   higher-specificity `body …` selector, so each needs an explicit phone reset (html body = wins in any theme). */
@media (max-width: 768px) {
  html body .case-header { grid-template-columns: minmax(0, 1fr); gap: 28px; align-items: start; margin-bottom: 32px; }
  html body .case-title { font-size: clamp(1.875rem, 8.6vw, 2.5rem); overflow-wrap: break-word; margin-bottom: 16px; }
  html body .case-subtitle { font-size: 1.0625rem; max-width: none; }
  html body .case-cover-wrap { width: 100%; }
  html body .section-head { grid-template-columns: minmax(0, 1fr); gap: 10px; margin-bottom: 24px; }
  html body .role-deliverables { grid-template-columns: minmax(0, 1fr); gap: 0; padding: 8px 0 24px; margin-top: 32px; }
  html body .rd-item { min-width: 0; padding: 16px 0; border-bottom: 1px solid var(--rule); overflow-wrap: anywhere; }
  html body .rd-item:last-child { border-bottom: 0; }
  html body .rd-val { font-size: 1rem; }
  html body .transferable { flex-direction: column; gap: 8px; padding: 20px; margin: 24px 0; }
  html body .transferable .label { white-space: normal; padding-top: 0; margin-bottom: 0; }
  html body .transferable p { max-width: none; font-size: 1rem; }
  html body footer { padding-top: 24px; padding-bottom: max(24px, env(safe-area-inset-bottom)); }   /* no dead space under the footer */
  html { overscroll-behavior-y: none; }                     /* iOS: no rubber-band reveal of blank background below the page */
  /* the floating "Menu" pill (case studies only) steps aside at the footer so it never covers the links */
  html body .back-to-menu.is-at-end { opacity: 0 !important; visibility: hidden !important; pointer-events: none !important; }
}
@media (max-width: 600px) {
  /* tabs double as a jump menu on phones: compact 2-up grid instead of six full-width buttons */
  html body .case-tabs { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 8px; position: static; width: 100%; margin: 0 0 24px; padding: 0; background: none; backdrop-filter: none; }
  html body .case-tab { width: 100%; min-height: 48px; padding: 8px 10px; justify-content: center; text-align: center; font-size: .9375rem; line-height: 1.2; white-space: normal; }
  html body .case-tabs > .case-tab:first-child, html body .case-tabs > :last-child { grid-column: 1 / -1; }
  /* the original stylesheet drops the last tab's bottom border (it was a list item once); it's a button now */
  html body .case-tabs > .case-tab:last-child { border-bottom: 1px solid var(--rule-dark); }
  html body .case-tabs > .case-tab.active:last-child, html body .case-tabs > .case-tab:last-child:hover { border-bottom-color: var(--ink); }
  html body .case-tags { gap: 8px; }
  /* never smaller than 12px on a phone (figure labels were 9–11px) */
  html body .cs-abbott-7, html body .cs-abbott-14, html body .cs-abbott-19, html body .cs-abbott-22, html body .cs-abbott-23,
  html body .cs-obesity-6, html body .ob-fw-badge, html body .ob-ia-badge, html body .ob-ia-gate-txt, html body .lightbox-hint { font-size: 12px; }
}

@media (max-width: 600px) {
  /* figures */
  html body .fig-header { flex-direction: column; align-items: flex-start; gap: 4px; margin-bottom: 12px; }
  html body .fig-title, html body .fig-label { text-align: left; }
  html body .fig-title { font-size: 1.125rem; }
  html body .fig-caption { font-size: 1rem; }
  /* wide tables scroll sideways: say so, in words */
  html body .fig-scroll-hint { margin-bottom: 30px; }
  html body .fig-scroll-hint::after { content: "Swipe to see the full table"; position: absolute; top: 10px; left: 0; white-space: nowrap; font-size: 12px; font-weight: 600; color: var(--ink-light); }
  /* stat lists: padding, and numbers on a shared column so labels line up */
  html body .stats { padding: 6px 0; }
  html body .stat { padding: 14px 18px; gap: 16px; align-items: baseline; }
  html body .stat-num { min-width: 88px; font-size: 1.75rem; }
  html body .stat-label { font-size: .9375rem; }
}

/* ── 9. One photographic tint for every case-study cover ─────────────────
   The photos are already one shared navy duotone (same colour curve, same as the featured-work cards).
   Three covers then stacked an extra coloured layer on top (forest / teal / umber) — remove it, and give
   all four the same navy text-legibility gradient Abbott uses. */
.case-tint { display: none !important; }
.grad-forest, .grad-teal, .grad-umber, .grad-navy {
  background: linear-gradient(to bottom, rgba(12,28,72,0) 0%, rgba(12,28,72,.08) 28%, rgba(12,28,72,.60) 62%, rgba(12,28,72,.84) 100%) !important;
}

/* Cover text scales with the cover's own width (it sits in a 340px column on desktop, full width on phones),
   so long headlines can no longer overflow and get clipped at the top. */
body .case-cover-wrap { container-type: inline-size; }
body .case-cover-overlay { padding: clamp(14px, 5.2cqi, 32px); }
body .case-cover-label { font-size: clamp(.75rem, 3.3cqi, .875rem); margin-bottom: .4em; }
body .case-cover-headline { font-size: clamp(1.0625rem, 5.6cqi, 1.875rem); line-height: 1.1; margin-bottom: .5em; }
body .case-cover-metric { font-size: clamp(.75rem, 3.5cqi, .9375rem); line-height: 1.3; }