/* ==========================================================================
   Hannah Blevins · The Blevins Collective — site stylesheet
   Direction: "Boutique" (ivory / stone / espresso, one lake-water accent)
   Fonts: Fraunces (display) · Instrument Sans (body) · DM Mono (labels)
   ========================================================================== */

:root{
  --bg:#F8F4ED; --bg-2:#EFE8DC; --mat:#E6DCCC;
  --ink:#2A1F17; --ink-2:#6F6259; --line:rgba(42,31,23,.16);
  --dark:#2A1F17; --dark-2:#352921; --dark-ink:#F8F4ED; --dark-ink-2:#C9BDB0; --dark-line:rgba(248,244,237,.16);
  --accent:#2F5F5C; --accent-ink:#F8F4ED; --accent-soft:rgba(47,95,92,.14);
  --accent-on-dark:#8FC3BE;
  --sl-warn:#8A3B2A;                      /* /second-look/ upload validation — the palette has no red */
  --sl-edge:rgba(42,31,23,.52);           /* /second-look/ dropzone + file chips. --line is 1.36:1 on --bg-2
                                             and fails WCAG 1.4.11 (3:1) for a control boundary; this is 3.2:1. */               /* accent text on espresso — the teal itself fails contrast there */
  --font-display:"Fraunces","Iowan Old Style","Palatino Linotype",Georgia,serif;
  --font-body:"Instrument Sans","Helvetica Neue",Arial,sans-serif;
  --font-mono:"DM Mono","SFMono-Regular",Menlo,Consolas,monospace;
  --radius:6px; --radius-lg:14px; --btn-radius:999px;
  --nav-h:76px;
  color-scheme:light;
}

/* ---------- base ---------- */
*{box-sizing:border-box}
html{scroll-behavior:smooth;overflow-x:clip;-webkit-text-size-adjust:100%}
@media (prefers-reduced-motion:reduce){ html{scroll-behavior:auto} *,*::before,*::after{transition:none!important;animation:none!important} }
body{margin:0;background:var(--bg);color:var(--ink);font-family:var(--font-body);font-size:17px;line-height:1.55;-webkit-font-smoothing:antialiased}
img{max-width:100%;height:auto;display:block}
a{color:inherit}
h1,h2,h3,.display{font-family:var(--font-display);font-weight:400;letter-spacing:-.02em;line-height:1.05;margin:0;text-wrap:balance;font-variation-settings:"SOFT" 60,"opsz" 144}
h2{font-size:clamp(30px,3.6vw,46px)}
h3{font-size:clamp(21px,2vw,26px);line-height:1.15}
p{margin:0}
.wrap{width:min(1240px,100% - 2*clamp(20px,5vw,64px));margin-inline:auto}
.eyebrow{font-family:var(--font-mono);font-size:12px;letter-spacing:.14em;text-transform:uppercase;color:var(--accent);margin-bottom:18px}
.dark .eyebrow{color:var(--accent-on-dark)}
.lede{font-size:clamp(18px,1.4vw,20px);color:var(--ink-2);max-width:60ch}
.mono{font-family:var(--font-mono);font-variant-numeric:tabular-nums}
section{position:relative;padding-block:clamp(56px,8vw,112px)}
section.tight{padding-block:clamp(36px,5vw,64px)}
.dark{background:var(--dark);color:var(--dark-ink)}
.dark .lede{color:var(--dark-ink-2)}
.alt{background:var(--bg-2)}
.sec-head{display:grid;grid-template-columns:minmax(0,1.1fr) minmax(0,.9fr);gap:32px;align-items:end;margin-bottom:clamp(32px,4vw,56px)}
.sec-head .lede{justify-self:end;max-width:44ch}
@media (max-width:820px){ .sec-head{grid-template-columns:1fr} .sec-head .lede{justify-self:start} }
.visually-hidden{position:absolute!important;width:1px;height:1px;padding:0;margin:-1px;overflow:hidden;clip:rect(0,0,0,0);white-space:nowrap;border:0}
.skip{position:absolute;left:16px;top:-60px;z-index:100;background:var(--accent);color:var(--accent-ink);padding:10px 14px;border-radius:var(--btn-radius);font-weight:600;text-decoration:none}
.skip:focus{top:12px}
:focus-visible{outline:2px solid var(--accent);outline-offset:3px}
.dark :focus-visible{outline-color:var(--accent-on-dark)}

/* ---------- buttons ---------- */
.btn{display:inline-flex;align-items:center;gap:10px;white-space:nowrap;padding:14px 22px;border:1.5px solid var(--ink);border-radius:var(--btn-radius);font:600 15px/1 var(--font-body);text-decoration:none;color:var(--ink);background:transparent;cursor:pointer;transition:background .2s,color .2s,border-color .2s}
.btn:hover{background:var(--ink);color:var(--bg)}
.btn.primary{background:var(--ink);color:var(--bg)}
.btn.primary:hover{background:var(--accent);border-color:var(--accent);color:var(--accent-ink)}
.dark .btn{border-color:var(--dark-ink);color:var(--dark-ink)}
.dark .btn:hover{background:var(--dark-ink);color:var(--dark)}
.dark .btn.primary{background:var(--accent);border-color:var(--accent);color:var(--accent-ink)}
.dark .btn.primary:hover{background:var(--dark-ink);border-color:var(--dark-ink);color:var(--dark)}
.btn .arr{transition:transform .2s}
.btn:hover .arr{transform:translateX(3px)}
.ctas{display:flex;flex-wrap:wrap;gap:14px}

/* ---------- nav ---------- */
/* <site-nav> renders the header (js/site.js). The host carries the sticky behaviour and reserves
   the bar's exact height before the script runs, so nothing shifts: 76px of .nav>.wrap plus the
   1px border-bottom on .nav. */
site-nav{display:block;position:sticky;top:0;z-index:40;min-height:calc(var(--nav-h) + 1px);background:var(--dark)}
/* No-JS fallback; the render replaces it when JS is on. */
site-nav noscript{display:flex;align-items:center;min-height:calc(var(--nav-h) + 1px)}
site-nav noscript nav{width:min(1240px,100% - 2*clamp(20px,5vw,64px));margin-inline:auto;padding:14px 0;color:var(--dark-ink-2);font-size:15px;line-height:1.9}
site-nav noscript a{color:var(--dark-ink);text-decoration:none}
site-nav noscript a:hover{text-decoration:underline}
.nav{position:relative;background:var(--dark);color:var(--dark-ink);border-bottom:1px solid var(--dark-line)}
.nav>.wrap{display:flex;align-items:center;justify-content:space-between;gap:20px;min-height:var(--nav-h)}
.wordmark{font-family:var(--font-display);font-variation-settings:"SOFT" 60,"opsz" 144;font-size:24px;letter-spacing:.01em;text-decoration:none;line-height:1;display:flex;flex-direction:column;gap:5px;color:inherit}
.wordmark small{font:500 10px/1 var(--font-mono);letter-spacing:.16em;text-transform:uppercase;color:var(--dark-ink-2);white-space:nowrap}
/* If enlarged text still overflows the bar, the tagline truncates; nothing pushes the menu button off-screen. */
.nav .wordmark{min-width:0}
.nav .wordmark small{overflow:hidden;text-overflow:ellipsis}
.nav .primary-nav ul{list-style:none;margin:0;padding:0;display:flex;gap:28px}
.nav .primary-nav a{text-decoration:none;font-size:15px;font-weight:500;color:var(--dark-ink);opacity:.85;position:relative}
.nav .primary-nav a:hover,.nav .primary-nav a[aria-current="page"]{opacity:1}
.nav .primary-nav a::after{content:"";position:absolute;left:0;right:100%;bottom:-6px;height:1px;background:var(--accent-on-dark);transition:right .25s}
.nav .primary-nav a:hover::after,.nav .primary-nav a[aria-current="page"]::after{right:0}
.nav .right{display:flex;align-items:center;gap:18px}
.nav .phone{font-family:var(--font-mono);font-size:14px;text-decoration:none;color:var(--dark-ink-2)}
.nav .btn{padding:11px 18px;font-size:14px}
.menu-btn{display:none;appearance:none;background:transparent;border:1.5px solid var(--dark-line);color:var(--dark-ink);border-radius:var(--btn-radius);width:44px;height:44px;cursor:pointer;align-items:center;justify-content:center;flex:none}
.menu-btn svg{width:20px;height:20px}
.menu-btn .x{display:none}
.menu-btn[aria-expanded="true"] .bars{display:none}
.menu-btn[aria-expanded="true"] .x{display:block}
.menu{position:absolute;left:0;right:0;top:100%;background:var(--dark-2);border-bottom:1px solid var(--dark-line);padding:12px 0 22px;box-shadow:0 24px 40px rgba(0,0,0,.25)}
.menu ul{list-style:none;margin:0;padding:0;display:grid}
.menu ul a{display:block;padding:14px 0;border-bottom:1px solid var(--dark-line);text-decoration:none;font-size:18px;font-weight:500;color:var(--dark-ink)}
.menu .extras{display:flex;flex-wrap:wrap;gap:12px;margin-top:18px}
.menu .extras .btn{padding:12px 18px;font-size:14px;border-color:var(--dark-ink);color:var(--dark-ink)}
.menu .extras .btn:hover{background:var(--dark-ink);color:var(--dark)}
/* "Book a call" sits on the espresso bar, so it takes the on-dark primary treatment (same as .dark .btn.primary;
   the header isn't .dark). Before 2026-09-10 it was espresso on espresso and read as plain text. It also leads the mobile menu. */
.nav .btn.primary{background:var(--accent);border-color:var(--accent);color:var(--accent-ink)}
.nav .btn.primary:hover{background:var(--dark-ink);border-color:var(--dark-ink);color:var(--dark)}
.menu .extras .btn.primary{flex:1 0 100%;justify-content:center}
/* Desktop submenu (Insights). Opens on hover; the chevron button toggles it for keyboard and touch. The 30px top padding is a transparent hover bridge from the centred nav item to the panel, which starts just under the bar. */
.nav .primary-nav .has-sub{position:relative;display:flex;align-items:center;gap:2px}
.nav .primary-nav .has-sub.has-current>a{opacity:1}
.nav .primary-nav .has-sub.has-current>a::after{right:0}
.sub-btn{appearance:none;background:transparent;border:0;color:var(--dark-ink-2);width:28px;height:28px;border-radius:var(--btn-radius);cursor:pointer;display:inline-flex;align-items:center;justify-content:center;padding:0;flex:none}
.sub-btn svg{width:12px;height:12px;transition:transform .2s}
.sub-btn:hover{color:var(--dark-ink)}
.primary-nav .has-sub:hover .sub-btn svg,.primary-nav .has-sub.open .sub-btn svg{transform:rotate(180deg)}
.nav .primary-nav .sub{position:absolute;left:-14px;top:100%;z-index:41;list-style:none;margin:0;padding:30px 0 0;min-width:232px;display:block;opacity:0;visibility:hidden;transform:translateY(-4px);transition:opacity .18s,transform .18s,visibility 0s linear .18s}
.nav .primary-nav .sub::before{content:"";position:absolute;inset:30px 0 0 0;background:var(--dark-2);border:1px solid var(--dark-line);border-radius:var(--radius-lg);box-shadow:0 24px 40px rgba(0,0,0,.28);z-index:-1}
.nav .primary-nav .has-sub:hover .sub,.nav .primary-nav .has-sub.open .sub{opacity:1;visibility:visible;transform:none;transition-delay:0s}
.nav .primary-nav .sub li{padding:0 8px}
.nav .primary-nav .sub li:first-child{padding-top:8px}
.nav .primary-nav .sub li:last-child{padding-bottom:8px}
.nav .primary-nav .sub li.div{margin-top:6px;padding-top:6px;border-top:1px solid var(--dark-line)}
.nav .primary-nav .sub a{display:block;padding:10px 14px;border-radius:var(--radius);font-size:15px;opacity:.85}
.nav .primary-nav .sub a::after{display:none}
.nav .primary-nav .sub a:hover,.nav .primary-nav .sub a:focus-visible{background:rgba(248,244,237,.08);opacity:1}
.nav .primary-nav .sub a[aria-current="page"]{opacity:1;color:var(--accent-on-dark)}
/* Mobile menu: the same items nested under Insights */
.menu li.has-sub>a{border-bottom:0}
.menu .sub{padding:0 0 10px 0;border-bottom:1px solid var(--dark-line)}
.menu .sub a{padding:9px 0 9px 18px;border-bottom:0;border-left:1px solid var(--dark-line);font-size:16px;font-weight:400;color:var(--dark-ink-2)}
.menu .sub a:hover,.menu .sub a[aria-current="page"]{color:var(--dark-ink)}
@media (max-width:1000px){ .nav .primary-nav,.nav .phone{display:none} .menu-btn{display:inline-flex} }
/* 1001–1300px: the full bar (tagline + six links + phone + button) needs ~1290px. Below that the links wrapped
   and "Book a call" was pushed off-screen. Drop the phone (it's in the footer and the mobile menu) and the tagline's second half,
   and tighten the links. */
