/* Azul Forward — Capability page template
   Loaded after styles.css, which supplies the tokens, nav, footer, and the
   .advance band. Three capability pages share every rule in this file. */

/* ── VERTICAL RHYTHM ────────────────────────────────────────────────────────
   Two gaps, deliberately far apart in value so grouping reads instantly:
   the space BETWEEN sections must clearly exceed the space WITHIN one.
   Both scale down together in the responsive block below. */
:root {
  --cap-gap-section: 5.5rem;  /* content → next section's rule */
  --cap-gap-head: 2.5rem;     /* heading → the content it labels */
}

/* ── HERO ───────────────────────────────────────────────────────────────── */
.cap-hero {
  max-width: 1080px;
  margin: 0 auto;
  padding: var(--space-3xl) 4rem 0;
}
/* One sentence per line — the break is authored, not left to the wrap point. */
.cap-h1 {
  font-size: clamp(32px, 4.4vw, 52px);
  font-weight: 700;
  line-height: 1.06;
  letter-spacing: -0.028em;
  color: var(--ink);
  max-width: 30ch;
  margin-bottom: var(--space-lg);
}
.cap-h1 span { display: block; }
.cap-lead {
  font-size: clamp(17px, 1.9vw, 19px);
  font-weight: 400;
  line-height: 1.75;
  color: var(--mid);
  max-width: var(--max);
}
/* ── SECTION SHELL ──────────────────────────────────────────────────────── */
.cap-section {
  max-width: 1080px;
  margin: 0 auto;
  padding: var(--cap-gap-section) 4rem 0;
}
/* The advance band used to close these pages and carried the space above the
   footer with it. With the band moved to the top, the last section owns it. */
main > .cap-section:last-of-type { padding-bottom: var(--space-3xl); }
/* The rule belongs to the heading beneath it, so the space above it is the
   full section gap while the space below is tight. */
.cap-section-title {
  font-size: clamp(24px, 3vw, 32px);
  font-weight: 700;
  letter-spacing: -0.022em;
  line-height: 1.15;
  color: var(--ink);
  padding-top: var(--space-md);
  border-top: 1px solid var(--line);
  margin-bottom: var(--cap-gap-head);
}

/* The proof grid is the page's main body, not a peer of Methods / Related
   work — so it opens on a quiet label with no rule, letting the hero flow
   straight into its own evidence. The rules below mark the real shift:
   from the work itself to metadata about it. */
/* Slightly less than a full section gap — the proofs continue the hero's
   thought rather than starting a new topic. */
.cap-section--proof { padding-top: calc(var(--cap-gap-section) * 0.78); }
/* Sentence case, sitting a clear step below .cap-h1 — second hierarchy, not
   a label. Separation comes from size and weight, not caps or a rule. */
.cap-subtitle {
  font-size: clamp(21px, 2.5vw, 28px);
  font-weight: 600;
  letter-spacing: -0.018em;
  line-height: 1.25;
  color: var(--ink);
  margin-bottom: var(--cap-gap-head);
  max-width: 24ch;
}

/* ── PROOF GRID ─────────────────────────────────────────────────────────── */
/* Three pieces of evidence, echoing the homepage card rhythm so the site
   reads as one system. The metric leads — it is the claim being made. */
.cap-proof-grid {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 2.75rem;
}
/* Column layout so an optional outcome line can be pushed to a shared
   baseline across the row — the one place a rule CAN align, since it is
   anchored to the bottom of the cell rather than to wrapping text. */
.cap-proof {
  display: flex;
  flex-direction: column;
  height: 100%;
}
.cap-proof-figure {
  width: 100%;
  aspect-ratio: 4/3;
  overflow: hidden;
  margin-bottom: 1.5rem;
  background: var(--ph);
}
.cap-proof-figure img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  display: block;
}
/* No rule beneath: the metrics wrap to different line counts, so a border
   would land at three different heights across the row. Weight and case
   carry the separation instead. */
.cap-metric {
  font-size: 15px;
  font-weight: 600;
  letter-spacing: 0.05em;
  text-transform: uppercase;
  line-height: 1.4;
  color: var(--ink);
  margin-bottom: 0.75rem;
}
.cap-proof-body {
  font-size: 16px;
  font-weight: 400;
  line-height: 1.75;
  color: var(--mid);
}
/* The result. Sentence case in full ink, against the uppercase metric above,
   so the two ends of each proof read as claim and outcome rather than a pair
   of labels. Optional — a proof without one simply ends after its body. */
