/* reportvacanthomes.com: the street at dusk. Type and color come from street signs and the neighborhood.
   One family (Overpass, after highway-sign lettering). Palette below and its tints only; Brick lives only inside the
   street illustration. No shadows, no gradients, no uppercase, no centered text. Motion: only the visitor-driven
   slider over the third house. */
@font-face {
  font-family: "Overpass";
  font-style: normal;
  font-display: swap;
  font-weight: 100 900;
  src: url(/assets/fonts/overpass-latin-wght-normal.woff2) format("woff2-variations"), url(/assets/fonts/overpass-latin-wght-normal.woff2) format("woff2");
  unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
}

:root {
  --green: #1E6B45;      /* Sign Green: the H1 sign, primary buttons, links on light backgrounds */
  --dusk: #2B3A55;       /* Dusk: the hero band and the sky */
  --asphalt: #24282E;    /* Asphalt: body text */
  --sidewalk: #F0F1EE;   /* Sidewalk: page background, text on Dusk */
  --curb: #D9DCD6;       /* Curb: rules and surfaces */
  --porch: #F2B632;      /* Porch Light: lit windows, the hero button, the slider handle, the focus ring. Never text on light. */
  --white: #FFFFFF;      /* the sign's lettering and inner border (Sidewalk's full tint) */
  --asphalt-60: #5F6267; /* Asphalt tint: secondary text and input borders (AA on Sidewalk and white) */
  --green-10: #E9F0EC;   /* Sign Green tint: quiet surfaces */
  --porch-25: #F5C865;   /* Porch Light tint: hover on the Porch button */
  --porch-12: #FCF0D3;   /* Porch Light tint: the error surface (Asphalt text on it) */
  --dusk-80: #D5D8DD;    /* Dusk tint: muted text on Dusk */
  --font: "Overpass", "Overpass Fallback", system-ui, -apple-system, "Segoe UI", Roboto, Arial, sans-serif;
  --gut: 16px;
  --max: 75rem;
  --radius: 8px;
}
@font-face { font-family: "Overpass Fallback"; src: local("Arial"); size-adjust: 97%; ascent-override: 92%; descent-override: 38%; line-gap-override: 0%; }

*, *::before, *::after { box-sizing: border-box; }
html { -webkit-text-size-adjust: 100%; text-size-adjust: 100%; }
body { margin: 0; background: var(--sidewalk); color: var(--asphalt); font-family: var(--font); font-size: 1.125rem; line-height: 1.6; font-weight: 400; }
img, svg { max-width: 100%; }
h1, h2, h3 { font-weight: 800; line-height: 1.1; letter-spacing: -0.01em; margin: 0; }
h2 { font-size: clamp(1.625rem, 1.3rem + 1.2vw, 2.25rem); margin-top: 2.75rem; margin-bottom: 0.75rem; }
h3 { font-size: 1.25rem; margin-top: 1.75rem; margin-bottom: 0.5rem; line-height: 1.2; }
p { margin: 0 0 1em; }
a { color: var(--green); text-decoration-thickness: 1px; text-underline-offset: 0.16em; }
a:hover { text-decoration-thickness: 3px; }
strong { font-weight: 700; }

/* focus: a 3px Porch Light ring plus a 2px Asphalt inner ring, everywhere, without shadows */
:focus-visible { outline: 3px solid var(--porch); outline-offset: 2px; }
a:focus-visible { outline-offset: 0; background: var(--asphalt); color: var(--sidewalk); text-decoration: none; border-radius: 2px; padding: 2px; margin: -2px; -webkit-box-decoration-break: clone; box-decoration-break: clone; }
.btn:focus-visible, input:focus-visible, select:focus-visible, textarea:focus-visible { outline-offset: 0; border-color: var(--asphalt); }
.choice:has(input:focus-visible) { outline: 3px solid var(--porch); outline-offset: 0; border-color: var(--asphalt); }
.choice:has(input:focus-visible) input:focus-visible { outline: none; }

