/* ==========================================================================
   C2 Financial — design system
   Tokens mirror the production site's custom properties so a swap to the
   real FTPolar webfont + brand assets is a drop-in change.
   ========================================================================== */

/* FTPolar is C2's licensed brand face. c2financial.com serves it from
   /_next/static/media/FTPolar-{Light,Medium,Bold}not ours to
   assume) and drop them into public/fonts/ using the names below.
   Until then the stack falls through to Manrope, a near-neutral geometric
   grotesque that matches FTPolar's proportions far more closely than
   Space Grotesk did. `ascent-override` mirrors C2's own metric tuning. */
/* The FTPolar @font-face declarations were removed on 2026-11-01: the files are
   not licensed to this site and 404ed on every page. Manrope is the live face.
   Re-add the three declarations here if C2 provides the webfont. */

:root {
  --font-sans: 'Manrope', 'Helvetica Neue', Helvetica, Arial, sans-serif;

  --black: #000000;
  --navy: #0E1E31;
  --navy-deep: #060A2D;
  --ink: #01071B;
  --white: #ffffff;
  --white-navy-hover: #3E5E82;
  --gray: #7d7d7d;
  --divider: #aeaeae;
  --light-blue: #abe5f0;
  --sky: #b7e2f7;
  --pale-blue: #bae3f8;
  --link: #1b6fe3;
  --green: #1e9a5f;
  --sand: #e6dcd3;
  --cream: #f4efeb;

  --site-margin: 15px;
  --inner-padding: 15px;
  --navbar-height: 80px;
  --padding: 40px;
  --maxw: 1280px;
  --radius: 999px;

  --text-color: var(--ink);
  --background-color: #fffbf7;
  --button-background-color: var(--ink);
  --button-text-color: #ffffff;
  --button-font-size: 14px;
  --button-font-size-mobile: 12px;
}

@media screen and (max-width: 700px) {
  :root { --padding: 28px; }
}

/* 62.5% keeps 1rem === 10px, matching the production sizing model. */
html { font-size: 62.5%; scroll-behavior: smooth; -webkit-text-size-adjust: 100%; }

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

body {
  font-family: var(--font-sans);
  font-size: 1.6rem;
  line-height: 1.5;
  margin: 0;
  overflow-x: hidden;
  background: var(--background-color);
  color: var(--text-color);
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
}

img { max-width: 100%; display: block; overflow-clip-margin: content-box; overflow: clip; }
a { color: inherit; }
h1, h2, h3, h4, h5, h6, p, ul, ol, figure { margin: 0; }
ul, ol { padding: 0; list-style: none; }
button { font: inherit; color: inherit; }

::selection { background: var(--light-blue); color: var(--ink); }

:focus-visible {
  outline: 3px solid var(--link);
  outline-offset: 3px;
  border-radius: 4px;
}

.skip-link {
  position: absolute; left: -9999px; top: 0; z-index: 200;
  background: var(--ink); color: #fff; padding: 12px 20px;
  font-size: 1.4rem; font-weight: 500;
}
.skip-link:focus { left: 12px; top: 12px; }

/* ---------- layout primitives ---------- */
.wrap { width: 100%; max-width: var(--maxw); margin-inline: auto; padding-inline: var(--padding); }

.wrap-mid { max-width: 1060px; }

.section { padding-block: clamp(64px, 9vw, 128px); }
.section-sm { padding-block: clamp(48px, 6vw, 80px); }

/* Theme surfaces. Each re-points the same tokens the buttons read, so a
   button inside any surface inverts correctly without extra classes. */
.surface-navy {
  --background-color: var(--navy-deep);
  --text-color: var(--pale-blue);
  --button-background-color: var(--cream);
  --button-text-color: var(--ink);
  background: var(--background-color);
  color: var(--text-color);
}
.surface-navy h1, .surface-navy h2, .surface-navy h3 { color: var(--pale-blue); }
.surface-navy .eyebrow { color: var(--pale-blue); opacity: .85; }

.surface-sky {
  --background-color: var(--sky);
  --text-color: var(--ink);
  background: var(--background-color);
  color: var(--text-color);
}

.surface-sand {
  --background-color: var(--sand);
  --text-color: var(--ink);
  background: var(--background-color);
  color: var(--text-color);
}

/* ---------- type ---------- */
.eyebrow {
  font-size: 1.3rem;
  font-weight: 500;
  letter-spacing: .16em;
  text-transform: uppercase;
  margin-bottom: 18px;
  display: block;
}

h1, .h1 {
  font-size: clamp(3.8rem, 5.2vw, 6.4rem);
  line-height: 1.04;
  letter-spacing: -.02em;
  font-weight: 700;
}
h2, .h2 {
  font-size: clamp(3.2rem, 4.4vw, 5.6rem);
  line-height: 1.06;
  letter-spacing: -.02em;
  font-weight: 700;
}
h3, .h3 {
  font-size: clamp(2rem, 2.2vw, 2.4rem);
  line-height: 1.2;
  letter-spacing: -.01em;
  font-weight: 700;
}
h4 { font-size: 1.9rem; line-height: 1.25; font-weight: 700; letter-spacing: -.01em; }

.lede { font-size: clamp(1.7rem, 1.6vw, 2rem); line-height: 1.55; }
.prose p + p { margin-top: 1.1em; }
.prose p, .prose li { font-size: 1.7rem; line-height: 1.62; }
.prose h2 { margin-top: 1.4em; margin-bottom: .45em; font-size: clamp(2.6rem, 3vw, 3.4rem); }
.prose h3 { margin-top: 1.5em; margin-bottom: .4em; }
.prose ul, .prose ol { margin: 1em 0; padding-left: 0; }
.prose ul li { position: relative; padding-left: 26px; margin-bottom: .55em; }
.prose ul li::before {
  content: ''; position: absolute; left: 4px; top: .62em;
  width: 8px; height: 8px; border-radius: 50%; background: var(--link);
}
.prose ol { counter-reset: n; }
.prose ol li { position: relative; padding-left: 34px; margin-bottom: .55em; counter-increment: n; }
.prose ol li::before {
  content: counter(n) '.'; position: absolute; left: 0; top: 0;
  font-weight: 700; color: var(--link);
}
.prose a { color: var(--link); text-underline-offset: 3px; }
.prose strong { font-weight: 700; }
.text-center { text-align: center; }
.measure { max-width: 62ch; }
.muted { color: var(--gray); }
.surface-navy .muted { color: rgba(186, 227, 248, .72); }

/* ---------- buttons ---------- */
.btn {
  display: inline-flex; align-items: center; justify-content: center; gap: 10px;
  background: var(--button-background-color);
  color: var(--button-text-color);
  border: 1px solid var(--button-background-color);
  border-radius: var(--radius);
  padding: 15px 30px;
  font-size: var(--button-font-size);
  font-weight: 700;
  letter-spacing: .1em;
  text-transform: uppercase;
  text-decoration: none;
  cursor: pointer;
  transition: transform .18s ease, background-color .18s ease, color .18s ease, border-color .18s ease;
}
.btn:hover { transform: translateY(-2px); }
.btn-outline {
  background: transparent;
  color: var(--text-color);
  border-color: currentColor;
}
.btn-outline:hover { background: var(--text-color); color: var(--background-color); }
.btn-sm { padding: 11px 22px; font-size: 1.2rem; }
/* Paired pills share one width: equal 1fr columns sized to the widest label. */
.btn-row {
  display: grid; grid-auto-flow: column; grid-auto-columns: 1fr;
  gap: 14px; margin-top: 34px; width: fit-content; max-width: 100%;
}
.btn-row.center { margin-inline: auto; }
.btn-row > .btn { width: 100%; }
@media (max-width: 560px) {
  .btn-row { grid-auto-flow: row; width: 100%; }
}

@media (max-width: 700px) {
  .btn { font-size: var(--button-font-size-mobile); padding: 14px 24px; }
}
@media (prefers-reduced-motion: reduce) {
  * { animation-duration: .001ms !important; transition-duration: .001ms !important; scroll-behavior: auto !important; }
}

/* ---------- header ---------- */
.site-header {
  position: sticky; top: 0; z-index: 100;
  background: #fffbf7;
  border-bottom: 1px solid transparent;
  transition: border-color .2s ease;
}
.site-header.is-stuck { border-bottom-color: rgba(1, 7, 27, .1); }
.header-inner {
  min-height: var(--navbar-height);
  display: flex; align-items: center; gap: 24px;
  padding-inline: var(--padding);
  max-width: 1520px; margin-inline: auto;
}
.brand { display: inline-flex; align-items: center; gap: 14px; text-decoration: none; flex-shrink: 0; color: var(--ink); }
/* C2 lockup: never below 40px tall (toolkit 4.1), clear space from the gap. */
.brand-lockup svg { height: 40px; width: auto; display: block; }
.brand-emblem { display: none; }
.brand-emblem svg { height: 36px; width: auto; display: block; }
.brand-sep { width: 1px; height: 36px; background: currentColor; opacity: .18; }
.brand-text { display: flex; flex-direction: column; line-height: 1.15; }
.brand-name { font-size: 1.7rem; font-weight: 700; letter-spacing: -.01em; }
.brand-role { font-size: 1.15rem; color: var(--gray); letter-spacing: .02em; margin-top: 2px; line-height: 1.25; white-space: nowrap; }
/* "Mortgage Loan Originator · NMLS #…" is wider than the name; let it break
   after the title so the block stays the width of the name, not the role. */
