/* NSDC site layer — components on top of the design-system tokens.
   Plain CSS, no build step. Mobile-first. Every colour/space/type value is a token. */

/* ---------- layout ---------- */
.container { width: min(100% - 2 * var(--gutter-mobile), var(--container-max)); margin-inline: auto; }
@media (min-width: 768px) { .container { width: min(100% - 2 * var(--gutter), var(--container-max)); } }
.section { padding-block: var(--section-y-mobile); }
@media (min-width: 768px) { .section { padding-block: var(--section-y); } }
.section--tint { background: var(--surface-section); }
.section--dark { background: var(--surface-dark); color: var(--text-on-dark); }
.section--dark h1, .section--dark h2, .section--dark h3 { color: var(--text-on-dark); }
.section--dark p { color: var(--text-on-dark-muted); }
.section--dark a:not(.btn) { color: var(--text-on-dark); text-decoration: underline; }
.prose { max-width: var(--measure-prose); }
.prose h2 { margin-top: var(--space-12); margin-bottom: var(--space-4); }
.prose h3 { margin-top: var(--space-8); margin-bottom: var(--space-3); }
.prose ul, .prose ol { padding-left: 1.4em; margin: 0 0 var(--space-4); }
.prose li { margin-bottom: var(--space-2); }
.prose li::marker { color: var(--red-600); }
.lead { font-size: var(--text-body-lg-size); line-height: var(--text-body-lg-line); }
.eyebrow { display: block; font-family: var(--font-ui); font-size: var(--text-eyebrow-size); line-height: var(--text-eyebrow-line); font-weight: var(--text-eyebrow-weight); letter-spacing: var(--text-eyebrow-tracking); text-transform: uppercase; color: var(--red-600); margin-bottom: var(--space-3); }
.section--dark .eyebrow { color: var(--accent-on-dark); }
.muted { color: var(--text-muted); }
.small { font-size: var(--text-small-size); line-height: var(--text-small-line); }
.sr-only { position: absolute; width: 1px; height: 1px; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; }
.skip { position: absolute; left: -999px; top: var(--space-2); background: var(--deep); color: var(--white); padding: var(--space-2) var(--space-4); z-index: 100; }
.skip:focus { left: var(--space-2); }
.grid { display: grid; gap: var(--space-6); }
.grid > * { min-width: 0; } /* stop a wide table blowing out the implicit auto track on mobile; .table-wrap scrolls instead */
@media (min-width: 768px) { .grid--2 { grid-template-columns: repeat(2, 1fr); } .grid--3 { grid-template-columns: repeat(3, 1fr); } .grid--4 { grid-template-columns: repeat(4, 1fr); } }
@media (min-width: 1024px) { .grid--sidebar { grid-template-columns: minmax(0, 1fr) 340px; gap: var(--space-12); } }
.two-up { display: grid; gap: var(--space-8); align-items: center; }
@media (min-width: 900px) { .two-up { grid-template-columns: 1fr 1fr; gap: var(--space-16); } .two-up--flip > :first-child { order: 2; } }
img { max-width: 100%; height: auto; display: block; }
.rounded { border-radius: var(--radius-card); }
.section-head { max-width: 60ch; margin-bottom: var(--space-8); }
.section-head p { color: var(--text-muted); font-size: var(--text-body-lg-size); line-height: var(--text-body-lg-line); }

/* ---------- header ---------- */
.site-header { position: sticky; top: 0; z-index: 50; background: var(--surface-card); border-bottom: 1px solid var(--border-default); }
.site-header__row { display: flex; align-items: center; justify-content: space-between; gap: var(--space-4); min-height: 72px; position: relative; }
.brand img { width: 160px; height: auto; }
@media (min-width: 768px) { .brand img { width: 190px; } }
.nav-toggle { display: inline-flex; align-items: center; justify-content: center; width: 44px; height: 44px; border: 1px solid var(--border-default); border-radius: var(--radius-input); background: transparent; cursor: pointer; }
.nav-toggle__bar, .nav-toggle__bar::before, .nav-toggle__bar::after { display: block; width: 20px; height: 2px; background: var(--ink-900); position: relative; content: ""; transition: transform var(--dur-fast) var(--ease-standard); }
.nav-toggle__bar::before { position: absolute; top: -6px; }
.nav-toggle__bar::after { position: absolute; top: 6px; }
.nav-toggle[aria-expanded="true"] .nav-toggle__bar { background: transparent; }
.nav-toggle[aria-expanded="true"] .nav-toggle__bar::before { transform: translateY(6px) rotate(45deg); }
.nav-toggle[aria-expanded="true"] .nav-toggle__bar::after { transform: translateY(-6px) rotate(-45deg); }
.primary-nav { display: none; }
.primary-nav.is-open { display: block; position: absolute; left: calc(-1 * var(--gutter-mobile)); right: calc(-1 * var(--gutter-mobile)); top: 100%; background: var(--surface-card); border-bottom: 1px solid var(--border-default); box-shadow: var(--shadow-overlay); padding: var(--space-4) var(--gutter-mobile) var(--space-6); max-height: calc(100vh - 72px); overflow-y: auto; }
.primary-nav ul { list-style: none; margin: 0; padding: 0; }
.primary-nav > ul > li > a { display: block; padding: var(--space-3) 0; font-family: var(--font-ui); font-weight: var(--weight-semibold); color: var(--ink-900); }
.primary-nav .menu { padding-left: var(--space-4); border-left: 2px solid var(--red-50); margin-bottom: var(--space-2); }
.primary-nav .menu a { display: block; padding: var(--space-2) 0; color: var(--ink-700); font-family: var(--font-ui); }
.primary-nav .menu a:hover { color: var(--red-600); text-decoration: none; }
.nav-cta { margin-top: var(--space-4); }
.nav-cta .btn { white-space: nowrap; }
@media (min-width: 1024px) {
  .nav-toggle { display: none; }
  .primary-nav { display: block; }
  .primary-nav > ul { display: flex; align-items: center; gap: var(--space-6); }
  .primary-nav > ul > li { position: relative; }
  .primary-nav > ul > li > a { padding: var(--space-6) 0; }
  .primary-nav > ul > li > a:hover { color: var(--red-600); text-decoration: none; }
  .primary-nav .menu { position: absolute; top: 100%; left: calc(-1 * var(--space-4)); min-width: 260px; background: var(--surface-card); border: 1px solid var(--border-default); border-radius: var(--radius-panel); box-shadow: var(--shadow-overlay); padding: var(--space-3); margin: 0; opacity: 0; visibility: hidden; transform: translateY(6px); transition: opacity var(--dur-fast) var(--ease-standard), transform var(--dur-fast) var(--ease-standard), visibility 0s linear var(--dur-fast); }
  .primary-nav .has-menu:hover .menu, .primary-nav .has-menu:focus-within .menu { opacity: 1; visibility: visible; transform: none; transition-delay: 0s; }
  .primary-nav .menu a { padding: var(--space-2) var(--space-3); border-radius: var(--radius-input); }
  .primary-nav .menu a:hover { background: var(--surface-section); }
  .nav-cta { margin: 0; }
}

