/* =========================================================================
   A&W Insurance — independent agency, Waterloo, Illinois.
   Identity taken from the agency's own sign: red, black and white, set in
   Public Sans throughout. Self-hosted; zero build, no external requests.
   ========================================================================= */

@import url("/assets/css/fonts.css");

/* --- Tokens ------------------------------------------------------------ */

:root {
    /* ---------------------------------------------------------------------
       Palette taken from the agency's own sign: assets/img/logo-aw.jpg is a
       red slab behind compressed black type on white. Red, black and white
       are the whole identity — there is no third brand colour.

       The previous scheme (warm paper, navy ink, teal accent) belonged to no
       part of this business. The green on the current live site is Avada's
       stock theme colour, not a brand asset, and is deliberately not carried
       over.
       --------------------------------------------------------------------- */

    /* Surfaces — plain white, the way printed signage sits on a white ground */
    --color-paper:      #FFFFFF;
    --color-paper-alt:  #F4F4F4;
    --color-surface:    #FFFFFF;

    --color-rule:        #DEDEDE;
    --color-rule-strong: #BDBDBD;

    /* Ink */
    --color-ink:       #111111;
    --color-ink-soft:  #3A3A3A;
    /* Mid grey on white measures 5.31:1 — clears AA for the 14px labels it
       is used on. Do not lighten past #6E6E6E. */
    --color-ink-mute:  #6E6E6E;

    /* Brand. #D8232A is the logo red nudged just dark enough to clear 4.5:1
       on white for text use; the raw sign red is kept for large flat areas
       where contrast is carried by size, not weight. */
    --color-accent:      #D8232A;
    --color-accent-deep: #A81319;
    --color-accent-flat: #EA1D24;
    /* Brand red on #111 measures 3.1:1 — fails AA. This tint clears 7.4:1
       and is the only place the red is allowed to shift. */
    --color-accent-on-dark: #FF7A80;

    /* On dark */
    --color-on-dark:       #FFFFFF;
    --color-on-dark-soft:  #D6D6D6;
    --color-on-dark-mute:  #A3A3A3;

    /* States. Error red is pulled away from the brand red on purpose — a
       validation message must not read as a brand flourish. */
    --color-error:   #8E1B12;
    --color-error-bg:#FBECEA;
    --color-ok:      #1F6B4A;
    --color-ok-bg:   #EAF3EE;

    /* Type — one family, used with conviction. Public Sans is the typeface
       the US design system is built on: civic, plain, and legible at small
       sizes, which is what an insurance form actually needs. Display weight
       is where the personality goes, not a second face. */
    --font-display: 'Public Sans', system-ui, -apple-system, sans-serif;
    --font-body:    'Public Sans', system-ui, -apple-system, sans-serif;

    --step-hero:  clamp(2.5rem, 1.6rem + 3.9vw, 4.125rem);
    --step-h2:    clamp(1.875rem, 1.35rem + 2.3vw, 2.875rem);
    --step-h3:    clamp(1.25rem, 1.1rem + 0.7vw, 1.5rem);
    --step-stat:  clamp(1.875rem, 1.5rem + 1.6vw, 2.375rem);
    --step-lede:  clamp(1.0625rem, 0.99rem + 0.35vw, 1.21875rem);
    --step-body:  1rem;
    --step-small: 0.9375rem;
    --step-label: 0.78125rem;

    /* Space */
    --space-1: 0.25rem;
    --space-2: 0.5rem;
    --space-3: 0.75rem;
    --space-4: 1rem;
    --space-5: 1.5rem;
    --space-6: 2rem;
    --space-7: 2.75rem;
    --space-8: 4rem;
    --space-9: 6rem;

    --gutter: clamp(1.25rem, 0.4rem + 3.4vw, 4.5rem);
    --container: 1320px;
    --radius: 2px;
}

/* --- Reset ------------------------------------------------------------- */

*, *::before, *::after { box-sizing: border-box; }
html { -webkit-text-size-adjust: 100%; scroll-behavior: smooth; }

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

body {
    margin: 0;
    background: var(--color-paper);
    color: var(--color-ink);
    font-family: var(--font-body);
    font-size: var(--step-body);
    line-height: 1.6;
    -webkit-font-smoothing: antialiased;
}

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

/* Weight 500 was tuned for a serif display face. With one sans doing both
   jobs, the personality has to come from weight and tracking instead — 800
   and a tighter track, which is also how the type on the sign is set. */
h1, h2, h3 {
    margin: 0;
    font-family: var(--font-display);
    font-weight: 800;
    line-height: 1.05;
    letter-spacing: -0.03em;
    text-wrap: balance;
}

p { margin: 0; text-wrap: pretty; }
ul, ol { margin: 0; padding: 0; list-style: none; }
/* The UA default is `margin: 1em 40px` — 80px per figure, which overflowed the
   agent row and the testimonial cards on narrow screens. */
figure, blockquote { margin: 0; }
a { color: inherit; text-decoration: none; }
button, input, select, textarea { font: inherit; color: inherit; }

:focus-visible { outline: 2px solid var(--color-accent); outline-offset: 3px; }

.skip-link {
    position: absolute;
    left: var(--space-4);
    top: -100px;
    z-index: 300;
    padding: var(--space-3) var(--space-4);
    background: var(--color-ink);
    color: var(--color-on-dark);
    font-weight: 600;
    transition: top 0.15s ease;
}
.skip-link:focus { top: var(--space-4); }

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

/* --- Primitives --------------------------------------------------------- */

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

.band { padding-block: clamp(3.25rem, 2rem + 4.5vw, 6rem); }
.band--paper   { background: var(--color-paper); }
.band--surface { background: var(--color-surface); }
.band--ink     { background: var(--color-ink); color: var(--color-on-dark); }
.band--ink h1, .band--ink h2, .band--ink h3 { color: var(--color-on-dark); }

