/* ============================================================================
   SilverShore Partners - site.css
   Shared stylesheet for the site-v2 draft. Composes the SilverShore Design
   System tokens (colors, type, spacing, effects) into the site's layout,
   chrome, and editorial components. Authority: SilverShore Design System.
   ========================================================================== */
@import url("assets/tokens/fonts.css");
@import url("assets/tokens/colors.css");
@import url("assets/tokens/typography.css");
@import url("assets/tokens/spacing.css");
@import url("assets/tokens/effects.css");
@import url("assets/tokens/animations.css");

*, *::before, *::after { box-sizing: border-box; }
html { -webkit-text-size-adjust: 100%; scroll-behavior: smooth; }
body {
  margin: 0;
  font-family: var(--font-sans);
  font-size: var(--text-body);
  line-height: var(--lh-body);
  color: var(--ss-text-dark);
  background: var(--ss-white);
  -webkit-font-smoothing: antialiased;
  text-rendering: optimizeLegibility;
}
img { max-width: 100%; display: block; }
a { color: var(--ss-primary); text-decoration: none; transition: color var(--dur-base) var(--ease-signature); }
a:hover { color: var(--ss-blue-hover); }
h1, h2, h3, h4 { font-family: var(--font-serif); font-weight: 400; color: var(--ss-navy); margin: 0; text-wrap: balance; }
p { margin: 0 0 1em; text-wrap: pretty; }
:focus-visible { outline: 2px solid var(--ss-primary); outline-offset: 3px; border-radius: 2px; }

/* ── Layout ─────────────────────────────────────────────────────────────── */
/* One shared content rail. .wrap is the canonical container; .wrap-wide and
   .site-container are aliases so header, hero, sections, forms, and footer all
   align to the same left edge and max-width at every breakpoint. */
.wrap, .wrap-wide, .site-container { max-width: var(--container-max); margin: 0 auto; padding-left: var(--gutter); padding-right: var(--gutter); }
.section { padding-top: var(--section-y); padding-bottom: var(--section-y); }
.section-lg { padding-top: var(--section-y-lg); padding-bottom: var(--section-y-lg); }
.stack > * + * { margin-top: var(--space-6); }

