.page-hero {
    padding-block: clamp(4rem, 9vw, 7rem);
    background:
        linear-gradient(100deg, var(--color-cream-100), transparent 70%);
}

/* The 12ch measure on h1 is for the home hero, where the photograph fills the
   column beside it. These pages have nothing there, so the heading runs wider
   rather than leaving half the band empty. */
.page-hero h1 {
    max-width: 20ch;
    font-size: clamp(2.8rem, 7vw, 5.5rem);
}

.page-hero .lede {
    max-width: 46rem;
}

.breadcrumbs {
    margin-bottom: 1.5rem;
    color: var(--color-muted);
    font-size: 0.82rem;
}

.breadcrumbs ol {
    display: flex;
    flex-wrap: wrap;
    gap: 0.5rem;
    margin: 0;
    padding: 0;
    list-style: none;
}

.breadcrumbs li:not(:last-child)::after {
    margin-inline-start: 0.5rem;
    content: "/";
}

.notice {
    padding: 1rem 1.2rem;
    border-inline-start: 0.25rem solid var(--color-gold-700);
    border-radius: var(--radius-small);
    border-start-start-radius: 0;
    border-end-start-radius: 0;
    background: #fbf6e9;
}

.notice p:last-child {
    margin-bottom: 0;
}

.section-actions {
    margin-top: 2rem;
}

/* The form used to sit in a 0.75fr column beside the introduction, which left
   each field about 195px — too narrow for a select reading "Supermarket /
   retail chain". It runs the full width below the text instead. */
.quote-layout {
    display: grid;
    gap: clamp(2rem, 5vw, 3.5rem);
}

.quote-layout > :first-child {
    max-width: 46rem;
}

.quote-form {
    padding: clamp(1.25rem, 4vw, 2.5rem);
    border: 1px solid var(--color-line);
    border-radius: var(--radius-large);
    background: var(--color-white);
    box-shadow: var(--shadow-soft);
}

.form-grid {
    display: grid;
    gap: 1rem;
}

.form-field {
    display: grid;
    gap: 0.4rem;
}

.form-field label,
.form-label {
    font-size: 0.82rem;
    font-weight: 800;
}

.form-field input,
.form-field select,
.form-field textarea {
    width: 100%;
    min-height: 3.25rem;
    border: 1px solid var(--color-line-strong);
    border-radius: var(--radius-small);
    background: var(--color-white);
    padding: 0.7rem 0.85rem;
}

.form-field textarea {
    min-height: 8rem;
    resize: vertical;
}
.form-field--wide {
    margin-top: 1rem;
}


.quote-form fieldset {
    margin: 0;
    padding: 0;
    border: 0;
}

.quote-form fieldset[disabled] {
    opacity: 0.78;
}

.form-actions {
    display: flex;
    align-items: center;
    gap: 1rem;
    margin-top: 1.5rem;
}

.form-note {
    color: var(--color-muted);
    font-size: 0.84rem;
}

.form-consent {
    display: grid;
    gap: 0.45rem;
    margin-top: 1.25rem;
}

.form-consent label {
    display: flex;
    align-items: flex-start;
    gap: 0.7rem;
    font-size: 0.9rem;
    font-weight: 600;
}

.form-consent input {
    flex: 0 0 auto;
    width: 1.15rem;
    min-height: 1.15rem;
    margin-top: 0.15rem;
    accent-color: var(--color-forest-700);
}

.form-consent__link {
    margin-inline-start: 1.85rem;
    font-size: 0.88rem;
}

.privacy-content {
    max-width: 52rem;
}

.privacy-content section + section {
    margin-top: 2.25rem;
}

.privacy-content h2 {
    margin-bottom: 0.75rem;
    font-size: clamp(1.45rem, 3vw, 2rem);
}

.closing-cta {
    background: var(--color-forest-800);
    color: var(--color-white);
}

.closing-cta__inner {
    display: flex;
    flex-direction: column;
    align-items: flex-start;
    gap: 1.5rem;
    padding-block: clamp(3rem, 7vw, 5rem);
}

.closing-cta h2 {
    margin-bottom: 0;
    color: var(--color-white);
    font-size: clamp(2rem, 5vw, 3.75rem);
}

.site-footer {
    background: var(--color-navy-950);
    color: rgb(255 255 255 / 72%);
}

.footer-grid {
    display: grid;
    gap: 2.5rem;
    padding-block: 4rem;
}

.brand--footer .brand__logo {
    height: 4rem;
}

.footer-brand p {
    margin-top: 1.2rem;
}

