/* ==========================================================================
   Gallery House Offices — site stylesheet
   Responsive, mobile-first. Replaces the legacy fixed-width style.css.
   ========================================================================== */

/* --- fonts ---------------------------------------------------------------- */

/* Inter, self-hosted. Previously loaded from fonts.googleapis.com, which cost
   ~775ms of render-blocking time on every page — almost all of it third-party
   DNS + TLS before the font files were even named, not the 916-byte stylesheet
   itself. Serving from this origin removes that round trip entirely, and also
   removes the visitor-IP transfer to Google that an embedded webfont performs.

   These are variable files covering the whole 400-700 range in one download per
   subset, so the four weights the site uses cost one file, not four. The
   unicode-range gate means latin-ext is only fetched if a page actually uses a
   character from it — English copy never will.

   Update: re-download from the Google Fonts CSS2 API with a modern browser UA,
   which is what selects woff2 + variable. Bump the family version folder in the
   URL if Inter is revised (currently v20). */

@font-face {
    font-family: 'Inter';
    font-style: normal;
    font-weight: 400 700;
    font-display: swap;
    src: url('/assets/fonts/inter-latin-var.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: 'Inter';
    font-style: normal;
    font-weight: 400 700;
    font-display: swap;
    src: url('/assets/fonts/inter-latin-ext-var.woff2') format('woff2');
    unicode-range: U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF,
                   U+0304, U+0308, U+0329, U+1D00-1DBF, U+1E00-1E9F, U+1EF2-1EFF,
                   U+2020, U+20A0-20AB, U+20AD-20C0, U+2113, U+2C60-2C7F, U+A720-A7FF;
}

/* --- design tokens -------------------------------------------------------- */

:root {
    --ink:            #16181b;
    --ink-soft:       #3c4249;
    --ink-muted:      #5d6670;   /* 5.36:1 on --surface-alt (was 4.34:1) */
    --line:           #e2ddd5;
    --line-strong:    #cdc5b8;
    --surface:        #ffffff;
    --surface-alt:    #f7f5f1;
    --surface-dark:   #16181b;
    /* Accent tones are darkened to clear WCAG AA (4.5:1) at 12px on both
       --surface and --surface-alt. Ratios: accent 5.60/5.14, dark 7.68/7.06. */
    --accent:         #8a5f2b;
    --accent-dark:    #6f4c22;
    --accent-tint:    #f4ece0;
    --available:      #1f7a4d;
    --available-tint: #e6f3ec;
    --let:            #8a6130;
    --let-tint:       #f4ece0;

    /* Display and body are the same sans family. The token is kept separate so
       headings, the brand name and the fact figures can be moved to a different
       face later without hunting through the stylesheet. */
    --font-display: 'Inter', -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto,
                    'Helvetica Neue', Arial, sans-serif;
    --font-body: 'Inter', -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto,
                 'Helvetica Neue', Arial, sans-serif;

    --wrap: 1160px;
    --gutter: clamp(1.25rem, 4vw, 2.5rem);
    --radius: 4px;
    --radius-lg: 8px;
    --shadow: 0 1px 2px rgba(22, 24, 27, .06), 0 8px 24px rgba(22, 24, 27, .07);
    --shadow-lift: 0 2px 4px rgba(22, 24, 27, .08), 0 16px 40px rgba(22, 24, 27, .12);
    --ease: cubic-bezier(.4, 0, .2, 1);
}

/* --- reset ---------------------------------------------------------------- */

*, *::before, *::after { box-sizing: border-box; }

html {
    -webkit-text-size-adjust: 100%;
    scroll-behavior: smooth;
}

[id] { scroll-margin-top: 110px; }

body {
    margin: 0;
    background: var(--surface);
    color: var(--ink-soft);
    font-family: var(--font-body);
    font-size: 1rem;
    line-height: 1.65;
    -webkit-font-smoothing: antialiased;
    -moz-osx-font-smoothing: grayscale;
}

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

h1, h2, h3, h4 {
    margin: 0 0 .5em;
    color: var(--ink);
    font-family: var(--font-display);
    font-weight: 600;
    line-height: 1.15;
    letter-spacing: -.01em;
}

h1 { font-size: clamp(2rem, 1.35rem + 2.7vw, 3.25rem); }
h2 { font-size: clamp(1.5rem, 1.15rem + 1.5vw, 2.25rem); }
h3 { font-size: clamp(1.15rem, 1rem + .6vw, 1.4rem); }
h4 { font-size: 1.0625rem; }

p { margin: 0 0 1.1em; }
p:last-child { margin-bottom: 0; }

a { color: var(--accent-dark); text-decoration-thickness: 1px; text-underline-offset: 3px; }
a:hover { color: var(--ink); }

ul, ol { margin: 0 0 1.1em; padding-left: 1.25em; }
li { margin-bottom: .35em; }

hr { border: 0; border-top: 1px solid var(--line); margin: 2.5rem 0; }

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

.skip-link {
    position: absolute;
    left: -9999px;
    top: 0;
    z-index: 200;
    background: var(--ink);
    color: #fff;
    padding: .75rem 1.25rem;
    text-decoration: none;
}
.skip-link:focus { left: 0; color: #fff; }

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

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

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

.container--narrow { max-width: 760px; }

.section { padding-block: clamp(3rem, 6vw, 5.5rem); }
.section--tight { padding-block: clamp(2rem, 4vw, 3.5rem); }
.section--alt { background: var(--surface-alt); }
.section--dark { background: var(--surface-dark); color: #cfd3d8; }
.section--dark h2, .section--dark h3 { color: #fff; }

.section-head { max-width: 42rem; margin-bottom: clamp(1.75rem, 3vw, 2.75rem); }
.section-head p { color: var(--ink-muted); font-size: 1.0625rem; margin-bottom: 0; }

.kicker {
    display: block;
    margin-bottom: .75rem;
    color: var(--accent);
    font-family: var(--font-body);
    font-size: .75rem;
    font-weight: 600;
    letter-spacing: .16em;
    text-transform: uppercase;
}

.lead { font-size: clamp(1.0625rem, 1rem + .35vw, 1.25rem); color: var(--ink-soft); }

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

.btn {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: .5rem;
    padding: .8rem 1.6rem;
    border: 1px solid transparent;
    border-radius: var(--radius);
    font-size: .9375rem;
    font-weight: 600;
    letter-spacing: .01em;
    line-height: 1.2;
    text-align: center;
    text-decoration: none;
    cursor: pointer;
    transition: background-color .18s var(--ease), color .18s var(--ease),
                border-color .18s var(--ease), transform .18s var(--ease);
}
.btn:hover { transform: translateY(-1px); }

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

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

.btn--ghost { background: transparent; border-color: var(--line-strong); color: var(--ink); }
.btn--ghost:hover { border-color: var(--ink); background: var(--ink); color: #fff; }

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

.btn--outline-light { background: transparent; border-color: rgba(255, 255, 255, .35); color: #fff; }
.btn--outline-light:hover { background: #fff; border-color: #fff; color: var(--ink); }

.btn-row { display: flex; flex-wrap: wrap; gap: .75rem; }

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

.site-header {
    position: sticky;
    top: 0;
    z-index: 100;
    background: rgba(255, 255, 255, .96);
    backdrop-filter: saturate(160%) blur(8px);
    border-bottom: 1px solid var(--line);
}

.header-bar {
    display: flex;
    align-items: center;
    gap: 1rem;
    padding-block: .9rem;
}
/* The Menu toggle is a sibling of .header-actions, not a child, so that the
   mobile grid below can put the two on separate rows. On wider screens the
   auto margin keeps the old look: brand left, everything else right. */
.header-bar > .header-actions { margin-left: auto; }

.brand {
    display: inline-flex;
    flex-direction: column;
    text-decoration: none;
    line-height: 1.05;
}
.brand__name {
    font-family: var(--font-display);
    /* Grows to 34px on a desktop header, which has the room, while holding the
       phone size where it was: a larger minimum wrapped "Gallery House Offices"
       onto three lines at 375px and made the whole bar taller. */
    font-size: clamp(1.25rem, .79rem + 2.11vw, 2.875rem);
    font-weight: 600;
    color: var(--ink);
    letter-spacing: -.015em;
}
.brand__address {
    margin-top: .3rem;
    font-size: clamp(.8125rem, .75rem + .25vw, .9375rem);
    color: var(--ink-muted);
    letter-spacing: .04em;
}

.header-actions { display: flex; align-items: center; gap: .75rem; }
.header-actions .btn { padding: .65rem 1.15rem; }

.btn--call { white-space: nowrap; }
.btn--call svg { flex: none; }

/* Email and Enquiry form are secondary to the Text CTA, so they give ground
   first: labels off below 1100px, and off the bar entirely on phones, where the
   same two links are one tap away in the menu and in the footer. Four labelled
   controls squeezed the brand name onto three lines at around 880px. */
@media (max-width: 1099px) {
    .header-actions .header-action--extra { padding: .7rem .85rem; }
    .header-action--extra .btn--call__text {
        position: absolute;
        width: 1px; height: 1px;
        margin: -1px; padding: 0;
        overflow: hidden;
        clip: rect(0 0 0 0);
        white-space: nowrap;
    }
}
@media (max-width: 699px) {
    /* Two rows: brand + Menu, then the three contact buttons full width. This
       frees the top row so "Gallery House Offices" and the address each sit on
       one line, and it is why the Text button no longer appears as a lone icon
       beside Menu. */
    .header-bar {
        display: grid;
        grid-template-columns: 1fr auto;
        grid-template-areas:
            "brand menu"
            "actions actions";
        row-gap: .8rem;
        column-gap: .75rem;
    }
    .header-bar > .brand { grid-area: brand; }
    .header-bar > .nav-toggle { grid-area: menu; }
    .header-bar > .header-actions { grid-area: actions; margin-left: 0; }

    /* Sized to content rather than equal thirds, so the Text button can carry
       the phone number. It takes any space left over; the row wraps rather than
       clipping on a very narrow phone. */
    .header-actions { gap: .4rem; flex-wrap: wrap; }
    .header-actions .btn,
    .header-actions .header-action--extra {
        flex: 0 1 auto;
        min-width: 0;
        padding: .65rem .6rem;
        gap: .35rem;
        font-size: .75rem;
    }
    .header-actions .btn--primary { flex: 1 1 auto; }
    .header-action--extra { display: inline-flex; }
    .btn--call__text--long { display: none; }

    /* Labels come back on this row: there is width for them now. Only "form" is
       trimmed off Enquiry, to leave room for the phone number on the Text
       button, which is the one label worth reading at a glance. */
    .header-actions .btn--call__text {
        position: static;
        width: auto; height: auto;
        margin: 0; padding: 0;
        overflow: visible;
        clip: auto;
    }
}

@media (max-width: 699px) {
    .btn--call { padding: .7rem .85rem; }
    .btn--call__text {
        position: absolute;
        width: 1px; height: 1px;
        margin: -1px; padding: 0;
        overflow: hidden;
        clip: rect(0 0 0 0);
        white-space: nowrap;
    }
}

.nav-toggle {
    display: inline-flex;
    align-items: center;
    gap: .5rem;
    padding: .6rem .85rem;
    background: transparent;
    border: 1px solid var(--line-strong);
    border-radius: var(--radius);
    color: var(--ink);
    font: inherit;
    font-size: .875rem;
    font-weight: 600;
    cursor: pointer;
}
.nav-toggle__bars { display: block; width: 18px; height: 2px; background: currentColor; position: relative; }
.nav-toggle__bars::before,
.nav-toggle__bars::after {
    content: '';
    position: absolute;
    left: 0;
    width: 18px;
    height: 2px;
    background: currentColor;
    transition: transform .2s var(--ease), opacity .2s var(--ease);
}
.nav-toggle__bars::before { top: -6px; }
.nav-toggle__bars::after { top: 6px; }
.nav-toggle[aria-expanded="true"] .nav-toggle__bars { background: transparent; }
.nav-toggle[aria-expanded="true"] .nav-toggle__bars::before { transform: translateY(6px) rotate(45deg); }
.nav-toggle[aria-expanded="true"] .nav-toggle__bars::after { transform: translateY(-6px) rotate(-45deg); }

.site-nav { border-top: 1px solid var(--line); }
.site-nav[hidden] { display: none; }

.site-nav ul {
    list-style: none;
    margin: 0;
    padding: 0;
    display: flex;
    flex-direction: column;
}
.site-nav li { margin: 0; }

.site-nav a {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: .75rem;
    padding: .9rem 0;
    border-bottom: 1px solid var(--line);
    color: var(--ink);
    font-size: .9375rem;
    font-weight: 500;
    letter-spacing: .02em;
    text-decoration: none;
}
.site-nav li:last-child a { border-bottom: 0; }
.site-nav a:hover { color: var(--accent-dark); }
.site-nav a[aria-current="page"] { color: var(--accent-dark); font-weight: 700; }

.nav-status {
    font-size: .6875rem;
    font-weight: 700;
    letter-spacing: .08em;
    text-transform: uppercase;
    padding: .15rem .5rem;
    border-radius: 999px;
}
.nav-status--available { background: var(--available-tint); color: var(--available); }

@media (min-width: 900px) {
    .nav-toggle { display: none; }
    .site-nav { border-top: 0; }
    .site-nav[hidden] { display: block; }
    .site-nav ul {
        flex-direction: row;
        justify-content: flex-end;
        gap: clamp(1rem, 2.2vw, 2.25rem);
        padding-bottom: .35rem;
    }
    .site-nav a {
        display: inline-flex;
        padding: .35rem 0 .6rem;
        border-bottom: 2px solid transparent;
        text-transform: uppercase;
        font-size: .8125rem;
        font-weight: 600;
        letter-spacing: .1em;
    }
    .site-nav li:last-child a { border-bottom: 2px solid transparent; }
    .site-nav a:hover { border-bottom-color: var(--line-strong); }
    .site-nav a[aria-current="page"] { border-bottom-color: var(--accent); }
    .nav-status {
        width: 7px;
        height: 7px;
        padding: 0;
        margin-left: .4rem;
        border-radius: 50%;
        background: var(--available);
        font-size: 0;
        line-height: 0;
        overflow: hidden;
        color: transparent;
    }
}

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

.hero {
    position: relative;
    display: grid;
    align-items: end;
    min-height: clamp(360px, 52vw, 580px);
    background: var(--ink) center 42% / cover no-repeat;
    color: #fff;
    isolation: isolate;
}
.hero::after {
    content: '';
    position: absolute;
    inset: 0;
    z-index: -1;
    background: linear-gradient(to top, rgba(10, 11, 13, .88) 0%, rgba(10, 11, 13, .55) 45%, rgba(10, 11, 13, .3) 100%);
}
.hero__inner { padding-block: clamp(2.5rem, 6vw, 4.5rem); }
.hero__inner > * { max-width: 46rem; }
.hero h1 { color: #fff; margin-bottom: .35em; }
.hero .kicker { color: #dcb886; }
.hero p { color: #dfe2e6; font-size: clamp(1rem, .95rem + .4vw, 1.1875rem); }
.hero .btn-row { margin-top: 1.75rem; }

.page-hero {
    background: var(--surface-dark);
    color: #cfd3d8;
    padding-block: clamp(2.25rem, 5vw, 3.75rem);
}
.page-hero h1 { color: #fff; margin-bottom: 0; }
.page-hero .kicker { color: #dcb886; }
.page-hero p { margin-top: .75rem; margin-bottom: 0; color: #b9c0c8; max-width: 44rem; }
.page-hero .badge { margin-top: 1.1rem; }

.breadcrumbs {
    margin-bottom: 1rem;
    font-size: .8125rem;
    color: #8f979f;
    letter-spacing: .03em;
}
/* Breadcrumb links sit inline with the plain-text current page at only
   1.96:1 against it, so colour alone cannot distinguish them. */
.breadcrumbs a {
    color: #cfd3d8;
    text-decoration: underline;
    text-decoration-color: rgba(207, 211, 216, .45);
    text-underline-offset: 3px;
}
.breadcrumbs a:hover { color: #fff; text-decoration-color: currentColor; }
.breadcrumbs span { margin-inline: .5rem; opacity: .5; }

/* --- badges --------------------------------------------------------------- */

.badge {
    display: inline-flex;
    align-items: center;
    gap: .5rem;
    white-space: nowrap;
    padding: .35rem .85rem;
    border-radius: 999px;
    font-size: .75rem;
    font-weight: 700;
    letter-spacing: .1em;
    text-transform: uppercase;
}
.badge::before {
    content: '';
    width: 7px; height: 7px;
    border-radius: 50%;
    background: currentColor;
}
.badge--available { background: var(--available-tint); color: var(--available); }
.badge--let { background: var(--let-tint); color: var(--let); }

/* --- key facts ------------------------------------------------------------ */

/* Four items, and the grid paints its own background to draw the 1px rules
   between cells — so any cell left empty on the last row shows through as a
   grey block. auto-fit produced exactly that between roughly 540px and 720px,
   where four items fall into three columns and leave two empty cells beside
   "Availability".

   Fixed column counts that divide four exactly (4 / 2 / 1) cannot strand a
   cell. If a fifth item is ever added here, revisit these breakpoints — the
   guarantee is arithmetic, not automatic. */
.facts {
    display: grid;
    grid-template-columns: repeat(4, minmax(0, 1fr));
    gap: 1px;
    background: var(--line);
    border: 1px solid var(--line);
    border-radius: var(--radius-lg);
    overflow: hidden;
}
.facts div { background: var(--surface); padding: 1.35rem 1.25rem; }
.section--alt .facts div { background: var(--surface); }
.facts dt {
    font-size: .6875rem;
    font-weight: 600;
    letter-spacing: .12em;
    text-transform: uppercase;
    color: var(--ink-muted);
    margin-bottom: .4rem;
}
.facts dd {
    margin: 0;
    font-family: var(--font-display);
    font-size: clamp(1.0625rem, 1rem + .35vw, 1.25rem);
    font-weight: 600;
    color: var(--ink);
    line-height: 1.25;
    text-wrap: balance;
}

/* Published rent. Spans every column so it sits as a band beneath the four
   fact cells at all three breakpoints — the 4 / 2 / 1 arithmetic above is
   untouched, and nothing can strand. Carries the .notice tint and accent rule
   deliberately: the price and the "available now, call us" box are the same
   act-on-this message, so they read as the same colour. */
.facts div.facts__rent,
.section--alt .facts div.facts__rent {
    grid-column: 1 / -1;
    background: var(--accent-tint);
    border-top: 2px solid var(--accent);
    text-align: center;
}
.facts__rent dd {
    font-weight: 700;
    font-size: clamp(1.125rem, 1rem + .5vw, 1.375rem);
}

@media (max-width: 46rem) {
    .facts { grid-template-columns: repeat(2, minmax(0, 1fr)); }
}
@media (max-width: 24rem) {
    .facts { grid-template-columns: 1fr; }
}

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

.card-grid {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(min(100%, 234px), 1fr));
    gap: clamp(1rem, 2.5vw, 1.75rem);
    align-items: stretch;
}

.office-card {
    display: flex;
    flex-direction: column;
    background: var(--surface);
    border: 1px solid var(--line);
    border-radius: var(--radius-lg);
    padding: clamp(1.35rem, 2.5vw, 1.75rem);
    text-decoration: none;
    color: inherit;
    transition: transform .2s var(--ease), box-shadow .2s var(--ease), border-color .2s var(--ease);
}
.office-card:hover {
    transform: translateY(-3px);
    box-shadow: var(--shadow-lift);
    border-color: var(--line-strong);
    color: inherit;
}
/* The one office a visitor can actually rent. A single green border was too
   quiet next to the amber "currently let" badges, so the live card also gets a
   heavy top edge, a permanent lift and a green call to action — three signals
   rather than one, none of which rely on colour alone. Sizing is unaffected:
   everything is border-box, so the thicker border eats padding, not layout. */
.office-card--available {
    border-color: var(--available);
    border-width: 2px;
    border-top-width: 5px;
    box-shadow: var(--shadow-lift);
    /* Sits proud of the let cards even before anyone points at it. A transform
       does not move the grid, so the row's own alignment is untouched. */
    transform: translateY(-6px);
}
.office-card--available:hover {
    border-color: var(--available);
    transform: translateY(-9px);
}
.office-card--available .office-card__cta { color: var(--available); }
.office-card--available:hover .office-card__cta { color: var(--ink); }
.office-card__head {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    justify-content: space-between;
    gap: .5rem .75rem;
    margin-bottom: .85rem;
}
.office-card h3 { margin: 0; white-space: nowrap; }
.office-card__meta {
    list-style: none;
    margin: 0 0 1.25rem;
    padding: 0;
    font-size: .9375rem;
    color: var(--ink-soft);
}
.office-card__meta li {
    display: flex;
    justify-content: space-between;
    gap: 1rem;
    padding: .45rem 0;
    border-bottom: 1px dashed var(--line);
    margin: 0;
}
.office-card__meta li:last-child { border-bottom: 0; }
.office-card__meta strong { color: var(--ink); font-weight: 600; text-align: right; }
/* Rent is the row a reader is hunting for, so it gets the accent. Placed after
   the rule above on purpose: identical specificity, so order is the tie-break. */
.office-card__rent strong { color: var(--accent-dark); font-weight: 700; }
.office-card__cta {
    margin-top: auto;
    font-size: .875rem;
    font-weight: 600;
    letter-spacing: .04em;
    color: var(--accent-dark);
}
.office-card:hover .office-card__cta { color: var(--ink); }

.feature-grid {
    display: grid;
    grid-template-columns: 1fr;
    gap: clamp(1.25rem, 3vw, 2.25rem);
}
@media (min-width: 560px) { .feature-grid { grid-template-columns: repeat(2, 1fr); } }
@media (min-width: 900px) { .feature-grid { grid-template-columns: repeat(3, 1fr); } }
.feature h3 { margin-bottom: .35rem; }
.feature p { color: var(--ink-muted); font-size: .9375rem; margin-bottom: 0; }
.feature__icon {
    display: grid;
    place-items: center;
    width: 44px; height: 44px;
    margin-bottom: 1rem;
    border-radius: 50%;
    background: var(--accent-tint);
    color: var(--accent-dark);
}

/* --- split media ---------------------------------------------------------- */

.split {
    display: grid;
    gap: clamp(1.75rem, 4vw, 3.5rem);
    align-items: center;
}
@media (min-width: 860px) {
    .split { grid-template-columns: 1fr 1fr; }
    .split--wide-text { grid-template-columns: 1.15fr 1fr; }
}
.split__media img {
    width: 100%;
    border-radius: var(--radius-lg);
    box-shadow: var(--shadow);
}

/* --- spec list (office detail) -------------------------------------------- */

.spec-list {
    margin: 0;
    border-top: 1px solid var(--line);
}
.spec-list > div {
    display: grid;
    gap: .25rem 2rem;
    padding: 1.1rem 0;
    border-bottom: 1px solid var(--line);
}
@media (min-width: 640px) {
    .spec-list > div { grid-template-columns: minmax(140px, 200px) 1fr; }
}
.spec-list dt {
    font-size: .75rem;
    font-weight: 700;
    letter-spacing: .12em;
    text-transform: uppercase;
    color: var(--ink-muted);
    padding-top: .15rem;
}
.spec-list dd { margin: 0; color: var(--ink); }

.tick-list { list-style: none; margin: 0; padding: 0; columns: 2; column-gap: 2rem; }
@media (max-width: 560px) { .tick-list { columns: 1; } }
.tick-list li {
    position: relative;
    padding-left: 1.6rem;
    margin-bottom: .6rem;
    break-inside: avoid;
}
.tick-list li::before {
    content: '';
    position: absolute;
    left: 0; top: .5em;
    width: 8px; height: 8px;
    border-radius: 50%;
    background: var(--accent);
}

/* --- gallery -------------------------------------------------------------- */

.gallery {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(min(100%, 240px), 1fr));
    gap: clamp(.75rem, 2vw, 1.25rem);
    list-style: none;
    margin: 0;
    padding: 0;
}
.gallery li { margin: 0; }
.gallery a {
    display: block;
    overflow: hidden;
    border-radius: var(--radius-lg);
    background: var(--surface-alt);
}
.gallery img {
    width: 100%;
    aspect-ratio: 4 / 3;
    object-fit: cover;
    transition: transform .4s var(--ease);
}
.gallery--portrait img { aspect-ratio: 3 / 4; }
/* One photograph should not be stretched the full width of the container and
   upscaled past its own resolution. */
.gallery--single { max-width: 760px; }
.gallery a:hover img { transform: scale(1.04); }

.figure-wide img { width: 100%; border-radius: var(--radius-lg); box-shadow: var(--shadow); }
.figure-wide figcaption {
    margin-top: .75rem;
    font-size: .875rem;
    color: var(--ink-muted);
}

/* --- lightbox ------------------------------------------------------------- */

.lightbox {
    position: fixed;
    inset: 0;
    z-index: 300;
    display: grid;
    place-items: center;
    padding: clamp(1rem, 4vw, 3rem);
    background: rgba(10, 11, 13, .92);
    opacity: 0;
    visibility: hidden;
    transition: opacity .2s var(--ease), visibility .2s var(--ease);
}
.lightbox.is-open { opacity: 1; visibility: visible; }
.lightbox img {
    max-width: 100%;
    max-height: 88vh;
    width: auto;
    border-radius: var(--radius);
    box-shadow: 0 24px 60px rgba(0, 0, 0, .5);
}
.lightbox__close {
    position: absolute;
    top: clamp(.75rem, 2vw, 1.5rem);
    right: clamp(.75rem, 2vw, 1.5rem);
    width: 44px; height: 44px;
    display: grid;
    place-items: center;
    background: rgba(255, 255, 255, .12);
    border: 0;
    border-radius: 50%;
    color: #fff;
    font-size: 1.5rem;
    line-height: 1;
    cursor: pointer;
}
.lightbox__close:hover { background: rgba(255, 255, 255, .25); }

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

.map-embed {
    position: relative;
    /* width must be explicit: with only aspect-ratio and min-height set, the
       browser resolves the box from those two and computes the WIDTH as
       320 x 16/9 = 569px, overflowing the content column and forcing a 589px
       layout viewport on a 390px phone. */
    width: 100%;
    aspect-ratio: 16 / 9;
    min-height: 320px;
    border-radius: var(--radius-lg);
    overflow: hidden;
    box-shadow: var(--shadow);
}
.map-embed iframe {
    position: absolute;
    inset: 0;
    width: 100%;
    height: 100%;
    border: 0;
}

/* Click-to-load map facade.
   The live Google Maps embed pulls 300KB+ of JavaScript across four chunks and
   was the single biggest reason /contact-us/ weighed 815KB — nearly three times
   the home page. Most visitors never touch the map: they want the address and
   the phone number. So the default state is the same static map the home page
   already uses (57KB WebP, usually already cached), and Google Maps only loads
   if someone asks for it.

   Progressive enhancement: with no JavaScript this is an ordinary link that
   opens Google Maps in a new tab, which is a perfectly good outcome. The script
   on the contact page upgrades it to load the embed in place. */
.map-embed__facade {
    position: absolute;
    inset: 0;
    display: block;
    overflow: hidden;
    text-decoration: none;
    background: var(--surface-alt);
}

.map-embed__facade img {
    width: 100%;
    height: 100%;
    /* contain, not cover: the static map is 900x641 (1.40:1) and the box is
       taller than that on a phone, so cover crops the sides — and the right-hand
       side is where the "M60 Junction 24" callout sits, which is the single
       thing this map exists to show. Letterboxing against the panel background
       is the better trade. */
    object-fit: contain;
    display: block;
}

.map-embed__cta {
    position: absolute;
    left: 50%;
    bottom: 1rem;
    transform: translateX(-50%);
    display: inline-flex;
    align-items: center;
    gap: .5rem;
    padding: .7rem 1.4rem;
    border-radius: var(--radius);
    background: #fff;
    border: 1px solid var(--line-strong);
    color: var(--ink);
    font-size: .9375rem;
    font-weight: 600;
    box-shadow: var(--shadow);
    white-space: nowrap;
}

.map-embed__facade:hover .map-embed__cta,
.map-embed__facade:focus-visible .map-embed__cta {
    background: var(--ink);
    border-color: var(--ink);
    color: #fff;
}

.map-embed__note {
    margin: .75rem 0 0;
    font-size: .875rem;
    color: var(--ink-muted);
}

/* --- contact -------------------------------------------------------------- */

.contact-grid {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(min(100%, 240px), 1fr));
    gap: clamp(1rem, 2.5vw, 1.75rem);
}
.contact-card {
    background: var(--surface);
    border: 1px solid var(--line);
    border-radius: var(--radius-lg);
    padding: clamp(1.5rem, 3vw, 2rem);
    text-align: center;
}
.contact-card__icon {
    display: grid;
    place-items: center;
    width: 48px; height: 48px;
    margin: 0 auto 1.1rem;
    border-radius: 50%;
    background: var(--accent-tint);
    color: var(--accent-dark);
}
.contact-card h2 { margin-bottom: .5rem; font-size: 1.15rem; }
.contact-card p { margin-bottom: 0; color: var(--ink-soft); font-size: .9375rem; }
.contact-card a { font-weight: 600; word-break: break-word; }
.contact-card__note { margin-top: .75rem; font-size: .8125rem; color: var(--ink-muted); }

/* min-height reserves the space the Formsite iframe will occupy. The embed is
   deferred until the panel nears the viewport (see contact-us/index.php), and
   without a reservation that late insertion would shift everything below it.
   Measured CLS on this page is 0 and must stay there. */
.form-panel {
    /* 580px covers the tallest measured case: the Formsite iframe renders 509px
       on a 390px phone and 499px on desktop, and the panel's own padding is
       wider on desktop (clamp), so desktop needs the most total height. Mobile
       carries ~30px of slack, which reads as extra padding under the form. */
    min-height: 580px;
    background: var(--surface);
    border: 1px solid var(--line);
    border-radius: var(--radius-lg);
    padding: clamp(1.25rem, 3vw, 2.25rem);
    box-shadow: var(--shadow);
}

/* --- cta band ------------------------------------------------------------- */

.cta-band {
    background: var(--surface-dark);
    color: #cfd3d8;
    padding-block: clamp(2.75rem, 5vw, 4rem);
}
.cta-band__inner {
    display: grid;
    gap: 1.5rem;
    align-items: center;
}
@media (min-width: 820px) {
    .cta-band__inner { grid-template-columns: 1.4fr auto; }
}
.cta-band h2 { color: #fff; margin-bottom: .35em; }
.cta-band p { margin-bottom: 0; color: #b9c0c8; }

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

.site-footer {
    background: #101215;
    color: #98a0a9;
    font-size: .9375rem;
    padding-block: clamp(2.5rem, 5vw, 3.5rem) 0;
}
.footer-grid {
    display: grid;
    gap: clamp(1.75rem, 4vw, 3rem);
    grid-template-columns: repeat(auto-fit, minmax(min(100%, 220px), 1fr));
    padding-bottom: clamp(2rem, 4vw, 2.75rem);
}
.site-footer h3 {
    margin-bottom: .9rem;
    color: #fff;
    font-family: var(--font-body);
    font-size: .75rem;
    font-weight: 700;
    letter-spacing: .14em;
    text-transform: uppercase;
}
/* Underlined at rest: footer links sit inline with plain text at only
   1.76:1 against it, so colour alone cannot distinguish them. */
.site-footer a {
    color: #cfd3d8;
    text-decoration: underline;
    text-decoration-color: rgba(207, 211, 216, .45);
    text-underline-offset: 3px;
}
.site-footer a:hover { color: #fff; text-decoration-color: currentColor; }
.site-footer ul { list-style: none; margin: 0; padding: 0; }
.site-footer li { margin-bottom: .55rem; }
.footer-brand__name {
    display: block;
    margin-bottom: .6rem;
    color: #fff;
    font-family: var(--font-display);
    font-size: 1.375rem;
    font-weight: 600;
}
.footer-brand p { color: #98a0a9; margin-bottom: 0; }

.footer-bottom {
    border-top: 1px solid rgba(255, 255, 255, .1);
    padding-block: 1.35rem;
    display: flex;
    flex-wrap: wrap;
    gap: .5rem 1.5rem;
    align-items: center;
    justify-content: space-between;
    font-size: .8125rem;
    color: #7d858e;
}
.footer-bottom nav { display: flex; flex-wrap: wrap; gap: .5rem 1.25rem; }

/* --- misc ----------------------------------------------------------------- */

.notice {
    display: flex;
    gap: 1rem;
    padding: 1.25rem 1.5rem;
    border-left: 3px solid var(--accent);
    background: var(--accent-tint);
    border-radius: 0 var(--radius) var(--radius) 0;
    color: var(--ink);
}
.notice p { margin-bottom: 0; }

.prose h2 { margin-top: 2.25rem; }
.prose h2:first-child { margin-top: 0; }
.prose h3 { margin-top: 1.75rem; }

/* --- faq ------------------------------------------------------------------ */

/* Questions as real headings, answers as running text: the structure an
   assistant reads is the structure a visitor sees. The rule between items does
   the separating, so nothing needs to be clicked open. */
.faq-item + .faq-item {
    margin-top: 2rem;
    padding-top: 2rem;
    border-top: 1px solid var(--line);
}
.faq-item h2 {
    font-size: clamp(1.125rem, 1rem + .45vw, 1.3125rem);
    margin-bottom: .6rem;
    text-wrap: balance;
}
.faq-item p {
    margin-bottom: 0;
    color: var(--ink-soft);
    max-width: 68ch;
}
.faq-item p + p { margin-top: .9rem; }
.faq-item__list { margin: .9rem 0 0; max-width: 68ch; }
.faq-item__list + p { margin-top: .9rem; }

.error-page { text-align: center; }
.error-page img { margin-inline: auto; }

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

@media print {
    .site-header, .cta-band, .site-footer, .btn-row, .lightbox { display: none !important; }
    body { color: #000; font-size: 11pt; }
    a { color: #000; text-decoration: none; }
}