/* Homepage composition: proof plate, named proof, sectors, responsive grids.
   Loaded only if linked from Base, or appended once by the ship script.
   Companion to tw-site.css. Do not redefine tokens. */

/* ---- shared homepage grids (class-based, collapse at 640) ---- */
.hp-grid-2 {
  display: grid;
  grid-template-columns: 1.5fr 1fr;
  gap: 56px;
  align-items: start;
}
.hp-grid-2-equal {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 16px;
}
.hp-grid-3 {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 16px;
}
.hp-fail-row {
  display: grid;
  grid-template-columns: minmax(180px, 1fr) 2.4fr;
  gap: 24px;
  padding: 16px 0;
  border-bottom: 1px solid rgba(232, 235, 232, 0.14);
  align-items: baseline;
}
.hp-fail-row--head {
  padding: 14px 0;
  border-bottom: 1px solid rgba(232, 235, 232, 0.14);
}
.hp-fail-row--head span {
  font-family: var(--tw-font-mono);
  font-size: 14px;
  letter-spacing: .1em;
  text-transform: uppercase;
  color: var(--tw-fog-2);
}

/* ---- named proof / testimonial ---- */
.hp-proof-figure {
  margin: 0;
  border: 1px solid var(--tw-ink);
  background: var(--tw-cool);
  display: grid;
  grid-template-columns: minmax(200px, 280px) minmax(0, 1fr);
  align-items: stretch;
}
.hp-proof-photo {
  position: relative;
  min-height: 280px;
  align-self: stretch;
  background: var(--tw-cool-2);
  border-right: 1px solid var(--tw-rule);
  overflow: hidden;
}
.hp-proof-photo img {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  object-fit: cover;
  object-position: center 20%;
  filter: grayscale(1) contrast(1.04);
}
.hp-proof-body {
  display: flex;
  flex-direction: column;
  justify-content: space-between;
  gap: clamp(20px, 3vw, 32px);
  padding: clamp(26px, 4vw, 50px);
}
.hp-proof-body blockquote {
  margin: 0;
  font-family: var(--tw-font-display);
  font-style: italic;
  font-weight: 400;
  font-size: clamp(19px, 2.2vw, 28px);
  line-height: 1.28;
  letter-spacing: -0.015em;
  color: var(--tw-ink);
  text-wrap: pretty;
}
.hp-proof-body figcaption {
  border-top: 1px solid var(--tw-ink);
  padding-top: 14px;
  font-family: var(--tw-font-mono);
  font-size: 14px;
  letter-spacing: .1em;
  text-transform: uppercase;
  line-height: 1.34;
  color: var(--tw-ink);
}
.hp-proof-body figcaption span {
  color: var(--tw-slate);
}

/* ---- decision / prioritization plate ---- */
.hp-seq-intro {
  display: grid;
  grid-template-columns: 1.15fr 1fr;
  gap: clamp(22px, 4vw, 60px);
  align-items: end;
}
.hp-seq-plate {
  margin-top: clamp(28px, 4vw, 48px);
  border: 1px solid var(--tw-ink);
  border-top: 3px solid var(--tw-method);
  background: var(--tw-paper);
  display: grid;
  grid-template-columns: 1fr 1.35fr 1fr;
}
.hp-seq-zone {
  padding: clamp(20px, 2.4vw, 28px);
  min-width: 0;
}
.hp-seq-zone + .hp-seq-zone {
  border-left: 1px solid var(--tw-rule);
}
.hp-seq-zone__label {
  font-family: var(--tw-font-mono);
  font-size: 14px;
  letter-spacing: .1em;
  text-transform: uppercase;
  color: var(--tw-slate);
  border-bottom: 1px solid var(--tw-rule);
  padding-bottom: 10px;
  margin-bottom: 18px;
}
.hp-seq-zone__label.is-method {
  color: var(--tw-method);
}
.hp-seq-signals {
  position: relative;
  display: flex;
  flex-direction: column;
  gap: 14px;
  padding-left: 18px;
}
.hp-seq-signals::before {
  content: "";
  position: absolute;
  left: 0;
  top: 18px;
  bottom: 18px;
  width: 1px;
  background: var(--tw-rule);
}
.hp-seq-signal {
  position: relative;
  border: 1px solid var(--tw-rule);
  background: var(--tw-cool-2);
  padding: 14px 16px;
}
.hp-seq-signal::before {
  content: "";
  position: absolute;
  left: -18px;
  top: 20px;
  width: 17px;
  height: 1px;
  background: var(--tw-rule);
}
.hp-seq-signal:nth-child(2) { margin-left: 12px; }
.hp-seq-signal:nth-child(2)::before { left: -30px; width: 29px; }
.hp-seq-signal:nth-child(3) { margin-left: 6px; }
.hp-seq-signal:nth-child(3)::before { left: -24px; width: 23px; }
.hp-seq-signal strong {
  display: block;
  font-family: var(--tw-font-mono);
  font-size: 14px;
  font-weight: 500;
  letter-spacing: .1em;
  text-transform: uppercase;
  color: var(--tw-ink);
  line-height: 1.3;
}
.hp-seq-signal p {
  margin: 8px 0 0;
  font-size: 15px;
  line-height: 1.45;
  color: var(--tw-ink-2);
}
.hp-seq-spine {
  display: flex;
  flex-direction: column;
  gap: 0;
}
.hp-seq-step {
  border: 1px solid var(--tw-rule);
  border-bottom: 0;
  padding: 12px 14px;
  background: var(--tw-paper);
}
.hp-seq-step:last-child { border-bottom: 1px solid var(--tw-rule); }
.hp-seq-step.is-active {
  border-color: var(--tw-ink);
  background: var(--tw-cool);
}
.hp-seq-step__name {
  font-family: var(--tw-font-mono);
  font-size: 14px;
  letter-spacing: .1em;
  text-transform: uppercase;
  color: var(--tw-slate);
}
.hp-seq-step.is-active .hp-seq-step__name { color: var(--tw-ink); }
.hp-seq-step__note {
  margin-top: 6px;
  font-family: var(--tw-font-mono);
  font-size: 13px;
  letter-spacing: .04em;
  color: var(--tw-method);
  line-height: 1.35;
}
.hp-seq-lenses {
  margin-top: 18px;
  border-top: 1px solid var(--tw-rule);
  padding-top: 14px;
}
.hp-seq-lenses__label {
  font-family: var(--tw-font-mono);
  font-size: 14px;
  letter-spacing: .1em;
  text-transform: uppercase;
  color: var(--tw-slate);
  margin-bottom: 10px;
}
.hp-seq-chips {
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
}
.hp-seq-chips span {
  font-family: var(--tw-font-mono);
  font-size: 13px;
  letter-spacing: .06em;
  color: var(--tw-ink);
  border: 1px solid var(--tw-rule);
  padding: 5px 9px;
}
.hp-seq-constraint {
  margin-top: 14px;
  font-family: var(--tw-font-mono);
  font-size: 14px;
  letter-spacing: .1em;
  text-transform: uppercase;
  color: var(--tw-method);
}
.hp-seq-fund {
  display: flex;
  flex-direction: column;
  gap: 14px;
}
.hp-seq-card {
  border: 1px solid var(--tw-rule);
  padding: 16px 18px;
}
.hp-seq-card--now {
  border-color: var(--tw-ink);
  background: var(--tw-ink);
  color: var(--tw-fog);
}
.hp-seq-card--next {
  border-color: var(--tw-ink);
  background: var(--tw-cool);
}
.hp-seq-card__top {
  display: flex;
  justify-content: space-between;
  gap: 10px;
  font-family: var(--tw-font-mono);
  font-size: 14px;
  letter-spacing: .1em;
  text-transform: uppercase;
}
.hp-seq-card--now .hp-seq-card__top { color: var(--tw-fog); }
.hp-seq-card--now .hp-seq-card__top b { color: var(--tw-outcome); font-weight: 500; }
.hp-seq-card--next .hp-seq-card__top { color: var(--tw-ink); }
.hp-seq-card--next .hp-seq-card__top b { color: var(--tw-slate); font-weight: 500; }
.hp-seq-card--later .hp-seq-card__top { color: var(--tw-slate); }
.hp-seq-card p {
  margin: 10px 0 0;
  font-size: 16px;
  line-height: 1.45;
}
.hp-seq-card--now p { color: var(--tw-fog); }
.hp-seq-card--next p { color: var(--tw-ink-2); }
.hp-seq-card--later p { color: var(--tw-slate); }
.hp-seq-caption {
  margin: 14px 0 0;
  font-family: var(--tw-font-mono);
  font-size: 14px;
  letter-spacing: .06em;
  color: var(--tw-slate);
}

