/* PIT STOP site stylesheet: one file for every built page.
   ../IN-MOTION.md describes the design, and ../DESIGN.md holds the brand.
   The working content of each page parks in an inset Tire Black bay; the Plate page is the room between bays. */

/* ---------- tokens ---------- */
:root{
  --red:#E70014;
  --yellow:#FFF000;
  --black:#161616;
  --plate:#FAF9F6;
  --muted:#5B514B;
  --ink:#FFFDF6;
  --ink-2:#B8AEA6;
  --on-red:#FFFDF5;
  --line:color-mix(in srgb,#161616 12%,transparent);
  --dline:color-mix(in srgb,#FFFDF6 14%,transparent);
  --raised:color-mix(in srgb,#FFFDF6 12%,#161616);
  --r-band:34px;
  --r-float:26px;
  --r-card:20px;
  --r-inner:14px;
  --r-pill:999px;
  --bay-pad:40px;
  --gutter:max(24px,(100vw - 1296px) / 2);
  --out:cubic-bezier(.16,1,.3,1);
  /* Sale tab cuts. One evenodd path, no viewBox, drawn at 100% so one unit is one CSS pixel:
     the whole box, less the tab (124x56 on a card, 132x64 on the main photo) and an 8px gap. */
  --cut-card:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg'%3E%3Cpath fill-rule='evenodd' d='M0 0H9999V9999H0Z M0 0H138A14 14 0 0 0 124 14V24A32 32 0 0 1 92 56H14A14 14 0 0 0 0 70Z'/%3E%3C/svg%3E");
  --cut-main:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg'%3E%3Cpath fill-rule='evenodd' d='M0 0H9999V9999H0Z M0 0H152A20 20 0 0 0 132 20V32A32 32 0 0 1 100 64H20A20 20 0 0 0 0 84Z'/%3E%3C/svg%3E");
}

/* ---------- base ---------- */
*{box-sizing:border-box}
html{scrollbar-color:color-mix(in srgb,#161616 35%,transparent) var(--plate)}
body{margin:0;background:var(--plate);color:var(--black);font-family:Archivo,sans-serif;font-size:16px;line-height:1.55;font-variant-numeric:tabular-nums;-webkit-font-smoothing:antialiased;overflow-x:hidden}
::selection{background:var(--yellow);color:var(--black)}
img{display:block;max-width:100%}
a{color:inherit}
h1,h2,h3,p,dl,dd,ul{margin:0}
p{text-wrap:pretty}
.wrap{width:min(1296px,100% - 48px);margin-inline:auto}
.nw{white-space:nowrap}
[hidden]{display:none !important}
.vh{position:absolute;width:1px;height:1px;overflow:hidden;clip-path:inset(50%);white-space:nowrap}

/* ---------- focus ---------- */
/* Plate rule on Plate, the Tire Black rule on dark ground, and the Plate rule again inside a Plate card or menu on dark ground. */
:focus-visible{outline:3px solid var(--black);outline-offset:3px;box-shadow:0 0 0 3px var(--yellow)}
.zone :focus-visible,.bay :focus-visible,.strip :focus-visible,footer :focus-visible{outline-color:var(--yellow);box-shadow:none}
.bay .lit :focus-visible,.zone .sub :focus-visible,.zone .sheet :focus-visible{outline-color:var(--black);box-shadow:0 0 0 3px var(--yellow)}

/* ---------- type steps ---------- */
/* the wide face (125%) is a signal: the page title, a car's name, a price and the Sale! tab. Every other step runs at 100% */
.display,.section{font-weight:850;text-transform:uppercase;line-height:.95}
/* never wider than the screen: between 641 and 705 a 72px INSPECTIONS would run off the right edge */
.display{font-size:min(72px,10.2vw);font-stretch:125%;letter-spacing:-.02em}
/* at 100% the space is narrow, so the tracking opens and the word gaps stay clear */
.section{font-size:44px;letter-spacing:-.01em;word-spacing:.04em}
.headline{font-weight:800;letter-spacing:0;word-spacing:.05em;line-height:1.1;font-size:21px;text-wrap:balance}
/* a car's name: the headline step at DESIGN.md's own width and tracking */
.name{font-stretch:125%;letter-spacing:-.01em;word-spacing:0}
.label,.tag,.foot h2{font-size:13px;font-weight:600;letter-spacing:.08em;text-transform:uppercase;line-height:22px}
.lede{font-size:18px;line-height:1.55;color:var(--muted);max-width:56ch}
/* a name written with lower case (the TOYOTA b B) keeps its case inside a capitals step */
.as-written{text-transform:none}

/* ---------- pills and links ---------- */
.pill{display:inline-flex;align-items:center;gap:14px;min-height:52px;padding:5px 5px 5px 24px;border-radius:var(--r-pill);background:var(--black);color:var(--ink);font:700 16px/1 Archivo,sans-serif;text-decoration:none;transition:background-color .15s,color .15s,box-shadow .15s}
.pill .disc{width:42px;height:42px;border-radius:50%;background:var(--red);display:grid;place-items:center;flex:none;transition:transform .3s var(--out)}
.pill .disc svg{width:16px;height:16px;stroke:var(--on-red);fill:none;stroke-width:2.4}
.pill:hover{background:var(--yellow);color:var(--black)}
.pill:hover .disc{transform:rotate(45deg)}
.zone .pill,.strip .pill{background:var(--raised)}
.zone .pill:hover,.strip .pill:hover{background:var(--yellow);color:var(--black)}
.pill.wide{display:flex;width:100%;justify-content:space-between}
/* ghost back pill, on Plate */
.back{display:inline-flex;align-items:center;gap:10px;min-height:44px;padding:0 18px;border-radius:var(--r-pill);box-shadow:inset 0 0 0 2px var(--black);font:700 16px/1 Archivo,sans-serif;text-decoration:none;transition:background-color .15s,box-shadow .15s}
.back svg{width:18px;height:18px;stroke:currentColor;fill:none;stroke-width:2.4}
.back:hover{background:var(--yellow);box-shadow:inset 0 0 0 2px var(--yellow)}
.tlink{display:inline-flex;align-items:center;min-height:44px;font-weight:600;text-decoration:underline;text-decoration-thickness:1px;text-underline-offset:3px;transition:background-color .15s}
.tlink:hover{background:var(--yellow);color:var(--black)}

/* ---------- top zone: the header only ---------- */
.zone{position:relative;z-index:20;background:var(--black);color:var(--ink);border-radius:0 0 var(--r-band) var(--r-band);caret-color:var(--ink)}
.bar{display:flex;align-items:center;gap:28px;height:88px}
.logo{display:block;border-radius:8px;overflow:hidden;flex:none}
.logo img{height:54px;width:auto}
nav.menu{display:flex;gap:2px;margin-left:auto}
.menu>a,.menu summary{display:inline-flex;align-items:center;min-height:44px;padding:0 14px;border-radius:var(--r-pill);font-weight:500;text-decoration:none;cursor:pointer;list-style:none;transition:background-color .15s,color .15s}
.menu summary::-webkit-details-marker{display:none}
.menu summary::after{content:"";width:7px;height:7px;border-right:2px solid currentColor;border-bottom:2px solid currentColor;transform:rotate(45deg) translate(-2px,-2px);margin-left:10px}
.menu>a:hover,.menu summary:hover,.menu details[open] summary{background:var(--yellow);color:var(--black)}
.menu>[aria-current],.menu summary.here{background:var(--yellow);color:var(--black);font-weight:700}
.menu details{position:relative}
.sub{color:var(--black);position:absolute;top:calc(100% + 8px);left:0;min-width:220px;padding:8px;display:grid;background:var(--plate);border:1px solid var(--line);border-radius:var(--r-card);box-shadow:0 16px 40px -20px color-mix(in srgb,#161616 40%,transparent)}
.sub a{display:flex;align-items:center;min-height:44px;padding:0 14px;border-radius:var(--r-pill);text-decoration:none;transition:background-color .15s}
.sub a:hover,.sub a[aria-current="page"]{background:var(--yellow)}
.sub a[aria-current="page"]{font-weight:700}
.burger{display:none}

/* ---------- title block, on Plate ---------- */
.top{padding-top:72px}
.top .back{margin-bottom:28px}
.titlerow{display:grid;grid-template-columns:7fr 5fr;gap:24px 56px;align-items:end}
.titlerow .lede{padding-bottom:4px}
/* section heading: the bar runs in from the screen edge */
.sh{position:relative;padding-bottom:22px}
.sh::after{content:"";position:absolute;left:calc(-1 * var(--gutter));bottom:0;height:5px;width:calc(var(--gutter) + min(360px,60%));background:currentColor;transform-origin:left;border-radius:0 3px 3px 0}

/* ---------- the bay ---------- */
/* The ground is a layer behind the contents, so it can settle while what is parked inside stays still. */
.bay{position:relative;isolation:isolate;color:var(--ink);padding:var(--bay-pad);margin-top:56px}
.bay::before{content:"";position:absolute;inset:0;z-index:-1;background:var(--black);border-radius:var(--r-band);clip-path:inset(0 round var(--r-band))}
.bay .sh{margin-bottom:28px}
.bay .sh::after{left:calc(-1 * var(--bay-pad));width:calc(var(--bay-pad) + min(360px,60%))}
.bay-intro{font-size:18px;color:var(--ink-2);max-width:56ch;margin-bottom:28px}
.bay-rule{margin-top:36px;padding-top:36px;border-top:1px solid var(--dline)}
.bay-rule p{font-size:18px;color:var(--ink-2);max-width:68ch}
.bay-rule b{color:var(--ink);font-weight:700}
.lit{background:var(--plate);color:var(--black);border-radius:var(--r-card)}

/* ---------- specs and price ---------- */
.specs{display:flex;gap:28px}
.specs dt{color:var(--muted)}
.specs dd,.spec{font-size:15px;font-weight:600;line-height:22px}
.price{display:flex;align-items:baseline;gap:12px;flex-wrap:wrap}
.price b{font-weight:850;font-stretch:125%;letter-spacing:-.02em;font-size:36px;line-height:1;color:var(--red)}
.price s{font-size:15px;font-weight:600;line-height:22px;color:var(--muted)}

/* ---------- car card: the disc parks in a notch of the bay's own black ---------- */
.grid{display:grid;grid-template-columns:repeat(3,1fr);gap:18px}
.car{position:relative;display:flex;flex-direction:column;background:var(--plate);color:var(--black);border-radius:var(--r-card);padding:8px;text-decoration:none}
.car:focus-visible{outline-offset:4px}
.car .ph{position:relative;aspect-ratio:4/3;border-radius:var(--r-inner);overflow:hidden}
.car .ph img{position:absolute;inset:0;width:100%;height:100%;object-fit:cover}
.car .ph .alt{opacity:0;transition:opacity .25s linear}
.car:hover .ph .alt,.car:focus-visible .ph .alt{opacity:1}
.car .tx{flex:1;display:flex;flex-direction:column;gap:14px;padding:16px 12px 10px}
.car .price{margin-top:auto;padding-top:14px;border-top:1px solid var(--line);margin-right:52px}
/* the notch reaches 1px past the card corner, so no light arc of the card shows around its outer curve */
.notch{position:absolute;right:-1px;bottom:-1px;width:70px;height:70px;border-radius:50% 0 var(--r-card) 0;background:var(--black);display:grid;place-items:center}
.notch i{width:44px;height:44px;border-radius:50%;background:var(--black);box-shadow:inset 0 0 0 1px var(--dline);display:grid;place-items:center;transition:transform .3s var(--out),background-color .15s}
.notch svg{width:16px;height:16px;stroke:var(--ink);fill:none;stroke-width:2.4;transition:stroke .15s}
.car:hover .notch i,.car:focus-visible .notch i{background:var(--yellow);box-shadow:none;transform:rotate(45deg)}
.car:hover .notch svg,.car:focus-visible .notch svg{stroke:var(--black)}

/* ---------- sale tab ---------- */
/* A Race Red corner piece at the photo's upper left, opposite the disc notch.
   The photo box is cut away under it, so nothing is laid on the photo, and the cut holds when the photo swaps. */
.sale{position:absolute;top:0;left:0;width:124px;height:56px;border-radius:var(--r-card) 0 24px 0;background:var(--red);color:var(--on-red);display:grid;place-items:center;font:800 21px/1 Archivo,sans-serif;font-stretch:125%;letter-spacing:-.01em}
.car .ph.cut{-webkit-mask:var(--cut-card) 0 0/100% 100% no-repeat;mask:var(--cut-card) 0 0/100% 100% no-repeat}
.main.cut{-webkit-mask:var(--cut-main) 0 0/100% 100% no-repeat;mask:var(--cut-main) 0 0/100% 100% no-repeat}

/* ---------- sort and filter: one row at the top of the car bay, drawn only when the script runs ---------- */
.tools{display:none}
.js .tools{display:flex;flex-wrap:wrap;align-items:center;gap:14px 24px;margin-bottom:28px}
.chips{display:flex;flex-wrap:wrap;align-items:center;gap:8px}
.chip{appearance:none;border:0;display:inline-flex;align-items:center;min-height:44px;padding:0 18px;border-radius:var(--r-pill);background:var(--raised);color:var(--ink);font:700 15px/1 Archivo,sans-serif;cursor:pointer;transition:background-color .15s,color .15s,box-shadow .15s}
.chip:hover{box-shadow:inset 0 0 0 2px var(--yellow)}
.chip[aria-pressed="true"]{background:var(--yellow);color:var(--black);box-shadow:none}
.sep{width:1px;height:28px;background:var(--dline);margin:0 8px}
.count{margin-left:auto;display:flex;align-items:center;gap:14px;min-height:44px;color:var(--ink-2);font-size:15px}
.clear{appearance:none;border:0;background:none;color:var(--ink);font:600 15px/1 Archivo,sans-serif;min-height:44px;padding:0 6px;border-radius:8px;text-decoration:underline;text-decoration-thickness:1px;text-underline-offset:3px;cursor:pointer;transition:background-color .15s,color .15s}
.clear:hover{background:var(--yellow);color:var(--black)}
.sort{position:relative;display:inline-flex;align-items:center}
.sort select{appearance:none;border:0;min-height:44px;padding:0 50px 0 20px;border-radius:var(--r-pill);background:var(--raised);color:var(--ink);font:700 15px/1 Archivo,sans-serif;cursor:pointer;transition:box-shadow .15s}
.sort select:hover{box-shadow:inset 0 0 0 2px var(--yellow)}
.sort option{background:var(--plate);color:var(--black)}
.sort .chev{position:absolute;right:18px;width:16px;height:16px;stroke:var(--ink);fill:none;stroke-width:2.4;pointer-events:none}
.none{display:grid;justify-items:start;gap:20px;padding:40px 0 16px}

/* ---------- one car: gallery on the bay floor, facts on a lit Plate card ---------- */
.detail{display:grid;grid-template-columns:7fr 5fr;gap:18px;align-items:start}
.gallery{position:relative}
.main{aspect-ratio:4/3;border-radius:var(--r-card);overflow:hidden}
.main img{width:100%;height:100%;object-fit:cover}
.thumbs{display:grid;grid-template-columns:repeat(6,1fr);gap:12px;margin-top:12px;padding:0;list-style:none}
.thumbs button{display:block;width:100%;padding:0;border:0;background:none;cursor:pointer;aspect-ratio:4/3;border-radius:var(--r-inner);overflow:hidden;opacity:.64;transition:opacity .15s}
.thumbs button:hover,.thumbs button[aria-current="true"]{opacity:1}
.thumbs button[aria-current="true"]{outline:3px solid var(--yellow);outline-offset:3px}
/* keyboard focus on a thumbnail is On Black, so it never looks like the selected photo */
.bay .thumbs button:focus-visible{outline:3px solid var(--ink);outline-offset:3px}
.thumbs img{width:100%;height:100%;object-fit:cover}
.facts{padding:32px;display:grid;gap:24px}
.facts ul{list-style:none;padding:0;display:grid;grid-template-columns:1fr 1fr;column-gap:24px;border-top:1px solid var(--line)}
.facts li{font-size:15px;font-weight:600;line-height:22px;padding:10px 0;border-bottom:1px solid var(--line)}
/* an odd last fact takes the full row, so both columns end on the same hairline */
.facts li:last-child:nth-child(odd){grid-column:1/-1}
.facts .tlink{justify-self:start;margin:-6px 0}

/* ---------- text page: intro row on Plate, options in the bay ---------- */
.intro{display:grid;grid-template-columns:5fr 7fr;gap:64px;align-items:start;padding-top:56px}
.intro+.bay{margin-top:120px}
.photo{position:relative}
.photo .img{aspect-ratio:4/3;border-radius:var(--r-card);overflow:hidden}
.photo .img img{width:100%;height:100%;object-fit:cover;object-position:28% 52%}
.tag{display:inline-flex;margin-top:12px;border-radius:var(--r-pill);padding:4px 12px;border:1px solid var(--line);color:var(--muted)}
.seal{position:absolute;left:-14px;bottom:24px;width:188px;height:188px;border-radius:50%;background:var(--plate);display:grid;place-items:center;text-align:center;box-shadow:0 0 0 1px var(--line)}
/* over a photo with a tag, the seal clears the tag (12px gap plus its 30px height) */
.photo .seal{bottom:calc(24px + 12px + 30px)}
.seal b{display:block;font-weight:850;font-size:44px;line-height:.95;letter-spacing:-.02em}
.seal span{display:block;margin-top:8px}
.copy{display:grid;gap:18px;max-width:68ch}
.copy p{font-size:18px}
.copy .headline{margin-top:10px}
.options{display:grid;grid-template-columns:7fr 5fr;gap:18px}
.option{padding:32px;border-radius:var(--r-card);display:grid;gap:14px;align-content:start}
.option.unlit{box-shadow:inset 0 0 0 1px var(--dline)}
.option .section{margin-bottom:6px}
.option p{font-size:18px}
.option.unlit p{color:var(--ink-2)}

/* ---------- call strip ---------- */
.strip{background:var(--black);color:var(--ink);border-radius:var(--r-float);display:grid;grid-template-columns:auto 1fr auto;gap:28px;align-items:center;padding:22px;margin-top:56px}
.strip p{margin-top:4px;color:var(--ink-2)}
.strip .ic{width:64px;height:64px;border-radius:50%;background:var(--raised);display:grid;place-items:center}
.strip .ic svg{width:26px;height:26px;stroke:var(--ink);fill:none;stroke-width:2}
.strip .pill{white-space:nowrap}
.btns{display:flex;gap:12px;flex-wrap:wrap}

/* ---------- footer ---------- */
footer{background:var(--black);color:var(--ink);border-radius:var(--r-band) var(--r-band) 0 0;padding:72px 0 56px;margin-top:120px;caret-color:var(--ink)}
.foot{display:grid;grid-template-columns:auto 1fr 1fr 1fr;gap:48px}
.foot .fl{display:block;border-radius:8px;overflow:hidden;align-self:start}
.foot .fl img{height:80px;width:auto}
/* the logo's caption is the site's tagline, a quiet line no wider than the logo; it adds no width of its own to the column */
.foot .brand{justify-self:start;align-self:start}
.foot .tagline{contain:inline-size;margin:14px 0 0;color:var(--ink-2);font-size:15px;line-height:22px}
.foot h2{color:var(--ink-2);margin:0 0 10px}
.foot ul{list-style:none;padding:0}
.foot li a{display:inline-flex;min-height:44px;align-items:center;text-decoration:none;transition:color .15s}
.foot li a:hover{color:var(--yellow)}
.foot p{color:var(--ink-2);max-width:30ch;margin-bottom:6px}

/* ---------- motion ---------- */
/* Hidden starting states apply only after the script adds .js, so without script everything shows at rest.
   Headings settle from pale to full and their bar runs in. The bay's ground opens to its edges; what is parked inside never moves. */
.js .sh:not(.on)>:is(h1,h2){color:color-mix(in srgb,currentColor 22%,transparent)}
.js .sh>:is(h1,h2){transition:color .9s var(--out)}
.js .sh::after{transform:scaleX(0);transition:transform .9s var(--out) .1s}
.js .sh.on::after{transform:none}
.js .bay::before{transition:clip-path .9s var(--out)}
.js .bay:not(.on)::before{clip-path:inset(14px round 48px)}
@media (prefers-reduced-motion:reduce){
  .js .sh>:is(h1,h2){transition:color .4s linear}
  .js .sh::after{transform:none;transition:none}
  .js .bay::before,.js .bay:not(.on)::before{clip-path:inset(0 round var(--r-band));transition:none}
  .pill .disc,.notch i{transition:background-color .15s}
  .pill:hover .disc,.car:hover .notch i,.car:focus-visible .notch i{transform:none}
}

/* ---------- 1100 and below ---------- */
@media (max-width:1100px){
  :root{--bay-pad:28px}
  .titlerow{grid-template-columns:1fr}
  .grid{grid-template-columns:repeat(2,1fr)}
  .detail,.intro,.options{grid-template-columns:1fr}
  .intro{gap:40px}
  .photo{max-width:640px}
  .strip{grid-template-columns:auto 1fr}
  .strip .btns{grid-column:1/-1}
  .foot{grid-template-columns:1fr 1fr}
}

/* ---------- 820 and below: the menu becomes a sheet ---------- */
@media (max-width:820px){
  nav.menu,.bar>.pill{display:none}
  .burger{display:block;margin-left:auto}
  .burger summary{list-style:none;display:inline-flex;align-items:center;min-height:48px;padding:0 20px;border-radius:var(--r-pill);background:var(--raised);color:var(--ink);font-weight:700;cursor:pointer;transition:background-color .15s,color .15s}
  .burger summary::-webkit-details-marker{display:none}
  .burger[open] summary{background:var(--yellow);color:var(--black)}
  .sheet{color:var(--black);position:absolute;left:12px;right:12px;top:80px;padding:10px;display:grid;background:var(--plate);border:1px solid var(--line);border-radius:var(--r-float);box-shadow:0 24px 48px -24px color-mix(in srgb,#161616 50%,transparent)}
  .sheet a:not(.pill){display:flex;align-items:center;min-height:48px;padding:0 14px;border-radius:var(--r-pill);text-decoration:none}
  .sheet a.in{padding-left:30px;color:var(--muted)}
  .sheet a:not(.pill):hover{background:var(--yellow);color:var(--black)}
  .sheet a[aria-current]{background:var(--yellow);color:var(--black);font-weight:700}
  .sheet .pill{margin-top:8px;background:var(--black)}
}

/* ---------- phone, 640 and below ---------- */
@media (max-width:640px){
  :root{--bay-pad:12px;--r-band:26px;--gutter:12px}
  .wrap{width:calc(100% - 24px)}
  .bar{height:76px}
  .logo img{height:44px}
  .top{padding-top:44px}
  .display{font-size:min(44px,10.2vw)}
  .section{font-size:32px}
  .lede,.copy p,.option p,.bay-intro,.bay-rule p{font-size:16px}
  /* the bay */
  .bay{margin-top:40px}
  .bay-intro,.bay-rule,.bay .sh{margin-inline:10px}
  .bay .sh::after{left:calc(-1 * var(--bay-pad) - 10px);width:calc(var(--bay-pad) + 10px + min(360px,60%))}
  .price b{font-size:32px}
  /* car list */
  .grid{grid-template-columns:1fr;gap:12px}
  .js .tools{display:grid;gap:10px;margin:10px 10px 20px}
  .chips{flex-wrap:nowrap;overflow-x:auto;scrollbar-width:none;margin:-7px -22px;padding:7px 22px}
  .chips::-webkit-scrollbar{display:none}
  .chip{flex:none}
  .sort,.sort select{width:100%}
  .count{margin-left:0;justify-content:space-between}
  .none{padding:24px 10px 16px}
  /* one car */
  .facts{padding:22px}
  .facts ul{grid-template-columns:1fr}
  /* the row's 6px padding leaves room for the selected ring; scroll-padding keeps snapping from scrolling that room away */
  .thumbs{display:flex;overflow-x:auto;scroll-snap-type:x mandatory;scroll-padding-inline:6px;scrollbar-width:none;padding:6px;margin:6px -6px 0}
  .thumbs::-webkit-scrollbar{display:none}
  .thumbs li{flex:0 0 30%;scroll-snap-align:start}
  /* text page */
  .intro{padding-top:40px}
  .intro+.bay{margin-top:80px}
  .seal{width:128px;height:128px;left:-6px;bottom:6px}
  .photo .seal{bottom:calc(6px + 12px + 30px)}
  .seal b{font-size:32px}
  .seal span{margin-top:4px;letter-spacing:.04em}
  .option{padding:22px}
  /* call strip and footer */
  .strip{grid-template-columns:1fr;margin-top:40px}
  .strip .btns{flex-direction:column}
  .strip .btns .pill{width:100%;justify-content:space-between}
  footer{margin-top:80px;border-radius:26px 26px 0 0}
  .foot{grid-template-columns:1fr;gap:28px}
}

/* ================================================================
   Page parts. Each page's own rules, scoped by its body class so none of them reaches another page:
   body.home, body.services, .page-insurance, .page-road-taxes, .page-warranty, .page-rentals, .page-contact and .adm.
   They sit after the shared rules and their breakpoints, the order they loaded in as separate files, so they win the same way.
   ================================================================ */

/* ---------- Homepage (index.html) ---------- */
/* The v3 In Motion homepage, kept, with one Dark Bay addition: the three newest cars park in a Tire Black bay after the
   sales pitch, so the buy half ends on real cars before the page turns to repair. generate.py writes those three cards. */
/* the Tire Black top zone runs on behind the photo band, so the band crosses the zone's lower edge */
body.home{position:relative}
body.home::before{content:"";position:absolute;left:0;right:0;top:0;z-index:-1;height:calc(88px + max(360px,min(60vh,560px)) * .62);background:var(--black);border-radius:0 0 var(--r-band) var(--r-band)}
body.home .zone{border-radius:0}
/* blocks waiting to slide in sit 48px to the right; clip them so the page never scrolls sideways */
body.home main{overflow-x:clip}
body.home .hsec{padding-top:120px}
body.home .hsec .sh{margin-bottom:44px}
body.home .section{text-wrap:balance}
body.home .blg{font-size:18px;max-width:56ch}

/* hero: the pole-sign band, and the info strip pulled in over its lower edge; the whole Call cell is one link */
body.home .hero{position:relative}
body.home .band{border-radius:var(--r-band);overflow:hidden;height:min(60vh,560px);min-height:360px}
body.home .band img{width:100%;height:100%;object-fit:cover;object-position:50% 30%}
body.home .istrip{position:relative;margin:-58px 40px 0 auto;width:min(1080px,calc(100% - 40px));background:var(--black);color:var(--ink);border-radius:var(--r-float);display:grid;grid-template-columns:1.3fr 1.2fr 1fr;padding:18px 18px 18px 26px;box-shadow:0 24px 48px -28px color-mix(in srgb,#161616 70%,transparent)}
body.home .istrip .cell{display:flex;align-items:center;gap:14px;padding:4px 20px}
body.home .istrip .cell+.cell{border-left:1px solid var(--dline)}
body.home .istrip .cell:nth-child(2){border-right:1px solid var(--dline)}
body.home .istrip .cell.call{border-left:0}
body.home .istrip .ic{width:48px;height:48px;border-radius:50%;background:var(--raised);display:grid;place-items:center;flex:none}
body.home .istrip .ic svg{width:20px;height:20px;stroke:var(--ink);fill:none;stroke-width:2}
body.home .istrip .ic.red{background:var(--red)}
body.home .istrip .ic.red svg{stroke:var(--on-red)}
body.home .istrip .label{display:block;color:var(--ink-2);line-height:18px}
body.home .istrip .v{display:block;font-size:15px;font-weight:600;line-height:1.35}
body.home .istrip .call{min-height:44px;border-radius:18px;text-decoration:none}
body.home .istrip .call .v{font-weight:800;letter-spacing:0;font-size:21px;line-height:1.1;transition:color .15s}
body.home .istrip .call:hover .v{color:var(--yellow)}
body.home .istrip :focus-visible{outline-color:var(--yellow);box-shadow:none}

/* pills: the Plate kind beside the main pill, and the raised kind on dark ground */
body.home .pill.ghost{background:transparent;color:var(--black);box-shadow:inset 0 0 0 2px var(--black)}
body.home .pill.ghost:hover{background:var(--yellow);box-shadow:inset 0 0 0 2px var(--yellow)}
body.home .bay .pill,body.home .dark .pill{background:var(--raised)}
body.home .bay .pill:hover,body.home .dark .pill:hover{background:var(--yellow);color:var(--black)}

/* welcome and sales */
body.home .welcome{display:grid;grid-template-columns:5fr 7fr;gap:56px;align-items:start}
body.home .welcome .blg{margin-bottom:28px}
body.home .sales{display:grid;grid-template-columns:6fr 6fr;gap:64px;align-items:center}
body.home .sales .sh::after{left:0;width:min(360px,60%)}
body.home .stack{position:relative;min-height:520px}
body.home .stack .a,body.home .stack .b{position:absolute;border-radius:var(--r-card);overflow:hidden;box-shadow:0 0 0 12px var(--plate)}
body.home .stack .a{left:0;top:0;width:78%;aspect-ratio:4/3}
body.home .stack .b{right:0;bottom:0;width:52%;aspect-ratio:1/1}
body.home .stack img{width:100%;height:100%;object-fit:cover}
body.home .items{display:grid;gap:24px;margin-top:28px;padding-top:28px;border-top:1px solid var(--line)}
body.home .items p{margin-top:6px}

/* newest cars: the Vehicles bay and card, three across; at 1100 and below a sideways row that snaps card by card */
body.home .nc.bay{margin-top:120px}
body.home .nc .specs{flex-wrap:wrap;row-gap:8px}
body.home .nc .all{display:flex;justify-content:flex-end;margin-top:28px}

/* repair: the full-width Tire Black band with the service rail */
body.home .dark{background:var(--black);color:var(--ink);border-radius:var(--r-band);margin-top:120px;padding:96px 0 100px;caret-color:var(--ink)}
body.home .dark .sh{margin-bottom:22px}
body.home .dark :focus-visible{outline-color:var(--yellow);box-shadow:none}
body.home .bintro{font-size:18px;color:var(--ink-2);max-width:56ch;margin-bottom:40px}
body.home .rail{display:flex;gap:18px;overflow-x:auto;scroll-snap-type:x mandatory;scrollbar-width:none;padding:8px 0 8px 8px;margin:-8px 0 -8px -8px;scroll-padding-inline:8px 0}
body.home .rail::-webkit-scrollbar{display:none}
body.home .card{flex:0 0 calc((100% - 4 * 18px) / 4.35);scroll-snap-align:start;position:relative;display:flex;flex-direction:column;background:var(--plate);color:var(--black);border-radius:var(--r-card);padding:8px;text-decoration:none}
body.home .card:focus-visible{outline-offset:4px}
body.home .card .t{padding:14px 12px 12px;min-height:112px}
body.home .card .t .label{display:block;margin-top:6px;color:var(--muted)}
body.home .card .img{margin-top:auto;aspect-ratio:4/4.6;border-radius:var(--r-inner);overflow:hidden}
body.home .card .img img{width:100%;height:100%;object-fit:cover;transition:transform .5s var(--out)}
body.home .card:hover .img img{transform:scale(1.04)}
body.home .card .go{position:absolute;right:-1px;bottom:-1px;width:79px;height:79px;border-radius:50% 0 var(--r-card) 0;background:var(--black);display:grid;place-items:center}
body.home .card .go i{width:50px;height:50px;border-radius:50%;background:var(--red);display:grid;place-items:center;transition:transform .3s var(--out),background-color .15s}
body.home .card .go svg{width:18px;height:18px;stroke:var(--on-red);fill:none;stroke-width:2.4;transition:stroke .15s}
body.home .card:hover .go i,body.home .card:focus-visible .go i{background:var(--yellow);transform:rotate(45deg)}
body.home .card:hover .go svg,body.home .card:focus-visible .go svg{stroke:var(--black)}
body.home .rail-foot{display:flex;justify-content:space-between;align-items:center;gap:16px;flex-wrap:wrap;margin-top:26px}
/* the arrows need the script, so they show only when it runs; without it the rail still scrolls by touch, trackpad and Tab */
body.home .arrows{display:none;background:var(--raised);border-radius:var(--r-pill);padding:4px}
.js body.home .arrows{display:inline-flex}
body.home .arrows button{width:52px;height:44px;border:0;border-radius:var(--r-pill);background:transparent;color:var(--ink);cursor:pointer;display:grid;place-items:center;transition:background-color .15s,color .15s}
body.home .arrows button:hover{background:var(--yellow);color:var(--black)}
body.home .arrows svg{width:18px;height:18px;stroke:currentColor;fill:none;stroke-width:2.4}
body.home .two-lines{display:grid;grid-template-columns:1fr 1fr;gap:28px 48px;margin-top:56px;padding-top:36px;border-top:1px solid var(--dline)}
body.home .two-lines p{margin-top:8px;color:var(--ink-2)}

/* location */
body.home .where{display:grid;grid-template-columns:7fr 5fr;gap:18px}
body.home .where .map{display:flex;flex-direction:column;border:1px solid var(--line);border-radius:var(--r-card);overflow:hidden;background:var(--plate)}
body.home .where .map .m{padding:18px 18px 0}
body.home .where .map .p{flex:1;min-height:220px;margin:14px;border-radius:var(--r-inner);overflow:hidden}
body.home .where .map .p img{width:100%;height:100%;object-fit:cover;object-position:50% 40%}
body.home .where .info{display:flex;flex-direction:column;gap:18px;padding:32px;border:1px solid var(--line);border-radius:var(--r-card);background:var(--plate)}
body.home .where dl{display:grid;gap:14px}
body.home .where dt{color:var(--muted)}
body.home .where dd .tlink{margin-block:-11px}
body.home .where .info .btns{margin-top:auto}

/* motion (IN-MOTION, Homepage): the band settles, the strip pulls in, and marked blocks slide in once.
   The hidden starting states apply only after the script adds .js, so without script everything shows at rest. */
.js body.home .band img{animation:home-band-in 1.1s var(--out) both}
.js body.home .istrip{animation:home-pull-in .8s var(--out) .45s both}
@keyframes home-band-in{from{transform:scale(1.06)}to{transform:none}}
@keyframes home-pull-in{from{transform:translateX(140px);opacity:0}to{transform:none;opacity:1}}
.js body.home [data-in]{opacity:0;transform:translateX(48px);transition:opacity .7s var(--out),transform .7s var(--out)}
.js body.home [data-in="up"]{transform:translateY(48px)}
.js body.home [data-in].on{opacity:1;transform:none}
@media (prefers-reduced-motion:reduce){
  .js body.home .band img,.js body.home .istrip{animation:none}
  .js body.home [data-in],.js body.home [data-in="up"]{transform:none;transition:opacity .4s linear}
  body.home .card .img img,body.home .card .go i{transition:background-color .15s}
  body.home .card:hover .img img,body.home .card:hover .go i,body.home .card:focus-visible .go i{transform:none}
}

/* Homepage, 1100 and below */
@media (max-width:1100px){
  body.home .welcome,body.home .sales,body.home .where{grid-template-columns:1fr}
  body.home .welcome{gap:28px}
  body.home .stack{min-height:0;aspect-ratio:1/1.02;max-width:600px}
  body.home .istrip{grid-template-columns:1fr 1fr;margin-inline:auto;width:calc(100% - 32px)}
  body.home .istrip .cell:nth-child(2){border-right:0}
  body.home .istrip .cell:nth-child(3){grid-column:1/-1;border-left:0;border-top:1px solid var(--dline);margin-top:10px;padding-top:14px;border-radius:0 0 18px 18px}
  body.home .card{flex-basis:calc((100% - 2 * 18px) / 2.4)}
  body.home .nc .grid{display:flex;gap:18px;overflow-x:auto;scroll-snap-type:x mandatory;scrollbar-width:none;margin:-7px calc(-1 * var(--bay-pad));padding:7px var(--bay-pad);scroll-padding-inline:var(--bay-pad)}
  body.home .nc .grid::-webkit-scrollbar{display:none}
  body.home .nc .car{flex:0 0 calc((100% - 18px) / 2.2);scroll-snap-align:start}
}

/* Homepage, 640 and below */
@media (max-width:640px){
  body.home::before{height:calc(76px + max(300px,46svh) * .62);border-radius:0}
  body.home .hsec{padding-top:80px}
  body.home .hsec .sh{margin-bottom:30px}
  body.home .blg,body.home .bintro{font-size:16px}
  body.home .band{height:46svh;min-height:300px}
  body.home .band img{object-position:52% 32%}
  body.home .istrip{grid-template-columns:1fr;margin-top:-34px;width:calc(100% - 20px);padding:10px 14px}
  body.home .istrip .cell{padding:10px 4px}
  body.home .istrip .cell+.cell,body.home .istrip .cell:nth-child(3){grid-column:auto;border-left:0;border-top:1px solid var(--dline);margin-top:0;padding-top:10px;border-radius:0 0 14px 14px}
  body.home .istrip .cell:nth-child(2){border-radius:0}
  body.home .btns .pill{width:100%;justify-content:space-between}
  body.home .stack{min-height:0;aspect-ratio:1/1.02}
  body.home .nc.bay{margin-top:80px}
  body.home .nc .grid{gap:12px}
  body.home .nc .car{flex-basis:86%}
  body.home .nc .all .pill{width:100%;justify-content:space-between}
  body.home .nc .all{margin:20px 10px 10px}
  body.home .dark{margin-top:80px;padding:72px 0 76px}
  body.home .card{flex-basis:78%}
  body.home .two-lines{grid-template-columns:1fr;margin-top:40px}
  body.home .where .info{padding:22px}
}

/* ---------- All Services (services.html) ---------- */
/* Both shop service lists park in the bay on one board: the repair list lit, the other services unlit.
   The pages that have their own detail park under them as doors, each with the car card's corner notch.
   The used car list is about buying a car, not work on one, so it sits on Plate after the bay. */
/* the board: the lit repair list at left; the photo and the unlit list at right.
   The right column starts where the lede starts above the bay, so the Body Work & Paint line sits over its photo. */
body.services .board{display:grid;grid-template-columns:minmax(0,1fr) calc((100% + 2 * var(--bay-pad) - 56px) * 5 / 12 - var(--bay-pad));gap:18px}
body.services .board-card{padding:32px;border-radius:var(--r-card)}
body.services .board-card .section{margin-bottom:20px;text-wrap:balance}
body.services .board-card .lead{font-size:18px;max-width:56ch}
body.services .board-card .label{margin:28px 0 8px;color:var(--muted)}
body.services .unlit{box-shadow:inset 0 0 0 1px var(--dline);color:var(--ink)}

/* the lists: one service per hairline row, the name at 600 and any bracketed scope quiet beside it; the rows never move */
body.services .rows{list-style:none;padding:0;border-top:1px solid var(--line)}
body.services .rows li{padding:13px 0;border-bottom:1px solid var(--line);font-size:18px;line-height:1.4;font-weight:600;text-wrap:pretty}
body.services .rows .q{font-weight:400;color:var(--muted)}
body.services .unlit .rows{border-color:var(--dline)}
body.services .unlit .rows li{border-color:var(--dline)}
body.services .unlit .rows .q{color:var(--ink-2)}

/* the photo stands straight on the bay floor and takes whatever height the lit list leaves */
body.services .side{display:flex;flex-direction:column;gap:18px}
body.services .floor{margin:0;flex:1;display:flex;flex-direction:column}
body.services .floor .img{position:relative;flex:1;min-height:220px;border-radius:var(--r-card);overflow:hidden}
body.services .floor img{position:absolute;inset:0;width:100%;height:100%;object-fit:cover;object-position:50% 46%}
body.services .floor .tag{align-self:flex-start;color:var(--ink-2);border-color:var(--dline)}

/* doors: the service pages with their own detail, under a dark hairline across the bay; the notch is site.css's car card notch */
body.services .doors{list-style:none;margin:36px 0 0;padding:36px 0 0;border-top:1px solid var(--dline);display:grid;grid-template-columns:repeat(5,minmax(0,1fr));gap:18px}
body.services .door{position:relative;display:flex;min-height:120px;padding:22px 24px;border-radius:var(--r-card);background:var(--plate);color:var(--black);text-decoration:none}
body.services .door .headline{white-space:nowrap}
body.services .door:hover .notch i,body.services .door:focus-visible .notch i{background:var(--yellow);box-shadow:none;transform:rotate(45deg)}
body.services .door:hover .notch svg,body.services .door:focus-visible .notch svg{stroke:var(--black)}
body.services .door:focus-visible{outline-offset:4px}

/* what comes with a car: a Plate section after the bay, headed like the title block, with the Vehicles pill where the lede sits.
   Two columns of rows at 7 and 5, so the second column starts on the lede's line, and the rows pair up across both columns */
body.services .buy{margin-top:120px}
body.services .buy .section{text-wrap:balance}
body.services .buy .pill{justify-self:start}
body.services .buy .label{margin:48px 0 8px;color:var(--muted)}
body.services .buy .rows{display:grid;grid-template-columns:7fr 5fr;grid-template-rows:repeat(6,auto);grid-auto-flow:column;column-gap:56px}
/* the two numbers in the shuttle row call; the padding makes each one 44px tall to the finger without growing the line */
body.services .rows a{display:inline-block;padding:11px 4px;margin:-11px -4px;color:inherit;white-space:nowrap;text-decoration:underline;text-decoration-thickness:1px;text-underline-offset:3px;border-radius:6px;transition:background-color .15s}
body.services .rows a:hover{background:var(--yellow)}

@media (prefers-reduced-motion:reduce){
  body.services .door:hover .notch i,body.services .door:focus-visible .notch i{transform:none}
}

/* side by side, the lit list's rows share out whatever height the right column adds, so the two cards end together */
@media (min-width:1101px){
  body.services .board-card.lit{display:flex;flex-direction:column}
  body.services .board-card.lit .rows{flex:1;display:flex;flex-direction:column}
  body.services .board-card.lit .rows li{flex:1 0 auto;align-content:center}
}

@media (max-width:1100px){
  body.services .board{grid-template-columns:1fr}
  body.services .board-card.lit .rows{display:grid;grid-template-columns:1fr 1fr;grid-template-rows:repeat(6,auto);grid-auto-flow:column;column-gap:32px}
  body.services .side{display:grid;grid-template-columns:1fr 1fr;align-items:stretch}
  body.services .doors{grid-template-columns:repeat(3,minmax(0,1fr))}
  body.services .buy .rows{grid-template-columns:1fr 1fr;column-gap:32px}
}

@media (max-width:640px){
  body.services .board{gap:12px}
  body.services .board-card{padding:22px}
  body.services .board-card .section{margin-bottom:16px}
  body.services .board-card .lead,body.services .rows li{font-size:16px}
  body.services .board-card .label{margin-top:24px}
  body.services .board-card.lit .rows{display:block}
  body.services .side{display:flex;gap:12px}
  body.services .floor .img{flex:none;aspect-ratio:3/2;min-height:0}
  body.services .floor .tag{margin-left:10px}
  body.services .doors{grid-template-columns:1fr;gap:12px;margin-top:28px;padding-top:28px}
  body.services .door{min-height:96px;padding:22px}
  body.services .buy{margin-top:80px}
  body.services .buy .label{margin-top:32px}
  body.services .buy .rows{display:block}
}

/* ---------- Insurance, Road Taxes and Warranty ---------- */
/* What these pages need beyond the Inspections pattern. */
/* Insurance: the lede has its own name line, the JCI heading over its first sentence */
.page-insurance div.lede h2{font:inherit;font-weight:700}

/* a real lot photo carries no "Sample image" tag, so the seal drops to the photo's own foot */
:is(.page-insurance,.page-road-taxes) .photo.real .seal{bottom:24px}
/* the pole sign sits right of the seal, so the seal never covers the Chubb Insurance Japan panel */
.page-insurance .photo .img img.at-sign{object-position:10% 46%}
.page-road-taxes .photo .img img.at-lot{object-position:30% 58%}

/* Insurance: the closing claim carries one more line of its paragraph, 12px under it */
.page-insurance .copy .headline+p{margin-top:-6px}

/* Insurance: two equal options, both lit, because neither is the one to choose over the other */
.page-insurance .options.even{grid-template-columns:1fr 1fr}

/* Insurance: coverage name, the short form in the section step and the long form under it in the headline step */
.page-insurance .cov{display:grid;gap:12px;margin-bottom:6px}
.page-insurance .cov .section{display:block;margin:0}
.page-insurance .cov .headline{display:block}
:is(.page-insurance,.page-road-taxes) .option b{font-weight:700}
.page-road-taxes .option.unlit b{color:var(--ink)}

/* the fullwidth yen from content.md falls back to a CJK face with a full em of side room; pull it in to the figures */
.page-insurance .yen{margin-inline:-.22em -.14em}

/* Road Taxes: a card with no name of its own; its opening phrase stands in the headline step (normal width) and the sentence runs on under it */
.page-road-taxes .option b.lead{display:block;font-weight:800;letter-spacing:0;word-spacing:.05em;line-height:1.1;font-size:21px;text-wrap:balance;margin-bottom:10px}

/* Warranty: the card name breaks evenly, so a narrow screen never leaves "ON:" alone on its own line */
.page-warranty .option .section{text-wrap:balance}

/* Warranty: the covered parts, hairline rows on the lit card, set as the services list row */
.page-warranty .covered{list-style:none;padding:0;border-top:1px solid var(--line)}
.page-warranty .covered li{font-size:18px;font-weight:600;line-height:1.4;padding:13px 0;border-bottom:1px solid var(--line)}

/* Warranty: an unlit card that ends in the call; the call line and its pill park together at the card's foot */
.page-warranty .option.call{display:flex;flex-direction:column}
.page-warranty .option.call p{margin-top:auto;margin-bottom:4px}
.page-warranty .option.call .pill{align-self:flex-start;background:var(--raised)}
.page-warranty .option.call .pill:hover{background:var(--yellow);color:var(--black)}

@media (max-width:1100px){
  .page-insurance .options.even{grid-template-columns:1fr}
}
@media (max-width:640px){
  :is(.page-insurance,.page-road-taxes) .photo.real .seal{bottom:6px}
  .page-warranty .covered li{font-size:16px}
  .page-warranty .option.call .pill{align-self:stretch;justify-content:space-between}
  .page-road-taxes .option b.lead{display:inline;font:inherit;font-weight:700;word-spacing:normal;margin:0}
}

/* ---------- Rentals and Contact Us ---------- */
/* Both bays park a real lot photo on the bay floor beside a lit Plate card, the way the car page does;
   Contact adds the directions map across the full width of the bay above the pair. */
/* photo on the bay floor beside a lit card; the card sets the row height, the photo fills it */
:is(.page-rentals .rent,.page-contact .visit) .pair{display:grid;grid-template-columns:7fr 5fr;gap:18px}
:is(.page-rentals .rent,.page-contact .visit) .floor{position:relative;min-height:420px;border-radius:var(--r-card);overflow:hidden}
:is(.page-rentals .rent,.page-contact .visit) .floor img{position:absolute;inset:0;width:100%;height:100%;object-fit:cover}
:is(.page-rentals .rent,.page-contact .visit) .pair>.lit{padding:32px;display:flex;flex-direction:column;gap:18px}

/* Rentals: rates and fleet, then the reservation set in the content's own line breaks */
.page-rentals .rent .floor img{object-position:48% 62%}
.page-rentals .rent .fleet{font-size:18px;color:var(--muted);margin-top:-4px}
.page-rentals .rent .reserve{display:grid;gap:10px;margin-top:auto;padding-top:24px;border-top:1px solid var(--line)}
.page-rentals .rent .say+.pill{margin-bottom:6px}
/* ghost pill: the Plate kind of pill, used where a second way to reach the shop sits under the first */
.page-rentals .rent .pill.ghost{background:none;color:var(--black);box-shadow:inset 0 0 0 2px var(--black)}
.page-rentals .rent .pill.ghost:hover{background:var(--yellow);box-shadow:inset 0 0 0 2px var(--yellow)}
.page-rentals .rent .split{display:grid;grid-template-columns:1fr 1fr;gap:14px 48px}
.page-rentals .rent .split p{max-width:52ch}

/* Contact: the directions map runs the full width of the bay, its white ground multiplied into the Plate card */
.page-contact .visit .map{margin:0 0 18px;padding:18px}
.page-contact .visit .road img{width:100%;height:auto;mix-blend-mode:multiply}
.page-contact .visit .floor img{object-position:50% 40%}
.page-contact .visit .info dl{border-top:1px solid var(--line)}
.page-contact .visit .info dl>div{display:grid;grid-template-columns:112px 1fr;gap:16px;padding:10px 0;border-bottom:1px solid var(--line)}
.page-contact .visit .info dt{color:var(--muted)}
.page-contact .visit .info dd{font-size:15px;font-weight:600;line-height:22px}
.page-contact .visit .info .tlink{margin:-11px 0}
.page-contact .visit .info .pill{margin-top:auto}
/* the hours keep the content's fullwidth wave dash, drawn from a Japanese face when Archivo lacks it */
.page-contact .visit .info .fw{font-family:Archivo,"Hiragino Sans","Yu Gothic",sans-serif}

/* free shuttle strip on Contact: the pills sit inside the content's own sentence, "Call us at ... or ..." */
.page-contact .strip .btns.say{align-items:center;column-gap:14px}
.page-contact .strip .btns.say>span{color:var(--ink-2);font-size:15px}

@media (max-width:1100px){
  :is(.page-rentals .rent,.page-contact .visit) .pair{grid-template-columns:1fr}
  :is(.page-rentals .rent,.page-contact .visit) .floor{min-height:0;aspect-ratio:16/9}
}
@media (max-width:640px){
  :is(.page-rentals .rent,.page-contact .visit) .floor{aspect-ratio:4/3}
  :is(.page-rentals .rent,.page-contact .visit) .pair{gap:12px}
  :is(.page-rentals .rent,.page-contact .visit) .pair>.lit{padding:22px}
  .page-rentals .rent .split{grid-template-columns:1fr}
  .page-contact .visit .map{padding:12px;margin-bottom:12px}
  /* the map is wider than a phone: it scrolls sideways inside its card, sized so the stretch from the gate sign
     to the red star (0.384 of the map's width, 5.94 wide to 1 high) fits the card, and opens on that stretch */
  .page-contact .visit .road{overflow-x:auto;scrollbar-width:thin;scrollbar-color:color-mix(in srgb,#161616 35%,transparent) transparent;padding-bottom:8px;border-radius:var(--r-inner)}
  .page-contact .visit .road img{height:clamp(120px,calc((100vw - 88px) / 2.28),168px);width:auto;max-width:none}
  .page-contact .visit .info dl>div{grid-template-columns:1fr;gap:0}
  .page-contact .strip .btns.say{align-items:stretch;row-gap:8px}
  .page-contact .strip .btns.say>span{padding-left:4px}
}

/* ---------- Admin (admin/login, admin/cars, admin/edit) ---------- */
/* A tool for one person: Plate page, the plain Tire Black header bar, no bands, no heading bars, no reveals (IN-MOTION.md, Admin).
   The one dark surface below the header is the "On the site" preview, a slice of the bay holding the public car card. */
.adm{caret-color:var(--black)}
.adm main{padding-bottom:96px}

/* no In Motion motion on admin screens: the disc keeps still, the preview photo swaps at once, only colours change */
.adm .pill .disc,.adm .notch i{transition:background-color .15s}
.adm .pill:hover .disc,.adm .car:hover .notch i{transform:none}
.adm .car .ph .alt{transition:none}

/* header: logo, an Admin tag, and View site kept on every width */
.adm .bar{gap:20px}
.adm .who{display:inline-flex;align-items:center;height:30px;padding:0 12px;border-radius:var(--r-pill);box-shadow:inset 0 0 0 1px var(--dline);color:var(--ink-2);font-size:13px;font-weight:600;letter-spacing:.08em;text-transform:uppercase}
.adm .bar>.pill{margin-left:auto}

/* page titles: the wide display face at the section size, since a tool page needs no 72px title */
.adm .display{font-size:44px}

/* title row */
.adm .atop{display:flex;flex-wrap:wrap;align-items:flex-end;gap:12px 20px;padding-top:56px}
.adm .atop .cnt{font-size:16px;color:var(--muted);padding-bottom:2px}
.adm .atop .dock{margin-left:auto}
.adm .etop{padding-top:0}
.adm .etop .display{margin-top:22px}
.adm .etop+.grp{margin-top:40px;padding-top:0;border-top:0}

/* buttons: text buttons for quiet actions, a 2px ring for the main one in a row */
.adm .btn{appearance:none;border:0;background:none;display:inline-flex;align-items:center;justify-content:center;gap:8px;min-height:44px;padding:0 14px;border-radius:var(--r-pill);font:700 16px/1 Archivo,sans-serif;color:var(--black);text-decoration:none;white-space:nowrap;cursor:pointer;transition:background-color .15s,box-shadow .15s,color .15s}
.adm .btn svg{width:18px;height:18px;flex:none;stroke:currentColor;fill:none;stroke-width:2.2;stroke-linecap:round;stroke-linejoin:round}
.adm .btn:hover{background:var(--yellow);color:var(--black)}
.adm .btn:active{background:color-mix(in srgb,#161616 8%,var(--yellow))}
.adm .btn.ring{box-shadow:inset 0 0 0 2px var(--black);padding:0 18px}
.adm .btn.ring:hover{box-shadow:inset 0 0 0 2px var(--yellow)}
.adm .btn:disabled{opacity:.36;cursor:not-allowed;background:none;box-shadow:inset 0 0 0 2px color-mix(in srgb,#161616 40%,transparent)}
.adm .btn.on,.adm .btn.on:hover{background:var(--black);color:var(--ink);box-shadow:none;cursor:default}
.adm .btn.red{min-height:48px;padding:0 24px;background:var(--red);color:var(--on-red)}
.adm .btn.red:hover{background:var(--yellow);color:var(--black)}
.adm .btn.icon{width:44px;padding:0}
.adm .pill .disc .ck{width:18px;height:18px}

/* the sale tab at thumbnail size: the same corner piece, cut into the photo with a 6px gap */
.adm .tab{width:64px;height:28px;border-radius:var(--r-inner) 0 var(--r-inner) 0;background:var(--red);color:var(--on-red);display:grid;place-items:center;flex:none;font:800 15px/1 Archivo,sans-serif;font-stretch:125%;letter-spacing:-.01em}
.adm .th{position:relative;aspect-ratio:4/3;border-radius:var(--r-inner)}
.adm .th .ph{position:absolute;inset:0;display:block;border-radius:var(--r-inner);overflow:hidden}
.adm .th .ph img{width:100%;height:100%;object-fit:cover}
.adm .th .ph.cut{-webkit-mask:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg'%3E%3Cpath fill-rule='evenodd' d='M0 0H9999V9999H0Z M0 0H84A14 14 0 0 0 70 14A20 20 0 0 1 50 34H14A14 14 0 0 0 0 48Z'/%3E%3C/svg%3E") 0 0/100% 100% no-repeat;mask:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg'%3E%3Cpath fill-rule='evenodd' d='M0 0H9999V9999H0Z M0 0H84A14 14 0 0 0 70 14A20 20 0 0 1 50 34H14A14 14 0 0 0 0 48Z'/%3E%3C/svg%3E") 0 0/100% 100% no-repeat}
.adm .th .tab{position:absolute;top:0;left:0}

/* car list: hairline rows, not a card grid */
.adm .rows{list-style:none;padding:0;margin-top:28px;border-top:1px solid var(--line)}
.adm .row{display:grid;grid-template-columns:176px minmax(0,1fr) 250px auto;grid-template-areas:"th info price acts";gap:12px 32px;align-items:center;padding:16px 0;border-bottom:1px solid var(--line)}
.adm .row>.th{grid-area:th}
.adm .row .info{grid-area:info;min-width:0}
.adm .row .price{grid-area:price}
.adm .row .acts{grid-area:acts;display:flex;gap:4px;justify-content:flex-end}
.adm .row [data-act="sold"]{min-width:160px;justify-content:flex-start}
.adm .nm{text-wrap:wrap}
.adm .nm a{text-decoration:none;border-radius:6px;transition:background-color .15s}
/* the name's tap area reaches 11px above and below the heading, so it is at least 44px tall */
.adm .nm{position:relative}
.adm .nm a::after{content:"";position:absolute;inset:-11px 0}
.adm .nm a:hover{background:var(--yellow)}
.adm .sp{display:flex;flex-wrap:wrap;align-items:center;gap:6px 10px;min-height:26px;margin-top:6px;font-size:15px;font-weight:600;line-height:22px;color:var(--muted)}
.adm .sold{display:inline-flex;align-items:center;height:24px;padding:0 10px;border-radius:var(--r-pill);background:var(--black);color:var(--ink);font-size:13px;font-weight:600;letter-spacing:.08em;text-transform:uppercase;line-height:1}
/* sold: the tag, and the photo goes grey; the red tab and price keep their colour, since a faded red is not a brand colour */
.adm .row.is-sold .ph{filter:grayscale(1);opacity:.55}
.adm .row .price s:empty{display:none}

/* delete confirm: an inline Tire Black strip inside the row, never a modal */
.adm .confirm{grid-column:1/-1;display:flex;flex-wrap:wrap;align-items:center;gap:14px 24px;background:var(--black);color:var(--ink);border-radius:var(--r-float);padding:14px 14px 14px 26px}
.adm .confirm .headline{color:var(--ink)}
.adm .confirm p:not(.headline){margin-top:4px;color:var(--ink-2)}
.adm .confirm .acts{display:flex;gap:8px;margin-left:auto}
.adm .confirm .btn.ghost{color:var(--ink);box-shadow:inset 0 0 0 2px var(--dline);min-height:48px;padding:0 22px}
.adm .confirm .btn.ghost:hover{color:var(--black);background:var(--yellow);box-shadow:inset 0 0 0 2px var(--yellow)}
.adm .confirm :focus-visible,.adm .panel :focus-visible{outline-color:var(--yellow);box-shadow:none}
.adm .empty{display:grid;justify-items:start;gap:18px;padding:40px 0;border-bottom:1px solid var(--line)}
.adm .empty p{color:var(--muted);max-width:44ch}
.adm .out{margin-top:40px}

/* fields */
.adm .f{display:grid;gap:6px;align-content:start;min-width:0}
.adm .f>.label,.adm .f legend{color:var(--muted)}
.adm fieldset.f{border:0;margin:0;padding:0}
.adm fieldset.f legend{padding:0;margin-bottom:6px;font-size:13px;font-weight:600;letter-spacing:.08em;text-transform:uppercase;line-height:22px}
.adm .in{appearance:none;display:block;width:100%;min-height:48px;margin:0;padding:0 16px;border:0;border-radius:var(--r-inner);background:var(--plate);box-shadow:inset 0 0 0 1px var(--black);font:400 16px/1.2 Archivo,sans-serif;color:var(--black);font-variant-numeric:tabular-nums;transition:box-shadow .15s}
.adm .in:hover{box-shadow:inset 0 0 0 2px var(--black)}
.adm .in::placeholder{color:var(--muted);opacity:1}
.adm .in[aria-invalid="true"]{box-shadow:inset 0 0 0 2px var(--black)}
.adm .affix{position:relative;display:block}
.adm .affix .in{padding-left:34px}
.adm .affix .pre,.adm .affix .suf{position:absolute;top:0;bottom:0;display:flex;align-items:center;font-weight:600;color:var(--muted);pointer-events:none}
.adm .affix .pre{left:16px}
.adm .affix .suf{right:16px}
.adm .affix.sfx .in{padding-left:16px;padding-right:48px}
.adm .hint{font-size:15px;color:var(--muted);line-height:22px}
.adm .err{display:flex;align-items:center;gap:8px;font-size:15px;font-weight:600;line-height:22px}
.adm .err svg{width:18px;height:18px;flex:none;stroke:var(--black);fill:none;stroke-width:2.2;stroke-linecap:round}

/* option chips on Plate: a 1px ring, 2px on hover, Signal Yellow with a dark ring and a check when chosen */
.adm .opts{display:flex;flex-wrap:wrap;gap:8px}
.adm .opt{position:relative;display:inline-flex;align-items:center;gap:8px;min-height:44px;padding:0 18px;border-radius:var(--r-pill);box-shadow:inset 0 0 0 1px var(--black);font:700 15px/1 Archivo,sans-serif;cursor:pointer;transition:background-color .15s,box-shadow .15s}
.adm .opt input{position:absolute;opacity:0;width:1px;height:1px;margin:0}
.adm .opt svg{display:none;width:16px;height:16px;stroke:currentColor;fill:none;stroke-width:2.6;stroke-linecap:round;stroke-linejoin:round}
.adm .opt:hover{box-shadow:inset 0 0 0 2px var(--black)}
.adm .opt:has(input:checked){background:var(--yellow);box-shadow:inset 0 0 0 2px var(--black);padding-left:14px}
.adm .opt:has(input:checked) svg{display:block}
.adm .opt:has(input:focus-visible){outline:3px solid var(--black);outline-offset:3px}

/* edit layout: the form on the left, the preview and Save held in view on the right */
.adm .edit{display:grid;grid-template-columns:minmax(0,1fr) 400px;gap:0 56px;align-items:start;padding-top:40px}
.adm .grp{padding:32px 0;border-top:1px solid var(--line)}
.adm .grp:first-child{padding-top:0;border-top:0}
.adm .grp>.headline{margin-bottom:20px}
.adm .gh{display:flex;align-items:baseline;gap:14px;margin-bottom:20px}
.adm .gh .hint{margin-left:auto}
.adm .flds{display:grid;grid-template-columns:repeat(6,minmax(0,1fr));gap:22px 16px}
.adm .s2{grid-column:span 2}.adm .s3{grid-column:span 3}.adm .s4{grid-column:span 4}.adm .s6{grid-column:1/-1}
.adm .side{position:sticky;top:24px;display:grid;gap:16px}

/* what the site will do with the two prices */
.adm .note{display:flex;align-items:center;gap:14px;min-height:58px;padding:10px 18px 10px 12px;border-radius:var(--r-inner);box-shadow:inset 0 0 0 1px var(--line);font-weight:600}
.adm .note .ic{width:64px;height:28px;display:grid;place-items:center;flex:none}
.adm .note .ic svg{width:22px;height:22px;stroke:var(--black);fill:none;stroke-width:2;stroke-linecap:round}

/* photos: numbered tiles, select one, then act on it */
.adm .pics{list-style:none;padding:0;display:grid;grid-template-columns:repeat(4,minmax(0,1fr));gap:10px}
.adm .pic{appearance:none;border:0;background:none;display:grid;gap:8px;width:100%;padding:6px;border-radius:var(--r-card);color:var(--black);font:inherit;text-align:left;cursor:pointer;transition:background-color .15s,box-shadow .15s}
.adm .pic img{width:100%;aspect-ratio:4/3;object-fit:cover;border-radius:var(--r-inner)}
.adm .pic .cap{display:flex;align-items:center;gap:8px;min-height:24px;padding:0 4px;font-size:15px;font-weight:600;line-height:1}
.adm .pic:hover{box-shadow:inset 0 0 0 2px var(--black)}
.adm .pic[aria-pressed="true"]{background:var(--yellow);box-shadow:inset 0 0 0 2px var(--black)}
.adm .pic[aria-pressed="true"] .n{font-weight:850}
.adm .pt{display:inline-flex;align-items:center;height:24px;padding:0 9px;border-radius:var(--r-pill);background:var(--black);color:var(--ink);font-size:13px;font-weight:600;letter-spacing:.08em;text-transform:uppercase}
.adm .add{display:grid;gap:8px;padding:6px;border-radius:var(--r-card);cursor:pointer;transition:background-color .15s}
.adm .add .slot{aspect-ratio:4/3;border-radius:var(--r-inner);border:1px dashed color-mix(in srgb,#161616 24%,transparent);display:grid;place-content:center;justify-items:center;gap:6px;font-weight:700;transition:border-color .15s}
.adm .add .slot svg{width:24px;height:24px;stroke:var(--black);fill:none;stroke-width:2.2;stroke-linecap:round}
.adm .add:hover .slot{background:var(--yellow);border-color:var(--black)}
.adm .add:has(input:focus-visible){outline:3px solid var(--black);outline-offset:3px;box-shadow:0 0 0 3px var(--yellow)}
.adm .ptools{display:flex;flex-wrap:wrap;align-items:center;gap:8px;margin-top:14px;padding:8px 8px 8px 22px;border-radius:var(--r-float);box-shadow:inset 0 0 0 1px var(--line)}
.adm .ptools .sel{margin-right:auto;font-weight:700}
.adm .ptools .mv{display:flex;gap:4px}
.adm .ptools .do{display:flex;gap:4px}
.adm .undo{display:flex;align-items:center;gap:10px;min-height:44px;margin-top:8px;padding-left:22px;font-weight:600;color:var(--muted)}
.adm .undo .btn{color:var(--black);text-decoration:underline;text-decoration-thickness:1px;text-underline-offset:3px;padding:0 8px}

/* listing facts */
.adm .facts-ed{list-style:none;padding:0;display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:10px 16px}
.adm .facts-ed li{display:flex;gap:6px;align-items:center}
.adm .facts-ed .in{flex:1}
.adm .facts-ed+.btn{margin-top:16px}

/* the preview: a slice of the bay, holding the card exactly as the Vehicles page draws it */
.adm .panel{background:var(--black);color:var(--ink);border-radius:var(--r-float);padding:18px 18px 18px;display:grid;gap:14px}
.adm .panel .lbl{color:var(--ink-2);padding-left:6px}
.adm .panel .car{cursor:default}
.adm .panel .show-alt .ph .alt{opacity:1}
.adm .panel .chips{display:grid;grid-template-columns:1fr 1fr;gap:8px}
.adm .panel .chip{justify-content:center}
.adm .dock .pill{width:100%;justify-content:space-between}
.adm .dock button.pill{appearance:none;border:0;cursor:pointer}

/* delete car, below the form */
.adm .danger{margin-top:8px;padding-top:32px;border-top:1px solid var(--line);display:grid;gap:14px;justify-items:start}
.adm .danger .confirm{justify-self:stretch}

/* checkbox */
.adm .chk{display:inline-flex;align-items:center;gap:12px;min-height:44px;cursor:pointer;font-weight:500}
.adm .chk input{appearance:none;width:24px;height:24px;margin:0;flex:none;border-radius:7px;box-shadow:inset 0 0 0 1px var(--black);background:var(--plate) no-repeat center/16px;cursor:pointer;transition:background-color .15s,box-shadow .15s}
.adm .chk:hover input{box-shadow:inset 0 0 0 2px var(--black)}
.adm .chk input:checked{background-color:var(--black);background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cpath d='M5 12.5 10 17.5 19 7' fill='none' stroke='%23FFFDF6' stroke-width='3' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E");box-shadow:none}

/* login */
.adm .login{width:min(440px,100%);margin:0 auto;padding-top:88px}
.adm .login .display{margin-bottom:32px}
.adm .login form{display:grid;gap:22px}
.adm .pw{position:relative}
.adm .pw .in{padding-right:88px}
.adm .pw .btn{position:absolute;top:2px;right:2px;min-height:44px;padding:0 16px;font-size:15px}
.adm .login .pill{margin-top:6px}
.adm .login button.pill{appearance:none;border:0;cursor:pointer}

/* without the script, the controls that need it stay out of sight, so every control shown still works */
html:not(.js) .adm [data-js]{display:none}

/* Admin, responsive */
@media (max-width:1100px){
  .adm .edit{grid-template-columns:minmax(0,1fr) 360px;gap:0 36px}
  .adm .row{grid-template-columns:150px minmax(0,1fr) auto;grid-template-areas:"th info acts" "th price acts";gap:6px 24px}
}
@media (max-width:900px){
  .adm .edit{grid-template-columns:1fr}
  .adm .side{position:static;margin-top:8px}
  .adm .pics{grid-template-columns:repeat(3,minmax(0,1fr))}
}
@media (max-width:820px){
  .adm .bar>.pill{display:inline-flex}
}
@media (max-width:640px){
  .adm .display{font-size:32px}
  .adm .bar{gap:12px}
  .adm .bar>.pill{min-height:48px;padding:4px 4px 4px 18px;gap:10px}
  .adm .bar>.pill .disc{width:40px;height:40px}
  .adm main{padding-bottom:112px}
  .adm .atop{padding-top:32px}
  .adm .etop .display{margin-top:18px}
  /* one-handed: the main action sits in a bar at the bottom of the screen */
  .adm .dock{position:fixed;left:0;right:0;bottom:0;z-index:30;padding:12px 12px calc(12px + env(safe-area-inset-bottom));background:var(--plate);border-top:1px solid var(--line)}
  .adm .atop .dock{margin-left:0}
  .adm .row{grid-template-columns:144px minmax(0,1fr);grid-template-areas:"th info" "th price" "acts acts";gap:8px 14px;align-items:start;padding:14px 0 10px}
  .adm .row .price{align-self:end}
  .adm .row .acts{display:grid;grid-template-columns:1fr 1.35fr 1fr;gap:6px;margin-top:4px}
  .adm .row .acts .btn{padding:0 8px}
  .adm .row [data-act="sold"]{min-width:0;justify-content:center}
  .adm .row .acts .btn.ring{padding:0 8px}
  .adm .sp{margin-top:4px}
  .adm .confirm{padding:18px 14px 14px 18px}
  .adm .confirm .acts{margin-left:0;width:100%;display:grid;grid-template-columns:1fr 1fr}
  .adm .edit{padding-top:24px}
  .adm .etop+.grp{margin-top:28px}
  .adm .grp{padding:28px 0}
  .adm .flds{grid-template-columns:1fr;gap:20px}
  .adm .s2,.adm .s3,.adm .s4{grid-column:1/-1}
  .adm .gh{flex-wrap:wrap}
  .adm .pics{gap:6px}
  .adm .pic{padding:4px;gap:6px;border-radius:18px}
  .adm .pic .cap{padding:0 2px;gap:6px}
  .adm .add{padding:4px}
  .adm .ptools{padding:8px;display:grid;grid-template-columns:1fr auto;gap:8px 4px}
  .adm .ptools .sel{padding-left:12px}
  .adm .ptools .do{grid-column:1/-1;display:grid;grid-template-columns:1fr 1fr 1fr;gap:4px}
  .adm .ptools .do .btn{padding:0 6px}
  .adm .facts-ed{grid-template-columns:1fr}
  .adm .panel{padding:14px}
  .adm .login{padding-top:40px}
  .adm .login .display{margin-bottom:24px}
}
@media (prefers-reduced-motion:reduce){
  .adm .btn,.adm .opt,.adm .pic,.adm .in{transition:none}
}