/*
 * Lucent Insurance Group - site stylesheet
 *
 * Consolidated from the former styles.css, home.css, and quote.css.
 *
 *   1. TOKENS  design tokens
 *   2. BASE    every page
 *   3. HOME    scoped to body.home-page
 *   4. QUOTE   scoped to body.quote-page
 *
 * Sections 3 and 4 are scoped because the home and quote pages use some
 * of the same class names for different components - .step is a process
 * step on one and a wizard panel on the other.
 */

/* ===== 1. TOKENS ===== */

:root {
  --blue-900: #0b3a66;
  --blue-700: #155fa0;
  --blue-500: #2196f3;
  --blue-300: #6cb6f0;
  --blue-100: #e6f2fb;
  --blue-50: #f4f9fd;
  --red-700: #b73a1f;
  --red-600: #d94426;
  --red-500: #e64a2e;
  --red-100: #fce8e3;
  --ink-900: #0e1a26;
  --ink-700: #2a3d4f;
  --ink-500: #5a6c7d;
  --ink-300: #9aa7b3;
  --ink-100: #e3e8ec;
  --ink-50: #f5f7f9;
  --white: #ffffff;
  --shadow-sm: 0 1px 3px rgba(14,26,38,.08);
  --shadow-md: 0 6px 20px rgba(14,26,38,.10);
  --shadow-lg: 0 18px 50px rgba(14,26,38,.16);
  --radius-sm: 6px;
  --radius-md: 10px;
  --radius-lg: 18px;
  --container: 1200px;
  --container-wide: 1320px;
  --ink-200: #c5cdd6;
  --red: #e74c3c;
  --green: #27ae60;
  --radius: 10px;
  --shadow: 0 4px 20px rgba(14,26,38,.1);
}

/* ===== 2. BASE ===== */

* {
  box-sizing: border-box;
  margin: 0;
  padding: 0;
}
html {
  scroll-behavior: smooth;
  font-size: 16px;
}
html {
  overflow-x: hidden;
  max-width: 100%;
}
body {
  overflow-x: hidden;
  max-width: 100%;
}
body {
  font-family: 'Inter', 'Helvetica Neue', Arial, sans-serif;
  font-size: 16px;
  line-height: 1.6;
  color: var(--ink-900);
  background: var(--white);
  -webkit-font-smoothing: antialiased;
}
h1 {
  font-family: 'Barlow', 'Inter', sans-serif;
  font-weight: 800;
  line-height: 1.15;
  color: var(--ink-900);
  letter-spacing: -0.01em;
}
h2 {
  font-family: 'Barlow', 'Inter', sans-serif;
  font-weight: 800;
  line-height: 1.15;
  color: var(--ink-900);
  letter-spacing: -0.01em;
}
h3 {
  font-family: 'Barlow', 'Inter', sans-serif;
  font-weight: 800;
  line-height: 1.15;
  color: var(--ink-900);
  letter-spacing: -0.01em;
}
h4 {
  font-family: 'Barlow', 'Inter', sans-serif;
  font-weight: 800;
  line-height: 1.15;
  color: var(--ink-900);
  letter-spacing: -0.01em;
}
h5 {
  font-family: 'Barlow', 'Inter', sans-serif;
  font-weight: 800;
  line-height: 1.15;
  color: var(--ink-900);
  letter-spacing: -0.01em;
}
h1 {
  font-size: clamp(2.2rem, 5vw, 3.6rem);
  margin-bottom: 1rem;
}
h2 {
  font-size: clamp(1.8rem, 3.5vw, 2.6rem);
  margin-bottom: 1rem;
}
h3 {
  font-size: clamp(1.25rem, 2vw, 1.5rem);
  margin-bottom: .75rem;
}
h4 {
  font-size: 1.1rem;
  margin-bottom: .5rem;
}
p {
  margin-bottom: 1rem;
  color: var(--ink-700);
}
a {
  color: var(--blue-700);
  text-decoration: none;
  transition: color .2s;
}
a:hover {
  color: var(--red-500);
}
img {
  max-width: 100%;
  height: auto;
  display: block;
}
.container {
  max-width: var(--container);
  margin: 0 auto;
  padding: 0 24px;
}
.container-wide {
  max-width: var(--container-wide);
  margin: 0 auto;
  padding: 0 24px;
}
.state-phones .label {
  font-weight: 400;
  opacity: .8;
  margin-right: 4px;
}
.site-header {
  background: var(--white);
  border-bottom: 1px solid var(--ink-100);
  position: sticky;
  top: 0;
  z-index: 100;
  box-shadow: var(--shadow-sm);
}
.header-inner {
  display: flex;
  justify-content: space-between;
  align-items: center;
  padding: 18px 0;
  gap: 24px;
}
.logo {
  display: inline-flex;
  align-items: center;
  text-decoration: none;
}
.logo img {
  height: 56px;
  width: auto;
  display: block;
}
@media (max-width: 720px) {
  .logo img {
    height: 44px;
  }
}

.main-nav ul {
  list-style: none;
  display: flex;
  gap: 6px;
  align-items: center;
}
.main-nav a {
  display: block;
  padding: 10px 14px;
  font-weight: 600;
  font-size: .95rem;
  color: var(--ink-700);
  border-radius: var(--radius-sm);
  transition: all .2s;
}
.main-nav a:hover {
  color: var(--blue-700);
  background: var(--blue-50);
}
.main-nav a.active {
  color: var(--blue-700);
}
.has-submenu {
  position: relative;
}
.has-submenu > a::after {
  content: '\25BE';
  font-size: .7rem;
  margin-left: 4px;
  opacity: .6;
}
.submenu {
  position: absolute;
  top: 100%;
  left: 0;
  min-width: 250px;
  background: var(--white);
  border: 1px solid var(--ink-100);
  border-radius: var(--radius-md);
  box-shadow: var(--shadow-lg);
  padding: 8px;
  opacity: 0;
  visibility: hidden;
  transform: translateY(8px);
  transition: all .2s;
  list-style: none;
  display: flex;
  flex-direction: column;
  gap: 2px;
}
.has-submenu:hover .submenu {
  opacity: 1;
  visibility: visible;
  transform: translateY(0);
}
.has-submenu:focus-within .submenu {
  opacity: 1;
  visibility: visible;
  transform: translateY(0);
}
.submenu li {
  display: block;
}
.submenu a {
  padding: 10px 14px;
  display: block;
  border-radius: var(--radius-sm);
}
.nav-cta {
  background: #d1432a;
  color: var(--white) !important;
  padding: 12px 22px !important;
  border-radius: var(--radius-sm);
  font-weight: 700 !important;
  box-shadow: 0 4px 12px rgba(230,74,46,.3);
  transition: all .2s !important;
}
.nav-cta:hover {
  background: var(--red-600) !important;
  transform: translateY(-1px);
  box-shadow: 0 6px 18px rgba(230,74,46,.4);
}
.mobile-toggle {
  display: none;
  background: none;
  border: 0;
  cursor: pointer;
  padding: 8px;
  flex-direction: column;
  gap: 5px;
}
.mobile-toggle span {
  display: block;
  width: 24px;
  height: 3px;
  background: var(--ink-900);
  border-radius: 2px;
  transition: all .2s;
}
.btn {
  display: inline-block;
  padding: 14px 28px;
  font-weight: 700;
  font-size: 1rem;
  border-radius: var(--radius-sm);
  border: 0;
  cursor: pointer;
  text-align: center;
  transition: all .2s;
  font-family: inherit;
  letter-spacing: .01em;
}
.btn-primary {
  background: #d1432a;
  color: var(--white);
  box-shadow: 0 4px 14px rgba(230,74,46,.3);
}
.btn-primary:hover {
  background: #b93b21;
  color: var(--white);
  transform: translateY(-2px);
  box-shadow: 0 8px 22px rgba(230,74,46,.4);
}
.btn-secondary {
  background: #1b79c4;
  color: var(--white);
  box-shadow: 0 4px 14px rgba(33,150,243,.25);
}
.btn-secondary:hover {
  background: var(--blue-700);
  color: var(--white);
  transform: translateY(-2px);
}
.btn-outline {
  background: transparent;
  color: var(--blue-700);
  border: 2px solid var(--blue-500);
}
.btn-outline:hover {
  background: var(--blue-500);
  color: var(--white);
}
.btn-lg {
  padding: 18px 36px;
  font-size: 1.1rem;
}
.hero-cta-group {
  display: flex;
  gap: 14px;
  flex-wrap: wrap;
}
section {
  padding: 80px 0;
}
.section-sm {
  padding: 50px 0;
}
.features {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(260px, 1fr));
  gap: 24px;
}
.feature-card {
  background: var(--white);
  border: 1px solid var(--ink-100);
  border-radius: var(--radius-md);
  padding: 32px;
  transition: all .25s;
}
.feature-card:hover {
  transform: translateY(-4px);
  box-shadow: var(--shadow-md);
  border-color: var(--blue-300);
}
.feature-icon {
  width: 56px;
  height: 56px;
  background: var(--blue-100);
  color: var(--blue-700);
  border-radius: var(--radius-md);
  display: inline-flex;
  align-items: center;
  justify-content: center;
  margin-bottom: 20px;
  font-size: 1.6rem;
}
/* Inline SVGs ship without width/height, so size them off the container's
   font-size rather than letting them default to 100%. */
