/* House Buyer Dan — styles for sections the preview build did not include:
   the mobile nav drawer, breadcrumbs, county/city pages, blog, FAQ, projects.

   Every value below is expressed in the preview's own custom properties
   (--paper, --barn, --spruce, --gold, --ink, --line, --radius, --shadow-card,
   --font-display, --font-body). Nothing here introduces a new colour or
   typeface, so generated pages sit inside the approved design rather than
   beside it. */

/* ---------- mobile nav drawer (not in the preview; see site.mjs MOBILE_NAV) ---------- */
.nav-toggle {
  display: none;
  width: 44px;
  height: 44px;
  padding: 0;
  border: 2px solid var(--ink);
  border-radius: var(--radius);
  background: #fff;
  cursor: pointer;
  align-items: center;
  justify-content: center;
}
.nav-toggle-bars,
.nav-toggle-bars::before,
.nav-toggle-bars::after {
  display: block;
  width: 20px;
  height: 2px;
  background: var(--ink);
  border-radius: 2px;
  content: '';
  position: relative;
}
.nav-toggle-bars::before { position: absolute; top: -6px; }
.nav-toggle-bars::after  { position: absolute; top: 6px; }

@media (max-width: 920px) {
  .nav-toggle { display: inline-flex; }
}

.nav-drawer {
  position: fixed;
  inset: 0;
  z-index: 90;
  background: rgba(36, 50, 64, 0.55);
  display: flex;
  justify-content: flex-end;
}
.nav-drawer[hidden] { display: none; }
.nav-drawer-panel {
  background: var(--paper);
  width: min(340px, 86vw);
  height: 100%;
  overflow-y: auto;
  padding: 1.2rem 1.3rem 6rem;
  box-shadow: var(--shadow-lift);
  display: flex;
  flex-direction: column;
  gap: 0.35rem;
}
.nav-drawer-close {
  align-self: flex-end;
  font-size: 2rem;
  line-height: 1;
  background: none;
  border: 0;
  color: var(--ink);
  cursor: pointer;
  padding: 0.2rem 0.5rem;
}
.nav-drawer nav { display: grid; gap: 0.1rem; margin-bottom: 1rem; }
.nav-drawer nav a {
  display: block;
  padding: 0.75rem 0.4rem;
  color: var(--ink);
  text-decoration: none;
  font-weight: 600;
  border-bottom: 1px solid var(--line);
}
.nav-drawer nav a:hover { color: var(--barn); }
.nav-drawer-phone { text-align: center; color: var(--ink-soft); margin: 0.8rem 0 0; }
.btn-block { display: flex; width: 100%; }

/* ---------- breadcrumbs ---------- */
.crumbs {
  font-size: 0.86rem;
  color: var(--ink-soft);
  padding-top: 1.4rem;
}
.crumbs a { color: var(--ink-soft); }
.crumbs a:hover { color: var(--barn); }
.crumb-sep { padding: 0 0.5em; opacity: 0.55; }

/* ---------- shared layout helpers ---------- */
.wrap.narrow { max-width: 820px; }
.cta-or { color: var(--ink-soft); margin-top: 0.9rem; }
.section-tight { padding-block: clamp(2rem, 5vw, 3rem); }

.grid-cards {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(260px, 1fr));
  gap: 1.1rem;
  margin-top: 1.8rem;
}
.grid-cards .card { padding: 1.3rem; }
.grid-cards .card h3 { margin-bottom: 0.35rem; font-size: 1.15rem; }
.grid-cards .card p { margin: 0; color: var(--ink-soft); font-size: 0.95rem; }
.grid-cards a.card { text-decoration: none; color: inherit; display: block; transition: transform .12s ease, box-shadow .12s ease; }
.grid-cards a.card:hover { transform: translateY(-2px); box-shadow: var(--shadow-lift); }
.grid-cards a.card h3 { color: var(--barn); }

/* ---------- location pages ---------- */
.loc-hero { padding-block: clamp(2.2rem, 5vw, 3.4rem) 0; }
.loc-hero h1 { margin-bottom: 0.4rem; }
.loc-meta {
  display: flex;
  flex-wrap: wrap;
  gap: 0.5rem 1.4rem;
  margin: 1.2rem 0 0;
  padding: 0;
  list-style: none;
  font-size: 0.92rem;
  color: var(--ink-soft);
}
.loc-meta strong { color: var(--ink); }

.town-list {
  list-style: none;
  padding: 0;
  margin: 1rem 0 0;
  display: flex;
  flex-wrap: wrap;
  gap: 0.45rem;
}
.town-list li {
  background: var(--paper-deep);
  border: 1px solid var(--line);
  border-radius: 999px;
  padding: 0.35em 0.85em;
  font-size: 0.9rem;
}
.town-list li a { text-decoration: none; color: var(--barn); font-weight: 600; }

.region-group { margin-top: 2.4rem; }
.region-group > h2 {
  font-size: 1.4rem;
  border-bottom: 2px solid var(--line);
  padding-bottom: 0.4rem;
}
.county-links {
  list-style: none;
  padding: 0;
  margin: 1rem 0 0;
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(220px, 1fr));
  gap: 0.55rem 1.2rem;
}
.county-links a { text-decoration: none; font-weight: 600; }
.county-links span { display: block; font-size: 0.84rem; color: var(--ink-soft); font-weight: 400; }

/* ---------- prose (blog posts, long-form sections) ---------- */
.prose { max-width: 68ch; }
.prose h2 { margin-top: 2.4rem; }
.prose h3 { margin-top: 1.8rem; font-size: 1.2rem; }
.prose p, .prose li { color: var(--ink); }
.prose ul, .prose ol { padding-left: 1.3rem; display: grid; gap: 0.45rem; }
.prose blockquote {
  margin: 1.8rem 0;
  padding: 1rem 1.3rem;
  border-left: 4px solid var(--gold);
  background: var(--paper-deep);
  border-radius: 0 var(--radius) var(--radius) 0;
}
.prose blockquote p { margin: 0; }
.callout {
  border-left: 4px solid var(--spruce);
  background: #fffdf8;
  border-radius: 0 var(--radius) var(--radius) 0;
  padding: 1.1rem 1.3rem;
  margin: 1.8rem 0;
}
.callout p:last-child { margin-bottom: 0; }

