/* Strategic Valuation Advisors, shared stylesheet.
   DM Sans throughout. Deep teal sections alternate with pale gray-green ones; tan is used sparingly
   (badge ring, small icon details, focus outline). Sections, in order:
   1 tokens  2 base  3 layout  4 nav  5 buttons  6 hero bands  7 blocks and lists  8 tables  9 forms
   10 footer  11 Catalyst components  12 legacy pages (keep last). */

*, *::before, *::after { box-sizing: border-box; }

/* 1. Tokens ------------------------------------------------------------------------------------ */
:root {
  --font: 'DM Sans', 'Inter', system-ui, -apple-system, 'Segoe UI', Arial, sans-serif;

  /* Palette */
  --c-darkest: #0a2a2f;
  --c-dark: #0e3a40;
  --c-dark-alt: #134a51;
  --c-pale: #b7ccce;      /* body text on dark */
  --c-muted: #86a2a5;     /* icons, rules, small meta on darkest and dark only */
  --c-ink: #2f3d3e;       /* body text on light */
  --c-ink-2: #4f6163;     /* secondary text on light */
  --c-accent: #4f7478;    /* second phrase of a two-tone heading on light */
  --c-light: #e2ebea;
  --c-light-alt: #d5e0df;
  --c-tan: #cf9356;
  --c-white: #ffffff;
  /* Opaque hairlines, so shared card borders do not double up */
  --line-darkest: #33525a;
  --line-dark: #3d6368;
  --line-dark-alt: #447178;
  --line-light: #bccfcd;
  --line-white: #dbe4e3;

  /* Two-tone heading colours; tone classes below swap them */
  --tt-a: var(--c-dark);
  --tt-b: var(--c-accent);

  /* Layout */
  --content: 1320px;
  --pad-x: clamp(16px, 4.2vw, 60px);
  --bleed-x: max(var(--pad-x), calc((100% - var(--content)) / 2));
  --nav-h: 80px;
  --sec-y: 72px;
  --radius: 4px;

  /* Type scale */
  --fs-sm: 14px; --fs-md: 16px; --fs-lg: 18px;
  --fs-h1: 40px; --lh-h1: 46px;
  --fs-h2: 32px; --lh-h2: 40px;
  --fs-h3: 20px; --lh-h3: 24px;
  --fs-num: 32px;
  --lh: 1.6;

  /* Spacing scale */
  --s-1: 8px; --s-2: 16px; --s-3: 24px; --s-4: 32px; --s-5: 48px; --s-6: 64px; --s-7: 88px;

  /* Token names still referenced by page-level styles (pricing, guides, articles, tools) */
  --navy: #0e3a40;
  --navy-hover: #0a2a2f;
  --navy-deep: #0a2a2f;
  --navy-soft: #134a51;
  --tan: #cf9356;
  --accent: #cf9356;
  --accent-dk: var(--navy);
  --text: #2f3d3e;
  --text-2: #4f6163;
  --ink: #0e3a40;
  --body: #2f3d3e;
  --muted: #4f6163;
  --border: #d5e0df;
  --bg: #ffffff;
  --bg-soft: #e2ebea;
  --bg-warm: #e2ebea;
  --white: #ffffff;
  --gray-50: #eef3f2;
  --gray-200: #d5e0df;
  --on-navy: #b7ccce;
  --on-navy-line: rgba(255,255,255,.12);
  --gutter: var(--pad-x);
  --max: calc(var(--content) + 2 * var(--pad-x));
  --shadow-nav: none;
  --error: #a33333;
  --warn-bg: #fdf3e3;
  --warn-border: #ecd3ab;
  --warn-text: #7a5a2b;
}
@media (max-width: 768px) {
  :root {
    --fs-h1: 32px; --lh-h1: 38px;
    --fs-h2: 26px; --lh-h2: 32px;
    --fs-h3: 19px; --lh-h3: 24px;
    --nav-h: 64px; --sec-y: 64px;
    --s-6: 48px; --s-7: 56px;
  }
}

/* 2. Base -------------------------------------------------------------------------------------- */
html { scroll-behavior: smooth; scroll-padding-top: calc(var(--nav-h) + 16px); }
body {
  margin: 0;
  font-family: var(--font);
  font-size: var(--fs-md);
  font-weight: 300;
  line-height: var(--lh);
  color: var(--c-ink);
  background: var(--c-white);
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
  text-rendering: optimizeLegibility;
}
h1, h2, h3, h4 { font-family: var(--font); font-weight: 400; color: var(--c-dark); margin: 0 0 var(--s-2); letter-spacing: 0; text-transform: none; }
h1 { font-size: var(--fs-h1); line-height: var(--lh-h1); font-weight: 500; }
h2 { font-size: var(--fs-h2); line-height: var(--lh-h2); }
h3 { font-size: var(--fs-h3); line-height: var(--lh-h3); margin-bottom: var(--s-1); }
h4 { font-size: var(--fs-md); line-height: 1.4; font-weight: 500; margin-bottom: var(--s-1); }
p { margin: 0 0 var(--s-2); }
.prose p, .block p, .cols-2 p, .cols-3 p, .band p { max-width: 68ch; }
a { color: var(--c-dark); text-decoration: underline; text-decoration-thickness: 1px; text-underline-offset: 3px; }
a:hover { color: var(--c-accent); }
img { max-width: 100%; height: auto; display: block; }
ul, ol { margin: 0 0 var(--s-2); padding-left: 20px; }
li { margin-bottom: 6px; }
strong, b { font-weight: 600; }
small, .small { font-size: var(--fs-sm); color: var(--c-ink-2); }
.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; }

/* Skip link, focus, motion */
.skip-link { position: absolute; left: -9999px; top: 0; z-index: 200; background: var(--c-darkest); color: #fff; padding: 10px 18px; font-size: var(--fs-sm); text-decoration: none; }
.skip-link:focus { left: 0; }
:is(a, button, input, textarea, select, summary):focus-visible { outline: 2px solid var(--c-tan); outline-offset: 2px; }
@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after { transition: none !important; animation: none !important; }
  html { scroll-behavior: auto; }
}

/* 3. Layout ------------------------------------------------------------------------------------ */
.wrap { width: 100%; max-width: var(--max); margin: 0 auto; padding-left: var(--pad-x); padding-right: var(--pad-x); }
.container { max-width: var(--max); margin: 0 auto; padding: var(--s-6) var(--pad-x); }
.container.tight { padding-top: var(--s-5); padding-bottom: var(--s-5); }
.hairline { border-top: 1px solid var(--line-white); }
.cols-2 { display: grid; grid-template-columns: 1fr 1fr; gap: var(--s-5); align-items: start; }
.cols-3 { display: grid; grid-template-columns: repeat(3, 1fr); gap: var(--s-5); align-items: start; }
.cols-4 { display: grid; grid-template-columns: repeat(4, 1fr); gap: var(--s-4); }
@media (max-width: 900px) { .cols-3, .cols-4 { grid-template-columns: 1fr 1fr; } }
@media (max-width: 768px) { .cols-2, .cols-3, .cols-4 { grid-template-columns: 1fr; gap: var(--s-4); } }

/* 4. Nav ---------------------------------------------------------------------------------------
   Every page: a solid sticky bar on the darkest colour. Home page (body.home) on desktop: the bar
   sits transparent over the photo hero and turns solid (fixed) once the page scrolls. */
