/* Mojo House Buyers — Direction C, "A letter from Justin"
   Literata (reading serif, one optical size, 400-700) + Caveat (short handwritten notes only). Deep green, cream, brick, Appraize gold accent. */

@font-face { font-family: "Literata"; font-style: normal; font-weight: 400 700; font-display: swap;
  src: url(/assets/fonts/literata-text.woff2) format("woff2"); }
@font-face { font-family: "Caveat"; font-style: normal; font-weight: 600; font-display: swap;
  src: url(/assets/fonts/caveat-hand.woff2) format("woff2"); }

:root {
  /* Navy / gold palette (Appraize tokens) */
  --bg: #FBF9F5;         /* page: warm white */
  --bg-alt: #F3F0EA;     /* alternate sections */
  --card: #FFFFFF;       /* cards, form card, photo frames */
  --ink: #1B2430;        /* body text */
  --ink-soft: #4A5A66;   /* secondary text */
  --navy: #0B1728;       /* headings, secondary buttons, links, mobile bar, founder band */
  --navy-2: #1D2D45;     /* navy hover */
  --navy-deep: #050C1A;  /* footer */
  --gold: #C9922C;       /* primary buttons, rules, accents on navy */
  --gold-dark: #A77A25;  /* primary button hover */
  --gold-ink: #85600F;   /* gold text on light grounds */
  --gold-tint: rgba(201,146,44,.18);
  --line: #DDD6CA;       /* rules and card borders */
  --field: #857D70;      /* form field and control borders (3:1 non-text contrast on white) */
  --on-navy: #FBF9F5;
  --on-navy-soft: #C7CFD8;
  --error: #B3261E;      /* error and validation text only */

  --s1: 4px; --s2: 8px; --s3: 12px; --s4: 16px; --s5: 24px; --s6: 32px; --s7: 48px; --s8: 64px; --s9: 96px;
  --radius: 6px;
  --serif: "Literata", Georgia, "Times New Roman", serif;
  --hand: "Caveat", "Segoe Print", "Bradley Hand", cursive;   /* signature caption only */
  --measure: 62ch;
}

*, *::before, *::after { box-sizing: border-box; }
html { -webkit-text-size-adjust: 100%; scroll-behavior: smooth; }
body {
  margin: 0; background: var(--bg); color: var(--ink);
  font-family: var(--serif); font-size: 18px; line-height: 1.62; font-optical-sizing: auto;
  padding-bottom: 76px; /* room for the mobile bar */
}
@media (min-width: 768px) { body { font-size: 19.5px; padding-bottom: 0; } }
img { max-width: 100%; height: auto; display: block; }
a { color: var(--navy); text-decoration-thickness: 1px; text-underline-offset: 3px; }
a:hover { color: var(--gold-ink); }
:focus-visible { outline: 3px solid var(--gold); outline-offset: 3px; border-radius: 2px; }
h1, h2, h3 { font-family: var(--serif); color: var(--navy); line-height: 1.15; margin: 0 0 var(--s4); letter-spacing: -0.01em; }
h2 { font-size: clamp(1.75rem, 1.2rem + 2vw, 2.5rem); font-weight: 650; }
h3 { font-size: 1.15em; font-weight: 650; }
p { margin: 0 0 var(--s4); }
.wrap { width: min(1180px, 100% - 32px); margin-inline: auto; }
@media (min-width: 768px) { .wrap { width: min(1180px, 100% - 64px); } }
.hand { font-family: var(--hand); font-weight: 600; color: var(--gold); letter-spacing: 0.01em; }
.kicker { font-size: 1.6rem; line-height: 1; margin-bottom: var(--s2); }
.lede { color: var(--ink-soft); max-width: 46ch; }
.sr, .defs { position: absolute !important; width: 1px; height: 1px; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; }
.skip { position: absolute; left: 12px; top: -60px; background: var(--navy); color: var(--on-navy); padding: 10px 16px; z-index: 50; border-radius: var(--radius); }
.skip:focus { top: 12px; }

/* ---------- buttons ---------- */
.btn {
  display: inline-flex; align-items: center; justify-content: center; gap: var(--s2);
  min-height: 48px; padding: 10px 20px; border-radius: var(--radius); border: 2px solid transparent;
  font: 600 1rem/1.2 var(--serif); text-decoration: none; cursor: pointer; transition: background .15s, color .15s, border-color .15s;
}
.btn-big { min-height: 56px; padding: 14px 26px; font-size: 1.05rem; }
.btn-small { min-height: 44px; padding: 8px 16px; font-size: .95rem; }
.btn-wide { width: 100%; }
.btn-primary { background: var(--navy); color: var(--on-navy); }
.btn-primary:hover { background: var(--navy-2); color: var(--on-navy); }
.btn-secondary { background: transparent; color: var(--navy); border-color: var(--navy); }
.btn-secondary:hover { background: var(--navy); color: var(--on-navy); }

/* ---------- header ---------- */
.site-header { border-bottom: 1px solid var(--line); background: var(--bg); }
.header-row { display: flex; align-items: center; justify-content: space-between; gap: var(--s4); padding-block: var(--s3); }
.brand img { width: 150px; height: auto; }
.header-contact { display: flex; align-items: center; gap: var(--s5); }
.header-note { margin: 0; display: none; text-align: right; line-height: 1.1; }
.header-note .hand { display: block; font-size: 1.35rem; }
.header-phone { font-weight: 650; font-size: 1.15rem; color: var(--navy); text-decoration: none; }
.header-actions { display: flex; gap: var(--s2); }
@media (max-width: 420px) { .header-actions .btn-secondary { display: none; } }
@media (min-width: 768px) {
  .brand img { width: 196px; }
  .header-note { display: block; }
  .header-row { padding-block: var(--s4); }
}

/* ---------- hero / letter ---------- */
.hero { padding-block: var(--s5) var(--s7); }
.hero-grid { display: grid; gap: var(--s6); }
.letter { max-width: var(--measure); }
.from { display: flex; align-items: center; gap: var(--s3); margin-bottom: var(--s4); }
.from-face { width: 56px; height: 56px; border-radius: 50%; object-fit: cover; border: 2px solid var(--card); box-shadow: 0 0 0 1px var(--field); }
.from .hand { font-size: 1.55rem; line-height: 1.1; }
h1 { font-size: clamp(2.15rem, 1.4rem + 3.2vw, 3.6rem); font-weight: 700; letter-spacing: -0.02em; margin-bottom: var(--s5); }
.h1-soft { display: block; font-weight: 400; color: var(--ink); font-size: .62em; letter-spacing: -0.005em; margin-top: var(--s3); line-height: 1.25; }
.salute { font-family: var(--hand); font-weight: 600; color: var(--gold-ink); font-size: 1.7rem; line-height: 1.1; margin-bottom: var(--s3); }
.hero-actions { display: flex; flex-wrap: wrap; gap: var(--s3); margin: 0 0 var(--s6); }
.hero-actions .btn { flex: 1 1 240px; }

