/* Self-hosted. The Google Fonts CDN costs two extra round trips on the critical
   path — a stylesheet request, then the font files it points to — and mobile is
   68%% of this audience. Latin only; this lot sells in Mississippi. */
@font-face{font-family:'Barlow';font-style:normal;font-weight:400;font-display:swap;src:url('fonts/Barlow-400-latin.woff2') format('woff2')}
@font-face{font-family:'Barlow';font-style:normal;font-weight:600;font-display:swap;src:url('fonts/Barlow-600-latin.woff2') format('woff2')}
@font-face{font-family:'Barlow';font-style:normal;font-weight:700;font-display:swap;src:url('fonts/Barlow-700-latin.woff2') format('woff2')}
@font-face{font-family:'Bebas Neue';font-style:normal;font-weight:400;font-display:swap;src:url('fonts/BebasNeue-400-latin.woff2') format('woff2')}
@font-face{font-family:'IBM Plex Mono';font-style:normal;font-weight:500;font-display:swap;src:url('fonts/IBMPlexMono-500-latin.woff2') format('woff2')}

/* Dykes Motors — Collins, MS
   Palette is taken from the lot's own artifacts: the black HDF mark, the red price
   badge already burned into their inventory photography, and the grey of a concrete
   apron. Bebas Neue is the face they already ship; it is used here for the one thing
   that matters most on a used-car lot, the number.                                   */

:root{
  --ink:#0B0B0C;          /* the HDF mark */
  --bone:#F6F4F1;         /* warm paper, not cream */
  --paper:#FFFFFF;
  --steel:#696E73;        /* concrete, used for data — 4.69:1 on --bone */
  --signal:#C8102E;       /* their price-badge red */
  --line:#E3DFD9;
  /* Reading scale, in rem so it follows the browser's font-size setting.
     Display type stays in px: it is sized to its container, not to a measure. */
  --fs-xs:0.6875rem;   /* 11px  micro labels */
  --fs-sm:0.8125rem;   /* 13px  meta */
  --fs-md:0.875rem;    /* 14px  UI text, nav, links */
  --fs-base:0.9375rem; /* 15px  card copy */
  --fs-lg:1.0625rem;   /* 17px  body and lede */
  --gut:20px;
  --tap:48px;             /* every control clears this */
}

