/* ============================================================
   JDM CAPITAL  -  single file landing page
   Structure: variable-driven base components.
   Each theme below only swaps variables and a few signatures,
   so themes 1 to 10 can look like completely different sites.
   ============================================================ */

/* ---------- Reset and safe fallback palette (light) ---------- */
*, *::before, *::after { box-sizing: border-box; }
html { scroll-behavior: smooth; -webkit-text-size-adjust: 100%; }
body { margin: 0; }
img { max-width: 100%; display: block; }
a { color: inherit; }
button { font: inherit; cursor: pointer; }

:root{
  --maxw: 1140px;
  --font-head: 'Plus Jakarta Sans', system-ui, sans-serif;
  --font-body: 'Inter', system-ui, sans-serif;
  --font-label: var(--font-head);
  --hw: 800;            /* heading weight */
  --htt: none;          /* heading text-transform */
  --hls: -0.02em;       /* heading letter-spacing */
  --hlh: 1.06;          /* heading line-height */
  --bg: #ffffff;
  --bg-alt: #f4f7fb;
  --surface: #ffffff;
  --text: #0f1b2d;
  --muted: #56657c;
  --border: #e4e9f1;
  --accent: #1d4ed8;
  --accent-2: #0ea5e9;
  --on-accent: #ffffff;
  --radius: 16px;
  --btn-r: 10px;
  --shadow: 0 18px 40px -22px rgba(15,27,45,.45);
  --eyebrow: var(--accent);
  --hero-cols: 1.05fr .95fr;
  --sect-pad: 96px;
  --ink-soft: rgba(15,27,45,.06);
}

/* ---------- Base typography ---------- */
body{
  font-family: var(--font-body);
  color: var(--text);
  background: var(--bg);
  line-height: 1.6;
  font-size: 17px;
  -webkit-font-smoothing: antialiased;
  text-rendering: optimizeLegibility;
}
h1,h2,h3,h4{
  font-family: var(--font-head);
  font-weight: var(--hw);
  text-transform: var(--htt);
  letter-spacing: var(--hls);
  line-height: var(--hlh);
  margin: 0 0 .5em;
  color: var(--text);
}
h1{ font-size: clamp(2.3rem, 5.2vw, 3.85rem); }
h2{ font-size: clamp(1.75rem, 3.4vw, 2.6rem); }
h3{ font-size: 1.2rem; }
p{ margin: 0 0 1rem; }
.lead{ font-size: clamp(1.05rem, 1.7vw, 1.28rem); color: var(--muted); }

/* ---------- Layout helpers ---------- */
.wrap{ width: 100%; max-width: var(--maxw); margin: 0 auto; padding: 0 24px; }
section{ padding: var(--sect-pad) 0; }
.section-alt{ background: var(--bg-alt); }
.eyebrow{
  font-family: var(--font-label);
  font-size: .78rem; font-weight: 700; letter-spacing: .16em;
  text-transform: uppercase; color: var(--eyebrow);
  margin: 0 0 14px; display: inline-block;
}
.center{ text-align: center; }
.sec-head{ max-width: 720px; margin: 0 auto 48px; }
.center .sec-head{ margin-left: auto; margin-right: auto; }

/* ---------- Buttons ---------- */
.btn{
  display: inline-flex; align-items: center; justify-content: center; gap: .5em;
  padding: 15px 26px; font-weight: 700; font-size: .98rem;
  border-radius: var(--btn-r); border: 2px solid transparent;
  text-decoration: none; transition: transform .15s ease, box-shadow .15s ease, background .15s ease, color .15s ease;
  line-height: 1;
}
.btn:active{ transform: translateY(1px); }
.btn-primary{ background: var(--accent); color: var(--on-accent); border-color: var(--accent); }
.btn-primary:hover{ transform: translateY(-2px); box-shadow: var(--shadow); }
.btn-outline{ background: transparent; color: var(--text); border-color: var(--border); }
.btn-outline:hover{ border-color: var(--accent); color: var(--accent); }
.btn-lg{ padding: 18px 34px; font-size: 1.05rem; }
.btn-block{ width: 100%; }

/* ---------- Top navigation ---------- */
.nav{ border-bottom: 1px solid var(--border); background: var(--bg); }
.nav-inner{ display: flex; align-items: center; gap: 22px; height: 96px; }
.brand{ display: flex; align-items: center; gap: 11px; font-family: var(--font-head); font-weight: 800; font-size: 1.28rem; letter-spacing: -.01em; text-decoration: none; color: var(--text); }
.brand-logo{ height: 70px; width: auto; display: block; border-radius: 10px; }
.foot .brand-logo{ height: 58px; }
.nav-links{ display: flex; gap: 26px; margin-left: 14px; }
.nav-links a{ text-decoration: none; color: var(--muted); font-weight: 600; font-size: .94rem; }
.nav-links a:hover{ color: var(--accent); }
.nav-cta{ margin-left: auto; display: flex; align-items: center; gap: 16px; }
.nav-phone{ text-decoration: none; color: var(--text); font-weight: 700; font-size: .94rem; white-space: nowrap; }
.nav-phone span{ color: var(--muted); font-weight: 600; }

