/* Ark Vehicles — design tokens ported from the Claude Design artboards. */
:root{
  --bg:#0F1110; --fg:#F2F2EE; --muted:#A2A6A0; --band:#181B19; --chip:#222623;
  --hair:rgba(255,255,255,.1); --rule:rgba(255,255,255,.24);
  --accent:#C8102E; --onaccent:#fff; --inv:#F2F2EE; --oninv:#0F1110;
  /* Auto Trader's wordmark: reversed to white on the dark theme, as their own reversed logo is. */
  --at-ink:#FFFFFF;
  color-scheme:dark light;
}
:root[data-theme="light"]{
  --bg:#F4F4F1; --fg:#141514; --muted:#666A64; --band:#FFFFFF; --chip:#E9E9E4;
  --hair:rgba(0,0,0,.08); --rule:rgba(0,0,0,.22); --inv:#141514; --oninv:#F4F4F1;
  --at-ink:#0C1233;
}
@media (prefers-color-scheme: light){
  :root:not([data-theme="dark"]){
    --bg:#F4F4F1; --fg:#141514; --muted:#666A64; --band:#FFFFFF; --chip:#E9E9E4;
    --hair:rgba(0,0,0,.08); --rule:rgba(0,0,0,.22); --inv:#141514; --oninv:#F4F4F1;
    --at-ink:#0C1233;
  }
}
*{box-sizing:border-box}
body{margin:0;background:var(--bg);color:var(--fg);
  font-family:'Manrope',Helvetica,Arial,sans-serif;-webkit-font-smoothing:antialiased;
  transition:background .2s,color .2s}
a{color:var(--fg);text-decoration:none}
a:hover{color:var(--accent)}
button{font-family:inherit;color:inherit;background:none;border:none;cursor:pointer}
select,input,textarea{font-family:inherit;color:inherit;background:var(--band);
  border:1px solid var(--hair);border-radius:10px;padding:13px 14px;font-size:14px;
  width:100%;appearance:none}
select option{color:var(--fg);background:var(--band)}

/* Checkboxes, which the rule above had quietly destroyed.
 *
 * `appearance:none` is right for the text inputs and selects it was written for, and fatal
 * for a checkbox: it strips the native control, so there is nothing left to draw a tick with.
 * The box still toggled — it simply never looked any different, which from the customer's
 * side is a checkbox that does not work. It reached a live checkout that way because the
 * terms tick is the first checkbox on the site.
 *
 * So the control is drawn here rather than borrowed. The width, padding and radius above all
 * have to be undone: a checkbox inheriting `width:100%` and 13px of padding is a wide grey
 * slab that looks like an empty text field. */
input[type="checkbox"]{
  width:20px;height:20px;flex:none;padding:0;border-radius:6px;
  border:1.5px solid var(--rule);background:var(--band);
  display:grid;place-content:center;cursor:pointer;
  transition:background .12s ease,border-color .12s ease}
input[type="checkbox"]::before{
  content:"";width:11px;height:11px;transform:scale(0);transition:transform .12s ease-in-out;
  background:var(--onaccent);
  /* A tick, drawn rather than typed: a character would pick up the page font and sit
     slightly wrong at some sizes. */
  clip-path:polygon(14% 44%, 0 60%, 39% 100%, 100% 18%, 84% 4%, 39% 69%)}
input[type="checkbox"]:checked{background:var(--accent);border-color:var(--accent)}
input[type="checkbox"]:checked::before{transform:scale(1)}
input[type="checkbox"]:hover{border-color:var(--fg)}
@media (prefers-reduced-motion:reduce){input[type="checkbox"],input[type="checkbox"]::before{transition:none}}
img,video{max-width:100%}
:focus-visible{outline:2px solid var(--accent);outline-offset:2px}
@media (prefers-reduced-motion:reduce){*{animation:none!important;transition:none!important;scroll-behavior:auto!important}}

/* responsive visibility, from the artboards */
.vd-desk{display:flex}
.vd-mob{display:none}
/* 1100, not 980: below that the full menu and the buttons beside it no longer fit on one line,
   and a header on two lines pushes the page down for no gain. The phone header fits any width. */
