/*
 * The public site's shell and home page (design A, 2026-10-17).
 *
 * No colour value is written here: every colour is a --brand-* variable that
 * BrandHelper::cssVariables() emits from common/config/brand.php, so a palette
 * change is one edit in that file. The only literals are white and transparent.
 *
 * Two parts:
 *   .site-*  the header and footer, on every public page;
 *   .hm-*    the bands of the home page.
 */

/* ---------------------------------------------------------- page ground */

body {
    background-color: #fff;
}

/* The header is no longer fixed, so the content does not need to clear it. */
main > .container {
    padding-top: 32px;
}

/* ------------------------------------------------------------- header */

.site-utility {
    background: var(--brand-primary-deep);
    color: var(--brand-on-deep);
    font-size: .875rem;
}

.site-utility__inner {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    justify-content: space-between;
    gap: .25rem 1.5rem;
    min-height: 2.5rem;
    padding-top: .25rem;
    padding-bottom: .25rem;
}

.site-utility a {
    color: var(--brand-on-deep);
    text-decoration: none;
}

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

.site-utility__phone {
    font-weight: 700;
    color: #fff;
}

.site-utility__tools {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: .25rem 1.25rem;
}

.site-utility__staff {
    text-decoration: underline;
    color: var(--brand-on-deep-muted);
}

.site-lang {
    display: inline-flex;
    gap: .25rem;
}

.site-lang__item {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    min-width: 2.25rem;
    min-height: 2.25rem;
    border-radius: .375rem;
}

.site-lang__item.is-active {
    color: #fff;
    font-weight: 700;
}

.site-navbar {
    background: #fff;
    border-bottom: 1px solid var(--brand-tint);
    padding-top: .75rem;
    padding-bottom: .75rem;
}

.site-navbar .navbar-brand {
    margin-right: 2rem;
}

.site-logo {
    height: 40px;
    width: auto;
}

.site-nav .nav-link {
    color: var(--brand-ink);
    font-weight: 500;
    padding: .5rem 0;
    margin-right: 1.5rem;
    border-bottom: 2px solid transparent;
}

.site-nav .nav-link:hover,
.site-nav .nav-link:focus-visible {
    color: var(--brand-primary-deep);
}

.site-nav .nav-link.active {
    color: var(--brand-primary-deep);
    border-bottom-color: var(--brand-green);
}

.site-cta {
    font-weight: 700;
    padding: .75rem 1.5rem;
    white-space: nowrap;
}

@media (max-width: 991.98px) {
    .site-nav .nav-link {
        margin-right: 0;
        padding: .75rem 0;
    }

    .site-cta {
        display: block;
        margin-top: .5rem;
        text-align: center;
    }
}

/* ------------------------------------------------------------- footer */

.site-footer {
    background: var(--brand-primary-deep);
    color: var(--brand-on-deep);
}

.site-footer__grid {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(min(220px, 100%), 1fr));
    gap: 2.25rem;
    padding-top: 3rem;
    padding-bottom: 2rem;
}

.site-footer__logo {
    height: 36px;
    width: auto;
}

.site-footer__brand p {
    margin: .875rem 0 0;
}

.site-footer__col {
    display: flex;
    flex-direction: column;
    gap: .625rem;
    font-size: .9375rem;
}

.site-footer__title {
    margin: 0 0 .25rem;
    font-family: var(--brand-font-body);
    font-size: .9375rem;
    font-weight: 700;
    letter-spacing: 0;
    color: #fff;
}

.site-footer a {
    color: var(--brand-on-deep);
    text-decoration: none;
}

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

.site-footer__legal {
    border-top: 1px solid var(--brand-rule-on-deep);
    color: var(--brand-on-deep-muted);
    font-size: .875rem;
}

.site-footer__legal-inner {
    display: flex;
    flex-wrap: wrap;
    justify-content: space-between;
    gap: .5rem 1.5rem;
    padding-top: 1rem;
    padding-bottom: 1rem;
}

/* ------------------------------------------------------------ home: common */

.hm-eyebrow {
    display: inline-block;
    font-size: .8125rem;
    font-weight: 700;
    letter-spacing: .18em;
    text-transform: uppercase;
    color: var(--brand-green-alt);
    /* Darker where the browser can mix: small bold caps on a pale ground need 4.5:1. */
    color: color-mix(in srgb, var(--brand-green-alt) 78%, var(--brand-ink));
}

.hm-h2 {
    margin: .625rem 0 0;
    font-size: clamp(1.875rem, 4vw, 2.75rem);
    line-height: 1.15;
    color: var(--brand-primary-deep);
    text-wrap: balance;
}