/* ---------- Hero ---------- */
.hero{ padding-top: 78px; padding-bottom: 84px; background: var(--bg); position: relative; overflow: hidden; }
.hero-inner{ display: grid; grid-template-columns: var(--hero-cols); gap: 56px; align-items: center; }
.hero-copy{ max-width: 620px; }
.hero h1 span.hl{ color: var(--accent); }
.hero h1 .h-accent{ color: var(--accent); }
.hero .lead{ margin-top: 6px; margin-bottom: 30px; }
.hero-actions{ display: flex; flex-wrap: wrap; gap: 14px; margin-bottom: 20px; }
.hero-phone{ font-size: .98rem; color: var(--muted); }
.hero-phone a{ color: var(--text); font-weight: 700; text-decoration: none; }
.chips{ display: flex; flex-wrap: wrap; gap: 10px; margin-top: 28px; }
.chip{
  display: inline-flex; align-items: center; gap: 8px; padding: 9px 15px;
  background: var(--ink-soft); color: var(--text); border-radius: 999px;
  font-size: .85rem; font-weight: 600; border: 1px solid transparent;
}
.chip::before{ content: ""; width: 7px; height: 7px; border-radius: 50%; background: var(--accent); }

/* hero credibility card */
.cred{
  background: var(--surface); border: 1px solid var(--border); border-radius: var(--radius);
  padding: 30px; box-shadow: var(--shadow);
}
.cred h3{ font-size: 1.05rem; margin-bottom: 18px; }
.cred ul{ list-style: none; margin: 0; padding: 0; display: grid; gap: 14px; }
.cred li{ display: flex; align-items: flex-start; gap: 12px; font-weight: 600; font-size: .98rem; }
.cred li b{ color: var(--accent); }
.cred .tick{ flex: none; width: 22px; height: 22px; border-radius: 50%; background: var(--accent); color: var(--on-accent); display: grid; place-items: center; font-size: .7rem; margin-top: 1px; }
.cred .cred-foot{ margin-top: 22px; padding-top: 18px; border-top: 1px dashed var(--border); font-size: .9rem; color: var(--muted); }

/* ---------- Stats strip ---------- */
.stats{ background: var(--bg-alt); border-top: 1px solid var(--border); border-bottom: 1px solid var(--border); }
.stats .wrap{ display: grid; grid-template-columns: repeat(3, 1fr); gap: 24px; }
.stat{ text-align: center; padding: 8px; }
.stat .num{ font-family: var(--font-head); font-weight: var(--hw); font-size: clamp(1.9rem, 3.6vw, 2.9rem); color: var(--accent); line-height: 1; letter-spacing: -.02em; }
.stat .lbl{ margin-top: 8px; font-size: .92rem; color: var(--muted); font-weight: 600; }

/* ---------- Feature cards ---------- */
.grid{ display: grid; grid-template-columns: repeat(3, 1fr); gap: 22px; counter-reset: card; }
.card{
  counter-increment: card; position: relative;
  background: var(--surface); border: 1px solid var(--border); border-radius: var(--radius);
  padding: 30px; transition: transform .18s ease, box-shadow .18s ease;
}
.card:hover{ transform: translateY(-4px); box-shadow: var(--shadow); }
.card .ico{ width: 46px; height: 46px; border-radius: 11px; background: var(--ink-soft); color: var(--accent); display: grid; place-items: center; margin-bottom: 16px; }
.card .ico svg{ width: 24px; height: 24px; }
.card h3{ margin-bottom: 8px; }
.card p{ color: var(--muted); margin: 0; font-size: .97rem; }

/* ---------- Product ---------- */
.product-grid{ display: grid; grid-template-columns: .95fr 1.05fr; gap: 50px; align-items: center; }
.product-card{
  background: var(--surface); border: 1px solid var(--border); border-radius: var(--radius);
  padding: 38px; box-shadow: var(--shadow);
}
.product-card .tag{ display: inline-block; padding: 6px 13px; border-radius: 999px; background: var(--accent); color: var(--on-accent); font-weight: 700; font-size: .78rem; letter-spacing: .04em; text-transform: uppercase; margin-bottom: 16px; }
.feat{ list-style: none; margin: 18px 0 26px; padding: 0; display: grid; gap: 13px; }
.feat li{ display: flex; gap: 12px; align-items: flex-start; font-weight: 600; }
.feat .tick{ flex: none; width: 24px; height: 24px; border-radius: 7px; background: var(--ink-soft); color: var(--accent); display: grid; place-items: center; font-size: .75rem; font-weight: 800; }

/* ---------- Where we lend ---------- */
.areas{ display: flex; flex-wrap: wrap; gap: 12px; margin-top: 26px; }
.area-chip{
  padding: 14px 22px; border: 1px solid var(--border); border-radius: 999px;
  background: var(--surface); font-weight: 700; font-size: .98rem;
}
.area-chip b{ color: var(--accent); }

/* ---------- Process ---------- */
.steps{ display: grid; grid-template-columns: repeat(4, 1fr); gap: 22px; counter-reset: step; }
.step{ position: relative; padding: 30px 26px; background: var(--surface); border: 1px solid var(--border); border-radius: var(--radius); }
.step .step-num{
  counter-increment: step; font-family: var(--font-head); font-weight: var(--hw);
  font-size: 2.2rem; color: var(--accent); line-height: 1; letter-spacing: -.03em;
}
.step .step-num::before{ content: counter(step); }
.step h3{ margin: 14px 0 8px; }
.step p{ color: var(--muted); margin: 0; font-size: .95rem; }