@media (min-width:1001px) and (max-width:1300px){ .nav .phone,.wordmark small .sep{display:none} .nav .primary-nav ul{gap:22px} }
@media (max-width:640px){ .wordmark small .sep{display:none} }
@media (max-width:420px){ .wordmark{font-size:21px} .nav .right .btn.primary{padding:10px 13px;font-size:13px} .nav>.wrap{gap:10px} }
/* ≤380px: the bar (wordmark, "Book a call", menu button) needs ~331px, and html{overflow-x:clip} hides whatever spills past
   the edge, menu button first. Tighten the tagline and the right-hand gap so 360px phones keep their gutters. At ≤359px
   (most iPhones with Display Zoom on report 320px) the bar drops "Book a call"; it also leads the mobile menu. */
@media (max-width:380px){ .nav .wordmark small{letter-spacing:.1em} .nav .right{gap:10px} }
@media (max-width:359px){ .nav .right .btn.primary{display:none} }

/* ---------- hero ---------- */
.hero{padding-block:clamp(24px,3vw,40px) 0;overflow:hidden}
.hero .wrap{display:grid;grid-template-columns:minmax(0,7fr) minmax(0,5fr);gap:clamp(32px,5vw,72px);align-items:end}
.hero .copy{align-self:center;padding-top:clamp(8px,2vw,24px);padding-bottom:clamp(32px,4vw,56px)}
.hero h1{font-size:clamp(44px,5.6vw,80px);max-width:12ch;margin-bottom:24px}
.hero h1 em{font-style:italic;color:var(--accent)}
.hero .ctas{margin-top:34px}
.hero .aside{font-size:14px;color:var(--ink-2);margin-top:22px}
.hero .aside a{text-decoration:none;border-bottom:1px solid var(--line)}
.portrait{position:relative;align-self:end;max-width:440px;justify-self:end;width:100%;isolation:isolate;margin:0}
.portrait img{width:100%;aspect-ratio:3/4;object-fit:cover;object-position:50% 20%;border-radius:var(--radius-lg) var(--radius-lg) 0 0}
.portrait::before{content:"";position:absolute;inset:22px -18px 0 22px;background:var(--mat);border-radius:var(--radius-lg) var(--radius-lg) 0 0;z-index:-1;pointer-events:none}
.portrait figcaption{position:absolute;left:0;bottom:22px;background:var(--dark);color:var(--dark-ink);font-family:var(--font-mono);font-size:12px;letter-spacing:.08em;padding:10px 14px;transform:translateX(-12px);border-radius:var(--radius)}
@media (max-width:820px){ .hero .wrap{grid-template-columns:1fr} .hero .copy{padding-top:12px} .portrait{max-width:420px;justify-self:start} }
.rise{animation:rise .8s cubic-bezier(.2,.7,.2,1) both}
.rise.d1{animation-delay:.08s}.rise.d2{animation-delay:.16s}.rise.d3{animation-delay:.24s}
@keyframes rise{from{transform:translateY(14px)}to{transform:translateY(0)}}

/* ---------- proof strip ---------- */
.creds{border-top:1px solid var(--line);border-bottom:1px solid var(--line);background:var(--bg)}
.creds .wrap{display:grid;grid-template-columns:repeat(5,1fr);gap:0}
.creds .item{padding:22px 24px 22px 0;border-right:1px solid var(--line);margin-right:24px}
.creds .item:last-child{border-right:0;margin-right:0}
.creds .num{font-family:var(--font-display);font-variation-settings:"SOFT" 60,"opsz" 144;font-size:clamp(26px,2.6vw,36px);line-height:1;font-variant-numeric:tabular-nums}
.creds .num.text{font-size:clamp(20px,1.9vw,26px);line-height:1.1;padding-top:4px}
.creds .lbl{font-family:var(--font-mono);font-size:12px;letter-spacing:.1em;text-transform:uppercase;color:var(--ink-2);margin-top:8px}
@media (max-width:900px){ .creds .wrap{grid-template-columns:repeat(2,1fr)} .creds .item:nth-child(2n){border-right:0;margin-right:0} .creds .item:last-child{grid-column:1/-1;border-top:1px solid var(--line)} }

/* ---------- pathways ---------- */
.paths{display:grid;grid-template-columns:repeat(4,1fr);gap:0;border-top:1px solid var(--line)}
.path{display:flex;flex-direction:column;gap:14px;padding:32px 28px 32px 0;margin-right:28px;border-right:1px solid var(--line);text-decoration:none;min-height:300px;position:relative}
.path:last-child{border-right:0;margin-right:0}
.path .tag{font-family:var(--font-mono);font-size:11px;letter-spacing:.14em;text-transform:uppercase;color:var(--ink-2)}
.path h3{padding-top:14px;transition:color .2s}
.path p{color:var(--ink-2);font-size:15.5px}
.path .go{margin-top:auto;padding-top:18px;font-weight:600;font-size:15px;display:inline-flex;gap:8px;align-items:center;color:var(--ink)}
.path .go .arr{transition:transform .2s;color:var(--accent)}
.path:hover .go .arr{transform:translateX(4px)}
.path:hover h3{color:var(--accent)}
@media (max-width:980px){ .paths{grid-template-columns:repeat(2,1fr)} .path{min-height:0;border-bottom:1px solid var(--line)} .path:nth-child(2n){border-right:0;margin-right:0} }
@media (max-width:560px){ .paths{grid-template-columns:1fr} .path{border-right:0;margin-right:0} }

/* ---------- second look ---------- */
.second .wrap{display:grid;grid-template-columns:minmax(0,1fr) minmax(0,1fr);gap:clamp(32px,6vw,96px);align-items:center}
.second h2{font-size:clamp(34px,4.2vw,56px)}
.second .lede{margin-top:20px}
.second .ctas{margin-top:30px}
.second .fine{font-size:13px;color:var(--dark-ink-2);margin-top:22px;max-width:52ch}
.deskshot{position:relative;margin:0;max-width:520px;justify-self:end;width:100%}
.deskshot img{width:100%;aspect-ratio:9/10;object-fit:cover;border-radius:var(--radius-lg)}
.deskshot::before{content:"";position:absolute;inset:16px -16px -16px 16px;border:1.5px solid var(--accent-on-dark);opacity:.55;border-radius:var(--radius-lg);pointer-events:none}
.deskshot .stamp{position:absolute;right:-14px;top:-16px;background:var(--accent);color:var(--accent-ink);font:500 12px/1 var(--font-mono);letter-spacing:.14em;text-transform:uppercase;padding:12px 14px;transform:rotate(3deg);border-radius:var(--radius)}
@media (max-width:820px){ .second .wrap{grid-template-columns:1fr} .deskshot{justify-self:start;max-width:440px} .deskshot .stamp{right:6px} .deskshot::before{inset:14px -12px -14px 14px} }

/* ---------- process ---------- */
.steps{list-style:none;margin:0;padding:0;display:grid;grid-template-columns:repeat(3,1fr);gap:clamp(24px,4vw,56px)}
.step{border-top:1.5px solid var(--ink);padding-top:22px}
.step .n{font-family:var(--font-display);font-variation-settings:"SOFT" 60,"opsz" 144;font-size:48px;line-height:1;color:var(--accent)}
.step h3{margin:14px 0 10px}
.step p{color:var(--ink-2);font-size:16px}
@media (max-width:760px){ .steps{grid-template-columns:1fr} }

/* ---------- calculator ---------- */
.calc{display:grid;grid-template-columns:minmax(0,5fr) minmax(0,6fr);gap:clamp(28px,4vw,64px);align-items:start}
.fields{display:grid;grid-template-columns:1fr 1fr;gap:18px 20px;margin:0}
.field{display:flex;flex-direction:column;gap:7px}
.field.full{grid-column:1/-1}
.field label{font-family:var(--font-mono);font-size:11.5px;letter-spacing:.12em;text-transform:uppercase;color:var(--ink-2)}
.field label .ex{color:var(--accent)}
.field .in{display:flex;align-items:center;border:1px solid var(--ink);border-radius:var(--radius);background:var(--bg);overflow:hidden}
.field .in span{padding:0 12px;font-family:var(--font-mono);font-size:14px;color:var(--ink-2)}
.field input,.field select{flex:1;min-width:0;width:100%;border:0;background:transparent;font:500 17px var(--font-mono);color:var(--ink);padding:12px 12px 12px 0}
.field .in>input:first-child,.field select{padding-left:12px}
.field input:focus,.field select:focus{outline:none}
.field .in:focus-within{outline:2px solid var(--accent);outline-offset:2px}
.field .help{font-size:12.5px;color:var(--ink-2)}
.result{background:var(--dark);color:var(--dark-ink);border-radius:var(--radius-lg);padding:clamp(24px,3vw,40px)}
.result .big{font-family:var(--font-display);font-variation-settings:"SOFT" 60,"opsz" 144;font-size:clamp(46px,5vw,72px);line-height:1;font-variant-numeric:tabular-nums;letter-spacing:-.01em}
.result .big small{font-size:.35em;color:var(--dark-ink-2);font-family:var(--font-mono);letter-spacing:.1em;text-transform:uppercase;margin-left:10px;vertical-align:middle}
.result .rows{margin-top:26px;border-top:1px solid var(--dark-line)}
.result .r{display:flex;justify-content:space-between;gap:12px;padding:12px 0;border-bottom:1px solid var(--dark-line);font-size:15px}
.result .r span:first-child{color:var(--dark-ink-2)}
.result .r .mono{font-size:16px}
.flag{margin-top:22px;padding:14px 16px;border:1px solid var(--dark-line);border-left:3px solid var(--accent-on-dark);border-radius:var(--radius);font-size:14px;color:var(--dark-ink-2)}
.flag b{color:var(--dark-ink);font-weight:600}
.disclaimer{font-size:12.5px;color:var(--ink-2);margin-top:18px;max-width:70ch}
@media (max-width:900px){ .calc{grid-template-columns:1fr} }
@media (max-width:460px){ .fields{grid-template-columns:1fr} }

