/*


 */

:root{
  --ink:#0A0A08; --paper:#F4F1EB; --accent:#1B3A2D; --accent2:#C8963E;
  --muted:#6B6860; --rule:#D4D0C8; --ad-bg:#F9F7F2; --on-accent:var(--paper);
  --serif:'Playfair Display',Georgia,serif;
  --mono:'IBM Plex Mono',monospace;
  --sans:'IBM Plex Sans',system-ui,sans-serif;
}
*{ box-sizing:border-box; margin:0; padding:0; }
body{ background:var(--paper); color:var(--ink); font-family:var(--sans); font-size:15px; line-height:1.65; }
a{ color:var(--accent); text-decoration:none; }
a:hover{ text-decoration:underline; }

/* ---- masthead ---------------------------------------------------------- */
.mast{ border-bottom:2px solid var(--ink); padding-top:48px; }
/* Top nav (region + thesis pickers, sign-in) stays pinned through the whole scroll — guided-nav
   essential so the cuts are always reachable over a long result list. Fixed (not sticky, which would
   unstick past the masthead); .mast padding-top above reserves its height. */
.mast-top{ position:fixed; top:0; left:0; right:0; z-index:60; background:var(--canvas);
  display:flex; justify-content:space-between; align-items:center; padding:12px 40px;
  border-bottom:1px solid var(--rule); font-family:var(--mono); font-size:11px; color:var(--muted); letter-spacing:.08em; }
.mast-top a{ color:var(--muted); letter-spacing:.08em; }
.mast-top .right{ display:flex; gap:16px; align-items:center; }
.region-picker{ font-family:var(--mono); font-size:11px; letter-spacing:.08em; color:var(--ink);
  background:transparent; border:0; border-bottom:1px solid var(--rule); cursor:pointer;
  padding:2px 15px 2px 1px; appearance:none; -webkit-appearance:none;
  background-image:url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' width='8' height='6'><path d='M0 0h8L4 6z' fill='%23888'/></svg>");
  background-repeat:no-repeat; background-position:right 1px center; }