.wrap { max-width: calc(var(--max) + 2 * var(--gut)); margin: 0 auto; padding-left: var(--gut); padding-right: var(--gut); }
@media (min-width: 760px) { :root { --gut: 40px; } }
.skip { position: absolute; left: -9999px; top: 0; z-index: 10; background: var(--asphalt); color: var(--sidewalk); padding: 0.5rem 0.75rem; border-radius: var(--radius); }
.skip:focus { left: 8px; top: 8px; }
.hp, .sr-only { position: absolute !important; width: 1px; height: 1px; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; }

/* ---------- header ---------- */
.site-header { background: var(--dusk); color: var(--sidewalk); border-bottom: 1px solid #3E4C66; }
.header-row { display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: 2px 24px; padding-top: 10px; padding-bottom: 8px; }
.wordmark { display: inline-flex; align-items: center; gap: 8px; color: var(--sidewalk); font-weight: 800; font-size: 1.0625rem; letter-spacing: -0.01em; text-decoration: none; line-height: 1; padding: 6px 0; }
.wordmark svg { flex: none; }
.site-nav ul { list-style: none; margin: 0; padding: 0; display: flex; flex-wrap: wrap; gap: 0 18px; }
.site-nav a { color: var(--sidewalk); text-decoration: none; font-size: 0.9375rem; font-weight: 600; display: inline-block; padding: 6px 0; border-bottom: 2px solid transparent; }
.site-nav a:hover { border-bottom-color: var(--sidewalk); }
.site-nav a[aria-current] { border-bottom-color: var(--porch); }
@media (max-width: 759px) {
  .header-row { padding-top: 6px; padding-bottom: 4px; }
  .site-nav ul { gap: 0 12px; }
  .site-nav a { font-size: 0.875rem; padding: 4px 0; }
}

/* ---------- the sign (every H1) ---------- */
.sign { position: relative; display: inline-block; max-width: 100%; background: var(--green); color: var(--white); border-radius: 10px; padding: 0.34em 0.5em 0.22em; font-size: clamp(1.875rem, 1.35rem + 2.2vw, 3rem); line-height: 1.06; letter-spacing: -0.015em; }
.sign::before { content: ""; position: absolute; inset: 5px; border: 2px solid var(--white); border-radius: 6px; pointer-events: none; }

/* ---------- the hero band (home) ---------- */
.hero-band { background: var(--dusk); color: var(--sidewalk); position: relative; }
.hero-grid { display: grid; grid-template-columns: minmax(0, 1fr); padding: 14px 0 0; max-width: none; }
.hero-grid > * { min-width: 0; }
.hero-grid > .hero-line, .hero-start, .owner-link { padding-left: var(--gut); padding-right: var(--gut); }
.hero-sign { justify-self: start; margin-left: var(--gut); max-width: calc(100% - 2 * var(--gut)); font-size: 2.75rem; padding: 0.3em 0.36em 0.2em; }
.hero-grid > h1.hero-sign { padding-left: 0.36em; padding-right: 0.36em; }
.hero-line { margin: 12px 0 10px; font-size: 1rem; line-height: 1.42; max-width: 40ch; }
@media (max-width: 379px) { .hero-line { font-size: 0.9375rem; } }
.street { margin: 0; position: relative; --x0: 0; --vbw: 680; }
.street-crop { position: relative; z-index: 1; }
.fix-slider { z-index: 2; }
/* below 600px the street is cropped to the three middle houses and the streetlight (viewBox x 156 to 680) by CSS, so
   the crop holds without JavaScript; the slider and its label follow through --x0 and --vbw */
@media (max-width: 599px) {
  .street { --x0: 156; --vbw: 524; }
  .street-crop { overflow: hidden; }
  .street-crop .street-svg { width: calc(680 / 524 * 100%); max-width: none; margin-left: calc(-156 / 524 * 100%); }
  .hero-band .hero-start { padding-top: 34px; }   /* Build 3: at least 20px between the slider label and "Street address" */
}
.street-svg { display: block; width: 100%; height: auto; }
.hero-start { background: var(--asphalt); padding-top: 2px; padding-bottom: 8px; }
.hero-label { display: block; font-weight: 700; font-size: 1rem; margin-bottom: 4px; }
.inline-row { display: flex; gap: 8px; }
.inline-row input { flex: 1 1 auto; min-width: 0; }
.inline-row .btn { flex: none; }
.owner-link { background: var(--asphalt); margin: 0; padding-top: 0; padding-bottom: 14px; font-size: 0.9375rem; }
.owner-link a, .hero-band a { color: var(--sidewalk); }
.hero-band .form-error { background: var(--porch-12); color: var(--asphalt); }
.ground { display: none; }

/* the slider: a native range over the third house's yard; the label sits on the road below it */
.fix-slider { position: absolute; inset: 0; pointer-events: none; }
.fix-slider[hidden] { display: none; }
.fix-slider input[type=range] { pointer-events: auto; position: absolute; left: calc((286 - var(--x0)) / var(--vbw) * 100% - 14px); width: calc(208 / var(--vbw) * 100% + 28px); top: calc(77.54% - 22px); height: 44px; margin: 0; background: transparent; -webkit-appearance: none; appearance: none; cursor: ew-resize; border: 2px solid transparent; border-radius: var(--radius); touch-action: pan-y; }
.fix-slider input[type=range]::-webkit-slider-runnable-track { height: 6px; background: var(--asphalt); border: 1px solid var(--sidewalk); border-radius: 3px; }
.fix-slider input[type=range]::-moz-range-track { height: 4px; background: var(--asphalt); border: 1px solid var(--sidewalk); border-radius: 3px; }
.fix-slider input[type=range]::-webkit-slider-thumb { -webkit-appearance: none; appearance: none; width: 28px; height: 28px; margin-top: -12px; border-radius: 50%; background: var(--porch); border: 2px solid var(--asphalt); }
.fix-slider input[type=range]::-moz-range-thumb { width: 24px; height: 24px; border-radius: 50%; background: var(--porch); border: 2px solid var(--asphalt); }
.fix-slider label { position: absolute; left: calc((286 - var(--x0)) / var(--vbw) * 100%); top: calc(77.54% + 22px + 12px); font-size: 0.8125rem; line-height: 1.2; font-weight: 600; color: var(--sidewalk); white-space: nowrap; }   /* 12px below the 44px input: 3px ring + 9px gap */

@media (min-width: 960px) {
  /* Build 2: the street takes the right column up to the band's right edge (up to 900px wide), so the third house is
     at least 260px wide at 1280. The ground continues left from the drawing to the band's edge. */
  .hero-band { overflow: hidden; }
  .hero-grid { grid-template-columns: minmax(0, 22rem) minmax(0, 1fr); column-gap: 20px; padding: 40px 0 0 max(var(--gut), calc(50% - 37.5rem)); max-width: none; margin: 0; position: relative; z-index: 1; }
  .hero-grid > .hero-line, .hero-start, .owner-link { padding-left: 0; padding-right: 0; background: none; }
  .hero-sign { grid-column: 1 / -1; margin-left: 0; max-width: calc(100% - var(--gut)); font-size: 4.5rem; }
  .hero-grid > h1.hero-sign { padding: 0.3em 0.34em 0.2em; }
  .hero-line { grid-column: 1; grid-row: 2; font-size: 1.25rem; line-height: 1.5; margin: 28px 0 20px; }
  .street { grid-column: 2; grid-row: 2 / span 3; align-self: end; justify-self: end; width: 100%; max-width: 900px; margin-top: 28px; }
  .hero-start { grid-column: 1; grid-row: 3; }
  .owner-link { grid-column: 1; grid-row: 4; padding-top: 12px; margin-bottom: calc(min(900px, 100vw - 412px) * 76 / 680 + 28px); }
  .hero-label { font-size: 1.0625rem; }
  .ground { display: block; position: absolute; right: 0; bottom: 0; width: 100vw; height: calc(76 / 276 * 100%); background: var(--asphalt); z-index: 0; }
  .ground i { display: block; }
  .g-lawn { height: calc(14 / 76 * 100%); background: var(--green); }
  .g-walk { height: calc(14 / 76 * 100%); background: var(--curb); }
  .g-curb { height: calc(4 / 76 * 100%); background: var(--sidewalk); }
  .fix-slider label { font-size: 0.9375rem; }
}

/* ---------- buttons and fields ---------- */
.btn { display: inline-flex; align-items: center; justify-content: flex-start; text-align: left; min-height: 48px; padding: 0.55em 1.2em 0.45em; border-radius: var(--radius); border: 2px solid var(--green); background: var(--green); color: var(--white); font: inherit; font-weight: 800; font-size: 1.0625rem; line-height: 1.1; text-decoration: none; cursor: pointer; }
.btn:hover { background: var(--asphalt); border-color: var(--asphalt); text-decoration: none; }
.btn-porch { background: var(--porch); border-color: var(--porch); color: var(--asphalt); }
.btn-porch:hover { background: var(--porch-25); border-color: var(--porch-25); color: var(--asphalt); }
.btn[disabled] { cursor: progress; }
input[type=text], input[type=email], input[type=tel], input[type=file], select, textarea { width: 100%; min-height: 48px; padding: 0.55rem 0.75rem 0.45rem; font: inherit; font-size: 1.0625rem; color: var(--asphalt); background: var(--white); border: 2px solid var(--asphalt-60); border-radius: var(--radius); }
input[type=file] { padding: 0.6rem; font-size: 1rem; }
textarea { min-height: 7rem; resize: vertical; }
.hero-band input[type=text] { border-color: var(--sidewalk); }
fieldset { border: 0; margin: 0 0 1.5rem; padding: 0; min-width: 0; }
legend { font-weight: 800; font-size: 1.25rem; line-height: 1.2; padding: 0; margin-bottom: 0.75rem; }
.fgrid { display: grid; grid-template-columns: minmax(0, 1fr); gap: 14px 16px; }
@media (min-width: 640px) { .fgrid { grid-template-columns: repeat(2, minmax(0, 1fr)); } .field-wide { grid-column: 1 / -1; } }
.field label, .label-row { display: block; font-weight: 700; font-size: 1rem; margin-bottom: 4px; }
.label-row label { display: inline; margin: 0; }
.opt { font-weight: 400; color: var(--asphalt-60); font-size: 0.9375rem; }
.field-hint { margin: 0 0 6px; font-size: 0.9375rem; color: var(--asphalt-60); }
.field-note, .consent { margin: 0; font-size: 0.9375rem; line-height: 1.5; color: var(--asphalt-60); }
.choices { display: flex; flex-wrap: wrap; gap: 8px; }
.choice { display: inline-flex; align-items: center; gap: 10px; min-height: 48px; padding: 8px 14px 6px 12px; border: 2px solid var(--curb); border-radius: var(--radius); background: var(--white); cursor: pointer; line-height: 1.3; font-size: 1rem; }
.choice:hover { border-color: var(--asphalt-60); }
.choice input { width: 20px; height: 20px; margin: 0; flex: none; accent-color: var(--green); }
.choice:has(input:checked) { border-color: var(--green); background: var(--green-10); }
.form-error { margin: 0 0 1rem; padding: 10px 14px 8px; border-left: 6px solid var(--porch); background: var(--porch-12); color: var(--asphalt); font-weight: 600; font-size: 1rem; }
.hero-error { margin: 8px 0 0; }
.form-body { padding-top: 28px; padding-bottom: 8px; }
.tip-form:not(.has-hero) .form-body { padding-top: 0; }
.js .tip-form[data-collapsible] .tip-rest:not(.is-open) { display: none; }
.thanks { display: none; }
.thanks:target, .thanks.is-on { display: block; }
.thanks-text { font-size: 1.5rem; font-weight: 800; line-height: 1.25; margin: 0; padding: 20px 0 20px 18px; border-left: 6px solid var(--green); }
.thanks.wrap .thanks-text { margin: 28px 0; }
.thanks:focus { outline: none; }
.thanks:focus-visible .thanks-text { outline: 3px solid var(--porch); }

/* ---------- page head (inner pages) ---------- */
.page-head { padding: 28px 0 8px; border-bottom: 1px solid var(--curb); }
.crumbs ol { list-style: none; margin: 0 0 14px; padding: 0; display: flex; flex-wrap: wrap; gap: 0 8px; font-size: 0.9375rem; }
.crumbs li + li::before { content: "/"; color: var(--asphalt-60); margin-right: 8px; }
.crumbs span[aria-current] { color: var(--asphalt-60); }
.lede { font-size: 1.25rem; line-height: 1.5; max-width: 54ch; margin: 18px 0 18px; }

/* ---------- content ---------- */
.content { padding: 8px 0 48px; }
.grid12 { display: grid; grid-template-columns: minmax(0, 1fr); column-gap: 24px; }
@media (min-width: 960px) { .grid12 { grid-template-columns: repeat(12, minmax(0, 1fr)); } .grid12 > .main-col { grid-column: 1 / span 8; } .grid12 > .side-col { grid-column: 10 / span 3; padding-top: 2.75rem; } }
.prose { max-width: 66ch; }
.prose ul, .prose ol { padding-left: 1.25em; margin: 0 0 1em; }
.prose li { margin-bottom: 0.4em; }
.prose li::marker { color: var(--green); font-weight: 800; }
.answer { font-size: 1.1875rem; }
.checked { font-size: 1rem; color: var(--asphalt-60); margin: 18px 0 0; }
.rule { border: 0; border-top: 1px solid var(--curb); margin: 2.5rem 0; }
.steps { list-style: none; padding: 0; margin: 0 0 1em; counter-reset: s; max-width: 66ch; }
.steps li { counter-increment: s; position: relative; padding: 0 0 18px 56px; min-height: 44px; }
.steps li::before { content: counter(s); position: absolute; left: 0; top: -2px; width: 40px; height: 40px; display: flex; align-items: center; justify-content: center; padding-top: 4px; border-radius: 6px; background: var(--green); color: var(--white); font-weight: 800; font-size: 1.25rem; outline: 2px solid var(--white); outline-offset: -5px; }
.notices { max-width: 66ch; margin: 2.5rem 0 0; }
.notice { padding: 12px 16px 10px 16px; border-left: 6px solid var(--porch); background: var(--white); margin: 0 0 12px; font-size: 1rem; line-height: 1.55; }
.notice-notgov { border-left-color: var(--asphalt); }
.pointer { font-size: 1.125rem; }
.ways { list-style: none; padding: 0; margin: 0 0 1em; max-width: 66ch; }
.ways li { padding: 12px 0 10px; border-top: 1px solid var(--curb); }
.ways li:last-child { border-bottom: 1px solid var(--curb); }
.ways strong { display: block; font-size: 1.125rem; }
.hub-list { list-style: none; padding: 0; margin: 0 0 1em; max-width: 66ch; }
.hub-list li { padding: 14px 0 12px; border-top: 1px solid var(--curb); }
.hub-list li:last-child { border-bottom: 1px solid var(--curb); }
.hub-list a { font-weight: 800; font-size: 1.25rem; }
.hub-list p { margin: 4px 0 0; font-size: 1rem; color: var(--asphalt-60); }
/* Build 5: the hub's row of letter jump links (one per first letter of the states listed) */
.letter-row ol { list-style: none; margin: 0 0 1.5em; padding: 0; display: flex; flex-wrap: wrap; gap: 6px; max-width: 66ch; }
.letter-row a { display: block; min-width: 44px; min-height: 44px; padding: 10px 14px 6px; border: 1px solid var(--curb); border-radius: var(--radius); background: var(--white); font-weight: 800; line-height: 1.4; text-decoration: none; }
.letter-row a:hover { border-color: var(--green); text-decoration: underline; }
.hub-list li[id] { scroll-margin-top: 16px; }
.sources { margin-top: 3rem; padding-top: 1.5rem; border-top: 1px solid var(--curb); }
.sources h2 { margin-top: 0; font-size: 1.375rem; }
.sources ol { padding-left: 1.4em; font-size: 0.9375rem; line-height: 1.5; }
.sources li { margin-bottom: 0.6em; overflow-wrap: anywhere; }
.src-host { color: var(--asphalt-60); }
.author { max-width: 66ch; margin-top: 3rem; padding-top: 1.25rem; border-top: 3px solid var(--green); font-size: 1rem; }
.author p { margin: 0 0 0.4em; }
.updated { color: var(--asphalt-60); }
.form-section { max-width: 52rem; }

/* ---------- report band (inner pages) ---------- */
.report-band { background: var(--dusk); color: var(--sidewalk); padding: 36px 0 40px; }
.band-row { display: grid; grid-template-columns: minmax(0, 1fr); gap: 6px 24px; align-items: center; }
.report-band h2 { margin: 0; font-size: clamp(1.5rem, 1.2rem + 1vw, 2rem); }
.report-band p { margin: 0 0 10px; }
.report-band .btn { justify-self: start; }
@media (min-width: 960px) { .band-row { grid-template-columns: repeat(12, minmax(0, 1fr)); } .report-band h2 { grid-column: 1 / span 7; } .report-band p { grid-column: 1 / span 7; grid-row: 2; } .report-band .btn { grid-column: 9 / span 4; grid-row: 1 / span 2; } }

/* ---------- footer ---------- */
.site-footer { background: var(--asphalt); color: var(--sidewalk); padding: 36px 0 20px; font-size: 1rem; }
.site-footer a { color: var(--sidewalk); }
.footer-grid { display: grid; grid-template-columns: minmax(0, 1fr); gap: 20px 24px; }
@media (min-width: 960px) { .footer-grid { grid-template-columns: repeat(12, minmax(0, 1fr)); } .footer-about { grid-column: 1 / span 6; } .footer-grid nav { grid-column: 8 / span 5; } }
.footer-links { list-style: none; margin: 0; padding: 0; columns: 2; column-gap: 24px; }
.footer-links li { margin-bottom: 8px; break-inside: avoid; }
.footer-fine { margin-top: 20px; padding-top: 14px; border-top: 1px solid #4A4E54; font-size: 0.9375rem; color: var(--dusk-80); }
.footer-fine p { margin: 0; }
.site-footer :focus-visible, .report-band :focus-visible, .site-header :focus-visible, .hero-band :focus-visible { outline-color: var(--porch); }

@media (prefers-reduced-motion: reduce) { * { scroll-behavior: auto !important; } }

/* ---------- Build 2: home below the hero ---------- */
/* the route: three sign plates on one lane (Asphalt strip, Porch Light dashes). A row at 900px and up; stacked below
   with the lane down the left edge. The step number is a CSS counter inside each plate. */
.home-below .after-honest { max-width: 66ch; margin-top: 18px; }
.route { list-style: none; margin: 4px 0 0; padding: 0 0 0 44px; position: relative; display: grid; grid-template-columns: minmax(0, 1fr); gap: 16px; counter-reset: s; }
.route::before { content: ""; position: absolute; left: 0; top: 0; bottom: 0; width: 26px; background: var(--asphalt); }
.route::after { content: ""; position: absolute; left: 11px; top: 6px; bottom: 6px; border-left: 4px dashed var(--porch); }
.plate { position: relative; z-index: 1; counter-increment: s; display: flex; align-items: center; min-height: 84px; padding: 16px 20px 14px 78px; background: var(--green); color: var(--white); border-radius: 10px; outline: 2px solid var(--white); outline-offset: -6px; font-weight: 800; font-size: 1.1875rem; line-height: 1.3; }
.plate::before { content: counter(s); position: absolute; left: 18px; top: 50%; transform: translateY(-50%); width: 40px; padding-top: 4px; border-right: 2px solid var(--white); font-size: 2.25rem; line-height: 1; }
@media (min-width: 900px) {
  .route { grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 28px; padding: 0; margin-top: 12px; }
  .route::before { left: 0; right: 0; top: 50%; bottom: auto; width: auto; height: 30px; transform: translateY(-50%); }
  .route::after { left: 6px; right: 6px; top: 50%; bottom: auto; border-left: 0; border-top: 4px dashed var(--porch); transform: translateY(-50%); }
  .plate { min-height: 112px; font-size: 1.25rem; }
}
/* the signpost beside "Who should I call about a vacant house?" */
.call-row { display: grid; grid-template-columns: minmax(0, 1fr); gap: 20px; }
.call-text { max-width: 66ch; }
.signpost { list-style: none; margin: 0; padding: 14px 0 36px; position: relative; display: flex; flex-direction: column; gap: 12px; max-width: 30rem; }
.signpost::before { content: ""; position: absolute; left: 50%; top: 0; bottom: 0; width: 12px; margin-left: -6px; background: var(--asphalt); border-radius: 4px 4px 0 0; }
.blade { position: relative; z-index: 1; width: 82%; margin-left: 12%; padding: 11px 40px 9px 16px; font-weight: 800; font-size: 1rem; line-height: 1.3; clip-path: polygon(0 0, calc(100% - 24px) 0, 100% 50%, calc(100% - 24px) 100%, 0 100%); }
.blade-left { margin-left: 6%; padding: 11px 16px 9px 40px; clip-path: polygon(24px 0, 100% 0, 100% 100%, 24px 100%, 0 50%); }
.blade-asphalt { background: var(--asphalt); color: var(--sidewalk); }
.blade-green { background: var(--green); color: var(--white); }
.blade-curb { background: var(--curb); color: var(--asphalt); }
.blade-porch { background: var(--porch); color: var(--asphalt); }
.blade-porch a { color: var(--asphalt); text-decoration-thickness: 2px; }
@media (min-width: 900px) {
  .call-row { grid-template-columns: minmax(0, 7fr) minmax(0, 5fr); gap: 48px; align-items: start; }
  .signpost { margin-top: -8px; }
}
@media (min-width: 1100px) {
  .notices { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 24px; max-width: none; }
  .notices .notice { margin: 0; }
}

/* ---------- Build 2: inner pages ---------- */
/* the H1 sign on a slim Dusk band, the street strip along its bottom */
.page-band { background: var(--dusk); color: var(--sidewalk); padding: 20px 0 0; border-bottom: 0; }
.page-band .crumbs a { color: var(--sidewalk); }
.page-band .crumbs li + li::before, .page-band .crumbs span[aria-current] { color: var(--dusk-80); }
.page-band .sign { margin-bottom: 14px; }
.strip { display: block; width: 100%; height: 100px; }   /* Build 3: one 1920 x 100 street, sliced from the center at 1:1 */
.page-intro .lede { margin: 22px 0 6px; }
/* "On this page": a closed details list under the lede below 1100px; a sticky rail beside the content at 1100px and up */
.toc { list-style: none; margin: 0; padding: 0; }
.toc li { margin: 0; }
.toc a { display: block; padding: 7px 0 5px 12px; border-left: 3px solid var(--curb); font-size: 0.9375rem; line-height: 1.35; text-decoration: none; color: var(--asphalt); }
.toc a:hover { text-decoration: underline; }
.toc a[aria-current] { border-left-color: var(--green); color: var(--green); font-weight: 800; }
.toc-details { margin: 10px 0 4px; border-top: 1px solid var(--curb); border-bottom: 1px solid var(--curb); max-width: 66ch; }
.toc-details summary { cursor: pointer; padding: 12px 0 10px; font-weight: 800; font-size: 1.0625rem; }
.toc-details[open] .toc { padding-bottom: 12px; }
.page-grid { display: block; }
.page-main .content { padding-top: 0; }
.page-main .wrap { padding-left: 0; padding-right: 0; max-width: none; margin: 0; }
.rail { display: none; }
.btn-compact { min-height: 44px; font-size: 1rem; padding: 0.5em 1em 0.4em; }
@media (min-width: 1100px) {
  .toc-details { display: none; }
  .page-grid { display: grid; grid-template-columns: minmax(0, 66ch) 16rem; justify-content: space-between; column-gap: 48px; align-items: start; }
  .page-main { min-width: 0; max-width: 66ch; }
  .rail { display: block; position: sticky; top: 24px; padding: 2.75rem 0 24px; }
  .rail-h { margin: 0 0 8px; font-weight: 800; font-size: 1rem; }
  .rail .btn { margin-top: 20px; }
}