@charset "UTF-8";
/* Seesig Motors stylesheet — build b20260809-1354 */
/* ==========================================================================
   Seesig Motors — "Forecourt"
   Bone paper, logo blue, mustard accents, soft corners.
   Self-contained: no Bootstrap, no template CSS.
   ========================================================================== */

:root {
    /* Colour --------------------------------------------------------------
       The brand trio below is taken from the logo. Change these three and the
       whole site follows — buttons, panels, footer, gradients, form focus. */
    --paper:      #F8F6F2;   /* page background */
    --paper-2:    #EFEDE7;   /* alternate band */
    --surface:    #FFFFFF;   /* cards, panels */

    --ink:        #1C1B18;
    --ink-soft:   #55524A;
    --ink-faint:  #837E73;

    --brand:      #123A5C;   /* primary — logo blue */
    --brand-lift: #2E6E9E;   /* hover, secondary surfaces */
    --brand-deep: #0A2740;   /* footer, deep panels */

    --mustard:    #D9A441;
    --mustard-2:  #C08F2F;

    --rule:       #DFDCD4;
    --rule-soft:  #E9E7E1;
    --on-dark:    #C2D4E2;

    /* Depth — warm rather than grey. Each is a tight contact shadow plus a
       wide soft one, which is what stops a card looking like a flat rectangle
       with a grey smudge under it. -------------------------------------- */
    --shadow-1: 0 1px 2px rgba(28, 27, 24, 0.06), 0 6px 16px rgba(28, 27, 24, 0.08);
    --shadow-2: 0 3px 8px rgba(28, 27, 24, 0.08), 0 20px 44px rgba(28, 27, 24, 0.16);
    --shadow-3: 0 30px 70px rgba(10, 39, 64, 0.38);

    /* Cards sit a little higher than panels, and higher again on hover. */
    --shadow-card:       0 2px 5px rgba(28, 27, 24, 0.07), 0 12px 28px rgba(28, 27, 24, 0.11);
    --shadow-card-hover: 0 6px 14px rgba(28, 27, 24, 0.10), 0 28px 56px rgba(28, 27, 24, 0.20);

    /* Type --------------------------------------------------------------- */
    /* Swapping either of these two lines re-fonts the whole site. Remember to
       change the Google Fonts request in includes/partials/header.php to match. */
    --display: 'Archivo', 'Helvetica Neue', Arial, sans-serif;
    --body:    'Manrope', 'Segoe UI', Arial, sans-serif;

    /* Shape & motion ----------------------------------------------------- */
    --gutter: clamp(1.15rem, 4vw, 3.5rem);
    --r:      14px;   /* cards, panels */
    --r-sm:   10px;   /* inputs, buttons */
    --r-pill: 100px;
    --ease:     cubic-bezier(0.2, 0.7, 0.2, 1);
    --ease-out: cubic-bezier(0.16, 1, 0.3, 1);
}

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

html {
    -webkit-text-size-adjust: 100%;
    scroll-behavior: smooth;
    scroll-padding-top: 6rem;
}

body {
    margin: 0;
    background: var(--paper);
    color: var(--ink);
    font-family: var(--body);
    font-size: 16px;
    line-height: 1.62;
    -webkit-font-smoothing: antialiased;
}

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

a { color: var(--brand); text-decoration: none; }
a:hover { color: var(--brand-lift); }

::selection { background: var(--mustard); color: var(--ink); }

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

.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;
}

.skip {
    position: absolute;
    top: -4rem; left: 1rem;
    z-index: 100;
    background: var(--mustard);
    color: var(--ink);
    font-weight: 700;
    font-size: 0.85rem;
    padding: 0.75rem 1.25rem;
    border-radius: var(--r-sm);
    transition: top 0.2s var(--ease);
}
.skip:focus { top: 1rem; }

.shell {
    width: 100%;
    max-width: 1300px;
    margin-inline: auto;
    padding-inline: var(--gutter);
}

/* --- Type roles ---------------------------------------------------------- */

h1, h2, h3, h4 {
    font-family: var(--display);
    font-weight: 700;
    letter-spacing: -0.015em;
    line-height: 1.06;
    margin: 0;
    text-wrap: balance;
}

.eyebrow {
    display: inline-flex;
    align-items: center;
    gap: 0.55rem;
    font-size: 0.76rem;
    font-weight: 700;
    letter-spacing: 0.12em;
    text-transform: uppercase;
    color: var(--brand-lift);
    margin: 0 0 0.85rem;
}
.eyebrow::before {
    content: '';
    width: 0.45rem; height: 0.45rem;
    border-radius: 50%;
    background: var(--mustard);
    flex: none;
}

.lede {
    font-size: clamp(0.95rem, 1.1vw, 1.05rem);
    color: var(--ink-soft);
    max-width: 36rem;
}

/* --- Page load ------------------------------------------------------------
   The page is readable from the first paint. It just sits slightly out of
   focus while fonts and images land, with a slim bar at the top, and sharpens
   when everything is in.

   Both clear on a CSS timer, not on JavaScript. If a script fails the page
   still sharpens itself — a permanently blurred page would be far worse than
   no effect at all. JavaScript only shortens the wait.
   -------------------------------------------------------------------------- */

.loadbar {
    position: fixed;
    top: 0; left: 0; right: 0;
    z-index: 210;
    height: 3px;
    overflow: hidden;
    pointer-events: none;
    animation: loadbarOut 0.4s var(--ease) 1.25s forwards;
}
.loadbar.is-done { animation: loadbarOut 0.35s var(--ease) forwards; }
.loadbar span {
    display: block;
    width: 32%;
    height: 100%;
    border-radius: 0 2px 2px 0;
    background: linear-gradient(to right, transparent, var(--mustard));
    animation: loadbarSlide 0.95s var(--ease) infinite;
}
@keyframes loadbarSlide {
    0%   { transform: translateX(-105%); }
    100% { transform: translateX(420%); }
}
@keyframes loadbarOut { to { opacity: 0; visibility: hidden; } }

/* Soft focus while loading, sharp when ready. The blur is small on purpose:
   enough to read as "still settling", not enough to stop anyone reading. */
.js .page-veil {
    filter: blur(4px);
    opacity: 0.82;
    animation: veilClear 0.55s var(--ease) 1.2s forwards;
}
.js .page-veil.is-ready { animation: veilClear 0.45s var(--ease) forwards; }

@keyframes veilClear {
    to { filter: blur(0); opacity: 1; }
}

/* --- Reveal on scroll ---------------------------------------------------- */

.js [data-reveal] {
    opacity: 0;
    transform: translateY(20px);
    transition: opacity 0.75s var(--ease-out), transform 0.75s var(--ease-out);
}
.js [data-reveal].is-in { opacity: 1; transform: none; }

/* --- Utility bar --------------------------------------------------------- */

