@font-face { font-display: swap; font-family: "Auto Sans"; font-style: normal; font-weight: 400; src: url("/assets/font/dm-sans-latin-400-normal.woff2") format("woff2"); }
@font-face { font-display: swap; font-family: "Auto Sans"; font-style: normal; font-weight: 500; src: url("/assets/font/dm-sans-latin-500-normal.woff2") format("woff2"); }
@font-face { font-display: swap; font-family: "Auto Sans"; font-style: normal; font-weight: 700; src: url("/assets/font/dm-sans-latin-700-normal.woff2") format("woff2"); }
@font-face { font-display: swap; font-family: "Auto Sans"; font-style: normal; font-weight: 900; src: url("/assets/font/dm-sans-latin-900-normal.woff2") format("woff2"); }

:root {
  --ink: #161c20;
  --muted: #5c696e;
  --deep: #263940;
  --teal: #008e8e;
  --teal-dark: #007077;
  --gold: #ffcf52;
  --paper: #ffffff;
  --mist: #f2f5f5;
  --line: #d7dfe0;
  --accent: #ff9900;
  --max-width: 1140px;
  --font: "Auto Sans", Arial, sans-serif;
}

* { box-sizing: border-box; }
html { scroll-behavior: smooth; }
body { background: var(--paper); color: var(--ink); font-family: var(--font); font-size: 16px; line-height: 1.55; margin: 0; }
a { color: inherit; }
button, input, select { font: inherit; }
button { cursor: pointer; }
.container { margin: 0 auto; max-width: var(--max-width); padding: 0 24px; width: 100%; }
.skip-link { background: var(--gold); color: var(--ink); font-weight: 700; left: 16px; padding: 10px 15px; position: fixed; top: -80px; z-index: 20; }
.skip-link:focus { top: 16px; }
.sr-only { clip: rect(0, 0, 0, 0); clip-path: inset(50%); height: 1px; overflow: hidden; position: absolute; white-space: nowrap; width: 1px; }

.site-header { background: var(--paper); border-bottom: 1px solid rgba(22, 28, 32, .08); position: relative; z-index: 2; }
.header-inner { align-items: center; display: flex; gap: 24px; justify-content: space-between; min-height: 74px; }
.logo { align-items: center; display: inline-flex; flex: 0 0 auto; gap: 9px; text-decoration: none; }
.logo b { color: var(--deep); font-family: var(--font); font-size: 22px; letter-spacing: -.9px; }
.logo b span { color: var(--teal); }
.logo-badge { align-items: center; background: var(--deep); border-radius: 50%; color: var(--gold); display: inline-flex; font-family: var(--font); font-size: 15px; font-weight: 700; height: 30px; justify-content: center; width: 30px; }
.header-assurance { color: var(--muted); font-size: 13px; margin-left: auto; }
.assurance-dot { background: var(--teal); border-radius: 50%; display: inline-block; height: 7px; margin-right: 7px; width: 7px; }
.header-cta { color: var(--deep); font-size: 14px; font-weight: 700; text-decoration: none; }
.header-cta:hover, .text-link:hover { color: var(--teal-dark); }