/* ---- method cards ---- */
.hp-method-card {
  border: 1px solid var(--tw-ink);
  border-top: 3px solid var(--tw-method);
  background: var(--tw-bg-elevated);
  padding: 22px;
  display: flex;
  flex-direction: column;
  gap: 12px;
  color: inherit;
  text-decoration: none;
  border-bottom: 1px solid var(--tw-ink);
}
.hp-method-card:hover { color: inherit; }
.hp-method-card__kicker {
  font-family: var(--tw-font-mono);
  font-size: 14px;
  letter-spacing: .1em;
  text-transform: uppercase;
  color: var(--tw-method);
  font-weight: 500;
}
.hp-method-card p {
  font-size: 15px;
  line-height: 1.45;
  color: var(--tw-ink-2);
  margin: 0;
}
.hp-method-card__cta {
  margin-top: auto;
  font-family: var(--tw-font-mono);
  font-size: 14px;
  letter-spacing: .1em;
  text-transform: uppercase;
  color: var(--tw-method);
}

/* ---- sectors ---- */
.hp-sectors-head {
  display: flex;
  flex-wrap: wrap;
  gap: 12px;
  justify-content: space-between;
  align-items: baseline;
}
.hp-sectors-head a {
  font-family: var(--tw-font-mono);
  font-size: 14px;
  letter-spacing: .1em;
  text-transform: uppercase;
  color: var(--tw-method);
  border-bottom: 0;
}
.hp-sectors-grid {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: clamp(14px, 2vw, 22px);
  margin-top: clamp(24px, 3vw, 36px);
}
.hp-sector-card {
  border: 1px solid var(--tw-ink);
  background: var(--tw-cool);
  padding: 22px;
  color: var(--tw-ink);
  display: block;
  text-decoration: none;
  border-bottom: 1px solid var(--tw-ink);
}
.hp-sector-card:hover {
  background: var(--tw-cool-2);
  color: var(--tw-ink);
}
.hp-sector-card h3 {
  font-family: var(--tw-font-display);
  font-weight: 600;
  font-size: 22px;
  letter-spacing: -0.02em;
  line-height: 1.05;
  margin: 0;
  color: var(--tw-ink);
}
.hp-sector-card p {
  font-size: 16px;
  line-height: 1.45;
  color: var(--tw-ink-2);
  margin: 12px 0 0;
}