@media (max-width:1100px){ .vd-desk{display:none!important} .vd-mob{display:flex} }
/* Phones: the small VEHICLES / MANSFIELD lettering makes way for the "Vans & cars" button rather
   than the header wrapping onto a second line. ARK and the red bar stay, so the brand is still there. */
@media (max-width:419px){ .wordmark-sub{display:none!important} }
/* The phone header's Vehicles button: the brand red, so it is the first thing seen. Colours in the
   class rather than inline, so the "you are here" rule below can override them on the listings. */
.mob-stock{background:var(--accent);color:var(--onaccent)}
body[data-nav="vehicles"] .mob-stock{background:var(--inv);color:var(--oninv)}

/* The menu. The stock is the one red button, because it is what nearly everybody came for; the
   rest are quiet until hovered. Where you are is a dark pill, driven by <body data-nav>. */
.sitenav{align-items:center;gap:4px}
.navlink{padding:9px 14px;border-radius:999px;color:var(--fg);
  font-size:14px;font-weight:600;white-space:nowrap}
.navlink:hover{background:var(--band);color:var(--fg)}
.navlink-stock{background:var(--accent);color:var(--onaccent);font-weight:700;margin-right:6px}
.navlink-stock:hover{background:var(--accent);color:var(--onaccent);filter:brightness(1.08)}

/* Between a tablet and a full laptop screen the header has to fit on one line, so the menu
   tightens and the phone number pill goes (it is still on Contact sales and in the footer). */
@media (max-width:1200px){
  .navlink{padding:8px 10px;font-size:13px}
  .hdr-phone{display:none!important}
}

.mobnav{display:flex;align-items:center;justify-content:space-between;gap:12px;
  padding:12px 16px;border-radius:12px;background:var(--band);color:var(--fg)}
.mobnav-text{display:flex;flex-direction:column;gap:2px;min-width:0}
.mobnav-title{font-size:16px;font-weight:700;line-height:1.25}
.mobnav-sub{font-size:13px;font-weight:500;line-height:1.35;color:var(--muted)}
.mobnav-go{font-size:24px;line-height:1;color:var(--muted);flex:none}
.mobnav-count{min-width:28px;height:28px;padding:0 8px;border-radius:999px;background:var(--bg);
  display:flex;align-items:center;justify-content:center;font-size:13px;font-weight:700;flex:none}
.mobnav-stock{background:var(--accent);color:var(--onaccent)}
.mobnav-stock .mobnav-sub,.mobnav-stock .mobnav-go{color:var(--onaccent);opacity:.85}

body[data-nav="vehicles"] [data-nav="vehicles"],
body[data-nav="sell"]     [data-nav="sell"],
body[data-nav="parts"]    [data-nav="parts"],
body[data-nav="about"]    [data-nav="about"]{background:var(--inv);color:var(--oninv)}
body[data-nav="vehicles"] .mobnav[data-nav="vehicles"] :is(.mobnav-sub,.mobnav-go),
body[data-nav="sell"]     .mobnav[data-nav="sell"]     :is(.mobnav-sub,.mobnav-go),
body[data-nav="parts"]    .mobnav[data-nav="parts"]    :is(.mobnav-sub,.mobnav-go),
body[data-nav="about"]    .mobnav[data-nav="about"]    :is(.mobnav-sub,.mobnav-go){color:inherit;opacity:.75}

#mobmenu[hidden]{display:none}

/* The footer on a phone. Its columns were a 220px brand block plus 160px each, which is 404px
   before any padding: wider than a 375px phone, so every page on the site scrolled sideways and
   the browser zoomed out to fit it. Two columns, with the brand and the address full width. */
@media (max-width:640px){
  .footgrid{grid-template-columns:repeat(2,minmax(0,1fr))!important}
  .footgrid > :first-child,.footgrid > :last-child{grid-column:1/-1}
}

/* The bottom-right floaters: WhatsApp, and on the parts page the basket beside it.
 *
 * One row rather than two independently positioned buttons. They used to be positioned
 * separately, 14px and 12px from the same corner, so on /parts/ the WhatsApp button sat
 * directly on top of the basket and hid it. A flex row cannot do that however wide the
 * basket button gets, and it keeps WhatsApp on the left where it was asked for. */