.brand-role .brand-nmls { display: block; }
/* When the lockup gives way to the emblem (tablet) or the role line is hidden
   (phone), the company name still has to appear in words: a small second line
   under the originator's name. Hidden wherever the lockup wordmark is visible. */
.brand-org { display: none; font-size: 1.15rem; color: var(--gray); letter-spacing: .02em; margin-top: 1px; line-height: 1.2; white-space: nowrap; }
@media (max-width: 1200px) { .brand-org { display: block; } .brand-role { display: none; } }
@media (max-width: 345px) { .brand-org { font-size: 1.05rem; } }
.footer-brand .brand-org { display: none; }
.footer-brand .brand { color: #fff; }
.footer-brand .brand-role { color: rgba(186, 227, 248, .75); }

.primary-nav { margin-inline: auto; }
.primary-nav > ul { display: flex; align-items: center; gap: 40px; }
.nav-item { position: relative; }
.nav-link {
  display: inline-flex; align-items: center; gap: 6px;
  font-size: 1.8rem; font-weight: 500; text-decoration: none;
  padding: 28px 0; position: relative; background: none; border: 0; cursor: pointer;
}
.nav-link::after {
  content: ''; position: absolute; left: 0; right: 0; bottom: 20px; height: 3px;
  background: var(--link); transform: scaleX(0); transform-origin: left;
  transition: transform .2s ease;
}
.nav-link:hover::after, .nav-item.is-open > .nav-link::after, .nav-link[aria-current='true']::after { transform: scaleX(1); }

.mega {
  position: absolute; top: 100%; left: 50%; transform: translateX(-50%) translateY(8px);
  min-width: 340px; background: #fff; border-radius: 14px;
  box-shadow: 0 24px 60px rgba(1, 7, 27, .14);
  padding: 12px; opacity: 0; visibility: hidden; transition: opacity .18s ease, transform .18s ease;
}
.nav-item.is-open .mega, .nav-item:hover .mega, .nav-item:focus-within .mega {
  opacity: 1; visibility: visible; transform: translateX(-50%) translateY(0);
}
/* Six or more links: two columns, so the panel stays shorter than the viewport. */
@media (min-width: 981px) {
  .mega-wide { display: grid; grid-template-columns: 1fr 1fr; column-gap: 8px; min-width: 700px; }
  /* Too wide to center under its trigger near the left edge: anchor it left. */
  .mega-wide { left: 0; transform: translateY(8px); }
  .nav-item.is-open .mega-wide, .nav-item:hover .mega-wide, .nav-item:focus-within .mega-wide { transform: translateY(0); }
}
.mega a { display: block; padding: 14px 16px; border-radius: 10px; text-decoration: none; transition: background-color .15s ease; }
.mega a:hover { background: #fffbf7; }
.mega strong { display: block; font-size: 1.6rem; font-weight: 700; }
.mega span { display: block; font-size: 1.35rem; color: var(--gray); margin-top: 3px; line-height: 1.4; }

.header-actions { display: grid; grid-auto-flow: column; grid-auto-columns: 1fr; align-items: center; gap: 12px; flex-shrink: 0; }
.header-actions > .btn { width: 100%; }
.nav-toggle { display: none; background: none; border: 0; padding: 10px; cursor: pointer; }
.nav-toggle svg { width: 26px; height: 26px; }

@media (max-width: 1100px) {
  .primary-nav > ul { gap: 18px; }
  .nav-link { font-size: 1.5rem; }
  .header-actions .btn { padding-inline: 16px; }
}
@media (max-width: 980px) {
  .nav-toggle { display: inline-flex; margin-left: auto; }
  .primary-nav {
    position: fixed; inset: var(--navbar-height) 0 0; background: #fffbf7;
    margin: 0; padding: 24px var(--padding) 60px; overflow-y: auto;
    transform: translateX(100%); transition: transform .28s ease; visibility: hidden;
  }
  .primary-nav.is-open { transform: translateX(0); visibility: visible; }
  .primary-nav > ul { flex-direction: column; align-items: stretch; gap: 0; }
  .nav-item { border-bottom: 1px solid rgba(1, 7, 27, .1); }
  .nav-link { width: 100%; justify-content: space-between; padding: 20px 0; font-size: 2rem; }
  .nav-link::after { display: none; }
  .mega {
    position: static; transform: none; opacity: 1; visibility: visible; box-shadow: none;
    min-width: 0; padding: 0 0 12px; display: none; background: transparent;
  }
  /* Match the desktop rule's specificity, or its translateX(-50%) centering
     transform wins here and drags the open panel half its width off-screen. */
  .nav-item.is-open .mega, .nav-item:hover .mega, .nav-item:focus-within .mega { transform: none; }
  .nav-item.is-open .mega { display: block; }
  .mega { padding: 2px 0 18px; }
  .mega a { padding: 16px 0; border-radius: 0; }
  .mega a + a { border-top: 1px solid rgba(1, 7, 27, .07); }
  .mega strong { font-size: 1.7rem; }
  .mega span { margin-top: 5px; }
  .header-actions .btn-login { display: none; }
}

/* ---------- hero ---------- */
.hero { display: grid; grid-template-columns: 1fr 1fr; min-height: 620px; }
.hero-copy {
  background: var(--navy-deep); color: var(--pale-blue);
  padding: clamp(48px, 6vw, 96px) clamp(28px, 5vw, 80px);
  display: flex; flex-direction: column; justify-content: center;
}
.hero-copy h1 { color: var(--pale-blue); max-width: 14ch; }

.hero-copy p.lede { margin-top: 18px; max-width: 46ch; color: var(--pale-blue); }

@media (max-width: 900px) {
  .hero { grid-template-columns: 1fr; }

}

/* page header used on interior pages */
.page-head { padding-block: clamp(56px, 7vw, 96px) clamp(40px, 5vw, 64px); text-align: center; }
.page-head h1 { max-width: 18ch; margin-inline: auto; }
.page-head p { margin-top: 22px; max-width: 60ch; margin-inline: auto; }

/* ---------- service cards ---------- */

/* ---------- generic grids ---------- */
.cols { display: grid; gap: clamp(28px, 4vw, 56px); }
.cols-2 { grid-template-columns: repeat(2, 1fr); }
.cols-3 { grid-template-columns: repeat(3, 1fr); }
.cols-4 { grid-template-columns: repeat(4, 1fr); }
@media (max-width: 900px) { .cols-3, .cols-4 { grid-template-columns: repeat(2, 1fr); } }
@media (max-width: 640px) { .cols-2, .cols-3, .cols-4 { grid-template-columns: 1fr; } }

/* overlap image used between two surfaces */

/* ---------- split panel ---------- */
.split { display: grid; grid-template-columns: 1fr 1fr; align-items: stretch; }
.split-copy { padding: clamp(48px, 6vw, 96px) clamp(28px, 5vw, 80px); display: flex; flex-direction: column; justify-content: center; }
.split-copy h2 { max-width: 15ch; }
.split-copy p { margin-top: 22px; max-width: 48ch; }
.split-media { position: relative; min-height: 420px; overflow: hidden; }
.split-media img { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; }
.split.reverse .split-media { order: -1; }
@media (max-width: 900px) {
  .split { grid-template-columns: 1fr; }
  .split-media { min-height: 300px; }
  .split.reverse .split-media { order: 0; }
}

/* ---------- accordion ---------- */

.acc-item { border-bottom: 1px solid rgba(1, 7, 27, .12); }
.acc-item:last-child { border-bottom: 0; }
.acc-trigger {
  width: 100%; display: flex; align-items: center; gap: 20px;
  background: none; border: 0; padding: 26px 34px; cursor: pointer; text-align: left;
}
.acc-icon {
  flex: 0 0 auto; width: 38px; height: 38px; border-radius: 50%;
  background: var(--ink); color: #fff; display: grid; place-items: center; position: relative;
}
.acc-icon::before, .acc-icon::after {
  content: ''; position: absolute; background: #fff; border-radius: 2px;
  transition: transform .22s ease, opacity .22s ease;
}
.acc-icon::before { width: 15px; height: 2.5px; }
.acc-icon::after { width: 2.5px; height: 15px; }
.acc-trigger[aria-expanded='true'] .acc-icon::after { transform: scaleY(0); opacity: 0; }
.acc-title { font-size: clamp(1.9rem, 2.1vw, 2.3rem); font-weight: 700; letter-spacing: -.01em; }
.acc-body { display: grid; grid-template-rows: 0fr; transition: grid-template-rows .26s ease; }
.acc-item.is-open .acc-body { grid-template-rows: 1fr; }
.acc-body > div { overflow: hidden; }
.acc-body p { padding: 0 34px 26px 92px; font-size: 1.55rem; line-height: 1.55; color: var(--ink); }
.acc-body .btn { margin: 0 34px 26px 92px; }
@media (max-width: 560px) {
  .acc-trigger { padding: 20px; gap: 14px; }
  .acc-body p, .acc-body .btn { padding-inline: 20px; margin-inline: 20px; padding-left: 20px; }
  .acc-body p { padding-left: 20px; }
}

/* ---------- trust / zillow ---------- */
.trust { text-align: center; }

.trust p { margin-top: 16px; font-size: 1.5rem; line-height: 1.5; }

/* ---------- people ---------- */
.person img { width: 100%; aspect-ratio: 4 / 5; object-fit: cover; background: var(--sand); }
.person h3 { margin-top: 22px; font-size: 1.9rem; }
.person .role { color: var(--gray); font-size: 1.7rem; margin-top: 2px; }
.person p { margin-top: 16px; font-size: 1.6rem; line-height: 1.5; }
.person .meta { margin-top: 14px; font-size: 1.5rem; line-height: 1.6; }
.person .meta a { color: var(--link); }

/* ---------- feature list / checklist ---------- */
.checklist li { position: relative; padding-left: 34px; margin-bottom: 16px; font-size: 1.65rem; line-height: 1.5; }
.checklist li::before {
  content: ''; position: absolute; left: 0; top: 3px; width: 20px; height: 20px; border-radius: 50%;
  background: var(--link);
  -webkit-mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cpath fill='%23fff' d='M9.6 16.2 5.4 12l-1.4 1.4 5.6 5.6 12-12-1.4-1.4z'/%3E%3C/svg%3E") center/contain no-repeat;
  mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cpath fill='%23fff' d='M9.6 16.2 5.4 12l-1.4 1.4 5.6 5.6 12-12-1.4-1.4z'/%3E%3C/svg%3E") center/contain no-repeat;
}
.surface-navy .checklist li::before { background: var(--light-blue); }

/* ---------- tiles / link cards ---------- */
.tile {
  display: flex; flex-direction: column; gap: 10px;
  background: #fff; border: 1px solid rgba(1, 7, 27, .1);
  padding: 28px; text-decoration: none; transition: transform .18s ease, box-shadow .18s ease;
}
.tile:hover { transform: translateY(-3px); box-shadow: 0 18px 40px rgba(1, 7, 27, .1); }
.tile h3 { font-size: 1.9rem; }
.tile p { font-size: 1.5rem; color: var(--gray); line-height: 1.5; }
.tile .tile-more { margin-top: auto; padding-top: 14px; font-size: 1.35rem; font-weight: 700; letter-spacing: .1em; text-transform: uppercase; color: var(--link); }
.surface-navy .tile { background: rgba(255, 255, 255, .05); border-color: rgba(186, 227, 248, .22); }
.surface-navy .tile p { color: rgba(186, 227, 248, .75); }

/* ---------- breadcrumbs ---------- */
.crumbs { padding-top: 22px; font-size: 1.4rem; color: var(--gray); }
.crumbs ol { display: flex; flex-wrap: wrap; gap: 8px; align-items: center; }
.crumbs li::after { content: '/'; margin-left: 8px; color: var(--divider); }
.crumbs li:last-child::after { content: ''; }
.crumbs a { color: var(--gray); text-decoration: none; }
.crumbs a:hover { color: var(--ink); text-decoration: underline; }
.crumbs [aria-current='page'] { color: var(--ink); }

/* ---------- forms ---------- */
.form-grid { display: grid; grid-template-columns: repeat(2, 1fr); gap: 20px; }
.field { display: flex; flex-direction: column; gap: 9px; }
.field.full { grid-column: 1 / -1; }
.field label { font-size: 1.4rem; font-weight: 700; letter-spacing: .04em; }
.field input, .field select, .field textarea {
  font: inherit; font-size: 1.6rem; padding: 14px 16px;
  border: 1px solid rgba(1, 7, 27, .22); border-radius: 8px; background: #fff; color: var(--ink);
}
.field textarea { min-height: 150px; resize: vertical; }
.field input:focus, .field select:focus, .field textarea:focus { border-color: var(--link); }
@media (max-width: 640px) { .form-grid { grid-template-columns: 1fr; } }

/* ---------- calculator ---------- */
.calc { display: grid; grid-template-columns: 1.1fr .9fr; gap: clamp(28px, 4vw, 56px); align-items: start; }
@media (max-width: 860px) { .calc { grid-template-columns: 1fr; } }

/* ---------- FAQ block ---------- */
.faq { border-top: 1px solid rgba(1, 7, 27, .14); }
.faq .acc-item { border-bottom-color: rgba(1, 7, 27, .14); }
.faq .acc-trigger { padding-inline: 0; }
.faq .acc-body p { padding: 0 0 26px 58px; }
.faq .acc-icon { width: 30px; height: 30px; }

/* ---------- footer ---------- */
.site-footer { background: var(--navy-deep); color: var(--pale-blue); }
.footer-main {
  display: grid;
  /* Brand column plus one per footerNav group (3). Keep this count in sync with
     footerNav — a mismatch leaves an empty column at the right edge. */
  grid-template-columns: 1.3fr repeat(3, minmax(0, 1fr));
  gap: 40px clamp(28px, 4vw, 56px); padding-block: clamp(56px, 6vw, 88px);
}
.footer-main h3 { font-size: 1.8rem; color: #fff; margin-bottom: 18px; }
.footer-main a { color: var(--pale-blue); text-decoration: none; font-size: 1.7rem; line-height: 1.35; display: inline-block; padding-block: 6px; }
.footer-main a:hover { color: #fff; text-decoration: underline; }
.footer-main li { margin-bottom: 6px; }
.footer-main address { font-style: normal; font-size: 1.7rem; line-height: 1.5; margin-top: 20px; }
/* .footer-main a forces inline-block on every footer link, which would break the
   brand out of its flex row and push the name off the logo's left edge. */
.footer-brand .brand { display: inline-flex; align-items: center; gap: 12px; }
.footer-brand .brand-word { text-align: left; }
.footer-brand svg { width: 54px; height: auto; flex-shrink: 0; }
.footer-brand .brand-word { color: #fff; }
.footer-bottom {
  border-top: 1px solid rgba(186, 227, 248, .18);
  display: flex; flex-wrap: wrap; align-items: center; gap: 20px 34px;
  padding-block: 26px; font-size: 1.4rem;
}
.footer-bottom a { color: var(--pale-blue); text-decoration: none; font-weight: 700; }
.footer-bottom a:hover { text-decoration: underline; }
.footer-links { display: flex; flex-wrap: wrap; gap: 20px 34px; }
/* Phones: copyright on its own line, the four legal links on one line below it. */
@media (max-width: 600px) {
  .footer-bottom { gap: 14px 0; padding-block: 22px; }
  .footer-spacer { display: none; }
  .footer-links { flex-basis: 100%; flex-wrap: nowrap; justify-content: space-between; gap: 10px; font-size: 1.3rem; }
  .footer-links a { white-space: nowrap; }
}

.footer-spacer { margin-left: auto; }
.footer-legal { padding-bottom: 40px; font-size: 1.25rem; line-height: 1.6; color: rgba(186, 227, 248, .62); }
.footer-legal p + p { margin-top: 10px; }

@media (max-width: 1100px) { .footer-main { grid-template-columns: repeat(2, minmax(0, 1fr)); } }
@media (max-width: 700px) {
  .footer-main { grid-template-columns: repeat(2, 1fr); }
  .footer-spacer { margin-left: 0; }
}

/* ---------- utilities ---------- */

.mt-2 { margin-top: 20px; }
.mt-3 { margin-top: 30px; }
.mt-4 { margin-top: 44px; }
.balance { text-wrap: balance; }
/* Reviewed line as a credential chip: emblem, date, name and NMLS. */
.reviewed {
  display: inline-flex; align-items: center; gap: 10px; margin: 0 0 18px;
  padding: 6px 13px 6px 11px; border: 1px solid var(--rule); border-radius: 999px; background: var(--white);
  font-size: 1.25rem; line-height: 1.4; color: var(--text-soft); letter-spacing: .01em;
}
.reviewed::before { content: ''; flex: none; width: 24px; height: 14px; background: url('/images/c2-emblem-navy.svg') center / contain no-repeat; }
.mb-4 { margin-bottom: 44px; }
/* ---------- spacing / type utilities (replace one-off inline styles) ------ */
.pt-0 { padding-top: 0; }
.mb-3 { margin-bottom: 22px; }
.mx-auto { margin-inline: auto; }
.fs-sm { font-size: 1.3rem; }
.fs-note { font-size: 1.45rem; }

.sr-only {
  position: absolute; width: 1px; height: 1px; padding: 0; margin: -1px;
  overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; border: 0;
}

/* hero cross-fade (multiple slides in .hero-media) */

.hero-media img.is-active { opacity: 1; }

/* ==========================================================================
   Home-equity components — built on the C2 token set above.
   Only additive: no base token is redefined.
   ========================================================================== */

:root {
  /* Softened neutrals derived from --ink, plus a warm signal the base set
     does not carry (used only for "conditional" verdicts). */
  --text-soft: #3c4653;
  --text-meta: #6e6964;
  --rule: rgba(1, 7, 27, .12);
  --rule-soft: rgba(1, 7, 27, .07);
  --amber: #a8752c;
  --amber-bg: #faf1e2;
  --link-bg: #eaf3fd;
  --font-mono: 'IBM Plex Mono', ui-monospace, SFMono-Regular, Menlo, monospace;
}

.mono { font-family: var(--font-mono); font-variant-numeric: tabular-nums; }

/* ---------- inquiry form (short, high, Sonshine pattern) ---------------- */
.inquiry {
  background: var(--white);
  border: 1px solid var(--rule);
  padding: clamp(24px, 3vw, 34px);
  position: relative;
}
/* The accent sits inside the box rather than as a 4px top border: a thick top
   border miters diagonally into the 1px sides, which makes the top corners read
   wider than the bottom ones. */
.inquiry::before {
  content: ''; position: absolute; top: 0; left: 0; right: 0; height: 4px;
  background: var(--link);
}
.inquiry h2, .inquiry h3 { font-size: 2.3rem; margin-bottom: 6px; }
.inquiry .inquiry-sub { font-size: 1.5rem; color: var(--gray); margin-bottom: 22px; line-height: 1.5; }
.inquiry .form-grid { column-gap: 16px; row-gap: 26px; }
.inquiry .btn { width: 100%; }
.inquiry-trust {
  margin-top: 18px; font-size: 1.3rem; line-height: 1.55; color: var(--gray);
  display: flex; flex-wrap: wrap; gap: 6px 0;
  justify-content: center; text-align: center;
}
.inquiry-trust span { display: inline-flex; align-items: center; }
.inquiry-trust span + span::before { content: '·'; margin: 0 12px; color: #aeb8c7; }
.surface-navy .inquiry { background: rgba(255, 255, 255, .05); border-color: rgba(186, 227, 248, .22); }

.inquiry-split { display: grid; grid-template-columns: 1.15fr .85fr; gap: clamp(28px, 4vw, 60px); align-items: start; }
/* Short copy beside the form: give the form the wider column. */
.inquiry-split.form-emphasis { grid-template-columns: .9fr 1.1fr; }
/* City pages lead with the tract list, but the form still carries address fields. */
/* Contact page: the form is the point of the page, so it takes roughly two
   thirds of the row; the details column drops a type step to fit beside it. */
.inquiry-split.contact-split { grid-template-columns: 1.65fr .85fr; gap: clamp(28px, 4vw, 56px); }
.contact-split .prose h2 { font-size: 2.3rem; }
.contact-split .prose h3 { font-size: 1.9rem; }
.contact-split .prose p, .contact-split .prose li { font-size: 1.5rem; line-height: 1.55; }
@media (max-width: 900px) { .inquiry-split, .inquiry-split.form-emphasis, .inquiry-split.contact-split { grid-template-columns: 1fr; } .contact-split .prose p, .contact-split .prose li { font-size: 1.7rem; line-height: 1.62; } }

/* ---------- verdict: the answer before the explanation ------------------ */
/* The short answer. The status color sits on the top edge, where the inquiry
   card carries its blue rule, so the two key cards share one language. The
   label is small caps with a status dot; the lead sentence is navy. */
.verdict {
  background: var(--white); border: 1px solid var(--rule); border-top: 3px solid var(--green);
  padding: 28px 36px 32px;
}
.verdict.is-conditional { border-top-color: var(--amber); }
.verdict.is-hard { border-top-color: #a8433a; }
.verdict-flag {
  display: inline-flex; align-items: center; gap: 10px; margin-bottom: 14px;
  font-size: 1.2rem; font-weight: 700; letter-spacing: .14em; text-transform: uppercase; color: #157048;
}
.verdict-flag::before { content: ''; width: 9px; height: 9px; border-radius: 50%; background: var(--green); flex: none; }
.verdict.is-conditional .verdict-flag { color: var(--amber); }
.verdict.is-conditional .verdict-flag::before { background: var(--amber); }
.verdict.is-hard .verdict-flag { color: #a8433a; }
.verdict.is-hard .verdict-flag::before { background: #a8433a; }
.verdict p { font-size: 1.85rem; line-height: 1.5; max-width: 64ch; margin: 0; }
.verdict p strong { color: var(--navy); }
@media (max-width: 620px) {
  .verdict { padding: 22px 22px 24px; }
  .verdict p { font-size: 1.7rem; }
}
  /* A pill that can't shrink would widen the grid track and push the text
     past the box; let it sit at content width and wrap if it must. */
  .verdict-flag { white-space: normal; justify-self: start; }
  .verdict > * { min-width: 0; }
}

/* ---------- comparison table -------------------------------------------- */
.compare-wrap { overflow-x: auto; margin-top: 30px; }
/* table-layout:fixed so the content columns split the remaining width evenly.
   Without it the browser sizes them from content and one column reads looser. */
table.compare { width: 100%; border-collapse: collapse; font-size: 1.55rem; min-width: 540px; table-layout: fixed; }
table.compare th, table.compare td {
  text-align: left; padding: 15px 18px; border-bottom: 1px solid var(--rule); vertical-align: top;
}
table.compare thead th {
  font-size: 1.2rem; font-weight: 700; letter-spacing: .12em; text-transform: uppercase;
  color: var(--gray); border-bottom: 2px solid var(--ink);
}
table.compare tbody th { font-weight: 700; color: var(--ink); }
/* With fixed layout the first row sets the widths, so declare it on thead:
   a narrow label column, and the content columns share what is left evenly. */
table.compare thead th:first-child { width: 26%; }
/* Project cost bands: the scope note sits under its label so the three
   regional columns read left to right with the Bay Area at the far edge. */
.band-note { display: block; font-weight: 400; font-size: 1.3rem; line-height: 1.45; color: var(--gray); margin-top: 3px; }
/* Dollar ranges never wrap: auto layout lets the three value columns take the
   width they need and the scope column absorbs the rest. */
table.compare:has(.band-note) { table-layout: auto; }
table.compare:has(.band-note) thead th:first-child { width: auto; }
table.compare:has(.band-note) td.mono { white-space: nowrap; }

/* Cost bands on phones: a three-region price table cannot scroll sideways and
   stay usable, so each scope becomes a block with its three regions stacked. */
@media (max-width: 760px) {
  .compare-wrap:has(.band-note) { overflow-x: visible; }
  table.compare:has(.band-note),
  table.compare:has(.band-note) tbody,
  table.compare:has(.band-note) tr,
  table.compare:has(.band-note) th,
  table.compare:has(.band-note) td { display: block; width: auto; min-width: 0; }
  table.compare:has(.band-note) thead { position: absolute; width: 1px; height: 1px; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; }
  table.compare:has(.band-note) tr { border: 1px solid var(--rule); padding: 16px 18px; margin-bottom: 14px; background: var(--white); }
  table.compare:has(.band-note) tbody th { border: 0; padding: 0 0 10px; font-size: 1.7rem; }
  table.compare:has(.band-note) td { border: 0; padding: 7px 0 0; display: flex; justify-content: space-between; align-items: baseline; gap: 16px; font-size: 1.5rem; }
  table.compare:has(.band-note) td::before { content: attr(data-label); font-weight: 400; color: var(--gray); font-family: var(--font-sans); font-variant-numeric: normal; }
  table.compare:has(.band-note) td + td { border-top: 1px solid var(--rule); margin-top: 7px; }
  .band-note { font-size: 1.4rem; }
}
table.compare td { color: var(--text-soft); line-height: 1.5; }
table.compare .col-win { background: var(--link-bg); }
/* Our column is marked by a sky cap on its header cell, not by colored text. */
table.compare:not(.compare-matrix) thead th.col-win { border-top: 4px solid var(--sky); }

.visually-hidden { position: absolute; width: 1px; height: 1px; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; }

/* ---------- product comparison matrix ----------------------------------- */
/* The product matrix is a card: white on the section's sand, hairline border,
   our column carried by a navy header cell and a pale-blue body — one accent,
   nothing else competing. Rows get room to breathe. */
.compare-wrap:has(.compare-matrix) { background: var(--white); border: 1px solid var(--rule); padding: 0 22px 10px; margin-top: 34px; }
table.compare-matrix { table-layout: fixed; }
table.compare-matrix thead th { padding: 20px 20px 16px; border-bottom: 2px solid var(--ink); font-size: 1.15rem; letter-spacing: .14em; vertical-align: bottom; }
table.compare-matrix thead th:first-child { width: 22%; }
table.compare-matrix thead th.col-win { background: var(--navy); color: #fff; border-bottom-color: var(--navy); font-weight: 700; }
table.compare-matrix tbody th { padding: 20px; font-size: 1.55rem; }
table.compare-matrix td { padding: 20px; font-size: 1.5rem; line-height: 1.55; }
table.compare-matrix td.col-win { background: var(--link-bg); color: var(--ink); font-weight: 600; }
table.compare-matrix tbody tr:last-child th, table.compare-matrix tbody tr:last-child td { border-bottom: 0; }
.compare-sources { margin-top: 16px; }
.compare-sources { list-style: none; padding: 0; margin: 14px 0 0; font-size: 1.25rem; color: var(--gray); line-height: 1.5; overflow-wrap: anywhere; }
.compare-sources li { margin: 0; }
@media (max-width: 760px) {
  .compare-wrap:has(.compare-matrix) { overflow-x: visible; }
  table.compare-matrix, table.compare-matrix tbody, table.compare-matrix tr, table.compare-matrix th, table.compare-matrix td { display: block; width: auto; min-width: 0; }
  table.compare-matrix thead { position: absolute; width: 1px; height: 1px; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; }
  table.compare-matrix tr { border: 1px solid var(--rule); padding: 16px 18px; margin-bottom: 14px; background: var(--white); }
  table.compare-matrix tbody th { border: 0; padding: 0 0 10px; font-size: 1.7rem; }
  table.compare-matrix td { border: 0; padding: 8px 0 0; font-size: 1.5rem; }
  .compare-wrap:has(.compare-matrix) { background: none; border: 0; padding: 0; }
  table.compare-matrix thead th.col-win { background: none; }
  table.compare-matrix td.col-win { background: var(--link-bg); font-weight: 600; color: var(--ink); padding: 10px 12px; margin: 0 -2px; border-left: 3px solid var(--navy); }
  table.compare-matrix td::before { content: attr(data-label); display: block; font-size: 1.15rem; font-weight: 700; letter-spacing: .1em; text-transform: uppercase; color: var(--gray); margin-bottom: 2px; }
  table.compare-matrix td + td { border-top: 1px solid var(--rule); margin-top: 8px; }
}

/* ---------- home: uses, with home improvement featured ------------------ */
.use-featured {
  display: grid; grid-template-columns: 1.15fr .85fr; gap: clamp(28px, 4vw, 56px); align-items: center;
  background: #fff; border: 1px solid rgba(1, 7, 27, .1); padding: clamp(26px, 3.5vw, 44px);
}
/* The tile row below sits at the same gap the tile grid uses internally. */
.use-grid { margin-top: clamp(28px, 4vw, 56px); }
.use-featured > * { min-width: 0; }
.use-kicker { display: block; font-size: 1.25rem; font-weight: 700; letter-spacing: .12em; text-transform: uppercase; color: var(--link); margin-bottom: 8px; }
.use-featured h3 { font-size: 2.6rem; line-height: 1.15; margin: 0 0 16px; }
.use-featured .checklist { margin: 0 0 22px; }
.use-label { font-size: 1.25rem; font-weight: 700; letter-spacing: .12em; text-transform: uppercase; color: var(--gray); margin: 0 0 10px; }
.use-projects { list-style: none; margin: 0; padding: 0; border-top: 1px solid var(--rule); }
.use-projects li { margin: 0; border-bottom: 1px solid var(--rule); }
.use-projects a { display: block; padding: 12px 0; text-decoration: none; color: var(--ink); font-weight: 700; font-size: 1.6rem; }
.use-projects a:hover { color: var(--link); }
.use-projects a span { display: block; font-weight: 400; font-size: 1.4rem; color: var(--gray); line-height: 1.45; margin-top: 2px; }
@media (max-width: 760px) {
  .use-featured { grid-template-columns: 1fr; gap: 32px; }
  .use-featured h3 { font-size: 2.2rem; }
  .use-featured .checklist { margin-bottom: 18px; }
}
table.compare tbody tr:last-child th, table.compare tbody tr:last-child td { border-bottom: 0; }

/* ---------- city profile ------------------------------------------------ */
.city-facts {
  display: grid; grid-template-columns: repeat(auto-fit, minmax(210px, 1fr)); gap: 1px;
  background: var(--rule); border: 1px solid var(--rule); margin-top: 34px;
}

/* Six facts: two even rows of three on wider screens, so auto-fit never leaves
   an orphan cell showing the grid background. */
@media (min-width: 761px) {
  .city-facts:has(> :nth-child(6)):not(:has(> :nth-child(7))) { grid-template-columns: repeat(3, 1fr); }
}
.city-facts > div { background: var(--white); padding: 18px 20px; }
.city-facts dt {
  font-size: 1.25rem; font-weight: 700; letter-spacing: .12em; text-transform: uppercase; color: var(--gray);
}
.city-facts dd { margin: 7px 0 0; font-size: 1.5rem; line-height: 1.45; color: var(--ink); }
@media (max-width: 860px) { .city-facts { grid-template-columns: repeat(2, 1fr); } }
@media (max-width: 480px) { .city-facts { grid-template-columns: 1fr; } }

.tract-list { display: grid; gap: 18px; margin-top: 26px; }
.tract {
  display: grid; grid-template-columns: 210px 1fr; gap: 22px;
  padding-top: 18px; border-top: 1px solid var(--rule);
}
.tract h3 { font-size: 1.9rem; }
.tract .tract-type { font-size: 1.3rem; color: var(--gray); margin-top: 4px; display: block; }
.tract p { font-size: 1.6rem; line-height: 1.6; color: var(--text-soft); }
@media (max-width: 720px) { .tract { grid-template-columns: 1fr; gap: 8px; } }

/* ---------- contractor partner card ------------------------------------- */
.partner-card { border: 1px solid var(--rule); background: var(--white); padding: 28px; display: grid; gap: 10px; }
.partner-card .partner-meta { font-size: 1.25rem; color: var(--gray); letter-spacing: .02em; }
.partner-card .partner-est { color: var(--link); font-weight: 700; }

/* ---------- breadcrumbs -------------------------------------------------- */
.crumbs { padding-top: 20px; padding-bottom: 4px; font-size: 1.35rem; }
.crumbs ol { gap: 7px; }
.crumbs a:hover { color: var(--link); }
.crumbs [aria-current='page'] { color: var(--ink); font-weight: 700; }

/* ---------- calculator hero (the tool is the hero) ---------------------- */
.hero-calc { --hero-pad: clamp(48px, 6vw, 84px); background: var(--sky); padding-block: var(--hero-pad); }
/* The copy column is sized to its own measure (H1 at 15ch, body at ~48ch) so
   there is no slack to its right; the form takes the balance of the width. */
.hero-calc .hero-calc-grid {
  display: grid; grid-template-columns: minmax(0, .88fr) minmax(0, 1.12fr); gap: clamp(28px, 4vw, 56px); align-items: start;
}
/* The form spans both rows and sets the height. The copy sits in row one, and the
   "what happens next" aside in row two beneath it — on phones the grid collapses to
   one column so the aside falls after the form, and the form arrives sooner. */
.hero-calc .inquiry { padding: clamp(20px, 2.2vw, 26px); }
.hero-calc .inquiry h2 { font-size: 2rem; margin-bottom: 16px; }
.hero-calc .inquiry .inquiry-sub { font-size: 1.5rem; margin-bottom: 16px; }
.hero-calc .inquiry .form-grid { row-gap: 12px; column-gap: 14px; }
.hero-calc .inquiry .field { gap: 6px; }
.hero-calc .inquiry input, .hero-calc .inquiry select, .hero-calc .inquiry textarea { padding: 10px 12px; font-size: 1.5rem; }
/* iOS Safari zooms the page when a focused field is under 16px. */
@media (max-width: 760px) {
  .inquiry input, .inquiry select, .inquiry textarea { font-size: 1.6rem; }
  .inquiry .btn { font-size: 1.3rem; }
}
.hero-calc .inquiry-trust { margin-top: 14px; font-size: 1.3rem; }
.hero-calc h1 { font-size: clamp(3.4rem, 4.4vw, 5rem); line-height: 1.04; max-width: 15ch; }
.hero-calc .hero-calc-sub { font-size: 1.8rem; line-height: 1.55; margin-top: 18px; max-width: none; color: var(--text-soft); }
.hero-calc .checklist { margin-top: 26px; }
/* Proof points: a bold lead and one short line each, with the check mark. */
.proof { list-style: none; margin: 32px 0 0; padding: 0; display: grid; gap: 24px; max-width: none; }
.proof li { position: relative; padding-left: 34px; font-size: 1.6rem; line-height: 1.5; }
.proof li strong { display: block; color: var(--ink); margin-bottom: 4px; }
.proof li span { color: var(--text-soft); }
.proof li::before { content: ''; position: absolute; left: 0; top: 4px; width: 20px; height: 20px; border-radius: 50%; background: var(--link); -webkit-mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 20 20'%3E%3Cpath fill='none' stroke='%23000' stroke-width='2.2' stroke-linecap='round' stroke-linejoin='round' d='M4.5 10.5l3.5 3.5 7.5-8'/%3E%3C/svg%3E") center / 20px no-repeat; mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 20 20'%3E%3Cpath fill='none' stroke='%23000' stroke-width='2.2' stroke-linecap='round' stroke-linejoin='round' d='M4.5 10.5l3.5 3.5 7.5-8'/%3E%3C/svg%3E") center / 20px no-repeat; }

/* ---------- How it works (own section) --------------------------------- */
/* The hero card hangs below the sky band on desktop; the next section makes
   room for it. Phones stack the hero, so the overlap is switched off there. */
.hero-calc .inquiry { position: relative; z-index: 1; margin-bottom: calc(-1 * (var(--hero-pad) + var(--hero-overlap, 0px))); }
.hero-calc { --hero-overlap: clamp(36px, 4vw, 56px); }
.hero-calc + .how { padding-top: calc(clamp(48px, 6vw, 72px) + var(--hero-overlap, 48px)); }
.how { padding-top: clamp(48px, 6vw, 72px); }
@media (max-width: 900px) { .hero-calc { --hero-overlap: 0px; } .hero-calc .inquiry { margin-bottom: 0; } }
.how h2 { font-size: clamp(2.4rem, 2.8vw, 3.2rem); margin-bottom: clamp(26px, 3vw, 40px); }
/* Three steps as ledger columns: each opens on a navy hairline with the step
   number at left and a one-line fact at right. No marker to recognize. */
.how-steps { list-style: none; counter-reset: step; margin: 0; padding: 0; display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 32px clamp(28px, 4vw, 56px); }
.how-steps li { counter-increment: step; border-top: 1px solid var(--navy); padding-top: 16px; display: grid; gap: 10px; align-content: start; min-width: 0; }
.how-k { display: flex; justify-content: space-between; align-items: baseline; gap: 12px; font-family: var(--font-mono); font-size: 1.2rem; letter-spacing: .1em; text-transform: uppercase; color: var(--navy); }
.how-step::before { content: 'Step ' counter(step); }
.how-time { color: #157048; text-align: right; }
.how-time .fn-ref { letter-spacing: 0; }
.how-steps strong { font-size: 1.85rem; line-height: 1.3; color: var(--ink); }
.how-steps p { font-size: 1.55rem; line-height: 1.55; color: var(--text-soft); margin: 0; }
@media (max-width: 760px) { .how-steps { grid-template-columns: 1fr; gap: 28px; } .how-steps li { padding-top: 14px; } .proof { gap: 26px; } }

/* ---------- Disclosures (end of page) ----------------------------------- */
.disclosures { border-top: 1px solid var(--rule); }
.disclosures-h { font-size: 1.3rem; font-weight: 700; letter-spacing: .1em; text-transform: uppercase; color: var(--text-soft); margin-bottom: 10px; }
.disclosures .hero-notes { margin: 0; border-top: 0; padding-top: 0; }
@media (max-width: 900px) { .hero-calc .hero-calc-grid { grid-template-columns: 1fr; row-gap: 28px; } }
.hero-calc .checklist li { font-size: 1.6rem; }

/* ---------- worked formula callout -------------------------------------- */

/* ---------- long-form Q&A rhythm ---------------------------------------- */
.qa-block { border-top: 1px solid var(--rule); padding-top: 34px; margin-top: 34px; }
.qa-block:first-child { border-top: 0; padding-top: 0; margin-top: 0; }
.qa-block > h2 { font-size: clamp(2.3rem, 2.8vw, 3rem); margin-bottom: 16px; }

/* ---------- head-to-head comparison calculator -------------------------- */

/* ---------- inquiry: address row + optional-field hint ------------------- */
.addr-row {
  grid-column: 1 / -1;
  /* City takes the slack; state and ZIP only ever need a fixed, known width.
     Row-gap matches the form so the stacked mobile layout keeps the rhythm. */
  /* Proportional, not fixed. These forms render in containers from ~340px
     (contractor sidebar) to ~590px (contact page), and fixed pixel columns
     either starve City in the narrow case or let it swallow all the slack
     in the wide one. Ratios hold at every width. */
  display: grid;
  grid-template-columns: minmax(0, 2.2fr) minmax(0, 1fr) minmax(0, 1.3fr);
  column-gap: 16px; row-gap: 26px;
}
@media (max-width: 560px) { .addr-row { grid-template-columns: 1fr; } }
.field .opt { font-weight: 400; color: var(--gray); letter-spacing: 0; }
.field input::placeholder { color: #a9b0ba; }

/* ---------- header CTA: the full label does not fit a phone -------------- */
.header-actions .lbl-sm { display: none; }
@media (max-width: 700px) {
  .header-actions .lbl-lg { display: none; }
  .header-actions .lbl-sm { display: inline; }
  .header-actions .btn { padding-inline: 18px; }
  .brand svg { width: 44px; }
  .brand-word { font-size: 1.4rem; }
}

/* Narrow phones: the header has four fixed-width things competing for room. */
@media (max-width: 520px) {
  :root { --padding: 18px; }
  .header-inner { gap: 10px; }
  .brand svg { width: 38px; }
  .brand-word { font-size: 1.25rem; }
  .header-actions .btn { padding: 12px 14px; font-size: 1.25rem; letter-spacing: .06em; }
  .nav-toggle { padding: 8px; }
}
@media (max-width: 400px) {
  /* The wordmark stays: the phone button is already hidden below 1120px, so the
     header has room. Only the type tightens. */
  .brand-word { font-size: 1.2rem; }
  .brand svg { width: 34px; }
}
@media (max-width: 345px) {
  /* Smallest phones still in use: trim the CTA rather than the company name. */
  :root { --padding: 14px; }
  .header-inner { gap: 8px; }
  .header-actions .btn { padding: 11px 11px; font-size: 1.15rem; letter-spacing: .04em; }
  .brand { gap: 8px; }
}

/* Grid items default to min-width:auto, so a long word or a nested grid can
   push a track wider than its container. Opting these back to 0 stops the
   blowout that clipped content on narrow phones. */
.inquiry-split > *, .form-grid > *, .addr-row > *, .tract, .tract > *, .tract-list > *, .cols > *, .footer-main > *, .hero-calc-grid > *, .calc > * { min-width: 0; }

/* Two 150px columns can't hold an email address; stack the footer on phones,
   and let the address wrap mid-string as a safety net at in-between widths. */
.footer-main address a { max-width: 100%; overflow-wrap: anywhere; }
@media (max-width: 600px) { .footer-main { grid-template-columns: 1fr; gap: 30px; } }

/* This site's nav carries five items to C2's four, so the phone button has to
   drop earlier than the base stylesheet assumes. */
@media (max-width: 1120px) { .header-actions .btn-login { display: none; } }

/* ---------- numbered disclosures for hero claims ------------------------- */
.fn-ref { font-size: .62em; line-height: 0; margin-left: 1px; }
.fn-ref a { color: var(--link); font-weight: 700; text-decoration: none; }
.fn-ref a:hover { text-decoration: underline; }
.hero-notes { margin: clamp(22px, 3vw, 34px) 0 0; padding: 16px 0 0 18px; border-top: 1px solid var(--rule); max-width: 110ch; }
.hero-notes li { font-size: 1.3rem; line-height: 1.55; color: var(--text-soft); }
.hero-notes li:target { background: rgba(27, 111, 227, .08); outline: 2px solid rgba(27, 111, 227, .25); outline-offset: 4px; }

/* ---------- hero: scope the claims to our product ----------------------- */
.hero-calc .hero-bullets-label {
  margin-top: 26px; font-size: 1.2rem; font-weight: 700; letter-spacing: .12em;
  text-transform: uppercase; color: var(--gray);
}
.hero-calc .hero-bullets-label + .checklist { margin-top: 10px; }
.hero-calc .hero-scope { margin-top: 18px; font-size: 1.4rem; line-height: 1.5; color: var(--text-soft); max-width: none; }

/* ---------- compact areas band (keeps the home page feeding city pages) -- */
.city-links { text-align: center; font-size: 1.5rem; line-height: 2; color: var(--gray); max-width: 92ch; margin-inline: auto; }
.city-links a { color: var(--link); text-decoration: none; }
.city-links a:hover { text-decoration: underline; }

/* ---------- scenario figure (emphasis bars + table view) ---------------- */
.chart-block { margin: 30px 0; }
.chart-pair { display: grid; grid-template-columns: 1fr 1fr; gap: clamp(20px, 3vw, 44px); margin-bottom: 24px; }
@media (max-width: 860px) { .chart-pair { grid-template-columns: 1fr; } }
.chart-panel { margin: 0; }
.chart-panel figcaption {
  font-size: 1.2rem; font-weight: 700; letter-spacing: .1em; text-transform: uppercase;
  color: var(--gray); margin-bottom: 14px;
}
.cb-row { display: grid; grid-template-columns: minmax(96px, 0.9fr) minmax(0, 1.6fr) auto; align-items: center; gap: 10px; margin-bottom: 12px; }
.cb-label { font-size: 1.35rem; line-height: 1.3; color: var(--ink); font-weight: 600; }
.cb-track { display: block; }
.cb-bar { display: block; height: 20px; background: var(--gray); border-radius: 0 4px 4px 0; }
.cb-bar.is-accent { background: var(--link); }
.cb-value { font-size: 1.35rem; font-weight: 700; color: var(--ink); font-variant-numeric: tabular-nums; white-space: nowrap; }
.chart-table { min-width: 0; }
@media (max-width: 620px) { .chart-table { min-width: 460px; } }

/* ---------- photography banners ----------------------------------------- */
.banner { margin: 0; }
.banner img { width: 100%; height: auto; display: block; }
.banner figcaption { font-size: 1.25rem; color: var(--gray); margin-top: 10px; }

/* Scope note under every Q&A section: these requirements are the line we place. */
.faq-scope { margin-top: 26px; font-size: 1.35rem; line-height: 1.55; color: var(--gray); max-width: 76ch; }
/* Standalone scope line at the end of a page's content (see scopeNote()). */
.scope-note { padding-block: 32px 48px; }
.scope-note-tight { padding-top: 0; }
.scope-note .faq-scope { margin-top: 0; }

/* Entity + headline numbers, directly under the hero: the block answer engines
   quote, and the facts a skimmer wants before scrolling. */
.entity-band { background: var(--white); border-bottom: 1px solid var(--rule); padding-block: clamp(22px, 3vw, 32px); }
.entity-line { font-size: 1.7rem; line-height: 1.5; color: var(--ink); max-width: 86ch; }
.entity-facts { display: flex; flex-wrap: wrap; gap: 10px 28px; margin-top: 14px; font-size: 1.45rem; color: var(--text-soft); }
.entity-facts strong { color: var(--ink); }
.entity-facts span { display: inline-flex; align-items: center; gap: 7px; }
.entity-facts span::before { content: ''; width: 6px; height: 6px; border-radius: 50%; background: var(--link); }

/* Speed/ease line above the form. The disclosure renders with it, so the claim
   cannot appear on a page without its conditions. */
.inquiry-kicker {
  font-size: 1.28rem; font-weight: 700; letter-spacing: .01em; color: var(--link);
  margin-bottom: 18px; line-height: 1.45; text-wrap: balance;
}
/* Phones: a shorter form of the kicker so it holds one line in the card. */
.inquiry-kicker .k-short { display: none; }
@media (max-width: 640px) {
  .inquiry-kicker { font-size: 1.15rem; letter-spacing: 0; white-space: nowrap; text-wrap: initial; }
  .inquiry-kicker .k-long { display: none; }
  .inquiry-kicker .k-short { display: inline; }
}
.inquiry-kicker-note { margin-top: 16px; font-size: 1.25rem; line-height: 1.5; color: var(--gray); }

/* ---------- "prefer to talk it through?" lane on the inquiry form --------- */
.talk-lane, .inquiry .field.talk-lane, .hero .inquiry .field.talk-lane { flex-direction: row; flex-wrap: wrap; align-items: center; justify-content: center; gap: 8px 28px; min-width: 0; padding: 10px 0 12px; }
/* When the row wraps on a phone, keep the options left-aligned under the question. */
/* Phones: the question takes its own line; the two choices share the next one. */
@media (max-width: 640px) {
  .talk-lane, .inquiry .field.talk-lane, .hero .inquiry .field.talk-lane { justify-content: flex-start; gap: 8px 22px; }
  .talk-lane .talk-q { flex-basis: 100%; }
  .talk-lane label { font-size: 1.35rem; white-space: nowrap; }
}
.talk-q { font-size: 1.4rem; font-weight: 700; letter-spacing: .04em; }
.talk-lane label { display: inline-flex; align-items: center; gap: 7px; font-size: 1.45rem; cursor: pointer; }
.talk-lane input { width: 16px; height: 16px; margin: 0; accent-color: var(--link); }

/* Contact consent. The checkbox is optional and unchecked; the label is the
   full consent text so the whole sentence is the click target. */
.consent-lane, .inquiry .field.consent-lane, .hero .inquiry .field.consent-lane { gap: 0; padding-top: 2px; }
.consent { display: grid; grid-template-columns: 18px 1fr; gap: 12px; align-items: start; cursor: pointer; }
.consent input { width: 18px; height: 18px; margin: 3px 0 0; accent-color: var(--link); }
.consent span, .consent-notice { font-size: 1.3rem; line-height: 1.55; color: var(--gray); font-weight: 400; letter-spacing: 0; }
.consent-notice, .inquiry .field.consent-notice, .hero .inquiry .field.consent-notice { display: block; margin: -8px 0 0; }
.consent-notice a { color: var(--link); text-decoration: underline; text-underline-offset: 2px; }
.surface-navy .consent span, .surface-navy .consent-notice { color: rgba(255,255,255,.72); }
.surface-navy .consent-notice a { color: #bae3f8; }
.inquiry-trust a { color: var(--link); font-weight: 700; white-space: nowrap; margin-left: 5px; }

/* Partner groups on the contractors page: each trade is its own sub-section,
   separated by a rule and generous space, with a heading that reads as one. */
.partner-group { font-size: clamp(2.2rem, 2.4vw, 2.6rem); font-weight: 700; letter-spacing: -.01em; color: var(--ink);
  margin: clamp(48px, 5vw, 64px) 0 22px; padding-top: clamp(28px, 3vw, 36px); border-top: 1px solid rgba(1, 7, 27, .14); }
h3.partner-group:first-of-type { margin-top: 12px; padding-top: 0; border-top: 0; }

/* ---------- "about this list" legal note ------------------------------- */
.legal-note { border: 1px solid var(--rule); border-left: 4px solid var(--ink); padding: clamp(22px, 2.6vw, 30px); background: var(--white); }
.legal-note p { font-size: 1.5rem; line-height: 1.6; color: var(--text-soft); }
.legal-note p + p { margin-top: 14px; }
.legal-note .disclosures-h { margin-bottom: 14px; }

/* ---------- sticky contact bar ------------------------------------------- */
/* Off-screen and inert until site.js shows it — which it does only while no
   inquiry form is in the viewport, so the bar never competes with the form. */
.contact-bar {
  position: fixed; left: 0; right: 0; bottom: 0; z-index: 40; padding: 0 var(--padding) 14px; pointer-events: none;
  transform: translateY(120%); visibility: hidden;
  transition: transform .32s cubic-bezier(.2, .7, .2, 1), visibility 0s linear .32s;
}
.contact-bar.is-shown { transform: none; visibility: visible; transition-delay: 0s; }
@media (prefers-reduced-motion: reduce) { .contact-bar { transition: none; } }
.cb-inner {
  pointer-events: auto; max-width: var(--maxw); margin-inline: auto;
  background: var(--navy-deep); color: var(--pale-blue); border-radius: 16px;
  box-shadow: 0 18px 50px rgba(1, 7, 27, .28);
  display: grid; grid-template-columns: 1fr auto; grid-template-rows: auto auto; align-items: center;
  column-gap: clamp(16px, 2.5vw, 36px); row-gap: 14px;
  padding: 18px clamp(20px, 2.4vw, 30px) 20px;
}
/* Copy on the first row, the contact strip and CTA beneath — the headline gets
   the full width instead of fighting four columns for it. */
.cb-copy { grid-column: 1; grid-row: 1; }
.cb-close { grid-column: 2; grid-row: 1; justify-self: end; align-self: start; }
.cb-contacts { grid-column: 1; grid-row: 2; }
.cb-cta { grid-column: 2; grid-row: 2; justify-self: end; }
.cb-eyebrow { display: block; font-size: 1.15rem; letter-spacing: .2em; text-transform: uppercase; color: var(--light-blue); margin-bottom: 6px; }
.cb-head { margin: 0; font-size: 1.75rem; font-weight: 700; line-height: 1.25; color: #fff; }
.cb-head .fn-ref a { color: var(--light-blue); }
.cb-sub { margin: 6px 0 0; font-size: 1.4rem; line-height: 1.4; color: rgba(255, 255, 255, .9); }
.cb-cred { margin: 4px 0 0; font-size: 1.2rem; line-height: 1.45; color: rgba(186, 227, 248, .72); }
.cb-contacts { list-style: none; margin: 0; padding: 0; display: flex; gap: clamp(14px, 2vw, 28px); }
.cb-contacts a { display: inline-flex; align-items: center; gap: 10px; color: #fff; text-decoration: none; }
.cb-contacts svg { width: 34px; height: 34px; flex: 0 0 auto; padding: 8px; border-radius: 50%; background: rgba(186, 227, 248, .12); fill: none; stroke: var(--light-blue); stroke-width: 1.8; stroke-linejoin: round; stroke-linecap: round; }
.cb-contacts span { display: flex; flex-direction: column; font-size: 1.5rem; font-weight: 600; line-height: 1.2; white-space: nowrap; }
.cb-contacts small { font-size: 1.05rem; letter-spacing: .16em; text-transform: uppercase; font-weight: 500; color: rgba(186, 227, 248, .7); }
.cb-contacts a:hover span { text-decoration: underline; }
.cb-cta.btn { background: var(--cream); color: var(--ink); white-space: nowrap; }
.cb-cta.btn:hover { background: #fff; }
.cb-close { width: 38px; height: 38px; border-radius: 50%; border: 1px solid rgba(186, 227, 248, .3); background: transparent; color: #fff; font-size: 2rem; line-height: 1; cursor: pointer; display: grid; place-items: center; }
.cb-close:hover { background: rgba(186, 227, 248, .12); }
.cb-close:focus-visible, .cb-contacts a:focus-visible, .cb-cta:focus-visible { outline: 2px solid var(--light-blue); outline-offset: 2px; }
/* keep the page's own footer reachable beneath the bar */
body.has-contact-bar { padding-bottom: 150px; }
/* the slide-in mobile menu owns the screen; the bar steps aside */
body:has(.primary-nav.is-open) .contact-bar { display: none; }
@media (max-width: 1100px) {
  .cb-contacts li:nth-child(3) { display: none; }
}
@media (max-width: 760px) {
  /* phones: one compact row — call, CTA, dismiss */
  .contact-bar { padding: 0 10px 10px; }
  .cb-inner { grid-template-columns: auto 1fr auto; grid-template-rows: auto; gap: 10px; padding: 10px 10px 10px 14px; border-radius: 12px; }
  .cb-contacts { grid-column: 1; grid-row: 1; } .cb-cta { grid-column: 2; grid-row: 1; } .cb-close { grid-column: 3; grid-row: 1; align-self: center; }
  .cb-copy { display: none; }
  /* Phone: an action strip, not a message. Call and text as icon-only taps
     (the number is in the footer and on /contact/); copy lives in the page. */
  .cb-contacts { gap: 8px; }
  .cb-contacts li:nth-child(3) { display: none; }
  .cb-contacts a { gap: 0; }
  .cb-contacts svg { width: 40px; height: 40px; padding: 11px; }
  .cb-contacts span { display: none; }
  .cb-cta.btn { padding: 12px 16px; font-size: 1.2rem; justify-self: stretch; text-align: center; white-space: nowrap; }
  .cb-close { width: 32px; height: 32px; font-size: 1.7rem; }
}
@media (max-width: 370px) {
  .cb-inner { gap: 8px; padding: 10px 8px 10px 10px; }
  .cb-contacts { gap: 6px; }
  .cb-contacts svg { width: 36px; height: 36px; padding: 9px; }
  .cb-cta.btn { padding: 11px 10px; font-size: 1.1rem; letter-spacing: .04em; }
  body.has-contact-bar { padding-bottom: 82px; }
}

/* ---------- data page: wide city table stacks on phones ---------------- */
@media (max-width: 760px) {
  .compare-wrap:has(.city-data-table) { overflow-x: visible; }
  table.city-data-table, table.city-data-table tbody, table.city-data-table tr, table.city-data-table th, table.city-data-table td { display: block; width: auto; min-width: 0; }
  table.city-data-table thead { position: absolute; width: 1px; height: 1px; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; }
  table.city-data-table tr { border: 1px solid var(--rule); padding: 14px 16px; margin-bottom: 12px; background: var(--white); }
  table.city-data-table tbody th { border: 0; padding: 0 0 8px; font-size: 1.7rem; }
  table.city-data-table td { border: 0; padding: 5px 0 0; display: flex; justify-content: space-between; gap: 16px; font-size: 1.45rem; }
  table.city-data-table td::before { content: attr(data-label); font-weight: 400; color: var(--gray); font-family: var(--font-sans); font-variant-numeric: normal; }
}

/* ---------- plain comparison tables: labeled cards on phones ------------- */
@media (max-width: 760px) {
  .compare-wrap:has(.compare-stack) { overflow-x: visible; }
  table.compare-stack, table.compare-stack tbody, table.compare-stack tr, table.compare-stack th, table.compare-stack td { display: block; width: auto; min-width: 0; }
  table.compare-stack thead { position: absolute; width: 1px; height: 1px; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; }
  table.compare-stack tr { border: 1px solid var(--rule); padding: 14px 16px; margin-bottom: 12px; background: var(--white); }
  table.compare-stack tbody th { border: 0; padding: 0 0 8px; font-size: 1.7rem; }
  table.compare-stack td { border: 0; padding: 8px 0 0; font-size: 1.5rem; white-space: normal; }
  table.compare-stack td.col-win { background: none; font-weight: 600; color: var(--ink); }
  table.compare-stack td::before { content: attr(data-label); display: block; font-size: 1.15rem; font-weight: 700; letter-spacing: .1em; text-transform: uppercase; color: var(--gray); margin-bottom: 2px; }
  table.compare-stack td:empty, table.compare-stack td[data-label=""] { display: none; }
  table.compare-stack td + td { border-top: 1px solid var(--rule); margin-top: 8px; }
}

/* Header identity on small screens: emblem instead of the full lockup. */
@media (max-width: 700px) {
  .brand { gap: 10px; }
  .brand-lockup { display: none; }
  .brand-emblem { display: block; }
  .brand-sep { height: 32px; }
  .brand-name { font-size: 1.5rem; }
  .brand-role { font-size: 1.05rem; }
}
@media (max-width: 520px) { .brand-role { display: none; } .brand-emblem svg { height: 32px; } }
@media (max-width: 345px) { .brand-sep { display: none; } .brand-name { font-size: 1.35rem; } }

/* Keep the nav on one line beside the wider identity block. */
.nav-link { white-space: nowrap; }
@media (max-width: 1500px) { .primary-nav > ul { gap: 28px; } }
@media (max-width: 1300px) and (min-width: 981px) { .brand-role { display: none; } .brand-name { font-size: 1.6rem; } }

/* Footer: reversed lockup at the same size as the header's. */
.footer-brand .brand-lockup svg, .footer-brand .brand svg { height: 40px; width: auto; }
/* Desktop header budget: the identity block is wider than a wordmark, so the
   phone button and the role line yield first, then the lockup becomes the
   emblem below 1200px. The hamburger takes over below 980px. */
@media (max-width: 1700px) { .header-actions .btn-login { display: none; } }
@media (max-width: 1500px) { .brand-role { display: none; } }
@media (max-width: 1100px) and (min-width: 981px) { .primary-nav > ul { gap: 20px; } .brand-name { font-size: 1.5rem; } .brand { gap: 10px; } }
@media (max-width: 1200px) and (min-width: 981px) { .brand-lockup { display: none; } .brand-emblem { display: block; } .brand-sep { height: 30px; } }
/* The footer always has room for the full lockup, at every width. */
.footer-brand .brand-lockup { display: block; }
.footer-brand .brand-emblem { display: none; }
.footer-brand .brand-sep { height: 36px; }
@media (max-width: 1040px) and (min-width: 981px) { .primary-nav > ul { gap: 13px; } .nav-link { font-size: 1.42rem; } .brand-sep { display: none; } .brand { gap: 8px; } .brand-name { font-size: 1.4rem; } .header-actions .btn { padding-inline: 13px; font-size: 1.15rem; } }
.footer-brand .brand-name { white-space: nowrap; }
/* The two-column menu panel is anchored to the first nav item; keep it inside
   the viewport on narrower desktops so it never adds horizontal scroll. */
@media (max-width: 1200px) and (min-width: 981px) { .mega-wide { min-width: 600px; } }
/* Footer column is narrow: stack the lockup above the name and role. */
.footer-brand .brand { flex-direction: column; align-items: flex-start; gap: 12px; }
.footer-brand .brand-sep { display: none; }
.footer-brand .brand-role { white-space: normal; display: block; }
.footer-brand .brand-lockup { display: block; }
.footer-brand .brand-emblem { display: none; }

/* ---------- CLTV headroom calculator --------------------------------- */
/* Same card language as the inquiry form: white, hairline border, blue rule on
   top. Copy left, inputs right, result table full width beneath. */
.cltv-calc { background: #fff; border: 1px solid var(--rule); border-top: 4px solid var(--link); padding: clamp(24px, 3vw, 36px); }
.cltv-top { display: grid; grid-template-columns: 1.15fr .85fr; gap: clamp(28px, 4vw, 56px); align-items: center; }
.cltv-top > * { min-width: 0; }
.cltv-head h3 { font-size: 2.4rem; line-height: 1.15; margin: 0 0 12px; }
.cltv-head p { font-size: 1.55rem; line-height: 1.6; color: var(--text-soft); margin: 0; }
.cltv-grid { display: grid; gap: 14px; }
.cltv-field { display: block; }
.cltv-label { display: block; font-size: 1.35rem; font-weight: 700; margin-bottom: 6px; }
.cltv-input { display: flex; align-items: center; border: 1px solid var(--rule); border-radius: 6px; background: #fff; }
.cltv-input:focus-within { outline: 2px solid var(--link); outline-offset: 1px; }
.cltv-prefix { padding-left: 12px; font-size: 1.6rem; color: var(--gray); }
.cltv-input input { flex: 1; min-width: 0; border: 0; background: transparent; padding: 11px 12px 11px 6px; font: inherit; font-size: 1.6rem; font-variant-numeric: tabular-nums; color: var(--ink); }
.cltv-input input:focus { outline: none; }
.cltv-wrap { margin-top: 28px; }
table.compare.cltv-table { min-width: 0; table-layout: fixed; }
.cltv-table thead th:first-child { width: 34%; }
.cltv-table td.mono { white-space: nowrap; }
.cltv-cap { display: inline-block; margin-left: 8px; font-family: var(--font-sans); font-size: 1.05rem; font-weight: 700; letter-spacing: .08em; text-transform: uppercase; color: var(--gray); }
.cltv-calc .fs-note { margin-top: 16px; }
.th-short { display: none; }
@media (max-width: 860px) {
  .cltv-top { grid-template-columns: 1fr; gap: 22px; }
  .cltv-table thead th:first-child { width: 26%; }
  .cltv-table th, .cltv-table td { padding: 12px 8px; font-size: 1.45rem; white-space: nowrap; }
  .cltv-table .th-long { display: none; }
  .cltv-table .th-short { display: inline; }
}

/* ---------- Mello-Roos lookup ----------------------------------------- */
.stat-tiles .tile { text-align: left; }
.stat-tiles .stat { font-size: 3.6rem; font-weight: 800; letter-spacing: -.02em; line-height: 1; color: var(--navy); margin: 0 0 8px; font-variant-numeric: tabular-nums; }
.stat-tiles .tile p:last-child { font-size: 1.45rem; color: var(--text-soft); margin: 0; }
.city-index { display: flex; flex-wrap: wrap; gap: 8px 10px; margin: 6px 0 10px; }
.city-index a { display: inline-flex; align-items: center; gap: 8px; padding: 6px 12px; border: 1px solid var(--rule); border-radius: 999px; background: var(--white); font-size: 1.4rem; text-decoration: none; color: var(--ink); }
.city-index a .mono { font-size: 1.2rem; color: var(--text-meta); }
.city-index a:hover { border-color: var(--navy); }
.cfd-list h3 { margin-top: 2.2em; margin-bottom: .4em; font-size: 2rem; scroll-margin-top: 90px; }
.cfd-list .compare-wrap { margin-top: 12px; }
.cfd-table { font-size: 1.45rem; }
.cfd-table thead th:first-child { width: 30%; }

/* Spam trap: off-screen, never shown to people or screen readers. */
.hp { position: absolute; left: -10000px; width: 1px; height: 1px; overflow: hidden; }