/* ========================================
   TOKENS
   ======================================== */

:root {
  /* Colors */
  --color-bg: #FFFFFF;
  --color-text-primary: #050307;   /* near-black, Mirego-inspired */

  /* Typography — Families */
  --font-heading: 'Space Grotesk', sans-serif;
  --font-body: 'Inter', sans-serif;

  /* Typography — Sizes (rem based on 16px root) */
  --text-h1: 3.5rem;      /* 56px */
  --text-h2: 2.5rem;      /* 40px */
  --text-h3: 2rem;        /* 32px */
  --text-h4: 1.75rem;     /* 28px */
  --text-body-lg: 1.3125rem;   /* 21px */
  --text-body-base: 1.0625rem; /* 17px */
  --text-body-sm: 0.9375rem;   /* 15px */
  --text-caption: 0.9375rem;   /* 15px — uppercase label */

  /* Typography — Weights */
  --weight-regular: 400;
  --weight-medium: 500;
  --weight-bold: 700;

  /* Typography — Line Heights */
  --lh-heading: 1.12;
  --lh-body: 1.25;

  /* Typography — Letter Spacing */
  --ls-heading: -0.02em;
  --ls-heading-tight: -0.01em;
  --ls-caption: 0.3px;
  --ls-body: 0.4px;

  /* Layout */
  --container-max: 75rem;     /* 1200px */
  --container-padding: clamp(1rem, 8.33vw, 7.5rem); /* 16px→120px */
  --section-height: 100svh;
  --grid-columns: 12;

  /* Spacing — vertical (semantic, Mirego-inspired) */
  --space-xs: 1rem;           /* 16px — related paragraphs, same idea */
  --space-sm: 2rem;            /* 32px — steps in same argument */
  --space-md: 4rem;            /* 64px — sub-sections */
  --space-lg: 6rem;            /* 96px — between major sections */
  --space-xl: 8rem;            /* 128px — chapter-level / after hero */

  /* Spacing — grid gaps */
  --gap-sm: 1.5rem;            /* 24px — tight grids (stats, thumbs) */
  --gap-md: 2rem;              /* 32px — standard 2/3-col splits */
  --gap-lg: 3rem;              /* 48px — spacious 2-col heros */
}

/* ========================================
   TYPOGRAPHY BRICKS
   Reusable atomic text styles shared by multiple walls (B## components).
   Bricks = atoms; walls = molecules. Two ways to use a brick:
   (1) Apply the .t-* class directly to any HTML element.
   (2) Walls that share the brick's style are grouped into the brick's
   selector list — so the brick's styles apply automatically without
   editing HTML. Walls keep their own rules only for what differs
   (color, margin, size override).
   ======================================== */

/* BRICK — caption
   15px Inter bold uppercase. The workhorse label / eyebrow / section-tag
   style. Used across many walls for short uppercase labels. */
.t-caption,
.case-split__intro,
.case-questions__eyebrow,
.case-questions__num,
.research-section__eyebrow,
.research-panel__label,
.research-panel__decision-title {
  font-family: var(--font-body);
  font-size: var(--text-caption);
  font-weight: var(--weight-bold);
  line-height: var(--lh-heading);
  letter-spacing: var(--ls-caption);
  text-transform: uppercase;
  color: var(--color-text-primary);
}

/* BRICK — quote
   Editorial italic headline-sized quote, responsive clamp 28 → 44px.
   Inherits --case-text from the active scoped palette, so it takes the
   project's accent color automatically. */
.t-quote,
.research-panel__quote,
.case-quote__body {
  font-family: var(--font-heading);
  font-size: clamp(1.75rem, 3.2vw, 2.75rem);
  font-weight: var(--weight-regular);
  font-style: italic;
  line-height: 1.2;
  letter-spacing: var(--ls-heading-tight);
  color: var(--case-text, var(--color-text-primary));
  margin: 0;
}

/* BRICK — number-xl
   Display-size numeric callout, clamp 48 → 100px Space Grotesk. For
   stat metrics and impact numbers. */
.t-number-xl,
.case-stats__number {
  font-family: var(--font-heading);
  font-size: clamp(3rem, 6.94vw, 6.25rem);
  font-weight: var(--weight-regular);
  line-height: 1;
  letter-spacing: var(--ls-heading);
}

/* ========================================
   LAYOUT BRICKS
   Reusable grid primitives shared by multiple walls. Bricks define ONLY
   the grid structure (display + grid-template-columns) — padding, margin,
   gap, and alignment live in the wall because those are contextual.
   Same selector-grouping pattern as typography bricks: apply the .l-*
   class directly OR walls inherit via the brick's selector list.
   ======================================== */

/* BRICK — cols-2
   Two equal 50/50 columns. Used by walls that present parallel content
   (persona pairs, voice/insight splits, binary comparisons). */
.l-cols-2,
.research-panel,
.case-two-col {
  display: grid;
  grid-template-columns: 1fr 1fr;
}

/* BRICK — cols-3
   Three equal columns. Used by walls that present triptych content
   (goals, stats default, rec-engine pipeline, image thumbnails). The
   .case-stats modifier variants (--2, --4, --5) override this via higher
   specificity. */
.l-cols-3,
.case-goals,
.case-grid-3,
.case-stats,
.rec-engine {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
}

/* ========================================
   RESET
   ======================================== */

*,
*::before,
*::after {
  margin: 0;
  padding: 0;
  box-sizing: border-box;
}

html {
  font-size: clamp(0.875rem, 0.831rem + 0.188vw, 1.125rem);
  scroll-behavior: smooth;
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
  -webkit-text-size-adjust: 100%;
  text-size-adjust: 100%;
}

body {
  font-family: var(--font-body);
  font-size: var(--text-body-base);
  font-weight: var(--weight-regular);
  line-height: var(--lh-body);
  color: var(--color-text-primary);
  background-color: var(--color-bg);
}

img,
picture,
video,
svg {
  display: block;
  max-width: 100%;
}

a {
  color: inherit;
  text-decoration: none;
}

ul,
ol {
  list-style: none;
}

button {
  font: inherit;
  cursor: pointer;
  border: none;
  background: none;
}

/* ========================================
   TYPOGRAPHY
   ======================================== */

h1, h2, h3, h4 {
  font-family: var(--font-heading);
  font-weight: var(--weight-regular);
  line-height: var(--lh-heading);
}

h1 {
  font-size: var(--text-h1);
  letter-spacing: var(--ls-heading);
}

h2 {
  font-size: var(--text-h2);
  letter-spacing: var(--ls-heading);
}

h3 {
  font-size: var(--text-h3);
  letter-spacing: var(--ls-heading-tight);
}

h4 {
  font-size: var(--text-h4);
}

/* ========================================
   LAYOUT
   ======================================== */

.container {
  width: 100%;
  padding-inline: var(--container-padding);
}

.grid {
  display: grid;
  grid-template-columns: repeat(var(--grid-columns), 1fr);
  gap: var(--grid-gutter);
}

section {
  min-height: var(--section-height);
  padding-block: var(--space-lg);
}

/* ========================================
   HEADER
   ======================================== */

.site-header {
  position: fixed;
  top: 0;
  left: 0;
  width: 100%;
  z-index: 100;
  background-color: var(--color-bg);
  transition: background-color 0.5s cubic-bezier(0.4, 0, 0.2, 1);
}

.site-header__nav {
  display: flex;
  align-items: center;
  justify-content: space-between;
  max-width: 90rem;        /* 1440px */
  margin-inline: auto;
  padding: 0.75rem clamp(1.5rem, 5.56vw, 5rem); /* 12px, 24px→80px */
  transition: max-width 0.5s cubic-bezier(0.4, 0, 0.2, 1),
              padding 0.5s cubic-bezier(0.4, 0, 0.2, 1),
              background-color 0.4s ease,
              border-radius 0.5s cubic-bezier(0.4, 0, 0.2, 1),
              margin-top 0.5s cubic-bezier(0.4, 0, 0.2, 1),
              box-shadow 0.4s ease,
              border-color 0.4s ease;
  border: 1px solid transparent;
}

