/*
 * David Support: modern design layer.
 * Loaded after the original theme and custom.css, so it overrides them. Colours, type and spacing come from the
 * tokens below; change them here to restyle the whole site.
 */
/* Inter, self-hosted: one variable file covers every weight, with an optical-size axis so small text gets sturdier,
   more open letterforms and large headings get tighter ones. */
@font-face {
    font-family: "Inter";
    font-style: normal;
    font-weight: 100 900;
    font-display: swap;
    src: url("../fonts/inter-latin-opsz-normal.woff2") format("woff2");
    unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329,
        U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
}

/* Shown until Inter loads, sized to match it so the page does not shift. */
@font-face {
    font-family: "Inter Fallback";
    src: local("Arial");
    size-adjust: 107.4%;
    ascent-override: 90.2%;
    descent-override: 22.5%;
    line-gap-override: 0%;
}

:root {
    --ink: #0f1f2e;
    --text: #2c3b4b;
    --muted: #526174;
    --brand: #119ee6;
    --brand-dark: #0a74b3;
    --brand-darker: #085f93;
    --brand-soft: #eaf6fd;
    --bg: #ffffff;
    --bg-soft: #f5f8fb;
    --line: #e3e9ef;
    --radius: 14px;
    --radius-sm: 10px;
    --shadow-sm: 0 1px 2px rgba(15, 31, 46, .06);
    --shadow: 0 1px 2px rgba(15, 31, 46, .05), 0 10px 30px rgba(15, 31, 46, .08);
    --font: "Inter", "Inter Fallback", system-ui, -apple-system, "Segoe UI", Roboto, "Helvetica Neue", Arial, sans-serif;
    --header-h: 72px;
}

/* ------------------------------------------------------------------ base type */
html {
    scroll-behavior: smooth;
}

body,
h1, h2, h3, h4, h5, h6,
.h1, .h2, .h3, .h4, .h5, .h6,
p, a, li, label, input, textarea, select, button, .btn, blockquote {
    font-family: var(--font);
}

body {
    color: var(--text);
    font-size: 17px;
    line-height: 1.65;
    background: var(--bg);
    text-rendering: optimizeLegibility;
    font-optical-sizing: auto;
    -webkit-text-size-adjust: 100%;
    text-size-adjust: 100%;
}

h1, h2, h3, h4, h5, h6,
.h1, .h2, .h3, .h4, .h5, .h6 {
    color: var(--ink);
    font-weight: 700;
    letter-spacing: -.012em;
    line-height: 1.2;
}

a {
    color: var(--brand-dark);
}

a:hover,
a:focus {
    color: var(--brand-darker);
}

:focus-visible {
    outline: 3px solid rgba(17, 158, 230, .55);
    outline-offset: 2px;
}

/* ------------------------------------------------------------------ section titles: no divider lines */
.section--title {
    margin: 0 auto 44px;
    padding-bottom: 0;
    max-width: 720px;
}

.section--title .h2,
.section--title h2 {
    font-size: 38px;
    font-weight: 700;
    letter-spacing: -.018em;
}

.section--title .h2:before,
.section--title .h2:after {
    display: none;
}

.section--title p {
    margin: 10px 0 0;
    color: var(--muted);
    font-size: 18px;
}

/* ------------------------------------------------------------------ buttons */
.btn,
.btn.btn-default {
    display: inline-block;
    padding: 13px 26px;
    border: 1.5px solid var(--brand-dark);
    border-radius: 999px;
    background: transparent;
    color: var(--brand-dark);
    font-size: 16px;
    font-weight: 600;
    line-height: 1.2;
    text-transform: none;
    letter-spacing: 0;
    box-shadow: none;
    transition: background .15s, color .15s, border-color .15s, transform .15s;
}

.btn:hover,
.btn.btn-default:hover,
.btn:focus {
    background: var(--brand-soft);
    border-color: var(--brand-dark);
    color: var(--brand-darker);
}

.btn.active,
.btn.btn-default.active,
button.btn[type="submit"] {
    background: var(--brand-dark);
    border-color: var(--brand-dark);
    color: #fff;
}

.btn.active:hover,
.btn.btn-default.active:hover,
button.btn[type="submit"]:hover {
    background: var(--brand-darker);
    border-color: var(--brand-darker);
    color: #fff;
    transform: translateY(-1px);
}

/* ------------------------------------------------------------------ forms */
.form-control,
input.form-control,
textarea.form-control {
    height: 50px;
    padding: 0 16px;
    border: 1.5px solid var(--line);
    border-radius: var(--radius-sm);
    background: #fff;
    color: var(--ink);
    font-size: 16px;
    box-shadow: none;
    transition: border-color .15s, box-shadow .15s;
}

textarea.form-control {
    height: auto;
    min-height: 110px;
    padding: 12px 16px;
}

.form-control::placeholder {
    color: #8a98a8;
}

.form-control:focus {
    border-color: var(--brand);
    box-shadow: 0 0 0 4px rgba(17, 158, 230, .16);
}

.form-group {
    margin-bottom: 14px;
}

.field-error-msg {
    margin-top: 4px;
    color: #b42318;
    font-size: 13px;
}

/* file picker */


/* ------------------------------------------------------------------ header */
.site-header {
    position: sticky;
    top: 0;
    z-index: 1000;
    /* Dark navy band with a blue underline, the same look as the emails. */
    background: var(--ink);
    border-bottom: 4px solid var(--brand-dark);
    transition: box-shadow .2s;
}

.site-header.is-scrolled {
    box-shadow: 0 8px 26px rgba(15, 31, 46, .28);
}

.site-header a:focus-visible,
.site-header .nav-toggle:focus-visible {
    outline: 2px solid #6cc4f5;
    outline-offset: 3px;
}

.site-header__inner {
    display: flex;
    align-items: center;
    gap: 28px;
    min-height: var(--header-h);
}

.site-logo {
    flex: 0 0 auto;
    display: block;
}

.site-logo img {
    display: block;
    width: auto;
}

.site-nav {
    flex: 1 1 auto;
}

.site-nav .header--nav-links {
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 2px;
    margin: 0;
    padding: 0;
    list-style: none;
}

.site-nav .header--nav-links > li {
    float: none;
}

.site-nav .header--nav-links > li > a {
    display: block;
    padding: 9px 14px;
    border: 0;
    border-radius: 999px;
    background: transparent;
    color: #dbe6f1;
    font-size: 15px;
    font-weight: 500;
    line-height: 1.2;
    transition: background .15s, color .15s;
}

.site-nav .header--nav-links > li + li > a,
.site-nav .header--nav-links > li > a:hover,
.site-nav .header--nav-links > li.active > a {
    margin: 0;
}

