.project-detail-page {
  background: var(--Foundation-White);
  color: var(--Foundation-Black);
  /* Sticky top bar height — used for in-page anchor scroll-margin */
  --project-detail-nav-height: 72px;
  /* Fixed hero image band — same height on every project page */
  --project-hero-band-height: 560px;
  /*
   * Inner grid: story text inset from the viewport (Figma ~208px at 1728px wide).
   * Not used on .project-intro — intro uses symmetric page padding; lede spans full width inside that band.
   * Above 960px: fluid with vw, floored at page gutter, capped at 208px (5.2 × 40px gutter token).
   * At ≤960px: collapses to --page-gutter-inline (40px → 24px at tablet → 16px at mobile).
   */
  --project-inner-text-inset: clamp(
    var(--page-gutter-inline),
    12.037vw,
    calc(var(--page-gutter-inline) * 5.2)
  );
  /* Story text column cap — matches Figma artboard width; centers on ultra-wide viewports */
  --project-story-inner-max-width: 1728px;
}

/* Inner story column aligns with outer page margins on narrower viewports */
@media (max-width: 960px) {
  .project-detail-page {
    --project-inner-text-inset: var(--page-gutter-inline);
  }
}

/* In-page anchors → #project-intro: sit below sticky project nav */
.project-detail-page #project-intro {
  scroll-margin-top: var(--project-detail-nav-height);
}

.project-detail-shell {
  width: 100%;
  margin: 0 auto;
  padding-left: var(--page-gutter-inline);
  padding-right: var(--page-gutter-inline);
  box-sizing: border-box;
}

.project-detail-shell-wide {
  max-width: 960px;
}

/*
 * Bottom project nav: full-width band with same horizontal inset as top nav
 * (--Scale-1000 = 40px in primitives).
 */
.project-detail-shell.project-prev-next {
  max-width: none;
  width: 100%;
  padding-left: var(--page-gutter-inline);
  padding-right: var(--page-gutter-inline);
  box-sizing: border-box;
}

.project-detail-top-nav {
  position: sticky;
  top: 0;
  z-index: 30;
  border-bottom: none;
  /* Frosted panel: scrolled page content shows through blurred */
  background-color: color-mix(in srgb, var(--Foundation-White) 70%, transparent);
  backdrop-filter: blur(14px);
  -webkit-backdrop-filter: blur(14px);
}

.project-detail-top-nav .project-detail-shell {
  max-width: none;
  padding-left: var(--page-gutter-inline);
  padding-right: var(--page-gutter-inline);
}

.project-detail-top-nav-inner {
  min-height: 72px;
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: var(--Scale-500);
}

.project-detail-back-link {
  display: inline-flex;
  align-items: center;
  gap: var(--Scale-200);
  padding: var(--Scale-200) var(--Scale-400);
  text-decoration: none;
}

.project-detail-back-link-icon {
  width: 16px;
  height: 16px;
  display: block;
}

.project-detail-back-link:focus-visible {
  outline: 2px solid var(--Foundation-Black);
  outline-offset: 2px;
}

.project-detail-nameplate {
  display: block;
  line-height: 0;
  flex-shrink: 0;
  text-decoration: none;
}

.project-detail-nameplate-logo {
  width: var(--Scale-1000);
  height: var(--Scale-1000);
  display: block;
}

.project-detail-nameplate:focus-visible {
  outline: 2px solid var(--Foundation-Black);
  outline-offset: 2px;
}

/*
 * Project hero: fixed-height image band (bg + FG). Title lives in .project-intro (v2 title bar or legacy lede).
 * Per-project: set background-image on .project-hero-bg; tune FG via .project-hero-image > img overrides.
 */
.project-hero {
  position: relative;
  width: 100vw;
  margin-left: calc(50% - 50vw);
  margin-right: calc(50% - 50vw);
  height: var(--project-hero-band-height);
  box-sizing: border-box;
  overflow: hidden;
  background-color: var(--Foundation-White);
}

.project-hero-bg {
  position: absolute;
  inset: 0;
  z-index: 0;
  pointer-events: none;
  background-color: color-mix(in srgb, var(--Warm-Grey-100) 40%, var(--Foundation-White));
  background-repeat: no-repeat;
  background-position: center;
  background-size: cover;
}

.project-hero-image {
  position: absolute;
  inset: 0;
  z-index: 1;
  display: flex;
  align-items: center;
  justify-content: center;
  box-sizing: border-box;
  padding: var(--Scale-400) var(--page-gutter-inline);
}

/* Default FG: centered, contained within the band */
.project-hero-image > img {
  display: block;
  width: auto;
  height: auto;
  max-width: 100%;
  max-height: 100%;
  object-fit: contain;
}

/* Figment: hero bg texture */
.project-figment .project-hero-bg {
  background-color: transparent;
  background-image: url("../../assets/projects/figment/hero-bg.webp");
}

.project-figment .project-hero-image > img {
  width: min(720px, 100%);
  max-height: 100%;
}

/* Lumosity System Icons: grid texture bg */
.project-lumosity-system-icons .project-hero-bg {
  background-color: transparent;
  background-image: url("../../assets/projects/lumosity-icons/hero-bg.webp");
}

.project-lumosity-system-icons .project-hero-image > img {
  width: min(480px, 75%);
  max-height: 100%;
}

/*
 * Intro feature row: three 360px in-situ crops.
 * Flush to inner-column edges; leftover width is the middle gutters.
 */
.project-lumosity-system-icons .project-intro-overview {
  border-bottom: none;
  /* Drop the old divider padding so overview → images is 120px (gap 40 + feature pad-top 80) */
  padding-bottom: 0;
}

.project-lumosity-system-icons .project-intro-feature {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 360px));
  justify-content: space-between;
  align-items: start;
  column-gap: var(--Scale-600);
  row-gap: var(--Scale-600);
  padding-top: var(--Scale-1500);
  padding-bottom: var(--Scale-1700);
}

.project-lumosity-system-icons .project-intro-feature > img {
  display: block;
  width: 100%;
  max-width: 360px;
  height: auto;
  object-fit: contain;
}

@media (max-width: 390px) {
  .project-lumosity-system-icons .project-intro-feature {
    grid-template-columns: minmax(0, 360px);
    justify-content: start;
  }
}

/* Lumosity: warm gradient bg */
.project-lumosity .project-hero-bg {
  background-color: transparent;
  background-image: url("../../assets/projects/lumosity/hero-bg.webp");
}

.project-lumosity .project-hero-image {
  /* Keep glows inside the band: inset so overflow:hidden never shears the PNGs */
  padding: var(--Scale-600) var(--page-gutter-inline);
}

/*
 * Five separate icon PNGs (glow baked in), laid out to match the old hero-fg composite.
 * Stage uses that export's aspect (1618×1116) so it still fills the 560px band.
 */
.project-lumosity-hero-cluster {
  position: relative;
  width: min(
    100%,
    calc((var(--project-hero-band-height) - (var(--Scale-600) * 2)) * 1618 / 1116)
  );
  aspect-ratio: 1618 / 1116;
}

.project-lumosity-hero-icon {
  position: absolute;
  display: block;
  height: auto;
  pointer-events: none;
  animation: lumosity-hero-bob 4.6s ease-in-out infinite;
}

.project-lumosity-hero-icon--tomato {
  left: -6%;
  top: 0;
  width: 34.5%;
  z-index: 2;
  animation-duration: 4.8s;
  animation-delay: 0s;
}

.project-lumosity-hero-icon--bear {
  left: 12%;
  top: 16%;
  width: 43%;
  z-index: 4;
  animation-duration: 5.2s;
  animation-delay: -1.2s;
}

.project-lumosity-hero-icon--highlighter {
  left: 40%;
  top: 1%;
  width: 41%;
  z-index: 3;
  animation-duration: 4.4s;
  animation-delay: -0.6s;
}

.project-lumosity-hero-icon--cake {
  left: 28%;
  top: 57%;
  width: 33.5%;
  z-index: 6;
  animation-duration: 5s;
  animation-delay: -2s;
}

.project-lumosity-hero-icon--ship {
  left: 44%;
  top: 33%;
  width: 54%;
  z-index: 5;
  animation-duration: 5.4s;
  animation-delay: -0.3s;
}

