/* Editorial case-study kit (case-study pages + the styleguide).
   Each section runs claim → reasoning → visual evidence. Ported from the Crexlabs ed-* system.
   Order: section shell → navy diagram panel → containment tree → annotated screens → columns */

/* Section shell ---------------------------------------------------------- */
.ed {
  display: grid;
  grid-template-columns: minmax(0,5fr) minmax(0,7fr);
  gap: 24px 64px;
  padding: 96px 0 0;
}

.case-label {
  font-family: var(--mono);
  font-size: var(--fs-micro);
  letter-spacing: .05em;
  text-transform: uppercase;
  color: var(--accent,var(--blue));
}

.ed-head h3 {
  margin-top: 14px;
  font-size: clamp(26px,2.4vw,36px);
  max-width: 18ch;
}

.ed-head h3:first-child {
  margin-top: 0;
}

/* An article with no lead: the head spans the row and leads straight into its visual. */
.ed:not(:has(> .ed-body))>.ed-head {
  grid-column: 1 / -1;
}

.ed:not(:has(> .ed-body))>.ed-head h3 {
  max-width: 28ch;
  text-wrap: balance;
}

/* An eyebrow on its own (no claim) introduces the block right beneath it. */
.ed-head:not(:has(h3))+.ed-visual {
  margin-top: 0;
}

/* Side by side, the head centres on the lead paragraph. The body's parts join the article grid, so opening
   "Read more" grows the row beneath without moving the heading. */
@media (min-width:901px) {
  .ed-body {
    display: contents;
  }
  .ed-head {
    grid-column: 1;
    grid-row: 1;
    align-self: center;
  }
  .ed-body>.ed-lead {
    grid-column: 2;
    grid-row: 1;
    align-self: center;
  }
  /* With an eyebrow above the claim, nudge the lead down by the eyebrow's height so it centres on the claim itself. */
  .ed:has(.ed-head>.case-label+h3)>.ed-body>.ed-lead {
    margin-top: 30px;
  }
  .ed-body>.ed-more {
    grid-column: 2;
    grid-row: 2;
    margin-top: 0;
  }
}

.ed-body p {
  color: var(--ink-2);
  line-height: 1.75;
  max-width: 38em;
}

.ed-body p+p {
  margin-top: 14px;
}

.ed-caption {
  font-size: var(--fs-small);
  color: var(--muted);
  line-height: 1.6;
}

