/* AutoAssures.com, redesign 2026-10: "the glovebox guide" (ART-DIRECTION.md + design-tokens.css in
   _tools/site-design/briefs/redesign-2026-10/autoassures). Petrol and mist, Fira Sans with DM Mono figures and labels,
   one two-part button, one spec card, dot grids, panels that straddle section edges. Loads after Bootstrap 5.3.
   This file: fonts, tokens, base, shared components, both frames (header, strip, menus, footer) and the home page.
   Inner pages: v1-pages.css and tools.css (loaded after this file). */

/* ---------- fonts (OFL, self-hosted latin subsets) ---------- */
@font-face{font-family:"Fira Sans";src:url("../fonts/fira-sans-400.woff2") format("woff2");font-weight:400;font-style:normal;font-display:swap}
@font-face{font-family:"Fira Sans";src:url("../fonts/fira-sans-400-italic.woff2") format("woff2");font-weight:400;font-style:italic;font-display:swap}
@font-face{font-family:"Fira Sans";src:url("../fonts/fira-sans-600.woff2") format("woff2");font-weight:600;font-style:normal;font-display:swap}
@font-face{font-family:"Fira Sans";src:url("../fonts/fira-sans-700.woff2") format("woff2");font-weight:700;font-style:normal;font-display:swap}
@font-face{font-family:"Fira Sans";src:url("../fonts/fira-sans-800.woff2") format("woff2");font-weight:800;font-style:normal;font-display:swap}
@font-face{font-family:"DM Mono";src:url("../fonts/dm-mono-500.woff2") format("woff2");font-weight:500;font-style:normal;font-display:swap}

/* ---------- tokens ---------- */
:root{
  --aa-petrol:#0F4C5C; --aa-deep:#0B3B47; --aa-mist:#DCEBEA; --aa-ink:#12262C; --aa-white:#fff;
  --aa-muted:#4A5E63; --aa-line:#7C9196; --aa-line-soft:#C9DAD8; --aa-line-mist:#6A7F84;
  --aa-warn-ink:#8A5300; --aa-warn-bg:#FFF1D6;
  --aa-sans:"Fira Sans",system-ui,-apple-system,"Segoe UI",Roboto,Arial,sans-serif;
  --aa-mono:"DM Mono",ui-monospace,SFMono-Regular,Menlo,Consolas,monospace;
  --aa-dots:radial-gradient(circle,rgba(15,76,92,.18) 1.2px,transparent 1.4px) 0 0/16px 16px;
  --aa-wash:rgba(220,235,234,.72);
  --aa-drop:0 18px 40px -20px rgba(15,76,92,.45);
  --aa-hdr:96px;
  --aa-gap:clamp(72px,8vw,112px);
  /* names the inner pages, the tool scripts (--brand, --brand-tint, --brand-soft) and CompareQuotes (--display) use */
  --brand:#0F4C5C; --brand-dark:#0B3B47; --brand-tint:#DCEBEA; --brand-soft:#C9DAD8;
  --ink:#12262C; --ink-2:#2B4047; --muted:#4A5E63; --line:#C9DAD8;
  --bg:#fff; --bg-alt:#DCEBEA; --bg-dark:#0B3B47; --dark-2:#0F4C5C; --on-dark:#DCEBEA;
  --ok:#0F4C5C; --warn:#8A5300;
  --display:"Fira Sans",system-ui,-apple-system,"Segoe UI",Arial,sans-serif;
  --body:"Fira Sans",system-ui,-apple-system,"Segoe UI",Arial,sans-serif;
  --r:10px; --r-sm:6px; --shadow:0 18px 40px -20px rgba(15,76,92,.45);
  --bs-body-font-family:var(--aa-sans); --bs-body-font-size:1.09375rem; --bs-body-line-height:1.6; --bs-body-color:#12262C;
  --bs-link-color:#0F4C5C; --bs-link-color-rgb:15,76,92; --bs-link-hover-color:#0B3B47; --bs-link-hover-color-rgb:11,59,71;
  --bs-border-color:#C9DAD8; --bs-emphasis-color:#12262C;
}

