/*
Theme Name: NPN Brokers
Theme URI: https://npnbrokers.com/
Author: LetsConvert
Author URI: https://letsconvert.com/
Description: Custom website design for NPN Brokers, the workers' compensation broker for staffing agencies. A hand-built classic WordPress theme with a bespoke design system, lightweight vanilla JavaScript, and no page builders or heavy frameworks.
Version: 1.7.2
Requires at least: 6.2
Tested up to: 6.7
Requires PHP: 7.4
License: Proprietary
Text Domain: npn-brokers
*/

/* ============================================================
   NPN Brokers — Theme stylesheet. All design tokens live in
   :root below. Palette: "Midnight & Lime Punch".
   ============================================================ */

/* ---------- Design tokens ---------- */
:root {
  /* Color — "Midnight & Lime Punch" (scheme 9, client-approved Aug 2026)
     Midnight navy structure · lime CTAs w/ dark text · blue links · bright lime secondary */
  --color-primary: #0F2440;        /* midnight navy — headings, dark bands, footer */
  --color-primary-dark: #0A1930;
  --color-accent: #A4C639;         /* lime — CTAs/buttons + graphic fills (8.54:1 w/ ink text ✓AA) */
  --color-accent-dark: #8FB32A;    /* lime hover (6.89:1 w/ ink text ✓AA) */
  --color-accent-soft: #F4F8E4;    /* lime tint */
  --color-accent-contrast: #1B2005; /* near-black olive — text on lime buttons */
  --color-accent-text: #5F7311;    /* deep olive-lime — accent used AS TEXT on light bgs (≥4.91:1 ✓AA) */
  --color-secondary: #C3E05A;      /* bright lime — decorative only (bars, highlights) */
  --color-link: #0967B5;           /* links stay blue so reading surfaces remain calm */
  --color-link-dark: #07568F;
  --color-link-soft: #EAF3FA;

  --color-bg: #FFFFFF;
  --color-surface: #F8F6F2;        /* warm beige alternate sections (matched to mockup 2) */
  --color-surface-light: #FBFAF7;  /* one shade lighter — large contained panels */
  --color-ink: #152232;
  --color-body: #414E63;
  --color-muted: #5A6B7E;
  --color-border: #E4E8ED;
  --color-border-soft: #ECF0F4;     /* decorative card borders */
  --color-border-strong: #D8DEE6;   /* one shade darker — scannable row dividers */

  --color-on-dark: #FFFFFF;
  --color-on-dark-muted: #BFCBDC;

  /* Typography (system stack — no external font requests) */
  --font-sans: "Source Sans 3", -apple-system, BlinkMacSystemFont, "Segoe UI",
    Roboto, "Helvetica Neue", Arial, sans-serif;
  --font-serif: "Source Serif 4", Georgia, "Times New Roman", serif;  /* Chubb-style editorial headlines */
  --text-xs: 0.8125rem;
  --text-sm: 0.9375rem;
  --text-base: 1.0625rem;
  --text-lg: 1.1875rem;
  --text-xl: 1.375rem;
  --text-2xl: 1.75rem;
  --text-3xl: 2.125rem;
  --text-4xl: 2.75rem;

  /* Spacing */
  --space-1: 0.25rem;
  --space-2: 0.5rem;
  --space-3: 0.75rem;
  --space-4: 1rem;
  --space-5: 1.5rem;
  --space-6: 2rem;
  --space-7: 3rem;
  --space-8: 4.5rem;
  --space-9: 6rem;

  /* Shape + elevation */
  --radius-sm: 6px;
  --radius-md: 12px;
  --shadow-sm: 0 1px 2px rgba(23, 41, 74, 0.05);
  --shadow-md: 0 10px 30px rgba(23, 41, 74, 0.08);

  /* Layout */
  --container: 72rem;
  --container-narrow: 50rem;
}

/* ---------- Reset / base ---------- */
*, *::before, *::after { box-sizing: border-box; }

body {
  margin: 0;
  font-family: var(--font-sans);
  font-size: var(--text-base);
  line-height: 1.6;
  color: var(--color-body);
  background: var(--color-bg);
  -webkit-font-smoothing: antialiased;
}

h1, h2, h3 {
  font-family: var(--font-serif);
  color: var(--color-ink);
  line-height: 1.2;
  margin: 0 0 var(--space-4);
  font-weight: 600;
  letter-spacing: -0.005em;
}
h1 { font-size: clamp(2rem, 4.2vw, var(--text-4xl)); }
h2 { font-size: clamp(1.55rem, 2.8vw, var(--text-3xl)); }
h3 { font-size: var(--text-lg); }

p { margin: 0 0 var(--space-4); }
p:last-child { margin-bottom: 0; }

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

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

/* Accessibility: visible focus states (WCAG 2.1 AA) */
:focus-visible {
  outline: 3px solid var(--color-link);
  outline-offset: 2px;
}

.skip-link {
  position: absolute;
  left: -9999px;
  background: var(--color-primary);
  color: #fff;
  padding: var(--space-3) var(--space-4);
  z-index: 200;
}
.skip-link:focus { left: 0; top: 0; }

.visually-hidden {
  position: absolute !important;
  width: 1px; height: 1px;
  overflow: hidden;
  clip: rect(0 0 0 0);
  white-space: nowrap;
}

/* ---------- Layout ---------- */
.container {
  max-width: var(--container);
  margin-inline: auto;
  padding-inline: var(--space-5);
}
.container--narrow { max-width: var(--container-narrow); }
.container--wide { max-width: 82rem; }

.section { padding-block: var(--space-8); }
.section--tint { background: var(--color-surface); }
.section--tight-bottom { padding-bottom: calc(var(--space-8) - 1.25rem); }
.section--dark { background: var(--color-primary); color: var(--color-on-dark-muted); }
.section--dark h2 { color: var(--color-on-dark); }

.section__header { max-width: 56rem; margin-bottom: var(--space-6); }

.section__note { margin-top: var(--space-3); font-size: var(--text-lg); color: var(--color-muted); }

/* Section eyebrow — small-caps label above a section H2 (matches hero kicker) */
.section__eyebrow {
  font-size: var(--text-sm);
  font-weight: 700;
  letter-spacing: 0.09em;
  text-transform: uppercase;
  color: var(--color-primary);
  margin: 0 0 var(--space-3);
}
.section__header h2 { margin-bottom: var(--space-5); }  /* 16→24px above lede */
.section__lede { font-size: var(--text-lg); color: var(--color-muted); }
.section--dark .section__lede { color: var(--color-on-dark-muted); }

/* ---------- Buttons ---------- */
.btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  font-family: inherit;
  font-size: var(--text-base);
  font-weight: 600;
  line-height: 1.2;
  padding: 0.8125rem 1.5rem;
  border-radius: var(--radius-sm);
  border: 1px solid transparent;
  cursor: pointer;
  text-decoration: none;
  transition: background-color 0.15s ease, color 0.15s ease, border-color 0.15s ease;
}
.btn:hover { text-decoration: none; }
.btn { white-space: nowrap; }

.btn--primary { background: var(--color-accent); color: var(--color-accent-contrast); }
.btn--primary:hover { background: var(--color-accent-dark); color: var(--color-accent-contrast); }

.btn--outline {
  background: #fff;
  color: var(--color-primary);
  border-color: var(--color-border);
}
.btn--outline:hover { border-color: var(--color-link); color: var(--color-link); }