/* Navy diagram panel: system and architecture diagrams live here. -------- */
.ed-panel {
  position: relative;
  overflow: hidden;
  isolation: isolate;
  border-radius: var(--radius-lg);
  padding: 48px 52px 52px;
  color: var(--on-dark);
  background:
    radial-gradient(55% 90% at 78% 100%,color-mix(in srgb,var(--blue) 70%,#000) 0,transparent 70%),
    radial-gradient(45% 70% at 0 0,#1b2c55 0,transparent 70%),
    var(--navy);
}

.ed-panel::after {
  content: "";
  position: absolute;
  inset: 0;
  background-image: var(--grain);
  background-size: 160px;
  mix-blend-mode: overlay;
  opacity: .28;
  pointer-events: none;
  z-index: -1;
}

.ed-panel .panel-art {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  z-index: -1;
  pointer-events: none;
}

.ed-panel .case-label {
  color: var(--world-light,#ffb59c);
}

.ed-panel h3 {
  margin-top: 12px;
  max-width: 22ch;
}

.ed-panel>p {
  color: var(--on-dark-muted);
  max-width: 40em;
  margin-top: 14px;
  line-height: 1.7;
}

/* Containment tree: the product model as a diagram rather than prose. ------- */
.tree {
  position: relative;
  margin-top: 40px;
}

.tree::after {
  content: "";
  position: absolute;
  right: 110px;
  top: 44px;
  bottom: 30px;
  border-left: 1px dashed rgba(var(--rgb-world-light,169,195,255),.25);
}

.tree-key {
  display: flex;
  justify-content: space-between;
  padding-bottom: 12px;
  border-bottom: 1px solid var(--navy-line);
  font-family: var(--mono);
  font-size: var(--fs-micro);
  letter-spacing: .05em;
  text-transform: uppercase;
  color: rgb(var(--rgb-world-light,169,195,255));
}

.tree-key span+span {
  width: 220px;
  text-align: center;
}

.tree-level .tree-level {
  margin-left: 12px;
  padding-left: 28px;
}

.tree-node,
.tree-ghost {
  position: relative;
}

/* Elbows: each child draws its share of the parent's line and a short joint. */
.tree-level .tree-level>.tree-node::before,
.tree-level .tree-level>.tree-ghost::before {
  content: "";
  position: absolute;
  left: -28px;
  top: 0;
  bottom: 0;
  border-left: 1px solid rgba(var(--rgb-world-light,169,195,255),.3);
}

.tree-level .tree-level>.tree-last::before {
  bottom: auto;
  height: 29px;
}

.tree-level .tree-level>.tree-node>.tree-row::before {
  content: "";
  position: absolute;
  left: -28px;
  top: 29px;
  width: 20px;
  border-top: 1px solid rgba(var(--rgb-world-light,169,195,255),.3);
}

/* The route the MVP took is drawn in signal; the joint glows where it passes. */
.tree-level .tree-level>.tree-node.on-route::before,
.tree-level .tree-level>.tree-node.on-route>.tree-row::before {
  border-color: rgba(var(--rgb-world-accent,255,181,156),.7);
}

.tree-row {
  position: relative;
  display: grid;
  grid-template-columns: 100px minmax(0,1fr) 220px;
  gap: 20px;
  align-items: center;
  min-height: 58px;
  padding: 8px 0;
}

.tree-name {
  font-size: 16px;
  font-weight: 500;
}

.tree-detail {
  font-size: var(--fs-small);
  line-height: 1.5;
  color: var(--on-dark-muted);
}

.tree-example {
  position: relative;
  z-index: 1;
  justify-self: center;
  padding: 6px 14px;
  border-radius: 999px;
  border: 1px solid rgba(var(--rgb-world-light,169,195,255),.35);
  background: var(--navy);
  font-family: var(--mono);
  font-size: 12px;
  white-space: nowrap;
  color: var(--world-ink,#cfdcff);
}

.is-selected>.tree-row .tree-example {
  border-color: #ffb59c;
  background: #3a2230;
  color: #fff;
  box-shadow: 0 0 0 5px #f2704a26,0 0 28px 4px #f2704a55;
}

.tree-ghost {
  height: 26px;
}

.tree-ghost::after {
  content: "";
  position: absolute;
  left: -8px;
  top: 12px;
  width: 64px;
  height: 3px;
  background: radial-gradient(circle,#a9c3ff 0 .9px,transparent 1.4px) 0 50%/8px 3px repeat-x;
  opacity: .55;
}

/* Annotated screens: numbered pins at % coordinates, paired with a legend. --- */
.annotated {
  display: grid;
  grid-template-columns: minmax(0,1.7fr) minmax(0,1fr);
  gap: 36px;
  align-items: center;
}

.pin-stage {
  position: relative;
  padding: 7%;
  border-radius: var(--radius-lg);
  overflow: hidden;
  isolation: isolate;
  background:
    radial-gradient(80% 90% at 90% 100%,var(--tint-2,#dfe6fd) 0,transparent 65%),
    linear-gradient(160deg,var(--tint,#eef2ff),#fff 80%);
}

.pin-stage::before {
  content: "";
  position: absolute;
  inset: 0;
  background-image: var(--grain);
  background-size: 160px;
  mix-blend-mode: overlay;
  opacity: .4;
  z-index: -1;
}

.pin-frame {
  position: relative;
}

.marker {
  position: absolute;
  left: var(--x);
  top: var(--y);
  width: 26px;
  height: 26px;
  margin: -13px 0 0 -13px;
  border-radius: 50%;
  display: grid;
  place-items: center;
  font-family: var(--mono);
  font-size: 12px;
  font-weight: 600;
  color: #fff;
  background: var(--accent,var(--blue));
  box-shadow: 0 0 0 4px color-mix(in srgb,var(--accent,var(--blue)) 22%,transparent),0 8px 18px -6px #141c2b80;
  transition: transform .3s var(--ease-out),box-shadow .3s var(--ease-out);
  z-index: 2;
}

.marker::after {
  content: "";
  position: absolute;
  inset: -4px;
  border-radius: 50%;
  border: 1px solid var(--accent,var(--blue));
  opacity: 0;
  animation: marker-pulse 2.8s var(--ease-out) infinite;
  animation-delay: calc(var(--n,0) * .35s);
}

@keyframes marker-pulse {
  0% {
    opacity: .7;
    transform: scale(1);
  }
  70%,100% {
    opacity: 0;
    transform: scale(1.9);
  }
}

.marker.is-active,
.marker:hover {
  transform: scale(1.18);
}

.marker-list {
  counter-reset: m;
}

.marker-list li {
  counter-increment: m;
  display: grid;
  grid-template-columns: 30px minmax(0,1fr);
  gap: 12px;
  padding: 14px 0;
  border-top: 1px solid var(--line);
  transition: opacity .3s;
}

.marker-list li::before {
  content: counter(m);
  width: 24px;
  height: 24px;
  border-radius: 50%;
  display: grid;
  place-items: center;
  font-family: var(--mono);
  font-size: 11.5px;
  color: var(--accent,var(--blue));
  border: 1px solid currentColor;
}

.marker-list strong {
  display: block;
  font-weight: 560;
  font-size: 15px;
}

.marker-list span {
  color: var(--muted);
  font-size: var(--fs-small);
  line-height: 1.55;
}

.marker-list.has-focus li:not(.is-active) {
  opacity: .45;
}

/* Two columns: scope lists, before/after models --------------------------- */
.ed-columns {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 40px;
}

.ed-column {
  padding-top: 16px;
  border-top: 1px solid var(--line-2);
}

.ed-column-head {
  font-family: var(--mono);
  font-size: var(--fs-micro);
  letter-spacing: .05em;
  text-transform: uppercase;
  color: var(--accent,var(--blue));
}

@media (max-width:900px) {
  .ed {
    grid-template-columns: 1fr;
    padding-top: 64px;
  }
  .ed-panel {
    padding: 30px 22px 32px;
  }
  .tree::after,
  .tree-key span+span {
    display: none;
  }
  .tree-row {
    grid-template-columns: 1fr;
    gap: 4px;
    padding: 12px 0;
  }
  .tree-example {
    justify-self: start;
    margin-top: 6px;
  }
  .annotated,
  .ed-columns {
    grid-template-columns: 1fr;
  }
}

@media (prefers-reduced-motion:reduce) {
  .marker::after {
    animation: none;
  }
}

/* =============================================================================
   Case-study page kit (karoo-flow.html and the studies that follow)
   Order: page → case hero → chapter + ed blocks → read-more → proof band → stats → findings → options →
          versus → diagrams → strips → gallery → next → chapter rail → lightbox → responsive → preferences
   ============================================================================= */

.case-page {
  background: var(--bg);
}

/* Figure captions in mono, split left and right. */
.case-stage-caption {
  display: flex;
  justify-content: space-between;
  gap: 24px;
  margin-top: 14px;
  font-family: var(--mono);
  font-size: var(--fs-micro);
  letter-spacing: .03em;
  color: var(--muted);
}

/* World hero ---------------------------------------------------------------
   The case study's signature opening: one full-bleed dark environment in the project's world colours
   (--world-* in tokens.css) holding the film title, the lead, the metadata and the product.
   Layers, back to front: base colour and .world-atmos light pools with grain → the world-* canvas → light behind
   the product → the product → the copy. Grain stays off the screenshots: it lives in the atmosphere and inside the
   canvas's own pixels. Markup: section.world-hero[data-world][data-dark][data-unfold] > .world-atmos, canvas,
   .wrap.world-grid > .world-copy (h1.world-title.film.is-glow[data-rise], p.world-lead), .world-product[data-world-anchor],
   dl.world-meta. */
.world-hero {
  --film-ink: var(--world-ink);
  --film-halo: rgba(var(--rgb-world-accent),.2);
  position: relative;
  overflow: clip;
  isolation: isolate;
  display: flex;
  align-items: center;
  min-height: 100svh;
  padding: 128px 0 44px;
  background: var(--world-base);
  color: var(--world-ink);
}

.world-atmos {
  position: absolute;
  inset: 0;
  z-index: -3;
  pointer-events: none;
  background:
    radial-gradient(55% 70% at 74% 58%,rgba(var(--rgb-world-accent),.16) 0,transparent 70%),
    radial-gradient(70% 45% at 60% 112%,rgba(var(--rgb-world-deep),.22) 0,transparent 70%),
    radial-gradient(38% 50% at 6% 0,rgba(var(--rgb-world-light),.06) 0,transparent 70%);
}

.world-atmos::after {
  content: "";
  position: absolute;
  inset: 0;
  background-image: var(--grain);
  background-size: 160px;
  mix-blend-mode: overlay;
  opacity: .22;
}

.world-hero > canvas {
  position: absolute;
  inset: -10px;
  width: calc(100% + 20px);
  height: calc(100% + 20px);
  z-index: -2;
  pointer-events: none;
  transition: transform .8s var(--ease-out);
}

.world-grid {
  display: grid;
  grid-template-columns: minmax(0,42fr) minmax(0,58fr);
  grid-template-areas: "copy product" "meta meta";
  column-gap: clamp(32px,4vw,64px);
  row-gap: clamp(32px,5vh,52px);
  align-items: center;
  width: 100%;
}

.world-copy {
  grid-area: copy;
}

.world-title {
  font-family: var(--display);
  font-size: clamp(52px,6.2vw,96px);
  font-weight: var(--display-weight);
  letter-spacing: -.05em;
  line-height: .98;
  text-wrap: balance;
  color: var(--world-ink);
}

.world-lead {
  margin-top: 26px;
  max-width: 34em;
  font-size: var(--fs-lead);
  line-height: 1.6;
  color: color-mix(in srgb,var(--world-ink) 84%,var(--world-base));
  text-wrap: pretty;
}

.world-meta {
  grid-area: meta;
  display: grid;
  grid-template-columns: repeat(4,minmax(0,1fr));
  border-top: 1px solid rgba(var(--rgb-world-light),.18);
}

.world-meta > div {
  padding: 18px 24px 0 0;
}

.world-meta > div + div {
  padding-left: 24px;
  border-left: 1px solid rgba(var(--rgb-world-light),.1);
}

.world-meta dt {
  font-family: var(--mono);
  font-size: var(--fs-micro);
  letter-spacing: .05em;
  text-transform: uppercase;
  color: var(--world-muted);
}

.world-meta dd {
  margin-top: 8px;
  font-size: 15px;
  line-height: 1.45;
  color: var(--world-ink);
}

.world-meta .company {
  display: inline-flex;
  align-items: center;
  gap: 8px;
}

.world-meta .company img {
  width: 18px;
  height: 18px;
  object-fit: contain;
}

/* The product: sharp and steady, with light gathered behind it. */
.world-product {
  grid-area: product;
  position: relative;
}

.world-product::before {
  content: "";
  position: absolute;
  inset: -6% -12% -18%;
  z-index: -1;
  pointer-events: none;
  background: radial-gradient(closest-side,rgba(var(--rgb-world-accent),.2),rgba(var(--rgb-world-accent),.06) 60%,transparent);
}

.world-product img {
  display: block;
  width: 100%;
  height: auto;
}

.world-product > img {
  filter: drop-shadow(0 40px 50px #0000008c);
}

.world-product .screen {
  border-color: #ffffff1f;
  box-shadow: 0 50px 90px -40px #000000d9,0 0 0 1px #ffffff14;
}

.world-product .screen-phone {
  box-shadow: 0 0 0 5px #0b0f17,0 0 0 6px #ffffff2a,0 50px 90px -36px #000;
}

/* Flow: the three-screen composition, scheduling in the middle, bleeding slightly past the column. */
.world-product .world-shot-flow {
  width: 108%;
  max-width: none;
  margin-left: -4%;
}

/* Cubie: the laptop seated in the strata, with a soft contact shadow. */
.world-shot-cubie {
  position: relative;
  width: 108%;
}

.world-shot-cubie::after {
  content: "";
  position: absolute;
  left: 8%;
  right: 8%;
  bottom: -3%;
  height: 8%;
  z-index: -1;
  border-radius: 50%;
  background: radial-gradient(closest-side,#000a,transparent);
  filter: blur(6px);
}

/* Biomarker: the result detail in front, overview and trend behind and slightly lower. */
.world-phones {
  display: grid;
  grid-template-columns: 1fr 1.18fr 1fr;
  align-items: center;
  width: min(100%,570px);
  margin: 0 auto;
}

.world-phones .screen {
  scale: .9;
  translate: 0 7%;
}

.world-phones .screen:first-child {
  translate: 14% 7%;
}

.world-phones .screen:last-child {
  translate: -14% 7%;
}

.world-phones .is-front {
  position: relative;
  z-index: 1;
  scale: 1;
  translate: 0 -2%;
}

/* Cut-out phones carry transparent margins and wider proportions, so they scale up to hold the same visible size. */
.world-phones .screen.is-cutout {
  scale: 1.08;
  box-shadow: none;
}

.world-phones .screen.is-cutout.is-front {
  scale: 1.2;
}

/* Wanda: the desktop broad and readable, the phone overlapping its right edge. */
.world-pair {
  display: grid;
}

.world-pair .screen {
  grid-area: 1 / 1;
}

.world-pair .screen-desktop {
  align-self: start;
  width: 84%;
}

.world-pair .screen-phone {
  position: relative;
  align-self: end;
  justify-self: end;
  width: 24%;
  margin-top: 12%;
}

@media (max-width:1100px) {
  .world-hero {
    padding: 120px 0 56px;
  }
  .world-grid {
    grid-template-columns: minmax(0,1fr);
    grid-template-areas: "copy" "product" "meta";
    row-gap: 36px;
  }
  .world-meta {
    grid-template-columns: repeat(2,minmax(0,1fr));
    row-gap: 18px;
  }
  .world-meta > div:nth-child(odd) {
    padding-left: 0;
    border-left: 0;
  }
  .world-product {
    justify-self: center;
    width: 100%;
    max-width: 760px;
  }
  .world-shot-cubie {
    width: 100%;
  }
  .world-phones {
    width: min(118%,620px);
    margin-left: 50%;
    translate: -50% 0;
  }
  .world-phones:has(.is-cutout) {
    margin-block: 33px 19px;
  }
  .world-pair .screen {
    align-self: center;
  }
  .world-pair .screen-desktop {
    width: 80%;
  }
  .world-pair .screen-phone {
    width: 28%;
    margin-top: 0;
  }
}

@media (max-width:600px) {
  .world-meta {
    grid-template-columns: minmax(0,1fr);
  }
  .world-meta > div,
  .world-meta > div + div {
    padding: 14px 0 0;
    border-left: 0;
  }
  .world-meta > div + div {
    border-top: 1px solid rgba(var(--rgb-world-light),.1);
  }
  .world-phones {
    grid-template-columns: .8fr 1.4fr .8fr;
    width: 124%;
  }
}

@media (prefers-reduced-motion:reduce) {
  .world-hero > canvas {
    transform: none!important;
    transition: none;
  }
}

@media (forced-colors:active) {
  .world-hero > canvas,
  .world-atmos,
  .world-product::before {
    display: none;
  }
}

@media print {
  .world-hero {
    min-height: 0;
    padding: 24px 0;
    background: #fff;
    color: #000;
    transform: none!important;
  }
  .world-hero > canvas,
  .world-atmos,
  .world-product::before {
    display: none;
  }
  .world-title,
  .world-lead,
  .world-meta dd,
  .world-meta dt {
    color: #000;
  }
}

/* World continuation ---------------------------------------------------------
   Past the hero, the case study's dark surfaces take its world instead of the generic navy: navy chapters, the proof
   band, dark diagrams, panels and screenshot stages remap their navy tokens to the world, and light stages warm to
   --world-stage. A .world-fragment canvas (data-specimen="world-<project>" data-world-view="stage") carries a quiet
   piece of the hero's form at the bottom of a chapter or behind a dark stage. Scoped to .case-page, so the header,
   contact and next-project cards keep their own look. */
.case-page :is(.chapter-navy,.proof-band,.ed-panel,.diagram.is-navy,.shot-stage.is-navy,.versus-col.is-ours) {
  --navy: var(--world-base);
  --navy-line: rgba(var(--rgb-world-light),.12);
  --on-dark: var(--world-ink);
  --on-dark-muted: var(--world-muted);
}

.case-page .chapter-navy {
  --muted: var(--world-muted);
}

.case-page .chapter-navy .navy-glow {
  background: radial-gradient(closest-side,rgba(var(--rgb-world-accent),.2),transparent);
}

.case-page :is(.proof-band,.ed-panel,.diagram.is-navy,.shot-stage.is-navy,.versus-col.is-ours) {
  background:
    radial-gradient(60% 90% at 88% 100%,rgba(var(--rgb-world-accent),.24) 0,transparent 70%),
    radial-gradient(45% 70% at 0 0,rgba(var(--rgb-world-light),.07) 0,transparent 70%),
    var(--world-base);
}

/* A dark diagram inside a world chapter stays a quiet glass panel, not world on world. */
.case-page .chapter-navy .diagram.is-navy {
  background: rgba(var(--rgb-world-light),.03);
}

.case-page :is(.proof-band .case-label,.versus-col.is-ours .tag-label) {
  color: var(--world-light);
}

.case-page .is-navy .dg-sub {
  fill: var(--world-muted);
}

.case-page .is-navy .dg-flow:not(.is-warm) {
  stroke: rgba(var(--rgb-world-light),.85);
}

.case-page .shot-stage:not(.is-navy) {
  background:
    radial-gradient(70% 90% at 92% 100%,rgba(var(--rgb-world-accent),.16) 0,transparent 65%),
    radial-gradient(50% 60% at 0 0,var(--tint-2) 0,transparent 70%),
    linear-gradient(160deg,var(--world-stage),#fff 85%);
}

.world-fragment {
  position: absolute;
  left: 0;
  bottom: 0;
  width: 100%;
  height: min(640px,70%);
  z-index: -1;
  pointer-events: none;
  -webkit-mask-image: linear-gradient(transparent,#000 45%);
  mask-image: linear-gradient(transparent,#000 45%);
}

.shot-stage > .world-fragment {
  height: 100%;
  -webkit-mask-image: none;
  mask-image: none;
}

@media (forced-colors:active) {
  .world-fragment {
    display: none;
  }
}

@media print {
  .world-fragment {
    display: none;
  }
}

/* Chapters + sections ------------------------------------------------------ */
.chapter {
  padding-top: 40px;
}

.chapter-mark {
  display: flex;
  align-items: baseline;
  gap: 18px;
  padding-top: 110px;
  border-bottom: 1px solid var(--line);
  padding-bottom: 18px;
}

.chapter-mark span {
  font-family: var(--mono);
  font-size: var(--fs-micro);
  color: var(--accent,var(--blue));
  letter-spacing: .05em;
}

.chapter-mark h2 {
  font-size: clamp(30px,3vw,44px);
}

.ed .ed-head h3 {
  font-size: clamp(26px,2.5vw,38px);
  max-width: 16ch;
}

.ed-wide {
  grid-column: 1 / -1;
}

.ed-visual {
  grid-column: 1 / -1;
  margin-top: 28px;
}

.ed-lead {
  font-size: var(--fs-lead);
  line-height: 1.65;
  color: var(--ink-2);
  max-width: 36em;
  text-wrap: pretty;
}

.ed-lead+.ed-lead {
  margin-top: 14px;
}

/* Read more: the full original reasoning, one click away. */
.ed-more {
  margin-top: 22px;
  border-top: 1px solid var(--line);
}

.ed-more summary {
  list-style: none;
  display: inline-flex;
  align-items: center;
  gap: 10px;
  padding: 14px 0 4px;
  font-size: 14px;
  font-weight: 500;
  color: var(--accent-ink,var(--blue));
  cursor: pointer;
}

.ed-more summary::-webkit-details-marker {
  display: none;
}

.ed-more summary::before {
  content: "";
  width: 18px;
  height: 18px;
  border-radius: 50%;
  border: 1px solid currentColor;
  background:
    linear-gradient(currentColor,currentColor) center/8px 1.4px no-repeat,
    linear-gradient(currentColor,currentColor) center/1.4px 8px no-repeat;
  transition: transform .3s var(--ease);
}

.ed-more[open] summary::before {
  transform: rotate(45deg);
}

.ed-more .more-body {
  padding: 12px 0 4px;
  animation: rise .35s var(--ease-out);
}

.ed-more .more-body p {
  color: var(--ink-2);
  line-height: 1.75;
  max-width: 40em;
}

.ed-more .more-body p+p,
.ed-more .more-body h4+p {
  margin-top: 12px;
}

.ed-more .more-body h4 {
  margin-top: 22px;
  font-family: var(--display);
  font-size: 18px;
  font-weight: 560;
  letter-spacing: -.015em;
}

.ed-more .more-body h4:first-child {
  margin-top: 0;
}

/* Proof band: the short version, on navy ------------------------------------ */
.proof-band {
  position: relative;
  overflow: hidden;
  isolation: isolate;
  margin-top: 96px;
  padding: 56px 56px 52px;
  border-radius: var(--radius-lg);
  color: var(--on-dark);
  background:
    radial-gradient(60% 90% at 100% 100%,color-mix(in srgb,var(--blue) 60%,transparent) 0,transparent 70%),
    radial-gradient(40% 60% at 0 0,#1b2c55 0,transparent 70%),
    var(--navy);
}

.proof-band::after {
  content: "";
  position: absolute;
  inset: 0;
  background-image: var(--grain);
  background-size: 160px;
  mix-blend-mode: overlay;
  opacity: .26;
  pointer-events: none;
  z-index: -1;
}

.proof-band .case-label {
  color: #ffb59c;
}

.proof-band h2 {
  margin-top: 14px;
  font-size: clamp(30px,3.2vw,48px);
  max-width: 20ch;
}

.proof-band>p {
  margin-top: 18px;
  max-width: 44em;
  color: var(--on-dark-muted);
  line-height: 1.7;
}

.proof-stats {
  display: grid;
  grid-template-columns: repeat(3,1fr);
  gap: 18px;
  margin-top: 40px;
}

.proof-stats>div {
  padding: 22px 24px 24px;
  border-radius: 18px;
  background: #ffffff0d;
  box-shadow: inset 0 0 0 1px #ffffff17;
}

.proof-stats b {
  display: block;
  font-family: var(--display);
  font-size: clamp(34px,3.4vw,52px);
  font-weight: 560;
  letter-spacing: -.04em;
  line-height: 1;
  color: #fff;
}

.proof-stats span {
  display: block;
  margin-top: 10px;
  font-size: 14px;
  line-height: 1.5;
  color: var(--on-dark-muted);
}

/* Stats (light) */
.stat-row {
  display: grid;
  grid-template-columns: repeat(3,1fr);
  border-top: 1px solid var(--line);
  border-bottom: 1px solid var(--line);
}

.stat-row>div {
  padding: 26px 24px 24px 0;
}

.stat-row>div+div {
  padding-left: 24px;
  border-left: 1px solid var(--line);
}

.stat-row b {
  display: block;
  font-family: var(--display);
  font-size: clamp(40px,4vw,62px);
  font-weight: 560;
  letter-spacing: -.045em;
  line-height: 1;
  color: var(--ink);
}

.stat-row span {
  display: block;
  margin-top: 10px;
  font-size: 14px;
  color: var(--muted);
  line-height: 1.5;
}

/* Findings: numbered statements in display weight ------------------------------ */
.findings {
  counter-reset: f;
  display: grid;
  grid-template-columns: repeat(3,minmax(0,1fr));
  gap: 0 32px;
}

.findings>li {
  counter-increment: f;
  padding-top: 18px;
  border-top: 1px solid var(--line-2);
}

.findings>li::before {
  content: counter(f,decimal-leading-zero);
  font-family: var(--mono);
  font-size: var(--fs-micro);
  color: var(--accent,var(--blue));
}

.findings strong {
  display: block;
  margin-top: 12px;
  font-family: var(--display);
  font-size: clamp(20px,1.7vw,24px);
  font-weight: 560;
  letter-spacing: -.02em;
  line-height: 1.2;
}

.findings p {
  margin-top: 10px;
  font-size: 15px;
  color: var(--ink-2);
  line-height: 1.7;
}

/* With "Where it showed up" rows, each item's parts (number, title, text, where) share the list's rows, so the
   dashed rules start at the same height across the row, under the tallest text. */
.findings:has(.where)>li {
  display: grid;
  grid-row: span 4;
  grid-template-rows: subgrid;
  align-content: start;
}

.findings .where {
  margin-top: 14px;
  padding-top: 12px;
  border-top: 1px dashed var(--line-2);
  font-size: 14px;
  color: var(--muted);
}

.findings .where b {
  font-family: var(--mono);
  font-size: 11px;
  letter-spacing: .05em;
  text-transform: uppercase;
  color: var(--accent-ink,var(--blue));
  display: block;
  margin-bottom: 4px;
  font-weight: 500;
}

/* Option cards: what we evaluated and why it lost */
.options {
  display: grid;
  grid-template-columns: repeat(3,minmax(0,1fr));
  gap: 18px;
}

.option {
  position: relative;
  padding: 24px 24px 26px;
  border-radius: 18px;
  background: var(--bg-2);
  border: 1px solid var(--line);
}

.option .verdict {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  font-family: var(--mono);
  font-size: 11px;
  letter-spacing: .05em;
  text-transform: uppercase;
  color: var(--muted);
}

.option .verdict::before {
  content: "";
  width: 14px;
  height: 1.4px;
  background: currentColor;
}

.option h4 {
  margin-top: 14px;
  font-family: var(--display);
  font-size: 20px;
  font-weight: 560;
  letter-spacing: -.02em;
}

.option p {
  margin-top: 10px;
  font-size: 15px;
  color: var(--ink-2);
  line-height: 1.65;
}

.callout {
  position: relative;
  padding: 26px 30px 26px 34px;
  border-radius: 18px;
  background: var(--tint,var(--blue-wash));
}

.callout::before {
  content: "";
  position: absolute;
  left: 0;
  top: 22px;
  bottom: 22px;
  width: 3px;
  border-radius: 3px;
  background: var(--accent,var(--blue));
}

.callout p {
  font-family: var(--display);
  font-size: clamp(19px,1.6vw,23px);
  font-weight: 450;
  letter-spacing: -.015em;
  line-height: 1.4;
  color: var(--ink);
  max-width: 44em;
}

/* Versus: the commodity model vs what we built */
.versus {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 18px;
}

.versus-col {
  padding: 26px 28px 28px;
  border-radius: 20px;
  border: 1px solid var(--line);
  background: #fff;
}

.versus-col.is-ours {
  color: var(--on-dark);
  border: 0;
  background:
    radial-gradient(70% 90% at 100% 100%,color-mix(in srgb,var(--blue) 55%,transparent) 0,transparent 70%),
    var(--navy);
}

.versus-col .tag-label {
  font-family: var(--mono);
  font-size: 11px;
  letter-spacing: .05em;
  text-transform: uppercase;
  color: var(--muted);
}

.versus-col.is-ours .tag-label {
  color: #ffb59c;
}

.versus-col h4 {
  margin-top: 10px;
  font-family: var(--display);
  font-size: 24px;
  font-weight: 560;
  letter-spacing: -.025em;
}

.versus-col ul {
  margin-top: 18px;
}

.versus-col li {
  display: grid;
  grid-template-columns: 18px 1fr;
  gap: 12px;
  padding: 11px 0;
  border-top: 1px solid var(--line);
  font-size: 15px;
  line-height: 1.5;
  color: var(--ink-2);
}

.versus-col.is-ours li {
  border-color: #ffffff17;
  color: #dbe3f3;
}

.versus-col li::before {
  content: "";
  width: 7px;
  height: 7px;
  margin: 7px 0 0 4px;
  border-radius: 50%;
  background: var(--line-2);
}

.versus-col.is-ours li::before {
  background: var(--signal);
  box-shadow: 0 0 0 4px color-mix(in srgb,var(--signal) 22%,transparent);
}

/* Diagram panels: SVG flows on navy or a light tint ------------------------------- */
.diagram {
  position: relative;
  overflow: hidden;
  isolation: isolate;
  border-radius: var(--radius-lg);
  padding: 34px 36px 30px;
  background:
    radial-gradient(70% 90% at 90% 100%,var(--tint-2,#dfe6fd) 0,transparent 65%),
    linear-gradient(160deg,var(--tint,#eef2ff),#fbfcfe 80%);
}

.diagram.is-navy {
  color: var(--on-dark);
  background:
    radial-gradient(55% 90% at 82% 100%,color-mix(in srgb,var(--blue) 65%,transparent) 0,transparent 70%),
    radial-gradient(45% 70% at 0 0,#1b2c55 0,transparent 70%),
    var(--navy);
}

.diagram::after {
  content: "";
  position: absolute;
  inset: 0;
  background-image: var(--grain);
  background-size: 160px;
  mix-blend-mode: overlay;
  opacity: .3;
  pointer-events: none;
  z-index: -1;
}

.diagram svg {
  display: block;
  width: 100%;
  height: auto;
  overflow: visible;
}

.diagram-caption {
  display: flex;
  justify-content: space-between;
  gap: 18px;
  margin-top: 18px;
  padding-top: 14px;
  border-top: 1px solid var(--line);
  font-family: var(--mono);
  font-size: var(--fs-micro);
  letter-spacing: .03em;
  color: var(--muted);
}

.diagram.is-navy .diagram-caption {
  border-color: #ffffff17;
  color: #93a6c6;
}

.diagram-caption b {
  font-weight: 500;
  color: var(--accent-ink,var(--blue));
}

.diagram.is-navy .diagram-caption b {
  color: #ffb59c;
}

/* SVG vocabulary: nodes, labels, connectors. Motion encodes meaning and every diagram reads frozen. */
.dg-node {
  fill: #fff;
  stroke: #141c2b1f;
  stroke-width: 1;
}

.is-navy .dg-node {
  fill: #ffffff0f;
  stroke: #ffffff2e;
}

.dg-node.is-key {
  fill: var(--navy);
  stroke: none;
}

.is-navy .dg-node.is-key {
  fill: #fff;
}

.dg-label {
  font-family: var(--display);
  font-size: 15px;
  font-weight: 560;
  letter-spacing: -.01em;
  fill: var(--ink);
}

.is-navy .dg-label {
  fill: #fff;
}

.dg-label.on-key {
  fill: #fff;
}

.is-navy .dg-label.on-key {
  fill: var(--navy);
}

.dg-sub {
  font-family: var(--mono);
  font-size: 11px;
  letter-spacing: .04em;
  fill: var(--muted);
}

.is-navy .dg-sub {
  fill: #93a6c6;
}

.dg-line {
  fill: none;
  stroke: #141c2b29;
  stroke-width: 1.2;
}

.is-navy .dg-line {
  stroke: #ffffff2b;
}

.dg-flow {
  fill: none;
  stroke: var(--accent,var(--blue));
  stroke-width: 1.6;
  stroke-linecap: round;
  stroke-dasharray: 2 7;
  animation: dg-flow 1.6s linear infinite;
}

.is-navy .dg-flow {
  stroke: #9db4ff;
}

.dg-flow.is-warm {
  stroke: var(--signal);
}

@keyframes dg-flow {
  to {
    stroke-dashoffset: -18;
  }
}

/* Out of step: each tool runs on its own clock (the problem); in step: one rhythm (the fix). */
.dg-flow.desync-1 { animation-duration: 1.1s; }
.dg-flow.desync-2 { animation-duration: 2.3s; animation-delay: -.7s; }
.dg-flow.desync-3 { animation-duration: 1.7s; animation-delay: -1.3s; }
.dg-flow.desync-4 { animation-duration: 2.9s; animation-delay: -.4s; }
.dg-flow.desync-5 { animation-duration: 1.4s; animation-delay: -1.9s; }

/* A 24px line icon inside a round node: <g class="dg-icon" transform="translate(cx,cy) scale(1.15) translate(-12,-12)">. */
.dg-icon {
  fill: none;
  stroke: var(--accent,var(--blue));
  stroke-width: 1.6;
  stroke-linecap: round;
  stroke-linejoin: round;
}

.dg-icon.on-key {
  stroke: #fff;
}

.is-navy .dg-icon {
  stroke: var(--world-light,#ffb59c);
}

.is-navy .dg-icon.on-key {
  stroke: var(--navy);
}

.dg-dot {
  fill: var(--accent,var(--blue));
}

.is-navy .dg-dot {
  fill: #ffb59c;
}

.dg-break-gap {
  fill: var(--navy);
}

.dg-break {
  fill: none;
  stroke: var(--signal);
  stroke-width: 1.6;
  stroke-linecap: round;
}

/* Stage strip: the four enrollment stages and the tasks inside them ------------------------- */
.stage-strip {
  display: grid;
  grid-template-columns: repeat(4,minmax(0,1fr));
  gap: 14px;
  counter-reset: s;
}

.stage-strip>li {
  position: relative;
  padding: 20px 20px 22px;
  border-radius: 18px;
  background: #fff;
  border: 1px solid var(--line);
  counter-increment: s;
}

.stage-strip>li:not(:last-child)::after {
  content: "";
  position: absolute;
  right: -14px;
  top: 34px;
  width: 14px;
  height: 1.4px;
  background: var(--line-2);
}

.stage-strip .stage-n {
  display: inline-grid;
  place-items: center;
  width: 26px;
  height: 26px;
  border-radius: 50%;
  font-family: var(--mono);
  font-size: 12px;
  color: #fff;
  background: var(--navy);
}

.stage-strip .stage-goal {
  display: block;
  margin-top: 14px;
  font-family: var(--display);
  font-size: 18px;
  font-weight: 560;
  letter-spacing: -.015em;
  line-height: 1.25;
}

.stage-strip .tasks {
  display: flex;
  flex-wrap: wrap;
  gap: 6px;
  margin-top: 14px;
}

.task-chip {
  display: inline-flex;
  align-items: center;
  gap: 7px;
  padding: 5px 11px 5px 9px;
  border-radius: 999px;
  font-family: var(--mono);
  font-size: 12px;
  background: var(--tint,var(--blue-wash));
  color: var(--accent-ink,var(--blue));
}

.task-chip::before {
  content: "";
  width: 6px;
  height: 6px;
  border-radius: 50%;
  background: currentColor;
}

/* 80/20: coverage bars */
.coverage {
  display: grid;
  gap: 22px;
}

.coverage-row {
  display: grid;
  grid-template-columns: 210px minmax(0,1fr) 70px;
  gap: 18px;
  align-items: center;
}

.coverage-row .label {
  font-size: 14px;
  line-height: 1.4;
  color: var(--ink-2);
}

.coverage-row .label b {
  display: block;
  font-family: var(--display);
  font-size: 17px;
  font-weight: 560;
  color: var(--ink);
}

.coverage-row .bars {
  display: flex;
  gap: 4px;
}

.coverage-row .team {
  position: relative;
  flex: 1;
  height: 34px;
  border-radius: 8px;
  background: #141c2b0a;
  box-shadow: inset 0 0 0 1px #141c2b12;
  overflow: hidden;
}

.coverage-row .team i {
  position: absolute;
  inset: 0 auto 0 0;
  width: var(--fill);
  background: var(--accent,var(--blue));
  border-radius: 8px;
}

.coverage-row .team.is-pes {
  flex: 1.4;
}

.coverage-row .team em {
  position: absolute;
  left: 10px;
  top: 50%;
  translate: 0 -50%;
  z-index: 1;
  font-family: var(--mono);
  font-size: 11px;
  font-style: normal;
  color: var(--muted);
}

/* White only where the fill is wide enough to sit behind the label. */
.coverage-row .team.is-filled em {
  color: #fff;
}

.coverage-row .pct {
  font-family: var(--display);
  font-size: 22px;
  font-weight: 560;
  letter-spacing: -.02em;
  text-align: right;
}

/* Cut list: designed, then deliberately not built */
.cuts {
  display: grid;
  grid-template-columns: repeat(3,minmax(0,1fr));
  gap: 18px;
}

.cut {
  padding: 22px 24px 24px;
  border-radius: 18px;
  border: 1px dashed var(--line-2);
  background: repeating-linear-gradient(135deg,transparent 0 9px,#141c2b05 9px 10px);
}

.cut .verdict {
  font-family: var(--mono);
  font-size: 11px;
  letter-spacing: .05em;
  text-transform: uppercase;
  color: var(--accent-ink,var(--blue));
}

.cut h4 {
  margin-top: 12px;
  font-family: var(--display);
  font-size: 20px;
  font-weight: 560;
  letter-spacing: -.02em;
}

.cut p {
  margin-top: 10px;
  font-size: 15px;
  line-height: 1.65;
  color: var(--ink-2);
}

/* Screens on stages --------------------------------------------------------------- */
.shot-stage {
  position: relative;
  overflow: hidden;
  isolation: isolate;
  border-radius: var(--radius-lg);
  padding: 6%;
  background:
    radial-gradient(80% 90% at 90% 100%,var(--tint-2,#dfe6fd) 0,transparent 65%),
    linear-gradient(160deg,var(--tint,#eef2ff),#fff 80%);
}

.shot-stage::before {
  content: "";
  position: absolute;
  inset: 0;
  background-image: var(--grain);
  background-size: 160px;
  mix-blend-mode: overlay;
  opacity: .4;
  z-index: -1;
}

.shot-stage.is-navy {
  background:
    radial-gradient(70% 90% at 88% 100%,#2d4fe0 0,transparent 62%),
    radial-gradient(50% 60% at 4% 0,#1e2d57 0,transparent 70%),
    var(--navy);
}

.shot-stage .screen {
  position: relative;
  border-radius: 12px;
}

.pair {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 18px;
}

.pair figcaption,
.shot figcaption {
  margin-top: 12px;
  font-size: 14px;
  color: var(--muted);
  line-height: 1.55;
}

.pair figcaption b,
.shot figcaption b {
  display: block;
  font-family: var(--display);
  font-size: 16px;
  font-weight: 560;
  color: var(--ink);
}

/* Shell vs body: the same frame on two task types, with the variable body outlined. */
.shell {
  position: relative;
}

.shell-body {
  position: absolute;
  left: var(--x);
  top: var(--y);
  width: var(--w);
  height: var(--h);
  border-radius: 10px;
  border: 1.5px dashed var(--signal);
  background: color-mix(in srgb,var(--signal) 7%,transparent);
  pointer-events: none;
}

.shell-body span {
  position: absolute;
  left: 10px;
  top: -12px;
  padding: 3px 9px;
  border-radius: 999px;
  font-family: var(--mono);
  font-size: 11px;
  color: #fff;
  background: var(--signal);
  white-space: nowrap;
}

/* Pipeline: design system → code */
.pipeline {
  display: grid;
  grid-template-columns: repeat(4,minmax(0,1fr));
  gap: 14px;
}

.pipeline>li {
  position: relative;
  padding: 18px 18px 20px;
  border-radius: 16px;
  background: #ffffff12;
  box-shadow: inset 0 0 0 1px #ffffff1f;
}

.pipeline>li:not(:last-child)::after {
  content: "";
  position: absolute;
  right: -14px;
  top: 50%;
  width: 14px;
  height: 1.4px;
  background: repeating-linear-gradient(90deg,var(--world-accent,#9db4ff) 0 3px,transparent 3px 6px);
}

.pipeline b {
  display: block;
  font-family: var(--display);
  font-size: 17px;
  font-weight: 560;
  color: #fff;
}

.pipeline span {
  display: block;
  margin-top: 6px;
  font-size: 13px;
  color: #b3c0d6;
  line-height: 1.5;
}

/* Metrics we set up to measure */
.metrics {
  display: grid;
  grid-template-columns: repeat(auto-fit,minmax(200px,1fr));
  gap: 14px;
}

.metrics>li {
  padding: 18px 20px 20px;
  border-radius: 16px;
  background: var(--bg-2);
  border: 1px solid var(--line);
}

.metrics b {
  display: flex;
  align-items: center;
  gap: 9px;
  font-family: var(--display);
  font-size: 17px;
  font-weight: 560;
  letter-spacing: -.01em;
}

.metrics b::before {
  content: "";
  width: 8px;
  height: 8px;
  border-radius: 50%;
  border: 1.5px solid var(--accent,var(--blue));
}

.metrics span {
  display: block;
  margin-top: 8px;
  font-size: 14px;
  color: var(--ink-2);
  line-height: 1.55;
}

/* Learnings: two pull quotes */
.learnings {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 18px;
}

.learning {
  padding: 30px 32px 30px;
  border-radius: 20px;
  background: var(--bg-2);
  border: 1px solid var(--line);
}

.learning .case-label {
  color: var(--accent-ink,var(--blue));
}

.learning blockquote {
  margin: 14px 0 0;
  font-family: var(--display);
  font-size: clamp(22px,2vw,28px);
  font-weight: 500;
  letter-spacing: -.025em;
  line-height: 1.25;
  color: var(--ink);
}

.learning p {
  margin-top: 14px;
  color: var(--ink-2);
  line-height: 1.7;
}

/* Gallery: final designs, each on a stage, opening the lightbox */
.gallery {
  display: grid;
  grid-template-columns: repeat(2,minmax(0,1fr));
  gap: 22px;
}

.gallery .shot.is-wide {
  grid-column: 1 / -1;
}

.shot-btn {
  display: block;
  width: 100%;
  padding: 0;
  border: 0;
  background: none;
  text-align: left;
  cursor: zoom-in;
}

.shot-btn .shot-stage {
  transition: transform .5s var(--ease),box-shadow .5s var(--ease);
}

.shot-btn:hover .shot-stage {
  transform: translateY(-3px);
  box-shadow: 0 30px 60px -44px #141c2b80;
}

/* Next project */
.next-project {
  margin-top: 120px;
}

.next-card {
  position: relative;
  display: grid;
  grid-template-columns: minmax(0,1fr) auto;
  align-items: center;
  gap: 24px;
  padding: 36px 40px;
  border-radius: var(--radius-lg);
  overflow: hidden;
  isolation: isolate;
  background:
    radial-gradient(80% 90% at 90% 10%,#9be3dc 0,transparent 55%),
    radial-gradient(80% 90% at 8% 100%,#7aa6ff 0,transparent 60%),
    linear-gradient(160deg,#e3f5f2,#cfe8ef 55%,#b9cdf5);
  transition: transform .5s var(--ease);
}

.next-card::before {
  content: "";
  position: absolute;
  inset: 0;
  background-image: var(--grain);
  background-size: 160px;
  mix-blend-mode: overlay;
  opacity: .4;
  z-index: -1;
}

.next-card:hover {
  transform: translateY(-3px);
}

.next-card .case-label {
  color: #0b646c;
}

.next-card h3 {
  margin-top: 10px;
  font-size: clamp(28px,3vw,44px);
}

.next-card p {
  margin-top: 8px;
  color: var(--ink-2);
}

.next-card .circle-arrow {
  width: 54px;
  height: 54px;
  font-size: 20px;
}

/* Chapter rail: a glass ladder on the left edge; a button + panel on phones ----------------------- */
.toc {
  position: fixed;
  left: 22px;
  top: 50%;
  translate: 0 -50%;
  z-index: 20;
  transition: opacity .35s var(--ease);
}

.toc.is-hidden {
  opacity: 0;
  pointer-events: none;
}

.toc-btn {
  display: none;
}

.toc-rail {
  position: relative;
  isolation: isolate;
  display: flex;
  flex-direction: column;
  gap: 2px;
  padding: 10px 8px;
  border-radius: 18px;
}

.toc-rail::before,
.toc-rail::after {
  content: "";
  position: absolute;
  inset: 0;
  border-radius: inherit;
  z-index: -1;
  opacity: 0;
  transition: opacity .3s var(--ease);
}

/* At rest the rail is only its tick lines; the glass panel fades in with the labels on hover or focus. */
.toc:hover .toc-rail::before,
.toc:hover .toc-rail::after,
.toc:focus-within .toc-rail::before,
.toc:focus-within .toc-rail::after {
  opacity: 1;
}

.toc-rail::before {
  -webkit-backdrop-filter: blur(var(--glass-blur)) saturate(1.6);
  backdrop-filter: blur(var(--glass-blur)) saturate(1.6);
}

.toc-rail::after {
  background: #ffffffa8;
  box-shadow: var(--glass-rim),0 0 0 1px var(--glass-line),0 18px 40px -22px #141c2b59;
}

.toc-item {
  display: flex;
  align-items: center;
  gap: 10px;
  padding: 7px 8px;
  border-radius: 10px;
  color: var(--muted);
}

.toc-tick {
  width: 18px;
  height: 2px;
  border-radius: 2px;
  background: #8a96aa8c;
  transition: width .3s var(--ease),background .3s;
}

.toc-item:hover .toc-tick {
  width: 22px;
  background: #8a96aa;
}

.toc-label {
  max-width: 0;
  overflow: hidden;
  white-space: nowrap;
  font-size: 13px;
  transition: max-width .4s var(--ease);
}

.toc:hover .toc-label,
.toc:focus-within .toc-label {
  max-width: 180px;
}

.toc-item[aria-current] {
  color: var(--ink);
}

.toc-item[aria-current] .toc-tick {
  width: 28px;
  background: var(--accent,var(--blue));
}

/* Lightbox ------------------------------------------------------------------------------ */
.lightbox {
  position: fixed;
  inset: 0;
  z-index: 50;
  display: grid;
  place-items: center;
  padding: 40px;
  background: #0a1224d9;
  -webkit-backdrop-filter: blur(10px);
  backdrop-filter: blur(10px);
  opacity: 0;
  visibility: hidden;
  transition: opacity .3s var(--ease),visibility 0s .3s;
}

.lightbox.is-open {
  opacity: 1;
  visibility: visible;
  transition: opacity .3s var(--ease);
}

.lightbox-box {
  width: min(1200px,100%);
  color: var(--on-dark);
}

.lightbox-media {
  overflow: hidden;
  border-radius: 14px;
  background: #fff;
}

.lightbox-track {
  display: flex;
  transition: transform .45s var(--ease-out);
}

.lightbox-slide {
  flex: none;
  width: 100%;
}

.lightbox-slide img {
  width: 100%;
  max-height: 72vh;
  object-fit: contain;
  background: #fff;
}

.lightbox-bar {
  display: flex;
  justify-content: space-between;
  align-items: flex-start;
  gap: 24px;
  margin-top: 18px;
}

.lightbox-caption {
  transition: opacity .3s;
}

.lightbox-caption.is-fading {
  opacity: 0;
}

.lightbox-caption b {
  display: block;
  font-family: var(--display);
  font-size: 20px;
  font-weight: 560;
  letter-spacing: -.02em;
}

.lightbox-caption span {
  display: block;
  margin-top: 6px;
  color: var(--on-dark-muted);
  max-width: 44em;
}

.lightbox-controls {
  display: flex;
  align-items: center;
  gap: 10px;
  flex: none;
}

.lightbox-controls button {
  display: grid;
  place-items: center;
  width: 42px;
  height: 42px;
  border-radius: 50%;
  border: 0;
  color: #fff;
  background: #ffffff1a;
  box-shadow: var(--glass-rim-dark);
}

.lightbox-controls button:hover {
  background: #ffffff2e;
}

/* A single-image group has nothing to step to: drop the arrows and the empty counter. */
.lightbox-controls button[hidden],
.lightbox-counter:empty {
  display: none;
}

.lightbox-counter {
  font-family: var(--mono);
  font-size: 12px;
  color: #93a6c6;
  min-width: 44px;
  text-align: center;
}

/* Diagrams come in two drawings: wide for desktop, and a portrait one for phones (no sideways scrolling). */
.diagram .dg-tall {
  display: none;
}

@media (max-width:760px) {
  .diagram .dg-wide {
    display: none;
  }
  .diagram .dg-tall {
    display: block;
    width: 100%;
    max-width: 420px;
    margin: 0 auto;
  }
}

/* Navy chapters: a chapter that unfolds from a card into a full-bleed navy section ------------ */
.chapter-navy {
  --ink: var(--on-dark);
  --ink-2: var(--on-dark-muted);
  --muted: #93a6c6;
  --line: var(--navy-line);
  --line-2: var(--navy-line);
  --bg-2: #ffffff08;
  --accent: var(--accent-on-dark,#ff8a63);
  --accent-ink: var(--accent-ink-on-dark,#ffb59c);
  --tint: #ffffff0a;
  margin-top: 120px;
  padding: 10px 0 140px;
}

.chapter-navy .chapter-mark {
  padding-top: 90px;
}

.chapter-navy h2,
.chapter-navy h3,
.chapter-navy h4 {
  color: var(--on-dark);
}

.chapter-navy .option,
.chapter-navy .metrics>li,
.chapter-navy .learning,
.chapter-navy .callout {
  -webkit-backdrop-filter: blur(6px);
  backdrop-filter: blur(6px);
  box-shadow: inset 0 1px 0 #ffffff0d;
}

.chapter-navy .callout {
  border: 1px solid var(--navy-line);
}

/* A light comparison column inside a dark chapter becomes glass, so its light text stays readable. */
.chapter-navy .versus-col:not(.is-ours) {
  background: #ffffff08;
  -webkit-backdrop-filter: blur(6px);
  backdrop-filter: blur(6px);
}

/* A navy diagram inside a navy chapter becomes a quiet glass panel, not navy on navy. */
.chapter-navy .diagram.is-navy {
  background: #ffffff06;
  box-shadow: inset 0 0 0 1px var(--navy-line);
}

/* A next card can take the next project's theme: <a class="next-card theme-cubie is-themed">. */
.next-card.is-themed {
  background:
    radial-gradient(80% 90% at 90% 10%,var(--tint-2) 0,transparent 55%),
    radial-gradient(80% 90% at 8% 100%,color-mix(in srgb,var(--accent) 30%,transparent) 0,transparent 60%),
    linear-gradient(160deg,var(--tint),#fff 90%);
}

.next-card.is-themed .case-label {
  color: var(--accent-ink);
}

/* A next-project card opens onto the destination's world: <a class="next-project next-card theme-<next> is-themed">
   with a canvas.world-fragment of that project, gathered to the right behind the arrow. */
.next-project.is-themed {
  color: var(--world-ink);
  background:
    radial-gradient(70% 130% at 100% 100%,rgba(var(--rgb-world-accent),.26) 0,transparent 65%),
    radial-gradient(40% 80% at 0 0,rgba(var(--rgb-world-light),.06) 0,transparent 70%),
    var(--world-base);
}

.next-project.is-themed::before {
  opacity: .22;
}

.next-project.is-themed h3 {
  color: var(--world-ink);
}

.next-project.is-themed p {
  color: var(--world-muted);
}

.next-project.is-themed .case-label {
  color: var(--world-light);
}

.next-project.is-themed .circle-arrow {
  color: var(--world-ink);
  border-color: rgba(var(--rgb-world-light),.45);
}

.next-project.is-themed:is(:hover,:focus-visible) .circle-arrow {
  background: var(--world-accent);
  border-color: var(--world-accent);
  color: var(--world-base);
}

.next-project > .world-fragment {
  height: 100%;
  -webkit-mask-image: linear-gradient(90deg,transparent 25%,#000 75%);
  mask-image: linear-gradient(90deg,transparent 25%,#000 75%);
}

/* Breathing room between the next-project card and the contact section. */
.case-page .next-card {
  margin-bottom: 140px;
}

/* Responsive ----------------------------------------------------------------------------- */
/* The rail needs a side margin wider than itself; below that it becomes a small glass button with a panel. */
@media (max-width:1439px) {
  .toc {
    left: auto;
    right: 14px;
    top: auto;
    bottom: 16px;
    translate: none;
  }
  .toc-btn {
    display: grid;
    place-items: center;
    width: 46px;
    height: 46px;
    border-radius: 50%;
    border: 0;
    color: var(--ink);
    background: #ffffffd9;
    -webkit-backdrop-filter: blur(10px);
    backdrop-filter: blur(10px);
    box-shadow: var(--glass-rim),0 0 0 1px var(--glass-line),0 14px 30px -14px #141c2b80;
  }
  .toc-btn svg {
    width: 20px;
    height: 20px;
    fill: currentColor;
    stroke: currentColor;
    stroke-width: 1.6;
    stroke-linecap: round;
  }
  .toc-rail {
    position: absolute;
    right: 0;
    bottom: 56px;
    display: none;
    min-width: 220px;
    padding: 8px;
  }
  .toc-rail::before,
  .toc-rail::after {
    opacity: 1;
  }
  .toc.is-open .toc-rail {
    display: flex;
    animation: rise .25s var(--ease);
  }
  .toc-label {
    max-width: none;
    font-size: 15px;
  }
}

@media (max-width:1100px) {
  .findings,
  .options,
  .cuts {
    grid-template-columns: 1fr;
    gap: 16px;
  }
  .findings>li {
    padding-bottom: 6px;
  }
  .stage-strip {
    grid-template-columns: 1fr 1fr;
  }
  .stage-strip>li::after {
    display: none;
  }
  .pipeline {
    grid-template-columns: 1fr 1fr;
  }
  .pipeline>li::after {
    display: none;
  }
}

@media (max-width:900px) {
  .chapter-navy {
    margin-top: 72px;
    padding-bottom: 88px;
  }
  .chapter-navy .chapter-mark {
    padding-top: 64px;
  }
  .case-page .next-card {
    margin-bottom: 80px;
  }
  .chapter-mark {
    padding-top: 80px;
  }
  .proof-band {
    padding: 34px 22px;
  }
  .proof-stats,
  .stat-row,
  .versus,
  .pair,
  .learnings,
  .gallery {
    grid-template-columns: 1fr;
  }
  .stat-row>div+div {
    padding-left: 0;
    border-left: 0;
    border-top: 1px solid var(--line);
  }
  .coverage-row {
    grid-template-columns: 1fr;
    gap: 8px;
  }
  .coverage-row .pct {
    text-align: left;
  }
  .stage-strip,
  .pipeline {
    grid-template-columns: 1fr;
  }
  .diagram {
    padding: 22px 16px 18px;
  }
  .next-card {
    padding: 26px 22px;
  }
  .lightbox {
    padding: 16px;
  }
  .lightbox-bar {
    flex-direction: column;
  }
}

@media (prefers-reduced-motion:reduce) {
  .dg-flow {
    animation: none;
  }
}