/* ================================================================
   Innova Realty & Management — Unified Design System (V1 Editorial)
   Single source of truth for tokens + components. Every template
   on the site loads this file. Page-specific styles layer on top.
   ================================================================ */

/* ---------- Tokens · "Newsprint" ------------------------------------
   A committed editorial direction: an old broker's letterhead meets
   a vintage newspaper classifieds page. Four colors total. Zero
   sans-serif. Three serif faces doing different jobs. Zero rounded
   corners. Dramatic, unapologetic, obviously designed.

   Palette — deliberately constrained:
     paper (off-newsprint cream)
     ink   (true black)
     red   (classified-red emphasis)
     rule  (faded hairline grey)

   Contrast verified (all pairs AAA):
     ink #0A0A0A     on paper #F5F1E4   →  19.1:1   AAA
     muted #4F4F4F   on paper            →   8.9:1  AAA
     red #8E1A1A     on paper            →   9.8:1  AAA
     paper           on ink (reverse)    →  19.1:1  AAA
     paper           on red (button)     →   9.8:1  AAA

   Legacy aliases below keep every earlier component rendering. */
:root{
  /* The 4 committed colors */
  --paper:    #F5F1E4;   /* warm newsprint cream */
  --paper-2:  #EDE7D5;   /* slightly deeper — classifieds section */
  --card:     #FFFFFF;   /* pure white — for elevated surfaces only */
  --ink:      #0A0A0A;   /* true black newsprint ink */
  --muted:    #4F4F4F;   /* cool grey for secondary text — 8.9:1 AAA */
  --red:      #8E1A1A;   /* deep classified red — 9.8:1 AAA */
  --red-hover:#A62020;
  --rule:     #C6BDA8;   /* faded hairline rule */
  --rule-fine:#DED5BE;   /* lighter hairline for subtle dividers */

  /* Semantic aliases — what the components actually reference */
  --bg:           var(--paper);
  --surface:      var(--card);
  --surface-alt:  var(--paper-2);
  --text:         var(--ink);
  --text-muted:   var(--muted);
  --heading:      var(--ink);

  --primary:       var(--ink);       /* buttons & primary: BLACK */
  --primary-hover: var(--red);       /* hover: FLASH OF RED */
  --primary-wash:  rgba(142,26,26,0.06);
  --primary-soft:  #F4D8CF;          /* blush wash for active states on dark */

  --accent:        var(--red);
  --accent-hover:  var(--red-hover);
  --accent-wash:   rgba(142,26,26,0.06);

  /* Dark sections (footer, CTA) — true newsprint-reverse */
  --dark:          #0A0A0A;
  --dark-surface:  #141414;
  --dark-hover:    #1F1F1F;
  --on-dark:       #F5F1E4;
  --on-dark-muted: #B8B5A6;

  /* Borders */
  --border:        var(--rule);
  --border-hover:  #A29879;
  --border-light:  var(--rule-fine);

  /* Semantic badges */
  --badge-faq-bg:    #EDE7D5;  --badge-faq-text:   #0A0A0A;
  --badge-area-bg:   #F0E4CE;  --badge-area-text:  #5A3A10;
  --badge-guide-bg:  #F5E1E1;  --badge-guide-text: #8E1A1A;

  /* Legacy aliases — every old component keeps rendering */
  --cream:      var(--paper);
  --cream-2:    var(--paper-2);
  --ink-2:      var(--ink);
  --ink-soft:   #1A1A1A;
  --ink-mute:   var(--muted);
  --rule-soft:  var(--rule-fine);
  --brass:      var(--ink);
  --brass-deep: var(--ink);
  --brass-soft: var(--muted);
  --brass-wash: var(--primary-wash);

  /* Supporting region colors (map dots — map is the one place
     multiple hues earn their keep, to distinguish LV/NLV/Henderson) */
  --claret:     var(--red);
  --lv-blue:    #2C5282;
  --nlv-violet: #5D4B8A;

  /* Typography — ALL SERIF, a committed editorial stance.
     Playfair Display (dramatic Didone display) for headlines,
     Lora (humanist serif) for body prose,
     IBM Plex Mono (engineering-feel monospace, distinctive) for
     eyebrows, metadata, legal microcopy, and every uppercase label. */
  --serif:   "Playfair Display", "Times New Roman", serif;
  --serif-body: "Lora", "Georgia", "Times New Roman", serif;
  --sans:    var(--serif-body);    /* body prose is SERIF, not sans */
  --mono:    "IBM Plex Mono", ui-monospace, SFMono-Regular, Menlo, monospace;

  /* Radii — ZERO everywhere. Editorial square edges. */
  --radius-sm: 0;
  --radius-md: 0;
  --radius-lg: 0;
  --radius-xl: 0;

  /* Shadows — tuned for the lighter ground */
  --shadow-sm: 0 1px 3px rgba(10,10,10,0.04);
  --shadow-md: 0 4px 16px rgba(10,10,10,0.06);
  --shadow-lg: 0 12px 40px rgba(10,10,10,0.09);
  --shadow-glow: 0 0 0 3px rgba(142,26,26,0.15);   /* red glow — in palette */

  /* Layout */
  --container: 1280px;
  --container-wide: 1280px;
  --header-h: 76px;
  --utility-h: 38px;

  /* Motion */
  --ease-out: cubic-bezier(0.22, 1, 0.36, 1);
  --ease-in-out: cubic-bezier(0.65, 0, 0.35, 1);
}

/* ---------- Dark theme ---------------------------------------------
   Inverts surfaces + ink while holding brass as the stable accent.
   Triggered by either `data-theme="dark"` on <html> (explicit user
   choice persisted in localStorage) or the OS-level preference when
   no explicit choice has been made.
   ---------------------------------------------------------------- */
/* Dark theme — OPT-IN ONLY. Only applies when data-theme="dark" is
   explicitly set (via the footer toggle). The OS-level
   prefers-color-scheme: dark no longer auto-switches, because the
   mixed-state bug (body cream but cards dark) is worse than always
   defaulting to light. Users who want dark can toggle explicitly. */
:root[data-theme="dark"]{
  --paper:    #0D0D0D;
  --paper-2:  #151515;
  --card:     #1A1A1A;
  --ink:      #F5F1E4;
  --muted:    #BDB8A8;
  --red:      #E68A8A;
  --red-hover:#F2A5A5;
  --rule:     #2E2E2A;
  --rule-fine:#232320;

  --bg:           var(--paper);
  --surface:      var(--card);
  --surface-alt:  var(--paper-2);
  --text:         var(--ink);
  --text-muted:   var(--muted);
  --heading:      var(--ink);
  --primary:        var(--ink);
  --primary-hover:  var(--red);
  --primary-wash:   rgba(230,138,138,0.08);
  --primary-soft:   #2E1D1D;
  --accent:        var(--red);
  --accent-hover:  var(--red-hover);
  --accent-wash:   rgba(230,138,138,0.06);

  --dark:         #F5F1E4;
  --dark-surface: #EDE7D5;
  --dark-hover:   #D9D2C0;
  --on-dark:      #0D0D0D;
  --on-dark-muted:#4F4F4F;

  --border:       var(--rule);
  --border-hover: #4A4A44;
  --border-light: var(--rule-fine);

  --cream:      var(--paper);
  --cream-2:    var(--paper-2);
  --ink-2:      var(--ink);
  --ink-soft:   #E8E1D0;
  --ink-mute:   var(--muted);
  --rule-soft:  var(--rule-fine);
  --brass:      var(--ink);
  --brass-deep: var(--ink);
  --brass-soft: var(--muted);
  --brass-wash: var(--primary-wash);
}

/* Dark-theme adjustments for sections that intentionally invert in light mode. */
:root[data-theme="dark"] .section.bg-ink,
:root[data-theme="dark"] footer.site-footer,
:root[data-theme="dark"] .lead-section,
:root[data-theme="dark"] .topstrip{
  background: var(--bg);
}
/* Ink panels keep a dark ground in dark mode, so their text tokens must
   stay light-on-dark locally — the global dark inversion flips --on-dark
   to near-black, which would render invisible on these surfaces. */
:root[data-theme="dark"] .section.bg-ink,
:root[data-theme="dark"] footer.site-footer,
:root[data-theme="dark"] .lead-section,
:root[data-theme="dark"] .topstrip,
:root[data-theme="dark"] .price-card.featured,
:root[data-theme="dark"] .nearby.ink,
:root[data-theme="dark"] .topic.feature{
  --dark: #0D0D0D;
  --dark-surface: #141414;
  --dark-hover: #1F1F1F;
  --on-dark: #F5F1E4;
  --on-dark-muted: #B8B5A6;
  --primary-soft: #F4D8CF;
}
:root[data-theme="dark"] .lead-bullets li{ color: var(--on-dark); }
:root[data-theme="dark"] .topstrip .marks{ color: var(--on-dark-muted); }
:root[data-theme="dark"] .nearby.ink{ background: var(--dark-surface); border-color: var(--border); }
:root[data-theme="dark"] .nearby.ink h5{ color: var(--on-dark); }
:root[data-theme="dark"] .home-hero-visual.home-hero-video .label,
:root[data-theme="dark"] .home-hero-visual.home-hero-video .est{
  color: var(--ink);
  mix-blend-mode: normal;
}
:root[data-theme="dark"] .topic.feature{ background: var(--surface-alt); }
:root[data-theme="dark"] .home-hero-visual{
  background: linear-gradient(165deg, var(--cream-2) 0%, #2a2211 100%);
}
:root[data-theme="dark"] .brand-mark{
  background: var(--cream-2);
  color: var(--brass);
  box-shadow: inset 0 0 0 1px var(--brass);
}
:root[data-theme="dark"] body::before{ opacity: 0.4; }

/* ---------- Reset ---------- */
*{box-sizing:border-box}
html,body{margin:0;padding:0}
html{scroll-behavior:smooth}
/* Anchor targets don't slide under the sticky nav on smooth-scroll */
:target, [id]{ scroll-margin-top: calc(var(--header-h, 76px) + 16px); }
body{
  background: var(--cream);
  color: var(--ink);
  font-family: var(--sans);
  font-size: 16px;
  line-height: 1.55;
  -webkit-font-smoothing: antialiased;
  text-rendering: optimizeLegibility;
  min-height: 100vh;

  /* OpenType features active across Playfair, Lora, and IBM Plex Mono */
  font-feature-settings: "kern", "liga", "calt";
  font-variant-ligatures: common-ligatures contextual;
  transition: background-color .4s var(--ease-in-out), color .4s var(--ease-in-out);
}

/* Custom text selection — brass */
::selection{ background: var(--brass); color: var(--paper); }
::-moz-selection{ background: var(--brass); color: var(--paper); }

/* Smart quotes + optical sizing for serif headlines & body prose */
h1, h2, h3, h4, .display-1, .display-2, .display-3,
.prose, .article-hero .dek, .hero-sub, .tq blockquote{
  font-optical-sizing: auto;
  quotes: "\201C" "\201D" "\2018" "\2019";
}
/* Small caps for acronyms marked up as <abbr> */
abbr[title]{
  font-variant-caps: all-small-caps;
  letter-spacing: 0.04em;
  text-decoration: none;
  cursor: help;
}
/* Old-style (proportional, lower-contrast) figures in prose; lining
   figures stay the default for UI + numeric data. */
.prose, .article-hero .dek, .tq blockquote,
.hero-sub, .lede{
  font-variant-numeric: oldstyle-nums proportional-nums;
}
.stat-num, .price-card .amt, .step .n, .value .n,
.area-stats .stat-num, .timeline .year{
  font-variant-numeric: lining-nums tabular-nums;
  font-feature-settings: "kern", "liga", "ss01", "tnum";
}

/* Hanging punctuation — when browsers support it; graceful fallback. */
.prose p, .hero-sub, .lede{ hanging-punctuation: first last; }
a{color:inherit;text-decoration:none}
img{max-width:100%;display:block}
button{font:inherit;cursor:pointer;border:none;background:none;color:inherit}
input,textarea,select{font:inherit;color:inherit}
hr{border:none;border-top:1px solid var(--rule-soft);margin:32px 0}

/* Paper grain — subtle texture on every page */
body::before{
  content:"";
  position:fixed; inset:0;
  pointer-events:none;
  background-image: radial-gradient(rgba(0,0,0,0.018) 1px, transparent 1px);
  background-size: 3px 3px;
  z-index: 1;
  mix-blend-mode: multiply;
}

/* Respect reduced-motion */
@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after {
    animation-duration: 0.01ms !important;
    animation-iteration-count: 1 !important;
    transition-duration: 0.01ms !important;
    scroll-behavior: auto !important;
  }
}