.site-header__logo {
  display: flex;
  align-items: center;
  gap: 0.75rem;            /* 12px */
}

.site-header__logo img {
  width: 3.75rem;          /* 60px */
  height: 3.75rem;
  transition: width 0.5s cubic-bezier(0.4, 0, 0.2, 1),
              height 0.5s cubic-bezier(0.4, 0, 0.2, 1);
}

.site-header__name {
  font-family: var(--font-heading);
  font-size: 1.25rem;              /* 20px — fixed logo size */
  font-weight: var(--weight-bold);
  line-height: 1.3;
  white-space: nowrap;
  transition: opacity 0.3s ease, max-width 0.5s cubic-bezier(0.4, 0, 0.2, 1);
  overflow: hidden;
  max-width: 20rem;
}

.site-header__links {
  display: flex;
  align-items: center;
  gap: 1.5rem;             /* 24px */
  transition: gap 0.5s cubic-bezier(0.4, 0, 0.2, 1);
}

.nav-link {
  display: block;
  padding: 1rem;           /* 16px */
  font-family: var(--font-body);
  font-size: 1.125rem;             /* 18px — fixed nav size */
  font-weight: var(--weight-regular);
  line-height: 1.5;
  border-radius: 0.75rem;  /* 12px */
  transition: background-color 0.2s ease,
              padding 0.5s cubic-bezier(0.4, 0, 0.2, 1),
              font-size 0.5s cubic-bezier(0.4, 0, 0.2, 1);
}

.nav-link:hover {
  background-color: #f5f5f5;
}

/* ========================================
   SITE HEADER — DESKTOP SHORT VARIANT
   Floating pill centered at top with backdrop blur + semi-transparent bg.
   Applied by default on project/components pages via HTML class. On the
   home page, toggled by home.js when the hero exits the viewport.
   ======================================== */

.site-header--short {
  background-color: transparent;
  pointer-events: none;
}

.site-header--short .site-header__nav {
  max-width: 34rem;                    /* 544px — fits logo + 2 links + gap */
  padding: 0.5rem 0.875rem;
  margin-top: 0.875rem;
  background-color: rgba(255, 255, 255, 0.72);
  backdrop-filter: saturate(180%) blur(20px);
  -webkit-backdrop-filter: saturate(180%) blur(20px);
  border-radius: 999px;
  border-color: rgba(0, 0, 0, 0.06);
  box-shadow: 0 6px 24px rgba(0, 0, 0, 0.06);
  pointer-events: auto;
}

.site-header--short .site-header__logo img {
  width: 2rem;                         /* 32px */
  height: 2rem;
}

.site-header--short .site-header__name {
  opacity: 0;
  max-width: 0;
}

.site-header--short .site-header__links {
  gap: 0.25rem;
}

.site-header--short .nav-link {
  padding: 0.5rem 0.875rem;
  font-size: 0.9375rem;                /* 15px */
}

/* ========================================
   HERO
   ======================================== */

.hero {
  display: flex;
  align-items: center;
  min-height: 100svh;
  padding-block: 0;
}

.hero .container {
  padding-inline: clamp(1.5rem, 19.44vw, 17.5rem); /* 24px → 280px */
}

.hero__content {
  display: flex;
  flex-direction: column;
  gap: 0.625rem;             /* 10px between intro and h1 */
  padding-block-start: 5.25rem; /* 84px header height */
}

.hero__intro {
  font-family: var(--font-heading);
  font-size: clamp(2.5rem, 9.6vw, 8.625rem); /* 40px → 138px */
  font-weight: var(--weight-regular);
  line-height: 1.12;
  letter-spacing: -0.02em;
}

.hero h1 {
  font-size: clamp(1.5rem, 3.33vw, 3rem); /* 24px → 48px */
  letter-spacing: -0.01em;
}

.hero__role {
  display: inline;
}

/* ========================================
   SELECTED WORK
   ======================================== */

.work {
  display: flex;
  align-items: center;
  min-height: 100svh;
  padding-block: 0;
}

.work .container {
  display: flex;
  flex-direction: column;
  gap: 2rem;                  /* 32px */
  justify-content: center;
  padding-inline: clamp(1.5rem, 2.78vw, 2.5rem); /* 24px → 40px */
}

.work__grid {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 2rem;                  /* 32px */
  align-items: start;
}

/* Stagger effect from Figma — proportional to viewport height */
.work__grid .card:nth-child(2) {
  margin-top: 8svh;
}

.work__grid .card:nth-child(3) {
  margin-top: 16svh;
}

/* ========================================
   CARD
   ======================================== */

.card {
  display: flex;
  flex-direction: column;
  gap: 0.625rem;              /* 10px */
  cursor: pointer;
  color: inherit;
  text-decoration: none;
}

.card__image {
  width: 100%;
  aspect-ratio: 1;
  overflow: hidden;
  border-radius: 0.25rem;
}

.card__image img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  transition: transform 0.4s ease-out;
}

.card:hover .card__image img {
  transform: scale(1.03);
}

.card__title {
  font-family: var(--font-heading);
  font-size: clamp(1.25rem, 2.08vw, 1.875rem); /* 20px → 30px */
  font-weight: var(--weight-regular);
  line-height: 1.12;
  letter-spacing: -0.02em;
}

.card__desc {
  font-family: var(--font-body);
  font-size: clamp(0.625rem, 0.83vw, 0.75rem); /* 10px → 12px */
  font-weight: var(--weight-regular);
  line-height: 1.5;
  opacity: 0;
  transform: translateY(0.5rem);
  transition: opacity 0.3s ease-out, transform 0.3s ease-out;
}

.card:hover .card__desc {
  opacity: 1;
  transform: translateY(0);
}

/* ========================================
   TRANSITION
   ======================================== */

.transition-clone {
  pointer-events: none;
}

/* ========================================
   PROJECT VIEW
   ======================================== */

.project-view {
  position: fixed;
  inset: 0;
  z-index: 200;
  background-color: var(--color-bg);
  visibility: hidden;
  pointer-events: none;
  overflow-y: auto;
}

/* Standalone case pages: the same wrapper lives in normal document flow,
   no overlay, no fixed positioning. Reuses every .project-view__* selector
   + the [data-project="X"] palette scoping. */
.project-view--standalone {
  position: static;
  visibility: visible;
  pointer-events: auto;
  overflow-y: visible;
}

/* Cross-document View Transitions — browser morphs shared elements between
   the home and each case page. Each card image ↔ case hero image pair gets
   a unique view-transition-name. Degrades to normal navigation in browsers
   without support (Firefox, older Safari). */
@view-transition {
  navigation: auto;
}

.card[data-project="numma"] .card__image img,
.project-view[data-project="numma"] .project-view__image {
  view-transition-name: hero-numma;
}

.card[data-project="patrimonio"] .card__image img,
.project-view[data-project="patrimonio"] .project-view__image {
  view-transition-name: hero-patrimonio;
}

.card[data-project="moonbrew"] .card__image img,
.project-view[data-project="moonbrew"] .project-view__image {
  view-transition-name: hero-moonbrew;
}

.project-view.is-active {
  visibility: visible;
  pointer-events: auto;
}

.project-view__hero {
  position: relative;
  width: 100%;
  height: 100svh;
  overflow: hidden;
}

.project-view__image {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  object-fit: cover;
}

.project-view__overlay {
  position: absolute;
  inset: 0;
  display: flex;
  flex-direction: column;
  justify-content: center;
  padding-inline: clamp(1.5rem, 5.56vw, 5rem); /* same as header: 80px */
  background: rgba(0, 0, 0, 0.2);
  color: #fff;
}

.project-view__title {
  font-family: var(--font-heading);
  font-size: clamp(2.5rem, 5.56vw, 5rem); /* 40px → 80px */
  font-weight: var(--weight-regular);
  line-height: 1.12;
  letter-spacing: -0.02em;
  max-width: 45.6875rem;      /* 731px */
  color: inherit;
}

.project-view__meta {
  display: flex;
  align-items: flex-start;
  margin-top: 0;
}

.project-view__meta-col {
  display: flex;
  flex-direction: column;
  gap: 0.25rem;               /* 4px */
  padding: 0.5rem 1rem;       /* 8px 16px */
}