.region-picker:hover{ color:var(--accent2); border-color:var(--accent2); }
.region-picker option{ background:var(--canvas); color:var(--ink); letter-spacing:normal; }
.mast-lead{ display:flex; align-items:center; gap:18px; }
.home-link{ font-family:var(--mono); font-size:11px; letter-spacing:.08em; color:#2d9cec; }
.home-link:hover{ color:var(--paper); text-decoration:none; }
.mast-title-wrap{ text-align:center; padding:28px 40px 20px; border-bottom:1px solid var(--rule); }
.mast-title{ font-family:var(--serif); font-size:72px; font-weight:900; letter-spacing:-2px; line-height:1; color:inherit; }
.mast-title:hover{ text-decoration:none; }
.mast-title .vc{ color:var(--accent2); }
.mast-tagline{ font-family:var(--mono); font-size:11px; letter-spacing:.2em; text-transform:uppercase; color:var(--muted); margin-top:10px; }
.region-nav,.view-toggle{ display:flex; justify-content:center; }
.region-nav{ border-bottom:1px solid var(--rule); flex-wrap:wrap; }
.region-link{ font-family:var(--mono); font-size:11px; letter-spacing:.12em; text-transform:uppercase;
  color:var(--ink); padding:12px 24px; border-right:1px solid var(--rule); }
.region-link:first-child{ border-left:1px solid var(--rule); }
/* national (oluwadi.com): the word, defined — a lexicon entry held above the region chooser */
.mast-define{ text-align:center; padding:30px 40px 24px; border-bottom:1px solid var(--rule); }
.define-body{ max-width:640px; margin:16px auto 0; }
.define-meta{ font-family:var(--mono); font-size:11px; letter-spacing:.18em; text-transform:uppercase; color:var(--muted); }
.define-meta span{ text-transform:none; letter-spacing:.04em; color:var(--ink); }
.define-gloss{ font-family:var(--serif); font-size:21px; line-height:1.5; color:var(--ink); margin-top:12px; }
.define-origin{ font-family:var(--mono); font-size:11px; letter-spacing:.03em; color:var(--muted); margin-top:14px; }
.define-origin span{ text-transform:uppercase; letter-spacing:.14em; margin-right:8px; }
.define-origin em{ color:var(--accent2); font-style:italic; }
.mast-define-head{ display:flex; flex-direction:column; align-items:center; gap:6px; }
.mast-emblem{ width:72px; height:72px; flex:none; }
.mast-hero{ display:block; width:auto; max-width:84%; max-height:117px; height:auto; margin:0 auto 2px; }
.mast-hero-sm{ display:block; width:220px; max-width:58%; height:auto; margin:0 auto 4px; }
.mast-purpose{ font-family:var(--serif); font-size:23px; line-height:1.45; color:var(--ink); max-width:700px; margin:20px auto 2px; }
.mast-purpose strong{ font-weight:800; color:var(--accent); }
.region-lead{ font-family:var(--mono); font-size:11px; letter-spacing:.14em; text-transform:uppercase; color:var(--muted); display:flex; align-items:center; padding-right:18px; }
.region-link:hover{ text-decoration:none; }
.region-link.active{ color:var(--on-accent); background:var(--accent); }
.view-link{ font-family:var(--mono); font-size:12px; letter-spacing:.15em; text-transform:uppercase;
  padding:12px 40px; color:var(--muted); }
.view-link:first-child{ border-right:1px solid var(--rule); }
.view-link:hover{ text-decoration:none; }
.view-link.active{ background:var(--ink); color:var(--paper); }

/* ---- stat bar ---------------------------------------------------------- */
/* Column widths come from the shared .region-cols grid via `subgrid` (see below) — not hand-tuned
   here — so this always lines up with the facets/feed/sidebar grid under it. */
.statbar{ display:grid; grid-template-columns:subgrid; border-bottom:2px solid var(--ink); }
.stat{ padding:20px 28px; border-right:1px solid var(--rule); text-align:center; }
.stat:last-child{ border-right:none; }
.stat-n{ font-family:var(--serif); font-size:38px; font-weight:700; line-height:1; color:var(--accent); }
.stat-l{ font-family:var(--mono); font-size:10px; letter-spacing:.12em; text-transform:uppercase; color:var(--muted); margin-top:4px; }

/* ---- body grid + feed -------------------------------------------------- */
.col-head{ padding:14px 24px 7px; border-bottom:1px solid var(--rule); }
.feed-head{ display:flex; align-items:center; justify-content:space-between;
  background:var(--paper); position:sticky; top:0; z-index:10; }
.feed-head h2{ font-family:var(--mono); font-size:11px; letter-spacing:.18em; text-transform:uppercase; color:var(--muted); font-weight:500; }
.feed-tag{ font-family:var(--mono); font-size:10px; letter-spacing:.1em; text-transform:uppercase;
  background:var(--accent); color:var(--on-accent); padding:3px 8px; margin-left:10px; }
.feed-count{ font-family:var(--mono); font-size:11px; color:var(--accent2); }
.feed-empty{ padding:48px 28px; text-align:center; color:var(--muted); font-family:var(--mono); font-size:13px; }
.pager{ display:flex; align-items:center; justify-content:center; gap:18px; padding:24px; }
.pager-link{ font-family:var(--mono); font-size:11px; letter-spacing:.08em; text-transform:uppercase;
  padding:8px 16px; border:1px solid var(--rule); color:var(--ink); }
.pager-link:hover{ background:var(--accent); color:var(--on-accent); text-decoration:none; }
.pager-link.disabled{ color:var(--rule); border-color:var(--rule); pointer-events:none; }
.pager-info{ font-family:var(--mono); font-size:11px; letter-spacing:.08em; color:var(--muted); }

.card{ display:grid; grid-template-columns:1fr auto; gap:16px; align-items:start;
  padding:24px 28px; border-bottom:1px solid var(--rule); color:inherit; }
.card:hover{ background:rgba(27,58,45,.04); text-decoration:none; }
.card-cat{ font-family:var(--mono); font-size:10px; letter-spacing:.14em; text-transform:uppercase; color:var(--accent2); margin-bottom:5px; }
.card-name{ font-family:var(--serif); font-size:21px; font-weight:700; line-height:1.2; margin-bottom:6px; }
.card-loc{ font-family:var(--mono); font-size:11px; color:var(--muted); margin-bottom:8px; }
.card-desc{ font-size:13px; color:#3D3C38; line-height:1.6; max-width:500px;
  overflow:hidden; display:-webkit-box; -webkit-line-clamp:3; -webkit-box-orient:vertical; }
.card-meta{ text-align:right; white-space:nowrap; }
.card-meta .m{ font-family:var(--mono); font-size:11px; color:var(--muted); margin-bottom:4px; }
.card-meta .m.gold{ color:var(--accent2); margin-top:4px; }
.card-meta .m.people{ color:var(--ink); white-space:normal; max-width:220px; }
.card-meta .m.url{ color:var(--accent2); }

/* in-tab result-set search */
/* upper-nav search: magnifying-glass toggle -> dropdown box (~30 chars) */
.nav-search-btn{ background:none; border:none; cursor:pointer; color:var(--muted); padding:4px 8px;
  display:inline-flex; align-items:center; vertical-align:middle; }
.nav-search-btn:hover{ color:var(--accent, #4169ff); }
.nat-band{ flex-wrap:wrap; align-items:center; gap:16px; padding:14px 20px; }
.nat-band-div{ color:var(--rule); }
.nat-pick{ display:inline-flex; align-items:center; gap:8px; }
.nat-pick-l{ font-family:var(--mono); font-size:11px; letter-spacing:.12em; text-transform:uppercase; color:var(--muted); }
.nav-search{ display:none; text-align:center; padding:12px 0 0; }
.nav-search.open{ display:block; }
.nav-search input[type=search]{ font:inherit; font-size:14px; width:280px; max-width:82%; padding:8px 12px;
  border:1.5px solid var(--enc, #9db4ff); border-radius:9px; background:#fff; color:var(--ink); }
.nav-search input[type=search]:focus{ outline:none; border-color:var(--accent, #4169ff); }
.search-active{ font-family:var(--mono); font-size:12px; color:var(--muted); padding:10px 28px 0; }
.search-active a{ color:var(--accent, #4169ff); }

/* Business-tier localized map */
.region-map{ border:1.5px solid var(--enc, #9db4ff); border-radius:12px; overflow:hidden; margin:0 0 20px; background:#fff; }
#dmv-map{ height:420px; width:100%; }
.dmv-pin{ background:var(--accent2, #b8860b); border:2px solid #fff; border-radius:50%; box-shadow:0 1px 4px rgba(0,0,0,.4); }
.dmv-pin.multi{ background:var(--accent, #4169ff); display:flex; align-items:center; justify-content:center; }
.dmv-pin.multi span{ color:#fff; font-family:var(--mono, monospace); font-size:12px; font-weight:600; line-height:1; }
.map-unmapped{ font-family:var(--mono, monospace); font-size:13px; color:var(--ink); line-height:1.5;
  margin:0; padding:13px 18px; border-top:1.5px solid var(--enc, #9db4ff); background:rgba(0,0,0,.025); }
.map-unmapped strong{ color:var(--accent2, #b8860b); font-size:15px; }
.map-unmapped span{ color:var(--muted); }

/* Pro "add a firm" submission form */
.view-toggle .add-firm{ color:var(--accent, #4169ff); }
.submit-form{ display:flex; flex-direction:column; gap:14px; max-width:480px; margin-top:20px; }
.submit-form .fld{ display:flex; flex-direction:column; gap:5px; font-family:var(--mono); font-size:11px;
  letter-spacing:.08em; text-transform:uppercase; color:var(--muted); }
.submit-form .fld input, .submit-form .fld select, .submit-form .fld textarea{
  font-family:var(--sans, inherit); font-size:15px; text-transform:none; letter-spacing:0; color:var(--ink);
  padding:9px 12px; border:1.5px solid var(--enc, #9db4ff); border-radius:9px; background:#fff; }
.submit-form .fld input:focus, .submit-form .fld select:focus, .submit-form .fld textarea:focus{
  outline:none; border-color:var(--accent, #4169ff); }
.submit-form .fld-row{ display:flex; gap:14px; } .submit-form .fld-row .fld{ flex:1; }
.submit-form .fld.state{ max-width:90px; } .submit-form .req{ color:var(--accent2, #b8860b); }
.submit-form .hint{ font-weight:400; text-transform:none; letter-spacing:0; color:var(--muted); font-size:11px; }
.submit-form .btn-primary{ align-self:flex-start; font-family:var(--sans); font-size:14px; cursor:pointer;
  padding:10px 22px; border:none; border-radius:9px; background:var(--accent, #4169ff); color:var(--on-accent); }
.match-hint{ font-size:13px; margin-top:-6px; min-height:18px; }
.match-hint .ok{ color:var(--muted); } .match-hint .warn{ color:var(--accent2, #b8860b); font-weight:600; }
.match-hint a{ color:var(--accent, #4169ff); }
.nexus-badge{ margin-top:8px; font-family:var(--mono); font-size:10px; padding:2px 8px;
  background:var(--accent); color:var(--on-accent); display:inline-block; }

/* ---- sidebar ----------------------------------------------------------- */
.side-sec{ padding:20px; border-bottom:1px solid var(--rule); }
.side-ad{ border-bottom:1px solid var(--rule); }
.side-title{ font-family:var(--mono); font-size:10px; letter-spacing:.18em; text-transform:uppercase; color:var(--accent2); }
.signal-row{ display:flex; align-items:center; gap:10px; padding:7px 0; border-bottom:1px solid var(--rule); font-size:12px; }
.signal-dot{ width:7px; height:7px; border-radius:50%; flex-shrink:0; }
.dot-high{ background:var(--accent); } .dot-med{ background:var(--accent2); } .dot-low{ background:var(--rule); }
.signal-name{ flex:1; font-weight:500; }
.signal-val{ font-family:var(--mono); font-size:11px; color:var(--accent); font-weight:600; }
.region-row{ display:flex; justify-content:space-between; align-items:baseline; padding:7px 0; border-bottom:1px solid var(--rule); font-size:12px; }
.region-row a.active{ font-weight:700; color:var(--accent); }
.region-row .cnt{ font-family:var(--mono); font-size:11px; color:var(--muted); }
.edition-row{ padding:6px 0; border-bottom:1px solid var(--rule); }
.edition-row a{ font-size:13px; color:var(--accent); display:block; }

/* ---- ad zones ---------------------------------------------------------- */
[data-controller="ad-fallback"]{ width:100%; } /* wraps a platform ad + its hidden house/floor reveal */
.ad{ width:100%; background:var(--ad-bg); display:flex; align-items:center; justify-content:center; position:relative; overflow:hidden; }
.ad-inline{ height:100px; border-top:1px solid var(--accent2); border-bottom:1px solid var(--accent2); }
.ad-sidebar{ height:250px; }
/* Adsterra fixed-size units: exact box, centered, clipped by .ad overflow (no balloon) */
.ad-adsterra-300x250{ width:300px; height:250px; margin-inline:auto; }
.ad-adsterra-728x90{ width:728px; max-width:100%; height:90px; margin-inline:auto; border-top:1px solid var(--accent2); border-bottom:1px solid var(--accent2); }
.ad-label{ position:absolute; top:6px; left:12px; font-family:var(--mono); font-size:9px; letter-spacing:.15em; color:#888780; }
.ad-ph{ display:flex; flex-direction:column; align-items:center; gap:4px; opacity:.4; }
.ad-ph .dim{ font-family:var(--mono); font-size:12px; color:var(--accent2); }
.ad-ph .pos{ font-family:var(--mono); font-size:10px; color:#888780; }
/* last-resort floor (shared/_ad_slot.html.erb, house tier empty) — an invitation, not a void */
.ad-floor-cta{ display:flex; flex-direction:column; align-items:center; gap:3px; text-decoration:none;
  padding:8px 20px; border:1px dashed var(--accent2); border-radius:3px; opacity:.85;
  transition:opacity .15s, border-color .15s; }
.ad-floor-cta:hover{ opacity:1; border-color:var(--accent); }
.ad-floor-head{ font-family:var(--serif); font-style:italic; font-size:16px; color:var(--accent2); }
.ad-floor-sub{ font-family:var(--mono); font-size:9px; letter-spacing:.1em; text-transform:uppercase; color:var(--muted); }

/* ---- footer ------------------------------------------------------------ */
.foot{ border-top:2px solid var(--ink); padding:20px 40px; display:flex; justify-content:space-between;
  font-family:var(--mono); font-size:11px; color:var(--muted); }

/* ---- company detail ---------------------------------------------------- */
.detail{ max-width:760px; margin:0 auto; padding:48px 40px; }
.detail .back{ font-family:var(--mono); font-size:11px; letter-spacing:.1em; text-transform:uppercase; color:var(--muted); }
.detail h1{ font-family:var(--serif); font-size:46px; font-weight:900; line-height:1.05; margin:14px 0 6px; }
.detail .sub{ font-family:var(--mono); font-size:11px; letter-spacing:.1em; text-transform:uppercase; color:var(--accent2); }
.detail .desc{ margin:22px 0; font-size:16px; line-height:1.7; max-width:62ch; }
.detail .facts-rows{ border-top:1px solid var(--rule); border-bottom:1px solid var(--rule); padding:22px 0; }
.detail .fact-row{ display:flex; justify-content:space-between; gap:24px; }
.detail .fact-row + .fact-row{ margin-top:18px; }
.detail .fact-cell{ flex:1 1 0; min-width:0; }
.detail .fact-cell .k{ font-family:var(--serif); font-size:22px; font-weight:700; letter-spacing:.12em; text-transform:uppercase; color:var(--muted); }
.detail .fact-cell .v{ font-family:var(--sans); font-size:15px; font-weight:400; color:var(--accent); margin-top:3px; }

/* Investor/portfolio pivot -- one clickable name per line, no count (the list IS the information). */
.relation-group{ margin-top:24px; }
.relation-lead{ font-family:var(--mono); font-size:11px; letter-spacing:.14em; text-transform:uppercase; color:var(--muted); margin-bottom:10px; }
.relation-list{ list-style:none; margin:0; padding:0; }
.relation-link{ display:block; padding:3px 0; font-family:var(--sans); font-size:15px; color:var(--ink); text-decoration:none; }
.relation-link:hover{ color:var(--accent2); }

/* ---- auth (login / signup) --------------------------------------------- */
.auth{ max-width:380px; margin:0 auto; padding:48px 40px 64px; }
.auth h1{ font-family:var(--serif); font-size:32px; font-weight:900; margin-bottom:6px; }
.auth-sub{ color:var(--muted); font-size:14px; margin-bottom:18px; }
.auth-input{ display:block; width:100%; padding:11px 13px; margin-bottom:12px; font:inherit; font-size:14px;
  background:#fff; border:1px solid var(--rule); border-radius:0; color:var(--ink); }
.auth-input:focus{ outline:none; border-color:var(--accent); }
.auth-btn{ width:100%; padding:12px; font-family:var(--mono); font-size:12px; letter-spacing:.12em;
  text-transform:uppercase; background:var(--ink); color:var(--paper); border:none; cursor:pointer; }
.auth-btn:hover{ background:var(--accent); }
.auth-error{ background:#fbeded; border:1px solid #e6b8b8; color:#c0392b; padding:9px 12px; font-size:13px; margin-bottom:14px; }
.auth-note{ color:var(--muted); font-size:13px; margin-top:16px; }

/* ---- pricing ----------------------------------------------------------- */
.pricing{ max-width:1000px; margin:0 auto; padding:40px; }
.tiers{ display:grid; grid-template-columns:repeat(auto-fit,minmax(220px,1fr)); gap:18px; margin-top:24px; }
.tier{ border:1px solid var(--rule); padding:24px; }
.tier.featured{ border:2px solid var(--accent); }
.coming-soon{ font-family:var(--mono); font-size:10px; letter-spacing:.14em; text-transform:uppercase; color:#c0392b; margin-bottom:6px; }
.tier h3{ font-family:var(--serif); font-size:24px; }
.tier .price{ font-family:var(--mono); font-size:13px; color:var(--accent2); margin:6px 0 14px; }
.tier ul{ list-style:none; font-size:13px; line-height:1.9; color:#3D3C38; }
.tier-note{ font-size:11px; line-height:1.5; color:var(--muted); margin-top:12px; padding-top:10px; border-top:1px solid var(--rule); }
.btn-upgrade{ display:inline-block; margin-top:16px; padding:9px 16px; font-family:var(--mono); font-size:12px; letter-spacing:.04em; text-transform:uppercase; background:var(--accent); color:#fff; border:none; cursor:pointer; text-decoration:none; }
.btn-upgrade:hover{ background:var(--accent2); }
.tier-current{ margin-top:16px; font-family:var(--mono); font-size:11px; letter-spacing:.1em; text-transform:uppercase; color:var(--muted); }

/* ---- stats page --------------------------------------------------------- */
.stats-page{ max-width:520px; margin:0 auto; padding:64px 40px; text-align:center; }
.stats-wordmark{ display:inline-flex; align-items:center; gap:14px; color:#2d9cec; margin:0 0 40px; }
.stats-wordmark:hover{ text-decoration:none; opacity:.82; }
.stats-logo-mark{ width:56px; height:56px; flex:none; }
.stats-word{ font-family:var(--serif); font-size:40px; font-weight:700; letter-spacing:-.5px; }
.stats-rule{ border:none; border-top:2px solid var(--accent2); margin:0 0 32px; width:100vw; position:relative; left:50%; right:50%; margin-left:-50vw; margin-right:-50vw; }
.stats-list{ margin:0; }
.stats-row{ display:flex; justify-content:space-between; align-items:baseline; padding:16px 0; border-bottom:1px solid var(--rule); }
.stats-row:first-child{ border-top:1px solid var(--rule); }
.stats-row dt{ font-family:var(--mono); font-size:18px; letter-spacing:.08em; text-transform:uppercase; color:var(--muted); }
.stats-row dd{ font-family:var(--mono); font-size:18px; letter-spacing:.08em; font-weight:700; margin:0; }

@media(max-width:820px){
  .mast-title{ font-size:52px; }
  .mast-define-head{ gap:5px; }
  .mast-emblem{ width:56px; height:56px; }
  .mast-purpose{ font-size:19px; }
}

/* ===================================================================== *
 *  OSPARNA BRAND THEME — TEST OVERRIDES  (delete this whole block to revert)
 *  Blue 1 #4169ff (royal) + Blue 2 #2d9cec (sky) -> enclosures/buttons/highlights
 *  Grey #4d4d4d -> ALL text (no blue text, except the DMV wordmark)
 *  Dark blue #0d1f4f -> page background
 * ===================================================================== */
:root{
  --ink:#c7ccd8;        /* one grey for ALL text — light, legible on dark blue */
  --muted:#c7ccd8;      /* same grey (no separate label shade) */
  --paper:#ffffff;      /* light reading surface */
  --canvas:#0d1f4f;     /* dark blue page background */
  --accent:#4169ff;     /* Blue 1 — buttons, active enclosures, borders */
  --accent2:#2d9cec;    /* Blue 2 — highlights, selection, wordmark */
  --enc:#4169ff;
  --rule:#2d9cec;       /* all separators: light blue (Blue 2) */
  --ad-bg:#f5f7ff;
  --on-accent:#fff;     /* text on --accent / --accent2 fills; monochrome editions set this to their field */
}

/* dark-blue canvas everywhere — center included, no light surfaces */
body{ background:var(--canvas); }
.mast, .statbar, .region-browse, .foot, .detail, .auth, .pricing, .feed-head, .stats-page{
  background:var(--canvas);
}
/* dark form/map fields */
.auth-input, .nav-search input[type=search], .region-map,
.submit-form .fld input, .submit-form .fld select, .submit-form .fld textarea{
  background:#0a1840;
}
.ad{ background:rgba(255,255,255,.05); }
/* all right-rail ads -> fixed 300x250 rectangle */
.ad-sidebar{ width:300px; height:250px; margin-inline:auto; }

/* selection + highlights in sky blue */
::selection{ background:var(--accent2); color:var(--on-accent); }
::-moz-selection{ background:var(--accent2); color:var(--on-accent); }

/* structural enclosures + buttons -> blue (were near-black/green) */
.mast{ border-bottom:2px solid var(--accent2); }
.statbar{ border-bottom:2px solid var(--accent2); }
.foot{ border-top:2px solid var(--accent2); }
/* upper separators (under the top menu, and before the Investors/Companies tabs)
   thickened to 2px to match the rule under the tabs */
.mast-top, .mast-title-wrap{ border-bottom-width:2px; }
.view-link.active{ background:var(--accent); color:var(--on-accent); }
.auth-btn{ background:var(--accent); }
.auth-btn:hover{ background:var(--accent2); }

/* ---- guided-nav browse: left-rail facets + results --------------------- */
.browse{ display:flex; gap:24px; max-width:1180px; margin:0 auto; padding:30px 40px; align-items:flex-start; }
.browse > .facets{ flex:0 0 235px; position:sticky; top:64px; border-right:1px solid var(--rule); padding-right:24px; }
.facet-back{ font-family:var(--mono); font-size:11px; letter-spacing:.08em; margin-bottom:8px; }
.facet-group{ margin-bottom:28px; }
.facet-group + .facet-group{ margin-left:-24px; padding-top:20px; padding-left:24px; border-top:1px solid var(--rule); }
.facet-h{ font-family:var(--mono); font-size:11px; letter-spacing:.14em; text-transform:uppercase; color:var(--accent2);
  margin-bottom:9px; margin-left:-24px; padding-bottom:7px; padding-left:24px; border-bottom:1px solid var(--rule); }
/* Inside region-browse, facet-h sits in the shared .col-head band (which owns the border/padding via
   CSS subgrid row-height, guaranteeing it lines up with feed-head/side-title regardless of font
   metrics) — so it reverts to a plain label here instead of managing its own box model. */
.region-browse .facet-h{ margin:0; padding:0; border-bottom:none; }
.facet{ display:flex; justify-content:space-between; align-items:baseline; gap:10px; padding:6px 10px; border-radius:4px; color:var(--ink); }
.facet:hover{ background:rgba(255,255,255,.06); text-decoration:none; }
.facet.active{ background:var(--accent); color:var(--on-accent); }
.facet-label{ font-size:13px; line-height:1.35; }
.facet-count{ font-family:var(--mono); font-size:11px; opacity:.55; white-space:nowrap; }
.facet.active .facet-count{ opacity:.9; }
.facet-more{ font-family:var(--mono); font-size:10px; letter-spacing:.06em; opacity:.5; padding:7px 10px; cursor:pointer; }
.facet-more:hover{ opacity:.8; }
.facet-clear{ font-family:var(--mono); font-size:10px; color:var(--accent2); text-transform:none; letter-spacing:0; }
.results{ flex:1; min-width:0; }
.results .feed{ max-width:none; margin:0; }
.results .detail{ max-width:none; margin:0; }

/* Oluwadi home link (upper-left) — the lens mark + wordmark. ALWAYS Oluwadi blue (#2d9cec), brand-level,
   NOT the regional accent: the upper-left wordmark is the constant Oluwadi identity across every edition. */
.home-link{ display:inline-flex; align-items:center; gap:6px; color:#2d9cec; }
.home-link:hover{ text-decoration:none; opacity:.82; }
.home-word{ font-family:var(--serif); font-size:15px; font-weight:700; letter-spacing:-.3px; }

/* ETHOS TREATMENT (Identity Spec ethos exception) — a region defined by an ATTITUDE, not a palette,
   gets a multi-stop TREATMENT instead of a flat field. Austin = "Keep Austin Weird" → a tie-dye sweep
   across the wordmark. The ONLY edition with a gradient; every other edition uses flat regional colour. */
.edition-austin .mast-title{
  background:linear-gradient(105deg,#ffd23f 0%,#ff5ca8 23%,#c84cff 47%,#5b8cff 71%,#3ee8c8 100%);
  -webkit-background-clip:text; background-clip:text;
  -webkit-text-fill-color:transparent; color:transparent;
}
.results-head{ margin-bottom:14px; }
.results-head h1{ font-family:var(--serif); font-size:34px; font-weight:700; line-height:1.1; }
.results-count{ font-family:var(--mono); font-size:12px; letter-spacing:.06em; opacity:.7; margin-top:5px; }
@media (max-width:768px){
  .browse{ flex-direction:column; gap:20px; padding:20px; }
  .browse > .facets{ position:static; flex-basis:auto; width:100%; }
}
.tier.featured{ border-color:var(--accent); }
.card:hover{ background:rgba(255,255,255,.045); }

/* TEXT IS GREY — never blue: override every blue-text rule */
a,
.stat-n, .card-meta .m.people, .region-row a.active, .edition-row a,
.search-active a, .view-toggle .add-firm, .match-hint a,
.nav-search-btn:hover, .detail .fact-cell .v{ color:var(--ink); }
.card-cat, .feed-count, .card-meta .m.gold, .card-meta .m.url,
.detail .sub, .tier .price, .ad-ph .dim, .match-hint .warn{ color:var(--muted); }
/* old hardcoded greys (#3D3C38 / #888780) -> the one grey */
.card-desc, .tier ul, .ad-label, .ad-ph .pos{ color:var(--ink); }

/* wordmark: "DMV" = Blue 2 (sky), "VC" = grey */
.mast-title{ color:var(--accent2); }
.mast-title .vc{ color:var(--ink); }

/* national landing (oluwadi.com) — the regions directory + explainer */
.national-intro{ text-align:center; padding:36px 40px 4px; max-width:720px; margin:0 auto; }
.national-lead{ font-size:15px; line-height:1.75; color:var(--ink); }
.national-cta{ font-family:var(--mono); font-size:11px; letter-spacing:.18em; text-transform:uppercase; color:var(--muted); margin-top:18px; text-align:center; }
.region-group{ max-width:1120px; margin:0 auto; padding:26px 28px 0; }
.region-group:last-of-type{ padding-bottom:48px; }
.region-group-h{ font-family:var(--mono); font-size:11px; font-weight:500; letter-spacing:.18em; text-transform:uppercase; color:var(--accent2); padding-bottom:10px; margin-bottom:16px; border-bottom:1px solid var(--rule); }
.region-index{ display:grid; grid-template-columns:repeat(5,1fr); gap:10px; }
.national-ad{ max-width:970px; margin:24px auto 0; overflow-x:auto; -webkit-overflow-scrolling:touch; } /* fixed 970px house-ad iframe: contain overflow on mobile (no clip, no page-wide scroll) */
.region-card{ display:flex; flex-direction:column; gap:7px; padding:14px 16px; border:1px solid var(--rule); text-decoration:none; transition:border-color .14s ease, transform .14s ease; }
.region-card:hover{ border-color:var(--accent2); transform:translateY(-2px); text-decoration:none; }
.rc-name{ font-family:var(--serif); font-size:18px; line-height:1.1; color:var(--accent2); }
.rc-tag{ font-family:var(--mono); font-size:10px; letter-spacing:.05em; text-transform:uppercase; color:var(--muted); line-height:1.5; }

/* Nationwide universal search — the unobtrusive masthead toggle (matches the editions) + the results list. */
.nav-search-btn{ display:inline-flex; align-items:center; }
.nav-search-word{ font-family:var(--mono); font-size:11px; letter-spacing:.08em; text-transform:uppercase; margin-left:7px; }
.nat-results{ list-style:none; margin:8px auto 0; padding:0; max-width:880px; border-top:1px solid var(--rule); }
.nat-result{ display:flex; align-items:baseline; flex-wrap:wrap; gap:10px; padding:14px 28px; border-bottom:1px solid var(--rule); }
.nat-result:hover{ background:var(--ad-bg); }
.nr-name{ font-family:var(--serif); font-size:18px; color:var(--accent2); }
.nr-cat{ font-family:var(--mono); font-size:10px; letter-spacing:.12em; text-transform:uppercase; color:var(--accent); }
.nr-domain{ font-family:var(--mono); font-size:10px; letter-spacing:.08em; color:var(--muted); }
.nr-loc{ font-family:var(--mono); font-size:11px; color:var(--muted); margin-left:auto; }

/* Region-feed guided nav: the thesis facet rail, feed, and ad rail beside each other (same .facets
   engine as /domains). The three columns are a single CSS grid whose 3 direct children (.facets,
   .feed, .side) are each a row-subgrid spanning 2 rows (header, body) — so THESIS/FIRMS/ABOUT and
   their underlines land on the exact same grid line across all 3 columns, guaranteed by the browser's
   own row-sizing (not by hand-tuned padding matched to one font's rendered metrics, which drifts). */
/* .region-cols is the ONE grid-template-columns definition for the whole region page (set inline
   from has_facets/show_ads in the view). .statbar and .region-browse each read it via `subgrid`
   instead of keeping their own matching copy — so the stat-bar dividers and the facets/feed/
   sidebar dividers below are ALWAYS aligned, at any width, with exactly one place to change it. */
.region-cols{ display:grid; }
.region-cols > *{ grid-column:1 / -1; }

.region-browse{ display:grid; grid-template-rows:auto 1fr; grid-template-columns:subgrid; align-items:start; }
.region-browse > .facets,
.region-browse > .feed,
.region-browse > .side{ display:grid; grid-template-rows:subgrid; grid-template-columns:minmax(0,1fr); grid-row:1 / 3; min-width:0; }
.region-browse > .facets{ border-right:1px solid var(--rule); }
.region-browse:has(> .side) > .feed{ border-right:1px solid var(--rule); }
.region-browse > .facets > .col-body{ padding:20px 0 0 24px; }
@media(max-width:880px){
  .region-cols{ grid-template-columns:1fr !important; }
  .statbar{ grid-template-columns:repeat(2,1fr) !important; }
  .region-browse > .facets, .region-browse > .feed, .region-browse > .side{ grid-row:auto; grid-template-rows:none; grid-column:1 / -1 !important; }
  .region-index{ grid-template-columns:repeat(2,1fr); }
}