/* ---------- Contact ---------- */
.contact-grid{ display: grid; grid-template-columns: 1.1fr .9fr; gap: 44px; align-items: start; }
.form{ background: var(--surface); border: 1px solid var(--border); border-radius: var(--radius); padding: 34px; box-shadow: var(--shadow); }
.field{ margin-bottom: 16px; }
.field label{ display: block; font-weight: 700; font-size: .86rem; margin-bottom: 7px; }
.field input, .field textarea{
  width: 100%; padding: 13px 15px; font: inherit; color: var(--text);
  background: var(--bg); border: 1px solid var(--border); border-radius: var(--btn-r);
  transition: border-color .15s ease, box-shadow .15s ease;
}
.field input:focus, .field textarea:focus{ outline: none; border-color: var(--accent); box-shadow: 0 0 0 3px color-mix(in srgb, var(--accent) 22%, transparent); }
.field textarea{ min-height: 110px; resize: vertical; }
.form-note{ font-size: .82rem; color: var(--muted); margin-top: 4px; }
.form-success{ background: var(--surface); border: 1px solid var(--accent); border-radius: var(--radius); padding: 34px; box-shadow: var(--shadow); }
.form-success h3{ color: var(--accent); }

.contact-side .panel{ background: var(--accent); color: var(--on-accent); border-radius: var(--radius); padding: 34px; box-shadow: var(--shadow); }
.contact-side .panel h3{ color: var(--on-accent); font-size: 1.35rem; }
.contact-side .panel p{ opacity: .92; }
.contact-side .panel .btn{ margin-top: 8px; }
.contact-side .panel .btn-primary{ background: var(--on-accent); color: var(--accent); border-color: var(--on-accent); }
.contact-side .big-phone{ display: block; margin-top: 18px; font-family: var(--font-head); font-weight: 800; font-size: 1.7rem; letter-spacing: -.02em; color: var(--on-accent); text-decoration: none; }
.contact-side .panel small{ display:block; opacity:.85; margin-top: 6px; }