.footer-heading {
    margin-bottom: 1rem;
    color: var(--color-white);
    font-family: var(--font-sans);
    font-size: 0.82rem;
    font-weight: 800;
    letter-spacing: 0.1em;
    text-transform: uppercase;
}

.footer-links {
    margin: 0;
    padding: 0;
    list-style: none;
}

.footer-links li + li {
    margin-top: 0.6rem;
}

.footer-links a {
    text-decoration: none;
}

.footer-links a:hover {
    color: var(--color-white);
}

.footer-bottom {
    display: flex;
    flex-wrap: wrap;
    justify-content: space-between;
    gap: 0.75rem 2rem;
    padding-block: 1.25rem;
    border-top: 1px solid rgb(255 255 255 / 13%);
    font-size: 0.78rem;
}

.footer-bottom p {
    margin: 0;
}

@media (min-width: 42rem) {
    .grid--two,
    .form-grid--columns {
        grid-template-columns: repeat(2, 1fr);
    }

    .grid--four {
        grid-template-columns: repeat(2, 1fr);
    }

    .footer-grid {
        grid-template-columns: repeat(2, 1fr);
    }

    .closing-cta__inner {
        flex-direction: row;
        align-items: center;
        justify-content: space-between;
    }
}

/* Three columns from 42rem left a card with 155px of text — around twenty
   characters a line on a portrait tablet. They wait for the room. */
@media (min-width: 52rem) {
    .grid--three,
    .stat-strip {
        grid-template-columns: repeat(3, 1fr);
    }
}

@media (min-width: 68rem) {
    .hero__grid {
        grid-template-columns: minmax(0, 1.05fr) minmax(22rem, 0.75fr);
    }

    /* With the whole width available, two columns would stretch each field to
       560px. Three keeps them at a size a person can scan. */
    .form-grid--columns {
        grid-template-columns: repeat(3, 1fr);
    }

    .grid--four {
        grid-template-columns: repeat(4, 1fr);
    }

    .footer-grid {
        grid-template-columns: 1.4fr 1fr 1fr 1.3fr;
    }
}

@media (max-width: 67.99rem) {
    .js .menu-toggle {
        display: inline-flex;
    }

    .js .site-nav {
        position: absolute;
        top: 100%;
        inset-inline: 1rem;
        display: none;
        align-items: stretch;
        border: 1px solid var(--color-line);
        border-radius: var(--radius-medium);
        background: var(--color-white);
        box-shadow: var(--shadow-soft);
        padding: 1rem;
    }

    .js [data-menu-open] .site-nav {
        display: grid;
    }

    .site-nav {
        gap: 0.75rem;
    }

    .site-nav ul {
        align-items: stretch;
        flex-direction: column;
    }
    .no-js .header-main {
        flex-wrap: wrap;
        padding-block: 1rem;
    }

    .no-js .site-nav {
        width: 100%;
        align-items: stretch;
        flex-direction: column;
    }


    .site-nav ul a {
        padding: 0.8rem;
    }
}

@media (max-width: 35rem) {
    .utility-bar__inner {
        justify-content: center;
    }

    .utility-bar p {
        display: none;
    }

    .hero-visual {
        min-height: 21rem;
    }

    .hero-visual__route {
        grid-template-columns: 1fr;
    }

    .hero-visual__route span {
        min-height: auto;
    }

    .form-actions {
        align-items: stretch;
        flex-direction: column;
    }
}

@media (prefers-reduced-motion: reduce) {
    html {
        scroll-behavior: auto;
    }

    *,
    *::before,
    *::after {
        scroll-behavior: auto !important;
        transition-duration: 0.01ms !important;
    }
}

/* A field no person sees. Kept out of the flow by position rather than
   display:none, which some bots know to skip. */
.form-honeypot {
    position: absolute;
    width: 1px;
    height: 1px;
    overflow: hidden;
    clip-path: inset(50%);
    white-space: nowrap;
}

.form-required {
    color: var(--color-alert);
    font-weight: 700;
}

.form-error {
    margin: 0;
    color: var(--color-alert);
    font-size: 0.82rem;
    font-weight: 600;
}

.form-field--error input,
.form-field--error select,
.form-field--error textarea {
    border-color: var(--color-alert);
}

.form-consent.form-field--error input {
    outline: 0.15rem solid var(--color-alert);
    outline-offset: 0.15rem;
}

.notice--alert {
    border-inline-start-color: var(--color-alert);
    background: var(--color-alert-surface);
}

.notice--success {
    border-inline-start-color: var(--color-forest-700);
    background: var(--color-success-surface);
}

.notice:focus-visible {
    outline: 0.2rem solid var(--color-gold-700);
    outline-offset: 0.2rem;
}