/* Skip link for accessibility */
.skip{
  position: absolute; left: -9999px; top: 0;
  background: var(--ink); color: var(--paper);
  padding: 10px 18px; font-family: var(--mono); font-size: 12px;
  letter-spacing: 0.12em; text-transform: uppercase; z-index: 100;
}
.skip:focus{ left: 8px; top: 8px; }

/* Keyboard focus — visible ring on any interactive.
   Uses --ink so it's always high-contrast regardless of brass/dark background
   (a brass outline on a brass button is invisible; 2px ink passes 2.4.11). */
a:focus-visible, button:focus-visible,
input:focus-visible, textarea:focus-visible, select:focus-visible,
.map-dot:focus-visible, [role="button"]:focus-visible,
summary:focus-visible{
  outline: 2px solid var(--ink);
  outline-offset: 2px;
}
/* On dark surfaces, flip the ring to the cream for contrast. */
.bg-ink *:focus-visible, .lead-section *:focus-visible,
.topic.feature:focus-visible, footer.site-footer *:focus-visible,
.topstrip *:focus-visible{
  outline-color: var(--paper);
}

/* Visually-hidden utility — screen-reader-only, preserves focusability */
.visually-hidden{
  position: absolute !important;
  width: 1px; height: 1px;
  padding: 0; margin: -1px;
  overflow: hidden; clip: rect(0,0,0,0);
  white-space: nowrap; border: 0;
}

/* ---------- Container ---------- */
.container{
  max-width: var(--container);
  margin: 0 auto;
  padding: 0 28px;
  position: relative;
  z-index: 2;
}
@media (max-width: 640px){ .container{ padding: 0 20px; } }
.container.wide{ max-width: var(--container-wide); }

/* ================================================================
   Buttons
   ================================================================ */
.btn{
  display:inline-flex;align-items:center;gap:8px;
  padding: 11px 20px;
  border-radius: var(--radius-sm);
  font-size: 14px; font-weight: 600;
  letter-spacing: 0.01em;
  transition: all .2s var(--ease-out);
  white-space: nowrap;
  cursor: pointer;
}
.btn-ghost{ color: var(--ink); border: 1px solid var(--rule); background: transparent; }
.btn-ghost:hover{ border-color: var(--ink); }
.btn-primary{
  background: var(--primary); color: var(--surface);
  box-shadow: inset 0 0 0 1px var(--primary), var(--shadow-sm);
}
.btn-primary:hover{ background: var(--primary-hover); box-shadow: inset 0 0 0 1px var(--primary-hover), var(--shadow-md); transform: translateY(-1px); }
.btn-brass{ background: var(--accent); color: var(--paper); }
.btn-brass:hover{ background: var(--accent-hover); color: var(--paper); }
.btn-lg{ padding: 14px 24px; font-size: 14.5px; }
.btn-arrow::after{ content: "→"; margin-left: 4px; }

/* ================================================================
   Utility strip (top bar)
   ================================================================ */
.topstrip{
  background: var(--dark);
  color: var(--on-dark);
  font-size: 12.5px;
  letter-spacing: 0.02em;
  position: relative;
  z-index: 3;
}
.topstrip .container{
  display:flex; align-items:center; justify-content:space-between;
  height: var(--utility-h);
  flex-wrap: wrap;
  gap: 12px;
}
.topstrip .marks{display:flex;gap:22px;align-items:center;color:var(--cream-2)}
.topstrip .marks span{display:inline-flex;gap:8px;align-items:center}
.topstrip .marks b{color:var(--primary-soft);font-weight:500}
.topstrip .logins{display:flex;gap:22px;align-items:center}
.topstrip .logins a{opacity:.85;transition:opacity .15s}
.topstrip .logins a:hover{opacity:1;color:var(--primary-soft)}
.topstrip .phone{font-family:var(--mono);color:var(--primary-soft)}

@media (max-width: 760px){
  .topstrip .marks{display:none}
  .topstrip .container{justify-content:center}
  .topstrip .logins{gap:16px;font-size:12px}
}

/* ================================================================
   Navigation
   ================================================================ */
.nav{
  background: var(--paper);
  border-bottom: 1px solid var(--rule);
  position: sticky; top: 0; z-index: 20;
  backdrop-filter: saturate(1.1);
  transition: box-shadow .2s;
}
.nav.is-scrolled{ box-shadow: 0 4px 24px -12px rgba(23,21,18,0.08); }
.nav .container{
  display:flex; align-items:center; gap:32px;
  height: var(--header-h);
}
.brand{display:flex;align-items:center;gap:12px;flex-shrink:0}
.brand-mark{
  width:38px;height:38px;border-radius:50%;
  background: var(--ink);
  color: var(--brass-soft);
  display:grid;place-items:center;
  font-family:var(--serif);font-weight:600;font-size:20px;
  letter-spacing:.02em;
  box-shadow: inset 0 0 0 1px var(--brass);
  flex-shrink: 0;
}
.brand-name{
  font-family: var(--serif);
  font-size: 19px;
  font-weight: 600;
  letter-spacing: -0.01em;
  line-height: 1;
  color: var(--ink);
}
.brand-name small{
  display:block;
  font-family:var(--sans);
  font-size: 10.5px;
  font-weight: 500;
  letter-spacing: 0.18em;
  text-transform: uppercase;
  color: var(--ink-mute);
  margin-top:4px;
}

.nav-links{display:flex;gap:30px;margin-left:8px;align-items:center}
.nav-links > li{position:relative;list-style:none}
.nav-links a{
  font-size: 14px; font-weight: 500; color: var(--ink-2);
  position: relative; padding: 6px 0;
  transition: color .15s;
  display: inline-flex; align-items: center; gap: 4px;
}
.nav-links a:hover{color:var(--brass-deep)}
.nav-links a.is-active{color:var(--ink)}
.nav-links a.is-active::after{
  content:""; position:absolute; left:0; right:0; bottom:-2px;
  height:2px; background: var(--brass);
}

/* Dropdown */
.nav-links .has-sub > a::after{
  content: ""; display: inline-block;
  width: 0; height: 0; margin-left: 2px;
  border-left: 4px solid transparent;
  border-right: 4px solid transparent;
  border-top: 4px solid currentColor;
  opacity: 0.6;
}
.nav-sub{
  position: absolute; top: calc(100% + 8px); left: -16px;
  min-width: 240px;
  background: var(--paper);
  border: 1px solid var(--rule);
  padding: 12px 0;
  opacity: 0; visibility: hidden;
  transform: translateY(-4px);
  transition: all .18s;
  list-style: none;
  margin: 0;
  box-shadow: 0 24px 48px -20px rgba(23,21,18,0.22);
}
.nav-links li:hover .nav-sub,
.nav-links li:focus-within .nav-sub,
.nav-links li.has-sub > a[aria-expanded="true"] + .nav-sub{
  opacity: 1; visibility: visible; transform: translateY(0);
}
/* When Escape explicitly collapses (aria-expanded="false"), override
   :focus-within so the menu closes even while focus is on the trigger. */
.nav-links li.has-sub > a[aria-expanded="false"] + .nav-sub{
  opacity: 0; visibility: hidden; transform: translateY(-4px);
}
.nav-sub li{ margin: 0; }
.nav-sub a{
  display: block; padding: 9px 20px;
  font-size: 14px; font-weight: 500; color: var(--ink-2);
  transition: all .12s;
}
.nav-sub a:hover{ background: var(--cream); color: var(--brass-deep); padding-left: 24px; }
.nav-sub a::after{ display: none !important; }

.nav-cta{
  margin-left:auto;
  display:flex; gap:10px; align-items:center;
}

/* Mobile nav toggle */
.nav-toggle{
  display:none;
  width: 40px; height: 40px;
  flex-direction: column; justify-content: center; align-items: center;
  gap: 5px;
  margin-left: auto;
}
.nav-toggle span{
  width: 22px; height: 1.5px; background: var(--ink);
  transition: transform .2s, opacity .2s;
}

@media (max-width: 1040px){
  .nav .container{gap:16px}
  .nav-links{display:none}
  .nav-cta .btn-ghost{display:none}
  .nav-toggle{display:flex}
  .nav-links.is-open{
    display: flex; position: absolute;
    top: 100%; left: 0; right: 0;
    flex-direction: column; gap: 0;
    background: var(--paper);
    border-bottom: 1px solid var(--rule);
    padding: 16px 28px 24px;
    margin-left: 0;
  }
  .nav-links.is-open > li{width:100%;padding:12px 0;border-bottom:1px solid var(--rule-soft)}
  .nav-links.is-open > li:last-child{border-bottom:none}
  .nav-sub{position:static;opacity:1;visibility:visible;transform:none;box-shadow:none;border:none;padding:8px 0 0 16px}
}

/* ================================================================
   Typography utilities
   ================================================================ */
.kicker{
  font-family: var(--mono);
  font-size: 11.5px;
  letter-spacing: 0.18em;
  text-transform: uppercase;
  color: var(--brass-deep);
  display: inline-flex;
  align-items: center;
  gap: 12px;
}
.kicker::before{
  content:""; width:32px; height:1px; background: var(--brass);
}
.kicker.no-rule::before{ display: none; }

.serif{ font-family: var(--serif); }
.mono{ font-family: var(--mono); }
em.brass{ color: var(--brass-deep); font-style: italic; font-weight: inherit; }
.text-mute{ color: var(--ink-mute); }
.text-soft{ color: var(--ink-soft); }

/* Headlines */
.display-1{
  font-family: var(--serif);
  font-weight: 400;
  font-size: clamp(40px, 4.6vw, 62px);
  line-height: 1.02;
  letter-spacing: -0.025em;
  margin: 0;
}
.display-1 em{ font-style: italic; color: var(--brass-deep); font-weight: 400; }