/* ---------- blog index ---------- */
.post-meta { font-size: 0.85rem; color: var(--ink-soft); margin: 0 0 0.5rem; }
.post-card-date { font-size: 0.8rem; color: var(--ink-soft); letter-spacing: .04em; text-transform: uppercase; font-weight: 700; }

/* ---------- FAQ ---------- */
.faq-list { margin-top: 1.6rem; display: grid; gap: 0.6rem; }
.faq-item {
  background: #fffdf8;
  border: 1px solid var(--line);
  border-radius: var(--radius);
  box-shadow: var(--shadow-card);
  padding: 0.2rem 1.1rem;
}
.faq-item summary {
  cursor: pointer;
  font-weight: 700;
  padding: 0.9rem 0;
  list-style: none;
  display: flex;
  justify-content: space-between;
  gap: 1rem;
  align-items: flex-start;
}
.faq-item summary::-webkit-details-marker { display: none; }
.faq-item summary::after {
  content: '+';
  font-family: var(--font-display);
  font-size: 1.5rem;
  line-height: 1;
  color: var(--barn);
  flex: none;
}
.faq-item[open] summary::after { content: '–'; }
.faq-answer { padding-bottom: 1rem; color: var(--ink-soft); }
.faq-answer p:first-child { margin-top: 0; }
.faq-answer a { font-weight: 600; }

