/* .qcard and friends belonged to the cinematic hero, which the carousel
 * replaced. Removed rather than left to rot. */
/* shop.meiborgenterprises.com
 *
 * Two prototypes merged: the hero comes from meiborg-hero-carousel.html, the
 * body from meiborg-parts-cinematic.html. Both styled a top-level `.hero`,
 * so the cinematic hero's rules were dropped rather than left to fight the
 * carousel's for the same selector. Everything else is kept as authored.
 */

/* ===== hero carousel ==================================================== */
:root{--ink:#08080a;--yellow:#ffda00;--ff:'Archivo',Arial,sans-serif}
*{box-sizing:border-box}
body{margin:0;background:var(--ink);font-family:var(--ff);color:#fff;overflow-x:hidden}

.hero{position:relative;min-height:100svh;overflow:hidden;
  padding-top:env(safe-area-inset-top,0px)}
.hero::before{content:"";position:absolute;inset:-20%;
  background-image:radial-gradient(circle,#1b1b20 1px,transparent 1.2px);
  background-size:28px 28px;z-index:0;opacity:.85}

/* Full bleed on every size: the video (or its SVG fallback) fills the whole
   hero edge to edge; the copy sits on top of it. The desktop split is gone. */
.slide{position:absolute;inset:0;opacity:0;pointer-events:none;z-index:1}
.slide.is-on{opacity:1;pointer-events:auto;z-index:2}

.copy{position:absolute;left:0;bottom:0;z-index:6;max-width:640px;
  padding:0 40px calc(104px + env(safe-area-inset-bottom,0px))}
.eyebrow{display:inline-flex;align-items:center;gap:10px;font-size:11.5px;font-weight:700;
  letter-spacing:.14em;color:var(--yellow);margin-bottom:20px}
.eyebrow i{width:28px;height:2px;background:var(--yellow);display:block;transform-origin:left}
h1{font-size:clamp(34px,5.4vw,60px);line-height:.98;letter-spacing:-.042em;
  font-weight:900;margin:0 0 20px;max-width:14ch;text-shadow:0 2px 30px rgba(6,6,8,.92)}
h1 .ln{display:block;overflow:hidden}
h1 .ln i{display:block;font-style:normal}
.lede{color:#d2d2d9;font-size:17px;line-height:1.55;max-width:46ch;margin:0 0 30px;text-shadow:0 1px 18px rgba(6,6,8,.9)}
.cta{display:flex;gap:12px;flex-wrap:wrap}
.btn{display:inline-flex;align-items:center;padding:15px 28px;font-weight:700;
  font-size:14.5px;text-decoration:none;border:2px solid transparent;transition:.2s}
.btn-y{background:var(--yellow);color:var(--ink)}
.btn-y:hover{background:#ffe642}
.btn-o{border-color:#41414b;color:#fff}
.btn-o:hover{border-color:var(--yellow);color:var(--yellow)}

.rig{position:absolute;inset:0;z-index:1;display:grid;place-items:center}
.rig svg{width:min(78vw,560px);height:auto;overflow:visible;opacity:.95}
/* The film layer. z-index 1 puts it over the SVG rig but under the mobile
 * scrim (z2) and the spec chips (z4). It stays invisible until it is actually
 * playing, so a slow connection watches the SVG animation rather than a
 * stalled first frame; under reduced motion hero.js flips it straight to
 * visible with only the poster attached. */
/* No overflow clip on .rig: the video is inset:0 inside the rig box so
   object-fit:cover already crops it there, and clipping .rig would cut
   the desktop spec callouts that float outside it. */
.rig__vid{position:absolute;inset:0;width:100%;height:100%;object-fit:cover;
  z-index:1;opacity:0;transition:opacity .8s ease}
.rig__vid.is-live{opacity:1}

/* The gradient over the footage. Deliberately darker than a still would need:
   moving footage has bright frames that wash text out, so it is strong at the
   bottom where the copy sits, with a left wash for the bottom-left headline on
   desktop. Sits above the film (z1) and below the copy and specs (z6). */
.slide::after{content:"";position:absolute;inset:0;z-index:5;pointer-events:none;
  background:
    linear-gradient(to top, rgba(6,6,8,.97) 0%, rgba(6,6,8,.9) 16%, rgba(6,6,8,.62) 40%, rgba(6,6,8,.26) 66%, rgba(6,6,8,.04) 100%),
    linear-gradient(to right, rgba(6,6,8,.82) 0%, rgba(6,6,8,.34) 38%, transparent 64%)}


/* controls */
.ctrl{position:absolute;left:0;right:0;bottom:calc(30px + env(safe-area-inset-bottom,0px));
  z-index:20;display:flex;justify-content:center;gap:12px}
.dot{width:46px;height:3px;background:#2e2e36;border:0;padding:0;position:relative;overflow:hidden;cursor:pointer}
.dot span{position:absolute;inset:0;background:var(--yellow);transform:scaleX(0);transform-origin:left}
.dot[aria-current] span{transform:scaleX(1)}
.label{position:absolute;left:32px;bottom:calc(26px + env(safe-area-inset-bottom,0px));
  z-index:20;font-size:11px;font-weight:700;letter-spacing:.14em;color:#55555f}

@media(max-width:1000px){
  /* Base is already full-bleed overlay; mobile only adjusts type, drops the
     lets the copy span the width, and simplifies the scrim to vertical (no
     left wash) since the copy is full-width at the bottom. */
  .label{display:none}
  .rig svg{width:min(116%,480px)}
  .slide::after{background:linear-gradient(to top,
    rgba(6,6,8,.97) 0%, rgba(6,6,8,.9) 20%, rgba(6,6,8,.58) 46%, rgba(6,6,8,.22) 72%, transparent 100%)}
  .copy{right:0;max-width:none;padding:0 24px calc(104px + env(safe-area-inset-bottom,0px))}
  .eyebrow{margin-bottom:13px}
  h1{max-width:none;font-size:clamp(32px,8.4vw,44px);margin-bottom:13px}
  .lede{font-size:15.5px;max-width:40ch;margin-bottom:20px}
  .cta{gap:10px}
  .btn{padding:13px 22px;font-size:14px}
}
@media(max-width:560px){
  .rig svg{width:min(124%,420px)}
  .lede{max-width:none;font-size:15px}
}
@media(prefers-reduced-motion:reduce){*{animation:none!important;transition:none!important}}

/* ===== page body ======================================================== */
/* One ground, not two.
 *
 * The carousel prototype was dark (#08080a, white type). The cinematic one
 * was a light "paper" catalogue that happened to carry its own dark hero -
 * so merging them left a dark hero sitting on a white page. The shop reads
 * as one dark page, so the paper tokens now resolve to the dark ladder that
 * file already defined for its hero: --ink-2 / --ink-3 for raised surfaces,
 * --line-dk for rules.
 *
 * --paper and --line are kept as names rather than being search-replaced
 * away: eighteen rules reference them, and a rename across all of them is
 * more ways to be wrong than one indirection. They mean "page ground" and
 * "hairline", and both are dark now.
 */
:root{
  --ink:#08080a;           /* page ground, from the carousel hero */
  --ink-2:#121217;         /* cards, rows, drawer */
  --ink-3:#1b1b22;         /* raised: thumbs, footers, input wells */
  --paper:var(--ink);      /* was #f4f4f1 */
  --paper-2:var(--ink-3);  /* was #e7e7e2 */
  --yellow:#ffda00;--blue:#0033a1;
  --text:#edeeef;          /* body copy on dark */
  --grey:#9b9ba6;          /* was #6e6e76, lifted for contrast on dark */
  --grey-2:#7c7c88;
  /* On the light ground a 1px #d6d6d0 rule sat at about 1.3:1 and read
   * fine. The same relationship inverted is invisible, so the hairline is
   * lifted to ~1.9:1 against a card. Borders are not text and 4.5:1 does not
   * apply, but a divider nobody can see is not a divider. */
  --line:#424250;          /* was #d6d6d0 */
  --line-dk:#2f2f39;       /* heavier rule, section edges */
  --ff:'Archivo','Helvetica Neue',Arial,sans-serif;
  color-scheme:dark;
}
*{box-sizing:border-box}
html{-webkit-text-size-adjust:100%;scroll-padding-top:env(safe-area-inset-top,0px)}
body{margin:0;font-family:var(--ff);background:var(--ink);color:var(--text);
  font-size:15px;line-height:1.5;overflow-x:hidden;
  padding-top:env(safe-area-inset-top,0px)}
img{max-width:100%;display:block}
button{font-family:inherit;cursor:pointer}
.tnum{font-variant-numeric:tabular-nums;font-feature-settings:"tnum" 1}
.wrap{max-width:1240px;margin:0 auto;padding:0 24px}

/* ───── top bars ───── */
.util{background:var(--ink);color:#fff;font-size:12.5px}
.util .wrap{display:flex;align-items:center;justify-content:space-between;min-height:38px;gap:16px}
.util a{color:#fff;text-decoration:none}
.util-l{display:flex;gap:22px;color:var(--grey-2)}
.util-l b{color:#fff;font-weight:600}
@media(max-width:760px){.util-l span:nth-child(2){display:none}}

.mast{background:var(--ink);color:#fff;border-bottom:3px solid var(--yellow);position:relative;z-index:30}
.mast .wrap{display:flex;align-items:center;gap:32px;min-height:84px}
.logo{display:flex;align-items:center;text-decoration:none;flex:none}
.logo img{height:46px;width:auto;display:block}
.search{flex:1;display:flex;max-width:520px;border:2px solid #34343c;background:var(--ink-2)}
.search input{flex:1;border:0;background:transparent;color:#fff;padding:11px 14px;
  font-size:14px;font-family:inherit;min-width:0}
.search input::placeholder{color:#6e6e76}
.search input:focus{outline:none;}
.search:focus-within{border-color:var(--yellow)}
.search button{border:0;background:var(--yellow);color:var(--ink);font-weight:700;padding:0 18px;font-size:13.5px}
.mast-acc{margin-left:auto;display:flex;gap:26px;font-size:13px;color:var(--grey-2)}
.mast-acc b{display:block;color:#fff;font-size:14px;font-weight:600}
@media(max-width:980px){.mast .wrap{flex-wrap:wrap;padding:14px 24px;min-height:0;gap:14px}
  .search{order:3;max-width:none;flex-basis:100%}}
@media(max-width:620px){.mast-acc{display:none}}

.nav{background:var(--ink-2);border-bottom:1px solid var(--line-dk);position:relative;z-index:30}
.nav .wrap{display:flex;gap:2px;overflow-x:auto;scrollbar-width:none}
.nav .wrap::-webkit-scrollbar{display:none}
.nav a{color:#d6d6d8;text-decoration:none;font-size:13.5px;font-weight:600;
  padding:13px 18px;white-space:nowrap;border-bottom:3px solid transparent;transition:color .2s}
.nav a:hover{color:var(--yellow)}
.nav a[aria-current]{color:var(--yellow);border-bottom-color:var(--yellow)}

/* ───── hero ───── */
h1.hero__h{font-size:clamp(34px,5.4vw,60px);line-height:.99;letter-spacing:-.04em;
  font-weight:900;margin:0 0 20px;max-width:13ch}
.btn{display:inline-flex;align-items:center;justify-content:center;padding:15px 28px;
  font-weight:700;font-size:14.5px;text-decoration:none;border:2px solid transparent;
  transition:background .2s,border-color .2s,color .2s,transform .12s}
.btn:active{transform:translateY(1px)}
.btn-y{background:var(--yellow);color:var(--ink)}
.btn-y:hover{background:#ffe642}
.btn-o{border-color:#41414b;color:#fff}
.btn-o:hover{border-color:var(--yellow);color:var(--yellow)}

/* quote card — builds itself */
@media(max-width:900px){.hero .wrap{grid-template-columns:1fr;gap:38px}.hero__h{max-width:none}}

/* ───── strip ───── */

/* ───── product marquee ─────
 * Sits directly under the stats on the same yellow, a thin texture band.
 * The track is one long row built in JS and run with GSAP; the mask fades
 * both edges to the yellow so product enters and leaves rather than popping. */
.marquee{background:var(--yellow);position:relative;z-index:2;overflow:hidden;
  padding:16px 0}
.marquee__track{display:flex;align-items:center;gap:40px;width:max-content;
  will-change:transform}
/* Explicit pixel heights on the images, not height:100% - a grid/flex child's
   percentage height does not reliably resolve against a fixed-height parent,
   and the bottles were rendering at their natural 320px and overflowing. */
.marquee__item{height:96px;flex:none;display:flex;align-items:center;justify-content:center}
.marquee__item img{height:96px;width:auto;display:block}
/* Tyres are a drawn face-on wheel (an SVG symbol), so they roll true when
   they spin. Square-framed, centred; the artwork is already round. */
.marquee__item--tyre{width:96px}
.marquee__item--tyre .mq-tyre{width:96px;height:96px;display:block;will-change:transform}
/* Edge fade to the yellow. mask takes the track to transparent at both ends;
   the yellow band shows through there. */
.marquee{-webkit-mask-image:linear-gradient(90deg,transparent 0,#000 7%,#000 93%,transparent 100%);
  mask-image:linear-gradient(90deg,transparent 0,#000 7%,#000 93%,transparent 100%)}
@media(max-width:760px){
  .marquee{padding:11px 0}
  .marquee__track{gap:30px}
  .marquee__item{height:78px}
  .marquee__item img{height:78px}
  .marquee__item--tyre{width:78px}
  .marquee__item--tyre .mq-tyre{width:78px;height:78px}
}
@media(prefers-reduced-motion:reduce){
  /* Static row: no transform, and let it sit centred rather than off to one
     side where the loop had parked it. */
  .marquee__track{justify-content:center;flex-wrap:wrap;gap:28px;width:auto;
    padding:0 24px}
  .marquee__item--tyre .mq-tyre{transform:none!important}
}

/* ───── sections ───── */
.sec{padding:60px 0}
.sec-head{display:flex;align-items:flex-end;justify-content:space-between;gap:24px;
  margin-bottom:28px;border-bottom:2px solid var(--ink);padding-bottom:14px}
.sec-head h2{font-size:clamp(25px,3.4vw,36px);letter-spacing:-.035em;margin:0;font-weight:900}
.sec-head p{margin:7px 0 0;color:var(--grey);font-size:14.5px;max-width:58ch}
.sec-head a{color:var(--ink);font-weight:700;font-size:13.5px;text-decoration:none;
  border-bottom:2px solid var(--yellow);white-space:nowrap;padding-bottom:2px}

/* ───── tires ───── */
.tires{display:grid;grid-template-columns:repeat(3,1fr);gap:1px;background:var(--line)}
.tire{background:var(--ink-2);display:flex;flex-direction:column;will-change:transform,opacity}
.tire__img{aspect-ratio:1/1;background:var(--ink);position:relative;overflow:hidden;display:grid;place-items:center}
.tire__img::after{content:"";position:absolute;inset:0;
  background-image:radial-gradient(circle,#26262c 1px,transparent 1.2px);background-size:22px 22px}
.tire__img b{position:relative;color:#3d3d46;font-size:13px;font-weight:800;letter-spacing:.06em;z-index:1}
.tire__sweep{position:absolute;inset:0;z-index:2;pointer-events:none;
  background:linear-gradient(105deg,transparent 38%,rgba(255,218,0,.17) 50%,transparent 62%);
  transform:translateX(-120%)}
.tire__body{padding:22px;flex:1;display:flex;flex-direction:column}
.tire h3{margin:0 0 5px;font-size:20px;font-weight:900;letter-spacing:-.025em}
.tire .pos{color:var(--grey);font-size:13px;margin:0 0 17px;line-height:1.45}
.spec{border-top:1px solid var(--line);padding:9px 0;display:flex;justify-content:space-between;font-size:13px}
.spec span:first-child{color:var(--grey)}
.spec span:last-child{font-weight:600}
.tire__price{margin-top:auto;padding-top:19px;display:flex;align-items:flex-end;justify-content:space-between;gap:12px}
.tire__price .from{font-size:11.5px;color:var(--grey);font-weight:600;display:block;margin-bottom:1px}
.tire__price .amt{font-size:29px;font-weight:900;letter-spacing:-.035em;line-height:1}
.tire__price .unit{font-size:12.5px;color:var(--grey);font-weight:600}
.tire__price .load{text-align:right;font-size:12.5px;color:var(--grey);font-weight:600}
.tire__price .load b{display:block;color:var(--ink);font-size:17px;font-weight:900;letter-spacing:-.025em}
.tire__add{margin-top:17px;display:flex;gap:8px}
.qty{width:74px;border:2px solid var(--line);padding:10px;font-family:inherit;font-size:14px;
  font-weight:600;text-align:center;background:var(--ink-3);color:var(--text)}
.qty:focus{outline:2px solid var(--ink);outline-offset:-2px}
.add{flex:1;border:0;background:var(--ink);color:#fff;font-weight:700;font-size:13.5px;
  padding:10px;transition:background .18s}
.add:hover{background:var(--blue)}
@media(max-width:900px){.tires{grid-template-columns:1fr}}

/* ───── lucas list (fast, no reveals) ───── */
.lhead,.lrow{display:grid;grid-template-columns:64px 1fr auto 162px;gap:16px;align-items:center}
.lhead{background:var(--ink);color:#fff;padding:11px 16px;font-size:11.5px;font-weight:700;
  letter-spacing:.06em;text-transform:uppercase}
.lrow{background:var(--ink-2);padding:13px 16px;border-bottom:1px solid var(--line);transition:background .15s}
.lrow:hover{background:var(--ink-3)}
/* Thumb holds a transparent product cutout on a dark well - no white box. */
.thumb{aspect-ratio:1;background:var(--ink-3);display:grid;place-items:center;overflow:hidden;
  border:1px solid var(--line-dk);border-radius:7px}
.c-n{min-width:0}
.pname{font-weight:700;font-size:14.5px;letter-spacing:-.01em;margin:0 0 3px}
.pmeta{color:var(--grey);font-size:12.5px;margin:0}
.pprice{font-size:19px;font-weight:900;letter-spacing:-.025em;white-space:nowrap}
.pprice small{display:block;font-size:11.5px;color:var(--grey);font-weight:600;letter-spacing:0}
.pprice.is-tbc{font-size:13.5px;font-weight:700;color:var(--grey)}
.radd{display:flex;gap:8px;align-items:center}
.stock{font-weight:700;color:#36b069}
.stock.low{color:#d59a00}.stock--out,.stock.out{color:var(--grey-2)}
@media(max-width:1000px){
  .lhead{display:none}
  /* Compact two-line card: thumb | name+meta | price (top-right) over add. */
  .lrow{grid-template-columns:52px minmax(0,1fr) auto;
    grid-template-areas:"t n p" "t n a";column-gap:12px;row-gap:8px;padding:12px 14px;align-items:center}
  .lrow .thumb{grid-area:t;width:52px;height:52px}
  .lrow .c-n{grid-area:n;align-self:center}
  .lrow .c-p{grid-area:p;align-self:center;justify-self:end;text-align:right}
  .lrow .c-a{grid-area:a;justify-self:end;align-self:center}
  .lrow .pprice{font-size:16px}
  .lrow .pmeta{font-size:11.5px;white-space:normal}
  .lrow .radd{gap:6px}
  .lrow .qty{width:44px;padding:8px 2px;text-align:center}
  .lrow .add{padding:9px 14px}
}

/* ───── flow ───── */
.flow{background:var(--ink);color:#fff}
.flow .wrap{padding:56px 24px}
.flow h2{font-size:clamp(24px,3.2vw,33px);letter-spacing:-.035em;margin:0 0 8px;font-weight:900}
.flow .lede{color:#aeaeb6;margin:0 0 36px;max-width:60ch;font-size:15.5px}
.steps{display:grid;grid-template-columns:repeat(4,1fr);gap:26px}
.step{padding-top:18px;position:relative;will-change:transform,opacity}
.step::before{content:"";position:absolute;top:0;left:0;height:3px;width:100%;
  background:var(--yellow)}
.js-on .step::before{display:none}
.step b{display:block;font-size:15.5px;font-weight:700;margin-bottom:6px}
.step p{margin:0;color:#95959d;font-size:13.5px;line-height:1.5}
@media(max-width:860px){.steps{grid-template-columns:1fr 1fr;gap:22px}}
@media(max-width:520px){.steps{grid-template-columns:1fr}}

/* ───── drawer ───── */
.drawer{position:fixed;right:24px;bottom:24px;width:342px;background:var(--ink-2);
  box-shadow:0 22px 54px rgba(0,0,0,.3);border-top:4px solid var(--yellow);z-index:40}
.drawer__head{display:flex;align-items:center;gap:10px;
  padding:0 14px 0 0;border-bottom:1px solid var(--line)}
/* The toggle carries the whole bar so the tap target is the bar, not a chevron.
   Reset the button chrome rather than styling a div to look clickable. */
.drawer__toggle{flex:1;min-width:0;display:flex;align-items:center;gap:10px;
  padding:13px 0 13px 18px;background:none;border:0;color:inherit;font:inherit;
  text-align:left;cursor:pointer}
.drawer__toggle b{font-size:14px;font-weight:900;white-space:nowrap}
.drawer__toggle #dcount{font-size:12px;color:var(--grey);font-weight:600;white-space:nowrap}
.drawer__toggle:focus-visible{outline:2px solid var(--yellow);outline-offset:-2px}
/* Subtotal rides in the head only when collapsed - expanded, the foot owns it
   and two copies of the same number competing is how they drift apart. */
.dmini{margin-left:auto;font-size:14px;font-weight:900;display:none}
.dchev{flex:none;color:var(--grey);transition:transform .22s ease}
.drawer.is-collapsed .dmini{display:block}
.drawer.is-collapsed .dchev{transform:rotate(180deg)}
.drawer.is-collapsed #dpanel{display:none}
.drawer.is-collapsed .drawer__head{border-bottom:0}
/* Quiet on purpose: a text link, not a second button arguing with Request
   quote. It only appears once there is something to clear. */
.dclear{flex:none;background:none;border:0;padding:6px 2px;font:inherit;
  font-size:11.5px;font-weight:600;color:var(--grey);text-decoration:underline;
  text-underline-offset:3px;cursor:pointer}
.dclear:hover,.dclear:focus-visible{color:var(--text)}
.dclear:focus-visible{outline:2px solid var(--yellow);outline-offset:2px}
.drawer.is-collapsed .dclear{display:none}
/* Undo replaces the head while it is up, so it cannot be scrolled past.
 *
 * [hidden] has to be restated: the attribute's UA rule is display:none, and
 * any author display declaration beats it. Without this the bar was invisible
 * but still 56px tall, which is most of what a collapsed drawer should be. */
[hidden]{display:none!important}
.dundo{display:flex;align-items:center;justify-content:space-between;gap:12px;
  padding:12px 14px 12px 18px;background:var(--ink-3);font-size:13px}
.dundo__btn{background:var(--yellow);color:var(--ink);border:0;font:inherit;
  font-weight:800;font-size:12px;padding:7px 14px;cursor:pointer}
.dundo__btn:focus-visible{outline:2px solid var(--text);outline-offset:2px}
.vh{position:absolute;width:1px;height:1px;overflow:hidden;clip:rect(0 0 0 0);white-space:nowrap}
.drawer__body{max-height:208px;overflow-y:auto}
.drawer__empty{padding:26px 18px;color:var(--grey);font-size:13.5px;line-height:1.5}
.drow{display:grid;grid-template-columns:1fr auto auto;gap:10px;align-items:center;
  padding:11px 10px 11px 18px;border-bottom:1px solid var(--line);font-size:13px}
/* Per-line removal. Quiet until the row is touched, but always a real 28px
   target rather than a hairline x that only a mouse can hit. */
.drow__rm{width:28px;height:28px;display:grid;place-items:center;background:none;
  border:0;padding:0;color:var(--grey-2);font:inherit;font-size:15px;line-height:1;
  cursor:pointer;opacity:.65;transition:opacity .15s,color .15s}
.drow:hover .drow__rm,.drow__rm:focus-visible{opacity:1;color:var(--text)}
.drow__rm:focus-visible{outline:2px solid var(--yellow);outline-offset:-2px}
@media(hover:none){.drow__rm{opacity:1}}
.drow small{display:block;color:var(--grey);font-size:11.5px;margin-top:1px}
.drow b{font-weight:700}
.drawer__foot{padding:15px 18px;background:var(--paper-2)}
.dsum{display:flex;justify-content:space-between;align-items:baseline;margin-bottom:12px}
.dsum b{font-size:22px;font-weight:900;letter-spacing:-.025em}
.dsum span{font-size:12.5px;color:var(--grey);font-weight:600}
.drawer__foot .btn{width:100%;padding:12px}
.dnote{font-size:11px;color:var(--grey);margin:9px 0 0;line-height:1.4}
@media(max-width:1040px){
  .drawer{right:0;left:0;bottom:0;width:auto;border-top-width:3px;
    padding-bottom:env(safe-area-inset-bottom,0px)}
  /* The head used to be hidden here and the foot shown, which left a fixed
     bar about 130px tall across the bottom of every page with no way to get
     rid of it. It is now the collapse control, so it stays and the panel is
     what gives way. */
  .drawer__body{max-height:38vh}
  .drawer__toggle{padding:12px 0 12px 16px}
  .dundo{padding-left:16px}
}
/* Collapsed on a phone is the case that matters: one slim bar, and the page
   behind it gets everything else. */
@media(max-width:1040px){
  .drawer.is-collapsed{padding-bottom:0}
  .drawer.is-collapsed .drawer__toggle{padding:11px 0 calc(11px + env(safe-area-inset-bottom,0px)) 16px}
}
/* flying chip */
.fly{position:fixed;z-index:60;pointer-events:none;background:var(--yellow);color:var(--ink);
  font-weight:800;font-size:12px;padding:6px 11px;box-shadow:0 6px 18px rgba(0,0,0,.25);will-change:transform,opacity}

footer{background:var(--ink);color:#8a8a92;padding:42px 0 calc(36px + env(safe-area-inset-bottom,0px));
  font-size:13px;margin-bottom:84px}
footer .wrap{display:flex;justify-content:space-between;gap:24px;flex-wrap:wrap}
footer b{color:#fff}
@media(min-width:1041px){footer{margin-bottom:0}}
@media(prefers-reduced-motion:reduce){*{animation:none!important;transition:none!important}}

/* ===== catalogue rendering ==============================================
 * Rows and cards are built from data/products.json, so a few states the
 * static prototypes never had: a price that is not set yet, and a row still
 * marked draft. Neither may ever look like a real figure.
 */
.pprice.is-tbc{font-size:15px;font-weight:700;color:var(--grey,#6b6b76);letter-spacing:0}
.pprice.is-tbc small{display:block;font-weight:600;opacity:.8}
.lrow.is-draft{opacity:.55}
.lrow .thumb img{width:100%;height:100%;object-fit:contain}
.tire__img img{position:absolute;inset:0;width:100%;height:100%;object-fit:contain}
.tire__img img{padding:14px}
.catalogue-empty{padding:40px;text-align:center;color:var(--grey,#6b6b76);font-weight:600}

/* Placeholder-pricing banner. Removed by data, not by editing markup. */
.price-warning{position:sticky;top:0;z-index:90;background:var(--yellow);color:var(--ink);
  font-size:13px;font-weight:600;text-align:center;padding:9px 24px;line-height:1.4}
.price-warning b{font-weight:800}
@media(max-width:600px){.price-warning{font-size:12px;padding:8px 16px;text-align:left}}

/* ───────────── QUOTE SUBMISSION MODAL ─────────────
 * Native <dialog> so focus trap, Esc and the backdrop come for free. The
 * dialog is a transparent wrapper; .qform / .qdone are the dark card, swapped
 * in place so success keeps the same frame the form had. */
.qmodal{border:0;padding:0;background:transparent;color:var(--text);
  max-width:440px;width:calc(100% - 32px)}
.qmodal::backdrop{background:rgba(4,4,6,.74)}
.qform,.qdone{position:relative;background:var(--ink-2);border:1px solid var(--line-dk);
  border-top:3px solid var(--yellow);padding:24px 22px 20px}
.qmodal__x{position:absolute;top:9px;right:9px;width:34px;height:34px;display:grid;
  place-items:center;background:none;border:0;color:var(--grey);font-size:23px;line-height:1}
.qmodal__x:hover{color:#fff}
.qmodal__x:focus-visible{outline:2px solid var(--yellow);outline-offset:-2px}
.qform__h{font-size:19px;font-weight:800;letter-spacing:-.02em;margin:0 6px 4px 0;color:#fff}
.qform__sub{font-size:13px;color:var(--grey);margin:0 0 18px;line-height:1.45}
.qform__sub b{color:var(--text);font-weight:700}
.qfield{margin-bottom:13px}
.qrow{display:flex;gap:12px}
.qrow .qfield{flex:1}
.qfield label{display:block;font-size:12px;font-weight:600;color:var(--text);
  margin-bottom:5px;letter-spacing:.01em}
.qfield label i{font-style:normal;color:var(--yellow);font-size:10px;font-weight:700;
  text-transform:uppercase;letter-spacing:.09em;margin-left:5px}
.qfield label span{color:var(--grey-2);font-weight:500;font-size:11px;text-transform:uppercase;letter-spacing:.07em;margin-left:5px}
.qfield input{width:100%;background:var(--ink-3);border:1.5px solid var(--line);
  color:#fff;font:inherit;font-size:14.5px;padding:10px 12px;border-radius:0}
.qfield input:focus{outline:none;border-color:var(--yellow)}
.qfield.is-bad input{border-color:#ff6b6b}
.qerr{display:block;color:#ff9a9a;font-size:11.5px;margin-top:5px}
.qhp{position:absolute;left:-9999px;width:1px;height:1px;overflow:hidden}
.qform__fail{background:rgba(255,80,80,.09);border:1px solid rgba(255,120,120,.42);
  color:#ffc9c9;font-size:13px;line-height:1.5;padding:11px 13px;margin:2px 0 14px}
.qform__fail a{color:#fff;font-weight:700;white-space:nowrap}
.qform__send{width:100%;padding:13px;margin-top:4px}
.qform__send[disabled]{opacity:.55;cursor:default}
.qdone{text-align:center}
.qdone__tick{width:54px;height:54px;border-radius:50%;background:var(--yellow);
  color:var(--ink);display:grid;place-items:center;margin:4px auto 14px}
.qdone h2{font-size:19px;font-weight:800;margin:0 0 8px;color:#fff;letter-spacing:-.02em}
.qdone p{font-size:13.5px;color:var(--grey);line-height:1.5;margin:0 auto 18px;max-width:34ch}
.qdone .btn{width:100%;padding:12px}
.dempty{font-size:12px;color:#ffb3b3;margin:9px 0 0;font-weight:600}
@media(max-width:400px){.qrow{flex-direction:column;gap:0}.qrow .qfield{margin-bottom:13px}}

/* ───── lucas filter + search ───── */
.lfilter{margin:0 0 14px;position:sticky;top:0;z-index:25;background:var(--ink);padding:12px 0 2px}
.lsearch{width:100%;background:var(--ink-2);border:1.5px solid var(--line);color:#fff;
  font:inherit;font-size:15px;padding:12px 14px;border-radius:9px}
.lsearch::placeholder{color:var(--grey-2)}
.lsearch:focus{outline:none;border-color:var(--yellow)}
.lchips{display:flex;gap:8px;flex-wrap:wrap;margin-top:10px}
.lchip{background:var(--ink-2);border:1.5px solid var(--line);color:var(--grey);font:inherit;
  font-size:13px;font-weight:600;padding:7px 13px;border-radius:999px;cursor:pointer;white-space:nowrap;transition:.15s}
.lchip:hover{color:#fff;border-color:var(--grey-2)}
.lchip[aria-pressed="true"]{background:var(--yellow);border-color:var(--yellow);color:var(--ink)}
.lchip:focus-visible{outline:2px solid var(--yellow);outline-offset:2px}
.lcount{margin:9px 0 2px;font-size:12px;color:var(--grey);font-weight:600}
.lnomatch{padding:22px 16px;color:var(--grey);font-size:14px;background:var(--ink-2);margin:0}
.lnomatch button{background:none;border:0;color:var(--yellow);font:inherit;font-weight:700;
  text-decoration:underline;text-underline-offset:3px;cursor:pointer;padding:0}
.lrow .thumb img{padding:5px}
@media(max-width:1000px){
  .lfilter{padding:10px 0 2px;margin-bottom:8px}
  .lchips{overflow-x:auto;flex-wrap:nowrap;scrollbar-width:none;-webkit-overflow-scrolling:touch;padding-bottom:2px}
  .lchips::-webkit-scrollbar{display:none}
}

/* ───── mobile hero: copy above the fold; SVG rig is the art (video is desktop-only) ───── */
@media(max-width:760px){
  .hero{min-height:64svh}
  /* copy moves to the TOP so the value proposition is the first thing seen,
     not a full-screen film area pushed below a tall header */
  .copy{top:0;bottom:auto;padding:24px 22px 0}
  .rig{align-items:end}                       /* SVG sits low, under the copy */
  .rig svg{width:min(100%,340px);margin-bottom:-4%;opacity:.9}
  /* scrim darkest at the TOP, where the copy now is */
  .slide::after{background:linear-gradient(to bottom,
    rgba(6,6,8,.96) 0%, rgba(6,6,8,.8) 28%, rgba(6,6,8,.42) 54%, rgba(6,6,8,.1) 80%, transparent 100%)}
  .eyebrow{margin-bottom:11px}
  h1{font-size:clamp(29px,7.6vw,38px);margin-bottom:12px}
  .lede{margin-bottom:18px}
}