/* ==========================================================================
   ASHBORN PARTNERS — DESIGN SYSTEM
   Premium home-energy marketplace aesthetic.
   Off-white base, deep forest/charcoal green dark sections, bright energy
   green accent used sparingly for primary conversion actions.
   ========================================================================== */

:root {
  /* Color */
  --bg: #F7F6F1;
  --bg-alt: #EFEDE5;
  --dark: #10241C;
  --dark-2: #17332A;
  --dark-3: #1E3F33;
  --accent: #35D07F;
  --accent-dark: #23A863;
  --text: #12201A;
  --text-muted: #57665F;
  --text-on-dark: #F4F5F1;
  --text-on-dark-muted: #A9BCB3;
  --border: #E2DFD4;
  --border-on-dark: rgba(244, 245, 241, 0.14);
  --white: #FFFFFF;
  --error: #C5453A;

  /* Type */
  --font-display: 'Space Grotesk', 'Inter', sans-serif;
  --font-body: 'Inter', sans-serif;

  /* Shape / motion */
  --radius-sm: 10px;
  --radius-md: 18px;
  --radius-lg: 28px;
  --shadow-card: 0 1px 2px rgba(16, 36, 28, 0.04), 0 12px 32px -16px rgba(16, 36, 28, 0.18);
  --shadow-float: 0 24px 60px -20px rgba(16, 36, 28, 0.35);
  --ease: cubic-bezier(0.22, 1, 0.36, 1);
}

* { box-sizing: border-box; }

html {
  scroll-behavior: smooth;
}

@media (prefers-reduced-motion: reduce) {
  html { scroll-behavior: auto; }
  * { animation-duration: 0.01ms !important; transition-duration: 0.01ms !important; }
}

body {
  margin: 0;
  background: var(--bg);
  color: var(--text);
  font-family: var(--font-body);
  font-size: 16px;
  line-height: 1.55;
  -webkit-font-smoothing: antialiased;
}

h1, h2, h3 {
  font-family: var(--font-display);
  font-weight: 600;
  line-height: 1.08;
  margin: 0 0 0.5em 0;
  letter-spacing: -0.01em;
}

p { margin: 0 0 1em 0; color: var(--text-muted); }

a { color: inherit; }

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

.sr-only {
  position: absolute;
  width: 1px; height: 1px;
  padding: 0; margin: -1px;
  overflow: hidden;
  clip: rect(0,0,0,0);
  white-space: nowrap;
  border: 0;
}

:focus-visible {
  outline: 2px solid var(--accent-dark);
  outline-offset: 3px;
}

.section-inner {
  max-width: 1180px;
  margin: 0 auto;
  padding: 0 32px;
}

.section-heading {
  max-width: 620px;
  margin-bottom: 56px;
}

.section-heading h2 { font-size: clamp(2rem, 3.2vw, 2.75rem); }
.section-heading p { font-size: 1.125rem; }

/* ==========================================================================
   BUTTONS
   ========================================================================== */

.btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 8px;
  font-family: var(--font-body);
  font-weight: 600;
  font-size: 0.95rem;
  padding: 15px 26px;
  border-radius: var(--radius-sm);
  border: 1px solid transparent;
  cursor: pointer;
  transition: transform 0.18s var(--ease), background 0.18s var(--ease), box-shadow 0.18s var(--ease), border-color 0.18s var(--ease);
  text-decoration: none;
  white-space: nowrap;
}

.btn:active { transform: translateY(1px); }

.btn-primary {
  background: var(--dark);
  color: var(--text-on-dark);
}
.btn-primary:hover { background: var(--dark-3); }

.btn-accent {
  background: var(--accent);
  color: var(--dark);
}
.btn-accent:hover { background: var(--accent-dark); color: var(--text-on-dark); }

.btn-outline {
  background: transparent;
  color: var(--text);
  border-color: var(--border);
}
.btn-outline:hover { border-color: var(--dark); }

.btn-header { padding: 12px 22px; font-size: 0.9rem; }
.btn-block { width: 100%; }
.btn-lg { padding: 18px 36px; font-size: 1.05rem; }

/* ==========================================================================
   HEADER
   ========================================================================== */

.site-header {
  position: sticky;
  top: 0;
  z-index: 40;
  background: rgba(247, 246, 241, 0.88);
  backdrop-filter: blur(10px);
  border-bottom: 1px solid var(--border);
}

.header-inner {
  max-width: 1180px;
  margin: 0 auto;
  padding: 18px 32px;
  /* Three columns with equal side tracks, so the nav sits on the true centre
     of the header rather than in the middle of whatever space the logo and
     the button happen to leave over. With flex + space-between the nav was
     pushed ~66px right of centre because the logo is wider than the button. */
  display: grid;
  grid-template-columns: 1fr auto 1fr;
  align-items: center;
  gap: 24px;
}
.header-inner > .brand { justify-self: start; }
/* Only the sticky site header needs the smaller mark — at 80px the logo is
   wider than the space the centred nav can spare. The gateway pages and the
   footer keep the full-size logo. */
.site-header .brand-logo { height: 60px; }
.header-inner > .main-nav { justify-self: center; }
.header-inner > .header-actions { justify-self: end; }

.brand {
  display: flex;
  align-items: center;
  gap: 10px;
  flex-shrink: 0;
}

.brand-logo {
  height: 80px;
  width: auto;
  display: block;
  flex-shrink: 0;
  object-fit: contain;
}

.footer-brand .brand-logo { height: 90px; }
.admin-header .brand-logo { height: 90px; }

.main-nav {
  display: flex;
  gap: 36px;
  flex: 1;
  justify-content: center;
}

.main-nav a {
  /* Nav labels are two words ("For Homeowners", "About Us"). As flex items
     they were free to shrink below their text width, so every one of them
     wrapped onto a second line. Keep each label on one line and let the gap
     absorb the width instead. */
  white-space: nowrap;
  text-decoration: none;
  color: var(--text);
  font-size: 0.95rem;
  font-weight: 500;
  position: relative;
  padding: 4px 0;
}

.main-nav a::after {
  content: '';
  position: absolute;
  left: 0; right: 0; bottom: -2px;
  height: 2px;
  background: var(--accent-dark);
  transform: scaleX(0);
  transform-origin: left;
  transition: transform 0.25s var(--ease);
}

/* Just above the breakpoint where this nav is replaced by the drawer,
   six no-wrap labels plus the logo and button get tight. Shrink the
   gap rather than let anything overlap. */
@media (max-width: 1180px) {
  .main-nav { gap: 22px; }
}

.main-nav a:hover::after { transform: scaleX(1); }

.header-actions { display: flex; align-items: center; gap: 14px; }

.nav-toggle {
  display: none;
  flex-direction: column;
  justify-content: center;
  gap: 5px;
  width: 44px;
  height: 44px;
  background: transparent;
  border: 1px solid var(--border);
  border-radius: 9px;
  cursor: pointer;
}
.nav-toggle span {
  display: block;
  height: 2px;
  width: 18px;
  margin: 0 auto;
  background: var(--text);
  border-radius: 2px;
}

.mobile-nav {
  display: none;
  flex-direction: column;
  gap: 4px;
  padding: 8px 20px 20px;
  border-top: 1px solid var(--border);
}
.mobile-nav a {
  text-decoration: none;
  color: var(--text);
  font-weight: 500;
  padding: 12px 4px;
  border-bottom: 1px solid var(--border);
}
/* .mobile-nav a above (1 class + 1 element) is more specific than a lone
   .btn-primary rule (1 class), so without this, any <a class="btn
   btn-primary"> inside the mobile menu — e.g. "Analyze My Bill" — would
   have its intended white text silently overridden back to the dark
   nav-link color. This rule (2 classes) restores it correctly, in every
   state (default/hover/focus/active all inherit color unless overridden
   elsewhere, and nothing else does). */
.mobile-nav a.btn-primary,
.mobile-nav a.btn-primary:hover,
.mobile-nav a.btn-primary:focus,
.mobile-nav a.btn-primary:active {
  color: var(--text-on-dark);
  border-bottom: none;
}
.mobile-nav .btn { margin-top: 14px; }
.mobile-nav.open { display: flex; }

/* ==========================================================================
   HERO
   ========================================================================== */

.hero {
  position: relative;
  background-image:
    linear-gradient(180deg, rgba(9, 20, 15, 0.82) 0%, rgba(9, 20, 15, 0.72) 45%, rgba(9, 20, 15, 0.86) 100%),
    url('assets/hero-photo.jpg');
  background-size: cover;
  background-position: center 58%;
  color: var(--text-on-dark);
  padding: 88px 0 110px;
}

.hero-inner {
  max-width: 1180px;
  margin: 0 auto;
  padding: 0 32px;
  display: grid;
  grid-template-columns: 1.1fr 0.9fr;
  gap: 64px;
  align-items: start;
}

.hero-copy h1 {
  font-size: clamp(2.4rem, 4.6vw, 3.6rem);
  color: var(--text-on-dark);
  max-width: 14ch;
}

.hero-sub {
  font-size: 1.2rem;
  color: var(--text-on-dark-muted);
  max-width: 46ch;
  margin-bottom: 36px;
}

.hero-form {
  display: flex;
  gap: 10px;
  background: rgba(244, 245, 241, 0.06);
  border: 1px solid var(--border-on-dark);
  padding: 8px;
  border-radius: var(--radius-md);
  max-width: 560px;
}

.hero-form .address-field {
  flex: 1;
  min-width: 0;
}

.hero-form input {
  width: 100%;
  border: none;
  background: transparent;
  color: var(--text-on-dark);
  font-family: var(--font-body);
  font-size: 1rem;
  padding: 12px 14px;
}
.hero-form input::placeholder { color: var(--text-on-dark-muted); }
.hero-form input:focus { outline: none; }

/* Under the hero address form (2026-10-03): risk reversers, then one
   factual "why now" line. */
