/* Mortgage Sense: shared styles for every page. Built into assets/site.css. */
@font-face {
  font-family: "Instrument Sans";
  src: url("/fonts/instrument-sans-var.woff2") format("woff2");
  font-weight: 400 700;
  font-stretch: 75% 100%;
  font-display: swap;
}
:root {
  --paper: #f7f6f2;
  --white: #ffffff;
  --tint: #eff0f5;
  --ink: #181b42;
  --text: #33364f;
  --muted: #5d6078;
  --rule: #dad9e1;
  --rule-strong: #b6b5c4;
  --navy: #24306c;
  --navy-hover: #1b2457;
  --deep: #11143a;
  --green: #90b430;
  --green-ink: #4b6b0d;
  --blue: #246ca8;
  --on-dark: #ffffff;
  --on-dark-muted: #c2c5db;
  --wrap: 1240px;
  --gut: clamp(20px, 4vw, 48px);
  --head: 72px;
}
*, *::before, *::after { box-sizing: border-box; }
html { -webkit-text-size-adjust: 100%; scroll-behavior: smooth; }
body {
  margin: 0;
  background: var(--paper);
  color: var(--text);
  font-family: "Instrument Sans", system-ui, -apple-system, "Segoe UI", sans-serif;
  font-size: 1.0625rem;
  line-height: 1.6;
  font-weight: 420;
  font-variant-numeric: lining-nums;
  -webkit-font-smoothing: antialiased;
}
img { display: block; max-width: 100%; height: auto; }
a { color: inherit; }
h1, h2, h3, h4 { color: var(--ink); margin: 0; font-weight: 650; font-stretch: 84%; letter-spacing: -0.015em; line-height: 1.04; text-wrap: balance; }
p { margin: 0; }
p, li, dd, td, .doors .d { text-wrap: pretty; }
ul, ol { margin: 0; padding: 0; list-style: none; }
strong, b { font-weight: 620; color: var(--ink); }
.wrap { max-width: var(--wrap); margin: 0 auto; padding: 0 var(--gut); }
.num { font-variant-numeric: tabular-nums lining-nums; }
a[href^="tel:"], .nowrap { white-space: nowrap; }
:focus-visible { outline: 2px solid var(--green); outline-offset: 3px; }
.skip { position: absolute; left: -9999px; top: 8px; z-index: 100; background: var(--ink); color: #fff; padding: 10px 14px; }
.skip:focus { left: 8px; }
section[id], [id].anchor { scroll-margin-top: calc(var(--head) + 16px); }
.sr { position: absolute; width: 1px; height: 1px; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; }

/* ---------- buttons: square, one weight, no pills ---------- */
.btn {
  display: inline-flex; align-items: center; justify-content: center; gap: 10px;
  min-height: 52px; padding: 0 24px;
  border: 1.5px solid var(--navy); border-radius: 2px;
  font: inherit; font-weight: 600; font-size: 1rem; letter-spacing: 0.005em;
  text-decoration: none; cursor: pointer;
  transition: background-color .2s, color .2s, border-color .2s;
}
.btn svg { width: 18px; height: 18px; flex: none; }
.btn-solid { background: var(--navy); color: var(--white); }
.btn-solid:hover { background: var(--navy-hover); border-color: var(--navy-hover); }
.btn-line { background: transparent; color: var(--navy); }
.btn-line:hover { background: var(--navy); color: var(--white); }
.btn-light { background: var(--white); border-color: var(--white); color: var(--ink); }
.btn-light:hover { background: var(--tint); border-color: var(--tint); }
.btn-ghost { background: transparent; border-color: rgba(255, 255, 255, .55); color: var(--on-dark); }
.btn-ghost:hover { background: rgba(255, 255, 255, .1); border-color: var(--on-dark); }
.link-arrow { display: inline-flex; align-items: center; gap: 8px; font-weight: 600; color: var(--navy); text-decoration: none; border-bottom: 1.5px solid var(--green); padding-bottom: 2px; }
.link-arrow:hover { color: var(--ink); border-bottom-color: var(--navy); }
.link-arrow svg { width: 16px; height: 16px; transition: transform .2s; }
.link-arrow:hover svg { transform: translateX(3px); }
.on-dark .link-arrow, .link-arrow.light { color: var(--on-dark); }

/* ---------- top bar and header ---------- */
.topbar { background: var(--deep); color: var(--on-dark-muted); font-size: .8125rem; }
.topbar .wrap { display: flex; justify-content: space-between; align-items: center; gap: 16px; min-height: 38px; }
.topbar a { color: var(--on-dark); text-decoration: none; }
.topbar a:hover { text-decoration: underline; }
.topbar .right { display: flex; gap: 22px; align-items: center; }
.site-head { position: sticky; top: 0; z-index: 40; background: var(--white); border-bottom: 1px solid var(--rule); }
.site-head .wrap { display: flex; align-items: center; justify-content: space-between; gap: 24px; height: var(--head); }
.brand { display: block; flex: none; }
.brand img { width: 188px; height: auto; }
.nav { display: flex; align-items: center; gap: 28px; }
.nav ul { display: flex; gap: 22px; }
.nav ul a { text-decoration: none; color: var(--ink); font-weight: 520; font-size: .95rem; padding: 6px 0; border-bottom: 1.5px solid transparent; white-space: nowrap; }
.nav ul a:hover, .nav ul a[aria-current="page"] { border-bottom-color: var(--green); }
.nav .btn { min-height: 44px; padding: 0 18px; font-size: .95rem; }
.menu-btn { display: none; }

/* ---------- home hero: one photo under everything, fading into the ink ---------- */
.hero { position: relative; isolation: isolate; overflow: hidden; background: var(--deep); color: var(--on-dark); }
/* The bay runs under the whole hero. No edge anywhere: the words sit on solid
   ink at the left and the ink eases off across the middle to the clear photo
   at the right. Many stops, so the fade has no visible band. */
.hero-photo { position: absolute; inset: 0; z-index: -1; margin: 0; overflow: hidden; background: #2a2440; }
.hero-photo img { width: 100%; height: 100%; object-fit: cover; object-position: 60% 58%; }
.hero-photo::after {
  content: ""; position: absolute; inset: 0;
  background:
    linear-gradient(90deg,
      rgba(17, 20, 58, 1) 0%, rgba(17, 20, 58, .98) 22%, rgba(17, 20, 58, .93) 31%,
      rgba(17, 20, 58, .84) 39%, rgba(17, 20, 58, .7) 46%, rgba(17, 20, 58, .53) 53%,
      rgba(17, 20, 58, .36) 60%, rgba(17, 20, 58, .21) 67%, rgba(17, 20, 58, .1) 75%,
      rgba(17, 20, 58, .03) 84%, rgba(17, 20, 58, 0) 92%),
    linear-gradient(0deg, rgba(10, 12, 38, .85) 0%, rgba(10, 12, 38, .5) 13%, rgba(10, 12, 38, 0) 38%);
}
.hero-main { position: relative; min-height: min(64vh, 640px); display: flex; flex-direction: column; justify-content: center; padding-top: clamp(56px, 7vw, 104px); padding-bottom: clamp(56px, 7vw, 96px); }
.hero h1 { color: var(--on-dark); font-size: clamp(3.4rem, 7.4vw, 7rem); font-weight: 660; font-stretch: 78%; letter-spacing: -0.028em; line-height: .93; }
.hero h1 .ln { display: block; overflow: hidden; padding-bottom: .04em; }
.hero h1 .ln > span { display: block; }
.hero .lede { margin-top: 28px; max-width: 48ch; font-size: clamp(1.125rem, 1.45vw, 1.3rem); line-height: 1.55; color: var(--on-dark-muted); }
.hero .actions { display: flex; flex-wrap: wrap; gap: 12px; margin-top: 36px; }
.hero .actions .btn-light svg { color: var(--navy); }
.doors { border-top: 1px solid rgba(255, 255, 255, .18); }
.doors ol { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); }
.doors li + li { border-left: 1px solid rgba(255, 255, 255, .14); }
.doors a { display: flex; align-items: baseline; gap: 14px; height: 100%; padding: 22px 22px 24px; text-decoration: none; color: inherit; transition: background-color .2s; }
.doors li:first-child a { padding-left: 0; }
.doors a:hover { background: rgba(255, 255, 255, .06); }
.doors .n { font-size: .8rem; font-weight: 600; color: var(--green); font-variant-numeric: tabular-nums; }
.doors strong { flex: 1; color: var(--on-dark); font-size: 1.25rem; font-weight: 620; font-stretch: 88%; letter-spacing: -0.01em; }
.doors svg { width: 18px; height: 18px; align-self: center; transition: transform .2s; }
.doors a:hover svg { transform: translateX(4px); }
/* entrance, once */
.js .hero h1 .ln > span { transform: translateY(104%); }
.js .hero.go h1 .ln > span { transform: none; transition: transform 1s cubic-bezier(.2, .75, .15, 1); }
.js .hero.go h1 .ln:nth-child(2) > span { transition-delay: .12s; }
.js .hero .lede, .js .hero .actions, .js .doors li { opacity: 0; transform: translateY(14px); }
.js .hero.go .lede, .js .hero.go .actions, .js .hero.go .doors li { opacity: 1; transform: none; transition: opacity .8s ease, transform .8s cubic-bezier(.2, .7, .2, 1); }
.js .hero.go .lede { transition-delay: .35s; }
.js .hero.go .actions { transition-delay: .48s; }
.js .hero.go .doors li:nth-child(1) { transition-delay: .62s; }
.js .hero.go .doors li:nth-child(2) { transition-delay: .7s; }
.js .hero.go .doors li:nth-child(3) { transition-delay: .78s; }
.js .hero.go .doors li:nth-child(4) { transition-delay: .86s; }
.js .hero-photo img { transform: scale(1.07); }
.js .hero.go .hero-photo img { transform: none; transition: transform 2.2s cubic-bezier(.2, .6, .2, 1); }

/* ---------- inner page hero ---------- */
.phero { padding: clamp(28px, 4vw, 44px) 0 clamp(56px, 7vw, 88px); border-bottom: 1px solid var(--rule); }
.crumbs ol { display: flex; flex-wrap: wrap; gap: 4px 10px; font-size: .85rem; color: var(--muted); }
.crumbs li + li::before { content: "/"; margin-right: 10px; color: var(--rule-strong); }
.crumbs a { color: var(--muted); text-decoration: none; }
.crumbs a:hover { color: var(--ink); text-decoration: underline; text-decoration-color: var(--green); }
.phero-grid { display: grid; grid-template-columns: minmax(0, 7fr) minmax(0, 5fr); gap: clamp(32px, 5vw, 80px); align-items: end; margin-top: clamp(36px, 5vw, 64px); }
.phero h1 { font-size: clamp(2.7rem, 5.4vw, 4.8rem); font-weight: 660; font-stretch: 80%; letter-spacing: -0.025em; line-height: .97; max-width: 14ch; }
.phero .lede { margin-top: 24px; max-width: 46ch; font-size: clamp(1.1rem, 1.4vw, 1.25rem); line-height: 1.55; }
.phero .actions { display: flex; flex-wrap: wrap; gap: 12px; margin-top: 30px; }

/* inner page hero with a photo running off the right edge */
.phero.with-photo { position: relative; overflow: hidden; padding-bottom: clamp(44px, 5vw, 64px); }
.phero-photo { position: absolute; top: 0; right: 0; bottom: 0; width: 44%; margin: 0; background: #cfd3da; }
.phero-photo img { width: 100%; height: 100%; object-fit: cover; }
.phero-text { max-width: 54%; margin-top: clamp(32px, 4.5vw, 56px); }
.phero.with-photo h1 { max-width: 12ch; }
.phero-text .lede { max-width: 36ch; }
.phero .terms { max-width: 54%; margin-top: clamp(40px, 5vw, 64px); }
.phero.plain .phero-text { max-width: 760px; }
.phero.plain .terms { max-width: 760px; }

/* ---------- section scaffolding ---------- */
.sec { padding: clamp(72px, 9vw, 124px) 0; }
.sec-tight { padding: clamp(56px, 7vw, 96px) 0; }
.sec-white { background: var(--white); }
.sec h2, .sec-tight h2 { font-size: clamp(2.1rem, 3.8vw, 3.3rem); }
.intro { max-width: 660px; }
.intro p { margin-top: 18px; font-size: 1.125rem; }
.split { display: grid; grid-template-columns: minmax(0, 5fr) minmax(0, 7fr); gap: clamp(36px, 6vw, 96px); align-items: start; }
.split > .intro { position: sticky; top: calc(var(--head) + 40px); }
.lead { font-size: 1.2rem; color: var(--ink); font-weight: 520; line-height: 1.45; }
.prose { max-width: 70ch; }
.prose > * + * { margin-top: 16px; }
.prose h2 { font-size: clamp(1.6rem, 2.6vw, 2.1rem); margin-top: 44px; }
.prose ul { padding-left: 0; }
.prose ul li { position: relative; padding-left: 22px; margin-top: 8px; }
.prose ul li::before { content: ""; position: absolute; left: 0; top: .78em; width: 10px; height: 2px; background: var(--green); }
.source { margin-top: 18px; font-size: .82rem; color: var(--muted); line-height: 1.5; }
.source a { color: var(--muted); text-underline-offset: 2px; }


/* term-sheet figures */
.terms { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); margin-top: 36px; border-top: 1.5px solid var(--ink); }
.terms div { padding: 18px 18px 22px 0; }
.terms div + div { padding-left: 18px; border-left: 1px solid var(--rule); }
.terms dt { font-size: clamp(1.5rem, 2.2vw, 2rem); font-weight: 640; font-stretch: 82%; color: var(--ink); line-height: 1.1; font-variant-numeric: tabular-nums lining-nums; }
.terms dd { margin: 8px 0 0; font-size: .9rem; line-height: 1.45; color: var(--muted); }

/* short points, two by two */
.points { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 0 clamp(28px, 4vw, 56px); }
.points li { padding: 24px 0 26px; border-top: 1.5px solid var(--ink); }
.points .n { display: block; font-size: .85rem; font-weight: 600; color: var(--green-ink); font-variant-numeric: tabular-nums; margin-bottom: 10px; }
.points h3 { font-size: clamp(1.35rem, 2vw, 1.6rem); font-weight: 640; font-stretch: 86%; line-height: 1.15; }
.points p { margin-top: 8px; color: var(--muted); }

/* a full-width photo with one line on it */
.band { position: relative; isolation: isolate; overflow: hidden; color: var(--on-dark); background: var(--deep); }
.band > img { position: absolute; inset: 0; z-index: -1; width: 100%; height: 100%; object-fit: cover; object-position: 50% 60%; }
.band::before { content: ""; position: absolute; inset: 0; z-index: -1; background: linear-gradient(90deg, rgba(17, 20, 58, .82) 0%, rgba(17, 20, 58, .6) 40%, rgba(17, 20, 58, .1) 80%); }
.band .wrap { min-height: clamp(380px, 42vw, 560px); display: flex; flex-direction: column; justify-content: center; padding-top: 72px; padding-bottom: 72px; }
.band blockquote { margin: 18px 0 0; }
.band blockquote p { max-width: 22ch; font-size: clamp(1.9rem, 3.6vw, 3.2rem); font-weight: 600; font-stretch: 84%; line-height: 1.1; letter-spacing: -0.02em; color: var(--on-dark); }
.band figcaption { margin-top: 20px; font-size: .95rem; color: var(--on-dark-muted); }
.band figcaption b { color: var(--on-dark); font-weight: 600; }
.band .link-arrow { margin-top: 26px; align-self: flex-start; }

/* start and visit, together */
.start-grid { display: grid; grid-template-columns: minmax(0, 6fr) minmax(0, 5fr); gap: clamp(36px, 6vw, 96px); align-items: center; }
.start-grid .actions { display: flex; flex-wrap: wrap; gap: 12px; margin-top: 30px; }
.start-grid .office { margin: 0; }
.start-grid .office figcaption { color: var(--on-dark-muted); }
.start-grid .portal { margin-top: 28px; }

/* a short list in two columns */
.know.cols ul { columns: 2; column-gap: 40px; }
.know.cols li { break-inside: avoid; }

.know { font-size: .95rem; }
.know h4 { margin: 0 0 10px; font-size: .8rem; font-weight: 600; letter-spacing: .06em; text-transform: uppercase; color: var(--muted); font-stretch: 100%; }
.know li { padding: 10px 0 10px 22px; border-top: 1px solid var(--rule); position: relative; line-height: 1.45; }
.know li::before { content: ""; position: absolute; left: 0; top: 18px; width: 10px; height: 2px; background: var(--green); }

/* steps */
.steps { display: grid; grid-template-columns: repeat(var(--cols, 3), minmax(0, 1fr)); margin-top: 48px; counter-reset: s; }
.steps li { position: relative; padding: 22px 26px 0 0; border-top: 2px solid var(--rule-strong); }
.steps li::before { counter-increment: s; content: "0" counter(s); display: block; font-size: .85rem; font-weight: 600; color: var(--green-ink); margin-bottom: 8px; font-variant-numeric: tabular-nums; }
.steps li::after { content: ""; position: absolute; left: 0; top: -2px; height: 2px; width: 0; background: var(--green); }
.steps.in li::after { width: 100%; transition: width .9s cubic-bezier(.3, .6, .2, 1); }
.steps.in li:nth-child(2)::after { transition-delay: .3s; }
.steps.in li:nth-child(3)::after { transition-delay: .6s; }
.steps.in li:nth-child(4)::after { transition-delay: .9s; }
.steps.in li:nth-child(5)::after { transition-delay: 1.2s; }
.steps b { display: block; color: var(--ink); font-weight: 600; font-size: 1.1rem; }
.steps span { display: block; margin-top: 6px; font-size: .95rem; line-height: 1.5; max-width: 32ch; }
.on-dark .steps li { border-top-color: rgba(255, 255, 255, .22); }
.on-dark .steps li::before { color: var(--green); }
.on-dark .steps b { color: var(--on-dark); }
.on-dark .steps span { color: var(--on-dark-muted); }

/* comparison table */
.compare-wrap { margin-top: 36px; overflow-x: auto; }
.compare { width: 100%; border-collapse: collapse; font-size: .97rem; background: var(--white); }
.compare caption { text-align: left; font-size: .85rem; color: var(--muted); padding-bottom: 10px; }
.compare th, .compare td { text-align: left; vertical-align: top; padding: 14px 16px; border-bottom: 1px solid var(--rule); line-height: 1.45; }
.compare thead th { font-size: .8rem; font-weight: 600; letter-spacing: .05em; text-transform: uppercase; color: var(--muted); border-bottom: 1.5px solid var(--ink); background: var(--paper); }
.compare tbody th { color: var(--ink); font-weight: 620; width: 22%; }
.compare td.fig { font-weight: 620; color: var(--ink); font-variant-numeric: tabular-nums; white-space: nowrap; }

/* timeline */
.timeline { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); margin-top: 40px; border-top: 2px solid var(--ink); }
.timeline li { padding: 20px 24px 0 0; position: relative; }
.timeline li::before { content: ""; position: absolute; top: -7px; left: 0; width: 12px; height: 12px; background: var(--green); border: 2px solid var(--paper); }
.timeline .when { display: block; font-size: 1.6rem; font-weight: 640; font-stretch: 84%; color: var(--ink); line-height: 1.1; font-variant-numeric: tabular-nums; }
.timeline .what { display: block; margin-top: 8px; font-size: .97rem; max-width: 34ch; }