.display-2{
  font-family: var(--serif);
  font-weight: 400;
  font-size: clamp(32px, 4vw, 48px);
  line-height: 1.05;
  letter-spacing: -0.02em;
  margin: 0;
}
.display-2 em{ font-style: italic; color: var(--brass-deep); font-weight: 400; }

.display-3{
  font-family: var(--serif);
  font-weight: 500;
  font-size: 28px;
  line-height: 1.1;
  letter-spacing: -0.015em;
  margin: 0;
}

.lede{
  font-size: 17px;
  color: var(--ink-soft);
  line-height: 1.6;
  max-width: 62ch;
}

/* ================================================================
   Section shell
   ================================================================ */
.section{ padding: 96px 0; position:relative; z-index:2; }
.section.tight{ padding: 64px 0; }
.section.flush-top{ padding-top: 0; }
.section.flush-bottom{ padding-bottom: 0; }
.section.bg-paper{ background: var(--paper); border-top: 1px solid var(--rule-soft); border-bottom: 1px solid var(--rule-soft); }
.section.bg-cream-2{ background: var(--cream-2); }
.section.bg-ink{ background: var(--dark); color: var(--on-dark); }
.section.bg-ink .display-1, .section.bg-ink .display-2, .section.bg-ink .display-3{ color: var(--on-dark); }
.section.bg-ink em.brass, .section.bg-ink .display-1 em, .section.bg-ink .display-2 em{ color: var(--primary-soft); }
.section.bg-ink .kicker{ color: var(--primary-soft); }
.section.bg-ink .kicker::before{ background: var(--primary-soft); }
.section.bg-ink .lede{ color: var(--on-dark-muted); }

.sec-head{
  display:grid;
  grid-template-columns: 1fr 2fr;
  gap: 48px;
  margin-bottom: 48px;
  align-items: end;
}
.sec-head .kicker{ margin-bottom: 14px; }
.sec-head .display-2{ margin: 0; }

@media (max-width: 880px){
  .sec-head{grid-template-columns:1fr;gap:24px;margin-bottom:40px}
  .section{ padding: 72px 0; }
}

/* ================================================================
   Ask-anything search — minimal, editorial. A single line with a
   thin rule under it. No card, no box, no shadow. Think: New Yorker
   search field, not SaaS search UI.
   ================================================================ */
.ask{
  max-width: 640px;
  border: none;
  background: transparent;
  padding: 0;
  box-shadow: none;
  transition: none;
  position: relative;
}
.ask-inner{
  display: flex; align-items: center; gap: 14px;
  padding: 10px 0 12px;
  border-bottom: 1px solid var(--ink-2);
  background: transparent;
  border-radius: 0;
  transition: border-color .2s;
}
.ask:focus-within .ask-inner{ border-bottom-color: var(--brass); }
.ask-icon{
  width: 18px; height: 18px;
  color: var(--ink-2);
  flex-shrink: 0;
  transition: color .2s;
}
.ask:focus-within .ask-icon{ color: var(--brass); }
.ask input{
  flex: 1;
  border: none; background: transparent; outline: none;
  font-family: var(--serif-body);
  font-size: 20px;
  font-weight: 400;
  color: var(--ink);
  padding: 0;
  letter-spacing: -0.005em;
}
.ask input::placeholder{ color: var(--ink-mute); font-style: italic; }
/* The "Ask" submit button hides until there's typed input. Enter key submits. */
.ask button.submit{
  background: transparent;
  color: var(--ink-mute);
  padding: 4px 0 4px 8px;
  border-radius: 0;
  font-family: var(--mono);
  font-size: 10.5px;
  font-weight: 500;
  letter-spacing: 0.2em;
  text-transform: uppercase;
  display: inline-flex; align-items: center; gap: 6px;
  transition: color .15s;
  white-space: nowrap;
  cursor: pointer;
}
.ask button.submit:hover{ color: var(--brass-deep); background: transparent; }
.ask button.submit svg{ width: 11px; height: 11px; }

/* Suggested searches: inline microtext below the rule, not chips. */
.ask-hints{
  display: flex; flex-wrap: wrap; gap: 8px 14px;
  margin-top: 14px;
  align-items: baseline;
  font-family: var(--mono);
  font-size: 10.5px;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  color: var(--ink-mute);
}
.ask-hints span.try-label{
  color: var(--brass-deep);
  margin-right: 2px;
}
.chip{
  display: inline; background: none; border: none; padding: 0;
  font-family: var(--mono);
  font-size: 10.5px;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  color: var(--ink-soft);
  transition: color .15s;
  cursor: pointer;
  position: relative;
}
.chip:hover{ color: var(--brass-deep); }
.chip + .chip::before{
  content: "·";
  color: var(--rule);
  margin-right: 14px;
  margin-left: -8px;
  font-weight: bold;
}

.ask-results{
  max-width: 640px;
  margin-top: 14px;
  background: var(--paper);
  border: 1px solid var(--rule);
  border-radius: var(--radius-sm);
  display: none;
  overflow: hidden;
  box-shadow: 0 24px 48px -24px rgba(23,21,18,0.18);
}
.ask-results.open{ display:block; }
.ask-result{
  display:flex; gap: 14px; padding: 14px 20px;
  border-bottom: 1px solid var(--rule-soft);
  cursor: pointer;
  transition: background .1s;
}
.ask-result:last-child{ border-bottom: none; }
.ask-result:hover{ background: var(--cream); }
.ask-result .tag{
  font-family: var(--mono); font-size: 10.5px;
  letter-spacing: 0.1em; text-transform: uppercase;
  color: var(--brass-deep);
  padding-top: 3px;
  min-width: 96px;
  flex-shrink: 0;
}
.ask-result .rtitle{ font-size: 15px; font-weight: 500; color: var(--ink); }
.ask-result .rsub{ font-size: 13.5px; color: var(--ink-soft); margin-top: 2px; }

/* ================================================================
   Stats row
   ================================================================ */
.stats{
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: 0;
  border-top: 1px solid var(--rule);
  border-bottom: 1px solid var(--rule);
}
.stats.three-up{ grid-template-columns: repeat(3, 1fr); }
.stat{
  padding: 22px 16px;
  border-right: 1px solid var(--rule-soft);
  display:flex; flex-direction:column; gap:4px;
}
.stat:last-child{border-right:none}
.stat-num{
  font-family: var(--serif);
  font-size: 34px;
  font-weight: 400;
  letter-spacing: -0.02em;
  line-height: 1;
  color: var(--ink);
}
.stat-num sup{
  font-size: 18px;
  font-family: var(--mono);
  font-weight: 400;
  color: var(--brass-deep);
  vertical-align: top;
  margin-left: 4px;
  top: 6px;
  position: relative;
}
.stat-label{
  font-family: var(--mono);
  font-size: 10.5px;
  letter-spacing: 0.12em;
  text-transform: uppercase;
  color: var(--ink-mute);
  margin-top: 6px;
}
@media (max-width: 760px){
  .stats, .stats.three-up{grid-template-columns: repeat(2, 1fr);}
  .stat:nth-child(2n){border-right:none}
  .stat:not(:nth-last-child(-n+2)){border-bottom: 1px solid var(--rule-soft);}
}

/* ================================================================
   Tabs
   ================================================================ */
.tabs{
  display:flex; gap: 0;
  border-bottom: 1px solid var(--rule);
  margin-bottom: 36px;
  overflow-x: auto;
  scrollbar-width: thin;
}
.tab{
  padding: 12px 18px;
  font-size: 13.5px; font-weight: 500;
  color: var(--ink-soft);
  border-bottom: 2px solid transparent;
  margin-bottom: -1px;
  transition: all .15s;
  white-space: nowrap;
  background: none;
}
.tab:hover{ color: var(--ink); }
.tab.is-active{ color: var(--ink); border-bottom-color: var(--brass); }
.tab .count{
  font-family: var(--mono);
  font-size: 11px;
  color: var(--ink-mute);
  margin-left: 6px;
}

/* ================================================================
   Topic / card grid
   ================================================================ */
.topic-grid{
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 0;
  border-top: 1px solid var(--rule-soft);
  border-left: 1px solid var(--rule-soft);
}
.topic{
  padding: 32px 28px 28px;
  background: transparent;
  border-right: 1px solid var(--rule-soft);
  border-bottom: 1px solid var(--rule-soft);
  display:flex; flex-direction:column; gap: 14px;
  transition: background .15s;
  cursor: pointer;
  position: relative;
  min-height: 240px;
  color: inherit;
}
.topic:hover{ background: var(--paper); }
.topic-cat{
  font-family: var(--mono);
  font-size: 11px;
  letter-spacing: 0.12em;
  text-transform: uppercase;
  color: var(--brass-deep);
  display:flex; justify-content:space-between;
}
.topic-cat .num{ color: var(--ink-mute); font-weight: 400; }
.topic h3{
  font-family: var(--serif);
  font-size: 22px;
  font-weight: 500;
  line-height: 1.2;
  letter-spacing: -0.01em;
  margin: 0;
  color: var(--ink);
  text-wrap: balance;
}
.topic p{
  font-size: 14.5px;
  color: var(--ink-soft);
  margin: 0;
  line-height: 1.55;
}
.topic-read{
  margin-top: auto;
  padding-top: 18px;
  font-size: 13px;
  color: var(--ink-2);
  display:flex; align-items:center; gap: 8px;
  font-weight: 500;
}
.topic-read .arrow{
  width: 18px; height: 1px; background: var(--ink-2);
  position: relative; transition: width .2s;
}
.topic-read .arrow::after{
  content:""; position:absolute; right:0; top:-3px;
  width:7px; height:7px;
  border-right: 1px solid var(--ink-2);
  border-top: 1px solid var(--ink-2);
  transform: rotate(45deg);
}
.topic:hover .topic-read{ color: var(--brass-deep); }
.topic:hover .topic-read .arrow{ width: 32px; background: var(--brass-deep); }
.topic:hover .topic-read .arrow::after{ border-color: var(--brass-deep); }

.topic.feature{
  grid-column: span 2;
  background: var(--dark);
  color: var(--on-dark);
  border-right-color: var(--dark);
  border-bottom-color: var(--dark);
}
.topic.feature:hover{ background: var(--dark-hover); }
.topic.feature .topic-cat{ color: var(--primary-soft); }
.topic.feature .topic-cat .num{ color: rgba(255,255,255,0.55); }
.topic.feature h3{ color: var(--on-dark); font-size: 32px; max-width: 18ch;}
.topic.feature p{ color: var(--on-dark-muted); font-size: 15.5px; max-width: 52ch; }
.topic.feature .topic-read{ color: var(--primary-soft); }
.topic.feature .topic-read .arrow,
.topic.feature .topic-read .arrow::after{ background: var(--primary-soft); border-color: var(--primary-soft); }

@media (max-width: 960px){
  .topic-grid{grid-template-columns: repeat(2, 1fr);}
  .topic.feature{grid-column: span 2;}
}
@media (max-width: 640px){
  .topic-grid{grid-template-columns: 1fr;}
  .topic.feature{grid-column: span 1;}
  .topic.feature h3{font-size: 26px;}
}

/* ================================================================
   Hero lead form card
   ================================================================ */