/* ---- operator panels / neutrality cards on dark ---- */
.hp-panel {
  border: 1px solid rgba(235, 228, 213, 0.28);
  background: var(--tw-ink);
}
.hp-panel__head {
  font-family: var(--tw-font-mono);
  font-size: 14px;
  letter-spacing: .1em;
  text-transform: uppercase;
  color: var(--tw-bone-2);
  padding: 12px 18px;
  border-bottom: 1px solid rgba(235, 228, 213, 0.20);
}
.hp-panel__head.is-method { color: var(--tw-method-lt); }
.hp-panel__list { padding: 6px 18px 14px; }
.hp-panel__list div {
  padding: 12px 0;
  border-bottom: 1px solid rgba(235, 228, 213, 0.14);
  color: var(--tw-bone);
  font-size: 15px;
  line-height: 1.4;
}
.hp-panel__list div:last-child { border-bottom: 0; }
.hp-panel__body { padding: 18px; }
.hp-panel__body p {
  color: var(--tw-bone);
  font-size: 15px;
  line-height: 1.55;
  margin: 0;
}
.hp-x-card {
  border: 1px solid rgba(235, 228, 213, 0.28);
  padding: 22px;
  display: flex;
  flex-direction: column;
  gap: 12px;
}
.hp-x-card b {
  font-family: var(--tw-font-mono);
  font-size: 26px;
  color: var(--tw-method-lt);
  line-height: 1;
  font-weight: 500;
}
.hp-x-card span {
  font-family: var(--tw-font-display);
  font-size: 20px;
  font-weight: 600;
  color: var(--tw-bone);
  line-height: 1.1;
}
.hp-start-card {
  border: 1px solid rgba(235, 228, 213, 0.28);
  background: var(--tw-ink);
  padding: 26px;
  display: flex;
  flex-direction: column;
  gap: 14px;
}
.hp-start-card .kicker {
  font-family: var(--tw-font-mono);
  font-size: 14px;
  letter-spacing: .1em;
  text-transform: uppercase;
  color: var(--tw-method-lt);
}
.hp-start-card h3 {
  font-family: var(--tw-font-display);
  font-size: 24px;
  line-height: 1.05;
  letter-spacing: -.02em;
  font-weight: 600;
  color: var(--tw-bone);
  margin: 0;
}
.hp-start-card p {
  font-size: 15px;
  line-height: 1.45;
  color: var(--tw-bone-2);
  margin: 0;
  flex: 1;
}
.hp-start-card .tw-btn { align-self: flex-start; }

/* The shared .tw-btn--ghost variant is dark text on a transparent
   background, built for light plates. This card's background is
   --tw-ink, so without this override the ghost button's border and
   label both render ink-on-ink: invisible. Give it the card's light
   (fog) color instead. */
.hp-start-card .tw-btn--ghost {
  border-color: var(--tw-fog);
  color: var(--tw-fog);
}
.hp-start-card .tw-btn--ghost:hover {
  background: rgba(232, 235, 232, 0.08);
  filter: none;
}

.hp-close {
  border: 1px solid var(--tw-ink);
  background: var(--tw-tint-ink);
  padding: 32px;
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  justify-content: space-between;
  gap: 16px;
}
.hp-close p {
  font-family: var(--tw-font-display);
  font-size: clamp(26px, 3.4vw, 38px);
  line-height: 1.1;
  letter-spacing: -.02em;
  font-weight: 600;
  color: var(--tw-ink);
  margin: 0;
  max-width: 18em;
}
.hp-h2 {
  font-family: var(--tw-font-display);
  font-size: clamp(30px, 4vw, 48px);
  line-height: 1.02;
  letter-spacing: -.02em;
  font-weight: 600;
  margin: 0 0 20px;
}
.hp-h2-ink { color: var(--tw-ink); }
.hp-h2-bone { color: var(--tw-bone); }
.hp-h2-fog { color: var(--tw-fog); }
.hp-lede {
  font-size: 17px;
  line-height: 1.5;
  margin: 0;
  max-width: 44em;
}
.hp-lede-ink { color: var(--tw-ink-2); }
.hp-lede-bone { color: var(--tw-bone-2); }
.hp-lede-fog { color: var(--tw-fog-2); }
.hp-aside-mono {
  font-family: var(--tw-font-mono);
  font-size: 14px;
  letter-spacing: .1em;
  text-transform: uppercase;
  color: var(--tw-slate);
  border-left: 1px solid var(--tw-rule);
  padding-left: 24px;
  line-height: 1.6;
}
.hp-hero-sub {
  font-family: var(--tw-font-body);
  font-style: italic;
  font-size: clamp(19px, 2.1vw, 26px);
  line-height: 1.3;
  margin: 16px 0 0;
  max-width: 24ch;
  color: var(--tw-fog-2);
}
.hp-service-link {
  color: inherit;
  text-decoration: none;
  border-bottom: 0;
}
.hp-service-link:hover { color: var(--tw-method); }

@media (max-width: 980px) {
  .hp-seq-plate { grid-template-columns: 1fr; }
  .hp-seq-zone + .hp-seq-zone {
    border-left: 0;
    border-top: 1px solid var(--tw-rule);
  }
  /* Stack quote under photo, but keep a real portrait frame.
     A short full-width strip + object-fit:cover crops to forehead/eyes on
     mobile landscape. Aspect-ratio forces a head-and-shoulders crop. */
  .hp-proof-figure { grid-template-columns: 1fr; }
  .hp-proof-photo {
    min-height: 0;
    width: 100%;
    aspect-ratio: 4 / 5;
    max-height: min(52vh, 420px);
    border-right: 0;
    border-bottom: 1px solid var(--tw-rule);
  }
  .hp-proof-photo img {
    object-position: center 18%;
  }
  .hp-seq-intro { grid-template-columns: 1fr; align-items: start; }
}

/* Phone landscape and other short wide viewports: keep photo beside quote
   so the headshot is not forced into a thin horizontal band. */
@media (max-width: 980px) and (max-height: 500px) and (orientation: landscape) {
  .hp-proof-figure {
    grid-template-columns: minmax(140px, 34vw) minmax(0, 1fr);
  }
  .hp-proof-photo {
    aspect-ratio: auto;
    max-height: none;
    min-height: 0;
    height: 100%;
    border-right: 1px solid var(--tw-rule);
    border-bottom: 0;
  }
  .hp-proof-body {
    padding: 18px 20px;
    gap: 14px;
  }
  .hp-proof-body blockquote {
    font-size: clamp(16px, 2.4vw, 22px);
  }
}

@media (max-width: 640px) {
  .hp-grid-2,
  .hp-grid-2-equal,
  .hp-grid-3,
  .hp-sectors-grid {
    grid-template-columns: 1fr;
  }
  .hp-fail-row,
  .hp-fail-row--head {
    grid-template-columns: 1fr;
    gap: 8px;
  }
  .hp-close { flex-direction: column; align-items: flex-start; }
}

