/* ============================================================
   HOULT HOMES
   ============================================================ */

/* Google's floating reCAPTCHA v3 badge - hidden per Google's own allowance,
   since the required "protected by reCAPTCHA" disclosure is shown instead in
   the fineprint under the Contact and Valuation forms. */
.grecaptcha-badge {
    visibility: hidden;
}

@font-face {
    font-family: 'Marilyn Wilde';
    src: url('/fonts/marilynwilde-webfont.woff2') format('woff2'),
         url('/fonts/marilynwilde-webfont.woff') format('woff');
    font-weight: normal;
    font-style: normal;
    font-display: swap;
}

:root {
    --black: #1a2535;
    --charcoal: #2d3f52;
    --mid: #5a6a7a;
    --muted: #6b7886;
    --border: #d4d0ca;
    --bg-warm: #f8f6f2;
    --bg-white: #ffffff;
    --cream: #fbf7ee;
    --gold: #b49d73;
    --font-serif: 'Instrument Serif', Georgia, serif;
    --font-body: 'Instrument Serif', Georgia, serif;
    --font-eyebrow: 'Marilyn Wilde', var(--font-serif);
    --text: 18px;
    --text-sm: 16px;
    --sage: #8A998D;
    --sage-dark: #75897D;
    --sage-pale: #E3EAE5;
    --radius: 2px;
    --shadow: 0 2px 20px rgba(0,0,0,0.08);
    --transition: 0.3s ease;
    --max-width: 1320px;
}

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

html {
    scroll-behavior: smooth;
    font-size: 16px;
}

body {
    font-family: var(--font-body);
    font-weight: 400;
    font-size: var(--text);
    color: var(--charcoal);
    background: var(--bg-white);
    line-height: 1.7;
    -webkit-font-smoothing: antialiased;
    display: flex;
    flex-direction: column;
    min-height: 100vh;
}

/* Form controls don't inherit the page font by default in any browser -
   without this every <button>/<select>/<input> silently falls back to the
   OS UI font unless it's given an explicit font-family of its own. */
button, select, input, textarea {
    font-family: inherit;
    font-size: inherit;
}

.site-main {
    flex: 1;
    display: flex;
    flex-direction: column;
}

/* ============================================================
   STATIC PAGES
   ============================================================ */

.static-page__eyebrow {
    font-family: var(--font-eyebrow);
    font-size: 2rem;
    letter-spacing: normal;
    text-transform: none;
    color: var(--gold);
    margin-bottom: 0.75rem;
}

.static-page__title {
    font-family: var(--font-serif);
    font-size: clamp(2rem, 4vw, 3rem);
    font-weight: 400;
    color: var(--black);
    line-height: 1.15;
    margin-bottom: 0.5rem;
}

.static-page__body {
    max-width: 720px;
    line-height: 1.8;
    color: var(--charcoal);
}

.static-page__body p + p {
    margin-top: 1rem;
}

.static-page__body h2 {
    font-family: var(--font-serif);
    font-size: 1.75rem;
    font-weight: 400;
    color: var(--black);
    margin-top: 3rem;
    margin-bottom: 1rem;
}

.static-page__body h2:first-of-type {
    margin-top: 0;
}

.static-page__body h3 {
    font-family: var(--font-serif);
    font-size: 1.35rem;
    font-weight: 400;
    color: var(--charcoal);
    margin-top: 2rem;
    margin-bottom: 0.75rem;
}

.static-page__body ul {
    list-style: none;
    margin: 1rem 0;
    padding-left: 0.25rem;
}

.static-page__body ul li {
    margin-bottom: 0.5rem;
}

.static-page__body address {
    font-style: normal;
    line-height: 1.5;
    margin: 1rem 0;
}

.static-page__body a {
    color: var(--charcoal);
    text-decoration: underline;
    text-decoration-color: var(--border);
    text-underline-offset: 2px;
}

.static-page__body table {
    width: 100%;
    border-collapse: collapse;
    margin: 1rem 0 1.5rem;
    font-size: 0.95rem;
}

.static-page__body th,
.static-page__body td {
    text-align: left;
    padding: 0.6rem 1rem 0.6rem 0;
    border-bottom: 1px solid var(--border);
}

.static-page__body th {
    font-family: var(--font-body);
    font-weight: 600;
    color: var(--black);
}

.static-page__body a:hover {
    color: var(--gold);
}

.static-page__meta,
.static-page__footer {
    display: flex;
    flex-direction: column;
    gap: 0.35rem;
    font-size: var(--text-sm);
    color: var(--mid);
}

.static-page__meta {
    padding: 1.25rem 1.5rem;
    margin-bottom: 2.5rem;
    background: var(--bg-warm);
    border-left: 3px solid var(--gold);
}

.static-page__footer {
    margin-top: 3rem;
    padding-top: 1.5rem;
    border-top: 1px solid var(--border);
}

/* Default centred container for simple pages.
   Views that manage their own full-width layout set ViewData["FullPage"] = true
   and this wrapper is skipped. */
.page-body {
    flex: 1;
    width: 100%;
    max-width: var(--max-width);
    margin: 0 auto;
    padding: 3rem 2rem;
}

img {
    max-width: 100%;
    display: block;
}

a {
    color: inherit;
    text-decoration: none;
}

/* ============================================================
   HEADER
   ============================================================ */

.site-header {
    position: sticky;
    top: 0;
    z-index: 100;
    background: var(--bg-white);
    border-bottom: 1px solid var(--border);
}

.header-inner {
    max-width: var(--max-width);
    margin: 0 auto;
    padding: 0 2rem;
    min-height: 120px;
    display: grid;
    grid-template-columns: auto 1fr auto;
    align-items: center;
    gap: 2rem;
}

.site-logo {
    display: flex;
    align-items: center;
    text-decoration: none;
    flex-shrink: 0;
}

.logo-full {
    height: 90px;
    width: auto;
    display: block;
    transition: filter 0.7s ease;
}

.logo-initials {
    display: none;
    height: 80px;
    width: auto;
    /*    font-family: var(--font-serif);
    font-size: 2.1rem;
    font-weight: 400;
    color: var(--black);
    line-height: 1;
    letter-spacing: -0.02em;*/
}

.site-nav {
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 1.5rem;
    flex-wrap: nowrap;
    padding: 0.75rem 0;
}

.site-nav a {
    font-family: var(--font-serif);
    font-size: 1rem;
    letter-spacing: 0.02em;
    color: var(--charcoal);
    transition: color var(--transition);
    white-space: nowrap;
}

.site-nav a:hover {
    color: var(--sage-dark);
}

.header-actions {
    display: flex;
    align-items: center;
    gap: 1rem;
    flex-shrink: 0;
}

.social-icons {
    display: flex;
    align-items: center;
    gap: 1rem;
}

.social-icons a {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    color: var(--sage);
    font-size: 1.1rem;
    transition: color var(--transition), transform var(--transition);
}

.social-icons a:hover {
    color: var(--sage-dark);
    transform: translateY(-2px);
}

.nav-cta {
    display: inline-block;
    padding: 0.6rem 1.4rem;
    background: var(--sage);
    color: #fff !important;
    font-size: 0.85rem;
    letter-spacing: 0.03em;
    border-radius: var(--radius);
    white-space: nowrap;
    border: 1px solid transparent;
    transition: background-color 0.7s ease, border-color 0.7s ease;
}

.nav-cta:hover {
    background: var(--sage-dark);
    color: #fff !important;
}

/* Compact CTA + account icon shown in the collapsed mobile header (next to the
   hamburger). Hidden on desktop, where the full .header-actions bar is used. */
.header-mobile-actions {
    display: none;
    align-items: center;
    gap: 0.75rem;
    grid-column: 2;
    justify-self: end;
}

.mobile-account {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    color: var(--sage);
    font-size: 1.15rem;
    transition: color var(--transition);
}

.mobile-account:hover {
    color: var(--sage-dark);
}

.nav-cta--compact {
    padding: 0.5rem 1rem;
    font-size: 0.78rem;
}

.nav-toggle {
    display: none;
    flex-direction: column;
    gap: 5px;
    background: none;
    border: none;
    cursor: pointer;
    padding: 4px;
    grid-column: 3;
}

.nav-toggle span {
    display: block;
    width: 22px;
    height: 1px;
    background: var(--sage);
    transition: var(--transition);
}

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

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

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

/* Mobile nav - overlays the page content rather than pushing it down. Anchored
   to the bottom of the sticky header (which is its containing block). */
.mobile-nav {
    display: flex;
    position: absolute;
    top: 100%;
    left: 0;
    right: 0;
    flex-direction: column;
    background: var(--bg-white);
    border-top: 1px solid var(--border);
    box-shadow: var(--shadow);
    padding: 0 2rem 1.75rem;
    max-height: calc(100vh - 100%);
    overflow-y: auto;
    opacity: 0;
    visibility: hidden;
    transform: translateY(-10px);
    pointer-events: none;
    transition: opacity 0.28s ease, transform 0.28s ease, visibility 0s linear 0.28s;
}

.mobile-nav.open {
    opacity: 1;
    visibility: visible;
    transform: translateY(0);
    pointer-events: auto;
    transition: opacity 0.28s ease, transform 0.28s ease, visibility 0s;
}

.mobile-nav__links {
    display: flex;
    flex-direction: column;
    margin-bottom: 1.25rem;
}

.mobile-nav__links a {
    padding: 0.9rem 0;
    border-bottom: 1px solid var(--border);
    font-family: var(--font-serif);
    font-size: 1.05rem;
    color: var(--charcoal);
    transition: color var(--transition);
}

.mobile-nav__links a:hover {
    color: var(--sage-dark);
}

.mobile-nav__footer {
    display: flex;
    align-items: center;
    justify-content: space-between;
    padding-top: 0.25rem;
}

/* Dropdown nav - desktop: floating panel on hover/click */
.nav-dropdown {
    position: relative;
}

.nav-dropdown__trigger {
    background: none;
    border: none;
    font-family: var(--font-serif);
    font-size: 1rem;
    letter-spacing: 0.02em;
    color: var(--charcoal);
    cursor: pointer;
    display: inline-flex;
    align-items: center;
    gap: 0.35rem;
    padding: 0;
    white-space: nowrap;
    transition: color var(--transition);
}

.nav-dropdown__trigger::after {
    content: '';
    width: 6px;
    height: 6px;
    border-right: 1px solid currentColor;
    border-bottom: 1px solid currentColor;
    transform: rotate(45deg) translateY(-2px);
    transition: transform var(--transition);
}

.nav-dropdown:hover .nav-dropdown__trigger,
.nav-dropdown.open .nav-dropdown__trigger {
    color: var(--sage-dark);
}

.nav-dropdown.open .nav-dropdown__trigger::after {
    transform: rotate(225deg) translateY(2px);
}

.nav-dropdown__menu {
    position: absolute;
    top: calc(100% + 0.9rem);
    left: 50%;
    transform: translateX(-50%) translateY(-6px);
    background: var(--bg-white);
    border: 1px solid var(--border);
    border-radius: var(--radius);
    box-shadow: var(--shadow);
/*    padding: 0.4rem 0;*/
    min-width: 220px;
    display: flex;
    flex-direction: column;
    opacity: 0;
    visibility: hidden;
    transition: opacity var(--transition), transform var(--transition), visibility var(--transition);
    z-index: 50;
}

.nav-dropdown:hover .nav-dropdown__menu,
.nav-dropdown.open .nav-dropdown__menu {
    opacity: 1;
    visibility: visible;
    transform: translateX(-50%) translateY(0);
}

.nav-dropdown__menu a {
    padding: 0.65rem 1.4rem;
    font-size: 0.9rem;
    color: var(--charcoal);
    white-space: nowrap;
    transition: background var(--transition), color var(--transition);
}

.nav-dropdown__menu a:hover {
    background: var(--sage-pale);
    color: var(--sage-dark);
}

/* Dropdown nav - mobile: inline accordion inside the mobile menu */
.mobile-nav .nav-dropdown {
    display: flex;
    flex-direction: column;
}

.mobile-nav .nav-dropdown__trigger {
    width: 100%;
    justify-content: space-between;
    padding: 0.9rem 0;
    border-bottom: 1px solid var(--border);
    font-size: 1.05rem;
    color: var(--charcoal);
}

.mobile-nav .nav-dropdown__menu {
    position: static;
    transform: none;
    opacity: 1;
    visibility: visible;
    border: none;
    box-shadow: none;
    padding: 0;
    background: var(--sage-pale);
    max-height: 0;
    overflow: hidden;
    transition: max-height var(--transition);
}

.mobile-nav .nav-dropdown.open .nav-dropdown__menu {
    max-height: 320px;
    /* Beat the desktop open rule's translateX(-50%), which would otherwise
       shove this static accordion panel off the left edge on mobile. */
    transform: none;
}

.mobile-nav .nav-dropdown__menu a {
    display: block;
    width: 100%;
    box-sizing: border-box;
    padding: 0.85rem 1.5rem;
    border-bottom: 1px solid rgba(255,255,255,0.6);
    font-size: 1rem;
    /* Long labels (e.g. "Finding Your Country Home") must wrap, not clip */
    white-space: normal;
    color: var(--charcoal);
    background: transparent;
}

.mobile-nav .nav-dropdown__menu a:last-child {
    border-bottom: none;
}

/* Explicit tap/hover state so it stays legible on the sage background and
   doesn't inherit the desktop hover (which would blend into the menu). */
.mobile-nav .nav-dropdown__menu a:hover,
.mobile-nav .nav-dropdown__menu a:active {
    background: var(--sage);
    color: #fff;
}

/* ============================================================
   LISTING PAGE
   ============================================================ */

.listing-hero {
    background: var(--bg-warm);
    border-bottom: 1px solid var(--border);
    padding: 4rem 2rem 3rem;
    text-align: center;
}

.listing-hero__eyebrow {
    font-family: var(--font-eyebrow);
    font-size: 0.75rem;
    letter-spacing: normal;
    text-transform: none;
    color: var(--gold);
    margin-bottom: 0.75rem;
}

.listing-hero__title {
    font-family: var(--font-serif);
    font-size: clamp(2.5rem, 5vw, 4rem);
    font-weight: 300;
    color: var(--black);
    letter-spacing: 0.02em;
    line-height: 1.1;
}

/* ============================================================
   PROPERTY GRID
   ============================================================ */

.property-grid {
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    gap: 2rem;
}

/* ============================================================
   PROPERTY CARD
   ============================================================ */

.property-card {
    background: var(--bg-white);
    border: 1px solid var(--border);
    border-radius: var(--radius);
    overflow: hidden;
    transition: box-shadow var(--transition), transform var(--transition);
}

    .property-card:hover {
        box-shadow: var(--shadow);
        transform: translateY(-2px);
    }

.card-link {
    display: block;
}

.card-image {
    position: relative;
    aspect-ratio: 4/3;
    overflow: hidden;
    background: var(--bg-warm);
}

    .card-image img {
        width: 100%;
        height: 100%;
        object-fit: cover;
        transition: transform 0.5s ease;
    }

.property-card:hover .card-image img {
    transform: scale(1.03);
}

.card-image--placeholder {
    width: 100%;
    height: 100%;
    display: flex;
    align-items: center;
    justify-content: center;
    color: var(--border);
}

    .card-image--placeholder svg {
        width: 48px;
    }

.card-badges {
    position: absolute;
    top: 0.75rem;
    left: 0.75rem;
    display: flex;
    gap: 0.4rem;
    flex-wrap: wrap;
}

.badge {
    padding: 0.25rem 0.7rem;
    font-size: 0.7rem;
    font-weight: 500;
    letter-spacing: 0.12em;
    text-transform: uppercase;
    border-radius: 5px;
}

.badge--featured {
    background: var(--gold);
    color: #fff;
}

/* Featured keeps its gold; every other badge/status indicator is sage. */
.badge--new,
.status--sstc,
.status--sold,
.status--let,
.status--offer {
    background: var(--sage-dark);
    color: #fff;
}

.card-channel {
    position: absolute;
    bottom: 0.75rem;
    right: 0.75rem;
    background: rgba(13,13,13,0.75);
    color: #fff;
    padding: 0.2rem 0.6rem;
    font-size: 0.7rem;
    letter-spacing: 0.15em;
    text-transform: uppercase;
    border-radius: var(--radius);
    backdrop-filter: blur(4px);
}

.card-body {
    padding: 1.25rem 1.25rem 1.5rem;
}

.card-price {
    display: flex;
    align-items: baseline;
    gap: 0.4rem;
    margin-bottom: 0.5rem;
}

.price-qualifier {
    font-size: 0.75rem;
    color: var(--muted);
    letter-spacing: 0.05em;
}

.price-value {
    font-family: var(--font-serif);
    font-size: 1.5rem;
    font-weight: 400;
    color: var(--black);
    letter-spacing: 0.01em;
}

.card-address {
    font-family: var(--font-serif);
    font-size: 1.05rem;
    font-weight: 400;
    color: var(--charcoal);
    line-height: 1.35;
    margin-bottom: 0.3rem;
}

.card-type {
    font-size: 0.85rem;
    color: var(--muted);
    letter-spacing: 0.05em;
    margin-bottom: 0.85rem;
}

.card-specs {
    list-style: none;
    display: flex;
    gap: 1rem;
}

    .card-specs li {
        display: flex;
        align-items: center;
        gap: 0.35rem;
        font-size: 0.875rem;
        color: var(--mid);
    }

    .card-specs svg {
        width: 16px;
        height: 16px;
        flex-shrink: 0;
    }

/* ============================================================
   PAGINATION
   ============================================================ */

.pagination {
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 2rem;
    padding-top: 3rem;
}

.pagination__arrow {
    font-size: 0.875rem;
    letter-spacing: 0.1em;
    color: var(--charcoal);
    border-bottom: 1px solid var(--border);
    padding-bottom: 2px;
    transition: border-color var(--transition);
}

    .pagination__arrow:hover {
        border-color: var(--charcoal);
    }

.pagination__info {
    font-size: 0.875rem;
    color: var(--muted);
}

/* ============================================================
   EMPTY STATE
   ============================================================ */

.listing-empty {
    grid-column: 1 / -1;
    text-align: center;
    padding: 5rem 2rem;
    color: var(--muted);
}

    .listing-empty p {
        font-family: var(--font-serif);
        font-size: 1.3rem;
        margin-bottom: 1.5rem;
    }

.btn-outline {
    display: inline-block;
    padding: 0.65rem 1.75rem;
    border: 1px solid var(--charcoal);
    font-size: 0.75rem;
    letter-spacing: 0.15em;
    text-transform: uppercase;
    color: var(--charcoal);
    transition: all var(--transition);
    border-radius: var(--radius);
}

    .btn-outline:hover {
        background: var(--charcoal);
        color: var(--bg-white);
    }

/* ============================================================
   DETAIL PAGE
   ============================================================ */

.pdp-gallery {
    background: var(--bg-warm);
    border-bottom: 1px solid rgba(0, 0, 0, 0.06);
    padding-bottom: 1rem;
}

.pdp-gallery__viewport {
    position: relative;
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 4px;
    height: 52vh;
    max-height: 560px;
    background: var(--sage-dark);
}

.pdp-gallery__viewport--single {
    grid-template-columns: 1fr;
}

.pdp-gallery__frame {
    overflow: hidden;
    cursor: zoom-in;
}

    .pdp-gallery__frame img {
        width: 100%;
        height: 100%;
        object-fit: cover;
        display: block;
        transition: opacity 0.25s ease;
    }

.pdp-gallery__placeholder {
    height: 40vh;
    display: flex;
    align-items: center;
    justify-content: center;
    color: var(--border);
}

    .pdp-gallery__placeholder svg {
        width: 80px;
    }

.pdp-gallery__arrow {
    position: absolute;
    top: 50%;
    transform: translateY(-50%);
    background: rgba(255,255,255,0.92);
    border: none;
    width: 44px;
    height: 44px;
    font-size: 1rem;
    color: var(--charcoal);
    cursor: pointer;
    border-radius: 50%;
    display: flex;
    align-items: center;
    justify-content: center;
    transition: background var(--transition), color var(--transition);
    box-shadow: var(--shadow);
    z-index: 2;
}

    .pdp-gallery__arrow:hover {
        background: var(--sage-dark);
        color: #fff;
    }

.pdp-gallery__arrow--prev {
    left: 1rem;
}

.pdp-gallery__arrow--next {
    right: 1rem;
}

.pdp-gallery__badges {
    position: absolute;
    top: 1rem;
    left: 1rem;
    display: flex;
    gap: 0.4rem;
    flex-wrap: wrap;
    z-index: 2;
}

.pdp-gallery__expand {
    position: absolute;
    bottom: 1rem;
    right: 1rem;
    display: flex;
    align-items: center;
    gap: 0.5rem;
    background: rgba(13,13,13,0.65);
    color: #fff;
    border: none;
    padding: 0.45rem 0.9rem;
    font-size: 0.75rem;
    letter-spacing: 0.06em;
    border-radius: var(--radius);
    backdrop-filter: blur(4px);
    cursor: pointer;
    transition: background var(--transition);
    z-index: 2;
}

    .pdp-gallery__expand:hover {
        background: rgba(13,13,13,0.85);
    }

.pdp-thumbs {
    background: var(--sage-dark);
    padding: 0.75rem 0;
}

.pdp-thumbs__strip {
    max-width: var(--max-width);
    margin: 0 auto;
    padding: 0 2rem;
    display: flex;
    gap: 6px;
    overflow-x: auto;
}

.pdp-thumb {
    flex-shrink: 0;
    width: 88px;
    height: 64px;
    padding: 0;
    display: block;
    background-size: cover;
    background-position: center;
    background-color: var(--bg-warm);
    border: none;
    outline: 2px solid transparent;
    outline-offset: -2px;
    cursor: pointer;
    border-radius: var(--radius);
    transition: outline-color var(--transition), opacity var(--transition);
    opacity: 0.75;
}

    .pdp-thumb:hover {
        outline-color: var(--sage);
        opacity: 1;
    }

.pdp-thumb--floorplan {
    position: relative;
    display: flex;
    align-items: flex-end;
    opacity: 1;
    outline-color: var(--border);
}

    .pdp-thumb--floorplan::before {
        content: '';
        position: absolute;
        inset: 0;
        background: rgba(13,13,13,0.45);
        border-radius: calc(var(--radius) - 2px);
    }

    .pdp-thumb--floorplan span {
        position: relative;
        z-index: 1;
        color: #fff;
        font-size: 0.68rem;
        letter-spacing: 0.06em;
        text-transform: uppercase;
        padding: 0.35rem;
    }

.pdp-quicknav {
    max-width: var(--max-width);
    margin: 0 auto;
    padding: 1rem 2rem 0;
    display: flex;
    align-items: center;
    justify-content: flex-end;
}

.pdp-quicknav__actions {
    display: flex;
    gap: 1.25rem;
}

.pdp-action {
    display: inline-flex;
    align-items: center;
    gap: 0.45rem;
    background: none;
    border: none;
    font-family: var(--font-body);
    font-size: 0.82rem;
    letter-spacing: 0.03em;
    color: var(--charcoal);
    cursor: pointer;
    transition: color var(--transition);
}

    .pdp-action:hover {
        color: var(--sage-dark);
    }

    .pdp-action .fa-regular {
        color: var(--charcoal);
    }

    .pdp-action.is-saved .fa-solid,
    .pdp-action .fa-solid.fa-heart {
        color: #c0392b;
    }

/* Detail layout */
.detail-layout {
    max-width: var(--max-width);
    margin: 0 auto;
    padding: 3rem 2rem;
    display: grid;
    grid-template-columns: 1fr 340px;
    gap: 4rem;
    align-items: start;
}

.detail-header {
    margin-bottom: 2rem;
}

.detail-header__meta {
    display: flex;
    align-items: center;
    gap: 0.75rem;
    margin-bottom: 0.75rem;
}

.detail-channel {
    font-size: 0.75rem;
    letter-spacing: 0.2em;
    text-transform: uppercase;
    color: var(--gold);
}

.detail-type {
    font-size: 0.75rem;
    letter-spacing: 0.15em;
    text-transform: uppercase;
    color: var(--muted);
}

.detail-header__row {
    display: flex;
    align-items: flex-end;
    justify-content: space-between;
    gap: 1.5rem;
    margin-bottom: 1.25rem;
}

.detail-header__refdate {
    flex-shrink: 0;
    text-align: right;
    font-size: 0.875rem;
    color: var(--muted);
    line-height: 1.6;
}

    .detail-header__refdate .sidebar-ref,
    .detail-header__refdate .sidebar-date {
        display: block;
    }

.detail-address {
    font-family: var(--font-eyebrow);
    font-size: clamp(2.0rem, 3.4vw, 3.0rem);
    font-weight: 400;
    color: var(--black);
    line-height: 1.2;
    margin-bottom: 0;
}

/* Postcode sits on its own line below the address - kept in the regular
   serif since the cursive face gets hard to read at small sizes. */
