:root {
  --navy: #07182d;
  --navy-2: #0d294b;
  --blue: #124fa3;
  --yellow: #f4d600;
  --yellow-dark: #dcc100;
  --ink: #101828;
  --slate: #526174;
  --line: #dce3e9;
  --cloud: #f2f5f7;
  --white: #ffffff;
  --radius: 18px;
  --shadow: 0 22px 70px rgba(5, 21, 42, 0.14);
}

* { box-sizing: border-box; }
/* Any element toggled via the `hidden` attribute/property must actually
   disappear regardless of what `display` an author rule elsewhere sets on
   it (e.g. `.form-grid { display: grid }`) — otherwise .hidden=true silently
   does nothing and the element keeps rendering on top of/alongside
   whatever replaced it. This was found live on the quote form: step 1,
   step 2 and the success message were all rendering at once. */
[hidden] { display: none !important; }
html { scroll-behavior: smooth; }
body { margin: 0; background: var(--white); color: var(--ink); font-family: Arial, Helvetica, sans-serif; font-size: 16px; line-height: 1.5; overflow-x: hidden; }
a { color: inherit; text-decoration: none; }
button, input, select, textarea { font: inherit; }
button, a { -webkit-tap-highlight-color: transparent; }
img { display: block; max-width: 100%; }
.page-width { width: min(1180px, calc(100% - 48px)); margin: 0 auto; }

.icon { width: 20px; height: 20px; flex: 0 0 auto; fill: none; stroke: currentColor; stroke-width: 2; stroke-linecap: round; stroke-linejoin: round; }
.icon[fill="currentColor"] { fill: currentColor; stroke: none; }

