/* 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:28px;align-items:center}
@media(min-width:960px){nav.top{display:flex}}
nav.top a{font-family:var(--mono);font-size:11px;font-weight:500;letter-spacing:.14em;
  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:11px;font-weight:700;letter-spacing:.13em;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:10.5px;font-weight:500;letter-spacing:.13em;
  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:44px;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)}
@media(min-width:860px){.rk{grid-template-columns:44px 1fr 250px;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)}
.rk .act{display:flex;flex-wrap:wrap;gap:8px;align-self:start;margin-top:12px}
@media(min-width:860px){.rk .act{margin-top:2px;justify-content:flex-end}}
.act a{font-family:var(--mono);font-size:10.5px;font-weight:600;letter-spacing:.11em;text-transform:uppercase;text-decoration:none;padding:9px 14px;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}

details[open]

.crumb{font-family:var(--mono);font-size:10.5px;font-weight:500;letter-spacing:.13em;
  text-transform:uppercase;color:var(--ink-3);margin-bottom:20px}
.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:48px 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}