@keyframes lumosity-hero-bob {
  0%,
  100% {
    transform: translateY(0);
  }
  50% {
    transform: translateY(-8px);
  }
}

@media (prefers-reduced-motion: reduce) {
  .project-lumosity-hero-icon {
    animation: none;
  }
}

.project-lumosity .project-hero-tag {
  background-color: var(--Orange-100);
}

/*
 * Lumosity intro feature — Blue-100 fade plate (content width) + device FG that hangs left.
 * Tune --lumosity-intro-fg-shift / --lumosity-intro-fg-width to match Figma overhang.
 * Parents stay overflow:visible so the left overhang can paint into the page gutter.
 */
.project-lumosity .project-intro--v2 .project-intro-inner,
.project-lumosity .project-intro-feature {
  overflow: visible;
}

.project-lumosity {
  --lumosity-intro-fg-shift: -12%;
  --lumosity-intro-fg-width: 118%;
  /* Blue plate above the devices — bump to match Figma headroom */
  --lumosity-intro-headroom: var(--Scale-1500);
}

.project-lumosity .project-lumosity-intro-feature {
  overflow: visible;
}

.project-lumosity .project-lumosity-intro-feature-stage {
  position: relative;
  width: 100%;
  overflow: visible;
  /* Extra plate height above the FG; gradient fills this via absolute inset */
  padding-top: var(--lumosity-intro-headroom);
  box-sizing: border-box;
}

/* Plate: #DAF5FF (Blue-100) 100% → 0% opacity, top to bottom */
.project-lumosity .project-lumosity-intro-feature-bg {
  position: absolute;
  inset: 0;
  z-index: 0;
  pointer-events: none;
  background-image: linear-gradient(
    to bottom,
    var(--Blue-100) 0%,
    color-mix(in srgb, var(--Blue-100) 0%, transparent) 100%
  );
}

/* In-flow so the stage height follows the asset; negative margin hangs left */
.project-lumosity .project-lumosity-intro-feature-fg {
  position: relative;
  z-index: 1;
  display: block;
  width: var(--lumosity-intro-fg-width);
  max-width: none;
  height: auto;
  margin-left: var(--lumosity-intro-fg-shift);
  pointer-events: none;
}

.project-figment .project-hero-tag {
  background-color: var(--Orange-100);
}

/*
 * Lumosity — story grids: copy-to-media gap (galleries add the second child).
 */
.project-lumosity .project-story-grid {
  gap: var(--Scale-1500);
}

.project-lumosity .project-lumosity-s05 {
  overflow-x: clip;
  padding-bottom: 120px;
}

/*
 * Lumosity section 01 — before/after screens at 600px, flush to container edges.
 * Captions reuse .project-lumosity-icons-s01-caption (+ before/after color).
 */
.project-lumosity .project-lumosity-s01-gallery {
  display: flex;
  flex-direction: row;
  flex-wrap: nowrap;
  align-items: flex-start;
  justify-content: space-between;
  gap: var(--Scale-1000);
  grid-template-columns: unset;
}

.project-lumosity .project-lumosity-s01-pair {
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  gap: var(--Scale-600);
  box-sizing: border-box;
  width: 600px;
  max-width: calc((100% - var(--Scale-1000)) / 2);
  flex-shrink: 0;
}

.project-lumosity .project-lumosity-s01-pair > img {
  display: block;
  width: 100%;
  height: auto;
}

@media (max-width: 810px) {
  .project-lumosity .project-lumosity-s01-gallery {
    flex-direction: column;
    align-items: stretch;
  }

  .project-lumosity .project-lumosity-s01-pair {
    width: 100%;
    max-width: 600px;
  }
}

/*
 * Lumosity section 01b — logo evolution (~1000px, centered) + type GIF below.
 */
.project-lumosity .project-lumosity-s01-brand {
  display: flex;
  flex-direction: column;
  align-items: center;
  /* Extra space after the second paragraph (stacks with story-grid gap) */
  margin-top: var(--Scale-1500);
  /* Breathing room between logo row and type GIF */
  gap: calc(var(--Scale-1700) + var(--Scale-1500));
  grid-template-columns: unset;
}

.project-lumosity .project-lumosity-s01-brand-logos {
  display: block;
  width: 100%;
  max-width: 1000px;
  height: auto;
}

.project-lumosity .project-lumosity-s01-brand-type {
  display: block;
  width: 100%;
  max-width: 800px;
  height: auto;
}

/*
 * Lumosity section 02 — two-column challenge bullets (fills in reading order: left col, then right).
 */
.project-lumosity .project-lumosity-s02-challenges {
  margin: 0;
  padding: 0;
  list-style: none;
  columns: 2;
  column-gap: var(--Scale-1500);
  color: var(--Warm-Grey-800);
  font-family: var(--font-family-primary);
  font-size: var(--Font-Body-Large-text-size);
  line-height: var(--Font-Body-Large-line-height);
  font-weight: var(--font-weight-regular);
}

.project-lumosity .project-lumosity-s02-challenges li {
  margin: 0;
  padding: 0;
  break-inside: avoid;
}

.project-lumosity .project-lumosity-s02-challenges li::before {
  content: "•";
  margin-right: var(--Scale-200);
}

@media (max-width: 810px) {
  .project-lumosity .project-lumosity-s02-challenges {
    columns: 1;
  }
}

/*
 * Lumosity section 02 — two game screens in a row, flush to container edges (same rhythm as s01).
 */
.project-lumosity .project-lumosity-s02-gallery {
  display: flex;
  flex-direction: row;
  flex-wrap: nowrap;
  align-items: flex-start;
  justify-content: space-between;
  gap: var(--Scale-1000);
  grid-template-columns: unset;
}

.project-lumosity .project-lumosity-s02-gallery > img {
  display: block;
  box-sizing: border-box;
  width: calc((100% - var(--Scale-1000)) / 2);
  max-width: 664px;
  height: auto;
  flex-shrink: 0;
}

@media (max-width: 810px) {
  .project-lumosity .project-lumosity-s02-gallery {
    flex-direction: column;
    align-items: stretch;
  }

  .project-lumosity .project-lumosity-s02-gallery > img {
    width: 100%;
    max-width: 664px;
  }
}

/* Lumosity section 02 — collage under the Unity paragraph (~800px, centered) */
.project-lumosity .project-lumosity-s02-collage {
  display: flex;
  flex-direction: column;
  align-items: stretch;
  gap: var(--Scale-600);
  grid-template-columns: unset;
}

.project-lumosity .project-lumosity-s02-collage-stack {
  align-self: center;
  width: 100%;
  max-width: 800px;
}

/* Same type as s01 captions (weight, uppercase, tracking); Warm Grey 600, no icon */
.project-lumosity .project-lumosity-media-caption {
  margin: 0;
  font-family: var(--font-family-primary);
  font-size: var(--Font-Body-Caption-text-size);
  line-height: var(--Font-Body-Caption-line-height);
  font-weight: var(--font-weight-medium);
  letter-spacing: 0.18em;
  text-transform: uppercase;
  color: var(--Warm-Grey-600);
}

.project-lumosity .project-lumosity-s02-collage-stack > img {
  display: block;
  width: 100%;
  height: auto;
}

/*
 * Lumosity section 03 — three research/persona assets in a row.
 * Equal columns; left/right flush to the content container edges.
 */
.project-lumosity .project-lumosity-s03-gallery {
  display: flex;
  flex-direction: row;
  flex-wrap: nowrap;
  align-items: center;
  justify-content: space-between;
  gap: var(--Scale-1700);
  grid-template-columns: unset;
}

.project-lumosity .project-lumosity-s03-gallery > img {
  display: block;
  box-sizing: border-box;
  /* Slightly under a third so the gutters read more clearly */
  width: calc((100% - (var(--Scale-1700) * 2)) / 3);
  height: auto;
  flex-shrink: 0;
  object-fit: contain;
}

@media (max-width: 810px) {
  .project-lumosity .project-lumosity-s03-gallery {
    flex-direction: column;
    align-items: center;
  }

  .project-lumosity .project-lumosity-s03-gallery > img {
    width: 100%;
    max-width: 400px;
  }
}

