/* ==========================================================================
   DaveDoesDesigns — Case study detail template
   Shared across all case studies; page content comes from window.CASE_STUDY
   (rendered by assets/js/case-study.js) + semantic sections in each page's HTML.
   ========================================================================== */
:root {
  --csp-lavender: #e6d4ff;
  --ease-out-cubic: cubic-bezier(0.33, 1, 0.68, 1);
  /* Figma padding & spacing: desktop 1184 content / 144 sections */
  --csp-content: 1184px;
  --csp-pad: 48px;
  --csp-section-gap: 144px;
}

/* ==========================================================================
   Hero — the homepage case study card expanded to the viewport width,
   always dark. NOT 100vh: fixed height per breakpoint (Figma 1920x960 /
   768x874 / 402x580) so the content below peeks on load. Once scrolling
   starts it stays pinned and the content card slides over it, like the
   homepage sticky card stack.
   ========================================================================== */
.csp-hero {
  /* Theme-aware: global tokens flow through (system preference primary,
     6am-6pm time fallback, localStorage override — same as the page).
     Per-theme accents from the Figma hero nodes: */
  --csp-hero-bullet: #b679ff;      /* dark primary/default */
  --csp-tag-border: #3d3350;
  --csp-tag-fg: var(--fg-subtle);

  display: flex;
  flex-direction: row;
  justify-content: flex-start;
  min-height: 0;
  /* 1080px at the 1920 Figma frame (Section: Intro), scaling down with the
     viewport so the below-the-hero peek survives on shorter screens */
  height: clamp(720px, 56.25vw, 1080px);
  position: sticky;
  top: 0;
  overflow: hidden;
  background: var(--bg-surface);
}

:root[data-theme='light'] .csp-hero {
  --csp-hero-bullet: #9747ff;      /* light stat bullets per Figma 274:4967 */
  --csp-tag-border: #d2d2d2;
  --csp-tag-fg: var(--fg-muted);
}

/* Full-viewport hero: the default height rides 56.25vw, so whether the next
   section peeks below the fold depends on the window's proportions rather
   than on intent. This pins the hero to exactly one screen — no peek at any
   desktop size. min-height guards very short windows so the details rail
   can't be clipped by the hero's overflow:hidden. Desktop only; tablet and
   mobile stack their own full-viewport 50/50 hero at the breakpoints below. */
@media (min-width: 1025px) {
  .csp-hero--viewport {
    height: 100vh;
    height: 100svh;
    min-height: 640px;
  }
}

/* Orientation inherited from the homepage card (detailsSide prop) */
.csp-hero--details-right { flex-direction: row-reverse; }

.csp-hero__details {
  width: 420px;
  flex-shrink: 0;
  display: flex;
  flex-direction: column;
  justify-content: center;
  gap: 36px;
  padding: 48px 36px;
  background: var(--bg-surface);
}

/* Desktop side-by-side rail: the hero can be taller than the viewport
   (height rides 56.25vw) and is sticky, so centering against the full rail
   would sit the copy below the visible middle. Cap the centering space to
   the first viewport; the hero behind shares the rail's background, so a
   shorter rail is invisible. */
@media (min-width: 1025px) {
  .csp-hero__details {
    align-self: flex-start;
    height: min(100%, 100vh);
    height: min(100%, 100svh);
  }
}

/* Title + subtitle (+ category pills) group */
.csp-hero__info {
  display: flex;
  flex-direction: column;
  gap: 16px;
}

.csp-hero__media {
  flex: 1;
  min-width: 0;
  min-height: 0;
  overflow: hidden;
  background: var(--bg-default);
}

.csp-hero__img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  display: block;
}

/* Hero carousel — overlays stack on the base img inside the media box, so
   the hero's footprint and layout never change; slides crossfade in place */
.csp-hero__media--carousel { position: relative; }

.csp-hero__img--slide {
  position: absolute;
  inset: 0;
  opacity: 0;
  transition: opacity 1s ease;
}

.csp-hero__img--slide.is-active { opacity: 1; }

@media (prefers-reduced-motion: reduce) {
  .csp-hero__img--slide { transition: none; }
}

/* Hero arrival: plain fade */
.csp-hero--fade {
  animation: csp-hero-fade 600ms ease-out both;
}

@keyframes csp-hero-fade {
  from { opacity: 0; }
  to   { opacity: 1; }
}

.csp-hero__client {
  margin: 0;
  font-size: 1.25rem;
  font-weight: 600;
  line-height: 1.3;
  color: var(--fg-subtle); /* Figma 274:4957 */
}

.csp-hero__title {
  margin: 0;
  font-family: var(--font-display);
  font-weight: 400;
  font-size: clamp(2.375rem, 4.5vw, 3.5rem);
  line-height: normal;
  letter-spacing: 1.008px; /* 1.8% of 56px per Figma 274:4959 */
  color: var(--fg-default);
}

.csp-hero__subtitle {
  margin: 0;
  max-width: 720px;
  font-size: 1.0625rem;
  font-weight: 600;
  line-height: 1.4;
  color: var(--fg-muted);
}

.csp-hero__tags {
  margin: 0;
  padding: 0;
  list-style: none;
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
}

.csp-hero__tags li {
  border: 1.5px solid var(--csp-tag-border);
  border-radius: 64px;
  padding: 4px 8px;
  font-size: 0.75rem;
  font-weight: 500;
  line-height: 1.5;
  color: var(--csp-tag-fg);
  white-space: nowrap;
}

/* Vertical stats stack, 8px gap, 17/24 (Figma 274:4966) */
.csp-hero__stats {
  margin: 0;
  padding: 0;
  list-style: none;
  display: flex;
  flex-direction: column;
  gap: 8px;
}

.csp-hero__stats li {
  position: relative;
  padding-left: 16px;
  font-size: 1.0625rem;
  font-weight: 400;
  line-height: 24px;
  color: var(--fg-muted);
}

.csp-hero__stats li::before {
  content: '\2022';
  position: absolute;
  left: 0;
  color: var(--csp-hero-bullet);
}

/* ==========================================================================
   Floating page nav — fixed to the viewport bottom, entered over the hero
   ========================================================================== */
.pagenav {
  /* Theme-aware glass: dark plum by default, frosted white in light mode */
  --pagenav-bg: rgba(30, 12, 50, 0.82);
  --pagenav-border: rgba(255, 255, 255, 0.08);
  --pagenav-fg: rgba(255, 255, 255, 0.75);
  --pagenav-fg-hover: #ffffff;
  --pagenav-track: rgba(255, 255, 255, 0.12);
  --pagenav-shadow: 0 12px 32px rgba(14, 1, 28, 0.4);
  --pagenav-accent: var(--csp-lavender);
  --pagenav-accent-fg: #1e0c32;

  position: fixed;
  left: 24px;
  right: 24px;
  bottom: 24px;
  z-index: 120;
  display: flex;
  align-items: center; /* home button and bar share one vertically-centred row */
  justify-content: center;
  gap: 14px;
  pointer-events: none;
  transition: opacity 250ms ease;
}

/* The full-screen menu is a takeover — the floating page nav (z 120) would
   otherwise ride above the panel (z 90) and the top bar (z 100) */
body.menu-open .pagenav {
  opacity: 0;
  pointer-events: none;
}

body.menu-open .pagenav .pagenav__bar,
body.menu-open .pagenav .pagenav__home { pointer-events: none; }

:root[data-theme='light'] .pagenav {
  --pagenav-bg: rgba(255, 255, 255, 0.85);
  --pagenav-border: rgba(30, 12, 50, 0.1);
  --pagenav-fg: rgba(30, 12, 50, 0.72);
  --pagenav-fg-hover: #1e0c32;
  --pagenav-track: rgba(30, 12, 50, 0.12);
  --pagenav-shadow: 0 12px 32px rgba(30, 12, 50, 0.18);
  --pagenav-accent: #8200ff; /* lavender pill/fill would wash out on white glass */
  --pagenav-accent-fg: #ffffff;
}

/* The contact-footer fade takes out the whole nav — bar and home button */
.pagenav.is-hidden .pagenav__bar,
.pagenav.is-hidden .pagenav__home {
  opacity: 0;
  transform: translateY(12px);
  pointer-events: none;
}

/* --- Home button: same surface as the bar, its own distinct control ------ */
.pagenav__home {
  pointer-events: auto;
  flex-shrink: 0;
  display: flex;
  align-items: center;
  justify-content: center;
  width: 44px;
  height: 44px;
  background: var(--pagenav-bg);
  -webkit-backdrop-filter: blur(12px);
  backdrop-filter: blur(12px);
  border: 1px solid var(--pagenav-border);
  border-radius: 10px;
  box-shadow: var(--pagenav-shadow);
  color: var(--pagenav-fg);
  font-size: 0.9375rem;
  line-height: 1;
  text-decoration: none;
  transition: color 200ms ease, background 200ms ease, opacity 400ms ease, transform 400ms ease;
}

.pagenav__home:hover,
.pagenav__home:focus-visible {
  background: var(--pagenav-accent);
  color: var(--pagenav-accent-fg);
}

.pagenav__bar {
  pointer-events: auto;
  transition: opacity 400ms ease, transform 400ms ease;
  display: flex;
  flex-direction: column;
  max-width: 100%;
  background: var(--pagenav-bg);
  -webkit-backdrop-filter: blur(12px);
  backdrop-filter: blur(12px);
  border: 1px solid var(--pagenav-border);
  border-radius: 10px;
  overflow: hidden;
  box-shadow: var(--pagenav-shadow);
}

/* Mobile-friendly by default: the row scrolls horizontally when it
   overflows (desktop/tablet fit inline, so this never engages there) */
.pagenav__buttons {
  display: flex;
  gap: 4px;
  padding: 6px;
  overflow-x: auto;
  scrollbar-width: none;
}

.pagenav__buttons::-webkit-scrollbar { display: none; }

.pagenav__btn {
  flex-shrink: 0;
  padding: 8px 12px;
  border-radius: 4px;
  font-family: var(--font-body);
  font-size: 0.75rem;
  font-weight: 700;
  line-height: 1.5;
  letter-spacing: 0.2px;
  color: var(--pagenav-fg);
  text-decoration: none;
  white-space: nowrap;
  transition: color 200ms ease, background 200ms ease;
}

/* Hover: slight opacity lift on the text */
.pagenav__btn:hover,
.pagenav__btn:focus-visible {
  color: var(--pagenav-fg-hover);
}

