/* ==========================================================================
   NY Solar Finder
   Single stylesheet for the whole site.

   Order: tokens, reset, typography, layout, buttons, header, drawer, hero,
   sections, cards, FAQ, forms, popup, sticky CTAs, footer, utilities, media.
   ========================================================================== */

/* --------------------------------------------------------------------------
   1. TOKENS
   -------------------------------------------------------------------------- */
:root {
  --clr-primary: #1A3A5C;
  --clr-accent: #F59E0B;
  --clr-white: #FFFFFF;
  --clr-text: #475569;
  --clr-light: #F0F7FF;
  --clr-dark: #0F2439;
  --clr-success: #10B981;

  /* Derived. Kept as tokens so a brand tweak stays a one-line change. */
  --clr-primary-soft: rgba(26, 58, 92, 0.08);
  --clr-accent-soft: rgba(245, 158, 11, 0.12);
  --clr-accent-dark: #D97706;
  --clr-border: #DBE7F3;
  --clr-heading: var(--clr-primary);
  --clr-muted: #64748B;

  --font-display: "Poppins", "Segoe UI", sans-serif;
  --font-body: "Open Sans", "Segoe UI", sans-serif;

  /* Type scale, fluid so it holds up between 360px and 1440px without steps. */
  --fs-h1: clamp(2rem, 1.35rem + 2.6vw, 3.25rem);
  --fs-h2: clamp(1.6rem, 1.2rem + 1.6vw, 2.4rem);
  --fs-h3: clamp(1.2rem, 1.05rem + 0.6vw, 1.5rem);
  --fs-body: 1.0625rem;
  --fs-sm: 0.9375rem;
  --fs-xs: 0.8125rem;

  --container: 1200px;
  --gutter: 1.25rem;
  --radius: 14px;
  --radius-sm: 8px;
  --radius-pill: 999px;

  --shadow-sm: 0 1px 3px rgba(15, 36, 57, 0.07);
  --shadow: 0 6px 24px rgba(15, 36, 57, 0.09);
  --shadow-lg: 0 18px 48px rgba(15, 36, 57, 0.16);

  --header-h: 92px;
  --topbar-h: 40px;

  --ease: cubic-bezier(0.22, 0.61, 0.36, 1);
}

/* --------------------------------------------------------------------------
   2. RESET
   -------------------------------------------------------------------------- */
*, *::before, *::after { box-sizing: border-box; }

html { -webkit-text-size-adjust: 100%; scroll-behavior: smooth; }

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

body {
  margin: 0;
  font-family: var(--font-body);
  font-size: var(--fs-body);
  line-height: 1.7;
  color: var(--clr-text);
  background: var(--clr-white);
  -webkit-font-smoothing: antialiased;
  overflow-x: hidden;
}

img, svg, video { max-width: 100%; height: auto; display: block; }
img { border-style: none; }

a { color: var(--clr-primary); text-decoration: none; transition: color 0.2s var(--ease); }
a:hover { color: var(--clr-accent); }

button { font: inherit; cursor: pointer; border: none; background: none; color: inherit; }

ul, ol { margin: 0 0 1rem; padding-left: 1.25rem; }
li { margin-bottom: 0.4rem; }

/* Visible focus for keyboard users, suppressed for mouse. */
:focus-visible {
  outline: 3px solid var(--clr-accent);
  outline-offset: 2px;
  border-radius: 3px;
}

/* --------------------------------------------------------------------------
   3. TYPOGRAPHY
   -------------------------------------------------------------------------- */
h1, h2, h3, h4, h5 {
  font-family: var(--font-display);
  color: var(--clr-heading);
  line-height: 1.2;
  margin: 0 0 0.75rem;
  font-weight: 700;
  letter-spacing: -0.015em;
}

h1 { font-size: var(--fs-h1); }
h2 { font-size: var(--fs-h2); }
h3 { font-size: var(--fs-h3); font-weight: 600; }
h4 { font-size: 1.0625rem; font-weight: 600; }

p { margin: 0 0 1.1rem; }
p:last-child { margin-bottom: 0; }

strong { font-weight: 600; color: var(--clr-primary); }

.eyebrow {
  display: inline-block;
  font-family: var(--font-body);
  font-size: 0.875rem;
  font-weight: 600;
  text-transform: uppercase;
  letter-spacing: 0.13em;
  color: var(--clr-accent);
  margin-bottom: 0.6rem;
}

.lead { font-size: 1.1875rem; line-height: 1.65; }

/* --------------------------------------------------------------------------
   4. LAYOUT
   -------------------------------------------------------------------------- */
.container {
  width: 100%;
  max-width: var(--container);
  margin-inline: auto;
  padding-inline: var(--gutter);
}