.feature-icon svg {
  width: 1em;
  height: 1em;
  flex-shrink: 0;
}
.feature-card h3 {
  font-size: 1.2rem;
  margin-bottom: 10px;
}
.feature-card p {
  font-size: .95rem;
  margin: 0;
}
.faq-list {
  max-width: 820px;
  margin: 0 auto;
}
.faq-item {
  background: var(--white);
  border: 1px solid var(--ink-100);
  border-radius: var(--radius-md);
  margin-bottom: 14px;
  overflow: hidden;
  transition: box-shadow .2s;
}
.faq-item[open] {
  box-shadow: var(--shadow-md);
  border-color: var(--blue-300);
}
.faq-item summary {
  padding: 22px 28px;
  cursor: pointer;
  font-weight: 700;
  font-size: 1.05rem;
  display: flex;
  justify-content: space-between;
  align-items: center;
  list-style: none;
  color: var(--ink-900);
}
.faq-item summary::-webkit-details-marker {
  display: none;
}
.faq-item summary::after {
  content: '+';
  font-size: 1.8rem;
  color: var(--blue-500);
  font-weight: 300;
  transition: transform .2s;
  line-height: 1;
}
.faq-item[open] summary::after {
  content: '-';
}
.faq-body {
  padding: 0 28px 24px;
  color: var(--ink-700);
}
.faq-body p:last-child {
  margin-bottom: 0;
}
.faq-body ul {
  margin: 12px 0;
  padding-left: 20px;
}
.quote-section {
  background: linear-gradient(135deg, var(--blue-50) 0%, var(--white) 100%);
  padding: 80px 0;
}
.quote-form {
  background: var(--white);
  padding: 40px;
  border-radius: var(--radius-lg);
  box-shadow: var(--shadow-md);
  max-width: 720px;
  margin: 0 auto;
}
.form-row {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 18px;
  margin-bottom: 18px;
}
.form-group {
  display: flex;
  flex-direction: column;
}
.form-group.full {
  grid-column: 1 / -1;
}
.form-group label {
  font-weight: 600;
  font-size: .9rem;
  margin-bottom: 6px;
  color: var(--ink-700);
}
.form-group label .req {
  color: var(--red-500);
}
.form-group input {
  padding: 12px 14px;
  border: 2px solid var(--ink-100);
  border-radius: var(--radius-sm);
  font-size: 1rem;
  font-family: inherit;
  background: var(--white);
  transition: border-color .2s;
}
.form-group select {
  padding: 12px 14px;
  border: 2px solid var(--ink-100);
  border-radius: var(--radius-sm);
  font-size: 1rem;
  font-family: inherit;
  background: var(--white);
  transition: border-color .2s;
}
.form-group textarea {
  padding: 12px 14px;
  border: 2px solid var(--ink-100);
  border-radius: var(--radius-sm);
  font-size: 1rem;
  font-family: inherit;
  background: var(--white);
  transition: border-color .2s;
}
.form-group input:focus {
  outline: none;
  border-color: var(--blue-500);
}
.form-group select:focus {
  outline: none;
  border-color: var(--blue-500);
}
.form-group textarea:focus {
  outline: none;
  border-color: var(--blue-500);
}
.form-group small {
  font-size: .82rem;
  color: var(--ink-500);
  margin-top: 4px;
}
.form-disclaimer {
  font-size: .8rem;
  color: var(--ink-500);
  margin-top: 16px;
  line-height: 1.5;
}
.cta-banner {
  background: linear-gradient(135deg, var(--blue-900), var(--blue-700));
  color: var(--white);
  padding: 70px 0;
  position: relative;
  overflow: hidden;
}
.cta-banner::before {
  content: '';
  position: absolute;
  top: -100px;
  right: -100px;
  width: 400px;
  height: 400px;
  background: radial-gradient(circle, rgba(33,150,243,.2), transparent 70%);
}
.cta-banner-inner {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 40px;
  flex-wrap: wrap;
  position: relative;
}
.cta-banner h2 {
  color: var(--white);
  margin: 0;
  max-width: 700px;
}
.cta-banner h2 .accent {
  color: var(--blue-300);
}
.page-hero {
  background: linear-gradient(135deg, var(--blue-700), var(--blue-900));
  color: var(--white);
  padding: 70px 0 90px;
  position: relative;
  overflow: hidden;
}
.page-hero::after {
  content: '';
  position: absolute;
  bottom: -1px;
  left: 0;
  right: 0;
  height: 60px;
  background: var(--white);
  clip-path: polygon(0 100%, 100% 0, 100% 100%);
}
.page-hero h1 {
  color: var(--white);
  max-width: 820px;
}
.page-hero p {
  color: rgba(255,255,255,.92);
  font-size: 1.2rem;
  max-width: 720px;
}
.breadcrumb {
  display: flex;
  gap: 8px;
  font-size: .88rem;
  color: rgba(255,255,255,.7);
  margin-bottom: 18px;
}
.breadcrumb a {
  color: rgba(255,255,255,.85);
  font-weight: 500;
}
.breadcrumb a:hover {
  color: var(--white);
}
.breadcrumb .sep {
  opacity: .5;
}
.content-grid {
  display: grid;
  grid-template-columns: 1fr 320px;
  gap: 60px;
  align-items: start;
}
.article-content h2 {
  margin-top: 48px;
  margin-bottom: 16px;
  padding-bottom: 8px;
  border-bottom: 3px solid var(--blue-100);
}
.article-content h2:first-child {
  margin-top: 0;
}
.article-content h3 {
  margin-top: 32px;
  margin-bottom: 12px;
  color: var(--blue-700);
}
.article-content p {
  font-size: 1.05rem;
}
.article-content ul {
  margin: 16px 0 24px;
  padding-left: 24px;
}
.article-content ol {
  margin: 16px 0 24px;
  padding-left: 24px;
}
.article-content li {
  margin-bottom: 8px;
  color: var(--ink-700);
  font-size: 1.05rem;
}
.article-content strong {
  color: var(--ink-900);
}
.callout {
  background: var(--blue-50);
  border-left: 4px solid var(--blue-500);
  padding: 20px 24px;
  border-radius: 0 var(--radius-md) var(--radius-md) 0;
  margin: 24px 0;
}
.callout strong {
  color: var(--blue-700);
}
.callout p:last-child {
  margin-bottom: 0;
}
.sidebar {
  position: sticky;
  top: 100px;
}
.sidebar-card {
  background: var(--blue-50);
  border: 1px solid var(--blue-100);
  border-radius: var(--radius-md);
  padding: 28px;
  margin-bottom: 24px;
}
.sidebar-card h2,
.sidebar-card h3 {
  color: var(--blue-700);
  margin-bottom: 14px;
  font-size: 1.2rem;
}
.sidebar-card .phone-big {
  font-family: 'Barlow', sans-serif;
  font-size: 1.6rem;
  font-weight: 800;
  color: var(--red-500);
  display: block;
  margin: 12px 0;
}
.sidebar-card ul {
  list-style: none;
  padding: 0;
}
.sidebar-card ul li {
  padding: 10px 0;
  border-bottom: 1px solid var(--blue-100);
  font-size: .95rem;
}
.sidebar-card ul li:last-child {
  border: 0;
}
.sidebar-card .btn {
  width: 100%;
}
.stat-bar {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: 30px;
  text-align: center;
}
.stat-num {
  font-family: 'Barlow', sans-serif;
  font-size: clamp(2.4rem, 4vw, 3.2rem);
  font-weight: 800;
  color: var(--blue-700);
  line-height: 1;
  margin-bottom: 8px;
}
.coverage-table {
  width: 100%;
  border-collapse: collapse;
  margin: 24px 0;
  background: var(--white);
  border-radius: var(--radius-md);
  overflow: hidden;
  box-shadow: var(--shadow-sm);
}
.coverage-table th {
  background: var(--blue-700);
  color: var(--white);
  padding: 16px;
  text-align: left;
  font-weight: 700;
  font-size: .95rem;
}
.coverage-table td {
  padding: 14px 16px;
  border-bottom: 1px solid var(--ink-100);
  font-size: .98rem;
}
.coverage-table tr:last-child td {
  border-bottom: 0;
}
.coverage-table tr:nth-child(even) {
  background: var(--ink-50);
}
.site-footer {
  background: var(--ink-900);
  color: rgba(255,255,255,.7);
  padding: 70px 0 30px;
}
.footer-grid {
  display: grid;
  grid-template-columns: 1.4fr 1fr 1fr 1fr;
  gap: 40px;
  margin-bottom: 50px;
}
.footer-col h3 {
  color: var(--white);
  font-size: 1rem;
  text-transform: uppercase;
  letter-spacing: .12em;
  margin-bottom: 18px;
  font-weight: 700;
}
.footer-col ul {
  list-style: none;
}
.footer-col li {
  margin-bottom: 10px;
}
.footer-col a {
  color: rgba(255,255,255,.7);
  font-size: .94rem;
}
.footer-col a:hover {
  color: var(--blue-300);
}
.footer-brand p {
  color: rgba(255,255,255,.7);
  font-size: .94rem;
}
.footer-brand .logo {
  margin-bottom: 18px;
  background: rgba(255,255,255,.95);
  padding: 12px 16px;
  border-radius: var(--radius-md);
  display: inline-flex;
}
.footer-brand .logo img {
  height: 48px;
  width: auto;
}
.footer-locations {
  background: rgba(255,255,255,.04);
  border-radius: var(--radius-md);
  padding: 24px;
  margin-bottom: 30px;
}
.footer-locations h3 {
  color: var(--white);
  margin-bottom: 14px;
  font-size: .9rem;
  text-transform: uppercase;
  letter-spacing: .12em;
}
.locations-grid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(220px, 1fr));
  gap: 20px;
}
.location {
  font-size: .88rem;
}
.location strong {
  color: var(--white);
  display: block;
  margin-bottom: 4px;
}
.footer-bottom {
  border-top: 1px solid rgba(255,255,255,.1);
  padding-top: 24px;
  display: flex;
  justify-content: space-between;
  flex-wrap: wrap;
  gap: 16px;
  font-size: .85rem;
}
.footer-bottom a {
  color: rgba(255,255,255,.72);
}
.footer-licensed {
  font-size: .8rem;
  color: rgba(255,255,255,.6);
  margin-top: 6px;
}
.footer-subhead {
  margin-top: 18px;
}

/* --- Progressive appointment badge --------------------------------------
   Progressive's artwork is a 1:1 square carrying a full sentence above the
   numeral, so it cannot be scaled to fit a gap the way a logo can -- below
   roughly 180px that sentence stops being readable and it reads as a stray
   blue square. Every variant below is therefore sized at or above that floor,
   and the layout is what moves. The width/height attributes in
   progressive_badge() reserve the box, so none of this shifts on load.
   Rendered by index.php (banner, hero) and footer.php (footer). */

.pg-badge {
  display: block;
}
.pg-badge img {
  display: block;
  width: 100%;
  height: auto;
  border-radius: var(--radius-md);
}

/* Footer: its own grid column. The square would either force the brand column
   far wider than the link columns beside it, or shrink under the floor. */
.footer-carrier .pg-badge {
  max-width: 150px;
}
.footer-carrier-note {
  font-size: .8rem;
  color: rgba(255,255,255,.6);
  margin-top: 10px;
  max-width: 150px;
}

/* Five columns only where there is room for five. Below 960px the base
   .footer-grid rules take over and this must not out-specify them, so the
   override is fenced into a min-width query rather than written flat. */
@media (min-width: 961px) {
  .footer-grid.has-carrier {
    grid-template-columns: 1.5fr 1fr 1fr 1.1fr auto;
    gap: 34px;
  }
}

.footer-legal ul {
  display: flex;
  flex-wrap: wrap;
  gap: 8px 18px;
  list-style: none;
  margin: 0;
  padding: 0;
}
/* 2.5.8 Target Size: the legal links are the smallest text on the page, so give
   them a taller hit area rather than relying on the line box. */
.footer-legal a {
  display: inline-block;
  padding: 4px 0;
  min-height: 24px;
}
.partners-cta {
  background: var(--white);
  border: 2px dashed var(--blue-300);
  border-radius: var(--radius-lg);
  padding: 40px;
  text-align: center;
  margin: 40px 0;
}
.partners-cta h3 {
  color: var(--blue-700);
}
@media (max-width: 960px) {
  .content-grid {
    grid-template-columns: 1fr;
  }
  .sidebar {
    position: static;
  }
  .stat-bar {
    grid-template-columns: repeat(2, 1fr);
  }
  .footer-grid {
    grid-template-columns: 1fr 1fr;
  }
}

