/*
Theme Name: Knox Crawl Space
Theme URI: https://knoxcrawlspace.com
Description: GeneratePress child theme for KnoxCrawlspace.com running the Keil design system (assets/css/main.css) with self-hosted fonts. Templates: header.php, footer.php, front-page.php.
Author: Knox Crawl Space
Template: generatepress
Version: 0.2.0
*/

/* ---------- Self-hosted variable fonts ---------- */
@font-face {
  font-family: 'Inter';
  font-style: normal;
  font-weight: 100 900;
  font-display: swap;
  src: url('fonts/inter-latin-var.woff2') format('woff2');
}
@font-face {
  font-family: 'Inter Tight';
  font-style: normal;
  font-weight: 100 900;
  font-display: swap;
  src: url('fonts/inter-tight-latin-var.woff2') format('woff2');
}
@font-face {
  font-family: 'JetBrains Mono';
  font-style: normal;
  font-weight: 100 800;
  font-display: swap;
  src: url('fonts/jetbrains-mono-latin-var.woff2') format('woff2');
}
@font-face {
  font-family: 'Caveat';
  font-style: normal;
  font-weight: 400 700;
  font-display: swap;
  src: url('fonts/caveat-latin-var.woff2') format('woff2');
}

/* ---------- Knox additions to the ported system ---------- */

/* Footer legal row (Knox-specific) */
.kx-footer__legal {
  display: flex;
  align-items: center;
  gap: 24px;
  justify-content: space-between;
  margin-top: 32px;
  padding-top: 20px;
  border-top: 1px solid rgba(255, 255, 255, 0.12);
  font-family: var(--font-mono);
  font-size: 12px;
  color: var(--ink-4);
}
.kx-footer__legal a { color: var(--ink-4); text-decoration: none; }
.kx-footer__legal a:hover { color: white; }
.kx-footer__disclosure { flex: 1; min-width: 260px; font-family: var(--font-body); }

/* Hero quick-link buttons reuse the phone-btn shell without a phone icon */
.kx-hero__phone-btn { text-decoration: none; }

/* ---------- Conversion components ---------- */

/* Result-moment CTA: appears inside tool output, where intent peaks. */
.kx-result-cta {
  margin-top: 20px;
  padding-top: 18px;
  border-top: 2px solid var(--kx-accent);
}
.kx-result-cta p { font-size: 15px; line-height: 1.55; color: var(--ink-2); margin: 0 0 14px; }
.kx-result-cta__actions { display: flex; flex-wrap: wrap; gap: 10px; align-items: center; }
.kx-result-cta__note {
  display: block;
  margin-top: 10px;
  font-family: var(--font-mono);
  font-size: 10.5px;
  letter-spacing: 0.08em;
  color: var(--ink-3);
}
.kx-btn-ghost {
  background: transparent;
  color: var(--ink);
  border: 1px solid var(--line);
}
.kx-btn-ghost:hover { border-color: var(--ink); color: var(--ink); }

/* Mid-content CTA band — breaks up long hub pages where the ask disappears
   for thousands of pixels. */
.kx-inline-cta {
  display: flex;
  flex-wrap: wrap;
  gap: 20px 32px;
  align-items: center;
  justify-content: space-between;
  background: white;
  border: 1px solid var(--line);
  border-left: 4px solid var(--kx-accent);
  padding: 28px 32px;
}
.kx-inline-cta__copy { flex: 1 1 380px; }
.kx-inline-cta h3 { font-size: 21px; margin: 0 0 6px; line-height: 1.2; }
.kx-inline-cta p { font-size: 15px; line-height: 1.55; color: var(--ink-2); margin: 0; }
.kx-inline-cta__actions { display: flex; flex-wrap: wrap; gap: 10px; }
.kx-inline-cta__note {
  flex-basis: 100%;
  margin: 4px 0 0;
  font-family: var(--font-mono);
  font-size: 10.5px;
  letter-spacing: 0.06em;
  color: var(--ink-3);
}

/* Closing CTA: consequence line + risk-reversal microcopy on the accent band. */
.kx-cta__sub {
  font-size: 17px;
  line-height: 1.55;
  max-width: 620px;
  margin: 0 0 28px;
  color: rgba(255, 255, 255, 0.88);
}
.kx-cta__reassure {
  margin: 18px 0 0;
  font-family: var(--font-mono);
  font-size: 11px;
  letter-spacing: 0.08em;
  color: rgba(255, 255, 255, 0.8);
}

/* Desktop keeps the ask reachable by pinning the header (via the design
   system's own is-sticky affordance) — pages run 6–8 screens deep and the nav
   carries the primary CTA. Mobile stays unpinned: the bottom bar covers it,
   and two fixed elements on a phone is too much chrome. */
@media (max-width: 900px) {
  /* !important: main.css defines .kx-header.is-sticky at equal specificity and
     loads later. On phones the collapsed header shows only logo + hamburger —
     no CTA — so pinning it would cost 65px of screen for nothing while the
     bottom bar already carries the ask. */
  .kx-header.is-sticky { position: relative !important; }
}

