/* Fonts, served from here rather than Google: no third-party round trips
   before the first paint. Both are SIL Open Font License; latin subsets.
   The weight ranges are deliberately the ones the site asks for: anything
   heavier (a <strong> inside a bold heading resolves to 900) clamps to the
   top of the range instead of being drawn heavier still. */
@font-face { font-family: "Urbanist"; font-style: normal; font-weight: 600 800; font-display: swap; src: url(/assets/fonts/urbanist-latin.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; }
@font-face { font-family: "Nunito Sans"; font-style: normal; font-weight: 400 700; font-display: swap; src: url(/assets/fonts/nunito-sans-latin.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; }

/* ==========================================================================
   The essential-tier template.
   Every value is explained in notes/design.md. Per-tenant branding arrives as
   --brand and --brand-dark from the layout; everything else is derived.
   ========================================================================== */

:root {
    /* --- Brand: two shades, set per tenant. See THE ONE RULE. ---------- */
    --brand: #0d1a83;        /* 500: fills, buttons, display text, rules, icons */
    --brand-dark: #091259;   /* 700: every body-size link and brand-coloured text */
    --brand-tint: color-mix(in srgb, var(--brand), white 90%);   /* grounds */
    --brand-line: color-mix(in srgb, var(--brand), white 78%);   /* borders on tint */

    /* --- Neutrals: warm, chosen, not inherited ------------------------- */
    --ink: #1e2322;          /* 15.92 on white */
    --ink-soft: #565c5a;     /* 6.83 on white */
    --ink-faint: #8a908e;    /* labels only */
    --white: #ffffff;
    --paper: #f7f6f3;
    --line: #e4e2dd;
    --utility: #4d5553;

    /* --- Status: the only semantic colours, used for open/closed only --- */
    --open: #15724a;         /* 5.94 on white */
    --closed: #b3261e;       /* 6.54 on white */

    /* --- Type ---------------------------------------------------------- */
    --display: "Urbanist", "Avenir Next", "Segoe UI", system-ui, sans-serif;
    --body: "Nunito Sans", "Helvetica Neue", Arial, system-ui, sans-serif;
    --text: 1.0625rem;       /* 17px: older readers, phones in doorways */

    /* --- Space: three sizes, so density varies --------------------------- */
    --space-s: clamp(1.5rem, 3vw, 2.25rem);
    --space-m: clamp(2.5rem, 5vw, 4rem);
    --space-l: clamp(3.5rem, 7vw, 5.5rem);

    --wrap: 72rem;
    --measure: 65ch;
    --radius: 10px;
    --gap: 1.5rem;
}

/* Browsers without color-mix() (Safari before 16.2, Chrome before 111) would
   compute the derived tints to nothing and paint the hero white. Give them
   the neutral paper instead: a plainer page, not a broken one. */
@supports not (color: color-mix(in srgb, red, blue)) {
    :root { --brand-tint: var(--paper); --brand-line: var(--line); }
}

*, *::before, *::after { box-sizing: border-box; }
[hidden] { display: none !important; }

body {
    margin: 0;
    font-family: var(--body);
    font-size: var(--text);
    line-height: 1.6;
    color: var(--ink);
    background: var(--white);
    -webkit-text-size-adjust: 100%;
}

h1, h2, h3 {
    font-family: var(--display);
    line-height: 1.15;
    letter-spacing: -0.015em;
    margin: 0 0 0.45em;
    color: var(--brand-dark);
    text-wrap: balance;
}
h1 { font-size: clamp(2.1rem, 1.4rem + 2.8vw, 3.4rem); font-weight: 800; }
h2 { font-size: clamp(1.55rem, 1.2rem + 1.3vw, 2.15rem); font-weight: 700; }
h3 { font-size: 1.2rem; font-weight: 700; }
p { margin: 0 0 1em; }
img { max-width: 100%; height: auto; display: block; }

a { color: var(--brand-dark); text-underline-offset: 3px; }
a:hover { text-decoration: none; }

.wrap { width: min(100% - 2.5rem, var(--wrap)); margin-inline: auto; }
.wrap--narrow { width: min(100% - 2.5rem, 44rem); }
.wrap--book { width: min(100% - 2.5rem, 66rem); }
.muted { color: var(--ink-soft); }
.lede { font-size: 1.15rem; color: var(--ink-soft); max-width: var(--measure); }
.lede p:last-child { margin-bottom: 0; }
.prose { max-width: var(--measure); }
.prose--centred { margin-inline: auto; text-align: center; }
.prose h2 { font-size: 1.45rem; margin-top: 2.25rem; }
.prose h3 { font-size: 1.15rem; margin-top: 1.75rem; }
.prose h4 { font-size: 0.95rem; text-transform: uppercase; letter-spacing: 0.05em; color: var(--ink-soft); margin-top: 1.5rem; }
.prose ul, .prose ol { padding-left: 1.25rem; }

.skip { position: absolute; left: -9999px; }
.skip:focus { left: 1rem; top: 1rem; z-index: 100; background: var(--white); padding: 0.75rem 1rem; border-radius: var(--radius); }
.visually-hidden { position: absolute; width: 1px; height: 1px; overflow: hidden; clip: rect(0 0 0 0); clip-path: inset(50%); white-space: nowrap; }

/* ------------------------------------------------------------- buttons -- */

.btn {
    display: inline-block;
    font-family: var(--display);
    font-weight: 700;
    font-size: 1rem;
    padding: 0.7rem 1.5rem;
    border-radius: 100px;
    border: 1.5px solid transparent;
    text-decoration: none;
    cursor: pointer;
    line-height: 1.3;
    transition: background-color 0.15s ease, color 0.15s ease, border-color 0.15s ease;
}
.btn--primary { background: var(--brand); color: var(--white); }
.btn--primary:hover { background: var(--brand-dark); }
.btn--ghost { border-color: var(--brand-line); color: var(--brand-dark); background: transparent; }
.btn--ghost:hover { border-color: var(--brand); background: var(--brand-tint); }
.btn--white { background: var(--white); color: var(--brand-dark); }
.btn--outline-white { border-color: rgba(255, 255, 255, 0.55); color: var(--white); }
.btn--outline-white:hover { background: rgba(255, 255, 255, 0.12); }
.btn--lg { padding: 0.85rem 1.9rem; font-size: 1.05rem; }
.btn--sm { padding: 0.4rem 1rem; font-size: 0.9rem; }
.btn:focus-visible, a:focus-visible, button:focus-visible { outline: 3px solid var(--brand); outline-offset: 2px; }

/* --------------------------------------------------------- utility bar -- */

.utility { background: var(--utility); color: var(--white); font-family: var(--display); font-size: 0.8rem; }
.utility__inner { display: flex; align-items: center; justify-content: space-between; gap: 1rem; min-height: 2.4rem; }
.utility__phone { color: inherit; text-decoration: none; font-weight: 700; letter-spacing: 0.02em; white-space: nowrap; }
.utility__phone:hover { text-decoration: underline; }
.utility__status { display: flex; align-items: center; gap: 0.5rem; margin: 0; color: inherit; text-decoration: none; font-weight: 700; letter-spacing: 0.02em; white-space: nowrap; min-width: 0; }
.utility__status:hover .utility__more { text-decoration: underline; }
.utility__short { display: none; }
.utility__more { font-size: 0.7rem; opacity: 0.75; border-left: 1px solid rgba(255, 255, 255, 0.35); padding-left: 0.5rem; }
.utility__dot { width: 0.55rem; height: 0.55rem; border-radius: 50%; background: #f28b82; flex: none; }
.utility__status--open .utility__dot { background: #7ee0b0; }
@media (max-width: 40rem) {
    .utility__long { display: none; }
    .utility__short { display: inline; }
}

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

/* The header sticks, and gets out of the way: scrolling down slides it off
   the top (reading gets the whole screen), scrolling up brings it straight
   back. transform rather than top, so it stays in flow and nothing jumps.
   The utility strip above it scrolls away: worth reading once, not every screen. */
.site-header { background: var(--white); border-bottom: 1px solid var(--line); position: sticky; top: 0; z-index: 50; transition: transform 220ms cubic-bezier(0.22, 0.61, 0.36, 1), box-shadow 220ms ease; }
.site-header.is-hidden { transform: translateY(-100%); }
.site-header.is-stuck { box-shadow: 0 1px 0 var(--line), 0 8px 24px -12px rgba(30, 35, 34, 0.25); }
/* Anchor targets clear the header rather than landing underneath it. */
html { scroll-padding-top: 5.75rem; }
.site-header__inner { display: flex; align-items: center; justify-content: space-between; gap: var(--gap); min-height: 5.25rem; }
.brand { text-decoration: none; color: inherit; }
.brand__name { font-family: var(--display); font-weight: 800; font-size: 1.35rem; color: var(--brand-dark); letter-spacing: -0.01em; }
.brand__logo { max-height: 3.25rem; width: auto; }

.nav__list { display: flex; gap: 1.4rem; list-style: none; margin: 0; padding: 0; flex-wrap: wrap; }
.nav__list a { font-family: var(--display); text-decoration: none; color: var(--ink); font-weight: 600; font-size: 1rem; }
.nav__list a:hover { color: var(--brand-dark); }
.nav__list a[aria-current="page"] { color: var(--brand-dark); box-shadow: inset 0 -2px 0 var(--brand); }

.nav__head, .nav__actions, .burger, .nav__backdrop { display: none; }

@media (max-width: 63.999rem) {
    .js .burger {
        display: inline-flex; align-items: center; gap: 0.5rem;
        font-family: var(--display); font-weight: 700; color: var(--brand-dark);
        background: none; border: 1.5px solid var(--brand-line); border-radius: 100px;
        padding: 0.5rem 0.95rem; cursor: pointer;
    }
    .burger__label { font-size: 0.95rem; }
    .burger__bars, .burger__bars::before, .burger__bars::after { display: block; width: 1.1rem; height: 2px; background: currentColor; border-radius: 2px; }
    .burger__bars { position: relative; }
    .burger__bars::before, .burger__bars::after { content: ""; position: absolute; left: 0; }
    .burger__bars::before { top: -6px; }
    .burger__bars::after { top: 6px; }

    .js .nav {
        position: fixed; inset: 0 0 0 auto; z-index: 60;
        width: min(20rem, 84vw); background: var(--white); padding: 1.25rem;
        transform: translateX(100%); transition: transform 0.22s ease;
        overflow-y: auto; box-shadow: -8px 0 24px rgba(30, 35, 34, 0.15);
        display: flex; flex-direction: column;
    }
    .js .nav.is-open { transform: translateX(0); }
    .js .nav__head { display: flex; align-items: center; justify-content: space-between; border-bottom: 1px solid var(--line); padding-bottom: 0.75rem; margin-bottom: 0.5rem; }
    .nav__title { font-family: var(--display); font-size: 0.75rem; text-transform: uppercase; letter-spacing: 0.1em; color: var(--ink-faint); }
    .nav__close { font: inherit; font-size: 1.75rem; line-height: 1; cursor: pointer; background: none; border: 0; color: var(--brand-dark); padding: 0 0.25rem; }
    .js .nav__list { flex-direction: column; gap: 0; }
    .js .nav__list li { border-bottom: 1px solid var(--line); }
    .js .nav__list a { display: block; padding: 0.85rem 0.25rem; font-size: 1.1rem; box-shadow: none; }
    .js .nav__actions { display: flex; flex-direction: column; gap: 0.6rem; margin-top: auto; padding-top: 1.25rem; }
    .nav__actions .btn { text-align: center; }
    .js .nav__backdrop { display: block; position: fixed; inset: 0; z-index: 55; background: rgba(30, 35, 34, 0.45); }
    .menu-open body { overflow: hidden; }

    html:not(.js) .site-header__inner { flex-wrap: wrap; }
    html:not(.js) .nav { flex-basis: 100%; border-top: 1px solid var(--line); padding-top: 0.75rem; }
    html:not(.js) .nav__list { justify-content: center; gap: 0.75rem 1.25rem; }
}

/* ---------------------------------------------------------------- hero -- */

.hero { background: var(--brand-tint); padding: var(--space-m) 0; position: relative; }
.hero__track { display: grid; }
/* Every slide fills the tallest one's space and centres in it, so a short slide sits where a tall one does. */
.hero__slide { grid-area: 1 / 1; display: grid; align-items: center; }
.hero__inner { display: grid; gap: clamp(1.5rem, 4vw, 3.5rem); align-items: center; }
@media (min-width: 52rem) { .hero__inner { grid-template-columns: 1.05fr 1fr; } }

.hero__inner--solo { grid-template-columns: 1fr; }
.hero__inner--solo .hero__text { max-width: 40rem; }
.hero__strapline { font-family: var(--display); font-weight: 600; color: var(--brand-dark); font-size: 1.2rem; margin-top: -0.35rem; }

/*
 * The photograph sits in a frame of fixed shape, whatever shape the file is.
 * Without this, a 4:3 photo on one slide and a 3:2 on the next make the whole
 * hero change height as it turns, and everything re-centres.
 */
.hero__media { aspect-ratio: 16 / 10; }
.hero__frame { border-radius: var(--radius); overflow: hidden; height: 100%; box-shadow: 0 16px 40px -20px rgba(30, 35, 34, 0.35); }
@media (min-width: 52rem) { .hero__media { aspect-ratio: 4 / 3; } }
.hero__media img { display: block; width: 100%; height: 100%; object-fit: cover; }
.hero__frame { position: relative; }
.hero__actions { display: flex; gap: 0.75rem; flex-wrap: wrap; margin-top: 1.5rem; }
.hero__actions--centre { justify-content: center; }

html:not(.js) .hero__slide + .hero__slide, html:not(.js) .hero__controls { display: none; }

/*
 * Turning a slide: a true crossfade — the old one is still there while the
 * new one arrives — with the text settling up a few pixels and the picture
 * easing in from a touch larger. Visibility follows a beat later so the
 * outgoing slide is not yanked out mid-fade.
 */
.js .hero--slider .hero__slide { opacity: 0; visibility: hidden; pointer-events: none; transition: opacity 0.75s ease, visibility 0s linear 0.75s; }
.js .hero--slider .hero__slide.is-active { opacity: 1; visibility: visible; pointer-events: auto; transition: opacity 0.75s ease, visibility 0s; }
.js .hero--slider .hero__text { transform: translateY(10px); transition: transform 0.75s cubic-bezier(0.22, 0.61, 0.36, 1); }
.js .hero--slider .hero__media img { transform: scale(1.04); transition: transform 1.1s cubic-bezier(0.22, 0.61, 0.36, 1); }
.js .hero--slider .is-active .hero__text { transform: none; }
.js .hero--slider .is-active .hero__media img { transform: none; }

/* Controls: on desktop a compact cluster in a fixed spot under the text, out of the flow so nothing moves. */
.hero__controls { margin-top: 1.5rem; }
.hero__controls-inner { display: flex; align-items: center; gap: 0.6rem; }
.hero__arrow { display: grid; place-items: center; width: 2.5rem; height: 2.5rem; flex: none; border: 1.5px solid var(--brand-line); border-radius: 50%; background: var(--white); color: var(--brand-dark); font-size: 1.1rem; cursor: pointer; transition: background 0.2s ease, color 0.2s ease, border-color 0.2s ease; }
.hero__arrow:hover { background: var(--brand); color: var(--white); border-color: var(--brand); }
.hero__dots { display: flex; gap: 0; padding: 0; }
/* The button is finger-sized; the pip inside is what you see. */
.hero__dot { display: grid; place-items: center; width: 2rem; height: 2.75rem; padding: 0; margin: 0; border: 0; background: none; cursor: pointer; }
.hero__dot-pip { display: block; width: 0.6rem; height: 0.6rem; border-radius: 50%; border: 1.5px solid var(--brand); background: transparent; transition: background 0.2s ease, transform 0.2s ease; }
.hero__dot.is-active .hero__dot-pip { background: var(--brand); transform: scale(1.15); }
@media (min-width: 52rem) {
    .hero--slider { padding-bottom: calc(var(--space-m) + 3.25rem); }
    .hero__controls { position: absolute; left: 0; right: 0; bottom: var(--space-m); margin: 0; }
    /* Text sits a little above centre so it and the controls read as one column. */
    .hero--slider .hero__inner { align-items: center; }
}

/* --------------------------------------------------------------- trust -- */

.trust { border-bottom: 1px solid var(--line); background: var(--white); }
.trust__list { list-style: none; margin: 0 auto; padding: 0.85rem 0; display: flex; flex-wrap: wrap; justify-content: center; gap: 0.5rem 2.25rem; }
.trust__item { display: flex; align-items: center; gap: 0.55rem; font-family: var(--display); font-weight: 600; font-size: 0.95rem; }
.trust__item a { color: var(--ink); text-decoration: none; }
.trust__item a:hover { color: var(--brand-dark); text-decoration: underline; }
.trust__icon { display: grid; place-items: center; width: 1.9rem; height: 1.9rem; border-radius: 50%; background: var(--brand-tint); color: var(--brand); flex: none; }
.trust__icon svg { width: 1.1rem; height: 1.1rem; }
.trust__item--open .trust__icon { background: color-mix(in srgb, var(--open), white 88%); color: var(--open); }
.trust__item--closed .trust__icon { background: color-mix(in srgb, var(--closed), white 90%); color: var(--closed); }
@media (max-width: 40rem) { .trust__list { gap: 0.6rem 1.25rem; } .trust__item { font-size: 0.9rem; } }

/* ------------------------------------------------------------ sections -- */

.section { padding: var(--space-m) 0; }
.section--roomy { padding: var(--space-l) 0; }
.section--paper { background: var(--paper); }
.section--cta { background: var(--brand); color: var(--white); text-align: center; padding: var(--space-m) 0; }
.section--cta h2 { color: var(--white); }
.section--cta .lede { color: rgba(255, 255, 255, 0.85); margin-inline: auto; }
.section__head { text-align: center; max-width: 44rem; margin: 0 auto 2rem; }
.section__head--left { text-align: left; margin-inline: 0; }
.section__foot { text-align: center; margin: 2rem 0 0; display: flex; gap: 0.75rem; justify-content: center; flex-wrap: wrap; }
.section__foot--left { justify-content: flex-start; }

.split { display: grid; gap: clamp(1.5rem, 4vw, 3.5rem); align-items: center; }
@media (min-width: 52rem) { .split { grid-template-columns: 1fr 1fr; } }
.split__media img { border-radius: var(--radius); width: 100%; }

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

.grid { display: grid; gap: var(--gap); }
.grid--cards { grid-template-columns: repeat(auto-fill, minmax(16rem, 1fr)); }
.grid--thirds { grid-template-columns: repeat(auto-fit, minmax(15rem, 1fr)); }

.card {
    border: 1px solid var(--line); border-radius: var(--radius); overflow: hidden;
    background: var(--white); display: flex; flex-direction: column;
    transition: border-color 0.15s ease, transform 0.15s ease;
}
.card:hover { border-color: var(--brand-line); transform: translateY(-2px); }
.card__image { aspect-ratio: 3 / 2; object-fit: cover; width: 100%; }
.card__mark { display: grid; place-items: center; width: 3rem; height: 3rem; margin: 1.25rem 1.25rem 0; border-radius: 12px; background: var(--brand-tint); color: var(--brand); }
.card__body { padding: 1rem 1.25rem 1.25rem; display: flex; flex-direction: column; flex: 1; }
.card__title { margin-bottom: 0.35rem; font-size: 1.15rem; }
.card__title a { text-decoration: none; }
.card__title a::after { content: ""; position: absolute; inset: 0; }
.card { position: relative; }
.card__summary { color: var(--ink-soft); margin: 0 0 0.75rem; font-size: 0.975rem; }
.card__more { margin-top: auto; font-family: var(--display); font-weight: 700; font-size: 0.9rem; color: var(--brand-dark); }

.panel-soft { background: var(--paper); border: 1px solid var(--line); border-radius: var(--radius); padding: 1.5rem; }
.panel-soft h2 { font-size: 0.85rem; text-transform: uppercase; letter-spacing: 0.08em; color: var(--ink-soft); }
.panel-soft .prose { padding-bottom: 0; }

/* --------------------------------------------------------------- visit -- */
/* Three tiles: where, when, and the map. Stacks on phones, two-up on tablets. */
.visit-band__head { margin-bottom: 1.75rem; }
.visit { display: grid; gap: 1rem; align-items: stretch; }
.visit__card { background: var(--white); border: 1px solid var(--line); border-radius: calc(var(--radius) + 4px); padding: 1.5rem 1.5rem 1.6rem; box-shadow: 0 14px 34px -28px rgba(30, 35, 34, 0.4); display: flex; flex-direction: column; }
.visit__cardhead { display: flex; align-items: center; gap: 0.75rem; margin-bottom: 1rem; }
.visit__cardhead h3 { font-size: 1.05rem; margin: 0; }
.visit__icon { display: grid; place-items: center; width: 2.5rem; height: 2.5rem; border-radius: 12px; background: var(--brand-tint); color: var(--brand); flex: none; }
.visit__icon svg { width: 1.3rem; height: 1.3rem; }
.visit__address { font-family: var(--display); font-weight: 600; font-size: 1.15rem; line-height: 1.45; margin: 0 0 1rem; }
.visit__contacts { list-style: none; margin: 0 0 1.25rem; padding: 0; display: grid; gap: 0.55rem; }
.visit__contacts li { display: flex; align-items: center; gap: 0.65rem; min-width: 0; }
.visit__glyph { color: var(--brand); flex: none; display: grid; }
.visit__glyph svg { width: 1.1rem; height: 1.1rem; }
.visit__contacts a { color: var(--ink); text-decoration: none; min-width: 0; overflow-wrap: anywhere; }
.visit__contacts a[href^="mailto:"] { font-size: 0.9rem; letter-spacing: -0.01em; }
.visit__contacts a:hover { color: var(--brand-dark); text-decoration: underline; }
.visit__phone { font-family: var(--display); font-weight: 700; font-size: 1.25rem; }
.visit__actions { display: flex; gap: 0.6rem; flex-wrap: wrap; margin: auto 0 0; padding-top: 0.25rem; }
.visit__status { display: inline-flex; align-items: center; gap: 0.5rem; align-self: flex-start; font-family: var(--display); font-weight: 700; font-size: 0.92rem; color: var(--closed); background: color-mix(in srgb, var(--closed), white 90%); border-radius: 100px; padding: 0.35rem 0.85rem 0.35rem 0.7rem; margin: 0 0 1rem; }
.visit__status--open { color: var(--open); background: color-mix(in srgb, var(--open), white 88%); }
.visit__dot { width: 0.55rem; height: 0.55rem; border-radius: 50%; background: currentColor; flex: none; }
.visit__hours { margin: 0; }
.visit__hours .hours__row { padding: 0.45rem 0; margin: 0; border-bottom: 1px solid var(--line); font-size: 0.95rem; }
.visit__hours .hours__row:last-child { border-bottom: 0; }
.visit__hours dt { font-weight: 500; }
.visit__hours dt em { font-style: normal; font-weight: 600; color: var(--brand); font-size: 0.8em; margin-left: 0.35rem; }
.visit__hours dd { color: var(--ink-soft); text-align: right; }
.visit__hours .hours__row--today { background: none; }
.visit__hours .hours__row--today dt, .visit__hours .hours__row--today dd { color: var(--brand-dark); font-weight: 700; }
.visit__note { font-size: 0.875rem; color: var(--ink-soft); margin: 0.9rem 0 0; }
@media (min-width: 40rem) {
    .visit { grid-template-columns: 1fr 1fr; }
    .visit .visit__map { grid-column: 1 / -1; min-height: 20rem; }
}
@media (min-width: 64rem) {
    .visit { grid-template-columns: 1.05fr 0.95fr 1.25fr; gap: 1.25rem; }
    .visit .visit__map { grid-column: auto; min-height: 0; }
    .visit--no-map { grid-template-columns: 1fr 1fr; }
}

/* -------------------------------------------------------------- banner -- */

.banner { background-color: var(--utility); background-size: cover; background-position: center; color: var(--white); position: relative; }
.banner::before { content: ""; position: absolute; inset: 0; background: linear-gradient(rgba(30, 35, 34, 0.5), rgba(30, 35, 34, 0.65)); }
.banner--plain { background-image: none; background-color: var(--brand-tint); color: var(--ink); }
.banner--plain::before { background: none; }
.banner--plain .banner__title { color: var(--brand-dark); }
.banner--plain .crumbs__list { color: var(--ink-soft); }
.banner--plain .crumbs a { color: var(--brand-dark); }
.banner--plain .banner__strapline { color: var(--ink-soft); }
.banner__inner { position: relative; padding: var(--space-m) 0; text-align: center; }
.banner__title { color: var(--white); margin: 0; }
.banner__strapline { margin: 0.5rem 0 0; font-family: var(--display); font-size: 1.15rem; font-weight: 600; color: rgba(255, 255, 255, 0.9); }
.crumbs__list { list-style: none; display: flex; justify-content: center; flex-wrap: wrap; gap: 0.5rem; margin: 0 0 0.75rem; padding: 0; font-size: 0.875rem; color: rgba(255, 255, 255, 0.85); }
.crumbs__list li + li::before { content: "/"; margin-right: 0.5rem; opacity: 0.6; }
.crumbs a { color: var(--white); }
.page-header { padding: var(--space-m) 0 1rem; }
.crumb { color: var(--ink-soft); margin-bottom: 0.5rem; }

/* --------------------------------------------------- content + sidebar -- */

.with-sidebar { display: grid; gap: clamp(1.5rem, 4vw, 3rem); padding: var(--space-m) 0; }
@media (min-width: 56rem) { .with-sidebar { grid-template-columns: minmax(0, 1fr) 17rem; } }
.with-sidebar__main .prose { max-width: none; }
.sidebar__block { border: 1px solid var(--line); border-radius: var(--radius); padding: 1.25rem; margin-bottom: 1.25rem; background: var(--paper); }
.sidebar__block--brand { background: var(--brand); color: var(--white); border-color: var(--brand); }
.sidebar__block--brand .sidebar__heading { color: var(--white); }
.sidebar__heading { font-size: 0.85rem; text-transform: uppercase; letter-spacing: 0.08em; margin-bottom: 0.75rem; color: var(--ink-soft); }
.sidebar__list { list-style: none; margin: 0; padding: 0; }
.sidebar__list li { border-bottom: 1px solid var(--line); }
.sidebar__list li:last-child { border-bottom: 0; }
.sidebar__list a { display: block; padding: 0.4rem 0; text-decoration: none; }
.sidebar__list a:hover, .sidebar__list a[aria-current="page"] { text-decoration: underline; font-weight: 700; }
.sidebar__list--plain li { padding: 0.3rem 0; color: var(--ink-soft); }
.sidebar__phone { color: var(--white); font-family: var(--display); font-size: 1.3rem; font-weight: 700; text-decoration: none; }

/* --------------------------------------------------- pharmacy first etc -- */

.strapline { font-family: var(--display); font-size: 1.25rem; font-weight: 600; color: var(--brand-dark); margin-bottom: 0.75rem; }
.conditions { list-style: none; margin: 0 0 2rem; padding: 0; display: grid; gap: 0.75rem; grid-template-columns: repeat(auto-fill, minmax(15rem, 1fr)); }
.conditions__item { border: 1px solid var(--line); border-radius: var(--radius); padding: 0.85rem 1rem; background: var(--paper); }
.conditions__name { display: block; font-family: var(--display); font-weight: 700; color: var(--brand-dark); }
.conditions__who { display: block; font-size: 0.9rem; color: var(--ink-soft); }
.ticks { list-style: none; margin: 0 0 1.5rem; padding: 0; }
.ticks li { position: relative; padding-left: 1.75rem; margin-bottom: 0.5rem; }
.ticks li::before { content: ""; position: absolute; left: 0; top: 0.45em; width: 0.9rem; height: 0.5rem; border-left: 2px solid var(--brand); border-bottom: 2px solid var(--brand); transform: rotate(-45deg); }

.registrations { background: var(--paper); border: 1px solid var(--line); border-radius: var(--radius); padding: 1.5rem; }
.registrations__title { font-size: 0.85rem; text-transform: uppercase; letter-spacing: 0.08em; color: var(--ink-soft); }
.registrations__list { margin: 0; }
.registrations__row { padding: 0.5rem 0; border-bottom: 1px solid var(--line); }
.registrations__row:last-child { border-bottom: 0; }
.registrations dt { font-size: 0.8rem; text-transform: uppercase; letter-spacing: 0.04em; color: var(--ink-soft); }
.registrations dd { margin: 0; font-weight: 600; }
.registrations__note { font-size: 0.85rem; color: var(--ink-soft); margin: 1rem 0 0; }

/* ----------------------------------------------------------------- map -- */

.map { line-height: 0; }
.map iframe { width: 100%; height: 24rem; border: 0; display: block; filter: saturate(0.85); }

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

.site-footer { background: var(--brand-dark); color: rgba(255, 255, 255, 0.82); font-size: 0.95rem; }
.site-footer__grid { display: grid; gap: var(--gap); padding: var(--space-m) 0 var(--space-s); grid-template-columns: repeat(auto-fit, minmax(13rem, 1fr)); }
.site-footer__toggle { all: unset; display: flex; align-items: center; justify-content: space-between; width: 100%; cursor: default; font: inherit; color: inherit; }
.site-footer__chevron { display: none; }

/* Phones: one column of accordions, closed until tapped. */
@media (max-width: 40rem) {
    .site-footer__grid { grid-template-columns: 1fr; gap: 0; padding: 0.75rem 0 0; }
    .site-footer__col { border-bottom: 1px solid rgba(255, 255, 255, 0.18); }
    /* The legal strip draws its own line, so the last column does not. */
    .site-footer__col:last-child { border-bottom: 0; }
    .site-footer__col .site-footer__heading { margin: 0; line-height: 1; }
    .site-footer__toggle { cursor: pointer; padding: 1.35rem 0; font-size: 0.85rem; }
    .js .site-footer__panel { padding-bottom: 1.5rem; }
    .site-footer__legal-inner { padding: 1.5rem 0; flex-direction: column; gap: 0.35rem; }
    .site-footer__chevron { display: block; width: 0.55rem; height: 0.55rem; border-right: 2px solid currentColor; border-bottom: 2px solid currentColor; transform: rotate(45deg); transition: transform 0.2s ease; margin-right: 0.25rem; }
    .site-footer__toggle[aria-expanded="true"] .site-footer__chevron { transform: rotate(-135deg); }
    .js .site-footer__panel { display: none; }
    .js .site-footer__panel.is-open { display: block; }
}
.site-footer a { color: var(--white); }
.site-footer p { margin-bottom: 0.6rem; }
.site-footer__heading { font-size: 0.78rem; text-transform: uppercase; letter-spacing: 0.1em; color: var(--white); margin-bottom: 0.85rem; }
.site-footer__links { list-style: none; margin: 0; padding: 0; }
.site-footer__links a { text-decoration: none; display: block; padding: 0.15rem 0; }
.site-footer__links a:hover { text-decoration: underline; }
.site-footer__legal { border-top: 1px solid rgba(255, 255, 255, 0.18); font-size: 0.85rem; }
.site-footer__legal-inner { display: flex; justify-content: space-between; flex-wrap: wrap; gap: 0.5rem; padding: 1.1rem 0; }
.site-footer__legal p { margin: 0; }

/* --------------------------------------------------------------- hours -- */

.hours { margin: 0; font-variant-numeric: tabular-nums; }
.hours__row { display: flex; justify-content: space-between; gap: 1rem; padding: 0.1rem 0; }
.hours dt { font-weight: 500; }
.hours dd { margin: 0; }
.hours__row--today dt, .hours__row--today dd { font-weight: 700; }
.site-footer .hours__row--today dt, .site-footer .hours__row--today dd { color: var(--white); }
.hours__note { font-size: 0.875rem; margin-top: 0.5rem; }
.panel-soft .hours__row { border-bottom: 1px dotted var(--line); }
.hours__status { font-family: var(--display); font-weight: 700; margin-bottom: 0.75rem; color: var(--closed); }
.hours__status--open { color: var(--open); }
.hours__badge { display: inline-block; margin-left: 0.4rem; padding: 0.05rem 0.45rem; background: var(--brand); color: var(--white); border-radius: 100px; font-size: 0.65rem; font-weight: 700; text-transform: uppercase; letter-spacing: 0.04em; }

/* --------------------------------------------------------------- modal -- */

.modal { position: fixed; inset: 0; z-index: 80; display: grid; place-items: center; padding: 1.25rem; }
.modal__backdrop { position: absolute; inset: 0; background: rgba(30, 35, 34, 0.5); }
.modal__panel { position: relative; z-index: 1; width: min(26rem, 100%); max-height: 90vh; overflow-y: auto; background: var(--white); border-radius: var(--radius); padding: 1.5rem; box-shadow: 0 20px 50px rgba(30, 35, 34, 0.3); }
.modal__head { display: flex; align-items: flex-start; justify-content: space-between; gap: 1rem; }
.modal__title { margin: 0; font-size: 1.3rem; }
.modal__close { font: inherit; font-size: 1.75rem; line-height: 1; cursor: pointer; background: none; border: 0; color: var(--brand-dark); padding: 0 0.25rem; }
.modal__status { font-family: var(--display); font-weight: 700; margin: 0.5rem 0 1rem; color: var(--closed); }
.modal__status--open { color: var(--open); }
.modal__actions { display: flex; gap: 0.5rem; flex-wrap: wrap; margin: 1.25rem 0 0; }
.hours--modal .hours__row { border-bottom: 1px solid var(--line); padding: 0.4rem 0; }
.hours--modal dd { color: var(--ink-soft); }
.hours--modal .hours__row--today dd { color: var(--ink); }

/* ================================================== forms & booking ====== */

.notice { padding: 0.9rem 1.1rem; border-radius: var(--radius); background: var(--paper); border: 1px solid var(--line); }
.notice--ok { border-color: color-mix(in srgb, var(--open), white 60%); background: color-mix(in srgb, var(--open), white 92%); }
.notice--error { border-color: color-mix(in srgb, var(--closed), white 60%); background: color-mix(in srgb, var(--closed), white 93%); }
.notice p { margin: 0 0 0.35rem; }
.notice p:last-child { margin: 0; }

.steps { display: flex; list-style: none; margin: 0 0 2rem; padding: 0; gap: 0.25rem; flex-wrap: wrap; }
.steps__item { display: flex; align-items: center; gap: 0.4rem; font-family: var(--display); font-size: 0.9rem; color: var(--ink-soft); padding: 0.25rem 0.6rem 0.25rem 0.25rem; }
.steps__num { display: grid; place-items: center; width: 1.5rem; height: 1.5rem; border-radius: 50%; background: var(--line); color: var(--ink-soft); font-size: 0.8rem; font-weight: 700; flex: none; }
.steps__item--done .steps__num, .steps__item--current .steps__num { background: var(--brand); color: var(--white); }
.steps__item--current { color: var(--ink); font-weight: 700; }

.choices { list-style: none; margin: 0; padding: 0; display: grid; gap: 0.75rem; }
.choice { display: grid; grid-template-columns: 1fr auto; align-items: center; gap: 0.5rem 1rem; padding: 1.1rem 1.25rem; border: 1px solid var(--line); border-radius: var(--radius); text-decoration: none; color: inherit; background: var(--white); }
.choice:hover { border-color: var(--brand); background: var(--brand-tint); }
.choice__title { grid-column: 1; grid-row: 1; font-family: var(--display); font-weight: 700; color: var(--brand-dark); }
.choice__meta { grid-column: 1; grid-row: 2; color: var(--ink-soft); font-size: 0.925rem; }
.choice__go { grid-column: 2; grid-row: 1 / span 2; color: var(--brand-dark); font-size: 1.25rem; }

.options { display: grid; gap: 0.75rem; margin-bottom: 1.5rem; }
.option { display: flex; align-items: flex-start; gap: 0.85rem; padding: 1rem 1.25rem; border: 1px solid var(--line); border-radius: var(--radius); cursor: pointer; }
.option:hover { border-color: var(--brand); }
.option:has(input:checked) { border-color: var(--brand); background: var(--brand-tint); box-shadow: inset 0 0 0 1px var(--brand); }
.option input { margin-top: 0.3rem; accent-color: var(--brand); }
.option__title { display: block; font-family: var(--display); font-weight: 700; }
.option__meta { display: block; color: var(--ink-soft); font-size: 0.925rem; }

.pills { display: flex; gap: 0.5rem; flex-wrap: wrap; }
.pill { cursor: pointer; }
.pill input { position: absolute; opacity: 0; pointer-events: none; }
.pill span { display: grid; place-items: center; min-width: 3rem; padding: 0.6rem 1rem; border: 1px solid var(--line); border-radius: 100px; font-family: var(--display); font-weight: 700; }
.pill input:checked + span { background: var(--brand); color: var(--white); border-color: var(--brand); }
.pill input:focus-visible + span { outline: 3px solid var(--brand); outline-offset: 2px; }

.picker { display: grid; gap: 1.25rem; align-items: start; margin-bottom: 2rem; }
@media (min-width: 52rem) { .picker { grid-template-columns: minmax(17rem, 22rem) minmax(0, 1fr); gap: 1.75rem; } }
.calendar { border: 1px solid var(--line); border-radius: calc(var(--radius) + 4px); padding: 1rem 1rem 1.1rem; background: var(--white); }
@media (min-width: 52rem) { .calendar { position: sticky; top: 1rem; } }
.calendar__head { display: flex; align-items: center; justify-content: space-between; margin-bottom: 0.75rem; }
.calendar__month { margin: 0; font-size: 1.05rem; }
.calendar__nav { display: grid; place-items: center; width: 2.25rem; height: 2.25rem; border-radius: 50%; text-decoration: none; border: 1px solid var(--line); color: var(--brand-dark); }
.calendar__nav:hover { background: var(--brand); color: var(--white); border-color: var(--brand); }
.calendar__nav--off { opacity: 0.25; }
.calendar__grid { display: grid; grid-template-columns: repeat(7, 1fr); gap: 0.25rem; }
.calendar__dow { text-align: center; font-family: var(--display); font-size: 0.7rem; text-transform: uppercase; letter-spacing: 0.05em; color: var(--ink-faint); padding-bottom: 0.35rem; }
.calendar__day { display: grid; place-items: center; aspect-ratio: 1; border-radius: 50%; font-size: 0.95rem; text-decoration: none; font-variant-numeric: tabular-nums; }
.calendar__day--empty { visibility: hidden; }
.calendar__day--none { color: #b9b9be; }
.calendar__day--free { background: var(--brand-tint); color: var(--brand-dark); font-weight: 700; border: 1px solid transparent; transition: background 0.15s, color 0.15s; }
.calendar__day--free:hover { background: var(--brand); color: var(--white); }
.calendar__day.is-selected { background: var(--brand); color: var(--white); box-shadow: 0 0 0 3px var(--brand-tint); }
.calendar__key { display: flex; gap: 1rem; margin: 0.9rem 0 0; font-size: 0.8rem; color: var(--ink-soft); }
.calendar__key span::before { content: ""; display: inline-block; width: 0.7rem; height: 0.7rem; border-radius: 50%; margin-right: 0.35rem; vertical-align: -1px; background: var(--brand-tint); border: 1px solid var(--brand-line); }
.calendar__key span + span::before { background: transparent; border-color: var(--line); }
.picker.is-loading .times { opacity: 0.5; }
.times { border: 1px solid var(--line); border-radius: calc(var(--radius) + 4px); padding: 1.25rem 1.5rem 1.5rem; background: var(--white); min-height: 12rem; transition: opacity 0.15s; }
.times__head { margin-bottom: 1.1rem; padding-bottom: 0.9rem; border-bottom: 1px solid var(--line); }
.times__eyebrow { font-family: var(--display); font-size: 0.75rem; font-weight: 700; letter-spacing: 0.08em; text-transform: uppercase; color: var(--ink-soft); margin: 0 0 0.2rem; }
.times__heading { font-size: 1.35rem; margin: 0; }
.times__meta { margin: 0.25rem 0 0; color: var(--ink-soft); font-size: 0.9rem; }
.times__prompt { color: var(--ink-soft); margin: 0; }
.times__note { margin: 1.25rem 0 0; font-size: 0.875rem; color: var(--ink-soft); }
.slots { margin: 0; }
.slots__group + .slots__group { margin-top: 1.1rem; }
.slots__label { display: flex; align-items: center; gap: 0.5rem; font-size: 0.95rem; margin: 0 0 0.6rem; }
.slots__count { font-size: 0.72rem; font-weight: 700; color: var(--brand-dark); background: var(--brand-tint); border-radius: 999px; padding: 0.1rem 0.5rem; }
.slots__grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(5.5rem, 1fr)); gap: 0.6rem; }
.slot { font-family: var(--display); font-weight: 700; font-size: 0.95rem; cursor: pointer; padding: 0.65rem 0.5rem; border-radius: 10px; border: 1px solid var(--brand-line); background: var(--white); color: var(--brand-dark); text-align: center; transition: background 0.15s, color 0.15s, transform 0.1s; }
.slot:hover, .slot:focus-visible { background: var(--brand); color: var(--white); border-color: var(--brand); }
.slot:active { transform: scale(0.97); }
@media (max-width: 40rem) { .times { padding: 1rem 1rem 1.25rem; } .slots__grid { grid-template-columns: repeat(3, 1fr); } }

.bookform { margin-top: 1rem; }
.bookform__actions { margin-top: 1.5rem; }
.field { display: block; margin-bottom: 1rem; }
.field__label { display: block; font-family: var(--display); font-weight: 600; margin-bottom: 0.3rem; }
.field__help { display: block; color: var(--ink-soft); font-size: 0.875rem; margin-top: 0.25rem; }
.field__optional { font-weight: 400; color: var(--ink-soft); font-size: 0.85rem; }
.input { width: 100%; padding: 0.7rem 0.8rem; font: inherit; color: inherit; border: 1px solid var(--line); border-radius: var(--radius); background: var(--white); }
.input:focus { outline: 3px solid var(--brand); outline-offset: 1px; border-color: var(--brand); }
/* Drop-downs drawn by us, not the platform: Safari and iPhone otherwise
   ignore the padding and border and show a native control. */
select.input { -webkit-appearance: none; appearance: none; padding-right: 2.4rem; background-color: var(--white); background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 20 20' fill='none' stroke='%23303030' stroke-width='1.8' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M6 8l4 4 4-4'/%3E%3C/svg%3E"); background-repeat: no-repeat; background-position: right 0.75rem center; background-size: 1rem; line-height: 1.3; cursor: pointer; }
select.input:disabled { cursor: default; opacity: 0.6; }
@supports (-webkit-touch-callout: none) { select.input { font-size: max(1rem, 16px); } }
textarea.input { resize: vertical; }
.grid2 { display: grid; gap: 0 1rem; }
@media (min-width: 34rem) { .grid2 { grid-template-columns: 1fr 1fr; } }
.person { border: 1px solid var(--line); border-radius: var(--radius); padding: 1.25rem; margin: 0 0 1.25rem; }
.person--lead { border-color: var(--brand); box-shadow: inset 0 0 0 1px var(--brand); }
.person__legend { font-family: var(--display); font-weight: 700; color: var(--brand-dark); padding: 0 0.5rem; background: var(--white); }
.person__lead { display: inline-flex; align-items: center; gap: 0.4rem; margin-bottom: 1rem; cursor: pointer; font-weight: 600; }
.person__lead input { accent-color: var(--brand); }
.person--summary { background: var(--paper); }
.person__name { font-family: var(--display); font-weight: 700; margin-bottom: 0.5rem; }
.tag { display: inline-block; margin-left: 0.4rem; padding: 0.1rem 0.55rem; background: var(--brand); color: var(--white); border-radius: 100px; font-size: 0.75rem; font-weight: 700; text-transform: uppercase; letter-spacing: 0.04em; }
.chosen { display: flex; align-items: center; gap: 0.75rem; flex-wrap: wrap; padding: 0.85rem 1.1rem; background: var(--brand-tint); border-radius: var(--radius); }
.chosen__change { font-size: 0.875rem; }
.summary { margin: 0 0 1.5rem; }
.summary__row { display: grid; gap: 0.25rem 1rem; padding: 0.5rem 0; border-bottom: 1px solid var(--line); }
@media (min-width: 34rem) { .summary__row { grid-template-columns: 10rem 1fr; } }
.summary dt { color: var(--ink-soft); }
.summary dd { margin: 0; }
.summary--tight { margin: 0; font-size: 0.925rem; }
.summary--tight .summary__row { border-bottom: 0; padding: 0.15rem 0; }
.done { text-align: center; }
.done__tick { display: grid; place-items: center; width: 3.5rem; height: 3.5rem; margin: 0 auto 1rem; border-radius: 50%; background: var(--brand); color: var(--white); font-size: 1.75rem; }
.done__ref { font-family: var(--display); font-size: 2rem; font-weight: 800; letter-spacing: 0.15em; color: var(--brand-dark); margin: 0.25rem 0 1.25rem; }

.contact { display: grid; gap: clamp(1.5rem, 4vw, 3rem); align-items: start; }
@media (min-width: 56rem) { .contact { grid-template-columns: minmax(0, 1fr) 20rem; } }
.contact__side .panel-soft { margin-bottom: 1rem; }
.contact__phone a { font-family: var(--display); font-size: 1.4rem; font-weight: 700; text-decoration: none; }
.honeypot { position: absolute; left: -9999px; width: 1px; height: 1px; overflow: hidden; }
.consent { display: flex; gap: 0.65rem; align-items: flex-start; padding: 0.85rem 1rem; margin-bottom: 0.75rem; border: 1px solid var(--line); border-radius: var(--radius); background: var(--paper); cursor: pointer; }
.consent input { margin-top: 0.25rem; accent-color: var(--brand); width: 1rem; height: 1rem; flex: none; }
.consent span { font-size: 0.95rem; }

@media (prefers-reduced-motion: reduce) {
    .site-header { transition: none; }
    .js .nav, .js .hero--slider .hero__slide, .js .hero--slider .hero__text, .js .hero--slider .hero__media img, .card, .btn { transition: none; transform: none; }
    .card:hover { transform: none; }
}

/* ---------------------------------------------------------------- blog -- */

.card__meta { font-size: 0.85rem; color: var(--ink-soft); margin: 0 0 0.35rem; }
.post__meta { font-size: 0.92rem; color: var(--ink-soft); margin: 0 0 1rem; }
.pager { display: flex; justify-content: space-between; align-items: center; gap: 1rem; margin-top: var(--space-m); flex-wrap: wrap; }
.pager__count { color: var(--ink-soft); font-size: 0.92rem; }
.pager--post { margin-top: var(--space-m); padding-top: 1.5rem; border-top: 1px solid var(--line); }
.pager--post .btn { max-width: 48%; white-space: normal; text-align: left; }

/* --------------------------------------------------------- consent bar -- */

.cookie-bar { position: fixed; left: 1rem; right: 1rem; bottom: 1rem; z-index: 60; max-width: 34rem; margin-inline: auto; background: var(--white); border: 1px solid var(--line); border-radius: var(--radius); box-shadow: 0 16px 40px -16px rgba(30, 35, 34, 0.35); padding: 1rem 1.25rem; display: flex; gap: 1rem; align-items: center; flex-wrap: wrap; }
.cookie-bar p { margin: 0; flex: 1 1 16rem; font-size: 0.95rem; }
.cookie-bar__actions { display: flex; gap: 0.5rem; }

/* -------------------------------------------------------------- pop-up -- */

.popup { z-index: 90; }
.popup__panel { width: min(30rem, 100%); padding: 0; overflow: hidden; }
.popup__panel--image { width: min(34rem, 100%); }
.popup__image { display: block; width: 100%; aspect-ratio: 16 / 9; object-fit: cover; }
.popup__body { padding: 1.5rem; }
.popup__text { margin-top: 0.75rem; }
.popup__text p:last-child { margin-bottom: 0; }
.popup__hours { width: 100%; border-collapse: collapse; margin-top: 1rem; font-size: 0.97rem; }
.popup__hours th, .popup__hours td { text-align: left; padding: 0.5rem 0; border-top: 1px solid var(--line); }
.popup__hours th { font-weight: 600; padding-right: 1rem; }
.popup__hours td { text-align: right; white-space: nowrap; }
.popup__hours .is-closed td { color: var(--closed); font-weight: 700; }
.popup__actions { display: flex; gap: 0.6rem; flex-wrap: wrap; margin: 1.25rem 0 0; }
.has-popup { overflow: hidden; }
@media (prefers-reduced-motion: no-preference) {
    .popup:not([hidden]) .modal__panel { animation: popup-in 0.35s cubic-bezier(0.22, 0.61, 0.36, 1); }
    .popup:not([hidden]) .modal__backdrop { animation: popup-fade 0.35s ease; }
}
@keyframes popup-in { from { opacity: 0; transform: translateY(12px) scale(0.98); } to { opacity: 1; transform: none; } }
@keyframes popup-fade { from { opacity: 0; } to { opacity: 1; } }

/* --------------------------------------------------- legal and consent -- */

.form__privacy { font-size: 0.9rem; color: var(--ink-soft); margin: 0 0 1rem; }
.site-footer__legal-links { list-style: none; margin: 0; padding: 0; display: flex; gap: 1.1rem; flex-wrap: wrap; }
.site-footer__legal-links a { text-decoration: none; }
.site-footer__legal-links a:hover { text-decoration: underline; }
.prose--legal h2 { font-size: 1.25rem; margin-top: 2rem; }
.legal-table { width: 100%; border-collapse: collapse; font-size: 0.95rem; margin: 1rem 0; }
.legal-table th, .legal-table td { text-align: left; padding: 0.6rem 0.5rem; border-top: 1px solid var(--line); vertical-align: top; }
.legal-table th { font-size: 0.78rem; text-transform: uppercase; letter-spacing: 0.06em; color: var(--ink-soft); border-top: 0; }
.legal-table code { font-size: 0.9em; }
.legal__updated { font-size: 0.85rem; color: var(--ink-soft); margin-top: 2.5rem; }
@media (max-width: 40rem) { .legal-table { display: block; overflow-x: auto; } }

.map { min-height: 22rem; background: var(--paper); }
.map__placeholder { line-height: 1.5; display: grid; place-items: center; min-height: 22rem; padding: 2rem 1.25rem; background: linear-gradient(135deg, var(--brand-tint), var(--paper)); }
.map__card { background: var(--white); border: 1px solid var(--line); border-radius: var(--radius); padding: 1.5rem 1.75rem; max-width: 26rem; text-align: center; box-shadow: 0 16px 40px -24px rgba(30, 35, 34, 0.35); }
.map__eyebrow { font-size: 0.78rem; font-weight: 700; letter-spacing: 0.08em; text-transform: uppercase; color: var(--brand-dark); margin: 0 0 0.5rem; }
.map__address { font-family: var(--display); font-weight: 700; font-size: 1.1rem; margin: 0 0 1rem; }
.map__actions { display: flex; gap: 0.6rem; justify-content: center; flex-wrap: wrap; margin: 0 0 0.75rem; }
.map__note { font-size: 0.8rem; color: var(--ink-soft); margin: 0; }

/* Long email addresses and web addresses break at the edge of their box instead of poking out of it. */
.contact__side, .sidebar, .site-footer, .visit, .modal__panel { overflow-wrap: anywhere; }
.contact__side a[href^="mailto:"] { font-size: 0.92rem; letter-spacing: -0.01em; }

/* ----------------------------------------------- contact page info cards -- */

.infocard { background: var(--white); border: 1px solid var(--line); border-radius: var(--radius); padding: 1.35rem 1.5rem 1.5rem; margin-bottom: 1rem; box-shadow: 0 10px 30px -24px rgba(30, 35, 34, 0.35); }
.infocard__head { display: flex; align-items: center; gap: 0.75rem; margin-bottom: 0.9rem; }
.infocard__icon { display: grid; place-items: center; width: 2.5rem; height: 2.5rem; border-radius: 12px; background: var(--brand-tint); color: var(--brand); flex: none; }
.infocard__icon svg { width: 1.3rem; height: 1.3rem; }
.infocard__title { font-family: var(--display); font-size: 1.05rem; font-weight: 700; color: var(--ink); margin: 0; text-transform: none; letter-spacing: 0; }
.infocard__address { margin: 0 0 1rem; line-height: 1.55; }
.infocard__action { margin: 0; }
.infocard__list { list-style: none; margin: 0; padding: 0; display: grid; gap: 0.6rem; }
.infocard__list li { display: flex; align-items: center; gap: 0.65rem; min-width: 0; }
.infocard__glyph { color: var(--brand); flex: none; display: grid; }
.infocard__glyph svg { width: 1.1rem; height: 1.1rem; }
.infocard__list a { color: var(--ink); text-decoration: none; min-width: 0; }
.infocard__list a:hover { color: var(--brand-dark); text-decoration: underline; }
.infocard__phone { font-family: var(--display); font-weight: 700; font-size: 1.2rem; }
.infocard__hours .hours__row { display: flex; justify-content: space-between; gap: 1rem; padding: 0.45rem 0; border-bottom: 1px solid var(--line); }
.infocard__hours .hours__row:last-child { border-bottom: 0; }
.infocard__hours .hours__row--today { font-weight: 700; color: var(--brand-dark); }
.infocard__hours .hours__row--today dt::after { content: " · today"; font-weight: 500; color: var(--ink-soft); font-size: 0.85em; }
.infocard__hours dt, .infocard__hours dd { margin: 0; }
.infocard__hours dd { text-align: right; }
.infocard__note { font-size: 0.9rem; color: var(--ink-soft); margin: 0.9rem 0 0; }
.infocard { padding: 1.35rem 1.25rem 1.4rem; }
.infocard__list a[href^="mailto:"] { font-size: 0.86rem; letter-spacing: -0.01em; }
/* A section heading straight after an introduction needs air above it; the lede's own bottom margin is zero by design. */
.lede + h2, .lede + .notice + h2, .lede + form > h2:first-child { margin-top: 2rem; }

/* ------------------------------------------------- date of birth boxes -- */

.dob { border: 0; padding: 0; margin: 0 0 1.25rem; min-width: 0; }
.dob legend { padding: 0; }
.dob__row { display: flex; gap: 0.6rem; max-width: 24rem; }
.dob__part { display: grid; gap: 0.2rem; flex: 1 1 5rem; min-width: 0; }
.dob__part--month { flex: 1.6 1 7rem; }
.dob__part--year { flex: 1.2 1 6rem; }
/* The boxes say Day / Month / Year themselves; the labels are for screen readers. */
.dob__label { position: absolute; width: 1px; height: 1px; overflow: hidden; clip: rect(0 0 0 0); clip-path: inset(50%); white-space: nowrap; }
.dob__part { gap: 0; }
.dob select.input { padding-right: 2rem; background-position: right 0.55rem center; }

.input--postcode { max-width: 10rem; text-transform: uppercase; }

/* Sub-headings inside long forms: small, spaced, with a rule so the groups read at a glance. */
.form__heading { font-family: var(--display); font-size: 0.85rem; font-weight: 700; letter-spacing: 0.08em; text-transform: uppercase; color: var(--brand-dark); margin: 2rem 0 0.9rem; padding-bottom: 0.45rem; border-bottom: 1px solid var(--line); }
.bookform > .form__heading:first-of-type, .person .form__heading:first-of-type { margin-top: 0.5rem; }

/* --------------------------------------------- form sent: the thank-you -- */

.done { margin-top: 2rem; padding: 2rem; background: var(--white); border: 1px solid var(--line); border-radius: var(--radius); box-shadow: 0 16px 40px -28px rgba(30, 35, 34, 0.4); }
.done__mark { display: grid; place-items: center; width: 3rem; height: 3rem; border-radius: 50%; background: color-mix(in srgb, var(--open), white 85%); color: var(--open); margin-bottom: 1rem; }
.done__mark svg { width: 1.5rem; height: 1.5rem; }
.done__title { margin: 0 0 0.5rem; }
.done p { max-width: 36rem; }
.done__actions { display: flex; gap: 0.6rem; flex-wrap: wrap; margin: 1.5rem 0 0; }
.done, .done h2, .done p { text-align: left; }
.done h2 { font-size: 1.5rem; }
/* The last thing in a soft panel sits on the padding, not on its own margin as well. */
.panel-soft > :last-child { margin-bottom: 0; }
.panel-soft .ticks li:last-child { margin-bottom: 0; }
.panel-soft h2 { margin-bottom: 0.75rem; }

/* ------------------------------------------------------ menu drop-down -- */

.nav__item--sub { position: relative; display: flex; align-items: center; gap: 0.2rem; }
.nav__more { background: none; border: 0; padding: 0.25rem; cursor: pointer; color: var(--ink); display: grid; place-items: center; }
.nav__chevron { display: block; width: 0.45rem; height: 0.45rem; border-right: 2px solid currentColor; border-bottom: 2px solid currentColor; transform: rotate(45deg) translateY(-2px); transition: transform 0.2s ease; }
.nav__more[aria-expanded="true"] .nav__chevron { transform: rotate(-135deg) translateY(-2px); }
.nav__sub { list-style: none; margin: 0; padding: 0; }

@media (min-width: 64rem) {
    .nav__sub {
        position: absolute; top: calc(100% + 0.9rem); left: -0.75rem; min-width: 13rem; z-index: 40;
        background: var(--white); border: 1px solid var(--line); border-radius: var(--radius); padding: 0.5rem;
        box-shadow: 0 16px 40px -20px rgba(30, 35, 34, 0.35);
        opacity: 0; visibility: hidden; transform: translateY(-4px); transition: opacity 0.15s ease, transform 0.15s ease, visibility 0s linear 0.15s;
    }
    /* A hover bridge so the pointer can travel down into the panel without it closing. */
    .nav__sub::before { content: ""; position: absolute; left: 0; right: 0; top: -1rem; height: 1rem; }
    .nav__item--sub:hover .nav__sub, .nav__item--sub:focus-within .nav__sub, .nav__item--sub.is-open .nav__sub { opacity: 1; visibility: visible; transform: none; transition: opacity 0.15s ease, transform 0.15s ease, visibility 0s; }
    .nav__sub a { display: block; padding: 0.55rem 0.75rem; border-radius: 8px; font-size: 0.97rem; box-shadow: none; }
    .nav__sub a:hover { background: var(--brand-tint); }
    .nav__sub a[aria-current="page"] { background: var(--brand-tint); box-shadow: none; }
}

@media (max-width: 63.99rem) {
    .js .nav__item--sub { flex-wrap: wrap; gap: 0.75rem; }
    .js .nav__item--sub > a { flex: 1; }
    .js .nav__more { width: 2.75rem; height: 2.75rem; }
    .js .nav__sub { flex-basis: 100%; display: none; padding: 0 0 0.5rem 0.75rem; }
    .js .nav__item--sub.is-open .nav__sub { display: block; }
    .js .nav__sub li { border-bottom: 0; }
    .js .nav__sub a { font-size: 1rem; padding: 0.55rem 0.25rem; color: var(--ink-soft); }
}

/* Menu states, settled: the current page carries a thin underline and nothing else; hover only shifts colour.
   In a drop-down the current page is bold with a dot, and only the item under the pointer gets a tint. */
.nav__list > li > a:hover { color: var(--brand-dark); }
@media (min-width: 64rem) {
    .nav__list > li > a[aria-current="page"] { color: var(--ink); box-shadow: inset 0 -2px 0 var(--brand); }
    .nav__list > li > a[aria-current="page"]:hover { color: var(--brand-dark); }
}
@media (max-width: 63.99rem) {
    .js .nav__list > li > a[aria-current="page"], .js .nav__sub a[aria-current="page"] { color: var(--brand-dark); font-weight: 700; box-shadow: none; }
}
@media (min-width: 64rem) {
    .nav__sub a, .nav__sub a[aria-current="page"] { background: transparent; color: var(--ink); box-shadow: none; }
    .nav__sub a[aria-current="page"] { font-weight: 700; padding-left: 1.4rem; position: relative; }
    .nav__sub a[aria-current="page"]::before { content: ""; position: absolute; left: 0.55rem; top: 50%; width: 0.4rem; height: 0.4rem; border-radius: 50%; background: var(--brand); transform: translateY(-50%); }
    .nav__sub a:hover { background: var(--brand-tint); color: var(--brand-dark); }
}

/* ------------------------------------------------------- app promotion -- */

.app-promo__inner { display: grid; gap: clamp(1.5rem, 4vw, 3rem); align-items: center; }
@media (min-width: 52rem) { .app-promo__inner { grid-template-columns: 1.1fr 0.9fr; } .app-promo--nhs .app-promo__inner { grid-template-columns: 1fr; max-width: 46rem; } }
.app-promo__media img { width: min(100%, 26rem); height: auto; display: block; margin-inline: auto; }
.app-promo__stores { display: flex; gap: 0.75rem; flex-wrap: wrap; margin: 1.5rem 0 0; }
.store { display: inline-flex; align-items: center; gap: 0.6rem; padding: 0.55rem 1.1rem 0.55rem 0.85rem; border-radius: 10px; background: var(--ink); color: var(--white); text-decoration: none; line-height: 1.1; transition: transform 0.15s ease, background 0.15s ease; }
.store:hover { background: var(--brand-dark); color: var(--white); transform: translateY(-1px); }
.store span { display: grid; font-family: var(--display); font-weight: 700; font-size: 1.05rem; }
.store small { font-family: var(--body); font-weight: 400; font-size: 0.68rem; opacity: 0.85; }
.eyebrow { font-family: var(--display); font-size: 0.78rem; font-weight: 700; letter-spacing: 0.1em; text-transform: uppercase; color: var(--brand); margin: 0 0 0.5rem; }

/* A button that sits on the brand-coloured band. */
.btn--on-brand { background: var(--white); color: var(--brand-dark); }
.btn--on-brand:hover { background: var(--brand-tint); color: var(--brand-dark); }
.nominate-cta .lede { margin-bottom: 1.5rem; }
.nominate-cta p:last-child { margin: 0; }

/* ------------------------------------------------- prescriptions page -- */

.rx { display: grid; gap: clamp(1.5rem, 4vw, 3.5rem); align-items: center; }
@media (min-width: 52rem) { .rx { grid-template-columns: 1fr 1fr; } }
.rx__heading { font-size: clamp(1.6rem, 1.2rem + 1.4vw, 2.2rem); margin: 0 0 0.75rem; }
.rx__lead .lede { margin-bottom: 0.5rem; }
.rx__action { margin: 1.25rem 0 0; }
.rx__points { list-style: none; margin: 0; padding: 0; display: grid; gap: 0.9rem; grid-template-columns: repeat(auto-fit, minmax(13rem, 1fr)); counter-reset: none; }
.rx__point { display: grid; gap: 0.6rem; padding: 1.25rem; background: var(--white); border: 1px solid var(--line); border-radius: var(--radius); font-family: var(--display); font-weight: 600; font-size: 1.02rem; line-height: 1.35; box-shadow: 0 10px 30px -26px rgba(30, 35, 34, 0.5); }
.rx__num { display: grid; place-items: center; width: 2.1rem; height: 2.1rem; border-radius: 50%; background: var(--brand-tint); color: var(--brand); font-size: 0.95rem; font-weight: 800; }
.rx__delivery { margin-top: clamp(1.5rem, 4vw, 2.5rem); }

/* Phones: the four cards stack on top of one another as you scroll down, and peel off again on the way up.
   Pure sticky positioning: each card pins a little lower than the one before, so a sliver of each stays in view. */
@media (max-width: 51.99rem) {
    .rx__points { gap: 0.75rem; }
    .rx__point { position: sticky; top: calc(1rem + var(--stack, 0) * 0.85rem); min-height: 7.5rem; box-shadow: 0 -8px 24px -12px rgba(30, 35, 34, 0.25), 0 10px 30px -26px rgba(30, 35, 34, 0.5); }
    .rx__point:nth-child(1) { --stack: 0; }
    .rx__point:nth-child(2) { --stack: 1; }
    .rx__point:nth-child(3) { --stack: 2; }
    .rx__point:nth-child(4) { --stack: 3; }
    /* Room below the last card so the pile can form before the next section arrives. */
    .rx__points { padding-bottom: 2rem; }
}

/* A longer drop-down (Pharmacy First's seven conditions) gets two columns on desktop. */
@media (min-width: 64rem) {
    .nav__item--tall .nav__sub { min-width: 26rem; columns: 2; column-gap: 0.25rem; }
    .nav__item--tall .nav__sub li { break-inside: avoid; }
}
/* Sidebar blocks: the last thing sits on the padding, not on its own margin or a trailing rule. */
.sidebar__block > :last-child { margin-bottom: 0; }
.sidebar__list li:last-child { border-bottom: 0; }
.sidebar__list li:last-child a { padding-bottom: 0; }

/* Phones: service cards become compact rows — a small square picture (or the icon) beside the title and
   summary — so a list of nine is a couple of screens rather than six. Tablets and desktops keep the grid. */
@media (max-width: 40rem) {
    .grid--cards { gap: 0.6rem; }
    /* The picture is taken out of the flow, so the words set the card's height
       and the picture fills it whatever shape the photo is. */
    .grid--cards .card { display: block; position: relative; min-height: 4.75rem; }
    .grid--cards .card__image { position: absolute; top: 0; left: 0; bottom: 0; width: 4.75rem; height: 100%; min-height: 0; aspect-ratio: auto; object-fit: cover; }
    .grid--cards .card__mark { position: absolute; top: 0; left: 0; bottom: 0; width: 4.75rem; height: 100%; min-height: 0; margin: 0; border-radius: 0; }
    .grid--cards .card__body { padding: 0.7rem 0.9rem 0.7rem calc(4.75rem + 0.9rem); }
    .grid--cards .card__title { font-size: 1rem; margin-bottom: 0.15rem; }
    .grid--cards .card__summary { font-size: 0.85rem; margin: 0; display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; overflow: hidden; }
    .grid--cards .card__more { display: none; }
    .grid--cards .card--post .card__image { width: 5.5rem; }
    .grid--cards .card--post .card__body { padding-left: calc(5.5rem + 0.9rem); }
}
/* Wide enough that service names sit on one line; the panel hugs its longest name rather than a fixed width. */
@media (min-width: 64rem) {
    .nav__item--tall .nav__sub { min-width: 30rem; width: max-content; max-width: min(40rem, calc(100vw - 2rem)); column-gap: 1rem; }
    .nav__item--tall .nav__sub a { white-space: nowrap; }
}

/* ----------------------------------------------------------- about page -- */

.about { display: grid; gap: clamp(1.5rem, 4vw, 3.5rem); align-items: center; }
@media (min-width: 52rem) { .about--with-photo { grid-template-columns: minmax(0, 1.25fr) minmax(0, 0.9fr); } }
.about__text .lede { margin-bottom: 1.25rem; }
.about__text .prose { max-width: none; }
.about__media { margin: 0; }
/* Centred against the text rather than pinned to the top, so the two read as one block. */
.about__media img { display: block; width: 100%; height: auto; border-radius: var(--radius); box-shadow: 0 16px 40px -20px rgba(30, 35, 34, 0.35); }
.about__media figcaption { margin-top: 0.6rem; font-size: 0.9rem; color: var(--ink-soft); text-align: center; }

.regs__cols { display: grid; gap: clamp(2rem, 5vw, 4rem); }
@media (min-width: 52rem) { .regs__cols { grid-template-columns: 1fr 1fr; } }
.regs__heading { font-size: 1.45rem; margin: 0 0 0.9rem; padding-bottom: 0.9rem; position: relative; }
.regs__heading::after { content: ""; position: absolute; left: 0; bottom: 0; width: 3rem; height: 3px; background: var(--brand); border-radius: 2px; }
.regs__col p { margin: 0 0 0.6rem; max-width: 34rem; }
.regs__col strong { color: var(--ink); }
.regs__number { color: var(--brand-dark); font-weight: 700; font-variant-numeric: tabular-nums; letter-spacing: 0.02em; text-decoration-thickness: 1.5px; text-underline-offset: 0.15em; }
.regs__col a { color: var(--brand-dark); }
.regs--feedback .prose { max-width: 48rem; }

/* =====================================================================
   Hero, second pass. Desktop: more hierarchy, a deeper photo frame with a
   brand-tinted shape behind it, timed dots. Phones: the photo is the
   backdrop and the words sit in a gradient over it at a fixed height, so
   nothing can move as the text length changes between slides.
   ===================================================================== */

.hero__text h1 { margin-bottom: 0.6rem; }
.hero__strapline { font-size: 1.3rem; font-weight: 700; margin: 0 0 0.9rem; }
.hero__text .lede { font-size: 1.08rem; }

/* Timed dots: a pill that fills over the slide's seven seconds. */
.hero__dots { gap: 0; }
.hero__dot.is-active { width: 3rem; }
.hero__dot-pip { position: relative; overflow: hidden; width: 0.6rem; height: 0.6rem; border-radius: 999px; border: 1.5px solid var(--brand); background: transparent; transition: width 0.25s ease, background 0.25s ease; }
.hero__dot.is-active .hero__dot-pip { width: 2.4rem; background: color-mix(in srgb, var(--brand), white 75%); border-color: var(--brand); transform: none; }
.hero__dot-fill { position: absolute; inset: 0; background: var(--brand); transform: scaleX(0); transform-origin: left center; }
.hero--slider.is-timing .hero__dot.is-active .hero__dot-fill { animation: hero-fill var(--hero-interval, 7s) linear forwards; }
@keyframes hero-fill { from { transform: scaleX(0); } to { transform: scaleX(1); } }

@media (min-width: 52rem) {
    .hero__media { position: relative; aspect-ratio: 4 / 3; z-index: 1; overflow: visible; }
    .hero__frame { border-radius: calc(var(--radius) + 6px); box-shadow: 0 24px 60px -24px rgba(30, 35, 34, 0.45); }
    .hero__media::before { content: ""; position: absolute; inset: 1.25rem -1.25rem -1.25rem 1.25rem; border-radius: calc(var(--radius) + 6px); background: color-mix(in srgb, var(--brand), white 80%); z-index: -1; }
    .js .hero--slider .hero__media img { transform: scale(1.06); transition: transform 1.6s cubic-bezier(0.22, 0.61, 0.36, 1); }
    .js .hero--slider .is-active .hero__media img { transform: scale(1); }
    .js .hero--slider .hero__text { transform: translateY(14px); transition: transform 0.9s cubic-bezier(0.22, 0.61, 0.36, 1), opacity 0.9s ease; opacity: 0; }
    .js .hero--slider .is-active .hero__text { transform: none; opacity: 1; }
}

@media (max-width: 51.99rem) {
    .hero { padding: 0; background: var(--ink); }
    /* A 4:5 frame: enough for a two-line heading, strapline and buttons, without eating the screen. */
    .hero__track { width: 100%; height: min(104vw, 26rem); }
    .hero__slide { height: 100%; display: block; }
    .hero__inner { display: block; height: 100%; width: 100%; position: relative; }
    .hero__media { position: absolute; inset: 0; aspect-ratio: auto; }
    .hero__frame { border-radius: 0; box-shadow: none; height: 100%; }
    .hero__media img { width: 100%; height: 100%; object-fit: cover; }
    /* The scrim the words sit in: clear at the top, dark enough at the foot for white text on any photo. */
    .hero__inner::after { content: ""; position: absolute; inset: 0; background: linear-gradient(to top, rgba(10, 14, 20, 0.88) 0%, rgba(10, 14, 20, 0.55) 40%, rgba(10, 14, 20, 0) 75%); pointer-events: none; }
    .hero__text { position: absolute; left: 0; right: 0; bottom: 0; z-index: 1; padding: 1rem 1.25rem 3.6rem; color: var(--white); }
    .hero__inner--solo .hero__text { position: absolute; }
    .hero__text h1 { color: var(--white); font-size: clamp(1.5rem, 1.1rem + 2.4vw, 1.9rem); line-height: 1.1; margin-bottom: 0.3rem; text-shadow: 0 2px 12px rgba(0, 0, 0, 0.35); }
    .hero__strapline { color: rgba(255, 255, 255, 0.92); font-size: 0.95rem; margin-bottom: 0.75rem; }
    .hero__text .lede { display: none; }
    .hero__actions { margin-top: 0; gap: 0.5rem; }
    .hero__actions .btn { padding: 0.65em 1.1em; font-size: 0.95rem; }
    .hero__actions .btn--ghost { color: var(--white); border-color: rgba(255, 255, 255, 0.55); background: rgba(255, 255, 255, 0.08); }
    .hero__actions .btn--primary { background: var(--white); color: var(--brand-dark); }
    /* No photo: the same panel on the brand colour, so a text-only slide still has a shape. */
    .hero__inner--solo { background: linear-gradient(160deg, var(--brand-dark), var(--brand)); }
    .hero__inner--solo::after { display: none; }
    /* Controls overlay the foot of the picture. */
    .hero--slider { padding-bottom: 0; }
    .hero__controls { position: absolute; left: 0; right: 0; bottom: 0.7rem; margin: 0; z-index: 2; }
    .hero__controls-inner { justify-content: center; }
    .hero__arrow { background: rgba(255, 255, 255, 0.14); border-color: rgba(255, 255, 255, 0.35); color: var(--white); width: 2.1rem; height: 2.1rem; }
    .hero__dot-pip { border-color: rgba(255, 255, 255, 0.85); }
    .hero__dot.is-active .hero__dot-pip { background: rgba(255, 255, 255, 0.3); border-color: rgba(255, 255, 255, 0.85); }
    .hero__dot-fill { background: var(--white); }
    .js .hero--slider .hero__text { transform: translateY(10px); transition: transform 0.75s cubic-bezier(0.22, 0.61, 0.36, 1); }
    .js .hero--slider .is-active .hero__text { transform: none; }
    .js .hero--slider .hero__media img { transform: scale(1.06); transition: transform 1.6s cubic-bezier(0.22, 0.61, 0.36, 1); }
    .js .hero--slider .is-active .hero__media img { transform: scale(1); }
    /* A lone static hero on a phone gets the same treatment. */
    .hero:not(.hero--slider) .hero__track { height: min(100vw, 24rem); }
    .hero:not(.hero--slider) .hero__text { padding-bottom: 1.5rem; }
}

/* No sideways drag. "clip" cuts off anything poking past the edge without turning the page into a
   scroll container, which "hidden" would, and that would break every position: sticky on the site. */
html, body { overflow-x: clip; }
@supports not (overflow-x: clip) { html, body { overflow-x: hidden; } }

/* The slide-out menu is parked off the right edge while closed; iPad Safari still counts it as page
   width unless it is hidden as well as moved. Visibility follows the slide so the animation is kept. */
@media (max-width: 63.99rem) {
    .js .nav { visibility: hidden; transition: transform 0.22s ease, visibility 0s linear 0.22s; }
    .js .nav.is-open { visibility: visible; transition: transform 0.22s ease, visibility 0s; }
}

/* ------------------------------------------- trust: phone carousel -- */
/* One fact at a time, centred, sliding in from the right and looping. */
.trust.is-carousel .trust__list { position: relative; height: 3.1rem; padding: 0; overflow: hidden; display: block; }
.trust.is-carousel .trust__item {
	position: absolute; inset: 0; margin: 0; padding: 0 1rem;
	justify-content: center; text-align: center;
	opacity: 0; transform: translateX(100%); visibility: hidden;
	transition: transform 0.55s cubic-bezier(0.22, 0.61, 0.36, 1), opacity 0.4s ease, visibility 0s linear 0.55s;
}
.trust.is-carousel .trust__item.is-active { opacity: 1; transform: none; visibility: visible; transition-delay: 0s, 0s, 0s; }
.trust.is-carousel .trust__item.is-leaving { transform: translateX(-100%); }
.trust.is-carousel .trust__item a { min-width: 0; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }

/* ------------------------------------------------ visit: map tile -- */
/* After the generic map rules so the tile's sizing wins. */
.visit .visit__map { min-height: 18rem; border-radius: calc(var(--radius) + 4px); overflow: hidden; border: 1px solid var(--line); box-shadow: 0 14px 34px -28px rgba(30, 35, 34, 0.4); }
.visit .map--tile .map__placeholder { min-height: 100%; height: 100%; padding: 1.5rem 1.25rem; }
.visit .map--tile .map__card { padding: 1.25rem 1.4rem; max-width: 22rem; }
.visit .map--tile .map__address { font-size: 1rem; }
.visit .map--tile .map__note { font-size: 0.75rem; }
.visit .map--tile iframe { height: 100%; min-height: 18rem; }
@media (min-width: 40rem) { .visit .visit__map { min-height: 20rem; } }
@media (min-width: 64rem) { .visit .visit__map { min-height: 0; } }

/* ------------------------------------------- home: featured services -- */
/* Up to four in a row on desktop, two by two on tablet. */
@media (min-width: 40rem) { .grid--home { grid-template-columns: repeat(2, 1fr); } }
@media (min-width: 64rem) { .grid--home { grid-template-columns: repeat(4, 1fr); gap: 1.1rem; } }

/* The map before its frame arrives: a quiet tinted panel, no controls. */
.map__pending { min-height: inherit; height: 100%; background: linear-gradient(135deg, var(--brand-tint), var(--paper)); display: grid; place-items: center; color: var(--brand); }
.map__pending svg { width: 2.25rem; height: 2.25rem; opacity: 0.6; }
.map--tile .map__pending { min-height: 18rem; }
section.map .map__pending { min-height: 22rem; }


/* ---------------------------------------------------------- not found -- */
.lost { background: var(--brand-tint); }
.lost__inner { max-width: 40rem; text-align: center; }
.lost__code { font-family: var(--display); font-weight: 800; font-size: clamp(4rem, 12vw, 6.5rem); line-height: 1; letter-spacing: -0.04em; color: var(--brand); opacity: 0.18; margin: 0 0 0.25rem; }
.lost__title { margin-bottom: 0.75rem; }
.lost__lede { margin: 0 auto 1.5rem; }
.lost__actions { display: flex; gap: 0.75rem; justify-content: center; flex-wrap: wrap; margin: 0 0 2.25rem; }
.lost__pages { background: var(--white); border: 1px solid var(--line); border-radius: calc(var(--radius) + 4px); padding: 1.25rem 1.5rem; box-shadow: 0 14px 34px -28px rgba(30, 35, 34, 0.4); }
.lost__pages-title { font-family: var(--display); font-weight: 700; font-size: 0.8rem; letter-spacing: 0.08em; text-transform: uppercase; color: var(--ink-soft); margin: 0 0 0.75rem; }
.lost__list { list-style: none; margin: 0; padding: 0; display: flex; flex-wrap: wrap; justify-content: center; gap: 0.5rem 0.6rem; }
.lost__list a { display: inline-block; padding: 0.45rem 1rem; border-radius: 999px; border: 1px solid var(--brand-line); color: var(--brand-dark); text-decoration: none; font-weight: 600; font-size: 0.95rem; }
.lost__list a:hover { background: var(--brand); border-color: var(--brand); color: var(--white); }
.lost__phone { margin: 1.5rem 0 0; color: var(--ink-soft); }
.lost__phone a { font-weight: 700; color: var(--brand-dark); }

/* The booking confirmation shares the thank-you card but sits centred, tick and all. */
.done--centre, .done--centre h2, .done--centre p { text-align: center; }
.done--centre p { margin-inline: auto; }
.done--centre .done__tick { margin-inline: auto; }
.done--centre .section__foot { justify-content: center; }

/* Inside the setup wizard's preview: a brief glow on the part just changed, and no map */
.is-live-preview .is-spotlit { outline: 3px solid color-mix(in srgb, var(--brand), white 30%); outline-offset: 6px; border-radius: 4px; transition: outline-color 0.6s; }
.is-live-preview .cookie-bar { display: none; }