/* ---- methodology consolidation (03) ---- */
.hp-method-bridge {
  margin-top: clamp(28px, 4vw, 44px);
  border-top: 1px solid var(--tw-rule);
  padding-top: 18px;
}
.hp-method-bridge span {
  display: block;
  font-family: var(--tw-font-mono);
  font-size: 14px;
  letter-spacing: .1em;
  text-transform: uppercase;
  color: var(--tw-slate);
}
.hp-method-bridge p {
  font-family: var(--tw-font-display);
  font-weight: 600;
  font-size: clamp(22px, 2.6vw, 30px);
  line-height: 1.05;
  letter-spacing: -.02em;
  color: var(--tw-ink);
  margin: 10px 0 0;
  max-width: 30em;
}
.hp-method-cards { margin-top: clamp(20px, 2.6vw, 28px); }
.hp-method-card h3 {
  font-family: var(--tw-font-display);
  font-weight: 600;
  font-size: 22px;
  line-height: 1.05;
  letter-spacing: -.02em;
  color: var(--tw-ink);
  margin: 0;
}
.hp-method-card__expand,
.hp-method-strip__expand {
  display: block;
  font-family: var(--tw-font-mono);
  font-size: 14px;
  letter-spacing: .06em;
  color: var(--tw-slate);
  line-height: 1.32;
}
.hp-method-strip {
  margin-top: 16px;
  border: 1px solid var(--tw-ink);
  border-top: 3px solid var(--tw-method);
  background: var(--tw-bg-elevated);
  padding: 22px;
  display: grid;
  grid-template-columns: minmax(180px, 1fr) 2.4fr;
  gap: clamp(18px, 2.4vw, 32px);
  align-items: start;
  color: inherit;
  text-decoration: none;
}
.hp-method-strip:hover { color: inherit; }
.hp-method-strip__kicker {
  display: block;
  font-family: var(--tw-font-mono);
  font-size: 14px;
  letter-spacing: .1em;
  text-transform: uppercase;
  color: var(--tw-method);
  font-weight: 500;
}
.hp-method-strip h3 {
  font-family: var(--tw-font-display);
  font-weight: 600;
  font-size: 22px;
  line-height: 1.05;
  letter-spacing: -.02em;
  color: var(--tw-ink);
  margin: 10px 0 0;
}
.hp-method-strip p {
  font-size: 15px;
  line-height: 1.45;
  color: var(--tw-ink-2);
  margin: 0 0 12px;
}
.hp-method-strip__cta {
  display: block;
  margin-top: 14px;
  font-family: var(--tw-font-mono);
  font-size: 14px;
  letter-spacing: .1em;
  text-transform: uppercase;
  color: var(--tw-method);
}
.hp-lede + .hp-lede { margin-top: 16px; }
@media (max-width: 640px) {
  .hp-method-strip { grid-template-columns: 1fr; gap: 14px; }
}

/* ---- start signature (09) ---- */
.hp-start-signer {
  display: grid;
  grid-template-columns: 44px minmax(0, 1fr);
  gap: 14px;
  align-items: start;
  border-top: 1px solid rgba(232, 235, 232, 0.28);
  padding-top: 14px;
}
.hp-start-signer img {
  display: block;
  width: 44px;
  height: 44px;
  object-fit: cover;
  object-position: center 20%;
  filter: grayscale(1) contrast(1.04);
  border: 1px solid rgba(232, 235, 232, 0.28);
}
.hp-start-signer__name,
.hp-start-signer__role {
  display: block;
  font-family: var(--tw-font-mono);
  font-size: 14px;
  letter-spacing: .1em;
  text-transform: uppercase;
  line-height: 1.32;
}
.hp-start-signer__name { color: var(--tw-fog); }
.hp-start-signer__role { color: var(--tw-fog-2); }
.hp-start-card .hp-start-signer p {
  flex: none;
  font-size: 15px;
  line-height: 1.45;
  color: var(--tw-fog-2);
  margin: 8px 0 0;
}

/* ==== homepage v2 (CD redesign) : appended once, do not duplicate ==== */
/*
   READ THIS BEFORE EDITING.

   STRUCTURE IS NOT DEFINED HERE. Every multi-column group on the homepage
   carries a .tw-layout-* class from TW-LAYOUT LIBRARY v1 in tw-site.css and
   inherits the standard reflow moments (460 / 640 / 960). The rules below
   supply parameters and visual treatment only. If a group needs to reflow
   differently, parameterize the family through its custom properties. Do not
   fork a family, do not hand-write a column layout, and do not introduce a
   fourth breakpoint number.

   --tw-layout-gap is only ever set on the same element that carries the
   layout class, never on an ancestor. The token means a 24px gutter to the
   col-N families, 72px to masthead, and a 1px hairline to col-4/col-5/stats,
   so letting it inherit across mixed families is a known hazard.
   tw-layout-proportional reads neither gap token, so the two rows that use it
   set gap directly.

   TYPE. Mono labels use .tw-type-label from TW-TYPE ROLES v1, which is
   measured verbatim from the live corpus and matches the design export
   exactly. The display and body sizes stay local on purpose: the homepage
   runs a larger display scale than the article corpus the other roles were
   measured from, so adopting .tw-type-h2 (34px) or .tw-type-body (19px) here
   would visibly resize an approved design. Revisit if the roles ever gain a
   scale parameter.

   TWO COMPONENTS ARE DECLARED BESPOKE, each marked data-layout="bespoke" in
   the markup with its responsive rule beside its base rule:
     .hp-quote-fig         a bordered figure with a bleed photo rail
     .hp-lifecycle-tracks  a five-track meter that must not reflow

   Rules earlier in this file that the v2 composition no longer calls are left
   in place and dormant, not deleted.
*/