.detail-postcode {
    display: block;
    font-family: var(--font-serif);
    font-size: 1.6rem;
    color: var(--muted);
    letter-spacing: 0.06em;
    margin-top: 0.35rem;
}

.detail-price-block {
    display: flex;
    align-items: baseline;
    gap: 0.6rem;
}

.detail-price-qualifier {
    font-size: 0.9rem;
    color: var(--muted);
}

.detail-price {
    font-family: var(--font-serif);
    font-size: 2.2rem;
    font-weight: 400;
    color: var(--black);
}

.detail-status {
    display: inline-block;
    margin-top: 1rem;
    padding: 0.35rem 1rem;
    font-size: 0.75rem;
    letter-spacing: 0.2em;
    text-transform: uppercase;
    background: var(--charcoal);
    color: #fff;
    border-radius: var(--radius);
}

.detail-status--sidebar {
    margin-top: 0;
    margin-bottom: 1rem;
}

/* Specs bar */
.detail-specs {
    display: flex;
    gap: 0;
    border-top: 1px solid var(--border);
    border-bottom: 1px solid var(--border);
    margin-bottom: 2.5rem;
}

.spec-item {
    flex: 1;
    display: flex;
    flex-direction: column;
    align-items: center;
    padding: 1.25rem 0.5rem;
    gap: 0.35rem;
    border-right: 1px solid var(--border);
    text-align: center;
}

    .spec-item:last-child {
        border-right: none;
    }

    .spec-item i {
        font-size: 1.1rem;
        color: var(--sage);
    }

.spec-value {
    font-family: var(--font-serif);
    font-size: 1.1rem;
    font-weight: 400;
    color: var(--black);
}

.spec-label {
    font-size: 0.75rem;
    letter-spacing: 0.1em;
    text-transform: uppercase;
    color: var(--muted);
}

/* Detail sections */
.detail-section-title {
    font-family: var(--font-serif);
    font-size: 1.3rem;
    font-weight: 400;
    color: var(--black);
    margin-bottom: 1rem;
    padding-bottom: 0.5rem;
    border-bottom: 1px solid var(--border);
}

.detail-summary {
    margin-bottom: 2rem;
    padding: 1.5rem;
    background: var(--sage-dark);
    border-left: 3px solid var(--gold);
    border-radius: 0 var(--radius) var(--radius) 0;
}

    .detail-summary p {
        font-family: var(--font-serif);
        font-size: 1.1rem;
        font-style: italic;
        color: #fff;
        line-height: 1.8;
    }

.detail-features, .detail-description, .detail-rooms,
.detail-floorplans, .detail-epc,
.detail-utilities {
    margin-bottom: 2.5rem;
}

.features-list {
    list-style: none;
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(220px, 1fr));
    gap: 0.6rem 1rem;
}

    .features-list li {
        display: flex;
        align-items: flex-start;
        gap: 0.55rem;
        font-size: 1rem;
        line-height: 1.4;
        color: var(--charcoal);
    }

        .features-list li i {
            color: var(--gold);
            font-size: 0.9rem;
            margin-top: 0.2rem;
            flex-shrink: 0;
        }

.detail-floorplans__placeholder,
.detail-epc__placeholder {
    display: flex;
    align-items: center;
    gap: 0.6rem;
    padding: 1.25rem;
    border: 1px solid var(--border);
    border-radius: var(--radius);
    color: var(--muted);
    font-size: 0.95rem;
}

    .detail-floorplans__placeholder i,
    .detail-epc__placeholder i {
        color: var(--gold);
        font-size: 1.1rem;
    }

.description-body {
    font-size: 1rem;
    line-height: 1.85;
    color: var(--charcoal);
}

    .description-body p {
        margin-bottom: 1rem;
    }

.rooms-grid {
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(180px, 1fr));
    gap: 1rem;
}

.room-item {
    padding: 1rem;
    border: 1px solid var(--border);
    border-radius: var(--radius);
}

.room-name {
    font-family: var(--font-serif);
    font-size: 1rem;
    font-weight: 500;
    color: var(--black);
    margin-bottom: 0.3rem;
}

.room-dims {
    font-size: 0.9rem;
    color: var(--mid);
    margin-bottom: 0.3rem;
}

.room-desc {
    font-size: 0.9rem;
    color: var(--muted);
    line-height: 1.5;
}

.floorplan-img {
    width: 100%;
    border: 1px solid var(--border);
    border-radius: var(--radius);
    margin-bottom: 0.5rem;
}

.epc-link {
    display: inline-flex;
    align-items: center;
    gap: 0.4rem;
    font-size: 0.9rem;
    color: var(--charcoal);
    border-bottom: 1px solid var(--border);
    padding-bottom: 2px;
}

.detail-dl {
    display: grid;
    grid-template-columns: auto 1fr;
    gap: 0.5rem 1.5rem;
    font-size: 1rem;
}

    .detail-dl dt {
        color: var(--muted);
        font-weight: 400;
    }

    .detail-dl dd {
        color: var(--charcoal);
    }

/* Sidebar */
.detail-sidebar {
    position: sticky;
    top: 88px;
}

.sidebar-enquiry {
    background: var(--sage-dark);
    border: 1px solid var(--sage-dark);
    border-radius: var(--radius);
    padding: 1.75rem;
    margin-bottom: 1.5rem;
    text-align: center;
}

    .sidebar-enquiry h3 {
        font-family: var(--font-serif);
        font-size: 1.2rem;
        font-weight: 400;
        color: #fff;
        margin-bottom: 0.5rem;
    }

    .sidebar-enquiry p {
        font-size: 0.9rem;
        color: rgba(255, 255, 255, 0.75);
        margin-bottom: 1.25rem;
        line-height: 1.5;
    }

.btn-enquire {
    display: block;
    width: 100%;
    padding: 0.85rem;
    background: #fff;
    color: var(--sage-dark);
    font-size: 0.95rem;
    font-family: var(--font-body);
    font-weight: 400;
    letter-spacing: 0.03em;
    text-align: center;
    border-radius: var(--radius);
    transition: background var(--transition);
    margin-bottom: 0.75rem;
}

    .btn-enquire:hover {
        background: var(--sage-pale);
    }

.sidebar-enquiry .btn-sage--outline {
    border-color: rgba(255, 255, 255, 0.5);
    color: #fff;
}

    .sidebar-enquiry .btn-sage--outline:hover {
        background: rgba(255, 255, 255, 0.12);
        color: #fff;
    }

.sidebar-enquiry__actions {
    display: flex;
    align-items: flex-start;
    gap: 0.5rem;
    margin-top: 1.1rem;
    padding-top: 1.1rem;
    border-top: 1px solid rgba(255, 255, 255, 0.25);
}

    .sidebar-enquiry__actions .pdp-action {
        flex: 1 1 0;
        flex-direction: column;
        align-items: center;
        gap: 0.5rem;
        font-size: 0.72rem;
        text-align: center;
        color: rgba(255, 255, 255, 0.85);
    }

    .sidebar-enquiry__actions .pdp-action:hover {
        color: #fff;
    }

    .sidebar-enquiry__actions .pdp-action i,
    .sidebar-enquiry__actions .pdp-action .fa-regular {
        width: 1.3rem;
        font-size: 1.15rem;
        text-align: center;
        color: rgba(255, 255, 255, 0.85);
    }

    .sidebar-enquiry__actions .pdp-action.is-saved .fa-solid,
    .sidebar-enquiry__actions .pdp-action .fa-solid.fa-heart {
        color: #e0796a;
    }

.sidebar-meta {
    font-size: 0.875rem;
    color: var(--muted);
    line-height: 1.8;
    padding: 1rem 0;
    border-top: 1px solid var(--border);
    border-bottom: 1px solid var(--border);
    margin-bottom: 1.5rem;
}

.sidebar-ref, .sidebar-date {
    letter-spacing: 0.05em;
}

.sidebar-map h4 {
    font-family: var(--font-serif);
    font-size: 1rem;
    font-weight: 400;
    margin-bottom: 0.75rem;
    color: var(--charcoal);
}

.map-preview {
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    gap: 0.6rem;
    width: 100%;
    padding: 2.25rem 1rem;
    background: var(--sage-pale);
    border: 1px solid var(--border);
    border-radius: var(--radius);
    color: var(--sage-dark);
    font-family: var(--font-body);
    font-size: 0.85rem;
    letter-spacing: 0.05em;
    cursor: pointer;
    transition: background var(--transition);
}

    .map-preview i {
        font-size: 1.6rem;
    }

    .map-preview:hover {
        background: #dde6e0;
    }

.btn-sage--block {
    display: block;
    width: 100%;
}

/* ============================================================
   FOOTER
   ============================================================ */

.site-footer {
    background: var(--bg-white);
    border-top: 1px solid var(--border);
    color: var(--charcoal);
}

/* Accreditation badges */
.footer-badges {
    border-bottom: 1px solid var(--sage);
    padding: 1.75rem 2rem;
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 1.25rem;
}

.footer-badges__logos {
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 2.5rem;
    flex-wrap: wrap;
}

.footer-badges img {
    height: 72px;
    width: auto;
    object-fit: contain;
}

.footer-badges p {
    max-width: 640px;
    text-align: center;
    font-size: var(--text-sm);
    font-style: italic;
    color: var(--muted);
    line-height: 1.7;
}

/* Main footer grid */
.footer-inner {
    max-width: var(--max-width);
    margin: 0 auto;
    padding: 3rem 2rem;
    display: grid;
    grid-template-columns: auto 1.2fr 1fr 1fr 1.6fr;
    gap: 3rem;
    align-items: start;
}

/* The two side wrappers collapse to their children on desktop/phone (grid),
   so the five items place directly in the grid. Explicit columns keep the
   desktop order (HH, contact, info, guides, story) despite the DOM grouping. */
.footer-side { display: contents; }
.footer-monogram     { grid-column: 1; grid-row: 1; }
.footer-col--contact { grid-column: 2; grid-row: 1; }
.footer-col--info    { grid-column: 3; grid-row: 1; }
.footer-col--guides  { grid-column: 4; grid-row: 1; }
.footer-col--story   { grid-column: 5; grid-row: 1; }

.footer-monogram {
    font-family: var(--font-serif);
    font-size: 4.5rem;
    font-weight: 400;
    color: var(--black);
    line-height: 1;
    letter-spacing: -0.02em;
    padding-top: 0.25rem;
}

.footer-col h4 {
    font-size: 1.2rem;
    font-weight: 400;
    color: var(--black);
    margin-bottom: 1.25rem;
}

.footer-contact {
    display: flex;
    flex-direction: column;
    gap: 0.5rem;
}

.footer-contact p,
.footer-contact a {
    font-size: 1rem;
    color: var(--mid);
    line-height: 1.55;
}

.footer-contact a {
    color: var(--sage);
    transition: color var(--transition);
}

.footer-contact a:hover {
    color: var(--sage-dark);
}

.footer-col-links {
    display: flex;
    flex-direction: column;
    gap: 0.65rem;
}

.footer-col-links a {
    font-size: 1rem;
    color: var(--sage);
    transition: color var(--transition);
    line-height: 1.4;
}

.footer-col-links a:hover {
    color: var(--sage-dark);
}

.footer-col--story h3 {
    font-family: var(--font-serif);
    font-size: 1.3rem;
    font-weight: 400;
    color: var(--black);
    line-height: 1.35;
    margin-bottom: 1rem;
}

.footer-col--story p {
    font-size: 1rem;
    color: var(--mid);
    line-height: 1.8;
    margin-bottom: 1.25rem;
}

.footer-social {
    display: flex;
    align-items: center;
    gap: 0.6rem;
    margin-top: 1.5rem;
}

/* Banner sitting on the line between the main footer content and the
   copyright bar. This used to be an absolute overlay guessing at how much
   room the columns above had left, which broke differently at every
   breakpoint (desktop grid, iPad flex, stacked mobile) since something
   different always ended up nearest the bottom-left corner. Instead it's
   just a normal block in its own reserved strip below .footer-inner, so it
   can never overlap the columns above regardless of screen size - the
   image's own bottom edge sits flush against .footer-base's top border,
   which reads as resting on that divider without needing to compute
   anything. Shown on mobile too now that it has its own space to sit in. */
.footer-banner {
    padding-top: 1.5rem;
}

.footer-banner img {
    display: block;
    width: clamp(220px, 30vw, 460px);
    height: auto;
}

/* Bottom bar */
.footer-base {
    border-top: 1px solid var(--sage);
    padding: 1rem 2rem;
    display: flex;
    align-items: center;
    justify-content: space-between;
    font-size: 0.85rem;
    color: var(--muted);
}

.footer-base a {
    color: var(--muted);
    transition: color var(--transition);
}

.footer-base a:hover {
    color: var(--charcoal);
}

.footer-credit {
    margin-top: 0.35rem;
}

/* ============================================================
   RESPONSIVE
   ============================================================ */

@media (max-width: 1100px) {
    .header-inner {
        gap: 1.25rem;
    }

    .site-nav {
        gap: 1rem;
    }

    .site-nav a,
    .nav-dropdown__trigger {
        font-size: 0.9rem;
    }
}

@media (max-width: 1024px) {
    .detail-layout {
        grid-template-columns: 1fr 300px;
        gap: 2.5rem;
    }
}

/* Footer on iPad (portrait/landscape, above the phone breakpoint): two flex
   columns. The left side spaces Get in touch / Our Guides / HH evenly down
   the full column height, independent of the taller right side. */
@media (min-width: 769px) and (max-width: 1024px) {
    .footer-inner {
        display: flex;
        align-items: stretch;
        gap: 3rem;
    }

    .footer-side {
        display: flex;
        flex-direction: column;
        flex: 1;
        min-width: 0;
    }

    .footer-side--a {
        justify-content: space-between;
    }

    .footer-side--b {
        gap: 2.5rem;
    }

    .footer-banner img {
        width: clamp(320px, 46vw, 620px);
    }
}

@media (max-width: 860px) {
    .site-nav {
        display: none;
    }

    .header-actions {
        display: none;
    }

    /* On mobile the grid becomes logo + toggle + (account + CTA), so the
       "Book a Valuation" CTA is the furthest-right element. All three are
       pinned to row 1: the toggle sits in an earlier column than the actions
       but appears later in the markup, so without explicit rows grid's
       auto-placement would bump it onto a second row. */
    .site-logo {
        grid-column: 1;
        grid-row: 1;
    }

    .nav-toggle {
        display: flex;
        grid-column: 2;
        grid-row: 1;
        justify-self: end;
    }

    .header-mobile-actions {
        display: flex;
        grid-column: 3;
        grid-row: 1;
        justify-self: end;
    }

    .header-inner {
        grid-template-columns: auto 1fr auto;
        min-height: 68px;
    }

    .logo-initials {
        height: 46px;
    }
}

@media (max-width: 768px) {
    .detail-layout {
        grid-template-columns: 1fr;
        padding: 1.5rem;
    }

    .detail-sidebar {
        position: static;
    }

    .detail-specs {
        flex-wrap: wrap;
    }

    .spec-item {
        flex: 1 1 33%;
        border-right: none;
        border-bottom: 1px solid var(--border);
    }

    /* Footer: 2-column on mobile - contact + info on row 1, guides + story on row 2 */
    .footer-inner {
        grid-template-columns: 1fr 1fr;
        padding: 2.5rem 1.5rem 2rem;
        gap: 2rem;
    }

    .footer-col--contact { grid-column: 1; grid-row: 1; }
    .footer-col--info    { grid-column: 2; grid-row: 1; }
    .footer-col--guides  { grid-column: 1; grid-row: 2; align-self: start; }
    /* Story spans rows 2-3 so the shorter left column has leftover height.
       The monogram spans the same rows and centres across that whole area,
       so the HH sits in the middle of the whitespace below "Our Guides"
       rather than pinned to the bottom. */
    .footer-col--story   { grid-column: 2; grid-row: 2 / 4; }
    .footer-monogram  { grid-column: 1; grid-row: 2 / 4; align-self: center; font-size: 3.5rem; }

    .footer-base {
        padding: 1rem 1.5rem;
        flex-direction: column;
        gap: 0.5rem;
        text-align: center;
    }

    /* Full-bleed on mobile rather than clamped to a fixed max-width. */
    .footer-banner img {
        width: 100%;
        max-width: none;
    }

    .logo-full {
        display: none;
    }

    .logo-initials {
        display: block;
    }

    .mobile-nav {
        padding: 0 1.5rem 1.75rem;
    }
}

@media (max-width: 480px) {
    /* Keep the two-column footer on small phones (inherits the 768px grid
       placement) rather than collapsing into one tall vertical stack. */
    .footer-inner {
        gap: 1.75rem 1.25rem;
    }

    .footer-monogram {
        font-size: 3rem;
    }
}

/* ============================================================
   HOMEPAGE
   ============================================================ */

/* ── Hero ── */
.home-hero {
    position: relative;
    min-height: 85vh;
    background: var(--black);
    overflow: hidden;
    display: flex;
    align-items: center;
    justify-content: center;
    text-align: center;
}

.home-hero__slides {
    position: absolute;
    /* Taller than the hero (anchored at the bottom) to give the JS parallax
       headroom to drift into without exposing the image edges. */
    left: 0;
    right: 0;
    top: -30%;
    height: 130%;
    z-index: 0;
    will-change: transform;
}

.home-hero__slide {
    position: absolute;
    inset: 0;
    background-size: cover;
    /* Anchor each image to the bottom of the hero */
    background-position: center bottom;
    background-repeat: no-repeat;
    opacity: 0;
    transition: opacity 1.5s ease;
}

.home-hero__slide.is-active {
    opacity: 1;
}

.home-hero::after {
    content: '';
    position: absolute;
    inset: 0;
    z-index: 1;
    background: linear-gradient(to bottom, rgba(20,30,40,0.2) 0%, rgba(20,30,40,0.55) 100%);
}

/* Selling page hero: anchored higher than the bottom-anchored default, so
   more of the top of each slide shows. */
.home-hero--selling .home-hero__slide {
    background-position: center 50%;
}

/* Buying page hero: landscape shots, so the horizon reads better anchored
   slightly above the default bottom edge. */
.home-hero--buying .home-hero__slide {
    background-position: center 55%;
}

.home-hero__content {
    position: relative;
    z-index: 2;
    max-width: 1100px;
    padding: 3rem 2rem;
}

.home-hero__headline {
    font-family: var(--font-serif);
    font-size: clamp(2rem, 4vw, 3.6rem);
    font-weight: 400;
    color: #fff;
    line-height: 1.2;
    margin-bottom: 2.5rem;
    letter-spacing: 0.01em;
}

.btn-transparent {
    display: inline-block;
    padding: 0.85rem 2.25rem;
    border: 1px solid rgba(255,255,255,0.6);
    color: #fff;
    font-size: 0.85rem;
    letter-spacing: 0.08em;
    border-radius: var(--radius);
    transition: all var(--transition);
}

.btn-transparent:hover {
    background: var(--sage);
    border-color: rgba(255,255,255,0.0);
    color: #fff;
}

/* ── Property search widget (shared: homepage hero + dedicated Properties page) ── */
.home-search {
    position: relative;
    z-index: 20;
    background: var(--sage);
    padding: 0 2rem;
}

.home-search .property-search-widget {
    max-width: 1280px;
    margin: -3.75rem auto 0;
}

.listing-search {
    position: relative;
    z-index: 20;
    padding: 0 2rem;
}

.listing-search .property-search-widget {
    max-width: 1280px;
    margin: -2.75rem auto 0;
}

.property-search-widget {
    position: relative;
    z-index: 20;
    isolation: isolate;
    background: var(--bg-white);
    border-radius: var(--radius);
    box-shadow: var(--shadow);
    padding: 2rem 2.25rem;
}

.property-search-widget__row {
    display: grid;
    gap: 1.25rem;
    align-items: end;
}

.property-search-widget__row--main {
    grid-template-columns: 2fr 1fr 1fr auto;
    margin-bottom: 1.5rem;
}

.property-search-widget__row--filters {
    grid-template-columns: repeat(4, 1fr);
}

.property-search-widget__field {
    display: flex;
    flex-direction: column;
    gap: 0.45rem;
    position: relative;
}

.property-search-widget__field label {
    font-size: 0.8rem;
    font-weight: 550;
    letter-spacing: 0.09em;
    /*text-transform: uppercase;*/
    color: var(--black);
}

.property-search-widget__field input,
.property-search-widget__field select {
    width: 100%;
    box-sizing: border-box;
    height: 3.1rem;
    padding: 0 0.9rem;
    border: 1px solid var(--border);
    border-radius: var(--radius);
    background: var(--bg-white);
    font-family: var(--font-body);
    font-size: 1rem;
    line-height: 1;
    color: var(--charcoal);
}

.property-search-widget__field input::placeholder {
    color: var(--mid);
    opacity: 1;
}

/* White control with a subtle chevron; the option rows turn green on hover. */
.property-search-widget__field select {
    cursor: pointer;
    appearance: none;
    background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='10' height='6' viewBox='0 0 10 6'%3E%3Cpath d='M1 1l4 4 4-4' stroke='%235a6a7a' stroke-width='1.2' fill='none'/%3E%3C/svg%3E");
    background-repeat: no-repeat;
    background-position: right 0.9rem center;
    padding-right: 2rem;
}

.property-search-widget__field input:focus,
.property-search-widget__field select:focus {
    outline: 1px solid var(--sage);
}

/* Option rows: green on hover/selected where the browser honours it (Chromium). */
.property-search-widget__field select option,
.listing-toolbar__sort select option {
    background: var(--bg-white);
    color: var(--charcoal);
}

.property-search-widget__field select option:checked,
.property-search-widget__field select option:hover,
.listing-toolbar__sort select option:checked,
.listing-toolbar__sort select option:hover {
    background: var(--sage-pale);
    color: var(--sage-dark);
}

.autocomplete {
    display: block;
    width: 100%;
}

.property-search-widget__submit {
    height: 3.1rem;
    box-sizing: border-box;
    display: flex;
    align-items: center;
    justify-content: center;
    padding: 0 2.25rem;
    background: var(--sage);
    color: #fff;
    font-family: var(--font-body);
    font-size: 0.95rem;
    letter-spacing: 0.03em;
    border: none;
    border-radius: var(--radius);
    cursor: pointer;
    white-space: nowrap;
    transition: background var(--transition);
}

.property-search-widget__submit:hover {
    background: var(--sage-dark);
}

/* Location autocomplete */
.autocomplete {
    position: relative;
}

.autocomplete__list {
    position: absolute;
    top: calc(100% + 4px);
    left: 0;
    right: 0;
    background: var(--bg-white);
    border: 1px solid var(--border);
    border-radius: var(--radius);
    box-shadow: var(--shadow);
    max-height: 240px;
    overflow-y: auto;
    z-index: 60;
    display: none;
}

.autocomplete__list.is-open {
    display: block;
}

.autocomplete__option {
    padding: 0.65rem 0.9rem;
    font-size: 0.95rem;
    color: var(--charcoal);
    cursor: pointer;
}

.autocomplete__option:hover,
.autocomplete__option.is-active {
    background: var(--sage-pale);
    color: var(--sage-dark);
}

/* ── Listing page (results below the search widget) ── */
.listing-page {
    max-width: var(--max-width);
    margin: 0 auto;
    padding: 2.5rem 2rem 3rem;
}

.listing-toolbar {
    display: flex;
    align-items: center;
    justify-content: space-between;
    flex-wrap: wrap;
    gap: 1rem;
    padding-bottom: 1.75rem;
    border-bottom: 1px solid var(--border);
    margin-bottom: 2rem;
}

.listing-toolbar__count {
    font-size: 0.9rem;
    color: var(--muted);
    letter-spacing: 0.05em;
}

.listing-toolbar__actions {
    display: flex;
    align-items: center;
    gap: 1.5rem;
}

.listing-toolbar__sort {
    display: flex;
    align-items: center;
    gap: 0.6rem;
}

.listing-toolbar__sort label {
    font-size: 0.75rem;
    letter-spacing: 0.1em;
    text-transform: uppercase;
    color: var(--muted);
}

.listing-toolbar__sort select {
    appearance: none;
    padding: 0.5rem 2rem 0.5rem 0.75rem;
    border: 1px solid var(--border);
    border-radius: var(--radius);
    background-color: var(--bg-white);
    color: var(--charcoal);
    background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='10' height='6' viewBox='0 0 10 6'%3E%3Cpath d='M1 1l4 4 4-4' stroke='%235a6a7a' stroke-width='1.2' fill='none'/%3E%3C/svg%3E");
    background-repeat: no-repeat;
    background-position: right 0.75rem center;
    font-family: var(--font-body);
    font-size: 0.85rem;
    cursor: pointer;
}

.listing-toolbar__sort select:hover,
.listing-toolbar__sort select:focus {
    outline: 1px solid var(--sage);
}

/* ── Custom dropdown (JS-enhanced <select>) - nav-dropdown look: white panel,
   options turn sage-green on hover. The native <select> is kept but hidden
   (still submits with the form); no-JS users keep the styled native control. ── */