.pagenav__btn.is-active {
  background: var(--pagenav-accent);
  color: var(--pagenav-accent-fg);
}

.pagenav__btn.is-active:hover { color: var(--pagenav-accent-fg); }

/* Scroll progress: 4px, full bar width, fill driven by JS via scaleX */
.pagenav__progress {
  height: 4px;
  width: 100%;
  background: var(--pagenav-track);
}

.pagenav__progress-fill {
  display: block;
  height: 100%;
  width: 100%;
  background: var(--pagenav-accent);
  transform: scaleX(0);
  transform-origin: left center;
}

/* Page-load entrance: the bar rises from mid-screen, then each button
   cascades in with a 300ms stagger (ease-out-cubic) */
.pagenav--enter .pagenav__bar,
.pagenav--enter .pagenav__home {
  animation: pagenav-rise 700ms var(--ease-out-cubic) 200ms both;
}

.pagenav--enter .pagenav__btn {
  opacity: 0;
  animation: pagenav-btn-in 400ms var(--ease-out-cubic) both;
  animation-delay: calc(600ms + var(--i, 0) * 300ms);
}

@keyframes pagenav-rise {
  from { transform: translateY(50vh); opacity: 0; }
  to   { transform: translateY(0);    opacity: 1; }
}

@keyframes pagenav-btn-in {
  from { opacity: 0; transform: translateY(8px); }
  to   { opacity: 1; transform: translateY(0); }
}

/* Case study pages only (this sheet doesn't load on the homepage): the
   light-mode frame behind/below the shell matches the footer's #0e011c so
   the 16px strip under Explore More reads as one surface with the footer.
   The frame lives on html ONLY: body goes transparent so the shell's own
   ::before backing (hero-colored, below) can paint over the frame behind
   the card's top corners without dragging the footer color up there. */
html[data-theme='light'] {
  background: #0e011c;
}

html[data-theme='light'] body {
  background: transparent;
}

/* ==========================================================================
   Content area — theme-aware (per the dark Overview nodes 274-4583/4179/
   3433): a white floating card in light mode (homepage shell pattern),
   a plain dark background in dark mode. Case-block palette tokens carry
   the per-theme colors read from the nodes; global tokens flow through
   for everything else.
   ========================================================================== */
.csp-shell {
  position: relative;
  background: var(--bg-default);

  /* Dark values (Figma 274-4583 / 274-4179 / 274-3433, Problem 274-4614) */
  --case-subhead-fg: #edeaf1;   /* mist */
  --case-body-fg: #ded7e6;      /* neutral-200 dark */
  --case-label-fg: #978aaa;     /* fg-subtle */
  --case-value-fg: #ded7e6;
  --case-title-fg: #ffffff;     /* problem item titles (primary-contrast) */
  --case-icon-fg: #ffc20a;      /* problem icons (amber) */
  --case-card-bg: #1e0c32;      /* hero-to */
  --case-card-border: #3d3350;  /* neutral-700 dark */
  --case-tension-bg: #3d3350;   /* Core Tension panel (274:4691) */
  --fs-band-a: #1e0c32;         /* Finding Solutions tinted bands (274:4736) */
  --fs-band-b: #0e011c;         /* Finding Solutions plain bands (274:4761) */
  --case-reflect-bg: #1e0c32;   /* Reflection card (354:955) */
  --xm-band-bg: #0e011c;        /* Explore More band (274:4881) */
  --xm-behind: #0e011c;         /* fill behind the band's corners = footer */
  --xm-client: #b3a0c8;
  --xm-stat-fg: #ffffff;
  --xm-card-shadow: none;       /* dark cards carry no shadow (node) */
  --xm-card-shadow-hover: none;
  --case-rcard-bg: #3d3350;     /* Results cards (274:4839) */
  --case-rstat-border: #3d3350; /* stat cards carry a same-color border */
  --case-rquote-border: transparent; /* testimonial cards carry none */
  --case-ricon: #a87a00;        /* Results icons (amber-700) */

  /* Gallery (Cyrano pipeline) — brand controls + surfaces */
  --gal-surface: #1e0c32;
  --gal-border: #3d3350;
  --gal-btn-bg: #b679ff;        /* dark primary */
  --gal-btn-bg-hover: #c79cff;
  --gal-btn-fg: #1e0c32;
  --gal-ring: #ffc20a;          /* active thumb border — amber, per Figma (both modes) */
  --gal-ph-bg: #241238;
  --gal-lightbox-scrim: rgba(14, 1, 28, 0.85);
  --cy-sol-eyebrow: #b679ff;    /* numbered phase eyebrow */
}

/* Backing strip behind the shell's top corners: hero-colored (bg-surface,
   both themes), so where the card's 30px top radius cuts away, the wedges
   read as the hero continuing — not the footer frame on html. z-index -1
   drops it behind the shell surface; on desktop the sticky hero paints
   over it anyway, on mobile (unpinned hero) it's what shows once the hero
   scrolls away. Needs the transparent body above to be visible. */
.csp-shell::before {
  content: '';
  position: absolute;
  top: 0;
  left: 0;
  right: 0;
  height: 30px;
  background: var(--bg-surface);
  z-index: -1;
}

:root[data-theme='light'] .csp-shell {
  margin: 0 0 16px;
  border-radius: 30px;
  background: #fbfafd;
  box-shadow: 0 24px 48px rgba(30, 12, 50, 0.18);

  /* Light values (Figma 274-4994 / 274-3802 / 274-3064, Problem 274-5025) */
  --case-subhead-fg: #5e5072;
  --case-body-fg: #5e5072;
  --case-label-fg: #a899b9;     /* neutral-400 */
  --case-value-fg: #1e0c32;
  --case-title-fg: #1e0c32;
  --case-icon-fg: #6a00d1;      /* problem icons (primary) */
  --case-card-bg: #ffffff;
  --case-card-border: #e9e5f0;
  --case-tension-bg: #edeaf1;   /* Core Tension panel (274:5102, neutral-100) */
  --fs-band-a: #f4f1f8;         /* Finding Solutions tinted bands (surface2) */
  --fs-band-b: #fbfafd;         /* Finding Solutions plain bands (bg) */
  --case-reflect-bg: #edeaf1;   /* Reflection card (274:5257, neutral-100) */
  --xm-band-bg: #f4f1f8;        /* Explore More band (274:5271, surface2) */
  --xm-behind: #0e011c;         /* fill behind the corner wedges — matches
                                   the strip below the shell and the footer
                                   so the band curves seamlessly into it */
  --xm-client: #9747ff;
  --xm-stat-fg: #5e5072;
  --xm-card-shadow: 0 4px 4px rgba(12, 12, 13, 0.05), 0 16px 32px rgba(12, 12, 13, 0.1);
  --xm-card-shadow-hover: 0 8px 8px rgba(12, 12, 13, 0.06), 0 24px 48px rgba(12, 12, 13, 0.14);
  --case-rcard-bg: #ffffff;     /* Results cards (274:5232) */
  --case-rstat-border: #e9e5f0;
  --case-rquote-border: #e9e5f0;
  --case-ricon: #978aaa;        /* Results icons (fg-subtle) */

  /* Gallery — light values */
  --gal-surface: #f4f1f8;
  --gal-border: #e9e5f0;
  --gal-btn-bg: #6a00d1;        /* primary */
  --gal-btn-bg-hover: #8200ff;
  --gal-btn-fg: #ffffff;
  --gal-ring: #ffc20a;          /* active thumb border — amber, per Figma (both modes) */
  --gal-ph-bg: #ece7f4;
  --gal-lightbox-scrim: rgba(30, 12, 50, 0.6);
  --cy-sol-eyebrow: #8200ff;    /* numbered phase eyebrow */
}

/* Cyrano runs full-bleed phase bands as direct shell children. NO
   overflow:hidden here: the bands sit mid-shell (nowhere near the card's
   rounded corners — the first child is padded and the Explore band rounds
   its own bottom), and clipping would cut away the .xm-wrap's footer-color
   wedge fill behind the Explore corners, exposing the white sticky hero
   that sits behind the whole page. */

/* When the contained content is followed by full-bleed bands, drop the
   inner's bottom padding so the first band's own 96px top is the only gap. */
.csp-shell__inner--cygal { padding-bottom: 0; }

.csp-shell__inner {
  max-width: calc(var(--csp-content) + var(--csp-pad) * 2);
  margin: 0 auto;
  /* 96px vertical padding per the Figma "Case" container (274:4993 py-96) */
  padding: 96px var(--csp-pad);
  display: flex;
  flex-direction: column;
  gap: var(--csp-section-gap);
}

.csp-section {
  display: flex;
  flex-direction: column;
  gap: 16px;
  max-width: 780px;
  scroll-margin-top: 96px;
}

.csp-section--wide { max-width: none; }

.csp-eyebrow {
  margin: 0;
  font-size: 0.8125rem;
  font-weight: 600;
  letter-spacing: 1.56px;
  text-transform: uppercase;
  color: var(--accent);
}

.csp-headline {
  margin: 0;
  font-family: var(--font-display);
  font-weight: 400;
  font-size: clamp(1.875rem, 4vw, 2.75rem);
  line-height: 1.08;
  letter-spacing: 0.8px;
  color: var(--fg-default);
}

.csp-lede {
  margin: 0;
  max-width: 780px;
  font-size: 1.25rem;
  font-weight: 600;
  line-height: 1.3;
  color: var(--fg-muted);
}

.csp-body {
  display: flex;
  flex-direction: column;
  gap: 16px;
  max-width: 780px;
}

.csp-body p {
  margin: 0;
  font-size: 1.0625rem;
  line-height: 1.6;
  color: var(--fg-muted);
}

/* Pull-quote for the Core Tension beat */
.csp-quote {
  margin: 8px 0 0;
  padding-left: 24px;
  border-left: 3px solid var(--accent);
  font-family: var(--font-display);
  font-size: clamp(1.375rem, 2.4vw, 1.75rem);
  line-height: 1.25;
  letter-spacing: 0.4px;
  color: var(--fg-default);
}

/* Overview facts */
.csp-meta {
  margin: 16px 0 0;
  padding-top: 24px;
  border-top: 1px solid var(--divider);
  display: grid;
  grid-template-columns: repeat(4, minmax(0, 1fr));
  gap: 24px;
}

.csp-meta div { min-width: 0; }

.csp-meta dt {
  font-size: 0.75rem;
  font-weight: 600;
  letter-spacing: 1px;
  text-transform: uppercase;
  color: var(--fg-subtle);
}

