/* ==========================================================================
   capacity-code.css — page-only parts for capacity-code.html (2026-10-22 rebuild, MAIN site look).
   Loads after pages.css. Prefix .cap-. Tokens only (palette at alpha), no new colours, fonts, radii or shadows.
   Load ONLY on capacity-code.html. (The old dark cc-* rules for the page-ceo look were removed; the old
   versions live in site-final-backup-2026-10-22-before-new-pages/css/capacity-code.css.)
   ========================================================================== */

main {
  --cap-tile: calc(var(--icon) * 2);    /* 5C tile: 96 / 88 / 80 */
}

/* ---- Hero: two-sentence headline ---- */
.cap-hero__title { max-width: 22ch; }
.cap-hero__title .text-yellow { display: block; }   /* second sentence starts its own line */

/* ---- Story paragraphs: lead size, with short "beat" lines in Bebas ---- */
.cap-prose { gap: var(--space-5); font-size: var(--fs-lead); line-height: var(--lh-lead); }
.cap-prose .cap-beat {
  padding-left: var(--space-4); border-left: 3px solid var(--color-yellow-400);
  font-family: var(--font-display); font-size: var(--fs-display-sm); line-height: var(--lh-display);
  letter-spacing: var(--ls-display); text-transform: uppercase; color: var(--pg-title); text-wrap: balance;
}

/* heading left / text right pairs: the text column starts on the heading's cap line */
.cap-pair { align-items: start; }

/* ---- Blue statement band ---- */
.cap-statement .pg-head > h2 { max-width: 18ch; }
.cap-statement .pg-head > .lead { max-width: var(--measure-body); color: var(--color-on-dark); text-wrap: balance; }
#the-5cs .pg-head > .lead { text-wrap: balance; }

/* ---- Story: photo + numbers stay in view while the story scrolls (desktop) ---- */
.cap-story__stats { margin-top: var(--space-8); }
.cap-story__stats .pg-stat::before { background: var(--color-yellow-400); width: var(--space-8); }
.cap-story__stats .pg-stat dt { font-size: var(--fs-display-xl); line-height: var(--lh-display-tight); }
@media (min-width: 1069px) {
  .cap-story__media { position: sticky; top: calc(var(--header-h) + var(--space-6)); }
  .cap-story .pg-photo { aspect-ratio: 5 / 4; }
}

/* ---- Recognition band: centred single column (heading over prose) ---- */
.cap-center .pg-head { margin-inline: auto; }
.cap-center .cap-prose { margin: var(--space-7) auto 0; max-width: var(--measure-body); }
/* navy "gives you back": columns centred on each other */
.cap-pair--mid { align-items: center; }
#the-5cs .cap-engines + .pg-actions { margin-top: var(--space-7); }

/* ---- 5 Cs in 3 engines (client slide) ---- */
.cap-engines { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: var(--grid-gap); align-items: stretch; }
.cap-engine {
  position: relative; min-width: 0; display: flex; flex-direction: column; align-items: flex-start; gap: var(--space-4);
  padding: var(--card-pad); border-radius: var(--radius-lg);
  background: var(--color-white); border: 1px solid var(--color-hairline); box-shadow: var(--shadow-card-soft);
  transition: box-shadow var(--dur-mid) var(--ease), border-color var(--dur-mid) var(--ease);
}
.cap-engine::before {   /* yellow top tab (same as .pg-card) */
  content: ""; position: absolute; top: -1px; left: var(--card-pad); width: var(--space-6); height: 3px; border-radius: 0 0 2px 2px;
  background: var(--color-yellow-400); transition: width var(--dur-mid) var(--ease);
}
.cap-engine__cs { display: flex; align-items: flex-start; min-height: calc(var(--cap-tile) + var(--space-9)); flex-wrap: wrap; gap: var(--space-5) var(--space-6); width: 100%; padding: var(--space-3) 0 var(--space-6); margin-bottom: var(--space-2); border-bottom: 1px solid var(--hairline-light); }
.cap-c { display: flex; flex-direction: column; align-items: center; gap: var(--space-3); min-width: var(--cap-tile); }
.cap-c__icon {
  display: flex; align-items: center; justify-content: center; width: var(--cap-tile); height: var(--cap-tile);
  border-radius: var(--radius-lg); background: var(--glow-primary-soft), var(--gradient-band-blue-flat);
  box-shadow: inset 0 0 0 1px var(--hairline-dark), var(--shadow-btn-blue); color: var(--color-yellow-400);
}
.cap-c__icon svg { width: var(--icon); height: var(--icon); fill: none; stroke: currentColor; stroke-width: 2.2; stroke-linecap: round; stroke-linejoin: round; }
.cap-c__name { font-family: var(--font-alt); font-weight: 600; font-size: var(--fs-label); line-height: 1.2; letter-spacing: var(--ls-label); text-transform: uppercase; color: var(--color-blue-700); }
.cap-engine__role { margin: 0; color: var(--color-blue-700); }
.cap-engine__name { font-family: var(--font-display); font-weight: 400; font-size: var(--fs-display-md); line-height: var(--lh-display); letter-spacing: var(--ls-display); text-transform: uppercase; color: var(--color-blue-700); }
.cap-engine__text { font-size: var(--fs-body); line-height: var(--lh-body); color: var(--color-text-muted); text-wrap: pretty; }
@media (hover: hover) {
  .cap-engine:hover { box-shadow: var(--pg-shadow-hover); border-color: var(--hairline-light-strong); }
  .cap-engine:hover::before { width: var(--space-9); }
}