.cselect {
    position: relative;
    width: 100%;
}

.cselect__native {
    display: none;
}

.cselect__trigger {
    width: 100%;
    height: 3.1rem;
    box-sizing: border-box;
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 0.6rem;
    padding: 0 0.9rem;
    background: var(--bg-white);
    border: 1px solid var(--border);
    border-radius: var(--radius);
    font-family: var(--font-body);
    font-size: 1rem;
    color: var(--charcoal);
    text-align: left;
    cursor: pointer;
}

.cselect__label {
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}

.cselect__trigger::after {
    content: '';
    flex-shrink: 0;
    width: 7px;
    height: 7px;
    border-right: 1px solid var(--mid);
    border-bottom: 1px solid var(--mid);
    transform: rotate(45deg) translateY(-2px);
    transition: transform var(--transition);
}

.cselect.is-open .cselect__trigger {
    outline: 1px solid var(--sage);
}

.cselect.is-open .cselect__trigger::after {
    transform: rotate(225deg) translateY(2px);
}

.cselect__menu {
    position: absolute;
    top: calc(100% + 0.4rem);
    left: 0;
    right: 0;
    z-index: 60;
    display: none;
    max-height: 264px;
    overflow-y: auto;
    padding: 0.35rem 0;
    background: var(--bg-white);
    border: 1px solid var(--border);
    border-radius: var(--radius);
    box-shadow: var(--shadow);
}

.cselect.is-open .cselect__menu {
    display: block;
}

.cselect__option {
    padding: 0.6rem 0.9rem;
    font-size: 0.95rem;
    color: var(--charcoal);
    cursor: pointer;
    transition: background var(--transition), color var(--transition);
}

.cselect__option.is-active {
    background: var(--sage-pale);
    color: var(--sage-dark);
}

.cselect__option.is-selected {
    font-weight: 600;
}

/* Compact variant for the sort control in the results toolbar */
.listing-toolbar__sort .cselect {
    width: auto;
}

.listing-toolbar__sort .cselect__trigger {
    height: auto;
    padding: 0.5rem 0.75rem;
    font-size: 0.85rem;
}

.listing-toolbar__sort .cselect__menu {
    left: 0;
    right: auto;
    min-width: 100%;
    white-space: nowrap;
}

.listing-toolbar__clear {
    font-size: 0.8rem;
    color: var(--muted);
    letter-spacing: 0.05em;
    text-decoration: underline;
    text-underline-offset: 3px;
    white-space: nowrap;
}

/* ── Tagline band ── */
.home-band {
    background: var(--sage);
    padding: 2.25rem 4rem;
    text-align: center;
}

.home-band p {
    font-family: var(--font-serif);
    font-size: clamp(1.3rem, 2vw, 1.6rem);
    letter-spacing: 0.04em;
    color: #fff;
    line-height: 1.65;
}

/* ── Featured locations ── */
.home-locations {
    background: var(--bg-white);
    padding: 5rem 2rem;
}

.home-locations__inner {
    max-width: var(--max-width);
    margin: 0 auto;
}

.home-locations__inner > h2 {
    font-family: var(--font-serif);
    font-size: clamp(1.8rem, 3vw, 2.4rem);
    font-weight: 400;
    color: var(--black);
    text-align: center;
    margin-bottom: 2.5rem;
}

.home-locations__grid {
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    gap: 2rem;
}

.location-card {
    display: block;
    border-radius: 12px;
    overflow: hidden;
    box-shadow: var(--shadow);
    transition: transform var(--transition), box-shadow var(--transition);
}

.location-card:hover {
    transform: translateY(-6px);
    box-shadow: 0 12px 32px rgba(20,30,40,0.18);
}

.location-card__image {
    position: relative;
    height: 300px;
    background-size: cover;
    background-position: center;
    /* Slow zoom on hover reads as premium and keeps the framing crisp */
    transform: scale(1.001);
    transition: transform 0.7s ease;
    will-change: transform;
}

/* Soft gradient at the base lifts the imagery and gives it a refined depth */
.location-card__image::after {
    content: '';
    position: absolute;
    inset: 0;
    background: linear-gradient(to top, rgba(20,30,40,0.28) 0%, rgba(20,30,40,0) 45%);
    opacity: 0.9;
    transition: opacity var(--transition);
}

.location-card:hover .location-card__image {
    transform: scale(1.07);
}

.location-card:hover .location-card__image::after {
    opacity: 0.65;
}

.location-card__footer {
    display: flex;
    align-items: center;
    justify-content: space-between;
    padding: 1.1rem 1.4rem;
    background: var(--bg-white);
}

.location-card__name {
    font-family: var(--font-serif);
    font-size: 1.2rem;
    color: var(--black);
}

.location-card__place {
    color: var(--sage);
}

.location-card__footer i {
    color: var(--sage);
    font-size: 1.1rem;
    transition: color var(--transition);
}

.location-card:hover .location-card__footer i {
    color: var(--sage-dark);
}

@media (max-width: 768px) {
    .home-locations {
        padding: 3.5rem 0;
    }

    .home-locations__inner > h2 {
        padding: 0 1.5rem;
    }

    .home-locations__grid {
        display: flex;
        grid-template-columns: none;
        overflow-x: auto;
        scroll-snap-type: x mandatory;
        -webkit-overflow-scrolling: touch;
        gap: 1.25rem;
        padding: 0.5rem 1.5rem 1.5rem;
        scrollbar-width: none;
        -ms-overflow-style: none;
    }

    .home-locations__grid::-webkit-scrollbar {
        display: none;
    }

    .location-card {
        flex: 0 0 80%;
        scroll-snap-align: center;
    }

    .location-card:hover {
        transform: none;
    }
}

/* ── Intro: Do you have a beautiful countryside home? ── */
.home-intro {
    max-width: var(--max-width);
    margin: 0 auto;
    padding: 6rem 2rem;
}

.home-intro__inner {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 6rem;
    align-items: start;
}

.home-intro__text h2 {
    font-family: var(--font-serif);
    font-size: clamp(1.8rem, 3vw, 2.5rem);
    font-weight: 400;
    color: var(--black);
    line-height: 1.25;
    margin-bottom: 1.5rem;
}

.home-intro__text p {
    font-size: var(--text);
    color: var(--charcoal);
    line-height: 1.85;
    margin-bottom: 1rem;
}

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

.home-intro__image img {
    width: 100%;
    aspect-ratio: 3 / 4;
    object-fit: cover;
    display: block;
    border-radius: 12px;
}

/* ── Mid hero ── */
.home-mid-hero {
    position: relative;
    overflow: hidden;
    min-height: 55vh;
    background: var(--black);
    display: flex;
    align-items: center;
    justify-content: center;
    text-align: center;
}

/* Background layer, drifted by the JS in site.js as the section passes through
   the viewport. Works on mobile/tablet (unlike background-attachment: fixed,
   which those browsers silently treat as `scroll` - i.e. no parallax at all).
   Taller than the section with headroom top and bottom so the drift never
   exposes an edge. */
.home-mid-hero__bg {
    position: absolute;
    left: 0;
    right: 0;
    top: -25%;
    height: 150%;
    z-index: 0;
    background-image: url('/images/hero2.jpg');
    background-size: cover;
    background-position: center;
    background-repeat: no-repeat;
    will-change: transform;
}

.home-mid-hero::after {
    content: '';
    position: absolute;
    inset: 0;
    background: rgba(20,30,40,0.45);
}

.home-mid-hero__content {
    position: relative;
    z-index: 1;
    width: 100%;
    max-width: 760px;
    padding: 3rem 2rem;
    box-sizing: border-box;
}

.home-mid-hero__headline {
    font-family: var(--font-serif);
    font-weight: 400;
    font-size: clamp(1.5rem, 3vw, 2.2rem);
    color: #fff;
    line-height: 1.45;
    margin-bottom: 1.25rem;
}

.home-mid-hero__sub {
    font-family: var(--font-serif);
    font-size: 1.05rem;
    color: rgba(255,255,255,0.85);
    margin-bottom: 2.25rem;
    line-height: 1.6;
}

.home-mid-hero__actions {
    display: flex;
    gap: 1rem;
    justify-content: center;
    flex-wrap: wrap;
}

.home-mid-hero__actions .btn-transparent {
    flex: 0 1 280px;
    text-align: center;
}

/* ── Welcome to Hoult Homes ── */
.home-welcome {
    position: relative;
    overflow: hidden;
    background: var(--bg-white);
}

.home-welcome__inner {
    position: relative;
    z-index: 2;
    max-width: var(--max-width);
    margin: 0 auto;
}

.home-welcome__text {
    position: relative;
    z-index: 2;
    padding: 5rem 4rem;
    text-align: center;
}

.home-welcome__text h2 {
    font-family: var(--font-serif);
    font-size: clamp(1.8rem, 3vw, 2.5rem);
    font-weight: 400;
    color: var(--black);
    line-height: 1.25;
    margin-bottom: 1.5rem;
}

.home-welcome__text p {
    font-size: var(--text);
    color: var(--mid);
    line-height: 1.8;
    margin-bottom: 1rem;
}

.home-welcome__text p:last-of-type {
    margin-bottom: 0;
}

/* ── Beautifully Presented ── */
.home-presented {
    padding: 7rem 2rem;
    text-align: center;
    background: var(--bg-white);
}

.home-presented__inner {
    max-width: 640px;
    margin: 0 auto;
}

.home-presented__inner h2 {
    font-family: var(--font-serif);
    font-size: clamp(2rem, 4vw, 3rem);
    font-weight: 400;
    color: var(--black);
    line-height: 1.2;
    margin-bottom: 1.25rem;
}

.home-presented__inner p {
    font-size: var(--text);
    color: var(--mid);
    line-height: 1.8;
    margin-bottom: 2.5rem;
}

.home-presented__actions {
    display: flex;
    gap: 1rem;
    justify-content: center;
    flex-wrap: wrap;
}

.home-presented__actions .btn-sage {
    flex: 0 1 280px;
    text-align: center;
}

.btn-sage {
    display: inline-block;
    padding: 0.85rem 1.75rem;
    background: var(--sage);
    color: #fff;
    font-size: 0.85rem;
    letter-spacing: 0.05em;
    border: none;
    border-radius: var(--radius);
    transition: background var(--transition);
    cursor: pointer;
    font-family: inherit;
}

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

.btn-sage--outline {
    background: transparent;
    color: var(--sage-dark);
    border: 1px solid var(--sage);
}

    .btn-sage--outline:hover {
        background: var(--sage-pale);
        color: var(--sage-dark);
    }

/* ── The Hoult Homes Approach ── */
/* ── Photography carousel (center-stage) ── */
.photo-carousel {
    background: var(--sage);
    padding: 2.5rem 0 3rem;
    overflow: hidden;
}

.photo-carousel__head {
    text-align: center;
    max-width: 900px;
    margin: 0 auto 2.5rem;
    padding: 0 2rem;
}

.photo-carousel__head h2 {
    font-family: var(--font-serif);
    font-size: clamp(1.8rem, 3vw, 2.6rem);
    font-weight: 400;
    color: #fff;
    margin-bottom: 0.75rem;
}

.photo-carousel__head p {
    font-family: var(--font-body);
    color: rgba(255,255,255,0.85);
    line-height: 1.7;
    font-size: var(--text-sm);
}

.photo-carousel__viewport {
    position: relative;
}

.photo-carousel__track {
    display: flex;
    align-items: center;
    gap: 1.5rem;
    will-change: transform;
    transition: transform 0.6s cubic-bezier(0.4, 0, 0.2, 1);
}

.photo-carousel__slide {
    position: relative;
    flex: 0 0 auto;
    width: clamp(260px, 56vw, 760px);
    margin: 0;
    opacity: 0.45;
    transform: scale(0.86);
    transition: opacity 0.6s ease, transform 0.6s ease;
}

.photo-carousel__slide img {
    width: 100%;
    aspect-ratio: 3 / 2;
    object-fit: cover;
    display: block;
    border-radius: var(--radius);
    box-shadow: 0 18px 40px rgba(20, 30, 40, 0.18);
}

.photo-carousel__slide.is-active {
    opacity: 1;
    transform: scale(1);
}

.photo-carousel__arrow {
    position: absolute;
    top: 50%;
    transform: translateY(-50%);
    z-index: 3;
    width: 48px;
    height: 48px;
    border: none;
    border-radius: 50%;
    background: rgba(255, 255, 255, 0.92);
    color: var(--charcoal);
    font-size: 1rem;
    cursor: pointer;
    box-shadow: 0 6px 18px rgba(20, 30, 40, 0.18);
    transition: background var(--transition), color var(--transition);
}

/* Guard hover behind a real hover-capable pointer so a tap on touch devices
   doesn't leave the arrow stuck in its green hover state. */
@media (hover: hover) and (pointer: fine) {
    .photo-carousel__arrow:hover {
        background: var(--sage-dark);
        color: #fff;
    }
}

.photo-carousel__arrow--prev {
    left: max(1rem, calc(50% - 480px));
}

.photo-carousel__arrow--next {
    right: max(1rem, calc(50% - 480px));
}

.photo-carousel__dots {
    display: flex;
    justify-content: center;
    gap: 0.6rem;
    margin-top: 2.25rem;
}

.photo-carousel__dot {
    width: 8px;
    height: 8px;
    padding: 0;
    border: none;
    border-radius: 50%;
    background: rgba(255, 255, 255, 0.35);
    cursor: pointer;
    transition: background var(--transition), transform var(--transition);
}

.photo-carousel__dot.is-active {
    background: #fff;
    transform: scale(1.35);
}

.photo-carousel__credit {
    max-width: 680px;
    margin: 0 auto 0.75rem;
    padding: 0 2rem;
    text-align: center;
    font-family: var(--font-serif);
    font-size: clamp(1.1rem, 1.6vw, 1.3rem);
    line-height: 1.3;
    color: #fff;
}

.photo-carousel__credit a {
    color: #fff;
    text-decoration: underline;
    text-underline-offset: 2px;
    transition: color var(--transition);
}

.photo-carousel__credit a:hover {
    color: var(--black);
}

@media (max-width: 860px) {
    .photo-carousel__slide {
        width: clamp(240px, 78vw, 560px);
    }

    .photo-carousel__arrow {
        width: 40px;
        height: 40px;
    }
}

/* Dots are redundant on phones where the arrows are the primary control.
   Kept on tablets/iPad (>600px). */
@media (max-width: 600px) {
    .photo-carousel__dots {
        display: none;
    }
}

/* ============================================================
   REVIEWS CAROUSEL (homepage)
   ============================================================ */
.reviews-carousel {
    background: var(--bg-white);
    padding: 4rem 0 4.5rem;
    overflow: hidden;
}

.reviews-carousel__head {
    text-align: center;
    max-width: 680px;
    margin: 0 auto 2.75rem;
    padding: 0 2rem;
}

.reviews-carousel__eyebrow {
    text-transform: none;
    letter-spacing: normal;
    font-size: 0.72rem;
    font-family: var(--font-eyebrow);
    color: var(--gold);
    margin-bottom: 0.6rem;
}

.reviews-carousel__head h2 {
    font-family: var(--font-serif);
    font-size: clamp(1.8rem, 3vw, 2.6rem);
    font-weight: 400;
    color: var(--charcoal);
    margin-bottom: 1rem;
}

.reviews-carousel__summary {
    display: inline-flex;
    align-items: center;
    gap: 0.6rem;
    flex-wrap: wrap;
    justify-content: center;
}

.reviews-stars {
    color: var(--gold);
    font-size: 1rem;
    letter-spacing: 0.1em;
}

.reviews-carousel__summary-text {
    color: var(--mid);
    font-size: var(--text-sm);
}

.reviews-carousel__summary-text strong {
    color: var(--charcoal);
    font-weight: 600;
}

.reviews-carousel__viewport {
    position: relative;
    max-width: 1180px;
    margin: 0 auto;
    padding: 0 1rem;
    overflow: hidden;
}

.reviews-carousel__track {
    display: flex;
    align-items: center;
    gap: 0;
    will-change: transform;
    transition: transform 0.6s cubic-bezier(0.4, 0, 0.2, 1);
    width: 100%;
}

/* One review at a time: each slide fills the viewport, so only the centred one
   is visible. Plain text - no card background, border or shadow. */
.review-card {
    flex: 0 0 100%;
    margin: 0;
    padding: 0 clamp(1rem, 6vw, 4rem);
    display: flex;
    flex-direction: column;
    align-items: center;
    text-align: center;
}

.review-card__quote {
    font-family: var(--font-serif);
    font-size: 1.15rem;
    line-height: 1.55;
    color: var(--charcoal);
    margin: 0 0 1.75rem;
    max-width: 760px;
    width: 100%;
}

.review-card__quote::before { content: "\201C"; }
.review-card__quote::after  { content: "\201D"; }

.review-card__meta {
    display: flex;
    align-items: baseline;
    justify-content: space-between;
    gap: 1rem;
    max-width: 760px;
    width: 100%;
}

.review-card__name {
/*    font-weight: 600;*/
    color: var(--charcoal);
    font-family: var(--font-body);
    font-size: var(--text-sm);
    text-align: left;
}

.review-card__location {
    color: var(--muted);
    font-size: 0.9rem;
    font-weight: 400;
    margin-left: 0.4rem;
}

.review-card__stars {
    flex: 0 0 auto;
    color: var(--gold);
    font-size: 0.95rem;
    letter-spacing: 0.12em;
    white-space: nowrap;
}

.reviews-carousel__arrow {
    position: absolute;
    top: 50%;
    transform: translateY(-50%);
    z-index: 3;
    width: 46px;
    height: 46px;
    border: 1px solid var(--border);
    border-radius: 50%;
    background: var(--bg-white);
    color: var(--charcoal);
    font-size: 0.95rem;
    cursor: pointer;
    box-shadow: 0 6px 18px rgba(20, 30, 40, 0.12);
    transition: background var(--transition), color var(--transition);
}

@media (hover: hover) and (pointer: fine) {
    .reviews-carousel__arrow:hover {
        background: var(--sage);
        color: #fff;
    }
}

.reviews-carousel__arrow--prev { left: 0.6rem; }
.reviews-carousel__arrow--next { right: 0.6rem; }

.reviews-carousel__dots {
    display: flex;
    justify-content: center;
    gap: 0.6rem;
    margin-top: 2.25rem;
}

.reviews-carousel__dot {
    width: 8px;
    height: 8px;
    padding: 0;
    border: none;
    border-radius: 50%;
    background: rgba(90, 106, 122, 0.3);
    cursor: pointer;
    transition: background var(--transition), transform var(--transition);
}

.reviews-carousel__dot.is-active {
    background: var(--sage-dark);
    transform: scale(1.35);
}

@media (max-width: 860px) {
    .review-card {
        width: clamp(260px, 80vw, 380px);
    }
    .reviews-carousel__arrow {
        width: 40px;
        height: 40px;
    }
    .reviews-carousel__arrow--prev { left: 0.25rem; }
    .reviews-carousel__arrow--next { right: 0.25rem; }
}

@media (max-width: 600px) {
    .reviews-carousel__dots {
        display: none;
    }
}

/* ============================================================
   MY MOVE (customer sale/purchase progress)
   ============================================================ */
.account-back {
    display: inline-flex;
    align-items: center;
    gap: 0.5rem;
    color: var(--mid);
    font-size: 0.92rem;
    margin-bottom: 1rem;
    text-decoration: none;
}
.account-back:hover { color: var(--charcoal); }

.account-manage__group {
    display: block;
    margin: 1rem 0 0.35rem;
    padding-top: 0.75rem;
    border-top: 1px solid var(--border);
    text-transform: uppercase;
    letter-spacing: 0.18em;
    font-size: 0.68rem;
    color: var(--muted);
}

.move-list {
    display: grid;
    gap: 1.25rem;
}

.move-card {
    display: block;
    background: var(--bg-white);
    border: 1px solid var(--border);
    border-radius: var(--radius);
    padding: 1.5rem 1.75rem;
    text-decoration: none;
    color: inherit;
    transition: box-shadow var(--transition), transform var(--transition);
}
.move-card:hover {
    box-shadow: 0 12px 30px rgba(20,30,40,0.1);
    transform: translateY(-2px);
}

.move-card__top {
    display: flex;
    justify-content: space-between;
    align-items: center;
    gap: 1rem;
    margin-bottom: 0.5rem;
}

.move-card__type {
    display: inline-block;
    padding: 0.2rem 0.7rem;
    border-radius: 100px;
    font-size: 0.72rem;
    letter-spacing: 0.1em;
    text-transform: uppercase;
    background: var(--sage-pale);
    color: var(--sage-dark);
}
.move-card__type--purchase { background: #ece6da; color: var(--gold); }

.move-card__badge {
    font-size: 0.8rem;
    color: var(--mid);
}
.move-card__badge--done { color: var(--sage-dark); font-weight: 600; }

.move-card__address {
    font-family: var(--font-serif);
    font-size: 1.5rem;
    font-weight: 400;
    color: var(--charcoal);
    margin: 0.25rem 0;
}

.move-card__status { color: var(--mid); font-size: 0.95rem; margin-bottom: 0.75rem; }

.move-progress { display: flex; align-items: center; gap: 0.75rem; margin: 0.75rem 0; }
.move-progress__bar {
    flex: 1;
    height: 6px;
    border-radius: 100px;
    background: var(--sage-pale);
    overflow: hidden;
}
.move-progress__bar span {
    display: block;
    height: 100%;
    background: var(--sage-dark);
    border-radius: 100px;
}
.move-progress__label { font-size: 0.82rem; color: var(--muted); white-space: nowrap; }

.move-card__cta {
    display: inline-flex;
    align-items: center;
    gap: 0.5rem;
    color: var(--sage-dark);
    font-size: 0.9rem;
    margin-top: 0.5rem;
}

.move-detail__head { margin-bottom: 1.5rem; }
.move-detail__status { color: var(--mid); }

.move-facts {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(160px, 1fr));
    gap: 1rem 1.5rem;
    margin: 1.5rem 0 2rem;
    padding: 1.25rem 1.5rem;
    background: var(--bg-warm);
    border-radius: var(--radius);
}
.move-facts div { display: flex; flex-direction: column; }
.move-facts dt { font-size: 0.75rem; text-transform: uppercase; letter-spacing: 0.1em; color: var(--muted); }
.move-facts dd { color: var(--charcoal); font-size: 1.05rem; }

.move-section { margin-top: 2.5rem; }
.move-section__title {
    font-family: var(--font-serif);
    font-size: 1.6rem;
    font-weight: 400;
    color: var(--charcoal);
    margin-bottom: 0.4rem;
}
.move-section__intro { color: var(--muted); font-size: 0.92rem; margin-bottom: 1.25rem; }
.move-empty { color: var(--muted); font-style: italic; }

/* Progress timeline */
.move-timeline { list-style: none; padding: 0; margin: 0; }
.move-timeline__item {
    position: relative;
    display: flex;
    gap: 1.1rem;
    padding-bottom: 1.75rem;
}
.move-timeline__item::before {
    content: "";
    position: absolute;
    left: 13px;
    top: 28px;
    bottom: -4px;
    width: 2px;
    background: var(--border);
}
.move-timeline__item:last-child::before { display: none; }

.move-timeline__marker {
    position: relative;
    z-index: 1;
    flex: 0 0 auto;
    width: 28px;
    height: 28px;
    border-radius: 50%;
    border: 2px solid var(--border);
    background: var(--bg-white);
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 0.75rem;
    color: #fff;
}
.move-timeline__item.is-complete .move-timeline__marker {
    background: var(--sage-dark);
    border-color: var(--sage-dark);
}
.move-timeline__item.is-current .move-timeline__marker {
    border-color: var(--sage-dark);
    box-shadow: 0 0 0 4px var(--sage-pale);
}

.move-timeline__body { flex: 1; padding-top: 0.15rem; }
.move-timeline__row {
    display: flex;
    justify-content: space-between;
    align-items: baseline;
    gap: 1rem;
    flex-wrap: wrap;
}
.move-timeline__heading {
    font-family: var(--font-body);
    font-size: 1.05rem;
    font-weight: 600;
    color: var(--charcoal);
    margin: 0;
}
.move-timeline__item.is-pending .move-timeline__heading { color: var(--muted); font-weight: 400; }
.move-timeline__date { font-size: 0.85rem; color: var(--muted); }
.move-timeline__date--current { color: var(--sage-dark); font-weight: 600; }
.move-timeline__detail { color: var(--mid); font-size: 0.95rem; margin-top: 0.25rem; }