/* Sticky conversion bar — mobile only. */
.kx-stickybar { display: none; }
@media (max-width: 900px) {
  .kx-stickybar {
    display: flex;
    position: fixed;
    left: 0; right: 0; bottom: 0;
    z-index: 60;
    gap: 1px;
    background: var(--line);
    box-shadow: 0 -2px 14px rgba(11, 27, 43, 0.13);
  }
  .kx-stickybar a {
    flex: 1;
    min-height: 52px;
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 8px;
    font-family: var(--font-body);
    font-weight: 600;
    font-size: 15px;
    text-decoration: none;
  }
  /* Call carries the accent: the phone is this site's proven channel, so it gets
     the visual weight and the wider share of the bar. */
  .kx-stickybar__call { background: var(--kx-accent); color: white; flex: 1.4; }
  .kx-stickybar__cta { background: white; color: var(--ink); }
  /* `html body` needed: the ported design system resets body padding later in
     the cascade, so a bare `body` rule loses and the bar covers the footer. */
  html body { padding-bottom: 52px; }
  /* Tap targets: every button clears the 44px minimum on touch. */
  .kx-btn, .kx-hero__phone-btn { min-height: 46px; }
  .kx-btn { display: inline-flex; align-items: center; justify-content: center; }
}

/* ---------- Radon-by-zip tool ---------- */
.kx-tool-lookup { display: flex; gap: 12px; max-width: 560px; margin-bottom: 16px; }
.kx-tool-lookup input {
  flex: 1;
  font-family: var(--font-mono);
  font-size: 22px;
  letter-spacing: 0.12em;
  padding: 12px 18px;
  border: 1px solid var(--line);
  border-radius: var(--r-md);
  background: white;
  color: var(--ink);
  min-width: 0;
}
.kx-tool-lookup input:focus { outline: 2px solid var(--kx-accent); outline-offset: 1px; border-color: var(--kx-accent); }
.kx-tool-note { font-size: 13px; color: var(--ink-3); max-width: 680px; }

/* Competence proof — the site has no testimonials yet, but the depth of the
   dataset is itself evidence. State it near the tool where it earns trust. */
.kx-proof-strip {
  display: flex;
  flex-wrap: wrap;
  gap: 10px 28px;
  margin-bottom: 32px;
  font-family: var(--font-mono);
  font-size: 11.5px;
  letter-spacing: 0.06em;
  color: var(--ink-3);
  text-transform: uppercase;
}
.kx-proof-strip strong {
  font-family: var(--font-display);
  font-size: 17px;
  font-weight: 700;
  letter-spacing: -0.01em;
  color: var(--kx-accent);
  margin-right: 5px;
}
.kx-tool-note a { color: var(--ink); }