.eyebrow {
    display: block;
    font-size: var(--step-label);
    font-weight: 600;
    letter-spacing: 0.16em;
    text-transform: uppercase;
    color: var(--color-accent);
}
.band--ink .eyebrow { color: var(--color-accent-on-dark); }

.lede { font-size: var(--step-lede); line-height: 1.62; color: var(--color-ink-soft); }
.band--ink .lede { color: var(--color-on-dark-soft); }

.h2 { font-size: var(--step-h2); }

/* Section head with the intro pushed to the right, per the mockup */
.band-head {
    display: flex;
    flex-wrap: wrap;
    justify-content: space-between;
    align-items: flex-end;
    gap: var(--space-7);
    margin-bottom: var(--space-7);
}
.band-head__main { max-width: 40ch; display: flex; flex-direction: column; gap: var(--space-4); }
.band-head__aside { max-width: 38ch; font-size: var(--step-small); line-height: 1.6; color: var(--color-ink-soft); }

/* --- Buttons ------------------------------------------------------------ */

.btn {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: var(--space-2);
    padding: 1rem 1.875rem;
    border: 1px solid transparent;
    border-radius: var(--radius);
    font-weight: 600;
    font-size: var(--step-body);
    line-height: 1.25;
    cursor: pointer;
    transition: background-color 0.18s ease, border-color 0.18s ease, color 0.18s ease;
}
.btn--primary { background: var(--color-ink); border-color: var(--color-ink); color: var(--color-on-dark); }
.btn--primary:hover { background: var(--color-accent); border-color: var(--color-accent); }

.btn--outline { border-color: var(--color-rule-strong); color: var(--color-ink); }
.btn--outline:hover { border-color: var(--color-ink); background: var(--color-surface); }