/* --- bands ------------------------------------------------------------- */
.hp-band { position: relative; }
.hp-band--ink { background: var(--tw-ink); color: var(--tw-fog); }
.hp-band--paper { background: var(--tw-paper); border-top: 1px solid var(--tw-ink); }
.hp-band--cool { background: var(--tw-cool); border-top: 1px solid var(--tw-ink); }
.hp-band--graphite { background: var(--tw-graphite); color: var(--tw-fog); border-top: 1px solid var(--tw-ink); }
.hp-band--hero > .tw-container { padding-top: clamp(52px, 7vw, 96px); padding-bottom: clamp(58px, 7vw, 104px); }
.hp-band--proof > .tw-container { padding-top: clamp(48px, 6vw, 88px); padding-bottom: clamp(48px, 6vw, 88px); }
.hp-band--main > .tw-container { padding-top: clamp(52px, 6.5vw, 96px); padding-bottom: clamp(52px, 6.5vw, 96px); }
.hp-band--rail > .tw-container { padding-top: clamp(46px, 6vw, 84px); padding-bottom: clamp(46px, 6vw, 84px); }
.hp-band .tw-btn { padding: 16px 28px; }
.hp-band--ink .tw-btn, .hp-band--graphite .tw-btn { background: var(--tw-fog); border-color: var(--tw-fog); color: var(--tw-ink); }

/* Ground-contextual colour for the shared label role. Scoped to a band, so
   it cannot leak to articles or any other consumer of .tw-type-label. */
.hp-band--ink .tw-type-label, .hp-band--graphite .tw-type-label { color: var(--tw-fog-2); }

/* --- section marks ------------------------------------------------------ */
.hp-mark { border-bottom: 1px solid var(--tw-rule); padding-bottom: 12px; }
.hp-mark .n { color: var(--tw-method); }
.hp-mark--dark { border-bottom-color: rgba(232, 235, 232, 0.2); }
.hp-mark--dark .n { color: var(--tw-method-lt); }

/* --- section heads: tw-layout-masthead ---------------------------------- */
.hp-band-head { --split-a: 1.15fr; --split-b: 1fr; --tw-layout-gap: clamp(20px, 4vw, 56px); align-items: end; padding-top: clamp(26px, 3.5vw, 44px); }
.hp-band-head--wide { --split-a: 1fr; --split-b: 1fr; --tw-layout-gap: clamp(22px, 4vw, 60px); }
.hp-band-head h2 { font-family: var(--tw-font-display); font-weight: 600; font-size: clamp(30px, 3.8vw, 52px); line-height: 1.03; letter-spacing: -0.025em; margin: 0; color: var(--tw-ink); text-wrap: balance; }
.hp-band-head p { font-family: var(--tw-font-body); font-size: 17px; line-height: 1.5; margin: 0; color: var(--tw-ink-2); max-width: 44ch; text-wrap: pretty; }
.hp-band-head--wide p { max-width: 60ch; }
.hp-band--ink .hp-band-head h2, .hp-band--graphite .hp-band-head h2 { color: var(--tw-fog); }
.hp-band--ink .hp-band-head p, .hp-band--graphite .hp-band-head p { color: var(--tw-fog-2); }

/* --- 01 hero ------------------------------------------------------------ */
.hp-hero-kicker { display: inline-flex; align-items: center; gap: 10px; border: 1px solid rgba(232, 235, 232, 0.28); padding: 9px 14px; }
.hp-hero-kicker .n { color: var(--tw-method-lt); }
.hp-hero-h1 { font-family: var(--tw-font-display); font-weight: 600; font-size: clamp(38px, 6vw, 80px); line-height: 1.02; letter-spacing: -0.025em; margin: clamp(28px, 4vw, 48px) 0 0; color: var(--tw-fog); max-width: 20ch; text-wrap: balance; }
.hp-hero-actions { --split-a: 1fr; --split-b: auto; --tw-layout-gap: clamp(24px, 4vw, 56px); align-items: end; margin-top: clamp(28px, 4vw, 44px); }
.hp-hero-actions .tw-btn { justify-self: start; }
.hp-hero-lede { font-family: var(--tw-font-body); font-size: clamp(18px, 2vw, 22px); line-height: 1.45; margin: 0; color: var(--tw-fog-2); max-width: 34ch; text-wrap: pretty; }

/* --- 02 proof ----------------------------------------------------------- */
.hp-outcome-grid { --tw-layout-gap: clamp(14px, 2vw, 22px); margin-top: clamp(26px, 3.5vw, 42px); }
.hp-outcome-card { border: 1px solid var(--tw-ink); border-top: 3px solid var(--tw-method); background: var(--tw-cool); padding: clamp(20px, 2.4vw, 28px); display: flex; flex-direction: column; gap: 14px; }
.hp-outcome-num { font-family: var(--tw-font-display); font-weight: 700; font-size: clamp(30px, 3.4vw, 42px); line-height: 1; letter-spacing: -0.025em; color: var(--tw-outcome); }
.hp-outcome-num.is-long { font-size: clamp(26px, 2.7vw, 34px); line-height: 1.05; }
.hp-outcome-label { border-top: 1px solid var(--tw-rule); padding-top: 12px; }
.hp-outcome-card p, .hp-path-list p { font-family: var(--tw-font-body); font-size: 17px; line-height: 1.45; margin: 0; color: var(--tw-ink-2); text-wrap: pretty; }

/* BESPOKE 1 of 2: .hp-quote-fig.
   A bordered figure whose left cell is a full-bleed photo flush to the frame.
   No library family fits: masthead reflows at 960 and reopens a 40px gap that
   would show inside the frame, and rail's border-edge mode drops its rule at
   640, so pairing them would make the figure change state twice. Declared
   bespoke, one collapse at the standard 640, rule immediately below. */
