/* =========================================================================
   KAIRO — Capabilities Page
   Two folds: interactive force-graph hero + clustered capability library
   ========================================================================= */

/* --- Cluster palette (warm monochrome, all visible on ink) --------------- */
:root {
  --cap-c1: oklch(0.78 0.165 40);   /* Identity & Voice — terra bright */
  --cap-c2: oklch(0.72 0.150 55);   /* Knowledge — terra-orange */
  --cap-c3: oklch(0.70 0.130 70);   /* Channels — terra-amber */
  --cap-c4: oklch(0.74 0.080 85);   /* Content & Coordination — warm beige */
  --cap-c5: oklch(0.80 0.040 95);   /* Intelligence — bone-warm */
  --cap-c6: oklch(0.88 0.020 90);   /* Learning & Trust — near-bone */
}

/* --- Fold 1 · Hero ------------------------------------------------------- */

.cap-hero {
  position: relative;
  min-height: 100dvh;
  background: var(--ink);
  color: var(--bone);
  overflow: hidden;
  isolation: isolate;
  padding: 0;
  display: grid;
  grid-template-rows: auto 1fr auto;
}

.cap-hero__head {
  max-width: var(--page-max);
  margin-inline: auto;
  padding: 140px var(--page-pad-x) var(--s-8);
  width: 100%;
  display: grid;
  gap: var(--s-4);
}

.cap-hero__eyebrow {
  font-family: var(--font-mono);
  font-size: var(--t-micro);
  letter-spacing: var(--tr-micro);
  text-transform: uppercase;
  color: color-mix(in oklch, var(--bone) 55%, transparent);
  display: inline-flex;
  align-items: center;
  gap: 10px;
}
.cap-hero__eyebrow::before {
  content: "";
  width: 6px; height: 6px;
  border-radius: 50%;
  background: var(--terra-light);
}

.cap-hero h1 {
  font-size: clamp(2.5rem, 5.4vw, 4.75rem);
  line-height: 1.02;
  letter-spacing: var(--tr-display);
  font-weight: var(--fw-semi);
  color: var(--bone);
  text-wrap: balance;
  max-width: 18ch;
}
.cap-hero h1 em {
  font-family: var(--font-editorial);
  font-style: italic;
  font-weight: 400;
  color: var(--terra-light);
}

.cap-hero__lede {
  font-size: var(--t-lede);
  color: color-mix(in oklch, var(--bone) 78%, transparent);
  max-width: 56ch;
  margin-top: var(--s-3);
}

/* Stage holds the canvas, overlay card, legend, and scroll indicator. */
.cap-stage {
  position: relative;
  width: 100%;
  max-width: var(--page-max);
  margin-inline: auto;
  padding-inline: var(--page-pad-x);
  display: grid;
  align-items: stretch;
}

.cap-graph {
  position: relative;
  width: 100%;
  height: clamp(420px, 56vh, 640px);
  border: 1px solid color-mix(in oklch, var(--bone) 12%, transparent);
  border-radius: var(--r-xl);
  background:
    radial-gradient(ellipse at 50% 50%, oklch(0.24 0.012 60) 0%, var(--ink) 78%);
  overflow: hidden;
  cursor: grab;
}
.cap-graph[data-dragging="true"] { cursor: grabbing; }
.cap-graph__canvas {
  width: 100%;
  height: 100%;
  display: block;
  touch-action: none;
}

/* --- Overlay card (appears when a node is clicked) ----------------------- */

.cap-overlay {
  position: absolute;
  inset: auto var(--s-4) var(--s-4) auto;
  width: min(360px, calc(100% - var(--s-8)));
  background: color-mix(in oklch, var(--ink) 70%, oklch(0.10 0.005 60));
  border: 1px solid color-mix(in oklch, var(--bone) 18%, transparent);
  border-radius: var(--r-lg);
  padding: var(--s-6);
  color: var(--bone);
  box-shadow: 0 24px 64px -16px oklch(0 0 0 / 0.5);
  opacity: 0;
  transform: translateY(8px);
  pointer-events: none;
  transition:
    opacity var(--d-state) var(--ease-out),
    transform var(--d-state) var(--ease-out);
}
.cap-overlay[data-open="true"] {
  opacity: 1;
  transform: translateY(0);
  pointer-events: auto;
}