/* Communications log */
.comm-log { list-style: none; padding: 0; margin: 0; }
.comm-log__item {
    display: flex;
    gap: 1rem;
    padding: 1rem 0;
    border-bottom: 1px solid var(--border);
}
.comm-log__item:last-child { border-bottom: none; }
.comm-log__icon {
    flex: 0 0 auto;
    width: 36px;
    height: 36px;
    border-radius: 50%;
    background: var(--sage-pale);
    color: var(--sage-dark);
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 0.9rem;
}
.comm-log__body { flex: 1; }
.comm-log__row {
    display: flex;
    justify-content: space-between;
    gap: 1rem;
    flex-wrap: wrap;
    align-items: baseline;
}
.comm-log__subject { font-weight: 600; color: var(--charcoal); }
.comm-log__date { font-size: 0.85rem; color: var(--muted); }
.comm-log__meta { font-size: 0.82rem; color: var(--muted); margin-top: 0.15rem; }
.comm-log__summary { color: var(--mid); font-size: 0.95rem; margin-top: 0.4rem; }

/* "Get in touch" / "end contract early" forms on My Move */
.move-request-form { max-width: 520px; margin-top: 1rem; }
.move-request-form__end-contract {
    margin-top: 1.75rem;
    padding-top: 1.5rem;
    border-top: 1px solid var(--border);
}
.move-request-form__end-contract > summary {
    cursor: pointer;
    font-weight: 600;
    color: var(--charcoal);
    list-style: none;
}
.move-request-form__end-contract > summary::-webkit-details-marker { display: none; }
.move-request-form__end-contract > summary::before {
    content: '+';
    display: inline-block;
    width: 1.1em;
    color: var(--mid);
}
.move-request-form__end-contract[open] > summary::before { content: '-'; }

.home-approach {
    background: var(--sage);
    padding: 3.5rem 2rem 6rem;
}

.home-approach__inner {
    max-width: 1180px;
    margin: 0 auto;
    display: grid;
    grid-template-columns: 290px 1fr 290px;
    gap: 0.5rem;
    align-items: stretch;
}

.home-approach__botanical {
    display: flex;
    align-items: flex-end;
    justify-content: center;
}

.home-approach__botanical img {
    width: 100%;
    max-width: 290px;
    height: auto;
    display: block;
    margin-bottom: -6rem;
}

.home-approach__botanical--flip img {
    transform: scaleX(-1);
}

.home-approach__content {
    text-align: center;
    max-width: 640px;
    margin: 0 auto;
}

.home-approach__content h2 {
    font-family: var(--font-serif);
    font-size: clamp(1.8rem, 3vw, 2.6rem);
    font-weight: 400;
    color: #fff;
    line-height: 1.25;
    margin-bottom: 1.5rem;
}

.home-approach__content p {
    font-size: var(--text);
    color: #fff;
    line-height: 1.85;
    margin-bottom: 2.5rem;
    text-align: center;
}

.home-approach__cta {
    display: inline-block;
    padding: 0.85rem 2.25rem;
    border: 1px solid rgba(255,255,255,0.6);
    color: #fff;
    font-size: 0.85rem;
    letter-spacing: 0.08em;
    border-radius: var(--radius);
    transition: all var(--transition);
}

.home-approach__cta:hover {
    background: rgba(255,255,255,0.12);
    border-color: rgba(255,255,255,0.9);
    color: #fff;
}

/* ── Homepage responsive ── */
@media (max-width: 1024px) {
    .home-approach__inner {
        grid-template-columns: 190px 1fr 190px;
    }

    .home-approach__botanical img {
        max-width: 190px;
    }
}

@media (max-width: 860px) {
    .home-search .property-search-widget {
        margin-top: -2rem;
    }

    .listing-search .property-search-widget {
        margin-top: -2rem;
    }

    .property-search-widget {
        padding: 1.5rem;
    }

    .property-search-widget__row--main {
        grid-template-columns: 1fr 1fr;
    }

    .property-search-widget__row--filters {
        grid-template-columns: 1fr 1fr;
    }

    .property-search-widget__submit {
        grid-column: 1 / -1;
    }

    .listing-toolbar {
        flex-direction: column;
        align-items: flex-start;
    }

    .home-intro__inner {
        grid-template-columns: 1fr;
        gap: 3rem;
    }

    .home-intro {
        padding: 4rem 2rem;
    }

    .home-intro__image img {
        aspect-ratio: 16 / 9;
    }

    .home-welcome__text {
        padding: 3rem 1.5rem;
    }

    .home-approach {
        padding: 3rem 2rem 4rem;
    }

    .home-approach__inner {
        grid-template-columns: 1fr;
    }

    .home-approach__botanical {
        display: none;
    }
}

@media (max-width: 480px) {
    .home-search {
        padding: 0 1.25rem;
    }

    .home-search .property-search-widget {
        margin-top: -1.5rem;
    }

    .listing-search {
        padding: 0 1.25rem;
    }

    .listing-search .property-search-widget {
        margin-top: -1.5rem;
    }

    .property-search-widget__row--main,
    .property-search-widget__row--filters {
        grid-template-columns: 1fr;
    }

    .home-hero {
        min-height: 78vh;
    }

    .home-hero__headline {
        font-size: clamp(1.6rem, 7vw, 2.4rem);
        margin-bottom: 2rem;
    }

    .home-presented {
        padding: 5rem 2rem;
    }

    .home-presented__actions {
        flex-direction: column;
        align-items: center;
    }
}

/* ============================================================
   BOOK A VALUATION
   ============================================================ */

/* Full-bleed modal over a background image: intro copy on the left, the
   form on the right, both inside one centred card. Self-contained (not
   reusing .account-page) so it can evolve independently of the auth pages. */
.valuation-modal {
    position: relative;
    overflow: hidden;
    background-color: var(--sage);
    padding: 4.5rem 1.5rem 5.5rem;
    display: flex;
    justify-content: center;
}

/* Background layer, drifted at 30% of scroll speed by the JS in site.js -
   the same gentle parallax as the account pages. Taller than the section
   and anchored with headroom so the drift never exposes the image edges. */
.valuation-modal__bg {
    position: absolute;
    left: 0;
    right: 0;
    top: -30%;
    height: 130%;
    z-index: 0;
    background-image: linear-gradient(rgba(20, 30, 40, 0.32), rgba(20, 30, 40, 0.32)), url('/images/Valuation.jpeg');
    background-size: cover;
    background-position: center;
    background-repeat: no-repeat;
    will-change: transform;
}

.valuation-modal__card {
    position: relative;
    z-index: 1;
    background: var(--bg-white);
    width: 100%;
    max-width: 940px;
    padding: 3rem 2.75rem 2.75rem;
    box-shadow: 0 10px 45px rgba(20, 30, 40, 0.10);
    border-radius: 6px;
    border-top: 3px solid var(--gold);
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 3rem;
    align-items: start;
}

@media (max-width: 900px) {
    .valuation-modal__card {
        grid-template-columns: 1fr;
        gap: 2rem;
        padding: 2.25rem 1.75rem 2rem;
    }

    .valuation-intro__title,
    .valuation-intro__subtitle {
        text-align: center;
    }
}

@media (max-width: 768px) {
    .valuation-modal {
        padding: 2.5rem 1.25rem 3.5rem;
    }
}

.valuation-intro__title {
    font-family: var(--font-serif);
    font-size: clamp(1.9rem, 3.2vw, 2.4rem);
    font-weight: 400;
    color: var(--black);
    line-height: 1.15;
    margin: 0 0 1rem;
}

.valuation-intro__lead {
    font-size: var(--text);
    color: var(--mid);
    margin-bottom: 0.5rem;
}

.valuation-intro__subtitle {
    color: var(--gold);
    margin-bottom: 0.5rem;
}

.valuation-intro__signature {
    font-style: italic;
    color: var(--mid);
    margin-bottom: 1.5rem;
}

.valuation-intro__alt {
    font-size: 0.95rem;
    color: var(--muted);
}

    .valuation-intro__alt a {
        color: var(--sage-dark);
        text-decoration: underline;
    }

.form-row--split {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 1.25rem;
}

/* The property-search-widget field/input/select/label look (green-on-hover
   dropdowns, 3.1rem-tall controls) reused for the valuation form; only the
   textarea needs its own rule since the shared selector doesn't cover it. */
.valuation-form .property-search-widget__field textarea {
    width: 100%;
    box-sizing: border-box;
    min-height: 6.5rem;
    padding: 0.75rem 0.9rem;
    border: 1px solid var(--border);
    border-radius: var(--radius);
    background: var(--bg-white);
    font-family: var(--font-body);
    font-size: 1rem;
    color: var(--charcoal);
    resize: vertical;
}

.valuation-form .property-search-widget__field textarea:focus {
    outline: 1px solid var(--sage);
}

/* Swapped in via fetch (site.js) once a request succeeds, replacing the
   two-column form layout with a single centered thank-you message. */
.valuation-modal__card--thanks {
    grid-template-columns: 1fr;
    justify-items: center;
}

.valuation-thanks {
    max-width: 560px;
    margin: 2rem auto;
    text-align: center;
}

.valuation-thanks:focus {
    outline: none;
}

.valuation-thanks__eyebrow {
    font-family: var(--font-eyebrow);
    font-size: clamp(1.3rem, 2.4vw, 1.6rem);
    color: var(--gold);
    margin-bottom: 0.75rem;
}

.valuation-thanks__lead {
    font-size: var(--text);
    color: var(--mid);
    line-height: 1.7;
    margin-bottom: 2rem;
}

.valuation-thanks__actions {
    display: flex;
    justify-content: center;
    gap: 1rem;
}

@media (max-width: 480px) {
    .form-row--split {
        grid-template-columns: 1fr;
    }

    .valuation-thanks__actions {
        flex-direction: column;
    }
}

/* ============================================================
   CONTENT PAGES (Our Story, Approach, Buying, Selling, Journal)
   ============================================================ */

/* ── Page hero: background image + centered title ── */
.page-hero {
    position: relative;
    min-height: 60vh;
    display: flex;
    align-items: center;
    justify-content: center;
    text-align: center;
    background: var(--black);
    background-size: cover;
    background-position: center bottom;
    background-repeat: no-repeat;
    overflow: hidden;
}

/* The hero paints no image of its own on the Journal page - the shared
   .journal-page__bg behind it (and the card grid below) shows through
   instead, so the same image runs uninterrupted behind everything. Its own
   ::after tint is dropped too, since the shared bg already carries a
   gradient the whole way down - otherwise the two overlays would create a
   visible seam where the hero's tint ends. */
.page-hero--transparent {
    position: relative;
    z-index: 1;
    background: none;
}

.page-hero--transparent::after {
    display: none;
}

/* Optional background layer, drifted by the JS in site.js as the page scrolls
   (same mechanic as the homepage hero). Taller than the hero, anchored at the
   bottom, so the drift never exposes an edge. Pages that set an inline
   background on .page-hero itself instead of adding this layer are unaffected. */
.page-hero__bg {
    position: absolute;
    left: 0;
    right: 0;
    top: -30%;
    height: 130%;
    z-index: 0;
    background-size: cover;
    background-position: center bottom;
    background-repeat: no-repeat;
    will-change: transform;
}

.page-hero::after {
    content: '';
    position: absolute;
    inset: 0;
    background: linear-gradient(to bottom, rgba(20,30,40,0.25), rgba(20,30,40,0.5));
}

.page-hero__content {
    position: relative;
    z-index: 1;
    max-width: 820px;
    padding: 5rem 2rem;
    color: #fff;
}

.page-hero__eyebrow {
    font-family: var(--font-eyebrow);
    font-size: clamp(1.5rem, 2.4vw, 1.9rem);
    letter-spacing: normal;
    text-transform: none;
    color: rgba(255,255,255,0.8);
    margin-bottom: 1rem;
}

/* Struggling to Sell: eyebrow sits below the title instead of above it,
   and reads as a normal sentence rather than a shouty uppercase label. */
.page-hero--struggling .page-hero__title {
    margin-bottom: 0.75rem;
}

.page-hero--struggling .page-hero__eyebrow {
    text-transform: none;
    letter-spacing: normal;
    margin-bottom: 0;
    margin-top: 0;
}

.page-hero__title {
    font-family: var(--font-serif);
    font-size: clamp(2.2rem, 4.5vw, 3.6rem);
    font-weight: 400;
    line-height: 1.15;
    margin-bottom: 1rem;
}

.page-hero__sub {
    font-size: clamp(1rem, 1.8vw, 1.25rem);
    line-height: 1.6;
    color: rgba(255,255,255,0.9);
    max-width: 640px;
    margin: 0 auto;
}

.page-hero__sub--italic {
    margin-top: 0.85rem;
    font-style: italic;
    font-size: 1rem;
    color: rgba(255,255,255,0.8);
}

/* ── Plain content section (white) ── */
.page-section {
    max-width: var(--max-width);
    margin: 0 auto;
    padding: 5rem 2rem;
}

.page-section__intro {
    text-align: center;
    max-width: 800px;
    margin: 0 auto 3rem;
}

.page-section__intro h2 {
    font-family: var(--font-serif);
    font-size: clamp(1.8rem, 3.2vw, 2.6rem);
    font-weight: 400;
    color: var(--black);
    margin-bottom: 1rem;
}

.page-section__intro p {
    color: var(--mid);
    line-height: 1.8;
    margin-bottom: 0.5rem;
}

/* ── Two-column text + image rows (Buying) ── */
.split-row {
    max-width: var(--max-width);
    margin: 0 auto;
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 3.5rem;
    align-items: start;
    padding: 4.5rem 2rem;
}

.split-row__media img {
    width: 100%;
    object-fit: cover;
    display: block;
    border-radius: 12px;
    transition: transform var(--transition), box-shadow var(--transition);
    will-change: transform;
}

.split-row__media img:hover {
    transform: translateY(-6px);
    box-shadow: 0 16px 34px rgba(20, 30, 40, 0.28);
}

.split-row__lead {
    font-family: var(--font-serif);
    font-size: clamp(1.3rem, 2.2vw, 1.7rem);
    color: var(--black);
    line-height: 1.4;
    margin: 0 0 1.5rem;
}

.split-row__text h2,
.split-row__text h3 {
    font-family: var(--font-serif);
    font-weight: 400;
    color: var(--black);
    font-size: 1.5rem;
    margin: 2rem 0 0.75rem;
}

.split-row__text p {
    color: var(--mid);
    line-height: 1.8;
    margin-bottom: 1rem;
}

.split-row--media-right .split-row__media {
    order: 2;
}

/* ── Feature card grid (Struggling to Sell: reasons + fresh-start steps) ── */
.feature-grid {
    max-width: var(--max-width);
    margin: 0 auto;
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(230px, 1fr));
    gap: 1.5rem;
    /* Default (stretch): every card in the row matches the tallest
       one's natural height - that's what makes them all equal. */
}

/* Tablet and below: swipe through the cards one at a time instead of stacking. */
@media (max-width: 1024px) {
    .feature-grid {
        display: flex;
        overflow-x: auto;
        scroll-snap-type: x mandatory;
        -webkit-overflow-scrolling: touch;
        margin: 0 -2rem;
        padding: 0 2rem 0.5rem;
        scroll-padding-left: 2rem;
    }

    .feature-card {
        flex: 0 0 82%;
        scroll-snap-align: start;
    }
}

@media (max-width: 480px) {
    .feature-card {
        flex-basis: 88%;
    }
}

.feature-card {
    display: flex;
    flex-direction: column;
    background: #fff;
    border: 1px solid var(--sage-pale);
    border-radius: 14px;
    overflow: hidden;
    text-align: left;
    transition: transform var(--transition), box-shadow var(--transition);
}

.feature-card:hover {
    transform: translateY(-6px);
    box-shadow: 0 16px 30px rgba(26, 37, 53, 0.12);
}

/* Image fills exactly half the card's height, bleeding to its rounded
   corners; the text below keeps the card's original padding. Cards
   auto-size to their tallest sibling's text, so there's no CSS-only
   way to make a child exactly 50% of that - the height here is a
   fallback for no-JS; site.js sets every card's image to match the
   longest body's natural height (so media + body come out even, and
   every card ends up the same total height) on load and resize. */
.feature-card__media {
    height: 220px;
    flex-shrink: 0;
}

.feature-card__media img {
    display: block;
    width: 100%;
    height: 100%;
    object-fit: cover;
}

.feature-card__body {
    flex: 1;
    padding: 2.1rem 1.85rem;
    overflow: hidden;
}

/* Number sits fixed top-left in every card; the paragraph wraps around it
   instead of the card centring its content (which made numbers land at
   different heights depending on how long each card's text was). */
.feature-card__body .journey-cards__num {
    float: left;
    margin: 0 0.9rem 0.4rem 0;
    line-height: 1;
}

.feature-card__body p {
    margin: 0;
}

.feature-card__icon {
    color: var(--gold);
    font-size: 1.5rem;
    margin-bottom: 1.1rem;
}

.feature-card__num {
    display: block;
    font-size: 0.82rem;
    letter-spacing: 0.2em;
    text-transform: uppercase;
    color: var(--gold);
    margin-bottom: 0.7rem;
}

.feature-card h3 {
    font-family: var(--font-serif);
    font-weight: 400;
    color: var(--black);
    font-size: 1.3rem;
    margin: 0 0 0.6rem;
}

.feature-card p {
    color: var(--mid);
    line-height: 1.7;
    margin: 0;
    font-size: 0.98rem;
}

/* Full-width sage band wrapping a centred .page-section (Struggling to Sell). */
.reasons-band {
    background: var(--sage);
}

.reasons-band .page-section__eyebrow {
    color: rgba(255, 255, 255, 0.85);
}

.reasons-band .page-section__intro h2 {
    color: #fff;
}

.reasons-band .page-section__intro p {
    color: rgba(255, 255, 255, 0.92);
}

/* Centred button row closing a .page-section__intro (white background, so the
   sage buttons rather than the on-sage ones). */
.page-section__actions {
    display: flex;
    gap: 1rem;
    justify-content: center;
    flex-wrap: wrap;
    margin-top: 2.25rem;
}

/* Section eyebrow above a centred intro */
.page-section__eyebrow {
    font-family: var(--font-eyebrow);
    font-size: 0.8rem;
    letter-spacing: normal;
    text-transform: none;
    color: var(--gold);
    margin-bottom: 1rem;
}

/* Contact page: "How to contact us" reads as a much bigger script headline. */
.contact-info-heading {
    font-size: clamp(2.4rem, 4.5vw, 3.4rem);
}

/* A quiet closing line under a group of cards */
.section-note {
    max-width: 640px;
    margin: 3rem auto 0;
    text-align: center;
    font-family: var(--font-serif);
    font-size: clamp(1.15rem, 2vw, 1.45rem);
    line-height: 1.5;
    color: var(--black);
}

/* ── Selling journey steps: white cards on a sage band, shown with the homepage
   photo-carousel mechanic (centre card, peeking neighbours, arrows, dots). ── */
.journey-cards__card {
    background: #fff;
    color: var(--charcoal);
    border-radius: 14px;
    padding: 1.7rem 1.8rem;
    box-shadow: 0 1px 2px rgba(26, 37, 53, 0.14);
    transition: transform 0.28s ease, box-shadow 0.28s ease;
}

.journey-cards__card:hover {
    transform: translateY(-6px);
    box-shadow: 0 16px 30px rgba(26, 37, 53, 0.20);
}

/* Optional photograph at the top of a journey card (Buying). It bleeds to the
   card's edges by cancelling the card's own padding, and keeps the card's top
   corner radius. */
.journey-cards__media {
    margin: -1.7rem -1.8rem 1.3rem;
    height: 300px;
    border-radius: 14px 14px 0 0;
    overflow: hidden;
    flex: 0 0 auto;
}

.journey-cards__media img {
    display: block;
    width: 100%;
    height: 100%;
    object-fit: cover;
}

/* Shorter on phones, where the card is clipped to a fixed height and the text
   needs the room it leaves behind. */
@media (max-width: 700px) {
    .journey-cards__media {
        height: 185px;
    }
}

.journey-cards__num {
    display: block;
    font-size: 0.82rem;
    letter-spacing: 0.2em;
    text-transform: uppercase;
    color: var(--gold);
    margin-bottom: 0.6rem;
}

.journey-cards__title {
    font-family: var(--font-serif);
    font-size: 1.35rem;
    font-weight: 400;
    line-height: 1.25;
    margin: 0 0 0.55rem;
    color: var(--black);
}

.journey-cards__desc {
    line-height: 1.72;
    color: var(--charcoal);
    margin: 0;
}

/* Sage band that holds the steps carousel. */
.photo-carousel--steps {
    background: var(--sage);
    padding: 4.5rem 0;
    /* Shared by the slide width and the viewport cap below, so the two can
       never drift apart. */
    --step-card-w: clamp(280px, 82vw, 560px);
    --step-card-gap: 1.5rem;
}

/* Opt-in (Buying): never more than three cards on screen. Without a cap, a wide
   monitor is simply wider than centre-plus-two-neighbours and slivers of the
   next cards creep in at both edges. Capping the viewport to exactly three
   cards centres it on the page and clips whatever sits beyond. overflow-x
   rather than overflow, so the cards' shadows are not sliced off top and
   bottom. */
.photo-carousel--three-up .photo-carousel__viewport {
    max-width: calc(var(--step-card-w) * 3 + var(--step-card-gap) * 2);
    margin-inline: auto;
    overflow-x: clip;
}

/* Equal-height cards so the peeking neighbours line up regardless of how much
   text each step holds. */
.photo-carousel--steps .photo-carousel__track {
    align-items: stretch;
    gap: var(--step-card-gap);
}

.photo-carousel--steps .photo-carousel__slide {
    display: flex;
    width: var(--step-card-w);
}

.photo-carousel--steps .journey-cards__card {
    flex: 1;
}

/* The "Read more" toggle is a phone-only affordance - on desktop every card is
   shown in full, so the button is not rendered at all. */
.journey-cards__more {
    display: none;
}

/* On phones the steps run from 70 to 200 words, so showing each in full made the
   cards wildly different heights - and matching them all to the tallest (Step 03)
   pushed even the short ones past a full screen. Instead every card is clipped to
   the same height and the longer ones offer a "Read more". The carousel viewport
   follows whichever card is centred (height set by site.js, see
   data-fit-active-height), so expanding one grows the band to suit. */
