/* ==========================================================================
   Case-study pages under work/. Structure follows a long-form case study:
   hero, sticky section index, numbered sections with evidence, impact,
   reflection, next project, then the conversation footer.
   ========================================================================== */
/* Each case study takes its experience's accent from the My Work list on the
   main page (hero-glass.css, --work-accent), so a project keeps one colour
   from the list to its page: blue by default, green for Google Cloud, purple
   for Pete & Gerry's. Set on <body>. */
:root { --case-accent: #2f5f8a; --case-max: 1240px; }
[data-theme="dark"] { --case-accent: #8fb4dc; }
.case-accent-green { --case-accent: #3d6b4c; }
.case-accent-purple { --case-accent: #6a4c8c; }
[data-theme="dark"] .case-accent-green { --case-accent: #8fc09f; }
[data-theme="dark"] .case-accent-purple { --case-accent: #b59bd8; }

/* A soft wash of the page's own accent across the top, fading out before
   the body copy starts. */
body {
  margin: 0;
  background:
    radial-gradient(90% 55% at 12% 0%, color-mix(in srgb, var(--case-accent) 22%, transparent), transparent 72%),
    radial-gradient(70% 45% at 92% 0%, color-mix(in srgb, var(--case-accent) 14%, transparent), transparent 70%),
    var(--bg-primary);
  background-repeat: no-repeat;
  background-size: 100% 1100px, 100% 1100px, auto;
  color: var(--text-primary);
  font-family: var(--font-sans);
  -webkit-font-smoothing: antialiased;
}

.case-wrap {
  max-width: var(--case-max);
  margin: 0 auto;
  padding-inline: clamp(1.25rem, 4vw, 3rem);
}

/* ---- top bar: the shared glass capsule (.glass-cap in styles.css) ----
   Fixed, so the page starts below it: the first <main> gets the room the
   bar used to take up in the flow. */
.case-bar {
  justify-content: space-between;
  gap: 1rem;
}
.case-bar-start { display: flex; align-items: center; gap: clamp(0.75rem, 2vw, 1.5rem); }
.case-bar + main { padding-top: calc(var(--cap-top) + var(--cap-h) + 1.5rem); }

.case-home {
  font-weight: 700;
  font-size: 1.05rem;
  letter-spacing: -0.01em;
  color: var(--text-primary);
  text-decoration: none;
}
.case-home span { color: var(--text-secondary); font-weight: 500; }
.case-home:hover span { color: var(--text-primary); }

.case-bar-actions { display: flex; align-items: center; gap: 0.8rem; }

/* ---- pill action, inverted per theme (matches the hero "Say hi") ---- */
.case-pill {
  display: inline-flex;
  align-items: center;
  gap: 0.45rem;
  padding: 0.7rem 1.3rem;
  border-radius: 999px;
  background: #1d1d1f;
  color: #ffffff;
  font-weight: 600;
  font-size: 0.95rem;
  text-decoration: none;
  transition: transform 0.2s ease, background-color 0.2s ease;
}
.case-pill:hover { background: #3a3a3d; transform: translateY(-1px); }
.case-pill:active { transform: scale(0.98); }
.case-pill:focus-visible { outline: 2px solid var(--case-accent); outline-offset: 3px; }
[data-theme="dark"] .case-pill { background: #ffffff; color: #1d1d1f; }
[data-theme="dark"] .case-pill:hover { background: #e4e4e7; }

.case-link {
  display: inline-flex;
  align-items: center;
  gap: 0.4rem;
  color: var(--text-primary);
  font-weight: 600;
  text-decoration: none;
  border-bottom: 1.5px solid var(--case-accent);
  padding-bottom: 2px;
}
.case-link:hover { color: var(--case-accent); }

/* ---- hero ---- */
.case-hero { padding-top: clamp(2.5rem, 7vw, 5.5rem); }

.case-meta {
  margin: 0;
  font-family: var(--font-mono);
  font-size: 0.78rem;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  color: var(--text-secondary);
}

.case-title {
  margin: 1.2rem 0 0;
  font-size: clamp(3.4rem, 9vw, 7.5rem);
  font-weight: 700;
  letter-spacing: -0.045em;
  line-height: 0.95;
}
.case-title em { font-style: normal; color: var(--case-accent); }

.case-lede {
  margin: 1.6rem 0 0;
  max-width: 34ch;
  font-size: clamp(1.3rem, 2.2vw, 1.75rem);
  line-height: 1.35;
  letter-spacing: -0.015em;
  color: var(--text-primary);
}

.case-role {
  margin: 1.2rem 0 0;
  font-size: 1rem;
  color: var(--text-secondary);
}

.case-jumps {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 1rem 1.8rem;
  margin-top: 2rem;
}

.case-hero-media {
  margin: clamp(2.5rem, 6vw, 4.5rem) 0 0;
  border-radius: 22px;
  overflow: hidden;
  background: var(--bg-tertiary);
}
.case-hero-media img,
.case-hero-media video { display: block; width: 100%; height: auto; }
.case-hero-media.is-light { background: #ffffff; padding: clamp(1rem, 3vw, 2.5rem); }
/* Transparent UI screenshots (white screens with see-through gaps): a soft
   ground that follows the theme, and a light shadow so white screens keep
   their edges on the light page. */
.case-hero-media.is-screens,
.case-figure-frame.is-screens { background: #eceef1; padding: clamp(1rem, 3vw, 2.5rem); }
.is-screens img { filter: drop-shadow(0 12px 22px rgba(20, 24, 32, 0.14)); }
[data-theme="dark"] .case-hero-media.is-screens,
[data-theme="dark"] .case-figure-frame.is-screens { background: #16181b; }
[data-theme="dark"] .is-screens img { filter: drop-shadow(0 14px 26px rgba(0, 0, 0, 0.55)); }
/* Low-resolution source clips stay near their native size instead of
   blurring at full width. */
.case-hero-media.is-compact { max-width: 720px; }

/* ---- body: sticky index + sections ---- */
.case-body {
  display: grid;
  grid-template-columns: 210px minmax(0, 1fr);
  gap: clamp(2rem, 5vw, 4.5rem);
  margin-top: clamp(4rem, 9vw, 7rem);
}

.case-index {
  position: sticky;
  top: calc(var(--cap-top) + var(--cap-h) + 2rem);
  align-self: start;
}
.case-index p {
  margin: 0 0 1rem;
  font-family: var(--font-mono);
  font-size: 0.72rem;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  color: var(--text-secondary);
}
.case-index ol { list-style: none; margin: 0; padding: 0; display: grid; gap: 0.2rem; }
.case-index a {
  display: flex;
  gap: 0.7rem;
  padding: 0.4rem 0;
  font-size: 0.92rem;
  color: var(--text-secondary);
  text-decoration: none;
  transition: color 0.2s ease;
}
.case-index a span { font-family: var(--font-mono); font-size: 0.78rem; padding-top: 0.12rem; }
.case-index a:hover,
.case-index a.is-active { color: var(--text-primary); }
.case-index a.is-active span { color: var(--case-accent); }

.case-section {
  padding-bottom: clamp(4rem, 8vw, 6.5rem);
  scroll-margin-top: calc(var(--cap-top) + var(--cap-h) + 2rem);
}
.case-section + .case-section {
  border-top: 1px solid var(--border-subtle);
  padding-top: clamp(3rem, 6vw, 5rem);
}

.case-eyebrow {
  margin: 0;
  font-family: var(--font-mono);
  font-size: 0.75rem;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  color: var(--case-accent);
}

.case-h2 {
  margin: 1rem 0 0;
  max-width: 20ch;
  font-size: clamp(2rem, 3.6vw, 3.1rem);
  font-weight: 600;
  line-height: 1.06;
  letter-spacing: -0.03em;
}

.case-h3 {
  margin: 3rem 0 0;
  font-size: 1.2rem;
  font-weight: 700;
  letter-spacing: -0.01em;
}

.case-p {
  margin: 1.3rem 0 0;
  max-width: 62ch;
  font-size: 1.12rem;
  line-height: 1.65;
  color: var(--text-muted);
}
.case-p strong { color: var(--text-primary); font-weight: 600; }

/* ---- metric strip: numbers divided by hairlines, not cards ---- */
.case-metrics {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(180px, 1fr));
  margin-top: 2.5rem;
  border-top: 1px solid var(--border-subtle);
}
.case-metric { padding: 1.5rem 1.5rem 0 0; }
.case-metric + .case-metric { padding-left: 1.5rem; border-left: 1px solid var(--border-subtle); }
.case-metric-num {
  margin: 0;
  font-size: clamp(2.4rem, 4vw, 3.4rem);
  font-weight: 500;
  letter-spacing: -0.04em;
  line-height: 1;
  color: var(--case-accent);
}
.case-metric-label { margin: 0.6rem 0 0; font-size: 0.98rem; line-height: 1.45; color: var(--text-secondary); max-width: 26ch; }

/* ---- quote ---- */
.case-quote {
  margin: 2.5rem 0 0;
  padding-left: 1.4rem;
  border-left: 3px solid var(--case-accent);
  max-width: 40ch;
  font-size: clamp(1.3rem, 2.2vw, 1.7rem);
  line-height: 1.35;
  letter-spacing: -0.015em;
}
.case-quote p { margin: 0; }
.case-quote footer { margin-top: 0.8rem; font-size: 0.9rem; color: var(--text-secondary); letter-spacing: 0; }

/* ---- callout ---- */
.case-callout {
  margin-top: 2.5rem;
  padding: 1.6rem 1.8rem;
  border-radius: 16px;
  background: var(--bg-tertiary);
  border: 1px solid var(--border-subtle);
  max-width: 62ch;
}
.case-callout .case-eyebrow { color: var(--text-secondary); }
.case-callout p:not(.case-eyebrow) { margin: 0.7rem 0 0; font-size: 1.05rem; line-height: 1.6; color: var(--text-primary); }

/* ---- figures & galleries ---- */
.case-figure { margin: 2.5rem 0 0; }
.case-figure-frame {
  border-radius: 18px;
  overflow: hidden;
  background: var(--bg-tertiary);
}
.case-figure-frame.is-light { background: #f4f1ea; padding: clamp(1rem, 3vw, 2.5rem); }
.case-figure img,
.case-figure video { display: block; width: 100%; height: auto; }
.case-figure figcaption { margin-top: 0.8rem; font-size: 0.92rem; color: var(--text-secondary); max-width: 62ch; }

.case-pair {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 1.2rem;
  margin-top: 2.5rem;
  align-items: start;
}
.case-pair .case-figure { margin: 0; }

/* Horizontal gallery: scroll-snap, swipe or scroll sideways. */
.case-gallery {
  display: grid;
  grid-auto-flow: column;
  grid-auto-columns: minmax(240px, 32%);
  gap: 1rem;
  margin-top: 2.5rem;
  overflow-x: auto;
  scroll-snap-type: x mandatory;
  padding-bottom: 0.8rem;
  scrollbar-width: thin;
}
.case-gallery > * { scroll-snap-align: start; margin: 0; }
.case-gallery img { display: block; width: 100%; height: auto; border-radius: 14px; }
.case-gallery figcaption { margin-top: 0.6rem; font-size: 0.88rem; color: var(--text-secondary); }

/* ---- lists as numbered rows ---- */
.case-steps { list-style: none; margin: 2.5rem 0 0; padding: 0; counter-reset: step; max-width: 62ch; }
.case-steps li {
  counter-increment: step;
  display: grid;
  grid-template-columns: 2.4rem 1fr;
  gap: 0.8rem;
  padding: 1rem 0;
  border-top: 1px solid var(--border-subtle);
  font-size: 1.05rem;
  line-height: 1.55;
  color: var(--text-primary);
}
.case-steps li::before {
  content: counter(step, decimal-leading-zero);
  font-family: var(--font-mono);
  font-size: 0.8rem;
  color: var(--case-accent);
  padding-top: 0.2rem;
}
.case-steps li span { grid-column: 2; display: block; color: var(--text-secondary); font-size: 0.97rem; }

/* ---- comparison table ---- */
.case-table-wrap { margin-top: 2.5rem; overflow-x: auto; }
.case-table { width: 100%; border-collapse: collapse; font-size: 0.98rem; min-width: 520px; }
.case-table th,
.case-table td { text-align: left; padding: 0.9rem 1rem 0.9rem 0; border-bottom: 1px solid var(--border-subtle); vertical-align: top; }
.case-table thead th { font-family: var(--font-mono); font-size: 0.72rem; letter-spacing: 0.12em; text-transform: uppercase; color: var(--text-secondary); font-weight: 500; }
.case-table tbody th { font-weight: 600; color: var(--text-primary); width: 26%; }
.case-table td { color: var(--text-muted); }

/* ---- single-series bar chart (survey percentages): one hue, value labels
   in text ink, no legend (the title names the series) ---- */
.case-chart { margin-top: 2.5rem; max-width: 640px; }
.case-chart-title { margin: 0 0 1.2rem; font-size: 1rem; font-weight: 600; color: var(--text-primary); }
.case-bars { list-style: none; margin: 0; padding: 0; display: grid; gap: 0.9rem; }
.case-bar-row { display: grid; grid-template-columns: 9.5rem 1fr 3rem; align-items: center; gap: 0.9rem; }
.case-bar-label { font-size: 0.95rem; color: var(--text-secondary); }
.case-bar-track { position: relative; height: 12px; }
.case-bar-track::before { content: ''; position: absolute; inset: 5px 0; background: var(--border-subtle); border-radius: 2px; }
.case-bar-fill {
  position: relative;
  display: block;
  height: 100%;
  width: var(--v);
  background: var(--case-accent);
  border-radius: 0 4px 4px 0;
}
.case-bar-val { font-size: 0.95rem; font-weight: 600; color: var(--text-primary); text-align: right; font-variant-numeric: tabular-nums; }
.case-chart-note { margin: 1rem 0 0; font-size: 0.85rem; color: var(--text-secondary); }

/* ---- impact / effort matrix ---- */
.case-matrix {
  position: relative;
  margin: 2.5rem 0 2rem 1.8rem;
  max-width: 560px;
  aspect-ratio: 4 / 3;
  border-left: 1px solid var(--text-secondary);
  border-bottom: 1px solid var(--text-secondary);
  background:
    linear-gradient(var(--border-subtle), var(--border-subtle)) 50% 0 / 1px 100% no-repeat,
    linear-gradient(var(--border-subtle), var(--border-subtle)) 0 50% / 100% 1px no-repeat;
}
.case-matrix-axis { position: absolute; font-family: var(--font-mono); font-size: 0.7rem; letter-spacing: 0.12em; text-transform: uppercase; color: var(--text-secondary); }
.case-matrix-axis.x { right: 0; bottom: -1.8rem; }
.case-matrix-axis.y { left: -1.6rem; top: 0; writing-mode: vertical-rl; transform: rotate(180deg); }
.case-dot {
  position: absolute;
  left: var(--x);
  bottom: var(--y);
  transform: translate(-7px, 50%);
  display: flex;
  align-items: center;
  gap: 0.5rem;
  font-size: 0.92rem;
  white-space: nowrap;
  color: var(--text-secondary);
}
.case-dot::before { content: ''; width: 14px; height: 14px; border-radius: 50%; border: 2px solid var(--text-secondary); background: var(--bg-primary); flex-shrink: 0; box-sizing: border-box; }
.case-dot.is-picked { color: var(--text-primary); font-weight: 600; }
.case-dot.is-picked::before { background: var(--case-accent); border-color: var(--case-accent); }

/* ---- funnel as a stepped list: values span 5,000 to 2, so bars would hide
   the bottom of the funnel; the numbers and rates carry it instead ---- */
.case-funnel { list-style: none; margin: 2.5rem 0 0; padding: 0; max-width: 640px; }
.case-funnel li {
  display: grid;
  grid-template-columns: 7rem 1fr auto;
  align-items: baseline;
  gap: 1rem;
  padding: 0.95rem 0;
  border-top: 1px solid var(--border-subtle);
}
.case-funnel b { font-size: 1.9rem; font-weight: 500; letter-spacing: -0.03em; color: var(--case-accent); font-variant-numeric: tabular-nums; }
.case-funnel span { color: var(--text-primary); font-size: 1rem; }
.case-funnel i { font-style: normal; font-size: 0.9rem; color: var(--text-secondary); font-variant-numeric: tabular-nums; }

/* Before/after bars: the "before" bar is quiet grey so the change reads as
   the accent one. Widths are drawn to scale. */
.case-bar-fill.is-before { background: var(--text-secondary); opacity: 0.45; }

/* ---- flow diagram: steps joined by arrows, drawn in HTML so it follows the
   theme. The step that carries the point (.is-key) is filled with the accent. Stacks
   vertically on phones. ---- */
.case-flow {
  list-style: none;
  display: flex;
  gap: 2rem;
  margin: 2.5rem 0 0;
  padding: 0;
}
.case-flow li {
  position: relative;
  flex: 1 1 0;
  min-width: 0;
  padding: 1rem 1.05rem;
  border: 1px solid var(--border-subtle);
  border-radius: 14px;
  background: var(--bg-tertiary);
  font-size: 0.97rem;
  font-weight: 600;
  line-height: 1.35;
  color: var(--text-primary);
}
.case-flow li span { display: block; margin-top: 0.4rem; font-size: 0.86rem; font-weight: 400; line-height: 1.45; color: var(--text-secondary); }
.case-flow li + li::before {
  content: '';
  position: absolute;
  top: 50%;
  left: -1.55rem;
  width: 1.1rem;
  height: 1.5px;
  background: var(--text-secondary);
}
.case-flow li + li::after {
  content: '';
  position: absolute;
  top: 50%;
  left: -0.75rem;
  width: 6px;
  height: 6px;
  border-top: 1.5px solid var(--text-secondary);
  border-right: 1.5px solid var(--text-secondary);
  transform: translateY(-50%) rotate(45deg);
}
.case-flow li.is-key { background: var(--case-accent); border-color: var(--case-accent); color: #ffffff; }
.case-flow li.is-key span { color: rgba(255, 255, 255, 0.86); }
[data-theme="dark"] .case-flow li.is-key { color: #111316; }
[data-theme="dark"] .case-flow li.is-key span { color: rgba(17, 19, 22, 0.8); }
.case-flow-note { margin: 0.9rem 0 0; font-size: 0.88rem; color: var(--text-secondary); max-width: 62ch; }

/* ---- transform: a handwritten page becomes a structured note. The paper
   is a physical object, so it keeps fixed colours in both themes. ---- */
.case-transform {
  display: grid;
  grid-template-columns: minmax(0, 1fr) auto minmax(0, 1fr);
  align-items: center;
  gap: 1.4rem;
  margin: 2.5rem 0 0;
}
.case-paper {
  margin: 0;
  padding: 1.1rem 1.4rem 1.3rem;
  border-radius: 4px;
  background: repeating-linear-gradient(#fbf8f1 0 2.15rem, #d6e0ea 2.15rem 2.2rem);
  color: #26364f;
  font-family: 'Beth Ellen', cursive;
  font-size: 0.95rem;
  line-height: 2.2rem;
  transform: rotate(-1.2deg);
  box-shadow: 0 14px 28px -16px rgba(0, 0, 0, 0.45);
}
.case-paper p { margin: 0; }
.case-transform-arrow { width: 2.2rem; height: 2.2rem; color: var(--case-accent); }
.case-notes {
  margin: 0;
  padding: 1.2rem 1.4rem;
  border-radius: 14px;
  border: 1px solid var(--border-subtle);
  background: var(--bg-tertiary);
}
.case-notes div { display: grid; grid-template-columns: 5.5rem 1fr; gap: 0.8rem; padding: 0.55rem 0; }
.case-notes div + div { border-top: 1px solid var(--border-subtle); }
.case-notes dt { font-family: var(--font-mono); font-size: 0.7rem; letter-spacing: 0.1em; text-transform: uppercase; color: var(--text-secondary); padding-top: 0.2rem; }
.case-notes dd { margin: 0; font-size: 0.97rem; color: var(--text-primary); }

@media (max-width: 700px) {
  .case-flow { flex-direction: column; gap: 1.5rem; max-width: 420px; }
  .case-flow li + li::before { top: -1.2rem; left: 50%; width: 1.5px; height: 0.95rem; }
  .case-flow li + li::after { top: -0.55rem; left: 50%; transform: translate(-50%, -50%) rotate(135deg); }
  .case-transform { grid-template-columns: minmax(0, 1fr); justify-items: center; }
  .case-transform > * { width: 100%; }
  .case-transform-arrow { transform: rotate(90deg); width: 2rem !important; }
}

/* ---- persona / trait grid ---- */
.case-traits { display: grid; grid-template-columns: repeat(auto-fit, minmax(200px, 1fr)); margin-top: 2.5rem; border-top: 1px solid var(--border-subtle); }
.case-traits p { margin: 0; padding: 1.2rem 1.2rem 1.2rem 0; font-size: 1.02rem; line-height: 1.5; color: var(--text-primary); border-bottom: 1px solid var(--border-subtle); }
.case-traits p b { display: block; font-family: var(--font-mono); font-size: 0.72rem; font-weight: 500; letter-spacing: 0.12em; text-transform: uppercase; color: var(--text-secondary); margin-bottom: 0.4rem; }

/* ---- mid-page action ---- */
.case-action {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  justify-content: space-between;
  gap: 1.2rem 2rem;
  margin-top: 3rem;
  padding: 1.6rem 0;
  border-top: 1px solid var(--border-subtle);
  border-bottom: 1px solid var(--border-subtle);
  max-width: 62ch;
}
.case-action p { margin: 0; font-size: 1.1rem; color: var(--text-primary); max-width: 34ch; }
/* The closing call to action pairs the pill with a quiet "Download resume",
   a button (it opens the resume form in place) styled as a .case-link. */
.case-action-links { display: flex; flex-wrap: wrap; align-items: center; gap: 0.9rem 1.4rem; }
button.case-link {
  padding: 0 0 2px;
  border: 0;
  border-bottom: 1.5px solid var(--case-accent);
  background: none;
  font: inherit;
  font-weight: 600;
  cursor: pointer;
}
button.case-link:focus-visible { outline: 2px solid var(--case-accent); outline-offset: 4px; border-radius: 2px; }

/* ---- reflection ---- */
.case-reflect { margin-top: 3rem; max-width: 62ch; }
.case-reflect p:not(.case-eyebrow) { margin: 0.8rem 0 0; font-size: 1.12rem; line-height: 1.65; color: var(--text-muted); }

/* ---- next project: a card tinted in THAT project's accent (the same
   colours as its tile on the main page), copy on the left, its media in a
   device frame on the right. The whole card is the link. ---- */
.case-next {
  --next: #2f5f8a;
  display: grid;
  grid-template-columns: minmax(0, 0.95fr) minmax(0, 1.05fr);
  gap: clamp(2rem, 5vw, 4.5rem);
  align-items: center;
  margin: clamp(2rem, 5vw, 4rem) 0 clamp(4rem, 8vw, 6rem);
  padding: clamp(2rem, 5vw, 4.5rem);
  border-radius: 28px;
  border: 1px solid color-mix(in srgb, var(--next) 18%, transparent);
  background: linear-gradient(135deg,
    color-mix(in srgb, var(--next) 13%, var(--bg-primary)),
    color-mix(in srgb, var(--next) 5%, var(--bg-primary)));
  color: var(--text-primary);
  text-decoration: none;
}
.case-next--green  { --next: #3d6b4c; }
.case-next--purple { --next: #6a4c8c; }
[data-theme="dark"] .case-next         { --next: #8fb4dc; }
[data-theme="dark"] .case-next--green  { --next: #8fc09f; }
[data-theme="dark"] .case-next--purple { --next: #b59bd8; }
[data-theme="dark"] .case-next {
  background: linear-gradient(135deg,
    color-mix(in srgb, var(--next) 14%, var(--bg-primary)),
    color-mix(in srgb, var(--next) 5%, var(--bg-primary)));
}

.case-next-eyebrow {
  margin: 0;
  font-size: 0.8rem;
  font-weight: 600;
  letter-spacing: 0.12em;
  text-transform: uppercase;
  color: var(--next);
}
.case-next-sub {
  margin: 1.6rem 0 0;
  max-width: 24ch;
  font-size: clamp(1.3rem, 2.1vw, 1.8rem);
  line-height: 1.3;
  letter-spacing: -0.015em;
  color: var(--text-muted);
  text-wrap: balance;
}
.case-next-title {
  margin: 1rem 0 0;
  font-size: clamp(3rem, 6.4vw, 5.4rem);
  font-weight: 700;
  letter-spacing: -0.05em;
  line-height: 0.98;
}
.case-next-desc {
  margin: 1.4rem 0 0;
  max-width: 40ch;
  font-size: 1.08rem;
  line-height: 1.55;
  color: var(--text-secondary);
}
.case-next-cta {
  display: inline-flex;
  align-items: center;
  gap: 1rem;
  margin-top: 2.2rem;
  font-size: 1.08rem;
  font-weight: 600;
}
.case-next-arrow {
  display: grid;
  place-items: center;
  width: 3.2rem;
  height: 3.2rem;
  border-radius: 50%;
  border: 1px solid color-mix(in srgb, var(--next) 45%, transparent);
  color: var(--next);
  transition: background-color 0.25s ease, color 0.25s ease;
}
.case-next-arrow svg { width: 1.3rem; height: 1.3rem; transition: transform 0.25s ease; }
.case-next:hover .case-next-arrow { background: var(--next); color: var(--bg-primary); }
.case-next:hover .case-next-arrow svg { transform: translate(2px, -2px); }
.case-next:focus-visible { outline: 2px solid var(--next); outline-offset: 4px; }

/* Device frame: fixed hardware colours, same as the main page's tiles. The
   camera, notch and buttons are drawn in styles.css ("Device hardware"). */
.case-next-media {
  --bezel: clamp(6px, 0.7vw, 9px);
  padding: var(--bezel);
  border-radius: clamp(16px, 2vw, 24px);
  background: #0c0c0e;
  box-shadow: 0 0 0 1px #47474c, inset 0 0 0 1px rgba(255, 255, 255, 0.06), 0 30px 60px -30px rgba(0, 0, 0, 0.45);
  transition: transform 0.4s cubic-bezier(0.2, 0.8, 0.2, 1);
}
.case-next:hover .case-next-media { transform: translateY(-4px); }
.case-next-screen {
  aspect-ratio: 16 / 10;
  border-radius: clamp(10px, 1.3vw, 16px);
  overflow: hidden;
  background: #16161a;
}
.case-next-screen video { display: block; width: 100%; height: 100%; object-fit: cover; }
.case-next-media.is-phone {
  justify-self: center;
  --bezel: clamp(8px, 0.9vw, 10px);
  width: clamp(200px, 20vw, 250px);
  border-radius: clamp(32px, 3.4vw, 42px);
  box-shadow: 0 0 0 1px #47474c, inset 0 0 0 2px #1b1b1f, inset 0 0 0 3px rgba(255, 255, 255, 0.09), 0 30px 60px -30px rgba(0, 0, 0, 0.45);
}
.case-next-media.is-phone .case-next-screen { aspect-ratio: 540 / 1164; border-radius: clamp(24px, 2.6vw, 32px); background: #ffffff; }

@media (max-width: 900px) {
  .case-next { grid-template-columns: minmax(0, 1fr); }
  .case-next-media.is-phone { width: min(220px, 60vw); }
}
@media (prefers-reduced-motion: reduce) {
  .case-next-media, .case-next-arrow, .case-next-arrow svg { transition: none; }
}

/* ==========================================================================
   Footer: a quiet line, one huge "let's talk" link with a big arrow, email,
   then a hairline and the small row. Always on a deep green-charcoal ground.
   ========================================================================== */
/* ---- placeholder pages ---- */
.case-placeholder { margin: 2rem 0 clamp(5rem, 10vw, 8rem); font-size: 1.15rem; color: var(--text-muted); }

@media (max-width: 900px) {
  .case-body { grid-template-columns: minmax(0, 1fr); }
  .case-index { display: none; }
  .case-pair { grid-template-columns: minmax(0, 1fr); }
  .case-metric + .case-metric { padding-left: 0; border-left: 0; }
  .case-bar-row { grid-template-columns: 7.5rem 1fr 2.6rem; }
  .case-funnel li { grid-template-columns: 5rem 1fr; }
  .case-funnel i { grid-column: 2; }
  .case-bar .case-pill { display: none; }
}

/* Phones: the logo already links home, so the text link steps aside to
   keep the capsule on one line. */
@media (max-width: 600px) {
  .case-home { display: none; }
}

@media (prefers-reduced-motion: reduce) {
  .case-pill { transition: none; }
}

/* Paired figures share one frame shape so a tall phone and a wide screenshot
   sit level; the image fits inside rather than setting the height. */
.case-pair .case-figure-frame { position: relative; aspect-ratio: 4 / 5; padding: 0; }
.case-pair .case-figure-frame img {
  position: absolute;
  inset: clamp(1rem, 3vw, 2rem);
  width: calc(100% - 2 * clamp(1rem, 3vw, 2rem));
  height: calc(100% - 2 * clamp(1rem, 3vw, 2rem));
  object-fit: contain;
}