.hp-quote-fig[data-layout="bespoke"] { display: grid; grid-template-columns: minmax(0, 300px) minmax(0, 1fr); }
@media (max-width: 640px) { .hp-quote-fig[data-layout="bespoke"] { grid-template-columns: 1fr; } .hp-quote-media { border-right: 0; border-bottom: 1px solid var(--tw-rule); min-height: 240px; } }
.hp-quote-fig { margin: clamp(16px, 2vw, 22px) 0 0; border: 1px solid var(--tw-ink); background: var(--tw-cool); }
.hp-quote-media { min-height: 300px; background: var(--tw-cool-2); border-right: 1px solid var(--tw-rule); overflow: hidden; position: relative; }
.hp-quote-media img { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; object-position: center 18%; mix-blend-mode: multiply; filter: grayscale(1) contrast(1.05); }
.hp-quote-body { min-width: 0; display: flex; flex-direction: column; justify-content: space-between; gap: clamp(20px, 3vw, 32px); padding: clamp(24px, 4vw, 48px); }
.hp-quote-body blockquote { margin: 0; font-family: var(--tw-font-display); font-weight: 400; font-size: clamp(19px, 1.9vw, 26px); line-height: 1.3; letter-spacing: -0.02em; color: var(--tw-ink); text-wrap: pretty; }
.hp-quote-body figcaption { color: var(--tw-ink); border-top: 1px solid var(--tw-rule); padding-top: 14px; }
.hp-quote-body figcaption span { color: var(--tw-slate); }

/* --- 03 lifecycle ------------------------------------------------------- */
.hp-lifecycle-key { display: flex; flex-wrap: wrap; gap: 16px 28px; align-items: center; margin-top: clamp(28px, 4vw, 44px); border-top: 1px solid var(--tw-ink); border-bottom: 1px solid var(--tw-rule); padding: 14px 0; }
.hp-lifecycle-key > span { display: inline-flex; align-items: center; gap: 8px; }
.hp-key-swatch { width: 26px; height: 9px; display: block; box-sizing: border-box; }
.hp-key-swatch.is-owns { background: var(--tw-ink); }
.hp-key-swatch.is-varies { background: var(--tw-cool-3); border: 1px solid var(--tw-rule); }
.hp-key-swatch.is-out { border: 1px solid var(--tw-rule); }
.hp-lifecycle-legend { display: flex; flex-wrap: wrap; gap: 8px 26px; padding: 14px 0 16px; font-family: var(--tw-font-mono); font-size: 14px; letter-spacing: 0.06em; text-transform: uppercase; line-height: 1.3; color: var(--tw-slate); }
.hp-lifecycle-legend .n { color: var(--tw-method); }
.hp-lifecycle-table { display: flex; flex-direction: column; border-left: 1px solid var(--tw-rule); border-right: 1px solid var(--tw-rule); }
.hp-lifecycle-row { --p1: minmax(0, 1.05fr); --p2: minmax(0, 2.1fr); --p3: minmax(0, 1.85fr); gap: clamp(16px, 2.5vw, 32px); padding: clamp(20px, 2.4vw, 26px); border-bottom: 1px solid var(--tw-rule); background: var(--tw-cool); }
.hp-lifecycle-row > * { min-width: 0; }
.hp-lifecycle-name { font-family: var(--tw-font-display); font-weight: 600; font-size: 19px; line-height: 1.15; letter-spacing: -0.02em; color: var(--tw-ink); }
.hp-lifecycle-row p { font-family: var(--tw-font-body); font-size: 17px; line-height: 1.45; margin: 0; color: var(--tw-ink-2); text-wrap: pretty; }
.hp-lifecycle-row.is-tw { padding: clamp(22px, 2.6vw, 30px) clamp(20px, 2.4vw, 26px); border-top: 1px solid var(--tw-ink); border-bottom: 1px solid var(--tw-ink); background: var(--tw-paper); }
.hp-lifecycle-row.is-tw .hp-lifecycle-name { font-weight: 700; font-size: 21px; }
.hp-lifecycle-row.is-tw p { color: var(--tw-ink); }

/* BESPOKE 2 of 2: .hp-lifecycle-tracks.
   Five tracks read as one continuous meter, not as five cards. Every library
   col-N family steps down as the viewport narrows, which would rewrap the
   meter mid-read and destroy the comparison the row exists to make. This grid
   therefore holds five columns at every width, on purpose. It fits: inside
   the narrowest supported viewport each bar is still about 50px wide, so
   there is no horizontal scroll, which is what the messaging brief requires.
   No media query below is an intentional absence, not an omission. */
.hp-lifecycle-tracks[data-layout="bespoke"] { display: grid; grid-template-columns: repeat(5, minmax(0, 1fr)); gap: 8px; }
.hp-track-num { font-family: var(--tw-font-mono); font-size: 14px; letter-spacing: 0.04em; text-transform: uppercase; color: var(--tw-slate); line-height: 1.3; margin-bottom: 7px; }
.hp-lifecycle-row.is-tw .hp-track-num { color: var(--tw-ink-2); }
.hp-bar { height: 10px; box-sizing: border-box; }
.hp-bar.is-owns { background: var(--tw-ink); }
.hp-bar.is-varies { background: var(--tw-cool-3); border: 1px solid var(--tw-rule); }
.hp-bar.is-out { border: 1px solid var(--tw-rule); }
.hp-lifecycle-row.is-tw .hp-bar.is-owns { background: var(--tw-method); }

.hp-lifecycle-note { --tw-layout-gap: clamp(18px, 3vw, 44px); margin-top: clamp(18px, 2.4vw, 26px); }
.hp-lifecycle-note p { font-family: var(--tw-font-body); font-size: 17px; line-height: 1.45; margin: 0; color: var(--tw-ink-2); max-width: 56ch; text-wrap: pretty; }
.hp-lifecycle-note .hp-lifecycle-aside { font-family: var(--tw-font-mono); font-size: 14px; letter-spacing: 0.06em; line-height: 1.35; margin: 0; color: var(--tw-slate); max-width: 52ch; border-left: 1px solid var(--tw-method); padding-left: 16px; }

