/* Brand system from jared-harman-brand-guide.md.
   Harbor Navy for depth, Rust as the single accent, cool neutrals.
   Bricolage Grotesque 800 for display, system sans for body.

   Two rules worth restating because they are easy to erode:
   1. Rust is the ONLY accent. Never decorative, never mixed with another
      emphasis color. CTAs and emphasis only.
   2. Never rust on cream. Rust sits on navy or on white. Cream plus rust is a
      known overused AI-generated look and the guide calls it out by name.

   Content never depends on JavaScript, because several AI crawlers do not
   execute it. The only script is site.js, progressive enhancement for a review
   carousel that already works by swiping. */

/* Token names and values mirror
   Harman Branding Assets/Existing Site asset reference/ghl-global.css,
   which is the implemented system the GHL funnels already run. The Worker
   routes both from one apex, so a visitor moving from /sign-1 to /about must
   not see the brand change under them. Keep these in sync. */
:root {
  color-scheme: light;
  --navy: #0e1f33;
  --navy-2: #16304c;  /* layered panels */
  --rust: #c84630;
  --rust-2: #a83822;  /* pressed and hover */
  --ink: #1b2a3b;     /* navy-dark, not a fake black */
  --slate: #5b6b7b;
  --mist: #e9eef2;
  --fog: #f7f8f7;
  --white: #ffffff;
  --line: #d7dee5;
  --green: #2fd07c;   /* positive-number moments only, never decorative */
  --heading: #0e1f33; /* headings: Harbor Navy */

  /* 8px grid */
  --s1: 8px;  --s2: 16px; --s3: 24px; --s4: 32px;
  --s5: 48px; --s6: 64px; --s7: 96px;

  --radius: 10px;
  --measure: 640px;   /* --jh-max-text */
  --wide: 1120px;     /* --jh-max-wide */

  --display: 'Bricolage Grotesque', -apple-system, BlinkMacSystemFont,
    'Segoe UI', Roboto, Helvetica, Arial, sans-serif;
  --body: -apple-system, BlinkMacSystemFont, 'SF Pro Text', 'Segoe UI', Roboto,
    Helvetica, Arial, sans-serif;
}

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

body {
  margin: 0;
  background: var(--fog);
  color: var(--ink);
  font-family: var(--body);
  font-size: 1.0625rem;
  line-height: 1.65;
  -webkit-font-smoothing: antialiased;
}

h1, h2, h3, .wordmark {
  font-family: var(--display);
  font-weight: 800;
  letter-spacing: -0.02em;
}

h1 {
  font-size: clamp(2.1rem, 6vw, 3.4rem);
  line-height: 1.05;
  color: var(--heading);
  margin: 0 0 1.25rem;
}

h2 {
  font-size: clamp(1.35rem, 3.4vw, 1.75rem);
  line-height: 1.2;
  color: var(--heading);
  margin: 3rem 0 0.9rem;
  padding-top: 1.75rem;
  border-top: 1px solid var(--mist);
}

/* Header. Phones: one compact sticky bar (brand, Book a call, Menu) with the
   nav in a panel. Desktop: inline dropdowns. Dropdowns are native <details>;
   without JavaScript the nav simply shows under the bar. */