.site-nav .header--nav-links > li > a:hover {
    background: rgba(255, 255, 255, .09);
    color: #fff;
}

.site-nav .header--nav-links > li.active > a {
    background: rgba(255, 255, 255, .14);
    color: #fff;
    font-weight: 600;
}

.header-call {
    flex: 0 0 auto;
    display: inline-flex;
    align-items: center;
    gap: 8px;
    padding: 11px 20px;
    border-radius: 999px;
    background: var(--brand-dark);
    color: #fff;
    font-size: 15px;
    font-weight: 600;
    line-height: 1;
    white-space: nowrap;
    transition: background .15s, transform .15s;
}

.header-call:hover {
    background: #0c86cf;
    color: #fff;
    transform: translateY(-1px);
}

.nav-toggle {
    display: none;
}

/* ------------------------------------------------------------------ hero */
.hero {
    position: relative;
    overflow: hidden;
    padding: 72px 0 52px;
    background:
        radial-gradient(900px 420px at 85% -10%, rgba(17, 158, 230, .18), transparent 60%),
        radial-gradient(700px 380px at -10% 110%, rgba(17, 158, 230, .10), transparent 60%),
        linear-gradient(180deg, #f3f9fe 0%, #ffffff 100%);
}

.hero__grid {
    display: grid;
    grid-template-columns: minmax(0, 1.1fr) minmax(0, 0.9fr);
    gap: 56px;
    align-items: center;
}

.hero__eyebrow {
    display: inline-block;
    margin-bottom: 18px;
    padding: 6px 14px;
    border-radius: 999px;
    background: var(--brand-soft);
    color: var(--brand-darker);
    font-size: 14px;
    font-weight: 600;
}

.hero h1 {
    margin: 0 0 18px;
    font-size: 54px;
    font-weight: 800;
    letter-spacing: -.022em;
    line-height: 1.08;
}

.hero h1 span {
    color: var(--brand-dark);
}

.hero__lead {
    max-width: 540px;
    margin: 0 0 28px;
    color: var(--text);
    font-size: 20px;
    line-height: 1.55;
}

.hero__actions {
    display: flex;
    flex-wrap: wrap;
    gap: 12px;
    margin-bottom: 30px;
}

.hero__actions .btn {
    padding: 15px 28px;
}

.hero__checks {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 10px 24px;
    max-width: 540px;
    margin: 0;
    padding: 0;
    list-style: none;
}

.hero__checks li {
    display: flex;
    align-items: center;
    gap: 10px;
    color: var(--ink);
    font-size: 16px;
    font-weight: 600;
}

.hero__checks i {
    flex: 0 0 auto;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 26px;
    height: 26px;
    border-radius: 50%;
    background: var(--brand-soft);
    color: var(--brand-dark);
    font-size: 13px;
}

.hero-card {
    padding: 30px 30px 26px;
    border: 1px solid var(--line);
    border-radius: 20px;
    background: #fff;
    box-shadow: var(--shadow);
}

.hero-card form {
    position: static;
    margin: 0;
    padding: 0;
    border: 0;
    background: transparent;
    box-shadow: none;
}

.hero-card h2 {
    margin: 0 0 4px;
    font-size: 24px;
    text-align: left;
}

.hero-card__sub {
    margin: 0 0 18px;
    color: var(--muted);
    font-size: 15px;
}

.hero-card .row {
    margin-left: -7px;
    margin-right: -7px;
}

.hero-card .row > [class*="col-"] {
    padding-left: 7px;
    padding-right: 7px;
}

.hero-card button[type="submit"] {
    width: 100%;
    margin-top: 6px;
    padding: 15px;
}

.hero-card .recaptcha-note {
    margin-top: 12px;
    text-align: center;
}

/* ------------------------------------------------------------------ sections */
.services--section,
.faq--section {
    background: var(--bg-soft);
}

.bg--color-lightgray {
    background: var(--bg-soft);
}

/* service cards */
.service-grid {
    display: grid;
    grid-template-columns: repeat(3, minmax(0, 1fr));
    gap: 22px;
}

.service-card {
    display: flex;
    flex-direction: column;
    padding: 28px 26px 24px;
    border: 1px solid var(--line);
    border-radius: var(--radius);
    background: #fff;
    color: var(--text);
    box-shadow: var(--shadow-sm);
    transition: transform .18s, box-shadow .18s, border-color .18s;
}

.service-card:hover,
.service-card:focus {
    border-color: rgba(17, 158, 230, .45);
    box-shadow: var(--shadow);
    color: var(--text);
    transform: translateY(-3px);
}

.service-card__icon {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 52px;
    height: 52px;
    margin-bottom: 18px;
    border-radius: 14px;
    background: var(--brand-soft);
    color: var(--brand-dark);
    font-size: 24px;
}

.service-card h3 {
    margin: 0 0 8px;
    font-size: 20px;
}

.service-card p {
    flex: 1 1 auto;
    margin: 0 0 16px;
    font-size: 16px;
}

.service-card__more {
    color: var(--brand-dark);
    font-weight: 600;
    font-size: 15px;
}

.service-card__more i {
    margin-left: 4px;
    transition: transform .15s;
}

.service-card:hover .service-card__more i {
    transform: translateX(3px);
}

/* area and guide links under the cards */
.service--links {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 28px 48px;
    max-width: 920px;
    margin: 52px auto 0;
    text-align: left;
}

.service--links .link-label {
    margin: 0 0 8px;
    color: var(--ink);
    font-size: 15px;
    font-weight: 700;
    letter-spacing: .02em;
    text-transform: uppercase;
}

.service--links .link-list {
    display: block;
}

.service--links .link-list li {
    display: block;
    padding: 7px 0;
    border-bottom: 1px solid var(--line);
    font-size: 16px;
}

.service--links .link-list li + li::before {
    display: none;
}

.service--links .link-list a {
    color: var(--text);
}

.service--links .link-list a:hover {
    color: var(--brand-darker);
}

/* pricing */
.offer-card {
    padding: 30px 26px;
    border-radius: var(--radius);
    box-shadow: var(--shadow-sm);
}

.offer-card.featured {
    border-color: var(--brand);
    box-shadow: 0 12px 34px rgba(17, 158, 230, .2);
}

.offer-card i {
    color: var(--brand-dark);
}

.offer-card h3 {
    font-size: 24px;
}

/* why us */
.why-stats {
    display: grid;
    grid-template-columns: repeat(4, minmax(0, 1fr));
    gap: 18px;
    margin-bottom: 48px;
}

.why-stat {
    padding: 26px 22px;
    border-radius: var(--radius);
    background: var(--brand-soft);
    text-align: left;
}

.why-stat strong {
    display: block;
    margin-bottom: 4px;
    color: var(--brand-darker);
    font-size: 34px;
    font-weight: 800;
    letter-spacing: -.03em;
    line-height: 1.1;
}

.why-stat span {
    display: block;
    margin-bottom: 8px;
    color: var(--ink);
    font-weight: 600;
}

.why-stat p {
    margin: 0;
    font-size: 15px;
    line-height: 1.5;
}

.why-grid {
    display: grid;
    grid-template-columns: repeat(3, minmax(0, 1fr));
    gap: 30px 34px;
}

.why-item {
    display: grid;
    grid-template-columns: 40px 1fr;
    gap: 4px 16px;
}

.why-item i {
    grid-row: 1 / span 2;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 40px;
    height: 40px;
    border-radius: 12px;
    background: var(--brand-soft);
    color: var(--brand-dark);
    font-size: 18px;
}

.why-item h3 {
    margin: 0;
    font-size: 18px;
}

.why-item p {
    margin: 0;
    font-size: 16px;
    line-height: 1.55;
}

/* reviews */
.reviews-grid {
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: 22px;
    max-width: 960px;
    margin: 0 auto;
}

.review-card {
    display: flex;
    flex-direction: column;
    padding: 30px 30px 26px;
    border: 1px solid var(--line);
    border-radius: var(--radius);
    background: #fff;
    box-shadow: var(--shadow-sm);
}

.review-card__stars {
    margin-bottom: 14px;
    color: #f5a623;
    letter-spacing: 2px;
}

.review-card blockquote {
    flex: 1 1 auto;
    margin: 0 0 22px;
    padding: 0;
    border: 0;
    color: var(--ink);
    font-size: 18px;
    line-height: 1.6;
}

.review-card__who {
    display: flex;
    align-items: center;
    gap: 14px;
}

.review-card__avatar {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 46px;
    height: 46px;
    border-radius: 50%;
    background: var(--brand-soft);
    color: var(--brand-darker);
    font-weight: 700;
}

.review-card__who strong {
    display: block;
    color: var(--ink);
    line-height: 1.2;
}

.review-card__who span {
    color: var(--muted);
    font-size: 14px;
}

.review-card__tag {
    margin-left: auto;
    padding: 4px 10px;
    border-radius: 999px;
    background: #e9f7ef;
    color: #146c43;
    font-size: 12px;
    font-weight: 600;
    white-space: nowrap;
}

/* FAQ */
.faq-list {
    max-width: 820px;
    margin: 0 auto;
}

.faq-list details {
    margin-bottom: 12px;
    padding: 4px 22px;
    border: 1px solid var(--line);
    border-radius: var(--radius-sm);
    background: #fff;
}

.faq-list summary {
    color: var(--ink);
    font-size: 17px;
}

.faq--section .faq-list details {
    border-bottom: 1px solid var(--line);
}

/* appointment steps and contact */
.appointment--section form,
.appointment--form {
    border: 1px solid var(--line);
    border-radius: var(--radius);
    box-shadow: var(--shadow);
}

/* sub-page header band */
.page-header--section .page--title,
.page-header--section .page--title[data-bg-img] {
    padding: 52px 0 44px !important;
    background: linear-gradient(180deg, #f3f9fe, #fff) !important;
}

.page-header--section .page--title:before {
    display: none !important;
}

.page-header--section .page--title .h1,
.page-header--section .page--title h1 {
    color: var(--ink);
    font-size: 42px;
    font-weight: 800;
    letter-spacing: -.03em;
    text-align: left;
}

.page-header--section .page--title .container {
    text-align: left;
}

.page-header--section .page--breadcrumb {
    background: #fff;
    border-bottom: 1px solid var(--line);
}

.page-header--section .page--breadcrumb .breadcrumb {
    text-align: left;
}

/* call to action band */
.cta--section.bg--color-darkgray {
    background: linear-gradient(120deg, #0a4f7a, #0a74b3);
    color: #fff;
}

.cta--section .cta--content h2,
.cta--section .cta--content .h3 {
    color: #fff;
}

.cta--section .cta--content p,
.cta--section .cta--content strong {
    color: rgba(255, 255, 255, .9);
}

.cta--section .cta--btn .btn {
    border-color: #fff;
    background: #fff;
    color: var(--brand-darker);
}

.cta--section .cta--btn .btn:hover {
    background: var(--brand-soft);
    color: var(--brand-darker);
}

/* ------------------------------------------------------------------ small screens */
@media (max-width: 991px) {
    .hero {
        padding: 44px 0 36px;
    }

    .hero__grid {
        grid-template-columns: 1fr;
        gap: 36px;
    }

    .hero h1 {
        font-size: 42px;
    }

    .service-grid,
    .why-grid {
        grid-template-columns: repeat(2, minmax(0, 1fr));
    }

    .why-stats {
        grid-template-columns: repeat(2, minmax(0, 1fr));
    }

    .site-header__inner {
        gap: 16px;
    }

    .nav-toggle {
        display: inline-flex;
        flex-direction: column;
        justify-content: center;
        gap: 5px;
        width: 44px;
        height: 44px;
        margin-left: auto;
        padding: 0 11px;
        border: 1.5px solid rgba(255, 255, 255, .3);
        border-radius: 12px;
        background: transparent;
        cursor: pointer;
    }

    .nav-toggle span {
        display: block;
        height: 2px;
        border-radius: 2px;
        background: #fff;
        transition: transform .2s, opacity .2s;
    }

    .site-header.is-open .nav-toggle span:nth-child(1) {
        transform: translateY(7px) rotate(45deg);
    }

    .site-header.is-open .nav-toggle span:nth-child(2) {
        opacity: 0;
    }

    .site-header.is-open .nav-toggle span:nth-child(3) {
        transform: translateY(-7px) rotate(-45deg);
    }

    .header-call {
        order: 3;
        display: none;
    }

    .site-nav {
        position: absolute;
        top: 100%;
        left: 0;
        right: 0;
        display: none;
        padding: 10px 16px 18px;
        border-bottom: 1px solid rgba(255, 255, 255, .14);
        background: var(--ink);
        box-shadow: 0 16px 30px rgba(15, 31, 46, .3);
    }

    .site-header.is-open .site-nav {
        display: block;
    }

    .site-nav .header--nav-links {
        flex-direction: column;
        align-items: stretch;
        gap: 0;
    }

    .site-nav .header--nav-links > li > a {
        padding: 14px 12px;
        border-radius: 10px;
        font-size: 17px;
    }
}

@media (max-width: 767px) {
    body {
        font-size: 16px;
    }

    .section--title .h2,
    .section--title h2 {
        font-size: 30px;
    }

    .section--title {
        margin-bottom: 30px;
    }

    .hero {
        padding: 32px 0 28px;
    }

    .hero h1 {
        font-size: 30px;
        line-height: 1.14;
        letter-spacing: -.02em;
    }

    .hero__lead {
        font-size: 17px;
        line-height: 1.55;
    }

    .hero__actions .btn {
        flex: 1 1 100%;
        text-align: center;
    }

    .hero__checks {
        grid-template-columns: 1fr;
    }

    .hero-card {
        padding: 24px 20px 20px;
        border-radius: 16px;
    }

    .service-grid,
    .why-grid,
    .reviews-grid {
        grid-template-columns: 1fr;
    }

    .why-stats {
        grid-template-columns: 1fr 1fr;
        gap: 12px;
    }

    .why-stat {
        padding: 18px 16px;
    }

    .why-stat strong {
        font-size: 28px;
    }

    .service--links {
        grid-template-columns: 1fr;
        gap: 22px;
        margin-top: 36px;
    }

    .review-card {
        padding: 24px 20px;
    }

    .review-card blockquote {
        font-size: 17px;
    }

    .page-header--section .page--title,
    .page-header--section .page--title[data-bg-img] {
        padding: 32px 0 26px !important;
    }

    .page-header--section .page--title .h1,
    .page-header--section .page--title h1 {
        font-size: 30px;
    }
}

.why-item {
    align-content: start;
}

/* ------------------------------------------------------------------ appointment section (over the original theme rules) */
.appointment--section .appointment--form form {
    margin-bottom: 0;
    padding: 28px 28px 24px;
    border: 1px solid var(--line);
    border-radius: var(--radius);
    background: #fff;
    box-shadow: var(--shadow);
}

.appointment--section .appointment--form {
    border: 0;
    box-shadow: none;
}

.appointment--section .appointment--form .h4 {
    margin-bottom: 14px;
    font-size: 22px;
    text-align: left;
}

.appointment--section .appointment--form .form-control {
    height: 50px;
    margin-top: 0;
    padding: 0 16px;
    border: 1.5px solid var(--line);
    border-radius: var(--radius-sm);
    color: var(--ink);
    font-size: 16px;
}

.appointment--section .appointment--form textarea.form-control {
    height: auto;
    min-height: 110px;
    padding: 12px 16px;
}

.appointment--section .appointment--form .form-control:focus {
    border-color: var(--brand);
    box-shadow: 0 0 0 4px rgba(17, 158, 230, .16);
}

.appointment--section .appointment--form .btn {
    width: 100%;
    margin-top: 6px;
    padding: 15px;
}

.appointment--item .step {
    color: #d5dee8;
    font-size: 22px;
    font-weight: 700;
}

.appointment--item .icon,
.appointment--item .icon i {
    color: var(--brand-dark);
}

.appointment--item .content h3,
.appointment--item .content .h4 {
    font-size: 19px;
}

/* ------------------------------------------------------------------ contact form, sub-page text, footer rule */
.contact--form form,
.contact--section form {
    padding: 28px 28px 24px;
    border: 1px solid var(--line);
    border-radius: var(--radius);
    background: #fff;
    box-shadow: var(--shadow);
}

.contact--form .form-control,
.contact--section .form-control {
    height: 50px;
    margin-top: 0;
    padding: 0 16px;
    border: 1.5px solid var(--line);
    border-radius: var(--radius-sm);
    color: var(--ink);
    font-size: 16px;
}

.contact--form textarea.form-control,
.contact--section textarea.form-control {
    height: auto;
    min-height: 130px;
    padding: 12px 16px;
}

.contact--form .form-control:focus,
.contact--section .form-control:focus {
    border-color: var(--brand);
    box-shadow: 0 0 0 4px rgba(17, 158, 230, .16);
}

.contact--form .btn,
.contact--section form .btn {
    width: 100%;
    margin-top: 6px;
    padding: 15px;
}

.page-content .lead {
    color: var(--text);
    font-size: 21px;
    font-weight: 400;
}

.page-content p,
.page-content li {
    font-size: 17px;
}

/* ------------------------------------------------------------------ alignment fixes */
/* Bootstrap's clearfix pseudo-elements become flex items inside .container and add the gap on both ends,
   which pushed the logo and Call button 28px in from the page content. */
.site-header__inner::before,
.site-header__inner::after {
    display: none;
}

/* every section's content uses the same width as the header and the other grids */
.reviews-grid {
    max-width: none;
}

/* ------------------------------------------------------------------ how it works */
.how--section {
    background: #fff;
}

.steps-grid {
    display: grid;
    grid-template-columns: repeat(4, minmax(0, 1fr));
    gap: 22px;
    counter-reset: step;
}

.step-card {
    position: relative;
    padding: 28px 24px 24px;
    border: 1px solid var(--line);
    border-radius: var(--radius);
    background: var(--bg-soft);
}

.step-card__num {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 40px;
    height: 40px;
    margin-bottom: 16px;
    border-radius: 50%;
    background: var(--brand-dark);
    color: #fff;
    font-size: 18px;
    font-weight: 700;
}

.step-card h3 {
    margin: 0 0 8px;
    font-size: 19px;
}

.step-card p {
    margin: 0;
    font-size: 16px;
    line-height: 1.55;
}

/* ------------------------------------------------------------------ get in touch */
.contact--section {
    background: var(--bg-soft);
}

.contact-grid {
    display: grid;
    grid-template-columns: minmax(0, 1fr) minmax(0, 1.1fr);
    gap: 40px;
    align-items: start;
}

.contact-list {
    display: grid;
    gap: 20px;
    margin: 0 0 28px;
    padding: 0;
    list-style: none;
}

.contact-list li {
    display: grid;
    grid-template-columns: 46px 1fr;
    gap: 16px;
    align-items: center;
}

.contact-list i {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 46px;
    height: 46px;
    border-radius: 14px;
    background: var(--brand-soft);
    color: var(--brand-dark);
    font-size: 20px;
}

.contact-list strong {
    display: block;
    color: var(--ink);
    line-height: 1.3;
}

.contact-list a,
.contact-list span {
    font-size: 17px;
}

.contact--map {
    margin: 0;
    overflow: hidden;
    border: 1px solid var(--line);
    border-radius: var(--radius);
    background: #fff;
}

.contact--map iframe {
    display: block;
    width: 100%;
    height: 300px;
    border: 0;
}

.book-card {
    padding: 22px 28px 26px;
    border: 1px solid var(--line);
    border-radius: 20px;
    background: #fff;
    box-shadow: var(--shadow);
}

.book-card__tabs {
    display: flex;
    gap: 6px;
    margin-bottom: 20px;
    padding: 5px;
    border-radius: 999px;
    background: var(--bg-soft);
}

.book-card__tabs button {
    flex: 1 1 0;
    padding: 11px 12px;
    border: 0;
    border-radius: 999px;
    background: transparent;
    color: var(--muted);
    font-size: 15px;
    font-weight: 600;
    cursor: pointer;
    transition: background .15s, color .15s, box-shadow .15s;
}

.book-card__tabs button.is-active {
    background: #fff;
    color: var(--brand-darker);
    box-shadow: 0 1px 3px rgba(15, 31, 46, .15);
}

.book-card [hidden] {
    display: none !important;
}

.book-card form {
    margin: 0;
    padding: 0;
    border: 0;
    border-radius: 0;
    background: transparent;
    box-shadow: none;
}

.book-card .form-control {
    height: 50px;
    margin-top: 0;
    padding: 0 16px;
    border: 1.5px solid var(--line);
    border-radius: var(--radius-sm);
    color: var(--ink);
    font-size: 16px;
}

.book-card textarea.form-control {
    height: auto;
    min-height: 120px;
    padding: 12px 16px;
}

.book-card .form-control:focus {
    border-color: var(--brand);
    box-shadow: 0 0 0 4px rgba(17, 158, 230, .16);
}

.book-card .row {
    margin-left: -7px;
    margin-right: -7px;
}

.book-card .row > [class*="col-"] {
    padding-left: 7px;
    padding-right: 7px;
}

.book-card .btn {
    width: 100%;
    margin-top: 6px;
    padding: 15px;
}

.book-card .recaptcha-note {
    margin-top: 12px;
    text-align: center;
}

@media (max-width: 991px) {
    .steps-grid {
        grid-template-columns: repeat(2, minmax(0, 1fr));
    }

    .contact-grid {
        grid-template-columns: 1fr;
    }

    /* on small screens the form comes first; contact details and the map follow */
    .book-card {
        order: -1;
    }
}

@media (max-width: 767px) {
    .steps-grid {
        grid-template-columns: 1fr;
        gap: 14px;
    }

    .step-card {
        display: grid;
        grid-template-columns: 40px 1fr;
        gap: 2px 16px;
        padding: 20px;
    }

    .step-card__num {
        grid-row: 1 / span 2;
        margin: 0;
    }

    .book-card {
        padding: 16px 16px 20px;
        border-radius: 16px;
    }

    .book-card__tabs button {
        padding: 10px 6px;
        font-size: 14px;
    }

    .contact--map iframe {
        height: 240px;
    }
}

.book-card .appointment--form,
.book-card .contact--form {
    margin: 0;
    padding: 0;
    border: 0;
    border-radius: 0;
    background: transparent;
    box-shadow: none;
}

.recaptcha-note {
    font-size: 13px;
    line-height: 1.5;
}

/* Logo size: large on desktop, stepping down as the screen narrows to leave room for the menu button. These heights match
   the PNG sets and media queries in tools/build-pages/build.py (site_logo). */
.site-logo img {
    height: 54px;
}

@media (max-width: 767px) {
    .site-logo img {
        height: 46px;
    }
}

@media (max-width: 420px) {
    .site-logo img {
        height: 40px;
    }
}

@media (max-width: 340px) {
    .site-logo img {
        height: 34px;
    }
}

/* Narrow desktop windows: the full menu and phone button need the room, so the logo keeps its smaller size. */
@media (min-width: 992px) and (max-width: 1119px) {
    .site-logo img {
        height: 46px;
    }
}

/* Very small phones: let the review footer wrap and keep the bottom bar inside the screen. */
.review-card__who {
    flex-wrap: wrap;
    row-gap: 8px;
}

@media (max-width: 360px) {
    .mobile-cta a {
        padding: 14px 2px;
        font-size: 14px;
        white-space: nowrap;
    }

    .review-card__tag {
        margin-left: 0;
    }
}

@media (max-width: 360px) {
    .hero h1 {
        font-size: 27px;
    }
}





/* In-page link targets: the section starts a little below the sticky header, not a header-and-a-half below it. The
   offset is the section's top padding subtracted from "header height + 20px", so it differs on phones. */
.anchor {
    position: relative;
    top: -23px;
    height: 0;
    visibility: hidden;
}

@media (max-width: 767px) {
    .anchor {
        top: -49px;
    }
}

/* ------------------------------------------------------------------ photo field (quote form) */
.file-field__label {
    display: block;
    margin: 0 0 6px;
    color: var(--ink);
    font-size: 14px;
    font-weight: 600;
}

.file-field__label span {
    color: var(--muted);
    font-weight: 500;
}

.file-field__row {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: 8px 12px;
    padding: 10px 12px;
    border: 1.5px dashed #b9c9da;
    border-radius: var(--radius-sm);
    background: var(--bg-soft);
    transition: border-color .15s, background .15s;
}

/* the real file input stays in the page (so it works with keyboards and screen readers) but is not drawn */
.file-field__input {
    position: absolute;
    width: 1px;
    height: 1px;
    margin: -1px;
    padding: 0;
    overflow: hidden;
    border: 0;
    opacity: 0;
    clip: rect(0 0 0 0);
}

.file-field__btn {
    flex: 0 0 auto;
    display: inline-flex;
    align-items: center;
    gap: 8px;
    margin: 0;
    padding: 9px 16px;
    border: 1.5px solid var(--brand-dark);
    border-radius: 999px;
    background: #fff;
    color: var(--brand-dark);
    font-size: 15px;
    font-weight: 600;
    line-height: 1.2;
    cursor: pointer;
    transition: background .15s;
}

.file-field__btn:hover {
    background: var(--brand-soft);
}

.file-field__input:focus-visible + .file-field__btn {
    outline: 3px solid rgba(17, 158, 230, .55);
    outline-offset: 2px;
}

.file-field .file-status {
    flex: 1 1 140px;
    min-width: 0;
    overflow: hidden;
    color: var(--muted);
    font-size: 14px;
    text-overflow: ellipsis;
    white-space: nowrap;
}

.file-field__clear {
    flex: 0 0 auto;
    width: 30px;
    height: 30px;
    padding: 0;
    border: 0;
    border-radius: 50%;
    background: transparent;
    color: var(--muted);
    font-size: 22px;
    line-height: 1;
    cursor: pointer;
}

.file-field__clear:hover {
    background: rgba(15, 31, 46, .08);
    color: var(--ink);
}

.file-field__help {
    margin: 6px 0 0;
    color: var(--muted);
    font-size: 13px;
    line-height: 1.4;
}

.file-field.is-selected .file-field__row {
    border-style: solid;
    border-color: var(--brand);
    background: var(--brand-soft);
}

.file-field.is-selected .file-status {
    color: var(--ink);
    font-weight: 600;
}

.file-field.is-error .file-field__row {
    border-color: #d92d20;
    background: #fef3f2;
}

.file-field.is-error .file-status {
    color: #b42318;
    white-space: normal;
}

/* ------------------------------------------------------------------ coverage panel (home) */
.coverage {
    max-width: 920px;
    margin: 44px auto 0;
    padding: 28px 30px 26px;
    border: 1px solid #cfe6f6;
    border-radius: var(--radius);
    background: var(--brand-soft);
    text-align: center;
}

.coverage h3 {
    margin: 0 0 4px;
    font-size: 24px;
}

.coverage p {
    margin: 0 0 16px;
    color: var(--text);
}

.coverage__chips {
    display: flex;
    flex-wrap: wrap;
    justify-content: center;
    gap: 10px;
    margin: 0 0 18px;
    padding: 0;
    list-style: none;
}

.coverage__chips a {
    display: inline-block;
    padding: 8px 16px;
    border: 1px solid #b6d9ef;
    border-radius: 999px;
    background: #fff;
    color: var(--brand-darker);
    font-size: 15px;
    font-weight: 600;
    transition: background .15s, border-color .15s;
}

.coverage__chips a:hover {
    border-color: var(--brand-dark);
    background: var(--brand-soft);
}

.coverage__more {
    font-weight: 600;
}

.coverage__more i {
    margin-left: 4px;
}

@media (max-width: 767px) {
    .coverage {
        margin-top: 32px;
        padding: 22px 18px 20px;
    }

    .coverage h3 {
        font-size: 21px;
    }

    .coverage__chips {
        gap: 8px;
    }

    .coverage__chips a {
        padding: 7px 13px;
        font-size: 14px;
    }
}

/* travel-fee notes */
.pricing-note,
.offer-note {
    color: var(--muted);
    font-size: 14px;
    line-height: 1.5;
}

.pricing-note {
    max-width: 760px;
    margin: 18px auto 0;
    text-align: center;
}

.pricing-note i {
    margin-right: 4px;
    color: var(--brand-dark);
}

.offer-note {
    margin: 8px 0 0;
}

/* ------------------------------------------------------------------ popular locations tiles, consistent section ends */
.loc-tiles {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 10px;
}

.loc-tile {
    display: block;
    padding: 14px 16px;
    border: 1px solid var(--line);
    border-radius: var(--radius-sm);
    background: #fff;
    transition: border-color .15s, box-shadow .15s;
}

.loc-tile:hover {
    border-color: rgba(17, 158, 230, .5);
    box-shadow: var(--shadow-sm);
}

.loc-tile strong {
    display: block;
    color: var(--ink);
    font-size: 16px;
    line-height: 1.3;
}

.loc-tile span {
    display: block;
    margin-top: 2px;
    color: var(--muted);
    font-size: 13.5px;
    line-height: 1.4;
}

.loc-all {
    display: inline-block;
    margin-top: 12px;
    font-weight: 600;
}

.loc-all i {
    margin-left: 4px;
}

/* a section's last child never adds extra space below the section padding */
.faq-list details:last-child,
.offer-actions:last-child,
.pricing--section .container > :last-child {
    margin-bottom: 0;
}

@media (max-width: 767px) {
    .loc-tiles {
        grid-template-columns: 1fr;
    }
}

@media (max-width: 767px) {
    .pricing--section .offer-actions .btn:last-child {
        margin-bottom: 0;
    }
}

/* The floating cookie-preferences button is hidden everywhere: the footer's "Cookie settings" link reopens the preferences. */
.cky-btn-revisit-wrapper {
    display: none !important;
}

/* ------------------------------------------------------------------ accessibility and consistency fixes */
.skip-link {
    position: absolute;
    top: -60px;
    left: 12px;
    z-index: 2000;
    padding: 10px 16px;
    border-radius: 8px;
    background: var(--ink);
    color: #fff;
    font-weight: 600;
    transition: top .15s;
}

.skip-link:focus {
    top: 10px;
    color: #fff;
}

.offer-card .offer-title {
    margin: 0 0 8px;
    color: var(--ink);
    font-size: 24px;
    font-weight: 700;
    letter-spacing: -.012em;
    line-height: 1.2;
}

/* the reCAPTCHA notice must stay readable (it was 3.2:1) */
.recaptcha-note,
.recaptcha-note a {
    color: var(--muted);
}

/* links inside running text are underlined so they do not rely on colour alone */
.page-content p a:not(.btn),
.page-content li a:not(.btn),
.faq-list p a,
.coverage p a {
    text-decoration: underline;
    text-underline-offset: 2px;
}

main:focus {
    outline: none;
}

.page--breadcrumb .breadcrumb .active span,
.page--breadcrumb .breadcrumb > .active {
    color: var(--brand-darker);
}

main p a:not(.btn) {
    text-decoration: underline;
    text-underline-offset: 2px;
}

.text-muted {
    color: var(--muted);
}

/* ------------------------------------------------------------------ newsletter sign-up (footer) */
.newsletter-status {
    min-height: 1.4em;
    margin: 10px 0 0;
    font-size: 15px;
    font-weight: 600;
    line-height: 1.4;
}

.newsletter-status.is-success {
    color: #7ee2a8;
}

.newsletter-status.is-info {
    color: #8fd3ff;
}

.newsletter-status.is-error {
    color: #ffb4ab;
}

.newsletter-note {
    margin: 8px 0 0;
    color: #9fb3c8;
    font-size: 13px;
    line-height: 1.5;
}

.newsletter-note a {
    color: #cfe1f2;
    text-decoration: underline;
    text-underline-offset: 2px;
}

/* ------------------------------------------------------------------ confirm / unsubscribe pages */
.subscription-action {
    max-width: 560px;
    margin: 24px 0 8px;
    padding: 26px 28px;
    border: 1px solid var(--line);
    border-radius: var(--radius);
    background: #fff;
    box-shadow: var(--shadow-sm);
}

.subscription-action__text {
    margin: 0 0 16px;
    font-size: 19px;
    font-weight: 600;
    color: var(--ink);
}

.subscription-action.is-success {
    border-color: #9be0bb;
    background: #effaf4;
}

.subscription-action.is-error {
    border-color: #f2b8b0;
    background: #fef3f2;
}

.subscription-action.is-success .subscription-action__text,
.subscription-action.is-error .subscription-action__text {
    margin-bottom: 0;
}

/* ------------------------------------------------------------------ footer call to action */
.footer-cta {
    background: linear-gradient(135deg, #0b6fb3 0%, #1296e0 100%);
    padding: 34px 0;
}

.footer-cta .container {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 24px 40px;
    flex-wrap: wrap;
}

.footer-cta .container::before,
.footer-cta .container::after {
    display: none;
}

.footer-cta__text {
    flex: 1 1 420px;
}

.footer-cta .footer-cta__title {
    margin: 0 0 8px;
    font-size: 26px;
    line-height: 1.25;
    color: #fff;
}

.footer-cta__text p {
    margin: 0;
    font-size: 16px;
    line-height: 1.55;
    color: rgba(255, 255, 255, .92);
}

.footer-cta .footer-cta__actions {
    display: flex;
    flex-wrap: wrap;
    gap: 12px;
    margin: 0;
}

.site-footer .footer-cta .btn {
    margin: 0;
    background: transparent;
    border: 2px solid #fff;
    color: #fff;
}

.site-footer .footer-cta .btn.active {
    background: #fff;
    color: #0b6fb3;
}

.site-footer .footer-cta .btn:hover,
.site-footer .footer-cta .btn:focus {
    background: #fff;
    color: #0b6fb3;
}

@media (max-width: 767px) {
    .footer-cta {
        padding: 28px 0;
    }

    .footer-cta .footer-cta__title {
        font-size: 22px;
    }

    .footer-cta .footer-cta__actions .btn {
        flex: 1 1 100%;
        text-align: center;
    }
}

.subscription-action__form {
    display: flex;
    flex-wrap: wrap;
    gap: 12px;
}

.subscription-action__form .form-control {
    flex: 1 1 260px;
    min-width: 0;
}

.subscription-action__form .btn {
    margin: 0;
}

.subscription-action [hidden] {
    display: none !important;
}

/* ------------------------------------------------------------------ footer */
.site-footer {
    background: var(--ink);
    color: #b9c7d6;
    font-size: 15px;
}

.site-footer a {
    color: #b9c7d6;
    text-decoration: none;
}

.site-footer a:hover,
.site-footer a:focus-visible {
    color: #fff;
    text-decoration: underline;
}

.site-footer .btn:hover,
.site-footer .btn:focus-visible {
    text-decoration: none;
}

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

.site-footer__grid {
    display: grid;
    grid-template-columns: 1.3fr 1fr 1.1fr;
    gap: 40px;
    padding: 56px 0 44px;
}

.site-footer__logo img {
    display: block;
    width: auto;
    height: 34px;
}

.site-footer__brand p {
    max-width: 300px;
    margin: 18px 0 0;
    line-height: 1.65;
    color: #b9c7d6;
}

.site-footer__brand .site-footer__about {
    margin-top: 14px;
}

.site-footer__about a {
    color: #fff;
    font-weight: 600;
}

.site-footer__title {
    margin: 0 0 16px;
    font-size: 13px;
    font-weight: 700;
    letter-spacing: .09em;
    line-height: 1.3;
    text-transform: uppercase;
    color: #fff;
}

.site-footer__title--second {
    margin-top: 30px;
}

.site-footer__col li {
    margin: 0 0 10px;
    line-height: 1.45;
    color: #b9c7d6;
}

.site-footer__more a {
    color: #6cc4f5;
    font-weight: 600;
}

.site-footer__contact li {
    display: flex;
    align-items: flex-start;
    gap: 12px;
}

.site-footer__contact i {
    flex: 0 0 16px;
    margin-top: 3px;
    text-align: center;
    color: #6cc4f5;
}

/* contact details under the brand blurb */
.site-footer__brand .site-footer__contact {
    margin-top: 22px;
}

.site-footer__brand .site-footer__contact li {
    margin: 0 0 10px;
    line-height: 1.45;
    color: #b9c7d6;
}

/* newsletter strip */
.site-footer__news {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    justify-content: space-between;
    gap: 22px 40px;
    padding: 30px 0 32px;
    border-top: 1px solid rgba(255, 255, 255, .12);
}

.site-footer__news-text {
    flex: 1 1 300px;
}

.site-footer__news-text .site-footer__title {
    margin-bottom: 8px;
}

.site-footer__news-text p {
    margin: 0;
    color: #b9c7d6;
}

.site-footer__news-text .newsletter-note {
    max-width: 56ch;
    margin: 10px 0 0;
    font-size: 13px;
}

.site-footer__form {
    position: relative;
    flex: 1 1 380px;
    max-width: 480px;
}

.site-footer__form .newsletter-status {
    min-height: 0;
    margin: 0;
}

.site-footer__form .newsletter-status:not(:empty) {
    margin-top: 10px;
}

.site-footer__field {
    display: flex;
    gap: 10px;
}

.site-footer .site-footer__field .form-control {
    flex: 1 1 auto;
    min-width: 0;
    height: 48px;
    padding: 0 20px;
    border: 1px solid rgba(255, 255, 255, .24);
    border-radius: 999px;
    background: rgba(255, 255, 255, .06);
    box-shadow: none;
    color: #fff;
}

.site-footer .site-footer__field .form-control::placeholder {
    color: #9fb3c8;
    opacity: 1;
}

.site-footer .site-footer__field .form-control:focus {
    border-color: #6cc4f5;
    outline: none;
    background: rgba(255, 255, 255, .1);
}

.site-footer .site-footer__field .btn {
    flex: 0 0 auto;
    height: 48px;
    margin: 0;
    white-space: nowrap;
}

/* the legal line */
.site-footer__legal {
    display: flex;
    flex-wrap: wrap;
    justify-content: space-between;
    gap: 8px 24px;
    padding: 22px 0 30px;
    border-top: 1px solid rgba(255, 255, 255, .12);
    font-size: 14px;
}

.site-footer__legal p {
    margin: 0;
    color: #9fb3c8;
}

.site-footer__legal a {
    color: #b9c7d6;
}

@media (max-width: 991px) {
    .site-footer__grid {
        grid-template-columns: 1fr 1fr;
        gap: 36px 32px;
        padding: 44px 0 36px;
    }

    .site-footer__brand {
        grid-column: 1 / -1;
    }

    .site-footer__brand p {
        max-width: 480px;
    }
}

@media (max-width: 575px) {
    .site-footer__grid {
        grid-template-columns: 1fr;
        gap: 30px;
        padding: 36px 0 30px;
    }

    .site-footer__field {
        flex-wrap: wrap;
    }

    .site-footer .site-footer__field .btn {
        flex: 1 1 100%;
    }

    .site-footer__legal {
        flex-direction: column;
    }
}

/* "Follow us" icons: only present when a profile address is set in tools/build-pages/social.py */
.site-footer .site-footer__social {
    margin-top: 26px;
}

.site-footer .site-footer__social ul {
    display: flex;
    flex-wrap: wrap;
    gap: 10px;
}

.site-footer .site-footer__social a {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 40px;
    height: 40px;
    border: 1px solid rgba(255, 255, 255, .24);
    border-radius: 50%;
    color: #dbe6f1;
    font-size: 17px;
    transition: background .15s, border-color .15s, color .15s;
}

.site-footer .site-footer__social a:hover,
.site-footer .site-footer__social a:focus-visible {
    border-color: var(--brand-dark);
    background: var(--brand-dark);
    color: #fff;
    text-decoration: none;
}

.site-footer .site-footer__social .is-placeholder {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 40px;
    height: 40px;
    border: 1px solid rgba(255, 255, 255, .16);
    border-radius: 50%;
    color: rgba(219, 230, 241, .45);
    font-size: 17px;
    cursor: default;
}

@media (max-width: 575px) {
    .site-footer .site-footer__social ul {
        gap: 8px;
    }

    .site-footer .site-footer__social a,
    .site-footer .site-footer__social .is-placeholder {
        width: 36px;
        height: 36px;
        font-size: 16px;
    }
}

/* ------------------------------------------------------------------ cookie banner (vanilla-cookieconsent, css/cookieconsent.css) */
#cc-main {
    --cc-font-family: var(--font);
    --cc-bg: #fff;
    --cc-primary-color: var(--ink);
    --cc-secondary-color: var(--muted);
    --cc-link-color: var(--brand-dark);
    --cc-btn-border-radius: 12px; /* the settings rows; the buttons are made pill-shaped below */
    --cc-modal-border-radius: 14px;
    --cc-btn-primary-bg: var(--brand-dark);
    --cc-btn-primary-color: #fff;
    --cc-btn-primary-border-color: var(--brand-dark);
    --cc-btn-primary-hover-bg: var(--brand-darker);
    --cc-btn-primary-hover-color: #fff;
    --cc-btn-primary-hover-border-color: var(--brand-darker);
    --cc-btn-secondary-bg: #fff;
    --cc-btn-secondary-color: var(--brand-dark);
    --cc-btn-secondary-border-color: var(--brand-dark);
    --cc-btn-secondary-hover-bg: var(--brand-soft);
    --cc-btn-secondary-hover-color: var(--brand-darker);
    --cc-btn-secondary-hover-border-color: var(--brand-darker);
    --cc-separator-border-color: var(--line);
    --cc-toggle-on-bg: var(--brand-dark);
    --cc-toggle-off-bg: #8a99a8;
    --cc-toggle-readonly-bg: #c9d4de;
    --cc-cookie-category-block-bg: var(--bg-soft);
    --cc-cookie-category-block-border: var(--line);
    --cc-cookie-category-block-hover-bg: #edf3f8;
    --cc-cookie-category-block-hover-border: var(--line);
    --cc-cookie-category-expanded-block-bg: #fff;
    --cc-cookie-category-expanded-block-hover-bg: var(--bg-soft);
    --cc-footer-bg: var(--bg-soft);
    --cc-footer-color: var(--muted);
    --cc-footer-border-color: var(--line);
    --cc-overlay-bg: rgba(15, 31, 46, .55);
}

#cc-main .cm,
#cc-main .pm {
    box-shadow: 0 -8px 30px rgba(15, 31, 46, .16);
}

#cc-main a {
    text-decoration: underline;
}

#cc-main .cm__btn,
#cc-main .pm__btn {
    border-radius: 999px;
}