.hero-reassure {
  margin: 12px 0 0;
  max-width: 560px;
  font-size: 0.88rem;
  color: var(--text-on-dark-muted);
}
.hero-reassure .hr-item { white-space: nowrap; }
.hero-reassure .hr-dot { margin: 0 6px; color: var(--accent); }
.hero-why-now {
  margin: 10px 0 0;
  max-width: 560px;
  font-size: 0.95rem;
  line-height: 1.5;
  color: var(--text-on-dark);
}
.hero-why-now strong { color: var(--accent); font-weight: 700; }
.hero-why-now + .trust-indicators { margin-top: 20px; }

.trust-indicators {
  list-style: none;
  display: flex;
  gap: 26px;
  flex-wrap: wrap;
  margin: 28px 0 0;
  padding: 0;
  color: var(--text-on-dark-muted);
  font-size: 0.9rem;
}
.trust-indicators li { display: flex; align-items: center; gap: 8px; }
.trust-indicators .dot {
  width: 6px; height: 6px;
  border-radius: 50%;
  background: var(--accent);
  display: inline-block;
}

/* Floating hero card */
.hero-card {
  background: var(--bg);
  color: var(--text);
  border-radius: var(--radius-lg);
  padding: 34px;
  box-shadow: var(--shadow-float);
}

.hero-card h2 {
  font-size: 1.3rem;
  margin-bottom: 22px;
}

.hero-card-row {
  display: flex;
  gap: 16px;
  align-items: flex-start;
  padding: 16px 0;
  border-top: 1px solid var(--border);
}
.hero-card-row:first-of-type { border-top: none; }

.hero-card-row h3 { font-size: 1rem; margin-bottom: 2px; }
.hero-card-row p { font-size: 0.9rem; margin: 0; }

.hero-card .btn { margin-top: 20px; }

.hero-card-icon,
.solution-icon,
.trust-icon {
  width: 40px;
  height: 40px;
  border-radius: 11px;
  background: var(--bg-alt);
  flex-shrink: 0;
  position: relative;
}

.hero-card-icon::before,
.solution-icon::before,
.trust-icon::before {
  content: '';
  position: absolute;
  inset: 0;
  margin: auto;
  width: 18px;
  height: 18px;
  background: var(--dark);
  -webkit-mask-repeat: no-repeat;
  mask-repeat: no-repeat;
  -webkit-mask-position: center;
  mask-position: center;
  -webkit-mask-size: contain;
  mask-size: contain;
}

/* simple icon glyphs via CSS mask (no external icon library) —
   consistent line-icon family: 2px stroke, rounded caps/joins, one
   small filled accent shape per icon (sun disc / charge bolt / fan hub) */
[data-icon="solar"]::before {
  -webkit-mask-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23000' stroke-width='2' stroke-linecap='round'%3E%3Ccircle cx='12' cy='12' r='4.5' fill='%23000' stroke='none'/%3E%3Cpath d='M18.5,12L21.5,12M16.6,16.6L18.72,18.72M12,18.5L12,21.5M7.4,16.6L5.28,18.72M5.5,12L2.5,12M7.4,7.4L5.28,5.28M12,5.5L12,2.5M16.6,7.4L18.72,5.28'/%3E%3C/svg%3E");
  mask-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23000' stroke-width='2' stroke-linecap='round'%3E%3Ccircle cx='12' cy='12' r='4.5' fill='%23000' stroke='none'/%3E%3Cpath d='M18.5,12L21.5,12M16.6,16.6L18.72,18.72M12,18.5L12,21.5M7.4,16.6L5.28,18.72M5.5,12L2.5,12M7.4,7.4L5.28,5.28M12,5.5L12,2.5M16.6,7.4L18.72,5.28'/%3E%3C/svg%3E");
}
[data-icon="battery"]::before {
  -webkit-mask-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23000' stroke-width='2' stroke-linejoin='round' stroke-linecap='round'%3E%3Crect x='2' y='6' width='17' height='12' rx='2.5'/%3E%3Crect x='19.5' y='10' width='2' height='4' fill='%23000' stroke='none'/%3E%3Cpath d='M12,7L8,13H11L10,17L15,11H12L12,7Z' fill='%23000' stroke='none'/%3E%3C/svg%3E");
  mask-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23000' stroke-width='2' stroke-linejoin='round' stroke-linecap='round'%3E%3Crect x='2' y='6' width='17' height='12' rx='2.5'/%3E%3Crect x='19.5' y='10' width='2' height='4' fill='%23000' stroke='none'/%3E%3Cpath d='M12,7L8,13H11L10,17L15,11H12L12,7Z' fill='%23000' stroke='none'/%3E%3C/svg%3E");
}
[data-icon="hvac"]::before {
  -webkit-mask-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23000' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Ccircle cx='12' cy='12' r='9'/%3E%3Cpath d='M12,12C10,9 9,6 12,4C14,7 14,10 12,12Z'/%3E%3Cpath d='M12,12C15,11 18,10 19,13C16,15 13,14 12,12Z'/%3E%3Cpath d='M12,12C10,15 8,17 6,15C7,12 10,11 12,12Z'/%3E%3Ccircle cx='12' cy='12' r='1.6' fill='%23000' stroke='none'/%3E%3C/svg%3E");
  mask-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23000' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Ccircle cx='12' cy='12' r='9'/%3E%3Cpath d='M12,12C10,9 9,6 12,4C14,7 14,10 12,12Z'/%3E%3Cpath d='M12,12C15,11 18,10 19,13C16,15 13,14 12,12Z'/%3E%3Cpath d='M12,12C10,15 8,17 6,15C7,12 10,11 12,12Z'/%3E%3Ccircle cx='12' cy='12' r='1.6' fill='%23000' stroke='none'/%3E%3C/svg%3E");
}
/* Roofing and water filtration (2026-10-03), same line-icon family:
   filled roof / filled water line as the one accent shape. */
[data-icon="roof"]::before {
  -webkit-mask-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23000' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M12,3.5L2.5,11.5H21.5Z' fill='%23000' stroke='none'/%3E%3Cpath d='M5.5,11.5V20H18.5V11.5'/%3E%3Cpath d='M10,20V15H14V20'/%3E%3C/svg%3E");
  mask-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23000' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M12,3.5L2.5,11.5H21.5Z' fill='%23000' stroke='none'/%3E%3Cpath d='M5.5,11.5V20H18.5V11.5'/%3E%3Cpath d='M10,20V15H14V20'/%3E%3C/svg%3E");
}
[data-icon="water"]::before {
  -webkit-mask-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23000' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M12,3C12,3 5,10.6 5,15.2A7,7 0 0 0 19,15.2C19,10.6 12,3 12,3Z'/%3E%3Cpath d='M7.6,15.4A4.4,4.4 0 0 0 16.4,15.4Z' fill='%23000' stroke='none'/%3E%3C/svg%3E");
  mask-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23000' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M12,3C12,3 5,10.6 5,15.2A7,7 0 0 0 19,15.2C19,10.6 12,3 12,3Z'/%3E%3Cpath d='M7.6,15.4A4.4,4.4 0 0 0 16.4,15.4Z' fill='%23000' stroke='none'/%3E%3C/svg%3E");
}
[data-icon="pin"]::before {
  -webkit-mask-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cpath d='M12 21s7-6.5 7-12a7 7 0 10-14 0c0 5.5 7 12 7 12z'/%3E%3Ccircle cx='12' cy='9' r='2.4'/%3E%3C/svg%3E");
  mask-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cpath d='M12 21s7-6.5 7-12a7 7 0 10-14 0c0 5.5 7 12 7 12z'/%3E%3Ccircle cx='12' cy='9' r='2.4'/%3E%3C/svg%3E");
}
[data-icon="layers"]::before {
  -webkit-mask-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cpath d='M12 2l9 5-9 5-9-5 9-5zM3 12l9 5 9-5M3 17l9 5 9-5'/%3E%3C/svg%3E");
  mask-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cpath d='M12 2l9 5-9 5-9-5 9-5zM3 12l9 5 9-5M3 17l9 5 9-5'/%3E%3C/svg%3E");
}
[data-icon="home"]::before {
  -webkit-mask-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cpath d='M3 11l9-8 9 8M5 10v10h14V10'/%3E%3C/svg%3E");
  mask-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cpath d='M3 11l9-8 9 8M5 10v10h14V10'/%3E%3C/svg%3E");
}
[data-icon="shield"]::before {
  -webkit-mask-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cpath d='M12 2l8 4v6c0 5-3.5 8.5-8 10-4.5-1.5-8-5-8-10V6l8-4z'/%3E%3Cpath d='M9 12l2 2 4-4'/%3E%3C/svg%3E");
  mask-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cpath d='M12 2l8 4v6c0 5-3.5 8.5-8 10-4.5-1.5-8-5-8-10V6l8-4z'/%3E%3Cpath d='M9 12l2 2 4-4'/%3E%3C/svg%3E");
}

/* Virtual Advisors (phone) and In-Home Advisors (car) — 2026-10-03,
   same filled style as pin / layers / home / shield above. */