.section { padding: clamp(3.25rem, 6vw, 5.5rem) 0; }
.section--light { background: var(--clr-light); }
.section--dark { background: var(--clr-dark); }
.section--dark, .section--dark p { color: #C7D6E5; }
.section--dark h2, .section--dark h3 { color: var(--clr-white); }

.section-head { max-width: 760px; margin: 0 auto clamp(2rem, 4vw, 3rem); text-align: center; }
.section-head p { color: var(--clr-muted); }

.grid { display: grid; gap: 1.5rem; }
.grid--2 { grid-template-columns: repeat(auto-fit, minmax(320px, 1fr)); }
.grid--3 { grid-template-columns: repeat(auto-fit, minmax(290px, 1fr)); }
.grid--4 { grid-template-columns: repeat(auto-fit, minmax(230px, 1fr)); }

.split { display: grid; grid-template-columns: 1fr 1fr; gap: clamp(2rem, 4vw, 3.5rem); align-items: center; }

/* --------------------------------------------------------------------------
   5. BUTTONS
   -------------------------------------------------------------------------- */
.btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 0.5rem;
  font-family: var(--font-display);
  font-weight: 600;
  font-size: 1rem;
  line-height: 1;
  padding: 0.95rem 1.6rem;
  border-radius: var(--radius-pill);
  text-align: center;
  transition: transform 0.18s var(--ease), box-shadow 0.18s var(--ease), background 0.18s var(--ease);
  min-height: 48px; /* tap target floor */
}

.btn:hover { transform: translateY(-2px); }
.btn:active { transform: translateY(0); }

.btn-accent { background: var(--clr-accent); color: var(--clr-dark); box-shadow: 0 4px 14px rgba(245, 158, 11, 0.35); }
.btn-accent:hover { background: var(--clr-accent-dark); color: var(--clr-dark); box-shadow: 0 8px 22px rgba(245, 158, 11, 0.45); }

.btn-primary { background: var(--clr-primary); color: var(--clr-white); }
.btn-primary:hover { background: var(--clr-dark); color: var(--clr-white); }

.btn-outline { background: transparent; color: var(--clr-primary); box-shadow: inset 0 0 0 2px var(--clr-primary); }
.btn-outline:hover { background: var(--clr-primary); color: var(--clr-white); }

.btn-ghost-light { background: rgba(255, 255, 255, 0.12); color: var(--clr-white); box-shadow: inset 0 0 0 2px rgba(255, 255, 255, 0.6); }
.btn-ghost-light:hover { background: var(--clr-white); color: var(--clr-primary); }

.btn-sm { padding: 0.7rem 1.2rem; font-size: 0.9375rem; min-height: 42px; }
.btn-block { width: 100%; }

/* --------------------------------------------------------------------------
   6. TOP BAR + HEADER
   -------------------------------------------------------------------------- */
