/* UI kit · marketing — local layout on top of the root tokens.
   Only layout, spacing, and component-specific rules live here.
   Colour and type come from ../../colors_and_type.css. */

/* ============================================================
   Type scale · canonical brand + marketing-site bespoke extension
   ============================================================
   The Solas brand defines a deliberately small canonical type
   system in tokens.css:

     --size-heading   40px   H1 (page title)
     --size-subhead   24px   H2 / H3
     --size-body      16px   body
     --size-caption   13px   small-cap labels

   The marketing site is a "bespoke-led" surface (per
   design-state.md hybrid system-driven / bespoke-led discipline).
   It needs an editorial display register the three-size system
   cannot carry — hero scale, section openers, standfirst, etc.

   The tokens below encode that bespoke extension as named
   custom-properties so the magic numbers disappear from selectors
   and so JSX inline `style={{fontSize: X}}` overrides become
   migratable to a token (Wave 5 — CMO).

   These tokens are deliberately *local* to kit.css. When the
   extension stabilises they should be promoted into tokens.css
   proper with a comment marking them as the marketing-site scale,
   distinct from the canonical brand scale. Until then, kit.css
   owns them. (Open item for CTO.) */

:root {
  /* Display + hero tier (marketing site only) — RATIFIED marketing-site scale.
     This deliberately extends the canonical three-size brand system (40/24/16
     in tokens.css) for the editorial display register a marketing homepage
     needs. Per Head of Design, 2026-06: the five near-identical hero sizes
     (96/72/60/56/52) were collapsed to THREE distinct values (72/60/52) to
     remove redundancy that was hierarchy in name only. This block — not a
     per-component inline style={{fontSize}} override — is the source of truth
     for hero type. Promote into tokens.css (clearly marked as the marketing
     scale, distinct from the brand scale) once it stabilises. */
  --type-display:        72px;  /* HeroB full-bleed (was 96) */
  --type-h1-hero-xl:     72px;  /* large hero */
  --type-h1-hero:        60px;  /* page-hero / HeroC title */
  --type-h1-hero-sm:     60px;  /* hero-spotlight title (was 56 → unified) */
  --type-h1-cta:         52px;  /* WaitlistCTA title */

  /* Canonical page-title tier (matches brand --size-heading at 40px) */
  --type-h1-page:        40px;  /* canonical page H1 */

  /* Section + subsection tier */
  --type-h2-section:     32px;  /* section openers, page-section titles */
  --type-h2-panel:       30px;  /* brief panel title */
  --type-h3-overlay:     28px;  /* handoff overlay title */
  --type-h3-stat:        26px;  /* large numeric stat */
  --type-h3:             24px;  /* canonical brand --size-subhead */
  --type-h4:             22px;  /* pillar / contact / legal H2 */

  /* Body, standfirst, captions */
  --type-body-xl:        20px;  /* full-bleed standfirst */
  --type-body-lg:        19px;  /* canonical standfirst across heroes */
  --type-body-md:        18px;  /* spotlight standfirst, editorial name */
  --type-body:           16px;  /* canonical body (matches --size-body) */
  --type-body-sm:        15px;  /* secondary body / form field */
  --type-body-xs:        14px;  /* nav, button, secondary link */
  --type-caption:        13px;  /* canonical brand --size-caption */
  --type-caption-sm:     12px;  /* metadata, dates */
  --type-eyebrow:        11px;  /* small-caps eyebrow / label */
  --type-eyebrow-xs:     10px;  /* tightest small-caps eyebrow */

  /* Mobile overrides for the largest tiers */
  --type-display-mobile: 56px;
  --type-h1-hero-mobile: 48px;
  --type-h1-cta-mobile:  36px;
  --type-h1-spot-mobile: 40px;
}

/* Note for Wave 5 (CMO copy execution in JSX):
   Any inline `style={{fontSize: X}}` in JSX that matches one of the
   pixel values above should be removed in favour of the named CSS
   class controlling that selector. If a one-off size is genuinely
   needed for a single piece of copy, add a token here rather than
   inlining. */

/* ---- Page shell ---- */
body { margin: 0; }

/* ---- Selection (overrides tokens.css base) ----
   tokens.css sets ::selection to --accent (Ink-Blue) on paper, which
   paints ~10% of the viewport in accent the moment a paragraph is
   selected — past the brand's 10% accent ceiling on routine
   interaction. Selection stays in the warm-neutral family instead. */
::selection {
  background: var(--bg-elevated);
  color: var(--fg);
}

.page {
  min-height: 100vh;
  display: flex;
  flex-direction: column;
}