[data-icon="phone"]::before {
  -webkit-mask-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cpath d='M6.62 10.79c1.44 2.83 3.76 5.14 6.59 6.59l2.2-2.2c.27-.27.67-.36 1.02-.24 1.12.37 2.33.57 3.57.57.55 0 1 .45 1 1V20c0 .55-.45 1-1 1-9.39 0-17-7.61-17-17 0-.55.45-1 1-1h3.5c.55 0 1 .45 1 1 0 1.25.2 2.45.57 3.57.11.35.03.74-.25 1.02l-2.2 2.2z'/%3E%3C/svg%3E");
  mask-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cpath d='M6.62 10.79c1.44 2.83 3.76 5.14 6.59 6.59l2.2-2.2c.27-.27.67-.36 1.02-.24 1.12.37 2.33.57 3.57.57.55 0 1 .45 1 1V20c0 .55-.45 1-1 1-9.39 0-17-7.61-17-17 0-.55.45-1 1-1h3.5c.55 0 1 .45 1 1 0 1.25.2 2.45.57 3.57.11.35.03.74-.25 1.02l-2.2 2.2z'/%3E%3C/svg%3E");
}
[data-icon="visit"]::before {
  -webkit-mask-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cpath d='M18.92 6.01C18.72 5.42 18.16 5 17.5 5h-11c-.66 0-1.21.42-1.42 1.01L3 12v8c0 .55.45 1 1 1h1c.55 0 1-.45 1-1v-1h12v1c0 .55.45 1 1 1h1c.55 0 1-.45 1-1v-8l-2.08-5.99zM6.5 16c-.83 0-1.5-.67-1.5-1.5S5.67 13 6.5 13s1.5.67 1.5 1.5S7.33 16 6.5 16zm11 0c-.83 0-1.5-.67-1.5-1.5s.67-1.5 1.5-1.5 1.5.67 1.5 1.5-.67 1.5-1.5 1.5zM5 11l1.5-4.5h11L19 11H5z'/%3E%3C/svg%3E");
  mask-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cpath d='M18.92 6.01C18.72 5.42 18.16 5 17.5 5h-11c-.66 0-1.21.42-1.42 1.01L3 12v8c0 .55.45 1 1 1h1c.55 0 1-.45 1-1v-1h12v1c0 .55.45 1 1 1h1c.55 0 1-.45 1-1v-8l-2.08-5.99zM6.5 16c-.83 0-1.5-.67-1.5-1.5S5.67 13 6.5 13s1.5.67 1.5 1.5S7.33 16 6.5 16zm11 0c-.83 0-1.5-.67-1.5-1.5s.67-1.5 1.5-1.5 1.5.67 1.5 1.5-.67 1.5-1.5 1.5zM5 11l1.5-4.5h11L19 11H5z'/%3E%3C/svg%3E");
}

/* ==========================================================================
   TRUST BAR
   ========================================================================== */

.trust-bar {
  background: var(--bg-alt);
  border-bottom: 1px solid var(--border);
}

.trust-bar-inner {
  max-width: 1180px;
  margin: 0 auto;
  padding: 48px 32px;
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: 32px;
}

.trust-item {
  text-align: center;
  display: flex;
  flex-direction: column;
  align-items: center;
}
.trust-item h3 { font-size: 1rem; margin: 14px 0 4px; }
.trust-item p { font-size: 0.9rem; margin: 0; }

/* ==========================================================================
   SOLUTIONS
   ========================================================================== */

.solutions { padding: 110px 0; }

.solution-cards {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 24px;
}

.solution-card {
  background: var(--white);
  border: 1px solid var(--border);
  border-radius: var(--radius-md);
  padding: 32px;
  box-shadow: var(--shadow-card);
  transition: transform 0.22s var(--ease), box-shadow 0.22s var(--ease);
  text-align: center;
  display: flex;
  flex-direction: column;
  align-items: center;
}
.solution-card:hover {
  transform: translateY(-4px);
  box-shadow: 0 20px 40px -18px rgba(16,36,28,0.25);
}

.solution-icon { margin-bottom: 20px; margin-left: auto; margin-right: auto; width: 46px; height: 46px; border-radius: 13px; }
.solution-icon::before { width: 20px; height: 20px; }

.solution-card h3 { font-size: 1.2rem; }
.solution-card p { font-size: 0.95rem; min-height: 66px; }
.solution-card .btn { margin-top: 8px; width: 100%; }

/* ==========================================================================
   HOW IT WORKS
   ========================================================================== */

.how-it-works {
  background: var(--dark);
  color: var(--text-on-dark);
  padding: 110px 0;
}

.how-it-works-heading {
  max-width: 640px;
  margin-bottom: 56px;
}

.how-it-works-heading h2 {
  color: var(--text-on-dark);
  font-size: clamp(2rem, 3.2vw, 2.75rem);
  max-width: 16ch;
  margin-bottom: 20px;
}

.how-it-works-heading p {
  color: var(--text-on-dark-muted);
  font-size: 1.1rem;
  margin: 0;
}

.steps {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 40px;
}

.step { border-top: 1px solid var(--border-on-dark); padding-top: 24px; }

.step-number {
  font-family: var(--font-display);
  font-size: 0.9rem;
  color: var(--accent);
  display: block;
  margin-bottom: 18px;
  font-weight: 600;
}

.step h3 { color: var(--text-on-dark); font-size: 1.15rem; }
.step p { color: var(--text-on-dark-muted); font-size: 0.95rem; }

/* ==========================================================================
   WHY ASHBORN + CALCULATOR
   ========================================================================== */

.why-ashborn { padding: 110px 0; }

.why-grid {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 64px;
  align-items: start;
}

.why-copy h2 { font-size: clamp(2rem, 3.2vw, 2.6rem); max-width: 15ch; }
.why-copy > p { font-size: 1.1rem; max-width: 46ch; }

.checklist {
  list-style: none;
  padding: 0;
  margin: 28px 0 32px;
  display: flex;
  flex-direction: column;
  gap: 14px;
}
.checklist li {
  position: relative;
  padding-left: 32px;
  font-size: 1rem;
  color: var(--text);
}
.checklist li::before {
  content: '';
  position: absolute;
  left: 0; top: 2px;
  width: 20px; height: 20px;
  border-radius: 6px;
  background: var(--accent);
}
.checklist li::after {
  content: '';
  position: absolute;
  left: 6px; top: 6px;
  width: 8px; height: 4px;
  border-left: 2px solid var(--dark);
  border-bottom: 2px solid var(--dark);
  transform: rotate(-45deg);
}

.why-tagline {
  font-family: var(--font-display);
  font-size: 1.2rem;
  font-weight: 600;
  color: var(--dark);
  margin: 0 0 28px;
}

.calc-card {
  background: var(--white);
  border: 1px solid var(--border);
  border-radius: var(--radius-lg);
  padding: 36px;
  box-shadow: var(--shadow-card);
}

.calc-card h3 { font-size: 1.15rem; margin-bottom: 22px; }
.calc-card h2 { font-size: clamp(1.35rem, 2.4vw, 1.7rem); margin-bottom: 22px; }

/* Bill calculator in its own section near the top (2026-10-03). */
.bill-check { padding: 72px 0; background: var(--bg-alt); }
.bill-check .calc-card { max-width: 620px; margin: 0 auto; }
/* Trust points beside the calculator (2026-10-03): two left, two right. */
.bill-check-layout {
  display: grid;
  grid-template-columns: minmax(0, 1fr) minmax(0, 580px) minmax(0, 1fr);
  gap: 32px;
  align-items: stretch;
}
.bill-check-layout .calc-card { width: 100%; align-self: center; }
/* Each side is as tall as the calculator, split into three equal tiles,
   so both columns line up with each other and with the card. */
.bill-check-side { display: grid; grid-template-rows: repeat(3, 1fr); gap: 18px; }
.bill-check-side .trust-item {
  background: var(--white);
  border: 1px solid var(--border);
  border-radius: var(--radius-lg);
  padding: 18px 16px;
  box-shadow: var(--shadow-card);
  justify-content: center;
}
.bill-check-side .trust-item h3 { margin-top: 10px; }
/* Below 1100px the side columns get too narrow. The tiles flow two across:
   Local Providers + Multiple Solutions above the calculator, then
   Personalized Review + No Obligation, then Virtual + In-Home Advisors. */
@media (max-width: 1100px) {
  .bill-check-layout { grid-template-columns: 1fr 1fr; gap: 16px; max-width: 620px; margin: 0 auto; }
  .bill-check-side { display: contents; }
  .bill-check-layout .calc-card { grid-column: 1 / -1; order: 3; margin: 4px 0; }
  .bill-check-side--left .trust-item:nth-child(1) { order: 1; }
  .bill-check-side--left .trust-item:nth-child(2) { order: 2; }
  .bill-check-side--right .trust-item:nth-child(1) { order: 4; }
  .bill-check-side--right .trust-item:nth-child(2) { order: 5; }
  .bill-check-side--left .trust-item:nth-child(3) { order: 6; }
  .bill-check-side--right .trust-item:nth-child(3) { order: 7; }
}
/* "Why Ashborn" no longer shares its row with the calculator. */
.why-grid--solo { grid-template-columns: 1fr; }
/* Desktop: story on the left, checklist + tagline in a card on the right. */
.why-side { background: var(--white); border: 1px solid var(--border); border-radius: var(--radius-lg); padding: 32px; box-shadow: var(--shadow-card); margin-top: 28px; }
.why-side .checklist { margin: 0 0 24px; }
.why-side .why-tagline { margin: 0; }
@media (min-width: 981px) {
  .why-grid--solo .why-copy { display: grid; grid-template-columns: 1fr 1fr; column-gap: 72px; align-items: start; }
  .why-grid--solo .why-copy > h2,
  .why-grid--solo .why-copy > p { grid-column: 1; }
  .why-grid--solo .why-side { grid-column: 2; grid-row: 1 / span 5; align-self: center; margin-top: 0; }
}

.calc-label {
  display: block;
  font-size: 0.85rem;
  color: var(--text-muted);
  margin-bottom: 6px;
}

.calc-value {
  font-family: var(--font-display);
  font-size: 2.4rem;
  font-weight: 600;
  margin-bottom: 18px;
}

#billSlider {
  width: 100%;
  accent-color: var(--accent-dark);
  margin-bottom: 28px;
  cursor: pointer;
}

.calc-results {
  display: flex;
  flex-direction: column;
  gap: 14px;
  padding: 20px 0;
  border-top: 1px solid var(--border);
  border-bottom: 1px solid var(--border);
  margin-bottom: 18px;
}
.calc-result { display: flex; justify-content: space-between; align-items: baseline; }
.calc-result-label { font-size: 0.9rem; color: var(--text-muted); }
.calc-result-value { font-family: var(--font-display); font-size: 1.25rem; font-weight: 600; }

.calc-disclaimer {
  font-size: 0.78rem;
  color: var(--text-muted);
  margin-bottom: 20px;
}

/* ==========================================================================
   SERVICE AREA
   ========================================================================== */

.service-area {
  background: var(--bg-alt);
  padding: 100px 0;
}

.state-cards {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: 20px;
}