.hm-section {
    padding: clamp(3rem, 7vw, 6rem) 0;
    background: #fff;
}

.hm-section--panel {
    background: var(--brand-panel);
}

.hm-section__head {
    display: flex;
    flex-wrap: wrap;
    align-items: flex-end;
    justify-content: space-between;
    gap: 1rem;
    margin-bottom: 2.25rem;
}

.hm-more {
    font-weight: 700;
    text-decoration: none;
}

.hm-more:hover,
.hm-more:focus-visible {
    text-decoration: underline;
}

.hm-actions {
    display: flex;
    flex-wrap: wrap;
    gap: .75rem;
}

.hm-btn-ghost {
    background: #fff;
    border-width: 2px;
    border-color: var(--brand-hairline);
    color: var(--brand-primary-deep);
}

.hm-btn-ghost:hover,
.hm-btn-ghost:focus-visible {
    background: var(--brand-tint);
    border-color: var(--brand-hairline);
    color: var(--brand-primary-deep);
}

.hm-card {
    background: #fff;
    border: 1px solid var(--brand-hairline);
    border-radius: 1rem;
    padding: clamp(1.25rem, 3vw, 2rem);
}

.hm-card__title {
    margin: 0 0 .375rem;
    font-size: 1.5rem;
    color: var(--brand-primary-deep);
}

.hm-card__lead {
    margin: 0 0 1.25rem;
    color: var(--brand-muted);
    line-height: 1.5;
}

.hm-card__note {
    margin: 1rem 0 0;
    font-size: .875rem;
    color: var(--brand-muted);
}

/* -------------------------------------------------------------- home: hero */

.hm-hero {
    position: relative;
    overflow: hidden;
    background: var(--brand-tint-soft);
}

.hm-hero::before {
    content: '';
    position: absolute;
    right: -140px;
    top: -170px;
    width: 520px;
    height: 520px;
    border-radius: 50%;
    border: 40px solid var(--brand-tint);
    box-shadow: 0 0 0 40px var(--brand-tint-soft), 0 0 0 80px var(--brand-tint);
    opacity: .85;
    pointer-events: none;
}

.hm-hero__grid {
    position: relative;
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(min(460px, 100%), 1fr));
    gap: 3rem;
    align-items: center;
    padding-top: clamp(2.5rem, 7vw, 5.5rem);
    padding-bottom: clamp(2.5rem, 7vw, 5.5rem);
}

.hm-hero__copy {
    display: flex;
    flex-direction: column;
    gap: 1.5rem;
    align-items: flex-start;
}

.hm-hero__title {
    margin: 0;
    font-size: clamp(2.5rem, 6vw, 4.25rem);
    line-height: 1.08;
    color: var(--brand-primary-deep);
    text-wrap: balance;
}

.hm-hero__lead {
    margin: 0;
    max-width: 34em;
    font-size: 1.25rem;
    line-height: 1.55;
    color: var(--brand-muted);
}

.hm-facts {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(min(150px, 100%), 1fr));
    gap: .75rem;
    margin: .5rem 0 0;
    max-width: 34rem;
    width: 100%;
}

.hm-fact {
    border-top: 3px solid var(--brand-green);
    padding-top: .625rem;
}

.hm-fact dt {
    font-size: .8125rem;
    font-weight: 400;
    color: var(--brand-muted);
}

.hm-fact dd {
    margin: 0;
    font-weight: 700;
    color: var(--brand-primary-deep);
}

/* ---------------------------------------------------- home: booking form */

.hm-appointment {
    position: relative;
    box-shadow: 0 18px 40px rgba(var(--brand-primary-deep-rgb), .12);
    border-radius: 1rem;
}

.hm-field {
    margin-bottom: 1rem;
}

.hm-field .form-label {
    font-weight: 700;
    font-size: .875rem;
    color: var(--brand-primary-deep);
    margin-bottom: .375rem;
}

.hm-field .form-control,
.hm-field .form-select {
    min-height: 3rem;
    border: 1.5px solid var(--brand-hairline);
    border-radius: .625rem;
}

.hm-field .form-control:focus,
.hm-field .form-select:focus {
    border-color: var(--brand-primary);
    box-shadow: 0 0 0 .2rem rgba(var(--brand-primary-rgb), .18);
}

.hm-submit {
    min-height: 3.25rem;
    font-weight: 700;
}

/* The honeypot: off the page for a person, still in the markup for a script. */
.hm-hp {
    position: absolute;
    left: -10000px;
    width: 1px;
    height: 1px;
    overflow: hidden;
}

/* ---------------------------------------------------------- home: services */