.hero-lead{
  background: var(--paper);
  border: 1px solid var(--rule);
  border-radius: var(--radius-sm);
  padding: 28px 28px 24px;
  box-shadow: 0 1px 0 rgba(0,0,0,0.02), 0 24px 56px -30px rgba(23,21,18,0.25);
  position: relative;
  color: var(--ink);
}
.hero-lead::before{
  content:""; position:absolute; top:-8px; left: 28px;
  width: 48px; height: 8px; background: var(--brass);
}
.hl-kicker{
  font-family: var(--mono);
  font-size: 10.5px;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  color: var(--brass-deep);
  margin-bottom: 14px;
}
.hero-lead h3{
  font-family: var(--serif);
  font-size: 26px;
  font-weight: 500;
  line-height: 1.1;
  letter-spacing: -0.015em;
  margin: 0 0 8px;
}
.hero-lead .sub{
  font-size: 14px;
  color: var(--ink-soft);
  margin: 0 0 18px;
  line-height: 1.5;
}
.hl-perks{
  list-style: none; padding: 14px 16px; margin: 0 0 22px;
  display: flex; flex-direction: column; gap: 6px;
  background: var(--cream);
  border-radius: var(--radius-sm);
}
.hl-perks li{
  font-size: 13px;
  color: var(--ink-2);
  display: flex; align-items: center; gap: 10px;
}
.hl-perks li::before{
  content:""; width: 5px; height: 5px; background: var(--brass);
  transform: rotate(45deg); flex-shrink: 0;
}
.hl-submit{
  width: 100%;
  margin-top: 18px;
  background: var(--ink); color: var(--paper);
  padding: 14px 20px;
  border-radius: var(--radius-sm);
  font-size: 14px; font-weight: 600;
  letter-spacing: 0.02em;
  display: inline-flex; align-items: center; justify-content: center; gap: 10px;
  transition: background .15s;
  cursor: pointer;
}
.hl-submit:hover{ background: var(--brass-deep); }
.hl-micro{
  margin-top: 14px;
  font-size: 11.5px;
  color: var(--ink-mute);
  line-height: 1.55;
  text-align: center;
}

/* ================================================================
   Form fields
   ================================================================ */
.field{ margin-bottom: 16px; }
.field label{
  display:block;
  font-family: var(--mono);
  font-size: 10.5px;
  letter-spacing: 0.1em;
  text-transform: uppercase;
  color: var(--ink-mute);
  margin-bottom: 8px;
  font-weight: 500;
}
.field input, .field textarea, .field select{
  width: 100%;
  background: transparent;
  border: none;
  border-bottom: 1px solid var(--rule);
  padding: 8px 0 10px;
  font-size: 15.5px;
  color: var(--ink);
  font-family: var(--sans);
  transition: border-color .15s;
  border-radius: 0;
}
/* iOS auto-zooms on focus if input font-size is under 16px. Bump to 16px
   on touch-sized viewports so the page doesn't jerk when a field is tapped. */
@media (max-width: 768px){
  .field input, .field textarea, .field select{ font-size: 16px; }
}
/* Focus state: brass underline for aesthetic, but keep the shared
   :focus-visible outline from the top of the file so keyboard users
   see a visible ring. Don't use `outline:none` on :focus. */
.field input:focus, .field textarea:focus, .field select:focus{
  border-bottom-color: var(--brass);
}
.field.row{ display:grid; grid-template-columns: 1fr 1fr; gap: 20px; }
@media (max-width: 560px){ .field.row{ grid-template-columns: 1fr; gap: 0; } }
.field.row > div{ margin: 0; }

/* ================================================================
   Dark lead section (used on home, resources, owners)
   ================================================================ */
.lead-section{
  background: var(--dark);
  color: var(--on-dark);
  position: relative;
  overflow: hidden;
}
.lead-section::before{
  content:""; position:absolute; inset:0;
  background:
    radial-gradient(circle at 85% 20%, rgba(245,241,228,0.06), transparent 45%),
    radial-gradient(circle at 15% 80%, rgba(142,26,26,0.06), transparent 40%);
  pointer-events:none;
}
.lead-section .container{
  display: grid;
  grid-template-columns: 1.1fr 1fr;
  gap: 80px;
  padding: 96px 28px;
  align-items: start;
}
.lead-copy .kicker{ color: var(--primary-soft); margin-bottom: 24px; }
.lead-copy .kicker::before{ background: var(--primary-soft); }
.lead-section h2{
  font-family: var(--serif);
  font-size: clamp(40px, 5vw, 60px);
  font-weight: 400;
  line-height: 1.05;
  letter-spacing: -0.02em;
  margin: 0 0 24px;
  color: var(--on-dark);
}
.lead-section h2 em{ font-style: italic; color: var(--primary-soft); font-weight: 400; }
.lead-copy p{
  font-size: 17px;
  color: var(--on-dark-muted);
  line-height: 1.6;
  max-width: 52ch;
  margin: 0 0 36px;
}
.lead-bullets{
  list-style: none; padding:0; margin: 0 0 40px;
  display:grid; grid-template-columns: 1fr 1fr; gap: 14px 24px;
}
.lead-bullets li{
  display:flex; align-items:flex-start; gap: 12px;
  font-size: 15px;
  color: var(--paper);
}
.lead-bullets li::before{
  content:""; width:8px; height:8px;
  background: var(--brass); margin-top: 7px; flex-shrink: 0;
  transform: rotate(45deg);
}
.lead-credentials{
  border-top: 1px solid rgba(255,255,255,0.12);
  padding-top: 24px;
  display:flex; gap: 32px; flex-wrap: wrap;
  font-family: var(--mono);
  font-size: 11.5px;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  color: var(--on-dark-muted);
}
.lead-credentials b{ color: var(--primary-soft); font-weight: 500; }

.lead-form{
  background: var(--paper);
  color: var(--ink);
  padding: 36px 36px 32px;
  border-radius: var(--radius-sm);
  box-shadow: 0 24px 64px -20px rgba(0,0,0,0.5);
  position: relative;
}
.lead-form::before{
  content:"";
  position:absolute; top:-8px; left: 36px;
  width: 56px; height: 8px;
  background: var(--brass);
}
.lead-form h3{
  font-family: var(--serif);
  font-size: 26px;
  font-weight: 500;
  letter-spacing: -0.01em;
  margin: 0 0 6px;
}
.lead-form .sub{
  font-size: 14.5px;
  color: var(--ink-soft);
  margin: 0 0 24px;
}
.lead-form .submit-row{
  margin-top: 28px;
  display:flex; align-items:center; justify-content: space-between;
  gap: 16px;
}
.lead-form button[type="submit"]{
  background: var(--ink); color: var(--paper);
  padding: 14px 28px;
  font-size: 14px; font-weight: 600;
  letter-spacing: 0.02em;
  border-radius: var(--radius-sm);
  display:inline-flex; align-items:center; gap: 10px;
  transition: background .15s;
  cursor: pointer;
}
.lead-form button[type="submit"]:hover{ background: var(--brass-deep); }
.lead-form .micro{
  font-size: 11.5px;
  color: var(--ink-mute);
  line-height: 1.5;
  max-width: 26ch;
}
.lead-form .disclaimer{
  font-size: 11px;
  color: var(--ink-mute);
  line-height: 1.6;
  margin-top: 20px;
  padding-top: 16px;
  border-top: 1px solid var(--rule-soft);
}

@media (max-width: 960px){
  .lead-section .container{grid-template-columns: 1fr; gap: 48px; padding: 64px 28px;}
}

/* ================================================================
   "Have a question" bottom band
   ================================================================ */
.have-q{
  padding: 80px 0;
  background: var(--cream);
  border-top: 1px solid var(--rule);
}
.have-q .container{
  display: grid;
  grid-template-columns: 2fr 1fr;
  gap: 48px;
  align-items: center;
}
.have-q h3{
  font-family: var(--serif);
  font-size: clamp(28px, 3vw, 40px);
  font-weight: 400;
  letter-spacing: -0.02em;
  margin: 0 0 10px;
  line-height: 1.1;
}
.have-q p{
  font-size: 16px; color: var(--ink-soft);
  margin: 0; max-width: 54ch;
}
.have-q .actions{ display:flex; gap: 12px; justify-content: flex-end; flex-wrap: wrap;}
@media (max-width: 880px){
  .have-q .container{grid-template-columns:1fr}
  .have-q .actions{justify-content:flex-start}
}

/* ================================================================
   Footer
   ================================================================ */
footer.site-footer{
  background: var(--dark);
  color: var(--on-dark-muted);
  padding: 72px 0 32px;
  font-size: 14px;
}
footer.site-footer .container{
  display:grid;
  grid-template-columns: 1.3fr 1fr 1fr 1fr;
  gap: 48px;
}
footer.site-footer h6{
  font-family: var(--mono);
  font-size: 11.5px;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  color: var(--brass-soft);
  margin: 0 0 18px;
  font-weight: 500;
}
footer.site-footer ul{ list-style:none; padding:0; margin:0; }
footer.site-footer li{ margin-bottom: 10px; }
footer.site-footer a{ color: var(--on-dark-muted); transition: color .15s; }
footer.site-footer a:hover{ color: var(--primary-soft); }
footer.site-footer .brand-block .brand-mark{ margin-bottom: 16px; }
footer.site-footer .brand-block p{ font-size: 14px; line-height: 1.6; color: var(--on-dark-muted); max-width: 32ch; }
footer.site-footer .brand-block .contact{
  margin-top: 20px;
  font-family: var(--mono);
  font-size: 12px;
  letter-spacing: 0.05em;
  color: var(--on-dark-muted);
  line-height: 1.8;
}
footer.site-footer .brand-block .contact a{ display:block; color: var(--primary-soft); }
footer.site-footer .brand-block .contact span{ display:block; }

footer.site-footer .credentials{
  grid-column: 1 / -1;
  margin-top: 48px;
  padding-top: 32px;
  border-top: 1px solid rgba(255,255,255,0.1);
  display: flex; flex-wrap: wrap; gap: 24px 48px;
  font-family: var(--mono);
  font-size: 11px;
  letter-spacing: 0.1em;
  text-transform: uppercase;
  color: var(--on-dark-muted);
}
footer.site-footer .credentials b{ color: var(--primary-soft); font-weight: 500; }

.footer-bottom{
  max-width: var(--container);
  margin: 0 auto;
  padding: 24px 28px 0;
  border-top: 1px solid rgba(255,255,255,0.1);
  margin-top: 32px;
  display: flex; justify-content: space-between; align-items: center;
  font-size: 12px;
  color: var(--on-dark-muted);
  flex-wrap: wrap;
  gap: 12px;
}
.footer-bottom a:hover{ color: var(--primary-soft); }

@media (max-width: 960px){
  footer.site-footer .container{grid-template-columns: 1fr 1fr;}
}
@media (max-width: 560px){
  footer.site-footer .container{grid-template-columns: 1fr;}
}

/* ================================================================
   Prose (for article pages)
   ================================================================ */