/* ---------- projects (scaffolded; see content/projects.mjs) ---------- */
.proj-gallery {
  display: grid;
  /* auto-FIT, not auto-fill — with three images in a 1170px wrap, auto-fill
     reserves five tracks and leaves the row two-thirds empty. */
  grid-template-columns: repeat(auto-fit, minmax(260px, 1fr));
  gap: 1rem;
  margin: 1.6rem 0;
}
.proj-gallery figure { margin: 0; }
.proj-gallery img {
  width: 100%;
  height: 240px;
  object-fit: cover;
  border-radius: var(--radius);
  border: 1px solid var(--line);
}
.proj-gallery figcaption { font-size: 0.82rem; color: var(--ink-soft); margin-top: 0.35rem; }
.ba-tag {
  display: inline-block;
  font-size: 0.7rem;
  font-weight: 700;
  letter-spacing: .1em;
  text-transform: uppercase;
  padding: 0.2em 0.6em;
  border-radius: 999px;
  margin-bottom: 0.4rem;
}
.ba-before { background: var(--paper-deep); color: var(--ink-soft); border: 1px solid var(--line); }
.ba-after  { background: var(--spruce); color: #fff; }

/* ---------- empty-state (projects before real photos arrive) ---------- */
.empty-state {
  text-align: center;
  padding: clamp(2rem, 6vw, 4rem) 1rem;
  border: 2px dashed var(--line);
  border-radius: var(--radius);
  color: var(--ink-soft);
}

@media (max-width: 700px) {
  .county-links { grid-template-columns: 1fr; }
}

/* ---------- homepage "where we buy" band ----------
   The band is dark navy over a map photo with white text. Base.css colours all
   links --barn (red), which fails contrast badly on that background, so links
   added inside the band are re-styled here. */
.where-band a { color: #fff; text-decoration: underline; text-decoration-color: rgba(255,255,255,.45); text-underline-offset: 3px; }
.where-band a:hover { text-decoration-color: #fff; }
.where-band .where-regions li a { font-weight: 600; }

/* ---------- header dropdowns ----------
   Base.css lays .site-nav out as a flex row of <a>. A .nav-group wraps a parent
   link plus its menu, so it has to behave like one of those <a> children. */
.nav-group { position: relative; display: inline-flex; align-items: center; }
.nav-caret { font-size: .7em; margin-left: .3em; opacity: .7; }
.nav-menu {
  position: absolute;
  top: 100%;
  left: 50%;
  transform: translateX(-50%) translateY(6px);
  min-width: 230px;
  background: #fffdf8;
  border: 1px solid var(--line);
  border-radius: var(--radius);
  box-shadow: var(--shadow-lift);
  padding: .45rem;
  display: grid;
  gap: .1rem;
  opacity: 0;
  visibility: hidden;
  pointer-events: none;
  transition: opacity .12s ease, transform .12s ease;
  z-index: 60;
}
.nav-group:hover .nav-menu,
.nav-group:focus-within .nav-menu {
  opacity: 1;
  visibility: visible;
  pointer-events: auto;
  transform: translateX(-50%) translateY(0);
}
/* Bridges the gap between the header row and the panel so the pointer can
   travel into the menu without it closing. */
.nav-group::after { content: ''; position: absolute; top: 100%; left: 0; right: 0; height: 10px; }
.nav-menu a {
  display: block;
  padding: .55rem .7rem;
  border-radius: 6px;
  color: var(--ink);
  text-decoration: none;
  font-size: .92rem;
  font-weight: 600;
  white-space: nowrap;
}
.nav-menu a:hover { background: var(--paper-deep); color: var(--barn); }

/* ---------- the CTA card that replaced the inline form on interior pages ---------- */
.cta-card-sub { color: var(--ink-soft); margin: 0 0 1.1rem; font-size: .96rem; }
.cta-card-note { color: var(--ink-soft); font-size: .9rem; margin: .9rem 0 0; }
.cta-card .btn { width: 100%; }

/* ---------- homepage address bar ---------- */
.offer-bar { display: grid; gap: .55rem; }
.offer-bar-head { font-weight: 700; margin: 0; }
.offer-bar .field {
  width: 100%;
  font: inherit;
  padding: .8em .9em;
  border: 2px solid var(--ink);
  border-radius: var(--radius);
  background: #fff;
  color: var(--ink);
}
.offer-bar .field::placeholder { color: #9b9486; }
.offer-bar-note { font-size: .86rem; color: var(--ink-soft); margin: .1rem 0 0; text-align: center; }
.offer-bar .field.shake { animation: hbd-shake .35s; border-color: var(--barn); }
@keyframes hbd-shake {
  0%,100% { transform: translateX(0); }
  25% { transform: translateX(-5px); }
  75% { transform: translateX(5px); }
}

/* ---------- the offer popup ---------- */
.offer-overlay {
  position: fixed;
  inset: 0;
  z-index: 120;
  background: rgba(36, 50, 64, .62);
  display: flex;
  align-items: flex-start;
  justify-content: center;
  padding: clamp(.6rem, 4vh, 3rem) 1rem;
  overflow-y: auto;
}
.offer-overlay[hidden] { display: none; }
.offer-modal {
  position: relative;
  background: var(--paper);
  border: 1px solid var(--line);
  border-radius: var(--radius);
  box-shadow: var(--shadow-lift);
  width: min(560px, 100%);
  padding: 1.6rem clamp(1.1rem, 4vw, 2rem) 1.8rem;
  margin: auto;
}
.offer-modal-close {
  position: absolute;
  top: .5rem;
  right: .7rem;
  font-size: 2rem;
  line-height: 1;
  background: none;
  border: 0;
  color: var(--ink-soft);
  cursor: pointer;
  padding: .1rem .4rem;
}
.offer-modal-close:hover { color: var(--barn); }
.offer-modal-badge { display: block; margin: 0 auto .6rem; }
.offer-modal h2 { text-align: center; font-size: clamp(1.35rem, 3.4vw, 1.7rem); margin: 0 0 .4rem; }
.offer-modal-sub { text-align: center; color: var(--ink-soft); margin: 0 0 1.3rem; font-size: .96rem; }
.offer-fields { display: grid; gap: .15rem; }
.offer-fg { display: grid; gap: .25rem; margin-bottom: .7rem; }
.offer-fg label { font-weight: 700; font-size: .88rem; }
.offer-fg .optional { font-weight: 400; color: var(--ink-soft); }
.offer-fg-row { display: grid; grid-template-columns: 1fr 1fr; gap: .8rem; }
.offer-modal .field {
  width: 100%;
  font: inherit;
  padding: .7em .8em;
  border: 2px solid var(--ink);
  border-radius: var(--radius);
  background: #fff;
  color: var(--ink);
}
.offer-modal .field:focus-visible { border-color: var(--barn); outline-offset: 0; }
.offer-hp { position: absolute; left: -9999px; width: 1px; height: 1px; overflow: hidden; }
.offer-error {
  background: #fdecec;
  border: 1px solid var(--barn);
  color: var(--barn-deep);
  border-radius: var(--radius);
  padding: .6rem .8rem;
  font-size: .9rem;
  margin: .3rem 0 .8rem;
  font-weight: 600;
}
.offer-error[hidden] { display: none; }
.offer-secure { text-align: center; font-size: .84rem; color: var(--ink-soft); margin: .8rem 0 0; }
.offer-tick {
  width: 62px; height: 62px;
  margin: .4rem auto 1rem;
  border-radius: 50%;
  background: var(--spruce);
  color: #fff;
  display: grid;
  place-items: center;
  font-size: 2rem;
  font-weight: 700;
}
#offer-step-done { text-align: center; }
#offer-step-done .btn { margin-top: .6rem; }

@media (max-width: 520px) {
  .offer-fg-row { grid-template-columns: 1fr; gap: 0; }
}

/* ---------- major cities on a county page ---------- */
.major-city-list {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(300px, 1fr));
  gap: 1.4rem 2rem;
  margin: 1.8rem 0 0;
}
.major-city h3 { font-size: 1.12rem; margin-bottom: .3rem; }
.major-city h3 a { text-decoration: none; }
.major-city p { margin: 0; color: var(--ink-soft); font-size: .95rem; }
.major-city-list + p { margin-top: 1.6rem; }
.town-list-head {
  margin-top: 2.4rem;
  font-size: .78rem;
  letter-spacing: .13em;
  text-transform: uppercase;
  color: var(--ink-soft);
  font-family: var(--font-body);
  font-weight: 700;
}

/* ---------- FAQ hub ---------- */
.faq-index-head {
  font-size: .78rem;
  letter-spacing: .13em;
  text-transform: uppercase;
  color: var(--ink-soft);
  font-family: var(--font-body);
  font-weight: 700;
  margin-bottom: .8rem;
}
.faq-index {
  list-style: none;
  padding: 0;
  margin: 0;
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(230px, 1fr));
  gap: .4rem 1.4rem;
}
.faq-index a { text-decoration: none; font-weight: 600; font-size: .95rem; }
.faq-index a span { color: var(--ink-soft); font-weight: 400; }
.faq-source { margin: -.4rem 0 0; font-size: .92rem; }
.faq-source a { font-weight: 600; }
/* Offset anchor targets so a jump-link doesn't hide the heading under the
   sticky header. */
.faq-index + * , section[id^="county-"], section[id^="situation-"], #general { scroll-margin-top: 90px; }

/* ---------- county → city grouping on the locations hub and FAQ index ---------- */
.county-block { margin-top: 1.6rem; }
.county-block h3 { font-size: 1.05rem; margin-bottom: .15rem; }
.county-block h3 a { text-decoration: none; }
.county-seat { margin: 0; font-size: .84rem; color: var(--ink-soft); }
.county-block .town-list { margin-top: .6rem; }

/* ---------- local resources ---------- */
.resource-grid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(280px, 1fr));
  gap: 1.3rem 2rem;
  margin: 1.8rem 0 0;
}
.resource h3 { font-size: 1.05rem; margin-bottom: .2rem; }
.resource-where {
  margin: 0 0 .35rem;
  font-size: .8rem;
  letter-spacing: .08em;
  text-transform: uppercase;
  color: var(--barn);
  font-weight: 700;
}
.resource p { margin: 0; color: var(--ink-soft); font-size: .94rem; }
.resource-statewide {
  margin-top: 2.4rem;
  padding: 1.4rem 1.6rem;
  background: #fffdf8;
  border: 1px solid var(--line);
  border-left: 4px solid var(--spruce);
  border-radius: 0 var(--radius) var(--radius) 0;
}
.resource-statewide h3 { font-size: 1.1rem; }
.resource-statewide .checks li { font-size: .94rem; }
.resource-note { font-size: .85rem; color: var(--ink-soft); margin-top: 1rem; }
.faq-cat-icon { margin-right: .45em; }
.buys-list { max-width: 62ch; }
/* Category emoji sit in a display-font heading, so they inherit a very large
   size. Rein them in relative to the text they label. */