.hero-aside { display: grid; grid-template-columns: 1.15fr 1fr; gap: var(--s4); align-items: start; }
.photo { margin: 0; background: var(--card); padding: 10px 10px 6px; border: 1px solid var(--line); transform: rotate(-1.2deg);
  box-shadow: 0 1px 2px rgba(11,23,40,.08), 0 10px 24px -16px rgba(11,23,40,.30); position: relative; }
.photo::before { content: ""; position: absolute; top: -10px; left: 50%; width: 84px; height: 22px; transform: translateX(-50%) rotate(2deg);
  background: rgba(201,146,44,.35); border-left: 1px dashed rgba(11,23,40,.15); border-right: 1px dashed rgba(11,23,40,.15); }
.photo img { aspect-ratio: 525 / 760; object-fit: cover; object-position: center 20%; width: 100%; }
.photo figcaption { font-size: 1.45rem; padding: 6px 4px 0; line-height: 1.1; }
.video-card { margin: 0; margin-top: var(--s6); }
.video-card figcaption { font-size: .9rem; line-height: 1.35; color: var(--ink-soft); margin-top: var(--s2); }
.video-card figcaption .hand { font-size: 1.3rem; }
.video-note { display: block; font-size: .8rem; }
.video { position: relative; background: var(--card); padding: 8px; border: 1px solid var(--line); transform: rotate(1.4deg); }
.video-poster { display: block; position: relative; color: var(--card); }
.video-poster img { width: 100%; aspect-ratio: 9 / 16; object-fit: cover; }
.play { position: absolute; inset: 0; display: grid; place-items: center; }
.play svg { width: 64px; height: 64px; }
.play circle { fill: var(--navy); stroke: var(--card); stroke-width: 2.5; }
.play path { fill: var(--card); }
.video-poster:hover .play circle { fill: var(--gold); }
.video-frame { width: 100%; aspect-ratio: 9 / 16; border: 0; display: block; }

@media (min-width: 960px) {
  .hero { padding-block: var(--s6) var(--s8); }
  .hero-grid { grid-template-columns: minmax(0, 1.25fr) minmax(0, 1fr); gap: var(--s8); align-items: start; }
  .hero-aside { grid-template-columns: .62fr 1fr; gap: var(--s4); align-items: end; padding-top: var(--s4); }
  .video-card { order: -1; margin: 0 0 var(--s7); }
}

/* ---------- how it works + sign-off ---------- */
.how { padding-block: var(--s8); background: var(--card); border-block: 1px solid var(--line);
  background-image: repeating-linear-gradient(to bottom, transparent 0, transparent 39px, rgba(11,23,40,.06) 39px, rgba(11,23,40,.06) 40px); }
.how-grid { display: grid; gap: var(--s6); }
.how-head h2 { max-width: 20ch; }
.steps { list-style: none; margin: 0; padding: 0; display: grid; gap: 0; counter-reset: s; }
.steps li { display: grid; grid-template-columns: 56px 1fr; gap: var(--s4); padding-block: var(--s5); border-top: 1px solid var(--line); }
.steps li:last-child { border-bottom: 1px solid var(--line); }
.step-n { font-family: var(--hand); font-weight: 700; font-size: 3.2rem; line-height: .9; color: var(--gold); }
.steps h3 { margin-bottom: var(--s2); }
.steps p { margin: 0; color: var(--ink); max-width: 52ch; }
.signoff { max-width: var(--measure); }
.closing { font-family: var(--hand); font-weight: 600; color: var(--gold-ink); font-size: 1.6rem; margin-bottom: 0; }
.signature { width: 210px; height: auto; color: var(--navy); margin: var(--s1) 0 var(--s1) -6px; display: block; }
.signed-name { font-weight: 650; color: var(--navy); line-height: 1.35; }
.signed-name span { font-weight: 400; color: var(--ink-soft); font-size: .9em; }
.ps { border-left: 3px solid var(--gold); padding-left: var(--s4); margin-top: var(--s5); }
@media (min-width: 960px) {
  .how-grid { grid-template-columns: minmax(0, 1fr) minmax(0, 1.6fr); column-gap: var(--s8); }
  .how-head { grid-row: span 2; position: sticky; top: var(--s6); align-self: start; }
  .signoff { grid-column: 2; }
}

