/* =========================================================
   Person-Led CMS & SEO Agency — Design System
   Source: Website Design Guide v1.0
   ========================================================= */

/* ---------- 1. Fonts (self-hosted, Latin subset) ---------- */
@font-face {
  font-family: "Inter";
  src: url("../fonts/inter-var.woff2") format("woff2");
  font-weight: 100 900;
  font-style: normal;
  font-display: swap;
}
@font-face {
  font-family: "Source Serif 4";
  src: url("../fonts/source-serif-4-600.woff2") format("woff2");
  font-weight: 600;
  font-style: normal;
  font-display: swap;
}
@font-face {
  font-family: "Source Serif 4";
  src: url("../fonts/source-serif-4-400-italic.woff2") format("woff2");
  font-weight: 400;
  font-style: italic;
  font-display: swap;
}
/* Metric-adjusted fallbacks to limit layout shift while fonts load */
@font-face {
  font-family: "Inter Fallback";
  src: local("Arial");
  size-adjust: 107%;
  ascent-override: 90%;
  descent-override: 22%;
  line-gap-override: 0%;
}
@font-face {
  font-family: "Serif Fallback";
  src: local("Georgia");
  size-adjust: 98%;
  ascent-override: 92%;
  descent-override: 26%;
}

/* ---------- 2. Design tokens ---------- */
:root {
  --color-ink-navy: #0F2A44;
  --color-trust-blue: #1D4E89;
  --color-cta: #C2410C;
  --color-cta-hover: #9A3412;
  --color-cta-on-dark: #FB923C;
  --color-cta-on-dark-hover: #FDBA74;
  --color-result-green: #15803D;
  --color-body: #334155;
  --color-muted: #5B6B7F;
  --color-white: #FFFFFF;
  --color-paper: #FAF8F5;
  --color-mist: #E8EEF5;
  --color-amber-tint: #FFF4E6;
  --color-line: #E2DED6;
  --color-sky: #7FB2E5;
  --color-warning: #B45309;
  --color-error: #B91C1C;

  --cluster-law: #6B2737;
  --cluster-health: #0F766E;
  --cluster-home: #A16207;
  --cluster-mortgage: #1E40AF;

  --font-serif: "Source Serif 4", "Serif Fallback", Georgia, "Times New Roman", serif;
  --font-sans: "Inter", "Inter Fallback", system-ui, -apple-system, "Segoe UI", Roboto, Arial, sans-serif;

  --text-display: clamp(2.375rem, 1.6rem + 3vw, 3.5rem);
  --text-h1: clamp(2.125rem, 1.6rem + 2vw, 2.875rem);
  --text-h2: clamp(1.75rem, 1.4rem + 1.4vw, 2.25rem);
  --text-h3: clamp(1.3125rem, 1.2rem + 0.5vw, 1.5rem);
  --text-h4: clamp(1.1875rem, 1.15rem + 0.2vw, 1.25rem);
  --text-lead: clamp(1.1875rem, 1.1rem + 0.35vw, 1.3125rem);
  --text-body: clamp(1.0625rem, 1rem + 0.2vw, 1.125rem);
  --text-small: 0.9375rem;
  --text-caption: 0.8125rem;
  --text-stat: clamp(2.5rem, 2.2rem + 1vw, 3rem);

  --space-1: 4px;  --space-2: 8px;  --space-3: 12px; --space-4: 16px;
  --space-6: 24px; --space-8: 32px; --space-12: 48px; --space-16: 64px;
  --space-24: 96px; --space-32: 128px;

  --radius-sm: 8px;
  --radius-md: 12px;
  --radius-pill: 999px;
  --shadow-card: 0 1px 2px rgba(15, 42, 68, .06), 0 8px 24px rgba(15, 42, 68, .08);
  --focus-ring: 0 0 0 2px #FFFFFF, 0 0 0 5px #1D4E89;

  --container: 1200px;
  --container-wide: 1320px;
  --reading: 720px;
  --header-h: 72px;
  --section-pad: var(--space-24);
  --gutter: 20px;
}
@media (max-width: 1023px) { :root { --section-pad: var(--space-16); --header-h: 64px; --gutter: 32px; } }
@media (max-width: 767px)  { :root { --section-pad: var(--space-12); --gutter: 20px; } }

/* ---------- 3. Base ---------- */
*, *::before, *::after { box-sizing: border-box; }
html { -webkit-text-size-adjust: 100%; scroll-behavior: smooth; scroll-padding-top: calc(var(--header-h) + 16px); }
body {
  margin: 0;
  font-family: var(--font-sans);
  font-size: var(--text-body);
  line-height: 1.56;
  color: var(--color-body);
  background: var(--color-paper);
  text-rendering: optimizeLegibility;
  -webkit-font-smoothing: antialiased;
}
img, svg, video { display: block; max-width: 100%; height: auto; }
h1, h2, h3, h4 { color: var(--color-ink-navy); margin: 0 0 var(--space-4); }
h1, h2, .display { font-family: var(--font-serif); font-weight: 600; }
.display { font-size: var(--text-display); line-height: 1.14; letter-spacing: -0.5px; color: var(--color-ink-navy); margin: 0 0 var(--space-6); }
h1 { font-size: var(--text-h1); line-height: 1.17; letter-spacing: -0.4px; }
h2 { font-size: var(--text-h2); line-height: 1.22; letter-spacing: -0.3px; }
h3 { font-size: var(--text-h3); line-height: 1.33; font-weight: 600; letter-spacing: -0.2px; }
h4 { font-size: var(--text-h4); line-height: 1.4; font-weight: 600; }
p { margin: 0 0 var(--space-4); }
ul, ol { margin: 0 0 var(--space-4); padding-left: 1.25em; }
li + li { margin-top: var(--space-2); }
strong { font-weight: 600; color: var(--color-ink-navy); }
a { color: var(--color-trust-blue); text-decoration: underline; text-underline-offset: 2px; text-decoration-thickness: 1px; }
a:hover { color: var(--color-ink-navy); }
:focus-visible { outline: 3px solid var(--color-trust-blue); outline-offset: 2px; border-radius: 4px; }
.on-dark :focus-visible { outline-color: var(--color-cta-on-dark-hover); }
hr { border: 0; border-top: 1px solid var(--color-line); margin: var(--space-12) 0; }
.tabular { font-variant-numeric: tabular-nums; }