.state-card {
  background: var(--white);
  border: 1px solid var(--border);
  border-radius: var(--radius-md);
  padding: 32px 24px;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  text-align: center;
  gap: 6px;
  box-shadow: var(--shadow-card);
  transition: transform 0.22s var(--ease), box-shadow 0.22s var(--ease), border-color 0.22s var(--ease);
  text-decoration: none;
  color: inherit;
  cursor: pointer;
}
.state-card:hover {
  transform: translateY(-4px);
  border-color: var(--accent-dark);
  box-shadow: 0 20px 40px -18px rgba(16,36,28,0.25);
}

.state-abbr {
  font-family: var(--font-display);
  font-size: 2.2rem;
  font-weight: 700;
  color: var(--dark);
  line-height: 1;
  letter-spacing: 0.02em;
}
.state-name { font-size: 0.9rem; color: var(--text-muted); }

.service-area-stats {
  margin-top: 48px;
  padding: 40px 0 0;
  border-top: 1px solid var(--border);
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: 32px;
  text-align: center;
}

.service-area-stat {
  display: flex;
  flex-direction: column;
  gap: 6px;
}

.service-area-stat-value {
  font-family: var(--font-display);
  font-size: 2.4rem;
  font-weight: 700;
  color: var(--dark);
  line-height: 1;
}

.service-area-stat-label {
  font-size: 0.9rem;
  color: var(--text-muted);
}

/* "Speak with an Advisor" call button under the service-area stats.
   The number is also printed below it: on a desktop without a calling
   app, a tel: link does nothing useful, so visitors can still dial it. */
.service-area-call {
  margin-top: 40px;
  text-align: center;
}
.service-area-call-note {
  margin-top: 12px;
  font-size: 0.9rem;
  color: var(--text-muted);
}
.service-area-call-note a {
  color: var(--text);
  font-weight: 600;
  text-decoration: none;
  white-space: nowrap;
}
.service-area-call-note a:hover { color: var(--accent-dark); }

/* Provider partnership CTA */
.provider-cta {
  margin-top: 48px;
  padding: 36px 40px;
  background: var(--white);
  border: 1px solid var(--border);
  border-radius: var(--radius-lg);
  text-align: center;
}
.provider-cta h3 {
  font-family: var(--font-display);
  font-size: 1.2rem;
  margin-bottom: 8px;
}
.provider-cta p {
  font-size: 0.98rem;
  margin: 0;
}
.provider-cta a {
  color: var(--dark);
  font-weight: 600;
  text-decoration: underline;
}
.provider-cta a:hover { color: var(--accent-dark); }

/* ==========================================================================
   FAQ
   ========================================================================== */

.faq { padding: 110px 0; max-width: 820px; margin: 0 auto; }
.faq .section-inner { padding: 0 32px; max-width: 820px; }
.faq h2 { font-size: clamp(2rem, 3.2vw, 2.6rem); margin-bottom: 40px; }

.faq-list { border-top: 1px solid var(--border); }

.faq-see-all {
  margin-top: 32px;
  text-align: center;
}

.faq-item { border-bottom: 1px solid var(--border); }

.faq-question {
  width: 100%;
  background: none;
  border: none;
  text-align: left;
  padding: 24px 4px;
  font-family: var(--font-body);
  font-size: 1.05rem;
  font-weight: 600;
  color: var(--text);
  cursor: pointer;
  display: flex;
  justify-content: space-between;
  align-items: center;
  gap: 20px;
}

.faq-toggle {
  flex-shrink: 0;
  width: 22px;
  height: 22px;
  position: relative;
}
.faq-toggle::before,
.faq-toggle::after {
  content: '';
  position: absolute;
  background: var(--dark);
  border-radius: 2px;
  transition: transform 0.25s var(--ease);
}
.faq-toggle::before { top: 10px; left: 3px; width: 16px; height: 2px; }
.faq-toggle::after { top: 3px; left: 10px; width: 2px; height: 16px; }

.faq-question[aria-expanded="true"] .faq-toggle::after { transform: rotate(90deg); }

.faq-answer {
  max-height: 0;
  overflow: hidden;
  transition: max-height 0.3s var(--ease);
}
.faq-answer p { padding: 0 4px 22px; font-size: 0.98rem; }

/* ==========================================================================
   FINAL CTA
   ========================================================================== */

.final-cta {
  background: linear-gradient(135deg, var(--dark-3) 0%, var(--dark) 100%);
  color: var(--text-on-dark);
  padding: 110px 0;
  text-align: center;
}
.final-cta h2 {
  color: var(--text-on-dark);
  font-size: clamp(2.1rem, 3.6vw, 3rem);
  max-width: 18ch;
  margin: 0 auto 16px;
}
.final-cta p {
  color: var(--text-on-dark-muted);
  font-size: 1.1rem;
  max-width: 44ch;
  margin: 0 auto 36px;
}

/* Final CTA recap (2026-10-03): three short reassurances under the button. */
.final-cta-recap {
  list-style: none;
  display: flex;
  justify-content: center;
  flex-wrap: wrap;
  gap: 10px 26px;
  margin: 26px 0 0;
  padding: 0;
  color: var(--text-on-dark-muted);
  font-size: 0.95rem;
}
.final-cta-recap li { display: flex; align-items: center; gap: 8px; white-space: nowrap; }
.final-cta-recap .dot { width: 6px; height: 6px; border-radius: 50%; background: var(--accent); display: inline-block; }

/* ==========================================================================
   FOOTER
   ========================================================================== */

.site-footer {
  background: #10241c;
  padding: 64px 0 40px;
  color: rgba(244,245,241,0.75);
}

.footer-inner {
  display: flex;
  justify-content: space-between;
  align-items: flex-start;
  flex-wrap: wrap;
  gap: 24px;
  padding-bottom: 40px;
  border-bottom: 1px solid rgba(244,245,241,0.1);
  margin-bottom: 24px;
}

.footer-brand p { margin-top: 12px; font-size: 0.95rem; color: rgba(244,245,241,0.55); }

.footer-links {
  display: flex;
  gap: 28px;
  flex-wrap: wrap;
}
.footer-links a {
  text-decoration: none;
  color: rgba(244,245,241,0.75);
  font-size: 0.9rem;
}
.footer-links a:hover { color: var(--accent); }

.footer-contact h3 {
  font-family: var(--font-display);
  font-size: 0.95rem;
  font-weight: 600;
  color: var(--text-on-dark);
  margin-bottom: 10px;
}
.footer-contact p {
  font-size: 0.9rem;
  color: rgba(244,245,241,0.6);
  line-height: 1.6;
  margin: 0 0 8px;
}
.footer-contact p:last-child { margin-bottom: 0; }
.footer-contact a {
  color: rgba(244,245,241,0.6);
  text-decoration: none;
}
.footer-contact a:hover { color: var(--accent); text-decoration: underline; }

.footer-social-link {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  margin-top: 14px;
  font-size: 0.9rem;
  font-weight: 500;
  color: rgba(244,245,241,0.6);
  text-decoration: none;
}
.footer-social-link:hover { color: var(--accent); }

.footer-social-icon {
  width: 26px;
  height: 26px;
  border-radius: 50%;
  background: rgba(244,245,241,0.12);
  flex-shrink: 0;
  position: relative;
  transition: background 0.18s var(--ease);
}
.footer-social-link:hover .footer-social-icon { background: var(--accent-dark); }

.footer-social-icon::before {
  content: '';
  position: absolute;
  inset: 0;
  margin: auto;
  width: 12px;
  height: 12px;
  background: var(--text-on-dark);
  -webkit-mask-repeat: no-repeat;
  mask-repeat: no-repeat;
  -webkit-mask-position: center;
  mask-position: center;
  -webkit-mask-size: contain;
  mask-size: contain;
}

[data-icon="facebook"]::before {
  -webkit-mask-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cpath d='M15,3h-2.5C10,3 8,5 8,7.5V10H5.5v3.5H8V21h3.5v-7.5h2.5l0.5-3.5h-3V7.8c0-0.9 0.3-1.55 1.6-1.55H14V3z'/%3E%3C/svg%3E");
  mask-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cpath d='M15,3h-2.5C10,3 8,5 8,7.5V10H5.5v3.5H8V21h3.5v-7.5h2.5l0.5-3.5h-3V7.8c0-0.9 0.3-1.55 1.6-1.55H14V3z'/%3E%3C/svg%3E");
}

/* Instagram. The attribute selector is not scoped to a class, so this
   serves both the site footer and the gateway footer. */
/* Space between adjacent social links. */
.footer-social-link + .footer-social-link,
.gateway-footer-social-link + .gateway-footer-social-link { margin-left: 18px; }

[data-icon="instagram"]::before {
  -webkit-mask-image: url("data:image/svg+xml,%3Csvg%20xmlns='http://www.w3.org/2000/svg'%20viewBox='0%200%2024%2024'%3E%3Cpath%20fill-rule='evenodd'%20d='M7%202h10a5%205%200%200%201%205%205v10a5%205%200%200%201-5%205H7a5%205%200%200%201-5-5V7a5%205%200%200%201%205-5zm0%202a3%203%200%200%200-3%203v10a3%203%200%200%200%203%203h10a3%203%200%200%200%203-3V7a3%203%200%200%200-3-3H7zm5%203.5a4.5%204.5%200%201%201%200%209%204.5%204.5%200%200%201%200-9zm0%202a2.5%202.5%200%201%200%200%205%202.5%202.5%200%200%200%200-5zM17.6%205.4a1.25%201.25%200%201%201%200%202.5%201.25%201.25%200%200%201%200-2.5z'/%3E%3C/svg%3E");
  mask-image: url("data:image/svg+xml,%3Csvg%20xmlns='http://www.w3.org/2000/svg'%20viewBox='0%200%2024%2024'%3E%3Cpath%20fill-rule='evenodd'%20d='M7%202h10a5%205%200%200%201%205%205v10a5%205%200%200%201-5%205H7a5%205%200%200%201-5-5V7a5%205%200%200%201%205-5zm0%202a3%203%200%200%200-3%203v10a3%203%200%200%200%203%203h10a3%203%200%200%200%203-3V7a3%203%200%200%200-3-3H7zm5%203.5a4.5%204.5%200%201%201%200%209%204.5%204.5%200%200%201%200-9zm0%202a2.5%202.5%200%201%200%200%205%202.5%202.5%200%200%200%200-5zM17.6%205.4a1.25%201.25%200%201%201%200%202.5%201.25%201.25%200%200%201%200-2.5z'/%3E%3C/svg%3E");
}

