/* =====================================================================
   Strategy section (Focus / Entry / Diligence).
   Shared page-top treatment: heading left, lead right, panoramic banner
   below, mirroring the Overview page.
   ===================================================================== */

.st-top .page-head { align-items: flex-start; }
.st-top .page-head__lead { max-width: 52ch; }
.st-top__banner img { object-position: center; }


/* Section heading (shared) */
.st-title {
  margin: 0;
  font-family: var(--font-display);
  font-weight: 400;
  font-size: clamp(2.25rem, 1.3rem + 3vw, 3.25rem);
  line-height: 1.1;
  letter-spacing: -0.006em;
  color: var(--color-ink);
}

/* ---------------------------------------------------------------------
   The full pre-IPO range: DARK band. Title, then text (left third) +
   chart (right two thirds).
   --------------------------------------------------------------------- */
.st-range { background: var(--color-footer); color: #fff; }
.st-range .st-title { color: #fff; }

.st-range__grid {
  margin-top: clamp(2.75rem, 6vw, 5rem);
  display: grid;
  grid-template-columns: minmax(0, 1fr) minmax(0, 2fr);
  gap: clamp(2.75rem, 7vw, 7rem);
  align-items: start;
}
.st-range__text {
  margin: 0;
  max-width: 42ch;
  font-size: var(--fs-lg);
  font-weight: 300;
  line-height: 1.62;
  color: #ffffff;
}
.st-range__cap {
  margin: 0 0 clamp(1.25rem, 2.5vw, 1.75rem);
  font-family: var(--font-sans);
  font-size: var(--fs-sm);
  font-weight: 400;
  color: #ffffff;
}
.st-range__cap strong { font-weight: 600; color: #fff; }

.st-chart { display: block; width: 100%; height: auto; }
.st-chart__band { fill: rgba(255, 255, 255, 0.16); }
.st-chart__axis { stroke: rgba(255, 255, 255, 0.28); stroke-width: 1; }
.st-chart__curve { fill: none; stroke: #fff; stroke-width: 2.5; stroke-linecap: round; }
.st-chart__band-label { font-family: var(--font-sans); font-size: 13px; font-weight: 600; fill: #fff; }
.st-chart__stage { font-family: var(--font-sans); font-size: 13px; font-weight: 500; fill: rgba(255, 255, 255, 0.72); }
.st-chart__ylabel { font-family: var(--font-sans); font-size: 12px; font-weight: 600; fill: rgba(255, 255, 255, 0.72); letter-spacing: 0.04em; }

.st-range__note {
  margin: clamp(2.75rem, 5vw, 4rem) 0 0;
  font-size: var(--fs-xs);
  font-weight: 300;
  line-height: 1.5;
  color: #ffffff;
}
.st-range__note strong { font-weight: 600; color: #fff; }

@media (max-width: 860px) {
  .st-range__grid { grid-template-columns: 1fr; gap: clamp(2rem, 7vw, 3rem); }
}

/* ---------------------------------------------------------------------
   Sectors: eyebrow + title, then a spacious 3-up grid of landscape cards
   (image on top, title + description below).
   --------------------------------------------------------------------- */
.st-sectors__grid {
  margin-top: clamp(3rem, 6vw, 5rem);
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: clamp(4.5rem, 8vw, 7rem) clamp(1.75rem, 3.5vw, 3rem);
}
.st-sector__img {
  display: block;
  width: 100%;
  aspect-ratio: 16 / 10;
  object-fit: cover;
  background: var(--color-surface, #f3f3ef);
}
.st-sector__title {
  margin: clamp(1.1rem, 2vw, 1.5rem) 0 0;
  font-family: var(--font-display);
  font-weight: 400;
  font-size: clamp(1.2rem, 1rem + 0.6vw, 1.45rem);
  line-height: 1.2;
  letter-spacing: -0.01em;
  color: var(--color-ink);
}
.st-sector__desc {
  margin: 0.9rem 0 0;
  font-size: var(--fs-sm);
  font-weight: 300;
  line-height: 1.5;
  color: var(--color-text-secondary);
}

@media (max-width: 900px) { .st-sectors__grid { grid-template-columns: repeat(2, 1fr); } }
@media (max-width: 560px) { .st-sectors__grid { grid-template-columns: 1fr; } }

/* ---------------------------------------------------------------------
   How we deploy: DARK band, house "figures" layout (label above a large
   Fraunces value on a thin rule).
   --------------------------------------------------------------------- */
.st-figures { background: var(--color-footer); color: #fff; }
.st-figures .st-title { color: #fff; }
.st-figures__lead {
  margin: clamp(1.5rem, 3vw, 2.25rem) 0 0;
  max-width: 54ch;
  font-size: var(--fs-lg);
  font-weight: 300;
  line-height: 1.6;
  color: #ffffff;
}
.st-figures__grid {
  margin: clamp(3rem, 6vw, 5rem) 0 0;
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: clamp(2.5rem, 6vw, 6rem);
  align-items: start;
}
.st-fig__label {
  margin: 0 0 clamp(1rem, 2vw, 1.6rem);
  font-family: var(--font-sans);
  font-size: var(--fs-base);
  font-weight: 300;
  line-height: 1.3;
  color: #ffffff;
}
.st-fig__value {
  margin: 0;
  padding-bottom: clamp(1rem, 2vw, 1.5rem);
  border-bottom: 1px solid rgba(255, 255, 255, 0.25);
  font-family: var(--font-display);
  font-weight: 300;
  font-size: clamp(2.75rem, 1.5rem + 4.5vw, 5rem);
  line-height: 0.9;
  letter-spacing: -0.02em;
  color: #fff;
}
.st-fig__sub {
  margin: clamp(0.9rem, 1.8vw, 1.25rem) 0 0;
  font-size: var(--fs-sm);
  font-weight: 300;
  line-height: 1.5;
  color: #ffffff;
}
.st-figures__note {
  margin: clamp(2.75rem, 5vw, 4rem) 0 0;
  font-size: var(--fs-xs);
  font-weight: 300;
  line-height: 1.5;
  color: #ffffff;
}
.st-figures__note strong { font-weight: 600; color: #fff; }

@media (max-width: 640px) {
  .st-figures__grid { grid-template-columns: 1fr; gap: clamp(2.5rem, 8vw, 3.5rem); }
}

/* ---------------------------------------------------------------------
   Entry page: three "doors" read top to bottom as a progression along a
   company's life (earliest capital -> control). One door per band, the
   bands alternating dark and light: the change of background is what
   separates them, so this page carries no rules at all.
   Left: large index + "when" label. Right: name, paragraph, key facts.
   --------------------------------------------------------------------- */

/* Title to first door: the DA's 96px */
.st-entry .st-title + .st-entry__row { margin-top: clamp(3.5rem, 7vw, 6rem); }

.st-entry__row {
  display: grid;
  grid-template-columns: minmax(0, 1fr) minmax(0, 2.1fr);
  gap: clamp(2rem, 6vw, 6rem);
  align-items: start;
}

/* Dark bands: pure white type throughout, per the DA */
.st-entry--dark { background: var(--color-footer); color: #fff; }
.st-entry--dark .st-title,
.st-entry--dark .st-entry__index,
.st-entry--dark .st-entry__when,
.st-entry--dark .st-entry__name,
.st-entry--dark .st-entry__desc,
.st-entry--dark .st-entry__key-label,
.st-entry--dark .st-entry__key-val { color: #fff; }

.st-entry__index {
  margin: 0;
  font-family: var(--font-display);
  font-weight: 300;
  font-size: clamp(3rem, 2rem + 4vw, 5.5rem);
  line-height: 0.9;
  letter-spacing: -0.02em;
  color: var(--color-ink);
}
.st-entry__when {
  margin: clamp(1rem, 2vw, 1.5rem) 0 0;
  font-family: var(--font-sans);
  font-size: var(--fs-sm);
  font-weight: 400;
  letter-spacing: 0.02em;
  color: var(--color-text-secondary);
}

.st-entry__name {
  margin: 0;
  font-family: var(--font-display);
  font-weight: 400;
  font-size: clamp(1.5rem, 1.1rem + 1.4vw, 2rem);
  line-height: 1.15;
  letter-spacing: -0.01em;
  color: var(--color-ink);
}
.st-entry__desc {
  margin: clamp(1rem, 2vw, 1.5rem) 0 0;
  max-width: 58ch;
  font-size: var(--fs-lg);
  font-weight: 300;
  line-height: 1.62;
  color: var(--color-text-secondary);
}
/* Key facts: alignment carries the list, no rules */
.st-entry__keys {
  margin: clamp(2.25rem, 4vw, 3rem) 0 0;
  padding: 0;
  list-style: none;
  display: grid;
  gap: clamp(0.85rem, 1.6vw, 1.15rem);
}
.st-entry__keys li {
  display: grid;
  grid-template-columns: clamp(7rem, 13vw, 9.5rem) 1fr;
  gap: clamp(1rem, 2.5vw, 2rem);
  font-size: var(--fs-sm);
  line-height: 1.45;
}
.st-entry__key-label {
  font-weight: 500;
  letter-spacing: 0.02em;
  color: var(--color-text-secondary);
}
.st-entry__key-val {
  font-weight: 300;
  color: var(--color-ink);
}

@media (max-width: 760px) {
  .st-entry__row { grid-template-columns: 1fr; gap: clamp(1.5rem, 5vw, 2.25rem); }
  .st-entry__index-wrap { display: flex; align-items: baseline; gap: 1.25rem; }
  .st-entry__when { margin-top: 0; }
}

/* ---------------------------------------------------------------------
   Selection criteria: FAQ-style accordion (ported from about.css so the
   Strategy pages stay self-contained). Hairline rows, chevron rotates on
   open, other rows dim.
   --------------------------------------------------------------------- */
.st-criteria .acc { margin-top: clamp(3rem, 6vw, 5rem); border-top: 1px solid var(--color-border-strong); }
.acc__item { border-bottom: 1px solid var(--color-border-strong); }
.acc__head {
  width: 100%;
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 1.5rem;
  margin: 0;
  padding: clamp(1.75rem, 3.5vw, 2.75rem) 0;
  background: none;
  border: 0;
  cursor: pointer;
  text-align: left;
  font-family: var(--font-display);
  font-weight: 300;
  font-size: clamp(1.35rem, 0.9rem + 1.6vw, 2rem);
  line-height: 1.15;
  letter-spacing: -0.01em;
  color: var(--color-ink);
  transition: color var(--transition);
}
.acc__head:hover,
.acc__head:focus-visible { color: var(--color-ink); }
.acc.has-open .acc__item:not(.is-open) .acc__head { color: var(--color-muted); }
.acc.has-open .acc__item:not(.is-open) .acc__head:hover,
.acc.has-open .acc__item:not(.is-open) .acc__head:focus-visible { color: var(--color-ink); }

.acc__head span { transition: transform var(--transition); }
.acc__head:hover span,
.acc__head:focus-visible span { transform: translateX(8px); }
.acc__item:not(.is-open) .acc__head:hover .acc__icon,
.acc__item:not(.is-open) .acc__head:focus-visible .acc__icon { transform: translateY(3px); }

.acc__icon {
  flex: 0 0 auto;
  width: 24px;
  height: 24px;
  transition: transform var(--transition), color var(--transition);
}
.acc__item.is-open .acc__icon { transform: rotate(180deg); }

.acc__panel {
  overflow: hidden;
  max-height: 0;
  transition: max-height 420ms cubic-bezier(0.22, 1, 0.36, 1);
}
.acc__panel-inner { padding: 0 0 clamp(1.6rem, 3vw, 2.4rem); max-width: 62ch; }
.acc__desc {
  margin: 0;
  font-size: var(--fs-base);
  font-weight: 300;
  line-height: 1.7;
  color: var(--color-text-secondary);
}
@media (prefers-reduced-motion: reduce) {
  .acc__panel { transition: none; }
  .acc__icon { transition: color var(--transition); }
  .acc__head:hover span,
  .acc__head:focus-visible span,
  .acc__item:not(.is-open) .acc__head:hover .acc__icon { transform: none; }
}

/* Dark variant of the criteria accordion */
.st-criteria--dark { background: var(--color-footer); color: #fff; }
.st-criteria--dark .st-title { color: #fff; }
.st-criteria--dark .acc { border-top-color: #ffffff; }
.st-criteria--dark .acc__item { border-bottom-color: #ffffff; }
.st-criteria--dark .acc__head { color: #fff; }
.st-criteria--dark .acc__head:hover,
.st-criteria--dark .acc__head:focus-visible { color: #fff; }
.st-criteria--dark .acc.has-open .acc__item:not(.is-open) .acc__head { color: #ffffff; }
.st-criteria--dark .acc.has-open .acc__item:not(.is-open) .acc__head:hover,
.st-criteria--dark .acc.has-open .acc__item:not(.is-open) .acc__head:focus-visible { color: #fff; }
.st-criteria--dark .acc__item.is-open .acc__icon { color: #fff; }
.st-criteria--dark .acc__desc { color: #ffffff; }

/* ---------------------------------------------------------------------
   Selection process: a connected four-step timeline. One continuous rule,
   a node at each milestone, a large Fraunces numeral below. Restrained,
   No wedge, no boxes, whitespace does the work.
   --------------------------------------------------------------------- */
.st-flow__lead {
  margin: clamp(1.5rem, 3vw, 2.25rem) 0 0;
  max-width: 58ch;
  font-size: var(--fs-lg);
  font-weight: 300;
  line-height: 1.6;
  color: var(--color-text-secondary);
}
.st-flow__steps {
  margin: clamp(3.25rem, 7vw, 5.5rem) 0 0;
  padding: 0;
  list-style: none;
  display: grid;
  grid-template-columns: repeat(4, minmax(0, 1fr));
  gap: clamp(1.5rem, 3vw, 3rem);
  border-top: 1px solid var(--color-ink);
}
.st-flow__step { position: relative; padding-top: clamp(1.75rem, 3.5vw, 2.75rem); }

/* node sits on the shared rule at each column's start */
.st-flow__node {
  position: absolute;
  top: 0;
  left: 0;
  width: clamp(9px, 1vw, 11px);
  height: clamp(9px, 1vw, 11px);
  border-radius: 50%;
  background: var(--color-ink);
  transform: translateY(-50%);
}
.st-flow__step--end .st-flow__node {
  background: #fff;
  border: 1.5px solid var(--color-ink);
}

.st-flow__num {
  margin: 0 0 clamp(0.9rem, 1.8vw, 1.35rem);
  font-family: var(--font-display);
  font-weight: 300;
  font-size: clamp(2.1rem, 1.2rem + 2.6vw, 3.5rem);
  line-height: 1;
  letter-spacing: -0.02em;
  color: var(--color-ink);
}
.st-flow__title {
  margin: 0;
  font-family: var(--font-display);
  font-weight: 400;
  font-size: clamp(1.05rem, 0.9rem + 0.5vw, 1.3rem);
  line-height: 1.2;
  letter-spacing: -0.01em;
  color: var(--color-ink);
}
.st-flow__desc {
  margin: clamp(0.65rem, 1.4vw, 0.95rem) 0 0;
  font-size: var(--fs-sm);
  font-weight: 300;
  line-height: 1.5;
  color: var(--color-text-secondary);
}

@media (max-width: 780px) {
  .st-flow__steps { grid-template-columns: repeat(2, 1fr); gap: clamp(2rem, 5vw, 2.75rem) clamp(1.5rem, 4vw, 2.5rem); }
}
@media (max-width: 440px) {
  .st-flow__steps { grid-template-columns: 1fr; }
}


/* ---------------------------------------------------------------------
   FAQ: kicker + title, then the shared accordion, closing on a fine-print
   note. Moved here from Our Approach.
   --------------------------------------------------------------------- */
.st-faq__note {
  margin: clamp(1.75rem, 3.5vw, 2.5rem) 0 0;
  font-size: var(--fs-xs);
  font-weight: 300;
  line-height: 1.5;
  color: var(--color-muted);
}