/*
 * Lumosity section 03 — beta screens under the mid-way paragraph.
 * Caption flush left; screens flush to container edges.
 * 80px above caption comes from .project-story-grid gap (--Scale-1500).
 */
.project-lumosity .project-lumosity-s03-screens {
  display: grid;
  grid-template-columns: repeat(2, 1fr);
  column-gap: var(--Scale-1500);
  /* 40px between caption and screens */
  row-gap: var(--Scale-1000);
}

.project-lumosity .project-lumosity-s03-screens .project-lumosity-media-caption {
  grid-column: 1 / -1;
}

.project-lumosity .project-lumosity-s03-screens > img {
  display: block;
  box-sizing: border-box;
  width: 100%;
  height: auto;
}

@media (max-width: 810px) {
  .project-lumosity .project-lumosity-s03-screens {
    grid-template-columns: 1fr;
  }
}

/*
 * Lumosity section 03 — product UI 2×2 (600px), flush left/right so the center gutter opens up.
 */
.project-lumosity .project-lumosity-s03-ui-grid {
  display: grid;
  grid-template-columns: repeat(2, min(600px, calc((100% - var(--Scale-1500)) / 2)));
  justify-content: space-between;
  align-items: start;
  row-gap: var(--Scale-1000);
  column-gap: 0;
}

.project-lumosity .project-lumosity-s03-ui-grid .project-lumosity-media-caption {
  grid-column: 1 / -1;
}

.project-lumosity .project-lumosity-s03-ui-grid > img {
  display: block;
  width: 100%;
  height: auto;
}

@media (max-width: 810px) {
  .project-lumosity .project-lumosity-s03-ui-grid {
    grid-template-columns: 1fr;
    justify-content: stretch;
  }

  .project-lumosity .project-lumosity-s03-ui-grid > img {
    max-width: 600px;
  }
}

/*
 * Lumosity section 04 — color tokens diagram.
 * Caption flush left; image fills the inner container.
 * 80px above caption comes from .project-story-grid gap (--Scale-1500).
 */
.project-lumosity .project-lumosity-s04-tokens {
  display: flex;
  flex-direction: column;
  align-items: stretch;
  gap: var(--Scale-1000);
  grid-template-columns: unset;
}

.project-lumosity .project-lumosity-s04-tokens > img {
  display: block;
  width: 100%;
  height: auto;
}

/*
 * Lumosity section 04 — 548px columns, 120px gutter, left-aligned (rag on the right).
 * 80px between galleries comes from .project-story-grid gap (--Scale-1500).
 */
.project-lumosity .project-lumosity-s04-pair {
  display: grid;
  grid-template-columns: 548px 548px;
  justify-content: start;
  align-items: start;
  column-gap: var(--Scale-1700);
  row-gap: var(--Scale-1000);
}

.project-lumosity .project-lumosity-s04-buttons .project-lumosity-media-caption,
.project-lumosity .project-lumosity-s04-cards .project-lumosity-media-caption {
  grid-column: 1 / -1;
}

.project-lumosity .project-lumosity-s04-pair-col {
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  gap: var(--Scale-1000);
}

.project-lumosity .project-lumosity-s04-pair > img,
.project-lumosity .project-lumosity-s04-pair-col > img {
  display: block;
  width: 548px;
  max-width: 100%;
  height: auto;
}

.project-lumosity .project-lumosity-s04-pair > img.project-lumosity-s04-img-narrow {
  width: 364px;
}

@media (max-width: 810px) {
  .project-lumosity .project-lumosity-s04-pair {
    grid-template-columns: 1fr;
  }

  .project-lumosity .project-lumosity-s04-pair > img,
  .project-lumosity .project-lumosity-s04-pair-col > img {
    width: 100%;
  }
}

/*
 * Lumosity section 04 — custom icon set, 6 per row.
 * 100px tiles; space-between spans the inner container. Caption 40px above (--Scale-1000).
 */
.project-lumosity .project-lumosity-s04-icons {
  display: flex;
  flex-direction: column;
  align-items: stretch;
  gap: var(--Scale-1000);
  grid-template-columns: unset;
}

.project-lumosity .project-lumosity-s04-icons-grid {
  display: grid;
  grid-template-columns: repeat(6, 100px);
  justify-content: space-between;
  row-gap: var(--Scale-1700);
}

.project-lumosity .project-lumosity-s04-icons-grid > img {
  display: block;
  width: 100px;
  height: 100px;
}

@media (max-width: 810px) {
  .project-lumosity .project-lumosity-s04-icons-grid {
    grid-template-columns: repeat(3, 100px);
  }
}

/*
 * Lumosity section 05 — launch stat cards.
 * Large: 40px pad, 16px stack gap, 56px bold value (Figma 599:26060).
 * Small: 16px/40px pad, 8px stack gap, 24px semibold value (Figma 599:26063).
 * Rows fill the inner container; 24px gutters in and between rows.
 */
.project-lumosity .project-lumosity-s05-stats {
  display: flex;
  flex-direction: column;
  gap: var(--Scale-600);
  grid-template-columns: unset;
}

.project-lumosity .project-lumosity-s05-stats-row {
  display: grid;
  gap: var(--Scale-600);
}

.project-lumosity .project-lumosity-s05-stats-row--4 {
  grid-template-columns: repeat(4, minmax(0, 1fr));
}

.project-lumosity .project-lumosity-s05-stats-row--3 {
  grid-template-columns: repeat(3, minmax(0, 1fr));
}

.project-lumosity .project-lumosity-stat-card {
  box-sizing: border-box;
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  min-width: 0;
  border: 1px solid var(--Warm-Grey-100);
  border-radius: var(--Scale-200);
  color: var(--Foundation-Black);
}

.project-lumosity .project-lumosity-stat-card--large {
  gap: var(--Scale-400);
  padding: var(--Scale-1000);
}

.project-lumosity .project-lumosity-stat-card--small {
  gap: var(--Scale-200);
  padding: var(--Scale-400) var(--Scale-1000);
}

.project-lumosity .project-lumosity-stat-card-title {
  display: flex;
  flex-direction: row;
  align-items: center;
  gap: var(--Scale-100);
}

.project-lumosity .project-lumosity-stat-card-value,
.project-lumosity .project-lumosity-stat-card-label {
  margin: 0;
  font-family: var(--font-family-primary);
}

.project-lumosity .project-lumosity-stat-card--large .project-lumosity-stat-card-value {
  font-size: 56px;
  line-height: 1.2;
  font-weight: var(--font-weight-bold);
}

.project-lumosity .project-lumosity-stat-card--large .project-lumosity-stat-card-label {
  font-size: 18px;
  line-height: 1.2;
  font-weight: var(--font-weight-regular);
}

.project-lumosity .project-lumosity-stat-card--small .project-lumosity-stat-card-value {
  font-size: var(--Font-Headings-Card-title-text-size);
  line-height: 1.2;
  font-weight: var(--font-weight-semibold);
}

.project-lumosity .project-lumosity-stat-card--small .project-lumosity-stat-card-label {
  font-size: var(--Font-Body-Paragraph-text-size);
  line-height: 1.2;
  font-weight: var(--font-weight-regular);
}

.project-lumosity .project-lumosity-stat-card-icon {
  display: block;
  width: 32px;
  height: 32px;
  flex-shrink: 0;
}

@media (max-width: 810px) {
  .project-lumosity .project-lumosity-s05-stats-row--4,
  .project-lumosity .project-lumosity-s05-stats-row--3 {
    grid-template-columns: 1fr;
  }
}

/*
 * Lumosity section 05 — game-icon kicker.
 * 88px tiles; horizontal gaps come from space-between across a strip
 * slightly wider than the page so ends clip. 80px between rows.
 * Overflow is clipped here so the bleed does not create page scroll.
 */
.project-lumosity .project-lumosity-kicker {
  --kicker-icon-size: 88px;
  --kicker-bleed: 44px;
  display: flex;
  flex-direction: column;
  gap: var(--Scale-1500);
  box-sizing: border-box;
  width: 100%;
  min-width: 0;
  overflow-x: clip;
  /* Story-grid already adds 80px; this makes the total space above 200px */
  margin-top: calc(200px - var(--Scale-1500));
}

