/* ════════════════════════════════════════════════════════════════
   STEELBACK STUDIOS — BRAND GUIDELINES DECK
   Keyboard-driven slide system.

   Layered on top of variables.css / utility.css / custom.css.
   Owns: slide infrastructure, every slide layout, the keyboard UI
   chrome, the table-of-contents overlay, and the help overlay.

   Navigation:
     ← → ↑ ↓     prev / next slide
     SPACE       next slide
     HOME / END  first / last slide
     1 – 9, 0    jump to chapter (TOC must be open for 0)
     ESC         toggle table of contents
     ? or /      toggle help
   ════════════════════════════════════════════════════════════════ */

:root {
  --chrome-h: 64px;
  --edge: 6vw;
  --font-mono: ui-monospace, SFMono-Regular, "SF Mono", Menlo, Consolas, monospace;
  /* Override the brand variable so Audiowide stands in for the missing Skateblade. */
  --font-heading: 'Audiowide', 'Skateblade', sans-serif;
}

html, body {
  height: 100dvh;
  overflow: hidden;
  background: var(--color-background);
  color: var(--color-text);
}

/* Unlock scroll on non-deck pages (privacy, 404, etc.) */
html:has(.legal-page),
html:has(.legal-page) body,
html:has(.error),
html:has(.error) body {
  height: auto;
  overflow: visible;
}


body {
  font-family: var(--font-body);
  font-weight: 300;
  font-size: 17px;
  line-height: 1.5;
  letter-spacing: -.005em;
}
::selection { background: var(--black); color: var(--white); }

/* ─── Stage ─────────────────────────────────────────────────── */
.main-wrapper {
  position: relative;
  width: 100vw;
  height: 100dvh;
}

[data-slide] {
  position: fixed;
  inset: 0;
  display: flex;
  align-items: center;
  justify-content: flex-start;
  background: var(--color-background);
  color: var(--color-text);
  opacity: 0;
  visibility: hidden;
  transition: opacity .5s ease, transform .55s cubic-bezier(.22, .65, .35, 1), visibility 0s linear .55s;
  pointer-events: none;
  padding-bottom: var(--chrome-h);
  overflow: hidden;
}
[data-slide].is-active {
  opacity: 1;
  visibility: visible;
  transform: translateY(0);
  pointer-events: auto;
  transition: opacity .55s ease, transform .55s cubic-bezier(.22, .65, .35, 1);
}
[data-slide].is-before { transform: translateY(-2.5%); }
[data-slide].is-after  { transform: translateY( 2.5%); }

[data-slide] .padding-global    { width: 100%; padding: 0 var(--edge); }
[data-slide] .container-large   { max-width: 1280px; }
[data-slide] .padding-section-small { padding: 0; }

