/* ════════════════════════════════════════════════════════════
   GLRA — ARCHITECTURAL BRUTALIST THEME
   Single-file override of styles.css for all inner pages.
   Add ONE <link rel="stylesheet" href="/css/brutalist-theme.css"> to
   each page after the existing styles.css link, plus the small
   brutalist-shell.js script to upgrade the nav/footer.
   ════════════════════════════════════════════════════════════ */

@import url('https://fonts.googleapis.com/css2?family=Inter:wght@400;500;600;700;800;900&family=JetBrains+Mono:wght@400;500;600;700&display=swap');

/* ── Hijack the CSS variables: anything using --gold/--navy etc. flips automatically ── */
:root{
  --gold:#ff3d00 !important;
  --gold-dark:#cc2f00 !important;
  --gold-light:rgba(255,61,0,0.08) !important;
  --navy:#0a0a0a !important;
  --navy-mid:#1a1a17 !important;
  --gray-light:#e8e4dd !important;
  --white:#f1eee9 !important;
  --card-bg:#f1eee9 !important;
  --border-color:#0a0a0a !important;
  --text-color:#0a0a0a !important;
  --gray:#6a6a6a !important;
  --shadow-sm:6px 6px 0 #0a0a0a !important;
  --shadow-md:6px 6px 0 #0a0a0a !important;
  --shadow-lg:8px 8px 0 #0a0a0a !important;
  --transition:all .15s ease !important;
  /* Brutalist tokens */
  --ab-paper:#f1eee9;
  --ab-paper-2:#e8e4dd;
  --ab-ink:#0a0a0a;
  --ab-ink-soft:#2a2a2a;
  --ab-gray:#6a6a6a;
  --ab-line:#0a0a0a;
  --ab-hot:#ff3d00;
  --ab-hot-deep:#cc2f00;
}
body.dark-mode{
  --gold:#ff3d00 !important;
  --gold-dark:#cc2f00 !important;
  --gold-light:rgba(255,61,0,0.12) !important;
  --navy:#0a0a0a !important;
  --gray-light:#1a1a17 !important;
  --white:#0e0e0c !important;
  --card-bg:#0e0e0c !important;
  --border-color:#3a3a36 !important;
  --text-color:#f1eee9 !important;
  --gray:#9a9082 !important;
  --ab-paper:#0e0e0c;
  --ab-paper-2:#1a1a17;
  --ab-ink:#f1eee9;
  --ab-ink-soft:#cfc7b6;
  --ab-line:#3a3a36;
}

