/* the public permit pages (/permits/..., /leads/...: scripts/build_place_pages.mjs). Concept B, map first (Genaro 10/21).
   The home page's colours, fonts and header (hero2.css); one stylesheet for every page so a visitor loads it once. */
:root{
  --bg:#081624;--bg2:#0a1c30;--deep:#06101c;
  --tile1:#14345a;--tile2:#0c2442;--edge:rgba(96,165,250,.55);--edge2:rgba(96,165,250,.28);
  --gold:#d4a53a;--gold2:#dcb24f;--goldHi:#e6c87a;--goldDeep:#c48f24;
  --early:#38bdf8;--building:#d4a53a;--finishing:#22c55e;--unknown:#8aa0b8;
  --text:#fff;--muted:#b8cbe0;--muted2:#c7d6e6;--line:rgba(125,211,252,.16);
  --r:18px;--max:1160px;
}
*{box-sizing:border-box}
body{margin:0;background:var(--bg);color:var(--text);
  font:400 17px/1.6 Inter,-apple-system,BlinkMacSystemFont,'Segoe UI',sans-serif;-webkit-font-smoothing:antialiased;overflow-x:hidden}
a{color:var(--gold);text-decoration:none}
img{max-width:100%;display:block;height:auto}
.wrap{max-width:var(--max);margin:0 auto;padding:0 20px}
.narrow{max-width:820px}
h1,h2,h3{margin:0}
h2{font-family:'Barlow Condensed','Arial Narrow',sans-serif;font-weight:800;text-transform:uppercase;letter-spacing:.01em;line-height:1.04;font-size:clamp(28px,3.6vw,42px)}
h2 a{color:inherit}
.eyebrow{display:inline-flex;align-items:center;gap:10px;font:800 14px/1.2 'Barlow Condensed',sans-serif;text-transform:uppercase;letter-spacing:.13em;color:var(--gold);margin:0 0 12px}
.eyebrow::before{content:'';width:20px;height:3px;background:var(--gold);border-radius:2px;flex:none}
.lede{color:var(--muted2);font-size:clamp(16px,1.7vw,19px);max-width:680px;margin:10px 0 0}
.small{color:var(--muted);font-size:14.5px;margin:10px 0 0}
.tile{background:linear-gradient(180deg,var(--tile1),var(--tile2));border:1.5px solid var(--edge);border-radius:var(--r)}
.btn{display:inline-flex;align-items:center;justify-content:center;gap:10px;background:linear-gradient(180deg,#dcb24f,#c89a2c);color:#0b1f3f;
  font:800 clamp(18px,1.8vw,21px)/1.15 Barlow,sans-serif;border-radius:14px;padding:0 24px;min-height:58px;text-align:center;
  box-shadow:0 10px 26px rgba(0,0,0,.4),inset 0 1px 0 rgba(255,255,255,.22);transition:transform .15s,box-shadow .15s}
.btn:hover{transform:translateY(-1px);box-shadow:0 14px 32px rgba(0,0,0,.5)}
.btn svg{width:1em;height:1em;flex:none}
.hx-nav .hx-links{gap:clamp(10px,2vw,24px)}

/* breadcrumbs */
.crumbs{list-style:none;display:flex;flex-wrap:wrap;gap:4px 0;margin:0;padding:16px 0 0;font-size:14px;color:var(--muted)}
.crumbs li{min-width:0;overflow-wrap:anywhere}
.crumbs li+li::before{content:'\203A';margin:0 8px;color:var(--edge)}
.crumbs a{color:#93c5fd}

/* the hero: the panel beside the map (one column on a phone, the map first) */
.pl-hero{padding:14px 0 40px;background:radial-gradient(60% 70% at 0% 0%,rgba(37,84,180,.30),transparent 70%),linear-gradient(180deg,#0B1D3A 0%,var(--bg) 100%)}
.pl-stage{display:grid;grid-template-columns:minmax(300px,380px) minmax(0,1fr);gap:24px;align-items:center}
.pl-panel{padding:24px 24px 22px;min-width:0}
.pl-panel h1{font-family:'Barlow Condensed','Arial Narrow',sans-serif;font-weight:800;text-transform:uppercase;letter-spacing:.01em;line-height:1.02;
  font-size:clamp(30px,3.4vw,44px);overflow-wrap:anywhere}
.pl-big{margin:12px 0 0;font:700 clamp(19px,1.9vw,23px)/1.3 Barlow,Inter,sans-serif;color:#E6ECF6}
.pl-split{margin:6px 0 0;color:var(--muted2);font-size:15.5px;line-height:1.4}
.pl-why{margin:10px 0 0;color:var(--muted2);font-size:15.5px;line-height:1.45}
.pl-panel .btn{width:100%;margin-top:18px}
.chips{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:8px;margin-top:16px}
.chip{display:flex;flex-direction:column;gap:2px;padding:9px 10px;border:1.5px solid var(--edge2);border-radius:12px;background:rgba(6,18,42,.55);font-size:13.5px;color:var(--muted2);min-width:0}
.chip i{display:inline-block;width:10px;height:10px;border-radius:50%;margin-right:6px;vertical-align:0}
.chip b{font:800 21px/1.1 'Barlow Condensed',sans-serif;color:#fff}
.c-early i,.pl-legend i.c-early{background:var(--early)}
.c-building i,.pl-legend i.c-building{background:var(--building)}
.c-finishing i,.pl-legend i.c-finishing{background:var(--finishing)}
.pl-legend i.c-trade{background:var(--gold)}
.pl-map{margin:0;min-width:0}
.pl-svg{display:block;width:100%;height:auto;max-height:640px;border-radius:20px;border:1.5px solid var(--edge2);
  background:radial-gradient(70% 70% at 50% 45%,#08182c,#050d19 75%);box-shadow:0 0 0 1px rgba(56,189,248,.12),0 0 60px rgba(56,189,248,.14),0 24px 60px rgba(0,0,0,.45)}
.pl-svg .land{fill:#11304f;stroke:rgba(125,190,255,.55);stroke-width:1.6;stroke-linejoin:round}
.pl-svg .edge{fill:none;stroke:rgba(186,230,253,.85);stroke-width:1.6;stroke-linejoin:round}
.pl-svg .edge-glow{fill:none;stroke:#38bdf8;stroke-width:5;stroke-opacity:.55;stroke-linejoin:round}
.pl-svg .rings circle{fill:none;stroke:rgba(56,189,248,.10);stroke-width:1.5}
.pl-svg .c-trade{fill:var(--gold)}.pl-svg .c-early{fill:var(--early)}.pl-svg .c-building{fill:var(--building)}.pl-svg .c-finishing{fill:var(--finishing)}.pl-svg .c-unknown{fill:var(--unknown)}
/* the projects as glowing dot groups (concept B): a blurred halo under each small dot */
.pl-svg .glow circle{opacity:.62}
.pl-svg .dots circle{opacity:.95;stroke:rgba(255,255,255,.55);stroke-width:.8}
.pl-svg .twn circle{fill:#fff;stroke:#071426;stroke-width:2}
.pl-svg .twn text{fill:#fff;font-family:'Barlow Condensed','Arial Narrow',sans-serif;font-weight:700;paint-order:stroke;stroke:#071426;stroke-width:5px;stroke-linejoin:round}
.pl-svg .twn.big text{font-size:1.25em;fill:var(--goldHi)}
.pl-mapbox{position:relative}
.pl-badge{position:absolute;left:14px;top:14px;max-width:calc(100% - 28px);display:flex;flex-direction:column;gap:2px;padding:12px 16px 12px;
  background:rgba(6,16,28,.84);border:1.5px solid var(--gold);border-radius:14px;color:#fff;box-shadow:0 10px 30px rgba(0,0,0,.45);
  -webkit-backdrop-filter:blur(6px);backdrop-filter:blur(6px);transition:transform .15s}
.pl-badge:hover{transform:translateY(-1px)}
.pl-badge.tr{left:auto;right:14px}.pl-badge.bl{top:auto;bottom:14px}.pl-badge.br{left:auto;right:14px;top:auto;bottom:14px}
.pl-badge b{font:800 clamp(28px,3.2vw,40px)/1 'Barlow Condensed',sans-serif;background:linear-gradient(180deg,var(--goldHi),var(--gold2) 50%,var(--goldDeep));
  -webkit-background-clip:text;background-clip:text;color:transparent}
.pl-badge span{font-size:14.5px;line-height:1.3;color:#E6ECF6;overflow-wrap:anywhere}
.pl-badge em{font-style:normal;display:inline-flex;align-items:center;gap:6px;margin-top:4px;font:700 14px/1.2 Barlow,Inter,sans-serif;color:var(--gold)}
.pl-badge em svg{width:1em;height:1em}
@media (max-width:560px){.pl-badge{left:8px;top:8px;padding:6px 9px;max-width:50%;border-radius:10px;border-width:1px}.pl-badge.tr,.pl-badge.br{left:auto;right:8px}
  .pl-badge.bl,.pl-badge.br{top:auto;bottom:8px}.pl-badge b{font-size:19px}.pl-badge span{font-size:11px;line-height:1.25}.pl-badge em{font-size:11px;margin-top:2px;gap:4px}}
.pl-legend{display:flex;flex-wrap:wrap;gap:6px 16px;margin:10px 4px 0;font-size:13.5px;color:var(--muted2)}
.pl-legend span{display:inline-flex;align-items:center;gap:6px}
.pl-legend i{display:inline-block;width:12px;height:12px;border-radius:3px}
.pl-legend .pl-note{flex-basis:100%;color:var(--muted)}
.pl-legend .pl-credit{flex-basis:100%;color:var(--muted);font-size:12px;opacity:.8}
@media (max-width:900px){
  .pl-stage{grid-template-columns:minmax(0,1fr);gap:16px}
  .pl-map{order:-1}
}

/* the sections */
.pl-sec{padding:56px 0}
.pl-sec.first{padding-top:28px}
.alt{background:var(--bg2);border-top:1px solid var(--line);border-bottom:1px solid var(--line)}
.pl-sum{margin:0;font-size:clamp(17px,1.8vw,20px);line-height:1.6;color:#E6ECF6}
.pl-h1{font-family:'Barlow Condensed','Arial Narrow',sans-serif;font-weight:800;text-transform:uppercase;line-height:1.02;font-size:clamp(34px,4.6vw,56px)}
h2.st{margin:36px 0 0;font-size:clamp(24px,2.8vw,32px)}

/* work coming up: one tile per trade */
.trades{display:grid;grid-template-columns:repeat(4,minmax(0,1fr));gap:12px;margin-top:22px}
.trade{display:flex;flex-direction:column;gap:2px;padding:16px 16px 14px;color:var(--text);min-width:0;transition:border-color .15s,transform .15s}
.trade:hover{border-color:var(--gold);transform:translateY(-1px)}
.trade .tn{font:800 15px/1.2 'Barlow Condensed',sans-serif;letter-spacing:.06em;text-transform:uppercase;color:var(--muted2)}
.trade b{font:800 clamp(30px,3vw,38px)/1.05 'Barlow Condensed',sans-serif;background:linear-gradient(180deg,var(--goldHi),var(--gold2) 50%,var(--goldDeep));-webkit-background-clip:text;background-clip:text;color:transparent}
.trade .ts{font-size:13.5px;color:var(--muted);line-height:1.35}
@media (max-width:900px){.trades{grid-template-columns:repeat(3,minmax(0,1fr))}}
@media (max-width:620px){.trades{grid-template-columns:repeat(2,minmax(0,1fr));gap:8px}.trade{padding:12px}}

/* towns */
table.towns{width:100%;border-collapse:collapse;margin-top:20px;font-size:16px;table-layout:fixed}
.towns th,.towns td{padding:11px 10px;border-bottom:1px solid var(--line);text-align:right;overflow-wrap:anywhere}
.towns thead th{font:800 13px/1.2 'Barlow Condensed',sans-serif;letter-spacing:.08em;text-transform:uppercase;color:var(--muted)}
.towns th:first-child{text-align:left;width:34%}
.towns tbody th{font-weight:600}
.towns td{color:var(--muted2)}
.towns td:nth-child(2){color:#fff;font-weight:700}
@media (max-width:560px){.towns .opt{display:none}.towns th:first-child{width:auto}}

/* build stage ladder */
.ladder{list-style:none;padding:0;margin:22px 0 0;display:grid;grid-template-columns:repeat(7,minmax(0,1fr));gap:10px}
.ladder li{display:flex;flex-direction:column;align-items:center;text-align:center;gap:4px;min-width:0}
.ladder img{width:100%;max-width:120px;aspect-ratio:4/3;object-fit:cover;border-radius:12px;border:1.5px solid var(--edge2);background:var(--deep)}
.ladder .sn{font-size:13.5px;line-height:1.25;color:var(--muted2);margin-top:4px}
.ladder b{font:800 24px/1.05 'Barlow Condensed',sans-serif;color:var(--gold)}
@media (max-width:760px){
  .ladder{grid-template-columns:minmax(0,1fr);gap:6px}
  .ladder li{flex-direction:row;text-align:left;gap:12px;padding:6px 0;border-bottom:1px solid var(--line)}
  .ladder img{width:64px;flex:none}
  .ladder .sn{flex:1;margin:0;font-size:15.5px}
}

/* kinds + months */
.two{display:grid;grid-template-columns:minmax(0,1fr) minmax(0,1.2fr);gap:40px}
@media (max-width:900px){.two{grid-template-columns:minmax(0,1fr);gap:36px}}
.kinds{display:grid;gap:12px;margin-top:20px}
.kind{display:grid;grid-template-columns:minmax(0,1.3fr) minmax(0,1fr) auto;gap:12px;align-items:center;font-size:15.5px;color:var(--muted2)}
.kind .bar{height:10px;border-radius:6px;background:rgba(96,165,250,.14);overflow:hidden}
.kind .bar i{display:block;height:100%;border-radius:6px;background:linear-gradient(90deg,var(--goldDeep),var(--goldHi))}
.kind b{color:#fff;font-weight:700;min-width:64px;text-align:right}
.chart{margin:20px 0 0;padding:14px 14px 10px}
.chart svg{display:block;width:100%;height:auto}
.chart rect{fill:var(--gold)}
.chart rect.now{fill:rgba(212,165,58,.5)}
.chart text{font-family:Inter,sans-serif;text-anchor:middle}
.chart .v{fill:#fff;font-size:15px;font-weight:700}
.chart .m{fill:var(--muted);font-size:14px}
.chart figcaption{color:var(--muted);font-size:13.5px;margin-top:6px}

/* how to read a permit */
.steps{list-style:none;padding:0;margin:22px 0 0;display:grid;grid-template-columns:repeat(4,minmax(0,1fr));gap:14px}
.steps li{display:flex;gap:12px;align-items:flex-start;min-width:0}
.steps li>b{flex:none;width:34px;height:34px;border-radius:50%;display:grid;place-items:center;background:linear-gradient(180deg,var(--goldHi),var(--goldDeep));color:#0b1426;font:800 18px/1 Barlow,sans-serif}
.steps h3{font:700 18px/1.25 Barlow,Inter,sans-serif;margin-top:4px}
.steps p{margin:6px 0 0;color:var(--muted2);font-size:15px;line-height:1.5}
@media (max-width:900px){.steps{grid-template-columns:repeat(2,minmax(0,1fr))}}
@media (max-width:560px){.steps{grid-template-columns:minmax(0,1fr)}}

/* links: nearby towns, other trades, the lists */
.pills{display:flex;flex-wrap:wrap;gap:10px;margin-top:18px}
.pill{display:inline-flex;align-items:center;gap:8px;min-height:44px;padding:8px 14px;border:1.5px solid var(--edge2);border-radius:999px;color:#fff;background:rgba(6,18,42,.5);font-size:15.5px;max-width:100%}
.pill b{color:var(--gold)}
.pill.all{border-color:var(--gold);color:var(--gold)}
.places{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:12px;margin-top:22px}
.place{display:flex;flex-direction:column;gap:2px;padding:16px 18px;color:var(--text);min-width:0;transition:border-color .15s}
.place:hover{border-color:var(--gold)}
.place .pn{font:700 19px/1.25 Barlow,Inter,sans-serif;overflow-wrap:anywhere}
.place b{font:800 32px/1.05 'Barlow Condensed',sans-serif;color:var(--gold)}
.place .ps{font-size:14px;color:var(--muted);overflow-wrap:anywhere}
@media (max-width:900px){.places{grid-template-columns:repeat(2,minmax(0,1fr))}}
@media (max-width:520px){.places{grid-template-columns:minmax(0,1fr)}}

/* the last call */
.pl-final{padding:72px 0;text-align:center;background:radial-gradient(60% 80% at 50% 0%,rgba(56,189,248,.16),transparent 70%),var(--deep)}
.pl-final h2{font-size:clamp(32px,4.6vw,54px)}
.pl-final .btn{margin-top:26px}

footer{border-top:1px solid var(--line);padding:32px 0;color:var(--muted);font-size:15px;background:var(--deep)}
footer .wrap{display:flex;gap:20px;flex-wrap:wrap;align-items:center}
footer .sp{margin-left:auto;display:flex;flex-wrap:wrap;gap:12px 20px}
footer a{color:var(--muted);display:inline-flex;align-items:center;min-height:44px}
footer .contact{color:var(--text)}
footer .contact a{display:inline;min-height:0;color:var(--gold);font-weight:700}
footer .tagline{font:800 13px/1 'Barlow Condensed',sans-serif;letter-spacing:.2em;color:var(--gold)}
@media (max-width:560px){.wrap{padding:0 16px}.pl-sec{padding:44px 0}.pl-panel{padding:20px 18px}}
/* "This week" + questions + the language link (10/22, SEO step 2) */
.pl-week{padding-top:8px}
.wk-tile{padding:22px 22px 18px}
.wk-tile h2{margin:0}
.wk{display:grid;grid-template-columns:repeat(auto-fit,minmax(150px,1fr));gap:12px;margin-top:16px}
.wk>div{min-width:0;padding:12px 14px;border:1px solid var(--edge2);border-radius:12px;background:rgba(6,18,42,.45)}
.wk b{display:block;font:800 clamp(26px,3.2vw,34px)/1.05 'Barlow',sans-serif;color:var(--gold)}
.wk span{display:block;margin-top:4px;color:var(--muted2);font-size:15px;line-height:1.35;overflow-wrap:anywhere}
.wk-where{margin:14px 0 0;color:#E6ECF6;font-size:16px;line-height:1.5}
.faq{display:grid;gap:14px;margin-top:18px}
.qa{padding:16px 18px;border:1px solid var(--line);border-radius:14px;background:rgba(6,18,42,.35)}
.qa h3{margin:0;font:700 18px/1.35 'Inter',sans-serif;color:#fff}
.qa p{margin:8px 0 0;color:var(--muted2);font-size:16px;line-height:1.55}
a.lang{color:var(--gold);white-space:nowrap}
@media (max-width:560px){.wk-tile{padding:16px 14px 14px}.wk{grid-template-columns:minmax(0,1fr) minmax(0,1fr);gap:8px}.wk>div{padding:10px}}