/* ============================================================================
   Direction A - Industrial Catalogue

   Dark structural chrome against a light content canvas. Dense, utilitarian,
   photo-forward. Red is an action colour only: it never decorates.

   No framework. Custom properties, grid and flex, container queries for the
   card. Roughly what ships, so what is reviewed here is what gets built.
   ============================================================================ */

:root {
    /* Chrome and canvas */
    --ink: #101010;
    --structure: #274156;
    --canvas: #f7f7f8;
    --surface: #ffffff;
    --line: #e4e5e7;
    --line-strong: #cfd1d4;

    /* Text */
    --text: #22262a;
    --body: #5e6164;
    --muted: #7d8184;

    /* Action */
    --action: #da0606;
    --action-ink: #a80404;
    --action-tint: #fdecec;
    --wa: #1f8f4e;

    --r: 4px;
    --r-lg: 7px;

    --sans: "Archivo", ui-sans-serif, system-ui, -apple-system, "Segoe UI", sans-serif;
    --cond: "Archivo Narrow", "Archivo", ui-sans-serif, system-ui, sans-serif;

    --shadow: 0 1px 2px rgba(16, 16, 16, .05), 0 6px 18px -8px rgba(16, 16, 16, .14);
    --shadow-lift: 0 2px 4px rgba(16, 16, 16, .07), 0 14px 32px -12px rgba(16, 16, 16, .22);
}

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

body.v-a {
    background: var(--canvas);
    color: var(--text);
    font: 400 16px/1.6 var(--sans);
    -webkit-font-smoothing: antialiased;
    /* Every figure in this design aligns in a column. */
    font-variant-numeric: tabular-nums;
}

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

a { color: inherit; }

h1, h2, h3, h4 { font-family: var(--cond); font-weight: 700; letter-spacing: -.005em; margin: 0; }

:where(a, button, input, select, summary):focus-visible {
    outline: 2px solid var(--action);
    outline-offset: 2px;
    border-radius: 2px;
}

/* --- chrome ---------------------------------------------------------------- */