.top-bar {
  background: var(--clr-dark);
  color: #A9BFD4;
  font-size: var(--fs-xs);
  height: var(--topbar-h);
  display: flex;
  align-items: center;
}
.top-bar-inner { display: flex; align-items: center; justify-content: space-between; gap: 1.25rem; }
.top-bar-item { display: inline-flex; align-items: center; gap: 0.4rem; color: #A9BFD4; }
.top-bar-item:hover { color: var(--clr-white); }
.top-bar-note { display: inline-flex; align-items: center; gap: 0.4rem; }
.top-bar-note strong { color: var(--clr-white); }

.header {
  position: sticky;
  top: 0;
  z-index: 900;
  background: var(--clr-white);
  border-bottom: 1px solid var(--clr-border);
  transition: box-shadow 0.25s var(--ease);
}
.header.header-scrolled { box-shadow: var(--shadow); }
.header > .container { display: flex; align-items: center; justify-content: space-between; gap: 1rem; min-height: var(--header-h); }

.header-logo { display: flex; align-items: center; flex-shrink: 0; }
.header-logo img { width: auto; height: 68px; }

.header-nav { display: flex; align-items: center; gap: 1.75rem; margin-left: auto; }

.nav-links { display: flex; align-items: center; gap: 0.25rem; }
.nav-links > a,
.nav-dropdown > a {
  display: inline-flex;
  align-items: center;
  gap: 0.3rem;
  padding: 0.55rem 0.7rem;
  font-family: var(--font-display);
  font-weight: 600;
  font-size: 0.9375rem;
  color: var(--clr-primary);
  border-radius: var(--radius-sm);
  white-space: nowrap;
}
.nav-links > a:hover,
.nav-dropdown > a:hover { background: var(--clr-primary-soft); color: var(--clr-primary); }
.nav-links > a.active,
.nav-dropdown > a.active { color: var(--clr-accent-dark); background: var(--clr-accent-soft); }

.nav-dropdown { position: relative; }
.nav-dropdown .chevron { transition: transform 0.2s var(--ease); }
.nav-dropdown:hover .chevron { transform: rotate(180deg); }

.dropdown-menu {
  position: absolute;
  top: calc(100% + 6px);
  left: 0;
  min-width: 260px;
  background: var(--clr-white);
  border: 1px solid var(--clr-border);
  border-radius: var(--radius);
  box-shadow: var(--shadow-lg);
  padding: 0.5rem;
  opacity: 0;
  visibility: hidden;
  transform: translateY(8px);
  transition: opacity 0.2s var(--ease), transform 0.2s var(--ease), visibility 0.2s;
}
.nav-dropdown:hover .dropdown-menu,
.nav-dropdown:focus-within .dropdown-menu { opacity: 1; visibility: visible; transform: translateY(0); }

.dropdown-menu a {
  display: block;
  padding: 0.6rem 0.8rem;
  border-radius: var(--radius-sm);
  font-size: 0.9375rem;
  font-weight: 500;
  color: var(--clr-text);
}
.dropdown-menu a:hover { background: var(--clr-light); color: var(--clr-primary); }
.dropdown-menu a.active { color: var(--clr-accent-dark); font-weight: 600; }

/* Wide dropdown for the 8 region hubs. */
.dropdown-wide { min-width: 480px; columns: 2; column-gap: 0.5rem; }
.dropdown-wide a { break-inside: avoid; }

.header-cta { display: flex; align-items: center; gap: 0.85rem; flex-shrink: 0; }
.header-phone {
  display: inline-flex;
  align-items: center;
  gap: 0.45rem;
  font-family: var(--font-display);
  font-weight: 700;
  font-size: 1rem;
  color: var(--clr-primary);
  white-space: nowrap;
}
.header-phone:hover { color: var(--clr-accent-dark); }

.hamburger {
  display: none;
  flex-direction: column;
  justify-content: center;
  gap: 5px;
  width: 46px;
  height: 46px;
  padding: 10px;
  border-radius: var(--radius-sm);
}
.hamburger span { display: block; height: 2px; width: 100%; background: var(--clr-primary); border-radius: 2px; transition: transform 0.25s var(--ease), opacity 0.2s; }
.hamburger[aria-expanded="true"] span:nth-child(1) { transform: translateY(7px) rotate(45deg); }
.hamburger[aria-expanded="true"] span:nth-child(2) { opacity: 0; }
.hamburger[aria-expanded="true"] span:nth-child(3) { transform: translateY(-7px) rotate(-45deg); }

/* --------------------------------------------------------------------------
   7. MOBILE DRAWER
   -------------------------------------------------------------------------- */
.drawer-overlay {
  position: fixed;
  inset: 0;
  background: rgba(15, 36, 57, 0.55);
  opacity: 0;
  visibility: hidden;
  transition: opacity 0.28s var(--ease), visibility 0.28s;
  z-index: 998;
}
.drawer-overlay.active { opacity: 1; visibility: visible; }

.mobile-drawer {
  position: fixed;
  top: 0;
  right: 0;
  width: min(360px, 88vw);
  height: 100dvh;
  background: var(--clr-white);
  z-index: 999;
  transform: translateX(100%);
  transition: transform 0.32s var(--ease);
  display: flex;
  flex-direction: column;
  overflow-y: auto;
  overscroll-behavior: contain;
}
.mobile-drawer.active { transform: translateX(0); }

.drawer-header { display: flex; align-items: center; justify-content: space-between; padding: 1rem 1.25rem; border-bottom: 1px solid var(--clr-border); }
.drawer-header img { height: 56px; width: auto; }
.drawer-close { width: 44px; height: 44px; display: grid; place-items: center; color: var(--clr-primary); border-radius: var(--radius-sm); }

.drawer-nav { padding: 0.75rem 0.75rem 0; flex: 1; }
.drawer-nav > a,
.drawer-services-toggle {
  display: flex;
  align-items: center;
  justify-content: space-between;
  width: 100%;
  padding: 0.85rem 0.9rem;
  font-family: var(--font-display);
  font-weight: 600;
  font-size: 1rem;
  color: var(--clr-primary);
  border-radius: var(--radius-sm);
  text-align: left;
  min-height: 48px;
}
.drawer-nav > a.active,
.drawer-services-toggle.active { color: var(--clr-accent-dark); background: var(--clr-accent-soft); }
.drawer-services-toggle .chevron { transition: transform 0.24s var(--ease); flex-shrink: 0; }
.drawer-services-toggle[aria-expanded="true"] .chevron { transform: rotate(180deg); }

.drawer-services-list {
  max-height: 0;
  overflow: hidden;
  transition: max-height 0.3s var(--ease);
  padding-left: 0.9rem;
}
.drawer-services-list.open { max-height: 2200px; }
.drawer-services-list a {
  display: block;
  padding: 0.6rem 0.9rem;
  font-size: 0.9375rem;
  color: var(--clr-text);
  border-left: 2px solid var(--clr-border);
}
.drawer-services-list a:hover, .drawer-services-list a.active { color: var(--clr-accent-dark); border-left-color: var(--clr-accent); }

.drawer-cta { display: grid; gap: 0.6rem; padding: 1rem 1.25rem; border-top: 1px solid var(--clr-border); }
.drawer-info { padding: 0 1.25rem 1.5rem; font-size: var(--fs-xs); color: var(--clr-muted); }

/* --------------------------------------------------------------------------
   8. HERO
   -------------------------------------------------------------------------- */
.hero { position: relative; background: var(--clr-dark); color: var(--clr-white); overflow: hidden; }
.hero-media { position: absolute; inset: 0; }
.hero-media img, .hero-media video { width: 100%; height: 100%; object-fit: cover; }
.hero-media::after {
  content: "";
  position: absolute;
  inset: 0;
  /* Left-weighted scrim so headline text stays legible over the photo. */
  background: linear-gradient(100deg, rgba(15, 36, 57, 0.92) 0%, rgba(15, 36, 57, 0.78) 42%, rgba(15, 36, 57, 0.35) 100%);
}
/* padding-block, never the padding shorthand: these elements also carry
   .container, and a shorthand would zero its horizontal gutter. */
.hero-inner { position: relative; z-index: 2; padding-block: clamp(3.5rem, 8vw, 6.5rem); max-width: 660px; }
.hero h1 { color: var(--clr-white); margin-bottom: 1rem; }
.hero .eyebrow { color: var(--clr-accent); }
.hero p { color: #D3E1EE; font-size: 1.125rem; }
.hero-actions { display: flex; flex-wrap: wrap; gap: 0.85rem; margin-top: 1.75rem; }
.hero-trust { display: flex; flex-wrap: wrap; gap: 1.25rem 1.75rem; margin-top: 2rem; padding-top: 1.5rem; border-top: 1px solid rgba(255, 255, 255, 0.18); }
.hero-trust-item { display: flex; align-items: center; gap: 0.5rem; font-size: var(--fs-sm); color: #D3E1EE; }
.hero-trust-item svg { color: var(--clr-accent); flex-shrink: 0; }

/* Page hero, the shorter variant on inner pages. */
.page-hero { position: relative; background: var(--clr-primary); color: var(--clr-white); overflow: hidden; }
.page-hero .hero-media::after { background: linear-gradient(100deg, rgba(26, 58, 92, 0.93) 0%, rgba(26, 58, 92, 0.8) 50%, rgba(26, 58, 92, 0.5) 100%); }
.page-hero-inner { position: relative; z-index: 2; padding-block: clamp(2.5rem, 5vw, 4rem); max-width: 720px; }
.page-hero h1 { color: var(--clr-white); }
.page-hero p { color: #D3E1EE; }

/* --------------------------------------------------------------------------
   9. BREADCRUMBS
   -------------------------------------------------------------------------- */
.breadcrumbs { font-size: var(--fs-xs); padding: 0.9rem 0; color: var(--clr-muted); }
.breadcrumbs ol { list-style: none; display: flex; flex-wrap: wrap; gap: 0.4rem; margin: 0; padding: 0; }
.breadcrumbs li { margin: 0; display: inline-flex; align-items: center; gap: 0.4rem; }
.breadcrumbs li + li::before { content: "›"; color: var(--clr-border); }
.breadcrumbs a { color: var(--clr-muted); }
.breadcrumbs a:hover { color: var(--clr-accent-dark); }
.breadcrumbs [aria-current="page"] { color: var(--clr-primary); font-weight: 600; }

/* --------------------------------------------------------------------------
   10. CARDS
   -------------------------------------------------------------------------- */
.card {
  position: relative;
  background: var(--clr-white);
  border: 1px solid var(--clr-border);
  border-radius: var(--radius);
  overflow: hidden;
  display: flex;
  flex-direction: column;
  transition: transform 0.22s var(--ease), box-shadow 0.22s var(--ease);
}
.card:hover { transform: translateY(-4px); box-shadow: var(--shadow); }
.card:focus-within { box-shadow: var(--shadow); }
.card-body h3 a:focus-visible::after { outline: 3px solid var(--clr-accent); outline-offset: -3px; border-radius: var(--radius); }
.card-media { aspect-ratio: 16 / 9; background: var(--clr-light); }
.card-media img { width: 100%; height: 100%; object-fit: cover; }
.card-body { padding: 1.35rem; flex: 1; display: flex; flex-direction: column; }
.card-body h3 { margin-bottom: 0.5rem; }
.card-body p { font-size: var(--fs-sm); color: var(--clr-muted); }
.card-link { margin-top: auto; padding-top: 0.9rem; font-weight: 600; font-size: var(--fs-sm); color: var(--clr-accent-dark); display: inline-flex; align-items: center; gap: 0.35rem; }
.card-link svg { transition: transform 0.18s var(--ease); }
.card:hover .card-link svg, .icon-card:hover .card-link svg { transform: translateX(3px); }

/* Whole-card click target.
   The heading anchor is stretched over the entire card rather than adding a
   second link on "Learn more". Two anchors pointing at the same URL make a
   screen reader announce the destination twice and split link equity, so one
   real link covering the full area is both better UX and better markup. */
.card-body h3 a::after,
.icon-card > h2 a::after,
.icon-card > h3 a::after {
  content: "";
  position: absolute;
  inset: 0;
  z-index: 1;
}
.icon-card { position: relative; }
/* Keep genuinely separate links (external verify links) clickable above it. */
.trust-card .card-link, .card-body a[href^="http"] { position: relative; z-index: 2; }

.icon-card { background: var(--clr-white); border: 1px solid var(--clr-border); border-radius: var(--radius); padding: 1.6rem; }
.icon-card .icon { width: 46px; height: 46px; display: grid; place-items: center; border-radius: 12px; background: var(--clr-accent-soft); color: var(--clr-accent-dark); margin-bottom: 0.9rem; }
.icon-card h3 { font-size: 1.0625rem; }
.icon-card p { font-size: var(--fs-sm); color: var(--clr-muted); margin: 0; }

/* Trust panel. Credentials belong to the installers, never to this site, so the
   attribution line below is a compliance requirement and not decoration. */
.trust-card { display: flex; flex-direction: column; }
.trust-card .card-link { margin-top: 1rem; }
.trust-attribution {
  max-width: 900px;
  margin: 2rem auto 0;
  padding: 1.1rem 1.35rem;
  background: var(--clr-light);
  border-left: 3px solid var(--clr-accent);
  border-radius: var(--radius-sm);
  font-size: var(--fs-sm);
  line-height: 1.6;
  color: var(--clr-text);
  display: flex;
  gap: 0.65rem;
  align-items: flex-start;
}
.trust-attribution svg { flex-shrink: 0; margin-top: 0.3rem; color: var(--clr-accent-dark); }

/* Numbered process steps. */
.steps { counter-reset: step; }
.step { position: relative; padding-left: 3.75rem; margin-bottom: 1.75rem; }
.step::before {
  counter-increment: step;
  content: counter(step);
  position: absolute;
  left: 0;
  top: 0;
  width: 46px;
  height: 46px;
  display: grid;
  place-items: center;
  border-radius: 50%;
  background: var(--clr-primary);
  color: var(--clr-white);
  font-family: var(--font-display);
  font-weight: 700;
}
.step h3 { margin-bottom: 0.35rem; }
.step p { font-size: var(--fs-sm); margin: 0; }

/* Stat blocks, used where a photo would otherwise carry a section. */
.stat-row { display: grid; grid-template-columns: repeat(auto-fit, minmax(180px, 1fr)); gap: 1.25rem; }
.stat { text-align: center; padding: 1.5rem 1rem; background: var(--clr-white); border: 1px solid var(--clr-border); border-radius: var(--radius); }
.stat-value { font-family: var(--font-display); font-size: clamp(1.75rem, 1.3rem + 1.6vw, 2.5rem); font-weight: 700; color: var(--clr-accent-dark); line-height: 1.1; }
.stat-label { font-size: var(--fs-sm); color: var(--clr-muted); margin-top: 0.35rem; }
.section--dark .stat { background: rgba(255, 255, 255, 0.05); border-color: rgba(255, 255, 255, 0.14); }
.section--dark .stat-value { color: var(--clr-accent); }
.section--dark .stat-label { color: #A9BFD4; }

/* Checklist. */
.checklist { list-style: none; padding: 0; }
.checklist li { position: relative; padding-left: 2rem; margin-bottom: 0.7rem; }
.checklist li::before {
  content: "";
  position: absolute;
  left: 0;
  top: 0.45rem;
  width: 18px;
  height: 18px;
  border-radius: 50%;
  background: var(--clr-success);
  /* Checkmark drawn with a mask so no icon file is needed. */
  -webkit-mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cpath d='M20 6 9 17l-5-5' fill='none' stroke='%23000' stroke-width='3' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E") center / 14px no-repeat,
           linear-gradient(#000 0 0);
  -webkit-mask-composite: xor;
  mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cpath d='M20 6 9 17l-5-5' fill='none' stroke='%23000' stroke-width='3' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E") center / 14px no-repeat,
        linear-gradient(#000 0 0);
  mask-composite: exclude;
}

/* --------------------------------------------------------------------------
   11. FAQ ACCORDION
   -------------------------------------------------------------------------- */
.faq { max-width: 820px; margin-inline: auto; }
.faq-item { border: 1px solid var(--clr-border); border-radius: var(--radius); margin-bottom: 0.75rem; background: var(--clr-white); overflow: hidden; }
.faq-q {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 1rem;
  width: 100%;
  padding: 1.15rem 1.35rem;
  font-family: var(--font-display);
  font-weight: 600;
  font-size: 1.0625rem;
  color: var(--clr-primary);
  text-align: left;
  min-height: 56px;
}
.faq-q .chevron { flex-shrink: 0; transition: transform 0.25s var(--ease); color: var(--clr-accent-dark); }
.faq-q[aria-expanded="true"] .chevron { transform: rotate(180deg); }
.faq-a { max-height: 0; overflow: hidden; transition: max-height 0.3s var(--ease); }
.faq-a-inner { padding: 0 1.35rem 1.25rem; font-size: var(--fs-sm); }

/* --------------------------------------------------------------------------
   12. FORMS
   -------------------------------------------------------------------------- */
.form-row { display: grid; grid-template-columns: 1fr 1fr; gap: 0.75rem; }

input[type="text"], input[type="tel"], input[type="email"], select, textarea {
  width: 100%;
  padding: 0.85rem 1rem;
  font-family: var(--font-body);
  font-size: 1rem;
  color: var(--clr-dark);
  background: var(--clr-white);
  border: 1px solid var(--clr-border);
  border-radius: var(--radius-sm);
  margin-bottom: 0.75rem;
  min-height: 48px;
  transition: border-color 0.18s var(--ease), box-shadow 0.18s var(--ease);
}
input:focus, select:focus, textarea:focus {
  outline: none;
  border-color: var(--clr-accent);
  box-shadow: 0 0 0 3px var(--clr-accent-soft);
}
textarea { resize: vertical; min-height: 90px; }
::placeholder { color: #94A3B8; opacity: 1; }

/* Labelled fields. Placeholders alone fail accessibility and vanish on focus,
   which is exactly when people need to know what they are typing. */
.field { display: block; margin-bottom: 0.85rem; }
.field-label {
  display: block;
  font-size: var(--fs-xs);
  font-weight: 600;
  color: var(--clr-primary);
  margin-bottom: 0.35rem;
  letter-spacing: 0.01em;
}
.field-label em { color: #DC2626; font-style: normal; margin-left: 0.1rem; }
.field input, .field select, .field textarea { margin-bottom: 0; }

/* Progressive disclosure. Five required fields stay visible; the rest sits
   behind this toggle so the form reads short without losing the detail an
   installer actually wants before calling. */
.optional-toggle {
  display: flex;
  align-items: center;
  gap: 0.65rem;
  padding: 0.9rem 0;
  margin-top: 0.35rem;
  border-top: 1px solid var(--clr-border);
}
.optional-toggle input[type="checkbox"] {
  width: 20px; height: 20px; min-height: 0; margin: 0;
  flex-shrink: 0; accent-color: var(--clr-accent); cursor: pointer;
}
.optional-toggle label {
  font-family: var(--font-display);
  font-weight: 600;
  font-size: 0.9375rem;
  color: var(--clr-primary);
  cursor: pointer;
  user-select: none;
}
.optional-toggle label span { font-family: var(--font-body); font-weight: 400; color: var(--clr-muted); }

/* max-height driven from scrollHeight in JS, matching the FAQ accordion.
   The 0fr/1fr grid trick did not resolve against content height inside the
   popup's own scroll container. Padding stays constant so the measured height
   is stable; only the visible surface changes on open. */
.optional-panel {
  max-height: 0;
  overflow: hidden;
  transition: max-height 0.32s var(--ease);
}
.optional-panel-inner {
  padding: 1.1rem 1.15rem 0.4rem;
  background: var(--clr-light);
  border-radius: var(--radius-sm);
  margin-bottom: 1rem;
}
.optional-hint { font-size: var(--fs-xs); color: var(--clr-muted); margin-bottom: 0.9rem; }

.consent {
  display: flex;
  align-items: flex-start;
  gap: 0.65rem;
  font-size: var(--fs-xs);
  line-height: 1.55;
  color: var(--clr-muted);
  margin: 0.35rem 0 1rem;
}
.consent input[type="checkbox"] {
  width: 18px;
  height: 18px;
  min-height: 0;
  margin: 0.15rem 0 0;
  flex-shrink: 0;
  accent-color: var(--clr-accent);
}
.consent a { color: var(--clr-primary); text-decoration: underline; }

.btn-submit {
  width: 100%;
  padding: 1rem;
  font-family: var(--font-display);
  font-weight: 700;
  font-size: 1.0625rem;
  color: var(--clr-dark);
  background: var(--clr-accent);
  border-radius: var(--radius-pill);
  min-height: 52px;
  transition: background 0.18s var(--ease), transform 0.18s var(--ease);
}
.btn-submit:hover { background: var(--clr-accent-dark); transform: translateY(-2px); }

/* Submission failure. Red enough to stop somebody who is mid-task, because a
   failure here means their enquiry reached nobody. */
.form-error {
  margin: 0.9rem 0 0;
  padding: 0.75rem 0.9rem;
  border: 1px solid var(--clr-danger, #b3261e);
  border-left-width: 3px;
  border-radius: var(--radius-sm, 6px);
  background: color-mix(in srgb, var(--clr-danger, #b3261e) 6%, transparent);
  color: var(--clr-danger, #b3261e);
  font-size: var(--fs-sm);
  line-height: 1.5;
}
.btn-submit[aria-busy="true"] { opacity: 0.7; cursor: progress; }

.privacy-note { display: flex; align-items: center; justify-content: center; gap: 0.4rem; font-size: var(--fs-xs); color: var(--clr-muted); margin: 0.85rem 0 0; }

/* --------------------------------------------------------------------------
   13. POPUP
   -------------------------------------------------------------------------- */
.popup-overlay {
  position: fixed;
  inset: 0;
  background: rgba(15, 36, 57, 0.72);
  display: grid;
  place-items: center;
  padding: 1rem;
  opacity: 0;
  visibility: hidden;
  transition: opacity 0.25s var(--ease), visibility 0.25s;
  z-index: 1000;
  overflow-y: auto;
}
.popup-overlay.active { opacity: 1; visibility: visible; }

.popup-form {
  position: relative;
  width: 100%;
  max-width: 520px;
  background: var(--clr-white);
  border-radius: var(--radius);
  padding: 2rem 1.75rem 1.75rem;
  box-shadow: var(--shadow-lg);
  transform: translateY(16px) scale(0.98);
  transition: transform 0.28s var(--ease);
  max-height: 92dvh;
  overflow-y: auto;
}
.popup-overlay.active .popup-form { transform: translateY(0) scale(1); }

.popup-close { position: absolute; top: 0.75rem; right: 0.75rem; width: 44px; height: 44px; display: grid; place-items: center; color: var(--clr-muted); border-radius: var(--radius-sm); }
.popup-close:hover { color: var(--clr-primary); background: var(--clr-light); }
.popup-logo { height: 64px; width: auto; margin-bottom: 1rem; }
.popup-form h3 { margin-bottom: 0.35rem; }
.popup-subtitle { font-size: var(--fs-sm); color: var(--clr-muted); margin-bottom: 1.25rem; }

/* --------------------------------------------------------------------------
   14. STICKY CTAs
   -------------------------------------------------------------------------- */
.side-cta {
  position: fixed;
  right: 0;
  top: 50%;
  transform: translateY(-50%);
  z-index: 850;
  display: flex;
  flex-direction: column;
  gap: 2px;
}
.side-cta a {
  display: flex;
  align-items: center;
  gap: 0.5rem;
  padding: 0.9rem 1rem;
  font-family: var(--font-display);
  font-weight: 600;
  font-size: 0.875rem;
  writing-mode: vertical-rl;
  border-radius: 10px 0 0 10px;
  box-shadow: var(--shadow);
}
.side-cta .side-phone { background: var(--clr-primary); color: var(--clr-white); }
.side-cta .side-quote { background: var(--clr-accent); color: var(--clr-dark); }
.side-cta a svg { transform: rotate(90deg); }

.mobile-bar {
  display: none;
  position: fixed;
  left: 0;
  right: 0;
  bottom: 0;
  z-index: 880;
  background: var(--clr-white);
  border-top: 1px solid var(--clr-border);
  box-shadow: 0 -4px 20px rgba(15, 36, 57, 0.14);
  padding: 0.55rem 0.6rem calc(0.55rem + env(safe-area-inset-bottom));
  gap: 0.5rem;
}
.mobile-bar .btn { flex: 1; font-size: 0.9375rem; padding: 0.8rem 0.6rem; }

/* --------------------------------------------------------------------------
   15. FOOTER
   -------------------------------------------------------------------------- */
.footer { background: var(--clr-dark); color: #A9BFD4; padding: clamp(3rem, 5vw, 4.5rem) 0 0; font-size: var(--fs-sm); }
.footer-grid { display: grid; grid-template-columns: 1.6fr 1fr 1fr 1.2fr; gap: 2.5rem; }
.footer h4, .footer .footer-heading {
  color: var(--clr-white);
  font-size: 1rem;
  margin-bottom: 1rem;
  letter-spacing: 0;
}
.footer-brand img { height: 76px; width: auto; margin-bottom: 1rem; }
.footer-brand p { color: #A9BFD4; }
.footer-links { display: flex; flex-direction: column; gap: 0.55rem; }
.footer-links a, .footer a { color: #A9BFD4; }
.footer-links a:hover, .footer a:hover { color: var(--clr-accent); }
.footer-contact-item { display: flex; align-items: flex-start; gap: 0.6rem; margin-bottom: 0.9rem; }
.footer-contact-item svg { flex-shrink: 0; margin-top: 0.25rem; color: var(--clr-accent); }

.footer-disclosure {
  margin-top: clamp(2.5rem, 4vw, 3.5rem);
  padding: 1.5rem 0;
  border-top: 1px solid rgba(255, 255, 255, 0.1);
  font-size: var(--fs-xs);
  line-height: 1.65;
  color: #8FA6BC;
}

.footer-bottom {
  border-top: 1px solid rgba(255, 255, 255, 0.1);
  padding: 1.25rem 0;
  font-size: var(--fs-xs);
}
.footer-bottom .container { display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: 0.75rem; }

/* RBR Growth Consulting credit. */
.rbr-credit { display: inline-flex; align-items: center; gap: 0.45rem; color: #8FA6BC; }
.rbr-credit img { height: 20px; width: auto; opacity: 0.85; transition: opacity 0.2s var(--ease); }
.rbr-credit:hover img { opacity: 1; }
.rbr-credit:hover { color: var(--clr-accent); }

/* --------------------------------------------------------------------------
   15b. LONG-FORM CONTENT
   -------------------------------------------------------------------------- */
.prose { max-width: 780px; margin-inline: auto; }
.prose h2 { margin-top: 2.5rem; }
.prose h2:first-child { margin-top: 0; }
.prose h3 { margin-top: 1.5rem; }
.prose .grid, .prose .stat-row, .prose .steps { max-width: none; }

/* Answer block. Answer engines lift a short self-contained response near the
   top of a page far more readily than one buried in prose, and the same block
   wins featured snippets in classic search. */
.answer-block {
  max-width: 780px;
  margin-inline: auto;
  padding: 1.4rem 1.6rem;
  background: var(--clr-light);
  border-left: 4px solid var(--clr-accent);
  border-radius: var(--radius-sm);
}
.answer-block .eyebrow { margin-bottom: 0.35rem; }
.answer-block p { margin: 0; font-size: 1.0625rem; line-height: 1.65; color: var(--clr-primary); font-weight: 600; }

.callout {
  display: flex;
  gap: 0.85rem;
  align-items: flex-start;
  margin: 1.75rem 0;
  padding: 1.15rem 1.35rem;
  background: var(--clr-accent-soft);
  border-radius: var(--radius-sm);
  font-size: var(--fs-sm);
  line-height: 1.6;
}
.callout-icon { color: var(--clr-accent-dark); flex-shrink: 0; margin-top: 0.2rem; }
.callout strong { display: block; margin-bottom: 0.2rem; }

/* Tables scroll inside their own container so the page body never does. */
.table-wrap { overflow-x: auto; margin: 1.75rem 0; border: 1px solid var(--clr-border); border-radius: var(--radius-sm); }
table { width: 100%; border-collapse: collapse; font-size: var(--fs-sm); }
th, td { padding: 0.8rem 1rem; text-align: left; border-bottom: 1px solid var(--clr-border); }
th { background: var(--clr-light); font-family: var(--font-display); font-weight: 600; color: var(--clr-primary); white-space: nowrap; }
tbody tr:last-child td { border-bottom: none; }
tbody tr:hover { background: var(--clr-light); }

.chip-row { display: flex; flex-wrap: wrap; gap: 0.6rem; margin-top: 1.75rem; justify-content: center; }
.chip {
  display: inline-flex;
  align-items: center;
  padding: 0.55rem 1rem;
  background: var(--clr-white);
  border: 1px solid var(--clr-border);
  border-radius: var(--radius-pill);
  font-size: var(--fs-sm);
  font-weight: 600;
  color: var(--clr-primary);
  transition: border-color 0.18s var(--ease), color 0.18s var(--ease);
}
.chip:hover { border-color: var(--clr-accent); color: var(--clr-accent-dark); }

/* --------------------------------------------------------------------------
   16. UTILITIES
   -------------------------------------------------------------------------- */
.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;
}
.skip-link {
  position: absolute;
  top: -60px;
  left: 1rem;
  z-index: 1100;
  background: var(--clr-accent);
  color: var(--clr-dark);
  padding: 0.75rem 1.25rem;
  border-radius: 0 0 var(--radius-sm) var(--radius-sm);
  font-weight: 600;
  transition: top 0.2s var(--ease);
}
.skip-link:focus { top: 0; }

.text-center { text-align: center; }
.mt-2 { margin-top: 2rem; }

/* --------------------------------------------------------------------------
   17. MEDIA QUERIES
   -------------------------------------------------------------------------- */
@media (max-width: 1023px) {
  .header-nav { display: none; }
  .hamburger { display: flex; }
  .side-cta { display: none; }
  .split { grid-template-columns: 1fr; }
  .footer-grid { grid-template-columns: 1fr 1fr; gap: 2rem; }
}

@media (max-width: 767px) {
  :root { --header-h: 76px; }
  .top-bar { display: none; }
  .header-logo img { height: 56px; }
  .mobile-bar { display: flex; }
  /* Clear the sticky bar so it never covers the end of the page. */
  body { padding-bottom: 76px; }
  .footer-grid { grid-template-columns: 1fr; gap: 1.75rem; }
  .form-row { grid-template-columns: 1fr; }
  .hero-inner { padding-block: 3rem; }
  .popup-form { padding: 1.75rem 1.25rem 1.5rem; }
  .step { padding-left: 3.25rem; }
  .step::before { width: 38px; height: 38px; font-size: 0.9375rem; }
}

@media print {
  .header, .top-bar, .mobile-bar, .side-cta, .popup-overlay, .mobile-drawer, .drawer-overlay { display: none !important; }
  body { padding-bottom: 0; }
}

/* ------------------------------------------------------------------
   Contractor verification panel and consent disclosure
   ------------------------------------------------------------------ */

/* The "how to check" line is the actionable half of each trust card. It sits
   apart from the explanation so it reads as an instruction, not more prose. */
.trust-how {
  margin-top: .75rem;
  padding-top: .75rem;
  border-top: 1px solid var(--clr-border);
  font-size: .9375rem;
  color: var(--clr-muted);
}
.trust-how strong { color: var(--clr-text); }

/* Compensation disclosure, directly above the submit button. FTC guidance puts
   the disclosure next to the action it qualifies, so this must not be moved
   below the button or collapsed behind anything. */
.consent-disclosure {
  margin: .25rem 0 1rem;
  font-size: .8125rem;
  line-height: 1.5;
  color: var(--clr-muted);
}

/* Two consent boxes now, so they need space between them rather than reading
   as one block of small print. */
.consent + .consent { margin-top: .625rem; }