/* ============================================
   Chad Sellers Realtor — Brand system
   Light theme: Home, Education & Resources, Neighborhoods, roadmaps, etc.
   Dark theme (.dark-page): Military & Veteran Relocation
   No gold. No border-radius. No drop shadows. No emoji.
   ============================================ */

:root {
  /* LIGHT THEME */
  --ground:      #F1F4F6;
  --grid:        #C6D0D8;
  --ink:         #14222E;
  --body:        #46586A;
  --body-2:      #566878;
  --muted:       #6C7E8E;
  --muted-2:     #5C6E7E;
  --accent:      #2C5F8A;
  --line:        #DCE3E9;
  --line-strong: #C6D0D8;
  --tint:        #E7ECF0;
  --tint-2:      #E4E9ED;
  --tint-3:      #DDE4E9;
  --paper:       #FFFFFF;

  /* DARK THEME */
  --d-ground:  #0E2033;
  --d-panel:   #12293F;
  --d-panel-2: #16324B;
  --d-footer:  #0A1826;
  --d-text:    #EDF1F4;
  --d-body:    #B3C2CE;
  --d-muted:   #93A5B4;
  --d-muted-2: #7D8F9E;
  --d-accent:  #8FB6D6;
  --d-line:    #1E374E;
  --d-line-2:  #24405A;
  --d-link:    #A9C6DF;

  /* WARNING — semantic only, never restyle to blue */
  --alert:      #8C3A24;
  --alert-bg:   #F8F0EC;
  --alert-line: #E4D3CB;

  --max-width: 1180px;
  --serif: Marcellus, Georgia, "Iowan Old Style", "Times New Roman", serif;
  --sans:  "Public Sans", -apple-system, BlinkMacSystemFont, "Segoe UI", "Helvetica Neue", Arial, sans-serif;

  /* legacy aliases kept so older markup (map/listings/etc.) still resolves sensibly */
  --navy: var(--d-panel);
  --navy-light: var(--accent);
  --red: #8C3A24;
  --sand: var(--ground);
  --sand-dark: var(--tint);
  --white: #ffffff;
  --gray: var(--muted);
  --border: var(--line);
  --shadow: none;
  --radius: 0px;
  --font-head: var(--serif);
  --font-body: var(--sans);
}

* { box-sizing: border-box; }

html { scroll-behavior: smooth; }

body {
  margin: 0;
  font-family: var(--sans);
  font-weight: 400;
  color: var(--body);
  background: var(--ground);
  line-height: 1.65;
}

img { max-width: 100%; display: block; }

a { color: var(--accent); text-decoration: none; }
a:hover { text-decoration: underline; }

h1, h2, h3, h4 {
  font-family: var(--serif);
  font-weight: 400 !important;
  color: var(--ink);
  line-height: 1.2;
  margin: 0 0 0.5em;
  text-wrap: balance;
}
p { text-wrap: pretty; }

h1 { font-size: 54px; line-height: 1.05; }
h2 { font-size: 27px; }
h3 { font-size: 19px; }
p { margin: 0 0 1em; color: var(--body); }

@media (max-width: 640px) {
  h1 { font-size: 40px; line-height: 1.08; }
}

.container {
  max-width: var(--max-width);
  margin: 0 auto;
  padding: 0 24px;
}

/* ---------- Background texture ----------
   Light pages: a faint sectional-chart grid, 1px --grid lines on a 120px
   grid at ~30% opacity (baked into the line color's alpha so it blends
   with --ground beneath it).
   Dark page: large thin concentric rings bleeding off the left edge, 1px
   --d-line-2, evoking a radar/scope sweep. Both are painted as the body's
   own background-image layer (not a pseudo-element) so they sit behind
   every section/card automatically with no stacking-order risk. */
body:not(.dark-page) {
  background-image:
    linear-gradient(to right, rgba(198, 208, 216, 0.30) 1px, transparent 1px),
    linear-gradient(to bottom, rgba(198, 208, 216, 0.30) 1px, transparent 1px);
  background-size: 120px 120px;
}

/* ---------- Dark page (Military & Veteran Relocation) ---------- */
body.dark-page {
  background-color: var(--d-ground);
  color: var(--d-body);
  background-image: repeating-radial-gradient(
    circle at -10% 45%,
    var(--d-line-2) 0px,
    var(--d-line-2) 1px,
    transparent 1px,
    transparent 64px
  );
  background-repeat: no-repeat;
}
.dark-page h1, .dark-page h2, .dark-page h3, .dark-page h4 { color: var(--d-text); }
.dark-page p { color: var(--d-body); }
.dark-page .section-alt { background: var(--d-panel); }
.dark-page a { color: var(--d-link); }
.dark-page .section-head p { color: var(--d-muted); }

/* ---------- Hero (Home) ---------- */
.hero { padding: 64px 0 76px; }
.hero-grid {
  display: grid;
  grid-template-columns: 1.05fr 0.95fr;
  gap: 60px;
  align-items: center;
}
@media (max-width: 900px) {
  .hero-grid { grid-template-columns: 1fr; gap: 40px; }
}
.hero h1 { font-size: 62px; line-height: 1.03; margin-bottom: 22px; }
@media (min-width: 1200px) {
  .hero h1 { font-size: 72px; }
}
.hero .lede { font-size: 18px; line-height: 1.72; color: var(--body); max-width: 54ch; margin-bottom: 30px; }
.hero-actions { display: flex; align-items: center; gap: 22px; flex-wrap: wrap; margin-bottom: 8px; }
.hero-actions .secondary-link { color: var(--accent); font-weight: 700; font-size: 19px; letter-spacing: 0.01em; }
.hero-photo {
  position: relative;
  width: 100%;
  max-width: 380px;
  margin: 0 auto;
}
.headshot-frame {
  width: 100%;
  aspect-ratio: 380 / 520;
  object-fit: cover;
  object-position: 50% 22%;
  border: 1px solid var(--line-strong);
}
.hero-photo .name-card {
  position: absolute;
  left: -52px;
  bottom: 28px;
  max-width: none;
  width: max-content;
}
@media (max-width: 560px) {
  .hero-photo .name-card { left: 0; }
}
@media (max-width: 420px) {
  .hero-photo .name-card {
    width: calc(100% + 52px);
    white-space: normal;
  }
}

/* ---------- Eyebrow ---------- */
.eyebrow {
  display: flex;
  align-items: center;
  gap: 14px;
  font-size: 11px;
  letter-spacing: 0.26em;
  text-transform: uppercase;
  color: var(--accent);
  font-weight: 400;
  font-family: var(--sans);
  margin-bottom: 16px;
}
.eyebrow::before {
  content: "";
  width: 34px;
  height: 1px;
  background: var(--accent);
  flex: none;
}
.dark-page .eyebrow, .section-navy .eyebrow { color: var(--d-accent); }
.dark-page .eyebrow::before, .section-navy .eyebrow::before { background: var(--d-accent); }