.prose{
  max-width: 68ch;
  font-size: 17px;
  line-height: 1.7;
  color: var(--ink-2);
}
.prose > * + *{ margin-top: 1.1em; }
.prose h2{
  font-family: var(--serif);
  font-size: 32px;
  font-weight: 500;
  letter-spacing: -0.015em;
  line-height: 1.15;
  margin-top: 2em;
  margin-bottom: 0.4em;
  color: var(--ink);
  text-wrap: balance;
}
.prose h3{
  font-family: var(--serif);
  font-size: 24px;
  font-weight: 500;
  letter-spacing: -0.01em;
  line-height: 1.25;
  margin-top: 1.8em;
  margin-bottom: 0.3em;
  color: var(--ink);
}
.prose p{ margin: 0; color: var(--ink-2); }
.prose a{ color: var(--brass-deep); border-bottom: 1px solid var(--brass-soft); transition: all .15s; }
.prose a:hover{ color: var(--ink); border-bottom-color: var(--ink); }
.prose ul, .prose ol{ padding-left: 1.4em; }
.prose li{ margin-bottom: 0.5em; }
.prose li::marker{ color: var(--brass); }
.prose blockquote{
  margin: 1.8em 0;
  padding: 0 0 0 24px;
  border-left: 2px solid var(--brass);
  font-family: var(--serif);
  font-style: italic;
  font-size: 22px;
  line-height: 1.45;
  color: var(--ink);
}
.prose code{
  font-family: var(--mono);
  font-size: 0.86em;
  background: var(--cream-2);
  padding: 2px 6px;
  border-radius: var(--radius-sm);
}
.prose hr{ border-top: 1px solid var(--rule-soft); margin: 2.4em 0; }
.prose .callout{
  padding: 24px 28px;
  background: var(--paper);
  border: 1px solid var(--rule);
  border-left: 3px solid var(--brass);
  margin: 2em 0;
  font-size: 15.5px;
}
.prose .callout h4{
  font-family: var(--mono);
  font-size: 11.5px;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  color: var(--brass-deep);
  margin: 0 0 10px;
  font-weight: 500;
}
.prose .callout p{ color: var(--ink-2); font-size: 15.5px; line-height: 1.6; }

/* ================================================================
   Map stage (shared between resources.html landing + area pages)
   ================================================================ */
.map-wrap{
  display: grid;
  grid-template-columns: 1.15fr 1fr;
  gap: 0;
  border: 1px solid var(--rule);
  background: var(--paper);
  border-radius: var(--radius-sm);
  overflow: hidden;
  min-height: 640px;
}
.map-stage{
  background: linear-gradient(180deg, var(--surface) 0%, var(--surface-alt) 100%);
  position: relative;
  padding: 24px;
  border-right: 1px solid var(--rule);
}
.map-legend{
  position: absolute;
  top: 24px; left: 24px;
  background: var(--paper);
  border: 1px solid var(--rule);
  padding: 14px 16px;
  border-radius: var(--radius-sm);
  font-size: 12px;
  z-index: 3;
}
.map-legend h5{
  margin: 0 0 10px;
  font-family: var(--mono);
  font-size: 10.5px;
  letter-spacing: 0.12em;
  text-transform: uppercase;
  color: var(--ink-mute);
  font-weight: 500;
}
.legend-row{ display:flex;align-items:center;gap:8px;margin-bottom: 6px; }
.legend-row:last-child{margin-bottom:0}
.legend-dot{ width: 10px;height:10px;border-radius:50%; }
.legend-dot.lv{ background: var(--lv-blue); }
.legend-dot.nlv{ background: var(--nlv-violet); }
.legend-dot.hd{ background: var(--brass); }
.legend-row span{ color: var(--ink-2); font-weight:500; }

.map-svg{
  width: 100%; height: 100%;
  display: block;
  min-height: 600px;
}
.map-dot{ cursor: pointer; transition: transform .15s; transform-origin: center; transform-box: fill-box; }
.map-dot:hover{ transform: scale(1.4); }
.map-dot.is-active{ stroke: var(--ink); stroke-width: 2; }

.map-side{
  display:flex; flex-direction:column;
  background: var(--paper);
}
.map-side-head{
  padding: 24px 28px 18px;
  border-bottom: 1px solid var(--rule-soft);
}
.map-side-head .pill{
  display:inline-block;
  font-family: var(--mono);
  font-size: 10.5px;
  letter-spacing: 0.12em;
  text-transform: uppercase;
  padding: 4px 10px;
  border-radius: 100px;
  color: var(--paper);
  background: var(--brass);
  margin-bottom: 10px;
}
.map-side-head h4{
  font-family: var(--serif);
  font-size: 32px;
  font-weight: 500;
  letter-spacing: -0.015em;
  margin: 0 0 6px;
  line-height: 1.05;
}
.map-side-head .meta{
  font-size: 13.5px;
  color: var(--ink-soft);
  display:flex; gap: 18px;
  margin-top: 10px;
  flex-wrap: wrap;
}
.map-side-head .meta b{ color: var(--ink); font-weight: 600; }
.map-side-head .meta .rent{
  font-family: var(--serif);
  font-size: 16px;
  color: var(--brass-deep);
}
.map-side-body{
  padding: 22px 28px;
  flex: 1;
  overflow-y: auto;
}
.map-side-body h5{
  font-family: var(--mono);
  font-size: 11px;
  letter-spacing: 0.12em;
  text-transform: uppercase;
  color: var(--ink-mute);
  font-weight: 500;
  margin: 0 0 14px;
}
.side-faq{
  padding: 12px 0;
  border-bottom: 1px solid var(--rule-soft);
  display:flex; gap: 10px;
  font-size: 14.5px;
  color: var(--ink-2);
  cursor: pointer;
  transition: color .15s;
}
.side-faq:last-child{ border-bottom:none; }
.side-faq:hover{ color: var(--brass-deep); }
.side-faq .q-num{
  font-family: var(--mono);
  font-size: 11px;
  color: var(--ink-mute);
  padding-top: 3px;
  flex-shrink: 0;
  min-width: 28px;
}
.map-side-foot{
  padding: 18px 28px;
  border-top: 1px solid var(--rule-soft);
  display:flex; justify-content:space-between; align-items:center;
  background: var(--cream);
}
.map-side-foot .more{
  font-family: var(--mono);
  font-size: 11.5px;
  letter-spacing: 0.1em;
  text-transform: uppercase;
  color: var(--ink-mute);
}
.map-side-foot a{
  font-size: 13px; font-weight: 600;
  color: var(--ink);
  display:inline-flex; align-items:center; gap: 8px;
}
.map-side-foot a:hover{ color: var(--brass-deep); }

@media (max-width: 960px){
  .map-wrap{grid-template-columns: 1fr; min-height: 0;}
  .map-stage{min-height: 420px;}
  .map-svg{ min-height: 420px; }
}

/* ================================================================
   Guarantee / trust cards (used on home, owners)
   ================================================================ */
.trust-grid{
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 24px;
}
.trust-card{
  border: 1px solid var(--rule);
  background: var(--paper);
  padding: 36px 32px;
  position: relative;
  transition: all .2s var(--ease-out);
  border-radius: var(--radius-lg);
}
.trust-card:hover{ box-shadow: var(--shadow-lg); transform: translateY(-3px); border-color: var(--border-hover); }
.trust-card .n{
  font-family: var(--mono);
  font-size: 11px;
  letter-spacing: 0.18em;
  text-transform: uppercase;
  color: var(--brass-deep);
  margin-bottom: 14px;
  display: block;
}
.trust-card h3{
  font-family: var(--serif);
  font-size: 28px;
  font-weight: 500;
  letter-spacing: -0.015em;
  line-height: 1.15;
  margin: 0 0 12px;
  color: var(--ink);
  text-wrap: balance;
}
.trust-card h3 em{ font-style: italic; color: var(--brass-deep); font-weight: 500; }
.trust-card p{ font-size: 14.5px; color: var(--ink-soft); line-height: 1.6; margin: 0; }
.trust-card .fine{
  margin-top: 20px;
  padding-top: 16px;
  border-top: 1px solid var(--rule-soft);
  font-family: var(--mono);
  font-size: 10.5px;
  letter-spacing: 0.12em;
  text-transform: uppercase;
  color: var(--ink-mute);
}
@media (max-width: 880px){ .trust-grid{grid-template-columns:1fr} }

/* ================================================================
   Service list (home page)
   ================================================================ */
.svc-grid{
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: 0;
  border-top: 1px solid var(--rule-soft);
  border-left: 1px solid var(--rule-soft);
}
.svc{
  padding: 32px 24px;
  border-right: 1px solid var(--rule-soft);
  border-bottom: 1px solid var(--rule-soft);
  transition: background .15s;
  display: flex; flex-direction: column; gap: 10px;
}
.svc:hover{ background: var(--paper); }
.svc .n{
  font-family: var(--mono);
  font-size: 11px;
  letter-spacing: 0.18em;
  color: var(--brass-deep);
}
.svc :is(h3, h4){
  font-family: var(--serif);
  font-size: 20px;
  font-weight: 500;
  letter-spacing: -0.01em;
  line-height: 1.2;
  margin: 0;
  color: var(--ink);
}
.svc p{ font-size: 13.5px; color: var(--ink-soft); margin: 0; line-height: 1.55; }

@media (max-width: 1040px){ .svc-grid{grid-template-columns: repeat(2, 1fr);} }
@media (max-width: 560px){ .svc-grid{grid-template-columns: 1fr;} }

/* ================================================================
   Testimonials
   ================================================================ */
.testimonial-strip{
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 0;
  border-top: 1px solid var(--rule);
  border-bottom: 1px solid var(--rule);
}
.tq{
  padding: 48px 36px;
  border-right: 1px solid var(--rule-soft);
  display: flex; flex-direction: column; gap: 18px;
}
.tq:last-child{ border-right: none; }
.tq .stars{
  font-family: var(--mono);
  color: var(--brass);
  font-size: 14px;
  letter-spacing: 2px;
}
.tq blockquote{
  font-family: var(--serif);
  font-size: 20px;
  font-style: italic;
  font-weight: 400;
  line-height: 1.4;
  color: var(--ink);
  margin: 0;
  text-wrap: balance;
}
.tq .who{
  font-family: var(--mono);
  font-size: 11px;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  color: var(--ink-mute);
  margin-top: auto;
}
.tq .who b{ color: var(--ink-2); font-weight: 500; }
@media (max-width: 960px){
  .testimonial-strip{ grid-template-columns: 1fr; }
  .tq{ border-right: none; border-bottom: 1px solid var(--rule-soft); }
  .tq:last-child{ border-bottom: none; }
}

/* "Read on Google" CTA — replaces handpicked testimonials with a truthful pointer */
.reviews-cta{
  border: 1px solid var(--rule);
  padding: 40px 48px;
  display: grid; gap: 18px;
  max-width: 720px; margin: 0 auto;
  background: var(--paper);
}
.reviews-cta .review-link{
  display: flex; flex-direction: column; gap: 6px;
  text-decoration: none; color: inherit;
  padding: 18px 22px;
  border: 1px solid var(--ink);
  transition: background .15s var(--ease-out);
}
.reviews-cta .review-link:hover{ background: var(--ink); color: var(--paper); }
.reviews-cta .rk{
  font-family: var(--mono); font-size: 11px; letter-spacing: 0.22em;
  text-transform: uppercase; color: var(--brass-deep);
}
.reviews-cta .review-link:hover .rk{ color: var(--brass); }
.reviews-cta .rt{
  font-family: var(--serif); font-size: 22px; font-weight: 500;
  letter-spacing: -0.01em;
}
.reviews-cta .rn{
  font-family: var(--serif); font-style: italic; font-size: 15px;
  color: var(--ink-soft); margin: 0; line-height: 1.5;
}
@media (max-width: 620px){
  .reviews-cta{ padding: 28px 24px; }
  .reviews-cta .rt{ font-size: 18px; }
}