/* ---------- buttons ---------- */
.btn { display: inline-flex; align-items: center; justify-content: center; gap: var(--space-2); padding: 14px 24px; border-radius: var(--radius-pill); font-family: var(--font-ui); font-size: var(--text-small-size); font-weight: var(--weight-semibold); line-height: 1.2; text-decoration: none; border: 2px solid transparent; cursor: pointer; transition: background var(--dur-fast) var(--ease-standard), color var(--dur-fast) var(--ease-standard), border-color var(--dur-fast) var(--ease-standard); }
.btn:hover { text-decoration: none; }
.btn--primary { background: var(--action-primary); color: var(--action-primary-text); }
.btn--primary:hover { background: var(--action-primary-hover); color: var(--action-primary-text); }
.btn--secondary { background: transparent; color: var(--ink-900); border-color: var(--ink-900); }
.btn--secondary:hover { background: var(--ink-900); color: var(--white); }
.btn--on-dark { background: var(--white); color: var(--deep); }
.btn--on-dark:hover { background: var(--ink-100); color: var(--deep); }
.btn--ghost-dark { background: transparent; color: var(--white); border-color: var(--white); }
.btn--ghost-dark:hover { background: var(--white); color: var(--deep); }
.btn--lg { padding: 18px 32px; font-size: var(--text-body-size); }
.btn-row { display: flex; flex-wrap: wrap; gap: var(--space-3); margin-top: var(--space-6); }
.text-link { font-family: var(--font-ui); font-weight: var(--weight-semibold); color: var(--red-600); }
.text-link::after { content: " \2192"; }

/* ---------- page hero (interior) ---------- */
.page-hero { padding-block: var(--space-12) var(--space-8); border-bottom: 1px solid var(--border-default); background: var(--surface-canvas); }
@media (min-width: 768px) { .page-hero { padding-block: var(--space-16) var(--space-12); } }
.page-hero h1 { max-width: 20ch; }
.page-hero .lead { max-width: 60ch; margin-top: var(--space-4); color: var(--text-muted); }
.page-hero--dark { background: var(--surface-dark); color: var(--text-on-dark); border: 0; }
.page-hero--dark h1 { color: var(--text-on-dark); }
.page-hero--dark .lead { color: var(--text-on-dark-muted); }
.page-hero--image { position: relative; isolation: isolate; color: var(--text-on-dark); min-height: 420px; display: flex; align-items: flex-end; border: 0; }
.page-hero--image > img { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; z-index: -2; }
.page-hero--image::after { content: ""; position: absolute; inset: 0; background: linear-gradient(to top, var(--scrim-dark) 0%, transparent 70%); z-index: -1; }
.page-hero--image h1 { color: var(--text-on-dark); }
.page-hero--image .lead { color: var(--text-on-dark); }
.breadcrumb { list-style: none; display: flex; flex-wrap: wrap; gap: var(--space-2); padding: 0; margin: 0 0 var(--space-4); font-family: var(--font-ui); font-size: var(--text-caption-size); color: var(--text-muted); }
.breadcrumb li + li::before { content: "/"; margin-right: var(--space-2); color: var(--ink-200); }
.breadcrumb a { color: inherit; }

/* ---------- stat band ---------- */
.stat-band { display: grid; gap: var(--space-6); grid-template-columns: repeat(2, 1fr); }
@media (min-width: 768px) { .stat-band { grid-template-columns: repeat(4, 1fr); } }
.stat { border-left: 3px solid var(--red-600); padding-left: var(--space-4); }
.stat__num { display: block; font-family: var(--font-display); font-size: var(--text-h1-size); line-height: 1; font-weight: var(--text-h1-weight); letter-spacing: var(--text-h1-tracking); color: var(--text-heading); font-variant-numeric: tabular-nums; }
.stat__label { display: block; margin-top: var(--space-2); font-family: var(--font-ui); font-size: var(--text-small-size); color: var(--text-muted); }
.section--dark .stat__num { color: var(--white); }
.section--dark .stat { border-color: var(--accent-on-dark); }
.section--dark .stat__label { color: var(--text-on-dark-muted); }

