/* Direct Warehouse Buyers: shared stylesheet for every page.
   Look E, Dark and cinematic (DESIGN.md): the truck court after dark, amber as the dock light.
   Geist (SIL OFL) for everything. Every text pair passes WCAG AA; the ratios are in DESIGN.md
   (tools/redesign/contrast.py). Re-theme by editing the :root tokens. */

@font-face{font-family:'Geist';font-style:normal;font-weight:100 900;font-display:swap;src:url('/fonts/geist-latin-wght-normal.woff2') format('woff2')}

:root{
  /* grounds: night (the truck court), a second ground for alternate bands, deep for the footer and drawing */
  --night:#070b12; --ground2:#151e2b; --deep:#05080d;
  /* solid plates: on night, and on the second ground */
  --plate:#18202c; --plate2:#1d2735; --form-panel:#0c111a;
  --line:rgba(255,255,255,.10); --line-strong:rgba(255,255,255,.16); --input-line:rgba(255,255,255,.38);
  /* text */
  --text:#f4f6f9; --body:#c9d0d9; --muted:#a9b2bf; --faint:#8b95a4;
  /* the signal: dock light (DESIGN.md, section 3) */
  --amber:#ffa23a; --amber-ink:#120a02; --amber-press:#f08c1f; --link:#ffb866; --lit:#30261a;
  --input-bg:rgba(255,255,255,.06);
  /* the top of a dock door: a steel header band, then two panel seams (step doors and every plate) */
  --door-head:#2c3646;
  --door-seams:linear-gradient(rgba(255,255,255,.07), rgba(255,255,255,.07)) 0 4px / 100% 1px no-repeat, linear-gradient(rgba(255,255,255,.07), rgba(255,255,255,.07)) 0 9px / 100% 1px no-repeat;
  /* the lit door's seams, amber like the fourth step door's: the form is the lit door */
  --lit-seams:linear-gradient(rgba(255,162,58,.18), rgba(255,162,58,.18)) 0 4px / 100% 1px no-repeat, linear-gradient(rgba(255,162,58,.18), rgba(255,162,58,.18)) 0 9px / 100% 1px no-repeat;
  /* the dusk sky, sampled from the photo's own sky (DESIGN.md, section 8): behind the home headline on
     phones and behind a county page's hero */
  --sky-top:#000d2b; --sky-mid:#021946; --sky-low:#25294e; --sky-horizon:#453a58;
  /* type: one family, few sizes (DESIGN.md, section 4) */
  --font:'Geist', 'Helvetica Neue', Arial, system-ui, sans-serif;
  --fs-display:clamp(42px, 6vw, 88px);
  --fs-title:clamp(36px, 4.4vw, 60px);
  --fs-section:clamp(30px, 3.6vw, 54px);
  --fs-sub:clamp(26px, 2.4vw, 34px);
  --fs-figure:clamp(48px, 5vw, 72px);
  --fs-item:18px;
  --fs-lead:18px;
  /* small print and running text each have one size: Fine is Small, Body small is Body */
  --fs-body:18px; --fs-body-sm:var(--fs-body); --fs-small:15px; --fs-fine:var(--fs-small);
  /* layout. --measure keeps running text to about 75 characters a line at any text size: it is in em, so
     it resolves against the text it holds (DESIGN.md, section 4) */
  --gutter:clamp(16px, 3.9vw, 56px); --maxw:1680px; --measure:32em; --side:clamp(300px, 32vw, 560px); --side-gap:clamp(40px, 5vw, 96px);
  --header-h:80px; --bar-h:0px;
  /* radius by role */
  --r-control:12px; --r-form:3px; --r-plate:6px; --r-door:3px;   /* the form is a door: 3 px, like the step doors */
}
@media (max-width:699px){:root{--header-h:72px}}
/* the Item and Lead sizes step from the Body size to 20 px at 1440 px, so no size sits a pixel off another */
@media (min-width:1440px){:root{--fs-item:20px;--fs-lead:20px}}

*{box-sizing:border-box}
html{-webkit-text-size-adjust:100%;color-scheme:dark;scroll-padding-top:calc(var(--header-h) + 16px);scroll-padding-bottom:calc(var(--bar-h) + 16px)}
body{margin:0;background:var(--night);color:var(--body);font-family:var(--font);font-size:var(--fs-body);line-height:1.6;overflow-x:hidden;font-synthesis:none}
h1,h2,h3{margin:0;color:var(--text);font-weight:600;text-wrap:balance}
h1{font-size:var(--fs-title);line-height:1.02;letter-spacing:-.035em}
h2{font-size:var(--fs-section);line-height:1.04;letter-spacing:-.035em}
h3{font-size:var(--fs-item);line-height:1.3;letter-spacing:-.015em}
@media (max-width:359px){h2{font-size:24px}}
p{margin:0}
/* no one-word last lines in running text (headings use balance) */
p,li,dd,figcaption{text-wrap:pretty}
/* and no paragraph runs past the measure, wherever it sits (drawing labels excepted) */
main p:not(.sl){max-width:var(--measure)}
a{color:var(--link);text-underline-offset:3px}
a:hover{color:var(--text)}
strong{font-weight:600;color:var(--text)}
:focus-visible{outline:3px solid var(--amber);outline-offset:2px;border-radius:4px}
.skip{position:absolute;left:-9999px;top:0}
.skip:focus{left:16px;top:12px;z-index:2000;display:inline-flex;align-items:center;min-height:48px;background:var(--amber);color:var(--amber-ink);font-weight:600;padding:0 18px;border-radius:var(--r-control)}
.skip:focus-visible{outline-color:var(--text)}
.wrap{width:100%;max-width:var(--maxw);margin-inline:auto;padding-left:max(var(--gutter), env(safe-area-inset-left, 0px));padding-right:max(var(--gutter), env(safe-area-inset-right, 0px))}
.sr{position:absolute;width:1px;height:1px;overflow:hidden;clip:rect(0 0 0 0);white-space:nowrap}
.nw{white-space:nowrap}
/* a long name join ("Cushman & Wakefield", "Montgomery County") stays on one line, except on phones, where a line
   holds about 40 characters and a held name would leave the line before it half full (build.py, NB_LONG) */
.nb{white-space:nowrap}
@media (max-width:479px){.nb{white-space:normal}}
.ico{fill:none;stroke:currentColor;stroke-width:1.6;stroke-linecap:square;stroke-linejoin:miter}
.ico-b{stroke-width:2.2}
.mark{flex:none;display:block;width:40px;height:40px}