.csp-meta dd {
  margin: 4px 0 0;
  font-size: 1rem;
  line-height: 1.4;
  color: var(--fg-default);
}

/* Figures */
.csp-figure {
  margin: 16px 0 0;
  width: 100%;
  max-width: none;
}

.csp-figure img {
  width: 100%;
  border-radius: 12px;
  box-shadow: 0 16px 32px rgba(30, 12, 50, 0.08);
}

.csp-figure figcaption {
  margin-top: 8px;
  font-size: 0.8125rem;
  line-height: 1.5;
  color: var(--fg-subtle);
}

/* Results stat cards (light styling in both themes — inside the card) */
.csp-results__grid {
  margin-top: 16px;
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 24px;
}

.csp-stat {
  background: var(--bg-surface);
  border: 1px solid var(--neutral-700);
  border-radius: 8px;
  padding: 24px 20px;
  box-shadow: 0 8px 24px rgba(30, 12, 50, 0.06);
}

.csp-stat__value {
  margin: 0;
  font-size: 2rem;
  font-weight: 600;
  line-height: 1.2;
  color: var(--accent);
}

.csp-stat__label {
  margin: 6px 0 0;
  font-size: 1rem;
  line-height: 1.4;
  color: var(--fg-muted);
}

/* ==========================================================================
   Case block — Overview (Figma 274-4994 / 274-3802 / 274-3064; Problem,
   Core Tension, and Solution to follow). All values pulled from the nodes:
   headline Gloock 34/1.12 ls 0.612, subhead Hanken 600 20/1.3 muted, body
   17/24px muted, metadata labels 13/600 uppercase #a899b9 + values 17/600.
   Sections cascade in on scroll via [data-animate-case] (IO threshold 0.1
   in case-study.js) using the global [data-cascade] rules with an
   ease-out-cubic override.
   ========================================================================== */
.case-block {
  display: flex;
  flex-direction: column;
  gap: 96px;
  width: 100%;
}

.case-section {
  display: flex;
  flex-direction: column;
  gap: 24px; /* headline to section content (Figma) */
  width: 100%;
  scroll-margin-top: 96px;
}

.case-headline {
  margin: 0;
  font-family: var(--font-display);
  font-weight: 400;
  font-size: 2.125rem;
  line-height: 1.12;
  letter-spacing: 0.612px; /* 1.8% of 34px per Figma H3 */
  color: var(--fg-default);
}

.case-subheading {
  margin: 0;
  font-size: 1.25rem;
  font-weight: 600;
  line-height: 1.3;
  color: var(--case-subhead-fg);
}

.case-body {
  margin: 0;
  font-size: 1.0625rem;
  font-weight: 400;
  line-height: 24px;
  color: var(--case-body-fg);
}

/* --- Overview: two columns on desktop (left 600, right 420, 72px gap) --- */
.case-overview__row {
  display: flex;
  align-items: flex-start;
  gap: 72px;
  width: 100%;
}

.case-overview__main {
  width: 600px;
  max-width: 100%;
  flex-shrink: 0;
  display: flex;
  flex-direction: column;
  gap: 30px;
}

.case-overview__intro {
  display: flex;
  flex-direction: column;
  gap: 12px;
}

/* Multi-paragraph Overview body: same 24px paragraph rhythm as the
   Solution panel (12px flex gap + 12px margin) */
.case-overview__intro .case-body + .case-body {
  margin-top: 12px;
}

/* Metadata label/value pairs (shared by the aside column and the Role card) */
.case-meta {
  margin: 0;
  display: flex;
  flex-direction: column;
  gap: 24px;
}

.case-meta__item {
  display: flex;
  flex-direction: column;
  min-width: 0;
}

.case-meta__item dt {
  font-size: 0.8125rem;
  font-weight: 600;
  line-height: normal;
  text-transform: uppercase;
  color: var(--case-label-fg);
}

.case-meta__item dd {
  margin: 0;
  font-size: 1.0625rem;
  font-weight: 600;
  line-height: 1.4;
  color: var(--case-value-fg);
}

/* Right column: My Role card stacked above the project metadata */
.case-overview__aside {
  width: 420px;
  flex-shrink: 0;
  display: flex;
  flex-direction: column;
  gap: 32px;
}

/* My Role card: 1px border, 8px radius, 24px padding; fill/border flip
   with the theme (white/#e9e5f0 light, #1e0c32/#3d3350 dark per Figma) */
.case-role {
  width: 100%;
  display: flex;
  flex-direction: column;
  gap: 12px;
  padding: 24px;
  background: var(--case-card-bg);
  border: 1px solid var(--case-card-border);
  border-radius: 8px;
}

.case-role__header {
  display: flex;
  align-items: center;
  gap: 12px;
}

.case-role__icon {
  flex-shrink: 0;
  display: flex;
  align-items: center;
  justify-content: center;
  width: 36px;
  height: 36px;
  color: var(--fg-subtle);
}

.case-role__icon svg {
  width: 32px;
  height: 32px;
}

/* --- The Problem (Figma 274-5025/4614 desktop, 274-3833/4210 tablet,
   274-3095/3464 mobile): centered header, then illustration + four
   icon/title/description items. 48px between header and details. --- */
.case-problem { gap: 48px; }

.case-problem__header {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 24px;
  width: 100%;
  text-align: center;
}

.case-problem__intro {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 12px;
  width: 100%;
}

.case-problem__body {
  width: 720px;
  max-width: 100%;
}

.case-problem__details {
  display: flex;
  align-items: center;
  gap: 64px;
  width: 100%;
}

.case-problem__image {
  margin: 0;
  width: 651px;
  height: 488px;
  flex-shrink: 0;
  border-radius: 12px;
  overflow: hidden;
}

.case-problem__image img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  display: block;
}

.case-problem__items {
  margin: 0;
  padding: 0;
  list-style: none;
  flex: 1;
  min-width: 0;
  align-self: stretch;
  display: flex;
  flex-direction: column;
  justify-content: center;
  gap: 24px;
}

.case-problem__item {
  display: flex;
  flex-direction: column;
  gap: 4px;
}

/* FA Pro Regular glyph in the node: 24px in a 34px-wide box */
.case-problem__icon {
  width: 34px;
  display: flex;
  justify-content: center;
  color: var(--case-icon-fg);
}

.case-problem__icon svg {
  width: 24px;
  height: 24px;
}

.case-problem__copy {
  width: 420px;
  max-width: 100%;
}

.case-problem__title {
  margin: 0;
  font-size: 1.0625rem;
  font-weight: 600;
  line-height: 1.4;
  color: var(--case-title-fg);
}

.case-problem__desc {
  margin: 0;
  font-size: 1.0625rem;
  font-weight: 400;
  line-height: 24px;
  color: var(--case-body-fg);
}

/* --- Core Tension & Solution panels (Figma 274:5102/4691 desktop,
   274:3910/3927 tablet, 274:3541/3558 mobile-dark): rounded full-width
   panels, 24px headline gap + 12px text gap, centered 720px measure on
   desktop/tablet, left-aligned full-width on mobile. Core Tension is a
   tinted fill with no border; Solution reuses the card fill + border. --- */
.case-tension,
.case-solution {
  align-items: center;
  text-align: center;
  border-radius: 8px;
}

.case-tension {
  background: var(--case-tension-bg);
  padding: 48px;
}

.case-solution {
  background: var(--case-card-bg);
  border: 1px solid var(--case-card-border);
  padding: 48px 24px;
}

.case-panel__text {
  display: flex;
  flex-direction: column;
  gap: 12px;
  width: 720px;
  max-width: 100%;
}

/* The Solution body is two paragraphs separated by a blank 24px line in
   the node; the container's 12px gap plus this margin reproduces it */
.case-panel__text .case-body + .case-body {
  margin-top: 12px;
}

/* ==========================================================================
   Finding Solutions showcase (Figma 274:5130 light / 274:4725 dark desktop,
   274:3944 tablet, 274:3206 mobile) — full-bleed alternating bands, so it
   lives inside .csp-shell but OUTSIDE the max-width .csp-shell__inner.
   Desktop: 1400px content rows (data 72px from a 900x640 shot), image side
   alternating R/L/R/L. Tablet/mobile: centered data stacked above a
   full-width 854:607 image — the alternation does not survive the collapse.
   ========================================================================== */
.fs {
  display: flex;
  flex-direction: column;
  gap: 96px;
  width: 100%;
  padding-bottom: 96px;
  scroll-margin-top: 96px; /* the page nav's Solution link lands here */
}

.fs__header {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 24px;
  width: 100%;
  padding: 0 24px;
  text-align: center;
}

.fs__lede {
  width: 720px;
  max-width: 100%;
}

.fs__blocks {
  display: flex;
  flex-direction: column;
  width: 100%;
}

.fs-block {
  display: flex;
  justify-content: center;
  padding: 96px 24px;
  width: 100%;
  background: var(--fs-band-b);
}

.fs-block--tint { background: var(--fs-band-a); }

.fs-block__content {
  display: flex;
  align-items: center;
  gap: 64px;
  width: 1184px;
  max-width: 100%;
}

/* "Left" frames in Figma = image on the left */
.fs-block--flip .fs-block__content { flex-direction: row-reverse; }

.fs-block__data {
  width: 300px;
  flex-shrink: 0;
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  gap: 8px;
}

.fs-block__icon {
  color: var(--case-icon-fg);
  display: flex;
}

.fs-block__icon svg {
  width: 48px;
  height: 48px;
}

.fs-block__info {
  display: flex;
  flex-direction: column;
  gap: 24px;
}

.fs-block__title {
  margin: 0;
  font-size: 1.625rem;
  font-weight: 600;
  line-height: 1.2;
  color: var(--case-title-fg);
}

.fs-block__desc {
  margin: 0;
  font-size: 1.0625rem;
  font-weight: 400;
  line-height: 24px;
  color: var(--case-body-fg);
}

/* Fills the row beside the 300px data column (820x583 at the 1184
   container), radius 12, DDD drop shadow */
.fs-block__image {
  margin: 0;
  flex: 1;
  min-width: 0;
  aspect-ratio: 854 / 607;
  border-radius: 12px;
  box-shadow: 0 16px 24px rgba(30, 12, 50, 0.1);
}

.fs-block__image img {
  width: 100%;
  height: 100%;
  object-fit: contain;
  border-radius: 12px;
  display: block;
}

/* Neutral stand-in at the node's image dimensions (block 5, no asset yet) */
.fs-block__ph {
  display: block;
  width: 100%;
  height: 100%;
  border-radius: 12px;
  background: #d9d9d9;
}