.utility-bar { background: var(--navy); color: #d8e3ef; font-size: 12px; font-weight: 700; letter-spacing: .03em; }
.utility-inner { min-height: 36px; display: flex; align-items: center; justify-content: space-between; gap: 24px; }
.utility-inner span, .utility-inner a { display: inline-flex; align-items: center; gap: 7px; }
.utility-inner .utility-links { gap: 20px; }
.utility-inner a { color: var(--yellow); }
.utility-inner .icon { width: 14px; height: 14px; }

.site-header { position: sticky; top: 0; z-index: 50; background: rgba(255,255,255,.96); border-bottom: 1px solid rgba(10,31,56,.1); backdrop-filter: blur(14px); }
.nav-inner { min-height: 78px; display: flex; align-items: center; gap: 38px; }
.brand { display: inline-flex; align-items: center; gap: 11px; min-width: max-content; }
.brand-mark { width: 44px; height: 44px; display: grid; place-items: center; background: var(--yellow); color: var(--navy); clip-path: polygon(0 0, 100% 0, 100% 76%, 78% 100%, 0 100%); }
.brand > span:last-child { display: flex; flex-direction: column; line-height: .93; }
.brand strong { font-family: "Arial Black", Arial, sans-serif; font-size: 17px; letter-spacing: -.04em; }
.brand small { margin-top: 4px; color: var(--blue); font-size: 10px; font-weight: 800; letter-spacing: .32em; }
.main-nav { margin-left: auto; display: flex; align-items: center; gap: 27px; }
.main-nav a { position: relative; font-size: 14px; font-weight: 700; color: #27364a; }
.main-nav a::after { content: ""; position: absolute; left: 0; right: 100%; bottom: -8px; height: 2px; background: var(--yellow-dark); transition: right .22s ease; }
.main-nav a:hover::after { right: 0; }
.nav-cta, .primary-button, .secondary-button, .map-button, .footer-cta { display: inline-flex; align-items: center; justify-content: center; gap: 10px; font-weight: 800; transition: transform .2s ease, background .2s ease, color .2s ease; }
.nav-cta { min-height: 44px; padding: 0 19px; background: var(--navy); color: white; font-size: 13px; }
.nav-cta:hover, .primary-button:hover, .map-button:hover { transform: translateY(-2px); }
.menu-button { display: none; margin-left: auto; border: 0; background: transparent; color: var(--navy); padding: 7px; cursor: pointer; }

.hero { position: relative; min-height: 640px; background: var(--navy); color: white; overflow: hidden; }
.hero-photo { position: absolute; inset: 0; background-size: cover; background-position: center 45%; transform: scale(1.002); }
.hero-photo::after { content: ""; position: absolute; inset: 0; background-image: linear-gradient(rgba(255,255,255,.04) 1px, transparent 1px), linear-gradient(90deg, rgba(255,255,255,.04) 1px, transparent 1px); background-size: 38px 38px; mask-image: linear-gradient(90deg, black, transparent 72%); }
.hero-inner { position: relative; z-index: 2; min-height: 640px; display: flex; align-items: center; padding: 76px 0 122px; }
.hero-copy { width: min(650px, 62%); }
.eyebrow { margin: 0 0 20px; display: inline-flex; align-items: center; gap: 8px; color: var(--yellow); font-size: 12px; font-weight: 900; text-transform: uppercase; letter-spacing: .19em; }
.eyebrow-dark { color: var(--blue); }
.hero h1, .section-heading h2, .care-copy h2, .location-copy h2, .faq-heading h2, .final-cta h2 { margin: 0; font-family: "Arial Black", Arial, sans-serif; font-weight: 900; letter-spacing: -.065em; line-height: .94; }
.hero h1 { max-width: 630px; font-size: clamp(70px, 8vw, 112px); text-transform: uppercase; }
.hero h1 em, .care-copy h2 em { color: var(--yellow); font-family: Georgia, serif; font-weight: 700; text-transform: none; letter-spacing: -.06em; }
.hero-lead { max-width: 570px; margin: 28px 0 0; color: #e5edf4; font-size: 20px; line-height: 1.55; }
.hero-actions { margin-top: 34px; display: flex; gap: 13px; flex-wrap: wrap; }
.primary-button { min-height: 54px; padding: 0 24px; border: 0; background: var(--yellow); color: var(--navy); font-size: 14px; cursor: pointer; }
.primary-button:hover { background: #ffe615; }
.secondary-button { min-height: 54px; padding: 0 23px; border: 1px solid rgba(255,255,255,.38); color: white; font-size: 14px; }
.secondary-button:hover { border-color: white; background: white; color: var(--navy); }
.hero-trust { margin-top: 28px; display: flex; gap: 21px; flex-wrap: wrap; color: #d8e3ee; font-size: 13px; font-weight: 700; }
.hero-trust span { display: inline-flex; align-items: center; gap: 7px; }
.hero-trust .icon { width: 18px; height: 18px; padding: 3px; border-radius: 50%; background: rgba(244,214,0,.17); color: var(--yellow); }
.hero-note { position: absolute; z-index: 3; right: 0; bottom: 84px; display: flex; align-items: center; gap: 13px; padding: 15px 18px; background: rgba(255,255,255,.95); color: var(--navy); box-shadow: 0 12px 32px rgba(0,0,0,.15); cursor: pointer; transition: transform .2s ease, box-shadow .2s ease; }
.hero-note:hover, .hero-note:focus-visible { transform: translateY(-2px); box-shadow: 0 16px 38px rgba(0,0,0,.22); }
.hero-note:focus-visible { outline: 2px solid var(--yellow); outline-offset: 2px; }
.hero-note-icon { width: 42px; height: 42px; display: grid; place-items: center; background: var(--yellow); flex: 0 0 auto; }
.hero-note small, .hero-note strong { display: block; }
.hero-note small { color: #68778b; font-size: 11px; }
.hero-note strong { margin-top: 2px; font-size: 13px; }
.hero-stripe { position: absolute; z-index: 3; right: -120px; top: 74px; width: 480px; height: 34px; display: flex; align-items: center; justify-content: center; overflow: hidden; transform: rotate(35deg); background: var(--yellow); color: var(--navy); font-size: 11px; font-weight: 900; letter-spacing: .12em; white-space: nowrap; }

.quote-section { padding: 32px 0 0; background: var(--cloud); }
.conversion-stack { max-width: 920px; }
.quote-card, .quote-success { position: relative; width: 100%; min-height: 345px; padding: 38px 42px 28px; background: white; color: var(--ink); box-shadow: var(--shadow); border-top: 6px solid var(--yellow); }
.quote-card-head { display: flex; align-items: flex-start; justify-content: space-between; gap: 24px; margin-bottom: 22px; }
.mini-label { color: var(--blue); font-size: 10px; font-weight: 900; text-transform: uppercase; letter-spacing: .16em; }
.quote-card h2, .quote-success h2 { margin: 4px 0 0; font-family: "Arial Black", Arial, sans-serif; font-size: 32px; letter-spacing: -.045em; }
.step-count { display: flex; align-items: center; margin-top: 5px; }
.step-count span { width: 26px; height: 26px; display: grid; place-items: center; border-radius: 50%; border: 1px solid #bdc8d3; color: #8290a0; font-size: 11px; font-weight: 800; }
.step-count span.active { border-color: var(--navy); background: var(--navy); color: white; }
.step-count i { display: block; width: 18px; height: 1px; background: #bdc8d3; }
.form-grid { display: grid; grid-template-columns: 1fr 1fr; gap: 14px; }
.form-grid label { display: flex; flex-direction: column; gap: 7px; color: #344256; font-size: 13px; font-weight: 800; }
.form-grid input, .form-grid select, .form-grid textarea { width: 100%; min-width: 0; border: 1px solid #cfd8e1; border-radius: 0; outline: none; background: #fbfcfd; color: var(--ink); font-size: 15px; font-weight: 500; transition: border-color .2s ease, box-shadow .2s ease; }
.form-grid input, .form-grid select { height: 44px; padding: 0 12px; }
.form-grid textarea { padding: 11px 12px; resize: vertical; }
.form-grid input:focus, .form-grid select:focus, .form-grid textarea:focus { border-color: var(--blue); box-shadow: 0 0 0 3px rgba(18,79,163,.1); }
.input-shell { position: relative; display: flex; align-items: center; }
.input-shell .icon { position: absolute; left: 12px; color: #78879a; z-index: 1; pointer-events: none; width: 17px; height: 17px; }
.input-shell input { padding-left: 38px; }
.form-grid .wide { grid-column: 1 / -1; min-height: 48px; margin-top: 2px; }
.form-actions { grid-column: 1 / -1; display: flex; justify-content: flex-end; gap: 10px; margin-top: 1px; }
.form-actions .primary-button { min-height: 46px; }
.back-button, .text-button { border: 0; background: transparent; cursor: pointer; color: var(--blue); font-weight: 800; }
.back-button { padding: 0 14px; }
.privacy-note { margin: 14px 0 0; display: flex; align-items: center; justify-content: center; gap: 6px; color: #78879a; font-size: 10px; }
.privacy-note .icon { width: 15px; height: 15px; }
.form-error { margin: 14px 0 0; padding: 12px 16px; background: #fdecec; border: 1px solid #f3b9b9; color: #8a1f1f; font-size: 13px; text-align: center; }
.form-error a { text-decoration: underline; font-weight: 700; }
.quote-success { display: flex; flex-direction: column; align-items: flex-start; justify-content: center; }
.quote-success > p:not(.eyebrow) { max-width: 360px; color: var(--slate); }
.success-icon { width: 52px; height: 52px; display: grid; place-items: center; margin-bottom: 18px; background: var(--yellow); color: var(--navy); }
.quote-success .eyebrow { margin-bottom: 4px; }
.text-button { display: inline-flex; align-items: center; gap: 7px; padding: 0; }

.stats-section { position: relative; z-index: 9; padding: 0 0 26px; background: var(--cloud); }
.stats-shell { padding: 28px 38px 26px; background: var(--navy); color: white; box-shadow: 0 20px 52px rgba(5,21,42,.18); }
.stats-grid { min-height: 126px; display: grid; grid-template-columns: repeat(3, 1fr); align-items: center; }
.stat { position: relative; padding: 0 30px; text-align: center; }
.stat:first-child { padding-left: 30px; }
.stat + .stat::before { content: ""; position: absolute; left: 0; top: 3px; bottom: 3px; width: 1px; background: rgba(255,255,255,.2); }
.stat strong { display: block; color: var(--yellow); font-family: "Arial Black", Arial, sans-serif; font-size: clamp(54px, 5.3vw, 76px); line-height: .95; letter-spacing: -.075em; font-variant-numeric: tabular-nums; }
.stat span { display: block; margin-top: 12px; color: #dbe6f0; font-size: 11px; font-weight: 900; text-transform: uppercase; letter-spacing: .12em; }

/* Full-bleed: the carousel is its own section (not nested in the quote
   form's 920px conversion-stack), and this stretches it edge-to-edge across
   the viewport. A fixed intro panel sits on the left (rating summary + nav
   buttons); reviews page past it on the right, all cards equally prominent
   — no single "spotlight" card. review-carousel.js drives everything below
   .review-viewport; this file only defines layout, sizing and animation. */
.review-carousel { width: 100vw; margin-top: 0; margin-left: calc(50% - 50vw); margin-right: calc(50% - 50vw); padding: 56px 0; overflow: hidden; background: linear-gradient(155deg, #061426 0%, var(--navy) 42%, #113563 100%); color: white; box-shadow: 0 20px 50px rgba(5,21,42,.16); }
/* No right padding and no max-width on purpose: the row of cards runs all
   the way to the right edge of the screen so the next card is cut by the
   viewport, not by an invisible container. Only the left side is inset, and
   it grows on wide screens so the intro panel stays roughly in line with
   the rest of the page's content instead of hugging the far left. */
.review-carousel-inner { padding: 0 0 0 max(40px, calc(50vw - 860px)); display: flex; align-items: center; gap: 56px; }

.review-intro { flex: 0 0 260px; }
/* Replaces the Google "G" badge that used to sit here — the badge stays on
   the cards themselves, which is where the attribution actually belongs. */
.review-intro::before { content: ""; display: block; width: 46px; height: 5px; margin-bottom: 20px; border-radius: 3px; background: var(--yellow); }
.review-intro h3 { margin: 0 0 14px; font-family: "Arial Black", Arial, sans-serif; font-size: 26px; line-height: 1.1; letter-spacing: -.03em; }
.review-rating-row { display: flex; align-items: baseline; gap: 10px; }
.rating-number { font-family: "Arial Black", Arial, sans-serif; font-size: 30px; color: var(--yellow); }
.rating-stars { color: #f2b900; letter-spacing: 3px; font-size: 15px; }
.rating-count { margin: 8px 0 26px; color: #9fb0c2; font-size: 13px; }
.review-intro .carousel-controls { display: flex; gap: 10px; }
.review-intro .carousel-controls button { width: 44px; height: 44px; border-radius: 50%; display: grid; place-items: center; border: 1px solid rgba(255,255,255,.28); background: transparent; color: white; cursor: pointer; transition: background .2s ease, color .2s ease; }
.review-intro .carousel-controls button:hover { background: var(--yellow); color: var(--navy); }
.review-intro .carousel-controls button:disabled { opacity: .35; cursor: default; }
.review-intro .carousel-controls button:disabled:hover { background: transparent; color: white; }

.google-logo { color: #4285f4; font-size: 18px; font-weight: 900; line-height: 1; flex: 0 0 auto; }

/* container-type lets --per-page (below) respond to the VIEWPORT's own
   width — set by the flex layout, not the window — so a narrower sidebar
   or a split-view resize changes it exactly like a window resize would. */
/* The vertical padding is what the cards' hover lift and drop shadow live
   in: `overflow: hidden` clips at the padding box, so with 0 padding a card
   raised by translateY(-4px) gets its top sliced off. The matching negative
   margin keeps the padding from changing the row's position in the layout.
   (JS sets padding-right inline for the peek; that only overrides the right
   value of this shorthand, not the vertical ones.) */
.review-viewport { flex: 1 1 auto; min-width: 0; overflow: hidden; container-type: inline-size; container-name: reviews; padding: 30px 0; margin: -30px 0; }
.review-track { position: relative; display: flex; gap: 20px; transition: transform .5s cubic-bezier(.22,.75,.18,1); --per-page: 1; }
/* Thresholds are on the container's CONTENT box, which is the viewport
   minus the peek gutter — so they sit below the round window widths they
   correspond to (a 1024px window leaves ~600px of container here). */
@container reviews (min-width: 600px) { .review-track { --per-page: 2; } }
@container reviews (min-width: 960px) { .review-track { --per-page: 3; } }
@container reviews (min-width: 1340px) { .review-track { --per-page: 4; } }
.review-track.no-transition, .review-track.review-track-native { transition: none; }
.review-track.is-animating { will-change: transform; }
@media (prefers-reduced-motion: reduce) { .review-track { transition: none; } }

.review-page { display: flex; gap: 20px; flex: 0 0 auto; }
/* 100cqw is the viewport's CONTENT box, which already excludes the peek
   padding JS sets on the right — subtracting the peek again here (as this
   used to) left a second, invisible gutter, so the row visibly stopped
   ~100px short of the screen edge. */
.review-card { position: relative; flex: 0 0 calc((100cqw - (var(--per-page) - 1) * 20px) / var(--per-page)); display: flex; flex-direction: column; height: 262px; background: var(--white); color: var(--ink); border-radius: 16px; box-shadow: 0 16px 34px rgba(0,0,0,.28); padding: 26px 24px 24px; overflow: hidden; transition: transform .2s ease, box-shadow .2s ease; }
.review-card::before { content: ""; position: absolute; top: 0; left: 0; right: 0; height: 5px; background: var(--yellow); }
.review-card:not([aria-hidden]) { cursor: default; }
.review-card.is-clamped { cursor: pointer; }
/* Netflix scales posters up on hover because a poster is an image — doing
   that to a text card reflows the paragraph and moves the line-clamp mid
   read. A small lift reads as "interactive" without touching layout. */
.review-card:hover, .review-card:focus-visible { transform: translateY(-6px); box-shadow: 0 26px 52px rgba(0,0,0,.38); }
.review-card:focus-visible { outline: 2px solid var(--yellow); outline-offset: 2px; }
.review-card-head { display: flex; align-items: flex-start; justify-content: space-between; gap: 12px; margin-bottom: 14px; }
.review-card-head .google-logo { font-size: 16px; }
.review-card-stars { display: flex; gap: 3px; margin-bottom: 14px; flex: 0 0 auto; }
.review-card blockquote { margin: 0; color: #22314a; font-size: 15px; font-weight: 500; line-height: 1.65; overflow: hidden; display: -webkit-box; -webkit-line-clamp: 4; -webkit-box-orient: vertical; }
.review-card-link { margin-top: auto; padding-top: 12px; display: inline-block; color: var(--blue); font-size: 12px; font-weight: 800; }
.review-card-link:hover { text-decoration: underline; }

.review-author { display: flex; align-items: center; gap: 11px; min-width: 0; }
.review-avatar { width: 38px; height: 38px; border-radius: 50%; display: grid; place-items: center; color: white; font-weight: 900; flex: 0 0 auto; object-fit: cover; }
.review-author strong, .review-author small { display: block; overflow-wrap: anywhere; }
.review-author strong { font-size: 13px; color: var(--navy); }
.review-author small { margin-top: 2px; color: var(--slate); font-size: 10px; }

.star { position: relative; display: inline-block; width: 15px; height: 15px; }
.star-bg { position: absolute; inset: 0; color: rgba(16,24,40,.16); }
.star-fg { position: absolute; inset: 0; color: #eda100; }

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

/* < 640px: native momentum scroll + snap instead of transform paging — free
   inertia, works with screen readers, no gesture code to maintain. No
   arrows at this size (they're hidden via [hidden] set in JS). */
/* padding/margin pair: same reason as .review-viewport — overflow-x:auto
   also clips vertically, which would slice the lifted/focused card. */
.review-track-native { overflow-x: auto; scroll-snap-type: x mandatory; scrollbar-width: none; -ms-overflow-style: none; gap: 16px; padding: 14px 0; margin: -14px 0; }
.review-track-native::-webkit-scrollbar { display: none; }
.review-track-native .review-card { scroll-snap-align: start; flex-basis: min(300px, 82cqw); }

/* Full-review dialog, opened when a card's text is clamped */
.review-dialog { max-width: 520px; width: calc(100% - 48px); padding: 28px; border: 0; border-radius: 16px; background: var(--white); color: var(--ink); box-shadow: 0 30px 70px rgba(0,0,0,.45); }
.review-dialog::backdrop { background: rgba(5,10,20,.6); }
.review-dialog-close { position: absolute; top: 16px; right: 16px; width: 34px; height: 34px; display: grid; place-items: center; border: 1px solid rgba(16,24,40,.2); border-radius: 50%; background: transparent; color: var(--navy); cursor: pointer; }
.review-dialog-close:hover { background: var(--yellow); color: var(--navy); border-color: var(--yellow); }
.review-dialog-head { display: flex; align-items: flex-start; justify-content: space-between; gap: 12px; margin-bottom: 14px; padding-right: 40px; }
.review-dialog [data-slot="stars"] { margin-bottom: 14px; }
.review-dialog p { margin: 0; color: #22314a; font-size: 15px; line-height: 1.7; overflow-wrap: anywhere; }
.review-dialog .review-card-link { margin-top: 18px; }

.section { padding: 118px 0; }
.section-heading h2, .location-copy h2, .faq-heading h2 { font-size: clamp(43px, 5vw, 68px); color: var(--navy); }
.split-heading { display: grid; grid-template-columns: 1.25fr .75fr; gap: 100px; align-items: end; }
.split-heading > p { max-width: 430px; margin: 0 0 5px; color: var(--slate); font-size: 18px; line-height: 1.65; }
.services-grid { display: grid; grid-template-columns: repeat(3, 1fr); gap: 18px; margin-top: 58px; }
.service-card { display: block; position: relative; min-height: 340px; padding: 31px 30px; border: 1px solid var(--line); background: white; cursor: pointer; overflow: hidden; transition: transform .25s ease, box-shadow .25s ease, border-color .25s ease; }
.service-card::after { content: ""; position: absolute; left: 0; right: 100%; bottom: 0; height: 5px; background: var(--yellow); transition: right .25s ease; }
.service-card:hover, .service-card:focus-visible { transform: translateY(-7px); border-color: transparent; box-shadow: 0 20px 50px rgba(7,24,45,.11); }
.service-card:hover::after, .service-card:focus-visible::after { right: 0; }
.service-card:focus-visible { outline: 2px solid var(--yellow); outline-offset: 2px; }
.service-top { display: flex; align-items: flex-start; justify-content: space-between; }
.service-icon { width: 56px; height: 56px; display: grid; place-items: center; background: var(--navy); color: var(--yellow); }
.service-number { color: #c3ccd5; font-family: "Arial Black", Arial, sans-serif; font-size: 18px; }
.service-card h3 { margin: 50px 0 13px; color: var(--navy); font-size: 24px; letter-spacing: -.035em; }
.service-card p { margin: 0; color: var(--slate); line-height: 1.7; }
.service-accent { position: absolute; left: 30px; bottom: 29px; display: inline-flex; align-items: center; gap: 8px; color: var(--blue); font-size: 12px; font-weight: 900; text-transform: uppercase; letter-spacing: .06em; }

.care-section { display: grid; grid-template-columns: 1fr 1fr; min-height: 760px; background: var(--navy); }
.care-image { position: relative; min-height: 680px; overflow: hidden; }
.care-image img { width: 100%; height: 100%; object-fit: cover; object-position: center; }
.care-image::after { content: ""; position: absolute; inset: 0; background: linear-gradient(180deg, transparent 55%, rgba(5,21,42,.42)); }
.image-stamp { position: absolute; z-index: 2; right: -1px; bottom: 0; width: 178px; height: 178px; display: flex; flex-direction: column; justify-content: center; gap: 12px; padding: 25px; background: var(--yellow); color: var(--navy); clip-path: polygon(22% 0, 100% 0, 100% 100%, 0 100%, 0 22%); }
.image-stamp strong { font-size: 17px; line-height: 1.15; }
.care-copy { display: flex; flex-direction: column; align-items: flex-start; justify-content: center; padding: 85px max(7vw, 70px); color: white; }
.care-copy h2 { font-size: clamp(52px, 6vw, 80px); }
.care-lead { max-width: 560px; margin: 26px 0 0; color: #c9d6e3; font-size: 18px; line-height: 1.7; }
.benefit-list { width: 100%; margin: 35px 0; padding: 0; list-style: none; }
.benefit-list li { display: flex; align-items: flex-start; gap: 16px; padding: 17px 0; border-top: 1px solid rgba(255,255,255,.13); }
.benefit-list li:last-child { border-bottom: 1px solid rgba(255,255,255,.13); }
.benefit-list li > span { flex: 0 0 auto; width: 27px; height: 27px; display: grid; place-items: center; border-radius: 50%; background: var(--yellow); color: var(--navy); }
.benefit-list .icon { width: 16px; height: 16px; }
.benefit-list strong { display: block; font-size: 16px; }
.benefit-list p { margin: 3px 0 0; color: #9fb0c2; font-size: 13px; }

/* Light background on purpose: this sits directly under .care-section,
   which is navy — two full-width navy bands back to back read as one flat
   block. The diamond icons stay navy-with-yellow (same treatment the
   service cards use on white), so the section still feels part of the
   same visual language. */

.location-section { display: grid; grid-template-columns: 1.18fr .82fr; min-height: 650px; }
.map-wrap { position: relative; min-height: 620px; background: #dce4ea; overflow: hidden; }
.map-wrap iframe { width: 100%; height: 100%; min-height: 650px; border: 0; filter: saturate(.55) contrast(1.04); }
.map-label { position: absolute; left: 34px; bottom: 34px; display: flex; align-items: center; gap: 13px; padding: 14px 17px; background: var(--navy); color: white; box-shadow: 0 12px 30px rgba(7,24,45,.22); }
.map-label > span { width: 42px; height: 42px; display: grid; place-items: center; background: var(--yellow); color: var(--navy); }
.map-label small, .map-label strong { display: block; }
.map-label small { color: #aebed0; font-size: 10px; }
.map-label strong { font-size: 14px; }
.location-copy { display: flex; flex-direction: column; align-items: flex-start; justify-content: center; padding: 75px max(6vw, 64px); }
.location-copy > p:not(.eyebrow) { max-width: 520px; margin: 26px 0 0; color: var(--slate); font-size: 17px; line-height: 1.7; }
.areas { display: flex; flex-wrap: wrap; gap: 8px; margin: 27px 0 32px; }
.areas span { padding: 8px 12px; background: var(--cloud); border: 1px solid #dbe2e8; color: #415167; font-size: 11px; font-weight: 800; }
.map-button { min-height: 52px; padding: 0 20px; background: var(--navy); color: white; font-size: 13px; }
.map-button:hover { background: var(--blue); }
.location-note { margin-top: 14px; color: #8b96a4; font-size: 10px; }

.faq-section { padding: 118px 0; border-top: 1px solid var(--line); }
.faq-grid { display: grid; grid-template-columns: .78fr 1.22fr; gap: 100px; }
.faq-heading { position: sticky; top: 130px; align-self: start; }
.faq-heading h2 { font-size: clamp(42px, 4.7vw, 62px); }
.faq-heading > p:not(.eyebrow) { max-width: 380px; color: var(--slate); font-size: 17px; }
.faq-heading > a { display: inline-flex; align-items: center; gap: 8px; margin-top: 25px; color: var(--blue); font-weight: 800; font-size: 13px; }
.faq-list { border-top: 1px solid #cfd7df; }
.faq-list details { border-bottom: 1px solid #cfd7df; }
.faq-list summary { display: flex; align-items: center; justify-content: space-between; gap: 25px; padding: 25px 2px; color: var(--navy); font-size: 17px; font-weight: 800; cursor: pointer; list-style: none; }
.faq-list summary::-webkit-details-marker { display: none; }
.faq-list summary .icon { flex: 0 0 auto; width: 19px; height: 19px; transition: transform .2s ease; }
.faq-list details[open] summary .icon { transform: rotate(180deg); }
.faq-list details p { margin: -8px 0 24px; padding-right: 45px; color: var(--slate); line-height: 1.7; }

.final-cta { position: relative; padding: 77px 0; background: var(--blue); color: white; overflow: hidden; }
.final-cta::before { content: ""; position: absolute; right: -90px; top: -150px; width: 420px; height: 420px; border: 70px solid rgba(255,255,255,.05); border-radius: 50%; }
.final-cta-inner { position: relative; z-index: 1; display: flex; align-items: center; justify-content: space-between; gap: 50px; }
.final-cta .eyebrow { margin-bottom: 10px; }
.final-cta h2 { color: white; font-size: clamp(46px, 5vw, 68px); }
.final-cta p:not(.eyebrow) { margin: 13px 0 0; color: #dce9fa; font-size: 17px; }
.final-actions { display: flex; gap: 12px; flex-wrap: wrap; }

.site-footer { padding: 75px 0 25px; background: #041121; color: #aebdcd; }
.footer-grid { display: grid; grid-template-columns: 1.6fr .7fr .9fr 1fr; gap: 55px; }
.brand-light strong { color: white; }
.footer-grid > div:first-child > p { max-width: 300px; margin: 20px 0 0; font-size: 13px; line-height: 1.7; }
.footer-grid > div { display: flex; flex-direction: column; align-items: flex-start; gap: 10px; font-size: 13px; }
.footer-grid > div > strong { margin-bottom: 6px; color: white; font-size: 12px; text-transform: uppercase; letter-spacing: .1em; }
.footer-grid a:not(.brand):hover { color: var(--yellow); }
.footer-grid > div:last-child p { margin: 0; }
.footer-cta { margin-top: 7px; padding-bottom: 5px; border-bottom: 2px solid var(--yellow); color: white; }
.footer-bottom { display: flex; justify-content: space-between; gap: 30px; margin-top: 60px; padding-top: 20px; border-top: 1px solid rgba(255,255,255,.1); font-size: 10px; }
.mobile-actions { display: none; }

@media (max-width: 1050px) {
  .main-nav { gap: 17px; }
  .main-nav a { font-size: 12px; }
  .hero-copy { width: 65%; }
  .hero-note { display: none; }
  .care-copy { padding: 70px 50px; }
  .location-copy { padding: 65px 45px; }
}

@media (max-width: 860px) {
  .page-width { width: min(100% - 34px, 720px); }
  .utility-rating { display: none !important; }
  .nav-inner { min-height: 70px; }
  .main-nav { position: absolute; top: 70px; left: 0; right: 0; display: none; margin: 0; padding: 18px 22px 25px; flex-direction: column; align-items: stretch; gap: 0; background: white; border-top: 1px solid var(--line); box-shadow: 0 18px 35px rgba(7,24,45,.12); }
  .main-nav.open { display: flex; }
  .main-nav a { padding: 13px 4px; font-size: 14px; border-bottom: 1px solid #ebeff2; }
  .main-nav a::after { display: none; }
  .nav-cta { margin-left: auto; }
  .menu-button { display: block; margin-left: 0; }
  .hero, .hero-inner { min-height: 610px; }
  .hero-inner { padding-top: 58px; padding-bottom: 92px; }
  .hero-copy { width: 86%; }
  .hero h1 { font-size: clamp(64px, 12vw, 92px); }
  .stats-section { padding-bottom: 24px; }
  .stats-shell { padding: 27px 24px 24px; }
  .stats-grid { min-height: 125px; }
  .quote-section { padding-top: 22px; }
  .quote-card, .quote-success { width: 100%; min-height: 0; }
  .review-carousel { padding: 44px 0; }
  .review-carousel-inner { flex-direction: column; align-items: flex-start; gap: 28px; padding: 0 0 0 24px; }
  /* The row still bleeds off the right edge here; only the text panel is inset. */
  .review-intro { flex: 0 0 auto; width: 100%; padding-right: 24px; }
  /* align-items:flex-start (for the intro block) makes flex items shrink to
     their own content width on the cross axis by default — without this,
     the viewport shrinks toward 0 since its content (the track) has no
     intrinsic width of its own until the cards are already sized. */
  .review-viewport { width: 100%; align-self: stretch; }
  .section { padding: 90px 0; }
  .split-heading { grid-template-columns: 1fr; gap: 25px; }
  .services-grid { grid-template-columns: 1fr; }
  .service-card { min-height: 280px; }
  .service-card h3 { margin-top: 32px; }
  .care-section { grid-template-columns: 1fr; }
  .care-image { min-height: 560px; }
  .care-copy { padding: 82px max(8vw, 32px); }
  .location-section { grid-template-columns: 1fr; }
  .map-wrap, .map-wrap iframe { min-height: 500px; }
  .location-copy { padding: 85px max(8vw, 32px); }
  .faq-grid { grid-template-columns: 1fr; gap: 55px; }
  .faq-heading { position: static; }
  .final-cta-inner { align-items: flex-start; flex-direction: column; }
  .footer-grid { grid-template-columns: 1.4fr 1fr 1fr; }
  .footer-grid > div:last-child { grid-column: 1 / -1; }
}

@media (max-width: 600px) {
  body { padding-bottom: 62px; }
  .page-width { width: calc(100% - 28px); }
  .utility-inner { min-height: 32px; justify-content: center; }
  .utility-inner > span:first-child { display: none; }
  .utility-inner .utility-email { display: none; }
  .site-header { top: 0; padding-top: env(safe-area-inset-top, 0px); }
  .nav-inner { min-height: 66px; gap: 8px; }
  .brand-mark { width: 39px; height: 39px; }
  .brand strong { font-size: 14px; }
  .brand small { font-size: 8px; }
  .nav-cta { display: none; }
  .menu-button { margin-left: auto; }
  .main-nav { top: calc(66px + env(safe-area-inset-top, 0px)); }
  .hero, .hero-inner { min-height: 630px; }
  .hero-photo { background-position: 62% center; }
  .hero-photo::after { display: none; }
  .hero-stripe { right: -160px; top: 48px; }
  .hero-inner { align-items: flex-end; padding: 90px 0 78px; }
  .hero-copy { width: 100%; }
  .hero h1 { font-size: clamp(55px, 18vw, 78px); }
  .hero-lead { margin-top: 22px; font-size: 17px; }
  .hero-actions { margin-top: 27px; }
  .hero-actions .primary-button, .hero-actions .secondary-button { width: 100%; }
  .hero-trust { display: grid; grid-template-columns: 1fr 1fr; gap: 10px; margin-top: 22px; }
  .hero-trust span:last-child { grid-column: 1 / -1; }
  .quote-section { padding: 11px 0 0; }
  .quote-card, .quote-success { padding: 25px 20px 19px; }
  .quote-card-head { align-items: center; }
  .quote-card h2, .quote-success h2 { font-size: 22px; }
  .form-grid { grid-template-columns: 1fr; }
  .form-grid input, .form-grid select, .form-grid textarea { font-size: 16px; }
  .form-grid .wide, .form-actions { grid-column: 1; }
  .form-actions { flex-direction: column-reverse; }
  .form-actions .primary-button { width: 100%; }
  .stats-section { padding: 0 0 22px; }
  .stats-shell { padding: 24px 8px 21px; }
  .stats-grid { min-height: 106px; grid-template-columns: repeat(3, 1fr); }
  .stat { min-width: 0; padding: 0 8px; text-align: center; }
  .stat:first-child { padding-left: 8px; }
  .stat + .stat::before { left: 0; top: 3px; bottom: 3px; width: 1px; height: auto; background: rgba(255,255,255,.2); }
  .stat strong { font-size: clamp(36px, 10.5vw, 46px); white-space: nowrap; }
  .stat span { max-width: none; margin-top: 10px; color: #dbe6f0; font-size: 8px; line-height: 1.4; text-align: center; letter-spacing: .08em; }
  .review-carousel { padding: 36px 0; }
  .review-carousel-inner { padding: 0 0 0 20px; gap: 22px; }
  .review-intro { padding-right: 20px; }
  .review-intro h3 { font-size: 22px; }
  .review-intro .carousel-controls button { width: 38px; height: 38px; }
  .review-track-native { gap: 12px; }
  .review-card { padding: 22px 20px 20px; }
  .review-card blockquote { font-size: 14px; }
  .section { padding: 76px 0; }
  .section-heading h2, .location-copy h2, .faq-heading h2 { font-size: 42px; }
  .split-heading > p { font-size: 16px; }
  .services-grid { margin-top: 38px; }
  .service-card { min-height: 300px; padding: 25px; }
  .service-accent { left: 25px; bottom: 24px; }
  .care-image { min-height: 420px; }
  .image-stamp { width: 135px; height: 135px; padding: 20px; }
  .image-stamp strong { font-size: 14px; }
  .care-copy { padding: 70px 24px; }
  .care-copy h2 { font-size: 50px; }
  .care-lead { font-size: 16px; }
  .map-wrap, .map-wrap iframe { min-height: 400px; }
  .map-label { left: 16px; bottom: 16px; }
  .location-copy { padding: 70px 22px; }
  .faq-section { padding: 78px 0; }
  .faq-list summary { font-size: 15px; }
  .final-cta { padding: 65px 0; }
  .final-actions, .final-actions a { width: 100%; }
  .footer-grid { grid-template-columns: 1fr 1fr; gap: 42px 25px; }
  .footer-grid > div:first-child, .footer-grid > div:last-child { grid-column: 1 / -1; }
  .footer-bottom { align-items: flex-start; flex-direction: column; }
  .mobile-actions { position: fixed; z-index: 80; left: 0; right: 0; bottom: 0; height: 62px; display: grid; grid-template-columns: 1fr 1.3fr; background: white; box-shadow: 0 -8px 25px rgba(7,24,45,.14); }
  .mobile-actions a { display: flex; align-items: center; justify-content: center; gap: 8px; color: var(--navy); font-size: 13px; font-weight: 900; }
  .mobile-actions a:last-child { background: var(--yellow); }
  .mobile-actions .icon { width: 18px; height: 18px; }
}

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