/* ---------- header ---------- */
.site-header{position:sticky;top:0;z-index:50;isolation:isolate}
.site-header::before{content:"";position:absolute;inset:0;z-index:-1;background:var(--night);border-bottom:1px solid var(--line);transition:opacity .2s ease}
.site-header.over-photo{margin-bottom:calc(-1 * var(--header-h))}
.site-header.over-photo:not(.is-scrolled)::before{opacity:0}
.nav{display:flex;align-items:center;gap:12px 24px;min-height:var(--header-h)}
.brand{display:flex;align-items:center;gap:12px;min-height:48px;color:var(--text);text-decoration:none;min-width:0;flex:none}
.brand:hover{color:var(--text)}
.brand-text{display:grid;min-width:0}
.brand-word{font-weight:600;font-size:var(--fs-lead);line-height:1.15;letter-spacing:-.015em;white-space:nowrap}
.brand-sub{font-size:var(--fs-fine);line-height:1.3;color:var(--muted);white-space:nowrap}
.nav-links{display:flex;gap:0 22px;flex:1 1 auto;justify-content:center}
.nav-links a{padding:12px 0;color:var(--text);text-decoration:none;font-size:var(--fs-small);font-weight:500;white-space:nowrap;text-decoration-thickness:2px;text-underline-offset:6px}
.nav-links a:hover,.nav-links a[aria-current="page"]{text-decoration-line:underline;text-decoration-color:var(--amber)}
.nav-act{display:flex;align-items:center;gap:20px;flex:none;margin-left:auto}
.nav-phone{display:inline-flex;align-items:center;min-height:48px;color:var(--text);font-weight:500;font-size:var(--fs-body-sm);text-decoration:none;font-variant-numeric:tabular-nums;white-space:nowrap}
.nav-phone:hover{color:var(--text);text-decoration:underline;text-decoration-color:var(--amber);text-underline-offset:5px}
/* 1280 to 1439 px: the full menu fits only with tighter spacing, so the right gutter stays whole */
@media (min-width:1340px) and (max-width:1439px){.nav{column-gap:16px}.nav-links{column-gap:12px}.nav-act{gap:14px}.nav-phone{font-size:var(--fs-small)}}
.mnav{display:none;position:relative;flex:none}
.mnav summary{list-style:none;display:inline-flex;align-items:center;gap:8px;min-height:48px;padding:0 15px;border:1px solid var(--input-line);border-radius:var(--r-control);background:rgba(7,11,18,.55);color:var(--text);font-weight:500;font-size:var(--fs-small);cursor:pointer}
.mnav summary::-webkit-details-marker{display:none}
.mnav summary svg{width:20px;height:20px}
.mnav .ico-close,.mnav[open] .ico-menu{display:none}
.mnav[open] .ico-close{display:block}
.mnav[open] summary{border-color:var(--amber)}
.mnav-panel{position:absolute;right:0;top:calc(100% + 10px);width:min(340px, calc(100vw - 32px));border:1px solid var(--line-strong);border-radius:var(--r-plate);padding:10px;display:grid;gap:2px;max-height:calc(100svh - var(--header-h) / 2 - 34px - var(--bar-h));overflow-y:auto;overscroll-behavior:contain;
  /* it reaches down to the phone bar (its top sits 34 px under the middle of the header), and while more
     links sit below its edge a light band shows at its foot; the panel's own ground, fixed to the end of the
     list, covers that band once the list is scrolled to the end */
  background:linear-gradient(#0e141e, #0e141e) bottom / 100% 32px no-repeat local, linear-gradient(0deg, rgba(255,255,255,.14), rgba(255,255,255,0)) bottom / 100% 32px no-repeat scroll, #0e141e}
.mnav-panel > a{display:flex;align-items:center;min-height:44px;padding:0 12px;border-radius:var(--r-plate);color:var(--text);text-decoration:none;font-weight:500}
.mnav-panel > a:hover{background:rgba(255,255,255,.07);color:var(--text)}
.mnav-contact{display:flex;flex-wrap:wrap;gap:8px;padding-bottom:10px;margin-bottom:6px;border-bottom:1px solid var(--line)}
.mnav-contact .phone{flex:1 1 auto}   /* side by side when both fit, stacked on the narrowest phones */
.mnav-panel a.btn-primary{min-height:48px;margin-top:8px;justify-content:center;color:var(--amber-ink);background:var(--amber);border-radius:var(--r-control)}
.mnav-panel a.btn-primary:hover{background:var(--amber);color:var(--amber-ink)}
@media (max-width:1339px){.nav-links{display:none}.mnav{display:block}}   /* from 1340 px the links show */
/* wherever the phone bar shows (under 1024 px, and on touch screens), the bar is the one action strip */
@media (max-width:1023px), (hover:none) and (pointer:coarse){.nav-act{display:none}.mnav{margin-left:auto}}
@media (min-width:1340px) and (hover:none) and (pointer:coarse){.nav-links{justify-content:flex-end}}
@media (max-width:699px){
  .site-header{position:relative}
  .site-header.over-photo{position:absolute;left:0;right:0;margin-bottom:0}
  .site-header.over-photo::before{opacity:0}
  .brand-sub{display:none}
  .nav{gap:12px}.brand{gap:10px}.site-header .mark{width:36px;height:36px}.brand-word{font-size:var(--fs-body)}.mnav summary{padding:0 13px}
  .mnav-panel{width:calc(100vw - 2 * max(16px, env(safe-area-inset-left, 0px)))}
}
@media (max-width:389px){.brand-word{font-size:var(--fs-small)}.site-header .mark{width:34px;height:34px}}
/* phones under 400 px: the Menu button drops its icon; under 390 px the name takes the Small size; on the
   narrowest phones the gaps, the mark and the button's padding give way, so the button keeps the full
   16 px gutter on its right */
@media (max-width:399px){.mnav summary svg,.mnav[open] summary .ico-close{display:none}}
@media (max-width:349px){.brand{gap:8px}}
@media (max-width:339px){.nav{gap:8px}.mnav summary{padding:0 10px}.site-header .mark{width:32px;height:32px}}
html:not(.js) .site-header.over-photo{position:absolute;left:0;right:0;margin-bottom:0}
html:not(.js) .site-header.over-photo::before{opacity:0}

/* ---------- buttons and links ---------- */
.btn{display:inline-flex;align-items:center;justify-content:center;gap:8px;min-height:48px;padding:0 22px;border-radius:var(--r-control);font-family:var(--font);font-weight:600;font-size:var(--fs-body-sm);line-height:1.1;text-decoration:none;border:1px solid transparent;cursor:pointer;white-space:nowrap;transition:transform .12s ease}
.btn-primary{background:var(--amber);color:var(--amber-ink)}
.btn-primary:hover{color:var(--amber-ink);transform:translateY(-1px)}
.btn-primary:active{transform:translateY(1px);background:var(--amber-press)}
.btn-primary:focus-visible,.mb-offer:focus-visible,.chip input:checked:focus-visible + span{outline-color:var(--text)}
.btn-secondary{background:transparent;color:var(--text);border-color:var(--input-line)}
.btn-secondary:hover{color:var(--text);border-color:var(--text);transform:translateY(-1px)}
.btn-secondary:active{transform:translateY(1px)}
.btn-block{width:100%}
.text-link{font-weight:500;color:var(--link)}
.more-links{list-style:none;margin:24px 0 0;padding:0;display:flex;flex-wrap:wrap;gap:8px 28px}
.more-links a{display:inline-flex;align-items:center;min-height:44px}
.sec-more{margin-top:24px}
.sec-more a{display:inline-flex;align-items:center;min-height:44px}
/* Call and Text: one look everywhere they sit beside a button (DESIGN.md, section 6) */
.phones{display:inline-flex;flex-wrap:wrap;gap:12px}
/* inline-block, not flex: in a flex box the space in "Call (XXX)" would collapse beside the number's no-wrap span */
.phone{display:inline-block;min-height:48px;padding:0 18px;line-height:46px;text-align:center;border:1px solid var(--input-line);border-radius:var(--r-control);color:var(--text);font-weight:500;font-size:var(--fs-body-sm);text-decoration:none;white-space:nowrap;font-variant-numeric:tabular-nums;transition:transform .12s ease}
.phone:hover{color:var(--text);border-color:var(--text);transform:translateY(-1px)}
.phone:active{transform:translateY(1px)}
/* inside a sentence they are ordinary links */
.hero-call a,.foot-call a,.form-text a{color:var(--link);font-weight:500;text-decoration:underline;text-underline-offset:3px}
/* the texting number under each form and FAQ's "Back to topics" links: 3 px above and below, so each target is
   25 px tall, as the source links are */
.form-text a,.prose .to-topics a{padding-block:3px}

/* ---------- home hero: the photo, the headline and the form ---------- */
.hero{position:relative;isolation:isolate;overflow:hidden;display:flex;flex-direction:column;min-height:max(640px, min(100svh, 1000px));padding-top:var(--header-h);background:var(--night)}
.hero-media{position:absolute;inset:0;z-index:-2;display:block}
.hero-media img{display:block;width:100%;height:100%;object-fit:cover;object-position:66% 50%}
.hero-scrim{position:absolute;inset:0;z-index:-1;background:
  linear-gradient(90deg, rgba(7,11,18,.94) 0%, rgba(7,11,18,.88) 40%, rgba(7,11,18,.68) 55%, rgba(7,11,18,.26) 72%, rgba(7,11,18,0) 90%),
  linear-gradient(180deg, rgba(7,11,18,.75) 0%, rgba(7,11,18,0) 20%)}
/* the shade under the form, the checks and the call line stops where they stop, so the lit doors and
   the trailers to the right of the form stay in view */
.hero-scrim::after{content:"";position:absolute;inset:0;background:linear-gradient(0deg, rgba(7,11,18,.97) 0%, rgba(7,11,18,.74) 30%, rgba(7,11,18,.2) 46%, rgba(7,11,18,0) 58%);
  -webkit-mask-image:linear-gradient(90deg, #000 0, #000 calc(var(--gutter) + var(--hero-form, 880px)), transparent calc(var(--gutter) + var(--hero-form, 880px) + 200px));
  mask-image:linear-gradient(90deg, #000 0, #000 calc(var(--gutter) + var(--hero-form, 880px)), transparent calc(var(--gutter) + var(--hero-form, 880px) + 200px))}
/* narrower computer windows: the text column covers more of the picture, so the shade reaches further */
@media (min-width:960px) and (max-width:1279px) and (orientation:landscape){
  .hero-scrim{background:
    linear-gradient(90deg, rgba(7,11,18,.95) 0%, rgba(7,11,18,.9) 46%, rgba(7,11,18,.6) 68%, rgba(7,11,18,.18) 88%, rgba(7,11,18,.05) 100%),
    linear-gradient(180deg, rgba(7,11,18,.75) 0%, rgba(7,11,18,0) 20%)}
  .hero .lead{max-width:32em}   /* .hero raises it above the .lead rule that follows */
}
.hero-inner{flex:1 1 auto;display:flex;flex-direction:column;justify-content:flex-end;gap:22px;padding-top:40px;padding-bottom:44px}
.hero-copy{display:flex;flex-direction:column;gap:22px}
/* the family line: plain text under the lead */
.family{max-width:36em;font-size:var(--fs-small);line-height:1.45;color:var(--body)}
.hero .family{max-width:none}   /* one line under the lead wherever the column allows */
.hero h1{max-width:9.8em;font-size:var(--fs-display);line-height:.98;letter-spacing:-.04em}
.lead{max-width:var(--measure);font-size:var(--fs-lead);line-height:1.5;color:var(--body)}
.points{list-style:none;margin:0;padding:0;display:grid;gap:10px 16px;font-size:var(--fs-body-sm);line-height:1.45;color:#e3e7ec}
.points li{display:flex;align-items:flex-start;gap:10px}
.points svg{flex:none;width:18px;height:18px;margin-top:2px;color:var(--amber)}
.hero-call{font-size:var(--fs-small);color:var(--muted)}

/* ---------- the shared two-column grid: inner heroes and articles line up on it ---------- */
@media (min-width:1200px){
  .ph,.article > .wrap{display:grid;grid-template-columns:minmax(0, 1fr) var(--side);column-gap:var(--side-gap)}
}

/* ---------- inner-page hero ---------- */
.page-hero{padding-block:clamp(36px, 5.5vw, 80px) clamp(32px, 4vw, 56px);border-bottom:1px solid var(--line);background:var(--night)}
/* every inner page's hero sits under the dusk sky, the photo's own sky colors, so its dark ground reads as
   the evening over the truck court (the rollout, October 30, 2026; county pages first had it alone); it stops
   at --sky-low, where the caption's small print still reads */
.page-hero{background:linear-gradient(180deg, var(--night) 0%, #0b1024 48%, #1b1a33 80%, #29233d 100%)}
.ph{display:grid;gap:36px;align-items:center}
.ph-copy{display:flex;flex-direction:column;gap:18px;min-width:0;max-width:52rem}
.page-hero h1{max-width:16em}
.page-hero .sub{max-width:var(--measure);font-size:var(--fs-lead);line-height:1.5;color:var(--body)}
.breadcrumb{font-size:var(--fs-small);color:var(--faint)}
.breadcrumb a{color:var(--muted);text-decoration:none;display:inline-block;padding:12px 0;margin:-12px 0}
.breadcrumb a:hover{color:var(--text);text-decoration:underline}
.place{display:inline-flex;align-items:center;gap:8px;align-self:flex-start;font-size:var(--fs-body-sm);font-weight:500;color:var(--text)}
.place .pin{width:20px;height:20px;color:var(--amber)}
.kicker{font-size:var(--fs-body-sm);font-weight:500;color:var(--muted)}
.cta-row{display:flex;flex-wrap:wrap;align-items:center;gap:12px;margin-top:6px}
.ph-map{margin:0;width:100%;max-width:560px}
.ph-cap{margin:0;max-width:var(--measure);font-size:var(--fs-fine);line-height:1.5;color:var(--faint)}
/* from 900 px the caption sits right under its map, 12 px down, in the map's column (tried under the copy in
   round 10, it read as detached from the map) */
@media (min-width:900px){
  .page-hero:is(.has-map, .has-area) .ph{grid-template-rows:auto 1fr;row-gap:12px}
  .page-hero:is(.has-map, .has-area) .ph-copy{grid-column:1;grid-row:1 / span 2}
  .page-hero:is(.has-map, .has-area) .ph-map{grid-column:2;grid-row:1}
  .page-hero:is(.has-map, .has-area) .ph-cap{grid-column:2;grid-row:2;align-self:start}
}
@media (min-width:900px) and (max-width:1199px){.page-hero:is(.has-map, .has-area) .ph{grid-template-columns:minmax(0, 1.2fr) minmax(280px, 1fr);column-gap:48px}
  /* an article's map of the whole area gives its headline a little more of the width than a county's */
  .page-hero.has-area .ph{grid-template-columns:minmax(0, 1.5fr) minmax(280px, 1fr)}
  /* the headline shares the width with the map here, so it steps down a little: long last words ("Environmental
     Problems", "Office-Warehouse Building") then stay together instead of leaving one word alone */
  .page-hero:is(.has-map, .has-area) h1{font-size:clamp(34px, 3.9vw, 60px)}}
/* the copy starts level with the top of the map */
@media (min-width:900px){.page-hero:is(.has-map, .has-area) .ph{align-items:start}}
/* Contact and Privacy keep their map of the whole area to screens from 900 px, so the form or the policy
   comes first */
@media (max-width:899px){.page-hero.wide-map .ph-map,.page-hero.wide-map .ph-cap{display:none}}
/* under 900 px the map follows the offer button, then Call and Text. A county page puts the line under its
   headline after the map, so the lit county and its label clear the phone bar on the first screen (Camden and
   Gloucester sat under it); every other article keeps that line before the button (the answer comes first) and
   shows the whole area, never taller than about half the screen */
@media (max-width:899px){
  .page-hero:is(.has-map, .has-area:not(.wide-map)) .ph-copy{display:contents}
  .page-hero:is(.has-map, .has-area:not(.wide-map)) .ph{gap:16px}
  .page-hero:is(.has-map, .has-area:not(.wide-map)) .breadcrumb{order:1}
  .page-hero:is(.has-map, .has-area:not(.wide-map)) .place{order:2}
  .page-hero:is(.has-map, .has-area:not(.wide-map)) h1{order:3}
  .page-hero.has-area:not(.wide-map) .sub{order:4}
  .page-hero:is(.has-map, .has-area:not(.wide-map)) .cta-row{display:contents}
  .page-hero:is(.has-map, .has-area:not(.wide-map)) .cta-row > .btn{order:5;justify-self:start}
  .page-hero:is(.has-map, .has-area:not(.wide-map)) .ph-map{order:6;margin-top:8px}
  .page-hero.has-map .ph-map{max-width:min(100%, 70svh)}   /* the column's width, but never taller than about
                                                             three quarters of the screen */
  .page-hero.has-area:not(.wide-map) .ph-map{max-width:min(100%, 45svh)}
  .page-hero:is(.has-map, .has-area:not(.wide-map)) .ph-cap{order:6;margin-top:-4px}   /* right under the map */
  .page-hero.has-map .sub{order:7}
  .page-hero:is(.has-map, .has-area:not(.wide-map)) .cta-row > .phones{order:8}
}
/* the area line over an article's headline is for phones: from 700 px the header's tagline says it */
@media (min-width:700px){.page-hero .place.area{display:none}}
/* a headline whose last two words are long ("Environmental Problems", build.py's class long) takes the phone
   Section size, so the two words stay together from 360 px (the approved county headlines keep 36 px) */
@media (max-width:699px){.page-hero h1.long{font-size:30px}}
/* a long hyphenated word in a headline stays whole from 700 px; on a phone it may break at its own hyphen */
@media (min-width:700px){h1 .hy{white-space:nowrap}}
/* county pages from 1200 px: one split for the hero and the article under it. The side column is wider
   than on other articles (420 px at 1200, 570 px at 1440, at most 600 px), so the map fills it, sits close
   to the copy and shares both edges with the rail below, while the reading column keeps room for the
   widest table (about 625 px at 1200); the copy, plates and tables share the reading column */
.is-county{--side:clamp(300px, 62.5vw - 330px, 600px)}
@media (min-width:1200px){
  .page-hero .ph{column-gap:var(--side-gap)}
  .page-hero:is(.has-map, .has-area) .ph-map{max-width:none}
  .is-county .ph-copy{max-width:none}   /* the copy's box ends where the reading column does */
}
@media (max-width:699px){.page-hero.compact{padding-block:28px 20px}.page-hero.compact .cta-row{display:none}}

/* ---------- the map (DESIGN.md, sections 7 and 9) ---------- */
.map-art{position:relative;width:100%;aspect-ratio:600 / 640;container-type:inline-size;overflow:hidden;border:1px solid var(--line-strong);background:#0a0f19}
.map-art img{position:absolute;inset:0;width:100%;height:100%;display:block}
.map-edge{position:absolute;inset:0;width:100%;height:100%;overflow:visible}
.map-edge path{fill:none;stroke:#ffd29a;stroke-width:2.6;stroke-linejoin:round}
.js .map-art .map-edge path{stroke-dasharray:1 1;stroke-dashoffset:1}
.js .map-art.is-drawn .map-edge path{stroke-dashoffset:0;transition:stroke-dashoffset 1.6s cubic-bezier(.35,.1,.2,1)}
.map-labels{position:absolute;inset:0}
.ml{position:absolute;transform:translate(-50%, -50%) rotate(var(--r, 0deg));font-weight:600;font-size:clamp(12px, 3.1cqw, 19px);line-height:1;white-space:nowrap;color:#fff;text-shadow:0 0 3px #3d2207, 0 0 6px #3d2207}
.ml-focus{color:var(--amber-ink);text-shadow:none;font-weight:700}
.ml-state{font-weight:500;font-size:clamp(11px, 2.2cqw, 14px);color:var(--muted);text-shadow:none}
/* small maps: nudge the labels that would touch */
@container (max-width:380px){
  .ml{font-size:12px}
  .ml[style*="left:24.67%"]{margin-left:-3%}
  .ml[style*="left:42.83%"]{margin-top:3%}
  .ml[style*="left:58.83%"]{margin-left:4%;margin-top:-1%}
  .ml[style*="left:44.17%"]{margin-left:3%;margin-top:-3.5%}   /* Philadelphia, up the river, clear of the two port marks */
}
/* the river is named beside its last reach, in the river's own blue, smaller than the county names; the
   label hangs from its upper end, so a longer label on a small map grows away from our counties */
.ml.ml-river{transform-origin:100% 50%;transform:translate(-100%, -50%) rotate(var(--r));font-weight:500;font-size:clamp(11px, 2.2cqw, 14px);color:#8fb4f7;text-shadow:0 0 2px var(--night), 0 0 4px var(--night)}
/* the lit county's interstates, in dark ink on the lit amber (9.8:1); each label hangs from the corner
   nearest its road (tools/make_map.py), so it grows away from the road on a smaller map */
.ml.ml-road{font-weight:600;font-size:clamp(11px, 2.2cqw, 14px);color:var(--amber-ink);text-shadow:none}
/* the two ports: 9 px white squares with a dark edge, the same size on every map, each pushed 5 px away
   from the other across the river so they never touch (tools/make_map.py) */
.ml.ml-port{width:9px;height:9px;background:#fff;border:1.5px solid #0a0f19;text-shadow:none;transform:translate(calc(-50% + var(--dx, 0px)), calc(-50% + var(--dy, 0px)))}
.ml-road.ml-ne{transform:translate(0, -100%)}
.ml-road.ml-nw{transform:translate(-100%, -100%)}
.ml-road.ml-se{transform:none}
.ml-road.ml-sw{transform:translate(-100%, 0)}

/* ---------- article pages ---------- */
.article{padding-block:clamp(40px, 5vw, 64px) clamp(56px, 8vw, 104px)}
.prose-wrap{min-width:0}
/* running text keeps to the measure; the at-a-glance box, the tables, the drawing, the town lists, the
   on-this-page chips and the market band take the column's full width (from 1200 px, the column ends where
   the rail's gap begins) */
.prose > *{max-width:var(--measure)}
.prose > :is(.glance, .tbl-wrap, .spec, .towns, nav, .band2){max-width:none}
/* the plates take the column's full width too, so the article's right edge steps in and out only between
   running text and plates; the text inside a plate keeps to the measure */
.prose > :is(.takeaways, .note:has(> p)){max-width:none}
.takeaways > :is(ul, ol),.note > p,.prose .note > p{max-width:var(--measure);margin:0}
.byline{display:flex;align-items:center;gap:14px;margin:0 0 32px;font-size:var(--fs-small);line-height:1.45;color:var(--faint)}
.byline .mark{width:36px;height:36px}
.byline a,.prose .byline a{color:var(--text);font-weight:500;text-decoration:none;display:inline-block;padding:12px 0;margin:-12px 0}
.byline a:hover,.prose .byline a:hover{color:var(--text);text-decoration:underline}
.updated{font-size:var(--fs-small);color:var(--faint)}
.prose{color:var(--body)}
.prose h2{margin:64px 0 16px;font-size:var(--fs-sub);line-height:1.12;letter-spacing:-.025em}
@media (max-width:359px){.prose h2{font-size:24px}}
.prose h3{margin:36px 0 10px}
.prose p{margin:0 0 18px}
.prose ul,.prose ol{margin:0 0 20px;padding-left:1.3em}
.prose li{margin:.45em 0}
.prose li::marker{color:var(--faint)}
.prose .answer{font-size:var(--fs-lead);line-height:1.55;color:#e2e6eb}
.prose a{color:var(--link)}
.prose a:hover{color:var(--text)}
/* two parts of the article sit on the second ground (the market answer with its table, and the town lists
   with the common place names), the way the home page alternates grounds: the ground runs edge to edge
   behind the column (a border image, which neither scrolls nor casts a shadow), the text keeps to the
   measure, the town lists take the column, and the table takes the step doors' lighter plate */
.prose > .band2{margin:56px 0 8px;padding-block:8px 36px;background:var(--ground2);border-image:conic-gradient(var(--ground2) 0 0) fill 0 / 0 / 0 100vmax}
.band2 > *{max-width:var(--measure)}
.band2 > .towns{max-width:none}
.prose .band2 > h2:first-child{margin-top:40px}
.band2 > .tbl-wrap{max-width:none;background:var(--door-seams), var(--plate2)}
.band2 > :last-child{margin-bottom:0}
/* "The short version" and the closing note are running text: they sit on a top rule, like Sources, with no plate */
.takeaways{padding:20px 0 0;margin:0 0 40px;border-top:1px solid var(--line-strong)}
@media (max-width:399px){.takeaways ul,.prose .takeaways ul{padding-left:1.05em}}   /* phones: more room for its lines */
.takeaways h2,.prose .takeaways h2{margin:0 0 8px;font-size:var(--fs-item);line-height:1.3;letter-spacing:-.015em}
.takeaways ul,.prose .takeaways ul,.takeaways ol,.prose .takeaways ol{margin:0;padding-left:1.2em}
.takeaways li,.prose .takeaways li{margin:.55em 0;color:var(--body)}
.note{padding:20px 0 0;margin:40px 0 32px;border-top:1px solid var(--line-strong);color:var(--body)}
.note strong:first-child{color:var(--text)}
.note a{padding-block:1px}   /* the links in its sentences are 25 px tall targets */
/* the long-page rail: the hero's call to action, kept in view on wide screens; touch screens have the
   phone bar instead, so the rail would only repeat it */
.rail{display:none}
@media (min-width:1200px){.rail{display:block;align-self:start;position:sticky;top:calc(var(--header-h) + 32px)}}
@media (min-width:1200px) and (hover:none) and (pointer:coarse){.rail{display:none}}
.rail-box{display:grid;gap:10px;padding:20px;background:var(--lit-seams), var(--lit);border:1px solid rgba(255,162,58,.45);border-top:6px solid var(--amber);border-radius:var(--r-door)}
/* Call and Text side by side when both fit, stacked when not */
.rail-box .phones{display:flex;flex-wrap:wrap;gap:10px}
.rail-box .btn{width:100%}
.rail-box .phone{flex:1 1 auto}
.rail-toc{display:none;margin-top:28px}
.rail-label{margin:0 0 8px;font-size:var(--fs-small);font-weight:600;color:var(--text)}
.rail-toc ul{list-style:none;margin:0;padding:0;border-left:1px solid var(--line-strong)}
.rail-toc li{margin:0}
.rail-toc a{display:block;min-height:36px;margin-left:-1px;padding:7px 0 7px 16px;border-left:2px solid transparent;color:var(--muted);font-size:var(--fs-small);line-height:1.35;text-decoration:none}   /* a block, not a flex box, which would drop the space before a no-break span */
.rail-toc a:hover{color:var(--text);border-left-color:var(--amber)}
@media (min-width:1200px) and (min-height:700px){.rail-toc{display:block}.article .toc-inline{display:none}}
@media (min-width:1200px) and (hover:none) and (pointer:coarse){.article .toc-inline{display:block}}   /* touch screens have no rail */

/* FAQ page and "on this page" chips */
.faq-index,.prose .faq-index{display:block;margin:0 0 24px;padding:0;list-style:none;font-size:0;text-wrap:balance}
/* chips sit in balanced rows (the list is one line of text that wraps evenly), so no chip is left alone on
   the last row; the list's own font size is 0, so the line breaks between items take no space */
.faq-index li,.prose .faq-index li{display:inline-block;margin:0 8px 8px 0;vertical-align:top}
@media (max-width:359px){.faq-index li,.prose .faq-index li{display:block;width:fit-content}}   /* too narrow to pair: they stack */
.faq-index a{display:inline-block;box-sizing:border-box;min-height:44px;padding:10.5px 15px;line-height:1.4;border:1px solid var(--line-strong);border-radius:var(--r-control);color:var(--text);text-decoration:none;font-size:var(--fs-small);font-weight:500}   /* an inline block, not a flex box: a flex box drops the space before a no-break span ("Selling as-is") */
.faq-index a:hover{border-color:var(--amber);color:var(--text)}
.qa{padding:20px 0;border-bottom:1px solid var(--line)}
.qa h3{margin:0 0 8px}
.qa p:last-child,.qa ul:last-child{margin-bottom:0}
.prose .qa-group{margin-top:48px}
.prose .to-topics{margin:16px 0 0;font-size:var(--fs-small)}

/* the at-a-glance facts and the town lists (county pages) */
.glance{margin:20px 0 32px;padding:8px 24px 4px;border:1px solid var(--line);border-top:6px solid var(--door-head);border-radius:var(--r-plate);background:var(--door-seams), var(--plate)}
/* each fact: its name, then one sentence that opens with its figure, run in at the Subsection size, then
   the source */
.glance div{display:grid;gap:4px;padding:16px 0 18px;border-bottom:1px solid var(--line)}
.glance div:last-child{border-bottom:0}
.glance dt{font-weight:500;color:var(--muted);text-wrap:balance}
.glance dd{margin:0;max-width:var(--measure);color:var(--body)}
/* the figure that opens a value (build.py marks it): set large in the line, never split from its unit */
.glance .gfig{font-size:var(--fs-sub);font-weight:600;line-height:1;letter-spacing:-.02em;color:var(--text);white-space:nowrap}
.glance .src{display:block;margin-top:4px;font-size:var(--fs-small);color:var(--faint)}
@media (max-width:559px){.glance{padding:4px 18px}}
@media (max-width:359px){.glance .gfig{font-size:24px}}
/* filled down each column */
.prose .towns{list-style:none;padding:0;margin:8px 0 28px;columns:3;column-gap:28px}
@media (max-width:699px){.prose .towns{columns:2;column-gap:20px}}
.prose .towns li{margin:0;padding:5px 0;break-inside:avoid;color:var(--text);font-size:var(--fs-body-sm);line-height:1.4}
.prose .towns .tn{font-size:var(--fs-fine);color:var(--faint)}

/* sources */
.sources{margin-top:56px;padding-top:24px;border-top:1px solid var(--line-strong);font-size:var(--fs-small);line-height:1.55;color:var(--muted)}
.prose > .sources{max-width:none}
.sources > *{max-width:var(--measure)}
.sources h2,.prose .sources h2{margin:0 0 12px;font-size:var(--fs-item);line-height:1.3;letter-spacing:-.015em}
.sources ul{margin:0;padding-left:1.1em}
.sources li{margin:.4em 0}
.sources a,.prose .sources a{color:var(--muted);text-decoration-color:rgba(169,178,191,.5);padding-block:3px}
.sources a:hover,.prose .sources a:hover{color:var(--text)}
.sources .checked{margin:16px 0 0;color:var(--faint)}

/* ---------- tables ---------- */
.tbl-wrap{overflow-x:auto;-webkit-overflow-scrolling:touch;margin:24px 0 28px;border:1px solid var(--line);border-top:6px solid var(--door-head);border-radius:var(--r-plate);background:var(--door-seams), var(--plate)}
.tbl-wrap:focus-visible{outline:3px solid var(--amber);outline-offset:2px}
.tbl{width:100%;border-collapse:collapse;min-width:540px;font-size:var(--fs-body-sm);line-height:1.5}
.tbl th,.tbl td{padding:14px 18px;text-align:left;vertical-align:top;border-bottom:1px solid var(--line);text-wrap:balance}   /* even lines, so a narrow column leaves no word alone */
.tbl thead th{font-weight:600;color:var(--text);background:rgba(255,255,255,.04)}
/* columns take the room their words need: a cell is at least 7em wide, so a short figure never breaks (11em
   before the rollout cut columns off on laptops and tablets); in a table of figures (.num, below) each figure and
   its unit stay on one line instead, and the comparison's short row labels keep a fixed quarter */
.tbl tbody th{font-weight:600;color:var(--text)}
.tbl td{min-width:7em}
.ctable tbody th{width:26%}
.tbl td{color:var(--body);font-variant-numeric:tabular-nums}
.tbl tbody tr:last-child th,.tbl tbody tr:last-child td{border-bottom:0}
.tbl caption{caption-side:top;text-align:left;padding:14px 18px;font-size:var(--fs-body-sm);font-weight:600;color:var(--text);border-bottom:1px solid var(--line);text-wrap:balance}
.ctable td.good{color:var(--text);font-weight:500;background:rgba(255,255,255,.035)}
.ctable td.bad{color:var(--muted)}
/* a table of figures sets them right-aligned under their headings, each on one line, so the columns read
   down; a short row heading in the drawing's table and in the three-column comparison stays on one line (the
   worked example's long row headings wrap) */
@media (min-width:640px){
  .tbl.num td,.tbl.num thead th:not(:first-child){text-align:right}
  .tbl.num td{min-width:0;white-space:nowrap}
  .spec-table .tbl tbody th,.ctable.stack:not(:has(thead th:nth-child(4))) tbody th{white-space:nowrap}
}
/* a table of sentences (the comparisons, the resale and certificate rules, any other table of four or more
   columns; class stack, set by build.py) becomes the same labeled cards wherever its box is under 720 px wide,
   so its cells never squeeze into short broken lines and no column is cut off. A table of figures stays a grid
   (class num): its figures fit on one line each down to a 590 px box */
.tbl-wrap:has(> .tbl:is(.stack, .num)){container-type:inline-size}
/* a table of five columns of figures (the New Jersey seller fees) takes 12 px side padding in a box under
   720 px wide, so all five columns fit down to a 590 px box (the narrowest a table is from 640 px) */
@media (min-width:640px){
  @container (max-width:719px){
    .tbl.num:has(thead th:nth-child(5)) :is(th, td){padding-inline:12px}
  }
}
@container (max-width:719px){
  .tbl.stack{min-width:0}
  .tbl.stack caption,.tbl.stack tbody,.tbl.stack tr,.tbl.stack th,.tbl.stack td{display:block;width:auto}
  .tbl.stack thead{position:absolute;width:1px;height:1px;overflow:hidden;clip:rect(0 0 0 0);white-space:nowrap}
  .tbl.stack tbody tr{padding:14px 18px;border-bottom:1px solid var(--line)}
  .tbl.stack tbody tr:last-child{border-bottom:0}
  .tbl.stack th,.tbl.stack td,.tbl.stack tbody tr:last-child th,.tbl.stack tbody tr:last-child td{padding:0;border:0;min-width:0}
  .tbl.stack tbody th{width:auto;font-size:var(--fs-body);white-space:normal}
  .tbl.stack td{margin-top:4px;text-align:left;white-space:normal}
  .ctable.stack td.good{background:none}
  .tbl.stack td[data-label]::before{content:attr(data-label) ": ";font-weight:600;color:var(--text)}
  /* in a table of sentences (the comparison, the resale rules) each label takes its own line, so the sentence
     under it balances on its own and no word is left alone after the label */
  .tbl.stack td[data-label]::before{display:block;margin-bottom:2px}
  /* a stacked table of figures (the worked example) keeps each short label on the line of its figure */
  .tbl.stack.figs td[data-label]::before{display:inline;margin-bottom:0}
}
@container (600px <= width < 720px){
  .tbl.stack tbody tr{display:grid;grid-template-columns:minmax(0, 11em) minmax(0, 1fr);column-gap:24px;row-gap:6px}   /* 11em holds the longest row heading ("New Britain Township", 185 px) */
  .tbl.stack tbody th{grid-column:1;grid-row:1 / span 3}
  .tbl.stack td{grid-column:2;margin-top:0}
}
/* phones: each row becomes a card, each cell a labeled line (labels come from data-label, set by build.py) */
@media (max-width:639px){
  .tbl-wrap{overflow:visible}
  .tbl{min-width:0}
  .tbl caption,.tbl tbody,.tbl tr,.tbl th,.tbl td{display:block;width:auto}
  .tbl thead{position:absolute;width:1px;height:1px;overflow:hidden;clip:rect(0 0 0 0);white-space:nowrap}
  .tbl tbody tr{padding:14px 18px;border-bottom:1px solid var(--line)}
  .tbl tbody tr:last-child{border-bottom:0}
  .tbl th,.tbl td,.tbl tbody tr:last-child th,.tbl tbody tr:last-child td{padding:0;border:0;min-width:0}
  .tbl tbody th{width:auto;font-size:var(--fs-body)}
  .tbl td{margin-top:4px}
  .ctable td.good{background:none}
  .tbl td[data-label]::before{content:attr(data-label) ": ";font-weight:600;color:var(--text)}
}

/* ---------- home sections: night and the second ground alternate ---------- */
.section{padding-block:clamp(64px, 7.5vw, 112px)}
.section.alt,.section.dark{background:var(--ground2)}
.section:has(> .spec:last-child){padding-bottom:0}
.sec-head{display:flex;flex-wrap:wrap;justify-content:space-between;align-items:flex-end;gap:14px 48px;margin-bottom:clamp(32px, 4vw, 48px)}
.sec-head h2{flex:1 1 520px;max-width:15em}
.sec-head p{flex:0 1 32em;max-width:var(--measure);font-size:var(--fs-lead);line-height:1.5;color:var(--muted)}
.sec-head .sec-answer{flex:1 1 100%;max-width:var(--measure);color:var(--body)}
#compare .sec-head{display:block}
#compare .sec-answer{margin-top:14px}
/* the comparison keeps the width of the home page's other table, so no cell runs past about 75 characters */
#compare .tbl-wrap{max-width:62rem}
/* from 1200 px each intro starts on a column line of the grid under it */
@media (min-width:1200px){
  #how-it-works .sec-head,#what-we-buy .sec-head{display:grid;grid-template-columns:repeat(4, minmax(0, 1fr));align-items:end;row-gap:14px}
  #how-it-works .sec-head{column-gap:16px}
  #what-we-buy .sec-head{column-gap:40px}
  #how-it-works .sec-head h2,#what-we-buy .sec-head h2{grid-column:1 / 3}
  #how-it-works .sec-head p,#what-we-buy .sec-head p{grid-column:3 / 5}
  #market .sec-head,#why-owners-sell .sec-head,#environmental .sec-head{display:grid;grid-template-columns:repeat(3, minmax(0, 1fr));align-items:end;row-gap:14px}
  #market .sec-head{column-gap:clamp(40px, 5vw, 72px)}
  #why-owners-sell .sec-head,#environmental .sec-head{column-gap:48px}
  #market .sec-head h2,#why-owners-sell .sec-head h2,#environmental .sec-head h2{grid-column:1 / 3}
  #market .sec-head p,#why-owners-sell .sec-head p,#environmental .sec-head p{grid-column:3 / 4}
}

/* the four steps: four dock doors in a row, the last one lit */
/* four doors: one column on phones, two by two on tablets, one row of four from 1200 px (never 3 + 1) */
.steps{list-style:none;margin:0;padding:0;display:grid;gap:16px;grid-template-columns:minmax(0, 1fr)}
@media (min-width:600px){.steps{grid-template-columns:repeat(2, minmax(0, 1fr))}}
@media (min-width:1200px){.steps{grid-template-columns:repeat(4, minmax(0, 1fr))}}
.step{display:flex;flex-direction:column;gap:12px;padding:0 26px;border-radius:var(--r-door);background:var(--plate2);border:1px solid var(--line-strong);border-top:6px solid var(--door-head)}
/* the door's top panels, with the door number painted large across them, at the Figure size, the way
   dock doors carry their numbers; the two panel seams run behind it */
.step-num{display:flex;align-items:center;min-height:calc(var(--fs-figure) + 34px);margin:0 -26px 6px;padding:2px 24px 0;font-size:var(--fs-figure);font-weight:700;line-height:1;letter-spacing:-.03em;color:var(--text);font-variant-numeric:tabular-nums;
  --seam:rgba(255,255,255,.09);
  background:linear-gradient(var(--seam), var(--seam)) 0 33.3% / 100% 1px no-repeat, linear-gradient(var(--seam), var(--seam)) 0 66.7% / 100% 1px no-repeat;
  border-bottom:1px solid var(--line-strong)}
/* the door's lower panels fill whatever room the text leaves, so equal doors never end in a blank plate */
.step::after{content:"";flex:1 0 48px;margin:6px -26px 0;background:repeating-linear-gradient(0deg, rgba(255,255,255,.08) 0 1px, transparent 1px 48px)}
@media (max-width:599px){.step::after{flex:0 0 20px}}
.step h3{font-size:var(--fs-item);line-height:1.25}
.step p{font-size:var(--fs-body-sm);line-height:1.6;color:var(--muted)}
.step:last-child{background:var(--lit);border-color:rgba(255,162,58,.45);border-top-color:var(--amber)}
.step:last-child .step-num{color:var(--amber);border-bottom-color:rgba(255,162,58,.35);--seam:rgba(255,162,58,.18)}
.step:last-child::after{background:repeating-linear-gradient(0deg, rgba(255,162,58,.12) 0 1px, transparent 1px 48px)}
.step:last-child p{color:var(--body)}

/* what we buy */
/* eight types: one column, two, then four (never 3 + 3 + 2) */
.types{list-style:none;margin:0;padding:0;display:grid;gap:32px 40px;grid-template-columns:minmax(0, 1fr)}
@media (min-width:640px){.types{grid-template-columns:repeat(2, minmax(0, 1fr))}}
@media (min-width:1200px){.types{grid-template-columns:repeat(4, minmax(0, 1fr))}}
.type{min-width:0}
/* linked titles carry a resting underline (phones have no hover); plain titles carry none */
.type h3 a,.sits h3 a,.county-list a{color:var(--text);text-decoration:underline;text-decoration-color:rgba(255,162,58,.55);text-decoration-thickness:2px;text-underline-offset:5px}
.type h3 a:hover,.sits h3 a:hover,.county-list a:hover{color:var(--text);text-decoration-color:var(--amber)}
.type h3 a,.sits h3 a{display:inline-block;padding:4px 0}
/* a plain title sits on the same line as its linked neighbors */
.type h3:not(:has(a)),.sits h3:not(:has(a)){padding-block:4px}
.type p{margin-top:6px;font-size:var(--fs-body-sm);color:var(--muted)}

/* the spec band: the dock-high drawing, its labels and the values table */
.spec{margin-top:clamp(56px, 7vw, 96px);background:var(--deep);border-block:1px solid var(--line);padding-block:clamp(40px, 5vw, 64px)}
.spec-fig{margin:0;overflow:hidden;container:spec / inline-size}
.spec-art{position:relative;width:100%;max-width:var(--maxw);margin-inline:auto;aspect-ratio:1584 / 472;container-type:inline-size;color:var(--muted)}
.spec-svg{position:absolute;inset:0;width:100%;height:100%;display:block}
.spec-svg *{vector-effect:non-scaling-stroke}
.spec-svg .p{color:#5a6574}
.spec-svg .d{color:var(--text)}
.spec-svg .b{fill:var(--deep)}
.sl{position:absolute;margin:0;font-size:clamp(14px, 1.12cqw, 17px);line-height:1.2;color:var(--body);font-variant-numeric:tabular-nums}
.sl span{display:block;font-weight:600;color:var(--text)}
.sl-clear{left:10.61%;top:47.46%;transform:translateY(-50%)}
.sl-dock{left:31.01%;top:75.25%;transform:translateY(-50%)}
.sl-court{left:61.11%;top:93.22%;transform:translate(-50%, -50%);white-space:nowrap;background:var(--deep);padding:0 10px}
.sl-court span{display:inline;margin-right:8px}
.spec-fig figcaption{margin-top:18px;font-size:var(--fs-small);line-height:1.5;color:var(--faint)}
.spec-fig figcaption a{padding-block:3px}
.spec-fig .cap{display:block;max-width:var(--measure)}
.spec-table{margin-top:24px}
.spec-table .tbl-wrap{max-width:62rem;margin-block:0 12px}
.spec-table .src-line{max-width:var(--measure)}
/* Wherever the drawing's frame is under 800 px wide (phones, tablets, and always in an article), the full
   drawing would leave its labels too little room, so it is drawn at a fixed 848 px and cropped: it starts
   just right of grid line B, so both racks stay whole, and runs to the frame's edge. The truck court's
   dimension leaves with the court's label (the table lists it), and wherever the crop would cut the
   trailer or the tractor (frames under 660 px) they leave too. */
@container spec (max-width:799px){
  .spec-art{width:848px;max-width:none;margin-left:-33px}
  .sl-court,.spec-svg .k{display:none}
}
@container spec (max-width:659px){.spec-svg .t{display:none}}
@container spec (max-width:339px){.spec-art{margin-left:-39px}}   /* the narrowest frames: the crop starts 6 px further right, so "Dock height" keeps 15 px from the edge and the first rack upright stays in the frame (1 px in) */
/* inside an article the drawing sits in a box in the reading column; on phones the box opens to the
   screen's edges, so the drawing gets the whole width and the table under it the column's */
.prose .spec{margin:36px 0 40px;padding-block:24px 4px;border:1px solid var(--line);border-radius:var(--r-plate)}
.prose .spec .wrap{padding-inline:20px}
@media (max-width:599px){
  .prose .spec{margin-left:calc(-1 * max(var(--gutter), env(safe-area-inset-left, 0px)));margin-right:calc(-1 * max(var(--gutter), env(safe-area-inset-right, 0px)));border-inline:0;border-radius:0}
  .prose .spec .wrap{padding-left:max(var(--gutter), env(safe-area-inset-left, 0px));padding-right:max(var(--gutter), env(safe-area-inset-right, 0px))}
  /* a band of the second ground right after the drawing starts at the drawing's edge, with no strip of
     night between the two */
  .prose .spec:has(+ .band2){margin-bottom:0}
  .prose .spec + .band2{margin-top:0}
}

/* the market by the numbers */
.facts-grid{display:grid;gap:40px 0;grid-template-columns:1fr}
@media (min-width:820px){.facts-grid{grid-template-columns:repeat(3, minmax(0, 1fr));column-gap:clamp(40px, 5vw, 72px)}}
.fact{display:flex;flex-direction:column;gap:14px;min-width:0}
.fact > *{max-width:var(--measure)}
.fig{font-size:var(--fs-figure);font-weight:500;line-height:1;letter-spacing:-.045em;color:var(--text);font-variant-numeric:tabular-nums}
.fact p:not(.fig){font-size:var(--fs-body-sm);color:var(--body)}
.fact .src,.fact p.src{font-size:var(--fs-small);color:var(--faint)}
.fact .src a{color:var(--muted);padding-block:3px}
.fine{margin-top:18px;max-width:var(--measure);font-size:var(--fs-body-sm);color:var(--body)}
.fine.src-line{font-size:var(--fs-small);color:var(--faint)}
.fine.src-line a{color:var(--muted);padding-block:3px}
.fine.on-dark{margin-top:36px;font-size:var(--fs-small);color:var(--faint)}

/* reasons to sell */
.sits{list-style:none;margin:0;padding:0;display:grid;gap:28px 48px;grid-template-columns:minmax(0, 1fr)}
@media (min-width:700px){.sits{grid-template-columns:repeat(2, minmax(0, 1fr))}}
@media (min-width:1200px){.sits{grid-template-columns:repeat(3, minmax(0, 1fr))}}
/* eleven reasons: in two columns the last one takes the whole row instead of sitting alone */
@media (min-width:700px) and (max-width:1199px){.sits li:last-child:nth-child(odd){grid-column:1 / -1}}
.sits li{min-width:0}
.sits h3{font-size:var(--fs-item)}
.sits p{margin-top:4px;font-size:var(--fs-body-sm);color:var(--muted)}

/* where we buy: the map on the left, the heading, lists and notes on the right */
.where-grid{display:grid;gap:40px}
.where-map{margin:0}
@media (min-width:960px){.where-map{max-width:620px}}
.where-map figcaption{margin-top:14px;max-width:var(--measure);font-size:var(--fs-small);line-height:1.55;color:var(--faint)}
.banks{display:grid;gap:28px}
@media (min-width:960px){
  #where-we-buy > .wrap{display:grid;grid-template-columns:minmax(0, 1fr) minmax(0, 1.1fr);grid-template-rows:auto auto auto 1fr;gap:0 clamp(40px, 5vw, 80px);align-items:start}
  #where-we-buy .where-grid{display:contents}
  #where-we-buy .where-map{grid-column:1;grid-row:1 / span 4}
  #where-we-buy .sec-head{grid-column:2;grid-row:1;margin-bottom:28px}
  #where-we-buy .sec-head h2,#where-we-buy .sec-head p{flex:1 1 100%}
  #where-we-buy .banks{grid-column:2;grid-row:2}
  #where-we-buy .fine{grid-column:2;margin-top:24px}
  #where-we-buy .fine.src-line{margin-top:12px}
}
.bank{min-width:0}
.bank h3{margin-bottom:6px}
.county-list{list-style:none;margin:0;padding:0}
.county-list li{display:flex;justify-content:space-between;align-items:baseline;gap:16px;padding:13px 0;border-bottom:1px solid var(--line);color:var(--text)}   /* a long name wraps; its count stays on the row */
.county-list a{font-weight:500;text-wrap:pretty}
.county-list .n{flex:none;margin-left:auto;font-size:var(--fs-small);color:var(--muted);font-variant-numeric:tabular-nums;white-space:nowrap}
/* the count's figure at the Item size in the text color, its word small beside it */
.county-list .nn{font-size:var(--fs-item);font-weight:600;color:var(--text);letter-spacing:-.01em}
@media (max-width:419px){.county-list li{flex-direction:column;align-items:flex-start;gap:2px}.county-list .n{margin-left:0}}

/* environmental and partners */
/* three items: one column, then one row of three (never 2 + 1) */
.env-grid{display:grid;gap:32px 48px;grid-template-columns:minmax(0, 1fr)}
@media (min-width:900px){.env-grid{grid-template-columns:repeat(3, minmax(0, 1fr))}}
.env{display:flex;flex-direction:column;gap:10px}
.env p{font-size:var(--fs-body-sm);color:var(--body)}
.partner-grid{display:grid;gap:32px 48px;grid-template-columns:repeat(auto-fit, minmax(min(320px, 100%), 1fr))}
.partner{display:flex;flex-direction:column;align-items:flex-start;gap:14px}
.partner p{max-width:var(--measure);color:var(--body);font-size:var(--fs-body-sm)}
.partner .btn{margin-top:auto}   /* the two buttons line up at the foot of the row */

/* accordion FAQ (home) */
.faq-list{max-width:58rem;border-top:1px solid var(--line-strong)}
#faq .faq-list{max-width:none}   /* on the home page the questions run to the column's edge */
.faq-list details{border-bottom:1px solid var(--line)}
.faq-list summary{cursor:pointer;list-style:none;display:flex;justify-content:space-between;align-items:center;gap:20px;padding:22px 0;min-height:48px}
.faq-list summary::-webkit-details-marker{display:none}
.faq-list summary h3{font-size:var(--fs-item);line-height:1.35}
.faq-list summary:hover h3{text-decoration:underline;text-decoration-color:var(--amber);text-decoration-thickness:2px;text-underline-offset:5px}
.plus{flex:none;width:22px;height:22px;position:relative}
.plus::before,.plus::after{content:"";position:absolute;left:3px;right:3px;top:10px;height:2px;background:var(--amber);transition:transform .2s ease}
.plus::after{transform:rotate(90deg)}
details[open] .plus::after{transform:rotate(0deg)}
.faq-list .ans{padding:0 0 24px;max-width:var(--measure);color:var(--body)}
/* from 1200 px: the heading and the link to the full FAQ on a third, the questions on two thirds, so the
   list ends on the right gutter like the sections above it */
@media (min-width:1200px){
  #faq > .wrap{display:grid;grid-template-columns:minmax(0, 1fr) minmax(0, 2fr);grid-template-rows:auto 1fr;column-gap:48px;align-items:start}
  #faq .sec-head{grid-column:1;grid-row:1;margin-bottom:24px}
  #faq .faq-list{grid-column:2;grid-row:1 / span 2;max-width:none}
  #faq .sec-more{grid-column:1;grid-row:2;margin-top:0}
}

/* ---------- forms ---------- */
/* the form is the lit door (the last step's door is lit the same way): an amber head over the panel seams */
.offer{container:offer / inline-size;width:100%;max-width:640px;margin:clamp(32px, 5vw, 48px) auto 0;display:grid;gap:16px;background:var(--lit-seams), var(--form-panel);border:1px solid var(--line-strong);border-top:6px solid var(--amber);border-radius:var(--r-form);--fpy:clamp(20px, 3vw, 30px);--fpx:clamp(20px, 3vw, 30px);padding:var(--fpy) var(--fpx);text-align:left}
/* the form's top panel is the lit door's: the fourth step door's warm panel under the amber head, its two
   amber seams across the top, closed by the door's amber panel line */
.offer-head{display:grid;gap:4px;margin:calc(-1 * var(--fpy)) calc(-1 * var(--fpx)) 0;padding:calc(var(--fpy) - 4px) var(--fpx) 12px;background:var(--lit-seams), var(--lit);border-bottom:1px solid rgba(255,162,58,.35)}
.offer-head h2{font-size:var(--fs-item);line-height:1.2;letter-spacing:-.015em}
.offer-head p{font-size:var(--fs-small);line-height:1.45;color:var(--muted)}
/* the form's foot is the lit door's lower panel: the same warm panel, opened by the door's amber panel line
   and its two amber seams; it holds the home hero's checks and, on every form, "Prefer to text?" */
.offer-foot{display:grid;gap:10px;margin:2px calc(-1 * var(--fpx)) calc(-1 * var(--fpy));padding:14px var(--fpx) 14px;background:var(--lit-seams), var(--lit);border-top:1px solid rgba(255,162,58,.35)}
.step-a,.step-b{display:grid;gap:14px;border:0;margin:0;padding:0;min-width:0}
/* step 2, the optional questions, starts under a rule */
.step-b{margin-top:8px;padding-top:18px;border-top:1px solid var(--line)}
.js .step-b{display:none}
.js .offer.show-b .step-b{display:grid}
.offer .to-b,.offer .step-a .form-fine{display:none}
.js .offer .to-b{display:flex}
.js .offer .step-a .form-fine{display:block}
.js .offer.show-b .to-b,.js .offer.show-b .step-a .form-fine{display:none}
.field{display:grid;gap:7px;min-width:0;align-content:end}
.field-row{display:grid;gap:14px 16px;grid-template-columns:minmax(0, 1fr) minmax(0, 1fr)}   /* 16 px between the boxes, as in step 1, so they line up */
@media (max-width:459px){.field-row{grid-template-columns:1fr}}
.offer label,.offer legend{font-size:var(--fs-small);font-weight:500;color:var(--body)}
.offer .opt{font-weight:400;color:var(--faint)}
.offer input[type="text"],.offer input[type="tel"],.offer input[type="email"],.offer select{width:100%;min-height:52px;padding:10px 14px;border:1px solid var(--input-line);border-radius:var(--r-control);background:var(--input-bg);color:var(--text);font:var(--fs-body)/1.3 var(--font)}
.offer select{appearance:none;background-image:linear-gradient(45deg, transparent 50%, var(--text) 50%),linear-gradient(135deg, var(--text) 50%, transparent 50%);background-position:calc(100% - 20px) 23px, calc(100% - 15px) 23px;background-size:5px 5px, 5px 5px;background-repeat:no-repeat;padding-right:40px}
.offer select option{background:#0e141e;color:var(--text)}
.offer input:focus,.offer select:focus{outline:3px solid var(--amber);outline-offset:1px;border-color:var(--amber)}
fieldset.chips{border:0;margin:0;padding:0;display:flex;flex-wrap:wrap;align-content:flex-start;gap:8px;min-width:0}
fieldset.chips legend{padding:0;margin-bottom:8px;width:100%}
.chip{position:relative}
.chip input{position:absolute;opacity:0;width:1px;height:1px}
/* the chip's face is a plain inline box, not a flex box: a flex box would drop the space before a
   no-break span ("Flex or small-bay") */
.chip > span{display:inline-block;min-height:46px;padding:12px 15px;line-height:20px;border:1px solid var(--input-line);border-radius:var(--r-control);background:var(--input-bg);color:var(--text);font-size:var(--fs-small);font-weight:500;cursor:pointer;transition:transform .12s ease}
.chip > span:active{transform:translateY(1px)}
.chip input:checked + span{background:var(--amber);border-color:var(--amber);color:var(--amber-ink)}
.chip input:focus-visible + span{outline:3px solid var(--amber);outline-offset:2px}
.form-actions{display:flex;gap:10px;flex-wrap:wrap}
.form-actions .btn-primary{flex:1 1 220px}
.js .form-actions .back{display:inline-flex}
.form-actions .back{display:none}
.offer .btn{min-height:52px}
.form-fine,.form-text,.consent{font-size:var(--fs-fine);line-height:1.5;color:var(--faint)}
.form-proof{font-size:var(--fs-small);font-weight:500;color:var(--body);margin:0}
.consent a{color:var(--muted)}
.hp{position:absolute!important;left:-9999px!important;width:1px;height:1px;overflow:hidden}
/* over the photo: a frosted panel, the only glass on the site (DESIGN.md, section 10), under the same
   lit door head */
.hero .offer :is(.offer-head, .offer-foot){background:var(--lit-seams), rgba(48,38,26,.86)}
.hero .offer{margin:0;max-width:600px;background:var(--lit-seams), rgba(12,17,26,.72);border-color:rgba(255,255,255,.14);border-top-color:var(--amber);-webkit-backdrop-filter:blur(18px) saturate(140%);backdrop-filter:blur(18px) saturate(140%)}
.form-section{padding-block:clamp(56px, 7vw, 96px);background:var(--ground2);border-top:1px solid var(--line)}
.form-section .inner{max-width:var(--measure);display:grid;gap:12px}
.form-section .offer{margin:0}
@media (min-width:960px){
  .form-section .inner{max-width:none}
  .form-section .offer{max-width:none;gap:10px;--fpy:20px;--fpx:22px}
}
/* the home hero wherever it shows the full photo (computer windows in landscape, all windows from
   1280 px): the form keeps to the text column, 880 px (640 px under 1180 px), so the lit doors and the
   trailers show beside it */
@media (min-width:1280px), (min-width:960px) and (orientation:landscape){
  .hero{--hero-form:880px}
  .hero-inner{gap:18px;padding-top:20px;padding-bottom:28px}
  .hero-copy{gap:18px}
  .hero .offer{max-width:var(--hero-form);gap:10px;--fpy:20px;--fpx:22px}
}
@media (min-width:960px) and (max-width:1179px) and (orientation:landscape){.hero{--hero-form:640px}}
@media (min-width:1280px), (min-width:960px) and (orientation:landscape){
  .hero:has(.offer.show-b) :is(.hero-media, .hero-scrim),html:not(.js) .hero :is(.hero-media, .hero-scrim){bottom:auto;height:var(--hero-h, max(640px, min(100svh, 1000px)))}
  .hero:has(.offer.show-b) .hero-media,html:not(.js) .hero .hero-media{-webkit-mask-image:linear-gradient(180deg, #000 72%, transparent 100%);mask-image:linear-gradient(180deg, #000 72%, transparent 100%)}   /* its foot fades into the night */
}
/* from 1280 px the lead runs a little wider, in three even lines of about 70 characters */
@media (min-width:1280px){.hero .lead{max-width:35em;text-wrap:balance}}
/* computer screens under 940 px tall: the headline steps down to the Figure size (and under 880 px tall to
   64 px, the Figure size at 1280 px), so at 1440 x 900 and 1536 x 864 the four checks and the call line end
   above the fold */
@media (min-width:1280px) and (max-height:940px), (min-width:960px) and (orientation:landscape) and (max-height:940px){.hero h1{font-size:var(--fs-figure)}.hero-inner,.hero-copy{gap:14px}}
@media (min-width:1280px) and (max-height:880px){:root{--fs-figure:min(clamp(48px, 5vw, 72px), 64px)}.hero h1{font-size:var(--fs-figure)}.hero-inner,.hero-copy{gap:14px}}
/* laptop screens under 820 px tall (1280 x 800, 1366 x 768): the headline at the Title size and the hero's
   gaps at 10 px, so at 1280 x 800 the checks and the call line end above the fold */
@media (min-width:1280px) and (max-height:820px){:root{--fs-figure:var(--fs-title)}.hero h1{font-size:var(--fs-title)}.hero-inner{gap:10px;padding-top:8px}.hero-copy{gap:10px}}
/* Every form lays itself out by its own width, wherever it sits: one column; from 540 px of form, step 1
   two by two; from 760 px, step 1 in one row and step 2 in two columns. The title always sits above the
   fields, and "Prefer to text?" always comes last. */
@container offer (min-width:520px){
  .offer-head{display:flex;flex-wrap:wrap;align-items:baseline;gap:2px 14px}
  .step-a{grid-template-columns:repeat(2, minmax(0, 1fr));gap:12px 16px;align-items:end}
  .step-a .form-fine{grid-column:1 / -1}
}
/* two by two once Continue is gone (step 2 open, or no script): the address takes the whole row */
@container offer (520px <= width < 760px){
  .step-a > .field:nth-child(3){grid-column:1 / -1}
  .step-a .to-b{grid-column:2;grid-row:3;justify-self:end;width:auto;min-width:180px}
  .offer .step-a .form-fine{grid-column:1;grid-row:3;align-self:center}
}
/* from 760 px of form: step 1 in one row of three boxes, the address the widest (a full address with its ZIP
   code fits), with Continue under the address beside the step note; step 2 on the same three columns, so its
   boxes line up with step 1's: the two sizes under the name and the phone, the email under the address; each
   group of choices on its own row; the timeline and the notes share the last row */
@container offer (min-width:760px){
  .step-a,.step-b,.offer-foot .points{grid-template-columns:minmax(0, 1.05fr) minmax(0, 1fr) minmax(0, 2fr);column-gap:16px}
  .step-a{row-gap:10px}
  .offer .step-a .form-fine{grid-column:1 / 3;grid-row:2;align-self:center}
  .step-a .to-b{grid-column:3;grid-row:2;justify-self:end;width:auto;min-width:180px}
  .step-b{align-items:start;row-gap:16px}
  .step-b > *{grid-column:1 / -1}
  .step-b .field-row{display:contents}
  .step-b .field-row > .field:first-child{grid-column:1}
  .step-b .field-row > .field:last-child{grid-column:2}
  .step-b .field-row > .field,.step-b > .f-email{align-self:end}
  .step-b > .f-email,.step-b > .f-notes{grid-column:3}
  .step-b > .f-time{grid-column:1 / 3}
  /* the checks: the first and third under the name and the phone, the second and fourth under the address */
  .offer-foot .points li:nth-child(odd){grid-column:1 / 3}
  .offer-foot .points li:nth-child(even){grid-column:3}
}
/* from 1100 px of form (the wide forms at the foot of an article): Continue back in step 1's row */
@container offer (min-width:1100px){
  .step-a,.step-b,.offer-foot .points{grid-template-columns:minmax(0, 1fr) minmax(0, 1fr) minmax(0, 2fr) minmax(160px, .7fr)}
  .step-a .form-fine{grid-column:1 / -1}
  .step-a .to-b{grid-column:4;grid-row:1;justify-self:stretch;width:100%;min-width:0}
  .js .offer.show-b .step-a > .field:nth-child(3),html:not(.js) .step-a > .field:nth-child(3),.step-b > .f-email,.step-b > .f-notes{grid-column:3 / 5}
  .offer-foot .points li:nth-child(even){grid-column:3 / 5}
}
/* narrow forms (phones): the choices in two even columns, so none sits alone on a row */
@container offer (max-width:519px){
  fieldset.chips{display:grid;grid-template-columns:repeat(2, minmax(0, 1fr));gap:8px}
  .chip > span{display:grid;align-content:center;height:100%;padding-inline:12px;text-wrap:balance}   /* a one-line choice sits level with a two-line one beside it */
}
/* the narrowest forms (phones under 360 px): one choice to a row, so a long word ("Owner-occupied") always fits */
@container offer (max-width:289px){fieldset.chips{grid-template-columns:minmax(0, 1fr)}}
/* narrow forms: the submit button, then Back under it, both the full width */
@container offer (max-width:419px){.form-actions .btn{flex:1 1 100%}}
.contact-grid{display:grid;gap:clamp(28px, 4vw, 56px);grid-template-columns:minmax(0, 1.25fr) minmax(0, 1fr);align-items:start}
.contact-grid .offer{margin:0;max-width:none}
.side{display:grid;gap:32px}
.side h2{font-size:var(--fs-sub);margin-bottom:8px}
.side ol,.side ul{margin:0;padding-left:1.2em}
.side li{margin:.4em 0}
@media (max-width:899px){.contact-grid{grid-template-columns:1fr}}

/* ---------- closing bands: the photo again, darkened ---------- */
.final,.cta-band{position:relative;isolation:isolate;overflow:hidden;padding-block:clamp(88px, 11vw, 160px);background:var(--night);border-top:1px solid var(--line)}
.band-media{position:absolute;inset:0;z-index:-2;display:block}
.band-media img{display:block;width:100%;height:100%;object-fit:cover;object-position:72% 46%}
.band-scrim{position:absolute;inset:0;z-index:-1;background:linear-gradient(90deg, rgba(7,11,18,.95) 0%, rgba(7,11,18,.86) 40%, rgba(7,11,18,.45) 75%, rgba(7,11,18,.3) 100%), linear-gradient(0deg, rgba(7,11,18,.7), rgba(7,11,18,.2))}
@media (max-width:699px){.band-scrim{background:linear-gradient(0deg, rgba(7,11,18,.94), rgba(7,11,18,.86) 70%, rgba(7,11,18,.7))}}
.final-inner{display:flex;flex-direction:column;align-items:flex-start;gap:18px}
.final h2,.cta-band h2{max-width:14em}
.final p,.cta-band p{max-width:var(--measure);font-size:var(--fs-lead);color:var(--body)}
.final .cta-row,.cta-band .cta-row{margin-top:8px}

/* ---------- footer ---------- */
.site-footer{background:var(--deep);color:var(--muted);padding-block:64px 44px;border-top:1px solid var(--line)}
.foot-grid{display:grid;gap:36px 28px;grid-template-columns:repeat(2, minmax(0, 1fr))}
.foot-id{grid-column:1 / -1;max-width:26rem}
/* phones: the long guide and situation names get the full width, so they keep to one line */
@media (max-width:699px){.foot-grid > .foot-wide,.foot-grid > :last-child{grid-column:1 / -1}.foot-grid > :last-child ul{display:block;columns:2;column-gap:28px}.foot-grid > :last-child li{break-inside:avoid}}
@media (min-width:700px){.foot-grid{grid-template-columns:repeat(3, minmax(0, 1fr))}}
/* from 1200 px the five link lists share one row, each as wide as its longest link (no link wraps); the
   name and the call line sit above them until 1600 px, where all six share the row */
@media (min-width:1200px){.foot-grid{grid-template-columns:repeat(5, auto)}}
/* from 1440 px the five lists share the row in equal columns, on one rhythm with the page */
@media (min-width:1440px) and (max-width:1599px){.foot-grid{grid-template-columns:repeat(5, minmax(0, 1fr))}}
@media (min-width:1600px){.foot-grid{grid-template-columns:minmax(min-content, 1.5fr) repeat(5, auto)}.foot-id{grid-column:auto}}
.foot-grid .foot-brand{display:flex;align-items:center;gap:12px;margin-bottom:14px;font-size:var(--fs-lead);font-weight:600;letter-spacing:-.015em;color:var(--text);white-space:nowrap}
.foot-grid p{font-size:var(--fs-small);margin-bottom:10px}
.foot-h{font-size:var(--fs-small);font-weight:600;letter-spacing:0;color:var(--text);margin:0 0 4px}
.foot-grid ul{list-style:none;padding:0;margin:0;display:grid}
.foot-grid li{color:var(--muted);font-size:var(--fs-small);line-height:1.4}
.foot-grid ul a{display:inline-block;padding:10px 0;color:var(--muted);text-decoration:none;font-size:var(--fs-small)}
.foot-grid ul a:hover{color:var(--text);text-decoration:underline}
.foot-grid .foot-call a{display:inline-block;padding:12px 0}
.legal{display:flex;flex-wrap:wrap;gap:6px 24px;margin-top:44px;padding-top:22px;border-top:1px solid var(--line);font-size:var(--fs-fine);color:var(--faint)}
.legal > span{max-width:var(--measure)}
.legal a{display:inline-block;padding:6px 0;margin:-6px 0;color:var(--muted)}

/* ---------- the phone bar (phones and portrait tablets) ---------- */
.mobile-bar{position:fixed;left:0;right:0;bottom:0;z-index:60;display:none;grid-template-columns:1fr 1fr 1.6fr;gap:8px;padding-top:10px;padding-bottom:calc(12px + env(safe-area-inset-bottom, 0px));padding-left:max(12px, env(safe-area-inset-left, 0px));padding-right:max(12px, env(safe-area-inset-right, 0px));background:var(--night);border-top:1px solid var(--line-strong)}
.mb{display:flex;align-items:center;justify-content:center;text-align:center;line-height:1.15;padding:0 6px;min-height:48px;border-radius:var(--r-control);text-decoration:none;font-weight:500;font-size:var(--fs-body-sm);color:var(--text);border:1px solid var(--input-line)}
.mb:hover{color:var(--text)}
.mb:active{transform:translateY(1px)}
.mb-offer{background:var(--amber);color:var(--amber-ink);border-color:var(--amber);font-weight:600}
.mb-num{display:none}
@media (min-width:700px){.mb-num{display:inline;white-space:pre}}
.mb-offer:hover{color:var(--amber-ink)}
@media (max-width:1023px), (hover:none) and (pointer:coarse){
  :root{--bar-h:calc(71px + env(safe-area-inset-bottom, 0px))}
  .mobile-bar{display:grid}
  .site-footer{padding-bottom:calc(var(--bar-h) + 40px)}
}
/* under 390 px the third button gets more of the bar, so "Send a property" and "How it works" stay on one line
   (at 360 px "Send a property" took two lines in the even split) */
@media (max-width:389px){.mobile-bar{grid-template-columns:.8fr .8fr 1.9fr}}
@media (min-width:700px){.mobile-bar{grid-template-columns:repeat(3, minmax(0, 220px));justify-content:center}}

/* ---------- home hero on phones, portrait tablets and other portrait windows ---------- */
@media (max-width:959px), (max-width:1279px) and (orientation:portrait){
  /* The text sits on a sky drawn in CSS from the photo's own sky colors, and the photo follows as a
     band, so no text ever covers the lit building (DESIGN.md, section 8). When a new photo replaces
     the render, retune --sky-top, --sky-mid, --sky-low and --sky-horizon to it. */
  .hero{display:grid;grid-template-columns:minmax(0, 1fr);min-height:0;padding-top:0}
  .hero::before{content:"";grid-row:1;grid-column:1;z-index:-1;background:linear-gradient(180deg, var(--sky-top) 0%, var(--sky-mid) 66%, var(--sky-low) 86%, var(--sky-horizon) 100%)}
  .hero-inner{display:contents}
  .hero-copy{grid-row:1;grid-column:1;gap:16px;padding:calc(var(--header-h) + 18px) max(var(--gutter), env(safe-area-inset-right, 0px)) 18px max(var(--gutter), env(safe-area-inset-left, 0px))}
  .hero-media{grid-row:2;grid-column:1;position:relative;inset:auto;z-index:0;aspect-ratio:1463 / 880}
  .hero-media img{object-position:50% 64%}
  .hero-scrim::after{content:none}
  .hero-scrim{grid-row:2;grid-column:1;position:relative;inset:auto;z-index:1;background:linear-gradient(180deg, rgba(7,11,18,0) 0%, rgba(7,11,18,0) 52%, rgba(7,11,18,.86) 86%, var(--night) 100%)}
  .hero .offer{grid-row:3;grid-column:1;position:relative;z-index:2;width:auto;max-width:600px;margin:-72px var(--gutter) 0;--fpy:18px;--fpx:16px}
  .hero-call{grid-row:4;grid-column:1;margin:20px var(--gutter) 40px}
  .hero h1{font-size:clamp(34px, 6.4vw, 56px);line-height:1}
}
@media (min-width:700px) and (max-width:959px), (min-width:700px) and (max-width:1279px) and (orientation:portrait){.hero h1{max-width:12em}.hero .offer{--fpy:22px;--fpx:22px}:root{--fs-figure:clamp(34px, 6.4vw, 56px)}
  .hero-media{aspect-ratio:1463 / 720}   /* a shorter band, so on a 768 x 1024 tablet the form's first box shows above the phone bar */
}
@media (max-width:699px){
  .hero h1{font-size:clamp(34px, 9.8vw, 42px)}
  /* phones: the sky block keeps its spacing tight, so the lit doors sit higher and, on a 390 x 844
     screen, the form's first box shows whole above the phone bar */
  .hero-copy{gap:12px;padding-top:calc(var(--header-h) + 12px);padding-bottom:0}
  .hero-media{aspect-ratio:1463 / 860}
}
/* under 360 px the headline takes three lines at 30 px instead of four, so more of the photo shows */
@media (max-width:359px){.hero h1,.page-hero h1{font-size:30px}}

/* ---------- simple pages (thank-you, 404) ---------- */
.simple{padding-block:clamp(56px, 9vw, 120px);background:linear-gradient(180deg, var(--night) 0%, #0b1024 48%, #1b1a33 80%, #29233d 100%)}   /* the same dusk sky as every inner hero */
.simple .inner{max-width:var(--measure);min-width:0;display:grid;gap:18px}
/* "While you wait" labels the links under it: the Item size, not a second headline (the rollout) */
.simple h2{font-size:var(--fs-item);line-height:1.3;letter-spacing:-.015em;margin-top:10px}
/* the links read as links: their text carries the resting amber underline of the county list, with no arrow
   after it (the rollout dropped the chevrons) */
.link-list{list-style:none;padding:0;margin:8px 0 0;display:grid;border-top:1px solid var(--line)}
.link-list a{display:block;padding:16px 0;border-bottom:1px solid var(--line);color:var(--text);font-weight:500;text-decoration:underline;text-decoration-color:rgba(255,162,58,.55);text-decoration-thickness:2px;text-underline-offset:5px}
.link-list a:hover{color:var(--text);text-decoration-color:var(--amber)}
/* from 900 px the map of the whole area sits beside the text, as on the article heroes; under 900 px it stays
   out, and a phone never downloads it (build.py's picture) */
.simple-map{display:none;margin:0}
@media (min-width:900px){
  .simple-grid{display:grid;grid-template-columns:minmax(0, 1.2fr) minmax(280px, 1fr);column-gap:48px;align-items:start}
  .simple-map{display:grid;gap:12px;max-width:560px}
  .simple-map figcaption{max-width:var(--measure);font-size:var(--fs-fine);line-height:1.5;color:var(--faint)}
}
@media (min-width:1200px){
  .simple-grid{grid-template-columns:minmax(0, 1fr) var(--side);column-gap:var(--side-gap)}
  .simple-map{max-width:none}
}

@media (prefers-reduced-motion:reduce){
  *,*::before,*::after{transition:none!important;animation:none!important;scroll-behavior:auto!important}
  .js .map-art .map-edge path{stroke-dasharray:none;stroke-dashoffset:0}
}
@media print{.site-header,.mobile-bar,.offer,.final,.cta-band,.rail,.hero-media,.hero-scrim{display:none}body{background:#fff;color:#000}h1,h2,h3,strong{color:#000}}