.project-view__meta-label {
  font-family: var(--font-body);
  font-size: 0.875rem;        /* 14px */
  font-weight: var(--weight-medium);
  line-height: 1.3;
}

.project-view__meta-value {
  font-family: var(--font-body);
  font-size: 0.75rem;         /* 12px */
  font-weight: var(--weight-regular);
  line-height: 1.5;
}

.project-view__body {
  padding-block: 0;
}

.project-view__back {
  display: inline-block;
  font-family: var(--font-body);
  font-size: var(--text-body-base);
  margin: 2rem clamp(1.5rem, 5.56vw, 5rem) 0;
  padding: 0.5rem 0;
  color: var(--color-text-primary);
  cursor: pointer;
  background: none;
  border: none;
  text-decoration: none;
}

.project-view__back:hover {
  opacity: 0.6;
}

/* ========================================
   CASE STUDY — SECTION
   ======================================== */

.case-section {
  display: flex;
  flex-direction: column;
  gap: var(--space-sm);                /* 32px — related steps */
  max-width: 45.75rem;                 /* 732px */
  margin-inline: auto;
  padding-inline: clamp(1.5rem, 5.56vw, 5rem);
}

.case-section--tight {
  gap: var(--space-xs);                /* 16px — tight related */
}

.case-section__heading {
  font-family: var(--font-heading);
  font-size: var(--text-h2);           /* 40px */
  font-weight: var(--weight-regular);
  line-height: var(--lh-heading);
  letter-spacing: var(--ls-heading);
}

.case-section p {
  font-family: var(--font-body);
  font-size: var(--text-body-lg);      /* 21px */
  font-weight: var(--weight-regular);
  line-height: var(--lh-body);
  letter-spacing: var(--ls-body);
}

.case-section strong {
  font-weight: var(--weight-bold);
}

/* ========================================
   CASE STUDY — EXPERIMENT SECTION
   ======================================== */

/* S01 — case-section-full (SECTION tier, organism wrapper).
   Generic 100svh narrative beat. Wraps N walls (typically a .case-split
   label + a visual block) for a "first screen" cadence. Renamed
   2026-04-15 from .case-experiment which had a NUMMA-semantic name.
   Replaces the former .case-ads-section (deleted, was a literal duplicate). */
.case-section-full {
  min-height: 100svh;
  display: flex;
  flex-direction: column;
  justify-content: center;
  gap: var(--space-sm);                /* 32px between text and images */
  padding-block: var(--space-md);      /* 64px sub-section wrap */
}

/* Inside a 100svh wrapper, the inner .case-split drops its default 96px
   vertical padding (would double-pad the frame). Inherited from the old
   .case-ads-section rule so the ads block stays correctly proportioned. */
.case-section-full .case-split {
  padding-block: 0;
}

.case-landings {
  display: grid;
  grid-auto-flow: column;
  grid-auto-columns: 1fr;
  gap: var(--gap-md);                  /* 32px standard split */
  width: 100%;
  padding-inline: var(--case-inline);  /* 40px outer margin */
}

/* Proportioned media slot — same pattern as .case-decision__visual.
   Fixed 1920:1048 ratio (≈16:9) + scoped palette bg + object-fit:contain +
   padding. Any uploaded landing screenshot is centered within the slot,
   letterbox gaps filled with --case-surface seamlessly. */