/* Section grounds */
.ground-white { background: var(--ss-white); }
.ground-mist  { background: var(--ss-mist); }
.ground-navy  { background: var(--ss-navy); color: var(--ss-ink-on-navy-2); }
.ground-dusk  { background: linear-gradient(135deg, var(--ss-navy-deep) 0%, var(--ss-navy) 55%, #1c548f 130%); color: var(--ss-ink-on-navy-2); }
.ground-navy h1, .ground-navy h2, .ground-navy h3, .ground-navy h4,
.ground-dusk h1, .ground-dusk h2, .ground-dusk h3, .ground-dusk h4 { color: var(--ss-ivory); }

/* Scrim photography ground. The generated plates are light cream paper, so the
   navy scrim is tuned to let the watercolour structure and ink linework read
   through as texture while keeping ivory text well clear of the contrast floor. */
.ground-image { position: relative; color: var(--ss-ink-on-navy-2); overflow: hidden; isolation: isolate; background-color: var(--ss-navy-deep); }
.ground-image > .scrim-media {
  position: absolute; inset: 0; z-index: -2; background-size: cover; background-position: center;
  transform: scale(1.06); animation: ssKenBurns 26s var(--ease-signature) infinite alternate;
  filter: saturate(1.06) contrast(1.04);
}
/* Directional scrim: heaviest under the text column on the left, easing off to
   the right so the watercolour washes and ink linework stay visible. Ivory text
   sits only over the dense end, well clear of the contrast floor. */
.ground-image::after {
  content: ""; position: absolute; inset: 0; z-index: -1;
  background:
    linear-gradient(104deg, rgba(8,30,59,0.94) 0%, rgba(11,38,72,0.90) 34%, rgba(14,47,87,0.74) 62%, rgba(20,58,104,0.56) 100%),
    linear-gradient(to bottom, rgba(8,30,59,0.30) 0%, rgba(8,30,59,0) 40%, rgba(8,30,59,0.34) 100%);
}
.ground-image h1, .ground-image h2, .ground-image h3 { color: var(--ss-ivory); }
/* Centred bands read better with an even scrim than a directional one. */
.ground-image.center-scrim::after {
  background:
    linear-gradient(to bottom, rgba(8,30,59,0.90) 0%, rgba(14,47,87,0.82) 50%, rgba(8,30,59,0.90) 100%);
}
@keyframes ssKenBurns { from { transform: scale(1.02) translateY(0); } to { transform: scale(1.1) translateY(-2%); } }

/* ── Typography helpers ─────────────────────────────────────────────────── */
.eyebrow {
  font-family: var(--font-mono); font-size: var(--text-eyebrow); font-weight: 500;
  letter-spacing: var(--tracking-eyebrow); text-transform: uppercase; color: var(--ss-primary);
  margin: 0 0 var(--space-4); display: block;
}
.ground-navy .eyebrow, .ground-dusk .eyebrow, .ground-image .eyebrow { color: var(--ss-gold-on-navy); }
/* Responsive display type. Fluid clamps replace the fixed sizes so major
   titles scale continuously instead of stepping at breakpoints, which is what
   produced the awkward three line wraps at tablet widths. Floors stay well
   above the accessible minimum. */
:root {
  --text-display: clamp(2.4rem, 1.15rem + 3.5vw, 4rem);
  --text-h1:      clamp(2.05rem, 1.1rem + 2.7vw, 3.2rem);
  --text-h2:      clamp(1.6rem, 1.15rem + 1.5vw, 2.375rem);
}
.display { font-size: var(--text-display); line-height: var(--lh-display); letter-spacing: var(--tracking-display); text-wrap: balance; }
.h1 { font-size: var(--text-h1); line-height: var(--lh-display); letter-spacing: var(--tracking-display); text-wrap: balance; }
.h2 { font-size: var(--text-h2); line-height: var(--lh-heading); letter-spacing: var(--tracking-heading); text-wrap: balance; }
.h3 { font-size: var(--text-h3); line-height: var(--lh-h3); }
.lede { font-family: var(--font-serif); font-size: var(--text-lede); line-height: var(--lh-lede); color: var(--ss-text-mid); font-weight: 400; }
.ground-navy .lede, .ground-dusk .lede, .ground-image .lede { color: var(--ss-ink-on-navy-3); }
.muted { color: var(--ss-text-mid); }
.small { font-size: var(--text-body-sm); }
.measure { max-width: 62ch; }
.measure-sm { max-width: 46ch; }

/* Inline emphasis */
.ss-gold { color: var(--ss-gold); font-style: italic; }
.ground-navy .ss-gold, .ground-dusk .ss-gold, .ground-image .ss-gold { color: var(--ss-gold-text-on-dark); }
.ss-blue { color: var(--ss-primary); }
.ss-blue-strong { color: var(--ss-primary); font-weight: 600; }
.ground-navy .ss-blue, .ground-navy .ss-blue-strong { color: var(--ss-blue-bright); }
.ss-sym { color: var(--ss-gold); }
.ground-navy .ss-sym, .ground-dusk .ss-sym, .ground-image .ss-sym { color: var(--ss-gold-text-on-dark); }

/* Section header block. The block itself is unconstrained so display titles can
   use their own measures; the lede keeps a comfortable reading width. Rhythm
   tokens give every section a consistent title-to-subtext and subtext-to-content
   gap so headers never collide or float. */
:root { --head-gap: clamp(26px, 2.2vw, 32px); --content-gap: clamp(44px, 5vw, 64px); }
.section-head { max-width: none; }
.section-head .lede { max-inline-size: 62ch; }
.section-head.center .lede { margin-inline: auto; }
.section-head .h2 { margin-bottom: var(--head-gap); }
.section-head .h2 + .lede { margin-top: 0; }
.section-head.center { margin-left: auto; margin-right: auto; text-align: center; }

/* Dividers */
.rule { height: 1px; background: var(--ss-line); border: 0; margin: var(--space-12) 0; }
.rule-gold { width: 40px; height: 1px; background: var(--ss-gold); border: 0; margin: 0 0 var(--space-6); }
.ground-navy .rule-gold, .ground-dusk .rule-gold, .ground-image .rule-gold { background: var(--ss-gold-on-navy); }

/* ── Buttons ────────────────────────────────────────────────────────────── */
.btn {
  display: inline-flex; align-items: center; gap: 9px; cursor: pointer;
  font-family: var(--font-sans); font-size: var(--text-body-sm); font-weight: 600;
  padding: 12px 22px; border-radius: var(--radius-xs); border: 1px solid transparent;
  transition: background var(--dur-base) var(--ease-signature), color var(--dur-base) var(--ease-signature), border-color var(--dur-base) var(--ease-signature);
  white-space: nowrap; line-height: 1;
}
.btn .arw { font-family: var(--font-mono); transition: transform var(--dur-base) var(--ease-signature); }
.btn:hover .arw { transform: translateX(4px); }
.btn--primary { background: var(--ss-navy); color: var(--ss-ivory); }
.btn--primary:hover { background: var(--ss-navy-rich); color: var(--ss-ivory); }
.btn--gold { background: var(--ss-gold); color: #2A1E05; }
.btn--gold:hover { background: var(--ss-gold-dark); color: var(--ss-ivory); }
.btn--secondary { background: transparent; color: var(--ss-navy); border-color: var(--ss-line-strong); }
.btn--secondary:hover { border-color: var(--ss-navy); color: var(--ss-navy); background: var(--ss-navy-04); }
.btn--ghost { background: transparent; color: var(--ss-primary); padding-left: 4px; padding-right: 4px; }
.btn--ghost:hover { color: var(--ss-blue-hover); }
/* Keyboard parity: focus gets the same affordance as hover, arrow included. */
.btn:focus-visible .arw, .ctalink:focus-visible .arw { transform: translateX(4px); }
.btn--primary:focus-visible { background: var(--ss-navy-rich); }
.btn--gold:focus-visible { background: var(--ss-gold-dark); color: var(--ss-ivory); }
.btn--secondary:focus-visible { border-color: var(--ss-navy); background: var(--ss-navy-04); }
.ground-navy .btn--secondary, .ground-dusk .btn--secondary, .ground-image .btn--secondary { color: var(--ss-ivory); border-color: var(--ss-line-on-navy); }
.ground-navy .btn--secondary:hover, .ground-dusk .btn--secondary:hover, .ground-image .btn--secondary:hover { background: rgba(255,255,255,0.08); border-color: rgba(255,255,255,0.5); }

.ctalink {
  display: inline-flex; align-items: center; gap: 8px; font-family: var(--font-mono);
  font-size: var(--text-mono); letter-spacing: var(--tracking-mono); font-weight: 500;
  color: var(--ss-primary); text-transform: none; white-space: nowrap;
}
.ctalink .arw { transition: transform var(--dur-base) var(--ease-signature); }
.ctalink:hover .arw { transform: translateX(4px); }
.ctalink.gold { color: var(--ss-gold); }
.ground-navy .ctalink, .ground-dusk .ctalink, .ground-image .ctalink { color: var(--ss-gold-on-navy); }
.btn-row { display: flex; flex-wrap: wrap; gap: var(--space-4); align-items: center; }

/* ── Skip link ──────────────────────────────────────────────────────────── */
.skip { position: absolute; left: -999px; top: 8px; z-index: 100; background: var(--ss-navy); color: var(--ss-ivory); padding: 10px 16px; border-radius: var(--radius-xs); font-family: var(--font-mono); font-size: var(--text-mono-sm); letter-spacing: 0.06em; }
.skip:focus { left: 12px; color: var(--ss-ivory); }

/* ── Header / nav ───────────────────────────────────────────────────────── */
.site-header {
  position: sticky; top: 0; z-index: 60;
  background: rgba(255,255,255,0.88); backdrop-filter: saturate(180%) blur(12px);
  -webkit-backdrop-filter: saturate(180%) blur(12px); border-bottom: 1px solid var(--ss-line);
  transition: background var(--dur-base) var(--ease-signature), box-shadow var(--dur-base) var(--ease-signature), border-color var(--dur-base) var(--ease-signature);
}
/* Settled state once scrolled - opacity/shadow only, never height, so the
   sticky header can't nudge the page as you scroll. */
.site-header.is-scrolled {
  background: rgba(255,255,255,0.94);
  border-bottom-color: var(--ss-line-strong);
  box-shadow: 0 1px 12px -4px rgba(14,47,87,0.10);
}
.nav { max-width: var(--container-max); margin: 0 auto; padding: 0 var(--gutter); height: 66px; display: flex; align-items: center; gap: 18px; }
.logo { display: flex; align-items: center; gap: 11px; flex-shrink: 0; }
.logo img { height: 34px; width: 34px; border-radius: 5px; }
.logo-word { font-family: var(--font-serif); font-size: 19px; letter-spacing: -0.01em; color: var(--ss-navy); white-space: nowrap; }
.nav-links { display: flex; align-items: center; gap: 18px; margin-left: 4px; }
.nav-links a {
  font-size: var(--text-body-sm); font-weight: 500; color: var(--ss-text-dark); position: relative; padding: 4px 0;
  white-space: nowrap;
}
.nav-links a::after {
  content: ""; position: absolute; left: 0; right: 100%; bottom: -2px; height: 1.5px; background: var(--ss-primary);
  transition: right var(--dur-base) var(--ease-signature);
}
.nav-links a:hover { color: var(--ss-navy); }
.nav-links a:hover::after, .nav-links a[aria-current="page"]::after { right: 0; }
.nav-links a[aria-current="page"] { color: var(--ss-navy); }
/* Intermediaries sits last and reads visually secondary to the investor path. */
.nav-links a.nav-secondary { color: var(--ss-text-mid); font-weight: 400; }
.nav-links a.nav-secondary:hover { color: var(--ss-navy); }
.nav-signin { font-family: var(--font-mono); font-size: 11.5px; letter-spacing: 0.07em; text-transform: uppercase; color: var(--ss-text-mid); text-decoration: none; white-space: nowrap; padding: 10px 14px 10px 0; border-right: 1px solid var(--ss-line-strong); }
.nav-signin:hover { color: var(--ss-primary); }
@media (max-width: 1080px) { .nav-signin { display: none; } }
.nav-cta { margin-left: auto; display: flex; align-items: center; gap: 10px; padding-left: 12px; }
.nav-toggle {
  display: none; margin-left: auto; background: transparent; border: 1px solid var(--ss-line-strong);
  border-radius: var(--radius-xs); width: 42px; height: 38px; cursor: pointer; align-items: center; justify-content: center;
}
.nav-toggle span { display: block; width: 18px; height: 1.6px; background: var(--ss-navy); position: relative; transition: transform var(--dur-base) var(--ease-signature), opacity var(--dur-fast); }
.nav-toggle span::before, .nav-toggle span::after { content: ""; position: absolute; left: 0; width: 18px; height: 1.6px; background: var(--ss-navy); transition: transform var(--dur-base) var(--ease-signature); }
.nav-toggle span::before { top: -6px; }
.nav-toggle span::after { top: 6px; }
.nav-toggle[aria-expanded="true"] span { background: transparent; }
.nav-toggle[aria-expanded="true"] span::before { transform: translateY(6px) rotate(45deg); }
.nav-toggle[aria-expanded="true"] span::after { transform: translateY(-6px) rotate(-45deg); }

.mobile-menu {
  display: none; position: fixed; inset: 66px 0 0 0; z-index: 55; background: var(--ss-white);
  padding: 22px 28px 40px; overflow-y: auto; border-top: 1px solid var(--ss-line);
}
.mobile-menu.open { display: block; }
.mobile-menu a { display: block; font-family: var(--font-serif); font-size: 24px; color: var(--ss-navy); padding: 16px 0; border-bottom: 1px solid var(--ss-line); }
.mobile-menu a:hover { color: var(--ss-primary); }
.mobile-menu .btn { margin-top: 24px; width: 100%; justify-content: center; }

/* ── Cards / grids ──────────────────────────────────────────────────────── */
.grid { display: grid; gap: var(--space-6); }
.grid-2 { grid-template-columns: repeat(2, 1fr); }
.grid-3 { grid-template-columns: repeat(3, 1fr); }
.grid-4 { grid-template-columns: repeat(4, 1fr); }
.split { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); gap: var(--space-16); align-items: center; }
.split > * { min-width: 0; max-width: 100%; }
.split.narrow { gap: var(--space-12); }
.split-copy .h2 { margin-bottom: var(--space-6); }
.split-copy .lede { margin-bottom: var(--space-8); }
.split-copy > .eyebrow + .h2 { margin-top: var(--space-3); }
.split-copy > .lede + .muted { margin-top: var(--space-4); }
.support-scope-grid { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 1px; margin-top: var(--content-gap); border: 1px solid var(--ss-line-strong); background: var(--ss-line-strong); }
.support-scope-item { min-height: 198px; padding: 26px; background: var(--ss-white); }
.support-scope-item .kicker { color: var(--ss-primary); }
.support-scope-item h3 { margin: 12px 0 10px; color: var(--ss-navy); font-family: var(--font-serif); font-size: 22px; font-weight: 400; line-height: 1.15; }
.support-scope-item p { max-width: 32ch; margin: 0; color: var(--ss-text-mid); font-size: 14px; line-height: 1.6; }
.support-scope-item--cta { display: flex; flex-direction: column; justify-content: space-between; gap: 22px; background: linear-gradient(145deg, var(--ss-navy), #1c548f); color: var(--ss-ivory); text-decoration: none; transition: background .2s ease, transform .2s ease; }
.support-scope-item--cta:hover { background: linear-gradient(145deg, #0b396b, #2469a9); transform: translateY(-2px); }
.support-scope-item--cta .kicker { color: var(--ss-gold-on-navy); }
.support-scope-item--cta h3 { color: var(--ss-ivory); }
.support-scope-item--cta p { color: var(--ss-ink-on-navy-3); }
.support-scope-item--cta .ctalink { margin-top: auto; color: var(--ss-gold-on-navy); }
.support-route-note { max-width: 58ch; margin: 24px 0 0; color: var(--ss-text-mid); font-family: var(--font-mono); font-size: 11px; letter-spacing: .03em; line-height: 1.6; }
.support-fit-note { max-width: 70ch; margin: 34px 0 0; color: var(--ss-ink-on-navy-3); font-family: var(--font-serif); font-size: var(--text-body); line-height: 1.65; }
.self-qualify-quote { color: var(--ss-ivory); font-family: var(--font-serif); font-size: 19px; line-height: 1.4; }
.self-qualify-note { color: var(--ss-ink-on-navy-3); }
.self-qualify-note strong { color: var(--ss-ivory); }
/* Feature imagery settles from a whisper of scale as its row reveals. */
.split-media img { transition: transform 1100ms var(--ease-signature); }
[data-reveal]:not(.is-visible) .split-media img { transform: scale(1.022); }

.card {
  background: var(--ss-white); border: 1px solid var(--ss-line); border-radius: var(--radius-md);
  padding: var(--pad-card); box-shadow: var(--shadow-xs);
  transition: box-shadow var(--dur-base) var(--ease-signature), border-color var(--dur-base) var(--ease-signature), transform var(--dur-base) var(--ease-signature);
}
.card--link:hover, .card--link:focus-visible { box-shadow: var(--shadow-glow); border-color: var(--ss-primary-30); transform: translateY(-3px); }
/* Resource / editorial cards: the image settles in a hair on hover. Overflow is
   already clipped by .media, so the frame never changes size. */
.card--link .media img { transition: transform var(--dur-slow) var(--ease-signature); }
.card--link:hover .media img, .card--link:focus-visible .media img { transform: scale(1.035); }
.card--link .ctalink .arw, .card--link span.ctalink .arw { transition: transform var(--dur-base) var(--ease-signature); }
.card--link:hover .ctalink .arw { transform: translateX(4px); }
.card--navy { background: rgba(14,47,87,0.5); border: 1px solid var(--ss-line-on-navy); color: var(--ss-ink-on-navy-2); }
.card--navy h3 { color: var(--ss-ivory); }
.cta-audience-grid { align-items: stretch; }
.cta-audience-grid > .card { display: flex; flex-direction: column; min-height: 100%; }
.cta-audience-grid > .card > .btn { margin-top: auto; align-self: flex-start; }
.card .kicker { font-family: var(--font-mono); font-size: var(--text-mono-sm); letter-spacing: var(--tracking-eyebrow); text-transform: uppercase; color: var(--ss-primary); display: block; margin-bottom: var(--space-3); }
.card .takeaways-label { color: var(--ss-gold-dark); margin: 14px 0 8px; }
.card h3 { margin-bottom: var(--space-3); }
.card .media { border-radius: var(--radius-sm); overflow: hidden; margin: calc(var(--pad-card) * -1) calc(var(--pad-card) * -1) var(--pad-card); border-bottom: 1px solid var(--ss-line); }
.card .media img { width: 100%; aspect-ratio: 3/2; object-fit: cover; }
.card-index { font-family: var(--font-mono); font-size: var(--text-mono-sm); color: var(--ss-gold); letter-spacing: var(--tracking-mono); }
.card a.media { display: block; }
.ledger td.val.ebitda-nd { font-family: var(--font-mono); font-size: 10.5px; letter-spacing: 0.02em; line-height: 1.4; color: var(--ss-text-mid); text-transform: none; }
.empty-state { margin-top: 36px; max-width: 720px; border: 1px solid var(--ss-line); border-top: 2px solid var(--ss-gold); border-radius: var(--radius-md); background: var(--ss-white); padding: 44px 40px; }
.empty-state__mark { width: 72px; height: 72px; display: flex; align-items: center; justify-content: center; border: 1px solid var(--ss-line); border-radius: var(--radius-md); color: var(--ss-blue); margin-bottom: 24px; }
.empty-state__lead { font-family: var(--font-serif); font-size: clamp(19px, 2.4vw, 23px); line-height: 1.4; color: var(--ss-navy); margin: 0; }
.empty-state__sub { margin-top: 14px; font-size: 15px; line-height: 1.6; max-width: 60ch; }
@media (max-width: 560px) { .empty-state { padding: 32px 22px; } }

/* Numbered step path */
.steps { counter-reset: step; }
.steps.flow4 { grid-template-columns: repeat(4, 1fr); }
.step-num { font-family: var(--font-mono); font-size: var(--text-mono); color: var(--ss-gold); letter-spacing: var(--tracking-mono); display: block; margin-bottom: var(--space-4); }

/* Service group (editorial split) */
.svc-group + .svc-group { margin-top: var(--space-20); }
.svc-flow-arrow { display: flex; align-items: center; gap: 18px; margin: var(--space-14) 0 0; color: var(--ss-primary); }
.svc-flow-arrow__line { display: block; width: clamp(56px, 12vw, 164px); height: 1px; flex: 0 1 164px; background: var(--ss-gold); }
.svc-flow-arrow__text { font-family: var(--font-mono); font-size: var(--text-mono-sm); letter-spacing: 0.05em; line-height: 1.45; text-transform: uppercase; color: var(--ss-primary); }
.svc-flow-arrow__mark { font-family: var(--font-sans); font-size: 28px; line-height: 1; color: var(--ss-gold-dark); }
.svc-flow-arrow + .svc-group { margin-top: var(--space-10); }
.svc-index { font-family: var(--font-mono); font-size: var(--text-mono-sm); letter-spacing: var(--tracking-eyebrow); text-transform: uppercase; color: var(--ss-gold); display: block; margin-bottom: var(--space-4); }
.ground-texture .svc-group > div:last-child > .h3 { margin-top: var(--space-3); }
.ground-texture .svc-group > div:last-child > .h3 + .muted { margin-top: var(--space-5); }
.svc-media { border: 1px solid var(--ss-line); border-radius: var(--radius-md); overflow: hidden; background: var(--ss-mist); }
.svc-media.duo { border: 0; display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: var(--space-4); background: transparent; min-width: 0; }
.svc-media.duo img { min-width: 0; width: 100%; }
.svc-media.duo img { border: 1px solid var(--ss-line); border-radius: var(--radius-md); }
.primary-offer-grid { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: var(--space-6); }
.primary-offer-grid .card { display: flex; flex-direction: column; }
.primary-offer-grid .btn { margin-top: auto; align-self: flex-start; }
.investor-entry-grid { grid-template-columns: 1.4fr 1fr; gap: var(--space-6); align-items: stretch; }
.market-map-layout { display: grid; grid-template-columns: 1fr; gap: clamp(32px, 5vw, 64px); align-items: start; margin-top: 56px; }
.market-map-figure { margin: 0; padding: 20px; background: var(--ss-white); border: 1px solid var(--ss-line-strong); border-radius: var(--radius-md); }
.market-map-figure img { display: block; width: 100%; height: auto; }
.market-map-figure figcaption { margin-top: 14px; padding-top: 14px; border-top: 1px solid var(--ss-line); color: var(--ss-text-mid); font-family: var(--font-mono); font-size: 10.5px; letter-spacing: 0.03em; line-height: 1.5; }
.market-map-ledger { border-top: 2px solid var(--ss-gold); padding-top: 18px; }
.market-map-ledger .h3 { margin-top: 10px; }
.market-map-ledger ol { list-style: none; margin: 28px 0 0; padding: 0; display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: var(--space-6); }
.market-map-ledger li { display: block; min-width: 0; padding: 22px 20px; border: 1px solid var(--ss-line); border-top: 2px solid var(--ss-gold); border-radius: var(--radius-sm); background: var(--ss-white); }
.market-map-ledger li:last-child { border-bottom: 1px solid var(--ss-line); }
.market-map-ledger .step-num { display: inline-flex; align-items: center; justify-content: center; width: 30px; height: 30px; margin-bottom: 16px; padding: 0; border-radius: 50%; background: var(--ss-navy); color: var(--ss-ivory); font-family: var(--font-sans); font-size: 13px; font-weight: 700; letter-spacing: 0; }
.market-map-ledger li > div { min-width: 0; }
.market-map-ledger strong { display: block; color: var(--ss-navy); font-family: var(--font-serif); font-size: 19px; font-weight: 400; line-height: 1.2; overflow-wrap: anywhere; }
.market-map-ledger p { margin: 9px 0 0; color: var(--ss-text-mid); font-size: 13px; line-height: 1.55; }
.opp-load-more { display: flex; margin: 30px auto 0; }
.op-description > p + p { margin-top: 18px; }
.op-description-lead { font-size: 19px; line-height: 1.65; }
.cap-list { list-style: none; margin: var(--space-6) 0 0; padding: 0; display: grid; gap: 10px; }
.cap-list li { position: relative; padding-left: 24px; font-size: var(--text-body-sm); line-height: 1.55; color: var(--ss-text-mid); }
.cap-list li::before { content: ""; position: absolute; left: 2px; top: 9px; width: 9px; height: 9px; border: 1.5px solid var(--ss-gold); border-radius: 2px; }
.svc-details { margin-top: var(--space-5); border-top: 1px solid var(--ss-line); }
.svc-details summary { cursor: pointer; list-style: none; display: flex; align-items: center; justify-content: space-between; gap: 16px; padding: 14px 0 2px; font-family: var(--font-mono); font-size: 11px; letter-spacing: 0.06em; text-transform: uppercase; color: var(--ss-primary); }
.svc-details summary::-webkit-details-marker { display: none; }
.svc-details summary .mk { font-family: var(--font-mono); font-size: 16px; color: var(--ss-gold-dark); transition: transform var(--dur-base) var(--ease-signature); }
.svc-details[open] summary .mk { transform: rotate(45deg); }
.svc-details .cap-list { margin-top: 14px; padding-bottom: 4px; }
.svc-grid { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: var(--space-6); margin-top: var(--space-10); }
.svc-tile { display: grid; grid-template-rows: auto auto auto 1fr auto auto; border: 1px solid var(--ss-line-on-navy); border-radius: var(--radius-md); overflow: hidden; color: var(--ss-ink-on-navy-2); box-shadow: rgba(14, 47, 87, 0.06) 0 1px 2px; transition: box-shadow var(--dur-base) var(--ease-signature), border-color var(--dur-base) var(--ease-signature); }
.svc-tile:hover { border-color: rgba(255, 255, 255, 0.34); box-shadow: rgba(14, 47, 87, 0.34) 0 10px 34px -10px; }
.svc-tile.g1 { background: linear-gradient(158deg, #081e3b 0%, #0e2f57 62%, #17457c 128%); }
.svc-tile.g2 { background: linear-gradient(158deg, #0e2f57 0%, #123c6d 68%, #1b5088 130%); }
.svc-tile.g3 { background: linear-gradient(158deg, #071a34 0%, #0d2b50 60%, #14406f 126%); }
.svc-tile.g4 { background: linear-gradient(158deg, #0e2f57 0%, #16416f 70%, #1c5893 132%); }
.svc-tile.g5 { background: linear-gradient(158deg, #0a2342 0%, #0f3360 64%, #194a80 128%); }
.svc-tile.g6 { background: linear-gradient(158deg, #0c2748 0%, #113864 66%, #1a4d86 130%); }
.svc-tile .tile-media { aspect-ratio: 3 / 2; overflow: hidden; background: rgba(255, 255, 255, 0.05); border-bottom: 1px solid var(--ss-line-on-navy); }
.svc-tile .tile-media img { width: 100%; height: 100%; object-fit: cover; display: block; }
.svc-tile .tile-title { font-family: var(--font-serif); font-size: clamp(21px, 1.5vw, 25px); line-height: 1.14; letter-spacing: -0.012em; color: var(--ss-ivory); padding: 26px 26px 0; }
.svc-tile .tile-offer { font-family: var(--font-mono); font-size: 11px; letter-spacing: 0.1em; text-transform: uppercase; color: var(--ss-gold-on-navy); padding: 22px 26px 0; }
.svc-tile .tile-body { font-size: 14.5px; line-height: 1.6; color: var(--ss-ink-on-navy-3); padding: 12px 26px 0; margin: 0; }
.svc-tile details { border-top: 1px solid var(--ss-line-on-navy); margin: 24px 26px 0; padding-top: 14px; }
.svc-tile summary { list-style: none; cursor: pointer; display: flex; justify-content: space-between; align-items: center; gap: 12px; font-family: var(--font-mono); font-size: 11px; letter-spacing: 0.08em; text-transform: uppercase; color: var(--ss-ivory); }
.svc-tile summary::-webkit-details-marker { display: none; }
.svc-tile summary .mk { color: var(--ss-gold-on-navy); font-size: 15px; line-height: 1; }
.svc-tile details[open] summary .mk { transform: rotate(45deg); }
.svc-tile summary:focus-visible { outline: 2px solid var(--ss-gold-on-navy); outline-offset: 3px; }
.svc-tile details ul { list-style: none; margin: 14px 0 0; padding: 0; display: grid; gap: 9px; }
.svc-tile details li { position: relative; padding-left: 18px; font-size: 13.5px; line-height: 1.5; color: var(--ss-ink-on-navy-3); }
.svc-tile details li::before { content: ""; position: absolute; left: 0; top: 7px; width: 6px; height: 6px; border-radius: 1px; background: var(--ss-gold-on-navy); }
.svc-tile .tile-cta { padding: 22px 26px 26px; }
.svc-tile .tile-cta .btn { width: 100%; justify-content: center; }
.svc-tile .tile-cta .btn .arw { color: var(--ss-navy); transition: transform var(--dur-base) var(--ease-signature); }
.svc-tile .tile-cta .btn:hover .arw, .svc-tile .tile-cta .btn:focus-visible .arw { transform: translateX(4px); }
.network-includes-head .h2 + .lede { margin-top: var(--space-6); }
@media (max-width: 760px) {
  .svc-group + .svc-group { margin-top: var(--space-14); }
  .svc-flow-arrow { align-items: flex-start; flex-direction: column; gap: 10px; margin-top: var(--space-10); }
  .svc-flow-arrow__line { width: 56px; flex-basis: auto; }
  .svc-flow-arrow__mark { margin-top: -4px; }
  .svc-flow-arrow + .svc-group { margin-top: var(--space-10); }
}
@media (max-width: 1040px) { .svc-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); } }
@media (max-width: 700px) {
  .svc-grid { grid-template-columns: minmax(0, 1fr); }
  .svc-tile .tile-title { font-size: 22px; }
}
@media (max-width: 860px) { .market-map-ledger ol { grid-template-columns: repeat(2, minmax(0, 1fr)); } }
@media (max-width: 560px) { .market-map-ledger ol { grid-template-columns: 1fr; } }
@media (max-width: 860px) { .primary-offer-grid, .market-map-layout { grid-template-columns: 1fr; } }

/* ── Stat / trust ───────────────────────────────────────────────────────── */
.stat { text-align: left; }
.stat .fig { font-family: var(--font-serif); font-size: 46px; line-height: 1; color: var(--ss-navy); letter-spacing: -0.02em; }
.ground-navy .stat .fig, .ground-dusk .stat .fig, .ground-image .stat .fig { color: var(--ss-ivory); }
.stat .kick { font-family: var(--font-mono); font-size: var(--text-mono-sm); letter-spacing: var(--tracking-eyebrow); text-transform: uppercase; color: var(--ss-primary); display: block; margin-bottom: var(--space-3); }
.ground-navy .stat .kick, .ground-dusk .stat .kick, .ground-image .stat .kick { color: var(--ss-gold-on-navy); }
.stat .lab { font-family: var(--font-serif); font-size: var(--text-body-sm); color: var(--ss-text-mid); margin-top: var(--space-3); }
.ground-navy .stat .lab, .ground-dusk .stat .lab, .ground-image .stat .lab { color: var(--ss-ink-on-navy-3); }

.trustbar { display: flex; flex-wrap: wrap; border: 1px solid var(--ss-line); border-radius: var(--radius-md); overflow: hidden; }
.ground-navy .trustbar, .ground-dusk .trustbar, .ground-image .trustbar { border-color: var(--ss-line-on-navy); }
.trustbar > div { flex: 1 1 0; min-width: 200px; padding: var(--space-8) var(--space-8); border-left: 1px solid var(--ss-line); }
.ground-navy .trustbar > div, .ground-dusk .trustbar > div, .ground-image .trustbar > div { border-left-color: var(--ss-line-on-navy); }
.trustbar > div:first-child { border-left: 0; }
.trustbar .fig { font-family: var(--font-serif); font-size: 32px; color: var(--ss-navy); letter-spacing: -0.02em; }
.ground-navy .trustbar .fig, .ground-dusk .trustbar .fig, .ground-image .trustbar .fig { color: var(--ss-ivory); }
.trustbar .cap { font-family: var(--font-mono); font-size: var(--text-mono-sm); letter-spacing: 0.06em; text-transform: uppercase; color: var(--ss-text-mid); margin-top: var(--space-3); }
.ground-navy .trustbar .cap, .ground-dusk .trustbar .cap, .ground-image .trustbar .cap { color: var(--ss-ink-on-navy-3); }

/* ── Ledger ─────────────────────────────────────────────────────────────── */
.ledger { width: 100%; border-collapse: collapse; border: 1px solid var(--ss-line); border-radius: var(--radius-md); overflow: hidden; }
.ledger caption { font-family: var(--font-mono); font-size: var(--text-mono-sm); letter-spacing: var(--tracking-eyebrow); text-transform: uppercase; color: var(--ss-primary); text-align: left; padding: 0 0 var(--space-4); }
.ledger th { background: var(--ss-navy); color: var(--ss-ivory); font-family: var(--font-mono); font-size: var(--text-mono-sm); letter-spacing: 0.08em; text-transform: uppercase; font-weight: 500; text-align: left; padding: 12px 18px; }
.ledger td { padding: 13px 18px; border-top: 1px solid var(--ss-line); font-size: var(--text-body-sm); }
.ledger td.val { font-family: var(--font-mono); font-feature-settings: "tnum"; text-align: right; color: var(--ss-navy); }
.ledger tr:nth-child(even) td { background: var(--ss-navy-02); }
.ledger .total td { border-top: 2px solid var(--ss-navy); font-weight: 600; background: var(--ss-mist); }
.ledger .total td.val { color: var(--ss-navy); }
/* Ledgers nested in cards must be able to shrink with their column, otherwise
   min-content cell width pushes the grid wider than the viewport. */
.card .ledger { table-layout: fixed; width: 100%; }
.card .ledger td { overflow-wrap: anywhere; }

/* ── Badge / chips ──────────────────────────────────────────────────────── */
.badge { display: inline-flex; align-items: center; gap: 6px; font-family: var(--font-mono); font-size: var(--text-mono-sm); letter-spacing: 0.06em; text-transform: uppercase; padding: 5px 10px; border-radius: var(--radius-xs); }
.badge--navy { background: var(--ss-navy); color: var(--ss-ivory); }
.badge--gold { background: var(--ss-gold-08); color: var(--ss-gold-dark); border: 1px solid var(--ss-gold-20); }
.badge--blue { background: var(--ss-primary-12); color: var(--ss-blue-hover); }
.badge--mist { background: var(--ss-mist); color: var(--ss-slate); border: 1px solid var(--ss-line); }
.badge--success { background: var(--ss-success-light); color: var(--ss-success); }

.chips { display: flex; flex-wrap: wrap; gap: 10px; }
.chip {
  font-family: var(--font-mono); font-size: var(--text-mono-sm); letter-spacing: 0.06em; text-transform: uppercase;
  padding: 8px 16px; border-radius: var(--radius-pill); border: 1px solid var(--ss-line-strong); background: var(--ss-white);
  color: var(--ss-slate); cursor: pointer; transition: all var(--dur-base) var(--ease-signature);
}
.chip[aria-pressed="true"], .chip:hover { border-color: var(--ss-navy); background: var(--ss-navy); color: var(--ss-ivory); }

/* ── Compliance callout ─────────────────────────────────────────────────── */
.compliance {
  border: 1px solid var(--ss-line-strong); border-top: 2px solid var(--ss-gold); border-radius: var(--radius-sm);
  padding: var(--space-6) var(--space-8); background: var(--ss-mist);
}
.compliance .lab { font-family: var(--font-mono); font-size: var(--text-mono-sm); letter-spacing: var(--tracking-eyebrow); text-transform: uppercase; color: var(--ss-gold-dark); display: block; margin-bottom: var(--space-3); }
.compliance p { font-size: var(--text-body-sm); color: var(--ss-text-mid); margin: 0; }
.ground-navy .compliance, .ground-dusk .compliance { background: rgba(255,255,255,0.04); border-color: var(--ss-line-on-navy); border-top-color: var(--ss-gold-on-navy); }
.ground-navy .compliance p, .ground-dusk .compliance p { color: var(--ss-ink-on-navy-3); }

/* ── Form fields ────────────────────────────────────────────────────────── */
.field-lab { display: block; font-family: var(--font-mono); font-size: 11px; letter-spacing: 0.08em; text-transform: uppercase; color: var(--ss-slate); margin-bottom: 6px; }
.field { width: 100%; padding: 11px 14px; border: 1px solid var(--ss-line-strong); border-radius: var(--radius-xs); font-family: var(--font-sans); font-size: 15px; color: var(--ss-navy); background: var(--ss-white); transition: border-color var(--dur-base) var(--ease-signature), box-shadow var(--dur-base) var(--ease-signature); }
.field:focus { outline: none; border-color: var(--ss-primary); box-shadow: 0 0 0 3px var(--ss-primary-12); }
select.field { appearance: none; background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='12' height='8' viewBox='0 0 12 8' fill='none' stroke='%235B6B80' stroke-width='1.5'%3E%3Cpath d='M1 1l5 5 5-5'/%3E%3C/svg%3E"); background-repeat: no-repeat; background-position: right 14px center; padding-right: 36px; }
.field-help { font-family: var(--font-sans); font-size: var(--text-body-sm); color: var(--ss-text-mid); margin: 6px 0 0; }

/* ── Hero progression path (on navy scrim) ──────────────────────────────── */
.hero-path { list-style: none; margin: 0; padding: 0; display: grid; grid-template-columns: repeat(3, 1fr); gap: 0; border-top: 1px solid var(--ss-line-on-navy); }
.hero-path li { padding: 22px 32px 0 0; position: relative; }
.hero-path li + li { padding-left: 32px; border-left: 1px solid var(--ss-line-on-navy); }
.hero-path .step { font-family: var(--font-mono); font-size: 12px; letter-spacing: 0.12em; color: var(--ss-gold-on-navy); display: block; }
.hero-path .lab { font-family: var(--font-serif); font-size: 20px; color: var(--ss-ivory); display: block; margin: 10px 0 8px; letter-spacing: -0.01em; }
.hero-path p { font-family: var(--font-sans); font-size: 14px; line-height: 1.55; color: var(--ss-ink-on-navy-3); margin: 0; max-width: 34ch; }
/* Directional arrows marking the ordered hero flow. */
.hero-path.flow li + li::before { content: "\2192"; position: absolute; left: 10px; top: 24px; font-family: var(--font-mono); font-size: 15px; color: var(--ss-gold-on-navy); }
.hero-path.flow li + li { padding-left: 44px; }
@media (max-width: 760px) {
  .hero-path { grid-template-columns: 1fr; }
  .hero-path li { padding: 20px 0 0; }
  .hero-path li + li { padding-left: 0; border-left: 0; border-top: 1px solid var(--ss-line-on-navy); }
  .hero-path.flow li + li::before { top: -13px; left: 0; }
}
.ground-navy .compliance .lab, .ground-dusk .compliance .lab { color: var(--ss-gold-on-navy); }

/* ── Blue-gradient surface cards ────────────────────────────────────────── */
/* Shallow directional navy to shore-blue wash for selected choice/strategy/CTA
   cards. Ivory ink and light-gold accents keep contrast well clear. */
.card--gradient { background: linear-gradient(150deg, var(--ss-navy-deep) 0%, var(--ss-navy) 48%, #1c548f 128%); border: 1px solid var(--ss-line-on-navy); color: var(--ss-ink-on-navy-2); }
.card--gradient h2, .card--gradient h3, .card--gradient h4 { color: var(--ss-ivory); }
.card--gradient .kicker, .card--gradient .svc-index, .card--gradient .eyebrow { color: var(--ss-gold-on-navy); }
.card--gradient p { color: var(--ss-ink-on-navy-3); }
.card--gradient .ctalink { color: var(--ss-gold-on-navy); }
.card--gradient .cap-list li { color: var(--ss-ink-on-navy-3); }
.card--gradient .cap-list li::before { border-color: var(--ss-gold-on-navy); }

/* Resource guide cards use related but distinct blue washes so the three
   actions scan as a set without collapsing into one repeated surface. */
.resource-tool-card { color: var(--ss-ink-on-navy-2); border-color: var(--ss-line-on-navy); }
.resource-tool-card h3 { color: var(--ss-ivory); }
.resource-tool-card p { color: var(--ss-ink-on-navy-3); }
.resource-tool-card .kicker, .resource-tool-card .ctalink { color: var(--ss-gold-on-navy); }
.resource-tool-card .media { border-bottom-color: var(--ss-line-on-navy); background: rgba(8,30,59,0.12); }
.resource-tool-card--one { background: linear-gradient(145deg, var(--ss-navy-deep) 0%, var(--ss-navy) 58%, var(--ss-primary) 132%); }
.resource-tool-card--two { background: linear-gradient(145deg, var(--ss-navy-mid) 0%, var(--ss-primary) 62%, var(--ss-blue-bright) 138%); }
.resource-tool-card--three { background: linear-gradient(145deg, var(--ss-navy) 0%, var(--ss-blue-hover) 54%, var(--ss-blue-bright) 136%); }
.resource-tool-card:hover, .resource-tool-card:focus-visible { border-color: var(--ss-gold-on-navy); box-shadow: 0 14px 32px -18px rgba(8,30,59,0.48); }

/* Featured resource is an editorial teaser. The full article lives on the
   linked insight route, keeping this index page useful and scannable. */
.featured-insight { display: grid; grid-template-columns: minmax(0, 1.2fr) minmax(240px, 0.8fr); gap: var(--space-10); align-items: center; border: 1px solid var(--ss-line); border-top: 2px solid var(--ss-gold); border-radius: var(--radius-md); background: var(--ss-mist); padding: var(--space-8); }
.resource-category-nav { padding-top: clamp(48px, 6vw, 76px); padding-bottom: clamp(34px, 4vw, 56px); }
.resources-featured-section { padding-top: clamp(34px, 4vw, 56px); }
.featured-insight .eyebrow { margin-bottom: var(--space-3); }
.featured-insight h2 { margin-bottom: var(--space-4); }
.featured-insight .featured-meta { font-family: var(--font-mono); font-size: 12px; letter-spacing: 0.06em; color: var(--ss-text-mid); margin: 0 0 var(--space-5); }
.featured-insight .lede { max-width: 58ch; margin-bottom: var(--space-5); }
.featured-insight .featured-excerpt { max-width: 62ch; color: var(--ss-text-mid); margin-bottom: var(--space-6); }
.featured-insight-media { margin: 0; border: 1px solid var(--ss-line); border-radius: var(--radius-sm); overflow: hidden; background: var(--ss-white); }
.featured-insight-media img { width: 100%; aspect-ratio: 4 / 3; object-fit: cover; }
.featured-insight-media figcaption { padding: var(--space-3) var(--space-4); font-family: var(--font-mono); font-size: 11px; line-height: 1.45; color: var(--ss-text-mid); }
.resource-utility-cta { margin-top: clamp(42px, 5vw, 64px); }

/* ── Directional flow connectors ────────────────────────────────────────── */
/* Gold arrows placed in the grid gap to mark an ordered reading flow. On mobile
   (single column) they rotate to point down. Decorative, aria-hidden in markup. */
.flow { position: relative; }
.flow > * { position: relative; }
.flow.arrows-2 > *:not(:last-child)::after,
.flow.arrows-3 > *:not(:last-child)::after,
.flow.arrows-4 > *:not(:last-child)::after {
  content: "\2192"; position: absolute; top: 50%; right: calc(var(--space-6) * -1);
  width: var(--space-6); text-align: center; transform: translate(50%, -50%);
  font-family: var(--font-mono); font-size: 17px; color: var(--ss-gold); pointer-events: none; z-index: 2;
}
.ground-navy .flow.arrows-2 > *::after, .ground-navy .flow.arrows-3 > *::after, .ground-navy .flow.arrows-4 > *::after,
.ground-dusk .flow.arrows-2 > *::after, .ground-dusk .flow.arrows-3 > *::after, .card--gradient .flow > *::after { color: var(--ss-gold-on-navy); }
@media (max-width: 860px) {
  .flow.arrows-2 > *:not(:last-child)::after, .flow.arrows-3 > *:not(:last-child)::after, .flow.arrows-4 > *:not(:last-child)::after {
    top: auto; right: 50%; bottom: calc(var(--space-6) * -1); transform: translate(50%, 50%) rotate(90deg);
  }
}
@media (max-width: 620px) {
  /* Single-column stacks: arrows still point down between rows. */
  .flow.arrows-2 > *:not(:last-child)::after, .flow.arrows-3 > *:not(:last-child)::after, .flow.arrows-4 > *:not(:last-child)::after { bottom: calc(var(--space-6) * -1); }
}

/* ── Buy box / thesis ───────────────────────────────────────────────────── */
.buybox { display: grid; grid-template-columns: 1fr 1fr; gap: var(--space-6); }
/* Five-up sourcing flow that collapses cleanly instead of overflowing. */
.steps.flow5 { grid-template-columns: repeat(5, 1fr); }
@media (max-width: 1080px) { .steps.flow5 { grid-template-columns: repeat(3, 1fr); } }
@media (max-width: 620px) { .steps.flow5 { grid-template-columns: 1fr; } }
@media (max-width: 1080px) { .steps.flow4 { grid-template-columns: repeat(2, 1fr); } }
@media (max-width: 620px) { .steps.flow4 { grid-template-columns: 1fr; } }
.buybox .crit { border: 1px solid var(--ss-line); border-top: 2px solid var(--ss-gold); border-radius: var(--radius-md); padding: var(--pad-card); background: var(--ss-white); }
.buybox .crit .k { font-family: var(--font-mono); font-size: var(--text-mono-sm); letter-spacing: var(--tracking-eyebrow); text-transform: uppercase; color: var(--ss-primary); display: block; margin-bottom: var(--space-3); }
.buybox .crit .v { font-family: var(--font-serif); font-size: clamp(24px, 3vw, 32px); color: var(--ss-navy); line-height: 1.1; letter-spacing: -0.01em; }
.buybox .crit .n { font-size: var(--text-body-sm); color: var(--ss-text-mid); margin: var(--space-3) 0 0; }
.buybox .crit .v .ss-sym { color: var(--ss-gold); }
.sector-focus { list-style: none; margin: 18px auto 0; padding: 0; max-width: 1120px; display: flex; flex-wrap: wrap; justify-content: center; gap: var(--space-4); }
.sector-focus > li { min-width: 0; border: 1px solid var(--ss-line); border-top: 2px solid var(--ss-gold); border-radius: var(--radius-sm); padding: var(--space-5) var(--space-4); background: var(--ss-white); }
.sector-focus > li { flex: 0 1 calc((100% - (var(--space-4) * 2)) / 3); max-width: 352px; }
.sector-focus .sector-icon { display: grid; place-items: center; width: 42px; height: 42px; margin-bottom: 16px; border: 1px solid var(--ss-line-strong); border-radius: var(--radius-xs); background: var(--ss-mist); color: var(--ss-primary); }
.sector-focus .sector-icon svg { width: 21px; height: 21px; stroke-width: 1.6; }
.sector-focus .sn { font-family: var(--font-mono); font-size: var(--text-mono-sm); color: var(--ss-gold); letter-spacing: 0.08em; display: block; margin-bottom: 8px; }
.sector-focus .st { display: block; font-family: var(--font-serif); font-size: 19px; color: var(--ss-navy); line-height: 1.2; }
.sector-focus .sector-niches { list-style: none; margin: 18px 0 0; padding: 14px 0 0; border-top: 1px solid var(--ss-line); display: grid; gap: 8px; }
.sector-focus .sector-niches > li { position: relative; padding-left: 14px; color: var(--ss-text-mid); font-family: var(--font-sans); font-size: 12.5px; line-height: 1.35; }
.sector-focus .sector-niches > li::before { content: ""; position: absolute; left: 0; top: 7px; width: 5px; height: 5px; border-radius: 50%; background: var(--ss-gold); }
.screen-cols { display: grid; grid-template-columns: 1fr 1fr; gap: var(--space-6); }
.screen-col { border: 1px solid var(--ss-line); border-radius: var(--radius-md); padding: var(--pad-card); background: var(--ss-white); }
.screen-col h3 { display: flex; align-items: center; gap: 10px; font-size: 19px; margin-bottom: var(--space-4); }
.screen-col .mk { font-family: var(--font-mono); font-size: 15px; }
.screen-col.in .mk { color: var(--ss-success); }
.screen-col.out .mk { color: var(--ss-text-mid); }
.screen-col ul { list-style: none; margin: 0; padding: 0; display: grid; gap: 10px; }
.screen-col li { position: relative; padding-left: 22px; font-size: var(--text-body-sm); line-height: 1.5; color: var(--ss-text-mid); }
.screen-col li::before { content: ""; position: absolute; left: 2px; top: 8px; width: 8px; height: 8px; border-radius: 2px; }
.screen-col.in li::before { background: var(--ss-success); }
.screen-col.out li::before { background: var(--ss-line-strong); }
@media (max-width: 860px) {
  .buybox, .screen-cols { grid-template-columns: 1fr; }
  .sector-focus > li { flex-basis: calc((100% - var(--space-4)) / 2); max-width: none; }
}
@media (max-width: 560px) { .sector-focus > li { flex-basis: 100%; } }

/* ── Opportunity library ────────────────────────────────────────────────── */
.opp-filter { display: flex; flex-wrap: wrap; gap: 10px; margin-top: 32px; }
.opp-filter .chip { font-family: var(--font-mono); font-size: 12px; letter-spacing: 0.06em; text-transform: uppercase; padding: 8px 16px; border: 1px solid var(--ss-line-strong); border-radius: 999px; background: var(--ss-white); color: var(--ss-text-mid); cursor: pointer; transition: all var(--dur-fast) var(--ease-signature); }
.opp-filter .chip:hover { border-color: var(--ss-primary); color: var(--ss-primary); }
.opp-filter .chip[aria-pressed="true"] { background: var(--ss-navy); border-color: var(--ss-navy); color: var(--ss-ivory); }
.opp-grid { display: grid; grid-template-columns: repeat(3, 1fr); gap: var(--space-6); margin-top: 32px; }
.opp-card { display: flex; flex-direction: column; border: 1px solid var(--ss-line); border-radius: var(--radius-md); background: var(--ss-white); overflow: hidden; box-shadow: 0 1px 2px rgba(14,47,87,0.04); transition: box-shadow var(--dur-base) var(--ease-signature), border-color var(--dur-base); }
.opp-card:hover { border-color: var(--ss-primary-30); box-shadow: 0 8px 32px -8px rgba(47,119,196,0.12); }
.opp-card .media { aspect-ratio: 3 / 2; overflow: hidden; border-bottom: 1px solid var(--ss-line); background: var(--ss-mist); }
.opp-card .media img { width: 100%; height: 100%; object-fit: cover; filter: saturate(0.9) contrast(0.97) brightness(0.98); }
.opp-card .body { padding: 22px 22px 24px; display: flex; flex-direction: column; flex: 1; }
.opp-card .meta { font-family: var(--font-mono); font-size: 11px; letter-spacing: 0.07em; text-transform: uppercase; color: var(--ss-primary); margin-bottom: 8px; }
.opp-card h3 { font-family: var(--font-serif); font-size: 20px; line-height: 1.15; letter-spacing: -0.01em; color: var(--ss-navy); }
.opp-card .loc { font-size: 13px; color: var(--ss-text-mid); margin-top: 6px; }
.opp-fin { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); gap: 1px; background: var(--ss-line); border: 1px solid var(--ss-line); border-radius: var(--radius-sm); overflow: hidden; margin: 18px 0 14px; }
.opp-fin div { background: var(--ss-white); padding: 12px 14px; }
.opp-fin .k { font-family: var(--font-mono); font-size: 10px; letter-spacing: 0.06em; text-transform: uppercase; color: var(--ss-text-mid); display: block; margin-bottom: 4px; }
.opp-fin .v { font-family: var(--font-mono); font-size: clamp(12px, 1.15vw, 15px); color: var(--ss-navy); font-feature-settings: "tnum"; display: block; white-space: nowrap; }
.opp-fin .v .ss-sym { color: var(--ss-gold); }
.opp-card .bench { font-size: 12px; color: var(--ss-text-mid); line-height: 1.45; padding: 10px 12px; background: var(--ss-mist); border-radius: var(--radius-sm); margin-bottom: 12px; }
.opp-card .summary { font-size: 13.5px; line-height: 1.55; color: var(--ss-text-mid); flex: 1; }
.opp-card .req { margin-top: 18px; }
.opportunities-section-head { max-width: 78ch; }
.opportunities-section-head .lede { max-width: 70ch; }
.opp-discovery-tools { margin-top: clamp(44px, 5vw, 64px); padding: 22px 24px 24px; border: 1px solid var(--ss-line); border-top: 2px solid var(--ss-gold); background: var(--ss-mist); }
.opp-search-row { display: grid; grid-template-columns: minmax(0, 1fr) minmax(210px, 240px); gap: 16px; align-items: end; }
.opp-search-row .field-lab, .opp-criteria-row .field-lab { display: block; margin-bottom: 8px; }
.opp-filter-row { display: flex; flex-wrap: wrap; gap: 12px 18px; align-items: center; margin-top: 22px; padding-top: 18px; border-top: 1px solid var(--ss-line); }
.opp-filter-row .opp-filter { margin-top: 0; }
.opp-filter-label { color: var(--ss-navy); font-family: var(--font-mono); font-size: 10px; letter-spacing: .08em; text-transform: uppercase; }
.opp-map-filter { display: grid; grid-template-columns: minmax(230px, .7fr) minmax(0, 1.3fr); gap: 26px; margin-top: 22px; padding-top: 22px; border-top: 1px solid var(--ss-line); }
.opp-map-filter-copy h3 { margin: 8px 0 0; color: var(--ss-navy); font-family: var(--font-serif); font-size: clamp(22px, 2vw, 30px); font-weight: 400; line-height: 1.12; }
.opp-map-filter-copy > p:not(.opp-map-selection) { max-width: 38ch; margin: 10px 0 0; color: var(--ss-text-mid); font-size: 13px; line-height: 1.55; }
.opp-map-frame { min-width: 0; padding: 14px 14px 10px; background: var(--ss-white); border: 1px solid var(--ss-line-strong); border-radius: var(--radius-sm); }
#opp-map-svg { display: block; width: 100%; height: auto; min-height: 230px; aspect-ratio: 959 / 593; border-radius: var(--radius-xs); }
.opp-map-note { margin: 8px 2px 0; color: var(--ss-text-mid); font-size: 11px; line-height: 1.45; }
.opp-region-summary { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 7px; margin-top: 18px; }
.opp-region-chip { display: grid; gap: 2px; padding: 8px 9px; background: rgba(255,255,255,.72); border: 1px solid var(--ss-line); border-radius: var(--radius-xs); }
.opp-region-chip strong { color: var(--ss-navy); font-family: var(--font-mono); font-size: 9px; letter-spacing: .06em; text-transform: uppercase; }
.opp-region-chip span { color: var(--ss-text-mid); font-family: var(--font-mono); font-size: 10px; }
.opp-map-selection { margin: 16px 0 0; color: var(--ss-navy); font-family: var(--font-mono); font-size: 10px; letter-spacing: .04em; text-transform: uppercase; }
.opp-state-legend { display: flex; flex-wrap: wrap; gap: 6px; margin-top: 10px; }
.opp-state-chip { display: inline-flex; align-items: center; gap: 5px; padding: 6px 8px; color: var(--ss-navy); background: var(--ss-white); border: 1px solid var(--ss-line-strong); border-radius: 999px; font-family: var(--font-mono); font-size: 10px; letter-spacing: .05em; cursor: pointer; transition: background .2s ease, border-color .2s ease, color .2s ease; }
.opp-state-chip span { color: var(--ss-text-mid); font-size: 9px; }
.opp-state-chip:hover, .opp-state-chip:focus-visible { border-color: var(--ss-blue); outline: none; }
.opp-state-chip[aria-pressed="true"] { color: var(--ss-white); background: var(--ss-navy); border-color: var(--ss-navy); }
.opp-state-chip[aria-pressed="true"] span { color: var(--ss-gold-soft); }
.opp-criteria-row { display: grid; grid-template-columns: repeat(2, minmax(0, 220px)) 1fr; gap: 12px 16px; align-items: end; margin-top: 18px; }
.opp-criteria-row .ctalink { justify-self: end; }
.opp-results-bar { display: flex; justify-content: space-between; gap: 16px; align-items: baseline; margin-top: 26px; padding-bottom: 14px; border-bottom: 1px solid var(--ss-line); }
.opp-results-label { color: var(--ss-navy); font-family: var(--font-serif); font-size: 19px; }
.opp-results-bar #opp-count { margin: 0; }
.opp-grid { margin-top: 24px; }
.calendly-shell { min-height: 760px; margin-top: 36px; overflow: hidden; background: #fff; border: 1px solid var(--ss-line); border-radius: var(--radius-md); box-shadow: 0 1px 2px rgba(14,47,87,0.04); }
.calendly-inline-widget { min-width: 320px; height: 760px; }
.calendly-fallback { padding: 32px; color: var(--ss-text-mid); }
.calendar-note { margin-top: 12px; text-align: center; }
/* Narrowest three-up band: stack the two figures so neither is clipped. */
@media (min-width: 901px) and (max-width: 1180px) {
  .opp-fin { grid-template-columns: minmax(0, 1fr); }
}
@media (max-width: 900px) { .opp-grid { grid-template-columns: 1fr; } .calendly-shell { min-height: 720px; } .calendly-inline-widget { height: 720px; } }
@media (max-width: 720px) {
  .opp-search-row, .opp-criteria-row { grid-template-columns: 1fr; }
  .opp-map-filter { grid-template-columns: 1fr; }
  #opp-map-svg { min-height: 180px; }
  .opp-results-bar { display: block; }
  .opp-results-bar #opp-count { margin-top: 6px; }
  .opp-criteria-row .ctalink { justify-self: start; }
}

/* Opportunity detail modal */
.opp-modal { position: fixed; inset: 0; z-index: 210; background: rgba(8,30,59,0.55); backdrop-filter: blur(3px); -webkit-backdrop-filter: blur(3px); display: none; align-items: center; justify-content: center; padding: 24px; }
.opp-modal.open { display: flex; }
.opp-modal .panel { background: var(--ss-white); border-radius: var(--radius-md); max-width: 640px; width: 100%; max-height: calc(100vh - 48px); overflow-y: auto; position: relative; box-shadow: 0 24px 70px -24px rgba(8,30,59,0.5); padding: 36px; }
.opp-modal .x { position: absolute; top: 16px; right: 16px; width: 38px; height: 38px; border-radius: var(--radius-xs); border: 1px solid var(--ss-line); background: var(--ss-white); cursor: pointer; font-size: 20px; color: var(--ss-navy); }
.opp-modal .evi { width: 100%; border-collapse: collapse; margin: 20px 0; }
.opp-modal .evi th, .opp-modal .evi td { text-align: left; padding: 11px 0; border-bottom: 1px solid var(--ss-line); font-family: var(--font-mono); font-size: 13px; }
.opp-modal .evi th { color: var(--ss-text-mid); font-weight: 400; text-transform: uppercase; letter-spacing: 0.05em; font-size: 10.5px; }
.opp-modal .evi td { color: var(--ss-navy); text-align: right; font-feature-settings: "tnum"; }
.opp-modal .evi .ss-sym { color: var(--ss-gold); }

/* ── Newsletter dialog ──────────────────────────────────────────────────── */
.modal-open { overflow: hidden; }
.nl-backdrop { position: fixed; inset: 0; z-index: 200; background: rgba(8,30,59,0.55); backdrop-filter: blur(3px); -webkit-backdrop-filter: blur(3px); display: none; align-items: center; justify-content: center; padding: 24px; opacity: 0; transition: opacity var(--dur-base) var(--ease-signature); }
.nl-backdrop.open { display: flex; opacity: 1; }
.nl-dialog { background: var(--ss-white); border-radius: var(--radius-md); max-width: 760px; width: 100%; max-height: calc(100vh - 48px); overflow-y: auto; position: relative; box-shadow: 0 24px 70px -24px rgba(8,30,59,0.5); transform: translateY(10px); transition: transform var(--dur-base) var(--ease-signature); }
.nl-backdrop.open .nl-dialog { transform: none; }
.nl-illustration { height: 148px; overflow: hidden; border-bottom: 1px solid var(--ss-line); background: var(--ss-mist); }
.nl-illustration img { width: 100%; height: 100%; display: block; object-fit: cover; object-position: 58% 58%; }
.nl-head { padding: 32px 36px 20px; border-bottom: 1px solid var(--ss-line); }
.nl-head .eyebrow { margin-bottom: var(--space-3); }
.nl-head h2 { font-size: 26px; }
.nl-head p { margin: 10px 0 0; font-size: var(--text-body-sm); color: var(--ss-text-mid); max-width: 56ch; }
.nl-body { padding: 28px 36px 32px; }
.nl-paths { display: grid; grid-template-columns: 1fr 1fr; gap: var(--space-5); }
.nl-path { border-radius: var(--radius-md); padding: 24px; display: flex; flex-direction: column; }
.nl-path h3 { font-size: 19px; margin-bottom: 8px; }
.nl-path .lead { font-size: var(--text-body-sm); line-height: 1.5; margin-bottom: 16px; }
.nl-path form { display: flex; flex-direction: column; gap: 12px; margin-top: auto; }
.nl-path .consent { display: flex; gap: 9px; align-items: flex-start; font-size: 12.5px; line-height: 1.45; color: var(--ss-ink-on-navy-3); }
.nl-path .consent input { margin-top: 2px; flex-shrink: 0; }
.nl-path .btn { width: 100%; justify-content: center; }
.nl-note { font-family: var(--font-mono); font-size: var(--text-mono-sm); letter-spacing: 0.03em; color: var(--ss-ink-on-navy-3); margin: 16px 0 0; line-height: 1.5; }
.nl-success { display: none; text-align: center; padding: 20px 8px 8px; }
.nl-success .mk { width: 46px; height: 46px; border-radius: 50%; border: 1.5px solid var(--ss-gold-on-navy); color: var(--ss-gold-on-navy); display: flex; align-items: center; justify-content: center; margin: 0 auto 14px; font-size: 20px; }
.nl-path.done form, .nl-path.done .lead { display: none; }
.nl-path.done .nl-success { display: block; }
.nl-close { position: absolute; top: 16px; right: 16px; width: 38px; height: 38px; border-radius: var(--radius-xs); border: 1px solid var(--ss-line); background: var(--ss-white); cursor: pointer; font-size: 20px; color: var(--ss-navy); display: flex; align-items: center; justify-content: center; z-index: 3; }
.nl-close:hover { background: var(--ss-mist); }
.nl-arrow { text-align: center; font-family: var(--font-mono); color: var(--ss-gold); font-size: 16px; align-self: center; }
@media (max-width: 640px) {
  .nl-paths { grid-template-columns: 1fr; }
  .nl-head, .nl-body { padding-left: 22px; padding-right: 22px; }
}
@media (prefers-reduced-motion: reduce) {
  .nl-backdrop, .nl-dialog { transition: none; }
  .nl-dialog { transform: none; }
}

/* Single-audience dialog variant */
.nl-single { max-width: 520px; }
.nl-single .nl-body { padding-top: 24px; }
.nl-single form { display: flex; flex-direction: column; gap: 12px; }
.nl-single .consent { display: flex; gap: 9px; align-items: flex-start; font-size: 13px; line-height: 1.45; color: var(--ss-text-mid); margin-top: 4px; }
.nl-single .consent input { margin-top: 3px; flex-shrink: 0; }
.nl-single .btn { width: 100%; justify-content: center; }
.nl-tertiary { align-self: center; margin-top: 4px; }
.nl-single .nl-success { display: none; text-align: center; padding: 12px 4px 4px; }
.nl-single .nl-success .mk { width: 46px; height: 46px; border-radius: 50%; border: 1.5px solid var(--ss-gold); color: var(--ss-gold); display: flex; align-items: center; justify-content: center; margin: 0 auto 14px; font-size: 20px; }
.nl-single .nl-success h3 { font-family: var(--font-serif); font-size: 20px; color: var(--ss-navy); margin-bottom: 6px; }
.nl-single .nl-success p { font-size: 13.5px; color: var(--ss-text-mid); line-height: 1.55; margin: 0; }
.nl-single.done form { display: none; }
.nl-single.done .nl-success { display: block; }
.nl-single .nl-note { font-family: var(--font-mono); font-size: var(--text-mono-sm); letter-spacing: 0.03em; color: var(--ss-text-mid); line-height: 1.5; margin: 20px 0 0; padding-top: 16px; border-top: 1px solid var(--ss-line); }
@media (max-width: 640px) {
  .nl-illustration { height: 118px; }
  .nl-illustration img { object-position: 58% 60%; }
}

/* Paginated criteria flow */
.flow-steps { display: flex; align-items: center; gap: 10px; margin-bottom: 24px; }
.flow-steps .sn { font-family: var(--font-mono); font-size: 11px; letter-spacing: 0.08em; text-transform: uppercase; color: var(--ss-gold-on-navy); }
.flow-bar { flex: 1; height: 2px; background: rgba(255,255,255,0.18); border-radius: 2px; overflow: hidden; }
.flow-bar span { display: block; width: 100%; height: 100%; background: var(--ss-gold-on-navy); transform: scaleX(0.3333); transform-origin: left center; transition: transform var(--dur-base) var(--ease-signature); }
.step-panel { display: none; }
.step-panel.active { display: block; }
.step-nav { display: flex; gap: 12px; margin-top: 20px; }
.step-nav .btn { flex: 1; justify-content: center; }
.btn[disabled] { opacity: 0.45; pointer-events: none; }
.network-conditional[hidden], #na-profile-wrap[hidden] { display: none !important; }
.network-conditional--nested { margin-top: 2px; padding-top: 2px; }
.service-fieldset { min-width: 0; margin: 0; padding: 14px; border: 1px solid var(--ss-line); border-radius: var(--radius-sm); background: var(--ss-mist); }
.service-fieldset[aria-invalid="true"] { border-color: var(--ss-gold-dark); box-shadow: 0 0 0 2px rgba(201,169,107,0.18); }
.service-fieldset legend { padding: 0; margin-bottom: 10px; }
.service-choice-grid { display: grid; grid-template-columns: 1fr 1fr; gap: 9px 14px; }
.service-choice-grid .consent { margin: 0; color: var(--ss-text-mid); }
.service-choice-grid input { margin-top: 3px; flex-shrink: 0; }
.ground-navy #intake-form [aria-invalid="true"] { border-color: var(--ss-gold-dark); }
.ground-navy #intake-form input[aria-invalid="true"], .ground-navy #intake-form select[aria-invalid="true"], .ground-navy #intake-form textarea[aria-invalid="true"] { box-shadow: 0 0 0 2px rgba(201,169,107,0.18); }
.crit-summary { list-style: none; margin: 18px 0 0; padding: 0; display: grid; gap: 1px; background: var(--ss-line); border: 1px solid var(--ss-line); border-radius: var(--radius-sm); overflow: hidden; }
.crit-summary li { background: var(--ss-white); padding: 11px 14px; display: flex; justify-content: space-between; gap: 16px; font-size: 13.5px; }
.crit-summary .k { font-family: var(--font-mono); font-size: 10.5px; letter-spacing: 0.06em; text-transform: uppercase; color: var(--ss-text-mid); }
.crit-summary .v { color: var(--ss-navy); text-align: right; }
.preview-note { font-family: var(--font-mono); font-size: var(--text-mono-sm); letter-spacing: 0.03em; color: var(--ss-text-mid); line-height: 1.5; border-left: 2px solid var(--ss-gold); padding-left: 14px; margin-top: 20px; }

/* Opportunity request dialog */
.req-backdrop { position: fixed; inset: 0; z-index: 220; background: rgba(8,30,59,0.55); backdrop-filter: blur(3px); -webkit-backdrop-filter: blur(3px); display: none; align-items: center; justify-content: center; padding: 24px; }
.req-backdrop.open { display: flex; }
.req-dialog { background: var(--ss-white); border-radius: var(--radius-md); max-width: 520px; width: 100%; max-height: calc(100vh - 48px); overflow-y: auto; position: relative; box-shadow: 0 24px 70px -24px rgba(8,30,59,0.5); padding: 34px; }
.req-dialog .x { position: absolute; top: 16px; right: 16px; width: 38px; height: 38px; border-radius: var(--radius-xs); border: 1px solid var(--ss-line); background: var(--ss-white); cursor: pointer; font-size: 20px; color: var(--ss-navy); }
.req-dialog h2 { font-family: var(--font-serif); font-size: 24px; color: var(--ss-navy); letter-spacing: -0.01em; }
.req-dialog .subj { font-family: var(--font-mono); font-size: 11px; letter-spacing: 0.07em; text-transform: uppercase; color: var(--ss-gold); margin-top: 10px; display: block; }
.req-dialog form { display: grid; gap: 12px; margin-top: 20px; }
.req-dialog .btn { width: 100%; justify-content: center; }
.req-success { display: none; text-align: center; padding: 8px 4px 0; }
.req-success .mk { width: 46px; height: 46px; border-radius: 50%; border: 1.5px solid var(--ss-gold); color: var(--ss-gold); display: flex; align-items: center; justify-content: center; margin: 0 auto 14px; font-size: 20px; }
.req-success h3 { font-family: var(--font-serif); font-size: 20px; color: var(--ss-navy); margin-bottom: 8px; }
.req-success p { font-size: 13.5px; color: var(--ss-text-mid); line-height: 1.55; margin: 0 0 10px; }
.req-dialog.done form, .req-dialog.done .req-intro { display: none; }
.req-dialog.done .req-success { display: block; }
.req-alt { font-family: var(--font-mono); font-size: var(--text-mono-sm); letter-spacing: 0.03em; color: var(--ss-text-mid); line-height: 1.5; margin: 18px 0 0; padding-top: 16px; border-top: 1px solid var(--ss-line); }

/* Opportunity profile */
.op-profile-hero { padding-top: 38px; padding-bottom: clamp(44px, 5vw, 72px); }
.op-profile-head { display: grid; grid-template-columns: minmax(0, 1.1fr) minmax(360px, 0.9fr); gap: clamp(32px, 5vw, 76px); align-items: center; padding: 34px 0 48px; }
.op-profile-copy .eyebrow { color: var(--ss-gold-dark); margin-bottom: var(--space-5); }
.op-profile-copy .h1 { max-width: 24ch; }
.op-profile-copy .lede { max-width: 62ch; margin-top: var(--space-6); }
.op-profile-meta { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 0; border-top: 1px solid var(--ss-line); border-bottom: 1px solid var(--ss-line); margin-top: var(--space-8); }
.op-meta-item { min-width: 0; padding: 16px 18px 16px 0; border-right: 1px solid var(--ss-line); }
.op-meta-item + .op-meta-item { padding-left: 18px; }
.op-meta-item:last-child { border-right: 0; }
.op-meta-label, .op-kpi-label, .op-kpi-sub, .op-next-label, .op-next-meta, .op-panel-mark, .op-benchmark-label { display: block; font-family: var(--font-mono); font-size: 10.5px; letter-spacing: 0.07em; text-transform: uppercase; }
.op-meta-label { color: var(--ss-primary); margin-bottom: 7px; }
.op-meta-item strong { display: block; color: var(--ss-navy); font-size: 14px; line-height: 1.3; overflow-wrap: anywhere; }
.op-profile-copy .opp-actions { margin-top: var(--space-8); }
.op-profile-note { margin-top: 14px; }
.op-profile-note a { text-decoration: underline; text-underline-offset: 3px; }
.op-profile-media { margin: 0; border-color: var(--ss-line-strong); aspect-ratio: 4 / 3; }
.op-profile-media img { width: 100%; height: 100%; object-fit: cover; filter: saturate(0.9) contrast(0.97) brightness(0.98); }
.op-profile-media figcaption { padding: 10px 2px 0; color: var(--ss-text-mid); font-family: var(--font-mono); font-size: 10.5px; letter-spacing: 0.04em; line-height: 1.45; }
.op-kpi-rail { display: grid; grid-template-columns: repeat(5, minmax(0, 1fr)); overflow: hidden; background: var(--ss-white); border-top: 1px solid var(--ss-line-strong); border-bottom: 1px solid var(--ss-line-strong); }
.op-kpi { display: flex; min-width: 0; min-height: 136px; flex-direction: column; justify-content: space-between; padding: 20px clamp(14px, 1.7vw, 26px); border-right: 1px solid var(--ss-line); }
.op-kpi:first-child { padding-left: 0; }
.op-kpi + .op-kpi { padding-left: clamp(14px, 1.7vw, 26px); }
.op-kpi:last-child { border-right: 0; }
.op-kpi-label { min-height: 2.6em; color: var(--ss-primary); line-height: 1.3; }
.op-kpi strong { display: block; min-height: 2.25em; color: var(--ss-navy); font-family: var(--font-serif); font-size: clamp(20px, 1.8vw, 29px); font-weight: 400; line-height: 1.1; overflow-wrap: anywhere; }
.op-kpi strong .ss-sym { color: var(--ss-gold-dark); }
.op-kpi-text strong { font-size: 17px; line-height: 1.25; }
.op-kpi-sub { color: var(--ss-text-mid); line-height: 1.35; }
.op-profile-grid { display: grid; grid-template-columns: minmax(0, 1.34fr) minmax(300px, 0.66fr); gap: clamp(42px, 7vw, 104px); align-items: start; }
.op-overview .section-head .lede { margin-top: var(--space-5); max-width: 60ch; }
.op-description { margin-top: var(--space-10); }
.op-description > p:first-child { font-size: 19px; line-height: 1.65; }
.op-description > p, .op-description li { max-width: 72ch; }
.op-description ul { margin: 0 0 var(--space-7); padding-left: 1.25em; }
.op-description li { margin-bottom: 0.75em; line-height: 1.65; }
.op-description li::marker { color: var(--ss-gold-dark); }
.op-aside { position: sticky; top: 92px; }
.op-fin-panel { background: var(--ss-white); border: 1px solid var(--ss-line-strong); border-top: 3px solid var(--ss-gold); padding: 25px 26px 24px; }
.op-panel-head { display: flex; align-items: flex-start; justify-content: space-between; gap: 16px; }
.op-panel-head h2 { margin-top: 7px; font-size: 28px; line-height: 1.1; }
.op-panel-mark { display: flex; align-items: center; justify-content: center; width: 36px; height: 36px; border: 1px solid var(--ss-line-strong); color: var(--ss-gold-dark); font-size: 17px; }
.op-panel-intro { color: var(--ss-text-mid); font-size: 13px; line-height: 1.5; margin: 16px 0 4px; }
.bench-table { width: 100%; border-collapse: collapse; margin-top: 11px; }
.bench-table th, .bench-table td { text-align: left; padding: 13px 0; border-bottom: 1px solid var(--ss-line); font-family: var(--font-mono); font-size: 13px; line-height: 1.35; vertical-align: top; }
.bench-table th { color: var(--ss-text-mid); font-weight: 400; text-transform: uppercase; letter-spacing: 0.05em; font-size: 10px; width: 51%; }
.bench-table td { color: var(--ss-navy); text-align: right; font-feature-settings: "tnum"; overflow-wrap: anywhere; }
.bench-table td .ss-sym { color: var(--ss-gold-dark); }
.bench-table tr.emph td, .bench-table tr.emph th { border-top: 2px solid var(--ss-gold); }
.bench-table tr.evidence-row td { font-family: var(--font-sans); font-size: 12px; line-height: 1.45; text-align: left; color: var(--ss-text-mid); }
.op-benchmark-note { border-top: 1px solid var(--ss-line); margin-top: 4px; padding-top: 15px; color: var(--ss-text-mid); font-size: 12px; line-height: 1.5; }
.op-benchmark-label { color: var(--ss-primary); margin-bottom: 7px; }
.op-benchmark-note p { margin: 0 0 7px; }
.op-benchmark-note p:last-child { margin-bottom: 0; }
.op-panel-cta { width: 100%; justify-content: center; margin-top: 20px; }
.op-panel-link { margin-top: 17px; }
.op-panel-foot { border-top: 1px solid var(--ss-line); padding-top: 15px; margin: 17px 0 0; color: var(--ss-text-mid); font-family: var(--font-mono); font-size: 10.5px; letter-spacing: 0.02em; line-height: 1.5; }
.op-scope-note { margin-top: var(--space-7); }
.op-profile-close { display: flex; align-items: end; justify-content: space-between; gap: 40px; }
.op-profile-close .section-head { flex: 1; }
.op-profile-close .section-head .lede { margin-top: var(--space-5); }
.op-profile-close .btn-row { flex: 0 0 auto; }
.op-intermediary-note { margin-top: 24px; }
.ground-navy .op-intermediary-note { color: var(--ss-ink-on-navy-3); }
.op-next-nav { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); border-top: 1px solid var(--ss-line-strong); border-bottom: 1px solid var(--ss-line-strong); margin-top: var(--space-8); }
.op-next-link, .op-next-all { min-width: 0; min-height: 142px; padding: 22px 24px; display: flex; flex-direction: column; justify-content: center; border-right: 1px solid var(--ss-line); color: var(--ss-navy); transition: background var(--dur-base) var(--ease-signature), color var(--dur-base) var(--ease-signature); }
.op-next-link:hover, .op-next-all:hover { background: var(--ss-mist); color: var(--ss-navy); }
.op-next-next { border-right: 0; text-align: right; align-items: end; }
.op-next-label { color: var(--ss-primary); margin-bottom: 9px; }
.op-next-link strong, .op-next-all strong { font-family: var(--font-serif); font-size: 18px; font-weight: 400; line-height: 1.2; overflow-wrap: anywhere; }
.op-next-meta, .op-next-all span:last-child { color: var(--ss-text-mid); margin-top: 9px; font-size: 10px; line-height: 1.4; }
.op-next-all { align-items: center; text-align: center; }
.op-next-all-mark { color: var(--ss-gold-dark); font-family: var(--font-mono); font-size: 20px; margin-bottom: 8px; }
.foot-status-row { border-top: 1px solid var(--ss-line-on-navy); padding-top: 24px; margin-bottom: 10px; display: flex; flex-wrap: wrap; gap: 12px 22px; align-items: center; }
.foot-status-row a { font-size: 14px; }
.foot-status { font-family: var(--font-mono); font-size: 11px; letter-spacing: 0.08em; text-transform: uppercase; color: var(--ss-gold-on-navy); }
@media (max-width: 960px) {
  .op-profile-head { grid-template-columns: 1fr; }
  .op-profile-media { width: min(100%, 680px); }
  .op-kpi-rail { grid-template-columns: repeat(3, minmax(0, 1fr)); }
  .op-kpi:nth-child(3) { border-right: 0; }
  .op-kpi:nth-child(n+4) { border-top: 1px solid var(--ss-line); }
  .op-profile-grid { grid-template-columns: 1fr; }
  .op-aside { position: static; }
  .op-profile-close { display: block; }
  .op-profile-close .btn-row { margin-top: 28px; }
}
@media (max-width: 620px) {
  .op-profile-hero { padding-top: 24px; }
  .op-profile-head { padding-top: 26px; padding-bottom: 34px; gap: 30px; }
  .op-profile-copy .h1 { max-width: none; }
  .op-profile-meta { grid-template-columns: 1fr; }
  .op-meta-item, .op-meta-item + .op-meta-item { padding: 13px 0; border-right: 0; }
  .op-meta-item + .op-meta-item { border-top: 1px solid var(--ss-line); }
  .op-kpi-rail { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .op-kpi { min-height: 118px; padding: 16px 14px 16px 0; }
  .op-kpi + .op-kpi { padding-left: 14px; }
  .op-kpi:first-child { padding-left: 0; }
  .op-kpi:nth-child(2n) { padding-left: 14px; border-right: 0; }
  .op-kpi:nth-child(3) { border-right: 1px solid var(--ss-line); }
  .op-kpi:nth-child(n+3) { border-top: 1px solid var(--ss-line); }
  .op-kpi-text strong { font-size: 15px; }
  .op-fin-panel { padding: 22px 18px; }
  .op-panel-head h2 { font-size: 25px; }
  .op-next-nav { grid-template-columns: 1fr; }
  .op-next-link, .op-next-all { min-height: 0; border-right: 0; border-bottom: 1px solid var(--ss-line); padding: 20px 18px; }
  .op-next-next { text-align: left; align-items: start; }
  .op-next-all { border-bottom: 0; }
  .application-preview-card { grid-template-columns: 1fr; gap: 30px; padding: 26px 20px; }
  .application-preview-card .h2 { max-width: none; }
}

/* Card focus and full-profile action */
.opp-card .media:focus-visible, .opp-card a:focus-visible, .opp-card button:focus-visible { outline: 2px solid var(--ss-primary); outline-offset: 2px; }
.opp-actions { display: flex; flex-wrap: wrap; gap: 10px; margin-top: 18px; }
.opp-actions .btn { flex: 1 1 auto; justify-content: center; }

/* ── Pull quote ─────────────────────────────────────────────────────────── */
.pullquote { border-left: 2px solid var(--ss-primary); padding-left: var(--space-8); margin: var(--space-12) 0; }
.pullquote p { font-family: var(--font-serif); font-size: 26px; line-height: 1.35; color: var(--ss-navy); font-style: italic; }
.pullquote cite { font-family: var(--font-mono); font-size: var(--text-mono-sm); letter-spacing: 0.06em; text-transform: uppercase; color: var(--ss-text-mid); font-style: normal; }

/* ── FAQ / accordion ────────────────────────────────────────────────────── */
.faq { border-top: 1px solid var(--ss-line); }
.faq details { border-bottom: 1px solid var(--ss-line); }
.faq summary { cursor: pointer; list-style: none; display: flex; justify-content: space-between; align-items: center; gap: 20px; padding: var(--space-6) 0; font-family: var(--font-serif); font-size: 20px; color: var(--ss-navy); }
.faq summary::-webkit-details-marker { display: none; }
.faq summary .mk { font-family: var(--font-mono); color: var(--ss-primary); transition: transform var(--dur-base) var(--ease-signature); flex-shrink: 0; }
.faq details[open] summary .mk { transform: rotate(45deg); }
.faq .answer { padding: 0 0 var(--space-6); color: var(--ss-text-mid); max-width: 68ch; }

/* ── Article body ───────────────────────────────────────────────────────── */
.article-body { max-width: 68ch; }
.article-body > p:first-of-type { font-family: var(--font-serif); font-size: var(--text-lede); line-height: var(--lh-lede); color: var(--ss-text-mid); }
.article-body h2 { font-size: 28px; margin: var(--space-14) 0 var(--space-5); }
.article-body h3 { font-size: 20px; margin: var(--space-10) 0 var(--space-4); }
.article-body p { font-size: 17px; line-height: 1.7; color: var(--ss-text-dark); }
.article-body ul, .article-body ol { padding-left: 1.3em; color: var(--ss-text-dark); }
.article-body li { margin-bottom: 0.6em; line-height: 1.7; }
.article-body ul li::marker { color: var(--ss-gold); }
.article-body figure { margin: var(--space-12) 0; }
.article-body figcaption { font-family: var(--font-mono); font-size: var(--text-mono-sm); letter-spacing: 0.04em; color: var(--ss-text-mid); margin-top: var(--space-3); }

/* ── Checklist document ─────────────────────────────────────────────────── */
.check-group { border: 1px solid var(--ss-line); border-radius: var(--radius-md); overflow: hidden; margin-bottom: var(--space-6); }
.check-group > h3 { background: var(--ss-mist); padding: var(--space-5) var(--space-6); font-size: 19px; border-bottom: 1px solid var(--ss-line); display: flex; align-items: baseline; gap: 12px; }
.check-group > h3 .gnum { font-family: var(--font-mono); font-size: var(--text-mono-sm); color: var(--ss-gold); letter-spacing: 0.08em; }
.check-row { display: flex; gap: 16px; align-items: flex-start; padding: var(--space-5) var(--space-6); border-bottom: 1px solid var(--ss-line); }
.check-row:last-child { border-bottom: 0; }
.check-box { flex-shrink: 0; width: 20px; height: 20px; border: 1.5px solid var(--ss-line-strong); border-radius: var(--radius-xs); margin-top: 2px; }
.check-row .txt { flex: 1; }
.check-row .txt strong { color: var(--ss-navy); font-weight: 600; font-family: var(--font-sans); }
.check-row .txt p { font-size: var(--text-body-sm); color: var(--ss-text-mid); margin: 4px 0 0; }
.check-row .owner { font-family: var(--font-mono); font-size: var(--text-mono-sm); letter-spacing: 0.04em; text-transform: uppercase; color: var(--ss-text-mid); flex-shrink: 0; width: 96px; text-align: right; }

/* ── Breadcrumb ─────────────────────────────────────────────────────────── */
.breadcrumb { font-family: var(--font-mono); font-size: var(--text-mono-sm); letter-spacing: 0.06em; text-transform: uppercase; color: var(--ss-ink-on-navy-3); display: flex; gap: 10px; align-items: center; }
.breadcrumb a { color: var(--ss-gold-on-navy); }
.breadcrumb .sep { opacity: 0.5; }

/* ── Mountain river motif ───────────────────────────────────────────────── */
.mountain-river { width: 100%; height: auto; display: block; }

/* ── Hero ───────────────────────────────────────────────────────────────── */
.hero { position: relative; }
/* Ambient motion loop sits behind the scrim poster (same still), so if the
   video is missing or blocked the hero looks identical. */
/* 3D relief hero: a crafted still, not a video. Restrained depth drift and a
   slow light shift replace the ken-burns zoom, so it reads dimensional without
   motion noise. Disabled under prefers-reduced-motion (below). */
.scrim-media.hero-3d {
  transform: scale(1.03);
  animation: ss3dDrift 30s var(--ease-signature) infinite alternate;
  filter: saturate(1.03) contrast(1.02);
}
@keyframes ss3dDrift {
  0%   { transform: scale(1.03) translate3d(0, 0, 0); filter: saturate(1.02) contrast(1.01) brightness(0.99); }
  100% { transform: scale(1.05) translate3d(-1.4%, -1%, 0); filter: saturate(1.06) contrast(1.04) brightness(1.03); }
}
/* Dimensional service media: layered frame, soft perspective, inset depth, and
   a restrained hover lift. Consistent with the design-system hairline + radius. */
.svc-media { position: relative; border-radius: var(--radius-md); overflow: hidden; border: 1px solid var(--ss-line); box-shadow: inset 0 0 0 1px rgba(255,255,255,0.4), 0 1px 2px rgba(14,47,87,0.05); transition: transform var(--dur-slow) var(--ease-signature), box-shadow var(--dur-slow) var(--ease-signature); will-change: transform; }
.svc-media img { display: block; width: 100%; height: auto; transition: transform var(--dur-slow) var(--ease-signature); }
.svc-group:hover .svc-media { transform: translateY(-3px); box-shadow: inset 0 0 0 1px rgba(255,255,255,0.5), 0 10px 30px -12px rgba(14,47,87,0.22); }
.svc-group:hover .svc-media img { transform: scale(1.02); }
/* Subtle light-section paper texture: the hand-drawn ridge sits faint at the
   band's foot so body text above stays fully legible. */
.ground-texture { position: relative; background-color: var(--ss-white); }
.ground-texture > .wrap, .ground-texture > .wrap-wide { position: relative; z-index: 1; }
.ground-texture::before {
  content: ""; position: absolute; inset: 0; z-index: 0; pointer-events: none;
  background: url(assets/img/texture-light-ridge.png) no-repeat bottom center;
  background-size: 100% auto; opacity: 0.22;
  -webkit-mask-image: linear-gradient(to bottom, transparent 0%, #000 55%);
  mask-image: linear-gradient(to bottom, transparent 0%, #000 55%);
}
.ground-texture .svc-group > div:last-child {
  padding: clamp(24px, 3.5vw, 42px);
  border: 1px solid rgba(14,47,87,0.12);
  border-radius: var(--radius-md);
  background: rgba(255,255,255,0.9);
}
.hero .wrap-wide { padding-top: 88px; padding-bottom: 72px; }
.hero--home { min-height: 680px; display: flex; align-items: center; }
/* The home hero is a flex row with one content child. Give that child the
   full shared rail so its text starts on the same x-axis as the sections below
   instead of shrinking to its intrinsic text width. */
.hero--home > .wrap-wide { width: 100%; min-width: 0; }
/* A wider measure plus balanced wrapping keeps hero titles to two lines on
   desktop and avoids the three line wrap at tablet. Never solved by shrinking
   type below the accessible floor. */
.hero .display, .hero .h1 { max-inline-size: 26ch; }
.hero .lede { max-width: 54ch; margin-top: var(--space-6); text-wrap: pretty; }
/* Section titles get a sensible measure too, so they break at phrase
   boundaries instead of orphaning a single word. Centred display statements
   run longer than an h2, so they get their own wider measure. */
.section-head .h2 { max-inline-size: 31ch; }
.section-head .display { max-inline-size: 34ch; }
.section-head.center .h2, .section-head.center .display { margin-inline: auto; }
.hero-media { border-radius: var(--radius-md); overflow: hidden; border: 1px solid var(--ss-line-on-navy); box-shadow: var(--shadow-md); }
.hero-media img { width: 100%; display: block; }

/* ── Footer ─────────────────────────────────────────────────────────────── */
.site-footer { background: var(--ss-navy-deep); color: var(--ss-ink-on-navy-3); position: relative; }
.site-footer .foot-grid { display: grid; grid-template-columns: 1.6fr 1fr 1fr 1fr; gap: var(--space-10); padding-top: var(--section-y); padding-bottom: var(--space-12); }
.site-footer .foot-logo { display: flex; align-items: center; gap: 11px; margin-bottom: var(--space-5); }
.site-footer .foot-logo img { height: 38px; width: 38px; border-radius: 5px; margin-bottom: 0; }
.site-footer .foot-logo .logo-word { font-family: var(--font-serif); font-size: 20px; letter-spacing: -0.01em; color: var(--ss-ivory); }
.site-footer h4 { font-family: var(--font-mono); font-size: var(--text-mono-sm); letter-spacing: var(--tracking-eyebrow); text-transform: uppercase; color: var(--ss-gold-on-navy); font-weight: 500; margin-bottom: var(--space-5); }
.site-footer ul { list-style: none; margin: 0; padding: 0; }
.site-footer li { margin-bottom: var(--space-3); }
.site-footer a { color: var(--ss-ink-on-navy-3); font-size: var(--text-body-sm); }
.site-footer a:hover { color: var(--ss-ivory); }
.site-footer .foot-blurb { font-size: var(--text-body-sm); color: var(--ss-ink-on-navy-3); max-width: 34ch; }
.site-footer .foot-bottom { border-top: 1px solid var(--ss-line-on-navy); padding: var(--space-6) 0 var(--space-10); display: flex; flex-wrap: wrap; gap: 16px; justify-content: space-between; align-items: baseline; }
.site-footer .foot-bottom p { margin: 0; font-family: var(--font-mono); font-size: var(--text-mono-sm); letter-spacing: 0.04em; color: var(--ss-ink-on-navy-3); }
.site-footer .compliance { max-width: none; }
.newsletter-rail { border-top: 1px solid var(--ss-line-on-navy); padding-top: 24px; margin-bottom: 10px; display: flex; flex-wrap: wrap; gap: 12px 22px; align-items: center; }
.newsletter-rail-label { font-family: var(--font-mono); font-size: 11px; letter-spacing: 0.08em; text-transform: uppercase; color: var(--ss-gold-on-navy); }
.newsletter-rail a { font-size: 14px; }
.legal-footer-links { border-top: 1px solid var(--ss-line-on-navy); padding: 20px 0 18px; display: flex; flex-wrap: wrap; gap: 10px 20px; align-items: center; }
.legal-footer-links a { font-size: 12px; color: var(--ss-ink-on-navy-3); }
.legal-footer-links a:hover, .legal-footer-links a:focus-visible { color: var(--ss-ivory); }

/* ── Scroll reveal (progressive enhancement) ────────────────────────────── */
/* Transform + opacity + filter only - never geometry - so nothing reflows and
   no copy is ever hidden behind a stalled animation. */
[data-reveal], [data-reveal-zoom] {
  opacity: 0;
  transition:
    opacity var(--dur-reveal) var(--ease-signature),
    transform var(--dur-reveal) var(--ease-signature),
    filter var(--dur-reveal) var(--ease-signature);
  transition-delay: var(--reveal-delay, 0ms);
}
[data-reveal] { transform: translate3d(0, 16px, 0); filter: blur(3px); }
[data-reveal-zoom] { transform: scale(0.988) translate3d(0, 10px, 0); filter: blur(4px); }
[data-reveal].is-visible, [data-reveal-zoom].is-visible {
  opacity: 1; transform: none; filter: none;
}
/* Hint the compositor only while the reveal is pending, then release it. */
[data-reveal]:not(.is-visible), [data-reveal-zoom]:not(.is-visible) { will-change: opacity, transform, filter; }
[data-reveal].is-visible, [data-reveal-zoom].is-visible { will-change: auto; }

/* Authored stagger steps (kept for existing markup) + JS group stagger. */
[data-reveal-delay="1"] { --reveal-delay: 80ms; }
[data-reveal-delay="2"] { --reveal-delay: 160ms; }
[data-reveal-delay="3"] { --reveal-delay: 240ms; }

/* Above-the-fold entrance: a touch slower and deeper, so the hero settles
   rather than snapping, and reads as one composed movement. */
.is-entrance[data-reveal], .is-entrance[data-reveal-zoom] { transition-duration: 860ms; }
.is-entrance[data-reveal] { transform: translate3d(0, 22px, 0); }

.no-js [data-reveal], .no-js [data-reveal-zoom] { opacity: 1; transform: none; filter: none; }

@media (prefers-reduced-motion: reduce) {
  html { scroll-behavior: auto; }
  [data-reveal], [data-reveal-zoom] {
    opacity: 1 !important; transform: none !important; filter: none !important;
    transition: none !important; will-change: auto !important;
  }
  .ground-image > .scrim-media { animation: none; transform: scale(1.04); }
  .scrim-media.hero-3d { animation: none; transform: scale(1.03); }
  .hero-video { display: none; }
  .svc-media, .svc-media img { transition: none; }
  .svc-group:hover .svc-media { transform: none; }
  .svc-group:hover .svc-media img { transform: none; }
  .card--link:hover { transform: none; }
  .card--link .media img, .split-media img { transition: none; }
  .card--link:hover .media img { transform: none; }
  .site-header { transition: none; }
  * { animation-duration: 0.001ms !important; animation-iteration-count: 1 !important; }
}

/* Imported article catalog */
.article-hero { padding: 56px 0 82px; }
.article-eyebrow { margin-top: 26px; }
.article-meta { margin-top: 24px; color: var(--ss-ink-on-navy-3); font-family: var(--font-mono); font-size: 12px; letter-spacing: 0.05em; }
.article-reading-layout { display: grid; grid-template-columns: minmax(0, 1fr) 300px; gap: clamp(42px, 7vw, 96px); align-items: start; }
.article-reading-aside { position: sticky; top: 96px; display: grid; gap: 22px; }
.article-cover { margin: 0; border: 1px solid var(--ss-line); background: var(--ss-mist); }
.article-cover img { width: 100%; aspect-ratio: 1; object-fit: cover; display: block; }
.article-cover figcaption { padding: 12px 14px 14px; font-size: 11px; line-height: 1.45; }
.article-aside-card { padding: 22px; }
.article-source-link { font-family: var(--font-mono); font-size: 11px; letter-spacing: 0.05em; text-transform: uppercase; color: var(--ss-primary); }
.article-catalog { margin-top: var(--space-14); padding-top: var(--space-12); border-top: 1px solid var(--ss-line-strong); }
.article-catalog-head { display: grid; grid-template-columns: minmax(0, 1fr) minmax(230px, 300px); gap: 36px; align-items: end; }
.article-catalog-controls { display: grid; gap: 10px; }
.article-catalog-status { margin: 26px 0 18px; color: var(--ss-text-mid); font-family: var(--font-mono); font-size: 11px; letter-spacing: 0.06em; text-transform: uppercase; }
.article-index-grid { margin-top: 0; }
.article-index-card { display: flex; flex-direction: column; min-width: 0; }
.article-index-card .h3 { font-size: 19px; margin-top: 9px; }
.article-index-card .ctalink { margin-top: auto; padding-top: 18px; }
.article-card-media { margin: calc(var(--space-6) * -1) calc(var(--space-6) * -1) 18px; overflow: hidden; border-bottom: 1px solid var(--ss-line); background: var(--ss-mist); }
.article-card-media img { width: 100%; aspect-ratio: 16 / 9; display: block; object-fit: cover; transition: transform var(--dur-base) var(--ease-signature); }
.article-index-card:hover .article-card-media img { transform: scale(1.025); }
.featured-insight--compact { min-height: 0; }
.featured-insight--compact .featured-insight-media img { aspect-ratio: 4 / 3; object-fit: cover; }

/* The investor page reuses the application route preview on a light section.
   Keep the preview visually self-contained so its navy type tokens stay legible. */
.application-preview-card { display: grid; grid-template-columns: minmax(0, 1.06fr) minmax(280px, .74fr); gap: clamp(28px, 6vw, 76px); align-items: center; padding: clamp(28px, 5vw, 54px); border: 1px solid var(--ss-line-strong); border-top: 2px solid var(--ss-gold); border-radius: var(--radius-md); background: var(--ss-white); }
.application-preview-card .h2 { max-width: 22ch; }
.application-preview-card .lede { max-width: 64ch; margin-top: var(--space-5); }
.application-preview-card .network-application-preview { background: linear-gradient(145deg, var(--ss-navy-deep), var(--ss-navy-mid)); box-shadow: 0 18px 36px -28px rgba(8, 30, 59, .65); }
.application-preview-card .network-application-preview li { color: var(--ss-ink-on-navy-3); }

/* Design-system iconography */
.offer-icon, .market-example-icon { display: inline-grid; place-items: center; color: var(--ss-primary); }
.offer-icon { width: 46px; height: 46px; margin-bottom: 20px; border: 1px solid var(--ss-line-strong); background: var(--ss-mist); }
.card--gradient .offer-icon { border-color: rgba(255,255,255,.42); background: rgba(8,30,59,.28); color: var(--ss-gold-on-navy); }
.offer-icon svg { width: 21px; height: 21px; stroke-width: 1.6; }
.primary-offer-grid .card { min-height: 280px; }
.market-example-icon { width: 34px; height: 34px; margin-bottom: 15px; border: 1px solid var(--ss-line-strong); color: var(--ss-gold-dark); background: var(--ss-white); }
.market-example-icon svg { width: 17px; height: 17px; }

/* Market map communication layer */
.map-state-key { margin-top: 20px; padding-top: 17px; border-top: 1px solid var(--ss-line); }
.map-state-key p { margin: 7px 0 11px; color: var(--ss-text-mid); font-size: 12px; line-height: 1.5; }
.map-state-chips { display: flex; flex-wrap: wrap; gap: 6px; }
.map-state-chips span { padding: 5px 7px; border: 1px solid var(--ss-line); background: var(--ss-white); color: var(--ss-navy); font-family: var(--font-mono); font-size: 9px; letter-spacing: 0.03em; }
.market-map-examples { margin-top: 48px; padding: 30px; border: 1px solid var(--ss-line-strong); background: var(--ss-white); }
.market-map-examples-head { display: flex; justify-content: space-between; gap: 28px; align-items: start; }
.market-map-examples-head .h3 { margin-top: 6px; }
.market-map-examples-head p { max-width: 60ch; margin: 9px 0 0; }
.illustrative-label { flex: none; padding: 7px 9px; border: 1px solid var(--ss-gold); color: var(--ss-gold-dark); font-family: var(--font-mono); font-size: 9px; letter-spacing: 0.08em; text-transform: uppercase; }
.market-example-grid { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 14px; margin-top: 26px; }
.market-example { padding: 22px; border: 1px solid var(--ss-line); background: linear-gradient(155deg, rgba(230,240,251,0.58), rgba(255,255,255,0.96)); }
.market-example h4 { margin: 5px 0 8px; color: var(--ss-navy); font-family: var(--font-serif); font-size: 20px; font-weight: 400; line-height: 1.15; }
.market-example > p { min-height: 62px; margin-top: 0; }
.state-counts, .size-band-list, .role-map-list { display: grid; gap: 10px; margin-top: 20px; }
.state-counts > div { display: grid; grid-template-columns: 28px 1fr 19px; gap: 8px; align-items: center; font-family: var(--font-mono); font-size: 11px; }
.state-counts b { position: relative; overflow: hidden; padding: 4px 6px; color: var(--ss-navy); font-weight: 500; text-align: right; background: linear-gradient(90deg, rgba(47,119,196,0.18) var(--bar), transparent var(--bar)); }
.size-band-list > div, .role-map-list > div { display: flex; gap: 10px; align-items: flex-start; }
.size-band-list strong, .role-map-list strong { display: block; color: var(--ss-navy); font-size: 13px; font-weight: 600; }
.size-band-list small, .role-map-list small { display: block; margin-top: 2px; color: var(--ss-text-mid); font-size: 11px; line-height: 1.35; }
.size-dot { flex: none; width: 13px; height: 13px; margin-top: 2px; border-radius: 50%; border: 1px solid var(--ss-line-strong); }
.size-dot--gold { background: var(--ss-gold); }
.size-dot--blue { background: var(--ss-primary); }
.size-dot--mist { background: var(--ss-mist); }
.role-chip { display: inline-grid; place-items: center; flex: none; width: 24px; height: 24px; border-radius: 50%; color: var(--ss-ivory); font-family: var(--font-mono); font-size: 10px; }
.role-chip--platform { background: var(--ss-gold-dark); }
.role-chip--addon { background: var(--ss-primary); }
.role-chip--resource { background: var(--ss-slate); }

/* Relationship routing and paginated intake */
.role-switcher { margin-bottom: 24px; padding-bottom: 20px; border-bottom: 1px solid var(--ss-line); }
.role-switcher--navy { border-color: var(--ss-line-on-navy); }
.role-switcher .field-lab { display: block; margin-bottom: 10px; }
.role-switcher-grid { display: grid; grid-template-columns: 1fr 1fr; gap: 9px; }
.role-choice { display: flex; gap: 10px; align-items: flex-start; min-width: 0; padding: 11px; border: 1px solid var(--ss-line); color: var(--ss-navy); background: var(--ss-white); }
.role-choice:hover { color: var(--ss-navy); border-color: var(--ss-primary); }
.role-choice svg { flex: none; width: 17px; height: 17px; margin-top: 2px; color: var(--ss-primary); }
.role-choice strong, .role-choice small { display: block; }
.role-choice strong { font-size: 13px; line-height: 1.25; }
.role-choice small { margin-top: 3px; color: var(--ss-text-mid); font-size: 11px; line-height: 1.35; }
.role-choice--selected { border-color: var(--ss-gold-dark); box-shadow: inset 3px 0 0 var(--ss-gold); background: var(--ss-mist); }
.role-switcher--navy .role-choice { border-color: var(--ss-line-on-navy); color: var(--ss-ivory); background: rgba(255,255,255,0.06); }
.role-switcher--navy .role-choice small { color: var(--ss-ink-on-navy-3); }
.role-switcher--navy .role-choice--selected { border-color: var(--ss-gold); background: rgba(255,255,255,0.1); }
.form-stack { display: grid; gap: 14px; }
.optional-label { text-transform: none; letter-spacing: 0; color: var(--ss-text-mid); }
.preview-note { margin: 18px 0 0; color: var(--ss-text-mid); font-family: var(--font-mono); font-size: 10px; line-height: 1.55; }
.ground-navy .preview-note { color: var(--ss-ink-on-navy-3); }
.mandate-summary { padding: 12px 14px; border-left: 2px solid var(--ss-gold); color: var(--ss-navy); font-family: var(--font-mono); font-size: 12px; }
.foot-bottom .foot-legal-link { color: var(--ss-gold-on-navy); font-size: 11px; }
.foot-bottom .foot-legal-link:hover { color: var(--ss-ivory); }
.ground-navy #intake-form h3, .ground-navy #mandate-form h3,
.ground-navy #intake-thanks h3, .ground-navy #mandate-thanks h3 { color: var(--ss-navy); }
.article-byline { margin-top: 22px; font-family: var(--font-mono); font-size: 12px; letter-spacing: 0.06em; color: var(--ss-ink-on-navy-3); }
.sr-only { position: absolute; width: 1px; height: 1px; padding: 0; margin: -1px; overflow: hidden; clip: rect(0,0,0,0); white-space: nowrap; border: 0; }

/* Agreement reader pages */
.legal-hero { padding: clamp(84px, 12vw, 152px) 0 clamp(72px, 9vw, 118px); border-bottom: 1px solid var(--ss-line); }
.legal-hero .display { max-width: 15ch; }
.legal-hero .lede { max-width: 64ch; margin-top: 28px; }
.legal-layout { display: grid; grid-template-columns: minmax(205px, 0.28fr) minmax(0, 0.92fr); gap: clamp(38px, 7vw, 104px); align-items: start; }
.legal-aside { position: sticky; top: 94px; }
.legal-aside .h3 { margin: 12px 0 24px; font-size: 24px; line-height: 1.18; }
.legal-nav { display: grid; gap: 0; border-top: 1px solid var(--ss-line); margin-bottom: 28px; }
.legal-nav a { display: block; padding: 14px 0; border-bottom: 1px solid var(--ss-line); color: var(--ss-text-mid); font-size: 14px; line-height: 1.35; text-decoration: none; }
.legal-nav a:hover, .legal-nav a:focus-visible, .legal-nav a.is-current { color: var(--ss-navy); }
.legal-nav a.is-current { font-weight: 600; }
.legal-document { min-width: 0; }
.legal-document-head { padding-bottom: 28px; border-bottom: 1px solid var(--ss-line); }
.legal-document-head .h2 { margin-top: 12px; max-width: 24ch; }
.legal-meta { margin: 18px 0 0; color: var(--ss-text-mid); font-family: var(--font-mono); font-size: 11px; letter-spacing: 0.05em; text-transform: uppercase; }
.legal-notice { margin: 28px 0 24px; padding: 20px 22px; border: 1px solid var(--ss-line); background: var(--ss-mist); }
.legal-notice strong { display: block; color: var(--ss-navy); font-family: var(--font-mono); font-size: 11px; letter-spacing: 0.08em; text-transform: uppercase; }
.legal-notice p { margin: 9px 0 0; color: var(--ss-text-mid); font-size: 14px; line-height: 1.6; }
.legal-actions { margin: 0 0 28px; }
.legal-copy { margin-top: 28px; padding: clamp(28px, 4vw, 56px); border: 1px solid var(--ss-line-strong); background: var(--ss-white); box-shadow: var(--shadow-sm); color: var(--ss-text-mid); }
.legal-copy section + section { margin-top: 34px; }
.legal-copy h3 { margin: 0 0 12px; color: var(--ss-navy); font-family: var(--font-serif); font-size: clamp(22px, 2.1vw, 30px); font-weight: 400; line-height: 1.2; }
.legal-copy h4 { margin: 24px 0 9px; color: var(--ss-navy); font-family: var(--font-sans); font-size: 16px; font-weight: 700; line-height: 1.35; }
.legal-copy p { margin: 0; max-width: 76ch; font-size: 15px; line-height: 1.72; }
.legal-copy p + p { margin-top: 14px; }
.legal-copy ul, .legal-copy ol { max-width: 76ch; margin: 12px 0 0; padding-left: 22px; }
.legal-copy li { padding-left: 4px; font-size: 15px; line-height: 1.65; }
.legal-copy li + li { margin-top: 8px; }
.legal-copy strong { color: var(--ss-navy); }
.legal-disclosure { padding: 20px 22px; border: 1px solid var(--ss-line); border-top: 2px solid var(--ss-gold); background: var(--ss-mist); }
.legal-disclosure p { font-size: 15px; }
.legal-toc { margin: 28px 0 34px; padding: 18px 20px; border: 1px solid var(--ss-line); background: var(--ss-mist); }
.legal-toc summary { cursor: pointer; color: var(--ss-navy); font-family: var(--font-mono); font-size: 12px; font-weight: 700; letter-spacing: 0.08em; text-transform: uppercase; }
.legal-toc ol { margin: 14px 0 0; columns: 2; column-gap: 32px; }
.legal-toc li { break-inside: avoid; padding-left: 0; font-size: 13px; line-height: 1.5; }
.legal-toc a { color: var(--ss-text-mid); text-decoration: none; }
.legal-toc a:hover, .legal-toc a:focus-visible { color: var(--ss-navy); text-decoration: underline; text-underline-offset: 3px; }
.legal-copy .legal-note { margin-top: 14px; color: var(--ss-text-mid); font-size: 13px; font-style: italic; }
.legal-viewer { overflow: hidden; border: 1px solid var(--ss-line-strong); background: var(--ss-mist); box-shadow: var(--shadow-sm); }
.legal-viewer iframe { display: block; width: 100%; height: min(1120px, 78vh); min-height: 720px; border: 0; background: var(--ss-white); }
.legal-viewer iframe:focus-visible { outline: 3px solid var(--ss-gold); outline-offset: -3px; }
@media (max-width: 900px) {
  .legal-layout { grid-template-columns: 1fr; gap: 48px; }
  .legal-aside { position: static; }
  .legal-nav { grid-template-columns: repeat(2, minmax(0, 1fr)); column-gap: 24px; }
}
@media (max-width: 620px) {
  .legal-hero .display { max-width: 11ch; }
  .legal-nav { grid-template-columns: 1fr; }
  .legal-viewer iframe { height: 760px; min-height: 0; }
  .legal-copy { padding: 24px 20px; }
  .legal-toc ol { columns: 1; }
  .legal-actions .btn { width: 100%; justify-content: center; }
}

@media (max-width: 900px) {
  .article-reading-layout { grid-template-columns: 1fr; }
  .article-reading-aside { position: static; grid-template-columns: minmax(0, 260px) minmax(0, 1fr); align-items: start; }
  .article-source-link { grid-column: 1 / -1; }
  .market-example-grid { grid-template-columns: 1fr; }
  .market-example > p { min-height: 0; }
}
@media (max-width: 620px) {
  .article-catalog-head, .article-reading-aside { grid-template-columns: 1fr; }
  .market-map-examples { padding: 22px 18px; }
  .market-map-examples-head { display: block; }
  .illustrative-label { display: inline-block; margin-top: 18px; }
  .role-switcher-grid { grid-template-columns: 1fr; }
  .service-choice-grid { grid-template-columns: 1fr; }
}

/* ── Responsive ─────────────────────────────────────────────────────────── */
@media (max-width: 1080px) {
  :root { --gutter: 40px; --section-y: 64px; --section-y-lg: 88px; }
  .site-footer .foot-grid { grid-template-columns: 1fr 1fr; }
  /* Tighten the bar before the mobile breakpoint so links never wrap. */
  .nav { gap: 18px; padding: 0 20px; }
  .nav-links { gap: 17px; margin-left: 0; }
  .nav-cta { gap: 10px; }
  .logo img { height: 34px; }
  /* Give titles a little more room to stay at two lines on tablet. */
  .hero .display, .hero .h1 { max-inline-size: 27ch; }
  .section-head .h2 { max-inline-size: 32ch; }
  .section-head .display { max-inline-size: 34ch; }
  /* Drop to two columns early enough that card tables never force overflow. */
  .grid-3, .grid-4 { grid-template-columns: repeat(2, 1fr); }
}
/* The band just above the mobile breakpoint is the tightest fit for the nav:
   drop the inline CTA and let the links own the row, keeping the full logo
   lockup and the accessible menu behaviour intact. */
@media (max-width: 960px) and (min-width: 861px) {
  .nav-cta { display: none; }
  .nav-links { margin-left: auto; }
}
@media (max-width: 860px) {
  .nav-links, .nav-cta { display: none; }
  .nav-toggle { display: flex; }
  .grid-3, .grid-4 { grid-template-columns: repeat(2, 1fr); }
  .support-scope-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .split { grid-template-columns: minmax(0, 1fr); gap: var(--space-10); }
  .split.reverse .split-media { order: -1; }
  .featured-insight { grid-template-columns: 1fr; }
}
@media (max-width: 620px) {
  :root { --gutter: 22px; }
  .grid-2, .grid-3, .grid-4 { grid-template-columns: 1fr; }
  .support-scope-grid { grid-template-columns: 1fr; }
  .investor-entry-grid { grid-template-columns: 1fr; }
  .trustbar > div { border-left: 0; border-top: 1px solid var(--ss-line); }
  .trustbar > div:first-child { border-top: 0; }
  .site-footer .foot-grid { grid-template-columns: 1fr; }
  .check-row .owner { display: none; }
  .hero .wrap-wide { padding-top: 72px; padding-bottom: 64px; }
  .hero--home { min-height: 620px; }
  /* Keep flex-based hero content inside the viewport. The min-content width
     of a large serif heading must not widen the shared rail on small screens. */
  .hero > .wrap-wide, .network-hero > .wrap-wide { min-width: 0; }
  .hero .display, .hero .h1 { max-inline-size: 100%; min-width: 0; text-wrap: pretty; overflow-wrap: break-word; }
  .section-head .h2, .section-head .display { max-inline-size: none; }
  .hero .lede { width: 100%; max-width: 100%; min-width: 0; }
  .featured-insight { padding: var(--space-6); gap: var(--space-8); }
  .calendly-shell { min-height: 700px; }
  .calendly-inline-widget { height: 700px; }
}

/* Network landing page. A focused membership surface with the same
   institutional rhythm as the rest of the SilverShore site. */
.network-hero { min-height: 690px; display: flex; align-items: center; }
.network-hero > .wrap-wide { width: 100%; }
.network-hero-grid { display: grid; grid-template-columns: minmax(0, 1.16fr) minmax(320px, .84fr); gap: clamp(40px, 7vw, 100px); align-items: center; }
.network-hero-copy .display { max-width: 14ch; }
.network-hero-copy .lede { max-width: 57ch; }
.network-hero-note { margin-top: 20px; color: var(--ss-ink-on-navy-3); font-family: var(--font-mono); font-size: 11px; letter-spacing: .06em; text-transform: uppercase; }
.network-hero-ledger { padding: 28px; border: 1px solid var(--ss-line-on-navy); border-top: 2px solid var(--ss-gold-on-navy); border-radius: var(--radius-md); background: linear-gradient(145deg, rgba(8,30,59,.88), rgba(14,47,87,.72)); box-shadow: 0 20px 50px -24px rgba(8,30,59,.68); }
.network-hero-ledger h2 { color: var(--ss-ivory); font-family: var(--font-serif); font-size: clamp(24px, 3vw, 34px); font-weight: 400; letter-spacing: -.02em; line-height: 1.1; margin: 12px 0 24px; }
.network-hero-ledger dl { margin: 0; }
.network-hero-ledger dl > div { display: grid; grid-template-columns: 1fr auto; gap: 18px; padding: 14px 0; border-top: 1px solid var(--ss-line-on-navy); }
.network-hero-ledger dt { color: var(--ss-ink-on-navy-3); font-size: 14px; }
.network-hero-ledger dd { margin: 0; color: var(--ss-gold-on-navy); font-family: var(--font-mono); font-size: 11px; letter-spacing: .06em; text-align: right; text-transform: uppercase; }
.network-kicker { max-width: 45ch; margin-top: 18px; color: var(--ss-text-mid); }
.network-benefits { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 1px; margin-top: 42px; border: 1px solid var(--ss-line); background: var(--ss-line); }
.network-benefit { min-height: 240px; padding: 28px; background: var(--ss-white); }
.network-benefit:nth-child(2) { background: linear-gradient(135deg, #f4f7fb 0%, #e6eff9 100%); }
.network-benefit:nth-child(3) { background: linear-gradient(135deg, #edf4fb 0%, #d6e7f7 100%); }
.network-benefit:nth-child(4) { background: linear-gradient(135deg, #e1eef9 0%, #c3dbf1 100%); }
.network-benefit-icon { width: 40px; height: 40px; display: inline-flex; align-items: center; justify-content: center; border: 1px solid var(--ss-primary-30); border-radius: var(--radius-sm); color: var(--ss-primary); }
.network-benefit-icon svg { width: 20px; height: 20px; stroke-width: 1.5; }
.network-benefit h3 { margin-top: 24px; }
.network-benefit p { max-width: 36ch; margin-top: 10px; color: var(--ss-text-mid); font-size: 14px; line-height: 1.6; }
.network-map-grid { display: grid; grid-template-columns: minmax(0, .9fr) minmax(0, 1.1fr); gap: clamp(34px, 6vw, 80px); align-items: center; }
.network-map-figure { margin: 0; padding: 18px; border: 1px solid var(--ss-line); border-radius: var(--radius-md); background: var(--ss-white); }
.network-map-figure img { display: block; width: 100%; max-height: 330px; object-fit: contain; }
.network-map-figure figcaption { margin-top: 12px; color: var(--ss-text-mid); font-family: var(--font-mono); font-size: 10px; letter-spacing: .04em; line-height: 1.5; }
.network-fit-list { list-style: none; margin: 28px 0 0; padding: 0; border-top: 1px solid var(--ss-line); }
.network-fit-list li { display: grid; grid-template-columns: 22px 1fr; gap: 12px; padding: 15px 0; border-bottom: 1px solid var(--ss-line); }
.network-fit-list li::before { content: "✓"; color: var(--ss-gold-dark); font-family: var(--font-mono); }
.network-fit-list strong { color: var(--ss-navy); font-family: var(--font-serif); font-size: 17px; font-weight: 400; }
.network-fit-list span { display: block; margin-top: 3px; color: var(--ss-text-mid); font-size: 14px; line-height: 1.5; }
.network-pricing-grid { align-items: stretch; }
.network-pricing-section { background: linear-gradient(145deg, var(--ss-navy) 0%, #123e70 100%); }
.network-pricing-section .section-head--light .h2 { color: var(--ss-ivory); }
.network-pricing-section .section-head--light .lede { color: var(--ss-ink-on-navy-3); }
.network-plan { position: relative; display: flex; flex-direction: column; min-height: 0; padding: 32px 26px 30px; }
.network-plan--featured { border-color: var(--ss-gold-on-navy); box-shadow: 0 12px 40px -22px rgba(14,47,87,.42); transform: translateY(-10px); }
.network-plan__tag { position: absolute; top: 20px; right: 22px; display: inline-flex; padding: 5px 8px; border: 1px solid var(--ss-gold-on-navy); border-radius: var(--radius-sm); color: var(--ss-gold-on-navy); font-family: var(--font-mono); font-size: 10px; letter-spacing: .08em; text-transform: uppercase; }
.network-plan__head { display: grid; gap: 10px; }
.network-plan__fit { display: block; color: var(--ss-ink-on-navy-3); font-family: var(--font-mono); font-size: 10px; letter-spacing: .06em; line-height: 1.35; text-transform: uppercase; }
.network-plan--featured .network-plan__fit { color: var(--ss-gold-on-navy); }
.network-plan__price { margin: 24px 0 12px; color: var(--ss-ivory); font-family: var(--font-serif); font-size: clamp(31px, 4vw, 45px); font-weight: 400; letter-spacing: -.03em; line-height: 1; }
.network-plan__price small { color: var(--ss-ink-on-navy-3); font-family: var(--font-sans); font-size: 13px; letter-spacing: 0; }
.network-plan p { max-width: 28ch; min-height: 3.3em; margin-bottom: 0; font-size: 14px; line-height: 1.55; }
.plan-features { display: grid; gap: 9px; margin: 22px 0 0; padding: 18px 0 0; border-top: 1px solid var(--ss-line-on-navy); list-style: none; }
.plan-features li { position: relative; padding-left: 18px; color: var(--ss-ink-on-navy-3); font-size: 12px; line-height: 1.35; }
.plan-features li::before { content: "✓"; position: absolute; left: 0; color: var(--ss-gold-on-navy); font-family: var(--font-mono); }
.network-plan .btn { margin-top: 18px; align-self: flex-start; }
.network-plan .btn--secondary { color: var(--ss-ivory); border-color: var(--ss-line-on-navy); }
.network-plan .btn--secondary:hover { color: var(--ss-ivory); border-color: rgba(255,255,255,.5); background: rgba(255,255,255,.08); }
.network-plan__free { margin-top: auto; padding-top: 28px; color: var(--ss-gold-on-navy); font-family: var(--font-mono); font-size: 11px; letter-spacing: .08em; text-transform: uppercase; }
.network-coverage-note { max-width: 54ch; margin-top: 14px; color: var(--ss-ink-on-navy-3); font-size: 13px; line-height: 1.55; }
.network-pricing-note { max-width: 72ch; margin: 30px auto 0; color: var(--ss-ink-on-navy-3); font-family: var(--font-mono); font-size: 11px; line-height: 1.6; text-align: center; }
.network-steps { margin-top: 44px; }
.network-step-card { min-height: 210px; }
.network-step-card .step-num { display: block; margin-bottom: 24px; color: var(--ss-gold-on-navy); font-family: var(--font-mono); font-size: 12px; letter-spacing: .12em; }
.network-step-card h3 { color: var(--ss-ivory); }
.network-step-card p { color: var(--ss-ink-on-navy-3); font-size: 14px; line-height: 1.6; }
.network-join-card { display: grid; grid-template-columns: minmax(0, 1fr) minmax(280px, .72fr); gap: 40px; align-items: center; padding: clamp(28px, 5vw, 54px); border: 1px solid var(--ss-line-on-navy); border-top: 2px solid var(--ss-gold-on-navy); border-radius: var(--radius-md); background: linear-gradient(145deg, rgba(8,30,59,.72), rgba(28,84,143,.62)); }
.network-join-card h2 { max-width: 18ch; color: var(--ss-ivory); }
.network-join-card p { max-width: 53ch; color: var(--ss-ink-on-navy-3); }
.network-join-card .compliance { margin-top: 22px; border-color: var(--ss-line-on-navy); }
.network-join-card .compliance p { color: var(--ss-ink-on-navy-3); }
.network-application-preview { padding: 24px; border: 1px solid var(--ss-line-on-navy); border-radius: var(--radius-md); background: rgba(255,255,255,.06); }
.network-application-preview .kicker { color: var(--ss-gold-on-navy); }
.network-application-preview ol { list-style: none; margin: 16px 0 0; padding: 0; }
.network-application-preview li { display: grid; grid-template-columns: minmax(76px, max-content) minmax(0, 1fr); gap: 16px; align-items: start; min-width: 0; padding: 14px 0; border-top: 1px solid var(--ss-line-on-navy); color: var(--ss-ink-on-navy-3); font-size: 14px; line-height: 1.45; }
.network-application-preview li span { color: var(--ss-gold-on-navy); font-family: var(--font-mono); font-size: 11px; line-height: 1.5; white-space: nowrap; }
.network-application-preview li div { min-width: 0; }
.network-faq { max-width: 820px; margin: 42px auto 0; }
.network-faq details { border-top: 1px solid var(--ss-line); }
.network-faq details:last-child { border-bottom: 1px solid var(--ss-line); }
.network-faq summary { padding: 20px 0; color: var(--ss-navy); font-family: var(--font-serif); font-size: 20px; cursor: pointer; list-style: none; }
.network-faq summary::-webkit-details-marker { display: none; }
.network-faq .answer { max-width: 68ch; padding: 0 0 22px; color: var(--ss-text-mid); font-size: 15px; line-height: 1.65; }
.application-hero { min-height: 590px; display: flex; align-items: center; padding: 0; }
.application-hero > .wrap-wide { width: 100%; padding-top: 92px; padding-bottom: 76px; }
.application-hero-media { background-position: 76% center; opacity: .9; }
.application-hero-grid { display: grid; grid-template-columns: minmax(0, 1.05fr) minmax(300px, .75fr); gap: clamp(40px, 8vw, 110px); align-items: center; }
.application-hero-copy .display { max-width: 15ch; color: var(--ss-ivory); }
.application-hero-copy .lede { max-width: 48ch; color: var(--ss-ink-on-navy-3); }
.application-hero-copy .btn { margin-top: 26px; }
.application-hero-steps { grid-column: 1 / -1; display: flex; gap: 0; max-width: 760px; padding-top: 18px; border-top: 1px solid var(--ss-line-on-navy); }
.application-hero-steps span { flex: 1; color: var(--ss-ink-on-navy-3); font-size: 13px; }
.application-hero-steps span + span { padding-left: 24px; border-left: 1px solid var(--ss-line-on-navy); }
.application-shell { padding-top: clamp(58px, 7vw, 88px); }
.application-layout { display: grid; grid-template-columns: minmax(220px, .4fr) minmax(0, 1fr); gap: clamp(36px, 7vw, 92px); align-items: start; }
.application-side { position: sticky; top: 100px; }
.application-side h2 { margin-top: 9px; color: var(--ss-navy); font-family: var(--font-serif); font-size: clamp(25px, 3vw, 35px); font-weight: 400; line-height: 1.1; }
.application-side p { margin-top: 14px; color: var(--ss-text-mid); font-size: 14px; line-height: 1.65; }
.application-rail { display: grid; gap: 0; margin: 28px 0 0; padding: 0; border-top: 1px solid var(--ss-line); list-style: none; }
.application-rail li { display: grid; grid-template-columns: 34px 1fr; gap: 10px; align-items: baseline; padding: 13px 0; border-bottom: 1px solid var(--ss-line); color: var(--ss-text-mid); font-size: 11px; }
.application-rail li span { color: var(--ss-primary); }
.application-rail li strong { color: var(--ss-navy); font-family: var(--font-sans); font-size: 13px; font-weight: 600; }
.application-rail li small { display: block; margin-top: 3px; color: var(--ss-text-mid); font-size: 11px; line-height: 1.35; }
.application-side-note { margin-top: 28px; padding: 16px; border-left: 2px solid var(--ss-gold); background: var(--ss-white); }
.application-side-note .lab { color: var(--ss-gold-dark); }
.application-side-note p { margin-top: 7px; font-size: 12px; line-height: 1.55; }
.application-form-card { padding: clamp(24px, 4vw, 42px); }
.application-form-card .role-switcher { margin-bottom: 22px; }
.application-form-card .role-switcher .field-help { max-width: 42ch; }
.application-form-card .step-panel { min-height: 340px; }
.application-form-card .step-panel[aria-hidden="true"] { display: none; }
.application-form-card .step-nav { margin-top: 30px; }
.application-form-card .flow-steps { margin-bottom: 22px; }
.application-form-card .flow-steps .sn { color: var(--ss-gold-dark); }
.application-form-card .flow-bar { background: var(--ss-line); }
.application-form-card .flow-bar span { background: var(--ss-gold-dark); }
.application-plan-note { display: none; justify-content: space-between; gap: 18px; align-items: center; margin: 0 0 22px; padding: 13px 15px; border: 1px solid var(--ss-line); background: var(--ss-mist); }
.application-plan-note.is-active { display: flex; }
.application-plan-note span { color: var(--ss-text-mid); font-size: 12px; }
.application-plan-note strong { color: var(--ss-navy); font-family: var(--font-mono); font-size: 11px; letter-spacing: .05em; text-transform: uppercase; }
.criteria-form-grid { display: grid; grid-template-columns: 1fr 1fr; gap: 14px; }
.criteria-wide { grid-column: 1 / -1; }
.criteria-fieldset { min-width: 0; margin: 0 0 16px; padding: 18px; border: 1px solid var(--ss-line); border-radius: var(--radius-sm); background: var(--ss-mist); }
.criteria-fieldset[aria-invalid="true"] { border-color: var(--ss-gold-dark); box-shadow: 0 0 0 2px rgba(201,169,107,0.18); }
.criteria-fieldset:focus { outline: none; }
.criteria-title { margin: 0 0 14px; color: var(--ss-navy); font-family: var(--font-sans); font-size: 16px; font-weight: 700; letter-spacing: -0.01em; line-height: 1.25; }
.criteria-choice-grid { display: grid; grid-template-columns: 1fr 1fr; gap: 9px; }
.criteria-choice { display: flex; align-items: flex-start; gap: 9px; min-height: 44px; padding: 10px 11px; border: 1px solid var(--ss-line-strong); border-radius: var(--radius-xs); background: var(--ss-white); color: var(--ss-navy); font-size: 13px; line-height: 1.35; cursor: pointer; transition: border-color var(--dur-base) var(--ease-signature), background var(--dur-base) var(--ease-signature), box-shadow var(--dur-base) var(--ease-signature); }
.criteria-choice:hover { border-color: var(--ss-primary); }
.criteria-choice:has(input:checked) { border-color: var(--ss-gold-dark); background: #fffaf0; box-shadow: inset 3px 0 0 var(--ss-gold); }
.criteria-choice input { flex: none; margin-top: 2px; accent-color: var(--ss-primary); }
.application-form-card .consent { display: flex; align-items: flex-start; gap: 9px; width: 100%; margin: 10px 0 0; color: var(--ss-text-mid); font-size: 13.5px; line-height: 1.5; }
.application-form-card .consent input { flex: 0 0 auto; margin: 3px 0 0; }
.application-form-card .consent a { display: inline; }
.cadence-note { display: block; margin-top: 16px; padding: 14px 15px; border-left: 2px solid var(--ss-gold); background: var(--ss-mist); color: var(--ss-text-mid); font-size: 13px; line-height: 1.55; }
.cadence-note strong { display: block; color: var(--ss-navy); font-family: var(--font-sans); font-size: 14px; font-weight: 700; letter-spacing: 0; }
.cadence-note ul { display: grid; gap: 5px; margin: 10px 0 0; padding-left: 20px; }
.cadence-note li { margin: 0; }
.cadence-note p { margin: 10px 0 0; }
.trial-note { margin-top: 16px; padding: 14px 15px; border-left: 2px solid var(--ss-primary); background: var(--ss-mist); color: var(--ss-text-mid); font-size: 13px; line-height: 1.55; }
.trial-note strong { display: block; color: var(--ss-navy); font-family: var(--font-sans); font-size: 14px; font-weight: 700; }
.trial-note p { margin: 5px 0 0; }
.checkout-return-banner { display: grid; gap: 5px; margin: 0 0 22px; padding: 15px 17px; border: 1px solid var(--ss-line); border-top: 2px solid var(--ss-gold); background: var(--ss-mist); color: var(--ss-text-mid); font-size: 13.5px; line-height: 1.55; }
.checkout-return-banner strong { color: var(--ss-navy); font-family: var(--font-sans); font-size: 14px; font-weight: 700; }
.checkout-return-banner--cancelled { border-top-color: var(--ss-gold-dark); }
.application-thanks { max-width: 720px; margin: 0 auto; }
@media (max-width: 820px) {
  .network-hero-grid, .network-map-grid, .network-join-card, .application-preview-card { grid-template-columns: 1fr; }
  .application-preview-card .h2 { max-width: none; }
  .network-hero-copy .display { max-width: 18ch; }
  .network-plan--featured { transform: none; }
  .network-plan { padding: 28px 24px 26px; }
  .network-plan__free { padding-top: 24px; }
  .application-hero-grid, .application-layout { grid-template-columns: 1fr; }
  .application-side { position: static; }
}
@media (max-width: 620px) {
  .network-benefits { grid-template-columns: 1fr; }
  .network-benefit { min-height: auto; }
  .network-hero { min-height: 620px; }
  .network-hero-ledger { padding: 22px; }
  .application-hero { min-height: 0; }
  .application-hero > .wrap-wide { padding-top: 98px; padding-bottom: 72px; }
  .application-hero-media { background-position: 68% center; }
  .application-hero-copy .display { max-width: 16ch; }
  .application-hero-steps { display: grid; grid-template-columns: 1fr; gap: 11px; max-width: 300px; }
  .application-hero-steps span + span { padding-left: 0; border-left: 0; }
  .application-form-card { padding: 22px 18px; }
  .application-form-card .step-panel { min-height: 0; }
  .application-plan-note.is-active { display: block; }
  .application-plan-note strong { display: block; margin-top: 6px; }
  .criteria-form-grid, .criteria-choice-grid { grid-template-columns: 1fr; }
  .criteria-wide { grid-column: auto; }
}

/* Final small-screen guardrails. These selectors sit after the shared hero
   variants so page-specific measures cannot widen a 390px content rail. */
@media (max-width: 620px) {
  .hero > .wrap-wide, .network-hero > .wrap-wide { width: 100%; max-width: 100%; min-width: 0; }
  .hero .display, .hero .h1, .hero .lede { width: 100%; max-width: 100%; min-width: 0; }
  .hero .display, .hero .h1 { max-inline-size: 100%; font-size: clamp(1.85rem, 7.4vw, 2.15rem); line-height: 1.1; text-wrap: wrap; overflow-wrap: break-word; }
  .hero .btn-row { display: grid; grid-template-columns: minmax(0, 1fr); width: 100%; max-width: 100%; align-items: stretch; }
  .hero .btn-row .btn { width: 100%; justify-content: space-between; white-space: normal; }
  .svc-group .ctalink { max-width: 100%; white-space: normal; overflow-wrap: anywhere; }
  .network-hero-ledger dl > div { grid-template-columns: minmax(64px, .6fr) minmax(0, 1.4fr); gap: 12px; }
  .network-hero-ledger dd { overflow-wrap: anywhere; }
}