#floaters{position:fixed;right:clamp(14px,3vw,28px);bottom:clamp(14px,3vw,28px);z-index:60;
  display:flex;align-items:center;gap:12px;pointer-events:none}
#floaters > *{pointer-events:auto}
/* Out of the way of anything covering the page.
 *
 * `#floaters` and the parts drawer are both z-index 60, and at equal z-index the later
 * element in the DOM wins — these live in the footer partial, so they painted on top of the
 * drawer's Checkout button. Keyed to the same body class as the scroll lock so the two
 * cannot disagree, and specific enough to beat the `display:flex` above. */
body.overlay-open #floaters{display:none}

/* Revealed after 60% of a viewport of scrolling. */
#wa{flex:none;width:54px;height:54px;border-radius:999px;background:#25D366;color:#fff;
  display:flex;align-items:center;justify-content:center;
  box-shadow:0 8px 24px rgba(0,0,0,.28);
  opacity:0;pointer-events:none;transition:opacity .25s,transform .25s;transform:translateY(6px)}
#wa.on{opacity:1;pointer-events:auto;transform:none}
#wa:hover{background:#1EBE5B;color:#fff}

/* The basket keeps its own look; the row supplies its position. Two of them: the parts page
 * has its own (`#p-fab`), and a part page has a counting one that links to it (`#pp-basket`).
 *
 * `display:flex` belongs here rather than in the element's inline style, because an inline
 * display would beat the `[hidden]` attribute's `display:none` and the empty basket would
 * never go away. The `[hidden]` rule below is more specific, so it still wins. Without the
 * flex the pill laid out as a block: the icon and the words stopped sharing a baseline and
 * the text sat high in the pill. */
#floaters #p-fab,
#floaters #pp-basket{position:static;right:auto;bottom:auto;display:flex}
#floaters #p-fab[hidden],
#floaters #pp-basket[hidden]{display:none}

/* Sell hero: the design's 90deg gradient stops working once the grid stacks,
   so below that breakpoint darken vertically instead. */
/* Parts hero: the same problem as the sell hero, and the same answer.
 *
 * The design's 90deg gradient clears the left half and fades out by 80%, which works while
 * the copy sits in that left half. On a narrow screen the paragraph wraps wider and runs
 * across the photograph — over pale wrapped panels, where it is simply unreadable. It only
 * showed once a real photograph replaced the flat placeholder, which is the point at which
 * this kind of thing always shows.
 *
 * Below the breakpoint the horizontal fade is dropped for a vertical one across the whole
 * band, so the text has something dark behind it wherever it wraps to. */
/* The photograph fades in from the left rather than starting at a hard edge.
 *
 * A mask on the image, not a gradient over it — the same technique the finance hero uses.
 * An overlay has to guess the colour behind it and gets it wrong the moment the theme
 * changes; a mask makes the pixels themselves transparent, so whatever is behind shows
 * through and light mode needs no second rule. It also lets the photograph start further
 * left than its hard edge could, which gives the crop more room. */
