/* Azul Forward — Design System
   Inherits the tokens and type scale from the Design_portfolio system.
   Adds: paged views (.view) and the in-flow advance band (.advance). */

*, *::before, *::after { box-sizing: border-box; margin: 0; padding: 0; }
.hidden { display: none !important; }

:root {
  --bg: #f8f8f8;
  --ink: #1a1a1a;
  --body: #3a3a3a;
  --mid: #555;
  --sub: #646464;   /* 5.57:1 on the page ground — was #777 at 4.22:1, below AA */
  --label: #6e6e6e; /* 4.80:1 — was #999 at 2.68:1, failed AA at every size */
  --line: #e2e2e2;
  --card: #fff;
  --ph: #ebebeb;
  --card-treatment-ai: #4f6bb8;
  --sans: 'DM Sans', sans-serif;
  --serif: 'Libre Baskerville', serif;
  --max: 680px;
  /* Spacing scale — 4px base, intentional rhythm */
  --space-sm: 1rem;
  --space-md: 1.5rem;
  --space-lg: 2rem;
  --space-xl: 3rem;
  --space-2xl: 4rem;
  --space-3xl: 5rem;
  --space-label: 2.25rem;
  --space-section-y: 6rem;
  --space-after-hero: 4rem;
}

body {
  background: var(--bg);
  color: var(--ink);
  font-family: var(--sans);
  -webkit-font-smoothing: antialiased;
}

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

/* ── SITE ───────────────────────────────────────────────────────────────── */
/* The site is public. #site is kept as the wrapper the view router targets,
   but it is visible from first paint — nothing fades it in, and nothing
   gates it. */
#site { opacity: 1; }

/* ── NAV ────────────────────────────────────────────────────────────────── */
/* Both bars ride in one sticky stack, so the secondary nav can never drift
   out of alignment when the global nav wraps on a narrow screen. */
.nav-stack {
  position: sticky;
  top: 0;
  z-index: 100;
  background: var(--bg);
}
.nav-stack .nav { position: static; }
.nav {
  position: sticky;
  top: 0;
  z-index: 100;
  background: var(--bg);
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 1.5rem 4rem;
  border-bottom: 1px solid var(--line);
}
.nav-logo {
  font-size: 16px;
  font-weight: 500;
  letter-spacing: 0.02em;
  color: var(--ink);
}
.nav-links { display: flex; gap: 2rem; }
.nav-link {
  font-size: 15px;
  font-weight: 400;
  color: var(--sub);
  transition: color 0.2s;
  white-space: nowrap;
  background: none;
  border: none;
  font-family: var(--sans);
  cursor: pointer;
  padding: 0;
}
.nav-link:hover,
.nav-link--active { color: var(--ink); }

/* ── SECONDARY NAV ──────────────────────────────────────────────────────────
   Sits directly under the global nav. It replaces the advance band that used
   to live at the foot of the page — down there it arrived after the related
   projects, so the obvious next move was to leave the section entirely.

   It also absorbs the old eyebrow: naming the current capability here means
   the page no longer has to repeat "…Capabilities · Strategy & Systems"
   immediately below. Numbers carry the position the "1 of 3" counter did. */
.subnav {
  background: var(--bg);
  border-bottom: 1px solid var(--line);
}
.subnav-inner {
  max-width: 1080px;
  margin: 0 auto;
  padding: 0.95rem 4rem;
  display: flex;
  align-items: baseline;
  justify-content: space-between;
  gap: 1.5rem 2rem;
  flex-wrap: wrap;
}
.subnav-label {
  font-size: 13px;
  font-weight: 600;
  letter-spacing: 0.12em;
  text-transform: uppercase;
  color: var(--label);
  white-space: nowrap;
}
.subnav-back {
  font-size: 15px;
  font-weight: 400;
  color: var(--sub);
  white-space: nowrap;
  transition: color 0.2s;
}
.subnav-back:hover { color: var(--ink); }
.subnav-list {
  display: flex;
  flex-wrap: wrap;
  gap: 0.5rem 1.75rem;
  list-style: none;
}
.subnav-link {
  font-size: 15px;
  font-weight: 400;
  color: var(--sub);
  transition: color 0.2s;
}
.subnav-link:hover { color: var(--ink); }
/* The current page takes its own capability colour, tying the subnav to the
   card that was clicked and to the filled blocks further down the page. */