/* ---------- reply card / form ---------- */
.reply { padding-block: var(--s8); }
.reply-card { background: var(--card); border: 2px dashed var(--field); border-radius: 10px; padding: var(--s5); display: grid; gap: var(--s5); position: relative; }
.reply-intro h2 { margin-bottom: var(--s3); }
@media (min-width: 900px) {
  .reply-card { grid-template-columns: minmax(0, .9fr) minmax(0, 1.1fr); padding: var(--s7); gap: var(--s7); align-items: start; }
}
.offer-form fieldset { border: 0; margin: 0; padding: 0; min-width: 0; }
.offer-form fieldset + fieldset { margin-top: var(--s5); }
.js .offer-form fieldset + fieldset { margin-top: 0; }
.offer-form label { display: block; font-weight: 650; color: var(--navy); margin-bottom: var(--s2); }
.offer-form input[type=text] {
  width: 100%; min-height: 58px; padding: 12px 14px; font: 400 1.1rem/1.3 var(--serif); color: var(--ink);
  background: #fff; border: 2px solid var(--field); border-radius: var(--radius); margin-bottom: var(--s4);
}
.offer-form input[type=text]::placeholder { color: #6B7280; }
.offer-form input[type=text]:focus { border-color: var(--navy); outline: 3px solid rgba(201,146,44,.45); outline-offset: 1px; }
.offer-form input[aria-invalid=true] { border-color: var(--gold); }
.field-error { color: var(--gold-ink); font-size: .95rem; margin-top: calc(-1 * var(--s2)); }
.progress { list-style: none; display: flex; gap: var(--s4); padding: 0; margin: 0 0 var(--s5); font-size: .95rem; color: var(--ink-soft); }
.progress li { display: flex; align-items: center; gap: var(--s2); }
.progress span { display: inline-grid; place-items: center; width: 30px; height: 30px; border-radius: 50%; border: 2px solid var(--field); font-weight: 650; font-size: .9rem; }
.progress .is-current { color: var(--navy); font-weight: 650; }
.progress .is-current span { background: var(--navy); border-color: var(--navy); color: var(--on-navy); }
.progress .is-done span { background: var(--gold); border-color: var(--gold); color: var(--card); }
.q { font-weight: 650; font-size: 1.2rem; color: var(--navy); line-height: 1.3; margin-bottom: var(--s4); padding: 0; }
.choices { display: grid; grid-template-columns: 1fr 1fr; gap: var(--s3); margin-bottom: var(--s5); }
.choice { display: flex !important; align-items: center; gap: var(--s3); min-height: 58px; font-size: 1.1rem; padding: 10px 14px; margin: 0 !important;
  background: #fff; border: 2px solid var(--field); border-radius: var(--radius); cursor: pointer; font-weight: 600 !important; color: var(--ink) !important; }
.choice input { width: 22px; height: 22px; accent-color: var(--navy); margin: 0; flex: none; }
.choice:has(input:checked) { border-color: var(--navy); background: #FBF3E3; }
.step-actions { display: flex; gap: var(--s3); flex-wrap: wrap; }
.step-actions .btn-primary { flex: 1 1 160px; }
.done { padding: var(--s4) 0; }
.done-hand { font-size: 2.2rem; margin-bottom: var(--s2); }
.form-fine { font-size: .88rem; color: var(--ink-soft); margin: var(--s4) 0 0; }

/* ---------- map (hand-drawn) ---------- */
.where { padding-block: var(--s8); background: var(--bg-alt); border-block: 1px solid var(--line); }
.section-head { margin-bottom: var(--s6); max-width: 60ch; }
.mapwrap { display: grid; gap: var(--s5); }
.map-tabs { display: flex; gap: var(--s2); overflow-x: auto; padding-bottom: 2px; scrollbar-width: none; }
.map-tabs::-webkit-scrollbar { display: none; }
.map-tabs [role=tab] {
  flex: none; min-height: 46px; padding: 8px 16px; font: 600 1rem/1 var(--serif); color: var(--navy);
  background: var(--card); border: 2px solid var(--field); border-radius: 999px; cursor: pointer;
}
.map-tabs [role=tab]:hover { border-color: var(--navy); }
.map-tabs [role=tab][aria-selected=true] { background: var(--navy); border-color: var(--navy); color: var(--on-navy); }
.map-figure { position: relative; margin: 0; background: var(--card); border: 1px solid var(--line); border-radius: 10px; padding: var(--s2); overflow: hidden; }
.nj-map { width: 100%; height: auto; display: block; overflow: visible; }
.nj-map .ctx-shape { fill: var(--bg-alt); stroke: var(--line); stroke-width: 1; filter: url(#pen); }
.nj-map .ctx-ny { fill: #EEEAE3; stroke-dasharray: 4 3; }
.nj-map .ctx-label { font-family: var(--hand); font-size: 17px; font-weight: 500; fill: var(--ink-soft); text-anchor: middle; letter-spacing: .04em; }
.nj-map .county path { fill: #EFEAE0; stroke: var(--navy); stroke-width: 1.5; stroke-linejoin: round; filter: url(#pen); transition: fill .2s; }
.nj-map .county:hover path { fill: #E6DFD1; }
.nj-map .county.is-active path { fill: var(--gold-tint); stroke: var(--gold); stroke-width: 2.4; }
.nj-map .county:focus-visible { outline: none; }
.nj-map .county:focus-visible path { stroke: var(--navy); stroke-width: 3.5; }
.nj-map .county-label {
  font-family: var(--hand); font-weight: 700; font-size: 25px; fill: var(--navy); text-anchor: middle; pointer-events: none;
  paint-order: stroke; stroke: var(--card); stroke-width: 6px; stroke-linejoin: round; letter-spacing: .06em;
}
.nj-map .county-label.is-active { fill: var(--gold-ink); }
.nj-map .town .hit { fill: transparent; }
.nj-map .town .dot { fill: var(--ink); stroke: var(--card); stroke-width: 2; transition: r .15s, fill .15s; }
.nj-map .town.is-active .dot { fill: var(--navy); r: 6; }
.nj-map .town:hover .dot, .nj-map .town:focus-visible .dot, .nj-map .town.is-hot .dot { fill: var(--gold); r: 8.5; }
.nj-map .town:focus-visible { outline: none; }
.nj-map .town.is-current .dot { fill: var(--gold); r: 8; }
.nj-map .current-marker .ring { fill: none; stroke: var(--gold); stroke-width: 3; stroke-dasharray: 70 8 14 6; filter: url(#pen); }
.nj-map .town-label { font-family: var(--hand); font-weight: 700; font-size: 32px; fill: var(--gold-ink);
  paint-order: stroke; stroke: var(--card); stroke-width: 7px; stroke-linejoin: round; }
.map-tip { position: absolute; left: 0; top: 0; transform: translate(-50%, calc(-100% - 10px)); pointer-events: none;
  background: var(--navy); color: var(--on-navy); font: 600 .95rem/1.2 var(--serif); padding: 6px 10px; border-radius: 4px; white-space: nowrap;
  opacity: 0; transition: opacity .12s; z-index: 2; }
.map-tip::after { content: ""; position: absolute; left: 50%; bottom: -6px; margin-left: -6px; border: 6px solid transparent; border-bottom: 0; border-top-color: var(--navy); }
.map-tip.is-on { opacity: 1; }
.map-lists { display: grid; gap: var(--s5); align-content: start; }
.county-name { font-size: 1.35rem; margin-bottom: var(--s3); }
.county-name a { text-decoration: none; color: var(--navy); }
.county-name a::after { content: " →"; color: var(--gold); }
.county-name a:hover { text-decoration: underline; }
.town-list { list-style: none; margin: 0; padding: 0; columns: 2; column-gap: var(--s5); }
.town-list li { break-inside: avoid; }
.town-list a { display: block; padding: 9px 0; min-height: 44px; border-bottom: 1px dotted var(--field); color: var(--ink); text-decoration: none; }
.town-list a:hover, .town-list a:focus-visible { color: var(--gold-ink); text-decoration: underline; }
.town-list a.is-current { color: var(--gold-ink); font-weight: 650; }
.js .county-list[hidden] { display: none; }
.no-js .map-lists { grid-template-columns: repeat(auto-fill, minmax(220px, 1fr)); }
.js .county-list { background: var(--card); border: 1px solid var(--line); border-radius: 10px; padding: var(--s5); }
@media (min-width: 900px) {
  .mapwrap { grid-template-columns: minmax(0, 1fr) 320px; column-gap: var(--s6); }
  .map-tabs { grid-column: 1 / -1; }
  .map-lists { grid-column: 2; grid-row: 2; }
  .no-js .mapwrap { grid-template-columns: 1fr; }
  .no-js .map-lists { grid-column: 1; grid-row: auto; }
  .town-list { columns: 1; }
  .js .town-list { columns: 2; column-gap: var(--s4); }
}

/* ---------- founder band (Appraize nod: gold) ---------- */
.founder { background: var(--navy); color: var(--on-navy); padding-block: var(--s8); border-top: 6px solid var(--gold); }
.founder-grid { display: grid; gap: var(--s5); align-items: center; }
.founder-face { width: 120px; height: 120px; border-radius: 50%; object-fit: cover; border: 3px solid var(--gold); }
.founder h2 { color: var(--on-navy); font-size: clamp(1.6rem, 1.1rem + 2vw, 2.3rem); max-width: 26ch; }
.founder p { max-width: 58ch; color: var(--on-navy-soft); }
.appraize { color: var(--on-navy); text-decoration: underline; text-decoration-color: var(--gold); text-decoration-thickness: 3px; text-underline-offset: 6px; white-space: nowrap; }
.appraize span { color: var(--gold); }
.appraize:hover { color: #fff; }
.founder-link a { color: var(--on-navy); font-weight: 650; text-decoration-color: var(--gold); text-decoration-thickness: 2px; text-underline-offset: 5px; }
.founder-link a::after { content: " ↗"; color: var(--gold); }
@media (min-width: 768px) {
  .founder-grid { grid-template-columns: 180px 1fr; gap: var(--s7); }
  .founder-face { width: 180px; height: 180px; }
}

/* ---------- FAQ ---------- */
.faq { padding-block: var(--s8); }
.faq-grid { display: grid; gap: var(--s5); }
@media (min-width: 900px) { .faq-grid { grid-template-columns: minmax(0, 1fr) minmax(0, 1.6fr); gap: var(--s8); } }
.faq-list details { border-top: 1px solid var(--field); }
.faq-list details:last-child { border-bottom: 1px solid var(--field); }
.faq-list summary { cursor: pointer; list-style: none; padding: var(--s4) 40px var(--s4) 0; min-height: 56px; position: relative;
  font-weight: 650; color: var(--navy); font-size: 1.08em; line-height: 1.35; }
.faq-list summary::-webkit-details-marker { display: none; }
.faq-list summary::after { content: "+"; position: absolute; right: 6px; top: 12px; font-family: var(--hand); font-size: 2rem; line-height: 1; color: var(--gold); }
.faq-list details[open] summary::after { content: "–"; }
.faq-list details p { padding-bottom: var(--s4); margin: 0; max-width: 58ch; }

/* ---------- footer ---------- */
.site-footer { background: var(--navy-deep); color: var(--on-navy-soft); padding-block: var(--s7) var(--s5); }
.site-footer a { color: var(--on-navy); }
.site-footer a:hover { color: #fff; }
.footer-grid { display: grid; gap: var(--s5); }
.footer-name { font-weight: 700; font-size: 1.3rem; color: var(--on-navy); margin-bottom: var(--s2); }
.footer-phone { font-weight: 650; font-size: 1.15rem; }
.footer-sep { opacity: .6; padding-inline: 4px; }
.footer-links { list-style: none; margin: 0; padding: 0; display: grid; gap: 2px; }
.footer-links a { display: inline-block; padding: 8px 0; min-height: 44px; }
.footer-fine { border-top: 1px solid rgba(251,249,245,.18); margin-top: var(--s6); padding-top: var(--s4); font-size: .85rem; }
.footer-fine p { margin: 0; }
@media (min-width: 768px) { .footer-grid { grid-template-columns: 1.6fr 1fr; } }

/* ---------- mobile bar ---------- */
.mobile-bar { position: fixed; left: 0; right: 0; bottom: 0; z-index: 40; display: grid; grid-template-columns: 1fr 1fr 1.4fr;
  gap: 6px; padding: 8px 8px calc(8px + env(safe-area-inset-bottom)); background: var(--card); border-top: 1px solid var(--field); }
.mobile-bar a { display: grid; place-items: center; min-height: 52px; border-radius: var(--radius); font-weight: 650; text-decoration: none;
  color: var(--navy); border: 2px solid var(--navy); }
.mobile-bar .mobile-bar-offer { background: var(--navy); color: var(--on-navy); }
@media (min-width: 768px) { .mobile-bar { display: none; } }

/* =========================================================
   City page
   ========================================================= */
.crumbs { font-size: .92rem; color: var(--ink-soft); margin-bottom: var(--s4); }
.crumbs ol { list-style: none; display: flex; flex-wrap: wrap; gap: 6px; padding: 0; margin: 0; }
.crumbs li + li::before { content: "›"; margin-right: 6px; color: var(--field); }
.crumbs a { color: var(--ink-soft); }
.city-hero { padding-block: var(--s5) var(--s7); }
.city-grid { display: grid; gap: var(--s6); }
.city-hero h1 { font-size: clamp(2.05rem, 1.3rem + 3vw, 3.3rem); }
.city-note { display: flex; gap: var(--s3); align-items: center; margin-top: var(--s5); }
.city-note img { width: 64px; height: 64px; border-radius: 50%; object-fit: cover; border: 2px solid var(--card); box-shadow: 0 0 0 1px var(--field); flex: none; }
.city-note p { margin: 0; line-height: 1.35; }
.city-note .hand { font-size: 1.45rem; display: block; }
.city-grid .reply-card { padding: var(--s5); grid-template-columns: 1fr; gap: var(--s4); }
@media (min-width: 960px) {
  .city-grid { grid-template-columns: minmax(0, 1.1fr) minmax(0, 1fr); gap: var(--s8); align-items: start; }
  .city-grid .reply-card { padding: var(--s6); margin-top: var(--s4); }
}

.snapshot { padding-block: var(--s7); background: var(--card); border-block: 1px solid var(--line); }
.snapshot-head { display: flex; flex-wrap: wrap; align-items: baseline; justify-content: space-between; gap: var(--s3); margin-bottom: var(--s5); }
.snapshot-head h2 { margin: 0; }
.source-note { font-size: .92rem; color: var(--ink-soft); max-width: 44ch; margin: 0; }
.stats { display: grid; grid-template-columns: 1fr 1fr; margin: 0; border-top: 2px solid var(--navy); }
.stats div { padding: var(--s4) var(--s3) var(--s4) 0; border-bottom: 1px solid var(--line); }
.stats dt { font-size: .92rem; color: var(--ink-soft); margin-bottom: var(--s1); line-height: 1.3; }
.stats dd { margin: 0; font-size: 1.75rem; font-weight: 650; color: var(--navy); line-height: 1.1; display: flex; flex-wrap: wrap; align-items: center; gap: 8px; }
@media (min-width: 768px) { .stats { grid-template-columns: repeat(4, 1fr); } .stats div { padding-right: var(--s5); } .stats div + div { padding-left: var(--s5); border-left: 1px solid var(--line); } }

.situations { padding-block: var(--s8); }
.sit-list { list-style: none; margin: 0; padding: 0; display: grid; border-top: 1px solid var(--field); }
.sit-list li { padding: var(--s5) 0; border-bottom: 1px solid var(--field); display: grid; grid-template-columns: 44px 1fr; gap: var(--s3); }
.sit-mark { font-family: var(--hand); font-weight: 700; font-size: 1.9rem; color: var(--gold); line-height: 1; }
.sit-list h3 { margin-bottom: var(--s1); font-size: 1.12em; }
.sit-list p { margin: 0; }
@media (min-width: 900px) {
  .sit-list { grid-template-columns: 1fr 1fr; column-gap: var(--s7); border-top: 0; }
  .sit-list li:nth-child(-n+2) { border-top: 1px solid var(--field); }
}

.city-map { padding-block: var(--s8); background: var(--bg-alt); border-block: 1px solid var(--line); }
.city-map-grid { display: grid; gap: var(--s6); }
.mapwrap--small .map-tabs { display: none; }
.mapwrap--small { grid-template-columns: 1fr !important; }
.mapwrap--small .map-lists { grid-column: 1 !important; grid-row: auto !important; }
.mapwrap--small .county-list { background: transparent !important; border: 0 !important; padding: 0 !important; }
.mapwrap--small .town-list { columns: 2 !important; }
@media (min-width: 640px) { .mapwrap--small .town-list { columns: 3 !important; } }
.nearby { background: var(--card); border: 1px solid var(--line); border-radius: 10px; padding: var(--s5); align-self: start; }
.nearby h3 { font-size: 1.3rem; }
.nearby-list { list-style: none; margin: 0; padding: 0; }
.nearby-list li { display: flex; justify-content: space-between; align-items: baseline; gap: var(--s3); border-bottom: 1px dotted var(--field); }
.nearby-list a { display: block; padding: 10px 0; min-height: 44px; font-weight: 600; text-decoration: none; }
.nearby-list a:hover { text-decoration: underline; }
.nearby-county { font-size: .85rem; color: var(--ink-soft); white-space: nowrap; }
@media (min-width: 960px) { .city-map-grid { grid-template-columns: minmax(0, 1.7fr) minmax(0, 1fr); gap: var(--s7); } }

.founder--short { padding-block: var(--s7); }
@media (prefers-reduced-motion: reduce) { * { transition: none !important; scroll-behavior: auto !important; } }
@media (max-width: 767px) { .hero-actions .btn-secondary { display: none; } }
.nj-map .current-marker .town-label { text-anchor: end; transform: translate(-42px, -20px); }
@media (min-width: 960px) { .city-map-grid { grid-template-columns: minmax(0, 1.25fr) minmax(0, 1fr); } }
@media (max-width: 640px) {
  .map-tabs { display: grid; grid-template-columns: repeat(auto-fit, minmax(96px, 1fr)); gap: 5px; overflow: visible; }
  .map-tabs [role=tab] { padding: 6px 2px; font-size: .84rem; }
  .nj-map .county-label { font-size: 38px; stroke-width: 8px; }
  .nj-map .ctx-label { font-size: 24px; }
  .nj-map .town .dot { r: 8; stroke-width: 2.5; }
  .nj-map .town.is-active .dot { r: 9.5; }
  .nj-map .town.is-current .dot { r: 11; }
  .nj-map .current-marker .ring { r: 22; stroke-width: 4; }
  .nj-map .town-label { font-size: 44px; stroke-width: 9px; }
  .nj-map .current-marker .town-label { transform: translate(-50px, -26px); }
  .map-figure { padding: 4px; }
}


/* =========================================================
   Site build additions (Eleventy): nav, prose, forms, reviews, guides
   ========================================================= */
.site-nav { display: none; }
.site-nav ul { list-style: none; margin: 0; padding: 0; display: flex; gap: var(--s5); }
.site-nav a { color: var(--ink); text-decoration: none; font-weight: 600; font-size: .98rem; padding: 10px 0; display: inline-block; }
.site-nav a:hover, .site-nav a[aria-current=page] { color: var(--gold-ink); text-decoration: underline; }
@media (min-width: 1100px) { .site-nav { display: block; } }

.band { padding-block: var(--s8); }
.band-paper { background: var(--card); border-block: 1px solid var(--line); }
.band-wash { background: var(--bg-alt); border-block: 1px solid var(--line); }
.two-col { display: grid; gap: var(--s6); }
@media (min-width: 900px) { .two-col { grid-template-columns: minmax(0, 1fr) minmax(0, 1.6fr); gap: var(--s8); } }
.measure { max-width: var(--measure); }
.pull { border-left: 3px solid var(--gold); padding-left: var(--s4); }

/* core pages + guides */
.page-hero { padding-block: var(--s6) var(--s5); }
.page-hero h1 { font-size: clamp(2rem, 1.3rem + 2.8vw, 3.1rem); max-width: 22ch; }
.page-hero .lede { max-width: 58ch; }
.prose { max-width: var(--measure); }
.prose h2 { font-size: clamp(1.45rem, 1.1rem + 1.4vw, 1.95rem); margin-top: var(--s7); }
.prose h3 { margin-top: var(--s5); }
.prose ul, .prose ol { padding-left: 1.3em; margin: 0 0 var(--s4); }
.prose li { margin-bottom: var(--s2); }
.prose blockquote { margin: var(--s5) 0; padding-left: var(--s4); border-left: 3px solid var(--gold); color: var(--ink); }
.prose table { width: 100%; border-collapse: collapse; margin: var(--s5) 0; font-size: .95em; background: var(--card); }
.prose th, .prose td { text-align: left; vertical-align: top; padding: 12px 14px; border: 1px solid var(--line); }
.prose th { background: var(--bg-alt); color: var(--navy); }
.table-scroll { overflow-x: auto; }
.prose a { color: var(--navy); }
.page-body { padding-bottom: var(--s8); }
.related { margin-top: var(--s7); padding: var(--s5); background: var(--card); border: 1px solid var(--line); border-radius: 10px; max-width: var(--measure); }
.related h2 { font-size: 1.35rem; margin: 0 0 var(--s3); }
.related ul { list-style: none; padding: 0; margin: 0; }
.related a { display: block; padding: 9px 0; min-height: 44px; border-bottom: 1px dotted var(--field); text-decoration: none; font-weight: 600; }
.byline { display: flex; align-items: center; gap: var(--s3); margin: 0 0 var(--s5); color: var(--ink-soft); font-size: .95rem; }
.byline img { width: 48px; height: 48px; border-radius: 50%; object-fit: cover; }

.guide-list { list-style: none; margin: 0; padding: 0; display: grid; gap: var(--s4); }
@media (min-width: 760px) { .guide-list { grid-template-columns: 1fr 1fr; gap: var(--s5); } }
.guide-list li { background: var(--card); border: 1px solid var(--line); border-radius: 10px; padding: var(--s5); }
.guide-list h2 { font-size: 1.25rem; margin: 0 0 var(--s2); }
.guide-list h2 a { text-decoration: none; }
.guide-list h2 a:hover { text-decoration: underline; }
.guide-list p { margin: 0; color: var(--ink-soft); }

/* data panel */
.source-line { font-size: .88rem; color: var(--ink-soft); margin: var(--s3) 0 0; }
.snapshot-note { max-width: 62ch; margin-top: var(--s5); }
.notes { display: grid; gap: var(--s5); margin-top: var(--s6); }
@media (min-width: 900px) { .notes { grid-template-columns: 1fr 1fr; } }
.note-card { background: var(--card); border: 1px solid var(--line); border-radius: 10px; padding: var(--s5); }
.note-card h3 { font-size: 1.2rem; }
.note-card ul { columns: 2; padding-left: 1.1em; margin: 0 0 var(--s3); }
.connection { margin-top: var(--s6); max-width: 62ch; }

/* reviews */
.reviews { display: grid; gap: var(--s5); }
@media (min-width: 900px) { .reviews { grid-template-columns: 1fr 1fr; } }
.review { margin: 0; background: var(--card); border: 1px solid var(--line); border-radius: 10px; padding: var(--s5); position: relative; }
.review blockquote { margin: 0 0 var(--s3); font-size: 1.05em; }
.review blockquote p::before { content: "\201C"; font-family: var(--hand); color: var(--gold); font-size: 3rem; line-height: 0; vertical-align: -.45em; margin-right: 4px; }
.review figcaption { font-weight: 650; color: var(--navy); }
.review .review-source { display: block; font-weight: 400; font-size: .85rem; color: var(--ink-soft); margin-top: var(--s1); }

/* lead forms */
.lead-form { display: grid; gap: var(--s4); }
.lead-form .row { display: grid; gap: var(--s3); }
@media (min-width: 560px) { .lead-form .row-3 { grid-template-columns: 1.4fr 1fr .8fr; } .lead-form .row-2 { grid-template-columns: 1fr 1fr; } }
.lead-form label, .lead-form legend { display: block; font-weight: 650; color: var(--navy); margin-bottom: var(--s1); padding: 0; }
.lead-form .opt { font-weight: 400; color: var(--ink-soft); font-size: .9em; }
.lead-form input[type=text], .lead-form input[type=tel], .lead-form input[type=email], .lead-form input[type=number], .lead-form select, .lead-form textarea {
  width: 100%; min-height: 54px; padding: 11px 13px; font: 400 1.05rem/1.3 var(--serif); color: var(--ink);
  background: #fff; border: 2px solid var(--field); border-radius: var(--radius); }
.lead-form textarea { min-height: 96px; resize: vertical; }
.lead-form input:focus, .lead-form select:focus, .lead-form textarea:focus { border-color: var(--navy); outline: 3px solid rgba(201,146,44,.45); outline-offset: 1px; }
.lead-form input[aria-invalid=true] { border-color: var(--gold); }
.lead-form fieldset { border: 0; margin: 0; padding: 0; min-width: 0; }
.lead-form .choices { margin-bottom: 0; }
.lead-form .choices-4 { grid-template-columns: 1fr 1fr; }
.lead-form .choice { min-height: 54px; font-size: 1rem; }
.check { display: grid !important; grid-template-columns: 26px 1fr; gap: var(--s3); align-items: start; font-weight: 400 !important; color: var(--ink) !important; font-size: .88rem; line-height: 1.45; cursor: pointer; }
.check input { width: 22px; height: 22px; margin: 2px 0 0; accent-color: var(--navy); }
.hp { position: absolute !important; left: -9999px !important; width: 1px; height: 1px; overflow: hidden; }
.form-error { color: var(--gold-ink); font-size: .95rem; margin: 0; }
.js .lead-full { display: none; }
.no-js .lead-js { display: none; }
.lead-js [hidden] { display: none !important; }
.state-other[hidden] { display: none; }
.form-step-title { font-weight: 650; color: var(--navy); font-size: 1.15rem; margin: 0; }
.general-form { max-width: 640px; margin-top: var(--s6); background: var(--card); border: 1px solid var(--line); border-radius: 10px; padding: var(--s5); }

/* town index on 404 / blog */
.town-index { columns: 2; column-gap: var(--s5); list-style: none; padding: 0; margin: 0; }
@media (min-width: 760px) { .town-index { columns: 4; } }
.town-index a { display: block; padding: 7px 0; min-height: 40px; }
.county-block + .county-block { margin-top: var(--s5); }
.small-print { font-size: .88rem; color: var(--ink-soft); }
.founder-kicker { color: var(--gold); font-size: 1.5rem; }
.nj-map .county-leader { stroke: var(--navy); stroke-width: 1.5; stroke-dasharray: 3 3; }
.nj-map .county-leader-end { fill: var(--navy); }
.nj-map .county-leader.is-active { stroke: var(--gold-ink); }
.nj-map .county-leader-end.is-active { fill: var(--gold-ink); }


/* BUILD 2 layout fixes */
.hero-quote { margin: 0 0 var(--s5); background: var(--card); border: 1px solid var(--line); border-left: 4px solid var(--gold); border-radius: 8px; padding: var(--s4) var(--s4) var(--s3); }
.hero-quote blockquote { margin: 0 0 var(--s2); font-size: .95rem; line-height: 1.5; }
.hero-quote blockquote p { margin: 0; }
.hero-quote blockquote p::before { content: "\201C"; font-family: var(--hand); color: var(--gold); font-size: 2.2rem; line-height: 0; vertical-align: -.4em; margin-right: 3px; }
.hero-quote figcaption { font-weight: 650; color: var(--navy); font-size: .95rem; }
.hero-quote--desktop { display: none; }
@media (min-width: 960px) {
  .hero-quote--mobile { display: none; }
  .hero-quote--desktop { display: block; grid-column: 1 / -1; margin: var(--s5) 0 0; }
}
.with-aside { display: grid; gap: var(--s6); }
.page-aside .photo { max-width: 300px; }
.page-aside .video-card { max-width: 220px; margin-top: var(--s6); }
@media (min-width: 960px) {
  .with-aside { grid-template-columns: minmax(0, 1fr) 320px; grid-template-rows: auto 1fr; column-gap: var(--s8); align-items: start; }
  .aside-main-1 { grid-column: 1; grid-row: 1; }
  .aside-main-2 { grid-column: 1; grid-row: 2; }
  .page-aside { grid-column: 2; grid-row: 1 / span 2; align-self: stretch; }
  .page-aside-inner { position: sticky; top: var(--s5); }
}
.guide-grid { display: grid; gap: var(--s6); }
.offer-card { background: var(--card); border: 2px dashed var(--field); border-radius: 10px; padding: var(--s5); max-width: 360px; }
.offer-card img { width: 64px; height: 64px; border-radius: 50%; object-fit: cover; border: 2px solid var(--card); box-shadow: 0 0 0 1px var(--field); margin-bottom: var(--s3); }
.offer-card p { font-weight: 650; color: var(--navy); font-size: 1.1rem; line-height: 1.35; }
.offer-card .offer-card-phone { margin: var(--s3) 0 0; text-align: center; font-size: 1.05rem; }
@media (min-width: 960px) {
  .guide-grid { grid-template-columns: minmax(0, 1fr) 300px; column-gap: var(--s8); align-items: start; }
  .offer-card-wrap { align-self: stretch; }
  .offer-card { position: sticky; top: var(--s5); }
}
@media (max-width: 640px) { .nj-map .county-leader { stroke-width: 3.5; stroke-dasharray: 6 5; } .nj-map .county-leader-end { r: 5; } }
/* a single review spans the full content width; the text keeps a readable measure */
.reviews--single { grid-template-columns: 1fr !important; }
.reviews--single .review { padding: var(--s6) var(--s6) var(--s5); }
.reviews--single .review blockquote, .reviews--single .review figcaption { max-width: 36em; }  /* about 75 characters per line in Literata */
.reviews--single .review blockquote { font-size: 1.12em; }
.reviews + .small-print { margin-top: var(--s4); }


/* =========================================================
   BUILD 4: navy / gold palette components and type touch-ups
   ========================================================= */
:focus-visible { outline: 3px solid var(--navy); outline-offset: 3px; }
/* buttons: primary gold with navy text, secondary navy outline */
.btn-primary { background: var(--gold); color: var(--navy); border-color: var(--gold); }
.btn-primary:hover { background: var(--gold-dark); border-color: var(--gold-dark); color: var(--navy); }
.btn-secondary { background: transparent; color: var(--navy); border-color: var(--navy); }
.btn-secondary:hover { background: var(--navy); color: var(--on-navy); }
/* eyebrows replace the handwritten labels; Caveat stays only on the photo caption (and the drawn signature) */
.hand, .kicker { font-family: var(--serif); font-weight: 650; font-size: .8rem; line-height: 1.3; text-transform: uppercase; letter-spacing: .1em; color: var(--gold-ink); }
.kicker { margin-bottom: var(--s3); }
.from .hand, .city-note .hand { font-size: .8rem; }
.header-note .hand { font-size: .72rem; margin-bottom: 2px; }
.video-card figcaption .hand { font-size: .72rem; margin-right: 4px; }
.founder .hand, .founder-kicker { color: var(--gold); font-size: .8rem; }
.photo figcaption.hand { font-family: var(--hand); font-weight: 600; font-size: 1.45rem; text-transform: none; letter-spacing: .01em; color: var(--navy); }
.salute, .closing { font-family: var(--serif); font-weight: 650; color: var(--navy); font-size: 1.15rem; letter-spacing: 0; }
.step-n { font-family: var(--serif); font-weight: 700; font-size: 2.2rem; line-height: 1; color: var(--gold-ink); }
.sit-mark { font-family: var(--serif); font-weight: 700; font-size: 1.3rem; color: var(--gold-ink); }
.faq-list summary::after { font-family: var(--serif); font-size: 1.6rem; color: var(--gold-ink); }
.county-name a::after { color: var(--gold-ink); }
.review blockquote p::before, .hero-quote blockquote p::before { font-family: var(--serif); color: var(--gold-ink); font-size: 2rem; vertical-align: -.35em; }
/* three-steps band without ruled-paper lines */
.how { background: var(--bg-alt); background-image: none; }
/* form card: white, hairline border, gold top rule; step markers navy and gold */
.reply-card, .offer-card { background: var(--card); border: 1px solid var(--line); border-top: 4px solid var(--gold); border-radius: 10px; }
.progress span { border-color: var(--field); color: var(--ink-soft); }
.progress .is-current { color: var(--navy); }
.progress .is-current span { background: var(--navy); border-color: var(--navy); color: var(--on-navy); }
.progress .is-done span { background: var(--gold); border-color: var(--gold); color: var(--navy); }
.choice:has(input:checked) { border-color: var(--navy); background: #FBF3E3; }
.choice input, .check input { accent-color: var(--navy); }
.field-error, .form-error { color: var(--error); }
.offer-form input[aria-invalid=true], .lead-form input[aria-invalid=true] { border-color: var(--error); }
/* review cards: white with a gold left rule */
.review, .hero-quote { background: var(--card); border: 1px solid var(--line); border-left: 4px solid var(--gold); }
/* mobile bar: navy, Get Offer in gold */
.mobile-bar { background: var(--navy); border-top: 1px solid var(--navy-deep); }
.mobile-bar a { color: var(--on-navy); border-color: rgba(251,249,245,.55); }
.mobile-bar .mobile-bar-offer { background: var(--gold); border-color: var(--gold); color: var(--navy); }
/* footer: navy-deep, warm-white text, gold links */
.site-footer { background: var(--navy-deep); color: var(--on-navy); }
.site-footer a { color: var(--gold); }
.site-footer a:hover { color: var(--on-navy); }
.footer-name { color: var(--on-navy); }
/* founder band: navy, gold accents, warm-white text */
.founder { background: var(--navy); color: var(--on-navy); border-top-color: var(--gold); }
.founder p { color: var(--on-navy); }
/* map: light counties, navy outlines and dots, selected county gold-tinted with a gold outline, navy labels */
.map-figure { background: var(--card); border-color: var(--line); }
.nj-map .ctx-shape { fill: var(--bg-alt); stroke: var(--line); }
.nj-map .ctx-ny { fill: #EEEAE3; }
.nj-map .ctx-label { font-family: var(--serif); font-size: 13px; font-weight: 600; letter-spacing: .1em; fill: var(--ink-soft); }
.nj-map .county path { fill: #EFEAE0; stroke: var(--navy); stroke-width: 1.3; }
.nj-map .county:hover path { fill: #E6DFD1; }
.nj-map .county.is-active path { fill: var(--gold-tint); stroke: var(--gold); stroke-width: 2.4; }
.nj-map .county-label { font-family: var(--serif); font-weight: 700; font-size: 19px; letter-spacing: .08em; fill: var(--navy); stroke: #FFFFFF; stroke-width: 5px; }
.nj-map .county-label.is-active { fill: var(--navy); }
.nj-map .town .dot { fill: var(--navy); stroke: #FFFFFF; }
.nj-map .town.is-active .dot { fill: var(--navy); }
.nj-map .town:hover .dot, .nj-map .town:focus-visible .dot, .nj-map .town.is-hot .dot { fill: var(--gold); stroke: var(--navy); }
.nj-map .town.is-current .dot { fill: var(--gold); stroke: var(--navy); }
.nj-map .current-marker .ring { stroke: var(--gold); }
.nj-map .town-label { font-family: var(--serif); font-weight: 700; font-size: 24px; fill: var(--navy); stroke: #FFFFFF; }
.nj-map .county-leader, .nj-map .county-leader.is-active { stroke: var(--navy); }
.nj-map .county-leader-end, .nj-map .county-leader-end.is-active { fill: var(--navy); }
.map-tabs [role=tab] { border-color: var(--field); background: var(--card); color: var(--navy); }
.map-tabs [role=tab]:hover { border-color: var(--navy); }
.map-tabs [role=tab][aria-selected=true] { background: var(--navy); border-color: var(--navy); color: var(--on-navy); }
@media (max-width: 640px) {
  .nj-map .county-label { font-size: 28px; stroke-width: 7px; }
  .nj-map .ctx-label { font-size: 19px; }
  .nj-map .town-label { font-size: 34px; stroke-width: 8px; }
}

/* =========================================================
   BUILD 5: statewide map (21 counties). Sizes are in map units scaled by --z (1 on the statewide map,
   the crop's share of the state on town/county maps); strokes stay a constant screen width.
   ========================================================= */
.nj-map .ctx-shape, .nj-map .county path, .nj-map .county-leader, .nj-map .current-marker .ring { vector-effect: non-scaling-stroke; }
.nj-map .ctx-shape { stroke-width: 1; filter: none; }
.nj-map .county path { stroke-width: 1.1; filter: none; }
.nj-map .county.is-active path { stroke-width: 2.2; }
.nj-map .county-label { font-size: calc(10.5px * var(--z, 1)); stroke-width: calc(3px * var(--z, 1)); letter-spacing: .06em; }
.nj-map .ctx-label { font-size: calc(9px * var(--z, 1)); letter-spacing: .12em; }
.nj-map .town .hit { r: calc(6px * var(--z, 1)); }
.nj-map .town .dot, .nj-map .town.is-active .dot { r: calc(2.6px * var(--z, 1)); stroke-width: calc(.8px * var(--z, 1)); }
.nj-map .town:hover .dot, .nj-map .town:focus-visible .dot, .nj-map .town.is-hot .dot { r: calc(4px * var(--z, 1)); }
.nj-map .town.is-current .dot { r: calc(4px * var(--z, 1)); }
.nj-map .current-marker .ring { r: calc(8px * var(--z, 1)); stroke-width: 2; stroke-dasharray: none; filter: none; fill: none; }
.nj-map .town-label, .nj-map .current-marker .town-label { font-size: calc(12px * var(--z, 1)); stroke-width: calc(3.5px * var(--z, 1)); text-anchor: middle; transform: translateY(calc(-11px * var(--z, 1))); }
.nj-map .county-leader { stroke-width: 1; stroke-dasharray: 3 3; }
.map-select { display: none; }
.map-select span { display: block; font-weight: 650; color: var(--navy); margin-bottom: var(--s1); font-size: .9rem; }
.map-select select { width: 100%; min-height: 50px; padding: 10px 12px; font: 600 1.05rem/1.2 var(--serif); color: var(--navy); background: var(--card); border: 2px solid var(--field); border-radius: var(--radius); }
.map-tabs [role=tab] { min-height: 40px; padding: 6px 13px; font-size: .9rem; }
@media (max-width: 640px) {
  .js .map-tabs { display: none !important; }
  .js .map-select:not([hidden]) { display: block; }
  .nj-map .county-label { font-size: calc(15px * var(--z, 1)); stroke-width: calc(4px * var(--z, 1)); }
  .nj-map .ctx-label { font-size: calc(12px * var(--z, 1)); }
  .nj-map .town .dot, .nj-map .town.is-active .dot { r: calc(3.6px * var(--z, 1)); }
  .nj-map .town.is-current .dot { r: calc(5px * var(--z, 1)); }
  .nj-map .current-marker .ring { r: calc(10px * var(--z, 1)); }
  .nj-map .town-label, .nj-map .current-marker .town-label { font-size: calc(16px * var(--z, 1)); transform: translateY(calc(-14px * var(--z, 1))); }
}
@media (min-width: 900px) { .mapwrap:not(.mapwrap--small) { grid-template-columns: minmax(0, 1fr) 340px; } .mapwrap:not(.mapwrap--small) .map-figure { max-width: 620px; } }
.other-munis ul { columns: 2; padding-left: 1.1em; margin: 0 0 var(--s3); }
@media (min-width: 760px) { .other-munis ul { columns: 3; } }
@media (min-width: 641px) { .map-tabs { flex-wrap: wrap; overflow: visible; } }


/* BUILD 5B: mobile overflow, map height and label management */
.city-grid > *, .two-col > *, .notes > *, .city-map-grid > *, .with-aside > *, .guide-grid > *, .faq-grid > *, .mapwrap > * { min-width: 0; }
.note-card li, .town-list a, .nearby-list a, .other-munis li, .prose { overflow-wrap: anywhere; }
@media (max-width: 479px) { .note-card ul, .other-munis ul { columns: 1; } }
@media (min-width: 1024px) {
  .mapwrap:not(.mapwrap--small) { align-items: start; }
  .mapwrap:not(.mapwrap--small) .map-figure { max-width: none; }
  .mapwrap:not(.mapwrap--small) .nj-map { max-height: 760px; width: auto; max-width: 100%; margin: 0 auto; }
}
.nj-map .county-label, .nj-map .ctx-label, .nj-map .town-label { paint-order: stroke; stroke: #FFFFFF; stroke-linejoin: round; }
.nj-map .lbl-hidden { display: none; }
.nj-map .current-marker .town-label.below { transform: translateY(calc(19px * var(--z, 1))); }

/* town marker label: positioned with dy (measurable by getBBox), not a CSS transform */
.nj-map .town-label, .nj-map .current-marker .town-label, .nj-map .current-marker .town-label.below { transform: none; }

/* BUILD 5C: three-step lead form and in-place thank-you */
.lead-form .choices-wide { grid-template-columns: 1fr; }
@media (min-width: 480px) { .lead-form .choices-wide { grid-template-columns: 1fr 1fr; } }
.lead-form .choice span { min-width: 0; overflow-wrap: anywhere; }
.lead-screen { display: grid; gap: var(--s4); min-width: 0; }
.screen-h { font-size: 1.25rem; margin: 0; color: var(--navy); }
.screen-h:focus { outline: none; }
.saved-note { margin: 0; padding: var(--s3) var(--s4); background: #FBF3E3; border-left: 4px solid var(--gold); border-radius: var(--radius); font-size: .98rem; }
.lead-form .step-actions .btn { min-height: 56px; }
.lead-form .btn-back { flex: 0 0 auto; }
.lead-thanks { padding: var(--s4) 0; }
.lead-thanks:focus { outline: none; }
.lead-thanks p { font-size: 1.1rem; }
.thanks-actions { display: flex; gap: var(--s3); flex-wrap: wrap; }
.progress { flex-wrap: wrap; row-gap: var(--s2); }

/* BUILD 5C: map labels are placed at build time for each font size; show the set that matches the CSS sizes */
.nj-map .lbl-m { display: none; }
@media (max-width: 640px) { .nj-map .lbl-d { display: none; } .nj-map .lbl-m { display: inline; } }
.saved-note a[href^="tel:"], .lead-thanks a[href^="tel:"] { white-space: nowrap; }
@media (max-width: 479px) { .lead-form .progress { gap: var(--s3); font-size: .86rem; } .lead-form .progress span { width: 24px; height: 24px; font-size: .8rem; } }