.project-lumosity .project-lumosity-kicker-row {
  display: flex;
  flex-wrap: nowrap;
  justify-content: space-between;
  box-sizing: border-box;
  width: calc(100% + var(--kicker-bleed));
  flex-shrink: 0;
}

/* Stagger which edge clips: top mild, middle more left, bottom more right */
.project-lumosity .project-lumosity-kicker-row--a {
  margin-left: calc(var(--kicker-bleed) * -0.35);
}

.project-lumosity .project-lumosity-kicker-row--b {
  margin-left: calc(var(--kicker-bleed) * -1);
}

.project-lumosity .project-lumosity-kicker-row--c {
  margin-left: calc(var(--kicker-bleed) * -0.25);
}

.project-lumosity .project-lumosity-kicker-row > img {
  display: block;
  flex-shrink: 0;
  width: var(--kicker-icon-size);
  height: var(--kicker-icon-size);
  object-fit: cover;
}

/*
 * Lumosity System Icons — story grids: 80px copy-to-media gap.
 * Sections size to content; media/image sizing controls viewport presence.
 */
.project-lumosity-system-icons .project-story-grid {
  gap: var(--Scale-1500);
}

/*
 * Lumosity System Icons — story galleries (padding + max-width via shared inner-column rule below).
 */
/* Lumosity System Icons — section 01: before/after rows (Figma 259:6959) */
.project-lumosity-system-icons .project-lumosity-icons-s01-gallery {
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  gap: var(--Scale-1000);
  grid-template-columns: unset;
}

.project-lumosity-system-icons .project-lumosity-icons-s01-row {
  box-sizing: border-box;
  width: 100%;
  max-width: none;
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  gap: var(--Scale-600);
}

.project-lumosity-system-icons .project-lumosity-icons-s01-caption,
.project-lumosity .project-lumosity-icons-s01-caption {
  display: flex;
  flex-direction: row;
  align-items: center;
  gap: var(--Scale-200);
  font-family: var(--font-family-primary);
  font-size: var(--Font-Body-Caption-text-size);
  line-height: var(--Font-Body-Caption-line-height);
  font-weight: var(--font-weight-medium);
  letter-spacing: 0.18em;
  text-transform: uppercase;
}

.project-lumosity-system-icons .project-lumosity-icons-s01-caption--before,
.project-lumosity .project-lumosity-icons-s01-caption--before {
  color: var(--Rosso-Corsa-500);
}

.project-lumosity-system-icons .project-lumosity-icons-s01-caption--after,
.project-lumosity .project-lumosity-icons-s01-caption--after {
  color: var(--Lime-600);
}

/* Inline SVGs from x-circle.svg / checkmark.svg; stroke/fill use currentColor for caption tint */
.project-lumosity-system-icons .project-lumosity-icons-s01-caption-icon,
.project-lumosity .project-lumosity-icons-s01-caption-icon {
  display: block;
  width: var(--Scale-400);
  height: var(--Scale-400);
  flex-shrink: 0;
}

/*
 * Section 01 icon size: desktop 96px → tablet/iPad 72px → mobile 48px.
 * Token cascades so 810px wrap keeps the tablet size until 390px.
 */
.project-lumosity-system-icons {
  --lumosity-s01-icon-size: var(--Scale-1600);
}

/* Below large-desktop (1200px): shrink so 8-across still has breathing room (iPad Pro, etc.) */
@media (max-width: 1199px) {
  .project-lumosity-system-icons {
    --lumosity-s01-icon-size: var(--Scale-1400);
  }
}

/* 8 icons per row (@2x PNGs); even spacing via space-between */
.project-lumosity-system-icons .project-lumosity-icons-s01-images {
  display: flex;
  flex-direction: row;
  flex-wrap: nowrap;
  align-items: center;
  justify-content: space-between;
  width: 100%;
}

.project-lumosity-system-icons .project-lumosity-icons-s01-images > img {
  display: block;
  width: var(--lumosity-s01-icon-size);
  height: var(--lumosity-s01-icon-size);
  max-width: none;
  flex-shrink: 0;
  object-fit: contain;
}

/* Section 03 only: ~30% more copy-to-gallery gap for breathing room above image rows */
.project-lumosity-system-icons .project-story-grid[aria-labelledby="solution-heading"] {
  gap: calc(var(--Scale-1500) * 1.8);
}

/* Lumosity System Icons — section 03: brand grid rows (2 then 3, all 320px) */
.project-lumosity-system-icons .project-lumosity-icons-s03-gallery {
  display: flex;
  flex-direction: column;
  align-items: stretch;
  gap: var(--Scale-1700);
  grid-template-columns: unset;
}

.project-lumosity-system-icons .project-lumosity-icons-s03-row {
  display: flex;
  flex-direction: row;
  flex-wrap: nowrap;
  align-items: flex-start;
  justify-content: center;
  width: 100%;
  gap: var(--Scale-600);
}

/* Row 1: two tiles centered with 200px gap (Figma) */
.project-lumosity-system-icons .project-lumosity-icons-s03-row--two {
  gap: 200px;
}

/* Row 2: three tiles — outer edges flush with container */
.project-lumosity-system-icons .project-lumosity-icons-s03-row--three {
  justify-content: space-between;
  gap: 0;
}

.project-lumosity-system-icons .project-lumosity-icons-s03-row > img {
  display: block;
  width: 320px;
  height: 320px;
  object-fit: contain;
  flex-shrink: 0;
}

/*
 * Lumosity System Icons — section 04: gradient band + full icon grid (Figma 262:3854).
 * CSS-only gradient (no hero-bg.png — that asset includes patterns we omit here).
 * Stops: #EBFAFF → #E5FFF4 (standalone, not tokenized).
 */
.project-lumosity-system-icons .project-lumosity-icons-s04 {
  background-image: radial-gradient(
    120% 100% at 0% 50%,
    #ebfaff 0%,
    #e5fff4 100%
  );
  /* Vertical breathing room so gradient extends past copy + grid */
  padding-block: var(--Scale-1500) var(--Scale-1700);
  gap: var(--Scale-1700);
}

.project-lumosity-system-icons .project-lumosity-icons-s04::before {
  content: none;
}

@media (min-width: 811px) {
  .project-lumosity-system-icons .project-lumosity-icons-s04 {
    min-height: auto;
    gap: 140px;
    padding-block: 104px 120px;
  }
}

.project-lumosity-system-icons .project-lumosity-icons-s04-media {
  display: block;
  grid-template-columns: unset;
}

.project-lumosity-system-icons .project-lumosity-icons-s04-media picture {
  display: block;
  width: 100%;
}

.project-lumosity-system-icons .project-lumosity-icons-s04-media img {
  display: block;
  width: 100%;
  height: auto;
  max-width: none;
  object-fit: contain;
}

/* Mid widths using mobile composite: ~80% width, centered; full width again ≤524 */
@media (max-width: 767px) and (min-width: 525px) {
  .project-lumosity-system-icons .project-lumosity-icons-s04-media picture {
    display: flex;
    justify-content: center;
  }

  .project-lumosity-system-icons .project-lumosity-icons-s04-media img {
    width: 80%;
    max-width: 80%;
  }
}

/* Asset B (≤767): more air between copy and grid */
@media (max-width: 767px) {
  .project-lumosity-system-icons .project-story-grid.project-lumosity-icons-s04 {
    gap: calc(var(--Scale-1700) + var(--Scale-600));
  }
}

/*
 * Lumosity System Icons — page-end kicker: lede + 2×2 grid (Figma 261:4517).
 * Four @2x exports (592×336 display); inner-guide padding; single column on phone.
 */
.project-lumosity-system-icons .project-lumosity-icons-kicker {
  box-sizing: border-box;
  width: 100%;
  display: flex;
  flex-direction: column;
  /* Space between proof-of-concept lede and tile grid */
  gap: var(--Scale-1500);
  padding-top: var(--Scale-1500);
  margin-bottom: var(--Scale-1700);
}

.project-lumosity-system-icons .project-lumosity-icons-kicker-grid {
  box-sizing: border-box;
  width: 100%;
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  row-gap: var(--Scale-1500);
  /* Desktop: wide middle gutter; tightens below so cards can grow */
  column-gap: clamp(var(--Scale-600), 11.2vw, 194px);
}