/* Theme overrides (live in variables.css; reinforce here for slides) */
[data-slide].theme-brand { background: var(--black); color: var(--white); }
[data-slide].theme-dark  { background: #1a1a1a; color: var(--white); }

/* Muted text on dark slides: opacity: .6 from utility.css would
   stack with the rgba color making text too faint. Reset opacity,
   use rgba(255,255,255,.7) which is ~5:1 on #1a1a1a. ────────── */
[data-slide].theme-brand .text-style-muted,
[data-slide].theme-dark  .text-style-muted { color: rgba(255,255,255,.7); opacity: 1; }

/* Reset utility-css ul padding inside slides; we re-style lists per layout */
[data-slide] ul { list-style: none; margin: 0; padding: 0; }
[data-slide] li { margin: 0; padding: 0; }

/* ─── Visually-hidden helper (for screen-reader-only content) ─ */
.sr-only {
  position: absolute !important;
  width: 1px !important; height: 1px !important;
  padding: 0 !important; margin: -1px !important;
  overflow: hidden !important;
  clip: rect(0,0,0,0) !important;
  white-space: nowrap !important;
  border: 0 !important;
}
.sr-only:focus {
  position: static !important;
  width: auto !important; height: auto !important;
  clip: auto !important;
  margin: 0 !important;
}

/* Skip link — first thing Tab hits */
.skip-link {
  position: fixed;
  top: -100px; left: 1rem;
  z-index: 200;
  background: var(--black); color: var(--white);
  padding: .75rem 1.25rem;
  font-family: var(--font-mono);
  font-size: .75rem; letter-spacing: .14em; text-transform: uppercase;
  text-decoration: none;
  transition: top .2s ease;
}
.skip-link:focus { top: 1rem; }

/* ─── COMPONENT: cover slide ────────────────────────────────
   Top accent row, centered hero block, bottom meta row.
   The H1 is centered on both axes within the available area. */
.slide-cover_component {
  display: grid;
  grid-template-rows: auto 1fr auto;
  gap: 2rem;
  width: 100%;
  min-height: calc(100vh - var(--chrome-h) - 4rem);
}
.slide-cover__top,
.slide-cover__bottom {
  display: flex; justify-content: space-between; align-items: baseline;
  gap: 2rem; flex-wrap: wrap;
  font-family: var(--font-mono);
  font-size: .75rem;
  letter-spacing: .22em;
  text-transform: uppercase;
  color: var(--neutral-300);
}
.slide-cover__top    { border-bottom: 1px solid var(--neutral-100); padding-bottom: 1.25rem; }
.slide-cover__bottom { border-top: 1px solid var(--neutral-100); padding-top: 1.25rem; }
.slide-cover__bottom a {
  color: var(--black);
  text-decoration: none;
  border-bottom: 1px solid currentColor;
  padding-bottom: 3px;
  transition: color .2s ease, border-color .2s ease, padding-right .2s ease;
}
.slide-cover__bottom a:hover,
.slide-cover__bottom a:focus-visible {
  color: var(--brand-accent);
  border-color: var(--brand-accent);
  outline: none;
}
.slide-cover__center {
  display: grid; gap: 2rem;
  align-content: center;
  justify-items: center;
  text-align: center;
}
.slide-cover__center h1 {
  font-family: var(--font-heading);
  font-size: clamp(4rem, 14vw, 12rem);
  line-height: .88;
  letter-spacing: -.03em;
  text-transform: uppercase;
  transform: skew(-12deg, 0deg);
  margin: 0;
  max-width: none;
}
.slide-cover__lede {
  max-width: 32ch;
  font-size: clamp(1.125rem, 1.6vw, 1.5rem);
  line-height: 1.35;
  color: var(--neutral-300);
  text-wrap: balance;
}

/* ─── COMPONENT: section title (chapter divider) ────────────── */
.slide-section-title_component {
  display: grid;
  gap: 2rem;
  width: 100%;
}
.slide-section-number {
  font-family: var(--font-mono);
  font-size: .8125rem;
  letter-spacing: .3em;
  text-transform: uppercase;
  color: var(--brand-accent);
  margin: 0;
}
.slide-section-title_component h2 {
  font-family: var(--font-heading);
  font-size: clamp(4rem, 14vw, 12rem);
  line-height: .9;
  letter-spacing: -.025em;
  text-transform: uppercase;
  transform: skew(-12deg, 0deg);
  transform-origin: left center;
  margin: 0;
}

/* ─── COMPONENT: split layout (label / content) ─────────────── */
.slide-split_component {
  display: grid;
  grid-template-columns: 1fr;
  gap: 2rem 4rem;
  align-items: start;
}
@media (min-width: 900px) {
  .slide-split_component { grid-template-columns: 320px 1fr; gap: 3rem 6rem; }
}
.slide-split_left h2 {
  font-family: var(--font-heading);
  font-size: clamp(2rem, 4vw, 3.5rem);
  line-height: 1;
  letter-spacing: -.015em;
  text-transform: uppercase;
  transform: skew(-12deg, 0deg);
  transform-origin: left center;
  margin: 0;
}
.slide-split_right { display: grid; gap: 1.5rem; max-width: 60ch; }
.slide-split_right h2 {
  font-family: var(--font-heading);
  font-size: clamp(2rem, 4vw, 3.25rem);
  line-height: 1;
  letter-spacing: -.015em;
  text-transform: uppercase;
  transform: skew(-12deg, 0deg);
  transform-origin: left center;
  margin: 0 0 1rem;
}

/* ─── COMPONENT: centered statement ─────────────────────────── */
.slide-center_component {
  display: grid; gap: 2rem;
  justify-items: start; align-content: center;
  max-width: 24ch;
}
.slide-center_component h2 {
  font-family: var(--font-heading);
  font-size: clamp(2.5rem, 8vw, 7rem);
  line-height: .95;
  letter-spacing: -.02em;
  text-transform: uppercase;
  transform: skew(-12deg, 0deg);
  transform-origin: left center;
  margin: 0;
}
.slide-center_component p { max-width: 36ch; }
.slide-center_component .accent-label {
  font-family: var(--font-mono);
  font-size: .8125rem;
  letter-spacing: .22em;
  text-transform: uppercase;
  color: var(--brand-accent);
  margin: 0;
}

/* ─── COMPONENT: stacked content ────────────────────────────── */
.slide-stack_component {
  display: grid; gap: 1.5rem;
  width: 100%;
}
.slide-stack_component h2 {
  font-family: var(--font-heading);
  font-size: clamp(2rem, 4vw, 3.25rem);
  line-height: 1;
  letter-spacing: -.015em;
  text-transform: uppercase;
  transform: skew(-12deg, 0deg);
  transform-origin: left center;
  margin: 0 0 .5rem;
  max-width: 18ch;
}

/* ─── Accent label ──────────────────────────────────────────── */
/* ─── Accent label ──────────────────────────────────────────── 
   Monochromatic: differentiated by font, size, and tracking —
   not by hue. Uses --brand-accent-light for subtle value shift
   from body text. Flips automatically via theme overrides. ──── */
.accent-label {
  font-family: var(--font-mono);
  font-size: .75rem;
  letter-spacing: .22em;
  text-transform: uppercase;
  color: var(--brand-accent-light);
  margin: 0;
}

/* ─── Brand values grid ─────────────────────────────────────── */
.values-grid {
  display: grid;
  grid-template-columns: 1fr;
  gap: 2rem 2.5rem;
  margin-top: 1rem;
}
@media (min-width: 700px)  { .values-grid { grid-template-columns: 1fr 1fr; } }
@media (min-width: 1000px) { .values-grid { grid-template-columns: repeat(4, 1fr); } }
.value-card {
  padding-top: 1.25rem;
  border-top: 1px solid currentColor;
}
.value-card h3 {
  font-family: var(--font-heading);
  font-size: 1.5rem;
  letter-spacing: -.01em;
  text-transform: uppercase;
  transform: skew(-12deg, 0deg);
  transform-origin: left center;
  margin: 0 0 .75rem;
}

/* ─── Competitor grid ───────────────────────────────────────── */
.competitor-grid {
  display: grid;
  grid-template-columns: repeat(2, 1fr);
  gap: 1.25rem;
  margin: 1rem 0;
}
@media (min-width: 800px) { .competitor-grid { grid-template-columns: repeat(4, 1fr); } }
.competitor-card {
  display: flex; align-items: center; gap: 1rem;
  padding: 1.25rem;
  border: 1px solid currentColor;
  opacity: .85;
}
.competitor-card_name {
  font-family: var(--font-mono);
  font-size: .8125rem;
  letter-spacing: .12em;
  text-transform: uppercase;
}

/* ─── Photo placeholder ─────────────────────────────────────── */
.photo-placeholder {
  display: flex; align-items: center; justify-content: center;
  background: repeating-linear-gradient(135deg,
    rgba(0,0,0,0.04) 0 12px,
    transparent 12px 24px);
  border: 1px solid currentColor;
  color: var(--neutral-300);
  font-family: var(--font-mono);
  font-size: .7rem;
  letter-spacing: .18em;
  text-transform: uppercase;
  min-height: 200px;
  aspect-ratio: 4 / 3;
}
.theme-brand .photo-placeholder,
.theme-dark  .photo-placeholder {
  color: rgba(255,255,255,.55);
  background: repeating-linear-gradient(135deg,
    rgba(255,255,255,0.04) 0 12px,
    transparent 12px 24px);
}
.photo-grid {
  display: grid;
  grid-template-columns: 1fr;
  gap: 1rem;
  margin-top: 1rem;
}
@media (min-width: 700px) { .photo-grid { grid-template-columns: repeat(3, 1fr); } }

/* ─── Pricing ───────────────────────────────────────────────── */
.pricing-card_price {
  font-family: var(--font-heading);
  font-size: clamp(2.5rem, 6vw, 4.5rem);
  line-height: 1;
  letter-spacing: -.02em;
  transform: skew(-12deg, 0deg);
  transform-origin: left center;
  margin: 1rem 0 1.5rem;
}
.pricing-card_list {
  display: flex; flex-direction: column; gap: .75rem;
}
.pricing-card_list li {
  padding: .75rem 0;
  border-bottom: 1px solid var(--neutral-100);
  font-size: .95rem;
}
.pricing-card_list li::before {
  content: "→ ";
  color: var(--brand-accent);
  margin-right: .5rem;
  font-family: var(--font-mono);
}

/* ─── LENS — fixed top + bottom stripe overlays ─────────────
   Echoes the homepage metaphor. Toggle with `L` key.
   Hidden by default; body.is-lens-on shows. Sits above slides
   but below the chrome bar (so the bottom band tucks behind
   the keyboard hints rather than fighting with them). */
.lens {
  position: fixed; left: 0; right: 0;
  z-index: 45;
  pointer-events: none;
  display: flex; flex-direction: column;
  /* Constant: cream container + black bands, on every slide,
     so toggling lens on a dark slide doesn't flash an inverted
     band system. The lens is a fixed artifact, not theme-aware. */
  background: #f2f2f2;
  opacity: 0;
  transition: opacity .35s ease;
}
body.is-lens-on .lens { opacity: 1; }

.lens--top    { top: 0; }
.lens--bottom { bottom: var(--chrome-h); flex-direction: column-reverse; }
.lens__band   { background: #1a1a1a; width: 100%; }

.lens--top .lens__band:nth-child(1) { height: 80px; margin-bottom: 22px; }
.lens--top .lens__band:nth-child(2) { height: 28px; margin-bottom: 14px; }
.lens--top .lens__band:nth-child(3) { height: 6px;  margin-bottom: 10px; }
.lens--top .lens__band:nth-child(4) { height: 4px;  margin-bottom: 8px;  }
.lens--top .lens__band:nth-child(5) { height: 3px;  margin-bottom: 7px;  }
.lens--top .lens__band:nth-child(6) { height: 2px;  margin-bottom: 0;    }
.lens--bottom .lens__band:nth-child(1) { height: 80px; margin-top: 22px; }
.lens--bottom .lens__band:nth-child(2) { height: 28px; margin-top: 14px; }
.lens--bottom .lens__band:nth-child(3) { height: 6px;  margin-top: 10px; }
.lens--bottom .lens__band:nth-child(4) { height: 4px;  margin-top: 8px;  }
.lens--bottom .lens__band:nth-child(5) { height: 3px;  margin-top: 7px;  }
.lens--bottom .lens__band:nth-child(6) { height: 2px;  margin-top: 0;    }

/* ─── VISION FILTERS — removed ─────────────────────────────
   Monochromatic build. The lens overlay (L key) remains as the
   primary accessibility metaphor — restricted field of view. ── */
.main-wrapper { transition: filter .25s ease; }

/* ─── Work-index links — Tab-focusable on slide 10 ─────────── */
.work-index a {
  display: contents;
  color: inherit;
  text-decoration: none;
  cursor: pointer;
}
.work-index li:has(a:focus-visible),
.work-index li:has(a:hover) {
  padding-left: 1.25rem;
  color: var(--brand-accent);
}
.work-index li:has(a:focus-visible) { outline: 1px dashed currentColor; outline-offset: 4px; }



/* ─── Work index list (slide 10) ────────────────────────────── */
.work-index {
  display: grid;
  margin-top: 1.5rem;
}
.work-index li {
  display: grid;
  grid-template-columns: 80px 1fr auto auto;
  align-items: baseline;
  gap: 1.5rem;
  padding: 1.75rem 0;
  border-top: 1px solid currentColor;
  transition: padding-left .3s ease;
}
.work-index li:last-child { border-bottom: 1px solid currentColor; }
.work-index__num {
  font-family: var(--font-mono);
  font-size: .75rem; letter-spacing: .22em;
  color: var(--brand-accent);
}
.work-index__name {
  font-family: var(--font-heading);
  font-size: clamp(1.5rem, 3vw, 2.5rem);
  line-height: 1; letter-spacing: -.015em;
  text-transform: uppercase;
  transform: skew(-12deg, 0deg);
  transform-origin: left center;
}
.work-index__tag {
  font-family: var(--font-mono);
  font-size: .7rem; letter-spacing: .18em;
  text-transform: uppercase;
  color: var(--neutral-300);
  opacity: .85;
}
.work-index__year {
  font-family: var(--font-mono);
  font-size: .8125rem; letter-spacing: .12em;
  color: var(--neutral-300);
}
@media (max-width: 700px) {
  .work-index li {
    grid-template-columns: auto 1fr;
    gap: .35rem 1rem;
  }
  .work-index__tag { grid-column: 1 / -1; }
  .work-index__year { display: none; }
}

/* ─── Case study slide ──────────────────────────────────────── */


.case-metrics {
  display: grid; gap: 1rem;
  margin: 2rem 0 0;
  padding: 0;
  font-family: var(--font-mono);
}
.case-metrics > div {
  display: grid;
  grid-template-columns: 110px 1fr;
  gap: 1rem;
  padding: .85rem 0;
  border-top: 1px solid var(--neutral-100);
  font-size: .8125rem;
  letter-spacing: .04em;
}
.case-metrics dt {
  text-transform: uppercase;
  letter-spacing: .18em;
  color: var(--neutral-300);
  font-size: .7rem;
  padding-top: .15rem;
}
.case-metrics dd {
  margin: 0;
  color: var(--black);
}

/* ─── Closing slide ─────────────────────────────────────────── */
.slide-center_component.closing {
  max-width: none;
  width: 100%;
  display: grid;
  gap: 2rem;
  justify-items: start;
  align-content: center;
}
.closing__email {
  display: inline-block;
  font-family: var(--font-mono);
  font-size: clamp(1.125rem, 2.2vw, 1.75rem);
  letter-spacing: -.005em;
  color: var(--white);
  text-decoration: none;
  border-bottom: 1px solid var(--white);
  padding-bottom: .15rem;
  transition: color .25s ease, border-color .25s ease;
}
.closing__email:hover,
.closing__email:focus-visible {
  color: var(--brand-accent);
  border-color: var(--brand-accent);
}
.closing__meta {
  display: flex; gap: 2rem; flex-wrap: wrap;
  margin-top: 1.5rem;
  padding-top: 1.5rem;
  border-top: 1px solid rgba(255,255,255,.15);
  font-family: var(--font-mono);
  font-size: .7rem;
  letter-spacing: .22em;
  text-transform: uppercase;
  color: rgba(255,255,255,.55);
}

/* ─── KEYBOARD CHROME (fixed bottom bar) ────────────────────── */
.chrome {
  position: fixed; left: 0; right: 0; bottom: 0;
  height: var(--chrome-h);
  display: grid;
  grid-template-columns: 1fr auto 1fr;
  align-items: center;
  padding: 0 var(--edge);
  z-index: 50;
  background: var(--color-background);
  border-top: 1px solid var(--neutral-100);
  font-family: var(--font-mono);
  font-size: .7rem;
  letter-spacing: .18em;
  text-transform: uppercase;
  color: var(--neutral-300);
  transition: background-color .4s ease, color .4s ease, border-color .4s ease;
  --chrome-bg: var(--color-background);
}
body.is-theme-brand .chrome,
body.is-theme-dark  .chrome {
  background: var(--black);
  color: rgba(255,255,255,.55);
  border-top-color: rgba(255,255,255,.12);
  --brand-accent: var(--white);
  --chrome-bg: var(--black);
}
.chrome__left {
  display: flex; align-items: center; gap: 1.5rem;
}
.chrome__counter strong {
  color: var(--black);
  font-weight: 500;
}
body.is-theme-brand .chrome__counter strong,
body.is-theme-dark  .chrome__counter strong { color: var(--white); }
.chrome__section {
  opacity: .9;
}
.chrome__section .accent {
  color: var(--brand-accent);
  margin-right: .5em;
}

/* Center nav group */
.chrome__keys {
  display: flex; align-items: center; gap: .5rem;
}
.chrome__nav-btn {
  display: inline-flex; align-items: center; gap: .4rem;
  min-width: 44px; min-height: 44px;        /* WCAG 2.5.8 touch target */
  padding: .35rem .75rem;
  background: transparent;
  border: 0; margin: 0;
  font: inherit; color: inherit;
  cursor: pointer;
  letter-spacing: inherit;
  justify-content: center;
}
.chrome__nav-btn:focus-visible {
  outline: 2px solid var(--brand-accent);
  outline-offset: 2px;
}
.chrome__nav-btn:hover .kbd {
  border-color: var(--brand-accent);
  color: var(--brand-accent);
}
.chrome__nav-label {
  font-family: var(--font-mono);
  font-size: .65rem;
  letter-spacing: .18em;
  text-transform: uppercase;
  opacity: .75;
}
.kbd {
  display: inline-flex; align-items: center; justify-content: center;
  min-width: 28px; height: 28px; padding: 0 .5rem;
  border: 1px solid currentColor;
  font-family: var(--font-mono);
  font-size: .7rem;
  letter-spacing: 0;
  text-transform: none;
  background: transparent;
  color: inherit;
  transition: background-color .12s ease, color .12s ease, transform .12s ease;
}
.kbd.is-pressed {
  background: var(--brand-accent);
  color: var(--chrome-bg);           /* flips: white-on-black / black-on-white */
  border-color: var(--brand-accent);
  transform: translateY(1px);
}

.chrome__right {
  justify-self: end;
  display: flex; align-items: center; gap: 1rem;
}
.chrome__right .meta-key {
  display: inline-flex; align-items: center; gap: .5rem;
  min-width: 44px; min-height: 44px;        /* WCAG 2.5.8 touch target */
  padding: .35rem .25rem;
  background: transparent;
  border: 0; margin: 0;
  font: inherit; color: inherit;
  cursor: pointer;
  letter-spacing: inherit;
  justify-content: center;
}
.chrome__right .meta-key:focus-visible {
  outline: 2px solid var(--brand-accent);
  outline-offset: 2px;
}
.chrome__right .meta-key:hover .kbd { border-color: var(--brand-accent); color: var(--brand-accent); }

/* Mobile menu button — hidden on desktop, shown on mobile */
.chrome__menu-btn {
  display: none;
  align-items: center; gap: .5rem;
  min-width: 44px; min-height: 44px;        /* WCAG 2.5.8 touch target */
  padding: .35rem .5rem;
  background: transparent;
  border: 0; margin: 0;
  font: inherit; color: inherit;
  cursor: pointer;
  letter-spacing: inherit;
  justify-content: center;
}
.chrome__menu-btn:focus-visible {
  outline: 2px solid var(--brand-accent);
  outline-offset: 2px;
}
.chrome__menu-label {
  font-family: var(--font-mono);
  font-size: .65rem;
  letter-spacing: .18em;
  text-transform: uppercase;
}

/* ─── TABLE OF CONTENTS overlay ─────────────────────────────── */
.toc {
  position: fixed; inset: 0;
  background: var(--color-background);
  z-index: 100;
  opacity: 0;
  visibility: hidden;
  transition: opacity .35s ease, visibility 0s linear .35s;
  padding: 4rem var(--edge) calc(var(--chrome-h) + 3rem);
  overflow-y: auto;
}
.toc.is-open {
  opacity: 1; visibility: visible;
  transition: opacity .35s ease;
}
.toc__head {
  display: flex; justify-content: space-between; align-items: baseline;
  border-bottom: 1px solid var(--neutral-100);
  padding-bottom: 1.25rem;
  margin-bottom: 3rem;
  font-family: var(--font-mono);
  font-size: .75rem;
  letter-spacing: .22em;
  text-transform: uppercase;
  color: var(--neutral-300);
}
.toc__head strong { color: var(--black); font-weight: 500; }
.toc__list { display: grid; gap: 0; max-width: 980px; margin: 0 auto; }
.toc__list a {
  display: grid;
  grid-template-columns: 64px 1fr auto auto;
  gap: 2rem;
  align-items: baseline;
  padding: 1.5rem 0;
  border-bottom: 1px solid var(--neutral-100);
  text-decoration: none;
  color: var(--black);
  transition: padding .3s ease, color .3s ease;
}
.toc__list a:hover,
.toc__list a:focus-visible { padding-left: 1rem; color: var(--brand-accent); outline: none; }
.toc__num {
  font-family: var(--font-mono);
  font-size: .75rem;
  letter-spacing: .22em;
  color: var(--brand-accent);
}
.toc__title {
  font-family: var(--font-heading);
  font-size: clamp(1.75rem, 3.5vw, 2.75rem);
  line-height: 1;
  letter-spacing: -.015em;
  text-transform: uppercase;
  transform: skew(-12deg, 0deg);
  transform-origin: left center;
}
.toc__range {
  font-family: var(--font-mono);
  font-size: .7rem;
  letter-spacing: .18em;
  color: var(--neutral-300);
  text-transform: uppercase;
}
.toc__key {
  display: inline-flex; align-items: center; justify-content: center;
  min-width: 28px; height: 28px; padding: 0 .5rem;
  border: 1px solid var(--black);
  font-family: var(--font-mono);
  font-size: .7rem;
  color: var(--black);
}

/* ─── HELP overlay ──────────────────────────────────────────── */
.help {
  position: fixed; inset: 0;
  background: rgba(26,26,26,.94);
  color: var(--white);
  z-index: 110;
  opacity: 0;
  visibility: hidden;
  transition: opacity .25s ease, visibility 0s linear .25s;
  display: grid; place-items: center;
  padding: 2rem var(--edge);
}
.help.is-open {
  opacity: 1; visibility: visible;
  transition: opacity .25s ease;
}
.help__panel {
  width: min(640px, 100%);
  display: grid; gap: 1.25rem;
}
.help__head {
  font-family: var(--font-mono);
  font-size: .75rem;
  letter-spacing: .22em;
  text-transform: uppercase;
  color: rgba(255,255,255,.5);
  border-bottom: 1px solid rgba(255,255,255,.15);
  padding-bottom: 1rem;
  display: flex; justify-content: space-between;
}
.help__head strong { color: var(--white); font-weight: 500; }
.help__list { display: grid; gap: 1rem; }
.help__row {
  display: grid;
  grid-template-columns: 1fr auto;
  gap: 1.5rem;
  align-items: center;
  font-family: var(--font-body);
  font-size: .9375rem;
  color: rgba(255,255,255,.85);
}
.help__row .keys { display: flex; gap: .35rem; }
.help__row .kbd {
  border-color: rgba(255,255,255,.4);
  color: var(--white);
}

/* ─── Print (no-keyboard fallback / handouts) ───────────────── */
@media print {
  html, body { height: auto; overflow: visible; background: white; color: black; }
  [data-slide] {
    position: relative;
    page-break-after: always;
    opacity: 1; visibility: visible; transform: none;
    min-height: 100vh;
    padding: 4rem 5%;
  }
  .chrome, .toc, .help, footer { display: none !important; }
}

/* ─── MANIFESTO overlay (toggle: M) ─────────────────────────
   Long-form explainer of the site's intent. Editorial layout,
   readable line lengths, scrolls if the panel exceeds viewport. */
.manifesto {
  position: fixed; inset: 0;
  background: var(--color-background);
  z-index: 105;
  opacity: 0; visibility: hidden;
  transition: opacity .35s ease, visibility 0s linear .35s;
  padding: 3rem var(--edge) calc(var(--chrome-h) + 3rem);
  overflow-y: auto;
}
.manifesto.is-open {
  opacity: 1; visibility: visible;
  transition: opacity .35s ease;
}
.manifesto__inner { max-width: 880px; margin: 0 auto; }
.manifesto__head {
  display: flex; justify-content: space-between; align-items: baseline;
  gap: 1rem; flex-wrap: wrap;
  border-bottom: 1px solid var(--neutral-100);
  padding-bottom: 1.25rem;
  margin-bottom: 3rem;
  font-family: var(--font-mono);
  font-size: .75rem;
  letter-spacing: .22em;
  text-transform: uppercase;
  color: var(--neutral-300);
}
.manifesto__head strong { color: var(--black); font-weight: 500; }
.manifesto__body { display: grid; gap: 3.5rem; }
.manifesto__body section { display: grid; gap: 1rem; }
.manifesto__body h3 {
  font-family: var(--font-heading);
  font-size: clamp(1.5rem, 2.6vw, 2.25rem);
  line-height: 1;
  letter-spacing: -.015em;
  text-transform: uppercase;
  transform: skew(-12deg, 0deg);
  transform-origin: left center;
  margin: 0;
  display: flex; align-items: center; gap: 1rem; flex-wrap: wrap;
}
.manifesto__body h3 .kbd {
  font-size: .65rem;
  transform: skew(12deg, 0deg);
  letter-spacing: 0;
  font-family: var(--font-mono);
  color: var(--brand-accent);
  border-color: var(--brand-accent);
}
.manifesto__body p {
  font-size: 1.0625rem;
  line-height: 1.55;
  color: var(--neutral-400);
  max-width: 60ch;
}
.manifesto__body strong { color: var(--black); font-weight: 500; }
.manifesto__body ul {
  margin: 0; padding-left: 1.25rem;
  display: grid; gap: .35rem;
  font-size: 1rem;
  color: var(--neutral-400);
}
.manifesto__body li { padding: 0; margin: 0; }
.manifesto__body em {
  font-style: normal; color: var(--brand-accent);
}
.manifesto__close-hint {
  margin-top: 3.5rem;
  padding-top: 1.25rem;
  border-top: 1px solid var(--neutral-100);
  font-family: var(--font-mono);
  font-size: .7rem; letter-spacing: .22em; text-transform: uppercase;
  color: var(--neutral-300);
}
.manifesto__close-hint .kbd { color: var(--black); border-color: var(--black); }

/* ─── chrome focus and hover for all interactive chrome elements ── */
.chrome__nav-btn:focus-visible,
.chrome__right .meta-key:focus-visible,
.chrome__menu-btn:focus-visible {
  outline: 2px solid var(--brand-accent);
  outline-offset: 4px;
}

/* ─── Reduced motion ────────────────────────────────────────── */
@media (prefers-reduced-motion: reduce) {
  [data-slide],
  [data-slide].is-active,
  .toc, .help, .tray, .kbd { transition: none !important; }
  [data-slide] { transform: none !important; }
}

/* ════════════════════════════════════════════════════════════════
   MOBILE CONTROLS TRAY
   Full-overlay for meta controls on touch devices.
   WCAG: role=dialog, aria-modal, focus-trapped, labelled.
   All tap targets ≥ 44×44 CSS px (WCAG 2.5.8, exceeding AA).
   ════════════════════════════════════════════════════════════════ */
.tray {
  position: fixed; inset: 0;
  background: var(--color-background);
  z-index: 105;
  opacity: 0;
  visibility: hidden;
  transition: opacity .3s ease, visibility 0s linear .3s;
  padding: 2rem var(--edge) calc(var(--chrome-h) + 2rem);
  overflow-y: auto;
  -webkit-overflow-scrolling: touch;
}
.tray.is-open {
  opacity: 1; visibility: visible;
  transition: opacity .3s ease;
}
body.is-theme-brand .tray,
body.is-theme-dark  .tray {
  background: var(--black);
  color: var(--white);
}
.tray__inner {
  max-width: 480px;
  margin: 0 auto;
}
.tray__head {
  display: flex;
  justify-content: space-between;
  align-items: center;
  border-bottom: 1px solid var(--neutral-100);
  padding-bottom: 1rem;
  margin-bottom: 1.5rem;
  font-family: var(--font-mono);
  font-size: .75rem;
  letter-spacing: .22em;
  text-transform: uppercase;
  color: var(--neutral-300);
}
.tray__head strong {
  color: var(--black);
  font-weight: 500;
}
body.is-theme-brand .tray__head strong,
body.is-theme-dark  .tray__head strong { color: var(--white); }

.tray__close {
  display: inline-flex; align-items: center; justify-content: center;
  min-width: 44px; min-height: 44px;        /* WCAG 2.5.8 */
  background: transparent;
  border: 1px solid currentColor;
  color: inherit;
  cursor: pointer;
  padding: .5rem;
  transition: color .2s ease, border-color .2s ease;
}
.tray__close:hover,
.tray__close:focus-visible {
  color: var(--brand-accent);
  border-color: var(--brand-accent);
}
.tray__close:focus-visible {
  outline: 2px solid var(--brand-accent);
  outline-offset: 2px;
}

.tray__list {
  display: grid;
  gap: 0;
}
.tray__item {
  display: flex;
  align-items: center;
  gap: 1rem;
  width: 100%;
  min-height: 56px;                          /* Comfortably exceeds 44px */
  padding: 1rem 0;
  background: transparent;
  border: 0;
  border-bottom: 1px solid var(--neutral-100);
  color: inherit;
  cursor: pointer;
  text-align: left;
  font: inherit;
  transition: padding-left .2s ease, color .2s ease;
}
.tray__item:first-child {
  border-top: 1px solid var(--neutral-100);
}
.tray__item:hover,
.tray__item:focus-visible {
  padding-left: 1rem;
  color: var(--brand-accent);
}
.tray__item:focus-visible {
  outline: 2px solid var(--brand-accent);
  outline-offset: -2px;
}
.tray__item-icon {
  display: inline-flex;
  align-items: center; justify-content: center;
  min-width: 36px; height: 36px;
  border: 1px solid currentColor;
  font-family: var(--font-mono);
  font-size: .75rem;
  font-weight: 500;
  flex-shrink: 0;
}
.tray__item-text {
  display: flex;
  flex-direction: column;
  gap: .15rem;
}
.tray__item-name {
  font-family: var(--font-mono);
  font-size: .8125rem;
  letter-spacing: .08em;
  text-transform: uppercase;
  font-weight: 500;
}
.tray__item-desc {
  font-size: .8125rem;
  color: var(--neutral-300);
  letter-spacing: 0;
  text-transform: none;
}
body.is-theme-brand .tray__item-desc,
body.is-theme-dark  .tray__item-desc {
  color: rgba(255,255,255,.5);
}

.tray__hint {
  margin-top: 1.5rem;
  font-family: var(--font-mono);
  font-size: .7rem;
  letter-spacing: .18em;
  text-transform: uppercase;
  color: var(--neutral-300);
}

body.is-theme-brand .tray .tray__item,
body.is-theme-dark  .tray .tray__item {
  border-bottom-color: rgba(255,255,255,.12);
}
body.is-theme-brand .tray .tray__item:first-child,
body.is-theme-dark  .tray .tray__item:first-child {
  border-top-color: rgba(255,255,255,.12);
}
body.is-theme-brand .tray__head,
body.is-theme-dark  .tray__head {
  border-bottom-color: rgba(255,255,255,.12);
  color: rgba(255,255,255,.55);
}


/* ════════════════════════════════════════════════════════════════
   RESPONSIVE: CHROME BAR
   ≤ 768px: collapse to counter | ←→ | menu
   Desktop-only items hidden. Menu button revealed.
   ════════════════════════════════════════════════════════════════ */

/* Desktop: hide the menu button and mobile label */
@media (min-width: 769px) {
  .chrome__menu-btn    { display: none !important; }
  .chrome__nav-label   { display: none; }  /* Show kbd squares only on desktop */
}

/* Tablet + Mobile */
@media (max-width: 768px) {
  .chrome {
    grid-template-columns: auto 1fr auto;
    gap: .5rem;
    padding: 0 calc(var(--edge) * .75);
  }
  .chrome__desktop-only { display: none !important; }
  .chrome__menu-btn     { display: inline-flex; }

  /* Nav buttons: show text labels, hide kbd squares */
  .chrome__nav-btn .kbd { display: none; }
  .chrome__nav-label    { display: inline; }

  .chrome__keys {
    justify-content: center;
    gap: .25rem;
  }
}


/* ════════════════════════════════════════════════════════════════
   RESPONSIVE: SLIDE CONTENT
   Tighten layouts on small viewports while keeping readability.
   ════════════════════════════════════════════════════════════════ */

@media (max-width: 768px) {
  /* Cover: scale the H1 down further */
  .slide-cover__center h1 {
    font-size: clamp(2.5rem, 12vw, 5rem);
  }
  .slide-cover__lede {
    font-size: clamp(1rem, 3.5vw, 1.25rem);
  }

  /* Section title chapters */
  .slide-section-title_component h2 {
    font-size: clamp(2.5rem, 12vw, 5rem);
  }

  /* Split layout: already collapses at 900px, but tighten gap */
  .slide-split_component { gap: 1.5rem 2rem; }

  /* TOC: tighten for mobile */
  .toc { padding: 2rem var(--edge) calc(var(--chrome-h) + 2rem); }
  .toc__list a {
    grid-template-columns: 48px 1fr auto;
    gap: .75rem;
    padding: 1rem 0;
  }
  .toc__range { display: none; }
  .toc__key   { display: none; }

  /* Help overlay: full-bleed on mobile */
  .help { padding: 2rem var(--edge); }
  .help__panel { width: 100%; }

  /* Manifesto: tighten */
  .manifesto { padding: 2rem var(--edge) calc(var(--chrome-h) + 2rem); }
  .manifesto__body { gap: 2.5rem; }

  /* Process grid: stack on mobile */
  .values-grid { grid-template-columns: 1fr; gap: 1.5rem; }

  /* Closing slide: scale email link */
  .closing__email {
    font-size: clamp(1rem, 4vw, 1.5rem);
    word-break: break-all;
  }
  .closing__meta {
    gap: 1rem;
    font-size: .65rem;
  }
}

/* Narrow phones */
@media (max-width: 480px) {
  :root {
    --edge: 5vw;
    --chrome-h: 56px;                        /* Slightly shorter on narrow */
  }

  /* Work index: simplify further */
  .work-index li {
    grid-template-columns: 1fr;
    gap: .25rem;
    padding: 1.25rem 0;
  }
  .work-index__num  { font-size: .65rem; }
  .work-index__name { font-size: clamp(1.25rem, 5vw, 1.75rem); }
  .work-index__tag  { grid-column: auto; }

  /* Pricing */
  .pricing-card_price {
    font-size: clamp(2rem, 8vw, 3rem);
  }
  .pricing-card_list li { font-size: .875rem; }

  /* Cover footer: stack on narrow */
  .slide-cover__top,
  .slide-cover__bottom {
    flex-direction: column;
    gap: .5rem;
    align-items: flex-start;
  }

  /* Case metrics: stack */
  .case-metrics > div {
    grid-template-columns: 1fr;
    gap: .25rem;
  }
}


/* ════════════════════════════════════════════════════════════════
   WCAG 2.2 AA: ENHANCED FOCUS INDICATORS
   2.4.7  Focus Visible — all interactive elements.
   2.4.11 Focus Not Obscured — chrome padding prevents overlap.
   1.4.11 Non-text Contrast — monochromatic palette, black/white
          = 4.0:1, passes 3:1 requirement for UI components.
   ════════════════════════════════════════════════════════════════ */

/* Global focus-visible for any interactive not already styled */
a:focus-visible,
button:focus-visible,
[tabindex]:focus-visible {
  outline: 2px solid var(--brand-accent);
  outline-offset: 2px;
}

/* Ensure slides have enough bottom padding for chrome not to obscure focused items */
[data-slide] {
  padding-bottom: calc(var(--chrome-h) + 1rem);
}

/* Touch action: hint to browsers about horizontal swipe */
.main-wrapper {
  touch-action: pan-y pinch-zoom;
}

/* Prevent pull-to-refresh from interfering with swipe on Chrome Android */
html {
  overscroll-behavior-y: contain;
}

/* ─── Noscript fallback ────────────────────────────────────────
   When JS is disabled, all slides become a scrollable page.
   Content is all in the HTML, just needs to be un-hidden. ────── */
.noscript-banner {
  position: fixed; top: 0; left: 0; right: 0;
  z-index: 200;
  background: var(--brand-accent);
  color: var(--white);
  text-align: center;
  padding: .75rem 1rem;
  font-family: var(--font-mono);
  font-size: .8125rem;
  letter-spacing: .06em;
}

/* ─── Closing slide legal footer ───────────────────────────────── */
.closing__legal {
  margin-top: 2rem;
  padding-top: 1rem;
  border-top: 1px solid rgba(255,255,255,.1);
  font-family: var(--font-mono);
  font-size: .65rem;
  letter-spacing: .14em;
  text-transform: uppercase;
  color: rgba(255,255,255,.4);
  display: flex; gap: 1.5rem; flex-wrap: wrap;
}
.closing__legal a {
  color: rgba(255,255,255,.4);
  text-decoration: none;
  border-bottom: 1px solid rgba(255,255,255,.15);
  transition: color .2s ease, border-color .2s ease;
}
.closing__legal a:hover,
.closing__legal a:focus-visible {
  color: rgba(255,255,255,.7);
  border-color: rgba(255,255,255,.4);
}

/* ─── Risk/stat highlight for compliance slide ─────────────────── */
.stat-callout {
  display: grid;
  grid-template-columns: 1fr;
  gap: 1.5rem;
  margin-top: 1.5rem;
}
@media (min-width: 700px) { .stat-callout { grid-template-columns: repeat(3, 1fr); } }
.stat-callout__item {
  padding-top: 1.25rem;
  border-top: 1px solid currentColor;
}
.stat-callout__number {
  font-family: var(--font-heading);
  font-size: clamp(1.75rem, 4vw, 2.5rem);
  line-height: 1;
  letter-spacing: -.01em;
  text-transform: uppercase;
  transform: skew(-12deg, 0deg);
  transform-origin: left center;
  margin: 0 0 .5rem;
}
.stat-callout__desc {
  font-size: .875rem;
  color: var(--neutral-300);
  max-width: 28ch;
}
.theme-dark .stat-callout__desc { color: rgba(255,255,255,.7); }

/* ─── Contact actions row ──────────────────────────────────────── */
.closing__actions {
  display: flex; gap: 1.5rem; flex-wrap: wrap;
  align-items: center;
}
.closing__action-link {
  display: inline-flex; align-items: center; gap: .5rem;
  font-family: var(--font-mono);
  font-size: clamp(.875rem, 1.8vw, 1.125rem);
  letter-spacing: .02em;
  color: var(--white);
  text-decoration: none;
  border-bottom: 1px solid rgba(255,255,255,.4);
  padding-bottom: .15rem;
  transition: color .25s ease, border-color .25s ease;
  min-height: 44px;  /* WCAG 2.5.8 touch target */
}
.closing__action-link:hover,
.closing__action-link:focus-visible {
  color: var(--brand-accent);
  border-color: var(--brand-accent);
}
.closing__action-divider {
  color: rgba(255,255,255,.25);
  font-family: var(--font-mono);
  font-size: .75rem;
}

/* ─── Lens state pill (simplified — lens only, no filters) ──── */
.chrome__state {
  display: flex; align-items: center; gap: .5rem;
  font-size: .7rem;
  letter-spacing: .18em;
  text-transform: uppercase;
  color: var(--brand-accent);
  opacity: 0;
  transition: opacity .25s ease;
}
.chrome__state.is-visible { opacity: 1; }
.chrome__state .dot {
  width: 6px; height: 6px;
  border-radius: 50%;
  background: currentColor;
  animation: state-pulse 1.6s ease-in-out infinite;
}
@keyframes state-pulse {
  0%, 100% { opacity: 1; }
  50% { opacity: .4; }
}

/* ════════════════════════════════════════════════════════════════
   CASE STUDY: BRAND SPECIMEN
   Full-bleed light bar top, dark bar bottom. Two-column content.
   Before drawer slides from right on B key / tap.
   ════════════════════════════════════════════════════════════════ */

/* ─── Client palettes: light + dark mode ───────────────────── */
[data-palette="stoltz"] {
  --palette-1: #B11B25;  --palette-2: #E4ff1a;  --palette-3: #0f2f43;
  --palette-1d: #1A0E09; --palette-2d: #E8C9A0; --palette-3d: #6BAF7D;
}
[data-palette="linden"] {
  --palette-1: #1B3A5C;  --palette-2: #7A9B76;  --palette-3: #F0EBE1;
  --palette-1d: #0F2440; --palette-2d: #A3C49D; --palette-3d: #C4BBA8;
}
[data-palette="hayfield"] {
  --palette-1: #2D5016;  --palette-2: #C8A94E;  --palette-3: #5C4033;
  --palette-1d: #1A3009; --palette-2d: #E0CA78; --palette-3d: #8B6B5A;
}
[data-palette="mercer"] {
  --palette-1: #4A1428;  --palette-2: #C4956A;  --palette-3: #F2EDE4;
  --palette-1d: #2E0C18; --palette-2d: #DEB88E; --palette-3d: #C4BBA8;
}

/* ─── Case study slides: override centering, allow absolute kids ─ */
[data-case] {
  align-items: stretch;
  justify-content: stretch;
}

/* ─── Full-bleed light bar — pinned to top ────────────────────── */
.case-specimen__light-bar {
  position: absolute;
  top: 0; left: 0; right: 0;
  height: 28px;
  display: flex;
  z-index: 2;
}

/* ─── Full-bleed dark bar — pinned to bottom, above chrome ────── */
.case-specimen__dark-bar {
  position: absolute;
  bottom: 0; left: 0; right: 0;
  height: 16px;
  display: flex;
  z-index: 2;
}

.case-specimen__bar--1  { flex: 5; background: var(--palette-1); }
.case-specimen__bar--2  { flex: 3; background: var(--palette-2); }
.case-specimen__bar--3  { flex: 2; background: var(--palette-3); }
.case-specimen__bar--1d { flex: 5; background: var(--palette-1d); }
.case-specimen__bar--2d { flex: 3; background: var(--palette-2d); }
.case-specimen__bar--3d { flex: 2; background: var(--palette-3d); }

/* ─── Two-column grid ─────────────────────────────────────────── */
[data-case] > .padding-global {
  display: flex;
  flex-direction: column;
  flex: 1;
  padding-top: calc(28px + 2rem);   /* clear the light bar */
  padding-bottom: calc(16px + 1rem); /* clear the dark bar  */
}
.case-specimen__grid {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 3rem;
  align-content: start;
  flex: 1;
}

/* ─── LEFT: wordmark + typography ─────────────────────────────── */
.case-specimen__left {
  display: flex;
  flex-direction: column;
  gap: 1.75rem;
}
.case-specimen__wordmark {
  font-size: clamp(3rem, 8vw, 5.5rem);
  font-weight: 700;
  line-height: .92;
  letter-spacing: -.02em;
  text-transform: uppercase;
}
.case-specimen__type-spec {
  border-top: 1px solid var(--neutral-100);
  padding-top: .75rem;
}
.case-specimen__type-label {
  font-family: var(--font-mono);
  font-size: .6rem;
  letter-spacing: .22em;
  text-transform: uppercase;
  color: var(--brand-accent-light);
  margin: 0 0 .35rem;
}
.case-specimen__type-sample {
  font-size: clamp(1.25rem, 2.5vw, 1.75rem);
  line-height: 1.2;
  margin: 0 0 .25rem;
}
.case-specimen__type-chars {
  font-size: clamp(.875rem, 1.5vw, 1.0625rem);
  color: var(--neutral-300);
  margin: 0;
  letter-spacing: .04em;
}

/* ─── RIGHT: metadata + brief ─────────────────────────────────── */
.case-specimen__right {
  display: flex;
  flex-direction: column;
  gap: 1.25rem;
}
.case-specimen__meta {
  display: grid;
  grid-template-columns: auto 1fr;
  gap: .35rem 1.25rem;
  font-size: .8125rem;
  line-height: 1.4;
}
.case-specimen__meta > div { display: contents; }
.case-specimen__meta-key {
  font-family: var(--font-mono);
  font-size: .6rem;
  letter-spacing: .22em;
  text-transform: uppercase;
  color: var(--brand-accent-light);
  padding-top: .15rem;
}
.case-specimen__meta-val { font-size: .875rem; }
.case-specimen__brief {
  font-size: clamp(.875rem, 1.4vw, 1rem);
  font-weight: 300;
  line-height: 1.55;
  max-width: 48ch;
  color: var(--neutral-300);
  margin: 0;
}

/* ─── Metrics row ─────────────────────────────────────────────── */
.case-specimen__metrics {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 0;
  margin-top: auto;
  padding-top: 1.5rem;
  border-top: 1px solid var(--neutral-100);
}
.case-specimen__metrics > div { padding: .75rem 1.5rem 0 0; }
.case-specimen__metrics dt {
  font-family: var(--font-mono);
  font-size: .6rem;
  letter-spacing: .22em;
  text-transform: uppercase;
  color: var(--brand-accent-light);
  margin: 0 0 .3rem;
}
.case-specimen__metrics dd {
  font-size: .875rem;
  font-weight: 400;
  margin: 0;
  line-height: 1.4;
}

/* ─── Before trigger tab — right edge of case study slides ────── */
.before-trigger {
  position: absolute;
  right: 0; top: 50%;
  transform: translateY(-50%);
  z-index: 5;
  display: flex;
  align-items: center;
  gap: .4rem;
  writing-mode: vertical-rl;
  text-orientation: mixed;
  padding: 1rem .5rem;
  min-width: 44px;
  background: var(--black);
  color: var(--white);
  border: 0;
  border-radius: 4px 0 0 4px;
  font-family: var(--font-mono);
  font-size: .6rem;
  letter-spacing: .22em;
  text-transform: uppercase;
  cursor: pointer;
  transition: padding .2s ease, background .2s ease;
}
.before-trigger:hover,
.before-trigger:focus-visible {
  padding: 1.25rem .6rem;
}
.before-trigger:focus-visible {
  outline: 2px solid var(--brand-accent);
  outline-offset: 2px;
}
.before-trigger__key {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 22px; height: 22px;
  border: 1px solid rgba(255,255,255,.35);
  font-size: .65rem;
  letter-spacing: 0;
  writing-mode: horizontal-tb;
}
.before-trigger__text {
  writing-mode: vertical-rl;
}

/* ════════════════════════════════════════════════════════════════
   BEFORE DRAWER — slides from right, clinical audit style
   Built in JS, populated per case study. B key toggles.
   ════════════════════════════════════════════════════════════════ */
.before-drawer {
  position: fixed;
  top: 0; right: 0; bottom: 0;
  width: clamp(320px, 42vw, 560px);
  z-index: 110;
  background: var(--black);
  color: var(--white);
  transform: translateX(100%);
  transition: transform .4s cubic-bezier(.22, .65, .35, 1);
  overflow-y: auto;
  -webkit-overflow-scrolling: touch;
  padding: 2.5rem 2rem calc(var(--chrome-h) + 2rem) 2.5rem;
}
.before-drawer.is-open {
  transform: translateX(0);
}

/* Scrim behind drawer */
.before-scrim {
  position: fixed;
  inset: 0;
  z-index: 109;
  background: rgba(0,0,0,.5);
  opacity: 0;
  visibility: hidden;
  transition: opacity .35s ease, visibility 0s linear .35s;
}
.before-scrim.is-open {
  opacity: 1;
  visibility: visible;
  transition: opacity .35s ease;
}

/* Drawer header */
.before-drawer__head {
  display: flex;
  justify-content: space-between;
  align-items: flex-start;
  margin-bottom: 2rem;
  padding-bottom: 1rem;
  border-bottom: 1px solid rgba(255,255,255,.12);
}
.before-drawer__title {
  font-family: var(--font-mono);
  font-size: .65rem;
  letter-spacing: .22em;
  text-transform: uppercase;
  color: rgba(255,255,255,.5);
}
.before-drawer__title strong {
  display: block;
  font-family: var(--font-body);
  font-size: 1.25rem;
  font-weight: 400;
  letter-spacing: 0;
  text-transform: none;
  color: var(--white);
  margin-top: .35rem;
}
.before-drawer__close {
  display: inline-flex;
  align-items: center; justify-content: center;
  min-width: 44px; min-height: 44px;
  background: transparent;
  border: 1px solid rgba(255,255,255,.2);
  color: var(--white);
  cursor: pointer;
  padding: .5rem;
  flex-shrink: 0;
  transition: border-color .2s ease;
}
.before-drawer__close:hover,
.before-drawer__close:focus-visible {
  border-color: rgba(255,255,255,.6);
}
.before-drawer__close:focus-visible {
  outline: 2px solid var(--white);
  outline-offset: 2px;
}

/* Audit findings */
.before-drawer__findings {
  display: flex;
  flex-direction: column;
  gap: 0;
}
.before-drawer__finding {
  padding: 1rem 0;
  border-bottom: 1px solid rgba(255,255,255,.08);
}
.before-drawer__finding:first-child {
  padding-top: 0;
}
.before-drawer__finding-label {
  font-family: var(--font-mono);
  font-size: .55rem;
  letter-spacing: .22em;
  text-transform: uppercase;
  color: rgba(255,255,255,.4);
  margin: 0 0 .3rem;
}
.before-drawer__finding-detail {
  font-size: .9375rem;
  line-height: 1.5;
  color: rgba(255,255,255,.8);
  margin: 0;
}

/* Drawer footer hint */
.before-drawer__hint {
  margin-top: 2rem;
  padding-top: 1rem;
  border-top: 1px solid rgba(255,255,255,.08);
  font-family: var(--font-mono);
  font-size: .55rem;
  letter-spacing: .18em;
  text-transform: uppercase;
  color: rgba(255,255,255,.3);
}

/* ─── Responsive ──────────────────────────────────────────────── */
@media (max-width: 900px) {
  .case-specimen__grid {
    grid-template-columns: 1fr;
    gap: 2rem;
  }
  .case-specimen__wordmark {
    font-size: clamp(2.5rem, 10vw, 4rem);
  }
}
@media (max-width: 768px) {
  .case-specimen__light-bar { height: 20px; }
  .case-specimen__dark-bar { height: 10px; }
  [data-case] > .padding-global {
    padding-top: calc(20px + 1.5rem);
    padding-bottom: calc(10px + 1rem);
  }
  .case-specimen__metrics { grid-template-columns: 1fr; }
  .case-specimen__metrics > div {
    padding: .75rem 0;
    border-bottom: 1px solid var(--neutral-100);
  }
  .case-specimen__metrics > div:last-child { border-bottom: 0; }
  .before-drawer {
    width: clamp(280px, 85vw, 420px);
    padding: 2rem 1.5rem calc(var(--chrome-h) + 1.5rem);
  }
  .before-trigger { padding: .75rem .4rem; }
}
@media (max-width: 480px) {
  .case-specimen__wordmark { font-size: clamp(2rem, 12vw, 3rem); }
  .case-specimen__meta {
    grid-template-columns: 1fr;
    gap: .15rem;
  }
  .case-specimen__meta > div {
    display: flex; gap: .75rem; align-items: baseline;
    padding: .25rem 0;
    border-bottom: 1px solid var(--neutral-100);
  }
}



/* ─── 404 page ─────────────────────────────────────────────── */
.error {
  min-height: 100dvh;
  display: flex;
  align-items: center;
}
.error__code {
  position: fixed;
  top: 50%; left: 50%;
  translate: -50% -50%;
  opacity: .06;
  pointer-events: none;
  white-space: nowrap;
  user-select: none;
  font-size: clamp(8rem, 25vw, 16rem);
}


/* ─── Legal pages (privacy, terms) ─────────────────────────────── */
.legal-page {
  min-height: 100dvh;
  padding-top: 4rem;
  padding-bottom: 6rem;
}
.legal-page__nav {
  margin-bottom: 3rem;
}
.legal-page__nav a {
  font-family: var(--font-mono);
  font-size: .65rem;
  letter-spacing: .22em;
  text-transform: uppercase;
  color: var(--black);
  text-decoration: none;
  border-bottom: 1px solid var(--neutral-100);
  padding-bottom: .15rem;
  min-height: 44px;
  display: inline-flex;
  align-items: center;
  gap: .5rem;
  transition: border-color .2s ease;
}
.legal-page__nav a:hover { border-color: var(--black); }
.legal-page__nav a:focus-visible {
  outline: 2px solid var(--black);
  outline-offset: 4px;
}
.legal-page__body {
  max-width: 60ch;
}
.legal-page__body h2 {
  font-family: var(--font-mono);
  font-size: .65rem;
  letter-spacing: .22em;
  text-transform: uppercase;
  color: var(--brand-accent-light);
  margin: 3rem 0 .75rem;
  padding-top: 2rem;
  border-top: 1px solid var(--neutral-100);
}
.legal-page__body p {
  font-size: .9375rem;
  font-weight: 300;
  line-height: 1.7;
  color: var(--neutral-300);
  margin: 0 0 1rem;
}
.legal-page__body ul {
  list-style: none;
  padding: 0;
  margin: 0 0 1rem;
}
.legal-page__body li {
  font-size: .9375rem;
  font-weight: 300;
  line-height: 1.7;
  color: var(--neutral-300);
  padding-left: 1.5rem;
  position: relative;
  margin-bottom: .25rem;
}
.legal-page__body li::before {
  content: '\2014';
  position: absolute;
  left: 0;
  color: var(--neutral-100);
}
.legal-page__body a {
  color: var(--black);
  text-decoration: none;
  border-bottom: 1px solid var(--neutral-100);
  transition: border-color .2s ease;
}
.legal-page__body a:hover { border-color: var(--black); }
.legal-page__body a:focus-visible {
  outline: 2px solid var(--black);
  outline-offset: 2px;
}