/* ---------- client stories ---------- */
.quotes{display:grid;grid-template-columns:repeat(3,1fr);gap:0;border-top:1px solid var(--line);border-bottom:1px solid var(--line)}
.quote{padding:36px 32px 36px 0;margin:0 32px 0 0;border-right:1px solid var(--line);display:flex;flex-direction:column;gap:18px}
.quote:last-child{border-right:0;margin-right:0}
.quote .mark{font-family:var(--font-display);font-size:56px;line-height:.6;color:var(--accent)}
.quote p{font-size:clamp(18px,1.5vw,21px);line-height:1.4;font-family:var(--font-display);font-variation-settings:"SOFT" 60,"opsz" 144}
.quote cite{font-style:normal;font-family:var(--font-mono);font-size:12px;letter-spacing:.1em;text-transform:uppercase;color:var(--ink-2);margin-top:auto}
.quotes-foot{margin-top:28px;display:flex;gap:14px;flex-wrap:wrap;align-items:center}
.quotes-foot .mono{font-size:12.5px;color:var(--ink-2);letter-spacing:.06em}
@media (max-width:820px){ .quotes{grid-template-columns:1fr} .quote{border-right:0;margin-right:0;border-bottom:1px solid var(--line)} .quote:last-child{border-bottom:0} }
/* ---------- testimonials (/reviews/) ---------- */
/* Reviews are grouped by what happened, and each group has its own layout. Every review is verbatim:
   <mark> only emphasises a sentence, and .rv-lead repeats that sentence in display type with
   aria-hidden so screen readers don't hear it twice. */
.rv-hero .wrap{display:grid;grid-template-columns:minmax(0,7fr) minmax(0,5fr);gap:clamp(40px,6vw,96px);align-items:center}
.rv-hero h1{max-width:13ch}
.rv-quote{margin:34px 0 0;padding-left:24px;border-left:2px solid var(--accent-on-dark);max-width:32ch}
.rv-quote p{font-family:var(--font-display);font-style:italic;font-variation-settings:"SOFT" 100,"opsz" 144;font-size:clamp(22px,2.1vw,29px);line-height:1.3;color:var(--dark-ink)}
.rv-quote cite{display:block;margin-top:14px;font:500 12px/1 var(--font-mono);font-style:normal;letter-spacing:.12em;text-transform:uppercase;color:var(--dark-ink-2)}
.rv-hero .ctas{margin-top:36px}
.rv-photo{margin:0;width:100%;max-width:560px;justify-self:end}
.rv-photo .frame{position:relative}
.rv-photo .frame::before{content:"";position:absolute;inset:16px -16px -16px 16px;border:1.5px solid var(--accent-on-dark);opacity:.55;border-radius:var(--radius-lg);pointer-events:none}
.rv-photo img{position:relative;width:100%;aspect-ratio:5/4;object-fit:cover;object-position:46% 50%;border-radius:var(--radius-lg)}
.rv-photo figcaption{margin-top:30px;font:500 11.5px/1.5 var(--font-mono);letter-spacing:.12em;text-transform:uppercase;color:var(--dark-ink-2)}

.rv-proof{padding-block:0;border-bottom:1px solid var(--line)}
.rv-proof .wrap{display:grid;grid-template-columns:repeat(4,minmax(0,1fr))}
.rv-proof .item{padding:28px 24px 28px 0;margin-right:24px;border-right:1px solid var(--line)}
.rv-proof .item:last-child{border-right:0;margin-right:0}
.rv-proof .num{font-family:var(--font-display);font-variation-settings:"SOFT" 60,"opsz" 144;font-size:clamp(30px,3.2vw,44px);line-height:1;letter-spacing:-.02em;font-variant-numeric:tabular-nums}
.rv-proof .num em{font-style:normal;font-size:.5em;letter-spacing:0;color:var(--ink-2)}
.rv-proof .lbl{font:500 12px/1.35 var(--font-mono);letter-spacing:.1em;text-transform:uppercase;color:var(--ink-2);margin-top:10px}

.rv-sec{padding-block:clamp(64px,8vw,112px)}
.rv-rule{display:flex;align-items:center;gap:16px;font:500 12px/1 var(--font-mono);letter-spacing:.12em;text-transform:uppercase;color:var(--ink-2);margin-bottom:clamp(20px,2.4vw,30px)}
.rv-rule::before{content:"";order:1;flex:1;height:1px;background:var(--line)}
.rv-rule .n{order:0;color:var(--accent)}
.rv-rule .c{order:2}
.rv-sec .sec-head{margin-bottom:clamp(30px,4vw,52px)}
.rv-sec .sec-head h2{max-width:14ch}

.rv-card{margin:0;background:var(--bg-2);border-radius:var(--radius-lg);padding:clamp(24px,2.6vw,36px);display:flex;flex-direction:column;gap:20px;scroll-margin-top:calc(var(--nav-h) + 28px)}
.alt .rv-card{background:var(--bg)}
.rv-card blockquote{margin:0}
.rv-card blockquote p{font-size:16.5px;line-height:1.66}
.rv-card mark{color:inherit;background:linear-gradient(transparent 56%,var(--accent-soft) 56%);padding:0 .06em;-webkit-box-decoration-break:clone;box-decoration-break:clone}
.rv-lead{font-family:var(--font-display);font-variation-settings:"SOFT" 60,"opsz" 144;font-size:clamp(24px,2.3vw,32px);line-height:1.2;letter-spacing:-.015em;text-wrap:pretty}
.rv-lead::before{content:"\201C";display:block;height:.5em;font-size:1.9em;line-height:.8;color:var(--accent)}
.rv-by{display:flex;align-items:center;gap:12px;margin:auto 0 0;padding-top:18px;border-top:1px solid var(--line)}
.rv-by .av{flex:none;width:38px;height:38px;border-radius:50%;display:grid;place-items:center;background:var(--accent-soft);color:var(--accent);font:500 12.5px/1 var(--font-mono);letter-spacing:.06em}
.rv-by .nm{font:500 12px/1.2 var(--font-mono);letter-spacing:.12em;text-transform:uppercase;color:var(--ink-2)}
.rv-card:target,.rv-q:target{box-shadow:0 0 0 2px var(--accent)}
.rv-card.is-dark{background:var(--dark);color:var(--dark-ink)}
.rv-card.is-dark blockquote p{color:var(--dark-ink-2)}
.rv-card.is-dark mark{color:var(--dark-ink);background:linear-gradient(transparent 56%,rgba(143,195,190,.3) 56%)}
.rv-card.is-dark .rv-lead::before{color:var(--accent-on-dark)}
.rv-card.is-dark .rv-by{border-top-color:var(--dark-line)}
.rv-card.is-dark .av{background:rgba(143,195,190,.16);color:var(--accent-on-dark)}
.rv-card.is-dark .nm{color:var(--dark-ink-2)}
.rv-card.is-accent{background:var(--accent);color:var(--accent-ink)}
.rv-card.is-accent blockquote p{color:rgba(248,244,237,.88)}
.rv-card.is-accent mark{color:var(--accent-ink);background:linear-gradient(transparent 56%,rgba(248,244,237,.22) 56%)}
.rv-card.is-accent .rv-lead::before{color:rgba(248,244,237,.7)}
.rv-card.is-accent .rv-by{border-top-color:rgba(248,244,237,.24)}
.rv-card.is-accent .av{background:rgba(248,244,237,.14);color:var(--accent-ink)}
.rv-card.is-accent .nm{color:rgba(248,244,237,.84)}
.dark .rv-card:target,.rv-card.is-dark:target,.rv-card.is-accent:target{box-shadow:0 0 0 2px var(--accent-on-dark)}

.rv-stack{display:flex;flex-direction:column;gap:clamp(18px,2vw,26px)}
.rv-stack>.rv-card{flex:1 1 auto}
.rv-hard{display:grid;grid-template-columns:minmax(0,7fr) minmax(0,5fr);gap:clamp(18px,2vw,26px)}
.rv-hard .row2{grid-column:1/-1;display:grid;grid-template-columns:minmax(0,5fr) minmax(0,7fr);gap:clamp(18px,2vw,26px)}
.rv-pair{display:grid;grid-template-columns:minmax(0,1fr) minmax(0,1fr);gap:clamp(18px,2vw,26px)}

/* Grid, not columns: rows keep the top rules aligned, and the last review closes the section at full width. */
.rv-short{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));column-gap:clamp(28px,3.6vw,56px);row-gap:clamp(40px,4.4vw,64px);align-items:start}
.rv-q{margin:0;padding-top:22px;border-top:1.5px solid var(--ink);display:flex;flex-direction:column;gap:20px;scroll-margin-top:calc(var(--nav-h) + 28px)}
.rv-q blockquote{margin:0}
.rv-q p{font-family:var(--font-display);font-variation-settings:"SOFT" 60,"opsz" 144;font-size:clamp(20px,1.7vw,23px);line-height:1.28;letter-spacing:-.01em;text-wrap:pretty}
.rv-q.l p{font-size:clamp(23px,2.1vw,29px);line-height:1.2}
.rv-q.xl p{font-size:clamp(29px,2.9vw,40px);line-height:1.1;letter-spacing:-.02em}
.rv-q.span{grid-column:1/-1}
.rv-q.span p{font-size:clamp(28px,3.1vw,44px);line-height:1.12;letter-spacing:-.02em;max-width:30ch}
.rv-q .rv-by{border-top:0;padding-top:0}

.rv-card.wide blockquote p{columns:2;column-gap:clamp(28px,4vw,56px);font-size:16px}

.rv-team .wrap{display:grid;grid-template-columns:minmax(0,5fr) minmax(0,7fr);gap:clamp(36px,6vw,96px);align-items:center}
.rv-count{display:flex;align-items:flex-end;gap:20px}
.rv-count b{font-family:var(--font-display);font-weight:400;font-variation-settings:"SOFT" 60,"opsz" 144;font-size:clamp(120px,15vw,220px);line-height:.78;letter-spacing:-.05em;color:var(--accent-on-dark)}
.rv-count span{font:500 12px/1.5 var(--font-mono);letter-spacing:.12em;text-transform:uppercase;color:var(--dark-ink-2);max-width:16ch;padding-bottom:6px}
.rv-team h2{font-size:clamp(34px,4.2vw,56px);max-width:15ch}
.rv-team .lede{margin-top:20px}
.rv-team .ctas{margin-top:30px}

@media (max-width:980px){
  .rv-hero .wrap{grid-template-columns:1fr}
  .rv-photo{justify-self:start;max-width:620px}
  .rv-hard,.rv-hard .row2{grid-template-columns:1fr}
  .rv-short{grid-template-columns:repeat(2,minmax(0,1fr))}
}
@media (max-width:820px){
  .rv-proof .wrap{grid-template-columns:repeat(2,minmax(0,1fr))}
  .rv-proof .item:nth-child(2){border-right:0;margin-right:0}
  .rv-proof .item:nth-child(-n+2){border-bottom:1px solid var(--line)}
  .rv-proof .item:nth-child(n+3){padding-top:22px}
  .rv-pair{grid-template-columns:1fr}
  .rv-card.wide blockquote p{columns:1}
  .rv-team .wrap{grid-template-columns:1fr}
}
@media (max-width:640px){ .rv-short{grid-template-columns:1fr} .rv-photo .frame::before{inset:10px -10px -10px 10px} }