.footer-copyright {
  font-size: 0.82rem;
  color: rgba(169,188,179,0.75);
  line-height: 1.6;
  max-width: 900px;
}

/* ==========================================================================
   FUNNEL MODAL
   ========================================================================== */

.funnel-overlay {
  position: fixed;
  inset: 0;
  background: rgba(16, 36, 28, 0.55);
  backdrop-filter: blur(3px);
  display: none;
  align-items: center;
  justify-content: center;
  padding: 24px;
  z-index: 100;
}
.funnel-overlay.open { display: flex; }

#fireworksCanvas {
  display: none;
  position: fixed;
  inset: 0;
  z-index: 300;
  pointer-events: none;
}

.funnel-modal {
  background: var(--bg);
  width: 100%;
  max-width: 560px;
  max-height: 88vh;
  border-radius: var(--radius-lg);
  box-shadow: var(--shadow-float);
  display: flex;
  flex-direction: column;
  overflow: hidden;
}

.funnel-topbar {
  display: flex;
  align-items: center;
  gap: 16px;
  padding: 20px 20px 0 24px;
}

.funnel-progress-track {
  flex: 1;
  height: 4px;
  background: var(--border);
  border-radius: 4px;
  overflow: hidden;
}
.funnel-progress-fill {
  height: 100%;
  width: 16.66%;
  background: var(--accent-dark);
  border-radius: 4px;
  transition: width 0.35s var(--ease);
}

.funnel-close {
  background: none;
  border: none;
  font-size: 1.6rem;
  line-height: 1;
  color: var(--text-muted);
  cursor: pointer;
  padding: 6px;
}
.funnel-close:hover { color: var(--text); }

.funnel-body {
  padding: 28px 32px 8px;
  overflow-y: auto;
}

.funnel-step h2 { font-size: 1.5rem; }
.funnel-sub { font-size: 0.98rem; margin-bottom: 24px; }

.funnel-step input[type="text"],
.funnel-step input[type="email"],
.funnel-step input[type="tel"] {
  width: 100%;
  padding: 14px 16px;
  border: 1px solid var(--border);
  border-radius: var(--radius-sm);
  font-family: var(--font-body);
  font-size: 1rem;
  margin-bottom: 8px;
  background: var(--white);
  color: var(--text);
}
.funnel-step input:focus { outline: none; border-color: var(--dark); }
.funnel-step input.input-error { border-color: var(--error); }

.field-row {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 14px;
}

.address-components {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 14px 12px;
  margin: 4px 0 8px;
  padding: 16px;
  background: var(--bg-alt);
  border-radius: var(--radius-sm);
}
.address-components-full { grid-column: 1 / -1; }
.address-components .field-group { margin-bottom: 0; }
.address-components input {
  margin-bottom: 0;
  background: var(--white);
}

.field-group { margin-bottom: 14px; }
.field-group label {
  display: block;
  font-size: 0.85rem;
  font-weight: 600;
  margin-bottom: 6px;
  color: var(--text);
}

.field-error {
  display: none;
  color: var(--error);
  font-size: 0.85rem;
  margin: 0 0 14px;
}
.field-error.show { display: block; }

.choice-grid {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 12px;
  margin-bottom: 8px;
}
.choice-grid-list { grid-template-columns: 1fr; }

.choice-card {
  background: var(--white);
  border: 1.5px solid var(--border);
  border-radius: var(--radius-sm);
  padding: 18px 16px;
  font-family: var(--font-body);
  font-size: 0.98rem;
  font-weight: 500;
  text-align: left;
  cursor: pointer;
  transition: border-color 0.18s var(--ease), background 0.18s var(--ease);
}
.choice-card:hover { border-color: var(--dark-3); }
.choice-card.selected {
  border-color: var(--accent-dark);
  background: rgba(53, 208, 127, 0.1);
}

.funnel-step .btn { margin-top: 16px; }

.summary-card {
  background: var(--white);
  border: 1px solid var(--border);
  border-radius: var(--radius-md);
  padding: 20px 22px;
  margin-bottom: 22px;
  font-size: 0.95rem;
}
.summary-row {
  display: flex;
  justify-content: space-between;
  gap: 16px;
  padding: 10px 0;
  border-bottom: 1px solid var(--border);
}
.summary-row:last-child { border-bottom: none; }
.summary-row span:first-child { color: var(--text-muted); }
.summary-row span:last-child { font-weight: 600; text-align: right; }

.consent-row {
  display: flex;
  gap: 12px;
  align-items: flex-start;
  font-size: 0.82rem;
  line-height: 1.55;
  color: var(--text-muted);
  margin-bottom: 6px;
  cursor: pointer;
}
.consent-row input { margin-top: 3px; flex-shrink: 0; }
.consent-row strong { color: var(--text); }

.consent-row span {
  max-height: 220px;
  overflow-y: auto;
  padding-right: 6px;
}
.consent-row p { margin: 0 0 10px; }
.consent-row p:last-child { margin-bottom: 0; }
.consent-row a {
  color: var(--dark);
  text-decoration: underline;
  cursor: pointer;
}
.consent-row a:hover { color: var(--accent-dark); }

/* Small, quiet disclosure text inside the funnel — same scale and muted
   colour as .consent-row so it reads as part of the existing form, not as
   a warning box. */
.funnel-note {
  font-size: 0.8rem;
  line-height: 1.55;
  color: var(--text-muted);
  margin: 0 0 18px;
}
.funnel-note a {
  color: var(--dark);
  text-decoration: underline;
}
.funnel-note a:hover { color: var(--accent-dark); }
.funnel-note-tight { margin: -8px 0 18px; }

/* Spam trap — off-screen rather than display:none, because some bots
   deliberately skip fields that are display:none. Never shown to a
   person, never focusable by keyboard. */
.hp-field {
  position: absolute;
  left: -9999px;
  width: 1px;
  height: 1px;
  overflow: hidden;
}

.funnel-success { text-align: center; padding-top: 12px; }
.success-icon {
  width: 56px;
  height: 56px;
  border-radius: 50%;
  background: var(--accent);
  color: var(--dark);
  font-size: 1.5rem;
  display: flex;
  align-items: center;
  justify-content: center;
  margin: 0 auto 20px;
}
.funnel-success .btn { margin-top: 10px; }

.funnel-back-row {
  padding: 4px 32px 24px;
}
.funnel-back {
  background: none;
  border: none;
  color: var(--text-muted);
  font-size: 0.9rem;
  cursor: pointer;
  padding: 8px 0;
}
.funnel-back:hover { color: var(--text); }

/* ==========================================================================
   CONFIRMATION DIALOG
   Reusable — used for the "exit funnel" warning and the homeowner
   qualification warning. Sits above the funnel modal (higher z-index).
   ========================================================================== */

.confirm-overlay {
  position: fixed;
  inset: 0;
  background: rgba(16, 36, 28, 0.7);
  backdrop-filter: blur(2px);
  display: none;
  align-items: center;
  justify-content: center;
  padding: 24px;
  z-index: 200;
}
.confirm-overlay.open { display: flex; }

.confirm-modal {
  background: var(--bg);
  width: 100%;
  max-width: 400px;
  border-radius: var(--radius-lg);
  box-shadow: var(--shadow-float);
  padding: 32px;
  text-align: center;
}

.confirm-modal h3 {
  font-family: var(--font-display);
  font-size: 1.2rem;
  margin-bottom: 12px;
}

.confirm-modal p {
  font-size: 0.95rem;
  margin-bottom: 24px;
}

.confirm-actions {
  display: flex;
  flex-direction: column;
  gap: 10px;
}
.confirm-actions .btn { width: 100%; }

@media (min-width: 480px) {
  .confirm-actions { flex-direction: row-reverse; }
}

/* ==========================================================================
   ADDRESS SUGGESTIONS DROPDOWN
   Custom-built, on-brand suggestion list. Powered by OpenStreetMap by
   default (no API key needed) or Google Maps if a key is added in
   config.js — either way, clicking a suggestion reliably fills the field.
   ========================================================================== */

.address-field {
  position: relative;
}

.address-suggestions {
  display: none;
  position: absolute;
  top: calc(100% + 6px);
  left: 0;
  right: 0;
  background: var(--white);
  border: 1px solid var(--border);
  border-radius: var(--radius-sm);
  box-shadow: var(--shadow-card);
  overflow: hidden;
  z-index: 20;
  max-height: 280px;
  overflow-y: auto;
}

.address-suggestions.open { display: block; }

.address-suggestion-item {
  padding: 12px 14px;
  font-size: 0.92rem;
  color: var(--text);
  border-top: 1px solid var(--border);
  cursor: pointer;
}
.address-suggestion-item:first-child { border-top: none; }
.address-suggestion-item:hover,
.address-suggestion-item.active {
  background: var(--bg-alt);
}

.address-suggestions-footer {
  padding: 8px 14px;
  font-size: 0.72rem;
  color: var(--text-muted);
  border-top: 1px solid var(--border);
  background: var(--bg-alt);
}

/* ==========================================================================
   GOOGLE PLACES AUTOCOMPLETE DROPDOWN
   Only appears once a Google Maps API key is added in config.js.
   ========================================================================== */

.pac-container {
  font-family: var(--font-body);
  border: 1px solid var(--border);
  border-radius: var(--radius-sm);
  box-shadow: var(--shadow-card);
  margin-top: 6px;
  overflow: hidden;
}
.pac-item {
  padding: 11px 14px;
  font-size: 0.92rem;
  color: var(--text-muted);
  border-top: 1px solid var(--border);
  cursor: pointer;
}
.pac-item:first-child { border-top: none; }
.pac-item:hover,
.pac-item-selected {
  background: var(--bg-alt);
}
.pac-item-query {
  font-size: 0.92rem;
  font-weight: 600;
  color: var(--text);
}
.pac-icon { display: none; }
.pac-matched { font-weight: 600; }