/* ---------- base ---------- */
html{-webkit-text-size-adjust:100%}
body{background:#fff;color:var(--aa-ink);font:400 17.5px/1.6 var(--aa-sans);-webkit-font-smoothing:antialiased;-moz-osx-font-smoothing:grayscale;font-kerning:normal}
h1,h2,h3,h4,h5{font-family:var(--aa-sans);color:var(--aa-ink);text-wrap:balance;margin:0 0 .5em}
h1,h2{font-weight:800;letter-spacing:-.015em;line-height:1.05}
h1{font-size:clamp(2.125rem,1.45rem + 2.2vw,3rem)}
h2{font-size:clamp(1.875rem,1.5rem + 1.05vw,2.5rem)}
h3{font-size:clamp(1.25rem,1.18rem + .25vw,1.375rem);font-weight:700;letter-spacing:-.005em;line-height:1.2}
h4{font-size:1.1875rem;font-weight:700;line-height:1.25}
h5{font-size:1rem;font-weight:700}
p{margin:0 0 1rem;text-wrap:pretty}
img{max-width:100%;height:auto}
a{color:var(--aa-petrol);text-decoration-thickness:2px;text-underline-offset:4px}
a:hover{color:var(--aa-deep)}
:focus-visible{outline:3px solid var(--aa-ink);outline-offset:3px}
::selection{background:var(--aa-mist);color:var(--aa-ink)}
.skip-link{position:absolute;left:-9999px;top:0;background:var(--aa-ink);color:#fff;padding:.7rem 1rem;z-index:2000;font-weight:600}
.skip-link:focus{left:1rem;top:1rem;color:#fff}
.container{--bs-gutter-x:3rem}
@media (max-width:767.98px){.container{--bs-gutter-x:2rem}}
svg.ic{width:1.25em;height:1.25em;flex:none;vertical-align:-.2em}   /* second-design line icons: they have no size of their own */
.ti{width:20px;height:20px;flex:none}
.lede{font-size:1.15rem;color:var(--ink-2);max-width:62ch}
.eyebrow{display:inline-block;font:500 .8125rem/1.2 var(--aa-mono);letter-spacing:.08em;text-transform:uppercase;color:var(--aa-petrol);margin-bottom:.8rem}
.link-more{display:inline-flex;align-items:center;gap:.4rem;font:600 1rem var(--aa-sans);color:var(--aa-petrol);text-decoration:underline;text-decoration-thickness:2px;text-underline-offset:5px}
.link-more svg{width:16px;height:16px;fill:currentColor}
.link-more:hover{color:var(--aa-deep)}

/* ---------- the two-part button (one button style for the whole site) ---------- */
.aa-btn{display:inline-flex;align-items:stretch;gap:2px;min-height:52px;padding:0;margin:0;border:0;border-radius:4px;background:none;color:#fff;font:600 17px/1.2 var(--aa-sans);text-decoration:none;cursor:pointer;vertical-align:middle;text-align:left}
.aa-btn>span{display:flex;align-items:center;flex:1 1 auto;padding:.7rem 1.375rem;background:var(--aa-petrol);color:#fff;border-radius:4px 0 0 4px;transition:background-color .15s}
.aa-btn>i{display:grid;place-items:center;width:52px;flex:none;background:var(--aa-deep);color:var(--aa-mist);border-radius:0 4px 4px 0;font-style:normal;transition:background-color .15s,color .15s}
.aa-btn>i .ti,.aa-btn>i svg{width:22px;height:22px;transition:transform .2s}
.aa-btn:hover{color:#fff}
.aa-btn:hover>i,.aa-btn:focus-visible>i{background:var(--aa-mist);color:var(--aa-petrol)}
.aa-btn:hover>i .ti,.aa-btn:hover>i svg{transform:translateX(3px)}
.aa-btn:active>span{background:var(--aa-deep)}
.aa-btn:disabled{background:var(--aa-petrol);color:#fff;padding:0 1.375rem;align-items:center;cursor:progress;opacity:.9}
.aa-btn.mist>span{background:var(--aa-mist);color:var(--aa-petrol)}
.aa-btn.mist>i{background:var(--aa-line-soft);color:var(--aa-petrol)}
.aa-btn.mist:hover>i{background:var(--aa-petrol);color:var(--aa-mist)}
.aa-btn.full{display:flex;width:100%}

/* Bootstrap buttons of the inner pages: same family (petrol, radius 4, 52 px; a trailing arrow becomes the arrow cell) */
.btn{--bs-btn-font-family:var(--aa-sans);--bs-btn-font-weight:600;--bs-btn-font-size:1.0625rem;--bs-btn-border-radius:4px;--bs-btn-padding-x:1.375rem;--bs-btn-padding-y:.7rem;--bs-btn-border-width:0;--bs-btn-focus-box-shadow:none;display:inline-flex;align-items:center;justify-content:center;gap:.6rem;line-height:1.2;min-height:52px}
.btn svg{width:18px;height:18px;fill:currentColor;flex:none}
.btn-lg,.btn-sm{--bs-btn-border-radius:4px}
.btn-sm{--bs-btn-padding-x:1rem;--bs-btn-font-size:.95rem;min-height:44px}
.btn-brand{--bs-btn-bg:#0F4C5C;--bs-btn-color:#fff;--bs-btn-border-color:#0F4C5C;--bs-btn-hover-bg:#0B3B47;--bs-btn-hover-border-color:#0B3B47;--bs-btn-hover-color:#fff;--bs-btn-active-bg:#0B3B47;--bs-btn-active-border-color:#0B3B47;--bs-btn-active-color:#fff;--bs-btn-disabled-bg:#0F4C5C;--bs-btn-disabled-color:#fff}
.btn-brand:has(>svg:last-child){padding-block:0;padding-right:0;overflow:hidden;align-items:stretch;line-height:52px}
.btn-brand:has(>svg:last-child)>svg:last-child{box-sizing:border-box;width:52px;height:auto;align-self:stretch;padding:0 15px;margin-left:.75rem;background:#0B3B47;box-shadow:-2px 0 0 rgba(255,255,255,.22)}
.btn-brand:has(>svg:last-child):hover>svg:last-child{background:#DCEBEA;color:#0F4C5C}
.btn-outline-brand{--bs-btn-bg:#DCEBEA;--bs-btn-color:#0F4C5C;--bs-btn-border-color:#DCEBEA;--bs-btn-hover-bg:#C9DAD8;--bs-btn-hover-color:#0B3B47;--bs-btn-hover-border-color:#C9DAD8;--bs-btn-active-bg:#C9DAD8;--bs-btn-active-color:#0B3B47;--bs-btn-active-border-color:#C9DAD8}
.btn-white{--bs-btn-bg:#fff;--bs-btn-color:#0F4C5C;--bs-btn-border-color:#fff;--bs-btn-hover-bg:#DCEBEA;--bs-btn-hover-color:#0B3B47;--bs-btn-hover-border-color:#DCEBEA}
.btn-ghost-light{--bs-btn-color:#fff;--bs-btn-border-color:rgba(255,255,255,.55);--bs-btn-border-width:1px;--bs-btn-hover-bg:rgba(255,255,255,.12);--bs-btn-hover-color:#fff;--bs-btn-hover-border-color:#fff}
.btn:focus-visible{outline:3px solid var(--aa-ink);outline-offset:3px;box-shadow:none}

/* ---------- the spec card label (one card style: white, radius 10, a DM Mono label + index). Since the final cross-site
   fix (2026-10-14) the label is a small index tab sticking up from the card's top edge: see "INDEX TABS" at the end of
   v2-pages.css, the last stylesheet loaded ---------- */
.sc-strip{display:flex;align-items:center;justify-content:space-between;gap:12px;min-height:36px;padding:0 14px;background:var(--aa-mist);color:var(--aa-petrol);font:500 13px/1.2 var(--aa-mono);letter-spacing:.08em;text-transform:uppercase;transition:background-color .15s,color .15s}
.sc-strip .sc-n{color:var(--aa-muted);font-variant-numeric:tabular-nums;letter-spacing:.04em;transition:color .15s}
.sc-strip h2,.sc-strip h3,.sc-strip h4{font:inherit;letter-spacing:inherit;text-transform:inherit;color:inherit;margin:0}

/* ---------- forms (shared controls; the home worksheet restyles them below) ---------- */
.form-label{font:500 12px/1.3 var(--aa-mono);letter-spacing:.08em;text-transform:uppercase;color:var(--aa-petrol);margin-bottom:.45rem}
.form-label .form-text{font:400 13px var(--aa-sans);letter-spacing:0;text-transform:none;color:var(--aa-muted)}
.form-text{color:var(--aa-muted)}
.form-control,.form-select{border-color:#7C9196;border-radius:4px;padding:.65rem .85rem;font-size:1rem;color:var(--aa-ink);min-height:48px}
.form-select{--bs-form-select-bg-img:url("data:image/svg+xml,%3csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%230F4C5C' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3e%3cpath d='M6 9l6 6l6 -6'/%3e%3c/svg%3e");background-size:18px 18px}
.form-control:focus,.form-select:focus{border-color:var(--aa-petrol);box-shadow:0 0 0 3px rgba(15,76,92,.22)}
.input-group-text{background:var(--aa-mist);border-color:#7C9196;border-radius:4px;color:var(--aa-petrol);font-family:var(--aa-mono)}
.form-check-input{border:2px solid var(--aa-petrol);border-radius:3px}
.form-check-input:checked{background-color:var(--aa-petrol);border-color:var(--aa-petrol)}
.form-check-input:focus{box-shadow:0 0 0 3px rgba(15,76,92,.25);border-color:var(--aa-petrol)}
.consent{display:block;font-size:.93rem;line-height:1.5;color:var(--ink-2);background:#fff;border:1px solid var(--aa-line-soft);border-radius:6px;padding:.9rem 1rem .9rem 2.8rem;margin:0;cursor:pointer}
.consent .form-check-input{float:left;margin:.15rem 0 0 -1.8rem;width:1.2em;height:1.2em}
.invalid-feedback{color:var(--aa-warn-ink);font:500 12.5px/1.4 var(--aa-mono)}
.was-validated .form-control:invalid,.was-validated .form-select:invalid,.form-control.is-invalid{border-color:var(--aa-warn-ink);background-image:none}
.was-validated .form-control:valid,.was-validated .form-select:valid{border-color:var(--aa-petrol);background-image:none}
.was-validated .form-check-input:invalid{border-color:var(--aa-warn-ink)}
.was-validated .form-check-input:invalid~.form-check-label,.was-validated .form-check-input:valid~.form-check-label{color:inherit}
.form-success{display:none;background:#fff;border:1px solid var(--aa-line-soft);border-left:4px solid var(--aa-petrol);color:var(--aa-ink);border-radius:6px;padding:1.4rem 1.5rem}
.form-success h3{color:var(--aa-ink);margin:0 0 .4rem}
.form-error{background:var(--aa-warn-bg);border:1px solid #E7C98F;color:var(--aa-warn-ink);border-radius:6px;padding:.75rem 1rem;font-size:.97rem}

/* =====================================================================================================================
   FRAME 1: the one header ("descriptor nav", SiteHeader) + the mist strip under it, the same on every page of both
   designs since the final cross-site fix (2026-10-14): the original AutoAssures menu, its two menus as wide panels
   ===================================================================================================================== */
.aa-hdr{position:sticky;top:0;z-index:1030;background:#fff;border-bottom:1px solid var(--aa-line-soft)}
.aa-hdr .navbar{padding:0;position:static}
.aa-hdr-row{position:relative;display:flex;align-items:stretch;flex-wrap:nowrap;min-height:var(--aa-hdr)}
.aa-logo{display:flex;align-items:center;margin:0 1.375rem 0 0;padding:0;flex:none}
.aa-logo img{display:block;height:40px;width:auto}
.aa-logo:focus-visible{outline-offset:6px}

/* top-level links: label + DM Mono descriptor, a 3 px petrol bar hangs from the top edge on the current page */
.aa-nav{display:flex;align-items:stretch;list-style:none;margin:0;padding:0}
.aa-nav .nav-link{position:relative;display:flex;flex-direction:column;justify-content:center;align-items:flex-start;gap:5px;height:100%;padding:0 .65rem!important;margin:0;background:none;border:0;border-radius:0;color:var(--aa-ink);text-decoration:none;text-align:left;cursor:pointer;white-space:nowrap}
.aa-nav .nav-link::before{content:"";position:absolute;left:.65rem;right:.65rem;top:0;height:3px;background:transparent;transition:background-color .15s}
.aa-nav .nav-link:hover::before,.aa-dd.show>.nav-link::before{background:var(--aa-line-soft)}
.aa-nav .nav-link.active::before{background:var(--aa-petrol)}
.aa-nav .nl{display:inline-flex;align-items:center;gap:4px;font:600 16px/1.15 var(--aa-sans);color:var(--aa-ink);transition:color .15s}
.aa-nav .nd,.aa-hdr-tel .nd{font:500 12px/1 var(--aa-mono);letter-spacing:.02em;color:var(--aa-muted)}
.aa-nav .nav-link:hover .nl,.aa-nav .nav-link.active .nl{color:var(--aa-petrol)}
.aa-nav .nav-link:focus-visible{outline:3px solid var(--aa-ink);outline-offset:-3px}
.aa-nav .ti.chev{width:15px;height:15px;color:var(--aa-muted);transition:transform .2s}
.aa-dd.show .ti.chev{transform:rotate(180deg)}
.aa-nav .dropdown-toggle::after{display:none}

/* right end: phone (descriptor + DM Mono number) and the two-part button */
.aa-hdr-cta{display:flex;align-items:center;gap:1.125rem;margin-left:auto;flex:none}
.aa-hdr-cta .aa-btn>span{padding-inline:1.125rem}
.aa-hdr-tel{display:flex;flex-direction:column;gap:5px;text-decoration:none;color:var(--aa-ink)}
.aa-hdr-tel .tn{font:500 16.5px/1 var(--aa-mono);letter-spacing:-.01em;color:var(--aa-ink);font-variant-numeric:tabular-nums}
.aa-hdr-tel:hover .tn{color:var(--aa-petrol);text-decoration:underline;text-decoration-thickness:2px;text-underline-offset:4px}
.aa-hdr-note{display:none}

/* the two menus: white panels under the header; each group headed by a Fira caption on a petrol rule (no title bars) */
.aa-mm{--bs-dropdown-padding-y:0;margin:0;padding:0;border:0;border-radius:0;background:#fff;color:var(--aa-ink)}
.mm-cap{display:flex;justify-content:space-between;align-items:baseline;gap:12px;margin:0 0 8px;padding:0 0 9px;border-bottom:2px solid var(--aa-petrol);font:700 15.5px/1.2 var(--aa-sans);color:var(--aa-ink)}
.mm-n{font:500 12px/1 var(--aa-mono);letter-spacing:.02em;color:var(--aa-muted);white-space:nowrap}
.mm-list{list-style:none;margin:0;padding:0}
.mm-list.two{display:grid;grid-template-columns:minmax(0,1fr) minmax(0,1fr);column-gap:14px}
.aa-mm .dropdown-item{display:flex;align-items:flex-start;gap:12px;margin:0 -10px;padding:8px 10px;border-radius:6px;white-space:normal;font:400 15.5px/1.35 var(--aa-sans);color:var(--aa-ink);background:none;transition:background-color .15s,color .15s}
.aa-mm .dropdown-item:hover,.aa-mm .dropdown-item:focus{background:var(--aa-mist);color:var(--aa-petrol)}
.aa-mm .dropdown-item.active,.aa-mm .dropdown-item:active{background:var(--aa-mist);color:var(--aa-petrol);box-shadow:inset 3px 0 0 var(--aa-petrol)}
.aa-mm .dropdown-item:focus-visible{outline:3px solid var(--aa-ink);outline-offset:-3px}
.mm-item .mi-ic{flex:none;padding-top:2px;color:var(--aa-petrol)}
.mm-item .mi-ic svg.ic{width:20px;height:20px}
.mm-item strong{display:block;font:600 15.5px/1.3 var(--aa-sans)}
.mm-item small{display:block;margin-top:2px;font-size:13.5px;line-height:1.4;color:var(--aa-muted)}
.mm-topic{align-items:center!important}
.mm-topic svg.ic{width:18px;height:18px;color:var(--aa-petrol)}
.mm-sub{margin:10px 0 2px;font:500 11.5px/1.2 var(--aa-mono);letter-spacing:.08em;text-transform:uppercase;color:var(--aa-muted)}
/* the coverage guide: a dot-grid note at the head of the Coverage group */
.mm-promo{display:grid;justify-items:start;gap:4px;margin:4px 0 10px;padding:12px 16px 14px;border-radius:8px;background:var(--aa-mist) var(--aa-dots)}
.aa-mm .mm-promo .dropdown-item{display:grid;gap:3px;width:auto;margin:0;padding:0;background:none;box-shadow:none}
.aa-mm .mp-k{font:500 11.5px/1.3 var(--aa-mono);letter-spacing:.08em;text-transform:uppercase;color:var(--aa-petrol)}
.mp-go strong{font:700 16.5px/1.25 var(--aa-sans);color:var(--aa-ink);transition:color .15s}
.mp-go span{display:inline-flex;align-items:center;gap:6px;font:600 14.5px var(--aa-sans);color:var(--aa-petrol)}
.mp-go .ti{width:16px;height:16px;transition:transform .2s}
.aa-mm .mm-promo .dropdown-item:hover,.aa-mm .mm-promo .dropdown-item:focus{background:none}
.aa-mm .mp-k:hover{text-decoration:underline;text-decoration-thickness:1px;text-underline-offset:3px}
.aa-mm .mp-go:hover strong{color:var(--aa-petrol)}
.aa-mm .mp-go:hover .ti{transform:translateX(3px)}
.mm-list.mm-more{margin-top:6px;padding-top:6px;border-top:1px solid #E3EEED}
/* How It Works + Get Started: the request service at the foot of Tools & Resources */
.mm-foot{grid-column:1/-1;display:flex;align-items:center;justify-content:space-between;gap:14px 24px;margin-top:16px;padding:12px 12px 12px 16px;border-radius:8px;background:var(--aa-mist) var(--aa-dots)}
.aa-mm .mm-how{display:flex;align-items:baseline;gap:12px;width:auto;margin:0;padding:8px 10px}
.mm-how strong{font:600 16px/1.2 var(--aa-sans)}
.mm-how small{font:500 12px/1 var(--aa-mono);color:var(--aa-muted)}
.aa-mm .mm-go{display:inline-flex;align-items:stretch;gap:2px;width:auto;flex:none;min-height:48px;margin:0;padding:0;border-radius:4px;background:none!important;color:#fff;font:600 16px/1.2 var(--aa-sans)}
.mm-go>span{display:flex;align-items:center;padding:.6rem 1.1rem;background:var(--aa-petrol);border-radius:4px 0 0 4px}
.mm-go>i{display:grid;place-items:center;width:48px;background:var(--aa-deep);color:var(--aa-mist);border-radius:0 4px 4px 0;font-style:normal;transition:background-color .15s,color .15s}
.mm-go>i .ti{width:20px;height:20px}
.aa-mm .mm-go:hover,.aa-mm .mm-go:focus{color:#fff}
.mm-go:hover>i,.mm-go:focus-visible>i{background:var(--aa-mist);color:var(--aa-petrol)}

/* the mist strip under the header: "Drive Safe, Drive Assured" (DM Mono) and the notice (plain text) */
.aa-strip{background:var(--aa-mist);border-bottom:1px solid rgba(15,76,92,.14);color:var(--aa-petrol)}
.aa-strip .container{display:flex;align-items:center;gap:6px 22px;min-height:34px;padding-block:6px}
.as-note{flex:none;font:500 12px/1.3 var(--aa-mono);letter-spacing:.06em;text-transform:uppercase;color:var(--aa-petrol);white-space:nowrap}
.as-notice{display:inline-flex;align-items:center;gap:7px;margin-left:auto;font:400 13.5px/1.35 var(--aa-sans);color:var(--aa-ink)}
.as-notice .ti{width:16px;height:16px;flex:none;color:var(--aa-petrol)}
.as-notice b{font-weight:600}
.as-line{font:400 13.5px/1.35 var(--aa-sans);color:var(--aa-muted)}
.as-line::before{content:"";display:inline-block;width:1px;height:14px;margin-right:22px;vertical-align:-2px;background:rgba(15,76,92,.3)}
.as-tel{font:500 12px/1.3 var(--aa-mono);letter-spacing:.06em;text-transform:uppercase;color:var(--aa-petrol);text-decoration:none;white-space:nowrap}
.as-tel:hover{text-decoration:underline;text-decoration-thickness:1px;text-underline-offset:3px}

/* mobile controls (shown below 1200 px): phone icon + "Menu" two-part toggle */
.aa-hdr-m{display:none}
.aa-hdr-call{display:grid;place-items:center;width:44px;height:44px;border-radius:4px;background:var(--aa-mist);color:var(--aa-petrol)}
.aa-hdr-call:hover{background:var(--aa-line-soft);color:var(--aa-deep)}
.aa-hdr-call .ti{width:22px;height:22px}
.aa-menu-btn{display:inline-flex;align-items:stretch;gap:2px;height:44px;padding:0;border:0;border-radius:4px;background:none;color:#fff;font:600 15px/1 var(--aa-sans);cursor:pointer}
.aa-menu-btn>span{display:flex;align-items:center;padding:0 14px;background:var(--aa-petrol);border-radius:4px 0 0 4px}
.aa-menu-btn>i{display:grid;place-items:center;width:44px;background:var(--aa-deep);color:var(--aa-mist);border-radius:0 4px 4px 0;font-style:normal}
.aa-menu-btn .ti{width:22px;height:22px}
.aa-menu-btn .m-close{display:none}
.aa-menu-btn[aria-expanded="true"] .m-open{display:none}
.aa-menu-btn[aria-expanded="true"] .m-close{display:block}
.aa-menu-btn:focus,.aa-menu-btn:focus-visible{box-shadow:none}
.aa-menu-btn:focus-visible{outline:3px solid var(--aa-ink);outline-offset:3px}

@media (min-width:1200px){
  .aa-hdr .navbar>.aa-hdr-row{align-items:stretch}
  .aa-hdr .navbar-collapse{display:flex!important;align-items:stretch;flex:1 1 auto;min-width:0}
  .aa-nav{margin:0 auto 0 0}
  /* the panels hang from the header's foot across the container (Insurance Tips) or from its right end (Tools) */
  .aa-dd.mega{position:static}
  .aa-dd.mega>.aa-mm{position:absolute;top:100%;left:calc(var(--bs-gutter-x) * .5);right:calc(var(--bs-gutter-x) * .5);width:auto;min-width:0;margin:0;padding:22px 26px 24px;border:1px solid var(--aa-line-soft);border-top:0;border-radius:0 0 10px 10px;box-shadow:var(--aa-drop)}
  .aa-dd.mega>.aa-mm.mm-tools{left:auto;width:720px}
  .aa-dd.mega:hover>.aa-mm,.aa-dd.mega:focus-within>.aa-mm,.aa-dd.mega>.aa-mm.show{display:grid;align-items:start}
  .mm-tips{grid-template-columns:minmax(0,2.15fr) minmax(0,1.1fr) minmax(0,1fr)}
  .mm-tools{grid-template-columns:minmax(0,1fr) minmax(0,1fr)}
  .aa-mm .mm-col+.mm-col{margin-left:28px;padding-left:28px;border-left:1px solid #E3EEED}
  .as-tel{display:none}
}
@media (min-width:1400px){
  .as-line{display:inline}
}
@media (max-width:767.98px){
  .as-line{display:none}
}
/* 768-1399 px: the second design showed its partner line from 768 px (d-md-inline); it keeps showing, on a second row */
@media (min-width:768px) and (max-width:1399.98px){
  .aa-strip .container{flex-wrap:wrap}
  .as-line{display:block;flex:0 0 100%;text-align:right;font-size:13px}
  .as-line::before{display:none}
}
@media (min-width:768px) and (max-width:991.98px){
  .as-line{text-align:left}
}
@media (min-width:1200px) and (max-width:1399.98px){
  .aa-hdr-tel{display:none}
  .as-tel{display:inline}
  .aa-logo img{height:38px}
  .aa-logo{margin-right:1rem}
  .aa-nav .nav-link{padding:0 .6rem!important}
  .aa-nav .nav-link::before{left:.6rem;right:.6rem}
  .as-notice{margin-left:auto}
  .aa-strip .container{gap:6px 20px}
}
@media (max-width:1199.98px){
  .aa-hdr{--aa-hdr:72px}
  .aa-hdr-row{align-items:center;min-height:72px}
  .aa-logo img{height:36px}
  .aa-hdr-m{display:flex;align-items:center;gap:8px;margin-left:auto}
  .aa-hdr .navbar-collapse{position:absolute;top:100%;left:0;right:0;background:#fff;border-top:1px solid var(--aa-line-soft);border-bottom:1px solid var(--aa-line-soft);box-shadow:0 30px 40px -30px rgba(15,76,92,.45);max-height:calc(100dvh - 72px);overflow-y:auto;overscroll-behavior:contain}
  .aa-hdr .navbar-collapse>*{max-width:720px;margin-inline:auto;padding-inline:24px}
  .aa-nav{flex-direction:column;padding-top:8px!important}
  .aa-nav .nav-link{flex-direction:row;justify-content:space-between;align-items:center;width:100%;min-height:58px;padding:0 4px!important;border-bottom:1px solid var(--aa-line-soft)}
  .aa-nav .nav-link::before{left:-24px;right:auto;top:14px;bottom:14px;width:3px;height:auto}
  .aa-nav .nl{font-size:18px}
  /* the panels open in place as plain grouped lists */
  .aa-nav .aa-mm{position:static!important;transform:none!important;width:auto!important;min-width:0;padding:6px 0 14px 18px;margin:0;border:0;border-bottom:1px solid var(--aa-line-soft);border-radius:0;box-shadow:none;background:#fff}
  .aa-nav .aa-mm.show{display:block}
  .aa-mm .mm-col+.mm-col,.mm-foot{margin-top:18px}
  .mm-cap{font-size:15px;padding-bottom:7px;border-bottom-width:1px;border-bottom-color:var(--aa-line-soft)}
  .mm-list.two{grid-template-columns:1fr}
  .mm-item small,.mm-item .mi-ic,.mm-promo .mp-go{display:none!important}
  .mm-item strong{font-weight:400;font-size:16px}
  .aa-mm .dropdown-item{padding:10px 10px;font-size:16px}
  .mm-promo{display:block;margin:0;padding:0;background:none;border-radius:0}
  .aa-mm .mm-promo .mp-k{display:flex;margin:0 -10px;padding:10px;border-radius:6px;font:400 16px/1.35 var(--aa-sans);letter-spacing:0;text-transform:none;color:var(--aa-ink)}
  .mm-foot{flex-wrap:wrap;padding:12px}
  .aa-hdr-cta{display:grid;gap:14px;padding-top:22px!important;padding-bottom:26px!important;margin:0 auto!important}
  .aa-hdr-cta .aa-btn{width:100%}
  .aa-hdr-tel{flex-direction:row;align-items:baseline;justify-content:space-between;padding:6px 4px}
  /* the second design's phone-menu note, word for word */
  .aa-hdr-note{display:block;margin:0;padding:2px 4px 0;font:400 14px/1.45 var(--aa-sans);color:var(--aa-muted);text-align:center;text-wrap:balance}
  .as-tel{display:none}
}
@media (max-width:991.98px){
  .as-note{display:none}
  .as-notice{margin-left:0}
}
@media (max-width:767.98px){
  .aa-hdr{--aa-hdr:64px}
  .aa-hdr-row{min-height:64px}
  .aa-logo img{height:30px}
  /* new logo (17 Oct): a smaller minimum gap after the logo on phones (the space beside the buttons stays the same), so
     the 155 px lockup keeps the buttons on its row at 375 px with 8 px to spare instead of 2 */
  .aa-logo{margin-right:16px}
  .aa-hdr .navbar-collapse{max-height:calc(100dvh - 64px)}
  .aa-hdr .navbar-collapse>*{padding-inline:16px}
  .aa-nav .nav-link::before{left:-16px}
  .as-notice{align-items:flex-start;font-size:13px}
  .as-notice .ti{margin-top:1px}
}
@media (max-width:374.98px){
  /* small phones (360): Bootstrap's .navbar>.container{flex-wrap:inherit} wrapped the buttons under the logo; one row */
  .aa-hdr .navbar>.aa-hdr-row{flex-wrap:nowrap}
  .aa-logo{margin-right:8px}
  .aa-logo img{height:auto;width:clamp(126px,40vw,148px)}
  .aa-menu-btn>span{padding:0 10px}
}

/* =====================================================================================================================
   FRAME 2: the one footer (SiteFooter): plain link columns on the mist dot grid, no boxes (final cross-site fix)
   ===================================================================================================================== */
.aa-ft{position:relative;display:flow-root;margin-top:0;background:var(--aa-mist) var(--aa-dots);border-top:2px solid var(--aa-petrol);color:var(--aa-ink);font-size:15.5px;line-height:1.55}
.aa-ft a{color:var(--aa-ink);text-decoration:none}
.aa-ft a:hover{color:var(--aa-petrol);text-decoration:underline;text-decoration-thickness:2px;text-underline-offset:4px}
/* 1. the logo with both services' texts, beside the ZIP request; a petrol hairline between them */
.ft-top{display:grid;grid-template-columns:minmax(0,1fr) minmax(0,1fr);padding:64px 0 56px;border-bottom:1px solid rgba(15,76,92,.22)}
.ft-brand{padding-right:56px}
.ft-brand .footer-brand{display:inline-block;margin-bottom:22px}
.ft-brand .footer-brand:hover{text-decoration:none}
.ft-brand .footer-brand img{display:block;height:46px;width:auto}
.ft-brand p{max-width:60ch;margin:0 0 14px;font-size:15.5px;line-height:1.6}
.ft-brand .f-about{margin-bottom:26px;color:var(--aa-muted)}
.aa-ft .aa-btn:hover{text-decoration:none}
.ft-brand .aa-btn.mist>span{background:#fff;color:var(--aa-petrol);box-shadow:inset 0 0 0 1px var(--aa-line-soft)}
.ft-brand .aa-btn.mist>i{background:var(--aa-petrol);color:#fff}
.ft-brand .aa-btn.mist:hover>i{background:var(--aa-deep);color:var(--aa-mist)}
.ft-zip{padding-left:56px;border-left:1px solid rgba(15,76,92,.4)}
.ft-zip h2{font-size:clamp(1.625rem,1.35rem + .8vw,2.125rem);margin:0 0 .4em}
.ft-zip p{margin:0 0 26px;max-width:52ch}
.aa-ft.no-zip .ft-top{grid-template-columns:minmax(0,1fr)}
.aa-ft.no-zip .ft-brand{display:grid;grid-template-columns:minmax(0,4fr) minmax(0,7fr);column-gap:56px;padding-right:0}
.aa-ft.no-zip .ft-brand>*{grid-column:2}
.aa-ft.no-zip .ft-brand .footer-brand{grid-column:1;grid-row:1/5;align-self:start}
.aa-ft.no-zip .ft-brand .aa-btn{justify-self:start}
/* the ZIP request as a worksheet line (fill-in line, two-part button) */
.pf-form{display:grid;grid-template-columns:minmax(0,1fr) auto;gap:14px 20px;align-items:end}
.pf-in{display:flex;align-items:center;gap:10px;height:52px;border-bottom:2px solid var(--aa-petrol)}
.pf-in .ti{width:22px;height:22px;color:var(--aa-petrol)}
.pf-in input{flex:1;min-width:0;height:48px;border:0;background:transparent;font:500 18px var(--aa-mono);color:var(--aa-ink)}
.pf-in input::placeholder{color:var(--aa-muted);font-family:var(--aa-sans);font-weight:400;font-size:17px}
.pf-in input:focus{outline:0}
.pf-in:focus-within{border-bottom-color:var(--aa-ink);box-shadow:0 1px 0 0 var(--aa-ink);background:rgba(255,255,255,.55)}
.pf-form small{grid-column:1/-1;font:500 12px/1.4 var(--aa-mono);letter-spacing:.04em;color:var(--aa-muted)}
/* 2. the link columns: a Fira caption on a petrol rule, plain links under it */
.ft-cols{display:grid;grid-template-columns:repeat(4,minmax(0,1fr)) minmax(0,1.2fr);gap:44px 36px;padding:52px 0 54px;border-bottom:1px solid rgba(15,76,92,.22)}
.ft-col h2,.ft-col h4{margin:0 0 14px;padding-top:12px;border-top:2px solid var(--aa-petrol);font:700 16px/1.25 var(--aa-sans);letter-spacing:0;color:var(--aa-ink)}
.ft-col .ft-links+h2,.ft-col .ft-links+h4{margin-top:30px}
.ft-links{list-style:none;margin:0;padding:0;display:grid;gap:9px}
.ft-links a{display:inline;font-size:15.5px;line-height:1.4}
/* Contact Info as ruled lines: DM Mono label over the value */
.f-contact{list-style:none;margin:0;padding:0}
.f-contact li{display:grid;gap:3px;padding:10px 0 11px;border-bottom:1px solid rgba(15,76,92,.22)}
.f-contact li:first-child{padding-top:0}
.f-contact li:last-child{border-bottom:0;padding-bottom:0}
.f-contact b{font:500 11.5px/1.3 var(--aa-mono);letter-spacing:.08em;text-transform:uppercase;color:var(--aa-petrol)}
.f-contact a,.f-contact span{font-weight:600;overflow-wrap:anywhere}
.f-contact a[href^="tel:"]{font:500 17px/1.3 var(--aa-mono);letter-spacing:-.01em}
/* 3. both required disclosures, then the bottom line */
.ft-disc{display:grid;grid-template-columns:minmax(0,1fr) minmax(0,1.45fr);gap:24px 48px;padding:36px 0 34px;border-bottom:1px solid rgba(15,76,92,.22)}
.ft-disc p{margin:0;font-size:13.5px;line-height:1.62;color:var(--aa-ink)}
.ft-disc strong{color:var(--aa-petrol);font:500 12px var(--aa-mono);letter-spacing:.08em;text-transform:uppercase;margin-right:.35rem}
.footer-bottom{display:flex;justify-content:space-between;align-items:baseline;gap:.5rem 1.5rem;flex-wrap:wrap;padding:18px 0 28px;font:500 12px/1.5 var(--aa-mono);letter-spacing:.02em;color:var(--aa-muted)}
.f-bl{display:flex;flex-wrap:wrap;gap:6px 18px}
.aa-ft .f-bl a{color:var(--aa-petrol)}
@media (max-width:1199.98px){
  .ft-cols{grid-template-columns:repeat(3,minmax(0,1fr))}
}
@media (max-width:991.98px){
  .ft-top{grid-template-columns:minmax(0,1fr);padding:48px 0 44px}
  .ft-brand{padding-right:0}
  .ft-zip{margin-top:36px;padding:32px 0 0;border-left:0;border-top:1px solid rgba(15,76,92,.4)}
  .aa-ft.no-zip .ft-brand{display:block}
  .ft-disc{grid-template-columns:minmax(0,1fr)}
}
@media (max-width:767.98px){
  .ft-cols{grid-template-columns:repeat(2,minmax(0,1fr));gap:36px 24px;padding:40px 0 44px}
  .ft-col.ft-contact{grid-column:1/-1}
  .ft-links a{font-size:15px}
  .footer-bottom{flex-direction:column}
}
@media (max-width:575.98px){
  .pf-form{grid-template-columns:1fr}
  .pf-form .aa-btn{width:100%}
}

/* =====================================================================================================================
   Two-part buttons that also carry Bootstrap's .btn (second-design markup: .btn.aa-btn.coral/.navy/.ghost .sm/.lg)
   ===================================================================================================================== */
.btn.aa-btn,.btn.aa-btn:hover,.btn.aa-btn:focus,.btn.aa-btn:active,.btn.aa-btn:first-child:active{padding:0;border:0;background:none;color:#fff;box-shadow:none;line-height:1.2;min-height:52px;--bs-btn-padding-x:0;--bs-btn-padding-y:0}
.btn.aa-btn{display:inline-flex;align-items:stretch;justify-content:flex-start;gap:2px;font:600 17px/1.2 var(--aa-sans);text-align:left}
.aa-btn.sm{min-height:44px;font-size:15.5px}
.aa-btn.sm>span{padding:.55rem 1rem}
.aa-btn.sm>i{width:44px}
.aa-btn.lg{min-height:56px}
.btn.aa-btn.ghost>span,.btn.aa-btn.ghost-light>span{background:var(--aa-mist);color:var(--aa-petrol)}
.btn.aa-btn.ghost>i,.btn.aa-btn.ghost-light>i{background:var(--aa-line-soft);color:var(--aa-petrol)}
.btn.aa-btn.ghost:hover>i,.btn.aa-btn.ghost-light:hover>i{background:var(--aa-petrol);color:var(--aa-mist)}
.btn.aa-btn.w-100{display:flex;width:100%}
.btn.aa-btn:focus-visible{outline:3px solid var(--aa-ink);outline-offset:3px}

/* =====================================================================================================================
   HOME (/, Home.tsx)
   ===================================================================================================================== */
.page-index main{overflow-x:clip}

/* 0. hero: the road photo is the stage behind the type (one even 72 % mist wash) and keeps the road itself clear, in
   natural colour, at the stage's foot; below the stage the mist dot-grid foot carries the three spec cards, which
   straddle into the next section and never sit on the photo. The photo is a wide crop of the road ahead that ends at
   the road surface, so it is anchored to the stage's foot (bottom 100 %) at every width: the vehicles, the fences and
   the guardrail fill the clear band and the misty hills sit under the type. */
.hm-hero{position:relative;isolation:isolate;display:flow-root;background:var(--aa-mist);text-align:center}
.hm-hero-stage{position:relative;padding:clamp(52px,3.9vw,56px) 0 calc(7.8vw + 74px)}
.hm-hero-photo{position:absolute;inset:0;z-index:-1;overflow:hidden;background:var(--aa-mist);-webkit-mask-image:linear-gradient(180deg,#000 calc(100% - 24px),transparent);mask-image:linear-gradient(180deg,#000 calc(100% - 24px),transparent)}
.hm-hero-photo img{width:100%;height:100%;object-fit:cover;object-position:52% 100%}
.hm-hero-photo::after{content:"";position:absolute;inset:0;background:linear-gradient(180deg,var(--aa-wash) 0,var(--aa-wash) calc(100% - 7.8vw - 74px),rgba(220,235,234,.62) calc(100% - 7.8vw - 64px),rgba(220,235,234,.4) calc(100% - 7.8vw - 52px),rgba(220,235,234,.2) calc(100% - 7.8vw - 40px),rgba(220,235,234,.12) calc(100% - 7.8vw - 30px),rgba(220,235,234,.12) 100%)}
.hm-hero-foot{position:relative;display:flow-root}
.hm-hero-foot::before{content:"";position:absolute;inset:0;z-index:-1;background:var(--aa-dots);-webkit-mask-image:linear-gradient(180deg,transparent,#000 56px);mask-image:linear-gradient(180deg,transparent,#000 56px)}
.hm-hero h1{font-size:clamp(2.5rem,1.6rem + 3vw,3.75rem);line-height:1.03;max-width:21ch;margin:0 auto .45em}
.hm-lede{font-size:clamp(1.0625rem,1rem + .3vw,1.1875rem);line-height:1.6;max-width:60ch;margin:0 auto;color:var(--aa-ink)}
.hm-actions{display:flex;flex-wrap:wrap;justify-content:center;align-items:center;gap:18px 34px;margin-top:28px}
.hm-call{display:inline-flex;align-items:center;gap:12px;text-align:left;text-decoration:none;color:var(--aa-ink)}
.hm-call .ti{width:44px;height:44px;padding:11px;border-radius:4px;background:#fff;color:var(--aa-petrol);box-shadow:inset 0 0 0 1px var(--aa-line-soft)}
.hm-call span{display:block;font:600 15px/1.25 var(--aa-sans)}
.hm-call strong{display:block;font:500 18px/1.3 var(--aa-mono);letter-spacing:-.01em;color:var(--aa-petrol);font-variant-numeric:tabular-nums}
.hm-call:hover strong{text-decoration:underline;text-decoration-thickness:2px;text-underline-offset:4px}
.hm-note{max-width:84ch;margin:22px auto 0;font-size:14px;line-height:1.55;color:var(--aa-ink);text-wrap:balance}
.hm-cluster{position:relative;z-index:2;display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:24px;margin:40px auto -112px;text-align:left}
.hm-feat{background:#fff;border:1px solid var(--aa-line-soft);border-radius:10px;box-shadow:var(--aa-drop);overflow:hidden}
.hm-feat:nth-child(2){transform:translateY(-24px)}
/* the tools card is the petrol one: on this site petrol means tools and action (like the bento's tool tile) */
.hm-feat.is-tool{background:var(--aa-petrol);border-color:var(--aa-petrol)}
.hm-feat.is-tool .sc-strip{background:var(--aa-deep);color:var(--aa-mist)}
.hm-feat.is-tool h3{color:#fff}
.hm-feat.is-tool p{color:var(--aa-mist)}
.hm-feat-b{padding:20px 24px 24px}
.hm-feat h3{display:flex;align-items:center;gap:10px;font-size:22px;margin:0 0 .5rem}
.hm-feat h3 .ti{width:26px;height:26px;color:var(--aa-petrol)}
.hm-feat p{margin:0;font-size:16px;line-height:1.55;color:var(--aa-muted)}

/* 1. why: notebook page over a photo */
.hm-why{padding:calc(112px + var(--aa-gap)) 0 var(--aa-gap)}
.hm-why-grid{display:grid;grid-template-columns:repeat(12,minmax(0,1fr));column-gap:24px;align-items:start}
/* the photo runs down to 40 px above the page's foot, so the page reads as clipped over it */
.hm-why-photo{grid-column:6/13;grid-row:1;align-self:stretch;position:relative;min-height:560px;margin:0 0 40px}
/* the frame crops the photo to the garage door and the drive (the roofline and the sky fall outside it) */
.hm-why-frame{position:absolute;inset:0;border-radius:10px;overflow:hidden;background:var(--aa-mist)}
.hm-why-frame img{display:block;width:100%;height:100%;object-fit:cover;object-position:80% 100%;scale:1.28;transform-origin:80% 100%}
/* the car photo as a white-framed print clipped over the photo's lower corner (the same print as the inner page heads) */
.hm-why-print{position:absolute;z-index:2;right:32px;bottom:-30px;width:clamp(170px,34%,250px);aspect-ratio:3/2;padding:7px;background:#fff;border-radius:8px;box-shadow:0 1px 0 rgba(15,76,92,.14),var(--aa-drop)}
.hm-why-print img{display:block;width:100%;height:100%;border-radius:4px;object-fit:cover;object-position:40% 62%}
.hm-page{grid-column:1/8;grid-row:1;position:relative;z-index:1;margin-top:76px;background:var(--aa-mist) var(--aa-dots);border-radius:10px;box-shadow:var(--aa-drop);overflow:hidden}
.hm-page .sc-strip{background:transparent;border-bottom:1px solid rgba(15,76,92,.22);min-height:44px;padding:0 40px}
.hm-page-b{padding:36px 56px 44px 56px}
.hm-page h2{margin-bottom:.6em;max-width:16ch}
.hm-page p{max-width:66ch;color:var(--aa-ink)}
.hm-sign{display:flex;align-items:center;gap:14px;margin-top:28px;padding-top:22px;border-top:1px solid rgba(15,76,92,.22)}
.hm-sign img{width:40px;height:40px;flex:none}
.hm-sign-n{display:block;font:italic 400 19px/1.3 var(--aa-sans);color:var(--aa-ink)}
.hm-sign-n span{display:block;margin-top:4px;font:normal 500 12px/1.3 var(--aa-mono);letter-spacing:.08em;text-transform:uppercase;color:var(--aa-petrol)}

/* 2 + 3. the library field (mist dot grid): bento of guides and tools, then the straddling tool panel */
.hm-field{background:var(--aa-mist) var(--aa-dots)}
.hm-lib{padding:var(--aa-gap) 0 64px}
.hm-head{display:flex;justify-content:space-between;align-items:flex-end;gap:16px 32px;flex-wrap:wrap;margin-bottom:40px}
.hm-head h2{margin:0;max-width:18ch}
.hm-more{display:inline-flex;align-items:center;gap:8px;font:600 17px var(--aa-sans);color:var(--aa-petrol);text-decoration:underline;text-decoration-thickness:2px;text-underline-offset:6px;white-space:nowrap}
.hm-more .ti{width:20px;height:20px;transition:transform .2s}
.hm-more:hover{color:var(--aa-deep)}
.hm-more:hover .ti{transform:translateX(3px)}
.hm-bento{display:grid;grid-template-columns:repeat(4,minmax(0,1fr));grid-auto-rows:minmax(288px,auto);gap:20px}
.hm-bento .info-card{display:flex;flex-direction:column;min-width:0;height:auto;background:#fff;border:1px solid var(--aa-line-soft);border-radius:10px;overflow:hidden;color:var(--aa-ink);text-decoration:none;transition:border-color .15s,box-shadow .2s,transform .2s}
.hm-bento .info-card:hover{color:var(--aa-ink);border-color:var(--aa-petrol);box-shadow:var(--aa-drop);transform:translateY(-3px)}
.hm-bento .info-card:hover .sc-strip,.hm-bento .info-card:focus-visible .sc-strip{background:var(--aa-petrol);color:var(--aa-mist)}
.hm-bento .card-label{font:inherit;letter-spacing:inherit;color:inherit}
.hm-bento .sc-strip{background:var(--aa-line-soft)}
.hm-bento .info-card{border-color:#B9CFCC}
.hm-bento .card-img{flex:1 1 104px;width:auto;min-height:104px;margin:10px 10px 0;border-radius:6px;overflow:hidden;background:var(--aa-mist)}
.hm-bento .card-img img{display:block;width:100%;height:100%;aspect-ratio:auto;object-fit:cover;transition:transform .6s cubic-bezier(.2,.7,.2,1)}
.hm-bento .info-card:hover .card-img img{transform:scale(1.045)}
.hm-bento .card-body{flex:none;display:flex;flex-direction:column;gap:6px;padding:14px 16px 16px}
.hm-bento .info-card h3{font-size:19px;line-height:1.2;margin:0}
.hm-bento .info-card p{margin:0;font-size:15px;line-height:1.45;color:var(--aa-muted)}
.hm-bento .card-more{display:inline-flex;align-items:center;gap:6px;margin-top:4px;padding:0;font:600 15px var(--aa-sans);color:var(--aa-petrol)}
.hm-bento .card-more .ti{width:18px;height:18px;transition:transform .2s}
.hm-bento .info-card:hover .card-more .ti{transform:translateX(3px)}
.t-types{grid-column:1/3;grid-row:1/3}
.t-levels{grid-column:3/5;grid-row:1}
.t-lower{grid-column:3;grid-row:2}
.t-compare{grid-column:4;grid-row:2}
.t-discounts{grid-column:1;grid-row:3}
.t-tool{grid-column:2;grid-row:3/5}
.t-senior{grid-column:1;grid-row:4}
.t-newcar{grid-column:3/5;grid-row:3/5}
/* final cross-site fix (2026-10-14): the library photos and the clipped car print are photos the old site never used,
   in one teal treatment: a petrol-to-mist duotone (the photo screened over petrol, mist multiplied on top). The tool
   tile keeps its own darker petrol print. Crops per photo follow */
.hm-bento .info-card:not(.t-tool) .card-img,.aa-tone{position:relative;isolation:isolate;background:var(--aa-petrol)}
.hm-bento .info-card:not(.t-tool) .card-img img,.aa-tone img{filter:grayscale(1) contrast(1.1) brightness(1.02);mix-blend-mode:screen}
.hm-bento .info-card:not(.t-tool) .card-img::after,.aa-tone::after{content:"";position:absolute;inset:0;z-index:1;background:var(--aa-mist);mix-blend-mode:multiply;pointer-events:none}
.aa-tone{display:block;width:100%;height:100%;border-radius:4px;overflow:hidden}
.hm-bento .t-types .card-img img{object-position:50% 74%}
.hm-bento .t-senior .card-img img{object-position:60% 58%}
.hm-bento .t-newcar .card-img img{object-position:50% 62%}
.hm-bento .t-tool .card-img img{object-position:50% 45%}
.hm-bento .t-types .card-body{padding:20px 24px 24px;gap:8px}
.hm-bento .t-types h3{font-size:28px;letter-spacing:-.012em}
.hm-bento .t-types p{font-size:16.5px}
/* wide tile: photo left, text right */
.hm-bento .t-levels{display:grid;grid-template-columns:minmax(0,1fr) minmax(0,1fr);grid-template-rows:minmax(0,1fr)}
.hm-bento .t-levels .card-img{margin:10px 0 10px 10px}
.hm-bento .t-levels .card-body{justify-content:center;padding:18px 22px}
.hm-bento .t-levels h3{font-size:22px}
/* the tool tile: the only solid petrol tile; its photo in a petrol duotone */
.hm-bento .t-tool{background:var(--aa-petrol);border-color:var(--aa-petrol);color:#fff}
.hm-bento .t-tool .sc-strip{background:var(--aa-deep);color:var(--aa-mist)}
.hm-bento .t-tool:hover{border-color:var(--aa-deep)}
.hm-bento .t-tool:hover .sc-strip,.hm-bento .t-tool:focus-visible .sc-strip{background:var(--aa-mist);color:var(--aa-petrol)}
.hm-bento .t-tool .card-img{background:#0F4C5C}
.hm-bento .t-tool .card-img img{filter:grayscale(1) contrast(1.08) brightness(1.08);mix-blend-mode:luminosity;opacity:.92}
.hm-bento .t-tool h3{color:#fff;font-size:24px}
.hm-bento .t-tool p{color:var(--aa-mist);font-size:15.5px}
.hm-bento .t-tool .card-body{padding:20px 18px 18px;gap:10px}
.hm-bento .t-tool .card-more{align-self:stretch;margin-top:8px;display:flex;align-items:stretch;gap:2px;min-height:48px;color:var(--aa-petrol)}
.hm-bento .t-tool .card-more>span{display:flex;align-items:center;flex:1;padding:0 14px;background:var(--aa-mist);border-radius:4px 0 0 4px}
.hm-bento .t-tool .card-more>i{display:grid;place-items:center;width:48px;background:var(--aa-line-soft);border-radius:0 4px 4px 0;font-style:normal}
.hm-bento .t-tool:hover .card-more>i{background:var(--aa-deep);color:var(--aa-mist)}
/* the second big tile: photo fills it, the text sits on a white panel overlapping its lower edge */
.hm-bento .t-newcar{position:relative}
.hm-bento .t-newcar .card-img{flex:1 1 auto;margin:10px 10px 10px}
.hm-bento .t-newcar .card-body{position:absolute;left:28px;bottom:28px;width:min(400px,calc(100% - 56px));background:#fff;border-radius:6px;box-shadow:var(--aa-drop);padding:20px 22px 20px}
.hm-bento .t-newcar h3{font-size:24px}

.hm-mid{position:relative;padding:0}
.hm-mid::after{content:"";position:absolute;left:0;right:0;bottom:-1px;height:calc(50% + 1px);background:var(--aa-petrol);z-index:0}
.hm-mid .container{position:relative;z-index:1}
.hm-panel{display:grid;grid-template-columns:minmax(0,7fr) minmax(0,5fr);gap:40px 56px;align-items:center;background:#fff;border:1px solid var(--aa-line-soft);border-radius:10px;box-shadow:var(--aa-drop);padding:48px 56px}
.hm-panel h2{font-size:clamp(1.75rem,1.4rem + 1vw,2.25rem);max-width:20ch;margin-bottom:.45em}
.hm-panel p{color:var(--aa-muted);max-width:52ch;margin-bottom:26px}
.hm-tools-cap{display:block;margin-bottom:8px;font:500 12px/1 var(--aa-mono);letter-spacing:.08em;text-transform:uppercase;color:var(--aa-muted)}
.hm-tools{list-style:none;margin:0;padding:0;border-top:1px solid var(--aa-line-soft)}
.hm-tools li{border-bottom:1px solid var(--aa-line-soft)}
.hm-tools a{display:flex;align-items:center;gap:14px;min-height:60px;padding:0 8px;color:var(--aa-ink);font:600 17px/1.3 var(--aa-sans);text-decoration:none;transition:background-color .15s,color .15s}
.hm-tools a .ti{width:22px;height:22px;margin-left:auto;color:var(--aa-petrol);transition:transform .2s}
.hm-tools a:hover{background:var(--aa-mist);color:var(--aa-petrol)}
.hm-tools a:hover .ti{transform:translateX(4px)}
.hm-tools a:focus-visible{outline-offset:-3px}

/* 4. scenario rows on petrol */
.hm-scen{background:var(--aa-petrol);color:var(--aa-mist);padding:72px 0 var(--aa-gap)}
.hm-scen-head{display:grid;grid-template-columns:minmax(0,1fr) minmax(0,1fr);gap:32px 56px;align-items:center;margin-bottom:56px}
.hm-scen-head h2{color:#fff;margin:0;max-width:16ch}
.hm-scen-head p{margin:20px 0 0;color:var(--aa-mist);font-size:18px;max-width:46ch}
/* the road from the driver's seat in a petrol duotone (the bento tool tile's treatment), bleeding off the right edge
   (the right column starts half the gap right of the centre, so 50vw minus that reaches the edge; main clips overflow) */
.hm-scen-photo{position:relative;width:calc(50vw - 28px);height:300px;margin:0;border-radius:10px 0 0 10px;overflow:hidden;background:var(--aa-petrol)}
.hm-scen-photo img{display:block;width:100%;height:100%;object-fit:cover;object-position:50% 68%;filter:grayscale(1) contrast(1.1) brightness(1.08);mix-blend-mode:luminosity}
.hm-rows{list-style:none;margin:0;padding:0;border-bottom:1px solid rgba(220,235,234,.3)}
.hm-rows li{display:grid;grid-template-columns:minmax(0,2.7fr) minmax(0,3fr) minmax(0,4fr) minmax(0,2.3fr);gap:20px 36px;align-items:start;padding:34px 0 36px;border-top:1px solid rgba(220,235,234,.3)}
.hm-who{display:flex;flex-direction:column;align-items:flex-start;gap:14px}
.hm-who .who{display:block;padding:5px 0 0;background:none;border-radius:0;color:var(--aa-mist);font:500 13px/1.35 var(--aa-mono);letter-spacing:.08em;text-transform:uppercase}
.hm-rows h3{color:#fff;font-size:24px;line-height:1.2;margin:0}
.hm-rows p{margin:0;color:var(--aa-mist);font-size:16.5px;line-height:1.6}
.hm-go{display:grid;gap:10px;justify-items:start}
.hm-go a{display:inline-flex;align-items:center;gap:8px;color:#fff;font:600 16.5px/1.3 var(--aa-sans);text-decoration:none;border-bottom:2px solid rgba(220,235,234,.45);padding-bottom:3px;transition:border-color .15s,color .15s}
.hm-go a .ti{width:18px;height:18px;transition:transform .2s}
.hm-go a:hover{color:#fff;border-bottom-color:#fff}
.hm-go a:hover .ti{transform:translateX(3px)}
.hm-go a:focus-visible{outline-color:var(--aa-mist)}

/* 5. request guidance (#guidance): the worksheet on the dot grid */
.hm-ws{background:var(--aa-mist) var(--aa-dots);padding:var(--aa-gap) 0;scroll-margin-top:96px}
.hm-ws-top{display:grid;grid-template-columns:minmax(0,7fr) minmax(0,5fr);gap:32px 64px;align-items:start;margin-bottom:52px}
.hm-ws-top h2{max-width:22ch;margin-bottom:.5em}
.hm-ws-top>div>p{color:var(--aa-ink);max-width:56ch;margin:0}
.hm-ws .checklist{list-style:none;padding:0;margin:4px 0 22px;display:grid;gap:12px}
.hm-ws .checklist li{position:relative;padding-left:34px;font-weight:600;line-height:1.45;margin:0}
.hm-ws .checklist li::before{content:"";position:absolute;left:0;top:3px;width:20px;height:20px;border-radius:0;background:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%230F4C5C' stroke-width='2.5' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M5 12l5 5l10 -10'/%3E%3C/svg%3E") center/20px no-repeat}
.hm-ws .note.hm-tag{position:relative;margin:0;padding:14px 18px;background:#fff;border:0;border-left:3px solid var(--aa-petrol);border-radius:0 6px 6px 0;box-shadow:0 1px 0 rgba(15,76,92,.18),0 10px 24px -18px rgba(15,76,92,.5);font-size:15px;line-height:1.5;color:var(--aa-ink)}
.hm-ws .note.hm-tag::before{content:none}
#guidance .form-card{background:none;border:0;border-radius:0;box-shadow:none;padding:30px 0 0;border-top:2px solid var(--aa-petrol)}
#guidance form{counter-reset:ws}
#guidance .form-label::before{counter-increment:ws;content:counter(ws,decimal-leading-zero);display:inline-block;min-width:2.1em;color:var(--aa-muted)}
#guidance form>h2{display:flex;justify-content:space-between;align-items:baseline;font-size:26px;letter-spacing:-.01em;margin:0 0 26px}
#guidance .row{--bs-gutter-x:40px;--bs-gutter-y:30px}
#guidance .form-control,#guidance .form-select{height:48px;min-height:48px;padding:0 2px;background-color:transparent;border:0;border-bottom:2px solid var(--aa-petrol);border-radius:0;font:400 17.5px var(--aa-sans);color:var(--aa-ink);box-shadow:none}
#guidance .form-select{padding-right:30px;background-position:right 2px center}
#guidance .form-control:focus,#guidance .form-select:focus{background-color:rgba(255,255,255,.6);border-bottom-color:var(--aa-ink);box-shadow:0 1px 0 0 var(--aa-ink);outline:0}
#guidance .form-control:focus-visible,#guidance .form-select:focus-visible{outline:3px solid var(--aa-ink);outline-offset:3px}
#guidance textarea.form-control{height:auto;min-height:118px;padding:6px 14px;border:1px solid var(--aa-petrol);border-radius:4px;line-height:28px;background:#fff repeating-linear-gradient(180deg,transparent 0,transparent 27px,rgba(15,76,92,.18) 27px,rgba(15,76,92,.18) 28px) 0 6px/100% 28px;background-attachment:local;resize:vertical}
#guidance textarea.form-control:focus{border-color:var(--aa-ink);box-shadow:inset 0 0 0 1px var(--aa-ink)}
#guidance .consent{background:none;border:0;padding:4px 0 0 36px;font-size:15px;color:var(--aa-ink)}
#guidance .consent .form-check-input{width:22px;height:22px;margin:0 0 0 -36px;background-color:#fff}
#guidance .consent .form-check-input:checked{background-color:var(--aa-petrol)}
#guidance .consent a{font-weight:600}
#guidance .ws-submit{display:flex;justify-content:flex-end;align-items:flex-start}
#guidance button.aa-btn:hover>i{background:#fff;color:var(--aa-petrol)}
#guidance .was-validated .form-control:invalid,#guidance .was-validated .form-select:invalid{border-color:var(--aa-warn-ink)}
#guidance .form-success{max-width:720px}
#guidance .form-error{margin-top:20px}

/* 6. latest from the blog: garage-door lift cards */
.hm-blog{padding:var(--aa-gap) 0 56px}
.hm-lift-grid{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:24px}
.hm-lift{position:relative;display:block;height:470px;border:1px solid var(--aa-line-soft);border-radius:10px;overflow:hidden;background:#fff;color:var(--aa-ink);text-decoration:none;isolation:isolate}
.hm-lift-door{position:absolute;inset:0;z-index:2;display:flex;flex-direction:column;background:var(--aa-petrol);transition:transform .6s cubic-bezier(.66,0,.3,1)}
.hm-lift-door img{display:block;flex:1 1 auto;min-height:0;width:100%;object-fit:cover}
.hm-lift-bar{position:relative;flex:none;display:flex;align-items:flex-start;justify-content:space-between;gap:16px;min-height:102px;padding:18px 18px 20px 22px;background:var(--aa-petrol);color:#fff}
.hm-lift-bar>i{flex:none;display:grid;place-items:center;width:40px;height:40px;border-radius:4px;background:var(--aa-deep);color:var(--aa-mist);font-style:normal;transition:background-color .15s,color .15s}
.hm-lift-bar>i .ti{width:20px;height:20px;transition:transform .2s}
.hm-lift:hover .hm-lift-bar>i,.hm-lift:focus-visible .hm-lift-bar>i{background:var(--aa-mist);color:var(--aa-petrol)}
.hm-lift:hover .hm-lift-bar>i .ti{transform:translateX(3px)}
.hm-lift-t{display:grid;gap:8px;min-width:0}
.hm-lift-bar .card-label{font:500 12px/1.35 var(--aa-mono);letter-spacing:.08em;text-transform:uppercase;color:var(--aa-mist)}
.hm-lift-bar h3{margin:0;color:#fff;font-size:20px;line-height:1.25}
.hm-lift-body{position:absolute;left:0;right:0;bottom:0;height:60%;display:flex;flex-direction:column;gap:10px;padding:22px 24px 24px;background:#fff}
.hm-lift-body p{margin:0;font-size:16px;line-height:1.55;color:var(--aa-ink);display:-webkit-box;-webkit-line-clamp:5;-webkit-box-orient:vertical;overflow:hidden}
.hm-lift-body .card-more{display:inline-flex;align-items:center;gap:6px;margin-top:auto;font:600 15.5px var(--aa-sans);color:var(--aa-petrol)}
.hm-lift-body .card-more .ti{width:18px;height:18px}
.hm-lift:hover .hm-lift-door,.hm-lift:focus-visible .hm-lift-door{transform:translateY(-60%)}
.hm-lift:hover,.hm-lift:focus-visible{border-color:var(--aa-petrol);color:var(--aa-ink)}
.hm-lift:focus-visible{outline:3px solid var(--aa-ink);outline-offset:3px}
@media (hover:none),(prefers-reduced-motion:reduce){
  .hm-lift{height:auto;display:flex;flex-direction:column}
  .hm-lift-door{position:relative;inset:auto;transform:none!important}
  .hm-lift-door img{flex:none;height:220px}
  .hm-lift-bar{padding-bottom:18px}
  .hm-lift-bar>i{display:none}   /* the static card shows its own "Read more": one call to action per card */
  .hm-lift-body{position:relative;height:auto}
  .hm-lift-body p{-webkit-line-clamp:unset;display:block}
}

/* ---------- home, tablet and phone ---------- */
@media (max-width:1199.98px){
  .hm-rows li{grid-template-columns:minmax(0,1fr) minmax(0,2fr);gap:14px 36px}
  .hm-rows li>.hm-who{grid-row:1/4}
  .hm-go{grid-auto-flow:column;justify-content:start;gap:10px 24px}
}
@media (max-width:991.98px){
  /* hero on tablets and phones: the photo as a band on top (the road and the van in frame, the photo itself fading out
     at 80 % of the band so the near road dissolves into the mist), the h1 on its faded foot, then the text and the
     stacked cards on the mist */
  .hm-hero{text-align:left}
  .hm-hero-stage{padding:0}
  .hm-hero-photo{position:relative;inset:auto;z-index:auto;height:clamp(300px,50vh,420px);-webkit-mask-image:none;mask-image:none}
  .hm-hero-photo img{position:absolute;left:0;bottom:20%;height:114%;object-position:55% 100%;-webkit-mask-image:linear-gradient(180deg,#000 82%,transparent);mask-image:linear-gradient(180deg,#000 82%,transparent)}
  .hm-hero-photo::after{background:linear-gradient(180deg,rgba(220,235,234,.06) 0,rgba(220,235,234,.1) 50%,rgba(220,235,234,.16) 66%,rgba(220,235,234,.86) 80%,#DCEBEA 94%)}
  .hm-hero-inner{position:relative;margin-top:calc(clamp(300px,50vh,420px) * -.215)}   /* 90 px on the 420 px band, less on short phones */
  .hm-hero h1{margin:0 0 .45em;max-width:12ch}
  .hm-lede{margin:0}
  .hm-actions{justify-content:flex-start;margin-top:26px}
  .hm-note{margin:22px 0 0;text-wrap:pretty}
  .hm-cluster{grid-template-columns:1fr;max-width:560px;margin:36px 0 -56px;gap:16px}
  .hm-feat:nth-child(2){transform:none}
  .hm-why{padding-top:calc(56px + var(--aa-gap))}
  .hm-why-grid{display:block}
  .hm-why-photo{height:auto;min-height:0;margin:0;aspect-ratio:4/3;max-height:520px;width:100%}
  .hm-why-frame img{object-position:76% 100%;scale:1.2;transform-origin:76% 100%}
  .hm-why-print{right:14px;bottom:auto;top:-18px;width:min(40%,220px)}
  .hm-page{margin:-40px 12px 0}
  .hm-bento{grid-template-columns:repeat(2,minmax(0,1fr));grid-auto-rows:auto;gap:14px}
  .t-types,.t-levels,.t-newcar{grid-column:1/-1;grid-row:auto}
  .t-lower,.t-compare,.t-discounts,.t-senior{grid-column:auto;grid-row:auto}
  .t-discounts{grid-column:1;grid-row:span 1}
  .t-tool{grid-column:2;grid-row:span 2}
  .hm-bento .t-types .card-img{flex:none;height:260px}
  .hm-bento .t-newcar .card-img{flex:none;height:300px}
  .hm-panel{grid-template-columns:1fr;padding:36px 32px}
  .hm-scen-head,.hm-ws-top{grid-template-columns:1fr}
  .hm-scen-photo{width:calc(50vw + 50%);height:240px}
  .hm-lift-grid{grid-template-columns:1fr}
  .hm-lift-door img{height:260px}
}
@media (max-width:767.98px){
  .hm-actions .aa-btn{width:100%}
  .hm-feat-b{padding:16px 18px 20px}
  .hm-feat h3{font-size:20px}
  .hm-page-b{padding:26px 22px 30px}
  .hm-page .sc-strip{padding:0 22px}
  .hm-page{margin:-56px 14px 0}
  .hm-sign-n span{letter-spacing:.04em}
  .hm-bento .card-body{padding:12px 12px 14px}
  .hm-bento .info-card h3{font-size:17px}
  .hm-bento .info-card p{font-size:14px}
  .hm-bento .card-more{font-size:14px}
  .hm-bento .sc-strip{padding:0 10px;font-size:11.5px;letter-spacing:.06em}
  .hm-bento .t-types h3{font-size:23px}
  .hm-bento .t-types .card-img{height:210px}
  .hm-bento .t-levels{display:flex}
  .hm-bento .t-levels .card-img{flex:none;height:180px;margin:10px 10px 0}
  .hm-bento .t-levels .card-body{padding:14px 16px 16px}
  .hm-bento .t-levels h3{font-size:20px}
  .hm-bento .t-newcar .card-img{height:220px;margin-bottom:0}
  .hm-bento .t-newcar .card-body{position:relative;left:auto;bottom:auto;width:auto;margin:-36px 10px 10px;box-shadow:var(--aa-drop)}
  .hm-bento .t-tool .card-body{padding:14px 12px 12px}
  .hm-bento .t-tool h3{font-size:19px}
  .hm-bento .t-tool .card-more>span{padding:0 9px;font-size:13.5px;white-space:nowrap}
  .hm-bento .t-tool .card-more>i{width:36px}
  .hm-panel{padding:28px 20px 24px}
  .hm-panel .aa-btn{width:100%}
  .hm-scen{padding-top:56px}
  .hm-scen-photo{height:190px}
  .hm-rows li{grid-template-columns:1fr;gap:10px;padding:26px 0 28px}
  .hm-rows li>.hm-who{grid-row:auto;flex-direction:row;align-items:center}
  .hm-rows h3{font-size:21px}
  .hm-go{grid-auto-flow:row;margin-top:6px}
  #guidance .row{--bs-gutter-y:24px}
  #guidance form>h2{font-size:22px}
  #guidance .ws-submit .aa-btn{width:100%}
  .hm-head{margin-bottom:28px}
  .hm-lift-door img{height:220px}
}
@media (prefers-reduced-motion:reduce){*,*::before,*::after{transition:none!important;animation:none!important;scroll-behavior:auto!important}}
/* Forced colours / Windows High Contrast (18 Oct): the logo images keep the ground they were drawn for (white header,
   mist footer), so the dark name stays visible on a dark system background; the links keep the system focus ring */
@media (forced-colors:active){
  .aa-logo img{forced-color-adjust:none;background:#fff;box-shadow:0 0 0 4px #fff}
  .ft-brand .footer-brand img{forced-color-adjust:none;background:#DCEBEA;box-shadow:0 0 0 4px #DCEBEA}
}