.hero { background: #263940 url("/assets/img/hero-suv.png") center/cover no-repeat; color: var(--paper); min-height: 650px; overflow: hidden; position: relative; }
.hero-wash { background: linear-gradient(90deg, rgba(18, 34, 48, .91) 0%, rgba(25, 47, 61, .73) 37%, rgba(27, 51, 64, .15) 72%, rgba(16, 24, 29, .08)); inset: 0; position: absolute; }
.hero-content { align-items: flex-start; display: flex; flex-direction: column; justify-content: center; min-height: 650px; padding-bottom: 74px; padding-top: 58px; position: relative; }
.brand-hero { color: var(--gold); font-family: var(--font); font-size: clamp(2.4rem, 5.9vw, 5.4rem); font-weight: 700; letter-spacing: -.07em; line-height: .9; margin: 0 0 22px; }
.hero h1 { font-family: var(--font); font-size: clamp(2.3rem, 4.25vw, 4.2rem); font-weight: 900; letter-spacing: -.055em; line-height: 1.03; margin: 0; max-width: 680px; }
.hero-lead { font-family: var(--font); font-size: 18px; line-height: 1.6; margin: 25px 0 30px; max-width: 500px; }
.button { align-items: center; border: 0; display: inline-flex; font-family: var(--font); font-size: 16px; font-weight: 700; gap: 34px; justify-content: space-between; min-height: 54px; padding: 0 22px; text-decoration: none; transition: background .2s, transform .2s; }
.button:hover { transform: translateY(-2px); }
.button-primary { background: var(--gold); color: var(--ink); min-width: 211px; }
.button-primary:hover { background: #ffe087; }
.hero-note { font-size: 12px; margin: 16px 0 0; }
.hero-note span { color: var(--gold); font-weight: 900; }

.benefit-section { padding: 132px 0 118px; text-align: center; }
.narrow-center { max-width: 940px; }
.eyebrow, .label, .detail-kicker, .form-eyebrow { color: var(--teal); font-family: var(--font); font-size: 12px; font-weight: 700; letter-spacing: .12em; margin: 0 0 20px; text-transform: uppercase; }
.benefit-section h2, .detail-grid h2, .final-cta h2, .legal-hero h1 { color: var(--deep); font-size: clamp(2rem, 3.35vw, 3.2rem); font-weight: 900; letter-spacing: -.047em; line-height: 1.1; margin: 0 auto; }
.benefit-section h2 { max-width: 840px; }
.section-intro { color: var(--muted); font-family: var(--font); font-size: 17px; margin: 28px auto 0; max-width: 670px; }

.detail-section { padding: 110px 0 145px; }
.detail-shell { background: var(--deep) url("/assets/img/hero-suv.png") 30% center/cover no-repeat; color: var(--paper); overflow: hidden; padding-top: 0; position: relative; }
.detail-shell::before { background: rgba(38, 57, 64, .72); content: ""; inset: 0; position: absolute; }
.detail-image { background: linear-gradient(0deg, rgba(38, 57, 64, .05), rgba(38, 57, 64, .1)); height: 155px; position: relative; }
.detail-grid { display: grid; gap: 10%; grid-template-columns: 1fr 1fr; padding: 0 11% 82px; position: relative; }
.detail-kicker { color: var(--gold); margin-top: 20px; }
.detail-grid h2 { color: var(--paper); margin: 0; max-width: 410px; }
.detail-grid h2::before { background: var(--gold); content: ""; display: block; height: 4px; margin: 0 0 34px; width: 48px; }
.detail-grid p { font-family: var(--font); margin: 78px 0 28px; }
.text-link { color: var(--paper); font-size: 14px; font-weight: 700; text-decoration: none; }
.text-link span { color: var(--gold); margin-left: 8px; }

.two-columns { padding: 0 0 132px; }
.two-columns-grid { display: grid; gap: 16.5%; grid-template-columns: 1fr 1fr; }
.two-columns article { border-top: 4px solid var(--teal); padding-top: 26px; }
.two-columns article:last-child { border-color: var(--gold); }
.label { margin-bottom: 20px; }
.two-columns article:last-child .label { color: #b67700; }
.two-columns h3 { color: var(--deep); font-size: 27px; font-weight: 900; letter-spacing: -.035em; line-height: 1.15; margin: 0 0 20px; }
.two-columns p:last-child { color: var(--muted); font-family: var(--font); margin: 0; }

.final-cta { background: var(--teal); color: var(--paper); padding: 105px 0 112px; text-align: center; }
.final-cta .container { max-width: 760px; }
.final-cta .eyebrow { color: var(--gold); }
.final-cta h2 { color: var(--paper); }
.final-cta p:not(.eyebrow) { font-family: var(--font); margin: 22px auto 30px; }
.button-secondary { background: var(--paper); color: var(--deep); min-width: 250px; }
.button-secondary:hover { background: #edf9f8; }
.cta-note { display: block; font-size: 12px; margin-top: 15px; }

.site-footer { background: #1d292e; color: rgba(255,255,255,.77); font-family: var(--font); font-size: 12px; padding: 44px 0 30px; }
.site-footer .logo b { color: var(--paper); }
.site-footer .logo-badge { background: var(--paper); color: var(--deep); }
.footer-top { align-items: center; display: flex; gap: 28px; justify-content: space-between; padding-bottom: 30px; }
.footer-top nav { display: flex; flex-wrap: wrap; gap: 9px 24px; justify-content: flex-end; }
.footer-top a { color: var(--paper); text-decoration: none; }
.footer-top a:hover { color: var(--gold); }
.footer-copy { border-top: 1px solid rgba(255,255,255,.16); padding-top: 24px; }
.footer-copy p { margin: 0 0 14px; max-width: 1050px; }
.copyright { color: rgba(255,255,255,.48); margin: 27px 0 0; }

.form-page { background: #f5f6fb; min-height: 100vh; }
.form-header { background: var(--paper); border-bottom: 1px solid #e8e9ed; }
.form-header-inner { align-items: center; display: flex; justify-content: space-between; min-height: 74px; }
.form-exit { color: var(--deep); font-size: 14px; font-weight: 700; text-decoration: none; }
.quote-main { min-height: calc(100vh - 74px); padding: 54px 24px; }
.quote-shell { background: var(--paper); border-radius: 24px; box-shadow: 0 20px 55px rgba(38,57,64,.12); margin: 0 auto; max-width: 572px; overflow: hidden; padding: 48px; }
.quote-progress { background: #e6e9ef; border-radius: 999px; height: 8px; overflow: hidden; width: 100%; }
.quote-progress-fill { background: var(--teal); border-radius: inherit; height: 100%; transition: width .3s ease; width: 20%; }
.progress-label { color: var(--muted); font-size: 12px; margin: 10px 0 0; text-align: right; }
.quote-step { min-height: 450px; padding-top: 27px; }
.quote-step[hidden] { display: none; }
.quote-step h1 { color: var(--deep); font-size: clamp(1.75rem, 4vw, 2.45rem); font-weight: 900; letter-spacing: -.05em; line-height: 1.12; margin: 0; text-align: center; }
.form-eyebrow { margin-bottom: 14px; text-align: center; }
.form-lead { color: var(--muted); font-family: var(--font); font-size: 14px; margin: 15px auto 29px; max-width: 400px; text-align: center; }
.choice-grid { border: 0; display: grid; gap: 10px; margin: 0; padding: 0; }
.choice-grid-two { grid-template-columns: 1fr 1fr; }
.choice-option { align-items: center; border: 1px solid var(--line); border-radius: 8px; display: flex; gap: 16px; min-height: 80px; padding: 14px 15px; position: relative; transition: border .2s, box-shadow .2s, background .2s; }
.choice-option:hover { border-color: var(--teal); box-shadow: 0 7px 18px rgba(0,142,142,.11); }
.choice-option:has(input:checked) { background: #edf9f8; border-color: var(--teal); box-shadow: 0 0 0 2px rgba(0,142,142,.12); }
.choice-option input { accent-color: var(--teal); height: 18px; left: 16px; position: absolute; top: 50%; transform: translateY(-50%); width: 18px; }
.choice-option > span:last-child { padding-left: 0; }
.choice-option b { color: var(--deep); display: block; font-size: 15px; }
.choice-option small { color: var(--muted); display: block; font-family: var(--font); font-size: 11px; margin-top: 2px; }
.choice-icon { align-items: center; background: #e8f6f5; border-radius: 50%; color: var(--teal); display: inline-flex; flex: 0 0 auto; font-size: 15px; font-weight: 700; height: 28px; justify-content: center; margin-left: 35px; width: 28px; }
.quote-button { background: var(--accent); color: var(--paper); margin-top: 24px; min-width: 100%; }
.quote-button:hover { background: #e98a00; }
.back-button { background: transparent; border: 0; color: var(--deep); font-size: 13px; font-weight: 700; margin: -7px 0 28px; padding: 0; }
.back-button:hover { color: var(--teal); }
.input-field, .select-field { color: var(--deep); display: block; font-size: 13px; font-weight: 700; margin-top: 15px; }
.input-field span, .select-field span { display: block; margin-bottom: 7px; }
.input-field input, .select-field select { background: var(--paper); border: 1px solid #bfc9cb; border-radius: 6px; color: var(--ink); min-height: 51px; outline: none; padding: 0 14px; width: 100%; }
.input-field input:focus, .select-field select:focus { border-color: var(--teal); box-shadow: 0 0 0 3px rgba(0,142,142,.13); }
.name-fields { display: grid; gap: 14px; grid-template-columns: 1fr 1fr; }
.consent-field { align-items: flex-start; color: var(--muted); display: flex; font-family: var(--font); font-size: 11px; gap: 10px; line-height: 1.45; margin-top: 21px; }
.consent-field input { accent-color: var(--teal); flex: 0 0 auto; height: 15px; margin: 2px 0 0; width: 15px; }
.consent-field a { color: var(--deep); font-weight: 700; }
.form-error { color: #b42f2f; font-size: 12px; font-weight: 700; margin: 9px 0 0; min-height: 18px; text-align: center; }
.form-disclosure { color: var(--muted); font-family: var(--font); font-size: 10px; line-height: 1.45; margin: 14px 0 0; text-align: center; }
.quote-trust { color: var(--muted); font-family: var(--font); font-size: 11px; margin: 30px 0 0; text-align: center; }
.quote-trust span { color: var(--teal); font-size: 15px; font-weight: 700; }
.quote-complete { align-items: center; display: flex; flex-direction: column; justify-content: center; text-align: center; }
.complete-icon { align-items: center; background: #e8f6f5; border-radius: 50%; color: var(--teal); display: flex; font-size: 28px; font-weight: 900; height: 70px; justify-content: center; margin: 0 0 22px; width: 70px; }
.quote-complete .quote-button { min-width: 230px; width: auto; }

.site-nav { align-items: center; display: flex; gap: 28px; }
.site-nav a { color: var(--deep); font-size: 14px; font-weight: 700; text-decoration: none; }
.site-nav a:hover { color: var(--teal); }
.site-nav .nav-apply { background: var(--gold); color: var(--ink); padding: 9px 13px; }
.nav-toggle { background: transparent; border: 0; display: none; padding: 5px; }
.nav-toggle > span:not(.sr-only) { background: var(--deep); display: block; height: 2px; margin: 5px 0; width: 23px; }
.page-hero { background: linear-gradient(135deg, #f2f8f8 0%, #fff 68%); padding: 105px 0 88px; }
.page-hero .container { max-width: 900px; }
.page-hero h1, .not-found h1 { color: var(--deep); font-size: clamp(2.45rem, 5vw, 4.2rem); font-weight: 900; letter-spacing: -.06em; line-height: 1.02; margin: 0; max-width: 750px; }
.page-hero > .container > p:last-child { color: var(--muted); font-size: 18px; line-height: 1.6; margin: 23px 0 0; max-width: 660px; }
.content-section { padding: 96px 0; }
.split-content { display: grid; gap: 15%; grid-template-columns: minmax(220px, .8fr) 1.2fr; }
.split-content h2, .contact-details h2, .form-card h2, .side-note h2 { color: var(--deep); font-size: clamp(1.8rem, 3vw, 2.6rem); font-weight: 900; letter-spacing: -.05em; line-height: 1.1; margin: 0; }
.split-content p, .legal-copy p, .contact-details dd, .side-note p { color: var(--muted); line-height: 1.7; margin: 0 0 19px; }
.button-dark { background: var(--deep); color: var(--paper); margin-top: 10px; min-width: 210px; }
.button-dark:hover { background: #344c55; }
.statement-section { background: var(--deep); color: var(--paper); padding: 83px 0; }
.statement-section .container { max-width: 930px; }
.statement-section p { font-size: clamp(1.8rem, 3.5vw, 3.15rem); font-weight: 700; letter-spacing: -.045em; line-height: 1.15; margin: 0; text-align: center; }
.contact-section, .preference-section { padding: 90px 0 112px; }
.contact-grid, .preference-grid { align-items: start; display: grid; gap: 11%; grid-template-columns: .8fr 1.2fr; }
.contact-details dl { margin: 38px 0 0; }
.contact-details dl div { border-top: 1px solid var(--line); padding: 17px 0; }
.contact-details dt { color: var(--teal); font-size: 11px; font-weight: 700; letter-spacing: .1em; text-transform: uppercase; }
.contact-details dd { margin: 5px 0 0; }
.contact-details dd a, .legal-copy a, .consent-field a { color: var(--teal-dark); font-weight: 700; }
.form-card { background: #f5f8f8; border-radius: 10px; padding: 37px; }
.form-card .eyebrow { margin-bottom: 12px; }
.form-card h2 { font-size: 30px; }
.field-row { display: grid; gap: 14px; grid-template-columns: 1fr 1fr; }
.input-field textarea { background: var(--paper); border: 1px solid #bfc9cb; border-radius: 6px; color: var(--ink); outline: none; padding: 12px 14px; resize: vertical; width: 100%; }
.input-field textarea:focus { border-color: var(--teal); box-shadow: 0 0 0 3px rgba(0,142,142,.13); }
.simple-form-error { color: #b42f2f; font-size: 12px; font-weight: 700; min-height: 18px; }
.form-success { background: #e8f6f5; border: 1px solid #a5dcd8; border-radius: 8px; color: var(--deep); margin-top: 22px; padding: 22px; }
.form-success strong, .form-success span { display: block; }
.form-success span { color: var(--muted); font-size: 14px; margin-top: 5px; }
.side-note { border-top: 4px solid var(--gold); padding-top: 26px; }
.side-note .eyebrow { color: #a46c00; }
.side-note h2 { font-size: 30px; margin-bottom: 20px; }
.side-note ul { color: var(--muted); line-height: 2; margin: 0; padding-left: 20px; }
.checkbox-list { border: 0; margin: 23px 0 0; padding: 0; }
.checkbox-list legend { color: var(--deep); font-size: 13px; font-weight: 700; margin-bottom: 10px; }
.checkbox-list label { color: var(--muted); display: block; font-size: 14px; margin: 11px 0; }
.checkbox-list input { accent-color: var(--teal); margin-right: 8px; }
.legal-section { padding: 74px 0 110px; }
.legal-copy { max-width: 840px; }
.legal-copy .legal-updated { color: var(--muted); font-size: 13px; margin-bottom: 35px; }
.legal-copy h2 { color: var(--deep); font-size: 23px; letter-spacing: -.03em; line-height: 1.2; margin: 38px 0 12px; }
.legal-copy p { font-size: 15px; }
.callout, .quote-box { background: #eef8f7; border-left: 4px solid var(--teal); margin: 25px 0; padding: 19px 21px; }
.callout p, .quote-box p { margin: 0; }
.sample-list { display: grid; gap: 12px; grid-template-columns: 1fr 1fr; }
.sample-list div { background: #f5f8f8; padding: 18px; }
.sample-list strong { color: var(--deep); display: block; font-size: 13px; }
.sample-list p { font-size: 13px; margin: 5px 0 0; }
.not-found { min-height: 55vh; padding: 120px 0; text-align: center; }
.not-found .container { max-width: 720px; }
.not-found h1 { margin: 0 auto; }
.not-found p:last-of-type { color: var(--muted); margin: 19px auto 24px; }
.quote-step > .form-disclosure, .quote-step > p:last-child:not(.form-error):not(.form-lead) { color: var(--muted); font-size: 10px; line-height: 1.45; margin: 14px 0 0; text-align: center; }
.quote-step > .form-disclosure p, .quote-step > p:last-child:not(.form-error):not(.form-lead) p { margin: 0; }

.legal-hero { background: linear-gradient(135deg, #f6fbfb, #ffffff); min-height: 61vh; padding: 105px 0; }
.legal-hero .container { max-width: 850px; }
.legal-hero .eyebrow { margin-bottom: 15px; }
.legal-hero h1 { margin: 0 0 35px; }
.legal-hero h2 { color: var(--deep); font-size: 21px; margin: 36px 0 10px; }
.legal-hero p { color: var(--muted); font-family: var(--font); }

@media (max-width: 767px) {
  .container { padding: 0 20px; }
  .header-assurance { display: none; }
  .hero, .hero-content { min-height: 610px; }
  .hero { background-position: 61% center; }
  .hero-wash { background: linear-gradient(90deg, rgba(18,34,48,.9), rgba(25,47,61,.66) 62%, rgba(25,47,61,.23)); }
  .brand-hero { font-size: clamp(3rem, 16vw, 4.3rem); }
  .hero h1 { font-size: clamp(2.35rem, 11vw, 3.25rem); }
  .hero-lead { font-size: 16px; }
  .benefit-section { padding: 80px 0 70px; }
  .detail-section { padding: 62px 0 80px; }
  .detail-shell { margin: 0; }
  .detail-image { height: 115px; }
  .detail-grid { gap: 0; grid-template-columns: 1fr; padding: 0 9% 55px; }
  .detail-grid h2::before { margin-bottom: 24px; }
  .detail-grid p { margin: 32px 0 25px; }
  .two-columns { padding-bottom: 78px; }
  .two-columns-grid { gap: 55px; grid-template-columns: 1fr; }
  .final-cta { padding: 75px 0; }
  .footer-top { align-items: flex-start; flex-direction: column; }
  .footer-top nav { justify-content: flex-start; }
  .quote-main { padding: 25px 12px; }
  .quote-shell { border-radius: 14px; padding: 28px 20px; }
  .quote-step { min-height: 440px; }
  .quote-step h1 { font-size: 28px; }
  .choice-grid-two { grid-template-columns: 1fr; }
  .name-fields { grid-template-columns: 1fr; }
  .form-header-inner { min-height: 65px; }
  .form-header .logo b { font-size: 20px; }
}

@media (max-width: 390px) { .button { font-size: 15px; } .quote-shell { padding-left: 16px; padding-right: 16px; } .choice-option { gap: 10px; } .choice-icon { margin-left: 28px; } }

@media (max-width: 767px) {
  .site-header { position: relative; }
  .nav-toggle { display: block; margin-left: auto; }
  .site-nav { background: var(--paper); border-top: 1px solid var(--line); display: none; left: 0; padding: 18px 20px 22px; position: absolute; right: 0; top: 100%; }
  .site-nav.is-open { align-items: flex-start; display: flex; flex-direction: column; gap: 18px; }
  .site-nav .nav-apply { padding: 9px 13px; }
  .page-hero { padding: 76px 0 64px; }
  .page-hero > .container > p:last-child { font-size: 16px; }
  .content-section, .contact-section, .preference-section { padding: 68px 0; }
  .split-content, .contact-grid, .preference-grid { gap: 45px; grid-template-columns: 1fr; }
  .statement-section { padding: 65px 0; }
  .form-card { padding: 27px 20px; }
  .field-row, .sample-list { grid-template-columns: 1fr; }
  .legal-section { padding: 54px 0 75px; }
  .not-found { min-height: 48vh; padding: 80px 0; }
}