/* The plain text sections of the settings panel ("More information") are not boxed: no frame, no hover colour, just a
   divider above, lined up with the rows. */
#cc-main .pm__section:not(.pm__section--toggle):not(:first-child) {
    margin: 28px 0 4px;
    padding: 20px 0 0;
    border: 0;
    border-top: 1px solid var(--line);
    border-radius: 0;
    background: transparent;
}

#cc-main .pm__section:not(.pm__section--toggle):not(:first-child):hover {
    border-color: var(--line);
    background: transparent;
}

#cc-main .pm__section:not(.pm__section--toggle):not(:first-child) .pm__section-desc {
    font-size: 14px;
}

/* Phones: the three cookie buttons share one row and the text is tighter, so the banner stays short. The library forces a
   stacked layout below 640px with !important, so these rules need it too. */
@media screen and (max-width: 640px) {
    #cc-main .cm .cm__btns {
        flex-direction: row !important;
        gap: 6px;
    }

    #cc-main .cm .cm__btns .cm__btn-group {
        flex: 1 1 0;
        flex-direction: row !important;
        gap: 6px;
        margin: 0 !important;
    }

    #cc-main .cm .cm__btns .cm__btn-group:first-child {
        flex: 2 1 0;
    }

    #cc-main .cm .cm__btn-group .cm__btn {
        flex: 1 1 0;
        min-width: 0;
        margin: 0 !important;
        padding: 11px 4px;
        font-size: 13px;
    }

    #cc-main .cm .cm__title {
        font-size: 16px;
    }

    #cc-main .cm .cm__desc {
        font-size: 13px;
        line-height: 1.45;
    }
}