.utility {
    background: var(--brand);
    color: var(--on-dark);
    font-size: 0.74rem;
}
.utility .shell {
    display: flex;
    flex-wrap: wrap;
    gap: 0.25rem 2rem;
    align-items: center;
    justify-content: space-between;
    padding-block: 0.45rem;
}
.utility a { color: #F1EADC; font-weight: 500; }
.utility a:hover { color: var(--mustard); }
.utility__set { display: flex; flex-wrap: wrap; gap: 1.5rem; }
.utility .bi { margin-right: 0.4rem; opacity: 0.7; font-size: 0.9em; }
.utility a:hover .bi { opacity: 1; }
@media (max-width: 660px) {
    .utility__set:first-child { display: none; }
    .utility .shell { justify-content: center; }
}

/* --- Masthead ------------------------------------------------------------ */

.masthead {
    position: sticky;
    top: 0;
    z-index: 40;
    background: rgba(250, 246, 239, 0.86);
    backdrop-filter: saturate(1.3) blur(12px);
    border-bottom: 1px solid transparent;
    transition: border-color 0.3s var(--ease), box-shadow 0.3s var(--ease), background 0.3s var(--ease);
}
.masthead.is-stuck {
    border-bottom-color: var(--rule);
    background: rgba(250, 246, 239, 0.96);
    box-shadow: var(--shadow-1);
}
.masthead .shell {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 1rem;
    padding-block: 1.05rem;
    transition: padding 0.3s var(--ease);
}
.masthead.is-stuck .shell { padding-block: 0.7rem; }

.brand { display: flex; align-items: center; gap: 0.8rem; color: var(--ink); }
.brand:hover { color: var(--ink); }
.brand img {
    width: 46px; height: 46px;
    border-radius: 50%;
    transition: width 0.3s var(--ease), height 0.3s var(--ease);
}
.masthead.is-stuck .brand img { width: 38px; height: 38px; }
.brand__name {
    font-family: var(--display);
    font-weight: 700;
    font-size: 1.22rem;
    letter-spacing: -0.02em;
    line-height: 1.05;
    color: var(--brand);
}
.brand__place {
    font-size: 0.7rem;
    font-weight: 600;
    letter-spacing: 0.14em;
    text-transform: uppercase;
    color: var(--ink-faint);
}

.nav { display: flex; align-items: center; gap: 0.25rem; }
.nav a {
    position: relative;
    font-size: 0.95rem;
    font-weight: 500;
    color: var(--ink);
    padding: 0.55rem 0.85rem;
    border-radius: var(--r-pill);
    transition: background 0.2s var(--ease), color 0.2s var(--ease);
}
.nav a:hover { background: var(--paper-2); color: var(--brand); }
.nav a[aria-current="page"] { background: var(--paper-2); color: var(--brand); font-weight: 700; }

.nav a { display: inline-flex; align-items: center; gap: 0.45rem; }
.nav .bi { font-size: 1.02em; color: var(--brand-lift); transition: color 0.2s var(--ease); }
.nav a:hover .bi,
.nav a[aria-current="page"] .bi { color: var(--brand); }
.nav__cta .bi { color: var(--ink) !important; }

.nav__cta {
    margin-left: 0.6rem;
    background: var(--mustard) !important;
    color: var(--ink) !important;
    font-weight: 700 !important;
    padding: 0.65rem 1.2rem !important;
    box-shadow: var(--shadow-1);
    transition: background 0.2s var(--ease), transform 0.15s var(--ease);
}
.nav__cta:hover { background: var(--mustard-2) !important; transform: translateY(-1px); }

.nav-toggle {
    display: none;
    align-items: center;
    gap: 0.45rem;
    background: var(--surface);
    border: 1px solid var(--rule);
    border-radius: var(--r-pill);
    padding: 0.6rem 1.1rem;
    font-family: var(--body);
    font-size: 0.88rem;
    font-weight: 600;
    cursor: pointer;
}
.nav-toggle .bi { font-size: 1.15em; color: var(--brand); }

@media (max-width: 980px) {
    .nav-toggle { display: inline-flex; }
    .nav {
        display: none;
        position: absolute;
        top: 100%; left: 0; right: 0;
        flex-direction: column;
        align-items: stretch;
        gap: 0.15rem;
        background: var(--paper);
        border-bottom: 1px solid var(--rule);
        box-shadow: var(--shadow-2);
        padding: 0.75rem var(--gutter) 1.25rem;
    }
    .nav[data-open="true"] { display: flex; }
    .nav a { border-radius: var(--r-sm); padding: 0.9rem 1rem; }
    .nav__cta { margin: 0.6rem 0 0; text-align: center; }
}

/* --- Buttons ------------------------------------------------------------- */

.btn {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: 0.5rem;
    font-family: var(--body);
    font-size: 0.95rem;
    font-weight: 700;
    padding: 0.9rem 1.7rem;
    border: 1px solid var(--brand);
    border-radius: var(--r-pill);
    background: var(--brand);
    color: #FAF6EF;
    cursor: pointer;
    transition: background 0.22s var(--ease), border-color 0.22s var(--ease),
                color 0.22s var(--ease), transform 0.15s var(--ease), box-shadow 0.22s var(--ease);
}
.btn:hover {
    background: var(--brand-lift);
    border-color: var(--brand-lift);
    color: #FAF6EF;
    transform: translateY(-1px);
    box-shadow: var(--shadow-1);
}
.btn:active { transform: translateY(0); }

.btn--ghost { background: transparent; color: var(--brand); border-color: var(--brand); }
.btn--ghost:hover { background: var(--brand); color: #FAF6EF; }

.btn--light { background: var(--mustard); border-color: var(--mustard); color: var(--ink); }
.btn--light:hover { background: var(--mustard-2); border-color: var(--mustard-2); color: var(--ink); }

.btn--full { width: 100%; }

/* --- Hero ---------------------------------------------------------------- */

.hero {
    position: relative;
    background: var(--brand);
    color: #FAF6EF;
    overflow: hidden;
    isolation: isolate;
}
.hero__media {
    position: absolute;
    inset: 0;
    width: 100%; height: 100%;
    object-fit: cover;
    opacity: 0.5;
    transform: scale(1.06);
    animation: heroDrift 22s var(--ease-out) forwards;
    z-index: -2;
}
@keyframes heroDrift { to { transform: scale(1); } }

.hero::before {
    content: '';
    position: absolute;
    inset: 0;
    z-index: -1;
    background:
        linear-gradient(96deg, rgba(20, 52, 42, 0.95) 10%, rgba(20, 52, 42, 0.62) 55%, rgba(20, 52, 42, 0.32) 100%),
        linear-gradient(to top, rgba(13, 32, 25, 0.8), transparent 45%);
}

.hero__inner {
    position: relative;
    padding-block: clamp(2.5rem, 7vw, 4.75rem);
    max-width: 42rem;
}
.hero .eyebrow { color: var(--mustard); }
.hero .eyebrow::before { background: var(--mustard); }
.hero h1 {
    font-size: clamp(1.85rem, 4.4vw, 3.1rem);
    letter-spacing: -0.02em;
    margin-bottom: 0.85rem;
    color: #FDFBF6;
}
.hero h1 em { font-style: normal; color: var(--mustard); }
.hero p {
    font-size: clamp(0.96rem, 1.15vw, 1.06rem);
    color: #CEDCE8;
    max-width: 30rem;
    margin: 0 0 1.6rem;
}

/* Staggered entrance */
.js .hero__inner > * {
    opacity: 0;
    transform: translateY(18px);
    animation: heroRise 0.9s var(--ease-out) forwards;
}
.js .hero__inner > *:nth-child(1) { animation-delay: 0.05s; }
.js .hero__inner > *:nth-child(2) { animation-delay: 0.14s; }
.js .hero__inner > *:nth-child(3) { animation-delay: 0.23s; }
.js .hero__inner > *:nth-child(4) { animation-delay: 0.32s; }
.js .hero__inner > *:nth-child(5) { animation-delay: 0.41s; }
@keyframes heroRise { to { opacity: 1; transform: none; } }

/* The search control and the chips fade in without rising.
   Every hero element started 18px low and lifted into place. Fine for a
   heading, wrong here: the chips sit directly under the search box, so the lift
   closed the gap between them by 18px just as the animation finished. The
   spacing looked right while the page was loading and wrong once it settled.
   Animating only the two of them would invert the problem — whichever moves
   changes the gap — so neither moves. They fade, the gap is constant. */
/* Class + element, so it outranks .hero p. */
.hero p.chips { margin: 2.5rem 0 0; }

.js .hero__inner > .finder,
.js .hero__inner > .chips {
    transform: none;
    animation-name: heroFade;
}
@keyframes heroFade { to { opacity: 1; } }

.finder {
    display: flex;
    flex-wrap: wrap;
    gap: 0.55rem;
    background: rgba(250, 246, 239, 0.12);
    border: 1px solid rgba(250, 246, 239, 0.26);
    border-radius: var(--r-pill);
    padding: 0.5rem;
    backdrop-filter: blur(6px);
    box-shadow: var(--shadow-3);
    max-width: 29rem;
    transition: border-color 0.25s var(--ease);
}
.finder:focus-within { border-color: var(--mustard); }
.finder input {
    flex: 1 1 15rem;
    min-width: 0;
    border: 0;
    border-radius: var(--r-pill);
    padding: 0.8rem 1.15rem;
    font-family: var(--body);
    font-size: 0.96rem;
    color: var(--ink);
    background: var(--surface);
}
.finder input:focus { outline: none; }
.finder .btn { flex: 0 0 auto; }

/* On a phone there is no room for the field and the button side by side, and
   the previous attempt kept them inside the pill — which left a shape within a
   shape. Below 560px the container stops being a pill at all: it is just a
   wrapper, and the field and button become two plain stacked blocks. Nothing
   nested, nothing to misalign. */
@media (max-width: 560px) {
    .finder {
        display: block;
        max-width: none;
        padding: 0;
        background: transparent;
        border: 0;
        border-radius: 0;
        box-shadow: none;
        backdrop-filter: none;
    }
    .finder:focus-within { border-color: transparent; }

    .finder input {
        display: block;
        width: 100%;
        margin-bottom: 0.55rem;
        border: 1px solid rgba(250, 246, 239, 0.35);
        border-radius: 12px;
        padding: 0.95rem 1.1rem;
        /* 16px exactly. Below that, iOS zooms the page when the field is
           focused and leaves the visitor scrolled sideways. */
        font-size: 1rem;
        box-shadow: var(--shadow-1);
    }
    .finder input:focus { border-color: var(--mustard); }

    .finder .btn {
        display: flex;
        width: 100%;
        justify-content: center;
        border-radius: 12px;
        padding-block: 0.95rem;
        font-size: 1rem;
    }

}

.chips {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    /* Row gap is the larger of the two: when the chips wrap onto a second line
       the rows need more separation than the chips within a row, or the block
       reads as a grid rather than a list. */
    gap: 0.7rem 0.5rem;
    /* Clear of the search control, so the chips read as a separate suggestion
       rather than part of it. Applies at every width.
       Note the selector below: .chips is a <p>, and ".hero p { margin: 0 0 1.6rem }"
       is class-plus-element, so it outranks a lone .chips class and was
       resetting this to 0. */
    margin: 2.5rem 0 0;
    font-size: 0.83rem;
    color: #AEC2D2;
}
.chip {
    display: inline-block;
    border: 1px solid rgba(250, 246, 239, 0.3);
    border-radius: var(--r-pill);
    padding: 0.35rem 0.95rem;
    color: #FAF6EF;
    font-weight: 500;
    transition: background 0.2s var(--ease), border-color 0.2s var(--ease);
}
.chip:hover { background: rgba(250, 246, 239, 0.15); border-color: var(--mustard); color: #FAF6EF; }

.hero__scroll {
    position: absolute;
    bottom: 1.5rem;
    right: var(--gutter);
    font-size: 0.72rem;
    font-weight: 600;
    letter-spacing: 0.16em;
    text-transform: uppercase;
    color: #8FA3B5;
    display: flex;
    align-items: center;
    gap: 0.6rem;
}
.hero__scroll::after {
    content: '';
    width: 1px; height: 2.5rem;
    background: linear-gradient(to bottom, var(--mustard), transparent);
    animation: scrollPulse 2.4s var(--ease) infinite;
    transform-origin: top;
}
@keyframes scrollPulse {
    0%, 100% { transform: scaleY(0.4); opacity: 0.4; }
    50%      { transform: scaleY(1);   opacity: 1; }
}
@media (max-width: 820px) { .hero__scroll { display: none; } }

/* --- Credentials strip --------------------------------------------------- */

.creds { background: var(--surface); border-bottom: 1px solid var(--rule); }
.creds .shell {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(210px, 1fr));
    padding-inline: 0;
}
.cred { padding: 1.85rem var(--gutter); border-left: 1px solid var(--rule-soft); }
.cred:first-child { border-left: 0; }
.cred__figure {
    font-family: var(--display);
    font-weight: 700;
    font-size: 1.6rem;
    letter-spacing: -0.022em;
    color: var(--brand);
    line-height: 1;
    margin: 0;
}
.cred__label { font-size: 0.9rem; color: var(--ink-soft); margin: 0.45rem 0 0; max-width: 22rem; }
@media (max-width: 720px) {
    .cred { border-left: 0; border-top: 1px solid var(--rule-soft); padding-block: 1.25rem; }
    .cred:first-child { border-top: 0; }
}

/* --- Sections ------------------------------------------------------------ */

.section { padding-block: clamp(3rem, 7vw, 5.5rem); }
.section--white { background: var(--surface); border-block: 1px solid var(--rule); }
.section--paper { background: var(--paper-2); }

.section__head {
    display: flex;
    flex-wrap: wrap;
    align-items: flex-end;
    justify-content: space-between;
    gap: 1rem 2rem;
    margin-bottom: 2rem;
    padding-bottom: 1.1rem;
    border-bottom: 1px solid var(--rule);
}
.section__head h2 { font-size: clamp(1.35rem, 2.6vw, 1.95rem); }
.section__link {
    display: inline-flex;
    align-items: center;
    gap: 0.45rem;
    font-size: 0.95rem;
    font-weight: 700;
    color: var(--brand-lift);
    white-space: nowrap;
}
.section__link::after {
    content: '→';
    transition: transform 0.25s var(--ease);
}
.section__link:hover::after { transform: translateX(4px); }

/* --- Stock card ---------------------------------------------------------- */

.rail {
    display: grid;
    grid-auto-flow: column;
    grid-auto-columns: minmax(296px, 1fr);
    gap: 1.4rem;
    overflow-x: auto;
    scroll-snap-type: x mandatory;
    padding: 0.35rem 0.35rem 1rem;
    margin-inline: -0.35rem;
    scrollbar-width: thin;
    scrollbar-color: var(--rule) transparent;
}
.rail > * { scroll-snap-align: start; }
.rail::-webkit-scrollbar { height: 6px; }
.rail::-webkit-scrollbar-thumb { background: var(--rule); border-radius: 100px; }

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

.card {
    position: relative;
    display: flex;
    flex-direction: column;
    background: var(--surface);
    border: 1px solid var(--rule-soft);
    border-radius: 18px;
    overflow: hidden;
    box-shadow: var(--shadow-card);
    transition: transform 0.35s var(--ease), box-shadow 0.35s var(--ease),
                border-color 0.35s var(--ease);
}
.card:hover {
    transform: translateY(-6px);
    border-color: var(--rule);
    box-shadow: var(--shadow-card-hover);
}

/* --- Photo ---------------------------------------------------------------- */

.card__media {
    position: relative;
    aspect-ratio: 16 / 11;
    background: var(--paper-2);
    overflow: hidden;
}
.card__media img {
    width: 100%; height: 100%;
    object-fit: cover;
    transition: transform 0.8s var(--ease-out);
}
.card:hover .card__media img { transform: scale(1.07); }

/* A soft gradient at the foot of the photo so the colour tag stays readable
   whatever the picture underneath is doing. */
.card__media::after {
    content: '';
    position: absolute;
    inset: auto 0 0 0;
    height: 45%;
    background: linear-gradient(to top, rgba(10, 39, 64, 0.55), transparent);
    pointer-events: none;
}

.card__flag {
    position: absolute;
    top: 0.75rem; left: 0.75rem;
    z-index: 1;
    margin: 0;
    padding: 0.32rem 0.75rem;
    border-radius: var(--r-pill);
    background: rgba(255, 255, 255, 0.94);
    backdrop-filter: blur(6px);
    color: var(--brand);
    font-size: 0.68rem;
    font-weight: 700;
    letter-spacing: 0.08em;
    text-transform: uppercase;
    box-shadow: 0 1px 3px rgba(10, 39, 64, 0.18);
}

.card__colour {
    position: absolute;
    bottom: 0.7rem; left: 0.85rem;
    z-index: 1;
    margin: 0;
    color: #FFFFFF;
    font-size: 0.76rem;
    font-weight: 600;
    letter-spacing: 0.02em;
    text-shadow: 0 1px 3px rgba(10, 39, 64, 0.5);
}

/* --- Body ----------------------------------------------------------------- */

.card__body {
    display: flex;
    flex-direction: column;
    gap: 0.5rem;
    padding: 1.1rem 1.15rem 1.2rem;
    flex: 1;
}

.card__title {
    font-family: var(--display);
    font-weight: 700;
    font-size: 1.02rem;
    line-height: 1.25;
    letter-spacing: -0.015em;
    color: var(--ink);
}
.card__title a { color: inherit; }
.card__title a::after { content: ''; position: absolute; inset: 0; z-index: 1; }
.card__title a:hover { color: var(--brand-lift); }

.card__model {
    margin: -0.25rem 0 0;
    font-size: 0.86rem;
    color: var(--ink-faint);
}

/* The three facts that decide a click, as quiet chips. */
.card__facts {
    display: flex;
    flex-wrap: wrap;
    gap: 0.35rem;
    list-style: none;
    margin: 0.15rem 0 0;
    padding: 0;
}
.card__facts li {
    display: inline-flex;
    align-items: center;
    gap: 0.32rem;
    padding: 0.3rem 0.6rem;
    border-radius: 8px;
    background: var(--paper-2);
    color: var(--ink-soft);
    font-size: 0.76rem;
    font-weight: 500;
    white-space: nowrap;
}
.card__facts .bi { font-size: 0.9em; color: var(--brand-lift); }

.card__foot {
    margin-top: auto;
    padding-top: 0.9rem;
    display: flex;
    align-items: flex-end;
    justify-content: space-between;
    gap: 0.75rem;
}

.card__price {
    font-family: var(--display);
    font-weight: 700;
    font-size: 1.3rem;
    letter-spacing: -0.022em;
    color: var(--brand);
    margin: 0;
    line-height: 1.1;
}
.card__price sup {
    font-size: 0.56em;
    font-weight: 500;
    top: -0.55em;
    margin-right: 0.1em;
    opacity: 0.65;
}

.card__monthly {
    margin: 0.15rem 0 0;
    font-size: 0.76rem;
    color: var(--ink-faint);
    cursor: help;
}

/* The arrow is a real link, and sits above the invisible overlay that makes the
   rest of the card clickable — otherwise the overlay swallows the click and the
   arrow does nothing. */
.card__go {
    position: relative;
    z-index: 2;
    display: grid;
    place-items: center;
    flex: none;
    width: 2.1rem; height: 2.1rem;
    border-radius: 50%;
    background: var(--paper-2);
    color: var(--brand);
    font-size: 0.95rem;
    transition: background 0.25s var(--ease), color 0.25s var(--ease),
                transform 0.25s var(--ease);
}
.card:hover .card__go,
.card__go:hover,
.card__go:focus-visible {
    background: var(--brand);
    color: #FFFFFF;
    transform: translateX(2px);
}
.card__go:hover { background: var(--brand-lift); }

.card__stock {
    margin: 0.55rem 0 0;
    padding-top: 0.55rem;
    border-top: 1px solid var(--rule-soft);
    font-size: 0.7rem;
    letter-spacing: 0.06em;
    text-transform: uppercase;
    color: var(--ink-faint);
}

/* A one-line note under any grid of cards carrying a monthly figure. */
.grid__note {
    margin: 1.25rem 0 0;
    font-size: 0.78rem;
    color: var(--ink-faint);
}

/* --- Empty state --------------------------------------------------------- */

.empty {
    border: 1px dashed var(--rule);
    border-radius: var(--r);
    padding: 3rem 1.5rem;
    text-align: center;
    color: var(--ink-soft);
    background: var(--surface);
}
.empty .btn { margin: 0.35rem; }

/* --- Wanted vehicles ----------------------------------------------------- */

.wanted {
    position: relative;
    background:
        radial-gradient(120% 90% at 10% 0%, #1B527E 0%, transparent 62%),
        var(--brand);
    color: #FAF6EF;
    overflow: hidden;
}
.wanted h2 { color: #FDFBF6; }
.wanted .eyebrow { color: var(--mustard); }
.wanted .section__head { border-bottom-color: rgba(250, 246, 239, 0.2); }
.wanted__lead { color: var(--on-dark); max-width: 38rem; margin: 0 0 0.5rem; }

.wanted__list { list-style: none; margin: 1.5rem 0 0; padding: 0; }
.wanted__item {
    display: flex;
    flex-wrap: wrap;
    align-items: baseline;
    justify-content: space-between;
    gap: 0.35rem 1.5rem;
    padding: 1.05rem 1rem;
    border-radius: var(--r-sm);
    border-bottom: 1px solid rgba(250, 246, 239, 0.16);
    transition: background 0.3s var(--ease);
}
.wanted__item:hover { background: rgba(250, 246, 239, 0.06); }
.wanted__vehicle { font-family: var(--display); font-weight: 700; font-size: 1.03rem; letter-spacing: -0.02em; }
.wanted__contact { font-size: 0.88rem; color: var(--on-dark); }
.wanted__contact a { color: #FAF6EF; font-weight: 600; }
.wanted__contact a:hover { color: var(--mustard); }

/* --- Finance band + estimator -------------------------------------------- */

.band { background: var(--surface); border-block: 1px solid var(--rule); }
.band .shell {
    display: grid;
    grid-template-columns: 1.05fr 1fr;
    gap: clamp(2rem, 6vw, 5rem);
    align-items: center;
    padding-block: clamp(3rem, 7vw, 5rem);
}
.band h2 { font-size: clamp(1.35rem, 2.6vw, 1.95rem); }
.band p { color: var(--ink-soft); max-width: 34rem; }
.band__actions { display: flex; flex-wrap: wrap; gap: 0.75rem; margin-top: 1.75rem; }
@media (max-width: 860px) { .band .shell { grid-template-columns: 1fr; } }

.calc {
    background: var(--brand);
    color: #FAF6EF;
    border-radius: var(--r);
    padding: clamp(1.4rem, 3vw, 2.1rem);
    box-shadow: var(--shadow-2);
}
.calc { position: relative; }
.calc--light {
    background:
        radial-gradient(120% 100% at 100% 0%, #1B527E 0%, transparent 58%),
        var(--brand-deep);
}
.calc__title {
    font-family: var(--display);
    font-weight: 700;
    font-size: 1.05rem;
    letter-spacing: -0.02em;
    color: var(--mustard);
    margin: 0 0 1.15rem;
}
.calc__row {
    display: flex;
    align-items: baseline;
    justify-content: space-between;
    gap: 1rem;
    font-size: 0.88rem;
    color: var(--on-dark);
    margin-bottom: 0.45rem;
}
.calc__row output { color: #FAF6EF; font-weight: 700; }

.calc input[type="range"] {
    -webkit-appearance: none;
    appearance: none;
    width: 100%;
    height: 4px;
    border-radius: 100px;
    background: rgba(250, 246, 239, 0.22);
    margin: 0 0 1.4rem;
    cursor: pointer;
}
.calc input[type="range"]::-webkit-slider-thumb {
    -webkit-appearance: none;
    width: 20px; height: 20px;
    border-radius: 50%;
    background: var(--mustard);
    border: 3px solid var(--brand);
    box-shadow: 0 0 0 1px var(--mustard);
    cursor: grab;
    transition: transform 0.15s var(--ease);
}
.calc input[type="range"]::-webkit-slider-thumb:active { transform: scale(1.15); }
.calc input[type="range"]::-moz-range-thumb {
    width: 20px; height: 20px;
    border-radius: 50%;
    background: var(--mustard);
    border: 3px solid var(--brand);
    cursor: grab;
}

.calc__result {
    border-top: 1px solid rgba(250, 246, 239, 0.2);
    padding-top: 1.3rem;
    display: flex;
    flex-wrap: wrap;
    align-items: flex-end;
    justify-content: space-between;
    gap: 1rem;
}
.calc__label { font-size: 0.85rem; color: var(--on-dark); margin: 0; }
.calc__amount {
    font-family: var(--display);
    font-weight: 700;
    font-size: clamp(1.6rem, 3.2vw, 2.1rem);
    letter-spacing: -0.025em;
    line-height: 1;
    margin: 0.3rem 0 0;
    color: #FDFBF6;
}
.calc__amount sup { font-size: 0.46em; top: -0.8em; margin-right: 0.12em; opacity: 0.65; }
.calc__note { font-size: 0.82rem; color: var(--ink-faint); margin: 1rem 0 0; }
.calc .calc__note { color: rgba(198, 213, 204, 0.75); }

.steps { list-style: none; margin: 0; padding: 0; counter-reset: step; }
.steps li {
    counter-increment: step;
    display: grid;
    grid-template-columns: 2.4rem 1fr;
    gap: 1rem;
    padding-block: 1.05rem;
    border-top: 1px solid var(--rule);
    font-size: 0.98rem;
    color: var(--ink-soft);
}
.steps li:last-child { border-bottom: 1px solid var(--rule); }

/* The content of a step must be ONE grid item. A bare <strong> followed by text
   becomes two — the element, then an anonymous item for the text run — and the
   second one wraps onto the next row under the number. Hence the wrapper div. */
.steps li > div { min-width: 0; }
.steps li strong {
    display: block;
    color: var(--ink);
    font-family: var(--display);
    font-weight: 700;
    font-size: 1.02rem;
    letter-spacing: -0.015em;
    margin-bottom: 0.2rem;
}
.steps li::before {
    content: counter(step);
    display: grid;
    place-items: center;
    width: 1.9rem; height: 1.9rem;
    border-radius: 50%;
    background: var(--paper-2);
    color: var(--brand);
    font-family: var(--display);
    font-weight: 700;
    font-size: 0.92rem;
    margin-top: 0.1rem;
}

/* --- Brands -------------------------------------------------------------- */

.brands {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    justify-content: center;
    gap: 1.75rem 3rem;
    margin-top: 3rem;
    padding-top: 2.25rem;
    border-top: 1px solid var(--rule-soft);
}
.brands img {
    width: 56px;
    height: auto;
    filter: grayscale(1);
    opacity: 0.35;
    transition: opacity 0.3s var(--ease), filter 0.3s var(--ease), transform 0.3s var(--ease);
}
.brands img:hover { filter: none; opacity: 1; transform: translateY(-2px); }

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

.visit .shell {
    display: grid;
    grid-template-columns: 1fr 1.15fr;
    gap: clamp(1.75rem, 5vw, 3.5rem);
    align-items: start;
}
.visit dl {
    margin: 1.75rem 0 0;
    display: grid;
    grid-template-columns: max-content 1fr;
    gap: 0 1.75rem;
    font-size: 0.98rem;
}
.visit dt {
    font-size: 0.78rem;
    font-weight: 700;
    letter-spacing: 0.1em;
    text-transform: uppercase;
    color: var(--ink-faint);
    padding: 0.9rem 0;
    border-top: 1px solid var(--rule);
}
.visit dd { margin: 0; padding: 0.9rem 0; border-top: 1px solid var(--rule); }
.map {
    display: block;
    width: 100%;
    aspect-ratio: 4 / 3;
    border: 1px solid var(--rule);
    border-radius: var(--r);
    background: var(--paper-2);
    box-shadow: var(--shadow-1);
}
@media (max-width: 860px) { .visit .shell { grid-template-columns: 1fr; } }

/* --- Footer -------------------------------------------------------------- */

.footer { background: var(--brand-deep); color: var(--on-dark); font-size: 0.92rem; }

.footer__top {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    justify-content: space-between;
    gap: 1rem 2rem;
    padding-block: 1.75rem 1.25rem;
}
.footer__brand {
    font-family: var(--display);
    font-weight: 700;
    font-size: 1.3rem;
    letter-spacing: -0.02em;
    color: #FDFBF6;
}
.footer__brand:hover { color: var(--mustard); }

.footer__links {
    display: flex;
    flex-wrap: wrap;
    gap: 0.4rem 1.6rem;
    font-weight: 500;
}
.footer__links a { display: inline-flex; align-items: center; gap: 0.4rem; color: #FAF6EF; }
.footer__links .bi { font-size: 0.95em; opacity: 0.6; }
.footer__links a:hover .bi { opacity: 1; }
.footer__links a:hover { color: var(--mustard); }

.footer__details {
    display: flex;
    flex-wrap: wrap;
    align-items: baseline;
    gap: 0.3rem 2rem;
    padding-bottom: 1.75rem;
    font-size: 0.88rem;
}
.footer__details p { margin: 0; }
.footer__details a { color: #FAF6EF; }
.footer__details .bi { margin-right: 0.35rem; opacity: 0.6; font-size: 0.92em; }
.footer__details a:hover { color: var(--mustard); }
.footer__details span { opacity: 0.4; margin-inline: 0.3rem; }

/* --- Social icons --------------------------------------------------------- */

.social {
    display: flex;
    align-items: center;
    gap: 0.6rem;
    list-style: none;
    margin: 0;
    padding: 0;
}
.social a {
    display: grid;
    place-items: center;
    width: 2.3rem;
    height: 2.3rem;
    border-radius: 50%;
    border: 1px solid currentColor;
    color: inherit;
    transition: background 0.22s var(--ease), color 0.22s var(--ease),
                border-color 0.22s var(--ease), transform 0.18s var(--ease);
}
.social svg {
    width: 1.05rem;
    height: 1.05rem;
    fill: currentColor;
}
.social a:hover {
    background: var(--mustard);
    border-color: var(--mustard);
    color: var(--ink);
    transform: translateY(-2px);
}

/* In the footer the icons sit at the end of the details row. */
.social--footer { margin-left: auto; color: rgba(250, 246, 239, 0.55); }
.social--footer a { color: #FAF6EF; border-color: rgba(250, 246, 239, 0.3); }

/* On the contact panel they are a bit bigger and use the brand blue. */
.social--large { margin-top: 1rem; gap: 0.7rem; }
.social--large a { width: 2.75rem; height: 2.75rem; color: var(--brand); border-color: var(--rule); }
.social--large svg { width: 1.25rem; height: 1.25rem; }
.social--large a:hover { color: var(--ink); }

.footer__base { border-top: 1px solid rgba(250, 246, 239, 0.2); }
.footer__base .shell {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    justify-content: space-between;
    gap: 0.4rem 1.5rem;
    padding-block: 1.05rem;
    font-size: 0.84rem;
    color: #B3C4D2;
}
.footer__copyright { font-weight: 500; color: #F1F4F7; }
.footer__credit a { color: #F1F4F7; text-decoration: underline; text-underline-offset: 2px; }
.footer__credit a:hover { color: var(--mustard); }

/* On a narrow screen the three items stack, centred, rather than
   spreading across a line too short to hold them. */
@media (max-width: 640px) {
    .footer__base .shell { flex-direction: column; text-align: center; gap: 0.5rem; }
}

@media (max-width: 720px) {
    .footer__details { gap: 0.45rem 1.5rem; }
    .social--footer { margin-left: 0; margin-top: 0.5rem; }
}

/* ==========================================================================
   Page headers, showroom, team, contact
   ========================================================================== */

.pagehead {
    background:
        radial-gradient(120% 130% at 0% 0%, #1B527E 0%, transparent 62%),
        var(--brand);
    color: #FAF6EF;
    padding-block: clamp(1.6rem, 3.6vw, 2.6rem);
}
.pagehead h1 { font-size: clamp(1.6rem, 3.4vw, 2.35rem); margin-bottom: 0.6rem; color: #FDFBF6; }
.pagehead .eyebrow { color: var(--mustard); }
.pagehead .eyebrow::before { background: var(--mustard); }
.pagehead .lede { color: var(--on-dark); }
.pagehead a { color: #FAF6EF; border-bottom: 1px solid rgba(250, 246, 239, 0.45); }
.pagehead a:hover { color: var(--mustard); border-color: var(--mustard); }

/* --- Showroom filters ---------------------------------------------------- */

.filters {
    background: var(--surface);
    border: 1px solid var(--rule-soft);
    border-radius: var(--r);
    padding: 1.15rem;
    margin-bottom: 1.5rem;
    box-shadow: var(--shadow-1);
}
.filters__search { display: flex; gap: 0.55rem; }
.filters__search input {
    flex: 1;
    min-width: 0;
    font-family: var(--body);
    font-size: 1rem;
    border: 1px solid var(--rule);
    border-radius: var(--r-pill);
    padding: 0.85rem 1.25rem;
    background: var(--paper);
    color: var(--ink);
}
.filters__search input:focus { outline: none; border-color: var(--brand-lift); background: var(--surface); }

.filters__row {
    display: flex;
    flex-wrap: wrap;
    align-items: flex-end;
    gap: 1rem;
    margin-top: 1.1rem;
    padding-top: 1.1rem;
    border-top: 1px solid var(--rule-soft);
}
.filters__field { display: grid; gap: 0.35rem; flex: 1 1 180px; }
.filters__field label {
    font-size: 0.78rem;
    font-weight: 700;
    letter-spacing: 0.08em;
    text-transform: uppercase;
    color: var(--ink-faint);
}
.filters__field select {
    font-family: var(--body);
    font-size: 0.98rem;
    color: var(--ink);
    background: var(--paper);
    border: 1px solid var(--rule);
    border-radius: var(--r-sm);
    padding: 0.75rem 0.9rem;
    cursor: pointer;
}
.filters__field select:focus { outline: none; border-color: var(--brand-lift); }
.filters__clear {
    font-size: 0.9rem;
    font-weight: 700;
    color: var(--brand-lift);
    padding-bottom: 0.9rem;
    align-self: flex-end;
}
.filters__clear:hover { text-decoration: underline; }

.resultcount { font-size: 0.92rem; color: var(--ink-faint); margin: 0 0 1.25rem; }

/* --- Pagination ---------------------------------------------------------- */

.pager {
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 1.5rem;
    margin-top: 2.5rem;
    padding-top: 1.5rem;
    border-top: 1px solid var(--rule);
    font-size: 0.94rem;
}
.pager__step {
    font-weight: 700;
    border: 1px solid var(--brand);
    border-radius: var(--r-pill);
    padding: 0.7rem 1.5rem;
    color: var(--brand);
    transition: background 0.2s var(--ease), color 0.2s var(--ease);
}
.pager__step:hover { background: var(--brand); color: #FAF6EF; }
.pager__step.is-off { opacity: 0.35; border-color: var(--rule); color: var(--ink-faint); }
.pager__count { color: var(--ink-faint); }

/* --- Split layout, totals, notes ----------------------------------------- */

.split {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(320px, 1fr));
    gap: clamp(2rem, 5vw, 4rem);
    align-items: start;
}
.split--tight { grid-template-columns: minmax(0, 44rem); }
.split h2 { font-size: clamp(1.25rem, 2.2vw, 1.7rem); margin-bottom: 0.65rem; }
.split .calc { margin-top: 1.5rem; }

.totals {
    margin: 1.25rem 0 0;
    display: grid;
    grid-template-columns: 1fr auto;
    font-size: 0.94rem;
}
.totals dt { color: var(--ink-faint); padding: 0.75rem 0; border-bottom: 1px solid var(--rule-soft); }
.totals dd {
    margin: 0;
    text-align: right;
    font-weight: 700;
    color: var(--brand);
    padding: 0.75rem 0;
    border-bottom: 1px solid var(--rule-soft);
}

.notes { display: grid; grid-template-columns: repeat(auto-fit, minmax(265px, 1fr)); gap: 1.5rem; }
.note {
    background: var(--surface);
    border: 1px solid var(--rule-soft);
    border-radius: var(--r);
    padding: 1.35rem;
    box-shadow: var(--shadow-1);
}
.note h3 { font-size: 1.01rem; margin-bottom: 0.5rem; }
.note p { margin: 0; color: var(--ink-soft); font-size: 0.95rem; }

/* --- Team ---------------------------------------------------------------- */

.people { display: grid; grid-template-columns: repeat(auto-fill, minmax(285px, 1fr)); gap: 1.5rem; }
.person {
    display: flex;
    flex-direction: column;
    background: var(--surface);
    border: 1px solid var(--rule-soft);
    border-radius: var(--r);
    overflow: hidden;
    box-shadow: var(--shadow-card);
    transition: transform 0.3s var(--ease), box-shadow 0.3s var(--ease);
}
.person:hover { transform: translateY(-5px); box-shadow: var(--shadow-card-hover); }
.person__portrait {
    aspect-ratio: 1 / 1;
    background: radial-gradient(100% 100% at 30% 20%, #2E6E9E 0%, transparent 62%), var(--brand);
    display: grid;
    place-items: center;
    overflow: hidden;
}
.person__portrait img { width: 100%; height: 100%; object-fit: cover; }
.person__initials {
    font-family: var(--display);
    font-weight: 700;
    font-size: 3rem;
    letter-spacing: -0.022em;
    color: rgba(250, 246, 239, 0.7);
}
.person__body { padding: 1.35rem; display: grid; gap: 0.5rem; }
.person__role {
    font-size: 0.78rem;
    font-weight: 700;
    letter-spacing: 0.1em;
    text-transform: uppercase;
    color: var(--brand-lift);
    margin: 0;
}
.person__name { font-size: 1.14rem; margin: 0; }
.person__blurb { margin: 0; color: var(--ink-soft); font-size: 0.95rem; }
.person__contact {
    margin: 0.35rem 0 0;
    padding-top: 0.9rem;
    border-top: 1px solid var(--rule-soft);
    font-size: 0.92rem;
    font-weight: 600;
}

/* --- Contact ------------------------------------------------------------- */

.contact {
    display: grid;
    grid-template-columns: minmax(0, 1.35fr) minmax(300px, 1fr);
    gap: clamp(1.75rem, 4vw, 3rem);
    align-items: start;
}
@media (max-width: 940px) { .contact { grid-template-columns: 1fr; } }

.contact__details { display: grid; gap: 1.25rem; }
.contact__details .map { aspect-ratio: 1 / 1; }

.form__pair { display: grid; grid-template-columns: repeat(auto-fit, minmax(150px, 1fr)); gap: 0.95rem; }

.linklist { list-style: none; margin: 0; padding: 0; display: grid; gap: 0.65rem; font-weight: 600; }

.notice--sent {
    background: var(--surface);
    border: 1px solid var(--rule);
    border-left: 4px solid var(--brand-lift);
    border-radius: var(--r);
    color: var(--ink);
    padding: 2rem;
}
.notice--sent h2 { font-size: 1.25rem; margin-bottom: 0.7rem; }
.notice--sent p { color: var(--ink-soft); }

/* ==========================================================================
   Listing detail page
   ========================================================================== */

.crumbs {
    background: var(--surface);
    border-bottom: 1px solid var(--rule);
    font-size: 0.86rem;
}
.crumbs .shell { display: flex; flex-wrap: wrap; gap: 0.5rem; padding-block: 0.9rem; color: var(--ink-faint); }
.crumbs span[aria-current] { color: var(--ink); font-weight: 600; }

.listing { padding-block: clamp(2rem, 5vw, 3.5rem); }

.listing__head {
    display: flex;
    flex-wrap: wrap;
    align-items: flex-end;
    justify-content: space-between;
    gap: 1rem 2.5rem;
    padding-bottom: 1.75rem;
    border-bottom: 1px solid var(--rule);
    margin-bottom: 2.25rem;
}
.listing__head h1 { font-size: clamp(1.5rem, 3vw, 2.25rem); }
.listing__model { font-size: 1.02rem; color: var(--ink-faint); margin: 0.6rem 0 0; }
.listing__price { text-align: right; }
.listing__amount {
    font-family: var(--display);
    font-weight: 700;
    font-size: clamp(1.65rem, 3.6vw, 2.4rem);
    letter-spacing: -0.025em;
    line-height: 1;
    color: var(--brand);
    margin: 0;
}
.listing__amount sup { font-size: 0.44em; top: -0.9em; margin-right: 0.15em; opacity: 0.6; }
.listing__monthly {
    margin: 0.45rem 0 0;
    font-size: 0.95rem;
    color: var(--ink-soft);
    cursor: help;
}
.listing__monthly strong { color: var(--brand); font-weight: 700; }
.listing__terms { font-size: 0.92rem; font-weight: 600; margin: 0.35rem 0 0; }
.listing__sold {
    display: inline-block;
    background: var(--ink);
    color: var(--paper);
    font-size: 0.75rem;
    font-weight: 700;
    letter-spacing: 0.12em;
    text-transform: uppercase;
    padding: 0.3rem 0.85rem;
    border-radius: var(--r-pill);
    margin: 0 0 0.6rem;
}
@media (max-width: 900px) { .listing__price { text-align: left; } }

.listing__layout {
    display: grid;
    grid-template-columns: minmax(0, 1.65fr) minmax(310px, 1fr);
    gap: clamp(1.75rem, 4vw, 3.25rem);
    align-items: start;
}
@media (max-width: 980px) { .listing__layout { grid-template-columns: 1fr; } }

/* Gallery */
.gallery__stage {
    position: relative;
    display: block;
    width: 100%;
    padding: 0;
    border: 1px solid var(--rule-soft);
    border-radius: var(--r);
    background: var(--brand);
    cursor: zoom-in;
    overflow: hidden;
    box-shadow: var(--shadow-1);
}
.gallery__stage img {
    width: 100%;
    aspect-ratio: 4 / 3;
    object-fit: cover;
    transition: transform 0.7s var(--ease-out);
}
.gallery__stage:hover img { transform: scale(1.03); }

.gallery__count,
.gallery__zoom {
    position: absolute;
    bottom: 0.9rem;
    background: rgba(13, 32, 25, 0.8);
    color: #FAF6EF;
    font-size: 0.78rem;
    font-weight: 600;
    padding: 0.35rem 0.85rem;
    border-radius: var(--r-pill);
    backdrop-filter: blur(4px);
}
.gallery__count { right: 0.9rem; }
.gallery__zoom { left: 0.9rem; opacity: 0; transition: opacity 0.25s var(--ease); }
.gallery__stage:hover .gallery__zoom { opacity: 1; }

.gallery__thumbs {
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(94px, 1fr));
    gap: 0.6rem;
    margin-top: 0.6rem;
}
.gallery__thumb {
    padding: 0;
    border: 1px solid var(--rule-soft);
    border-radius: var(--r-sm);
    background: var(--surface);
    cursor: pointer;
    overflow: hidden;
    transition: border-color 0.25s var(--ease), box-shadow 0.25s var(--ease), transform 0.25s var(--ease);
}
.gallery__thumb img { width: 100%; aspect-ratio: 4 / 3; object-fit: cover; }
.gallery__thumb:hover { transform: translateY(-2px); }
.gallery__thumb.is-active { border-color: var(--brand); box-shadow: inset 0 0 0 2px var(--brand); }

.listing__meta {
    display: flex;
    flex-wrap: wrap;
    justify-content: space-between;
    gap: 0.5rem 1.5rem;
    margin-top: 2.5rem;
    padding-top: 1.1rem;
    border-top: 1px solid var(--rule);
    font-size: 0.88rem;
    color: var(--ink-faint);
}

/* Prose */
.prose { margin-top: 2.75rem; }
.prose h2 {
    font-size: 1.18rem;
    padding-bottom: 0.7rem;
    border-bottom: 1px solid var(--rule);
    margin-bottom: 1.15rem;
}
.prose > p { margin: 0; color: var(--ink-soft); max-width: 44rem; }

/* The estimator can be dropped inside .prose (it is, on the vehicle page), so
   its own colours must not be inherited from the surrounding prose. */
.prose .calc p { max-width: none; }
.prose .calc .calc__title { color: var(--mustard); }
.prose .calc .calc__label { color: var(--on-dark); }
.prose .calc .calc__amount { color: #FDFBF6; }
.prose .calc .calc__note { color: rgba(194, 212, 226, 0.75); }
.prose .calc .calc__row { color: var(--on-dark); }
.prose .calc .calc__row output { color: #FAF6EF; }

.features {
    list-style: none;
    margin: 0;
    padding: 0;
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(195px, 1fr));
    gap: 0.55rem 1.75rem;
    font-size: 0.96rem;
}
.features li { position: relative; padding-left: 1.4rem; color: var(--ink-soft); }
.features li::before {
    content: '';
    position: absolute;
    left: 0; top: 0.55em;
    width: 0.6rem; height: 0.6rem;
    border-radius: 50%;
    background: var(--mustard);
}

/* Panels */
.listing__aside { display: grid; gap: 1.25rem; position: sticky; top: 6rem; }
@media (max-width: 980px) { .listing__aside { position: static; } }

.panel {
    background: var(--surface);
    border: 1px solid var(--rule-soft);
    border-radius: var(--r);
    padding: 1.4rem;
    box-shadow: var(--shadow-1);
}
.panel--dark {
    background: radial-gradient(120% 100% at 100% 0%, #1B527E 0%, transparent 58%), var(--brand);
    border-color: var(--brand);
    color: #FAF6EF;
}
.panel__title {
    font-family: var(--display);
    font-weight: 700;
    font-size: 1.04rem;
    letter-spacing: -0.02em;
    padding-bottom: 0.8rem;
    border-bottom: 1px solid var(--rule);
    margin-bottom: 1.15rem;
}
.panel--dark .panel__title { border-color: rgba(250, 246, 239, 0.22); color: #FDFBF6; }
.panel__lead { font-size: 0.92rem; color: var(--on-dark); margin: 0 0 1.25rem; }
.panel--dark a { color: #FAF6EF; font-weight: 600; }
.panel--dark a:hover { color: var(--mustard); }

.specs { margin: 0; }
.specs dt {
    font-size: 0.76rem;
    font-weight: 700;
    letter-spacing: 0.1em;
    text-transform: uppercase;
    color: var(--ink-faint);
    padding-top: 0.75rem;
}
.specs dd { margin: 0; padding-bottom: 0.75rem; border-bottom: 1px solid var(--rule-soft); font-size: 0.98rem; }
.specs dd:last-of-type { border-bottom: 0; }
.panel--dark .specs dt { color: var(--on-dark); }
.panel--dark .specs dd { border-color: rgba(250, 246, 239, 0.15); }

/* Forms */
.form { display: grid; gap: 0.95rem; }
.field { display: grid; gap: 0.4rem; }
.field label {
    font-size: 0.8rem;
    font-weight: 700;
    letter-spacing: 0.06em;
    text-transform: uppercase;
    color: var(--on-dark);
}
.field input,
.field textarea,
.field select {
    width: 100%;
    font-family: var(--body);
    font-size: 0.98rem;
    color: var(--ink);
    background: var(--surface);
    border: 1px solid transparent;
    border-radius: var(--r-sm);
    padding: 0.8rem 0.95rem;
    transition: box-shadow 0.2s var(--ease);
}
.field input:focus,
.field textarea:focus,
.field select:focus { outline: none; box-shadow: 0 0 0 3px var(--mustard); }
.field textarea { resize: vertical; }
.field select { cursor: pointer; }
.field__error { font-size: 0.82rem; font-weight: 600; color: var(--mustard); margin: 0; }

.captcha { display: flex; gap: 0.55rem; align-items: stretch; }
.captcha img { border-radius: var(--r-sm); background: var(--surface); }
.captcha input { flex: 1; min-width: 0; }

.notice { border-radius: var(--r-sm); padding: 1rem 1.15rem; font-size: 0.95rem; margin: 0 0 1rem; }
.notice--good { background: rgba(250, 246, 239, 0.14); color: #FAF6EF; margin-bottom: 0; }
.notice--bad { background: var(--mustard); color: var(--ink); }
.notice--bad a { color: var(--ink); }

/* Sticky action bar (small screens) */
.actionbar {
    position: fixed;
    left: 0; right: 0; bottom: 0;
    z-index: 45;
    display: none;
    align-items: center;
    justify-content: space-between;
    gap: 1rem;
    padding: 0.7rem var(--gutter);
    background: rgba(13, 32, 25, 0.97);
    backdrop-filter: blur(8px);
    color: #FAF6EF;
    box-shadow: 0 -8px 24px rgba(13, 32, 25, 0.3);
}
.actionbar__price { font-family: var(--display); font-weight: 700; font-size: 1.2rem; letter-spacing: -0.022em; }
.actionbar__actions { display: flex; gap: 0.5rem; }
.actionbar .btn { padding: 0.7rem 1.25rem; font-size: 0.88rem; }
@media (max-width: 980px) {
    .actionbar { display: flex; }
    body { padding-bottom: 4.75rem; }
}

/* Lightbox */
.lightbox {
    border: 0;
    padding: 0;
    background: transparent;
    max-width: min(1200px, 94vw);
    max-height: 92vh;
    overflow: visible;
}
.lightbox::backdrop { background: rgba(13, 32, 25, 0.93); backdrop-filter: blur(3px); }
.lightbox img { width: 100%; height: auto; max-height: 88vh; object-fit: contain; border-radius: var(--r); }
.lightbox__close,
.lightbox__nav {
    position: absolute;
    width: 2.85rem; height: 2.85rem;
    display: grid;
    place-items: center;
    font-size: 1.35rem;
    line-height: 1;
    color: var(--brand);
    background: var(--paper);
    border: 0;
    border-radius: 50%;
    cursor: pointer;
    box-shadow: var(--shadow-2);
    transition: transform 0.2s var(--ease);
}
.lightbox__close:hover,
.lightbox__nav:hover { transform: scale(1.08); background: var(--mustard); }
.lightbox__close { top: -1.15rem; right: -1.15rem; }
.lightbox__nav { top: 50%; margin-top: -1.425rem; }
.lightbox__nav--prev { left: -1.15rem; }
.lightbox__nav--next { right: -1.15rem; }
@media (max-width: 700px) {
    .lightbox__close { top: 0.5rem; right: 0.5rem; }
    .lightbox__nav--prev { left: 0.5rem; }
    .lightbox__nav--next { right: 0.5rem; }
}

/* --- Print --------------------------------------------------------------- */

@media print {
    .utility, .masthead, .crumbs, .listing__aside, .footer, .actionbar,
    .section--white, .gallery__thumbs, .listing__meta, .hero__scroll { display: none !important; }
    body { background: #fff; padding-bottom: 0; }
    .card, .panel { box-shadow: none; }
}

/* --- Motion preference --------------------------------------------------- */

@media (prefers-reduced-motion: reduce) {
    html { scroll-behavior: auto; }
    *, *::before, *::after {
        animation-duration: 0.001ms !important;
        animation-iteration-count: 1 !important;
        transition-duration: 0.001ms !important;
    }
    .js [data-reveal] { opacity: 1; transform: none; }
    .js .hero__inner > * { opacity: 1; transform: none; }
    /* No blur and no bar for anyone who has asked for less movement. */
    .loadbar { display: none; }
    .js .page-veil { filter: none; opacity: 1; animation: none; }
    .card:hover, .person:hover { transform: none; }
    .card:hover .card__media img { transform: none; }
}

/* ==========================================================================
   Pre-approval: step cards, consent checkboxes, legal disclosure
   ========================================================================== */

.stepcards {
    list-style: none;
    margin: 0;
    padding: 0;
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(255px, 1fr));
    gap: 1.5rem;
}
.stepcard {
    position: relative;
    background: var(--surface);
    border: 1px solid var(--rule-soft);
    border-radius: var(--r);
    padding: 1.5rem 1.35rem 1.35rem;
    box-shadow: var(--shadow-1);
}
.stepcard__num {
    display: grid;
    place-items: center;
    width: 2.4rem; height: 2.4rem;
    border-radius: 50%;
    background: var(--mustard);
    color: var(--ink);
    font-family: var(--display);
    font-weight: 700;
    font-size: 1.15rem;
    margin: 0 0 0.9rem;
}
.stepcard h2 { font-size: 1.08rem; margin-bottom: 0.45rem; }
.stepcard p { margin: 0; color: var(--ink-soft); font-size: 0.95rem; }

.consent { display: grid; gap: 0.85rem; margin: 0.35rem 0 0.5rem; }
.check {
    display: flex;
    align-items: flex-start;
    gap: 0.75rem;
    font-size: 0.9rem;
    line-height: 1.5;
    color: var(--on-dark);
    cursor: pointer;
}
.check input[type="checkbox"] {
    flex: none;
    width: 1.2rem; height: 1.2rem;
    margin-top: 0.15rem;
    accent-color: var(--mustard);
    cursor: pointer;
}
.check span { flex: 1; }

.legal {
    background: var(--surface);
    border: 1px solid var(--rule-soft);
    border-radius: var(--r);
    margin-bottom: 1rem;
    overflow: hidden;
}
.legal summary {
    cursor: pointer;
    padding: 0.95rem 1.25rem;
    font-family: var(--display);
    font-weight: 700;
    font-size: 0.98rem;
    letter-spacing: -0.02em;
    list-style: none;
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 1rem;
}
.legal summary::-webkit-details-marker { display: none; }
.legal summary::after { content: '+'; font-size: 1.3rem; color: var(--brand-lift); }
.legal[open] summary::after { content: '−'; }
.legal__body {
    padding: 0 1.35rem 1.35rem;
    color: var(--ink-soft);
    font-size: 0.94rem;
    max-height: 26rem;
    overflow-y: auto;
}

/* --- Approval result ------------------------------------------------------ */

.result {
    background: radial-gradient(120% 100% at 100% 0%, #2E6E9E 0%, transparent 58%), var(--brand);
    border-color: var(--brand);
    color: #FAF6EF;
}
.result__label {
    font-size: 0.8rem;
    font-weight: 700;
    letter-spacing: 0.12em;
    text-transform: uppercase;
    color: var(--mustard);
    margin: 0;
}
.result__amount {
    font-family: var(--display);
    font-weight: 700;
    font-size: clamp(2rem, 5vw, 3.1rem);
    letter-spacing: -0.028em;
    line-height: 1;
    margin: 0.4rem 0 1.5rem;
    color: #FDFBF6;
}
.result__amount sup { font-size: 0.42em; top: -0.9em; margin-right: 0.15em; opacity: 0.65; }
.result .specs dt { color: var(--on-dark); }
.result .specs dd { border-color: rgba(250, 246, 239, 0.18); }
.result .band__actions { margin-top: 1.5rem; }
.result .btn--ghost { color: #FAF6EF; border-color: rgba(250, 246, 239, 0.5); }
.result .btn--ghost:hover { background: #FAF6EF; color: var(--brand); border-color: #FAF6EF; }

/* ==========================================================================
   Estimator colours, stated last and scoped tightly.

   The estimator gets dropped inside other blocks (a .prose section on the
   vehicle page), and a descendant rule like ".prose p" outranks a single class
   like ".calc__title" — which painted the text dark on the dark panel and made
   the whole block look empty. These win wherever it is nested.
   ========================================================================== */

.calc .calc__title  { color: var(--mustard) !important; }
.calc .calc__label  { color: var(--on-dark) !important; }
.calc .calc__amount { color: #FDFBF6 !important; }
.calc .calc__note   { color: rgba(194, 212, 226, 0.78) !important; }
.calc .calc__row    { color: var(--on-dark) !important; }
.calc .calc__row output { color: #FAF6EF !important; }
.calc p { max-width: none; }

/* ==========================================================================
   Credit e-application (financial.php)
   ========================================================================== */

.eform { display: grid; gap: 1.5rem; }

.eform__group {
    background: var(--surface);
    border: 1px solid var(--rule-soft);
    border-radius: var(--r);
    box-shadow: var(--shadow-1);
    padding: 1.5rem 1.35rem 1.6rem;
    margin: 0;
}
.eform__group legend {
    font-family: var(--display);
    font-weight: 700;
    font-size: 1.08rem;
    letter-spacing: -0.015em;
    color: var(--brand);
    padding: 0 0.65rem;
    margin-left: -0.65rem;
}
.eform__hint {
    margin: 0 0 1.1rem;
    font-size: 0.9rem;
    color: var(--ink-faint);
    max-width: 46rem;
}

.eform__row { display: grid; gap: 0.9rem; margin-bottom: 0.9rem; }
.eform__row--2 { grid-template-columns: repeat(auto-fit, minmax(220px, 1fr)); }
.eform__row--3 { grid-template-columns: repeat(auto-fit, minmax(190px, 1fr)); }
.eform__row--4 { grid-template-columns: repeat(auto-fit, minmax(165px, 1fr)); }
.eform__row--wide { grid-template-columns: minmax(0, 3fr) minmax(120px, 1fr); }
@media (max-width: 600px) { .eform__row--wide { grid-template-columns: 1fr; } }

/* Income rows: a label with the same two fields beside it each time. */
.eform__pair {
    display: grid;
    grid-template-columns: minmax(0, 1.4fr) repeat(2, minmax(110px, 1fr));
    align-items: end;
    gap: 0.9rem;
    padding-block: 0.55rem;
    border-top: 1px solid var(--rule-soft);
}
.eform__pair:first-of-type { border-top: 0; }
.eform__pairlabel { font-size: 0.94rem; color: var(--ink-soft); padding-bottom: 0.6rem; }
@media (max-width: 640px) {
    .eform__pair { grid-template-columns: 1fr 1fr; }
    .eform__pairlabel { grid-column: 1 / -1; padding-bottom: 0; font-weight: 600; color: var(--ink); }
}

/* On the white panels the labels need the ink colour, not the on-dark one the
   shared .field rule uses inside dark panels. */
.field--light label,
.field--light .field__legend {
    font-size: 0.8rem;
    font-weight: 700;
    letter-spacing: 0.04em;
    text-transform: uppercase;
    color: var(--ink-faint);
}
.field--light input,
.field--light textarea,
.field--light select {
    background: var(--paper);
    border: 1px solid var(--rule);
}
.field--light input:focus,
.field--light textarea:focus,
.field--light select:focus {
    background: var(--surface);
    border-color: var(--brand-lift);
    box-shadow: 0 0 0 3px rgba(46, 110, 158, 0.18);
}
.field__legend { display: block; margin-bottom: 0.35rem; }

.choices {
    display: flex;
    flex-wrap: wrap;
    gap: 0.5rem 1.25rem;
    padding-top: 0.15rem;
}
.choices label {
    display: inline-flex;
    align-items: center;
    gap: 0.45rem;
    font-size: 0.95rem;
    font-weight: 400;
    letter-spacing: 0;
    text-transform: none;
    color: var(--ink);
    cursor: pointer;
}
.choices input { width: 1.05rem; height: 1.05rem; accent-color: var(--brand); cursor: pointer; }
.choices--tight { gap: 0.5rem 1rem; }

.declaration {
    display: grid;
    gap: 0.5rem;
    padding-block: 1rem;
    border-top: 1px solid var(--rule-soft);
}
.declaration p { margin: 0; font-size: 0.95rem; color: var(--ink-soft); max-width: 46rem; }

/* The honeypot field. Positioned out of view rather than display:none, because
   a bot that reads the stylesheet will skip a hidden field but fill this one. */
.hp {
    position: absolute !important;
    left: -9999px !important;
    width: 1px;
    height: 1px;
    overflow: hidden;
}

/* Every text field, not just the search: below 16px iOS zooms in when the
   field is focused, and the visitor ends up scrolled sideways mid-form. */
@media (max-width: 560px) {
    .field input,
    .field select,
    .field textarea,
    .filters input,
    .filters select {
        font-size: 1rem;
    }
}

/* --- Form error summary --------------------------------------------------- */

.formerrors {
    background: #FCF3E3;
    border: 1px solid var(--mustard);
    border-left: 4px solid var(--mustard);
    border-radius: var(--r);
    padding: 1.15rem 1.35rem;
    margin-bottom: 1.25rem;
    box-shadow: var(--shadow-1);
}
.formerrors:focus { outline: 2px solid var(--brand); outline-offset: 3px; }
.formerrors__intro {
    margin: 0 0 0.6rem;
    font-family: var(--display);
    font-weight: 700;
    font-size: 1rem;
    letter-spacing: -0.015em;
    color: var(--ink);
}
.formerrors ul { margin: 0; padding-left: 1.15rem; display: grid; gap: 0.35rem; }
.formerrors li { color: var(--ink-soft); font-size: 0.94rem; }
.formerrors a { color: var(--brand); font-weight: 600; text-underline-offset: 2px; }
.formerrors a:hover { text-decoration: underline; }

/* --- Back to top ---------------------------------------------------------- */

.totop {
    position: fixed;
    right: clamp(1rem, 3vw, 2rem);
    bottom: clamp(1rem, 3vw, 2rem);
    z-index: 60;
    display: grid;
    place-items: center;
    width: 2.9rem;
    height: 2.9rem;
    padding: 0;
    border: 1px solid var(--rule);
    border-radius: 50%;
    background: var(--surface);
    color: var(--brand);
    font-size: 1.05rem;
    cursor: pointer;
    box-shadow: var(--shadow-card);
    transition: background 0.25s var(--ease), color 0.25s var(--ease),
                border-color 0.25s var(--ease), transform 0.25s var(--ease),
                box-shadow 0.25s var(--ease);
    animation: totopIn 0.3s var(--ease-out);
}
.totop[hidden] { display: none; }

.totop:hover,
.totop:focus-visible {
    background: var(--brand);
    border-color: var(--brand);
    color: #FFFFFF;
    transform: translateY(-3px);
    box-shadow: var(--shadow-card-hover);
}

@keyframes totopIn {
    from { opacity: 0; transform: translateY(8px); }
    to   { opacity: 1; transform: none; }
}

/* The vehicle pages have a fixed enquire/call bar along the bottom below
   980px. Sit above it rather than on top of it. */
@media (max-width: 980px) {
    .totop { bottom: calc(4.6rem + env(safe-area-inset-bottom, 0px)); }
}

@media print {
    .totop { display: none !important; }
}