/* salvit.com styles. Tokens come from the Salvit brand guide, Version 3.3, page 20.
   White, Stone and Ink carry the page. Color appears only in data, in the words that name it,
   and in the partner's red pen. Hanken Grotesk sets every word and number. */

@font-face { font-family: 'Hanken Grotesk'; font-style: normal; font-weight: 300; font-display: swap; src: url('/fonts/hanken-grotesk-latin-300-normal.woff2') format('woff2'); }
@font-face { font-family: 'Hanken Grotesk'; font-style: normal; font-weight: 400; font-display: swap; src: url('/fonts/hanken-grotesk-latin-400-normal.woff2') format('woff2'); }
@font-face { font-family: 'Hanken Grotesk'; font-style: italic; font-weight: 400; font-display: swap; src: url('/fonts/hanken-grotesk-latin-400-italic.woff2') format('woff2'); }
@font-face { font-family: 'Hanken Grotesk'; font-style: normal; font-weight: 500; font-display: swap; src: url('/fonts/hanken-grotesk-latin-500-normal.woff2') format('woff2'); }
@font-face { font-family: 'Hanken Grotesk'; font-style: normal; font-weight: 600; font-display: swap; src: url('/fonts/hanken-grotesk-latin-600-normal.woff2') format('woff2'); }
/* Jost sets the wordmark only (brand guide page 4). Block display keeps the wordmark from flashing in another face. */
@font-face { font-family: 'Jost'; font-style: normal; font-weight: 400; font-display: block; src: url('/fonts/jost-latin-400-normal.woff2') format('woff2'); }
@font-face { font-family: 'Jost'; font-style: normal; font-weight: 500; font-display: block; src: url('/fonts/jost-latin-500-normal.woff2') format('woff2'); }

:root {
  --salvit-ink: #1C1A19;
  --salvit-graphite: #57524D;
  --salvit-stone: #F1EFEB;
  --salvit-rule: #DAD7D2;
  --salvit-grid: #E9E6E1;
  --salvit-pen: #B51F1F;
  --salvit-pebble: #BDB7AF;
  --salvit-denim: #285CC2;      --salvit-denim-text: #285CC2;
  --salvit-clementine: #E67425; --salvit-clementine-text: #C35500;
  --salvit-jade: #37A17F;       --salvit-jade-text: #068665;
  --salvit-pool: #6ABCE6;       --salvit-pool-text: #267EA5;
  --salvit-field: #858079;      /* form borders: 3.9:1 on white */
  --mark: var(--salvit-pen);    /* read by hand.js */
  --pencil: #3E3A36;

  --font: 'Hanken Grotesk', 'Helvetica Neue', Arial, sans-serif;
  --body: clamp(1.125rem, 1.07rem + 0.2vw, 1.25rem);   /* 18 to 20 px, guide page 4 */
  --wrap: 1240px;
  --gutter: clamp(20px, 5vw, 48px);
  --section: clamp(72px, 9vw, 136px);
  --header: 76px;
}

*, *::before, *::after { box-sizing: border-box; }
html { -webkit-text-size-adjust: 100%; text-size-adjust: 100%; scroll-padding-top: calc(var(--header) + 16px); }
@media (prefers-reduced-motion: no-preference) { html { scroll-behavior: smooth; } }
body {
  margin: 0; background: #fff; color: var(--salvit-ink);
  font-family: var(--font); font-size: var(--body); line-height: 1.6; font-weight: 400;
  -webkit-font-smoothing: antialiased; -moz-osx-font-smoothing: grayscale;
}
img, svg { display: block; max-width: 100%; }
img { height: auto; }
p { margin: 0; }
a { color: inherit; text-decoration-thickness: 1px; text-underline-offset: 0.18em; }
a:hover { text-decoration-thickness: 2px; }
:focus-visible { outline: 2px solid var(--salvit-ink); outline-offset: 3px; }

.wrap { max-width: var(--wrap); margin: 0 auto; padding: 0 var(--gutter); }
.sr-only { position: absolute !important; width: 1px; height: 1px; padding: 0; margin: -1px; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; border: 0; }
.page-hidden { display: none !important; }
[hidden] { display: none !important; }