.hm-grid {
    display: grid;
    gap: 1.25rem;
}

.hm-grid--services {
    grid-template-columns: repeat(auto-fit, minmax(min(260px, 100%), 1fr));
}

.hm-grid--branches {
    grid-template-columns: repeat(auto-fit, minmax(min(380px, 100%), 1fr));
}

.hm-grid--news {
    grid-template-columns: repeat(auto-fit, minmax(min(300px, 100%), 1fr));
}

.hm-service {
    display: flex;
    flex-direction: column;
    gap: .875rem;
    padding: 1.625rem;
    border: 1px solid var(--brand-tint);
    border-radius: .875rem;
    background: #fff;
    color: var(--brand-ink);
    text-decoration: none;
    transition: none;
}

.hm-service:hover,
.hm-service:focus-visible {
    border-color: var(--brand-hairline);
    color: var(--brand-ink);
}

.hm-service__icon {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 3.5rem;
    height: 3.5rem;
    border-radius: .875rem;
    background: var(--brand-tint);
    color: var(--brand-primary);
}

.hm-service__name {
    margin: 0;
    font-size: 1.3125rem;
    color: var(--brand-primary-deep);
}

.hm-service__text {
    margin: 0;
    font-size: .9375rem;
    line-height: 1.55;
    color: var(--brand-muted);
}

.hm-service__more {
    margin-top: auto;
    font-size: .9375rem;
    font-weight: 700;
    color: var(--bs-link-color);
}

.hm-service--all {
    justify-content: space-between;
    background: var(--brand-primary-deep);
    border-color: var(--brand-primary-deep);
    min-height: 12rem;
}

.hm-service--all:hover,
.hm-service--all:focus-visible {
    background: var(--brand-primary-deep);
    border-color: var(--brand-primary-deep);
}

.hm-service--all .hm-service__name {
    color: #fff;
    line-height: 1.3;
}

.hm-service--all .hm-service__more {
    color: var(--brand-accent-on-deep);
}

/* ----------------------------------------------------------- home: branches */

.hm-branch {
    display: flex;
    flex-direction: column;
    gap: 1.125rem;
}

.hm-branch .hm-card__title {
    margin: 0;
}

.hm-rows {
    margin: 0;
    display: flex;
    flex-direction: column;
    gap: .875rem;
}

.hm-rows > div {
    display: flex;
    gap: .75rem;
}

.hm-rows dt {
    flex: 0 0 5.5rem;
    font-weight: 400;
    color: var(--brand-muted);
}

.hm-rows dd {
    margin: 0;
}

.hm-branch .hm-actions {
    margin-top: auto;
}

/* -------------------------------------------------------------- home: news */

.hm-news {
    display: flex;
    flex-direction: column;
    border: 1px solid var(--brand-tint);
    border-radius: .875rem;
    overflow: hidden;
    background: #fff;
}

.hm-news__image {
    width: 100%;
    height: 11.875rem;
    object-fit: cover;
    background: var(--brand-cream);
}

.hm-news__body {
    display: flex;
    flex-direction: column;
    gap: .625rem;
    padding: 1.375rem;
}

.hm-news__date {
    font-size: .8125rem;
    color: var(--brand-muted);
}

.hm-news__title {
    margin: 0;
    font-size: 1.1875rem;
    line-height: 1.35;
    color: var(--brand-primary-deep);
}

.hm-news__text {
    margin: 0;
    font-size: .9375rem;
    line-height: 1.55;
    color: var(--brand-muted);
}

/* ---------------------------------------------------------------- home: CTA */

.hm-cta {
    background: var(--brand-primary);
    color: #fff;
}

.hm-cta__inner {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    justify-content: space-between;
    gap: 1.5rem;
    padding-top: clamp(2.25rem, 5vw, 3.5rem);
    padding-bottom: clamp(2.25rem, 5vw, 3.5rem);
}

.hm-cta__copy {
    max-width: 38rem;
}

.hm-cta__title {
    margin: 0 0 .5rem;
    font-size: clamp(1.625rem, 3.4vw, 2.25rem);
    line-height: 1.2;
    color: #fff;
}

.hm-cta__copy p {
    margin: 0;
    font-size: 1.0625rem;
    line-height: 1.55;
    color: var(--brand-on-deep);
}

.hm-cta__phone {
    color: var(--brand-primary-deep);
    font-weight: 700;
}

/* The confirmation that replaces the booking form once a request is filed. */
.hm-sent {
    display: flex;
    align-items: center;
    gap: 1rem;
    min-height: 8rem;
}