/* ==========================================================================
   RESPONSIVE
   ========================================================================== */

@media (max-width: 980px) {
  .hero-inner { grid-template-columns: 1fr; }
  .hero-card { max-width: 480px; }
  .why-grid { grid-template-columns: 1fr; }
  .trust-bar-inner { grid-template-columns: repeat(2, 1fr); }
  .solution-cards { grid-template-columns: 1fr 1fr; }
  .steps { grid-template-columns: 1fr; gap: 32px; }
  .state-cards { grid-template-columns: repeat(2, 1fr); }
  .service-area-stats { grid-template-columns: repeat(2, 1fr); gap: 32px 24px; }
}

@media (max-width: 720px) {
  .main-nav { display: none; }
  .nav-toggle { display: flex; }
  .header-inner {
    display: flex;
    padding: 16px 20px;
    position: relative;
    justify-content: flex-end;
  }
  .header-actions { margin-left: auto; }
  .header-actions .btn-header { display: none; }
  .site-header .brand {
    position: absolute;
    left: 50%;
    top: 50%;
    transform: translate(-50%, -50%);
  }
  .brand-logo { height: 40px; }
  .section-inner { padding: 0 20px; }
  .hero {
    background-image:
      linear-gradient(180deg, rgba(9, 20, 15, 0.88) 0%, rgba(9, 20, 15, 0.8) 45%, rgba(9, 20, 15, 0.9) 100%),
      url('assets/hero-photo.jpg');
    background-position: center 55%;
    padding: 56px 0 72px;
  }
  .hero-inner { padding: 0 20px; gap: 40px; }
  .hero-form { flex-direction: column; }
  .hero-form .btn { width: 100%; }
  .trust-bar-inner { grid-template-columns: 1fr 1fr; padding: 36px 20px; gap: 24px; }
  .solutions, .how-it-works, .why-ashborn, .service-area, .faq, .final-cta { padding: 70px 0; }
  .bill-check { padding: 48px 0; }
  .bill-check .calc-card { padding: 26px 22px; }
  .bill-check-side .trust-item { padding: 20px 14px; }
  .bill-check-side .trust-item h3 { margin-top: 10px; }
  .solution-cards { grid-template-columns: 1fr; }
  .state-cards { grid-template-columns: 1fr 1fr; }
  .service-area-stats { grid-template-columns: 1fr 1fr; gap: 28px 16px; margin-top: 40px; padding-top: 32px; }
  .field-row { grid-template-columns: 1fr; }
  .address-components { grid-template-columns: 1fr 1fr; padding: 14px; }
  .choice-grid { grid-template-columns: 1fr; }
  .footer-inner { flex-direction: column; }
  .funnel-body { padding: 24px 20px 8px; }
  .funnel-topbar { padding: 16px 16px 0 20px; }
  .funnel-back-row { padding: 4px 20px 20px; }
  .btn { padding: 15px 22px; font-size: 0.95rem; }
  html { -webkit-text-size-adjust: 100%; }
}

@media (max-width: 420px) {
  .state-cards { grid-template-columns: 1fr; }
}

/* Prevent horizontal scroll on any viewport */
html, body { overflow-x: hidden; width: 100%; }

/* ==========================================================================
   BLOG / STATE ARTICLE PAGES
   Reusable across every state's blog post (blogfl.html, blogtx.html, etc.)
   ========================================================================== */

.article-hero {
  max-width: 760px;
  margin: 0 auto;
  padding: 64px 32px 40px;
}

.article-tag {
  display: inline-block;
  background: var(--bg-alt);
  border: 1px solid var(--border);
  border-radius: 999px;
  padding: 7px 16px;
  font-size: 0.8rem;
  font-weight: 600;
  letter-spacing: 0.04em;
  text-transform: uppercase;
  color: var(--accent-dark);
  margin-bottom: 20px;
}

.article-hero h1 {
  font-size: clamp(2rem, 4vw, 2.9rem);
  line-height: 1.12;
  max-width: 20ch;
  margin-bottom: 18px;
}

.article-meta {
  display: flex;
  align-items: center;
  gap: 10px;
  font-size: 0.9rem;
  color: var(--text-muted);
}
.article-meta span:not(:last-child)::after {
  content: '\2022';
  margin-left: 10px;
  color: var(--border);
}

.article-hero-image {
  max-width: 1180px;
  margin: 0 auto 8px;
  padding: 0 32px;
}
.article-hero-image img {
  width: 100%;
  height: clamp(220px, 38vw, 420px);
  object-fit: cover;
  border-radius: var(--radius-lg);
}

.article-body {
  max-width: 720px;
  margin: 0 auto;
  padding: 56px 32px 40px;
}

.article-body > p {
  font-size: 1.08rem;
  line-height: 1.7;
  color: var(--text);
  margin-bottom: 22px;
}

.article-body h2 {
  font-size: clamp(1.4rem, 2.6vw, 1.7rem);
  margin: 52px 0 18px;
  color: var(--text);
}
.article-body h2:first-of-type { margin-top: 8px; }

.article-body ul {
  margin: 0 0 24px;
  padding: 0;
  list-style: none;
}
.article-body ul li {
  position: relative;
  padding-left: 28px;
  font-size: 1.03rem;
  line-height: 1.6;
  color: var(--text);
  margin-bottom: 10px;
}
.article-body ul li::before {
  content: '';
  position: absolute;
  left: 0;
  top: 9px;
  width: 8px;
  height: 8px;
  border-radius: 50%;
  background: var(--accent-dark);
}

.article-body ol {
  counter-reset: article-ol;
  margin: 0 0 24px;
  padding: 0;
  list-style: none;
}
.article-body ol li {
  counter-increment: article-ol;
  position: relative;
  padding-left: 34px;
  font-size: 1.03rem;
  line-height: 1.6;
  color: var(--text);
  margin-bottom: 12px;
}
.article-body ol li::before {
  content: counter(article-ol);
  position: absolute;
  left: 0;
  top: 0;
  width: 22px;
  height: 22px;
  border-radius: 50%;
  background: var(--accent-dark);
  color: var(--bg);
  font-family: var(--font-display);
  font-size: 0.75rem;
  font-weight: 700;
  display: flex;
  align-items: center;
  justify-content: center;
}

.article-body strong { color: var(--text); }

/* Large centered "reframe the question" style quote block */
.article-pullquote {
  max-width: 560px;
  margin: 36px auto;
  padding: 32px 36px;
  background: var(--bg-alt);
  border-radius: var(--radius-lg);
  text-align: center;
}
.article-pullquote p {
  font-family: var(--font-display);
  font-size: clamp(1.25rem, 2.4vw, 1.55rem);
  font-weight: 600;
  color: var(--text);
  line-height: 1.4;
  margin-bottom: 10px;
}
.article-pullquote p:last-child { margin-bottom: 0; }
.article-pullquote .pullquote-label {
  font-family: var(--font-body);
  font-size: 0.85rem;
  font-weight: 500;
  color: var(--text-muted);
  text-transform: uppercase;
  letter-spacing: 0.04em;
  margin-bottom: 14px;
}
.article-pullquote .pullquote-answer { color: var(--accent-dark); }

/* Two-column "Home A vs Home B" style comparison */
.comparison-grid {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 20px;
  margin: 28px 0 32px;
}
.comparison-card {
  background: var(--white);
  border: 1px solid var(--border);
  border-radius: var(--radius-md);
  padding: 24px;
  box-shadow: var(--shadow-card);
}
.comparison-card h4 {
  font-family: var(--font-display);
  font-size: 1.05rem;
  margin-bottom: 14px;
  color: var(--text);
}
.comparison-card ul { margin: 0; }
.comparison-card ul li {
  font-size: 0.95rem;
  padding-left: 22px;
  margin-bottom: 8px;
}
.comparison-card ul li::before { width: 6px; height: 6px; top: 8px; }

/* Scenario-based "if this, then that" recommendation list */
.decision-framework {
  display: flex;
  flex-direction: column;
  gap: 14px;
  margin: 28px 0 32px;
}
.decision-item {
  background: var(--bg-alt);
  border-radius: var(--radius-md);
  padding: 22px 26px;
}
.decision-item h4 {
  font-family: var(--font-display);
  font-size: 1.05rem;
  margin-bottom: 8px;
  color: var(--text);
}
.decision-item .decision-action {
  font-weight: 700;
  color: var(--accent-dark);
  margin-bottom: 4px;
}
.decision-item .decision-detail {
  font-size: 0.95rem;
  color: var(--text-muted);
  margin-bottom: 0;
}

.article-disclaimer {
  font-size: 0.85rem;
  font-style: italic;
  color: var(--text-muted);
  text-align: center;
  margin-top: 18px;
}

.article-footer-nav {
  max-width: 720px;
  margin: 0 auto;
  padding: 0 32px 64px;
}
.article-footer-nav a {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  text-decoration: none;
  color: var(--text-muted);
  font-size: 0.95rem;
  font-weight: 500;
}
.article-footer-nav a:hover { color: var(--accent-dark); }

@media (max-width: 720px) {
  .article-hero { padding: 44px 20px 28px; }
  .article-hero-image { padding: 0 20px; }
  .article-body { padding: 40px 20px 24px; }
  .article-footer-nav { padding: 0 20px 48px; }
  .comparison-grid { grid-template-columns: 1fr; }
  .article-pullquote { padding: 26px 22px; margin: 28px auto; }
}


/* =========================================================================
   AUTHOR SYSTEM  (added 2026-09-16)
   Compact byline near the top of an article, expanded card at the end,
   and the author profile page. All built from existing design tokens —
   no new colours, radii or shadows are introduced.
   ========================================================================= */