.site { background: var(--ink); color: #e8eaec; }

/* Utility strip. A shade off the main bar so it reads as secondary chrome rather than a
   second navigation. */
.site__strip { background: #060606; border-bottom: 1px solid #1d2024; }

.site__strip__inner {
    max-width: 1280px;
    margin: 0 auto;
    padding: 0 28px;
    display: flex;
    align-items: center;
    gap: 4px;
    min-height: 38px;
}

.site__strip__label {
    font: 600 10px/1 var(--sans);
    text-transform: uppercase;
    letter-spacing: .13em;
    color: #6b7177;
    margin-right: 12px;
    white-space: nowrap;
}

.rep {
    display: flex;
    align-items: baseline;
    gap: 7px;
    padding: 7px 11px;
    border-radius: var(--r);
    text-decoration: none;
    white-space: nowrap;
    font-size: 13px;
}

.rep b { font-weight: 600; color: #e8eaec; }

.rep span { color: #8d9399; font-variant-numeric: tabular-nums; }

.rep:hover { background: #16181b; }
.rep:hover span { color: var(--action); }

.site__bar {
    max-width: 1280px;
    margin: 0 auto;
    padding: 0 28px;
    display: flex;
    align-items: center;
    gap: 30px;
    min-height: 104px;
}

/* The lockup is a stacked badge rather than a horizontal wordmark, so it needs real
   height to stay legible - the header grows to suit it rather than the logo shrinking
   into illegibility. Width is left to the aspect ratio so the file can be swapped for
   an SVG later without touching this. */
.brand { display: block; flex: 0 0 auto; }

.brand img { height: 72px; width: auto; }

.nav { display: flex; gap: 2px; margin-right: auto; }

.nav a {
    display: flex;
    align-items: center;
    gap: 6px;
    padding: 9px 13px;
    border-radius: var(--r);
    font: 500 14.5px/1 var(--sans);
    color: #b9bec3;
    text-decoration: none;
}

.nav a:hover { background: #1e2125; color: #fff; }

/* The active section is marked with red, not with a colour change alone. */
.nav a.is-on { color: #fff; box-shadow: inset 0 -2px 0 var(--action); border-radius: var(--r) var(--r) 0 0; }

.nav i {
    font-style: normal;
    font-size: 11px;
    padding: 2px 6px;
    border-radius: 9px;
    background: #2a2e33;
    color: #8f959b;
}

.site__actions { display: flex; align-items: center; gap: 10px; }

/* A round icon rather than a labelled button: it is the only action on the bar, the mark is
   universally recognised, and it keeps the chrome from competing with the navigation. */
.wa {
    display: grid;
    place-items: center;
    width: 44px;
    height: 44px;
    border-radius: 50%;
    background: var(--wa);
    color: #fff;
    text-decoration: none;
    flex: 0 0 auto;
    transition: background .15s, transform .15s;
}

.wa svg { width: 23px; height: 23px; fill: currentColor; }

.wa:hover { background: #1a7a42; transform: translateY(-1px); }

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

.hero { position: relative; background: var(--ink); color: #fff; overflow: hidden; min-height: 540px; display: flex; align-items: center; }

.hero__media { position: absolute; inset: 0; }

/* The site's own banner is a centre-weighted composite - fleet across the top, handshake
   dead centre - so it is anchored centre and shown at full strength rather than faded into
   a texture. It is the client's artwork; the job here is to keep it readable, not to bury
   it. */
.hero__media img { width: 100%; height: 100%; object-fit: cover; object-position: center; }

.hero__media::after {
    content: "";
    position: absolute;
    inset: 0;
    background:
        /* The pool behind the copy. It lives on this full-bleed layer rather than on a box
           around the text: a box ends somewhere, and wherever the gradient is still opaque
           when it does, the edge shows as a straight line down the photograph. Here the only
           edges are the hero's own, and the ellipse closes well inside them. */
        radial-gradient(42% 54% at 30% 44%, rgba(8, 8, 8, .88) 0%, rgba(8, 8, 8, .66) 44%,
                                            rgba(8, 8, 8, .26) 72%, rgba(8, 8, 8, 0) 100%),
        /* Protects the text column on the left, then releases early so the handshake and
           the right-hand trucks carry. Kept light - the type below leans on its own shadow
           for contrast rather than on a heavy scrim, which lets the artwork through. */
        linear-gradient(97deg, rgba(10, 10, 10, .52) 0%, rgba(10, 10, 10, .3) 28%,
                               rgba(10, 10, 10, .06) 50%, rgba(10, 10, 10, 0) 100%),
        /* Seats the band into the black chrome above and the listing below. */
        linear-gradient(180deg, rgba(10, 10, 10, .22) 0%, rgba(10, 10, 10, 0) 38%,
                                rgba(10, 10, 10, .26) 100%);
}

.hero__inner { position: relative; max-width: 1280px; margin: 0 auto; padding: 58px 28px; width: 100%; }

.hero__copy { position: relative; max-width: 640px; margin-bottom: 30px; }

.hero h1 {
    font-size: clamp(29px, 4.1vw, 48px);
    line-height: 1.06;
    max-width: 16ch;
    margin-bottom: 14px;
    /* Carries the contrast itself, so the scrim over the banner can stay light. */
    text-shadow: 0 2px 22px rgba(0, 0, 0, .88), 0 1px 4px rgba(0, 0, 0, .7);
}

.hero p {
    color: #dde1e5;
    margin: 0;
    font-size: 15.5px;
    line-height: 1.62;
    text-shadow: 0 1px 4px rgba(0, 0, 0, .95), 0 0 16px rgba(0, 0, 0, .8);
}

.hero p a {
    color: #fff;
    font-weight: 600;
    text-decoration: none;
    border-bottom: 2px solid var(--action);
    padding-bottom: 1px;
    white-space: nowrap;
}

.hero p a:hover { color: var(--action); }

.finder {
    /* Positioned so it joins the painting layer .hero__copy is on - a static block paints
       below positioned siblings whatever the DOM order, which put the copy backing over
       these controls. */
    position: relative;
    display: grid;
    grid-template-columns: repeat(3, minmax(0, 1fr)) auto;
    gap: 10px;
    padding: 12px;
    border-radius: var(--r-lg);
    /* Solid rather than translucent: the banner is busy through the middle, and a
       see-through panel over the handshake reads as a smudge rather than a control. */
    background: rgba(12, 12, 12, .88);
    border: 1px solid rgba(255, 255, 255, .1);
    max-width: 880px;
}

.finder label { display: grid; gap: 5px; }

.finder span {
    font: 600 10.5px/1 var(--sans);
    text-transform: uppercase;
    letter-spacing: .09em;
    color: #9ba1a7;
    padding-left: 2px;
}

.finder select {
    appearance: none;
    width: 100%;
    padding: 11px 13px;
    border: 1px solid var(--line);
    border-radius: var(--r);
    background: var(--surface);
    font: 500 15px/1 var(--sans);
    color: var(--text);
}

.finder button {
    align-self: end;
    padding: 12px 24px;
    border: 0;
    border-radius: var(--r);
    background: var(--action);
    color: #fff;
    font: 700 15px/1 var(--sans);
    cursor: pointer;
}

.finder button:hover { background: var(--action-ink); }

.hero__trust { position: relative; display: flex; flex-wrap: wrap; gap: 22px; margin-top: 26px; }

.hero__trust span {
    font: 500 13px/1 var(--sans);
    color: #c3c8cc;
    text-shadow: 0 1px 4px rgba(0, 0, 0, .95), 0 0 14px rgba(0, 0, 0, .8);
    padding-left: 13px;
    position: relative;
}

.hero__trust span::before {
    content: "";
    position: absolute;
    left: 0;
    top: 3px;
    width: 5px;
    height: 5px;
    border-radius: 50%;
    background: var(--action);
}

/* --- listing -------------------------------------------------------------- */

.listing {
    max-width: 1280px;
    margin: 0 auto;
    padding: 10px 28px 58px;
    display: grid;
    grid-template-columns: 252px minmax(0, 1fr);
    gap: 30px;
    align-items: start;
}

.rail {
    position: sticky;
    top: 55px;
    background: var(--surface);
    border: 1px solid var(--line);
    border-radius: var(--r-lg);
    padding: 4px 16px 10px;
}

.rail__head { display: flex; align-items: center; padding: 14px 0 12px; border-bottom: 1px solid var(--line); }

.rail__head h2 { font-size: 15px; text-transform: uppercase; letter-spacing: .07em; }

.rail__clear {
    margin-left: auto;
    border: 0;
    background: none;
    padding: 0;
    font: 500 12.5px/1 var(--sans);
    color: var(--action-ink);
    cursor: pointer;
    text-decoration: underline;
}

.facet { border-bottom: 1px solid var(--line); padding: 12px 0; }
.facet:last-child { border-bottom: 0; }

.facet summary {
    font: 600 13px/1 var(--sans);
    text-transform: uppercase;
    letter-spacing: .07em;
    color: var(--text);
    cursor: pointer;
    list-style: none;
    display: flex;
    align-items: center;
    padding: 3px 0 9px;
}

.facet summary::-webkit-details-marker { display: none; }

.facet summary::after {
    content: "";
    margin-left: auto;
    width: 7px;
    height: 7px;
    border-right: 1.5px solid var(--muted);
    border-bottom: 1.5px solid var(--muted);
    transform: rotate(45deg);
    transition: transform .15s;
}

.facet[open] summary::after { transform: rotate(-135deg); }

.search input {
    width: 100%;
    padding: 10px 12px;
    border: 1px solid var(--line-strong);
    border-radius: var(--r);
    font: 400 14px/1 var(--sans);
}

.check {
    display: flex;
    align-items: center;
    gap: 9px;
    padding: 5px 0;
    font-size: 14px;
    color: var(--body);
    cursor: pointer;
}

.check input { accent-color: var(--action); width: 15px; height: 15px; margin: 0; }

.check span { flex: 1; }

.check i { font-style: normal; font-size: 12px; color: var(--muted); }

.check:has(input:checked) { color: var(--text); font-weight: 600; }

.range { padding: 6px 2px 2px; }

.range__track { height: 4px; border-radius: 3px; background: var(--line-strong); position: relative; }

.range__fill { position: absolute; left: 18%; right: 26%; top: 0; bottom: 0; background: var(--action); border-radius: 3px; }
.range__fill--wide { left: 6%; right: 12%; }

.range__fill::before, .range__fill::after {
    content: "";
    position: absolute;
    top: 50%;
    width: 15px;
    height: 15px;
    margin-top: -7.5px;
    border-radius: 50%;
    background: var(--surface);
    border: 2px solid var(--action);
}

.range__fill::before { left: -7px; }
.range__fill::after { right: -7px; }

.range__values { display: flex; justify-content: space-between; margin-top: 10px; font-size: 12.5px; color: var(--muted); }

/* --- results bar ---------------------------------------------------------- */

.results__bar {
    display: flex;
    align-items: center;
    gap: 16px;
    flex-wrap: wrap;
    padding: 0 0 16px;
}

.chips { display: flex; gap: 7px; flex-wrap: wrap; }

.chip {
    display: inline-flex;
    align-items: center;
    gap: 7px;
    padding: 5px 7px 5px 11px;
    border-radius: 999px;
    background: var(--action-tint);
    color: var(--action-ink);
    font: 600 13px/1 var(--sans);
}

.chip button {
    border: 0;
    background: rgba(168, 4, 4, .13);
    color: inherit;
    width: 17px;
    height: 17px;
    border-radius: 50%;
    cursor: pointer;
    font-size: 13px;
    line-height: 1;
    padding: 0;
}

.results__right { margin-left: auto; display: flex; align-items: center; gap: 14px; }

.count { font-size: 14px; color: var(--body); }
.count b { color: var(--text); }

.sort {
    appearance: none;
    padding: 9px 13px;
    border: 1px solid var(--line-strong);
    border-radius: var(--r);
    background: var(--surface);
    font: 500 14px/1 var(--sans);
}

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

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

.card {
    container-type: inline-size;
    display: flex;
    flex-direction: column;
    background: var(--surface);
    border: 1px solid var(--line);
    border-radius: var(--r-lg);
    overflow: hidden;
    box-shadow: var(--shadow);
    transition: transform .15s, box-shadow .15s;
}

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

.card__media { position: relative; display: block; background: #eceef0; aspect-ratio: 4 / 3; }

/* A fixed ratio with object-fit is what stops a grid of supplier photographs
   from looking like a jumble - the source images vary wildly. */
.card__media img { width: 100%; height: 100%; object-fit: cover; }

.badge {
    position: absolute;
    top: 9px;
    left: 9px;
    padding: 4px 9px;
    border-radius: 3px;
    background: rgba(16, 16, 16, .86);
    color: #fff;
    font: 700 10.5px/1.25 var(--sans);
    text-transform: uppercase;
    letter-spacing: .07em;
}

.badge--deal { background: var(--action); }

.card__body { display: flex; flex-direction: column; gap: 9px; padding: 13px 14px 14px; flex: 1; }

.card__meta { display: flex; gap: 9px; margin: 0; font-size: 11.5px; color: var(--muted); }

.stock {
    font-family: ui-monospace, SFMono-Regular, Menlo, Consolas, monospace;
    color: var(--structure);
    font-weight: 600;
}

.card__title { font-size: 17.5px; line-height: 1.22; }

.card__title a {
    text-decoration: none;
    /* Titles run past forty characters, so two lines and an ellipsis rather than
       a card that grows taller than its neighbours. */
    display: -webkit-box;
    -webkit-line-clamp: 2;
    -webkit-box-orient: vertical;
    overflow: hidden;
}

.card__title a:hover { color: var(--action-ink); }

.specs { display: flex; flex-wrap: wrap; gap: 6px; list-style: none; margin: 0; padding: 0; }

.specs li {
    padding: 4px 8px;
    border-radius: 3px;
    background: var(--canvas);
    border: 1px solid var(--line);
    font-size: 12.5px;
    color: var(--body);
}

.specs b { font-weight: 600; color: var(--text); }

.card__foot {
    display: flex;
    align-items: center;
    gap: 10px;
    margin-top: auto;
    padding-top: 11px;
    border-top: 1px solid var(--line);
}

.price { margin: 0; font-family: var(--cond); font-size: 22px; font-weight: 700; letter-spacing: -.01em; }

.price small { display: block; font-family: var(--sans); font-size: 11px; font-weight: 500; color: var(--muted); letter-spacing: 0; }

/* The POA state. Two thirds of the catalogue lands here, so it is a call to
   action occupying the price slot rather than a dead label. */
.ask {
    display: inline-flex;
    align-items: center;
    padding: 9px 14px;
    border: 1px solid var(--action);
    border-radius: var(--r);
    color: var(--action-ink);
    font: 700 14px/1 var(--sans);
    text-decoration: none;
}

.ask:hover { background: var(--action); color: #fff; }

.icon {
    margin-left: auto;
    display: grid;
    place-items: center;
    width: 38px;
    height: 38px;
    border-radius: var(--r);
    flex: 0 0 auto;
}

.icon svg { width: 20px; height: 20px; fill: currentColor; }

.icon--wa { background: rgba(31, 143, 78, .1); color: var(--wa); }
.icon--wa:hover { background: var(--wa); color: #fff; }

.pager { display: flex; gap: 6px; align-items: center; padding: 26px 0 0; }

.pager a, .pager__at {
    min-width: 38px;
    height: 38px;
    display: grid;
    place-items: center;
    padding: 0 12px;
    border-radius: var(--r);
    border: 1px solid var(--line);
    background: var(--surface);
    font: 600 14px/1 var(--sans);
    text-decoration: none;
}

.pager__at { background: var(--ink); color: #fff; border-color: var(--ink); }
.pager a:hover { border-color: var(--line-strong); }
.pager__next { margin-left: 6px; }

/* --- detail --------------------------------------------------------------- */

.detail { max-width: 1280px; margin: 0 auto; padding: 10px 28px 60px; }

.detail__head { padding-bottom: 22px; border-bottom: 1px solid var(--line); margin-bottom: 26px; }

.crumbs { margin: 0 0 10px; font-size: 13px; color: var(--muted); }
.crumbs a { color: var(--structure); text-decoration: none; }
.crumbs a:hover { text-decoration: underline; }

.detail h1 { font-size: clamp(27px, 3.4vw, 40px); line-height: 1.08; margin-bottom: 13px; }

.tags { display: flex; flex-wrap: wrap; gap: 7px; list-style: none; margin: 0; padding: 0; }

.tags li {
    padding: 5px 11px;
    border-radius: 3px;
    background: var(--surface);
    border: 1px solid var(--line);
    font-size: 13px;
    font-weight: 500;
    color: var(--body);
}

.detail__grid { display: grid; grid-template-columns: minmax(0, 1fr) 332px; gap: 30px; align-items: start; }

.gallery { margin: 0; position: relative; }

.gallery__main {
    width: 100%;
    aspect-ratio: 3 / 2;
    object-fit: cover;
    border-radius: var(--r-lg);
    background: #eceef0;
}

.gallery figcaption {
    position: absolute;
    bottom: 12px;
    right: 12px;
    padding: 6px 11px;
    border-radius: 999px;
    background: rgba(16, 16, 16, .78);
    color: #fff;
    font: 600 12px/1 var(--sans);
}

.thumbs { display: grid; grid-template-columns: repeat(8, 1fr); gap: 7px; margin-top: 7px; }

.thumbs img {
    width: 100%;
    aspect-ratio: 1;
    object-fit: cover;
    border-radius: 3px;
    cursor: pointer;
    background: #eceef0;
}

.thumbs img:first-child { outline: 2px solid var(--action); outline-offset: -2px; }
.thumbs img:hover { opacity: .82; }

.thumbs__more {
    display: grid;
    place-items: center;
    aspect-ratio: 1;
    border-radius: 3px;
    background: var(--ink);
    color: #fff;
    font: 600 13px/1 var(--sans);
}

.panel {
    margin-top: 26px;
    background: var(--surface);
    border: 1px solid var(--line);
    border-radius: var(--r-lg);
    padding: 20px 22px 22px;
}

.panel h2 {
    font-size: 14px;
    text-transform: uppercase;
    letter-spacing: .08em;
    color: var(--muted);
    padding-bottom: 13px;
    margin-bottom: 4px;
    border-bottom: 1px solid var(--line);
}

/* Specs as a real table, instead of the label-colon-value prose the current site renders.
   One column rather than two: a two-column grid aligns each pair internally but leaves the
   values starting at four different x positions down the page, which is exactly the
   comparison a spec sheet exists to make easy. */
.spec-table { width: 100%; border-collapse: collapse; margin: 0 0 4px; }

.spec-table th {
    width: 38%;
    padding: 11px 14px 11px 0;
    text-align: left;
    font-size: 14px;
    font-weight: 400;
    color: var(--muted);
    border-bottom: 1px solid var(--line);
}

.spec-table td {
    padding: 11px 0;
    font-size: 15px;
    font-weight: 600;
    border-bottom: 1px solid var(--line);
}

.spec-table tr:last-child :where(th, td) { border-bottom: 0; }

.spec-table .num { font-variant-numeric: tabular-nums; }

/* The second heading inside a shared panel needs the space the panel padding gave the
   first one. */
.panel h2:not(:first-child) { margin-top: 26px; }

/* CMS description HTML is arbitrary - h2, p, bullet runs, inline styles. A tight
   prose reset is what makes it look deliberate. */
.prose { color: var(--body); font-size: 15.5px; }
.prose :where(h1, h2, h3) { font-size: 17px; color: var(--text); margin: 18px 0 7px; }
.prose :where(h1, h2, h3):first-child { margin-top: 6px; }
.prose p { margin: 0 0 11px; }
.prose :where(ul, ol) { margin: 0 0 11px; padding-left: 19px; }
.prose li { margin-bottom: 4px; }
.prose strong { color: var(--text); }
.prose :where(img, iframe) { max-width: 100%; border-radius: var(--r); }

.detail__rail { position: sticky; top: 55px; display: grid; gap: 14px; }

.buy { background: var(--surface); border: 1px solid var(--line); border-radius: var(--r-lg); padding: 20px; box-shadow: var(--shadow); }

.buy__price { margin: 0 0 16px; font-family: var(--cond); font-size: 34px; font-weight: 700; line-height: 1; letter-spacing: -.015em; }

.buy__price small { display: block; margin-top: 7px; font-family: var(--sans); font-size: 12.5px; font-weight: 500; color: var(--muted); letter-spacing: 0; }

.buy__poa { margin: 0 0 16px; font-family: var(--cond); font-size: 24px; font-weight: 700; color: var(--structure); }

.btn {
    display: block;
    padding: 13px 16px;
    margin-bottom: 8px;
    border-radius: var(--r);
    text-align: center;
    text-decoration: none;
    font: 700 15px/1.2 var(--sans);
}

.btn--wa { background: var(--wa); color: #fff; }
.btn--wa:hover { background: #1a7a42; }

.btn--primary { background: var(--action); color: #fff; }
.btn--primary:hover { background: var(--action-ink); }

.btn--ghost { border: 1px solid var(--line-strong); color: var(--text); }
.btn--ghost:hover { border-color: var(--ink); }

.buy__rep { margin: 16px 0 0; padding-top: 15px; border-top: 1px solid var(--line); font-size: 13.5px; color: var(--muted); line-height: 1.55; }
.buy__rep strong { color: var(--text); }

.buy--alt { background: var(--structure); border-color: var(--structure); color: #dde5ec; }
.buy--alt h3 { color: #fff; font-size: 16px; margin-bottom: 8px; }
.buy--alt p { margin: 0 0 12px; font-size: 14px; }
.buy--alt .link { color: #fff; font-weight: 600; font-size: 14px; text-decoration: underline; }

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

.foot { background: var(--ink); color: #9ba1a7; margin-top: 10px; }

.foot__inner {
    max-width: 1280px;
    margin: 0 auto;
    padding: 46px 28px 52px;
    display: grid;
    grid-template-columns: 2fr 1fr 1fr 1fr;
    gap: 34px;
}

.brand--light { margin-bottom: 14px; }
.brand--light img { height: 88px; }

.foot p { margin: 0 0 10px; font-size: 14px; line-height: 1.6; }

.foot h4 { color: #fff; font-size: 13px; text-transform: uppercase; letter-spacing: .08em; margin-bottom: 12px; }

.foot a:not(.brand) { display: block; padding: 4px 0; font-size: 14px; color: #9ba1a7; text-decoration: none; }
.foot a:not(.brand):hover { color: #fff; }

/* --- card at narrow container --------------------------------------------- */

@container (max-width: 236px) {
    .card__title { font-size: 16px; }
    .card__foot { flex-wrap: wrap; }
    .icon { margin-left: 0; }
}

/* --- responsive ----------------------------------------------------------- */

@media (max-width: 1080px) {
    .detail__grid { grid-template-columns: 1fr; }
    .detail__rail { position: static; grid-template-columns: repeat(auto-fit, minmax(280px, 1fr)); }
    .foot__inner { grid-template-columns: 1fr 1fr; }
}

@media (max-width: 900px) {
    .nav { display: none; }
    .listing { grid-template-columns: 1fr; }
    .rail { position: static; }
    .finder { grid-template-columns: 1fr 1fr; }
    .finder button { grid-column: 1 / -1; }
    .thumbs { grid-template-columns: repeat(4, 1fr); }
}

@media (max-width: 900px) {
    /* Scrolled rather than hidden - a direct line is the thing a visitor on a phone wants
       most, so it stays reachable instead of being collapsed away. */
    .site__strip__inner { overflow-x: auto; scrollbar-width: none; }
    .site__strip__inner::-webkit-scrollbar { display: none; }
    .site__strip__label { display: none; }
    .rep { padding: 7px 9px; }
}

@media (max-width: 560px) {
    .site__bar, .hero__inner, .listing, .detail, .ref, .foot__inner { padding-left: 16px; padding-right: 16px; }
    .site__strip__inner { padding-left: 16px; padding-right: 16px; }
    .finder { grid-template-columns: 1fr; }
    .grid { grid-template-columns: 1fr 1fr; gap: 12px; }
    .foot__inner { grid-template-columns: 1fr; gap: 24px; }
}

@media (prefers-reduced-motion: reduce) {
    *, *::before, *::after { transition: none !important; animation: none !important; }
    .card:hover { transform: none; }
}

/* --- detail rail: icons and the finance estimate --------------------------- */

/* The buttons become flex rows so an icon and its label centre together as one unit. */
.btn { display: flex; align-items: center; justify-content: center; gap: 9px; }

.btn svg { width: 17px; height: 17px; fill: currentColor; flex: 0 0 auto; }

.buy--calc { background: #f1f3f5; }

.buy--calc h3 {
    font-family: var(--sans);
    font-size: 11px;
    font-weight: 600;
    text-transform: uppercase;
    letter-spacing: .1em;
    color: var(--muted);
    margin-bottom: 10px;
}

.calc { margin: 0 0 6px; display: flex; align-items: baseline; gap: 8px; }

.calc b {
    font-family: var(--cond);
    font-size: 27px;
    font-weight: 700;
    letter-spacing: -.015em;
    font-variant-numeric: tabular-nums;
}

.calc span { font-size: 13px; color: var(--muted); }

.calc__fine { margin: 0 0 13px; font-size: 12px; color: var(--muted); line-height: 1.55; }

.buy--calc .btn { margin-bottom: 0; background: var(--surface); }

/* --- similar stock --------------------------------------------------------- */

.similar { max-width: 1280px; margin: 0 auto; padding: 4px 28px 56px; }

.similar__head {
    display: flex;
    align-items: baseline;
    gap: 16px;
    padding: 24px 0 18px;
    border-top: 1px solid var(--line);
}

.similar__head h2 { font-size: 23px; }

.similar__head .link { margin-left: auto; font-size: 14px; font-weight: 600; color: var(--structure); text-decoration: none; }
.similar__head .link:hover { color: var(--action-ink); text-decoration: underline; }

/* Four across, matching the listing rather than inventing a second card size. */
.similar .grid { grid-template-columns: repeat(auto-fill, minmax(238px, 1fr)); }

@media (max-width: 560px) {
    .similar { padding-left: 16px; padding-right: 16px; }
    .similar .grid { grid-template-columns: 1fr 1fr; gap: 12px; }
}

/* --- interior page head ---------------------------------------------------- */

/* Shorter than the home hero: an interior page has somewhere to get to, so the banner
   announces the page rather than holding the screen. */
.pagehead { position: relative; background: var(--ink); color: #fff; overflow: hidden; min-height: 190px; display: flex; align-items: flex-end; }

.pagehead__media { position: absolute; inset: 0; }
.pagehead__media img { width: 100%; height: 100%; object-fit: cover; }

.pagehead__media::after {
    content: "";
    position: absolute;
    inset: 0;
    background: linear-gradient(180deg, rgba(10, 10, 10, .5) 0%, rgba(10, 10, 10, .2) 45%, rgba(10, 10, 10, .88) 100%);
}

.pagehead__inner { position: relative; max-width: 1280px; margin: 0 auto; padding: 30px 28px 26px; width: 100%; }

.pagehead .crumbs { color: #b9bec3; margin-bottom: 8px; }
.pagehead .crumbs a { color: #fff; }
.pagehead .crumbs span { color: #b9bec3; }

.pagehead h1 { font-size: clamp(27px, 3.6vw, 40px); line-height: 1.06; text-shadow: 0 2px 16px rgba(0, 0, 0, .7); }

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

.about { max-width: 1280px; margin: 0 auto; padding: 34px 28px 10px; }

.about__grid { display: grid; grid-template-columns: minmax(0, 1fr) 332px; gap: 30px; align-items: start; }

.about__body .lead { font-size: 18.5px; line-height: 1.6; color: var(--text); margin: 0 0 16px; }
.about__body p { color: var(--body); margin: 0 0 18px; max-width: 68ch; }

.about__body .panel { margin-top: 0; margin-bottom: 18px; }

.makes { display: flex; flex-wrap: wrap; gap: 8px; list-style: none; margin: 0 0 12px; padding: 0; }

.makes li {
    padding: 7px 13px;
    border-radius: var(--r);
    background: var(--canvas);
    border: 1px solid var(--line);
    font-size: 14px;
    font-weight: 600;
    color: var(--text);
}

.about__rail { position: sticky; top: 20px; }

.about__rail h3 {
    font-family: var(--sans);
    font-size: 11px;
    font-weight: 600;
    text-transform: uppercase;
    letter-spacing: .1em;
    color: var(--muted);
    margin-bottom: 10px;
}

.about__rail h3:not(:first-child) { margin-top: 22px; }

.where { margin: 0; font-size: 14.5px; color: var(--body); line-height: 1.6; }
.where strong { color: var(--text); }

.about__rail .spec-table { margin-bottom: 20px; }

/* --- team ------------------------------------------------------------------ */

.team { max-width: 1280px; margin: 0 auto; padding: 26px 28px 46px; }

.team__head { padding: 24px 0 20px; border-top: 1px solid var(--line); }
.team__head h2 { font-size: 26px; margin-bottom: 6px; }
.team__head p { margin: 0; color: var(--muted); font-size: 15px; }

.team__grid { display: grid; grid-template-columns: repeat(auto-fit, minmax(212px, 1fr)); gap: 18px; }

.person {
    background: var(--surface);
    border: 1px solid var(--line);
    border-radius: var(--r-lg);
    padding: 20px;
    text-align: center;
    box-shadow: var(--shadow);
}

/* Square and cropped, because the supplied portraits are not a consistent size. */
.person img {
    width: 96px;
    height: 96px;
    margin: 0 auto 12px;
    border-radius: 50%;
    object-fit: cover;
    background: var(--canvas);
    border: 2px solid var(--line);
}

.person h3 { font-size: 19px; margin-bottom: 2px; }

.person__role { margin: 0 0 11px; font-size: 12px; text-transform: uppercase; letter-spacing: .09em; color: var(--muted); }

.person__line { display: block; font-size: 14.5px; font-weight: 600; color: var(--structure); text-decoration: none; padding: 2px 0; }
.person__line:hover { color: var(--action-ink); }
.person__line--mail { font-weight: 400; font-size: 13px; color: var(--muted); word-break: break-all; }

/* --- callout --------------------------------------------------------------- */

.callout { background: var(--structure); color: #dde5ec; }

.callout__inner { max-width: 1280px; margin: 0 auto; padding: 44px 28px 48px; text-align: center; }

.callout h2 { color: #fff; font-size: clamp(22px, 2.8vw, 31px); margin-bottom: 8px; }
.callout p { margin: 0 0 20px; font-size: 15.5px; }
.callout .btn { display: inline-flex; margin: 0; padding: 13px 30px; }

@media (max-width: 1080px) {
    .about__grid { grid-template-columns: 1fr; }
    .about__rail { position: static; max-width: 420px; }
}

@media (max-width: 560px) {
    .pagehead__inner, .about, .team, .callout__inner { padding-left: 16px; padding-right: 16px; }
    .team__grid { grid-template-columns: 1fr 1fr; gap: 12px; }
    .person { padding: 14px; }
    .person img { width: 72px; height: 72px; }
    .person__line--mail { font-size: 12px; }
}

/* --- body type tiles ------------------------------------------------------- */

.bt { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 7px; padding: 2px 0 4px; }

.bt__tile {
    position: relative;
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 3px;
    min-height: 104px;
    padding: 11px 5px 9px;
    border: 1px solid var(--line);
    border-radius: var(--r-lg);
    background: var(--surface);
    cursor: pointer;
    text-align: center;
    transition: border-color .12s, background .12s;
}

/* The checkbox stays in the DOM for the form and for keyboard and screen-reader use - it is
   taken out of the layout, not removed. */
.bt__tile input {
    position: absolute;
    opacity: 0;
    width: 0;
    height: 0;
    margin: 0;
}

/* Muted rather than inked: the tiles are a shape cue, and at this size three dark
   silhouettes in a row pull harder than the makes list above them. Selecting one is what
   brings it forward. */
.bt__icon { width: 100%; height: 32px; color: var(--muted); opacity: .85; }

/* The drawings are 720 units wide, so their own stroke widths shrink below half a pixel at
   tile size. Pinned in screen pixels instead: the outline at one weight, the detail lines
   (those carrying their own stroke-width) a little lighter. */
.bt__icon * { vector-effect: non-scaling-stroke; stroke-width: 1.4px; }
.bt__icon [stroke-width] { stroke-width: .9px; }

.bt__label { font-size: 12px; font-weight: 500; line-height: 1.25; color: var(--body); }

/* Pinned to the bottom so the counts line up across the row - the labels wrap to one, two
   or three lines ("Tipper" against "Long wheel base") and would otherwise sit ragged. */
.bt__count { margin-top: auto; padding-top: 3px; font-size: 11px; color: var(--muted); font-variant-numeric: tabular-nums; }

.bt__tile:hover { border-color: var(--line-strong); }
.bt__tile:hover .bt__icon { opacity: 1; }

.bt__tile:has(input:checked) {
    border-color: var(--action);
    background: var(--action-tint);
}

.bt__tile:has(input:checked) .bt__icon,
.bt__tile:has(input:checked) .bt__label { color: var(--action-ink); }
.bt__tile:has(input:checked) .bt__icon { opacity: 1; }
.bt__tile:has(input:checked) .bt__label { font-weight: 600; }

.bt__tile:has(input:focus-visible) { outline: 2px solid var(--action); outline-offset: 2px; }

.bt__more {
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 5px;
    width: 100%;
    margin-top: 8px;
    padding: 7px;
    border: 0;
    background: none;
    font: 600 13px/1 var(--sans);
    color: var(--structure);
    cursor: pointer;
}

.bt__more svg { width: 15px; height: 15px; }
.bt__more:hover { color: var(--action-ink); }

/* --- deal type pills ------------------------------------------------------- */

/* Full width of the rail rather than shrink-to-fit: the pills line up on both edges and
   the counts fall into the same right-hand column as every other facet. */
.deals { display: flex; flex-direction: column; align-items: stretch; gap: 7px; padding: 2px 0 4px; }

.deal {
    position: relative;
    display: flex;
    align-items: center;
    gap: 9px;
    padding: 9px 15px 9px 13px;
    border: 1px solid var(--line-strong);
    border-radius: 999px;
    background: var(--surface);
    font-size: 13.5px;
    font-weight: 400;
    color: var(--body);
    cursor: pointer;
    transition: border-color .12s, background .12s;
}

/* Same approach as the body-type tiles: the input stays for the form and for keyboard and
   screen-reader users, taken out of the layout rather than removed. */
.deal input { position: absolute; opacity: 0; width: 0; height: 0; margin: 0; }

.deal svg { width: 15px; height: 15px; color: var(--muted); flex: 0 0 auto; }

.deal i { margin-left: auto; font-style: normal; font-size: 12.5px; color: var(--muted); font-variant-numeric: tabular-nums; }

.deal:hover { border-color: var(--muted); }

.deal:has(input:checked) { border-color: var(--action); background: var(--action-tint); color: var(--action-ink); font-weight: 500; }
.deal:has(input:checked) i { color: var(--action-ink); }
.deal:has(input:checked) svg { color: var(--action); }

.deal:has(input:focus-visible) { outline: 2px solid var(--action); outline-offset: 2px; }

/* A deal type with nothing behind it stays visible - the badge still tells a buyer the
   signal exists - but is not offered as something to tick. */
.deal--empty { opacity: .45; cursor: default; }
.deal--empty:hover { border-color: var(--line-strong); }