nav[aria-label="Main"] {
  position: sticky; top: 0; left: auto; right: auto; z-index: 100;
  height: var(--nav-h); margin: 0;
  display: flex; align-items: center; justify-content: space-between; gap: var(--s-3);
  padding: 0 var(--bleed-x);
  background: var(--c-darkest);
  border: 0; border-bottom: 1px solid rgba(255,255,255,.08);
  box-shadow: none; -webkit-backdrop-filter: none; backdrop-filter: none;
  color: #fff;
}
nav[aria-label="Main"] > * { flex-shrink: 0; }
nav[aria-label="Main"] .nav-logo { display: inline-flex; align-items: baseline; gap: 12px; text-decoration: none; color: #fff; }
nav[aria-label="Main"] .nav-logo:hover { color: #fff; }
nav[aria-label="Main"] .nav-sva { font-family: var(--font); font-size: 24px; font-weight: 700; letter-spacing: .06em; line-height: 1; color: #fff; padding: 0; }
nav[aria-label="Main"] .nav-name { font-size: var(--fs-sm); font-weight: 300; line-height: 1; color: var(--c-pale); white-space: nowrap; }
nav[aria-label="Main"] .nav-links {
  display: flex; align-items: center; gap: 4px; list-style: none; margin: 0; padding: 0;
  position: static; top: auto; flex-direction: row;
  background: transparent; border: 0; box-shadow: none; max-height: none; overflow: visible;
}
nav[aria-label="Main"] .nav-links li { margin: 0; border: 0; }
nav[aria-label="Main"] .nav-links a {
  display: inline-block; padding: 8px 10px; font-size: 15px; font-weight: 300; line-height: 1.4;
  color: #fff; text-decoration: none; border-radius: 0; white-space: nowrap; background: transparent;
}
nav[aria-label="Main"] .nav-links a:hover { color: var(--c-pale); }
nav[aria-label="Main"] .nav-links a.active,
nav[aria-label="Main"] .nav-links a[aria-current="page"] {
  background: transparent; color: #fff;
  text-decoration: underline; text-decoration-thickness: 1px; text-underline-offset: 10px;
}
nav[aria-label="Main"] .nav-links .nav-mobile-only { display: none; }
nav[aria-label="Main"] .nav-right { display: flex; align-items: center; gap: var(--s-3); }
nav[aria-label="Main"] .nav-call {
  display: inline-block; margin: 0; font-size: 15px; font-weight: 400; letter-spacing: 0;
  color: #fff; text-decoration: none; white-space: nowrap;
}
nav[aria-label="Main"] .nav-call:hover { color: var(--c-pale); }
nav[aria-label="Main"] .nav-cta {
  display: inline-flex; align-items: center; min-height: 40px; padding: 0 16px;
  font-size: 15px; font-weight: 400; line-height: 1.2;
  background: rgba(255,255,255,.2); color: #fff; text-decoration: none;
  border: 0; border-radius: var(--radius); white-space: nowrap;
}
nav[aria-label="Main"] .nav-cta:hover { background: rgba(255,255,255,.3); color: #fff; }
nav[aria-label="Main"] .nav-toggle {
  display: none; flex-direction: column; justify-content: center; gap: 5px;
  width: 44px; height: 42px; padding: 9px 10px;
  background: none; border: 1px solid rgba(255,255,255,.3); border-radius: var(--radius); cursor: pointer;
}
nav[aria-label="Main"] .nav-toggle span { display: block; height: 2px; background: #fff; border-radius: 2px; transition: transform .2s, opacity .2s; }
nav[aria-label="Main"].nav-open .nav-toggle span:nth-child(1) { transform: translateY(7px) rotate(45deg); }
nav[aria-label="Main"].nav-open .nav-toggle span:nth-child(2) { opacity: 0; }
nav[aria-label="Main"].nav-open .nav-toggle span:nth-child(3) { transform: translateY(-7px) rotate(-45deg); }
@media (max-width: 1399px) { nav[aria-label="Main"] .nav-name { display: none; } }
@media (max-width: 1239px) {
  nav[aria-label="Main"] .nav-name { display: inline; }
  nav[aria-label="Main"] .nav-links {
    display: none; position: absolute; top: var(--nav-h); left: 0; right: 0;
    flex-direction: column; align-items: stretch; gap: 0;
    background: var(--c-darkest); border-top: 1px solid rgba(255,255,255,.08); border-bottom: 1px solid rgba(255,255,255,.08);
    padding: var(--s-1) 0 var(--s-2);
    max-height: calc(100vh - var(--nav-h)); overflow-y: auto;
  }
  nav[aria-label="Main"].nav-open .nav-links { display: flex; }
  nav[aria-label="Main"] .nav-links li { border-bottom: 1px solid rgba(255,255,255,.06); }
  nav[aria-label="Main"] .nav-links li:last-child { border-bottom: 0; }
  nav[aria-label="Main"] .nav-links a { display: block; padding: 13px var(--pad-x); font-size: var(--fs-md); font-weight: 400; }
  nav[aria-label="Main"] .nav-links a.active,
  nav[aria-label="Main"] .nav-links a[aria-current="page"] { background: rgba(255,255,255,.06); text-decoration: none; }
  nav[aria-label="Main"] .nav-links .nav-mobile-only { display: block; }
  nav[aria-label="Main"] .nav-toggle { display: flex; }
}
@media (max-width: 640px) {
  nav[aria-label="Main"] .nav-name { display: none; }
  nav[aria-label="Main"] .nav-call { display: none; }
  nav[aria-label="Main"] .nav-right { gap: 12px; }
  nav[aria-label="Main"] .nav-cta { padding: 0 12px; font-size: var(--fs-sm); }
}
@media (min-width: 1240px) {
  body.home nav[aria-label="Main"] {
    position: absolute; top: 0; left: 0; right: 0;
    background: transparent; border-bottom-color: rgba(255,255,255,.28);
  }
  body.home nav[aria-label="Main"].is-solid {
    position: fixed; background: var(--c-darkest); border-bottom-color: rgba(255,255,255,.08);
    animation: nav-drop .25s ease-out;
  }
}
@keyframes nav-drop { from { transform: translateY(-100%); } to { transform: none; } }

/* 5. Buttons -----------------------------------------------------------------------------------
   .btn is the dark button for light sections; .btn-light is the white button for dark sections and
   photo heroes; .btn-glass is the translucent nav-style button; .btn-secondary / .btn-ghost are
   outlined. All 4px radius, weight 400, about 42px tall. */
.btn, .btn-primary, .form-submit, button.btn, .btn-light, .btn-glass, .btn-secondary, .btn-ghost {
  display: inline-flex; align-items: center; justify-content: center; gap: 8px;
  min-height: 42px; padding: 0 18px; margin: 0;
  font-family: var(--font); font-size: var(--fs-md); font-weight: 400; line-height: 1.2; letter-spacing: 0; text-transform: none;
  text-decoration: none; border-radius: var(--radius); cursor: pointer;
  transition: background .15s, color .15s, border-color .15s;
}
.btn, .btn-primary, .form-submit, button.btn { background: var(--c-dark); color: #fff; border: 1px solid var(--c-dark); }
.btn:hover, .btn-primary:hover, .form-submit:hover, button.btn:hover { background: var(--c-darkest); border-color: var(--c-darkest); color: #fff; }
.btn-light { background: #fff; color: var(--c-dark); border: 1px solid #fff; }
.btn-light:hover { background: var(--c-light-alt); border-color: var(--c-light-alt); color: var(--c-dark); }
.btn-glass { background: rgba(255,255,255,.2); color: #fff; border: 1px solid transparent; }
.btn-glass:hover { background: rgba(255,255,255,.3); color: #fff; }
.btn-secondary, .btn-ghost { background: transparent; color: var(--c-dark); border: 1px solid var(--c-dark); }
.btn-secondary:hover, .btn-ghost:hover { background: var(--c-dark); color: #fff; border-color: var(--c-dark); }
.btn-primary::after, .btn::after, .btn-ghost::after { content: none; }

/* 6. Hero bands (inner pages) ------------------------------------------------------------------
   .hero is the plain dark band used on the 404 and thank-you pages: left
   aligned, white H1, pale text. .page-hero and .article-hero are the guide and article heroes
   (their photo layer comes from each page's own styles). The home page uses .hero-photo (section 11). */
.hero, .page-hero { background: var(--c-dark); color: var(--c-pale); text-align: left; --tt-a: #fff; --tt-b: var(--c-pale); }
.hero { padding: var(--s-7) var(--bleed-x) var(--s-6); }
.hero h1, .page-hero h1, .article-hero h1 { color: #fff; max-width: 860px; margin: 0 0 var(--s-2); }
.hero p, .page-hero p { color: var(--c-pale); font-size: var(--fs-lg); max-width: 680px; margin: 0 0 var(--s-3); }
.hero .call, .page-hero .call { font-size: var(--fs-sm); margin: var(--s-2) 0 0; }
.hero .call a, .page-hero .call a { color: #fff; }
.hero a:not([class]) { color: #fff; }
.hero .btn-secondary, .hero .btn-ghost { background: #fff; color: var(--c-dark); border-color: #fff; }
.hero .btn-secondary:hover, .hero .btn-ghost:hover { background: var(--c-light-alt); border-color: var(--c-light-alt); color: var(--c-dark); }
.hero .btn, .hero .btn-primary { background: #fff; color: var(--c-dark); border-color: #fff; }
.hero .btn:hover, .hero .btn-primary:hover { background: var(--c-light-alt); border-color: var(--c-light-alt); color: var(--c-dark); }
.hero .actions { display: flex; gap: var(--s-2); justify-content: flex-start; flex-wrap: wrap; }
.rule { display: none; }
/* No entrance motion: legacy heroes faded in from opacity 0, which hid the title until the animation ran. */
.hero-inner, .page-hero-inner, .article-hero-inner, .hero-bg, .page-hero, .article-hero { animation: none !important; opacity: 1 !important; transform: none !important; }
.page-hero { padding: var(--s-7) var(--pad-x) var(--s-6); background-color: var(--c-darkest); }
.page-hero .page-hero-inner { max-width: var(--content); margin: 0 auto; text-align: left; }
.page-hero .page-hero-inner h1, .page-hero .page-hero-inner p { margin-left: 0; margin-right: 0; max-width: 780px; }
.page-hero .byline { font-size: var(--fs-sm); }
.page-hero .page-note { color: var(--c-pale); font-size: var(--fs-sm); font-weight: 400; margin-top: var(--s-1); }
.article-hero { padding: var(--s-7) var(--pad-x) var(--s-6); background-color: var(--c-darkest); }
.article-hero .article-hero-inner { margin: 0 auto; }
.article-hero h1 { margin-left: 0; margin-right: 0; }
/* Offer columns: keep the buttons on one baseline regardless of paragraph length. */
.cols-3 > .block { display: flex; flex-direction: column; height: 100%; }
.cols-3 > .block > .btn, .cols-3 > .block > .btn-secondary { margin-top: auto; align-self: flex-start; }

/* 7. Blocks, bands and lists ------------------------------------------------------------------- */
.band { background: var(--c-light); padding: var(--s-6) var(--pad-x); border: 0; }
.band .lead { max-width: var(--content); margin: 0 auto var(--s-4); text-align: left; }
.band .lead > * { max-width: 680px; }
.band .lead p { margin-left: 0; margin-right: 0; }
.band .cols-2 { max-width: var(--content); margin: 0 auto; }
.block h2 { margin-bottom: var(--s-2); }
ul.checks { list-style: none; padding: 0; margin: 0 0 var(--s-3); }
ul.checks li { display: flex; align-items: flex-start; gap: 8px; font-size: var(--fs-sm); color: var(--c-ink-2); margin-bottom: 8px; }
ul.checks li svg { flex-shrink: 0; width: 16px; height: 16px; margin-top: 2px; }
.steps { list-style: none; padding: 0; margin: 0 0 var(--s-3); counter-reset: step; }
.steps li { display: grid; grid-template-columns: 56px 1fr; gap: var(--s-2); padding: var(--s-2) 0; margin: 0; border-top: 1px solid var(--line-white); }
.steps li:first-child { border-top: 0; }
.steps li .n { font-size: var(--fs-h3); font-weight: 400; color: var(--c-accent); line-height: 1.4; }
.steps li strong { color: var(--c-dark); font-weight: 500; }
.numbers { display: grid; grid-template-columns: repeat(4, 1fr); gap: var(--s-4); padding: var(--s-4) 0; border-bottom: 1px solid var(--line-white); }
.numbers .n { font-size: var(--fs-num); font-weight: 400; color: var(--c-dark); line-height: 1.2; }
.numbers .l { font-size: var(--fs-sm); color: var(--c-ink-2); margin-top: 4px; }
.figures { display: grid; grid-template-columns: repeat(4, 1fr); gap: var(--s-4); padding: var(--s-4) 0; border-top: 1px solid var(--line-white); border-bottom: 1px solid var(--line-white); margin-bottom: var(--s-2); }
.figures .n { font-size: 24px; font-weight: 400; color: var(--c-dark); line-height: 1.25; }
.figures .l { font-size: var(--fs-sm); color: var(--c-ink-2); margin-top: 4px; }
@media (max-width: 900px) { .numbers, .figures { grid-template-columns: 1fr 1fr; } }
@media (max-width: 480px) { .figures { grid-template-columns: 1fr; } }
.states { display: grid; grid-template-columns: repeat(4, 1fr); gap: 10px var(--s-4); list-style: none; padding: 0; margin: 0; }
.states li { margin: 0; }
@media (max-width: 768px) { .states { grid-template-columns: 1fr 1fr; } }
.faq h3 { margin-top: var(--s-3); }
.faq p { max-width: 68ch; }
.headshot { width: 160px; height: 160px; object-fit: cover; border-radius: 0; }
.headshot-lg { width: 240px; height: 240px; }
.founder { display: grid; grid-template-columns: 160px 1fr; gap: var(--s-4); align-items: start; }
@media (max-width: 768px) { .founder { grid-template-columns: 1fr; } }

/* 8. Tables ------------------------------------------------------------------------------------
   Clean rules: no vertical lines, a dark rule under the header, hairlines between rows. Inside a
   dark tone section the colours flip automatically (section 11). */
.table-wrap, .table-scroll { overflow-x: auto; margin-bottom: var(--s-2); }
table { width: 100%; border-collapse: collapse; font-size: 15px; }
th, td { padding: 14px 16px; border: 0; border-bottom: 1px solid var(--line-white); text-align: left; vertical-align: top; }
thead th { background: transparent; font-size: var(--fs-sm); font-weight: 500; color: var(--c-dark); border-bottom: 1px solid var(--c-dark); }
tfoot td { font-weight: 500; }
.rate { font-size: var(--fs-md); font-weight: 500; color: var(--c-dark); }
.matrix-rate, .matrix-savings { font-size: var(--fs-md); font-weight: 500; color: var(--c-dark); }
.matrix-industry { color: var(--c-ink-2); text-decoration: none; }
.matrix-table { border-collapse: collapse; box-shadow: none; }
.matrix-table th, .matrix-table td { border: 0; border-bottom: 1px solid var(--line-white); }

/* 9. Forms -------------------------------------------------------------------------------------
   Default inputs are boxed (tool pages depend on it). Wrap a form in .form-line for the
   underline-only inputs used on the home page contact card. */
form label, .form-group label { display: block; font-size: var(--fs-sm); font-weight: 400; color: var(--c-ink); margin-bottom: 4px; }
input[type="text"], input[type="email"], input[type="tel"], input[type="number"], input[type="url"], select, textarea {
  width: 100%; font-family: var(--font); font-size: var(--fs-md); font-weight: 400; color: var(--c-ink);
  padding: 10px 12px; border: 1px solid var(--line-light); border-radius: var(--radius); background: #fff;
}
::placeholder { color: #6b7c7e; opacity: 1; }
textarea { min-height: 120px; resize: vertical; }
.form-row { display: grid; grid-template-columns: 1fr 1fr; gap: var(--s-2) var(--s-4); }
.form-row-3 { display: grid; grid-template-columns: repeat(3, 1fr); gap: var(--s-2); }
.form-group { margin-bottom: var(--s-2); }
@media (max-width: 768px) { .form-row-3 { grid-template-columns: 1fr; } .form-submit, form .btn { width: 100%; } }
@media (max-width: 480px) { .form-row { grid-template-columns: 1fr; } }
.form-note { font-size: var(--fs-sm); color: var(--c-ink-2); margin-top: var(--s-2); }
.form-narrow { max-width: 672px; margin: 0 auto; }
.opt { font-weight: 300; color: var(--c-ink-2); }

/* 10. Footer ----------------------------------------------------------------------------------- */
footer { display: block; background: var(--c-darkest); color: var(--c-pale); font-size: var(--fs-sm); padding: 72px var(--pad-x) 32px; }
footer a { color: var(--c-pale); text-decoration: none; }
footer a:hover { color: #fff; }
.footer-grid { max-width: var(--content); margin: 0 auto; display: grid; grid-template-columns: 2fr 1fr 1fr; gap: var(--s-5); }
.footer-col a { display: block; margin-bottom: 8px; }
.footer-col p { margin: 0 0 var(--s-2); max-width: 44ch; }
.footer-name { font-family: var(--font); font-size: var(--fs-h3); font-weight: 400; color: #fff; margin-bottom: var(--s-2); }
.footer-head { font-size: var(--fs-md); font-weight: 400; color: #fff; margin-bottom: var(--s-2); text-transform: none; letter-spacing: 0; }
.footer-linkedin { display: inline-block; margin-top: 4px; }
.footer-bottom { display: block; max-width: var(--content); margin: var(--s-5) auto 0; padding-top: var(--s-3); border-top: 1px solid rgba(255,255,255,.1); }
.footer-bottom p { margin: 0 0 6px; max-width: none; }
.footer-copy { color: #fff; font-size: var(--fs-sm); font-weight: 300; }
.footer-disclaimer { color: var(--c-pale); text-align: left; max-width: none; font-size: 13px; }
/* Defensive: legacy page styles declare footer rules of their own. */
.footer-col p, .footer-brand p { color: var(--c-pale); font-size: var(--fs-sm); line-height: 1.6; }
.footer-col a, .footer-linkedin { color: var(--c-pale); font-size: var(--fs-sm); font-weight: 300; }
.footer-linkedin { color: #fff; text-decoration: underline; text-decoration-thickness: 1px; text-underline-offset: 3px; }
.footer-col a:hover, .footer-linkedin:hover { color: #fff; }
@media (max-width: 768px) { .footer-grid { grid-template-columns: 1fr; gap: var(--s-4); } }


/* ============================================================================================
   11. CATALYST COMPONENTS
   Class list for pages built in this style:
     Sections   .sec (vertical padding) + one tone: .tone-darkest .tone-dark .tone-dark-alt
                .tone-light .tone-light-alt; .wrap is the 1320px content box.
     Headings   .tt on any h1/h2 with <span class="tt-a"> and <span class="tt-b">; .tt-stack puts
                each phrase on its own line. Colours follow the tone.
     Heroes     .hero-photo (full-bleed photo, 680px) with .hero-media, .hero-body, .hero-tagline,
                .hero-stats/.hero-stat, .hero-actions, .hero-call; .hero-photo.is-short (440px) for
                inner pages. Plain dark band: .hero (section 6).
     Bands      .strip (thin darkest band, .strip-label + .strip-list).
     Layouts    .intro-split (.sec-intro left, content right); .split-photo (.split-media photo
                left, .split-panel light panel right).
     Cards      .card-grid (.cols-2 modifier) + .card (.card-icon, h3, p, .link-arrow);
                .proof-grid + .proof-card (.proof-media, .proof-tag, .proof-num, .proof-sub).
     Steps      ol.vsteps > li (.vstep-n number, .card-icon, h3, p) along a thin vertical line.
     Fees       .fee-compare with two .fee-panel (.is-sva), .fee-label, .fee-big, .fee-sub;
                .fee-row (note left, table right); .table-clean.
     Links      .link-arrow (text + arrow icon), .state-grid (outlined link tiles).
     Guarantee  .guarantee (.badge svg + text).
     Contact    .contact-sec (.contact-map svg behind), .contact-grid, .contact-aside,
                .form-card, .form-line (underline-only inputs).
     Icons      .ico (32px inline SVG line icon, stroke 1.5, currentColor); .ico-sm (16px).
   ============================================================================================ */

/* Sections and tones */
.sec { padding: var(--sec-y) 0; position: relative; }
.sec-tight { padding: var(--s-6) 0; }
.tone-darkest, .tone-dark, .tone-dark-alt { color: var(--c-pale); --tt-a: #fff; --tt-b: var(--c-pale); }
.tone-darkest { background: var(--c-darkest); --line: var(--line-darkest); }
.tone-dark { background: var(--c-dark); --line: var(--line-dark); }
.tone-dark-alt { background: var(--c-dark-alt); --line: var(--line-dark-alt); }
.tone-light, .tone-light-alt { color: var(--c-ink); --tt-a: var(--c-dark); --tt-b: var(--c-accent); --line: var(--line-light); }
.tone-light { background: var(--c-light); }
.tone-light-alt { background: var(--c-light-alt); }
:is(.tone-darkest, .tone-dark, .tone-dark-alt) :is(h1, h2, h3, h4) { color: #fff; }
:is(.tone-darkest, .tone-dark, .tone-dark-alt) a:not([class]) { color: #fff; }
:is(.tone-darkest, .tone-dark, .tone-dark-alt) a:not([class]):hover { color: var(--c-pale); }
:is(.tone-darkest, .tone-dark, .tone-dark-alt) small, :is(.tone-darkest, .tone-dark, .tone-dark-alt) .small { color: var(--c-pale); }
:is(.tone-light, .tone-light-alt) small, :is(.tone-light, .tone-light-alt) .small { color: var(--c-ink-2); }

/* Two-tone headings */
.tt .tt-a { color: var(--tt-a); }
.tt .tt-b { color: var(--tt-b); }
.tt-stack .tt-a, .tt-stack .tt-b { display: block; }
.sec-intro h2 { margin-bottom: var(--s-3); }
.sec-intro p { max-width: 36ch; }
.sec-head { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); gap: var(--s-5); align-items: end; margin-bottom: var(--s-5); }
.sec-head h2, .sec-head p { margin-bottom: 0; }
.sec-head p { max-width: 52ch; }
@media (max-width: 768px) { .sec-head { grid-template-columns: 1fr; gap: var(--s-2); margin-bottom: var(--s-4); } }

/* Icons */
.ico { width: 32px; height: 32px; flex-shrink: 0; fill: none; stroke: currentColor; stroke-width: 1.5; stroke-linecap: round; stroke-linejoin: round; }
.ico-sm { width: 16px; height: 16px; flex-shrink: 0; fill: none; stroke: currentColor; stroke-width: 1.5; stroke-linecap: round; stroke-linejoin: round; }
.ico .dot, .ico-sm .dot { fill: currentColor; stroke: none; }
.ico .tan { stroke: var(--c-tan); }

/* Photo hero */
.hero-photo { position: relative; min-height: 680px; display: flex; align-items: center; overflow: hidden; background: var(--c-darkest); color: var(--c-pale); --tt-a: #fff; --tt-b: var(--c-pale); }
body.home .hero-photo { padding: calc(var(--nav-h) + 40px) 0 72px; }
.hero-photo.is-short { min-height: 440px; padding: var(--s-7) 0 var(--s-6); }
.hero-media, .hero-media img { position: absolute; inset: 0; width: 100%; height: 100%; }
.hero-media img { object-fit: cover; object-position: center 45%; }
.hero-photo::before {
  content: ''; position: absolute; inset: 0; z-index: 1;
  background:
    linear-gradient(180deg, rgba(10,42,47,.55) 0%, rgba(10,42,47,0) 28%),
    linear-gradient(90deg, rgba(10,42,47,.9) 0%, rgba(10,42,47,.8) 42%, rgba(10,42,47,.6) 100%);
}
.hero-body { position: relative; z-index: 2; width: 100%; }
.hero-photo h1 { font-size: 48px; line-height: 64px; font-weight: 500; color: #fff; margin: 0 0 var(--s-2); max-width: 900px; }
.hero-tagline { font-size: var(--fs-lg); color: var(--c-pale); margin: 0 0 var(--s-4); max-width: 620px; }
.hero-stats { display: flex; flex-wrap: wrap; gap: var(--s-3); list-style: none; padding: 0; margin: 0 0 var(--s-5); }
.hero-stat {
  display: flex; align-items: center; gap: 14px; margin: 0;
  padding: 8px 20px 8px 8px; min-width: 0; max-width: 360px;
  background: rgba(255,255,255,.05); border: 1px solid rgba(255,255,255,.12);
}
.hero-stat .stat-ico { display: grid; place-items: center; width: 48px; height: 48px; flex-shrink: 0; border: 1px solid rgba(255,255,255,.16); color: #fff; }
.hero-stat .stat-ico .ico { width: 28px; height: 28px; }
.hero-stat p { margin: 0; font-size: 15px; line-height: 1.45; color: var(--c-pale); }
.hero-stat .stat-a { display: block; color: #fff; font-weight: 400; }
.hero-stat .stat-b { display: block; }
.hero-actions { display: flex; align-items: center; flex-wrap: wrap; gap: var(--s-2) var(--s-3); }
.hero-call { margin: 0; font-size: var(--fs-sm); color: var(--c-pale); }
.hero-call a { color: #fff; }
@media (max-width: 1239px) {
  body.home .hero-photo { padding: var(--s-7) 0 var(--s-6); min-height: 600px; }
}
@media (max-width: 1024px) { .hero-photo h1 { font-size: 40px; line-height: 52px; } }
@media (max-width: 768px) {
  .hero-photo, body.home .hero-photo { min-height: 0; padding: 56px 0 48px; }
  .hero-photo h1 { font-size: 32px; line-height: 40px; }
  .hero-tagline { font-size: var(--fs-md); margin-bottom: var(--s-3); }
  .hero-stats { flex-direction: column; gap: 10px; margin-bottom: var(--s-4); }
  .hero-stat { max-width: none; }
  .hero-photo::before { background: linear-gradient(180deg, rgba(10,42,47,.8) 0%, rgba(10,42,47,.86) 100%); }
}

/* Thin band under the hero */
.strip { background: var(--c-darkest); color: var(--c-pale); padding: 28px 0; border-top: 1px solid rgba(255,255,255,.06); }
.strip .wrap { display: flex; align-items: center; gap: var(--s-3) var(--s-5); }
.strip-label { margin: 0; font-size: var(--fs-sm); color: var(--c-muted); flex: 0 0 auto; max-width: 220px; line-height: 1.45; }
/* Every item carries a leading dot; the list is pulled left by one dot slot and clipped, so no line starts with a dot. */
.strip-list { --dot-slot: calc(3px + 2 * clamp(10px, 1.4vw, 20px)); display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: 10px 0; flex: 1 1 auto; list-style: none; margin: 0 0 0 calc(-1 * var(--dot-slot)); padding: 0; clip-path: inset(0 0 0 var(--dot-slot)); }
.strip-list li { display: flex; align-items: center; margin: 0; font-size: 17px; font-weight: 400; color: #fff; white-space: nowrap; }
.strip-list li::before { content: ''; width: 3px; height: 3px; border-radius: 50%; background: var(--c-muted); margin: 0 clamp(10px, 1.4vw, 20px); }
/* Label beside the list only when all ten names fit on one line; below that the label sits above. */
@media (max-width: 1439px) {
  .strip { padding: 24px 0 26px; }
  .strip .wrap { flex-direction: column; align-items: stretch; gap: 10px; }
  .strip-label { max-width: none; }
}
@media (max-width: 1139px) { .strip-list { justify-content: flex-start; } }
@media (max-width: 1024px) { .strip-list li { font-size: 15px; } }

/* Intro left, content right */
.intro-split { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 3fr); gap: var(--s-5); align-items: start; }
@media (max-width: 1024px) { .intro-split { grid-template-columns: 1fr; gap: var(--s-4); } .sec-intro p { max-width: 60ch; } }

/* Outlined cards (shared 1px borders, square corners) */
.card-grid { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); padding: 1px 0 0 1px; }
.card-grid.cols-2 { grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 0; }
.card {
  display: flex; flex-direction: column; min-width: 0;
  padding: 28px 24px 26px; margin: -1px 0 0 -1px;
  border: 1px solid var(--line, var(--line-light));
}
.card-icon { display: block; color: var(--c-muted); margin-bottom: var(--s-4); }
:is(.tone-light, .tone-light-alt) .card-icon { color: var(--c-accent); }
.card h3 { margin: 0 0 10px; }
.card p { font-size: 15px; line-height: 1.55; margin: 0 0 var(--s-3); }
.card p:last-child { margin-bottom: 0; }
.card .link-arrow { margin-top: auto; }
@media (max-width: 1024px) { .card-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); } }
@media (max-width: 640px) { .card-grid, .card-grid.cols-2 { grid-template-columns: 1fr; } .card { padding: 24px 20px; } .card-icon { margin-bottom: var(--s-3); } }

.link-arrow { display: inline-flex; align-items: center; gap: 6px; font-size: var(--fs-sm); font-weight: 400; color: inherit; text-decoration: underline; text-decoration-thickness: 1px; text-underline-offset: 4px; }
:is(.tone-darkest, .tone-dark, .tone-dark-alt) .link-arrow { color: #fff; }
:is(.tone-light, .tone-light-alt) .link-arrow { color: var(--c-dark); }
.link-arrow:hover { text-decoration-thickness: 2px; }
:is(.tone-darkest, .tone-dark, .tone-dark-alt) .link-arrow:hover { color: #fff; }
.link-arrow .ico-sm { width: 14px; height: 14px; }

/* Fee comparison */
.fee-compare { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); margin: 0 0 var(--s-6) 1px; }
.fee-panel { margin-left: -1px; padding: 40px 40px 36px; border: 1px solid var(--line, var(--line-dark)); }
.fee-panel.is-sva { background: rgba(255,255,255,.05); border-color: rgba(255,255,255,.55); position: relative; z-index: 1; }
.fee-label { display: flex; align-items: center; gap: 10px; margin: 0 0 var(--s-3); font-size: var(--fs-sm); color: var(--c-pale); }
.fee-label .ico-sm { color: var(--c-tan); }
.fee-big { margin: 0 0 var(--s-2); color: #fff; font-weight: 400; }
.fee-big .fee-lead { display: block; font-size: var(--fs-h3); line-height: 1.3; color: var(--c-pale); }
.fee-big .fee-num { display: block; font-size: 120px; line-height: 1; letter-spacing: 0; font-weight: 400; margin: 8px 0 6px; }
.fee-big .fee-tail { display: block; font-size: var(--fs-h3); line-height: 1.3; color: var(--c-pale); }
.fee-panel:not(.is-sva) .fee-num { color: var(--c-muted); font-size: 72px; margin: 26px 0 22px; }
.fee-panel:not(.is-sva) .fee-big { color: var(--c-pale); }
.fee-sub { margin: 0; font-size: 15px; color: var(--c-pale); max-width: 40ch; }
.fee-row { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 2fr); gap: var(--s-5); align-items: start; }
.fee-row .fee-note p { max-width: 38ch; }
@media (max-width: 1024px) { .fee-row { grid-template-columns: 1fr; gap: var(--s-3); } }
@media (max-width: 768px) {
  .fee-compare { grid-template-columns: 1fr; margin-left: 0; margin-bottom: var(--s-5); }
  .fee-panel { margin: -1px 0 0 0; padding: 28px 24px; }
  .fee-big .fee-num { font-size: 88px; }
  .fee-panel:not(.is-sva) .fee-num { font-size: 56px; margin: 12px 0 10px; }
}

/* Clean table, and every table inside a dark tone */
.table-clean { font-size: 15px; }
.table-clean th, .table-clean td { padding: 14px 16px 14px 0; }
.table-clean td.rate, .table-clean th:not(:first-child), .table-clean td:not(:first-child) { white-space: nowrap; }
:is(.tone-darkest, .tone-dark, .tone-dark-alt) :is(th, td) { color: var(--c-pale); border-bottom-color: var(--line); }
:is(.tone-darkest, .tone-dark, .tone-dark-alt) thead th { color: #fff; border-bottom-color: rgba(255,255,255,.55); }
:is(.tone-darkest, .tone-dark, .tone-dark-alt) .rate { color: #fff; font-size: 18px; }
:is(.tone-light, .tone-light-alt) :is(th, td) { border-bottom-color: var(--line); }

/* Photo left, light panel right, numbered steps */
.split-photo { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); min-height: 760px; }
.split-media { position: relative; overflow: hidden; min-height: 320px; background: var(--c-dark); }
.split-media img { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; }
.split-panel { padding: var(--sec-y) max(var(--pad-x), calc((100vw - var(--content)) / 2)) var(--sec-y) clamp(24px, 5.5vw, 80px); }
.split-panel > * { max-width: 580px; }
@media (max-width: 1024px) {
  .split-photo { grid-template-columns: 1fr; min-height: 0; }
  .split-media { min-height: 300px; }
  .split-panel { padding: var(--sec-y) var(--pad-x); }
}
ol.vsteps { list-style: none; margin: var(--s-5) 0 var(--s-5); padding: 0; position: relative; }
ol.vsteps::before { content: ''; position: absolute; left: 0; top: 4px; bottom: 4px; width: 1px; background: var(--line, var(--line-light)); }
ol.vsteps > li { display: grid; grid-template-columns: 44px minmax(0, 1fr); column-gap: 8px; margin: 0; padding: 0 0 var(--s-5) 20px; }
ol.vsteps > li:last-child { padding-bottom: 0; }
.vstep-n { font-size: var(--fs-md); color: var(--c-ink-2); padding-top: 50px; line-height: 1.5; }
ol.vsteps .card-icon { margin-bottom: 14px; }
ol.vsteps .card-icon .ico { width: 28px; height: 28px; }
ol.vsteps h3 { font-size: var(--fs-lg); line-height: 1.35; margin: 0 0 6px; }
ol.vsteps p { font-size: 15px; line-height: 1.55; margin: 0; color: var(--c-ink); }
:is(.tone-darkest, .tone-dark, .tone-dark-alt) .vstep-n { color: var(--c-muted); }
:is(.tone-darkest, .tone-dark, .tone-dark-alt) ol.vsteps p { color: var(--c-pale); }
.split-actions { display: flex; flex-wrap: wrap; align-items: center; gap: var(--s-2) var(--s-3); }

/* Photo-backed result cards */
.proof-grid { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: var(--s-3); }
.proof-card {
  position: relative; overflow: hidden; min-height: 232px; margin: 0;
  display: flex; flex-direction: column; justify-content: space-between; gap: var(--s-4);
  padding: 22px 24px 24px; border: 1px solid var(--line, var(--line-dark)); background: var(--c-darkest);
}
.proof-media, .proof-media img { position: absolute; inset: 0; width: 100%; height: 100%; }
.proof-media img { object-fit: cover; }
.proof-card::before { content: ''; position: absolute; inset: 0; z-index: 1; background: linear-gradient(180deg, rgba(10,42,47,.62) 0%, rgba(10,42,47,.74) 55%, rgba(10,42,47,.9) 100%); }
.proof-card > :not(.proof-media) { position: relative; z-index: 2; }
.proof-tag { display: flex; flex-wrap: wrap; align-items: center; gap: 6px 16px; margin: 0; font-size: 15px; color: #fff; }
.proof-tag span { display: inline-flex; align-items: center; gap: 6px; }
.proof-tag .ico-sm { color: var(--c-pale); }
.proof-num { margin: 0; font-size: 40px; line-height: 1.1; font-weight: 400; color: #fff; }
.proof-num small { font-size: var(--fs-h3); color: #fff; font-weight: 400; }
.proof-sub { margin: 6px 0 0; font-size: var(--fs-sm); color: var(--c-pale); }
.proof-note { margin: var(--s-4) 0 0; max-width: 100ch; }
.proof-note small { font-size: 13px; line-height: 1.55; }
@media (max-width: 640px) { .proof-grid { grid-template-columns: 1fr; } .proof-card { min-height: 200px; } .proof-num { font-size: 34px; } }

/* Outlined link tiles (state guides) */
.state-grid { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); list-style: none; margin: 0 0 var(--s-4); padding: 1px 0 0 1px; }
.state-grid li { margin: -1px 0 0 -1px; }
.state-grid a {
  display: flex; align-items: center; justify-content: space-between; gap: 12px; height: 100%;
  padding: 18px 20px; border: 1px solid var(--line, var(--line-dark));
  font-size: 17px; font-weight: 400; color: #fff; text-decoration: none;
}
.state-grid a .ico-sm { color: var(--c-muted); transition: transform .15s; }
.state-grid a:hover { background: rgba(255,255,255,.05); color: #fff; }
.state-grid a:hover .ico-sm { transform: translate(2px, -2px); color: #fff; }
.state-grid .is-first a { background: rgba(255,255,255,.07); border-color: rgba(255,255,255,.5); position: relative; z-index: 1; }
:is(.tone-light, .tone-light-alt) .state-grid a { color: var(--c-dark); }
:is(.tone-light, .tone-light-alt) .state-grid a .ico-sm { color: var(--c-accent); }
:is(.tone-light, .tone-light-alt) .state-grid a:hover { background: rgba(255,255,255,.45); color: var(--c-dark); }
:is(.tone-light, .tone-light-alt) .state-grid a:hover .ico-sm { color: var(--c-dark); }
@media (max-width: 1024px) { .state-grid { grid-template-columns: repeat(3, minmax(0, 1fr)); } }
@media (max-width: 640px) { .state-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); } .state-grid a { padding: 14px 16px; font-size: var(--fs-md); } }

/* Guarantee */
.guarantee { display: grid; grid-template-columns: 168px minmax(0, 1fr); gap: var(--s-5); align-items: center; }
.guarantee .badge { width: 168px; height: 168px; display: block; }
.guarantee h2 { margin-bottom: var(--s-2); }
.guarantee p { margin: 0; max-width: 64ch; font-size: var(--fs-lg); }
@media (max-width: 768px) { .guarantee { grid-template-columns: 1fr; gap: var(--s-3); } .guarantee .badge { width: 128px; height: 128px; } .guarantee p { font-size: var(--fs-md); } }

/* Contact: faint Colorado drawing behind a form card */
.contact-sec { overflow: hidden; }
.contact-map { position: absolute; z-index: 0; left: -2%; top: 50%; width: min(74%, 1040px); height: auto; transform: translateY(-50%); color: var(--c-dark); opacity: .11; pointer-events: none; }
.contact-map .road { stroke-width: 1.8; }
.contact-map .grid { stroke-dasharray: 3 7; }
.contact-grid { position: relative; z-index: 1; display: grid; grid-template-columns: minmax(0, 5fr) minmax(0, 7fr); gap: var(--s-6); align-items: start; }
.contact-aside p { max-width: 40ch; }
.contact-list { list-style: none; margin: var(--s-4) 0; padding: 0; }
.contact-list li { display: flex; align-items: flex-start; gap: 12px; margin: 0 0 14px; }
.contact-list .ico-sm { width: 18px; height: 18px; margin-top: 3px; color: var(--c-accent); }
.form-card { background: rgba(255,255,255,.8); border: 1px solid rgba(255,255,255,.9); padding: 44px 48px 40px; }
/* The map drawing sits behind a frosted card: no map line shows through it. */
.contact-sec .form-card { background: rgba(244,247,246,.94); -webkit-backdrop-filter: blur(6px); backdrop-filter: blur(6px); }
/* Stacked fields keep one even gap: the collapsed row adds no row-gap of its own. */
.form-card .form-row { row-gap: 0; }
.form-card h3 { font-size: 24px; line-height: 32px; margin-bottom: var(--s-4); }
@media (max-width: 1024px) { .contact-grid { grid-template-columns: 1fr; gap: var(--s-5); } .contact-map { display: none; } }
@media (max-width: 640px) { .form-card { padding: 28px 20px 24px; } }

/* Underline-only inputs */
.form-line .form-group { margin-bottom: var(--s-3); }
.form-line label { font-size: var(--fs-sm); font-weight: 400; color: var(--c-ink); margin-bottom: 2px; }
.form-line :is(input[type="text"], input[type="email"], input[type="tel"], input[type="number"], input[type="url"], select, textarea) {
  border: 0; border-bottom: 1px solid var(--c-accent); border-radius: 0; background: transparent;
  padding: 10px 0 9px; font-weight: 300;
}
.form-line :is(input, select, textarea):focus { border-bottom-color: var(--c-dark); box-shadow: 0 1px 0 0 var(--c-dark); }
.form-line textarea { min-height: 112px; }
.form-line .form-submit { margin-top: var(--s-1); }
.form-line .form-note { font-size: 13px; line-height: 1.55; }


/* ============================================================================================
   12. LEGACY PAGES (keep last)
   Guides, articles and tools keep their own page styles under this shell. These rules retire the
   serif, the reveal animations and the old fixed-nav hero offsets, and pull their headings and
   labels onto the shared scale: DM Sans, weight 400 headings, no uppercase, no letter-spacing.
   ============================================================================================ */
.reveal { opacity: 1 !important; transform: none !important; }
h1, h2, h3, h4, .stat-num, .hero-title, .hero-tagline, .section-title, .step-num, .nav-sva, .footer-name, .page-title, .article-title, blockquote,
.key-fact .kf-value, .kf-value, .faq-q, .tl-date, .stat-card .sc-big, .sc-big, .pullquote, .code, .print-head, .rc-percentile, .hl-metric .v,
.qstep-num, .commit-when, .lane-title, .close-strip .txt, .today-box li .d, .today-box .d, .deliv-num, .deliv-q, .start-here .sh-title, .sh-title,
.gc-abbr, .gc-name, .winrate .wr-num { font-family: var(--font) !important; }
.kf-value, .key-fact .kf-value, .tl-date, .sc-big, .stat-card .sc-big, .code, .print-head, .rc-percentile, .hl-metric .v, .qstep-num, .commit-when,
.close-strip .txt, .today-box .d, .today-box li .d, .deliv-num, .gc-abbr, .winrate .wr-num { font-weight: 500; }
.faq-q, .lane-title, .deliv-q, .sh-title, .start-here .sh-title, .gc-name { font-weight: 400; }
.pullquote { font-weight: 400; }
/* An <em> in a heading is the second phrase of a two-tone heading: muted accent on light, pale on dark. */
:is(h1, h2, h3, .section-title, .page-title, .cta-wrap h2) em { font-style: normal; color: var(--c-accent); }
:is(#grounds-section, #coverage-section, #data-section, .tone-dark, .tone-dark-alt, .tone-darkest, .page-hero, .article-hero, .hero, .hero-photo) :is(h1, h2, h3, .section-title, .page-title) em { color: var(--c-pale); }

/* Legacy heading classes kept their serif sizes; bring them onto the shared scale. */
.page-title { font-size: var(--fs-h1); line-height: var(--lh-h1); letter-spacing: 0; font-weight: 500; }
.section-title, .cta-wrap h2, .today-box h2, .tool-card h2, .hl-card h2, .method-wrap h2, .start-here h2 { font-size: var(--fs-h2); line-height: var(--lh-h2); letter-spacing: 0; }
/* Article cards sit under a group heading, so their titles stay a step below it. */
.article-card :is(h2, h3) { font-size: 24px; line-height: 32px; font-weight: 400; letter-spacing: 0; }
.ground h3, .dive-card h3, .dive-example h3, .dive-aside h3, .gate-card h3 { font-size: var(--fs-h3); line-height: var(--lh-h3); letter-spacing: 0; }
.section-title, .cta-wrap h2, .today-box h2, .tool-card h2, .hl-card h2, .method-wrap h2, .start-here h2,
.ground h3, .dive-card h3, .dive-example h3, .dive-aside h3, .gate-card h3 { font-weight: 400; }
.article-title { letter-spacing: 0; font-weight: 500; }

/* Labels and eyebrows: no uppercase, no letter-spacing. */
.breadcrumb, .page-eyebrow, .section-eyebrow, .key-fact .kf-label, .kf-label, .stat-card .sc-label, .sc-label, .article-kicker, .lane-tag,
.matrix-table thead th, .matrix-table caption, .nav-logo .wordmark, .guide-link, .flag-tag, tr.flagship .flag-tag, .field label, .rc-eyebrow,
.rc-percentile small, .rc-scale, .rc-stat .k, .hl-metric .k, .seg-chip, .type-badge, .hl-divider, .article-body .worked-label, .bpp-field > label,
.bpp-field > legend, .bpp-field > label .opt, .county-strip span, .cal-table thead th, .rollup-table thead th, .close-strip .loc, .dive-label,
.deliv-tag, .deliv-meta .dm-k, .ac-meta, .ac-read, .upcoming h3, .start-here .sh-num, .group-head h2, .page-meta, .gc-deadline .gd-label,
.gc-link, .eyebrow, .winrate .wr-type { text-transform: none !important; letter-spacing: 0 !important; }
.page-eyebrow { font-size: var(--fs-sm); font-weight: 400; color: var(--c-pale); border-color: rgba(183,204,206,.4); }
.section-eyebrow { font-size: var(--fs-sm); font-weight: 400; color: var(--c-ink-2); }
.breadcrumb { font-size: 13px; font-weight: 300; }

/* Legacy lists that relied on a page-level margin/padding reset. */
.start-here ol, .today-box ul, .timeline { padding-left: 0; margin-bottom: 0; }
.start-here li, .today-box li, .tl-item { margin-bottom: 0; }
.gate-locked { padding-left: 18px; }
.gate-locked li { margin-left: 0; }

/* Campaign letter bridge on the Colorado guide (shown only with ?src=letter). */
.letter-bridge { background: var(--c-light); border-top: 1px solid var(--line-light); border-bottom: 1px solid var(--line-light); padding: 22px var(--pad-x); }
.letter-bridge[hidden] { display: none; }
.letter-bridge > div { max-width: 900px; margin: 0 auto; font-size: var(--fs-md); }
.letter-bridge strong { color: var(--c-dark); }

/* --------------------------------------------------------------------------------------------
   12b. Legacy pages, Catalyst pass (2026-09-25)
   The guides, articles, hubs and tools keep their own page CSS. These overrides move them onto
   the new palette: tan leaves text, rules and hover states (it stays on focus outlines and a few
   small data chips); hero links and key-fact values go white; legacy tables go clean; labels move
   to 13 to 14px at weight 400. Selectors mirror the page selectors so they win on source order.
   Everything visual sits inside @media screen so the printable deadline table keeps its print CSS.
   -------------------------------------------------------------------------------------------- */
/* Inter is no longer loaded: every control and label that named it falls back to DM Sans. */
:is(button, input, select, textarea, .print-btn, .seg-chip, .flag-tag, .rc-percentile small) { font-family: var(--font) !important; }
:is(h1, h2, h3, h4, .faq-q, .lane-title, .gc-name, .sh-title) { letter-spacing: 0 !important; }

@media screen {
  /* Heroes: white underlined links, pale meta, key facts in the home hero-stat style. */
  :is(.page-hero, .article-hero) a:not([class]) { color: #fff; text-decoration: underline; text-decoration-thickness: 1px; text-underline-offset: 3px; }
  :is(.page-hero, .article-hero) a:not([class]):hover { color: var(--c-pale); }
  :is(.page-hero, .article-hero) a[style*="--accent"] { color: #fff !important; }
  :is(.page-hero, .article-hero) .breadcrumb { color: var(--c-pale); }
  :is(.page-hero, .article-hero) .breadcrumb a { color: var(--c-pale); text-decoration: none; }
  :is(.page-hero, .article-hero) .breadcrumb a:hover { color: #fff; }
  .breadcrumb .sep { color: var(--c-muted); }
  .byline { color: var(--c-pale); }
  .article-kicker { font-size: var(--fs-sm); font-weight: 400; color: var(--c-pale); }
  .eyebrow { font-size: var(--fs-sm); font-weight: 400; color: var(--c-pale); border-color: rgba(183,204,206,.4); }
  .key-fact { background: rgba(255,255,255,.05); border-color: rgba(255,255,255,.12); }
  .key-fact .kf-label { font-size: 13px; font-weight: 400; color: var(--c-pale); margin-bottom: 2px; }
  .key-fact .kf-value, .kf-value { font-size: 20px; line-height: 1.3; font-weight: 400; color: #fff; }
  .lede-strip, .hero p.src-note { border-left-color: rgba(255,255,255,.3); }

  /* Section furniture: no tan rules; eyebrows are small plain labels, pale on dark sections. */
  .section-rule { display: none; }
  :is(#grounds-section, #coverage-section, #data-section) .section-eyebrow { color: var(--c-pale); }
  :is(#grounds-section, #coverage-section, #data-section, .stat-card, .dive-example, .result-card, .close-strip) a:not([class]) { color: #fff; text-decoration: underline; text-underline-offset: 3px; }

  /* Calendars and timelines: thin teal line instead of tan. */
  .timeline { border-left: 1px solid var(--c-accent); }
  .tl-item::before { background: var(--c-accent); }
  .lane-tag, tr.flagship .flag-tag, .flag-tag { font-size: 12px; font-weight: 500; border-radius: var(--radius); }

  /* Callouts and cards: dark rules in place of tan, flat (no drop shadows, no hover lift). */
  :is(.today-box, .methodology, .hl-howto, .start-here, .deliv-credit) { border-left-color: var(--c-dark); }
  .pullquote { border-left-color: var(--c-accent); font-style: normal; }
  .close-strip .txt { font-style: normal; }
  .gate-card, .qstep { border-top-color: var(--c-dark); }
  .guide-card.flagship { border-top-color: var(--c-dark); }
  .today-box, .lane-none, .tool-card, .article-card:hover, a.qstep:hover { box-shadow: none; }
  .article-card:hover, a.qstep:hover { transform: none; }
  :is(.article-card, .start-here li a, .guide-card, .guides-tools a, .print-btn, .oi-nosf-btn):hover { border-color: var(--c-dark); }
  .oi-nosf-btn:hover, .guides-tools a:hover { color: var(--c-dark); }
  .dive-label { font-size: 13px; font-weight: 400; color: var(--c-accent); border-color: var(--line-light); }
  .dive-example .dive-label { color: var(--c-pale); border-color: rgba(255,255,255,.3); }
  .article-body .worked-label { font-size: 13px; font-weight: 400; color: var(--c-pale); }
  .bpp-field input:focus, .bpp-field select:focus, .bpp-field textarea:focus, .bpp-choice label:has(input:checked) { border-color: var(--c-dark); }

  /* Navy stat cards and worked examples. */
  .stat-card .sc-label { font-size: var(--fs-sm); font-weight: 400; color: var(--c-pale); }
  .stat-card .sc-big { font-weight: 400; }
  .stat-card .sc-sub, .stat-card .sc-row .k, .dive-math .dm-row .k { color: var(--c-pale); }
  .dive-example { grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); }
  .dive-math { border-left-color: rgba(255,255,255,.2); }
  .dive-math .dm-row .k { flex: 1 1 0; min-width: 40%; }
  .dive-math .dm-row .v { flex: 0 1 auto; white-space: normal; text-align: right; font-weight: 500; }
  .dive-math .dm-row.total .v { color: #fff; }
  .winrate { border-color: rgba(255,255,255,.12); }
  .winrate .wr-num { color: #fff; font-weight: 400; }
  .winrate .wr-type { font-size: var(--fs-sm); font-weight: 400; }
  .close-strip .loc { font-size: var(--fs-sm); font-weight: 400; color: var(--c-pale); }
  .rc-eyebrow { font-size: var(--fs-sm); font-weight: 400; color: var(--c-pale); }
  .rc-stat .k, .hl-metric .k { font-size: 13px; color: var(--c-pale); }
  .pct-chip, .seg-chip { font-size: 13px; font-weight: 400; border-radius: var(--radius); }
  .pct-chip.hot { background: #fff; border-color: #fff; color: var(--c-dark); }
  .seg-chip { color: var(--c-pale); background: transparent; border-color: rgba(183,204,206,.5); }

  /* Numbered deliverables, article index and hub labels. */
  .deliv-num { color: var(--c-accent); font-weight: 400; }
  .deliv-tag { font-size: 13px; font-weight: 400; color: var(--c-accent); }
  .deliv-meta .dm-k { font-size: 13px; font-weight: 400; color: var(--c-ink-2); }
  .deliv-meta .dm-v { font-weight: 500; }
  :is(.deliv-scope, .upcoming) li::before { color: var(--c-accent); }
  .group-head h2 { font-size: var(--fs-h2); line-height: var(--lh-h2); font-weight: 400; color: var(--c-dark); margin-bottom: 8px; }
  .ac-meta { gap: 4px 10px; font-size: 13px; font-weight: 400; color: var(--c-ink-2); }
  .ac-read { font-size: var(--fs-sm); font-weight: 400; color: var(--c-dark); text-decoration: underline; text-decoration-thickness: 1px; text-underline-offset: 4px; }
  .upcoming h3 { font-size: var(--fs-h3); line-height: var(--lh-h3); font-weight: 400; color: var(--c-dark); }
  .start-here .sh-num, .gc-deadline .gd-label { font-size: 13px; font-weight: 400; color: var(--c-ink-2); }
  .start-here .sh-cta a { font-weight: 500; }
  .gc-link { font-size: var(--fs-sm); font-weight: 400; color: var(--c-dark); text-decoration: underline; text-underline-offset: 4px; }
  .county-strip span { font-size: var(--fs-sm); font-weight: 400; color: var(--c-dark); }
  .field label { font-size: var(--fs-sm); font-weight: 400; color: var(--c-ink); }
  .hl-divider { font-size: 13px; font-weight: 400; }
  .print-btn { font-size: var(--fs-sm); font-weight: 400; color: var(--c-dark); border-color: var(--c-dark); border-radius: var(--radius); }
  .bpp-field > label, .bpp-field > legend { font-size: var(--fs-sm); font-weight: 400; color: var(--c-ink); }

  /* Legacy tables go clean: no navy header band, a dark rule under the header, hairline rows. */
  :is(.matrix-table, .cal-table, .rollup-table) { background: transparent; box-shadow: none; }
  :is(.matrix-table, .cal-table, .rollup-table) thead th { background: transparent; color: var(--c-dark); font-size: var(--fs-sm); font-weight: 500; border-bottom: 1px solid var(--c-dark); }
  .matrix-table caption { font-size: var(--fs-sm); font-weight: 500; color: var(--c-dark); }
  .matrix-table thead th.sortable::after { color: var(--c-muted); }
  .matrix-table thead th.sortable:hover::after, .matrix-table thead th.sortable[aria-sort]::after { color: var(--c-dark); }
  .cal-table tbody td:first-child { white-space: normal; width: 34%; }
  tr.flagship { background: #fff; }
  tr.flagship td:first-child { border-left-color: var(--c-dark); }
  .guide-link { font-size: var(--fs-sm); font-weight: 400; color: var(--c-dark); text-decoration: underline; text-decoration-thickness: 1px; text-underline-offset: 3px; }

  /* Footer LinkedIn link: page styles set .footer-col a to no underline; keep the shared look. */
  footer a.footer-linkedin { color: #fff; font-weight: 300; text-decoration: underline; text-decoration-thickness: 1px; text-underline-offset: 3px; }
}
@media screen and (max-width: 900px) {
  .dive-example { grid-template-columns: minmax(0, 1fr); }
}
@media screen and (max-width: 768px) {
  /* Hero intro text drops to 16px on phones, as the home hero tagline does. */
  :is(.page-hero, .article-hero) :is(.page-subtitle, .answer-block, .article-dek, p:not([class])) { font-size: var(--fs-md); line-height: 1.6; }
  .key-fact .kf-value, .kf-value { font-size: 17px; }
}
@media screen and (max-width: 640px) {
  .today-box li .d { width: auto; }
  .hl-card, .tool-card, .result-card, .gate-card { padding: 26px 20px; }
}

/* --------------------------------------------------------------------------------------------
   12c. Legacy pages on the shared grid (2026-09-25 fix pass)
   Every guide wrapper spans the same content box as the home page, so each section starts on the
   one page edge; reading width is limited on the paragraphs instead of the wrapper. FAQ and CTA
   heads sit left of their content, as .intro-split does. One hero H1 size site-wide. Labels above
   hero titles are plain text, not outlined pills.
   -------------------------------------------------------------------------------------------- */
@media screen {
  :is(.today-box, .prose, .timeline-wrap, .val-wrap, .dive-wrap, .grounds-wrap, .data-wrap, .faq-wrap, .cta-wrap),
  #calendar-section .timeline-wrap { max-width: var(--content); margin-left: auto; margin-right: auto; text-align: left; }
  :is(.prose, .faq-wrap, .cta-wrap) > :is(p, ul, ol, .faq-item) { max-width: 760px; }
  :is(.dive-intro, .grounds-intro, .data-intro) { max-width: 760px; }
  .today-box > p, .today-box > ul { max-width: 980px; }
  /* Legacy guide sections padded 6vw; they take the shared gutter so their wrappers start on the page edge. */
  main > section:not([class]), #today-section, #calendar-section, #grounds-section, #faq-section, #cta-section, #data-section, #construction-section,
  #ruleb-section, #office-section, #hospitality-section, #datacenter-section, #leverage-section, #record-section, #benchmark-section, #levy-section,
  #result-section, #fees-section, #table-section, #guides-section { padding-left: var(--pad-x); padding-right: var(--pad-x); }
  #leverage-section .dive-example, #levy-section .dive-example { max-width: var(--content) !important; }
  :is(.tl-note, .table-note, .crosslink, .dive-note) { margin-left: 0; margin-right: 0; text-align: left; }

  /* FAQ: heading left, questions right. */
  #faq-section .faq-wrap { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 3fr); column-gap: var(--s-5); align-items: start; }
  #faq-section .faq-wrap > :not(.faq-item) { grid-column: 1; grid-row: 1 / span 40; text-align: left !important; margin: 0 !important; }
  #faq-section .faq-wrap > .faq-item { grid-column: 2; }
  #faq-section .faq-wrap > div:first-child + .faq-item { border-top: 1px solid var(--line-light); padding-top: 0; }
  #faq-section .faq-wrap > div:first-child + .faq-item .faq-q { margin-top: 28px; }

  /* CTA: heading left, text and buttons right. */
  #cta-section { text-align: left; }
  #cta-section .cta-wrap { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 3fr); column-gap: var(--s-5); align-items: start; }
  #cta-section .cta-wrap > h2 { grid-column: 1; grid-row: 1 / span 10; margin: 0; }
  #cta-section .cta-wrap > :not(h2) { grid-column: 2; margin-left: 0; margin-right: 0; }
  #cta-section .cta-wrap > p:not(.crosslink) { margin-bottom: var(--s-3); }
  #cta-section .cta-actions { justify-content: flex-start; }
  #cta-section .crosslink { margin-top: var(--s-4); }

  /* Hero labels: plain text above the title. */
  :is(.page-eyebrow, .eyebrow) { display: block; border: 0; padding: 0; margin-bottom: var(--s-2); }

  /* Article index links carry the site's north-east arrow, not a text arrow. */
  .ac-read::after {
    content: ''; width: 14px; height: 14px; background: currentColor; transform: none !important;
    -webkit-mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 16 16'%3E%3Cpath d='M4.5 11.5l7-7M6 4.5h5.5V10' fill='none' stroke='black' stroke-width='1.5' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E") center / contain no-repeat;
            mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 16 16'%3E%3Cpath d='M4.5 11.5l7-7M6 4.5h5.5V10' fill='none' stroke='black' stroke-width='1.5' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E") center / contain no-repeat;
  }
}
/* One hero title size: 48/64 on desktop, as the photo heroes use. */
:is(.page-hero, .article-hero, .hero) h1, .page-title { font-size: 48px; line-height: 64px; }
@media (max-width: 1024px) { :is(.page-hero, .article-hero, .hero) h1, .page-title { font-size: 40px; line-height: 52px; } }
@media (max-width: 768px) { :is(.page-hero, .article-hero, .hero) h1, .page-title { font-size: 32px; line-height: 40px; } }
@media screen and (max-width: 1024px) {
  #faq-section .faq-wrap, #cta-section .cta-wrap { grid-template-columns: minmax(0, 1fr); }
  #faq-section .faq-wrap > :not(.faq-item), #cta-section .cta-wrap > h2 { grid-row: auto; margin-bottom: var(--s-4) !important; }
  #faq-section .faq-wrap > :is(.faq-item), #cta-section .cta-wrap > :not(h2) { grid-column: 1; }
}

/* Phones: wide data tables stack into labelled rows (add .table-stack and data-label on each cell). */
@media screen and (max-width: 640px) {
  table.table-stack, .table-stack :is(tbody, tfoot, tr, td) { display: block; width: 100%; min-width: 0 !important; }
  table.table-stack { box-shadow: none; background: transparent; border: 0; }
  .table-stack thead { position: absolute; width: 1px; height: 1px; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; }
  .table-stack tr { padding: 12px 0; border-bottom: 1px solid var(--line, var(--line-light)); }
  .table-stack tr:first-child { border-top: 1px solid var(--line, var(--line-light)); }
  .table-stack tfoot tr:first-child { border-top: 0; }
  .table-stack td { display: flex; justify-content: space-between; align-items: baseline; gap: 16px; padding: 4px 0 !important; border: 0 !important; text-align: right !important; white-space: normal !important; font-size: 15px; }
  .table-stack td::before { content: attr(data-label); flex: 0 1 auto; text-align: left; color: var(--c-ink-2); font-weight: 300; font-size: var(--fs-sm); }
  :is(.tone-darkest, .tone-dark, .tone-dark-alt) .table-stack td::before { color: var(--c-pale); }
  .table-stack td:first-child { display: block; text-align: left !important; font-weight: 500; padding-bottom: 6px !important; }
  .table-stack td:first-child::before { content: none; }
  .table-stack.is-text td { display: block; text-align: left !important; }
  .table-stack.is-text td::before { display: block; margin-bottom: 2px; }
  :is(.table-wrap, .table-scroll):has(> .table-stack) { overflow: visible; }

  /* Guide hero facts: an even two-column grid; an odd first fact spans the row. */
  .key-facts { display: grid !important; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 8px !important; }
  .key-fact { width: auto; min-width: 0; padding: 12px 14px !important; }
  .key-fact:first-child:nth-last-child(odd) { grid-column: 1 / -1; }
}
/* Colorado guide on phones: the intro note and byline move under the hero (see the page script). */
.hero-moved { max-width: var(--content); margin: 0 auto var(--s-4); }
.hero-moved:empty { display: none; }
.hero-moved .lede-strip { margin: 0 0 12px; color: var(--c-ink); border-left: 2px solid var(--c-dark); font-size: 15px; }
.hero-moved .byline { margin: 0; color: var(--c-ink-2); font-size: 13px; }
.hero-moved a { color: var(--c-dark) !important; text-decoration: underline; text-underline-offset: 3px; }

/* --------------------------------------------------------------------------------------------
   12d. One reading column, one page edge (2026-09-25 alignment pass)
   Articles: hero, body, tables and sources share one 700px reading column, as first set on the
   cold-storage article. The hero drops its side padding and each column box carries the gutter
   itself, so every block starts on the same x at every width (the gutter alone on phones). Wide
   tables scroll inside .table-scroll on phones; the page never widens.
   Guides and hubs: section wrappers that stopped at 900 to 1240px now span the content box, so
   each section starts on the edge the nav, hero and CTA use. Tables that were narrow keep their
   width but sit on that edge.
   -------------------------------------------------------------------------------------------- */
@media screen {
  .article-hero { padding-left: 0; padding-right: 0; }
  .article-hero .article-hero-inner,
  .article-hero ~ :is(.article-body, .table-wrap, .footnotes) {
    max-width: calc(700px + 2 * var(--pad-x)); margin-left: auto; margin-right: auto;
    padding-left: var(--pad-x); padding-right: var(--pad-x);
  }
  .article-hero ~ .footnotes { border-top: 0; padding-top: 0; }
  .article-hero ~ .footnotes::before { content: ''; display: block; border-top: 1px solid var(--line-light); margin-bottom: 28px; }

  :is(#steps-section, #commitment-section, #letter-section, #coverage-section, #rollup-section, #deliverables-section):not([class]) { padding-left: var(--pad-x); padding-right: var(--pad-x); }
  :is(#table-section, #record-section, #benchmark-section) .table-wrap,
  :is(.guides-wrap, .deliv-wrap, .steps-wrap, .commit-wrap, .cal-wrap, .letter-wrap, .coverage-wrap, .rollup-wrap) { max-width: var(--content); margin-left: auto; margin-right: auto; }
  :is(#record-section, #benchmark-section) .table-scroll { max-width: 900px; }
  #rollup-section .table-scroll { max-width: 1000px; }
  .deliv-subhead { max-width: none; margin-left: 0; margin-right: 0; }
  .letter-note { margin-left: 0; margin-right: 0; }
  .guides-note { margin-left: 0; margin-right: 0; text-align: left; }
  #deliverables-section + section .dive-example { max-width: var(--content) !important; }
  .close-strip { padding-left: var(--bleed-x); padding-right: var(--bleed-x); text-align: left; }
  .close-strip .txt { margin-left: 0; margin-right: 0; }
}