*,*::before,*::after{box-sizing:border-box}
html{-webkit-text-size-adjust:100%}
body{
  margin:0; color:var(--ink);
  /* A flat fill reads as unpainted canvas across the large bands between sections.
     One gradient plus a tiled grain gives it a surface, at no extra request. */
  background-color:var(--bone);
  background-image:
    linear-gradient(180deg,#FBFAF8 0%,var(--bone) 34%,#F1EEEA 100%),
    url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='150' height='150'%3E%3Cfilter id='g'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='.9' numOctaves='3' stitchTiles='stitch'/%3E%3CfeColorMatrix type='saturate' values='0'/%3E%3C/filter%3E%3Crect width='150' height='150' filter='url(%23g)' opacity='.03'/%3E%3C/svg%3E");
  background-size:100% 100%,150px 150px;
  background-repeat:no-repeat,repeat;
  /* Not `fixed`: it forces a repaint of the whole ground on every scroll frame,
     which is exactly the cost this build exists to avoid. 100% height spans the
     document anyway. */
  background-attachment:scroll,scroll;
  font-family:"Barlow",system-ui,-apple-system,sans-serif;
  font-size:var(--fs-lg); line-height:1.5; -webkit-font-smoothing:antialiased;
}
img{max-width:100%; display:block}
a{color:inherit}
:focus-visible{outline:3px solid var(--signal); outline-offset:3px}

/* The sticky masthead is ~68px, so every in-page jump has to stop short of it or the
   target lands underneath the header. One declaration covers the skip link and every
   anchor on every template. */
html{scroll-padding-top:80px}
.skip{position:absolute;left:-9999px}
.skip:focus{left:var(--gut);top:8px;z-index:99;background:var(--ink);color:#fff;padding:12px 16px}

/* ---------- masthead ----------
   The bar is sticky and dark; the drawer opens beneath it rather than over it, so the
   phone number and the logo never leave the screen while someone is browsing sections. */
.masthead{background:var(--ink);color:#fff;position:sticky;top:0;z-index:30}
.masthead__bar{position:relative;
  display:flex; align-items:center; gap:12px;
  padding:10px var(--gut); min-height:60px;
}
.brand{display:flex;align-items:center;gap:10px;text-decoration:none;min-height:var(--tap);margin-right:auto}
/* The supplied mark is white artwork on a black plate, which is why it sits on the
   dark bar with no chip of its own. */
.brand__mark{display:block;height:30px;width:auto}
.brand__name{font-family:"Bebas Neue",sans-serif;font-size:25px;letter-spacing:.03em;line-height:1;color:#fff}

.masthead__nav{display:none}
.masthead__nav a{
  color:#D8D5D0;text-decoration:none;font-size:var(--fs-md);font-weight:600;
  padding:8px 10px;border-radius:4px;white-space:nowrap;
}
.masthead__nav a[aria-current="page"]{color:#fff;box-shadow:inset 0 -2px 0 var(--signal)}

/* Desktop only. On a phone the bar carries the mark and the hamburger and nothing
   else; a CTA box there crowded both and duplicated the one on the page. */
.masthead__cta{
  display:none;background:var(--signal);color:#fff;text-decoration:none;
  font-weight:700;font-size:var(--fs-md);padding:11px 16px;border-radius:4px;white-space:nowrap;
}

/* ---------- hamburger ---------- */
.burger{
  display:flex;align-items:center;justify-content:center;background:none;border:0;color:#fff;
  min-height:var(--tap);min-width:var(--tap);padding:0;cursor:pointer;
}
.burger__box{display:block;width:22px;height:16px;position:relative}
.burger__box i{
  position:absolute;left:0;right:0;height:2px;background:#fff;border-radius:2px;
  transition:transform .18s ease, opacity .12s ease;
}
.burger__box i:nth-child(1){top:0}
.burger__box i:nth-child(2){top:7px}
.burger__box i:nth-child(3){top:14px}
.burger[aria-expanded="true"] .burger__box i:nth-child(1){transform:translateY(7px) rotate(45deg)}
.burger[aria-expanded="true"] .burger__box i:nth-child(2){opacity:0}
.burger[aria-expanded="true"] .burger__box i:nth-child(3){transform:translateY(-7px) rotate(-45deg)}

/* ---------- drawer ----------
   White, not the dark bar. Brand artwork is drawn for paper: Ferris brick red and LS
   navy go muddy on near-black and the LS mark's grey wordmark disappears entirely.

   Rows are deliberately tall and widely spaced. A dense list reads as a footer; a menu
   has to announce itself as one on a phone held at arm's length, and every row here is
   a thumb target with its line's colour carried as a solid chip. */
.drawer{background:var(--paper);border-top:1px solid var(--line);color:var(--ink)}
/* Hidden only once JS is confirmed running (the .js class is set before first paint),
   so no-JS and failed-script visitors keep a working menu instead of a dead button. */
html.js .drawer{display:none}
/* Without JavaScript the full menu is the fallback. Keep it in normal document flow
   instead of pinning an 858px panel over every page, and hide the dead hamburger. */
html:not(.js) .masthead{position:static}
html:not(.js) .burger{display:none}
/* Open, the drawer is a fixed panel pinned between the bar and the bottom of the
   screen, and IT owns the scroll. Previously it sat in the flow of the sticky header
   and sized itself with calc(100dvh - 70px) — that depends on the ancestor staying
   stuck and on the browser's idea of dvh while the address bar collapses, and it left
   the lower rows unreachable on some phones. --bar is measured in JS on open and
   resize, so the panel starts exactly under the real bar rather than a guessed height. */
html.js .drawer.is-open{
  display:block;position:fixed;left:0;right:0;
  top:var(--bar,68px);z-index:40;overflow:hidden;
  /* An explicit pixel height, measured in JS, instead of bottom:0. On iOS the visual
     viewport shrinks and grows as the toolbars slide, and a fixed element anchored to
     bottom:0 is measured against the LARGE viewport — the panel ends up taller than the
     screen, its last rows sit under the toolbar, and the inner element believes it has
     nothing left to scroll. --panel comes from window.visualViewport. */
  height:var(--panel,calc(100dvh - var(--bar,68px)));
}
/* The drawer scrolls on its own once every section is expanded — taller than a phone
   screen by design. overscroll-behavior keeps a flick at the end of the list from
   scrolling the page underneath, and the body lock is released when it closes.
   100dvh (not vh) so the mobile browser's collapsing address bar cannot clip the last
   row out of reach. */
.drawer__inner{
  display:flex;flex-direction:column;
  padding:8px var(--gut) 32px;
  height:100%;
  overflow-y:auto;overscroll-behavior:contain;-webkit-overflow-scrolling:touch;
  touch-action:pan-y;   /* claim the vertical gesture explicitly */
}
.drawer__eyebrow{
  font-size:11px;letter-spacing:.18em;text-transform:uppercase;color:var(--steel);
  padding:18px 2px 8px;
}
/* The named pages, one tap from open. */
.quick{list-style:none;margin:0;padding:4px 0 0;display:flex;flex-direction:column}
.quick a{
  display:flex;align-items:center;text-decoration:none;color:var(--ink);
  font-family:"Bebas Neue",sans-serif;font-size:22px;letter-spacing:.04em;
  padding:15px 2px;min-height:var(--tap);border-bottom:1px solid var(--line);
}
.quick li:last-child a{border-bottom:0}
.quick a[aria-current="page"]{color:var(--signal)}

.line{border-bottom:1px solid var(--line)}
.line:last-of-type{border-bottom:0}

/* The whole row is the control, so the tap target is the full width of the drawer. */
.line__head{
  display:flex;align-items:center;gap:14px;margin:0;
  padding:18px 2px;min-height:64px;cursor:pointer;list-style:none;
}
.line__head::-webkit-details-marker{display:none}   /* replaced by .line__arrow */

/* A solid chip of the line's real colour, so the section is identifiable before the
   logo or the words are read. */
.line__chip{
  width:6px;align-self:stretch;min-height:34px;border-radius:3px;flex:none;
  background:var(--accent,var(--steel));
}
.line__logo{display:flex;align-items:center;height:26px}
.line__logo img{height:100%;width:auto;display:block}
/* Only Bobcat needs a plate: its supplied SVG is white artwork, invisible on paper. */
.line__logo--dark{background:var(--ink);padding:4px 7px;border-radius:3px;height:30px}
.line__name{
  font-family:"Bebas Neue",sans-serif;font-size:24px;letter-spacing:.05em;
  color:var(--ink);line-height:1.1;
}
.line__arrow{
  width:20px;height:20px;flex:none;margin-left:auto;color:var(--steel);
  transition:transform .16s ease;
}
.line[open] .line__arrow{transform:rotate(90deg);color:var(--accent,var(--steel))}

/* Declaring `display` on a direct child of <details> lets it escape the closed state in
   some engines — the links stayed on screen with the section shut. Hide explicitly and
   only lay them out once the section is open. */
.line__links{list-style:none;margin:0;padding:0 0 14px;display:none}
.line[open] .line__links{display:flex;flex-direction:column;gap:2px}
.line__links a{
  display:flex;align-items:center;color:#3A3E42;text-decoration:none;
  font-size:var(--fs-lg);font-weight:600;
  padding:14px 14px 14px 20px;min-height:52px;
  border-left:3px solid var(--line);border-radius:0 4px 4px 0;background:#FAF9F7;
}
.line__links a[aria-current="page"]{
  color:var(--ink);border-left-color:var(--accent,var(--signal));background:var(--bone);
}
.line--used{--accent:var(--line-used,#C8102E)}
.line--ferris{--accent:var(--line-ferris,#A3343A)}
.line--ls{--accent:var(--line-ls,#06205C)}
.line--bobcat{--accent:var(--line-bobcat,#F47721)}
.line--more{--accent:var(--steel)}

.drawer__call{
  display:block;margin-top:20px;background:var(--signal);color:#fff;text-decoration:none;
  text-align:center;font-weight:700;padding:15px;border-radius:4px;min-height:var(--tap);
}

/* ---------- mobile quick contact ----------
   The desktop appointment button disappears with the full nav, but a shopper can
   spend several screens comparing inventory before the footer contact block appears.
   These native actions stay close without competing with detail pages' price rail. */
.mobile-quick{display:none}
/* ---------- Shop menu (desktop) ---------- */
/* Hidden until the bar itself appears; the drawer covers small screens. */
.shop-menu{display:none}
.shop-menu__trigger{
  display:inline-flex;align-items:center;gap:5px;list-style:none;cursor:pointer;
  padding:8px 10px;border-radius:4px;color:#D8D5D0;
  font-family:inherit;font-size:var(--fs-md);font-weight:600;white-space:nowrap;
}
.shop-menu__trigger::-webkit-details-marker{display:none}
.shop-menu__trigger svg{width:13px;height:13px;transition:transform .2s ease}
.shop-menu[open] > .shop-menu__trigger{color:#fff}
.shop-menu[open] > .shop-menu__trigger svg{transform:rotate(180deg)}
.shop-menu__trigger:hover{color:#fff}
.shop-menu__trigger:focus-visible{outline:2px solid #fff;outline-offset:2px}

/* A compact panel that reads as part of the dark bar, not a white sheet over it. */
.shop-menu__panel{
  position:absolute;z-index:60;top:100%;left:50%;transform:translateX(-50%);
  width:min(640px,calc(100vw - 2 * var(--gut)));padding:14px;
  /* Same ink as the masthead, so the panel reads as the bar extending downward
     rather than a separate sheet hovering in front of it. */
  background:var(--ink);
  border:1px solid rgba(255,255,255,.14);border-top:0;
  box-shadow:0 30px 60px rgba(0,0,0,.55), inset 0 1px 0 rgba(255,255,255,.06);
}
.shop-menu__grid{display:grid;grid-template-columns:1fr 1fr;gap:8px}

/* `.masthead__nav a` sets its own colour and padding, so every property that
   matters here is restated rather than inherited. */
.masthead__nav .shop-menu__item:focus-visible{outline:2px solid #fff;outline-offset:2px}
.masthead__nav .shop-menu__item{
  display:grid;grid-template-columns:52px minmax(0,1fr) auto;align-items:center;gap:12px;
  padding:13px 14px;border:1px solid rgba(255,255,255,.10);border-radius:5px;
  background:linear-gradient(135deg,rgba(var(--item-rgb),.34),rgba(var(--item-rgb),.06));
  color:#fff;text-decoration:none;white-space:normal;
  transition:border-color .18s ease,transform .18s ease,background-color .18s ease;
}
.shop-menu__item--used{--item-rgb:200,16,46}
.shop-menu__item--ferris{--item-rgb:163,52,58}
.shop-menu__item--ls{--item-rgb:6,32,92}
.shop-menu__item--bobcat{--item-rgb:244,119,33}
/* No manufacturer colour for these two, so they take a neutral steel ground. */
.shop-menu__item--parts{--item-rgb:91,96,103}
.shop-menu__item--trailers{--item-rgb:74,78,83}
.shop-menu__mark{
  display:flex;align-items:center;justify-content:center;height:34px;padding:5px 6px;
  background:rgba(255,255,255,.94);border-radius:3px;
}
/* Bobcat ships white artwork; a white plate would erase it. */
.shop-menu__mark--dark{background:rgba(11,11,12,.9)}
.shop-menu__mark img{max-width:100%;max-height:22px;width:auto;height:auto;display:block}
.shop-menu__mark b{
  font-family:"IBM Plex Mono",monospace;font-size:10px;letter-spacing:.12em;color:var(--ink);
}
.shop-menu__copy{display:grid;gap:2px;min-width:0}
.shop-menu__copy strong{font-size:14.5px;font-weight:700;line-height:1.2}
.shop-menu__copy small{font-size:12px;line-height:1.3;color:#B9BDC2}
.shop-menu__arrow{color:#fff;opacity:.55;transition:transform .18s ease,opacity .18s ease}

/* drawer: the lines nest under one Shop disclosure */
.line--shop > .line__head .line__chip{background:var(--signal)}
.line__sub a{padding-left:22px;opacity:.82}

@media (max-width:1159px){
  .mobile-quick{
    position:fixed;left:0;right:0;bottom:0;z-index:35;
    display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:1px;
    padding:3px max(6px,env(safe-area-inset-right))
            calc(3px + env(safe-area-inset-bottom))
            max(6px,env(safe-area-inset-left));
    background:rgba(11,11,12,.98);border-top:2px solid var(--signal);
    box-shadow:0 -8px 28px rgba(0,0,0,.24);
  }
  .mobile-quick__link{
    display:flex;align-items:center;justify-content:center;gap:7px;min-width:0;min-height:52px;
    border:1px solid rgba(255,255,255,.2);background:#151517;color:#fff;text-decoration:none;
    font-size:12px;font-weight:700;letter-spacing:.045em;text-transform:uppercase;white-space:nowrap;
  }
  .mobile-quick__link--call{background:var(--signal);border-color:var(--signal)}
  .mobile-quick__link svg{width:18px;height:18px;flex:none;fill:currentColor}
  .mobile-quick__link:focus-visible{outline-color:#fff;outline-offset:-4px}
  /* The drawer must own focus and the visual viewport. Likewise, a software keyboard
     should never leave this bar over the field a shopper is actively editing. */
  .drawer.is-open + .mobile-quick,
  body:has(:is(input,textarea,select):focus) .mobile-quick{display:none}
  body:not(.single-vehicle):not(.single-machine) .foot{
    padding-bottom:calc(72px + env(safe-area-inset-bottom));
  }
}
@media (forced-colors:active) and (max-width:1159px){
  .mobile-quick{border-top:1px solid CanvasText;box-shadow:none}
  .mobile-quick__link,.mobile-quick__link--call{border:1px solid ButtonText}
}

@media (hover:hover){
  .masthead__nav a:hover{color:#fff;background:rgba(255,255,255,.08)}
  .line__links a:hover{color:var(--ink);border-left-color:var(--accent,var(--signal));background:var(--bone)}
  .line__head:hover .line__arrow{color:var(--accent,var(--ink))}
  .quick a:hover{color:var(--signal)}
  .masthead__cta:hover{background:#A50D26}
}
@media (prefers-reduced-motion:reduce){ .burger__box i,.line__arrow{transition:none} }

/* Desktop: the full nav is visible, so the hamburger and drawer retire. */
@media (min-width:1160px){
  .masthead__nav{display:flex;align-items:center;gap:2px}
  .shop-menu{display:block;position:static}
  .masthead__cta{display:inline-block}
  .burger{display:none}
  .drawer,html.js .drawer,html.js .drawer.is-open{display:none}
}

/* ---------- lede ---------- */
.lede{padding:32px var(--gut) 20px}
.lede__eyebrow{
  margin:0 0 10px; font-family:"IBM Plex Mono",monospace; font-size:11px;
  letter-spacing:.2em; text-transform:uppercase; color:var(--signal);
}
.lede__h1{
  margin:0; font-family:"Bebas Neue",sans-serif; font-weight:400;
  font-size:clamp(34px,9.4vw,58px); line-height:.96; letter-spacing:.01em; text-wrap:balance;
}
.lede__count{margin:14px 0 0;color:var(--steel);font-size:var(--fs-base)}
.lede__count strong{color:var(--ink)}

/* ---------- filters ---------- */
.filters{
  display:flex; gap:8px; padding:4px var(--gut) 0;
  overflow-x:auto; scrollbar-width:none; -webkit-overflow-scrolling:touch;
}
.filters::-webkit-scrollbar{display:none}
.filters__chip{
  flex:0 0 auto; min-height:var(--tap); padding:0 18px;
  background:transparent; border:1.5px solid var(--line); border-radius:999px;
  font:600 15px/1 "Barlow",sans-serif; color:var(--ink); cursor:pointer;
  transition:background .15s ease,border-color .15s ease,color .15s ease;
}
.filters__chip.is-on{background:var(--ink);border-color:var(--ink);color:#fff}
.filters__status{margin:12px var(--gut) 0;font-size:var(--fs-md);color:var(--steel);min-height:1.2em}

/* ---------- the lot ---------- */
.lot{list-style:none;margin:16px 0 0;padding:0 var(--gut) 40px;display:grid;gap:16px;--lot-gap:16px;grid-auto-rows:1fr}
.tag{
  display:flex; flex-direction:column; height:100%;
  background:var(--paper); text-decoration:none;
  border:1px solid var(--line); border-radius:2px; overflow:hidden;
  transition:transform .22s cubic-bezier(.2,.7,.2,1), box-shadow .22s ease, border-color .22s ease;
}
.tag:active{transform:translateY(0)}

/* The letterboxing fix: photos are square-ish, the frame is 4:3, so cover it. */
/* min-height on a flex item defaults to auto, so a 1366x1818 source pushed the
   frame past its aspect-ratio and every photo came out a different height. */
.tag__shot{aspect-ratio:16/10;background:#EDEAE6;flex:none;min-height:0;overflow:hidden}
.tag__shot img{width:100%;height:100%;object-fit:cover}

/* Signature: the windshield stock plate. */
.tag__plate{
  display:flex; align-items:center; justify-content:space-between; gap:10px;
  padding:10px 14px 0;
  font-family:"IBM Plex Mono",monospace; font-size:10px; letter-spacing:.12em;
  color:var(--steel);
}
.tag__body{color:var(--signal)}
.tag__price{
  margin:2px 0 0; padding:0 14px;
  font-family:"Bebas Neue",sans-serif; font-size:32px; line-height:1;
  letter-spacing:.01em; font-variant-numeric:tabular-nums;
}
.tag__name{
  margin:4px 0 0;padding:0 14px;font-size:var(--fs-base);font-weight:600;line-height:1.3;
  display:-webkit-box;-webkit-line-clamp:2;-webkit-box-orient:vertical;overflow:hidden;
}
.tag__meta{
  margin:6px 0 10px; padding:0 14px; display:flex; flex-wrap:wrap; gap:4px 12px;
  font-size:var(--fs-sm); color:var(--steel);
}
.tag__confirm{color:var(--signal);font-weight:700}
/* The configuration line, shown only where two machines share a name. Sits under the
   name, quieter than it, in the mono face the plate already uses so it reads as data
   rather than as a second title. */
.tag__cfg{
  /* padding matched to the siblings: this line used to start at the 1px border. */
  margin:2px 0 0;padding:0 14px;font:500 11px/1.35 "IBM Plex Mono",monospace;letter-spacing:.06em;
  color:var(--steel);
}
.tag__go{
  display:flex; align-items:center; min-height:var(--tap); margin-top:auto;
  padding:0 14px; border-top:1px solid var(--line);
  font-weight:600; font-size:var(--fs-md); color:var(--signal);
  transition:background-color .22s ease, color .22s ease, border-color .22s ease;
}
.tag__arrow{margin-left:.45em;transition:transform .22s cubic-bezier(.2,.7,.2,1)}

/* ---------- inventory detail ---------- */
.veh{padding:0 0 64px;background:var(--paper)}
.veh__back{
  display:inline-flex;align-items:center;min-height:var(--tap);
  padding:0 var(--gut);font-size:var(--fs-md);font-weight:600;text-decoration:none;color:var(--steel);
}
.veh__backArrow{margin-right:.5em}
.veh__hero{background:var(--paper)}
.veh__media{min-width:0;background:#EDEAE6}
.veh__summary{padding:18px var(--gut) 30px}
.veh__plate{
  display:flex;justify-content:space-between;gap:10px;padding:0;
  font-family:"IBM Plex Mono",monospace;font-size:11px;letter-spacing:.13em;color:var(--steel);
}
.veh__body{color:var(--signal)}
.veh__kicker,.veh__eyebrow,.ask__eyebrow{
  margin:16px 0 6px;font-family:"IBM Plex Mono",monospace;font-size:10px;
  font-weight:500;letter-spacing:.16em;text-transform:uppercase;color:var(--signal);
}
.veh__name{margin:8px 0 0;padding:0;font-size:clamp(25px,6vw,38px);font-weight:700;line-height:1.08;text-wrap:balance}
.veh__price{
  margin:6px 0 0;padding:0;
  font-family:"Bebas Neue",sans-serif;font-size:clamp(56px,15vw,76px);line-height:.98;font-variant-numeric:tabular-nums;
}
.veh__priceNote{margin:7px 0 0;font-size:12px;color:var(--steel)}
.veh__facts{
  display:grid;grid-template-columns:1fr;gap:1px;   /* house rule: never two columns on mobile */
  margin:22px 0 0;padding:0;background:var(--line);border:1px solid var(--line);
}
.veh__facts div{min-width:0;background:var(--bone);padding:14px 16px}
.veh__facts dt{font-family:"IBM Plex Mono",monospace;font-size:10px;letter-spacing:.14em;text-transform:uppercase;color:var(--steel)}
.veh__facts dd{margin:4px 0 0;font-family:"Bebas Neue",sans-serif;font-size:25px;line-height:1;font-variant-numeric:tabular-nums;overflow-wrap:anywhere}
.veh__facts small{margin-left:5px;font:500 11px/1 "Barlow",sans-serif;color:var(--steel);text-transform:uppercase;letter-spacing:.06em}
.veh__act{display:grid;grid-template-columns:1fr;gap:10px;padding:22px 0 0}
.veh__visit{margin:17px 0 0;font-size:var(--fs-sm);color:var(--steel)}
.veh__lower{display:grid;gap:30px;padding:42px var(--gut) 0;max-width:1180px;margin:0 auto}
.veh__details{min-width:0}
.veh__details>.veh__eyebrow{margin-top:0}
.veh__details h2{margin:0;font-family:"Bebas Neue",sans-serif;font-size:clamp(34px,8vw,50px);font-weight:400;line-height:1}
.veh__copy{padding:20px 0 0;color:#2B2E31;font-size:var(--fs-lg);line-height:1.65}
.veh__copy p:first-child{margin-top:0}
.veh__ids{margin:24px 0 0;border-top:1px solid var(--line)}
.veh__ids div{display:grid;grid-template-columns:100px 1fr;gap:14px;padding:12px 0;border-bottom:1px solid var(--line)}
.veh__ids dt{font:500 10px/1.5 "IBM Plex Mono",monospace;letter-spacing:.14em;text-transform:uppercase;color:var(--steel)}
.veh__ids dd{margin:0;font:600 14px/1.5 "IBM Plex Mono",monospace;overflow-wrap:anywhere}
/* ---------- manufacturer specifications ---------- */
.veh__spec{margin-top:30px;padding-top:24px;border-top:2px solid var(--ink)}
.veh__specH{
  margin:0 0 4px;font:600 10px/1.4 "IBM Plex Mono",monospace;letter-spacing:.16em;
  text-transform:uppercase;color:var(--signal);
}
.veh__specList{margin:14px 0 0}
/* Two columns once there is room for a label and a figure to sit on one line
   without either wrapping; a single column below that. */
.veh__specList div{
  display:grid;grid-template-columns:minmax(96px,38%) 1fr;gap:14px;
  padding:11px 0;border-bottom:1px solid var(--line);
}
.veh__specList div:first-child{border-top:1px solid var(--line)}
.veh__specList dt{
  font:500 10px/1.5 "IBM Plex Mono",monospace;letter-spacing:.14em;
  text-transform:uppercase;color:var(--steel);
}
.veh__specList dd{
  margin:0;font:600 var(--fs-sm)/1.5 "IBM Plex Mono",monospace;
  overflow-wrap:anywhere;font-variant-numeric:tabular-nums;
}
.veh__specNote{margin:14px 0 0;max-width:38rem;color:var(--steel);font-size:var(--fs-xs);line-height:1.55}
@media (min-width:900px){
  .veh__specList{columns:2;column-gap:38px}
  .veh__specList div{break-inside:avoid}
}

/* ---------- sibling comparison ---------- */
.veh__cmp{margin-top:34px;padding-top:24px;border-top:2px solid var(--ink)}
.veh__cmpH{
  margin:0 0 4px;font:600 10px/1.4 "IBM Plex Mono",monospace;letter-spacing:.16em;
  text-transform:uppercase;color:var(--signal);
}
.veh__cmpLede{margin:0 0 16px;max-width:36rem;color:var(--steel);font-size:var(--fs-sm);line-height:1.55}
/* The table is the one element here allowed to scroll sideways; the page never does. */
.veh__cmpScroll{overflow-x:auto;-webkit-overflow-scrolling:touch}
.veh__cmpTable{width:100%;min-width:520px;border-collapse:collapse;font-variant-numeric:tabular-nums}
.veh__cmpTable th,.veh__cmpTable td{
  padding:11px 12px;text-align:left;vertical-align:top;border-bottom:1px solid var(--line);
}
.veh__cmpTable thead th{border-bottom:1px solid var(--ink);vertical-align:bottom}
.veh__cmpTable tbody th{
  font:500 10px/1.5 "IBM Plex Mono",monospace;letter-spacing:.14em;text-transform:uppercase;
  color:var(--steel);white-space:nowrap;padding-left:0;
}
.veh__cmpTable td{font:600 var(--fs-sm)/1.5 "IBM Plex Mono",monospace}
/* Article tables, restored from markdown in round 49. Same contract as the comparison
   table above: the figure scrolls, the page never does. */
.post__body .wp-block-table{margin:26px 0;overflow-x:auto;-webkit-overflow-scrolling:touch}
.post__body .wp-block-table table{
  width:100%;min-width:min(560px,100%);border-collapse:collapse;
  font-variant-numeric:tabular-nums;
}
.post__body .wp-block-table th,.post__body .wp-block-table td{
  padding:10px 12px;text-align:left;vertical-align:top;
  border-bottom:1px solid var(--line);font-size:var(--fs-sm);line-height:1.5;
}
.post__body .wp-block-table thead th{
  border-bottom:1px solid var(--ink);vertical-align:bottom;
  font:600 10px/1.4 "IBM Plex Mono",monospace;letter-spacing:.14em;text-transform:uppercase;
  color:var(--steel);white-space:nowrap;
}
.post__body .wp-block-table tbody tr:last-child th,
.post__body .wp-block-table tbody tr:last-child td{border-bottom:0}
.veh__cmpName{display:block;font:400 20px/1 "Bebas Neue",sans-serif;letter-spacing:.02em;color:var(--ink)}
.veh__cmpTag{
  display:block;margin-bottom:3px;font:600 9px/1.4 "IBM Plex Mono",monospace;
  letter-spacing:.16em;text-transform:uppercase;color:var(--signal);
}
.veh__cmpGo{
  display:block;margin-top:3px;font:600 10px/1.4 "IBM Plex Mono",monospace;
  letter-spacing:.1em;text-transform:uppercase;color:var(--steel);
}
.veh__cmpTable thead a{text-decoration:none}
.veh__cmpTable thead a:hover .veh__cmpName{color:var(--signal)}
.veh__cmpTable thead a:hover .veh__cmpGo{color:var(--signal)}
/* The column being read is tinted rather than outlined: a border would shift the
   grid by a pixel and make the figures fail to line up across columns. */
.veh__cmpTable .is-this{background:rgba(17,17,19,.045)}
.veh__cmpNone{color:var(--steel);font-weight:400}
@media (min-width:900px){
  .veh__cmpTable th,.veh__cmpTable td{padding:13px 16px}
}

/* ---------- build price ladder ---------- */
.veh__builds{margin-top:34px;padding-top:24px;border-top:2px solid var(--ink)}
.veh__buildList{margin:16px 0 0}
.veh__buildList div{
  display:flex;align-items:baseline;gap:12px;padding:11px 0;border-bottom:1px solid var(--line);
}
.veh__buildList div:first-child{border-top:1px solid var(--line)}
.veh__buildList dt{
  flex:1 1 auto;font:500 10px/1.5 "IBM Plex Mono",monospace;letter-spacing:.14em;
  text-transform:uppercase;color:var(--steel);
}
.veh__buildList dd{
  flex:0 0 auto;margin:0;font:400 22px/1 "Bebas Neue",sans-serif;letter-spacing:.02em;
  font-variant-numeric:tabular-nums;color:var(--ink);
}
/* The base build is the anchor the rest are read against. */
.veh__buildList div:first-child dd{color:var(--signal)}

.veh__support{display:grid;gap:10px;margin-top:22px}
.veh__support a{font-weight:700;color:var(--ink);text-underline-offset:4px}

/* ---------- vehicle-detail inventory continuation ---------- */
.related-vehicles{padding:48px var(--gut) 58px;background:var(--bone);border-top:1px solid var(--line)}
.related-vehicles__inner{max-width:1180px;margin:0 auto}
.related-vehicles__head{display:grid;gap:12px;margin-bottom:24px}
.related-vehicles__eyebrow{
  margin:0 0 7px;font:600 10px/1.4 "IBM Plex Mono",monospace;letter-spacing:.16em;
  text-transform:uppercase;color:var(--signal);
}
.related-vehicles__head h2{
  margin:0;font:400 clamp(38px,10vw,56px)/.95 "Bebas Neue",sans-serif;
  letter-spacing:.015em;text-wrap:balance;
}
.related-vehicles__head>p{max-width:34rem;margin:0;color:#666B70;font-size:var(--fs-base);line-height:1.5}
.related-vehicles__grid{display:grid;grid-template-columns:1fr;gap:16px;list-style:none;margin:0;padding:0}
.related-vehicles .lot__item,
.related-vehicles .lot__item.is-ready{opacity:1;transform:none;transition:none}
.related-vehicles .tag{display:flex;flex-direction:column;height:100%}
.related-vehicles .tag__go{margin-top:auto}
.related-vehicles__all{
  display:inline-flex;align-items:center;min-height:44px;margin-top:20px;color:var(--ink);
  font-size:var(--fs-base);font-weight:700;text-decoration-thickness:1px;text-underline-offset:5px;
}
.related-vehicles__all span{margin-left:.45em}
.related-vehicles a:focus-visible{outline:3px solid var(--signal);outline-offset:3px}
/* The detail fact labels otherwise land at 4.48:1 on bone, just below AA. */
.single-vehicle .veh__facts dt,
.single-vehicle .veh__facts small{color:#666B70}

@media (min-width:760px){
  .related-vehicles{padding-top:58px;padding-bottom:68px}
  .related-vehicles__head{grid-template-columns:minmax(0,1fr) minmax(250px,.42fr);align-items:end}
  .related-vehicles__head>p{justify-self:end}
  .related-vehicles__grid{grid-template-columns:repeat(3,minmax(0,1fr));gap:20px}
}

/* ---------- buttons + enquiry ---------- */
.btn{
  display:flex;align-items:center;justify-content:center;min-height:56px;
  padding:0 22px;border:1.5px solid var(--ink);border-radius:2px;
  font:700 16px/1 "Barlow",sans-serif;text-decoration:none;cursor:pointer;
}
.btn--call{background:var(--signal);border-color:var(--signal);color:#fff}
.btn--ghost{background:transparent;color:var(--ink)}
.btn--dark{border-color:#565A5E;background:transparent;color:#fff}
.btn--text{justify-content:space-between;min-height:44px;padding:0;border:0;border-bottom:1px solid var(--line);border-radius:0;color:var(--ink);font-size:var(--fs-md)}
.ask{margin:0;padding:26px 22px;background:var(--ink);color:#fff;border-radius:4px;align-self:start;scroll-margin-top:84px}
.ask__eyebrow{margin-top:0;color:#E88797}
.ask__h{margin:0;font-family:"Bebas Neue",sans-serif;font-size:38px;font-weight:400;line-height:1}
.ask__sub{margin:8px 0 20px;color:#B4B8BC;font-size:var(--fs-md);line-height:1.45}
.ask__actions{display:grid;gap:10px}
.ask__note{margin:0 0 16px;padding:12px 14px;border-radius:2px;font-size:var(--fs-base)}
.ask__note--ok{background:#0E3B1E;color:#CFF3DC;border:1px solid #1C6B36}
.ask__note--bad{background:#3B0E15;color:#F6D2D8;border:1px solid var(--signal)}
.ask__form{display:grid;gap:14px}
.ask__form label{display:grid;gap:6px;font-size:var(--fs-sm);color:#D8DBDE}
.ask__form label span{color:#8D9399;font-weight:400}
.ask__form input,.ask__form textarea{
  min-height:var(--tap);padding:12px 14px;border:1.5px solid #34383C;border-radius:2px;
  background:#141517;color:#fff;font:400 16px/1.4 "Barlow",sans-serif; /* 16px stops iOS zoom */
}
.ask__form textarea{min-height:96px;resize:vertical}
.ask__privacy{margin:13px 0 0;color:#858B91;font-size:11px;line-height:1.4}


/* ---------- parts / trailers bands ---------- */
.home-band{
  position:relative;isolation:isolate;overflow:hidden;
  margin:0;padding:clamp(30px,5vw,54px) var(--gut);color:#fff;background:var(--ink);
}
.home-band::before{
  content:"";position:absolute;z-index:-1;inset:0;pointer-events:none;
  background:
    radial-gradient(120% 100% at 88% 10%,rgba(var(--band-rgb),.34),transparent 62%),
    linear-gradient(118deg,transparent 44%,rgba(var(--band-rgb),.14) 78%,transparent 96%);
}
.home-band--parts{--band-rgb:200,16,46}
/* The diagram sits low and wide on the opposite side to the copy. */
.home-band__art{
  position:absolute;z-index:-1;inset:0 0 0 auto;width:min(52%,620px);pointer-events:none;
  background-repeat:no-repeat;background-position:center right -40px;background-size:contain;
  opacity:.13;filter:invert(1);
}
/* Trailers has no photography at all, so it takes a drawn ground rather than a
   borrowed image: ornament claims nothing, a stand-in photo would. */
.home-band--trailers::after{
  content:"";position:absolute;z-index:-1;inset:0 auto 0 0;width:min(46%,540px);pointer-events:none;
  background:repeating-linear-gradient(115deg,
    rgba(255,255,255,.05) 0 22px, transparent 22px 52px);
  mask-image:linear-gradient(90deg,#000 40%,transparent);
  -webkit-mask-image:linear-gradient(90deg,#000 40%,transparent);
}
.home-band--trailers{--band-rgb:108,112,117}
.home-band__body{width:min(100%,1180px);margin:0 auto}
.home-band__eyebrow{
  display:flex;align-items:center;gap:10px;margin:0 0 12px;
  font-family:"IBM Plex Mono",monospace;font-size:10.5px;font-weight:700;letter-spacing:.17em;
  text-transform:uppercase;color:#F0A0AD;
}
.home-band__eyebrow::before{content:"";width:28px;height:3px;background:var(--signal)}
.home-band--trailers .home-band__eyebrow{color:#C6CACE}
.home-band__title{
  margin:0;max-width:20ch;font-family:"Bebas Neue",sans-serif;font-weight:400;
  font-size:clamp(30px,5.4vw,50px);line-height:1;letter-spacing:.015em;text-wrap:balance;
}
.home-band__copy{margin:12px 0 0;max-width:58ch;font-size:16px;line-height:1.55;color:#C9CDD2}
/* .btn is a flex block, so in a plain container it fills the width. */
.home-band__cta{display:inline-flex;width:max-content;margin-top:20px;
  background:var(--signal);border-color:var(--signal);color:#fff}
.home-band--trailers .home-band__cta{background:transparent;border:1px solid rgba(255,255,255,.62)}
@media (min-width:840px){
  .home-band{display:flex;align-items:center;min-height:250px}
  /* Mirrored pair: the eye moves left, then right, and the two read as one unit. */
  .home-band--trailers .home-band__body{margin-left:auto;text-align:right}
  .home-band--trailers .home-band__eyebrow{justify-content:flex-end}
  .home-band--trailers .home-band__eyebrow::before{order:2}
  .home-band--trailers .home-band__title,
  .home-band--trailers .home-band__copy{margin-left:auto}
}


/* ---------- interior banners ---------- */
/* Mobile keeps a single column; the second column only appears when there is room
   for it to be worth having. */
.journey__heroMain{min-width:0}
.journey__heroAside{display:none}
.journey__asideLabel{
  margin:0 0 8px;font-family:"IBM Plex Mono",monospace;font-size:10px;letter-spacing:.16em;
  text-transform:uppercase;color:#8F9499;
}
.journey__asidePhone{
  display:block;font-family:"Bebas Neue",sans-serif;font-size:34px;line-height:1;
  color:#fff;text-decoration:none;letter-spacing:.01em;
}
.journey__asideAddr{margin:10px 0 0;font-size:14.5px;line-height:1.5;color:#D7D9DB}
.journey__asideHours{margin:16px 0 0;border-top:1px solid rgba(255,255,255,.18)}
.journey__asideHours div{
  display:flex;justify-content:space-between;gap:14px;align-items:center;min-height:38px;
  border-bottom:1px solid rgba(255,255,255,.14);font-size:13.5px;
}
.journey__asideHours dt{color:#A9AEB3}
.journey__asideHours dd{margin:0;color:#fff;font-weight:600;font-variant-numeric:tabular-nums}
.journey__asideMap{
  display:inline-block;margin-top:14px;font-size:13.5px;font-weight:700;color:#fff;
  text-decoration:none;border-bottom:1px solid rgba(255,255,255,.4);padding-bottom:2px;
}
.journey__asideMap:hover,.journey__asideMap:focus-visible{border-bottom-color:var(--signal)}


/* ---------- estimated payment ---------- */
.tag__mo{
  display:block;padding:0 14px;margin-top:2px;
  font-family:"IBM Plex Mono",monospace;font-size:11.5px;letter-spacing:.04em;color:var(--steel);
}
.tag__mo abbr{text-decoration:none;cursor:help;color:var(--signal)}
.veh__finance{
  margin:10px 0 0;padding:11px 13px;border-left:3px solid var(--line);background:var(--bone);
  display:grid;gap:3px;
}
.veh__finance strong{font-family:"Bebas Neue",sans-serif;font-size:26px;line-height:1;letter-spacing:.01em}
.veh__finance span{font-size:12px;line-height:1.45;color:var(--steel)}

/* ---------- journey parts panel ---------- */
.journey__panel{
  display:grid;gap:22px;padding:clamp(30px,4.5vw,54px) var(--gut);
  max-width:1180px;margin:clamp(34px,5vw,58px) auto 0;
  background:var(--ink);color:#fff;
}
.journey__panelHead{min-width:0}
.journey__panelHead .journey__label{color:#F0A0AD}
.journey__panelLede{margin:12px 0 0;max-width:58ch;font-size:16px;line-height:1.55;color:#C9CDD2}
.journey__panelList{
  display:grid;gap:0;margin:0;padding:0;list-style:none;align-content:start;
  border-top:1px solid rgba(255,255,255,.18);
}
.journey__panelList li{
  display:flex;align-items:center;gap:12px;min-height:46px;
  border-bottom:1px solid rgba(255,255,255,.14);font-size:14.5px;color:#E6E8EA;
}
.journey__panelList li::before{
  content:"";flex:0 0 6px;width:6px;height:6px;background:var(--signal);
}
@media (min-width:900px){
  .journey__panel{grid-template-columns:minmax(0,1fr) minmax(320px,.85fr);gap:clamp(36px,5vw,72px);align-items:start}
  .journey__panelList{columns:1}
}

/* ---------- not found ---------- */
.nf{padding:clamp(40px,7vw,86px) var(--gut);background:var(--ink);color:#fff}
.nf__inner{width:min(100%,900px);margin:0 auto}
.nf__eyebrow{
  display:flex;align-items:center;gap:10px;margin:0 0 12px;
  font-family:"IBM Plex Mono",monospace;font-size:10.5px;font-weight:700;letter-spacing:.17em;
  text-transform:uppercase;color:#F0A0AD;
}
.nf__eyebrow::before{content:"";width:28px;height:3px;background:var(--signal)}
.nf__title{margin:0;font-family:"Bebas Neue",sans-serif;font-weight:400;
  font-size:clamp(38px,7vw,68px);line-height:1;letter-spacing:.015em}
.nf__lede{margin:14px 0 0;max-width:56ch;font-size:16.5px;line-height:1.55;color:#C9CDD2}
.nf__routes{display:grid;gap:12px;margin-top:26px}
.nf__route{
  display:grid;gap:2px;padding:20px 20px 18px;border:1px solid rgba(255,255,255,.18);
  background:rgba(255,255,255,.04);color:#fff;text-decoration:none;
  transition:border-color .2s ease,background-color .2s ease,transform .2s ease;
}
.nf__n{font-family:"Bebas Neue",sans-serif;font-size:44px;line-height:1;letter-spacing:.01em}
.nf__label{font-size:var(--fs-md);color:#C9CDD2}
.nf__go{margin-top:12px;font-size:var(--fs-md);font-weight:700;color:#fff}
.nf__more{display:flex;flex-wrap:wrap;gap:8px;margin-top:22px}
.nf__more a{
  display:inline-flex;align-items:center;min-height:42px;padding:0 14px;
  border:1px solid rgba(255,255,255,.24);color:#E6E8EA;text-decoration:none;font-size:var(--fs-md);
}
.nf__call{margin:24px 0 0;font-size:var(--fs-base);line-height:1.55;color:#C9CDD2}
.nf__call a{color:#fff;font-weight:700}
@media (min-width:700px){.nf__routes{grid-template-columns:1fr 1fr;gap:14px}}
@media (hover:hover){
  .nf__route:hover{border-color:#fff;background:rgba(255,255,255,.08);transform:translateY(-3px)}
  .nf__more a:hover{border-color:#fff;color:#fff}
}
@media (prefers-reduced-motion:reduce){.nf__route:hover{transform:none!important}}

/* ---------- band parallax (desktop) ---------- */
@media (min-width:1160px){
  @media (prefers-reduced-motion: no-preference){
    @supports (animation-timeline: view()){
      /* Scaled first so the travel never pulls an edge into frame. */
      .home-band__art,
      .home-band--trailers::after,
      .home-consign__media img{
        will-change:transform;
        animation:band-drift linear both;
        animation-timeline:view(block);
        animation-range:cover 0% cover 100%;
      }
      .home-band__art{scale:1 1.18}
      .home-band--trailers::after{scale:1 1.18}
      .home-consign__media img{scale:1.14}
      /* The photograph travels furthest; the drawn grounds move less so the pair
         does not read as two speeds fighting each other. */
      @keyframes band-drift{
        from{translate:0 -7%}
        to{translate:0 7%}
      }
      .home-consign__media img{animation-name:band-drift-photo}
      @keyframes band-drift-photo{
        from{translate:0 -9%}
        to{translate:0 9%}
      }
    }
  }
}

/* ---------- cross-document view transitions ---------- */
/* Opt the whole site in. Browsers without support ignore this entirely and navigate
   exactly as before, so there is no fallback to write. */
@view-transition{ navigation:auto }

/* The photograph is the thing that should persist between the two pages. The name is
   put on the activated card by app.js; the detail hero carries it statically. */
.veh__heroShot{ view-transition-name:dm-unit; }

/* Default is a 250ms cross-fade of the whole page, which on a long listing reads as a
   flash. Shorten it and let the paired image carry the eye instead. */
::view-transition-old(root),
::view-transition-new(root){ animation-duration:180ms }
::view-transition-group(dm-unit){ animation-duration:320ms; animation-timing-function:cubic-bezier(.22,.61,.36,1) }

/* Parallax, carousels and this all answer to the same setting. */
@media (prefers-reduced-motion: reduce){
  ::view-transition-group(*),
  ::view-transition-old(*),
  ::view-transition-new(*){ animation:none !important }
}

/* ---------- trade-in appraisal form ---------- */
.trade__lede{max-width:44rem;margin:0 0 26px;color:var(--steel);font-size:var(--fs-base);line-height:1.6}
.trade__form{max-width:56rem}
.trade__group{
  margin:26px 0 12px;font:600 10px/1.4 "IBM Plex Mono",monospace;letter-spacing:.16em;
  text-transform:uppercase;color:var(--signal);
}
.trade__group:first-of-type{margin-top:0}
/* Auto-fit rather than fixed columns: the field count differs between the two
   groups, and a fixed grid leaves a hole in the shorter one. */
.trade__grid{display:grid;gap:14px;grid-template-columns:repeat(auto-fit,minmax(190px,1fr))}
.trade__field{display:flex;flex-direction:column;gap:6px}
.trade__field--sm{max-width:220px}
.trade__field--wide{margin-top:14px;max-width:none}
.trade__field span{
  font:500 10px/1.5 "IBM Plex Mono",monospace;letter-spacing:.12em;
  text-transform:uppercase;color:var(--steel);
}
.trade__field span b{color:var(--signal);font-weight:700}
.trade__field span small{text-transform:none;letter-spacing:0;opacity:.75;font-size:10px}
.trade__field input,.trade__field select,.trade__field textarea{
  width:100%;padding:11px 12px;border:1px solid var(--line);border-radius:2px;
  background:#fff;color:var(--ink);font:500 var(--fs-sm)/1.4 "Barlow",system-ui,sans-serif;
}
.trade__field textarea{resize:vertical;min-height:76px}
.trade__field input:focus-visible,.trade__field select:focus-visible,.trade__field textarea:focus-visible{
  outline:2px solid var(--signal);outline-offset:1px;border-color:var(--signal);
}
.trade__send{display:flex;flex-wrap:wrap;align-items:center;gap:16px;margin-top:22px}
.trade__req{margin:0;color:var(--steel);font-size:var(--fs-xs);line-height:1.5}
.trade__req b{color:var(--signal)}

/* Finance terms, stated where the payments are. Muted but legible -- a disclosure
   that has to be hovered for is not one, and phones have no hover. */
.lot__disclosure{
  max-width:62rem;margin:0 auto 18px;padding:0 var(--gut);
  color:var(--steel);font-size:var(--fs-xs);line-height:1.55;
}

/* The consent box is opt-in and unticked: we should not assume permission to text. */
.appt__consent{
  display:flex;align-items:flex-start;gap:10px;margin-top:18px;
  color:var(--steel);font-size:var(--fs-sm);line-height:1.5;
}
.appt__consent input{width:17px;height:17px;margin:1px 0 0;accent-color:var(--signal);flex:0 0 auto}

/* ---------- article -> stock ---------- */
.artstock{margin:38px 0 0;padding:24px 0 0;border-top:2px solid var(--ink)}
.artstock__head{display:flex;flex-wrap:wrap;align-items:baseline;gap:12px;margin-bottom:14px}
.artstock__h{margin:0;flex:1 1 16rem;font:400 clamp(21px,3.4vw,27px)/1.15 "Bebas Neue",sans-serif;letter-spacing:.015em}
.artstock__all{font:600 var(--fs-xs)/1.4 "IBM Plex Mono",monospace;letter-spacing:.1em;text-transform:uppercase;color:var(--signal);white-space:nowrap}
.artstock__list{list-style:none;margin:0;padding:0;display:grid;gap:1px;background:var(--line);border:1px solid var(--line)}
.artstock__list a{
  display:flex;align-items:baseline;justify-content:space-between;gap:14px;
  padding:13px 14px;background:#fff;text-decoration:none;min-height:44px;
}
.artstock__list a:hover{background:var(--bone)}
.artstock__name{font-size:var(--fs-sm);font-weight:600;color:var(--ink)}
.artstock__price{
  font:400 20px/1 "Bebas Neue",sans-serif;letter-spacing:.02em;
  font-variant-numeric:tabular-nums;color:var(--ink);white-space:nowrap;
}

/* ---------- stock -> article ---------- */
.reads{margin-top:30px;padding-top:22px;border-top:1px solid var(--line)}
.reads__list{list-style:none;margin:12px 0 0;padding:0;display:grid;gap:1px;background:var(--line);border:1px solid var(--line)}
.reads__list a{
  display:flex;align-items:center;justify-content:space-between;gap:14px;
  padding:12px 14px;background:#fff;text-decoration:none;min-height:44px;
}
.reads__list a:hover{background:var(--bone)}
.reads__title{font-size:var(--fs-sm);font-weight:600;color:var(--ink);line-height:1.35}
.reads__go{color:var(--signal);font-weight:700;flex:0 0 auto}

.ask__errBox p{margin:0}
.ask__errBox .ask__errList{margin-top:6px}

/* The error summary takes focus on load, so it needs a visible ring like any target. */
[data-form-error]{scroll-margin-top:96px}
[data-form-error]:focus-visible{outline:2px solid var(--signal);outline-offset:3px}

/* The error summary's list of fields to fix. */
.ask__errList{margin:8px 0 0;padding-left:18px}
.ask__errList li{margin:2px 0}
.ask__errList a{color:inherit;text-underline-offset:3px}
/* A field the server rejected, marked so it is visible as well as programmatic. */
[aria-invalid="true"]{border-color:var(--signal) !important;box-shadow:0 0 0 1px var(--signal)}

/* ---------- footer ---------- */
/* No top margin. The 64px that used to sit here was not spacing anyone chose to see:
   the footer paints #0B0B0C but the body under it is bone (#F6F4F1), so the margin
   rendered as a tan band directly above the map on every page. Measured on the home
   page: main ended at 3624px, the footer began at 3688px, and those 64px were body. */
.foot{
  position:relative;isolation:isolate;overflow:hidden;margin-top:0;padding:0 var(--gut);
  background:#0B0B0C;color:#A7ABB0;border-top:1px solid #27272A;
}
.foot::before{
  content:"";position:absolute;z-index:-1;inset:0;pointer-events:none;
  background:
    linear-gradient(132deg,transparent 0 56%,rgba(200,16,46,.11) 56% 65%,transparent 65%),
    radial-gradient(circle at 88% 4%,rgba(200,16,46,.16),transparent 32%);
}
.foot__signal{position:absolute;top:0;left:0;width:clamp(96px,19vw,280px);height:4px;background:var(--signal)}
/* Holds the map's box before the iframe exists, so nothing shifts when it arrives. */
.foot__mapHold{width:100%;height:100%;background:var(--bone)}

.foot__inner{display:grid;grid-template-columns:1fr;width:min(100%,1240px);margin:0 auto;padding:46px 0 26px}
.foot__lead{padding:0 0 34px;border-bottom:1px solid #2A2A2D}
.foot__brand{display:inline-flex;align-items:center;gap:12px;color:#fff;text-decoration:none}
.foot__brand picture{display:block;width:52px;height:32px}
.foot__brand img{display:block;width:52px;height:32px;object-fit:contain}
.foot__brand span{
  font-family:"Bebas Neue",sans-serif;font-size:25px;line-height:1;letter-spacing:.05em;text-transform:uppercase;
}
.foot__eyebrow{
  margin:29px 0 8px;font:700 10px/1.3 "IBM Plex Mono",monospace;letter-spacing:.17em;
  text-transform:uppercase;color:#E8E8EA;
}
.foot__eyebrow::before{content:"";display:inline-block;width:24px;height:3px;margin:0 9px 2px 0;background:var(--signal)}
.foot__title{
  max-width:16ch;margin:0;font-family:"Bebas Neue",sans-serif;font-size:clamp(28px,6.4vw,36px);
  font-weight:400;line-height:1.02;letter-spacing:.02em;color:#fff;text-wrap:balance;
}
.foot__intro{max-width:54ch;margin:17px 0 0;font-size:var(--fs-base);line-height:1.6;color:#C9CBCE}
.foot__actions{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:8px;margin-top:24px}
.foot__action{
  display:inline-flex;align-items:center;justify-content:center;min-width:0;min-height:48px;padding:9px 8px;
  border:1px solid #55565A;color:#fff;font-size:12px;font-weight:800;letter-spacing:.02em;text-decoration:none;
  transition:border-color .18s ease,background-color .18s ease,color .18s ease;
}
.foot__action--primary{background:var(--signal);border-color:var(--signal)}
.foot__action--directions{grid-column:1/-1}
.foot__action:hover,.foot__action:focus-visible{background:#fff;border-color:#fff;color:var(--ink)}
/* Full-bleed band above the footer content. .foot carries side padding, so the map
   is pulled back out to the viewport edges with negative inline margins. */
.foot__map{
  margin-inline:calc(var(--gut) * -1);padding:0;border:0;border-bottom:1px solid #2A2A2D;
}
.foot__block,.foot__nav{padding:24px 0;border-bottom:1px solid #2A2A2D}
.foot__heading{
  margin:0 0 14px;font:700 10px/1.3 "IBM Plex Mono",monospace;letter-spacing:.16em;
  text-transform:uppercase;color:#fff;
}
.foot__address{display:grid;gap:4px;margin:0 0 10px;font-style:normal;font-size:var(--fs-md);line-height:1.5;color:#D8D9DB}
.foot__phone{
  display:inline-flex;align-items:center;min-height:44px;font-family:"Bebas Neue",sans-serif;
  font-size:28px;letter-spacing:.025em;color:#fff;text-decoration:none;
}
.foot__hours{display:grid;margin:0;border-top:1px solid #26262A}
.foot__hours div{
  display:grid;grid-template-columns:minmax(0,1fr) auto;gap:16px;align-items:center;
  min-height:44px;border-bottom:1px solid #26262A;font-size:var(--fs-md);line-height:1.45;
}
.foot__hours dt{color:#C4C6C9}
.foot__hours dd{
  margin:0;color:#fff;font-weight:600;text-align:right;
  font-variant-numeric:tabular-nums;
}
.foot__nav ul{display:grid;margin:0;padding:0;list-style:none}
.foot__nav a{
  display:flex;align-items:center;justify-content:space-between;min-height:44px;color:#D3D4D6;
  font-size:var(--fs-md);text-decoration:none;border-bottom:1px solid rgba(255,255,255,.055);
}
.foot__nav li:last-child a{border-bottom:0}
.foot__nav a::after{content:"→";margin-left:14px;color:#76797E;transition:transform .18s ease,color .18s ease}
.foot__nav a:hover,.foot__nav a:focus-visible,.foot__nav a[aria-current="page"]{color:#fff}
.foot__nav a[aria-current="page"]{font-weight:800}
.foot__nav a[aria-current="page"]::after{color:var(--signal);transform:none}
.foot__nav a:hover::after,.foot__nav a:focus-visible::after{color:var(--signal);transform:translateX(3px)}
/* Taller, and no border. The block border drew a grey hairline across the top and
   bottom of the embed, which read as a seam rather than an edge now that the map
   meets the page content directly. */
.foot__mapFrame{position:relative;height:clamp(320px,34vw,480px);overflow:hidden;background:#151517;border-block:0}
.foot__mapFrame iframe{position:absolute;inset:0;width:100%;height:100%;display:block;filter:grayscale(.34) contrast(1.04)}
.foot__bottom{display:grid;gap:10px;padding:24px 0 0;font-size:11px;line-height:1.55;color:#8C9095}
.foot__bottom p{margin:0}
.foot__note{max-width:78ch}
.single-vehicle .foot,.single-machine .foot{padding-bottom:calc(92px + env(safe-area-inset-bottom))}

/* ---------- wider screens ---------- */
@media (min-width:700px){
  :root{--gut:32px}
  .lot{grid-template-columns:repeat(2,1fr);gap:20px;--lot-gap:20px}
  .veh__facts{grid-template-columns:repeat(auto-fit,minmax(120px,1fr))}
  .veh__gal{grid-template-columns:repeat(2,1fr);gap:10px}
  .veh__shot,.tag__shot{aspect-ratio:16/10}
  .veh__act{grid-template-columns:1fr 1fr}
  .veh__lower{grid-template-columns:minmax(0,1.15fr) minmax(320px,.85fr);gap:48px;padding-top:46px}
  .foot__inner{
    grid-template-columns:repeat(2,minmax(0,1fr));
    column-gap:clamp(28px,4vw,64px);row-gap:38px;padding-top:62px;
  }
  .foot__map{padding:0;border:0}
  .foot__lead{padding:0;border:0}
  .foot__title{font-size:clamp(32px,2.6vw,40px)}
  .foot__actions{grid-template-columns:repeat(3,minmax(0,1fr));max-width:410px}
  .foot__action--directions{grid-column:auto}
  .foot__block,.foot__nav{padding:0;border:0}
  .foot__nav ul{border-top:1px solid #26262A}
  .foot__nav a{border-bottom:1px solid #26262A;padding:9px 0}
  .foot__bottom{
    grid-column:1/-1;grid-template-columns:minmax(0,1fr) minmax(0,2fr);align-items:baseline;gap:32px;
    margin-top:12px;padding-top:20px;border-top:1px solid #2A2A2D;
  }
  .single-vehicle .foot,.single-machine .foot{padding-bottom:0}
}
@media (min-width:1080px){
  .lot{grid-template-columns:repeat(3,1fr)}
}
@media (min-width:1320px){
  .lot{grid-template-columns:repeat(4,1fr);gap:18px;--lot-gap:18px}
  .lede__h1{font-size:64px}
  .foot__inner{
    grid-template-columns:repeat(4,minmax(0,1fr));
    column-gap:clamp(28px,3.4vw,52px);row-gap:52px;
  }
  /* One band of four. Column one stacks brand, address and hours; the other three
     each hold one thing, with the map on the right edge. */
  .foot__inner{row-gap:26px}
  /* Nothing stretches: every column takes its natural height from the same top line,
     otherwise column four (address + hours) drags the whole row to 478px. */
  .foot__inner > *{align-self:start}
  .foot__inner{row-gap:22px}
  .foot__lead{grid-column:1;grid-row:1}
  .foot__nav--shop{grid-column:2;grid-row:1}
  .foot__nav--support{grid-column:3;grid-row:1}
  .foot__visitcol{grid-column:4;grid-row:1;display:grid;gap:22px;align-content:start}
  .foot__bottom{grid-column:1/-1;grid-row:3;margin-top:22px}
  /* a quarter-width 16:9 frame is a 154px letterbox; 4:3 stays readable */
  /* the phone number is three lines up in this same column, and the map has its own
     directions link -- three more buttons here is the same offer said twice */
  .foot__actions{display:none}
  .foot__bottom{margin-top:48px}
  .veh__back{width:min(100%,1440px);margin:0 auto;padding-inline:40px}
  .veh__hero{display:grid;grid-template-columns:minmax(0,1.55fr) minmax(390px,.85fr);max-width:1440px;margin:0 auto;min-height:520px;border-top:1px solid var(--line);border-bottom:1px solid var(--line)}
  .veh__media{display:flex;min-height:520px;border-right:1px solid var(--line)}
  .veh__media>.roll{width:100%}
  .veh__summary{display:flex;flex-direction:column;justify-content:center;padding:34px 40px}
  .veh__name{font-size:34px}
  .veh__price{font-size:52px}
  .veh__facts{margin-top:26px}
  .veh__act{margin-top:2px}
  .veh__lower{padding-inline:40px}
}
@media (prefers-reduced-motion:reduce){
  *{animation:none!important;transition:none!important}
  .foot__nav a::after{transition:none!important}
  /* Killing the transition still leaves the displacement, which reads as a jump.
     Drop the movement and keep the shadow -- it says the same thing without motion. */
  .tag:hover,.tag:focus-visible,.tag:active,
  .dept:hover,.dept:focus-visible,
  .masthead__nav .shop-menu__item:hover{transform:none!important}
  .tag:hover .tag__shot img,.tag:focus-visible .tag__shot img{transform:none!important}
  .tag:hover .tag__arrow,.dept:hover .dept__arrow{transform:none!important}
}

/* ============================================================
   THE PHOTO ROLL
   A lot that shoots 34 photos of one truck is saying it has nothing to hide, so
   the page opens with the whole roll rather than one hero shot. Native scroll-snap
   does the work: it is smooth on a phone, needs no library, and still scrolls if
   JavaScript never arrives.
   ============================================================ */
.roll{position:relative;background:#EDEAE6}
.roll__track{
  display:flex;overflow-x:auto;scroll-snap-type:x mandatory;height:100%;
  -webkit-overflow-scrolling:touch; scrollbar-width:none;
}
.roll__track::-webkit-scrollbar{display:none}
.roll__frame{flex:0 0 100%;margin:0;scroll-snap-align:center;aspect-ratio:4/3}
.roll__frame img{width:100%;height:100%;object-fit:cover;display:block}
.veh--machine .roll__frame img{object-fit:contain;background:#fff;padding:clamp(12px,3vw,36px)}
.roll__arrow{
  display:none;position:absolute;top:50%;z-index:2;width:48px;height:48px;margin-top:-24px;
  border:1px solid rgba(255,255,255,.5);border-radius:50%;background:rgba(11,11,12,.76);
  color:#fff;font:600 19px/1 "Barlow",sans-serif;cursor:pointer;backdrop-filter:blur(8px);
}
.roll__arrow--prev{left:16px}.roll__arrow--next{right:16px}
.roll__count{
  position:absolute; right:12px; bottom:14px; margin:0;
  padding:5px 11px; border-radius:999px;
  background:rgba(11,11,12,.74); color:#fff;
  font-family:"IBM Plex Mono",monospace; font-size:12px; letter-spacing:.06em;
  backdrop-filter:blur(6px);
}
.roll__rail{position:absolute;left:0;right:0;bottom:0;height:3px;background:rgba(255,255,255,.18)}
.roll__bar{
  display:block;height:100%;background:var(--signal);
  transform-origin:left center;transform:scaleX(0);
  transition:transform .25s cubic-bezier(.22,.61,.36,1);
}

/* ============================================================
   ARRIVAL
   Content lifts in as it is reached. One short movement, one easing, used
   everywhere — a page that animates in six different ways reads as a demo.
   ============================================================ */
/* The resting state is VISIBLE. Only once app.js has booted (.is-ready) does anything
   hide itself, so a script that fails to load or throws leaves the page readable
   instead of blank. Verified: without these classes, 0 of 21 inventory cards rendered. */
.is-ready [data-reveal]{
  opacity:0;transform:translateY(14px);
  transition:opacity .5s ease,transform .5s cubic-bezier(.22,.61,.36,1);
}
.is-ready [data-reveal].is-in{opacity:1;transform:none}

/* `backwards` supplies the from-state during animation-delay, so the card is hidden
   only while its own animation is pending -- never as a resting state. */
.is-ready .lot__item{
  animation:dm-land .55s cubic-bezier(.22,.61,.36,1) backwards;
  animation-delay:calc(var(--i,0) * 70ms);
}
@keyframes dm-land{from{opacity:0;transform:translateY(18px)}to{opacity:1;transform:none}}

/* the photo settles a beat before the price lands on it */
.tag__shot img{transform:scale(1.035);transition:transform .7s cubic-bezier(.22,.61,.36,1)}
@media (hover:hover){
  .tag__shot img{transform:none;transition:transform .5s cubic-bezier(.2,.7,.2,1)}
  .tag:hover .tag__shot img,.tag:focus-visible .tag__shot img{transform:scale(1.075)}
  .tag:hover,.tag:focus-visible{
    transform:translateY(-8px);
    border-color:var(--ink);
    /* Two layers: a tight contact shadow plus a wide soft one, so the card reads as
       lifted off the page rather than glowing. */
    box-shadow:0 2px 6px rgba(11,11,12,.14),0 24px 44px rgba(11,11,12,.26);
  }
  .tag:hover .tag__go,.tag:focus-visible .tag__go{
    background:var(--signal);border-top-color:var(--signal);color:#fff;
  }
  .tag:hover .tag__arrow,.tag:focus-visible .tag__arrow{transform:translateX(5px)}
  .tag:active{transform:translateY(-2px)}
}

/* ============================================================
   THE PRICE RAIL
   Once the real price scrolls away the number follows you, because on a used lot
   the price is the whole conversation.
   ============================================================ */
.rail{
  position:fixed; left:0; right:0; bottom:0; z-index:30;
  display:flex; align-items:center; justify-content:space-between; gap:12px;
  padding:10px 16px calc(10px + env(safe-area-inset-bottom));
  background:rgba(11,11,12,.93); backdrop-filter:blur(10px);
  transform:translateY(100%); transition:transform .32s cubic-bezier(.22,.61,.36,1);
}
.rail.is-up{transform:none}
.rail__money{display:grid;color:#fff}
.rail__money span{font:500 9px/1 "IBM Plex Mono",monospace;letter-spacing:.14em;text-transform:uppercase;color:#9AA0A6}
.rail__money strong{
  font-family:"Bebas Neue",sans-serif;font-size:30px;font-weight:400;line-height:1;
  font-variant-numeric:tabular-nums;
}
.rail__ask,.rail__cta{
  display:flex;align-items:center;min-height:44px;padding:0 20px;border-radius:2px;
  color:#fff;font-weight:700;text-decoration:none;font-size:var(--fs-md);
}
.rail__ask{margin-left:auto;border:1px solid #53575B}
.rail__cta{background:var(--signal)}

/* price drop + vin + availability */
.veh__money{padding:0}
.veh__was{margin:2px 0 0;font-size:var(--fs-base);color:var(--steel)}
.veh__cut{
  margin-left:8px;padding:2px 8px;border-radius:2px;
  background:var(--signal);color:#fff;font-weight:700;font-size:var(--fs-sm);
}
.veh__here{
  display:inline-flex;align-items:center;gap:7px;color:var(--steel);
  font-family:"IBM Plex Mono",monospace;letter-spacing:.1em;text-transform:uppercase;
}
.veh__dot{width:6px;height:6px;background:var(--steel);display:inline-block}
.veh__vin{
  margin:20px 0 0;padding:0 var(--gut);
  font-family:"IBM Plex Mono",monospace;font-size:11px;letter-spacing:.1em;color:var(--steel);
}
.veh__act .btn{width:100%}

@media (hover:hover) and (min-width:700px){
  .roll__arrow{display:block;opacity:.82;transition:opacity .16s ease,transform .16s ease}
  .roll__arrow:hover{opacity:1;transform:scale(1.05)}
  .btn--call:hover{background:#A90C27;border-color:#A90C27}
  .btn--ghost:hover{border-color:var(--signal);color:var(--signal)}
  .btn--text:hover,.veh__support a:hover{color:var(--signal)}
}

@media (min-width:1080px){
  .roll__frame{aspect-ratio:auto;height:100%;min-height:520px}
}

@media (max-width:359px){
  .rail{gap:7px;padding-inline:10px}
  .rail__money strong{font-size:26px}
  .rail__ask,.rail__cta{padding-inline:13px}
}

/* ---------- brand-location journeys ---------- */
.brand-city,.brand-locations__lede,.brand-locations__towns,.brand-locations__next{--brand-accent:var(--signal);--brand-accent-on-dark:#FF9AAA}
.brand-city--ferris,.brand-locations--ferris{--brand-accent:var(--line-ferris,#A3343A);--brand-accent-on-dark:#F0A0AD}
.brand-city--ls,.brand-locations--ls{--brand-accent:var(--line-ls,#06205C);--brand-accent-on-dark:#9FB8FF}
.brand-city{background:var(--bone)}
.brand-city__hero{display:grid;background:var(--ink);color:#fff;border-top:5px solid var(--brand-accent)}
.brand-city__media{width:100%;height:clamp(220px,62.5vw,320px);overflow:hidden;background:#222326}
.brand-city__media img{display:block;width:100%;height:100%;object-fit:cover}
.brand-city__media-fallback{display:grid;place-items:center;width:100%;height:100%;font:400 42px/1 "Bebas Neue",sans-serif;letter-spacing:.06em;color:#B5B8BB}
.brand-city__body{padding:28px var(--gut) 34px}
.brand-city__eyebrow{
  margin:0 0 8px;font:700 10px/1.4 "IBM Plex Mono",monospace;letter-spacing:.16em;
  text-transform:uppercase;color:var(--brand-accent);
}
.brand-city__hero .brand-city__eyebrow,.brand-city__visit .brand-city__eyebrow{color:var(--brand-accent-on-dark)}
.brand-city__body h1,.brand-city__guide h2,.brand-city__stock h2,.brand-city__visit h2,.brand-locations__next h2{
  margin:0;font:400 clamp(40px,12vw,64px)/.94 "Bebas Neue",sans-serif;letter-spacing:.02em;text-wrap:balance;
}
.brand-city__body>p:not(.brand-city__eyebrow){max-width:62ch;margin:16px 0 24px;color:#D4D6D8;line-height:1.55}
.brand-city__actions,.brand-city__visit-actions{display:flex;flex-direction:column;gap:10px}
.brand-city__actions .btn,.brand-city__visit-actions .btn{width:100%}
.brand-city .btn--call,.brand-locations__next .btn--call{background:var(--brand-accent);border-color:var(--brand-accent)}
.brand-city__hero .btn--ghost,.brand-city__visit .btn--ghost{color:#fff;border-color:#878A8E;background:transparent}
.brand-city__facts{display:grid;grid-template-columns:1fr;margin:28px 0 0;border-top:1px solid #36373A;border-left:1px solid #36373A}
.brand-city__facts div{padding:14px 12px;border-right:1px solid #36373A;border-bottom:1px solid #36373A}
.brand-city__facts dt{margin-bottom:6px;font:600 9px/1.3 "IBM Plex Mono",monospace;letter-spacing:.12em;text-transform:uppercase;color:#AEB1B4}
.brand-city__facts dd{margin:0;font:400 27px/1 "Bebas Neue",sans-serif;letter-spacing:.025em;white-space:nowrap}
.brand-city__guide{max-width:1220px;margin:0 auto;padding:42px var(--gut)}
.brand-city__steps{display:grid;gap:12px;margin-top:24px}
.brand-city__steps article{padding:24px 20px;background:#fff;border:1px solid var(--line);border-top:4px solid var(--brand-accent);border-radius:5px}
.brand-city__steps span{display:block;margin-bottom:18px;font:700 11px/1 "IBM Plex Mono",monospace;color:var(--brand-accent)}
.brand-city__steps h3{margin:0 0 10px;font-size:19px}.brand-city__steps p{margin:0;color:#4C5054;line-height:1.55}
.brand-city__stock{scroll-margin-top:90px;padding:42px 0 36px;background:#fff;border-top:1px solid var(--line)}
.brand-city__stock-head{display:grid;gap:12px;padding:0 var(--gut)}
.brand-city__stock-head>p{max-width:48ch;margin:0;color:var(--steel);line-height:1.5}
.brand-city__grid{margin-top:18px;padding-bottom:20px}.brand-city__grid .tag{border-top:3px solid var(--brand-accent)}
.brand-city__grid .tag__body,.brand-city__grid .tag__go{color:var(--brand-accent)}
.brand-city__all{padding:0 var(--gut)}
.brand-city__visit,.brand-locations__next{display:grid;gap:24px;padding:40px var(--gut);background:var(--ink);color:#fff;border-top:5px solid var(--brand-accent)}
.brand-city__visit>div>p:not(.brand-city__eyebrow){max-width:62ch;color:#D4D6D8;line-height:1.6}
.brand-locations__intro{max-width:60ch;margin:18px 0 0;color:#34373A;font-size:var(--fs-lg);line-height:1.55}
.brand-locations__towns .town{display:grid;grid-template-columns:minmax(0,1fr) auto;gap:6px 12px;border-left:4px solid var(--brand-accent)}
.brand-locations__go{grid-column:1/-1;font-size:var(--fs-sm);font-weight:700;color:var(--brand-accent)}
.brand-locations__next p{margin:0 0 8px;font:700 10px/1.4 "IBM Plex Mono",monospace;letter-spacing:.16em;text-transform:uppercase;color:var(--brand-accent-on-dark)}
@media (min-width:700px){
  .brand-city__body{padding:42px max(var(--gut),calc((100vw - 1180px)/2 + var(--gut))) 46px}
  .brand-city__actions,.brand-city__visit-actions{flex-direction:row}.brand-city__actions .btn,.brand-city__visit-actions .btn{width:auto}
  .brand-city__facts{grid-template-columns:1fr 1fr;max-width:620px}
  .brand-city__guide{padding-top:56px;padding-bottom:56px}.brand-city__steps{grid-template-columns:repeat(3,1fr);gap:16px}
  .brand-city__stock{padding-top:54px}.brand-city__stock-head{grid-template-columns:minmax(0,1fr) minmax(250px,.46fr);align-items:end}.brand-city__stock-head>p{justify-self:end}
  .brand-city__visit,.brand-locations__next{grid-template-columns:minmax(0,1fr) auto;align-items:center;padding:48px max(var(--gut),calc((100vw - 1180px)/2 + var(--gut)))}
}
@media (min-width:980px){
  .brand-city__hero{grid-template-columns:minmax(0,1fr) minmax(46%,1.04fr);min-height:620px;border-top:0;border-left:5px solid var(--brand-accent)}
  .brand-city__body{grid-column:1;grid-row:1;display:flex;flex-direction:column;justify-content:center;padding:58px 7vw 58px max(var(--gut),calc((100vw - 1180px)/2 + var(--gut)))}
  .brand-city__media{grid-column:2;grid-row:1;height:auto;min-height:620px}
}
@media (max-width:359px){.brand-city__body,.brand-city__guide,.brand-city__stock-head,.brand-city__all,.brand-city__visit{padding-left:16px;padding-right:16px}.brand-city__facts dd{font-size:24px}}

@media (prefers-reduced-motion:reduce){
  [data-reveal],.lot__item{opacity:1!important;transform:none!important;animation:none!important}
  .dept,.dept__arrow,.dept__glow{transition:none!important}
  .rail{transition:none}
}

/* ---------- find ---------- */
.find{padding:20px var(--gut) 0}
.find__label{
  display:block;margin-bottom:7px;
  font-family:"IBM Plex Mono",monospace;font-size:10px;letter-spacing:.16em;
  text-transform:uppercase;color:var(--steel);
}
.find__input{
  width:100%;min-height:var(--tap);padding:12px 14px;
  border:1.5px solid var(--line);border-radius:2px;background:var(--paper);
  font:400 16px/1.3 "Barlow",sans-serif;color:var(--ink);   /* 16px stops iOS zoom */
}
.find__input:focus{border-color:var(--ink);outline:none;box-shadow:0 0 0 3px rgba(200,16,46,.16)}

/* photo count + price cut sit on the photo, where they are read as facts about it */
.tag__shot{position:relative}
.tag__shots{
  position:absolute;left:10px;bottom:10px;
  padding:4px 9px;border-radius:999px;background:rgba(11,11,12,.72);color:#fff;
  font-family:"IBM Plex Mono",monospace;font-size:11px;letter-spacing:.06em;
  backdrop-filter:blur(6px);
}
.tag__cut{
  position:absolute;right:10px;top:10px;
  padding:4px 9px;border-radius:2px;background:var(--signal);color:#fff;
  font-weight:700;font-size:var(--fs-sm);
}
.lot__none{margin:0 var(--gut) 40px;color:var(--steel);font-size:16px}
.lot__noneCall{display:inline-block;margin-left:4px}
.lot__noneCall a{color:var(--signal);font-weight:700}
.lot__clear{
  min-height:var(--tap);padding:0 14px;margin-left:4px;
  background:none;border:1.5px solid var(--line);border-radius:2px;
  font:600 15px/1 "Barlow",sans-serif;color:var(--ink);cursor:pointer;
}

/* ---------- focused used-vehicle paths ----------
   /used/trucks, /used/suvs and /used/cars should feel like deliberate shopping
   destinations, not pre-filtered search results. All merchandising facts remain
   derived from the same posts rendered in the card grid. */
.used-path{background:var(--paper)}
.used-path__hero{background:var(--ink);color:#fff;border-top:1px solid #262629}
.used-path__heroInner{max-width:1180px;margin:0 auto;padding:54px var(--gut) 44px}
.used-path__eyebrow,.used-path__label{
  margin:0;font:700 10px/1.4 "IBM Plex Mono",monospace;letter-spacing:.17em;text-transform:uppercase;color:#E88797;
}
.used-path__title{margin:12px 0 0;max-width:900px;font:400 clamp(46px,13vw,82px)/.92 "Bebas Neue",sans-serif;letter-spacing:.01em;text-wrap:balance}
.used-path__lede{max-width:66ch;margin:20px 0 0;color:#D0D3D6;font-size:var(--fs-lg);line-height:1.58}
.used-path__facts{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));margin:30px 0 0;border:1px solid #34363A}
.used-path__facts>div{min-width:0;padding:16px 14px;border-right:1px solid #34363A}.used-path__facts>div:last-child{border-right:0}
.used-path__facts dt{font:500 9px/1.3 "IBM Plex Mono",monospace;letter-spacing:.12em;text-transform:uppercase;color:#8E949A}
.used-path__facts dd{margin:7px 0 0;font:400 clamp(25px,7vw,38px)/.95 "Bebas Neue",sans-serif;white-space:nowrap}
.used-path__facts small{display:block;margin-top:6px;overflow:hidden;text-overflow:ellipsis;font:500 9px/1.3 "IBM Plex Mono",monospace;letter-spacing:.04em;color:#9EA3A8}
.used-path__confirm{margin:14px 0 0;color:#FFC16A;font-size:var(--fs-sm)}
.used-path__switcher{display:grid;grid-template-columns:repeat(4,1fr);max-width:1180px;margin:0 auto;border-bottom:1px solid var(--line)}
.used-path__switcher a{display:flex;align-items:center;justify-content:center;min-height:56px;padding:8px;border-right:1px solid var(--line);font-size:var(--fs-sm);font-weight:700;text-align:center}
.used-path__switcher a:last-child{border-right:0}.used-path__switcher a[aria-current="page"]{background:var(--signal);color:#fff}
.used-path__inventory{padding:46px 0 18px}
.used-path__sectionHead{display:grid;gap:14px;max-width:1180px;margin:0 auto;padding:0 var(--gut)}
.used-path__sectionHead h2,.used-path__guide h2,.used-path__empty h2{margin:7px 0 0;font:400 clamp(36px,9vw,56px)/.96 "Bebas Neue",sans-serif;letter-spacing:.01em;text-wrap:balance}
.used-path__sectionHead>p{max-width:56ch;margin:0;color:var(--steel);line-height:1.55}
.used-path__lot{padding-top:24px}.used-path__lot .tag__go{display:flex}
.used-path__guide{max-width:1180px;margin:42px auto 0;padding:44px var(--gut) 50px;background:var(--ink);color:#fff}
.used-path__steps{display:grid;gap:1px;margin:26px 0 0;padding:0;list-style:none;background:#383A3E}
.used-path__steps li{padding:22px 20px;background:#141416}
.used-path__steps span{font:700 10px/1 "IBM Plex Mono",monospace;letter-spacing:.16em;color:#E88797}
.used-path__steps h3{margin:24px 0 0;font-size:21px;line-height:1.15}.used-path__steps p{margin:10px 0 0;color:#B8BDC2;font-size:var(--fs-base);line-height:1.55}
.used-path__actions{display:grid;gap:10px;max-width:700px;margin-top:26px}.used-path__actions .btn{width:100%}
.used-path__ghost{border:1px solid #62666B;background:transparent;color:#fff}
.used-path__visit{display:flex;align-items:center;justify-content:space-between;min-height:var(--tap);padding:10px 2px;border-bottom:1px solid #505359;color:#fff;font-weight:700}
.used-path__empty{max-width:760px;margin:0 auto;padding:52px var(--gut) 64px}.used-path__empty>p:not(.used-path__label){max-width:58ch;color:var(--steel);line-height:1.6}
.used-path__empty .used-path__ghost{border-color:var(--ink);color:var(--ink)}
@media (hover:hover){.used-path__switcher a:hover{background:#E9E6E2}.used-path__switcher a[aria-current="page"]:hover{background:#A90D28}.used-path__actions--dark .used-path__ghost:hover{border-color:#fff}.used-path__empty .used-path__ghost:hover{border-color:var(--ink);background:var(--ink);color:#fff}.used-path__visit:hover{color:#E88797}}
@media (min-width:700px){
  .used-path__heroInner{
    padding-top:84px;padding-bottom:72px;
    display:grid;grid-template-columns:minmax(0,1.35fr) minmax(280px,.72fr);
    gap:clamp(32px,4.5vw,72px);align-items:center;
  }
  /* The facts span every row of the copy column, whatever it contains -- the
     availability note is conditional, so a fixed row span would break. */
  .used-path__facts{grid-column:2;grid-row:1/-1;align-self:center;margin:0}
  .used-path__lede{font-size:18px;max-width:60ch}
  .used-path__title{max-width:18ch}
  .used-path__facts{max-width:760px}.used-path__facts>div{padding:19px 20px}
  .used-path__sectionHead{grid-template-columns:minmax(0,1fr) minmax(280px,.56fr);align-items:end}
  .used-path__sectionHead>p{justify-self:end}.used-path__guide{padding:58px 44px 54px}
  .used-path__steps{grid-template-columns:repeat(3,1fr)}.used-path__steps li{min-height:235px;padding:26px 24px}
  .used-path__actions{grid-template-columns:1fr 1fr}.used-path__visit{grid-column:1/-1}
}
@media (min-width:1220px){.used-path__heroInner,.used-path__sectionHead{padding-left:0;padding-right:0}.used-path__guide{border-radius:2px}.used-path__switcher a{min-height:62px}}
@media (max-width:359px){.used-path__heroInner,.used-path__sectionHead,.used-path__guide,.used-path__empty{padding-left:16px;padding-right:16px}.used-path__switcher a{font-size:12px}.used-path__facts dd{font-size:23px}}

/* ---------- section band ---------- */
.band{
  display:flex;align-items:baseline;gap:10px;
  margin:34px var(--gut) 0;padding-bottom:8px;border-bottom:2px solid var(--ink);
  font-family:"Bebas Neue",sans-serif;font-size:30px;line-height:1;letter-spacing:.02em;
}
.band__n{
  font-family:"IBM Plex Mono",monospace;font-size:12px;letter-spacing:.1em;color:var(--steel);
}

/* A listing with no photography of its own. Better to say so than to run an
   ad-framed export on the website. */
.tag__soon,.veh__soon{
  display:flex;flex-direction:column;align-items:center;justify-content:center;gap:6px;
  height:100%;margin:0;padding:24px;text-align:center;background:#EDEAE6;
  font-family:"Bebas Neue",sans-serif;font-size:22px;letter-spacing:.02em;color:var(--steel);
}
.tag__soon span,.veh__soon span{
  font-family:"Barlow",sans-serif;font-size:var(--fs-sm);font-weight:500;letter-spacing:0;color:#8A9096;
}
.veh__soon{height:auto;margin:0 var(--gut);border:1px solid var(--line)}

/* Availability tone. "Call to confirm" is not a failure state — it is the site
   refusing to promise something nobody has checked. */
/* Three states, one restrained palette. Only "sold" earns the house red, because
   only "sold" changes what the visitor can do next. */
.veh__here--ok{color:#2F6B45}
.veh__here--ok .veh__dot{background:#3F7F57}
.veh__here--warn{color:#6C6F73}
.veh__here--warn .veh__dot{background:#9A9DA1}
.veh__here--gone{color:var(--signal)}
.veh__here--gone .veh__dot{background:var(--signal)}

/* ---------- article ---------- */
.post{padding:0 0 40px}
.post__head{padding:8px var(--gut) 0; max-width:44rem}
.post__kicker{
  margin:0 0 12px; font-family:"IBM Plex Mono",monospace; font-size:11px;
  letter-spacing:.16em; text-transform:uppercase; color:var(--signal);
}
.post__title{
  margin:0; font-family:"Bebas Neue",sans-serif; font-weight:400;
  font-size:clamp(32px,8.5vw,52px); line-height:.98; letter-spacing:.01em; text-wrap:balance;
}
.post__standfirst{margin:16px 0 0; font-size:18px; line-height:1.5; color:var(--steel)}
.post__body{padding:26px var(--gut) 0; max-width:38rem}
.post__body p{margin:0 0 1.15em; font-size:var(--fs-lg); line-height:1.68}
.post__body h2{
  margin:1.9em 0 .55em; font-family:"Bebas Neue",sans-serif; font-weight:400;
  font-size:30px; line-height:1.05; letter-spacing:.01em;
}
.post__body h3{margin:1.6em 0 .5em; font-size:19px; font-weight:700; line-height:1.3}
.post__body ul{margin:0 0 1.2em; padding-left:1.15em}
.post__body li{margin:.4em 0; font-size:var(--fs-lg); line-height:1.6}
.post__body strong{font-weight:700}
.post__body a{color:var(--signal); text-underline-offset:3px}
.post__cta{
  margin:36px var(--gut) 0; padding:24px 20px; max-width:38rem;
  background:var(--ink); color:#fff; border-radius:2px;
}
.post__ctaH{margin:0; font-family:"Bebas Neue",sans-serif; font-size:30px; line-height:1}
.post__ctaP{margin:6px 0 18px; color:#9AA0A6; font-size:var(--fs-base)}
.post__ctaRow{display:grid; gap:10px}
@media (min-width:700px){ .post__ctaRow{grid-template-columns:1fr 1fr} }

/* ---------- high-intent journeys ----------
   The imported versions of these pages carried flattened form and calculator
   labels from the previous site. These controlled layouts expose only channels
   that work now: phone, SMS, directions, and verified internal routes. */
.journey{background:var(--paper);padding-bottom:64px}
.journey__hero{background:var(--ink);color:#fff;border-top:1px solid #242426}
/* Three real units behind the copy, split by hairlines so it reads as a set of
   photographs rather than one confusing composite. */
.journey__hero--media{position:relative;isolation:isolate;overflow:hidden}
.journey__heroMedia{
  position:absolute;z-index:-2;inset:0;display:grid;grid-template-columns:1fr;
  gap:2px;background:var(--ink);
}
.journey__heroMedia img{display:block;width:100%;height:100%;object-fit:cover;object-position:center}
.journey__heroMedia img:nth-child(n+2){display:none}
.journey__heroShade{
  position:absolute;z-index:-1;inset:0;pointer-events:none;background:
    linear-gradient(180deg,rgba(11,11,12,.5) 0,rgba(11,11,12,.86) 58%,rgba(11,11,12,.99) 100%),
    linear-gradient(96deg,rgba(11,11,12,.92) 8%,rgba(11,11,12,.42) 74%,rgba(11,11,12,.66) 100%);
}
.journey__hero--media .journey__heroInner{padding-top:46px;padding-bottom:44px}
.journey__hero--media .journey__title{max-width:15ch;font-size:clamp(36px,10vw,50px)}
.journey--brand .journey__hero{position:relative;overflow:hidden}
.journey--brand .journey__hero::after{
  content:"";position:absolute;inset:0 0 0 auto;width:min(42vw,620px);pointer-events:none;
  background:linear-gradient(118deg,transparent 8%,rgba(255,255,255,.055) 100%);
  clip-path:polygon(30% 0,100% 0,100% 100%,0 100%);
}
.journey--brand .journey__heroInner{position:relative;z-index:1}
.journey--ferris-mowers .journey__eyebrow{color:#ff9caa}
.journey--ferris-mowers .journey__eyebrow::before{background:#e51c3c}
.journey--ls .journey__eyebrow{color:#91c7ff}
.journey--ls .journey__eyebrow::before{background:#1685e6}
.journey__heroInner{padding:54px var(--gut) 48px;max-width:1180px;margin:0 auto}
.journey__eyebrow,.journey__label{
  margin:0 0 12px;font:500 10px/1.3 "IBM Plex Mono",monospace;
  letter-spacing:.17em;text-transform:uppercase;color:var(--signal);
}
.journey__eyebrow{display:flex;align-items:center;gap:10px;color:#E88797}
.journey__eyebrow::before{content:"";display:block;width:30px;height:3px;background:var(--signal)}
.journey__title{
  margin:0;max-width:13ch;font:400 clamp(48px,14vw,76px)/.93 "Bebas Neue",sans-serif;
  letter-spacing:.01em;text-wrap:balance;
}
.journey__lede{margin:20px 0 0;max-width:56ch;font-size:18px;line-height:1.55;color:#D7D9DB}
.journey__actions{display:grid;gap:10px;margin-top:28px;max-width:620px}
.journey__text{border-color:#5A5D61;background:transparent;color:#fff}
.journey__hours{margin:18px 0 0;font:500 11px/1.5 "IBM Plex Mono",monospace;letter-spacing:.08em;color:#8F9499}
.journey__section{padding:52px var(--gut) 0;max-width:1180px;margin:0 auto}
.journey__h2{margin:0;font:400 clamp(36px,9vw,52px)/1 "Bebas Neue",sans-serif;letter-spacing:.01em;text-wrap:balance}
.journey__cards{display:grid;gap:12px;margin-top:24px}
.journey__card{
  display:flex;flex-direction:column;padding:22px 20px;border:1px solid var(--line);
  background:var(--bone);color:inherit;text-decoration:none;
}
.journey__card p{flex:1}
.journey__card--link{transition:border-color .18s ease,background-color .18s ease}
.journey__card--link:hover,.journey__card--link:focus-visible{border-color:var(--ink);background:#fff}
.journey__cardGo{
  display:block;margin-top:14px;font-size:var(--fs-lg);color:var(--signal);
  transition:transform .18s ease;
}
.journey__card--link:hover .journey__cardGo{transform:translateX(4px)}
.journey__cardNo{display:block;margin-bottom:14px;font:500 10px/1 "IBM Plex Mono",monospace;letter-spacing:.15em;color:var(--signal)}
.journey__card h3{margin:0;font-size:21px;line-height:1.15}
.journey__card p{margin:10px 0 0;color:#555B60;font-size:var(--fs-base);line-height:1.55}
.journey__split{display:grid;gap:24px;padding:54px var(--gut) 0;max-width:1180px;margin:0 auto}
.journey__prep{min-width:0}
.journey__prep ul{list-style:none;margin:24px 0 0;padding:0;border-top:1px solid var(--line)}
.journey__prep li{position:relative;padding:13px 0 13px 28px;border-bottom:1px solid var(--line);font-weight:600;line-height:1.4}
.journey__prep li::before{content:"✓";position:absolute;left:0;top:13px;color:var(--signal);font-weight:700}
.journey__note{margin:20px 0 0;padding-left:14px;border-left:3px solid var(--signal);color:var(--steel);font-size:var(--fs-md);line-height:1.55}
.journey__visit{padding:28px 24px;background:var(--ink);color:#fff;align-self:start}
.journey__visitLabel{margin:0;font:500 10px/1.3 "IBM Plex Mono",monospace;letter-spacing:.15em;text-transform:uppercase;color:#E88797}
.journey__visitPhone{margin:18px 0 0;font:400 clamp(40px,11vw,54px)/1 "Bebas Neue",sans-serif;letter-spacing:.01em}
.journey__visitAddr{margin:12px 0 0;color:#B8BCC0;font-size:16px;line-height:1.5}
.journey__visitActions{display:grid;gap:10px;margin-top:24px}
.journey__next{padding:54px var(--gut) 0;max-width:1180px;margin:0 auto}
.journey__nextLinks{display:grid;border-top:2px solid var(--ink)}
.journey__nextLinks a{
  display:flex;align-items:center;justify-content:space-between;gap:16px;min-height:60px;
  border-bottom:1px solid var(--line);font-weight:700;text-decoration:none;
}
.journey__nextLinks b{font-size:22px;color:var(--signal)}

@media (hover:hover){
  .journey__text:hover,.btn--dark:hover{border-color:#fff}
  .journey__nextLinks a:hover{color:var(--signal)}
}
@media (min-width:700px){
  .journey__heroInner{padding-top:72px;padding-bottom:64px}
  .journey__heroMedia{grid-template-columns:repeat(3,1fr)}
  .journey__heroMedia img:nth-child(n+2){display:block}
  .journey__hero--media .journey__heroInner{padding-top:64px;padding-bottom:60px}
  .journey__actions{grid-template-columns:1fr 1fr}
  /* auto-fit so a four-card journey does not orphan the last one on its own row */
  .journey__cards{grid-template-columns:repeat(auto-fit,minmax(230px,1fr));gap:16px}
  .journey__card{min-height:0;padding:24px 22px}
  .journey__split{grid-template-columns:minmax(0,1.1fr) minmax(310px,.9fr);gap:54px;padding-top:72px}
  .journey__visitActions{grid-template-columns:1fr 1fr}
  .journey__next{padding-top:72px}
}
@media (min-width:1080px){
  .journey__heroInner,.journey__section,.journey__split,.journey__next{padding-inline:40px}
  .journey__heroInner{
    padding-top:92px;padding-bottom:86px;
    display:grid;grid-template-columns:minmax(0,1.4fr) minmax(300px,.75fr);
    gap:clamp(36px,5vw,84px);align-items:center;
  }
  .journey__heroAside{
    display:block;padding:26px 26px 24px;
    background:rgba(255,255,255,.05);border:1px solid rgba(255,255,255,.14);
  }
  /* A wider measure, still short of an uncomfortable line length. */
  .journey__title{max-width:17ch}
  .journey__lede{max-width:62ch}
  .journey__actions{max-width:none;grid-template-columns:repeat(2,max-content)}
  .journey__hero--media .journey__heroInner{
    padding-top:96px;padding-bottom:88px;grid-template-columns:minmax(0,1fr);
  }
  .journey__hero--media .journey__heroAside{display:none}
  .journey__hero--media .journey__title{max-width:15ch}
  .journey__card{min-height:0}
}

/* ---------- article index ---------- */
.reads{list-style:none; margin:20px 0 0; padding:0 var(--gut) 40px; display:grid; gap:12px}
.read{
  display:block; background:var(--paper); border:1px solid var(--line); border-radius:2px;
  padding:16px; text-decoration:none;
  transition:box-shadow .18s ease, transform .18s ease;
}
.read:active{transform:translateY(1px)}
@media (hover:hover){ .read:hover{box-shadow:0 8px 22px rgba(11,11,12,.10)} }
.reads__item.is-pillar .read{border-color:var(--ink)}
.read__meta{
  margin:0 0 8px; display:flex; align-items:center; gap:10px; flex-wrap:wrap;
  font-family:"IBM Plex Mono",monospace; font-size:11px; letter-spacing:.1em;
  text-transform:uppercase; color:var(--steel);
}
.read__pin{background:var(--ink); color:#fff; padding:2px 7px; border-radius:2px; letter-spacing:.09em}
.read__title{margin:0; font-size:19px; line-height:1.28; font-weight:700; text-wrap:balance}
.read__sub{margin:8px 0 0; font-size:var(--fs-base); line-height:1.5; color:var(--steel)}
.read__go{
  display:inline-flex; align-items:center; min-height:44px; margin-top:6px;
  font-weight:600; font-size:var(--fs-base); color:var(--signal);
}
@media (min-width:700px){ .reads{grid-template-columns:1fr 1fr} }

/* ---------- city ---------- */
.city__hook{margin:16px 0 0; font-size:var(--fs-lg); line-height:1.55; color:var(--steel); max-width:40rem}
.city__copy{padding:8px var(--gut) 0; max-width:38rem}
.city__h2{
  margin:1.8em 0 .5em; font-family:"Bebas Neue",sans-serif; font-weight:400;
  font-size:27px; line-height:1.05; letter-spacing:.01em;
}
.city__copy p{margin:0; font-size:16.5px; line-height:1.65; color:#2B2E31}
.city__switch{display:grid; gap:10px; padding:26px var(--gut) 0; max-width:38rem}
.towns{list-style:none; margin:20px 0 0; padding:0 var(--gut) 40px; display:grid; gap:8px}
.town{
  display:flex; align-items:center; justify-content:space-between; gap:12px;
  min-height:56px; padding:0 16px; background:var(--paper);
  border:1px solid var(--line); border-radius:2px; text-decoration:none;
}
.town__name{font-weight:650; font-size:var(--fs-lg)}
.town__dist{font-family:"IBM Plex Mono",monospace; font-size:11px; letter-spacing:.08em; color:var(--steel)}
@media (min-width:700px){ .towns{grid-template-columns:1fr 1fr} .city__switch{grid-template-columns:1fr 1fr} }

/* ---------- front page ----------
   The bare domain used to fall through to the used-car grid, so the tractor, mower and
   equipment lines were invisible to anyone who typed the domain. This page introduces
   all four, in their own colours. */
.sec__h2{
  font-family:"Bebas Neue",sans-serif;font-size:32px;letter-spacing:.03em;
  margin:0 0 6px;line-height:1.05;
}
.sec__lead{margin:0 0 20px;color:#6A6F74;max-width:60ch}

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

/* No-JS is intentionally useful: slides stack as four category doorways. Once the
   bootstrap class lands, they become a single accessible carousel. */
.home-slider{
  position:relative;overflow:hidden;background:var(--ink);color:#fff;border-bottom:1px solid #252527;
}
.home-slider__stage{position:relative}
.home-slide{
  --slide-accent:var(--signal);--slide-rgb:200,16,46;position:relative;isolation:isolate;overflow:hidden;
  min-height:680px;display:flex;align-items:flex-end;border-bottom:1px solid #252527;
}
.home-slide--ferris{--slide-accent:var(--line-ferris,#A3343A);--slide-rgb:163,52,58}
.home-slide--ls{--slide-accent:#2774C8;--slide-rgb:39,116,200}
.home-slide--bobcat{--slide-accent:var(--line-bobcat,#F47721);--slide-rgb:244,119,33}
.home-slide__media,.home-slide__shade{position:absolute;inset:0}
.home-slide__media{z-index:-2;overflow:hidden;background:#171719;pointer-events:none}
.home-slide__photoFrame{position:absolute;inset:-14px}
.home-slide__photo{display:block;width:100%;height:100%;object-fit:cover;object-position:center;transform:scale(1.035)}
.home-slide__photo[hidden]{display:none!important}
.home-slide__photo[data-home-image-state]{opacity:0;transition:opacity .24s ease}
.home-slide__photo[data-home-image-state="ready"]{opacity:1}
.home-slide__markWrap{
  position:absolute;z-index:2;top:9%;right:4%;display:flex;align-items:center;justify-content:center;
  width:min(64vw,470px);height:31%;opacity:.3;pointer-events:none;
  mix-blend-mode:soft-light;
  -webkit-mask-image:radial-gradient(ellipse at 50% 48%,#000 38%,rgba(0,0,0,.35) 68%,transparent 88%);
  mask-image:radial-gradient(ellipse at 50% 48%,#000 38%,rgba(0,0,0,.35) 68%,transparent 88%);
}
.home-slide__mark{display:block;width:100%;max-width:100%;max-height:100%;height:auto;object-fit:contain}
.home-slide--ferris .home-slide__markWrap{opacity:.42}
.home-slide--ls .home-slide__markWrap{opacity:.4}
/* Bobcat ships WHITE artwork, so soft-light barely registers it on a dark photo.
   Screen keeps it luminous without the grey plate a normal blend would need. */
.home-slide--bobcat .home-slide__markWrap{top:11%;right:5%;opacity:.26;mix-blend-mode:screen}
.home-slide__plane,.home-slide__texture{position:absolute;inset:-8%;z-index:1;display:block;pointer-events:none}
.home-slide__plane{
  background:
    radial-gradient(120% 90% at 84% 26%,rgba(var(--slide-rgb),.34),rgba(var(--slide-rgb),.1) 42%,transparent 68%),
    linear-gradient(122deg,transparent 34%,rgba(var(--slide-rgb),.13) 62%,transparent 92%);
  mix-blend-mode:screen;
}
.home-slide__texture{
  opacity:.5;background-repeat:repeat;background-size:150px 150px;
  mix-blend-mode:overlay;
  background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='150' height='150'%3E%3Cfilter id='g'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='.86' numOctaves='3' stitchTiles='stitch'/%3E%3CfeColorMatrix type='saturate' values='0'/%3E%3C/filter%3E%3Crect width='150' height='150' filter='url(%23g)' opacity='.34'/%3E%3C/svg%3E");
}
.home-slide__shade{
  z-index:-1;background:
    linear-gradient(180deg,rgba(11,11,12,.12) 3%,rgba(11,11,12,.62) 43%,rgba(11,11,12,.98) 100%),
    linear-gradient(90deg,rgba(11,11,12,.76),transparent 82%);
}
.home-slide__body{
  position:relative;z-index:2;width:100%;padding:52px var(--gut) 108px;
}
.home-slide__eyebrow{
  margin:0 0 10px;font-family:"IBM Plex Mono",monospace;font-size:11px;font-weight:700;
  letter-spacing:.16em;text-transform:uppercase;color:#fff;
}
.home-slide__eyebrow::before{
  content:"";display:inline-block;width:26px;height:3px;margin:0 9px 2px 0;background:var(--slide-accent);
}
.home-slide__title{
  margin:0 0 14px;max-width:12ch;font-family:"Bebas Neue",sans-serif;font-size:clamp(44px,13vw,68px);
  line-height:.91;font-weight:400;letter-spacing:.015em;text-wrap:balance;
}
.home-slide__copy{margin:0 0 24px;max-width:52ch;font-size:16px;line-height:1.52;color:#E6E6E7}
.home-slide__note{
  width:max-content;max-width:100%;margin:-10px 0 20px;padding:7px 10px;border-left:3px solid var(--slide-accent);
  background:rgba(11,11,12,.72);font:600 10px/1.35 "IBM Plex Mono",monospace;letter-spacing:.06em;
  text-transform:uppercase;color:#F1F1F2;
}
.home-slide__acts{display:flex;flex-direction:column;gap:10px}
.home-slide__primary{background:var(--slide-accent);border-color:var(--slide-accent);color:#fff}
.home-slide__secondary{background:rgba(11,11,12,.38);border:1px solid rgba(255,255,255,.72);color:#fff}
.home-slide--bobcat .home-slide__primary{color:var(--ink)}
.home-slide__fallback{
  position:absolute;left:50%;top:27%;transform:translate(-50%,-50%);white-space:nowrap;
  font-family:"Bebas Neue",sans-serif;font-size:clamp(44px,15vw,72px);letter-spacing:.04em;color:#fff;
}
.home-slider__controls{display:none}
.js .home-slider__stage{min-height:680px}
.js .home-slide{
  position:absolute;inset:0;width:100%;height:100%;opacity:0;visibility:hidden;
  transform:scale(1.018);border:0;pointer-events:none;
}
.is-ready .home-slide{transition:opacity .68s ease,transform .82s cubic-bezier(.2,.7,.2,1),visibility 0s linear .82s}
.js .home-slide.is-active{
  opacity:1;visibility:visible;transform:none;transition-delay:0s;pointer-events:auto;
}
.is-ready .home-slide.is-active .home-slide__photoFrame,
.is-ready .home-slide.is-active .home-slide__markWrap,
.is-ready .home-slide.is-active .home-slide__body{will-change:transform}
.is-ready .home-slide.is-active .home-slide__photo{animation:home-hero-breathe 9s ease-out both}
.is-ready .home-slide.is-active .home-slide__mark{animation:home-mark-drift 8s ease-in-out both}
@keyframes home-hero-breathe{from{transform:scale(1.035)}to{transform:scale(1.095)}}
@keyframes home-mark-drift{from{transform:translate3d(0,0,0)}to{transform:translate3d(-10px,5px,0)}}
.is-ready .home-slider__controls{
  position:absolute;z-index:3;inset:0;display:block;pointer-events:none;
}
.home-slider__arrow{
  position:absolute;top:50%;transform:translateY(-50%);pointer-events:auto;
}
.home-slider__controls [data-home-prev]{left:clamp(6px,1.6vw,26px)}
.home-slider__controls [data-home-next]{right:clamp(6px,1.6vw,26px)}
.home-slider__dots{
  position:absolute;left:0;right:0;bottom:16px;justify-content:center;pointer-events:auto;
}
.home-slider__arrow{
  appearance:none;display:flex;align-items:center;justify-content:center;
  width:44px;height:44px;flex:0 0 44px;padding:0;
  border:1px solid rgba(255,255,255,.36);background:rgba(11,11,12,.46);
  backdrop-filter:blur(2px);-webkit-backdrop-filter:blur(2px);color:#fff;
  cursor:pointer;font:inherit;
  transition:border-color .18s ease,background-color .18s ease;
}
/* Bars, not pips: the active bar widens and fills across the slide's own
   duration, so position and time left are the same object. Buttons keep a 44px
   tall hit area while only the 3px rule is painted. */
.home-slider__dots{display:flex;align-items:center;gap:6px}
.home-slider__dot{
  appearance:none;border:0;background:none;padding:20px 0;cursor:pointer;
  display:block;width:30px;
  transition:width .34s cubic-bezier(.2,.7,.2,1);
}
.home-slider__dot span{
  display:block;position:relative;height:3px;overflow:hidden;
  background:rgba(255,255,255,.34);transition:background .2s ease;
}
.home-slider__dot.is-on{width:58px}
.home-slider__dot.is-on span{background:rgba(255,255,255,.3)}
.home-slider__dot.is-on span::after{
  content:"";position:absolute;inset:0;background:var(--active-accent,#fff);
  transform:scaleX(0);transform-origin:left;
}
.home-slider.is-playing .home-slider__dot.is-on span::after{
  animation:home-slider-progress 6.5s linear forwards;
}
@keyframes home-slider-progress{to{transform:scaleX(1)}}
.home-slider__arrow:focus-visible{outline:3px solid #fff;outline-offset:3px}
.home-slider__dot:focus-visible{outline:2px solid #fff;outline-offset:-14px}

/* ---------- department cards ---------- */
.depts{padding:clamp(26px,4vw,44px) var(--gut) clamp(28px,4vw,44px)}
.depts__inner{width:min(100%,1240px);margin:0 auto}
.depts__head{display:grid;gap:10px;margin-bottom:20px}
.depts__eyebrow{
  margin:0;font-family:"IBM Plex Mono",monospace;font-size:10.5px;font-weight:700;
  letter-spacing:.17em;text-transform:uppercase;color:var(--signal);
  display:flex;align-items:center;gap:10px;
}
.depts__eyebrow::before{content:"";width:28px;height:3px;background:var(--signal)}
.depts__grid{display:grid;grid-template-columns:1fr;gap:12px}

.dept{
  position:relative;isolation:isolate;overflow:hidden;display:flex;flex-direction:column;
  min-height:206px;padding:22px 20px 18px;
  border:1px solid rgba(255,255,255,.12);border-radius:6px;
  background:linear-gradient(152deg,rgb(var(--dept-a)) 0%,rgb(var(--dept-b)) 100%);
  color:#fff;text-decoration:none;
  box-shadow:0 1px 2px rgba(11,11,12,.18),0 12px 28px rgba(11,11,12,.16);
  transition:transform .26s cubic-bezier(.2,.7,.2,1),box-shadow .26s ease,border-color .26s ease;
}
/* A single diagonal sheen across the ground: depth without a texture file. */
.dept::after{
  content:"";position:absolute;z-index:-1;inset:0;pointer-events:none;
  background:linear-gradient(118deg,transparent 46%,rgba(255,255,255,.07) 62%,transparent 78%);
}
/* A soft light source in the top corner: depth without a texture file. */
.dept__glow{
  position:absolute;z-index:-1;inset:-30% -30% auto auto;width:78%;aspect-ratio:1;
  background:radial-gradient(circle,rgba(255,255,255,.20),transparent 66%);
  transition:opacity .26s ease;opacity:.85;
}
.dept__rule{position:absolute;left:0;top:0;bottom:0;width:4px;background:rgb(var(--dept-accent))}
/* Dark artwork (Ferris, LS) gets a light plate or it vanishes into the card. */
.dept__logo{
  display:flex;align-items:center;width:max-content;height:54px;margin:0;
  padding:8px 12px;background:rgba(255,255,255,.94);border-radius:4px;
}
/* An explicit height, not max-height: bobcat-logo.svg has no intrinsic size, and a
   flex child sized only by max-height collapses it to 0x0. */
.dept__logo img{height:34px;width:auto;max-width:180px;flex:none;display:block}
/* White artwork (Bobcat, the house mark) takes no plate -- it would erase it. */
.dept__logo--dark{background:none;padding:0;height:50px}
.dept__logo--dark img{height:36px;max-width:190px}
.dept__name{margin-top:16px;font-family:"Bebas Neue",sans-serif;font-size:30px;line-height:1;letter-spacing:.02em}
.dept__copy{margin-top:8px;font-size:var(--fs-md);line-height:1.45;color:rgba(255,255,255,.84);max-width:34ch}
.dept__go{
  display:flex;align-items:center;justify-content:space-between;gap:12px;
  margin-top:auto;padding-top:15px;border-top:1px solid rgba(255,255,255,.22);
  font-size:15.5px;font-weight:700;letter-spacing:-.005em;
}
.dept__arrow{
  display:grid;place-items:center;width:32px;height:32px;flex:0 0 32px;border-radius:50%;
  /* White chip, ink glyph: an accent chip on its own brand's card is the same hue
     twice and measured as low as 1.47:1 against a 3:1 requirement for UI components. */
  background:#fff;color:var(--ink);font-size:var(--fs-base);
  transition:transform .22s cubic-bezier(.2,.7,.2,1);
}
.dept--used{--dept-a:138,12,32;--dept-b:74,8,20;--dept-accent:200,16,46}
.dept--ferris{--dept-a:122,36,42;--dept-b:66,20,24;--dept-accent:163,52,58}
.dept--ls{--dept-a:10,42,110;--dept-b:5,20,58;--dept-accent:0,117,201}
.dept--bobcat{--dept-a:44,44,48;--dept-b:22,22,25;--dept-accent:244,119,33}


.shelf{padding:18px var(--gut) 28px}
.shelf__head{display:flex;align-items:baseline;justify-content:space-between;gap:12px;margin-bottom:14px}
.shelf__more{color:var(--signal);font-weight:700;font-size:var(--fs-md);text-decoration:none;white-space:nowrap}
.shelf .lot{margin:0;padding:0;grid-template-columns:1fr;gap:10px;--lot-gap:10px}
.shelf .lot__item{display:flex}
.shelf .tag{display:flex;flex-direction:column;width:100%}
.shelf .tag__plate{padding:9px 10px 0;font-size:9px;gap:6px}
.shelf .tag__price{padding:0 10px;font-size:34px}
.shelf .tag__name{padding:0 10px;font-size:var(--fs-md)}
.shelf .tag__meta{padding:0 10px;font-size:12px}
.shelf .tag__go{min-height:44px;margin-top:auto;padding:10px 10px 0;font-size:var(--fs-sm)}

.home-consign{margin-block:0;
  position:relative;display:flex;align-items:flex-end;min-height:520px;margin:18px var(--gut) 34px;
  overflow:hidden;border-radius:6px;background:var(--ink);color:#fff;
}
.home-consign__media,.home-consign__shade{position:absolute;inset:0}
.home-consign__media img{width:100%;height:100%;object-fit:cover;display:block}
.home-consign__shade{background:linear-gradient(180deg,rgba(11,11,12,.08) 12%,rgba(11,11,12,.92) 84%)}
.home-consign__body{position:relative;z-index:1;width:100%;padding:28px 22px}
.home-consign__eyebrow{
  margin:0 0 10px;font:600 10px/1.4 "IBM Plex Mono",monospace;letter-spacing:.15em;
  text-transform:uppercase;color:#F0A0AD;
}
.home-consign__title{
  margin:0;max-width:15ch;font:400 clamp(38px,12vw,58px)/.96 "Bebas Neue",sans-serif;
  letter-spacing:.015em;text-wrap:balance;
}
.home-consign__copy{margin:14px 0 22px;max-width:54ch;color:#E0E2E4;font-size:var(--fs-base);line-height:1.5}
.home-consign__cta{width:100%;background:var(--signal);border-color:var(--signal);color:#fff}

.next-steps{padding:34px var(--gut);background:var(--paper);border-top:1px solid var(--line)}
.next-steps__eyebrow,.why__eyebrow{
  margin:0 0 8px;font-family:"IBM Plex Mono",monospace;font-size:10px;font-weight:700;
  letter-spacing:.16em;text-transform:uppercase;color:var(--signal);
}
.next-steps__grid{display:grid;gap:10px}
.next-step{
  display:flex;flex-direction:column;min-height:190px;padding:22px 20px;text-decoration:none;
  color:#fff;background:var(--ink);border:1px solid #29292C;border-radius:6px;
  transition:transform .18s ease,border-color .18s ease;
}
.next-step__title{
  font-family:"Bebas Neue",sans-serif;font-size:30px;line-height:1;letter-spacing:.03em;
}
.next-step__copy{margin:10px 0 20px;color:#C7C9CC;font-size:var(--fs-base);line-height:1.48}
.next-step__go{margin-top:auto;color:#fff;font-size:var(--fs-md);font-weight:700}

.why{padding:36px var(--gut) 42px;background:var(--bone);border-top:1px solid var(--line)}
.why__intro{margin:0 0 24px;max-width:54ch;color:#6A6F74}
.why__list{list-style:none;margin:0 0 22px;padding:0;display:flex;flex-direction:column;gap:12px}
.why__list li{padding-left:16px;border-left:3px solid var(--signal);color:#3A3E42;line-height:1.45}
.why__list strong{display:block;color:var(--ink)}
.why__acts{display:flex;flex-direction:column;gap:10px}

@media (hover:hover){
  .home-slide__primary:hover{filter:brightness(.92)}
  .home-slide__secondary:hover{background:rgba(255,255,255,.16)}
  .home-slider__arrow:hover{background:rgba(11,11,12,.7);border-color:#fff}
  .home-slider__dot:hover span{background:rgba(255,255,255,.72)}
  .masthead__nav .shop-menu__item:hover{border-color:rgba(255,255,255,.55);transform:translateY(-2px)}
  .masthead__nav .shop-menu__item:hover .shop-menu__arrow{transform:translateX(3px);opacity:1}
  .masthead__nav .shop-menu__more a:hover{background:rgba(255,255,255,.12);color:#fff}
  .dept:hover,.dept:focus-visible{
    transform:translateY(-6px);border-color:rgba(255,255,255,.30);
    box-shadow:0 2px 4px rgba(11,11,12,.2),0 26px 46px rgba(11,11,12,.30);
  }
  .dept:hover .dept__glow{opacity:1}
  .dept:hover .dept__arrow{transform:translateX(4px)}
  .next-step:hover{border-color:var(--signal);transform:translateY(-2px)}
  .shelf__more:hover{text-decoration:underline}
}
@media (min-width:360px){
  .shelf .lot{grid-template-columns:1fr 1fr}
}
@media (min-width:700px){
  .depts__grid{grid-template-columns:repeat(2,1fr);gap:14px}
  .depts__head{grid-template-columns:minmax(0,1.1fr) minmax(0,1fr);align-items:end;gap:22px}
  .dept{min-height:212px;padding:22px 22px 20px 26px}
}

/* One row of four once the desktop bar appears and there is width for it. */
@media (min-width:1160px){
  .depts__grid{grid-template-columns:repeat(4,1fr);gap:14px}
  .dept{min-height:262px;padding:22px 18px 18px 22px}
  .dept__logo{height:50px;padding:8px 11px;margin-top:0}
  .dept__logo img{height:32px;max-width:152px}
  .dept__logo--dark{height:46px}
  .dept__logo--dark img{height:36px;max-width:164px}
  .dept__name{margin-top:14px;font-size:27px}
  .dept__copy{margin-top:6px;font-size:13.5px;max-width:26ch}
  .dept__go{margin-top:auto;padding-top:13px;font-size:var(--fs-base)}
  .dept__arrow{width:30px;height:30px;flex-basis:30px;font-size:16px}
  .shelf .lot{gap:16px;--lot-gap:16px}
  .shelf .tag__plate{padding:10px 14px 0;font-size:10px}
  .shelf .tag__price{padding:0 14px;font-size:40px}
  .shelf .tag__name{padding:0 14px;font-size:var(--fs-base)}
  .shelf .tag__meta{padding:0 14px;font-size:var(--fs-sm)}
  .shelf .tag__go{padding:0 14px}
  .home-consign{min-height:430px;margin-top:28px;margin-bottom:44px}
  .home-consign__shade{background:linear-gradient(90deg,rgba(11,11,12,.94) 0%,rgba(11,11,12,.68) 48%,rgba(11,11,12,.08) 82%)}
  .home-consign__body{padding:42px 40px}
  .home-consign__copy{font-size:var(--fs-lg)}
  .home-consign__cta{width:max-content;min-width:220px}
  .next-steps__grid{grid-template-columns:repeat(3,1fr);gap:14px}
  .home-slide,.js .home-slider__stage{min-height:560px}
  .home-slide{align-items:center}
  .home-slide__photo{object-position:center}
  .home-slide__shade{background:
    linear-gradient(90deg,rgba(11,11,12,.99) 0 28%,rgba(11,11,12,.88) 43%,rgba(11,11,12,.24) 72%,rgba(11,11,12,.12) 100%),
    linear-gradient(0deg,rgba(11,11,12,.58),transparent 43%)}
  .home-slide__body{
    width:min(620px,calc(100vw - 2 * var(--gut)));max-width:none;
    margin-left:max(var(--gut),calc((100vw - 1180px)/2 + var(--gut)));padding:62px 0 104px;
  }
  .home-slide__title{font-size:clamp(58px,6.5vw,88px)}
  .home-slide__copy{font-size:var(--fs-lg)}
  .home-slide__acts,.why__acts{flex-direction:row}
  .home-slide__acts .btn,.why__acts .btn{flex:0 0 auto}
  .home-slide__markWrap{top:11%;right:5%;width:min(40vw,560px);height:44%;opacity:.3}
  .home-slide--ferris .home-slide__markWrap{opacity:.4}
  .home-slide--ls .home-slide__markWrap{opacity:.38}
  .home-slide--bobcat .home-slide__markWrap{top:13%;right:6%;opacity:.24}
  .is-ready .home-slider__dots{bottom:22px}
  .why__list{display:grid;grid-template-columns:1fr 1fr;gap:16px 28px}
}
@media (min-width:1080px){
  .shelf .lot{grid-template-columns:repeat(4,1fr)}
  .next-step{min-height:210px;padding:26px 24px}
}
@media (min-width:1160px){
}
@media (prefers-reduced-motion:reduce){
  .js .home-slide,.is-ready .home-slide{transition:none}
  .is-ready .home-slide.is-active .home-slide__photo,
  .is-ready .home-slide.is-active .home-slide__mark{animation:none}
  .home-slide__photo{transform:scale(1.035)}
  .home-slide__photo[data-home-image-state]{transition:none}
  .home-slider__dot{transition:none}
  .home-slider__dot.is-on span::after{animation:none!important;transform:scaleX(1)}
}

/* ---------- inventory controls ----------
   Search plus one dropdown. The previous six-chip row wrapped to three lines on a phone
   and read as tags rather than controls; the options were always mutually exclusive, so
   a select states that and hands mobile users their platform's own picker. */
.sift{
  display:flex;flex-direction:column;gap:12px;
  padding:20px var(--gut) 8px;
}
.sift__label{
  display:block;font-size:11px;letter-spacing:.16em;text-transform:uppercase;
  color:var(--steel);margin-bottom:6px;
}
.sift__input,.sift__select{
  width:100%;min-height:52px;font:inherit;font-size:16px;   /* 16px: iOS zooms below it */
  color:var(--ink);background:var(--paper);
  border:1px solid var(--line);border-radius:6px;padding:12px 14px;
}
.sift__input:focus-visible,.sift__select:focus-visible{
  outline:2px solid var(--signal);outline-offset:1px;border-color:var(--signal);
}
.sift__wrap{position:relative}
.sift__select{
  appearance:none;-webkit-appearance:none;padding-right:42px;cursor:pointer;font-weight:600;
}
.sift__chev{
  position:absolute;right:13px;top:50%;transform:translateY(-50%);
  width:20px;height:20px;color:var(--steel);pointer-events:none;
}
.filters__status{
  margin:0;padding:4px var(--gut) 14px;color:var(--steel);font-size:var(--fs-md);
  font-variant-numeric:tabular-nums;
}
@media (min-width:700px){
  .sift{flex-direction:row;align-items:flex-end;gap:14px}
  .sift__field--find{flex:1 1 auto}
  .sift__field--pick{flex:0 0 240px}
}

/* ---------- blog navigation ----------
   Four brand blogs became one, so the index needs to show what the axes are. Categories
   are the loud row (they carry the same colours as the menu); tags collapse behind a
   disclosure because several hold only one post and a wall of them would read as noise. */
.topics{display:flex;flex-wrap:wrap;gap:8px;padding:4px var(--gut) 12px}
.topics__chip{
  display:inline-flex;align-items:center;gap:7px;
  padding:10px 14px;min-height:44px;border-radius:999px;
  border:1px solid var(--line);background:var(--paper);color:#3A3E42;
  text-decoration:none;font-weight:700;font-size:var(--fs-md);
}
.topics__chip.is-on{background:var(--ink);border-color:var(--ink);color:#fff}
.topics__n{
  font-size:12px;color:var(--steel);font-variant-numeric:tabular-nums;
}
.topics__chip.is-on .topics__n{color:#B9BDC1}
/* Each category carries its line's colour, so the blog reads as part of the same site. */
.topics__chip--vehicles{box-shadow:inset 3px 0 0 var(--line-used,#C8102E)}
.topics__chip--ferris-mowers{box-shadow:inset 3px 0 0 var(--line-ferris,#A3343A)}
.topics__chip--ls-tractors{box-shadow:inset 3px 0 0 var(--line-ls,#06205C)}
.topics__chip--service{box-shadow:inset 3px 0 0 var(--steel)}

.tagbar{margin:0 var(--gut) 8px;border-top:1px solid var(--line);border-bottom:1px solid var(--line)}
.tagbar__head{
  display:flex;align-items:center;gap:10px;cursor:pointer;list-style:none;
  padding:14px 2px;min-height:var(--tap);
  font-size:11px;letter-spacing:.16em;text-transform:uppercase;color:var(--steel);
}
.tagbar__head::-webkit-details-marker{display:none}
.tagbar__arrow{width:16px;height:16px;margin-left:auto;transition:transform .16s ease}
.tagbar[open] .tagbar__arrow{transform:rotate(90deg)}
.tagbar__list{display:flex;flex-wrap:wrap;gap:8px;padding:0 2px 16px}
.tagbar__tag{
  display:inline-flex;align-items:center;gap:6px;
  padding:9px 12px;min-height:44px;border-radius:4px;
  background:var(--bone);color:#3A3E42;text-decoration:none;font-size:var(--fs-md);font-weight:600;
}
.tagbar__tag.is-on{background:var(--signal);color:#fff}
.tagbar__tag.is-on .topics__n{color:#fff}

.read__cat{
  display:inline-block;font-size:11px;letter-spacing:.12em;text-transform:uppercase;
  font-weight:700;margin-bottom:8px;color:var(--steel);
  padding-left:9px;border-left:3px solid var(--steel);
}
.read__cat--vehicles{border-left-color:var(--line-used,#C8102E)}
.read__cat--ferris-mowers{border-left-color:var(--line-ferris,#A3343A)}
.read__cat--ls-tractors{border-left-color:var(--line-ls,#06205C)}
.read__date{display:block;margin-top:10px;font-size:var(--fs-sm);color:var(--steel)}

.article-pages{padding:0 var(--gut) 48px}
.article-pages__list{display:flex;flex-wrap:wrap;align-items:center;justify-content:center;gap:8px}
.article-pages .page-numbers{
  display:inline-flex;align-items:center;justify-content:center;min-width:44px;min-height:44px;
  padding:0 13px;border:1px solid var(--line);border-radius:3px;background:var(--paper);
  color:var(--ink);font-size:var(--fs-md);font-weight:700;line-height:1;text-decoration:none;
}
.article-pages .page-numbers.current{border-color:var(--ink);background:var(--ink);color:#fff}
.article-pages .page-numbers.dots{min-width:28px;padding:0;border-color:transparent;background:transparent;color:var(--steel)}
.article-pages .page-numbers:focus-visible{outline:3px solid var(--signal);outline-offset:3px}

/* The shared steel tone lands at 4.48:1 on bone. Nudge only the article archive's
   supporting copy darker so its small labels clear WCAG AA without changing the
   palette across inventory and the homepage. */
.post-type-archive-article .lede__count,
.post-type-archive-article .tagbar__head,
.post-type-archive-article .filters__status,
.tax-section .lede__count,
.tax-section .tagbar__head,
.tax-section .filters__status,
.tax-topic .lede__count,
.tax-topic .tagbar__head,
.tax-topic .filters__status{color:#666B70}

@media (hover:hover){
  .topics__chip:hover{border-color:var(--ink);color:var(--ink)}
  .topics__chip.is-on:hover{color:#fff}
  .tagbar__tag:hover{background:var(--line)}
  .tagbar__tag.is-on:hover{background:var(--signal)}
  .article-pages a.page-numbers:hover{border-color:var(--ink);background:var(--bone)}
}
@media (prefers-reduced-motion:reduce){ .tagbar__arrow{transition:none} }

/* ---------- focused equipment line landings ----------
   The homepage category slides land here. Each page keeps the shopper inside one
   current inventory line, while /equipment remains the compact combined index. */
.line-landing{--line-accent:var(--signal);--line-accent-on-dark:#FF9AAA;background:var(--bone);color:var(--ink)}
.line-landing--ferris{--line-accent:var(--line-ferris,#A3343A);--line-accent-on-dark:#F0A0AD}
.line-landing--ls{--line-accent:var(--line-ls,#06205C);--line-accent-on-dark:#9FB8FF}

.line-hero{display:grid;background:var(--ink);color:#fff}
.line-hero__media{position:relative;width:100%;height:clamp(220px,62.5vw,320px);overflow:hidden;background:#222326}
.line-hero__media::after{
  content:"";position:absolute;inset:0;
  background:linear-gradient(180deg,rgba(11,11,12,.03) 54%,rgba(11,11,12,.7) 100%);
}
.line-hero__media img{display:block;width:100%;height:100%;object-fit:cover;object-position:center}
.line-hero__fallback{
  display:grid;place-items:center;width:100%;height:100%;font:400 42px/1 "Bebas Neue",sans-serif;
  letter-spacing:.06em;color:#8D9195;
}
.line-hero__body{padding:28px var(--gut) 32px;border-top:5px solid var(--line-accent)}
.line-hero__logo{
  display:inline-flex;align-items:center;justify-content:center;width:max-content;max-width:190px;
  min-height:44px;margin-bottom:22px;padding:8px 12px;border-radius:4px;background:#fff;
}
.line-hero__logo img{display:block;width:auto;max-width:100%;height:28px;object-fit:contain}
.line-hero__eyebrow,.line-guide__eyebrow,.line-stock__eyebrow{
  margin:0 0 8px;font:700 10px/1.4 "IBM Plex Mono",monospace;letter-spacing:.16em;
  text-transform:uppercase;color:var(--line-accent);
}
.line-hero__eyebrow{color:var(--line-accent-on-dark)}
.line-hero__title{
  max-width:12ch;margin:0;font:400 clamp(46px,14vw,70px)/.92 "Bebas Neue",sans-serif;
  letter-spacing:.015em;text-wrap:balance;
}
.line-hero__lede{max-width:62ch;margin:16px 0 24px;color:#D4D6D8;font-size:16px;line-height:1.55}
.line-hero__actions,.line-next__actions{display:flex;flex-direction:column;gap:10px}
.line-hero__actions .btn,.line-next__actions .btn{width:100%}
.line-landing .btn--call{background:var(--line-accent);border-color:var(--line-accent)}
.line-hero .btn--ghost,.line-next .btn--ghost{color:#fff;border-color:#878A8E;background:transparent}
.line-hero__facts{
  display:grid;grid-template-columns:1fr 1fr;gap:0;margin:28px 0 0;
  border-top:1px solid #36373A;border-left:1px solid #36373A;
}
.line-hero__facts div{min-width:0;padding:14px 12px;border-right:1px solid #36373A;border-bottom:1px solid #36373A}
.line-hero__facts div:last-child{grid-column:1/-1}
.line-hero__facts dt{
  margin-bottom:6px;font:600 9px/1.3 "IBM Plex Mono",monospace;letter-spacing:.12em;
  text-transform:uppercase;color:#AEB1B4;
}
.line-hero__facts dd{margin:0;font:400 27px/1 "Bebas Neue",sans-serif;letter-spacing:.025em;color:#fff;white-space:nowrap}

.line-guide{max-width:1220px;margin:0 auto;padding:42px var(--gut)}
.line-guide__title,.line-stock__title,.line-next h2{
  margin:0;font:400 clamp(36px,10vw,54px)/.95 "Bebas Neue",sans-serif;
  letter-spacing:.02em;text-wrap:balance;
}
.line-guide__grid{display:grid;gap:12px;margin-top:24px}
.line-guide__card{
  position:relative;min-width:0;padding:24px 20px;background:var(--paper);
  border:1px solid var(--line);border-top:4px solid var(--line-accent);border-radius:5px;
}
.line-guide__card>span{
  display:block;margin-bottom:20px;font:700 11px/1 "IBM Plex Mono",monospace;
  letter-spacing:.14em;color:var(--line-accent);
}
.line-guide__card h3{margin:0 0 10px;font-size:19px;line-height:1.2}
.line-guide__card p{margin:0;color:#4C5054;font-size:var(--fs-base);line-height:1.55}

.line-stock{scroll-margin-top:90px;padding:42px 0 10px;background:var(--paper);border-top:1px solid var(--line)}
.line-stock__head{display:grid;gap:14px;padding:0 var(--gut) 8px}
.line-stock__head>p{max-width:48ch;margin:0;color:var(--steel);font-size:var(--fs-md);line-height:1.5}
.line-stock__grid{margin-top:16px}
.line-stock .tag{border-top:3px solid var(--line-accent)}
.line-stock .tag__body,.line-stock .tag__go{color:var(--line-accent)}
.line-stock .tag__soon{margin:0}

.line-next{
  display:grid;gap:24px;margin:0;padding:38px var(--gut) 42px;background:var(--ink);color:#fff;
  border-top:5px solid var(--line-accent);
}
.line-next p{
  margin:0 0 8px;font:700 10px/1.4 "IBM Plex Mono",monospace;letter-spacing:.16em;
  text-transform:uppercase;color:var(--line-accent-on-dark);
}
.line-next h2{max-width:15ch}

@media (hover:hover){
  .line-landing .btn--call:hover{filter:brightness(.91)}
  .line-stock .tag:hover{border-top-color:var(--line-accent)}
}
@media (min-width:700px){
  .line-hero__body{padding:42px max(var(--gut),calc((100vw - 1180px)/2 + var(--gut))) 46px}
  .line-hero__actions,.line-next__actions{flex-direction:row}
  .line-hero__actions .btn,.line-next__actions .btn{width:auto}
  .line-hero__facts{grid-template-columns:repeat(3,1fr);max-width:740px}
  .line-hero__facts div:last-child{grid-column:auto}
  .line-guide{padding-top:56px;padding-bottom:56px}
  .line-guide__grid{grid-template-columns:repeat(3,1fr);gap:16px}
  .line-guide__card{padding:28px 24px}
  .line-stock{padding-top:54px}
  .line-stock__head{grid-template-columns:minmax(0,1fr) minmax(250px,.46fr);align-items:end}
  .line-stock__head>p{justify-self:end}
  .line-next{grid-template-columns:minmax(0,1fr) auto;align-items:center;padding:48px max(var(--gut),calc((100vw - 1180px)/2 + var(--gut)))}
  .line-next__actions{justify-content:flex-end}
}
@media (min-width:980px){
  .line-hero{grid-template-columns:minmax(0,1fr) minmax(46%,1.04fr);min-height:650px}
  .line-hero__body{grid-column:1;grid-row:1;display:flex;flex-direction:column;justify-content:center;padding:62px 7vw 62px max(var(--gut),calc((100vw - 1180px)/2 + var(--gut)));border-top:0;border-left:5px solid var(--line-accent)}
  .line-hero__media{grid-column:2;grid-row:1;min-height:650px;aspect-ratio:auto}
  .line-hero__media::after{background:linear-gradient(90deg,rgba(11,11,12,.44),rgba(11,11,12,.02) 34%)}
  .line-hero__title{font-size:clamp(64px,5.4vw,86px)}
  .line-hero__facts{grid-template-columns:1fr 1fr}
  .line-hero__facts div:last-child{grid-column:1/-1}
}
@media (max-width:359px){
  .line-hero__body{padding-left:16px;padding-right:16px}
  .line-hero__facts div{padding-left:9px;padding-right:9px}
  .line-hero__facts dd{font-size:23px}
  .line-guide,.line-stock__head,.line-next{padding-left:16px;padding-right:16px}
}

/* The builds-of-this-model table, round 51. Reuses the comparison table's shape; the row
   the reader is on is marked rather than merely styled, so it survives a colour-blind
   reading and a screen reader alike. */
.veh__cmpTable tr.is-self{background:var(--bone)}
.veh__cmpMuted{color:var(--steel);font-style:italic}

/* The thumbnail strip, round 60. Only appears on galleries of six or more, where the
   arrows alone made photograph 40 a 39-press journey. Scrolls itself rather than the
   page, like the comparison table above. */
.roll__thumbs{
  display:flex;gap:6px;margin:10px 0 0;padding:0 0 4px;list-style:none;
  overflow-x:auto;-webkit-overflow-scrolling:touch;scrollbar-width:thin;
}
.roll__thumbs li{flex:0 0 auto;margin:0}
.roll__thumb{
  display:block;padding:0;border:1px solid var(--line);background:var(--paper);
  border-radius:2px;cursor:pointer;line-height:0;opacity:.62;transition:opacity .18s ease;
}
.roll__thumb img{display:block;width:64px;height:48px;object-fit:cover}
.roll__thumb:hover,.roll__thumb:focus-visible{opacity:1}
.roll__thumb[aria-current=true]{opacity:1;border-color:var(--ink);box-shadow:inset 0 0 0 1px var(--ink)}
@media (prefers-reduced-motion:reduce){ .roll__thumb{transition:none} }

/* Why a card matched, shown only when the reason is not already on the card. Same mono
   face as the configuration line, quieter still. */
.tag__why{
  margin:3px 0 0;font:500 10.5px/1.35 "IBM Plex Mono",monospace;letter-spacing:.05em;
  color:var(--steel);
}

/* ---- the bento: one unit per few takes a double tile ----
   Module 01 proposed this in round 1 and it was never built. The rule for WHICH unit is in
   dykes_feature_ids(): a vehicle earns it by having materially more photography than its
   neighbours -- because a wide tile is a photographic slot and an empty one is worse than
   no tile -- and a machine earns it by a real price cut. Same markup, one class. */
/* The double-width tile is retired. Every card in a lot grid is now the same size, on
   /inventory and on every category grid.
   It used to earn its span from dykes_feature_ids() -- a vehicle with materially more
   photography, or a machine with a real price cut. The idea was sound, but a tile twice
   its neighbours' width cannot share their photo ratio and still finish at their height,
   and because .lot uses grid-auto-rows:1fr the tallest card in the grid sets EVERY row:
   measured on /inventory, one wide card took all ten rows from 606px to 726px.
   dykes_feature_ids() and the .lot__item--wide class are both left in place, so a
   featured treatment can come back later as emphasis that does not change the tile's
   footprint -- a badge or a border rather than a span. */
@media (min-width:700px){
  .lot__item--wide{grid-column:auto}
}

/* The difference between builds, not just their prices. Colour carries no meaning on its
   own here: the sign is printed, so a reader who cannot separate the two hues still gets it. */
.veh__cmpDelta{display:block;font:600 11.5px/1.3 "IBM Plex Mono",monospace;letter-spacing:.04em;
  font-variant-numeric:tabular-nums;margin-top:2px}
.veh__cmpDelta.is-more{color:var(--steel)}
.veh__cmpDelta.is-less{color:var(--signal)}

/* What is in the shed, before any scrolling. Six lines, their counts and what they run
   between: the breadth of the lot in one glance, which a grouped listing cannot show. */
.shed{display:grid;grid-template-columns:repeat(2,1fr);gap:1px;background:var(--hair);
  border-block:1px solid var(--hair);margin:0 0 26px}
@media (min-width:720px){.shed{grid-template-columns:repeat(3,1fr)}}
@media (min-width:1060px){.shed{grid-template-columns:repeat(6,1fr)}}
.shed__i{display:flex;flex-direction:column;gap:2px;padding:14px 14px 13px;background:var(--paper);
  text-decoration:none;color:inherit;transition:background .15s}
.shed__i:hover{background:var(--bone)}
.shed__n{font:400 26px/1 "Bebas Neue",Impact,sans-serif;font-variant-numeric:tabular-nums}
.shed__t{font:600 12px/1.25 "IBM Plex Mono",monospace;letter-spacing:.05em;text-transform:uppercase}
.shed__p{font-size:12px;color:var(--steel);font-variant-numeric:tabular-nums}

/* ---------------------------------------------------------------------------
   Paper. Measured before writing any of this: a machine page printed to six
   sheets and a vehicle page to four at 2.8MB, because the masthead, the enquiry
   form, the Google map, the whole photo gallery and 45 links all went to the
   printer. Somebody carrying a spec sheet into the shed wants the model number,
   the price, the configuration, the specifications and a phone number.
   --------------------------------------------------------------------------- */
@media print {
  :root{
    --bg:#fff;--surface:#fff;--fg:#000;--fg-soft:#333;--line:#bbb;
    --paper:#fff;--bone:#fff;--ink:#000;--steel:#333;--hair:#bbb;
  }
  html,body{background:#fff!important;color:#000!important}
  body{font-size:11pt;line-height:1.45}

  /* interface that has no meaning on paper */
  .skip,.masthead,.drawer,.burger,.foot,.foot__map,.shed,
  .ask,.rail__ask,.veh__act,.veh__back,.roll__thumbs,.roll__bar,.roll__rail,
  .filters,.sift,.home-slider__arrow,.reads,
  [data-equipment-controls],[data-vehicle-controls],iframe,button,form{
    display:none!important
  }

  /* the gallery is one photograph on paper, not thirty-five */
  .roll__track > *:not(:first-child){display:none!important}
  /* The frame holds its aspect ratio on screen, which on paper reserved 16cm of a
     sheet for one mower. Capped, and the ratio released so it does not reserve the
     space anyway. */
  .roll,.roll__frame{page-break-inside:avoid;break-inside:avoid}
  .roll__frame{aspect-ratio:auto!important;max-height:7cm!important;height:auto!important}
  .veh__hero{max-height:none!important}
  img{max-width:100%!important;max-height:7cm;object-fit:contain}

  /* A listing on paper is a price list, not a contact sheet. Printing /equipment with
     its photographs took 58 sheets; the same 140 machines as lines of text take far
     fewer and are the thing somebody would actually carry. */
  .lot__item .tag__shot,.lot__item img,.lot img{display:none!important}
  .lot{display:block!important}
  .lot__item{display:block!important;padding:2pt 0!important;border:0!important;
    border-bottom:.5pt solid #ccc!important;break-inside:avoid}
  .lot__item--wide{grid-column:auto!important}
  .tag__feature{display:none!important}

  /* keep a fact block whole rather than let it straddle a fold */
  .veh__facts,.veh__spec,.veh__cmp,.veh__builds,.veh__summary,.veh__money,
  .lot__item,.tal,.lr{page-break-inside:avoid;break-inside:avoid}
  h1,h2,h3{page-break-after:avoid;break-after:avoid}

  /* one address for the whole sheet, so the reader can act on it */
  main::after{
    content:"Dykes Motors · 3069 US-49, Collins MS 39428 · (601) 516-7255 · dykesmotors.com";
    display:block;margin-top:14pt;padding-top:8pt;border-top:1pt solid #000;
    font:600 9pt/1.4 "IBM Plex Mono",monospace
  }
  /* and the address of the page itself, once, not beside all 45 links */
  main::before{
    content:"" attr(data-print-url);
    display:block;margin-bottom:10pt;font:9pt/1.4 "IBM Plex Mono",monospace;color:#333
  }
  a[href]{text-decoration:none;color:#000}
  @page{margin:14mm}
}

/* Provenance. Quiet on purpose: this is reassurance, not a sales panel, and the moment it
   looks like a badge it reads like one. The state colours are carried by a rule down the
   left edge, and every line says the same thing in words, so colour is never the only
   carrier of the meaning. */
.prov{margin-top:26px;padding-top:18px;border-top:1px solid var(--hair)}
.prov__h{font:600 11px/1 "IBM Plex Mono",monospace;letter-spacing:.12em;text-transform:uppercase;
  color:var(--steel);margin:0 0 12px}
.prov__list{list-style:none;margin:0;padding:0;display:flex;flex-direction:column;gap:10px}
.prov__i{display:grid;grid-template-columns:84px 1fr;gap:2px 14px;align-items:baseline;
  padding-left:12px;border-left:2px solid var(--hair)}
@media (max-width:520px){.prov__i{grid-template-columns:1fr}}
.prov__i--unit{border-left-color:#2E7D4F}
.prov__i--maker{border-left-color:var(--steel)}
.prov__i--fresh{border-left-color:#2E7D4F}
.prov__i--order{border-left-color:var(--bobcat)}
.prov__i--none,.prov__i--unknown{border-left-color:var(--signal)}
.prov__k{font:600 10.5px/1.4 "IBM Plex Mono",monospace;letter-spacing:.09em;text-transform:uppercase;
  color:var(--steel)}
.prov__v{font-size:14px;line-height:1.45}

/* Open or shut. Stated in words, never by colour alone -- and phrased as a fact about the
   dealership rather than a warning, because being closed on a Sunday evening is not a fault. */
.foot__state{margin:0 0 10px;font:600 12px/1.4 "IBM Plex Mono",monospace;letter-spacing:.05em}
.foot__state.is-open{color:#7BC49A}
.foot__state.is-shut{color:#C9CDD2}
.foot__state::before{content:"";display:inline-block;width:7px;height:7px;border-radius:50%;
  margin-right:8px;vertical-align:1px;background:currentColor}

/* The rail's own state line. Full width above the two buttons, so it reads before the tap
   rather than after it. */
.rail__shut{grid-column:1/-1;margin:0 0 8px;font:600 11px/1.4 "IBM Plex Mono",monospace;
  letter-spacing:.04em;color:var(--steel);text-align:center}


/* ------------------------------------------------------------------
   Card text inset, enforced in one place.
   Each text line in .tag carried its own padding, and any line added later
   (.tag__feature, .tag__cfg) arrived without it and sat flush against the border.
   Measured on the home page: .tag__feature text began 1px from the card edge while
   every sibling began at 15px. This makes 14px the card's inset by default so a new
   line inherits it instead of having to remember it.
   ------------------------------------------------------------------ */
.tag > *:not(.tag__shot):not(.tag__shots){padding-left:14px;padding-right:14px}
.tag__meta{
  /* one line, so an extra trim word cannot make one card taller than its neighbour */
  display:flex;flex-wrap:nowrap;overflow:hidden;white-space:nowrap;
}


/* ------------------------------------------------------------------
   One card height across every grid on the site.
   Each .lot grid was already internally uniform, but two sections sitting on the
   same page came out 390px and 370px because the optional lines (.tag__feature,
   .tag__meta) appear on some vehicles and not others. Reserving that space with a
   fixed pixel min-height would only hold at one column width, so the reservation is
   expressed against the card's OWN width: the photo well is 16/10, i.e. 62.5% of the
   card width, and the block beneath it measured 209px at its fullest. The card then
   lands on the same height whether it is 292px wide, wider in a --wide tile, or
   narrower on a phone, without a breakpoint having to know the number.
   .tag__go already carries margin-top:auto, so any slack falls above the CTA and the
   call-to-action lines up across every card on the page.
   ------------------------------------------------------------------ */
.lot__item{container-type:inline-size}
/* The fixed content reservation is gone.
   It reserved 209px below the photo — enough for the tallest case, a two-line name plus
   a meta line plus an availability note — so that grids on DIFFERENT pages finished at
   the same height. The cost showed up on the Bobcat hub, where every card has a
   one-line name and no meta: 58px of dead space between the title and the call to
   action, on all forty cards. That is the blank space the cards were supposed to stop
   having.
   Cards are still identical within a grid, because .lot uses grid-auto-rows:1fr and a
   row sizes to its tallest card — and a grid is what a visitor actually sees. Matching
   a grid on another page was never worth carrying empty space on this one. */

/* Two lines reserved for the name so the price and CTA sit on the same baseline
   whether a vehicle is a "2023 Ford Escape ST-Line FWD" or a
   "2023 Toyota Tundra 4WD TRD Pro Hybrid CrewMax 5.5' Bed". */
.tag__name{min-height:calc(2 * 1.3em)}

/* The stock plate wrapped to two lines on some cards and one on others. */
.tag__plate{flex-wrap:nowrap;white-space:nowrap;overflow:hidden}


/* ------------------------------------------------------------------
   A markdown, shown as one.
   The old price is struck and stepped down so the eye lands on what the machine
   costs today, not on the number it used to cost. The new price takes the
   dealership red, which is the one place on a card that colour earns its keep.
   ------------------------------------------------------------------ */
.tag__price .tag__was{
  color:var(--steel);font-size:.6em;font-weight:500;margin-right:.4em;
  text-decoration-line:line-through;text-decoration-thickness:.07em;
  font-variant-numeric:tabular-nums;
}
.tag__price .tag__now{color:var(--signal)}


/* ------------------------------------------------------------------
   Bobcat hub header (page-bobcat.php).
   Deliberately NOT .line-hero: that is the full-bleed banner the other line
   landings use, and the brief for this page was the same as /parts — the machines
   come first. This is a name, a count and the four categories, then the grid.
   ------------------------------------------------------------------ */
.lotbar__inner{width:min(100%,1240px);margin:0 auto;padding:clamp(22px,3.4vw,38px) var(--gut) 6px}
.lotbar__title{
  font-family:"Bebas Neue",Impact,sans-serif;font-weight:400;line-height:.98;
  font-size:clamp(30px,5vw,46px);letter-spacing:.015em;margin:6px 0 0;color:var(--ink);
}
.lotbar__sub{margin:10px 0 0;max-width:60ch;color:var(--steel);font-size:var(--fs-md);line-height:1.5}
.lotbar__lines{display:flex;flex-wrap:wrap;gap:8px;margin:18px 0 0}
.lotbar__line{
  display:inline-flex;align-items:center;gap:7px;min-height:var(--tap);
  padding:0 14px;border:1px solid var(--line);border-radius:3px;
  background:var(--paper);color:var(--ink);text-decoration:none;
  font-size:var(--fs-base);font-weight:600;
  transition:border-color .18s ease,background-color .18s ease;
}
.lotbar__line:hover,.lotbar__line:focus-visible{border-color:var(--ink)}
.lotbar__line span{
  font-family:"IBM Plex Mono",ui-monospace,Menlo,monospace;font-size:11px;
  color:var(--steel);font-weight:500;font-variant-numeric:tabular-nums;
}
.lot__empty{width:min(100%,1240px);margin:0 auto;padding:0 var(--gut) 48px;color:var(--steel)}

/* Availability on a listing card. Only non-in-stock states render one, so this is
   always the exception rather than a label on every tile. */
.tag__avail{margin:.35rem 0 0;font-size:.72rem;letter-spacing:.06em;text-transform:uppercase;font-weight:600}
.tag__avail--warn{color:#8a5a06}
.tag__avail--gone{color:#a32219}
.tag__avail--ok{color:#1f6042}

/* ---- article furniture -------------------------------------------------
   Added because the writing was already well structured and the page showed
   none of it: seven headings per piece, 839 words, and nothing between the
   standfirst and an unbroken column of text. None of this touches the copy. */

/* The subject, once, as a band. Not a hero: the template's whole argument is
   that the reading comes first, so this sets context and gets out of the way. */
.post__lead{
  /* Held to the reading column, NOT full-bleed. The first version had no width cap
     and a 21:9 crop, which on a desktop screen became a 670px photograph that filled
     the viewport and pushed the article off it -- precisely the "shouted over the
     text" the template was written to avoid. Subordinate to the writing is the point. */
  margin:26px var(--gut) 0;
  max-width:calc(44rem - 2 * var(--gut));
  border-top:2px solid var(--ink);
  border-bottom:1px solid var(--line);
  background:var(--bone);
  aspect-ratio:16/9;
  overflow:hidden;
}
.post__lead img{
  /* CONTAIN, not cover. These come from two sources: studio cutouts of a machine on
     white, and lifestyle photographs. Cover crops the cutouts badly -- it takes the
     wheels off a tractor to fill a 16:9 box -- and the bone ground behind a contained
     image reads as a product plate rather than as a mistake. */
  display:block;width:100%;height:100%;
  object-fit:contain;object-position:center;
  padding:10px;
}

/* Contents. Mono label and rules, matching the spec tables elsewhere on the
   site, so it reads as part of the same document rather than a widget. */
.post__toc{
  margin:30px 0 4px;
  padding:18px 20px 16px;
  background:var(--bone);
  border-top:1px solid var(--ink);
  border-bottom:1px solid var(--line);
}
.post__tocH{
  margin:0 0 10px;
  font:600 10px/1.4 "IBM Plex Mono",monospace;
  letter-spacing:.16em;text-transform:uppercase;color:var(--steel);
}
.post__tocList{
  margin:0;padding:0;list-style:none;
  counter-reset:toc;
  column-gap:34px;
}
@media (min-width:720px){ .post__tocList{columns:2} }
.post__tocList li{
  counter-increment:toc;
  break-inside:avoid;
  padding:5px 0;
  display:grid;grid-template-columns:2em 1fr;gap:10px;align-items:baseline;
}
.post__tocList li::before{
  content:counter(toc,decimal-leading-zero);
  font:400 10px/1.6 "IBM Plex Mono",monospace;
  letter-spacing:.1em;color:var(--steel);
}
.post__tocList a{
  color:var(--ink);text-decoration:none;
  font-size:var(--fs-sm);line-height:1.45;
  border-bottom:1px solid transparent;
}
.post__tocList a:hover,
.post__tocList a:focus-visible{border-bottom-color:var(--ink)}

/* Give the headings room to actually separate the sections they name, and a
   hairline so a skimming eye can find them. */
.post__body h2{
  margin:40px 0 12px;
  padding-top:14px;
  border-top:1px solid var(--line);
  scroll-margin-top:96px;   /* the masthead is sticky; anchors must clear it */
}
.post__body h2:first-child{margin-top:26px}

/* The opening paragraph carries the piece. Set it a size up so the article has
   a way in, the way a standfirst does on the pieces that have one. */
.post__body > p:first-of-type{
  font-size:calc(var(--fs-base) * 1.09);
  line-height:1.62;
}

/* Lists were the one structural device the writing already used (1.2 per
   article) and they rendered as plain runs. Mark them. */
.post__body ul.wp-block-list{
  margin:18px 0;padding:0;list-style:none;
}
.post__body ul.wp-block-list li{
  position:relative;padding:4px 0 4px 20px;line-height:1.55;
}
.post__body ul.wp-block-list li::before{
  content:"";position:absolute;left:0;top:.72em;
  width:7px;height:1px;background:var(--steel);
}

/* ---- byline ---- */
.post__by{
  margin:14px 0 0; font-size:var(--fs-sm); line-height:1.5; color:var(--steel);
}
.post__byName{color:var(--ink);font-weight:600}

/* ---- filed under: the link back to the category hub ---- */
.post__filed{
  margin:34px var(--gut) 0; max-width:calc(44rem - 2 * var(--gut));
  padding-top:18px; border-top:1px solid var(--line);
  display:flex; flex-direction:column; gap:10px;
}
.post__filedRow{
  margin:0; display:flex; flex-wrap:wrap; gap:8px; align-items:baseline;
}
.post__filedLab{
  font:600 10px/1.8 "IBM Plex Mono",monospace; letter-spacing:.16em;
  text-transform:uppercase; color:var(--steel); flex:none; margin-right:2px;
}
.post__cat,.post__tag{
  display:inline-block; text-decoration:none; line-height:1.5;
  font-size:var(--fs-sm); padding:3px 10px; border:1px solid var(--line);
  color:var(--ink); background:var(--paper);
}
.post__cat{
  border-color:var(--ink); font-weight:600;
}
.post__cat:hover,.post__cat:focus-visible{background:var(--ink);color:#fff}
.post__tag{color:var(--steel)}
.post__tag:hover,.post__tag:focus-visible{border-color:var(--ink);color:var(--ink)}

/* ---- sibling articles: the spokes ---- */
.post__more{
  margin:34px var(--gut) 0; max-width:calc(44rem - 2 * var(--gut));
  padding-top:20px; border-top:2px solid var(--ink);
}
.post__moreList{margin:14px 0 0;padding:0;list-style:none;display:grid;gap:2px}
.post__moreItem{background:var(--bone)}
.post__moreLink{
  display:grid; grid-template-columns:92px 1fr; gap:14px; align-items:center;
  padding:10px 12px 10px 0; text-decoration:none; color:var(--ink);
}
.post__moreLink:hover,.post__moreLink:focus-visible{background:var(--paper)}
.post__moreThumb{
  display:block; width:92px; aspect-ratio:4/3; overflow:hidden; background:var(--paper);
}
.post__moreThumb img{display:block;width:100%;height:100%;object-fit:contain;padding:5px}
.post__moreTitle{
  display:block; font-size:var(--fs-sm); line-height:1.4; font-weight:600;
  text-wrap:balance;
}
.post__moreMeta{
  display:block; margin-top:3px;
  font:400 10px/1.5 "IBM Plex Mono",monospace; letter-spacing:.1em;
  text-transform:uppercase; color:var(--steel);
}

/* ---- photographs on the stock module ---- */
.artstock__thumb{
  display:block; width:100%; aspect-ratio:4/3; overflow:hidden;
  background:var(--paper); margin-bottom:8px;
}
.artstock__thumb img{display:block;width:100%;height:100%;object-fit:contain;padding:6px}

@media (max-width:520px){
  .post__moreLink{grid-template-columns:68px 1fr;gap:11px}
  .post__moreThumb{width:68px}
}

/* ---- developer credit ---------------------------------------------------
   Deliberately quiet: the same 11px and muted grey as the copyright it sits
   under, a shade dimmer again, and underlined only on hover. A credit that
   competes with the dealership's own name in its own footer is an advert. */
.foot__legal{display:grid;gap:5px}
.foot__by{color:#71757A}
.foot__by a{
  color:#9BA0A6;text-decoration:none;
  border-bottom:1px solid transparent;
}
.foot__by a:hover,
.foot__by a:focus-visible{border-bottom-color:#9BA0A6;color:#C4C9CE}