/* document checklist */
.checklist { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 0 48px; margin-top: 36px; }
.checklist section { padding: 22px 0; border-top: 1.5px solid var(--ink); }
.checklist h3 { font-size: 1.2rem; font-weight: 620; font-stretch: 90%; }
.checklist li { position: relative; padding: 8px 0 8px 28px; border-bottom: 1px solid var(--rule); font-size: .97rem; }
.checklist li::before { content: ""; position: absolute; left: 0; top: 13px; width: 14px; height: 14px; border: 1.5px solid var(--navy); border-radius: 2px; }
.checklist ul { margin-top: 10px; }

/* ---------- calculators ---------- */
.calc { display: grid; grid-template-columns: minmax(0, 5fr) minmax(0, 7fr); background: var(--white); border: 1px solid var(--rule); border-radius: 4px; overflow: hidden; margin-top: 40px; }
.calc-in { padding: clamp(24px, 3vw, 40px); display: grid; gap: 24px; align-content: start; border-right: 1px solid var(--rule); }
.fld { display: grid; grid-template-columns: minmax(0, 1fr); gap: 8px; }
.fld > label, .seg legend { font-size: .875rem; font-weight: 600; color: var(--ink); }
.inp { display: flex; align-items: center; border: 1px solid var(--rule-strong); border-radius: 2px; background: var(--white); transition: border-color .2s, box-shadow .2s; }
.inp:focus-within { border-color: var(--navy); box-shadow: 0 0 0 3px rgba(36, 48, 108, .12); }
.inp input { flex: 1 1 0; width: 0; min-width: 0; border: 0; outline: 0; background: transparent; font: inherit; font-size: 1.15rem; font-weight: 560; color: var(--ink); padding: 12px 14px; font-variant-numeric: tabular-nums lining-nums; }
.inp .u { padding: 0 14px; color: var(--muted); font-weight: 520; }
.inp .u:first-child { padding-right: 0; }
.row2 { display: grid; grid-template-columns: minmax(0, 1.6fr) minmax(0, 1fr); gap: 10px; }
.fld small, .fld .hint { font-size: .85rem; color: var(--muted); line-height: 1.45; }
.fld .hint.bad { color: #a3341f; font-weight: 560; }
.check { display: flex; gap: 12px; align-items: flex-start; font-size: .95rem; color: var(--ink); cursor: pointer; }
.check input { width: 20px; height: 20px; margin: 2px 0 0; accent-color: var(--navy); flex: none; }
input[type="range"] { -webkit-appearance: none; appearance: none; width: 100%; height: 24px; background: transparent; margin: 2px 0 0; }
input[type="range"]::-webkit-slider-runnable-track { height: 3px; background: linear-gradient(var(--navy), var(--navy)) 0 / var(--fill, 10%) 100% no-repeat, var(--rule); }
input[type="range"]::-moz-range-track { height: 3px; background: var(--rule); }
input[type="range"]::-moz-range-progress { height: 3px; background: var(--navy); }
input[type="range"]::-webkit-slider-thumb { -webkit-appearance: none; width: 18px; height: 18px; margin-top: -7.5px; border-radius: 2px; background: var(--navy); border: 3px solid var(--white); box-shadow: 0 0 0 1px var(--navy); cursor: pointer; }
input[type="range"]::-moz-range-thumb { width: 14px; height: 14px; border-radius: 2px; background: var(--navy); border: 3px solid var(--white); box-shadow: 0 0 0 1px var(--navy); cursor: pointer; }
.seg { border: 0; margin: 0; padding: 0; min-width: 0; }
.seg legend { padding: 0; margin-bottom: 8px; }
.seg .opts { display: grid; grid-auto-flow: column; grid-auto-columns: 1fr; border: 1px solid var(--rule-strong); border-radius: 2px; }
.seg label { position: relative; }
.seg label + label { border-left: 1px solid var(--rule-strong); }
.seg input { position: absolute; opacity: 0; inset: 0; margin: 0; cursor: pointer; }
.seg label > span { display: flex; align-items: center; justify-content: center; text-align: center; min-height: 46px; padding: 6px 8px; font-size: .92rem; font-weight: 540; color: var(--ink); line-height: 1.2; transition: background-color .15s, color .15s; }
.seg input:checked + span { background: var(--navy); color: var(--white); }
.seg input:focus-visible + span { outline: 2px solid var(--green); outline-offset: -4px; }
.calc-out { padding: clamp(24px, 3vw, 40px); background: var(--tint); display: grid; gap: 22px; align-content: start; }
.pay-label { font-size: .875rem; font-weight: 600; color: var(--muted); }
.pay { font-size: clamp(2.6rem, 4.6vw, 4rem); font-weight: 650; font-stretch: 84%; color: var(--ink); line-height: 1; letter-spacing: -0.02em; font-variant-numeric: tabular-nums lining-nums; margin-top: 6px; transition: opacity .2s; }
.pay.dim { opacity: .35; }
.pay.good { color: var(--green-ink); }
.warn { padding: 12px 14px; border-left: 3px solid #c2502b; background: #fbeee8; color: #6e2412; font-size: .93rem; line-height: 1.45; }
.sheet { margin: 0; border-top: 1.5px solid var(--ink); }
.sheet div { display: flex; justify-content: space-between; align-items: baseline; gap: 16px; padding: 10px 0; border-bottom: 1px solid var(--rule-strong); }
.sheet dt { font-size: .95rem; }
.sheet dt span { color: var(--muted); }
.sheet dd { margin: 0; font-weight: 600; color: var(--ink); font-variant-numeric: tabular-nums lining-nums; text-align: right; }
.sheet .total dt, .sheet .total dd { font-weight: 650; color: var(--ink); }
.curve { margin: 0; }
.plot { position: relative; height: 150px; border-bottom: 1.5px solid var(--ink); margin-top: 18px; }
.plot svg { position: absolute; inset: 0; width: 100%; height: 100%; overflow: visible; }
.plot .term { fill: rgba(144, 180, 48, .16); }
.plot .term-line { stroke: var(--green); stroke-width: 2; }
.plot .area { fill: rgba(36, 48, 108, .09); }
.plot .line { fill: none; stroke: var(--navy); stroke-width: 2.25; stroke-linejoin: round; }
.plot .y0 { position: absolute; left: 0; top: -2px; transform: translateY(-100%); font-size: .8rem; font-weight: 600; color: var(--ink); font-variant-numeric: tabular-nums; }
.js .plot svg { clip-path: inset(0 100% 0 0); }
.js .plot.drawn svg { clip-path: inset(0 0 0 0); transition: clip-path 1.4s cubic-bezier(.3, .6, .2, 1); }
.axis { position: relative; height: 22px; margin-top: 6px; font-size: .8rem; color: var(--muted); font-variant-numeric: tabular-nums; }
.axis span { position: absolute; top: 0; white-space: nowrap; }
.axis .a0 { left: 0; }
.axis .a5 { transform: translateX(-50%); color: var(--green-ink); font-weight: 600; }
.axis .aN { right: 0; }
.curve figcaption { margin-top: 6px; font-size: .85rem; color: var(--muted); }
.bars { display: grid; gap: 10px; margin-top: 4px; }
.bar { display: grid; grid-template-columns: 9.5em 1fr; gap: 12px; align-items: center; font-size: .88rem; }
.bar .track { height: 14px; background: var(--white); }
.bar .fill { height: 100%; width: 0; background: var(--navy); transition: width .5s cubic-bezier(.3, .6, .2, 1); }
.bar.b .fill { background: var(--green); }
.fine { font-size: .85rem; color: var(--muted); line-height: 1.5; }
.calc-foot { display: flex; flex-wrap: wrap; justify-content: space-between; align-items: center; gap: 20px; margin-top: 26px; }
.calc-foot p { max-width: 64ch; font-size: .9rem; color: var(--muted); }

/* ---------- team ---------- */
.lead-person .portrait { margin: 0; width: min(100%, 300px); }
.lead-person .portrait img { width: 100%; aspect-ratio: 301 / 376; object-fit: cover; background: #c9cbd1; }
.lead-person h3 { margin-top: 22px; font-size: 1.6rem; font-weight: 640; font-stretch: 86%; }
.role { margin-top: 4px; font-size: .92rem; color: var(--muted); }
.role span { font-variant-numeric: tabular-nums; white-space: nowrap; }
.lead-person .bio { margin-top: 14px; max-width: 50ch; }
.lead-person .bio p + p { margin-top: 12px; }
.reach { display: flex; flex-wrap: wrap; gap: 6px 18px; margin-top: 12px; font-size: .95rem; }
.reach a { color: var(--navy); font-weight: 560; text-decoration: none; border-bottom: 1px solid var(--rule-strong); }
.reach a:hover { border-bottom-color: var(--green); }
.roster-head { margin-bottom: 8px; font-size: .8rem; font-weight: 600; letter-spacing: .06em; text-transform: uppercase; color: var(--muted); }
.roster li { display: grid; grid-template-columns: 104px 1fr; gap: 22px; padding: 26px 0; border-top: 1px solid var(--rule); }
.roster li:last-child { border-bottom: 1px solid var(--rule); }
.roster img { width: 104px; height: 104px; object-fit: cover; background: #d7d8dd; }
.roster h3 { font-size: 1.3rem; font-weight: 630; font-stretch: 88%; }
.roster .about { margin-top: 8px; font-size: .98rem; max-width: 60ch; }
.roster .about + .about { margin-top: 8px; }
.faces { display: grid; grid-template-columns: repeat(5, minmax(0, 1fr)); gap: 14px; margin-top: 40px; }
.faces a { display: block; text-decoration: none; }
.faces img { width: 100%; aspect-ratio: 1; object-fit: cover; background: #d7d8dd; transition: filter .3s; }
.faces a:hover img { filter: brightness(1.05); }
.faces b { display: block; margin-top: 12px; font-size: 1.05rem; font-weight: 620; color: var(--ink); }
.faces span { display: block; font-size: .85rem; color: var(--muted); }
.values { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); margin-top: 40px; border-top: 1.5px solid var(--ink); }
.values div { padding: 22px 28px 0 0; }
.values div + div { padding-left: 28px; border-left: 1px solid var(--rule); }
.values h3 { font-size: 1.4rem; font-weight: 640; font-stretch: 86%; }
.values p { margin-top: 8px; font-size: .98rem; }

/* ---------- reviews ---------- */
.reviews-grid { display: grid; grid-template-columns: minmax(0, 7fr) minmax(0, 5fr); gap: clamp(36px, 6vw, 88px); align-items: start; }
.reviews-grid .featured { position: sticky; top: calc(var(--head) + 40px); }
.reviews-grid h2 { margin-bottom: 36px; }
.stars { display: inline-block; width: 92px; height: 16px; background: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 20 20'%3E%3Cpath fill='%2390b430' d='M10 1.5l2.6 5.6 6.1.7-4.5 4.2 1.2 6L10 15l-5.4 3 1.2-6L1.3 7.8l6.1-.7z'/%3E%3C/svg%3E") 0 0 / 18.4px 16px repeat-x; }
.quote { margin: 0; }
.quote blockquote { margin: 14px 0 0; }
.quote.big blockquote p { font-size: clamp(1.45rem, 2.4vw, 2.05rem); line-height: 1.32; color: var(--ink); font-weight: 520; font-stretch: 92%; letter-spacing: -0.01em; }
.quote figcaption { margin-top: 16px; font-size: .92rem; color: var(--muted); }
.quote figcaption b { font-weight: 600; }
.quote-list li { padding: 24px 0; border-top: 1px solid var(--rule); }
.quote-list li:last-child { border-bottom: 1px solid var(--rule); }
.quote-list blockquote p { font-size: 1rem; line-height: 1.55; }
.links { display: flex; flex-wrap: wrap; gap: 14px 28px; margin-top: 36px; }

/* ---------- community ---------- */
.facts { display: grid; gap: 18px; }
.facts p { padding-left: 18px; border-left: 2px solid var(--green); }
figcaption.cap { padding-top: 10px; font-size: .85rem; color: var(--muted); }
.two-up { display: grid; grid-template-columns: minmax(0, 6fr) minmax(0, 6fr); gap: clamp(32px, 5vw, 72px); align-items: end; }

/* ---------- dark band: get started and the closing call ---------- */
.on-dark { background: var(--deep); color: var(--on-dark); }
.on-dark h2, .on-dark h3 { color: var(--on-dark); }
.on-dark .intro p, .on-dark p { color: var(--on-dark-muted); }
.portal { margin-top: 44px; font-size: .95rem; }
.portal a { color: var(--on-dark); text-decoration-color: var(--green); text-underline-offset: 3px; }
.cta-band .wrap { display: grid; grid-template-columns: minmax(0, 7fr) minmax(0, 5fr); gap: 32px; align-items: end; padding-top: clamp(56px, 7vw, 88px); padding-bottom: clamp(56px, 7vw, 88px); }
.cta-band h2 { font-size: clamp(2rem, 3.6vw, 3rem); }
.cta-band p { margin-top: 14px; max-width: 46ch; }
.cta-band .actions { display: flex; flex-wrap: wrap; gap: 12px; justify-content: flex-end; }

/* ---------- related pages ---------- */
.related { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); margin-top: 32px; border-top: 1.5px solid var(--ink); }
.related a { display: block; padding: 22px 26px 26px 0; text-decoration: none; color: inherit; }
.related li + li a { padding-left: 26px; }
.related li + li { border-left: 1px solid var(--rule); }
.related b { display: flex; align-items: center; justify-content: space-between; gap: 12px; font-size: 1.25rem; font-weight: 630; font-stretch: 88%; color: var(--ink); }
.related b svg { width: 18px; height: 18px; flex: none; color: var(--navy); transition: transform .2s; }
.related a:hover b svg { transform: translateX(4px); }
.related a:hover b { text-decoration: underline; text-decoration-color: var(--green); text-underline-offset: 4px; }
.related span { display: block; margin-top: 8px; font-size: .95rem; color: var(--muted); }

/* ---------- FAQ ---------- */
.faq { margin-top: 32px; border-top: 1.5px solid var(--ink); }
.q { border-bottom: 1px solid var(--rule); }
.q summary { display: flex; justify-content: space-between; align-items: center; gap: 24px; padding: 20px 0; cursor: pointer; list-style: none; font-size: 1.15rem; font-weight: 600; color: var(--ink); line-height: 1.35; }
.q summary::-webkit-details-marker { display: none; }
.q summary:hover { color: var(--navy); }
.pm { position: relative; width: 16px; height: 16px; flex: none; }
.pm::before, .pm::after { content: ""; position: absolute; left: 0; top: 7px; width: 16px; height: 2px; background: var(--navy); transition: transform .2s; }
.pm::after { transform: rotate(90deg); }
.q[open] .pm::after { transform: rotate(0); }
.q-a { padding: 0 0 22px; max-width: 72ch; }
.q-a p + p { margin-top: 10px; }
.q-a a { color: var(--navy); text-decoration-color: var(--green); text-underline-offset: 3px; }

/* ---------- visit and contact ---------- */
.visit-grid { display: grid; grid-template-columns: minmax(0, 6fr) minmax(0, 6fr); gap: clamp(36px, 5vw, 80px); align-items: start; }
.office { margin: 28px 0 0; }
.office img { width: 100%; aspect-ratio: 1556 / 1060; object-fit: cover; background: #9aa7b8; }
.details { margin: 28px 0 0; display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); border-top: 1.5px solid var(--ink); }
.details div { padding: 16px 16px 16px 0; border-bottom: 1px solid var(--rule); }
.details div:nth-child(even) { padding-left: 16px; border-left: 1px solid var(--rule); }
.details dt { font-size: .8rem; font-weight: 600; letter-spacing: .06em; text-transform: uppercase; color: var(--muted); }
.details dd { margin: 6px 0 0; color: var(--ink); font-weight: 520; line-height: 1.45; }
.details dd a { color: var(--navy); text-decoration-color: var(--rule-strong); text-underline-offset: 3px; }
.dir { margin-top: 22px; }
.form { background: var(--white); border: 1px solid var(--rule); border-radius: 4px; padding: clamp(24px, 3vw, 40px); display: grid; gap: 18px; }
.form h2, .form h3 { font-size: 1.6rem; font-weight: 630; font-stretch: 88%; }
.form > p { color: var(--muted); font-size: .98rem; margin-top: -6px; }
.form .pair { display: grid; grid-template-columns: 1fr 1fr; gap: 14px; }
.form label { display: grid; gap: 6px; font-size: .875rem; font-weight: 600; color: var(--ink); }
.form input, .form select, .form textarea { width: 100%; font: inherit; font-size: 1rem; font-weight: 450; color: var(--ink); background: var(--white); border: 1px solid var(--rule-strong); border-radius: 2px; padding: 12px 14px; }
.form input:focus, .form select:focus, .form textarea:focus { outline: 0; border-color: var(--navy); box-shadow: 0 0 0 3px rgba(36, 48, 108, .12); }
.form textarea { min-height: 120px; resize: vertical; }
.form .btn { justify-self: start; }
.preview-note { font-size: .88rem; color: var(--muted); padding: 10px 12px; background: var(--tint); border-left: 3px solid var(--rule-strong); }
.preview-note.flash { border-left-color: var(--green); color: var(--ink); }

/* ---------- footer and phone dock ---------- */
.site-foot { background: var(--deep); color: var(--on-dark-muted); font-size: .92rem; padding: 64px 0 28px; border-top: 1px solid rgba(255, 255, 255, .08); }
.site-foot .cols { display: grid; grid-template-columns: minmax(0, 4fr) repeat(3, minmax(0, 3fr)); gap: 40px; }
.site-foot .name { color: var(--on-dark); font-size: 1.35rem; font-weight: 640; font-stretch: 86%; }
.site-foot p + p { margin-top: 8px; }
.site-foot h2 { margin: 0 0 12px; color: var(--on-dark); font-size: .8rem; font-weight: 600; letter-spacing: .06em; text-transform: uppercase; font-stretch: 100%; }
.site-foot li + li { margin-top: 6px; }
.site-foot a { color: var(--on-dark); text-decoration: none; }
.site-foot a:hover { text-decoration: underline; text-decoration-color: var(--green); }
.site-foot .base { display: flex; flex-wrap: wrap; justify-content: space-between; gap: 10px 24px; margin-top: 48px; padding-top: 22px; border-top: 1px solid rgba(255, 255, 255, .14); font-size: .82rem; }
.dock { display: none; }

/* ---------- reveal once on scroll ---------- */
.js .rv { opacity: 0; transform: translateY(18px); }
.js .rv.in { opacity: 1; transform: none; transition: opacity .7s ease, transform .7s cubic-bezier(.2, .7, .2, 1); }

@media (prefers-reduced-motion: reduce) {
  html { scroll-behavior: auto; }
  .js .rv, .js .rv.in { opacity: 1; transform: none; transition: none; }
  .js .hero h1 .ln > span, .js .hero .lede, .js .hero .actions, .js .doors li, .js .hero-photo img { opacity: 1; transform: none; transition: none; }
  .js .plot svg { clip-path: none; transition: none; }
  .steps li::after { width: 100%; transition: none; }
}

/* the header nav collapses before it would wrap */
@media (max-width: 1180px) {
  .menu-btn { display: inline-flex; align-items: center; gap: 10px; min-height: 44px; padding: 0 14px; background: transparent; border: 1.5px solid var(--navy); border-radius: 2px; font: inherit; font-weight: 600; color: var(--navy); cursor: pointer; }
  .menu-btn i { display: block; width: 18px; height: 2px; background: currentColor; position: relative; }
  .menu-btn i::before, .menu-btn i::after { content: ""; position: absolute; left: 0; width: 18px; height: 2px; background: currentColor; transition: transform .2s; }
  .menu-btn i::before { top: -6px; }
  .menu-btn i::after { top: 6px; }
  .menu-open .menu-btn i { background: transparent; }
  .menu-open .menu-btn i::before { transform: translateY(6px) rotate(45deg); }
  .menu-open .menu-btn i::after { transform: translateY(-6px) rotate(-45deg); }
  .nav { position: absolute; left: 0; right: 0; top: 100%; display: none; flex-direction: column; align-items: stretch; gap: 0; background: var(--white); border-bottom: 1px solid var(--rule); padding: 8px var(--gut) 24px; box-shadow: 0 18px 30px -24px rgba(17, 20, 58, .5); max-height: calc(100vh - var(--head)); overflow-y: auto; }
  .menu-open .nav { display: flex; }
  .nav ul { flex-direction: column; gap: 0; }
  .nav ul a { display: block; padding: 14px 0; border-bottom: 1px solid var(--rule); font-size: 1.1rem; }
  .nav ul a[aria-current="page"] { border-bottom-color: var(--rule); color: var(--navy); }
  .nav .btn { margin-top: 18px; min-height: 52px; }
}
@media (max-width: 1180px) {
  /* keep the lede on the dark side of the fade */
  .hero .lede { max-width: 36ch; }
}
@media (max-width: 1080px) {
  .doors ol { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .doors li:nth-child(3) { border-left: 0; }
  .doors li:nth-child(n+3) { border-top: 1px solid rgba(255, 255, 255, .14); }
  .doors li:nth-child(3) a { padding-left: 0; }
  .faces { grid-template-columns: repeat(3, minmax(0, 1fr)); }
}
@media (max-width: 960px) {
  .hero-photo { position: relative; inset: auto; width: 100%; aspect-ratio: 16 / 10; z-index: 0; }
  .hero-photo img { object-position: 50% 55%; }
  .hero-photo::after { background: linear-gradient(0deg, var(--deep) 0%, rgba(17, 20, 58, .4) 30%, rgba(17, 20, 58, 0) 60%); }
  .hero-main { min-height: 0; padding-top: 4px; padding-bottom: 44px; margin-top: -48px; position: relative; }
  .phero-grid, .split, .reviews-grid, .visit-grid, .two-up, .cta-band .wrap, .start-grid { grid-template-columns: 1fr; }
  .phero.with-photo { padding-top: 0; }
  .phero-photo { position: relative; width: 100%; aspect-ratio: 16 / 10; }
  .phero.with-photo .crumbs { padding-top: 20px; }
  .phero-text, .phero .terms, .phero.plain .phero-text, .phero.plain .terms { max-width: none; }
  .phero-text { margin-top: 18px; }
  .points { grid-template-columns: 1fr; }
  .split > .intro, .reviews-grid .featured { position: static; }
  .cta-band .actions { justify-content: flex-start; }
  .calc { grid-template-columns: minmax(0, 1fr); }
  .calc-in { border-right: 0; border-bottom: 1px solid var(--rule); }
  .site-foot .cols { grid-template-columns: 1fr 1fr; }
  .site-foot .cols > div:first-child { grid-column: 1 / -1; }
  .steps { --cols: 2 !important; gap: 28px 0; }
  .related { grid-template-columns: 1fr; }
  .related li + li { border-left: 0; border-top: 1px solid var(--rule); }
  .related li + li a { padding-left: 0; }
}
@media (max-width: 700px) {
  :root { --head: 64px; }
  body { padding-bottom: 72px; }
  .topbar .hours, .topbar .portal-link, .topbar .lic-long { display: none; }
  .brand img { width: 164px; }
  .doors ol { grid-template-columns: 1fr; }
  .doors li + li, .doors li:nth-child(3) { border-left: 0; border-top: 1px solid rgba(255, 255, 255, .14); }
  .doors a, .doors li:first-child a, .doors li:nth-child(3) a { padding: 18px 0; }
  .hero .actions .btn { flex: 1 1 100%; }
  .terms { grid-template-columns: 1fr; }
  .terms div, .terms div + div { padding: 16px 0; border-left: 0; }
  .terms div + div { border-top: 1px solid var(--rule); }
  /* the hero figures stay three across, just smaller */
  .phero .terms { grid-template-columns: repeat(3, minmax(0, 1fr)); }
  .phero .terms div, .phero .terms div + div { padding: 14px 10px 0 0; border-top: 0; }
  .phero .terms div + div { padding-left: 10px; border-left: 1px solid var(--rule); }
  .phero .terms dt { font-size: 1.3rem; }
  .phero .terms dd { font-size: .8rem; }
  .know.cols ul { columns: 1; }
  .values, .checklist, .timeline { grid-template-columns: 1fr; }
  .values div, .values div + div { padding: 20px 0; border-left: 0; }
  .values div + div { border-top: 1px solid var(--rule); }
  .timeline { border-top: 0; border-left: 2px solid var(--ink); margin-left: 6px; }
  .timeline li { padding: 4px 0 24px 22px; }
  .timeline li::before { top: 8px; left: -7px; }
  .steps { --cols: 2 !important; gap: 22px 18px; }
  .steps li { padding-right: 0; }
  .details { grid-template-columns: 1fr; }
  .details div:nth-child(even) { padding-left: 0; border-left: 0; }
  .form .pair, .row2.stack { grid-template-columns: 1fr; }
  .roster li { grid-template-columns: 76px 1fr; gap: 16px; }
  .roster img { width: 76px; height: 76px; }
  .faces { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .seg label > span { font-size: .85rem; }
  /* comparison tables stack into labelled rows */
  .compare-wrap { overflow: visible; }
  .compare thead { position: absolute; width: 1px; height: 1px; overflow: hidden; clip: rect(0 0 0 0); }
  .compare, .compare tbody, .compare tr, .compare th, .compare td { display: block; width: 100%; }
  .compare caption { display: block; }
  .compare tr { border-top: 1.5px solid var(--ink); padding: 4px 0 12px; }
  .compare tbody th { width: auto; padding: 14px 14px 6px; border-bottom: 0; font-size: 1.08rem; }
  .compare td { display: grid; grid-template-columns: 8.5em 1fr; gap: 12px; padding: 6px 14px; border-bottom: 0; }
  .compare td::before { content: attr(data-label); font-size: .78rem; font-weight: 600; letter-spacing: .04em; text-transform: uppercase; color: var(--muted); padding-top: 2px; }
  .compare td.fig { white-space: normal; }
  .site-foot .cols { grid-template-columns: 1fr; }
  .dock { display: grid; grid-template-columns: 1fr 1fr; gap: 8px; position: fixed; left: 0; right: 0; bottom: 0; z-index: 50; padding: 10px 12px calc(10px + env(safe-area-inset-bottom)); background: var(--white); border-top: 1px solid var(--rule); }
  .dock .btn { min-height: 48px; padding: 0 12px; }
}