.hm-sent__icon {
    flex: 0 0 3.5rem;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 3.5rem;
    height: 3.5rem;
    border-radius: 50%;
    background: var(--brand-green-alt);
    color: #fff;
}

.hm-sent__text {
    margin: 0;
    font-family: var(--brand-font-heading);
    font-size: 1.375rem;
    line-height: 1.35;
    color: var(--brand-primary-deep);
}

/* ---- Services page: a searchable catalogue (design A, 2026-10-17) ---- */
.svc {
    padding-bottom: 1rem;
}

.svc__head {
    padding: 1.25rem 0 1.5rem;
}

.svc__title {
    margin: 0;
    font-size: clamp(1.75rem, 4vw, 2.5rem);
    color: var(--brand-primary-deep);
}

.svc__lead {
    margin: .5rem 0 0;
    max-width: 60ch;
    color: var(--brand-muted);
}

.svc__layout {
    display: grid;
    grid-template-columns: 16rem minmax(0, 1fr);
    gap: 2rem;
    align-items: start;
}

.svc__nav {
    position: sticky;
    top: 1rem;
    padding: .5rem;
    background: #fff;
    border: 1px solid var(--brand-tint);
    border-radius: .75rem;
}

.svc__nav a {
    display: flex;
    justify-content: space-between;
    gap: .5rem;
    padding: .625rem .75rem;
    border-radius: .5rem;
    color: var(--brand-ink);
    text-decoration: none;
}

.svc__nav a:hover,
.svc__nav a:focus-visible,
.svc__nav a.on {
    background: var(--brand-tint-soft);
    color: var(--brand-primary-deep);
}

.svc__nav a.on {
    font-weight: 700;
}

.svc__nav a.is-dim {
    opacity: .45;
}

.svc__n {
    color: var(--brand-muted);
    font-size: .8125rem;
}

.svc__search {
    display: flex;
    align-items: center;
    gap: .5rem;
    padding: .625rem .875rem;
    background: #fff;
    border: 1px solid var(--brand-hairline);
    border-radius: .625rem;
    color: var(--brand-muted);
}

.svc__search[hidden] {
    display: none;
}

.svc__search input {
    flex: 1;
    min-width: 0;
    border: 0;
    outline: 0;
    font: inherit;
    color: var(--brand-ink);
    background: transparent;
}

.svc__search:focus-within {
    border-color: var(--brand-primary);
    box-shadow: 0 0 0 3px var(--brand-tint);
}

.svc__count {
    margin: .5rem 0 0;
    font-size: .875rem;
    color: var(--brand-muted);
}

.svc__sec {
    margin-top: 1.75rem;
    scroll-margin-top: 1rem;
}

.svc__h2 {
    display: flex;
    align-items: center;
    gap: .75rem;
    margin: 0;
    font-size: 1.375rem;
    color: var(--brand-primary-deep);
}

.svc__icon {
    display: inline-grid;
    place-items: center;
    width: 2.5rem;
    height: 2.5rem;
    border-radius: .75rem;
    background: var(--brand-tint);
    color: var(--brand-primary);
    flex: none;
}

.svc__icon svg {
    width: 1.375rem;
    height: 1.375rem;
}

.svc__list {
    margin: .5rem 0 0;
    padding: 0;
    list-style: none;
}

.svc__row {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: .5rem 1.25rem;
    padding: .875rem 0;
    border-bottom: 1px solid var(--brand-tint);
}

.svc__row[hidden],
.svc__sec[hidden] {
    display: none;
}

.svc__name {
    display: block;
    font-weight: 500;
}

.svc__desc {
    display: block;
    color: var(--brand-muted);
    font-size: .9375rem;
}

.svc__book {
    flex: none;
}

.svc__empty {
    margin-top: 1.5rem;
    padding: 1.75rem;
    text-align: center;
    color: var(--brand-muted);
    border: 1px dashed var(--brand-hairline);
    border-radius: .75rem;
}

.svc__cta {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    justify-content: space-between;
    gap: 1rem 2rem;
    margin-top: 2.5rem;
    padding: 1.75rem;
    background: var(--brand-tint-soft);
    border: 1px solid var(--brand-tint);
    border-radius: .875rem;
}

.svc__cta-title {
    margin: 0;
    font-size: 1.375rem;
    color: var(--brand-primary-deep);
}

.svc__cta p {
    margin: .375rem 0 0;
    color: var(--brand-muted);
}

@media (max-width: 820px) {
    .svc__layout {
        grid-template-columns: 1fr;
    }

    .svc__nav {
        position: static;
        display: flex;
        gap: .25rem;
        overflow-x: auto;
    }

    .svc__nav a {
        white-space: nowrap;
    }
}