@media (max-width: 700px) {
    .photo-carousel--steps .photo-carousel__track,
    .photo-carousel--steps .photo-carousel__slide {
        align-items: flex-start;
    }

    /* One uniform collapsed height for every card. The explicit width matters:
       with flex-shrink off, an "auto" basis would size the card to its longest
       unbroken line instead of the slide, and the text would never wrap. */
    .photo-carousel--steps .journey-cards__card {
        flex: 0 0 auto;
        width: 100%;
        height: 27rem;
        display: flex;
        flex-direction: column;
        overflow: hidden;
        transition: height 0.45s cubic-bezier(0.4, 0, 0.2, 1);
    }

    .photo-carousel--steps .journey-cards__card.is-expanded {
        height: auto;
    }

    /* The text takes whatever room is left between the title and the button. */
    .photo-carousel--steps .journey-cards__desc {
        flex: 1 1 auto;
        overflow: hidden;
        min-height: 0;
    }

    /* Fade the last couple of lines out where the text is actually clipped, so
       it reads as "there is more" rather than a sentence cut mid-word. Only
       applied to cards JS has marked as overflowing. */
    .photo-carousel--steps .journey-cards__card[data-overflowing="true"]:not(.is-expanded) .journey-cards__desc {
        -webkit-mask-image: linear-gradient(to bottom, #000 72%, transparent 100%);
        mask-image: linear-gradient(to bottom, #000 72%, transparent 100%);
    }

    .photo-carousel--steps .journey-cards__card.is-expanded .journey-cards__desc {
        overflow: visible;
    }

    /* Shown only where the text is long enough to need it. */
    .photo-carousel--steps .journey-cards__card[data-overflowing="true"] .journey-cards__more {
        display: inline-flex;
        align-self: flex-start;
        flex: 0 0 auto;
        margin-top: 0.9rem;
        padding: 0;
        border: none;
        background: none;
        cursor: pointer;
        font-family: var(--font-body);
        font-size: 0.95rem;
        letter-spacing: 0.04em;
        color: var(--sage-dark);
        border-bottom: 1px solid var(--sage);
        line-height: 1.6;
    }

    /* Clip the neighbours, which can be taller than the card on show. */
    .photo-carousel--steps .photo-carousel__viewport {
        overflow: hidden;
        transition: height 0.6s cubic-bezier(0.4, 0, 0.2, 1);
    }
}

@media (max-width: 700px) and (prefers-reduced-motion: reduce) {
    .photo-carousel--steps .photo-carousel__viewport,
    .photo-carousel--steps .journey-cards__card {
        transition: none;
    }
}

/* White dots to read against the sage band. */
.photo-carousel--steps .photo-carousel__dot {
    background: rgba(255, 255, 255, 0.45);
}

.photo-carousel--steps .photo-carousel__dot.is-active {
    background: #fff;
}

/* ── Selling: personal closing note from the founder, inside the sage band
   just beneath the steps carousel ── */
.selling-close {
    max-width: 680px;
    margin: 3.5rem auto 0;
    padding: 0 2rem;
    text-align: center;
    color: #fff;
}

.selling-close__lead {
    font-size: clamp(1.9rem, 3vw, 2.4rem);
    line-height: 1.35;
    color: #fff;
    margin-bottom: 1.25rem;
}

.selling-close__body {
    line-height: 1.85;
    color: rgba(255, 255, 255, 0.92);
    margin-bottom: 1.75rem;
}

.selling-close__signoff {
    font-style: italic;
    color: rgba(255, 255, 255, 0.8);
    margin-bottom: 0.35rem;
}

.selling-close__name {
    font-family: var(--font-serif);
    font-size: 1.4rem;
    color: #fff;
}

/* ── Numbered step list (Selling 1-7), alternating media ── */
.step {
    max-width: 1100px;
    margin: 0 auto;
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 3rem;
    align-items: center;
    padding: 3.5rem 2rem;
}

.step__media img {
    width: 100%;
    aspect-ratio: 4 / 3;
    object-fit: cover;
    display: block;
    border-radius: 12px;
}

.step:nth-child(even) .step__media {
    order: 2;
}

.step__num {
    font-family: var(--font-serif);
    font-size: 1rem;
    color: var(--sage-dark);
    letter-spacing: 0.05em;
    margin-bottom: 0.5rem;
}

.step__text h2 {
    font-family: var(--font-serif);
    font-weight: 400;
    font-size: clamp(1.5rem, 2.6vw, 2rem);
    color: var(--black);
    margin-bottom: 0.75rem;
}

.step__lead {
    font-style: italic;
    color: var(--mid);
    margin-bottom: 1rem;
}

.step__text p {
    color: var(--mid);
    line-height: 1.8;
    margin-bottom: 1rem;
}

/* ── Team grid (Our Story) ── */
.team-grid {
    max-width: var(--max-width);
    margin: 0 auto;
    padding: 1rem 2rem 5rem;
    display: grid;
    grid-template-columns: repeat(6, 1fr);
    gap: 3rem 2rem;
    justify-items: center;
    align-items: start;
}

.team-card {
    text-align: center;
    max-width: 280px;
    /* Three per row: each card spans two of the six columns. */
    grid-column: span 2;
}

/* Second row (cards 4 & 5) shifts one column inward so the two photos nestle
   between the three above, like Olympic rings. */
.team-card:nth-child(4) {
    grid-column: 2 / span 2;
}

.team-card:nth-child(5) {
    grid-column: 4 / span 2;
}

.team-card__photo {
    width: 220px;
    height: 220px;
    border-radius: 50%;
    overflow: hidden;
    margin: 0 auto 1.25rem;
    background: var(--sage-pale);
}

.team-card__photo img {
    width: 100%;
    height: 100%;
    object-fit: cover;
    display: block;
}

.team-card__name {
    font-family: var(--font-serif);
    font-size: 1.25rem;
    color: var(--black);
    margin-bottom: 0.35rem;
}

.team-card__role {
    color: var(--charcoal);
    font-size: var(--text-sm);
    margin-bottom: 0.25rem;
}

.team-card__note {
    color: var(--muted);
    font-size: var(--text-sm);
    font-style: italic;
    line-height: 1.5;
}

/* Interactive team cards - gentle lift + image zoom, matching the property cards */
.team-card {
    transition: transform var(--transition);
}

.team-card:hover {
    transform: translateY(-6px);
}

.team-card__photo img {
    transition: transform 0.6s ease;
    will-change: transform;
}

.team-card:hover .team-card__photo img {
    transform: scale(1.08);
}

/* ── Our Story: bottom-left hero variant ── */
.home-hero--story {
    align-items: flex-end;
    justify-content: flex-start;
    text-align: left;
    min-height: 62vh;
}

.home-hero--story .home-hero__content {
    width: 100%;
    max-width: var(--max-width);
    margin: 0 auto;
    padding: 3rem 3rem 3.5rem;
}

.home-hero--story .home-hero__headline {
    margin-bottom: 0;
    font-size: clamp(2rem, 5vw, 3.4rem);
    text-shadow: 0 2px 24px rgba(0, 0, 0, 0.4);
}

/* ── Our Story: sage showcase - text column on the left, parallax slideshow
   on the right (images cross-fade and drift gently as you scroll). ── */
.story-showcase {
    background: var(--sage);
    color: #fff;
    overflow: hidden;
}

.story-showcase__inner {
    max-width: var(--max-width);
    margin: 0 auto;
    display: grid;
    grid-template-columns: 1.05fr 0.95fr;
    gap: 4rem;
    align-items: stretch;
    padding: 4.5rem 2rem;
}

.story-showcase__text {
    align-self: center;
}

.story-showcase__eyebrow {
    font-family: var(--font-eyebrow);
    text-transform: none;
    letter-spacing: normal;
    font-size: 0.72rem;
    color: rgba(255, 255, 255, 0.75);
    margin-bottom: 0.9rem;
}

.story-showcase__text h1 {
    font-family: var(--font-serif);
    font-weight: 400;
    font-size: clamp(1.9rem, 3.2vw, 2.7rem);
    line-height: 1.2;
    margin-bottom: 1rem;
}

.story-showcase__lead {
    font-size: 1.15rem;
    color: rgba(255, 255, 255, 0.9);
    margin-bottom: 1.25rem;
}

.story-showcase__text p {
    line-height: 1.85;
    margin-bottom: 1rem;
    color: rgba(255, 255, 255, 0.92);
}

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

.story-showcase__media {
    position: relative;
    overflow: hidden;
    border-radius: 12px;
    min-height: 480px;
    transition: transform var(--transition), box-shadow var(--transition);
    will-change: transform;
}

.story-showcase__media:hover {
    transform: translateY(-6px);
    box-shadow: 0 16px 34px rgba(20, 30, 40, 0.28);
}

/* Taller than the panel so the JS parallax has room to drift. */
.story-showcase__slides {
    position: absolute;
    left: 0;
    right: 0;
    top: -12%;
    height: 124%;
    will-change: transform;
}

.story-showcase__slide {
    position: absolute;
    inset: 0;
    background-size: cover;
    background-position: center;
    background-repeat: no-repeat;
    opacity: 0;
    transition: opacity 1.2s ease;
}

.story-showcase__slide.is-active {
    opacity: 1;
}

/* ── Our Story: full-width video banner with parallax drift ── */
.story-video {
    position: relative;
    overflow: hidden;
    height: 60vh;
    min-height: 340px;
    background: var(--black);
}

.story-video__media {
    position: absolute;
    left: 0;
    right: 0;
    top: -20%;
    width: 100%;
    height: 140%;
    object-fit: cover;
    will-change: transform;
}

/* ── Centered CTA band (white buttons on sage) ── */
.cta-band {
    background: var(--sage);
    color: #fff;
    text-align: center;
    padding: 5rem 2rem;
}

.cta-band__inner {
    max-width: 720px;
    margin: 0 auto;
}

.cta-band h2 {
    font-family: var(--font-serif);
    font-weight: 400;
    font-size: clamp(1.8rem, 3.2vw, 2.6rem);
    margin-bottom: 1.25rem;
}

.cta-band p {
    line-height: 1.8;
    color: rgba(255,255,255,0.92);
    margin-bottom: 1.25rem;
}

.cta-band__actions {
    margin-top: 1.75rem;
    display: flex;
    gap: 1rem;
    justify-content: center;
    flex-wrap: wrap;
}

/* Slim centred divider under a band's opening line */
.cta-band__rule {
    display: block;
    width: 56px;
    height: 1px;
    background: rgba(255, 255, 255, 0.45);
    margin: 0 auto 1.75rem;
}

/* Emphasised single-line statement within a sage band */
.cta-band__accent {
    font-family: var(--font-eyebrow);
    font-style: italic;
    font-size: clamp(1.5rem, 2.4vw, 1.9rem);
    color: #fff !important;
    margin: 1rem 0 !important;
}

/* Split variant: text column on the left, image on the right. */
.cta-band--split {
    text-align: center;
}

.cta-band__split {
    max-width: var(--max-width);
    margin: 0 auto;
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 3.5rem;
    align-items: stretch;
}

.cta-band--split .cta-band__inner {
    max-width: none;
    margin: 0;
}

/* Divider: a shorter rule, trimmed from both ends and centred in the column. */
.cta-band--split .cta-band__rule {
    width: 68%;
}

/* The media frame stretches to the text column's height; the image is
   absolutely positioned so it conforms to that height (cropping via cover)
   instead of dictating its own taller, natural size. */
.cta-band__media {
    position: relative;
    border-radius: 12px;
    overflow: hidden;
    transition: transform var(--transition), box-shadow var(--transition);
    will-change: transform;
}

.cta-band__media:hover {
    transform: translateY(-6px);
    box-shadow: 0 16px 34px rgba(20, 30, 40, 0.28);
}

.cta-band__media img {
    position: absolute;
    inset: 0;
    width: 100%;
    height: 100%;
    object-fit: cover;
    display: block;
}

@media (max-width: 768px) {
    .cta-band__split {
        grid-template-columns: 1fr;
        gap: 2rem;
    }

    /* Stacked: no text column to match, so give the frame its own shape. */
    .cta-band__media {
        aspect-ratio: 4 / 3;
    }

    /* Buying page only (see Buying.cshtml) - the intro photo adds height
       without much value once stacked below the text on a phone screen.
       Hiding it removes its grid row/gap too, so the section just ends
       after the text instead of leaving a gap where the image was. */
    .cta-band--hide-media-mobile .cta-band__media {
        display: none;
    }
}

.btn-on-sage {
    display: inline-block;
    padding: 0.85rem 2rem;
    border: 1px solid rgba(255,255,255,0.7);
    color: #fff;
    font-size: 0.85rem;
    letter-spacing: 0.06em;
    border-radius: var(--radius);
    transition: all var(--transition);
}

.btn-on-sage:hover {
    background: rgba(255,255,255,0.14);
    border-color: #fff;
    color: #fff;
}

.btn-on-sage--solid {
    background: #fff;
    color: var(--charcoal);
    border-color: #fff;
}

.btn-on-sage--solid:hover {
    background: #f0ede7;
    color: var(--charcoal);
}

/* ── Contact band (Our Story sign-off): text + direct contact details ── */
.contact-band {
    background: var(--sage);
    color: #fff;
}

.contact-band__inner {
    max-width: var(--max-width);
    margin: 0 auto;
    padding: 5rem 2rem;
    display: grid;
    grid-template-columns: 1.05fr 0.95fr;
    gap: 4.5rem;
    align-items: center;
}

.contact-band__eyebrow {
    font-family: var(--font-eyebrow);
    text-transform: none;
    letter-spacing: normal;
    font-size: 0.72rem;
    color: rgba(255, 255, 255, 0.75);
    margin-bottom: 1rem;
}

.contact-band__text h2 {
    font-family: var(--font-serif);
    font-weight: 400;
    font-size: clamp(1.9rem, 3.2vw, 2.7rem);
    line-height: 1.2;
    margin-bottom: 1rem;
}

.contact-band__text > p {
    line-height: 1.85;
    color: rgba(255, 255, 255, 0.92);
    max-width: 46ch;
}

.contact-band__actions {
    margin-top: 2rem;
    display: flex;
    gap: 1rem;
    flex-wrap: wrap;
}

.contact-band__details {
    display: flex;
    flex-direction: column;
    gap: 1.5rem;
    padding-left: 4.5rem;
    border-left: 1px solid rgba(255, 255, 255, 0.25);
}

.contact-band__detail-list {
    display: flex;
    flex-direction: column;
    gap: 1.5rem;
}

.contact-detail {
    display: flex;
    align-items: center;
    gap: 1.15rem;
    color: #fff;
    transition: opacity var(--transition);
}

a.contact-detail:hover {
    color: #fff;
    opacity: 0.82;
}

.contact-detail__icon {
    flex-shrink: 0;
    width: 48px;
    height: 48px;
    border-radius: 50%;
    border: 1px solid rgba(255, 255, 255, 0.4);
    display: inline-flex;
    align-items: center;
    justify-content: center;
    font-size: 1.05rem;
}

.contact-detail__label {
    display: block;
    font-size: 0.7rem;
    letter-spacing: 0.14em;
    color: rgba(255, 255, 255, 0.7);
    margin-bottom: 0.2rem;
}

.contact-detail__value {
    font-family: var(--font-serif);
    font-size: 1.25rem;
    line-height: 1.3;
}

/* ── Compliance / regulatory note (Selling) ── */
.compliance-note {
    max-width: 720px;
    margin: 0 auto;
    padding: 3.5rem 2rem 5rem;
    text-align: center;
}

.compliance-note img {
    height: 70px;
    width: auto;
    margin-bottom: 1.5rem;
}

.compliance-note p {
    color: var(--muted);
    line-height: 1.7;
    font-size: var(--text-sm);
}

/* ── Journal index: one continuous background image runs behind the hero and
   the card grid; white cards float on top of it. ── */
.journal-page {
    position: relative;
}

.journal-page__bg {
    position: absolute;
    inset: 0;
    z-index: 0;
    /* Flat, uniform tint over the whole image (hero and card grid alike) -
       a top-to-bottom gradient here would leave the hero darker than the
       grid below it, creating a visible seam where the strength changes. */
    background-image: linear-gradient(rgba(20,30,40,0.48), rgba(20,30,40,0.48)), url('/images/kitchen.jpg');
    background-size: cover;
    background-position: center;
    background-repeat: no-repeat;
}

.journal-grid {
    position: relative;
    z-index: 1;
    padding: 4.5rem 2rem 5.5rem;
}

.journal-grid__inner {
    max-width: var(--max-width);
    margin: 0 auto;
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    gap: 2.5rem;
}

.journal-card {
    text-align: center;
    color: var(--charcoal);
    background: var(--bg-white);
    border-radius: 14px;
    padding: 2.25rem 2rem 2rem;
    box-shadow: 0 12px 32px rgba(20,30,40,0.28);
    display: flex;
    flex-direction: column;
    align-items: center;
    transition: transform 0.28s ease, box-shadow 0.28s ease;
}

.journal-card:hover {
    transform: translateY(-6px);
    box-shadow: 0 18px 40px rgba(20,30,40,0.34);
}

.journal-card__date {
    font-size: 0.95rem;
    color: var(--muted);
    margin-bottom: 1.25rem;
}

.journal-card__title {
    font-family: var(--font-serif);
    font-size: clamp(1.4rem, 2vw, 1.8rem);
    font-weight: 400;
    line-height: 1.25;
    margin-bottom: 1.25rem;
    color: var(--black);
}

.journal-card__summary {
    color: var(--mid);
    line-height: 1.7;
    margin-bottom: 1.25rem;
    max-width: 320px;
}

.journal-card__more {
    margin-top: auto;
    color: var(--sage-dark);
    text-decoration: underline;
    text-underline-offset: 3px;
    font-size: 0.95rem;
}

.journal-card__more:hover {
    color: var(--charcoal);
}

.journal-empty {
    text-align: center;
    color: var(--charcoal);
    max-width: 520px;
    margin: 0 auto;
    line-height: 1.7;
    background: var(--bg-white);
    border-radius: 14px;
    padding: 2.5rem;
    box-shadow: 0 12px 32px rgba(20,30,40,0.28);
}

/* ── Journal single post ── */
.journal-post {
    max-width: 760px;
    margin: 0 auto;
    padding: 4rem 2rem 5rem;
}

.journal-post__cover {
    width: 100%;
    max-height: 460px;
    object-fit: cover;
    border-radius: 12px;
    margin-bottom: 2.5rem;
    display: block;
}

.journal-post__date {
    color: var(--muted);
    letter-spacing: 0.08em;
    text-transform: uppercase;
    font-size: 0.8rem;
    margin-bottom: 0.75rem;
}

.journal-post__title {
    font-family: var(--font-serif);
    font-weight: 400;
    font-size: clamp(2rem, 4vw, 3rem);
    color: var(--black);
    line-height: 1.15;
    margin-bottom: 2rem;
}

.journal-post__body p {
    color: var(--charcoal);
    line-height: 1.9;
    margin-bottom: 1.25rem;
    font-size: var(--text);
}

.journal-post__body h2,
.journal-post__body h3 {
    font-family: var(--font-serif);
    font-weight: 400;
    color: var(--black);
    font-size: 1.6rem;
    margin: 2rem 0 1rem;
}

.journal-post__back {
    display: inline-block;
    margin-top: 2rem;
    color: var(--sage-dark);
    text-decoration: underline;
    text-underline-offset: 3px;
}

/* ── Content-page responsive ── */
@media (max-width: 900px) {
    .split-row,
    .step,
    .story-showcase__inner,
    .journal-grid__inner {
        grid-template-columns: 1fr;
    }

    /* Our Story: the slideshow becomes a full-bleed background with the text
       overlaid on top (mobile + iPad portrait) instead of stacking beside it. */
    .story-showcase__inner {
        position: relative;
    }

    .story-showcase__media {
        position: absolute;
        inset: 0;
        z-index: 0;
        min-height: 0;
        border-radius: 0;
    }

    /* No hover lift when it's acting as a background. */
    .story-showcase__media:hover {
        transform: none;
        box-shadow: none;
    }

    /* Scrim so the white text stays legible over the photo. */
    .story-showcase__inner::before {
        content: '';
        position: absolute;
        inset: 0;
        z-index: 1;
        background: linear-gradient(rgba(26, 37, 53, 0.5), rgba(26, 37, 53, 0.62));
        pointer-events: none;
    }

    .story-showcase__text {
        position: relative;
        z-index: 2;
    }

    .split-row--media-right .split-row__media,
    .step:nth-child(even) .step__media {
        order: 0;
    }

    .contact-band__inner {
        grid-template-columns: 1fr;
        gap: 3rem;
        padding: 4rem 2rem;
    }

    /* Centre the "We'd love to hear your story" band on mobile. */
    .contact-band__text {
        text-align: center;
    }

    .contact-band__text > p {
        margin-left: auto;
        margin-right: auto;
    }

    .contact-band__actions {
        justify-content: center;
    }

    .contact-band__details {
        padding-left: 0;
        padding-top: 2.5rem;
        border-left: none;
        border-top: 1px solid rgba(255, 255, 255, 0.25);
        align-items: center;
    }

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

    /* Drop the Olympic-ring column spans below desktop; cards flow normally. */
    .team-card,
    .team-card:nth-child(4) {
        grid-column: auto;
    }

    /* Orphan 5th card (Millie) centres across the full two-column row. */
    .team-card:nth-child(5) {
        grid-column: 1 / -1;
    }

    .journal-grid__inner {
        gap: 3rem;
    }
}

/* Tablet and desktop: the two contact details sit side by side wherever
   there's room; they only stack on narrow phones (see max-width: 560px). */
@media (min-width: 561px) {
    .contact-band__detail-list {
        flex-direction: row;
        flex-wrap: wrap;
        gap: 2rem 3rem;
    }
}

/* iPad / tablet: centre the side-by-side pair (desktop keeps them left-aligned
   in the sidebar). */
@media (min-width: 561px) and (max-width: 900px) {
    .contact-band__detail-list {
        justify-content: center;
    }
}

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

    /* Keep the two details stacked, but align their icons one above the other:
       the list shrinks to its content width (centred by the parent) while the
       rows left-align within it. */
    .contact-band__detail-list {
        align-items: flex-start;
    }
}

/* ============================================================
   ACCOUNTS  (login / register / password flows / profile)
   ============================================================ */

/* Header "Personal Account" link */
.nav-account {
    display: inline-flex;
    align-items: center;
    gap: 0.45rem;
    font-size: 0.9rem;
    letter-spacing: 0.02em;
    color: var(--charcoal);
    white-space: nowrap;
    transition: color var(--transition), transform var(--transition);
}

.nav-account:hover {
    transform: translateY(-2px);
}

.nav-account span {
    max-width: 140px;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}

.nav-account:hover {
    color: var(--sage-dark);
}

.nav-account i {
    font-size: 1rem;
    color: var(--sage);
    transition: color var(--transition);
}

.nav-account:hover i {
    color: var(--sage-dark);
}

.account-page {
    position: relative;
    overflow: hidden;
    background-color: var(--sage);
    padding: 4.5rem 1.5rem 5.5rem;
    display: flex;
    justify-content: center;
}

/* Background layer, drifted at 30% of scroll speed by the JS in site.js - the
   same gentle parallax as the homepage hero. Taller than the section and
   anchored with headroom so the drift never exposes the image edges. */
.account-page__bg {
    position: absolute;
    left: 0;
    right: 0;
    top: -30%;
    height: 130%;
    z-index: 0;
    background-image: linear-gradient(rgba(20,30,40,0.32), rgba(20,30,40,0.32)), url('/images/Account.jpg');
    background-size: cover;
    background-position: center;
    background-repeat: no-repeat;
    will-change: transform;
}

.account-page__card {
    position: relative;
    z-index: 1;
    background: var(--bg-white);
    width: 100%;
    max-width: 460px;
    padding: 3rem 2.75rem 2.75rem;
    box-shadow: 0 10px 45px rgba(20,30,40,0.10);
    border-radius: 6px;
    border-top: 3px solid var(--gold);
}

.account-page__card--wide {
    max-width: 560px;
}

/* Two-column layout (Contact Us): free-form text and the form side by side,
   both inside the one white card/modal. */
.account-page__card--split {
    max-width: 940px;
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 3rem;
    align-items: start;
}

.account-page__card--split .account-page__title,
.account-page__card--split .account-page__subtitle {
    text-align: left;
}

@media (max-width: 900px) {
    .account-page__card--split {
        grid-template-columns: 1fr;
        gap: 2rem;
    }

    .account-page__card--split .account-page__title,
    .account-page__card--split .account-page__subtitle {
        text-align: center;
    }
}

.account-page__title {
    font-family: var(--font-serif);
    font-size: clamp(1.7rem, 3vw, 2.1rem);
    font-weight: 400;
    color: var(--black);
    text-align: center;
    margin: 0 0 0.4rem;
}

.account-page__subtitle {
    text-align: center;
    font-size: 0.95rem;
    color: var(--muted);
    margin: 0 0 1.75rem;
}

.account-page__subtitle a {
    color: var(--sage-dark);
    text-decoration: underline;
}

/* Social sign-in buttons */
.account-social {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 0.75rem;
    margin-bottom: 1.4rem;
}

.account-social__btn {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: 0.55rem;
    padding: 0.7rem 0.5rem;
    background: var(--bg-white);
    border: 1px solid var(--border);
    border-radius: var(--radius);
    font-family: 'Open Sans', sans-serif;
    font-size: 0.8rem;
    letter-spacing: 0.06em;
    text-transform: uppercase;
    color: var(--charcoal);
    cursor: pointer;
    transition: border-color var(--transition), color var(--transition), background var(--transition);
}

.account-social__btn:hover {
    border-color: var(--sage);
    color: var(--sage-dark);
    background: var(--sage-pale);
}

.account-social__btn i {
    font-size: 1rem;
    color: var(--sage);
}

/* If only one provider is configured, let it span the row */
.account-social:has(.account-social__btn:only-child) {
    grid-template-columns: 1fr;
}

.account-divider {
    display: flex;
    align-items: center;
    text-align: center;
    color: var(--muted);
    font-size: 0.8rem;
    margin: 0 0 1.4rem;
}

.account-divider::before,
.account-divider::after {
    content: '';
    flex: 1;
    height: 1px;
    background: var(--border);
}

.account-divider span {
    padding: 0 0.9rem;
    white-space: nowrap;
}

/* Forms */
.account-form {
    display: flex;
    flex-direction: column;
    gap: 1.1rem;
}

.account-field {
    display: flex;
    flex-direction: column;
    gap: 0.4rem;
}

.account-field label {
    font-family: 'Open Sans', sans-serif;
    font-size: 0.82rem;
    font-weight: 600;
    letter-spacing: 0.02em;
    color: var(--charcoal);
}

.account-input {
    width: 100%;
    padding: 0.75rem 0.9rem;
    font-family: 'Open Sans', sans-serif;
    font-size: 0.95rem;
    color: var(--black);
    background: var(--bg-white);
    border: 1px solid var(--border);
    border-radius: var(--radius);
    transition: border-color var(--transition), box-shadow var(--transition);
}

.account-input:focus {
    outline: none;
    border-color: var(--sage);
    box-shadow: 0 0 0 3px rgba(138,153,141,0.18);
}

.account-input:disabled {
    background: var(--bg-warm);
    color: var(--muted);
    cursor: not-allowed;
}

.account-field__error {
    font-family: 'Open Sans', sans-serif;
    font-size: 0.8rem;
    color: #b4342f;
}

.account-field__hint {
    font-family: 'Open Sans', sans-serif;
    font-size: 0.78rem;
    color: var(--muted);
}

.account-form__summary:not(:empty) {
    background: #fbeceb;
    border: 1px solid #e7c3c0;
    border-radius: var(--radius);
    padding: 0.7rem 0.9rem;
    font-family: 'Open Sans', sans-serif;
    font-size: 0.85rem;
    color: #a5302b;
}

.account-form__summary ul {
    margin: 0;
    padding-left: 1.1rem;
}

/* Friendly (non-error) guidance, e.g. "this email already has an account -
   sign in instead". Sage-tinted so it reads as help, not a validation error. */
.account-form__notice {
    background: var(--sage-pale);
    border: 1px solid #c5d3c9;
    border-radius: var(--radius);
    padding: 0.75rem 0.9rem;
    margin-bottom: 1.25rem;
    font-family: 'Open Sans', sans-serif;
    font-size: 0.9rem;
    line-height: 1.5;
    color: var(--charcoal);
}

.account-form__notice a {
    color: var(--sage-dark);
    text-decoration: underline;
    font-weight: 600;
    white-space: nowrap;
}

.account-form__row {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 1rem;
    font-family: 'Open Sans', sans-serif;
    font-size: 0.85rem;
}

.account-checkbox {
    display: inline-flex;
    align-items: center;
    gap: 0.5rem;
    color: var(--charcoal);
    cursor: pointer;
}

.account-checkbox__input {
    width: 1rem;
    height: 1rem;
    accent-color: var(--sage);
}

.account-form__link,
.account-form__backlink {
    color: var(--sage-dark);
    text-decoration: underline;
    font-family: 'Open Sans', sans-serif;
    font-size: 0.85rem;
}

.account-form__backlink {
    text-align: center;
    margin-top: 0.25rem;
}

.account-form__fineprint {
    font-family: 'Open Sans', sans-serif;
    font-size: 0.78rem;
    color: var(--muted);
    text-align: center;
    line-height: 1.6;
    margin: 0.25rem 0 0;
}

.account-form__fineprint a {
    color: var(--sage-dark);
    text-decoration: underline;
}

/* ============================================================
   CONTACT PAGE
   Hero image, a map placeholder band, contact details, a full-width
   image with the message form floating over it as a white card, and
   a newsletter signup band.
   ============================================================ */

/* Hero: eyebrow + title sit toward the bottom of the image. */
.page-hero--contact {
    min-height: 60vh;
    align-items: flex-end;
}

/* Stronger tint than the default hero overlay, and weighted toward the
   bottom where the eyebrow/title sit, so the text stays legible against
   the bright parts of the image. */
.page-hero--contact::after {
    background: linear-gradient(to bottom, rgba(20, 30, 40, 0.2), rgba(20, 30, 40, 0.68));
}

/* Anchor on the vertical middle of the image rather than the default
   bottom-anchored crop used elsewhere. */
.page-hero--contact .page-hero__bg {
    background-position: center center;
}

.page-hero--contact .page-hero__content {
    padding-bottom: 4rem;
}

.page-hero--contact .page-hero__title {
    text-transform: uppercase;
    letter-spacing: 0.03em;
    font-size: clamp(1.5rem, 2.4vw, 1.9rem);
}

/* Swapped with the title: the script eyebrow line is the bigger of the two here. */
.page-hero--contact .page-hero__eyebrow {
    font-size: clamp(2.2rem, 4.5vw, 3.6rem);
}

/* Map placeholder: a plain block ready for a custom map image later. */
.contact-map-section {
    background: var(--sage);
    padding: 4rem 2rem;
}

.contact-map-section__inner {
    max-width: var(--max-width);
    margin: 0 auto;
}

.contact-map-placeholder {
    width: 100%;
    aspect-ratio: 16 / 7;
    background: rgba(255, 255, 255, 0.12);
    border: 1px dashed rgba(255, 255, 255, 0.4);
    border-radius: var(--radius);
}

@media (max-width: 768px) {
    .contact-map-placeholder { aspect-ratio: 4 / 3; }
}

/* How to contact us: three-up info cards on the sage "reasons-band". */
.contact-info-grid {
    max-width: var(--max-width);
    margin: 5rem auto 0;
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    gap: 2.5rem;
    text-align: center;
}

.contact-info-card {
    padding: 2rem 1.5rem;
    background: var(--bg-white);
    border: 1px solid rgba(255, 255, 255, 0.14);
    border-radius: var(--radius);
    box-shadow: 0 6px 18px rgba(20, 30, 40, 0.08);
    transition: transform var(--transition), box-shadow var(--transition);
}

.contact-info-card:hover {
    transform: translateY(-6px);
    box-shadow: 0 16px 30px rgba(20, 30, 40, 0.16);
}

.contact-info-card__label {
    font-family: var(--font-serif);
    font-weight: 400;
    font-size: 1.3rem;
    color: var(--black);
    margin-bottom: 0;
}

.contact-info-card__label i {
    color: var(--gold);
    font-size: 0.85em;
    margin-right: 0.4rem;
}

.contact-info-card__divider {
    display: block;
    width: 48px;
    height: 2px;
    background: var(--gold);
    margin: 0.85rem auto 1rem;
}

.contact-info-card p {
    color: var(--charcoal);
    line-height: 1.7;
    margin: 0;
}

.contact-info-card a {
    color: var(--charcoal);
    text-decoration: underline;
}

.contact-info-card__hours {
    list-style: none;
    margin: 0;
    padding: 0;
    color: var(--charcoal);
    line-height: 1.7;
}

@media (max-width: 768px) {
    .contact-info-grid { grid-template-columns: 1fr; gap: 2rem; }
}

/* Full-width image band that the message form card floats over. */
.contact-form-hero {
    position: relative;
    height: clamp(640px, 62vw, 820px);
    overflow: hidden;
}

.contact-form-hero__bg {
    position: absolute;
    inset: 0;
    background-size: cover;
    background-position: center;
}

.contact-form-hero::after {
    content: '';
    position: absolute;
    inset: 0;
    background: linear-gradient(to bottom, rgba(20, 30, 40, 0.15), rgba(20, 30, 40, 0.4));
}

/* The card is positioned over the image band (rather than floating below
   it with a small negative-margin overlap) so it fully covers the image
   behind it, edge to edge on mobile and as a wide centred card on desktop. */
.contact-form-modal-wrap {
    position: absolute;
    inset: 0;
    z-index: 2;
    display: flex;
    align-items: center;
    justify-content: center;
    padding: 2rem;
}

/* Card look matches the login/register card exactly - same background,
   radius, shadow and sage top accent. */
.contact-form-modal {
    width: 100%;
    max-width: 640px;
    max-height: 100%;
    overflow-y: auto;
    background: var(--bg-white);
    border-radius: 6px;
    border-top: 3px solid var(--gold);
    box-shadow: 0 10px 45px rgba(20, 30, 40, 0.10);
    padding: 3rem 2.75rem 2.75rem;
}

.contact-form-modal__submit {
    display: block;
    width: 100%;
    margin-top: 0.4rem;
    padding: 0.85rem 1.5rem;
    text-align: center;
    font-family: 'Open Sans', sans-serif;
    font-size: 0.85rem;
    letter-spacing: 0.08em;
    text-transform: uppercase;
    cursor: pointer;
}

@media (max-width: 640px) {
    .contact-form-modal-wrap { padding: 1.25rem; }
    .contact-form-modal { padding: 2rem 1.5rem; }
}

/* Shared form primitives, used by both the message card above and the
   newsletter form below - styled identically to the login/register form. */
.contact-form {
    display: flex;
    flex-direction: column;
    gap: 1.1rem;
}

.contact-field {
    display: flex;
    flex-direction: column;
    gap: 0.4rem;
}

.contact-field label {
    font-family: 'Open Sans', sans-serif;
    font-size: 0.82rem;
    font-weight: 600;
    letter-spacing: 0.02em;
    color: var(--charcoal);
}

.contact-input {
    width: 100%;
    padding: 0.75rem 0.9rem;
    font-family: 'Open Sans', sans-serif;
    font-size: 0.95rem;
    color: var(--black);
    background: var(--bg-white);
    border: 1px solid var(--border);
    border-radius: var(--radius);
    transition: box-shadow var(--transition), border-color var(--transition);
}

.contact-input:focus {
    outline: none;
    border-color: var(--sage);
    box-shadow: 0 0 0 3px rgba(138, 153, 141, 0.18);
}

textarea.contact-input { resize: vertical; min-height: 6rem; }

/* Applied by ASP.NET's validation script to a field that failed server or
   client-side validation - gives the (previously invisible) error a visual
   home even before the message text below it is read. */
.input-validation-error {
    border-color: #b4342f !important;
}

.contact-field__error {
    font-family: 'Open Sans', sans-serif;
    font-size: 0.8rem;
    color: #b4342f;
}

.contact-form__summary:not(:empty) {
    background: #fbeceb;
    border: 1px solid #e7c3c0;
    border-radius: var(--radius);
    padding: 0.7rem 0.9rem;
    font-family: 'Open Sans', sans-serif;
    font-size: 0.85rem;
    color: #a5302b;
}

.contact-form__summary ul { margin: 0; padding-left: 1.1rem; }

.contact-form__fineprint {
    font-family: 'Open Sans', sans-serif;
    font-size: 0.78rem;
    color: var(--muted);
    text-align: center;
    line-height: 1.6;
    margin: 0.25rem 0 0;
}

.contact-form__fineprint a { color: var(--sage-dark); text-decoration: underline; }

/* Newsletter signup band. */
.newsletter-band {
    background: var(--sage);
}

.newsletter-band__inner {
    max-width: 560px;
    margin: 0 auto;
    text-align: center;
}

.newsletter-band__title {
    font-family: var(--font-serif);
    font-weight: 400;
    font-size: clamp(1.6rem, 2.6vw, 2.1rem);
    color: #fff;
    margin: 0 0 0.6rem;
}

.newsletter-band__text {
    color: rgba(255, 255, 255, 0.9);
    font-size: clamp(1rem, 1.4vw, 1.1rem);
    line-height: 1.7;
    margin-bottom: 2.25rem;
}

.newsletter-band .contact-form__fineprint {
    color: rgba(255, 255, 255, 0.85);
    margin-top: 1.25rem;
}

.newsletter-band .contact-form__fineprint a { color: #fff; }

/* Wizard: one field showing at a time in a sliding track, advancing on
   Enter/arrow-click - email, then name, then mobile, then a confirmation
   message in place of the final step. */
.newsletter-wizard__viewport {
    overflow: hidden;
    border-radius: var(--radius);
}

.newsletter-wizard__track {
    display: flex;
    transition: transform 0.45s cubic-bezier(0.65, 0, 0.35, 1);
}

/* Width is set inline (in px, matched to the viewport's measured width) by
   the JS in site.js rather than left as a percentage - percentage
   flex-basis inside an overflowing flex row rounds to fractional pixels
   slightly differently than the percentage used in the track's translateX,
   and that drift compounds with every step, leaving the slide a few px
   out of alignment by the later steps. */
.newsletter-wizard__step {
    flex: 0 0 auto;
}

.newsletter-wizard__input-wrap {
    position: relative;
}

.newsletter-wizard__input {
    width: 100%;
    padding: 1rem 3.25rem 1rem 1.25rem;
    font-family: 'Open Sans', sans-serif;
    font-size: 1rem;
    color: var(--black);
    background: var(--bg-white);
    border: 1px solid transparent;
    border-radius: var(--radius);
    transition: box-shadow var(--transition);
}

.newsletter-wizard__input:focus {
    outline: none;
    box-shadow: 0 0 0 3px rgba(255, 255, 255, 0.4);
}

.newsletter-wizard__step.is-invalid .newsletter-wizard__input {
    border-color: #e2b3af;
}

.newsletter-wizard__arrow {
    position: absolute;
    top: 50%;
    right: 0.4rem;
    transform: translateY(-50%);
    width: 2.4rem;
    height: 2.4rem;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    background: var(--sage);
    color: #fff;
    border: none;
    border-radius: 50%;
    cursor: pointer;
    transition: background var(--transition);
}

.newsletter-wizard__arrow:hover { background: var(--sage-dark); }
.newsletter-wizard__arrow:disabled { opacity: 0.6; cursor: default; }

.newsletter-wizard__error {
    margin: 0;
    font-family: 'Open Sans', sans-serif;
    font-size: 0.8rem;
    text-align: left;
}

.newsletter-wizard__error:not(:empty) {
    margin: 0.5rem 0 0;
    color: #fff;
    background: rgba(180, 52, 47, 0.85);
    border-radius: var(--radius);
    padding: 0.35rem 0.75rem;
}

.newsletter-wizard__step--confirm {
    display: flex;
    align-items: center;
    justify-content: center;
    min-height: 3.4rem;
}

.newsletter-wizard__confirm {
    color: #fff;
    font-size: 1.05rem;
    line-height: 1.6;
    margin: 0;
}

.newsletter-wizard__confirm i {
    color: #fff;
    margin-right: 0.5rem;
}

/* Buttons */
.account-btn {
    display: inline-block;
    width: 100%;
    padding: 0.85rem 1.5rem;
    margin-top: 0.4rem;
    background: var(--sage);
    border: 1px solid var(--sage);
    color: #fff;
    font-family: 'Open Sans', sans-serif;
    font-size: 0.85rem;
    letter-spacing: 0.08em;
    text-transform: uppercase;
    text-align: center;
    border-radius: var(--radius);
    cursor: pointer;
    transition: background var(--transition), border-color var(--transition);
}

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

.account-btn--ghost {
    background: transparent;
    color: var(--sage-dark);
}

.account-btn--ghost:hover {
    background: var(--sage-pale);
    color: var(--sage-dark);
}

.account-actions {
    display: flex;
    flex-direction: column;
    gap: 0.75rem;
}

/* Informational message blocks (confirmations, sign-out, etc.) */
.account-message {
    text-align: center;
    color: var(--charcoal);
    font-family: 'Open Sans', sans-serif;
    font-size: 0.95rem;
    line-height: 1.65;
    margin-bottom: 1.75rem;
}

.account-message__icon {
    display: block;
    font-size: 2.4rem;
    color: var(--sage);
    margin: 0.5rem auto 1rem;
}

.account-message__muted {
    color: var(--muted);
    font-size: 0.85rem;
    margin-top: 0.75rem;
}

.account-message a {
    color: var(--sage-dark);
    text-decoration: underline;
}

.account-message--success .account-message__icon {
    color: #4f8a5b;
}

/* Signed-in account management area */
.account-page--manage {
    align-items: flex-start;
}

.account-manage {
    position: relative;
    z-index: 1;
    width: 100%;
    max-width: var(--max-width);
    display: grid;
    grid-template-columns: 250px 1fr;
    gap: 2.5rem;
    align-items: start;
}

.account-manage__sidebar {
    background: var(--bg-white);
    border-radius: 6px;
    border-top: 3px solid var(--gold);
    padding: 1.75rem 1.5rem;
    box-shadow: 0 10px 45px rgba(20,30,40,0.08);
}

.account-manage__heading {
    font-family: var(--font-serif);
    font-size: 1.4rem;
    font-weight: 400;
    color: var(--black);
    margin: 0 0 1.1rem;
}

.account-manage__links {
    display: flex;
    flex-direction: column;
    gap: 0.25rem;
}

.account-manage__links a,
.account-manage__signout {
    display: flex;
    align-items: center;
    gap: 0.65rem;
    padding: 0.65rem 0.75rem;
    font-family: 'Open Sans', sans-serif;
    font-size: 0.9rem;
    color: var(--charcoal);
    border-radius: var(--radius);
    text-align: left;
    transition: background var(--transition), color var(--transition);
}

.account-manage__links a i,
.account-manage__signout i {
    width: 1.1rem;
    text-align: center;
    color: var(--sage);
}

.account-manage__links a:hover {
    background: var(--sage-pale);
    color: var(--sage-dark);
}

.account-manage__links a.is-active {
    background: var(--sage-pale);
    color: var(--sage-dark);
    font-weight: 600;
}

.account-manage__signout-form {
    margin-top: 0.5rem;
    border-top: 1px solid var(--border);
    padding-top: 0.5rem;
}

.account-manage__signout {
    width: 100%;
    background: none;
    border: none;
    cursor: pointer;
}

.account-manage__signout:hover {
    background: var(--sage-pale);
    color: var(--sage-dark);
}

.account-manage__panel {
    background: var(--bg-white);
    border-radius: 6px;
    padding: 2.5rem;
    box-shadow: 0 10px 45px rgba(20,30,40,0.08);
}

.account-manage__title {
    font-family: var(--font-serif);
    font-size: clamp(1.6rem, 3vw, 2rem);
    font-weight: 400;
    color: var(--black);
    margin: 0 0 0.35rem;
}

.account-manage__subtitle {
    font-family: 'Open Sans', sans-serif;
    font-size: 0.9rem;
    color: var(--muted);
    line-height: 1.6;
    margin: 0 0 1.75rem;
}

.account-form--panel {
    max-width: 440px;
}

.account-status {
    display: flex;
    align-items: center;
    gap: 0.6rem;
    padding: 0.8rem 1rem;
    border-radius: var(--radius);
    font-family: 'Open Sans', sans-serif;
    font-size: 0.88rem;
    margin-bottom: 1.5rem;
}

.account-status--success {
    background: #e9f3ec;
    border: 1px solid #bcdcc3;
    color: #3c6b47;
}

.account-status--error {
    background: #fbeceb;
    border: 1px solid #e7c3c0;
    color: #a5302b;
}

@media (max-width: 768px) {
    .account-page {
        padding: 2.5rem 1.25rem 3.5rem;
    }

    .account-page__card {
        padding: 2.25rem 1.5rem 2rem;
    }

    .account-social {
        grid-template-columns: 1fr;
    }

    .account-manage {
        grid-template-columns: 1fr;
        gap: 1.5rem;
    }

    .account-manage__panel {
        padding: 1.75rem 1.5rem;
    }
}

/* ============================================================
   COUNTRY HOMES SEARCH - hero, cards, toolbar, map view
   ============================================================ */

/* Shorter variant of the homepage hero for the search page */
.home-hero--listing {
    min-height: 60vh;
}

.home-hero--listing .home-hero__headline {
    margin-bottom: 0;
}

.home-hero__subhead {
    margin-top: -0.75rem;
    margin-bottom: 2rem;
    max-width: 58rem;
/*    font-family: var(--font-eyebrow);*/
    font-size: clamp(1.25rem, 2.1vw, 1.55rem);
    font-weight: 300;
    color: #fff;
    line-height: 1.5;
    letter-spacing: normal;
    text-shadow: 0 1px 12px rgba(0, 0, 0, 0.35);
}


.home-hero--buying .home-hero__subhead {
    font-family: var(--font-eyebrow);
    /* Scales on vw rather than holding a large floor, so it stays clearly below
       the headline on phones - where the headline itself drops to ~1.6rem. */
    font-size: clamp(1.35rem, 4.5vw, 2.1rem);
    font-weight: 400;
    margin-left: auto;
    margin-right: auto;
}

/* FAQs: the standfirst under "We're here to help." is set in the handwriting
   face. It runs small for its point size, so it takes a bump to sit at the same
   optical weight as the body subheads elsewhere. */
.home-hero--faq .home-hero__subhead {
    font-family: var(--font-eyebrow);
    /* Scales on vw rather than holding a large floor, so it stays clearly below
       the headline on phones - where the headline itself drops to ~1.6rem. */
    font-size: clamp(1.35rem, 4.5vw, 2.1rem);
    font-weight: 400;
    margin-left: auto;
    margin-right: auto;
}

/* Static hero - the image is painted onto the parallax layer itself rather than
   a slide inside it, so there is no cross-fade to drive. Anchored below centre
   so more of the lower half of the hallway shows. */
.home-hero--faq .home-hero__slides {
    background-size: cover;
    background-position: center 60%;
    background-repeat: no-repeat;
}

/* ── Our Local Partners: homepage slideshow hero, but with the Contact page's
   text treatment - a large script line above a small uppercase title, the pair
   sitting toward the bottom of the image. Mirrors .page-hero--contact. ── */
.home-hero--partners {
    align-items: flex-end;
}

/* Stronger tint than the default hero overlay, weighted toward the bottom where
   the text sits, so it stays legible against the bright parts of the image. */
.home-hero--partners::after {
    background: linear-gradient(to bottom, rgba(20, 30, 40, 0.2), rgba(20, 30, 40, 0.68));
}

.home-hero--partners .home-hero__content {
    padding-bottom: 4rem;
}

/* The script line is the larger of the two here, as on Contact. */
.home-hero--partners .home-hero__subhead {
    font-family: var(--font-eyebrow);
    font-size: clamp(2.2rem, 4.5vw, 3.6rem);
    font-weight: 400;
    line-height: 1.15;
    color: rgba(255, 255, 255, 0.8);
    text-shadow: none;
    /* 1rem below, matching .page-hero__eyebrow on Contact. */
    margin: 0 auto 1rem;
}

.home-hero--partners .home-hero__headline {
    text-transform: uppercase;
    letter-spacing: 0.03em;
    font-size: clamp(1.5rem, 2.4vw, 1.9rem);
    /* Contact's title keeps a 1rem margin under it, on top of the content
       padding - without this the text sits 16px lower in the frame. */
    margin-bottom: 1rem;
}

/* Find your country home: short enough to sit on one line above tablet width */
.home-hero--listing .home-hero__subhead {
    margin-top: 1rem;
    max-width: 54rem;
    font-size: clamp(1.4rem, 2.2vw, 1.75rem);
}

/* Accessibility helper */
.sr-only {
    position: absolute;
    width: 1px;
    height: 1px;
    padding: 0;
    margin: -1px;
    overflow: hidden;
    clip: rect(0, 0, 0, 0);
    white-space: nowrap;
    border: 0;
}

/* ── Toolbar additions: Save search + view toggle ── */
.listing-toolbar__save {
    display: inline-flex;
    align-items: center;
    gap: 0.5rem;
    background: none;
    border: 1px solid var(--border);
    border-radius: var(--radius);
    padding: 0.5rem 0.9rem;
    font-family: var(--font-body);
    font-size: 0.85rem;
    color: var(--charcoal);
    cursor: pointer;
    transition: border-color var(--transition), color var(--transition);
}

.listing-toolbar__save:hover {
    border-color: var(--sage);
    color: var(--sage-dark);
}

.listing-toolbar__save i {
    color: var(--sage);
}

.listing-toolbar__save.is-saved i {
    color: #c0392b;
}

.listing-toolbar__view {
    display: inline-flex;
    border: 1px solid var(--border);
    border-radius: var(--radius);
    overflow: hidden;
}

.view-toggle {
    display: inline-flex;
    align-items: center;
    gap: 0.4rem;
    background: var(--bg-white);
    border: none;
    padding: 0.5rem 0.9rem;
    font-family: var(--font-body);
    font-size: 0.85rem;
    color: var(--mid);
    cursor: pointer;
    transition: background var(--transition), color var(--transition);
}

.view-toggle + .view-toggle {
    border-left: 1px solid var(--border);
}

.view-toggle.is-active {
    background: var(--sage);
    color: #fff;
}

/* ── Property card (vertical, image-top carousel) ── */
.pcard {
    position: relative;
    background: var(--bg-white);
    border: 1px solid var(--border);
    border-radius: 6px;
    overflow: hidden;
    cursor: pointer;
    display: flex;
    flex-direction: column;
    transition: transform var(--transition), box-shadow var(--transition);
}

.pcard:hover {
    transform: translateY(-6px);
    box-shadow: 0 14px 34px rgba(20,30,40,0.16);
}

.pcard.is-highlighted {
    box-shadow: 0 0 0 2px var(--sage), 0 14px 34px rgba(20,30,40,0.18);
}

.pcard__media {
    position: relative;
    aspect-ratio: 4 / 3;
    overflow: hidden;
    background: var(--bg-warm);
}

.pcard__carousel {
    position: absolute;
    inset: 0;
}

.pcard__slide {
    position: absolute;
    inset: 0;
    opacity: 0;
    transition: opacity 0.4s ease;
}

.pcard__slide.is-active {
    opacity: 1;
}

.pcard__slide img {
    width: 100%;
    height: 100%;
    object-fit: cover;
    display: block;
    transition: transform 0.6s ease;
}

/* Image expands slightly on card hover */
.pcard:hover .pcard__slide.is-active img {
    transform: scale(1.06);
}

.pcard__slide--placeholder {
    display: flex;
    align-items: center;
    justify-content: center;
    color: var(--border);
    opacity: 1;
}

.pcard__slide--placeholder svg {
    width: 56px;
}

.pcard__arrow {
    position: absolute;
    top: 50%;
    transform: translateY(-50%);
    width: 34px;
    height: 34px;
    border: none;
    border-radius: 50%;
    background: var(--sage);
    color: #fff;
    display: flex;
    align-items: center;
    justify-content: center;
    cursor: pointer;
    opacity: 0;
    transition: opacity var(--transition), background var(--transition);
    z-index: 3;
    box-shadow: 0 2px 8px rgba(0,0,0,0.15);
}

.pcard:hover .pcard__arrow {
    opacity: 1;
}

.pcard__arrow:hover {
    background: var(--sage-dark);
}

.pcard__arrow--prev { left: 0.6rem; }
.pcard__arrow--next { right: 0.6rem; }

/* On touch devices arrows are always visible (no hover) */
@media (hover: none) {
    .pcard__arrow { opacity: 1; }
}

.pcard__badges {
    position: absolute;
    top: 0.75rem;
    left: 0.75rem;
    display: flex;
    gap: 0.4rem;
    flex-wrap: wrap;
    z-index: 2;
}

.pcard__heart {
    position: absolute;
    top: 0.7rem;
    right: 0.7rem;
    width: 38px;
    height: 38px;
    border: none;
    border-radius: 50%;
    background: rgba(255,255,255,0.92);
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 1.05rem;
    cursor: pointer;
    z-index: 3;
    box-shadow: 0 2px 8px rgba(0,0,0,0.18);
    transition: transform var(--transition), background var(--transition);
}

.pcard__heart:hover {
    transform: scale(1.1);
    background: #fff;
}

.pcard__heart .fa-regular {
    color: var(--charcoal);
}

.pcard__heart.is-saved .fa-solid,
.pcard__heart .fa-solid {
    color: #c0392b;
}

.pcard__body {
    display: block;
    padding: 1.15rem 1.25rem 1.4rem;
}

.pcard__location {
    font-size: 0.72rem;
    letter-spacing: 0.14em;
    text-transform: uppercase;
    color: var(--sage-dark);
    margin-bottom: 0.35rem;
}

.pcard__address {
    font-family: var(--font-serif);
    font-size: 1.3rem;
    font-weight: 400;
    color: var(--black);
    line-height: 1.25;
    margin-bottom: 0.6rem;
}

/* Postcode sits inline at the end of the address line */
.pcard__postcode {
    font-family: var(--font-body);
    font-size: 0.9rem;
    font-weight: 400;
    color: var(--muted);
}

.pcard__price {
    display: flex;
    align-items: baseline;
    gap: 0.4rem;
    margin-bottom: 0.85rem;
}

.pcard__price-qualifier {
    font-size: 0.78rem;
    color: var(--muted);
}

.pcard__price-value {
    font-family: var(--font-serif);
    font-size: 1.5rem;
    color: var(--black);
}

.pcard__specs {
    list-style: none;
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: 0.5rem 1.15rem;
    padding: 0.85rem 0;
    margin: 0 0 0.85rem;
    border-top: 1px solid var(--border);
    border-bottom: 1px solid var(--border);
}

.pcard__specs li {
    display: inline-flex;
    align-items: center;
    gap: 0.4rem;
    font-size: 0.9rem;
    color: var(--charcoal);
}

.pcard__specs li i {
    color: var(--sage-dark);
    font-size: 0.95rem;
    width: 1.1rem;
    text-align: center;
}

.pcard__spec--feature {
    color: var(--mid);
}

.pcard__summary {
    font-size: 0.9rem;
    line-height: 1.6;
    color: var(--mid);
    display: -webkit-box;
    -webkit-line-clamp: 3;
    -webkit-box-orient: vertical;
    overflow: hidden;
}

/* ── Map view (Rightmove-style split layout) ── */
.property-map {
    display: none;
}

/* In map view the page breaks out of the centred max-width so the map can span
   the full screen width, with the property list pinned down the far left. */
.listing-page--map {
    max-width: none;
    /* Zero the `margin: 0 auto` - in the flex column those auto side margins
       stop the page stretching to full width. */
    margin: 0;
    padding-left: 1.5rem;
    padding-right: 1.5rem;
}

/* The map and card list span the full screen, but keep the toolbar (results
   count, save, view toggle, sort) pinned to the normal centred content width -
   matching the grid view, where the toolbar sits inside the page's 2rem padding
   (max-width minus 2rem each side). */
.listing-page--map .listing-toolbar {
    width: 100%;
    max-width: calc(var(--max-width) - 4rem);
    margin-left: auto;
    margin-right: auto;
}

.listing-results.is-map-view {
    display: grid;
    grid-template-columns: minmax(320px, 400px) 1fr;
    gap: 1.5rem;
    align-items: start;
}

/* In map mode the grid becomes a single scrollable column of cards */
.listing-results.is-map-view .property-grid {
    grid-template-columns: 1fr;
    gap: 1.25rem;
    max-height: calc(100vh - 120px);
    overflow-y: auto;
    padding-right: 0.5rem;
}

.listing-results.is-map-view .property-map {
    display: block;
    position: sticky;
    top: 90px;
    height: calc(100vh - 120px);
    max-height: calc(100vh - 120px);
    border-radius: 6px;
    overflow: hidden;
    border: 1px solid var(--border);
    z-index: 1;
}

    /* Hard cap on whatever Google/Leaflet inject as direct children - belt
       and braces against the map ever painting past its own box. */
    .listing-results.is-map-view .property-map > * {
        max-height: 100%;
        overflow: hidden;
    }

/* Leaflet price-pill markers (house icon + shortened price) */
.map-pin {
    background: none;
    border: none;
}

.map-pin__pill {
    display: inline-flex;
    align-items: center;
    gap: 0.32rem;
    transform: translate(-50%, -50%);
    background: var(--sage);
    color: #fff;
    font-family: var(--font-body);
    font-size: 0.8rem;
    font-weight: 600;
    white-space: nowrap;
    padding: 0.3rem 0.6rem;
    border-radius: 14px;
    box-shadow: 0 2px 6px rgba(0,0,0,0.3);
    border: 2px solid #fff;
    cursor: pointer;
    transition: background var(--transition);
}

.map-pin__pill i {
    font-size: 0.72rem;
    opacity: 0.95;
}

.map-pin__pill:hover {
    background: var(--sage-dark);
}

/* Map marker popup - styled like a property card, image bleeding to the edges.
   leaflet.css loads after site.css, so its default content padding/margins are
   overridden here with !important + overflow clipping on the wrapper. */
.leaflet-popup-content-wrapper {
    border-radius: 8px !important;
    overflow: hidden !important;
    padding: 0 !important;
}

.leaflet-popup-content {
    margin: 0 !important;
    width: 240px !important;
}

/* Google's InfoWindow (used for the marker popup once GoogleMaps__ApiKey is
   configured) wraps content in its own chrome that adds padding and an
   internal scroll container by default - stripped here so it's just our
   .map-popup content, image bleeding to the edges same as the Leaflet popup.
   Google's own rules are also !important and its stylesheet is injected at
   runtime (after site.css), so a plain class selector can lose the cascade
   tie on load order alone - scoping under #propertyMap gives these higher
   specificity so they win regardless of injection order. */
#propertyMap .gm-style-iw-c,
#propertyMap .gm-style-iw {
    padding: 0 !important;
    border-radius: 8px !important;
    overflow: hidden !important;
}

#propertyMap .gm-style-iw-d {
    overflow: hidden !important;
    max-height: none !important;
    padding: 0 !important;
}

