/* FOUNDATIONSELECT - SITE STYLESHEET

   Every page loads this one file. Change a value here and it changes
   everywhere, including the four generated city pages.

   The rules behind it are in build/STANDARD.md. Short version: nothing is
   rounded, headings are Archivo 800/900 set tight, body is Inter, labels are
   Plex Mono, and orange marks the thing you are meant to click - it never
   decorates.

   CONTENTS
     1  Typefaces
     2  Tokens - colours and the type stack. Most changes start here.
     3  Base and typography
     4  Header, nav, footer
     5  Shared components - buttons, tables, notes, findings
     6  Homepage
     7  City pages (generated by build/metro.py)
     8  Guides, FAQ, method, contact
*/

/* 1 - TYPEFACES. Self-hosted in web/fonts/. */
@font-face{font-family:'Archivo';font-style:normal;font-weight:700;font-display:swap;src:url(/fonts/archivo-700.woff2) format('woff2')}
@font-face{font-family:'Archivo';font-style:normal;font-weight:800;font-display:swap;src:url(/fonts/archivo-800.woff2) format('woff2')}
@font-face{font-family:'Archivo';font-style:normal;font-weight:900;font-display:swap;src:url(/fonts/archivo-900.woff2) format('woff2')}
@font-face{font-family:'Inter';font-style:normal;font-weight:400;font-display:swap;src:url(/fonts/inter-400.woff2) format('woff2')}
@font-face{font-family:'Inter';font-style:normal;font-weight:500;font-display:swap;src:url(/fonts/inter-500.woff2) format('woff2')}
@font-face{font-family:'Inter';font-style:normal;font-weight:600;font-display:swap;src:url(/fonts/inter-600.woff2) format('woff2')}
@font-face{font-family:'Inter';font-style:normal;font-weight:700;font-display:swap;src:url(/fonts/inter-700.woff2) format('woff2')}
@font-face{font-family:'Plex';font-style:normal;font-weight:500;font-display:swap;src:url(/fonts/ibm-plex-mono-500.woff2) format('woff2')}
@font-face{font-family:'Plex';font-style:normal;font-weight:600;font-display:swap;src:url(/fonts/ibm-plex-mono-600.woff2) format('woff2')}


/* 2 - TOKENS. Almost every colour change starts here. */
:root{
  color-scheme:dark;
  --black:#0C0D10; --black-2:#08090B; --black-3:#15171C; --black-4:#2A2E37;
  --steel:#8B939E; --steel-2:#9AA2AD; --steel-3:#8B939E;
  --paper:#15171C; --paper-2:#1B1E24; --paper-3:#262A32; --white:#1A1D23;
  --ink:#F2F3F5; --ink-2:#B6BDC6; --ink-3:#8B939E;
  --rule:#2F343D; --rule-2:#23272F;
  --orange:#FF6B1A; --orange-2:#F2600D;
  /* On a dark page the bright orange IS the readable one, so --clay - which
     existed to be the darkened on-paper variant - resolves here to a value a
     shade warmer than --orange rather than darker. Anything still asking for
     --clay therefore stays legible instead of going near-invisible. */
  --clay:#FF8038; --clay-2:#FF6B1A; --clay-tint:rgba(255,107,26,.14);
  --ocean:#5FB6CE; --ocean-2:#8CCBDD; --ocean-tint:rgba(95,182,206,.13);
  --ochre:#D9A036; --ochre-tint:rgba(217,160,54,.13);
  --good:#3FBF85; --good-tint:rgba(63,191,133,.13);
  /* legacy aliases, kept so the page modules keep resolving */
  --navy:#0C0D10; --navy-2:#08090B; --navy-3:#15171C; --slate:#8B939E;
  --max:1240px;
  --disp:'Archivo',system-ui,sans-serif;
  --serif:'Archivo',system-ui,sans-serif;
  --sans:'Inter',-apple-system,system-ui,sans-serif;
  --mono:'Plex',ui-monospace,monospace;
}
/* RULE 1. No exceptions - see the note above. */
*{box-sizing:border-box;margin:0;padding:0;border-radius:0}
html{scroll-behavior:smooth;-webkit-text-size-adjust:100%}
body{background:var(--paper);color:var(--ink);font-family:var(--sans);
  font-size:16.5px;line-height:1.6;-webkit-font-smoothing:antialiased}
.wrap{max-width:var(--max);margin:0 auto;padding:0 24px}
a{color:inherit}
img{max-width:100%;display:block}

/* ---------- type. RULE 2. ---------- */
h1,h2,h3,h4{font-family:var(--disp);font-weight:800;color:var(--ink);
  text-transform:uppercase;letter-spacing:-.035em}
h1{font-size:clamp(40px,6.6vw,80px);line-height:.95;font-weight:900;letter-spacing:-.042em}
h2{font-size:clamp(28px,4vw,44px);line-height:1.02;letter-spacing:-.038em}
h3{font-size:clamp(19px,2vw,23px);line-height:1.15;letter-spacing:-.025em}
h4{font-size:17px;line-height:1.2;letter-spacing:-.02em}
.lead{font-family:var(--sans);font-size:clamp(17px,1.9vw,20px);line-height:1.58;
  color:var(--ink-2);font-weight:400;text-transform:none;letter-spacing:0}
.kicker{font-family:var(--mono);font-size:11px;font-weight:600;letter-spacing:.17em;
  text-transform:uppercase;color:var(--clay);display:flex;align-items:center;gap:12px}
.kicker::after{content:"";height:2px;background:var(--rule);flex:1}
.kicker.gray{color:var(--ink-3)}
.kicker.ocean{color:var(--ocean)}
.kicker.ochre{color:var(--ochre)}
.mono{font-family:var(--mono);font-variant-numeric:tabular-nums}
.small{font-size:14px;color:var(--ink-3);line-height:1.55}