@media (max-width: 720px) {
  section {
    padding: 60px 0;
  }
  .main-nav {
    position: fixed;
    top: 0;
    right: -100%;
    width: 280px;
    height: 100vh;
    background: var(--white);
    box-shadow: var(--shadow-lg);
    padding: 80px 24px 24px;
    transition: right .3s;
    z-index: 99;
  }
  .main-nav.open {
    right: 0;
  }
  .main-nav ul {
    flex-direction: column;
    align-items: stretch;
    gap: 4px;
  }
  .main-nav a {
    padding: 14px 16px;
  }
  .submenu {
    position: static;
    opacity: 1;
    visibility: visible;
    transform: none;
    box-shadow: none;
    border: 0;
    padding-left: 16px;
    background: var(--ink-50);
  }
  .mobile-toggle {
    display: flex;
  }
  .form-row {
    grid-template-columns: 1fr;
  }
  .footer-grid {
    grid-template-columns: 1fr;
    gap: 30px;
  }
  .stat-bar {
    grid-template-columns: 1fr 1fr;
  }
  .cta-banner-inner {
    flex-direction: column;
    text-align: center;
  }
}

@media (max-width: 480px) {
  .footer-grid {
    grid-template-columns: 1fr;
  }
  .footer-bottom {
    flex-direction: column;
    text-align: center;
  }
}

@media print {
  .site-header {
    display: none;
  }
  .site-footer {
    display: none;
  }
  .cta-banner {
    display: none;
  }
}

.submenu-label {
  padding: 6px 14px 4px;
  font-size: .68rem;
  font-weight: 800;
  text-transform: uppercase;
  letter-spacing: .1em;
  color: #9aa7b3;
  pointer-events: none;
  list-style: none;
}
.contact-bar {
  display: flex;
  gap: 8px;
  align-items: center;
  justify-content: center;
  background: #f8fafc;
  border-bottom: 1px solid #e3e8ec;
  padding: 8px 20px;
  flex-wrap: wrap;
}
.cbar-btn {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  padding: 7px 16px;
  border-radius: 6px;
  font-size: .8rem;
  font-weight: 700;
  text-decoration: none;
  transition: all .15s;
  white-space: nowrap;
  border: 1.5px solid transparent;
}
.cbar-btn svg {
  width: 15px;
  height: 15px;
  flex-shrink: 0;
}
.cbar-call {
  background: #fff;
  border-color: #27ae60;
  color: #27ae60;
}
.cbar-call:hover {
  background: #27ae60;
  color: #fff;
}
.cbar-text {
  background: #fff;
  border-color: #2196f3;
  color: #2196f3;
}
.cbar-text:hover {
  background: #2196f3;
  color: #fff;
}
.cbar-chat {
  background: #fff;
  border-color: #e67e22;
  color: #e67e22;
}
.cbar-chat:hover {
  background: #e67e22;
  color: #fff;
}
.cbar-email {
  background: #fff;
  border-color: #8e44ad;
  color: #8e44ad;
}
.cbar-email:hover {
  background: #8e44ad;
  color: #fff;
}
@media(max-width:600px) {
  .contact-bar {
    gap: 6px;
    padding: 7px 10px;
  }
  .cbar-btn {
    font-size: .75rem;
    padding: 6px 11px;
  }
}

.utility-bar {
  background: #0b3a66;
  color: #fff;
  font-size: .84rem;
  padding: 8px 0;
  border-bottom: 1px solid rgba(255,255,255,.08);
}
.ub-inner {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 18px;
  flex-wrap: wrap;
}
.ub-reviews {
  display: inline-flex;
  align-items: center;
  gap: 7px;
  color: #fff;
  text-decoration: none;
  white-space: nowrap;
}
.ub-reviews:hover .ub-count {
  text-decoration: underline;
}
.ub-stars {
  color: #f5a623;
  font-size: .82rem;
  letter-spacing: 1.5px;
  line-height: 1;
}
.ub-rating {
  font-weight: 800;
}
.ub-count {
  opacity: .88;
  font-weight: 500;
}
.ub-phones {
  display: flex;
  gap: 18px;
  flex-wrap: wrap;
}
.ub-phones a {
  color: #fff;
  font-weight: 700;
  text-decoration: none;
  display: inline-flex;
  align-items: center;
  gap: 6px;
  white-space: nowrap;
  font-size: .92rem;
}
.ub-phones a:hover {
  color: #6cb6f0;
}
.ub-st {
  font-size: .68rem;
  font-weight: 700;
  letter-spacing: .06em;
  color: #72c1fe;
  background: rgba(108,182,240,.14);
  border: 1px solid rgba(108,182,240,.3);
  border-radius: 4px;
  padding: 1px 5px;
  line-height: 1.4;
}
.ub-actions {
  display: flex;
  gap: 8px;
}
.ub-act {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  background: #fff;
  color: #0b3a66;
  text-decoration: none;
  font-weight: 700;
  font-size: .78rem;
  letter-spacing: .02em;
  padding: 6px 14px;
  border-radius: 6px;
  box-shadow: 0 2px 6px rgba(0,0,0,.25);
  transition: all .18s;
  white-space: nowrap;
  border: 0;
}
.ub-act:hover {
  background: #e64a2e;
  color: #fff;
  transform: translateY(-1px);
}
.ub-act svg {
  opacity: .9;
}
.btn-hero-outline {
  background: transparent;
  color: #fff !important;
  border: 2px solid #fff;
}
.btn-hero-outline:hover {
  background: rgba(255,255,255,.15);
  color: #fff !important;
  border-color: #fff;
}
.main-nav a {
  white-space: nowrap;
}
@media(max-width:1180px) {
  .main-nav a {
    padding: 9px 9px;
    font-size: .86rem;
  }
}

@media(max-width:1000px) {
  .main-nav {
    position: fixed;
    top: 0;
    right: -100%;
    width: 280px;
    height: 100vh;
    background: #fff;
    box-shadow: 0 18px 50px rgba(14,26,38,.16);
    padding: 80px 24px 24px;
    transition: right .3s;
    z-index: 99;
    overflow-y: auto;
  }
  .main-nav.open {
    right: 0;
  }
  .main-nav ul {
    flex-direction: column;
    align-items: stretch;
    gap: 4px;
  }
  .main-nav a {
    padding: 14px 16px;
    white-space: normal;
  }
  .submenu {
    position: static;
    opacity: 1;
    visibility: visible;
    transform: none;
    box-shadow: none;
    border: 0;
    padding-left: 16px;
    background: #f5f7f9;
  }
  .mobile-toggle {
    display: flex !important;
  }
}

@media(max-width:900px) {
  .ub-count {
    display: none;
  }
}

@media(max-width:760px) {
  .ub-actions {
    display: none;
  }
  .ub-inner {
    justify-content: center;
    gap: 10px;
  }
  .ub-phones {
    gap: 12px;
  }
  .ub-phones a {
    font-size: .84rem;
  }
}

@media(max-width:520px) {
  .ub-reviews {
    display: none;
  }
}

.footer-brand .logo-wrap {
  margin-bottom: 18px;
  background: rgba(255,255,255,.95);
  padding: 12px 16px;
  border-radius: var(--radius-md);
  display: inline-flex;
}
.footer-brand .logo-wrap img {
  height: 48px;
  width: auto;
}
button.ub-act {
  font: inherit;
  cursor: pointer;
}
.has-submenu.open .submenu {
  opacity: 1;
  visibility: visible;
  transform: translateY(0);
}
.hp-field {
  position: absolute;
  left: -9999px;
  width: 1px;
  height: 1px;
  overflow: hidden;
}
.form-group .field-error {
  display: block;
  margin-top: 5px;
  font-size: .82rem;
  font-weight: 600;
  color: #c0392b;
}
.form-group input[aria-invalid="true"] {
  border-color: #c0392b;
  background: #fdf3f2;
}
.form-group select[aria-invalid="true"] {
  border-color: #c0392b;
  background: #fdf3f2;
}
.form-group textarea[aria-invalid="true"] {
  border-color: #c0392b;
  background: #fdf3f2;
}
.form-alert {
  padding: 16px 20px;
  border-radius: 8px;
  margin-bottom: 24px;
  font-size: .94rem;
}
.form-alert-error {
  background: #fdf3f2;
  border: 1px solid #c0392b;
  color: #7d241a;
}
.form-alert-success {
  background: #e6f4ea;
  border: 1px solid #34a853;
  color: #1e4620;
}
.skip-link {
  position: absolute;
  left: -9999px;
  top: 0;
  z-index: 200;
  padding: 12px 20px;
  background: #0b3a66;
  color: #fff;
  font-weight: 700;
  text-decoration: none;
  border-radius: 0 0 6px 0;
}
.skip-link:focus {
  left: 0;
  color: #fff;
  outline: 3px solid #f5a623;
  outline-offset: 2px;
}
.visually-hidden {
  position: absolute;
  width: 1px;
  height: 1px;
  margin: -1px;
  padding: 0;
  overflow: hidden;
  clip: rect(0 0 0 0);
  white-space: nowrap;
  border: 0;
}
a:focus-visible {
  outline: 3px solid #f5a623;
  outline-offset: 2px;
}
button:focus-visible {
  outline: 3px solid #f5a623;
  outline-offset: 2px;
}
input:focus-visible {
  outline: 3px solid #f5a623;
  outline-offset: 2px;
}
select:focus-visible {
  outline: 3px solid #f5a623;
  outline-offset: 2px;
}
textarea:focus-visible {
  outline: 3px solid #f5a623;
  outline-offset: 2px;
}
[tabindex]:focus-visible {
  outline: 3px solid #f5a623;
  outline-offset: 2px;
}
@media (prefers-reduced-motion: reduce) {
  html {
    scroll-behavior: auto;
  }
  * {
    animation-duration: .01ms !important;
    animation-iteration-count: 1 !important;
    transition-duration: .01ms !important;
  }
  *::before {
    animation-duration: .01ms !important;
    animation-iteration-count: 1 !important;
    transition-duration: .01ms !important;
  }
  *::after {
    animation-duration: .01ms !important;
    animation-iteration-count: 1 !important;
    transition-duration: .01ms !important;
  }
}


/* ---------------------------------------------------------------------------
   PARTNERS PAGE
   These classes were used by partners.html but never defined in the old
   styles.css, so the partner cards and referral steps rendered unstyled.
   Written to match the design tokens used by the rest of the site.
   --------------------------------------------------------------------------- */

.partner-grid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(320px, 1fr));
  gap: 24px;
}
.pcard {
  background: var(--white);
  border: 1px solid var(--ink-100);
  border-radius: var(--radius-lg);
  box-shadow: var(--shadow-sm);
  padding: 28px;
  transition: box-shadow .25s, transform .25s;
}
.pcard:hover {
  box-shadow: var(--shadow-md);
  transform: translateY(-2px);
}
.pcard-head {
  display: flex;
  align-items: flex-start;
  gap: 16px;
  margin-bottom: 18px;
}
.pcard-icon {
  flex: 0 0 auto;
  width: 52px;
  height: 52px;
  border-radius: var(--radius-md);
  background: var(--blue-700);
  display: inline-flex;
  align-items: center;
  justify-content: center;
}
.pcard-icon svg {
  width: 26px;
  height: 26px;
}
.pcard-title h3 {
  font-size: 1.15rem;
  margin-bottom: 6px;
}
.pcard-title p {
  font-size: .92rem;
  color: var(--ink-500);
  margin: 0;
}
.pcard-bullets {
  list-style: none;
  margin: 0;
  padding: 0;
  border-top: 1px solid var(--ink-100);
  padding-top: 16px;
}
.pcard-bullets li {
  position: relative;
  padding-left: 26px;
  margin-bottom: 9px;
  font-size: .92rem;
  color: var(--ink-700);
}
.pcard-bullets li::before {
  content: "";
  position: absolute;
  left: 6px;
  top: .45em;
  width: 7px;
  height: 7px;
  border-radius: 50%;
  background: var(--blue-500);
}
.pcard-bullets li:last-child {
  margin-bottom: 0;
}