.kx-zip-result__card {
  background: white;
  border: 1px solid var(--line);
  padding: 28px;
  max-width: 560px;
  margin: 8px 0 24px;
}
.kx-zip-result__head {
  display: flex;
  justify-content: space-between;
  gap: 16px;
  font-family: var(--font-mono);
  font-size: 12px;
  letter-spacing: 0.08em;
  color: var(--ink-3);
  text-transform: uppercase;
  margin-bottom: 14px;
}
.kx-zip-result__status {
  font-weight: 600;
  font-size: 15px;
  padding: 10px 14px;
  margin-bottom: 18px;
  border-left: 3px solid;
}
.kx-zip-result__status.is-ok   { color: #3B6D11; border-color: #3B6D11; background: rgba(59,109,17,0.06); }
.kx-zip-result__status.is-mid  { color: #854F0B; border-color: #BA7517; background: rgba(186,117,23,0.08); }
.kx-zip-result__status.is-high { color: #A32D2D; border-color: #A32D2D; background: rgba(163,45,45,0.07); }
.kx-zip-result__grid { display: grid; grid-template-columns: repeat(4, 1fr); gap: 4px 16px; }
.kx-zip-result__label { font-family: var(--font-mono); font-size: 11px; letter-spacing: 0.1em; color: var(--ink-4); grid-row: 1; }
.kx-zip-result__value { font-family: var(--font-display); font-size: 28px; font-weight: 700; letter-spacing: -0.02em; grid-row: 2; }
.kx-zip-result__foot { font-size: 13px; color: var(--ink-3); margin: 16px 0 0; }
.kx-zip-result__foot a { color: var(--ink); }

.kx-county-block { margin-bottom: 56px; }
.kx-county-block__head { display: flex; flex-wrap: wrap; align-items: baseline; gap: 12px 28px; margin-bottom: 16px; }
.kx-county-block__head h3 { font-size: 26px; margin: 0; }
.kx-county-block__stats { display: flex; flex-wrap: wrap; gap: 8px 20px; font-family: var(--font-mono); font-size: 11px; letter-spacing: 0.08em; color: var(--ink-3); }

.kx-table-wrap { overflow-x: auto; }
.kx-data-table { width: 100%; border-collapse: collapse; font-size: 14.5px; }
.kx-data-table th {
  font-family: var(--font-mono);
  font-size: 11px;
  font-weight: 500;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  color: var(--ink-3);
  text-align: left;
  padding: 8px 12px;
  border-bottom: 1px solid var(--ink);
}
.kx-data-table td { padding: 9px 12px; border-bottom: 1px solid var(--line); }
.kx-data-table th.n, .kx-data-table td.n { text-align: right; font-variant-numeric: tabular-nums; }
.kx-data-table td.mono { font-family: var(--font-mono); font-size: 13px; }
.kx-data-table tbody tr:hover { background: var(--paper); }
/* Small-sample values: de-emphasized but still WCAG-AA legible on both
   white and paper backgrounds (4.64:1 / 4.85:1). */
.kx-low { color: #6A7280; }
.kx-na { color: var(--ink-4); }

/* Accent teal is too dark on ink backgrounds (3.51:1). Lift it for text only —
   never for fills/buttons, where the darker teal carries white text correctly. */
section[style*="var(--ink)"] [style*="color: var(--kx-accent)"],
.kx-section--ink [style*="color: var(--kx-accent)"] { color: #2AA5C9 !important; }

/* ---------- Encapsulation cost calculator ---------- */
.kx-calc { background: white; border: 1px solid var(--line); padding: 32px; max-width: 860px; }
.kx-calc__row { margin-bottom: 28px; }
.kx-calc__label {
  display: block;
  font-family: var(--font-mono);
  font-size: 11px;
  letter-spacing: 0.1em;
  text-transform: uppercase;
  color: var(--ink-3);
  margin-bottom: 12px;
}
.kx-calc__sqft { display: flex; align-items: center; gap: 20px; }
.kx-calc__sqft input[type="range"] { flex: 1; accent-color: var(--kx-accent); }
.kx-calc__sqft input[type="number"] {
  width: 110px;
  font-family: var(--font-mono);
  font-size: 20px;
  padding: 8px 12px;
  border: 1px solid var(--line);
  border-radius: var(--r-md);
  color: var(--ink);
}
.kx-calc__tiers { display: grid; grid-template-columns: repeat(auto-fit, minmax(280px, 1fr)); gap: 16px; }
.kx-tier-card {
  display: block;
  border: 1px solid var(--line);
  padding: 20px;
  cursor: pointer;
  position: relative;
}
.kx-tier-card input { position: absolute; opacity: 0; }
.kx-tier-card:has(input:checked) { border: 2px solid var(--kx-accent); padding: 19px; }
.kx-tier-card__head { display: flex; justify-content: space-between; align-items: baseline; gap: 12px; margin-bottom: 6px; }
.kx-tier-card__name { font-family: var(--font-display); font-weight: 700; font-size: 18px; letter-spacing: -0.01em; }
.kx-tier-card__rate { font-family: var(--font-mono); font-size: 13px; color: var(--kx-accent); white-space: nowrap; }
.kx-tier-card__blurb { display: block; font-size: 14px; color: var(--ink-3); margin-bottom: 12px; line-height: 1.5; }
.kx-tier-card__list { display: grid; gap: 6px; font-size: 13.5px; color: var(--ink-2); }
.kx-tier-card__list span { display: flex; align-items: baseline; gap: 8px; }
.kx-tier-card__list svg { flex: none; transform: translateY(1px); }
.kx-calc__addons { display: flex; flex-wrap: wrap; gap: 10px; }
.kx-addon-pill {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  border: 1px solid var(--line);
  padding: 9px 16px;
  border-radius: 999px;
  font-size: 14px;
  cursor: pointer;
  color: var(--ink-2);
}
.kx-addon-pill:has(input:checked) { border-color: var(--kx-accent); color: var(--ink); background: var(--kx-accent-tint); }
.kx-addon-pill input { accent-color: var(--kx-accent); }
.kx-calc__math { border-top: 1px solid var(--ink); padding-top: 14px; max-width: 560px; }
.kx-calc__math-line { display: flex; justify-content: space-between; gap: 16px; font-family: var(--font-mono); font-size: 13px; color: var(--ink-2); padding: 3px 0; }
.kx-calc__total { display: flex; justify-content: space-between; align-items: baseline; gap: 16px; max-width: 560px; margin-top: 10px; padding-top: 12px; border-top: 1px solid var(--line); }
.kx-calc__total-label { font-family: var(--font-mono); font-size: 11px; letter-spacing: 0.1em; color: var(--ink-3); }
.kx-calc__total-num { font-family: var(--font-display); font-weight: 700; font-size: clamp(26px, 3.5vw, 38px); letter-spacing: -0.02em; }

/* ---------- Page top bar: breadcrumbs + freshness stamp ---------- */
.kx-topbar { background: var(--paper); border-bottom: 1px solid var(--line); }
.kx-topbar__inner {
  display: flex;
  flex-wrap: wrap;
  gap: 8px 24px;
  justify-content: space-between;
  align-items: center;
  padding-top: 12px;
  padding-bottom: 12px;
  font-family: var(--font-mono);
  font-size: 11.5px;
  letter-spacing: 0.04em;
  color: var(--ink-3);
}
.kx-topbar a { color: var(--ink-3); text-decoration: none; }
.kx-topbar a:hover { color: var(--kx-accent); }
.kx-topbar .separator { margin: 0 6px; color: var(--ink-4); }
.kx-topbar__updated { text-transform: uppercase; white-space: nowrap; }
.kx-topbar__meta { display: flex; flex-wrap: wrap; align-items: center; gap: 6px 16px; }

/* ---------------------------------------------------------------------------
 * Lead modal — 3-step request flow. Opens from every CTA that points at
 * /contact/; the contact page itself stays as the no-JS fallback.
 * ------------------------------------------------------------------------- */
/* Map legend on a light section — the base .kx-map__legend is tuned for the
   dark map sections (white text). */
.kx-map__legend--light { color: var(--ink-3); margin: 14px 0 6px; }

/* Homepage H1 carries more words than the design system's 96px display size
   was tuned for — scale it so the headline holds 3 lines and the hero still
   fits one screen. */
.home .kx-hero__title { font-size: clamp(40px, 5vw, 68px); line-height: 1.0; }
/* Lead sentence of the hero lede carries the differentiator; the H1 carries
   the keywords. Both jobs get done without fighting each other. */
.home .kx-hero__lede strong { display: block; margin-bottom: 12px; font-size: 21px; font-weight: 700; color: var(--ink); letter-spacing: -0.015em; }

/* The design system's hero has no bottom padding — it assumed the CTA stack
   was the last thing in it. The proof strip now ends the left column, so the
   hero needs a floor or the text collides with the next section's edge. */
.home .kx-hero__inner { padding-bottom: 64px; }
@media (max-width: 900px) { .home .kx-hero__inner { padding-bottom: 44px; } }

/* Header rework (Dustin, 7/31): the Keil center-logo split couldn't balance
   once the phone landed — right wing ran twice the left. Conventional layout:
   logo left, all six links together, phone + CTA right. Markup order changed
   in header.php; this override only touches desktop — the mobile menu keeps
   the original stacked behavior driven by main.css .is-open rules. */
@media (min-width: 901px) {
  .kx-header__inner { grid-template-columns: auto 1fr auto; }
  .kx-nav { margin-left: 16px; }
}
.kx-nav a, .kx-nav-right a { white-space: nowrap; }
.kx-nav-phone {
  display: inline-flex;
  align-items: center;
  gap: 7px;
  margin-left: 10px;
  font-family: var(--font-mono);
  font-size: 13px;
  letter-spacing: 0.01em;
  font-weight: 600;
  color: var(--kx-accent-deep) !important;
  white-space: nowrap;
}
.kx-nav-phone:hover { color: var(--kx-accent) !important; }
.kx-nav-phone svg { flex: none; }

.kx-hero__reassure {
  margin: 2px 0 0;
  font-family: var(--font-mono);
  font-size: 10.5px;
  letter-spacing: 0.07em;
  color: var(--ink-3);
  text-align: center;
}

.kx-hero__proof {
  display: flex;
  flex-wrap: wrap;
  gap: 10px 30px;
  margin-top: 28px;
  padding-top: 22px;
  border-top: 1px solid var(--line);
  font-family: var(--font-mono);
  font-size: 11.5px;
  letter-spacing: 0.05em;
  text-transform: uppercase;
  color: var(--ink-3);
}
.kx-hero__proof strong {
  font-family: var(--font-display);
  font-size: 19px;
  font-weight: 700;
  letter-spacing: -0.02em;
  color: var(--kx-accent);
  margin-right: 6px;
}
.kx-hero__hook {
  display: block;
  background: var(--ink);
  color: white;
  padding: 24px 26px 22px;
  text-decoration: none;
  transition: transform 0.15s ease;
}
.kx-hero__hook:hover { transform: translateY(-2px); color: white; }
.kx-hero__hook-label {
  display: block;
  font-family: var(--font-mono);
  font-size: 10.5px;
  letter-spacing: 0.12em;
  text-transform: uppercase;
  color: #2AA5C9;
  margin-bottom: 10px;
}
.kx-hero__hook-value {
  display: block;
  font-family: var(--font-display);
  font-size: 52px;
  line-height: 1;
  font-weight: 700;
  letter-spacing: -0.04em;
  color: white;
  margin-bottom: 12px;
}
.kx-hero__hook-value em {
  font-style: normal;
  font-size: 17px;
  font-weight: 500;
  letter-spacing: 0;
  color: rgba(255, 255, 255, 0.62);
  margin-left: 4px;
}
/* The raw pCi/L figure means nothing to a homeowner — this line does the
   translating, and it's the first thing read after the number. */
.kx-hero__hook-trans {
  display: block;
  font-size: 15px;
  line-height: 1.4;
  color: rgba(255, 255, 255, 0.8);
  padding-bottom: 14px;
  margin-bottom: 14px;
  border-bottom: 1px solid rgba(255, 255, 255, 0.16);
}
.kx-hero__hook-trans strong { color: #F0A857; font-weight: 700; }
.kx-hero__hook-note {
  display: block;
  font-size: 13.5px;
  line-height: 1.5;
  color: rgba(255, 255, 255, 0.66);
  margin-bottom: 16px;
}
.kx-hero__hook-cta {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  font-family: var(--font-mono);
  font-size: 11px;
  letter-spacing: 0.1em;
  text-transform: uppercase;
  color: #2AA5C9;
}
.kx-hero__hook:hover .kx-hero__hook-cta { color: white; }
@media (max-width: 900px) {
  .kx-hero__hook-value { font-size: 44px; }
  .kx-hero__proof { gap: 8px 22px; margin-top: 22px; }
}

.kx-modal-overlay {
  position: fixed;
  inset: 0;
  background: rgba(16, 27, 41, 0.55);
  z-index: 300;
  display: none;
  align-items: flex-start;
  justify-content: center;
  padding: 6vh 16px 16px;
  overflow-y: auto;
}
.kx-modal-overlay.is-open { display: flex; }
.kx-modal {
  background: white;
  width: 100%;
  max-width: 560px;
  border-radius: 14px;
  padding: 36px 36px 30px;
  position: relative;
  box-shadow: 0 24px 64px rgba(16, 27, 41, 0.35);
}
.kx-modal__close {
  position: absolute;
  top: 16px;
  right: 16px;
  width: 36px;
  height: 36px;
  padding: 0;
  border: 1px solid var(--line);
  border-radius: 50%;
  background: white;
  color: var(--ink-2);
  display: flex;
  align-items: center;
  justify-content: center;
  cursor: pointer;
}
.kx-modal__close:hover { border-color: var(--ink-3); color: var(--ink); }
.kx-modal__eyebrow {
  font-family: var(--font-mono);
  font-size: 11px;
  letter-spacing: 0.14em;
  color: var(--kx-accent);
  margin: 0 0 10px;
}
.kx-modal__title {
  font-size: clamp(24px, 4vw, 30px);
  line-height: 1.1;
  letter-spacing: -0.03em;
  font-weight: 700;
  margin: 0 0 8px;
}
.kx-modal__sub { font-size: 15px; line-height: 1.55; color: var(--ink-2); margin: 0 0 22px; }
.kx-modal__progress {
  font-family: var(--font-mono);
  font-size: 10.5px;
  letter-spacing: 0.1em;
  color: var(--ink-3);
  margin-bottom: 6px;
}
.kx-modal__bar { height: 3px; background: var(--paper-2); border-radius: 2px; margin-bottom: 22px; overflow: hidden; }
.kx-modal__bar span { display: block; height: 100%; width: 33%; background: var(--kx-accent); transition: width 0.25s ease; }
.kx-modal__step-label {
  font-family: var(--font-mono);
  font-size: 11px;
  letter-spacing: 0.12em;
  color: var(--ink-3);
  text-transform: uppercase;
  margin: 0 0 14px;
}
.kx-modal-cards { display: grid; grid-template-columns: 1fr 1fr; gap: 12px; }
.kx-modal-card {
  border: 1px solid var(--line);
  border-radius: 10px;
  background: white;
  padding: 18px 16px 16px;
  text-align: left;
  cursor: pointer;
  transition: border-color 0.15s ease, background 0.15s ease;
}
/* Cards highlight ONLY on hover or keyboard focus-visible — never on plain
   focus, or the auto-focused card reads as pre-selected. Also beats the base
   button:hover ink-invert. */
.kx-modal-card:focus { background: white; color: var(--ink); border-color: var(--line); outline: none; }
.kx-modal-card:hover,
.kx-modal-card:focus-visible,
.kx-modal-card:active {
  border-color: var(--kx-accent);
  background: var(--kx-accent-tint);
  color: var(--ink);
  outline: none;
}
.kx-modal-card:focus-visible { outline: 2px solid var(--kx-accent); outline-offset: 2px; }
.kx-modal-card:hover .kx-modal-card__name, .kx-modal-card:focus-visible .kx-modal-card__name { color: var(--ink); }
.kx-modal-card:hover .kx-modal-card__desc, .kx-modal-card:focus-visible .kx-modal-card__desc { color: var(--ink-2); }
.kx-modal:focus { outline: none; }
.kx-modal-card__icon { color: var(--kx-accent); margin-bottom: 10px; }
.kx-modal-card__name { display: block; font-weight: 700; font-size: 15.5px; letter-spacing: -0.01em; margin-bottom: 4px; color: var(--ink); }
.kx-modal-card__desc { display: block; font-size: 13px; line-height: 1.45; color: var(--ink-3); }
.kx-modal-pills { display: flex; flex-direction: column; gap: 10px; }
.kx-modal-pill {
  border: 1px solid var(--line);
  border-radius: 10px;
  background: white;
  padding: 14px 16px;
  text-align: left;
  font-size: 15px;
  color: var(--ink);
  cursor: pointer;
}
.kx-modal-pill:focus { background: white; color: var(--ink); border-color: var(--line); outline: none; }
.kx-modal-pill:hover,
.kx-modal-pill:focus-visible,
.kx-modal-pill:active {
  border-color: var(--kx-accent);
  background: var(--kx-accent-tint);
  color: var(--ink);
  outline: none;
}
.kx-modal-pill:focus-visible { outline: 2px solid var(--kx-accent); outline-offset: 2px; }
.kx-modal__close:focus, .kx-modal__close:focus-visible { background: white; color: var(--ink); border-color: var(--kx-accent); outline: none; }
.kx-modal__back:focus, .kx-modal__back:focus-visible { background: transparent; color: var(--ink); outline: none; }
.kx-modal-field { margin-bottom: 14px; }
.kx-modal-field label {
  display: block;
  font-family: var(--font-mono);
  font-size: 10.5px;
  letter-spacing: 0.1em;
  text-transform: uppercase;
  color: var(--ink-3);
  margin-bottom: 6px;
}
.kx-modal-field input, .kx-modal-field textarea {
  width: 100%;
  border: 1px solid var(--line);
  border-radius: 8px;
  padding: 12px 14px;
  font-size: 16px;
  font-family: var(--font-body);
  color: var(--ink);
  background: white;
}
.kx-modal-field input:focus, .kx-modal-field textarea:focus { outline: 2px solid var(--kx-accent); outline-offset: -1px; border-color: var(--kx-accent); }
.kx-modal-field .kx-field-err { display: none; font-size: 12.5px; color: #B42318; margin-top: 5px; }
.kx-modal-field.has-err input { border-color: #B42318; }
.kx-modal-field.has-err .kx-field-err { display: block; }
#kx-lm-senderr { display: none; margin-top: 12px; font-size: 12.5px; color: #B42318; }
.kx-modal__actions { display: flex; align-items: center; gap: 14px; margin-top: 20px; }
.kx-modal__back {
  background: none;
  border: none;
  padding: 8px 4px;
  font-family: var(--font-mono);
  font-size: 11px;
  letter-spacing: 0.1em;
  color: var(--ink-3);
  cursor: pointer;
}
.kx-modal__back:hover { color: var(--ink); }
.kx-modal__note {
  font-size: 12.5px;
  color: var(--ink-3);
  text-align: center;
  margin: 16px 0 0;
}
.kx-modal__note a { color: inherit; }
.kx-modal__consent { font-size: 12px; line-height: 1.5; color: var(--ink-3); margin: 14px 0 0; }
.kx-modal-success { text-align: center; padding: 18px 0 8px; }
.kx-modal-success__icon { color: var(--kx-accent); margin-bottom: 14px; }
.kx-modal-success h3 { font-size: 24px; letter-spacing: -0.02em; margin: 0 0 10px; }
.kx-modal-success p { font-size: 15px; line-height: 1.6; color: var(--ink-2); max-width: 380px; margin: 0 auto 6px; }
.kx-modal [hidden] { display: none !important; }
/* Success state replaces the whole modal — pitch header + progress vanish. */
.kx-modal.is-done .kx-modal__eyebrow,
.kx-modal.is-done .kx-modal__title,
.kx-modal.is-done .kx-modal__sub,
.kx-modal.is-done .kx-modal__progress,
.kx-modal.is-done .kx-modal__bar { display: none; }
@media (max-width: 560px) {
  .kx-modal { padding: 28px 20px 22px; }
  .kx-modal-cards { grid-template-columns: 1fr; }
  .kx-modal-overlay { padding: 3vh 10px 10px; }
}

/* Mobile menu toggle: the theme's base button rule (padding 10px 20px) leaves a
   ~2px content box in this 44px square, crushing the hamburger SVG to a sliver.
   Icon buttons get icon-button geometry. */
.kx-mobile-toggle {
  padding: 0;
  align-items: center;
  justify-content: center;
}
.kx-mobile-toggle svg {
  width: 20px;
  height: 20px;
  flex: none;
}

/* Byline — names the human accountable for the research. */
.kx-byline { display: inline-flex; align-items: center; gap: 8px; }
.kx-byline a { color: var(--ink-2); text-decoration: none; border-bottom: 1px solid var(--line); }
.kx-byline a:hover { color: var(--kx-accent); border-color: var(--kx-accent); }
.kx-byline__img { border-radius: 50%; display: block; object-fit: cover; }
.kx-byline__mark {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 24px;
  height: 24px;
  border-radius: 3px;
  background: var(--kx-accent-tint);
  color: var(--kx-accent-deep);
  font-size: 9.5px;
  font-weight: 600;
  letter-spacing: 0.04em;
}
.kx-byline__monogram {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 26px;
  height: 26px;
  border-radius: 50%;
  background: var(--kx-accent-tint);
  color: var(--kx-accent-deep);
  font-size: 10.5px;
  letter-spacing: 0.04em;
  font-weight: 600;
}
.kx-byline__review {
  padding-left: 12px;
  margin-left: 4px;
  border-left: 1px solid var(--line);
  color: var(--kx-accent-deep);
}

/* Author card on /about/ */
.kx-author-card {
  display: flex;
  flex-wrap: wrap;
  gap: 24px 32px;
  background: white;
  border: 1px solid var(--line);
  border-left: 4px solid var(--kx-accent);
  padding: 32px;
  max-width: 820px;
}
.kx-author-card__avatar { flex: none; }
.kx-author-card__avatar img { width: 96px; height: 96px; border-radius: 50%; object-fit: cover; display: block; }
.kx-author-card__monogram {
  width: 96px; height: 96px; border-radius: 50%;
  background: var(--kx-accent-tint); color: var(--kx-accent-deep);
  display: flex; align-items: center; justify-content: center;
  font-family: var(--font-display); font-weight: 700; font-size: 34px; letter-spacing: -0.01em;
}
.kx-author-card__body { flex: 1 1 380px; }
.kx-author-card__name { font-size: 23px; margin: 0 0 2px; }
.kx-author-card__role {
  font-family: var(--font-mono); font-size: 11px; letter-spacing: 0.1em;
  text-transform: uppercase; color: var(--kx-accent); margin: 0 0 14px;
}
.kx-author-card__body p { font-size: 15.5px; line-height: 1.6; color: var(--ink-2); margin: 0 0 12px; }

/* ---------- Callout note (the "Nerdy tip" equivalent) ---------- */
.kx-note-box {
  display: flex;
  gap: 14px;
  background: var(--kx-accent-tint);
  border-left: 3px solid var(--kx-accent);
  padding: 18px 22px;
  margin: 28px 0;
  max-width: 760px;
}
.kx-note-box__label {
  font-family: var(--font-mono);
  font-size: 11px;
  letter-spacing: 0.1em;
  color: var(--kx-accent);
  white-space: nowrap;
  padding-top: 3px;
}
.kx-note-box p { font-size: 15px; line-height: 1.6; margin: 0; color: var(--ink-2); }

/* ---------- Interactive county map ---------- */
.kx-map { position: relative; }
.kx-map svg { display: block; width: 100%; height: auto; }
.kx-map__county { stroke: var(--ink); stroke-width: 1.2; cursor: pointer; transition: filter 0.1s ease; }
.kx-map__county:hover { stroke: white; stroke-width: 1.6; filter: brightness(1.15); }
.kx-map__controls { display: flex; flex-wrap: wrap; gap: 16px 32px; align-items: center; margin-bottom: 20px; }
.kx-map__toggle { display: inline-flex; border: 1px solid rgba(255,255,255,.25); }
.kx-map__toggle button {
  background: transparent;
  color: rgba(255,255,255,.65);
  border: none;
  font-family: var(--font-mono);
  font-size: 11px;
  letter-spacing: 0.1em;
  padding: 9px 16px;
  cursor: pointer;
}
.kx-map__toggle button.is-active { background: var(--kx-accent); color: white; }
.kx-map__legend { display: flex; flex-wrap: wrap; gap: 14px; font-family: var(--font-mono); font-size: 11px; letter-spacing: 0.06em; color: rgba(255,255,255,.65); }
.kx-map__legend i { display: inline-block; width: 12px; height: 12px; margin-right: 6px; vertical-align: -1px; }
.kx-map__tip {
  position: absolute;
  z-index: 5;
  width: 230px;
  background: white;
  border: 1px solid var(--line);
  padding: 14px 16px;
  pointer-events: none;
  box-shadow: 0 8px 24px rgba(11,27,43,.35);
}
.kx-map__tip-head { font-family: var(--font-display); font-weight: 700; font-size: 15px; color: var(--ink); margin-bottom: 8px; display: flex; justify-content: space-between; gap: 10px; align-items: baseline; }
.kx-map__tip-head em { font-family: var(--font-mono); font-style: normal; font-size: 10px; letter-spacing: 0.08em; color: var(--kx-accent); white-space: nowrap; }
.kx-map__tip-row { display: flex; justify-content: space-between; gap: 12px; font-size: 12.5px; padding: 2px 0; color: var(--ink-2); }
.kx-map__tip-row span:first-child { font-family: var(--font-mono); font-size: 10.5px; letter-spacing: 0.06em; color: var(--ink-3); }
.kx-map__outline { fill: none; stroke: white; stroke-width: 2; pointer-events: none; opacity: 0.85; }
.kx-map--light .kx-map__county { stroke: white; }
.kx-map--light .kx-map__county:hover { stroke: var(--ink); }
.kx-minimap { max-width: 460px; }
.kx-zipmap { max-width: 860px; }

/* ---------- Inline diagrams ---------- */
.kx-diagram {
  margin: 40px 0;
  max-width: 100%;
  background: white;
  border: 1px solid var(--line);
  padding: 24px 20px 14px;
}
.kx-diagram svg { display: block; width: 100%; height: auto; }
.kx-diagram__caption {
  font-family: var(--font-mono);
  font-size: 11.5px;
  letter-spacing: 0.05em;
  color: var(--ink-3);
  margin-top: 14px;
  padding-top: 12px;
  border-top: 1px solid var(--line-2, #F0F1F3);
}

/* Diagrams are drawn on a 1000-unit canvas. Below ~900px the labels scale to
   single-digit pixels and become unreadable, so the figure pans instead of
   shrinking. Caption stays pinned to the visible edge. */
@media (max-width: 900px) {
  .kx-diagram { overflow-x: auto; -webkit-overflow-scrolling: touch; }
  .kx-diagram svg { min-width: 880px; }
  .kx-diagram__caption {
    position: sticky;
    left: 0;
    width: calc(100vw - 88px);
    max-width: 880px;
  }
  .kx-diagram::after {
    content: 'SWIPE TO PAN →';
    position: sticky;
    left: 0;
    display: block;
    font-family: var(--font-mono);
    font-size: 10px;
    letter-spacing: 0.1em;
    color: var(--ink-4);
    margin-top: 8px;
  }
}


/* ---------------------------------------------------------------------------
   CALL LAYER (added 2026-08-12)
   The site launched form-first and the market answered by phone. Every CTA band
   now leads with the number itself, paired with the answer promise. The form
   keeps its place beside it for the people who would rather type.
   ------------------------------------------------------------------------- */

/* Call button: the number is the label, the icon is the ornament. */
.kx-callbtn {
  display: inline-flex;
  align-items: center;
  gap: 9px;
  letter-spacing: 0.01em;
}
.kx-callbtn svg { flex: none; opacity: 0.9; }
.kx-callbtn__num { font-variant-numeric: tabular-nums; white-space: nowrap; }
/* On the dark final band the ported .kx-btn-on-red is an outline; give the call
   action a solid fill so it reads as the primary door. */
.kx-cta .kx-callbtn--dark {
  background: white !important;
  color: var(--ink) !important;
  border-color: white !important;
}
.kx-cta .kx-callbtn--dark:hover { background: var(--tint, #E6F2F5) !important; }

/* Answer promise. Sits directly under the buttons: the one claim no competitor
   in this market can make. */
.kx-answerline {
  display: flex;
  align-items: center;
  justify-content: flex-start;
  gap: 7px;
  margin: 14px 0 0;
  font-family: var(--font-body);
  font-size: 14px;
  font-weight: 600;
  color: var(--kx-accent);
}
.kx-answerline svg { flex: none; }
.kx-cta .kx-answerline { color: white; opacity: 0.95; }
/* Inside the inline band the parent is a wrapping flex row and `.kx-inline-cta p`
   sets its own colour at equal specificity, so this needs the tag qualifier to
   win and flex-basis to drop onto its own line under the buttons. */
.kx-inline-cta p.kx-answerline {
  flex-basis: 100%;
  margin: 6px 0 0;
  color: var(--kx-accent);
}

/* Routing microcopy: tells each visitor which door is theirs instead of making
   them guess. Final band only, so it never turns into wallpaper. */
/* Left-aligned to match the band's title, sub and reassure line. */
.kx-routeline {
  max-width: 620px;
  margin: 8px 0 0;
  font-size: 13.5px;
  line-height: 1.6;
  color: rgba(255, 255, 255, 0.72);
}

/* Desktop call chip. The header is intentionally non-sticky here, so on pages
   running six-plus screens this keeps the number permanently reachable. */
.kx-callchip { display: none; }
@media (min-width: 901px) {
  .kx-callchip {
    position: fixed;
    right: 22px;
    bottom: 22px;
    z-index: 55;
    display: inline-flex;
    align-items: center;
    gap: 11px;
    padding: 12px 18px;
    border-radius: 999px;
    background: var(--kx-accent);
    color: white;
    text-decoration: none;
    box-shadow: 0 6px 24px rgba(11, 27, 43, 0.22);
    transition: transform 0.15s ease, box-shadow 0.15s ease;
  }
  .kx-callchip:hover {
    transform: translateY(-2px);
    box-shadow: 0 10px 30px rgba(11, 27, 43, 0.28);
  }
  .kx-callchip svg { flex: none; }
  .kx-callchip__text { display: flex; flex-direction: column; line-height: 1.25; }
  .kx-callchip__num {
    font-family: var(--font-body);
    font-weight: 700;
    font-size: 16px;
    font-variant-numeric: tabular-nums;
  }
  .kx-callchip__sub {
    font-family: var(--font-mono, var(--font-body));
    font-size: 10.5px;
    letter-spacing: 0.06em;
    text-transform: uppercase;
    opacity: 0.85;
  }
}
@media print { .kx-callchip { display: none; } }

/* Modal escape hatch: catches the people who open the form, stall, and would
   otherwise leave without either door. */
.kx-modal__call {
  margin: 10px 0 0;
  text-align: center;
  font-size: 13.5px;
  color: var(--ink-3, #5a6b7d);
}
.kx-modal__call a {
  display: inline-flex;
  align-items: center;
  gap: 5px;
  font-weight: 700;
  color: var(--kx-accent);
  text-decoration: none;
  white-space: nowrap;
}
.kx-modal__call a:hover { text-decoration: underline; }

/* Tool results: call button matches the form button's height in the pair. */
.kx-result-cta__actions .kx-callbtn { gap: 8px; }

@media (max-width: 900px) {
  /* Mobile: call stacks first inside every band. */
  .kx-inline-cta__actions, .kx-cta__btns, .kx-result-cta__actions {
    flex-wrap: wrap;
  }
  .kx-inline-cta__actions .kx-callbtn,
  .kx-cta__btns .kx-callbtn,
  .kx-result-cta__actions .kx-callbtn { order: -1; }
  .kx-answerline { font-size: 13.5px; }
}
/* Hover colour rescue. The ported system recolours every link on hover with
   `a:hover:not([class*="btn"]):not([class*="cta"]):not([class*="phone"])...`,
   which scores (0,9,1) and does not exempt these two: the class names carry
   "call", not "btn". Both sit on an accent background, so the winning rule
   painted their text the same teal as the pill and the label vanished under the
   cursor. !important is the only thing that clears that specificity, and it is
   the same escape hatch the sticky-header override above uses. */
.kx-callchip:hover,
.kx-callchip:focus,
.kx-callchip:hover .kx-callchip__num,
.kx-callchip:hover .kx-callchip__sub,
.kx-stickybar__call:hover,
.kx-stickybar__call:focus { color: #fff !important; }
/* Network compliance disclaimer. Deliberately quiet: legally present, visually
   subordinate to the footer's own disclosure line, and never near sales copy. */
.kx-footer__compliance {
  margin: 18px 0 0;
  padding-top: 16px;
  border-top: 1px solid rgba(255, 255, 255, 0.09);
  font-family: var(--font-body);
  font-size: 11.5px;
  line-height: 1.65;
  color: rgba(255, 255, 255, 0.42);
  max-width: 100%;
}
.kx-footer__compliance strong {
  color: rgba(255, 255, 255, 0.6);
  font-weight: 600;
}

/* Pricing disclosure card (cost tool). Deliberately styled as a content feature
   rather than fine print: it satisfies the partner's price-warranty concern AND
   reads as methodology transparency, which is an E-E-A-T positive on a YMYL
   money page. Removing the prices would have cost the page its reason to rank. */
.kx-disclosure {
  margin: 28px 0 0;
  padding: 24px 28px;
  background: var(--tint, #E6F2F5);
  border-left: 4px solid var(--kx-accent);
}
.kx-disclosure__title {
  font-family: var(--font-mono);
  font-size: 11px;
  font-weight: 600;
  letter-spacing: 0.1em;
  text-transform: uppercase;
  color: var(--kx-accent);
  margin: 0 0 12px;
}
.kx-disclosure p {
  font-size: 14.5px;
  line-height: 1.65;
  color: var(--ink-2);
  margin: 0 0 12px;
  max-width: 760px;
}
.kx-disclosure p:last-child { margin-bottom: 0; }
.kx-disclosure__foot {
  font-weight: 600;
  color: var(--ink) !important;
}
.kx-footer__compliance a { color: rgba(255, 255, 255, 0.62); text-decoration: underline; }
.kx-footer__compliance a:hover { color: #fff !important; }