#propertyMap .gm-style-iw-c > button.gm-ui-hover-effect {
    position: absolute !important;
    top: 8px !important;
    right: 8px !important;
    width: 28px !important;
    height: 28px !important;
    background: var(--sage) !important;
    border-radius: 50% !important;
    opacity: 1 !important;
}

#propertyMap .gm-style-iw-c > button.gm-ui-hover-effect:hover {
    background: var(--sage-dark) !important;
}

#propertyMap .gm-style-iw-c > button.gm-ui-hover-effect > span {
    background-color: #fff !important;
    margin: 6px !important;
}

/* The little pointer triangle under the bubble - recolour to match the
   white card instead of Google's default. */
#propertyMap .gm-style-iw-tc::after {
    background: #fff !important;
}

.map-popup {
    display: block;
    width: 240px;
    color: var(--charcoal);
    text-decoration: none;
}

.map-popup__img {
    display: block;
    width: 100%;
    height: 150px;
    background-size: cover;
    background-position: center;
    background-color: var(--bg-warm);
    transition: transform 0.6s ease;
}

.map-popup:hover .map-popup__img {
    transform: scale(1.05);
}

.map-popup__body {
    display: block;
    padding: 0.85rem 1rem 1rem;
}

.map-popup__location {
    display: block;
    font-size: 0.68rem;
    letter-spacing: 0.14em;
    text-transform: uppercase;
    color: var(--sage-dark);
    margin-bottom: 0.3rem;
}