/* ---------- realtors ---------- */
.realtors{background:var(--dark);color:var(--dark-ink);isolation:isolate;overflow:hidden}
.realtors .bg{position:absolute;inset:0;z-index:-1}
.realtors .bg img{width:100%;height:100%;object-fit:cover;opacity:.42;filter:saturate(.7)}
.realtors .bg::after{content:"";position:absolute;inset:0;background:linear-gradient(90deg,var(--dark) 10%,rgba(42,31,23,.55) 60%,rgba(42,31,23,.35))}
.realtors h2{max-width:16ch}
.realtors .lede{margin-top:18px}
.realtors .grid{display:grid;grid-template-columns:repeat(3,1fr);gap:clamp(20px,3vw,40px);margin-top:44px}
.realtors .cell{border-top:1px solid var(--dark-line);padding-top:18px}
.realtors .cell h3{font-size:21px;margin-bottom:8px}
.realtors .cell p{color:var(--dark-ink-2);font-size:15.5px}
.realtors .ctas{margin-top:40px}
@media (max-width:820px){ .realtors .grid{grid-template-columns:1fr} .realtors .bg::after{background:linear-gradient(180deg,var(--dark) 20%,rgba(42,31,23,.7))} }

/* ---------- for realtors page (/realtors/) ---------- */
/* Built to Hannah's eight-beat spec (claude/realtors-page-prompt.md). Two components are
   borrowed rather than rebuilt: the differentiator cards use .paths.reasons from the refinance
   page (stated, not linked — no .go arrow, no hover promise), and the difficult-deals band
   reuses the .realtors photo scrim above it, so the page an agent lands on wears the same
   clothes as the home band that sent them. */

.rl-hero h1{max-width:15ch}
.rl-hero .lede{max-width:58ch}

/* 03 · difficult deals — she called this the strongest section on the page, so the headline gets
   more room than the home band's .realtors h2 and the seven scenarios get display type. */
.rl-tough h2{font-size:clamp(34px,4.6vw,60px);max-width:15ch}
.rl-cases{list-style:none;margin:clamp(34px,4vw,52px) 0 0;padding:0;display:grid;grid-template-columns:repeat(4,1fr);gap:0 clamp(20px,3vw,40px)}
.rl-cases li{font-family:var(--font-display);font-variation-settings:"SOFT" 60,"opsz" 144;font-size:clamp(19px,1.7vw,23px);line-height:1.2;letter-spacing:-.01em;border-top:1px solid var(--dark-line);padding:16px 0 20px;text-wrap:balance}
.rl-tough .rl-tough-copy{margin-top:clamp(30px,3.5vw,44px);max-width:54ch}

/* 04 · Second Look — .teaser two-column. The frame is the light twin of .deskshot's:
   that one draws in --accent-on-dark, which all but disappears on stone. */
.rl-body{margin-top:18px;color:var(--ink-2);font-size:16.5px;line-height:1.65;max-width:52ch}
.rl-fine{margin-top:24px;font-size:13px;color:var(--ink-2);max-width:54ch}
.rl-photo{margin:0;width:100%;max-width:460px;justify-self:end}
.rl-photo .frame{position:relative}
.rl-photo .frame::before{content:"";position:absolute;inset:16px -16px -16px 16px;border:1.5px solid var(--accent);opacity:.5;border-radius:var(--radius-lg);pointer-events:none}
.rl-photo img{position:relative;width:100%;aspect-ratio:9/10;object-fit:cover;border-radius:var(--radius-lg)}

/* 05 · partnership — her pull quote is this section's only visual, so nothing competes with it. */
.rl-pull{margin:0 0 clamp(40px,5vw,64px);padding-left:clamp(20px,2.4vw,30px);border-left:2px solid var(--accent);max-width:min(860px,100%)}
.rl-pull p{font-family:var(--font-display);font-variation-settings:"SOFT" 60,"opsz" 144;font-size:clamp(22px,2.7vw,36px);line-height:1.24;letter-spacing:-.018em;text-wrap:pretty}
.rl-pull cite{display:block;margin-top:18px;font:500 12px/1 var(--font-mono);font-style:normal;letter-spacing:.12em;text-transform:uppercase;color:var(--ink-2)}
.rl-ways{display:grid;grid-template-columns:repeat(2,1fr);gap:clamp(28px,4vw,56px) clamp(32px,5vw,72px)}
.rl-way{border-top:1.5px solid var(--ink);padding-top:20px}
.rl-way .n{font-family:var(--font-mono);font-size:12px;letter-spacing:.14em;color:var(--accent)}
.rl-way h3{margin:12px 0 10px;max-width:24ch}
.rl-way p{color:var(--ink-2);font-size:16px}
.rl-way-links{margin-top:14px;font-family:var(--font-mono);font-size:12px;letter-spacing:.08em;text-transform:uppercase}
.rl-way-links a{color:var(--accent);text-decoration:none;border-bottom:1px solid transparent}
.rl-way-links a:hover{border-bottom-color:var(--accent)}

/* 06 · social proof — Hannah asked for agent testimonials and supplied none, so the left column
   is what the 17 client reviews already say and the right column is the empty slot, asking for
   them by name. Nothing here is invented. The "ten of the seventeen" count is also baked into
   /reviews/ — adding a review means recounting in both places. */
.rl-voices{display:grid;grid-template-columns:repeat(2,1fr);gap:clamp(28px,4vw,56px) clamp(32px,5vw,72px)}
.rl-voice{border-top:1px solid var(--line);padding-top:24px}
.rl-voice p{color:var(--ink-2);font-size:16px}
.rl-voice .rl-voice-lead{font-family:var(--font-display);font-variation-settings:"SOFT" 60,"opsz" 144;font-size:clamp(21px,2vw,27px);line-height:1.24;letter-spacing:-.015em;color:var(--ink);margin-bottom:14px;text-wrap:pretty}
.rl-voice-ask{border-top:1.5px solid var(--accent)}

/* 07 · stats band — .creds' visual language at four tiles instead of five */
.rl-stats{border-top:1px solid var(--line);border-bottom:1px solid var(--line);background:var(--bg)}
.rl-stats .wrap{display:grid;grid-template-columns:repeat(4,1fr);gap:0}
.rl-stats .item{padding:22px 24px 22px 0;border-right:1px solid var(--line);margin-right:24px}
.rl-stats .item:last-child{border-right:0;margin-right:0}
.rl-stats .num{font-family:var(--font-display);font-variation-settings:"SOFT" 60,"opsz" 144;font-size:clamp(26px,2.6vw,36px);line-height:1;font-variant-numeric:tabular-nums}
.rl-stats .num.text{font-size:clamp(20px,1.9vw,26px);line-height:1.1;padding-top:4px}
.rl-stats .lbl{font-family:var(--font-mono);font-size:12px;letter-spacing:.1em;text-transform:uppercase;color:var(--ink-2);margin-top:8px}

/* 08 · close */
.rl-close h2{font-size:clamp(30px,3.9vw,52px);max-width:24ch;text-wrap:pretty}
.rl-close .ctas{margin-top:36px}

@media (max-width:980px){
  .rl-cases{grid-template-columns:repeat(2,1fr)}
  .rl-stats .wrap{grid-template-columns:repeat(2,1fr)}
  .rl-stats .item:nth-child(2n){border-right:0;margin-right:0}
  .rl-stats .item:nth-child(-n+2){border-bottom:1px solid var(--line)}
}
@media (max-width:820px){
  .rl-photo{justify-self:start;max-width:400px}
  .rl-ways,.rl-voices{grid-template-columns:1fr}
}
@media (max-width:700px){
  .rl-stats .wrap{grid-template-columns:1fr}
  .rl-stats .item{border-right:0;margin-right:0;padding:18px 0;border-bottom:1px solid var(--line)}
  .rl-stats .item:last-child{border-bottom:0}
}
@media (max-width:560px){
  .rl-cases li{font-size:17.5px}
  .rl-close h2 br{display:none}
}

/* ---------- about ---------- */
.about .wrap{display:grid;grid-template-columns:minmax(0,5fr) minmax(0,7fr);gap:clamp(32px,5vw,80px);align-items:center}
.about .photo{border-radius:var(--radius-lg);aspect-ratio:3/2;object-fit:cover;width:100%}
.about .lede{margin-top:20px}
.about .facts{display:grid;grid-template-columns:1fr 1fr;gap:16px 28px;margin-top:30px;border-top:1px solid var(--line);padding-top:22px}
.about .facts div{font-size:14.5px;color:var(--ink-2)}
.about .facts b{display:block;color:var(--ink);font-weight:600;margin-bottom:2px}
.team{margin-top:28px;display:flex;gap:18px;align-items:center;background:var(--bg-2);padding:18px 20px;border-radius:var(--radius-lg)}
.team img{width:84px;height:84px;object-fit:cover;border-radius:var(--radius-lg);flex:none}
.team p{font-size:15px;color:var(--ink-2)}
.team b{color:var(--ink);font-weight:600}
@media (max-width:820px){ .about .wrap{grid-template-columns:1fr} }
@media (max-width:460px){ .about .facts{grid-template-columns:1fr} }

/* ---------- about page (/about/) ---------- */
/* Two long first-person bios. Prose column + a sticky-free aside carrying the pull quote,
   the facts, and (Caroline) the working photo. Reuses .rv-rule from the testimonials block. */
.ab-hero .wrap{display:grid;grid-template-columns:minmax(0,7fr) minmax(0,5fr);gap:clamp(40px,6vw,96px);align-items:center}
.ab-hero h1{max-width:11ch}
.ab-hero .lede{max-width:40ch}
.ab-hero .ctas{margin-top:36px}
.ab-photo{margin:0;width:100%;max-width:400px;justify-self:end}
.ab-photo .frame{position:relative}
.ab-photo .frame::before{content:"";position:absolute;inset:18px -18px -18px 18px;border:1.5px solid var(--accent-on-dark);opacity:.55;border-radius:var(--radius-lg);pointer-events:none}
.ab-photo img{position:relative;display:block;width:100%;aspect-ratio:2/3;object-fit:cover;border-radius:var(--radius-lg)}
.ab-photo figcaption{margin-top:30px;font:500 11.5px/1.5 var(--font-mono);letter-spacing:.12em;text-transform:uppercase;color:var(--dark-ink-2)}