.cap-overlay__meta {
  display: flex;
  align-items: center;
  gap: 10px;
  font-family: var(--font-mono);
  font-size: var(--t-micro);
  letter-spacing: var(--tr-micro);
  text-transform: uppercase;
  color: color-mix(in oklch, var(--bone) 60%, transparent);
  margin-bottom: var(--s-3);
}
.cap-overlay__dot {
  width: 8px; height: 8px;
  border-radius: 50%;
  background: var(--cluster-color, var(--terra-light));
}
.cap-overlay__num { color: var(--bone); }
.cap-overlay__cluster { color: color-mix(in oklch, var(--bone) 70%, transparent); }

.cap-overlay__title {
  font-size: 1.375rem;
  font-weight: var(--fw-semi);
  letter-spacing: var(--tr-head);
  color: var(--bone);
  margin-bottom: var(--s-3);
  line-height: 1.2;
  text-wrap: balance;
}

.cap-overlay__summary {
  font-size: 0.9375rem;
  color: color-mix(in oklch, var(--bone) 80%, transparent);
  line-height: 1.55;
  margin-bottom: var(--s-5);
}

.cap-overlay__foot {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: var(--s-4);
}
.cap-overlay__link {
  font-size: var(--t-small);
  color: var(--terra-light);
  border-bottom: 1px solid color-mix(in oklch, var(--terra-light) 60%, transparent);
  padding-bottom: 2px;
  transition: color var(--d-hover) var(--ease-out), border-color var(--d-hover) var(--ease-out);
}
.cap-overlay__link:hover {
  color: var(--bone);
  border-color: var(--bone);
}
.cap-overlay__close {
  font-family: var(--font-mono);
  font-size: var(--t-micro);
  letter-spacing: var(--tr-micro);
  text-transform: uppercase;
  color: color-mix(in oklch, var(--bone) 55%, transparent);
  transition: color var(--d-hover) var(--ease-out);
}
.cap-overlay__close:hover { color: var(--bone); }

/* --- Legend (cluster filter) -------------------------------------------- */

.cap-legend {
  position: absolute;
  inset: var(--s-4) auto auto var(--s-4);
  display: grid;
  gap: 6px;
  background: color-mix(in oklch, var(--ink) 60%, transparent);
  border: 1px solid color-mix(in oklch, var(--bone) 12%, transparent);
  border-radius: var(--r-md);
  padding: var(--s-3) var(--s-4);
  backdrop-filter: blur(8px);
  -webkit-backdrop-filter: blur(8px);
  max-width: 240px;
}
.cap-legend__title {
  font-family: var(--font-mono);
  font-size: var(--t-micro);
  letter-spacing: var(--tr-micro);
  text-transform: uppercase;
  color: color-mix(in oklch, var(--bone) 50%, transparent);
  margin-bottom: 4px;
}
.cap-legend__item {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  font-family: var(--font-mono);
  font-size: var(--t-micro);
  letter-spacing: var(--tr-micro);
  text-transform: uppercase;
  color: color-mix(in oklch, var(--bone) 78%, transparent);
  cursor: pointer;
  background: none;
  border: 0;
  padding: 3px 0;
  text-align: left;
  transition: color var(--d-hover) var(--ease-out);
}
.cap-legend__item:hover { color: var(--bone); }
.cap-legend__item[data-active="false"] { opacity: 0.4; }
.cap-legend__swatch {
  width: 9px; height: 9px;
  border-radius: 50%;
  background: var(--swatch-color, var(--terra));
}

/* --- Scroll indicator --------------------------------------------------- */

.cap-scroll {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 8px;
  padding: var(--s-8) 0 var(--s-10);
  color: color-mix(in oklch, var(--bone) 60%, transparent);
  text-decoration: none;
}
.cap-scroll__label {
  font-family: var(--font-mono);
  font-size: var(--t-micro);
  letter-spacing: var(--tr-micro);
  text-transform: uppercase;
}
.cap-scroll__chev {
  width: 16px;
  height: 16px;
  color: var(--terra-light);
  animation: capBounce 1.8s var(--ease-out) infinite;
}
@keyframes capBounce {
  0%, 100% { transform: translateY(0); opacity: 0.7; }
  50%      { transform: translateY(6px); opacity: 1; }
}
@media (prefers-reduced-motion: reduce) {
  .cap-scroll__chev { animation: none; }
}

/* --- Fold 2 · Cluster sections ------------------------------------------ */