.map-popup__address {
    display: block;
    font-family: var(--font-serif);
    font-size: 1.15rem;
    color: var(--black);
    margin: 0 0 0.3rem;
    line-height: 1.25;
}

.map-popup__price {
    display: block;
    font-family: var(--font-serif);
    font-size: 1.3rem;
    color: var(--black);
    margin-bottom: 0.35rem;
}

.map-popup__specs {
    display: block;
    font-size: 0.8rem;
    color: var(--muted);
}

/* Keep the image flush with the popup's rounded top corners */
.leaflet-popup-content-wrapper .map-popup__img {
    border-top-left-radius: 8px;
    border-top-right-radius: 8px;
}

/* ── Soft modal (e.g. save-search sign-in prompt) ── */
.hh-modal[hidden] {
    display: none;
}

.hh-modal {
    position: fixed;
    inset: 0;
    z-index: 1000;
    display: flex;
    align-items: center;
    justify-content: center;
    padding: 1.5rem;
}

.hh-modal__backdrop {
    position: absolute;
    inset: 0;
    background: rgba(20, 30, 40, 0.5);
    backdrop-filter: blur(2px);
}

.hh-modal__dialog {
    position: relative;
    width: 100%;
    max-width: 400px;
    background: var(--bg-white);
    border-radius: 8px;
    border-top: 3px solid var(--gold);
    box-shadow: 0 20px 60px rgba(20, 30, 40, 0.35);
    padding: 2.25rem 2rem 1.75rem;
    text-align: center;
    animation: hh-modal-in 0.2s ease;
}

@keyframes hh-modal-in {
    from { opacity: 0; transform: translateY(8px); }
    to   { opacity: 1; transform: translateY(0); }
}

.hh-modal__icon {
    width: 52px;
    height: 52px;
    margin: 0 auto 1rem;
    display: flex;
    align-items: center;
    justify-content: center;
    border-radius: 50%;
    background: var(--sage-pale);
    color: var(--sage-dark);
    font-size: 1.2rem;
}

.hh-modal__title {
    font-family: var(--font-serif);
    font-size: 1.6rem;
    font-weight: 400;
    color: var(--black);
    margin: 0 0 0.5rem;
}

.hh-modal__text {
    font-size: 0.95rem;
    color: var(--muted);
    line-height: 1.6;
    margin: 0 0 1.5rem;
}

.hh-modal__actions {
    display: flex;
    gap: 0.75rem;
    justify-content: center;
}

.hh-modal__btn {
    flex: 1 1 0;
    padding: 0.7rem 1rem;
    border-radius: var(--radius);
    font-family: var(--font-body);
    font-size: 0.85rem;
    letter-spacing: 0.03em;
    cursor: pointer;
    transition: background var(--transition), color var(--transition), border-color var(--transition);
}

.hh-modal__btn--ghost {
    background: none;
    border: 1px solid var(--border);
    color: var(--charcoal);
}

.hh-modal__btn--ghost:hover {
    border-color: var(--sage);
    color: var(--sage-dark);
}

.hh-modal__btn--primary {
    background: var(--sage);
    border: 1px solid var(--sage);
    color: #fff;
}

.hh-modal__btn--primary:hover {
    background: var(--sage-dark);
    border-color: var(--sage-dark);
    color: #fff;
}

body.hh-modal-open {
    overflow: hidden;
}

/* ============================================================
   COOKIE CONSENT
   ============================================================ */

.cookie-banner[hidden] { display: none; }

.cookie-banner {
    position: fixed;
    left: 0;
    right: 0;
    bottom: 0;
    z-index: 900;
    background: var(--bg-white);
    border-top: 3px solid var(--gold);
    box-shadow: 0 -8px 30px rgba(20, 30, 40, 0.12);
    animation: hh-modal-in 0.25s ease;
}

.cookie-banner__inner {
    max-width: var(--max-width);
    margin: 0 auto;
    padding: 1.25rem 2rem;
    display: flex;
    align-items: center;
    gap: 2rem;
}

.cookie-banner__text {
    flex: 1 1 auto;
    font-size: 0.9rem;
    color: var(--charcoal);
    line-height: 1.6;
    margin: 0;
}

.cookie-banner__text a {
    color: var(--sage-dark);
    text-decoration: underline;
}

.cookie-banner__actions {
    flex: 0 0 auto;
    display: flex;
    flex-wrap: wrap;
    gap: 0.6rem;
}

.cookie-banner__btn {
    padding: 0.65rem 1.1rem;
    border-radius: var(--radius);
    font-family: 'Open Sans', sans-serif;
    font-size: 0.8rem;
    letter-spacing: 0.03em;
    white-space: nowrap;
    cursor: pointer;
    transition: background var(--transition), color var(--transition), border-color var(--transition);
}

.cookie-banner__btn--ghost {
    background: none;
    border: 1px solid var(--border);
    color: var(--charcoal);
}

.cookie-banner__btn--ghost:hover {
    border-color: var(--sage);
    color: var(--sage-dark);
}

.cookie-banner__btn--primary {
    background: var(--sage);
    border: 1px solid var(--sage);
    color: #fff;
}

.cookie-banner__btn--primary:hover {
    background: var(--sage-dark);
    border-color: var(--sage-dark);
}

@media (max-width: 768px) {
    .cookie-banner__inner {
        flex-direction: column;
        align-items: stretch;
        gap: 1rem;
        padding: 1.25rem 1.5rem;
    }

    .cookie-banner__actions {
        justify-content: stretch;
    }

    .cookie-banner__btn {
        flex: 1 1 auto;
        text-align: center;
    }
}

/* Preferences modal - reuses .hh-modal but wider, to fit the category list */
.cookie-modal__dialog {
    max-width: 520px;
    text-align: left;
}

.cookie-modal__dialog .hh-modal__title,
.cookie-modal__intro {
    text-align: left;
}

.cookie-modal__categories {
    display: flex;
    flex-direction: column;
    gap: 1.25rem;
    margin-bottom: 1.75rem;
}

.cookie-category__header {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 1rem;
}

.cookie-category__title {
    font-family: 'Open Sans', sans-serif;
    font-weight: 600;
    font-size: 0.95rem;
    color: var(--black);
}

.cookie-category__desc {
    margin: 0.35rem 0 0;
    font-size: 0.85rem;
    color: var(--muted);
    line-height: 1.6;
}

/* Toggle switch */
.cookie-toggle {
    position: relative;
    flex: 0 0 auto;
    display: inline-flex;
    cursor: pointer;
}

.cookie-toggle input {
    position: absolute;
    opacity: 0;
    width: 1px;
    height: 1px;
}

.cookie-toggle__track {
    width: 42px;
    height: 24px;
    border-radius: 999px;
    background: var(--border);
    transition: background var(--transition);
    display: inline-flex;
    align-items: center;
    padding: 2px;
}

.cookie-toggle__thumb {
    width: 20px;
    height: 20px;
    border-radius: 50%;
    background: #fff;
    box-shadow: 0 1px 3px rgba(20, 30, 40, 0.25);
    transition: transform var(--transition);
}

.cookie-toggle input:checked + .cookie-toggle__track {
    background: var(--sage);
}

.cookie-toggle input:checked + .cookie-toggle__track .cookie-toggle__thumb {
    transform: translateX(18px);
}

.cookie-toggle input:focus-visible + .cookie-toggle__track {
    box-shadow: 0 0 0 3px rgba(138, 153, 141, 0.35);
}

.cookie-toggle--locked {
    cursor: default;
}

.cookie-toggle--locked .cookie-toggle__track {
    background: var(--sage);
    opacity: 0.55;
}

.cookie-modal__actions {
    display: flex;
    flex-wrap: wrap;
    gap: 0.6rem;
}

.cookie-modal__actions .hh-modal__btn {
    flex: 1 1 140px;
}

/* ── Search results responsive ── */
@media (max-width: 1000px) {
    .property-grid {
        grid-template-columns: repeat(2, 1fr);
    }

    .listing-results.is-map-view {
        grid-template-columns: 1fr;
    }

    .listing-results.is-map-view .property-grid {
        max-height: none;
        overflow: visible;
    }

    .listing-results.is-map-view .property-map {
        position: relative;
        top: 0;
        height: 60vh;
        max-height: 60vh;
        order: -1;
    }
}

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

    .listing-toolbar__save span,
    .view-toggle span {
        display: none;
    }

    /* .listing-toolbar__actions has no flex-wrap, so on narrow screens the
       save/grid-map/sort/clear-filters group was forced onto one line and
       pushed past the viewport edge, dragging the whole page into
       horizontal scroll. Letting it wrap fixes that without changing
       anything on wider screens where it already fits on one line. */
    .listing-toolbar__actions {
        flex-wrap: wrap;
        row-gap: 0.75rem;
    }
}

/* ── Saved items (account area) ── */
.account-saved-grid {
    grid-template-columns: repeat(auto-fill, minmax(230px, 1fr));
    gap: 1.5rem;
}

.account-saved-empty {
    text-align: center;
    padding: 3rem 1rem;
    color: var(--muted);
}

.account-saved-empty i {
    font-size: 2.2rem;
    color: var(--sage);
    margin-bottom: 1rem;
}

.account-saved-empty p {
    font-family: 'Open Sans', sans-serif;
    margin-bottom: 1.5rem;
}

.account-saved-empty .account-btn {
    display: inline-block;
    width: auto;
    padding-left: 2rem;
    padding-right: 2rem;
}

.saved-search-list {
    list-style: none;
    display: flex;
    flex-direction: column;
    gap: 0.75rem;
}

.saved-search {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 1rem;
    padding: 1rem 1.25rem;
    border: 1px solid var(--border);
    border-radius: var(--radius);
    background: var(--bg-white);
}

.saved-search__name {
    display: block;
    font-family: var(--font-serif);
    font-size: 1.15rem;
    color: var(--black);
}

.saved-search__name:hover {
    color: var(--sage-dark);
}

.saved-search__date {
    font-family: 'Open Sans', sans-serif;
    font-size: 0.78rem;
    color: var(--muted);
}

.saved-search__actions {
    display: flex;
    align-items: center;
    gap: 0.75rem;
    flex-shrink: 0;
}

.saved-search__view {
    font-family: 'Open Sans', sans-serif;
    font-size: 0.8rem;
    letter-spacing: 0.06em;
    text-transform: uppercase;
    color: var(--sage-dark);
    border: 1px solid var(--sage);
    border-radius: var(--radius);
    padding: 0.45rem 0.9rem;
    transition: background var(--transition), color var(--transition);
}

.saved-search__view:hover {
    background: var(--sage);
    color: #fff;
}

.saved-search__remove {
    background: none;
    border: none;
    color: var(--muted);
    cursor: pointer;
    font-size: 1rem;
    padding: 0.35rem;
    transition: color var(--transition);
}

.saved-search__remove:hover {
    color: #c0392b;
}

.saved-search__actions form {
    display: inline;
}

/* ============================================================
   FAQ CHATBOT WIDGET
   ============================================================ */
.chatbot {
    position: fixed;
    right: 1.25rem;
    /* Lifted clear of the cookie banner while it's showing - site.js measures
       the banner's actual rendered height into this variable, so it works at
       any viewport width instead of guessing a fixed offset. */
    bottom: calc(1.25rem + var(--cookie-banner-height, 0px));
    z-index: 1200;
    font-family: var(--font-body);
    transition: bottom var(--transition);
}

.chatbot__launcher {
    display: inline-flex;
    align-items: center;
    gap: 0.6rem;
    border: none;
    cursor: pointer;
    background: var(--sage-dark);
    color: #fff;
    padding: 0.85rem 1.3rem;
    border-radius: 100px;
    font-size: 1rem;
    font-family: var(--font-body);
    box-shadow: 0 10px 28px rgba(20, 30, 40, 0.22);
    transition: background var(--transition), transform var(--transition);
}
.chatbot__launcher i { font-size: 1.15rem; }
@media (hover: hover) {
    .chatbot__launcher:hover { background: var(--sage); transform: translateY(-2px); }
}
.chatbot.is-open .chatbot__launcher { display: none; }

.chatbot__panel {
    position: absolute;
    right: 0;
    bottom: 0;
    width: min(380px, calc(100vw - 2rem));
    height: min(560px, calc(100vh - 2.5rem));
    display: flex;
    flex-direction: column;
    background: var(--bg-warm);
    border: 1px solid var(--border);
    border-radius: 14px;
    overflow: hidden;
    box-shadow: 0 22px 50px rgba(20, 30, 40, 0.28);
}

/* The display:flex above outranks the browser's own [hidden] rule, so without
   this the panel can never hide: it would render open on every page load and
   the close button would look broken. Same guard as .hh-modal / .cookie-banner. */
.chatbot__panel[hidden] {
    display: none;
}

.chatbot__header {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 0.75rem;
    padding: 0.9rem 1rem;
    background: var(--sage);
    color: #fff;
}
.chatbot__title { display: flex; align-items: center; gap: 0.7rem; }
.chatbot__avatar {
    width: 38px;
    height: 38px;
    flex: 0 0 auto;
    border-radius: 50%;
    background: rgba(255,255,255,0.2);
    display: flex;
    align-items: center;
    justify-content: center;
    overflow: hidden;
}
.chatbot__avatar img {
    width: 100%;
    height: 100%;
    object-fit: cover;
    display: block;
    /* Scaled up inside the clipped circle so Jenny's face fills more of it. */
    transform: scale(1.25);
}
.chatbot__title strong { display: block; font-weight: 400; font-size: 0.98rem; }
.chatbot__subtitle { font-size: 0.78rem; opacity: 0.85; }
.chatbot__close {
    background: none;
    border: none;
    color: #fff;
    cursor: pointer;
    font-size: 1.1rem;
    padding: 0.25rem;
    opacity: 0.9;
}
.chatbot__close:hover { opacity: 1; }

.chatbot__messages {
    flex: 1;
    overflow-y: auto;
    padding: 1rem;
    display: flex;
    flex-direction: column;
    gap: 0.6rem;
    background: var(--bg-warm);
}

.chatbot__msg {
    max-width: 85%;
    padding: 0.65rem 0.85rem;
    border-radius: 14px;
    font-size: 0.92rem;
    line-height: 1.5;
    white-space: pre-wrap;
    word-wrap: break-word;
}
.chatbot__msg--bot {
    align-self: flex-start;
    background: var(--bg-white);
    border: 1px solid var(--border);
    color: var(--charcoal);
    border-bottom-left-radius: 4px;
}
.chatbot__msg--user {
    align-self: flex-end;
    background: var(--sage-dark);
    color: #fff;
    border-bottom-right-radius: 4px;
}
.chatbot__msg--typing { color: var(--muted); font-style: italic; }
.chatbot__msg a { color: inherit; text-decoration: underline; }

.chatbot__form {
    display: flex;
    align-items: center;
    gap: 0.5rem;
    padding: 0.7rem;
    border-top: 1px solid var(--border);
    /* Inherit the panel's cream rather than sitting as a white strip below it. */
    background: transparent;
}
.chatbot__input {
    flex: 1;
    border: 1px solid var(--border);
    border-radius: 100px;
    padding: 0.6rem 1rem;
    font-size: 0.92rem;
    font-family: var(--font-body);
    outline: none;
}
.chatbot__input:focus { border-color: var(--sage); }
.chatbot__send {
    flex: 0 0 auto;
    width: 40px;
    height: 40px;
    border: none;
    border-radius: 50%;
    background: var(--sage-dark);
    color: #fff;
    cursor: pointer;
    transition: background var(--transition);
}
.chatbot__send:hover { background: var(--sage); }
.chatbot__send:disabled { opacity: 0.5; cursor: default; }

.chatbot__disclaimer {
    margin: 0;
    padding: 0 0.9rem 0.6rem;
    font-size: 0.7rem;
    color: var(--muted);
    text-align: center;
    background: transparent;
}

/* Nothing in the widget is set in bold - including any markup a reply happens
   to carry, and the input's placeholder. */
.chatbot strong,
.chatbot b {
    font-weight: 400;
}

@media (max-width: 480px) {
    .chatbot { right: 0.75rem; bottom: calc(0.75rem + var(--cookie-banner-height, 0px)); }
    .chatbot__launcher-text { display: none; }
    .chatbot__launcher { padding: 0.85rem; }
}

/* ============================================================
   ADMIN DASHBOARD
   ============================================================ */
.admin-dash {
    max-width: 1080px;
    margin: 2.5rem auto;
    padding: 0 1.5rem;
}

.admin-dash__head { margin-bottom: 1.75rem; }
.admin-dash__sub { color: var(--muted); margin-top: 0.35rem; }

.admin-grid {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(230px, 1fr));
    gap: 1.25rem;
    margin-bottom: 2.5rem;
}

.admin-card {
    display: flex;
    flex-direction: column;
    background: var(--bg-white);
    border: 1px solid var(--border);
    border-radius: var(--radius);
    padding: 1.5rem;
    text-decoration: none;
    color: inherit;
    transition: box-shadow var(--transition), transform var(--transition);
}
.admin-card:hover {
    box-shadow: 0 14px 32px rgba(20, 30, 40, 0.1);
    transform: translateY(-2px);
}