/* ---- Navigation ---- */
.solas-nav {
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 24px 64px;
  border-bottom: 1px solid var(--rule);
}
.solas-nav__links {
  display: flex;
  align-items: center;
  gap: 28px;
}
.solas-nav__a {
  color: var(--fg);
  text-decoration: none;
  font-size: 14px;
  letter-spacing: 0;
  padding-bottom: 2px;
  border-bottom: 1px solid transparent;
  transition: color 200ms var(--ease), border-color 200ms var(--ease);
}
.solas-nav__a:hover { color: var(--accent); }
.solas-nav__a.is-active {
  color: var(--accent);
  border-bottom-color: var(--accent);
}
.solas-nav__sep {
  width: 1px;
  height: 18px;
  background: var(--rule);
  display: inline-block;
}
.solas-nav__cta {
  background: var(--accent);
  color: var(--solas-paper) !important;
  text-decoration: none;
  padding: 10px 18px;
  font-weight: 600;
  font-size: 13px;
  letter-spacing: 0.01em;
}
.solas-nav__cta:hover { background: #173352; color: var(--solas-paper) !important; }

/* ---- Wordmark sizing in this kit (uses image background from root CSS) ---- */
/* .solas-wordmark, .solas-wordmark--sm, .solas-wordmark--lg, .solas-wordmark--hero
   are defined in /colors_and_type.css. Don't redeclare here. */

/* ---- Hero ---- */
.solas-hero {
  padding: 96px 64px 80px;
  display: flex;
  flex-direction: column;
  gap: 24px;
  max-width: 1280px;
}
.solas-hero__eyebrow {
  font-size: 11px;
  font-weight: 600;
  letter-spacing: 0.12em;
  text-transform: uppercase;
  color: var(--accent);
}
.solas-hero__title {
  font-size: var(--type-h1-hero-xl);
  font-weight: 600;
  letter-spacing: 0.005em;
  line-height: 1.05;
  margin: 0;
  max-width: 16ch;
  text-wrap: balance;
}
.solas-hero__standfirst {
  font-size: var(--type-body-lg);
  line-height: 1.55;
  max-width: 56ch;
  margin: 0;
  color: var(--fg);
}
.solas-hero__actions {
  display: flex;
  align-items: center;
  gap: 24px;
  margin-top: 8px;
}
.solas-hero__secondary {
  font-size: 14px;
  color: var(--fg);
  text-decoration: none;
  border-bottom: 1px solid var(--fg);
  padding-bottom: 2px;
}
.solas-hero__secondary:hover { color: var(--accent); border-color: var(--accent); }
.solas-hero__meta {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: 0;
  margin: 64px 0 0;
  border-top: 1px solid var(--rule);
  padding-top: 20px;
  max-width: 920px;
}
.solas-hero__meta > div { display: flex; flex-direction: column; gap: 4px; }
/* Hero meta labels — functional metadata, lifted from --fg-muted
   to --fg. At 11px / 0.10em tracking the muted token's perceived
   contrast is borderline; functional labels deserve full ink. */
.solas-hero__meta dt {
  font-size: 11px;
  font-weight: 600;
  letter-spacing: 0.10em;
  text-transform: uppercase;
  color: var(--fg);
}
.solas-hero__meta dd {
  margin: 0;
  font-size: 15px;
  font-weight: 600;
  color: var(--fg);
}

/* ---- Buttons (component-local) ---- */
.btn {
  font-family: inherit;
  font-weight: 600;
  font-size: 14px;
  letter-spacing: 0.01em;
  padding: 13px 26px;
  border: 0;
  cursor: pointer;
  line-height: 1;
  text-decoration: none;
  display: inline-block;
  transition: background 200ms var(--ease);
}
.btn--primary { background: var(--accent); color: var(--solas-paper); }
.btn--primary:hover { background: #173352; color: var(--solas-paper); }
.btn--primary:active { background: #122948; }

/* ---- Pillars ---- */
.solas-pillars {
  padding: 96px 64px;
  border-top: 1px solid var(--rule);
  max-width: 1280px;
}
.solas-pillars__head {
  display: flex;
  flex-direction: column;
  gap: 14px;
  margin-bottom: 56px;
  max-width: 50ch;
}
.solas-pillars__head h2 {
  font-size: var(--type-h1-page);
  font-weight: 600;
  letter-spacing: 0.005em;
  line-height: 1.1;
  margin: 0;
}
.solas-pillars__list {
  list-style: none;
  margin: 0;
  padding: 0;
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 0;
  border-top: 1px solid var(--fg);
}
.solas-pillars--four .solas-pillars__list {
  grid-template-columns: repeat(4, 1fr);
}
@media (max-width: 1080px) {
  .solas-pillars--four .solas-pillars__list {
    grid-template-columns: repeat(2, 1fr);
  }
  .solas-pillars--four .solas-pillar:nth-child(2n) { border-right: 0; }
  .solas-pillars--four .solas-pillar { border-bottom: 1px solid var(--rule); }
}
.solas-pillar {
  padding: 28px 28px 32px 0;
  display: flex;
  flex-direction: column;
  gap: 16px;
  border-right: 1px solid var(--rule);
}
.solas-pillar:last-child { border-right: 0; padding-right: 0; }
.solas-pillar:not(:first-child) { padding-left: 28px; }
.solas-pillar__n {
  font-size: 11px;
  font-weight: 600;
  letter-spacing: 0.12em;
  text-transform: uppercase;
  color: var(--accent);
}
.solas-pillar__h {
  font-size: var(--type-h4);
  font-weight: 600;
  letter-spacing: 0.005em;
  line-height: 1.25;
  margin: 0;
  max-width: 22ch;
  text-wrap: balance;
}
.solas-pillar__p {
  font-size: 15px;
  line-height: 1.55;
  margin: 0;
  color: var(--fg);
  max-width: 32ch;
}

/* ---- Editorial block ---- */
.solas-editorial {
  background: #EFE9DD;
  padding: 96px 64px;
}
.solas-editorial__inner {
  max-width: 720px;
}
.solas-editorial__rule {
  width: 80px;
  border-top: 2px solid var(--accent);
  margin-bottom: 20px;
}
.solas-editorial__label {
  font-size: 11px;
  font-weight: 600;
  letter-spacing: 0.10em;
  text-transform: uppercase;
  color: var(--accent);
  margin-bottom: 18px;
}
.solas-editorial__q {
  font-style: italic;
  font-size: var(--type-h2-section);
  line-height: 1.3;
  margin: 0 0 24px;
  font-weight: 400;
  text-wrap: pretty;
}
.solas-editorial__sig {
  margin: 0;
  display: flex;
  flex-direction: column;
  gap: 2px;
}
.solas-editorial__name { font-style: italic; font-size: var(--type-body-md); }
.solas-editorial__role {
  font-size: 11px;
  letter-spacing: 0.10em;
  text-transform: uppercase;
  color: var(--fg-muted);
  font-weight: 600;
}

/* ---- Broker card section ---- */
.solas-broker {
  padding: 96px 64px;
  border-top: 1px solid var(--rule);
}
.solas-broker__head {
  display: flex;
  flex-direction: column;
  gap: 12px;
  margin-bottom: 48px;
  max-width: 50ch;
}
.solas-broker__head h2 {
  font-size: var(--type-h2-section);
  font-weight: 600;
  letter-spacing: 0.005em;
  line-height: 1.15;
  margin: 0;
}

/* The card itself — A4 portrait ratio (210 × 297) */
.solas-broker__card {
  width: 480px;
  aspect-ratio: 210 / 297;
  background: var(--solas-paper);
  border: 1px solid var(--rule);
  padding: 44px 48px;
  display: flex;
  flex-direction: column;
  gap: 24px;
  position: relative;
}
.solas-broker__top {
  display: flex;
  justify-content: space-between;
  align-items: baseline;
  font-size: 10px;
  letter-spacing: 0.12em;
  text-transform: uppercase;
  color: var(--fg-muted);
  font-weight: 600;
}
.solas-broker__audience { color: var(--accent); }
.solas-broker__wordmark {
  background-image: url('../../assets/wordmark-ink.png');
  background-repeat: no-repeat;
  background-size: contain;
  background-position: left center;
  height: 72px;
  width: calc(72px * 513 / 152);
  margin: 4px 0 8px;
}
.solas-broker__lede {
  font-size: 13.5px;
  line-height: 1.55;
  margin: 0;
  color: var(--fg);
}
.solas-broker__pillars {
  list-style: none;
  margin: 0;
  padding: 16px 0 0;
  border-top: 1px solid var(--rule);
  display: flex;
  flex-direction: column;
  gap: 12px;
}
.solas-broker__pillars li {
  display: flex;
  flex-direction: column;
  gap: 2px;
}
.solas-broker__pillars strong {
  font-size: 13px;
  font-weight: 600;
  letter-spacing: 0.01em;
}
.solas-broker__pillars span {
  font-size: 12.5px;
  line-height: 1.5;
  color: var(--fg-muted);
}
.solas-broker__close {
  margin-top: auto;
  font-style: italic;
  font-size: var(--type-body);
  line-height: 1.4;
  border-top: 2px solid var(--accent);
  padding-top: 14px;
  max-width: 30ch;
}
.solas-broker__foot {
  display: flex;
  flex-direction: column;
  gap: 2px;
  font-size: 9.5px;
  letter-spacing: 0.06em;
  text-transform: uppercase;
  color: var(--fg-muted);
}

/* ---- Footer ---- */
.solas-footer {
  margin-top: auto;
  border-top: 1px solid var(--rule);
  background: var(--solas-paper);
  display: flex;
  flex-direction: column;
}
.solas-footer__main {
  display: grid;
  grid-template-columns: 1.25fr 1fr 1fr 1fr 1.1fr;
  gap: 48px;
  padding: 64px 64px 48px;
  align-items: start;
}
.solas-footer__brand { display: flex; flex-direction: column; gap: 18px; }
.solas-footer__tag {
  font-size: 13px;
  line-height: 1.6;
  color: var(--fg-muted);
  margin: 0;
  max-width: 32ch;
}
.solas-footer__cols {
  display: contents;
}
.solas-footer__col {
  display: flex;
  flex-direction: column;
  gap: 12px;
}
.solas-footer__h {
  font-size: 11px;
  font-weight: 600;
  letter-spacing: 0.12em;
  text-transform: uppercase;
  color: var(--accent);
  margin-bottom: 6px;
}
.solas-footer__col a {
  color: var(--fg);
  text-decoration: none;
  font-size: 14px;
  line-height: 1.5;
}
.solas-footer__col a:hover { color: var(--accent); }

.solas-footer__col--keep {
  gap: 20px;
}
.solas-footer__social {
  display: flex;
  gap: 18px;
  align-items: center;
}
.solas-footer__social a {
  display: inline-grid;
  place-items: center;
  width: 32px;
  height: 32px;
  color: var(--fg);
  border: 1px solid var(--rule);
  transition: color 200ms var(--ease), border-color 200ms var(--ease);
}
.solas-footer__social a:hover {
  color: var(--accent);
  border-color: var(--accent);
}
.solas-footer__svg { display: block; }

.solas-footer__sub { display: flex; flex-direction: column; gap: 8px; }
.solas-footer__sublbl {
  font-size: 11px;
  font-weight: 600;
  letter-spacing: 0.10em;
  text-transform: uppercase;
  color: var(--fg);
}
/* Footer subscribe row — same WCAG 1.4.11 fix as .quote-field:
   --rule-strong on --solas-paper fails non-text contrast at ~1.7:1,
   so the resting border uses --fg-muted (~5.4:1). */
.solas-footer__subrow {
  display: grid;
  grid-template-columns: 1fr 38px;
  border: 1px solid var(--fg-muted);
}
.solas-footer__subrow input {
  font-family: inherit;
  font-size: 14px;
  background: transparent;
  color: var(--fg);
  border: 0;
  padding: 10px 12px;
  outline: none;
}
.solas-footer__subrow input::placeholder { color: var(--fg-subtle); }
.solas-footer__subrow button {
  appearance: none;
  font-family: inherit;
  background: var(--accent);
  color: var(--solas-paper);
  border: 0;
  font-size: 16px;
  font-weight: 600;
  cursor: pointer;
  transition: background 200ms var(--ease);
}
.solas-footer__subrow button:hover { background: #173352; }
.solas-footer__subnote {
  font-size: 11.5px;
  line-height: 1.5;
  color: var(--fg-muted);
  margin: 2px 0 0;
}

/* Footer legal — functional links/text (copyright, ICO number,
   policy links), not editorial atmosphere, so lifted to --fg for
   reliable contrast at 11px. */
.solas-footer__legal {
  display: flex;
  flex-wrap: wrap;
  gap: 28px;
  padding: 22px 64px 32px;
  border-top: 1px solid var(--rule);
  font-size: 11px;
  letter-spacing: 0.04em;
  color: var(--fg);
}
.solas-footer__legal a {
  color: var(--fg);
  text-decoration: underline;
  text-decoration-thickness: 1px;
  text-underline-offset: 0.18em;
}
.solas-footer__legal a:hover { color: var(--accent); }

/* ============================================================
   Sub-page chrome
   ============================================================ */

.page-hero {
  padding: 88px 64px 64px;
  max-width: 1280px;
  display: flex;
  flex-direction: column;
  gap: 22px;
}
.page-hero__eyebrow {
  font-size: 11px;
  font-weight: 600;
  letter-spacing: 0.12em;
  text-transform: uppercase;
  color: var(--accent);
}
.page-hero__title {
  font-size: var(--type-h1-hero);
  font-weight: 600;
  letter-spacing: 0.005em;
  line-height: 1.05;
  margin: 0;
  max-width: 22ch;
  text-wrap: balance;
}
.page-hero__standfirst {
  font-size: var(--type-body-lg);
  line-height: 1.55;
  margin: 0;
  max-width: 60ch;
  color: var(--fg);
}
.page-hero__actions {
  display: flex;
  align-items: center;
  gap: 24px;
  margin-top: 4px;
  flex-wrap: wrap;
}
.page-hero__secondary {
  font-size: 14px;
  color: var(--fg);
  text-decoration: none;
  border-bottom: 1px solid var(--fg);
  padding-bottom: 2px;
}
.page-hero__secondary:hover { color: var(--accent); border-color: var(--accent); }
.page-hero__meta {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: 0;
  margin: 40px 0 0;
  border-top: 1px solid var(--rule);
  padding-top: 20px;
  max-width: 920px;
}
.page-hero__meta > div { display: flex; flex-direction: column; gap: 4px; }
/* Sub-page hero meta labels — same logic as .solas-hero__meta dt:
   functional metadata gets full ink. */
.page-hero__meta dt {
  font-size: 11px;
  font-weight: 600;
  letter-spacing: 0.10em;
  text-transform: uppercase;
  color: var(--fg);
}
.page-hero__meta dd { margin: 0; font-size: 15px; font-weight: 600; color: var(--fg); }

/* Section */
.page-section {
  padding: 72px 64px;
  max-width: 1280px;
  border-top: 1px solid var(--rule);
  display: grid;
  grid-template-columns: 1fr 1.6fr;
  gap: 64px;
}
.page-section--tight { padding: 48px 64px; }
.page-section__head {
  display: flex;
  flex-direction: column;
  gap: 14px;
  position: sticky;
  top: 40px;
  align-self: start;
}
.page-section__eyebrow {
  font-size: 11px;
  font-weight: 600;
  letter-spacing: 0.12em;
  text-transform: uppercase;
  color: var(--accent);
}
.page-section__title {
  font-size: var(--type-h2-section);
  font-weight: 600;
  letter-spacing: 0.005em;
  line-height: 1.15;
  margin: 0;
  max-width: 18ch;
  text-wrap: balance;
}
.page-section__standfirst {
  font-size: 15px;
  line-height: 1.55;
  margin: 0;
  color: var(--fg-muted);
  max-width: 36ch;
}
.page-section__aside {
  margin-top: 8px;
  font-size: 13px;
  color: var(--fg-muted);
  line-height: 1.5;
}
.page-section__body {
  display: flex;
  flex-direction: column;
  gap: 32px;
}

/* Stub block — labelled placeholder */
.page-stub {
  border: 1px dashed var(--rule-strong);
  padding: 22px 24px;
  display: flex;
  flex-direction: column;
  gap: 6px;
  background: transparent;
}
.page-stub__lbl {
  font-size: 11px;
  font-weight: 600;
  letter-spacing: 0.12em;
  text-transform: uppercase;
  color: var(--accent);
}
.page-stub__note {
  font-size: 13.5px;
  line-height: 1.55;
  color: var(--fg-muted);
}

/* Pull-quote (sub-page variant) */
.page-pull {
  margin: 0;
  padding: 32px 36px;
  background: var(--bg-elevated);
}
.page-pull__rule { width: 56px; border-top: 2px solid var(--accent); margin-bottom: 18px; }
.page-pull__q {
  font-style: italic;
  font-size: var(--type-h3);
  line-height: 1.35;
  margin: 0 0 18px;
  font-weight: 400;
  text-wrap: pretty;
}
.page-pull__sig { display: flex; flex-direction: column; gap: 2px; }
.page-pull__name { font-style: italic; font-size: var(--type-body); }
.page-pull__role {
  font-size: 11px;
  letter-spacing: 0.10em;
  text-transform: uppercase;
  color: var(--fg-muted);
  font-weight: 600;
}

/* MetaList — repeatable definition grid */
.page-meta {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: 0;
  margin: 0;
  border-top: 1px solid var(--fg);
}
.page-meta > div {
  padding: 20px 24px 20px 0;
  border-right: 1px solid var(--rule);
  display: flex;
  flex-direction: column;
  gap: 6px;
}
.page-meta > div:last-child { border-right: 0; padding-right: 0; }
/* MetaList terms — functional definition-list labels at 10px;
   lifted to --fg for AA-safe reading at the smaller size. */
.page-meta dt {
  font-size: 10px;
  font-weight: 600;
  letter-spacing: 0.12em;
  text-transform: uppercase;
  color: var(--fg);
}
.page-meta dd {
  margin: 0;
  font-size: 17px; /* between body and h4 — kept as a one-off until extension token is needed */
  font-weight: 600;
  color: var(--fg);
}

/* Card list — used by team / press / partner grids */
.page-cardgrid {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 0;
  border-top: 1px solid var(--rule);
  border-left: 1px solid var(--rule);
}
.page-card {
  border-right: 1px solid var(--rule);
  border-bottom: 1px solid var(--rule);
  padding: 24px 24px 28px;
  display: flex;
  flex-direction: column;
  gap: 12px;
  min-height: 180px;
  background: var(--solas-paper);
  text-decoration: none;
  color: var(--fg);
  transition: background 200ms var(--ease);
}
a.page-card:hover { background: var(--bg-elevated); color: var(--fg); }
.page-card__n {
  font-size: 10px;
  font-weight: 600;
  letter-spacing: 0.12em;
  text-transform: uppercase;
  color: var(--accent);
}
.page-card__h {
  font-size: 17px; /* one-off card title — see note in --type-* block */
  font-weight: 600;
  letter-spacing: 0.005em;
  line-height: 1.3;
  margin: 0;
}
.page-card__p {
  font-size: 13.5px;
  line-height: 1.55;
  margin: 0;
  color: var(--fg-muted);
  max-width: 32ch;
}
.page-cardgrid--2 { grid-template-columns: repeat(2, 1fr); }
.page-cardgrid--4 { grid-template-columns: repeat(4, 1fr); }

/* Press / journal entry */
.page-entrylist {
  display: flex;
  flex-direction: column;
  border-top: 1px solid var(--fg);
}
.page-entry {
  display: grid;
  grid-template-columns: 120px 1fr auto;
  gap: 24px;
  padding: 22px 0;
  border-bottom: 1px solid var(--rule);
  align-items: baseline;
}
/* Press / journal entry date — functional metadata, lifted. */
.page-entry__d {
  font-size: 12px;
  font-weight: 600;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  color: var(--fg);
}
.page-entry__t { font-size: 17px; font-weight: 600; line-height: 1.35; margin: 0; }
.page-entry__s { font-size: 13px; color: var(--fg-muted); margin-top: 4px; line-height: 1.5; }
.page-entry__l {
  font-size: 12px;
  font-weight: 600;
  letter-spacing: 0.06em;
  text-transform: uppercase;
  color: var(--accent);
  text-decoration: none;
}
.page-entry__l:hover { color: #173352; }

/* Faq accordion */
.page-faq {
  display: flex;
  flex-direction: column;
  border-top: 1px solid var(--fg);
}
.page-faq details {
  border-bottom: 1px solid var(--rule);
  padding: 18px 0;
}
.page-faq summary {
  cursor: pointer;
  list-style: none;
  display: flex;
  justify-content: space-between;
  align-items: baseline;
  gap: 24px;
  font-size: 17px; /* see --type-* block — between body and h4 */
  font-weight: 600;
}
.page-faq summary::-webkit-details-marker { display: none; }

/* FAQ disclosure indicator — drawn from a background-SVG so screen
   readers don't announce a literal "plus" / "minus". The native
   <details> element already announces its expanded/collapsed state
   to assistive tech; the visual mark is purely decorative.

   Resting state: a "+" SVG. Open state: a "−" SVG (same width, only
   the horizontal stroke). Both strokes use --fg via currentColor on
   the <summary>, with stroke-width 2 to match the editorial register. */
.page-faq summary::after {
  content: "";
  width: 14px;
  height: 14px;
  flex-shrink: 0;
  background-repeat: no-repeat;
  background-position: center;
  background-size: 14px 14px;
  background-image: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 14 14' fill='none' stroke='%231B1612' stroke-width='2'><line x1='1' y1='7' x2='13' y2='7'/><line x1='7' y1='1' x2='7' y2='13'/></svg>");
  transition: opacity 200ms var(--ease);
}
.page-faq details[open] summary::after {
  background-image: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 14 14' fill='none' stroke='%231B1612' stroke-width='2'><line x1='1' y1='7' x2='13' y2='7'/></svg>");
}
.page-faq p {
  font-size: 15px;
  line-height: 1.65;
  color: var(--fg);
  margin: 14px 0 4px;
  max-width: 64ch;
}

/* Partner row — used on partners.html */
.page-partners {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 0;
  border-top: 1px solid var(--rule);
  border-left: 1px solid var(--rule);
}
.page-partner {
  border-right: 1px solid var(--rule);
  border-bottom: 1px solid var(--rule);
  padding: 24px;
  display: flex;
  flex-direction: column;
  gap: 8px;
  min-height: 160px;
}
.page-partner__n {
  font-size: var(--type-body-lg);
  font-weight: 600;
  letter-spacing: 0.005em;
  margin: 0;
}
.page-partner__k {
  font-size: 12px;
  color: var(--fg-muted);
  font-weight: 600;
  letter-spacing: 0.08em;
  text-transform: uppercase;
}
.page-partner__p { font-size: 13.5px; line-height: 1.55; margin: 8px 0 0; color: var(--fg-muted); max-width: 32ch; }

/* Investors hero CTA pair */
.investor-actions { display: flex; gap: 16px; align-items: center; flex-wrap: wrap; }
.btn--ghost {
  font-family: inherit;
  font-weight: 600;
  font-size: 14px;
  letter-spacing: 0.01em;
  padding: 12px 24px;
  border: 1px solid var(--fg);
  background: transparent;
  color: var(--fg);
  cursor: pointer;
  line-height: 1;
  text-decoration: none;
  transition: border-color 200ms var(--ease), color 200ms var(--ease);
}
.btn--ghost:hover { color: var(--accent); border-color: var(--accent); }

/* Doc card list (investor docs) */
.page-docs { display: flex; flex-direction: column; border-top: 1px solid var(--rule); }
.page-doc {
  display: grid;
  grid-template-columns: 80px 1fr auto;
  gap: 24px;
  padding: 22px 4px;
  border-bottom: 1px solid var(--rule);
  align-items: center;
  text-decoration: none;
  color: var(--fg);
  transition: background 200ms var(--ease);
}
.page-doc:hover { background: var(--bg-elevated); }
/* Doc-row type label — functional, lifted. */
.page-doc__t {
  font-size: 10px;
  font-weight: 600;
  letter-spacing: 0.10em;
  text-transform: uppercase;
  color: var(--fg);
}
.page-doc__n { font-size: var(--type-body); font-weight: 600; }
.page-doc__d { font-size: 13px; color: var(--fg-muted); margin-top: 2px; line-height: 1.5; }
.page-doc__l {
  font-size: 12px;
  font-weight: 600;
  letter-spacing: 0.06em;
  text-transform: uppercase;
  color: var(--accent);
}

/* Contact split */
.page-contactgrid {
  display: grid;
  grid-template-columns: repeat(2, 1fr);
  gap: 0;
  border-top: 1px solid var(--fg);
  border-left: 1px solid var(--rule);
}
.page-contact {
  border-right: 1px solid var(--rule);
  border-bottom: 1px solid var(--rule);
  padding: 28px 28px 32px;
  display: flex;
  flex-direction: column;
  gap: 6px;
}
.page-contact__lbl {
  font-size: 11px;
  font-weight: 600;
  letter-spacing: 0.12em;
  text-transform: uppercase;
  color: var(--accent);
}
.page-contact__n { font-size: var(--type-h4); font-weight: 600; letter-spacing: 0.005em; line-height: 1.2; margin: 0; }
.page-contact__d { font-size: 14px; color: var(--fg-muted); line-height: 1.55; margin: 4px 0 8px; max-width: 32ch; }
.page-contact__v { font-size: var(--type-body); font-weight: 600; font-variant-numeric: tabular-nums; }
.page-contact__v a { color: var(--fg); text-decoration: none; border-bottom: 1px solid var(--rule-strong); }
.page-contact__v a:hover { color: var(--accent); border-color: var(--accent); }

/* Footer ---- responsive concession (single column on narrow viewports) */
@media (max-width: 1080px) {
  .solas-footer__main {
    grid-template-columns: 1fr 1fr;
    gap: 32px;
  }
  .page-section { grid-template-columns: 1fr; }
  .page-section__head { position: static; }
}
@media (max-width: 720px) {
  .solas-nav { padding: 16px 24px; }
  .solas-nav__links { gap: 18px; }
  .solas-nav__sep { display: none; }
  .page-hero, .page-section, .solas-footer__main, .solas-footer__legal { padding-left: 24px; padding-right: 24px; }
}

/* ---- Focus rings (accessibility, kept restrained) ----
   2px solid Ink-Blue outline at 2px offset. This is intentional and
   verified: passes WCAG 1.4.11 (3:1 non-text contrast for the ring
   against paper) and 2.4.7 (focus is visible). Reviewed and retained
   in the 2026-05-27 marketing-site remediation — do not weaken. */
:focus-visible {
  outline: 2px solid var(--accent);
  outline-offset: 2px;
}

/* ============================================================
   B2B-FIRST EXTENSIONS · v1
   The brief's voice was written for the eventual policyholder.
   The v1 audience is capital + press + carriers + brokers.
   These additions hold the editorial register while letting the
   homepage hero address whichever room it's in.
   ============================================================ */

/* ---- Audience strip (sits under the main nav) ----
   A quiet selector that tells investors / brokers / journalists
   the door is theirs. Single-rule, ink-on-paper, no chips. */
.audience-strip {
  display: flex;
  align-items: stretch;
  border-bottom: 1px solid var(--rule);
  padding: 0 64px;
  font-size: 12px;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  color: var(--fg-muted);
  font-weight: 600;
}
.audience-strip__lbl {
  padding: 10px 18px 10px 0;
  border-right: 1px solid var(--rule);
  display: flex;
  align-items: center;
}
.audience-strip__opts {
  display: flex;
  align-items: center;
}
/* Audience strip links — underline is the brand-default link
   affordance (per tokens.css `a` rules), reinstated here so links
   are identifiable without colour alone. The previous resting state
   relied on colour-change-on-hover only, which fails WCAG 1.4.1
   (Use of Color). Resting colour is also lifted from --fg-muted to
   --fg for adequate contrast on the small-caps line. */
.audience-strip__opts a {
  padding: 10px 18px;
  color: var(--fg);
  text-decoration: underline;
  text-decoration-thickness: 1px;
  text-underline-offset: 0.22em;
  border-right: 1px solid var(--rule);
  transition: color var(--dur) var(--ease);
}
.audience-strip__opts a:last-child { border-right: 0; }
.audience-strip__opts a:hover,
.audience-strip__opts a.is-active { color: var(--accent); }

/* ---- Hero variations (homepage) ----
   All three share the same outer .solas-hero shell so layout
   spacing remains a single source of truth. */

/* B · Full-bleed type — the wedge sentence at scale, no actions row above. */
.hero-fullbleed {
  padding: 120px 64px 96px;
  display: flex;
  flex-direction: column;
  gap: 32px;
  max-width: 1280px;
}
.hero-fullbleed__title {
  font-size: var(--type-display);
  font-weight: 600;
  letter-spacing: -0.005em;
  line-height: 1.0;
  margin: 0;
  max-width: 14ch;
  text-wrap: balance;
}
.hero-fullbleed__standfirst {
  font-size: var(--type-body-xl);
  line-height: 1.5;
  max-width: 54ch;
  margin: 0;
  color: var(--fg);
}

/* C · Named-underwriter spotlight — proof-carries-the-hero variant. */
.hero-spotlight {
  display: grid;
  grid-template-columns: 1.1fr 1fr;
  gap: 64px;
  padding: 96px 64px 80px;
  max-width: 1280px;
  align-items: start;
}
.hero-spotlight__col {
  display: flex;
  flex-direction: column;
  gap: 22px;
}
.hero-spotlight__title {
  font-size: var(--type-h1-hero-sm);
  font-weight: 600;
  letter-spacing: 0.005em;
  line-height: 1.06;
  margin: 0;
  max-width: 18ch;
  text-wrap: balance;
}
.hero-spotlight__standfirst {
  font-size: var(--type-body-md);
  line-height: 1.55;
  max-width: 50ch;
  margin: 0;
  color: var(--fg);
}
.hero-spotlight__aside {
  background: var(--bg-elevated);
  padding: 36px 36px 32px;
  display: flex;
  flex-direction: column;
  gap: 18px;
  position: relative;
}
.hero-spotlight__rule {
  width: 64px;
  border-top: 2px solid var(--accent);
}
.hero-spotlight__lbl {
  font-size: 11px;
  font-weight: 600;
  letter-spacing: 0.10em;
  text-transform: uppercase;
  color: var(--accent);
}
.hero-spotlight__q {
  font-style: italic;
  font-size: var(--type-h4);
  line-height: 1.4;
  margin: 0;
  font-weight: 400;
  text-wrap: pretty;
}
.hero-spotlight__sig { display: flex; flex-direction: column; gap: 2px; margin-top: 4px; }
.hero-spotlight__name { font-style: italic; font-size: 15px; }
.hero-spotlight__role {
  font-size: 11px;
  letter-spacing: 0.10em;
  text-transform: uppercase;
  color: var(--fg-muted);
  font-weight: 600;
}

/* ---- B2B CTAs — investor / partner doors ---- */
.hero-doors {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  border-top: 1px solid var(--fg);
  border-bottom: 1px solid var(--rule);
  margin-top: 8px;
}
.hero-door {
  padding: 22px 24px 26px 0;
  border-right: 1px solid var(--rule);
  display: flex;
  flex-direction: column;
  gap: 6px;
  text-decoration: none;
  color: var(--fg);
  transition: background var(--dur) var(--ease);
}
.hero-door:last-child { border-right: 0; padding-right: 24px; }
.hero-door:not(:first-child) { padding-left: 28px; }
.hero-door:hover { background: var(--bg-elevated); }
.hero-door__lbl {
  font-size: 11px;
  font-weight: 600;
  letter-spacing: 0.10em;
  text-transform: uppercase;
  color: var(--accent);
}
.hero-door__t { font-size: var(--type-h4); font-weight: 600; letter-spacing: 0.005em; line-height: 1.2; margin: 0; min-height: 2.4em; }
.hero-door__p { font-size: 13.5px; line-height: 1.5; margin: 4px 0 0; color: var(--fg-muted); max-width: 30ch; }
.hero-door__arrow {
  font-size: 12px;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  font-weight: 600;
  color: var(--fg);
  margin-top: auto;
  padding-top: 14px;
}
.hero-door:hover .hero-door__arrow { color: var(--accent); }

/* ---- Image-slot editorial placeholders ----
   Used wherever commissioned photography will land. */
.imgslot {
  background: var(--bg-elevated);
  border: 1px solid var(--rule);
  position: relative;
  overflow: hidden;
  display: block;
}
.imgslot::before {
  content: "";
  display: block;
  padding-top: var(--aspect, 75%);
}
.imgslot > img,
.imgslot > .imgslot__img {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  object-fit: cover;
  display: block;
}
/* Caption sits on a solid hairline panel — gradients are a brand
   non-negotiable (no gradients, per CLAUDE.md non-negotiable #5 and
   /brain/brand/positioning.md). The previous linear-gradient overlay
   was replaced with a solid low-opacity Ink panel and a 1px hairline
   above the caption text to separate caption from image. */
.imgslot__caption {
  position: absolute;
  bottom: 0;
  left: 0;
  right: 0;
  padding: 10px 14px;
  font-size: 10px;
  font-weight: 600;
  letter-spacing: 0.12em;
  text-transform: uppercase;
  color: var(--solas-paper);
  background: rgba(27, 22, 18, 0.72); /* solid Ink at low opacity — no gradient */
  border-top: 1px solid var(--rule-strong);
}
.imgslot--placeholder::after {
  content: "Placeholder · commissioned photography pending";
  position: absolute;
  top: 14px;
  left: 14px;
  font-size: 10px;
  font-weight: 600;
  letter-spacing: 0.10em;
  text-transform: uppercase;
  color: var(--fg-muted);
  background: var(--solas-paper);
  padding: 4px 8px;
  border: 1px solid var(--rule);
}
.imgslot--square { --aspect: 100%; }
.imgslot--portrait { --aspect: 130%; }
.imgslot--wide { --aspect: 56%; }

/* ---- Approach page · numbered argument flow ---- */
.argument {
  display: grid;
  grid-template-columns: 80px 1fr;
  gap: 32px;
  padding: 32px 0;
  border-bottom: 1px solid var(--rule);
}
.argument:first-child { border-top: 1px solid var(--fg); }
.argument__n {
  font-size: 11px;
  font-weight: 600;
  letter-spacing: 0.12em;
  text-transform: uppercase;
  color: var(--accent);
  padding-top: 4px;
}
.argument__body { display: flex; flex-direction: column; gap: 14px; max-width: 56ch; }
.argument__t {
  font-size: var(--type-h3);
  font-weight: 600;
  letter-spacing: 0.005em;
  line-height: 1.25;
  margin: 0;
}
.argument__p { font-size: 15.5px; line-height: 1.65; margin: 0; color: var(--fg); }
.argument__aside {
  margin: 8px 0 0;
  padding: 14px 18px;
  border-left: 2px solid var(--accent);
  font-size: 13.5px;
  line-height: 1.55;
  color: var(--fg-muted);
  font-style: italic;
}

/* ---- Investor data-room rows (locked + downloadable) ---- */
.dataroom {
  display: flex;
  flex-direction: column;
  border-top: 1px solid var(--fg);
}
.dataroom__row {
  display: grid;
  grid-template-columns: 96px 1fr 160px auto;
  gap: 24px;
  padding: 20px 4px;
  border-bottom: 1px solid var(--rule);
  align-items: center;
  text-decoration: none;
  color: var(--fg);
  transition: background var(--dur) var(--ease);
}
.dataroom__row:hover { background: var(--bg-elevated); }
.dataroom__row[aria-disabled="true"] { color: var(--fg-subtle); cursor: not-allowed; }
.dataroom__row[aria-disabled="true"]:hover { background: transparent; }
/* Data-room row type label — functional, lifted. */
.dataroom__t {
  font-size: 10px;
  font-weight: 600;
  letter-spacing: 0.10em;
  text-transform: uppercase;
  color: var(--fg);
}
.dataroom__n { font-size: 16px; font-weight: 600; letter-spacing: 0.005em; }
.dataroom__d { font-size: 13px; color: var(--fg-muted); margin-top: 4px; line-height: 1.45; }
.dataroom__meta { font-size: 12.5px; color: var(--fg-muted); font-variant-numeric: tabular-nums; }
.dataroom__cta {
  font-size: 11px;
  font-weight: 600;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  color: var(--accent);
}
.dataroom__row[aria-disabled="true"] .dataroom__cta { color: var(--fg-subtle); }

.dataroom-gate {
  border: 1px solid var(--rule-strong);
  padding: 24px 28px;
  display: grid;
  grid-template-columns: 1fr auto;
  gap: 24px;
  align-items: center;
  background: var(--bg-elevated);
}
.dataroom-gate__t { font-size: 14px; font-weight: 600; letter-spacing: 0.005em; margin: 0 0 4px; }
.dataroom-gate__p { font-size: 13px; line-height: 1.55; margin: 0; color: var(--fg-muted); max-width: 50ch; }

/* ---- Team grid ---- */
.team-grid {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 0;
  border-top: 1px solid var(--rule);
  border-left: 1px solid var(--rule);
}
.team-member {
  border-right: 1px solid var(--rule);
  border-bottom: 1px solid var(--rule);
  padding: 0;
  display: flex;
  flex-direction: column;
}
.team-member__img {
  --aspect: 110%;
  border: 0;
  border-bottom: 1px solid var(--rule);
}
.team-member__body { padding: 22px 24px 28px; display: flex; flex-direction: column; gap: 8px; }
.team-member__n {
  font-size: var(--type-body-lg);
  font-weight: 600;
  letter-spacing: 0.005em;
  margin: 0;
}
.team-member__r {
  font-size: 11px;
  font-weight: 600;
  letter-spacing: 0.10em;
  text-transform: uppercase;
  color: var(--accent);
}
.team-member__bio { font-size: 13.5px; line-height: 1.55; margin: 6px 0 0; color: var(--fg-muted); }
/* Prior-roles line is content (not placeholder atmosphere), so it
   must clear WCAG AA 4.5:1 for normal text. --fg-subtle (#8E8676)
   gave ~3.6:1 on paper — fails AA. --fg-muted (#6B6258) is ~5.4:1,
   passes AA. The team grid itself is restructuring under
   CEP-2026-05-27-002, but the colour token is fixed regardless for
   any text in a content role. */
.team-member__prior {
  font-size: 12px;
  color: var(--fg-muted);
  letter-spacing: 0.04em;
  margin-top: 8px;
}

/* ---- Press / journal entries with thumbnails ---- */
.journal-list {
  display: flex;
  flex-direction: column;
  border-top: 1px solid var(--fg);
}
.journal-entry {
  display: grid;
  grid-template-columns: 200px 120px 1fr auto;
  gap: 28px;
  padding: 22px 0;
  border-bottom: 1px solid var(--rule);
  align-items: start;
  text-decoration: none;
  color: var(--fg);
  transition: background var(--dur) var(--ease);
}
.journal-entry:hover { background: var(--bg-elevated); }
.journal-entry__img {
  --aspect: 66%;
  border: 0;
}
.journal-entry__meta { display: flex; flex-direction: column; gap: 4px; padding-top: 2px; }
/* Journal entry date — functional metadata, lifted. */
.journal-entry__d {
  font-size: 11px;
  font-weight: 600;
  letter-spacing: 0.10em;
  text-transform: uppercase;
  color: var(--fg);
}
.journal-entry__k {
  font-size: 11px;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  color: var(--accent);
  font-weight: 600;
}
.journal-entry__body { display: flex; flex-direction: column; gap: 6px; padding-top: 2px; }
.journal-entry__t {
  font-size: var(--type-body-lg);
  font-weight: 600;
  letter-spacing: 0.005em;
  line-height: 1.3;
  margin: 0;
  max-width: 36ch;
}
.journal-entry__s {
  font-size: 13.5px;
  line-height: 1.55;
  color: var(--fg-muted);
  margin: 0;
  max-width: 50ch;
}
.journal-entry__l {
  font-size: 11px;
  font-weight: 600;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  color: var(--accent);
  padding-top: 6px;
}

/* ---- /quote interest-capture form ---- */
.quote-shell {
  display: grid;
  grid-template-columns: 1fr 1fr;
  border-top: 1px solid var(--rule);
  min-height: 720px;
}
.quote-shell__col {
  padding: 72px 64px;
  display: flex;
  flex-direction: column;
  gap: 32px;
}
.quote-shell__col--aside {
  background: var(--bg-elevated);
  border-left: 1px solid var(--rule);
}
.quote-form {
  display: flex;
  flex-direction: column;
  gap: 24px;
  max-width: 440px;
}
.quote-field {
  display: flex;
  flex-direction: column;
  gap: 6px;
}
.quote-field__lbl {
  font-size: 11px;
  font-weight: 600;
  letter-spacing: 0.10em;
  text-transform: uppercase;
  color: var(--fg);
}
.quote-field__hint {
  font-size: 12px;
  color: var(--fg-muted);
  line-height: 1.5;
  margin-top: 2px;
}
/* Form fields — resting border uses --fg-muted (#6B6258) on
   --solas-paper (#F4EFE6) for ~5.4:1 non-text contrast, comfortably
   passing WCAG 1.4.11 (3:1 minimum for UI components). The previous
   --rule-strong (#B5AB97) gave ~1.7:1, a failure.

   Corner radius reduced to --radius-1 (2px) per CLAUDE.md
   non-negotiable #6 — the brand editorial register favours 2px
   over the looser 4px option. */
.quote-field input,
.quote-field select {
  font-family: inherit;
  font-size: 15px;
  background: var(--solas-paper);
  color: var(--fg);
  border: 1px solid var(--fg-muted);
  border-radius: var(--radius-1);
  padding: 12px 14px;
  outline: none;
  transition: border-color var(--dur) var(--ease), box-shadow var(--dur) var(--ease);
}
.quote-field input:focus,
.quote-field select:focus {
  border-color: var(--accent);
  /* Inset 1px ring — a doubled border for focus, not a decorative
     shadow. Zero blur, zero offset; satisfies the no-drop-shadows
     non-negotiable while strengthening focus visibility. */
  box-shadow: inset 0 0 0 1px var(--accent);
}
.quote-form__row {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 16px;
}
.quote-form__check {
  display: flex;
  gap: 12px;
  align-items: flex-start;
  font-size: 13px;
  line-height: 1.5;
  color: var(--fg-muted);
}
.quote-form__check input {
  margin-top: 3px;
  accent-color: var(--accent);
}
.quote-shell__waitlist {
  display: flex;
  flex-direction: column;
  gap: 24px;
  max-width: 480px;
}
.quote-shell__waitnote {
  border-left: 2px solid var(--accent);
  padding: 4px 0 4px 18px;
  font-size: 14px;
  line-height: 1.55;
  color: var(--fg);
  font-style: italic;
}

/* ---- Partner / broker signup form (on partners.html) ---- */
.partner-form {
  display: flex;
  flex-direction: column;
  gap: 22px;
  max-width: 540px;
  border-top: 1px solid var(--fg);
  padding-top: 32px;
}

/* ---- Pull-quote variant for B2B page ---- */
.page-pull--investor {
  background: transparent;
  padding: 32px 0 32px 36px;
  border-left: 2px solid var(--accent);
}

/* ---- Hubspot wiring note (form footers) ---- */
.form-note {
  font-size: 11.5px;
  line-height: 1.55;
  color: var(--fg-muted);
  margin-top: 4px;
}
.form-note strong { color: var(--fg); font-weight: 600; }

/* ---- "Coming soon" inline mark (used on /quote until Socotra is wired) ---- */
.coming-soon {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  font-size: 10px;
  font-weight: 600;
  letter-spacing: 0.12em;
  text-transform: uppercase;
  color: var(--accent);
  padding: 4px 8px;
  border: 1px solid var(--accent);
}
.coming-soon::before {
  content: "";
  width: 6px;
  height: 6px;
  background: var(--accent);
  display: inline-block;
}

/* ---- WaitlistCTA — editorial close, drives every explainer to /quote ---- */
.waitlist-cta {
  border-top: 1px solid var(--rule);
  padding: 96px 64px 112px;
  background: var(--bg-elevated);
}
.waitlist-cta__inner {
  max-width: 880px;
  display: flex;
  flex-direction: column;
  gap: 20px;
}
.waitlist-cta__rule {
  width: 80px;
  border-top: 2px solid var(--accent);
  margin-bottom: 8px;
}
.waitlist-cta__eyebrow {
  font-size: 11px;
  font-weight: 600;
  letter-spacing: 0.12em;
  text-transform: uppercase;
  color: var(--accent);
}
.waitlist-cta__title {
  font-size: var(--type-h1-cta);
  font-weight: 600;
  letter-spacing: 0.005em;
  line-height: 1.08;
  margin: 0;
  max-width: 22ch;
  text-wrap: balance;
}
.waitlist-cta__standfirst {
  font-size: var(--type-body-lg);
  line-height: 1.55;
  max-width: 60ch;
  margin: 4px 0 8px;
  color: var(--fg);
}
.waitlist-cta__actions {
  display: flex;
  align-items: center;
  gap: 24px;
  flex-wrap: wrap;
  margin-top: 8px;
}
.waitlist-cta__secondary {
  font-size: 14px;
  color: var(--fg);
  text-decoration: none;
  border-bottom: 1px solid var(--fg);
  padding-bottom: 2px;
}
.waitlist-cta__secondary:hover { color: var(--accent); border-color: var(--accent); }
.waitlist-cta__note {
  font-size: 12.5px;
  line-height: 1.55;
  margin: 12px 0 0;
  color: var(--fg-muted);
  max-width: 60ch;
}

/* ---- Browser chrome around the SPA preview ----
   Shows the current URL so the mockup reads as a site, not a single page. */
.browser-chrome {
  position: sticky;
  top: 0;
  z-index: 20;
  background: var(--bg-elevated);
  border-bottom: 1px solid var(--rule);
  display: flex;
  align-items: center;
  gap: 16px;
  padding: 10px 16px;
  font-size: 12.5px;
}
.browser-chrome__dots {
  display: flex;
  gap: 6px;
  align-items: center;
}
.browser-chrome__dot {
  width: 11px;
  height: 11px;
  border-radius: 50%;
  background: var(--rule-strong);
}
.browser-chrome__url {
  flex: 1;
  background: var(--solas-paper);
  border: 1px solid var(--rule);
  padding: 6px 12px;
  font-family: 'iA Writer Mono S', ui-monospace, SFMono-Regular, Menlo, monospace;
  font-size: 12px;
  color: var(--fg);
  letter-spacing: 0;
}
.browser-chrome__url span { color: var(--fg-muted); }
.browser-chrome__nav {
  display: flex;
  gap: 4px;
  color: var(--fg-muted);
  font-weight: 600;
  font-size: 14px;
}
.browser-chrome__nav button {
  background: transparent;
  border: 0;
  color: inherit;
  cursor: pointer;
  padding: 0 6px;
  font-size: 16px;
  line-height: 1;
}
.browser-chrome__nav button:hover { color: var(--fg); }

/* ---- Notes ribbon (in the handoff overlay) ---- */
.handoff-overlay {
  position: fixed;
  top: 0; right: 0; bottom: 0;
  width: 540px;
  background: var(--solas-paper);
  border-left: 1px solid var(--rule);
  overflow-y: auto;
  z-index: 30;
  padding: 32px 36px 64px;
  display: flex;
  flex-direction: column;
  gap: 24px;
  transform: translateX(100%);
  transition: transform 240ms var(--ease);
}
.handoff-overlay.is-open { transform: translateX(0); }
.handoff-overlay__close {
  background: transparent;
  border: 0;
  cursor: pointer;
  position: absolute;
  top: 22px; right: 22px;
  font-size: 14px;
  color: var(--fg-muted);
  font-family: inherit;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  font-weight: 600;
}
.handoff-overlay__close:hover { color: var(--accent); }
.handoff-overlay__t {
  font-size: var(--type-h3-overlay);
  font-weight: 600;
  letter-spacing: 0.005em;
  margin: 0;
}
.handoff-overlay__lbl {
  font-size: 11px;
  font-weight: 600;
  letter-spacing: 0.12em;
  text-transform: uppercase;
  color: var(--accent);
}
.handoff-overlay__rule { border-top: 2px solid var(--accent); width: 56px; margin: 0; }
.handoff-overlay__files { display: flex; flex-direction: column; }
.handoff-overlay__file {
  display: grid;
  grid-template-columns: 1fr auto;
  align-items: baseline;
  gap: 16px;
  padding: 12px 0;
  border-bottom: 1px solid var(--rule);
  font-size: 13px;
}
.handoff-overlay__file__n {
  font-family: 'iA Writer Mono S', ui-monospace, SFMono-Regular, Menlo, monospace;
  font-size: 12.5px;
  color: var(--fg);
}
.handoff-overlay__file__d { color: var(--fg-muted); font-size: 12px; max-width: 28ch; text-align: right; }
.handoff-overlay__cta {
  display: inline-block;
  margin-top: 16px;
  font-size: 14px;
  background: var(--accent);
  color: var(--solas-paper);
  padding: 12px 20px;
  text-decoration: none;
  font-weight: 600;
  letter-spacing: 0.01em;
  align-self: flex-start;
}
.handoff-overlay__cta:hover { background: #173352; }

/* ---- Section openers with set-number ribbons ---- */
.section-opener {
  padding: 48px 64px 24px;
  max-width: 1280px;
  display: grid;
  grid-template-columns: 80px 1fr;
  gap: 32px;
  align-items: baseline;
  border-top: 1px solid var(--fg);
}
.section-opener__n {
  font-size: 11px;
  font-weight: 600;
  letter-spacing: 0.12em;
  text-transform: uppercase;
  color: var(--accent);
}
.section-opener__t {
  font-size: var(--type-h2-section);
  font-weight: 600;
  letter-spacing: 0.005em;
  line-height: 1.15;
  margin: 0;
  max-width: 24ch;
  text-wrap: balance;
}

/* ---- Index page: "Investor brief" inline panel ---- */
.brief-panel {
  display: grid;
  grid-template-columns: 1.1fr 1fr;
  gap: 0;
  padding: 96px 64px;
  border-top: 1px solid var(--rule);
  max-width: 1280px;
}
.brief-panel__col {
  padding: 0 48px 0 0;
  display: flex;
  flex-direction: column;
  gap: 18px;
}
.brief-panel__col + .brief-panel__col {
  border-left: 1px solid var(--rule);
  padding: 0 0 0 48px;
}
.brief-panel__t { font-size: var(--type-h2-panel); font-weight: 600; line-height: 1.15; margin: 0; max-width: 18ch; }
.brief-panel__p { font-size: 14.5px; line-height: 1.6; color: var(--fg); margin: 0; max-width: 42ch; }
.brief-panel__stats {
  display: grid;
  grid-template-columns: repeat(2, 1fr);
  border-top: 1px solid var(--fg);
  margin-top: 16px;
}
.brief-panel__stat {
  padding: 16px 0;
  border-right: 1px solid var(--rule);
  border-bottom: 1px solid var(--rule);
  display: flex;
  flex-direction: column;
  gap: 4px;
}
.brief-panel__stat:nth-child(2n) { border-right: 0; padding-left: 24px; }
.brief-panel__stat:nth-child(n+3) { padding-top: 20px; }
/* Brief panel stat term — functional definition label, lifted. */
.brief-panel__stat dt {
  font-size: 10px;
  font-weight: 600;
  letter-spacing: 0.10em;
  text-transform: uppercase;
  color: var(--fg);
}
.brief-panel__stat dd {
  margin: 0;
  font-size: var(--type-h3-stat);
  font-weight: 600;
  letter-spacing: 0.005em;
  font-variant-numeric: tabular-nums;
}
.brief-panel__stat dd span {
  display: block;
  margin-top: 2px;
  font-size: 13px;
  font-weight: 400;
  color: var(--fg-muted);
  letter-spacing: 0;
}

/* ---- Inline "we're hiring" strip ---- */
.hiring-strip {
  display: grid;
  grid-template-columns: auto 1fr auto;
  gap: 24px;
  align-items: center;
  padding: 22px 64px;
  border-top: 1px solid var(--rule);
  border-bottom: 1px solid var(--rule);
  font-size: 14px;
}
.hiring-strip__lbl {
  font-size: 11px;
  font-weight: 600;
  letter-spacing: 0.12em;
  text-transform: uppercase;
  color: var(--accent);
}
.hiring-strip__txt { color: var(--fg); margin: 0; }
.hiring-strip__txt strong { font-weight: 600; }
.hiring-strip__cta {
  font-size: 12px;
  font-weight: 600;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  color: var(--accent);
  text-decoration: none;
  border-bottom: 1px solid var(--accent);
  padding-bottom: 2px;
}

/* ---- Contact form (used on /contact) ---- */
.contact-form {
  display: flex;
  flex-direction: column;
  gap: 22px;
  max-width: 560px;
}

/* ---- Legal page — single long column ---- */
.legal-doc {
  max-width: 64ch;
  display: flex;
  flex-direction: column;
  gap: 32px;
  padding: 48px 0 96px;
}
.legal-doc h2 {
  font-size: var(--type-h4);
  font-weight: 600;
  letter-spacing: 0.005em;
  margin: 32px 0 8px;
  padding-top: 16px;
  border-top: 1px solid var(--rule);
}
.legal-doc h2:first-of-type { border-top: 0; padding-top: 0; }
.legal-doc p { font-size: 15px; line-height: 1.65; margin: 0; }
.legal-doc ul { padding: 0 0 0 22px; margin: 0; display: flex; flex-direction: column; gap: 6px; }
.legal-doc li { font-size: 15px; line-height: 1.55; }

/* ---- Page wrapper (matches the brief's editorial breathing) ---- */
.page-wrap {
  max-width: 1280px;
  padding: 0 64px;
  margin: 0 auto;
}
.page-wrap--narrow { max-width: 980px; }

/* ---- Two-column page section (no sticky head — for forms etc) ---- */
.page-section--flat {
  display: block;
  padding: 72px 64px;
  max-width: 1280px;
  border-top: 1px solid var(--rule);
}
.page-section--flat .page-section__head {
  display: flex;
  flex-direction: column;
  gap: 14px;
  margin-bottom: 32px;
  max-width: 50ch;
  position: static;
}

@media (max-width: 1080px) {
  .audience-strip,
  .hiring-strip,
  .section-opener { padding-left: 24px; padding-right: 24px; }
  .waitlist-cta { padding-left: 24px; padding-right: 24px; }
  .hero-spotlight,
  .quote-shell,
  .brief-panel { grid-template-columns: 1fr; }
  .quote-shell__col,
  .brief-panel__col,
  .brief-panel__col + .brief-panel__col { border-left: 0; padding: 32px 24px; }
  .team-grid,
  .page-cardgrid { grid-template-columns: repeat(2, 1fr); }
  .hero-doors { grid-template-columns: 1fr; }
  .hero-door { border-right: 0; border-bottom: 1px solid var(--rule); padding: 22px 0; }
  .hero-door:last-child { border-bottom: 0; }
  .hero-door:not(:first-child) { padding-left: 0; }
  .handoff-overlay { width: 92vw; }
  .journal-entry { grid-template-columns: 1fr; }
  .journal-entry__img { display: none; }
  .dataroom__row { grid-template-columns: 80px 1fr auto; }
  .dataroom__row > .dataroom__meta { display: none; }
}
@media (max-width: 720px) {
  .solas-hero { padding: 56px 24px 48px; }
  .hero-fullbleed { padding: 64px 24px 48px; }
  .hero-fullbleed__title { font-size: var(--type-display-mobile); }
  .solas-hero__title { font-size: var(--type-h1-hero-mobile); }
  .hero-spotlight, .hero-spotlight__col { padding: 48px 24px; gap: 24px; }
  .hero-spotlight__title { font-size: var(--type-h1-spot-mobile); }
  .waitlist-cta { padding: 56px 24px 72px; }
  .waitlist-cta__title { font-size: var(--type-h1-cta-mobile); }
  .solas-pillars,
  .solas-editorial,
  .solas-broker,
  .page-section--flat,
  .page-section { padding-left: 24px; padding-right: 24px; }
  .team-grid,
  .page-cardgrid,
  .page-contactgrid { grid-template-columns: 1fr; }
  .solas-pillars__list { grid-template-columns: 1fr; }
  .solas-pillar { border-right: 0; border-bottom: 1px solid var(--rule); padding: 22px 0; }
  .solas-pillar:not(:first-child) { padding-left: 0; }
  .solas-broker__card { width: 100%; aspect-ratio: auto; }
}