.cap-outcome {
  margin-top: auto;
  padding-top: 1.1rem;
  border-top: 1px solid var(--line);
  font-size: 15px;
  font-weight: 600;
  line-height: 1.55;
  letter-spacing: -0.008em;
  color: var(--ink);
}
.cap-proof-body + .cap-outcome { margin-top: 1.35rem; }
@media (min-width: 901px) {
  /* Restore the push-to-bottom on desktop, where the row shares a height. */
  .cap-proof-body + .cap-outcome { margin-top: auto; }
}

/* ── OUTCOME BLOCK ──────────────────────────────────────────────────────── */
/* Replaces the image slot on proof cards. Reads top to bottom as
   inputs → what I did with them → what resulted → where it landed.

   The three cards share row tracks via subgrid, so every band lines up
   across the row no matter how long each sentence runs: inputs start
   together, the hairline rules sit at one height, and the results begin
   at one height. Equal-height boxes alone wouldn't do that — flexbox can
   match the outer card but not the parts inside it. */
.cap-proof-grid--blocks {
  grid-template-rows: auto auto auto auto;
  row-gap: 0;
}
.cap-block {
  display: grid;
  grid-template-rows: subgrid;
  grid-row: span 4;
  background: var(--card);
  border: 1px solid var(--line);
  border-top: 3px solid var(--ink);
  padding: 1.5rem 1.5rem 1.6rem;
}
/* Inputs and outputs share one treatment: a block can list one or several
   of either, and a second result reads as a peer rather than a footnote. */
.cap-block-inputs,
.cap-block-outputs {
  list-style: none;
}
.cap-block-inputs { margin-bottom: 1.1rem; }
.cap-block-inputs li,
.cap-block-outputs li {
  font-size: clamp(19px, 2.2vw, 24px);
  font-weight: 700;
  letter-spacing: -0.015em;
  line-height: 1.25;
  color: var(--ink);
  text-transform: uppercase;
}
/* The connective sentence — deliberately the quietest thing in the block,
   so the eye can skip from the inputs straight to the result. It stretches
   to fill its shared row, which is what puts every rule at one height. */
.cap-block-link {
  font-size: 16px;
  font-weight: 400;
  line-height: 1.6;
  color: var(--mid);
  padding-bottom: 1.1rem;
  margin-bottom: 1.1rem;
  border-bottom: 1px solid var(--line);
  align-self: stretch;
}
.cap-block-detail {
  font-size: 16px;
  font-weight: 400;
  line-height: 1.55;
  color: var(--sub);
  margin-top: 0.5rem;
}

/* ── STACKED PROOF ROWS ─────────────────────────────────────────────────── */
/* Three parallel rows instead of a three-up grid. Each row puts the summary
   and its results on the left and the prose on the right, so the result is
   read before the explanation — and the left edge becomes a column of
   outcomes that can be scanned straight down without reading a sentence. */
.cap-stack { border-top: 1px solid var(--line); }
.cap-stack-row {
  display: grid;
  grid-template-columns: minmax(0, 5fr) minmax(0, 7fr);
  gap: 3rem;
  padding: var(--space-lg) 0 var(--space-xl);
  border-bottom: 1px solid var(--line);
}
.cap-stack-label {
  font-size: 15px;
  font-weight: 600;
  letter-spacing: 0.12em;
  text-transform: uppercase;
  line-height: 1.4;
  color: var(--ink);
  margin-bottom: 0.4rem;
}
.cap-stack-scope {
  font-size: 16px;
  font-weight: 400;
  line-height: 1.5;
  color: var(--sub);
}
.cap-stack-results {
  list-style: none;
  margin-top: 1.35rem;
  padding-top: 1.35rem;
  border-top: 1px solid var(--line);
}
.cap-stack-results li {
  font-size: clamp(18px, 2vw, 22px);
  font-weight: 700;
  letter-spacing: -0.015em;
  line-height: 1.3;
  color: var(--ink);
  text-transform: uppercase;
}
.cap-stack-body {
  font-size: 18px;
  font-weight: 400;
  line-height: 1.75;
  color: var(--mid);
}

/* ── ACCENTED OUTCOME BLOCK ─────────────────────────────────────────────────
   A tinted field rather than a solid one. Two reasons it reads better:

   1. Legibility — ink on a 6% tint is ~15:1, against 5.7–7:1 for white on the
      full colour. And the block keeps the site's ink/mid/sub ramp instead of
      flattening every line to white at varying opacity.
   2. Meaning — when the whole field is coloured, colour stops signalling.
      Here it marks exactly two things: the bar that identifies the capability,
      and the outcome, which is the point of the block. */