/* ---------- cards ---------- */
.card { background: var(--surface-card); border: 1px solid var(--border-default); border-radius: var(--radius-card); padding: var(--space-6); box-shadow: var(--shadow-rest); transition: box-shadow var(--dur-fast) var(--ease-standard), transform var(--dur-fast) var(--ease-standard); }
a.card { color: inherit; display: block; }
a.card:hover { text-decoration: none; box-shadow: var(--shadow-raised); transform: translateY(-2px); }
.card h3 { margin-bottom: var(--space-2); }
.card p { color: var(--text-muted); margin-bottom: 0; }
.card--flush { padding: 0; overflow: hidden; }
.card--flush .card__body { padding: var(--space-6); }
.card__img { aspect-ratio: 16/10; object-fit: cover; width: 100%; }
.card__meta { font-family: var(--font-ui); font-size: var(--text-caption-size); color: var(--text-muted); text-transform: uppercase; letter-spacing: 0.06em; margin-bottom: var(--space-2); display: block; }

/* ---------- callout ---------- */
.callout { background: var(--surface-tint); border: 1px solid var(--red-300); border-radius: var(--radius-panel); padding: var(--space-6); }
.callout--note { background: var(--surface-section); border-color: var(--border-default); }
.callout--warn { background: #FFF7E6; border-color: #E8B85C; }
.callout p:last-child { margin-bottom: 0; }
.callout h3 { margin-bottom: var(--space-2); }

/* ---------- steps ---------- */
.steps { list-style: none; padding: 0; margin: 0; counter-reset: step; display: grid; gap: var(--space-6); }
.steps > li { counter-increment: step; display: grid; grid-template-columns: 48px 1fr; gap: var(--space-4); align-items: start; }
.steps > li::before { content: counter(step); display: flex; align-items: center; justify-content: center; width: 48px; height: 48px; border-radius: 50%; background: var(--red-600); color: var(--white); font-family: var(--font-display); font-size: var(--text-h3-size); font-weight: var(--weight-semibold); }
.steps h3 { margin-bottom: var(--space-1); }
.steps p { margin-bottom: 0; color: var(--text-muted); }
.steps--rail > li { position: relative; padding-bottom: var(--space-6); }
.steps--rail > li:not(:last-child)::after { content: ""; position: absolute; left: 23px; top: 52px; bottom: 0; width: 2px; background: var(--border-default); }

/* ---------- 50-40-10 diagram: animated donut ---------- */
.diagram-504.donut { --c-bank: var(--ink-900); --c-sba: var(--red-600); --c-you: var(--green-700); --c-track: var(--border-default);
  margin: var(--space-8) 0; display: grid; gap: var(--space-8); align-items: center; container-type: inline-size; }
.section--dark .diagram-504.donut, .why .diagram-504.donut { --c-bank: #F3F4F6; --c-sba: #E8323B; --c-you: #2DBE87; --c-track: rgba(255,255,255,.08); }
@container (min-width: 620px) { .diagram-504.donut { grid-template-columns: minmax(220px, 320px) 1fr; } .diagram-504.donut figcaption { grid-column: 1 / -1; } }
.donut__wrap { position: relative; width: min(100%, 320px); margin-inline: auto; }
.donut__svg { width: 100%; height: auto; display: block; overflow: visible; }
.donut__track { fill: none; stroke: var(--c-track); stroke-width: 14; }
.donut__seg { fill: none; stroke-width: 14; stroke-linecap: butt; stroke-dasharray: var(--len) calc(100 - var(--len)); stroke-dashoffset: calc(-1 * var(--off)); transform: rotate(-90deg); transform-origin: 50% 50%; transform-box: view-box; cursor: pointer; transition: stroke-width .35s var(--ease-out), opacity .35s var(--ease-out), filter .35s var(--ease-out), transform .35s var(--ease-out); }
.donut__seg--bank { stroke: var(--c-bank); } .donut__seg--sba { stroke: var(--c-sba); } .donut__seg--you { stroke: var(--c-you); }
.donut__seg.is-hot { stroke-width: 20; transform: rotate(-90deg) scale(1.04); filter: drop-shadow(0 0 10px currentColor); }
.donut__seg--bank.is-hot { color: var(--c-bank); } .donut__seg--sba.is-hot { color: var(--c-sba); } .donut__seg--you.is-hot { color: var(--c-you); }
.donut__seg.is-dim { opacity: .28; }
.donut__seg:focus-visible { outline: none; stroke-width: 20; }
.donut__center { position: absolute; inset: 0; display: flex; flex-direction: column; align-items: center; justify-content: center; text-align: center; pointer-events: none; padding: 18%; }
.donut__big { font-family: var(--font-display); font-size: clamp(34px, 12cqw, 52px); font-weight: var(--weight-semibold); line-height: 1; color: var(--text-heading); transition: color .3s; }
.donut__small { font-family: var(--font-ui); font-size: var(--text-caption-size); color: var(--text-muted); margin-top: 6px; line-height: 1.25; font-weight: var(--weight-semibold); }
.section--dark .donut__big { color: var(--white); } .section--dark .donut__small { color: var(--text-on-dark-muted); }
.donut.is-focused .donut__big { color: var(--red-600); } .section--dark .donut.is-focused .donut__big { color: var(--white); }
.donut__legend { list-style: none; margin: 0; padding: 0; display: grid; gap: var(--space-3); }
.donut__item { --c: var(--c-track); display: grid; grid-template-columns: 84px 1fr; column-gap: var(--space-4); align-items: baseline; padding: var(--space-4) var(--space-4) var(--space-4) var(--space-6); border-radius: 10px; border: 1px solid transparent; cursor: pointer; position: relative; transition: background .3s, border-color .3s, opacity .3s, transform .3s var(--ease-out); }
.donut__item::before { content: ""; position: absolute; left: 0; top: 14px; bottom: 14px; width: 4px; border-radius: 2px; background: var(--c); }
.donut__item--bank { --c: var(--c-bank); } .donut__item--sba { --c: var(--c-sba); } .donut__item--you { --c: var(--c-you); }
.donut__item.is-hot { background: rgba(127,127,127,.08); border-color: var(--c); transform: translateX(4px); }
.section--dark .donut__item.is-hot { background: rgba(255,255,255,.06); }
.donut__item.is-dim { opacity: .45; }
.donut__item:focus-visible { outline: 2px solid var(--focus-ring); outline-offset: 2px; }
.donut__pct { font-family: var(--font-display); font-size: clamp(30px, 3vw, 40px); font-weight: var(--weight-semibold); line-height: 1; color: var(--text-heading); grid-row: span 2; transition: color .3s; }
.donut__item.is-hot .donut__pct { color: var(--c); }
.section--dark .donut__pct { color: var(--white); }
.section--dark .donut__item--bank.is-hot .donut__pct { color: var(--white); }
.donut__who { font-family: var(--font-ui); font-weight: var(--weight-semibold); color: var(--text-heading); }
.section--dark .donut__who { color: var(--white); }
.donut__note { font-family: var(--font-ui); font-size: var(--text-small-size); color: var(--text-muted); }
.section--dark .donut__note { color: var(--text-on-dark-muted); }
.diagram-504 figcaption { font-size: var(--text-small-size); color: var(--text-muted); max-width: 70ch; }
.section--dark .diagram-504 figcaption { color: var(--text-on-dark-muted); }
@media (prefers-reduced-motion: no-preference) {
  .donut__seg { stroke-dasharray: 0 100; transition: stroke-dasharray 1.1s var(--ease-out), stroke-width .35s var(--ease-out), opacity .35s var(--ease-out), filter .35s var(--ease-out), transform .35s var(--ease-out); }
  .donut__seg--sba { transition-delay: .45s, 0s, 0s, 0s, 0s; } .donut__seg--you { transition-delay: .9s, 0s, 0s, 0s, 0s; }
  .donut.is-in .donut__seg, .is-in .donut__seg { stroke-dasharray: var(--len) calc(100 - var(--len)); }
  .donut__item { opacity: 0; transform: translateX(10px); transition: opacity .5s var(--ease-out), transform .5s var(--ease-out), background .3s, border-color .3s; }
  .donut__item--bank { transition-delay: .3s, .3s, 0s, 0s; } .donut__item--sba { transition-delay: .75s, .75s, 0s, 0s; } .donut__item--you { transition-delay: 1.2s, 1.2s, 0s, 0s; }
  .donut.is-in .donut__item, .is-in .donut__item { opacity: 1; transform: none; transition-delay: 0s; }
  .donut.is-in .donut__item.is-dim, .is-in .donut__item.is-dim { opacity: .45; }
  .donut.is-in .donut__item.is-hot, .is-in .donut__item.is-hot { transform: translateX(4px); }
  .donut__center { opacity: 0; transition: opacity .6s 1.3s; } .donut.is-in .donut__center, .is-in .donut__center { opacity: 1; }
}

/* ---------- top bar: current rates ---------- */
.topbar { background: var(--deep); color: var(--white); font-family: var(--font-ui); font-size: 13px; line-height: 1.2; }
.topbar__row { display: flex; align-items: center; gap: var(--space-4); min-height: 40px; flex-wrap: wrap; padding-block: 6px; }
.topbar__label { color: rgba(255,255,255,.7); letter-spacing: .04em; text-transform: uppercase; font-size: 11.5px; font-weight: var(--weight-semibold); }
.topbar__rates { list-style: none; margin: 0; padding: 0; display: flex; gap: 6px; flex-wrap: wrap; }
.topbar__rates li { display: inline-flex; align-items: center; gap: 6px; padding: 4px 10px; border-radius: 999px; background: rgba(255,255,255,.08); border: 1px solid rgba(255,255,255,.12); }
.topbar__k { color: rgba(255,255,255,.7); }
.topbar__v { font-weight: 700; color: var(--white); font-variant-numeric: tabular-nums; }
.topbar__link { color: var(--red-300); font-weight: var(--weight-semibold); }
.topbar__phones { margin-left: auto; display: flex; gap: var(--space-4); }
.topbar__phones a { color: var(--white); }
.topbar__phones a:hover, .topbar__link:hover { text-decoration: underline; }
@media (max-width: 900px) { .topbar__phones { display: none; } .topbar__label { display: none; } }
@media (max-width: 560px) { .topbar__rates li:nth-child(n+3) { display: none; } }

/* ---------- header polish: crisp logo, clear CTA ---------- */
.brand img { width: 140px; height: auto; }
.site-header__row { min-height: 76px; padding-block: 10px; }
.btn--cta { border-radius: 8px; padding: 13px 22px; font-size: 16px; font-weight: 700; letter-spacing: .01em; box-shadow: 0 6px 18px rgba(208,32,40,.28); }
.btn--cta:hover { transform: translateY(-1px); box-shadow: 0 8px 22px rgba(208,32,40,.36); }
@media (max-width: 767px) { .brand img { width: 120px; } }

/* ---------- tables ---------- */
.table-wrap { overflow-x: auto; margin: var(--space-6) 0; -webkit-overflow-scrolling: touch; }
table.data { width: 100%; border-collapse: collapse; font-family: var(--font-ui); font-size: var(--text-small-size); line-height: var(--text-small-line); }
table.data th, table.data td { text-align: left; padding: var(--space-3) var(--space-4); border-bottom: 1px solid var(--border-default); vertical-align: top; }
table.data th { font-weight: var(--weight-semibold); color: var(--ink-900); background: var(--surface-section); }
table.data td.num, table.data th.num { text-align: right; font-variant-numeric: tabular-nums; }
table.data tr:hover td { background: var(--surface-section); }

/* ---------- FAQ ---------- */
.faq details { border-top: 1px solid var(--border-default); }
.faq details:last-child { border-bottom: 1px solid var(--border-default); }
.faq summary { cursor: pointer; padding: var(--space-4) 0; font-family: var(--font-ui); font-weight: var(--weight-semibold); font-size: var(--text-body-lg-size); line-height: 1.4; color: var(--ink-900); list-style: none; display: flex; justify-content: space-between; gap: var(--space-4); }
.faq summary::-webkit-details-marker { display: none; }
.faq summary::after { content: "+"; color: var(--red-600); font-size: 1.4em; line-height: 1; flex-shrink: 0; }
.faq details[open] summary::after { content: "\2212"; }
.faq .faq__a { padding-bottom: var(--space-4); max-width: var(--measure-prose); color: var(--text-body); }

/* ---------- quotes / stories ---------- */
.pull-quote { border-left: 4px solid var(--red-600); padding: var(--space-2) 0 var(--space-2) var(--space-6); margin: var(--space-8) 0; }
.pull-quote p { font-family: var(--font-display); font-size: var(--text-h3-size); line-height: var(--text-h3-line); color: var(--ink-900); }
.pull-quote cite { font-style: normal; font-family: var(--font-ui); font-size: var(--text-small-size); color: var(--text-muted); }
.story-card__amt { font-family: var(--font-display); font-size: var(--text-h3-size); color: var(--red-600); }
.tag { display: inline-block; font-family: var(--font-ui); font-size: var(--text-caption-size); font-weight: var(--weight-semibold); letter-spacing: .04em; text-transform: uppercase; padding: 2px 10px; border-radius: var(--radius-pill); background: var(--surface-tint); color: var(--red-800); }

/* ---------- team ---------- */
.team-grid { display: grid; gap: var(--space-8) var(--space-6); grid-template-columns: repeat(2, 1fr); }
@media (min-width: 768px) { .team-grid { grid-template-columns: repeat(3, 1fr); } }
@media (min-width: 1024px) { .team-grid { grid-template-columns: repeat(4, 1fr); } }
.person img { aspect-ratio: 1; object-fit: cover; border-radius: var(--radius-card); width: 100%; }
.person h3 { margin-top: var(--space-3); margin-bottom: 0; font-size: var(--text-body-lg-size); }
.person .role { color: var(--text-muted); font-family: var(--font-ui); font-size: var(--text-small-size); }

/* ---------- forms ---------- */
.field { display: grid; gap: var(--space-1); margin-bottom: var(--space-4); }
.field label { font-family: var(--font-ui); font-weight: var(--weight-semibold); font-size: var(--text-small-size); }
.field input, .field select, .field textarea { font: inherit; font-family: var(--font-ui); padding: 12px 14px; border: 1px solid var(--border-strong); border-radius: var(--radius-input); background: var(--surface-card); color: var(--ink-900); }
.field input:focus, .field select:focus, .field textarea:focus { border-color: var(--red-600); }
.field .hint { font-size: var(--text-caption-size); color: var(--text-muted); }
.form-row { display: grid; gap: var(--space-4); }
@media (min-width: 600px) { .form-row { grid-template-columns: 1fr 1fr; } }
fieldset { border: 0; padding: 0; margin: 0 0 var(--space-6); }
legend { font-family: var(--font-ui); font-weight: var(--weight-semibold); margin-bottom: var(--space-3); }
.choice { display: flex; gap: var(--space-3); align-items: flex-start; padding: var(--space-3) var(--space-4); border: 1px solid var(--border-default); border-radius: var(--radius-input); margin-bottom: var(--space-2); cursor: pointer; }
.choice:has(:checked) { border-color: var(--red-600); background: var(--surface-tint); }
.choice input { margin-top: 5px; accent-color: var(--red-600); }

/* ---------- CTA band ---------- */
.cta-band { background: var(--surface-dark); color: var(--text-on-dark); padding-block: var(--space-16); }
.cta-band h2 { color: var(--white); max-width: 22ch; }
.cta-band p { color: var(--text-on-dark-muted); max-width: 55ch; }
.cta-band .btn-row { margin-top: var(--space-8); }

/* ---------- footer ---------- */
.site-footer { background: var(--deep); color: var(--text-on-dark-muted); padding-block: var(--space-16) var(--space-8); font-family: var(--font-ui); font-size: var(--text-small-size); line-height: var(--text-small-line); }
.footer-grid { display: grid; gap: var(--space-8); }
@media (min-width: 768px) { .footer-grid { grid-template-columns: 1.4fr 1fr 1fr 1.4fr; } }
.footer-logo { display: inline-block; background: var(--white); border-radius: 8px; padding: 10px 14px; margin-bottom: var(--space-4); }
.footer-brand img { width: 150px; }
.footer-award { display: flex; align-items: center; gap: var(--space-3); }
.footer-award img { width: 64px; filter: none; margin: 0; }
.footer-col h2 { font-family: var(--font-ui); font-size: var(--text-eyebrow-size); letter-spacing: var(--text-eyebrow-tracking); text-transform: uppercase; color: var(--white); margin-bottom: var(--space-4); }
.footer-col a { display: block; color: var(--text-on-dark-muted); padding: 3px 0; }
.footer-col a:hover { color: var(--white); }
.footer-offices address { font-style: normal; margin-bottom: var(--space-4); }
.footer-offices strong { color: var(--white); }
.footer-legal { border-top: 1px solid var(--border-dark); margin-top: var(--space-12); padding-top: var(--space-6); display: flex; flex-wrap: wrap; justify-content: space-between; gap: var(--space-4); font-size: var(--text-caption-size); }
.footer-legal p { margin: 0; max-width: 70ch; }
.footer-legal a { color: var(--text-on-dark-muted); }

/* ---------- unverified marker (build-time only; the gate blocks it from production) ---------- */
[data-unverified] { outline: 2px dashed #E8B85C; outline-offset: 2px; position: relative; }
[data-unverified]::after { content: "UNVERIFIED: " attr(data-unverified); position: absolute; top: -1.6em; left: 0; font: 600 11px/1 var(--font-ui); color: #7A4B00; background: #FFF7E6; padding: 2px 6px; border-radius: 3px; white-space: nowrap; }

/* ---------- reveal on scroll ---------- */
.reveal { opacity: 0; transform: translateY(14px); transition: opacity var(--dur-slow) var(--ease-out), transform var(--dur-slow) var(--ease-out); }
.reveal.is-in { opacity: 1; transform: none; }
@media (prefers-reduced-motion: reduce) { .reveal { opacity: 1; transform: none; transition: none; } .btn, .card, .primary-nav .menu { transition: none; } }

/* phases rail on light pages (hub) */
.phases-rail--light li { border-top-color: var(--border-strong); }
.phases-rail--light li::before { color: var(--red-600); }
.phases-rail--light b { color: var(--ink-900); }
.phases-rail--light > li > span { color: var(--text-muted); }

/* fixes from the visual pass, 2026-09-12 */
.primary-nav > ul > li.nav-cta { flex: none; }
.nav-cta .btn { padding: 12px 20px; }
.page-hero--image .container > * { position: relative; }
.page-hero--image .container { background: rgba(27,34,48,.62); border-radius: 12px; padding: var(--space-6) var(--space-8); width: min(100% - 2 * var(--gutter-mobile), 760px); margin-inline: var(--gutter-mobile); }
@media (min-width: 768px) { .page-hero--image .container { margin-inline: max(var(--gutter), calc((100% - var(--container-max)) / 2)); } }
.page-hero--image .breadcrumb, .page-hero--image .breadcrumb a { color: rgba(255,255,255,.8); }

.rate-table td.num { font-variant-numeric: tabular-nums; }
.rate-table strong { color: var(--red-600); font-family: var(--font-display); font-size: var(--text-h3-size); }

.footer-award img { width: 120px; height: auto; }

/* CTA: always white type, regardless of nav link colour rules */
.primary-nav > ul > li.nav-cta > a.btn, .btn--primary, .btn--primary:hover { color: #FFFFFF; }
/* rate card in the live site's layout */
.rate-card__title { font-family: var(--font-ui); font-size: var(--text-body-lg-size); font-weight: var(--weight-semibold); text-align: center; margin-bottom: var(--space-4); }
.rate-card__cols { display: grid; grid-template-columns: 1fr 1fr; gap: var(--space-4); border: 1px solid var(--border-default); border-radius: var(--radius-card); padding: var(--space-4); background: var(--surface-section); }
@media (max-width: 480px) { .rate-card__cols { grid-template-columns: 1fr; } }
.rate-card__row { text-align: center; padding: var(--space-3) 0; }
.rate-card__row + .rate-card__row { border-top: 1px dashed var(--border-default); }
.rate-card__k { display: block; font-family: var(--font-ui); font-weight: var(--weight-semibold); font-size: var(--text-small-size); color: var(--ink-900); }
.rate-card__v { display: block; font-family: var(--font-display); font-size: var(--text-h2-size); font-weight: var(--weight-semibold); line-height: 1.1; color: var(--red-600); font-variant-numeric: tabular-nums; }
.rate-card .small { margin-top: var(--space-3); }
.rate-history { min-width: 620px; }
.rate-history th.num, .rate-history td.num { text-align: center; }
.rate-history + .table-wrap, .table-wrap + .table-wrap { margin-top: var(--space-4); }
@media (max-width: 767px) { .site-header__row { min-height: 64px; padding-block: 6px; } .topbar__row { min-height: 36px; } .section { padding-block: var(--space-12); } h2 { font-size: 26px; line-height: 1.2; } }

/* ===== CRO pass 2026-09-13 (sitewide) ===== */
/* R1: the button kit — what happens next, the promise, one proof line */
.ctakit { margin-top: var(--space-4); display: flex; flex-direction: column; gap: var(--space-3); font-family: var(--font-ui); max-width: 620px; }
.ctakit__next { margin: 0; font-size: var(--text-small-size); line-height: 1.5; color: var(--text-body); }
.ctakit__next strong { color: var(--ink-900); }
.ctakit__promise { list-style: none; margin: 0; padding: 0; display: flex; flex-wrap: wrap; gap: var(--space-2) var(--space-4); font-size: 13.5px; color: var(--text-muted); }
.ctakit__promise li::before { content: "\2713"; color: var(--red-600); font-weight: 700; margin-right: 6px; }
.ctakit__proof { margin: 0; font-size: var(--text-small-size); color: var(--text-muted); line-height: 1.5; }
.ctakit__proof q { font-family: var(--font-display); font-size: 17px; color: var(--ink-900); quotes: "\201C" "\201D"; }
.ctakit__who { color: var(--text-muted); }
.ctakit__sep { margin-inline: 4px; }
.section--dark .ctakit__next, .cta-band .ctakit__next { color: var(--text-on-dark-muted); } .section--dark .ctakit__next strong, .cta-band .ctakit__next strong { color: var(--white); }
.section--dark .ctakit__promise, .cta-band .ctakit__promise { color: rgba(255,255,255,.72); } .section--dark .ctakit__promise li::before, .cta-band .ctakit__promise li::before { color: var(--red-300); }
.section--dark .ctakit__proof, .cta-band .ctakit__proof { color: rgba(255,255,255,.72); } .section--dark .ctakit__proof q, .cta-band .ctakit__proof q { color: var(--white); }
.cta-band .ctakit { margin-top: var(--space-6); }
.text-link--on-dark { color: var(--white); text-decoration: underline; text-underline-offset: 3px; }
.text-link--on-dark:hover { color: var(--red-300); }

/* R7: interior page hero with the mini form beside the copy */
.page-hero--split .page-hero__grid { display: grid; gap: var(--space-8); align-items: start; }
/* Keep the copy top-aligned: the breadcrumb belongs at the top of the page, and
   centring it against the tall qualify form pushed it halfway down the hero. */
@media (min-width: 1000px) { .page-hero--split .page-hero__grid { grid-template-columns: minmax(0, 1fr) 400px; gap: var(--space-12); } }
.page-hero--split .page-hero__copy .lead { max-width: 58ch; }
.hero-aside { background: var(--surface-card); border: 1px solid var(--border-default); border-radius: var(--radius-panel); box-shadow: var(--shadow-raised); overflow: hidden; }
.hero-aside__fig { margin: 0; position: relative; }
.hero-aside__fig img { display: block; width: 100%; aspect-ratio: 16/7; object-fit: cover; }
.hero-aside__fig figcaption { position: absolute; left: 0; right: 0; bottom: 0; padding: var(--space-6) var(--space-5) var(--space-2); font-family: var(--font-ui); font-size: var(--text-caption-size); color: var(--white); background: linear-gradient(to top, rgba(27,34,48,.85), transparent); }
.hero-aside__form { padding: var(--space-5) var(--space-5) var(--space-6); }
.hero-aside__title { font-family: var(--font-display); font-size: var(--text-h3-size); font-weight: var(--weight-semibold); color: var(--ink-900); margin: 0 0 2px; }
.hero-aside__meta { font-family: var(--font-ui); font-size: var(--text-caption-size); color: var(--text-muted); margin: 0 0 var(--space-4); }
.hero-aside__form .field { margin-bottom: var(--space-3); }
.hero-aside__form .field input, .hero-aside__form .field select { padding: 10px 12px; }
.hero-aside__form .btn { width: 100%; margin-top: var(--space-2); }
.hero-aside__next { margin: var(--space-3) 0 0; font-family: var(--font-ui); font-size: 13.5px; line-height: 1.5; color: var(--text-muted); }
.hero-aside__next strong { color: var(--ink-900); }
.hero-aside__proof { margin: var(--space-2) 0 0; font-family: var(--font-ui); font-size: var(--text-caption-size); color: var(--text-muted); }
.hero-aside__proof [data-claim] { color: var(--red-600); font-weight: var(--weight-semibold); }

/* R13: forms that feel alive */
.form-meta { font-family: var(--font-ui); font-size: var(--text-small-size); color: var(--text-muted); margin: 0 0 var(--space-5); display: flex; gap: 6px; flex-wrap: wrap; }
.form-meta__time { font-weight: var(--weight-semibold); color: var(--ink-900); }
.field { position: relative; }
.field.is-ok input, .field.is-ok select, .field.is-ok textarea { border-color: var(--green-700); padding-right: 38px; }
.field.is-ok::after { content: "\2713"; position: absolute; right: 12px; top: 30px; color: var(--green-700); font-weight: 700; pointer-events: none; }
.hero-aside__form .field.is-ok::after { top: 28px; }
.field.is-err input, .field.is-err select, .field.is-err textarea { border-color: var(--red-600); }
.field__err { font-family: var(--font-ui); font-size: var(--text-caption-size); color: var(--red-600); }
.btn:active { transform: translateY(1px) scale(.99); }
.btn.is-sending { opacity: .75; cursor: progress; }
form.is-complete .btn--primary { box-shadow: 0 6px 18px rgba(208,32,40,.28); }

.donut__small--top { margin-top: 0; margin-bottom: 4px; letter-spacing: .12em; text-transform: uppercase; }

/* top bar rates: mint pills so the numbers read as live figures, not chrome */
.topbar__label { color: rgba(255,255,255,.85); display: inline-flex; align-items: center; gap: 8px; }
.topbar__label::before { content: ""; width: 7px; height: 7px; border-radius: 50%; background: #2DBE87; box-shadow: 0 0 0 0 rgba(45,190,135,.6); animation: livedot 2.4s ease-out infinite; }
@keyframes livedot { 0% { box-shadow: 0 0 0 0 rgba(45,190,135,.55); } 70% { box-shadow: 0 0 0 7px rgba(45,190,135,0); } 100% { box-shadow: 0 0 0 0 rgba(45,190,135,0); } }
@media (prefers-reduced-motion: reduce) { .topbar__label::before { animation: none; } }
.topbar__rates { gap: 8px; }
.topbar__rates li { padding: 4px 11px 4px 10px; gap: 7px; background: rgba(45,190,135,.12); border: 1px solid rgba(45,190,135,.45); transition: background var(--dur-fast), border-color var(--dur-fast), transform var(--dur-fast) var(--ease-out); }
.topbar__rates li:hover { background: rgba(45,190,135,.2); border-color: #2DBE87; transform: translateY(-1px); }
.topbar__rates .topbar__k { color: rgba(255,255,255,.82); font-size: 12px; }
.topbar__rates .topbar__v { color: #2DBE87; font-size: 14.5px; font-weight: 700; letter-spacing: .01em; }
@media (max-width: 900px) { .topbar__label { display: none; } }

/* YouTube facade */
.ytf { position: relative; aspect-ratio: 16 / 9; border-radius: var(--radius-card); overflow: hidden; background: #111; }
.ytf img, .ytf iframe { position: absolute; inset: 0; width: 100%; height: 100%; border: 0; object-fit: cover; }
.ytf__play { position: absolute; inset: 0; width: 100%; height: 100%; display: grid; place-items: center; background: transparent; border: 0; cursor: pointer; padding: 0; }
.ytf__play::before { content: ''; position: absolute; inset: 0; background: rgba(0,0,0,.28); transition: background var(--dur-fast); }
.ytf__play:hover::before, .ytf__play:focus-visible::before { background: rgba(0,0,0,.44); }
.ytf__play span { position: relative; display: grid; place-items: center; width: 74px; height: 74px; border-radius: 50%; background: rgba(255,255,255,.94); box-shadow: 0 6px 24px rgba(0,0,0,.34); transition: transform var(--dur-fast) var(--ease-out); }
.ytf__play:hover span, .ytf__play:focus-visible span { transform: scale(1.06); }
.ytf__play span::after { content: ''; border-style: solid; border-width: 11px 0 11px 18px; border-color: transparent transparent transparent #111; margin-left: 5px; }

/* Story cards with no photograph — keeps the grid even instead of leaving a tall blank.
   Used until NSDC supplies imagery for that business. */
.card__ph { aspect-ratio: 16/10; display: grid; place-items: center; padding: var(--space-6);
  background: linear-gradient(158deg, var(--ink-100) 0%, var(--ink-200) 100%);
  border-bottom: 1px solid var(--border-default); }
.card__ph span { font-family: var(--font-display); font-size: 26px; line-height: 1.12; text-align: center;
  color: var(--ink-900); opacity: .72; text-wrap: balance; }

/* A .container that is also .prose was inheriting the container's centring while
   its measure made it far narrower, so body copy floated to the middle of the page
   while every heading and card above it sat at the left gutter. Keep the container
   full width and constrain the text measure inside it. */
.container.prose { max-width: var(--container-max); }
.container.prose > * { max-width: var(--measure-prose); }
.container.prose > .grid, .container.prose > .table-wrap, .container.prose > figure { max-width: none; }


/* ===== Explainer films (2026-09-18) =====
   Two shapes: .vfilm is the 16:9 industry film, .vfilm--tall is a 9:16 question short
   sitting beside body copy. Both use a poster and preload="none" so nothing downloads
   until the visitor asks for it. */
.vfilm { margin: 0; }
.vfilm video { display: block; width: 100%; height: auto; aspect-ratio: 16 / 9; background: var(--deep);
  border-radius: var(--radius-card); box-shadow: var(--shadow-raised); }
.vfilm figcaption { margin-top: var(--space-3); font-family: var(--font-ui);
  font-size: var(--text-small-size); color: var(--text-muted); }
.vfilm--tall { max-width: 320px; }
.vfilm--tall video { aspect-ratio: 9 / 16; }
.vfilm-row { display: grid; grid-template-columns: 320px minmax(0, 1fr); gap: var(--space-8); align-items: start; }
.vfilm-row > .prose { max-width: none; }
@media (max-width: 860px) {
  .vfilm-row { grid-template-columns: 1fr; }
  /* keep the short vertical on phones (it was letterboxed to a ~113px sliver in a 16:9 box — QA 2026-09-19);
     300px wide = 533px tall, which fits one phone screen with the header */
  .vfilm--tall { max-width: 300px; margin-inline: auto; }
}

/* ===== Award figure (2026-09-18): the 2025 crystal on the homepage and About ===== */
.award-fig { margin: var(--space-8) 0 0; display: flex; align-items: center; gap: var(--space-5); }
.award-fig img { width: 132px; height: 132px; flex: 0 0 auto; border-radius: var(--radius-card); object-fit: cover; }
.award-fig figcaption { font-family: var(--font-ui); font-size: var(--text-small-size); line-height: 1.5; color: inherit; opacity: .85; max-width: 34ch; }
.award-fig--inline { margin-top: var(--space-4); }
.award-fig--inline img { width: 112px; height: 112px; }
@media (max-width: 480px) { .award-fig { align-items: flex-start; } .award-fig img { width: 96px; height: 96px; } }

/* ===== Touch targets (QA 2026-09-19) =====
   On touch screens the footer links were 30px tall, the topbar rates link 16px and the
   standalone arrow links 29px. WCAG 2.5.8 wants 24px minimum; 44px is the comfortable size.
   Scoped to coarse pointers so desktop density does not change. Links inside a sentence are exempt. */
@media (pointer: coarse), (max-width: 767px) {
  .footer-col a { padding-block: 11px; }
  .footer-col address a { display: inline-block; }
  .footer-legal a { display: inline-block; padding-block: 12px; }
  .topbar__link { display: inline-flex; align-items: center; min-height: 40px; padding-inline: 4px; }
  .text-link { display: inline-flex; align-items: center; min-height: 44px; }
  .breadcrumb a { display: inline-block; padding-block: 10px; }
  .breadcrumb { align-items: center; }
}

/* ===== Small phones, 320–360px (QA 2026-09-19) =====
   13 pages scrolled sideways by 6–20px at 320px. Same cause each time: a grid or flex child that
   would not shrink below its content width. Let them shrink, and ease the display sizes that forced it. */
.page-hero--image > .container { min-width: 0; }
.stat-band { grid-template-columns: repeat(2, minmax(0, 1fr)); }
@media (min-width: 768px) { .stat-band { grid-template-columns: repeat(4, minmax(0, 1fr)); } }
.calc > *, .two-up > * { min-width: 0; }
@media (max-width: 360px) {
  h1, .stat__num { overflow-wrap: break-word; }
  .page-hero h1 { font-size: 34px; line-height: 1.12; }
  .stat__num { font-size: 32px; }
  .stat-band { gap: var(--space-4); }
}
/* form controls were content-box with no width cap, so at 320px an input's intrinsic width + padding spilled out of .field */
.field input:not([type=checkbox]):not([type=radio]), .field select, .field textarea { box-sizing: border-box; width: 100%; min-width: 0; max-width: 100%; }