.parts-hero-media {
  position: absolute; inset: 0 0 0 38%;
  -webkit-mask-image: linear-gradient(to right, transparent 0%, rgba(0,0,0,.28) 16%, #000 48%);
  mask-image: linear-gradient(to right, transparent 0%, rgba(0,0,0,.28) 16%, #000 48%);
}
/* Nothing on top on desktop: the mask has already cleared the space the copy sits in, and
   a scrim as well would only grey down the half of the photograph worth looking at. */
.parts-scrim { background: none; }
@media (max-width: 900px) {
  /* Full bleed, and no horizontal mask: fading the left of a full-width photograph would
     take a bite out of it for no reason. The vertical scrim below does the work here. */
  .parts-hero-media { inset: 0; -webkit-mask-image: none; mask-image: none; }
  .parts-scrim {
    background: linear-gradient(180deg,
      color-mix(in srgb, var(--band) 82%, transparent) 0%,
      color-mix(in srgb, var(--band) 62%, transparent) 60%,
      color-mix(in srgb, var(--band) 88%, transparent) 100%);
  }
}

.sell-scrim { background: none; }
@media (max-width: 760px) {
  .sell-scrim {
    background: linear-gradient(180deg,
      color-mix(in srgb, var(--band) 70%, transparent) 0%,
      color-mix(in srgb, var(--band) 40%, transparent) 55%,
      color-mix(in srgb, var(--band) 85%, transparent) 100%);
  }
}

/* Photograph placeholders left by the design export.
 *
 * `<image-slot>` was a custom element in Claude Design's canvas runtime, which is not a
 * production runtime — the rest of that markup was ported when the site was converted, and
 * these were missed along with a `<script src="./image-slot.js">` that 404'd on every page
 * load of every page.
 *
 * They stay, styled, rather than being deleted: each one carries a `placeholder` attribute
 * describing the photograph that belongs there, so they are the shot list (ASSETS-NEEDED.md)
 * rendered in place. An empty box says nothing; this one says what is missing.
 */
image-slot {
  position: absolute;
  inset: 0;
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 16px;
  background: var(--chip);
  color: var(--muted);
  font-size: 12px;
  line-height: 1.5;
  text-align: center;
}

image-slot::after {
  content: attr(placeholder);
}


/* Body-style icons are black line art on white. The dark theme inverts them; the light
   theme leaves them alone. Same files either way. */
/* The files have a solid white background. Inverted for the dark theme that becomes a
   black box, so `screen` blends it away (black is transparent under screen); on the light
   theme `multiply` blends the white away. Same files, no box either way. */
.body-icon img{filter:invert(1) brightness(1.1);mix-blend-mode:screen}
:root[data-theme="light"] .body-icon img{filter:none;mix-blend-mode:multiply}
@media (prefers-color-scheme: light){
  :root:not([data-theme="dark"]) .body-icon img{filter:none;mix-blend-mode:multiply}
}

/* The three drawings on the sell page.
 *
 * One illustration cut into its panels, then each panel cropped to its ink and scaled so all
 * three drawings are the same height on a canvas of the same size. Without that the first
 * panel sat smaller and off to one side — its ink was 592x320 inside a 760x390 frame, against
 * two panels whose ink filled the width — and three cards that should read as a set read as
 * three accidents.
 *
 * Dark is the default and light is the exception, matching `.body-icon img` above. Written
 * the other way round — inverting inside `prefers-color-scheme: dark` — it breaks the moment
 * somebody uses the theme button, because the toggle sets `data-theme` while the media query
 * still answers for the operating system. */
.sell-step-art{
  width:100%;
  height:auto;
  display:block;
  margin:0 0 4px;
  filter:invert(1);
  opacity:.92;
}
:root[data-theme="light"] .sell-step-art{filter:none}
@media (prefers-color-scheme: light){
  :root:not([data-theme="dark"]) .sell-step-art{filter:none}
}

/* ---- hero video: whole on wide screens, with blurred sides -------------------------------
   The clip is 16:9. A hero box wider than that would either crop it (cover) or stretch it;
   neither is acceptable for a produced film of the actual vehicle. So the box is a container,
   and once it is wider than the clip the front copy is shown whole and the back copy — the
   same frames, blurred — fills the sides. Below that ratio, and on every browser without
   container queries, the front copy covers the box as before and the back copy is hidden. */
.hero-media { container-type: size; container-name: hero; }
/* Both copies are transparent. A video element paints its own background across the whole
   element box, not just behind the frame, so an opaque colour here fills the contain bars
   with flat black and buries the backdrop — which is exactly the pillarbox this is for. The
   black while nothing has loaded is the container's, one layer further back. */
.hero-media video { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; background: transparent; }
#hero-backdrop { display: none; }
@container hero (min-aspect-ratio: 16/9) {
  #hero { object-fit: contain; }
  #hero-backdrop { display: block; filter: blur(12px) brightness(.75) saturate(1.05); transform: scale(1.04); }
}

/* ---- hero on a phone held upright ------------------------------------------------------
   The portrait cut fills the screen: the box grows to most of the viewport so the van is seen
   whole, and the copy sits at the bottom over the darker part of the frame. */
@media (orientation: portrait) and (max-width: 900px) {
  .hero-box { min-height: min(92svh, 900px) !important; }
}

/* ---- a card that answers the pointer ----------------------------------------------------
   Every tile in "Ready to view this week" is a link to a vehicle costing tens of thousands
   of pounds, and none of them moved when you pointed at one. The lift is small on purpose:
   enough to say the whole tile is the target, not enough to make the row restless. Suppressed
   for anyone who has asked for less motion, like everything else that moves here. */
.card-lift { transition: transform .18s ease, border-color .18s ease, box-shadow .18s ease; }
.card-lift:hover { transform: translateY(-3px); border-color: var(--rule); box-shadow: 0 14px 30px rgba(0, 0, 0, .25); }
@media (prefers-reduced-motion: reduce) {
  .card-lift { transition: none; }
  .card-lift:hover { transform: none; }
}

/* ---- the three doors --------------------------------------------------------------------
   Finance, part exchange and parts are the three things somebody does here that is not
   buying a vehicle outright, and the whole job of saying "this is a link" was being done by
   a grey arrow glyph at the end of the row. The arrow is now the circle the rest of the site
   uses, and it fills when the pointer is anywhere on the row rather than only on the arrow. */
.door { transition: transform .18s ease, border-color .18s ease; }
.door:hover { transform: translateY(-2px); border-color: var(--rule); }
.door-arrow { transition: background .18s ease, color .18s ease, border-color .18s ease; }
.door:hover .door-arrow,
.card-lift:hover .door-arrow { background: var(--inv); color: var(--oninv); border-color: var(--inv); }
@media (prefers-reduced-motion: reduce) {
  .door, .door-arrow { transition: none; }
  .door:hover { transform: none; }
}

/* ---- three to a row, and no more --------------------------------------------------------
   `auto-fill` on a 250px minimum put four and sometimes five across a desktop window, and a
   £1,250 bumper — or a £44,500 Range Rover — rendered 250px wide is a thumbnail of a grey
   shape. The photographs are the whole argument for both, so the column is allowed to get
   wide and the count is capped instead. Two on a tablet, one on a phone.

   One rule for the parts catalogue, the related strip and the forecourt, because they are
   the same problem and a second copy of this would drift from the first. */
.grid-3 { display: grid; grid-template-columns: minmax(0, 1fr); gap: 20px; }
@media (min-width: 640px)  { .grid-3 { grid-template-columns: repeat(2, minmax(0, 1fr)); } }
@media (min-width: 1000px) { .grid-3 { grid-template-columns: repeat(3, minmax(0, 1fr)); } }

/* ---- vehicle page: overview and description, Auto Trader's layout -------------------- */
.vd-overview{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:22px 18px}
.vd-overview > [data-mount]{display:contents}
@media (max-width:900px){ .vd-overview{grid-template-columns:repeat(2,minmax(0,1fr))} }
@media (max-width:420px){ .vd-overview{gap:18px 12px} }
.vd-ov{display:flex;gap:10px;align-items:flex-start;min-width:0}
.vd-ov-mark{flex:none;width:20px;height:20px;display:flex;align-items:center;justify-content:center;margin-top:1px;color:var(--fg)}
.vd-ov-label{margin:0;font-size:14px;font-weight:700;line-height:1.3}
.vd-ov-value{margin:3px 0 0;font-size:15px;line-height:1.35;color:var(--muted);overflow-wrap:anywhere}

/* Three lines and an ellipsis until it is opened. */
.vd-desc p{margin:0 0 12px;white-space:pre-line}
.vd-desc p:last-child{margin-bottom:0}
.vd-desc.is-clamped{display:-webkit-box;-webkit-box-orient:vertical;-webkit-line-clamp:3;overflow:hidden}
.vd-desc.is-clamped p{display:inline}
.vd-desc.is-clamped p + p::before{content:" "}
.vd-desc-toggle{display:flex;align-items:center;gap:12px;width:100%;margin-top:16px;padding:16px 0 2px;border-top:1px solid var(--hair);font-size:15px;font-weight:700;text-align:left;color:var(--fg)}
.vd-desc-toggle[hidden]{display:none}
.vd-desc-toggle span{flex:1}
.vd-desc-toggle[aria-expanded="true"] .vd-desc-chev{transform:rotate(-90deg)}
.vd-desc-chev{transition:transform .15s}

/* ---- the photo gallery: vehicle page and part page ------------------------------------
   Moved here from vehicle.html so the part page draws the same gallery from the same rules. */
/* Laid out the way Auto Trader does it: the lead photograph large on the left,
   the rest in two rows that scroll sideways beside it. On a phone it is one photograph wide
   and swipes. */
.vd-gal{display:grid;grid-template-columns:minmax(0,1fr) minmax(0,1fr);gap:8px;height:clamp(340px,40vw,540px);margin-bottom:clamp(16px,2vw,24px)}
.vd-lead{position:relative;border-radius:16px;overflow:hidden;background:var(--chip)}
.vd-lead-track{position:absolute;inset:0;display:flex;overflow-x:auto;scroll-snap-type:x mandatory;scrollbar-width:none;overscroll-behavior-x:contain}
.vd-lead-track::-webkit-scrollbar,.vd-strip::-webkit-scrollbar,.vd-lb-track::-webkit-scrollbar,.vd-lb-thumbs::-webkit-scrollbar{display:none}
.vd-shot{position:relative;flex:0 0 100%;height:100%;scroll-snap-align:start;padding:0;border:0;background:var(--chip);cursor:zoom-in;overflow:hidden;display:block}
.vd-shot img,.vd-tile img{position:absolute;inset:0;width:100%;height:100%;object-fit:cover;transition:transform .35s ease}
.vd-shot:hover img,.vd-tile:hover img{transform:scale(1.05)}
.vd-side{position:relative;min-width:0}
.vd-strip{height:100%;display:grid;grid-auto-flow:column;grid-template-rows:1fr 1fr;grid-auto-columns:calc((100% - 8px) / 2.15);gap:8px;overflow-x:auto;scroll-snap-type:x mandatory;scroll-behavior:smooth;scrollbar-width:none;border-radius:16px}
.vd-tile{position:relative;border-radius:12px;overflow:hidden;background:var(--chip);padding:0;border:0;cursor:zoom-in;scroll-snap-align:start}
.vd-pill{position:absolute;display:flex;align-items:center;gap:8px;border-radius:999px;background:#FFFFFF;color:#0F1110;font-weight:700;font-size:14px;box-shadow:0 2px 10px rgba(0,0,0,.25)}
.vd-pill svg{flex:none}
.vd-gallery-btn{left:14px;bottom:14px;height:42px;padding:0 18px 0 14px}
.vd-count{right:10px;bottom:10px;height:34px;padding:0 12px;border-radius:8px;font-size:14px}
.vd-lead .vd-count{display:none}
/* Drawing the eye into the photographs. The "see all" button is the brand red, the one coloured
   thing on the gallery, and says how many there are. With a pointer, the photograph under it
   darkens a little and shows an enlarge mark, so every one reads as something to open rather than
   a picture on a page. Not on a film: that has its own play mark. */
.vd-gallery-btn{background:var(--accent);color:var(--onaccent)}
@media (hover:hover){
  .vd-shot::after,.vd-tile::after{content:"";position:absolute;inset:0;background:rgba(0,0,0,0);transition:background .25s;pointer-events:none}
  .vd-shot:hover::after,.vd-tile:hover::after{background:rgba(0,0,0,.16)}
  .vd-shot::before,.vd-tile::before{content:"";position:absolute;left:50%;top:50%;z-index:1;width:56px;height:56px;margin:-28px 0 0 -28px;border-radius:999px;
    background:rgba(15,17,16,.72) url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23fff' stroke-width='2.2' stroke-linecap='round'%3E%3Ccircle cx='10.5' cy='10.5' r='6.5'/%3E%3Cpath d='m20 20-4.6-4.6M10.5 7.5v6M7.5 10.5h6'/%3E%3C/svg%3E") center/24px no-repeat;opacity:0;transform:scale(.85);transition:opacity .2s,transform .2s;pointer-events:none}
  .vd-tile::before{width:42px;height:42px;margin:-21px 0 0 -21px;background-size:20px}
  .vd-shot:hover::before,.vd-tile:hover::before{opacity:1;transform:scale(1)}
  .vd-shot:has(.vd-play)::before,.vd-tile:has(.vd-play)::before{display:none}
  .vd-shot{cursor:zoom-in}
}
.vd-arrow{position:absolute;top:50%;width:40px;height:40px;margin-top:-20px;border-radius:999px;background:#FFFFFF;color:#0F1110;display:flex;align-items:center;justify-content:center;box-shadow:0 2px 10px rgba(0,0,0,.3);transition:opacity .2s}
.vd-arrow[hidden]{display:none}
.vd-strip-next{right:-10px}
.vd-strip-prev{left:-10px}
@media (max-width:900px){
  .vd-gal{grid-template-columns:1fr;height:auto;margin-left:calc(-1 * clamp(20px,4.5vw,40px));margin-right:calc(-1 * clamp(20px,4.5vw,40px))}
  .vd-lead{aspect-ratio:4/3;border-radius:0}
  .vd-side{display:none}
  .vd-lead .vd-count{display:flex}
  .vd-gallery-btn{height:38px;font-size:13px}
}
/* The full-screen viewer. A <dialog>, so Escape closes it and focus stays inside. */
.vd-lb{margin:0;padding:0;border:0;width:100vw;height:100dvh;max-width:none;max-height:none;background:#0A0B0A;color:#F2F2EE}
.vd-lb::backdrop{background:#0A0B0A}
.vd-lb[open]{display:grid;grid-template-rows:auto minmax(0,1fr) auto;grid-template-columns:minmax(0,1fr)}
.vd-lb-bar{display:flex;align-items:center;justify-content:space-between;gap:12px;padding:12px clamp(12px,2vw,24px)}
/* One column no wider than the screen, and a title that gives way to the close button. The column
   used to size itself to the title's full length, and a part's name is long: on a phone the
   viewer grew past the edge, and the close button went with it — there was no way out. */
.vd-lb-title{flex:1;min-width:0;font-weight:700;font-size:15px;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.vd-lb-close{width:42px;height:42px;border-radius:999px;background:rgba(255,255,255,.12);color:#F2F2EE;display:flex;align-items:center;justify-content:center;flex:none}
.vd-lb-stage{position:relative;min-height:0}
.vd-lb-track{position:absolute;inset:0;display:flex;overflow-x:auto;scroll-snap-type:x mandatory;scrollbar-width:none}
.vd-lb-frame{flex:0 0 100%;height:100%;scroll-snap-align:center;display:flex;align-items:center;justify-content:center;padding:0 clamp(0px,5vw,72px)}
.vd-lb-frame img{max-width:100%;max-height:100%;object-fit:contain;display:block;border-radius:6px}
.vd-lb .vd-arrow{width:48px;height:48px;margin-top:-24px}
.vd-lb-prev{left:clamp(8px,1.5vw,20px)}
.vd-lb-next{right:clamp(8px,1.5vw,20px)}
.vd-lb-thumbs{display:flex;gap:6px;overflow-x:auto;padding:10px clamp(12px,2vw,24px) 14px;scrollbar-width:none}
.vd-lb-thumbs button{flex:0 0 auto;width:84px;aspect-ratio:4/3;border-radius:6px;overflow:hidden;padding:0;border:2px solid transparent;opacity:.55;position:relative;background:#222623}
.vd-lb-thumbs button[aria-current="true"]{border-color:#F2F2EE;opacity:1}
.vd-lb-thumbs img{position:absolute;inset:0;width:100%;height:100%;object-fit:cover}
@media (max-width:900px){.vd-lb .vd-arrow{display:none}.vd-lb-thumbs button{width:64px}}
/* A film in the gallery: a still frame with a play mark until it is opened full screen. */
.vd-shot video,.vd-tile video{position:absolute;inset:0;width:100%;height:100%;object-fit:cover;background:#0F1110}
.vd-play{position:absolute;inset:0;display:flex;align-items:center;justify-content:center;pointer-events:none}
.vd-play span{width:60px;height:60px;border-radius:999px;background:#FFFFFF;color:#0F1110;display:flex;align-items:center;justify-content:center;box-shadow:0 4px 18px rgba(0,0,0,.4)}
.vd-tile .vd-play span{width:38px;height:38px}
.vd-lb-frame video{max-width:100%;max-height:100%;display:block;border-radius:6px;background:#000}

/* ---- loading ghosts: stock pages ------------------------------------------------------
   The vehicles and parts pages wait for the stock list before they draw anything, so for a
   moment they were a heading over an empty space, and then everything at once. These are the
   cards' and tiles' shapes in grey, in the static page, shimmering until the real ones replace
   them. Still, not shimmering, for anybody who has asked for less motion. */
.sk{display:block;border-radius:8px;background:linear-gradient(90deg,var(--chip) 0%,color-mix(in srgb,var(--chip) 84%,var(--fg) 16%) 45%,var(--chip) 90%);background-size:220% 100%;animation:sk-shimmer 1.3s ease-in-out infinite}
@keyframes sk-shimmer{from{background-position:120% 0}to{background-position:-100% 0}}
@media (prefers-reduced-motion:reduce){.sk{animation:none}}
.sk-card{display:flex;flex-direction:column;border-radius:18px;overflow:hidden;background:var(--band);border:1px solid var(--hair)}
.sk-img{aspect-ratio:4/3;border-radius:0}
.sk-body{padding:20px;display:flex;flex-direction:column;gap:12px}
.sk-line{height:18px}
.sk-line.sk-sm{height:12px}
.sk-chips{display:flex;gap:6px}
.sk-chip{width:58px;height:26px}
.sk-foot{display:flex;justify-content:space-between;align-items:center;margin-top:6px}
.sk-price{width:96px;height:26px}
.sk-btn{width:120px;height:36px;border-radius:999px}
.sk-tile{display:flex;flex-direction:column;align-items:center;gap:9px;width:clamp(100px,27vw,132px);padding:18px 10px 16px;border-radius:14px;background:var(--band);border:1px solid var(--hair)}
.sk-ico{width:64px;height:36px;border-radius:10px}

/* ---- "what we do" links: a heading, one line and an arrow, divided by hairlines ---------
   The home page and the About page. They were three big photograph cards on each page, and the
   business said it was too many photographs and looked like everything else; the photographs
   are now one overlapping pair (.pcollage), and these are words. */
.plinks{display:flex;flex-direction:column;border-top:1px solid var(--hair)}
.plinks.across{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));border-bottom:1px solid var(--hair)}
.plink{display:flex;align-items:center;gap:18px;padding:clamp(18px,2.2vw,26px) 4px;border-bottom:1px solid var(--hair);color:var(--fg)}
.plinks.across .plink{flex-direction:column;align-items:flex-start;border-bottom:0;padding:clamp(22px,3vw,36px) clamp(18px,2.6vw,32px)}
.plinks.across .plink + .plink{border-left:1px solid var(--hair)}
.plink:hover{color:var(--fg)}
.plink-text{flex:1;min-width:0}
.plink h3{margin:0 0 6px;font-weight:800;font-size:clamp(20px,2vw,26px);letter-spacing:-.02em;transition:color .2s}
.plink p{margin:0;font-size:15px;line-height:1.55;color:var(--muted)}
.plink-go{flex:none;width:44px;height:44px;border-radius:999px;border:1px solid var(--rule);display:flex;align-items:center;justify-content:center;font-size:16px;transition:background .2s,color .2s,border-color .2s,transform .2s}
.plinks.across .plink-go{margin-top:auto}
.plink:hover h3{color:var(--accent)}
.plink:hover .plink-go{background:var(--accent);border-color:var(--accent);color:#fff;transform:translateX(3px)}
@media (max-width:900px){.plinks.across{grid-template-columns:1fr}.plinks.across .plink{flex-direction:row;align-items:center}.plinks.across .plink + .plink{border-left:0;border-top:1px solid var(--hair)}.plinks.across .plink-go{margin-top:0}}
@media (prefers-reduced-motion:reduce){.plink-go{transition:none}}

/* Two photographs, one overlapping the other — the effect the business picked out on the About
   page, shared so the home page can use it too. */
.pcollage{position:relative;aspect-ratio:5/4}
.pcollage > div{position:absolute;border-radius:18px;overflow:hidden}
.pcollage .a{inset:0 18% 22% 0}
.pcollage .b{inset:38% 0 0 34%;border:6px solid var(--bg);box-shadow:0 24px 50px rgba(0,0,0,.35)}
.pcollage picture,.pcollage img{display:block;width:100%;height:100%}
.pcollage img{object-fit:cover}
.hwd{display:grid;grid-template-columns:minmax(0,1fr) minmax(0,1fr);gap:clamp(32px,6vw,96px);align-items:center}
@media (max-width:900px){.hwd{grid-template-columns:1fr}}