.cap-block--filled {
  --fill: var(--ink);
  --tint: #f1f1f1;
  background: var(--tint);
  border: 1px solid rgba(26, 26, 26, 0.07);
  border-top: 4px solid var(--fill);
}
.cap-block--strategy  { --fill: #2948D7; --tint: #ecedf6; }
.cap-block--ai        { --fill: #006F68; --tint: #e9f0ef; }
.cap-block--transform { --fill: #B9345A; --tint: #f4ecef; }

.cap-block--filled .cap-block-inputs li { color: var(--ink); }
.cap-block--filled .cap-block-link {
  color: var(--mid);
  border-bottom-color: rgba(26, 26, 26, 0.10);
}
/* The single accent: the result, in the capability's own colour. */
.cap-block--filled .cap-block-outputs li { color: var(--fill); }
.cap-block--filled .cap-block-detail { color: var(--sub); }

/* ── STACKED PROOF ROWS ─────────────────────────────────────────────────── */
/* Three parallel rows instead of a three-up grid. Each row puts the summary
   and its results on the left and the prose on the right, so the result is
   read before the explanation — and the left edge becomes a column of
   outcomes that can be scanned straight down without reading a sentence. */
.cap-stack { border-top: 1px solid var(--line); }
.cap-stack-row {
  display: grid;
  grid-template-columns: minmax(0, 5fr) minmax(0, 7fr);
  gap: 3rem;
  padding: var(--space-lg) 0 var(--space-xl);
  border-bottom: 1px solid var(--line);
}
.cap-stack-label {
  font-size: 15px;
  font-weight: 600;
  letter-spacing: 0.12em;
  text-transform: uppercase;
  line-height: 1.4;
  color: var(--ink);
  margin-bottom: 0.4rem;
}
.cap-stack-scope {
  font-size: 16px;
  font-weight: 400;
  line-height: 1.5;
  color: var(--sub);
}
.cap-stack-results {
  list-style: none;
  margin-top: 1.35rem;
  padding-top: 1.35rem;
  border-top: 1px solid var(--line);
}
.cap-stack-results li {
  font-size: clamp(18px, 2vw, 22px);
  font-weight: 700;
  letter-spacing: -0.015em;
  line-height: 1.3;
  color: var(--ink);
  text-transform: uppercase;
}
.cap-stack-body {
  font-size: 18px;
  font-weight: 400;
  line-height: 1.75;
  color: var(--mid);
}

/* ── METHODS ────────────────────────────────────────────────────────────── */
/* The pills sit as a balanced band — equal air above and below — rather than
   inheriting the 2.5rem heading gap on top and the 7rem section gap beneath.
   The section's own border-top rule keeps the heading anchored, so the wider
   gap above the pills doesn't leave it floating. Tune with one value. */
.cap-section--methods {
  --cap-methods-air: 3rem;
  padding-bottom: var(--cap-methods-air);
}
.cap-section--methods .cap-section-title { margin-bottom: var(--cap-methods-air); }
/* Bottom air is already supplied above, so the next section starts flush. */
.cap-section--methods + .cap-section { padding-top: 0; }

.cap-methods-list {
  display: flex;
  flex-wrap: wrap;
  gap: 0.75rem;
  list-style: none;
}
/* radius 999px keeps a true pill at any type size */
.cap-method {
  font-size: 16px;
  font-weight: 400;
  line-height: 1.4;
  color: var(--body);
  border: 1px solid var(--line);
  border-radius: 999px;
  padding: 10px 22px;
  background: var(--card);
}

/* ── ADVANCE BAND ON INTERIOR PAGES ─────────────────────────────────────── */
/* Same component as the homepage; here it moves between capabilities. */
.advance--cap { padding-top: var(--cap-gap-section); }
.advance--cap .advance-back,
.advance--cap .advance-next { text-decoration: none; }

/* ── RESPONSIVE ─────────────────────────────────────────────────────────── */
@media (max-width: 900px) {
  /* Retuning the two tokens rescales every gap on the page at once. */
  :root {
    --cap-gap-section: 4rem;
    --cap-gap-head: 2rem;
  }
  .cap-section--methods { --cap-methods-air: 2.5rem; }
  .cap-hero, .cap-section { padding-left: 1.5rem; padding-right: 1.5rem; }
  .cap-hero { padding-top: var(--space-lg); }
  .cap-proof-grid { grid-template-columns: 1fr; gap: 3.5rem; }
  /* One column: shared row tracks would make unrelated cards match heights
     down the page, so the blocks revert to normal flow. */
  .cap-proof-grid--blocks { grid-template-rows: none; row-gap: 3.5rem; }
  .cap-proof-grid--blocks .cap-block { display: block; grid-row: auto; }
  .cap-related-grid { grid-template-columns: 1fr; gap: var(--space-lg); }
  .cap-stack-row { grid-template-columns: 1fr; gap: 1.25rem; }
}

@media (max-width: 600px) {
  .cap-h1 { max-width: none; }
}


/* ══ UNIFIED CAPABILITIES PAGE ═══════════════════════════════════════════
   One page, three anchored modes. Replaces three near-identical pages that
   each linked to the other two. */

.cap-eyebrow {
  display: block;
  font-size: 14px;
  font-weight: 500;
  letter-spacing: 0.12em;
  text-transform: uppercase;
  color: var(--sub);
  margin-bottom: var(--space-sm);
}

/* The three-part model. Drawn in HTML, not shipped as an image: it stays
   readable when it stacks, and the arrows between items are decoration the
   screen reader never has to hear. Deliberately not a waterfall — the numbers
   give sequence, the shared rule gives connection. */
.cap-model {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 1px;
  background: var(--line);
  border: 1px solid var(--line);
  margin-top: var(--space-xl);
  list-style: none;
}
.cap-model-item { background: var(--bg); }
.cap-model-item a {
  display: block;
  padding: 1.1rem 1.15rem;
  text-decoration: none;
  color: inherit;
}
.cap-model-item a:hover .cap-model-name,
.cap-model-item a:focus-visible .cap-model-name { text-decoration: underline; }
.cap-model-n {
  display: block;
  font-size: 15px;
  font-weight: 600;
  letter-spacing: 0.06em;
  color: var(--label);
  font-variant-numeric: tabular-nums;
}
.cap-model-mode {
  display: block;
  margin-top: 0.35rem;
  font-size: 15px;
  font-weight: 500;
  letter-spacing: 0.04em;
  text-transform: uppercase;
  color: var(--sub);
}
.cap-model-name {
  display: block;
  margin-top: 0.2rem;
  font-size: 18px;
  font-weight: 600;
  line-height: 1.35;
  color: var(--ink);
}

/* A mode. Head sits left of the body on desktop so the number and question
   stay beside the evidence they introduce, rather than scrolling away above it. */
.cap-mode {
  display: grid;
  grid-template-columns: minmax(0, 4fr) minmax(0, 7fr);
  gap: 2.5rem;
  padding: var(--space-2xl) 0;
  border-top: 1px solid var(--ink);
  scroll-margin-top: 5rem;
}
.cap-mode-n {
  font-size: 15px;
  font-weight: 600;
  letter-spacing: 0.06em;
  color: var(--label);
  font-variant-numeric: tabular-nums;
}
.cap-mode-frame {
  margin-top: 0.3rem;
  font-size: 15px;
  font-weight: 500;
  letter-spacing: 0.06em;
  text-transform: uppercase;
  color: var(--sub);
}
.cap-mode-name {
  margin-top: 0.5rem;
  font-size: clamp(24px, 3vw, 32px);
  font-weight: 700;
  letter-spacing: -0.025em;
  line-height: 1.15;
  color: var(--ink);
}
.cap-mode-q {
  margin-top: 0.6rem;
  font-family: var(--serif);
  font-style: italic;
  font-size: 19px;
  line-height: 1.5;
  color: var(--mid);
}
.cap-mode-value {
  font-size: clamp(21px, 2.4vw, 26px);
  font-weight: 600;
  line-height: 1.35;
  letter-spacing: -0.018em;
  color: var(--ink);
}
.cap-mode-value span { display: block; }
.cap-mode-body .cap-lead { margin-top: var(--space-sm); }
.cap-mode-body .cap-section-title { margin-top: var(--space-lg); }
.cap-mode-body .cap-related-grid { margin-top: var(--space-lg); }

/* One evidence line per mode: the capability in action, not a fourth project
   synopsis. Quiet, because the projects beneath it carry the proof. */
.cap-signal {
  margin-top: var(--space-lg);
  padding-left: 1rem;
  border-left: 2px solid var(--line);
  font-size: 17px;
  line-height: 1.7;
  color: var(--mid);
}

.cap-close {
  padding: var(--space-2xl) 0 var(--space-3xl);
  border-top: 1px solid var(--ink);
}
.cap-close-text {
  max-width: var(--max);
  font-size: clamp(19px, 2.1vw, 23px);
  font-weight: 500;
  line-height: 1.55;
  letter-spacing: -0.015em;
  color: var(--ink);
}
.cap-close-cta {
  display: inline-block;
  margin-top: var(--space-lg);
  font-size: 18px;
  font-weight: 600;
  color: var(--ink);
  text-decoration: none;
  border-bottom: 2px solid var(--ink);
  padding-bottom: 0.15rem;
}
.cap-close-cta span { display: inline-block; transition: transform 0.25s ease; }
.cap-close-cta:hover span, .cap-close-cta:focus-visible span { transform: translateX(4px); }

@media (max-width: 900px) {
  /* The model becomes a vertical relationship rather than a horizontal
     diagram that would need sideways scrolling. */
  .cap-model { grid-template-columns: 1fr; }
  .cap-mode { grid-template-columns: 1fr; gap: var(--space-md); }
}

/* The head is a grid child; it needs no rules of its own beyond keeping its
   contents from stretching when the column is tall. */
.cap-mode-head { align-self: start; }

/* Match the page container the hero and legacy sections use, so the mode's
   top rule aligns with the content column instead of bleeding to the viewport. */
.cap-mode,
.cap-close {
  max-width: 1080px;
  margin: 0 auto;
  padding-left: 4rem;
  padding-right: 4rem;
}

/* A compact label inside a mode. .cap-section-title is a 32px page heading and
   would outweigh the mode name it sits under. */
.cap-practice-label {
  display: block;
  font-size: 15px;
  font-weight: 600;
  letter-spacing: 0.06em;
  text-transform: uppercase;
  color: var(--label);
  margin-bottom: 0.6rem;
}



/* The label lost its spacing when it stopped being .cap-section-title. */
.cap-mode-body .cap-practice-label { margin-top: var(--space-lg); }

/* Two projects per mode, so the grid is two columns here rather than
   inheriting a three-column track and leaving one cramped and one empty. */
.cap-mode-body .cap-related-grid {
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: var(--space-md);
}
@media (max-width: 700px) {
  .cap-mode-body .cap-related-grid { grid-template-columns: 1fr; }
}


/* ── UNIFIED CAPABILITIES: NAV TILES AND ACCENTS ─────────────────────────
   The tiles sit on the same column as the hero text above them, so the
   headline, lead and tiles share one left edge. The dark section rules stay
   full width: they are structure, the tiles are content. */

/* The three capability colours already exist on the homepage cards. Reusing
   them here is what makes a tile and its section read as the same thing. */
.cap-model-item--strategy  { --cap-accent: #2948D7; --cap-tint: #ecedf6; }
.cap-model-item--ai        { --cap-accent: #006F68; --cap-tint: #e9f0ef; }
.cap-model-item--transform { --cap-accent: #B9345A; --cap-tint: #f4ecef; }
.cap-mode--strategy  { --cap-accent: #2948D7; }
.cap-mode--ai        { --cap-accent: #006F68; }
.cap-mode--transform { --cap-accent: #B9345A; }

/* A tile has to look pressable. It gets a card ground against the page, its
   capability colour on the top edge and the number, an arrow that says the
   link goes down this page rather than away from it, and a tint on hover. */
.cap-model-item { background: var(--card); }
.cap-model-item a {
  position: relative;
  display: block;
  padding: 1.15rem 1.15rem 2.6rem;
  border-top: 3px solid var(--cap-accent);
  transition: background 0.2s ease;
}
.cap-model-item a:hover { background: var(--cap-tint); }
.cap-model-item a:focus-visible {
  outline: 2px solid var(--cap-accent);
  outline-offset: -2px;
}
.cap-model-item .cap-model-n { color: var(--cap-accent); }
.cap-model-go {
  position: absolute;
  left: 1.15rem;
  bottom: 1.1rem;
  font-size: 18px;
  line-height: 1;
  color: var(--cap-accent);
  transition: transform 0.2s ease;
}
.cap-model-item a:hover .cap-model-go,
.cap-model-item a:focus-visible .cap-model-go { transform: translateY(3px); }

/* The section repeats its tile's colour on the number and mode label, so the
   reader can see which tile they landed from. The dark rule above stays dark. */
.cap-mode .cap-mode-n,
.cap-mode .cap-mode-frame { color: var(--cap-accent); }

@media (max-width: 900px) {
  .cap-mode, .cap-close { padding-left: 1.5rem; padding-right: 1.5rem; }
}

/* The first mode's dark rule was landing directly under the tile group, so it
   read as the tiles' underline rather than the start of the section beneath.
   The gap lets the rule belong to what follows it. */
.cap-model { margin-bottom: var(--space-2xl); }