.cap-cluster {
  padding-block: var(--section-pad);
}
.cap-cluster--bone     { background: var(--bone); }
.cap-cluster--terra    { background: var(--terra-50); border-top: 1px solid color-mix(in oklch, var(--terra) 18%, var(--rule)); }
.cap-cluster--bonewarm { background: var(--bone-warm); border-top: 1px solid var(--rule); }
.cap-cluster--ink {
  background: var(--ink);
  color: var(--bone);
  border-top: 1px solid color-mix(in oklch, var(--bone) 14%, transparent);
}

.cap-cluster__head {
  max-width: 920px;
  margin-bottom: var(--s-12);
  display: grid;
  gap: var(--s-4);
}
.cap-cluster__eyebrow {
  font-family: var(--font-mono);
  font-size: var(--t-micro);
  letter-spacing: var(--tr-micro);
  text-transform: uppercase;
  display: inline-flex;
  align-items: center;
  gap: 10px;
  color: var(--ink-muted);
}
.cap-cluster__eyebrow::before {
  content: "";
  width: 6px; height: 6px;
  border-radius: 50%;
  background: var(--cluster-color, var(--terra));
}
.cap-cluster--ink .cap-cluster__eyebrow { color: color-mix(in oklch, var(--bone) 55%, transparent); }
.cap-cluster__head h2 {
  font-size: var(--t-h1);
  line-height: var(--lh-snug);
  letter-spacing: var(--tr-head);
  text-wrap: balance;
}
.cap-cluster--ink .cap-cluster__head h2 { color: var(--bone); }
.cap-cluster__head h2 em {
  font-family: var(--font-editorial);
  font-style: italic;
  font-weight: 400;
  color: var(--terra-800);
}
.cap-cluster--ink .cap-cluster__head h2 em { color: var(--terra-light); }
.cap-cluster__intro {
  font-size: var(--t-lede);
  color: var(--ink-soft);
  max-width: 64ch;
  line-height: 1.55;
}
.cap-cluster--ink .cap-cluster__intro { color: color-mix(in oklch, var(--bone) 78%, transparent); }

/* Card grid */
.cap-grid {
  display: grid;
  grid-template-columns: minmax(0, 1fr);
  gap: var(--s-4);
}
@media (min-width: 720px) { .cap-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); gap: var(--s-6); } }
@media (min-width: 1024px) { .cap-grid--3 { grid-template-columns: repeat(3, minmax(0, 1fr)); } }
@media (min-width: 1024px) { .cap-grid--4 { grid-template-columns: repeat(2, minmax(0, 1fr)); gap: var(--s-6); } }

/* --- Capability item ---------------------------------------------------- */

.cap-item {
  background: var(--bone);
  border: 1px solid var(--rule);
  border-radius: var(--r-lg);
  padding: var(--s-8);
  display: grid;
  gap: var(--s-4);
  scroll-margin-top: 96px;
  transition: border-color var(--d-state) var(--ease-out);
}
.cap-cluster--terra .cap-item {
  background: var(--bone);
  border-color: color-mix(in oklch, var(--terra) 18%, var(--rule));
}
.cap-cluster--bonewarm .cap-item { background: var(--bone); }
.cap-cluster--ink .cap-item {
  background: color-mix(in oklch, var(--ink) 65%, oklch(0.10 0.005 60));
  border-color: color-mix(in oklch, var(--bone) 14%, transparent);
  color: var(--bone);
}
.cap-item:target {
  border-color: var(--terra);
  box-shadow: 0 0 0 4px color-mix(in oklch, var(--terra) 18%, transparent);
}

.cap-item__meta {
  display: inline-flex;
  align-items: center;
  gap: 10px;
  font-family: var(--font-mono);
  font-size: var(--t-micro);
  letter-spacing: var(--tr-micro);
  text-transform: uppercase;
  color: var(--ink-muted);
}
.cap-cluster--ink .cap-item__meta { color: color-mix(in oklch, var(--bone) 60%, transparent); }
.cap-item__num {
  color: var(--cluster-color, var(--terra));
  font-weight: var(--fw-semi);
}
.cap-cluster--ink .cap-item__num { color: var(--cluster-color, var(--terra-light)); }

.cap-item h3 {
  font-size: 1.375rem;
  font-weight: var(--fw-semi);
  letter-spacing: var(--tr-head);
  text-wrap: balance;
  line-height: 1.2;
}
.cap-cluster--ink .cap-item h3 { color: var(--bone); }

.cap-item__lead {
  font-size: 0.9375rem;
  color: var(--ink-soft);
  line-height: 1.55;
}
.cap-cluster--ink .cap-item__lead { color: color-mix(in oklch, var(--bone) 78%, transparent); }