/* ---- Compact byline: sits under .article-meta in the article hero ---- */
.author-byline {
  display: flex;
  align-items: center;
  gap: 14px;
  margin-top: 22px;
  padding-top: 20px;
  border-top: 1px solid var(--border);
}
.author-byline-avatar {
  width: 72px;
  height: 72px;
  flex-shrink: 0;
  border-radius: 50%;
  object-fit: cover;
  background: var(--bg-alt);          /* holds the space before the image paints */
  border: 1px solid var(--border);
}
.author-byline-text { min-width: 0; }
.author-byline-name {
  font-family: var(--font-display);
  font-size: 1rem;
  font-weight: 600;
  color: var(--text);
  margin: 0 0 4px;
}
.author-byline-name a {
  color: inherit;
  text-decoration: underline;
  text-underline-offset: 3px;
  text-decoration-color: var(--border);
  transition: text-decoration-color 0.18s var(--ease), color 0.18s var(--ease);
}
.author-byline-name a:hover { color: var(--accent-dark); text-decoration-color: var(--accent-dark); }
.author-byline-name a:focus-visible {
  outline: 2px solid var(--accent-dark);
  outline-offset: 3px;
  border-radius: 3px;
}
.author-byline-bio {
  font-size: 0.86rem;
  line-height: 1.55;
  color: var(--text-muted);
  margin: 0;
  max-width: 62ch;
}

/* ---- Expanded card: between the article body and the closing CTA ---- */
.author-card {
  background: var(--white);
  border: 1px solid var(--border);
  border-radius: var(--radius-md);
  box-shadow: var(--shadow-card);
  padding: 32px;
  display: flex;
  gap: 26px;
  align-items: flex-start;
  max-width: 720px;
  margin: 8px auto 0;
}
.author-card-avatar {
  width: 120px;
  height: 120px;
  flex-shrink: 0;
  border-radius: 50%;
  object-fit: cover;
  background: var(--bg-alt);
  border: 1px solid var(--border);
}
.author-card-body { min-width: 0; }
.author-card-heading {
  font-family: var(--font-display);
  font-size: 1.3rem;
  line-height: 1.25;
  color: var(--text);
  margin: 0 0 4px;
}
.author-card-role {
  font-size: 0.88rem;
  font-weight: 600;
  color: var(--accent-dark);
  margin: 0 0 14px;
}
.author-card-body p {
  font-size: 0.95rem;
  line-height: 1.65;
  color: var(--text-muted);
  margin: 0 0 12px;
}
.author-card-link {
  display: inline-block;
  margin-top: 4px;
  font-size: 0.92rem;
  font-weight: 600;
  color: var(--text);
  text-decoration: underline;
  text-underline-offset: 3px;
  text-decoration-color: var(--border);
  transition: color 0.18s var(--ease), text-decoration-color 0.18s var(--ease);
}
.author-card-link:hover { color: var(--accent-dark); text-decoration-color: var(--accent-dark); }
.author-card-link:focus-visible {
  outline: 2px solid var(--accent-dark);
  outline-offset: 3px;
  border-radius: 3px;
}

/* ---- Author profile page ---- */
.author-page { max-width: 880px; margin: 0 auto; padding: 56px 32px 24px; }
.author-page-head {
  display: flex;
  gap: 28px;
  align-items: center;
  padding-bottom: 32px;
  border-bottom: 1px solid var(--border);
}
.author-page-avatar {
  width: 132px;
  height: 132px;
  flex-shrink: 0;
  border-radius: 50%;
  object-fit: cover;
  background: var(--bg-alt);
  border: 1px solid var(--border);
}
.author-page h1 {
  font-size: clamp(1.9rem, 4vw, 2.6rem);
  line-height: 1.12;
  margin: 0 0 6px;
}
.author-page-role {
  font-size: 1rem;
  font-weight: 600;
  color: var(--accent-dark);
  margin: 0;
}
.author-page-bio { max-width: 68ch; padding: 32px 0 8px; }
.author-page-bio p { font-size: 1.02rem; line-height: 1.7; color: var(--text-muted); margin: 0 0 16px; }
.author-section { padding: 28px 0 8px; }
.author-section h2 {
  font-family: var(--font-display);
  font-size: 1.25rem;
  margin: 0 0 16px;
}
.author-topics { display: flex; flex-wrap: wrap; gap: 10px; list-style: none; margin: 0; padding: 0; }
.author-topics li {
  background: var(--bg-alt);
  border: 1px solid var(--border);
  border-radius: 999px;
  padding: 7px 15px;
  font-size: 0.86rem;
  color: var(--text-muted);
}
.author-article-count { font-size: 0.88rem; color: var(--text-muted); margin: -8px 0 18px; }
.author-articles { display: grid; gap: 14px; }

/* ---- Responsive ---- */
@media (max-width: 760px) {
  .author-byline { gap: 12px; margin-top: 18px; padding-top: 16px; }
  .author-byline-avatar { width: 56px; height: 56px; }
  .author-byline-name { font-size: 0.95rem; }
  .author-byline-bio { font-size: 0.82rem; }

  .author-card { flex-direction: column; align-items: center; text-align: center; padding: 26px 20px; gap: 18px; }
  .author-card-avatar { width: 88px; height: 88px; }
  /* heading and role stay centred with the avatar; body copy reads left */
  .author-card-body > p:not(.author-card-role) { text-align: left; }

  .author-page { padding: 40px 20px 20px; }
  .author-page-head { flex-direction: column; align-items: center; text-align: center; gap: 18px; }
  .author-page-avatar { width: 104px; height: 104px; }
}

@media (max-width: 400px) {
  .author-byline-avatar { width: 48px; height: 48px; }
  .author-byline { gap: 10px; }
  .author-card { padding: 22px 16px; }
  .author-card-avatar { width: 80px; height: 80px; }
}

/* ---- Article cards on the author page ----
   The blog card design lives in an inline <style> block inside
   resources.html, so it isn't available to other pages. These rules
   reproduce that same card, scoped to .author-articles so they cannot
   affect resources.html or anything else. Headings use --font-display
   because the serif token used on the gateway pages is also local to
   resources.html. */