.project-lumosity-system-icons .project-lumosity-icons-kicker-cell {
  min-width: 0;
}

.project-lumosity-system-icons .project-lumosity-icons-kicker-cell > img {
  display: block;
  width: 100%;
  height: auto;
  max-width: none;
  object-fit: contain;
}

/* Mid / tablet 2×2: pull columns closer (~40px) so assets scale up */
@media (max-width: 1100px) {
  .project-lumosity-system-icons .project-lumosity-icons-kicker-grid {
    column-gap: var(--Scale-1000);
  }
}

/* Single column only below ~400px — keep 2×2 through phone landscape / large phones */
@media (max-width: 399px) {
  .project-lumosity-system-icons .project-lumosity-icons-kicker-grid {
    grid-template-columns: 1fr;
    column-gap: 0;
    /* Half the 2×2 row gap so stacked cards sit closer */
    row-gap: calc(var(--Scale-1500) / 2);
  }
}

/*
 * Lumosity System Icons — section 05: 2×2 variant strips.
 * Desktop: 500px tiles, flush to inner-column edges, leftover width as the middle gutter.
 * 120px copy-to-grid and row gap (--Scale-1700). 200px below via .project-story-grid padding-bottom.
 */
.project-lumosity-system-icons .project-story-grid.project-lumosity-icons-s05 {
  gap: var(--Scale-1700);
}

.project-lumosity-system-icons .project-lumosity-icons-s05-gallery {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 500px));
  justify-content: space-between;
  align-items: start;
  column-gap: var(--Scale-600);
  row-gap: var(--Scale-1700);
}

.project-lumosity-system-icons .project-lumosity-icons-s05-gallery > img {
  display: block;
  width: 100%;
  max-width: 500px;
  height: auto;
  object-fit: contain;
}

@media (max-width: 399px) {
  .project-lumosity-system-icons .project-lumosity-icons-s05-gallery {
    grid-template-columns: minmax(0, 500px);
    justify-content: start;
  }
}

/* Lumosity System Icons — section 02: side + utility nav pairs (Figma 262:3590); desktop row at 1052px+ */
.project-lumosity-system-icons .project-lumosity-icons-s02-gallery {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: var(--Scale-1000);
  grid-template-columns: unset;
  overflow-x: clip;
}

.project-lumosity-system-icons .project-lumosity-icons-s02-group {
  display: flex;
  flex-direction: row;
  flex-wrap: nowrap;
  align-items: flex-start;
  justify-content: center;
  gap: var(--Scale-600);
  width: 100%;
  max-width: 100%;
  box-sizing: border-box;
}

/* 16px caption-to-image (Figma gap-[16px]); section 01 uses 24px on full icon row */
.project-lumosity-system-icons .project-lumosity-icons-s02-pair {
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  gap: var(--Scale-400);
  /* Allow shrink so @2x PNGs never force overflow */
  flex: 1 1 0;
  min-width: 0;
  max-width: 100%;
}

.project-lumosity-system-icons .project-lumosity-icons-s02-pair > img {
  display: block;
  width: 100%;
  height: auto;
  object-fit: contain;
}

/* Design max widths at 1× (@2x exports) */
.project-lumosity-system-icons .project-lumosity-icons-s02-pair--side {
  max-width: 16.375rem;
}

.project-lumosity-system-icons .project-lumosity-icons-s02-pair--utility {
  max-width: 20.125rem;
}

/*
 * Figment — stacked text + single-image galleries (S01, S02, S04–S06); per-section sizing later.
 */
.project-figment .project-story-grid-gallery:not(.project-figment-approach-gallery) {
  display: block;
}

.project-figment .project-story-grid-gallery:not(.project-figment-approach-gallery):not(.project-figment-s06-gallery) > img {
  display: block;
  width: 33vw;
  height: auto;
  max-width: 100%;
}

/* Figment S01 — three-iPad shot fills the inner column */
.project-figment [aria-labelledby="challenge-heading"] .project-story-grid-gallery:not(.project-figment-approach-gallery):not(.project-figment-s06-gallery) > img {
  width: 100%;
  max-width: 100%;
  margin-inline: auto;
}

/* Figment S02 — center the challenge image within the gallery row */
.project-figment [aria-labelledby="process-heading"] .project-story-grid-gallery > img {
  margin-inline: auto;
}

/* Figment S04 — center the system image within the gallery row */
.project-figment [aria-labelledby="figment-s04-heading"] .project-story-grid-gallery > img {
  margin-inline: auto;
}

/* Figment S05 — center the experience image within the gallery row */
.project-figment [aria-labelledby="figment-s05-heading"] .project-story-grid-gallery > img {
  margin-inline: auto;
}

/* Figment S06 — horizontal flex row; temporary height for GIF / multi-image preview */
.project-figment .project-story-grid-gallery.project-figment-s06-gallery {
  display: flex;
  flex-direction: row;
}

.project-figment-s06-media {
  display: flex;
  flex-direction: row;
  align-items: center;
  width: 100%;
  height: 500px;
}

.project-figment-s06-media > img {
  display: block;
  height: 100%;
  width: auto;
  max-width: 100%;
  object-fit: contain;
}

/*
 * Figment — page-end kicker screen row (temporary flex layout; tune sizing later).
 * Section 03 Approach uses .project-story-grid-gallery.project-figment-approach-gallery — horizontal scroll strip (see block below).
 */
.project-figment-kicker-row {
  display: flex;
  flex-direction: row;
  flex-wrap: nowrap;
  align-items: flex-end;
  gap: 0;
}

.project-figment-kicker-row > img {
  display: block;
  flex: 0 0 auto;
  width: auto;
  height: auto;
  max-width: none;
}

/*
 * Figment — 03 Approach: margin-aligned horizontal carousel (Ramp-style).
 * Track side padding aligns first/last slides with page content margins.
 */
.project-figment-approach-carousel {
  box-sizing: border-box;
  width: 100%;
  display: flex;
  flex-direction: column;
  gap: var(--Scale-1000);
}

.project-figment-approach-header {
  box-sizing: border-box;
  width: 100%;
  max-width: var(--project-story-inner-max-width);
  margin-inline: auto;
  padding-left: var(--project-inner-text-inset);
  padding-right: var(--project-inner-text-inset);
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: var(--Scale-600);
}

.project-figment-approach-heading {
  /* Typography from .project-content-heading; hook for carousel-specific overrides */
  margin: 0;
}

.project-figment-approach-controls {
  display: flex;
  align-items: center;
  gap: var(--Scale-300);
  flex-shrink: 0;
}

/* 56px circle nav — same fill/border as .back-to-top */
.project-figment-approach-nav {
  box-sizing: border-box;
  width: 56px;
  height: 56px;
  display: grid;
  place-items: center;
  border: 1px solid var(--Lime-500);
  border-radius: var(--Scale-1900);
  background-color: var(--Foundation-White);
  padding: 0;
  cursor: pointer;
  transition: background-color 400ms ease-in-out;
}

.project-figment-approach-nav:hover:not(:disabled) {
  background-color: var(--Lime-500);
}

.project-figment-approach-nav:focus-visible {
  outline: 2px solid var(--Foundation-Black);
  outline-offset: 2px;
}

.project-figment-approach-nav:disabled {
  opacity: 0.35;
  cursor: default;
}

.project-figment-approach-nav-icon {
  width: 24px;
  height: 24px;
  display: block;
}

.project-figment-approach-nav-icon--prev {
  transform: rotate(-90deg);
}

.project-figment-approach-nav-icon--next {
  transform: rotate(90deg);
}

.project-figment .project-story-grid-gallery.project-figment-approach-gallery {
  width: 100%;
  max-width: none;
  margin-left: 0;
  margin-right: 0;
  box-sizing: border-box;
  padding-left: 0;
  padding-right: 0;
  /* Scroll container; flex row lives on .project-figment-approach-track (rubber-band translateX) */
  display: block;
  overflow-x: auto;
  overflow-y: hidden;
  -webkit-overflow-scrolling: touch;
  touch-action: pan-x;
  /* Hide scrollbar — strip stays scrollable (wheel, trackpad, drag, touch) */
  scrollbar-width: none;
  -ms-overflow-style: none;
}