/* --- 03-A posture ------------------------------------------------------- */
.hp-posture { --split-a: 1fr; --split-b: 1.35fr; --tw-layout-gap: clamp(22px, 4vw, 56px); align-items: start; margin-top: clamp(36px, 5vw, 64px); border-top: 1px solid var(--tw-ink); padding-top: clamp(26px, 3.5vw, 42px); }
.hp-quote-col { min-width: 0; display: flex; flex-direction: column; }
.hp-quote-head { border: 1px solid var(--tw-ink); border-top: 3px solid var(--tw-method); background: var(--tw-paper); padding: clamp(20px, 2.4vw, 26px); display: flex; flex-direction: column; gap: 14px; }
.hp-quote-head .hp-mark { border-bottom: 0; padding-bottom: 0; }
.hp-posture-title { font-family: var(--tw-font-display); font-weight: 600; font-size: clamp(21px, 2.2vw, 28px); line-height: 1.1; letter-spacing: -0.025em; margin: 0; color: var(--tw-ink); text-wrap: balance; }
.hp-posture-fig { flex: 0 0 auto; margin: 0; border: 1px solid var(--tw-ink); border-top: 0; background: var(--tw-graphite); color: var(--tw-fog); padding: clamp(24px, 3vw, 34px); display: flex; flex-direction: column; gap: 24px; }
.hp-posture-fig blockquote { margin: 0; font-family: var(--tw-font-display); font-weight: 500; font-size: clamp(21px, 2.2vw, 30px); line-height: 1.2; letter-spacing: -0.02em; color: var(--tw-fog); text-wrap: pretty; }
.hp-posture-fig figcaption { color: var(--tw-fog); border-top: 1px solid rgba(232, 235, 232, 0.24); padding-top: 16px; display: flex; align-items: center; gap: 14px; }
.hp-posture-avatar { flex: 0 0 auto; width: 64px; height: 64px; background: var(--tw-cool-2); border: 1px solid rgba(232, 235, 232, 0.26); overflow: hidden; position: relative; display: block; }
.hp-posture-avatar img { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; object-position: center 8%; filter: grayscale(1) contrast(1.05); }
.hp-posture-name span { color: var(--tw-fog-2); }
.hp-posture-body { min-width: 0; display: flex; flex-direction: column; gap: 18px; }
.hp-posture-body p { font-family: var(--tw-font-body); font-size: 17px; line-height: 1.5; margin: 0; color: var(--tw-ink-2); text-wrap: pretty; }

.hp-insight-callout { display: flex; flex-direction: column; gap: 10px; border: 1px solid var(--tw-ink); border-left: 4px solid var(--tw-method); background: var(--tw-paper); padding: 22px; color: var(--tw-method); cursor: pointer; margin-top: 6px; text-decoration: none; }
.hp-insight-callout:hover { background: var(--tw-tint-ink); color: var(--tw-method); }
.hp-callout-head { display: flex; gap: 12px; align-items: baseline; justify-content: space-between; font-family: var(--tw-font-display); font-weight: 600; font-size: clamp(19px, 1.9vw, 23px); line-height: 1.14; letter-spacing: -0.02em; color: var(--tw-method); text-wrap: pretty; }
.hp-callout-arrow { font-family: var(--tw-font-mono); font-size: 16px; line-height: 1.2; flex: 0 0 auto; }
.hp-callout-body { font-family: var(--tw-font-body); font-size: 17px; line-height: 1.45; color: var(--tw-ink-2); text-wrap: pretty; }

/* --- 04 sequence -------------------------------------------------------- */
.hp-seq-lead { margin-top: clamp(30px, 4vw, 50px); border-bottom: 1px solid rgba(232, 235, 232, 0.2); padding-bottom: 12px; }
.hp-seq-note { font-family: var(--tw-font-display); font-weight: 500; font-size: clamp(19px, 1.9vw, 24px); line-height: 1.2; letter-spacing: -0.02em; margin: clamp(20px, 2.6vw, 28px) 0 clamp(4px, 1vw, 10px); color: var(--tw-fog); max-width: 44ch; text-wrap: balance; }
.hp-seq-table { display: flex; flex-direction: column; }
.hp-seq-row { --p1: minmax(0, 1.05fr); --p2: minmax(0, 1.6fr); --p3: minmax(0, 1.6fr); gap: clamp(16px, 3vw, 40px); padding: clamp(22px, 2.6vw, 30px) 0; border-bottom: 1px solid rgba(232, 235, 232, 0.16); }
.hp-seq-row > * { min-width: 0; }
/* The lead cell is its own tw-layout-step, so it re-declares --tw-layout-gap
   locally rather than inheriting a value meant for a different family. */
.hp-seq-lead-col { --marker-w: 26px; --tw-layout-gap: 16px; align-items: baseline; }
.hp-band--graphite .hp-seq-num, .hp-band--graphite .hp-seq-when { color: var(--tw-method-lt); }
.hp-seq-title { font-family: var(--tw-font-display); font-weight: 600; font-size: clamp(20px, 2vw, 26px); line-height: 1.12; letter-spacing: -0.02em; color: var(--tw-fog); margin-top: 8px; }
.hp-seq-col.is-move { border-left: 1px solid var(--tw-method); padding-left: 18px; }
.hp-band--graphite .hp-seq-col.is-move .hp-seq-label { color: var(--tw-method-lt); display: flex; gap: 10px; align-items: baseline; }
.hp-seq-col p { font-family: var(--tw-font-body); font-size: 17px; line-height: 1.45; margin: 8px 0 0; color: var(--tw-fog); text-wrap: pretty; }
.hp-seq-col.is-move p { color: var(--tw-fog-2); }
.hp-seq-arrow { font-size: 16px; line-height: 1; letter-spacing: 0; }