/* ================================================================
   Breadcrumbs
   ================================================================ */
.crumbs{
  font-family: var(--mono);
  font-size: 11px;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  color: var(--ink-mute);
  padding: 24px 0 0;
  display: flex; gap: 10px; flex-wrap: wrap;
}
.crumbs a{ color: var(--ink-mute); transition: color .15s; }
.crumbs a:hover{ color: var(--brass-deep); }
.crumbs .sep{ opacity: 0.4; }
.crumbs .current{ color: var(--ink-2); }

/* ================================================================
   Article hero (topic/faq pages)
   ================================================================ */
.article-hero{
  padding: 48px 0 56px;
  border-bottom: 1px solid var(--rule-soft);
}
.article-hero .meta{
  display: flex; gap: 20px; flex-wrap: wrap;
  font-family: var(--mono);
  font-size: 11px;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  color: var(--ink-mute);
  margin-bottom: 20px;
}
.article-hero .meta b{ color: var(--brass-deep); font-weight: 500; }
.article-hero h1{
  font-family: var(--serif);
  font-weight: 400;
  font-size: clamp(34px, 4vw, 54px);
  line-height: 1.08;
  letter-spacing: -0.02em;
  margin: 0 0 20px;
  max-width: 22ch;
  color: var(--ink);
  text-wrap: balance;
}
.article-hero h1 em{ font-style: italic; color: var(--brass-deep); font-weight: 400; }
.article-hero .dek{
  font-family: var(--serif);
  font-style: italic;
  font-size: 21px;
  font-weight: 400;
  color: var(--ink-soft);
  max-width: 52ch;
  line-height: 1.45;
}

/* Article layout — prose + sidebar */
.article-grid{
  display: grid;
  grid-template-columns: 1fr 320px;
  gap: 72px;
  padding: 56px 0 96px;
}
.article-aside{
  position: sticky; top: calc(var(--header-h) + 24px);
  align-self: start;
  font-size: 14px;
}
.article-aside h6,
.article-aside .mono-label{
  font-family: var(--mono);
  font-size: 10.5px;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  color: var(--ink-mute);
  margin: 0 0 14px;
  font-weight: 500;
}
.article-aside .toc{
  list-style: none; padding: 0; margin: 0 0 32px;
  border-top: 1px solid var(--rule-soft);
}
.article-aside .toc li{
  border-bottom: 1px solid var(--rule-soft);
}
.article-aside .toc a{
  display: block;
  padding: 10px 0;
  color: var(--ink-soft);
  font-size: 13.5px;
  transition: color .12s;
}
.article-aside .toc a:hover{ color: var(--brass-deep); }
.article-aside .mini-card{
  background: var(--paper);
  border: 1px solid var(--rule);
  padding: 20px 22px;
  position: relative;
}
.article-aside .mini-card::before{
  content:""; position:absolute; top:-6px; left: 22px;
  width: 38px; height: 6px; background: var(--brass);
}
.article-aside .mini-card h4{
  font-family: var(--serif);
  font-size: 19px;
  font-weight: 500;
  line-height: 1.15;
  margin: 0 0 10px;
  color: var(--ink);
}
.article-aside .mini-card p{ font-size: 13px; color: var(--ink-soft); margin: 0 0 14px; line-height: 1.5; }
.article-aside .mini-card a{
  font-family: var(--mono); font-size: 11px;
  letter-spacing: 0.14em; text-transform: uppercase;
  color: var(--brass-deep); font-weight: 500;
}
.article-aside .mini-card a:hover{ color: var(--ink); }

@media (max-width: 960px){
  .article-grid{grid-template-columns: 1fr; gap: 40px; padding: 40px 0 72px;}
  .article-aside{position: static;}
}

/* ================================================================
   FAQ accordion (used on area + topic pages)
   ================================================================ */
.faqs{
  border-top: 1px solid var(--rule-soft);
}
.faqs details{
  border-bottom: 1px solid var(--rule-soft);
  padding: 0;
}
.faqs summary{
  list-style: none;
  cursor: pointer;
  padding: 22px 0;
  display: flex; gap: 20px; align-items: flex-start;
  font-family: var(--serif);
  font-size: 20px;
  font-weight: 500;
  line-height: 1.3;
  color: var(--ink);
  transition: color .15s;
}
.faqs summary::-webkit-details-marker{ display: none; }
.faqs summary::after{
  content: "+";
  margin-left: auto;
  font-family: var(--mono);
  font-size: 20px;
  color: var(--brass);
  transition: transform .2s;
  flex-shrink: 0;
}
.faqs details[open] summary::after{ content: "−"; }
.faqs summary:hover{ color: var(--brass-deep); }
.faqs .q-num{
  font-family: var(--mono);
  font-size: 12px;
  color: var(--ink-mute);
  padding-top: 6px;
  flex-shrink: 0;
  min-width: 32px;
  font-weight: 500;
}
.faqs .a{
  padding: 0 0 24px 52px;
  color: var(--ink-2);
  font-size: 16px;
  line-height: 1.65;
}
.faqs .a > * + *{ margin-top: 0.8em; }
.faqs .a a{ color: var(--brass-deep); border-bottom: 1px solid var(--brass-soft); }

@media (max-width: 560px){
  .faqs summary{ font-size: 17px; gap: 12px; }
  .faqs .a{ padding-left: 36px; }
}

/* ================================================================
   Area card grid (areas index / footer cross-links)
   ================================================================ */
.area-grid{
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 0;
  border-top: 1px solid var(--rule-soft);
  border-left: 1px solid var(--rule-soft);
}
.area-card{
  padding: 24px 24px 22px;
  border-right: 1px solid var(--rule-soft);
  border-bottom: 1px solid var(--rule-soft);
  background: transparent;
  transition: background .15s;
  display: flex; flex-direction: column; gap: 8px;
  cursor: pointer;
}
.area-card:hover{ background: var(--paper); }
.area-card .city{
  font-family: var(--mono);
  font-size: 10.5px;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  color: var(--brass-deep);
  display: flex; justify-content: space-between;
}
.area-card .city .dot{
  width: 7px; height: 7px; border-radius: 50%;
  align-self: center;
}
.area-card .city .dot.lv{ background: var(--lv-blue); }
.area-card .city .dot.nlv{ background: var(--nlv-violet); }
.area-card .city .dot.hd{ background: var(--brass); }
.area-card h4{
  font-family: var(--serif);
  font-size: 22px;
  font-weight: 500;
  line-height: 1.15;
  letter-spacing: -0.01em;
  margin: 0;
  color: var(--ink);
}
.area-card .type{
  font-family: var(--serif);
  font-style: italic;
  font-size: 14.5px;
  color: var(--ink-soft);
  margin: 0;
}
.area-card .rent{
  margin-top: auto;
  padding-top: 14px;
  font-family: var(--mono);
  font-size: 11px;
  letter-spacing: 0.1em;
  text-transform: uppercase;
  color: var(--ink-mute);
}
.area-card .rent b{ color: var(--ink-2); font-weight: 500; font-family: var(--serif); letter-spacing: 0; text-transform: none; font-size: 14.5px; }

@media (max-width: 960px){ .area-grid{grid-template-columns: repeat(2, 1fr);} }
@media (max-width: 560px){ .area-grid{grid-template-columns: 1fr;} }

/* ================================================================
   Nearby-communities grid — used on generated area pages under /areas/.
   Separate from .area-grid (which is an editorial 3-col directory);
   .nearby-grid is a tighter 4-up "also in this city" rail.
   ================================================================ */
.nearby-grid{
  margin-top: 24px;
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: 16px;
}
.nearby{
  padding: 18px;
  border: 1px solid var(--rule-soft);
  background: var(--paper);
  display: flex; flex-direction: column; gap: 6px;
  transition: border-color .15s var(--ease-out), background .15s var(--ease-out);
  color: var(--ink);
  text-decoration: none;
}
.nearby:hover{ border-color: var(--ink); background: var(--surface-alt); }
.nearby .tag{
  font-family: var(--mono);
  font-size: 10px;
  letter-spacing: 0.14em;
  color: var(--ink-mute);
  text-transform: uppercase;
}
.nearby :is(h3, h4, h5){
  font-family: var(--serif);
  font-size: 17px;
  font-weight: 500;
  margin: 0;
  color: var(--ink);
  line-height: 1.2;
}
.nearby .rent{
  font-family: var(--mono);
  font-size: 11px;
  letter-spacing: 0.08em;
  color: var(--muted);
}
.nearby.ink{ background: var(--ink); color: var(--on-dark); border-color: var(--ink); }
.nearby.ink :is(h3, h4, h5){ color: var(--on-dark); }
.nearby.ink .tag{ color: var(--on-dark-muted); }
.nearby.ink .rent{ color: var(--on-dark-muted); }
@media (max-width: 880px){ .nearby-grid{ grid-template-columns: repeat(2, 1fr); } }
@media (max-width: 480px){ .nearby-grid{ grid-template-columns: 1fr; } }

/* ================================================================
   Page header (non-home pages)
   ================================================================ */
.page-header{
  padding: 96px 0 56px;
  position: relative;
  border-bottom: 1px solid var(--rule-soft);
}
.page-header .kicker{ margin-top: 16px; margin-bottom: 20px; }
.page-header h1{
  font-family: var(--serif);
  font-weight: 400;
  font-size: clamp(40px, 5vw, 68px);
  line-height: 1.02;
  letter-spacing: -0.025em;
  margin: 0 0 22px;
  max-width: 18ch;
  color: var(--ink);
  text-wrap: balance;
}
.page-header h1 em{ font-style: italic; color: var(--brass-deep); font-weight: 400; }
.page-header .lede{ font-size: 19px; max-width: 56ch; }

@media (max-width: 760px){
  .page-header{ padding: 72px 0 48px; }
}

/* ================================================================
   Utility classes
   ================================================================ */
.mt-0{ margin-top: 0 !important; }
.mt-8{ margin-top: 8px; }
.mt-16{ margin-top: 16px; }
.mt-24{ margin-top: 24px; }
.mt-32{ margin-top: 32px; }
.mt-48{ margin-top: 48px; }
.mb-0{ margin-bottom: 0 !important; }
.mb-24{ margin-bottom: 24px; }
.mb-48{ margin-bottom: 48px; }

.hidden-mobile{ }
.visible-mobile{ display: none; }
@media (max-width: 760px){
  .hidden-mobile{ display: none !important; }
  .visible-mobile{ display: block; }
}

