/* ==========================================================================
   ShoreVest — Box System (2026-06-26)
   Shared color-block card components, token-aligned to the homepage shell
   (--sv-* vars). Curated to the treatments the team likes: a floating
   SPLIT FIELD (02), a lifted OFFSET card (03), and a category BAND TOP (04).
   Namespaced .svb-* — safe to load last over any page stylesheet.
   Source of truth: box-system-preview.html.
   ========================================================================== */
.svb { position: relative; }
.svb, .svb * { box-sizing: border-box; }

:root { --svb-divider: rgba(24, 37, 36, 0.12); --svb-muted: #6E7169; --svb-body: #46504C; }

/* ---- shared interior primitives ------------------------------------------ */
.svb-label {
  margin: 0 0 16px;
  font: 600 11px/1.3 var(--sv-font);
  letter-spacing: 0.16em;
  text-transform: uppercase;
}
.svb-title {
  margin: 0 0 12px;
  font: 500 clamp(22px, 2vw, 28px)/1.12 var(--sv-font);
  letter-spacing: -0.02em; color: var(--sv-ink);
}
.svb-body { margin: 0; font: 400 15px/1.6 var(--sv-font); color: var(--svb-body); max-width: 46ch; }
.svb-statement {
  margin: 0; color: var(--sv-ink);
  font: 400 clamp(20px, 2vw, 26px)/1.46 var(--sv-font); letter-spacing: -0.005em;
  max-width: 62ch; text-wrap: pretty;
}

.svb-stats { display: flex; flex-direction: column; }
.svb-stat {
  display: flex; align-items: baseline; justify-content: space-between; gap: 18px;
  padding: 15px 0; border-bottom: 1px solid var(--svb-divider);
}
.svb-stat:last-child { border-bottom: 0; padding-bottom: 0; }
.svb-stat__v {
  font: 500 clamp(26px, 2.6vw, 36px)/1 var(--sv-font);
  letter-spacing: -0.02em; color: var(--sv-ink); white-space: nowrap;
}
.svb-stat__c { font: 400 14px/1.45 var(--sv-font); color: var(--svb-muted); max-width: 26ch; text-align: right; }

/* horizontal stat ledger for full-width panels */
.svb-stats--row { display: grid; grid-template-columns: repeat(3, 1fr); gap: 0; }
.svb-stats--row .svb-stat {
  flex-direction: column; align-items: flex-start; gap: 10px;
  padding: 0 clamp(24px, 3vw, 44px); border-bottom: 0;
  border-left: 1px solid var(--svb-divider);
}
.svb-stats--row .svb-stat:first-child { padding-left: 0; border-left: 0; }
.svb-stats--row .svb-stat:last-child { padding-right: 0; }
.svb-stats--row .svb-stat__c { text-align: left; }
@media (max-width: 700px) {
  .svb-stats--row { grid-template-columns: 1fr; }
  .svb-stats--row .svb-stat { border-left: 0; padding: 18px 0 0; border-top: 1px solid var(--svb-divider); }
  .svb-stats--row .svb-stat:first-child { padding-top: 0; border-top: 0; }
}

/* ---- 02 · Split Field — cinnabar field + tonal spine, floating ivory card  */
.svb--split { background: var(--sv-cinnabar); padding: clamp(30px, 3.6vw, 52px) clamp(24px, 3.2vw, 44px); }
.svb--split::after {
  content: ""; position: absolute; inset: 0 0 0 auto; width: min(120px, 20%); background: var(--sv-cinnabar-d);
}
.svb--split .svb-card {
  position: relative; z-index: 1; background: var(--sv-ivory); color: var(--sv-ink);
  padding: clamp(26px, 3vw, 40px); box-shadow: 0 12px 34px rgba(0, 0, 0, 0.16); max-width: 400px;
}

/* ---- 03 · Offset — ivory card lifted off a paper surface, cinnabar accent   */
.svb--offset { background: var(--sv-stone); padding: clamp(26px, 3.4vw, 48px); }
.svb--offset .svb-card {
  background: #fff; color: var(--sv-ink); padding: clamp(28px, 3vw, 44px);
  border-left: 4px solid var(--sv-cinnabar); box-shadow: 0 16px 40px rgba(0, 0, 0, 0.10); max-width: 480px;
}

/* ---- 04 · Band Top — teal category band over an ivory panel ---------------- */
.svb--band { background: transparent; }
.svb--band .svb-band {
  background: var(--sv-teal-900); color: var(--sv-ivory);
  padding: clamp(16px, 2vw, 24px) clamp(22px, 3vw, 34px);
}
.svb--band .svb-band .svb-label { color: var(--sv-ivory); }
.svb--band .svb-panel { background: var(--sv-ivory); color: var(--sv-ink); padding: clamp(26px, 3vw, 40px); }

/* ==========================================================================
   Per-page integration — pair the page's block class with .svb so these win
   over the page's own grid styles (higher specificity, loads last).
   ========================================================================== */

/* Firm · "Platform at a glance" statcard → cinnabar facts block with light text. */
body.firm-page .fm-statcard.svb--band {
  display: block; grid-column: 1 / -1; margin: clamp(8px, 1.4vw, 18px) 0 0;
  background: linear-gradient(152deg, var(--sv-cinnabar, #C93B2A) 0%, var(--sv-cinnabar, #C93B2A) 58%, var(--sv-cinnabar-d, #9F2F24) 100%);
  padding: clamp(24px, 3vw, 40px);
  position: relative; isolation: isolate;
}
body.firm-page .fm-statcard.svb--band::after { content: none; }
body.firm-page .fm-statcard.svb--band .svb-band {
  background: transparent;
  color: var(--sv-ivory);
  margin: 0 0 clamp(28px, 3vw, 40px);
  padding: 0;
  border-bottom: 0;
}
body.firm-page .fm-statcard.svb--band .svb-band .svb-label { color: var(--sv-ivory); }
body.firm-page .fm-statcard.svb--band .svb-panel {
  position: relative; z-index: 1;
  background: transparent;
  color: var(--sv-ivory);
  margin: 0;
  padding: 0;
  box-shadow: none;
}
body.firm-page .fm-statcard.svb--band .svb-stat__v { color: var(--sv-ivory); }
body.firm-page .fm-statcard.svb--band .svb-stat__c { color: var(--sv-meta-on-cinnabar, rgba(252, 249, 241, 0.82)); }
body.firm-page .fm-statcard.svb--band .svb-stats--row .svb-stat { border-left-color: rgba(252, 249, 241, 0.24); }

/* Firm · relationship closing → centered editorial trust panel. */
body.firm-page .fm-close__inner.svb {
  display: flex;
  justify-content: center;
  border-left: 0;
  padding-left: var(--pad-x, clamp(24px, 8.9vw, 182px));
}
body.firm-page .fm-close__inner .svb--offset {
  width: min(100%, 980px);
  margin-inline: auto;
  padding: clamp(18px, 2.2vw, 30px);
  background:
    linear-gradient(135deg, rgba(122, 175, 175, 0.18), rgba(122, 175, 175, 0) 42%),
    var(--sv-stone);
  box-sizing: border-box;
  text-align: center;
}
body.firm-page .fm-close__inner .svb-card {
  position: relative;
  max-width: none;
  padding: clamp(36px, 4.8vw, 70px) clamp(28px, 5vw, 82px);
  border-left: 0;
  border-top: 4px solid var(--sv-cinnabar);
  box-shadow: 0 18px 48px rgba(23, 28, 28, 0.10);
}
body.firm-page .fm-close__inner .svb-label {
  margin-bottom: clamp(18px, 2vw, 26px);
  text-align: center;
}
body.firm-page .fm-close__inner .svb-statement {
  max-width: 760px;
  margin-inline: auto;
  text-align: center;
  font-size: clamp(24px, 2.8vw, 38px);
  line-height: 1.28;
  letter-spacing: -0.025em;
  text-wrap: balance;
}
@media (max-width: 880px) {
  body.firm-page .fm-close__inner.svb { display: flex; }
  body.firm-page .fm-close__inner .svb--offset { width: 100%; }
}

/* Strategy · risk "Collateral first" panel → 02 Split Field */
body.strategy-page .st-risk__panel.svb--split {
  display: block; padding: clamp(30px, 3.6vw, 52px) clamp(24px, 3.2vw, 44px);
  background: linear-gradient(152deg, #D65A4D 0%, #C93B2A 58%, #B73528 100%);
}