.cap-item__bullets {
  list-style: none;
  padding: 0;
  display: grid;
  gap: var(--s-3);
  border-top: 1px solid var(--rule);
  padding-top: var(--s-4);
  margin-top: var(--s-2);
}
.cap-cluster--ink .cap-item__bullets { border-top-color: color-mix(in oklch, var(--bone) 14%, transparent); }
.cap-item__bullets li {
  position: relative;
  padding-left: 18px;
  font-size: var(--t-small);
  color: var(--ink-soft);
  line-height: 1.5;
}
.cap-cluster--ink .cap-item__bullets li { color: color-mix(in oklch, var(--bone) 75%, transparent); }
.cap-item__bullets li::before {
  content: "";
  position: absolute;
  left: 4px; top: 8px;
  width: 4px; height: 4px;
  border-radius: 50%;
  background: var(--cluster-color, var(--terra));
}

/* --- Closing CTA -------------------------------------------------------- */

.cap-cta {
  background: var(--terra);
  color: var(--bone);
  padding-block: var(--section-pad);
  border-top: 1px solid color-mix(in oklch, var(--terra) 50%, var(--rule));
}
.cap-cta__inner {
  max-width: 920px;
  margin-inline: auto;
  padding-inline: var(--page-pad-x);
  display: grid;
  gap: var(--s-6);
  text-align: center;
}
.cap-cta__eyebrow {
  font-family: var(--font-mono);
  font-size: var(--t-micro);
  letter-spacing: var(--tr-micro);
  text-transform: uppercase;
  color: color-mix(in oklch, var(--bone) 70%, transparent);
  display: inline-flex;
  align-items: center;
  gap: 10px;
  justify-self: center;
}
.cap-cta__eyebrow::before {
  content: "";
  width: 6px; height: 6px;
  border-radius: 50%;
  background: var(--bone);
}
.cap-cta h2 {
  font-size: var(--t-h1);
  font-weight: var(--fw-semi);
  letter-spacing: var(--tr-head);
  color: var(--bone);
  text-wrap: balance;
}
.cap-cta h2 em {
  font-family: var(--font-editorial);
  font-style: italic;
  font-weight: 400;
  color: oklch(0.96 0.020 60);
}
.cap-cta__lede {
  font-size: var(--t-lede);
  color: color-mix(in oklch, var(--bone) 85%, transparent);
  max-width: 52ch;
  margin-inline: auto;
}
.cap-cta__btn {
  justify-self: center;
  display: inline-flex;
  align-items: center;
  gap: 10px;
  background: var(--bone);
  color: var(--terra);
  padding: 14px 24px;
  border-radius: var(--r-pill);
  font-size: var(--t-small);
  font-weight: var(--fw-medium);
  transition: transform var(--d-feedback) var(--ease-out),
              background var(--d-hover) var(--ease-out);
}
.cap-cta__btn:hover { background: var(--ink); color: var(--bone); }
.cap-cta__btn:active { transform: scale(0.97); }

/* --- Reduced motion ----------------------------------------------------- */
@media (prefers-reduced-motion: reduce) {
  .cap-overlay { transition: none; }
}

/* --- Mobile tweaks ------------------------------------------------------ */
@media (max-width: 720px) {
  .cap-hero { min-height: auto; }
  .cap-hero__head { padding-top: 110px; padding-bottom: var(--s-6); }
  .cap-graph { height: 70vh; min-height: 420px; }
  .cap-overlay {
    inset: auto var(--s-3) var(--s-3) var(--s-3);
    width: auto;
  }
  .cap-legend {
    inset: var(--s-3) var(--s-3) auto var(--s-3);
    max-width: none;
    padding: var(--s-2) var(--s-3);
  }
  .cap-legend__items {
    display: flex;
    flex-wrap: wrap;
    gap: 6px var(--s-3);
  }
}

/* --- Additional pieces wired in by the HTML markup --------------------- */