/* ---- "What it gives you back": one big number ---- */
.cap-bignum { margin: var(--space-6) 0 0; }
.cap-bignum dt {
  font-family: var(--font-display); font-size: calc(var(--fs-display-xl) * 1.6); line-height: 0.9;
  letter-spacing: var(--ls-display); color: var(--color-yellow-400);
}
.cap-bignum dd {
  margin: var(--space-3) 0 0; padding-top: var(--space-3); border-top: 1px solid var(--pg-line-strong);
  font-family: var(--font-alt); font-weight: 600; font-size: var(--fs-label); line-height: 1.4; letter-spacing: var(--ls-kicker); text-transform: uppercase; color: var(--pg-text);
}

/* ---- Assessment CTA: stronger scrim so text stays AA over the bright desk photo ---- */
.cap-assess::before { background: var(--glow-primary-soft), linear-gradient(90deg, rgba(2, 6, 21, 0.86) 0%, rgba(2, 6, 21, 0.62) 55%, rgba(2, 6, 21, 0.35) 100%); }
@media (max-width: 1068px) { .cap-assess::before { background: var(--overlay-photo-deep), linear-gradient(0deg, rgba(2, 6, 21, 0.45), rgba(2, 6, 21, 0.45)); } }
.cap-assess-band { padding-bottom: var(--section-pad-y-sm); }
/* button labels: long on desktop, short on phone (full text in aria-label) */
.cap-lbl-short { display: none; }
/* ---- Assessment CTA: the fill-in sentence ---- */
.cap-assess .pg-cta__content { gap: var(--space-4); }
.cap-assess .pg-cta__title { margin-bottom: var(--space-2); }
.cap-sentence {
  margin-top: var(--space-2); padding: var(--space-4) var(--space-5); border-radius: var(--radius-md);
  background: rgba(2, 6, 21, 0.55); border: 1px solid var(--glass-photo-line);
  -webkit-backdrop-filter: blur(var(--glass-blur)); backdrop-filter: blur(var(--glass-blur));
  font-size: var(--fs-lead); line-height: var(--lh-lead); color: var(--color-white); text-wrap: pretty;
}
.cap-nowrap { white-space: nowrap; }
.cap-blank { display: inline-block; width: 5em; height: 1em; vertical-align: baseline; border-bottom: 2px solid var(--color-yellow-400); }

/* ---- Bridge strip to SYSTEM: full-bleed slim tint strip, one row ---- */

.cap-bridge { display: grid; grid-template-columns: minmax(0, 1.1fr) minmax(0, 1fr); gap: var(--space-5) var(--space-9); align-items: center; }
.cap-bridge__title { color: var(--color-white); max-width: calc(var(--measure-head) * 1.8); }
.cap-bridge > .pg-head + * { margin-top: 0; }   /* grid gap spaces the columns */
.cap-bridge__text { font-size: var(--fs-body); line-height: var(--lh-body); color: var(--color-on-dark); max-width: var(--measure-body); text-wrap: pretty; }
.cap-bridge .pg-actions { margin-top: var(--space-4); }