h2 .faq-cat-icon { font-size: .62em; vertical-align: .12em; }
.faq-index .faq-cat-icon { font-size: .95em; }

/* ---------- long-form blog article furniture ---------- */
.post-toc {
  background: var(--paper-deep);
  border: 1px solid var(--line);
  border-radius: var(--radius);
  padding: 1.1rem 1.4rem;
  margin: 0 0 2.4rem;
}
.post-toc-head {
  margin: 0 0 .6rem;
  font-size: .78rem;
  letter-spacing: .13em;
  text-transform: uppercase;
  color: var(--ink-soft);
  font-family: var(--font-body);
  font-weight: 700;
}
.post-toc ol { margin: 0; padding-left: 1.2rem; display: grid; gap: .35rem; }
.post-toc a { text-decoration: none; font-weight: 600; }
.post-toc a:hover { text-decoration: underline; }
.prose h2 { scroll-margin-top: 90px; }

.prose table {
  width: 100%;
  border-collapse: collapse;
  margin: 1.8rem 0;
  font-size: .95rem;
}
.prose table th,
.prose table td {
  border: 1px solid var(--line);
  padding: .65rem .8rem;
  text-align: left;
  vertical-align: top;
}
.prose table th { background: var(--paper-deep); font-weight: 700; }
.prose table caption {
  caption-side: bottom;
  font-size: .85rem;
  color: var(--ink-soft);
  padding-top: .6rem;
  text-align: left;
}
.table-scroll { overflow-x: auto; }

.post-aside {
  margin-top: 2.4rem;
  padding: 1.2rem 1.4rem;
  background: #fffdf8;
  border: 1px solid var(--line);
  border-left: 4px solid var(--gold);
  border-radius: 0 var(--radius) var(--radius) 0;
}
.post-aside h3 { font-size: 1.05rem; margin-bottom: .5rem; }
.post-aside p { margin: .8rem 0 0; font-size: .92rem; }
.town-list-plain { list-style: none; padding: 0; margin: 0; display: grid; gap: .4rem; }
.town-list-plain a { font-weight: 600; }
.prose .faq-list { margin-top: 1.4rem; }

/* Localised hero lede added under the H1 (Matt, 2026-07-30). Sits on the dark
   hero band, so it needs the light treatment the surrounding copy uses. */
.hero-local {
  color: #c4cdd6;
  max-width: 52ch;
  margin: 0 0 1.2rem;
  font-size: 1.02rem;
}

/* ---------- homepage home-market section (Matt, 2026-07-31) ---------- */
.home-market .market-cols {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 2rem 3rem;
  margin-top: 2rem;
}
.home-market .market-cols h3 { font-size: 1.25rem; margin-bottom: .5rem; }
.home-market .market-cols p { color: var(--ink-soft); margin: 0; }
.home-market .market-cols .town-list { margin-top: 1rem; }
/* Shared by the homepage market block and the location pages, which reuse the
   same component — do NOT re-scope this to .home-market, the city pages need
   the separator too. */
.market-statewide {
  margin-top: 2rem;
  padding-top: 1.6rem;
  border-top: 1px dashed var(--line);
  font-size: 1.02rem;
}
@media (max-width: 760px) {
  .home-market .market-cols { grid-template-columns: 1fr; }
}

/* Base.css sets `.checks li { display:flex }`, which is right for short single
   items but breaks any item shaped "<strong>Lead-in.</strong> then prose" — the
   strong becomes its own flex column and the text ragged-wraps beside it.
   These lists carry prose, so they get block layout with the tick positioned
   absolutely instead. */
.resource-statewide .checks li,
.prose .checks li {
  display: block;
  position: relative;
  padding-left: 1.6em;
  font-weight: 400;
}
.resource-statewide .checks li::before,
.prose .checks li::before {
  position: absolute;
  left: 0;
  top: 0;
}
.resource-statewide .checks li strong,
.prose .checks li strong { font-weight: 700; }

/* ---------- opt-in forms on location pages (Matt, 2026-07-31) ---------- */

/* Location hero: copy left, opt-in form right — same proportions and breakpoint
   as the homepage hero (1.15fr / .85fr, collapsing at 920px) so the two read as
   the same layout rather than two near-misses. */
.loc-hero-grid {
  display: grid;
  grid-template-columns: 1.15fr .85fr;
  gap: clamp(1.6rem, 4vw, 3.5rem);
  align-items: start;
}
.loc-hero-copy .loc-meta { margin-bottom: 0; }
.loc-hero-form {
  padding: 1.3rem 1.4rem;
  box-shadow: var(--shadow-lift);
  margin: 0;
}
@media (max-width: 920px) {
  .loc-hero-grid { grid-template-columns: 1fr; }
}

/* Dark mid-page offer band — also the section break that stops the page
   reading as one long cream column. */