/* ================================================================
   Card baseline — background + border + hover + shadow. Consolidates
   the card-family components (.topic, .area-card, .svc, .news,
   .price-card, .trust-card, .person, .tab, .faqs details, .hero-lead,
   .lead-form, .map-wrap) into a single place so the hover/shadow/grid
   treatment is consistent.

   Radius tokens (--radius-sm/md/lg/xl) intentionally resolve to 0 in
   :root to honor the Newsprint "zero rounded corners" direction. The
   border-radius declarations below are therefore visual no-ops — they
   exist as a single theme-switchable surface: any theme variant can
   redefine --radius-* on :root to opt into rounded cards site-wide
   without touching component selectors. Do NOT delete these
   declarations: they ARE the theme extension point.
   ================================================================ */

/* Hero lead-form card (resources hero right column) */
.hero-lead{
  border-radius: var(--radius-lg);
  box-shadow: var(--shadow-md);
  background: var(--surface);
}
.hero-lead::before{ border-radius: var(--radius-sm) var(--radius-sm) 0 0; }

/* Full-width dark lead section form (home, owners, area, topic) */
.lead-form{
  border-radius: var(--radius-lg);
  box-shadow: var(--shadow-lg);
}
.lead-form::before{ border-radius: var(--radius-sm) var(--radius-sm) 0 0; }

/* Aside card (area pages) */
.aside-card{ border-radius: var(--radius-lg); }
.aside-card::before{ border-radius: var(--radius-sm) var(--radius-sm) 0 0; }

/* Topic cards — use a card-per-tile radius. Drop the table-grid look
   for an airy independent-card grid, which is how resources.innova-pm
   renders its library tiles. */
.topic-grid{
  border: none;
  display: grid;
  gap: 20px;
}
.topic{
  border: 1px solid var(--rule);
  border-radius: var(--radius-lg);
  background: var(--surface);
}
.topic:hover{
  background: var(--surface);
  box-shadow: var(--shadow-md);
  border-color: var(--border-hover);
  transform: translateY(-2px);
}
.topic.feature{ border-radius: var(--radius-lg); }

/* Area card grid — same airy treatment */
.area-grid{
  border: none;
  display: grid;
  gap: 12px;
}
.area-card{
  border: 1px solid var(--rule);
  border-radius: var(--radius-md);
  background: var(--surface);
}
.area-card:hover{ border-color: var(--border-hover); box-shadow: var(--shadow-sm); }

/* Service grid — on home, "How We Add Value" */
.svc-grid{
  border: none;
  display: grid;
  gap: 16px;
}
.svc{
  border: 1px solid var(--rule);
  border-radius: var(--radius-md);
  background: var(--surface);
  transition: all .2s var(--ease-out);
}
.svc:hover{ background: var(--surface); border-color: var(--border-hover); box-shadow: var(--shadow-sm); }

/* News card grid (home) */
.news-grid{
  border: none;
  display: grid;
  gap: 16px;
}
.news{
  border: 1px solid var(--rule);
  border-radius: var(--radius-md);
  background: var(--surface);
  transition: all .2s var(--ease-out);
}
.news:hover{ background: var(--surface); border-color: var(--border-hover); box-shadow: var(--shadow-sm); transform: translateY(-2px); }

/* Nearby card (area pages) */
.nearby{ border-radius: var(--radius-md); }
.nearby.ink{ border-radius: var(--radius-md); }

/* Person / team card (about) */
.person{ border-radius: var(--radius-lg); overflow: hidden; }

/* Price card (owners) */
.price-grid{
  border: none;
  display: grid;
  gap: 20px;
}
.price-card{
  border: 1px solid var(--rule);
  border-radius: var(--radius-lg);
}
.price-card.featured{ box-shadow: var(--shadow-lg); }

/* Callout (prose) */
.prose .callout{ border-radius: var(--radius-md); }

/* Marginalia (prose) */
.marginalia{ border-radius: var(--radius-sm); }

/* Map wrapper + legend */
.map-wrap{ border-radius: var(--radius-lg); box-shadow: var(--shadow-sm); }
.map-legend{ border-radius: var(--radius-sm); }
.map-side-head .pill{ border-radius: var(--radius-xl); }

/* Form inputs — subtle radius on the underline fields */
.field input, .field textarea, .field select{
  border-radius: 0;
  padding: 10px 0 10px;
}

/* Chips & reason toggles */
.reason-toggle{ border-radius: var(--radius-sm); }
.reason-toggles{ gap: 6px; }

/* Ask search — a subtle radius for the focus container, still very
   minimal. The input itself stays a thin rule. */
.ask-results{ border-radius: var(--radius-md); }

/* Broker letter */
.broker-letter{ border-radius: var(--radius-xl); }
.broker-letter::before{ border-radius: var(--radius-sm) var(--radius-sm) 0 0; }

/* Have-question bottom band — gentle accent */
.have-q{ background: linear-gradient(135deg, var(--surface-alt), var(--bg)); }

/* Tabs — container gets a soft background pill */
.tabs{
  border-bottom: none;
  background: var(--surface-alt);
  padding: 4px;
  border-radius: var(--radius-xl);
  display: inline-flex;
  width: auto;
  max-width: 100%;
  overflow-x: auto;
  margin-bottom: 40px;
}
.tab{
  border-bottom: none;
  border-radius: var(--radius-xl);
  margin-bottom: 0;
  padding: 10px 18px;
  font-weight: 500;
}
.tab.is-active{
  background: var(--surface);
  color: var(--heading);
  border-bottom-color: transparent;
  box-shadow: var(--shadow-sm);
}
.tab:hover:not(.is-active){ color: var(--heading); }

/* FAQ accordion */
.faqs details{
  background: var(--surface);
  border: 1px solid var(--rule);
  border-radius: var(--radius-md);
  margin-bottom: 10px;
  padding: 0 24px;
}
.faqs{ border-top: none; }
.faqs summary{ padding: 20px 0; }
.faqs .a{ padding-left: 52px; padding-bottom: 20px; }

/* Brand logo image in the nav */
.brand-logo{
  height: 42px; width: auto; display: block;
  flex-shrink: 0;
}
/* Brand logo image in the footer — darker surface so invert the PNG */
.brand-footer-logo{
  height: 38px; width: auto; display: block;
  margin-bottom: 20px;
  filter: invert(1) hue-rotate(180deg) saturate(0.6) brightness(1.2);
}
.brand-logo-stack{
  display: flex; align-items: center; gap: 12px;
}
/* In explicit dark-mode opt-in, the PNG logo becomes a filtered
   inversion so the black "Innova Realty" wordmark reads on dark. */
:root[data-theme="dark"] .brand-logo{
  filter: invert(1) hue-rotate(180deg) saturate(0.7);
}

/* Focus ring — deep ink on light surfaces; paper on dark surfaces */
a:focus-visible, button:focus-visible,
input:focus-visible, textarea:focus-visible, select:focus-visible,
.map-dot:focus-visible, [role="button"]:focus-visible,
summary:focus-visible{
  outline: 2px solid var(--ink);
  outline-offset: 3px;
}
/* Dark surfaces flip the ring color so contrast stays ≥3:1 */
.section.bg-ink *:focus-visible, .lead-section *:focus-visible,
.topic.feature:focus-visible, footer.site-footer *:focus-visible,
.topstrip *:focus-visible, .btn-primary:focus-visible,
.nearby.ink:focus-visible, .price-card.featured *:focus-visible{
  outline-color: var(--paper);
}

/* Ensure .section spacing and container still feel roomy with the
   new 1280px container width from live site */
.section{ padding: 80px 0; }
.section.tight{ padding: 56px 0; }
@media (min-width: 1040px){ .section{ padding: 96px 0; } }

/* Dark-mode specific tweaks to the updates above */
:root[data-theme="dark"] .topic,
:root[data-theme="dark"] .area-card,
:root[data-theme="dark"] .svc,
:root[data-theme="dark"] .news,
:root[data-theme="dark"] .price-card,
:root[data-theme="dark"] .trust-card,
:root[data-theme="dark"] .person,
:root[data-theme="dark"] .tab.is-active,
:root[data-theme="dark"] .faqs details,
:root[data-theme="dark"] .hero-lead,
:root[data-theme="dark"] .aside-card,
:root[data-theme="dark"] .map-wrap{
  background: var(--surface);
  border-color: var(--border);
}

/* Mono label — small metadata string that appears throughout the system */
.mono-label{
  font-family: var(--mono);
  font-size: 11px;
  letter-spacing: 0.12em;
  text-transform: uppercase;
  color: var(--ink-mute);
}

/* ================================================================
   Aside card — compact conversion card used in area.html sidebar.
   (Same family as .hero-lead — shared brass top bar, smaller footprint.)
   ================================================================ */
.aside-card{
  background: var(--paper); border: 1px solid var(--rule);
  padding: 28px 28px 24px; position: relative;
}
.aside-card::before{
  content:""; position: absolute; top:-8px; left: 28px;
  width: 48px; height: 8px; background: var(--brass);
}
.aside-card h3{
  font-family: var(--serif); font-size: 26px; font-weight: 500;
  margin: 0 0 8px; line-height: 1.1; letter-spacing: -0.015em;
}
.aside-card h3 em{ font-style: italic; color: var(--brass-deep); font-weight: 500; }
.aside-card p{ font-size: 14px; color: var(--ink-soft); margin: 0 0 20px; line-height: 1.5; }
.aside-card dl{
  display: grid; grid-template-columns: 1fr 1fr; gap: 14px 20px;
  font-size: 13.5px;
  padding: 16px 0;
  border-top: 1px solid var(--rule-soft);
  border-bottom: 1px solid var(--rule-soft);
  margin: 0;
}
.aside-card dt{
  font-family: var(--mono); font-size: 10px;
  letter-spacing: 0.18em; text-transform: uppercase;
  color: var(--ink-mute); margin: 0;
}
.aside-card dd{
  font-family: var(--serif); font-size: 16.5px;
  color: var(--ink-2); margin: 2px 0 0; letter-spacing: -0.005em;
}
.aside-card .cta-stack{
  margin-top: 20px; display: flex; flex-direction: column; gap: 8px;
}
.aside-card .cta-stack .btn{ justify-content: center; }

/* Nearby card — dark variant (used at end of area page) */
.nearby.ink{
  background: var(--ink); color: var(--paper); border-color: var(--ink);
}
.nearby.ink .tag{ color: var(--primary-soft); }
.nearby.ink h5{ color: var(--paper); }
.nearby.ink .rent{ color: var(--primary-soft); }

/* Lead form aria-live confirmation */
.lead-form-status{
  margin-top: 12px;
  font-size: 13.5px;
  color: var(--brass-deep);
  font-family: var(--serif); font-style: italic;
  min-height: 1em;
}
.lead-form-status[role="status"]:empty{ margin: 0; }

/* ================================================================
   Scroll-triggered reveal — subtle fade + rise as elements enter view.
   Applied by the shared JS via IntersectionObserver. Respects
   prefers-reduced-motion via the global reset.
   ================================================================ */
.reveal{
  opacity: 0;
  transform: translateY(16px);
  transition: opacity .8s var(--ease-out), transform .8s var(--ease-out);
  will-change: opacity, transform;
}
.reveal.is-in{ opacity: 1; transform: translateY(0); }
.reveal.delay-1{ transition-delay: 80ms; }
.reveal.delay-2{ transition-delay: 160ms; }
.reveal.delay-3{ transition-delay: 240ms; }
.reveal.delay-4{ transition-delay: 320ms; }
@media (prefers-reduced-motion: reduce){
  .reveal{ opacity: 1; transform: none; transition: none; }
}