/* ---- Recognition: blue pull block inside the prose column ---- */
.cap-pull {
  margin-top: var(--space-5); padding: var(--card-pad); border-radius: var(--radius-lg);
  background: var(--glow-primary-soft), var(--gradient-band-blue-flat); color: var(--color-on-dark);
  display: grid; gap: var(--space-4);
}
.cap-pull__title { color: var(--color-white); margin: 0; }
.cap-pull p { margin: 0; color: var(--color-on-dark); }

/* ==========================================================================
   Tablet <=1068
   ========================================================================== */
@media (max-width: 1068px) {
  .cap-engines { grid-template-columns: minmax(0, 1fr); }
  .cap-bridge { grid-template-columns: minmax(0, 1fr); }
}
@media (min-width: 735px) and (max-width: 1068px) {
  /* each engine as a row: tiles left, name + text right */
  .cap-engine { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); grid-template-rows: auto 1fr; column-gap: var(--space-7); row-gap: var(--space-3); align-items: start; }
  .cap-engine__cs { grid-row: 1 / span 2; margin: 0; padding: var(--space-3) 0 0; border-bottom: 0; }
  .cap-engine__name, .cap-engine__text { grid-column: 2; }
  .cap-engine__name { padding-top: var(--space-3); }
}

/* ==========================================================================
   Phone <=734
   ========================================================================== */
@media (max-width: 734px) {
  .cap-prose { font-size: var(--fs-body); line-height: var(--lh-body); gap: var(--space-4); }
  .cap-engine { padding: var(--card-pad-sm); }
  .cap-engine::before { left: var(--card-pad-sm); }
  .cap-engine__cs { gap: var(--space-4) var(--space-5); padding-bottom: var(--space-5); }
  .cap-c__name { letter-spacing: var(--ls-btn); }
  .cap-sentence { font-size: var(--fs-body); line-height: var(--lh-body); padding: var(--space-3) var(--space-4); }
  .cap-blank { width: 3.5em; }
  .cap-lbl-long { display: none; }
  .cap-lbl-short { display: inline; }
  main { --cap-tile: calc(var(--icon) * 1.5); }
  .cap-engine { gap: var(--space-3); }
  .cap-engine__cs { flex-wrap: nowrap; gap: var(--space-4); padding: var(--space-2) 0 var(--space-4); margin-bottom: 0; }
  .cap-c { min-width: 0; gap: var(--space-2); }
  .cap-c__icon svg { width: calc(var(--icon) * 0.8); height: calc(var(--icon) * 0.8); }
  .cap-c__name { font-size: var(--fs-label); letter-spacing: 0.04em; }
  .cap-engine__cs { min-height: 0; }
  .cap-pull { padding: var(--card-pad-sm); }
  .cap-nowrap { white-space: normal; }
  .cap-blank { display: block; width: 100%; height: 1.4em; margin: 0 0 var(--space-2); }
}

/* ==== Fix round 1 (2026-10-22) ==== */
.cap-recog .pg-head { text-align: center; }
.cap-recog .cap-prose { max-width: var(--measure-body); }
.cap-story__media .cap-story__stats { margin-top: var(--space-7); }
.cap-engine__text { flex: 1; }
.cap-engine__cs { min-height: calc(var(--cap-tile) + var(--space-9) + var(--space-3)); }
.cap-engines-cta { justify-content: center; margin-top: var(--space-8); }
.cap-back { padding-bottom: var(--section-pad-y-sm); }
.cap-back .cap-pair--mid { align-items: end; }
/* bridge: light compact strip (no second navy band) */
.cap-bridge__title { color: var(--pg-title); }
.cap-bridge__text { color: var(--pg-text); }
@media (max-width: 734px) {
  .cap-engine__cs { flex-wrap: wrap; flex-direction: column; gap: var(--space-3); }
  .cap-c { flex-direction: row; align-items: center; gap: var(--space-4); }
  .cap-c__name { white-space: nowrap; }
  .cap-engine__cs { min-height: 0; }
}