.author-articles .resource-card {
  display: grid;
  grid-template-columns: 1fr auto;
  align-items: center;
  gap: 20px;
  background: var(--white);
  border: 1px solid var(--border);
  border-radius: var(--radius-lg);
  padding: 24px 26px;
  text-decoration: none;
  color: inherit;
  box-shadow: var(--shadow-card);
  transition: transform 0.22s var(--ease), box-shadow 0.22s var(--ease), border-color 0.22s var(--ease);
}
.author-articles .resource-card:hover {
  transform: translateY(-3px);
  box-shadow: 0 20px 40px -18px rgba(16, 36, 28, 0.25);
  border-color: var(--accent-dark);
}
.author-articles .resource-card:focus-visible {
  outline: 2px solid var(--accent-dark);
  outline-offset: 3px;
}
.author-articles .resource-card-top {
  display: flex;
  align-items: center;
  gap: 10px;
  margin-bottom: 10px;
}
.author-articles .resource-state-tag {
  display: inline-block;
  background: var(--bg-alt);
  border-radius: 999px;
  padding: 4px 12px;
  font-size: 0.75rem;
  font-weight: 700;
  letter-spacing: 0.03em;
  text-transform: uppercase;
  color: var(--accent-dark);
}
.author-articles .resource-date { font-size: 0.85rem; color: var(--text-muted); }
.author-articles .resource-card h3 {
  font-family: var(--font-display);
  font-size: 1.12rem;
  color: var(--text);
  margin: 0 0 6px;
  line-height: 1.35;
}
.author-articles .resource-card p {
  font-size: 0.92rem;
  color: var(--text-muted);
  line-height: 1.55;
  margin: 0;
}
.author-articles .resource-arrow {
  width: 38px;
  height: 38px;
  border-radius: 50%;
  background: var(--bg-alt);
  display: flex;
  align-items: center;
  justify-content: center;
  flex-shrink: 0;
  transition: background 0.2s var(--ease), color 0.2s var(--ease);
}
.author-articles .resource-card:hover .resource-arrow { background: var(--accent-dark); color: #fff; }

@media (max-width: 560px) {
  .author-articles .resource-card { padding: 20px 18px; gap: 14px; }
  .author-articles .resource-card h3 { font-size: 1.02rem; }
  .author-articles .resource-card-top { flex-wrap: wrap; gap: 8px; }
}

/* ---- Author byline on Resources cards ----
   The card itself is a <div> with the title carrying a stretched link, so
   the author link can be a real anchor without nesting one inside another.
   .resource-card gets position/z-index here; the inline <style> block in
   resources.html sets no position, so nothing is overridden. */
.resource-card { position: relative; }
.resource-card-link { text-decoration: none; color: inherit; }
.resource-card-link::after {
  content: '';
  position: absolute;
  inset: 0;
  border-radius: inherit;
}
.resource-card:focus-within { border-color: var(--accent-dark); }
.resource-card-link:focus-visible::after {
  outline: 2px solid var(--accent-dark);
  outline-offset: 3px;
}
.resource-card-byline {
  position: relative;      /* lifts the author link above the stretched title link */
  z-index: 1;
  display: flex;
  align-items: center;
  gap: 8px;
  margin: 12px 0 0 !important;
  font-size: 0.83rem;
  color: var(--text-muted);
}
.resource-card-avatar {
  width: 28px;
  height: 28px;
  flex-shrink: 0;
  border-radius: 50%;
  object-fit: cover;
  background: var(--bg-alt);
  border: 1px solid var(--border);
}
.resource-card-byline a {
  color: var(--text);
  font-weight: 600;
  text-decoration: underline;
  text-underline-offset: 2px;
  text-decoration-color: var(--border);
}
.resource-card-byline a:hover { color: var(--accent-dark); text-decoration-color: var(--accent-dark); }
.resource-card-byline a:focus-visible {
  outline: 2px solid var(--accent-dark);
  outline-offset: 2px;
  border-radius: 3px;
}
@media (max-width: 560px) {
  .resource-card-byline { font-size: 0.79rem; gap: 7px; margin-top: 10px !important; }
  .resource-card-avatar { width: 24px; height: 24px; }
}

/* --------------------------------------------------------------------------
   Gateway header — mobile drawer
   The gateway pages (home, about, approach, resources, partners) hide their
   nav below 900px and, until now, offered nothing in its place: those pages
   had no navigation at all on a phone. This mirrors the .mobile-nav drawer
   the rest of the site already uses.
   -------------------------------------------------------------------------- */
.gateway-nav-toggle {
  display: none;
  flex-direction: column;
  justify-content: center;
  gap: 5px;
  width: 44px;
  height: 44px;
  background: transparent;
  border: 1px solid var(--border);
  border-radius: 9px;
  cursor: pointer;
  flex-shrink: 0;
}
.gateway-nav-toggle span {
  display: block;
  height: 2px;
  width: 18px;
  margin: 0 auto;
  background: var(--text);
  border-radius: 2px;
}
.gateway-mobile-nav {
  display: none;
  flex-direction: column;
  gap: 4px;
  padding: 8px 20px 20px;
  border-top: 1px solid var(--border);
  background: var(--bg);
}
.gateway-mobile-nav a {
  text-decoration: none;
  color: var(--text);
  font-weight: 500;
  padding: 12px 4px;
  border-bottom: 1px solid var(--border);
}
.gateway-mobile-nav.open { display: flex; }

@media (max-width: 900px) {
  .gateway-nav-toggle { display: flex; }
}

/* Skip link. Keyboard and screen-reader users can jump past the header
   instead of tabbing through every nav item on every page. Visible only
   while focused. */
.skip-link {
  position: absolute;
  left: -9999px;
  top: 0;
  z-index: 100;
  padding: 10px 18px;
  background: var(--dark);
  color: var(--text-on-dark);
  font-weight: 600;
  text-decoration: none;
  border-radius: 0 0 10px 0;
}
.skip-link:focus {
  left: 0;
  outline: 2px solid var(--accent);
  outline-offset: 2px;
}

/* One mobile breakpoint for the whole site. The gateway header already
   collapsed at 900px; this brings the site header in line so every page
   behaves the same on the same device. */
@media (max-width: 900px) {
  .main-nav { display: none; }
  .nav-toggle { display: flex; }
}

/* "Skip this question" — deliberately quieter than the Continue button so it
   reads as the secondary path, but still a real button for keyboard and
   screen-reader users rather than a styled link. */
.funnel-skip {
  display: block;
  margin: 14px auto 0;
  padding: 8px 12px;
  background: none;
  border: none;
  font-family: var(--font-body);
  font-size: 0.92rem;
  font-weight: 500;
  color: var(--text-muted);
  text-decoration: underline;
  text-underline-offset: 3px;
  cursor: pointer;
}
.funnel-skip:hover { color: var(--text); }
.funnel-skip:focus-visible {
  outline: 2px solid var(--accent-dark);
  outline-offset: 2px;
  border-radius: 6px;
}

/* Header with a second action button ("Call Now" + "Analyze My Bill").
   Used on the Homeowners page. The nav is centred on the page, so each side
   column has to be at least as wide as the wider of logo and buttons. Two
   buttons only fit that rule when the nav and buttons are tightened a little. */
.header-inner--call .main-nav { gap: 22px; }
.header-inner--call .header-actions { gap: 10px; }
.header-inner--call .btn-header { padding: 12px 16px; }

/* Between 901px and 1180px there is not enough width for a centred nav plus
   two buttons, so "Call Now" steps out of the header there (the layout is
   then identical to every other page). It returns at 900px and below, where
   the nav collapses into the menu button and frees up the room. */
@media (min-width: 901px) and (max-width: 1180px) {
  .btn-call-header { display: none; }
}

/* 721px to 900px: the nav is hidden, so the buttons were dropping into the
   empty middle column of the header grid instead of sitting on the right.
   Pin them to the right-hand column on every page. */
@media (max-width: 900px) {
  .header-inner > .header-actions { grid-column: 3; }
}

/* ==========================================================================
   HOMEOWNERS PAGE — five services (2026-10-03)
   Solar, Battery, HVAC, Roofing, Water Filtration.
   ========================================================================== */
/* Hero box: five rows instead of three, so each row is a little tighter. */
.hero-card--five { padding: 28px 30px; }
.hero-card--five h2 { margin-bottom: 12px; }
.hero-card--five .hero-card-row { padding: 11px 0; gap: 14px; align-items: center; }
.hero-card--five .hero-card-row p { font-size: 0.86rem; }

/* Solution cards: 3 on the first row, 2 centred on the second. */
.solution-cards--five { grid-template-columns: repeat(6, 1fr); }
.solution-cards--five .solution-card { grid-column: span 2; }
.solution-cards--five .solution-card:nth-child(4) { grid-column: 2 / span 2; }
.solution-cards--five .solution-card:nth-child(5) { grid-column: 4 / span 2; }
/* No buttons on these cards (2026-10-03): the text is the last thing in
   the card, so it needs no reserved height or bottom gap. */
.solution-cards--five .solution-card p { min-height: 0; margin-bottom: 0; }
/* Nothing to click, so the cards don't lift on hover (that would look clickable). */
.solution-cards--five .solution-card:hover { transform: none; box-shadow: var(--shadow-card); }

/* State badges (2026-10-03): not links. Hover (mouse), tap (phones) or
   Tab (keyboard) shows the state's electricity rate stats inside the card.
   The stats are always in the page for screen readers; they are only
   faded out visually until the card is hovered, tapped or focused. */
.state-card--stats { position: relative; overflow: hidden; cursor: default; }
.state-card--stats:hover { transform: none; }
.state-stats {
  position: absolute; inset: 0; margin: 0;
  padding: 12px 16px;
  background: var(--white);
  display: flex; flex-direction: column; justify-content: center; gap: 4px;
  opacity: 0; transition: opacity 0.18s var(--ease);
  pointer-events: none;
}
.state-stats > div { display: flex; justify-content: space-between; align-items: baseline; gap: 8px; }
.state-stats dt { font-size: 0.78rem; color: var(--text-muted); margin: 0; white-space: nowrap; }
.state-stats dd { font-size: 0.9rem; font-weight: 700; color: var(--dark); margin: 0; white-space: nowrap; }
.state-stats .state-stats-up dd { color: #176b43; font-size: 1rem; }
@media (hover: hover) {
  .state-card--stats:hover .state-stats { opacity: 1; }
  .state-card--stats:hover { border-color: var(--accent-dark); }
}
.state-card--stats:focus-visible { outline: 3px solid #176b43; outline-offset: 3px; }
.state-card--stats:focus-visible .state-stats,
.state-card--stats.is-open .state-stats { opacity: 1; }
.state-card--stats.is-open { border-color: var(--accent-dark); }
.state-rates-note { margin: 18px auto 0; max-width: 820px; font-size: 0.8rem; line-height: 1.55; color: var(--text-muted); text-align: center; }
@media (prefers-reduced-motion: reduce) { .state-stats { transition: none; } }
/* Phones: keep the badges two across (15 full-width cards made a very long
   scroll). Smaller padding so the stats still fit inside each badge. */
@media (max-width: 420px) {
  .state-cards { grid-template-columns: 1fr 1fr; gap: 12px; }
  .state-card--stats { padding: 22px 10px; }
  .state-stats { padding: 8px 10px; gap: 2px; }
  .state-stats dt { font-size: 0.7rem; }
  .state-stats dd { font-size: 0.8rem; }
  .state-stats .state-stats-up dd { font-size: 0.86rem; }
}
/* Very small phones (under 350px): one badge per row so the stats fit. */
@media (max-width: 349px) { .state-cards { grid-template-columns: 1fr; } }

/* Three numbers instead of four. */
.service-area-stats--three { grid-template-columns: repeat(3, 1fr); }

@media (max-width: 980px) {
  .solution-cards--five { grid-template-columns: 1fr 1fr; }
  .solution-cards--five .solution-card,
  .solution-cards--five .solution-card:nth-child(4) { grid-column: auto; }
  .solution-cards--five .solution-card:nth-child(5) { grid-column: 1 / -1; justify-self: center; width: calc(50% - 12px); }
  .service-area-stats--three { grid-template-columns: repeat(3, 1fr); }
}
@media (max-width: 720px) {
  .solution-cards--five { grid-template-columns: 1fr; }
  .solution-cards--five .solution-card:nth-child(5) { grid-column: auto; width: auto; justify-self: stretch; }
  .service-area-stats--three { grid-template-columns: 1fr 1fr; }
  .service-area-stats--three .service-area-stat:last-child { grid-column: 1 / -1; }
}

/* ==========================================================================
   STICKY MOBILE CTA (Homeowners page, 2026-10-03)
   Phones only (720px and below). Hidden until the hero has scrolled away;
   app.js adds .is-visible. Sits below the form overlay (z-index 100).
   ========================================================================== */
.mobile-sticky-cta { display: none; }
@media (max-width: 720px) {
  .mobile-sticky-cta {
    display: block;
    position: fixed;
    left: 0; right: 0; bottom: 0;
    z-index: 90;
    padding: 10px 16px calc(10px + env(safe-area-inset-bottom, 0px));
    background: rgba(16, 36, 28, 0.96);
    border-top: 1px solid var(--border-on-dark);
    box-shadow: 0 -10px 30px -12px rgba(0, 0, 0, 0.45);
    transform: translateY(110%);
    visibility: hidden;
    transition: transform 0.25s var(--ease), visibility 0s linear 0.25s;
  }
  .mobile-sticky-cta.is-visible {
    transform: translateY(0);
    visibility: visible;
    transition: transform 0.25s var(--ease), visibility 0s;
  }
  .mobile-sticky-cta .btn { min-height: 50px; margin: 0; }
  /* Room at the bottom of the page so the bar never covers the footer. */
  body.has-sticky-cta { padding-bottom: 76px; }
}
@media (prefers-reduced-motion: reduce) {
  .mobile-sticky-cta, .mobile-sticky-cta.is-visible { transition: none; }
}