/* Horizontal slide row inside approach gallery (GSAP sets x for edge overscroll) */
.project-figment .project-story-grid-gallery.project-figment-approach-gallery .project-figment-approach-track {
  display: flex;
  flex-direction: row;
  flex-wrap: nowrap;
  align-items: stretch;
  gap: var(--Scale-400);
  width: max-content;
  box-sizing: border-box;
  min-height: 0;
  will-change: transform;
  /* First/last slide align with story text margins at scroll ends */
  padding-left: var(--project-inner-text-inset);
  padding-right: var(--project-inner-text-inset);
}

.project-figment .project-story-grid-gallery.project-figment-approach-gallery::-webkit-scrollbar {
  display: none;
  width: 0;
  height: 0;
}

@media (hover: hover) and (pointer: fine) {
  .project-figment .project-story-grid-gallery.project-figment-approach-gallery:hover {
    cursor: grab;
  }

  .project-figment .project-story-grid-gallery.project-figment-approach-gallery:active {
    cursor: grabbing;
  }
}

.project-figment .project-story-grid-gallery.project-figment-approach-gallery:focus {
  /* Mouse click focus: no ring; keyboard uses :focus-visible below */
  outline: none;
}

.project-figment .project-story-grid-gallery.project-figment-approach-gallery:focus-visible {
  /* Keyboard-style focus only (paired with :focus outline reset above) */
  outline: 1px solid color-mix(in srgb, var(--Warm-Grey-800) 28%, transparent);
  outline-offset: 3px;
}

.project-figment .project-story-grid-gallery.project-figment-approach-gallery .project-story-grid-cell {
  flex: 0 0 auto;
  /* Override global .project-story-grid-cell { min-width: 0 } so slides keep intrinsic width and the strip can scroll */
  min-width: min-content;
}

/* Slide + image scale together — 340×640 desktop, proportional 276×520 below 1025px */
.project-figment .project-story-grid-gallery.project-figment-approach-gallery .project-story-grid-cell-inner.project-figment-approach-slide {
  box-sizing: border-box;
  width: 276px;
  height: 520px;
  background-color: transparent;
  border-radius: var(--Scale-200);
  overflow: hidden;
}

/* Test assets always fit proportionally inside the current slide dimensions. */
.project-figment .project-story-grid-gallery.project-figment-approach-gallery .project-story-grid-cell-inner.project-figment-approach-slide > img {
  display: block;
  width: 100%;
  height: 100%;
  max-width: 100%;
  object-fit: contain;
  object-position: center;
}

/* Large desktop: full 340×640 slide */
@media (min-width: 1025px) {
  .project-figment .project-story-grid-gallery.project-figment-approach-gallery .project-story-grid-cell-inner.project-figment-approach-slide {
    width: 340px;
    height: 640px;
  }
}

/* Figment — 03 Approach: less air between lede block and gallery (~66% reduction vs default gap) */
.project-figment .project-story-grid {
  gap: calc(var(--Scale-1800) * 0.34);
}

/* Figment S03 — gap between body copy and carousel block (80px at all viewports) */
.project-figment .project-story-grid[aria-labelledby="solution-heading"] {
  gap: var(--Scale-1500);
}

.project-figment .project-story-grid-cell-inner:has(> img) {
  height: auto;
  min-height: 0;
  background-color: transparent;
}

.project-figment .project-story-grid-cell-inner > img {
  display: block;
  width: 100%;
  height: auto;
  max-width: none;
  object-fit: contain;
}

/* Figment — page-end kicker: screen row + tagline */
.project-figment-kicker {
  box-sizing: border-box;
  width: 100%;
  display: flex;
  flex-direction: column;
  align-items: center;
  padding-top: var(--Scale-1000);
  /* Space before prev/next pills (~120px in Figma) */
  margin-bottom: var(--Scale-1700);
}

.project-figment-tagline {
  display: inline-flex;
  flex-direction: row;
  align-items: center;
  justify-content: center;
  flex-wrap: wrap;
  gap: var(--Scale-600);
  /* Space from grid to tagline (~120px in Figma) */
  margin: var(--Scale-1700) 0 0;
  padding: 0;
  box-sizing: border-box;
}

.project-figment-tagline img {
  display: block;
  height: var(--Scale-1000);
  width: auto;
  max-width: none;
}

/* Metadata tags — live under lede in .project-intro-metadata */
.project-hero-tags {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: var(--Scale-200);
}

.project-hero-tag {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  padding: var(--Scale-100) var(--Scale-200);
  /* Fully rounded pill — matches Figma story tags */
  border-radius: 999px;
  background-color: var(--Blue-100);
  color: var(--Foundation-Black);
  font-family: var(--font-family-primary);
  font-weight: var(--font-weight-regular);
  font-size: var(--Font-Body-Paragraph-text-size);
  line-height: var(--Font-Body-Paragraph-line-height);
  white-space: nowrap;
}

/* Placeholder modifier system for quick per-project swaps */
.is-empty {
  background-image:
    linear-gradient(
      135deg,
      color-mix(in srgb, var(--Warm-Grey-200) 60%, transparent) 0%,
      color-mix(in srgb, var(--Warm-Grey-200) 60%, transparent) 40%,
      transparent 40%,
      transparent 60%,
      color-mix(in srgb, var(--Warm-Grey-200) 60%, transparent) 60%,
      color-mix(in srgb, var(--Warm-Grey-200) 60%, transparent) 100%
    );
  background-size: 24px 24px;
}

/*
 * Intro (legacy): lede (h1) + metadata under hero. Still used by Figment / Lumosity / template.
 * Divider under tags before story.
 */
.project-intro {
  box-sizing: border-box;
  width: 100%;
  padding-top: var(--Scale-600);
  padding-right: var(--page-gutter-inline);
  padding-bottom: var(--Scale-1000);
  padding-left: var(--page-gutter-inline);
  margin-bottom: 0;
}

.project-intro-inner {
  box-sizing: border-box;
  width: 100%;
  max-width: none;
}

/* Page h1 — primary intro voice; one step above section h2 at every breakpoint */
.project-intro-lede {
  margin: 0;
  max-width: 100%;
  color: var(--Foundation-Black);
  font-family: var(--font-family-primary);
  font-weight: var(--font-weight-regular);
  font-size: 36px;
  line-height: 43px;
}

.project-intro-metadata {
  position: relative;
  margin-top: var(--Scale-600);
  padding-bottom: var(--Scale-600);
}

.project-intro-metadata::after {
  content: "";
  position: absolute;
  bottom: 0;
  left: 0;
  right: 0;
  height: 1px;
  background-color: var(--Warm-Grey-100);
  pointer-events: none;
}

/*
 * Intro v2 (story pages): title bar + body + topline + feature image.
 * Same horizontal inset as .project-story-grid-text. Hero band stays full-bleed above.
 * First used on lumosity-system-icons; other stories migrate later.
 */
.project-intro--v2 {
  padding-top: 0;
  padding-right: 0;
  padding-bottom: 0;
  padding-left: 0;
}

.project-intro--v2 .project-intro-inner {
  display: flex;
  flex-direction: column;
  align-items: stretch;
  gap: var(--Scale-1000);
  box-sizing: border-box;
  width: 100%;
  max-width: var(--project-story-inner-max-width);
  margin-inline: auto;
  padding-top: var(--Scale-1000);
  padding-left: var(--project-inner-text-inset);
  padding-right: var(--project-inner-text-inset);
}

/* Title row: icon + h1 (visually same as section h2) | tags */
.project-intro-title-bar {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  justify-content: space-between;
  gap: var(--Scale-400);
  width: 100%;
}

.project-intro-name {
  display: flex;
  flex: 1 1 auto;
  align-items: center;
  gap: var(--Scale-400);
  min-width: 0;
}

.project-intro-title-icon {
  display: block;
  flex-shrink: 0;
  width: 28px;
  height: auto;
}

/* h1 reuses .project-content-heading type; keep block spacing tight in the title bar */
.project-intro-title {
  margin: 0;
}

.project-intro-title-bar .project-hero-tags {
  flex: 0 1 auto;
}