.skip {
  position: absolute; left: 12px; top: -48px; z-index: 100;
  background: var(--rust); color: #fff; padding: 10px 14px; border-radius: 8px;
  font-weight: 600; text-decoration: none;
}
.skip:focus { top: 12px; color: #fff; }

.site-header {
  position: sticky; top: 0; z-index: 50;
  background: rgba(247, 248, 247, 0.96);
  -webkit-backdrop-filter: saturate(1.2) blur(8px); backdrop-filter: saturate(1.2) blur(8px);
  border-bottom: 1px solid var(--line);
}
.hdr {
  position: relative; max-width: var(--wide); margin: 0 auto;
  padding: 8px 12px 8px 16px;
  display: flex; flex-wrap: wrap; align-items: center; gap: 8px;
}
.brand { display: flex; align-items: center; gap: 10px; text-decoration: none; min-width: 0; flex: 1 1 0; }
.brand img {
  width: 38px; height: 38px; border-radius: 50%; object-fit: cover; flex: none;
  box-shadow: 0 0 0 2px #fff, 0 0 0 3.5px var(--rust);
}
.brand-text { display: flex; flex-direction: column; line-height: 1.2; min-width: 0; }
.wordmark { color: var(--ink); font-size: 1rem; white-space: nowrap; }
.brand-meta { color: var(--slate); font-size: 0.68rem; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }

.hdr-cta {
  display: inline-flex; align-items: center; min-height: 44px;
  background: var(--rust); color: #fff; text-decoration: none;
  padding: 0 14px; border-radius: 999px; font-size: 0.88rem; font-weight: 600; white-space: nowrap;
}
.hdr-cta:hover, .hdr-cta:focus { background: var(--rust-2); color: #fff; }
.cta-long { display: none; }

.nav-toggle {
  display: inline-flex; align-items: center; gap: 8px; min-height: 44px; padding: 0 12px;
  border: 1px solid var(--line); border-radius: 999px; background: var(--white);
  color: var(--heading); font: inherit; font-size: 0.88rem; font-weight: 600; cursor: pointer;
}
.nav-toggle[hidden] { display: none; }
.nav-toggle-bars, .nav-toggle-bars::before, .nav-toggle-bars::after {
  display: block; width: 16px; height: 2px; border-radius: 2px; background: currentColor; transition: transform 0.2s ease, opacity 0.2s ease;
}
.nav-toggle-bars { position: relative; }
.nav-toggle-bars::before, .nav-toggle-bars::after { content: ''; position: absolute; left: 0; }
.nav-toggle-bars::before { top: -5px; }
.nav-toggle-bars::after { top: 5px; }
.nav-open .nav-toggle-bars { background: transparent; }
.nav-open .nav-toggle-bars::before { transform: translateY(5px) rotate(45deg); }
.nav-open .nav-toggle-bars::after { transform: translateY(-5px) rotate(-45deg); }
.nav-toggle:focus-visible { outline: 2px solid var(--rust); outline-offset: 2px; }

/* Phone menu panel */
nav.site { flex: 1 1 100%; }
.js-nav nav.site { display: none; }
.js-nav.nav-open nav.site { display: block; max-height: calc(100vh - 72px); overflow-y: auto; overscroll-behavior: contain; padding-bottom: 12px; }
.menu { list-style: none; margin: 0; padding: 0; display: grid; }
.menu > li { margin: 0; border-top: 1px solid var(--line); }
.menu a.top,
.menu summary {
  display: flex; align-items: center; justify-content: space-between; gap: 6px;
  min-height: 48px; padding: 0 4px; border-radius: 8px;
  color: var(--ink); font-size: 1rem; font-weight: 600;
  text-decoration: none; cursor: pointer; list-style: none;
}
.menu summary::-webkit-details-marker { display: none; }
.menu summary::after {
  content: ''; width: 7px; height: 7px; margin-top: -3px;
  border-right: 2px solid currentColor; border-bottom: 2px solid currentColor;
  transform: rotate(45deg); transition: transform 0.15s ease;
}
.menu details[open] > summary::after { transform: rotate(-135deg); margin-top: 3px; }
.menu details.active > summary { color: var(--rust-2); }
.sub { list-style: none; margin: 0; padding: 0 0 10px; display: grid; gap: 2px; }
.sub li { margin: 0; }
.sub a {
  display: block; padding: 10px 12px; border-radius: 10px; background: var(--white);
  color: var(--ink); font-size: 0.95rem; font-weight: 600; text-decoration: none;
}
.sub a:hover, .sub a:focus-visible { background: var(--mist); color: var(--ink); }
.sub a[aria-current='page'] { color: var(--rust-2); }
.sub .note { display: block; font-size: 0.8rem; font-weight: 400; color: var(--slate); margin-top: 2px; }
.sub-wide { grid-template-columns: 1fr 1fr; }

@media (min-width: 400px) {
  .brand-meta { font-size: 0.72rem; }
}

@media (min-width: 960px) {
  .hdr { flex-wrap: nowrap; gap: 20px; padding: 10px 20px; }
  .brand { flex: 0 0 auto; }
  .brand img { width: 40px; height: 40px; }
  .wordmark { font-size: 1.05rem; }
  .brand-meta { font-size: 0.75rem; }
  .cta-long { display: inline; }
  .cta-short { display: none; }
  .nav-toggle, .nav-toggle:not([hidden]) { display: none; }
  nav.site, .js-nav nav.site { display: block; order: 0; flex: 0 1 auto; margin-left: auto; max-height: none; overflow: visible; padding: 0; }
  .hdr-cta { order: 1; min-height: 40px; padding: 0 16px; font-size: 0.9rem; }
  .menu { display: flex; gap: 2px; }
  .menu > li { border: 0; }
  .menu a.top, .menu summary { justify-content: flex-start; min-height: 40px; padding: 0 10px; font-size: 0.92rem; }
  .menu summary::after { width: 6px; height: 6px; }
  .menu summary:hover, .menu a.top:hover, .menu details[open] > summary { color: var(--heading); background: var(--mist); }
  .menu details { position: relative; }
  .sub {
    position: absolute; left: 0; top: calc(100% + 8px); min-width: 18rem; padding: 8px;
    background: var(--white); border: 1px solid var(--line); border-radius: 12px;
    box-shadow: 0 18px 40px rgba(14, 31, 51, 0.22);
  }
  .sub a { background: none; }
  .sub-wide { min-width: 26rem; column-gap: 4px; }
}

a:focus-visible, summary:focus-visible, .table-scroll:focus-visible {
  outline: 2px solid var(--rust); outline-offset: 2px;
}

/* Body */
main { max-width: 62rem; margin: 0 auto; padding: 2.75rem 1.25rem 4rem; }
article > p, article > ul, .lead { max-width: var(--measure); }
p { margin: 0 0 1.1rem; }

.lead {
  font-family: var(--display);
  font-weight: 800;
  font-size: clamp(1.25rem, 3vw, 1.6rem);
  line-height: 1.3;
  letter-spacing: -0.015em;
  color: var(--heading);
  border-left: 4px solid var(--rust);
  padding-left: 1.25rem;
  margin-bottom: 2.25rem;
}

a { color: var(--ink); text-decoration-color: var(--rust); text-underline-offset: 0.18em; }
a:hover, a:focus { color: var(--rust); }

/* Byline */
.byline {
  display: flex;
  gap: 0.875rem;
  align-items: center;
  padding: 1rem 0;
  border-top: 1px solid var(--mist);
  border-bottom: 1px solid var(--mist);
  margin-bottom: 2.25rem;
}
.byline img { border-radius: 50%; flex: none; object-fit: cover; }
.byline p { margin: 0; font-size: 0.875rem; }
.byline .dates { color: var(--slate); font-size: 0.8rem; margin-top: 0.15rem; }

/* Statistics. Rust is emphasis, so a real number earns it. */
.stat { display: inline; }
.stat strong { color: var(--rust); font-family: var(--display); font-weight: 800; }
.stat .src, .stat .fp { font-size: 0.85em; color: var(--slate); }

/* Proof strip */
.proof {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(9rem, 1fr));
  gap: 1px;
  background: var(--mist);
  border: 1px solid var(--mist);
  margin: 2rem 0;
  max-width: var(--measure);
}
.proof div { background: var(--white); padding: 1.1rem 1rem; }
.proof dt {
  font-family: var(--display);
  font-weight: 800;
  font-size: 1.5rem;
  color: var(--rust);
  line-height: 1;
}
.proof dd { margin: 0.35rem 0 0; font-size: 0.8125rem; color: var(--slate); line-height: 1.35; }
.proof-note { font-size: 0.8125rem; color: var(--slate); max-width: var(--measure); }

ul { padding-left: 1.2rem; }
li { margin-bottom: 0.4rem; }

/* Video */
figure.video { margin: 2.25rem 0; max-width: var(--measure); }
figure.video iframe { width: 100%; aspect-ratio: 16 / 9; border: 0; background: var(--navy); }
figcaption { font-size: 0.875rem; color: var(--slate); margin-top: 0.5rem; }

nav.related ul { list-style: none; padding: 0; }
nav.related li { margin-bottom: 0.5rem; }

/* Contact. Rust on navy, per the palette rule. */
aside.contact {
  background: var(--white);
  border: 1px solid var(--line);
  border-left: 4px solid var(--rust);
  border-radius: 12px;
  color: var(--ink);
  padding: 2rem 1.5rem;
  margin-top: 3.5rem;
  max-width: var(--measure);
}
aside.contact h2 { color: var(--heading); border: 0; margin-top: 0; padding-top: 0; }
aside.contact a { color: var(--rust); text-decoration-color: var(--rust); }
aside.contact a:hover, aside.contact a:focus { color: var(--rust-2); }
aside.contact .legal {
  font-size: 0.8125rem;
  line-height: 1.55;
  color: var(--slate);
  margin-top: 1.5rem;
  padding-top: 1.1rem;
  border-top: 1px solid var(--line);
}

/* Footer. Copied verbatim from Harman Branding Assets/Existing Site asset
   reference/site-footer-v2.html so it matches the GHL funnels exactly. */
.jhf{
  width:100%;
  background:var(--jh-navy,#0E1F33);
  border-top:3px solid var(--jh-rust,#C84630);
  font-family:var(--jh-body,-apple-system,BlinkMacSystemFont,'Segoe UI',Roboto,Helvetica,Arial,sans-serif);
}
.jhf-in{
  max-width:560px;margin:0 auto;
  padding:28px 20px 32px;
  text-align:center;
}
.jhf-brand{display:flex;flex-direction:column;margin-bottom:14px;}
.jhf-name{
  font-family:var(--jh-display,"Bricolage Grotesque",-apple-system,sans-serif);
  font-weight:800;letter-spacing:-.01em;
  font-size:16px;color:#fff;
}
.jhf-tag{font-size:12px;color:rgba(255,255,255,.6);margin-top:3px;}
.jhf-links{font-size:13px;margin-bottom:14px;}
.jhf-links a{color:#fff;text-decoration:none;font-weight:500;transition:color .15s ease;}
.jhf-links a:hover{color:var(--jh-rust,#C84630);}
.jhf-dot{color:rgba(255,255,255,.3);margin:0 8px;}
.jhf-legal{font-size:11px;color:rgba(255,255,255,.4);line-height:1.6;}

/* ------------------------------------------------------------------ *
 * Home page
 * ------------------------------------------------------------------ */
main.home { max-width: none; padding: 0; }
.wrap { max-width: var(--wide); margin: 0 auto; padding: 0 20px; }
.wrap.narrow { max-width: 780px; }
.band { padding: 56px 0; }
.band-mist { background: var(--mist); }
.band-white { background: var(--white); }
.band-navy { background: var(--navy); color: #c9d4de; }
.home h2 { border: 0; padding: 0; margin: 0 0 16px; font-size: clamp(1.7rem, 4.2vw, 2.5rem); line-height: 1.1; max-width: 22ch; }
.home h3 { font-size: 1.2rem; line-height: 1.25; color: var(--heading); margin: 0 0 10px; }
.band-navy h2, .band-navy h3 { color: #fff; }
.eyebrow {
  margin: 0 0 10px; font-size: 0.78rem; font-weight: 700;
  letter-spacing: 0.1em; text-transform: uppercase; color: var(--rust-2);
}
.hero .eyebrow, .band-navy .eyebrow { color: #c9d4de; }
.intro { font-size: 1.1rem; color: var(--slate); max-width: var(--measure); margin-bottom: 32px; }
.band-navy .intro, .band-navy p { color: #c9d4de; }
.band-navy a { color: #fff; }
.band-navy a:hover, .band-navy a:focus { color: var(--rust); }

/* Hero */
.hero {
  position: relative; overflow: hidden; isolation: isolate;
  min-height: clamp(560px, 88vh, 820px);
  display: flex; align-items: flex-end;
  background: var(--navy); color: #fff;
}
.hero-img { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; object-position: 50% 70%; z-index: -2; }
.hero::after {
  content: ''; position: absolute; inset: 0; z-index: -1;
  background: linear-gradient(to top, rgba(14, 31, 51, 0.94) 0%, rgba(14, 31, 51, 0.62) 50%, rgba(14, 31, 51, 0.2) 100%);
}
.hero-in { width: 100%; max-width: var(--wide); margin: 0 auto; padding: 120px 20px 56px; }
.hero h1 { color: #fff; font-size: clamp(2.6rem, 8vw, 4.8rem); line-height: 1; max-width: 13ch; margin-bottom: 20px; }
.hero-lead { font-size: clamp(1.05rem, 2.2vw, 1.25rem); line-height: 1.55; color: rgba(255, 255, 255, 0.9); max-width: 40rem; margin-bottom: 28px; }
.hero-sub { margin: 18px 0 0; font-size: 0.95rem; }
.hero-sub a { color: #fff; }
.btn-row { display: flex; flex-wrap: wrap; gap: 12px; }
.btn {
  display: inline-flex; align-items: center; justify-content: center;
  padding: 14px 24px; border-radius: 999px; font-weight: 600; text-decoration: none;
  min-height: 48px;
}
.btn-primary { background: var(--rust); color: #fff; }
.btn-primary:hover, .btn-primary:focus { background: var(--rust-2); color: #fff; }
.btn-ghost { border: 1.5px solid rgba(255, 255, 255, 0.75); color: #fff; }
.btn-ghost:hover, .btn-ghost:focus { background: rgba(255, 255, 255, 0.12); color: #fff; }
.btn-outline { border: 1.5px solid var(--line); color: var(--heading); background: var(--white); }
.btn-outline:hover, .btn-outline:focus { border-color: var(--rust); color: var(--rust); }

/* Proof band */
.band-proof { background: var(--white); padding: 28px 0 20px; border-bottom: 1px solid var(--line); }
.band-proof .proof { max-width: none; margin: 0 0 12px; grid-template-columns: repeat(auto-fit, minmax(10.5rem, 1fr)); }
.band-proof .proof-note { max-width: none; margin: 0; }

/* Split layouts */
.split { display: grid; gap: 36px; align-items: center; }
.split p { max-width: var(--measure); }
figure.photo { margin: 0; }
figure.photo img { display: block; width: 100%; height: auto; border-radius: 14px; }
figure.photo figcaption { margin-top: 10px; }
.portrait { margin: 0; justify-self: center; }
.portrait img {
  display: block; width: min(340px, 80vw); height: auto; border-radius: 18px;
  box-shadow: 0 0 0 4px var(--white), 0 0 0 6px var(--rust);
}
@media (min-width: 900px) {
  .band { padding: 88px 0; }
  .split { grid-template-columns: 1.1fr 0.9fr; gap: 64px; }
  .split-rev { grid-template-columns: 0.9fr 1.1fr; }
}

/* Service cards */
.cards { display: grid; gap: 16px; grid-template-columns: repeat(auto-fill, minmax(min(100%, 300px), 1fr)); }
.card {
  display: flex; flex-direction: column;
  background: var(--white); border: 1px solid var(--line); border-radius: 14px; padding: 24px;
  scroll-margin-top: 76px;
}
.card p { font-size: 0.98rem; }
.card-link { margin: auto 0 0; padding-top: 6px; }
.card-link a { color: var(--rust-2); font-weight: 600; }

/* Steps */
.steps { list-style: none; counter-reset: step; padding: 0; margin: 0 0 24px; }
.steps li { counter-increment: step; position: relative; padding: 0 0 18px 52px; margin: 0; }
.steps li::before {
  content: counter(step); position: absolute; left: 0; top: -2px;
  width: 36px; height: 36px; border-radius: 50%;
  display: grid; place-items: center;
  background: var(--rust); color: #fff; font-family: var(--display); font-weight: 800;
}
.steps strong { display: block; color: var(--heading); font-size: 1.05rem; }

/* Price explorer. Mobile first: each zip stacks its label above a full-width
   bar. The Houses / Condos toggle is radio buttons plus :has(), no JS. */
.explorer { background: var(--fog); border: 1px solid var(--line); border-radius: 16px; padding: 16px; margin: 0 0 20px; }
.explorer-head { display: grid; gap: 12px; margin-bottom: 8px; }
.explorer-cap { margin: 0; font-size: 0.85rem; color: var(--slate); }
.seg { display: grid; grid-template-columns: 1fr 1fr; gap: 4px; margin: 0; padding: 4px; border: 0; background: var(--mist); border-radius: 999px; }
.seg input { position: absolute; opacity: 0; width: 1px; height: 1px; }
.seg label {
  display: grid; place-items: center; min-height: 44px; padding: 0 12px; border-radius: 999px;
  font-size: 0.9rem; font-weight: 600; color: var(--slate); cursor: pointer; text-align: center; line-height: 1.2;
  transition: background-color 0.2s ease, color 0.2s ease;
}
.seg input:checked + label { background: var(--white); color: var(--heading); box-shadow: 0 1px 4px rgba(14, 31, 51, 0.15); }
.seg input:focus-visible + label { outline: 2px solid var(--rust); outline-offset: 2px; }

.bars { list-style: none; margin: 0; padding: 0; }
.bars li {
  display: grid; grid-template-columns: 1fr auto; grid-template-areas: 'label label' 'track value';
  align-items: center; gap: 6px 12px; margin: 0; padding: 12px 0; border-top: 1px solid var(--line);
  scroll-margin-top: 76px;
}
.bars li:first-child { border-top: 0; }
.bar-label { grid-area: label; font-size: 0.85rem; color: var(--slate); line-height: 1.35; }
.bar-label a { font-family: var(--display); font-weight: 800; font-size: 1rem; color: var(--rust-2); margin-right: 4px; }
.bar-track { grid-area: track; height: 10px; background: var(--mist); border-radius: 999px; overflow: hidden; }
.bar {
  display: block; height: 100%; border-radius: 999px; background: var(--rust);
  width: calc(var(--house) * 100%); transition: width 0.8s cubic-bezier(0.2, 0.7, 0.2, 1);
}
.bar-value { grid-area: value; font-family: var(--display); font-weight: 800; font-size: 1rem; color: var(--heading); min-width: 6.5rem; text-align: right; font-variant-numeric: tabular-nums; }
.v-condo { display: none; }
.explorer:has(#pt-condo:checked) .bar { width: calc(var(--condo) * 100%); }
.explorer:has(#pt-condo:checked) .v-house { display: none; }
.explorer:has(#pt-condo:checked) .v-condo { display: inline; }
.explorer.is-waiting .bar { width: 0; }
@media (min-width: 760px) {
  .explorer { padding: 20px 24px; }
  .explorer-head { grid-template-columns: 1fr auto; align-items: center; }
  .seg { min-width: 22rem; }
  .bars li { grid-template-columns: minmax(12rem, 16rem) 1fr 7.5rem; grid-template-areas: 'label track value'; }
}

#neighborhoods p { font-size: 0.92rem; color: var(--slate); max-width: 70ch; }
.hoods { list-style: none; display: flex; flex-wrap: wrap; gap: 8px; padding: 0; margin: 28px 0 20px; }
.hoods li { margin: 0; background: var(--fog); border: 1px solid var(--line); border-radius: 999px; padding: 6px 14px; font-size: 0.92rem; color: var(--ink); }
.hoods li a { color: var(--rust); font-weight: 600; }

/* Case study feature */
.feature { background: var(--white); border: 1px solid var(--line); border-left: 4px solid var(--rust); border-radius: 12px; padding: 28px; max-width: 820px; }
.feature h3 { font-size: clamp(1.3rem, 3vw, 1.6rem); }
.feature h3 a { color: var(--heading); text-decoration: none; }
.feature h3 a:hover { color: var(--rust); }

/* Reviews */
.quotes { display: grid; gap: 16px; grid-template-columns: repeat(auto-fill, minmax(min(100%, 300px), 1fr)); margin-bottom: 24px; }
.quote { margin: 0; background: var(--white); border: 1px solid var(--line); border-radius: 14px; padding: 24px; display: flex; flex-direction: column; justify-content: space-between; gap: 16px; }
.quote blockquote { margin: 0; }
.quote blockquote p { margin: 0; font-size: 1.08rem; line-height: 1.5; }
.quote blockquote p::before { content: '\201C'; color: var(--rust); font-family: var(--display); font-weight: 800; }
.quote blockquote p::after { content: '\201D'; color: var(--rust); font-family: var(--display); font-weight: 800; }
.quote figcaption { font-size: 0.85rem; font-weight: 600; color: var(--slate); }

/* FAQ */
.faq details { background: var(--white); border: 1px solid var(--line); border-radius: 12px; margin-bottom: 10px; }
.faq summary {
  display: flex; justify-content: space-between; gap: 16px; align-items: center;
  padding: 18px 20px; font-weight: 600; cursor: pointer; list-style: none; color: var(--heading);
}
.faq summary::-webkit-details-marker { display: none; }
.faq summary::after { content: '+'; font-family: var(--display); font-weight: 800; font-size: 1.4rem; color: var(--rust); line-height: 1; }
.faq details[open] summary::after { content: '\2212'; }
.faq details p { padding: 0 20px 18px; margin: 0; }

/* Where to start: three rows, the call is the one filled in rust. */
.start { list-style: none; padding: 0; margin: 8px 0 16px; display: grid; gap: 10px; }
.start li { margin: 0; }
.start-opt {
  display: grid; grid-template-columns: 8.5rem 1fr auto; align-items: center; gap: 12px;
  background: var(--white); border: 1px solid var(--line); border-radius: 14px;
  padding: 18px 20px; text-decoration: none; color: var(--ink);
  transition: border-color 0.15s ease;
}
.start-q { color: var(--slate); font-size: 0.95rem; }
.start-opt strong { font-family: var(--display); font-weight: 800; font-size: 1.15rem; color: var(--heading); }
.start-arrow { color: var(--rust); font-size: 1.3rem; line-height: 1; }
.start-opt:hover, .start-opt:focus { border-color: var(--rust); color: var(--ink); }
.start-opt.is-primary { background: var(--rust-2); border-color: var(--rust-2); color: #fff; }
.start-opt.is-primary .start-q { color: #fff; }
.start-opt.is-primary strong, .start-opt.is-primary .start-arrow { color: #fff; }
.start-opt.is-primary:hover, .start-opt.is-primary:focus { background: #8f2f1c; border-color: #8f2f1c; color: #fff; }
@media (max-width: 520px) {
  .start-opt { grid-template-columns: 1fr auto; row-gap: 2px; }
  .start-q { grid-column: 1 / -1; }
}

/* Big buttons */
.btn-lg { padding: 16px 28px; font-size: 1.05rem; min-height: 54px; }


/* Services: two tidy lists, no buttons. The lead magnets come next. */
.service-groups { display: grid; gap: 20px; }
.service-group { background: var(--white); border: 1px solid var(--line); border-radius: 14px; padding: 24px 24px 8px; }
.service-group h3 { font-size: 0.8rem; letter-spacing: 0.1em; text-transform: uppercase; color: var(--rust-2); margin-bottom: 8px; }
.services { list-style: none; padding: 0; margin: 0; }
.services li { margin: 0; padding: 14px 0; border-top: 1px solid var(--line); font-size: 0.98rem; }
.services li:first-child { border-top: 0; }
.services strong { display: block; font-family: var(--display); font-weight: 800; font-size: 1.1rem; color: var(--heading); margin-bottom: 2px; }
@media (min-width: 900px) { .service-groups { grid-template-columns: 1fr 1fr; } }

/* Lead magnets */
.magnets { display: grid; gap: 16px; grid-template-columns: repeat(auto-fit, minmax(min(100%, 320px), 1fr)); }
.magnet {
  display: flex; flex-direction: column; align-items: flex-start;
  background: var(--white); border: 1px solid var(--line); border-top: 4px solid var(--rust);
  border-radius: 14px; padding: 28px;
}
.magnet-for { margin: 0 0 6px; font-size: 0.78rem; font-weight: 700; letter-spacing: 0.1em; text-transform: uppercase; color: var(--slate); }
.magnet h3 { font-size: clamp(1.4rem, 3vw, 1.8rem); margin-bottom: 10px; }
.magnet p { flex: 1; }
.magnet-alt { margin: 20px 0 0; color: var(--slate); }

/* Book a call */
#book-a-call .btn-row { margin-top: 8px; }
#book-a-call figure.photo img { box-shadow: 0 20px 50px rgba(0, 0, 0, 0.35); }

/* Buyer and seller tracks */
.tracks { display: grid; gap: 20px; }
.track { background: var(--white); border: 1px solid var(--line); border-radius: 14px; padding: 28px 24px 12px; }
.track h3 { font-size: clamp(1.3rem, 3vw, 1.6rem); margin-bottom: 20px; }
.track .steps { margin-bottom: 8px; }
.track-note { font-size: 0.92rem; color: var(--slate); border-top: 1px solid var(--line); padding-top: 14px; }
@media (min-width: 900px) { .tracks { grid-template-columns: 1fr 1fr; } }

/* Review carousel. Scroll-snap does the work; site.js adds paging and pop-ups. */
.carousel-track {
  display: flex; gap: 16px; overflow-x: auto; scroll-snap-type: x mandatory;
  padding: 4px 2px 14px; scrollbar-width: thin; overscroll-behavior-x: contain;
}
.slide {
  flex: 0 0 86%; scroll-snap-align: start; margin: 0;
  display: flex; flex-direction: column; gap: 10px;
  background: var(--white); border: 1px solid var(--line); border-radius: 14px; padding: 20px;
}
@media (min-width: 700px) { .slide { flex-basis: calc((100% - 16px) / 2); } }
@media (min-width: 1000px) { .slide { flex-basis: calc((100% - 32px) / 3); } }
.stars { display: flex; gap: 2px; color: var(--rust); }
.stars svg { fill: currentColor; width: 16px; height: 16px; }
.slide blockquote { margin: 0; }
.slide blockquote p { margin: 0; font-size: 0.95rem; line-height: 1.55; }
.is-enhanced .slide blockquote p {
  display: -webkit-box; -webkit-box-orient: vertical; -webkit-line-clamp: 5; line-clamp: 5; overflow: hidden;
}
.read-more {
  align-self: flex-start; padding: 0; border: 0; background: none; cursor: pointer;
  color: var(--rust); font: inherit; font-size: 0.9rem; font-weight: 600;
  text-decoration: underline; text-underline-offset: 0.18em;
}
.read-more:not([hidden]) { display: inline-flex; align-items: center; min-height: 44px; margin: -10px 0; }
.read-more[hidden] { display: none; }
.slide figcaption { margin-top: auto; font-size: 0.82rem; font-weight: 600; color: var(--slate); }
.carousel-nav { display: flex; align-items: center; justify-content: center; gap: 16px; margin: 6px 0 20px; }
.carousel-nav[hidden] { display: none; }
.carousel-btn {
  width: 44px; height: 44px; border-radius: 50%; cursor: pointer;
  border: 1.5px solid var(--line); background: var(--white); color: var(--heading);
  font-size: 1.1rem; display: grid; place-items: center;
}
.carousel-btn:hover:not(:disabled), .carousel-btn:focus-visible { border-color: var(--rust); color: var(--rust); outline: none; }
.carousel-btn:disabled { opacity: 0.35; cursor: default; }
.carousel-count { min-width: 8rem; text-align: center; font-weight: 600; font-size: 0.9rem; color: var(--slate); font-variant-numeric: tabular-nums; }

/* Full review pop-up */
.review-dialog {
  width: min(560px, calc(100vw - 32px)); max-height: 85vh; overflow: auto;
  border: 0; border-radius: 16px; padding: 28px 24px 24px;
  background: var(--white); color: var(--ink); box-shadow: 0 30px 80px rgba(0, 0, 0, 0.35);
}
.review-dialog::backdrop { background: rgba(14, 31, 51, 0.6); }
.review-dialog blockquote { margin: 12px 0 16px; }
.review-dialog blockquote p { margin: 0; font-size: 1.02rem; line-height: 1.6; }
.review-dialog figcaption { font-size: 0.88rem; font-weight: 600; color: var(--slate); }
.dialog-close {
  position: absolute; top: 10px; right: 12px; width: 40px; height: 40px; border-radius: 50%;
  border: 0; background: var(--mist); color: var(--heading); font-size: 1.5rem; line-height: 1; cursor: pointer;
}
.dialog-close:focus-visible { outline: 2px solid var(--rust); outline-offset: 2px; }

/* FAQ groups */
.faq + .faq { margin-top: 28px; }
.faq h3 { font-size: 0.8rem; letter-spacing: 0.1em; text-transform: uppercase; color: var(--rust-2); margin-bottom: 12px; }

.home-meta { padding-top: 40px; padding-bottom: 64px; }
.home-meta .byline { margin-bottom: 0; }
.home-meta aside.contact { margin-top: 32px; max-width: none; }

[id] { scroll-margin-top: 76px; }
@media (min-width: 960px) { [id], .bars li, .card { scroll-margin-top: 110px; } }

@media (prefers-reduced-motion: reduce) {
  .start-opt, .menu summary::after, .jhf-links a { transition: none; }
  .start-opt:hover { transform: none; }
}



/* ------------------------------------------------------------------ *
 * Landing pages: /buyers, /sellers and their branded twins
 * ------------------------------------------------------------------ */
.sr-only { position: absolute; width: 1px; height: 1px; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; }

.lp-hero { min-height: clamp(520px, 80vh, 760px); }
.lp-hero .fp a { color: rgba(255, 255, 255, 0.7); }

.lp-lead { font-size: 1.2rem; font-weight: 600; color: var(--heading); max-width: var(--measure); }
.lp-note { font-size: 0.88rem; color: var(--slate); margin-top: 18px; max-width: 70ch; }

.lp-video { padding-top: 48px; padding-bottom: 24px; }
.lp-video-h { text-align: center; max-width: none !important; }
.video-native { margin: 0; }
.video-native video { display: block; width: 100%; height: auto; aspect-ratio: 16 / 9; border-radius: 14px; background: var(--navy); }
.video-native figcaption { text-align: center; color: var(--slate); font-size: 0.85rem; margin-top: 10px; }

.features { list-style: none; padding: 0; margin: 0; display: grid; gap: 16px; grid-template-columns: repeat(auto-fill, minmax(min(100%, 300px), 1fr)); }
.features li { margin: 0; background: var(--white); border: 1px solid var(--line); border-radius: 14px; padding: 24px; }
.feature-num {
  display: inline-grid; place-items: center; width: 34px; height: 34px; border-radius: 50%;
  background: var(--rust); color: #fff; font-family: var(--display); font-weight: 800; margin-bottom: 14px;
}
.features h3 { margin-bottom: 8px; }
.features p { margin: 0; font-size: 0.98rem; }

.perks { display: grid; gap: 14px; grid-template-columns: repeat(auto-fill, minmax(min(100%, 230px), 1fr)); }
.perk { background: var(--white); border: 1px solid var(--line); border-radius: 14px; padding: 22px; }
.perk h3 { font-size: 1.1rem; margin-bottom: 6px; }
.perk p { margin: 0; font-size: 0.95rem; }
.perk.is-featured { background: var(--navy); border-color: var(--navy); }
.perk.is-featured h3 { color: #fff; }
.perk.is-featured p { color: #c9d4de; }
.perk.is-featured .fp a { color: #c9d4de; }

.guarantees { display: grid; gap: 16px; margin-bottom: 28px; }
.guarantee { background: var(--navy-2); border: 1px solid rgba(255, 255, 255, 0.1); border-radius: 14px; padding: 26px; }
.guarantee h3 { color: #fff; font-size: 1.3rem; margin-bottom: 8px; }
.guarantee p { color: #c9d4de; margin: 0; }
@media (min-width: 768px) { .guarantees { grid-template-columns: 1fr 1fr; } }

table.compare { width: 100%; border-collapse: collapse; background: var(--white); border: 1px solid var(--line); border-radius: 14px; overflow: hidden; }
table.compare th, table.compare td { padding: 16px; text-align: left; vertical-align: top; border-bottom: 1px solid var(--line); font-size: 0.96rem; }
table.compare thead th { font-size: 0.78rem; letter-spacing: 0.08em; text-transform: uppercase; color: var(--slate); background: var(--mist); }
table.compare thead th.ours { background: var(--rust); color: #fff; }
table.compare tbody th { font-weight: 700; color: var(--heading); width: 22%; }
table.compare td { color: var(--slate); }
table.compare td.ours { color: var(--ink); font-weight: 600; background: rgba(200, 70, 48, 0.06); }
@media (max-width: 640px) {
  table.compare, table.compare tbody, table.compare tr, table.compare th, table.compare td { display: block; width: auto; }
  table.compare thead { position: absolute; width: 1px; height: 1px; overflow: hidden; clip: rect(0 0 0 0); }
  table.compare tr { border-bottom: 1px solid var(--line); padding: 12px 0; }
  table.compare tbody th { border: 0; padding: 4px 16px; width: auto; }
  table.compare td { border: 0; padding: 4px 16px; }
  table.compare td::before { display: block; font-size: 0.72rem; letter-spacing: 0.08em; text-transform: uppercase; font-weight: 700; color: var(--slate); }
  table.compare td:not(.ours)::before { content: 'Standard listing'; }
  table.compare td.ours::before { content: 'With me'; color: var(--rust); }
  table.compare td.ours { background: transparent; }
}

.lp-magnet .form-embed { background: var(--white); border: 1px solid var(--line); border-radius: 14px; padding: 8px; margin-top: 8px; }

.lp-final { border-top: 4px solid var(--rust); }
.lp-final .btn-row { margin-top: 8px; }



/* Seller neighborhood launch */
.event-steps { background: var(--white); border: 1px solid var(--line); border-top: 4px solid var(--rust); border-radius: 16px; padding: 28px 24px 20px; }
.event-steps h3 { margin-bottom: 20px; }

/* Source line for asterisked figures */
.fp a { text-decoration: none; color: var(--slate); font-size: 0.8em; vertical-align: super; line-height: 0; padding: 0 1px; }
.fp a:hover, .fp a:focus-visible { color: var(--rust); }
.source-note { font-size: 0.82rem; color: var(--slate); margin: 0 0 16px; }

/* Sellers launch timeline: steps start as outlines and light up in turn. */
.steps.is-timeline li::before {
  background: var(--white); color: var(--slate); box-shadow: inset 0 0 0 2px var(--line);
  transition: background-color 0.4s ease, color 0.4s ease, box-shadow 0.4s ease;
}
.steps.is-timeline li.is-lit::before { background: var(--rust); color: #fff; box-shadow: none; }
.steps.is-timeline li:not(:last-child)::after {
  content: ''; position: absolute; left: 17px; top: 38px; bottom: 2px; width: 2px; border-radius: 2px;
  background: linear-gradient(var(--rust), var(--rust)) top / 100% 0% no-repeat, var(--line);
  transition: background-size 0.7s ease 0.2s;
}
.steps.is-timeline li.is-lit:not(:last-child)::after { background-size: 100% 100%, auto; }
.steps.is-timeline li strong, .steps.is-timeline li { transition: color 0.4s ease; }
.steps.is-timeline li:not(.is-lit) { color: var(--slate); }
.steps.is-timeline li:not(.is-lit) strong { color: var(--slate); }

/* Gentle reveals, added by site.js only for content below the fold. */
.reveal { opacity: 0; transform: translateY(10px); transition: opacity 0.5s ease var(--delay, 0ms), transform 0.5s ease var(--delay, 0ms); }
.reveal.is-in { opacity: 1; transform: none; }
@media (min-width: 760px) { .reveal { transform: translateY(16px); } }
@media print { .reveal { opacity: 1; transform: none; } .explorer.is-waiting .bar { width: calc(var(--house) * 100%); } }

/* ------------------------------------------------------------------ *
 * Photos and interactive tools (mobile first)
 * ------------------------------------------------------------------ */

/* Listing gallery: swipe on phones, three across on desktop. */
.gallery {
  list-style: none; margin: 0; padding: 4px 2px 14px;
  display: grid; grid-auto-flow: column; grid-auto-columns: 82%; gap: 12px;
  overflow-x: auto; scroll-snap-type: x mandatory; overscroll-behavior-x: contain; scrollbar-width: thin;
}
.gallery li { margin: 0; scroll-snap-align: start; }
.gallery-item { position: relative; display: block; border-radius: 14px; overflow: hidden; background: var(--mist); }
.gallery-item img { display: block; width: 100%; height: auto; aspect-ratio: 3 / 2; object-fit: cover; transition: transform 0.4s ease; }
.gallery-cap {
  position: absolute; left: 0; right: 0; bottom: 0; padding: 28px 14px 12px;
  background: linear-gradient(to top, rgba(14, 31, 51, 0.8), rgba(14, 31, 51, 0));
  color: #fff; font-size: 0.88rem; font-weight: 600;
}
.gallery-item:hover img, .gallery-item:focus-visible img { transform: scale(1.04); }
.gallery-item:focus-visible { outline: 3px solid var(--rust); outline-offset: 2px; }
@media (min-width: 700px) { .gallery { grid-auto-columns: calc((100% - 12px) / 2); } }
@media (min-width: 1000px) { .gallery { grid-auto-columns: calc((100% - 24px) / 3); } }

/* Full-size photo viewer */
.lightbox {
  width: min(1100px, calc(100vw - 16px)); max-height: 92vh; padding: 0; border: 0; border-radius: 14px;
  background: #0b1624; color: #fff; overflow: hidden;
}
.lightbox::backdrop { background: rgba(8, 16, 26, 0.85); }
.lightbox figure { margin: 0; }
.lightbox img { display: block; width: 100%; max-height: 78vh; object-fit: contain; background: #0b1624; }
.lightbox figcaption { padding: 12px 64px 16px 16px; font-size: 0.9rem; color: #c9d4de; }
.lb-btn {
  position: absolute; top: 50%; transform: translateY(-50%);
  width: 48px; height: 48px; border-radius: 50%; border: 0; cursor: pointer;
  background: rgba(255, 255, 255, 0.9); color: var(--navy); font-size: 1.3rem;
}
.lb-prev { left: 10px; }
.lb-next { right: 10px; }
.lb-btn:focus-visible { outline: 3px solid var(--rust); outline-offset: 2px; }
.lightbox .dialog-close { position: absolute; top: 10px; right: 10px; background: rgba(255, 255, 255, 0.9); }

/* Client wall: one big photo, then a grid; a little scrapbook tilt on desktop. */
.client-wall { list-style: none; margin: 0 0 8px; padding: 0; display: grid; grid-template-columns: 1fr 1fr; gap: 10px; }
.client-wall li { margin: 0; }
.client-wall li:first-child { grid-column: span 2; }
.client-wall img { display: block; width: 100%; height: auto; aspect-ratio: 1; object-fit: cover; border-radius: 12px; }
@media (min-width: 900px) {
  .client-wall { grid-template-columns: repeat(5, 1fr); gap: 18px; padding: 10px 0 18px; }
  .client-wall li:first-child { grid-column: auto; }
  .client-wall li { background: #fff; padding: 8px 8px 24px; border-radius: 6px; box-shadow: 0 10px 28px rgba(14, 31, 51, 0.14); transition: transform 0.3s ease; }
  .client-wall img { border-radius: 3px; }
  .client-wall .cw-1 { transform: rotate(-2.5deg); }
  .client-wall .cw-2 { transform: rotate(1.5deg) translateY(12px); }
  .client-wall .cw-3 { transform: rotate(-1deg); }
  .client-wall .cw-4 { transform: rotate(2deg) translateY(10px); }
  .client-wall .cw-5 { transform: rotate(-1.5deg); }
  .client-wall li:hover { transform: rotate(0) scale(1.04); z-index: 1; }
}

/* Budget explorer */
.budget { background: var(--fog); border: 1px solid var(--line); border-radius: 16px; padding: 18px; display: grid; gap: 14px; }
.budget-control { display: grid; grid-template-columns: 1fr auto; align-items: baseline; gap: 4px 12px; }
.budget-control label { font-weight: 600; color: var(--heading); }
.budget-control output { font-family: var(--display); font-weight: 800; font-size: clamp(1.6rem, 6vw, 2.2rem); color: var(--rust-2); font-variant-numeric: tabular-nums; }
.budget-control input[type='range'] { grid-column: 1 / -1; width: 100%; height: 44px; margin: 0; accent-color: var(--rust); cursor: pointer; }
.budget-summary { margin: 0; font-weight: 600; color: var(--heading); min-height: 3em; }
.budget-list { list-style: none; margin: 0; padding: 0; }
.budget-list li {
  display: grid; grid-template-columns: 1fr auto; grid-template-areas: 'name name' 'price tag';
  gap: 4px 10px; align-items: center; margin: 0; padding: 12px 0; border-top: 1px solid var(--line);
}
.budget-list li:first-child { border-top: 0; }
.bl-name { grid-area: name; font-size: 0.85rem; color: var(--slate); }
.bl-name a { font-family: var(--display); font-weight: 800; font-size: 1rem; color: var(--rust-2); margin-right: 4px; }
.bl-price { grid-area: price; font-family: var(--display); font-weight: 800; color: var(--heading); font-variant-numeric: tabular-nums; }
.bl-tag { grid-area: tag; font-size: 0.78rem; font-weight: 700; padding: 4px 10px; border-radius: 999px; color: var(--slate); background: var(--mist); }
.bl-tag:empty { display: none; }
.budget-list li.fits .bl-tag { color: #fff; background: var(--rust-2); }
.budget.is-live .budget-list li:not(.fits) .bl-price { color: var(--slate); }
.v-house-b { display: none; }
.budget:has(#bt-house:checked) .v-condo-b { display: none; }
.budget:has(#bt-house:checked) .v-house-b { display: inline; }
.budget-foot { margin: 0; font-size: 0.82rem; color: var(--slate); }
@media (min-width: 760px) {
  .budget { padding: 24px; }
  .budget-list li { grid-template-columns: 1fr 8rem 7rem; grid-template-areas: 'name price tag'; }
  .bl-price { text-align: right; }
  .bl-tag { justify-self: end; }
}

/* Article photo and small print */
.article-photo { margin: 0 0 2rem; max-width: 900px; }
.article-photo img { display: block; width: 100%; height: auto; border-radius: 14px; }
.article-photo figcaption { margin-top: 8px; font-size: 0.85rem; color: var(--slate); }
.fp-statement { display: block; margin-top: 2px; }
.thin { display: block; font-family: var(--body); font-weight: 600; font-size: 0.72rem; color: var(--slate); }

@media (prefers-reduced-motion: reduce) {
  .gallery-item img, .client-wall li { transition: none; }
  .client-wall li:hover { transform: none; }
}

/* Shop links into the IDX (explorer and budget rows) */
.shop { grid-area: shop; display: flex; flex-wrap: wrap; align-items: center; gap: 6px; font-size: 0.8rem; font-weight: 600; color: var(--slate); }
.shop a {
  display: inline-flex; align-items: center; min-height: 44px; padding: 0 14px; border-radius: 999px;
  background: var(--white); border: 1px solid var(--line); color: var(--rust-2); font-size: 0.85rem; text-decoration: none;
}
.shop a::after { content: '\2192'; margin-left: 6px; }
.shop a:hover, .shop a:focus-visible { border-color: var(--rust); color: var(--rust); }
.bars li { grid-template-areas: 'label label' 'track value' 'shop shop'; }
.budget-list li { grid-template-areas: 'name name' 'price tag' 'shop shop'; }
@media (min-width: 760px) {
  .bars li { grid-template-areas: 'label track value' 'shop shop shop'; }
  .budget-list li { grid-template-areas: 'name price tag' 'shop shop shop'; }
}

/* Sellers market pulse */
.pulse { display: grid; gap: 14px; }
.zip-chips { display: flex; gap: 8px; margin: 0 -20px; padding: 2px 20px 6px; border: 0; overflow-x: auto; scroll-snap-type: x proximity; scrollbar-width: none; }
.zip-chips::-webkit-scrollbar { display: none; }
.zip-chips input { position: absolute; opacity: 0; width: 1px; height: 1px; }
.zip-chips label {
  flex: none; scroll-snap-align: start; display: grid; gap: 1px; min-width: 7.5rem; min-height: 56px; padding: 8px 14px;
  border: 1px solid var(--line); border-radius: 14px; background: var(--white); cursor: pointer; line-height: 1.2;
}
.zip-chips label strong { font-family: var(--display); font-weight: 800; font-size: 1.05rem; color: var(--heading); }
.zip-chips label span { font-size: 0.78rem; color: var(--slate); }
.zip-chips input:checked + label { background: var(--rust-2); border-color: var(--rust-2); }
.zip-chips input:checked + label strong, .zip-chips input:checked + label span { color: #fff; }
.zip-chips input:focus-visible + label { outline: 2px solid var(--rust); outline-offset: 2px; }
.pz-panel { display: none; }
.pz-name { margin: 0 0 10px; font-size: 0.88rem; color: var(--slate); }
.pz-name a { font-weight: 700; color: var(--rust-2); margin-right: 6px; }
.tiles { display: grid; grid-template-columns: 1fr 1fr; gap: 10px; margin: 0; }
.tiles div { background: var(--white); border: 1px solid var(--line); border-radius: 14px; padding: 14px; }
.tiles dt a { font-size: 0.8rem; font-weight: 600; color: var(--slate); text-decoration: none; }
.tiles dt a:hover { color: var(--rust); text-decoration: underline; }
.tiles dd { margin: 6px 0 0; }
.tiles .big { display: block; font-family: var(--display); font-weight: 800; font-size: clamp(1.3rem, 5vw, 1.8rem); color: var(--heading); line-height: 1.1; font-variant-numeric: tabular-nums; }
.tiles-condo { display: none; }
.pulse:has(#p2-condo:checked) .tiles-house { display: none; }
.pulse:has(#p2-condo:checked) .tiles-condo { display: grid; }
.chg { display: inline-block; margin-top: 8px; padding: 3px 9px; border-radius: 999px; font-size: 0.75rem; font-weight: 700; }
.chg-up { background: var(--green); color: var(--navy); }
.chg-down { background: var(--rust-2); color: #fff; }
.chg-flat { background: var(--mist); color: var(--slate); }
.pulse-foot { margin: 0; font-size: 0.82rem; color: var(--slate); }
@media (min-width: 760px) {
  .zip-chips { flex-wrap: wrap; margin: 0; padding: 0; overflow: visible; }
  .tiles { grid-template-columns: repeat(4, 1fr); gap: 14px; }
  .tiles div { padding: 18px; }
}

/* Sellers scroll story. Phones: stacked cards with their own photo.
   Desktop: steps scroll past a pinned photo that changes with them. */
.story-steps { list-style: none; margin: 0; padding: 0; display: grid; gap: 16px; }
.story-step { margin: 0; background: var(--white); border: 1px solid var(--line); border-radius: 16px; padding: 0 0 20px; overflow: hidden; }
.story-step > :not(img) { margin-left: 20px; margin-right: 20px; }
.story-inline { display: block; width: 100%; height: auto; aspect-ratio: 3 / 2; object-fit: cover; margin-bottom: 16px; }
.story-step h3 { margin-top: 10px; margin-bottom: 8px; }
.story-step p { margin-bottom: 0; }
.story-media { display: none; }
@media (min-width: 960px) {
  .story { display: grid; grid-template-columns: 1fr 1fr; gap: 56px; align-items: start; }
  .story-steps { gap: 0; }
  .story-step { background: none; border: 0; border-radius: 0; padding: 18vh 0; opacity: 0.35; transition: opacity 0.4s ease; }
  .story-step:first-child { padding-top: 6vh; }
  .story-step.is-active { opacity: 1; }
  .story-step > :not(img) { margin-left: 0; margin-right: 0; }
  .story-inline { display: none; }
  .story-step h3 { font-size: 1.6rem; }
  .story-media { display: block; position: sticky; top: 110px; }
  .story-frame { position: relative; aspect-ratio: 4 / 5; max-height: calc(100vh - 150px); border-radius: 18px; overflow: hidden; box-shadow: 0 24px 60px rgba(14, 31, 51, 0.2); background: var(--mist); }
  .story-shot { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; opacity: 0; transform: scale(1.04); transition: opacity 0.6s ease, transform 1.2s ease; }
  .story-shot.is-active { opacity: 1; transform: none; }
}

/* About page photo grid */
.photo-grid { list-style: none; margin: 0 0 2rem; padding: 0; display: grid; grid-template-columns: 1fr 1fr; gap: 10px; max-width: 900px; }
.photo-grid li { margin: 0; }
.photo-grid img { display: block; width: 100%; height: auto; aspect-ratio: 1; object-fit: cover; border-radius: 14px; }
@media (min-width: 760px) { .photo-grid { grid-template-columns: repeat(4, 1fr); gap: 14px; } }

@media (prefers-reduced-motion: reduce) {
  .story-step, .story-shot { transition: none; }
  .story-shot { transform: none; }
}

/* ------------------------------------------------------------------ *
 * Phone layout for buttons and shop links: side by side, never a tall stack.
 * ------------------------------------------------------------------ */
.shop { display: grid; gap: 6px; }
.shop-label { font-size: 0.78rem; font-weight: 600; color: var(--slate); }
.shop-links { display: flex; gap: 6px; }
.shop-links a { flex: 1 1 0; min-width: 0; justify-content: center; text-align: center; padding: 0 8px; font-size: 0.82rem; line-height: 1.15; }
@media (min-width: 760px) {
  .shop { display: flex; align-items: center; gap: 10px; }
  .shop-links a { flex: 0 0 auto; padding: 0 14px; }
}

@media (max-width: 759px) {
  .btn-row { display: grid; grid-template-columns: repeat(auto-fit, minmax(9rem, 1fr)); gap: 10px; }
  .btn-row .btn { width: 100%; min-height: 52px; padding: 10px 12px; font-size: 0.92rem; line-height: 1.2; text-align: center; white-space: normal; }
  .btn-lg { font-size: 0.95rem; }
}

/* Small phones: icon-only menu button so the header stays one row. */
@media (max-width: 419px) {
  .nav-toggle { width: 44px; padding: 0; justify-content: center; }
  .nav-toggle-text { position: absolute; width: 1px; height: 1px; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; }
  .hdr-cta { padding: 0 12px; font-size: 0.85rem; }
}
@media (max-width: 519px) { .bm-role { display: none; } }

/* Sellers zip picker: a big native select, so phones get their own picker UI. */
.pulse-controls { display: grid; gap: 12px; }
.pz-pick { display: grid; gap: 6px; }
.pz-pick > span { font-size: 0.85rem; font-weight: 700; color: var(--heading); }
.pz-pick select {
  width: 100%; min-height: 54px; padding: 0 44px 0 16px;
  font: inherit; font-family: var(--display); font-weight: 800; font-size: 1.05rem; color: var(--heading);
  background: var(--white) url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='14' height='9' viewBox='0 0 14 9'%3E%3Cpath d='M1 1l6 6 6-6' fill='none' stroke='%23a83822' stroke-width='2.2'/%3E%3C/svg%3E") no-repeat right 16px center;
  border: 1.5px solid var(--line); border-radius: 14px; appearance: none; -webkit-appearance: none; cursor: pointer;
}
.pz-pick select:focus-visible { outline: 2px solid var(--rust); outline-offset: 2px; border-color: var(--rust); }
.pz-other-note { margin: 0; padding: 18px; background: var(--white); border: 1px solid var(--line); border-left: 4px solid var(--rust); border-radius: 12px; font-weight: 600; color: var(--heading); }
@media (min-width: 760px) { .pulse-controls { grid-template-columns: 1fr auto; align-items: end; } .pulse-controls .seg { min-width: 22rem; } }

/* 404 */
main.not-found { max-width: 640px; padding-top: 64px; padding-bottom: 80px; }
.nf-lead { font-size: 1.1rem; color: var(--slate); }
.nf-links { list-style: none; padding: 0; display: grid; gap: 10px; }
.nf-links li { margin: 0; }
.nf-links a { display: flex; align-items: center; min-height: 52px; padding: 0 18px; background: var(--white); border: 1px solid var(--line); border-radius: 12px; font-weight: 600; color: var(--heading); text-decoration: none; }
.nf-links a:hover, .nf-links a:focus-visible { border-color: var(--rust); color: var(--rust-2); }

/* ---- Funnel pages: /net-number, /first-look, confirmations, prize ---- */
.funnel-top {
  padding: 32px 0 40px;
  background: linear-gradient(180deg, var(--white) 0%, var(--white) 55%, var(--fog) 100%);
  border-bottom: 1px solid var(--line);
}
.funnel-top h1 { font-size: clamp(2rem, 7vw, 3.1rem); margin-bottom: 14px; }
.funnel-top h2 { border-top: 0; padding-top: 0; margin-top: 0; }
.funnel-lead { font-size: 1.08rem; color: var(--ink); max-width: var(--measure); margin: 0 0 22px; }
.funnel-check { margin: 0 0 14px; line-height: 0; }
/* GHL draws its own card inside the iframe, so the wrapper adds no frame of
   its own (a card inside a card). Style the form itself in GHL's builder. */
.funnel-form { margin: 0 -4px; }
.funnel-form-h { font-size: 1.3rem; margin: 0 4px 4px; }
.funnel-form-intro { margin: 0 4px 12px; color: var(--slate); font-size: 0.95rem; }
.funnel-form iframe { display: block; }
.funnel-note { margin: 14px 0 0; font-size: 0.92rem; color: var(--slate); }
.funnel-top .btn-row { margin-top: 22px; }
.is-confirm .funnel-top { padding-top: 28px; }
.lp-list { margin: 8px 0 18px; padding-left: 1.2em; max-width: var(--measure); }
.lp-list li { margin: 0 0 8px; }
.lp-list li::marker { color: var(--navy); }
@media (min-width: 760px) {
  .funnel-top { padding: 56px 0 64px; }
}