/* ================================================================
   Reading progress bar — fixed top, filled brass. Used on long-form
   article templates (topic, faq single).
   ================================================================ */
.reading-progress{
  position: fixed;
  top: 0; left: 0; right: 0;
  height: 2px;
  background: transparent;
  z-index: 30;
  pointer-events: none;
}
.reading-progress::after{
  content: ""; display: block;
  height: 100%;
  width: var(--progress, 0%);
  background: var(--brass);
  transition: width .08s linear;
}

/* ================================================================
   Theme toggle — lives in the site footer. Two-state segmented button.
   ================================================================ */
.theme-toggle{
  display: inline-flex;
  align-items: center;
  gap: 2px;
  padding: 2px;
  border: 1px solid rgba(245,241,228,0.22);
  border-radius: 100px;
  background: transparent;
  font-family: var(--mono);
  font-size: 10.5px;
  letter-spacing: 0.18em;
  text-transform: uppercase;
  margin-left: 18px;
}
.theme-toggle button{
  padding: 4px 10px;
  border-radius: 100px;
  color: rgba(244,239,230,0.45);
  transition: all .2s;
  cursor: pointer;
  background: transparent;
}
.theme-toggle button[aria-pressed="true"]{
  /* Lives on the dark footer in both themes — pair on-dark/dark so the
     active pill stays cream-on-dark regardless of theme. */
  background: var(--on-dark);
  color: var(--dark);
}
.theme-toggle button:hover:not([aria-pressed="true"]){
  color: var(--primary-soft);
}

/* ================================================================
   Article opening — drop cap on first paragraph of any .prose block.
   Opt out with .no-cap class on the paragraph.
   ================================================================ */
.prose > p:first-of-type:not(.no-cap)::first-letter{
  font-family: var(--serif);
  font-weight: 400;
  font-style: normal;
  font-size: 5.4em;
  float: left;
  line-height: 0.86;
  padding: 6px 10px 0 0;
  margin-top: 4px;
  color: var(--brass-deep);
  font-feature-settings: "ss01";
}

/* End mark — on the final paragraph of a .prose article */
.prose > *:last-child::after{
  display: none; /* opt-in */
}
.prose.with-end-mark > *:last-child::after{
  display: inline;
  content: " §";
  color: var(--brass);
  font-weight: 500;
  margin-left: 6px;
  font-family: var(--serif);
  font-style: italic;
}

/* ================================================================
   Marginalia — editor's notes anchored in the margin of long-form.
   In wide viewports (≥1120px) they float into the right margin of
   the article grid. In narrower viewports they fall inline as an
   indented aside with a brass rule.
   ================================================================ */
.marginalia{
  position: relative;
  margin: 1.4em 0;
  padding: 14px 16px 14px 18px;
  border-left: 2px solid var(--brass);
  font-family: var(--serif);
  font-size: 15px;
  font-style: italic;
  line-height: 1.5;
  color: var(--ink-soft);
  background: var(--paper);
}
.marginalia b, .marginalia .note-label{
  font-family: var(--mono);
  font-style: normal;
  font-weight: 500;
  font-size: 10.5px;
  letter-spacing: 0.18em;
  text-transform: uppercase;
  color: var(--brass-deep);
  display: block;
  margin-bottom: 6px;
}
/* Float into the margin on wide screens */
@media (min-width: 1120px){
  .article-grid .prose .marginalia{
    float: right;
    clear: right;
    width: 240px;
    margin: 0 -272px 1.4em 1.4em;
    padding: 0 0 0 18px;
    background: transparent;
  }
}

/* ================================================================
   Footnote citation superscripts — inline, brass, non-italic.
   Anchors to a <ol class="citations"> block at the end of an article.
   ================================================================ */
.fn{
  font-family: var(--mono);
  font-size: 0.72em;
  vertical-align: super;
  line-height: 0;
  color: var(--brass-deep);
  font-weight: 500;
  padding: 0 2px;
  border-bottom: none !important;
  letter-spacing: 0;
}
.fn:hover{ color: var(--ink); }

.citations{
  margin-top: 48px;
  padding-top: 28px;
  border-top: 1px solid var(--rule);
  list-style: none;
  counter-reset: fn;
  padding-left: 0;
}
.citations li{
  counter-increment: fn;
  position: relative;
  padding-left: 36px;
  font-size: 13.5px;
  line-height: 1.6;
  color: var(--ink-soft);
  margin-bottom: 10px;
  font-family: var(--sans);
}
.citations li::before{
  content: counter(fn);
  position: absolute;
  left: 0; top: 1px;
  font-family: var(--mono);
  font-size: 11px;
  font-weight: 500;
  color: var(--brass-deep);
  letter-spacing: 0.05em;
  min-width: 24px;
}

/* ================================================================
   Pull quote — large serif quote pulled out of a prose block.
   ================================================================ */
.pullquote{
  margin: 2em -24px;
  padding: 20px 24px;
  border-top: 1px solid var(--brass);
  border-bottom: 1px solid var(--brass);
  font-family: var(--serif);
  font-style: italic;
  font-size: 28px;
  font-weight: 400;
  line-height: 1.25;
  letter-spacing: -0.01em;
  color: var(--ink);
  text-wrap: balance;
  text-align: center;
}
.pullquote::before{
  content: open-quote;
  color: var(--brass);
  font-size: 1.2em;
  line-height: 0;
  vertical-align: -0.3em;
  margin-right: 4px;
}
.pullquote::after{
  content: close-quote;
  color: var(--brass);
  font-size: 1.2em;
  line-height: 0;
  vertical-align: -0.3em;
  margin-left: 4px;
}
@media (max-width: 640px){ .pullquote{ font-size: 22px; margin: 2em 0; } }

/* ================================================================
   Custom scrollbar for map side panel (webkit only — gracefully
   ignored elsewhere). Small detail; thin brass thumb.
   ================================================================ */
.map-side-body::-webkit-scrollbar{ width: 8px; }
.map-side-body::-webkit-scrollbar-track{ background: transparent; }
.map-side-body::-webkit-scrollbar-thumb{
  background: var(--brass-soft);
  border-radius: var(--radius-sm);
  border: 2px solid var(--paper);
}
.map-side-body::-webkit-scrollbar-thumb:hover{ background: var(--brass); }

/* ================================================================
   Map dot — expressive focus state
   ================================================================ */
.map-dot:focus-visible circle:first-child{
  stroke: var(--ink);
  stroke-width: 2.5;
}
/* Keep an outline as keyboard-focus fallback (SVG stroke alone isn't
   reliably visible on every browser/OS combo) */
.map-dot:focus-visible{
  outline: 2px solid var(--ink);
  outline-offset: 3px;
}

/* Ask input — primary search field on resources + faq + index. The
   container's border-color change is decorative; the input itself
   needs its own ring for keyboard focus. */
.ask input:focus-visible{
  outline: 2px solid var(--ink);
  outline-offset: 4px;
}

/* ================================================================
   Responsive polish — QA pass fixes
   ================================================================ */

/* Nav toggle: hit target ≥44×44 (WCAG 2.5.8 AAA) */
.nav-toggle{ width: 44px; height: 44px; }

/* Stats trailing border fix: three-up (3 stats) at 2-col layout —
   item 3 has no sibling but was retaining its right border */
@media (max-width: 760px){
  .stats.three-up .stat:last-child{ border-right: none; grid-column: 1 / -1; }
}

/* Owners process-row: four steps → two columns at 1040 — item 4's
   right border used to dangle with nothing beside it */
@media (max-width: 1040px){
  .process-row .step:nth-child(2n){ border-right: none !important; }
}

/* Lead bullets (dark CTA section): 2-col grid collapses to 1 on phones */
@media (max-width: 640px){
  .lead-bullets{ grid-template-columns: 1fr !important; }
}

/* Price grid — add the missing 2-col intermediate */
@media (max-width: 1040px) and (min-width: 641px){
  .price-grid{ grid-template-columns: repeat(2, 1fr) !important; gap: 16px; }
}

/* Services grid — add missing 3-col intermediate */
@media (max-width: 1120px) and (min-width: 721px){
  .svc-grid{ grid-template-columns: repeat(3, 1fr) !important; }
}

/* Ask search submit button — make the whole button a tap-safe target */
.ask button.submit{ min-height: 44px; padding-left: 14px; padding-right: 6px; }

/* Broker letter — crush-proof padding on mobile */
@media (max-width: 640px){
  .broker-letter{ padding: 36px 24px 28px !important; }
  .broker-letter::before{ left: 24px !important; }
}

/* Resources hero right column — prevent the 480px fixed column from
   pinching the h1 in the 1041-1120 "dead zone" before the stack query fires */
@media (min-width: 1041px) and (max-width: 1180px){
  .hero-grid{ grid-template-columns: 1.4fr min(440px, 40vw) !important; gap: 40px !important; }
}

/* Dropdown aria-haspopup — reset default browser UI that might add a scroll indicator */
.nav-links .has-sub > a[aria-haspopup="menu"]{ cursor: pointer; }

/* ================================================================
   Footer logo strip — recognition, media, sponsors, social.
   Carried over from the live site's footer (client request T5).
   Footer ground is dark in both themes, so one treatment works.
   ================================================================ */
.footer-logos{
  grid-column: 1 / -1; /* footer .container is a 4-col grid — span it */
  border-top: 1px solid rgba(245,241,228,0.14);
  margin-top: 56px;
  padding-top: 40px;
  display: flex;
  flex-direction: column;
  gap: 28px;
}
.footer-logos .row{
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 24px 36px;
}
.footer-logos .strip-label{
  font-family: var(--mono);
  font-size: 10.5px;
  letter-spacing: 0.2em;
  text-transform: uppercase;
  color: var(--on-dark-muted);
  flex: 0 0 100%;
}
.footer-logos img{
  height: 48px;
  width: auto;
  opacity: 0.92;
  transition: opacity .15s;
}
.footer-logos img:hover{ opacity: 1; }
.footer-logos img.sm{ height: 40px; }
.footer-logos .logo-slot{
  display: inline-flex;
  align-items: center;
  justify-content: center;
  min-width: 96px;
  height: 48px;
  padding: 0 14px;
  border: 1px dashed rgba(245,241,228,0.35);
  font-family: var(--mono);
  font-size: 10px;
  letter-spacing: 0.12em;
  text-transform: uppercase;
  text-align: center;
  color: var(--on-dark-muted);
  line-height: 1.5;
}
.footer-social{
  display: flex;
  flex-wrap: wrap;
  gap: 12px 28px;
  font-family: var(--mono);
  font-size: 11px;
  letter-spacing: 0.14em;
  text-transform: uppercase;
}
.footer-social a{ color: var(--on-dark-muted); }
.footer-social a:hover{ color: var(--on-dark); }
@media (max-width: 640px){
  .footer-logos img{ height: 40px; }
  .footer-logos img.sm{ height: 32px; }
  .footer-logos .row{ gap: 18px 24px; }
}