.fs-micdrop {
  display: flex;
  justify-content: center;
  padding: 96px 48px;
  width: 100%;
  background: var(--fs-band-a);
}

.fs-micdrop p {
  width: 720px;
  max-width: 100%;
  text-align: center;
}

/* ==========================================================================
   Results (Figma 274:5232 light / 274:4839 dark desktop, 274:4058/4429
   tablet, 274:3319/3688 mobile — built from the inner Results child on
   mobile). Heading / 3-up stat cards / 2-up testimonial cards, 48px apart
   on desktop and tablet, 24px on mobile.
   ========================================================================== */
/* Second contained wrapper after the full-bleed showcase; the showcase's
   own bottom padding provides the gap above the heading */
.csp-shell__inner--results { padding-top: 0; }

.case-results { gap: 48px; }

.case-results__heading {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 24px;
  width: 100%;
  text-align: center;
}

.case-results__intro {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 12px;
  width: 100%;
}

.case-results__desc {
  width: 720px;
  max-width: 100%;
}

/* Stat cards: 3-up on desktop AND tablet (Figma), 20px padding, 8px
   radius, 4px stack */
.case-results__stats {
  margin: 0;
  padding: 0;
  list-style: none;
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 24px;
  width: 100%;
}

.case-rstat {
  display: flex;
  flex-direction: column;
  gap: 4px;
  padding: 20px;
  border-radius: 8px;
  background: var(--case-rcard-bg);
  border: 1px solid var(--case-rstat-border);
}

.case-rstat__icon {
  display: flex;
  color: var(--case-ricon);
}

.case-rstat__icon svg {
  width: 26px;
  height: 26px;
}

.case-rstat__value {
  margin: 0;
  font-size: 1.625rem;
  font-weight: 600;
  line-height: 1.2;
  color: var(--case-icon-fg); /* #6a00d1 light / #ffc20a dark per node */
}

.case-rstat__desc {
  margin: 0;
  font-size: 1.0625rem;
  font-weight: 400;
  line-height: 24px;
  color: var(--case-title-fg);
}

/* Optional supporting line under a stat desc (Cyrano 750% card) */
.case-rstat__note {
  margin: 4px 0 0;
  font-size: 0.8125rem;
  font-weight: 400;
  line-height: 1.5;
  color: var(--case-label-fg);
}

/* Testimonials: 2-up on desktop, 24px padding, 16px stack */
.case-results__quotes {
  margin: 0;
  padding: 0;
  list-style: none;
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 24px;
  width: 100%;
}

.case-quote {
  display: flex;
  flex-direction: column;
  gap: 16px;
  padding: 24px;
  border-radius: 8px;
  background: var(--case-rcard-bg);
  border: 1px solid var(--case-rquote-border);
}

/* FA "quote-left" glyph: 32px in a 36px box (node) */
.case-quote__icon {
  display: flex;
  align-items: center;
  justify-content: center;
  width: 36px;
  height: 36px;
  color: var(--case-ricon);
}

.case-quote__icon svg {
  width: 32px;
  height: 32px;
}

.case-quote__text {
  margin: 0;
  font-size: 1.0625rem;
  font-weight: 400;
  line-height: 24px;
  color: var(--case-value-fg);
}

.case-quote__who {
  display: flex;
  flex-direction: column;
  gap: 2px;
}

.case-quote__name {
  margin: 0;
  font-size: 0.8125rem;
  font-weight: 600;
  line-height: normal;
  letter-spacing: 1.56px; /* 12% of 13px per Figma Label style */
  color: var(--case-value-fg);
}

.case-quote__role {
  margin: 0;
  font-size: 0.75rem;
  font-weight: 500;
  line-height: 1.5;
  color: var(--case-label-fg);
}

/* --- Reflection (Figma 274:5257 light / 354:955 dark; tablet 354:1007/
   1025, mobile 354:1043/1061). Single card: title, then a 12px-gap body
   container, centered on desktop/tablet, LEFT-aligned on mobile (node).
   Deliberate overrides vs the nodes, per Dave: radius 20 in BOTH modes
   (dark nodes say 8); light mode gains a 1px #e9e5f0 border (light nodes
   have none); dark desktop padding is 48 all round (node says 48/24). --- */
.case-reflection {
  align-items: center;
  text-align: center;
  gap: 24px;
  padding: 48px;
  border-radius: 20px;
  background: var(--case-reflect-bg);
  border: 1px solid var(--case-card-border);
}

.case-reflection .case-headline { width: 100%; } /* spans the inner width (node) */

.case-reflection__body {
  display: flex;
  flex-direction: column;
  gap: 12px;
  width: 720px;
  max-width: 100%;
}

/* The case block cascade eases out cubic (spec) instead of the global
   ease-out; delays still come from each element's --d */
[data-animate-case] [data-cascade],
[data-animate-case] [data-cascade-fade] {
  transition-timing-function: var(--ease-out-cubic);
}

/* ==========================================================================
   Cyrano Video — section layouts that diverge from the shared case block.
   Figma desktop 294:2115 / dark 294:1884, tablet 294:1450, mobile 294:1046.
   Three differences vs OneScreen: (1) Overview's right column is ONE
   bordered card holding Role + all metadata; (2) Problem is a centered
   header over a full-bleed 16:9 image over a 3-col grid of six items;
   (3) Core Tension and Solution are side-by-side cards. Leaf type/color
   classes (.case-headline/.case-subheading/.case-body/.case-meta__item/
   .case-role__*/.case-problem__icon/title/desc) are reused unchanged.
   ========================================================================== */

/* --- Overview: right column = single Role + metadata card (371:919) --- */
.cy-overview__aside {
  flex: 1 1 0;
  min-width: 0;
}

.cy-rolecard {
  margin: 0;
  display: flex;
  flex-direction: column;
  gap: 24px;
  padding: 24px;
  border-radius: 8px;
  background: var(--case-card-bg);
  border: 1px solid var(--case-card-border);
}

.cy-rolecard__role {
  display: flex;
  flex-direction: column;
  gap: 12px;
}

/* --- Problem: centered header, full-bleed 16:9 image, 3-col grid (294:2135) --- */
.cy-problem { gap: 48px; }

.cy-problem__header {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 24px;
  width: 100%;
  text-align: center;
}

.cy-problem__intro {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 12px;
  width: 100%;
}

.cy-problem__lede {
  width: 900px;
  max-width: 100%;
}

.cy-problem__lede .case-body + .case-body { margin-top: 12px; }

.cy-problem__details {
  display: flex;
  flex-direction: column;
  gap: 64px;
  width: 100%;
}

/* 16:9 image, 16px radius (324:1806) */
.cy-problem__image {
  margin: 0;
  width: 100%;
  aspect-ratio: 16 / 9;
  border-radius: 16px;
  overflow: hidden;
}

.cy-problem__image img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  display: block;
}

.cy-problem__grid {
  margin: 0;
  padding: 0;
  list-style: none;
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 24px;
  width: 100%;
}

.cy-problem__item {
  display: flex;
  flex-direction: column;
  gap: 4px;
}

.cy-problem__copy {
  display: flex;
  flex-direction: column;
}

/* --- Core Tension + Solution: stacked cards, sharing the Reflection card's
   900px centered measure (Figma node 371:1002 is side-by-side; stacking at
   the narrower width is a deliberate override per Dave, so the three long-
   form prose cards on the page all read at the same line length) --- */
.cy-cts {
  display: flex;
  flex-direction: column;
  gap: 28px;
  align-items: stretch;
  align-self: center;
  width: 900px;
  max-width: 100%;
}

.cy-panel {
  width: 100%;
  min-width: 0;
  display: flex;
  flex-direction: column;
  gap: 16px;
  padding: 28px;
  border-radius: 8px;
}

/* Core Tension: tinted fill, no border. Solution: card fill + border. */
.cy-panel--tension { background: var(--case-tension-bg); }

.cy-panel--solution {
  background: var(--case-card-bg);
  border: 1px solid var(--case-card-border);
}

.cy-panel__text {
  display: flex;
  flex-direction: column;
  gap: 12px;
  width: 100%;
}

.cy-panel__text .case-body + .case-body { margin-top: 12px; }

/* --- Results + Reflection, Cyrano variances vs the shared OneScreen
   classes (Figma 294:2245 L / 386:1120 D desktop, 294:1580 tablet,
   382:3310 mobile): THREE testimonials in a 3-up desktop grid (OneScreen
   is 2-up); the mobile node KEEPS the subhead and the 48px rhythm;
   Reflection is a 900px centered card with an 804px centered text column
   on a 24px paragraph rhythm (tablet pads 48/24, mobile 16). --- */
.csp-shell--cyrano .case-results__quotes {
  grid-template-columns: repeat(3, minmax(0, 1fr));
}

/* The section ABOVE Results is a full-bleed band on every case study, so
   the results inner restores the standard section top padding (96/64/48)
   that the base .csp-shell__inner--results rule zeroes out. The tablet and
   mobile steps live with the other responsive overrides below. */
.csp-shell--cyrano .csp-shell__inner--results,
.csp-shell--lawallet .csp-shell__inner--results,
.csp-shell--onescreen .csp-shell__inner--results { padding-top: 96px; }

/* OneScreen: the design walkthrough bands all carry the tint, and in light
   mode it deepens to neutral-100 (the Tension/Reflection fill) — surface2 is
   too close to the #fbfafd shell to read as a separate section. Dark keeps
   the surface2 band, which already contrasts the #0e011c shell. */
