:root{
  /* neutrals */
  --paper:#F4F4F3;--surface:#FFFFFF;--sunken:#ECEBE7;--border:#E2E1DC;
  --s300:#C7CBD0;--s500:#5E6670;--s700:#404853;--ink:#1C2127;
  /* warm accent — one ember, used sparingly */
  --ember:#EA580C;--rust:#C2410C;--clay:#9A3412;--ember-tint:#FCEDE6;
  --grad:linear-gradient(135deg,#FF5117,#CA1F01);
  /* type — friendly + human: Bricolage display, Figtree body. no monospace (reads warmer, less "techy"). */
  --sans:'Figtree',system-ui,-apple-system,'Segoe UI',Roboto,sans-serif;
  --display:'Bricolage Grotesque','Figtree',system-ui,sans-serif;
  --mono:'Figtree',system-ui,-apple-system,'Segoe UI',sans-serif;
  /* radius */
  --r4:4px;--r8:8px;--r12:12px;--r20:20px;--pill:999px;
  /* shadows you can barely see */
  --sh1:0 1px 2px rgba(28,33,39,.05),0 2px 6px rgba(28,33,39,.05);
  --sh2:0 6px 16px -8px rgba(28,33,39,.14),0 18px 40px -20px rgba(28,33,39,.16);
  --line:#D5D4CE;--ember-tint-bd:#F7D9C9;--foot-muted:#8A929C;--foot-text:#CBD0D6;
  --content:1240px;--prose:680px;--gutter:clamp(18px,4vw,40px);
}
*{box-sizing:border-box}
html{scroll-behavior:smooth;-webkit-text-size-adjust:100%}
body{margin:0;font-family:var(--sans);background:var(--paper);color:var(--s700);
  font-size:17px;line-height:1.65;-webkit-font-smoothing:antialiased;text-rendering:optimizeLegibility}
.wrap{max-width:var(--content);margin:0 auto;padding:0 var(--gutter)}
img{max-width:100%;display:block}
a{color:var(--clay);text-decoration:none}
a:hover{color:var(--rust)}
h1,h2,h3,h4,h5,h6{font-family:var(--display);color:var(--ink);margin:0}
h1{font-size:3.25rem;font-weight:700;line-height:1.08;letter-spacing:-.02em}
h2{font-size:2.5rem;font-weight:700;line-height:1.12;letter-spacing:-.015em}
h3{font-size:1.375rem;font-weight:600;line-height:1.3;letter-spacing:-.01em}
h4{font-size:1.125rem;font-weight:600;line-height:1.4}
p{margin:0 0 1rem}
strong{color:var(--ink);font-weight:700}
::selection{background:var(--ember-tint);color:var(--clay)}
:focus-visible{outline:3px solid var(--ember);outline-offset:2px;border-radius:var(--r4)}
.skip{position:absolute;left:-999px}
.skip:focus{left:12px;top:12px;background:var(--surface);padding:10px 14px;border-radius:var(--r8);z-index:200;box-shadow:var(--sh2)}
.center{text-align:center}

/* eyebrow — 7px ember dot + IBM Plex Mono clay text */
.eyebrow{display:inline-flex;align-items:center;gap:11px;font-family:var(--mono);font-size:12px;font-weight:600;
  letter-spacing:.18em;text-transform:uppercase;color:var(--clay);margin:0 0 16px}
.eyebrow::before{content:"";width:7px;height:7px;border-radius:999px;background:var(--ember);flex:none}
.eyebrow--onink{color:var(--ember)}
.eyebrow--plain::before{display:none}
.display{font-size:clamp(2.75rem,6vw,4.25rem);font-weight:700;line-height:1.04;letter-spacing:-.02em;color:var(--ink)}
.microcopy{font-family:var(--mono);font-size:.75rem;letter-spacing:.04em;color:var(--s500);margin-top:1.25rem}
.fineprint{font-size:.875rem;color:var(--s500);max-width:var(--prose)}

/* buttons — 48px tall, pill */
.btn{display:inline-flex;align-items:center;justify-content:center;gap:.5rem;
  min-height:48px;padding:0 1.5rem;border-radius:var(--pill);border:1.5px solid transparent;
  font-family:var(--sans);font-weight:600;font-size:1rem;cursor:pointer;
  transition:background .18s,border-color .18s,color .18s,transform .18s;white-space:nowrap}
.btn--sm{min-height:40px;padding:0 1.1rem;font-size:.9375rem}
.btn--lg{min-height:52px;padding:0 1.75rem;font-size:1.0625rem}
.btn--primary{background:var(--rust);color:#fff;border-color:var(--rust)}
.btn--primary:hover{background:var(--ember);border-color:var(--ember);color:#fff}
.btn--secondary{background:var(--surface);color:var(--ink);border-color:var(--border)}
.btn--secondary:hover{border-color:var(--s300);background:#fff;color:var(--ink)}
.btn--primary:hover,.btn--secondary:hover{transform:translateY(-1px)}
.btn:active{transform:translateY(0)}
/* scroll-reveal (progressive enhancement; only applied when JS runs) */
.reveal-init{opacity:0;transform:translateY(20px);
  transition:opacity .6s cubic-bezier(.22,.61,.36,1),transform .6s cubic-bezier(.22,.61,.36,1)}
.reveal-init.is-visible{opacity:1;transform:none}
.btn--ghost{background:transparent;color:#fff;border-color:rgba(255,255,255,.35)}
.btn--ghost:hover{background:rgba(255,255,255,.1);border-color:rgba(255,255,255,.6);color:#fff}

/* nav */
.nav{position:sticky;top:0;z-index:100;background:rgba(244,244,243,.62);
  backdrop-filter:saturate(180%) blur(12px);-webkit-backdrop-filter:saturate(180%) blur(12px);
  border-bottom:1px solid transparent;transition:background .25s,border-color .25s,box-shadow .25s}
.nav.scrolled{background:rgba(244,244,243,.9);border-bottom-color:var(--border);
  box-shadow:0 1px 2px rgba(28,33,39,.06),0 10px 30px -14px rgba(28,33,39,.2)}
.nav-inner{display:flex;align-items:center;justify-content:space-between;gap:16px;height:74px}
.brand{display:flex;align-items:center;gap:11px;color:var(--ink)}
.brand:hover{color:var(--ink)}
.brand-logo{width:36px;height:36px}
.brand-txt{display:block;line-height:1.04}
.brand-name{display:block;font-weight:700;font-size:17px;color:var(--ink)}
.brand-tag{display:block;font-family:var(--mono);font-size:9px;font-weight:500;letter-spacing:.2em;
  text-transform:uppercase;color:var(--s500)}
.nav-links{display:flex;align-items:center;gap:28px}
.nav-links>a:not(.btn){color:var(--s700);font-weight:500;font-size:15px;white-space:nowrap}
/* Seven items since 'Adult family homes' joined the nav (7 Oct 2026): tighter gaps until there is room. */
/* The lockup (name + eXp) never shrinks: when it could, a wide window squeezed its box below the
   383px it needs and "eXp Realty" printed over "Buying". The menu gap scales with the window
   instead, 14px at 1200px up to 24px, so the row always fits (8 Oct 2026, tested 1200-1900px). */
.nav-brand,header .brand,.exp-lockup--nav{flex-shrink:0} header .brand *{white-space:nowrap}
.nav-links{gap:clamp(14px, calc((100vw - 1100px) / 22), 24px)}
@media(max-width:1240px){.nav-links>a:not(.btn){font-size:14.5px}}
.nav-links>a:not(.btn):hover{color:var(--ink)}
.nav-cta{margin-left:.25rem}
.navtog,.burger{display:none}

.stars{color:var(--ember);letter-spacing:.06em}

/* section scaffold */
.section{padding:clamp(60px,8vw,108px) 0}
.section--sunken{background:var(--sunken);border-top:1px solid var(--border);border-bottom:1px solid var(--border)}
.section--snug{padding-top:clamp(40px,6vw,72px);padding-bottom:clamp(40px,6vw,72px)}
h2{font-weight:700;font-size:clamp(1.85rem,4vw,2.6rem);line-height:1.12;letter-spacing:-.015em;color:var(--ink)}
.section-head{max-width:640px;margin:0 0 40px}
.section-head h2{margin:0 0 14px;text-wrap:balance}
.section-head.center{margin-left:auto;margin-right:auto;text-align:center}
.section-head--split{display:flex;flex-wrap:wrap;align-items:flex-end;justify-content:space-between;gap:16px;max-width:none;margin:0 0 40px}
.section-lede{font-weight:400;font-size:clamp(1.02rem,1.8vw,1.13rem);line-height:1.65;color:var(--s500);text-wrap:pretty}
.section-lede.center{margin-left:auto;margin-right:auto}
.cat-block{margin:0 0 3.5rem}.cat-block:last-child{margin-bottom:0}
.cat-block h2{margin:0 0 1.5rem}

/* reassurance / features — slim band */
.features-sec{border-top:1px solid var(--border);border-bottom:1px solid var(--border);background:var(--sunken)}
.features{max-width:var(--content);margin:0 auto;padding:22px var(--gutter);display:flex;flex-wrap:wrap;
  gap:18px 40px;align-items:center;justify-content:space-between}
.feature{display:flex;align-items:center;gap:13px;min-width:220px}
.feature-ico{color:var(--rust);flex:none;display:inline-flex}
.feature-ico svg{width:24px;height:24px}
.feature-t{font-weight:700;font-size:15px;color:var(--ink);line-height:1.2}
.feature-d{font-weight:400;font-size:13px;color:var(--s500);line-height:1.2}
/* The phone item is a link, so it has to look like one: rust (not ember, which is too light
   for 15px text on --sunken), a hover wash, an underline and a focus ring. */
a.feature{text-decoration:none;color:inherit;margin:-8px -12px;padding:8px 12px;border-radius:var(--r12);
  transition:background .15s ease}
a.feature .feature-t{color:var(--rust)}
a.feature:hover{background:var(--surface)}
a.feature:hover .feature-t{text-decoration:underline;text-underline-offset:3px}
a.feature:focus-visible{outline:2px solid var(--ember);outline-offset:2px}

/* cards */
.card-grid{display:grid;grid-template-columns:repeat(auto-fill,minmax(280px,1fr));gap:1.25rem}
.svc-card{display:flex;flex-direction:column;background:var(--surface);border:1px solid var(--border);
  border-radius:var(--r20);padding:1.6rem;box-shadow:var(--sh1);transition:border-color .18s,transform .18s,box-shadow .18s}
.svc-card:hover{border-color:var(--s300);transform:translateY(-3px);box-shadow:var(--sh2)}
.svc-card h3{color:var(--ink)}
.svc-card p{color:var(--s500);font-size:.9375rem;margin:.5rem 0 1.25rem;flex:1}
.card-arrow{font-family:var(--mono);font-size:.75rem;font-weight:600;letter-spacing:.06em;color:var(--clay)}

/* area cards */
.area-grid{display:grid;grid-template-columns:repeat(auto-fill,minmax(200px,1fr));gap:1rem}
.area-card{display:flex;flex-direction:column;background:var(--surface);border:1px solid var(--border);
  border-radius:var(--r12);padding:1.25rem;box-shadow:var(--sh1);transition:border-color .18s,transform .18s,box-shadow .18s}
.area-card:hover{border-color:var(--s300);transform:translateY(-3px);box-shadow:var(--sh2)}
.ac-name{font-weight:700;color:var(--ink);font-size:1.0625rem}
.ac-med{font-weight:800;color:var(--rust);font-size:1.375rem;margin-top:.5rem;letter-spacing:-.01em}
.ac-k{font-family:var(--mono);font-size:.625rem;font-weight:500;letter-spacing:.1em;text-transform:uppercase;color:var(--s500);margin-top:.2rem}

/* about split */
.about-split{display:flex;flex-wrap:wrap;gap:clamp(32px,5vw,64px);align-items:center}
.about-media{flex:1 1 320px;min-width:280px;max-width:440px;position:relative;margin-bottom:22px}
.about-media img{width:100%;height:auto;aspect-ratio:4/5;object-fit:cover;object-position:center 14%;
  border-radius:22px;box-shadow:0 20px 50px -20px rgba(28,33,39,.28);background:#B4AEA9}
.about-copy{flex:1 1 420px;min-width:300px}
.about-copy h2{margin:0 0 20px;max-width:20ch}
.checks{list-style:none;padding:0;margin:0 0 32px;display:grid;grid-template-columns:repeat(auto-fit,minmax(220px,1fr));gap:14px 26px}
.checks li{display:flex;align-items:flex-start;gap:11px;color:var(--ink);font-weight:500;font-size:16px;line-height:1.4}
.checks svg{width:20px;height:20px;color:var(--rust);flex:none;margin-top:2px}

/* trust band — one unified card, 3 columns + dividers */
.trust-sec{padding:0 0 clamp(20px,4vw,40px)}
.trust{display:flex;flex-wrap:wrap;background:#fff;border:1px solid var(--border);border-radius:20px;box-shadow:0 1px 2px rgba(28,33,39,.05)}
.trust-item{flex:1 1 200px;text-align:center;padding:clamp(28px,4vw,44px);border-right:1px solid var(--border)}
.trust-item:last-child{border-right:none}
.trust-v{display:block;font-weight:800;font-size:clamp(2.6rem,5vw,3.4rem);line-height:1;letter-spacing:-.02em;color:var(--ink)}
.trust-v .accent{color:var(--ember)}
.trust-k{display:block;font-family:var(--mono);font-weight:500;font-size:12px;letter-spacing:.14em;
  text-transform:uppercase;color:var(--s500);margin-top:12px}

/* stat tiles (area pages) */
.stats{display:grid;grid-template-columns:repeat(auto-fit,minmax(180px,1fr));gap:1rem;margin:1.5rem 0 2rem}
.stat{background:var(--surface);border:1px solid var(--border);border-radius:var(--r12);padding:1.25rem;box-shadow:var(--sh1)}
.stat-k{display:block;font-family:var(--mono);font-size:.625rem;font-weight:500;letter-spacing:.09em;text-transform:uppercase;color:var(--s500)}
.stat-v{display:block;font-size:1.75rem;font-weight:800;color:var(--ink);margin:.35rem 0;letter-spacing:-.01em}
.delta{font-family:var(--mono);font-size:.75rem;font-weight:600}
.delta--up{color:#3f7d54}.delta--down{color:var(--rust)}.delta--flat{color:var(--s500)}

/* prose */
.prose{max-width:var(--prose)}
.prose h2{font-size:1.875rem;margin:2.5rem 0 1rem}
.prose h2:first-child{margin-top:0}
.prose p{color:var(--s700)}
.prose>p:first-of-type{font-size:1.1875rem;line-height:1.7}
.ticks{list-style:none;padding:0;margin:1rem 0}
.ticks li{position:relative;padding-left:1.6rem;margin:.5rem 0;color:var(--s700)}
.ticks li::before{content:"";position:absolute;left:.2rem;top:.6em;width:8px;height:8px;border-radius:50%;background:var(--ember)}

/* sectioned content + table of contents (neighborhoods, guides, any long-form content) */
.content-layout{display:grid;grid-template-columns:230px minmax(0,1fr);gap:clamp(28px,4vw,56px);align-items:start;max-width:1080px;margin:0 auto;padding:0 var(--gutter)}
@media(max-width:900px){.content-layout{grid-template-columns:1fr;gap:20px}}
.toc{position:sticky;top:96px;background:var(--sunken);border:1px solid var(--line);border-radius:16px;padding:18px 20px}
@media(max-width:900px){.toc{position:static}}
.toc-head{font-family:var(--mono);font-size:11px;font-weight:600;letter-spacing:.12em;text-transform:uppercase;color:var(--s500);margin:0 0 12px}
.toc-list{list-style:none;counter-reset:toc;margin:0;padding:0;display:flex;flex-direction:column;gap:1px}
.toc-list li{counter-increment:toc}
.toc-list a{display:flex;gap:9px;align-items:baseline;padding:6px 0;font-size:14px;line-height:1.35;color:var(--s700)}
.toc-list a::before{content:counter(toc,decimal-leading-zero);font-family:var(--mono);font-size:11px;font-weight:600;color:var(--clay);flex:none}
.toc-list a:hover{color:var(--clay)}
.content-main{min-width:0}
.content-main.prose{max-width:760px}
.content-section{scroll-margin-top:88px}
.content-section+.content-section{margin-top:40px;padding-top:40px;border-top:1px solid var(--line)}
.content-section>h2{margin-top:0;margin-bottom:14px}
.src-list{list-style:none;padding:0;margin:.5rem 0;display:flex;flex-direction:column;gap:.5rem;font-size:.9rem}
.src-list a{color:var(--s600)}.src-list a:hover{color:var(--clay)}
.table-wrap{overflow-x:auto;margin:1.5rem 0}
.credits-table{width:100%;border-collapse:collapse;font-size:.9rem;min-width:560px}
.credits-table th{text-align:left;font-family:var(--mono);font-size:11px;font-weight:600;letter-spacing:.08em;text-transform:uppercase;color:var(--s500);padding:0 14px 10px;border-bottom:1px solid var(--line)}
.credits-table td{padding:9px 14px;border-bottom:1px solid var(--line);color:var(--s700);vertical-align:top}
.credits-table tr:last-child td{border-bottom:none}
.credits-table a{color:var(--clay)}.credits-table a:hover{color:var(--rust)}

/* tags */
.tags{display:flex;flex-wrap:wrap;gap:.5rem;margin:1rem 0}
.tag{display:inline-block;background:var(--ember-tint);color:var(--clay);border-radius:var(--pill);
  padding:.4rem .9rem;font-size:.875rem;font-weight:600}
.tag:hover{background:#f7ded0;color:var(--rust)}

/* faq / sources */
.faq,.sources{border:1px solid var(--border);border-radius:var(--r12);background:var(--surface);
  padding:1rem 1.25rem;margin:.6rem 0;max-width:var(--prose)}
.faq summary,.sources summary{cursor:pointer;font-weight:600;color:var(--ink)}
.faq p{color:var(--s700);margin:.75rem 0 0}
.sources{background:var(--sunken)}
.sources ul{font-size:.875rem;color:var(--s500);margin:.75rem 0 0;padding-left:1.1rem}

/* subhero (interior page headers) */
.subhero{background:var(--sunken);border-bottom:1px solid var(--border)}
.subhero .wrap{padding:clamp(2.5rem,5vw,4rem) var(--gutter)}
.subhero h1{font-size:clamp(2.25rem,4vw,3.25rem)}
.subhero-lede{font-size:1.1875rem;line-height:1.7;color:var(--s700);max-width:60ch;margin:1rem 0 0}

/* breadcrumbs */
.crumbs{padding:1.1rem var(--gutter) 0;font-family:var(--mono);font-size:.75rem;letter-spacing:.03em;color:var(--s500)}
.crumbs a{color:var(--s500)}.crumbs a:hover{color:var(--clay)}.crumbs .sep{color:var(--s300)}

/* booking pages (/book/buying, /book/selling) */
.book-page{padding-top:2.4rem}
.book-layout{display:grid;grid-template-columns:minmax(280px,.85fr) 1.15fr;gap:3.2rem;align-items:start}
@media(max-width:900px){.book-layout{grid-template-columns:1fr;gap:2rem}}
.book-intro h1{font-size:clamp(1.9rem,3.4vw,2.6rem);line-height:1.1;margin:.4rem 0 .8rem}
.book-intro .book-lede{max-width:46ch;margin:0 0 1.4rem;text-align:left;color:var(--s600)}
.book-intro .checks{grid-template-columns:1fr;margin:0 0 1.6rem}  /* one per line — they're sentences, not tags */
.book-alt,.book-direct{font-size:.9rem;color:var(--s500);margin:.5rem 0 0}
.book-alt a,.book-direct a{color:var(--clay);font-weight:600}
.book-embed{position:relative;background:var(--surface);border:1px solid var(--border);
  border-radius:var(--r20);box-shadow:var(--sh1);overflow:hidden;min-height:700px}
/* Skeleton sits UNDER the Calendly iframe, which paints over it once it boots — so the box is
   never empty and we never have to detect "loaded". The iframe needs an explicit z-index: an
   absolutely-positioned skeleton would otherwise paint above a static iframe and hide the calendar. */
.book-embed .calendly-inline-widget{position:relative}
.book-skeleton{position:absolute;inset:0;z-index:0;display:flex;flex-direction:column;align-items:center;
  justify-content:center;gap:16px;color:var(--s500);font-size:.9rem;text-align:center;padding:0 20px}
.book-skeleton p{margin:0}
.book-spin{width:26px;height:26px;border-radius:50%;border:2.5px solid var(--border);
  border-top-color:var(--ember);animation:bookspin .8s linear infinite}
@keyframes bookspin{to{transform:rotate(360deg)}}
@media(prefers-reduced-motion:reduce){.book-spin{animation:none;border-top-color:var(--border)}}
.book-embed .calendly-inline-widget iframe{position:relative;z-index:1}
.book-fallback,.book-noscript{margin:0;padding:12px 16px;font-size:.85rem;color:var(--s500);
  border-top:1px solid var(--border);background:var(--paper);text-align:center}
.book-fallback a,.book-noscript a{color:var(--clay);font-weight:600}

/* contact */
.contact-grid{display:grid;grid-template-columns:1.4fr 1fr;gap:3rem;align-items:start}
.book-call{text-align:center;max-width:840px;margin:0 auto}
.book-call h2{margin:.35rem 0 .75rem}
.book-lede{max-width:54ch;margin:0 auto 30px;color:var(--s600)}
.book-choices{display:grid;grid-template-columns:1fr 1fr;gap:20px;max-width:720px;margin:0 auto}
@media(max-width:640px){.book-choices{grid-template-columns:1fr}}
.book-card{display:flex;flex-direction:column;gap:5px;text-align:left;padding:26px 28px;background:var(--surface);border:1px solid var(--border);border-radius:var(--r20);box-shadow:var(--sh1);transition:border-color .18s ease,transform .18s ease,box-shadow .18s ease}
.book-card:hover{border-color:var(--ember);transform:translateY(-3px);box-shadow:var(--sh2)}
.book-card .book-k{font-family:var(--mono);font-size:11px;font-weight:600;letter-spacing:.12em;text-transform:uppercase;color:var(--clay)}
.book-card .book-t{font-family:var(--display);font-size:1.3rem;font-weight:600;color:var(--ink);line-height:1.2}
.book-card .book-arrow{margin-top:10px;font-weight:600;font-size:14px;color:var(--ember)}
form label{display:block;font-weight:600;color:var(--ink);margin:1.1rem 0 0;font-size:.9375rem}
/* Radios and checkboxes are excluded deliberately. This rule was written for the contact
   form's text fields, but `form input` also matches a radio, so every radio on the site was
   being stretched to width:100% with 0.75rem of padding. Inside a shrink-to-fit label that
   collapses back to something sane and the damage stays invisible; inside a full-width one
   (.afh-radios is a grid) the control grew to the width of the column and shunted its own
   label text out past the border. */
form input:not([type=radio]):not([type=checkbox]),form select,form textarea{width:100%;
  margin-top:.4rem;padding:.75rem .9rem;font:inherit;
  color:var(--ink);background:var(--surface);border:1.5px solid var(--border);border-radius:var(--r8)}
form input::placeholder,form textarea::placeholder{color:var(--s300)}
form input:not([type=radio]):not([type=checkbox]):focus,form select:focus,form textarea:focus{
  outline:3px solid var(--ember);outline-offset:1px;border-color:var(--ember)}
form button{margin-top:1.5rem}
.hp{position:absolute;left:-9999px}
.contact-side{background:var(--surface);border:1px solid var(--border);border-radius:var(--r20);padding:1.75rem;box-shadow:var(--sh1)}
.contact-side h2{font-size:1.375rem;margin:0 0 1rem}
.contact-side p{margin:0 0 1rem}
.cs-k{display:block;font-family:var(--mono);font-size:.625rem;font-weight:500;letter-spacing:.09em;text-transform:uppercase;color:var(--s500);margin-bottom:.15rem}

/* about page */
.about-page{display:grid;grid-template-columns:.8fr 1.2fr;gap:3rem;align-items:start}
.about-page-media{position:sticky;top:96px}
.about-page-media img{width:100%;height:auto;aspect-ratio:4/5;object-fit:cover;border-radius:var(--r20);box-shadow:var(--sh2);background:var(--sunken)}
.about-card{background:var(--surface);border:1px solid var(--border);border-radius:var(--r20);padding:1.5rem;box-shadow:var(--sh1);margin-top:-3rem;position:relative;margin-left:1rem;margin-right:1rem}
.ac-role{font-family:var(--mono);font-size:.625rem;font-weight:600;letter-spacing:.1em;text-transform:uppercase;color:var(--clay);margin:0 0 .35rem}
.ac-name2{font-weight:800;font-size:1.375rem;color:var(--ink);margin:0 0 .35rem}
.ac-tag{font-size:.9375rem;color:var(--s500);margin:0 0 1.1rem}
.info-card{margin-top:2.5rem;background:var(--surface);border:1px solid var(--border);border-radius:18px;padding:28px 30px;box-shadow:0 1px 2px rgba(28,33,39,.05)}
.info-card h2{font-size:1.375rem;margin:0 0 18px}
.info-list{margin:0;display:flex;flex-direction:column}
.info-row{display:grid;grid-template-columns:150px 1fr;gap:16px;padding:14px 0;border-top:1px solid var(--border)}
.info-row:first-child{border-top:none;padding-top:0}
.info-row dt{font-family:var(--mono);font-weight:600;font-size:11px;letter-spacing:.08em;text-transform:uppercase;color:var(--clay)}
.info-row dd{margin:0;font-size:15px;line-height:1.5;color:var(--s700)}
@media(max-width:560px){.info-row{grid-template-columns:1fr;gap:4px}}

/* cta band — contained rounded ink card with house watermark */
.cta{padding:clamp(40px,6vw,72px) 0 clamp(56px,7vw,88px)}
.cta-inner{position:relative;overflow:hidden;background:var(--ink);border-radius:26px;padding:clamp(40px,6vw,72px)}
.cta-inner::after{content:"";position:absolute;right:-70px;bottom:-80px;width:min(40vw,360px);aspect-ratio:1;
  background:url(/assets/img/logo.png) center/contain no-repeat;opacity:.08;pointer-events:none}
.cta-copy{position:relative;max-width:660px}
.cta-copy h2{font-weight:800;font-size:clamp(2rem,4.5vw,3rem);line-height:1.08;letter-spacing:-.02em;color:#fff;margin:0 0 18px;text-wrap:balance}
.cta-sub{font-weight:400;font-size:clamp(1.05rem,2vw,1.2rem);line-height:1.6;color:var(--foot-text);margin:0 0 32px;max-width:52ch;text-wrap:pretty}
.cta-actions{display:flex;flex-wrap:wrap;gap:14px;align-items:center}

/* footer */
.footer{background:var(--ink);color:#fff;padding:clamp(48px,7vw,72px) 0 34px;border-top:1px solid #2C333B}
.footer-top{display:grid;grid-template-columns:repeat(auto-fit,minmax(180px,1fr));gap:36px;padding-bottom:40px;border-bottom:1px solid #2C333B}
.footer-brand{min-width:200px}
.footer-brand .brand{margin-bottom:16px}
.footer-brand .brand-name{color:#fff;font-size:18px}
.footer-brand .brand-tag{color:var(--foot-muted);font-size:9.5px}
.footer-tag{font-weight:400;font-size:14px;line-height:1.6;color:var(--foot-text);max-width:34ch;margin:0}
.footer-col h5{font-family:var(--mono);font-size:12px;font-weight:600;letter-spacing:.14em;text-transform:uppercase;color:var(--foot-muted);margin:0 0 14px}
.footer-col ul{list-style:none;margin:0;padding:0;display:flex;flex-direction:column;gap:10px}
.footer-col li{font-size:15px}
.footer-col a{color:var(--foot-text)}.footer-col a:hover{color:var(--ember)}
.footer-col--contact ul{gap:6px}.footer-col--contact li{color:var(--foot-text);line-height:1.45}.footer-col--contact li strong{color:#fff}
.footer-legal{padding-top:24px}
.footer-fh{font-family:var(--mono);font-size:11px;line-height:1.6;letter-spacing:.02em;color:var(--foot-muted);margin:0 0 16px}
.footer-base{display:flex;justify-content:space-between;gap:16px;flex-wrap:wrap;align-items:center;
  font-family:var(--mono);font-weight:500;font-size:12px;letter-spacing:.04em;color:var(--foot-muted)}
.footer-tagline{font-family:var(--mono);letter-spacing:.08em;text-transform:uppercase}

/* trust bar stars */
.trust-stars{display:block;color:var(--ember);letter-spacing:.1em;font-size:13px;margin-top:8px}

/* featured listings */
.listing-grid{display:grid;grid-template-columns:repeat(auto-fill,minmax(280px,1fr));gap:24px}
/* Homepage Listings fallback: one full-width card, copy left and both actions right. It used to sit
   in the first 280px cell of a three-column grid with nothing beside it, which read as a section
   that had failed to load. */
.listings-fallback{display:grid;grid-template-columns:minmax(0,1.5fr) minmax(0,1fr);gap:28px 48px;align-items:center;
  background:var(--surface);border:1px solid var(--border);border-radius:var(--r12);padding:30px 34px}
.listings-fallback[hidden]{display:none}
.lf-copy p:last-child{margin-bottom:0}
.lf-cta{display:flex;flex-direction:column;gap:12px;align-items:stretch}
.lf-cta .btn{justify-content:center;text-align:center}
@media (max-width:760px){.listings-fallback{grid-template-columns:1fr;padding:22px 20px}}
.listing-card{display:flex;flex-direction:column;background:#fff;border:1px solid var(--border);border-radius:18px;
  overflow:hidden;box-shadow:0 1px 2px rgba(28,33,39,.05);transition:transform .22s ease,box-shadow .22s ease}
.listing-card:hover{transform:translateY(-5px);box-shadow:0 18px 40px -16px rgba(28,33,39,.22)}
.listing-photo{position:relative;display:block;aspect-ratio:4/3;background:#E7E6E1;
  border-bottom:1px solid var(--border);overflow:hidden}
.listing-img{width:100%;height:100%;object-fit:cover;display:block;transition:transform .5s ease}
.listing-card:hover .listing-img{transform:scale(1.04)}
/* The image is the NEIGHBOURHOOD, not the home (see SAMPLE_LISTINGS). This tag is what keeps
   that honest, so it must stay legible over any photo — hence the scrim behind it. */
.listing-area-tag{position:absolute;left:0;right:0;bottom:0;z-index:1;padding:22px 13px 9px;
  background:linear-gradient(to top,rgba(24,28,33,.82),rgba(24,28,33,.45) 55%,transparent);
  color:#fff;font-family:var(--mono);font-weight:600;font-size:10.5px;letter-spacing:.09em;text-transform:uppercase}
.listing-badge{position:absolute;top:14px;left:14px;z-index:1;font-family:var(--mono);font-weight:500;font-size:10.5px;letter-spacing:.06em;
  color:var(--clay);background:var(--paper);border:1px solid var(--ember-tint-bd);border-radius:999px;padding:5px 11px}
.listing-body{padding:20px 22px}
.listing-top{display:flex;align-items:baseline;justify-content:space-between;gap:12px}
.listing-price{font-weight:700;font-size:22px;color:var(--ink)}
.listing-view{font-family:var(--mono);font-weight:600;font-size:11px;letter-spacing:.06em;color:var(--clay);
  white-space:nowrap;border-bottom:1px solid transparent;transition:border-color .18s ease}
.listing-view:hover{border-bottom-color:var(--clay)}
.listing-addr{font-weight:400;font-size:15px;line-height:1.5;color:var(--s700);margin:5px 0 0}
.listing-meta{font-family:var(--mono);font-weight:500;font-size:12px;letter-spacing:.04em;color:var(--s500);margin:14px 0 0;padding-top:13px;border-top:1px solid var(--border)}
.sample-note{font-family:var(--mono);font-weight:500;font-size:12px;letter-spacing:.04em;color:#8A8F97;margin-top:22px}

/* shared block lede */
.blk-lede{font-weight:400;font-size:clamp(1.02rem,1.8vw,1.15rem);line-height:1.7;color:var(--s700);margin:0 0 28px;max-width:56ch;text-wrap:pretty}

/* why choose me — on ink, with gradient photo panel */
.why{background:var(--ink);padding:clamp(60px,8vw,110px) 0;position:relative;overflow:hidden}
.why::after{content:"";position:absolute;right:-90px;top:-70px;width:min(42vw,420px);aspect-ratio:1;
  background:url(/assets/img/logo.png) center/contain no-repeat;opacity:.06;pointer-events:none}
.why-inner{position:relative;display:flex;flex-wrap:wrap;gap:clamp(36px,5vw,72px)}
.why-left{flex:1 1 320px;min-width:290px;display:flex;flex-direction:column}
.why-left h2{color:#fff;margin:0 0 18px;max-width:14ch;text-wrap:balance}
.why-lede{font-weight:400;font-size:clamp(1.02rem,1.8vw,1.15rem);line-height:1.65;color:var(--foot-text);margin:0 0 28px;max-width:44ch;text-wrap:pretty}
.why-photo{margin-top:auto;position:relative;border-radius:20px;overflow:hidden;min-height:220px;
  background:linear-gradient(160deg,#2A3038,#7A2C10);display:flex;align-items:flex-end;justify-content:center}
.why-photo img{width:88%;max-width:340px;height:auto;filter:drop-shadow(0 18px 30px rgba(0,0,0,.35))}
.why-cards{flex:1 1 420px;min-width:300px;display:grid;grid-template-columns:repeat(auto-fit,minmax(220px,1fr));gap:16px;align-content:start}
.why-item{background:#23282F;border:1px solid #2F353D;border-radius:16px;padding:24px 22px;transition:border-color .2s ease}
.why-item:hover{border-color:#5A4034}
.why-num{display:block;font-family:var(--mono);font-weight:600;font-size:13px;letter-spacing:.1em;color:var(--ember);margin-bottom:16px}
.why-item h3{font-weight:600;font-size:19px;line-height:1.25;color:#fff;margin:0 0 9px}
.why-item p{font-weight:400;font-size:14.5px;line-height:1.55;color:#AEB4BC;margin:0}

/* name pill on the About portrait. The "meet your advisor" block it came from was merged
   into About; only the pill survived, so only its rules do. */
.about-tag{position:absolute;left:50%;bottom:-22px;transform:translateX(-50%);text-align:center;white-space:nowrap;
  background:var(--ink);border-radius:14px;padding:13px 26px;box-shadow:0 16px 34px -14px rgba(28,33,39,.5)}
.at-n{display:block;font-weight:700;color:#fff;font-size:18px}
.at-k{display:block;font-family:var(--mono);font-weight:500;font-size:10.5px;letter-spacing:.12em;text-transform:uppercase;color:var(--ember);margin-top:3px}

/* where I work — descriptive neighborhood cards */
.hood-grid{display:grid;grid-template-columns:repeat(auto-fill,minmax(260px,1fr));gap:18px}
.hood-card{display:flex;flex-direction:column;background:#fff;border:1px solid var(--border);border-radius:16px;padding:24px;
  overflow:hidden;transition:transform .2s ease,border-color .2s ease,box-shadow .2s ease}
.hood-card:hover{transform:translateY(-4px);border-color:var(--ember);box-shadow:0 16px 36px -18px rgba(28,33,39,.22)}
.hood-card--photo{padding:0}
.hood-photo{aspect-ratio:16/10;overflow:hidden;background:var(--sunken)}
.hood-photo img{width:100%;height:100%;object-fit:cover;display:block;transition:transform .3s ease}
.hood-card--photo:hover .hood-photo img{transform:scale(1.04)}
.hood-body{display:flex;flex-direction:column;flex:1;padding:24px}
.hood-top{display:flex;align-items:center;justify-content:space-between;gap:12px;margin-bottom:10px}
.hood-name{font-weight:700;color:var(--ink);font-size:21px}
.hood-pin{display:inline-flex;color:var(--rust);flex:none}.hood-pin svg{width:20px;height:20px}
.hood-desc{font-weight:400;font-size:14.5px;line-height:1.5;color:var(--s500);margin:0 0 16px;flex:1}
.hood-med{font-family:var(--mono);font-weight:500;font-size:12px;letter-spacing:.06em;color:var(--clay);
  padding-top:14px;border-top:1px solid var(--border)}
/* area-page photo banner */
.area-banner{max-width:var(--content);margin:0 auto;padding:clamp(24px,4vw,44px) var(--gutter) 0}
.area-banner img{width:100%;height:auto;aspect-ratio:21/8;object-fit:cover;border-radius:20px;background:var(--sunken);
  box-shadow:0 20px 50px -24px rgba(28,33,39,.28)}

/* client stories */
.stories-head{margin-left:auto;margin-right:auto}
.story-grid{display:grid;grid-template-columns:repeat(auto-fill,minmax(300px,1fr));gap:22px}
.story-card{display:flex;flex-direction:column;background:#fff;border:1px solid var(--border);border-radius:18px;
  padding:30px 28px;box-shadow:0 1px 2px rgba(28,33,39,.05)}
.story-stars{font-weight:600;font-size:15px;letter-spacing:.08em;color:var(--ember);margin-bottom:16px}
.story-quote{font-weight:400;font-size:17px;line-height:1.6;color:#2A2F36;margin:0 0 24px;text-wrap:pretty}
.story-person{display:flex;align-items:center;gap:13px;margin-top:auto;padding-top:20px;border-top:1px solid var(--border)}
.story-avatar{flex:none;width:44px;height:44px;border-radius:999px;background:var(--ember-tint);color:var(--clay);
  display:flex;align-items:center;justify-content:center;font-weight:700;font-size:16px}
.story-name{display:block;font-weight:700;color:var(--ink);font-size:15px}
.story-meta{display:block;font-family:var(--mono);font-weight:500;font-size:11px;letter-spacing:.05em;text-transform:uppercase;color:var(--s500);margin-top:2px}

@media(max-width:920px){
  .trust-item{border-right:none;border-bottom:1px solid var(--border)}
  .trust-item:last-child{border-bottom:none}
  .about-page{grid-template-columns:1fr;gap:2rem}
  .about-page-media{position:static;max-width:420px}
  .about-card{margin-top:-2.5rem}
  .contact-grid{grid-template-columns:1fr;gap:2rem}
  .section-head--split{flex-direction:column;align-items:flex-start}
  .footer-top{grid-template-columns:1fr 1fr;gap:2rem}
  .footer-brand{grid-column:1/-1}
  .mesh-links{columns:3 120px}
}
@media(max-width:1000px){
  .checks{grid-template-columns:1fr}
  .hood-grid{grid-template-columns:1fr;max-width:460px;margin:0 auto}
  .footer-top{grid-template-columns:1fr}
  .mesh-links{columns:2 110px}
}
/* Mobile nav. The hamburger has to take over when the row runs out of room rather than at a
   round number: the brand lockup is 316px wide, the links and the CTA are 655px, and with the
   16px gap and two 40px gutters the desktop row needs 1067px. Below that the lockup is the only
   thing in the row that can give, so it squeezes and "Henos Adhana / SEATTLE BORN & RAISED"
   breaks over four lines beside the links. This lived at 1000px, which left 1001-1066px broken
   and put an iPad in landscape (1024px) square in the middle of it. 1100px clears the 1067px
   with enough left over for a desktop scrollbar, which counts against the media query width.
   Raised to 1199px on 8 Oct 2026: with "Adult family homes" added the desktop row needs about
   1140px, so 1101-1199px overflowed. */
@media(max-width:1199px){
  .burger{display:flex;flex-direction:column;justify-content:center;gap:5px;width:44px;height:44px;cursor:pointer}
  .burger span{display:block;width:22px;height:2px;background:var(--ink);border-radius:2px;transition:.2s}
  .nav-links{position:fixed;inset:72px 0 auto 0;flex-direction:column;align-items:stretch;gap:0;
    background:var(--surface);border-bottom:1px solid var(--border);padding:.5rem var(--gutter) 1.25rem;
    transform:translateY(-140%);transition:transform .22s ease;box-shadow:var(--sh2)}
  .nav-links>a{padding:.9rem 0;border-bottom:1px solid var(--border);font-size:1rem}
  .nav-cta{margin:.9rem 0 0}
  .navtog:checked~.nav-links{transform:translateY(0)}
}
@media(prefers-reduced-motion:reduce){*{transition:none!important;scroll-behavior:auto!important}}

/* ---------------------------------------------------------------- guides: long-form reading UI
   Sticky contents rail with scroll-spy on desktop, a collapsed dropdown on mobile, a reading
   progress bar, numbered step cards and anchored headings. The measure stays at --prose (680px)
   because that is the readable line length; the rail sits outside it rather than squeezing it. */
/* long-form reading: bigger type, looser leading, clearer heading rhythm */
.guide-body p,.content-main p{font-size:1.125rem;line-height:1.78;margin:0 0 1.25rem}
.guide-body li,.content-main li{line-height:1.72}
.guide-body ul,.guide-body ol,.content-main ul,.content-main ol{margin:0 0 1.25rem;padding-left:1.15rem}
.guide-body h2,.content-main h2{margin-top:3rem;line-height:1.2}
.guide-body h3,.content-main h3{font-size:1.1875rem;color:var(--ink);margin:2rem 0 .55rem;line-height:1.35}
.guide-body strong,.content-main strong{color:var(--ink);font-weight:600}
/* the opening paragraph of a section carries the point; give it a touch more presence */
.content-section>p:first-of-type{font-size:1.1875rem;line-height:1.7;color:var(--s700)}
/* a mid-page prompt for neighbourhood pages, quieter than the closing band */
.area-midcta{margin:2.5rem 0;padding:1.25rem 1.5rem;background:var(--sunken);
  border:1px solid var(--border);border-radius:var(--r12);display:flex;flex-wrap:wrap;
  align-items:center;justify-content:space-between;gap:1rem}
.area-midcta p{margin:0;color:var(--s700);max-width:36ch;font-size:1rem}

/* neighbourhood map comparison table — the differentiator vs competitor map pages, which
   carry character descriptions and no prices. Sortable, tabular figures, scrolls on mobile. */
.nbmap-wrap{overflow-x:auto;border:1px solid var(--border);border-radius:var(--r12);background:var(--surface)}
table.nbmap{width:100%;border-collapse:collapse;font-size:.9375rem;min-width:560px}
table.nbmap th{text-align:left;padding:.85rem 1rem;background:var(--sunken);color:var(--ink);
  font-weight:600;font-size:.875rem;border-bottom:1px solid var(--border);white-space:nowrap;
  position:sticky;top:0}
table.nbmap th.n,table.nbmap td.n{text-align:right;font-variant-numeric:tabular-nums}
table.nbmap th:hover{color:var(--clay)}
table.nbmap th::after{content:"";display:inline-block;width:0;height:0;margin-left:.4rem;
  border-left:4px solid transparent;border-right:4px solid transparent;
  border-top:5px solid var(--s300);vertical-align:middle}
table.nbmap td{padding:.8rem 1rem;border-bottom:1px solid var(--border)}
table.nbmap tr:last-child td{border-bottom:0}
table.nbmap tbody tr:hover{background:var(--sunken)}
table.nbmap td a{color:var(--ink);font-weight:500}
table.nbmap td a:hover{color:var(--clay)}


/* footer: newsletter beside a portrait. The panel behind the photo is a flat offset block,
   not a rotated gradient: at this size a rotation leaves uneven slivers on two corners and reads
   as a mistake rather than a flourish. A clean offset reads deliberate. */
.footer-signup{display:grid;gap:2rem;padding:2.75rem 0 2.5rem;border-bottom:1px solid rgba(255,255,255,.1)}
@media(min-width:900px){.footer-signup{grid-template-columns:minmax(0,1fr) 300px;gap:4rem;
  align-items:center;padding:3.5rem 0 3rem}}
.footer-signup-copy{max-width:44rem}
.footer-signup-copy h4{color:#fff;font-size:1.5rem;margin:0 0 .55rem;line-height:1.25;
  letter-spacing:-.01em;text-wrap:balance}
.footer-signup-copy p{color:var(--foot-text);margin:0 0 1.15rem;line-height:1.65;
  max-width:46ch;text-wrap:pretty}
.footer-form{display:flex;flex-wrap:wrap;gap:.6rem;max-width:520px}
.footer-form input[type=email]{flex:1 1 200px;min-width:0;min-height:48px;padding:0 1rem;font:inherit;
  border:1px solid rgba(255,255,255,.18);border-radius:var(--r8);
  background:rgba(255,255,255,.06);color:#fff}
.footer-form input[type=email]::placeholder{color:var(--foot-muted)}
.footer-form input[type=email]:focus{outline:2px solid var(--ember);outline-offset:1px;border-color:var(--ember)}
.footer-hp{position:absolute;left:-9999px}
.footer-fine{font-size:.8125rem;color:var(--foot-muted);margin:.85rem 0 0}
.footer-signup-photo{position:relative;justify-self:center;width:270px;max-width:100%}
@media(min-width:900px){.footer-signup-photo{justify-self:end}}
.footer-signup-photo::before{content:"";position:absolute;inset:0;border-radius:var(--r20);
  background:var(--ember);transform:translate(14px,14px)}
.footer-signup-photo img{position:relative;width:100%;height:auto;aspect-ratio:4/5;
  border-radius:var(--r20);object-fit:cover;object-position:50% 22%;display:block}
.footer-socials{display:flex;gap:.55rem;margin-top:1.1rem}
.footer-soc{display:grid;place-items:center;width:40px;height:40px;border-radius:50%;
  background:rgba(255,255,255,.07);color:var(--foot-text);transition:background .15s,color .15s}
.footer-soc:hover{background:var(--ember);color:#fff}
.footer-contact-strip{display:flex;flex-wrap:wrap;gap:.5rem 1.75rem;padding:1.1rem 0;
  border-top:1px solid rgba(255,255,255,.1);font-size:.9375rem;color:var(--foot-muted)}
.footer-contact-strip a{color:var(--foot-text)}
.footer-contact-strip a:hover{color:var(--ember)}
.footer-copy{color:var(--foot-muted);font-size:.8125rem;margin:.6rem 0 0}

.area-intent{background:var(--sunken);border-bottom:1px solid var(--border);padding:.95rem 0}
.area-intent .wrap{display:flex;flex-wrap:wrap;align-items:center;gap:.7rem}
.area-intent b{color:var(--ink);font-weight:600;margin-right:.2rem}
.area-intent-call{color:var(--s500);font-size:.9375rem;margin-left:.3rem}
.area-intent-call:hover{color:var(--clay)}

/* market report: a data page, so the table is the design. Numbers get tabular figures so
   columns align, and the whole thing scrolls in its own container rather than the page. */
.mr-meta{font-size:.9375rem;color:var(--s500);margin:0 0 1.4rem}
.mr-meta b{color:var(--ink)}
.mr-stats{display:grid;grid-template-columns:repeat(auto-fit,minmax(158px,1fr));gap:1px;
  background:var(--border);border:1px solid var(--border);border-radius:var(--r12);overflow:hidden;margin:0 0 1.5rem}
.mr-stat{background:var(--surface);padding:1.15rem 1.25rem;display:flex;flex-direction:column;gap:.2rem}
.mr-stat-v{font-family:var(--display);font-size:1.75rem;font-weight:700;color:var(--ink);
  line-height:1.1;font-variant-numeric:tabular-nums}
.mr-stat-k{font-size:.8125rem;color:var(--s500)}
.mr-pending{font-size:.9375rem;color:var(--s500);background:var(--sunken);border-left:3px solid var(--s300);
  border-radius:0;padding:.9rem 1.15rem;margin:0 0 1.5rem}

.mr-tablewrap{overflow-x:auto;border:1px solid var(--border);border-radius:var(--r12);background:var(--surface)}
.mr-table{width:100%;border-collapse:collapse;font-size:.9375rem;min-width:820px}
.mr-table th{text-align:left;font-family:var(--mono);font-size:11px;letter-spacing:.07em;
  text-transform:uppercase;color:var(--s500);font-weight:600;padding:.85rem 1rem;
  border-bottom:1px solid var(--border);white-space:nowrap;background:var(--sunken);
  position:sticky;top:0;z-index:1}
.mr-table td{padding:.72rem 1rem;border-bottom:1px solid var(--border);
  font-variant-numeric:tabular-nums;white-space:nowrap;color:var(--s700)}
.mr-table tbody tr:last-child td{border-bottom:0}
.mr-table tbody tr:hover td{background:var(--sunken)}
.mr-area{font-variant-numeric:normal;white-space:normal;min-width:150px}
.mr-area a{color:var(--ink);font-weight:500}
.mr-area a:hover{color:var(--clay)}
.mr-up{color:#166534;font-weight:500}
.mr-down{color:var(--clay);font-weight:500}
.mr-flat{color:var(--s300)}
.mr-type{font-size:.8125rem;font-weight:500}
.mr-type--seller{color:var(--clay)}
.mr-type--buyer{color:#1D4ED8}
.mr-type--balanced{color:var(--s500)}
.mr-note{font-size:.875rem;color:var(--s500);line-height:1.65;margin:1rem 0 0;max-width:70ch}

.mr-signup{background:var(--sunken);border:1px solid var(--border);border-radius:var(--r12);
  padding:1.6rem 1.75rem;display:grid;gap:1.25rem}
@media(min-width:820px){.mr-signup{grid-template-columns:1fr auto;align-items:center;gap:2.5rem}}
.mr-signup h2{font-size:1.375rem;margin:0 0 .4rem}
.mr-signup p{margin:0;color:var(--s500);font-size:.9375rem;max-width:46ch}
.mr-form{display:flex;flex-wrap:wrap;gap:.6rem}
.mr-form input[type=email]{flex:1 1 230px;min-height:48px;padding:0 1rem;font:inherit;
  border:1px solid var(--border);border-radius:var(--r8);background:var(--surface);color:var(--ink)}
.mr-form input[type=email]:focus{outline:2px solid var(--ember);outline-offset:1px;border-color:var(--ember)}
.mr-hp{position:absolute;left:-9999px}

/* staging scaffold: deliberately looks unfinished so nobody mistakes it for a live page */
/* MLS display mockup. Intentionally plain: a reviewer is checking the required elements,
   not the styling, and obviously-placeholder data must never read as real inventory. */
.mock-grid{display:grid;gap:1rem;grid-template-columns:repeat(auto-fit,minmax(230px,1fr));margin:1.25rem 0}
.mock-card{border:1px solid var(--border);border-radius:var(--r12);overflow:hidden;background:var(--surface)}
.mock-photo{aspect-ratio:4/3;background:repeating-linear-gradient(45deg,var(--sunken),var(--sunken) 10px,
  var(--border) 10px,var(--border) 20px);display:grid;place-items:center;font-family:var(--mono);
  font-size:12px;letter-spacing:.12em;color:var(--s500)}
.mock-body{padding:.9rem 1rem}
.mock-top{display:flex;align-items:center;justify-content:space-between;gap:.5rem;margin-bottom:.35rem}
.mock-price{font-family:var(--display);font-size:1.25rem;font-weight:700;color:var(--ink)}
.mock-status{font-size:11px;font-family:var(--mono);letter-spacing:.06em;text-transform:uppercase;
  padding:.15rem .45rem;border-radius:3px;background:var(--sunken);color:var(--s500)}
.mock-status--active{background:#DCFCE7;color:#166534}
.mock-status--pending{background:var(--ember-tint);color:var(--clay)}
.mock-addr{margin:0 0 .3rem;font-weight:500;color:var(--ink);font-size:.9375rem;line-height:1.35}
.mock-addr span{font-weight:400;color:var(--s500)}
.mock-facts{margin:0 0 .6rem;font-size:.875rem;color:var(--s500)}
/* Why this house and not the one next to it, read straight off the feed. Chips rather than a
   list because they are scanned, not read: three words each, and the eye stops on the one it
   cares about. */
.mock-why{list-style:none;display:flex;flex-wrap:wrap;gap:.3rem;margin:0 0 .7rem;padding:0}
.mock-why li{font-size:.75rem;line-height:1.35;padding:.2rem .5rem;border:1px solid var(--border);
  border-radius:var(--r8);color:var(--s700);background:var(--sunken)}
.mock-attr{margin:0;padding-top:.6rem;border-top:1px solid var(--border);font-size:.75rem;
  color:var(--s500);line-height:1.5}
.mock-compliance{border:1px solid var(--border);border-radius:var(--r8);padding:1.1rem 1.25rem;
  background:var(--sunken);margin-bottom:1rem}
.mock-updated{margin:0 0 .7rem;font-size:.875rem;color:var(--s700)}
.mock-disc{margin:0 0 .7rem;font-size:.75rem;line-height:1.6;color:var(--s500)}
.mock-broker{margin:0;font-size:.75rem;color:var(--s500)}
.mock-checklist{font-size:.875rem;color:var(--s500);margin:0;padding-left:1.15rem}
.mock-checklist li{margin-bottom:.25rem}

.stg-banner{background:#7C2D12;color:#FFEDD5;font-size:.9375rem;padding:.85rem 0;line-height:1.55}
.stg-banner strong{color:#fff;text-transform:uppercase;letter-spacing:.08em;font-size:11px;
  border:1px solid #FDBA74;border-radius:3px;padding:.15rem .45rem;margin-right:.6rem}
.stg-lede{font-size:1.0625rem;color:var(--s700)}
.stg-tablewrap{overflow-x:auto;border:1px solid var(--border);border-radius:var(--r8);margin:1rem 0}
.stg-table{width:100%;border-collapse:collapse;font-size:.9375rem;min-width:420px}
.stg-table th{text-align:left;font-family:var(--mono);font-size:11px;letter-spacing:.07em;
  text-transform:uppercase;color:var(--s500);padding:.7rem 1rem;background:var(--sunken);
  border-bottom:1px solid var(--border)}
.stg-table td{padding:.6rem 1rem;border-bottom:1px solid var(--border);color:var(--s700)}
.stg-table tr:last-child td{border-bottom:0}
.stg-table code{font-family:var(--mono);font-size:.875rem;color:var(--clay);background:var(--sunken);
  padding:.1rem .4rem;border-radius:3px}
.stg-note{font-size:.9375rem;color:var(--s500);background:var(--sunken);border-left:3px solid var(--s300);
  border-radius:0;padding:.85rem 1.1rem}
.stg-checks{margin:1rem 0 0;padding-left:1.15rem}
.stg-checks li{margin-bottom:.4rem;line-height:1.65}
.stg-results{margin:1.6rem 0 0;padding:1.5rem;border:2px dashed var(--s300);border-radius:var(--r12);
  text-align:center;color:var(--s500);background:var(--sunken)}
.stg-results p{margin:0}

/* AFH landing: the form is the page, so it gets the visual weight */
.afh-watch{background:var(--sunken);border:1px solid var(--border);border-radius:var(--r20);
  padding:1.75rem;display:grid;gap:1.75rem}
@media(min-width:900px){.afh-watch{grid-template-columns:minmax(0,.85fr) minmax(0,1.15fr);
  gap:3rem;padding:2.5rem;align-items:start}}
.afh-watch-copy h2{font-size:1.75rem;margin:0 0 .75rem}
.afh-watch-copy p{color:var(--s700);margin:0 0 .9rem;line-height:1.7}
.afh-form fieldset{border:0;padding:0;margin:0 0 1.25rem}
.afh-form legend{font-family:var(--mono);font-size:11px;letter-spacing:.08em;text-transform:uppercase;
  color:var(--s500);font-weight:600;padding:0;margin-bottom:.6rem}
/* The two questions are chips, one wrapping row each, instead of seven stacked cards (Henos, 9 Oct 2026).
   The radio stays in the page, invisible and stretched over its chip, so it keeps its keyboard and
   required-field behaviour and the validation bubble still points at the right place. */
.afh-radios{display:flex;flex-wrap:wrap;gap:.5rem}
.afh-radio{position:relative;display:inline-flex;align-items:center;margin:0;padding:.55rem 1.05rem;
  background:var(--surface);border:1px solid var(--s300);border-radius:var(--pill);cursor:pointer;
  font-size:.9375rem;font-weight:500;color:var(--ink);line-height:1.3;
  transition:border-color .15s,background .15s,color .15s}
.afh-radio:hover{border-color:var(--ember)}
.afh-radio input{position:absolute;inset:0;width:100%;height:100%;opacity:0;margin:0;cursor:pointer}
.afh-radio:has(input:checked){border-color:var(--ink);background:var(--ink);color:#fff}
.afh-radio:has(input:focus-visible){outline:3px solid var(--ember);outline-offset:2px}
.afh-steps{list-style:none;counter-reset:afhs;margin:1.5rem 0 0;padding:0;display:grid;gap:1rem}
.afh-steps li{counter-increment:afhs;position:relative;padding-left:2.6rem;color:var(--s700);line-height:1.55}
.afh-steps li::before{content:counter(afhs);position:absolute;left:0;top:.05rem;width:1.75rem;height:1.75rem;
  border-radius:50%;background:var(--ember-tint);color:var(--clay);font-weight:700;font-size:.875rem;
  display:grid;place-items:center}
.afh-steps strong{color:var(--ink)}
.afh-grid{display:grid;gap:.85rem;margin-bottom:1.25rem}
@media(min-width:620px){.afh-grid{grid-template-columns:1fr 1fr}.afh-wide{grid-column:1/-1}}
.afh-grid label{display:flex;flex-direction:column;gap:.3rem;font-size:.875rem;font-weight:500;color:var(--ink)}
.afh-opt{font-weight:400;color:var(--s500)}
.afh-grid input,.afh-grid select,.afh-grid textarea{min-height:46px;padding:.6rem .8rem;font:inherit;
  font-size:.9375rem;border:1px solid var(--border);border-radius:var(--r8);background:var(--surface);
  color:var(--ink);width:100%}
.afh-grid textarea{min-height:auto;resize:vertical;line-height:1.6}
.afh-grid input:focus,.afh-grid select:focus,.afh-grid textarea:focus{outline:2px solid var(--ember);
  outline-offset:1px;border-color:var(--ember)}
.afh-fine{font-size:.8125rem;color:var(--s500);margin:.85rem 0 0;line-height:1.6}
.afh-hp{position:absolute;left:-9999px}

.guide-progress{position:fixed;top:0;left:0;right:0;height:3px;background:transparent;z-index:60;pointer-events:none}
.guide-progress span{display:block;height:100%;width:0;background:var(--grad)}
.guide-meta{font-family:var(--mono);font-size:12px;letter-spacing:.05em;color:var(--s500);margin-top:14px}
.guide-meta b{color:var(--s700);font-weight:600}

.guide-layout{display:grid;grid-template-columns:minmax(0,1fr);gap:32px}
@media(min-width:1060px){.guide-layout{grid-template-columns:240px minmax(0,var(--prose));
  justify-content:center;gap:60px;align-items:start}}

.guide-toc{font-size:.9375rem;min-width:0}
@media(min-width:1060px){.guide-toc{position:sticky;top:92px;max-height:calc(100vh - 132px);overflow-y:auto}}
.guide-toc>details{border:1px solid var(--border);border-radius:var(--r12);background:var(--surface);padding:.9rem 1.1rem}
.guide-toc summary{cursor:pointer;font-weight:600;color:var(--ink);list-style:none;display:flex;
  align-items:center;justify-content:space-between;gap:1rem}
.guide-toc summary::-webkit-details-marker{display:none}
.guide-toc summary::after{content:"";width:8px;height:8px;border-right:2px solid var(--s500);
  border-bottom:2px solid var(--s500);transform:rotate(45deg);transition:transform .18s ease;flex:none}
.guide-toc>details[open] summary::after{transform:rotate(-135deg)}
@media(min-width:1060px){
  .guide-toc>details{border:0;background:transparent;padding:0}
  .guide-toc summary{cursor:default;font-family:var(--mono);font-size:11px;letter-spacing:.09em;
    text-transform:uppercase;color:var(--s500);font-weight:600;margin-bottom:.55rem}
  .guide-toc summary::after{display:none}
}
.guide-toc ol{list-style:none;margin:.8rem 0 0;padding:0;display:grid;gap:1px;counter-reset:toc}
@media(min-width:1060px){.guide-toc ol{margin-top:0}}
.guide-toc a{display:block;padding:.44rem .8rem;border-left:2px solid var(--border);border-radius:0;
  color:var(--s500);line-height:1.35;transition:color .15s,background .15s,border-color .15s}
.guide-toc a:hover{color:var(--ink);background:var(--sunken)}
.guide-toc a.active{color:var(--clay);border-left-color:var(--ember);background:var(--ember-tint);font-weight:500}

.guide-answer{font-size:1.1875rem;line-height:1.55;color:var(--ink);background:var(--ember-tint);
  border-left:3px solid var(--ember);border-radius:0;padding:1.15rem 1.4rem;margin:0 0 2.2rem}
.guide-body h2{scroll-margin-top:104px;margin-top:2.75rem}
.guide-body h2:first-of-type{margin-top:0}
.guide-body h2 .anchor{opacity:0;margin-left:.45rem;color:var(--s300);font-weight:400;font-size:.7em;
  text-decoration:none;transition:opacity .15s}
.guide-body h2:hover .anchor,.guide-body h2 .anchor:focus{opacity:1}

.guide-currency{font-size:.9375rem;line-height:1.65;color:var(--s500);background:var(--sunken);
  border-left:3px solid var(--s300);border-radius:0;padding:.9rem 1.15rem;margin:1.4rem 0}

/* ---------------------------------------------------------------- guides hub
   A featured card, topic buttons and search, then a card grid. Every card is one link: the title
   anchor is stretched over the card, so a screen reader hears one link per guide instead of an
   image link, a title link and a "read more" link all going to the same place. */
.ghub [hidden]{display:none!important}
.ghub-top{padding:clamp(26px,5vw,54px) 0 6px}
.ghub-pill{display:inline-block;margin:0;background:var(--ember-tint);color:var(--rust);
  border-radius:999px;padding:5px 13px;font-size:.78rem;font-weight:700;letter-spacing:.07em;
  text-transform:uppercase}
.ghub-top h1{font-family:var(--display);font-size:clamp(2rem,4.6vw,3.2rem);line-height:1.06;
  margin:.55rem 0 .45rem;color:var(--ink)}
.ghub-lede{margin:0;max-width:46ch;color:var(--s700);font-size:clamp(1rem,1.6vw,1.12rem)}
.ghub{padding-top:clamp(18px,3vw,30px)}

.gfeat{position:relative;display:grid;grid-template-columns:minmax(0,1.15fr) minmax(0,1fr);
  gap:clamp(18px,3vw,38px);align-items:center;background:var(--surface);border:1px solid var(--border);
  border-radius:var(--r20);padding:clamp(12px,1.8vw,18px);margin:0 0 clamp(30px,4.5vw,48px)}
@media (max-width:860px){.gfeat{grid-template-columns:1fr}}
.gfeat-media{border-radius:var(--r12);overflow:hidden;aspect-ratio:3/2;background:var(--sunken)}
.gfeat-media img{display:block;width:100%;height:100%;object-fit:cover}
.gfeat-body{padding:4px clamp(4px,1.2vw,14px) 8px}
.gfeat-title{font-family:var(--display);font-size:clamp(1.5rem,2.7vw,2.15rem);line-height:1.14;
  margin:.35rem 0 .65rem}
.gfeat-excerpt{margin:0 0 1.15rem;color:var(--s700);font-size:1.03rem;line-height:1.55}
.gfeat-by{display:flex;gap:12px;align-items:center;margin:0;color:var(--s500);font-size:.93rem;line-height:1.35}
.gfeat-by img{width:44px;height:44px;border-radius:50%;object-fit:cover;flex:0 0 auto}
.gfeat-by b{color:var(--ink)}

.gfeat-title a,.gcard-title a{color:var(--ink);text-decoration:none}
.gfeat-title a::after,.gcard-title a::after{content:"";position:absolute;inset:0;border-radius:var(--r20)}
.gfeat-title a:focus-visible,.gcard-title a:focus-visible{outline:none}
.gfeat:focus-within,.gcard:focus-within{outline:3px solid var(--ember);outline-offset:3px}

.ghub-controls{display:flex;flex-wrap:wrap;gap:14px 20px;align-items:center;justify-content:space-between;
  margin:0 0 24px}
.ghub-tabs{display:flex;gap:7px;max-width:100%;overflow-x:auto;scrollbar-width:none;padding:2px}
.ghub-tabs::-webkit-scrollbar{display:none}
.ghub-tab{flex:0 0 auto;min-height:42px;padding:8px 15px;border:1px solid var(--border);border-radius:999px;
  background:var(--surface);color:var(--s700);font:inherit;font-size:.95rem;cursor:pointer;white-space:nowrap}
.ghub-tab span{margin-left:3px;color:var(--s500);font-size:.85em}
.ghub-tab:hover{border-color:var(--s300)}
.ghub-tab[aria-pressed="true"]{background:var(--ink);border-color:var(--ink);color:#fff}
.ghub-tab[aria-pressed="true"] span{color:#fff;opacity:.72}
.ghub-tab:focus-visible{outline:3px solid var(--ember);outline-offset:2px}
.ghub-search{flex:0 1 280px}
.ghub-search input{width:100%;min-height:44px;padding:10px 16px;border:1px solid var(--border);
  border-radius:999px;background:var(--surface);color:var(--ink);font:inherit;font-size:16px}
.ghub-search input:focus{outline:3px solid var(--ember);outline-offset:1px;border-color:var(--ember)}
@media (max-width:640px){.ghub-search{flex-basis:100%}}

.ghub-grid{list-style:none;margin:0;padding:0;display:grid;
  grid-template-columns:repeat(auto-fill,minmax(min(100%,290px),1fr));gap:clamp(18px,2.4vw,28px)}
.gcard{position:relative;display:flex;flex-direction:column;background:var(--surface);
  border:1px solid var(--border);border-radius:var(--r20);padding:12px 12px 16px;
  transition:transform .16s ease,box-shadow .16s ease}
.gcard:hover{transform:translateY(-2px);box-shadow:0 12px 26px rgba(28,33,39,.08)}
.gcard-media{aspect-ratio:3/2;margin:0 0 13px;border-radius:var(--r12);overflow:hidden;background:var(--sunken)}
.gcard-media img{display:block;width:100%;height:100%;object-fit:cover}
.gcard-topic{margin:0 4px 5px;color:var(--rust);font-size:.76rem;font-weight:700;letter-spacing:.07em;
  text-transform:uppercase}
.gcard-title{margin:0 4px 7px;font-family:var(--display);font-size:1.17rem;line-height:1.26}
.gcard-excerpt{margin:0 4px 14px;color:var(--s700);font-size:.95rem;line-height:1.5;display:-webkit-box;
  -webkit-line-clamp:3;-webkit-box-orient:vertical;overflow:hidden}
.gcard-meta{margin:auto 4px 0;color:var(--s500);font-size:.85rem}

/* A guide without an illustration gets its term set large on a tile in its topic's colour. */
.gtile{display:flex;align-items:flex-end;width:100%;height:100%;padding:16px 18px;
  font-family:var(--display);font-weight:700;line-height:1.04;font-size:clamp(1.45rem,2.3vw,1.95rem)}
.gtile--buying,.gtile--costs{background:var(--ember-tint);color:var(--clay)}
.gtile--selling,.gtile--house{background:var(--sunken);color:var(--ink)}
.gtile--afh{background:var(--paper);color:var(--rust);box-shadow:inset 0 0 0 1px var(--border)}
.gfeat .gtile{padding:clamp(20px,3vw,32px);font-size:clamp(2rem,4.4vw,3.4rem)}

.ghub-empty{padding:44px 0 8px;text-align:center;color:var(--s700)}
.ghub-empty p{margin:0 0 14px;font-size:1.05rem}
.ghub-reset{min-height:44px;padding:9px 20px;border:1px solid var(--ink);border-radius:999px;
  background:var(--ink);color:#fff;font:inherit;cursor:pointer}
.ghub-reset:focus-visible{outline:3px solid var(--ember);outline-offset:2px}
@media (prefers-reduced-motion:reduce){.gcard{transition:none}.gcard:hover{transform:none}}

/* Explainer image. Scales to the column and keeps its aspect ratio, so the caption never slides
   under it on a phone. The border keeps a white-backed diagram from bleeding into the page. */
.guide-fig{margin:1.5rem 0 1.9rem}
.guide-fig img{display:block;width:100%;height:auto;border:1px solid var(--border);
  border-radius:var(--r12);background:var(--surface)}
.guide-fig figcaption{margin-top:.6rem;font-size:.95rem;color:var(--s500);line-height:1.5}

/* Who-pays columns and worked sums. The table is two columns, item and amount, so it reads
   on a phone without scrolling sideways; the wrapper scrolls if a cell ever forces it. */
.guide-split{display:grid;grid-template-columns:repeat(auto-fit,minmax(min(100%,250px),1fr));
  gap:14px;margin:1.4rem 0 1.75rem}
.guide-col{background:var(--surface);border:1px solid var(--border);border-radius:var(--r12);
  padding:1.1rem 1.25rem .35rem}
.guide-body .guide-col h3{margin:0 0 .65rem;font-size:1.0625rem}
.guide-body .guide-col ul{margin:0 0 .8rem;padding-left:1.1rem}
.guide-body .guide-col li{font-size:1rem;line-height:1.6;margin:0 0 .5rem}
.guide-tablewrap{overflow-x:auto;margin:1.4rem 0 1.75rem;border:1px solid var(--border);
  border-radius:var(--r12);background:var(--surface)}
.guide-table{width:100%;border-collapse:collapse;font-size:1rem;line-height:1.5}
.guide-table caption{caption-side:top;text-align:left;padding:1rem 1.15rem .35rem;
  font-family:var(--mono);font-size:11px;font-weight:600;letter-spacing:.08em;
  text-transform:uppercase;color:var(--clay)}
.guide-table thead th{padding:.55rem 1.15rem;border-bottom:1px solid var(--border);text-align:left;
  font-family:var(--mono);font-size:11px;font-weight:600;letter-spacing:.08em;
  text-transform:uppercase;color:var(--s500)}
.guide-table tbody th,.guide-table td{padding:.8rem 1.15rem;border-bottom:1px solid var(--border);
  vertical-align:top}
.guide-table tbody th{text-align:left;font-weight:500;color:var(--ink)}
.guide-table thead th:last-child,.guide-table td{text-align:right}
.guide-table td{white-space:nowrap;font-variant-numeric:tabular-nums;font-weight:600;color:var(--ink)}
.guide-table .gt-note{display:block;margin-top:.2rem;font-size:.875rem;font-weight:400;
  line-height:1.5;color:var(--s500)}
.guide-table tbody tr:last-child th,.guide-table tbody tr:last-child td{border-bottom:0}
.guide-table tfoot th,.guide-table tfoot td{padding:.9rem 1.15rem;border-top:1px solid var(--border);
  background:var(--sunken);font-weight:700;color:var(--ink);vertical-align:top}
.guide-table tfoot th{text-align:left}
.guide-split--check ul{list-style:none;padding-left:0}
.guide-body .guide-split--check li{position:relative;padding-left:1.75rem}
.guide-split--check li::before{content:"";position:absolute;left:0;top:.28em;width:1.05em;height:1.05em;
  border:1.5px solid var(--s500);border-radius:3px;background:var(--surface)}
/* Guides print as a handout: no contents rail, progress bar, buttons or source lists (they are
   on the page online), FAQs opened by GUIDE_JS, and a checklist that keeps its columns. */
@media print{
  /* Scroll-reveal holds anything not yet scrolled into view at opacity 0, which printed as
     blank sheets. Paper has no scroll: show everything. */
  .reveal-init{opacity:1!important;transform:none!important}
  .guide-toc,.guide-progress,.guide-midcta,.guide-cta,.crumbs,.guide-body h2 .anchor,
  .guide-sources,.guide-sources+ul,.calc-form,.calc noscript{display:none!important}
  .guide-layout{display:block}
  .guide-split{grid-template-columns:1fr 1fr;gap:10px}
  .guide-col,.guide-table tr,.faq,.guide-steps li{break-inside:avoid;page-break-inside:avoid}
  .guide-body h2{break-after:avoid;page-break-after:avoid;margin-top:1.6rem}
  .guide-col,.guide-tablewrap{border-color:#bbb}
}
/* Net proceeds calculator: the inputs in three short groups, the estimate as a guide table. */
.calc{margin:1.4rem 0 2rem;display:grid;gap:18px}
.calc-form{display:grid;gap:14px}
.calc fieldset{margin:0;border:1px solid var(--border);border-radius:var(--r12);background:var(--surface);
  padding:1rem 1.15rem 1.1rem;display:grid;grid-template-columns:repeat(auto-fit,minmax(min(100%,230px),1fr));gap:14px 18px}
.calc legend{padding:0 .4rem;font-family:var(--mono);font-size:11px;font-weight:600;letter-spacing:.08em;
  text-transform:uppercase;color:var(--clay)}
.calc-f{display:flex;flex-direction:column;gap:4px}
.calc-l{font-size:.9375rem;font-weight:600;color:var(--ink);line-height:1.35}
.calc-hint{font-size:.8125rem;line-height:1.4;color:var(--s500)}
.calc-in{display:flex;align-items:center;margin-top:auto;min-height:46px;background:var(--paper);
  border:1px solid var(--border);border-radius:var(--r8,8px);padding:0 12px;gap:6px}
.calc-in:focus-within{border-color:#F1C9B4;background:var(--surface);outline:2px solid var(--ember);outline-offset:1px}
/* Outranks the site's generic "form input" rule, whose border, padding and full width belong to
   the wrapper here. 16px keeps iPhones from zooming in when a field takes focus. */
.calc .calc-in input[name]{flex:1;width:auto;min-width:0;margin:0;border:0;border-radius:0;
  background:none;font:inherit;font-size:16px;color:var(--ink);padding:10px 0;
  font-variant-numeric:tabular-nums}
.calc .calc-in input[name]:focus{outline:none;border:0}
.calc-u{color:var(--s500);font-size:.9375rem}
.calc-check{grid-column:1/-1;display:flex;gap:10px;align-items:flex-start;font-size:.9375rem;
  line-height:1.5;color:var(--s700);cursor:pointer}
.calc-check input{width:20px;height:20px;margin:2px 0 0;accent-color:var(--ember);flex:none}
.calc-table tfoot td{font-size:1.125rem}
.guide-steps{list-style:none;counter-reset:gs;padding:0;margin:1.3rem 0;display:grid;gap:.65rem}
.guide-steps li{counter-increment:gs;position:relative;padding:1.05rem 1.2rem 1.05rem 3.35rem;
  background:var(--surface);border:1px solid var(--border);border-radius:var(--r12);line-height:1.6}
.guide-steps li::before{content:counter(gs);position:absolute;left:1.05rem;top:1.05rem;width:26px;height:26px;
  border-radius:50%;background:var(--ink);color:#fff;font-family:var(--mono);font-size:12px;font-weight:600;
  display:grid;place-items:center;line-height:1}
.guide-steps strong{display:block;color:var(--ink);margin-bottom:.2rem}

.guide-sources{font-family:var(--mono);font-size:11px;letter-spacing:.09em;text-transform:uppercase;
  color:var(--s500);margin:1.7rem 0 .5rem;font-weight:600}
.guide-body .guide-sources+ul{list-style:none;padding:0;margin:0;display:grid;gap:.4rem;font-size:.9375rem}
.guide-body .guide-sources+ul li{color:var(--s500)}

.guide-midcta{margin:2.4rem 0;padding:1.3rem 1.5rem;background:var(--sunken);border:1px solid var(--border);
  border-radius:var(--r12);display:flex;flex-wrap:wrap;align-items:center;justify-content:space-between;gap:1rem}
.guide-midcta p{margin:0;color:var(--s700);max-width:34ch}

@media(max-width:640px){
  .about-page-media{max-width:280px;margin:0 auto}
  .footer-signup-photo{width:190px}
}

/* ---------------------------------------------------------------- newsletter band (.nlb)
   Appended at the END of the stylesheet deliberately. It previously sat between the footer
   comment and .footer-signup{, and a later edit that replaced that range deleted the whole
   block, shipping the band as unstyled HTML. Nothing follows it here to swallow it.

   Flat editorial: 2px ink borders, zero radius except the seal, one red field. */
.nlb{--nlb-ink:#201e1d;--nlb-red:#d42a0f;--nlb-paper:#f3f2f2}
.nlb-ticker{background:var(--nlb-ink);border-bottom:2px solid var(--nlb-ink);padding:11px 0;overflow:hidden}
.tk-track{display:flex;width:max-content;animation:tk 22s linear infinite}
.tk-run{display:flex;align-items:center;gap:14px;padding-right:14px;white-space:nowrap}
.tk-item{font-family:var(--display);font-size:13px;font-weight:700;letter-spacing:.18em;
  text-transform:uppercase;color:#fff}
.tk-sep{color:#ff7a5e;font-size:13px}
@keyframes tk{from{transform:translateX(0)}to{transform:translateX(-50%)}}
@media(prefers-reduced-motion:reduce){.tk-track{animation:none}}

.nlb-body{background:var(--nlb-red);display:grid;grid-template-columns:1fr 360px;gap:80px;
  padding:66px 72px 74px;align-items:center}
.nlb-left{display:flex;flex-direction:column;gap:24px;align-items:flex-start;text-align:left}
.nlb-left h2{font-family:var(--display);font-size:66px;line-height:1;font-weight:800;
  letter-spacing:-.03em;color:#fff;max-width:14ch;margin:0}
.nlb-lede{font-size:19px;line-height:1.55;color:#fff;max-width:44ch;margin:0;text-wrap:pretty}
.nlb-stickers{display:flex;flex-wrap:wrap;gap:14px}
.stk{font-family:var(--display);font-size:14px;font-weight:700;padding:9px 15px;
  border:2px solid var(--nlb-ink);border-radius:0;display:inline-block}
.stk--a{background:var(--nlb-paper);color:var(--nlb-ink);transform:rotate(-2.5deg)}
.stk--b{background:var(--nlb-ink);color:var(--nlb-paper);transform:rotate(1.8deg)}
.stk--c{background:var(--nlb-paper);color:var(--nlb-ink);transform:rotate(-1deg)}

/* What a form turns into once it has been sent, in place of the old thank-you page. */
.form-ok{margin:0;padding:14px 16px;border-radius:var(--r12);background:var(--sunken);
  border:1px solid var(--border);font-size:15px;line-height:1.5;color:var(--ink)}
.form-ok:focus{outline:2px solid var(--ember);outline-offset:3px}
.form-ok--bad{background:#fdf2dc;border-color:#f0dcae;color:#5a4413;margin-bottom:12px}
.nlb-form{display:flex;background:#fff;border:2px solid var(--nlb-ink);border-radius:0;
  max-width:560px;width:100%}
.nlb-form input[type=email]{flex:1;min-width:0;background:transparent;border:0;font:inherit;
  font-size:17px;padding:18px 20px;color:var(--nlb-ink);border-radius:0}
.nlb-form input[type=email]::placeholder{color:#8c8987}
.nlb-form input[type=email]:focus-visible,.nlb-form button:focus-visible{
  outline:2px solid var(--nlb-ink);outline-offset:2px}
.nlb-form button{background:var(--nlb-ink);color:#fff;font-family:var(--display);font-size:17px;
  font-weight:700;padding:18px 28px;border:0;border-left:2px solid var(--nlb-ink);border-radius:0;
  cursor:pointer;text-align:left;transition:background .15s}
.nlb-form button:hover{background:#3a3634}
.nlb-form button:active{background:#000}
.nlb-fine{font-size:14px;color:#fff;margin:0}

/* The AFH band carries a name field as well as an email, so the one white box holds three
   children instead of two. Scoped to .nlb--afh so the Friday band is untouched. */
.nlb--afh .nlb-form input[type=text],.nlb--afh .nlb-form input[type=tel]{flex:0 1 38%;min-width:0;background:transparent;border:0;
  border-right:2px solid var(--nlb-ink);font:inherit;font-size:17px;padding:18px 20px;
  color:var(--nlb-ink);border-radius:0}
.nlb--afh .nlb-form input[type=text]::placeholder,.nlb--afh .nlb-form input[type=tel]::placeholder{color:#8c8987}
.nlb--afh .nlb-form input[type=text]:focus-visible,.nlb--afh .nlb-form input[type=tel]:focus-visible{outline:2px solid var(--nlb-ink);outline-offset:2px}
.nlb--afh .nlb-form input[type=email]{flex:1 1 44%}
/* A two-word label wrapped inside the button and broke the flat single-row form. The
   inputs can shrink; the label cannot. */
.nlb--afh .nlb-form button{white-space:nowrap}

/* The conversion tool. Deliberately reads as an instrument rather than a marketing block:
   surface panel, numbered rail, one step at a time. Step three is tinted because it carries
   the questions no listing database can answer, which is the argument of the whole page. */
.cvt{background:var(--surface);border:1px solid var(--border);border-radius:var(--r20);
  padding:clamp(1.5rem,4vw,2.75rem);box-shadow:var(--sh1)}
.cvt-head{max-width:var(--prose);margin-bottom:1.75rem}
.cvt-head h2{font-size:clamp(1.875rem,4vw,2.5rem);margin:0 0 .75rem}
.cvt-lede{color:var(--s700);line-height:1.7;margin:0}

.cvt-ns{display:none;margin:0 0 1.5rem;padding:.85rem 1.1rem;border-radius:var(--r8);
  background:var(--sunken);font-size:.9375rem;color:var(--s700);max-width:64ch}
.cvt-rail{display:flex;flex-wrap:wrap;gap:.4rem 1.5rem;list-style:none;margin:0 0 1.75rem;
  padding:0 0 1.25rem;border-bottom:1px solid var(--border)}
.cvt-dot{display:flex;align-items:center;gap:.55rem;font-size:.8125rem;font-weight:600;
  color:var(--s500);font-family:var(--mono);letter-spacing:.03em}
.cvt-dot span{width:24px;height:24px;border-radius:999px;display:grid;place-items:center;
  background:var(--sunken);color:var(--s500);font-size:12px;flex:none}
.cvt-dot.is-on{color:var(--ink)}
.cvt-dot.is-on span{background:var(--rust);color:#fff}
.cvt-dot.is-done span{background:var(--ember-tint);color:var(--clay)}

.cvt-addrl{display:block;font-family:var(--display);font-size:1.375rem;font-weight:600;
  color:var(--ink);margin-bottom:.85rem}
.cvt-search{display:flex;flex-wrap:wrap;gap:.6rem;max-width:640px}
.cvt-search input{flex:1 1 260px;min-width:0;min-height:52px;padding:0 1.1rem;font:inherit;
  font-size:16px;color:var(--ink);background:var(--paper);border:1.5px solid var(--border);
  border-radius:var(--pill)}
.cvt-search input:focus{outline:2px solid var(--ember);outline-offset:2px;border-color:var(--ember)}
.cvt-addr-n{margin:.75rem 0 0;font-size:.875rem;color:var(--s500);max-width:52ch}
.cvt-idx{margin:1rem 0 0;padding:.8rem 1rem;border-radius:var(--r8);background:var(--sunken);
  border-left:3px solid var(--s300);font-size:.9375rem;color:var(--s700);max-width:60ch}
.cvt-idx--ok{background:var(--ember-tint);border-left-color:var(--ember);color:var(--clay)}

.cvt-steph{margin:0 0 1.5rem;padding:.85rem 1.1rem;border-radius:var(--r8);
  background:var(--sunken);font-size:.9375rem;line-height:1.6;color:var(--s700);max-width:64ch}
.cvt-steph--key{background:var(--ember-tint);color:var(--clay)}
.cvt-steph--key b{color:var(--clay)}

.cvt-q{border:0;padding:0;margin:0 0 1.5rem}
.cvt-q legend{font-family:var(--display);font-size:1.0625rem;font-weight:600;color:var(--ink);
  padding:0;margin-bottom:.35rem}
.cvt-q--rec legend{font-size:.9375rem;font-family:var(--mono);letter-spacing:.05em;
  text-transform:uppercase;color:var(--s500)}
.cvt-help{margin:0 0 .7rem;font-size:.875rem;color:var(--s500);line-height:1.6;max-width:60ch}
.cvt-opts{display:flex;flex-wrap:wrap;gap:.5rem}
.cvt-opt{display:inline-flex;align-items:center;gap:.5rem;margin:0;padding:.55rem .9rem;
  background:var(--paper);border:1.5px solid var(--border);border-radius:var(--pill);
  cursor:pointer;font-size:.9375rem;transition:border-color .15s,background .15s}
.cvt-opt:hover{border-color:var(--s300)}
.cvt-opt input{accent-color:var(--ember);margin:0;flex:none}
.cvt-opt:has(input:checked){border-color:var(--ember);background:var(--ember-tint);color:var(--clay)}
.cvt-nav{display:flex;flex-wrap:wrap;gap:.6rem;margin-top:1.75rem}

.cvt-lock{max-width:var(--prose)}
.cvt-lock h3{font-size:clamp(1.375rem,3vw,1.75rem);margin:0 0 .6rem}
.cvt-lock>p{color:var(--s700);line-height:1.7;margin:0 0 1.25rem}
.cvt-lock .dig-form input[type=text],.cvt-lock .dig-form input[type=email]{border-color:var(--border)}
.cvt-skip{display:inline-block;margin-top:1rem;background:none;border:0;padding:0;font:inherit;
  font-size:.875rem;color:var(--s500);text-decoration:underline;cursor:pointer}
.cvt-skip:hover{color:var(--ink)}

.cvt-verdict{border-radius:var(--r12);padding:1.5rem;margin-bottom:1.5rem;
  border:1px solid var(--border);background:var(--sunken)}
/* Keyed on the tier, not on the wording, so the copy can be rewritten without this
   silently losing its colour. */
.cvt-verdict[data-tier=low]{background:#F0FDF4;border-color:#BBF7D0}
.cvt-verdict[data-tier=mid]{background:var(--ember-tint);border-color:var(--ember-tint-bd)}
.cvt-verdict[data-tier=high]{background:#FEF2F2;border-color:#FECACA}
.cvt-vk{margin:0 0 .5rem;font-family:var(--mono);font-size:11px;font-weight:700;
  letter-spacing:.12em;text-transform:uppercase;color:var(--clay)}
.cvt-verdict h3{font-size:clamp(1.375rem,3.2vw,1.875rem);margin:0 0 .6rem}
.cvt-verdict p{margin:0;color:var(--s700);line-height:1.7;max-width:62ch}
.cvt-vaddr{margin:.9rem 0 0;font-size:.875rem;color:var(--s500);font-family:var(--mono)}

.cvt-cols{display:grid;gap:1rem;margin-bottom:1.5rem}
@media(min-width:900px){.cvt-cols{grid-template-columns:repeat(3,1fr)}}
.cvt-col{border:1px solid var(--border);border-radius:var(--r12);padding:1.1rem 1.25rem;
  background:var(--paper)}
.cvt-col h4{font-family:var(--mono);font-size:11px;letter-spacing:.09em;text-transform:uppercase;
  margin:0 0 .8rem;padding-bottom:.6rem;border-bottom:1px solid var(--border)}
.cvt-col--hard h4{color:var(--clay)}
.cvt-col--soft h4{color:#166534}
.cvt-col--fixed h4{color:var(--s500)}
.cvt-col ul{margin:0;padding-left:1.05rem;font-size:.875rem;line-height:1.6;color:var(--s700)}
.cvt-col li{margin-bottom:.7rem}
.cvt-col li:last-child{margin-bottom:0}
.cvt-none{list-style:none;margin-left:-1.05rem;color:var(--s500);font-style:italic}

.cvt-verify{border:1px solid var(--border);border-radius:var(--r12);padding:1.25rem 1.4rem;
  background:var(--paper);margin-bottom:1.5rem}
.cvt-verify h4{font-size:1.0625rem;margin:0 0 .4rem}
.cvt-verify>p{margin:0 0 .8rem;font-size:.875rem;color:var(--s500)}
.cvt-verify ul{margin:0;padding-left:1.15rem;font-size:.9375rem;line-height:1.65;color:var(--s700);
  columns:2;column-gap:2rem}
@media(max-width:700px){.cvt-verify ul{columns:1}}
.cvt-verify li{margin-bottom:.35rem;break-inside:avoid}

.cvt-tease{border:2px dashed var(--s300);border-radius:var(--r12);padding:1.4rem;
  text-align:center;margin-bottom:1.5rem}
.cvt-tease p{margin:0 0 1rem;color:var(--s700);max-width:52ch;margin-inline:auto}

.cvt-next{background:var(--ink);border-radius:var(--r12);padding:clamp(1.4rem,3vw,2rem);
  color:var(--foot-text)}
.cvt-next h4{color:#fff;font-size:clamp(1.25rem,2.6vw,1.5rem);margin:0 0 .6rem}
.cvt-next p{margin:0 0 1.25rem;line-height:1.7;max-width:56ch}
.cvt-nextb{display:flex;flex-wrap:wrap;gap:.7rem}
.cvt-next .btn--ghost{color:#fff;border-color:rgba(255,255,255,.35)}
.cvt-next .btn--ghost:hover{background:rgba(255,255,255,.1);border-color:#fff;color:#fff}

.cvt-bm{margin:1.1rem 0 0;font-size:.875rem;color:var(--s500);text-align:center}
.cvt-fine{margin:1.75rem 0 0;padding-top:1.25rem;border-top:1px solid var(--border);
  font-size:.8125rem;line-height:1.65;color:var(--s500);max-width:74ch}

/* Tool promo card on the landing page. A whole-card link rather than a button, because the
   destination is a page and not an action, and because the card has to compete with 800
   words of prose around it without shouting. */
.afh-addr{max-width:720px;margin:0 auto;background:var(--ink);border-radius:var(--r20);padding:clamp(22px,4vw,36px)}
.afh-addr-l{display:block;color:#fff;font-family:var(--display,inherit);font-weight:600;font-size:clamp(1.25rem,2.6vw,1.625rem);margin:0 0 14px}
.afh-addr-row{display:flex;gap:10px;flex-wrap:wrap}
.afh-addr-row input{flex:1 1 240px;min-height:52px;font:inherit;font-size:1rem;padding:0 16px;border:1px solid transparent;border-radius:12px;background:#fff;color:var(--ink)}
.afh-addr-row input:focus-visible{outline:3px solid var(--ember,#c2410c);outline-offset:2px}
.afh-addr-row .btn{min-height:52px;flex:0 0 auto}
.afh-toolcard{display:block;background:var(--ink);border-radius:var(--r20);
  padding:clamp(1.5rem,4vw,2.5rem);color:var(--foot-text);text-decoration:none;
  border:1px solid var(--ink);transition:transform .18s,box-shadow .18s}
.afh-toolcard:hover{transform:translateY(-2px);box-shadow:var(--sh2);color:var(--foot-text)}
.afh-toolcard-copy{max-width:60ch}
.afh-toolcard h2{color:#fff;font-size:clamp(1.625rem,3.4vw,2.125rem);margin:0 0 .7rem}
.afh-toolcard p{margin:0 0 1.25rem;line-height:1.7}
.afh-toolcard-go{display:inline-flex;align-items:center;gap:.5rem;min-height:48px;
  padding:0 1.5rem;border-radius:var(--pill);background:var(--rust);color:#fff;
  font-weight:600;transition:background .18s}
.afh-toolcard-go::after{content:"\2192"}
.afh-toolcard:hover .afh-toolcard-go{background:var(--ember)}

/* Listing page. Compact hero, then the grid, because somebody arriving from "adult family
   homes for sale" came to browse and every screen of prose before the rows is a screen they
   did not ask for. The competitor that ranks first gives this three lines and a phone number. */
.lst-hero{background:var(--sunken);border-bottom:1px solid var(--border);
  padding:clamp(2rem,5vw,3.25rem) 0}
.lst-hero h1{font-size:clamp(2rem,4.5vw,3rem);margin:0 0 .85rem;max-width:20ch}
.lst-hero-p{max-width:62ch;color:var(--s700);line-height:1.7;margin:0 0 1.5rem}
.lst-hero-cta{display:flex;flex-wrap:wrap;gap:.7rem}

.lst-head{display:flex;flex-wrap:wrap;align-items:flex-end;justify-content:space-between;
  gap:1rem;margin-bottom:1.25rem}
.lst-head h2{font-size:clamp(1.625rem,3.4vw,2.125rem);margin:0}
.lst-head .eyebrow{margin-bottom:8px}
.lst-controls{display:flex;flex-wrap:wrap;align-items:center;gap:.6rem}
.lst-filters{display:flex;gap:.4rem}
.lst-chip{min-height:40px;padding:0 .95rem;font:inherit;font-size:.875rem;font-weight:600;
  color:var(--s700);background:var(--surface);border:1.5px solid var(--border);
  border-radius:var(--pill);cursor:pointer;transition:border-color .15s,background .15s}
.lst-chip:hover{border-color:var(--s300)}
.lst-chip.is-on{background:var(--ink);border-color:var(--ink);color:#fff}
.lst-sort select{min-height:40px;padding:0 2rem 0 .9rem;font:inherit;font-size:.875rem;
  color:var(--ink);background:var(--surface);border:1.5px solid var(--border);
  border-radius:var(--pill);cursor:pointer}

.lst-grid{display:grid;gap:1rem;grid-template-columns:repeat(auto-fill,minmax(260px,1fr))}
.lst-card{display:block;background:var(--surface);border:1px solid var(--border);
  border-radius:var(--r12);padding:1.1rem 1.25rem;text-decoration:none;color:inherit;
  transition:border-color .15s,box-shadow .15s,transform .15s}
.lst-card:hover{border-color:var(--s300);box-shadow:var(--sh1);transform:translateY(-2px);
  color:inherit}
.lst-card[hidden]{display:none}
.lst-top{display:flex;align-items:center;gap:.45rem;margin-bottom:.7rem;flex-wrap:wrap}
.lst-status,.lst-kind{font-family:var(--mono);font-size:10px;font-weight:700;letter-spacing:.08em;
  text-transform:uppercase;padding:.25rem .5rem;border-radius:var(--r4)}
.lst-status--active{background:#DCFCE7;color:#166534}
.lst-status--pending{background:var(--ember-tint);color:var(--clay)}
.lst-status--sold{background:var(--sunken);color:var(--s500)}
.lst-kind{background:var(--ink);color:#fff}
.lst-price{font-family:var(--display);font-size:1.5rem;font-weight:700;color:var(--ink);
  margin:0 0 .2rem;line-height:1.1}
.lst-city{margin:0 0 .5rem;font-size:.9375rem;color:var(--s500)}
.lst-facts{margin:0 0 .7rem;font-size:.875rem;color:var(--s700)}
/* The one thing a feed cannot generate and a portal cannot copy. */
.lst-note{margin:0 0 .7rem;padding:.6rem .75rem;background:var(--ember-tint);
  border-radius:var(--r8);font-size:.8125rem;line-height:1.55;color:var(--clay)}
.lst-attr{margin:0;padding-top:.65rem;border-top:1px solid var(--border);font-size:.6875rem;
  color:var(--s500);line-height:1.45}
.lst-none{margin:1.5rem 0 0;text-align:center;color:var(--s500)}

/* Empty state. Not an apology: it hands over the two things that work without a feed. */
.lst-empty{border:2px dashed var(--s300);border-radius:var(--r20);
  padding:clamp(1.5rem,4vw,2.5rem);background:var(--surface)}
.lst-empty-h{font-family:var(--display);font-size:1.25rem;font-weight:600;color:var(--ink);
  margin:0 0 .7rem}
.lst-empty p{color:var(--s700);line-height:1.7;margin:0 0 1rem;max-width:66ch}
.lst-empty-two{display:grid;gap:1rem;margin-top:1.5rem}
@media(min-width:760px){.lst-empty-two{grid-template-columns:1fr 1fr}}
.lst-empty-card{display:flex;flex-direction:column;gap:.5rem;background:var(--paper);
  border:1px solid var(--border);border-radius:var(--r12);padding:1.25rem 1.4rem;
  text-decoration:none;transition:border-color .15s,transform .15s}
.lst-empty-card:hover{border-color:var(--ember);transform:translateY(-2px)}
.lst-empty-card b{font-family:var(--display);font-size:1.125rem;color:var(--ink)}
.lst-empty-card span{font-size:.9375rem;line-height:1.6;color:var(--s700)}
.lst-empty-card em{font-style:normal;font-weight:600;color:var(--clay);font-size:.9375rem}
.lst-empty-card em::after{content:" \2192"}

/* Provenance block on the tool page. Zero reviews and two established competitors who have
   them, so this carries the trust on its own. The three figures are the load-bearing part:
   specifics are what make a story like this credible rather than warm. */
.afh-prov{background:var(--sunken);border:1px solid var(--border);border-radius:var(--r20);
  padding:clamp(1.5rem,4vw,2.5rem);display:grid;gap:2rem}
@media(min-width:900px){.afh-prov{grid-template-columns:minmax(0,1.35fr) minmax(0,.65fr);
  gap:3rem;align-items:start}}
.afh-prov-copy h2{font-size:clamp(1.625rem,3.4vw,2.125rem);margin:0 0 .9rem}
.afh-prov-copy p{color:var(--s700);line-height:1.75;margin:0 0 1rem;max-width:60ch}
.afh-prov-copy p:last-child{margin-bottom:0}
.afh-prov-facts{list-style:none;margin:0;padding:0;display:grid;gap:.85rem}
.afh-prov-facts li{background:var(--surface);border:1px solid var(--border);
  border-radius:var(--r12);padding:1rem 1.15rem}
.afh-prov-facts b{display:block;font-family:var(--display);font-size:1.75rem;font-weight:700;
  color:var(--clay);line-height:1.1;margin-bottom:.2rem}
.afh-prov-facts span{font-size:.875rem;color:var(--s500);line-height:1.45}

/* Landing page inventory block reuses .afh-watch, which was built for a form beside copy. */
.afh-watch-form .dig-form input[type=text],.afh-watch-form .dig-form input[type=email]{
  border-color:var(--border)}
/* The standing offer. Sits between the category stickers and the form because it is the
   reason to subscribe, not a footnote to it. Ink rule rather than a fourth sticker: the
   stickers are category markers and a promise sitting among them reads as another label. */
.nlb--afh .nlb-offer{margin:0;max-width:46ch;color:#fff;font-size:16px;line-height:1.55;
  border-left:3px solid var(--nlb-ink);padding-left:15px}
.nlb--afh .nlb-offer b{font-weight:700;color:#fff}
@media(max-width:900px){
  .nlb--afh .nlb-form input[type=text],.nlb--afh .nlb-form input[type=tel]{flex:none;border-right:0;
    border-bottom:2px solid var(--nlb-ink)}
}
.nlb-hp{position:absolute;left:-9999px;width:1px;height:1px;overflow:hidden}

.nlb-right{justify-self:end;position:relative}
.nlb-right img{width:340px;height:400px;object-fit:cover;object-position:50% 20%;
  border:2px solid var(--nlb-ink);border-radius:0;transform:rotate(-2deg);display:block}
.nlb-seal{position:absolute;left:-26px;bottom:-20px;width:112px;height:112px;border-radius:50%;
  background:var(--nlb-ink);color:#fff;display:grid;place-content:center;text-align:center;
  font-family:var(--display);font-size:12px;font-weight:700;letter-spacing:.06em;line-height:1.25;
  transform:rotate(-9deg)}
.nlb-seal b{display:block;font-weight:700}

@media(max-width:900px){
  .nlb-body{grid-template-columns:1fr;gap:34px;padding:38px 22px 44px}
  .nlb-left h2{font-size:40px;max-width:none}
  .nlb-right{justify-self:start;order:-1}
  .nlb-right img{width:210px;height:250px}
  /* -18px put the rotated bounding box 2px past the viewport edge on a 375 screen */
  .nlb-seal{width:88px;height:88px;font-size:11px;left:-10px;bottom:-14px}
  .nlb-form{flex-direction:column;max-width:100%}
  .nlb-form button{border-left:0;border-top:2px solid var(--nlb-ink);text-align:center;width:100%}
}


/* ---------------------------------------------------------------- funnel-aware hero
   From the Claude Design handoff. Its :root block redeclared the palette under different
   names, so every one is mapped to the site's existing token instead of shipping a second
   set: slate-700 -> s700, slate-500 -> s500, tint -> ember-tint, body -> sans, r-12 -> r12.
   The two the site has no token for (the sent-state green, the easing curve) are inline. */
.fhero{background:var(--paper);font-family:var(--sans);color:var(--ink);padding:56px 24px 60px}
.fhero__inner{max-width:var(--content);margin:0 auto;display:flex;gap:56px;align-items:center}
.fhero__copy{flex:1;min-width:0;display:flex;flex-direction:column;gap:20px;max-width:540px}
.fhero__kicker{display:flex;align-items:center;gap:14px;font-size:12px;letter-spacing:.18em;
  text-transform:uppercase;color:var(--rust);font-weight:600;margin:0}
.fhero__kicker::after{content:"";flex:0 1 56px;height:1px;background:var(--border)}
.fhero h1{margin:0;font-family:var(--display);font-size:clamp(34px,4.4vw,58px);line-height:1;
  letter-spacing:-.034em;font-weight:700;text-wrap:balance}
.fhero__lede{font-size:18px;line-height:1.6;color:var(--s700);max-width:560px;text-wrap:pretty;margin:0}
.fhero__actions{display:flex;align-items:center;gap:12px;flex-wrap:wrap;margin-top:4px}
.fhero__cred{font-size:14px;color:var(--s500);margin:0}
.fhero__cred strong{color:var(--ink);font-weight:600}

/* 52px keeps the 44px tap target once the border is counted */
.fhero .pill{display:inline-flex;align-items:center;justify-content:center;min-height:52px;
  padding:0 26px;border-radius:var(--pill);font-family:var(--sans);font-size:16px;font-weight:600;
  cursor:pointer;white-space:nowrap;border:1px solid transparent;text-decoration:none;
  transition:background .25s ease,box-shadow .3s ease,transform .3s ease,border-color .25s ease}
.fhero .pill--buy{background:var(--ember);color:#fff;box-shadow:0 1px 2px rgba(28,33,39,.08)}
.fhero .pill--buy:hover,.fhero .pill--buy[aria-expanded="true"]{background:var(--rust);
  box-shadow:0 6px 18px rgba(234,88,12,.32);transform:translateY(-1px);color:#fff}
.fhero .pill--sell{background:var(--surface);color:var(--ink);border-color:var(--border);
  box-shadow:0 1px 2px rgba(28,33,39,.06)}
.fhero .pill--sell:hover,.fhero .pill--sell[aria-expanded="true"]{border-color:var(--ink);
  box-shadow:0 6px 18px rgba(28,33,39,.12);transform:translateY(-1px);color:var(--ink)}
.fhero :is(button,a,input):focus-visible{outline:2px solid var(--ember);outline-offset:3px}

/* The photo grid takes the width the copy was reserving but never used: the longest headline
   line is about 515px at 1280 wide and the lede caps at 560, so 540 of copy loses nothing.
   Squarer than before so the hero grows sideways more than it grows past the fold. */
.fhero__panel{position:relative;width:clamp(540px,48.5vw,620px);flex:none;aspect-ratio:9/10;border-radius:var(--r20);
  overflow:hidden;background:var(--sunken);border:1px solid var(--border)}
.fhero__shot{position:absolute;inset:0;width:100%;height:100%;object-fit:cover;
  object-position:center 18%;
  transition:opacity .4s ease,filter .45s ease,transform .7s cubic-bezier(.22,1,.36,1)}
/* The panel is a grid of Seattle and the home styles people buy here. It keeps .fhero__shot,
   so the peek states below fade and blur it like the portrait before it. */
.fhero__mosaic{display:grid;grid-template-columns:1fr 1fr;grid-template-rows:1.3fr 1fr 1fr 1fr;
  grid-template-areas:"sky sky" "craft town" "lux town" "float mcm";gap:6px;padding:6px;margin:0}
.fhero__tile{position:relative;margin:0;min-height:0;overflow:hidden;border-radius:14px;background:var(--sunken)}
.fhero__tile img{position:absolute;inset:0;width:100%;height:100%;object-fit:cover}
.fhero__tile--sky{grid-area:sky}
.fhero__tile--craft{grid-area:craft}
.fhero__tile--town{grid-area:town}
.fhero__tile--lux{grid-area:lux}
.fhero__tile--float{grid-area:float}
.fhero__tile--mcm{grid-area:mcm}
.fhero__tile--sky img{object-position:center 55%}
.fhero__tile--lux img{object-position:center 38%}
/* Top-right: on the skyline tile the left corner is where the Space Needle stands, and the
   right corner is open sky. */
.fhero__badge{position:absolute;right:20px;top:20px;background:var(--ember-tint);
  border-radius:var(--pill);padding:8px 16px;font-size:13px;font-weight:600;color:var(--clay);margin:0}

.peek{position:absolute;inset:0;overflow:hidden;pointer-events:none;opacity:0;
  transform:translateY(18px) scale(1.03);
  transition:opacity .36s ease .04s,transform .55s cubic-bezier(.22,1,.36,1)}
.peek--buy{background:var(--ember-tint)}
.peek--sell{background:var(--sunken)}
/* The pages fill the panel: object-fit cover on a near-square sheet in a portrait box
   trims a little off the sides, which reads as a contact sheet continuing past the frame. */
.peek__img{display:block;width:100%;height:100%;object-fit:cover}
.peek__sheet{position:absolute;inset:0}
.peek__veil{position:absolute;inset:0;pointer-events:none;
  background:linear-gradient(180deg,rgba(28,33,39,0) 52%,rgba(28,33,39,.16) 100%)}

/* The page count, as a seal rather than a caption. It is the one number worth stating. */
/* Staging review page only. */
.stgh-bar{display:flex;gap:10px;flex-wrap:wrap}
.stgh-bar [aria-pressed="true"]{background:var(--ink);color:var(--paper);border-color:var(--ink)}
.stgh-phone{margin:1.5rem 0 0;width:375px;max-width:100%;border:10px solid var(--ink);
  border-radius:28px;overflow:hidden;box-shadow:0 24px 50px -20px rgba(28,33,39,.4);background:var(--ink)}
.stgh-phone iframe{display:block;width:100%;height:760px;border:0;background:var(--paper)}

.peek__seal{position:absolute;left:var(--seal-x);top:var(--seal-y);
  transform:translate(-50%,-50%);margin:0;width:var(--seal-w,23%);aspect-ratio:1;
  display:flex;flex-direction:column;align-items:center;justify-content:center;gap:1px;
  border-radius:50%;background:var(--ember);color:#fff;text-align:center;
  font-size:11px;font-weight:600;letter-spacing:.1em;text-transform:uppercase;line-height:1;
  box-shadow:0 10px 24px -8px rgba(28,33,39,.5)}
.peek__seal b{font-family:var(--display);font-size:26px;font-weight:700;letter-spacing:-.01em}

/* The loupe. Round, because a circle over a line of type is the one magnifier shape nobody
   has to be taught, and because the hexagon's shoulders were eating the first word of every
   line it was meant to be showing. */
.peek__lens{position:absolute;left:var(--lens-x);top:var(--lens-y);width:var(--lens-w);
  transform:translate(-50%,-50%);margin:0;aspect-ratio:1}
.peek__glass{position:absolute;inset:0;border-radius:50%;overflow:hidden;background:#fff;
  box-shadow:0 0 0 5px #fff,0 0 0 7px rgba(28,33,39,.88),0 26px 44px -14px rgba(28,33,39,.5)}
/* Anchored on the circumference at 45 degrees and rotated to run outward from it. */
.peek__grip{position:absolute;left:85.4%;top:85.4%;width:8%;height:34%;border-radius:99px;
  transform:translate(-50%,0) rotate(-45deg);transform-origin:50% 0;
  background:linear-gradient(180deg,#343A42,#15181D);
  box-shadow:0 10px 20px -8px rgba(28,33,39,.65)}


/* hover label and tap gate share one slot at the bottom of the panel */
.fhero__label,.fhero__gate{position:absolute;left:20px;right:20px;bottom:20px;background:var(--surface)}
.fhero__label{border-radius:var(--r12);padding:18px 20px;display:flex;flex-direction:column;gap:6px;
  box-shadow:0 10px 28px rgba(28,33,39,.18);opacity:0;transform:translateY(14px);pointer-events:none;
  transition:opacity .3s ease .1s,transform .45s cubic-bezier(.22,1,.36,1) .1s}
.fhero__gate{border-radius:16px;overflow:hidden;box-shadow:0 16px 40px rgba(28,33,39,.22);opacity:0;
  transform:translateY(20px) scale(.98);pointer-events:none;
  transition:opacity .28s ease,transform .42s cubic-bezier(.22,1,.36,1)}
.fhero__label-kicker,.gate__kicker{font-size:11px;letter-spacing:.14em;text-transform:uppercase;
  color:var(--clay);font-weight:600}
.fhero__label-title{font-family:var(--display);font-size:23px;line-height:1.12;font-weight:600}
.fhero__label-sub{font-size:14px;line-height:1.45;color:var(--s500)}
/* The peek was showing the guide without ever saying how to get it. This is the ask,
   shaped like the button it points back at. The arrow nudges once the panel settles. */
.fhero__label-cta{display:inline-flex;align-items:center;gap:8px;align-self:flex-start;
  margin-top:4px;background:var(--ember);color:#fff;border-radius:var(--pill);
  padding:9px 16px;font-size:13.5px;font-weight:600;
  box-shadow:0 4px 12px rgba(234,88,12,.28)}
.fhero__label-cta svg{flex:none}
.fhero[data-mode] .fhero__label-cta svg{animation:ctaNudge 1.8s ease-in-out .55s infinite}
@keyframes ctaNudge{0%,55%,100%{transform:translateX(0)}28%{transform:translateX(4px)}}
@media (prefers-reduced-motion:reduce){
  .fhero[data-mode] .fhero__label-cta svg{animation:none}
}

/* every panel state hangs off one data attribute on .fhero */
.fhero[data-mode] .fhero__shot{opacity:.32;filter:grayscale(1) blur(3px);transform:scale(1.04)}
.fhero[data-mode] .peek__sheet{transform:none}
.fhero[data-mode="buy"] .peek--buy,
.fhero[data-mode="sell"] .peek--sell{opacity:1;transform:translateY(0) scale(1)}
.fhero[data-mode]:not([data-gate]) .fhero__label{opacity:1;transform:translateY(0);pointer-events:auto;cursor:pointer}
.fhero__label:hover .fhero__label-cta{background:var(--rust)}
.fhero[data-gate] .fhero__gate{opacity:1;transform:translateY(0) scale(1);pointer-events:auto}
/* phone-only parts of the gate: the scrim behind the sheet, its handle and the cover row */
.fhero__scrim,.gate__grab,.gate__guide{display:none}
.fhero__gate:focus{outline:none}

.gate__body{padding:22px 22px 20px;display:flex;flex-direction:column;gap:12px}
.gate__top{display:flex;align-items:flex-start;justify-content:space-between;gap:14px}
.gate__close{background:none;border:0;padding:0;font-size:20px;line-height:1;color:var(--s500);
  cursor:pointer;min-width:32px;min-height:32px}
.gate__title{font-family:var(--display);font-size:23px;line-height:1.1;letter-spacing:-.015em;
  font-weight:600;margin:0}
.gate__form{display:flex;gap:8px;align-items:stretch}
.gate__input{flex:1;min-width:0;min-height:50px;background:var(--paper);border:1px solid var(--border);
  border-radius:var(--r12);padding:0 16px;font-family:var(--sans);font-size:16px;color:var(--ink)}
.gate__input:focus{background:var(--surface);border-color:#F1C9B4;outline:none}
.gate__submit{min-height:50px;background:var(--ember);border:0;border-radius:var(--r12);padding:0 22px;
  font-family:var(--sans);font-size:16px;font-weight:600;color:#fff;white-space:nowrap;cursor:pointer;
  display:inline-flex;align-items:center;gap:10px;transition:background .2s ease}
.gate__submit:hover{background:var(--rust)}
.gate__foot{display:flex;align-items:center;gap:12px;border-top:1px solid var(--border);padding-top:12px}
.gate__foot p{margin:0;flex:1;font-size:13px;line-height:1.45;color:var(--s500)}
.gate__foot a{font-size:13px;color:var(--s700);text-decoration:underline;text-underline-offset:3px;
  white-space:nowrap}
.gate__foot a:hover{color:var(--clay)}
.spinner{width:14px;height:14px;border:2px solid rgba(255,255,255,.4);border-top-color:#fff;
  border-radius:var(--pill);animation:spin .7s linear infinite}
@keyframes spin{to{transform:rotate(360deg)}}
@keyframes rise{from{opacity:0;transform:translateY(8px)}to{opacity:1;transform:none}}
.gate__sent{display:none;padding:22px;flex-direction:column;gap:11px}
.fhero__gate[data-stage="sent"] .gate__body{display:none}
.fhero__gate[data-stage="sent"] .gate__sent{display:flex;animation:rise .4s cubic-bezier(.22,1,.36,1) both}
/* the site has no success token; these are the same pair the listing status badges use */
.gate__tag{background:#DCFCE7;color:#166534;font-size:12px;font-weight:700;letter-spacing:.04em;
  text-transform:uppercase;padding:5px 10px;border-radius:var(--pill)}
.gate__sent-top{display:flex;align-items:center;gap:10px}
.gate__sent-top span:nth-child(2){flex:1;font-size:13px;color:var(--s500)}
.gate__sent-p{margin:0;font-size:15px;line-height:1.5;color:var(--s700)}
.gate__reset{background:none;border:0;padding:0;font-family:var(--sans);font-size:13px;
  color:var(--s500);text-decoration:underline;text-underline-offset:3px;cursor:pointer}
.gate__cta{align-self:flex-start;min-height:44px;background:var(--ink);border-radius:var(--r12);
  display:inline-flex;align-items:center;padding:0 20px;font-size:15px;font-weight:600;color:#fff;
  text-decoration:none;margin-top:2px}
.gate__cta:hover{background:var(--s700);color:#fff}

@media(max-width:1080px){
  .fhero__inner{gap:36px}
  .fhero__panel{width:44vw}
}
@media(max-width:880px){
  .fhero{padding:36px 20px 44px}
  .fhero__inner{flex-direction:column-reverse;align-items:stretch;gap:28px}
  .fhero__panel{width:calc(100% + 24px);margin:0 -12px;aspect-ratio:4/5}
  .fhero__mosaic{gap:5px;padding:5px}
  .fhero__tile{border-radius:12px}
  .fhero__actions{gap:10px}
  .fhero__actions .pill{flex:1 1 auto}
  .fhero__hint{flex-basis:100%;padding-left:0}
  .gate__form{flex-wrap:wrap}
  .gate__submit{flex:1 1 100%;justify-content:center}

  /* There is no hover on a phone, so one tap has to open the gate AND show what it is for.
     The pills sit under the portrait here, so by the time someone taps one the panel has
     usually scrolled away, and a gate inside it opened out of sight. On a phone the gate is
     a sheet on the viewport instead: it rises from the bottom wherever the page is, over a
     scrim, and carries the cover itself because the peek is not on screen to show it. */
  .fhero__label{left:0;right:0;bottom:0}
  .fhero__gate{position:fixed;left:0;right:0;top:auto;bottom:var(--kb,0px);z-index:310;
    border-radius:20px 20px 0 0;max-height:calc(var(--vvh,100dvh) - 24px);overflow-y:auto;
    overscroll-behavior:contain;padding-bottom:env(safe-area-inset-bottom,0px);opacity:1;
    visibility:hidden;transform:translateY(100%);box-shadow:0 -12px 40px rgba(28,33,39,.22);
    transition:transform .38s cubic-bezier(.22,1,.36,1),visibility 0s linear .38s}
  .fhero[data-gate] .fhero__gate{transform:translateY(0);visibility:visible;
    transition:transform .38s cubic-bezier(.22,1,.36,1)}
  .fhero__scrim{display:block;position:fixed;inset:0;z-index:305;background:rgba(28,33,39,.45);
    opacity:0;visibility:hidden;transition:opacity .3s ease,visibility 0s linear .3s}
  .fhero[data-gate] .fhero__scrim{opacity:1;visibility:visible;transition:opacity .3s ease}
  html.sheet-open,html.sheet-open body{overflow:hidden}
  .gate__grab{display:block;width:40px;height:5px;margin:10px auto 0;border-radius:var(--pill);
    background:var(--border)}
  .gate__body{padding:10px 20px 18px;gap:14px}
  .gate__guide{display:flex;align-items:center;gap:14px}
  .gate__cover{flex:none;width:72px;height:auto;border-radius:4px;background:var(--sunken);
    box-shadow:0 1px 2px rgba(28,33,39,.12),0 8px 18px -8px rgba(28,33,39,.4)}
  .gate__guide-text{display:flex;flex-direction:column;gap:4px;min-width:0}
  .gate__guide-title{font-family:var(--display);font-size:19px;line-height:1.15;font-weight:600}
  .gate__guide-meta{font-size:13px;color:var(--s500)}
  .gate__title{font-size:17px}
  .gate__foot{flex-direction:column;align-items:flex-start;gap:6px}
  .gate__sent{padding:14px 20px 20px}
  /* Re-laid for a 335px panel: the loupe moves into the top half and the seal tucks into
     the corner it leaves free. */
  /* .fhero .peek, not .peek: the generated placement block is appended after this and
     a bare .peek would tie on specificity and lose on order. */
  .fhero .peek{--lens-x:44%;--lens-y:22%;--lens-w:46%;--seal-x:85%;--seal-y:12%;--seal-w:18%}
  .peek__seal{font-size:9px}
  .peek__seal b{font-size:21px}
  .peek__veil{background:linear-gradient(180deg,rgba(28,33,39,0) 30%,rgba(28,33,39,.18) 62%)}
  /* At this width the badge sits exactly where the loupe now is. */
  .fhero[data-mode] .fhero__badge{opacity:0;transition:opacity .2s ease}
}
@media(prefers-reduced-motion:reduce){
  .fhero *{transition-duration:.01ms!important;animation-duration:.01ms!important}
  .fhero[data-mode] .fhero__shot,.peek{transform:none!important}
  .peek__lens{transform:translate(-50%,-50%)!important}
}


/* ---------------------------------------------------------------- gated buyer's guide
   Long-form, read in one sitting, and likely printed. Measure stays near --prose and the
   print block at the end is what turns it into a PDF without a build pipeline. */
.bg{max-width:var(--prose);margin:0 auto}
.bg-head{padding-bottom:1.75rem;margin-bottom:2rem;border-bottom:2px solid var(--ink)}
.bg-head h1{font-size:clamp(2rem,4.5vw,2.875rem);line-height:1.08;margin:0 0 .75rem}
.bg-sub{font-size:1.125rem;line-height:1.6;color:var(--s700);margin:0 0 1rem;max-width:52ch}
.bg-by{margin:0;font-family:var(--mono);font-size:.75rem;letter-spacing:.05em;color:var(--s500)}
.bg-asof{margin:.6rem 0 0;font-size:.8125rem;line-height:1.5;color:var(--s500);
  max-width:56ch}
.bg-intro p{font-size:1.0625rem;line-height:1.75;color:var(--s700)}
.bg-intro p:first-child{font-size:1.1875rem;color:var(--ink)}

.bg-toc{background:var(--sunken);border-radius:var(--r12);padding:1.25rem 1.5rem;margin:2rem 0 2.5rem}
.bg-toc-k{margin:0 0 .6rem;font-family:var(--mono);font-size:11px;letter-spacing:.09em;
  text-transform:uppercase;color:var(--clay)}
.bg-toc ol{margin:0;padding-left:1.2rem;font-size:.9375rem;line-height:1.75;color:var(--s700)}

.bg-sec{margin:0 0 2.75rem;scroll-margin-top:90px}
.bg-sec h2{display:flex;gap:.7rem;align-items:baseline;font-size:clamp(1.375rem,3vw,1.75rem);
  margin:0 0 1rem;line-height:1.2}
.bg-n{font-family:var(--mono);font-size:.875rem;font-weight:700;color:var(--ember);flex:none}
.bg-sec p{line-height:1.75;color:var(--s700);margin:0 0 1rem}
.bg-sec strong{color:var(--ink)}

.bg-src,.bg-more{background:var(--surface);border:1px solid var(--border);
  border-radius:var(--r8);padding:.9rem 1.15rem;margin:1.25rem 0 0}
.bg-more{background:var(--ember-tint);border-color:var(--ember-tint-bd)}
.bg-src-k{margin:0 0 .45rem;font-family:var(--mono);font-size:10px;letter-spacing:.09em;
  text-transform:uppercase;color:var(--clay)}
.bg-src ul,.bg-more ul{margin:0;padding-left:1.1rem;font-size:.875rem;line-height:1.6;
  color:var(--s700)}
.bg-src li,.bg-more li{margin-bottom:.25rem}

.bg-close{background:var(--ink);color:var(--foot-text);border-radius:var(--r20);
  padding:clamp(1.5rem,4vw,2.25rem);margin:2.5rem 0 0}
.bg-close h2{color:#fff;font-size:clamp(1.375rem,3vw,1.75rem);margin:0 0 .9rem}
.bg-close p{line-height:1.75;margin:0 0 1rem}
.bg-close-cta{display:flex;flex-wrap:wrap;gap:.7rem;margin-top:1.25rem}
.bg-close .btn--ghost{color:#fff;border-color:rgba(255,255,255,.35)}
.bg-close .btn--ghost:hover{background:rgba(255,255,255,.1);border-color:#fff;color:#fff}
/* Download affordance on the guide page. Hidden in print by the .bg-dl rule below: a
   button offering the PDF, inside the PDF, is not useful to anybody. */
/* Team Diva-style callout. The one line from the section worth remembering. Shown on
   screen as well as in the PDF, because a skimmer benefits from it more on the web. */
/* The FAQ. Nineteen questions that were genuinely asked, so the wording is the wording
   people search with -- worth keeping on the web page rather than burying it in the PDF. */
/* Ask at the end of each part. Ember rule above rather than a filled box: there are already
   pro tips in tinted boxes and a fifth box style would be noise. */
.bg-cta{margin:2rem 0 .5rem;padding:1.15rem 0 0;border-top:2px solid var(--ember)}
.bg-cta-l{margin:0 0 .55rem;font-size:1.0625rem;line-height:1.4;font-weight:600}
.bg-cta-a{margin:0;font-size:.9375rem}
.bg-cta-a a{color:var(--clay);font-weight:600;text-decoration:none;border-bottom:1px solid var(--ember-tint-bd)}
.bg-cta-or{color:var(--s500);margin:0 .5rem;font-weight:400}

/* The close. */
.bg-cl{margin:3rem 0 0;padding:2.25rem 0 0;border-top:2px solid var(--ink)}
.bg-cl-k,.bg-cl-k2{margin:0 0 .5rem;font-size:.6875rem;font-weight:700;letter-spacing:.11em;
  text-transform:uppercase;color:var(--clay)}
.bg-cl-k2{margin-top:2rem}
.bg-cl h2{font-size:clamp(1.6rem,3.2vw,2.125rem);line-height:1.1;letter-spacing:-.02em;margin:0 0 1rem}
.bg-cl-ways{display:flex;gap:2rem;align-items:flex-start;margin:1.75rem 0 0;flex-wrap:wrap}
.bg-cl-ways > div:first-child{flex:1 1 22rem;min-width:0}
.bg-cl-wh{margin:0 0 .7rem;font-size:.6875rem;font-weight:700;letter-spacing:.11em;
  text-transform:uppercase;color:var(--s500)}
.bg-cl-ways ol{margin:0;padding-left:1.2rem}
.bg-cl-ways li{margin:0 0 .6rem;line-height:1.4}
.bg-cl-ways li strong{display:block;font-size:1rem}
.bg-cl-ways li span{font-size:.875rem;color:var(--s700)}
.bg-qr{flex:0 0 auto;text-align:center}
.bg-qr img{width:104px;height:104px;display:block}
.bg-qr span{display:block;margin-top:.4rem;font-size:.6875rem;letter-spacing:.06em;
  text-transform:uppercase;color:var(--s500)}
.bg-cl-last{font-size:.9375rem;line-height:1.6;color:var(--s700);margin:0}
.bg-cl-sig{margin:1.5rem 0 0;padding-top:1rem;border-top:1px solid var(--border);font-size:.9375rem}

/* Pull quote. Kept on screen too: it breaks up a long read the same way it breaks up a
   long page, and the line is always one already in the section. */
.bg-pq{font-family:var(--display);font-size:1.375rem;line-height:1.25;letter-spacing:-.02em;
  margin:1.75rem 0;padding-left:1.15rem;border-left:3px solid var(--ember);max-width:32ch;
  color:var(--ink)}

/* Part names inside the on-page contents list. */
.bg-toc-p{list-style:none;margin-left:-1.1em;padding-top:.6rem;font-weight:700;
  font-size:.6875rem;letter-spacing:.1em;text-transform:uppercase;color:var(--clay)}
.bg-toc-p:first-child{padding-top:0}

.bg-faq{margin:2.5rem 0 0;padding-top:2rem;border-top:2px solid var(--ink)}
.bg-faq-g{margin:1.75rem 0 0}
.bg-faq-gh{margin:0 0 .9rem;font-size:.6875rem;font-weight:700;letter-spacing:.11em;
  text-transform:uppercase;color:var(--clay)}
.bg-faq-i{margin:0 0 1.1rem;padding:0 0 1.1rem;border-bottom:1px solid var(--border)}
.bg-faq-g > .bg-faq-i:last-child{border-bottom:0;padding-bottom:0}
.bg-faq-q{margin:0 0 .3rem;font-weight:650;font-size:1.0625rem;line-height:1.35}
.bg-faq-a{margin:0;font-size:.9375rem;line-height:1.6;color:var(--s700)}

.bg-step{margin:0 0 .35rem;font-size:.6875rem;font-weight:700;letter-spacing:.12em;
  text-transform:uppercase;color:var(--clay)}
.bg-toc ol{list-style:none;padding-left:0}
.bg-toc-n{display:inline-block;min-width:3.6rem;font-size:.6875rem;font-weight:700;
  letter-spacing:.08em;text-transform:uppercase;color:var(--s500)}
.bg-ck{list-style:none;margin:1.25rem 0 0;padding:0}
.bg-ck li{display:flex;gap:.8rem;align-items:flex-start;padding:.75rem 0;border-bottom:1px solid var(--border)}
.bg-ck .bg-box{flex:0 0 auto;width:15px;height:15px;border:1.5px solid var(--ink);border-radius:3px;margin-top:.2rem}
.bg-ck strong{display:block;font-size:1rem;line-height:1.3}
.bg-ck em{display:block;font-style:normal;font-size:.9rem;line-height:1.5;color:var(--s700);margin-top:.15rem}

.bg-tip{margin:1.5rem 0;padding:1rem 1.15rem;border-left:3px solid var(--ember);
  background:var(--ember-tint);border-radius:0 8px 8px 0}
.bg-tip-k{margin:0 0 .3rem;font-size:.6875rem;font-weight:700;letter-spacing:.1em;
  text-transform:uppercase;color:var(--clay)}
.bg-tip p:last-child{margin:0;font-size:.9375rem;line-height:1.55}

.bg-dl{display:inline-flex;gap:.75rem;align-items:center;margin-top:1.5rem;padding:.85rem 1.15rem;
  border:1.5px solid var(--ink);border-radius:10px;text-decoration:none;color:var(--ink);
  background:#fff;transition:background .15s ease,color .15s ease}
.bg-dl:hover{background:var(--ink);color:#fff}
.bg-dl-i{font-size:1.35rem;line-height:1}
.bg-dl strong{display:block;font-size:1rem;line-height:1.25}
.bg-dl em{display:block;font-size:.8125rem;font-style:normal;opacity:.72;margin-top:.1rem}

.bg-disc{margin:1.75rem 0 0;padding-top:1.25rem;border-top:1px solid var(--border);
  font-size:.8125rem;line-height:1.65;color:var(--s500)}

/* Print: this is how it becomes a PDF. Chrome's Save as PDF, nothing else needed. */
/* Cover, letter, worksheet, checklist and contact exist only in the printed/PDF copy. On
   screen the page already has a header and a CTA, and a ruled fill-in worksheet on a web page
   is just a form nobody can use. Kept in the DOM rather than built separately so the PDF can
   never drift from the page. */
.bg-sec .bg-pq{line-height:1.25}
/* Folding: the contents and each FAQ answer. Markers drawn in CSS so they match the type. */
.bg-toc > summary,.bg-faq-i > summary{cursor:pointer;list-style:none}
.bg-toc > summary::-webkit-details-marker,.bg-faq-i > summary::-webkit-details-marker{display:none}
.bg-toc > summary{display:flex;justify-content:space-between;align-items:center}
.bg-toc > summary span{color:var(--s500);font-weight:400;margin-left:.35rem;margin-right:auto}
.bg-toc > summary::after{content:"+";font-size:1.1rem;color:var(--ember)}
.bg-toc[open] > summary::after{content:"\2013"}
.bg-toc[open] > summary{margin-bottom:.6rem}
.bg-faq-i > summary{display:flex;justify-content:space-between;gap:1rem;align-items:baseline}
.bg-faq-i > summary::after{content:"+";flex:none;font-weight:400;color:var(--ember)}
.bg-faq-i[open] > summary::after{content:"\2013"}
.bg-faq-i[open] > summary{margin-bottom:.35rem}
.bg-check{margin:3rem 0 0;padding-top:2rem;border-top:2px solid var(--ink)}
.bg-check h2{font-size:clamp(1.375rem,3vw,1.75rem);margin:0 0 .35rem}
.bg-cl-ways a{display:block;color:inherit;text-decoration:none}
.bg-cl-ways a:hover strong{color:var(--clay)}
@media screen and (max-width:900px){.bg-qr{display:none}}
@media screen and (max-width:700px){
  .bg-sec p,.bg-intro p{line-height:1.65}
  .bg-intro p:first-child{font-size:1.125rem}
  .bg-sec{margin-bottom:2.25rem}
  .bg-sec h2{font-size:1.5rem}
  .bg-head{margin-bottom:1.5rem}
  .bg-dl{display:flex;width:100%}
  .bg-toc{padding:1rem 1.1rem}
  .bg-src,.bg-more{padding:.85rem 1rem}
  .bg-pq{font-size:1.25rem}
  .bg-cta-a{display:flex;flex-direction:column;gap:.55rem}
  .bg-cta-or{display:none}
  .bg-cta-a a{display:block;text-align:center;padding:.8rem 1rem;border:1.5px solid var(--ink);
    border-radius:999px;color:var(--ink)}
  .bg-cta-a a:first-child{background:var(--ember);border-color:var(--ember);color:#fff}
  .bg-cl-ways{display:block}
  .bg-cl-ways ol{padding:0;list-style:none}
  .bg-cl-ways li a{padding:.85rem 1rem;border:1.5px solid var(--border);border-radius:14px;
    margin-bottom:.6rem;background:var(--surface)}
  .bg-cl-ways li:first-child a{border-color:var(--ember)}
}

.bg-print{display:none}

@media print{
  /* .bg-close goes too: the contact page below does the same job and carries the phone
     number, the office address and the brokerage, which a printed copy actually needs. */
  .nav,.footer,.nlb,.bg-close,.bg-close-cta,.skip,.calltap{display:none!important}
  .bg-print{display:block}
  /* Front matter breaks after itself; back matter breaks before. Getting this the same way
     round for both put the worksheet at the foot of the closing page. */
  .bg-letter{page-break-after:always}
  /* .bg-cover and .bg-res are not listed: switching to a named page breaks the page by
     itself, and adding an explicit rule on top of that produced a blank sheet. */
  .bg-stats,.bg-ws,.bg-fm,.bg-check,.bg-contact{page-break-before:always}
  /* Pinned, because the full-bleed pages are sized in mm against it. */
  @page{size:Letter;margin:16mm 15mm}
  /* Zero-margin sheet for the two pages that run ink to the paper edge. Flowing text cannot
     use this -- it needs real page margins to break across sheets -- so only the cover and
     the resources page are assigned to it. */
  @page bleed{size:Letter;margin:0}
  html,body{font-size:10.5pt}
  body{background:#fff;color:#111}
  .section{padding:0}
  .wrap{padding:0;max-width:none}
  .bg{max-width:none}
  .bg-sec{page-break-inside:avoid;break-inside:avoid}
  .bg-sec h2,.bg-print h2{page-break-after:avoid}
  .bg-close{background:none;color:var(--ink);border:1px solid var(--border)}
  .bg-close h2{color:var(--ink)}
  .bg-toc{background:none;border:1px solid var(--border)}
  a[href^="http"]::after{content:" (" attr(href) ")";font-size:.75em;color:#666;word-break:break-all}
  /* The internal cross-links point at pages the reader does not have. Print the path so a
     printed copy still tells them where to go, which is what the http rule above does for
     outbound links. */
  .bg-more a::after{content:" (henosadhana.com" attr(href) ")";font-size:.75em;color:#666}

  /* -- cover ------------------------------------------------------------------ */
  /* The cover already carries the title, the subtitle and the eyebrow. Repeating all three
     on the next page read as a printing mistake, so on paper this becomes a contents page. */
  .bg-head{border-bottom:1px solid #ddd;padding-bottom:.9rem;margin-bottom:1.4rem}
  /* The back cover carries the disclaimer, so the on-page copy would otherwise add a
     stray final sheet after it. */
  .bg-head .eyebrow,.bg-head h1,.bg-sub,.bg-dl,.bg-disc{display:none}
  .bg-by{font-size:8.5pt;color:#666;margin:0}
  .bg-intro p{font-size:11pt;line-height:1.6;max-width:62ch}
  .bg-toc{page-break-inside:avoid}

  /* Solid backgrounds are the whole design. Chrome drops them from a PDF unless this is
     set, which turns the cover and the resources page into blank white sheets. */
  *{-webkit-print-color-adjust:exact!important;print-color-adjust:exact!important}

  /* Photograph across the top, solid ink block beneath. */
  /* Its own zero-margin sheet, so the block is simply the size of the paper. */
  .bg-cover{page:bleed;position:relative;display:flex;flex-direction:column;
    width:215.9mm;height:279.4mm;margin:0;border-bottom:none;background:#1C2127;
    box-sizing:border-box}
  .bg-cover-photo{position:relative;flex:0 0 58%;overflow:hidden}
  /* Child combinator: the badge below also contains an img, and the unscoped selector was
     stretching the 22px logo across the whole band. */
  .bg-cover-photo>img{width:100%;height:100%;object-fit:cover;object-position:50% 46%}
  .bg-cover-badge img{width:22px;height:22px;flex:0 0 auto}
  .bg-cover-badge{position:absolute;z-index:2;top:0;left:0;display:flex;align-items:center;
    gap:.4rem;
    padding:.5rem .85rem;background:#1C2127;color:#fff;font-size:9.5pt;font-weight:600;
    letter-spacing:.01em}
  .bg-cover-block{flex:1;display:flex;flex-wrap:wrap;align-content:space-between;
    padding:3.1rem 15mm 2rem;color:#fff}
  .bg-cover-main{flex:1 1 62%;min-width:0}
  .bg-cover h1{font-size:33pt;line-height:1.02;letter-spacing:-.025em;margin:0 0 .7rem;
    max-width:15ch;color:#fff}
  .bg-cover-sub{font-size:12pt;line-height:1.42;margin:0;max-width:36ch;color:#C7CBD0}
  /* Urban Living's right-hand rail of section names, rules and all. */
  .bg-cover-spine{flex:0 0 26%;list-style:none;margin:.5rem 0 0;padding:0}
  .bg-cover-spine li{font-size:8.5pt;letter-spacing:.06em;text-transform:uppercase;
    color:#fff;padding:.5rem 0;border-top:1px solid rgba(255,255,255,.28)}
  .bg-cover-spine li:first-child{border-top:0}
  .bg-cover-foot{flex:1 1 100%;padding-top:1.4rem;border-top:2px solid #EA580C}
  .bg-cover-by{font-size:8.5pt;color:#C7CBD0;margin:0 0 .15rem}
  .bg-cover-site{font-size:8.5pt;color:#EA580C;margin:0;letter-spacing:.05em;font-weight:600}
  .bg-cover-credit{position:absolute;right:15mm;top:calc(58% + 5pt);margin:0;
    font-size:6.5pt!important;color:#5E6670;letter-spacing:.02em}

  /* -- stats: big number, tiny label, three across ----------------------------- */
  .bg-stats h2,.bg-res h2{font-size:20pt;margin:0 0 .35rem;letter-spacing:-.01em}
  .bg-statgrp{margin:0 0 1.5rem;padding-top:.7rem;border-top:1.5px solid #1C2127;
    page-break-inside:avoid}
  .bg-statgrp-h{font-size:10.5pt;font-weight:700;margin:0}
  .bg-statgrp-s{font-size:7.5pt;color:#777;margin:.1rem 0 .9rem;letter-spacing:.04em;
    text-transform:uppercase}
  .bg-stat-row{display:flex;gap:1.1rem}
  .bg-stat{flex:1 1 0;min-width:0}
  .bg-stat-n{display:block;font-family:var(--display);font-size:19pt;line-height:1.05;
    font-weight:600;color:#EA580C;letter-spacing:-.02em}
  .bg-stat-l{display:block;font-size:8pt;line-height:1.3;color:#444;margin-top:.3rem}

  /* -- resources: solid ink, question then the authority that answers it -------- */
  .bg-res{page:bleed;background:#1C2127;color:#fff;margin:0;padding:20mm 15mm;
    width:215.9mm;height:279.4mm;box-sizing:border-box}
  .bg-res h2{color:#fff}
  .bg-res .bg-note{color:#8A929C!important}
  .bg-res-q{margin:0 0 1.05rem;page-break-inside:avoid}
  .bg-res-qh{font-size:10.5pt;font-weight:700;margin:0 0 .35rem;color:#fff}
  .bg-res ul{list-style:none;margin:0;padding:0}
  .bg-res li{font-size:9pt;line-height:1.5;padding:.1rem 0 .1rem .85rem;position:relative}
  .bg-res li::before{content:"";position:absolute;left:0;top:.55em;width:4px;height:4px;
    border-radius:50%;background:#EA580C}
  .bg-res a{color:#EA580C;text-decoration:none}
  /* The global rule prints every external href in brackets. On a page that is nothing but
     links that would double the text, so these carry the URL on their own line instead. */
  .bg-res a::after{content:" " attr(href)!important;display:block;font-size:6.5pt;
    color:#8A929C;word-break:break-all;letter-spacing:0}

  /* -- pro tip ------------------------------------------------------------------ */
  .bg-tip{margin:1rem 0;padding:.7rem .9rem;border-left:3px solid #EA580C;
    background:#FCEDE6;border-radius:0;page-break-inside:avoid}
  .bg-tip-k{font-size:7pt!important;margin:0 0 .2rem!important;color:#9A3412!important}
  .bg-tip p:last-child{font-size:9.5pt!important;line-height:1.5!important;margin:0!important}

  /* -- pull quote --------------------------------------------------------------- */
  .bg-pq{font-family:var(--display);font-size:16pt!important;line-height:1.22!important;
    letter-spacing:-.02em;color:#1C2127;margin:1.4rem 0 1.2rem!important;padding:0 0 0 12mm;
    position:relative;max-width:30ch;page-break-inside:avoid}
  .bg-pq::before{content:"";position:absolute;left:0;top:.42em;width:8mm;height:2px;
    background:#EA580C}

  /* -- back cover --------------------------------------------------------------- */
  .bg-back{page:bleed;position:relative;width:215.9mm;height:279.4mm;margin:0;overflow:hidden;
    background:#1C2127;box-sizing:border-box}
  .bg-back-txt{position:absolute;left:15mm;right:15mm;bottom:20mm;color:#fff}
  .bg-back-logo{width:34px;height:34px;margin:0 0 1rem}
  .bg-back h2{font-size:26pt;line-height:1.05;letter-spacing:-.025em;margin:0 0 .55rem;
    color:#fff}
  .bg-back-d{font-size:10pt!important;line-height:1.55!important;color:#fff;
    margin:1.5rem 0 0!important;padding-top:1.2rem;border-top:2px solid #EA580C}
  /* The global <strong> colour is the dark ink, which on this page is invisible. */
  .bg-back-d strong,.bg-back strong{color:#fff}
  /* Cropped low, so the bookend reads as a different photograph to the cover. */
  .bg-back .bg-part-img{object-position:50% 88%}
  .bg-back-disc{font-size:6.5pt!important;line-height:1.45!important;
    color:rgba(255,255,255,.5)!important;margin:1rem 0 0!important;max-width:64ch}

  /* -- cta bands ----------------------------------------------------------------- */
  .bg-cta{margin:1.1rem 0 0;padding:.7rem 0 0;border-top:1.5px solid #EA580C;
    page-break-inside:avoid}
  .bg-cta-l{font-size:10.5pt!important;line-height:1.35!important;margin:0 0 .3rem!important;
    font-weight:700}
  .bg-cta-a{font-size:9.5pt!important;margin:0!important}
  .bg-cta-a a{color:#9A3412;font-weight:700;text-decoration:none;border:0}
  .bg-cta-or{color:#777;margin:0 .4rem;font-weight:400}
  /* The global rule appends every http href in brackets; these two are already spelled out. */
  .bg-cta-a a::after{content:""!important}

  /* -- the close ------------------------------------------------------------------ */
  .bg-cl{page-break-before:always;margin:0;padding:0;border-top:0}
  .bg-cl-k,.bg-cl-k2{font-size:7.5pt;font-weight:700;letter-spacing:.14em;text-transform:uppercase;
    color:#EA580C;margin:0 0 .45rem}
  .bg-cl-k2{margin-top:1.5rem}
  .bg-cl h2{font-size:25pt;line-height:1.03;letter-spacing:-.025em;margin:0 0 .9rem}
  .bg-cl p{font-size:10.5pt;line-height:1.55;max-width:62ch}
  .bg-cl-ways{display:flex;gap:12mm;align-items:flex-start;margin:1.5rem 0 0;
    padding:1.1rem 0 0;border-top:1px solid #ddd;page-break-inside:avoid}
  .bg-cl-ways > div:first-child{flex:1 1 auto}
  .bg-cl-wh{font-size:7.5pt!important;font-weight:700;letter-spacing:.12em;
    text-transform:uppercase;color:#777;margin:0 0 .6rem!important}
  .bg-cl-ways ol{margin:0;padding-left:1.1rem}
  .bg-cl-ways li{margin:0 0 .5rem;line-height:1.32}
  .bg-cl-ways li strong{display:block;font-size:11pt}
  .bg-cl-ways li span{font-size:9pt;color:#555}
  .bg-qr{flex:0 0 auto;text-align:center}
  .bg-qr img{width:31mm;height:31mm;display:block}
  .bg-qr span{display:block;margin-top:.3rem;font-size:7pt;letter-spacing:.08em;
    text-transform:uppercase;color:#777}
  .bg-cl-last{font-size:9.5pt!important;line-height:1.5!important;color:#333}
  .bg-cl-sig{font-size:10pt!important;margin:1.4rem 0 0!important;padding-top:.9rem;
    border-top:2px solid #EA580C}

  /* -- photo interlude ---------------------------------------------------------- */
  .bg-photo{page:bleed;position:relative;width:215.9mm;height:279.4mm;margin:0;
    overflow:hidden;background:#1C2127;box-sizing:border-box}
  .bg-photo-scrim{position:absolute;top:0;left:0;width:100%;height:100%;
    background:linear-gradient(to bottom,rgba(28,33,39,0) 55%,rgba(28,33,39,.82) 100%)}
  .bg-photo-cap{position:absolute;left:15mm;right:30mm;bottom:19mm;margin:0;
    font-size:10.5pt!important;line-height:1.4!important;color:#fff}

  /* -- part dividers ------------------------------------------------------------ */
  .bg-part{page:bleed;position:relative;width:215.9mm;height:279.4mm;margin:0;
    overflow:hidden;background:#1C2127;box-sizing:border-box}
  .bg-part-img{position:absolute;top:0;left:0;width:100%;height:100%;object-fit:cover}
  /* Scrim, so the type stays legible whatever the photograph is doing underneath it. */
  .bg-part-scrim{position:absolute;top:0;left:0;width:100%;height:100%;
    background:linear-gradient(to bottom,rgba(28,33,39,.10) 0%,rgba(28,33,39,.30) 42%,
      rgba(28,33,39,.86) 78%,rgba(28,33,39,.96) 100%)}
  .bg-part-txt{position:absolute;left:15mm;right:15mm;bottom:24mm;color:#fff}
  .bg-part-n{font-size:9pt;letter-spacing:.20em;text-transform:uppercase;color:#EA580C;
    margin:0 0 .6rem;font-weight:700}
  .bg-part h2{font-size:30pt;line-height:1.02;letter-spacing:-.025em;margin:0 0 .7rem;
    color:#fff}
  .bg-part-l{font-size:11.5pt;line-height:1.45;margin:0;max-width:38ch;color:#E2E1DC}
  .bg-part-credit{position:absolute;left:15mm;bottom:13mm;margin:0;font-size:6.5pt!important;
    color:rgba(255,255,255,.55);letter-spacing:.02em}
  /* Part names in the contents, so the booklet structure is visible before page one. */
  .bg-toc-p{list-style:none;margin-left:-1.2em;padding-top:.5rem;font-weight:700;
    font-size:9pt;letter-spacing:.06em;text-transform:uppercase;color:#EA580C}

  /* -- faq ---------------------------------------------------------------------- */
  .bg-faq{page-break-before:always;margin:0;padding-top:0;border-top:0}
  .bg-faq h2{font-size:20pt;margin:0 0 .35rem;letter-spacing:-.01em}
  .bg-faq-g{margin:1.25rem 0 0;page-break-inside:auto}
  .bg-faq-gh{font-size:7.5pt;margin:0 0 .6rem;color:#9A3412}
  .bg-faq-i{margin:0 0 .62rem;padding:0 0 .62rem;page-break-inside:avoid}
  .bg-faq-q{font-size:10pt;line-height:1.3;margin:0 0 .18rem}
  .bg-faq-a{font-size:9pt;line-height:1.48;color:#333}

  /* -- steps -------------------------------------------------------------------- */
  .bg-step{font-size:7.5pt!important;font-weight:700;letter-spacing:.14em;text-transform:uppercase;
    color:#EA580C;margin:0 0 .3rem!important}
  .bg-toc ol{list-style:none;padding-left:0}
  .bg-toc-n{display:inline-block;min-width:3.2rem;font-size:7pt;font-weight:700;
    letter-spacing:.08em;text-transform:uppercase;color:#777}
  .bg-ck{list-style:none;margin:.9rem 0 0;padding:0}
  .bg-ck li{display:flex;gap:.7rem;align-items:flex-start;padding:.5rem 0;
    border-bottom:1px solid #e4e4e4;page-break-inside:avoid}
  .bg-ck .bg-box{flex:0 0 auto;width:13px;height:13px;border:1.5px solid #111;border-radius:2px;
    margin-top:.14rem}
  .bg-ck strong{display:block;font-size:10.5pt;line-height:1.3}
  .bg-ck em{display:block;font-style:normal;font-size:9pt;line-height:1.45;color:#444;
    margin-top:.1rem}
  .bg-n{color:#EA580C}
  /* Folded sections print open (GUIDE_JS opens them); the +/- markers are screen furniture. */
  .bg-toc > summary::after,.bg-faq-i > summary::after{content:none!important}
  .bg-faq-i > summary{display:block}
  .bg-toc > summary span{display:none}
  .bg-cl-ways a{color:inherit;text-decoration:none;border:0;padding:0;background:none}
  .bg-cl-ways a::after{content:""!important}
  .bg-cta-a a{display:inline;background:none!important;padding:0;border:0!important}
  .bg-check{margin:0;padding:0;border-top:0}

  /* -- letter ----------------------------------------------------------------- */
  .bg-letter{padding-top:.5rem}
  .bg-letter h2{font-size:20pt;margin:0 0 1.1rem;letter-spacing:-.01em}
  .bg-letter p{font-size:11pt;line-height:1.62;margin:0 0 .85rem;max-width:62ch}
  .bg-signblk{display:flex;align-items:center;gap:.9rem;margin-top:1.7rem;
    page-break-inside:avoid}
  /* Source is a 1000x1250 portrait, so a centred square crop lands on the chest. Bias
     the crop upward to keep the face in the circle. */
  .bg-face{width:58px;height:58px;border-radius:50%;object-fit:cover;
    object-position:50% 16%;flex:0 0 auto}
  .bg-sign{margin:0!important;font-size:13pt;font-weight:600}
  .bg-sign-role{margin:.15rem 0 0!important;font-size:8.5pt!important;color:#666}

  /* -- worksheet -------------------------------------------------------------- */
  .bg-ws h2,.bg-check h2{font-size:20pt;margin:0 0 .35rem;letter-spacing:-.01em}
  .bg-note{font-size:9.5pt;color:#666;margin:0 0 1.6rem;font-style:italic}
  .bg-ws-row{margin:0 0 1.15rem;page-break-inside:avoid}
  .bg-ws-l{display:block;font-size:8.5pt;font-weight:700;text-transform:uppercase;
    letter-spacing:.07em;color:#111;margin:0 0 .5rem}
  .bg-ws-line{display:block;border-bottom:1px solid #bbb;height:1.45rem}
  /* Printable grids (net sheet, offer comparison). */
  .bg-fm h2{font-size:20pt;margin:0 0 .35rem;letter-spacing:-.01em}
  .bg-fm-t{width:100%;border-collapse:collapse;margin-top:.8rem}
  .bg-fm-t th,.bg-fm-t td{border-bottom:1px solid #d5d4ce;padding:.36rem .4rem;font-size:9pt;text-align:left;vertical-align:bottom}
  .bg-fm-t thead th{font-size:7pt;font-weight:700;letter-spacing:.1em;text-transform:uppercase;color:#5E6670;border-bottom:1.5px solid #1C2127}
  .bg-fm-t tbody th{font-weight:600;width:44%;color:#1C2127}
  .bg-fm-t td{height:1.35rem;border-left:1px solid #ecebe7}
  .bg-fm-g th{padding-top:.85rem!important;font-size:7pt!important;font-weight:700;letter-spacing:.12em;text-transform:uppercase;color:#C2410C!important;border-bottom:1px solid #1C2127!important}

  /* -- checklist -------------------------------------------------------------- */
  .bg-check ul{list-style:none;margin:0;padding:0}
  .bg-check li{display:flex;gap:.7rem;align-items:flex-start;padding:.62rem 0;
    border-bottom:1px solid #e4e4e4;page-break-inside:avoid}
  .bg-box{flex:0 0 auto;width:13px;height:13px;border:1.5px solid #111;border-radius:2px;
    margin-top:.16rem}
  .bg-check strong{display:block;font-size:11pt;line-height:1.3}
  .bg-check em{display:block;font-size:9pt;color:#666;font-style:normal;margin-top:.1rem}

  /* -- contact ---------------------------------------------------------------- */
  .bg-contact{margin-top:2rem;padding-top:1.5rem;border-top:2px solid #111;
    page-break-inside:avoid}
  .bg-contact h2{font-size:18pt;margin:0 0 .5rem}
  .bg-contact p{font-size:10.5pt;line-height:1.55;max-width:58ch;margin:0 0 1rem}
  .bg-contact-d{font-size:11pt!important;line-height:1.5!important}
  .bg-contact-l{font-size:8.5pt!important;color:#666}
  /* The contact block prints the address in full, so suppress the URL-appending rule here. */
  .bg-contact a::after{content:""!important}
}

/* Scope note on the adult-family-home pages. Set apart so it reads as a statement of what
   is being transacted rather than as another paragraph of sales copy. */
.afh-scope{margin:1.5rem 0 0;padding:1rem 1.15rem;background:var(--sunken);
  border-left:3px solid var(--s300);border-radius:0 var(--r8) var(--r8) 0;
  font-size:.9375rem;line-height:1.65;color:var(--s700);max-width:64ch}

/* Visually-hidden utility. It was referenced 144 times across the site and never defined, so
   every "screen reader only" label was rendering on screen, including inside the email inputs.
   Standard clip pattern: removed from the visual flow, still announced by assistive tech. */
.sr-only{position:absolute;width:1px;height:1px;padding:0;margin:-1px;overflow:hidden;
  clip:rect(0,0,0,0);clip-path:inset(50%);white-space:nowrap;border:0}

/* eXp brokerage lockup. The toolkit forbids gradients, strokes, drop shadows, distortion
   and rotation on the mark, so it gets none of those: eXp's own White variant, at its true
   277.397:144 aspect, no filter, no opacity change, no hover state. Height is the only thing
   set; width follows from the ratio so it cannot squash. */
.footer-broker{margin:0 0 .85rem}
.exp-lockup{display:inline-flex;align-items:center;gap:.7rem;flex-wrap:wrap}
.exp-logo{width:auto;display:block}
.exp-lockup--foot .exp-logo{height:34px}
.exp-txt{font-size:.8125rem;color:var(--foot-muted);letter-spacing:.02em}
/* Footer, same rule: .footer-brand .brand-name is 18px white, so this matches it. */
.exp-lockup--foot .exp-txt{font-size:18px;font-weight:700;color:#fff}

/* Header pairing. The words sit beside the mark because the state guidelines are explicit that
   a firm logo does not satisfy the firm-name requirement, so the text is the compliant part and
   the mark is the courtesy. It used to be set small and grey, deliberately, so as not to compete
   with his own name. NWMLS rejected that on 5 October 2026: the brokerage identification must be
   as prominent as any other branding on the page. So the eXp wordmark now matches .brand-name
   exactly - same size, same weight, same ink - and the mark is full strength rather than faded.
   The brightness filter stays because eXp supply the White variant and the header is light; it
   renders the mark solid black, which is what a black variant would give. */
.nav-brand{display:flex;align-items:center;gap:14px;min-width:0}
.exp-lockup--nav{display:flex;align-items:center;gap:7px;padding-left:14px;
  border-left:1px solid var(--line)}
.exp-lockup--nav .exp-logo{height:36px;filter:brightness(0)}
.exp-lockup--nav .exp-txt{font-size:17px;font-weight:700;color:var(--ink);
  letter-spacing:.01em;white-space:nowrap}
/* On a phone both names shrink together and his tagline gives way first. Hiding the brokerage
   while keeping his own name is exactly what was objected to. */
@media(max-width:520px){
  .exp-lockup--nav{padding-left:10px;gap:6px}
  .brand-tag{display:none}
  .brand-name,.exp-lockup--nav .exp-txt{font-size:15px}
  .brand-logo{width:30px;height:30px}
  .exp-lockup--nav .exp-logo{height:24px}
}
.footer-brand .exp-lockup{margin:.9rem 0 0}

/* AFH weekly digest — the week header, the card disclosure, and the gate. The top-of-page
   signup band shares the .nlb sticker treatment with the Friday band and needs no CSS here.
   .dig-form still dresses the gate and the quiet closing repeat. */
.dig-form{display:grid;gap:.7rem}
.dig-fields{display:grid;gap:.7rem}
@media(min-width:520px){.dig-fields{grid-template-columns:minmax(0,.8fr) minmax(0,1.2fr)}}
.dig-form input[type=text],.dig-form input[type=email]{width:100%;min-width:0;min-height:52px;
  padding:0 1rem;font:inherit;font-size:16px;color:var(--ink);background:var(--surface);
  border:1.5px solid transparent;border-radius:var(--pill)}
.dig-form input::placeholder{color:var(--s500)}
.dig-form input:focus{outline:2px solid var(--ember);outline-offset:2px;border-color:var(--ember)}
.dig-btn{width:100%}
.dig-fine{font-size:.8125rem;color:var(--s500);margin:.85rem 0 0;line-height:1.6}

/* Closing repeat, on paper rather than ink so it reads as a reminder and not a second pitch. */
.dig-tail{background:var(--sunken);border:1px solid var(--border);border-radius:var(--r20);
  padding:clamp(1.5rem,4vw,2.25rem);display:grid;gap:1.5rem}
@media(min-width:900px){.dig-tail{grid-template-columns:minmax(0,1fr) minmax(0,.9fr);
  gap:3rem;align-items:center}}
.dig-tail h2{font-size:1.625rem;margin:0 0 .6rem}
.dig-tail p{margin:0;color:var(--s700);max-width:46ch;line-height:1.7}
.dig-tail .dig-form input[type=text],.dig-tail .dig-form input[type=email]{border-color:var(--border)}

.afh-weekhead{display:flex;align-items:flex-end;justify-content:space-between;gap:1rem;
  flex-wrap:wrap;margin-bottom:.75rem}
.afh-weekhead .eyebrow{margin-bottom:8px}
.afh-weekhead h2{font-size:clamp(1.75rem,3.4vw,2.25rem)}
.afh-weekcount{margin:0;font-size:.9375rem;color:var(--s500)}
.afh-weekcount strong{font-family:var(--display);font-size:1.5rem;color:var(--ink);margin-right:.25rem}

.mock-photo{position:relative}
.mock-new{position:absolute;top:.6rem;left:.6rem;background:var(--ember);color:#fff;
  font-family:var(--mono);font-size:10px;font-weight:700;letter-spacing:.09em;
  text-transform:uppercase;padding:.3rem .55rem;border-radius:var(--r4)}
.mock-open{display:block;width:100%;margin:0 0 .6rem;min-height:42px;padding:0 1rem;
  font:inherit;font-size:.9375rem;font-weight:600;color:var(--clay);background:var(--surface);
  border:1.5px solid var(--border);border-radius:var(--pill);cursor:pointer;
  transition:border-color .18s,background .18s}
.mock-open:hover{border-color:var(--ember);background:var(--ember-tint)}
.mock-detail{background:var(--sunken);border-radius:var(--r8);padding:.85rem 1rem;margin:0 0 .7rem}
.mock-detail-h{margin:0 0 .5rem;font-family:var(--mono);font-size:11px;letter-spacing:.07em;
  text-transform:uppercase;color:var(--clay)}
.mock-detail ul{margin:0;padding-left:1.1rem;font-size:.8125rem;line-height:1.55;color:var(--s700)}
.mock-detail li{margin-bottom:.3rem}
.mock-detail-n{margin:.6rem 0 0;font-size:.75rem;color:var(--s500);line-height:1.55}

/* The gate. Scroll is locked while it is open; the cards stay visible behind it because it
   is an offer, not a wall, and nothing on the page is withheld from anyone who closes it. */
.afh-gate-open{overflow:hidden}
.afh-gate[hidden]{display:none}
.afh-gate{position:fixed;inset:0;z-index:300;display:grid;place-items:center;padding:var(--gutter)}
.afh-gate-back{position:absolute;inset:0;background:rgba(28,33,39,.55);backdrop-filter:blur(3px)}
.afh-gate-card{position:relative;width:min(560px,100%);max-height:88vh;overflow-y:auto;
  background:var(--paper);border-radius:var(--r20);box-shadow:var(--sh2);
  padding:clamp(1.5rem,4vw,2.25rem);animation:gate-in .22s ease-out}
@media(prefers-reduced-motion:reduce){.afh-gate-card{animation:none}}
@keyframes gate-in{from{opacity:0;transform:translateY(12px)}to{opacity:1;transform:none}}
.afh-gate-card h2{font-size:clamp(1.5rem,3.2vw,1.875rem);margin:0 0 .75rem}
.afh-gate-card>p{color:var(--s700);line-height:1.7;margin:0 0 .9rem}
.afh-gate-x{position:absolute;top:.75rem;right:.75rem;width:40px;height:40px;display:grid;
  place-items:center;font-size:26px;line-height:1;color:var(--s500);background:transparent;
  border:0;border-radius:999px;cursor:pointer}
.afh-gate-x:hover{background:var(--sunken);color:var(--ink)}
.afh-gate .dig-form{margin-top:1.25rem}
.afh-gate .dig-form input[type=text],.afh-gate .dig-form input[type=email]{border-color:var(--border)}
.afh-gate .dig-fine{color:var(--s500)}

/* ---------------------------------------------------------------- the weekly note
   The cadence is the argument, so the run of weeks is furniture at the top of the section
   rather than a line at the bottom. Everything else is ordinary prose: a note is an article,
   and articles do not need a card. */
.mn-run{display:flex;align-items:center;gap:1.25rem;flex-wrap:wrap;padding:1rem 1.25rem;
  background:var(--sunken);border-radius:var(--r12);margin:0 0 1.5rem}
.mn-run-n{margin:0 0 .15rem;font-family:var(--display);font-size:1.375rem;color:var(--ink)}
.mn-run-d{margin:0;font-size:.8125rem;color:var(--s500)}
.mn-run-s{margin:0 0 0 auto;font-size:.8125rem;line-height:1.5;color:var(--s500);text-align:right}
.mn-ticks{display:flex;gap:4px;align-items:flex-end}
.mn-tick{width:9px;height:20px;border-radius:2px;background:var(--s300)}
.mn-tick.is-on{background:var(--rust)}
.mn-ticks .mn-tick.is-on:last-child{height:26px;background:var(--ember)}

.mn-latest{padding:1.6rem 1.75rem;background:var(--surface);border:1px solid var(--border);
  border-radius:var(--r12)}
.mn-latest h2{margin:.25rem 0 .9rem;font-size:1.7rem;line-height:1.2}
.mn-latest h2 a{color:var(--ink);text-decoration:none}
.mn-latest h2 a:hover{color:var(--rust)}
.mn-latest-p{margin:.9rem 0 1.1rem;font-size:1.0625rem;line-height:1.65}
.mn-latest-go{display:flex;align-items:center;gap:1.1rem;flex-wrap:wrap;margin:0}
.mn-medium{font-size:.9375rem;font-weight:600}

.mn-stats{display:flex;flex-wrap:wrap;gap:1.6rem;padding:.9rem 0;border-top:1px solid var(--border);
  border-bottom:1px solid var(--border)}
.mn-stats--big{gap:0;padding:0;border:1px solid var(--border);border-radius:var(--r12);
  overflow:hidden;margin:1.25rem 0}
.mn-stats--big>div{flex:1 1 0;padding:1rem 1.15rem;border-right:1px solid var(--border)}
.mn-stats--big>div:last-child{border-right:0}
.mn-stat-v{margin:0;font-size:1.4rem;font-weight:700;color:var(--ink);line-height:1.2}
.mn-stats--big .mn-stat-v{font-size:1.65rem}
.mn-stat-l{margin:0;font-size:.8125rem;color:var(--s500)}
.mn-stat-c{margin:.2rem 0 0;font-size:.8125rem;font-weight:600;color:var(--rust)}

.mn-empty{padding:2rem 1.75rem;border:2px dashed var(--line);border-radius:var(--r12);
  background:var(--surface);max-width:var(--prose)}
.mn-empty-h{margin:0 0 .6rem;font-family:var(--display);font-size:1.25rem;color:var(--ink)}
.mn-empty p{margin:0 0 .7rem;line-height:1.65}
.mn-empty p:last-child{margin-bottom:0}

.mn-earlier{margin-top:2rem}
.mn-earlier h2{font-size:1.25rem;margin:0 0 .5rem}
.mn-row{display:flex;gap:1.1rem;align-items:baseline;padding:.8rem 0;border-top:1px solid var(--border);
  text-decoration:none;color:inherit}
.mn-row:hover .mn-row-t{color:var(--rust)}
.mn-row-d{flex:none;width:9.5rem;font-size:.8125rem;color:var(--s500)}
.mn-row-t{font-size:1rem;font-weight:600;color:var(--ink)}

.mn-post .mn-byline{margin:.35rem 0 1.25rem;font-size:.875rem;color:var(--s500)}
.mn-post .mn-lede{font-size:1.1875rem;line-height:1.6;color:var(--ink)}
.mn-syn{margin:1.75rem 0 0;padding:1rem 1.15rem;background:var(--ember-tint);
  border:1px solid var(--ember-tint-bd);border-radius:var(--r8)}
.mn-syn p{margin:0;font-size:.9375rem;line-height:1.6}
.mn-syn-m{margin-top:.5rem !important;color:var(--s700)}

.mn-signup{display:flex;align-items:center;gap:1.5rem;flex-wrap:wrap;padding:1.5rem 1.75rem;
  background:var(--ink);border-radius:var(--r12)}
.mn-signup h2{margin:0 0 .3rem;font-size:1.3rem;color:#fff}
.mn-signup p{margin:0;font-size:.9375rem;color:var(--foot-text)}
.mn-signup .mr-form{display:flex;gap:.6rem;flex-wrap:wrap;margin-left:auto}
.mn-legal{margin:0;font-size:.8125rem;line-height:1.65;color:var(--s500)}

@media(max-width:700px){
  .mn-run-s{margin-left:0;text-align:left}
  .mn-stats--big{flex-direction:column}
  .mn-stats--big>div{border-right:0;border-bottom:1px solid var(--border)}
  .mn-row{flex-direction:column;gap:.15rem}
  .mn-row-d{width:auto}
  .mn-signup .mr-form{margin-left:0}
}

/* ---------------------------------------------------------------- off-MLS page
   These cards must not read as MLS listings. NWMLS requires its data to be distinguishable
   from everything else on a site, so this is a different object entirely: no photo frame, a
   rust rule across the top, and the provenance line is part of the card rather than fine
   print under it. */
.oml-compare{display:grid;grid-template-columns:repeat(auto-fit,minmax(280px,1fr));gap:1rem}
.oml-compare-c{padding:1.15rem 1.35rem;border:1px solid var(--border);border-radius:var(--r12);
  background:var(--surface)}
.oml-compare-c--this{background:var(--ember-tint);border-color:var(--ember-tint-bd)}
.oml-compare-h{margin:0 0 .35rem;font-weight:700;color:var(--ink)}
.oml-compare-c p{margin:0 0 .5rem;font-size:.9375rem;line-height:1.6}
.oml-compare-c p:last-child{margin-bottom:0}

.oml-chips{display:flex;flex-wrap:wrap;gap:.5rem;margin:0 0 1.25rem}
.oml-chip{font-size:.875rem;padding:.35rem .75rem;border:1px solid var(--border);
  border-radius:var(--pill);background:var(--surface);color:var(--s700)}
.oml-chip.is-on{background:var(--ink);border-color:var(--ink);color:#fff}
.oml-chip b{margin-left:.3rem}

.oml-grid{display:grid;grid-template-columns:repeat(auto-fill,minmax(270px,1fr));gap:1.15rem}
.oml-card{position:relative;padding:1.4rem 1.25rem 1.15rem;background:var(--surface);
  border:1px solid var(--border);border-radius:var(--r12);display:flex;flex-direction:column;gap:.5rem}
.oml-card::before{content:"";position:absolute;left:0;right:0;top:0;height:6px;background:var(--rust);
  border-radius:var(--r12) var(--r12) 0 0}
.oml-tag{margin:0;font-size:.6875rem;font-weight:700;letter-spacing:.08em;text-transform:uppercase;
  color:var(--rust)}
.oml-card--rent .oml-tag{color:#0F3D2E}
.oml-card--rent::before{background:#0F3D2E}
.oml-card--business .oml-tag,.oml-card--land .oml-tag{color:var(--s500)}
.oml-card--business::before,.oml-card--land::before{background:var(--s500)}
.oml-price{margin:0;font-size:1.3rem;font-weight:700;color:var(--ink);line-height:1.2}
.oml-title{margin:0;font-size:1.0625rem;line-height:1.35;color:var(--ink)}
.oml-where{margin:0;font-size:.875rem;color:var(--s500)}
.oml-facts{margin:0;font-size:.9375rem;color:var(--s700)}
.oml-tags{list-style:none;display:flex;flex-wrap:wrap;gap:.3rem;margin:0;padding:0}
.oml-tags li{font-size:.75rem;padding:.2rem .5rem;border:1px solid var(--border);
  border-radius:var(--r8);background:var(--sunken);color:var(--s700)}
.oml-note{margin:0;padding:.6rem .75rem;background:var(--sunken);border-radius:var(--r8);
  font-size:.875rem;line-height:1.55}
.oml-perm{margin:auto 0 0;padding-top:.7rem;border-top:1px solid var(--border);font-size:.75rem;
  color:var(--s500);line-height:1.5}
.oml-ask{font-size:.9375rem;font-weight:600}

.oml-empty{padding:2rem 1.75rem;border:2px dashed var(--line);border-radius:var(--r12);
  background:var(--surface);max-width:var(--prose)}
.oml-empty-h{margin:0 0 .6rem;font-family:var(--display);font-size:1.25rem;color:var(--ink)}
.oml-empty p{margin:0 0 .7rem;line-height:1.65}
.oml-empty p:last-child{margin-bottom:0}

.oml-form{background:var(--surface);border:1px solid var(--border);border-radius:var(--r12);
  padding:1.5rem;display:flex;flex-direction:column;gap:1rem}
.oml-fields{display:grid;grid-template-columns:repeat(auto-fit,minmax(180px,1fr));gap:.85rem}
.oml-fields--3{grid-template-columns:repeat(auto-fit,minmax(170px,1fr))}
.oml-fields--4{grid-template-columns:repeat(auto-fit,minmax(140px,1fr))}
.oml-form label{display:flex;flex-direction:column;gap:.3rem;font-size:.8125rem;font-weight:600;
  color:var(--ink)}
.oml-wide{grid-column:1/-1}
.oml-form input[type=text],.oml-form input[type=email],.oml-form input[type=tel],
.oml-form input[type=number],.oml-form textarea{font:inherit;font-size:.9375rem;font-weight:400;
  padding:.6rem .7rem;border:1px solid var(--border);border-radius:var(--r8);background:var(--surface);
  color:var(--ink)}
.oml-form textarea{resize:vertical}
.oml-form fieldset{border:1px solid var(--border);border-radius:var(--r8);padding:.85rem 1rem;margin:0}
.oml-form legend{font-size:.8125rem;font-weight:700;color:var(--ink);padding:0 .35rem}
.oml-radios,.oml-checks{display:flex;flex-wrap:wrap;gap:.9rem}
.oml-radio,.oml-check{flex-direction:row;align-items:center;gap:.45rem;font-size:.9375rem;
  font-weight:400;color:var(--s700)}
.oml-radio input,.oml-check input{width:17px;height:17px;accent-color:var(--rust)}
.oml-checks{padding:.7rem .85rem;background:var(--sunken);border-radius:var(--r8)}
.oml-perm-box{padding:1rem 1.1rem;background:var(--ember-tint);border:1px solid var(--ember-tint-bd);
  border-radius:var(--r8)}
.oml-check--perm{align-items:flex-start}
.oml-check--perm input{margin-top:3px;flex:none}
.oml-check--perm span{font-size:.9375rem;line-height:1.55;font-weight:400}
.oml-perm-n{margin:.65rem 0 0 1.6rem;font-size:.8125rem;line-height:1.55;color:var(--clay)}
.oml-fine{margin:0;font-size:.8125rem;color:var(--s500)}
.oml-legal{margin:0;font-size:.8125rem;line-height:1.65;color:var(--s500);max-width:var(--content)}

@media(max-width:600px){
  .oml-card{padding:1.3rem 1.05rem 1rem}
  .oml-form{padding:1.15rem}
  .oml-perm-n{margin-left:0}
}

/* On a 375px screen the card was 37px taller than its own max-height, which put the last
   line ("nothing on this page is hidden from you") behind an internal scrollbar. That line
   is the one doing the trust work, so the padding gives way instead. */
@media(max-width:600px){
  .afh-gate{padding:12px}
  .afh-gate-card{max-height:92vh;padding:1.35rem 1.25rem}
  .afh-gate-card>p{margin:0 0 .7rem;font-size:.9375rem}
  .afh-gate .dig-form{margin-top:1rem}
  .afh-gate-x{top:.4rem;right:.4rem}
}

/* hero peek placement, generated from HERO_GUIDES */
.peek--buy{--lens-x:42.0%;--lens-y:51.0%;--lens-w:52.0%;--seal-x:80.0%;--seal-y:21.0%}
.peek--sell{--lens-x:42.0%;--lens-y:51.0%;--lens-w:52.0%;--seal-x:80.0%;--seal-y:21.0%}