.case-landings img {
  width: 100%;
  height: auto;
  aspect-ratio: 1920 / 1048;
  object-fit: contain;
  background-color: var(--case-surface, #F4F4F5);
  border-radius: 1rem;
  padding: 1.5rem;
}

/* ========================================
   CASE STUDY — NUMMA PALETTE (monochromatic blue)
   ======================================== */

.project-view[data-project="numma"] {
  --case-surface: #E0F2FE;
  --case-surface-strong: #BAE6FD;
  --case-primary: #0EA5E9;
  --case-primary-dark: #0369A1;
  --case-text: #0C4A6E;
  --case-text-muted: #334155;          /* slate — AAA on surface + white */
  --case-border: rgba(14, 165, 233, 0.15);
  --case-gradient: linear-gradient(135deg, #E0F2FE 0%, #0EA5E9 100%);
}

/* ========================================
   CASE STUDY — MOONBREW PALETTE (cosmic / lunar)
   Moon black (#0A0A1A) + Night blue (#2D3A80) + Cream (#E3CCB8).
   Cream soft (#F5EAE0) is a lighter derivative for large surface backgrounds
   so the warm brand tone doesn't overwhelm body text blocks.
   ======================================== */

.project-view[data-project="moonbrew"] {
  --case-surface: #F5EAE0;             /* cream soft — large surfaces */
  --case-surface-strong: #E3CCB8;      /* cream — stronger accent cards */
  --case-primary: #2D3A80;             /* night blue */
  --case-primary-dark: #2D3A80;        /* same — no separate dark variant needed */
  --case-text: #0A0A1A;                /* moon black — deepest accent, heavy bgs */
  --case-text-muted: #334155;          /* slate — AAA on both cream and white */
  --case-border: rgba(10, 10, 26, 0.12);
  --case-gradient: linear-gradient(135deg, #F5EAE0 0%, #2D3A80 100%);
}

/* ========================================
   CASE STUDY — PATRIMONIO HOY PALETTE (placeholder — neutral gray)
   Provisional scoping so the components page preview works. Refine once the
   actual Patrimonio case study starts.
   ======================================== */

.project-view[data-project="patrimonio"] {
  --case-surface: #D5D6F5;
  --case-surface-strong: #E4E4E7;
  --case-primary: #52525B;
  --case-primary-dark: #27272A;
  --case-text: #18181B;
  --case-text-muted: #52525B;
  --case-border: rgba(24, 24, 27, 0.12);
  --case-gradient: linear-gradient(135deg, #F4F4F5 0%, #52525B 100%);
}

/* ========================================
   CASE BODY (per-project content switching)
   Each case study's body lives in <section class="case-body" data-case="X">.
   Only the case-body matching the currently-open project is displayed.
   The .project-view__back and .site-footer sit outside these wrappers so
   they're always visible regardless of which case study is showing.
   ======================================== */

.case-body {
  display: none;
}

.project-view[data-project="numma"] .case-body[data-case="numma"],
.project-view[data-project="moonbrew"] .case-body[data-case="moonbrew"],
.project-view[data-project="patrimonio"] .case-body[data-case="patrimonio"] {
  display: block;
}

/* ========================================
   CASE QUESTIONS (editorial beat — 3 big framing questions in sequence)
   Used in Moonbrew to render the "Three design problems at the center"
   block. Drops the dark overlay of the original Figma and renders the
   questions as clean heading-h2 pull-items on white, Mirego-inspired.
   ======================================== */

.case-questions {
  padding-inline: var(--case-inline-text);
  padding-block: var(--space-lg);      /* 96px — major section break */
  display: flex;
  flex-direction: column;
  gap: var(--space-md);                /* 64px between questions */
}

/* .case-questions__eyebrow — typography from BRICK .t-caption,
   with a muted color override. */
.case-questions__eyebrow {
  color: var(--case-text-muted, #334155);
  margin-bottom: var(--space-sm);      /* 32px extra breathing room before first question */
}

.case-questions__item {
  display: grid;
  grid-template-columns: 3.5rem 1fr;   /* 56px number gutter + content */
  gap: 1rem;
  font-family: var(--font-heading);
  font-size: var(--text-h2);           /* 40px */
  font-weight: var(--weight-regular);  /* 400 — editorial */
  line-height: var(--lh-heading);      /* 1.12 */
  letter-spacing: -0.02em;
  color: var(--color-text-primary);
  margin: 0;
}

/* .case-questions__num — typography from BRICK .t-caption, with muted
   color + tighter line-height for baseline alignment with the h2. */
.case-questions__num {
  line-height: 1.6;                    /* align numerically with first h2 line */
  color: var(--case-text-muted, #334155);
  padding-top: 0.75rem;                /* optical align to the heading baseline */
}

/* ========================================
   CASE STUDY — LAYOUT PATTERNS (Mirego-inspired)
   ======================================== */

/* Shared horizontal margins for case study blocks */
:root {
  --case-inline: 2.5rem;               /* 40px — images, full-width blocks */
  --case-inline-text: clamp(1.5rem, 19.44vw, 17.5rem); /* 24 → 280px — text blocks */
}

/* 33/66 asymmetric split — intro left, body right */
.case-split {
  display: grid;
  grid-template-columns: 1fr 2fr;
  gap: var(--gap-md);                  /* 32px standard split */
  width: 100%;
  padding-inline: var(--case-inline-text);
  padding-block: var(--space-lg);      /* 96px section break */
}

/* .case-split__intro — typography from BRICK .t-caption.
   This selector intentionally has no rules: the 15px bold uppercase style
   is provided by the brick. Layout comes from the .case-split grid. */

.case-split--continuation {
  padding-block: var(--space-xs);      /* 16px tight follow-up */
}

.case-split__body {
  display: flex;
  flex-direction: column;
  gap: var(--space-xs);                /* 16px related paragraphs */
  font-family: var(--font-body);
  font-size: var(--text-body-lg);      /* 21px */
  line-height: var(--lh-body);
  letter-spacing: var(--ls-body);
}

.case-split__body h3 {
  font-family: var(--font-heading);
  font-size: var(--text-h3);           /* 32px */
  font-weight: var(--weight-regular);
  line-height: var(--lh-heading);
  letter-spacing: var(--ls-heading-tight);
  margin-top: 0.5rem;
}

.case-split__body h3:first-child {
  margin-top: 0;
}

.case-split__body em {
  font-style: italic;
}

/* ========================================
   CASE STUDY — RESEARCH SECTION (storytelling stack)
   ======================================== */

.research-section {
  display: flex;
  flex-direction: column;
  gap: var(--space-md);                /* 64px between panels (sub-sections) */
  padding-inline: var(--case-inline-text);
  padding-block: var(--space-lg);      /* 96px section break */
}

.research-section__header {
  display: flex;
  flex-direction: column;
  gap: 0.75rem;                        /* 12px eyebrow→title (intra-component) */
  padding-bottom: var(--space-sm);     /* 32px below header */
  border-bottom: 1px solid var(--case-border, rgba(0, 0, 0, 0.1));
}

/* .research-section__eyebrow — typography from BRICK .t-caption. */

.research-section__title {
  font-family: var(--font-heading);
  font-size: var(--text-h3);           /* 32px */
  font-weight: var(--weight-regular);
  line-height: var(--lh-heading);
  letter-spacing: var(--ls-heading-tight);
  color: var(--color-text-primary);
  max-width: 45rem;
}

/* .research-panel — grid from BRICK .l-cols-2. */
.research-panel {
  gap: var(--gap-lg);                  /* 48px spacious 2-col */
  align-items: start;
  padding-bottom: var(--space-md);     /* 64px sub-section break */
  border-bottom: 1px solid var(--case-border, rgba(0, 0, 0, 0.1));
}

.research-panel:last-child {
  padding-bottom: 0;
  border-bottom: none;
}

.research-panel__voice {
  display: flex;
  flex-direction: column;
  gap: var(--space-xs);                /* 16px tight voice stack */
}

/* .research-panel__quote — typography from BRICK .t-quote. */

.research-panel__attribution {
  font-family: var(--font-body);
  font-size: var(--text-body-sm);      /* 15px */
  font-weight: var(--weight-medium);
  line-height: var(--lh-body);
  color: var(--color-text-primary);
}

.research-panel__context {
  font-family: var(--font-body);
  font-size: var(--text-body-sm);      /* 15px */
  font-weight: var(--weight-regular);
  line-height: var(--lh-body);
  color: var(--color-text-primary);
  margin-top: 0.5rem;
}

.research-panel__insight {
  display: flex;
  flex-direction: column;
  gap: var(--space-sm);                /* 32px between finding and decision */
}

.research-panel__finding,
.research-panel__decision {
  display: flex;
  flex-direction: column;
}

/* .research-panel__label — typography from BRICK .t-caption. */
.research-panel__label {
  margin-bottom: 0.5rem;
}

.research-panel__finding p {
  font-family: var(--font-body);
  font-size: var(--text-body-base);    /* 17px */
  font-weight: var(--weight-regular);
  line-height: var(--lh-body);
  color: var(--color-text-primary);
}

/* .research-panel__decision-title — typography from BRICK .t-caption. */
.research-panel__decision-title {
  margin-bottom: 0.5rem;
}

.research-panel__decision p {
  font-family: var(--font-body);
  font-size: var(--text-body-base);    /* 17px */
  font-weight: var(--weight-regular);
  line-height: var(--lh-body);
  color: var(--color-text-primary);
}

/* 3 equal columns (images, screens, features) */
/* .case-grid-3 — grid from BRICK .l-cols-3. */
.case-grid-3 {
  gap: var(--gap-md);                  /* 32px standard grid */
  width: 100%;
  padding-inline: var(--case-inline);
  padding-block: var(--space-sm);      /* 32px block rhythm */
}

/* Proportioned media slot — same pattern as .case-decision__visual. */
.case-grid-3 img {
  width: 100%;
  height: auto;
  aspect-ratio: 1920 / 1048;
  object-fit: contain;
  background-color: var(--case-surface, #F4F4F5);
  border-radius: 0.75rem;
  padding: 1rem;
  display: block;
}

/* ========================================
   CASE STUDY — DECISION (text + chat mockup, per key decision)
   ======================================== */

.case-decision {
  display: grid;
  grid-template-columns: 2fr 3fr;      /* 40/60 text/visual — image dominates, text still readable */
  align-items: center;
  gap: var(--gap-lg);                  /* 48px spacious 2-col */
  width: 100%;
  padding-inline: var(--case-inline-text);
  padding-block: var(--space-md);      /* 64px sub-section */
}

.case-decision__text {
  display: flex;
  flex-direction: column;
  gap: var(--space-xs);
  font-family: var(--font-body);
  font-size: var(--text-body-lg);      /* 21px */
  line-height: var(--lh-body);
  letter-spacing: var(--ls-body);
}

.case-decision__text h3 {
  font-family: var(--font-heading);
  font-size: var(--text-h3);           /* 32px */
  font-weight: var(--weight-regular);
  line-height: var(--lh-heading);
  letter-spacing: var(--ls-heading-tight);
  margin-bottom: var(--space-xs);
}

.case-decision__text em {
  font-style: italic;
}

.case-decision__text strong {
  font-weight: var(--weight-bold);
}

.case-decision__visual {
  display: flex;
  justify-content: center;
  align-items: center;
}

/* Fixed 4:3 slot with scoped palette background.
   Applies ONLY when the visual contains an <img> or <video> (not a .chat —
   chats are structured content with their own sizing). Any uploaded media
   is centered with object-fit:contain, so the slot proportion is always
   respected regardless of the source asset ratio. The palette bg fills any
   letterboxing seamlessly, so mismatched portrait/landscape assets still
   feel like a solid, consistent block. */
.case-decision__visual:has(> img),
.case-decision__visual:has(> video) {
  aspect-ratio: 4 / 3;
  background-color: var(--case-surface, #F4F4F5);
  border-radius: 1rem;
  padding: 1.5rem;
  overflow: hidden;
}

.case-decision__visual > img,
.case-decision__visual > video {
  width: 100%;
  height: 100%;
  max-width: none;
  object-fit: contain;
  display: block;
  border-radius: 0.5rem;
}

.case-decision__visual--portrait.case-decision__visual:has(> img),
.case-decision__visual--portrait.case-decision__visual:has(> video) {
  aspect-ratio: 9 / 16;
  max-height: 80svh;
}

/* .case-decision--full is intentionally wide and single-column — its visual
   breaks out of the text margin and must NOT be constrained to the 4:3 slot.
   Reset the slot styles for the full variant. */
.case-decision--full .case-decision__visual:has(> img),
.case-decision--full .case-decision__visual:has(> video) {
  aspect-ratio: auto;
  background-color: transparent;
  padding: 0;
  overflow: visible;
}

.case-decision--full .case-decision__visual > img,
.case-decision--full .case-decision__visual > video {
  width: 100%;
  height: auto;
  object-fit: cover;
  border-radius: 1rem;
}

/* Reverse modifier — flips to visual left / text right (3fr 2fr = 60/40).
   Used for editorial rhythm when stacking multiple .case-decision blocks. */
.case-decision--reverse {
  grid-template-columns: 3fr 2fr;
}

.case-decision--reverse .case-decision__visual {
  grid-column: 1;
  grid-row: 1;
}

.case-decision--reverse .case-decision__text {
  grid-column: 2;
  grid-row: 1;
}

/* Full modifier — single column, text/visual/text stacked vertically.
   Used when the "visual" is a diagram that needs full horizontal breathing
   room and the decision text wraps around it top and bottom. */
.case-decision--full {
  grid-template-columns: 1fr;
  align-items: stretch;
  gap: var(--space-md);
}

.case-decision--full .case-decision__text {
  max-width: 45rem;
  width: 100%;
  margin-inline: auto;
}

/* ========================================
   RECOMMENDATION ENGINE (Moonbrew — equation-style card chain)
   Vertical stack of 4 dark cards with + / = operators between them:
   Elements + Phases + Matrix = Algorithm. The cards use --case-text as
   their background, so they inherit Moonbrew's Moon-black #0A0A1A (or
   whichever parent case palette is active).
   ======================================== */

/* .rec-engine — grid from BRICK .l-cols-3. */
.rec-engine {
  width: auto;
  max-width: none;
  /* escape the narrow text column (280px) to align with --case-inline (40px) */
  margin-inline: calc(var(--case-inline) - var(--case-inline-text));
  gap: var(--gap-md);            /* 32px between cards */
  align-items: stretch;
  font-family: var(--font-body);
}

.rec-engine__card {
  background-color: var(--case-surface);            /* cream in Moonbrew (#F5EAE0) */
  color: var(--case-text);                         /* Moon black text */
  padding: 1.5rem;                      /* 24px all around */
  border-radius: 1rem;                  /* 16px */
  display: flex;
  flex-direction: column;
  gap: 1.25rem;                         /* 20px between image and caption */
  text-align: center;
}

.rec-engine__card img {
  width: 100%;
  aspect-ratio: 1 / 1;
  object-fit: contain;
  border-radius: 0.625rem;              /* 10px */
  display: block;
  background-color: var(--case-surface);            /* unified with other visuals */
}

/* Output card — the "= Algorithm" result stands out with a cream ring */
.rec-engine__card--output {
  border: 2px solid var(--case-surface-strong);
}

.rec-engine__card-title {
  font-family: var(--font-body);
  font-size: 1.0625rem;                 /* 17px — caption size */
  font-weight: 500;
  line-height: 1.35;
  margin: 0;
  color: var(--case-text);              /* Moon black — 12.5:1 on cream */
}

/* ========================================
   CHAT (KEY DECISIONS — minimal bubble component)
   No phone frame, no WhatsApp chrome. Just bubbles in two NUMMA blue tones,
   left/right aligned, with a calm fade-in animation handled in main.js.
   ======================================== */

.chat {
  width: 100%;
  max-width: 34rem;                    /* 544px */
  display: flex;
  flex-direction: column;
  gap: 0.625rem;                       /* 10px between bubbles */
  padding: 1.75rem;                    /* 28px — breathing room inside the deep-blue card */
  background-color: var(--case-text);  /* #0C4A6E — deep blue container */
  border-radius: 1.25rem;              /* 20px — soft card corners */
}

.chat-bubble {
  max-width: 88%;
  padding: 0.875rem 1.125rem;          /* 14px 18px — comfortable, not chat-app-tight */
  border-radius: 1.125rem;             /* 18px — soft, calm */
  font-family: var(--font-body);
  font-size: 1rem;                     /* 16px */
  font-weight: 400;
  line-height: 1.45;
  color: var(--color-text-primary);    /* #050307 — AAA on both surface tones */
  word-wrap: break-word;
}

.chat-bubble p {
  margin: 0;
}

.chat-bubble strong {
  font-weight: 600;
}

.chat-bubble--out {
  align-self: flex-end;
  background-color: #FFFFFF;                      /* user bubbles are white */
  border-bottom-right-radius: 0.375rem;           /* subtle "tail" hint without a pseudo */
}

.chat-bubble--in {
  align-self: flex-start;
  background-color: var(--case-surface-strong);   /* #BAE6FD — stronger blue (Numma) */
  border-bottom-left-radius: 0.375rem;
}

/* ========================================
   SERVICE BLUEPRINT (NUMMA — closes THE AI SERVICE ARCHITECTURE section)
   Vertical-flip layout: 5 phases stacked vertically, each phase shows its
   3 lanes (Customer / AI Frontstage / Backstage) side-by-side. Narrow
   centered container — no horizontal scroll. White + two NUMMA blues carry
   the frontstage/backstage contrast; deep-blue Backstage lanes are the
   heaviest visual beats, especially the one marked "Heavy · human ops".
   ======================================== */

[data-project="numma"] .service-blueprint-wrap {
  max-width: 48rem;                  /* 768px — narrower than full-width, wider than text col */
  margin-inline: auto;
  margin-block: var(--space-md);
  padding-inline: 1.5rem;            /* 24px safety margins on narrow viewports */
  display: flex;
  flex-direction: column;
  gap: var(--space-md);              /* 64px between phases — each phase is its own beat */
  font-family: var(--font-body);
}

[data-project="numma"] .service-blueprint__phase-group {
  display: flex;
  flex-direction: column;
  gap: 1rem;                         /* 16px between header and lanes grid */
}

/* --- Phase header (above each lanes grid) --- */
[data-project="numma"] .service-blueprint__phase-header {
  display: flex;
  flex-direction: column;
  gap: 0.25rem;
}

[data-project="numma"] .service-blueprint__phase-num {
  font-size: 0.75rem;                /* 12px */
  font-weight: 700;
  letter-spacing: 0.4px;
  text-transform: uppercase;
  color: var(--case-text-muted);
}

[data-project="numma"] .service-blueprint__phase-label {
  font-family: var(--font-heading);
  font-size: 1.5rem;                 /* 24px — beat-level heading */
  font-weight: 400;                  /* editorial weight */
  line-height: 1.15;
  letter-spacing: -0.01em;
  color: var(--color-text-primary);
}

[data-project="numma"] .service-blueprint__phase-sub {
  font-size: 0.8125rem;              /* 13px */
  color: var(--case-text-muted);
  line-height: 1.3;
  font-style: italic;
}

/* --- Lanes grid (3 columns, one row per phase) --- */
[data-project="numma"] .service-blueprint__lanes {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 1px;
  background-color: var(--case-border);
  border: 1px solid var(--case-border);
  border-radius: 0.625rem;           /* 10px — soft editorial card */
  overflow: hidden;
}

[data-project="numma"] .service-blueprint__lane {
  background-color: #FFFFFF;
  padding: 1rem 0.9375rem;
  display: flex;
  flex-direction: column;
  gap: 0.625rem;
  min-height: 100%;
}

[data-project="numma"] .service-blueprint__lane-label {
  font-size: 0.6875rem;              /* 11px */
  font-weight: 700;
  letter-spacing: 0.4px;
  text-transform: uppercase;
  color: var(--case-text-muted);
}

[data-project="numma"] .service-blueprint__lane ul {
  list-style: none;
  padding: 0;
  margin: 0;
  display: flex;
  flex-direction: column;
  gap: 0.4rem;
}

[data-project="numma"] .service-blueprint__lane li {
  font-size: 0.8125rem;              /* 13px */
  line-height: 1.4;
  color: var(--color-text-primary);
  padding-left: 0.75rem;
  position: relative;
}

[data-project="numma"] .service-blueprint__lane li::before {
  content: '';
  position: absolute;
  left: 0;
  top: 0.55rem;
  width: 4px;
  height: 4px;
  border-radius: 50%;
  background-color: var(--case-text-muted);
}

/* --- AI Frontstage lane (light blue surface) --- */
[data-project="numma"] .service-blueprint__lane--frontstage {
  background-color: var(--case-surface);   /* #E0F2FE */
}

[data-project="numma"] .service-blueprint__lane--frontstage .service-blueprint__lane-label {
  color: var(--case-text);           /* #0C4A6E */
}

[data-project="numma"] .service-blueprint__lane--frontstage li::before {
  background-color: var(--case-text);
}

/* --- Backstage lane (deep-blue, inverted) --- */
[data-project="numma"] .service-blueprint__lane--backstage {
  background-color: var(--case-text);      /* #0C4A6E */
}

[data-project="numma"] .service-blueprint__lane--backstage .service-blueprint__lane-label {
  color: var(--case-surface-strong);       /* #BAE6FD */
}

[data-project="numma"] .service-blueprint__lane--backstage li {
  color: #FFFFFF;
}

[data-project="numma"] .service-blueprint__lane--backstage li::before {
  background-color: var(--case-surface-strong);
}

/* --- HEAVY marker (inside the CSD Onboarding × Backstage lane) --- */
[data-project="numma"] .service-blueprint__marker {
  display: inline-flex;
  align-self: flex-start;
  font-size: 0.625rem;               /* 10px */
  font-weight: 700;
  letter-spacing: 0.5px;
  text-transform: uppercase;
  color: var(--case-text);
  background-color: var(--case-surface-strong);
  padding: 0.25rem 0.5rem;
  border-radius: 0.25rem;
}

/* ========================================
   CASE STUDY — ADS SECTION (100svh wrapper + paired cards)
   ======================================== */

/* .case-ads-section DELETED 2026-04-15 — was a literal duplicate of
   .case-experiment (now .case-section-full). Use S01 .case-section-full
   instead. The `.case-section-full .case-split { padding-block: 0 }` rule
   above preserves the ads-block's correct proportions. */

.case-ads {
  display: flex;
  justify-content: center;
  gap: var(--gap-md);                  /* 32px standard split */
  width: 100%;
  padding-inline: var(--case-inline);  /* 40px outer margin */
  flex: 1 1 0;
  min-height: 0;                       /* allow flex shrink */
}

/* Proportioned ad card — fixed 4:5 portrait ratio (Instagram post). Card
   has the palette bg + padding built in; inner image is contained. Same
   philosophy as .case-decision__visual. */
.case-ads__card {
  display: flex;
  align-items: center;
  justify-content: center;
  aspect-ratio: 4 / 5;
  padding: 2rem;                       /* 32px */
  background-color: var(--case-surface, #E0F2FE);
  border-radius: 1.5rem;
  box-sizing: border-box;
}

.case-ads__card img {
  width: 100%;
  height: 100%;
  object-fit: contain;
  display: block;
  border-radius: 0.75rem;
}

/* Full-width image with rounded corners */
.case-image-full {
  width: 100%;
  padding-inline: var(--case-inline);
  margin-block: 3rem;                  /* spacing between sections */
}

/* Proportioned media slot — same pattern as .case-decision__visual. */
.case-image-full img {
  width: 100%;
  height: auto;
  max-height: 80svh;
  aspect-ratio: 1920 / 1048;
  object-fit: contain;
  background-color: var(--case-surface, #F4F4F5);
  border-radius: 1rem;
  padding: 1.5rem;
  display: block;
}

/* Phone strip — 4×2 grid of phone screens with captions */
.case-phone-grid {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: var(--gap-md);                   /* 32px between phones */
  padding-inline: var(--case-inline-text); /* narrow 280px */
  padding-block: var(--space-md);       /* 64px sub-section */
}

.case-phone-grid__item {
  margin: 0;
  display: flex;
  flex-direction: column;
  gap: 0.75rem;                         /* 12px image → caption */
}

.case-phone-grid__item img {
  width: 100%;
  aspect-ratio: 9 / 19.5;
  object-fit: cover;
  border-radius: 1.5rem;                /* 24px phone-ish */
  display: block;
  background-color: var(--case-surface);
  border: 1px solid var(--case-border);
}

.case-phone-grid__caption {
  font-family: var(--font-body);
  font-size: 13px;
  font-weight: 500;
  line-height: 1.3;
  color: var(--color-text-primary);
  text-align: center;
  margin: 0;
}

/* 3-col stats with oversized numbers */
/* .case-stats — grid from BRICK .l-cols-3 (default). Modifiers --2, --4,
   --5 override grid-template-columns via higher specificity. */
.case-stats {
  gap: var(--gap-md);                  /* 32px standard grid */
  width: 100%;
  padding-inline: var(--case-inline);
  padding-block: var(--space-lg);      /* 96px section break */
}

/* Variants for 2, 4 (2×2), 5 cell counts. Default is 3-col. */
.case-stats.case-stats--2 {
  grid-template-columns: repeat(2, 1fr);
}
.case-stats.case-stats--4 {
  grid-template-columns: repeat(2, 1fr);                /* 2×2 on desktop */
}
.case-stats.case-stats--5 {
  grid-template-columns: repeat(5, 1fr);
  gap: var(--gap-md);
}
.case-stats.case-stats--5 .case-stats__number {
  font-size: clamp(2rem, 4.5vw, 4rem);                  /* shrink to fit 5 cells */
}

.case-stats__item {
  display: flex;
  flex-direction: column;
  gap: 0.75rem;
}

/* .case-stats__number — typography from BRICK .t-number-xl. */

.case-stats__label {
  font-family: var(--font-body);
  font-size: var(--text-body-lg);
  line-height: var(--lh-body-lg);
}

/* ========================================
   FOOTER
   ======================================== */

.site-footer {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 2rem;
  padding: 1.25rem clamp(1.5rem, 5.56vw, 5rem); /* 20px, 24→80px */
  border-top: 1px solid rgba(0, 0, 0, 0.15);
}

.site-footer__text {
  display: flex;
  flex-direction: column;
}

.site-footer__tagline {
  font-family: var(--font-heading);
  font-size: 1.25rem;                  /* 20px */
  font-weight: var(--weight-regular);
  line-height: 1.3;
  color: #4B5563;                      /* slate-600 — AAA on white */
}

.site-footer__email {
  font-family: var(--font-body);
  font-size: 0.9375rem;                /* 15px */
  font-weight: var(--weight-bold);
  line-height: var(--lh-body);
  color: #4B5563;
  transition: color 0.2s ease;
}

.site-footer__email:hover {
  color: var(--color-text-primary);
}

.site-footer__social {
  display: flex;
  align-items: center;
  gap: 1.5rem;                         /* 24px */
}

.site-footer__icon {
  display: block;
  width: 1.5rem;                       /* 24px */
  height: 1.5rem;
  color: var(--color-text-primary);
  opacity: 0.6;
  transition: opacity 0.2s ease;
}

.site-footer__icon:hover {
  opacity: 1;
}

.site-footer__icon svg {
  width: 100%;
  height: 100%;
}

/* ========================================
   RESPONSIVE — TABLET (≤768px)
   ======================================== */

@media (max-width: 768px) {
  /* Spacing + margins scale down */
  :root {
    --space-md: 2.5rem;          /* 64 → 40px */
    --space-lg: 3.5rem;          /* 96 → 56px */
    --space-xl: 4rem;            /* 128 → 64px */
    --gap-lg: 2rem;              /* 48 → 32px */
  }

  .project-view__body {
    --case-inline: 1rem;                  /* 40 → 16px */
    --case-inline-text: 1rem;             /* 280 → 16px */
  }

  /* Header — always short on tablet/mobile */
  .site-header {
    background-color: transparent;
    pointer-events: none;
  }

  .site-header .site-header__nav {
    max-width: 92vw;
    padding: 0.5rem 0.875rem;
    margin-top: 0.875rem;
    background-color: rgba(255, 255, 255, 0.72);
    backdrop-filter: saturate(180%) blur(20px);
    -webkit-backdrop-filter: saturate(180%) blur(20px);
    border-radius: 999px;
    border-color: rgba(0, 0, 0, 0.06);
    box-shadow: 0 6px 24px rgba(0, 0, 0, 0.06);
    pointer-events: auto;
  }

  .site-header .site-header__logo img {
    width: 2rem;
    height: 2rem;
  }

  .site-header .site-header__name {
    opacity: 0;
    max-width: 0;
  }

  .site-header .site-header__links {
    gap: 0.25rem;
  }

  .site-header .nav-link {
    padding: 0.5rem 0.875rem;
    font-size: 0.9375rem;
  }

  /* Hero — reduce fixed top padding */
  .hero__content {
    padding-block-start: 3rem;
  }

  /* Work grid — single column */
  .work__grid {
    grid-template-columns: 1fr;
    gap: var(--gap-md);
  }

  .work__grid .card:nth-child(2) { margin-top: 0; }
  .work__grid .card:nth-child(3) { margin-top: 0; }

  /* Case split — stack 33/66 to single column */
  .case-split {
    grid-template-columns: 1fr;
    gap: var(--space-xs);
  }

  /* Case decision — stack text + visual */
  .case-decision {
    grid-template-columns: 1fr;
    gap: var(--gap-md);
  }

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

  .case-decision--reverse .case-decision__visual { grid-column: auto; grid-row: auto; }
  .case-decision--reverse .case-decision__text { grid-column: auto; grid-row: auto; }

  /* 3-col grids — single column */
  .l-cols-3,
  .case-goals,
  .case-grid-3,
  .case-stats,
  .rec-engine {
    grid-template-columns: 1fr;
  }

  /* 2-col grids — single column */
  .l-cols-2,
  .research-panel,
  .case-two-col {
    grid-template-columns: 1fr;
  }

  /* Case landings — stack to single column */
  .case-landings {
    grid-auto-flow: row;
    grid-auto-columns: auto;
  }

  /* Phone grid — 2 columns instead of 4 */
  .case-phone-grid {
    grid-template-columns: repeat(2, 1fr);
    padding-inline: var(--case-inline);
  }

  /* Case questions — smaller text + tighter gutter */
  .case-questions__item {
    grid-template-columns: 2.5rem 1fr;
    font-size: var(--text-h3);           /* 40 → 32px */
  }

  /* Rec engine — undo breakout margin */
  .rec-engine {
    margin-inline: 0;
  }

  /* Service blueprint lanes — stack */
  .service-blueprint__lanes {
    grid-template-columns: 1fr;
  }

  /* Stats variants */
  .case-stats.case-stats--4,
  .case-stats.case-stats--5 {
    grid-template-columns: repeat(2, 1fr);
  }

  /* Project view meta — wrap */
  .project-view__meta {
    flex-wrap: wrap;
    gap: 0.5rem;
  }

  /* Site footer — stack */
  .site-footer {
    flex-direction: column;
    gap: 1.5rem;
    align-items: flex-start;
  }
}

/* ========================================
   RESPONSIVE — MOBILE (≤480px)
   ======================================== */

@media (max-width: 480px) {
  :root {
    --space-lg: 2.5rem;          /* 56 → 40px */
    --space-md: 2rem;            /* 40 → 32px */
  }

  /* Header — smaller elements */
  .site-header__logo img {
    width: 2.25rem;
    height: 2.25rem;
  }

  .nav-link {
    font-size: 0.875rem;
  }

  .site-header__links {
    gap: 0.75rem;
  }

  .site-header--short .site-header__nav {
    padding: 0.5rem 0.75rem;
  }

  /* Hero title smaller */
  .project-view__title {
    font-size: clamp(1.75rem, 8vw, 2.5rem);
  }

  /* Body text — slightly smaller */
  .case-split__body,
  .case-decision__text p {
    font-size: 1.0625rem;        /* keep 17px, already readable */
  }

  /* Phone grid — single column */
  .case-phone-grid {
    grid-template-columns: 1fr;
  }

  /* Case image full — less padding */
  .case-image-full {
    padding-inline: 1rem;
  }

  /* Stats 5-col → single */
  .case-stats.case-stats--5 {
    grid-template-columns: 1fr;
  }

  /* Case decision full — text narrower */
  .case-decision--full .case-decision__text {
    max-width: 100%;
  }
}

/* ========================================
   PRINT
   ======================================== */

@media print {
  html {
    font-size: 12pt;
  }
}

/* ========================================
   B20 — CASE QUOTE (editorial testimonial, centered)
   ======================================== */

.case-quote {
  display: flex;
  flex-direction: column;
  gap: var(--space-xs);                /* 16px between quote and attribution */
  max-width: 56rem;                    /* 896px */
  margin: 0 auto;
  padding-inline: var(--case-inline-text);
  padding-block: var(--space-lg);      /* 96px section break */
}

/* .case-quote__body — typography from BRICK .t-quote. */

.case-quote__caption {
  display: flex;
  flex-direction: column;
  gap: 0.25rem;
  margin: 0;
}

.case-quote__attribution {
  font-family: var(--font-body);
  font-size: var(--text-body-base);
  font-weight: var(--weight-medium);
  color: var(--color-text-primary);
  margin: 0;
}

.case-quote__role {
  font-family: var(--font-body);
  font-size: var(--text-body-sm);
  color: #52525B;                      /* slate muted, AAA on white */
  margin: 0;
}

/* ========================================
   B21 — NEXT PROJECT TEASER (closing CTA card)
   ======================================== */

.next-project {
  display: block;
  margin-inline: var(--case-inline);
  margin-block: var(--space-lg);
  padding: var(--space-sm);            /* 32px inner */
  background-color: var(--case-surface, #F4F4F5);
  border-radius: 1.25rem;
  color: inherit;
  text-decoration: none;
  transition: transform 0.4s ease-out, box-shadow 0.4s ease-out;
}

.next-project:hover {
  transform: translateY(-4px);
  box-shadow: 0 18px 48px rgba(0, 0, 0, 0.08);
}

.next-project__eyebrow {
  font-family: var(--font-body);
  font-size: 13px;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: 0.08em;
  color: #52525B;                      /* slate muted */
  margin: 0 0 var(--space-xs);         /* 16px below eyebrow */
}

.next-project__image {
  width: 100%;
  aspect-ratio: 16 / 9;
  object-fit: cover;
  border-radius: 0.875rem;
  background-color: rgba(0, 0, 0, 0.04);
  display: block;
  margin-bottom: var(--space-sm);      /* 32px below image */
}

.next-project__title {
  font-family: var(--font-heading);
  font-size: clamp(2rem, 4.2vw, 3.5rem); /* 32 → 56px */
  font-weight: 400;
  line-height: 1.1;
  letter-spacing: -0.02em;
  color: var(--case-text, var(--color-text-primary));
  margin: 0 0 0.5rem;
}

.next-project__meta {
  font-family: var(--font-body);
  font-size: var(--text-body-sm);
  color: #52525B;
  margin: 0;
}

/* ========================================
   B22 — CASE JOURNEY (sequential timeline of N stage cards)
   ======================================== */

.case-journey {
  padding-inline: var(--case-inline);
  padding-block: var(--space-lg);
}

.case-journey__list {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(200px, 1fr));
  gap: var(--gap-md);
  list-style: none;
  padding: 0;
  margin: 0;
  counter-reset: journey;
}

.case-journey__step {
  counter-increment: journey;
  display: flex;
  flex-direction: column;
  gap: 0.75rem;
}

.case-journey__image {
  width: 100%;
  aspect-ratio: 4 / 3;
  object-fit: cover;
  border-radius: 0.75rem;
  background-color: var(--case-surface, #F4F4F5);
  display: block;
}

.case-journey__num {
  font-family: var(--font-body);
  font-size: 11px;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: 0.1em;
  color: #52525B;
  margin: 0;
}

.case-journey__num::before {
  content: counter(journey, decimal-leading-zero) " · ";
}

.case-journey__label {
  font-family: var(--font-heading);
  font-size: 1.25rem;                  /* 20px */
  font-weight: 400;
  line-height: 1.2;
  letter-spacing: -0.01em;
  color: var(--case-text, var(--color-text-primary));
  margin: 0;
}

.case-journey__desc {
  font-family: var(--font-body);
  font-size: var(--text-body-sm);
  line-height: 1.45;
  color: #3F3F46;
  margin: 0;
}

/* ========================================
   B23 — CASE GOALS (3-col icon + headline + description)
   ======================================== */

/* .case-goals — grid from BRICK .l-cols-3. */
.case-goals {
  gap: var(--gap-lg);                  /* 48px */
  padding-inline: var(--case-inline-text);
  padding-block: var(--space-lg);
}

.case-goals__item {
  display: flex;
  flex-direction: column;
  gap: 1rem;
}

.case-goals__icon {
  width: 48px;
  height: 48px;
  color: var(--case-primary, var(--color-text-primary));
  flex-shrink: 0;
}

.case-goals__icon svg {
  width: 100%;
  height: 100%;
  display: block;
}

.case-goals__title {
  font-family: var(--font-heading);
  font-size: 1.5rem;                   /* 24px */
  font-weight: 400;
  line-height: 1.2;
  letter-spacing: -0.01em;
  color: var(--case-text, var(--color-text-primary));
  margin: 0;
}

.case-goals__desc {
  font-family: var(--font-body);
  font-size: var(--text-body-base);
  line-height: 1.5;
  color: #3F3F46;
  margin: 0;
}

/* ========================================
   B24 — CASE TAGS (horizontal pill row for tech stack / categories)
   ======================================== */

.case-tags {
  display: flex;
  flex-wrap: wrap;
  gap: 0.5rem;
  padding-inline: var(--case-inline-text);
  padding-block: var(--space-sm);
  margin: 0;
  list-style: none;
}

.case-tags__pill {
  display: inline-flex;
  align-items: center;
  padding: 0.5rem 0.875rem;
  font-family: var(--font-body);
  font-size: 13px;
  font-weight: var(--weight-medium);
  line-height: 1;
  color: var(--case-text, var(--color-text-primary));
  background-color: var(--case-surface, #F4F4F5);
  border: 1px solid var(--case-border, rgba(0, 0, 0, 0.08));
  border-radius: 999px;
}

/* ========================================
   B25 — CASE TWO-COL TEXT (side-by-side parallel text columns)
   ======================================== */

/* .case-two-col — grid from BRICK .l-cols-2. */
.case-two-col {
  gap: var(--gap-lg);                  /* 48px */
  padding-inline: var(--case-inline-text);
  padding-block: var(--space-lg);
}

.case-two-col__col {
  display: flex;
  flex-direction: column;
  gap: 0.75rem;
}

.case-two-col__title {
  font-family: var(--font-heading);
  font-size: 1.5rem;                   /* 24px */
  font-weight: 400;
  line-height: 1.2;
  letter-spacing: -0.01em;
  color: var(--case-text, var(--color-text-primary));
  margin: 0;
}

.case-two-col__body {
  font-family: var(--font-body);
  font-size: var(--text-body-base);
  line-height: 1.5;
  color: var(--color-text-primary);
  margin: 0;
}

/* ========================================
   COMPONENTS PAGE (components.html)
   Internal reference page — shows every prebuilt block with dummy content
   so they can be referenced by ID (B01..B19) when drafting new case studies.
   ======================================== */

.components-page {
  background-color: #FAFAFA;
}

.components-toolbar {
  position: sticky;
  top: 100px;
  z-index: 10;
  display: flex;
  align-items: center;
  gap: 12px;
  padding: 12px 24px;
  margin: 24px clamp(1.5rem, 5.56vw, 5rem) 0;
  background-color: #FFFFFF;
  border: 1px solid rgba(0, 0, 0, 0.08);
  border-radius: 999px;
  box-shadow: 0 4px 16px rgba(0, 0, 0, 0.04);
  width: fit-content;
}

.components-toolbar__label {
  font-family: var(--font-body);
  font-size: 13px;
  font-weight: 500;
  text-transform: uppercase;
  letter-spacing: 0.06em;
  color: #71717A;
  margin-right: 4px;
}

.components-toolbar__btn {
  font-family: var(--font-body);
  font-size: 14px;
  font-weight: 500;
  padding: 8px 16px;
  border: 1px solid rgba(0, 0, 0, 0.1);
  border-radius: 999px;
  background: #FFFFFF;
  color: var(--color-text-primary);
  cursor: pointer;
  transition: background-color 0.15s, border-color 0.15s;
}

.components-toolbar__btn:hover {
  background-color: #F4F4F5;
}

.components-toolbar__btn.is-active {
  background-color: var(--color-text-primary);
  color: #FFFFFF;
  border-color: var(--color-text-primary);
}

.components-toc {
  padding: 32px clamp(1.5rem, 5.56vw, 5rem);
  max-width: 960px;
}

.components-toc h2 {
  font-family: var(--font-body);
  font-size: 13px;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: 0.08em;
  color: #71717A;
  margin-bottom: 12px;
}

.components-toc ol {
  list-style: none;
  padding: 0;
  margin: 0;
  display: flex;
  flex-direction: column;
  gap: 10px;
}

.components-toc li {
  font-family: var(--font-body);
  font-size: 14px;
  line-height: 1.6;
  color: #3F3F46;
}

.components-toc li strong {
  display: inline-block;
  min-width: 96px;
  color: var(--color-text-primary);
}

.components-toc a {
  color: #0369A1;
  text-decoration: none;
}

.components-toc a:hover {
  text-decoration: underline;
}

.components-main__title {
  font-family: var(--font-heading);
  font-size: 48px;
  font-weight: 400;
  line-height: 1.12;
  letter-spacing: -0.02em;
  padding: 96px clamp(1.5rem, 5.56vw, 5rem) 32px;
  border-top: 1px solid rgba(0, 0, 0, 0.08);
  margin-top: 96px;
}

.components-main__title:first-of-type {
  border-top: none;
  margin-top: 0;
}

.components-block {
  display: block;
  padding-bottom: 96px;
  border-bottom: 1px dashed rgba(0, 0, 0, 0.08);
  margin-bottom: 96px;
}

.components-block:last-of-type {
  border-bottom: none;
}

.components-block__meta {
  display: grid;
  grid-template-columns: 80px 1fr;
  grid-template-rows: auto auto auto;
  column-gap: 24px;
  row-gap: 8px;
  padding: 32px clamp(1.5rem, 5.56vw, 5rem);
  background-color: #FFFFFF;
  border-bottom: 1px solid rgba(0, 0, 0, 0.08);
  margin-bottom: 32px;
}

.components-block__id {
  grid-row: 1 / 3;
  grid-column: 1;
  font-family: var(--font-heading);
  font-size: 40px;
  font-weight: 400;
  line-height: 1;
  color: #0369A1;
  letter-spacing: -0.02em;
  align-self: center;
}

.components-block__name {
  grid-column: 2;
  font-family: var(--font-heading);
  font-size: 28px;
  font-weight: 400;
  line-height: 1.12;
  margin: 0;
  color: var(--color-text-primary);
}

.components-block__class {
  grid-column: 2;
  display: inline-block;
  width: fit-content;
  font-family: 'Menlo', 'Consolas', monospace;
  font-size: 13px;
  color: #3F3F46;
  background-color: #F4F4F5;
  padding: 4px 10px;
  border-radius: 4px;
}

.components-block__desc {
  grid-column: 2;
  font-family: var(--font-body);
  font-size: 15px;
  line-height: 1.5;
  color: #52525B;
  max-width: 640px;
  margin: 0;
}

.components-block__desc code {
  font-family: 'Menlo', 'Consolas', monospace;
  font-size: 13px;
  background-color: #F4F4F5;
  padding: 1px 6px;
  border-radius: 3px;
  color: #18181B;
}

.components-block__demo {
  background-color: var(--color-bg);
  border: 1px solid rgba(0, 0, 0, 0.06);
  margin: 0 clamp(1.5rem, 5.56vw, 5rem);
  overflow: hidden;
}

/* Shrink 100svh wrappers inside demos so browsing isn't a scroll marathon. */
.components-block__demo .case-section-full {
  min-height: 0;
}

.components-block__demo--short {
  max-height: 80vh;
  overflow: auto;
}