.hp-pace { margin-top: clamp(28px, 4vw, 44px); border-top: 1px solid rgba(232, 235, 232, 0.3); padding-top: clamp(24px, 3vw, 32px); display: flex; flex-direction: column; gap: clamp(16px, 2.4vw, 22px); }
.hp-band--graphite .hp-pace-label { color: var(--tw-method-lt); }
.hp-pace-grid { --tw-layout-gap: clamp(14px, 2vw, 20px); }
.hp-pace-limit { box-sizing: border-box; border: 1px solid rgba(232, 235, 232, 0.28); padding: clamp(20px, 2.4vw, 26px); display: flex; flex-direction: column; gap: 12px; }
.hp-pace-limit.is-method { border-left: 4px solid var(--tw-method); }
.hp-pace-limit .n { font-family: var(--tw-font-mono); font-size: 14px; letter-spacing: 0.1em; text-transform: uppercase; line-height: 1.3; color: var(--tw-method-lt); }
.hp-pace-title { font-family: var(--tw-font-display); font-weight: 600; font-size: clamp(19px, 1.9vw, 24px); line-height: 1.12; letter-spacing: -0.02em; color: var(--tw-fog); text-wrap: balance; }
.hp-pace-note { font-family: var(--tw-font-body); font-size: 17px; line-height: 1.45; color: var(--tw-fog-2); text-wrap: pretty; }
.hp-method-close { font-family: var(--tw-font-body); font-size: 17px; line-height: 1.5; margin: clamp(22px, 3vw, 30px) 0 0; color: var(--tw-fog-2); }
.hp-method-close a { color: var(--tw-method-lt); border-bottom: 1px solid var(--tw-method); }
.hp-method-close a:hover { color: var(--tw-fog); border-bottom-color: var(--tw-fog); }

/* --- 05 range ----------------------------------------------------------- */
.hp-range-h2 { font-family: var(--tw-font-display); font-weight: 600; font-size: clamp(30px, 3.8vw, 52px); line-height: 1.03; letter-spacing: -0.025em; margin: clamp(26px, 3.5vw, 44px) 0 0; color: var(--tw-ink); text-wrap: balance; }
.hp-path-grid { --tw-layout-gap: clamp(16px, 2vw, 24px); margin-top: clamp(26px, 3.5vw, 42px); }
.hp-path-card { border: 1px solid var(--tw-ink); border-top: 3px solid var(--tw-method); background: var(--tw-paper); padding: clamp(24px, 3vw, 36px); display: flex; flex-direction: column; gap: 22px; }
.hp-path-label { display: block; }
.hp-path-lead { font-family: var(--tw-font-body); font-size: 17px; line-height: 1.5; margin: 14px 0 0; color: var(--tw-ink-2); text-wrap: pretty; }
.hp-path-sub { border-bottom: 1px solid var(--tw-rule); padding-bottom: 10px; }
.hp-path-list { display: flex; flex-direction: column; gap: 14px; margin-top: 14px; }
.hp-path-list p span { color: var(--tw-ink); }
.hp-range-actions { display: flex; justify-content: center; margin-top: clamp(26px, 3.5vw, 40px); }

/* --- 06 start ----------------------------------------------------------- */
.hp-start-grid { --split-a: 1.3fr; --split-b: 1fr; --tw-layout-gap: clamp(24px, 4vw, 64px); align-items: start; padding-top: clamp(28px, 4vw, 46px); }
.hp-start-main { min-width: 0; display: flex; flex-direction: column; gap: clamp(20px, 3vw, 28px); }
.hp-start-h2 { font-family: var(--tw-font-display); font-weight: 600; font-size: clamp(30px, 3.8vw, 52px); line-height: 1.03; letter-spacing: -0.025em; margin: 0; color: var(--tw-fog); text-wrap: balance; }
.hp-start-lede { font-family: var(--tw-font-body); font-size: clamp(17px, 1.6vw, 19px); line-height: 1.5; margin: 0; color: var(--tw-fog-2); max-width: 62ch; text-wrap: pretty; }
.hp-start-actions { display: flex; flex-wrap: wrap; gap: 16px; align-items: center; }
.hp-band--ink .hp-start-ghost { background: transparent; color: var(--tw-fog); border: 1px solid rgba(232, 235, 232, 0.45); padding: 15px 26px; align-self: flex-start; }
.hp-band--ink .hp-start-ghost:hover { background: rgba(232, 235, 232, 0.08); color: var(--tw-fog); filter: none; }
.hp-start-note { margin: 0; }
.hp-guarantee { min-width: 0; border: 1px solid rgba(232, 235, 232, 0.28); background: var(--tw-graphite); padding: clamp(24px, 3vw, 32px); display: flex; flex-direction: column; gap: clamp(24px, 3vw, 32px); }
.hp-band--ink .hp-guarantee-label { color: var(--tw-method-lt); border-bottom: 1px solid rgba(232, 235, 232, 0.24); padding-bottom: 14px; }
.hp-guarantee p { font-family: var(--tw-font-display); font-weight: 500; font-size: clamp(20px, 2vw, 26px); line-height: 1.2; letter-spacing: -0.02em; margin: 0; color: var(--tw-fog); text-wrap: pretty; }

/* --- trailing rails ----------------------------------------------------- */
.hp-rail-head { display: flex; flex-wrap: wrap; gap: 12px; justify-content: space-between; align-items: baseline; border-bottom: 1px solid var(--tw-rule); padding-bottom: 12px; }
.hp-rail-head a { color: var(--tw-method); border-bottom: 0; }
.hp-rail-head a:hover { color: var(--tw-ink); }
.hp-sector-grid { --tw-layout-gap: clamp(14px, 2vw, 22px); margin-top: clamp(22px, 3vw, 32px); }
.hp-sector-tile { border: 1px solid var(--tw-ink); background: var(--tw-paper); padding: 22px; color: var(--tw-ink); display: flex; flex-direction: column; gap: 14px; min-height: 170px; justify-content: space-between; text-decoration: none; }
.hp-sector-tile:hover { background: var(--tw-tint-ink); color: var(--tw-ink); }
.hp-tile-title { font-family: var(--tw-font-display); font-weight: 600; font-size: 20px; line-height: 1.15; letter-spacing: -0.02em; margin: 0; text-wrap: pretty; }
.hp-sector-tile p { margin: 0; }
.hp-insights-band .tw-carousel { margin-top: clamp(22px, 3vw, 32px); }