:root[data-theme='light'] .csp-shell--onescreen { --fs-band-a: #edeaf1; }


.csp-shell--cyrano .case-reflection,
.csp-shell--lawallet .case-reflection,
.csp-shell--onescreen .case-reflection {
  width: 900px;
  max-width: 100%;
  align-self: center;
}

.csp-shell--cyrano .case-reflection__body,
.csp-shell--lawallet .case-reflection__body,
.csp-shell--onescreen .case-reflection__body {
  width: 100%;
  align-items: center;
}

.cy-reflect__text {
  display: flex;
  flex-direction: column;
  gap: 24px;
  width: 804px;
  max-width: 100%;
}

/* ==========================================================================
   Cyrano pipeline galleries — inline gallery (mobile autoplay) + lightbox
   (desktop/tablet expand). Brand controls via --gal-* tokens above.
   ========================================================================== */
/* Full-bleed section of alternating phase bands. Like .fs, it lives inside
   .csp-shell but OUTSIDE .csp-shell__inner so each band spans the card.
   Figma "Solution" 294:2186 (light) / 294:1955 (dark). */
.cy-sol {
  display: flex;
  flex-direction: column;
  width: 100%;
}

/* One phase = one full-width band, py-96, content centered at 1184 */
.cy-sol__band {
  display: flex;
  justify-content: center;
  width: 100%;
  padding: 96px 24px;
  background: var(--fs-band-b);          /* plain (bg) */
  scroll-margin-top: 96px;
}

.cy-sol__band--tint { background: var(--fs-band-a); }   /* surface2 */
.cy-sol__band--surface { background: var(--case-card-bg); } /* white / #1e0c32 */

/* Every anchored design band — including the "Designs" / "Design System"
   nav targets — rides flush to the viewport top (matches the
   ANCHOR_OFFSET_OVERRIDES entries in main.js for the animated ride, and
   the instant deep-link scroll in main.js reads this margin) */
.cy-sol__band[id] { scroll-margin-top: 0; }

.cy-sol__inner {
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  gap: 48px;
  width: 1184px;
  max-width: 100%;
}

/* Static header: numbered eyebrow + Gloock headline + body. Constrained to
   the hero's column width (954 of 1184) so copy aligns with the hero. */
.cy-sol__head {
  display: flex;
  flex-direction: column;
  gap: 8px;
  width: calc((954 / 1160) * (100% - 24px));
}

.cy-sol__titleblock {
  display: flex;
  flex-direction: column;
  gap: 16px;
}

.cy-sol__eyebrow {
  margin: 0;
  font-family: var(--font-body);
  font-size: 0.8125rem;
  font-weight: 600;
  line-height: 1;
  letter-spacing: 0;
  text-transform: uppercase;
  color: var(--cy-sol-eyebrow);
}

.cy-sol__num { font-variant-numeric: tabular-nums; }

.cy-sol__headline {
  margin: 0;
  font-family: var(--font-display);
  font-weight: 400;
  font-size: 2.125rem;
  line-height: 1.1;
  letter-spacing: 0.612px;
  color: var(--case-title-fg);
}

.cy-sol__body {
  margin: 0;
  font-family: var(--font-body);
  font-size: 1.0625rem;
  font-weight: 400;
  line-height: 24px;
  color: var(--case-body-fg);
}

/* Multi-paragraph phase bodies (Analytics) follow the blank-line rhythm
   used by the Figma solution bodies: 8px container gap + 16px margin = 24 */
.cy-sol__body + .cy-sol__body { margin-top: 16px; }

/* Centered variant (Phase 6 "Design System") */
.cy-sol__band--center .cy-sol__inner { align-items: center; }
.cy-sol__band--center .cy-sol__head {
  align-items: center;
  text-align: center;
  width: 900px;
}
.cy-sol__band--center .cy-sol__titleblock { align-items: center; }

/* ---- Interactive gallery: hero (left) + vertical thumb rail (right) ---- */
.gallery {
  display: flex;
  flex-direction: column;
  gap: 48px;
  width: 100%;
}

/* Desktop: hero and rail side by side, rail stretches to hero height.
   flex-basis ratios 954:206 reproduce the Figma 1184-wide row exactly. */
.gallery__row {
  display: flex;
  align-items: stretch;
  gap: 24px;
  width: 100%;
}

/* Hero image (left) — 16:9, rounded 12, DDD drop shadow, full-bleed image */
.gallery__stage {
  position: relative;
  flex: 954 1 0;
  min-width: 0;
  aspect-ratio: 16 / 9;
  border-radius: 12px;
  overflow: hidden;
  background: var(--gal-surface);
  box-shadow: 0 16px 24px rgba(30, 12, 50, 0.1);
}

.gallery__slides { position: absolute; inset: 0; }

.gallery__slide {
  position: absolute;
  inset: 0;
  /* kill the UA figure margin — with inset:0 + auto size it would inset
     the image 1em/40px from every edge (the "padding" bug) */
  margin: 0;
  display: flex;
  align-items: center;
  justify-content: center;
  background: var(--gal-surface);
  opacity: 0;
  visibility: hidden;
  transition: opacity 400ms var(--ease-out-cubic), visibility 0s linear 400ms;
}

.gallery__slide.is-active {
  opacity: 1;
  visibility: visible;
  transition: opacity 400ms var(--ease-out-cubic);
}

.gallery__slide img {
  width: 100%;
  height: 100%;
  object-fit: cover;      /* full bleed, zero padding (images are 16:9) */
  display: block;
}

/* Non-16:9 assets (e.g. the 402x874 mobile share page shot): letterbox
   at native aspect, centered, instead of cropping */
.gallery__slide--contain img { object-fit: contain; }

/* Natural-aspect hero (OneScreen Finding Solutions): the stage drops the
   16:9 crop and takes its height from the active image at native ratio —
   the active slide moves into flow, inactive slides stay absolute for the
   crossfade. Excludes the lightbox clone, which keeps its own
   explicit-height contain sizing. */
.gallery--natural:not(.gallery--lightbox) .gallery__stage { aspect-ratio: auto; }

.gallery--natural:not(.gallery--lightbox) .gallery__slides {
  position: relative;
  inset: auto;
}

.gallery--natural:not(.gallery--lightbox) .gallery__slide.is-active {
  position: relative;
  inset: auto;
}

.gallery--natural:not(.gallery--lightbox) .gallery__slide img {
  width: 100%;
  height: auto;
  object-fit: contain;
}

/* Placeholder (missing/errored image or Phase 5 by design): gray + label */
.gallery__slide--ph img,
.gallery__slide.is-broken img { display: none; }

.gallery__ph-label {
  display: none;
  padding: 0 24px;
  font-family: var(--font-body);
  font-size: 0.9375rem;
  font-weight: 600;
  line-height: 1.4;
  text-align: center;
  color: var(--case-label-fg);
}

.gallery__slide--ph,
.gallery__slide.is-broken { background: var(--gal-ph-bg); }

.gallery__slide--ph .gallery__ph-label,
.gallery__slide.is-broken .gallery__ph-label { display: block; }

/* Stage controls, bottom-right of the hero: copy-link chip (left) +
   expand chip (right; desktop/tablet only). White chip + purple glyph in
   BOTH modes (Dave 2026-07-28) — they sit on the image itself, so they're
   theme-independent; the lightbox close button keeps the --gal-btn-*
   brand fill. */
.gallery__expand,
.gallery__link {
  position: absolute;
  bottom: 12px;
  display: flex;
  align-items: center;
  justify-content: center;
  width: 32px;
  height: 32px;
  padding: 0;
  border: 0;
  border-radius: 4px;
  /* slightly translucent at rest, solid white on hover/focus */
  background: rgba(255, 255, 255, 0.7);
  color: #6a00d1;
  cursor: pointer;
  box-shadow: 0 4px 12px rgba(14, 1, 28, 0.25);
  transition: background 200ms ease, transform 200ms var(--ease-out-cubic);
}

.gallery__expand { right: 12px; }
.gallery__link { right: 52px; } /* expand's 12px inset + 32px chip + 8px gap */

.gallery__expand:hover,
.gallery__expand:focus-visible,
.gallery__link:hover,
.gallery__link:focus-visible { background: #ffffff; }

.gallery__expand:hover,
.gallery__link:hover { transform: translateY(-1px); }

.gallery__expand svg { width: 16px; height: 16px; }
.gallery__link i { font-size: 0.875rem; line-height: 1; }

/* Tooltip: dark chip above the control, right-aligned so it never leaves
   the stage. Base state everywhere (the copy confirmation reuses it);
   hover/focus reveal — after a 300ms linger — is desktop-pointer only, so
   touch devices never see it. */
.gallery__expand[data-tooltip]::after,
.gallery__link[data-tooltip]::after {
  content: attr(data-tooltip);
  position: absolute;
  bottom: calc(100% + 10px);
  right: 0;
  padding: 7px 10px;
  border-radius: 6px;
  background: #0e011c;
  color: #ffffff;
  font-family: var(--font-body);
  font-size: 0.75rem;
  font-weight: 600;
  line-height: 1;
  white-space: nowrap;
  box-shadow: 0 4px 12px rgba(14, 1, 28, 0.35);
  opacity: 0;
  transform: translateY(4px);
  pointer-events: none;
  transition: opacity 160ms ease, transform 160ms var(--ease-out-cubic);
}

@media (hover: hover) and (pointer: fine) {
  .gallery__expand:hover::after,
  .gallery__expand:focus-visible::after,
  .gallery__link:hover::after,
  .gallery__link:focus-visible::after {
    opacity: 1;
    transform: translateY(0);
    transition-delay: 300ms;
  }
}

/* Copy confirmation shows immediately on every device */
.gallery__link.is-copied::after {
  opacity: 1;
  transform: translateY(0);
  transition-delay: 0ms;
}

/* Thumb rail (right) — vertical, stretches to hero height, thumbs split it */
.gallery__thumbs {
  display: flex;
  flex-direction: column;
  flex: 206 1 0;
  min-width: 0;
  gap: 24px;
}

.gallery__thumb {
  flex: 1 1 0;
  min-height: 0;
  padding: 0;
  border: 4px solid transparent;
  border-radius: 8px;
  overflow: hidden;
  background: var(--gal-ph-bg);
  box-shadow: 0 8px 16px rgba(30, 12, 50, 0.08);
  cursor: pointer;
  opacity: 0.5;
  transition: opacity 200ms ease, border-color 200ms ease;
}

.gallery__thumb:hover,
.gallery__thumb:focus-visible { opacity: 1; }

.gallery__thumb.is-active {
  opacity: 1;
  border-color: var(--gal-ring);   /* amber, per Figma */
}

.gallery__thumb img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  display: block;
}

.gallery__thumb.is-broken img { display: none; }

/* Large galleries (Design System's 15): splitting the vertical rail per
   thumb would leave slivers, so the rail becomes a two-column grid of
   16:9 thumbs that scrolls when it outgrows the stage height */
.gallery--many .gallery__thumbs {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 12px;
  align-content: start;
  overflow-y: auto;
}

.gallery--many .gallery__thumb {
  flex: none;
  aspect-ratio: 16 / 9;
  min-height: 0;
}

.gallery__thumb-ph {
  display: flex;
  align-items: center;
  justify-content: center;
  width: 100%;
  height: 100%;
  font-family: var(--font-body);
  font-size: 0.75rem;
  font-weight: 600;
  color: var(--case-label-fg);
}

/* Caption below the gallery (active image's headline + body), hero width */
.gallery__caption {
  display: flex;
  flex-direction: column;
  gap: 8px;
  width: calc((954 / 1160) * (100% - 24px));
}

/* Phase 5 header is centered, but the gallery + caption group stays
   left-aligned to the hero's edge (Figma 379:1962 items-start). */
.cy-sol__band--center .gallery__caption { align-self: flex-start; }

.gallery__caption-head {
  margin: 0;
  font-family: var(--font-body);
  font-size: 1.625rem;
  font-weight: 600;
  line-height: 1.2;
  color: var(--case-title-fg);
}

.gallery__caption-body {
  margin: 0;
  font-family: var(--font-body);
  font-size: 1.0625rem;
  font-weight: 400;
  line-height: 24px;
  color: var(--case-body-fg);
}

.gallery__caption-body[hidden] { display: none; }

/* Mic Drop — centered paragraph interlude after the numbered phases.
   Primary surface fill (Dave 2026-07-28: match the page's Surface 1, not
   the tint) — also keeps it distinct from the tinted Analytics band above */
.cy-sol__micdrop {
  display: flex;
  justify-content: center;
  width: 100%;
  padding: 96px 24px;
  background: var(--fs-band-b);
}

/* Tinted variant (OneScreen): its band rhythm ends on a plain band, so the
   mic drop takes the tint to stay distinct from the band above and the
   Results surface below */
.cy-sol__micdrop--tint { background: var(--fs-band-a); }

.cy-sol__micdrop p {
  margin: 0;
  width: 720px;
  max-width: 100%;
  font-family: var(--font-body);
  font-size: 1.0625rem;
  font-weight: 400;
  line-height: 24px;
  text-align: center;
  color: var(--case-body-fg);
}

/* ---- Tablet + mobile: stack the rail as a horizontal strip below hero ---- */
@media (max-width: 1024px) {
  .cy-sol__head,
  .gallery__caption { width: 100%; }

  .gallery__row { flex-direction: column; gap: 24px; }

  .gallery__stage { flex: none; width: 100%; }

  .gallery__thumbs {
    flex: none;
    flex-direction: row;
    width: 100%;
    gap: 24px;
  }

  .gallery__thumb {
    flex: 1 1 0;
    aspect-ratio: 16 / 9;
  }

  /* Large galleries: the horizontal strip wraps into a 5-up grid instead
     of squeezing 15 thumbs onto one row */
  .gallery--many .gallery__thumbs {
    grid-template-columns: repeat(5, minmax(0, 1fr));
    overflow: visible;
  }

  .cy-sol__band--center .cy-sol__head { width: 100%; }
}

/* Mobile: tighter thumb gap (8px), 2px ring + 4px radius, hero radius 8
   (all per the mobile Figma frames), no expand button (autoplay); the
   copy-link chip takes the corner slot */
@media (max-width: 640px) {
  .gallery__stage { border-radius: 8px; }
  .gallery__thumbs { gap: 8px; }
  .gallery__thumb { border-width: 2px; border-radius: 4px; }
  .gallery__expand { display: none; }
  .gallery__link { right: 12px; }
}

/* --- Lightbox (built by JS, appended to body; lives outside .csp-shell,
   so it re-declares the tokens it needs for the current theme) --- */
.gallery-lightbox {
  position: fixed;
  inset: 0;
  z-index: 500;
  display: none;
  /* fullscreen: the panel fills the whole viewport, no framing padding */
  padding: 0;
  /* the overlay blurs the page edge-to-edge; the translucent panel above
     it provides the theme tint, so the page shows through frosted */
  background: transparent;
  -webkit-backdrop-filter: blur(16px);
  backdrop-filter: blur(16px);
  /* fun open/close: frost fades in, panel springs in (JS toggles is-in a
     frame after is-open so the transition runs from the hidden state) */
  opacity: 0;
  transition: opacity 220ms ease;
}

.gallery-lightbox.is-open { display: flex; }
.gallery-lightbox.is-in { opacity: 1; }

/* Theme tokens for the lightbox subtree (it's outside the shell, so it
   re-declares every --gal-* token it uses, including the button colors) */
.gallery-lightbox {
  --gal-surface: #f4f1f8;
  --gal-border: #e9e5f0;
  --gal-ring: #ffc20a;
  --gal-ph-bg: #ece7f4;
  --gal-btn-bg: #6a00d1;
  --gal-btn-bg-hover: #8200ff;
  --gal-btn-fg: #ffffff;
  --gal-lightbox-scrim: rgba(30, 12, 50, 0.6);
  /* translucent: the blurred page shows through the white frost */
  --lb-panel-bg: rgba(255, 255, 255, 0.84);
  --lb-fg: #1e0c32;
  --lb-body: #5e5072;
  --lb-label: #a899b9;
}

:root[data-theme='dark'] .gallery-lightbox {
  --gal-surface: #1e0c32;
  --gal-border: #3d3350;
  --gal-ring: #ffc20a;
  --gal-ph-bg: #241238;
  --gal-btn-bg: #b679ff;
  --gal-btn-bg-hover: #c79cff;
  --gal-btn-fg: #1e0c32;
  --gal-lightbox-scrim: rgba(14, 1, 28, 0.85);
  /* translucent: the blurred page shows through the brand-purple frost */
  --lb-panel-bg: rgba(30, 12, 50, 0.84);
  --lb-fg: #ffffff;
  --lb-body: #ded7e6;
  --lb-label: #978aaa;
}

.gallery-lightbox__panel {
  position: relative;
  /* edge-to-edge: the panel IS the viewport */
  width: 100%;
  height: 100%;
  height: 100dvh;
  overflow: hidden;
  display: flex;
  flex-direction: column;
  gap: 0;
  padding: 0;
  border-radius: 0;
  background: var(--lb-panel-bg);
  /* springs up from slightly small + offset */
  transform: scale(0.94) translateY(10px);
  opacity: 0;
  transition: transform 320ms cubic-bezier(0.34, 1.56, 0.64, 1), opacity 220ms ease;
}

.gallery-lightbox.is-in .gallery-lightbox__panel {
  transform: none;
  opacity: 1;
}

/* Fullscreen gallery inside the panel: the hero + rail + caption unit is
   centered vertically AND horizontally as one block. The stage + caption
   share a column (built by openLightbox), so the caption sits flush with
   the image's left edge at the image's width. The hero image is never
   cropped here (contain). */
.gallery-lightbox .gallery--lightbox {
  flex: 1;
  min-height: 0;
  gap: 0;
  display: flex;
  flex-direction: column;
  justify-content: center;
}

.gallery-lightbox .gallery__row {
  flex: 0 0 auto;
  min-height: 0;
  width: 100%;
  gap: 24px;
  /* the unit centers on screen (close button is fixed); rail top-aligns
     with the stage, caption extends below it */
  justify-content: center;
  align-items: flex-start;
}

/* Stage + caption column: width follows the stage (its widest child),
   so the caption tracks the image edge-to-edge */
.gallery-lightbox .gallery__stagecol {
  display: flex;
  flex-direction: column;
  gap: 16px;
  flex: 0 1 auto;
  min-width: 0;
  max-width: calc(100% - 230px); /* keep room for the 206px rail + gap */
}

.gallery-lightbox .gallery__stage {
  /* Sized by the active image's aspect (JS syncs the ratio per slide) at
     an explicit height that reserves breathing room above and below the
     centered unit — the stage hugs the painted image */
  flex: 0 1 auto;
  height: calc(100dvh - 300px);
  aspect-ratio: 16 / 9;
  max-width: 100%;
  border-radius: 0;
  box-shadow: none;
  background: transparent;
}

.gallery-lightbox .gallery__slide { background: transparent; }
.gallery-lightbox .gallery__slide img { object-fit: contain; }

.gallery-lightbox .gallery__thumbs {
  flex: 0 0 206px;
  height: calc(100dvh - 300px); /* match the stage so thumbs center on it */
  justify-content: center;
  gap: 16px;
  overflow: hidden;
  padding: 0;
}

/* Thumbs keep 16:9 when there's room but SHRINK to share the rail height
   when a phase has more images (e.g. Production's five) — no scrolling */
.gallery-lightbox .gallery__thumb {
  flex: 0 1 auto;
  min-height: 0;
  aspect-ratio: 16 / 9;
  width: 100%;
}

/* Large galleries in the lightbox: same two-column scrolling grid as the
   inline rail (the clone carries the gallery--many class) */
.gallery-lightbox .gallery--many .gallery__thumbs {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 12px;
  align-content: start;
  overflow-y: auto;
}

.gallery-lightbox .gallery__caption {
  /* under the image inside the stage column: left-aligned, flush with
     the image's left edge, at the image's width (render() keeps the
     text in sync per slide). width 0 + min-width 100% keeps the long
     caption text from inflating the column past the image's aspect
     width — the stage alone sizes the column. */
  flex: 0 0 auto;
  align-items: flex-start;
  text-align: left;
  width: 0;
  min-width: 100%;
  padding: 0;
}

/* X sits at the top-right of the viewport (child of the overlay, not the panel) */
.gallery-lightbox__close {
  position: absolute;
  top: 32px;
  right: 32px;
  z-index: 10;
  display: flex;
  align-items: center;
  justify-content: center;
  width: 40px;
  height: 40px;
  padding: 0;
  border: 0;
  border-radius: 4px;
  background: var(--gal-btn-bg);
  color: var(--gal-btn-fg);
  cursor: pointer;
  transition: background 200ms ease;
}

.gallery-lightbox__close:hover { background: var(--gal-btn-bg-hover); }
.gallery-lightbox__close svg { width: 18px; height: 18px; }

/* In the lightbox, captions/labels use the lightbox palette and there is
   no nested expand button */
.gallery-lightbox .gallery__caption-head { color: var(--lb-fg); }
.gallery-lightbox .gallery__caption-body { color: var(--lb-body); }
.gallery-lightbox .gallery__ph-label,
.gallery-lightbox .gallery__thumb-ph { color: var(--lb-label); }
.gallery-lightbox .gallery__expand,
.gallery-lightbox .gallery__link { display: none; }

/* Fullscreen lightbox at tablet: the row stacks (inherited), so the rail
   becomes a horizontal strip under the hero. These out-specify the base
   lightbox rules above, which would otherwise win inside the media query. */
@media (max-width: 1024px) {
  /* Stacked layout: the stage column fills the remaining height at full
     width, the rail becomes a strip, the caption keeps its flush-left
     placement under the image (with a small screen-edge inset) */
  .gallery-lightbox .gallery__row {
    flex: 1 1 auto;
    gap: 16px;
    align-items: stretch;
  }

  .gallery-lightbox .gallery__stagecol {
    flex: 1 1 auto;
    min-height: 0;
    width: 100%;
    max-width: none;
  }

  .gallery-lightbox .gallery__stage {
    flex: 1 1 auto;
    min-height: 0;
    width: 100%;
    height: auto;
    max-width: none;
  }

  .gallery-lightbox .gallery__caption { padding: 0 16px; }

  .gallery-lightbox .gallery__thumbs {
    flex: 0 0 auto;
    height: auto;
    justify-content: flex-start;
    overflow-x: auto;
    overflow-y: hidden;
    padding: 0 16px 12px;
  }

  .gallery-lightbox .gallery__thumb { flex: 0 0 148px; width: auto; }
}

@media (prefers-reduced-motion: reduce) {
  .gallery__slide,
  .gallery__slide.is-active,
  .gallery__expand,
  .gallery-lightbox,
  .gallery-lightbox__panel { transition: none; }
}

/* ==========================================================================
   Explore More Case Studies (Figma 274:5271 light / 274:4881 dark desktop,
   274:4103/4471 tablet, 274:3357/3726 mobile) — full-bleed band, last
   section of the shell (its bottom corners round to 30px in light to close
   the white card). Two 600px-tall linked cards: image over a 194px meta
   panel. Overrides per Dave: real <ul> bullets with hanging indent (the
   node fakes a bullet column), whole card is one anchor, desktop-only
   hover lift, and card two's duplicated client label is built as-is.
   ========================================================================== */
/* Square backing behind the band: its fill shows through the band's
   rounded bottom corners so the section curves into the footer */
.xm-wrap {
  width: 100%;
  background: var(--xm-behind);
}

.xm {
  display: flex;
  flex-direction: column;
  align-items: center;
  width: 100%;
  padding: 96px 24px;
  background: var(--xm-band-bg);
}

:root[data-theme='light'] .xm { border-radius: 0 0 30px 30px; }

.xm__inner {
  width: 1184px;
  max-width: 100%;
  display: flex;
  flex-direction: column;
  gap: 48px;
}

.xm__title { width: 100%; } /* left-aligned, spans the container (node) */

.xm__cards {
  display: flex;
  gap: 48px;
  width: 100%;
}

/* Override: the whole card is a single anchor */
.xm-card {
  flex: 1;
  min-width: 0;
  height: 600px;
  display: flex;
  flex-direction: column;
  text-decoration: none;
  border-radius: 20px;
  box-shadow: var(--xm-card-shadow);
  transition: transform 250ms var(--ease-out), box-shadow 250ms ease;
}

/* Override: hover lift + shadow increase, desktop pointers only */
@media (hover: hover) and (pointer: fine) {
  .xm-card:hover,
  .xm-card:focus-visible {
    transform: translateY(-4px);
    box-shadow: var(--xm-card-shadow-hover);
  }
}

.xm-card__media {
  display: block;
  flex: 1;
  min-height: 0;
  border-radius: 20px 20px 0 0;
  overflow: hidden;
  position: relative; /* carousel slides stack inside (.cs-carousel, styles.css) */
}

.xm-card__media img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  display: block;
}