.btn--on-dark { background: #fff; color: var(--color-primary); }
.btn--on-dark:hover { background: var(--color-accent-soft); }

.btn--lg { padding: 1rem 1.75rem; font-size: var(--text-lg); }

/* ---------- Header ---------- */
.site-header {
  position: sticky;
  top: 0;
  z-index: 100;
  background: #fff;
  border-bottom: 1px solid var(--color-border);
}
.site-header__inner {
  display: flex;
  align-items: center;
  gap: var(--space-6);
  min-height: 4.75rem;
}
.site-logo { display: inline-flex; align-items: center; flex: none; }
.site-logo img { width: 195px; height: 36px; }  /* new logo, 2125:392 ratio */

.site-nav__list {
  display: flex;
  align-items: center;
  gap: var(--space-4);
  list-style: none;
  margin: 0;
  padding: 0;
}
.site-nav__link {
  display: inline-flex;
  align-items: center;
  gap: 0.35rem;
  padding: var(--space-2) 0;
  font-size: var(--text-sm);
  font-weight: 500;
  color: var(--color-ink);
  white-space: nowrap;
}
.site-nav__link:hover { color: var(--color-link); text-decoration: none; }

/* Parent label + submenu toggle sit side by side. The caret is a real
   <button> so the parent <a> keeps its own click and stays reachable —
   see the note in inc/nav-walker.php. */
.site-nav__row { display: flex; align-items: center; }
.site-nav__caret {
  appearance: none;
  background: none;
  border: 0;
  padding: 0 0 0 0.35em;
  margin: 0;
  color: inherit;
  font: inherit;
  font-size: 0.55em;
  line-height: 1;
  cursor: pointer;
}
.site-nav__caret:hover { color: var(--color-link); }

/* Products dropdown */
.site-nav__item--dropdown { position: relative; }
/* Hover bridge: fills the gap between the trigger and the dropdown so the
   menu stays open while the cursor travels down into it. */
.site-nav__item--dropdown::after {
  content: "";
  position: absolute;
  left: 0;
  right: 0;
  top: 100%;
  height: 0.85rem;
}
.site-nav__dropdown {
  position: absolute;
  top: calc(100% + 0.75rem);
  left: 50%;
  transform: translateX(-50%);
  min-width: 15rem;
  background: #fff;
  border: 1px solid var(--color-border);
  border-radius: var(--radius-md);
  box-shadow: var(--shadow-md);
  padding: var(--space-2);
  list-style: none;
  margin: 0;
  display: none;
}
.site-nav__item--dropdown:hover .site-nav__dropdown,
.site-nav__item--dropdown:focus-within .site-nav__dropdown,
.site-nav__dropdown.is-open { display: block; }
.site-nav__dropdown a {
  display: block;
  padding: var(--space-2) var(--space-3);
  font-size: var(--text-sm);
  color: var(--color-ink);
  border-radius: var(--radius-sm);
  white-space: nowrap;
}
.site-nav__dropdown a:hover { background: var(--color-link-soft); color: var(--color-link-dark); text-decoration: none; }

/* Two-column dropdown (long lists, e.g. 18 verticals) */
.site-nav__dropdown--cols {
  display: none;
  grid-template-columns: 1fr 1fr;
  gap: 0 var(--space-2);
  min-width: 33rem;
  left: 0;
  transform: none;
}
.site-nav__item--dropdown:hover .site-nav__dropdown--cols,
.site-nav__item--dropdown:focus-within .site-nav__dropdown--cols,
.site-nav__dropdown--cols.is-open { display: grid; }

.site-header__contact {
  margin-left: auto;
  display: flex;
  align-items: center;
  gap: var(--space-5);
}
.header-phone {
  font-size: var(--text-base);
  font-weight: 700;
  color: var(--color-primary);
  white-space: nowrap;
  padding-block: var(--space-2);
}
.header-phone:hover { color: var(--color-accent-text); text-decoration: none; }

.nav-toggle {
  display: none;
  background: none;
  border: 1px solid var(--color-border);
  border-radius: var(--radius-sm);
  padding: var(--space-2) var(--space-3);
  font: inherit;
  font-weight: 600;
  color: var(--color-primary);
  cursor: pointer;
}

/* Hero kicker line above the accent bar */
.hero__kicker {
  font-size: var(--text-sm);
  font-weight: 700;
  letter-spacing: 0.09em;
  text-transform: uppercase;
  color: var(--color-primary);
  margin: 0 0 var(--space-3);
}

/* Coral accent bar — the palette's decorative signature (secondary color) */
.accent-bar {
  width: 3rem;
  height: 4px;
  border-radius: 2px;
  background: var(--color-secondary);
  margin-bottom: var(--space-4);
}

/* ---------- Hero (copy + quote form) ---------- */
.hero {
  background: linear-gradient(180deg, var(--color-surface) 0%, #fff 100%);
  border-bottom: 1px solid var(--color-border);
  padding-block: var(--space-8);
}
.hero__inner {
  display: grid;
  grid-template-columns: minmax(0, 11fr) minmax(0, 9fr);
  gap: var(--space-8);
  align-items: center;
}
.hero h1 { margin-bottom: var(--space-4); }
.hero__subhead {
  font-size: var(--text-xl);
  color: var(--color-body);
  max-width: 30em;
  margin-bottom: var(--space-6);
}
.hero__phone-line { font-size: var(--text-base); color: var(--color-muted); }
.hero__phone-line a { font-weight: 700; color: var(--color-primary); white-space: nowrap; }
.hero__phone-line a:hover { color: var(--color-accent-text); }

/* Quote form card */
.quote-card {
  background: #fff;
  border: 1px solid var(--color-border);
  border-radius: var(--radius-md);
  box-shadow: var(--shadow-md);
  padding: var(--space-6);
}
.quote-card__title {
  font-size: var(--text-xl);
  font-weight: 700;
  color: var(--color-ink);
  margin: 0 0 var(--space-4);
  text-align: center;
}
.quote-card__subtitle {
  font-size: var(--text-sm);
  color: var(--color-muted);
  margin-bottom: var(--space-5);
}
.form-grid { display: grid; gap: var(--space-3); grid-template-columns: 1fr 1fr; }
.form-field input::placeholder { color: var(--color-muted); }  /* 5.5:1 — placeholders act as visible labels */
.form-field { display: flex; flex-direction: column; gap: var(--space-1); }
.form-field--full { grid-column: 1 / -1; }
.form-field label {
  font-size: var(--text-xs);
  font-weight: 600;
  color: var(--color-ink);
}
.form-field input,
.form-field select,
.form-field textarea {
  font: inherit;
  font-size: 1rem;  /* ≥16px — prevents iOS focus-zoom */
  color: var(--color-ink);
  padding: 0.6875rem var(--space-3);
  border: 1px solid var(--color-border);
  border-radius: var(--radius-sm);
  background: #fff;
  width: 100%;
}
.form-field input:focus,
.form-field select:focus,
.form-field textarea:focus {
  outline: none;
  border-color: var(--color-link);
  box-shadow: 0 0 0 3px var(--color-link-soft);
}
.quote-card .btn { width: 100%; margin-top: var(--space-5); }
.quote-card__phone {
  text-align: center;
  font-size: var(--text-sm);
  color: var(--color-muted);
  margin-top: var(--space-4);
}
.quote-card__phone a { font-weight: 700; color: var(--color-primary); }

/* ---------- Trust bar (proof points under hero) ---------- */
.trust-bar {
  background: linear-gradient(180deg, var(--color-primary) 0%, var(--color-primary-dark) 100%);
}
.trust-bar__inner {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: var(--space-6);
  padding-block: var(--space-7);
}
.trust-bar__item {
  text-align: center;
  padding-inline: var(--space-2);
}
.trust-bar__item + .trust-bar__item { border-left: 2px solid rgba(255, 255, 255, 0.18); }
.trust-bar__title {
  color: #fff;
  font-size: 1.3125rem;
  font-weight: 700;
  letter-spacing: -0.01em;
  white-space: nowrap;
  margin: 0 0 var(--space-2);
}
@media (max-width: 72rem) {
  .trust-bar__title { white-space: normal; }
}
.trust-bar__text {
  color: rgba(255, 255, 255, 0.88);
  font-size: var(--text-base);
  margin: 0 auto;
  max-width: 19em;
}

/* ---------- Industry groups (open columns, matched to mockup 2) ---------- */
.industry-groups {
  display: grid;
  grid-template-columns: repeat(4, minmax(0, 1fr));
  gap: 2.2rem 2.4rem;
}
.industry-group__label {
  font-family: var(--font-sans);
  font-size: var(--text-base);
  font-weight: 700;
  color: var(--color-ink);
  margin: 0 0 1.1rem;
  padding-bottom: 0.8rem;
  border-bottom: 2px solid var(--color-ink);
}
.industry-group__list {
  list-style: none;
  margin: 0;
  padding: 0;
}
.industry-group__list li { padding: 0.65rem 0; font-size: var(--text-sm); }
.industry-group__list a { color: var(--color-body); }
.industry-group__list a:hover { color: var(--color-accent-text); text-decoration: none; }
.industry-groups__all {
  text-align: center;
  margin: var(--space-6) 0 0;
}
.section__header--center { margin-inline: auto; text-align: center; }

/* ---------- Industries list (clean, no icons) ---------- */
.link-columns {
  list-style: none;
  margin: 0;
  padding: 0;
  columns: 4 13rem;
  column-gap: var(--space-6);
}
.link-columns li {
  break-inside: avoid;
  border-bottom: 1px solid var(--color-border);
}
.link-columns a {
  display: block;
  padding: var(--space-3) 0;
  font-size: var(--text-base);
  font-weight: 500;
  color: var(--color-ink);
}
.link-columns a:hover { color: var(--color-link); text-decoration: none; }

/* ---------- Offer cards ---------- */
.offer-grid {
  display: grid;
  gap: var(--space-5);
  grid-template-columns: repeat(auto-fit, minmax(min(17rem, 100%), 1fr));
}
.offer-card {
  background: #fff;
  border: 1px solid var(--color-border-soft);
  border-radius: var(--radius-md);
  padding: var(--space-6);
  display: flex;
  flex-direction: column;
}
/* Coral accent line at the top of each feature card (ties to hero accent bar) */
.offer-card::before {
  content: "";
  display: block;
  width: 1.875rem;   /* 30px */
  height: 3px;
  border-radius: 2px;
  background: var(--color-secondary);
  margin-bottom: var(--space-4);
}
.offer-card h3 { margin-bottom: var(--space-3); font-size: var(--text-xl); }
.offer-card p { font-size: var(--text-sm); margin-bottom: var(--space-4); }
.offer-card__link {
  display: inline-flex;
  align-items: center;
  gap: var(--space-2);
  font-size: var(--text-sm);
  font-weight: 600;
  margin-top: auto;      /* anchors the link to the card bottom */
  align-self: flex-start;
}
.offer-card__link::after {
  content: "\2192";
  transition: transform 0.15s ease;
}
.offer-card__link:hover { text-decoration: none; }
.offer-card__link:hover::after { transform: translateX(3px); }

/* ---------- Process band (compact transition section) ---------- */
.process-band { padding-block: var(--space-6); }
.process-band__title {
  font-size: var(--text-xl);
  margin-bottom: var(--space-5);
}
.steps--compact { gap: var(--space-6); }
.steps--compact li::before {
  border-bottom-width: 2px;
  padding-bottom: var(--space-1);
  margin-bottom: var(--space-3);
}
.steps--compact h3 { font-size: var(--text-base); }
.steps--compact p { font-size: var(--text-sm); }

/* ---------- Steps ---------- */
.steps {
  display: grid;
  gap: var(--space-6);
  grid-template-columns: repeat(auto-fit, minmax(15rem, 1fr));
  counter-reset: step;
  list-style: none;
  margin: 0;
  padding: 0;
}
.steps li { counter-increment: step; }
.steps li::before {
  content: counter(step, decimal-leading-zero);
  display: block;
  font-size: var(--text-sm);
  font-weight: 700;
  letter-spacing: 0.05em;
  color: var(--color-accent-text);
  border-bottom: 2px solid var(--color-accent);
  padding-bottom: var(--space-2);
  margin-bottom: var(--space-4);
}
.steps h3 { margin-bottom: var(--space-2); }
.steps p { font-size: var(--text-sm); margin: 0; }

/* ---------- High-mod band ---------- */
.mod-band__inner {
  display: grid;
  grid-template-columns: minmax(0, 1fr) minmax(0, 1fr);
  gap: var(--space-8);
  align-items: center;
}
.mod-scale {
  border: 1px solid rgba(255, 255, 255, 0.16);
  border-radius: var(--radius-md);
  padding: var(--space-6);
}
.mod-scale__row {
  display: grid;
  grid-template-columns: 3.5rem 1fr 8.5rem;
  align-items: center;
  gap: var(--space-3);
  padding-block: var(--space-3);
}
.mod-scale__row + .mod-scale__row { border-top: 1px solid rgba(255, 255, 255, 0.1); }
.mod-scale__mod { font-weight: 700; color: #fff; }
.mod-scale__bar { height: 0.5rem; border-radius: 99px; background: var(--color-secondary); }
.mod-scale__pct { font-size: var(--text-sm); color: var(--color-on-dark-muted); text-align: right; white-space: nowrap; }

/* ---------- States ---------- */
/* One contained directory panel — editorial, not card-heavy */
.state-panel {
  background: var(--color-surface-light);
  border: 1px solid var(--color-border-soft);
  border-radius: var(--radius-md);
  padding: var(--space-4) var(--space-6);
}
.state-panel .link-columns a {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: var(--space-3);
}
.state-panel .link-columns a::after {
  content: "\2192";
  flex: none;
  color: var(--color-muted);
  opacity: 0.55;
  transition: color 0.15s ease, opacity 0.15s ease, transform 0.15s ease;
}
.state-panel .link-columns a:hover::after {
  color: var(--color-accent-text);
  opacity: 1;
  transform: translateX(3px);
}
/* State-fund informational row */
.states-note {
  font-size: var(--text-sm);
  color: var(--color-body);
  background: var(--color-surface);
  border-left: 3px solid var(--color-secondary);
  border-radius: 0 var(--radius-sm) var(--radius-sm) 0;
  padding: var(--space-3) var(--space-4);
  margin-top: var(--space-4);
}
.states-note p { margin: 0; }
.states-note strong { color: var(--color-primary); }
.states-note a { font-weight: 600; white-space: nowrap; }

/* ---------- Agents strip ---------- */
.agents-strip { border-top: 1px solid var(--color-border); border-bottom: 1px solid var(--color-border); }
.agents-strip__inner {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  justify-content: space-between;
  gap: var(--space-4);
  padding-block: var(--space-6);
}
.agents-strip__title { font-size: var(--text-lg); font-weight: 700; color: var(--color-ink); margin: 0 0 var(--space-1); }
.agents-strip__text { font-size: var(--text-sm); color: var(--color-muted); margin: 0; }

/* ---------- The NPN Difference (side-by-side comparison) ---------- */
.compare {
  display: grid;
  gap: var(--space-5);
  grid-template-columns: minmax(0, 45fr) minmax(0, 55fr);
  align-items: stretch;   /* equal height, top/bottom aligned */
}
.compare__col {
  background: var(--color-surface-light);
  border: 1px solid var(--color-border-soft);
  border-radius: var(--radius-md);
  padding: var(--space-6);
}
.compare__col--npn {
  background: #FDF9F7;   /* faint warm tint — featured panel */
  border: 2px solid var(--color-primary);
  box-shadow: var(--shadow-sm);
}
.compare__title {
  font-size: var(--text-lg);
  margin-bottom: var(--space-4);
  color: var(--color-muted);
}
.compare__col--npn .compare__title {
  color: var(--color-primary);
  font-size: var(--text-xl);
}
.compare__list {
  list-style: none;
  margin: 0;
  padding: 0;
  display: grid;
  gap: var(--space-3);
  font-size: var(--text-sm);
}
.compare__list li {
  display: flex;
  gap: var(--space-3);
  align-items: flex-start;
}
.compare__list li::before {
  flex: none;
  font-weight: 700;
  line-height: 1.5;
}
.compare__list--con li { color: var(--color-muted); }
.compare__list--con li::before { content: "–"; color: #B3BCC7; font-weight: 400; }
.compare__list--pro { font-size: var(--text-base); }
.compare__list--pro li::before { content: "✓"; color: var(--color-accent-text); }
.compare__cta {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  justify-content: center;
  gap: var(--space-4);
  margin-top: var(--space-6);
}

/* ---------- FAQ (two-column, accordion lines — no cards) ---------- */
.faq-layout {
  display: grid;
  grid-template-columns: minmax(0, 1fr) minmax(0, 2fr);
  gap: var(--space-7);
  align-items: start;
}
.faq-layout__contact { margin-top: var(--space-4); font-weight: 600; }

.faq-item { border-bottom: 1px solid var(--color-border-strong); }
.faq-item:first-of-type { border-top: 1px solid var(--color-border-strong); }
.faq-item summary {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: var(--space-4);
  padding-block: var(--space-4);
  font-size: var(--text-lg);
  font-weight: 600;
  color: var(--color-ink);
  cursor: pointer;
  list-style: none;               /* hide default disclosure marker */
}
.faq-item summary::-webkit-details-marker { display: none; }
.faq-item summary::after {
  content: "+";
  flex: none;
  font-size: 1.375rem;
  font-weight: 400;
  color: var(--color-muted);
  line-height: 1;
  transition: color 0.15s ease;
}
.faq-item[open] summary::after {
  content: "\2212";               /* minus — collapse, not dismiss */
  color: var(--color-accent-text);
}
.faq-item summary:hover { color: var(--color-link); }
.faq-item p {
  font-size: var(--text-sm);
  padding-bottom: var(--space-4);
  max-width: 60em;
}

/* ---------- CTA band ---------- */
.cta-band { background: var(--color-primary); color: var(--color-on-dark-muted); text-align: center; }
.cta-band h2 { color: #fff; }
.cta-band .section__lede { max-width: 34em; margin-inline: auto; }
.cta-band__actions {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  justify-content: center;
  gap: var(--space-4);
  margin-top: var(--space-6);
}
.cta-band__phone { color: var(--color-on-dark-muted); font-size: var(--text-base); }
.cta-band__phone a { color: #fff; font-weight: 700; white-space: nowrap; }

/* ---------- Footer (solid dark block; conversion CTA on top) ---------- */
.site-footer {
  background: var(--color-primary-dark);
  color: var(--color-on-dark-muted);
  font-size: var(--text-sm);
}

.site-footer__cta {
  background: var(--color-primary);
  border-bottom: 1px solid rgba(255, 255, 255, 0.12);
}
.site-footer__cta-inner {
  display: grid;
  grid-template-columns: minmax(0, 1fr) minmax(0, 29rem);
  align-items: center;
  gap: var(--space-7);
  padding-block: var(--space-7);
}
.site-footer__cta-title {
  /* v1.5.4: now a <p>, not an h2 — the next four lines carry over what the
     base h1/h2/h3 rule used to supply, so rendering is unchanged. */
  font-family: var(--font-serif);
  font-weight: 600;
  line-height: 1.2;
  letter-spacing: -0.005em;
  color: #fff;
  font-size: clamp(1.9rem, 3.3vw, 2.5rem);  /* 40px desktop — h1-adjacent scale */
  margin: 0 0 var(--space-4);
}
.site-footer__cta-title span { display: block; }  /* one sentence per line */
.site-footer__cta .accent-bar { margin-bottom: var(--space-4); }
.site-footer__cta-text { color: var(--color-on-dark-muted); margin: 0 0 var(--space-4); max-width: 32em; }
.site-footer__cta-process {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: var(--space-2) var(--space-3);
  font-size: var(--text-sm);
  font-weight: 600;
  color: rgba(255, 255, 255, 0.92);
  margin: 0 0 var(--space-4);
}
.site-footer__cta-process-arrow {
  color: var(--color-secondary);
  opacity: 0.65;
  font-size: var(--text-xs);
  font-weight: 400;
}
.site-footer__cta-note {
  font-size: var(--text-sm);
  color: var(--color-on-dark-muted);
  margin: 0 0 var(--space-2);
}
.site-footer__cta-phone { margin: 0; color: var(--color-on-dark-muted); }
.site-footer__cta-phone a { color: #fff; font-weight: 700; white-space: nowrap; }

/* The white quote card keeps light-surface colors even inside the dark footer */
.site-footer .quote-card a { color: var(--color-link); }
.site-footer .quote-card .quote-card__phone a { color: var(--color-primary); }

.site-footer a { color: var(--color-on-dark-muted); }
.site-footer a:hover { color: #fff; }

.site-footer__grid {
  display: grid;
  gap: var(--space-6);
  grid-template-columns: 2fr 1fr 1fr 1fr 1fr;
  padding-block: var(--space-8) var(--space-7);
}
.site-footer__logo img { width: 179px; height: 33px; margin-bottom: var(--space-4); }
.site-footer__heading {
  /* v1.5.4: now a <p>, not an h2 — line-height carried over from the base
     heading rule so rendering is unchanged. */
  font-family: var(--font-sans);
  line-height: 1.2;
  color: #fff;
  font-size: var(--text-xs);
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: 0.07em;
  margin: 0 0 var(--space-4);
}
.site-footer__list { list-style: none; margin: 0; padding: 0; display: grid; gap: var(--space-1); }
.site-footer__list a { display: inline-block; padding-block: 0.3125rem; }
.site-footer__blurb { margin-bottom: var(--space-4); max-width: 26rem; }
.site-footer__phone { font-weight: 700; color: #fff; font-size: var(--text-base); }
/* v1.5.4 — office location under the phone number (v1.6.1: business hours removed sitewide). */
.site-footer__location { margin: var(--space-2) 0 0; color: var(--color-on-dark-muted); font-size: var(--text-sm); }

.site-footer__bottom { border-top: 1px solid rgba(255, 255, 255, 0.12); padding-block: var(--space-4); }
.site-footer__bottom-inner {
  display: flex;
  flex-wrap: wrap;
  gap: var(--space-2) var(--space-5);
  justify-content: space-between;
  font-size: var(--text-xs);
}
.site-footer__legal-links { display: flex; gap: var(--space-4); list-style: none; margin: 0; padding: 0; }

/* ---------- Sticky mobile call bar (mobile only) ---------- */
.mobile-call-bar {
  display: none;
  position: fixed;
  inset-inline: 0;
  bottom: 0;
  z-index: 110;
  background: #fff;
  border-top: 1px solid var(--color-border);
  box-shadow: 0 -4px 16px rgba(23, 41, 74, 0.1);
  padding: var(--space-3) var(--space-4);
  gap: var(--space-3);
}
.mobile-call-bar .btn { flex: 1; padding-block: 0.75rem; font-size: var(--text-sm); }

/* ---------- Responsive ---------- */
@media (max-width: 72rem) {
  .site-nav {
    display: none;
    position: absolute;
    top: 100%;
    left: 0; right: 0;
    background: #fff;
    border-bottom: 1px solid var(--color-border);
    box-shadow: var(--shadow-md);
    padding: var(--space-3) var(--space-5) var(--space-5);
  }
  .site-nav.is-open { display: block; }
  .site-nav__list { flex-direction: column; align-items: stretch; gap: 0; }
  .site-nav__link { padding: var(--space-3) 0; border-bottom: 1px solid var(--color-border); width: 100%; }

  /* Parent row: the label takes the width, the caret is a 44px tap target
     on the right. Tapping the label navigates; tapping the caret opens. */
  .site-nav__row { border-bottom: 1px solid var(--color-border); }
  .site-nav__row .site-nav__link { border-bottom: 0; flex: 1 1 auto; }
  .site-nav__row .site-nav__caret {
    flex: none;
    font-size: 0.8rem;
    padding: 0;
    width: 2.75rem;
    min-height: 2.75rem;
    display: flex;
    align-items: center;
    justify-content: center;
    color: var(--color-muted);
    transition: transform 0.15s ease;
  }
  .site-nav__row .site-nav__caret[aria-expanded="true"] { transform: rotate(180deg); }

  /* Submenus are CLOSED until their caret is pressed. Hover/focus-within
     must NOT reveal them here: on a touch screen a tap counts as a hover,
     which would re-open the list the moment the parent link is tapped. */
  .site-nav__dropdown,
  .site-nav__item--dropdown:hover .site-nav__dropdown,
  .site-nav__item--dropdown:focus-within .site-nav__dropdown,
  .site-nav__dropdown--cols,
  .site-nav__item--dropdown:hover .site-nav__dropdown--cols,
  .site-nav__item--dropdown:focus-within .site-nav__dropdown--cols {
    display: none;
  }
  /* One column, full width. The desktop rules set min-width: 33rem and two
     columns on the Industries menu, which overflowed the phone viewport
     sideways — that is the "two rows wide" menu. Reset both here. */
  .site-nav__dropdown,
  .site-nav__dropdown--cols {
    position: static;
    transform: none;
    border: none;
    box-shadow: none;
    min-width: 0;
    left: auto;
    grid-template-columns: 1fr;
    padding: 0 0 var(--space-2) var(--space-4);
  }
  /* Specificity note: the hover/focus-within rules above are 3 classes
     deep, so a plain `.site-nav__dropdown.is-open` (2) LOSES to them and
     the menu refuses to open after a tap — a tap leaves the element in
     :hover. Keep these selectors at 4 so the open state always wins. */
  .site-nav .site-nav__item--dropdown .site-nav__dropdown.is-open,
  .site-nav .site-nav__item--dropdown .site-nav__dropdown--cols.is-open { display: block; }
  .site-nav__dropdown a { white-space: normal; padding-block: var(--space-3); }
  .nav-toggle { display: inline-flex; order: 2; }   /* hamburger sits at the far right */
  .site-header__contact { order: 1; margin-left: auto; }
  .site-header__contact .btn { display: none; }

  .hero__inner { grid-template-columns: 1fr; gap: var(--space-6); }
  .mod-band__inner { grid-template-columns: 1fr; gap: var(--space-6); }
  .compare { grid-template-columns: 1fr; }
  .faq-layout { grid-template-columns: 1fr; gap: var(--space-5); }
  .trust-bar__inner { grid-template-columns: 1fr 1fr; }
  .trust-bar__item:nth-child(3) { border-left: none; }
  .industry-groups { grid-template-columns: 1fr 1fr; }
  .site-footer__grid { grid-template-columns: 1fr 1fr; }
  .site-footer__cta-inner { grid-template-columns: 1fr; }
}

@media (max-width: 40rem) {
  .section { padding-block: var(--space-7); }
  .site-logo img { width: 163px; height: 30px; }
  .header-phone { display: none; }
  .form-grid { grid-template-columns: 1fr; }
  .site-footer__grid { grid-template-columns: 1fr; gap: var(--space-6); }
  .industry-groups { grid-template-columns: 1fr; }
  .mobile-call-bar { display: flex; }
  body { padding-bottom: 4.25rem; } /* room for sticky call bar */
  .btn--lg { width: 100%; }
}

/* ============================================================
   INTERIOR PAGE PATTERNS (added with the template build-out)
   ============================================================ */

/* ---------- Interior page hero ---------- */
.page-hero {
  background: linear-gradient(180deg, var(--color-surface) 0%, #fff 100%);
  border-bottom: 1px solid var(--color-border);
  padding-block: var(--space-7);
}
/* First section after the hero: tighter top padding (Sep 2026 review) */
.page-hero + .section,
.page-hero + section.section { padding-top: var(--space-6); }
.page-hero h1 { max-width: none; margin-bottom: var(--space-4); }
.page-hero__lede { font-size: var(--text-lg); color: var(--color-body); max-width: none; margin-bottom: 0; }
.page-hero .dual-cta { margin-top: var(--space-5); }
.dual-cta { display: flex; flex-wrap: wrap; align-items: center; gap: var(--space-4); }
.dual-cta__or { font-size: var(--text-sm); color: var(--color-muted); margin: 0; }
.dual-cta__or a { font-weight: 700; color: var(--color-primary); white-space: nowrap; }

/* ---------- Breadcrumbs ---------- */
.breadcrumb {
  font-size: var(--text-xs);
  color: var(--color-muted);
  margin: 0 0 var(--space-4);
}
.breadcrumb a { color: var(--color-muted); }
.breadcrumb a:hover { color: var(--color-link); }
.breadcrumb__sep { margin-inline: var(--space-2); color: var(--color-border-strong); }

/* ---------- SEO content prose ---------- */
.content-prose h2 { margin-top: var(--space-7); }
.content-prose h2:first-child { margin-top: 0; }
.content-prose h3 { margin-top: var(--space-5); }
.content-prose ul { margin: 0 0 var(--space-4); padding-left: 1.25rem; }
.content-prose li { margin-bottom: var(--space-2); }

/* Informational callout (generalized from the states note) */
.callout {
  font-size: var(--text-sm);
  color: var(--color-body);
  background: var(--color-surface);
  border-left: 3px solid var(--color-secondary);
  border-radius: 0 var(--radius-sm) var(--radius-sm) 0;
  padding: var(--space-4) var(--space-5);
  margin-block: var(--space-5);
}
.callout p { margin: 0; }
.callout strong { color: var(--color-primary); }
.callout a { font-weight: 600; }

/* ---------- Featured band (e.g. core specialty on industries hub) ---------- */
.feature-band {
  background: var(--color-primary);
  border-radius: var(--radius-md);
  padding: var(--space-6);
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  justify-content: space-between;
  gap: var(--space-4);
  /* Breathing room from whatever sits above (prose ends flush otherwise);
     templates that set an inline margin-top simply override this. */
  margin-top: var(--space-7);
}
.feature-band + .feature-band { margin-top: var(--space-5); }
/* A band opening its own section already gets the section's padding. */
.feature-band:first-child { margin-top: 0; }
.feature-band__title { color: #fff; font-size: var(--text-xl); font-weight: 700; margin: 0 0 var(--space-1); }
.feature-band__text { color: var(--color-on-dark-muted); font-size: var(--text-sm); margin: 0; max-width: 44em; }

/* ---------- Solution sections (How We Help) ---------- */
.solution {
  display: grid;
  grid-template-columns: minmax(0, 3fr) minmax(0, 2fr);
  gap: var(--space-7);
  align-items: start;
  padding-block: var(--space-7);
  border-top: 1px solid var(--color-border);
}
.solution:first-of-type { border-top: none; padding-top: 0; }
.solution__aside {
  background: var(--color-surface-light);
  border: 1px solid var(--color-border-soft);
  border-radius: var(--radius-md);
  padding: var(--space-5);
}
.solution__aside h3 { font-family: var(--font-sans); font-size: var(--text-sm); text-transform: uppercase; letter-spacing: 0.07em; color: var(--color-primary); margin-bottom: var(--space-3); }
.solution__aside ul { list-style: none; margin: 0; padding: 0; display: grid; gap: var(--space-2); font-size: var(--text-sm); }
.solution__aside li { display: flex; gap: var(--space-2); }
.solution__aside li::before { content: "\2713"; color: var(--color-accent-text); font-weight: 700; flex: none; }

/* ---------- Blog ---------- */
.post-feature {
  display: grid;
  grid-template-columns: minmax(0, 3fr) minmax(0, 2fr);
  gap: var(--space-6);
  align-items: center;
  background: var(--color-surface-light);
  border: 1px solid var(--color-border-soft);
  border-radius: var(--radius-md);
  padding: var(--space-6);
}
.post-feature__label { font-size: var(--text-xs); font-weight: 700; letter-spacing: 0.08em; text-transform: uppercase; color: var(--color-accent-text); margin: 0 0 var(--space-2); }
.post-feature h2 { margin-bottom: var(--space-3); }
.post-feature__thumb {
  background: var(--color-primary);
  border-radius: var(--radius-md);
  min-height: 12rem;
  display: flex;
  align-items: center;
  justify-content: center;
  padding: var(--space-5);
}
.post-feature__thumb img { width: 70%; opacity: 0.9; }

.post-grid {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(min(19rem, 100%), 1fr));
  gap: var(--space-5);
}
.post-card {
  background: #fff;
  border: 1px solid var(--color-border-soft);
  border-radius: var(--radius-md);
  padding: var(--space-5);
  display: flex;
  flex-direction: column;
}
.post-card__cat { font-size: var(--text-xs); font-weight: 700; letter-spacing: 0.07em; text-transform: uppercase; color: var(--color-muted); margin: 0 0 var(--space-2); }
.post-card h3 { font-size: var(--text-lg); margin-bottom: var(--space-2); }
.post-card h3 a { color: var(--color-ink); }
.post-card h3 a:hover { color: var(--color-link); text-decoration: none; }
.post-card p { font-size: var(--text-sm); color: var(--color-body); margin-bottom: var(--space-4); }
.post-card .offer-card__link { margin-top: auto; align-self: flex-start; }

/* Topic strip on blog home */
.topic-strip { display: flex; flex-wrap: wrap; gap: var(--space-2) var(--space-5); font-size: var(--text-sm); font-weight: 600; margin-bottom: var(--space-6); }
.topic-strip a, .offer-card__link, .breadcrumb a { padding-block: 0.25rem; }

/* ---------- Article page ---------- */
/* .article-header declares NO max-width — the .container on the same div
   owns the 72rem cap (a max-width here would silently override it). */
.article-header h1 { max-width: none; }
.article-meta { font-size: var(--text-sm); color: var(--color-muted); margin: 0; }
.article-body { max-width: 50rem; }
.article-body h2 { margin-top: var(--space-7); }
.article-body ul { padding-left: 1.25rem; }
.article-body li { margin-bottom: var(--space-2); }

/* ---------- Contact ---------- */
.contact-layout {
  display: grid;
  grid-template-columns: minmax(0, 1fr) minmax(0, 29rem);
  gap: var(--space-7);
  align-items: start;
}
.contact-list { list-style: none; margin: 0 0 var(--space-5); padding: 0; display: grid; gap: var(--space-4); }
.contact-list strong { display: block; color: var(--color-ink); font-size: var(--text-sm); text-transform: uppercase; letter-spacing: 0.06em; margin-bottom: var(--space-1); }
.contact-list a { font-weight: 700; color: var(--color-primary); font-size: var(--text-lg); }
.contact-list a:hover { color: var(--color-link); }

/* ---------- Quote funnel ---------- */
.funnel-page { background: var(--color-surface); min-height: 100vh; }
.funnel-header { background: #fff; border-bottom: 1px solid var(--color-border); }
.funnel-header__inner { display: flex; align-items: center; justify-content: space-between; min-height: 4.25rem; }
.funnel-wrap { max-width: 42rem; margin-inline: auto; padding: var(--space-7) var(--space-5) var(--space-8); }
.funnel-card {
  background: #fff;
  border: 1px solid var(--color-border);
  border-radius: var(--radius-md);
  box-shadow: var(--shadow-md);
  padding: var(--space-6);
}
/* .funnel-progress / .funnel-step / .funnel-nav removed 8 Sep 2026 — the
   4-step stepper they styled became a single-page CF7 form. */
.funnel-trust { text-align: center; font-size: var(--text-sm); color: var(--color-muted); margin-top: var(--space-4); }
.funnel-trust a { text-decoration: underline; }  /* distinguishable without color alone */
.checkbox-row { display: flex; align-items: flex-start; gap: var(--space-2); font-size: var(--text-sm); }
.checkbox-row input { width: auto; margin-top: 0.2rem; }
.radio-list { display: grid; gap: var(--space-2); }
.radio-list label {
  display: flex; align-items: center; gap: var(--space-3);
  border: 1px solid var(--color-border); border-radius: var(--radius-sm);
  padding: var(--space-3) var(--space-4); font-size: var(--text-sm); cursor: pointer;
}
.radio-list input { width: auto; }
.radio-list label:hover { border-color: var(--color-link); }

@media (max-width: 64rem) {
  .solution { grid-template-columns: 1fr; gap: var(--space-5); }
  .post-feature { grid-template-columns: 1fr; }
  .contact-layout { grid-template-columns: 1fr; }
}


/* ---------- Small-screen audit fixes ---------- */
@media (max-width: 40rem) {
  .btn { white-space: normal; }           /* long CTA labels wrap instead of overflowing */
}
@media (max-width: 26rem) {
  .mod-scale { padding: var(--space-4); }
  .mod-scale__row {
    grid-template-columns: 2.5rem 1fr 6.5rem;
    gap: var(--space-2);
  }
  .mod-scale__pct { font-size: var(--text-xs); }
}

/* Heading utility — h2 rendered at h3 scale (keeps heading order semantic) */
.h-sm { font-size: var(--text-lg); }

/* Fieldset-based radio groups (quote funnel) */
fieldset.form-field { border: none; margin: 0; padding: 0; min-inline-size: 0; }
fieldset.form-field legend {
  font-size: var(--text-xs);
  font-weight: 600;
  color: var(--color-ink);
  padding: 0;
  margin-bottom: var(--space-1);
}

/* Respect OS-level reduced-motion preference */
@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after { transition-duration: 0.01ms !important; }
}

/* iOS Safari auto-zooms focused inputs under 16px — keep all fields at 16px */
.form-field input,
.form-field select,
.form-field textarea { font-size: 1rem; }

/* ---------- Interactive US coverage map ---------- */
.usmap-wrap { max-width: 56rem; margin: 0 auto var(--space-6); }
.usmap { width: 100%; height: auto; display: block; }
.usmap__state {
  fill: var(--color-accent);
  stroke: #fff;
  stroke-width: 1.25;
  transition: fill 0.15s ease;
}
.usmap__link { cursor: pointer; }
.usmap__link:hover .usmap__state,
.usmap__link:focus-visible .usmap__state { fill: var(--color-accent-dark); }
.usmap__link:focus-visible .usmap__state { stroke: var(--color-primary); stroke-width: 2; }
.usmap__link:focus { outline: none; }
.usmap__state--na { fill: #C9CFD6; }
.usmap__label {
  font-family: var(--font-sans);
  font-size: 13px;
  font-weight: 700;
  fill: var(--color-accent-contrast);
  text-anchor: middle;
}
.usmap__label--na { fill: #5A6B7E; }
.usmap-legend {
  display: flex;
  flex-wrap: wrap;
  gap: var(--space-2) var(--space-5);
  justify-content: center;
  font-size: var(--text-sm);
  color: var(--color-muted);
  margin: var(--space-4) 0 0;
}
.usmap-legend__swatch {
  display: inline-block;
  width: 0.875rem; height: 0.875rem;
  border-radius: 3px;
  vertical-align: -2px;
  margin-right: 0.375rem;
}
.usmap-legend__swatch--covered { background: var(--color-accent); }
.usmap-legend__swatch--na { background: #C9CFD6; }


/* ============================================================
   WordPress integration styles
   ============================================================ */
/* Core alignment/caption classes (minimal, no builder markup) */
.alignleft { float: left; margin: 0 var(--space-5) var(--space-4) 0; }
.alignright { float: right; margin: 0 0 var(--space-4) var(--space-5); }
.aligncenter { display: block; margin-inline: auto; }
.wp-caption { max-width: 100%; }
.wp-caption-text { font-size: var(--text-xs); color: var(--color-muted); margin-top: var(--space-2); }
.screen-reader-text { position: absolute !important; width: 1px; height: 1px; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; }

/* Sticky header vs. logged-in admin bar */
.admin-bar .site-header { top: 32px; }
@media (max-width: 782px) { .admin-bar .site-header { top: 46px; } }

/* Funnel page: no sticky mobile call bar (its own conversion flow) */
.funnel-page .mobile-call-bar { display: none; }
/* ============================================================
   NEW TEMPLATE COMPONENTS (Sep 2026 buildout)
   Added for the templates beyond the original 9-page mockup —
   same tokens, same restraint. No icons, no pills, no shadows.
   ============================================================ */

/* ---------- On-this-page anchor nav (quick links) ---------- */
.anchor-nav {
  display: flex;
  flex-wrap: wrap;
  gap: var(--space-2) var(--space-5);
  padding: var(--space-3) 0;
  border-top: 1px solid var(--color-border);
  border-bottom: 1px solid var(--color-border);
  margin: 0 0 var(--space-6);
  font-size: var(--text-sm);
}
.anchor-nav__label {
  font-weight: 700;
  color: var(--color-muted);
  letter-spacing: 0.04em;
  text-transform: uppercase;
  font-size: var(--text-xs);
  align-self: center;
}
.anchor-nav a { color: var(--color-ink); font-weight: 600; }
.anchor-nav a:hover { color: var(--color-link); }

/* ---------- Stat tiles (data-forward fact slots) ---------- */
.stat-tiles {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(min(13rem, 100%), 1fr));
  gap: var(--space-4);
  margin: var(--space-5) 0;
}
.stat-tile {
  background: #fff;
  border: 1px solid var(--color-border-soft);
  border-top: 3px solid var(--color-secondary);
  border-radius: var(--radius-sm);
  padding: var(--space-4) var(--space-5);
}
.section--tint .stat-tile { border-color: var(--color-border); border-top-color: var(--color-secondary); }
.stat-tile__value {
  font-family: var(--font-serif);
  font-weight: 600;
  font-size: var(--text-2xl);
  color: var(--color-ink);
  line-height: 1.15;
  margin: 0 0 var(--space-1);
}
.stat-tile__label { font-size: var(--text-sm); color: var(--color-body); margin: 0; }
.stat-tile__cite { font-size: var(--text-xs); color: var(--color-muted); margin: var(--space-2) 0 0; }

/* ---------- Data tables (class codes, rates, requirements) ---------- */
.table-scroll { overflow-x: auto; margin: var(--space-5) 0; }
.data-table {
  width: 100%;
  border-collapse: collapse;
  font-size: var(--text-sm);
  background: #fff;
  border: 1px solid var(--color-border);
}
.data-table caption {
  text-align: left;
  font-weight: 700;
  color: var(--color-ink);
  padding-bottom: var(--space-3);
  caption-side: top;
}
.data-table th {
  text-align: left;
  font-family: var(--font-sans);
  font-size: var(--text-xs);
  letter-spacing: 0.05em;
  text-transform: uppercase;
  color: var(--color-on-dark);
  background: var(--color-primary);
  padding: var(--space-3) var(--space-4);
}
.data-table td {
  padding: var(--space-3) var(--space-4);
  border-top: 1px solid var(--color-border-soft);
  color: var(--color-body);
  vertical-align: top;
}
.data-table tbody tr:nth-child(even) td { background: var(--color-surface-light); }
.data-table td:first-child { font-weight: 700; color: var(--color-ink); white-space: nowrap; }
.table-note { font-size: var(--text-xs); color: var(--color-muted); margin-top: var(--space-2); }

/* ---------- Footnote / citation pattern ---------- */
.cite-note a,
.guidance-note a { text-decoration: underline; }
.cite-note {
  font-size: var(--text-xs);
  color: var(--color-muted);
  border-top: 1px solid var(--color-border-soft);
  padding-top: var(--space-3);
  margin-top: var(--space-5);
}
.cite-note a { color: var(--color-link); }

/* ---------- Generic two-column utility grid ---------- */
.grid-2col {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(min(18rem, 100%), 1fr));
  gap: var(--space-6);
  margin: var(--space-6) 0;
}

/* ---------- Solution layout (vertical/state money pages) ---------- */
.solution-layout {
  display: grid;
  grid-template-columns: minmax(0, 1fr) 20rem;
  gap: var(--space-7);
  align-items: start;
}
@media (max-width: 56rem) { .solution-layout { grid-template-columns: minmax(0, 1fr); } }
/* .solution-aside / .aside-card rules removed 6 Sep 2026 with template-parts/aside-cards.php
   (the only markup that used them; it was never included by any template). */


/* ---------- Review cards (real reviews only; empty state fine) ---------- */
.review-grid {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(min(19rem, 100%), 1fr));
  gap: var(--space-5);
  margin: var(--space-6) 0;
}
.review-card {
  background: #fff;
  border: 1px solid var(--color-border-soft);
  border-radius: var(--radius-sm);
  padding: var(--space-5);
  display: flex;
  flex-direction: column;
  gap: var(--space-3);
}
.review-card blockquote { margin: 0; color: var(--color-body); }
.review-card figcaption { font-size: var(--text-sm); font-weight: 700; color: var(--color-ink); }
.review-card__source { font-weight: 400; color: var(--color-muted); }

/* ---------- Team cards (ship hidden until license issues) ---------- */
.team-grid {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(min(16rem, 100%), 1fr));
  gap: var(--space-5);
  margin: var(--space-6) 0;
}
.team-card {
  background: #fff;
  border: 1px solid var(--color-border-soft);
  border-radius: var(--radius-sm);
  padding: var(--space-5);
}
.team-card__photo {
  width: 100%;
  aspect-ratio: 4 / 3;
  background: var(--color-surface);
  border-radius: var(--radius-sm);
  margin-bottom: var(--space-4);
  object-fit: cover;
}
.team-card h3 { margin-bottom: var(--space-1); }
.team-card__role { font-size: var(--text-sm); color: var(--color-muted); margin-bottom: var(--space-3); }
.team-card p:last-child { font-size: var(--text-sm); margin: 0; }

/* ---------- Forms repository rows ---------- */
.formrepo { display: grid; gap: var(--space-3); margin: var(--space-5) 0; }
.formrepo-row {
  display: grid;
  grid-template-columns: minmax(0, 1fr) auto;
  gap: var(--space-4);
  align-items: center;
  background: #fff;
  border: 1px solid var(--color-border-soft);
  border-radius: var(--radius-sm);
  padding: var(--space-4) var(--space-5);
}
@media (max-width: 40rem) { .formrepo-row { grid-template-columns: 1fr; } }
.formrepo-row h3 { font-family: var(--font-sans); font-size: var(--text-base); margin-bottom: var(--space-1); }
.formrepo-row p { font-size: var(--text-sm); color: var(--color-body); margin: 0; }
.formrepo-row .formrepo-row__how { font-size: var(--text-sm); margin-top: var(--space-1); }

/* ---------- Document checklist (agents) ---------- */
.doc-checklist { list-style: none; margin: var(--space-5) 0; padding: 0; display: grid; gap: 0; }
.doc-checklist li {
  display: flex;
  gap: var(--space-3);
  padding: var(--space-3) 0;
  border-bottom: 1px solid var(--color-border-soft);
  font-size: var(--text-base);
  color: var(--color-body);
}
.doc-checklist li::before { content: "\2713"; color: var(--color-accent-text); font-weight: 700; flex: none; }
.doc-checklist li strong { color: var(--color-ink); }

/* ---------- Upload UI ----------
   .upload-drop / .upload-list styled the static non-functional shell that
   template-agents-submit.php rendered before 8 Sep 2026. That page now
   renders a real Contact Form 7 form with [file] slots, which uses the
   .wpcf7-form-control-wrap markup styled below instead. These rules are
   kept only in case a drag-and-drop shell returns; nothing renders them
   today. Safe to delete. */
.upload-drop {
  border: 2px dashed var(--color-border-strong);
  border-radius: var(--radius-md);
  background: var(--color-surface-light);
  padding: var(--space-7) var(--space-5);
  text-align: center;
  color: var(--color-muted);
}
.upload-drop:focus-within, .upload-drop.is-drag { border-color: var(--color-link); background: var(--color-link-soft); }
.upload-drop p { margin: 0 0 var(--space-3); }
.upload-list { list-style: none; margin: var(--space-4) 0 0; padding: 0; display: grid; gap: var(--space-2); }
.upload-list li {
  display: flex;
  justify-content: space-between;
  gap: var(--space-3);
  font-size: var(--text-sm);
  background: #fff;
  border: 1px solid var(--color-border-soft);
  border-radius: var(--radius-sm);
  padding: var(--space-2) var(--space-4);
}

/* ---------- Calculator shell (bounded widget area) ---------- */
.calc-widget {
  background: #fff;
  border: 1px solid var(--color-border);
  border-top: 3px solid var(--color-secondary);
  border-radius: var(--radius-md);
  padding: var(--space-6);
  max-width: 46rem;
}
.calc-widget__result {
  background: var(--color-surface);
  border-radius: var(--radius-sm);
  padding: var(--space-4) var(--space-5);
  margin-top: var(--space-5);
}
.calc-widget__result-value {
  font-family: var(--font-serif);
  font-weight: 600;
  font-size: var(--text-2xl);
  color: var(--color-ink);
}

/* ---------- Class-code lookup ---------- */
.code-filter { margin: var(--space-5) 0; max-width: 30rem; }
.code-filter input {
  width: 100%;
  border: 1px solid var(--color-border);
  border-radius: var(--radius-sm);
  padding: 0.8125rem var(--space-4);
  font-size: 1rem;
  font-family: inherit;
}
.code-list { list-style: none; margin: var(--space-4) 0; padding: 0; }
.code-list li { border-bottom: 1px solid var(--color-border-soft); }
.code-list a {
  display: grid;
  grid-template-columns: 5.5rem minmax(0, 1fr);
  gap: var(--space-4);
  padding: var(--space-3) var(--space-2);
  color: var(--color-body);
}
.code-list a:hover { background: var(--color-surface-light); text-decoration: none; }
.code-list .code-list__code { font-weight: 700; color: var(--color-ink); font-variant-numeric: tabular-nums; }

/* ---------- Search form + results (search.php / 404.php) ---------- */
.search-form { max-width: 36rem; margin: 0 0 var(--space-6); }
.search-form__row { display: flex; gap: var(--space-3); }
.search-form__row input {
  flex: 1;
  border: 1px solid var(--color-border);
  border-radius: var(--radius-sm);
  padding: 0.8125rem var(--space-4);
  font-size: 1rem;
  font-family: inherit;
}
@media (max-width: 40rem) { .search-form__row { flex-wrap: wrap; } }
.search-results { display: grid; gap: var(--space-5); margin: var(--space-6) 0; }
.search-result { border-bottom: 1px solid var(--color-border-soft); padding-bottom: var(--space-5); }
.search-result p { font-size: var(--text-sm); margin: var(--space-2) 0 0; }

/* ---------- Pagination ---------- */
.pagination { margin-top: var(--space-6); font-size: var(--text-sm); }
.pagination .nav-links { display: flex; flex-wrap: wrap; gap: var(--space-2); }
.pagination .page-numbers {
  display: inline-block;
  padding: var(--space-2) var(--space-3);
  border: 1px solid var(--color-border);
  border-radius: var(--radius-sm);
  color: var(--color-ink);
}
.pagination .page-numbers.current { background: var(--color-primary); color: #fff; border-color: var(--color-primary); }
.pagination a.page-numbers:hover { border-color: var(--color-link); color: var(--color-link); text-decoration: none; }

/* ---------- Prose container (block-editor body content) ----------
   Full container width per Sep 2026 review; blog articles keep their
   narrower reading column via .article-body below. */
.content-prose { /* no max-width of its own — the .container cap governs (a max-width here would override .container when both classes share one element) */ }
.article-body.content-prose h2 { margin-top: var(--space-7); }
.content-prose h2:first-child { margin-top: 0; }
.content-prose h3 { margin-top: var(--space-6); }
.content-prose ul, .content-prose ol { color: var(--color-body); margin: 0 0 var(--space-4); padding-left: 1.4em; }
.content-prose li { margin-bottom: var(--space-2); }
.content-prose img { border-radius: var(--radius-sm); }

/* ---------- Last-updated slot (money templates) ---------- */
.last-updated { font-size: var(--text-xs); color: var(--color-muted); margin: var(--space-3) 0 0; }

/* ---------- Guidance banner (monopolistic states) ---------- */
.guidance-note {
  background: var(--color-link-soft);
  border-left: 3px solid var(--color-link);
  border-radius: 0 var(--radius-sm) var(--radius-sm) 0;
  padding: var(--space-4) var(--space-5);
  margin: var(--space-5) 0;
  font-size: var(--text-sm);
  color: var(--color-body);
}

/* ---------- Static two-column coverage list (vertical "who we cover") ---------- */
.link-columns--static {
  list-style: none;
  margin: var(--space-4) 0 var(--space-5);
  padding: 0;
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(min(15rem, 100%), 1fr));
  gap: 0 var(--space-6);
}
.link-columns--static li {
  display: flex;
  gap: var(--space-2);
  padding: var(--space-2) 0;
  border-bottom: 1px solid var(--color-border-soft);
  color: var(--color-body);
  font-size: var(--text-sm);
}
.link-columns--static li::before { content: "\2713"; color: var(--color-accent-text); font-weight: 700; flex: none; }

/* ============================================================
   SIDEBAR RAIL (Sep 2026): sticky quote form + phone CTA on
   content pages; blog views add related posts + categories.
   Hidden on mobile — the sticky header CTA and bottom call bar
   already cover conversion there.
   ============================================================ */
.rail-layout {
  display: grid;
  grid-template-columns: minmax(0, 1fr) 21rem;
  gap: var(--space-7);
  align-items: start;
}
.page-rail {
  position: sticky;
  top: 5.75rem;                       /* below the sticky header */
  max-height: calc(100vh - 6.5rem);   /* long rails (blog) scroll internally */
  overflow-y: auto;
  display: grid;
  gap: var(--space-4);
  scrollbar-width: thin;
  padding-bottom: 2px;                /* keep focus rings visible */
}
@media (max-width: 64rem) {
  .rail-layout { grid-template-columns: minmax(0, 1fr); }
  .page-rail { display: none; }
}
/* Blog rails scroll with the page (lots of sidebar content) — no sticky */
.page-rail--static {
  position: static;
  max-height: none;
  overflow: visible;
}

/* Rail quote card: compact, single-column fields — explicitly white so it
   never picks up surface tints, matching the hero/footer cards */
.quote-card--rail { padding: var(--space-5); box-shadow: var(--shadow-md); background: #fff; }
.quote-card--rail .form-field input,
.quote-card--rail .form-field select,
.quote-card--rail .form-field textarea { background: #fff; }
.quote-card--rail .quote-card__title { font-size: var(--text-lg); margin-bottom: var(--space-4); }
.quote-card--rail .form-grid { grid-template-columns: 1fr; }
.quote-card--rail .form-field,
.quote-card--rail .form-field--full { grid-column: auto; }
.quote-card--rail .btn { width: 100%; }

/* Phone CTA card */
.rail-call {
  background: var(--color-primary);
  border-radius: var(--radius-md);
  padding: var(--space-5);
  text-align: center;
}
.rail-call__label {
  font-size: var(--text-sm);
  font-weight: 700;
  letter-spacing: 0.07em;
  text-transform: uppercase;
  color: var(--color-on-dark-muted);
  margin: 0 0 var(--space-2);
}
.rail-call__number {
  display: block;
  font-family: var(--font-serif);
  font-weight: 600;
  font-size: 1.6rem;
  color: var(--color-on-dark);
  line-height: 1.2;
}
.rail-call__number:hover { color: var(--color-secondary); text-decoration: none; }
.rail-call__hours { font-size: var(--text-xs); color: var(--color-on-dark-muted); margin: var(--space-2) 0 0; }

/* Blog rail widgets */
.rail-widget {
  background: var(--color-surface-light);
  border: 1px solid var(--color-border-soft);
  border-radius: var(--radius-sm);
  padding: var(--space-5);
}
.rail-widget__title {
  font-family: var(--font-sans);
  font-size: var(--text-sm);
  font-weight: 700;
  letter-spacing: 0.07em;
  text-transform: uppercase;
  color: var(--color-primary);
  margin: 0 0 var(--space-3);
}
.rail-widget ul { list-style: none; margin: 0; padding: 0; }
.rail-widget li { border-bottom: 1px solid var(--color-border-soft); }
.rail-widget li:last-child { border-bottom: 0; }
.rail-widget a {
  display: block;
  padding: var(--space-2) 0;
  font-size: var(--text-sm);
  color: var(--color-body);
  line-height: 1.4;
}
.rail-widget a:hover { color: var(--color-link); text-decoration: none; }

/* ============================================================
   CONTACT FORM 7 integration — CF7 controls inherit the theme's
   form-field styling; kill CF7's default <p> wrappers/spacing.
   ============================================================ */
.wpcf7 form > p { margin: 0; }
.wpcf7-form-control-wrap { display: block; width: 100%; }
.wpcf7 .form-field { margin: 0; }
.form-field textarea { min-height: 8.5rem; resize: vertical; }
.wpcf7-not-valid-tip {
  display: block;
  font-size: var(--text-xs);
  color: #B3251E;
  margin-top: var(--space-1);
}
.wpcf7-response-output {
  border: 1px solid var(--color-border) !important;
  border-left: 3px solid var(--color-accent) !important;
  border-radius: 0 var(--radius-sm) var(--radius-sm) 0;
  margin: var(--space-4) 0 0 !important;
  padding: var(--space-3) var(--space-4) !important;
  font-size: var(--text-sm);
  color: var(--color-body);
}
.wpcf7-form.invalid .wpcf7-response-output { border-left-color: #B3251E !important; }
.wpcf7-form.sent .wpcf7-response-output { border-left-color: var(--color-accent) !important; background: var(--color-accent-soft); }
.wpcf7-spinner { margin: 0 0 0 var(--space-3); }


/* ============================================================
   IN-CONTENT TABLES (Sep 2026): imported body copy uses plain
   <table> markup — style it to match the design system's
   .data-table so every content table looks deliberate.
   ============================================================ */
.content-prose table,
.article-body table {
  width: 100%;
  border-collapse: separate;
  border-spacing: 0;
  font-size: var(--text-sm);
  line-height: 1.5;
  background: #fff;
  border: 1px solid var(--color-border);
  border-radius: var(--radius-sm);
  overflow: hidden;
  margin: var(--space-5) 0 var(--space-6);
}
.content-prose table th,
.article-body table th {
  text-align: left;
  font-family: var(--font-sans);
  font-size: var(--text-xs);
  font-weight: 700;
  letter-spacing: 0.05em;
  text-transform: uppercase;
  color: var(--color-on-dark);
  background: var(--color-primary);
  padding: var(--space-3) var(--space-4);
  vertical-align: bottom;
}
.content-prose table td,
.article-body table td {
  padding: var(--space-3) var(--space-4);
  border-top: 1px solid var(--color-border-soft);
  color: var(--color-body);
  vertical-align: top;
}
.content-prose table tbody tr:nth-child(even) td,
.article-body table tbody tr:nth-child(even) td { background: var(--color-surface-light); }
.content-prose table td:first-child,
.article-body table td:first-child { font-weight: 700; color: var(--color-ink); }
/* Small screens: wide tables scroll INSIDE a wrapper (see the a11y section
   at the end of this file). The old `display:block` rule that used to live
   here was removed on 6 Sep 2026: it made the scroll region unreachable by
   keyboard (WCAG 2.1.1) and stripped the table's implicit ARIA role so screen
   readers stopped announcing rows and columns (WCAG 1.3.1). */

/* ============================================================
   RELATED PAGES (Sep 2026): "Guides & Related Pages" block at
   the bottom of state hubs — card-style link tiles with arrows,
   clearly separated from the feature band above.
   ============================================================ */
.related-pages { margin-top: var(--space-7); }
.related-pages__title { margin-bottom: var(--space-4); }
.related-pages__list {
  list-style: none;
  margin: 0;
  padding: 0;
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(min(18rem, 100%), 1fr));
  gap: var(--space-3);
}
.related-pages__list a {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: var(--space-3);
  padding: var(--space-3) var(--space-4);
  background: #fff;
  border: 1px solid var(--color-border-soft);
  border-radius: var(--radius-sm);
  font-size: var(--text-base);
  font-weight: 600;
  color: var(--color-ink);
  transition: border-color 0.15s ease, box-shadow 0.15s ease;
}
.related-pages__list a::after {
  content: "\2192";
  flex: none;
  color: var(--color-muted);
  opacity: 0.55;
  transition: color 0.15s ease, opacity 0.15s ease, transform 0.15s ease;
}
.related-pages__list a:hover {
  text-decoration: none;
  border-color: var(--color-accent);
  box-shadow: var(--shadow-sm);
  color: var(--color-ink);
}
.related-pages__list a:hover::after {
  color: var(--color-accent-text);
  opacity: 1;
  transform: translateX(3px);
}

/* ============================================================
   FEATURED IMAGES (Sep 2026): real featured images fill the
   blog-index feature panel edge-to-edge (the navy inset stays
   only for the logo fallback), and single posts show the image
   as a plain rectangle directly above the copy.
   ============================================================ */
.post-feature__thumb--photo {
  padding: 0;
  overflow: hidden;
  align-self: stretch;
  min-height: 14rem;
  background: var(--color-primary);
}
.post-feature__thumb--photo img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  display: block;
  opacity: 1;
}

.article-featured {
  margin: 0 0 var(--space-5);
  max-width: 50rem;
}
.article-featured img {
  display: block;
  width: 100%;
  height: auto;
  border-radius: var(--radius-md);
}

/* ============================================================
   CF7 BASELINE (Sep 2026): the plugin's own stylesheet is
   dequeued (render-blocking; wpcf7_load_css filter) — these are
   the functional rules it provided that our overrides above
   don't already restate. Keep in sync if CF7 is upgraded.
   ============================================================ */
.wpcf7 .screen-reader-response {
  position: absolute;
  overflow: hidden;
  clip: rect(1px, 1px, 1px, 1px);
  clip-path: inset(50%);
  height: 1px;
  width: 1px;
  margin: -1px;
  padding: 0;
  border: 0;
  word-wrap: normal !important;
  word-break: normal !important;
}
.wpcf7 .hidden-fields-container { display: none; }
.wpcf7 form.init .wpcf7-response-output,
.wpcf7 form.resetting .wpcf7-response-output,
.wpcf7 form.submitting .wpcf7-response-output { display: none; }
.wpcf7-form-control-wrap { position: relative; }
.wpcf7-not-valid-tip { display: block; }
.wpcf7-list-item { display: inline-block; margin: 0 0 0 1em; }
.wpcf7-list-item-label::before,
.wpcf7-list-item-label::after { content: " "; }
.wpcf7-spinner {
  visibility: hidden;
  display: inline-block;
  background-color: var(--color-primary);
  opacity: 0.75;
  width: 24px;
  height: 24px;
  border: none;
  border-radius: 100%;
  padding: 0;
  position: relative;
}
form.submitting .wpcf7-spinner { visibility: visible; }
.wpcf7-spinner::before {
  content: "";
  position: absolute;
  background-color: #fbfbfc;
  top: 4px;
  left: 4px;
  width: 6px;
  height: 6px;
  border: none;
  border-radius: 100%;
  transform-origin: 8px 8px;
  animation: npn-cf7-spin 1000ms linear infinite;
}
@media (prefers-reduced-motion: reduce) {
  .wpcf7-spinner::before { animation: npn-cf7-blink 2000ms linear infinite; }
}
@keyframes npn-cf7-spin { from { transform: rotate(0deg); } to { transform: rotate(360deg); } }
@keyframes npn-cf7-blink { from { opacity: 0; } 50% { opacity: 1; } to { opacity: 0; } }
.wpcf7 [inert] { opacity: 0.5; }
.wpcf7 .wpcf7-submit:disabled { cursor: not-allowed; }
.wpcf7 input[type="url"],
.wpcf7 input[type="email"],
.wpcf7 input[type="tel"] { direction: ltr; }

/* Agency credit line in the footer bottom bar */
.site-footer__credit {
  margin: var(--space-2) 0 0;
  font-size: var(--text-xs);
  color: var(--color-on-dark-muted);
}
.site-footer__credit a { color: var(--color-on-dark-muted); text-decoration: underline; text-underline-offset: 2px; }
.site-footer__credit a:hover { color: #fff; }
.site-footer__credit-brand strong { color: rgba(255, 255, 255, 0.85); }
.site-footer__credit-brand:hover strong { color: #fff; }

/* Map callout labels for the small northeast states + their leader lines */
.usmap__label--out { text-anchor: start; }
.usmap__leader {
  stroke: var(--color-accent-contrast);
  stroke-width: 1;
  fill: none;
  opacity: 0.65;
}

/* Complianz banner close button — keep the keyboard focus ring but round it
   to match the design system (the open-time square is suppressed in main.js) */
.cmplz-cookiebanner .cmplz-close { border-radius: var(--radius-sm); }


/* ============================================================
   ACCESSIBILITY (6 Sep 2026) — WCAG 2.1 AA remediation.
   Source: content-output/_PERF-A11Y-AUDIT-Sep2026.md
   ============================================================ */

/* --- A-01 · 1.4.1 Use of Color: in-text links ----------------
   Body copy --color-body #414E63 vs link --color-link #0967B5 is 1.45:1,
   where 1.4.1 requires 3:1 for a colour-only distinction, and the base
   `a` rule near the top of this file sets text-decoration:none.
   A colour-only fix is mathematically impossible here: a link light enough
   to hit 3:1 against #414E63 lands at 2.81:1 against the white page and
   fails 1.4.6 instead; darker cannot reach 3:1 at all. So the cue has to be
   non-colour — a 1px underline at 42% opacity, solid on hover. WCAG asks
   for a non-colour cue, not a high-contrast one, so the muted treatment
   conforms exactly as a full-strength underline would.
   Scope is deliberately narrow: only links INSIDE a run of text. Nav, cards,
   footer link columns and buttons are distinguishable by shape and position,
   so 1.4.1 does not apply to them. */
.content-prose p a,
.content-prose li a,
.content-prose td a,
.content-prose th a,
.content-prose dd a,
.content-prose blockquote a,
.faq-item p a,
.section__lede a {
  text-decoration: underline;
  text-underline-offset: 0.16em;
  text-decoration-thickness: 1px;
  text-decoration-color: rgba(9, 103, 181, 0.42);
}
.content-prose p a:hover,
.content-prose li a:hover,
.content-prose td a:hover,
.content-prose th a:hover,
.content-prose dd a:hover,
.content-prose blockquote a:hover,
.faq-item p a:hover,
.section__lede a:hover { text-decoration-color: currentColor; }

/* Buttons that happen to sit inside a paragraph keep their button look. */
.content-prose p a.btn,
.content-prose li a.btn,
.faq-item p a.btn,
.section__lede a.btn { text-decoration: none; }

/* --- A-02 · 2.1.1 Keyboard + 1.3.1 Info and Relationships ----
   In-content tables are wrapped by npn_wrap_content_tables() in inc/a11y.php.
   The WRAPPER scrolls; the table stays a real table, so its ARIA role
   survives. The wrapper carries tabindex="0" from the markup so the page
   conforms with JS off; main.js removes it where nothing actually
   overflows, so desktop users don't tab through a dead focus stop. */
.table-scroll--content {
  overflow-x: auto;
  -webkit-overflow-scrolling: touch;
  margin: var(--space-5) 0 var(--space-6);
}
.table-scroll--content > table { margin: 0; }
.table-scroll--content:focus-visible {
  outline: 3px solid var(--color-link);
  outline-offset: 2px;
}
@media (max-width: 48rem) {
  /* Natural column widths so the table scrolls instead of being crushed,
     floored at the wrapper width and capped so a prose-heavy cell wraps
     rather than producing a 3000px table. Desktop is untouched: the
     width:100% rule above still governs there, nothing overflows, and
     main.js strips the tabindex. */
  .table-scroll--content > table {
    width: max-content;
    min-width: 100%;
    max-width: 62rem;
  }
}

/* ============================================================
   SINGLE-PAGE QUOTE FORM (8 Sep 2026) — /get-a-quote/ moved from
   a 4-step stepper to one Contact Form 7 form. CF7 renders radio
   groups as inline .wpcf7-list-item spans; inside the funnel card
   they need to stack as the theme's .radio-list cards.
   ============================================================ */
.funnel-section {
  font-family: var(--font-sans);
  font-size: var(--text-sm);
  font-weight: 700;
  letter-spacing: 0.07em;
  text-transform: uppercase;
  color: var(--color-primary);
  margin: var(--space-6) 0 var(--space-4);
  padding-top: var(--space-5);
  border-top: 1px solid var(--color-border-soft);
}
.funnel-card .wpcf7-radio { display: grid; gap: var(--space-2); }
.funnel-card .wpcf7-list-item { display: block; margin: 0; }
.funnel-card .wpcf7-list-item label {
  display: flex; align-items: center; gap: var(--space-3);
  border: 1px solid var(--color-border); border-radius: var(--radius-sm);
  padding: var(--space-3) var(--space-4); font-size: var(--text-sm); cursor: pointer;
}
.funnel-card .wpcf7-list-item label:hover { border-color: var(--color-link); }
.funnel-card .wpcf7-list-item input { width: auto; }
/* Employee-count band has 8 short options — let it flow in columns */
.funnel-card .wpcf7-radio.npn-bands { grid-template-columns: repeat(auto-fit, minmax(8rem, 1fr)); }
.radio-list--compact { grid-template-columns: repeat(auto-fit, minmax(8rem, 1fr)); }
.funnel-card .npn-q { margin: 0 0 var(--space-2); font-weight: 600; font-size: var(--text-sm); color: var(--color-ink); }
.funnel-card .npn-q--req::after { content: " *"; color: #B3251E; }
.funnel-card .wpcf7-form-control-wrap { display: block; }
.funnel-card p { margin: 0 0 var(--space-5); }

/* Agent submission form: same card treatment as .funnel-card on
   /get-a-quote/ (white panel, hairline border, soft shadow) so the form
   reads as a panel instead of dissolving into the page background. Kept as
   its own selector rather than reusing .funnel-card because this page runs
   the full site header/footer, not the stripped funnel chrome. */
.agents-submit__card {
  background: #fff;
  border: 1px solid var(--color-border);
  border-radius: var(--radius-md);
  box-shadow: var(--shadow-md);
  padding: var(--space-6);
}
.agents-submit__card > .wpcf7 > form > p:last-of-type { margin-bottom: 0; }

/* Centered submit buttons on the quote + agent submission forms (8 Sep 2026).
   CF7 wraps its submit in a <p>, so centre the control itself rather than
   relying on the wrapper's text-align. The submit also needs its own top
   margin — CF7's wrapper <p> collapses against the last field, which left
   the button touching the final upload box. */
.funnel-card .wpcf7-submit,
.funnel-card form > button[type="submit"],
.agents-submit .wpcf7-submit,
.agents-submit form > button[type="submit"] {
  display: block;
  margin-inline: auto;
  margin-top: var(--space-6);
}
.funnel-card .wpcf7-spinner,
.agents-submit .wpcf7-spinner { display: block; margin: var(--space-2) auto 0; }

/* ---------- Agent submission: document downloads ---------- */
.agent-downloads { margin-top: var(--space-7); border-top: 1px solid var(--color-border-soft); padding-top: var(--space-6); }
.agent-downloads__title { font-size: var(--text-lg); margin-bottom: var(--space-2); }
.agent-downloads__lede { color: var(--color-muted); font-size: var(--text-sm); margin: 0 0 var(--space-5); }
.agent-downloads__list { list-style: none; margin: 0; padding: 0; display: grid; gap: var(--space-3); }
.agent-downloads__list li {
  display: flex; align-items: center; justify-content: space-between; gap: var(--space-4);
  background: #fff; border: 1px solid var(--color-border-soft); border-radius: var(--radius-sm);
  padding: var(--space-4);
}
.agent-downloads__name { font-weight: 600; color: var(--color-ink); margin: 0; }
.agent-downloads__desc { font-size: var(--text-sm); color: var(--color-body); margin: var(--space-1) 0 0; }
.agent-downloads__meta { font-size: var(--text-xs); color: var(--color-muted); text-transform: uppercase; letter-spacing: 0.05em; }
.agent-downloads__list .btn { flex: none; }
@media (max-width: 40rem) {
  .agent-downloads__list li { flex-direction: column; align-items: flex-start; }
}


/* ---------- Agent submission: CF7 file inputs ----------
   CF7's [file] renders a bare <input type="file">, which is unstyled and
   sits flush against the label. Give it the same box treatment as the text
   inputs so the upload slots read as fields, not as browser chrome. */
.agents-submit input[type="file"] {
  width: 100%;
  font-size: var(--text-sm);
  color: var(--color-body);
  background: #fff;
  border: 1px solid var(--color-border-strong);
  border-radius: var(--radius-sm);
  padding: var(--space-3);
  cursor: pointer;
}
.agents-submit input[type="file"]::file-selector-button {
  margin-right: var(--space-3);
  border: 1px solid var(--color-border-strong);
  border-radius: var(--radius-sm);
  background: var(--color-surface-light);
  color: var(--color-ink);
  font: inherit;
  font-size: var(--text-sm);
  padding: var(--space-2) var(--space-4);
  cursor: pointer;
}
.agents-submit input[type="file"]:focus-visible {
  outline: 2px solid var(--color-link);
  outline-offset: 2px;
}


/* ---------- Quote + agent form cards: small screens ----------
   Both cards are the same component in two places, so they get the same
   responsive treatment as the rest of the site's forms: .form-grid already
   collapses to one column at 40rem and .btn--lg already goes full width —
   these rules stop the card's own padding from eating the narrow viewport
   and stop a long chosen-filename from pushing the file input wider than
   its column. */
.agents-submit input[type="file"],
.funnel-card input[type="file"] { max-width: 100%; box-sizing: border-box; }
.form-field { min-width: 0; }               /* grid items must be allowed to shrink */
.agents-submit .wpcf7-form-control-wrap { display: block; min-width: 0; }

@media (max-width: 40rem) {
  .funnel-card,
  .agents-submit__card { padding: var(--space-5) var(--space-4); }
  .funnel-wrap { padding-inline: var(--space-4); }
  /* Full-width submit matches every other .btn--lg on the site at this size. */
  .funnel-card .wpcf7-submit,
  .agents-submit .wpcf7-submit { width: 100%; }
  .agent-downloads__list .btn { width: 100%; text-align: center; }
}

/* ---------- Quote CTA fallback (10 Sep 2026) ----------
   Shown in a quote slot when no CF7 form is configured. Replaced the static
   fallback forms that could not submit; see
   template-parts/quote-cta-fallback.php. */
.quote-cta-fallback { text-align: center; }
.quote-cta-fallback__text {
  font-size: var(--text-sm);
  color: var(--color-body);
  margin: 0 0 var(--space-4);
}
.quote-cta-fallback .btn { width: 100%; }
.quote-cta-fallback__phone {
  font-size: var(--text-sm);
  color: var(--color-muted);
  margin: var(--space-4) 0 0;
}
/* On the dark footer CTA and the hero card the text sits on white, so no
   on-dark variant is needed — the card itself provides the surface. */

/* ============================================================
   v1.5.1 — editable template sections (Oct 2026 client copy)
   ============================================================ */

/* Homepage hero: secondary line, subordinate to the H1 (client styling note:
   lead sentence at normal weight, the class list smaller and lighter). */
.hero__secondary { margin: 0 0 var(--space-4); line-height: 1.5; }
.hero__secondary-lead { font-weight: 400; color: var(--color-body); font-size: var(--text-base); }
.hero__secondary-text { font-size: var(--text-sm); color: var(--color-muted); }

/* Trust bar: optional heading + footnote. */
.trust-bar__heading {
  color: var(--color-on-dark-muted);
  font-family: var(--font-sans);
  font-size: var(--text-xs);
  font-weight: 700;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  text-align: center;
  margin: 0;
  padding-top: var(--space-4);
}
.trust-bar__footnote {
  color: var(--color-on-dark-muted);
  font-size: var(--text-xs);
  text-align: center;
  max-width: 60em;
  margin: 0 auto;
  padding: 0 0 var(--space-4);
}

/* Industry groups rendered from rows: titled sections + column counts. */
.industry-section + .industry-section { margin-top: var(--space-6); }
.industry-section__title { font-size: var(--text-xl); margin: 0 0 var(--space-2); }
.industry-section__title a { color: var(--color-primary); }
.industry-section__title a:hover { color: var(--color-accent-text); text-decoration: none; }
.industry-section__note { color: var(--color-muted); font-size: var(--text-sm); margin: 0 0 var(--space-3); }
.industry-section .industry-groups { margin-top: var(--space-4); }
h4.industry-group__label { margin-top: 0; }
.industry-groups--1 { grid-template-columns: minmax(0, 1fr); }
.industry-groups--1 .industry-group__list { columns: 3 14rem; column-gap: 2.4rem; }
.industry-groups--1 .industry-group__list li { break-inside: avoid; }
.industry-groups--2 { grid-template-columns: repeat(2, minmax(0, 1fr)); }
.industry-groups--3 { grid-template-columns: repeat(3, minmax(0, 1fr)); }
.industry-group__list span { color: var(--color-body); }
.industry-groups__note { margin: var(--space-5) 0 0; text-align: center; color: var(--color-muted); }

/* Coverage options hero: problem list + closing line. */
.page-hero__list { list-style: none; margin: var(--space-3) 0 0; padding: 0; display: grid; gap: var(--space-2); font-size: var(--text-lg); }
.page-hero__list li { display: flex; gap: var(--space-2); }
.page-hero__list li::before { content: "\2713"; color: var(--color-accent-text); font-weight: 700; flex: none; }
.page-hero__after { font-size: var(--text-lg); font-weight: 600; color: var(--color-primary); margin: var(--space-3) 0 0; }

/* Four coverage cards sit 2 x 2 rather than wrapping 3 + 1. */
.offer-grid--4 { grid-template-columns: repeat(2, minmax(0, 1fr)); }

/* FAQ answers may hold several paragraphs. */
.faq-item__answer p + p { margin-top: var(--space-3); }

@media (max-width: 1024px) {
  .industry-groups--3 { grid-template-columns: 1fr 1fr; }
}
@media (max-width: 640px) {
  .offer-grid--4 { grid-template-columns: 1fr; }
  .industry-groups--2,
  .industry-groups--3 { grid-template-columns: 1fr; }
  .industry-groups--1 .industry-group__list { columns: 1; }
}

/* v1.5.2 — industry groups: a group much longer than its siblings takes its own
   full-width row and flows its links across the same column tracks, so the
   section reads as an even grid instead of one tall column beside short ones. */
.industry-groups--has-wide { grid-auto-flow: row dense; }
.industry-group--wide { grid-column: 1 / -1; }
.industry-group--wide .industry-group__list { column-gap: 2.4rem; }
.industry-group--wide .industry-group__list li { break-inside: avoid; }
.industry-groups--2 .industry-group--wide .industry-group__list { columns: 2; }
.industry-groups--3 .industry-group--wide .industry-group__list { columns: 3; }
.industry-groups--4 .industry-group--wide .industry-group__list { columns: 4; }
/* Single-group lists keep the same 3 tracks as the grid above them. */
.industry-groups--1 .industry-group__list { columns: 3; }

@media (max-width: 1024px) {
  /* Keep 3 tracks down to phone width when a wide row is present (no orphan cell). */
  .industry-groups--3.industry-groups--has-wide { grid-template-columns: repeat(3, minmax(0, 1fr)); }
  .industry-groups--4 .industry-group--wide .industry-group__list { columns: 2; }
}
@media (max-width: 640px) {
  .industry-groups--3.industry-groups--has-wide { grid-template-columns: 1fr; }
  .industry-groups .industry-group--wide .industry-group__list,
  .industry-groups--1 .industry-group__list { columns: 1; }
}

/* v1.5.2 — short cards (state-fund states): one even row instead of 3 + 1. */
.offer-grid--row-4 { grid-template-columns: repeat(4, minmax(0, 1fr)); }
@media (max-width: 1024px) { .offer-grid--row-4 { grid-template-columns: repeat(2, minmax(0, 1fr)); } }
@media (max-width: 640px) { .offer-grid--row-4 { grid-template-columns: 1fr; } }
/* v1.5.2 — multi-paragraph FAQ answers: one consistent gap, not margin + margin. */
.faq-item__answer p { margin-bottom: 0; }
.faq-item__answer p + p { margin-top: var(--space-3); }

/* v1.5.3 — coverage cards: optional lead card with its own heading. */
.offer-grid--lead { grid-template-columns: minmax(0, 1fr); }
.offer-card--lead p { max-width: 62em; }
.section__header--follow { margin-top: var(--space-7); }
.offer-grid--3 { grid-template-columns: repeat(3, minmax(0, 1fr)); }
@media (max-width: 48rem) { .offer-grid--3 { grid-template-columns: 1fr; } }
/* Multi-paragraph section ledes. */
.section__lede + .section__lede { margin-top: var(--space-3); }

/* ============================================================
   v1.6.0 — Landing Page (Ads) template (page-templates/template-landing.php).
   Everything else on that page reuses existing components (hero, quote
   card, trust bar, offer cards, steps, mod band, FAQ, content band).
   ============================================================ */
.lp-hero .hero__subhead { margin-bottom: var(--space-5); }
.lp-hero__points {
  list-style: none;
  margin: 0 0 var(--space-5);
  padding: 0;
  display: grid;
  gap: var(--space-3);
  max-width: 34em;
}
.lp-hero__points li {
  position: relative;
  padding-left: var(--space-5);
  font-size: var(--text-base);
  line-height: 1.5;
  color: var(--color-ink);
}
/* Short coral bar as the marker — the palette's accent, not an icon. */
.lp-hero__points li::before {
  content: "";
  position: absolute;
  left: 0;
  top: 0.7em;
  width: 0.875rem;
  height: 3px;
  border-radius: 2px;
  background: var(--color-secondary);
}
/* "Start a quote" jumps here; clear the sticky header. */
.lp-hero__form { scroll-margin-top: 6rem; }
/* v1.6.1/1.6.2 — editable content section. Layout comes from the shared
   .rail-layout (same as interior pages). The button + phone under the
   content only show where the rail is hidden (<=64rem, same breakpoint). */
.lp-cta { text-align: center; }
.content-prose + .lp-cta { margin-top: var(--space-7); }
@media (min-width: 64.0625rem) { .lp-cta--rail { display: none; } }
.lp-cta__phone {
  margin: var(--space-4) 0 0;
  color: var(--color-muted);
}
.lp-cta__phone a { font-weight: 700; color: var(--color-primary); white-space: nowrap; }
.lp-cta__phone a:hover { color: var(--color-accent-text); }
@media (prefers-reduced-motion: no-preference) {
  html:has(.lp-hero) { scroll-behavior: smooth; }
}

/* ============================================================
   v1.7.2 (8 Oct 2026) — type tweaks requested by Josh
   1pt = 1.333px. Classes are shared, so the homepage changes
   carry to every page that renders the same component.
   ============================================================ */

/* Homepage hero: "What is the other 10%?" lead-in — bold, all caps, +1pt. */
.hero__secondary-lead {
  font-weight: 700;
  text-transform: uppercase;
  font-size: calc(var(--text-base) + 1pt);
}

/* Industry groups (homepage "Industries We Serve" + /industries/):
   section titles and group labels, +1pt each. */
.industry-section__title { font-size: calc(var(--text-xl) + 1pt); }
.industry-group__label { font-size: calc(var(--text-base) + 1pt); }