/* Nav adapted to ink background */
.nav--on-ink {
  background: color-mix(in oklch, var(--ink) 80%, transparent);
  color: var(--bone);
}
.nav--on-ink .nav__brand,
.nav--on-ink .nav__brand:hover { color: var(--bone); }
.nav--on-ink .nav__menu a { color: color-mix(in oklch, var(--bone) 70%, transparent); }
.nav--on-ink .nav__menu a:hover,
.nav--on-ink .nav__menu a[data-active="true"] { color: var(--bone); }
.nav--on-ink .nav__menu a[data-active="true"]::after { background: var(--terra-light); }
.nav--on-ink .nav__cta {
  color: var(--bone);
  border-color: color-mix(in oklch, var(--bone) 60%, transparent);
}
.nav--on-ink .nav__cta:hover { background: var(--bone); color: var(--ink); }
.nav--on-ink .nav__burger { color: var(--bone); }
.nav--on-ink[data-scrolled="true"] {
  background: color-mix(in oklch, var(--ink) 92%, transparent);
  border-bottom-color: color-mix(in oklch, var(--bone) 14%, transparent);
}

/* Cluster dot inside the eyebrow of a cluster head */
.cap-cluster__dot {
  width: 8px; height: 8px;
  border-radius: 50%;
  background: var(--cluster-color, var(--terra));
  display: inline-block;
  margin-right: 6px;
  transform: translateY(-1px);
}
/* Hide the ::before dot since we use an explicit .cap-cluster__dot element */
.cap-cluster__eyebrow::before { display: none; }

/* Small uppercase tag in the card meta row */
.cap-item__cluster {
  font-family: var(--font-mono);
  font-size: var(--t-micro);
  letter-spacing: var(--tr-micro);
  text-transform: uppercase;
  color: var(--ink-quiet);
}

/* Closing CTA layout */
.cap-cta__inner {
  display: grid;
  gap: var(--s-6);
  align-items: center;
}
@media (min-width: 880px) {
  .cap-cta__inner { grid-template-columns: 1.3fr 1fr; gap: var(--s-10); }
}
.cap-cta__text { display: grid; gap: var(--s-3); }
.cap-cta__actions {
  display: flex;
  gap: var(--s-3);
  flex-wrap: wrap;
  justify-content: flex-start;
}
@media (min-width: 880px) {
  .cap-cta__actions { justify-content: flex-end; }
}

/* Cap-hero lede */
.cap-hero__lede {
  max-width: 56ch;
  color: color-mix(in oklch, var(--bone) 78%, transparent);
  font-size: var(--t-body-lg);
  line-height: 1.5;
  margin: 0;
}

/* Overlay separator (small mono dot) */
.cap-overlay__sep {
  color: color-mix(in oklch, var(--bone) 40%, transparent);
}

/* Header em color inside cap-cluster--ink */
.cap-cluster--ink .cap-cluster__dot { box-shadow: 0 0 0 2px color-mix(in oklch, var(--bone) 10%, transparent); }

/* =========================================================================
   Fold 1 · Static schema map (replaces the force graph)
   ========================================================================= */

/* Override the ink hero background: the schema image already carries its own
   warm ivory tone, we let it breathe on bone-warm paper */
.cap-hero {
  background: var(--bone-warm);
  color: var(--ink);
}
.cap-hero__eyebrow {
  color: color-mix(in oklch, var(--ink) 55%, transparent);
}
.cap-hero__eyebrow::before { background: var(--terra); }
.cap-hero h1 em { color: var(--terra-800); }
.cap-hero__lede {
  color: color-mix(in oklch, var(--ink) 70%, transparent);
}
.cap-scroll { color: color-mix(in oklch, var(--ink) 55%, transparent); }
.cap-scroll__chev { color: var(--terra); }

/* Nav on this page no longer sits on ink, flip back to default rules */
body.page--capabilities .nav--on-ink {
  background: color-mix(in oklch, var(--bone) 85%, transparent);
  color: var(--ink);
}
body.page--capabilities .nav--on-ink .nav__brand,
body.page--capabilities .nav--on-ink .nav__brand:hover { color: var(--ink); }
body.page--capabilities .nav--on-ink .nav__menu a { color: var(--ink-soft); }
body.page--capabilities .nav--on-ink .nav__menu a:hover,
body.page--capabilities .nav--on-ink .nav__menu a[data-active="true"] { color: var(--ink); }
body.page--capabilities .nav--on-ink .nav__menu a[data-active="true"]::after { background: var(--terra); }
body.page--capabilities .nav--on-ink .nav__cta {
  color: var(--ink);
  border-color: var(--ink);
}
body.page--capabilities .nav--on-ink .nav__cta:hover { background: var(--ink); color: var(--bone); }
body.page--capabilities .nav--on-ink .nav__burger { color: var(--ink); }
body.page--capabilities .nav--on-ink[data-scrolled="true"] {
  background: color-mix(in oklch, var(--bone) 92%, transparent);
  border-bottom-color: var(--rule);
}