/* Intro paragraph under title — Outro token ≈ Figma 24px body */
.project-intro-body {
  margin: 0;
  width: 100%;
  color: var(--Foundation-Black);
  font-family: var(--font-family-primary);
  font-weight: var(--font-weight-regular);
  font-size: var(--Font-Body-Outro-text-size);
  line-height: var(--Font-Body-Outro-line-height);
}

/* Topline: My Role / Deliverables / Team — divider under block */
.project-intro-overview {
  display: flex;
  flex-wrap: wrap;
  align-items: flex-start;
  gap: var(--Scale-1500);
  width: 100%;
  box-sizing: border-box;
  padding-top: var(--Scale-600);
  padding-bottom: var(--Scale-1500);
  border-bottom: 1px solid var(--Warm-Grey-100);
}

.project-intro-overview-col {
  flex: 1 1 0;
  min-width: 0;
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  gap: var(--Scale-600);
}

.project-intro-overview-label {
  margin: 0;
  font-family: var(--font-family-primary);
  font-size: var(--Font-Body-Caption-text-size);
  line-height: var(--Font-Body-Caption-line-height);
  font-weight: var(--font-weight-medium);
  letter-spacing: 0.12em;
  text-transform: uppercase;
  color: var(--Warm-Grey-600);
}

.project-intro-overview-list {
  margin: 0;
  padding: 0;
  list-style: none;
  display: flex;
  flex-direction: column;
  gap: var(--Scale-400);
  color: var(--Foundation-Black);
  font-family: var(--font-family-primary);
  font-weight: var(--font-weight-regular);
  font-size: var(--Font-Body-Large-text-size);
  line-height: var(--Font-Body-Large-line-height);
}

.project-intro-overview-list li {
  margin: 0;
  padding: 0;
}

/* Bullet via ::before so spacing matches Figma without list indent quirks */
.project-intro-overview-list li::before {
  content: "•";
  margin-right: var(--Scale-200);
}

/* Temporary placeholder bullets — solid magenta until real topline copy lands */
.project-intro-overview-list--todo {
  color: #ff00ff;
}

/*
 * Feature image slot under topline. Magenta placeholder is temporary (Figma agnostic fill);
 * replace with <img> or a row of assets later.
 * Divider lives on .project-story-grid (not here) so every story section shares one rule.
 */
.project-intro-feature {
  box-sizing: border-box;
  width: 100%;
  padding-top: var(--Scale-1000);
  /* Space before the first story-section divider */
  padding-bottom: var(--Scale-1500);
}

.project-intro-feature > img {
  display: block;
  width: 100%;
  height: auto;
}

@media (max-width: 810px) {
  .project-intro-overview {
    flex-direction: column;
    gap: var(--Scale-1000);
  }

  .project-intro-overview-col {
    flex: 1 1 auto;
    width: 100%;
  }
}

.project-section-label {
  margin: 0;
  font-family: var(--font-family-primary);
  font-size: var(--Font-Body-Caption-text-size);
  line-height: var(--Font-Body-Caption-line-height);
  font-weight: var(--font-weight-medium);
  letter-spacing: 0.12em;
  text-transform: uppercase;
  color: var(--Warm-Grey-600);
}

.project-content-heading {
  margin: 0;
  color: var(--Foundation-Black);
  font-family: var(--font-family-primary);
  font-size: var(--Font-Headings-Section-text-size);
  line-height: var(--Font-Headings-Section-line-height);
  font-weight: var(--font-weight-regular);
}

.project-content-body {
  margin: 0;
  color: var(--Warm-Grey-800);
  font-family: var(--font-family-primary);
  font-size: var(--Font-Body-Large-text-size);
  line-height: var(--Font-Body-Large-line-height);
}

.project-content-body--medium {
  font-weight: var(--font-weight-medium);
}

/*
 * Story split: full-bleed row; 100vh tall on desktop (see min-width query below).
 * --media-right: text column first in DOM; inner inset on the left; media flush right.
 * --media-left: same measurements; media is visually left (grid placement), text on the right
 * with inner inset on the trailing edge. Put .project-story-text first in the DOM for a11y;
 * grid swaps columns from min-width 811px up.
 */
.project-story-split {
  width: 100vw;
  margin-left: calc(50% - 50vw);
  margin-right: calc(50% - 50vw);
  box-sizing: border-box;
  display: grid;
  grid-template-columns: 1fr 1fr;
  align-items: stretch;
  /* Horizontal alley between text and media (wider than story grid cell gap) */
  column-gap: var(--Scale-1300);
  /* No gap between full-height story rows — add margin when you want separation */
  margin-bottom: 0;
}

.project-story-text {
  box-sizing: border-box;
  padding-left: 0;
  padding-right: 0;
  min-width: 0;
  min-height: 0;
  display: flex;
  flex-direction: column;
  justify-content: flex-start;
  gap: var(--Scale-600);
}

.project-story-split--media-right .project-story-text {
  padding-left: var(--project-inner-text-inset);
}

.project-story-split--media-left .project-story-text {
  padding-right: var(--project-inner-text-inset);
}

.project-story-media {
  box-sizing: border-box;
  min-width: 0;
  min-height: 0;
  width: 100%;
  display: flex;
  flex-direction: column;
}

/* Solid placeholder; swap for <img> inside this wrapper when you have art */
.project-story-media-inner {
  box-sizing: border-box;
  flex: 1 1 auto;
  width: 100%;
  min-height: 0;
  background-color: var(--Warm-Grey-100);
}

/* Desktop: full viewport row; text vertically centered; --media-left swaps columns (text first in DOM) */
@media (min-width: 811px) {
  .project-story-split {
    min-height: 100vh;
    min-height: 100dvh;
  }

  .project-story-text {
    justify-content: center;
    /* Long copy can scroll instead of clipping when taller than the viewport */
    overflow-y: auto;
  }

  .project-story-split--media-left .project-story-media {
    grid-column: 1;
    grid-row: 1;
  }

  .project-story-split--media-left .project-story-text {
    grid-column: 2;
    grid-row: 1;
  }
}

/*
 * Story grid: inner-aligned text + gallery row (default 4 placeholders; Figment uses 7 real screens).
 * Height follows content (no forced 100vh). Top rule: Warm-Grey-100 divider, then 40px to section content.
 */
.project-story-grid {
  position: relative;
  box-sizing: border-box;
  width: 100%;
  display: flex;
  flex-direction: column;
  /* 40px below the top divider; 200px bottom for section-to-section air */
  padding-top: var(--Scale-1000);
  padding-bottom: 200px;
  gap: var(--Scale-1800);
  margin-bottom: 0;
}

/* Content-width divider — same inset as .project-story-grid-text */
.project-story-grid::before {
  content: "";
  position: absolute;
  top: 0;
  left: 50%;
  transform: translateX(-50%);
  box-sizing: border-box;
  width: 100%;
  max-width: var(--project-story-inner-max-width);
  height: 1px;
  padding-left: var(--project-inner-text-inset);
  padding-right: var(--project-inner-text-inset);
  background-color: var(--Warm-Grey-100);
  background-clip: content-box;
  pointer-events: none;
}

/*
 * Inner story column: shared max-width + symmetric inset for text and media blocks.
 * Full-bleed opt-outs: .project-figment-approach-gallery (horizontal strip), .project-story-split (50/50 bleed).
 */
.project-story-grid-text,
.project-story-grid-gallery:not(.project-figment-approach-gallery),
.project-lumosity-icons-kicker-grid,
.project-figment-kicker-row {
  box-sizing: border-box;
  width: 100%;
  max-width: var(--project-story-inner-max-width);
  margin-inline: auto;
  padding-left: var(--project-inner-text-inset);
  padding-right: var(--project-inner-text-inset);
}

.project-story-grid-text {
  display: flex;
  flex-direction: column;
  gap: var(--Scale-600);
}

/*
 * Above tablet: cap story copy line length for readability on large screens.
 * Cap sits on the text children so the shell stays full inner-column width
 * and left edges still align with galleries. Intro (.project-intro) is untouched.
 */
@media (min-width: 811px) {
  .project-story-grid-text > .project-section-label,
  .project-story-grid-text > .project-content-heading,
  .project-story-grid-text > .project-content-body,
  .project-story-grid-text > .project-lumosity-s02-challenges {
    max-width: 800px;
  }
}