.btn--accent { background: var(--color-accent); border-color: var(--color-accent); color: #fff; }
.btn--accent:hover { background: var(--color-accent-deep); border-color: var(--color-accent-deep); }

.btn--light { background: var(--color-on-dark); border-color: var(--color-on-dark); color: var(--color-ink); }
.btn--light:hover { background: #fff; }

.btn--block { width: 100%; }
.btn-row { display: flex; flex-wrap: wrap; gap: var(--space-3); align-items: center; }

/* --- Announcement bar ---------------------------------------------------- */

.announce {
    background: var(--color-ink);
    color: var(--color-on-dark-soft);
    font-size: var(--step-small);
}
.announce__inner {
    display: flex;
    flex-wrap: wrap;
    justify-content: space-between;
    align-items: center;
    gap: var(--space-3);
    padding-block: var(--space-2);
}
.announce a { color: var(--color-on-dark-soft); display: inline-block; padding-block: 0.25rem; }
.announce a:hover { color: var(--color-on-dark); }

/* --- Header -------------------------------------------------------------- */

.site-header {
    position: sticky;
    top: 0;
    z-index: 100;
    background: var(--color-paper);
    border-bottom: 1px solid var(--color-rule);
}
.site-header__inner {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: var(--space-5);
    padding-block: var(--space-4);
}
/* The wordmark is the real sign, not type. It carries the phone number inside
   the artwork, which is why it is allowed to be this wide — that number is the
   agency's main call to action and was invisible in the previous text-only
   lockup. */
.brand { display: block; }
.brand img {
    width: 190px;
    height: auto;
}

@media (max-width: 40em) {
    .brand img { width: 152px; }
}

.nav__list { display: flex; align-items: center; gap: clamp(1rem, 0.3rem + 1.6vw, 2rem); }
.nav__item { position: relative; }
.nav__link {
    display: inline-block;
    padding-block: var(--space-2);
    font-size: 0.96875rem;
    font-weight: 600;
    color: var(--color-ink);
    border-bottom: 2px solid transparent;
    transition: color 0.16s ease, border-color 0.16s ease;
}
.nav__link:hover { color: var(--color-accent); border-bottom-color: var(--color-accent); }

/* "Get a quote" submenu. Opens on hover and on focus-within, so it is reachable
   by keyboard without any JS. */
.nav__sub {
    position: absolute;
    top: 100%;
    left: -1rem;
    min-width: 260px;
    padding: var(--space-3) 0;
    background: var(--color-surface);
    border: 1px solid var(--color-rule);
    border-radius: var(--radius);
    box-shadow: 0 14px 34px rgba(14, 27, 42, 0.12);
    opacity: 0;
    visibility: hidden;
    transform: translateY(-4px);
    transition: opacity 0.15s ease, transform 0.15s ease, visibility 0.15s;
    z-index: 20;
}
.nav__item:hover > .nav__sub,
.nav__item:focus-within > .nav__sub { opacity: 1; visibility: visible; transform: translateY(0); }

.nav__sub a {
    display: block;
    padding: var(--space-2) var(--space-5);
    font-size: var(--step-small);
    color: var(--color-ink);
}
.nav__sub a:hover { background: var(--color-paper); color: var(--color-accent); }

/* The parent gets a caret so it reads as a menu rather than a plain link. */
.nav__item:has(.nav__sub) > .nav__link::after {
    content: "";
    display: inline-block;
    margin-left: 0.4em;
    border: 4px solid transparent;
    border-top-color: currentColor;
    transform: translateY(2px);
}

.nav-toggle {
    display: none;
    padding: 0.55rem;
    background: none;
    border: 1px solid var(--color-rule-strong);
    border-radius: var(--radius);
    cursor: pointer;
}
.nav-toggle span { display: block; width: 20px; height: 2px; margin: 4px 0; background: var(--color-ink); transition: transform 0.2s ease, opacity 0.2s ease; }
.nav-toggle[aria-expanded="true"] span:nth-child(1) { transform: translateY(6px) rotate(45deg); }
.nav-toggle[aria-expanded="true"] span:nth-child(2) { opacity: 0; }
.nav-toggle[aria-expanded="true"] span:nth-child(3) { transform: translateY(-6px) rotate(-45deg); }

@media (max-width: 900px) {
    .nav-toggle { display: block; order: 3; }
    .site-header__cta { display: none; }
    .site-header__inner { flex-wrap: wrap; }
    .nav { order: 4; flex-basis: 100%; display: none; border-top: 1px solid var(--color-rule); }
    .nav.is-open { display: block; }
    .nav__list { flex-direction: column; align-items: stretch; gap: 0; padding-block: var(--space-3); }
    .nav__link { padding: var(--space-3) 0; border-bottom: none; }

    /* No hover on touch — the submenu is always open and indented instead. */
    .nav__sub {
        position: static;
        opacity: 1;
        visibility: visible;
        transform: none;
        box-shadow: none;
        border: 0;
        border-left: 2px solid var(--color-rule);
        border-radius: 0;
        min-width: 0;
        margin-left: var(--space-3);
        padding: 0 0 var(--space-3);
    }
    .nav__sub a { padding: var(--space-2) var(--space-4); }
    .nav__item:has(.nav__sub) > .nav__link::after { display: none; }
}

/* --- Hero ---------------------------------------------------------------- */

.hero { background: var(--color-paper); padding-block: clamp(2.75rem, 1.6rem + 4vw, 5.5rem); }
.hero__grid { display: grid; gap: clamp(2.5rem, 1rem + 5vw, 4.5rem); align-items: start; }
/* Two tracks only when something actually sits beside the copy. The homepage
   quote card was removed — it was never on the live site and duplicated the
   real auto and home quote forms — which would otherwise leave a 512px column
   standing empty. */
@media (min-width: 1040px) {
    .hero__grid:has(> * + *) { grid-template-columns: 1fr 512px; }
}

.hero__copy { display: flex; flex-direction: column; gap: var(--space-6); }
.hero__title { font-size: var(--step-hero); line-height: 1.03; }
.hero__lede { max-width: 52ch; }

/* The agency's own homepage copy runs to two further paragraphs and a sign-off
   under the lede. .hero__copy is a flex column with a gap, so these need no
   margins of their own — only a measure and a slightly quieter colour so the
   lede still leads. */
.hero__body {
    max-width: 58ch;
    color: var(--color-ink-soft);
}

.hero__stats {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(min(150px, 100%), max-content));
    gap: clamp(1.5rem, 0.6rem + 2.4vw, 2.75rem);
    padding-top: var(--space-6);
    border-top: 1px solid var(--color-rule);
}
.stat__figure {
    display: block;
    font-family: var(--font-display);
    font-size: var(--step-stat);
    font-weight: 500;
    letter-spacing: -0.02em;
    line-height: 1.1;
}
.stat__label { display: block; margin-top: var(--space-1); font-size: 0.875rem; color: var(--color-ink-mute); }

/* --- Quote card ---------------------------------------------------------- */

.quote-card {
    background: var(--color-surface);
    border: 1px solid var(--color-rule);
    border-radius: var(--radius);
    padding: clamp(1.5rem, 1rem + 1.6vw, 2.25rem);
}
.quote-card__title { font-size: var(--step-h3); }
.quote-card__note { margin-top: var(--space-2); font-size: var(--step-small); color: var(--color-ink-mute); }
.quote-card__foot { margin-top: var(--space-4); font-size: var(--step-label); color: var(--color-ink-mute); }

/* Line chooser — a radio group styled as chips */
.chips { display: flex; flex-wrap: wrap; gap: var(--space-2); }
.chip { position: relative; }
.chip input {
    position: absolute;
    opacity: 0;
    width: 100%; height: 100%;
    margin: 0;
    cursor: pointer;
}
.chip span {
    display: block;
    padding: 0.5rem 0.875rem;
    border: 1px solid var(--color-rule-strong);
    border-radius: var(--radius);
    font-size: var(--step-small);
    line-height: 1.3;
    transition: background-color 0.16s ease, border-color 0.16s ease, color 0.16s ease;
}
.chip input:hover + span { border-color: var(--color-ink); }
.chip input:checked + span { background: var(--color-ink); border-color: var(--color-ink); color: var(--color-on-dark); }
.chip input:focus-visible + span { outline: 2px solid var(--color-accent); outline-offset: 2px; }

/* --- Forms ---------------------------------------------------------------- */

.form__grid { display: grid; gap: var(--space-4); margin-top: var(--space-5); }
@media (min-width: 520px) { .form__grid--2 { grid-template-columns: 1fr 1fr; } }

.field { display: flex; flex-direction: column; gap: var(--space-2); }
.field--full { grid-column: 1 / -1; }
.field > label, .fieldset__legend {
    font-size: var(--step-label);
    font-weight: 600;
    letter-spacing: 0.08em;
    text-transform: uppercase;
    color: var(--color-ink-mute);
}
.field .req { color: var(--color-accent); }

.field input, .field select, .field textarea {
    width: 100%;
    padding: 0.8125rem 0.9375rem;
    font-family: var(--font-body);
    font-size: var(--step-body);
    color: var(--color-ink);
    background: var(--color-paper-alt);
    border: 1px solid var(--color-rule-strong);
    border-radius: var(--radius);
    transition: border-color 0.14s ease, box-shadow 0.14s ease;
}
.field textarea { min-height: 8rem; resize: vertical; line-height: 1.6; }
.field input::placeholder, .field textarea::placeholder { color: var(--color-ink-mute); }
.field input:focus, .field select:focus, .field textarea:focus {
    outline: none;
    border-color: var(--color-accent);
    box-shadow: 0 0 0 3px rgba(15, 110, 99, 0.16);
}
.field input[aria-invalid="true"], .field textarea[aria-invalid="true"], .field select[aria-invalid="true"] { border-color: var(--color-error); }

.fieldset { border: 0; padding: 0; margin: 0; display: flex; flex-direction: column; gap: var(--space-3); }

.field__error { font-size: var(--step-small); color: var(--color-error); font-weight: 500; }
.field__error:empty { display: none; }

/* Advisory rather than blocking — see site.js */
.field__hint { font-size: var(--step-small); color: var(--color-accent-deep); }
.field__hint:empty { display: none; }

/* Honeypot — off-screen for people, reachable for bots. */
.hp { position: absolute; left: -9999px; width: 1px; height: 1px; overflow: hidden; }

.form__status { margin-top: var(--space-4); }
.form__status:empty { display: none; }

.alert { padding: var(--space-4) var(--space-5); border: 1px solid; border-radius: var(--radius); font-size: var(--step-small); }
.alert--ok { background: var(--color-ok-bg); border-color: var(--color-ok); color: #15503A; }
.alert--error { background: var(--color-error-bg); border-color: var(--color-error); color: var(--color-error); }
.alert strong { display: block; font-family: var(--font-display); font-size: var(--step-h3); font-weight: 500; margin-bottom: var(--space-2); }

/* --- Carrier strip -------------------------------------------------------- */

.carriers { background: var(--color-surface); border-block: 1px solid var(--color-rule); padding-block: var(--space-7); }
.carriers__label {
    text-align: center;
    font-size: var(--step-label);
    letter-spacing: 0.16em;
    text-transform: uppercase;
    color: var(--color-ink-mute);
    margin-bottom: var(--space-6);
}
.carriers__row {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    justify-content: center;
    gap: clamp(1.5rem, 0.5rem + 3vw, 3.5rem);
}
.carriers__row img {
    height: clamp(30px, 4.5vw, 44px);
    width: auto;
    /* Logos arrive as flat JPEG/PNG on white; desaturating them keeps a row of
       competing brand colours from shouting over the page. */
    filter: grayscale(1);
    opacity: 0.72;
    transition: filter 0.2s ease, opacity 0.2s ease;
}
.carriers__row img:hover { filter: grayscale(0); opacity: 1; }

.affiliation {
    margin-top: var(--space-6);
    padding-top: var(--space-5);
    border-top: 1px solid var(--color-rule);
    display: flex;
    align-items: center;
    justify-content: center;
    gap: var(--space-4);
    font-size: var(--step-label);
    letter-spacing: 0.1em;
    text-transform: uppercase;
    color: var(--color-ink-mute);
}
.affiliation img { height: 26px; width: auto; opacity: 0.72; }

/* --- Coverage grid --------------------------------------------------------
   gap:1px over a rule-coloured background paints every divider with one
   element, so the cards can invert on hover without seams. */

/* Exactly six items, so the column count is fixed rather than auto-fit: 6
   divides evenly by 3, 2 and 1, and this grid cannot tolerate an orphan cell —
   an empty track shows as a solid slab of the divider colour, not whitespace. */
.coverage-grid {
    display: grid;
    gap: 1px;
    background: var(--color-rule);
    border: 1px solid var(--color-rule);
    grid-template-columns: 1fr;
}
@media (min-width: 620px)  { .coverage-grid { grid-template-columns: repeat(2, 1fr); } }
@media (min-width: 1000px) { .coverage-grid { grid-template-columns: repeat(3, 1fr); } }
.coverage {
    display: flex;
    flex-direction: column;
    gap: var(--space-3);
    padding: var(--space-7) var(--space-6) var(--space-8);
    min-height: 230px;
    background: var(--color-surface);
    color: var(--color-ink);
    transition: background-color 0.32s cubic-bezier(0.4, 0, 0.2, 1), color 0.32s cubic-bezier(0.4, 0, 0.2, 1);
}
.coverage:hover { background: var(--color-ink); color: var(--color-on-dark); }
.coverage__num { font-family: var(--font-display); font-size: 0.9375rem; color: var(--color-accent); letter-spacing: 0.04em; }
.coverage:hover .coverage__num { color: var(--color-accent-on-dark); }
.coverage__title { font-family: var(--font-display); font-size: var(--step-h3); font-weight: 500; letter-spacing: -0.015em; }
.coverage__body { font-size: var(--step-small); line-height: 1.6; color: var(--color-ink-soft); }
.coverage:hover .coverage__body { color: var(--color-on-dark-soft); }
.coverage__more { margin-top: auto; padding-top: var(--space-4); font-size: var(--step-small); font-weight: 600; color: var(--color-accent); }
.coverage:hover .coverage__more { color: var(--color-accent-on-dark); }

/* --- About --------------------------------------------------------------- */

.about-grid { display: grid; gap: clamp(2.5rem, 1rem + 5vw, 4.5rem); align-items: center; }
@media (min-width: 900px) { .about-grid { grid-template-columns: 380px 1fr; } }

.agents { display: flex; gap: var(--space-4); }
.agent { flex: 1 1 0; min-width: 0; }
.agent img {
    width: 100%;
    aspect-ratio: 2 / 3;
    object-fit: cover;
    border-radius: var(--radius);
    background: var(--color-ink-soft);
}
.agent__name { margin-top: var(--space-3); font-family: var(--font-display); font-size: 1.0625rem; color: var(--color-on-dark); }
.agent__role { font-size: var(--step-label); letter-spacing: 0.1em; text-transform: uppercase; color: var(--color-on-dark-mute); }

.pullquote {
    margin-top: var(--space-6);
    padding-top: var(--space-5);
    border-top: 1px solid rgba(196, 208, 219, 0.24);
    font-family: var(--font-display);
    font-size: var(--step-h3);
    font-weight: 500;
    line-height: 1.35;
    color: var(--color-on-dark);
    max-width: 34ch;
}

/* --- Testimonials --------------------------------------------------------- */

.quote-grid { display: grid; gap: var(--space-5); grid-template-columns: repeat(auto-fit, minmax(min(300px, 100%), 1fr)); }
.testimonial {
    display: flex;
    flex-direction: column;
    gap: var(--space-4);
    padding: var(--space-7) var(--space-6);
    background: var(--color-surface);
    border: 1px solid var(--color-rule);
    border-radius: var(--radius);
}
.testimonial blockquote {
    margin: 0;
    font-family: var(--font-display);
    font-size: 1.1875rem;
    line-height: 1.5;
    letter-spacing: -0.01em;
}
.testimonial figcaption { margin-top: auto; font-size: var(--step-small); color: var(--color-ink-mute); }

/* --- Closing CTA ---------------------------------------------------------- */

.closer { display: flex; flex-wrap: wrap; align-items: flex-end; justify-content: space-between; gap: var(--space-6); }
.closer__copy { max-width: 34ch; display: flex; flex-direction: column; gap: var(--space-4); }

/* --- Footer --------------------------------------------------------------- */

.site-footer { background: var(--color-ink); color: var(--color-on-dark-mute); padding-block: var(--space-8) var(--space-6); font-size: var(--step-small); }
.site-footer__grid { display: grid; gap: var(--space-7); }
@media (min-width: 780px) { .site-footer__grid { grid-template-columns: 1.7fr 1fr 1fr 1fr; } }

.site-footer h2 {
    font-family: var(--font-body);
    font-size: var(--step-label);
    font-weight: 600;
    letter-spacing: 0.14em;
    text-transform: uppercase;
    color: var(--color-on-dark);
    margin-bottom: var(--space-4);
}
.site-footer li + li { margin-top: var(--space-1); }
.site-footer li a { display: inline-block; padding-block: 0.3rem; max-width: 100%; overflow-wrap: anywhere; }
.site-footer a:hover { color: var(--color-on-dark); }
.site-footer__blurb { margin-top: var(--space-4); max-width: 42ch; }
.site-footer__brand { font-family: var(--font-display); font-size: 1.375rem; color: var(--color-on-dark); }

.site-footer__bottom {
    margin-top: var(--space-7);
    padding-top: var(--space-5);
    border-top: 1px solid rgba(196, 208, 219, 0.18);
    display: flex;
    flex-wrap: wrap;
    justify-content: space-between;
    gap: var(--space-3);
    font-size: var(--step-label);
}

/* --- Interior page header --------------------------------------------------- */

.page-header {
    background: var(--color-paper);
    border-bottom: 1px solid var(--color-rule);
    padding-block: clamp(2rem, 1.2rem + 3vw, 3.75rem) clamp(2.25rem, 1.4rem + 3.2vw, 4rem);
}
.page-header__title { font-size: var(--step-h2); max-width: 20ch; margin-top: var(--space-4); }
.page-header__lede { max-width: 56ch; margin-top: var(--space-5); }

.breadcrumb {
    display: flex;
    flex-wrap: wrap;
    /* The linked crumbs carry padding-block for a bigger tap target; the last
       crumb is bare text and has none. Under the default `stretch` that pushed
       the links a few pixels below the current-page label, so the row read as
       slightly broken. Baseline alignment ignores the padding difference. */
    align-items: baseline;
    gap: var(--space-2);
    margin-bottom: var(--space-5);
    font-size: var(--step-small);
    color: var(--color-ink-mute);
}
.breadcrumb a { display: inline-block; padding-block: 0.2rem; }
.breadcrumb a:hover { color: var(--color-accent); }
.breadcrumb li:not(:last-child)::after { content: "/"; margin-left: var(--space-2); opacity: 0.55; }

/* --- Article layout ---------------------------------------------------------- */

.article { display: grid; gap: clamp(2.5rem, 1rem + 4vw, 4.5rem); align-items: start; }
@media (min-width: 940px) { .article { grid-template-columns: minmax(0, 1fr) 320px; } }

.prose { max-width: 68ch; }
.prose--wide { max-width: 78ch; }
.prose > * + * { margin-top: var(--space-4); }
.prose h2 {
    font-size: var(--step-h3);
    margin-top: var(--space-7);
    padding-top: var(--space-5);
    border-top: 1px solid var(--color-rule);
}
.prose > h2:first-child { margin-top: 0; padding-top: 0; border-top: 0; }
.prose p { color: var(--color-ink-soft); }
.prose-list { display: flex; flex-direction: column; gap: var(--space-2); }
.prose-list li {
    position: relative;
    padding-left: 1.375rem;
    color: var(--color-ink-soft);
}
.prose-list li::before {
    content: "";
    position: absolute;
    left: 0;
    top: 0.6em;
    width: 6px; height: 6px;
    background: var(--color-accent);
    border-radius: 50%;
}

/* Aside for a genuinely local detail worth pulling out of the flow */
.note {
    margin-top: var(--space-6);
    padding: var(--space-5);
    background: var(--color-surface);
    border: 1px solid var(--color-rule);
    border-left: 3px solid var(--color-accent);
    border-radius: var(--radius);
}
.note p { font-size: var(--step-small); color: var(--color-ink-soft); }

/* Review flags — deliberately conspicuous; these must not ship unnoticed. */
.callout {
    margin-bottom: var(--space-6);
    padding: var(--space-5);
    background: var(--color-error-bg);
    border: 1px solid var(--color-error);
    border-radius: var(--radius);
}
.callout__title {
    display: block;
    font-family: var(--font-display);
    font-size: var(--step-h3);
    font-weight: 500;
    color: var(--color-error);
    margin-bottom: var(--space-2);
}
.callout p { font-size: var(--step-small); line-height: 1.6; color: var(--color-error); }
.callout + .callout { margin-top: calc(var(--space-6) * -1 + var(--space-3)); }

/* --- Sectioned quote form ------------------------------------------------------
   The live site steps these across 4 and 6 AJAX pages. Presenting the same
   fields as labelled sections on one page keeps the grouping and the sense of
   progress without the round-trips or the half-finished-form failure mode. */

.quote-form { max-width: 46rem; }

.form-section {
    border: 0;
    padding: 0;
    margin: 0;
}
.form-section + .form-section {
    margin-top: var(--space-8);
    padding-top: var(--space-7);
    border-top: 1px solid var(--color-rule);
}
.form-section__legend {
    display: flex;
    align-items: baseline;
    gap: var(--space-3);
    padding: 0;
    font-family: var(--font-display);
    font-size: var(--step-h3);
    font-weight: 500;
    letter-spacing: -0.015em;
    color: var(--color-ink);
}
.form-section__num {
    font-size: var(--step-label);
    letter-spacing: 0.08em;
    color: var(--color-accent);
}
.form-section__intro { margin-top: var(--space-3); font-size: var(--step-small); color: var(--color-ink-soft); }
.form-section .form__grid { margin-top: var(--space-5); }

.field__note { font-size: var(--step-small); color: var(--color-ink-mute); }

.form__submit {
    margin-top: var(--space-7);
    padding-top: var(--space-6);
    border-top: 1px solid var(--color-rule);
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: var(--space-4) var(--space-5);
}
.form__note { font-size: var(--step-small); color: var(--color-ink-mute); max-width: 34ch; }

/* Native time input matches the height of the text inputs beside it. */
.field input[type="time"] { min-height: 3.0625rem; }

/* --- Sidebar ------------------------------------------------------------------ */

@media (min-width: 940px) { .sidebar { position: sticky; top: calc(var(--space-6) + 64px); } }

.sidebar__card {
    padding: var(--space-6);
    background: var(--color-ink);
    color: var(--color-on-dark-soft);
    border-radius: var(--radius);
}
.sidebar__card .sidebar__title { color: var(--color-on-dark); }
.sidebar__body { font-size: var(--step-small); margin-top: var(--space-2); }
.sidebar__card .btn--outline { border-color: rgba(196, 208, 219, 0.45); color: var(--color-on-dark); }
.sidebar__card .btn--outline:hover { border-color: var(--color-on-dark); background: rgba(255, 255, 255, 0.06); }

.sidebar__title { font-family: var(--font-display); font-size: var(--step-h3); font-weight: 500; }

.sidebar__nav { margin-top: var(--space-6); }
.sidebar__nav ul { margin-top: var(--space-4); border-top: 1px solid var(--color-rule); }
.sidebar__nav li { border-bottom: 1px solid var(--color-rule); }
.sidebar__nav a {
    display: block;
    padding: var(--space-3) 0;
    font-size: var(--step-small);
    color: var(--color-ink-soft);
    transition: color 0.16s ease, padding-left 0.16s ease;
}
.sidebar__nav a:hover { color: var(--color-accent); padding-left: var(--space-2); }

/* --- Carrier directory ----------------------------------------------------------
   The live page is a wall of undifferentiated addresses and phone numbers. The
   numbers are the point — someone lands here mid-claim — so each carrier gets a
   definition list with the line's purpose as the term. */

.carrier-grid {
    display: grid;
    gap: var(--space-5);
    grid-template-columns: 1fr;
}
@media (min-width: 700px)  { .carrier-grid { grid-template-columns: repeat(2, 1fr); } }
@media (min-width: 1120px) { .carrier-grid { grid-template-columns: repeat(3, 1fr); } }

.carrier {
    display: flex;
    flex-direction: column;
    background: var(--color-surface);
    border: 1px solid var(--color-rule);
    border-radius: var(--radius);
    overflow: hidden;
}
.carrier__logo {
    display: flex;
    align-items: center;
    justify-content: center;
    padding: var(--space-6) var(--space-5);
    border-bottom: 1px solid var(--color-rule);
    background: var(--color-paper-alt);
}
.carrier__logo img { height: 40px; width: auto; }
.carrier__body { padding: var(--space-5); display: flex; flex-direction: column; gap: var(--space-3); flex: 1 1 auto; }
.carrier__name { font-family: var(--font-display); font-size: var(--step-h3); font-weight: 500; }
.carrier__tag {
    display: inline-block;
    margin-left: var(--space-2);
    padding: 0.1rem 0.5rem;
    background: var(--color-accent);
    color: #fff;
    border-radius: var(--radius);
    font-family: var(--font-body);
    font-size: 0.6875rem;
    font-weight: 600;
    letter-spacing: 0.08em;
    text-transform: uppercase;
    vertical-align: middle;
}
.carrier__address { font-size: var(--step-small); line-height: 1.55; color: var(--color-ink-soft); }
.carrier__hours { font-size: var(--step-small); color: var(--color-ink-mute); }

.carrier__lines { margin-top: auto; padding-top: var(--space-3); border-top: 1px solid var(--color-rule); }
.carrier__lines > div {
    display: flex;
    flex-wrap: wrap;
    justify-content: space-between;
    gap: var(--space-2) var(--space-4);
    padding-block: var(--space-2);
}
.carrier__lines > div + div { border-top: 1px solid var(--color-paper); }
.carrier__lines dt { font-size: var(--step-label); letter-spacing: 0.06em; text-transform: uppercase; color: var(--color-ink-mute); }
.carrier__lines dd { margin: 0; font-size: var(--step-small); font-weight: 600; }
.carrier__lines dd a { display: inline-block; padding-block: 0.15rem; overflow-wrap: anywhere; }
.carrier__lines dd a:hover { color: var(--color-accent); }

.affiliation-panel {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: var(--space-6);
    margin-top: var(--space-8);
    padding: var(--space-6);
    background: var(--color-surface);
    border: 1px solid var(--color-rule);
    border-left: 3px solid var(--color-accent);
    border-radius: var(--radius);
}
.affiliation-panel img { height: 44px; width: auto; flex: 0 0 auto; }
.affiliation-panel > div { flex: 1 1 320px; }
.affiliation-panel__title { font-family: var(--font-display); font-size: var(--step-h3); font-weight: 500; margin-bottom: var(--space-2); }
.affiliation-panel p { font-size: var(--step-small); line-height: 1.6; color: var(--color-ink-soft); }

/* --- Office details ------------------------------------------------------------- */

.office { margin-top: var(--space-4); }
.office > div { padding-block: var(--space-3); }
.office > div + div { border-top: 1px solid rgba(196, 208, 219, 0.22); }
.office dt {
    font-size: var(--step-label);
    letter-spacing: 0.1em;
    text-transform: uppercase;
    color: var(--color-on-dark-mute);
    margin-bottom: var(--space-1);
}
.office dd { margin: 0; color: var(--color-on-dark); line-height: 1.5; }
.office dd a { display: inline-block; padding-block: 0.15rem; overflow-wrap: anywhere; }
.office dd a:hover { color: var(--color-accent-on-dark); }
.office__note {
    margin-top: var(--space-4);
    padding-top: var(--space-4);
    border-top: 1px solid rgba(196, 208, 219, 0.22);
    font-size: var(--step-label);
    line-height: 1.55;
    color: var(--color-on-dark-mute);
}

/* --- Agent cards --------------------------------------------------------------- */

.agent-cards {
    display: grid;
    gap: var(--space-5);
    margin-top: var(--space-8);
    grid-template-columns: 1fr;
}
@media (min-width: 720px) { .agent-cards { grid-template-columns: repeat(2, 1fr); } }

.agent-card {
    display: flex;
    gap: var(--space-5);
    align-items: flex-start;
    padding: var(--space-5);
    background: var(--color-surface);
    border: 1px solid var(--color-rule);
    border-radius: var(--radius);
}
.agent-card img {
    width: 110px;
    flex: 0 0 110px;
    aspect-ratio: 2 / 3;
    object-fit: cover;
    border-radius: var(--radius);
}
.agent-card__name { font-family: var(--font-display); font-size: var(--step-h3); font-weight: 500; }
.agent-card__role {
    margin-top: var(--space-1);
    font-size: var(--step-label);
    letter-spacing: 0.1em;
    text-transform: uppercase;
    color: var(--color-accent);
}
.agent-card__bio { margin-top: var(--space-3); font-size: var(--step-small); line-height: 1.6; color: var(--color-ink-soft); }

@media (max-width: 480px) {
    .agent-card { flex-direction: column; }
    .agent-card img { width: 96px; flex-basis: auto; }
}

/* --- Utilities ------------------------------------------------------------- */

.mt-4 { margin-top: var(--space-4); }
.mt-6 { margin-top: var(--space-6); }

/* --- The slab -------------------------------------------------------------
   The one borrowed gesture. On the sign, "A&W" sits on a hard red slab; here
   the same slab sits behind a word or two in a heading. It is a quotation of
   the logo, not decoration, so it is used once per page at most — if every
   heading had one it would stop meaning anything.

   Applied to an inline element inside a heading:
     <h1>Insurance that <span class="slab">answers</span></h1>
   -------------------------------------------------------------------------- */

.slab {
    background: var(--color-accent-flat);
    color: #FFFFFF;
    /* Optical: the slab reads centred only when the top pad is a shade
       tighter than the bottom, because the cap height sits high in the box. */
    padding: 0.04em 0.28em 0.1em;
    box-decoration-break: clone;
    -webkit-box-decoration-break: clone;
}

/* --- Multi-step forms -----------------------------------------------------
   The quote forms are wizards, matching the live site. One [data-step] is
   visible at a time; site.js toggles the `hidden` attribute and paints the
   progress bar. With JS off, every step shows and the form still submits as
   one long page — which is the honest fallback, not a broken one.
   -------------------------------------------------------------------------- */

.form__progress {
    height: 3px;
    background: var(--color-rule);
    margin-bottom: var(--space-6);
    overflow: hidden;
}

.form__progress > [data-progress] {
    display: block;
    height: 100%;
    width: 0;
    background: var(--color-accent);
    transition: width 220ms ease;
}

.step__title {
    font-size: var(--step-h3);
    margin-bottom: var(--space-2);
}

.step__subtitle {
    font-size: var(--step-body);
    font-weight: 700;
    letter-spacing: -0.01em;
    margin: var(--space-8) 0 var(--space-4);
}

.step__hint { font-weight: 400; color: var(--color-ink-mute); }

.step__lede {
    color: var(--color-ink-soft);
    margin-bottom: var(--space-6);
}

.step-nav {
    display: flex;
    flex-wrap: wrap;
    gap: var(--space-3);
    margin-top: var(--space-8);
}

/* Pushes the primary action to the right once a Back button precedes it. */
.step-nav > .btn--outline + .btn { margin-left: auto; }

.field__legend {
    display: block;
    font-weight: 700;
    margin-bottom: var(--space-2);
}

@media (prefers-reduced-motion: reduce) {
    .form__progress > [data-progress] { transition: none; }
}

/* The Services menu carries six entries, one of them long enough to wrap in
   the 260px default. Widening only this submenu keeps the quote menu tight. */
.nav__sub--wide { min-width: 320px; }

/* --- Testimonial rotator --------------------------------------------------
   Sits in the hero's second column, where the quote card used to be. The
   slides are stacked in a grid cell so the card keeps the height of the
   tallest quote and nothing jumps as they cross-fade.
   -------------------------------------------------------------------------- */

/* The rotator and the agents' photo share the hero's second column. */
.hero__aside {
    align-self: start;
    display: flex;
    flex-direction: column;
    gap: var(--space-5);
}

/* Their photo is a 115px circle at source, so it is pinned to that size and
   never stretched — flex-shrink is off so a narrow column squeezes the text
   rather than the face. */
.hero__agents {
    display: flex;
    align-items: center;
    gap: var(--space-4);
    padding-left: var(--space-1);
}
.hero__agents img {
    flex: 0 0 auto;
    width: 115px;
    height: 115px;
    border-radius: 50%;
}
.hero__agents figcaption {
    font-size: var(--step-small);
    line-height: 1.5;
    color: var(--color-ink-soft);
    text-wrap: pretty;
}
.hero__agents strong {
    display: block;
    color: var(--color-ink);
    font-weight: 700;
}

.quote-rotator {
    display: grid;
    /* One column, one row for the stacked slides, one for the dots. The slides
       all occupy the same cell. */
    grid-template-rows: auto 1fr auto;
    gap: var(--space-5);
    padding: var(--space-7);
    background: var(--color-paper-alt);
    border-top: 4px solid var(--color-accent);
}

.quote-rotator__eyebrow { grid-row: 1; }

.quote-rotator__slide {
    grid-row: 2;
    grid-column: 1;
    opacity: 0;
    visibility: hidden;
    transition: opacity 0.45s ease, visibility 0.45s;
}
.quote-rotator__slide.is-active { opacity: 1; visibility: visible; }

.quote-rotator blockquote {
    font-size: var(--step-lede);
    line-height: 1.5;
    font-weight: 600;
    letter-spacing: -0.015em;
    text-wrap: pretty;
}

.quote-rotator figcaption {
    margin-top: var(--space-4);
    font-size: var(--step-small);
    color: var(--color-ink-mute);
}
/* An em dash before the name reads as attribution rather than another line
   of the quote. */
.quote-rotator figcaption::before { content: "— "; }

.quote-rotator__dots {
    grid-row: 3;
    display: flex;
    gap: var(--space-2);
}

.quote-rotator__dot {
    width: 34px;
    height: 4px;
    padding: 0;
    border: 0;
    background: var(--color-rule-strong);
    cursor: pointer;
    transition: background-color 0.2s ease;
}
.quote-rotator__dot.is-active { background: var(--color-accent); }
.quote-rotator__dot:hover { background: var(--color-ink-soft); }

@media (prefers-reduced-motion: reduce) {
    .quote-rotator__slide { transition: none; }
}

/* --- Service page figure --------------------------------------------------
   One photograph between the page header and the article. A fixed aspect box
   with object-fit means the six images crop to a consistent band even though
   their source ratios differ (1200x648 through 1200x800) — without it the
   pages would each start at a different height.

   width/height are set on the <img> too, so the browser reserves the space
   before the file arrives and the text below does not jump.
   -------------------------------------------------------------------------- */

.page-figure {
    margin-bottom: clamp(2rem, 1rem + 3vw, 3.5rem);
}

.page-figure img {
    width: 100%;
    height: clamp(220px, 15rem + 12vw, 420px);
    object-fit: cover;
    /* The A&W mark is a hard-edged sign; a soft rounded photo would fight it. */
    border-radius: var(--radius);
}

/* --- Statement band -------------------------------------------------------
   A full-bleed break between the carriers strip and the coverage grid, and the
   only place on the page where a single sentence gets the whole width.

   The scrim is a left-weighted gradient rather than a flat wash: the text sits
   over the plain lawn on the left while the house and the vehicles stay legible
   on the right. A flat overlay dark enough to carry text everywhere would have
   flattened the picture.
   -------------------------------------------------------------------------- */

.statement {
    position: relative;
    isolation: isolate;
    display: grid;
    align-items: center;
    min-height: clamp(300px, 20rem + 14vw, 460px);
    padding-block: clamp(3rem, 2rem + 4vw, 5rem);
    background: var(--color-ink);
}

.statement__media {
    position: absolute;
    inset: 0;
    z-index: -2;
    overflow: hidden;
}

.statement__media img {
    width: 100%;
    height: 100%;
    object-fit: cover;
    /* The house and the vehicles sit mid-frame. Holding the centre keeps both
       in shot when the band crops short on mobile; drifting down would leave
       nothing but lawn. */
    object-position: 50% 48%;
}

.statement::before {
    content: "";
    position: absolute;
    inset: 0;
    z-index: -1;
    background: linear-gradient(
        100deg,
        rgba(17, 17, 17, 0.88) 0%,
        rgba(17, 17, 17, 0.72) 38%,
        rgba(17, 17, 17, 0.28) 68%,
        rgba(17, 17, 17, 0.10) 100%
    );
}

.statement__quote {
    max-width: 22ch;
    margin: 0;
    color: #FFFFFF;
    font-family: var(--font-display);
    font-weight: 800;
    font-size: var(--step-h2);
    line-height: 1.1;
    letter-spacing: -0.03em;
    text-wrap: balance;
}

/* On narrow screens the gradient has no room to fall off, so the text needs a
   full-width scrim behind it instead of a directional one. */
@media (max-width: 44em) {
    .statement::before {
        background: rgba(17, 17, 17, 0.74);
    }
    .statement__quote { max-width: none; }
}