/* ---------- Mark (SVG chevron) ---------- */
.mark-neutral { stroke: #8494A3; }
.dark-page .mark-neutral, .site-header.dark .mark-neutral { stroke: #8FA0AF; }
.mark-chevron { stroke: var(--accent); }
.dark-page .mark-chevron, .site-header.dark .mark-chevron { stroke: var(--d-accent); }

/* ---------- Header / Nav ---------- */
.site-header {
  background: var(--paper);
  border-bottom: 1px solid var(--line);
  position: sticky;
  top: 0;
  z-index: 100;
}
.site-header.dark { background: var(--d-ground); border-bottom-color: var(--d-line); }

.nav-wrap {
  max-width: var(--max-width);
  margin: 0 auto;
  padding: 18px 24px;
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 48px;
  min-height: 74px;
}
@media (min-width: 1200px) {
  .nav-wrap { padding: 18px 40px; }
}

.brand {
  display: flex;
  align-items: center;
  gap: 15px;
  color: var(--ink);
}
.site-header.dark .brand { color: var(--d-text); }

.brand-mark {
  width: 46px;
  height: 33px;
  flex-shrink: 0;
  display: flex;
  align-items: center;
}
.brand-mark svg { width: 100%; height: 100%; }

.brand-text {
  display: flex;
  flex-direction: column;
  gap: 3px;
}
.brand-text .name {
  font-family: var(--serif);
  font-weight: 400 !important;
  font-size: 19px;
  letter-spacing: 0.16em;
  color: var(--ink);
  display: block;
  line-height: 1;
  transition: color 0.15s ease;
}
.site-header.dark .brand-text .name { color: var(--d-text); }

/* Signal that the name/logo lockup is a link back home. */
.brand:hover .brand-text .name {
  color: var(--accent);
  text-decoration: underline;
  text-underline-offset: 4px;
}
.site-header.dark .brand:hover .brand-text .name { color: var(--d-accent); }
.brand-text .tag {
  /* Kept at >= 50% of .brand-text .name's 19px per TREC Rule 535.155
     (broker name must be at least half the size of the largest agent name). */
  font-size: 10px;
  color: var(--muted-2);
  letter-spacing: 0.22em;
  text-transform: uppercase;
  line-height: 1;
}
.site-header.dark .brand-text .tag { color: var(--d-muted); }

.main-nav {
  display: flex;
  align-items: center;
  gap: 32px;
}

.main-nav a, .main-nav span.current {
  color: var(--body);
  font-family: var(--sans);
  font-size: 13px;
  font-weight: 400;
  letter-spacing: 0.06em;
  text-transform: uppercase;
  white-space: nowrap;
  display: inline-flex;
  align-items: center;
  gap: 7px;
}
.site-header.dark .main-nav a, .site-header.dark .main-nav span.current { color: var(--d-body); }
.main-nav a:hover { color: var(--accent); text-decoration: none; }
.site-header.dark .main-nav a:hover { color: var(--d-accent); }

.main-nav a.hub, .main-nav span.current.hub {
  color: var(--accent);
  font-weight: 600;
}
.site-header.dark .main-nav a.hub, .site-header.dark .main-nav span.current.hub { color: var(--d-accent); }
.main-nav .hub-glyph { width: 12px; height: 9px; flex: none; }
.main-nav .hub-glyph svg { width: 100%; height: 100%; display: block; }

.main-nav span.current {
  border-bottom: 2px solid var(--accent);
  padding-bottom: 3px;
  color: var(--ink);
}
.site-header.dark .main-nav span.current { border-bottom-color: var(--d-accent); color: var(--d-text); }

.nav-divider {
  width: 1px;
  height: 20px;
  background: var(--line-strong);
}
.site-header.dark .nav-divider { background: var(--d-line-2); }

.nav-phone {
  font-family: var(--sans);
  font-size: 13px;
  font-weight: 600;
  letter-spacing: 0.04em;
  color: var(--ink) !important;
  text-transform: none !important;
}
.site-header.dark .nav-phone { color: var(--d-text) !important; }

.nav-toggle {
  display: none;
  background: none;
  border: 1px solid var(--line-strong);
  color: var(--ink);
  font-size: 1.4rem;
  padding: 4px 10px;
  cursor: pointer;
}
.site-header.dark .nav-toggle { color: var(--d-text); border-color: var(--d-line-2); }

@media (max-width: 980px) {
  .nav-toggle { display: block; }
  .main-nav {
    display: none;
    position: absolute;
    top: 100%;
    left: 0;
    right: 0;
    background: var(--paper);
    flex-direction: column;
    align-items: flex-start;
    gap: 4px;
    padding: 8px 24px 20px;
    border-bottom: 1px solid var(--line);
  }
  .site-header.dark .main-nav { background: var(--d-ground); border-bottom-color: var(--d-line); }
  .main-nav.open { display: flex; }
  .main-nav a, .main-nav span.current { padding: 10px 0; border-bottom: none !important; }
  .nav-divider { display: none; }
}

/* ---------- Buttons ---------- */
.btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 8px;
  height: 56px;
  padding: 0 32px;
  font-family: var(--sans);
  font-weight: 700;
  font-size: 12.5px;
  letter-spacing: 0.10em;
  text-transform: uppercase;
  cursor: pointer;
  border: 1px solid transparent;
  border-radius: 0;
  transition: opacity 0.15s ease;
}
.btn:hover { opacity: 0.86; text-decoration: none; }

.btn-gold, .btn-navy, .btn-red {
  background: var(--accent);
  color: #FFFFFF;
}
.dark-page .btn-gold, .dark-page .btn-navy, .dark-page .btn-red,
.section-navy .btn-gold, .section-navy .btn-navy, .section-navy .btn-red {
  background: var(--d-accent);
  color: #0E2033;
}

.btn-outline {
  background: transparent;
  color: var(--ink);
  border-color: var(--line-strong);
  height: 52px;
}
.dark-page .btn-outline, .section-navy .btn-outline { color: #fff; border-color: rgba(255,255,255,0.34); }

/* Light button meant to sit on a dark card/section — inverse of btn-navy */
.btn-invert { background: var(--paper); color: var(--ink); }

.btn-sm { height: 44px; padding: 0 20px; font-size: 11.5px; }

/* ---------- Sections ---------- */
section { padding: 64px 0; }
.section-alt { background: var(--paper); }
.section-navy { background: var(--d-ground); color: var(--d-body); }
.section-navy h2, .section-navy h3 { color: var(--d-text); }
.section-navy p { color: var(--d-body); }

.section-head { max-width: 640px; margin: 0 auto 40px; text-align: center; }
.section-head p { color: var(--muted); }

/* ---------- Cards / grids ---------- */
.grid { display: grid; gap: 26px; }
.grid-3 { grid-template-columns: repeat(3, 1fr); }
.grid-2 { grid-template-columns: repeat(2, 1fr); }
.grid-4 { grid-template-columns: repeat(4, 1fr); }
@media (max-width: 900px) {
  .grid-3, .grid-4 { grid-template-columns: repeat(2, 1fr); }
}
@media (max-width: 620px) {
  .grid-2, .grid-3, .grid-4 { grid-template-columns: 1fr; }
}

.card {
  background: var(--paper);
  border: 1px solid var(--line);
  border-radius: 0;
  padding: 26px;
  box-shadow: none;
}
.dark-page .card, .section-navy .card { background: var(--d-panel); border-color: var(--d-line); }
.card h3 { margin-bottom: 8px; }
.card p { color: var(--body-2); }
.dark-page .card p, .section-navy .card p { color: var(--d-body); }
.card .icon {
  width: 40px;
  height: 40px;
  border-radius: 0;
  background: var(--tint);
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 1.1rem;
  margin-bottom: 14px;
}

/* ---------- Quick-link tiles (Home, below headshot) ----------
   Four clickable cards: Buying / Selling / First-Time Buyers / Military.
   All four run dark/navy to stand out above the fold, with large display
   type so they read at a glance without scrolling. */
.quick-links { gap: 20px; }
.quick-links .card {
  background: var(--d-panel);
  border-color: var(--d-panel);
  padding: 34px 24px 30px;
  display: flex;
  flex-direction: column;
  align-items: center;
  text-align: center;
  min-height: 168px;
}
.quick-link-tile {
  display: flex;
  text-decoration: none;
  color: inherit;
  transition: border-color 0.15s ease, background 0.15s ease;
}
.quick-link-tile:hover {
  text-decoration: none;
  border-color: var(--d-accent);
  background: var(--d-panel-2);
}
.quick-link-tile h3 {
  font-family: var(--serif);
  font-weight: 400 !important;
  font-size: 25px;
  line-height: 1.18;
  color: var(--d-text);
  margin: 0 0 14px;
  text-wrap: balance;
}
.quick-link-tile .tile-cta { margin-top: auto; }

/* First three tiles — oversized display type that fills most of the box */
.tile-fill-text {
  justify-content: center;
}
.tile-fill-text h3 {
  font-size: 40px;
  line-height: 1.08;
  margin-bottom: 22px;
}

/* Buying/Selling tile icons — a circle-badged outline graphic above the
   headline, same visual language as the Military tile's branch-icon badges
   (a stroke circle around a simple glyph), sized up since each tile only
   carries one icon instead of a grid of six. */
.tile-icon { display: block; margin-bottom: 14px; }
.tile-icon svg { width: 52px; height: 52px; color: var(--d-accent); }
@media (max-width: 900px) {
  .tile-fill-text h3 { font-size: 34px; }
}

.tile-cta {
  display: inline-block;
  font-size: 13.5px;
  letter-spacing: 0.1em;
  text-transform: uppercase;
  font-weight: 700;
  color: var(--d-accent);
}

.branch-kicker {
  font-size: 23px;
  letter-spacing: 0.16em;
  text-transform: uppercase;
  font-weight: 700;
  color: var(--d-accent);
  margin-bottom: 16px;
}

.branch-icons {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 14px 10px;
  margin-bottom: 16px;
}
.branch-icon {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 5px;
}
.branch-icon svg { width: 30px; height: 30px; color: var(--d-accent); }
.branch-label {
  font-size: 8px;
  letter-spacing: 0.06em;
  text-transform: uppercase;
  color: var(--d-muted);
  text-align: center;
  line-height: 1.2;
}

.scroll-hint {
  text-align: center;
  margin: 26px 0 0;
  font-size: 11px;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  color: var(--muted);
}
.dark-page .scroll-hint { color: var(--d-muted); }
@media (max-width: 900px) {
  .quick-links .card { min-height: 0; }
}

/* Extra breathing room between the Military hero and the next section, so
   "Communities by Duty Station" starts below the fold and the scroll hint
   does the work of pulling the visitor down instead of a hard cut. Uses
   viewport-height units so the gap scales with the screen instead of a
   fixed pixel value that only works on one size. */
.scroll-nudge {
  padding: 10vh 0 26vh;
}
.scroll-nudge .scroll-hint { margin: 0; }
@media (max-width: 640px) {
  .scroll-nudge { padding: 6vh 0 14vh; }
}

.tag-pill {
  display: inline-block;
  font-size: 10.5px;
  font-weight: 700;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  padding: 4px 10px;
  border-radius: 0;
  background: var(--tint);
  color: var(--ink);
  margin-right: 6px;
  margin-bottom: 8px;
}
.tag-pill.gold { background: var(--accent); color: #fff; }
.tag-pill.red { background: var(--alert); color: var(--white); }

/* ---------- Page tabs (file-folder style) ---------- */
.page-tabs {
  display: flex;
  gap: 0;
  flex-wrap: wrap;
  border-bottom: 2px solid var(--line);
  margin-bottom: 44px;
}
.tab-btn {
  appearance: none;
  cursor: pointer;
  background: transparent;
  border: none;
  border-left: 1px solid var(--line);
  border-bottom: 3px solid transparent;
  padding: 20px 30px;
  margin-bottom: -2px;
  font-family: var(--sans);
  font-size: 16px;
  font-weight: 600;
  letter-spacing: 0.03em;
  text-transform: uppercase;
  color: var(--muted);
  transition: color 0.15s, border-color 0.15s, background 0.15s;
}
.tab-btn:first-child { border-left: none; }
.tab-btn:hover { color: var(--ink); background: var(--tint); }
.tab-btn.active {
  color: var(--ink);
  background: var(--tint);
  border-bottom-color: var(--accent);
}
.tab-panel[hidden] { display: none; }
@media (max-width: 620px) {
  .tab-btn {
    flex: 1 1 auto;
    padding: 14px 12px;
    font-size: 13px;
    text-align: center;
  }
}
.subgroup-head {
  margin: 0 0 18px;
  font-size: 1.05rem;
  color: var(--ink);
  display: flex;
  align-items: center;
  gap: 10px;
}
.subgroup-head::before {
  content: "";
  width: 22px;
  height: 3px;
  background: var(--accent);
  flex: none;
}
.subgroup + .subgroup { margin-top: 40px; }

/* dashed placeholder row (still used elsewhere for un-filled "coming soon" spots) */
.placeholder-row {
  display: flex;
  flex-wrap: wrap;
  gap: 10px;
  margin-top: 18px;
}
.placeholder-chip {
  border: 1px dashed var(--line-strong);
  color: var(--muted);
  font-size: 12.5px;
  letter-spacing: 0.03em;
  padding: 9px 16px;
}
.placeholder-row-label {
  font-size: 10.5px;
  letter-spacing: 0.18em;
  text-transform: uppercase;
  color: var(--muted);
  margin: 0 0 12px;
}

/* ---------- Roadmap cards (Education & Resources, top) ----------
   Dark card with a light "Open the Roadmap" button — inverse of a normal
   light card with a dark button, so these two stand out above the fold. */
.roadmap-card { background: var(--d-panel); border-color: var(--d-panel); text-align: center; }
.roadmap-card h3 { color: var(--d-text); }
.roadmap-card p { color: var(--d-body); }
.roadmap-card .tag-pill { background: rgba(255, 255, 255, 0.12); color: var(--d-text); }

/* Five phase chips on one line — shrinks type/padding at narrow widths
   rather than wrapping to a second row. */
.phase-strip {
  display: grid;
  grid-template-columns: repeat(5, 1fr);
  gap: 6px;
  margin: 16px 0;
}
.phase-chip {
  background: rgba(255, 255, 255, 0.08);
  border: 1px solid rgba(255, 255, 255, 0.2);
  color: var(--d-text);
  font-size: 10px;
  line-height: 1.25;
  letter-spacing: 0.02em;
  text-align: center;
  padding: 9px 4px;
}
@media (max-width: 900px) {
  .phase-chip { font-size: 9px; padding: 7px 3px; }
}
@media (max-width: 480px) {
  .phase-strip { gap: 4px; }
  .phase-chip { font-size: 8px; padding: 6px 2px; letter-spacing: 0; }
}

/* ---------- Community stat cards ---------- */
.community-stats {
  margin: 12px 0 0;
  padding: 0;
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 6px 14px;
}
.community-stats div { font-size: 0.86rem; }
.community-stats dt {
  font-size: 0.68rem;
  font-weight: 700;
  letter-spacing: 0.05em;
  text-transform: uppercase;
  color: var(--muted);
  margin: 0;
}
.community-stats dd {
  margin: 1px 0 0;
  color: var(--ink);
  font-weight: 600;
}
.dark-page .community-stats dd { color: var(--d-text); }
.dark-page .community-stats dt { color: var(--d-muted); }

/* Neighborhoods to know — light cards on the dark Military page, per request */
#base-communities-grid .card {
  background: var(--paper);
  border-color: var(--line);
}
#base-communities-grid .card h3 { color: var(--ink); }
#base-communities-grid .card p { color: var(--body-2); }
#base-communities-grid .community-stats dt { color: var(--muted); }
#base-communities-grid .community-stats dd { color: var(--ink); }

/* ---------- Orders selector (military page) ---------- */
.orders-selector {
  border: 1px solid var(--d-line-2);
  background: var(--d-panel);
  padding: 28px;
}
.orders-selector .os-label {
  font-size: 10.5px;
  letter-spacing: 0.22em;
  text-transform: uppercase;
  color: var(--d-accent);
  margin-bottom: 10px;
}
.orders-selector h3 { color: var(--d-text); margin-bottom: 20px; }
.os-cards { display: grid; gap: 10px; margin-bottom: 24px; }
.os-card {
  display: flex;
  align-items: center;
  gap: 14px;
  border: 1px solid #CFD8DF;
  background: transparent;
  padding: 16px 18px;
  cursor: pointer;
  text-align: left;
  font-family: var(--sans);
  width: 100%;
}
.os-card .os-chevron { width: 14px; height: 10px; flex: none; }
.os-card .os-chevron svg { stroke: #9AA8B4; width: 100%; height: 100%; display: block; }
.os-card .os-copy strong { display: block; color: var(--d-text); font-size: 14.5px; font-weight: 600; }
.os-card .os-copy span { display: block; color: var(--d-muted); font-size: 12.5px; margin-top: 2px; }
.os-card .os-selected {
  margin-left: auto;
  font-size: 10px;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  color: var(--d-accent);
  display: none;
}
.os-card.selected {
  border-color: var(--accent);
  background: #FFFFFF;
}
.os-card.selected .os-chevron svg { stroke: var(--accent); }
.os-card.selected .os-copy strong { color: var(--ink); }
.os-card.selected .os-copy span { color: var(--body); }
.os-card.selected .os-selected { display: block; }

.os-result h4 { color: var(--d-text); font-family: var(--serif); font-weight: 400 !important; font-size: 20px; margin-bottom: 10px; }
.os-result p { color: var(--d-body); font-size: 14.5px; margin-bottom: 18px; }
.os-phases { list-style: none; margin: 0 0 22px; padding: 0; display: grid; gap: 8px; }
.os-phases li {
  display: flex; align-items: baseline; gap: 12px;
  font-size: 13.5px; color: var(--d-body);
  border-bottom: 1px solid var(--d-line); padding-bottom: 8px;
}
.os-phases li .os-n { font-family: var(--serif); font-weight: 400 !important; color: var(--d-accent); font-size: 15px; }
.os-phases li .os-name { color: var(--d-text); font-weight: 600; flex: 1; }
.os-phases li .os-dur { color: var(--d-muted); font-size: 11px; letter-spacing: 0.06em; text-transform: uppercase; }

/* ---------- PCS guide band ---------- */
.pcs-band {
  background: var(--d-panel-2);
  border-top: 1px solid var(--d-accent);
  padding: 28px 0;
}
.pcs-band .container { display: flex; align-items: center; justify-content: space-between; gap: 24px; flex-wrap: wrap; }
.pcs-band-left { display: flex; align-items: center; gap: 20px; }
.pcs-band-label { font-size: 10.5px; letter-spacing: 0.2em; text-transform: uppercase; color: var(--d-accent); margin-bottom: 6px; }
.pcs-band-line { color: var(--d-text); font-size: 15.5px; max-width: 46ch; }
.pcs-band-right { display: flex; align-items: center; gap: 20px; flex-wrap: wrap; }
.pcs-band-installs { font-size: 11px; letter-spacing: 0.1em; text-transform: uppercase; color: var(--d-muted); }

/* ---------- PCS Guide box (military hero, under Call or Text) ---------- */
.hero-pcs-box {
  display: block;
  margin-top: 22px;
  padding: 16px 22px;
  background: var(--d-panel-2);
  border-left: 3px solid var(--d-accent);
  text-decoration: none;
  color: inherit;
  max-width: 420px;
  transition: background 0.15s ease;
}
.hero-pcs-box:hover { text-decoration: none; background: var(--d-panel); }
.hero-pcs-label {
  display: block;
  font-size: 10px;
  letter-spacing: 0.18em;
  text-transform: uppercase;
  color: var(--d-accent);
  margin-bottom: 5px;
}
.hero-pcs-text {
  display: block;
  font-family: var(--serif);
  font-weight: 400 !important;
  font-size: 17px;
  color: var(--d-text);
  margin-bottom: 8px;
}
.hero-pcs-cta {
  display: block;
  font-size: 12px;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  font-weight: 600;
  color: var(--d-accent);
}

/* ---------- Name card ---------- */
.name-card {
  display: inline-flex;
  flex-direction: row;
  align-items: center;
  gap: 16px;
  background: var(--d-panel);
  border-left: 3px solid var(--d-accent);
  padding: 16px 26px;
  color: var(--d-text);
  white-space: nowrap;
}
.name-card .nc-mark { width: 28px; height: 20px; flex: none; }
.name-card .nc-text { display: flex; flex-direction: column; gap: 4px; }
.name-card .nc-name { font-family: var(--serif); font-weight: 400 !important; font-size: 16px; color: #fff; line-height: 1; }
.name-card .nc-role { font-size: 10px; letter-spacing: 0.14em; text-transform: uppercase; color: var(--d-muted); line-height: 1; }
.name-card .nc-link {
  display: block;
  font-size: 12px;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  color: var(--d-accent);
  font-weight: 600;
  margin-top: 2px;
}
.name-card:hover { text-decoration: none; opacity: 0.9; }
@media (max-width: 480px) {
  .name-card { white-space: normal; }
}

/* ---------- Doorway band ---------- */
.doorway-band {
  display: block;
  background: var(--d-panel);
  padding: 22px 0;
}
.doorway-band .container { display: flex; align-items: center; gap: 18px; }
.doorway-band .db-mark { width: 30px; height: 21px; flex: none; }
.doorway-band .db-text { color: var(--d-body); font-size: 15.5px; }
.doorway-band .db-dest { color: var(--d-accent); font-weight: 600; letter-spacing: 0.05em; text-transform: uppercase; font-size: 13px; margin-left: auto; }
.doorway-band:hover { text-decoration: none; }
.doorway-band:hover .db-dest { text-decoration: underline; }

/* ---------- Listing of the week ---------- */
.listing-feature {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 0;
  background: var(--paper);
  border-radius: 0;
  overflow: hidden;
  box-shadow: none;
  border: 1px solid var(--line);
}
@media (max-width: 800px) { .listing-feature { grid-template-columns: 1fr; } }
.listing-feature .photo {
  background: var(--tint);
  min-height: 320px;
  display: flex;
  align-items: center;
  justify-content: center;
  color: var(--muted);
  font-size: 0.95rem;
  text-align: center;
  padding: 20px;
}
.listing-feature .info { padding: 32px; }
.listing-price { font-family: var(--serif); font-weight: 400; font-size: 1.9rem; color: var(--ink); margin-bottom: 4px; }
.listing-specs { display: flex; gap: 18px; margin: 14px 0; color: var(--muted); font-size: 0.92rem; flex-wrap: wrap; }
.listing-specs strong { color: var(--ink); }

.listing-card {
  background: var(--paper);
  border: 1px solid var(--line);
  border-radius: 0;
  overflow: hidden;
  box-shadow: none;
}
.listing-card .photo {
  background: var(--tint);
  height: 180px;
  display: flex;
  align-items: center;
  justify-content: center;
  color: var(--muted);
  font-size: 0.85rem;
  text-align: center;
  padding: 10px;
}
.listing-card .info { padding: 18px 20px; }

/* ---------- Testimonials ---------- */
.testimonial {
  background: var(--paper);
  border-left: 3px solid var(--accent);
  border-radius: 0;
  padding: 24px;
  box-shadow: none;
}
.dark-page .testimonial, .section-navy .testimonial { background: var(--d-panel); }
.stars { color: var(--accent); letter-spacing: 2px; margin-bottom: 10px; font-size: 1.05rem; }
.dark-page .stars, .section-navy .stars { color: var(--d-accent); }
.testimonial .who { margin-top: 14px; font-weight: 700; color: var(--ink); font-size: 0.9rem; }
.dark-page .testimonial .who, .section-navy .testimonial .who { color: var(--d-text); }
.testimonial .who span { font-weight: 400; color: var(--muted); }

.review-platforms { display: flex; gap: 14px; flex-wrap: wrap; justify-content: center; margin-top: 10px; }
.platform-btn {
  background: var(--paper);
  border: 1px solid var(--line);
  border-radius: 0;
  padding: 16px 22px;
  text-align: center;
  min-width: 140px;
  box-shadow: none;
  font-weight: 700;
  color: var(--ink);
}
.platform-btn:hover { border-color: var(--accent); color: var(--accent); text-decoration: none; }
.platform-btn .pname { display: block; font-size: 1rem; margin-top: 6px; }

/* ---------- Forms ---------- */
form { display: grid; gap: 16px; }
label { font-weight: 700; font-size: 0.88rem; color: var(--ink); display: block; margin-bottom: 6px; }
input[type="text"], input[type="email"], input[type="tel"], select, textarea {
  width: 100%;
  padding: 12px 14px;
  border: 1px solid var(--line-strong);
  border-radius: 0;
  font-size: 0.95rem;
  font-family: inherit;
  background: var(--paper);
  color: var(--ink);
}
textarea { resize: vertical; min-height: 110px; }
input:focus, select:focus, textarea:focus { outline: 2px solid var(--accent); border-color: var(--accent); }

.form-row-2 { display: grid; grid-template-columns: 1fr 1fr; gap: 16px; }
@media (max-width: 600px) { .form-row-2 { grid-template-columns: 1fr; } }

.star-rating { display: flex; gap: 6px; font-size: 1.6rem; flex-direction: row-reverse; justify-content: flex-end; }
.star-rating input { display: none; }
.star-rating label { cursor: pointer; color: #CFD8DF; margin: 0; font-size: 1.6rem; transition: color 0.1s ease; }
.star-rating input:checked ~ label,
.star-rating label:hover,
.star-rating label:hover ~ label { color: var(--accent); }

.form-note {
  font-size: 0.82rem;
  color: var(--muted);
  background: var(--tint);
  border-radius: 0;
  padding: 10px 14px;
}
/* Military page — the two notes directly above/below the community boxes,
   recolored to match the ink color used inside those boxes. */
.duty-note { color: var(--ink); }

/* ---------- Neighborhood picker (Neighborhoods Map page) ---------- */
.neighborhood-picker {
  display: grid;
  grid-template-columns: minmax(0, 360px) 1fr;
  gap: 24px;
  align-items: start;
  margin-bottom: 14px;
}
/* Compact the Neighborhoods page so the map clears the fold. */
.neighborhoods-page .page-header { padding: 28px 0; }
.neighborhoods-page .page-header h1 { font-size: 40px; }
.neighborhoods-page section { padding: 26px 0 48px; }
.neighborhoods-page .community-overview { padding: 16px 20px; }
/* Compact the top of the Education page so the first row of tab cards clears the fold. */
.education-page .page-header { padding: 26px 0; }
.education-page .edu-top-section { padding: 24px 0 64px; }
.education-page .page-tabs { margin-bottom: 26px; }
.education-page .tab-btn { padding: 14px 28px; }

/* Compact the Home hero + quick-link tiles so all four boxes clear the fold. */
.home-page .hero { padding: 32px 0 24px; }
.home-page .hero-photo { max-width: 340px; }
.home-page .hero-pcs-box { margin-top: 12px; padding: 12px 18px; max-width: 380px; }

/* Widen the hero's text column and push the headshot flush right so its
   right edge lines up with the fourth quick-link box's right edge below it
   (both sit in the same .container). The extra width lets the H1 fit on one
   line at a slightly reduced size. */
.home-page .hero-grid { grid-template-columns: 1.35fr 0.65fr; }
.home-page .hero-photo { margin: 0 0 0 auto; }
.home-page .hero h1 { font-size: 56px; white-space: nowrap; margin-bottom: 18px; }
.home-page .hero .lede { max-width: 58ch; }
@media (max-width: 900px) {
  .home-page .hero h1 { white-space: normal; }
}

/* Reviews page — the "Leave a review" platform links are moved up ahead of
   the testimonials (see reviews.html) and compacted so they clear the fold. */
.reviews-page .page-header { padding: 24px 0; }
.reviews-page .review-cta-section { padding: 26px 0 22px; }
.reviews-page .review-cta-section p { margin: 0 auto 10px; }
.reviews-page .platform-btn { padding: 12px 20px; min-width: 120px; }
.reviews-page .testimonials-section { padding: 22px 0 40px; }
.reviews-page .testimonials-section .section-head { margin-bottom: 18px; }
.reviews-page .testimonial { padding: 18px; }
.reviews-page .testimonial .who { margin-top: 8px; }
.reviews-page .stars { margin-bottom: 6px; }
.home-page .hero-pcs-text { font-size: 15px; margin-bottom: 4px; }
/* The tiles + hint sit right at the fold; pushing extra bottom padding onto
   this section (rather than shrinking anything above) keeps all four tiles
   visible while moving the Live Rate Snapshot section fully below the fold,
   so it only appears once the visitor scrolls. Viewport units scale the gap
   with screen height, same technique used for .scroll-nudge elsewhere. */
.home-page .quick-links-section { padding: 24px 0 16vh; }
.home-page .scroll-hint { margin-top: 34px; }
.home-page .quick-links .card { min-height: 130px; padding: 24px 20px 20px; }
@media (max-width: 640px) {
  .home-page .quick-links-section { padding-bottom: 8vh; }
}
@media (max-width: 800px) {
  .neighborhood-picker { grid-template-columns: 1fr; }
}
.community-overview {
  background: var(--paper);
  border: 1px solid var(--line);
  padding: 22px 26px;
}
.community-overview .co-placeholder { margin: 0; color: var(--muted); font-size: 0.9rem; }
.community-overview h3 { margin-bottom: 4px; }
.community-overview .co-blurb { color: var(--body-2); font-size: 0.92rem; margin-bottom: 14px; }

/* The "Showing N ... near ..." result count used to sit inside the narrow
   360px controls column next to the dropdown, where it wrapped onto 2-3
   lines and pushed the map down. It now lives on its own line spanning the
   full container width (see neighborhoods.html) and is forced to a single
   line, which is both cleaner to read and shorter vertically. */
.map-result-count {
  color: var(--gray);
  font-size: 0.88rem;
  margin: 8px 0 14px;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}
@media (max-width: 640px) {
  .map-result-count { white-space: normal; }
}

/* ---------- Map ---------- */
#map {
  height: 560px;
  border-radius: 0;
  border: 1px solid var(--line-strong);
  box-shadow: none;
}
/* On the Neighborhoods page, size the map to whatever viewport height is left
   after the header/intro/controls so the whole map is visible without
   scrolling, with a sensible floor on short screens. Now that the result
   count is a single line instead of wrapping, there's a bit more room, so
   the map can sit slightly taller/higher without falling below the fold. */
.neighborhoods-page #map { height: clamp(360px, calc(100vh - 300px), 640px); }
.map-legend { display: flex; gap: 16px; flex-wrap: wrap; margin-top: 16px; font-size: 0.85rem; color: var(--muted); }
.map-legend span { display: flex; align-items: center; gap: 6px; }
.dot { width: 10px; height: 10px; border-radius: 50%; display: inline-block; }

/* ---------- Resource accordion ---------- */
.accordion-item {
  background: var(--paper);
  border: 1px solid var(--line);
  border-radius: 0;
  margin-bottom: 12px;
  overflow: hidden;
}
.accordion-item summary {
  padding: 18px 22px;
  cursor: pointer;
  font-weight: 700;
  color: var(--ink);
  list-style: none;
  display: flex;
  justify-content: space-between;
  align-items: center;
}
.accordion-item summary::-webkit-details-marker { display: none; }
.accordion-item summary::after { content: "+"; color: var(--accent); font-size: 1.4rem; font-weight: 400; }
.accordion-item[open] summary::after { content: "\2212"; }
.accordion-body { padding: 0 22px 20px; color: var(--muted); }
.accordion-body p { color: var(--body-2); }
.accordion-body strong { color: var(--ink); }
.accordion-note { font-size: 0.85rem; }
.accordion-link {
  display: inline-block;
  margin-top: 4px;
  font-size: 12px;
  letter-spacing: 0.06em;
  text-transform: uppercase;
  font-weight: 600;
  color: var(--accent);
}

.bah-table {
  width: 100%;
  border-collapse: collapse;
  margin: 4px 0 16px;
  font-size: 0.88rem;
}
.bah-table th, .bah-table td {
  border: 1px solid var(--line);
  padding: 8px 12px;
  text-align: left;
}
.bah-table thead th {
  background: var(--tint);
  font-size: 11px;
  letter-spacing: 0.06em;
  text-transform: uppercase;
  color: var(--muted-2);
  font-weight: 700;
}
.bah-table td:first-child { font-weight: 700; color: var(--ink); }
.bah-table td { color: var(--body-2); }

/* ---------- Homepage Live Rate Snapshot + Market Snapshot, side by side ---------- */
/* Same flat gray as the body background behind the hero headshot (--ground),
   instead of the white .section-alt sections around it — this section is
   meant to read as a distinct "data" panel. The rate table and the market
   stat cells both set their own white (--paper) background already, so they
   stay white/"card-like" against this gray without any extra rules here.
   Existing text color tokens (--ink/--muted/--muted-2) already get used on
   this same gray elsewhere on the site (the hero itself, the community
   fact-sheet "util" boxes), so no color changes were needed alongside it. */
.snapshot-section { background: var(--ground); }
.snapshot-grid { gap: 56px; align-items: start; }
.snapshot-col h2 { font-size: 1.5rem; }
.snapshot-intro { max-width: 40ch; margin: 0 auto; }
/* Each column needs roughly 420-480px to avoid feeling cramped (the rate
   table and the stat grid both have natural minimum widths), so stack to
   one column earlier than the generic .grid-2 breakpoint (620px) would —
   below ~960px there isn't room for both side by side without squeezing. */
@media (max-width: 960px) {
  .snapshot-grid { grid-template-columns: 1fr; gap: 40px; }
}

/* ---------- Rate table (homepage live snapshot) ---------- */
.rate-table-wrap { max-width: 480px; margin: 24px auto 0; text-align: left; }
.rate-table { width: 100%; border-collapse: collapse; font-size: 0.92rem; background: var(--paper); }
.rate-table th, .rate-table td { border: 1px solid var(--line); padding: 11px 14px; text-align: left; }
.rate-table thead th {
  background: var(--tint);
  font-size: 11px;
  letter-spacing: 0.06em;
  text-transform: uppercase;
  color: var(--muted-2);
  font-weight: 700;
}
.rate-table td:first-child { font-weight: 600; color: var(--ink); }
.rate-table td.rate-value { font-family: var(--serif); font-size: 1.15rem; color: var(--accent); font-weight: 400; }
.rate-table td.rate-value-note { font-family: var(--sans); font-size: 0.82rem; color: var(--muted); font-style: italic; }
.rate-status { margin: 12px 0 0; font-size: 12.5px; color: var(--muted); text-align: center; }
.rate-status-error { color: var(--alert); }
.rate-note { margin: 8px 0 0; font-size: 12px; color: var(--muted); text-align: center; }

/* ---------- Market Snapshot (homepage) ---------- */
.market-tabs {
  display: inline-flex;
  border: 1px solid var(--line);
  margin: 18px 0 4px;
}
.market-tab-btn {
  appearance: none;
  cursor: pointer;
  background: transparent;
  border: none;
  border-left: 1px solid var(--line);
  padding: 9px 16px;
  font-family: var(--sans);
  font-size: 11.5px;
  font-weight: 600;
  letter-spacing: 0.04em;
  text-transform: uppercase;
  color: var(--muted);
  transition: color 0.15s, background 0.15s;
}
.market-tab-btn:first-child { border-left: none; }
.market-tab-btn:hover { color: var(--ink); background: var(--tint); }
.market-tab-btn.active { color: var(--white); background: var(--accent); }
.market-range-label { margin: 12px 0 14px; font-size: 12px; color: var(--muted); text-align: center; }
/* Two columns (not three) so this grid sits comfortably in a half-width
   column when shown side by side with the rate table. */
.market-stats-grid {
  display: grid;
  grid-template-columns: repeat(2, 1fr);
  gap: 1px;
  background: var(--line);
  border: 1px solid var(--line);
  max-width: 420px;
  margin: 0 auto;
}
.market-stat { background: var(--paper); padding: 16px 12px; text-align: center; }
.market-stat .msv { font-family: var(--serif); font-size: 1.4rem; color: var(--accent); line-height: 1; margin-bottom: 5px; }
.market-stat .msl { font-size: 10px; letter-spacing: 0.05em; text-transform: uppercase; color: var(--muted); }
.market-note { margin: 14px auto 0; max-width: 46ch; font-size: 11.5px; color: var(--muted); text-align: center; }

/* ---------- CTA band ---------- */
.cta-band { background: var(--d-panel); color: var(--d-text); text-align: center; padding: 54px 0; }
.cta-band h2 { color: var(--d-text); }
.cta-band p { color: var(--d-body); }
.cta-band .eyebrow { justify-content: center; color: var(--d-accent); }
.cta-band .eyebrow::before { background: var(--d-accent); }

/* ---------- Military feature band (Home page, bottom) ---------- */
.cta-military {
  padding: 84px 0;
  border-top: 1px solid var(--d-line);
}
.cta-military h2 { font-size: 38px; max-width: 20ch; margin-left: auto; margin-right: auto; }
.cta-military p { max-width: 62ch; margin: 0 auto 32px; font-size: 17px; line-height: 1.7; }
.cta-military-link { color: var(--d-link); }

/* ---------- Footer strip ---------- */
.site-footer {
  background: var(--tint-3);
  color: var(--muted-2);
  padding: 0;
}
.site-footer.dark, .dark-page .site-footer { background: var(--d-footer); color: var(--d-muted); }
.footer-strip {
  min-height: 46px;
  display: flex;
  align-items: center;
  gap: 24px;
  flex-wrap: wrap;
  padding: 12px 0;
  font-size: 10px;
  letter-spacing: 0.18em;
  text-transform: uppercase;
}
.footer-strip .fs-push { margin-left: auto; }
.footer-strip a { color: inherit; }
/* Required TREC homepage links: IABS + Consumer Protection Notice.
   Font-size is set well above the 10-point statutory minimum. */
.footer-compliance {
  display: flex;
  flex-wrap: wrap;
  gap: 8px 28px;
  padding: 12px 0;
  border-top: 1px solid var(--line);
}
.footer-compliance a {
  font-size: 14px;
  line-height: 1.4;
  color: var(--muted);
  text-decoration: underline;
}
.footer-compliance a:hover { color: var(--accent); }
.dark-page .footer-compliance, .site-footer.dark .footer-compliance { border-top-color: rgba(255,255,255,0.15); }
.dark-page .footer-compliance a, .site-footer.dark .footer-compliance a { color: var(--d-muted-2); }
.dark-page .footer-compliance a:hover, .site-footer.dark .footer-compliance a:hover { color: var(--d-accent); }
/* Social links, shown site-wide in the footer so they're not buried on the
   Contact page alone. Only add a platform here once you have its real,
   confirmed profile URL — a dead "#" icon repeated on every page is worse
   than just not showing that platform yet. */
.footer-social {
  display: flex;
  gap: 10px;
  padding: 14px 0 0;
  border-top: 1px solid var(--line);
}
.dark-page .footer-social, .site-footer.dark .footer-social { border-top-color: rgba(255,255,255,0.15); }
.footer-legal {
  padding: 14px 0 26px;
  font-size: 11.5px;
  letter-spacing: 0;
  text-transform: none;
  color: var(--muted);
  line-height: 1.6;
}
.dark-page .footer-legal, .site-footer.dark .footer-legal { color: var(--d-muted-2); }

/* legacy footer-grid still used on a couple of pages pending full rebuild */
.footer-grid { display: grid; grid-template-columns: 1.4fr 1fr 1fr 1fr; gap: 32px; padding: 48px 0 24px; }
@media (max-width: 800px) { .footer-grid { grid-template-columns: 1fr 1fr; } }
@media (max-width: 500px) { .footer-grid { grid-template-columns: 1fr; } }
.footer-grid h4 { color: var(--ink); font-size: 0.85rem; letter-spacing: 0.06em; text-transform: uppercase; margin-bottom: 14px; }
.footer-grid a { color: var(--muted); display: block; padding: 4px 0; font-size: 0.92rem; }
.footer-grid a:hover { color: var(--accent); }

.social-row { display: flex; gap: 10px; margin-top: 10px; }
.social-icon {
  width: 34px; height: 34px; border-radius: 0;
  border: 1px solid var(--line-strong);
  display: flex; align-items: center; justify-content: center;
  color: var(--muted); font-size: 1rem;
}
.social-icon svg { width: 18px; height: 18px; }
.social-icon:hover { border-color: var(--accent); color: var(--accent); }
.dark-page .social-icon, .site-footer.dark .social-icon { border-color: rgba(255,255,255,0.22); color: var(--d-muted); }
.dark-page .social-icon:hover, .site-footer.dark .social-icon:hover { border-color: var(--d-accent); color: var(--d-accent); }
.footer-social .social-icon { width: 30px; height: 30px; }
.footer-social .social-icon svg { width: 16px; height: 16px; }

.placeholder-flag {
  font-size: 0.7rem;
  color: var(--accent);
  background: var(--tint);
  border: 1px dashed var(--line-strong);
  padding: 1px 6px;
  border-radius: 0;
  margin-left: 6px;
}

/* ---------- Page header (interior pages) ---------- */
.page-header {
  background: var(--d-panel);
  color: var(--d-text);
  padding: 46px 0;
  border-bottom: none;
}
.page-header h1 { color: var(--d-text); margin-bottom: 6px; }
.page-header p { color: var(--d-body); max-width: 65ch; }
/* Broker-name line under a page H1 that leads with Chad's name — keeps the
   brokerage name at least half the H1's size, per TREC Rule 535.155. */
.page-header p.broker-line { font-family: var(--serif); font-size: 28px; font-weight: 400; color: var(--d-text); margin: 0 0 10px; max-width: none; }
/* Wider measure for intro copy that should run fewer, longer lines
   (Neighborhoods map — keeps the map itself higher on the page). */
.page-header p.page-header-wide { max-width: 104ch; }
.breadcrumb { font-size: 0.78rem; color: var(--d-muted); margin-bottom: 10px; letter-spacing: 0.04em; }
.breadcrumb a { color: var(--d-link); }

/* ---------- Community fact sheets (Neighborhoods Map drill-downs) ---------- */
.fact-badge {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  margin-top: 14px;
  padding: 7px 14px;
  border: 1px solid var(--d-line-2);
  font-size: 11px;
  letter-spacing: 0.12em;
  text-transform: uppercase;
  color: var(--d-accent);
  font-weight: 700;
}

.fact-grid {
  display: grid;
  grid-template-columns: 300px 1fr;
  gap: 40px;
  align-items: start;
}
@media (max-width: 860px) {
  .fact-grid { grid-template-columns: 1fr; }
}

/* Sidebar stays in view while the visitor scrolls the longer right column */
.fact-side { position: sticky; top: 94px; }
@media (max-width: 860px) {
  .fact-side { position: static; }
}

/* Shared "card title" treatment — a colored tick mark + rule under a real
   serif heading, used on every fact-sheet section and sidebar card so the
   page reads as a set of distinct, scannable blocks rather than one long
   run of text. */
.fact-side .card-title {
  font-size: 17px;
  padding-bottom: 12px;
  margin-bottom: 16px;
  border-bottom: 2px solid var(--tint-3);
  display: flex;
  align-items: center;
  gap: 10px;
}
.fact-side .card-title::before {
  content: "";
  width: 4px;
  height: 16px;
  background: var(--accent);
  flex: none;
}

.fact-stats { margin-bottom: 18px; padding: 22px 24px; }
.fact-row {
  display: flex;
  justify-content: space-between;
  gap: 16px;
  padding: 10px 0;
  border-bottom: 1px solid var(--line);
  font-size: 0.85rem;
}
.fact-row:last-child { border-bottom: none; padding-bottom: 0; }
.fact-label { color: var(--muted-2); }
.fact-value { color: var(--ink); font-weight: 700; text-align: right; }

.fact-side .btn { width: 100%; margin-bottom: 18px; }

.section-nav { margin-bottom: 18px; padding: 22px 24px; }
.section-nav ul { list-style: none; margin: 0; padding: 0; }
.section-nav li { border-bottom: 1px solid var(--line); }
.section-nav li:last-child { border-bottom: none; }
.section-nav a {
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 9px 0;
  font-size: 0.84rem;
  color: var(--body-2);
}
.section-nav a:hover { color: var(--accent); text-decoration: none; }
.section-nav a::after { content: "\2192"; color: var(--muted-2); }
.section-nav a:hover::after { color: var(--accent); }

.why-card { margin-bottom: 0; padding: 22px 24px; }
.why-card ul { margin: 0; padding-left: 18px; color: var(--body-2); }
.why-card li { margin-bottom: 8px; font-size: 0.9rem; }
.why-card li:last-child { margin-bottom: 0; }

/* Each right-column block is its own bordered card — separates the info
   into distinct, quickly scannable chunks instead of one long scroll. */
.fact-section {
  background: var(--paper);
  border: 1px solid var(--line);
  padding: 28px 30px;
  margin-bottom: 22px;
  scroll-margin-top: 90px;
}
.fact-section:last-child { margin-bottom: 0; }
.fact-section h3 {
  font-size: 19px;
  padding-bottom: 12px;
  margin-bottom: 16px;
  border-bottom: 2px solid var(--tint-3);
  display: flex;
  align-items: center;
  gap: 10px;
}
.fact-section h3::before {
  content: "";
  width: 4px;
  height: 16px;
  background: var(--accent);
  flex: none;
}
.fact-section p { max-width: 66ch; }
.fact-section p:last-child { margin-bottom: 0; }

/* Health & Medical / Getting Around merged into one "Getting Around Town"
   card, side by side, so two short, related facts read as one quick unit
   instead of two nearly-empty stacked cards. */
.info-cols { display: grid; grid-template-columns: repeat(2, 1fr); gap: 0 30px; }
@media (max-width: 620px) { .info-cols { grid-template-columns: 1fr; } }
.info-cols h4 { font-size: 11px; letter-spacing: 0.1em; text-transform: uppercase; color: var(--muted-2); font-family: var(--sans); font-weight: 700 !important; margin-bottom: 6px; }
.info-cols p { margin: 0; max-width: none; }

.school-cols { display: grid; grid-template-columns: repeat(3, 1fr); gap: 20px; margin: 4px 0 0; }
@media (max-width: 620px) { .school-cols { grid-template-columns: 1fr; } }
.school-cols h4 { font-size: 11px; letter-spacing: 0.1em; text-transform: uppercase; color: var(--muted-2); font-family: var(--sans); font-weight: 700 !important; margin-bottom: 6px; }
.school-cols ul { margin: 0; padding-left: 16px; color: var(--body-2); font-size: 0.88rem; }
.school-cols li { margin-bottom: 3px; }

.util-grid { display: grid; grid-template-columns: repeat(4, 1fr); gap: 14px; margin: 0; }
@media (max-width: 620px) { .util-grid { grid-template-columns: repeat(2, 1fr); } }
.util-item { background: var(--ground); padding: 14px 16px; }
.util-item .util-label { display: block; font-size: 10px; letter-spacing: 0.1em; text-transform: uppercase; color: var(--muted-2); margin-bottom: 5px; }
.util-item .util-value { font-size: 0.86rem; color: var(--ink); }

.two-col-list { display: grid; grid-template-columns: repeat(2, 1fr); gap: 0 30px; }
@media (max-width: 620px) { .two-col-list { grid-template-columns: 1fr; } }
.two-col-list h4 { font-size: 11px; letter-spacing: 0.1em; text-transform: uppercase; color: var(--muted-2); font-family: var(--sans); font-weight: 700 !important; margin-bottom: 6px; }
.two-col-list ul { margin: 0; padding-left: 18px; color: var(--body-2); }
.two-col-list li { margin-bottom: 6px; }

.commute-table { width: 100%; border-collapse: collapse; margin: 0; font-size: 0.88rem; }
.commute-table th, .commute-table td { border: 1px solid var(--line); padding: 10px 14px; text-align: left; }
.commute-table thead th { background: var(--tint); font-size: 11px; letter-spacing: 0.06em; text-transform: uppercase; color: var(--muted-2); font-weight: 700; }
.commute-table td:first-child { font-weight: 700; color: var(--ink); }
.commute-table td { color: var(--body-2); }
.commute-table tbody tr:nth-child(even) td { background: var(--ground); }

.builder-note { font-size: 0.9rem; color: var(--body-2); font-style: italic; margin: 0; }

/* ---------- Mortgage Payment Calculator ---------- */
.calc-section { padding-top: 40px; }
.calc-grid { display: grid; grid-template-columns: 400px 1fr; gap: 32px; align-items: start; }
@media (max-width: 900px) { .calc-grid { grid-template-columns: 1fr; } }
.calc-inputs, .calc-results-col { display: grid; gap: 24px; }
.calc-card { background: var(--paper); border: 1px solid var(--line); padding: 24px; }
.calc-card-title { font-family: var(--serif); font-weight: 400; font-size: 1.15rem; margin: 0 0 16px; color: var(--ink); }
.calc-field { margin-bottom: 14px; }
.calc-field:last-child { margin-bottom: 0; }
.calc-row-2 { display: grid; grid-template-columns: 1fr 1fr; gap: 16px; }
@media (max-width: 520px) { .calc-row-2 { grid-template-columns: 1fr; } }
.calc-hint { font-size: 0.78rem; color: var(--muted); margin: 6px 0 0; line-height: 1.5; }
#calc-rate-display[readonly] { background: var(--tint); color: var(--body-2); }
.calc-checkbox-row { display: flex; align-items: flex-start; gap: 8px; }
.calc-checkbox-row input[type="checkbox"] { width: auto; margin-top: 3px; }
.calc-checkbox-row label { margin-bottom: 0; font-weight: 600; }
input#calc-pmi-rate:disabled { background: var(--tint); color: var(--muted); }
.page-header-disclaimer { font-size: 0.82rem; color: var(--d-muted); font-style: italic; margin-top: 10px; max-width: 65ch; }

.calc-empty-state { color: var(--muted); text-align: center; padding: 48px 24px; }

.calc-total-card { text-align: center; }
.calc-total-label { font-size: 0.78rem; font-weight: 700; text-transform: uppercase; letter-spacing: 0.06em; color: var(--muted); }
.calc-total-number { font-family: var(--serif); font-weight: 400; font-size: 2.6rem; color: var(--accent); margin: 6px 0 18px; }

.pay-bar { display: flex; width: 100%; height: 14px; overflow: hidden; border: 1px solid var(--line); margin-bottom: 16px; }
.pay-seg { height: 100%; }
.seg-pi  { background: var(--accent); }
.seg-tax { background: #7C93A8; }
.seg-ins { background: #B7C4CE; }
.seg-mi  { background: var(--alert); }
.seg-hoa { background: var(--muted); }

.pay-list { display: grid; gap: 8px; text-align: left; margin-bottom: 4px; }
.pay-line { display: flex; align-items: center; gap: 10px; font-size: 0.9rem; }
.pay-swatch { width: 12px; height: 12px; flex: 0 0 auto; display: inline-block; }
.pay-swatch.seg-pi  { background: var(--accent); }
.pay-swatch.seg-tax { background: #7C93A8; }
.pay-swatch.seg-ins { background: #B7C4CE; }
.pay-swatch.seg-mi  { background: var(--alert); }
.pay-swatch.seg-hoa { background: var(--muted); }
.pay-line-label { flex: 1; color: var(--body); text-align: left; }
.pay-line-value { font-weight: 700; color: var(--ink); }

.sum-row { display: flex; justify-content: space-between; gap: 12px; padding: 10px 0; border-bottom: 1px solid var(--line); font-size: 0.92rem; }
.sum-row:last-child { border-bottom: none; }
.sum-row span { color: var(--body); }
.sum-row strong { color: var(--ink); }
.sum-row-strong span, .sum-row-strong strong { color: var(--ink); font-weight: 700; font-size: 1.02rem; }

.amort-table-wrap { overflow-x: auto; margin-bottom: 14px; }
.amort-table { width: 100%; border-collapse: collapse; font-size: 0.85rem; }
.amort-table th, .amort-table td { padding: 8px 10px; text-align: right; border-bottom: 1px solid var(--line); white-space: nowrap; }
.amort-table th:first-child, .amort-table td:first-child { text-align: left; }
.amort-table thead th { font-size: 0.7rem; text-transform: uppercase; letter-spacing: 0.04em; color: var(--muted); border-bottom: 2px solid var(--line-strong); }
.amort-monthly-wrap { max-height: 420px; overflow-y: auto; margin-top: 14px; border: 1px solid var(--line); }
.amort-monthly-wrap .amort-table thead th { position: sticky; top: 0; background: var(--paper); }

.calc-disclaimer { font-size: 0.78rem; color: var(--muted); margin-top: 4px; line-height: 1.5; }