.admin-card__icon {
    width: 44px;
    height: 44px;
    border-radius: 50%;
    background: var(--sage-pale);
    color: var(--sage-dark);
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 1.15rem;
    margin-bottom: 1rem;
}

.admin-card__title {
    font-family: var(--font-body);
    font-size: 1rem;
    font-weight: 600;
    color: var(--charcoal);
    margin: 0 0 0.5rem;
}

.admin-card__stat {
    font-family: var(--font-serif);
    font-size: 2rem;
    line-height: 1;
    color: var(--charcoal);
    margin: 0;
}
.admin-card__stat span {
    font-family: var(--font-body);
    font-size: 0.9rem;
    color: var(--muted);
}

.admin-card__meta {
    color: var(--muted);
    font-size: 0.85rem;
    margin: 0.4rem 0 0;
}

.admin-card__flag {
    display: inline-flex;
    align-items: center;
    gap: 0.4rem;
    margin-top: 0.6rem;
    font-size: 0.8rem;
    color: #b23;
}

.admin-card__cta {
    display: inline-flex;
    align-items: center;
    gap: 0.5rem;
    margin-top: 1rem;
    color: var(--sage-dark);
    font-size: 0.9rem;
}

.admin-panel {
    background: var(--bg-white);
    border: 1px solid var(--border);
    border-radius: var(--radius);
    padding: 1.5rem 1.75rem;
}
.admin-panel__head {
    display: flex;
    align-items: baseline;
    justify-content: space-between;
    gap: 1rem;
    margin-bottom: 1rem;
}
.admin-panel__title {
    font-family: var(--font-serif);
    font-size: 1.4rem;
    font-weight: 400;
    color: var(--charcoal);
    margin: 0;
}
.admin-panel__link { color: var(--sage-dark); font-size: 0.9rem; text-decoration: none; }
.admin-panel__link:hover { text-decoration: underline; }
.admin-empty { color: var(--muted); font-style: italic; }

.admin-lead-list { list-style: none; padding: 0; margin: 0; }
.admin-lead {
    display: grid;
    grid-template-columns: 1.4fr 1.4fr auto;
    gap: 1rem;
    align-items: center;
    padding: 0.8rem 0;
    border-bottom: 1px solid var(--border);
}
.admin-lead:last-child { border-bottom: none; }
.admin-lead__main { display: flex; flex-direction: column; }
.admin-lead__addr { color: var(--muted); font-size: 0.88rem; }
.admin-lead__contact { font-size: 0.88rem; color: var(--mid); }
.admin-lead__contact a { color: var(--sage-dark); text-decoration: none; }
.admin-lead__date { color: var(--muted); font-size: 0.82rem; white-space: nowrap; text-align: right; }

@media (max-width: 640px) {
    .admin-lead {
        grid-template-columns: 1fr;
        gap: 0.25rem;
    }
    .admin-lead__date { text-align: left; }
}

/* ============================================================
   FAQs PAGE - grouped accordion of bordered cards.

   Built on native <details>/<summary>, so every question still opens with
   JavaScript disabled. site.js progressively enhances it with a height
   transition and "only one open at a time" behaviour.
   ============================================================ */

.faq {
    max-width: 820px;
    margin: 0 auto;
}

/* Closing line of the FAQ intro paragraph. */
.faq-intro__chat {
    color: var(--gold);
}

/* Section heading between groups of questions. */
.faq__group {
    font-family: var(--font-serif);
    font-size: clamp(1.4rem, 2.6vw, 1.9rem);
    font-weight: 400;
    color: var(--black);
    margin: 3rem 0 1rem;
}

.faq__group:first-child {
    margin-top: 0;
}

/* Cards sit flush in a stack, so neighbouring borders read as one continuous
   rule - the top border is dropped on all but the first of each run. */
.faq__item {
    background: var(--bg-white);
    border: 1px solid var(--border);
}

.faq__item + .faq__item {
    border-top: none;
}

.faq__q {
    display: flex;
    align-items: flex-start;
    justify-content: space-between;
    gap: 1.5rem;
    cursor: pointer;
    padding: 1.15rem 1.35rem;
    font-family: var(--font-serif);
    font-size: clamp(1.1rem, 2vw, 1.3rem);
    line-height: 1.35;
    color: var(--black);
    background: var(--bg-white);
    transition: background-color 0.35s ease, color var(--transition);
    /* Hide the default disclosure triangle in favour of our own chevron. */
    list-style: none;
}

.faq__q::-webkit-details-marker {
    display: none;
}

.faq__q:hover {
    color: var(--gold);
}

.faq__q:focus-visible {
    outline: 2px solid var(--gold);
    outline-offset: -2px;
}

/* Chevron, drawn as a rotating caret so it needs no icon font. */
.faq__q::after {
    content: '';
    flex: 0 0 auto;
    width: 0.6rem;
    height: 0.6rem;
    margin-top: 0.4rem;
    border-right: 1.5px solid var(--gold);
    border-bottom: 1.5px solid var(--gold);
    transform: rotate(45deg);
    transition: transform 0.35s ease;
}

.faq__item[open] > .faq__q::after {
    transform: rotate(-135deg);
}

/* Only the question bar of an expanded item fills with pale sage - the answer
   below it stays white, so the long blocks of text keep maximum contrast. */
.faq__item[open] > .faq__q {
    background: var(--sage-pale);
    color: var(--sage-dark);
}

/* The animated wrapper. Height is driven from site.js; it carries no padding
   of its own so that collapsing to 0 leaves nothing showing. */
.faq__panel {
    overflow: hidden;
}

.faq__panel--animating {
    transition: height 0.35s ease;
}

.faq__a {
    padding: 0 1.35rem 1.35rem;
    max-width: 680px;
    color: var(--charcoal);
    line-height: 1.8;
}

.faq__a p + p {
    margin-top: 0.9rem;
}

@media (prefers-reduced-motion: reduce) {
    .faq__panel--animating {
        transition: none;
    }

    .faq__q::after {
        transition: none;
    }
}

/* ============================================================
   OUR LOCAL PARTNERS
   ============================================================ */

.partner {
    max-width: 1040px;
    margin: 0 auto;
    display: grid;
    grid-template-columns: 300px 1fr;
    gap: 3.5rem;
    align-items: start;
    padding: 3rem 0;
    border-top: 1px solid var(--border);
}

.partner:first-of-type {
    border-top: none;
    padding-top: 0;
}

/* Logos are artwork on a transparent background, not photography - so they sit
   on a soft cream panel and are contained rather than cropped to fill it. */
.partner__media {
    /*background: var(--cream);*/
    border-radius: 12px;
    padding: 2rem;
    display: flex;
    align-items: center;
    justify-content: center;
    min-height: 200px;
}

/* The logo links out to the partner's own site. */
.partner__logo-link {
    display: block;
    width: 100%;
    line-height: 0;
    transition: opacity var(--transition), transform var(--transition);
}

.partner__logo-link:hover {
    opacity: 0.85;
    transform: translateY(-3px);
}

.partner__logo-link:focus-visible {
    outline: 2px solid var(--gold);
    outline-offset: 6px;
}

.partner__logo {
    display: block;
    width: 100%;
    max-height: 180px;
    object-fit: contain;
}

.partner__role {
    display: block;
    font-family: var(--font-eyebrow);
    font-size: 1.5rem;
    color: var(--gold);
    margin-bottom: 0.4rem;
}

.partner__name {
    font-family: var(--font-serif);
    font-size: clamp(1.6rem, 3vw, 2.1rem);
    font-weight: 400;
    color: var(--black);
    line-height: 1.2;
    margin: 0 0 1.2rem;
}

.partner__subhead {
    font-family: var(--font-serif);
    font-size: 1.25rem;
    font-weight: 400;
    color: var(--black);
    margin: 1.75rem 0 0.6rem;
}

.partner__body p {
    color: var(--mid);
    line-height: 1.8;
    margin-bottom: 1rem;
}

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

@media (max-width: 900px) {
    .partner {
        grid-template-columns: 1fr;
        gap: 2rem;
    }

    /* Keep the logo panel from ballooning once it has the full width. */
    .partner__media {
        max-width: 320px;
        margin: 0 auto;
    }
}

/* Local Partners page: short "Local Commitment" note below the partner list. */
.local-commitment {
    max-width: 640px;
    margin: 3.5rem auto 0;
    text-align: center;
}

.local-commitment__title {
    font-family: var(--font-eyebrow);
    font-size: clamp(1.8rem, 3.5vw, 2.6rem);
    font-weight: 400;
    color: var(--gold);
    margin-bottom: 1rem;
}

.local-commitment p {
    font-family: var(--font-serif);
    font-size: 1.15rem;
    line-height: 1.7;
    color: var(--charcoal);
}

.local-commitment a {
    color: var(--gold);
    text-decoration: underline;
}

/* ============================================================
   TRANSPARENT HERO HEADER
   Applied only on pages whose first section is a hero (detected in
   site.js by class name containing "hero"). Header floats fixed and
   transparent over the hero image, then solidifies once the page has
   scrolled past it. On every other page the header keeps its normal
   sticky/opaque behaviour untouched.
   ============================================================ */

body.has-hero-header .site-header {
    position: fixed;
    top: 0;
    left: 0;
    right: 0;
    width: 100%;
    transition: background-color 0.7s ease, border-color 0.7s ease, box-shadow 0.7s ease;
}

body.has-hero-header .site-header.is-transparent {
    background: transparent;
    border-bottom-color: transparent;
    box-shadow: none;
}

/* Dark scrim behind the floating header only, independent of the hero
   image/overlay underneath - guarantees the white nav text stays legible
   even over a light/hazy hero slide, without darkening the rest of the
   hero. Sits behind the header's own content (which is z-index:100). */
body.has-hero-header .site-header.is-transparent::before {
    content: '';
    position: absolute;
    inset: 0;
    z-index: -1;
    background: linear-gradient(to bottom, rgba(10, 15, 20, 0.55) 0%, rgba(10, 15, 20, 0.32) 65%, rgba(10, 15, 20, 0) 100%);
    pointer-events: none;
}

body.has-hero-header .site-header.is-transparent .header-inner .site-nav > a,
body.has-hero-header .site-header.is-transparent .header-inner .nav-dropdown__trigger,
body.has-hero-header .site-header.is-transparent .header-inner .nav-account,
body.has-hero-header .site-header.is-transparent .header-inner .nav-account i,
body.has-hero-header .site-header.is-transparent .header-inner .social-icons a,
body.has-hero-header .site-header.is-transparent .header-inner .mobile-account,
body.has-hero-header .site-header.is-transparent .header-inner .mobile-account i,
body.has-hero-header .site-header.is-transparent .header-inner .nav-toggle span {
    color: #fff;
}

body.has-hero-header .site-header.is-transparent .header-inner .nav-toggle span {
    background: #fff;
}

body.has-hero-header .site-header.is-transparent .header-inner .social-icons a:hover,
body.has-hero-header .site-header.is-transparent .header-inner .site-nav > a:hover,
body.has-hero-header .site-header.is-transparent .header-inner .nav-dropdown:hover .nav-dropdown__trigger,
body.has-hero-header .site-header.is-transparent .header-inner .nav-dropdown.open .nav-dropdown__trigger {
    color: var(--sage-pale);
}

body.has-hero-header .site-header.is-transparent .logo-full,
body.has-hero-header .site-header.is-transparent .logo-initials {
    filter: brightness(0) invert(1);
}

body.has-hero-header .site-header.is-transparent .nav-cta {
    background: rgba(255, 255, 255, 0.12);
    border: 1px solid rgba(255, 255, 255, 0.65);
}

body.has-hero-header .site-header.is-transparent .nav-cta:hover {
    background: rgba(255, 255, 255, 0.28);
}

/* While the mobile menu is open, force the floating header back to its
   normal solid/white look and a solid green CTA, even though the hero
   underneath would otherwise keep it transparent. Reverts to transparent
   as soon as the menu closes (if the page is still scrolled to the top). */
body.has-hero-header .site-header.is-transparent.mobile-nav-open {
    background: var(--bg-white);
    border-bottom-color: var(--border);
}

body.has-hero-header .site-header.is-transparent.mobile-nav-open::before {
    display: none;
}

body.has-hero-header .site-header.is-transparent.mobile-nav-open .header-inner .site-nav > a,
body.has-hero-header .site-header.is-transparent.mobile-nav-open .header-inner .nav-dropdown__trigger,
body.has-hero-header .site-header.is-transparent.mobile-nav-open .header-inner .nav-account,
body.has-hero-header .site-header.is-transparent.mobile-nav-open .header-inner .nav-account i,
body.has-hero-header .site-header.is-transparent.mobile-nav-open .header-inner .social-icons a,
body.has-hero-header .site-header.is-transparent.mobile-nav-open .header-inner .mobile-account,
body.has-hero-header .site-header.is-transparent.mobile-nav-open .header-inner .mobile-account i,
body.has-hero-header .site-header.is-transparent.mobile-nav-open .header-inner .nav-toggle span {
    color: var(--charcoal);
}

body.has-hero-header .site-header.is-transparent.mobile-nav-open .header-inner .nav-toggle span {
    background: var(--sage);
}

body.has-hero-header .site-header.is-transparent.mobile-nav-open .logo-full,
body.has-hero-header .site-header.is-transparent.mobile-nav-open .logo-initials {
    filter: none;
}

body.has-hero-header .site-header.is-transparent.mobile-nav-open .nav-cta {
    background: var(--sage);
    border-color: transparent;
}

body.has-hero-header .site-header.is-transparent.mobile-nav-open .nav-cta:hover {
    background: var(--sage-dark);
}

/* The hero itself absorbs the header's height as top padding (box-sizing:
   border-box keeps its overall height unchanged) so its background image
   still extends edge-to-edge behind the floating header, while everything
   below it keeps exactly the vertical position it already had. */
body.has-hero-header .site-main > .page-body > :first-child,
body.has-hero-header .site-main > :first-child {
    padding-top: 120px;
}

@media (max-width: 860px) {
    body.has-hero-header .site-main > .page-body > :first-child,
    body.has-hero-header .site-main > :first-child {
        padding-top: 68px;
    }
}

/* ============================================================
   SPLASH SCREEN
   Shown once per browser session (see site.js) while the page's initial
   resources load, then fades out. The cookie banner is held back until
   this finishes so it never covers the loading bar.
   ============================================================ */

.splash-screen {
    position: fixed;
    inset: 0;
    z-index: 9999;
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    gap: 2rem;
    background: var(--bg-white);
    opacity: 1;
    transition: opacity 0.6s ease;
}

.splash-screen.is-hidden {
    opacity: 0;
    pointer-events: none;
}

.splash-screen__logo {
    width: min(320px, 70vw);
    height: auto;
}

.splash-screen__inner {
    position: relative;
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    text-align: center;
}

.splash-screen__image {
    width: min(560px, 82vw);
    height: auto;
}

.splash-screen__progress {
    margin-top: 0.5rem;
    width: min(560px, 82vw);
    height: 3px;
    background: var(--sage-pale);
    overflow: hidden;
    border-radius: 2px;
}

.splash-screen__progress-bar {
    width: 0%;
    height: 100%;
    background: var(--sage);
    transition: width 0.3s ease;
}

/* ============================================================
   PROPERTY DETAIL - CALCULATORS
   Mortgage repayment + stamp duty (SDLT) calculators shown in the
   property detail sidebar. Purely illustrative, non-binding figures.
   ============================================================ */

.detail-calculators {
    background: var(--sage-dark);
    padding: 4.5rem 2rem;
}

.detail-calculators__inner {
    max-width: 1100px;
    margin: 0 auto;
}

.calcx-cols {
    display: grid;
    grid-template-columns: 1fr auto 1fr;
    align-items: stretch;
    gap: 3rem;
}

.calcx-cols .calcx {
    min-width: 0;
}

.calcx__title {
    font-family: var(--font-serif);
    font-size: 2rem;
    font-weight: 300;
    color: #fff;
    margin-bottom: 2rem;
}

.calcx__grid {
    display: flex;
    flex-direction: column;
    gap: 2.5rem;
}

.calcx__row--spacer {
    visibility: hidden;
    pointer-events: none;
}

.calcx__row {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 1.5rem;
    margin-bottom: 1.5rem;
}

.calcx__field label {
    display: block;
    font-size: 0.72rem;
    letter-spacing: 0.08em;
    text-transform: uppercase;
    color: var(--sage-pale);
    margin-bottom: 0.6rem;
}

.calcx__field input,
.calcx__field select {
    width: 100%;
    padding: 0.85rem 1rem;
    background: rgba(255, 255, 255, 0.12);
    border: 1px solid rgba(255, 255, 255, 0.28);
    border-radius: var(--radius);
    font-size: 0.95rem;
    font-family: var(--font-body);
    color: #fff;
}

.calcx__field input[type="number"] {
    appearance: textfield;
    -moz-appearance: textfield;
}

    .calcx__field input[type="number"]::-webkit-inner-spin-button,
    .calcx__field input[type="number"]::-webkit-outer-spin-button {
        -webkit-appearance: none;
        margin: 0;
    }

.calcx__field select {
    appearance: none;
    -webkit-appearance: none;
    background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 12 8'%3E%3Cpath d='M1 1L6 6L11 1' stroke='%23ffffff' stroke-width='1.4' fill='none'/%3E%3C/svg%3E");
    background-repeat: no-repeat;
    background-position: right 1rem center;
    background-size: 11px 8px;
    padding-right: 2.5rem;
    cursor: pointer;
}

.calcx__field input:focus,
.calcx__field select:focus {
    outline: none;
    border-color: #fff;
}

/* JS-enhanced selects (.js-cselect) get wrapped in a .cselect - style the
   trigger to match the dark input fields; the dropdown panel itself stays
   the default light/sage-hover style, which is the whole point (a real
   styled panel instead of the browser's unstyled native option list). */
.calcx__field .cselect__trigger {
    height: auto;
    padding: 0.85rem 1rem;
    background: rgba(255, 255, 255, 0.12);
    border: 1px solid rgba(255, 255, 255, 0.28);
    color: #fff;
    font-size: 0.95rem;
}

.calcx__field .cselect__trigger::after {
    border-color: #fff;
}

.calcx__field .cselect.is-open .cselect__trigger {
    outline: 1px solid #fff;
    border-color: #fff;
}

.calcx__result-value {
    font-family: var(--font-serif);
    font-size: clamp(2.4rem, 4vw, 3.2rem);
    font-weight: 300;
    color: #fff;
    line-height: 1.1;
    margin-bottom: 0.4rem;
}

.calcx__result-label {
    font-size: 0.75rem;
    letter-spacing: 0.12em;
    text-transform: uppercase;
    color: var(--sage-pale);
    margin-bottom: 1.5rem;
}

.calcx__result-extra {
    margin-top: 0.5rem;
    padding-top: 1rem;
    border-top: 1px solid rgba(255, 255, 255, 0.28);
}

.calcx__result-extra-row {
    display: flex;
    justify-content: space-between;
    gap: 1rem;
    font-size: 0.85rem;
    color: rgba(255, 255, 255, 0.85);
    padding: 0.25rem 0;
}

.calcx__disclaimer {
    margin-top: 1.25rem;
    font-size: 0.85rem;
    line-height: 1.55;
    color: rgba(255, 255, 255, 0.7);
}

.calcx-cols .calcx__divider {
    width: 1px;
    align-self: stretch;
    background: rgba(255, 255, 255, 0.22);
    margin: 0;
}

/* ============================================================
   PROPERTY DETAIL - FULLSCREEN PHOTO LIGHTBOX
   ============================================================ */

.pdp-lightbox {
    position: fixed;
    inset: 0;
    z-index: 1000;
    background: rgba(8, 8, 8, 0.97);
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    opacity: 0;
    visibility: hidden;
    transition: opacity 0.25s ease, visibility 0.25s ease;
}

.pdp-lightbox.is-open {
    opacity: 1;
    visibility: visible;
}

.pdp-lightbox__stage {
    flex: 1;
    width: 100%;
    display: flex;
    align-items: center;
    justify-content: center;
    padding: 4rem 5rem 1rem;
    min-height: 0;
}

    .pdp-lightbox__stage img {
        max-width: 100%;
        max-height: 100%;
        object-fit: contain;
    }

.pdp-lightbox__close {
    position: absolute;
    top: 1.25rem;
    right: 1.5rem;
    width: 42px;
    height: 42px;
    border: none;
    border-radius: 50%;
    background: rgba(255,255,255,0.1);
    color: #fff;
    font-size: 1.1rem;
    cursor: pointer;
    display: flex;
    align-items: center;
    justify-content: center;
    transition: background var(--transition);
    z-index: 2;
}

    .pdp-lightbox__close:hover {
        background: rgba(255,255,255,0.22);
    }

.pdp-lightbox__arrow {
    position: absolute;
    top: 50%;
    transform: translateY(-50%);
    width: 48px;
    height: 48px;
    border: none;
    border-radius: 50%;
    background: rgba(255,255,255,0.92);
    color: var(--charcoal);
    font-size: 1.1rem;
    cursor: pointer;
    display: flex;
    align-items: center;
    justify-content: center;
    transition: background var(--transition), color var(--transition);
    z-index: 2;
}

    .pdp-lightbox__arrow:hover {
        background: var(--sage-dark);
        color: #fff;
    }

.pdp-lightbox__arrow--prev {
    left: 1.25rem;
}

.pdp-lightbox__arrow--next {
    right: 1.25rem;
}

.pdp-lightbox__counter {
    color: rgba(255,255,255,0.7);
    font-size: 0.8rem;
    letter-spacing: 0.1em;
    margin-bottom: 0.75rem;
}

.pdp-lightbox__filmstrip {
    width: 100%;
    max-width: 900px;
    display: flex;
    gap: 6px;
    overflow-x: auto;
    padding: 0 1.5rem 1.25rem;
}

    .pdp-lightbox__filmstrip img {
        flex-shrink: 0;
        width: 76px;
        height: 54px;
        object-fit: cover;
        border-radius: 3px;
        opacity: 0.45;
        cursor: pointer;
        transition: opacity var(--transition);
    }

    .pdp-lightbox__filmstrip img:hover {
        opacity: 0.8;
    }

    .pdp-lightbox__filmstrip img.is-active {
        opacity: 1;
        outline: 2px solid var(--sage);
        outline-offset: -2px;
    }

@media (max-width: 768px) {
    /* Two half-width photos are too small to read on a phone - show one
       full-width image instead, still navigable via the same arrows. */
    .pdp-gallery__viewport {
        grid-template-columns: 1fr;
        height: 46vh;
    }

    .pdp-gallery__frame:nth-child(3) {
        display: none;
    }

    .pdp-thumbs__strip,
    .pdp-quicknav {
        padding-left: 1.25rem;
        padding-right: 1.25rem;
    }

    .detail-calculators {
        padding: 2.5rem 1.5rem;
    }

    .calcx-cols {
        grid-template-columns: 1fr;
        gap: 2.5rem;
    }

    .calcx__row--spacer {
        display: none;
    }

    .calcx__grid {
        gap: 2rem;
    }

    .calcx__row {
        grid-template-columns: 1fr;
        gap: 1rem;
    }

    .calcx-cols .calcx__divider {
        width: 100%;
        height: 1px;
    }

    .pdp-lightbox__stage {
        padding: 3.5rem 1.25rem 1rem;
    }

    .pdp-lightbox__arrow {
        width: 40px;
        height: 40px;
    }

    .pdp-lightbox__filmstrip img {
        width: 60px;
        height: 42px;
    }

    .pdp-map-modal__close {
        top: 0.85rem;
        right: 0.85rem;
    }
}

/* ============================================================
   PROPERTY DETAIL - FULLSCREEN MAP MODAL
   ============================================================ */

.pdp-map-modal {
    position: fixed;
    inset: 0;
    z-index: 1000;
    display: flex;
    align-items: center;
    justify-content: center;
    padding: 3rem 2rem;
    background: rgba(13,13,13,0.72);
    opacity: 0;
    visibility: hidden;
    transition: opacity 0.25s ease, visibility 0.25s ease;
}

.pdp-map-modal.is-open {
    opacity: 1;
    visibility: visible;
}

.pdp-map-modal__canvas {
    width: min(1000px, 100%);
    height: min(640px, 100%);
    border-radius: var(--radius);
    overflow: hidden;
    background: var(--bg-white);
    box-shadow: var(--shadow);
}

    .pdp-map-modal__canvas iframe {
        width: 100%;
        height: 100%;
        display: block;
    }

.pdp-map-modal__close {
    position: absolute;
    top: 1.25rem;
    right: 1.5rem;
    z-index: 2;
    width: 42px;
    height: 42px;
    border: none;
    border-radius: 50%;
    background: rgba(255,255,255,0.92);
    color: var(--charcoal);
    font-size: 1.1rem;
    cursor: pointer;
    display: flex;
    align-items: center;
    justify-content: center;
    box-shadow: var(--shadow);
    transition: background var(--transition), color var(--transition);
}

    .pdp-map-modal__close:hover {
        background: var(--sage-dark);
        color: #fff;
    }