:root{
--bg:#0c0d10;
--bg-2:#0a0b0e;
--panel:#14161b;
--panel-2:#1a1d24;
--panel-3:#22262f;
--line:#2a2f3a;
--line-2:#363c49;
--text:#e7e9ee;
--muted:#8c93a3;
--muted-2:#646b7a;
--accent:#cfe24a; /* lime-yellow brand accent */
--accent-2:#e0ee7e;
--accent-soft:#313a14;
--accent-rgb:207,226,74;
--high:#52b788;
--medium:#e0b252;
--low:#e07a5f;
--none:#5a6170;
/* category accents */
--c-dev:#cfe24a; --c-arch:#6ea8fe; --c-eng:#5fc9a0; --c-cons:#b08be0; --c-gc:#e0875f; --c-sub:#c9b15f;
--shadow:0 10px 40px rgba(0,0,0,.45);
--shadow-lg:0 24px 70px rgba(0,0,0,.55);
--r:10px;
--maxw:1240px;
font-synthesis:none;
}
*{box-sizing:border-box}
html{scroll-behavior:smooth}
html,body{height:100%}
body{
margin:0;background:var(--bg);color:var(--text);
font-family:'Inter',system-ui,-apple-system,Segoe UI,Roboto,sans-serif;
font-size:15px;line-height:1.6;-webkit-font-smoothing:antialiased;
}
h1,h2,h3,h4,.brand-mark,.display{font-family:'Space Grotesk','Inter',system-ui,sans-serif;letter-spacing:-.01em}
/* Never leave one word stranded on a line by itself.
Titles and the sentence under them are split into even lines; everywhere
else the browser just pulls a word down to avoid the lone last one. */
body{text-wrap:pretty}
/* Balancing splits a heading into even lines, which is right for a title
standing on its own but wrong inside a card: it leaves the first line short
of the card's width and the headline looks broken. So only the standalone
ones balance; card titles fill their line and just avoid a lone last word. */
h1,h2,.feature h3,
.section-head p,.hero p.lede,.newsletter p,.promo p,.benefit-block p,.ent-sub{text-wrap:balance}
a{color:inherit}
img{max-width:100%;display:block}
.muted{color:var(--muted);font-weight:400}
.container{max-width:var(--maxw);margin:0 auto;padding:0 28px}
/* buildings is now a normal scrolling section page (gallery + map toggle) */
/* ======================= Buttons ======================= */
.btn{display:inline-flex;align-items:center;gap:8px;justify-content:center;
height:44px;padding:0 22px;border-radius:9px;font-size:14px;font-weight:600;
font-family:inherit;cursor:pointer;border:1px solid transparent;text-decoration:none;
transition:.16s;white-space:nowrap}
.btn-primary{background:var(--accent);color:#161109;border-color:var(--accent)}
.btn-primary:hover{background:var(--accent-2);border-color:var(--accent-2);transform:translateY(-1px)}
.btn-outline{background:transparent;color:var(--text);border-color:var(--line-2)}
.btn-outline:hover{border-color:var(--accent);color:var(--accent)}
.btn-sm{height:36px;padding:0 14px;font-size:13px;border-radius:8px}
.btn-block{width:100%}
/* ======================= Site nav ======================= */
.sitenav{position:sticky;top:0;z-index:1300;background:rgba(12,13,16,.82);
backdrop-filter:saturate(140%) blur(12px);border-bottom:1px solid var(--line)}
.sitenav-inner{max-width:var(--maxw);margin:0 auto;display:flex;align-items:center;gap:26px;height:64px;padding:0 28px}
.brand{display:flex;align-items:center;gap:12px;text-decoration:none}
.brand-logo{display:block;width:42px;height:42px;flex:0 0 auto}
.brand-logo img,.brand-logo svg{display:block;width:100%;height:100%;border-radius:10px;object-fit:cover}
.brand-name{font-family:'Space Grotesk',sans-serif;font-weight:700;font-size:22px;letter-spacing:.2px;color:var(--text);white-space:nowrap}
.nav-links{display:flex;gap:4px;margin-left:8px}
.nav-links a{padding:8px 13px;border-radius:8px;font-size:14px;font-weight:500;color:var(--muted);text-decoration:none;transition:.14s}
.nav-links a:hover{color:var(--text);background:var(--panel-2)}
.nav-links a.active{color:var(--accent)}
.nav-right{margin-left:auto;display:flex;align-items:center;gap:12px}
.nav-toggle{display:none;background:none;border:1px solid var(--line);border-radius:8px;width:40px;height:40px;color:var(--text);cursor:pointer;font-size:18px}
/* ======================= Tool bar (buildings) ======================= */
.tool-bar{display:flex;align-items:center;gap:22px;padding:0 22px;height:58px;
background:linear-gradient(180deg,#15171d,#101216);border-bottom:1px solid var(--line);flex:0 0 auto;z-index:1100}
.tool-title{font-family:'Space Grotesk',sans-serif;font-weight:600;font-size:15px}
.city-select{width:auto;min-width:180px;height:40px;border-color:var(--line-2);font-weight:600;font-family:'Space Grotesk',sans-serif}
.city-select:focus{border-color:var(--accent)}
.search-wrap{flex:1;max-width:520px}
#search{width:100%;height:40px;border-radius:var(--r);background:var(--panel-2);border:1px solid var(--line);
color:var(--text);padding:0 16px;font-size:14px;outline:none;transition:.15s}
#search::placeholder{color:var(--muted-2)}
#search:focus{border-color:var(--accent);box-shadow:0 0 0 3px rgba(207,226,74,.12)}
.topbar-stats{margin-left:auto;font-size:13px;font-weight:600;white-space:nowrap}
.topbar-stats #resultCount{color:var(--accent)}
/* ======================= Hero ======================= */
.hero{position:relative;overflow:hidden;border-bottom:1px solid var(--line);
background:radial-gradient(1200px 600px at 70% -10%,rgba(207,226,74,.10),transparent 60%),
radial-gradient(900px 500px at 10% 10%,rgba(110,168,254,.06),transparent 55%),var(--bg-2)}
.hero-grid{position:absolute;inset:0;background-image:linear-gradient(var(--line) 1px,transparent 1px),linear-gradient(90deg,var(--line) 1px,transparent 1px);
background-size:64px 64px;opacity:.10;mask-image:radial-gradient(circle at 60% 30%,#000,transparent 75%)}
.hero-inner{position:relative;max-width:var(--maxw);margin:0 auto;padding:96px 28px 88px;text-align:center}
.eyebrow{display:inline-flex;align-items:center;gap:8px;font-size:12px;letter-spacing:2px;text-transform:uppercase;
color:var(--accent);border:1px solid var(--line-2);background:var(--panel);padding:6px 14px;border-radius:30px;font-weight:600;margin-bottom:24px}
.eyebrow .pulse{width:7px;height:7px;border-radius:50%;background:var(--accent);box-shadow:0 0 0 0 rgba(207,226,74,.6);animation:pulse 2.4s infinite}
@keyframes pulse{0%{box-shadow:0 0 0 0 rgba(207,226,74,.5)}70%{box-shadow:0 0 0 9px rgba(207,226,74,0)}100%{box-shadow:0 0 0 0 rgba(207,226,74,0)}}
.hero h1{font-size:clamp(34px,6vw,68px);line-height:1.04;margin:0 0 22px;font-weight:700}
.hero h1 .grad{background:linear-gradient(120deg,var(--accent),var(--accent-2) 60%,#fff);-webkit-background-clip:text;background-clip:text;color:transparent}
.hero p.lede{font-size:clamp(16px,2vw,20px);color:#b9bfca;max-width:680px;margin:0 auto 34px}
.hero-cta{display:flex;gap:14px;justify-content:center;flex-wrap:wrap}
.hero-stats{display:flex;gap:38px;justify-content:center;flex-wrap:wrap;margin-top:54px}
.hero-stat{text-align:center}
.hero-stat .n{font-family:'Space Grotesk',sans-serif;font-size:30px;font-weight:700;color:var(--text)}
.hero-stat .l{font-size:12px;color:var(--muted);text-transform:uppercase;letter-spacing:1.5px;margin-top:4px}
/* 360 ring motif in eyebrow / accents */
.dot-accent{color:var(--accent)}
/* ======================= Sections ======================= */
.section{padding:84px 0;border-bottom:1px solid var(--line)}
.section.alt{background:var(--bg-2)}
.section-head{max-width:880px;margin:0 auto 24px;text-align:center}
.section-head .eyebrow{display:none}
.section-head h2{font-size:clamp(26px,3.4vw,40px);margin:0 0 14px;line-height:1.12}
/* Wide enough that a short sentence stays on one line — only a genuinely long
one wraps, and `balance` above then splits it evenly. */
/* a quiet footnote under a page subtitle — needs to out-rank .section-head p */
.section-head p.head-note{color:var(--muted-2);font-size:13px;max-width:640px;margin:10px auto 0}
.section-head p{color:var(--muted);font-size:15.5px;margin:0 auto;max-width:840px}
.section-title-row{display:flex;align-items:flex-end;justify-content:space-between;gap:20px;margin-bottom:30px;flex-wrap:wrap}
.section-title-row h2{font-size:clamp(24px,3vw,34px);margin:0}
.section-title-row p{color:var(--muted);margin:6px 0 0;font-size:15px}
/* Feature rows (home) */
/* The words start level with the top of the card beside them and the buttons
finish level with its bottom, so both columns share the same top and bottom
edge whatever length the copy happens to be. */
.feature{display:grid;grid-template-columns:1fr 1fr;gap:54px;align-items:stretch;padding:64px 0;border-bottom:1px solid var(--line)}
.feature-text{display:flex;flex-direction:column}
.feature-text .eyebrow{align-self:flex-start} /* the tag keeps its own width */
.feature:nth-child(even) .feature-media{order:2}
.feature-text .eyebrow{margin-bottom:18px}
.feature-text h3{font-size:clamp(22px,2.6vw,30px);margin:0 0 14px}
.feature-text p{color:var(--muted);font-size:15.5px;margin:0 0 22px}
.feature-media{position:relative;border-radius:16px;border:1px solid var(--line);background:var(--panel);
min-height:320px;overflow:hidden;box-shadow:var(--shadow)}
.media-label{position:absolute;left:16px;top:16px;z-index:5;font-size:11px;letter-spacing:1.5px;text-transform:uppercase;
color:var(--muted);background:rgba(12,13,16,.7);border:1px solid var(--line);padding:5px 10px;border-radius:20px;backdrop-filter:blur(6px)}
/* mini map preview */
#homeMap{position:absolute;inset:0;background:#0a0b0d}
.map-overlay{position:absolute;inset:0;z-index:500;display:flex;align-items:flex-end;justify-content:center;
padding:22px;background:linear-gradient(to top,rgba(10,11,13,.85),transparent 55%);pointer-events:none}
.map-overlay .btn{pointer-events:auto}
/* generic visual placeholder */
.viz{position:absolute;inset:0;display:flex;flex-direction:column;gap:10px;padding:26px}
/* ======================= Cards grids ======================= */
.grid{display:grid;gap:18px}
.grid-3{grid-template-columns:repeat(3,1fr)}
.grid-4{grid-template-columns:repeat(4,1fr)}
.grid-2{grid-template-columns:repeat(2,1fr)}
.card2{background:var(--panel);border:1px solid var(--line);border-radius:14px;padding:22px;transition:.16s;text-decoration:none;color:inherit;display:block}
.card2:hover{border-color:var(--line-2);transform:translateY(-3px);box-shadow:var(--shadow)}
.card2 .ico{width:42px;height:42px;border-radius:10px;display:flex;align-items:center;justify-content:center;
background:var(--panel-3);border:1px solid var(--line);margin-bottom:16px;font-size:20px;color:var(--accent)}
.card2 h3{margin:0 0 8px;font-size:18px}
.card2 p{margin:0;color:var(--muted);font-size:14px}
/* tag / chip */
.tag{display:inline-flex;align-items:center;gap:6px;font-size:11px;font-weight:600;letter-spacing:.4px;
padding:4px 10px;border-radius:20px;border:1px solid var(--line);background:var(--panel-2);color:var(--muted);text-transform:uppercase}
.tag .dot{width:7px;height:7px;border-radius:50%}
.tag.sample{color:var(--accent);border-color:var(--accent-soft);background:rgba(207,226,74,.08)}
.cat-dev{--cc:var(--c-dev)} .cat-arch{--cc:var(--c-arch)} .cat-eng{--cc:var(--c-eng)}
.cat-cons{--cc:var(--c-cons)} .cat-gc{--cc:var(--c-gc)} .cat-sub{--cc:var(--c-sub)}
.tag.cat{color:var(--cc);border-color:color-mix(in srgb,var(--cc) 35%,var(--line))}
.tag.cat .dot{background:var(--cc)}
/* category tabs */
.tabs{display:flex;flex-wrap:wrap;gap:8px;margin-bottom:28px;justify-content:center}
.tab{padding:9px 16px;border-radius:30px;border:1px solid var(--line);background:var(--panel);color:var(--muted);
font-size:13.5px;font-weight:500;cursor:pointer;transition:.14s}
.tab:hover{color:var(--text);border-color:var(--line-2)}
.tab.active{color:var(--bg);background:var(--accent);border-color:var(--accent);font-weight:600}
/* firm/producer directory controls + pagination */
.firm-controls{display:flex;align-items:center;gap:10px;margin-bottom:22px;flex-wrap:wrap}
.firm-controls input[type=search]{height:38px;border-radius:8px;background:var(--panel-2);border:1px solid var(--line);color:var(--text);padding:0 14px;font-size:14px;outline:none;min-width:200px;flex:1;max-width:340px}
.firm-controls input[type=search]:focus{border-color:var(--accent)}
.firm-controls select{width:auto;min-width:170px}
.pager{display:flex;align-items:center;justify-content:center;gap:18px;margin-top:30px}
.pager button[disabled]{opacity:.4;cursor:default}
/* ----- Firm cards ----- */
.firm{background:var(--panel);border:1px solid var(--line);border-radius:14px;padding:20px;display:flex;flex-direction:column;gap:12px;transition:.16s;position:relative}
.firm:hover{border-color:var(--line-2);box-shadow:var(--shadow)}
.firm-top{display:flex;align-items:center;gap:13px}
.firm-logo{width:46px;height:46px;border-radius:11px;flex:0 0 auto;display:flex;align-items:center;justify-content:center;
font-family:'Space Grotesk',sans-serif;font-weight:700;font-size:16px;background:var(--panel-3);border:1px solid var(--line);color:var(--accent)}
.firm-name{font-family:'Space Grotesk',sans-serif;font-weight:600;font-size:16px;line-height:1.2;
/* the name opens the firm's own page */
display:block;color:var(--text);text-decoration:none}
a.firm-name:hover{color:var(--accent)}
.firm-loc{font-size:12.5px;color:var(--muted);margin-top:2px}
.firm-desc{font-size:13.5px;color:#bcc2cc;flex:1}
.firm-foot{display:flex;align-items:center;justify-content:space-between;gap:10px;margin-top:auto}
.badge-pro{font-size:10px;font-weight:700;letter-spacing:.6px;text-transform:uppercase;color:var(--accent);
border:1px solid var(--accent-soft);background:rgba(207,226,74,.1);padding:3px 8px;border-radius:6px}
.badge-verified{display:inline-flex;align-items:center;gap:4px;font-size:11px;color:var(--high)}
/* ----- News cards (base — also used by the home preview) ----- */
.news{display:flex;flex-direction:column;background:var(--panel);border:1px solid var(--line);border-radius:12px;padding:18px 20px;transition:.16s;text-decoration:none;color:inherit}
.news:hover{border-color:var(--line-2);background:var(--panel-2)}
.news-body{min-width:0}
.news-meta{display:flex;align-items:center;flex-wrap:wrap;gap:8px;font-size:12px;color:var(--muted);margin-bottom:8px}
.news h4{margin:0 0 7px;font-size:15.5px;line-height:1.3}
.news p,.news-sum{margin:0;font-size:13.5px;line-height:1.55;color:var(--muted)}
.news .src{color:var(--text);font-weight:600}
/* the pin is drawn, not an emoji, so it renders the same on every machine */
.news .geo{display:inline-flex;align-items:center;gap:4px}
.news .geo svg{flex:0 0 auto;opacity:.75}
/* the call to action sits back — the headline is what should pull the eye */
.news .news-read{color:var(--muted)}
.news:hover .news-read{color:var(--accent)}
.news.sponsored{border-color:var(--accent-soft);background:rgba(207,226,74,.05)}
/* news page grid: fixed-height tiling — a text card is exactly half an image card,
so cards stay symmetric whatever order they arrive in. */
/* No "dense" packing: it is allowed to pull a later card forward to fill a gap,
which would break the date order. Plain flow keeps newest first, always. */
.news-grid{display:grid;grid-template-columns:repeat(2,1fr);gap:16px;grid-auto-rows:202px;grid-auto-flow:row}
.news-grid .news{height:100%;overflow:hidden;padding:0;grid-row:span 1}
.news-grid .news.has-img{grid-row:span 2}
/* A picture card is two rows tall (202+16+202). Its picture takes 218px so the
text underneath is exactly 202px — the same block as a text-only card, which
keeps tag, headline and summary lining up across the row. */
.news-grid .news-img,
.news-grid .news-pics{height:218px;flex:0 0 auto;border-bottom:1px solid var(--line);display:block;width:100%}
.news-grid .news-img{object-fit:cover}
/* Two squarish shots instead of one wide one. The row is pinned to the strip's
own height: left to size itself it takes the picture's proportions, and a
tall shot then runs straight over the headline underneath. */
.news-grid .news-pics{display:grid;grid-template-columns:1fr 1fr;grid-template-rows:100%;gap:2px;overflow:hidden}
.news-grid .news-pics img{width:100%;height:100%;min-height:0;object-fit:cover;display:block}
.news-grid .news-body{display:flex;flex-direction:column;flex:1;min-height:0;padding:14px 18px}
/* Every strip has a fixed height, so a long source can never eat the summary. */
.news-grid .news-meta{flex:0 0 auto;flex-wrap:nowrap;height:22px;margin-bottom:8px;gap:7px;overflow:hidden}
.news-grid .news-meta>*{flex:0 0 auto;white-space:nowrap}
.news-grid .news-meta .tag,
.news-grid .news-meta .badge-pro{height:22px;padding:0 9px;font-size:10.5px} /* sized to the strip, so nothing is clipped */
.news-grid .news-meta .src{flex:0 1 auto;min-width:0;overflow:hidden;text-overflow:ellipsis}
/* The summary takes whatever the headline leaves, so it starts straight under
it — no padding out to a fixed height. Headline and summary share a 21px
line, and the strips above and below are fixed, so the leftover is always a
whole number of lines: four under a one-line headline, three under two. */
.news-grid .news h4{flex:0 0 auto;max-height:42px;margin:0 0 7px;line-height:21px;
display:-webkit-box;-webkit-line-clamp:2;-webkit-box-orient:vertical;overflow:hidden}
/* Shrink to fit, never stretch: a long summary is cut to the lines available
(four under a one-line headline, three under two), a short one keeps its own
height so no dead band opens up before "Continue reading". */
.news-grid .news-sum{flex:0 1 auto;min-height:0;margin:0;line-height:21px;overflow:hidden}
.news-grid .news-read{display:block;flex:0 0 30px;padding-top:8px;line-height:22px;white-space:nowrap;font-size:12.5px}
/* Narrow cards can't hold the whole strip, so the location drops off first —
the tag, source and date matter more. */
@media(max-width:760px){ .news-grid{grid-template-columns:1fr} .news-grid .news-meta .geo{display:none} }
/* ----- Legal pages (privacy, terms) -----
Narrow measure so long text stays readable. */
.legal{max-width:760px;margin:0 auto;color:#c8cdd7;font-size:15px;line-height:1.75}
.legal h3{font-family:'Space Grotesk',sans-serif;font-size:19px;color:var(--text);margin:34px 0 10px}
.legal h3:first-of-type{margin-top:0}
.legal p{margin:0 0 14px}
.legal ul{margin:0 0 14px;padding-left:20px}
.legal li{margin-bottom:9px}
.legal a{color:var(--accent)}
.legal-meta{font-size:13px;color:var(--muted-2);border-bottom:1px solid var(--line);padding-bottom:16px;margin-bottom:28px}
.legal-tbl{width:100%;border-collapse:collapse;margin:0 0 18px;font-size:13.5px}
.legal-tbl th{text-align:left;font-size:11px;text-transform:uppercase;letter-spacing:.7px;color:var(--muted-2);
padding:0 12px 9px 0;border-bottom:1px solid var(--line-2)}
.legal-tbl td{padding:11px 12px 11px 0;border-bottom:1px solid var(--line);vertical-align:top}
.legal-note{margin-top:34px;padding:16px 18px;border:1px solid var(--line-2);border-radius:11px;
background:var(--panel);font-size:13.5px;color:var(--muted)}
@media(max-width:620px){
.legal-tbl,.legal-tbl tbody,.legal-tbl tr,.legal-tbl td{display:block;width:100%}
.legal-tbl thead{display:none}
.legal-tbl tr{border-bottom:1px solid var(--line-2);padding-bottom:10px;margin-bottom:10px}
.legal-tbl td{border:0;padding:3px 0}
.legal-tbl td:first-child{color:var(--text);font-weight:600}
}
/* ----- Take part (home) -----
Six ways in, three of them what you get and three what you give. */
.part-grid{display:grid;grid-template-columns:repeat(3,1fr);gap:16px}
.part{display:flex;flex-direction:column;background:var(--panel);border:1px solid var(--line);
border-radius:14px;padding:22px 22px 18px;text-decoration:none;color:inherit;transition:.16s}
.part:hover{border-color:var(--accent-soft);background:var(--panel-2);transform:translateY(-2px)}
/* Line icons rather than emoji: emoji arrive in Apple's or Google's colours
and shapes, which fight a restrained dark interface. These take ours. */
.part-ic{display:block;line-height:0;margin-bottom:16px;color:var(--accent)}
.part:hover .part-ic{color:var(--accent-2)}
.part h4{margin:0 0 8px;font-size:16.5px;line-height:1.3;font-family:'Space Grotesk',sans-serif}
.part p{margin:0 0 14px;font-size:13.5px;line-height:1.6;color:var(--muted);flex:1}
.part-go{font-size:13px;font-weight:600;color:var(--accent)}
@media(max-width:940px){ .part-grid{grid-template-columns:repeat(2,1fr)} }
@media(max-width:600px){ .part-grid{grid-template-columns:1fr} }
/* ----- Education ----- */
.edu{background:var(--panel);border:1px solid var(--line);border-radius:14px;overflow:hidden;display:flex;flex-direction:column;transition:.16s}
.edu:hover{border-color:var(--line-2);box-shadow:var(--shadow)}
.edu-cover{height:140px;background:linear-gradient(135deg,var(--panel-3),var(--panel-2));border-bottom:1px solid var(--line);
display:flex;align-items:center;justify-content:center;color:var(--muted-2);font-size:11px;position:relative}
.edu-body{padding:18px;display:flex;flex-direction:column;gap:10px;flex:1}
.edu-body h4{margin:0;font-size:16px}
.edu-body p{margin:0;font-size:13.5px;color:var(--muted);flex:1}
.edu-foot{display:flex;align-items:center;justify-content:space-between;margin-top:4px}
.price{font-family:'Space Grotesk',sans-serif;font-weight:700;font-size:17px;color:var(--text)}
.price small{font-size:12px;color:var(--muted);font-weight:500}
.free{color:var(--high)}
/* ----- Materials ----- */
.material{background:var(--panel);border:1px solid var(--line);border-radius:13px;padding:18px;transition:.16s}
.material:hover{border-color:var(--line-2);box-shadow:var(--shadow)}
.material-swatch{height:64px;border-radius:9px;margin-bottom:14px;border:1px solid var(--line)}
.material h4{margin:0 0 4px;font-size:15px}
.material .mtype{font-size:12px;color:var(--muted);margin-bottom:12px}
.producers{display:flex;flex-direction:column;gap:7px}
.producer{display:flex;align-items:center;justify-content:space-between;gap:8px;font-size:12.5px;
padding:7px 10px;border-radius:8px;background:var(--panel-2);border:1px solid var(--line)}
.producer a{color:var(--accent);text-decoration:none;font-weight:500}
.producer a:hover{text-decoration:underline}
.producer.featured{border-color:var(--accent-soft);background:rgba(207,226,74,.06)}
/* ======================= Newsletter band ======================= */
.newsletter{background:
radial-gradient(700px 300px at 80% 0%,rgba(207,226,74,.12),transparent 60%),var(--panel);
border:1px solid var(--line);border-radius:18px;padding:46px;text-align:center;max-width:760px;margin:0 auto}
.newsletter h2{font-size:clamp(24px,3vw,34px);margin:0 0 12px}
/* wide enough for the sentence to stay on one line — see .section-head p */
.newsletter p{color:var(--muted);margin:0 auto 10px;max-width:820px}
.newsletter p b{color:var(--text);font-weight:600}
/* the promise, in the house display face so it reads as a line, not a caption */
.newsletter .nl-kicker{font-family:'Space Grotesk',sans-serif;font-size:14.5px;letter-spacing:.2px;
color:var(--accent);margin:0 auto 26px}
.nl-form{display:flex;gap:10px;max-width:440px;margin:0 auto;flex-wrap:wrap}
.nl-form input{flex:1;min-width:200px;height:48px;border-radius:10px;background:var(--bg);border:1px solid var(--line-2);
color:var(--text);padding:0 16px;font-size:15px;outline:none}
.nl-form input:focus{border-color:var(--accent)}
.nl-note{font-size:12px;color:var(--muted-2);margin-top:14px}
.nl-ok{color:var(--high);font-weight:600;margin-top:14px;min-height:18px}
/* monetization callouts */
.promo{background:linear-gradient(120deg,var(--panel),var(--panel-2));border:1px solid var(--line-2);
border-radius:16px;padding:34px;display:flex;align-items:center;justify-content:space-between;gap:24px;flex-wrap:wrap}
.promo h3{margin:0 0 8px;font-size:22px}
.promo p{margin:0;color:var(--muted);max-width:520px}
/* membership tiers */
.plan{background:var(--panel);border:1px solid var(--line);border-radius:16px;padding:24px;display:flex;flex-direction:column;gap:14px;position:relative}
.plan.featured{border-color:var(--accent);box-shadow:0 0 0 1px var(--accent)}
.plan .ptag{position:absolute;top:-11px;left:24px;background:var(--accent);color:#161109;font-size:11px;font-weight:700;padding:3px 10px;border-radius:20px;letter-spacing:.3px}
.plan .pname{font-family:'Space Grotesk',sans-serif;font-weight:700;font-size:19px}
.plan .pfor{font-size:12px;color:var(--muted);margin-top:-8px}
.plan .pprice{font-family:'Space Grotesk',sans-serif;font-size:28px;font-weight:700;line-height:1}
.plan .pprice small{font-size:13px;color:var(--muted);font-weight:500}
.plan ul{list-style:none;padding:0;margin:0;display:flex;flex-direction:column;gap:9px;flex:1}
.plan ul li{font-size:13px;color:#c7ccd6;display:flex;gap:8px;align-items:flex-start}
.plan ul li::before{content:"✓";color:var(--accent);font-weight:700;flex:0 0 auto}
.plan .btn{margin-top:6px}
/* ======================= Footer ======================= */
.site-footer{background:var(--bg-2);border-top:1px solid var(--line);padding:54px 0 30px}
.footer-grid{display:grid;grid-template-columns:1.6fr 1fr 1fr 1fr;gap:36px;margin-bottom:38px}
.footer-grid h5{font-size:12px;text-transform:uppercase;letter-spacing:1.4px;color:var(--muted-2);margin:0 0 14px}
.footer-grid a{display:block;color:var(--muted);text-decoration:none;font-size:14px;padding:5px 0;transition:.14s}
.footer-grid a:hover{color:var(--accent)}
.footer-blurb{color:var(--muted);font-size:14px;max-width:280px;margin:8px 0 0}
.footer-social{display:flex;gap:10px;margin-top:14px}
/* The icon carries its own brand colours, so hover lifts the tile, not the glyph. */
.footer-social a{display:inline-flex;align-items:center;justify-content:center;width:40px;height:40px;padding:0;
border:1px solid var(--line-2);border-radius:11px;background:var(--panel-2);transition:.16s}
.footer-social a:hover{border-color:#c2278d;background:rgba(238,42,123,.12);transform:translateY(-1px)}
.footer-bottom{border-top:1px solid var(--line);padding-top:22px;display:flex;gap:14px;flex-wrap:wrap;color:var(--muted-2);font-size:13px}
/* ============================================================
=============== BUILDINGS DASHBOARD (existing) ==========
============================================================ */
.layout{flex:1;display:grid;grid-template-columns:280px 1fr 380px;min-height:0}
.filters{background:var(--panel);border-right:1px solid var(--line);padding:20px 18px;overflow-y:auto;display:flex;flex-direction:column;gap:18px}
.filters-head{display:flex;align-items:center;justify-content:space-between}
.filters-head h2{font-size:13px;text-transform:uppercase;letter-spacing:1.5px;color:var(--muted);margin:0}
.btn-ghost{background:none;border:1px solid var(--line);color:var(--muted);padding:5px 10px;border-radius:7px;font-size:12px;cursor:pointer;transition:.15s}
.btn-ghost:hover{color:var(--text);border-color:var(--accent)}
.filter-group{display:flex;flex-direction:column;gap:7px}
.filter-group label{font-size:12px;color:var(--muted);font-weight:500;letter-spacing:.3px}
select,.range-row input{width:100%;height:38px;border-radius:8px;background:var(--panel-2);border:1px solid var(--line);
color:var(--text);padding:0 12px;font-size:13px;outline:none;font-family:inherit}
select{appearance:none;cursor:pointer;
background-image:url("data:image/svg+xml;utf8,");
background-repeat:no-repeat;background-position:right 12px center;padding-right:32px}
select:focus,.range-row input:focus{border-color:var(--accent)}
.range-row{display:flex;align-items:center;gap:8px}
.range-row input{text-align:center}
.range-row .dash{color:var(--muted-2)}
.check-row{display:flex;align-items:center;gap:9px;font-size:13px;color:var(--text);cursor:pointer;user-select:none}
.check-row input{width:16px;height:16px;accent-color:var(--accent);cursor:pointer}
.legend{margin-top:auto;padding-top:16px;border-top:1px solid var(--line);display:flex;flex-direction:column;gap:8px}
.legend-title{font-size:11px;text-transform:uppercase;letter-spacing:1px;color:var(--muted-2)}
.legend-item{display:flex;align-items:center;gap:9px;font-size:12px;color:var(--muted)}
.dot{width:10px;height:10px;border-radius:50%;flex:0 0 auto}
.conf-high{background:var(--high)} .conf-medium{background:var(--medium)}
.conf-low{background:var(--low)} .conf-none{background:var(--none)} .conf-city{background:#6aa0c8}
.map-wrap{position:relative;min-width:0}
#map{position:absolute;inset:0;background:#0a0b0d}
.leaflet-container{background:#0a0b0d;font-family:inherit}
.leaflet-popup-content-wrapper{background:var(--panel-3);color:var(--text);border-radius:8px;box-shadow:var(--shadow)}
.leaflet-popup-tip{background:var(--panel-3)}
.leaflet-popup-content{margin:10px 14px;font-size:13px}
.leaflet-popup-content b{font-family:'Space Grotesk',sans-serif}
.leaflet-bar a{background:var(--panel-2);color:var(--text);border-color:var(--line)}
.leaflet-bar a:hover{background:var(--panel-3)}
.pin{width:14px;height:14px;border-radius:50%;border:2px solid rgba(255,255,255,.85);box-shadow:0 0 0 2px rgba(0,0,0,.4);cursor:pointer;transition:transform .12s}
.pin:hover{transform:scale(1.35)}
.pin.sel{transform:scale(1.5);border-color:var(--accent)}
.results{background:var(--panel);border-left:1px solid var(--line);overflow-y:auto;padding:14px;display:flex;flex-direction:column;gap:10px}
.card{background:var(--panel-2);border:1px solid var(--line);border-radius:var(--r);padding:13px 14px;cursor:pointer;transition:.15s;position:relative}
.card:hover{border-color:var(--accent);background:var(--panel-3)}
.card.sel{border-color:var(--accent);box-shadow:0 0 0 2px rgba(207,226,74,.2)}
.card-title{font-family:'Space Grotesk',sans-serif;font-size:15px;font-weight:600;margin:0 0 4px;line-height:1.25;padding-right:18px}
.card-meta{font-size:12px;color:var(--muted);display:flex;flex-wrap:wrap;gap:4px 6px;align-items:center}
.card-meta .yr{color:var(--accent);font-weight:600}
.card-meta .sep{color:var(--muted-2);margin:0 -1px}
.card-arch{font-size:12px;color:var(--text);margin-top:6px;opacity:.85}
.card-conf{position:absolute;top:14px;right:13px;width:9px;height:9px;border-radius:50%}
.empty{color:var(--muted);text-align:center;padding:40px 16px;font-size:13px}
.overlay{position:fixed;inset:0;background:rgba(0,0,0,.5);opacity:0;pointer-events:none;transition:.2s;z-index:1500}
.overlay.show{opacity:1;pointer-events:auto}
.detail{position:fixed;top:0;right:0;height:100%;width:480px;max-width:92vw;background:var(--panel);border-left:1px solid var(--line);
transform:translateX(100%);transition:transform .25s cubic-bezier(.4,0,.2,1);z-index:1600;overflow-y:auto;box-shadow:var(--shadow)}
.detail.show{transform:translateX(0)}
.detail-close{position:absolute;top:14px;right:16px;z-index:2;width:34px;height:34px;border-radius:8px;border:1px solid var(--line);
background:var(--panel-2);color:var(--muted);font-size:22px;line-height:1;cursor:pointer}
.detail-close:hover{color:var(--text);border-color:var(--accent)}
.detail-body{padding:28px 28px 40px}
.detail-img-slot{height:200px;border-radius:var(--r);border:1px dashed var(--line);display:flex;align-items:center;justify-content:center;
color:var(--muted-2);font-size:12px;margin-bottom:20px;background:rgba(255,255,255,.015)}
.card-thumb{width:100%;height:130px;object-fit:cover;border-radius:8px;margin:2px 0 10px;border:1px solid var(--line)}
.detail-gallery{margin-bottom:20px}
.dg-main{width:100%;height:270px;object-fit:cover;border-radius:var(--r);border:1px solid var(--line);display:block;background:var(--panel-2)}
.dg-thumbs{display:flex;gap:8px;margin-top:8px;flex-wrap:wrap}
.dg-thumb{width:62px;height:46px;object-fit:cover;border-radius:7px;border:1px solid var(--line);cursor:pointer;opacity:.55;transition:.15s}
.dg-thumb:hover,.dg-thumb.on{opacity:1;border-color:var(--accent)}
.dg-credit{font-size:11px;color:var(--muted-2);margin-top:7px}
.spec .v.unv,.caption-text.unv,.arch-card .an.unv{color:#6ea8fe}
.detail h2{font-size:24px;margin:0 0 6px;line-height:1.15}
.detail-sub{color:var(--muted);font-size:13px;margin-bottom:18px;display:flex;gap:8px;flex-wrap:wrap;align-items:center}
/* on the same line as the name, so the full page is offered next to it */
.detail-name{display:flex;align-items:baseline;gap:14px;flex-wrap:wrap}
.detail-name h2{margin:0}
.detail-page{font-size:12.5px;color:var(--accent);text-decoration:none;white-space:nowrap}
.detail-page:hover{text-decoration:underline}
.badge{display:inline-flex;align-items:center;gap:6px;font-size:11px;padding:3px 9px;border-radius:20px;border:1px solid var(--line);background:var(--panel-2)}
.badge .dot{width:8px;height:8px}
.spec-grid{display:grid;grid-template-columns:1fr 1fr;gap:1px;background:var(--line);border:1px solid var(--line);border-radius:var(--r);overflow:hidden;margin-bottom:20px}
.spec{background:var(--panel-2);padding:11px 13px}
.spec .k{font-size:11px;text-transform:uppercase;letter-spacing:.5px;color:var(--muted-2);margin-bottom:3px}
.spec .v{font-size:13px;color:var(--text);font-weight:500}
.spec.full{grid-column:1 / -1}
.detail-section{margin-bottom:20px}
.detail-section h3{font-size:12px;text-transform:uppercase;letter-spacing:1.2px;color:var(--muted);margin:0 0 8px}
.caption-text{font-size:13.5px;line-height:1.65;color:#cfd3dc}
.arch-card{background:var(--panel-2);border:1px solid var(--line);border-radius:var(--r);padding:14px}
.arch-card .an{font-family:'Space Grotesk',sans-serif;font-size:16px;font-weight:600;cursor:pointer}
.arch-card .an:hover{color:var(--accent)}
.arch-hq{font-size:12px;color:var(--muted);margin-top:2px}
/* a producer's product lines, listed inside its one card */
.prod-lines{display:flex;flex-wrap:wrap;gap:6px}
.prod-lines .tag{text-transform:none;letter-spacing:0;font-size:10.5px}
.prod-lines .tag-more{color:var(--muted-2);border-style:dashed}
.chip-row{display:flex;flex-wrap:wrap;gap:6px;margin-top:10px}
.chip{font-size:11px;padding:4px 9px;border-radius:6px;background:var(--panel-3);border:1px solid var(--line);color:var(--muted);text-decoration:none}
.link{color:var(--accent);cursor:pointer;text-decoration:none}
.link:hover{text-decoration:underline}
.back-link{display:inline-flex;align-items:center;gap:5px;color:var(--muted);font-size:12px;cursor:pointer;margin-bottom:14px}
.back-link:hover{color:var(--text)}
/* card photo badge + flat pin (used when confidence colouring is off) */
.card-photo{position:absolute;bottom:11px;right:13px;font-size:13px;opacity:.7}
.pin.conf-flat{background:var(--accent)}
.legend-note{color:var(--muted-2);font-weight:400;text-transform:none;letter-spacing:0;font-size:10px}
/* detail: team table (lower of the two tables) */
.team-table{display:flex;flex-direction:column;gap:1px;background:var(--line);border:1px solid var(--line);border-radius:var(--r);overflow:hidden}
.team-row{display:grid;grid-template-columns:118px 1fr;gap:12px;background:var(--panel-2);padding:11px 13px}
.tr-role{font-size:11px;text-transform:uppercase;letter-spacing:.5px;color:var(--muted-2);padding-top:2px}
.tr-firms{display:flex;flex-direction:column;gap:9px}
.tr-firms.unv .firm-lnk{color:#6ea8fe}
.firm-lnk{font-size:13.5px;color:var(--text);font-weight:500}
.firm-lnk.link{color:var(--accent);cursor:pointer;text-decoration:none}
.firm-lnk.link:hover{text-decoration:underline}
.team-firm.has-projects{background:rgba(207,226,74,.04);border:1px solid var(--line);border-radius:8px;padding:9px 11px}
.team-projects{display:flex;flex-wrap:wrap;align-items:center;gap:6px;margin-top:8px}
.tp-label{font-size:10px;text-transform:uppercase;letter-spacing:.5px;color:var(--muted-2)}
.tp-more{font-size:11px;color:var(--muted-2)}
.unv-note{font-size:11px;color:#6ea8fe;margin:-8px 0 16px}
/* detail: clickable main photo */
.dg-main{cursor:zoom-in}
/* lightbox */
.lightbox{position:fixed;inset:0;z-index:2000;background:rgba(8,9,11,.94);display:none;align-items:center;justify-content:center}
.lightbox.show{display:flex}
.lb-img{max-width:90vw;max-height:86vh;object-fit:contain;border-radius:6px;box-shadow:0 10px 60px rgba(0,0,0,.6)}
.lb-close{position:absolute;top:18px;right:22px;width:42px;height:42px;border-radius:10px;border:1px solid var(--line-2);background:rgba(20,22,26,.8);color:#fff;font-size:24px;line-height:1;cursor:pointer}
.lb-nav{position:absolute;top:50%;transform:translateY(-50%);width:52px;height:64px;border:1px solid var(--line-2);background:rgba(20,22,26,.7);color:#fff;font-size:34px;line-height:1;cursor:pointer;border-radius:10px}
.lb-prev{left:20px} .lb-next{right:20px}
.lb-close:hover,.lb-nav:hover{border-color:var(--accent);color:var(--accent)}
.lb-credit{position:absolute;bottom:22px;left:0;right:0;text-align:center;color:var(--muted);font-size:12.5px;
display:flex;gap:14px;justify-content:center;align-items:center;flex-wrap:wrap;padding:0 20px}
.lb-license{color:var(--accent);text-decoration:none;font-size:12.5px;white-space:nowrap}
.lb-license:hover{text-decoration:underline}
/* scrollbars */
::-webkit-scrollbar{width:10px;height:10px}
::-webkit-scrollbar-thumb{background:#2c313c;border-radius:6px;border:2px solid var(--panel)}
::-webkit-scrollbar-thumb:hover{background:#3a4150}
/* reveal on scroll */
.reveal{opacity:0;transform:translateY(18px);transition:opacity .6s ease,transform .6s ease}
.reveal.in{opacity:1;transform:none}
/* ===== Home visual hero (photo-collage) ===== */
.vhero{position:relative;min-height:86vh;display:flex;align-items:center;overflow:hidden;border-bottom:1px solid var(--line)}
.vhero-collage{position:absolute;inset:0;display:grid;grid-template-columns:repeat(6,1fr);grid-auto-rows:1fr;gap:4px;opacity:.5;filter:saturate(1.05)}
.vhero-collage img{width:100%;height:100%;object-fit:cover;display:block}
.vhero-overlay{position:absolute;inset:0;background:radial-gradient(120% 92% at 22% 38%,rgba(11,12,14,.93),rgba(11,12,14,.62) 55%,rgba(11,12,14,.9))}
.vhero-inner{position:relative;z-index:2;max-width:1180px;width:100%;padding:0 6vw;margin:0 auto}
/* The size here is only a starting point: home.js measures the real space and
sets it so the heading sits on one line. It stays sensible without JS. */
.vhero-inner h1{font-family:'Space Grotesk',sans-serif;font-size:clamp(30px,5vw,66px);line-height:1.05;margin:14px 0 18px;letter-spacing:-1.4px}
.vhero-pillars{font-size:clamp(14px,1.7vw,18px);color:#e6e9f0;margin:0 0 8px;font-weight:500;line-height:1.5;white-space:nowrap}
.vhero-pillars b{color:var(--accent);font-weight:600}
.vhero-sub{font-size:clamp(13px,1.5vw,16px);color:var(--muted);margin:0 0 26px;white-space:nowrap}
/* light enough not to compete with the two buttons below it */
.vhero-more{color:var(--accent);text-decoration:none;font-weight:500;margin-left:4px;white-space:nowrap}
.vhero-more:hover{text-decoration:underline}
@media(max-width:700px){ .vhero-sub{white-space:normal} }
@media(max-width:760px){ .vhero-pillars,.vhero-sub{white-space:normal} }
.vhero .hero-cta{margin-bottom:30px}
.vhero .hero-stats{display:flex;gap:30px;flex-wrap:wrap}
.vhero .hero-stat .n{font-family:'Space Grotesk',sans-serif;font-size:30px;font-weight:700;color:#fff;line-height:1}
.vhero .hero-stat .l{font-size:12px;text-transform:uppercase;letter-spacing:1px;color:var(--muted);margin-top:5px}
/* ===== Home 2-row photo wall (database section preview) ===== */
.home-wall{display:grid;grid-template-columns:repeat(4,1fr);gap:8px}
.home-wall a{position:relative;display:block;aspect-ratio:1/1;border-radius:10px;overflow:hidden;border:1px solid var(--line);background:var(--panel-2)}
.home-wall img{width:100%;height:100%;object-fit:cover;transition:transform .5s}
.home-wall a:hover img{transform:scale(1.08)}
.home-wall .cap{position:absolute;left:0;right:0;bottom:0;padding:20px 8px 7px;background:linear-gradient(transparent,rgba(8,9,11,.86));font-size:10.5px;color:#fff;opacity:0;transition:.16s;line-height:1.2}
.home-wall a:hover .cap{opacity:1}
/* claim / contribute bar (top of firms, etc.) */
.claim-bar{display:flex;align-items:center;justify-content:center;gap:12px;flex-wrap:wrap;margin:0 auto 40px}
.claim-bar .ct{font-size:13px;color:var(--muted);line-height:1.4}
.claim-bar .ct b{color:var(--text)}
.claim-actions{display:flex;gap:9px;flex-wrap:wrap;justify-content:center}
/* rotating spotlight card (home, bottom-right): firm -> building -> headline.
Every slide is the same shape so the card never changes size. */
.rc{position:fixed;bottom:20px;right:20px;z-index:1200;width:300px;background:var(--panel);
border:1px solid var(--line-2);border-radius:14px;overflow:hidden;box-shadow:0 14px 44px rgba(0,0,0,.5);
transition:opacity .3s,transform .3s}
.rc.hide{opacity:0;transform:translateY(12px);pointer-events:none}
.rc-head{display:flex;align-items:center;justify-content:space-between;gap:8px;padding:11px 14px 0}
.rc-kicker{font-size:10px;text-transform:uppercase;letter-spacing:1.1px;font-weight:700;color:var(--accent)}
.rc-x{background:none;border:none;color:var(--muted-2);font-size:16px;line-height:1;cursor:pointer;padding:0}
.rc-x:hover{color:var(--text)}
.rc-body{padding:12px 14px 14px;height:112px;box-sizing:border-box}
.rc-slide{opacity:0;transition:opacity .35s ease;height:100%}
.rc-slide.on{opacity:1}
.rc-row{display:flex;gap:11px;align-items:flex-start;text-decoration:none;color:inherit;height:100%}
.rc-logo{width:46px;height:46px;border-radius:10px;flex:0 0 auto;background:linear-gradient(140deg,#232833,#12151b);
border:1px solid var(--line-2);display:flex;align-items:center;justify-content:center;overflow:hidden;
font-family:'Space Grotesk',sans-serif;font-weight:700;font-size:13px;color:var(--accent)}
.rc-logo img{width:100%;height:100%;object-fit:cover;display:block}
.rc-txt{min-width:0;flex:1}
.rc-title{font-family:'Space Grotesk',sans-serif;font-weight:600;font-size:14px;line-height:1.28;color:var(--text);
display:-webkit-box;-webkit-line-clamp:2;-webkit-box-orient:vertical;overflow:hidden}
.rc-sub{font-size:11.5px;color:var(--muted);margin-top:4px}
.rc-facts{display:flex;flex-wrap:wrap;gap:4px 8px;margin-top:6px;font-size:10.5px;color:var(--muted-2)}
.rc-facts b{color:var(--accent);font-weight:600}
.rc-foot{display:flex;align-items:center;justify-content:space-between;gap:10px;
padding:9px 14px;border-top:1px solid var(--line);font-size:11px;color:var(--muted-2)}
.rc-foot a{color:var(--accent);text-decoration:none}
.rc-dots{display:flex;gap:5px}
.rc-dot{width:5px;height:5px;border-radius:50%;background:var(--line-2);transition:.2s;cursor:pointer}
.rc-dot.on{background:var(--accent);width:14px;border-radius:3px}
@media(max-width:640px){ .rc{display:none} }
/* The About page's main copy.
Narrow enough that it sits inside the width of the title above it — a wider
column reads as off-centre even when it isn't. Both edges are straight;
hyphenation is on, because justifying without it opens gaps between words. */
/* a "coming soon" panel — used by the membership placeholder */
.soon-box{max-width:660px;margin:0 auto;text-align:center;background:var(--panel);
border:1px solid var(--line);border-radius:16px;padding:32px 30px}
.soon-box p{color:var(--muted);font-size:15px;line-height:1.7;margin:0 0 24px}
.soon-actions{display:flex;gap:10px;flex-wrap:wrap;justify-content:center}
.soon-note{font-size:13.5px;margin:26px 0 0}
.soon-note a{color:var(--accent)}
.about-copy{max-width:660px;margin:0 auto;font-size:16px;line-height:1.8;color:#c7ccd6;
text-align:justify;text-justify:inter-word;hyphens:auto;-webkit-hyphens:auto}
.about-copy p{margin:0 0 20px}
.about-copy p:last-child{margin-bottom:0}
.about-copy b{color:var(--text);font-weight:600}
.about-copy a{color:var(--accent);text-decoration:none}
.about-copy a:hover{text-decoration:underline}
/* A narrow column has too few words per line to justify: the spaces stretch
into gaps you can see down the page. Below tablet width it reads ragged. */
@media(max-width:720px){
.about-copy{text-align:left;hyphens:none;-webkit-hyphens:none}
}
/* membership benefit blocks (how it works) — 2 x 3 grid */
.benefit-grid{display:grid;grid-template-columns:1fr 1fr;gap:14px;max-width:920px;margin:0 auto}
.benefit-block{background:var(--panel);border:1px solid var(--line);border-radius:14px;padding:18px 20px}
.benefit-block h3{font-family:'Space Grotesk',sans-serif;font-size:16.5px;font-weight:600;margin:0 0 12px;
display:flex;align-items:center;gap:9px;color:var(--text)}
.benefit-block h3 .bi{flex:0 0 auto;color:var(--accent)} /* the icon takes our colour, the words stay white */
/* The label sits in its own column so the two lines line up and the eye reads
down them, instead of tripping over a run of bold white mid-sentence. */
.benefit-block p{color:var(--muted);font-size:13.5px;line-height:1.6;margin:0 0 10px;
display:grid;grid-template-columns:92px 1fr;gap:3px 14px;align-items:baseline}
.benefit-block p:last-child{margin-bottom:0}
/* Both labels stay quiet grey — they mark the two lines apart, they don't
compete with the card title or with the sentence beside them. */
.benefit-block .lbl{font-size:10.5px;font-weight:600;text-transform:uppercase;letter-spacing:.8px;
color:var(--muted-2);white-space:nowrap}
@media(max-width:420px){
.benefit-block p{grid-template-columns:1fr;gap:4px}
}
@media(max-width:680px){ .benefit-grid{grid-template-columns:1fr} }
/* ===== member profile sample pages (firm-profile / producer-profile) ===== */
.fp-wrap{max-width:1120px;margin:0 auto 80px;padding:0 20px}
/* --- cover --- */
.fp-cover{position:relative;border:1px solid var(--line);border-radius:20px;overflow:hidden;background:var(--panel);isolation:isolate}
.fp-cover-bg{position:absolute;inset:0;background-size:cover;background-position:center 38%;filter:saturate(.6) contrast(1.04)}
.fp-cover-bg::after{content:"";position:absolute;inset:0;
background:linear-gradient(180deg,rgba(9,10,12,.35) 0%,rgba(9,10,12,.78) 48%,rgba(9,10,12,.97) 100%)}
.fp-cover-grad{position:absolute;inset:0;background:radial-gradient(110% 70% at 12% 8%,rgba(207,226,74,.13),transparent 62%)}
.fp-cover-in{position:relative;padding:168px 38px 0}
.fp-top{display:flex;gap:24px;align-items:flex-end;flex-wrap:wrap}
.fp-logo{width:92px;height:92px;border-radius:20px;flex:0 0 auto;background:linear-gradient(150deg,#20242c,#0d0f13);
border:1px solid rgba(255,255,255,.14);display:flex;align-items:center;justify-content:center;
box-shadow:0 10px 32px rgba(0,0,0,.5)}
.fp-logo svg{width:52px;height:52px;display:block}
.fp-idblock{flex:1;min-width:260px}
.fp-namerow{display:flex;align-items:center;gap:12px;flex-wrap:wrap}
.fp-namerow h1{font-family:'Space Grotesk',sans-serif;font-size:clamp(30px,4.4vw,46px);margin:0;line-height:1.02;letter-spacing:-1.4px;color:#fff}
.fp-verified{display:inline-flex;align-items:center;gap:5px;font-size:11px;font-weight:700;letter-spacing:.5px;text-transform:uppercase;
color:#12160a;background:var(--accent);padding:5px 11px;border-radius:20px}
.fp-verified svg{width:12px;height:12px;stroke:#12160a;fill:none;stroke-width:2.4;stroke-linecap:round;stroke-linejoin:round}
.fp-tagline{color:#d9dde5;font-size:16px;line-height:1.5;margin:11px 0 14px;max-width:580px}
.fp-meta{display:flex;gap:7px;flex-wrap:wrap}
.fp-chip{font-size:11.5px;color:#cbd0d9;border:1px solid rgba(255,255,255,.16);background:rgba(255,255,255,.05);
padding:5px 12px;border-radius:20px}
.fp-actions{display:flex;gap:9px;flex-wrap:wrap;align-items:center}
.fp-stats{display:grid;grid-template-columns:repeat(4,1fr);gap:0;margin-top:30px;border-top:1px solid rgba(255,255,255,.12)}
.fp-stat{padding:20px 4px 22px;border-right:1px solid rgba(255,255,255,.08)}
.fp-stat:last-child{border-right:none}
.fp-stat .n{font-family:'Space Grotesk',sans-serif;font-size:30px;font-weight:700;color:#fff;line-height:1;letter-spacing:-.5px}
.fp-stat .l{font-size:10.5px;text-transform:uppercase;letter-spacing:1.4px;color:var(--muted);margin-top:7px}
/* --- quick-access tiles --- */
.fp-tiles{display:grid;grid-template-columns:repeat(6,1fr);gap:10px;margin-top:14px}
.fp-tile{text-align:left;background:var(--panel);border:1px solid var(--line);border-radius:14px;padding:16px 14px 14px;cursor:pointer;
transition:.18s;display:flex;flex-direction:column;gap:5px;color:inherit;font:inherit}
.fp-tile:hover{border-color:var(--accent);background:var(--panel-2);transform:translateY(-3px);box-shadow:0 10px 28px rgba(0,0,0,.35)}
.fp-tile .ic{color:var(--accent);height:22px}
.fp-tile .ic svg{width:21px;height:21px;stroke:currentColor;fill:none;stroke-width:1.6;stroke-linecap:round;stroke-linejoin:round}
.fp-tile h3{font-family:'Space Grotesk',sans-serif;font-size:14.5px;margin:3px 0 0;font-weight:600}
.fp-tile p{font-size:11.5px;color:var(--muted-2);margin:0;line-height:1.4}
/* --- section headers --- */
.fp-sec-h{display:flex;align-items:baseline;justify-content:space-between;gap:14px;margin:44px 2px 14px;
padding-bottom:12px;border-bottom:1px solid var(--line)}
.fp-sec-h h2{font-family:'Space Grotesk',sans-serif;font-size:13px;margin:0;letter-spacing:1.8px;text-transform:uppercase;color:var(--muted)}
.fp-sec-h a{font-size:12.5px}
/* --- work grid (asymmetric: hero + supporting) --- */
.fp-work{display:grid;grid-template-columns:repeat(4,1fr);grid-auto-rows:168px;gap:12px}
.fp-work .fp-proj:first-child{grid-column:span 2;grid-row:span 2}
.fp-featured{display:grid;grid-template-columns:repeat(4,1fr);gap:12px}
.fp-featured .fp-proj{aspect-ratio:3/4}
.fp-proj{position:relative;border-radius:14px;overflow:hidden;border:1px solid var(--line);
background:linear-gradient(160deg,#1a1d24,#0e1014);text-decoration:none;display:block}
.fp-proj img{width:100%;height:100%;object-fit:cover;transition:transform .6s cubic-bezier(.2,.7,.3,1);filter:saturate(.8)}
.fp-proj:hover img{transform:scale(1.06);filter:saturate(1)}
.fp-proj::after{content:"";position:absolute;inset:0;background:linear-gradient(180deg,transparent 42%,rgba(8,9,11,.9) 100%);pointer-events:none}
.fp-proj .ph{position:absolute;inset:0;display:flex;align-items:center;justify-content:center;
font-family:'Space Grotesk',sans-serif;font-size:30px;font-weight:700;color:#262b34;letter-spacing:1px}
.fp-proj .cap{position:absolute;left:0;right:0;bottom:0;padding:16px 15px 14px;z-index:2}
.fp-proj .cap b{display:block;font-family:'Space Grotesk',sans-serif;font-size:14px;color:#fff;line-height:1.2;letter-spacing:-.2px}
.fp-proj .cap span{font-size:11px;color:var(--accent);letter-spacing:.3px}
.fp-work .fp-proj:first-child .cap{padding:22px 20px 18px}
.fp-work .fp-proj:first-child .cap b{font-size:20px}
/* --- clients / awards --- */
.fp-clients{display:grid;grid-template-columns:repeat(6,1fr);gap:10px}
.fp-client{display:flex;align-items:center;justify-content:center;height:66px;border:1px solid var(--line);border-radius:11px;
background:var(--panel);font-family:'Space Grotesk',sans-serif;font-size:12.5px;font-weight:600;letter-spacing:.6px;
color:var(--muted-2);transition:.16s;text-align:center;padding:0 8px}
.fp-client:hover{color:var(--text);border-color:var(--line-2)}
.fp-awards{display:grid;grid-template-columns:1fr 1fr;gap:0 30px}
.fp-award{display:flex;align-items:baseline;gap:14px;padding:13px 2px;border-bottom:1px solid var(--line);font-size:13.5px;color:#cdd2db}
.fp-award .yr{font-family:'Space Grotesk',sans-serif;font-size:12px;color:var(--accent);font-weight:700;flex:0 0 38px}
/* --- contact band --- */
.fp-band{margin-top:44px;border:1px solid var(--line-2);border-radius:18px;padding:32px 34px;
background:radial-gradient(90% 130% at 85% 10%,rgba(207,226,74,.10),transparent 60%),var(--panel);
display:flex;align-items:center;justify-content:space-between;gap:24px;flex-wrap:wrap}
.fp-band h3{font-family:'Space Grotesk',sans-serif;font-size:22px;margin:0 0 6px;letter-spacing:-.3px}
.fp-band p{margin:0;color:var(--muted);font-size:14px;max-width:430px}
.fp-foot{text-align:center;margin-top:34px;color:var(--muted-2);font-size:12px;line-height:1.7}
.fp-foot .pill{display:inline-flex;align-items:center;gap:7px;border:1px solid var(--line);border-radius:20px;padding:7px 15px;margin-bottom:10px}
/* --- modal --- */
.fp-back{position:fixed;inset:0;background:rgba(6,7,9,.82);z-index:1600;
display:none;align-items:center;justify-content:center;padding:24px}
.fp-back.show{display:flex}
.fp-modal{width:700px;max-width:100%;max-height:86vh;overflow:auto;background:var(--panel);border:1px solid var(--line-2);
border-radius:18px;box-shadow:0 30px 90px rgba(0,0,0,.65);transform:translateY(10px) scale(.99);opacity:0;transition:.2s}
.fp-back.show .fp-modal{transform:none;opacity:1}
.fp-modal-head{position:sticky;top:0;background:var(--panel);display:flex;align-items:center;justify-content:space-between;
gap:12px;padding:20px 26px;border-bottom:1px solid var(--line);z-index:2}
.fp-modal-head h2{font-family:'Space Grotesk',sans-serif;font-size:18px;margin:0;display:flex;align-items:center;gap:10px;letter-spacing:-.2px}
.fp-modal-head h2 svg{width:19px;height:19px;stroke:var(--accent);fill:none;stroke-width:1.6;stroke-linecap:round;stroke-linejoin:round}
.fp-x{width:34px;height:34px;border-radius:9px;border:1px solid var(--line);background:var(--panel-2);color:var(--muted);
font-size:20px;cursor:pointer;flex:0 0 auto}
.fp-x:hover{color:var(--text);border-color:var(--accent)}
.fp-modal-body{padding:24px 26px 28px}
.fp-modal-body p{color:#cdd2db;font-size:14px;line-height:1.72;margin:0 0 14px}
.fp-people{display:grid;grid-template-columns:1fr 1fr;gap:11px}
.fp-person{display:flex;gap:13px;align-items:center;background:var(--panel-2);border:1px solid var(--line);border-radius:12px;padding:13px}
.fp-av{width:46px;height:46px;border-radius:50%;flex:0 0 auto;background:linear-gradient(140deg,#242933,#12151b);
border:1px solid var(--line-2);display:flex;align-items:center;justify-content:center;font-weight:700;color:var(--accent);font-size:13.5px;
font-family:'Space Grotesk',sans-serif}
.fp-person b{font-size:14px;display:block}
.fp-person span{font-size:12px;color:var(--muted)}
.fp-list{list-style:none;padding:0;margin:0;display:flex;flex-direction:column;gap:2px}
.fp-list li{display:flex;gap:12px;align-items:flex-start;font-size:14px;color:#cdd2db;padding:11px 0;border-bottom:1px solid var(--line)}
.fp-list li:last-child{border-bottom:none}
.fp-list li .ic{color:var(--accent);flex:0 0 auto;font-family:'Space Grotesk',sans-serif;font-weight:700;font-size:12px;min-width:34px}
.fp-projgrid{display:grid;grid-template-columns:1fr 1fr;gap:9px}
.fp-projrow{display:flex;align-items:center;justify-content:space-between;gap:10px;background:var(--panel-2);
border:1px solid var(--line);border-radius:10px;padding:11px 13px;text-decoration:none;color:inherit;transition:.14s}
.fp-projrow:hover{border-color:var(--accent)}
.fp-projrow b{font-size:13px;font-weight:500}
.fp-projrow span{font-size:11.5px;color:var(--muted)}
.fp-projrow .h{color:var(--accent);font-family:'Space Grotesk',sans-serif;font-size:12px;white-space:nowrap}
.fp-contact-row{display:flex;gap:12px;align-items:center;padding:13px 0;border-bottom:1px solid var(--line);font-size:14px;color:#cdd2db}
.fp-contact-row svg{width:17px;height:17px;stroke:var(--accent);fill:none;stroke-width:1.6;stroke-linecap:round;stroke-linejoin:round;flex:0 0 auto}
@media(max-width:900px){
.fp-tiles{grid-template-columns:repeat(3,1fr)}
.fp-clients{grid-template-columns:repeat(3,1fr)}
.fp-work{grid-template-columns:repeat(2,1fr)}
.fp-awards{grid-template-columns:1fr}
.fp-cover-in{padding:110px 22px 0}
}
@media(max-width:600px){
.fp-tiles{grid-template-columns:1fr 1fr}
.fp-featured{grid-template-columns:1fr 1fr}
.fp-stats{grid-template-columns:1fr 1fr}
.fp-people,.fp-projgrid{grid-template-columns:1fr}
}
/* ===== bids / tenders ===== */
.bid{display:flex;align-items:stretch;justify-content:space-between;gap:20px;background:var(--panel);border:1px solid var(--line);
border-radius:12px;padding:16px 20px;margin-bottom:10px;text-decoration:none;color:inherit;transition:.15s}
.bid:hover{border-color:var(--accent);background:var(--panel-2)}
.bid-main{flex:1;min-width:0}
.bid-meta{display:flex;align-items:center;gap:9px;flex-wrap:wrap;font-size:11.5px;color:var(--muted-2);margin-bottom:7px}
.bid-meta .tag{font-size:10px}
.bid h4{margin:0 0 5px;font-size:15px;line-height:1.35;font-family:'Space Grotesk',sans-serif;font-weight:600}
.bid-buyer{font-size:12.5px;color:var(--muted)}
.bid-side{flex:0 0 auto;display:flex;flex-direction:column;align-items:flex-end;justify-content:center;gap:4px;text-align:right;min-width:132px}
.bid-due{font-size:12.5px;font-weight:600;color:var(--accent);font-family:'Space Grotesk',sans-serif}
.bid-due.soon{color:#f0a595}
.bid-due.none{color:var(--muted-2);font-weight:500}
.bid-date{font-size:11px;color:var(--muted-2)}
.bid-go{font-size:11.5px;color:var(--muted);margin-top:4px}
.bid:hover .bid-go{color:var(--accent)}
.bid-note{max-width:760px;margin:26px auto 0;text-align:center;font-size:11.5px;color:var(--muted-2);line-height:1.6}
@media(max-width:640px){ .bid{flex-direction:column;gap:12px} .bid-side{align-items:flex-start;text-align:left} }
/* coming-soon teaser pages (Education, Jobs) */
.coming-soon{max-width:660px;margin:11vh auto;text-align:center;padding:0 20px}
.coming-soon .cs-badge{display:inline-block;font-size:11px;font-weight:700;letter-spacing:1px;text-transform:uppercase;color:var(--accent);border:1px solid var(--accent-soft);background:rgba(207,226,74,.08);padding:5px 13px;border-radius:20px;margin-bottom:18px}
.coming-soon h1{font-family:'Space Grotesk',sans-serif;font-size:clamp(30px,5vw,48px);line-height:1.08;margin:0 0 16px;letter-spacing:-1px}
.coming-soon p{color:var(--muted);font-size:16px;line-height:1.6;max-width:520px;margin:0 auto 26px}
.coming-soon .cs-cta{display:flex;gap:12px;justify-content:center;flex-wrap:wrap}
.collab-note{max-width:520px;margin:34px auto 0;background:var(--panel);border:1px solid var(--line);border-radius:12px;padding:16px 20px;font-size:13.5px;color:var(--muted);line-height:1.6}
.collab-note b{color:var(--text)}
.collab-note a{color:var(--accent);text-decoration:none;font-weight:600}
.collab-note a:hover{text-decoration:underline}
.collab-note .muted-small{display:block;font-size:11.5px;color:var(--muted-2);margin-top:4px}
/* nav "coming soon" items (Education, Jobs) */
.nav-links a.soon{display:inline-flex;flex-direction:column;align-items:center;justify-content:center;line-height:1.05;gap:1px}
.nav-links a.soon .soon-tag{font-size:8px;text-transform:uppercase;letter-spacing:.4px;color:var(--accent);opacity:.85;font-weight:700}
/* ===== Buildings gallery ===== */
.gallery-bar{margin-bottom:18px}
.gb-top{display:flex;align-items:center;gap:12px;margin-bottom:10px}
.gb-search{flex:1;min-width:160px;height:40px;border-radius:9px;background:var(--panel-2);border:1px solid var(--line);color:var(--text);padding:0 14px;font-size:14px;font-family:inherit;outline:none}
.gb-search:focus{border-color:var(--accent)}
.gb-top .gcount{flex:0 0 auto}
.gb-row{display:flex;gap:10px;flex-wrap:wrap;margin-bottom:10px}
.gb-row select{width:auto;min-width:128px;height:38px;border-radius:8px;background:var(--panel-2);border:1px solid var(--line);color:var(--text);padding:0 30px 0 13px;font-size:13px;font-family:inherit;outline:none;appearance:none;cursor:pointer;
background-image:url("data:image/svg+xml;utf8,");background-repeat:no-repeat;background-position:right 12px center}
.gb-row select:focus{border-color:var(--accent)}
/* Only shown once a filter is set, so it reads as "something is on" rather than furniture. */
.gb-clear{height:38px;border-radius:8px;background:rgba(207,226,74,.08);border:1px solid var(--accent-soft);
color:var(--accent);padding:0 15px;font:600 13px/1 inherit;cursor:pointer;transition:.14s;white-space:nowrap}
.gb-clear:hover{background:rgba(207,226,74,.16);border-color:var(--accent)}
.gb-clear[hidden]{display:none}
/* buildings toolbar grid: toggle | search | count, with filter/sort rows aligned under the search */
.gbar{display:grid;grid-template-columns:auto 1fr auto;column-gap:12px;row-gap:10px;align-items:center;margin-bottom:18px}
.gbar .mode-toggle{grid-column:1;grid-row:1}
.gbar>.gb-search{grid-column:2;grid-row:1;width:100%}
.gbar .gcount{grid-column:3;grid-row:1;white-space:nowrap}
.gbar .gbar-fill{grid-column:2;grid-row:2;margin:0}
.gbar .gbar-sort{grid-column:2;grid-row:3;margin:0}
.gbar-fill select{flex:1;min-width:0}
@media(max-width:760px){ .gbar{display:flex;flex-direction:column;align-items:stretch;gap:10px} }
.mode-toggle{display:inline-flex;background:var(--panel-2);border:1px solid var(--line);border-radius:9px;padding:3px;flex:0 0 auto}
.mt-btn{background:none;border:none;color:var(--muted);font:inherit;font-size:13px;padding:7px 14px;border-radius:7px;cursor:pointer;transition:.14s}
.mt-btn.active{background:var(--accent);color:#161109;font-weight:600}
.gfilters{display:flex;gap:9px;flex-wrap:wrap;flex:1;min-width:0}
.gfilters select,.gfilters input{width:auto;height:38px;border-radius:8px;background:var(--panel-2);border:1px solid var(--line);color:var(--text);padding:0 12px;font-size:13px;font-family:inherit;outline:none}
.gfilters select{padding-right:30px}
.gfilters input{min-width:150px}
.gfilters select:focus,.gfilters input:focus{border-color:var(--accent)}
.gcount{font-size:13px;color:var(--muted);white-space:nowrap}
.gcount #resultCount{color:var(--text);font-weight:600}
.bgallery{display:grid;grid-template-columns:repeat(4,1fr);gap:16px}
.bcard{background:var(--panel-2);border:1px solid var(--line);border-radius:12px;overflow:hidden;cursor:pointer;transition:.15s;display:flex;flex-direction:column;
/* the card is a real link to the building page, but it should not look like one */
color:inherit;text-decoration:none}
.bcard:hover{border-color:var(--accent);transform:translateY(-2px);box-shadow:var(--shadow)}
.bcard-img{position:relative;aspect-ratio:4/3;background:linear-gradient(160deg,#1a1d24,#0e1014);overflow:hidden}
.bcard-img img{width:100%;height:100%;object-fit:cover;transition:transform .5s}
.bcard:hover .bcard-img img{transform:scale(1.05)}
.bcard-img .ph{position:absolute;inset:0;display:flex;align-items:center;justify-content:center;color:#2c313b;font-family:'Space Grotesk',sans-serif;font-weight:700;font-size:30px}
.bcard-img .nophoto{position:absolute;bottom:8px;left:10px;font-size:10px;color:var(--muted-2)}
.bcard-conf{position:absolute;top:9px;right:9px;width:9px;height:9px;border-radius:50%;box-shadow:0 0 0 2px rgba(0,0,0,.35)}
.bcard-credit{position:absolute;bottom:7px;right:9px;font-size:9.5px;color:rgba(255,255,255,.82);text-shadow:0 1px 3px rgba(0,0,0,.7);max-width:70%;overflow:hidden;white-space:nowrap;text-overflow:ellipsis}
.bcard-body{padding:11px 13px}
.bcard-body h3{font-family:'Space Grotesk',sans-serif;font-size:14px;font-weight:600;margin:0 0 5px;line-height:1.25;display:-webkit-box;-webkit-line-clamp:2;-webkit-box-orient:vertical;overflow:hidden;min-height:35px}
.bcard-meta{font-size:11.5px;color:var(--muted);display:flex;flex-wrap:wrap;gap:3px 5px;align-items:center}
.bcard-meta .yr{color:var(--accent);font-weight:600}
.bcard-meta .sep{color:var(--muted-2)}
.pager{display:flex;justify-content:center;align-items:center;gap:14px;margin-top:26px}
.map-inline{height:68vh;min-height:440px;border:1px solid var(--line);border-radius:14px;overflow:hidden;position:relative}
.map-inline #map{position:absolute;inset:0;background:#0a0b0d}
.legend-inline{flex-direction:row;flex-wrap:wrap;gap:16px;align-items:center;margin:12px 0 0;padding:0;border:none}
@media(max-width:1100px){ .bgallery{grid-template-columns:repeat(3,1fr)} }
@media(max-width:760px){ .bgallery{grid-template-columns:repeat(2,1fr)} .gfilters{flex:1 1 100%} }
@media(max-width:460px){ .bgallery{grid-template-columns:1fr} }
/* ===== submission forms ===== */
.form-wrap{max-width:680px;margin:6px auto 0}
.bid-form{display:flex;flex-direction:column;gap:15px;margin-top:8px}
.form-grid{display:grid;grid-template-columns:1fr 1fr;gap:15px}
.form-row{display:flex;flex-direction:column;gap:6px}
.bid-form label{font-size:12px;color:var(--muted);font-weight:600;letter-spacing:.2px}
.bid-form label .req{color:var(--accent)}
.bid-form input,.bid-form select,.bid-form textarea{width:100%;background:var(--panel-2);border:1px solid var(--line);border-radius:9px;color:var(--text);font:inherit;font-size:14px;outline:none}
.bid-form input,.bid-form select{height:44px;padding:0 13px}
.bid-form select{appearance:none;cursor:pointer;padding-right:30px;
background-image:url("data:image/svg+xml;utf8,");background-repeat:no-repeat;background-position:right 12px center}
.bid-form textarea{min-height:110px;padding:11px 13px;resize:vertical;line-height:1.5}
.bid-form input:focus,.bid-form select:focus,.bid-form textarea:focus{border-color:var(--accent)}
.form-file{border:1.5px dashed var(--line-2);border-radius:11px;padding:22px;text-align:center;color:var(--muted);cursor:pointer;transition:.15s;background:rgba(255,255,255,.015);display:block}
.form-file:hover{border-color:var(--accent);color:var(--text)}
.form-file input{display:none}
.form-file .fi-ic{font-size:24px;display:block;margin-bottom:6px}
.form-check{display:flex;flex-direction:row;align-items:flex-start;gap:10px;font-size:12.5px;color:var(--muted);line-height:1.45;cursor:pointer}
.form-check input{width:17px;height:17px;margin-top:1px;accent-color:var(--accent);flex:0 0 auto}
.form-check a{color:var(--accent);text-decoration:none}
.form-check a:hover{text-decoration:underline}
.form-check .muted{color:var(--muted-2)}
.lbl-hint{color:var(--muted-2);font-weight:400;text-transform:none;letter-spacing:0}
.form-actions{display:flex;align-items:center;gap:16px;margin-top:4px;flex-wrap:wrap}
.form-ok{color:var(--high);font-weight:600;font-size:13.5px;min-height:18px}
.form-note{font-size:12px;color:var(--muted-2)}
@media(max-width:600px){ .form-grid{grid-template-columns:1fr} }
/* licensing / explainer + legal terms */
.explainer{max-width:680px;margin:0 auto 18px;background:rgba(207,226,74,.05);border:1px solid var(--accent-soft);border-radius:12px;padding:15px 18px;font-size:13.5px;color:#d5d9e2;line-height:1.55}
.explainer b{color:var(--text)}
.explainer a{color:var(--accent);text-decoration:none}
/* licence rate card */
.ratecard{max-width:680px;margin:0 auto 22px;background:var(--panel);border:1px solid var(--line);border-radius:12px;padding:16px 20px 14px}
.rc-head{display:flex;align-items:center;gap:10px;margin-bottom:10px}
.rc-head h3{font-family:'Space Grotesk',sans-serif;font-size:16px;margin:0}
.rc-table{width:100%;border-collapse:collapse;font-size:13px}
.rc-table th{text-align:left;font-size:10.5px;text-transform:uppercase;letter-spacing:.8px;color:var(--muted-2);font-weight:600;padding:0 0 8px;border-bottom:1px solid var(--line)}
.rc-table td{padding:10px 0;border-bottom:1px solid var(--line);color:var(--muted);vertical-align:top}
.rc-table td b{color:var(--text);font-weight:600}
.rc-table tr:last-child td{border-bottom:none}
.rc-table .rc-p{text-align:right;white-space:nowrap;color:var(--accent);font-family:'Space Grotesk',sans-serif;font-weight:700;padding-left:14px}
.rc-note{font-size:11.5px;color:var(--muted-2);line-height:1.55;margin:10px 0 0}
.legal{max-width:760px;margin:42px auto 0;border-top:1px solid var(--line);padding-top:26px}
.legal>h2{font-family:'Space Grotesk',sans-serif;font-size:20px;margin:0 0 14px}
.legal .disclaimer{background:rgba(230,180,90,.08);border:1px solid rgba(230,180,90,.28);border-radius:10px;padding:12px 15px;font-size:12.5px;color:#e7d6b4;line-height:1.55;margin:0 0 20px}
.legal ol{margin:0;padding-left:20px;display:flex;flex-direction:column;gap:13px}
.legal ol li{font-size:13px;color:var(--muted);line-height:1.6}
.legal ol li b{color:var(--text)}
.legal a{color:var(--accent);text-decoration:none}
.legal a:hover{text-decoration:underline}
.legal .refs{margin-top:20px;font-size:11.5px;color:var(--muted-2);line-height:1.95}
.legal .refs h4{font-size:11px;text-transform:uppercase;letter-spacing:1px;color:var(--muted-2);margin:0 0 6px}
/* per-section CTA row (explore + contribute) */
/* Pushed to the foot of the column, then lifted clear of it — sitting hard on
the card's bottom edge left too much air under the copy. Every row lifts by
the same amount, so the buttons still line up across all four. */
.feature-cta{display:flex;gap:10px;flex-wrap:wrap;align-items:center;margin-top:auto;margin-bottom:34px}
.contribute-note{font-size:12px;color:var(--muted-2)}
@media(max-width:760px){ .home-wall{grid-template-columns:repeat(3,1fr)} .vhero-collage{grid-template-columns:repeat(4,1fr)} }
/* ======================= Responsive ======================= */
@media(max-width:1100px){
.layout{grid-template-columns:240px 1fr 320px}
.grid-4{grid-template-columns:repeat(2,1fr)}
.grid-3{grid-template-columns:repeat(2,1fr)}
}
/* Eight links plus the brand, Newsletter and Join need 1078px in the bar. Below
that they used to run off the right edge and drag a sideways scrollbar across
the whole site, so the menu collapses here rather than at 920px. */
@media(max-width:1100px){
.nav-links{display:none;position:absolute;top:64px;left:0;right:0;flex-direction:column;gap:0;background:var(--panel);border-bottom:1px solid var(--line);padding:8px}
.nav-links.open{display:flex}
.nav-links a{padding:12px 14px;border-radius:8px}
.nav-toggle{display:flex;align-items:center;justify-content:center}
}
@media(max-width:920px){
.feature{grid-template-columns:1fr;gap:28px}
.feature:nth-child(even) .feature-media{order:0}
.footer-grid{grid-template-columns:1fr 1fr}
}
/* ----- Phones -----
Brand, Newsletter, Join and the menu want 416px inside 375px. Rather than
drop a button, Newsletter keeps its envelope and loses its word — the icon
is understood, and both buttons stay where a thumb expects them. */
.nav-only-mobile{display:none} /* only inside the collapsed menu */
/* On the narrowest phones the wordmark goes too — the logo still links home. */
@media(max-width:345px){
.brand-name{display:none}
}
@media(max-width:560px){
.nav-right .btn-outline{font-size:0;padding-left:11px;padding-right:11px}
.nav-right .btn-outline svg{margin-right:0 !important;width:17px;height:17px}
.brand-name{font-size:19px}
.brand-logo img{width:34px;height:34px}
.sitenav-inner{gap:8px;padding:0 14px}
.nav-right{gap:8px}
/* four figures read as a 2x2 block, not a row of three and a stray */
.vhero .hero-stats{display:grid;grid-template-columns:1fr 1fr;gap:22px 10px;margin-top:36px}
.vhero .hero-stat{text-align:center}
/* buttons of different widths look like a mistake; full width reads as a choice */
.vhero .hero-cta{flex-direction:column;align-items:stretch;gap:10px}
.vhero .hero-cta .btn{width:100%;justify-content:center}
}
@media(max-width:860px){
body[data-page="buildings"]{overflow:auto}
.layout{grid-template-columns:1fr;height:auto}
.filters{border-right:none;border-bottom:1px solid var(--line)}
.map-wrap{height:55vh;min-height:360px}
.results{border-left:none;border-top:1px solid var(--line)}
.tool-bar{flex-wrap:wrap;height:auto;padding:12px 16px;gap:12px}
.search-wrap{order:3;flex-basis:100%;max-width:none}
}
@media(max-width:680px){
.grid-4,.grid-3,.grid-2{grid-template-columns:1fr}
.footer-grid{grid-template-columns:1fr}
.section{padding:56px 0}
.promo{flex-direction:column;align-items:flex-start}
}
/* ======================= Newsletter preview ======================= */
.nl-wrap{padding:34px 20px 70px;background:
radial-gradient(900px 400px at 50% -5%,rgba(207,226,74,.06),transparent 60%),var(--bg-2)}
.nl-pre{max-width:680px;margin:0 auto 16px;display:flex;align-items:center;justify-content:space-between;gap:14px;flex-wrap:wrap;
background:var(--panel);border:1px dashed var(--line-2);border-radius:12px;padding:14px 18px}
.nl-pre .lbl{font-size:12px;color:var(--muted)}
.nl-pre .lbl b{color:var(--accent);font-weight:600}
.nl-doc{max-width:680px;margin:0 auto;background:var(--panel);border:1px solid var(--line);border-radius:16px;overflow:hidden;box-shadow:var(--shadow-lg)}
.nl-masthead{padding:32px 36px 26px;border-bottom:4px solid var(--line-2);
background:linear-gradient(180deg,#15171d,#101216)}
.nl-mast-top{display:flex;align-items:center;gap:12px;margin-bottom:20px}
.nl-mast-top img{width:38px;height:38px;border-radius:9px}
.nl-mast-top .nm{font-family:'Space Grotesk',sans-serif;font-weight:700;font-size:16px;letter-spacing:.2px}
.nl-mast-title{font-family:'Space Grotesk',sans-serif;font-size:27px;font-weight:700;margin:0 0 8px;line-height:1.1}
.nl-issue{font-size:12px;color:var(--muted);text-transform:uppercase;letter-spacing:1.5px}
.nl-kicker{margin-top:14px;font-size:12px;font-weight:600;letter-spacing:1px;color:var(--accent);text-transform:uppercase}
.nl-content{padding:8px 36px 30px}
.nl-section{margin-top:30px}
/* The topic was carried by an emoji; with that gone the rule does the work.
The name comes first and its line sits underneath, so the brand colour
belongs to the topic rather than to the gap above it. The masthead's own
rule is heavier but grey, which keeps the yellow meaning one thing. */
.nl-section-h{display:flex;align-items:center;gap:10px;font-family:'Space Grotesk',sans-serif;font-size:13px;font-weight:700;
text-transform:uppercase;letter-spacing:1.6px;color:var(--accent);
border-bottom:2px solid var(--accent);padding:0 0 9px;margin:38px 0 18px}
.nl-section:first-child .nl-section-h{margin-top:0}
.nl-story{margin-bottom:22px}
/* pictures carried in from one of our own write-ups */
.nl-shots{display:grid;gap:6px;margin:12px 0 12px}
.nl-shots.two{grid-template-columns:1fr 1fr}
.nl-shots img{width:100%;height:150px;object-fit:cover;border-radius:8px;border:1px solid var(--line);display:block}
.nl-shots:not(.two) img{height:auto;max-height:260px}
.nl-story h3{font-size:17.5px;margin:0 0 7px;line-height:1.32}
.nl-story p{margin:0 0 8px;color:#c2c7d0;font-size:14px;line-height:1.62}
.nl-source{font-size:12.5px;display:inline-flex;align-items:center;gap:5px}
.nl-source a{color:var(--muted);text-decoration:none;font-weight:600}
.nl-source a:hover{color:var(--accent)}
.nl-source a:hover{text-decoration:underline}
/* Four columns don't fit a phone, so the table scrolls on its own rather than
pushing the whole email sideways. */
.nl-tablewrap{overflow-x:auto;-webkit-overflow-scrolling:touch;max-width:100%}
.nl-table{width:100%;min-width:520px;border-collapse:collapse;margin-top:4px;font-size:13px}
.nl-table th{text-align:left;color:var(--muted-2);text-transform:uppercase;font-size:10.5px;letter-spacing:.5px;padding:8px 10px;border-bottom:1px solid var(--line-2)}
.nl-table td{padding:10px;border-bottom:1px solid var(--line);vertical-align:top;color:#c2c7d0}
.nl-table td.val{color:var(--accent);font-weight:600;font-family:'Space Grotesk',sans-serif;white-space:nowrap}
/* a figure that is really a sentence wraps instead of shoving the last
column out of the table — newsletter.js decides which is which */
.nl-table td.val.long{white-space:normal}
/* the source is a citation, not a headline: it gives way first */
.nl-table td:last-child{font-size:12px;color:var(--muted-2)}
.nl-foot{padding:28px 36px 32px;border-top:1px solid var(--line);background:var(--bg-2);text-align:center}
.nl-foot h4{font-family:'Space Grotesk',sans-serif;margin:0 0 8px;font-size:18px}
.nl-foot p{color:var(--muted);font-size:13px;margin:0 0 16px}
.nl-foot .unsub{margin-top:16px;font-size:11px;color:var(--muted-2)}
.sample-link{font-size:13px;color:var(--accent);text-decoration:none;display:inline-block;margin-top:14px}
.sample-link:hover{text-decoration:underline}
/* ---- the back issues ----
A single quiet line under the issue: a label and the dates. Nothing here
competes with the issue itself, and with one or two issues out it reads as
a footnote rather than a short archive. */
.nl-archive{max-width:680px;margin:26px auto 0;display:flex;align-items:baseline;
gap:6px 12px;flex-wrap:wrap;font-size:12.5px;line-height:1.9}
.nl-archive .lbl{color:var(--muted-2);letter-spacing:.04em}
.nl-archive-list{display:inline;color:var(--muted-2)}
.nl-past{color:var(--muted);text-decoration:none;white-space:nowrap}
.nl-past:hover{color:var(--accent);text-decoration:underline}
.nl-archive .sep{opacity:.4;margin:0 5px}
/* one issue either side, at the foot of a back issue */
.nl-near{max-width:680px;margin:22px auto 0;display:flex;align-items:center;justify-content:space-between;
gap:14px;font-size:13px}
.nl-near a{color:var(--muted);text-decoration:none}
.nl-near a:hover{color:var(--accent)}
.nl-near .all{font-weight:600;color:var(--accent)}
@media(max-width:560px){
.nl-masthead,.nl-content,.nl-foot{padding-left:22px;padding-right:22px}
.nl-mast-title{font-size:23px}
.nl-near{font-size:12px;gap:10px}
}