.ab-sec{padding-block:clamp(64px,8vw,112px)}
/* the base .sec-head is a 2-col grid (h2 | lede); here it carries eyebrow + h2, so stack it */
.ab-sec .sec-head{display:block;margin-bottom:clamp(30px,4vw,52px)}
.ab-sec .sec-head h2{max-width:20ch;margin-top:12px}
.ab-body{display:grid;grid-template-columns:minmax(0,7fr) minmax(0,5fr);gap:clamp(32px,5vw,72px);align-items:start}
.ab-prose{max-width:64ch}
.ab-prose p{font-size:16.5px;line-height:1.72;color:var(--ink-2);margin-bottom:18px}
.ab-prose p:first-child{font-size:19px;line-height:1.6;color:var(--ink)}
.ab-prose p:last-child{margin-bottom:0}
.ab-side{display:flex;flex-direction:column}
.ab-pull{margin:0 0 30px;padding-left:24px;border-left:2px solid var(--accent)}
.ab-pull p{font-family:var(--font-display);font-variation-settings:"SOFT" 60,"opsz" 144;font-size:clamp(21px,2vw,27px);line-height:1.28;letter-spacing:-.015em;color:var(--ink);text-wrap:pretty}
.ab-figure{margin:0 0 30px;width:100%}
.ab-figure img{display:block;width:100%;aspect-ratio:9/10;object-fit:cover;border-radius:var(--radius-lg)}
/* Hannah's aside runs quote → photo → facts, Caroline's photo → quote → facts; the 3/2 crop
   keeps the sofa shot from towering over a column that has less to hold up. */
.ab-figure-end{margin-top:4px}
.ab-figure-end img{aspect-ratio:3/2}
.ab-facts{display:grid;gap:16px;border-top:1px solid var(--line);padding-top:22px}
.ab-facts div{font-size:14.5px;line-height:1.55;color:var(--ink-2)}
.ab-facts b{display:block;color:var(--ink);font-weight:600;margin-bottom:2px}

.ab-team .wrap{display:grid;grid-template-columns:minmax(0,1fr) minmax(0,1fr);gap:clamp(32px,6vw,88px);align-items:center}
.ab-team h2{font-size:clamp(34px,4.2vw,56px);max-width:12ch}
.ab-team .lede{margin-top:0;max-width:50ch}
.ab-team .ctas{margin-top:30px}

@media (max-width:900px){
  .ab-team .wrap{grid-template-columns:1fr;gap:22px}
  .ab-hero .wrap{grid-template-columns:1fr}
  .ab-photo{justify-self:start;max-width:340px}
  .ab-body{grid-template-columns:1fr;gap:clamp(28px,4vw,40px)}
  .ab-side{max-width:64ch}
  .ab-figure{max-width:420px}
}
@media (max-width:560px){
  .ab-prose p:first-child{font-size:17.5px}
}

/* ---------- insights ---------- */
.posts{display:grid;grid-template-columns:repeat(3,1fr);gap:clamp(20px,3vw,40px)}
.post{text-decoration:none;display:flex;flex-direction:column;gap:12px;border-top:1.5px solid var(--ink);padding-top:18px}
.post .meta{display:flex;justify-content:space-between;gap:12px;font-family:var(--font-mono);font-size:11.5px;letter-spacing:.1em;text-transform:uppercase;color:var(--ink-2)}
.post .meta .planned{color:var(--accent)}
.post h3{font-size:clamp(20px,1.8vw,24px);transition:color .2s}
.post p{color:var(--ink-2);font-size:15.5px}
.post:hover h3{color:var(--accent)}
@media (max-width:820px){ .posts{grid-template-columns:1fr} }

/* ---------- local businesses (/insights/local-businesses/) ---------- */
/* Six cards on .paths.three, each led by the square tile carried over from the Squarespace page
   (the business name is baked into the artwork, so the <img> is alt="" and the h3 does the talking).
   The .go line names the destination domain because every card leaves the site. */
.lb-grid .path img{width:100%;aspect-ratio:1;object-fit:cover;border-radius:var(--radius);background:var(--mat);transition:transform .35s ease}
.lb-grid .path{padding-top:28px}
.lb-grid .path:hover img{transform:scale(1.015)}
.lb-grid .path .go .arr{color:var(--accent)}
.lb-grid .path:hover .go .arr{transform:translate(3px,-3px)}
/* The last card in each row drops .path's 28px margin-right, so its box — and a 100%-wide square
   tile — would run 28px wider and taller than its neighbours. Trim that tile to match. */
.lb-grid .path:nth-child(3n) img{width:calc(100% - 28px)}
@media (max-width:980px){ .lb-grid .path{padding-top:24px} .lb-grid .path:nth-child(3n) img{width:100%} .lb-grid .path:nth-child(2n) img{width:calc(100% - 28px)} }
@media (max-width:560px){ .lb-grid .path img,.lb-grid .path:nth-child(2n) img{width:100%} }

/* ---------- contact + newsletter ---------- */
.contact .wrap{display:grid;grid-template-columns:minmax(0,1fr) minmax(0,1fr);gap:clamp(32px,6vw,96px)}
.contact h2{font-size:clamp(34px,4vw,54px)}
.contact .lede{margin-top:18px}
.contact .ways{margin-top:28px;display:grid}
.contact .ways a{display:flex;justify-content:space-between;align-items:center;gap:16px;text-decoration:none;padding:16px 0;border-top:1px solid var(--line);font-size:17px}
.contact .ways a:last-child{border-bottom:1px solid var(--line)}
.contact .ways a:hover span:first-child{color:var(--accent)}
.contact .ways .mono{color:var(--ink-2);font-size:13px;letter-spacing:.06em;text-align:right}
.news{background:var(--bg-2);padding:clamp(24px,3vw,40px);border-radius:var(--radius-lg);align-self:start}
.news h3{font-size:26px;margin-bottom:10px}
.news p{color:var(--ink-2);font-size:15.5px}
.news form{display:flex;gap:10px;margin-top:22px;flex-wrap:wrap}
.news input[type="email"]{flex:1;min-width:200px;border:1px solid var(--ink);background:var(--bg);border-radius:var(--btn-radius);padding:13px 16px;font:400 15px var(--font-body);color:var(--ink)}
.news .fine{font-size:12.5px;margin-top:12px}
.hp{position:absolute;left:-9999px;top:auto;width:1px;height:1px;overflow:hidden}
@media (max-width:820px){ .contact .wrap{grid-template-columns:1fr} }
@media (max-width:460px){ .contact .ways a{flex-direction:column;align-items:flex-start;gap:4px} .contact .ways .mono{text-align:left} }

/* ---------- footer ---------- */
/* <site-footer> renders the footer (js/site.js). The host only carries the background so the band
   matches while the script runs; no min-height, so with JS off it collapses to nothing. */
site-footer{display:block;background:var(--dark)}
footer{background:var(--dark);color:var(--dark-ink);padding:clamp(48px,6vw,80px) 0 clamp(40px,5vw,64px);font-size:14px}
footer .cols{display:grid;grid-template-columns:2fr 1fr 1fr 1.4fr;gap:40px;padding-bottom:40px;border-bottom:1px solid var(--dark-line)}
footer h2{font-family:var(--font-mono);font-variation-settings:normal;font-size:11.5px;letter-spacing:.14em;text-transform:uppercase;color:var(--dark-ink-2);margin:0 0 14px;font-weight:500;line-height:1.4}
footer ul{list-style:none;margin:0;padding:0;display:grid;gap:9px}
footer a{text-decoration:none;color:var(--dark-ink);opacity:.85}
footer a:hover{opacity:1;text-decoration:underline}
footer .brand .wordmark{font-size:28px;margin-bottom:14px}
footer .brand p{color:var(--dark-ink-2);max-width:40ch}
.logos{display:flex;gap:22px;align-items:center;margin-top:18px;flex-wrap:wrap}
.logos .fm{height:52px;width:auto;filter:invert(.92) sepia(.2) brightness(1.05)}
.eho{display:flex;align-items:center;gap:10px;font-family:var(--font-mono);font-size:10px;letter-spacing:.1em;text-transform:uppercase;color:var(--dark-ink-2);line-height:1.3}
.eho svg{width:52px;height:52px;flex:none;color:var(--dark-ink)}
.legal{padding-top:28px;font-family:var(--font-mono);font-size:12px;line-height:1.7;color:var(--dark-ink-2)}
.legal b{color:var(--dark-ink);font-weight:500}
.legal a{opacity:1;text-decoration:underline;text-decoration-color:var(--dark-line)}
/* maker's credit — its own line under a hairline so it never reads as part of the legal disclosure */
footer .credit{margin:28px 0 0;padding-top:20px;border-top:1px solid var(--dark-line);font-family:var(--font-mono);font-size:11px;letter-spacing:.12em;text-transform:uppercase;line-height:1.6;color:var(--dark-ink-2)}
footer .credit a{opacity:1;color:var(--dark-ink);text-decoration:underline;text-decoration-color:var(--dark-line);text-underline-offset:3px}
footer .credit a:hover{text-decoration-color:currentColor}
@media (max-width:900px){ footer .cols{grid-template-columns:1fr 1fr} }
@media (max-width:560px){ footer .cols{grid-template-columns:1fr} }

/* ---------- interior / placeholder pages ---------- */
.flush-top{padding-top:0}
.page-hero{padding-block:clamp(48px,7vw,96px) clamp(32px,5vw,64px)}
.page-hero h1{font-size:clamp(38px,5vw,64px);max-width:16ch}
.page-hero .lede{margin-top:22px}
.page-hero .ctas{margin-top:32px}

/* photo hero — full-bleed exterior behind the copy (pair with .dark) */
.page-hero.photo{
  --ph-pad:clamp(76px,10vw,150px) clamp(64px,8vw,120px);
  --ph-img:url("/images/buy-hero.webp");
  --ph-img-md:url("/images/buy-hero-1400.webp");
  --ph-img-sm:url("/images/buy-hero-mobile.webp");
  --ph-pos:center 42%;
  --ph-pos-sm:center 38%;
  background:var(--dark);
  padding-block:var(--ph-pad);
  overflow:hidden;isolation:isolate;
}
/* out-specifies .page-hero.dark (refinance) so the photo hero keeps its taller band */
.page-hero.photo.dark{padding-block:var(--ph-pad)}
/* ::after = the photo (slow drift) · ::before = the scrim (still) */
.page-hero.photo::after{
  content:"";position:absolute;inset:0;z-index:-2;
  background:var(--ph-img) var(--ph-pos)/cover no-repeat;
  animation:kenBurns 32s ease-in-out infinite;
  will-change:transform;
}
.page-hero.photo::before{
  content:"";position:absolute;inset:0;z-index:-1;
  background:
    linear-gradient(97deg,rgba(28,20,14,.94) 0%,rgba(28,20,14,.88) 30%,rgba(28,20,14,.62) 58%,rgba(28,20,14,.34) 100%),
    linear-gradient(180deg,rgba(28,20,14,.62) 0%,rgba(28,20,14,0) 34%,rgba(28,20,14,0) 72%,rgba(28,20,14,.42) 100%);
}
@keyframes kenBurns{
  0%{transform:scale(1) translate(0,0)}
  20%{transform:scale(1.06) translate(-1.5%,1%)}
  40%{transform:scale(1.1) translate(1%,-1.5%)}
  60%{transform:scale(1.06) translate(1.5%,.5%)}
  80%{transform:scale(1.04) translate(-.5%,1.5%)}
  100%{transform:scale(1) translate(0,0)}
}
/* Per-page photo heroes — same drift and scrim, different photograph. */
.page-hero.photo.ph-knox{--ph-img:url("/images/knoxville-skyline.webp");--ph-img-md:url("/images/knoxville-skyline-1400.webp");--ph-img-sm:url("/images/knoxville-skyline-mobile.webp");--ph-pos:center 58%;--ph-pos-sm:center 50%}
.page-hero.photo.ph-dusk{--ph-img:url("/images/smokies-dusk.webp");--ph-img-md:url("/images/smokies-dusk-1400.webp");--ph-img-sm:url("/images/smokies-dusk-mobile.webp");--ph-pos:center 52%;--ph-pos-sm:center 50%}
.page-hero.photo.ph-sunset{--ph-img:url("/images/smokies-sunset.webp");--ph-img-md:url("/images/smokies-sunset-1400.webp");--ph-img-sm:url("/images/smokies-sunset-mobile.webp");--ph-pos:center 50%;--ph-pos-sm:center 50%}
.page-hero.photo .wrap{position:relative}
.page-hero.photo .lede{max-width:46ch}
@media (max-width:1100px) and (min-width:821px){
  .page-hero.photo::after{background-image:var(--ph-img-md)}
}
@media (max-width:820px){
  .page-hero.photo::after{background-image:var(--ph-img-sm);background-position:var(--ph-pos-sm)}
  .page-hero.photo::before{background:linear-gradient(180deg,rgba(28,20,14,.9) 0%,rgba(28,20,14,.84) 46%,rgba(28,20,14,.6) 78%,rgba(28,20,14,.5) 100%)}
}
.crumbs{font-family:var(--font-mono);font-size:12px;letter-spacing:.08em;text-transform:uppercase;color:var(--ink-2);margin-bottom:22px}
.crumbs a{text-decoration:none}
.crumbs a:hover{color:var(--accent)}
.dark .crumbs{color:var(--dark-ink-2)}
.dark .crumbs a:hover{color:var(--accent-on-dark)}
/* byline — name + NMLS beneath the page headline (visible licensing, every page) */
.byline{font-family:var(--font-mono);font-size:12px;letter-spacing:.08em;text-transform:uppercase;color:var(--ink-2);margin-top:20px}
.byline b{font-weight:500;color:var(--ink)}
.dark .byline{color:var(--dark-ink-2)}
.dark .byline b{color:var(--dark-ink)}
.hero .byline{margin-top:0;margin-bottom:20px}
@media (max-width:560px){ .byline{font-size:11px;letter-spacing:.06em} }
.prose{max-width:68ch;font-size:17px}
.prose p{margin-bottom:16px}
.prose h2{font-size:clamp(26px,3vw,36px);margin:36px 0 14px}
.status{display:inline-block;font-family:var(--font-mono);font-size:11px;letter-spacing:.14em;text-transform:uppercase;color:var(--accent);border:1px solid var(--accent);border-radius:var(--btn-radius);padding:6px 12px;margin-bottom:22px}