.project-story-grid-gallery {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: var(--Scale-600);
}

.project-story-grid-cell {
  min-width: 0;
}

/* 400px = 10 × 40px gutter token; swap inner for <img> when assets exist */
.project-story-grid-cell-inner {
  box-sizing: border-box;
  width: 100%;
  height: calc(var(--Scale-1000) * 10);
  background-color: var(--Warm-Grey-100);
  border-radius: var(--Scale-200);
  overflow: hidden;
}

.project-story-grid-cell-inner > img {
  display: block;
  width: 100%;
  height: 100%;
  max-width: none;
  object-fit: cover;
}

.project-prev-next {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: var(--Scale-600);
  /* Equal space above and below the pill row */
  padding-top: var(--Scale-1500);
  padding-bottom: var(--Scale-1500);
}

.project-nav-pill {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: var(--Scale-200);
  min-height: 44px;
  padding: var(--Scale-300) var(--Scale-700);
  text-decoration: none;
}

.project-nav-pill:focus-visible {
  outline: 2px solid var(--Foundation-Black);
  outline-offset: 2px;
}

.project-nav-pill-icon {
  width: 16px;
  height: 16px;
  flex-shrink: 0;
  display: block;
}

@media (prefers-reduced-motion: reduce) {
  .project-figment .project-story-grid-gallery.project-figment-approach-gallery {
    scroll-snap-type: none;
  }
}

@media (max-width: 810px) {
  .project-story-split {
    grid-template-columns: 1fr;
    row-gap: var(--Scale-700);
    min-height: 0;
  }

  .project-story-split--media-left .project-story-media,
  .project-story-split--media-left .project-story-text {
    grid-column: auto;
    grid-row: auto;
  }

  .project-story-split--media-right .project-story-text,
  .project-story-split--media-left .project-story-text {
    padding-left: var(--project-inner-text-inset);
    padding-right: var(--project-inner-text-inset);
  }

  .project-story-grid {
    gap: var(--Scale-1700);
  }

  .project-lumosity-system-icons .project-story-grid {
    gap: var(--Scale-1500);
  }

  /* Figment: same ~66% reduction on tablet story-grid (base here is --Scale-1700) */
  .project-figment .project-story-grid {
    gap: calc(var(--Scale-1700) * 0.34);
  }

  .project-story-grid-gallery {
    grid-template-columns: repeat(2, 1fr);
  }

  /* Section 01: 4 over 4 (two rows); keep tablet icon size (not fill-to-96) */
  .project-lumosity-system-icons .project-lumosity-icons-s01-gallery {
    gap: var(--Scale-1400);
  }

  .project-lumosity-system-icons .project-lumosity-icons-s01-images {
    display: grid;
    grid-template-columns: repeat(4, minmax(0, 1fr));
    justify-content: space-between;
    row-gap: var(--Scale-600);
    column-gap: var(--Scale-400);
  }

  .project-lumosity-system-icons .project-lumosity-icons-s01-images > img {
    width: var(--lumosity-s01-icon-size);
    height: var(--lumosity-s01-icon-size);
    aspect-ratio: 1;
    max-width: var(--lumosity-s01-icon-size);
    justify-self: center;
  }

  /* Figment 03 — Approach carousel: stacked header + smaller nav on tablet/mobile */
  .project-figment-approach-header {
    flex-direction: column;
    align-items: flex-start;
    gap: var(--Scale-400);
    padding-left: var(--page-gutter-inline);
    padding-right: var(--page-gutter-inline);
  }

  .project-figment-approach-nav {
    width: 40px;
    height: 40px;
  }

  .project-figment-approach-nav-icon {
    width: 18px;
    height: 18px;
  }

  .project-figment .project-story-grid-gallery.project-figment-approach-gallery .project-figment-approach-track {
    padding-left: var(--page-gutter-inline);
    padding-right: var(--page-gutter-inline);
  }

  .project-story-grid-cell-inner {
    height: calc(var(--Scale-1000) * 5);
  }

  .project-story-media-inner {
    flex: none;
    min-height: 18rem;
  }

  .project-intro-lede {
    font-size: 30px;
    line-height: 36px;
  }

  .project-content-heading {
    font-size: 28px;
    line-height: 34px;
  }

  .project-content-body {
    font-size: var(--Font-Body-Paragraph-text-size);
    line-height: var(--Font-Body-Paragraph-line-height);
  }
}

@media (max-width: 390px) {
  /* Section 01: slightly smaller icons in the 4×2 grid */
  .project-lumosity-system-icons {
    --lumosity-s01-icon-size: var(--Scale-1100);
  }

  .project-detail-page {
    --project-detail-nav-height: 64px;
    --project-hero-band-height: 320px;
  }

  .project-detail-top-nav-inner {
    min-height: 64px;
  }

  .project-intro-metadata {
    margin-top: var(--Scale-400);
    padding-bottom: var(--Scale-400);
  }

  .project-story-grid-gallery {
    grid-template-columns: 1fr;
  }

  /* Figment 03 — Approach carousel: mobile gutters */
  .project-figment-approach-header {
    padding-left: var(--page-gutter-inline);
    padding-right: var(--page-gutter-inline);
  }

  .project-figment .project-story-grid-gallery.project-figment-approach-gallery .project-figment-approach-track {
    padding-left: var(--page-gutter-inline);
    padding-right: var(--page-gutter-inline);
  }

  .project-content-heading {
    font-size: 20px;
    line-height: 24px;
  }

  .project-intro-lede {
    font-size: 22px;
    line-height: 27px;
  }
}

/*
 * Lumosity s02 — desktop: two before/after couples in one row.
 * Fixed gap inside each couple; leftover width sits between the two couples.
 * Single row from 1052px up (avoids caption wrap at ~1051px).
 */
@media (min-width: 1052px) {
  .project-lumosity-system-icons .project-lumosity-icons-s02-gallery {
    flex-direction: row;
    flex-wrap: nowrap;
    align-items: flex-start;
    justify-content: space-between;
    overflow-x: visible;
  }

  .project-lumosity-system-icons .project-lumosity-icons-s02-group {
    width: auto;
    flex: 0 1 auto;
    justify-content: flex-start;
  }

  .project-lumosity-system-icons .project-lumosity-icons-s02-pair {
    flex: 0 1 auto;
  }
}

/* Stacked couples: more air between nav row and dropdown row */
@media (max-width: 1051px) {
  .project-lumosity-system-icons .project-lumosity-icons-s02-gallery {
    gap: var(--Scale-1400);
  }
}

/* Phone: stack s02 before/after within each couple */
@media (max-width: 699px) {
  .project-lumosity-system-icons .project-lumosity-icons-s02-group {
    flex-direction: column;
    align-items: center;
  }

  .project-lumosity-system-icons .project-lumosity-icons-s02-pair {
    width: 100%;
  }

  .project-lumosity-system-icons .project-lumosity-icons-s02-pair--side,
  .project-lumosity-system-icons .project-lumosity-icons-s02-pair--utility {
    max-width: 20.125rem;
  }
}

/* Section 03 narrow: keep rows; let tiles shrink to fit */
@media (max-width: 717px) {
  .project-lumosity-system-icons .project-lumosity-icons-s03-gallery {
    gap: var(--Scale-600);
  }

  .project-lumosity-system-icons .project-lumosity-icons-s03-row {
    justify-content: center;
    gap: var(--Scale-400);
  }

  .project-lumosity-system-icons .project-lumosity-icons-s03-row--two {
    gap: var(--Scale-400);
  }

  .project-lumosity-system-icons .project-lumosity-icons-s03-row--three {
    justify-content: space-between;
    gap: 0;
  }

  .project-lumosity-system-icons .project-lumosity-icons-s03-row > img {
    width: auto;
    height: auto;
    max-width: calc((100% - var(--Scale-400)) / 2);
    flex: 1 1 0;
    min-width: 0;
    aspect-ratio: 1;
    object-fit: contain;
  }

  /* Three-up: fit three tiles across */
  .project-lumosity-system-icons .project-lumosity-icons-s03-row--three > img {
    max-width: calc((100% - (var(--Scale-400) * 2)) / 3);
  }
}