.subnav-link.is-current { font-weight: 600; }
.subnav--strategy .subnav-link.is-current { color: #2948D7; }
.subnav--ai .subnav-link.is-current { color: #006F68; }
.subnav--transform .subnav-link.is-current { color: #B9345A; }

@media (max-width: 900px) {
  .subnav-inner { padding: 0.85rem 1.5rem; gap: 0.75rem 1.25rem; }
  .subnav-list { gap: 0.4rem 1.25rem; }
}

/* ── PAGED VIEWS ────────────────────────────────────────────────────────── */
/* One view visible at a time; the advance band moves you between them. */
.view { display: none; }
.view.is-active { display: block; }
.view.is-entering { animation: viewIn 0.5s ease both; }

@keyframes viewIn {
  from { opacity: 0; transform: translateY(14px); }
  to   { opacity: 1; transform: none; }
}

/* ── HERO ───────────────────────────────────────────────────────────────── */
/* Editorial opening: top-aligned, everything present, generous rhythm.
   Headline carries presence through scale rather than the page shouting. */
/* No bottom padding: the section that follows owns the gap, so the space
   under the organizations list is set in one place rather than stacked. */
.hero {
  padding: var(--space-2xl) 4rem 0;
  max-width: 1080px;
  margin: 0 auto;
}
.hero-h1 {
  font-size: clamp(40px, 5.4vw, 64px);
  font-weight: 700;
  line-height: 1.02;
  letter-spacing: -0.032em;
  color: var(--ink);
  margin-bottom: var(--space-md);
  max-width: 800px;
}
/* The supporting statement — regular weight so the headline dominates.
   It was bold ink; at this length that competed with the h1 above it. */
.hero-signal {
  font-size: clamp(18px, 2.1vw, 21px);
  font-weight: 400;
  line-height: 1.65;
  color: var(--body);
  max-width: 40rem;
  margin-bottom: 0;
  letter-spacing: -0.005em;
}
/* One accent, borrowed from the Strategy capability card, so the hero and
   the card palette below it belong to the same system. */
.hero-accent { color: #2948D7; }
.hero-main {
  display: grid;
  grid-template-columns: minmax(0, 1fr) auto;
  gap: var(--space-2xl);
  align-items: start;
}
/* Warm opener above the claim — present, but never competing with the h1.
   The site's second voice, used here and on the gate and nowhere else. */
/* Sits above the greeting: names the territory before the voice starts. Same
   proportions as the case-study eyebrow so both openings read as one system. */
.hero-eyebrow {
  font-size: 15px;
  font-weight: 500;
  letter-spacing: 0.12em;
  text-transform: uppercase;
  color: var(--sub);
  margin-bottom: var(--space-md);
  display: block;
}
.hero-greeting {
  font-family: var(--serif);
  font-style: italic;
  font-size: clamp(17px, 1.9vw, 21px);
  font-weight: 400;
  letter-spacing: 0;
  line-height: 1.4;
  color: var(--mid);
  margin-bottom: 0.9rem;
}
/* ── PROOF STRIP ────────────────────────────────────────────────────────── */
/* Shared by the homepage hero and the About page. Deliberately compact: one
   figure is a compound string ("$18M saved · $65M unlocked") that would break
   at display size, and the strip supports the headline rather than competing
   with it. Folds 4 → 2 → 1 as the viewport narrows. */
.proof-strip {
  display: grid;
  grid-template-columns: repeat(4, minmax(0, 1fr));
  gap: 1.75rem;
}
.proof-item { border-top: 2px solid var(--ink); padding-top: 0.9rem; }
.proof-n {
  font-size: clamp(17px, 1.9vw, 21px);
  font-weight: 700;
  letter-spacing: -0.01em;
  line-height: 1.25;
  text-transform: uppercase;
  color: var(--ink);
  margin-bottom: 0.5rem;
}
.proof-label {
  font-size: 16px;
  font-weight: 400;
  line-height: 1.5;
  color: var(--sub);
}

.hero-para {
  font-size: 17px;
  line-height: 1.85;
  font-weight: 400;
  color: var(--mid);
}
.hero-intro .hero-para + .hero-para { margin-top: 1.35rem; }
.hero-photo {
  aspect-ratio: 3/4;
  position: relative;
  overflow: hidden;
  max-width: min(292px, 32vw);
  width: 100%;
  margin-left: auto;
  flex-shrink: 0;
  border-radius: 40px 0 40px 0;
}
.hero-photo img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  object-position: center 28%;
  display: block;
  filter: contrast(1.03) brightness(1.02);
}
.hero-photo::after {
  content: '';
  position: absolute;
  inset: 0;
  background: linear-gradient(to top, rgba(26, 26, 26, 0.06) 0%, transparent 55%);
}

/* ── HERO FLOOR · orgs + secondary route ────────────────────────────────── */
/* Gives step 1 a defined base. Both items sit deliberately quiet so the
   advance band keeps the single loud next action. */
/* No rule here: the proof items carry their own 2px tops, and a light line
   above them read as a second, competing divider. The spacing alone separates
   the intro from the proof strip. */
.hero-floor {
  margin-top: var(--space-lg);
  padding-top: var(--space-md);
}
/* Matches the 3rem that .section--after-hero puts above its own label, so
   "Selected organizations" and "How I help move organizations forward"
   sit on the same vertical rhythm. */
.hero-orgs { margin-top: var(--space-xl); }
.hero-orgs-label {
  font-size: 12px;
  font-weight: 500;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  color: var(--label);
  margin-bottom: 0.85rem;
}
.hero-orgs-list {
  display: flex;
  flex-wrap: wrap;
  gap: 0.5rem 1.75rem;
  list-style: none;
}
/* Quiet by design: this sits under the proof strip as supporting
   credibility, so it should never out-weigh the outcomes above it. */
.hero-orgs-list li {
  font-size: 15px;
  font-weight: 400;
  color: var(--sub);
  letter-spacing: -0.01em;
}
.hero-orgs-list li span {
  font-weight: 400;
  color: var(--label);
}
/* Zero-height full-width item: forces the row to break at a chosen point
   instead of wherever the container happens to run out. */
.hero-orgs-break {
  flex-basis: 100%;
  height: 0;
  margin: 0;
  padding: 0;
}

/* ── SECTION ────────────────────────────────────────────────────────────── */
.section {
  padding: var(--space-section-y) 4rem;
  max-width: 1080px;
  margin: 0 auto;
}
/* Follows the hero directly. The hero contributes no bottom padding, so this
   single value is the whole gap under the organizations list. */
.section--after-hero { padding-top: var(--space-xl); }
.section--top { padding-top: var(--space-3xl); }
.section-label {
  font-size: 14px;
  font-weight: 500;
  letter-spacing: 0.12em;
  text-transform: uppercase;
  color: var(--sub);
  margin-bottom: var(--space-label);
  display: block;
}
/* Scope statement under a section label — carries more weight than the lead
   beneath it, so the view reads label → claim → detail. */
.section-statement {
  font-size: clamp(19px, 2.2vw, 24px);
  font-weight: 600;
  line-height: 1.35;
  letter-spacing: -0.018em;
  color: var(--ink);
  max-width: 34ch;
  margin: -1.25rem 0 var(--space-md);
}
.section-lead {
  font-size: 17px;
  line-height: 1.85;
  color: var(--mid);
  max-width: var(--max);
  margin: -1.25rem 0 var(--space-2xl);
}
.section-statement + .section-lead { margin-top: 0; }

/* ── ADVANCE BAND ───────────────────────────────────────────────────────── */
/* The guided CTA. Lives in the content column between hairline rules —
   position carries the meaning, so a changing label stays unambiguous. */
.advance {
  max-width: 1080px;
  margin: 0 auto;
  padding: 0 4rem var(--space-3xl);
}
.advance-inner {
  border-top: 1px solid var(--line);
  border-bottom: 1px solid var(--line);
  padding: 1.15rem 0 1.5rem;
}
/* Segments, label, and prompt bind into one tight signal block; the only
   real gap in the band falls between that block and the action below it. */
.advance-meta {
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  gap: 0.5rem;
  margin-bottom: 0.4rem;
}
.advance-step {
  font-size: 13px;
  font-weight: 500;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  color: var(--label);
  font-variant-numeric: tabular-nums;
}
.advance-progress {
  display: flex;
  gap: 5px;
  list-style: none;
}
.advance-progress-seg {
  width: 26px;
  height: 2px;
  background: var(--line);
  border-radius: 1px;
  transition: background 0.35s ease;
}
.advance-progress-seg.is-done { background: var(--ink); }

/* The narrative line: says why the next step is worth taking, so the CTA
   below it is an invitation rather than a bare control. Italic and set in
   the same --label grey as the step counter, so it reads as part of the
   same signal rather than as body copy. */
/* No max-width: the sentence and its three terms hold one line at full
   width, and only wrap once the viewport genuinely can't fit them. */
.advance-prompt {
  font-size: 18px;
  font-style: italic;
  font-weight: 400;
  line-height: 1.55;
  color: var(--label);
  /* The band is 1080px wide; without this a full-sentence prompt runs past a
     readable measure. */
  max-width: var(--max);
  margin-bottom: 1.15rem;
}
.advance-prompt[hidden] { display: none; }
/* Stays italic with the sentence; bold and in ink is what separates the
   three areas from the words around them. */
.advance-prompt-terms {
  font-weight: 600;
  color: var(--ink);
}

.advance-actions {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: var(--space-md);
}
/* Back sits quiet on the left; next carries the weight on the right. */
.advance-back {
  font-family: var(--sans);
  font-size: 15px;
  font-weight: 400;
  color: var(--sub);
  background: none;
  border: none;
  padding: 0.35rem 0;
  cursor: pointer;
  transition: color 0.2s;
}
.advance-back:hover { color: var(--ink); }
.advance-back[hidden] { display: none; }

.advance-next {
  display: inline-flex;
  align-items: baseline;
  gap: 0.55rem;
  font-family: var(--sans);
  font-size: clamp(20px, 2.6vw, 26px);
  font-weight: 700;
  letter-spacing: -0.02em;
  color: var(--ink);
  background: none;
  border: none;
  padding: 0.1rem 0;
  cursor: pointer;
  text-align: right;
  transition: color 0.2s, gap 0.25s ease;
}
.advance-next:hover { color: var(--mid); gap: 0.95rem; }
.advance-next-arrow { font-weight: 400; font-size: 0.8em; }
.advance-next[hidden] { display: none; }

.advance-back:focus-visible,
.advance-next:focus-visible,
.nav-link:focus-visible {
  outline: 2px solid var(--ink);
  outline-offset: 4px;
  border-radius: 2px;
}

/* ── CAPABILITY CARDS ───────────────────────────────────────────────────── */
/* Three colour fields, one per capability. Chosen so they read as siblings
   rather than competitors: identical lightness (L* 34.3–34.6, spread 0.23),
   a single saturation band (53–59%), and 50°+ of hue between neighbours.
   Matching lightness is what makes the set feel calm — perceived intensity
   tracks brightness and saturation far more than it tracks hue.
   All three sit at 7.9:1 against white — AAA at any text size. */
.grid-3 {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 1.5rem;
}
.cap-card {
  --card-bg: var(--ink);
  --card-bg-hover: #000;
  display: flex;
  flex-direction: column;
  background: var(--card-bg);
  color: #fff;
  border-radius: 8px;
  padding: 1.9rem 1.75rem 1.6rem;
  min-height: 19rem;
  transition: background 0.3s ease, transform 0.3s ease;
}
.cap-card:hover {
  background: var(--card-bg-hover);
  transform: translateY(-4px);
}
.cap-card:focus-visible {
  outline: 2px solid var(--ink);
  outline-offset: 4px;
}
/* Contrast against white: 6.99:1, 6.05:1, 5.67:1 — all clear AA at any
   text size. The description sits at full white rather than 88% so the
   softest text on the lightest card still clears AA comfortably. */
.cap-card--strategy  { --card-bg: #2948D7; --card-bg-hover: #223cb4; }
.cap-card--ai        { --card-bg: #006F68; --card-bg-hover: #005d57; }
.cap-card--transform { --card-bg: #B9345A; --card-bg-hover: #9b2b4b; }

/* Index number — echoes the stepped numbering used across the site and
   gives the set the feel of a facilitation deck rather than web tiles. */
.cap-card-n {
  font-size: 14px;
  font-weight: 600;
  letter-spacing: 0.14em;
  color: rgba(255, 255, 255, 0.72);
  font-variant-numeric: tabular-nums;
  margin-bottom: 1.35rem;
}
/* Two words naming the move the capability makes, directly above the question
   it answers. Dimmer than the question so the pair reads as one unit. */
.cap-card-frame {
  font-size: 14px;
  font-weight: 600;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  color: rgba(255, 255, 255, 0.72);
  margin-bottom: 0.75rem;
}
/* The card's hook. Serif italic because that is how this site sets a framing
   question everywhere else — see .cs-emphasis and the hero greeting. */
.cap-card-q {
  font-family: var(--serif);
  font-style: italic;
  font-size: clamp(21px, 2.3vw, 25px);
  font-weight: 400;
  line-height: 1.3;
  letter-spacing: -0.005em;
  color: #fff;
  margin-bottom: 1.25rem;
}
/* The name is now a label under the question rather than the card's headline,
   so it is set as one: uppercase, tracked, and still unmistakably the link. */
.cap-card-title {
  font-size: 16px;
  font-weight: 700;
  line-height: 1.3;
  letter-spacing: 0.09em;
  text-transform: uppercase;
  color: #fff;
  margin-bottom: 0.7rem;
}
.cap-card-desc {
  font-size: 17px;
  font-weight: 400;
  line-height: 1.6;
  color: #fff;
}
.cap-card-desc span { display: block; }
/* Pinned to the base so the three arrows sit on one line across the row. */
.cap-card-go {
  margin-top: auto;
  padding-top: 1.6rem;
  display: flex;
  align-items: baseline;
  justify-content: space-between;
  gap: 1rem;
  font-size: 16px;
  font-weight: 600;
  letter-spacing: -0.01em;
  color: #fff;
}
.cap-card-go span { font-weight: 400; transition: transform 0.25s ease; }
.cap-card:hover .cap-card-go span { transform: translateX(5px); }

/* ── GRIDS ──────────────────────────────────────────────────────────────── */
.grid-2 { display: grid; grid-template-columns: 1fr 1fr; gap: 2.25rem; }
.grid-4 { display: grid; grid-template-columns: 1fr 1fr; gap: 2.25rem; }
/* Three featured work cards. Wider gutter than the capability cards, which
   are solid colour fields and need less air between them than images do. */
.grid-3--work { gap: 2.25rem; }

/* The one route out to the full index. */
.work-all { margin-top: var(--space-2xl); }
.work-back { margin-top: var(--space-2xl); }
.work-all-link {
  display: inline-block;
  font-size: 18px;
  font-weight: 600;
  letter-spacing: -0.01em;
  color: var(--ink);
  border-bottom: 1px solid var(--ink);
  padding-bottom: 0.14em;
  transition: color 0.2s, border-color 0.2s;
}
.work-all-link:hover { color: var(--sub); border-color: var(--sub); }

/* ── CARDS ──────────────────────────────────────────────────────────────── */
/* Column layout so an outcome line can be pushed to a shared baseline across
   each row, regardless of how long the title and summary above it run. */
/* The whole card is the target, so the whole card responds — a lift plus a
   soft shadow under the image, which already has a defined edge to cast one.
   The image keeps its own scale, so two cues reinforce rather than compete. */
/* The whole card is one target: a surface appears behind all of it, it lifts,
   and the image casts a shadow. The surface needs no motion, so the card still
   responds visibly with Reduce motion switched on. The padding/negative-margin
   pair lets that surface extend past the content without shifting the grid. */
.card {
  cursor: pointer;
  display: flex;
  flex-direction: column;
  padding: 0.75rem;
  margin: -0.75rem;
  border-radius: 12px;
  transition: transform 0.35s cubic-bezier(0.2, 0.7, 0.3, 1),
              background 0.3s ease;
}
.card:hover {
  color: inherit;
  background: var(--card);
  transform: translateY(-6px);
}
.card:focus-visible {
  outline: 2px solid var(--ink);
  outline-offset: 3px;
}
@media (prefers-reduced-motion: reduce) {
  /* Motion goes; the surface stays, so hovering anywhere still responds. */
  .card:hover { transform: none; }
}
.card-body { flex: 1; display: flex; flex-direction: column; }
/* 8px matches .cap-card, so both card families share one corner radius.
   overflow: hidden clips the image — and its hover scale — to the curve. */
.card-img {
  width: 100%;
  overflow: hidden;
  position: relative;
  border-radius: 8px;
  transition: box-shadow 0.35s ease;
}
.card:hover .card-img { box-shadow: 0 16px 32px -14px rgba(26, 26, 26, 0.30); }
.card-img-inner {
  width: 100%;
  height: 100%;
  transition: transform 0.65s ease;
  overflow: hidden;
}
.card-img-inner img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  display: block;
}
.card:hover .card-img-inner { transform: scale(1.03); }
.card-img-3-2 { aspect-ratio: 3/2; }
.card-img-4-3 { aspect-ratio: 4/3; }
.card-img-21-9 { aspect-ratio: 21/9; }
.card--span-2 { grid-column: 1 / -1; }

.card-body { padding: 1.25rem 0 0; }
/* Uppercased in CSS, not in the markup, so screen readers read it normally. */
.card-eyebrow {
  font-size: 13px;
  font-weight: 500;
  letter-spacing: 0.1em;
  text-transform: uppercase;
  line-height: 1.4;
  color: var(--sub);
  margin-bottom: 0.6rem;
}
.card-title {
  font-size: 19px;
  font-weight: 600;
  line-height: 1.25;
  color: var(--ink);
  letter-spacing: -0.01em;
}
.card-title-lg {
  font-size: 22px;
  font-weight: 700;
  line-height: 1.2;
  color: var(--ink);
  letter-spacing: -0.015em;
}
/* Supporting line under a capability tile — carries the page's headline.
   Each sentence gets its own line rather than wrapping at an arbitrary point. */
.card-desc {
  font-size: 16px;
  font-weight: 400;
  line-height: 1.6;
  color: var(--mid);
  margin-top: 0.5rem;
}
.card-desc span { display: block; }

/* Case-study card: summary, then the result pinned to the row's baseline —
   same claim → evidence → outcome shape as the capability proofs. */
.card-summary {
  font-size: 16px;
  font-weight: 400;
  line-height: 1.7;
  color: var(--mid);
  margin-top: 0.65rem;
}
/* No rule and no push-to-baseline: eyebrow, title, summary, and outcome sit
   as one tight unit. Hierarchy is carried by weight and colour instead —
   16px/400 mid for the summary against 15px/600 ink for the result. */
.card-outcome {
  margin-top: 0.85rem;
  font-size: 15px;
  font-weight: 600;
  line-height: 1.55;
  letter-spacing: -0.008em;
  color: var(--ink);
}

/* ── CONNECT VIEW ───────────────────────────────────────────────────────── */
.connect-h2 {
  font-size: clamp(28px, 4vw, 40px);
  font-weight: 700;
  letter-spacing: -0.025em;
  line-height: 1.1;
  color: var(--ink);
  margin-bottom: var(--space-md);
  max-width: 20ch;
}
.connect-body { max-width: var(--max); }
.connect-para {
  font-size: 18px;
  font-weight: 400;
  line-height: 1.75;
  color: var(--mid);
}
.connect-para + .connect-para { margin-top: 1.35rem; }
/* The ask itself — the one line that requests something, so it steps up
   out of the explanation above it. */
.connect-ask {
  font-size: clamp(19px, 2.1vw, 22px);
  font-weight: 600;
  line-height: 1.55;
  letter-spacing: -0.015em;
  color: var(--ink);
  margin-top: var(--space-lg);
}
.connect-links {
  display: flex;
  flex-wrap: wrap;
  gap: var(--space-lg);
  margin-top: var(--space-xl);
  padding-top: var(--space-lg);
  border-top: 1px solid var(--line);
}
.connect-link {
  font-size: 17px;
  font-weight: 500;
  color: var(--ink);
  border-bottom: 1px solid var(--ink);
  padding-bottom: 0.12em;
  transition: color 0.2s, border-color 0.2s;
}
.connect-link:hover { color: var(--sub); border-color: var(--sub); }

/* ── RELATED WORK ───────────────────────────────────────────────────────── */
.cap-related-grid {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 2.25rem;
}
.cap-related-item {
  display: block;
  padding-top: var(--space-md);
  border-top: 1px solid var(--ink);
  transition: opacity 0.2s;
}
.cap-related-item:hover { opacity: 0.62; }
.cap-related-title {
  display: flex;
  align-items: baseline;
  justify-content: space-between;
  gap: 0.75rem;
  font-size: 19px;
  font-weight: 600;
  letter-spacing: -0.012em;
  line-height: 1.3;
  color: var(--ink);
  margin-bottom: 0.45rem;
}
.cap-related-title span { font-weight: 400; flex-shrink: 0; }
.cap-related-sub {
  font-size: 15px;
  font-weight: 400;
  line-height: 1.55;
  color: var(--sub);
}

/* ── FADE ───────────────────────────────────────────────────────────────── */
.fade {
  opacity: 0;
  transform: translateY(20px);
  transition: opacity 0.75s ease, transform 0.75s ease;
}
.fade.in { opacity: 1; transform: none; }
.d1 { transition-delay: 0.05s; }
.d2 { transition-delay: 0.15s; }
.d3 { transition-delay: 0.25s; }
.d4 { transition-delay: 0.35s; }

/* ── FOOTER ─────────────────────────────────────────────────────────────── */
.footer {
  border-top: 1px solid var(--line);
  padding: var(--space-2xl) 4rem;
  display: flex;
  align-items: center;
  justify-content: space-between;
}
.footer-links { display: flex; gap: 2rem; }
.footer-link {
  font-size: 15px;
  font-weight: 400;
  color: var(--sub);
  transition: color 0.2s;
}
.footer-link:hover { color: var(--ink); }
.footer-copy { font-size: 14px; color: var(--label); }

/* ── RESPONSIVE ─────────────────────────────────────────────────────────── */
@media (max-width: 900px) {
  /* Hero collapses to one column; the portrait follows the copy in DOM
     order, so it lands beneath the headline on phones. */
  .hero-main {
    grid-template-columns: 1fr;
    gap: var(--space-xl);
    align-items: start;
  }
  .hero-photo {
    max-width: min(260px, 72vw);
    margin-left: auto;
    margin-right: auto;
  }
  .hero-h1 { font-size: clamp(34px, 6vw, 44px); }
  .hero-floor { margin-top: var(--space-lg); }
  .nav, .footer { padding-left: 1.5rem; padding-right: 1.5rem; }
  .hero, .section, .advance { padding-left: 1.5rem; padding-right: 1.5rem; }
  .hero { padding-top: var(--space-2xl); padding-bottom: var(--space-xl); }
  .section { padding-top: var(--space-xl); padding-bottom: var(--space-xl); }
  .advance { padding-bottom: var(--space-2xl); }
  .grid-2, .grid-4 { grid-template-columns: 1fr; }
  .grid-3 { grid-template-columns: 1fr; gap: 1.25rem; }
  .cap-related-grid { grid-template-columns: 1fr; gap: var(--space-lg); }
  .proof-strip { grid-template-columns: 1fr 1fr; gap: 1.5rem; }
  .cap-card { min-height: 0; padding: 1.6rem 1.5rem 1.4rem; }
  .cap-card-n { margin-bottom: 1rem; }
  .cap-card-q { margin-bottom: 1.1rem; }
  .cap-card-go { padding-top: 1.3rem; }
}

@media (max-width: 600px) {
  .hero-h1 { font-size: 38px; }
  .nav-links { gap: 1.25rem; }
  .footer { flex-direction: column; gap: 1rem; align-items: flex-start; }
  .section-lead { margin-top: -0.75rem; }

  /* Advance band stacks: next action goes full-width and reads first. */
  .advance-actions {
    flex-direction: column-reverse;
    align-items: stretch;
    gap: var(--space-sm);
  }
  .advance-next {
    justify-content: space-between;
    text-align: left;
    font-size: 21px;
    padding: 0.15rem 0 0.35rem;
  }
  .advance-back { text-align: left; padding-top: 0.5rem; }
  .advance-progress-seg { width: 18px; }

  .proof-strip { grid-template-columns: 1fr; gap: 1.25rem; }
  .hero-orgs-list { gap: 0.4rem 1.1rem; }
  .hero-orgs-list li { font-size: 14px; }
}

@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after {
    animation-duration: 0.01ms !important;
    animation-iteration-count: 1 !important;
    transition-duration: 0.01ms !important;
    scroll-behavior: auto !important;
  }
  .fade { opacity: 1; transform: none; }
}

/* ── MOBILE NAVIGATION ──────────────────────────────────────────────────────
   The bar is wordmark + four nowrap links. Below ~560px they cannot sit on one
   line: the links' right edge was pinned at 434px regardless of viewport, so
   every page scrolled sideways (114px at 320px, 44px at 390px).

   Smallest coherent fix: let the bar wrap. The wordmark takes its own line and
   the links flow beneath it, wrapping as needed. No JavaScript, no hamburger
   to make accessible, no destination hidden, and link text stays at 15px —
   navigation is not shrunk below 14px to make it fit. */
@media (max-width: 560px) {
  .nav {
    flex-wrap: wrap;
    align-items: flex-start;
    row-gap: 0.65rem;
    padding-top: 1.1rem;
    padding-bottom: 1.1rem;
  }
  .nav-logo { flex: 0 0 100%; }
  .nav-links {
    flex: 1 1 100%;
    flex-wrap: wrap;
    gap: 0.55rem 1.15rem;
  }
}

/* ── OUTCOME-FIRST WORK CARD (Selected Work index) ──────────────────────── */
/* Read order: what it was → the result → what it means → how far the claim
   reaches → what Azul did → scope. The attribution note sits directly under
   the figure it qualifies (governance §9, proof proximity). */
.card-result-label {
  margin-top: 1.4rem;
  font-size: 13px;
  font-weight: 500;
  letter-spacing: 0.1em;
  text-transform: uppercase;
  line-height: 1.4;
  color: var(--sub);
}
.card-result {
  margin-top: 0.45rem;
  font-size: clamp(24px, 2.4vw, 28px);
  font-weight: 600;
  line-height: 1.2;
  letter-spacing: -0.018em;
  color: var(--ink);
}
.card-result-meaning {
  margin-top: 0.7rem;
  font-size: 18px;
  line-height: 1.6;
  color: var(--body);
}
.card-result-note {
  margin-top: 0.6rem;
  font-size: 15px;
  line-height: 1.55;
  color: var(--sub);
}
.card-contribution {
  margin-top: 1.25rem;
  padding-top: 1.25rem;
  border-top: 1px solid var(--line);
  font-size: 18px;
  line-height: 1.65;
  color: var(--mid);
}
.card-scope {
  margin-top: 0.85rem;
  font-size: 15px;
  font-weight: 600;
  line-height: 1.55;
  color: var(--ink);
}