.skip-link {
  position: absolute; left: 16px; top: -100px; z-index: 1000;
  background: var(--color-ink-navy); color: #fff; padding: 12px 16px; border-radius: var(--radius-sm);
}
.skip-link:focus { top: 12px; color: #fff; }
.visually-hidden {
  position: absolute !important; width: 1px; height: 1px; padding: 0; margin: -1px;
  overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; border: 0;
}

/* ---------- 4. Layout ---------- */
.container { width: 100%; max-width: calc(var(--container) + 2 * var(--gutter)); margin: 0 auto; padding: 0 var(--gutter); }
.container--wide { max-width: calc(var(--container-wide) + 2 * var(--gutter)); }
.container--reading { max-width: calc(var(--reading) + 2 * var(--gutter)); }
.section { padding: var(--section-pad) 0; }
.section--white { background: var(--color-white); }
.section--mist { background: var(--color-mist); }
.section--amber { background: var(--color-amber-tint); }
.section--navy { background: var(--color-ink-navy); color: #DCE6F1; }
.section--navy h2, .section--navy h3, .section--navy h4, .section--navy strong { color: #fff; }
.section--navy a:not(.btn) { color: var(--color-sky); }
.section--tight { padding: var(--space-12) 0; }

.section-head { max-width: 760px; margin-bottom: var(--space-12); }
.section-head--center { margin-left: auto; margin-right: auto; text-align: center; }
.eyebrow {
  display: inline-block; font-size: 0.875rem; line-height: 1.4; font-weight: 600;
  letter-spacing: 1.2px; text-transform: uppercase; color: var(--color-trust-blue); margin-bottom: var(--space-3);
}
.section--navy .eyebrow { color: var(--color-sky); }
.lead { font-size: var(--text-lead); line-height: 1.52; color: var(--color-body); }
.section--navy .lead { color: #DCE6F1; }
.small { font-size: var(--text-small); line-height: 1.6; }
.caption { font-size: var(--text-caption); line-height: 1.54; color: var(--color-muted); }
.muted { color: var(--color-muted); }
.prose { max-width: var(--reading); }
.prose h2 { margin-top: var(--space-12); }
.prose h3 { margin-top: var(--space-8); }

.grid { display: grid; gap: var(--space-6); }
.grid-2 { grid-template-columns: repeat(2, minmax(0, 1fr)); }
.grid-3 { grid-template-columns: repeat(3, minmax(0, 1fr)); }
.grid-4 { grid-template-columns: repeat(4, minmax(0, 1fr)); }
.split { display: grid; grid-template-columns: minmax(0, 1.1fr) minmax(0, 0.9fr); gap: var(--space-12); align-items: center; }
.split--top { align-items: start; }
@media (max-width: 1023px) {
  .grid-4 { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .grid-3 { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .split { grid-template-columns: 1fr; gap: var(--space-8); }
}
@media (max-width: 767px) {
  .grid-2, .grid-3, .grid-4 { grid-template-columns: 1fr; }
}

/* ---------- 5. Buttons ---------- */
.btn {
  display: inline-flex; align-items: center; justify-content: center; gap: 10px;
  min-height: 52px; padding: 0 24px; border-radius: var(--radius-sm);
  font: 600 1.0625rem/1.4 var(--font-sans); letter-spacing: .1px;
  text-decoration: none; cursor: pointer; border: 1.5px solid transparent;
  transition: background-color .18s ease-out, color .18s ease-out, box-shadow .18s ease-out, transform .18s ease-out;
}
.btn:hover { transform: translateY(-1px); }
.btn:focus-visible { outline: none; box-shadow: var(--focus-ring); }
.btn--primary { background: var(--color-cta); color: #fff; }
.btn--primary:hover { background: var(--color-cta-hover); color: #fff; }
.btn--secondary { background: #fff; color: var(--color-ink-navy); border-color: var(--color-ink-navy); }
.btn--secondary:hover { background: var(--color-mist); color: var(--color-ink-navy); }
.btn--on-dark { background: var(--color-cta-on-dark); color: var(--color-ink-navy); }
.btn--on-dark:hover { background: var(--color-cta-on-dark-hover); color: var(--color-ink-navy); }
.btn--on-dark:focus-visible { box-shadow: 0 0 0 2px var(--color-ink-navy), 0 0 0 5px var(--color-cta-on-dark-hover); }
.btn--ghost-dark { background: transparent; color: #fff; border-color: rgba(255,255,255,.6); }
.btn--ghost-dark:hover { background: rgba(255,255,255,.08); color: #fff; }
.btn--sm { min-height: 44px; padding: 0 18px; font-size: 1rem; }
.btn--block { width: 100%; }
.btn-row { display: flex; flex-wrap: wrap; gap: var(--space-3); align-items: center; }
@media (max-width: 767px) { .btn-row .btn { width: 100%; } }

.link-arrow { font-weight: 600; text-decoration: none; display: inline-flex; align-items: center; gap: 6px; }
.link-arrow::after { content: "→"; transition: transform .18s ease-out; }
.link-arrow:hover { text-decoration: underline; }
.link-arrow:hover::after { transform: translateX(3px); }

/* ---------- 6. Header & navigation ---------- */
.site-header {
  position: sticky; top: 0; z-index: 100; background: #fff;
  border-bottom: 1px solid transparent; transition: border-color .18s, box-shadow .18s;
}
.site-header.is-scrolled { border-bottom-color: var(--color-line); box-shadow: 0 2px 12px rgba(15,42,68,.06); }
.site-header .container { max-width: calc(var(--container-wide) + 2 * var(--gutter)); } /* header gets 1320px so the full nav fits */
.header-inner { display: flex; align-items: center; gap: var(--space-6); height: var(--header-h); }
.brand { display: inline-flex; align-items: center; gap: 12px; text-decoration: none; color: var(--color-ink-navy); flex-shrink: 0; }
.brand__mark { width: 40px; height: 40px; }
.brand__text { display: flex; flex-direction: column; line-height: 1.1; }
.brand__name { font-family: var(--font-serif); font-weight: 600; font-size: 1.25rem; color: var(--color-ink-navy); }
.brand__by { font-size: .78rem; font-weight: 500; color: var(--color-muted); letter-spacing: .2px; margin-top: 3px; }
.site-header .brand:hover .brand__name { color: var(--color-trust-blue); }

.primary-nav { margin-left: auto; }
.primary-nav > ul { list-style: none; margin: 0; padding: 0; display: flex; align-items: center; gap: 4px; }
.primary-nav > ul > li { position: relative; margin: 0; }
.nav-link, .nav-toggle-sub {
  display: inline-flex; align-items: center; gap: 6px; min-height: 44px; padding: 0 12px;
  font: 500 1rem/1 var(--font-sans); color: var(--color-ink-navy); text-decoration: none;
  background: none; border: 0; border-radius: var(--radius-sm); cursor: pointer;
  white-space: nowrap; /* never break "Case Studies" / "Who I Help" onto two lines */
}
.nav-link:hover, .nav-toggle-sub:hover, .nav-link[aria-current="page"] { background: var(--color-mist); color: var(--color-ink-navy); }
.nav-toggle-sub svg { width: 14px; height: 14px; transition: transform .18s; }
.nav-toggle-sub[aria-expanded="true"] svg { transform: rotate(180deg); }
.header-actions { display: flex; align-items: center; gap: var(--space-3); flex-shrink: 0; }
.header-actions .btn { white-space: nowrap; }
.header-phone { display: inline-flex; align-items: center; gap: 8px; min-height: 44px; font-weight: 600; color: var(--color-ink-navy); text-decoration: none; white-space: nowrap; }
.header-phone:hover { text-decoration: underline; color: var(--color-ink-navy); }
.header-phone svg { width: 18px; height: 18px; }

.dropdown {
  position: absolute; top: calc(100% + 8px); left: 0; min-width: 300px; background: #fff;
  border: 1px solid var(--color-line); border-radius: var(--radius-md); box-shadow: var(--shadow-card);
  padding: var(--space-3); display: none;
}
.dropdown.is-open { display: block; }
.dropdown ul { list-style: none; margin: 0; padding: 0; }
.dropdown li { margin: 0; }
.dropdown a { display: block; padding: 10px 12px; border-radius: var(--radius-sm); text-decoration: none; color: var(--color-ink-navy); font-weight: 500; }
.dropdown a:hover { background: var(--color-mist); }
.dropdown a small { display: block; font-weight: 400; color: var(--color-muted); font-size: .875rem; margin-top: 2px; }
.dropdown--mega { left: 50%; transform: translateX(-50%); width: min(920px, 92vw); padding: var(--space-6); }
.mega-grid { display: grid; grid-template-columns: repeat(4, 1fr); gap: var(--space-6); }
.mega-col h3 { font-size: 1rem; margin: 0 0 var(--space-2); display: flex; align-items: center; gap: 8px; }
.mega-col h3 a { padding: 0; font-weight: 600; }
.mega-col h3 a:hover { background: none; text-decoration: underline; }
.mega-col .icon { width: 22px; height: 22px; }
.mega-col li a { padding: 6px 0; font-weight: 400; font-size: .95rem; }
.mega-col li a:hover { background: none; text-decoration: underline; }
.mega-col .soon { display: block; padding: 6px 0; font-size: .95rem; color: var(--color-muted); }
.mega-foot { margin-top: var(--space-6); padding-top: var(--space-4); border-top: 1px solid var(--color-line); display: flex; justify-content: space-between; align-items: center; gap: var(--space-4); flex-wrap: wrap; }

.menu-btn {
  display: none; margin-left: auto; width: 48px; height: 48px; border: 1.5px solid var(--color-line);
  background: #fff; border-radius: var(--radius-sm); align-items: center; justify-content: center; cursor: pointer; color: var(--color-ink-navy);
}
.menu-btn svg { width: 24px; height: 24px; }

/* 1200–1359px: phone shows as an icon only, to make room for the nav */
@media (max-width: 1359px) {
  .header-phone span { display: none; }
  .header-phone { justify-content: center; min-width: 44px; }
}
/* 1200–1299px: slightly tighter nav spacing so the full nav (incl. Contact) fits */
@media (min-width: 1200px) and (max-width: 1299px) {
  .primary-nav > ul { gap: 0; }
  .nav-link, .nav-toggle-sub { padding: 0 8px; }
}
@media (min-width: 1200px) and (max-width: 1239px) {
  .header-inner { gap: var(--space-4); }
  .nav-link, .nav-toggle-sub { padding: 0 6px; }
}
/* Below 1200px the full nav no longer fits: switch to the hamburger menu (was 1023px) */
@media (max-width: 1199px) {
  .menu-btn { display: inline-flex; }
  .header-actions .btn, .header-phone { display: none; }
  .primary-nav {
    position: fixed; inset: var(--header-h) 0 0 0; background: #fff; overflow-y: auto;
    padding: var(--space-6) var(--gutter) 120px; display: none; margin: 0;
  }
  .primary-nav.is-open { display: block; }
  .primary-nav > ul { flex-direction: column; align-items: stretch; gap: 0; }
  .primary-nav > ul > li { border-bottom: 1px solid var(--color-line); }
  .nav-link, .nav-toggle-sub { width: 100%; justify-content: space-between; min-height: 56px; font-size: 1.125rem; padding: 0 4px; }
  .dropdown, .dropdown--mega { position: static; transform: none; width: auto; min-width: 0; box-shadow: none; border: 0; padding: 0 0 var(--space-4) 8px; }
  .mega-grid { grid-template-columns: 1fr; gap: var(--space-4); }
  .mega-foot { display: none; }
  .mobile-nav-cta { display: grid !important; gap: var(--space-3); margin-top: var(--space-6); }
  body.nav-open { overflow: hidden; }
}
/* Tablet / small laptop: keep the "Free Teardown" button visible next to the hamburger */
@media (min-width: 768px) and (max-width: 1199px) {
  .header-actions { margin-left: auto; }
  .header-actions .btn { display: inline-flex; }
  .menu-btn { margin-left: 0; order: 1; }
}
.mobile-nav-cta { display: none; }

/* Minimal header for landing pages */
.site-header--minimal .header-inner { justify-content: space-between; }

/* ---------- 7. Mobile action bar ---------- */
.mobile-bar {
  display: none; position: fixed; left: 0; right: 0; bottom: 0; z-index: 90;
  background: #fff; border-top: 1px solid var(--color-line); padding: 10px 12px calc(10px + env(safe-area-inset-bottom));
  gap: 10px; box-shadow: 0 -4px 16px rgba(15,42,68,.08);
}
.mobile-bar .btn { flex: 1; min-height: 48px; white-space: nowrap; }
@media (max-width: 767px) {
  .mobile-bar { display: flex; }
  body.has-mobile-bar { padding-bottom: 76px; }
  .header-actions { display: none; } /* empty on phones; its gap pushed the hamburger off the edge */
}
/* Small phones (≤379px): "Call" shrinks to fit, "Free Teardown" gets the rest of the bar */
@media (max-width: 379px) {
  .mobile-bar .btn { padding: 0 16px; }
  .mobile-bar .btn--secondary { flex: 0 0 auto; }
}

/* ---------- 8. Hero ---------- */
.hero { padding: var(--space-16) 0 var(--space-6); background: var(--color-paper); }
.hero--home { padding: var(--space-6); /* Reduce from var(--space-24) to a smaller variable like space-8 or space-6 */}
.hero .lead { max-width: 600px; margin-bottom: var(--space-8); }
.trust-line { display: flex; flex-wrap: wrap; gap: 8px 20px; margin: var(--space-6) 0 0; padding: 0; list-style: none; font-size: var(--text-small); color: var(--color-body); }
.trust-line li { margin: 0; display: inline-flex; align-items: center; gap: 8px; }
.trust-line svg { width: 18px; height: 18px; color: var(--color-result-green); flex-shrink: 0; }
.hero-media { position: relative; }
.hero-photo { border-radius: var(--radius-md); overflow: hidden; box-shadow: var(--shadow-card); background: var(--color-mist); aspect-ratio: 4 / 5; }
.hero-photo img { width: 100%; height: 100%; object-fit: cover; }
.float-card {
  position: absolute; left: -32px; bottom: 32px; background: #fff; border-radius: var(--radius-md);
  box-shadow: var(--shadow-card); padding: 16px 20px; min-width: 240px; border: 1px solid var(--color-line);
}
.float-card__label { font-size: var(--text-caption); color: var(--color-muted); margin: 0 0 4px; }
.float-card__value { font: 700 1.5rem/1.2 var(--font-sans); color: var(--color-ink-navy); font-variant-numeric: tabular-nums; margin: 0; display: flex; align-items: center; gap: 8px; }
.float-card__value .up { color: var(--color-result-green); }
.float-card .sample-tag { margin-top: 8px; }
@media (max-width: 1023px) {
  .hero { padding-bottom: var(--space-16); }
  .hero-media { max-width: 460px; }
  .float-card { left: 16px; bottom: 16px; }
}
.hero--simple { padding: var(--space-16) 0 var(--space-12); }
.hero--simple .lead { max-width: 720px; }

.breadcrumbs { font-size: var(--text-small); margin-bottom: var(--space-6); }
.breadcrumbs ol { list-style: none; margin: 0; padding: 0; display: flex; flex-wrap: wrap; gap: 6px; }
.breadcrumbs li { margin: 0; color: var(--color-muted); }
.breadcrumbs li + li::before { content: "/"; margin-right: 6px; color: var(--color-muted); }
.breadcrumbs a { color: var(--color-muted); }
.breadcrumbs a:hover { color: var(--color-ink-navy); }

/* ---------- 9. Pain strip ---------- */
.pain-strip { background: var(--color-white); border-top: 1px solid var(--color-line); border-bottom: 1px solid var(--color-line); padding: var(--space-12) 0; }
.pain-list { display: grid; grid-template-columns: repeat(3, 1fr); gap: var(--space-6); list-style: none; margin: 0; padding: 0; }
.pain-list li { margin: 0; display: flex; gap: 14px; align-items: flex-start; font-weight: 500; color: var(--color-ink-navy); }
.pain-list .icon-wrap { flex-shrink: 0; width: 40px; height: 40px; border-radius: 50%; background: var(--color-amber-tint); color: var(--color-cta-hover); display: grid; place-items: center; }
.pain-list svg { width: 20px; height: 20px; }
@media (max-width: 767px) { .pain-list { grid-template-columns: 1fr; } }

/* ---------- 10. Cards ---------- */
.card {
  position: relative; background: #fff; border: 1px solid var(--color-line); border-radius: var(--radius-md);
  padding: var(--space-6); box-shadow: var(--shadow-card); display: flex; flex-direction: column;
  transition: transform .18s ease-out, box-shadow .18s ease-out;
}
.card h3 { margin-bottom: var(--space-3); }
.card p:last-child { margin-bottom: 0; }
.card--link:hover { transform: translateY(-2px); box-shadow: 0 2px 4px rgba(15,42,68,.06), 0 14px 32px rgba(15,42,68,.12); }
.card__link::after { content: ""; position: absolute; inset: 0; border-radius: inherit; }
.card__link { text-decoration: none; color: inherit; }
.card__link:hover { color: var(--color-trust-blue); }
.card .link-arrow { margin-top: auto; padding-top: var(--space-4); }
.card__icon { width: 48px; height: 48px; border-radius: 12px; display: grid; place-items: center; margin-bottom: var(--space-4); background: var(--color-mist); color: var(--color-trust-blue); }
.card__icon svg { width: 26px; height: 26px; }
.card__icon--law { background: #F5E9EC; color: var(--cluster-law); }
.card__icon--health { background: #E3F3F1; color: var(--cluster-health); }
.card__icon--home { background: #FBF0DC; color: var(--cluster-home); }
.card__icon--mortgage { background: #E5ECFB; color: var(--cluster-mortgage); }
.card__list { list-style: none; padding: 0; margin: 0 0 var(--space-4); font-size: var(--text-small); }
.card__list li { margin: 6px 0 0; padding-left: 22px; position: relative; }
.card__list li::before { content: ""; position: absolute; left: 2px; top: .55em; width: 8px; height: 8px; border-radius: 50%; background: var(--color-line); }
.card__meta { font-size: var(--text-small); color: var(--color-muted); }

.check-list { list-style: none; padding: 0; margin: 0 0 var(--space-6); }
.check-list li { position: relative; padding-left: 32px; margin: 0 0 var(--space-3); }
.check-list li::before {
  content: ""; position: absolute; left: 0; top: .2em; width: 20px; height: 20px; border-radius: 50%;
  background: var(--color-result-green) url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='white' stroke-width='3' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M20 6 9 17l-5-5'/%3E%3C/svg%3E") center / 12px no-repeat;
}
.section--navy .check-list li::before { background-color: #22A35A; }
.x-list { list-style: none; padding: 0; margin: 0; }
.x-list li { position: relative; padding-left: 32px; margin: 0 0 var(--space-3); }
.x-list li::before {
  content: "×"; position: absolute; left: 0; top: .05em; width: 20px; height: 20px; border-radius: 50%;
  background: var(--color-mist); color: var(--color-muted); font-weight: 700; display: grid; place-items: center; font-size: 15px; line-height: 1;
}

.tag {
  display: inline-flex; align-items: center; gap: 6px; padding: 4px 10px; border-radius: var(--radius-pill);
  font-size: .8125rem; font-weight: 600; background: var(--color-mist); color: var(--color-trust-blue); line-height: 1.4;
}
.tag--law { background: #F5E9EC; color: var(--cluster-law); }
.tag--health { background: #E3F3F1; color: var(--cluster-health); }
.tag--home { background: #FBF0DC; color: #7A4A05; }
.tag--mortgage { background: #E5ECFB; color: var(--cluster-mortgage); }
.sample-tag {
  display: inline-flex; align-items: center; gap: 6px; padding: 3px 9px; border-radius: var(--radius-pill);
  font-size: .75rem; font-weight: 600; background: var(--color-amber-tint); color: var(--color-cta-hover);
  border: 1px dashed #F0B37E; line-height: 1.4;
}
html.hide-sample-tags .sample-tag { display: none; }

/* ---------- 11. Proof components ---------- */
.stats { display: grid; grid-template-columns: repeat(3, 1fr); gap: var(--space-6); }
.stat { background: #fff; border: 1px solid var(--color-line); border-radius: var(--radius-md); padding: var(--space-6); }
.stat__value { font: 700 var(--text-stat)/1.08 var(--font-sans); letter-spacing: -0.5px; color: var(--color-ink-navy); font-variant-numeric: tabular-nums; margin: 0 0 var(--space-2); }
.stat__value--good { color: var(--color-result-green); }
.stat__label { font-weight: 600; color: var(--color-ink-navy); margin: 0 0 4px; }
.stat__source { font-size: var(--text-caption); color: var(--color-muted); margin: 0; }
@media (max-width: 767px) { .stats { grid-template-columns: 1fr; } }

.case-card .case-card__result { font: 700 1.5rem/1.25 var(--font-sans); color: var(--color-ink-navy); margin: var(--space-3) 0; }
.case-card .case-card__metrics { display: grid; grid-template-columns: 1fr 1fr; gap: var(--space-3); margin: 0 0 var(--space-4); }
.case-card .case-card__metrics div { background: var(--color-paper); border-radius: var(--radius-sm); padding: 10px 12px; }
.case-card .case-card__metrics b { display: block; font-size: 1.125rem; color: var(--color-result-green); font-variant-numeric: tabular-nums; }
.case-card .case-card__metrics span { font-size: var(--text-caption); color: var(--color-muted); }
.case-card .tags { display: flex; gap: 8px; flex-wrap: wrap; }

.quote {
  background: #fff; border-radius: var(--radius-md); border: 1px solid var(--color-line); padding: var(--space-8);
  box-shadow: var(--shadow-card);
}
.quote blockquote { margin: 0 0 var(--space-6); font: italic 400 1.375rem/1.5 var(--font-serif); color: var(--color-ink-navy); }
.quote figcaption { display: flex; align-items: center; gap: 12px; font-size: var(--text-small); }
.quote figcaption b { display: block; color: var(--color-ink-navy); }
.avatar { width: 48px; height: 48px; border-radius: 50%; background: var(--color-mist); flex-shrink: 0; overflow: hidden; }

.media-frame { border-radius: var(--radius-md); overflow: hidden; box-shadow: var(--shadow-card); background: #fff; border: 1px solid var(--color-line); }
.media-frame__bar { display: flex; gap: 6px; padding: 10px 14px; background: var(--color-mist); border-bottom: 1px solid var(--color-line); }
.media-frame__bar i { width: 10px; height: 10px; border-radius: 50%; background: #C9D3DF; display: block; }
.media-frame figcaption { padding: 12px 16px; font-size: var(--text-caption); color: var(--color-muted); border-top: 1px solid var(--color-line); }

.trust-bar { display: flex; flex-wrap: wrap; align-items: center; justify-content: center; gap: 12px 32px; padding: var(--space-6) 0 0; margin: 0; list-style: none; color: var(--color-muted); font-weight: 600; font-size: var(--text-small); }
.trust-bar li { margin: 0; }

/* ---------- 12. Comparison table ---------- */
.compare { width: 100%; border-collapse: separate; border-spacing: 0; background: #fff; border-radius: var(--radius-md); overflow: hidden; box-shadow: var(--shadow-card); color: var(--color-body); }
.compare th, .compare td { padding: 16px 20px; text-align: left; vertical-align: top; border-bottom: 1px solid var(--color-line); font-size: var(--text-small); }
.compare thead th { font-size: 1rem; background: var(--color-mist); color: var(--color-muted); }
.compare thead th:last-child { background: var(--color-ink-navy); color: #fff; }
.compare thead th:last-child span { display: inline-flex; align-items: center; gap: 10px; }
.compare thead th .avatar { width: 32px; height: 32px; }
.compare td:last-child { color: var(--color-ink-navy); font-weight: 500; background: #FBFCFE; }
.compare td:last-child::before {
  content: ""; display: inline-block; vertical-align: -4px; width: 18px; height: 18px; margin-right: 10px; border-radius: 50%;
  background: var(--color-result-green) url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='white' stroke-width='3' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M20 6 9 17l-5-5'/%3E%3C/svg%3E") center / 11px no-repeat;
}
.compare tr:last-child td { border-bottom: 0; }
@media (max-width: 767px) {
  .compare thead { display: none; }
  .compare, .compare tbody, .compare tr, .compare td { display: block; width: 100%; }
  .compare tr { border-bottom: 1px solid var(--color-line); }
  .compare td { border: 0; padding: 12px 16px 4px; }
  .compare td:first-child { color: var(--color-muted); }
  .compare td:first-child::before { content: "Traditional agency: "; font-weight: 600; }
  .compare td:last-child { padding-bottom: 16px; }
}

/* ---------- 13. Process timeline ---------- */
.process { list-style: none; margin: 0; padding: 0; display: grid; grid-template-columns: repeat(5, 1fr); gap: var(--space-6); counter-reset: step; position: relative; }
.process::before { content: ""; position: absolute; top: 24px; left: 10%; right: 10%; height: 2px; background: var(--color-line); }
.process li { margin: 0; position: relative; text-align: center; counter-increment: step; }
.process li::before {
  content: counter(step); display: grid; place-items: center; width: 48px; height: 48px; margin: 0 auto var(--space-4);
  border-radius: 50%; background: var(--color-ink-navy); color: #fff; font-weight: 700; position: relative; z-index: 1;
  box-shadow: 0 0 0 6px var(--color-paper);
}
.section--white .process li::before { box-shadow: 0 0 0 6px #fff; }
.process h3 { font-size: 1.125rem; margin-bottom: 4px; }
.process .when { display: block; font-size: var(--text-caption); font-weight: 600; color: var(--color-trust-blue); margin-bottom: var(--space-2); text-transform: uppercase; letter-spacing: .8px; }
.process p { font-size: var(--text-small); margin: 0; }
@media (max-width: 1023px) {
  .process { grid-template-columns: 1fr; gap: 0; }
  .process::before { top: 0; bottom: 0; left: 23px; right: auto; width: 2px; height: auto; }
  .process li { text-align: left; padding: 0 0 var(--space-8) 72px; }
  .process li::before { position: absolute; left: 0; top: 0; margin: 0; }
}

/* ---------- 14. Offers / pricing ---------- */
.offer { position: relative; }
.offer--featured { border-top: 3px solid var(--color-cta); }
.offer__pill { position: absolute; top: -14px; right: 20px; background: var(--color-cta); color: #fff; font-size: .75rem; font-weight: 700; padding: 4px 12px; border-radius: var(--radius-pill); letter-spacing: .4px; text-transform: uppercase; }
.offer__step { font-size: var(--text-caption); font-weight: 600; color: var(--color-muted); text-transform: uppercase; letter-spacing: .8px; margin: 0 0 var(--space-2); }
.offer__price { font: 700 1.75rem/1.2 var(--font-sans); color: var(--color-ink-navy); font-variant-numeric: tabular-nums; margin: var(--space-2) 0 var(--space-1); }
.offer__price small { font-size: 1rem; font-weight: 500; color: var(--color-muted); }
.offer__note { font-size: var(--text-caption); color: var(--color-muted); margin-bottom: var(--space-4); }
.offer .check-list { font-size: var(--text-small); }
.offer .btn { margin-top: auto; }

/* ---------- 15. Feature / info blocks ---------- */
.feature { display: flex; gap: var(--space-4); align-items: flex-start; }
.feature .card__icon { flex-shrink: 0; margin: 0; }
.feature h3 { font-size: 1.1875rem; margin-bottom: 6px; }
.feature p { font-size: var(--text-small); margin: 0; }
.info-box { border-left: 4px solid var(--color-trust-blue); background: var(--color-mist); padding: var(--space-6); border-radius: 0 var(--radius-md) var(--radius-md) 0; }
.info-box h3 { font-size: 1.125rem; }
.info-box p:last-child, .info-box ul:last-child { margin-bottom: 0; }
.info-box--compliance { border-left-color: var(--color-muted); background: #fff; border: 1px solid var(--color-line); border-left: 4px solid var(--color-muted); }
.guarantee { display: grid; grid-template-columns: auto 1fr auto; gap: var(--space-6); align-items: center; background: #fff; border: 1px solid var(--color-line); border-radius: var(--radius-md); padding: var(--space-8); box-shadow: var(--shadow-card); }
.guarantee .card__icon { width: 64px; height: 64px; margin: 0; background: #E6F4EC; color: var(--color-result-green); }
.guarantee .card__icon svg { width: 32px; height: 32px; }
.guarantee h2 { font-size: 1.625rem; margin-bottom: 6px; }
.guarantee p { margin: 0; }
@media (max-width: 767px) { .guarantee { grid-template-columns: 1fr; } }

/* ---------- 16. FAQ ---------- */
.faq { max-width: 820px; }
.faq-item { border-bottom: 1px solid var(--color-line); }
.faq-item:first-child { border-top: 1px solid var(--color-line); }
.faq-item summary {
  list-style: none; cursor: pointer; display: flex; justify-content: space-between; align-items: center; gap: var(--space-4);
  padding: 20px 4px; font: 600 var(--text-h4)/1.4 var(--font-sans); color: var(--color-ink-navy); min-height: 44px;
}
.faq-item summary::-webkit-details-marker { display: none; }
.faq-item summary::after {
  content: ""; flex-shrink: 0; width: 28px; height: 28px; border-radius: 50%; background: var(--color-mist)
    url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%230F2A44' stroke-width='2.5' stroke-linecap='round'%3E%3Cpath d='M12 5v14M5 12h14'/%3E%3C/svg%3E") center / 14px no-repeat;
  transition: transform .18s ease-out;
}
.faq-item[open] summary::after { transform: rotate(45deg); }
.faq-item summary:hover { color: var(--color-trust-blue); }
.faq-item .faq-answer { padding: 0 4px 20px; max-width: 720px; }
.faq-item .faq-answer p:last-child { margin-bottom: 0; }

/* ---------- 17. CTA band ---------- */
.cta-band { background: var(--color-ink-navy); color: #DCE6F1; border-radius: var(--radius-md); padding: var(--space-12); display: grid; grid-template-columns: 1fr auto; gap: var(--space-8); align-items: center; }
.cta-band h2 { color: #fff; margin-bottom: var(--space-3); }
.cta-band p { margin: 0; }
.signature { display: flex; align-items: center; gap: 14px; margin-top: var(--space-6); }
.signature .avatar { width: 52px; height: 52px; border: 2px solid rgba(255,255,255,.3); }
.signature__name { font: italic 400 1.25rem/1.2 var(--font-serif); color: #fff; }
.signature small { display: block; color: #B8C7D8; font-size: var(--text-caption); }
.cta-band .reassure { font-size: var(--text-caption); color: #B8C7D8; margin-top: var(--space-3); text-align: center; }
@media (max-width: 1023px) { .cta-band { grid-template-columns: 1fr; padding: var(--space-8); } }

/* ---------- 18. Forms ---------- */
.form-card { background: #fff; border: 1px solid var(--color-line); border-radius: var(--radius-md); box-shadow: var(--shadow-card); padding: var(--space-8); }
.form-card h2 { font-size: 1.625rem; }
.field { margin-bottom: var(--space-4); }
.field label, .field legend { display: block; font-weight: 600; color: var(--color-ink-navy); margin-bottom: 6px; font-size: 1rem; }
.field .optional { font-weight: 400; color: var(--color-muted); font-size: .875rem; }
.field input, .field select, .field textarea {
  width: 100%; min-height: 52px; padding: 12px 14px; font: 400 1.0625rem/1.4 var(--font-sans); color: var(--color-ink-navy);
  background: #fff; border: 1.5px solid var(--color-muted); border-radius: var(--radius-sm); transition: border-color .15s, box-shadow .15s;
}
.field textarea { min-height: 110px; resize: vertical; }
.field select { appearance: none; background: #fff url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%230F2A44' stroke-width='2' stroke-linecap='round'%3E%3Cpath d='m6 9 6 6 6-6'/%3E%3C/svg%3E") right 14px center / 18px no-repeat; padding-right: 44px; }
.field input:focus, .field select:focus, .field textarea:focus { outline: none; border-color: var(--color-trust-blue); box-shadow: 0 0 0 3px rgba(29,78,137,.25); }
.field .hint { font-size: var(--text-caption); color: var(--color-muted); margin-top: 6px; }
.field.has-error input, .field.has-error select, .field.has-error textarea { border-color: var(--color-error); }
.field .error-msg { display: none; align-items: center; gap: 6px; color: var(--color-error); font-size: .875rem; margin-top: 6px; font-weight: 500; }
.field.has-error .error-msg { display: flex; }
.field .error-msg::before { content: "!"; display: grid; place-items: center; width: 16px; height: 16px; border-radius: 50%; background: var(--color-error); color: #fff; font-size: 11px; font-weight: 700; flex-shrink: 0; }
.field-row { display: grid; grid-template-columns: 1fr 1fr; gap: var(--space-4); }
@media (max-width: 767px) { .field-row { grid-template-columns: 1fr; } .form-card { padding: var(--space-6); } }
.hp-field { position: absolute; left: -9999px; width: 1px; height: 1px; overflow: hidden; }
.form-reassure { font-size: var(--text-caption); color: var(--color-muted); margin: var(--space-3) 0 0; text-align: center; }
.form-status { display: none; margin-top: var(--space-4); padding: 12px 14px; border-radius: var(--radius-sm); font-size: var(--text-small); }
.form-status.is-error { display: block; background: #FDECEC; color: var(--color-error); }
.steps-indicator { display: flex; gap: 8px; align-items: center; margin-bottom: var(--space-6); font-size: var(--text-small); color: var(--color-muted); font-weight: 600; }
.steps-indicator .bar { flex: 1; height: 6px; background: var(--color-mist); border-radius: var(--radius-pill); overflow: hidden; }
.steps-indicator .bar span { display: block; height: 100%; width: 50%; background: var(--color-trust-blue); border-radius: inherit; transition: width .25s ease-out; }
.form-step[hidden] { display: none; }
.form-nav { display: flex; gap: var(--space-3); }
.form-nav .btn { flex: 1; }

/* ---------- 19. Filters ---------- */
.filters { display: flex; flex-wrap: wrap; gap: 8px; margin-bottom: var(--space-8); }
.filter-btn { min-height: 44px; padding: 0 16px; border-radius: var(--radius-pill); border: 1.5px solid var(--color-line); background: #fff; color: var(--color-ink-navy); font: 600 .9375rem/1 var(--font-sans); cursor: pointer; }
.filter-btn:hover { border-color: var(--color-ink-navy); }
.filter-btn[aria-pressed="true"] { background: var(--color-ink-navy); color: #fff; border-color: var(--color-ink-navy); }
.filter-btn:focus-visible { outline: none; box-shadow: var(--focus-ring); }
.is-filtered-out { display: none !important; }

/* ---------- 20. Map pack grid ---------- */
.rank-grids { display: grid; grid-template-columns: 1fr 1fr; gap: var(--space-6); }
.rank-grid { background: #fff; border: 1px solid var(--color-line); border-radius: var(--radius-md); padding: var(--space-4); }
.rank-grid .rank-title { font-size: 1rem; font-weight: 600; color: var(--color-ink-navy); margin: 0 0 var(--space-3); display: flex; justify-content: space-between; align-items: baseline; }
.rank-grid table { width: 100%; border-collapse: separate; border-spacing: 6px; }
.rank-grid td { padding: 0; }
.rank { display: grid; place-items: center; width: 100%; aspect-ratio: 1; border-radius: 50%; font: 700 .875rem/1 var(--font-sans); color: #fff; font-variant-numeric: tabular-nums; }
.rank--good { background: var(--color-result-green); }
.rank--mid { background: var(--color-warning); }
.rank--bad { background: var(--color-error); }
.rank-legend { display: flex; gap: 16px; flex-wrap: wrap; font-size: var(--text-caption); color: var(--color-muted); margin-top: var(--space-3); list-style: none; padding: 0; }
.rank-legend li { margin: 0; display: inline-flex; align-items: center; gap: 6px; }
.rank-legend i { width: 12px; height: 12px; border-radius: 50%; display: inline-block; }
@media (max-width: 479px) { .rank-grids { grid-template-columns: 1fr; } }

/* ---------- 21. Footer ---------- */
.site-footer { background: var(--color-ink-navy); color: #C8D4E2; padding: var(--space-16) 0 var(--space-8); font-size: var(--text-small); }
.site-footer a { color: #DCE6F1; text-decoration: none; }
.site-footer a:hover { color: #fff; text-decoration: underline; }
.footer-grid { display: grid; grid-template-columns: 1.4fr repeat(4, 1fr); gap: var(--space-8); }
.footer-grid h2 { font: 600 .875rem/1.4 var(--font-sans); letter-spacing: 1px; text-transform: uppercase; color: #fff; margin-bottom: var(--space-4); }
.footer-grid ul { list-style: none; padding: 0; margin: 0; }
.footer-grid li { margin: 0 0 10px; }
.site-footer .brand__name { color: #fff; }
.site-footer .brand__by { color: #B8C7D8; }
.footer-contact { margin-top: var(--space-6); display: grid; gap: 8px; }
.footer-contact a { display: inline-flex; align-items: center; gap: 8px; min-height: 32px; }
.footer-contact svg { width: 16px; height: 16px; }
.footer-bottom { margin-top: var(--space-12); padding-top: var(--space-6); border-top: 1px solid rgba(255,255,255,.14); display: flex; justify-content: space-between; gap: var(--space-4); flex-wrap: wrap; color: #B8C7D8; }
.footer-bottom ul { display: flex; flex-wrap: wrap; gap: 8px 20px; list-style: none; padding: 0; margin: 0; }
.footer-bottom li { margin: 0; }
.footer-bottom button { background: none; border: 0; color: #DCE6F1; font: inherit; cursor: pointer; padding: 0; }
.footer-bottom button:hover { text-decoration: underline; color: #fff; }
@media (max-width: 1023px) { .footer-grid { grid-template-columns: 1fr 1fr; } .footer-brand { grid-column: 1 / -1; } }
@media (max-width: 479px) { .footer-grid { grid-template-columns: 1fr; } }

/* ---------- 22. Cookie consent ---------- */
.consent {
  position: fixed; z-index: 200; left: 16px; right: 16px; bottom: 16px; max-width: 560px;
  background: #fff; border: 1px solid var(--color-line); border-radius: var(--radius-md); box-shadow: 0 12px 40px rgba(15,42,68,.18);
  padding: var(--space-6); display: none;
}
.consent.is-visible { display: block; }
.consent h2 { font: 600 1.125rem/1.4 var(--font-sans); margin-bottom: 6px; }
.consent p { font-size: var(--text-small); margin-bottom: var(--space-4); }
.consent .btn-row .btn { flex: 1; }
@media (max-width: 767px) { .consent { bottom: 88px; } .consent .btn-row .btn { width: auto; } }

/* ---------- 23. Founder & media placeholders ---------- */
.founder-photo { border-radius: var(--radius-md); overflow: hidden; box-shadow: var(--shadow-card); background: var(--color-mist); }
.video-facade {
  position: relative; display: grid; place-items: center; aspect-ratio: 16 / 9; width: 100%; border-radius: var(--radius-md);
  background: linear-gradient(135deg, #12304E, #1D4E89); color: #fff; border: 0; cursor: pointer; overflow: hidden; font: 600 1rem/1.4 var(--font-sans);
}
.video-facade__play { width: 72px; height: 72px; border-radius: 50%; background: var(--color-cta-on-dark); display: grid; place-items: center; margin: 0 auto 12px; transition: transform .18s; }
.video-facade:hover .video-facade__play { transform: scale(1.06); }
.video-facade__play svg { width: 28px; height: 28px; color: var(--color-ink-navy); margin-left: 4px; }
.scheduler-embed { min-height: 640px; border-radius: var(--radius-md); border: 1px dashed var(--color-muted); background: #fff; display: grid; place-items: center; text-align: center; padding: var(--space-8); }

/* ---------- 24. Misc ---------- */
.legal-note { font-size: var(--text-caption); color: var(--color-muted); }
.toc { background: #fff; border: 1px solid var(--color-line); border-radius: var(--radius-md); padding: var(--space-6); margin-bottom: var(--space-8); }
.toc ol { margin: 0; font-size: var(--text-small); }
.not-found { text-align: center; padding: var(--space-32) 0; }
.notice-bar { background: var(--color-amber-tint); border-bottom: 1px solid #F3D9B8; font-size: var(--text-caption); color: var(--color-cta-hover); text-align: center; padding: 8px var(--gutter); }

/* ---------- 25. Motion ---------- */
.reveal { opacity: 0; transform: translateY(16px); transition: opacity .5s ease-out, transform .5s ease-out; }
.reveal.is-visible { opacity: 1; transform: none; }
.no-js .reveal { opacity: 1; transform: none; }
@media (prefers-reduced-motion: reduce) {
  html { scroll-behavior: auto; }
  *, *::before, *::after { transition-duration: .01ms !important; animation-duration: .01ms !important; }
  .reveal { opacity: 1; transform: none; }
  .btn:hover, .card--link:hover { transform: none; }
}

/* ---------- 26. Print ---------- */
@media print {
  .site-header, .mobile-bar, .consent, .site-footer, .cta-band .btn { display: none !important; }
  body { background: #fff; color: #000; }
}

/* ---------- 27. Additions ---------- */
.mega-col .mega-title { font-size: 1rem; font-weight: 600; margin: 0 0 var(--space-2); display: flex; align-items: center; gap: 8px; color: var(--color-ink-navy); }
.mega-col .mega-title a { padding: 0; font-weight: 600; }
.mega-col .mega-title a:hover { background: none; text-decoration: underline; }
.mega-icon { display: inline-flex; }
.mega-icon .icon { width: 22px; height: 22px; }
.mega-icon--law { color: var(--cluster-law); }
.mega-icon--health { color: var(--cluster-health); }
.mega-icon--home { color: var(--cluster-home); }
.mega-icon--mortgage { color: var(--cluster-mortgage); }
.icon-inline { width: 20px; height: 20px; display: inline-block; vertical-align: -3px; margin-right: 8px; }
.process--3 { grid-template-columns: repeat(3, 1fr); }
@media (max-width: 1023px) { .process--3 { grid-template-columns: 1fr; } }

.data-table { width: 100%; border-collapse: separate; border-spacing: 0; background: #fff; border-radius: var(--radius-md); overflow: hidden; box-shadow: var(--shadow-card); }
.data-table th, .data-table td { padding: 16px 20px; text-align: left; vertical-align: top; border-bottom: 1px solid var(--color-line); font-size: var(--text-small); }
.data-table thead th { background: var(--color-ink-navy); color: #fff; font-size: 1rem; }
.data-table tbody th { color: var(--color-ink-navy); font-weight: 600; }
.data-table tr:last-child th, .data-table tr:last-child td { border-bottom: 0; }
@media (max-width: 767px) {
  .data-table thead { display: none; }
  .data-table, .data-table tbody, .data-table tr, .data-table th, .data-table td { display: block; width: 100%; }
  .data-table tr { border-bottom: 1px solid var(--color-line); padding: 8px 0; }
  .data-table th, .data-table td { border: 0; padding: 6px 16px; }
  .data-table td::before { content: attr(data-label) ": "; font-weight: 600; color: var(--color-ink-navy); }
}
.case-card h2, .case-card h3 { font-family: var(--font-sans); }
.site-footer .brand__mark rect { fill: #1D4E89; }
.btn svg { width: 20px; height: 20px; flex-shrink: 0; }
.rank-grid table { table-layout: fixed; }

/* =========================================================
   28. Moved from the homepage's inline <style> blocks
   (kept in the original order, so the later .hero-note wins)
   ========================================================= */
.hero-note{margin:14px 0 0;font-size:.9rem;opacity:.85;max-width:52ch}
/* Responsive fallback to ensure list items look clean on small screens */
@media (max-width: 768px) {
  ul[aria-label="Experience at a glance"] li {
    flex: 1 1 40%;
  }
}

.hero-note{margin:5px 0 0;font-size:.9rem;opacity:.85;max-width:52ch}
.audit-card__list{list-style:none;margin:8px 0 0;padding:0;display:grid;gap:6px;font-size:.875rem}
.audit-card__list li{display:flex;gap:8px;align-items:flex-start}
.audit-card__list .icon{flex:none;width:16px;height:16px;margin-top:2px;color:#16A34A}
.proof-bar{margin:0;justify-content:center}
.niche-more{margin:8px 0 0;font-size:.85rem;opacity:.75}
.work-card__img{display:block;width:100%;height:auto;aspect-ratio:16/10;object-fit:cover;border-radius:8px;margin-bottom:16px}
.work-map{position:relative;display:block;aspect-ratio:16/10;border-radius:8px;overflow:hidden;margin-bottom:16px;background:#EEF2F6;color:#1E40AF}
.work-map svg{display:block;width:100%;height:100%}
.work-rank{position:absolute;left:12px;bottom:12px;display:flex;align-items:center;gap:10px;max-width:calc(100% - 24px);padding:8px 14px 8px 8px;border-radius:10px;background:#fff;box-shadow:0 6px 18px rgba(15,42,68,.14)}
.work-rank b{flex:none;display:grid;place-items:center;width:44px;height:44px;border-radius:8px;background:#15803D;color:#fff;font-size:1.25rem;font-variant-numeric:tabular-nums}
.work-rank span{font-size:.8rem;line-height:1.3;font-weight:600;color:#0F2A44}
.work-result{display:flex;gap:8px;align-items:flex-start;margin:8px 0 0;font-weight:600;color:#15803D}
.testimonial{margin:32px 0 0;padding:24px;border-left:4px solid #FB923C;background:#fff;border-radius:8px}
.testimonial p{font-size:1.125rem;margin:0 0 12px}
.testimonial footer{font-size:.9rem;opacity:.8}
.founder-photo img{display:block;width:100%;height:auto;border-radius:16px}
.founder-facts{list-style:none;padding:0;margin:20px 0;display:grid;gap:8px}
.founder-facts li{display:flex;gap:10px;align-items:flex-start}
.founder-facts .icon{flex:none;width:18px;height:18px;margin-top:3px}
.lead-form{display:grid;gap:14px;background:#fff;color:#0F2A44;padding:24px;border-radius:12px}
.lead-form label{display:grid;gap:6px;font-weight:600;font-size:.9rem}
.lead-form input{font:inherit;min-height:48px;padding:10px 14px;border:1px solid #94A3B8;border-radius:8px;background:#fff;color:#0F2A44}
.lead-form input:focus-visible{outline:3px solid #FB923C;outline-offset:2px}
.lead-form .reassure{margin:0;font-size:.85rem;color:#475569}
.hp-field{position:absolute;left:-10000px;width:1px;height:1px;overflow:hidden}
@media (prefers-reduced-motion:reduce){.reveal{opacity:1!important;transform:none!important;transition:none!important}}

/* Homepage proof strip (was inline style attributes) */
.proof-strip { padding: 12px 0; margin: 0 0 20px 0; background-color: #f8f9fa; border-top: 1px solid #e9ecef; border-bottom: 1px solid #e9ecef; }
.proof-strip__inner { max-width: 1200px; margin: 0 auto; padding: 0 20px; }
.proof-strip__list { display: flex; flex-wrap: wrap; justify-content: space-around; align-items: center; gap: 16px; margin: 0; padding: 0; list-style: none; text-align: center; }
.proof-strip__item { margin: 0; padding: 4px 8px; font-size: 0.95rem; font-weight: 600; color: #212529; }

/* Homepage hero on phones: same vertical padding as every other section, no extra side padding */
@media (max-width: 767px) { .hero--home { padding: var(--section-pad) 0; } }

/* =========================================================
   29. Moved from the portfolio page's inline <style> block
   ========================================================= */
/* Portfolio page: scoped styles. Tokens come from styles.css (Design Guide §14); fallbacks keep it safe. */
.pf-c-law{--accent:#6B2737}.pf-c-health{--accent:#0F766E}.pf-c-home{--accent:#A16207}.pf-c-mortgage{--accent:#1E40AF}
.pf-hero{padding-block:clamp(48px,7vw,96px) clamp(40px,5vw,64px)}
.pf-hero h1{max-width:20ch}
.pf-hero .lead{max-width:680px}
.pf-hero .trust-line{margin-top:24px}
/* Browser + phone frames */
.pf-frame{background:var(--color-white,#fff);border:1px solid var(--color-line,#E2DED6);border-radius:12px;overflow:hidden;box-shadow:0 1px 2px rgba(15,42,68,.06),0 8px 24px rgba(15,42,68,.08)}
.pf-frame__bar{display:flex;align-items:center;gap:6px;padding:8px 12px;background:var(--color-mist,#E8EEF5);border-bottom:1px solid var(--color-line,#E2DED6)}
.pf-frame__dot{flex:none;width:8px;height:8px;border-radius:50%;background:#B8C4D3}
.pf-frame__url{flex:1;min-width:0;margin-left:8px;padding:2px 10px;border-radius:999px;background:var(--color-white,#fff);font:400 12px/18px var(--font-sans,Inter,system-ui,sans-serif);color:var(--color-muted,#5B6B7F);white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.pf-frame__shot{display:block;aspect-ratio:16/10;background:var(--color-paper,#FAF8F5);overflow:hidden}
.pf-frame__shot>img,.pf-frame__shot>svg{display:block;width:100%;height:100%;object-fit:cover;object-position:top center}
.pf-wf{color:var(--accent,#1D4E89)}
.pf-phone{position:absolute;right:0;bottom:0;width:24%;min-width:96px;max-width:156px;border:6px solid var(--color-ink-navy,#0F2A44);border-radius:22px;overflow:hidden;background:#fff;box-shadow:0 1px 2px rgba(15,42,68,.06),0 8px 24px rgba(15,42,68,.08)}
.pf-phone>img,.pf-phone>svg{display:block;width:100%;height:auto;aspect-ratio:120/250;object-fit:cover;object-position:top}
/* Featured project */
.pf-featured{display:grid;gap:40px;align-items:center}
.pf-featured__media{position:relative;padding:0 32px 32px 0}
.pf-featured h2{margin-top:12px}
.pf-metrics{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:12px;margin:24px 0;padding:0;list-style:none}
.pf-metrics li{padding:16px 12px;border-radius:12px;background:var(--color-white,#fff);border:1px solid var(--color-line,#E2DED6)}
.pf-metrics b{display:block;font:700 clamp(1.5rem,1.2rem + 1vw,2rem)/1.15 var(--font-sans,Inter,system-ui,sans-serif);font-variant-numeric:tabular-nums;letter-spacing:-.5px;color:var(--color-result-green,#15803D)}
.pf-metrics span{display:block;margin-top:4px;font-size:.875rem;line-height:1.35;color:var(--color-muted,#5B6B7F)}
/* Mobile/tablet fix: let the single column shrink to the viewport instead of growing to the frame's no-wrap URL text */
@media (max-width:1023px){.pf-featured{grid-template-columns:minmax(0,1fr)}}
/* Phone fix: keep the fixed bottom action bar inside the viewport (buttons no longer force a minimum width wider than the screen) */
@media (max-width:420px){.mobile-bar .btn{min-width:0;padding-left:12px;padding-right:12px;gap:8px}}
@media (max-width:340px){.mobile-bar .btn{font-size:.9375rem}}
@media (min-width:1024px){.pf-featured{grid-template-columns:minmax(0,7fr) minmax(0,5fr);gap:64px}}
/* Filters */
.pf-toolbar{display:flex;flex-wrap:wrap;gap:16px 32px;align-items:flex-end;justify-content:space-between;margin:0 0 32px;padding:20px;border:1px solid var(--color-line,#E2DED6);border-radius:12px;background:var(--color-white,#fff)}
.pf-toolbar[hidden]{display:none}
.pf-filters{display:flex;flex-wrap:wrap;gap:16px 32px}
.pf-group{min-width:0;margin:0;padding:0;border:0}
.pf-group legend{margin:0 0 8px;padding:0;font:600 13px/18px var(--font-sans,Inter,system-ui,sans-serif);letter-spacing:1.2px;text-transform:uppercase;color:var(--color-muted,#5B6B7F)}
.pf-chips{display:flex;flex-wrap:wrap;gap:8px}
.pf-chip{min-height:44px;padding:0 16px;border:1.5px solid var(--color-muted,#5B6B7F);border-radius:999px;background:var(--color-white,#fff);color:var(--color-ink-navy,#0F2A44);font:500 15px/1 var(--font-sans,Inter,system-ui,sans-serif);cursor:pointer;transition:background-color .15s ease-out,color .15s ease-out,border-color .15s ease-out}
.pf-chip:hover{background:var(--color-mist,#E8EEF5)}
.pf-chip[aria-pressed="true"]{background:var(--color-ink-navy,#0F2A44);border-color:var(--color-ink-navy,#0F2A44);color:#fff}
.pf-chip:focus-visible{outline:3px solid var(--color-trust-blue,#1D4E89);outline-offset:2px}
.pf-count{margin:0;font-size:15px;color:var(--color-muted,#5B6B7F);font-variant-numeric:tabular-nums}
/* Grid + cards */
.pf-grid{display:grid;grid-template-columns:repeat(auto-fill,minmax(min(100%,330px),1fr));gap:24px;margin:0;padding:0;list-style:none}
.pf-grid>li{margin:0;padding:0}
.pf-grid>li::before{content:none}
.pf-grid>li[hidden]{display:none}
.pf-card{display:flex;flex-direction:column;height:100%;background:var(--color-white,#fff);border:1px solid var(--color-line,#E2DED6);border-radius:12px;overflow:hidden;box-shadow:0 1px 2px rgba(15,42,68,.06),0 8px 24px rgba(15,42,68,.08);transition:transform .2s ease-out}
.pf-card:hover{transform:translateY(-2px)}
.pf-card .pf-frame{border:0;border-bottom:1px solid var(--color-line,#E2DED6);border-radius:0;box-shadow:none}
.pf-card__body{display:flex;flex:1;flex-direction:column;gap:12px;padding:24px}
.pf-card__title{margin:0;font-size:1.3125rem;line-height:1.38}
.pf-card__meta,.pf-card__desc{margin:0;font-size:15px;line-height:24px}
.pf-card__meta{color:var(--color-muted,#5B6B7F)}
.pf-tag,.pf-platform{display:inline-flex;align-items:center;padding:3px 10px;border-radius:999px;font:600 13px/18px var(--font-sans,Inter,system-ui,sans-serif)}
.pf-tag{color:var(--accent,#1D4E89);border:1px solid currentColor;background:var(--color-white,#fff)}
.pf-platform{color:var(--color-ink-navy,#0F2A44);background:var(--color-mist,#E8EEF5)}
.pf-featured .tags,.pf-card .tags{display:flex;flex-wrap:wrap;gap:8px;align-items:center}
.pf-scope{display:flex;flex-wrap:wrap;gap:6px;margin:0;padding:0;list-style:none}
.pf-scope li{margin:0;padding:4px 10px;border-radius:6px;background:var(--color-paper,#FAF8F5);border:1px solid var(--color-line,#E2DED6);font-size:13px;line-height:18px;color:var(--color-body,#334155)}
.pf-scope li::before{content:none}
.pf-result{display:flex;gap:8px;align-items:flex-start;margin:0;font-weight:600;font-size:15px;line-height:22px;color:var(--color-result-green,#15803D)}
.pf-result__icon{flex:none;display:inline-flex;margin-top:1px}
.pf-result .icon{width:20px;height:20px}
.pf-card__links{display:flex;flex-wrap:wrap;gap:0 20px;margin-top:auto;padding-top:4px}
.pf-link{display:inline-flex;align-items:center;gap:6px;min-height:44px;font-weight:600;font-size:15px;color:var(--color-trust-blue,#1D4E89);text-decoration:none}
.pf-link:hover{text-decoration:underline;text-underline-offset:2px;color:var(--color-ink-navy,#0F2A44)}
.pf-link .icon{width:18px;height:18px}
.pf-empty{padding:48px 24px;text-align:center;border:1.5px dashed var(--color-line,#E2DED6);border-radius:12px;background:var(--color-white,#fff)}
.pf-empty[hidden]{display:none}
.pf-empty p{margin:0 0 16px}
/* Every build includes */
.pf-includes .card h3{font-size:1.25rem;margin:12px 0 8px}
.pf-includes .card p{margin:0}
/* Google Maps result visual */
.pf-mapshot{position:relative}
.pf-mapshot .pf-wf{color:var(--accent,#1D4E89)}
.pf-rank{position:absolute;left:16px;bottom:16px;display:flex;align-items:center;gap:12px;max-width:calc(100% - 32px);padding:10px 16px 10px 10px;border-radius:12px;background:#fff;box-shadow:0 1px 2px rgba(15,42,68,.08),0 6px 18px rgba(15,42,68,.14)}
.pf-rank__pos{flex:none;display:grid;place-items:center;width:52px;height:52px;border-radius:10px;font:700 1.5rem/1 var(--font-sans,Inter,system-ui,sans-serif);font-variant-numeric:tabular-nums;color:#fff;background:var(--color-ink-navy,#0F2A44)}
.pf-rank--1 .pf-rank__pos{background:var(--color-result-green,#15803D)}
.pf-rank--3 .pf-rank__pos{background:var(--color-trust-blue,#1D4E89)}
.pf-rank--niche .pf-rank__pos{background:var(--accent,#0F766E)}
.pf-rank__pos--text{font-size:1.05rem;letter-spacing:.5px}
.pf-rank__label{min-width:0;font:600 13px/17px var(--font-sans,Inter,system-ui,sans-serif);color:var(--color-ink-navy,#0F2A44)}
.pf-rank__label small{display:block;margin-top:2px;font-weight:500;font-size:12px;color:var(--color-muted,#5B6B7F)}
/* Featured leaderboard */
.pf-board{display:block;padding:8px 0;background:var(--color-white,#fff)}
.pf-board ol{margin:0;padding:0;list-style:none}
.pf-board li{display:grid;grid-template-columns:44px minmax(0,1fr) auto;gap:12px;align-items:center;padding:10px 16px;border-bottom:1px solid var(--color-line,#E2DED6);font-size:14px;line-height:20px}
.pf-board li:last-child{border-bottom:0}
.pf-board li::before{content:none}
.pf-board b{display:grid;place-items:center;width:36px;height:28px;border-radius:6px;background:var(--color-result-green,#15803D);color:#fff;font-weight:700;font-variant-numeric:tabular-nums}
.pf-board b.is-top3{background:var(--color-trust-blue,#1D4E89)}
.pf-board span{min-width:0;white-space:nowrap;overflow:hidden;text-overflow:ellipsis;font-weight:600;color:var(--color-ink-navy,#0F2A44)}
.pf-board small{color:var(--color-muted,#5B6B7F);white-space:nowrap}
.pf-board__more{padding:10px 16px 4px;margin:0;font-size:13px;color:var(--color-muted,#5B6B7F)}
.pf-asof{margin:24px 0 0;font-size:14px;color:var(--color-muted,#5B6B7F)}
@media (max-width:480px){.pf-board small{display:none}.pf-rank{left:10px;bottom:10px;padding:8px 12px 8px 8px}.pf-rank__pos{width:44px;height:44px;font-size:1.25rem}}
@media (prefers-reduced-motion:reduce){.pf-card,.pf-chip{transition:none}.pf-card:hover{transform:none}}

/* Portfolio filters: per-chip counts and a visible refresh when results change */
.pf-chip { display: inline-flex; align-items: center; gap: 8px; }
.pf-chip__count { display: inline-grid; place-items: center; min-width: 24px; height: 22px; padding: 0 6px; border-radius: 999px; background: var(--color-mist); color: var(--color-ink-navy); font: 600 12px/1 var(--font-sans); font-variant-numeric: tabular-nums; }
.pf-chip[aria-pressed="true"] .pf-chip__count { background: rgba(255,255,255,.22); color: #fff; }
.pf-count { font-weight: 600; }
@keyframes pf-in { from { opacity: 0; transform: translateY(8px); } to { opacity: 1; transform: none; } }
.pf-item--enter { animation: pf-in .35s ease-out; }
.pf-note { color: var(--color-muted,#5B6B7F); margin-top: -8px; }
@media (prefers-reduced-motion: reduce) { .pf-item--enter { animation: none; } }

/* =========================================================
   30. Utilities (replace former inline style="" attributes)
   !important keeps the same precedence an inline style had
   ========================================================= */
.u-m-0 { margin: 0 !important; }
.u-mt-16 { margin-top: 16px !important; }
.u-mt-24 { margin-top: 24px !important; }
.u-fw-500 { font-weight: 500 !important; }
.svg-sprite { position: absolute; }
.text-center { text-align: center; }
.btn-row--center { justify-content: center; }
.grid--start { align-items: start; }
.eyebrow--block { display: block; }
.footer-brand__text { margin-top: 16px; max-width: 320px; }
.case-card .case-card__title { font-size: 1rem; margin-bottom: 4px; }
.case-tags { display: flex; gap: 8px; flex-wrap: wrap; margin-bottom: 12px; }
.card-title-sm { font-size: 1.375rem; }
.toc__title { font-size: 1.125rem; }
.card__icon--center { margin: 0 auto 16px; }
.card__icon--success { margin: 0 auto 16px; background: #E6F4EC; color: var(--color-result-green); }
.signature--light .signature__name { color: var(--color-ink-navy); }
.signature--light small { color: var(--color-muted); }
.hero--teardown .signature { margin-top: 8px; }
.scheduler-frame { display: block; width: 100%; min-height: 700px; border: 0; border-radius: 12px; background: #fff; }
.video-frame { width: 100%; aspect-ratio: 16 / 9; border: 0; border-radius: 12px; }

/* Mobile menu button: icons swap with the menu state (no inline display:none) */
.menu-btn .icon-close { display: none; }
.menu-btn[aria-expanded="true"] .icon-open { display: none; }
.menu-btn[aria-expanded="true"] .icon-close { display: inline; }

/* =========================================================
   31. Brand logo, Book a Call button
   ========================================================= */
.brand__logo { border-radius: 10px; background: #fff; object-fit: contain; }
.site-footer .brand__logo { padding: 2px; }
.header-book .icon { width: 18px; height: 18px; }

/* =========================================================
   32. Hero band: every inner page opens with a distinct hero
   ========================================================= */
.hero--band { position: relative; isolation: isolate; overflow: hidden; background-color: var(--color-mist); border-bottom: 1px solid var(--color-line); padding-bottom: var(--space-16); }
.hero--band::before {
  content: ""; position: absolute; inset: 0; z-index: -1; pointer-events: none;
  background-image: radial-gradient(rgba(29, 78, 137, .16) 1.2px, transparent 1.7px); background-size: 22px 22px;
  -webkit-mask-image: linear-gradient(to left, #000 0%, rgba(0, 0, 0, .5) 35%, transparent 70%);
  mask-image: linear-gradient(to left, #000 0%, rgba(0, 0, 0, .5) 35%, transparent 70%);
}
.hero--band::after {
  content: ""; position: absolute; z-index: -1; right: -80px; top: -80px; width: 360px; height: 360px; border-radius: 50%; pointer-events: none;
  background: radial-gradient(closest-side, rgba(127, 178, 229, .38), rgba(127, 178, 229, 0));
}
.hero--simple.hero--band { padding: var(--space-16) 0 var(--space-12); }
.hero--teardown { padding-top: 48px; }
.not-found.hero--band { padding: var(--space-32) 0; }
.split > div > .founder-photo { max-width: 460px; }

/* =========================================================
   33. Cluster cards: niche names are blue links, the card is not one big link
   ========================================================= */
.card__title-link { color: inherit; text-decoration: none; }
.card__title-link:hover { color: var(--color-trust-blue); }
.card__list--links a { color: var(--color-trust-blue); text-decoration: none; font-weight: 500; }
.card__list--links a:hover { color: var(--color-ink-navy); }
.card--cluster > .link-arrow { color: var(--color-ink-navy); }
.card--cluster > .link-arrow:hover { color: var(--color-trust-blue); }
.check-list--2col { column-gap: var(--space-8); }
.card > .check-list--2col:last-child { margin-bottom: 0; }
.hero--band .tag { background-color: #fff; }
@media (min-width: 768px) { .check-list--2col { columns: 2; } .check-list--2col li { break-inside: avoid; } }

/* =========================================================
   34. Visuals: Map pack goal, positions board, site wireframe, report, case facts
   ========================================================= */
.media-figure { margin: 0; }
.media-figure__caption { margin: 0; padding: 10px 16px; font-size: var(--text-caption); line-height: 1.5; color: var(--color-muted); border-top: 1px solid var(--color-line); background: #fff; }
.map-visual { margin: 0; background: #fff; border: 1px solid var(--color-line); border-radius: var(--radius-md); overflow: hidden; box-shadow: var(--shadow-card); }
.map-visual__search { display: flex; align-items: center; gap: 10px; margin: 14px; padding: 10px 16px; border: 1px solid var(--color-line); border-radius: var(--radius-pill); background: #fff; box-shadow: 0 2px 8px rgba(15, 42, 68, .08); font-size: .95rem; color: var(--color-ink-navy); }
.map-visual__search .icon { width: 18px; height: 18px; color: var(--color-muted); flex: none; }
.map-visual__frame { position: relative; }
.map-visual__map { display: block; width: 100%; height: auto; aspect-ratio: 16 / 10; color: var(--cluster-mortgage); }
.map-visual--law .map-visual__map { color: var(--cluster-law); }
.map-visual--health .map-visual__map { color: var(--cluster-health); }
.map-visual--home .map-visual__map { color: var(--cluster-home); }
.map-visual__goal { position: absolute; left: 16px; bottom: 16px; display: flex; align-items: center; gap: 12px; max-width: calc(100% - 32px); padding: 10px 16px 10px 10px; border-radius: 12px; background: #fff; box-shadow: 0 6px 18px rgba(15, 42, 68, .14); }
.map-visual__goal b { flex: none; display: grid; place-items: center; min-width: 64px; height: 52px; padding: 0 10px; border-radius: 10px; background: var(--color-result-green); color: #fff; font: 700 1.125rem/1 var(--font-sans); }
.map-visual__goal span { font: 600 .875rem/1.3 var(--font-sans); color: var(--color-ink-navy); }
.map-visual__goal small { display: block; margin-top: 2px; font-weight: 500; font-size: .8rem; color: var(--color-muted); }
.site-visual__shot { display: block; background: #fff; border-bottom: 1px solid var(--color-line); }
.site-visual__svg { display: block; width: 100%; height: auto; }
.site-visual__notes { list-style: none; margin: 0; padding: 12px 16px; display: grid; gap: 6px; font-size: var(--text-small); color: var(--color-ink-navy); background: #fff; }
.site-visual__notes li { margin: 0; display: flex; gap: 8px; align-items: center; }
.site-visual__notes .icon { width: 18px; height: 18px; color: var(--color-result-green); flex: none; }
.report-visual__list { list-style: none; margin: 0; padding: 4px 0; background: #fff; }
.report-visual__list li { margin: 0; display: flex; gap: 12px; align-items: center; padding: 12px 16px; border-bottom: 1px solid var(--color-line); }
.report-visual__list li:last-child { border-bottom: 0; }
.report-visual__icon { flex: none; width: 40px; height: 40px; border-radius: 10px; display: grid; place-items: center; background: var(--color-mist); color: var(--color-trust-blue); }
.report-visual__icon .icon { width: 20px; height: 20px; }
.report-visual__list b { display: block; color: var(--color-ink-navy); font-size: .95rem; }
.report-visual__list small { display: block; color: var(--color-muted); font-size: var(--text-caption); }
.facts { margin: 0; }
.facts div { display: grid; grid-template-columns: minmax(120px, 38%) 1fr; gap: 12px; padding: 12px 0; border-bottom: 1px solid var(--color-line); font-size: var(--text-small); }
.facts div:last-child { border-bottom: 0; padding-bottom: 0; }
.facts dt { font-weight: 600; color: var(--color-ink-navy); }
.facts dd { margin: 0; }
@media (max-width: 479px) { .facts div { grid-template-columns: 1fr; gap: 2px; } }