.offer-band-grid {
  display: grid;
  grid-template-columns: 1.05fr .95fr;
  gap: clamp(1.6rem, 4vw, 3.2rem);
  align-items: center;
}
.offer-band h2 { color: #fff; }
.offer-band .lede { color: #c4cdd6; }
.offer-band .kicker-light { color: var(--gold); }
.offer-band-call { color: #c4cdd6; margin: 1.1rem 0 0; font-size: .95rem; }
.offer-band-call a { color: #fff; text-decoration-color: rgba(255,255,255,.45); }
.offer-band-card { padding: 1.3rem 1.4rem; }

/* The band sits on --night; keep the card itself light so the form reads the
   same as it does on the homepage. */
.offer-band .card { background: #fffdf8; color: var(--ink); }
.offer-band .card .offer-bar-note { color: var(--ink-soft); }

@media (max-width: 820px) {
  .offer-band-grid { grid-template-columns: 1fr; }
  .loc-hero-form { max-width: none; }
}

/* ---------- badge on the opt-in form (matches the homepage hero form) ----------
   The homepage's .hero-badge / .hero-form:before rules are scoped to its Astro
   cid so they cannot be reused, but the geometry is copied exactly: the badge
   is positioned against the CARD (not the inner bar) at top:-2.6rem, the card
   carries a matching margin-top, and the heading clears it with a 2.4rem top
   margin. Anchoring the badge to the bar instead puts it ~1.3rem lower — enough
   to sit on top of the heading. */
.loc-hero-form,
.offer-band-card {
  position: relative;
  margin-top: 2.6rem;
  overflow: visible;
}
.loc-hero-form::before,
.offer-band-card::before {
  content: "";
  position: absolute;
  top: calc(-2.6rem - 7px);
  left: 50%;
  translate: -50% 0;
  width: 108px;
  height: 108px;
  border-radius: 50%;
  background: #fffdf8;
}
.hbd-form-badge {
  position: absolute;
  top: -2.6rem;
  left: 50%;
  translate: -50% 0;
  filter: drop-shadow(0 4px 10px rgba(42, 58, 73, .3));
  z-index: 1;
}
.loc-hero-form .offer-bar-head-badged,
.offer-band-card .offer-bar-head-badged {
  font-family: var(--font-display);
  font-weight: 650;
  font-size: 1.25rem;
  margin: 2.4rem 0 .5rem;
  text-align: center;
  line-height: 1.15;
}

/* ---------- situation pages (rebuilt 2026-07-31) ---------- */
.sit-stats {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(140px, 1fr));
  gap: 1rem 1.6rem;
  margin: 1.6rem 0 0;
  padding-top: 1.4rem;
  border-top: 1px solid var(--line);
}
.sit-stats strong {
  display: block;
  font-family: var(--font-display);
  font-size: 1.5rem;
  line-height: 1.1;
  color: var(--barn);
}
.sit-stats span { font-size: .88rem; color: var(--ink-soft); }

.quick-answer {
  background: #fffdf8;
  border: 1px solid var(--line);
  border-left: 4px solid var(--gold);
  border-radius: 0 var(--radius) var(--radius) 0;
  padding: 1.2rem 1.4rem;
}
.quick-answer-label {
  margin: 0 0 .4rem;
  font-size: .74rem;
  letter-spacing: .14em;
  text-transform: uppercase;
  font-weight: 700;
  color: var(--barn);
}
.quick-answer p:last-child { margin: 0; font-size: 1.05rem; }

.sit-steps {
  list-style: none;
  counter-reset: sitstep;
  padding: 0;
  margin: 1.8rem 0 0;
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(260px, 1fr));
  gap: 1.4rem 1.8rem;
}
.sit-steps li {
  counter-increment: sitstep;
  position: relative;
  padding-left: 3rem;
}
.sit-steps li::before {
  content: counter(sitstep);
  position: absolute;
  left: 0;
  top: -.15rem;
  display: inline-grid;
  place-items: center;
  width: 2.1rem;
  height: 2.1rem;
  border-radius: 50%;
  background: var(--barn);
  color: #fff;
  font-family: var(--font-display);
  font-weight: 700;
  box-shadow: 0 2px 0 var(--barn-deep);
}
.sit-steps h3 { font-size: 1.08rem; margin-bottom: .3rem; }
.sit-steps p { margin: 0; color: var(--ink-soft); font-size: .95rem; }

/* Dark prose sections need their type inverted. */
.section-night.section .prose p,
.section-night.section .prose li { color: #c4cdd6; }
.section-night.section .prose h2,
.section-night.section .prose h3 { color: #fff; }
.section-night.section .prose a { color: #fff; text-decoration-color: rgba(255,255,255,.45); }
.section-night .kicker { color: var(--gold); }
.section-night .callout {
  background: rgba(255,255,255,.06);
  border-left-color: var(--gold);
}
.section-night .callout p { color: #e7ecf1; }

/* ---------- projects ---------- */
.ph-banner {
  background: #fffdf8;
  border: 1px solid var(--line);
  border-left: 4px solid var(--gold);
  border-radius: 0 var(--radius) var(--radius) 0;
  padding: 1rem 1.3rem;
  font-size: .95rem;
  color: var(--ink-soft);
}
.ph-banner strong { color: var(--ink); }
.proj-grid { grid-template-columns: repeat(auto-fill, minmax(300px, 1fr)); }
.proj-card { padding: 0 !important; overflow: hidden; }
.proj-card img { width: 100%; height: 190px; object-fit: cover; display: block; border-bottom: 1px solid var(--line); }
.proj-card-body { padding: 1.1rem 1.3rem 1.3rem; }
.scope-list { max-width: 70ch; }

/* ---------- page rhythm ----------
   The palette shipped with two backgrounds that are both cream (--paper
   #faf6ee and --paper-deep #f2ecdf). On a short page that reads as a subtle
   alternation; on a 2,400-word location page it reads as one continuous beige
   column, which is exactly the feedback we got. These two add genuine contrast
   without leaving the brand: a clean white, and a light spruce wash drawn from
   the existing --spruce. Long generated pages cycle
   paper → white → paper-deep → spruce → night so no two adjacent bands share
   a background. */
.section-white { background: #fff; border-block: 1px solid var(--line); }
.section-spruce {
  background: #eef3ef;
  border-block: 1px solid #d5e0d8;
}
.section-spruce .kicker { color: var(--spruce); }
.section-spruce .prose h2,
.section-spruce h2 { color: #23412f; }

/* Rule above an h2 inside a toned band — gives the eye a start line on a long
   page without adding another background change. */
.section-white .prose > h2:first-child,
.section-spruce .prose > h2:first-child { padding-top: .2rem; }

/* Location hero stat strip — same component as the situation pages, so the two
   page types read as one family rather than two designs. */
.loc-hero .sit-stats { margin-top: 1.6rem; }

/* ---------- metro local-resource cards (situations + blog posts) ---------- */
.res-grid { grid-template-columns: repeat(auto-fit, minmax(260px, 1fr)); }
.res-card .res-where {
  font-size: .82rem;
  letter-spacing: .06em;
  text-transform: uppercase;
  color: var(--ink-soft);
  margin: -.3rem 0 .6rem;
}
.res-card .res-links { font-size: .9rem; margin-top: .8rem; }
.res-note { margin-top: 1.4rem; font-size: .93rem; color: var(--ink-soft); }

/* ---------- location page layout (Matt, 2026-07-31) ----------
   Feedback on /we-buy-houses-kimberly-wi/: the location pages were a stack of
   prose with none of the homepage's structure. These borrow the homepage's own
   components — the two-column market block, the pill town list, card grids —
   so a city page reads as designed rather than as a document. The extra FAQ
   depth and the local resource block are untouched; this is layout only. */
.loc-cols {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 2rem 3rem;
  margin-top: 1.6rem;
}
.loc-cols h3 { font-size: 1.2rem; margin-bottom: .5rem; }
.loc-cols p { color: var(--ink-soft); margin: 0; }

.buys-grid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(240px, 1fr));
  gap: 1rem;
  margin-top: 1.6rem;
}
.buy-card {
  padding: 1.1rem 1.3rem;
  border-left: 3px solid var(--spruce);
}
.buy-card p { margin: 0; font-weight: 600; color: var(--ink); }

/* A kicker above each long-form block gives the eye a label to land on, which
   is most of what made the homepage feel structured and these pages not. */
.prose > .kicker { margin-bottom: .4rem; }

@media (max-width: 760px) {
  .loc-cols { grid-template-columns: 1fr; }
}

/* ============================================================================
   Homepage components, unscoped, for the generated location pages
   (Matt, 2026-07-31: "follow the homepage design more … pictures of dan, the
   hero section, the comparison table")

   The homepage's own versions live in index.Blls2JIU.css scoped to
   [data-astro-cid-j7pv25f6], and generated pages do NOT load that file. Rather
   than stamp an Astro scope hash onto generated markup — the filename and the
   hash both change if the preview is ever rebuilt, and we already have one
   load-bearing scope attribute (5hce7sga on the header/footer) — these are
   independent copies. If the homepage's look changes, change both.
   ============================================================================ */

/* --- dark hero -------------------------------------------------------------
   Deliberately a gradient rather than a photograph. The only hero image we own
   is a Madison skyline, and putting Madison behind an "We buy houses in
   Kaukauna" headline would be a picture of the wrong place — the same reason
   we do not borrow project photos. */
.loc-hero-dark {
  position: relative;
  overflow: hidden;
  background:
    radial-gradient(120% 100% at 78% 0%, #33465a 0%, #24323f 45%, #1a2530 100%);
  color: var(--night-ink);
  border-bottom: 1px solid #16202a;
}
.loc-hero-dark h1 { color: #fff; }
.loc-hero-dark .lede,
.loc-hero-dark .loc-meta,
.loc-hero-dark .loc-meta li { color: #c9d3dd; }
.loc-hero-dark .loc-meta strong { color: #fff; }
.loc-hero-dark .loc-meta a { color: #fff; text-decoration-color: rgba(255,255,255,.5); }
.loc-hero-dark .kicker { color: var(--gold); }
.loc-hero-dark .checks li { color: #dde4ea; }
.loc-hero-dark .checks li::before { color: #8fcfa4; }
.loc-hero-dark .sit-stats { border-top-color: rgba(255,255,255,.18); }
.loc-hero-dark .sit-stats strong { color: #fff; }
.loc-hero-dark .sit-stats span { color: #a9b6c3; }
.loc-hero-dark .hero-alt { color: #c9d3dd; font-size: .95rem; margin-top: 1.2rem; }
.loc-hero-dark .hero-alt a { color: #fff; }

/* the homepage's hand-drawn underline on the headline */
.mark-under { position: relative; white-space: nowrap; }
.mark-under svg {
  position: absolute;
  left: 0; right: 0; bottom: -.18em;
  width: 100%; height: .28em;
  fill: none; stroke: var(--barn); stroke-width: 4; stroke-linecap: round;
}
.loc-hero-dark .mark-under svg { stroke: #e2564b; }

/* --- process block with a photo of Dan ------------------------------------ */
.process-grid {
  display: grid;
  grid-template-columns: .72fr 1.28fr;
  gap: clamp(2rem, 5vw, 4rem);
  align-items: center;
}
.process-photo { margin: 0; rotate: -2deg; max-width: 380px; margin-inline: auto; }
.process-photo img {
  width: 100%; height: auto; display: block;
  border-radius: var(--radius);
  box-shadow: var(--shadow-lift);
  border: 6px solid #fff;
}
.process-photo figcaption {
  font-family: var(--font-display);
  font-style: italic; font-size: .95rem;
  color: var(--ink-soft); text-align: center; margin-top: .9rem;
}
.process { list-style: none; display: grid; gap: 1.6rem; padding: 0; margin-top: 1.8rem; }
.process li { display: grid; grid-template-columns: auto 1fr; gap: .4rem 1.1rem; }
.process li h3 { margin: .45rem 0 0; grid-column: 2; grid-row: 1; }
.process li p { grid-column: 2; color: var(--ink-soft); font-size: .98rem; }
.process li .process-num { grid-column: 1; grid-row: 1 / span 2; }
.process-num {
  display: inline-grid; place-items: center;
  width: 2.6rem; height: 2.6rem; border-radius: 50%;
  background: var(--barn); color: #fff;
  font-family: var(--font-display); font-weight: 700; font-size: 1.3rem;
  margin-bottom: .8rem;
}

/* --- comparison table ----------------------------------------------------- */
.compare { margin-top: 2rem; overflow-x: auto; }
.compare table { width: 100%; border-collapse: collapse; font-size: .97rem; min-width: 640px; }
.compare th, .compare td { text-align: left; padding: .85rem 1.1rem; border-bottom: 1px solid var(--line); }
.compare thead th { font-family: var(--font-display); font-size: 1.05rem; border-bottom: 2px solid var(--ink); }
.compare tbody th { font-weight: 600; color: var(--ink-soft); }
.compare tbody tr:last-child th, .compare tbody tr:last-child td { border-bottom: 0; }
.compare-us { background: #f2f7f1; font-weight: 700; }
.compare-note { font-size: .88rem; color: var(--ink-soft); margin-top: .9rem; }

/* --- who you'll deal with ------------------------------------------------- */
.meet-grid { display: grid; grid-template-columns: 300px 1fr; gap: clamp(1.6rem, 4vw, 3rem); align-items: center; }
.meet-photo { margin: 0; }
.meet-photo img {
  width: 100%; height: auto; display: block;
  border-radius: var(--radius); border: 6px solid #fff; box-shadow: var(--shadow-lift);
}

@media (max-width: 860px) {
  .process-grid, .meet-grid { grid-template-columns: 1fr; }
}

/* The dark hero sets `color: var(--night-ink)` on the whole section, which the
   opt-in card then inherits — leaving cream text on a cream card. The card is
   its own light surface, so it resets its own colour. */
.loc-hero-dark .loc-hero-form,
.loc-hero-dark .loc-hero-form .offer-bar-head,
.loc-hero-dark .loc-hero-form p,
.loc-hero-dark .loc-hero-form label { color: var(--ink); }
.loc-hero-dark .loc-hero-form .offer-bar-note { color: var(--ink-soft); }

/* The homepage's underline wraps "honest way" — two short words that always
   fit. On a location page it wraps the town name, and `white-space: nowrap`
   on "North Fond du Lac," measures 511px. The h1 clamp bottoms out at 2.3rem,
   so on a narrow phone that name cannot shrink far enough and pushes the page
   into horizontal scroll. Below the breakpoint the name is allowed to wrap and
   the squiggle — which is decoration, not information — is dropped. */
@media (max-width: 620px) {
  .loc-hero-dark h1 .mark-under { white-space: normal; }
  .loc-hero-dark h1 .mark-under svg { display: none; }
}

/* ---------- data tables (Matt, 2026-07-31) ----------
   .table-scroll only ever set `overflow-x: auto`, and Base.css has no table
   rules at all — the only styled table on the site was the homepage's
   `.compare`, which carries its own Astro-scoped CSS. So the ten situation
   options tables and the tables inside blog posts rendered with no borders, no
   cell padding and centred headers, and ran together into a wall of text.
   These match the `.compare` treatment so every table on the site reads the
   same way. */
.table-scroll,
.prose .table-scroll {
  overflow-x: auto;
  margin-top: 1.6rem;
  border: 1px solid var(--line);
  border-radius: var(--radius);
  background: #fffdf8;
  box-shadow: var(--shadow-card);
  -webkit-overflow-scrolling: touch;
}
.table-scroll table,
.prose table {
  width: 100%;
  border-collapse: collapse;
  font-size: .95rem;
  min-width: 640px;
  margin: 0;
}
.table-scroll th,
.table-scroll td,
.prose th,
.prose td {
  text-align: left;
  vertical-align: top;
  padding: .85rem 1.1rem;
  border-bottom: 1px solid var(--line);
}
.table-scroll thead th,
.prose thead th {
  font-family: var(--font-display);
  font-size: 1rem;
  font-weight: 700;
  color: var(--ink);
  background: var(--paper-deep);
  border-bottom: 2px solid var(--ink);
  white-space: nowrap;
}
/* First column is the row label — it carries the scan. */
.table-scroll tbody td:first-child,
.prose tbody td:first-child { font-weight: 600; color: var(--ink); }
.table-scroll tbody td,
.prose tbody td { color: var(--ink-soft); }
.table-scroll tbody tr:nth-child(even),
.prose tbody tr:nth-child(even) { background: rgba(220, 211, 195, .18); }
.table-scroll tbody tr:last-child th,
.table-scroll tbody tr:last-child td,
.prose tbody tr:last-child td { border-bottom: 0; }

/* Blog-post tables sit inside .prose, which constrains width; let them use the
   full column and scroll rather than squeezing four columns into 70ch. */
.prose table th:first-child,
.prose table td:first-child { padding-left: 1.1rem; }

@media (max-width: 700px) {
  .table-scroll table,
  .prose table { font-size: .9rem; }
  .table-scroll th,
  .table-scroll td,
  .prose th,
  .prose td { padding: .7rem .8rem; }
}

/* ---------- address suggestions (ported from the client build 2026-08-03) --- */
.offer-bar { position: relative; }
.addr-list {
  position: absolute;
  z-index: 40;
  left: 0; right: 0;
  margin: .25rem 0 0;
  padding: .3rem 0;
  list-style: none;
  background: #fff;
  border: 1px solid var(--line);
  border-radius: var(--radius);
  box-shadow: var(--shadow-lift);
  max-height: 17rem;
  overflow-y: auto;
  text-align: left;
}
.addr-list li[data-i] { padding: .55rem .9rem; cursor: pointer; }
.addr-list li[data-i]:hover,
.addr-list li.is-active { background: var(--paper-deep); }
.addr-main { display: block; font-weight: 600; color: var(--ink); font-size: .95rem; }
.addr-sub { display: block; font-size: .84rem; color: var(--ink-soft); }
.addr-foot {
  padding: .5rem .9rem;
  font-size: .82rem;
  color: var(--ink-soft);
  border-top: 1px solid var(--line);
}

/* ---------- mobile header: keep the phone and the CTA out of the drawer ----
   (Matt, 2026-08-03: "still put the get my cash offer button and phone number
   if you can fit it in without going to hamburger menu")

   Base.css hides .header-phone below 1120px and .header-cta below 700px, so on
   a phone the header was wordmark + hamburger and nothing else. Measured at
   386px: wordmark 183px + hamburger 44px leaves about 110px of the row — not
   enough for a phone number AND a button.

   Dropping the wordmark's word-image frees 121px, which is what makes both
   fit. The badge stays, and the badge IS the logo — it is what appears on the
   forms and the favicon, so brand recognition survives.

   Specificity note: the Base rules are Astro-scoped ([data-astro-cid-5hce7sga]),
   which is 0,2,0. `.site-header .header-x` is also 0,2,0 and this file loads
   after Base, so it wins without needing !important or hard-coding the hash. */
@media (max-width: 700px) {
  .site-header .wordmark-house { display: none; }

  .site-header .header-phone { display: flex; align-items: center; }
  .site-header .header-phone-label { display: none; }
  /* Base's rule is `.header-phone[data-astro-cid] strong[data-astro-cid]`,
     which is (0,3,1). `.site-header .header-phone strong` is only (0,2,1) and
     silently lost — the number stayed at 1.05rem and pushed the row into
     horizontal scroll. Matching (0,3,1) and loading later wins it without
     hard-coding the Astro hash. */
  .site-header .header-call .header-phone strong {
    font-size: .88rem;
    letter-spacing: -.02em;
    white-space: nowrap;
  }

  .site-header .header-cta {
    display: inline-flex;
    align-items: center;
    font-size: .76rem;
    padding: .6em .62em;
    letter-spacing: -.01em;
    /* The row is 78px tall, so there is no reason for the two things people
       actually tap to be 31px. */
    min-height: 40px;
  }
  .site-header .header-call .header-phone { min-height: 40px; }

  /* Measured budget at 386px: badge 62 + phone ~120 + button ~90 + toggle 44
     = 316, plus gaps, inside ~354 of usable row. The first attempt at these
     sizes overflowed and put the whole page into horizontal scroll, so treat
     the numbers here as load-bearing rather than taste. */
  .site-header .header-row { gap: .4rem; }
  .site-header .header-call { gap: .4rem; }
  .site-header .nav-toggle { width: 40px; }

  /* The sticky bottom bar carried these two actions precisely because the
     header could not. The header is itself sticky, so keeping both would mean
     two permanent bars eating a phone screen for one set of actions. */
  .mobile-bar { display: none !important; }
}

/* Very narrow phones: the number alone is still the most valuable tap target,
   so the button sheds a word rather than the phone disappearing again. */
/* The header CTA carries two labels. Measured: at 320px the full row needs
   303px against 283px usable, so something has to give — and the thing to give
   is a word of the button, not the phone number or the button itself. */
.header-cta .cta-short { display: none; }

@media (max-width: 340px) {
  .site-header .header-cta .cta-long { display: none; }
  .site-header .header-cta .cta-short { display: inline; }
  /* At 320px the short label alone still lands within a pixel of the edge, so
     take the last of it out of the gaps rather than the content. */
  .site-header .header-row,
  .site-header .header-call { gap: .25rem; }
  .site-header .header-cta { padding: .55em .45em; }
  /* Measured at 318px: content + gaps + the wrap's 17.6px side padding came to
     318.6 against 318. The last 0.6px comes out of the padding — on a phone
     this narrow the header can sit closer to the edge. */
  .site-header .header-row { padding-inline: .55rem; }
}

@media (max-width: 380px) {
  .site-header .header-cta { font-size: .72rem; padding: .55em .5em; }
  .site-header .header-call .header-phone strong { font-size: .82rem; }
  .site-header .header-row,
  .site-header .header-call { gap: .3rem; }
}

/* ---------- homepage guarantee band: collapse on mobile ----------
   Pre-existing bug, found while fitting the mobile header (2026-08-03).
   index.Blls2JIU.css sets `.guarantee-grid { grid-template-columns: auto 1fr }`
   with NO media query anywhere. The `auto` column is the $5,000 seal at 230px,
   so on a 318px phone the second column is pushed to 417px and the whole page
   scrolls sideways — on the homepage, on every phone.

   Not something we introduced and not a design change: one column below the
   breakpoint is what the rest of the page already does. Specificity matches
   the Astro-scoped original (0,2,0) and this file loads later. */
@media (max-width: 700px) {
  /* `.section.guarantee .guarantee-grid` is (0,3,0), deliberately one step
     above the original's (0,2,0). Equal specificity is NOT enough here:
     index.Blls2JIU.css is linked AFTER this file on the homepage, so a tie
     goes to Astro. Checked with getComputedStyle, not by eye. */
  .section.guarantee .guarantee-grid {
    grid-template-columns: 1fr;
    justify-items: center;
    text-align: center;
  }
}

/* The footer drops to two columns at 700px and stays there. At 318px those two
   columns plus a 2.2rem gap need 352px, so the footer — every page, not just
   the homepage — pushed the document 6px wide. One column below 380. */
@media (max-width: 380px) {
  .site-footer .footer-grid { grid-template-columns: 1fr; gap: 1.6rem; }
}