.how-steps {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(230px, 1fr));
  gap: 20px;
}
.how-step {
  background: var(--blue-50);
  border: 1px solid var(--blue-100);
  border-radius: var(--radius-md);
  padding: 24px 22px;
}
.how-step-num {
  width: 34px;
  height: 34px;
  border-radius: 50%;
  background: var(--blue-700);
  color: var(--white);
  font-family: "Barlow", "Inter", sans-serif;
  font-weight: 800;
  font-size: 1.05rem;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  margin-bottom: 14px;
}
.how-step h3 {
  font-size: 1.02rem;
  margin-bottom: 7px;
}
.how-step p {
  font-size: .89rem;
  color: var(--ink-500);
  margin: 0;
}

@media (max-width: 640px) {
  .pcard { padding: 22px; }
  .pcard-head { gap: 13px; }
  .pcard-icon { width: 44px; height: 44px; }
  .pcard-icon svg { width: 22px; height: 22px; }
}
/* ===== 3. HOME PAGE ===== */

body.home-page .hero {
  position: relative;
  background: linear-gradient(135deg,#155fa0 0%,#0b3a66 100%);
  color: #fff;
  padding: 80px 0 100px;
  overflow: hidden;
}
body.home-page .hero::before {
  content: '';
  position: absolute;
  inset: 0;
  background-image: radial-gradient(circle at 20% 30%,rgba(255,255,255,.08),transparent 40%),radial-gradient(circle at 80% 70%,rgba(33,150,243,.15),transparent 50%);
  pointer-events: none;
}
body.home-page .hero::after {
  content: '';
  position: absolute;
  bottom: -1px;
  left: 0;
  right: 0;
  height: 80px;
  background: #fff;
  clip-path: polygon(0 100%,100% 0,100% 100%);
}
body.home-page .hero-inner {
  position: relative;
  z-index: 2;
  display: grid;
  grid-template-columns: 1.2fr 1fr;
  gap: 60px;
  align-items: center;
}
body.home-page .hero-content h1 {
  color: #fff;
  font-size: clamp(2.4rem,5vw,4rem);
  line-height: 1.05;
  margin-bottom: 20px;
}
body.home-page .hero-content h1 .accent {
  color: #6cb6f0;
  display: block;
}
body.home-page .hero-content .lead {
  font-size: 1.15rem;
  color: rgba(255,255,255,.92);
  margin-bottom: 30px;
  max-width: 520px;
}
body.home-page .hero-trust {
  display: flex;
  gap: 24px;
  flex-wrap: wrap;
  margin-top: 30px;
  padding-top: 24px;
  border-top: 1px solid rgba(255,255,255,.15);
}
body.home-page .hero-trust .item {
  display: flex;
  align-items: center;
  gap: 8px;
  font-size: .9rem;
  color: rgba(255,255,255,.9);
}
body.home-page .hero-trust .check {
  width: 22px;
  height: 22px;
  background: var(--blue-300);
  color: var(--blue-900);
  border-radius: 50%;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  font-weight: 800;
  font-size: .8rem;
}
body.home-page .hero-card {
  background: #fff;
  color: #0e1a26;
  border-radius: 18px;
  padding: 32px;
  box-shadow: 0 18px 50px rgba(14,26,38,.2);
}
body.home-page .hero-card h2 {
  font-size: 1.3rem;
  margin-bottom: 5px;
}
body.home-page .hero-card .sub {
  color: #5a6c7d;
  font-size: .9rem;
  margin-bottom: 18px;
}
body.home-page .hero-card .bundle {
  background: var(--blue-50);
  border: 1px solid var(--blue-100);
  border-radius: var(--radius-md);
  padding: 16px;
  margin-bottom: 20px;
}
body.home-page .hero-card .bundle strong {
  color: var(--blue-700);
  display: block;
  margin-bottom: 4px;
}
body.home-page .hero-card .bundle p {
  font-size: .9rem;
  margin: 0;
  color: var(--ink-700);
}
body.home-page .state-select-group label {
  font-weight: 600;
  font-size: .88rem;
  display: block;
  margin-bottom: 6px;
  color: #2a3d4f;
}
body.home-page .state-select-group select {
  width: 100%;
  padding: 12px 14px;
  border: 2px solid #e3e8ec;
  border-radius: 6px;
  font-size: .97rem;
  font-family: inherit;
  background: #fff;
  margin-bottom: 14px;
  transition: border-color .2s;
}
body.home-page .state-select-group select:focus {
  outline: none;
  border-color: #2196f3;
}
body.home-page .hero-card .btn {
  width: 100%;
  display: block;
  text-align: center;
}
body.home-page .hero-card .secondary-link {
  text-align: center;
  margin-top: 12px;
  font-size: .88rem;
  color: #5a6c7d;
}
body.home-page .hero-card .secondary-link a {
  font-weight: 600;
  color: #155fa0;
}
body.home-page .section-head {
  text-align: center;
  max-width: 760px;
  margin: 0 auto 55px;
}
body.home-page .section-head .eyebrow {
  display: inline-block;
  font-size: .85rem;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: .15em;
  color: #ca4128;
  margin-bottom: 12px;
}
body.home-page .section-head h2 {
  margin-bottom: 14px;
}
body.home-page .section-head p {
  font-size: 1.1rem;
  color: #5a6c7d;
}
body.home-page .bg-light {
  background: #f5f7f9;
}
body.home-page .bg-blue-soft {
  background: #f4f9fd;
}
body.home-page .steps {
  display: grid;
  grid-template-columns: repeat(3,1fr);
  gap: 40px;
}
body.home-page .step {
  text-align: center;
}
body.home-page .step-num {
  font-family: 'Barlow',sans-serif;
  font-size: clamp(4.5rem,9vw,6.5rem);
  font-weight: 800;
  line-height: 1;
  color: #2196f3;
  letter-spacing: -.03em;
  margin: 0 auto 18px;
  opacity: .95;
}
body.home-page .step h3 {
  font-size: 1.5rem;
  color: #155fa0;
  text-transform: uppercase;
  letter-spacing: .02em;
  margin-bottom: 13px;
}
body.home-page .step p {
  color: #2a3d4f;
  margin-bottom: 18px;
  font-size: .97rem;
}
body.home-page .step .btn {
  font-size: .92rem;
  padding: 11px 20px;
  display: inline-block;
}
body.home-page .state-grid {
  display: grid;
  grid-template-columns: repeat(3,1fr);
  gap: 22px;
}
body.home-page .state-card {
  background: #fff;
  border-radius: 16px;
  overflow: hidden;
  box-shadow: 0 1px 3px rgba(14,26,38,.08);
  border: 1px solid #e3e8ec;
  transition: all .25s;
}
body.home-page .state-card:hover {
  transform: translateY(-5px);
  box-shadow: 0 18px 50px rgba(14,26,38,.16);
}
body.home-page .state-card-head {
  background: linear-gradient(135deg,#155fa0,#0b3a66);
  color: #fff;
  padding: 28px;
  position: relative;
  overflow: hidden;
}
body.home-page .state-card-head::before {
  content: '';
  position: absolute;
  top: -40px;
  right: -40px;
  width: 140px;
  height: 140px;
  background: rgba(255,255,255,.06);
  border-radius: 50%;
}
body.home-page .state-card-head .abbr {
  font-family: 'Barlow',sans-serif;
  font-size: 4rem;
  font-weight: 800;
  line-height: 1;
  letter-spacing: -.03em;
  margin-bottom: 3px;
  position: relative;
}
body.home-page .state-card-head h3 {
  color: #fff;
  font-size: 1.4rem;
  margin: 0;
  position: relative;
}
body.home-page .state-card-body {
  padding: 24px 28px 28px;
}
body.home-page .state-card-body ul {
  list-style: none;
  margin-bottom: 20px;
}
body.home-page .state-card-body li {
  padding: 9px 0;
  border-bottom: 1px solid #e3e8ec;
  display: flex;
  justify-content: space-between;
  font-size: .9rem;
}
body.home-page .state-card-body li:last-child {
  border: 0;
}
body.home-page .state-card-body li span:first-child {
  color: #5a6c7d;
}
body.home-page .state-card-body li span:last-child {
  font-weight: 600;
  color: #0e1a26;
}
body.home-page .state-card-body .phone {
  font-family: 'Barlow',sans-serif;
  font-size: 1.2rem;
  font-weight: 800;
  color: #e64a2e;
  display: block;
  margin-bottom: 14px;
}
@media (max-width: 960px) {
  body.home-page .hero-inner {
    grid-template-columns: 1fr;
    gap: 40px;
  }
  body.home-page .steps {
    grid-template-columns: 1fr;
    gap: 30px;
  }
  body.home-page .state-grid {
    grid-template-columns: 1fr;
  }
}

@media (max-width: 720px) {
  body.home-page .hero {
    padding: 60px 0 80px;
  }
}

body.home-page .g-review-badge {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 10px;
  background: #fff;
  border: 1px solid #e6ecf1;
  border-radius: 12px;
  padding: 12px 16px;
  margin-bottom: 16px;
  box-shadow: 0 4px 14px rgba(14,26,38,.08);
  text-decoration: none;
}
body.home-page .g-review-badge .grb-stars {
  color: #f5a623;
  font-size: 1.25rem;
  letter-spacing: 2px;
  line-height: 1;
}
body.home-page .g-review-badge .grb-rating {
  font-weight: 900;
  font-size: 1.3rem;
  color: #0e1a26;
  font-family: 'Barlow','Inter',sans-serif;
}
body.home-page .g-review-badge .grb-text {
  font-size: .85rem;
  color: #2a3d4f;
  font-weight: 600;
  line-height: 1.25;
}
body.home-page .g-review-badge .grb-text u {
  color: #155fa0;
}
body.home-page .g-review-badge:hover {
  border-color: #2196f3;
}
body.home-page .review-bar .stars {
  color: #f5a623;
  font-size: 1.1rem;
  letter-spacing: 1px;
}
body.home-page .has-submenu>a::after {
  content: '\25BE';
  font-size: .7rem;
  margin-left: 3px;
  opacity: .6;
}
body.home-page .check {
  width: 20px;
  height: 20px;
  background: #6cb6f0;
  color: #0b3a66;
  border-radius: 50%;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  font-weight: 800;
  font-size: .75rem;
}
body.home-page .iid-offer {
  background: linear-gradient(135deg,#fff4ef 0%,#ffe9e0 100%);
  border: 1px solid #ffd3c2;
  border-left: 4px solid #e64a2e;
  border-radius: 10px;
  padding: 14px 16px;
  margin-bottom: 18px;
}
body.home-page .iid-offer-badge {
  display: inline-block;
  background: #e64a2e;
  color: #fff;
  font-size: .66rem;
  font-weight: 800;
  text-transform: uppercase;
  letter-spacing: .08em;
  padding: 3px 9px;
  border-radius: 20px;
  margin-bottom: 7px;
}
body.home-page .iid-offer strong {
  display: block;
  color: #c23a1f;
  font-size: 1.02rem;
  font-weight: 800;
  margin-bottom: 4px;
  line-height: 1.2;
}
body.home-page .iid-offer p {
  font-size: .84rem;
  margin: 0;
  color: #5a3d34;
  line-height: 1.45;
}
body.home-page .eyebrow {
  display: inline-block;
  font-size: .82rem;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: .15em;
  color: #e64a2e;
  margin-bottom: 10px;
}
body.home-page .iid-strip {
  background: #e64a2e;
  color: #fff;
  padding: 18px 0;
}
body.home-page .iid-strip-inner {
  display: flex;
  align-items: center;
  gap: 18px;
  flex-wrap: wrap;
  justify-content: center;
}
body.home-page .iid-strip-icon {
  font-size: 1.6rem;
  flex-shrink: 0;
}
body.home-page .iid-strip-text {
  flex: 1;
  min-width: 260px;
  font-size: .97rem;
  color: rgba(255,255,255,.95);
}
body.home-page .iid-strip-text strong {
  display: block;
  font-size: 1.05rem;
  color: #fff;
  margin-bottom: 2px;
}
body.home-page .iid-strip-text em {
  font-style: normal;
  font-weight: 700;
  text-decoration: underline;
  text-decoration-color: rgba(255,255,255,.62);
}
body.home-page .iid-strip-btn {
  background: #fff;
  color: #e64a2e;
  font-weight: 700;
  font-size: .9rem;
  padding: 10px 22px;
  border-radius: 6px;
  white-space: nowrap;
  flex-shrink: 0;
  transition: all .2s;
}
body.home-page .iid-strip-btn:hover {
  background: rgba(255,255,255,.9);
  color: #d94426;
}
@media(max-width:600px) {
  body.home-page .iid-strip-inner {
    flex-direction: column;
    text-align: center;
    gap: 12px;
  }
  body.home-page .iid-strip-text {
    min-width: unset;
  }
}

body.home-page .carriers-bar {
  background: linear-gradient(180deg,#fff 0%,#f4f9fd 100%);
  border-bottom: 1px solid #e3e8ec;
  padding: 56px 0;
  text-align: center;
}
body.home-page .carriers-label {
  font-size: .9rem;
  font-weight: 800;
  text-transform: uppercase;
  letter-spacing: .16em;
  color: #155fa0;
  margin-bottom: 8px;
}
body.home-page .carriers-sub {
  font-size: 1.05rem;
  color: #5a6c7d;
  margin-bottom: 30px;
  max-width: 560px;
  margin-left: auto;
  margin-right: auto;
}
body.home-page .carrier-logos {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 24px;
  flex-wrap: wrap;
}
body.home-page .carrier {
  font-family: 'Barlow','Inter',sans-serif;
  font-weight: 800;
  font-size: 1.5rem;
  letter-spacing: .01em;
  padding: 14px 26px;
  background: #fff;
  border: 1px solid #e3e8ec;
  border-radius: 10px;
  box-shadow: 0 2px 8px rgba(14,26,38,.05);
  transition: transform .2s,box-shadow .2s;
}
body.home-page .carrier:hover {
  transform: translateY(-3px);
  box-shadow: 0 8px 22px rgba(14,26,38,.12);
}
body.home-page .carrier.progressive {
  color: #0066cc;
}
body.home-page .carrier.firstchicago {
  color: #cc0000;
}
body.home-page .carrier.dairyland {
  color: #9d6a16;
}
body.home-page .carrier.thegeneral {
  color: #222;
}
body.home-page .carrier.gainsco {
  color: #005baa;
}
body.home-page .products-bar {
  padding: 64px 0;
  text-align: center;
  scroll-margin-top: 90px;
}
body.home-page .products-eyebrow {
  font-size: .9rem;
  font-weight: 800;
  text-transform: uppercase;
  letter-spacing: .16em;
  color: #155fa0;
  margin-bottom: 8px;
}
body.home-page .products-heading {
  font-family: 'Barlow','Inter',sans-serif;
  font-weight: 900;
  font-size: 2rem;
  color: #0e1a26;
  margin-bottom: 10px;
  line-height: 1.1;
}
body.home-page .products-label {
  font-size: 1.08rem;
  color: #5a6c7d;
  margin-bottom: 36px;
  font-weight: 500;
}
body.home-page .product-icons {
  display: grid;
  grid-template-columns: repeat(6,1fr);
  gap: 14px;
  max-width: 900px;
  margin: 0 auto;
}
body.home-page .product-item {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 12px;
  padding: 26px 12px;
  background: #fff;
  border: 1px solid #e3e8ec;
  border-radius: 14px;
  text-decoration: none;
  color: #2a3d4f;
  font-size: .9rem;
  font-weight: 700;
  transition: all .2s;
  box-shadow: 0 2px 8px rgba(14,26,38,.05);
}
body.home-page .product-item {
  cursor: default;
}
body.home-page .product-emoji {
  font-size: 2.6rem;
  line-height: 1;
  color: var(--blue-700);
}
body.home-page .product-emoji svg {
  width: 1em;
  height: 1em;
  display: block;
}
@media(max-width:600px) {
  body.home-page .carrier-logos {
    gap: 12px;
  }
  body.home-page .carrier {
    font-size: 1.05rem;
    padding: 10px 16px;
  }
  body.home-page .products-heading {
    font-size: 1.5rem;
  }
  body.home-page .product-icons {
    grid-template-columns: repeat(3,1fr);
    gap: 10px;
    max-width: 420px;
  }
  body.home-page .product-emoji {
    font-size: 2.1rem;
  }
}

body.home-page .reviews-section {
  background: #0b3a66;
  padding: 40px 0;
  color: #fff;
}
body.home-page .reviews-section .eyebrow {
  color: #6cb6f0;
}
body.home-page .reviews-section .section-head h2 {
  color: #fff;
}
body.home-page .reviews-section .section-head p {
  color: rgba(255,255,255,.75);
}
body.home-page .reviews-section .section-head {
  margin-bottom: 26px;
}
body.home-page .reviews-aggregate {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 26px;
  margin-bottom: 26px;
  flex-wrap: wrap;
}
body.home-page .score-num {
  font-family: 'Barlow',sans-serif;
  font-size: 5rem;
  font-weight: 800;
  color: #fff;
  line-height: 1;
  text-align: center;
}
body.home-page .stars-lg {
  font-size: 1.8rem;
  color: #f5c518;
  letter-spacing: 2px;
  margin: 5px 0;
  text-align: center;
}
body.home-page .score-label {
  color: rgba(255,255,255,.6);
  font-size: .88rem;
  text-align: center;
}
body.home-page .agg-divider {
  width: 1px;
  height: 80px;
  background: rgba(255,255,255,.2);
}
body.home-page .meta-num {
  font-family: 'Barlow',sans-serif;
  font-size: 3.2rem;
  font-weight: 800;
  color: #6cb6f0;
  line-height: 1;
  text-align: center;
}
body.home-page .meta-label {
  color: rgba(255,255,255,.65);
  font-size: .9rem;
  text-align: center;
  margin-top: 6px;
}
body.home-page .review-cards {
  display: grid;
  grid-template-columns: repeat(3,1fr);
  gap: 16px;
  margin-bottom: 22px;
}
body.home-page .review-card {
  background: rgba(255,255,255,.07);
  border: 1px solid rgba(255,255,255,.13);
  border-radius: 10px;
  padding: 18px;
  font-size: .9rem;
}
body.home-page .r-stars {
  color: #f5c518;
  font-size: .95rem;
  margin-bottom: 10px;
}
body.home-page .r-text {
  font-size: .92rem;
  color: rgba(255,255,255,.88);
  line-height: 1.65;
  margin-bottom: 14px;
  font-style: italic;
}
body.home-page .r-author {
  font-weight: 700;
  font-size: .86rem;
  color: #6ebaf5;
}
body.home-page .r-state {
  font-size: .8rem;
  color: #9cb9d4;
}
body.home-page .reviews-cta {
  text-align: center;
}
body.home-page .btn-ghost-white {
  display: inline-block;
  padding: 13px 30px;
  border: 2px solid rgba(255,255,255,.6);
  border-radius: 6px;
  color: #fff;
  font-weight: 700;
  font-size: .95rem;
  transition: all .2s;
}
body.home-page .btn-ghost-white:hover {
  border-color: #fff;
  background: rgba(255,255,255,.1);
  color: #fff;
}
body.home-page .iid-section {
  background: linear-gradient(135deg,#0b3a66 0%,#155fa0 100%);
  padding: 80px 0;
  color: #fff;
}
body.home-page .iid-inner {
  display: grid;
  grid-template-columns: 1.2fr 1fr;
  gap: 60px;
  align-items: center;
}
body.home-page .iid-content .eyebrow {
  color: #6cb6f0;
}
body.home-page .iid-content h2 {
  color: #fff;
  margin-bottom: 16px;
}
body.home-page .iid-lead {
  color: rgba(255,255,255,.88);
  font-size: 1.05rem;
  margin-bottom: 24px;
}
body.home-page .iid-lead strong {
  color: #fff;
}
body.home-page .iid-list {
  list-style: none;
  margin-bottom: 32px;
}
body.home-page .iid-list li {
  display: flex;
  align-items: flex-start;
  gap: 10px;
  color: rgba(255,255,255,.9);
  font-size: .97rem;
  padding: 8px 0;
  border-bottom: 1px solid rgba(255,255,255,.1);
}
body.home-page .iid-list li:last-child {
  border: 0;
}
body.home-page .iid-check {
  width: 22px;
  height: 22px;
  background: #6cb6f0;
  color: #0b3a66;
  border-radius: 50%;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  font-weight: 800;
  font-size: .75rem;
  flex-shrink: 0;
  margin-top: 2px;
}
body.home-page .iid-cards-wrap {
  display: flex;
  flex-direction: column;
  gap: 0;
}
body.home-page .iid-partners-label {
  font-size: .72rem;
  font-weight: 800;
  text-transform: uppercase;
  letter-spacing: .14em;
  color: #6cb6f0;
  margin-bottom: 12px;
  text-align: center;
}
body.home-page .iid-cards {
  display: flex;
  flex-direction: column;
  gap: 14px;
}
body.home-page .iid-state-card {
  background: rgba(255,255,255,.1);
  border: 1px solid rgba(255,255,255,.2);
  border-radius: 12px;
  padding: 20px 24px;
  text-decoration: none;
  color: #fff;
  transition: all .2s;
  display: block;
}
body.home-page .iid-state-card:hover {
  background: rgba(255,255,255,.18);
  border-color: rgba(255,255,255,.6);
  color: #fff;
  transform: translateX(4px);
}
body.home-page .iid-abbr {
  font-family: 'Barlow',sans-serif;
  font-size: 2.2rem;
  font-weight: 800;
  line-height: 1;
  color: #6cb6f0;
  margin-bottom: 2px;
}
body.home-page .iid-state-name {
  font-weight: 700;
  font-size: 1rem;
  margin-bottom: 3px;
}
body.home-page .iid-locations {
  font-size: .76rem;
  color: rgba(255,255,255,.6);
  margin-bottom: 6px;
  line-height: 1.55;
}
body.home-page .iid-cta {
  font-size: .82rem;
  font-weight: 700;
  color: #6cb6f0;
}
@media(max-width:960px) {
  body.home-page .iid-inner {
    grid-template-columns: 1fr;
    gap: 36px;
  }
  body.home-page .iid-cards {
    flex-direction: row;
    flex-wrap: wrap;
  }
  body.home-page .iid-state-card {
    flex: 1;
    min-width: 180px;
  }
  body.home-page .hero-inner {
    grid-template-columns: 1fr;
    gap: 40px;
  }
  body.home-page .steps {
    grid-template-columns: 1fr;
    gap: 30px;
  }
  body.home-page .state-grid {
    grid-template-columns: 1fr;
  }
  body.home-page .stat-bar {
    grid-template-columns: repeat(2,1fr);
  }
  body.home-page .footer-grid {
    grid-template-columns: 1fr 1fr;
  }
  body.home-page .review-cards {
    grid-template-columns: 1fr;
  }
  body.home-page .agg-divider {
    display: none;
  }
}

@media(max-width:720px) {
    body.home-page .hero {
    padding: 60px 0 80px;
  }
  body.home-page .main-nav {
    position: fixed;
    top: 0;
    right: -100%;
    width: 280px;
    height: 100vh;
    background: #fff;
    box-shadow: 0 18px 50px rgba(14,26,38,.16);
    padding: 80px 24px 24px;
    transition: right .3s;
    z-index: 99;
  }
  body.home-page .main-nav.open {
    right: 0;
  }
  body.home-page .main-nav ul {
    flex-direction: column;
    align-items: stretch;
    gap: 4px;
  }
  body.home-page .main-nav a {
    padding: 14px 16px;
  }
  body.home-page .submenu {
    position: static;
    opacity: 1;
    visibility: visible;
    transform: none;
    box-shadow: none;
    border: 0;
    padding-left: 16px;
    background: #f5f7f9;
  }
  body.home-page .mobile-toggle {
    display: flex;
  }
  body.home-page .footer-grid {
    grid-template-columns: 1fr;
    gap: 28px;
  }
  body.home-page .stat-bar {
    grid-template-columns: 1fr 1fr;
  }
  body.home-page .cta-banner-inner {
    flex-direction: column;
    text-align: center;
  }
}

@media(max-width:480px) {
  body.home-page .footer-bottom {
    flex-direction: column;
    text-align: center;
  }
}

/* --- Progressive anniversary banner --------------------------------------
   Sits between the carrier bar and "How it works". The square badge sets the
   band height rather than the padding doing it, so this is a full section at
   roughly 270px tall, not the thin strip the name suggests. Shares the
   .cta-banner gradient deliberately: it is the same kind of interruption and
   should not read as a third distinct blue. */

body.home-page .anniv-banner {
  background: linear-gradient(120deg, var(--blue-900) 0%, #124f8c 55%, var(--blue-700) 100%);
  color: var(--white);
  padding: 44px 0;
  position: relative;
  overflow: hidden;
}
body.home-page .anniv-banner::before {
  content: '';
  position: absolute;
  inset: 0;
  background: radial-gradient(circle at 14% 50%, rgba(108,182,240,.22), transparent 46%);
}
body.home-page .anniv-banner-inner {
  display: flex;
  align-items: center;
  gap: 36px;
  position: relative;
}
body.home-page .anniv-banner .pg-badge {
  flex: none;
  width: 196px;
  box-shadow: var(--shadow-lg);
  border-radius: var(--radius-md);
}
body.home-page .anniv-copy {
  flex: 1;
  /* A flex item's automatic minimum size is its content, so without this the
     58ch measure below stops the column shrinking and the band scrolls
     sideways on a phone instead of wrapping. */
  min-width: 0;
}
body.home-page .anniv-copy .eyebrow {
  color: var(--blue-300);
}
body.home-page .anniv-copy h2 {
  color: var(--white);
  margin: 6px 0 10px;
  font-size: 1.7rem;
}
body.home-page .anniv-copy p {
  color: #cfe3f5;
  margin-bottom: 20px;
  /* 58ch is the reading measure, but never wider than the column it sits in. */
  max-width: min(58ch, 100%);
}

/* Hero card: the badge is the widest thing in the card, so it is capped well
   under the card width -- at full width it stands taller than everything else
   in the card combined and pushes the quote button off a laptop screen. */
body.home-page .hero-card .pg-badge {
  width: 100%;
  max-width: 240px;
  margin: 0 auto;
  border: 1px solid var(--ink-100);
  border-radius: var(--radius-md);
}

@media (max-width: 760px) {
  body.home-page .anniv-banner-inner {
    flex-direction: column;
    text-align: center;
    gap: 24px;
  }
  body.home-page .anniv-copy p {
    margin-left: auto;
    margin-right: auto;
  }
}

/* ===== 4. QUOTE PAGE ===== */

body.quote-page *::before {
  box-sizing: border-box;
  margin: 0;
  padding: 0;
}
body.quote-page *::after {
  box-sizing: border-box;
  margin: 0;
  padding: 0;
}
body.quote-page {
  font-family: 'Inter',sans-serif;
  color: var(--ink-700);
  background: var(--ink-50);
  line-height: 1.6;
  overflow-x: hidden;
  max-width: 100%;
}
body.quote-page .top-bar .container {
  display: flex;
  justify-content: space-between;
  align-items: center;
}
body.quote-page .rb-stars {
  color: #f5a623;
  font-size: 1rem;
  letter-spacing: 1px;
}
body.quote-page .site-header {
  background: #fff;
  border-bottom: 1px solid var(--ink-100);
  padding: 14px 0;
  position: sticky;
  top: 0;
  z-index: 100;
  box-shadow: 0 1px 3px rgba(14,26,38,.08);
}
body.quote-page .header-inner {
  display: flex;
  align-items: center;
  justify-content: space-between;
}
body.quote-page .logo {
  font-family: 'Barlow',sans-serif;
  font-weight: 900;
  font-size: 1.3rem;
  color: var(--blue-700);
}
body.quote-page .container {
  max-width: 1100px;
  margin: 0 auto;
  padding: 0 24px;
}
body.quote-page .quote-wrap {
  max-width: 760px;
  margin: 0 auto;
  padding: 40px 24px 80px;
}
body.quote-page .quote-header {
  text-align: center;
  margin-bottom: 36px;
}
body.quote-page .quote-header h1 {
  font-family: 'Barlow',sans-serif;
  font-weight: 900;
  font-size: 2.2rem;
  color: var(--ink-900);
  line-height: 1.15;
  margin-bottom: 10px;
}
body.quote-page .quote-header p {
  font-size: 1.05rem;
  color: var(--ink-500);
}
body.quote-page .progress-wrap {
  margin-bottom: 32px;
}
body.quote-page .progress-labels {
  display: flex;
  justify-content: space-between;
  font-size: .75rem;
  font-weight: 700;
  color: var(--ink-500);
  margin-bottom: 6px;
  text-transform: uppercase;
  letter-spacing: .06em;
}
body.quote-page .progress-labels .done {
  color: var(--blue-700);
}
/* The labels are buttons - js/quote.js lets a visitor jump back to any step
   they have completed - so strip the button chrome and keep the label look. */
body.quote-page .progress-labels button {
  appearance: none;
  -webkit-appearance: none;
  background: none;
  border: 0;
  padding: 2px 3px;
  font: inherit;
  letter-spacing: inherit;
  text-transform: inherit;
  color: inherit;
  text-align: center;
  border-radius: 4px;
  cursor: pointer;
}
body.quote-page .progress-labels button:disabled {
  cursor: not-allowed;
  opacity: .5;
}
body.quote-page .progress-labels button:not(:disabled):hover {
  color: var(--blue-700);
  text-decoration: underline;
}
body.quote-page .progress-labels button[aria-current="step"] {
  color: var(--blue-700);
  text-decoration: underline;
  text-underline-offset: 3px;
}
body.quote-page .progress-labels button:focus-visible {
  outline: 2px solid var(--blue-500);
  outline-offset: 2px;
}
body.quote-page .progress-bar {
  height: 5px;
  background: var(--ink-100);
  border-radius: 3px;
  overflow: hidden;
}
body.quote-page .progress-fill {
  height: 100%;
  background: var(--blue-500);
  border-radius: 3px;
  transition: width .3s;
  /* Step 1 of 5. js/quote.js sets the width from there on; this is only the
     initial state, which used to be an inline style attribute on the element. */
  width: 20%;
}
@media (prefers-reduced-motion: reduce) {
  body.quote-page .progress-fill {
    transition: none;
  }
}
body.quote-page .step {
  display: none;
}
body.quote-page .step.active {
  display: block;
}
body.quote-page .step-card {
  background: #fff;
  border-radius: 14px;
  padding: 32px;
  box-shadow: var(--shadow);
  margin-bottom: 20px;
}
body.quote-page .step-eyebrow {
  font-size: .72rem;
  font-weight: 800;
  text-transform: uppercase;
  letter-spacing: .12em;
  color: #1b79c4;
  margin-bottom: 6px;
}
body.quote-page .step-title {
  font-family: 'Barlow',sans-serif;
  font-weight: 800;
  font-size: 1.4rem;
  color: var(--ink-900);
  margin-bottom: 24px;
}
body.quote-page .field-group {
  margin-bottom: 22px;
}
body.quote-page .field-group label {
  display: block;
  font-size: .88rem;
  font-weight: 600;
  color: var(--ink-700);
  margin-bottom: 8px;
}
body.quote-page .field-label {
  display: block;
  font-size: .88rem;
  font-weight: 600;
  color: var(--ink-700);
  margin-bottom: 8px;
}
body.quote-page .field-group label span {
  color: var(--red);
  margin-left: 2px;
}
body.quote-page .req {
  color: var(--red);
  margin-left: 2px;
}
body.quote-page .help-text {
  font-size: .78rem;
  color: var(--ink-500);
  margin-top: 4px;
}
/* Shown above the driver/vehicle cards when more were asked for than the form
   builds, so the shortfall is visible rather than left to be counted. Built by
   setOverflowNote() in js/quote.js. */
body.quote-page .card-overflow-note {
  margin: 12px 0;
  padding: 10px 12px;
  border-left: 3px solid var(--warn-500, #b8860b);
  background: var(--warn-50, #fdf6e3);
  border-radius: 4px;
}
body.quote-page .field-row {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 16px;
}
body.quote-page .field-row.three {
  grid-template-columns: 1fr 1fr 1fr;
}
body.quote-page input[type=text] {
  width: 100%;
  padding: 11px 14px;
  border: 1.5px solid var(--ink-200);
  border-radius: 8px;
  font-size: .92rem;
  font-family: inherit;
  color: var(--ink-900);
  background: #fff;
  transition: border-color .15s;
  -webkit-appearance: none;
  appearance: none;
}
body.quote-page input[type=email] {
  width: 100%;
  padding: 11px 14px;
  border: 1.5px solid var(--ink-200);
  border-radius: 8px;
  font-size: .92rem;
  font-family: inherit;
  color: var(--ink-900);
  background: #fff;
  transition: border-color .15s;
  -webkit-appearance: none;
  appearance: none;
}
body.quote-page input[type=date] {
  width: 100%;
  padding: 11px 14px;
  border: 1.5px solid var(--ink-200);
  border-radius: 8px;
  font-size: .92rem;
  font-family: inherit;
  color: var(--ink-900);
  background: #fff;
  transition: border-color .15s;
  -webkit-appearance: none;
  appearance: none;
}
body.quote-page input[type=number] {
  width: 100%;
  padding: 11px 14px;
  border: 1.5px solid var(--ink-200);
  border-radius: 8px;
  font-size: .92rem;
  font-family: inherit;
  color: var(--ink-900);
  background: #fff;
  transition: border-color .15s;
  -webkit-appearance: none;
  appearance: none;
}
body.quote-page input[type=tel] {
  width: 100%;
  padding: 11px 14px;
  border: 1.5px solid var(--ink-200);
  border-radius: 8px;
  font-size: .92rem;
  font-family: inherit;
  color: var(--ink-900);
  background: #fff;
  transition: border-color .15s;
  -webkit-appearance: none;
  appearance: none;
}
body.quote-page select {
  width: 100%;
  padding: 11px 14px;
  border: 1.5px solid var(--ink-200);
  border-radius: 8px;
  font-size: .92rem;
  font-family: inherit;
  color: var(--ink-900);
  background: #fff;
  transition: border-color .15s;
  -webkit-appearance: none;
  appearance: none;
}
body.quote-page textarea {
  width: 100%;
  padding: 11px 14px;
  border: 1.5px solid var(--ink-200);
  border-radius: 8px;
  font-size: .92rem;
  font-family: inherit;
  color: var(--ink-900);
  background: #fff;
  transition: border-color .15s;
  -webkit-appearance: none;
  appearance: none;
}
body.quote-page input:focus {
  outline: none;
  border-color: var(--blue-500);
}
body.quote-page select:focus {
  outline: none;
  border-color: var(--blue-500);
}
body.quote-page textarea:focus {
  outline: none;
  border-color: var(--blue-500);
}
body.quote-page select {
  background-image: url("../images/select-caret.svg");
  background-repeat: no-repeat;
  background-position: right 14px center;
  padding-right: 38px;
}
body.quote-page .btn-select {
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
  margin-top: 2px;
}
body.quote-page .btn-select.stack {
  flex-direction: column;
}
body.quote-page .bsel {
  padding: 9px 18px;
  border: 1.5px solid var(--ink-200);
  border-radius: 8px;
  font-size: .88rem;
  font-weight: 600;
  color: var(--ink-700);
  background: #fff;
  cursor: pointer;
  transition: all .15s;
  text-align: center;
  -webkit-user-select: none;
  user-select: none;
}
body.quote-page .bsel:hover {
  border-color: var(--blue-500);
  color: var(--blue-700);
}
body.quote-page .bsel.selected {
  border-color: #1b79c4;
  background: #1b79c4;
  color: #fff;
}
body.quote-page .bsel.wide {
  flex: 1;
  min-width: 140px;
}
body.quote-page .form-nav {
  display: flex;
  justify-content: space-between;
  align-items: center;
  margin-top: 28px;
  gap: 12px;
}
body.quote-page .form-nav .nav-slot {
  display: flex;
  align-items: center;
  gap: 12px;
}
/* The duplicate nav above the card. It sits between the progress bar and the
   step, so it leads with no top margin of its own. */
body.quote-page .form-nav-top {
  margin-top: 0;
  margin-bottom: 18px;
}
body.quote-page .btn {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  padding: 12px 26px;
  border-radius: 8px;
  font-size: .95rem;
  font-weight: 700;
  cursor: pointer;
  transition: all .2s;
  border: none;
  font-family: inherit;
  text-decoration: none;
}
body.quote-page .btn-primary {
  background: #d1432a;
  color: #fff;
}
body.quote-page .btn-primary:hover {
  background: #c0392b;
  transform: translateY(-1px);
}
body.quote-page .btn-secondary {
  background: #fff;
  color: var(--blue-700);
  border: 1.5px solid var(--ink-200);
}
body.quote-page .btn-secondary:hover {
  border-color: var(--blue-500);
}
body.quote-page .btn-lg {
  padding: 14px 32px;
  font-size: 1rem;
}
body.quote-page .btn-full {
  width: 100%;
  justify-content: center;
}
body.quote-page .divider {
  border: none;
  border-top: 1px solid var(--ink-100);
  margin: 20px 0;
}
body.quote-page .sub-card {
  background: var(--ink-50);
  border: 1px solid var(--ink-100);
  border-radius: 10px;
  padding: 20px;
  margin-top: 16px;
}
body.quote-page .sub-card-title {
  font-weight: 700;
  font-size: .95rem;
  color: var(--ink-700);
  margin-bottom: 16px;
}
body.quote-page .upload-zone {
  border: 2px dashed var(--ink-200);
  border-radius: 10px;
  padding: 32px;
  text-align: center;
  cursor: pointer;
  transition: border-color .2s;
}
body.quote-page .upload-zone:hover {
  border-color: var(--blue-500);
}
body.quote-page .upload-zone svg {
  width: 36px;
  height: 36px;
  color: var(--ink-200);
  margin: 0 auto 10px;
  display: block;
}
body.quote-page .upload-zone p {
  color: var(--ink-500);
  font-size: .88rem;
}
body.quote-page .upload-zone strong {
  color: var(--blue-700);
}
body.quote-page .check-group {
  display: flex;
  align-items: flex-start;
  gap: 10px;
  font-size: .88rem;
  color: var(--ink-700);
  cursor: pointer;
}
body.quote-page .check-group input {
  width: 16px;
  height: 16px;
  margin-top: 2px;
  accent-color: var(--blue-500);
  flex-shrink: 0;
}
body.quote-page .summary-grid {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 8px 24px;
  font-size: .88rem;
}
body.quote-page .summary-grid dt {
  color: var(--ink-500);
  font-weight: 500;
}
body.quote-page .summary-grid dd {
  color: var(--ink-900);
  font-weight: 600;
}
@media(max-width:640px) {
  body.quote-page .quote-header h1 {
    font-size: 1.6rem;
  }
  body.quote-page .field-row {
    grid-template-columns: 1fr;
  }
  body.quote-page .field-row.three {
    grid-template-columns: 1fr;
  }
  body.quote-page .step-card {
    padding: 20px;
  }
  body.quote-page .btn-select {
    gap: 6px;
  }
  body.quote-page .bsel {
    padding: 8px 14px;
    font-size: .83rem;
  }
  body.quote-page .form-nav {
    flex-direction: column-reverse;
  }
  body.quote-page .form-nav .nav-slot {
    width: 100%;
  }
  body.quote-page .form-nav .btn {
    width: 100%;
    justify-content: center;
  }
  body.quote-page .progress-labels {
    font-size: .68rem;
    gap: 2px;
  }
}

body.quote-page .g-review-badge {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 10px;
  background: #fff;
  border: 1px solid #e6ecf1;
  border-radius: 12px;
  padding: 12px 16px;
  margin-bottom: 16px;
  box-shadow: 0 4px 14px rgba(14,26,38,.08);
  text-decoration: none;
}
body.quote-page .g-review-badge .grb-stars {
  color: #f5a623;
  font-size: 1.25rem;
  letter-spacing: 2px;
  line-height: 1;
}
body.quote-page .g-review-badge .grb-rating {
  font-weight: 900;
  font-size: 1.3rem;
  color: #0e1a26;
  font-family: 'Barlow','Inter',sans-serif;
}
body.quote-page .g-review-badge .grb-text {
  font-size: .85rem;
  color: #2a3d4f;
  font-weight: 600;
  line-height: 1.25;
}
body.quote-page .g-review-badge .grb-text u {
  color: #155fa0;
}
body.quote-page .g-review-badge:hover {
  border-color: #2196f3;
}
body.quote-page .main-nav a {
  white-space: nowrap;
}
body.quote-page .field-error {
  display: block;
  margin-top: 5px;
  font-size: .82rem;
  font-weight: 600;
  color: #c0392b;
}
body.quote-page [aria-invalid="true"] {
  border-color: #c0392b !important;
  background: #fdf3f2;
}
/* A button group keeps its value in a hidden input, which cannot be outlined,
   so an unanswered required group is marked on the wrapper instead. */
body.quote-page .btn-select.is-invalid {
  outline: 1px dashed #c0392b;
  outline-offset: 6px;
  border-radius: 4px;
}
body.quote-page button.upload-zone {
  width: 100%;
  font: inherit;
  color: inherit;
  cursor: pointer;
  text-align: center;
  display: block;
}
body.quote-page .uz-line {
  display: block;
}

/* ---------------------------------------------------------------------------
   LINK DISTINGUISHABILITY (WCAG 1.4.1 - "Use of Color")
   A link inside a block of text must not rely on colour alone. Underlining
   prose links satisfies this; standalone links (buttons, nav, cards, lists of
   links) are exempt because they are not embedded in surrounding text.
   --------------------------------------------------------------------------- */

main p a,
main li a:not(.btn),
main td a,
body.quote-page .page-credit a,
.page-credit a,
.callout a,
.faq-body a,
.footer-bottom a,
.footer-brand a {
  text-decoration: underline;
  text-underline-offset: .15em;
}

/* Components that are links but not prose: keep them clean. */
main p a.btn,
main p a.nav-cta,
main a.btn,
.footer-col ul a,
.locations-grid a,
.pcard-bullets a,
.ub-act,
.ub-reviews,
.ub-phones a {
  text-decoration: none;
}

/* The footer bottom bar sits on near-black; raise the link contrast too. */
.footer-bottom a {
  color: rgba(255,255,255,.78);
}
.footer-bottom a:hover {
  color: #ffffff;
}

/* ---------------------------------------------------------------------------
   TOUCH TARGETS AND MINIMUM TEXT SIZE (step 12, mobile usability)
   axe passes these under the WCAG 2.5.8 spacing exception, but 20-22px tall
   links are awkward on a phone. Vertical padding lifts the standalone link
   lists to the 24px minimum without changing the visual rhythm.
   --------------------------------------------------------------------------- */

.ub-phones a,
.ub-reviews {
  padding: 2px 0;
  min-height: 24px;
}
.footer-col ul a,
.footer-locations a {
  display: inline-block;
  padding: 3px 0;
  min-height: 24px;
}

/* Nothing below 12px: too small to read comfortably on a phone. */
.submenu-label,
.ub-st {
  font-size: .75rem;
}
body.home-page .iid-offer-badge {
  font-size: .75rem;
}

/* The 404 page and other content lists use plain <li><a>; give them the same
   24px minimum as the footer link lists. */
main li > a:not(.btn) {
  display: inline-block;
  padding: 2px 0;
  min-height: 24px;
}

/* Last two labels still under 12px. */
body.home-page .iid-partners-label,
body.quote-page .step-eyebrow {
  font-size: .75rem;
}


/* ===========================================================================
   UTILITIES AND EXTRACTED COMPONENTS
   ---------------------------------------------------------------------------
   Everything below replaced an inline style attribute. There were 134 of them
   across 14 files, which is why they are here: an inline style defeats caching,
   cannot be overridden or audited, and is what blocks a Content-Security-Policy.

   Values were carried across UNCHANGED, so the migration was a no-visual-change
   transformation. Consolidating these into a smaller, more opinionated set is
   design work rather than mechanical work, and is deliberately left for a
   separate pass. When you do it: prefer extending an existing component class
   over reaching for a utility, and delete utilities as they fall out of use.

   No literal colours or sizes here that a :root token already names -- a
   hard-coded value duplicating a token is what makes a rebrand miss a spot.
   =========================================================================== */

/* --- Visibility ---------------------------------------------------------- */

/* Conditional blocks in the quote wizard. Rendered by hide_unless() in
   lib/form_fields.php and toggled by show() in js/quote.js -- both sides use
   THIS class, so the server can render a block already open after a failed
   submission without a flash of it appearing a moment later.
   !important because it must beat the display value of whatever it is put on. */
.is-hidden {
  display: none !important;
}

/* --- Spacing ------------------------------------------------------------- */

.u-mt-4  { margin-top: 4px; }
.u-mt-6  { margin-top: 6px; }
.u-mt-8  { margin-top: 8px; }
.u-mt-10 { margin-top: 10px; }
.u-mt-16 { margin-top: 16px; }
.u-mt-24 { margin-top: 24px; }
.u-mt-28 { margin-top: 28px; }
.u-mt-56 { margin-top: 56px; }
.u-mt-60 { margin-top: 60px; }

.u-mb-10 { margin-bottom: 10px; }
.u-mb-12 { margin-bottom: 12px; }
.u-mb-16 { margin-bottom: 16px; }
.u-mb-24 { margin-bottom: 24px; }
.u-mb-28 { margin-bottom: 28px; }
.u-mb-40 { margin-bottom: 40px; }
.u-mb-50 { margin-bottom: 50px; }
.u-mb-60 { margin-bottom: 60px; }

.u-my-48 { margin: 48px 0; }
.u-mx-auto { margin-left: auto; margin-right: auto; }

.u-pt-32 { padding-top: 32px; }
.u-pt-60 { padding-top: 60px; }

/* --- Sizing -------------------------------------------------------------- */

.u-w-full { width: 100%; }

.u-mw-100  { max-width: 100px; }
.u-mw-200  { max-width: 200px; }
.u-mw-660  { max-width: 660px; }
.u-mw-680  { max-width: 680px; }
.u-mw-700  { max-width: 700px; }
.u-mw-720  { max-width: 720px; }
.u-mw-920  { max-width: 920px; }
.u-mw-1000 { max-width: 1000px; }
.u-mw-1100 { max-width: 1100px; }

/* --- Type ---------------------------------------------------------------- */

.u-center { text-align: center; }
.u-bold   { font-weight: 700; }
.u-underline { text-decoration: underline; }
.u-leading-loose { line-height: 1.7; }

.u-fs-xs { font-size: .85rem; }
.u-fs-sm { font-size: .95rem; }
.u-fs-md { font-size: 1.05rem; }

.u-muted    { color: var(--ink-500); }
.u-ink-700  { color: var(--ink-700); }
.u-ink-900  { color: var(--ink-900); }
.u-blue-700 { color: var(--blue-700); }
.u-red-700  { color: var(--red-700); }

/* On a dark background -- the footer and the CTA banners. */
.u-on-dark { color: var(--white); }

/* A whole card that is a link: the card carries the visual, so the anchor should
   not add its own underline and colour on top. */
.u-plain-link {
  text-decoration: none;
  color: inherit;
}

/* --- Lists --------------------------------------------------------------- */

.u-list-tight {
  margin: 0;
  padding-left: 18px;
}
.u-list-indent {
  padding-left: 20px;
}

/* A row of links that reads as one line rather than a stacked list. */
.inline-link-list {
  display: flex;
  flex-wrap: wrap;
  gap: 10px 24px;
  justify-content: center;
  list-style: none;
  padding: 0;
  margin: 0 0 20px;
}

/* --- Grids --------------------------------------------------------------- */

/* Cards that reflow by themselves. auto-fit plus minmax means no breakpoint is
   needed and nothing is clipped at 320px (WCAG 1.4.10 Reflow). */
.auto-grid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(260px, 1fr));
  gap: 20px;
}
.auto-grid-wide {
  grid-template-columns: repeat(auto-fit, minmax(280px, 1fr));
}

/* A fixed three-column grid. It needs the breakpoint below, because
   1fr 1fr 1fr does not reflow on its own the way auto-fit does. */
.three-col-grid {
  display: grid;
  grid-template-columns: 1fr 1fr 1fr;
  gap: 24px;
}
.features-3 {
  grid-template-columns: repeat(3, 1fr);
  margin: 30px 0;
}

@media (max-width: 860px) {
  .three-col-grid,
  .features-3 {
    grid-template-columns: 1fr;
  }
}

/* --- Headings ------------------------------------------------------------ */

/* A section heading inside a long article. The generous top margin is what
   separates one section from the previous section's body copy. */
.h-section {
  font-size: 1.8rem;
  margin: 60px 0 24px;
  color: var(--blue-700);
}
/* The first such heading has nothing above it to be separated from. */
.h-section-first {
  margin-top: 0;
}

/* --- Cards and panels ---------------------------------------------------- */

.card-plain {
  background: var(--white);
  border: 1px solid var(--ink-100);
}
.card-info {
  background: var(--blue-50);
  border: 1px solid var(--blue-100);
}
.card-alert {
  background: var(--red-100);
  border: 1px solid var(--red-500);
}
/* The selected state of a pickable card. Border COLOUR only, so the card keeps
   whatever border width it already had and does not shift by a pixel when it
   becomes selected. */
.card-selected {
  border-color: var(--blue-300);
  background: var(--blue-50);
}

/* --- Buttons in inverted contexts ---------------------------------------- */

/* An outline button on a dark banner. The border is 60% white rather than a
   tint of the brand blue because against the dark banner that is what clears
   3:1 for a UI component boundary (WCAG 1.4.11). */
.btn-on-dark {
  color: var(--white);
  border-color: rgba(255, 255, 255, .6);
}
.btn-solid-blue {
  background: var(--blue-700);
  color: var(--white);
  border-color: var(--blue-700);
}

/* --- Form furniture ------------------------------------------------------ */

/* Explanatory text under a field label. Not a substitute for the label, and not
   where a required marker goes (WCAG 3.3.2). */
.field-note {
  font-size: .9rem;
  color: var(--ink-500);
  margin-bottom: 6px;
}

/* A hint that appears in response to something the visitor did. */
.helper-note {
  margin-top: 8px;
  font-size: .85rem;
  color: var(--blue-700);
}

/* The Turnstile widget sits in the form flow with the same rhythm as a field.
   min-height reserves the space the widget will occupy, so the form does not
   jump when it finishes loading (Core Web Vitals: CLS). */
.turnstile-field {
  margin: 16px 0;
  min-height: 65px;
}

/* A note explaining that verification did not load, or that a send failed.
   Deliberately not styled as an error: the submission is still accepted. */
.form-note {
  font-size: .9rem;
  margin: 8px 0 0;
}
.form-note-warning {
  color: var(--ink-700);
}

/* --- Footer and misc ----------------------------------------------------- */

.footer-note {
  color: rgba(255, 255, 255, .85);
  font-size: .92rem;
  margin: 0;
}

/* The HQ marker beside an office name. A badge, not a heading level -- it sits
   inside the h3, so vertical-align keeps it on the text baseline. */
.badge-hq {
  font-size: .75rem;
  background: var(--blue-700);
  color: var(--white);
  padding: 2px 8px;
  border-radius: 12px;
  vertical-align: middle;
}

/* The small print under the quote form. */
.page-credit {
  text-align: center;
  padding: 20px;
  font-size: .78rem;
  color: var(--ink-500);
  border-top: 1px solid var(--ink-100);
}


/* ---------------------------------------------------------------------------
   SMS phone verification on the quote form (step 1)

   Sits under the phone field as a subdued block: it is an optional shortcut for
   returning customers, not a step in the form, and it must not read as another
   required field. Hence the muted panel rather than a card, and the small
   buttons.

   The whole block is absent from the markup unless Twilio and the lookup are
   both configured, so none of this loads a style for something invisible.
   --------------------------------------------------------------------------- */
.verify-block {
  margin-top: 10px;
  padding: 12px 14px;
  background: var(--ink-50);
  border: 1px solid var(--ink-100);
  border-radius: var(--radius-sm);
}

/* The disclosure paragraph leads the block, so it loses the top margin
   .helper-note carries for use under a field, and the button gets the gap
   instead. Order matters here: the sentence explaining the text message must be
   read before the button that sends one. */
.verify-block > .helper-note:first-child {
  margin-top: 0;
}
.verify-block > .btn {
  margin-top: 10px;
}

/* Small variants of the shared buttons. Defined here rather than beside .btn
   because this block is the only place that wants them; promote them upward if
   a second caller ever appears. */
.btn-sm {
  padding: 9px 16px;
  font-size: .9rem;
}

/* Resend is a text link that happens to be a <button>: it must not compete with
   "Check code" beside it, and it is not a form action worth a filled button. */
.btn-link {
  background: transparent;
  color: var(--blue-700);
  text-decoration: underline;
  box-shadow: none;
  padding: 9px 6px;
}
.btn-link:hover {
  background: transparent;
  color: var(--blue-500);
  transform: none;
}

/* The code entry row. Wraps on a narrow screen rather than squeezing the input
   below a usable width - six digits and two buttons do not fit on a phone. */
.verify-code-row {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 8px;
  margin-top: 10px;
}
.verify-code-row label {
  flex: 1 0 100%;
  font-size: .85rem;
  font-weight: 600;
}
.verify-code-row input {
  /* Wide enough for six digits at the tracking below, and no wider. */
  max-width: 8.5em;
  letter-spacing: .35em;
  text-align: center;
  font-variant-numeric: tabular-nums;
}

/* aria-live, so a screen reader hears each outcome. Never coloured red or green
   alone: every message says what happened in words, because "carry on filling in
   the form" is the actual instruction in most of the failure cases. */
.verify-status {
  margin: 10px 0 0;
  font-size: .85rem;
  font-weight: 600;
  color: var(--blue-700);
}