/* ---------- Footer ---------- */
.foot{ background: var(--text); color: #fff; padding: 56px 0 30px; }
.foot a{ color: #fff; text-decoration: none; }
.foot-top{ display: grid; grid-template-columns: 1.4fr 1fr 1fr; gap: 36px; padding-bottom: 30px; border-bottom: 1px solid rgba(255,255,255,.16); }
.foot .brand{ color: #fff; margin-bottom: 12px; }
.foot p{ opacity: .8; font-size: .94rem; max-width: 38ch; }
.foot h4{ font-size: .8rem; letter-spacing: .14em; text-transform: uppercase; opacity: .7; margin: 0 0 14px; font-family: var(--font-body); font-weight: 700; }
.foot ul{ list-style: none; margin: 0; padding: 0; display: grid; gap: 9px; }
.foot ul a{ opacity: .85; font-size: .95rem; }
.foot ul a:hover{ opacity: 1; }
.foot-bottom{ padding-top: 22px; display: flex; flex-wrap: wrap; gap: 12px 28px; justify-content: space-between; font-size: .82rem; opacity: .7; }
.foot-bottom .disc{ max-width: 70ch; }

/* ---------- Decorative bits toggled by some themes ---------- */
.tape{ display: none; height: 18px; }
.hero-bg{ display: none; }

/* ---------- Responsive ---------- */
@media (max-width: 920px){
  :root{ --sect-pad: 70px; }
  .hero-inner{ grid-template-columns: 1fr; gap: 38px; }
  .product-grid{ grid-template-columns: 1fr; gap: 32px; }
  .contact-grid{ grid-template-columns: 1fr; gap: 30px; }
  .grid{ grid-template-columns: repeat(2, 1fr); }
  .steps{ grid-template-columns: repeat(2, 1fr); }
  .nav-links{ display: none; }
  .foot-top{ grid-template-columns: 1fr 1fr; }
}
@media (max-width: 600px){
  body{ font-size: 16px; }
  .stats .wrap{ grid-template-columns: repeat(2, 1fr); gap: 28px 16px; }
  .grid{ grid-template-columns: 1fr; }
  .steps{ grid-template-columns: 1fr; }
  .foot-top{ grid-template-columns: 1fr; }
  .nav-phone{ display: none; }
  .hero-actions .btn{ flex: 1 1 auto; }
}

/* ============================================================
   THEME BLOCKS
   ============================================================ */
/* ---------- round 2 structural tweaks ---------- */
.hero .eyebrow{ font-size: .86rem; }
.contact-side .panel-email{ display:block; margin-top:10px; color:inherit; text-decoration:none; font-weight:700; opacity:.96; word-break:break-word; }
.contact-side .panel-email:hover{ text-decoration:underline; }

/* ============================================================
   THEME 1  -  ONYX  (dark luxury, serif, brand green)
   ============================================================ */
[data-theme="1"]{
  --font-head:'Playfair Display',Georgia,serif; --font-body:'Inter',system-ui,sans-serif; --font-label:'Inter',sans-serif;
  --hw:700; --htt:none; --hls:0; --hlh:1.08;
  --bg:#0b0d10; --bg-alt:#101317; --surface:#14181d;
  --text:#f2f4ef; --muted:#9aa39a; --border:#272c31;
  --accent:#b0fc42; --accent-2:#7bd13a; --on-accent:#0a0e08;
  --radius:12px; --btn-r:8px; --shadow:0 30px 64px -32px rgba(0,0,0,.8);
  --eyebrow:#b0fc42; --hero-cols:1.05fr .95fr; --ink-soft:rgba(176,252,66,.12);
}
[data-theme="1"] .hero{ background:radial-gradient(820px 440px at 85% -8%, rgba(176,252,66,.13), transparent 62%); }
[data-theme="1"] .nav{ background:rgba(11,13,16,.9); }
[data-theme="1"] .eyebrow{ letter-spacing:.24em; }
[data-theme="1"] .hero h1 .hl{ font-style:italic; }
[data-theme="1"] .btn-primary:hover{ background:#c4ff5e; box-shadow:0 16px 32px -14px rgba(176,252,66,.45); }
[data-theme="1"] .panel{ background:linear-gradient(150deg,#171c14,#101310); border:1px solid var(--accent); color:var(--text); }
[data-theme="1"] .panel h3, [data-theme="1"] .contact-side .big-phone{ color:var(--accent); }
[data-theme="1"] .contact-side .panel .btn-primary{ background:var(--accent); color:var(--on-accent); border-color:var(--accent); }
[data-theme="1"] .foot{ background:#070809; }

/* ============================================================
   MULTI-PAGE NAVIGATION  (added 2026-08-11)
   Desktop: inline links, dropdowns open on hover and on focus.
   Mobile:  hamburger button opens a full-width panel and the
            dropdowns become accordions. Replaces the old
            display:none behaviour, which left mobile with no
            navigation at all.
   These rules are appended after the theme block on purpose,
   so they win on source order without editing tested CSS.
   ============================================================ */

.nav{ position: relative; z-index: 100; }
/* height was fixed at 96px; auto with a floor renders identically when nothing
   wraps, and prevents clipping in the narrow-desktop band below. */
.nav-inner{ position: relative; height: auto; min-height: 96px; }

/* ---------- hamburger (hidden on desktop) ---------- */
.nav-toggle{
  display: none; margin-left: auto;
  width: 46px; height: 46px; padding: 0;
  align-items: center; justify-content: center;
  background: transparent; color: var(--text);
  border: 1px solid var(--border); border-radius: var(--btn-r);
}
.nav-toggle:hover, .nav-toggle:focus-visible{ border-color: var(--accent); color: var(--accent); }
.nav-toggle svg{ width: 24px; height: 24px; display: block; }
.nav-toggle .ico-close{ display: none; }
.nav-toggle[aria-expanded="true"] .ico-open{ display: none; }
.nav-toggle[aria-expanded="true"] .ico-close{ display: block; }

/* ---------- collapsible container ---------- */
.nav-menu{ display: flex; align-items: center; gap: 22px; flex: 1 1 auto; min-width: 0; }
.nav-cta{ flex: none; }
.nav-cta .btn{ white-space: nowrap; }

.nav-links{
  display: flex; align-items: center; gap: 26px;
  margin: 0 0 0 14px; padding: 0; list-style: none;
  flex-wrap: wrap; row-gap: 6px;
}
.nav-links > li{ position: relative; flex: none; }
.nav-links a, .nav-links .sub-toggle{
  display: inline-flex; align-items: center; gap: 6px;
  font-family: inherit; font-weight: 600; font-size: .94rem;
  color: var(--muted); text-decoration: none; white-space: nowrap;
  background: none; border: 0; padding: 0; cursor: pointer;
}
.nav-links a:hover, .nav-links a:focus-visible,
.nav-links .sub-toggle:hover, .nav-links .sub-toggle:focus-visible{ color: var(--accent); }
.nav-links a[aria-current="page"]{ color: var(--text); }
.sub-toggle svg{ width: 12px; height: 12px; transition: transform .15s ease; }
.has-sub[data-open="true"] > .sub-toggle svg{ transform: rotate(180deg); }

/* ---------- dropdown panel ---------- */
.sub{
  display: none; list-style: none; margin: 0; padding: 10px;
  position: absolute; top: 100%; left: -14px; z-index: 120; min-width: 264px;
  background: var(--surface); border: 1px solid var(--border);
  border-radius: var(--radius); box-shadow: var(--shadow);
}
.has-sub[data-open="true"] > .sub{ display: block; }
.sub li{ margin: 0; }
.sub a{
  display: block; padding: 9px 12px; border-radius: 8px;
  font-size: .92rem; color: var(--muted); font-weight: 600;
}
.sub a:hover, .sub a:focus-visible{ background: var(--ink-soft); color: var(--accent); }
.sub .sub-head{
  display: block; padding: 4px 12px 10px; margin-bottom: 4px;
  border-bottom: 1px solid var(--border);
  font-family: var(--font-label); font-size: .7rem; font-weight: 700;
  letter-spacing: .16em; text-transform: uppercase; color: var(--muted);
}
/* a second section header partway down the list needs breathing room above it */
.sub li:not(:first-child) .sub-head{ margin-top: 12px; padding-top: 12px; }

/* ---------- breadcrumbs ---------- */
.crumbs{ padding: 20px 0 0; font-size: .86rem; color: var(--muted); }
.crumbs ol{ display: flex; flex-wrap: wrap; align-items: center; gap: 8px; margin: 0; padding: 0; list-style: none; }
.crumbs a{ color: var(--muted); text-decoration: none; font-weight: 600; }
.crumbs a:hover{ color: var(--accent); }
.crumbs li + li::before{ content: "/"; margin-right: 8px; opacity: .5; }
.crumbs [aria-current="page"]{ color: var(--text); font-weight: 600; }

/* ---------- narrow desktop (921px to 1180px) ----------
   Five labels plus the phone and the Apply button do not fit at these widths
   with wide fallback metrics. Tighten the gaps; the row can wrap to a second
   line as a last resort, which is preferable to a horizontal scrollbar. */
@media (min-width: 921px) and (max-width: 1180px){
  .nav-links{ gap: 13px; margin-left: 4px; }
  .nav-cta{ gap: 10px; }
  .nav-links a, .nav-links .sub-toggle{ font-size: .88rem; }
  .nav-phone{ font-size: .88rem; }
  .nav-cta .btn{ padding: 13px 18px; font-size: .92rem; }
  /* "call or text" is decorative; dropping it in this band buys about 80px,
     which is what keeps the row on one line at 921px. The number stays. */
  .nav-phone span{ display: none; }
}

/* ---------- mobile ---------- */
@media (max-width: 920px){
  .nav-inner{ min-height: 78px; flex-wrap: wrap; padding-top: 10px; padding-bottom: 10px; }
  .brand-logo{ height: 54px; }
  .nav-toggle{ display: inline-flex; }
  .nav-menu{
    display: none; order: 3; flex: 1 0 100%;
    flex-direction: column; align-items: stretch; gap: 0;
    padding: 4px 0 18px; margin-top: 6px; border-top: 1px solid var(--border);
  }
  .nav-inner[data-open="true"] .nav-menu{ display: flex; }
  .nav-links{ display: flex; flex-direction: column; align-items: stretch; gap: 0; margin: 0; }
  .nav-links > li{ border-bottom: 1px solid var(--border); }
  .nav-links > li > a, .nav-links > li > .sub-toggle{
    width: 100%; justify-content: space-between;
    padding: 15px 2px; font-size: 1rem; white-space: normal;
  }
  .sub{
    display: none; position: static; top: auto; left: auto;
    min-width: 0; margin: 0 0 10px; padding: 0 0 0 14px;
    background: transparent; border: 0; border-left: 2px solid var(--accent);
    border-radius: 0; box-shadow: none;
  }
  .sub a{ padding: 11px 10px; }
  .sub .sub-head{ padding: 4px 10px 8px; }
  .nav-cta{ margin-left: 0; margin-top: 18px; flex-direction: column; align-items: stretch; gap: 12px; }
  .nav-cta .btn{ width: 100%; }
  .nav-phone{ display: block; font-size: 1rem; padding: 4px 2px; }
}
@media (max-width: 600px){
  .nav-phone{ display: block; }
}

/* ---------- heading order fix ----------
   The hero credibility card used an h3, which skipped a level after the h1.
   It is an h2 now; this keeps it visually identical to before. */
.cred h2{ font-size: 1.05rem; margin-bottom: 18px; }

/* ============================================================
   CONTENT PAGES  (added 2026-08-11 for Phase 1a)
   The theme covers cards, grids and steps but has no long-form
   prose, table, FAQ or callout styling. These add them using the
   existing variables only, so the Onyx palette stays authoritative.
   ============================================================ */

/* ---------- page header ---------- */
.page-head{ padding: 44px 0 8px; }
.page-head h1{ max-width: 20ch; }
.page-head .lead{ max-width: 62ch; margin-top: 14px; }
.page-head .lead b{ color: var(--text); }

/* ---------- long-form prose ---------- */
.prose{ max-width: 72ch; }
.prose.wide{ max-width: none; }
/* Section headings inside body copy read better a step down from the display
   size used for full-width section headers. */
.prose h2{ margin-top: 2em; font-size: clamp(1.55rem, 2.8vw, 2.15rem); }
.prose h2:first-child{ margin-top: 0; }
.prose h3{ margin-top: 1.9em; font-size: 1.12rem; }
.prose p, .prose li{ color: var(--muted); }
.prose p strong, .prose li strong{ color: var(--text); }
.prose ul, .prose ol{ margin: 0 0 1.15rem; padding-left: 1.15rem; }
.prose li{ margin-bottom: .5rem; }
.prose li::marker{ color: var(--accent); }
.prose a{ color: var(--accent); text-decoration: underline; text-underline-offset: 3px; }
.prose a:hover{ text-decoration-thickness: 2px; }
.prose .src{ font-size: .84rem; color: var(--muted); opacity: .85; }

/* ---------- tables ----------
   .table-wrap scrolls horizontally on small screens so a wide table
   never forces the whole page sideways. */
.table-wrap{ overflow-x: auto; max-width: 100%; min-width: 0; margin: 0 0 1.4rem; -webkit-overflow-scrolling: touch; }
.table-wrap table{ width: 100%; min-width: 520px; border-collapse: collapse; font-size: .95rem; }
.table-wrap.narrow table{ min-width: 380px; }
.table-wrap caption{
  caption-side: top; text-align: left; padding: 0 0 12px;
  font-size: .84rem; color: var(--muted);
}
.table-wrap th, .table-wrap td{
  padding: 13px 16px; text-align: left; vertical-align: top;
  border-bottom: 1px solid var(--border);
}
.table-wrap thead th{
  font-family: var(--font-label); font-size: .74rem; font-weight: 700;
  letter-spacing: .12em; text-transform: uppercase; color: var(--muted);
  background: var(--bg-alt); border-bottom: 1px solid var(--border);
  white-space: nowrap;
}
.table-wrap tbody th{ font-weight: 700; color: var(--text); white-space: nowrap; }
.table-wrap td{ color: var(--muted); }
.table-wrap tbody tr:last-child th, .table-wrap tbody tr:last-child td{ border-bottom: 0; }
.table-wrap tbody tr:hover td, .table-wrap tbody tr:hover th{ background: var(--ink-soft); }
.table-wrap .num{ font-variant-numeric: tabular-nums; color: var(--text); font-weight: 700; }
.table-scroll-note{ font-size: .82rem; color: var(--muted); margin: -.9rem 0 1.4rem; display: none; }

/* ---------- callout ---------- */
.callout{
  border: 1px solid var(--border); border-left: 3px solid var(--accent);
  border-radius: var(--radius); background: var(--surface);
  padding: 22px 24px; margin: 0 0 1.4rem;
}
.callout h3{ font-size: 1rem; margin-bottom: 8px; }
.callout p:last-child{ margin-bottom: 0; }
.callout.plain{ border-left-color: var(--border); }

/* ---------- FAQ (visible content, no FAQPage markup) ---------- */
.faq{ max-width: 78ch; }
.faq-item{ border-bottom: 1px solid var(--border); padding: 22px 0; }
.faq-item:first-child{ border-top: 1px solid var(--border); }
.faq-item h3{ font-size: 1.08rem; margin-bottom: 10px; }
.faq-item p, .faq-item li{ color: var(--muted); }
.faq-item p:last-child{ margin-bottom: 0; }

/* ---------- key-figure row ---------- */
/* Its own band so it does not inherit the full 96px section padding top and
   bottom, which left roughly 190px of dead space before the next section. */
.figs-band{ padding: 24px 0 34px; }
.figs{ display: grid; grid-template-columns: repeat(4, 1fr); gap: 18px; margin: 0; }
.fig{
  background: var(--surface); border: 1px solid var(--border);
  border-radius: var(--radius); padding: 22px;
}
.fig .n{
  font-family: var(--font-head); font-weight: var(--hw); line-height: 1;
  font-size: clamp(1.5rem, 2.4vw, 2rem); color: var(--accent); letter-spacing: -.02em;
}
/* A stat whose value is a range rather than a single figure needs a smaller
   size, otherwise "$139k to $1.19M" overflows the card at 4 across. */
.fig .n.wide{ font-size: clamp(1.15rem, 1.7vw, 1.45rem); }
.fig .l{ margin-top: 9px; font-size: .88rem; color: var(--muted); font-weight: 600; }

/* A one line formula set apart from the prose around it. */
.prose p.formula{
  background: var(--bg-alt); border: 1px solid var(--border);
  border-left: 3px solid var(--accent); border-radius: var(--radius);
  padding: 16px 20px; margin: 18px 0; font-size: 1.05rem;
}

/* A totals row has to read as the answer, not as one more line item. */
.table-wrap tr.total > *{
  border-top: 2px solid var(--accent);
  background: var(--bg-alt);
  font-weight: 700;
}
.table-wrap tr.total td:last-child{ font-weight: 500; color: var(--muted); }

/* ---------- two-column split ---------- */
.split{ display: grid; grid-template-columns: 1.35fr .65fr; gap: 46px; align-items: start; }
/* Grid items default to min-width:auto, so a wide table inside one refuses to
   shrink and pushes the whole page sideways on mobile. min-width:0 is the fix. */
.split > *{ min-width: 0; }
.split .aside{ position: sticky; top: 24px; }

/* ---------- CTA band ---------- */
.cta-band{ background: var(--bg-alt); border-top: 1px solid var(--border); border-bottom: 1px solid var(--border); }
.cta-band .wrap{ display: flex; flex-wrap: wrap; gap: 26px; align-items: center; justify-content: space-between; }
.cta-band h2{ margin: 0; font-size: clamp(1.4rem, 2.4vw, 1.95rem); }
.cta-band p{ margin: 8px 0 0; color: var(--muted); max-width: 52ch; }
.cta-band .acts{ display: flex; flex-wrap: wrap; gap: 12px; }

@media (max-width: 920px){
  .figs{ grid-template-columns: repeat(2, 1fr); }
  .split{ grid-template-columns: 1fr; gap: 32px; }
  .split .aside{ position: static; }
  .table-scroll-note{ display: block; }
  .page-head{ padding-top: 30px; }
}
@media (max-width: 600px){
  .figs{ grid-template-columns: 1fr 1fr; gap: 12px; }
  .fig{ padding: 16px; }
  .table-wrap th, .table-wrap td{ padding: 11px 13px; }
  .cta-band .acts .btn{ flex: 1 1 auto; }
}

/* ---------- footer heading level ----------
   The footer column headings were h4, which made every page whose last content
   heading is an h2 skip a level. They are h2 now; this keeps them looking
   exactly as they did. */
.foot h2{
  font-size: .8rem; letter-spacing: .14em; text-transform: uppercase;
  opacity: .7; margin: 0 0 14px; font-family: var(--font-body); font-weight: 700;
  color: #fff; line-height: 1.4;
}

/* ---------- narrow key/value tables stack on small screens ----------
   Horizontal scrolling is right for a genuinely wide comparison table, but for
   a two column term/value table it is poor. Below 700px those collapse into
   stacked label-over-value blocks and stop scrolling. The header row is hidden
   visually but left in the DOM for screen readers. */
@media (max-width: 700px){
  .table-wrap.narrow{ overflow-x: visible; }
  .table-wrap.narrow table{ min-width: 0; }
  .table-wrap.narrow thead{
    position: absolute; width: 1px; height: 1px;
    overflow: hidden; clip-path: inset(50%); white-space: nowrap;
  }
  .table-wrap.narrow tbody tr{
    display: block; padding: 15px 0;
    border-bottom: 1px solid var(--border);
  }
  .table-wrap.narrow tbody tr:first-child{ padding-top: 0; }
  .table-wrap.narrow tbody tr:last-child{ border-bottom: 0; padding-bottom: 0; }
  .table-wrap.narrow tbody tr:hover th, .table-wrap.narrow tbody tr:hover td{ background: none; }
  .table-wrap.narrow th, .table-wrap.narrow td{
    display: block; border: 0; padding: 0; white-space: normal;
  }
  .table-wrap.narrow tbody th{ margin-bottom: 6px; color: var(--text); }
  .table-wrap.narrow + .table-scroll-note{ display: none; }
  /* Stacked cells are blocks, so the totals rule has to move onto the row. */
  .table-wrap.narrow tr.total > *{ border-top: 0; background: none; }
  .table-wrap.narrow tbody tr.total{
    border-top: 2px solid var(--accent); padding-top: 15px; margin-top: 4px;
  }
  .table-wrap.narrow tr.total td:first-of-type{ font-weight: 700; }
}

/* ---------- left-aligned section head ----------
   .sec-head is centred by its auto margins, which reads as misaligned when the
   content below it is full-width prose or a left-aligned FAQ. */
.sec-head.left{ margin-left: 0; margin-right: 0; }

/* ---- terms table policy note (added 2026-08-14) ---------------------------
   Sits under every published terms table. The rows that say "ask us" are a
   deliberate commercial decision, not an unfinished page, and this note is
   what makes that legible to a reader and to an AI summarising the page. */
.terms-note{
  margin: 14px 0 0;
  padding: 14px 16px;
  border-left: 3px solid var(--accent);
  background: var(--ink-soft);
  border-radius: 0 8px 8px 0;
  font-size: .94rem;
  line-height: 1.6;
}
.terms-note a{ color: var(--accent); font-weight: 600; }


/* ---- mobile action bar (added 2026-08-15) --------------------------------
   The audit measured the first in-page call to action on the Chester County
   page at roughly 26 phone screens down, with the header scrolled away and the
   phone number hidden inside the collapsed menu. On pages this long a reader
   who decides to call has no way to do it without scrolling back. This bar is
   the fix: always present, thumb reachable, two targets over 48px. */
.action-bar{ display: none; }

@media (max-width: 920px){
  .action-bar{
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 10px;
    position: fixed;
    left: 0; right: 0; bottom: 0;
    z-index: 200;
    padding: 10px 12px calc(10px + env(safe-area-inset-bottom));
    background: rgba(11,13,16,.94);
    backdrop-filter: blur(10px);
    border-top: 1px solid var(--border);
  }
  .action-bar a{
    display: flex; align-items: center; justify-content: center;
    min-height: 48px; padding: 12px 8px;
    border-radius: 10px;
    font-weight: 700; font-size: .9rem; text-decoration: none;
    line-height: 1.2; text-align: center; white-space: nowrap;
  }
  @media (max-width: 360px){ .action-bar a{ font-size: .82rem; } }
  .action-bar .ab-call{
    background: transparent; color: var(--text);
    border: 1px solid var(--border);
  }
  .action-bar .ab-apply{ background: var(--accent); color: var(--on-accent); }
  /* keep the footer clear of the fixed bar */
  body{ padding-bottom: 76px; }
  /* the header scrolls away on long pages, so pin it */
  .nav{ position: sticky; top: 0; z-index: 150; }
}

/* ---- area chips became links (2026-08-15) --------------------------------
   They were inert spans, which meant the home page passed no in-body link
   equity to any money page. As anchors they need the underline suppressed and
   a hover state, without touching the tested theme rule. */
a.area-chip{ text-decoration: none; transition: border-color .15s ease, background .15s ease; }
a.area-chip:hover, a.area-chip:focus-visible{
  border-color: var(--accent);
  background: var(--ink-soft);
}

/* ---- multi column name grids (2026-08-15) --------------------------------
   The 148 Philadelphia neighborhoods were one 244 word sentence, roughly a
   full phone screen of commas that nobody could scan for their own block.
   Same data, findable. */
.name-grid{
  list-style: none;
  margin: 18px 0 0;
  padding: 0;
  columns: 260px 4;
  column-gap: 28px;
}
.name-grid li{
  break-inside: avoid;
  padding: 5px 0;
  font-size: .95rem;
  color: var(--text);
  border-bottom: 1px solid var(--border);
}
@media (max-width: 560px){ .name-grid{ columns: 2; column-gap: 18px; } }

/* ---- collapsed long data (2026-08-15) ------------------------------------
   The full municipal price tables and the 148 neighborhood grid are the most
   valuable content on the site and the worst possible mobile default. Behind a
   toggle they stay fully in the HTML for crawlers while giving the reader back
   about a third of the page height. */
details.more{ margin: 18px 0 0; }
details.more > summary{
  cursor: pointer;
  list-style: none;
  padding: 13px 16px;
  border: 1px solid var(--border);
  border-radius: 10px;
  background: var(--surface);
  font-weight: 700;
  font-size: .95rem;
  color: var(--accent);
}
details.more > summary::-webkit-details-marker{ display: none; }
details.more > summary::after{ content: "  +"; font-weight: 800; }
details.more[open] > summary::after{ content: "  -"; }
details.more > summary:hover{ border-color: var(--accent); }
details.more[open] > summary{ margin-bottom: 4px; }

/* ---- body bullet lists (2026-08-15) --------------------------------------
   Twelve of fourteen pages had zero lists in the body: solid paragraphs, then
   a 73 row table, with no formatting layer in between. These are for the
   paragraphs that were already enumerating things in prose. */
.prose ul.points{
  margin: 16px 0 0;
  padding: 0 0 0 4px;
  list-style: none;
}
.prose ul.points li{
  position: relative;
  padding: 0 0 12px 24px;
  line-height: 1.62;
}
.prose ul.points li::before{
  content: "";
  position: absolute;
  left: 2px; top: .62em;
  width: 7px; height: 7px;
  border-radius: 2px;
  background: var(--accent);
}
.prose ul.points li:last-child{ padding-bottom: 0; }

/* ==========================================================================
   ACCESSIBILITY PASS, 2026-08-15
   Everything below came out of a measured audit rather than a checklist.
   ========================================================================== */

/* Skip link. First tab stop, invisible until focused. */
.skip{ position: absolute; left: -9999px; }
.skip:focus{
  position: fixed; left: 12px; top: 12px; z-index: 300;
  background: var(--accent); color: var(--on-accent);
  padding: 13px 20px; border-radius: 8px; font-weight: 700; text-decoration: none;
}
main:focus{ outline: none; }

/* Visible focus. The browser default outline measured 1.02:1 against this
   background, which is no indicator at all on a dark theme. */
a:focus-visible,
button:focus-visible,
summary:focus-visible,
input:focus-visible,
textarea:focus-visible,
[tabindex]:focus-visible{
  outline: 3px solid var(--accent);
  outline-offset: 2px;
  border-radius: 4px;
}

/* Form controls. Placeholder was the UA grey at 4.22:1 and the input border
   was 1.38:1, both below the AA thresholds. */
.field input::placeholder,
.field textarea::placeholder{ color: #9aa39a; opacity: 1; }
[data-theme="1"] .field input,
[data-theme="1"] .field textarea{ border-color: #6b7480; }
.field-error{
  margin: 6px 0 0; color: #ff8a7a; font-size: .88rem; font-weight: 600;
}
.field .req{ font-weight: 400; color: var(--muted); font-size: .9em; }

/* Horizontally scrolling tables need to be reachable by keyboard. */
.table-wrap[tabindex]:focus-visible{ outline: 3px solid var(--accent); outline-offset: 2px; }

/* Long unbreakable strings, chiefly the email address, forced 6px of
   horizontal scroll at the 320px reflow target. */
.prose a[href^="mailto:"], .prose b{ overflow-wrap: anywhere; }

/* Screen reader only text. */
.vh{
  position: absolute; width: 1px; height: 1px;
  overflow: hidden; clip-path: inset(50%); white-space: nowrap;
}

@media (max-width: 920px){
  /* the sticky header was covering the top 79px of any anchor target */
  html{ scroll-padding-top: 92px; scroll-padding-bottom: 84px; }
  /* small text links were 15px to 18px tall against a 24px minimum */
  .foot ul a, .crumbs a{ display: inline-block; padding: 6px 0; min-height: 24px; }
  .prose .src a{ padding: 3px 0; }
}

/* Respect a reduced motion preference. The site had none, while using smooth
   scroll on pages up to 27,000px tall. */
@media (prefers-reduced-motion: reduce){
  html{ scroll-behavior: auto; }
  *, *::before, *::after{
    animation-duration: .01ms !important;
    animation-iteration-count: 1 !important;
    transition-duration: .01ms !important;
    scroll-behavior: auto !important;
  }
}

/* ---- stat grid at very narrow widths (2026-08-15) ------------------------
   At 320px the two column stat grid plus its gap and the page gutters ran
   11px past the viewport, which is the WCAG 1.4.10 reflow target. Grid items
   default to min-width:auto, so a long label refuses to shrink. */
.figs > *{ min-width: 0; }
@media (max-width: 360px){
  .figs{ grid-template-columns: 1fr; gap: 10px; }
  .figs .fig{ padding: 14px 16px; }
}

/* ---- nav fits on one line again (2026-08-15) -----------------------------
   Adding the Apply link took the top level to six items, which pushed
   "Contact" onto a second row at 1280px and above and made the header 96px
   tall with a stranded link under it. Tighter gaps, same labels. */
@media (min-width: 921px){
  /* .nav-links is a flex item of .nav-menu, so it shrinks below its content
     width and wraps even when the row has room. Pin it so the six top level
     items stay on one line. */
  .nav-links{ flex: none; flex-wrap: nowrap; }
  .nav-cta{ margin-left: auto; }
}
@media (min-width: 1181px){
  .nav-links{ gap: 19px; margin-left: 10px; }
  .nav-cta{ gap: 13px; }
}
/* The 921 to 1180 band is tightened further below; that block must stay after
   these two so its narrower gap and font size win the cascade. */
@media (min-width: 921px) and (max-width: 1180px){
  .nav-links{ gap: 11px; margin-left: 4px; }
  .nav-cta{ gap: 9px; }
  .nav-links a, .nav-links .sub-toggle{ font-size: .86rem; }
  .nav-phone{ font-size: .85rem; }
  .nav-cta .btn{ padding: 12px 15px; font-size: .89rem; }
  .nav-phone span{ display: none; }
}