/* ---------- masthead ---------- */
.utility{background:var(--black-2);color:var(--steel-3);font-family:var(--mono);
  font-size:10.5px;font-weight:500;letter-spacing:.11em;text-transform:uppercase}
.utility .wrap{display:flex;justify-content:space-between;gap:16px;
  padding-top:9px;padding-bottom:9px;overflow-x:auto;white-space:nowrap}
.utility b{color:var(--orange);font-weight:600}

header{position:sticky;top:0;z-index:70;background:var(--black);
  border-bottom:1px solid var(--black-4)}
header .wrap{display:flex;align-items:center;justify-content:space-between;
  gap:24px;height:64px}
.brand{display:flex;align-items:center;gap:11px;text-decoration:none;
  font-family:var(--disp);font-size:19px;font-weight:800;letter-spacing:-.025em;
  text-transform:uppercase;white-space:nowrap;color:#fff}
.brand em{font-style:normal;color:var(--orange)}
.brand .bar{width:5px;height:20px;background:var(--orange);flex:none}
nav.top{display:none;gap:24px;align-items:center}
@media(min-width:960px){nav.top{display:flex}}
nav.top a{font-family:var(--mono);font-size:12.5px;font-weight:500;letter-spacing:.11em;
  text-transform:uppercase;text-decoration:none;color:var(--steel-3);transition:.13s}
nav.top a:hover{color:#fff}
nav.top a.on{color:var(--orange);font-weight:600}
.navcta{display:none;background:var(--orange);color:#150C03 !important;font-family:var(--mono);
  font-size:12px;font-weight:700;letter-spacing:.11em;text-transform:uppercase;
  padding:13px 20px;text-decoration:none;white-space:nowrap;transition:.13s}
.navcta:hover{background:#fff;color:var(--black) !important}
@media(min-width:1040px){.navcta{display:inline-block}}
/* Under 960px nav.top is hidden, which would leave phones with no route
   between cities except the footer. This strip is the mobile navigation. */
.mobnav{display:block;background:var(--black-2);border-bottom:1px solid var(--black-4)}
@media(min-width:960px){.mobnav{display:none}}
.mobnav .wrap{display:flex;gap:20px;overflow-x:auto;padding-top:11px;
  padding-bottom:11px;-webkit-overflow-scrolling:touch}
.mobnav a{font-family:var(--mono);font-size:12px;font-weight:500;letter-spacing:.11em;
  text-transform:uppercase;color:var(--steel-3);text-decoration:none;white-space:nowrap}
.mobnav a.on{color:var(--orange);font-weight:600}

/* ---------- sections ---------- */
section{padding:74px 0;scroll-margin-top:110px}
section:not(.dark):not(.closing)+section:not(.dark):not(.closing){border-top:1px solid var(--rule-2)}
section:nth-of-type(even){background:var(--paper-2)}
section.tight{padding:48px 0}
/* Dark sections opt in by class. Never by position - nth-of-type(even) has
   higher specificity than a bare class and has silently inverted a panel
   twice, so anything that sets its own background does it on section.foo. */
section.dark{background:var(--black);color:#fff}
section.dark h2,section.dark h3,section.dark h4{color:#fff}
section.dark .lead,section.dark .sintro p{color:#B4BAC2}
section.dark .kicker{color:var(--orange)}
section.dark .kicker::after{background:var(--black-4)}
.shead{margin-bottom:10px}
.sintro{max-width:none;margin-bottom:38px}
.sintro p{color:var(--ink-2);margin-top:15px;font-size:17px;max-width:70ch}
.shead h2{margin-top:14px}

/* ---------- the finding: a statistic set as a headline ---------- */
.finding{display:grid;grid-template-columns:1fr;gap:16px;
  border-top:3px solid var(--orange);border-bottom:1px solid var(--rule);
  padding:26px 0;margin:36px 0}
@media(min-width:760px){.finding{grid-template-columns:minmax(150px,auto) 1fr;
  gap:48px;align-items:center}}
.finding .num{font-family:var(--disp);font-size:clamp(52px,8.4vw,96px);line-height:.85;
  letter-spacing:-.05em;color:var(--clay);font-weight:900;font-variant-numeric:tabular-nums}
.finding .num small{font-size:.4em;letter-spacing:-.02em}
.finding .say b{font-family:var(--disp);font-size:20px;font-weight:800;display:block;
  margin-bottom:8px;line-height:1.15;text-transform:uppercase;letter-spacing:-.025em}
.finding .say p{color:var(--ink-2);font-size:16px;line-height:1.62}
.finding.ocean{border-top-color:var(--ocean)}
.finding.ocean .num{color:var(--ocean)}
.finding.ochre{border-top-color:var(--ochre)}
.finding.ochre .num{color:var(--ochre)}

/* ---------- prose ---------- */
.prose{max-width:none}
.prose p{margin:15px 0;color:var(--ink-2)}
.prose p:first-child{margin-top:0}
.prose h2{margin:50px 0 8px;scroll-margin-top:96px}
.prose h3{margin:36px 0 8px;scroll-margin-top:96px}
.prose ul,.prose ol{margin:14px 0 14px 22px;color:var(--ink-2)}
.prose li{margin:8px 0}
.prose b,.prose strong{color:var(--ink);font-weight:600}
.prose a{color:var(--clay);text-decoration:underline;text-underline-offset:2px;
  text-decoration-thickness:1px}
.prose .lead{margin-bottom:24px}

/* ---------- note / callout. RULE 5: this is the one card. ---------- */
.note{border-left:4px solid var(--orange);background:var(--white);
  border-top:1px solid var(--rule);border-right:1px solid var(--rule);
  border-bottom:1px solid var(--rule);padding:20px 24px;margin:28px 0}
.note h4{font-family:var(--disp);font-size:14px;font-weight:800;letter-spacing:.01em;
  margin-bottom:7px;text-transform:uppercase}
.note p{font-size:15px;color:var(--ink-2);margin:7px 0 0}
.note.plain{border-left-color:var(--rule)}

/* ---------- tables ---------- */
.tblwrap{overflow-x:auto;border-top:3px solid var(--orange);
  border-bottom:1px solid var(--rule);background:var(--white)}
/* Let the table keep its columns and scroll sideways rather than crushing a
   phone number onto three lines, which is what happened at 1440px. */
.tblwrap table.wide{min-width:1040px}
/* position:sticky on a thead only works if no ancestor is a scroll container.
   overflow-x:auto makes .tblwrap one, which silently killed the sticky column
   heads. So the wrapper only scrolls on screens too narrow to fit the table -
   which are the screens where a pinned header would not help anyway. */
@media(min-width:1180px){.tblwrap{overflow:visible}}
table{border-collapse:collapse;width:100%;font-size:14.5px}
thead th{font-family:var(--mono);font-size:10px;font-weight:600;letter-spacing:.12em;
  text-transform:uppercase;color:var(--steel-2);text-align:left;padding:13px;
  border-bottom:2px solid var(--rule);white-space:nowrap;background:var(--paper-2);
  position:sticky;top:64px;z-index:5}
tbody td{padding:12px 13px;border-bottom:1px solid var(--rule-2);vertical-align:top}
tbody td.tel{white-space:nowrap}
tbody tr:hover{background:var(--paper-2)}
td.num,th.num{text-align:right;font-family:var(--mono);font-variant-numeric:tabular-nums}
.co{font-weight:600;font-size:15px;color:var(--ink);line-height:1.3}
.co a{color:inherit;text-decoration:none;border-bottom:1px solid var(--rule)}
.co a:hover{border-bottom-color:var(--clay);color:var(--clay)}
.where{font-size:12.5px;color:var(--ink-3);margin-top:3px}
.yes{color:var(--good);font-weight:600}
.dash{color:#5B626C}
.pill{display:inline-block;font-family:var(--mono);font-size:9.5px;font-weight:600;
  letter-spacing:.1em;text-transform:uppercase;padding:3px 7px;
  border:1px solid var(--rule);color:var(--ink-3);vertical-align:1px}
.pill.a{border-color:var(--clay);color:var(--clay)}
.pill.nat{border-color:var(--ocean);color:var(--ocean);background:var(--ocean-tint)}

/* ---------- buttons ---------- */
/* Near-black on orange, not white. White on #F2600D measures 3.25:1, which
   fails AA for 11.5px text; the dark label clears 6:1 and reads harder-edged,
   which suits the rest of the system. Same reasoning applies to every orange
   fill on the site - see .navcta and the phone buttons on a city page. */
.btn{display:inline-block;background:var(--orange-2);color:#150C03;text-decoration:none;
  font-family:var(--mono);font-size:11.5px;font-weight:700;letter-spacing:.13em;
  text-transform:uppercase;padding:15px 26px;border:0;transition:.13s}
.btn:hover{background:var(--orange)}
.btn.ghost{background:transparent;color:var(--ink);border:2px solid var(--ink-3);
  padding:13px 24px}
.btn.ghost:hover{background:var(--ink);color:var(--black)}
section.dark .btn.ghost{color:#fff;border-color:#fff}
section.dark .btn.ghost:hover{background:#fff;color:var(--black)}

/* ---------- the city board. RULE 4. ---------- */
.board{border-top:3px solid var(--orange)}
.brow{display:grid;grid-template-columns:auto 1fr;gap:8px 18px;align-items:center;
  padding:24px 20px 24px 0;border-bottom:1px solid var(--rule);
  text-decoration:none;transition:.12s}
@media(min-width:880px){.brow{grid-template-columns:60px 1fr auto auto;gap:28px;
  padding:26px 24px 26px 0}}
.brow:hover{background:var(--orange-2);color:#150C03;padding-left:20px;padding-right:20px}
.brow:hover .bnum,.brow:hover .bdesc,.brow:hover .bmeta .k{color:rgba(21,12,3,.72)}
.brow:hover .bgo{color:#150C03}
.brow:hover .bmeta .v{color:#150C03}
.bnum{font-family:var(--mono);font-size:12px;font-weight:600;letter-spacing:.1em;
  color:var(--steel-2)}
.bname{font-family:var(--disp);font-size:clamp(25px,3.4vw,38px);font-weight:800;
  letter-spacing:-.038em;text-transform:uppercase;line-height:1}
.bdesc{font-size:14.5px;color:var(--ink-2);margin-top:8px;max-width:58ch}
.bmeta{display:flex;gap:30px;grid-column:1/-1}
@media(min-width:880px){.bmeta{grid-column:auto}}
.bmeta .k{font-family:var(--mono);font-size:9.5px;font-weight:600;letter-spacing:.14em;
  text-transform:uppercase;color:var(--steel-2)}
.bmeta .v{font-family:var(--disp);font-size:25px;font-weight:800;letter-spacing:-.035em;
  line-height:1.1;font-variant-numeric:tabular-nums;color:var(--orange)}
.bgo{font-family:var(--mono);font-size:11px;font-weight:600;letter-spacing:.13em;
  text-transform:uppercase;color:var(--clay);white-space:nowrap}
.brow.soon{background:var(--paper-2);color:var(--ink-3)}
.brow.soon:hover{background:var(--paper-2);padding-left:0;padding-right:20px}
.brow.soon .bname{color:var(--ink-3)}
.soonlbl{font-family:var(--mono);font-size:9.5px;font-weight:600;letter-spacing:.14em;
  text-transform:uppercase;color:var(--ink-3);border:2px solid var(--rule);
  padding:5px 10px}

/* ---------- footer ---------- */
footer{background:var(--black-2);color:#9AA2AD;padding:56px 0 44px;font-size:14.5px;
  border-top:1px solid var(--black-4)}
footer .cols{display:grid;grid-template-columns:repeat(auto-fit,minmax(170px,1fr));gap:30px}
/* Explicitly #fff and never a token. This heading was set to var(--paper)
   once; a dark palette then redefined --paper to near-black and the whole
   footer column head vanished. A heading colour that depends on which
   surface token happens to be light is a bug waiting to be reintroduced. */
footer h4{font-family:var(--mono);font-size:11px;font-weight:600;letter-spacing:.15em;
  text-transform:uppercase;color:#FFFFFF;margin-bottom:15px;
  padding-bottom:9px;border-bottom:2px solid var(--orange)}
footer a{color:#C9CFD7;text-decoration:none;display:block;margin:8px 0}
footer a:hover{color:var(--orange)}
footer span.soon{display:block;margin:8px 0;color:#6B737D}
.disc{margin-top:40px;padding-top:24px;border-top:1px solid var(--black-4);
  font-size:13px;line-height:1.65;color:#8B939E}
.disc b{color:#C4C8CE}


/* ========================================================================
   6 - HOMEPAGE
   web/index.html
   ======================================================================== */

/* ---------- hero ---------- */
/* Flat. The city masthead lost its gradient, and a stripe texture here would
   leave the two halves of the same hero treatment subtly different. */
.hero{background:var(--black);color:#fff}
.hero .wrap{padding-top:58px;padding-bottom:52px}
@media(min-width:1040px){.hero .wrap{padding-top:70px;padding-bottom:60px}}
.keyline{width:56px;height:5px;background:var(--orange);margin-bottom:22px}
.hkick{font-family:var(--mono);font-size:11px;font-weight:600;letter-spacing:.17em;
  text-transform:uppercase;color:var(--orange);margin-bottom:18px}
.hero h1{color:#fff;max-width:16ch}
/* No measure cap. A capped paragraph in a full-width hero leaves a dead
   column down the right of the screen; the line simply runs to the edge of
   the shell. */
.hero .lead{color:#C4C8CE;margin-top:26px;max-width:none}
.hero .lead b{color:#fff;font-weight:600}
.hacts{display:flex;gap:14px;flex-wrap:wrap;align-items:center;margin-top:32px}
.hnote{font-family:var(--mono);font-size:10.5px;font-weight:500;letter-spacing:.13em;
  text-transform:uppercase;color:var(--steel-3)}

/* The ledger welded to the bottom of the hero. */
.ledger{border-top:1px solid var(--black-4);display:grid;grid-template-columns:repeat(2,1fr)}
@media(min-width:760px){.ledger{grid-template-columns:repeat(3,1fr)}}
@media(min-width:1080px){.ledger{grid-template-columns:repeat(6,1fr)}}
.lc{padding:22px;border-right:1px solid var(--black-4);border-bottom:1px solid var(--black-4);
  min-width:0}
/* min-height holds two lines of label so "MEDIAN YEARS IN BUSINESS" does not
   push its figure lower than the five beside it. The row of numbers has to
   share one baseline or it reads as six unrelated tiles. */
.lc .k{font-family:var(--mono);font-size:9.5px;font-weight:600;letter-spacing:.14em;
  text-transform:uppercase;color:var(--steel-3);line-height:1.45;min-height:2.9em}
.lc .v{font-family:var(--disp);font-size:clamp(29px,3.3vw,39px);font-weight:800;
  letter-spacing:-.042em;line-height:1;margin-top:6px;color:var(--orange);
  font-variant-numeric:tabular-nums}
.lc .n{font-size:12.5px;color:var(--steel-3);margin-top:6px;line-height:1.42}

/* ---------- the seven checks ---------- */
.checks{display:grid;grid-template-columns:1fr;border-top:3px solid var(--orange)}
@media(min-width:960px){.checks{grid-template-columns:repeat(3,1fr)}}
.chk{padding:28px 26px 30px;background:var(--white);
  border-bottom:1px solid var(--rule);border-right:1px solid var(--rule);min-width:0}
.chk .v{font-family:var(--disp);font-size:clamp(44px,5.4vw,62px);font-weight:900;
  letter-spacing:-.05em;line-height:.9;color:var(--clay);font-variant-numeric:tabular-nums}
.chk .v small{font-size:.4em;letter-spacing:-.01em}
.chk h3{margin-top:16px}
.chk p{font-size:15px;color:var(--ink-2);margin-top:11px;line-height:1.58}
.chk p b{color:var(--ink);font-weight:600}
.chk a{display:inline-block;margin-top:15px;font-family:var(--mono);font-size:10.5px;
  font-weight:600;letter-spacing:.13em;text-transform:uppercase;color:var(--clay);
  text-decoration:none;border-bottom:2px solid var(--orange);padding-bottom:3px}
.chk a:hover{color:var(--ink);border-bottom-color:var(--ink)}
.strip{display:grid;grid-template-columns:1fr;border-left:1px solid var(--rule)}
@media(min-width:700px){.strip{grid-template-columns:repeat(2,1fr)}}
@media(min-width:1100px){.strip{grid-template-columns:repeat(4,1fr)}}
.sm{padding:22px;background:var(--paper-2);border-right:1px solid var(--rule);
  border-bottom:1px solid var(--rule);min-width:0}
.sm .v{font-family:var(--disp);font-size:33px;font-weight:800;letter-spacing:-.045em;
  line-height:1;color:var(--orange);font-variant-numeric:tabular-nums}
.sm h4{margin-top:12px}
.sm p{font-size:14px;color:var(--ink-2);margin-top:8px;line-height:1.5}

/* ---------- guides ---------- */
.gcards{display:grid;grid-template-columns:1fr;border-top:3px solid var(--orange);
  border-left:1px solid var(--rule)}
@media(min-width:820px){.gcards{grid-template-columns:repeat(2,1fr)}}
.gcard{padding:28px 26px 30px;border-right:1px solid var(--rule);
  border-bottom:1px solid var(--rule);text-decoration:none;display:block;transition:.12s}
.gcard:hover{background:var(--paper-3)}
.gcard:hover .gd{color:var(--ink-2)}
.gcard:hover .gm{color:var(--orange)}
.gt{font-family:var(--disp);font-size:21px;font-weight:800;letter-spacing:-.03em;
  line-height:1.14;text-transform:uppercase}
.gd{font-size:15px;color:var(--ink-2);margin-top:11px;max-width:52ch}
.gm{font-family:var(--mono);font-size:10.5px;font-weight:600;letter-spacing:.13em;
  text-transform:uppercase;color:var(--clay);margin-top:16px}

/* ---------- closing ---------- */
section.closing{background:var(--black-2);color:#fff;border-top:1px solid var(--black-4)}
section.closing h2{color:#fff}
section.closing>.wrap>p{color:#B4BAC2;max-width:78ch;margin-top:16px;font-size:17px}
section.closing>.wrap>p b{color:#fff;font-weight:600}
section.closing .cols{display:grid;grid-template-columns:1fr;gap:0;margin-top:40px;
  border-top:1px solid var(--black-4);border-left:1px solid var(--black-4)}
@media(min-width:860px){section.closing .cols{grid-template-columns:repeat(3,1fr)}}
section.closing .cols>div{padding:24px;border-right:1px solid var(--black-4);
  border-bottom:1px solid var(--black-4)}
section.closing h4{color:#fff}
section.closing .cols p{color:#9DA4AC;font-size:14.5px;margin-top:10px;line-height:1.55}
section.closing .cols a{color:var(--orange);text-decoration:underline}
/* ---------- the city grid ---------- */
/* Eight boxes, four live and four not. The live box is a link with an orange
   button; the unbuilt one is a div with no button at all, because there is
   nothing behind it to click and a call to action on a city we have not
   collected would be a promise we cannot keep. */
.cities{display:grid;grid-template-columns:1fr;gap:16px}
@media(min-width:620px){.cities{grid-template-columns:repeat(2,1fr)}}
@media(min-width:1080px){.cities{grid-template-columns:repeat(4,1fr)}}
.cbox{background:var(--white);border:1px solid var(--rule);border-top:3px solid var(--orange);
  padding:24px 22px 22px;display:flex;flex-direction:column;min-width:0;
  text-decoration:none;transition:.13s}
.cbox:hover{border-color:var(--orange);background:var(--paper-3)}
.cstate{font-family:var(--mono);font-size:9.5px;font-weight:600;letter-spacing:.15em;
  text-transform:uppercase;color:var(--steel-2)}
.cname{font-family:var(--disp);font-size:clamp(22px,2.2vw,27px);font-weight:800;
  letter-spacing:-.035em;text-transform:uppercase;line-height:1.02;margin-top:9px;
  color:var(--ink)}
.cblurb{font-size:14px;color:var(--ink-2);margin-top:11px;line-height:1.5;flex:1}
.cstats{display:flex;gap:22px;margin:18px 0 0;padding-top:15px;
  border-top:1px solid var(--rule-2)}
.cstats .k{font-family:var(--mono);font-size:9px;font-weight:600;letter-spacing:.14em;
  text-transform:uppercase;color:var(--steel-2)}
.cstats .v{font-family:var(--disp);font-size:24px;font-weight:800;letter-spacing:-.04em;
  line-height:1.1;color:var(--orange);font-variant-numeric:tabular-nums;margin-top:3px}
.cgo{display:block;margin-top:18px;background:var(--orange-2);color:#150C03;
  font-family:var(--mono);font-size:10.5px;font-weight:700;letter-spacing:.13em;
  text-transform:uppercase;padding:13px 10px;text-align:center;transition:.13s}
.cbox:hover .cgo{background:var(--orange)}
/* Not built yet: no orange keyline, no button, dashed edge. */
.cbox.soon{background:transparent;border:1px dashed var(--rule);border-top:1px dashed var(--rule)}
.cbox.soon:hover{background:transparent;border-color:var(--rule)}
.cbox.soon .cname{color:var(--ink-3)}
.cbox.soon .cblurb{color:var(--steel-2)}
.csoon{margin-top:18px;padding-top:15px;border-top:1px solid var(--rule-2);
  font-family:var(--mono);font-size:9.5px;font-weight:600;letter-spacing:.14em;
  text-transform:uppercase;color:var(--steel-2)}
.boardnote{font-size:14.5px;color:var(--ink-2);margin-top:28px;max-width:74ch}
.boardnote b{color:var(--orange);font-weight:600}

/* ========================================================================
   7 - CITY PAGES
   generated by build/metro.py - do not hand-edit those HTML files
   ======================================================================== */

/* The city masthead is the same slab as the homepage hero, with the same
   ledger welded to the bottom. FLAT - no gradient of any kind. It has carried
   a radial peach glow and a diagonal stripe texture at different times; both
   are gone and neither should come back. A gradient is not in this system's
   vocabulary. */
.mast{background:var(--black);color:#fff}
.mast .wrap{padding-top:26px;padding-bottom:0}
.mast h1{color:#fff;max-width:22ch;font-size:clamp(34px,4.4vw,58px)}
.mast .lead{margin-top:20px;max-width:74ch;color:#C4C8CE;padding-bottom:40px}
.mast .lead b{color:#fff;font-weight:600}
.keyrow{display:grid;grid-template-columns:repeat(2,1fr);
  border-top:1px solid var(--black-4)}
@media(min-width:760px){.keyrow{grid-template-columns:repeat(4,1fr)}}
.key{padding:22px;border-right:1px solid var(--black-4);
  border-bottom:1px solid var(--black-4);min-width:0}
/* Every figure on a city page is orange - the masthead stats, the rank
   numbers, the aside table, the numeric table columns. On a dark page the
   figures are what the eye should land on, and giving three of them three
   different accent colours just made the row look like a chart legend. */
.key b{display:block;font-family:var(--disp);font-weight:800;font-size:clamp(30px,3.4vw,40px);
  line-height:1;letter-spacing:-.042em;font-variant-numeric:tabular-nums;color:var(--orange)}
.key i{display:block;font-style:normal;font-family:var(--mono);font-size:9.5px;
  font-weight:600;letter-spacing:.14em;text-transform:uppercase;color:var(--steel-3);
  margin-top:10px;line-height:1.45}
.key.hl b,.key.geo b{color:var(--orange)}

.jump{background:var(--paper-2);border-bottom:1px solid var(--rule);position:sticky;top:64px;z-index:50}
.jump .wrap{display:flex;gap:26px;overflow-x:auto;padding-top:12px;padding-bottom:12px}
.jump a{font-family:var(--mono);font-size:11px;letter-spacing:.1em;text-transform:uppercase;color:var(--ink-3);text-decoration:none;white-space:nowrap}
.jump a:hover{color:var(--ocean)}
/* header 64px + jump bar 39px. Without this the column heads float over the
   middle of the table when you scroll. */
thead th{top:103px}

/* ranked shortlist, set like a printed league table */
.rank{border-top:3px solid var(--orange)}
.rk{display:grid;grid-template-columns:38px 1fr;gap:14px;padding:20px 0;border-bottom:1px solid var(--rule-2)}
/* The action column is sized to hold the phone button and WEBSITE side by
   side at the current type size. It was 250px when the buttons were
   10.5px; at 12.5px the pair needs about 270px and silently wrapped to
   two rows. If the button type grows again, grow this with it. */
@media(min-width:860px){.rk{grid-template-columns:44px 1fr 296px;gap:24px}}
.rk .n{font-family:var(--disp);font-weight:800;font-size:26px;color:var(--orange);line-height:1;padding-top:4px;letter-spacing:-.04em;font-variant-numeric:tabular-nums}
.rk.top3 .n{color:var(--orange)}
.rk .nm{font-family:var(--sans);font-size:21px;font-weight:600;line-height:1.2;letter-spacing:-.02em}
.rk:hover{background:var(--paper-2)}
.rk .nm a{text-decoration:none;border-bottom:1px solid var(--rule)}
.rk .nm a:hover{color:var(--clay);border-bottom-color:var(--clay)}
.rk .meta{font-size:13px;color:var(--ink-3);margin-top:6px;display:flex;flex-wrap:wrap;gap:5px 14px;align-items:center}
.rk .meta b{color:var(--orange);font-weight:600;font-variant-numeric:tabular-nums}
.chips{display:flex;flex-wrap:wrap;gap:6px;margin-top:11px}
/* Every chip carries an orange outline. Three different border colours -
   green for stated, clay for method, grey for the rest - read as a chart
   legend on a dark background rather than as one row of facts. The outline is
   uniform; the FILL is what still distinguishes them: solid tint means the
   company states it, hollow means it is just a label. */
.chip{font-size:12.5px;padding:4px 9px;border:1px solid var(--orange);
  background:transparent;color:var(--ink-2)}
.chip.on{background:rgba(255,107,26,.22);color:#FFD0B0;font-weight:600}
.chip.m{background:transparent;color:var(--orange);font-weight:500}
/* A plain label - "Free inspection" - is not a differentiator, so its outline
   is the same orange at lower opacity. Still orange, still one family. */
.chip:not(.on):not(.m):not(.none){border-color:rgba(255,107,26,.42);color:var(--ink-3)}
/* The empty state is the one chip that is NOT orange - it is the absence of a
   fact, and outlining it like a fact would be a lie. */
.chip.none{border:1px dashed var(--rule);color:var(--ink-3)}
/* The buttons are a direct child of the .rk grid, so on a phone - where .rk is
   two columns, 38px rank gutter plus content - they auto-place into the FIRST
   free cell, which is the rank gutter on row 2. That put the phone number and
   Website button hard against the left edge while the name, meta line and chips
   sat indented in column 2. Pinning them to column 2 lines them up with the
   content they belong to. At 860px the grid gains a third column and the
   buttons move into it, right-aligned, as before. */
.rk .act{grid-column:2;display:flex;flex-wrap:wrap;gap:8px;align-self:start;margin-top:12px}
@media(min-width:860px){.rk .act{grid-column:3;margin-top:2px;justify-content:flex-end}}
.act a{font-family:var(--mono);font-size:12.5px;font-weight:600;letter-spacing:.08em;text-transform:uppercase;text-decoration:none;padding:11px 17px;border:1px solid var(--ink-3);white-space:nowrap;transition:.13s}
.act a:hover{background:var(--ink);color:var(--black)}
.act a.p{background:var(--orange-2);border-color:var(--orange-2);color:#150C03}
.act a.p:hover{background:var(--orange);border-color:var(--orange)}
.act span.none{font-size:12.5px;color:var(--ink-3);align-self:center}

/* quote block */
.quote{background:var(--paper-2)}
.qgrid{display:grid;grid-template-columns:1fr;gap:32px}
@media(min-width:940px){.qgrid{grid-template-columns:.92fr 1.08fr;gap:52px;align-items:start}}
.qsay h2{max-width:22ch}
.qsay p{color:var(--ink-2);margin-top:15px;font-size:16.5px}
.qsay ul{margin:18px 0 0 20px;color:var(--ink-2);font-size:15.5px}
.qsay li{margin:8px 0}
.qbox{background:var(--white);border:1px solid var(--rule);border-top:4px solid var(--orange);padding:0}
.qbox .qh{padding:15px 20px;background:var(--black);color:#fff;font-family:var(--mono);font-size:11px;font-weight:600;letter-spacing:.13em;text-transform:uppercase}
.qbody{padding:18px 20px 20px;min-height:430px}
.qnote{padding:13px 20px;border-top:1px solid var(--rule);background:var(--paper-2);font-size:12.5px;color:var(--ink-3);line-height:1.5}

/* filters + table */
.tools{display:flex;flex-wrap:wrap;gap:10px;align-items:center;margin-bottom:16px}
.tools input{flex:1;min-width:220px;font-family:var(--sans);font-size:15px;padding:11px 14px;border:1px solid var(--rule);background:var(--white);color:var(--ink)}
.tools input:focus{outline:none;border-color:var(--ink)}
.filters{display:flex;flex-wrap:wrap;gap:7px;margin-bottom:16px}
.f{font-family:var(--sans);font-size:13.5px;padding:7px 13px;border:1px solid var(--rule);background:var(--white);color:var(--ink-2);cursor:pointer;transition:.13s}
.f:hover{border-color:var(--ink-3)}
.f.on{background:var(--orange-2);border-color:var(--orange-2);color:#150C03}
.count{font-family:var(--mono);font-size:12px;color:var(--ink-3);margin-top:12px;letter-spacing:.05em}
.count b{color:var(--orange);font-weight:600}
/* Numeric table columns - review counts, years, ratings. */
td.num{color:var(--orange);font-weight:600}
.empty{padding:40px 0;text-align:center;color:var(--ink-3);font-size:15px}

.mapfig{margin:0;border:1px solid var(--black-4);background:var(--black-2);overflow:hidden}
.mapfig figcaption{padding:13px 18px;font-size:12.5px;color:var(--steel-3);background:var(--black-2);line-height:1.5}
.mapfig figcaption a{color:#C4C8CE}
.towns{display:flex;flex-wrap:wrap;gap:7px;margin-top:18px}
.town{font-size:13px;padding:5px 11px;border:1px solid var(--rule);background:var(--white);color:var(--ink-2)}
.town b{color:var(--ink)}
.town b{font-weight:600;color:var(--ink)}
.town i{font-style:normal;font-family:var(--mono);font-size:11px;color:var(--ocean);margin-left:5px}

.localgrid{display:grid;grid-template-columns:1fr;gap:34px}
@media(min-width:940px){.localgrid{grid-template-columns:1.35fr .65fr;gap:52px;align-items:start}}
.aside{border-top:3px solid var(--orange);padding-top:16px}
.aside h4{font-family:var(--mono);font-size:11px;font-weight:500;letter-spacing:.12em;text-transform:uppercase;color:var(--ink-3);margin-bottom:14px}
.aside dl{display:grid;grid-template-columns:1fr auto;gap:0}
.aside dt{font-size:14.5px;color:var(--ink-2);padding:9px 0;border-bottom:1px solid var(--rule-2)}
.aside dd{font-family:var(--mono);font-size:14.5px;font-weight:600;text-align:right;padding:9px 0;border-bottom:1px solid var(--rule-2);font-variant-numeric:tabular-nums;color:var(--orange)}
.aside p{font-size:13px;color:var(--ink-3);margin-top:14px;line-height:1.55}

/* The breadcrumb sits midway between the bottom of the nav and the cap
   height of the h1. It is not an even 20px, because the h1 carries about
   17px of invisible leading above its capitals (line-height .95 on a
   58px face) - matching the CSS numbers made the crumb look glued to
   the headline. This value is set against the RENDERED pixels. */
/* The longest breadcrumb on the site is DFW's - "Foundation Select >
   Dallas-Fort Worth" - and at a flat 12.5px it wraps to two lines on any
   phone narrower than 414px, which looks like a mistake rather than a
   label. The size is therefore fluid: 12.5px from 390px up, easing down
   to 11px on the narrowest handsets, with the tracking tightened to
   match. 320px still wraps - it did before this rule existed too, and
   buying it back would mean a crumb smaller than the original. */
.crumb{font-family:var(--mono);font-size:clamp(11px,3.2vw,12.5px);font-weight:500;letter-spacing:.05em;
  text-transform:uppercase;color:var(--ink-3);margin-bottom:19px}
@media(min-width:480px){.crumb{letter-spacing:.1em}}
.crumb a{color:var(--ink-3);text-decoration:none}
.crumb a:hover{color:var(--orange)}


/* ========================================================================
   8 - GUIDES, FAQ, METHOD, CONTACT
   the hand-written prose pages
   ======================================================================== */

/* Guides get a light masthead where the directory pages get a black one. The
   distinction is deliberate and it is a rule, not a one-off: dark means data,
   light means reading. The heavy bottom rule is what ties it to the system. */
.ghead{padding:30px 0 42px;border-bottom:3px solid var(--orange);background:var(--black)}
.ghead h1{max-width:20ch}
.ghead .lead{margin-top:20px;max-width:88ch}
/* Prose caps at 70ch for readability, so a 1180px shell leaves a dead
   gutter between the text and the contents rail. Narrow the guide shell
   instead of widening the measure. */
.gbody{padding:52px 0}
/* Grid items default to min-width:auto, so a wide price table inside .prose
   pushed the whole column past the viewport on phones - the .tblwrap
   scroller never got a chance to work. */
.gcols{display:grid;grid-template-columns:1fr;gap:40px;max-width:1000px}
.gcols>*{min-width:0}
@media(min-width:1000px){.gcols{grid-template-columns:minmax(0,1fr) 210px;gap:48px;align-items:start}}
.toc{position:sticky;top:92px;border-top:3px solid var(--orange);padding-top:14px}
.toc h4{font-family:var(--mono);font-size:10px;font-weight:600;letter-spacing:.14em;text-transform:uppercase;color:var(--ink-3);margin-bottom:12px}
.toc a{display:block;font-size:14px;color:var(--ink-2);text-decoration:none;padding:6px 0;border-bottom:1px solid var(--rule-2);line-height:1.4}
.toc a:hover{color:var(--clay)}
.srcnote{font-size:13px;color:var(--ink-3);border-left:3px solid var(--rule);padding:4px 0 4px 14px;margin:16px 0;line-height:1.55}
.srcnote b{color:var(--ink-2)}
.pricetable td:first-child{font-weight:600;color:var(--ink)}
.pricetable td{vertical-align:top}
.pricetable .src{display:block;font-size:12px;color:var(--ink-3);margin-top:4px;line-height:1.45}
.metrobar{display:grid;grid-template-columns:120px 1fr 52px;gap:12px;align-items:center;padding:9px 0;border-bottom:1px solid var(--rule-2);font-size:14.5px}
.metrobar .bar{height:9px;background:var(--paper-3);position:relative}
.metrobar .bar span{position:absolute;left:0;top:0;bottom:0;background:var(--ocean)}
.metrobar .v{font-family:var(--mono);font-size:13.5px;text-align:right;font-variant-numeric:tabular-nums}
.cta{border:1px solid var(--ocean);background:var(--white);padding:26px 28px;margin:38px 0;
  box-shadow:inset 0 3px 0 var(--ocean)}
.cta h4{font-family:var(--serif);font-size:23px;margin-bottom:8px}
.cta p{font-size:15.5px;color:var(--ink-2);margin-bottom:16px}
.cta .links{display:flex;flex-wrap:wrap;gap:8px}
.cta .links a{font-size:14px;text-decoration:none;padding:9px 15px;border:1px solid var(--rule);transition:.14s}
.cta .links a:hover{border-color:var(--ocean);color:var(--ocean);background:var(--ocean-tint)}
/* Grid items default to min-width:auto, so a wide price table inside .prose
   pushed the whole column past the viewport on phones - the .tblwrap
   scroller never got a chance to work. */
@media(min-width:1000px){}
.weights td:first-child{font-weight:600;color:var(--ink)}
.weights td.w{font-family:var(--mono);font-size:18px;font-weight:600;color:var(--orange);text-align:right;font-variant-numeric:tabular-nums}
.mail{font-family:var(--mono);font-size:20px;color:var(--orange);word-break:break-all}
details{border-bottom:1px solid var(--rule-2)}
summary{font-family:var(--disp);font-weight:800;font-size:19px;line-height:1.2;letter-spacing:-.025em;text-transform:uppercase;padding:20px 36px 20px 0;cursor:pointer;list-style:none;position:relative}
summary::-webkit-details-marker{display:none}
summary::after{content:"+";position:absolute;right:4px;top:18px;font-family:var(--mono);font-size:20px;color:var(--clay)}
details[open] summary::after{content:"\2013"}
details p{padding:0 0 22px;color:var(--ink-2);font-size:16px;line-height:1.6}
details p a{color:var(--clay);font-weight:600;text-decoration:none;white-space:nowrap}
details p a:hover{text-decoration:underline}


/* ---------- the guides hub list ----------
   This block was missing from site.css entirely. It lives in
   build/guides.py as INDEX_CSS, which is passed to shell() as extra_css -
   and shell() ignores extra_css, so the four cards on /guides/ rendered as
   raw underlined anchors with no spacing. Every other module's CSS made it
   across during the extraction; this one did not because it is the only
   block added as "CSS + INDEX_CSS" rather than plain CSS.

   Each card is one big <a>. The question is the link and carries the only
   underline; the kicker above it and the summary below it are supporting
   text and must not look clickable, or the card reads as three separate
   links stacked on top of each other - which is what "jumbled" was. */
.glist{border-top:2px solid var(--ochre)}
.gitem{display:block;padding:30px 0;border-bottom:1px solid var(--rule-2);
  text-decoration:none;transition:.13s}
.gitem:hover{background:var(--paper-2)}
.gitem .gk{font-family:var(--mono);font-size:11px;font-weight:500;letter-spacing:.12em;
  text-transform:uppercase;color:var(--ochre);margin-bottom:11px;text-decoration:none}
.gitem .gt{font-family:var(--disp);font-weight:800;text-transform:uppercase;
  font-size:clamp(24px,3vw,31px);line-height:1.15;letter-spacing:-.025em;
  text-decoration:underline;text-decoration-thickness:1px;
  text-decoration-color:var(--rule);text-underline-offset:5px}
.gitem:hover .gt{color:var(--ochre);text-decoration-color:var(--ochre)}
.gitem .gd{font-size:16px;color:var(--ink-2);margin-top:14px;line-height:1.6;
  max-width:74ch;text-decoration:none}