/* ---------- buy page (/buy/) ---------- */
.paths.three{grid-template-columns:repeat(3,1fr)}
.paths.three .path{border-bottom:1px solid var(--line);min-height:0}
.paths.three .path:nth-child(3n){border-right:0;margin-right:0}
@media (max-width:980px){ .paths.three{grid-template-columns:repeat(2,1fr)} .paths.three .path:nth-child(3n){border-right:1px solid var(--line);margin-right:28px} .paths.three .path:nth-child(2n){border-right:0;margin-right:0} }
@media (max-width:560px){ .paths.three{grid-template-columns:1fr} .paths.three .path,.paths.three .path:nth-child(3n){border-right:0;margin-right:0} }
.teaser .wrap{display:grid;grid-template-columns:minmax(0,1fr) minmax(0,1fr);gap:clamp(32px,6vw,96px);align-items:center}
.teaser .lede{margin-top:20px}
.teaser .ctas{margin-top:30px}
.spec{list-style:none;margin:0;padding:0;border-top:1px solid var(--ink)}
.spec li{display:flex;justify-content:space-between;align-items:baseline;gap:16px;padding:15px 0;border-bottom:1px solid var(--line);font-size:16.5px}
.spec .mono{font-size:12px;letter-spacing:.06em;color:var(--ink-2);text-align:right;text-transform:uppercase}
@media (max-width:820px){ .teaser .wrap{grid-template-columns:1fr} }
@media (max-width:460px){ .spec li{flex-direction:column;align-items:flex-start;gap:4px} .spec .mono{text-align:left} }
.ready{background:var(--bg-2);padding:clamp(24px,3vw,40px);border-radius:var(--radius-lg);align-self:start}
.ready h3{font-size:26px;margin-bottom:10px}
.ready p{color:var(--ink-2);font-size:15.5px}
.ready ul{margin:18px 0 0;padding:0;list-style:none;display:grid;gap:10px}
.ready li{display:flex;gap:12px;font-size:15.5px;color:var(--ink-2)}
.ready li::before{content:"";flex:none;width:8px;height:8px;border-radius:50%;background:var(--accent);margin-top:9px}
.ready li b{color:var(--ink);font-weight:600}

/* ---------- refinance page (/refinance/) ---------- */
/* Solid espresso hero for pages with no photograph; /refinance/ now carries one (.ph-knox). */
.page-hero.dark{padding-block:clamp(64px,8vw,120px) clamp(52px,6vw,92px)}
/* The four reasons: stated, not linked, so no .go arrow and no hover promise. */
.paths.reasons{grid-template-columns:repeat(4,1fr)}
.paths.reasons .path{border-bottom:1px solid var(--line)}
.paths.reasons .path:hover h3{color:inherit}
.path-test{margin-top:auto;padding-top:16px;border-top:1px solid var(--line);font-size:14px;color:var(--ink-2);line-height:1.5}
.path-test b{display:block;font-family:var(--font-mono);font-size:11px;font-weight:500;letter-spacing:.14em;text-transform:uppercase;color:var(--accent);margin-bottom:7px}
@media (max-width:980px){ .paths.reasons{grid-template-columns:repeat(2,1fr)} .paths.reasons .path{min-height:0} .paths.reasons .path:nth-child(2n){border-right:0;margin-right:0} }
@media (max-width:560px){ .paths.reasons{grid-template-columns:1fr} .paths.reasons .path,.paths.reasons .path:nth-child(2n){border-right:0;margin-right:0} }
/* The break-even calculator reuses the .mc-* scaffolding wholesale; only these differ. */
.rc .mc-bar{z-index:31}
.rc .mc-detail{grid-template-columns:1fr}
.rc .mc-block[data-cmpblock]{max-width:860px}
.rc .result .r span:first-child{max-width:60%}
.rc .mc-chart .line.a{stroke:var(--accent)}
.rc .mc-key::before{border-color:var(--accent)}
.rc .mc-key.base::before{border-top-style:dashed;border-color:var(--ink-2)}
.rc .mc-chart text.mi{fill:var(--ink);stroke:none}

/* ---------- second look page (/second-look/) ---------- */
/* The six Loan Estimate cards reuse .paths.three wholesale. Like the refinance reasons they
   are stated, not linked, so the hover promise comes off. */
.paths.verdicts .path:hover h3{color:inherit}

/* The upload block. Deliberately inert — js/second-look-upload.js never transmits; it hands
   off to Foundation's secure form. Fields reuse the calculator's .fields/.field scaffolding,
   with the mono face swapped back to body text since these are words, not numbers. */
.sl-grid{display:grid;grid-template-columns:minmax(0,1fr) minmax(0,1fr);gap:clamp(28px,4vw,56px);align-items:start}
@media (max-width:900px){ .sl-grid{grid-template-columns:1fr} }

.sl-drop{position:relative;border:1.5px dashed var(--sl-edge);border-radius:var(--radius-lg);background:var(--bg);transition:border-color .2s,background .2s}
.sl-drop:hover{border-color:var(--accent)}
.sl-drop.is-over{border-color:var(--accent);border-style:solid;background:var(--accent-soft)}
.sl-drop:focus-within{outline:2px solid var(--accent);outline-offset:3px}
.sl-drop-face{display:flex;flex-direction:column;align-items:center;justify-content:center;gap:10px;text-align:center;padding:clamp(36px,5vw,64px) 24px;min-height:260px;cursor:pointer}
.sl-drop-icon{width:48px;height:48px;color:var(--accent);flex:none}
.sl-drop-title{font-family:var(--font-display);font-variation-settings:"SOFT" 60,"opsz" 144;font-size:clamp(21px,2vw,25px);line-height:1.15;letter-spacing:-.02em}
.sl-drop-sub{font-size:14.5px;color:var(--ink-2);max-width:32ch}
.sl-drop-sub b{color:var(--accent);font-weight:600;text-decoration:underline;text-underline-offset:3px}
.sl-drop.has-files .sl-drop-face{min-height:0;padding:clamp(22px,3vw,32px) 24px}
.sl-drop.has-files .sl-drop-icon{width:32px;height:32px}