/* contact section: a static map of the nine counties (public/img/bay-area-map.svg, drawn by tools/coverage-map) in place of
   the embedded Google Map, so nothing is loaded from Google unless someone follows the link */
.contact--map--static {
    align-self: start;
    min-height: 0;
    height: auto;
}

.contact--map--static img {
    display: block;
    width: 100%;
    height: auto;
    background: var(--brand-soft);
}

.contact--map--static figcaption {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    justify-content: space-between;
    gap: 12px 16px;
    padding: 16px 20px;
    border-top: 1px solid var(--line);
    background: #fff;
}

.contact--map--static figcaption > div {
    flex: 1 1 220px;
    min-width: 0;
}

.contact--map--static strong {
    display: block;
    color: var(--ink);
    font-size: 16px;
    line-height: 1.3;
}

.contact--map--static span {
    display: block;
    margin-top: 2px;
    color: var(--text);
    font-size: 14px;
    line-height: 1.45;
}

.contact--map--static .btn {
    flex: 0 0 auto;
    margin: 0;
    white-space: nowrap;
}

/* Side by side with the form: the left column stretches to the form's height and the map fills what the contact details leave,
   so the two columns end on the same line. The picture is cropped to fit instead of stretched. */
@media (min-width: 992px) {
    .contact-grid {
        align-items: stretch;
    }

    .contact-info {
        display: flex;
        flex-direction: column;
    }

    .contact--map--static {
        display: flex;
        flex: 1 1 auto;
        flex-direction: column;
        align-self: stretch;
        min-height: 0;
    }

    .contact--map--static img {
        flex: 1 1 0;
        width: 100%;
        height: 100%;
        min-height: 180px;
        object-fit: cover;
        object-position: 50% 42%;
    }
}

/* Stacked layout (tablets and phones): the picture keeps its own proportions, so nothing is cropped */
@media (max-width: 991px) {
    .contact--map--static img {
        aspect-ratio: 860 / 540;
        object-fit: cover;
    }
}

@media (max-width: 575px) {
    .contact--map--static .btn {
        flex: 1 1 100%;
        text-align: center;
    }
}