.xm-card__meta {
  /* 194px in the Figma node; min-height (not height) so a wrapping title or
     stat list grows the panel instead of spilling out over the image — at
     mobile type sizes three stats need ~250px (matches la-wallet.css) */
  min-height: 194px;
  flex-shrink: 0;
  display: flex;
  flex-direction: column;
  justify-content: flex-end;
  gap: 12px;
  padding: 20px;
  border-radius: 0 0 20px 20px;
  background: var(--case-card-bg); /* #fff light / #1e0c32 dark (node) */
}

.xm-card__id {
  display: flex;
  flex-direction: column;
  gap: 4px;
}

.xm-card__client {
  font-size: 1.0625rem;
  font-weight: 600;
  line-height: 1.4;
  color: var(--xm-client);
}

.xm-card__name {
  font-family: var(--font-display);
  font-weight: 400;
  font-size: 2.125rem;
  line-height: 1.12;
  letter-spacing: 0.612px;
  color: var(--case-title-fg);
}

/* Override: a real list — markers stay aligned when a stat wraps */
.xm-card__stats {
  margin: 0;
  padding-left: 20px;
  list-style: disc;
  display: flex;
  flex-direction: column;
  gap: 2px;
  font-size: 1.0625rem;
  font-weight: 400;
  line-height: 24px;
  color: var(--xm-stat-fg);
}