.sl-files{list-style:none;margin:14px 0 0;padding:0;display:grid;gap:8px}
.sl-file{display:flex;align-items:center;gap:12px;padding:11px 12px 11px 14px;border:1px solid var(--sl-edge);border-radius:var(--radius);background:var(--bg)}
.sl-file-kind{flex:none;font-size:10.5px;letter-spacing:.12em;color:var(--accent);border:1px solid var(--accent);border-radius:3px;padding:3px 5px;line-height:1}
.sl-file-meta{flex:1;min-width:0;display:flex;align-items:baseline;justify-content:space-between;gap:12px}
.sl-file-meta b{font-weight:500;font-size:14.5px;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.sl-file-meta .mono{flex:none;font-size:12px;color:var(--ink-2)}
.sl-file-rm{flex:none;display:grid;place-items:center;width:28px;height:28px;padding:0;border:0;border-radius:50%;background:transparent;color:var(--ink-2);cursor:pointer;transition:background .2s,color .2s}
.sl-file-rm svg{width:14px;height:14px}
.sl-file-rm:hover{background:var(--mat);color:var(--ink)}

.sl-err{margin-top:12px;padding:10px 14px;border-left:3px solid var(--sl-warn);background:var(--bg);border-radius:0 var(--radius) var(--radius) 0;font-size:14px;color:var(--sl-warn)}
.sl-alt{margin-top:16px;font-size:13.5px;color:var(--ink-2)}
.sl-alt a{color:var(--ink);text-decoration-color:var(--line);text-underline-offset:3px}
.sl-alt a:hover{color:var(--accent)}

/* Words, not numbers — override the calculator's mono inputs. */
.sl-fields .field input,.sl-fields .field select,.sl-fields .field textarea{font:400 16px/1.45 var(--font-body)}
.sl-fields .field input::placeholder,.sl-fields .field textarea::placeholder{color:var(--ink-2);opacity:1}
.sl-fields .field textarea{width:100%;border:1px solid var(--ink);border-radius:var(--radius);background:var(--bg);color:var(--ink);padding:12px;resize:vertical}
.sl-fields .field textarea:focus{outline:2px solid var(--accent);outline-offset:2px}
.sl-submit{margin-top:26px}
.sl-submit .btn{width:100%;justify-content:center}
.sl-fine{margin-top:16px;font-size:12.5px;color:var(--ink-2);line-height:1.6}

.sl-done{background:var(--bg);border:1.5px solid var(--accent);border-radius:var(--radius-lg);padding:clamp(28px,4vw,44px);max-width:640px}
.sl-done h3{margin-bottom:12px}
.sl-done h3:focus{outline:none}
.sl-done h3:focus-visible{outline:2px solid var(--accent);outline-offset:4px}
.sl-done p{color:var(--ink-2);font-size:15.5px;max-width:52ch}
.sl-done .ctas{margin-top:24px}
@media (max-width:460px){ .sl-done .ctas .btn{width:100%;justify-content:center} }

/* ---------- mortgage calculator (js/mortgage-calc.js · Buy page) ----------
   Builds on .field / .result / .flag / .disclaimer above. Everything new is prefixed .mc- */
.mc [hidden]{display:none!important}
.mc[data-mode="quick"] [data-full]{display:none!important}
.mc[data-mode="full"] [data-quick]{display:none!important}
.mc-top{display:flex;flex-wrap:wrap;align-items:center;justify-content:space-between;gap:16px 24px;margin-bottom:clamp(24px,3vw,40px)}
.seg{display:inline-flex;padding:4px;border:1px solid var(--ink);border-radius:var(--btn-radius);background:var(--bg);gap:2px}
.seg input{position:absolute;opacity:0;width:1px;height:1px;margin:0;pointer-events:none}
.seg label{cursor:pointer;padding:9px 16px;border-radius:var(--btn-radius);font:600 14px/1 var(--font-body);color:var(--ink-2);white-space:nowrap;transition:background .2s,color .2s}
.seg label:hover{color:var(--ink)}
.seg input:checked+label{background:var(--ink);color:var(--bg)}
.seg input:focus-visible+label{outline:2px solid var(--accent);outline-offset:2px}
.seg.mc-small label{padding:7px 12px;font-size:13px}
.mc-mode label{padding:11px 20px;font-size:15px}
.mc-check{display:inline-flex;align-items:center;gap:10px;cursor:pointer;font-size:15px;color:var(--ink)}
.mc-check input{width:18px;height:18px;margin:0;accent-color:var(--accent);flex:none}
.mc-checkfield{justify-content:center}
.mc-checkfield .help{margin-left:28px}
.mc-link{appearance:none;background:none;border:0;padding:0;font:inherit;font-size:inherit;color:var(--accent);text-decoration:underline;text-underline-offset:3px;cursor:pointer}
.mc-link:hover{color:var(--ink)}
.mc-body{display:grid;grid-template-columns:minmax(0,6fr) minmax(0,5fr);gap:clamp(28px,4vw,56px);align-items:start}
.mc-scen{display:flex;flex-wrap:wrap;align-items:center;justify-content:space-between;gap:12px;margin-bottom:22px}
.mc-chip{margin-top:16px;font-size:13.5px;color:var(--ink-2);padding:10px 14px;border:1px dashed var(--line);border-radius:var(--radius)}
.mc .field .in{overflow:visible}
.mc .field .in select{appearance:none;background:transparent url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 12 8'%3E%3Cpath d='M1 1.5l5 5 5-5' fill='none' stroke='%236F6259' stroke-width='1.6' stroke-linecap='round'/%3E%3C/svg%3E") no-repeat right 12px center/12px;padding-right:32px;cursor:pointer}
.mc .field .in>input:first-child,.mc .field .in>select:first-child{padding-left:12px}
.mc-l{font-family:var(--font-mono);font-size:11.5px;letter-spacing:.12em;text-transform:uppercase;color:var(--ink-2)}
.mc .field .seg{align-self:flex-start;flex-wrap:wrap}
.mc .field .seg label{padding:8px 13px;font:600 13.5px/1 var(--font-body);letter-spacing:0;text-transform:none;color:var(--ink-2)}
.mc .field .seg input:checked+label{color:var(--bg)}
.mc .field .mc-check{font:400 15px/1.4 var(--font-body);letter-spacing:0;text-transform:none;color:var(--ink)}
.mc-caps{display:flex;align-items:center;gap:6px}
.mc-caps .in{flex:1;min-width:0}
.mc-caps input{text-align:center;padding-left:8px!important;padding-right:0}
.mc-caps .in span{padding:0 8px 0 0}
.mc-caps-sep{color:var(--ink-2);font-family:var(--font-mono)}
.mc-est{color:var(--accent);font-weight:600}
/* collapsible groups */
.mc-group{border-top:1px solid var(--line)}
.mc-group:last-child{border-bottom:1px solid var(--line)}
.mc-group summary{list-style:none;cursor:pointer;display:grid;grid-template-columns:auto 1fr auto;align-items:center;gap:14px;padding:18px 0}
.mc-group summary::-webkit-details-marker{display:none}
.mc-group summary:hover .mc-gt{color:var(--accent)}
.mc-group summary:focus-visible{outline:2px solid var(--accent);outline-offset:4px;border-radius:4px}
.mc-gt{font-family:var(--font-display);font-variation-settings:"SOFT" 60,"opsz" 144;font-size:22px;letter-spacing:-.01em;transition:color .2s}
.mc-gs{font-family:var(--font-mono);font-size:12px;color:var(--ink-2);text-align:right;overflow:hidden;text-overflow:ellipsis;white-space:nowrap;min-width:0}
.mc-chev{width:22px;height:22px;border:1px solid var(--line);border-radius:50%;position:relative;flex:none;transition:transform .25s}
.mc-chev::before{content:"";position:absolute;left:7px;top:6px;width:6px;height:6px;border-right:1.5px solid var(--ink);border-bottom:1.5px solid var(--ink);transform:rotate(45deg)}
.mc-group[open] .mc-chev{transform:rotate(180deg)}
.mc-group[open] summary{padding-bottom:6px}
.mc-group .fields{padding:12px 0 28px}
/* results card additions */
.mc-results{position:sticky;top:calc(var(--nav-h) + 20px)}
.mc-bigs .big small{display:inline-block}
.mc-bignote{font-size:14px;color:var(--dark-ink-2);margin-top:12px;max-width:40ch;line-height:1.45}
.mc-bigs.cmp .mc-bignote{font-family:var(--font-body);font-size:13px;margin-top:4px;letter-spacing:0;text-transform:none}
.mc-bigs.cmp{display:grid;grid-template-columns:1fr 1fr;gap:16px}
.mc-bigs.cmp .big{font-size:clamp(30px,3.2vw,44px);display:flex;flex-direction:column;gap:6px}
.mc-bigs.cmp .big small{margin-left:0;font-size:11px}
.mc-tag{display:inline-block;font:600 11px/1 var(--font-mono);letter-spacing:.14em;color:var(--accent-on-dark);border:1px solid var(--dark-line);border-radius:var(--btn-radius);padding:5px 9px;width:max-content}
.mc-delta{grid-column:1/-1;font-size:14px;color:var(--dark-ink-2);border-top:1px solid var(--dark-line);padding-top:12px}
.result .r.cmp{display:grid;grid-template-columns:1.3fr 1fr 1fr;gap:12px;align-items:start}
.result .r.cmp .mono{text-align:right}
.mc-d{display:block;font-size:11px;font-family:var(--font-mono);margin-top:3px;color:var(--dark-ink-2)}
.mc-d.less{color:var(--accent-on-dark)}
.mc-d.more{color:#E0A79A}
.flag.warn{border-left-color:#E0A79A}
.flag+.flag{margin-top:10px}
.mc-printsum{display:none}
.mc-actions{margin-top:18px;display:flex;flex-direction:column;gap:14px}
.mc-actions .btn{justify-content:center}
.mc-minor{display:flex;flex-wrap:wrap;gap:8px 20px;font-size:14px}
.mc-status{font-family:var(--font-mono);font-size:12px;color:var(--accent);min-height:1em}
/* detail blocks */
.mc-detail{margin-top:clamp(40px,5vw,72px);display:grid;grid-template-columns:1fr 1fr;gap:clamp(36px,4vw,56px)}
.mc-block{min-width:0;padding:0}
.mc-block[data-chartblock],.mc-block[data-schedblock]{grid-column:1/-1}
.mc-block h3{font-size:clamp(22px,2.2vw,28px);margin-bottom:18px}
.mc-blockhead{display:flex;flex-wrap:wrap;align-items:center;justify-content:space-between;gap:12px 24px;margin-bottom:18px}
.mc-blockhead h3{margin-bottom:0}
.mc-scenlabel{font-family:var(--font-mono);font-size:13px;letter-spacing:.08em;color:var(--ink-2);margin-left:6px}
.mc-tablewrap{max-width:100%;overflow-x:auto;-webkit-overflow-scrolling:touch;border:1px solid var(--line);border-radius:var(--radius-lg)}
.mc-table{width:100%;border-collapse:collapse;font-size:14.5px;min-width:520px}
.mc-block[data-cashblock] .mc-table{min-width:0}
.mc-table th,.mc-table td{padding:11px 16px;text-align:right;border-bottom:1px solid var(--line);white-space:nowrap}
.mc-table th:first-child,.mc-table td:first-child{text-align:left}
.mc-table thead th{font-family:var(--font-mono);font-size:11px;letter-spacing:.12em;text-transform:uppercase;color:var(--ink-2);font-weight:500;background:var(--bg-2)}
.mc-table tfoot th,.mc-table tfoot td{font-weight:600;border-bottom:0;background:var(--bg-2)}
.mc-table tbody tr:last-child td{border-bottom:0}
.mc-table .mono{font-size:14px}
.mc-dim{color:var(--ink-2);font-family:var(--font-mono);font-size:12px;margin-left:6px}
.mc-note{font-size:13px;color:var(--ink-2);margin-top:12px;max-width:70ch}
.mc-tablewrap+.mc-note{margin-top:14px}
/* affordability */
.mc-dti{border:1px solid var(--line);border-left:3px solid var(--accent);border-radius:var(--radius);padding:18px 20px;display:grid;gap:10px;background:var(--bg)}
.mc-dti.over{border-left-color:#B5654B}
.mc-dti .mc-tag{color:var(--accent);border-color:var(--line)}
.mc-dti-row{display:grid;grid-template-columns:1fr auto auto;gap:14px;align-items:baseline;font-size:15px}
.mc-dti-row b{font-size:20px}
.mc-guide{font-family:var(--font-mono);font-size:12px;color:var(--ink-2)}
.mc-dti p{font-size:15px;margin-top:4px}
.mc-dti-grid{display:grid;grid-template-columns:1fr 1fr;gap:18px}
/* chart */
.mc-chart{max-width:860px}
.mc-chart svg{width:100%;height:auto;display:block;font-family:var(--font-mono)}
.mc-chart .grid{stroke:var(--line);stroke-width:1}
.mc-chart .lab{fill:var(--ink-2);font-size:inherit}
.mc-chart .line{fill:none;stroke-width:2.25;stroke-linejoin:round}
.mc-chart .line.a{stroke:var(--ink)}
.mc-chart .line.b{stroke:var(--accent)}
.mc-chart .line.base{stroke:var(--ink-2);stroke-dasharray:4 5;stroke-width:1.5}
.mc-chart .mi{stroke:var(--accent);stroke-dasharray:3 4}
.mc-chart text.mi{fill:var(--accent);stroke:none}
.mc-legend{display:flex;flex-wrap:wrap;gap:8px 22px;margin-top:12px;font-size:13.5px;color:var(--ink-2)}
.mc-key{display:inline-flex;align-items:center;gap:8px}
.mc-key::before{content:"";width:18px;height:0;border-top:2.25px solid var(--ink)}
.mc-key.b::before{border-color:var(--accent)}
.mc-key.base::before{border-top-style:dashed;border-color:var(--ink-2)}
.mc-key.mi::before{border-top-style:dotted;border-color:var(--accent)}
/* sticky mobile payment bar */
.mc-bar{display:none}
@media (max-width:900px){
  .mc-body{grid-template-columns:1fr}
  .mc-results{position:static}
  .mc-detail{grid-template-columns:1fr}
  .mc-bar{display:flex;align-items:baseline;justify-content:space-between;gap:16px;position:fixed;left:0;right:0;bottom:0;z-index:30;background:var(--dark);color:var(--dark-ink);padding:12px clamp(20px,5vw,64px);border-top:1px solid var(--dark-line)}
  .mc-bar-l{font:500 11px/1 var(--font-mono);letter-spacing:.14em;text-transform:uppercase;color:var(--dark-ink-2)}
  .mc-bar-v{font-family:var(--font-display);font-variation-settings:"SOFT" 60,"opsz" 144;font-size:26px;font-variant-numeric:tabular-nums}
  .mc-dti-grid{grid-template-columns:1fr}
}
@media (max-width:560px){
  .mc-top{flex-direction:column;align-items:stretch}
  .mc-mode{width:100%}
  .mc-mode label{flex:1;text-align:center}
  .mc-bigs.cmp{grid-template-columns:1fr}
  .result .r.cmp{grid-template-columns:1fr 1fr;gap:6px 12px}
  .result .r.cmp span:first-child{grid-column:1/-1;text-align:left}
  .result .r.cmp .mono:nth-child(2){text-align:left}
  .mc-group summary{grid-template-columns:1fr auto}
  .mc-gt{order:1}
  .mc-chev{order:2}
  .mc-gs{order:3;grid-column:1/-1;text-align:left;white-space:normal}
}
@media print{
  site-nav,site-footer,.nav,footer,.skip,.mc-top,.mc-inputs,.mc-actions,.mc-bar,.page-hero .ctas,.page-hero .status{display:none!important}
  .mc[data-mode="quick"] [data-full]{display:block!important}
  section{padding-block:12px!important}
  .sec-head{margin-bottom:12px}
  .page-hero .lede{display:none}
  .page-hero.photo{background:none!important;color:var(--ink)}
  .page-hero.photo::before,.page-hero.photo::after{display:none}
  .page-hero.photo h1,.page-hero.photo .crumbs{color:var(--ink)}
  .mc-body{display:block}
  .mc-printsum{display:block;font-size:12px;color:var(--ink-2);margin:10px 0 14px;max-width:none}
  .result{background:none;color:var(--ink);border:1px solid var(--ink);break-inside:avoid;padding:18px}
  .result .r span:first-child,.result .big small,.mc-heads,.mc-delta,.flag,.flag b,.mc-d{color:var(--ink)}
  .mc-detail{gap:24px}
  .mc-tablewrap{border:0;overflow:visible}
  .mc-table{font-size:12px;min-width:0}
  .mc-table th,.mc-table td{padding:6px 8px}
  .mc-block{break-inside:avoid}
}

/* ---------- mortgage FAQ (/mortgage-faq/) ---------- */
/* Every question is a native <details>: answers open without JS and Chrome's find-in-page reaches them.
   js/faq.js only adds deep links, Expand/Collapse all, Copy link, and open-all for print.
   Borrowed, not redefined: .rv-rule (group number rule, testimonials) and .mc-chev (calculator chevron). */
.faq-hero .wrap{display:grid;grid-template-columns:minmax(0,7fr) minmax(0,5fr);gap:clamp(40px,6vw,96px);align-items:center}
.faq-hero h1{max-width:13ch}
.faq-nums{background:var(--dark-2);border:1px solid var(--dark-line);border-radius:var(--radius-lg);padding:clamp(22px,2.6vw,32px)}
.faq-nums h2{font:500 12px/1.4 var(--font-mono);font-variation-settings:normal;letter-spacing:.14em;text-transform:uppercase;color:var(--accent-on-dark);margin-bottom:16px}
.faq-nums ul{list-style:none;margin:0;padding:0}
.faq-nums a{display:flex;justify-content:space-between;align-items:baseline;gap:16px;padding:13px 0;border-top:1px solid var(--dark-line);text-decoration:none;font-size:15.5px;line-height:1.35;color:var(--dark-ink)}
.faq-nums li:last-child a{border-bottom:1px solid var(--dark-line)}
.faq-nums .v{font-family:var(--font-mono);font-size:13px;letter-spacing:.02em;font-variant-numeric:tabular-nums;text-align:right;color:var(--dark-ink)}
.faq-nums a:hover span:first-child{color:var(--accent-on-dark)}
.faq-nums .note{margin-top:16px;font:500 11px/1.5 var(--font-mono);letter-spacing:.1em;text-transform:uppercase;color:var(--dark-ink-2)}
@media (max-width:820px){ .faq-hero .wrap{grid-template-columns:1fr;gap:40px} }
@media (max-width:440px){ .faq-nums a{flex-direction:column;align-items:flex-start;gap:4px} .faq-nums .v{text-align:left} }

.faq-layout{display:grid;grid-template-columns:minmax(0,250px) minmax(0,1fr);gap:clamp(40px,6vw,96px);align-items:start}
.faq-rail{position:sticky;top:calc(var(--nav-h) + 1px + 32px)}
.faq-rail .lbl{font:500 12px/1.4 var(--font-mono);letter-spacing:.12em;text-transform:uppercase;color:var(--ink-2);margin-bottom:14px}
.faq-rail ol{list-style:none;margin:0;padding:0;border-top:1.5px solid var(--ink)}
.faq-rail ol a{display:grid;grid-template-columns:auto minmax(0,1fr) auto;gap:12px;align-items:baseline;padding:12px 0;border-bottom:1px solid var(--line);text-decoration:none;font-size:15.5px;line-height:1.3;transition:color .2s}
.faq-rail ol a:hover{color:var(--accent)}
.faq-rail .n{font:500 12px/1 var(--font-mono);color:var(--accent)}
.faq-rail .c{font:500 12px/1 var(--font-mono);color:var(--ink-2);font-variant-numeric:tabular-nums}
.faq-rail .tools{margin-top:20px}
.faq-toggle{padding:11px 18px;font-size:14px}
.faq-toggle[hidden]{display:none}
.faq-ask{margin-top:28px;font-size:14.5px;line-height:1.5;color:var(--ink-2)}
.faq-ask a{color:var(--ink);font-weight:600;text-decoration:underline;text-decoration-color:var(--accent);text-underline-offset:3px}

.faq-group{scroll-margin-top:calc(var(--nav-h) + 28px)}
.faq-group + .faq-group{margin-top:clamp(56px,7vw,88px)}
.faq-group h2{font-size:clamp(28px,3vw,40px);margin-bottom:clamp(16px,2vw,24px)}
.faq-item{border-top:1px solid var(--line);scroll-margin-top:calc(var(--nav-h) + 20px)}
.faq-item:last-child{border-bottom:1px solid var(--line)}
.faq-item summary{list-style:none;cursor:pointer;display:grid;grid-template-columns:minmax(0,1fr) auto;gap:20px;align-items:center;padding:20px 0}
.faq-item summary::-webkit-details-marker{display:none}
.faq-item summary:focus-visible{outline:2px solid var(--accent);outline-offset:4px;border-radius:4px}
.faq-q{font-family:var(--font-display);font-variation-settings:"SOFT" 60,"opsz" 144;font-size:clamp(19px,1.75vw,23px);line-height:1.3;letter-spacing:-.01em;text-wrap:pretty;transition:color .2s}
.faq-item summary:hover .faq-q,.faq-item[open] .faq-q{color:var(--accent)}
.faq-item[open] .mc-chev{transform:rotate(180deg)}
.faq-a{padding:0 0 28px;max-width:66ch}
.faq-a p{line-height:1.6}
.faq-a p + p{margin-top:12px}
.faq-a p a{color:var(--accent);text-underline-offset:3px}
.faq-a .faq-more{margin-top:16px}
.faq-a .faq-more a{color:var(--ink);font-weight:600;text-decoration:none;border-bottom:1.5px solid var(--accent);padding-bottom:1px}
.faq-a .faq-more a:hover{color:var(--accent)}
.faq-foot{display:flex;flex-wrap:wrap;justify-content:space-between;align-items:baseline;gap:8px 24px;margin-top:20px;padding-top:14px;border-top:1px dashed var(--line);font:400 12.5px/1.6 var(--font-mono);color:var(--ink-2)}
.faq-foot .faq-src{flex:1 1 320px;margin:0;line-height:1.6}
.faq-src span{font-weight:500;letter-spacing:.12em;text-transform:uppercase;font-size:11px;margin-right:6px}
.faq-a .faq-src a{color:var(--ink-2);text-decoration:underline;text-decoration-color:var(--line);text-underline-offset:2px}
.faq-a .faq-src a:hover{color:var(--accent);text-decoration-color:currentColor}
.faq-copy{margin-left:auto;color:var(--ink-2);text-decoration:none;white-space:nowrap}
.faq-copy:hover{color:var(--accent)}
.faq-note{margin-top:clamp(40px,5vw,60px);font-size:14px;line-height:1.55;color:var(--ink-2);max-width:66ch}
.faq + .contact{border-top:1px solid var(--line)}
.faq-next a{color:var(--ink);text-decoration:underline;text-decoration-color:var(--accent);text-underline-offset:3px}
.faq-next a:hover{color:var(--accent)}
/* Answers slide open where the browser can animate to height:auto; elsewhere they just open. */
@supports (interpolate-size:allow-keywords){
  .faq-list{interpolate-size:allow-keywords}
  .faq-item::details-content{block-size:0;overflow-y:clip;transition:block-size .28s ease,content-visibility .28s allow-discrete}
  .faq-item[open]::details-content{block-size:auto}
}
/* The site-wide reduced-motion rule doesn't reach ::details-content, so switch the slide off here too. */
@media (prefers-reduced-motion:reduce){ .faq-item::details-content{transition:none} }
@media (max-width:980px){
  .faq-layout{grid-template-columns:minmax(0,1fr);gap:40px}
  .faq-rail{position:static}
  .faq-rail ol{display:flex;flex-wrap:wrap;gap:8px;border-top:0}
  .faq-rail ol a{display:inline-flex;gap:8px;padding:10px 14px;border:1px solid var(--sl-edge);border-radius:var(--btn-radius);font-size:14.5px}
  .faq-rail .tools{margin-top:16px}
  .faq-ask{display:none}
}
/* Phones: label and Expand all share a row; topics become one swipeable strip. position:relative keeps the
   chips' visually-hidden counts inside the strip; without it they widen the whole page. */
@media (max-width:560px){
  .faq-layout{gap:28px}
  .faq-rail{display:grid;grid-template-columns:minmax(0,1fr) auto;align-items:center;gap:14px 12px}
  .faq-rail .lbl{grid-column:1;grid-row:1;margin:0}
  .faq-rail .tools{grid-column:2;grid-row:1;margin:0}
  .faq-rail ol{grid-column:1/-1;grid-row:2;min-width:0;contain:inline-size;position:relative;flex-wrap:nowrap;overflow-x:auto;overscroll-behavior-x:contain;scrollbar-width:none;padding-bottom:2px}
  .faq-rail ol::-webkit-scrollbar{display:none}
  .faq-rail ol a{white-space:nowrap}
}
@media print{
  .faq-hero{background:none;color:var(--ink)}
  .faq-hero .crumbs,.faq-hero .byline,.faq-hero .byline b,.faq-nums a,.faq-nums .v{color:var(--ink)}
  .faq-nums{background:none;border-color:var(--line)}
  .faq-rail,.faq-copy,.faq-more,.faq + .contact{display:none!important}
  .faq-layout{display:block}
  .faq-item{break-inside:avoid}
}