.skip-link { position: absolute; left: 12px; top: -60px; z-index: 100; background: var(--salvit-ink); color: #fff; padding: 10px 14px; border-radius: 2px; text-decoration: none; font-size: 1rem; }
.skip-link:focus { top: 12px; }

/* ---------- type ---------- */
h1, h2, h3 { margin: 0; font-weight: 400; color: var(--salvit-ink); }
h1 { font-size: clamp(2.5rem, 1.7rem + 2.4vw, 3.5rem); line-height: 1.05; letter-spacing: -0.02em; text-wrap: balance; }
h2 { font-size: clamp(1.875rem, 1.35rem + 1.7vw, 2.875rem); line-height: 1.12; letter-spacing: -0.012em; text-wrap: balance; }
h3 { font-size: 1.25rem; line-height: 1.35; font-weight: 500; }
.label { font-size: 0.9375rem; line-height: 1.4; color: var(--salvit-graphite); margin-bottom: 18px; }
.lead { font-size: clamp(1.1875rem, 1.1rem + 0.35vw, 1.375rem); line-height: 1.55; color: var(--salvit-graphite); max-width: 34em; }
.lead-sm { font-size: 1.125rem; line-height: 1.6; color: var(--salvit-graphite); max-width: 32em; }
.fine { font-size: 0.9375rem; line-height: 1.5; color: var(--salvit-graphite); max-width: 36em; }
.num { font-variant-numeric: tabular-nums lining-nums; }
.nowrap { white-space: nowrap; }
.w-denim { color: var(--salvit-denim-text); }
.w-clem { color: var(--salvit-clementine-text); }
.w-jade { color: var(--salvit-jade-text); }

/* ---------- buttons ---------- */
.btn {
  display: inline-flex; align-items: center; justify-content: center; gap: 8px;
  min-height: 50px; padding: 0 24px; border-radius: 2px; border: 1px solid var(--salvit-ink);
  font: 500 1.0625rem/1.1 var(--font); text-decoration: none; cursor: pointer; white-space: nowrap;
  transition: background-color 0.15s ease, color 0.15s ease, border-color 0.15s ease;
}
.btn-primary { background: var(--salvit-ink); color: #fff; }
.btn-primary:hover { background: #3E3A36; border-color: #3E3A36; }
.btn-secondary { background: transparent; color: var(--salvit-ink); }
.btn-secondary:hover { background: var(--salvit-stone); }
.btn-sm { min-height: 42px; padding: 0 18px; font-size: 1rem; }
.btn-block { width: 100%; }
.btn[disabled] { opacity: 0.55; cursor: not-allowed; }
.actions { display: flex; flex-wrap: wrap; gap: 12px; }

/* ---------- header ---------- */
.site-header { position: sticky; top: 0; z-index: 40; background: #fff; border-bottom: 1px solid transparent; transition: border-color 0.2s ease; }
.site-header.is-scrolled, .site-header.is-open { border-bottom-color: var(--salvit-rule); }
.header-row { display: flex; align-items: center; gap: 32px; height: var(--header); }
/* The wordmark, brand guide 3.3 page 3: SALVIT in Jost Medium tracked .34em inside a frame, ADVISORS beneath
   in Jost tracked .62em. Always Ink or white. Compact (no ADVISORS) in navigation and footers. */
.wordmark { display: inline-flex; flex-direction: column; align-items: center; line-height: 1; --wm: 22px; }
.wm-frame { display: inline-block; font: 500 var(--wm)/1 'Jost', 'Hanken Grotesk', sans-serif; letter-spacing: 0.34em; padding: 0.16em 0.26em 0.12em 0.34em; border: max(1px, calc(var(--wm) / 48)) solid currentColor; text-align: center; white-space: nowrap; }
.wm-sub { display: block; font: 400 max(calc(var(--wm) * 0.2), 9px)/1 'Jost', 'Hanken Grotesk', sans-serif; letter-spacing: 0.62em; padding-left: 0.62em; margin-top: max(calc(var(--wm) * 0.2), 6px); text-align: center; white-space: nowrap; }
.brand { display: inline-flex; padding: 7px 0; color: var(--salvit-ink); text-decoration: none; }
.brand .wordmark { --wm: 22px; }
.nav { display: flex; align-items: center; gap: 28px; margin-left: auto; }
.nav a { font-size: 1rem; text-decoration: none; padding: 6px 0; border-bottom: 1px solid transparent; }
.nav a:hover { border-bottom-color: var(--salvit-ink); }
.menu-btn {
  display: none; margin-left: auto; align-items: center; min-height: 44px; padding: 0 14px;
  font: 500 1rem/1 var(--font); color: var(--salvit-ink); background: #fff;
  border: 1px solid var(--salvit-ink); border-radius: 2px; cursor: pointer;
}
.mobile-menu { padding: 4px var(--gutter) 24px; border-top: 1px solid var(--salvit-rule); background: #fff; }
.mobile-menu a:not(.btn) { display: block; padding: 14px 0; font-size: 1.125rem; text-decoration: none; border-bottom: 1px solid var(--salvit-rule); }
.mobile-menu .btn { margin-top: 20px; }
.site-header.is-flow .nav, .site-header.is-flow .header-cta, .site-header.is-flow .menu-btn { display: none; }
@media (max-width: 899px) {
  .nav, .header-cta { display: none; }
  .menu-btn { display: inline-flex; }
}

/* ---------- hero ---------- */
.hero { padding: clamp(40px, 6.5vw, 96px) 0 clamp(64px, 8vw, 120px); }
.hero-grid { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); gap: clamp(40px, 6vw, 96px); align-items: center; }
.hero .lead { margin-top: 28px; }
.hero .actions { margin-top: 36px; }
.hero .fine { margin-top: 16px; }
@media (max-width: 1023px) { .hero-grid { grid-template-columns: minmax(0, 1fr); } }

/* ---------- exhibits ---------- */
.exhibit { margin: 0; }
.ex-title { font-size: clamp(1.125rem, 1.05rem + 0.35vw, 1.375rem); line-height: 1.35; margin-bottom: 6px; }
.ex-sub { font-size: 0.875rem; line-height: 1.45; color: var(--salvit-graphite); margin-bottom: 14px; }
.chart { position: relative; min-height: 280px; }
.chart svg { overflow: visible; font-family: var(--font); }
.note { font-style: italic; color: var(--salvit-pen); font-size: 1rem; line-height: 1.45; margin-top: 10px; max-width: 30em; }
.ex-cap { font-size: 0.875rem; line-height: 1.45; color: var(--salvit-graphite); margin-top: 18px; padding-top: 12px; border-top: 1px solid var(--salvit-rule); }

/* ---------- client logos ---------- */
.clients { border-top: 1px solid var(--salvit-rule); border-bottom: 1px solid var(--salvit-rule); }
.clients-row { display: grid; grid-template-columns: 170px minmax(0, 1fr); align-items: center; gap: 32px; padding-top: 30px; padding-bottom: 30px; }
.clients .label { margin: 0; }
.logos { list-style: none; margin: 0; padding: 0; display: grid; grid-template-columns: repeat(6, minmax(0, 1fr)); gap: 28px 40px; align-items: center; }
.logos li { display: flex; justify-content: center; }
.logos img { width: auto; max-width: 100%; filter: grayscale(1); mix-blend-mode: multiply; opacity: 0.72; }
.logo-stately { height: 18px; } .logo-duradry { height: 28px; } .logo-pipsticks { height: 34px; }
.logo-tpj { height: 34px; } .logo-natpat { height: 34px; }
@media (max-width: 899px) {
  .clients-row { grid-template-columns: minmax(0, 1fr); gap: 20px; }
  .logos { grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 28px 24px; }
}

/* ---------- sections ---------- */
.section { padding: var(--section) 0; }
.band-stone { background: var(--salvit-stone); }
.section-head { max-width: 780px; }
.section-head .lead-sm { margin-top: 20px; }
.two-col { display: grid; grid-template-columns: minmax(0, 4fr) minmax(0, 7fr); gap: clamp(40px, 6vw, 112px); }
.col-head .lead-sm { margin-top: 20px; }
@media (min-width: 1024px) { .col-head { position: sticky; top: calc(var(--header) + 40px); align-self: start; } }
@media (max-width: 1023px) { .two-col { grid-template-columns: minmax(0, 1fr); } }

/* how we work */
.steps { list-style: none; margin: 0; padding: 0; border-top: 1px solid var(--salvit-ink); counter-reset: step; }
.steps li { display: grid; grid-template-columns: 56px minmax(0, 1fr); column-gap: 20px; padding: 26px 0 28px; border-bottom: 1px solid var(--salvit-rule); }
.step-n { grid-row: 1 / span 2; font-size: 1rem; line-height: 1.75; color: var(--salvit-graphite); font-variant-numeric: tabular-nums; }
.steps p { margin-top: 6px; color: var(--salvit-graphite); max-width: 36em; }

/* the platform */
.sheet { background: #fff; margin-top: 48px; padding: clamp(20px, 3vw, 40px); border: 1px solid var(--salvit-rule); }
.sheet-head { display: flex; justify-content: space-between; align-items: baseline; gap: 16px; padding-bottom: 14px; border-bottom: 1px solid var(--salvit-rule); font-size: 0.9375rem; color: var(--salvit-graphite); }
.sheet-head b { font-weight: 500; color: var(--salvit-ink); }
.tiles { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); border-bottom: 1px solid var(--salvit-rule); }
.tile { padding: 22px 24px 24px 0; min-width: 0; }
.tile + .tile { border-left: 1px solid var(--salvit-rule); padding-left: 24px; }
.tile-label { font-size: 0.9375rem; color: var(--salvit-graphite); }
.tile-value { font-size: clamp(2rem, 1.6rem + 1.2vw, 2.75rem); line-height: 1.1; margin: 6px 0 12px; font-variant-numeric: tabular-nums lining-nums; }
.spark { height: 40px; }
.cohort { padding-top: 28px; }
.cohort .ex-title { margin-bottom: 4px; }
.heat { width: 100%; border-collapse: separate; border-spacing: 2px; font-variant-numeric: tabular-nums lining-nums; table-layout: fixed; }
.heat th, .heat td { font-size: 0.9375rem; text-align: center; padding: 10px 2px; font-weight: 400; }
.heat thead th { color: var(--salvit-graphite); }
.heat tbody th { text-align: left; color: var(--salvit-ink); }
.heat thead th:first-child { width: 64px; }
.heat .s0 { background: #EBF2FF; } .heat .s1 { background: #C6D8F9; } .heat .s2 { background: #98B8F2; }
.heat .s3 { background: #6894E5; } .heat .s4 { background: #3D70D1; color: #fff; }
.heat .s5 { background: #2151AF; color: #fff; } .heat .s6 { background: #123780; color: #fff; }
@media (max-width: 719px) {
  .tiles { grid-template-columns: minmax(0, 1fr); }
  .tile { padding: 18px 0; }
  .tile + .tile { border-left: 0; border-top: 1px solid var(--salvit-rule); padding-left: 0; }
  .heat th, .heat td { font-size: 0.8125rem; padding: 9px 0; }
  .heat thead th:first-child { width: 40px; }
}

/* results */
.results { width: 100%; border-collapse: collapse; margin-top: 48px; font-variant-numeric: tabular-nums lining-nums; }
.results th, .results td { text-align: left; padding: 22px 24px 22px 0; border-bottom: 1px solid var(--salvit-rule); vertical-align: baseline; }
.results thead th { font-size: 0.9375rem; font-weight: 400; color: var(--salvit-graphite); padding-top: 0; padding-bottom: 12px; border-bottom-color: var(--salvit-ink); }
.results tbody th { font-weight: 400; font-size: 1.125rem; }
.results .big { font-size: clamp(1.5rem, 1.2rem + 1vw, 2.25rem); line-height: 1.15; }
.results .from { color: var(--salvit-graphite); }
.results td:last-child, .results th:last-child { padding-right: 0; }
@media (max-width: 719px) {
  .results thead { position: absolute; width: 1px; height: 1px; overflow: hidden; clip: rect(0 0 0 0); }
  .results tr { display: grid; grid-template-columns: minmax(0, 0.85fr) minmax(0, 1.15fr) minmax(0, 1fr); column-gap: 14px; padding: 20px 0; border-bottom: 1px solid var(--salvit-rule); }
  .results tbody th { grid-column: 1 / -1; padding: 0 0 8px; border: 0; }
  .results td { padding: 0; border: 0; }
  .results td::before { content: attr(data-label); display: block; font-size: 0.875rem; color: var(--salvit-graphite); margin-bottom: 2px; }
  .results .big { font-size: 1.375rem; }
  .results td:last-child { font-size: 1rem; }
}

/* about */
.about-grid { display: grid; grid-template-columns: minmax(0, 4fr) minmax(0, 7fr); gap: clamp(32px, 6vw, 112px); align-items: start; }
.portrait { width: 100%; max-width: 400px; aspect-ratio: 1; object-fit: cover; background: var(--salvit-stone); }
.person { margin-top: 36px; padding-top: 24px; border-top: 1px solid var(--salvit-ink); max-width: 38em; }
.person p { margin-top: 10px; color: var(--salvit-graphite); }
@media (max-width: 1023px) { .about-grid { grid-template-columns: minmax(0, 1fr); } .portrait { max-width: 320px; } }

/* quotes */
.quotes-grid { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: clamp(32px, 5vw, 80px); margin-top: 48px; }
.quote { margin: 0; padding-top: 28px; border-top: 1px solid var(--salvit-ink); display: flex; flex-direction: column; }
.quote-logo { width: auto; align-self: flex-start; margin-bottom: 26px; filter: grayscale(1); mix-blend-mode: multiply; opacity: 0.72; }
.quote-logo.logo-tpj { height: 34px; } .quote-logo.logo-pipsticks { height: 40px; }
.quote blockquote { margin: 0; font-size: clamp(1.25rem, 1.1rem + 0.5vw, 1.5rem); line-height: 1.45; }
.quote figcaption { margin-top: 20px; font-size: 1rem; color: var(--salvit-graphite); }
@media (max-width: 899px) { .quotes-grid { grid-template-columns: minmax(0, 1fr); } }

/* close */
.close-grid { display: grid; grid-template-columns: minmax(0, 6fr) minmax(0, 5fr); gap: clamp(32px, 5vw, 80px); align-items: end; }
.close-grid .actions { margin-top: 28px; }
@media (max-width: 1023px) { .close-grid { grid-template-columns: minmax(0, 1fr); } }

/* ---------- footer ---------- */
.site-footer { background: var(--salvit-ink); color: #fff; padding: 64px 0 40px; }
.site-footer a { color: #fff; }
.site-footer :focus-visible { outline-color: #fff; }
.footer-grid { display: grid; grid-template-columns: minmax(0, 5fr) minmax(0, 3fr) minmax(0, 4fr); gap: 40px; }
.footer-logo { color: #fff; display: inline-flex; padding: 5px 0; text-decoration: none; }
.footer-logo .wordmark { --wm: 26px; }
.footer-line { margin-top: 20px; color: #CFCBC5; font-size: 1rem; }
.footer-links { list-style: none; margin: 0; padding: 0; display: grid; gap: 10px; font-size: 1rem; }
.footer-small { color: #CFCBC5; font-size: 0.9375rem; }
.footer-base { margin-top: 56px; padding-top: 20px; border-top: 1px solid #3E3A36; color: #CFCBC5; font-size: 0.9375rem; }
@media (max-width: 899px) { .footer-grid { grid-template-columns: minmax(0, 1fr); } }

/* ---------- lead flows: form, growth report, booking ---------- */
.flow { padding: clamp(28px, 4vw, 56px) 0 clamp(72px, 8vw, 112px); min-height: calc(100vh - var(--header)); }
.flow-back { appearance: none; background: none; border: 0; padding: 6px 0; font: 400 1rem/1.4 var(--font); color: var(--salvit-ink); text-decoration: underline; text-underline-offset: 0.2em; cursor: pointer; }
.flow-col { max-width: 680px; margin: 28px auto 0; }
.flow-title { font-size: clamp(2rem, 1.5rem + 2vw, 3rem); line-height: 1.1; letter-spacing: -0.015em; }
.flow-title:focus { outline: none; }
.flow-desc { margin-top: 14px; color: var(--salvit-graphite); }
.progress { margin: 28px 0 32px; }
.progress-label { display: flex; justify-content: space-between; font-size: 0.9375rem; color: var(--salvit-graphite); }
.progress-track { height: 4px; background: var(--salvit-rule); margin-top: 8px; }
.progress-fill { height: 100%; background: var(--salvit-ink); }
.field { margin-bottom: 22px; }
.field > label, .field > .field-label { display: block; font-size: 1rem; font-weight: 500; margin-bottom: 8px; }
.input, .select {
  width: 100%; min-height: 52px; padding: 12px 14px; font: 400 1.0625rem/1.3 var(--font); color: var(--salvit-ink);
  background: #fff; border: 1px solid var(--salvit-field); border-radius: 2px;
}
.select { appearance: none; background-image: linear-gradient(45deg, transparent 50%, var(--salvit-ink) 50%), linear-gradient(135deg, var(--salvit-ink) 50%, transparent 50%); background-position: calc(100% - 20px) 50%, calc(100% - 14px) 50%; background-size: 6px 6px; background-repeat: no-repeat; padding-right: 40px; }
.input:focus, .select:focus { outline: 2px solid var(--salvit-ink); outline-offset: 1px; border-color: var(--salvit-ink); }
.input::placeholder { color: #8A847D; }
.url-row { display: flex; gap: 10px; }
.url-row .select { width: auto; flex: 0 0 auto; }
.hint { font-size: 0.875rem; color: var(--salvit-graphite); margin-top: 6px; }
.checks { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 6px 24px; border: 0; margin: 0; padding: 0; }
.checks legend { font-size: 1rem; font-weight: 500; margin-bottom: 8px; padding: 0; }
.check { display: flex; align-items: center; gap: 10px; font-size: 1rem; min-height: 40px; cursor: pointer; }
.check input { width: 20px; height: 20px; margin: 0; accent-color: var(--salvit-ink); flex: 0 0 auto; }
.check.is-disabled { opacity: 0.6; cursor: not-allowed; }
.form-actions { display: flex; gap: 12px; margin-top: 32px; flex-wrap: wrap; }
.form-actions .btn { flex: 1 1 220px; }
.facts { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); border-top: 1px solid var(--salvit-ink); margin: 32px 0 28px; }
.fact { padding: 20px 24px 22px 0; }
.fact + .fact { border-left: 1px solid var(--salvit-rule); padding-left: 24px; padding-right: 0; }
.fact p { margin-top: 6px; color: var(--salvit-graphite); font-size: 1rem; }
.notice { background: var(--salvit-stone); border-left: 3px solid var(--salvit-ink); padding: 14px 16px; margin-bottom: 20px; font-size: 1rem; }
.notice b { font-weight: 600; }
.loading { display: flex; align-items: center; gap: 12px; }
.spinner { width: 18px; height: 18px; border: 2px solid var(--salvit-rule); border-top-color: var(--salvit-ink); border-radius: 50%; animation: spin 0.9s linear infinite; }
@keyframes spin { to { transform: rotate(360deg); } }
@media (prefers-reduced-motion: reduce) { .spinner { animation: none; border-top-color: var(--salvit-graphite); } }
.legal { margin-top: 16px; font-size: 0.875rem; color: var(--salvit-graphite); text-align: center; }
.book-grid { display: grid; grid-template-columns: minmax(0, 2fr) minmax(0, 1fr); gap: 32px; margin-top: 32px; }
.calendar { border: 1px solid var(--salvit-rule); min-height: 640px; background: #fff; }
.calendar iframe { display: block; width: 100%; height: 100%; min-height: 640px; border: 0; }
.aside { background: var(--salvit-stone); padding: 28px; display: flex; flex-direction: column; gap: 16px; }
.aside h3 { font-size: 1.375rem; font-weight: 400; line-height: 1.25; }
.aside .quote-mini { border-top: 1px solid var(--salvit-rule); padding-top: 16px; font-size: 1rem; }
.aside .quote-mini figcaption { display: flex; align-items: center; gap: 10px; margin-top: 12px; font-size: 0.9375rem; color: var(--salvit-graphite); }
.aside .quote-mini img { width: 36px; height: 36px; border-radius: 50%; object-fit: cover; }
.aside .btn { margin-top: auto; }
@media (max-width: 899px) {
  .book-grid { grid-template-columns: minmax(0, 1fr); }
  .facts { grid-template-columns: minmax(0, 1fr); }
  .fact + .fact { border-left: 0; border-top: 1px solid var(--salvit-rule); padding-left: 0; }
}
@media (max-width: 479px) { .checks { grid-template-columns: minmax(0, 1fr); } }

/* ---------- legal pages ---------- */
.doc { padding: clamp(40px, 6vw, 88px) 0 var(--section); }
.doc-col { max-width: 760px; }
.doc h1 { font-size: clamp(2.25rem, 1.6rem + 2.4vw, 3.5rem); }
.doc .updated { margin-top: 12px; color: var(--salvit-graphite); font-size: 1rem; }
.doc h2 { font-size: 1.5rem; line-height: 1.3; margin: 48px 0 14px; letter-spacing: 0; }
.doc h3 { margin: 28px 0 10px; }
.doc p, .doc li { font-size: 1.0625rem; line-height: 1.65; color: var(--salvit-ink); }
.doc p + p { margin-top: 14px; }
.doc ul, .doc ol { padding-left: 1.3em; margin: 12px 0; }
.doc li + li { margin-top: 8px; }
.doc .summary { background: var(--salvit-stone); padding: 24px 28px; margin-top: 36px; }
.doc .summary h2 { margin-top: 0; }

/* ---------- preview badge (non-production hosts only) ---------- */
.preview-badge { position: fixed; left: 16px; bottom: 16px; z-index: 60; background: var(--salvit-ink); color: #fff; font-size: 0.875rem; line-height: 1.35; padding: 8px 12px; border-radius: 2px; max-width: calc(100vw - 32px); }
.preview-badge a { color: #fff; font-weight: 500; }
.preview-badge :focus-visible { outline-color: #fff; }

@media print {
  .site-header, .preview-badge, .actions, .site-footer nav { display: none !important; }
  .section, .hero { padding: 32px 0; }
}

/* ======================================================================
   Version 2: multi-page site from the October 2026 research brief.
   Color stays to Ink, tones of one blue and the red pen.
   ====================================================================== */

/* Placeholders and review notes exist for the preview only. Hidden unless the host is a preview. */
html:not([data-preview]) .placeholder, html:not([data-preview]) .review-note { display: none !important; }

.nav a[aria-current="page"] { border-bottom-color: var(--salvit-ink); }
.mobile-menu a[aria-current="page"] { font-weight: 500; }

/* inner page heroes */
.page-hero { padding: clamp(40px, 6vw, 88px) 0 clamp(24px, 3vw, 40px); }
.page-hero h1 { max-width: 18em; }
.page-hero .lead { margin-top: 22px; }

/* home */
.problems { list-style: none; margin: 40px 0 0; padding: 0; display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); column-gap: clamp(32px, 5vw, 80px); border-top: 1px solid var(--salvit-ink); }
.problems li { padding: 20px 0; border-bottom: 1px solid var(--salvit-rule); font-size: clamp(1.125rem, 1.07rem + 0.25vw, 1.3125rem); line-height: 1.4; }
.four { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 28px clamp(24px, 3vw, 40px); margin-top: 40px; }
.four > div { border-top: 1px solid var(--salvit-ink); padding-top: 18px; }
.four p { margin-top: 8px; color: var(--salvit-graphite); font-size: 1.0625rem; }
.aside-line { margin-top: 32px; color: var(--salvit-graphite); max-width: 46em; }
.aside-line a, .more a { color: var(--salvit-ink); font-weight: 500; }
.more { margin-top: 20px; }
.col-head .lead-sm + .more { margin-top: 14px; }
@media (max-width: 1023px) { .four { grid-template-columns: repeat(2, minmax(0, 1fr)); } }
@media (max-width: 719px) { .problems, .four { grid-template-columns: minmax(0, 1fr); } }

/* the weekly pacing exhibit */
.pace { width: 100%; border-collapse: collapse; font-variant-numeric: tabular-nums lining-nums; margin-top: 4px; }
.pace th, .pace td { padding: 13px 0; border-bottom: 1px solid var(--salvit-rule); text-align: right; font-size: 1.0625rem; }
.pace thead th { font-size: 0.875rem; font-weight: 400; color: var(--salvit-graphite); border-bottom-color: var(--salvit-ink); padding-top: 0; }
.pace tbody th { text-align: left; font-weight: 400; padding-right: 16px; }
.pace td { padding-left: 16px; }
.pace .is-key th, .pace .is-key td { font-weight: 500; }
.mark-target { display: inline-block; position: relative; padding: 0 2px; }
@media (max-width: 479px) { .pace th, .pace td { font-size: 0.9375rem; } .pace td { padding-left: 10px; } }

/* lists */
.steps-plain li { grid-template-columns: minmax(0, 1fr); }
.steps-plain h3, .steps-plain p { grid-column: 1; }
.steps li > p:only-of-type { margin-top: 0; }
.steps li > .step-n + p { color: var(--salvit-ink); font-size: 1.125rem; }
.ticks { list-style: none; margin: 0; padding: 0; border-top: 1px solid var(--salvit-ink); }
.ticks li { padding: 16px 0; border-bottom: 1px solid var(--salvit-rule); max-width: 40em; }
.svc + .svc { padding-top: 0; }
.svc .exhibit { margin-top: 40px; }

/* comparison and access tables */
.compare { width: 100%; border-collapse: collapse; margin-top: 40px; }
.compare th, .compare td { text-align: left; vertical-align: top; padding: 18px 24px 18px 0; border-bottom: 1px solid var(--salvit-rule); font-size: 1.0625rem; line-height: 1.5; }
.compare thead th { font-size: 0.9375rem; font-weight: 400; color: var(--salvit-graphite); border-bottom-color: var(--salvit-ink); padding-top: 0; padding-bottom: 12px; }
.compare tbody th { font-weight: 500; width: 24%; }
.compare td:last-child { color: var(--salvit-ink); }
.compare td:nth-child(2) { color: var(--salvit-graphite); }
@media (max-width: 719px) {
  .compare thead { position: absolute; width: 1px; height: 1px; overflow: hidden; clip: rect(0 0 0 0); }
  .compare tr { display: block; padding: 16px 0; border-bottom: 1px solid var(--salvit-rule); }
  .compare th, .compare td { display: block; border: 0; padding: 2px 0; width: auto; }
  .compare tbody th { width: auto; margin-bottom: 4px; }
}

/* principles and case grids */
.principles { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 32px clamp(24px, 3vw, 48px); margin-top: 40px; }
.principles > div { border-top: 1px solid var(--salvit-ink); padding-top: 18px; }
.principles p { margin-top: 8px; color: var(--salvit-graphite); font-size: 1.0625rem; }
.cases { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 24px; margin-top: 40px; }
@media (max-width: 1023px) { .principles, .cases { grid-template-columns: minmax(0, 1fr); } .principles { grid-template-columns: repeat(2, minmax(0, 1fr)); } }
@media (max-width: 719px) { .principles { grid-template-columns: minmax(0, 1fr); } }

/* media placeholders: a labeled frame, as the brand guide shows client images it can't use */
.placeholder { margin: 32px 0 0; background: var(--salvit-stone); border: 1px dashed #9A948D; display: flex; min-height: 220px; }
.cases .placeholder { margin: 0; }
.ph-inner { padding: clamp(18px, 2.5vw, 28px); display: flex; flex-direction: column; gap: 8px; max-width: 38em; }
.ph-kind { font-size: 0.8125rem; color: var(--salvit-graphite); }
.ph-title { font-size: 1.1875rem; font-weight: 500; line-height: 1.3; }
.ph-desc { font-size: 1rem; line-height: 1.5; }
.ph-spec { font-size: 0.875rem; color: var(--salvit-graphite); margin-top: auto; }
@media (max-width: 719px) { .placeholder { aspect-ratio: auto !important; } }

/* review notes for the team, preview only */
.review-note { margin-top: 20px; padding: 12px 14px; border: 1px dashed var(--salvit-ink); background: #fff; font-size: 0.9375rem; line-height: 1.5; max-width: 44em; }
.review-note b { font-weight: 600; }

/* questions */
.faq { border-top: 1px solid var(--salvit-ink); }
.faq details { border-bottom: 1px solid var(--salvit-rule); }
.faq summary { cursor: pointer; padding: 18px 32px 18px 0; font-size: 1.125rem; font-weight: 500; list-style: none; position: relative; }
.faq summary::-webkit-details-marker { display: none; }
.faq summary::after { content: '+'; position: absolute; right: 4px; top: 16px; font-weight: 400; font-size: 1.375rem; color: var(--salvit-graphite); }
.faq details[open] summary::after { content: '\2212'; }
.faq details p { padding: 0 0 20px; color: var(--salvit-graphite); max-width: 40em; }

/* start page */
.options { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: clamp(24px, 4vw, 64px); }
.options > div { border-top: 1px solid var(--salvit-ink); padding-top: 24px; display: flex; flex-direction: column; align-items: flex-start; gap: 14px; }
.options h2 { font-size: clamp(1.5rem, 1.2rem + 1vw, 2rem); }
.start-options { padding-top: clamp(24px, 3vw, 40px); }
@media (max-width: 719px) { .options { grid-template-columns: minmax(0, 1fr); } }

/* footer, three columns of links */
.footer-grid nav + nav { margin-top: 0; }
.footer-base a { color: #fff; }

/* Version 2 fixes */
.cta-band { background: #fff; border-top: 1px solid var(--salvit-rule); }
.col-head h2 { font-size: clamp(1.75rem, 1.35rem + 1.2vw, 2.375rem); }
.svc .two-col { grid-template-columns: minmax(0, 5fr) minmax(0, 7fr); }
@media (max-width: 1023px) { .svc .two-col { grid-template-columns: minmax(0, 1fr); } }
.cases .placeholder { aspect-ratio: auto !important; min-height: 280px; }
.quote.pull { max-width: 880px; border-top: 0; padding-top: 0; }
.quote.pull blockquote { font-size: clamp(1.5rem, 1.2rem + 1vw, 2.125rem); line-height: 1.35; }

.pace td:last-child { padding-left: 26px; }
@media (max-width: 479px) { .pace td:last-child { padding-left: 22px; } }

/* Client quotes. Quotes still awaiting client permission carry .preview-only: hidden on salvit.com,
   and removed from the HTML when Amplify builds any branch other than dev (see amplify.yml). */
html:not([data-preview]) .preview-only { display: none !important; }
.lead-quote { max-width: 980px; border-top: 0; padding-top: 0; margin-bottom: clamp(40px, 5vw, 64px); }
.lead-quote blockquote { font-size: clamp(1.75rem, 1.3rem + 1.6vw, 2.75rem); line-height: 1.25; letter-spacing: -0.01em; }
.quotes-grid { grid-template-columns: repeat(auto-fit, minmax(min(100%, 380px), 1fr)); }
.band-stone .quotes-grid { margin-top: 0; }
.quote-sm { margin: 28px 0 0; padding-top: 16px; border-top: 1px solid var(--salvit-ink); max-width: 34em; }
.quote-sm blockquote { margin: 0; font-size: 1.1875rem; line-height: 1.45; }
.quote-sm figcaption { margin-top: 10px; font-size: 0.9375rem; color: var(--salvit-graphite); }
.cta-band .quote-sm { margin-top: 24px; }
.lead-quote blockquote, .quote.short blockquote { text-wrap: balance; }
.quote blockquote { text-wrap: pretty; }
.quotes-grid.mixed { grid-template-columns: minmax(0, 7fr) minmax(0, 5fr); align-items: start; }
.quote.short blockquote { font-size: clamp(1.5rem, 1.2rem + 1vw, 2rem); line-height: 1.3; }
@media (max-width: 899px) { .quotes-grid.mixed { grid-template-columns: minmax(0, 1fr); } }

.clients-row { grid-template-columns: 190px minmax(0, 1fr); }
@media (max-width: 899px) { .clients-row { grid-template-columns: minmax(0, 1fr); } }

.logo-underoutfit { height: 16px; }
/* Logo row: each logo keeps its own proportions at its set height, so wide wordmarks are never squeezed. */
.logos { display: flex; flex-wrap: wrap; justify-content: space-between; align-items: center; gap: 24px 36px; }
.logos li { flex: 0 0 auto; }
.logos img { max-width: none; }
@media (max-width: 899px) { .logos { justify-content: flex-start; gap: 22px 32px; } }

/* Booking flow, October 2026: three steps with a step list, and app screenshots across the site.
   The step markers are square, like the wordmark's frame. */
.stepper { list-style: none; margin: 28px 0 24px; padding: 0; display: flex; flex-wrap: wrap; gap: 10px 28px; font-size: 0.9375rem; line-height: 1.4; color: var(--salvit-graphite); }
.stepper li { display: inline-flex; align-items: center; gap: 10px; }
.step-i { display: inline-grid; place-items: center; width: 26px; height: 26px; border: 1px solid var(--salvit-rule); border-radius: 2px; font-size: 0.8125rem; font-variant-numeric: tabular-nums; color: var(--salvit-graphite); }
.stepper li[aria-current="step"] { color: var(--salvit-ink); font-weight: 500; }
.stepper li[aria-current="step"] .step-i { background: var(--salvit-ink); border-color: var(--salvit-ink); color: #fff; }
.stepper li.is-done .step-i { border-color: var(--salvit-ink); color: var(--salvit-ink); }
.flow-col .stepper + .flow-title, .flow-head .stepper + .flow-title { margin-top: 4px; }
.flow-head { max-width: 760px; }
.start-steps .actions { margin-top: 28px; }
.cta-band .fine { margin-top: 16px; }
.shot { margin: 48px 0 0; }
.shot img { width: 100%; height: auto; border: 1px solid var(--salvit-rule); background: #fff; }
.shot figcaption { margin-top: 12px; font-size: 0.9375rem; line-height: 1.5; color: var(--salvit-graphite); max-width: 62em; }
.shot-cap { color: var(--salvit-ink); }
.svc .shot { margin-top: 36px; }
.shot-flow { margin-top: 44px; }
@media (max-width: 719px) {
  .shot { margin-top: 36px; }
}
#lead-form { margin-top: 32px; }
.flow-note { margin-top: 24px; padding: 14px 16px; background: var(--salvit-stone); font-size: 1rem; line-height: 1.5; }
.flow-note b { font-weight: 600; }
#page-2b .notice { margin: 24px 0 0; }
#page-2b .form-actions { margin-top: 24px; }
#page-2b .facts { margin: 40px 0 0; }
.aside .quote-mini { margin: 0; }
@media (max-width: 559px) {
  .stepper { gap: 10px 14px; }
  .stepper li:not([aria-current="step"]) .step-name { position: absolute; width: 1px; height: 1px; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; }
}
/* Google's booking form is taller than its calendar view: room for it without scrolling inside the frame */
.calendar, .calendar iframe { min-height: 780px; }
@media (max-width: 719px) { .calendar, .calendar iframe { min-height: 920px; } }
.book-note { margin-top: 12px; }