.xm-card__stats li::marker { color: #9747ff; }

/* ==========================================================================
   Explore More Case Studies — follows the theme (dark in dark mode)
   ========================================================================== */
.csp-explore {
  /* position:relative (with .contact below) keeps these painting above the
     sticky hero as they scroll over it */
  position: relative;
  padding: var(--csp-section-gap) var(--csp-pad);
  border-radius: 30px;
  margin: 0 0 16px;
  background: var(--bg-default);
  scroll-margin-top: var(--nav-height);
}

.contact { position: relative; }

/* In light mode the section reads as its own floating card (the dark plum
   page frame shows through the gaps, like the homepage shell) */
:root[data-theme='light'] .csp-explore {
  box-shadow: 0 24px 48px rgba(30, 12, 50, 0.18);
}

.csp-explore__inner {
  max-width: var(--csp-content);
  margin: 0 auto;
  display: flex;
  flex-direction: column;
  gap: 48px;
}

.csp-explore__header {
  display: flex;
  flex-direction: column;
  gap: 16px;
  max-width: 680px;
}

.xp-grid {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 24px;
}

.xp-card {
  --fg-default: #ffffff; /* text sits on a darkened image in both themes */
  position: relative;
  display: flex;
  flex-direction: column;
  justify-content: flex-end;
  min-height: 380px;
  padding: 28px;
  border-radius: 16px;
  overflow: hidden;
  background: var(--bg-surface);
  text-decoration: none;
  filter: drop-shadow(0 16px 8px rgba(0, 0, 0, 0.1));
}

.xp-card__img {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  object-fit: cover;
  transition: transform 500ms var(--ease-out);
}

.xp-card:hover .xp-card__img,
.xp-card:focus-visible .xp-card__img {
  transform: scale(1.04);
}

.xp-card__scrim {
  position: absolute;
  inset: 0;
  background: linear-gradient(180deg, rgba(14, 1, 28, 0) 40%, rgba(14, 1, 28, 0.82) 100%);
}

.xp-card__content {
  position: relative;
  display: flex;
  flex-direction: column;
  gap: 8px;
}

.xp-card__client {
  margin: 0;
  font-size: 0.8125rem;
  font-weight: 600;
  letter-spacing: 0.5px;
  text-transform: uppercase;
  color: rgba(255, 255, 255, 0.75);
}

.xp-card__title {
  margin: 0;
  font-family: var(--font-display);
  font-weight: 400;
  font-size: 2.125rem;
  line-height: 1.1;
  letter-spacing: 0.6px;
  color: #ffffff;
}

.xp-card__desc {
  margin: 0;
  max-width: 460px;
  font-size: 0.9375rem;
  line-height: 1.5;
  color: rgba(255, 255, 255, 0.8);
}

@media (hover: none) {
  .xp-card { transition: transform 150ms ease, opacity 150ms ease; }
  .xp-card:active { transform: scale(0.98); opacity: 0.9; }
}

/* ==========================================================================
   Breakpoints — Figma: tablet 768 (24px sides, 96px sections),
   mobile 402 (20px sides, 64px sections)
   ========================================================================== */
@media (max-width: 1024px) {
  :root {
    --csp-pad: 24px;
    --csp-section-gap: 96px;
  }

  /* Tablet + mobile: image stacks on top, details below, regardless of the
     desktop orientation. The hero spans the full viewport — image and copy
     split it 50/50, the copy growing past its half when it needs the room */
  .csp-hero,
  .csp-hero--details-right {
    flex-direction: column-reverse;
    height: auto;
    min-height: 100vh;
    min-height: 100svh;
  }

  .csp-hero__media {
    flex: none;
    width: 100%;
    height: 50vh;
    height: 50svh;
  }

  .csp-hero__details {
    width: 100%;
    flex-shrink: 0;
    justify-content: flex-start;
    min-height: 50vh;
    min-height: 50svh;
  }

  .csp-meta { grid-template-columns: repeat(2, minmax(0, 1fr)); }

  /* Case block, tablet (Figma 274-3802): columns stack with 24px between,
     metadata becomes a two-column grid */
  .case-block { gap: 64px; }
  .csp-shell__inner { padding-top: 64px; padding-bottom: 64px; }

  /* Problem, tablet (274-3833): image stacks full-width above a 2x2 grid */
  .case-problem__details {
    flex-direction: column;
    gap: 64px;
  }

  .case-problem__image {
    width: 100%;
    height: auto;
    aspect-ratio: 1448 / 1086;
  }

  .case-problem__items {
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: 30px;
    padding: 0 6px;
    width: 100%;
  }

  .case-problem__copy { width: 100%; }

  .case-overview__row {
    flex-direction: column;
    gap: 24px;
  }

  .case-overview__main { width: 100%; }

  .case-overview__aside { width: 100%; }

  /* metadata list (not the Role card's inner label) becomes 2 columns */
  .case-overview__aside > .case-meta {
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: 24px;
  }

  /* Finding Solutions, tablet (274:3944): centered data stacks above a
     full-width 854:607 image; the L/R alternation is dropped */
  .fs-block__content,
  .fs-block--flip .fs-block__content {
    flex-direction: column;
    gap: 48px;
  }

  .fs-block__data {
    align-items: center;
    text-align: center;
    width: 640px;
    max-width: 100%;
    flex: none;
  }

  .fs-block__image {
    flex: none;
    width: 100%;
    aspect-ratio: 854 / 607;
  }

  /* Results, tablet (274:4058): heading text insets 24px each side while
     the card grids run the full 720 (zero side padding in the node —
     flagged for review); stats stay 3-up, testimonials go single column */
  .case-results__heading { padding: 0 24px; }
  .case-results__quotes { grid-template-columns: 1fr; }

  /* Explore More, tablet (274:4103): cards stack, still 48px apart */
  .xm__cards { flex-direction: column; }
  .xm-card { flex: none; width: 100%; }

  /* Cyrano tablet (294:1450): Overview aside full width; Problem grid
     → 2 columns with a full-width lede. Core Tension + Solution need no
     tablet rule — they stack at every width and hold the same 900px
     measure the Reflection card holds here. */
  .cy-overview__aside { flex: none; width: 100%; }
  .cy-problem__lede { width: 100%; }
  .cy-problem__grid { grid-template-columns: repeat(2, minmax(0, 1fr)); }

  /* Cyrano Results/Reflection tablet (294:1580): heading un-inset (no
     24px quirk), testimonials stack, Reflection pads 48/24; results
     inner keeps the standard 64px tablet top padding. LA Wallet shares
     the band-before-results layout, so it takes the same treatment. */
  .csp-shell--cyrano .csp-shell__inner--results,
  .csp-shell--lawallet .csp-shell__inner--results,
  .csp-shell--onescreen .csp-shell__inner--results { padding-top: 64px; }
  .csp-shell--cyrano .case-results__heading,
  .csp-shell--lawallet .case-results__heading,
  .csp-shell--onescreen .case-results__heading { padding: 0; }
  .csp-shell--cyrano .case-results__quotes { grid-template-columns: 1fr; }
  .csp-shell--lawallet .case-results__quotes { grid-template-columns: 1fr; }
  .csp-shell--cyrano .case-reflection,
  .csp-shell--lawallet .case-reflection,
  .csp-shell--onescreen .case-reflection { padding: 48px 24px; }
}

@media (max-width: 640px) {
  :root {
    /* 24px gutters per the current mobile nodes (354 content on 402) —
       the original 20px/362 spec predates the Figma mobile frames */
    --csp-pad: 16px;
    --csp-section-gap: 64px;
  }

  /* Phone bottom nav hugs the viewport bottom (8px + home-indicator
     clearance) but keeps 20px side gutters, so it still reads as a
     rounded floating bar — just without the shadow halo */
  .pagenav {
    left: 20px;
    right: 20px;
    bottom: calc(8px + env(safe-area-inset-bottom, 0px));
  }

  /* No home button — the section pills take the full width, each flexing
     to an even share (the row still side-scrolls if the labels genuinely
     can't fit). Desktop/tablet keep the home disc. */
  .pagenav__home { display: none; }

  .pagenav__bar {
    width: 100%;
    box-shadow: none;
  }

  .pagenav__btn {
    flex: 1 0 auto;
    text-align: center;
  }

  /* Mobile reads like the homepage cs-card: image on top, then a compact
     content-height details panel — client, title, body, stats — with the
     card's type scale and rhythm (styles.css .cs-card 640/480 blocks).
     The hero unpins and flows, and drops the full-screen min-height: a
     card hugs its content, so the shell peeks below on taller phones. */
  .csp-hero {
    position: static;
    height: auto;
    min-height: 0;
  }

  .csp-hero__media {
    flex: none;
    width: 100%;
    height: auto;
    aspect-ratio: 4 / 3;
    min-height: 0;
  }

  .csp-hero__tags { display: none; }

  .csp-hero__details {
    flex: none;
    min-height: 0;
    /* bottom padding clears the fixed pagenav (24px offset + ~54px bar,
       plus breathing room) so short-screen loads keep the stats above it */
    padding: 24px 16px 96px;
    gap: 20px;
    justify-content: flex-start;
  }

  .csp-hero__info { gap: 16px; }

  .csp-hero__client { font-size: 1.25rem; }
  .csp-hero__title { font-size: 2.125rem; line-height: 1.05; }
  .csp-hero__subtitle { font-size: 1.0625rem; }

  .csp-hero__stats { flex-direction: column; }
  .csp-hero__stats li { font-size: 1rem; line-height: 1.4; }

  .csp-lede { font-size: 1.0625rem; }
  .csp-body p { font-size: 1rem; }

  /* Case block, mobile (Figma 274-3064): 48px stacks, metadata grid stays
     two columns, card padding and type unchanged */
  .case-block { gap: 48px; }
  .csp-shell__inner { padding-top: 48px; padding-bottom: 48px; }
  .case-overview__row { gap: 48px; }
  .case-overview__main { gap: 48px; }

  /* Problem, mobile (274-3095): header goes left-aligned, items single column */
  .case-problem__header,
  .case-problem__intro {
    align-items: flex-start;
    text-align: left;
  }

  .case-problem__body { width: 100%; }

  .case-problem__items { grid-template-columns: 1fr; }

  /* Core Tension / Solution, mobile (274:3541/3558): 20px side padding,
     left-aligned full-width text */
  .case-tension,
  .case-solution {
    align-items: flex-start;
    text-align: left;
    padding: 48px 16px;
  }

  .case-panel__text { width: 100%; }

  /* Explore More, mobile (274:3357): band tightens to 48px vertical */
  .xm { padding: 48px 16px; }

  /* Reflection, mobile (354:1043): 48/20 padding, left-aligned (node) */
  .case-reflection {
    align-items: flex-start;
    text-align: left;
    padding: 48px 16px;
  }

  /* flex-start undoes the shell-level align-items:center — without it the
     subhead (a shrink-to-fit flex item) still sat centered in the left-aligned
     card. */
  .case-reflection__body,
  .csp-shell--cyrano .case-reflection__body,
  .csp-shell--lawallet .case-reflection__body,
  .csp-shell--onescreen .case-reflection__body { width: 100%; align-items: flex-start; }

  /* Explore cards match the homepage cs-card mobile treatment: the fixed
     600px desktop height goes content-driven — a 16/10 image on top (same
     ratio as the homepage cards) with the details growing below it */
  .xm-card { height: auto; }
  .xm-card__media { flex: none; aspect-ratio: 16 / 10; }
  .xm-card__meta { min-height: 0; }

  /* Results, mobile (274:3319): 24px group rhythm, single column, no
     subhead in the node (flagged), heading un-inset */
  .case-results { gap: 24px; }
  .case-results__heading { padding: 0; }
  .case-results__subhead { display: none; }
  .case-results__stats { grid-template-columns: 1fr; }
  .case-results__desc { width: 100%; }

  /* Finding Solutions, mobile (274:3206): 48px section rhythm and a
     left-aligned header; blocks stay centered like tablet */
  .fs {
    gap: 48px;
    padding-bottom: 48px;
  }

  .fs__header {
    align-items: flex-start;
    text-align: left;
  }

  /* Mobile reads left-aligned: every remaining centered text block
     flushes left (only the site footer stays centered) */
  .fs-block__data {
    align-items: flex-start;
    text-align: left;
  }

  .fs-micdrop p { text-align: left; }

  .case-results__heading,
  .case-results__intro {
    align-items: flex-start;
    text-align: left;
  }

  .cy-problem__header {
    align-items: flex-start;
    text-align: left;
  }

  .cy-sol__band--center .cy-sol__inner { align-items: flex-start; }
  .cy-sol__band--center .cy-sol__head {
    align-items: flex-start;
    text-align: left;
  }

  .cy-sol__micdrop p { text-align: left; }

  .fs-micdrop { padding: 96px 16px; }
  .fs-block { padding: 96px 16px; }
  .cy-sol__band,
  .cy-sol__micdrop { padding: 96px 16px; }

  .csp-results__grid {
    grid-template-columns: 1fr;
    gap: 16px;
  }

  .xp-grid { grid-template-columns: 1fr; gap: 16px; }
  .xp-card { min-height: 300px; padding: 20px; }
  .xp-card__title { font-size: 1.75rem; }

  /* Cyrano mobile (294:1046): 20px gutters (362 content on 402, tighter
     than the 24px sitewide default), Problem grid → 1 column, role card
     padding 16, panels 20px */
  .csp-shell--cyrano,
  .csp-shell--onescreen { --csp-pad: 16px; }
  .cy-problem__grid { grid-template-columns: 1fr; }
  .cy-rolecard { padding: 16px; }
  .cy-panel { padding: 20px; }

  /* Cyrano Results/Reflection mobile (382:3310): unlike OneScreen, the
     node KEEPS the subhead and the 48px section rhythm; Reflection card
     tightens to 16px padding (stays left-aligned via the shared rule);
     results inner keeps the standard 48px mobile top padding */
  .csp-shell--cyrano .csp-shell__inner--results,
  .csp-shell--lawallet .csp-shell__inner--results,
  .csp-shell--onescreen .csp-shell__inner--results { padding-top: 48px; }
  .csp-shell--lawallet .case-reflection { padding: 16px; }
  .csp-shell--cyrano .case-results,
  .csp-shell--onescreen .case-results { gap: 48px; }
  .csp-shell--cyrano .case-results__subhead,
  .csp-shell--onescreen .case-results__subhead { display: block; }
  .csp-shell--cyrano .case-reflection,
  .csp-shell--onescreen .case-reflection { padding: 16px; }
}

/* Phone-width explore cards (~480 down): the 640 sizes read oversized, so
   the whole scale steps down proportionally — same convention as the
   homepage .cs-card block in styles.css */
@media (max-width: 480px) {
  /* Hero details step down with the homepage .cs-card 480 block so the
     panel reads like the card that opened it */
  .csp-hero__details { padding: 20px 16px 96px; gap: 14px; }
  .csp-hero__info { gap: 10px; }
  .csp-hero__client { font-size: 0.9375rem; }
  .csp-hero__title { font-size: 1.625rem; }
  .csp-hero__subtitle { font-size: 0.9375rem; }
  .csp-hero__stats { gap: 6px; }
  .csp-hero__stats li { font-size: 0.875rem; line-height: 1.35; }

  .xm-card__meta { padding: 16px; gap: 10px; }
  .xm-card__name { font-size: 1.625rem; }
  .xm-card__client { font-size: 0.9375rem; }
  .xm-card__stats { font-size: 0.875rem; line-height: 1.35; }
}

/* Tablet keeps the two-column explore grid but tightens the cards */
@media (min-width: 641px) and (max-width: 1024px) {
  .xp-card { min-height: 320px; }
}

/* ==========================================================================
   Reduced motion
   ========================================================================== */
@media (prefers-reduced-motion: reduce) {
  .pagenav,
  .pagenav__bar,
  .pagenav__btn,
  .pagenav__home,
  .xp-card__img { transition: none; }

  .pagenav--enter .pagenav__bar,
  .pagenav--enter .pagenav__home,
  .pagenav--enter .pagenav__btn {
    animation: none;
    opacity: 1;
  }

  .csp-hero--fade {
    animation: none;
    opacity: 1;
  }
}