/* The map itself */
.cap-map {
  margin: 0 auto;
  padding: 0 var(--page-pad-x) var(--s-8);
  width: 100%;
  max-width: 1120px;
  display: grid;
  gap: var(--s-3);
}

.cap-map__img {
  display: block;
  width: 100%;
  height: auto;
  image-rendering: -webkit-optimize-contrast;
  border-radius: var(--r-md);
  border: 1px solid color-mix(in oklch, var(--ink) 6%, transparent);
  box-shadow:
    0 1px 0 color-mix(in oklch, var(--ink) 4%, transparent),
    0 12px 40px -20px color-mix(in oklch, var(--ink) 24%, transparent);
  background: var(--bone-warm);
}

.cap-map__caption {
  display: flex;
  justify-content: space-between;
  align-items: center;
  gap: var(--s-4);
  font-family: var(--font-mono);
  font-size: var(--t-micro);
  letter-spacing: var(--tr-micro);
  text-transform: uppercase;
  color: color-mix(in oklch, var(--ink) 45%, transparent);
  padding: 0 2px;
}

@media (min-width: 880px) {
  .cap-map { padding-bottom: var(--s-10); }
}

@media (max-width: 720px) {
  .cap-map { padding-inline: var(--s-4); }
  .cap-map__img { border-radius: var(--r-sm); }
}

/* =========================================================================
   Fold 1 · Fullscreen override
   The image carries its own title/eyebrow/caption, let it fill the fold
   ========================================================================= */

.cap-hero {
  /* Reset any grid/padding from earlier rules */
  min-height: 100dvh;
  padding: 0;
  display: flex;
  flex-direction: column;
  justify-content: center;
  align-items: center;
  position: relative;
}

.cap-map {
  /* Fill the space between the nav and the scroll indicator */
  flex: 1 1 auto;
  margin: 0;
  padding: calc(var(--s-3)) var(--s-4);
  /* 72px nav + ~72px scroll indicator band */
  min-height: calc(100dvh - 144px);
  width: 100%;
  max-width: 100%;
  display: flex;
  align-items: center;
  justify-content: center;
}

.cap-map__img {
  display: block;
  width: auto;
  max-width: min(1400px, 96vw);
  max-height: calc(100dvh - 160px);
  height: auto;
  object-fit: contain;
  /* Keep the elegant shadow but drop the border so the image edges
     read as paper, not as a framed card */
  border: none;
  border-radius: var(--r-sm);
  box-shadow:
    0 1px 0 color-mix(in oklch, var(--ink) 4%, transparent),
    0 24px 60px -28px color-mix(in oklch, var(--ink) 28%, transparent);
  background: transparent;
}

/* Caption no longer rendered — hidden if someone keeps the element */
.cap-map__caption { display: none; }

/* The scroll indicator is anchored to the bottom of the fold */
.cap-scroll {
  flex: 0 0 auto;
  padding: var(--s-4) 0 var(--s-6);
}

@media (max-width: 720px) {
  .cap-map {
    padding: var(--s-3) var(--s-3);
    min-height: calc(100dvh - 128px);
  }
  .cap-map__img {
    max-width: 96vw;
    max-height: calc(100dvh - 140px);
  }
}

/* Respect the nav sticky offset visually: push the image off the nav edge */
@media (min-width: 880px) {
  .cap-map { padding-top: var(--s-5); padding-bottom: var(--s-3); }
}

/* =========================================================================
   Fold 1 · Keep the looser layout, just fit under the sticky nav so the
   scroll hint lands inside the fold without being cropped
   ========================================================================= */

:root { --nav-h: 72px; }

.cap-hero {
  /* Subtract the sticky nav so the whole hero + hint fits in 100dvh */
  min-height: calc(100dvh - var(--nav-h));
}

.cap-map {
  /* Leave enough room for the scroll hint at the bottom of the fold */
  min-height: calc(100dvh - var(--nav-h) - 96px);
}

.cap-map__img {
  /* Let the image breathe but cap it so the hint is always visible */
  max-height: calc(100dvh - var(--nav-h) - 120px);
}

@media (max-width: 720px) {
  .cap-map {
    min-height: calc(100dvh - var(--nav-h) - 80px);
  }
  .cap-map__img {
    max-height: calc(100dvh - var(--nav-h) - 100px);
  }
}