/* ── BASE ── */
html,body{font-family:'Inter','Segoe UI',sans-serif !important;background:var(--ab-paper) !important;color:var(--ab-ink) !important;line-height:1.4 !important}
*{border-radius:0 !important}
::selection{background:var(--ab-hot);color:#fff}

/* concrete texture overlay */
body::after{content:'';position:fixed;inset:0;pointer-events:none;z-index:0;opacity:.04;background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='200' height='200'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='0.85' numOctaves='3'/%3E%3CfeColorMatrix values='0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0.9 0'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23n)'/%3E%3C/svg%3E")}

/* ── HEADINGS ── */
h1,h2,h3,h4,h5,h6{font-family:'Inter','Segoe UI',sans-serif !important;font-weight:900 !important;letter-spacing:-1.5px !important;text-transform:uppercase !important;color:var(--ab-ink) !important;line-height:.95 !important}
h1{font-size:clamp(40px,5.5vw,72px) !important;letter-spacing:-2.5px !important}
h2{font-size:clamp(32px,4.5vw,56px) !important;letter-spacing:-2px !important}
h3{font-size:clamp(22px,2.5vw,30px) !important;letter-spacing:-.8px !important}
h4{font-size:18px !important;letter-spacing:-.4px !important}

/* ── LINKS ── */
a{color:inherit;text-decoration:none}
a:hover{color:var(--ab-hot)}

/* ── LEGACY NAVBAR (.navbar from styles.css) → BRUTALIST NAV ── */
.navbar{
  position:sticky !important;top:0 !important;width:100% !important;
  background:var(--ab-paper) !important;border-bottom:2px solid var(--ab-line) !important;
  padding:14px 24px !important;z-index:1000 !important;
  display:flex !important;align-items:center !important;justify-content:space-between !important;gap:20px !important;
  transition:none !important;
}
.navbar .logo img{height:78px !important;width:auto !important;filter:none !important}
@media(max-width:560px){.navbar .logo img{height:58px !important}}
.navbar .logo{position:static !important;transform:none !important}
.nav-links{display:flex !important;gap:0 !important;align-items:stretch !important}
.nav-links a{
  color:var(--ab-ink) !important;font-family:'Inter',sans-serif !important;
  font-weight:800 !important;font-size:13px !important;letter-spacing:.2px !important;
  text-transform:uppercase !important;padding:14px 18px !important;
  border-left:1px solid var(--ab-line) !important;display:flex !important;align-items:center !important;gap:6px !important;
  transition:.15s !important;
}
.nav-links a:hover,.nav-links a.active{background:var(--ab-ink) !important;color:var(--ab-paper) !important}
.contact-btn-nav,a.contact-btn-nav{
  background:var(--ab-hot) !important;color:#fff !important;
  border:0 !important;border-left:1px solid var(--ab-line) !important;border-radius:0 !important;
  padding:14px 22px !important;
}
.contact-btn-nav:hover,a.contact-btn-nav:hover{background:var(--ab-ink) !important;color:#fff !important}
.mobile-menu-btn{font-size:22px !important;color:var(--ab-ink) !important;background:transparent !important;border:0 !important;cursor:pointer !important}
@media(max-width:980px){
  .navbar{padding:12px 18px !important}
  .nav-links{display:none !important}
}

/* Nav dropdown (existing class .nav-dropdown from styles.css) */
.nav-dropdown{position:relative !important}
.nav-dropdown-menu{
  position:absolute !important;top:100% !important;left:0 !important;transform:none !important;
  background:var(--ab-paper) !important;border:2px solid var(--ab-line) !important;border-top:0 !important;
  min-width:240px !important;padding:0 !important;display:none;z-index:1500;box-shadow:6px 6px 0 var(--ab-ink) !important;
}
.nav-dropdown:hover .nav-dropdown-menu{display:block !important}
.nav-dropdown-menu a{
  display:block !important;padding:12px 18px !important;
  font-family:'JetBrains Mono',monospace !important;font-size:11px !important;font-weight:700 !important;
  letter-spacing:1.5px !important;text-transform:uppercase !important;
  color:var(--ab-ink) !important;border-bottom:1px solid var(--ab-line) !important;
}
.nav-dropdown-menu a:last-child{border-bottom:0 !important}
.nav-dropdown-menu a:hover{background:var(--ab-hot) !important;color:#fff !important;padding-left:18px !important}

/* ── MOBILE OVERLAY ── */
.mobile-overlay{background:var(--ab-ink) !important;padding:60px 24px 40px !important;z-index:5000 !important}
.mobile-overlay.active,.mobile-overlay.open{left:0 !important}
.mobile-overlay .close-menu{background:transparent !important;border:1px solid rgba(241,238,233,.3) !important;border-radius:0 !important;color:#fff !important}
.mobile-overlay-links{gap:0 !important;border-top:1px solid rgba(241,238,233,.2) !important;max-width:none !important;padding:20px 0 0 !important;text-align:left !important}
.mobile-overlay-links a{
  font-family:'Inter',sans-serif !important;font-size:18px !important;font-weight:800 !important;
  letter-spacing:-.5px !important;text-transform:uppercase !important;color:#fff !important;
  padding:16px 4px !important;border-bottom:1px solid rgba(241,238,233,.2) !important;
}
.mobile-overlay-links a:hover{color:var(--ab-hot) !important;padding-left:14px !important}

/* ── PAGE HERO ── */
.page-hero{
  background:var(--ab-paper) !important;border-bottom:2px solid var(--ab-line) !important;
  padding:60px 24px 40px !important;text-align:left !important;
  max-width:none !important;
}
.page-hero::before{display:none !important}
.page-hero .eyebrow{
  font-family:'JetBrains Mono',monospace !important;font-size:11px !important;letter-spacing:2px !important;
  text-transform:uppercase !important;color:var(--ab-hot) !important;font-weight:700 !important;
  margin-bottom:14px !important;display:block !important;
}
.page-hero h1{
  font-family:'Inter',sans-serif !important;color:var(--ab-ink) !important;
  font-size:clamp(40px,7vw,90px) !important;font-weight:900 !important;
  letter-spacing:-3px !important;text-transform:uppercase !important;line-height:.9 !important;
  margin-bottom:14px !important;max-width:1480px;margin-left:auto !important;margin-right:auto !important;
}
.page-hero p{
  color:var(--ab-ink-soft) !important;font-size:16px !important;line-height:1.5 !important;
  max-width:720px !important;margin-left:0 !important;font-weight:500 !important;
}

/* ── INPUTS / FORMS / SELECTS ── */
input[type="text"],input[type="email"],input[type="tel"],input[type="number"],input[type="password"],input[type="search"],
textarea,select,
.form-input,.zonal-search-input{
  background:var(--ab-paper) !important;color:var(--ab-ink) !important;
  border:2px solid var(--ab-line) !important;border-radius:0 !important;
  padding:13px 16px !important;font-family:'Inter',sans-serif !important;font-size:14px !important;font-weight:500 !important;
  transition:border-color .15s,background .15s !important;box-shadow:none !important;
}
input:focus,textarea:focus,select:focus,
.form-input:focus,.zonal-search-input:focus{
  outline:0 !important;border-color:var(--ab-hot) !important;background:var(--ab-paper-2) !important;
}
::placeholder{color:var(--ab-gray) !important;text-transform:uppercase;letter-spacing:1.2px;font-size:11px;font-weight:600}
label{font-family:'JetBrains Mono',monospace !important;font-size:10.5px !important;letter-spacing:1.8px !important;text-transform:uppercase !important;color:var(--ab-gray) !important;font-weight:700 !important;display:block !important;margin-bottom:6px !important}

/* ── BUTTONS (broad coverage) ── */
button,
.btn,.cta-btn,.print-btn,.submit-btn,.search-btn-main,.broker-btn,.broker-btn-primary,.broker-btn-secondary,
.contact-btn-nav,.view-all-btn,.view-listings-btn,.calculate-btn,.reset-filters-btn,.modal-inquire-btn,
input[type="submit"],input[type="button"]{
  background:var(--ab-ink) !important;color:var(--ab-paper) !important;
  border:0 !important;border-radius:0 !important;
  font-family:'JetBrains Mono',monospace !important;
  font-size:11px !important;letter-spacing:2px !important;text-transform:uppercase !important;font-weight:700 !important;
  padding:14px 24px !important;cursor:pointer !important;transition:.15s !important;
  text-decoration:none !important;display:inline-flex !important;align-items:center !important;gap:8px !important;
  box-shadow:none !important;
}
button:hover,.btn:hover,.cta-btn:hover,.print-btn:hover,.submit-btn:hover,.search-btn-main:hover,
.broker-btn:hover,.broker-btn-primary:hover,.view-all-btn:hover,.view-listings-btn:hover,
.calculate-btn:hover,.reset-filters-btn:hover,.modal-inquire-btn:hover,
input[type="submit"]:hover,input[type="button"]:hover{
  background:var(--ab-hot) !important;color:#fff !important;transform:none !important;
}
.broker-btn-secondary{background:var(--ab-paper) !important;color:var(--ab-ink) !important;border:2px solid var(--ab-line) !important}
.broker-btn-secondary:hover{background:var(--ab-ink) !important;color:var(--ab-paper) !important}

/* Smaller / inline buttons */
.comm-btn,.zonal-row button,.print-btn{padding:11px 16px !important;font-size:10.5px !important}
.comm-btn{background:var(--ab-paper) !important;color:var(--ab-ink) !important;border:1px solid var(--ab-line) !important}
.comm-btn.active,.comm-btn:hover{background:var(--ab-hot) !important;color:#fff !important;border-color:var(--ab-hot) !important}

/* ── CARDS (input-card, blog-card, resource-card, value-card, testimonial-card, etc.) ── */
.input-card,.blog-card,.resource-card,.value-card,.testimonial-card,.prop-card,.amort-card,.fee-card,
.mortgage-card,.rental-card,.zonal-card,.guide-card,.neighborhood-card,.list-card,.about-card,.affordability-card{
  background:var(--ab-paper) !important;border:2px solid var(--ab-line) !important;border-radius:0 !important;
  box-shadow:none !important;padding:24px !important;transition:background .15s !important;
}
.input-card:hover,.blog-card:hover,.resource-card:hover,.value-card:hover,.testimonial-card:hover,
.prop-card:hover,.guide-card:hover,.neighborhood-card:hover{
  background:var(--ab-paper-2) !important;transform:none !important;box-shadow:none !important;border-color:var(--ab-line) !important;
}
body.dark-mode .input-card,body.dark-mode .blog-card,body.dark-mode .resource-card,body.dark-mode .value-card,
body.dark-mode .testimonial-card,body.dark-mode .prop-card,body.dark-mode .amort-card,body.dark-mode .fee-card,
body.dark-mode .mortgage-card,body.dark-mode .rental-card,body.dark-mode .zonal-card,body.dark-mode .guide-card,
body.dark-mode .neighborhood-card,body.dark-mode .list-card,body.dark-mode .about-card,body.dark-mode .affordability-card{
  background:var(--ab-paper) !important;border-color:var(--ab-line) !important;
}
body.dark-mode .input-card:hover,body.dark-mode .blog-card:hover,body.dark-mode .resource-card:hover{background:var(--ab-paper-2) !important}

/* ── FOOTER ── */
footer{background:var(--ab-ink) !important;color:var(--ab-paper) !important;padding:60px 40px 28px !important;margin-top:0 !important}
.footer-content{
  max-width:1480px !important;margin:0 auto 28px !important;
  grid-template-columns:repeat(auto-fit,minmax(200px,1fr)) !important;gap:36px !important;
  padding-bottom:32px !important;border-bottom:1px solid rgba(241,238,233,.2) !important;
}
.footer-col h4{
  font-family:'JetBrains Mono',monospace !important;color:var(--ab-hot) !important;
  font-size:10px !important;letter-spacing:2px !important;text-transform:uppercase !important;
  font-weight:700 !important;margin-bottom:14px !important;
}
.footer-col p,.footer-col a,.footer-col ul li a{
  color:rgba(241,238,233,.85) !important;font-size:13px !important;font-weight:600 !important;
  font-family:'Inter',sans-serif !important;line-height:1.6 !important;
}
.footer-col a:hover,.footer-col ul li a:hover{color:var(--ab-hot) !important}
.footer-col ul{gap:8px !important}
.footer-social{margin-top:16px !important;gap:10px !important}
.footer-social a{
  width:36px !important;height:36px !important;border:1px solid rgba(241,238,233,.3) !important;
  color:var(--ab-paper) !important;border-radius:0 !important;font-size:14px !important;
}
.footer-social a:hover{background:var(--ab-hot) !important;border-color:var(--ab-hot) !important;color:#fff !important}
.footer-divider{display:none !important}
.footer-bottom{
  font-family:'JetBrains Mono',monospace !important;font-size:10px !important;letter-spacing:1.5px !important;
  text-transform:uppercase !important;color:rgba(241,238,233,.5) !important;font-weight:500 !important;
  max-width:1480px !important;margin:24px auto 0 !important;border-top:0 !important;
}
.footer-bottom p{color:rgba(241,238,233,.5) !important;font-size:10px !important;letter-spacing:1.5px !important}
.footer-bottom-links a{color:rgba(241,238,233,.5) !important;font-size:10px !important;letter-spacing:1.5px !important}
.footer-bottom-links a:hover{color:var(--ab-hot) !important}

/* ── FLOATING BUTTONS ──
   The global "button { padding:14px 24px !important }" rule above would
   squash the FAB tap target — these explicit padding + box-sizing overrides
   keep each circle a clean 46x46 tap target on desktop and mobile.
   2px ink border + hard shadow so the buttons read as solid against the
   cream background and don't look like they're floating without an edge. */
.floating-buttons .floating-btn,.floating-buttons .fab-toggle{
  box-sizing:border-box !important;
  padding:0 !important;
  border-radius:0 !important;
  box-shadow:4px 4px 0 var(--ab-ink) !important;
  border:2px solid var(--ab-ink) !important;
  width:46px !important;height:46px !important;
  font-family:inherit !important;letter-spacing:0 !important;text-transform:none !important;
  display:flex !important;align-items:center !important;justify-content:center !important;
}
.floating-buttons .floating-btn:hover,.floating-buttons .fab-toggle:hover{
  transform:translate(-2px,-2px) !important;
  box-shadow:6px 6px 0 var(--ab-ink) !important;
  background:var(--ab-hot) !important;color:#fff !important;
}
.floating-buttons .btn-darkmode{background:var(--ab-hot) !important;color:#fff !important;border:2px solid var(--ab-ink) !important}
.floating-buttons .fab-toggle{background:var(--ab-hot) !important;color:#fff !important}
.floating-buttons .fab-toggle.is-open{background:var(--ab-ink) !important;color:#fff !important}
/* In dark mode the cream ink is too soft against the dark page — use hot accent on the shadow */
html body.dark-mode .floating-buttons .floating-btn,
html body.dark-mode .floating-buttons .fab-toggle{box-shadow:4px 4px 0 var(--ab-hot) !important}

/* ── BACK TO TOP ── */
.back-to-top{background:var(--ab-ink) !important;color:var(--ab-paper) !important;border-radius:0 !important;width:46px !important;height:46px !important}
.back-to-top:hover{background:var(--ab-hot) !important}

/* ── LOADER ── */
.loader{background:var(--ab-paper) !important}
.loader-logo{font-family:'Inter',sans-serif !important;color:var(--ab-ink) !important;font-weight:900 !important;letter-spacing:-2px !important;font-size:54px !important;text-transform:uppercase}
.loader-bar{background:var(--ab-paper-2) !important}
.loader-bar::after{background:var(--ab-hot) !important}

/* ── TOAST ── */
.toast{background:var(--ab-ink) !important;color:var(--ab-paper) !important;border:0 !important;border-left:4px solid var(--ab-hot) !important;font-family:'JetBrains Mono',monospace !important;font-size:11px !important;letter-spacing:1.5px !important;text-transform:uppercase !important;font-weight:700 !important;border-radius:0 !important}

/* ── TRUST STRIP ── */
.trust-strip{background:var(--ab-paper) !important;border-color:var(--ab-line) !important;padding:0 !important}
body.dark-mode .trust-strip{background:var(--ab-paper) !important;border-color:var(--ab-line) !important}
.trust-grid{
  max-width:1480px !important;display:grid !important;grid-template-columns:repeat(6,1fr) !important;
  gap:0 !important;padding:0 !important;align-items:stretch !important;
}
.trust-item{
  padding:22px 18px !important;border-right:1px solid var(--ab-line) !important;
  display:flex !important;flex-direction:column !important;gap:6px !important;
  max-width:none !important;justify-content:flex-start !important;text-align:left !important;
}
.trust-item:last-child{border-right:0 !important}
@media(max-width:1100px){.trust-grid{grid-template-columns:repeat(3,1fr) !important}.trust-item:nth-child(3n){border-right:0 !important}}
@media(max-width:600px){.trust-grid{grid-template-columns:1fr 1fr !important}.trust-item:nth-child(2n){border-right:0 !important}}
.trust-item .trust-icon{
  background:transparent !important;color:var(--ab-hot) !important;
  width:auto !important;height:auto !important;font-size:14px !important;border-radius:0 !important;margin-bottom:4px !important;
}
.trust-item .trust-label{
  font-family:'Inter',sans-serif !important;font-size:22px !important;font-weight:900 !important;
  letter-spacing:-.8px !important;color:var(--ab-ink) !important;text-transform:none !important;line-height:1 !important;white-space:nowrap !important;
}
.trust-item .trust-sub{
  font-family:'JetBrains Mono',monospace !important;font-size:9.5px !important;letter-spacing:1.5px !important;
  text-transform:uppercase !important;color:var(--ab-gray) !important;font-weight:600 !important;
}

/* ── DARK-MODE EXPLICIT FALLBACKS ── */
body.dark-mode{background:var(--ab-paper) !important;color:var(--ab-ink) !important}
body.dark-mode .navbar{background:var(--ab-paper) !important;border-color:var(--ab-line) !important}
body.dark-mode .nav-links a{color:var(--ab-ink) !important}
body.dark-mode .nav-links a:hover{background:var(--ab-paper-2) !important;color:var(--ab-ink) !important}
body.dark-mode .nav-dropdown-menu{background:var(--ab-paper) !important;border-color:var(--ab-line) !important}
body.dark-mode .nav-dropdown-menu a{color:var(--ab-ink) !important;border-bottom-color:var(--ab-line) !important}
body.dark-mode .page-hero{background:var(--ab-paper) !important;border-bottom-color:var(--ab-line) !important}
body.dark-mode .page-hero h1{color:var(--ab-ink) !important}
body.dark-mode .page-hero p{color:var(--ab-ink-soft) !important}
body.dark-mode footer{background:#000 !important}
body.dark-mode input,body.dark-mode textarea,body.dark-mode select,
body.dark-mode .form-input,body.dark-mode .zonal-search-input{background:var(--ab-paper) !important;color:var(--ab-ink) !important;border-color:var(--ab-line) !important}

/* ── CALC / PROPERTY DETAIL TABLES ── */
.fee-row,.cost-row,.amort-row,.rental-row{
  border-bottom:1px solid var(--ab-line) !important;padding:12px 0 !important;
  display:flex !important;justify-content:space-between !important;align-items:center !important;
}
.fee-label,.cost-label{font-family:'Inter',sans-serif !important;font-size:14px !important;font-weight:600 !important;color:var(--ab-ink) !important}
.fee-value,.cost-value{font-family:'Inter',sans-serif !important;font-size:16px !important;font-weight:900 !important;color:var(--ab-ink) !important;letter-spacing:-.5px !important}
.fee-row.total,.cost-row.total{border-top:2px solid var(--ab-line) !important;border-bottom:0 !important;padding-top:16px !important;margin-top:8px !important}
.fee-row.total .fee-value,.cost-row.total .cost-value{color:var(--ab-hot) !important;font-size:24px !important}
.tax-basis,strong.tax-basis{color:var(--ab-hot) !important}

/* Section / card titles inside calculator pages */
.input-card h3,.results-card h3,.summary-card h3{
  font-family:'Inter',sans-serif !important;font-size:18px !important;font-weight:900 !important;
  letter-spacing:-.5px !important;text-transform:uppercase !important;color:var(--ab-ink) !important;
  margin-bottom:18px !important;padding-bottom:14px !important;border-bottom:2px solid var(--ab-line) !important;
  display:flex !important;align-items:center !important;gap:10px !important;
}
.input-card h3 i,.results-card h3 i,.summary-card h3 i{color:var(--ab-hot) !important}

/* Hint text under inputs */
.input-hint,.zonal-hint{
  font-family:'JetBrains Mono',monospace !important;font-size:10.5px !important;letter-spacing:1px !important;
  color:var(--ab-gray) !important;font-weight:600 !important;text-transform:none !important;
}
.input-hint i,.zonal-hint i{color:var(--ab-hot) !important}

/* Asset selector cards */
.asset-option,.option-card{
  padding:16px !important;border:2px solid var(--ab-line) !important;
  background:var(--ab-paper) !important;cursor:pointer;transition:.15s;
}
.asset-option:hover,.option-card:hover{background:var(--ab-paper-2) !important}
.asset-option.selected,.option-card.selected{background:var(--ab-hot) !important;color:#fff !important;border-color:var(--ab-hot) !important}
.asset-option.selected *,.option-card.selected *{color:#fff !important}

/* Search field on inner pages */
.search-field{background:var(--ab-paper) !important;border:2px solid var(--ab-line) !important;border-radius:0 !important}

/* When an input has an absolutely-positioned leading icon (search magnifier),
   the global "input { padding:13px 16px !important }" rule above wipes the
   original left-padding that made room for the icon — so the icon ends up
   stacked on top of the placeholder/typed text. Restore left padding here. */
.search-field-wrapper input,
.search-field-wrapper input[type="text"]{padding-left:46px !important}
.search-field-wrapper .search-icon{
  position:absolute !important;left:18px !important;top:50% !important;
  transform:translateY(-50%) !important;
  color:var(--ab-hot) !important;font-size:13px !important;z-index:2 !important;
  pointer-events:none !important;
}
.dropdown-selected{padding:13px 16px !important;font-family:'Inter',sans-serif !important;font-weight:600 !important;font-size:14px !important;color:var(--ab-ink) !important}
.city-dropdown-list,.zonal-dropdown{
  background:var(--ab-paper) !important;border:2px solid var(--ab-line) !important;border-top:0 !important;
  box-shadow:6px 6px 0 var(--ab-ink) !important;border-radius:0 !important;
}
.city-dropdown-item,.zonal-dropdown-item{
  padding:11px 16px !important;font-size:13px !important;font-weight:600 !important;
  border-bottom:1px solid var(--ab-line) !important;color:var(--ab-ink) !important;
}
.city-dropdown-item:hover,.zonal-dropdown-item:hover{background:var(--ab-hot) !important;color:#fff !important;padding-left:20px !important}
.city-dropdown-item:hover *,.zonal-dropdown-item:hover *{color:#fff !important}

/* Mortgage / closing fees results card */
.results-card,.summary-card{
  background:var(--ab-paper) !important;border:2px solid var(--ab-line) !important;border-radius:0 !important;
  padding:30px !important;box-shadow:none !important;
}
.summary-result,.summary-amount{
  font-family:'Inter',sans-serif !important;font-size:36px !important;font-weight:900 !important;
  letter-spacing:-1.5px !important;color:var(--ab-hot) !important;line-height:1 !important;
}

/* Section eyebrow used across pages */
.eyebrow,.section-eyebrow{
  font-family:'JetBrains Mono',monospace !important;font-size:11px !important;letter-spacing:2px !important;
  text-transform:uppercase !important;color:var(--ab-hot) !important;font-weight:700 !important;
}

/* Brutalist top-strip injected by brutalist-shell.js — ALWAYS dark with light text, both modes */
.ab-top-strip{
  background:#0a0a0a !important;color:#f1eee9 !important;padding:11px 24px;
  font-family:'JetBrains Mono',monospace;font-size:11px;letter-spacing:1px;
  display:flex;justify-content:space-between;align-items:center;border-bottom:0;
}
.ab-top-strip *{color:#f1eee9 !important}
.ab-top-strip .live{display:inline-block;width:7px;height:7px;background:var(--ab-hot) !important;margin-right:8px;animation:abpulse 1.5s infinite}
@keyframes abpulse{0%,100%{opacity:1}50%{opacity:.4}}
@media(max-width:640px){.ab-top-strip{font-size:9.5px;letter-spacing:.5px;padding:8px 14px}.ab-top-strip > :last-child{display:none}}

/* Calculator fee-row padding so values don't touch the box edge */
.fee-row,.cost-row,.amort-row,.rental-row{padding-left:18px !important;padding-right:18px !important}
.input-card,.results-card,.summary-card{padding:24px 22px !important}
@media(max-width:560px){
  .fee-row,.cost-row,.amort-row,.rental-row{padding-left:14px !important;padding-right:14px !important}
  .input-card,.results-card,.summary-card{padding:18px 16px !important}
}

/* Trust strip centering — items inside each cell */
.trust-item{align-items:center !important;text-align:center !important}
.trust-item .trust-text{align-items:center !important;text-align:center !important}
.trust-item .trust-icon{margin-left:auto !important;margin-right:auto !important}

/* Scrollbar */
*::-webkit-scrollbar{width:6px !important;height:6px !important}
*::-webkit-scrollbar-track{background:transparent !important}
*::-webkit-scrollbar-thumb{background:var(--ab-hot) !important;border-radius:0 !important}

/* ════════════════════════════════════════════════════════════
   HIGH-SPECIFICITY DARK-MODE OVERRIDES (beats inline page CSS)
   Inner pages have <style> blocks that hardcode #1a2840/#2a3f58 etc.
   We add `html` to bump specificity above their `body.dark-mode .x` rules.
   NOTE: do NOT use a universal `background-color:initial` reset here — it
   nukes hardcoded backgrounds on modals (print gate, etc.) → transparency bug.
   ════════════════════════════════════════════════════════════ */
html body.dark-mode{background:var(--ab-paper) !important;color:var(--ab-ink) !important}

html body.dark-mode .input-card,
html body.dark-mode .results-card,
html body.dark-mode .summary-card,
html body.dark-mode .blog-card,
html body.dark-mode .resource-card,
html body.dark-mode .value-card,
html body.dark-mode .testimonial-card,
html body.dark-mode .prop-card,
html body.dark-mode .amort-card,
html body.dark-mode .fee-card,
html body.dark-mode .mortgage-card,
html body.dark-mode .rental-card,
html body.dark-mode .zonal-card,
html body.dark-mode .guide-card,
html body.dark-mode .neighborhood-card,
html body.dark-mode .list-card,
html body.dark-mode .about-card,
html body.dark-mode .affordability-card,
html body.dark-mode .result-card,
html body.dark-mode .schedule-card,
html body.dark-mode .radio-option,
html body.dark-mode .schedules-wrapper,
html body.dark-mode .comm-btn,
html body.dark-mode .zonal-search-input,
html body.dark-mode .zonal-dropdown,
html body.dark-mode .zonal-row button,
html body.dark-mode .search-field,
html body.dark-mode .city-dropdown-list,
html body.dark-mode .filter-group,
html body.dark-mode .filter-grid,
html body.dark-mode .advanced-filters,
html body.dark-mode .search-card,
html body.dark-mode .search-row,
html body.dark-mode input,
html body.dark-mode textarea,
html body.dark-mode select{
  background:var(--ab-paper) !important;
  border-color:var(--ab-line) !important;
  color:var(--ab-ink) !important;
}
html body.dark-mode .input-card *:not(i):not(button):not(.tax-basis):not(.fee-value):not(.cost-value){color:var(--ab-ink) !important}
html body.dark-mode .input-card:hover,
html body.dark-mode .results-card:hover,
html body.dark-mode .blog-card:hover,
html body.dark-mode .resource-card:hover,
html body.dark-mode .value-card:hover,
html body.dark-mode .testimonial-card:hover,
html body.dark-mode .prop-card:hover{background:var(--ab-paper-2) !important}
html body.dark-mode .comm-btn.active{background:var(--ab-hot) !important;color:#fff !important;border-color:var(--ab-hot) !important}
html body.dark-mode .navbar{background:var(--ab-paper) !important;border-bottom-color:var(--ab-line) !important}
html body.dark-mode .nav-links a{color:var(--ab-ink) !important}
html body.dark-mode .nav-links a:hover{background:var(--ab-paper-2) !important;color:var(--ab-ink) !important}
html body.dark-mode .contact-btn-nav,html body.dark-mode a.contact-btn-nav{background:var(--ab-hot) !important;color:#fff !important}
html body.dark-mode .nav-dropdown-menu{background:var(--ab-paper) !important;border-color:var(--ab-line) !important;box-shadow:6px 6px 0 var(--ab-paper-2) !important}
html body.dark-mode .nav-dropdown-menu a{color:var(--ab-ink) !important;border-bottom-color:var(--ab-line) !important;background:transparent !important}
html body.dark-mode .nav-dropdown-menu a:hover,
html body.dark-mode .nav-dropdown-menu a.active{background:var(--ab-hot) !important;color:#fff !important}
html body.dark-mode .nav-dropdown-menu a:hover *,
html body.dark-mode .nav-dropdown-menu a.active *{color:#fff !important}
html body.dark-mode .page-hero{background:var(--ab-paper) !important;border-bottom-color:var(--ab-line) !important}
html body.dark-mode .page-hero h1{color:var(--ab-ink) !important}
html body.dark-mode .page-hero p{color:var(--ab-ink-soft) !important}
html body.dark-mode .page-hero .eyebrow{color:var(--ab-hot) !important}
html body.dark-mode footer{background:#000 !important;color:var(--ab-paper) !important}
html body.dark-mode .trust-strip{background:var(--ab-paper) !important;border-color:var(--ab-line) !important}
html body.dark-mode .trust-item{border-color:var(--ab-line) !important}
html body.dark-mode .trust-label{color:var(--ab-ink) !important}
html body.dark-mode .city-dropdown-item,html body.dark-mode .zonal-dropdown-item{color:var(--ab-ink) !important;border-color:var(--ab-line) !important;background:var(--ab-paper) !important}
html body.dark-mode .city-dropdown-item:hover,html body.dark-mode .zonal-dropdown-item:hover{background:var(--ab-hot) !important;color:#fff !important}
html body.dark-mode .fee-row,html body.dark-mode .cost-row{border-bottom-color:var(--ab-line) !important}
html body.dark-mode .fee-label,html body.dark-mode .cost-label,
html body.dark-mode .fee-value,html body.dark-mode .cost-value{color:var(--ab-ink) !important}
html body.dark-mode .fee-row.total .fee-value,html body.dark-mode .cost-row.total .cost-value,
html body.dark-mode .tax-basis,html body.dark-mode strong.tax-basis{color:var(--ab-hot) !important}
html body.dark-mode .summary-result,html body.dark-mode .summary-amount{color:var(--ab-hot) !important}
html body.dark-mode .input-card h3,
html body.dark-mode .results-card h3,
html body.dark-mode .summary-card h3{color:var(--ab-ink) !important;border-bottom-color:var(--ab-line) !important}
html body.dark-mode .input-card h3 i,
html body.dark-mode .results-card h3 i,
html body.dark-mode .summary-card h3 i{color:var(--ab-hot) !important}

/* ════════════════════════════════════════════════════════════
   LOGO COLOR SWAP — handled by syncLogos() in main.js, which swaps
   the <img src> between /img/logo.png (black) and /img/hero-logo.png (white)
   on every dark-mode toggle. No CSS filter so the actual artwork is
   preserved (transparency, anti-aliasing, etc.).
   ════════════════════════════════════════════════════════════ */
.navbar .logo img,.ab-brand img{filter:none !important}

/* ════════════════════════════════════════════════════════════
   TOOLS / GUIDES DROPDOWN — consistent font with rest of nav
   ════════════════════════════════════════════════════════════ */
.nav-dropdown-menu a,.ab-nav-dropdown-menu a{
  font-family:'Inter','Segoe UI',sans-serif !important;
  font-size:12px !important;font-weight:800 !important;
  letter-spacing:.5px !important;text-transform:uppercase !important;
}

/* ════════════════════════════════════════════════════════════
   MOBILE / TABLET RESPONSIVENESS
   ════════════════════════════════════════════════════════════ */
@media(max-width:1100px){
  .navbar{padding:10px 16px !important}
  .navbar .logo img{height:60px !important}
  .nav-links{display:none !important}
  .mobile-menu-btn{display:block !important}
}
@media(max-width:560px){
  .navbar .logo img{height:50px !important}
  h1{font-size:clamp(32px,8vw,48px) !important;letter-spacing:-1.5px !important}
  h2{font-size:clamp(26px,6vw,40px) !important;letter-spacing:-1.2px !important}
  .page-hero{padding:40px 18px 30px !important}
  .input-card,.blog-card,.resource-card,.value-card,.testimonial-card,.results-card,.summary-card{padding:18px !important}
  footer{padding:36px 20px 22px !important}
  .footer-content{grid-template-columns:1fr !important;gap:24px !important;text-align:left !important}
  .footer-bottom{flex-direction:column !important;align-items:flex-start !important;gap:8px !important}
  .floating-buttons{bottom:14px !important;right:14px !important}
  .floating-buttons .floating-btn,.floating-buttons .fab-toggle{width:42px !important;height:42px !important;font-size:15px !important}
  .back-to-top{width:40px !important;height:40px !important;left:14px !important;bottom:14px !important}
  .ab-top-strip{padding:7px 12px !important}
}
@media(max-width:400px){
  .navbar{padding:8px 12px !important}
  .navbar .logo img{height:42px !important}
  .contact-btn-nav,a.contact-btn-nav{padding:10px 12px !important;font-size:10px !important;letter-spacing:1px !important}
}

/* ════════════════════════════════════════════════════════════
   PRINT / PDF — clean letterhead + results only.
   Strip everything noisy. Force black-on-white. A4 portrait.
   Marking elements "print-keep" exempts them from default-hidden.
   ════════════════════════════════════════════════════════════ */
@media print{
  /* Hard white reset: every element becomes white-bg + black-text by default */
  html,body,*,*::before,*::after{
    background:#fff !important;background-color:#fff !important;
    color:#000 !important;
    box-shadow:none !important;text-shadow:none !important;
    filter:none !important;
    border-color:#000 !important;
  }
  body::before,body::after{display:none !important;content:'' !important}

  /* Hide all noise — every interactive / decorative element */
  .navbar,.ab-nav,.ab-top,.ab-top-strip,.ab-top-inner,
  .be-top,.be-mast,.be-nav,.be-rule,.be-hero,
  .ab-hero,.ab-hero-text,.ab-hero-photo,.ab-hero-stats,.ab-hero-meta,
  .ab-ticker,.neighborhoods-marquee,.brand-statement,
  .floating-buttons,.back-to-top,.toast,.scroll-progress,.skip-to-content,
  .glra-print-gate,.print-button-wrapper,.no-print,
  .mobile-overlay,.mobile-menu-btn,.nav-dropdown-menu,
  footer,.footer-content,.footer-bottom,.footer-divider,
  .disclaimer,.disclaimer-box,.input-hint,
  .page-hero,.section-header,.listings-tabs,.view-all-wrapper,
  .search-card,.search-row,.search-float,.advanced-filters,
  .input-card,                              /* hide the form inputs */
  .cta-row,.cta-section,.cta-btn,.cta-primary,.cta-outline,
  .reset-filters-btn,.calculate-btn,.print-btn,
  .broker-spotlight,.broker-container,.broker-info,.broker-image,
  .testimonials,.testimonials-grid,.testimonial-card,
  .resources-section,.resources-grid,.resource-card,
  .how-it-works,.how-inner,.how-steps,.how-step,
  .faq-section,.faq-inner,.faq-list,.faq-item,
  .contact-form-section,.contact-form,
  .trust-strip,.trust-grid,
  button,input[type="button"],input[type="submit"]{
    display:none !important;
  }

  /* Layout reset */
  body{font-family:'Inter','Helvetica',sans-serif !important;font-size:12px !important;line-height:1.45 !important;margin:0 !important;padding:0 !important}
  *{transform:none !important;animation:none !important;transition:none !important}

  /* ── BRANDED LETTERHEAD ── */
  .print-only-header{
    display:block !important;text-align:center !important;
    margin:0 0 20px !important;padding:0 0 16px !important;
    border-bottom:2px solid #000 !important;
  }
  .print-only-header img{
    height:60px !important;width:auto !important;
    margin:0 auto 10px !important;display:block !important;
    filter:none !important;
  }
  .print-only-header h1{
    font-family:'Inter','Helvetica',sans-serif !important;
    font-size:20px !important;font-weight:900 !important;
    letter-spacing:-.5px !important;text-transform:uppercase !important;
    margin:8px 0 4px !important;color:#000 !important;
  }
  .print-only-header .print-subtitle{
    font-size:11px !important;letter-spacing:1px !important;color:#333 !important;margin:0 !important;
  }
  .print-only-header .print-meta{
    font-size:10px !important;color:#666 !important;letter-spacing:.5px !important;margin-top:6px !important;
  }

  /* ── RESULTS / OUTPUT — show cleanly with borders ── */
  .results-card,.summary-card,.result-card,.fee-card,.amort-card,
  .schedules-wrapper,.schedule-card,.result-grid,.print-keep,.print-section{
    display:block !important;
    background:#fff !important;color:#000 !important;
    border:1px solid #000 !important;border-radius:0 !important;
    padding:14px 16px !important;margin:0 0 14px !important;
    page-break-inside:avoid !important;break-inside:avoid !important;
  }
  .result-grid{
    display:grid !important;grid-template-columns:1fr 1fr !important;
    gap:0 !important;border:1px solid #000 !important;padding:0 !important;
  }
  .result-mini{
    display:block !important;padding:12px 14px !important;
    border-right:1px solid #000 !important;border-bottom:1px solid #000 !important;
    background:#fff !important;color:#000 !important;
  }
  .result-mini:nth-child(2n){border-right:0 !important}
  .result-mini:nth-last-child(-n+2){border-bottom:0 !important}
  .result-mini .label,.result-card .label,.summary-card .label{
    font-size:9px !important;letter-spacing:1.5px !important;
    text-transform:uppercase !important;color:#666 !important;
    font-weight:700 !important;display:block !important;margin-bottom:4px !important;
  }
  .result-mini .value,.result-card .value,.summary-card .value,
  .summary-result,.summary-amount{
    font-family:'Inter','Helvetica',sans-serif !important;
    font-size:18px !important;font-weight:900 !important;
    letter-spacing:-.4px !important;color:#000 !important;display:block !important;
  }
  .result-mini .sub,.result-card .sub{
    font-size:9px !important;color:#666 !important;margin-top:3px !important;font-weight:500 !important;
  }

  /* Calculator fee/cost rows — clean two-column table look */
  .fee-row,.cost-row,.amort-row,.rental-row{
    display:flex !important;justify-content:space-between !important;
    padding:7px 12px !important;border-bottom:1px solid #ccc !important;
    background:#fff !important;color:#000 !important;
  }
  .fee-row.total,.cost-row.total{
    border-top:2px solid #000 !important;border-bottom:0 !important;
    padding-top:10px !important;margin-top:6px !important;font-weight:900 !important;
  }
  .fee-label,.cost-label{font-size:11px !important;color:#000 !important;font-weight:600 !important}
  .fee-value,.cost-value{font-size:12px !important;font-weight:700 !important;color:#000 !important}
  .fee-row.total .fee-value,.cost-row.total .cost-value{font-size:15px !important;color:#000 !important}
  .tax-basis,strong.tax-basis{color:#000 !important}

  /* Section / card titles inside printed sections */
  .results-card h3,.summary-card h3,.result-card h3,.print-keep h3,
  .results-card h2,.summary-card h2,.print-keep h2{
    font-family:'Inter','Helvetica',sans-serif !important;
    font-size:13px !important;font-weight:900 !important;
    letter-spacing:-.3px !important;text-transform:uppercase !important;
    color:#000 !important;margin:0 0 10px !important;padding:0 0 8px !important;
    border-bottom:1px solid #000 !important;
  }
  .results-card h3 i,.summary-card h3 i,.result-card h3 i{display:none !important}

  /* Headings outside of cards (page titles for printed reports) */
  h1,h2{
    font-family:'Inter','Helvetica',sans-serif !important;
    color:#000 !important;font-weight:900 !important;
    letter-spacing:-.5px !important;text-transform:uppercase !important;
    margin:0 0 8px !important;
  }
  h1{font-size:18px !important}
  h2{font-size:15px !important}

  /* Links — show URL inline so PDF reader can see */
  a{color:#000 !important;text-decoration:none !important}

  /* Page setup */
  @page{size:A4 portrait;margin:1.4cm 1.5cm}

  /* Avoid page breaks inside grouped data */
  table,.print-section,.result-grid,.results-card,.summary-card{page-break-inside:avoid !important}

  /* Force a footer line at the bottom of every printed page */
  .print-only-footer{
    display:block !important;
    margin-top:24px !important;padding-top:12px !important;
    border-top:1px solid #000 !important;
    font-size:9px !important;color:#666 !important;letter-spacing:.5px !important;
    text-align:center !important;
  }
}
.print-only-footer{display:none}

/* ════════════════════════════════════════════════════════════
   PRINT-GATE MODAL — immune to dark mode (always white card)
   The modal that asks for email before printing must look the
   same in both modes. Hard-coded colors with !important.
   ════════════════════════════════════════════════════════════ */
.glra-print-gate{background:rgba(5,12,22,.88) !important}
.glra-print-gate-card{
  background:#fff !important;color:#0d1b2a !important;
  border:2px solid #0a0a0a !important;border-radius:0 !important;
  box-shadow:8px 8px 0 #ff3d00 !important;
}
.glra-print-gate-card *{color:#0d1b2a !important}
.glra-print-gate-card h3{color:#0a0a0a !important;font-family:'Inter',sans-serif !important;font-weight:900 !important;text-transform:uppercase !important;letter-spacing:-.5px !important}
.glra-print-gate-card > i{color:#ff3d00 !important}
.glra-print-gate-card p{color:#555 !important;font-size:13px !important}
.glra-print-gate-card input{
  background:#fff !important;color:#0d1b2a !important;
  border:2px solid #0a0a0a !important;border-radius:0 !important;
  padding:14px !important;
}
.glra-print-gate-card input:focus{border-color:#ff3d00 !important;outline:0 !important}
.glra-print-gate-submit{
  background:#0a0a0a !important;color:#fff !important;
  border:0 !important;border-radius:0 !important;
  font-family:'JetBrains Mono',monospace !important;
  letter-spacing:2px !important;text-transform:uppercase !important;font-weight:700 !important;
}
.glra-print-gate-submit:hover{background:#ff3d00 !important;color:#fff !important}
.glra-print-gate-submit *{color:#fff !important}
.glra-print-gate-close{color:#999 !important;background:transparent !important}
.glra-print-gate-close:hover{color:#ff3d00 !important}
.glra-print-gate-fine{color:#888 !important;font-size:11px !important}

/* ════════════════════════════════════════════════════════════
   MOBILE FAB TOGGLE — force expand/collapse with hard !important
   so any inline page CSS doesn't break it.
   ════════════════════════════════════════════════════════════ */
@media(max-width:768px){
  .floating-buttons{display:flex !important;flex-direction:column !important;gap:8px !important;position:fixed !important;bottom:18px !important;right:18px !important}
  .floating-buttons > :not(.fab-toggle){display:none !important}
  .floating-buttons.expanded > :not(.fab-toggle){display:flex !important}
  .floating-buttons .fab-toggle{display:flex !important;background:var(--ab-hot) !important;color:#fff !important}
  .floating-buttons .fab-toggle.is-open{background:var(--ab-ink) !important;color:#fff !important}
  .floating-buttons .fab-toggle:hover{background:var(--ab-ink) !important;color:#fff !important}
}

/* ════════════════════════════════════════════════════════════
   MOBILE OVERLAY CLOSE BUTTON
   Visibility is GATED by .active/.open/.show on the overlay parent —
   without this gating, the X stays painted on every page even when the
   menu is closed (which is what was happening on inner pages).
   ════════════════════════════════════════════════════════════ */
.mobile-overlay.active,.mobile-overlay.open,.mobile-overlay.show{left:0 !important}

/* Base style of the X — but HIDDEN by default */
.mobile-overlay .close-menu{
  position:fixed !important;top:18px !important;right:18px !important;
  width:46px !important;height:46px !important;
  display:flex !important;align-items:center !important;justify-content:center !important;
  font-size:24px !important;color:#fff !important;
  background:rgba(255,255,255,.08) !important;border:1px solid rgba(241,238,233,.3) !important;
  border-radius:0 !important;cursor:pointer !important;z-index:5500 !important;
  visibility:hidden !important;opacity:0 !important;pointer-events:none !important;
  transition:opacity .2s ease, visibility .2s ease !important;
}
/* Only revealed when the overlay itself is active/open/show */
.mobile-overlay.active .close-menu,
.mobile-overlay.open .close-menu,
.mobile-overlay.show .close-menu{
  visibility:visible !important;opacity:1 !important;pointer-events:auto !important;
}
.mobile-overlay .close-menu:hover{background:var(--ab-hot) !important;border-color:var(--ab-hot) !important}

/* ════════════════════════════════════════════════════════════
   ALWAYS-DARK SECTIONS — text must always be light cream in BOTH modes.
   Never use var(--ab-paper) for text on these — it inverts in dark mode.
   ════════════════════════════════════════════════════════════ */
.ab-top-strip,.ab-top-strip *{color:#f1eee9 !important}
footer,footer p,footer .footer-col p,footer .footer-col a,footer .footer-col ul li a{color:rgba(241,238,233,.85) !important}
footer .footer-col h4{color:var(--ab-hot) !important}
footer .footer-bottom,footer .footer-bottom p,footer .footer-bottom-links a{color:rgba(241,238,233,.5) !important}
footer .footer-social a{color:#f1eee9 !important}

/* Dark-mode footer override (was using var(--ab-paper) which inverts to dark) */
html body.dark-mode footer{background:#000 !important;color:#f1eee9 !important}
html body.dark-mode footer *{color:#f1eee9 !important}
html body.dark-mode footer .footer-col h4{color:var(--ab-hot) !important}
html body.dark-mode footer .footer-col a,html body.dark-mode footer .footer-col p,html body.dark-mode footer .footer-col ul li a{color:rgba(241,238,233,.85) !important}
html body.dark-mode footer .footer-bottom,html body.dark-mode footer .footer-bottom p,html body.dark-mode footer .footer-bottom-links a{color:rgba(241,238,233,.5) !important}

/* ════════════════════════════════════════════════════════════
   CALCULATOR / TOOL CARDS — make calc-card-header consistent with
   the cream brutalist theme (was using var(--navy) = black with hard-
   to-read white text). Now: cream bg + dark uppercase title + hot accent.
   Same for input-group labels, hints, and inputs across every tool.
   ════════════════════════════════════════════════════════════ */
.calc-card,
html body.dark-mode .calc-card{
  background:var(--ab-paper) !important;
  border:2px solid var(--ab-line) !important;
  border-radius:0 !important;overflow:hidden;margin-bottom:24px !important;
}
.calc-body,
html body.dark-mode .calc-body{
  background:var(--ab-paper) !important;
  padding:22px !important;
}
.calc-card-header,
html body.dark-mode .calc-card-header{
  background:var(--ab-paper) !important;
  border-bottom:2px solid var(--ab-line) !important;
  padding:16px 22px !important;
}
.calc-card-header h2,
html body.dark-mode .calc-card-header h2{
  color:var(--ab-ink) !important;
  font-family:'Inter','Segoe UI',sans-serif !important;
  font-weight:900 !important;text-transform:uppercase !important;
  letter-spacing:-.5px !important;font-size:17px !important;line-height:1 !important;
  display:flex !important;align-items:center !important;gap:10px !important;
}
.calc-card-header h2 i{color:var(--ab-hot) !important;font-size:16px !important}
.calc-card-header p,
html body.dark-mode .calc-card-header p{
  color:var(--ab-gray) !important;
  font-family:'JetBrains Mono',monospace !important;
  font-size:11px !important;letter-spacing:1.5px !important;
  text-transform:uppercase !important;font-weight:600 !important;margin-top:8px !important;
}
.input-group{margin-bottom:14px !important}
.input-group label,
html body.dark-mode .input-group label{
  color:var(--ab-gray) !important;
  font-family:'JetBrains Mono',monospace !important;
  font-size:10.5px !important;letter-spacing:1.8px !important;
  text-transform:uppercase !important;font-weight:700 !important;
  margin-bottom:6px !important;display:block !important;
}
.input-group input,.input-group select,
html body.dark-mode .input-group input,html body.dark-mode .input-group select{
  background:var(--ab-paper) !important;color:var(--ab-ink) !important;
  border:2px solid var(--ab-line) !important;border-radius:0 !important;
  padding:12px 14px !important;font-family:'Inter',sans-serif !important;
  font-size:14px !important;font-weight:600 !important;
}
.input-group input:focus,.input-group select:focus{border-color:var(--ab-hot) !important;outline:0 !important}
.input-hint,
html body.dark-mode .input-hint{
  color:var(--ab-gray) !important;
  font-family:'JetBrains Mono',monospace !important;
  font-size:10.5px !important;letter-spacing:.5px !important;
  text-transform:none !important;font-weight:600 !important;
  margin-top:6px !important;line-height:1.5 !important;
}

/* ════════════════════════════════════════════════════════════
   RESULT HEADLINES & DARK-FEATURE BOXES across all tool pages —
   keep the dramatic black box but force ALL text to light cream
   in BOTH modes (was using var(--gold)/var(--navy) which inverts).
   ════════════════════════════════════════════════════════════ */
.result-headline,.result-summary,.headline-total,.yield-headline,
.yield-headline.net,.tax-total,
html body.dark-mode .result-headline,html body.dark-mode .result-summary,
html body.dark-mode .headline-total,html body.dark-mode .yield-headline,
html body.dark-mode .tax-total{
  background:var(--ab-ink) !important;color:#f1eee9 !important;
  border:0 !important;border-radius:0 !important;
}
.result-headline *,.result-summary *,.headline-total *,.yield-headline *,.tax-total *,
html body.dark-mode .result-headline *,html body.dark-mode .result-summary *,
html body.dark-mode .headline-total *,html body.dark-mode .yield-headline *,
html body.dark-mode .tax-total *{color:#f1eee9 !important}
.result-headline .value,.result-summary .value,.headline-total .value,
.headline-total .amount,.yield-headline .value,.yield-headline .rate,
.result-headline strong,.tax-total .amount{
  color:var(--ab-hot) !important;
  font-family:'Inter','Segoe UI',sans-serif !important;
  font-weight:900 !important;letter-spacing:-1px !important;
}
.result-headline .label,.result-headline .sub,
.result-summary .label,.headline-total .label{
  color:rgba(241,238,233,.7) !important;
  font-family:'JetBrains Mono',monospace !important;
  font-size:11px !important;letter-spacing:1.5px !important;
  text-transform:uppercase !important;font-weight:700 !important;
}

/* Tables (amortization schedule, ercf brackets, breakdown tables) */
.schedule-table th,.factors-table th,.breakdown-table th,.brackets-table th,
.factors-table tr td:first-child,.breakdown-table tr.total td,
.breakdown-table tr.total-row td,
html body.dark-mode .schedule-table th,html body.dark-mode .factors-table th,
html body.dark-mode .breakdown-table th,html body.dark-mode .brackets-table th,
html body.dark-mode .factors-table tr td:first-child,
html body.dark-mode .breakdown-table tr.total td,
html body.dark-mode .breakdown-table tr.total-row td{
  background:var(--ab-ink) !important;color:#f1eee9 !important;
  font-family:'JetBrains Mono',monospace !important;
  font-size:10.5px !important;letter-spacing:1.5px !important;
  text-transform:uppercase !important;font-weight:700 !important;
}
.schedule-table td,.factors-table td,.breakdown-table td,.brackets-table td{
  background:var(--ab-paper) !important;color:var(--ab-ink) !important;
  border-color:var(--ab-line) !important;font-family:'Inter',sans-serif !important;
}

/* Zonal page specifics */
.search-section,html body.dark-mode .search-section{
  background:var(--ab-paper) !important;border-bottom:2px solid var(--ab-line) !important;
}
.search-section *,html body.dark-mode .search-section *{color:var(--ab-ink) !important}
.search-section input{background:var(--ab-paper) !important;color:var(--ab-ink) !important;border:2px solid var(--ab-line) !important}
.rc-header,html body.dark-mode .rc-header{
  background:var(--ab-paper) !important;color:var(--ab-ink) !important;
  border-bottom:2px solid var(--ab-line) !important;
}
.rc-header *,html body.dark-mode .rc-header *{color:var(--ab-ink) !important}

/* Result-mini cards in light mode (affordability bottom grid) */
.result-mini,html body.dark-mode .result-mini{
  background:var(--ab-paper) !important;color:var(--ab-ink) !important;
  border:1px solid var(--ab-line) !important;
}
.result-mini .label{color:var(--ab-gray) !important;font-family:'JetBrains Mono',monospace !important;font-size:10px !important;letter-spacing:1.5px !important;text-transform:uppercase !important;font-weight:700 !important}
.result-mini .value{color:var(--ab-ink) !important;font-family:'Inter',sans-serif !important;font-weight:900 !important;letter-spacing:-.5px !important;font-size:20px !important}
.result-mini.gold .value{color:var(--ab-hot) !important}
.result-mini .sub{color:var(--ab-gray) !important;font-size:11px !important;font-weight:500 !important}