/* =========================================================
   MOTOZONE — black & red
   Single committed theme: near-black ground, one red accent.
   One inverted "concrete" band carries sell + trust sections.
   ========================================================= */

:root{
  /* ground — near-black, faintly cool so red reads clean against it */
  --bitumen:#0C0C0D;
  --surface:#151517;
  --surface-2:#1E1E21;
  --sunk:#070708;

  /* ink */
  --ink:#F3F2F0;
  --ink-2:#A5A3A0;
  --ink-3:#6C6A68;

  /* structure */
  --line:#2A2A2E;
  --line-soft:#1E1E22;

  /* the one accent — red */
  --red:#FF3B41;        /* text / hairlines / active state: bright enough on black */
  --red-fill:#E01B24;   /* solid fills, always with white text */
  --red-dim:#8E2027;
  --red-wash:#2A0E10;

  /* semantic only — kept clear of the brand red */
  --green:#32C27E;
  --amberflag:#F0A81E;

  /* concrete band (inverted) */
  --concrete:#EDECEA;
  --concrete-2:#DDDBD8;
  --concrete-ink:#131315;
  --concrete-ink-2:#4E4C4B;
  --concrete-line:#C7C5C1;
  --concrete-red:#B3151D;

  --display:"Big Shoulders Display","Arial Narrow",Impact,sans-serif;
  --body:"IBM Plex Sans",system-ui,-apple-system,"Segoe UI",sans-serif;
  --data:"IBM Plex Mono",ui-monospace,SFMono-Regular,Menlo,monospace;

  --gut:24px;
  --max:1240px;
}

*{box-sizing:border-box}
html{scroll-behavior:smooth}
body{
  margin:0;
  background:var(--bitumen);
  color:var(--ink);
  font-family:var(--body);
  font-size:16px;
  line-height:1.6;
  -webkit-font-smoothing:antialiased;
  overflow-x:hidden;
}
img{max-width:100%;display:block}
a{color:inherit;text-decoration:none}
button{font:inherit;color:inherit;background:none;border:0;cursor:pointer}
:focus-visible{outline:2px solid var(--red);outline-offset:3px}

.wrap{max-width:var(--max);margin:0 auto;padding:0 var(--gut)}
.narrow{max-width:900px}

/* ---------- type ---------- */
h1,h2,h3{font-family:var(--display);margin:0;text-transform:uppercase;text-wrap:balance;font-weight:800;line-height:.9}
h1{font-size:clamp(46px,9vw,116px);letter-spacing:-.01em}
h2{font-size:clamp(34px,5.4vw,64px)}
h3{font-size:clamp(22px,2.8vw,32px);font-weight:600;letter-spacing:.02em}
p{margin:0;max-width:66ch}
.lede{font-size:clamp(16px,2vw,19px);color:var(--ink-2);max-width:58ch}

.tag{
  font-family:var(--data);font-size:11px;font-weight:500;
  text-transform:uppercase;letter-spacing:.16em;color:var(--ink-3);
}
.tag--red{color:var(--red)}
.num{font-family:var(--data);font-variant-numeric:tabular-nums;letter-spacing:.01em}

.rule{height:1px;background:var(--line);border:0;margin:0}
.hatch{
  height:3px;
  background:repeating-linear-gradient(90deg,var(--red) 0 34px,transparent 34px 68px);
}

/* ---------- header ---------- */
.site-head{
  position:sticky;top:0;z-index:60;
  background:rgba(12,12,13,.92);
  backdrop-filter:blur(10px);
  border-bottom:1px solid var(--line);
}
.head-in{display:flex;align-items:center;gap:22px;height:52px}
.wordmark{font-family:var(--display);font-weight:800;font-size:26px;line-height:1;text-transform:uppercase;letter-spacing:.01em;white-space:nowrap}
.wordmark span{color:var(--red)}
.nav{display:flex;gap:22px;margin-left:auto;align-items:center}
.nav a{font-size:14px;color:var(--ink-2);letter-spacing:.01em;padding:6px 0;border-bottom:1px solid transparent}
.nav a:hover,.nav a[aria-current="page"]{color:var(--ink);border-bottom-color:var(--red)}
.btn{
  display:inline-flex;align-items:center;gap:8px;
  font-family:var(--data);font-size:12.5px;letter-spacing:.1em;text-transform:uppercase;
  padding:11px 18px;border:1px solid var(--red);color:var(--red);
  transition:background .16s ease,color .16s ease;
}
.btn:hover{background:var(--red-fill);border-color:var(--red-fill);color:#fff}
.btn--solid{background:var(--red-fill);border-color:var(--red-fill);color:#fff;font-weight:600}
.btn--solid:hover{background:#FF4A50;border-color:#FF4A50;color:#fff}
.btn--ghost{border-color:var(--line);color:var(--ink-2)}
.btn--ghost:hover{background:transparent;border-color:var(--ink-2);color:var(--ink)}
.btn--lg{padding:15px 26px;font-size:13.5px}
.nav-toggle{display:none}

/* ---------- hero ---------- */
.hero{
  position:relative;
  border-bottom:1px solid var(--line);
  /* near-black: --sunk at the edges lifting to --bitumen behind the copy, with a
     single red bloom sitting behind the helmet only. It falls off well before the
     left column so the headline always sits on black. */
  background:
    radial-gradient(46% 62% at 78% 50%, rgba(42,14,16,.55), transparent 70%),
    radial-gradient(70% 90% at 26% 45%, #0C0C0D, transparent 72%),
    var(--sunk);
  overflow:hidden;
}
.hero::before{
  content:"";position:absolute;inset:0;
  background:repeating-linear-gradient(0deg,rgba(255,255,255,.018) 0 1px,transparent 1px 3px);
  pointer-events:none;
}
/* =========================================================
   Hero — a title card over the film.
   No copy: the video plays full-bleed, a veil focuses the centre,
   and the wordmark is the only thing on it.
   ========================================================= */
.hero{display:grid;place-items:center;min-height:clamp(430px,74vh,760px)}

/* veil: darkens the edges and lifts the centre so the wordmark reads
   without a drop shadow on the type */
.hero-veil{
  position:absolute;inset:0;z-index:2;pointer-events:none;
  background:
    radial-gradient(62% 66% at 50% 46%, rgba(7,7,8,.30), rgba(7,7,8,.72) 70%, rgba(7,7,8,.9) 100%),
    linear-gradient(0deg, rgba(7,7,8,.9) 0%, transparent 34%),
    linear-gradient(180deg, rgba(7,7,8,.8) 0%, transparent 22%);
}

/* The title sits UNDER the footage. The studio floor is almost pure black, so
   blending the video with `lighten` drops those blacks away and the mark shows
   through, while the lit rider and bike stay solid and pass in front of it. */
.hero-title{
  position:relative;z-index:0;display:flex;flex-direction:column;align-items:center;
  gap:30px;text-align:center;padding:0 var(--gut);
}
.hero-word{
  font-family:var(--display);font-weight:800;text-transform:uppercase;
  font-size:clamp(58px,13.5vw,224px);line-height:.84;letter-spacing:.012em;
  margin:0;white-space:nowrap;
}
.hero-word b{font-weight:800;color:var(--ink)}
.hero-word i{font-style:normal;color:var(--red)}
.hero-rule{
  /* a hairline, not a dash — the gradient ends have to travel far enough for
     it to read as a rule under the wordmark */
  display:block;width:min(440px,62vw);height:1px;
  background:linear-gradient(90deg,transparent,rgba(255,59,65,.95) 50%,transparent);
  transform-origin:center;
}
/* No separate animation on the rule: a delayed one kept its backwards fill
   pinned at scaleX(0) when the animation never started, leaving it invisible.
   It rides in with the title block instead. */

/* entrance, on the same boot gate as everything else */
html[data-boot] .hero-title{opacity:0}
.hero-title.rise .hero-word{animation:markIn 1s cubic-bezier(.16,.84,.3,1) both}
.hero-title.rise{opacity:1}
@keyframes markIn{from{opacity:0;transform:translateY(14px) scale(1.03)}to{opacity:1;transform:none}}

/* a thin cue rather than a button, so nothing competes with the wordmark */
.hero-scroll{
  position:absolute;left:50%;bottom:22px;z-index:3;transform:translateX(-50%);
  width:1px;height:56px;overflow:hidden;background:rgba(255,255,255,.10);
}
.hero-scroll span{
  position:absolute;left:0;top:-56px;width:1px;height:56px;
  background:linear-gradient(180deg,transparent,var(--red));
  animation:scrollCue 2.6s ease-in-out infinite;
}
@keyframes scrollCue{0%{transform:translateY(0)}60%,100%{transform:translateY(112px)}}
.hero-scroll:focus-visible{outline:2px solid var(--red);outline-offset:4px}

@media (max-width:600px){
  .hero{min-height:clamp(380px,62vh,520px)}
  .hero-word{font-size:clamp(46px,17vw,110px)}
  .hero-scroll{height:40px;bottom:16px}
}
@media (prefers-reduced-motion:reduce){
  .hero-title{opacity:1!important}
  .hero-word,.hero-rule{animation:none!important;transform:none!important}
  .hero-scroll span{animation:none;top:0;opacity:.5}
}

/* used by the unit page price, not the hero — kept standalone so it does not
   depend on a .hero ancestor */
.hero-price{
  font-family:var(--display);font-weight:800;
  font-size:clamp(44px,6vw,76px);line-height:.86;
  color:var(--red);font-variant-numeric:tabular-nums;
}
.hero-price small{
  font-family:var(--data);font-size:12px;color:var(--ink-3);letter-spacing:.14em;
  display:block;margin-bottom:7px;text-transform:uppercase;font-weight:400;
}

@media (max-width:980px){
  .hero-in{padding-top:66px;padding-bottom:74px}
  .hero h1{max-width:14ch}
}

/* ---------- photo placeholder plate ---------- */
.plate-art{
  position:relative;
  background:
    repeating-linear-gradient(135deg, var(--surface) 0 12px, var(--surface-2) 12px 24px);
  display:flex;align-items:center;justify-content:center;
  overflow:hidden;
}
.plate-art::after{
  content:attr(data-id);
  font-family:var(--data);font-size:12px;letter-spacing:.24em;color:var(--ink-3);
  border:1px solid var(--line);padding:8px 14px;background:var(--sunk);
}
.plate-art--tall{aspect-ratio:4/3}

/* ---------- section scaffold ---------- */
section{padding:76px 0;border-bottom:1px solid var(--line-soft)}
.sec-head{display:flex;align-items:flex-end;justify-content:space-between;gap:24px;flex-wrap:wrap;margin-bottom:34px}
.sec-head .tag{display:block;margin-bottom:10px}
.sec-head p{margin-top:12px}

/* ---------- spec-plate card ---------- */
.grid{display:grid;grid-template-columns:repeat(auto-fill,minmax(272px,1fr));gap:16px}
.card{
  border:1px solid var(--line);background:var(--surface);
  display:flex;flex-direction:column;
  transition:border-color .18s ease,transform .18s ease;
}
.card:hover{border-color:var(--red-dim);transform:translateY(-2px)}
.card .plate-art{aspect-ratio:4/3;border-bottom:1px solid var(--line)}
.card-body{padding:15px 16px 17px;display:flex;flex-direction:column;gap:12px;flex:1}
.card-top{display:flex;align-items:flex-start;justify-content:space-between;gap:10px}
.card-name{font-family:var(--display);font-weight:600;font-size:26px;line-height:.95;text-transform:uppercase}
.card-name{min-height:50px}
.card-name small{display:block;font-family:var(--data);font-size:11px;letter-spacing:.14em;color:var(--ink-3);margin-bottom:5px;font-weight:400}
.status{
  display:inline-flex;align-items:center;gap:6px;
  font-family:var(--data);font-size:10px;letter-spacing:.12em;text-transform:uppercase;
  color:var(--ink-3);white-space:nowrap;padding-top:4px;
}
.status i{width:7px;height:7px;border-radius:50%;background:var(--green);display:block}
.status--booked{color:var(--amberflag)}
.status--booked i{background:var(--amberflag)}

/* the spec plate itself */
.plate{
  border-top:1px solid var(--line-soft);
  display:grid;grid-template-columns:1fr 1fr;
}
.plate div{
  border-bottom:1px solid var(--line-soft);border-right:1px solid var(--line-soft);
  padding:7px 0 7px 0;
}
.plate div:nth-child(2n){border-right:0;padding-left:12px}
.plate dt{font-family:var(--data);font-size:9.5px;letter-spacing:.14em;text-transform:uppercase;color:var(--ink-3);margin:0}
.plate dd{font-family:var(--data);font-size:14px;font-variant-numeric:tabular-nums;margin:3px 0 0;color:var(--ink)}
.card-foot{display:flex;align-items:flex-end;justify-content:space-between;gap:10px;margin-top:auto}
.price{font-family:var(--display);font-weight:800;font-size:33px;line-height:1;color:var(--red);font-variant-numeric:tabular-nums}
.emi-line{font-family:var(--data);font-size:11px;color:var(--ink-3);text-align:right;line-height:1.4}
.emi-line b{display:block;color:var(--ink-2);font-weight:500;font-size:12.5px}
.fresh{
  position:absolute;top:0;left:0;z-index:2;
  font-family:var(--data);font-size:10px;letter-spacing:.14em;text-transform:uppercase;
  background:var(--red-fill);color:#fff;padding:5px 10px;font-weight:600;
}

/* garage-door entrance */
.card{animation:door .34s cubic-bezier(.2,.7,.3,1) both;animation-delay:var(--d,0ms)}
@keyframes door{from{opacity:0;transform:translateY(14px)}to{opacity:1;transform:translateY(0)}}
.card.rolling-out{animation:doorout .18s ease forwards}
@keyframes doorout{to{opacity:0;transform:translateY(-10px)}}

/* ---------- intent lanes ---------- */
.lanes{display:grid;grid-template-columns:repeat(auto-fit,minmax(240px,1fr));gap:16px}
.lane{border:1px solid var(--line);padding:22px 22px 24px;display:flex;flex-direction:column;gap:16px;background:var(--surface);transition:background .18s ease}
.lane:hover{background:var(--surface-2)}
.lane h3{font-size:25px}
.lane-links{display:flex;flex-wrap:wrap;gap:8px}
.lane-links a{
  font-family:var(--data);font-size:12px;letter-spacing:.06em;
  border:1px solid var(--line);padding:7px 11px;color:var(--ink-2);
  transition:border-color .16s ease,color .16s ease;
}
.lane-links a:hover{border-color:var(--red);color:var(--red)}

/* ---------- EMI calculator ---------- */
.emi{display:grid;grid-template-columns:1fr 1fr;gap:0;border:1px solid var(--line);background:var(--surface)}
.emi-controls{padding:30px 32px;display:flex;flex-direction:column;gap:26px;border-right:1px solid var(--line)}
.field{display:flex;flex-direction:column;gap:10px}
.field-top{display:flex;justify-content:space-between;align-items:baseline;gap:12px}
.field-top label{font-family:var(--data);font-size:11px;letter-spacing:.14em;text-transform:uppercase;color:var(--ink-3)}
.field-top output{font-family:var(--data);font-size:15px;font-variant-numeric:tabular-nums;color:var(--ink)}
input[type=range]{
  -webkit-appearance:none;appearance:none;width:100%;height:2px;background:var(--line);outline:none;
}
input[type=range]::-webkit-slider-thumb{
  -webkit-appearance:none;appearance:none;width:16px;height:16px;background:var(--red);
  border:0;cursor:pointer;box-shadow:0 0 0 4px rgba(224,27,36,.20);
}
input[type=range]::-moz-range-thumb{width:16px;height:16px;background:var(--red);border:0;cursor:pointer}
.emi-out{padding:30px 32px;display:flex;flex-direction:column;justify-content:center;gap:12px;background:var(--sunk)}
.emi-big{font-family:var(--display);font-weight:800;font-size:clamp(48px,8vw,86px);line-height:.86;color:var(--red);font-variant-numeric:tabular-nums}
.emi-sub{font-family:var(--data);font-size:12.5px;color:var(--ink-3);line-height:1.7}
.emi-sub b{color:var(--ink-2);font-weight:500}

/* ---------- trust ---------- */
.stats{display:grid;grid-template-columns:repeat(auto-fit,minmax(160px,1fr));border-top:1px solid var(--line);border-left:1px solid var(--line)}
.stat{border-right:1px solid var(--line);border-bottom:1px solid var(--line);padding:22px 22px 26px}
.stat b{display:block;font-family:var(--display);font-weight:800;font-size:46px;line-height:1;font-variant-numeric:tabular-nums}
.stat .tag{display:block;margin-top:8px}

/* ---------- concrete band (inverted) ---------- */
.band{background:var(--concrete);color:var(--concrete-ink);border-bottom:1px solid var(--concrete-line)}
.band h2,.band h3{color:var(--concrete-ink)}
.band p,.band .lede{color:var(--concrete-ink-2)}
.band .tag{color:#7C7565}
.band .rule{background:var(--concrete-line)}
.band .btn{border-color:var(--concrete-red);color:var(--concrete-red)}
.band .btn:hover{background:var(--concrete-red);border-color:var(--concrete-red);color:#fff}
.band .btn--solid{background:var(--concrete-red);border-color:var(--concrete-red);color:#fff}
.band .btn--solid:hover{background:#8E1017;border-color:#8E1017;color:#fff}
.band-grid{display:grid;grid-template-columns:1fr 1fr;gap:44px;align-items:center}
.steps{display:flex;flex-direction:column;border-top:1px solid var(--concrete-line)}
.step{display:grid;grid-template-columns:44px 1fr;gap:16px;padding:16px 0;border-bottom:1px solid var(--concrete-line)}
.step .n{font-family:var(--data);font-size:12px;color:var(--concrete-red);letter-spacing:.1em;padding-top:3px}
.step h4{font-family:var(--body);font-size:15px;font-weight:600;margin:0 0 4px}
.step p{font-size:14.5px}

/* ---------- filters (/bikes) ---------- */
.shop{display:grid;grid-template-columns:236px 1fr;gap:32px;align-items:start;padding-top:36px}
.filters{position:sticky;top:88px;display:flex;flex-direction:column;gap:26px}
.fgroup{display:flex;flex-direction:column;gap:10px}
.fgroup > .tag{padding-bottom:8px;border-bottom:1px solid var(--line)}
.chips{display:flex;flex-wrap:wrap;gap:7px}
.chip{
  font-family:var(--data);font-size:11.5px;letter-spacing:.05em;
  border:1px solid var(--line);padding:6px 10px;color:var(--ink-2);
  transition:border-color .15s ease,color .15s ease,background .15s ease;
}
.chip:hover{border-color:var(--ink-3);color:var(--ink)}
.chip[aria-pressed="true"]{border-color:var(--red);color:var(--red);background:var(--red-wash)}
.shop-bar{
  display:flex;align-items:center;justify-content:space-between;gap:16px;flex-wrap:wrap;
  padding-bottom:16px;border-bottom:1px solid var(--line);margin-bottom:20px;
}
.count{font-family:var(--data);font-size:13px;color:var(--ink-2);font-variant-numeric:tabular-nums}
.count b{color:var(--red);font-weight:600}
select{
  font-family:var(--data);font-size:12px;letter-spacing:.06em;
  background:var(--surface);color:var(--ink);border:1px solid var(--line);padding:9px 11px;
}
.empty{border:1px dashed var(--line);padding:52px 24px;text-align:center;color:var(--ink-3);font-family:var(--data);font-size:13px}

/* ---------- unit page ---------- */
.unit{display:grid;grid-template-columns:1.35fr 1fr;gap:40px;align-items:start;padding-top:34px}
.gallery{display:flex;flex-direction:column;gap:10px}
.gallery .plate-art{aspect-ratio:4/3;border:1px solid var(--line)}
.thumbs{display:grid;grid-template-columns:repeat(5,1fr);gap:10px}
.thumbs .plate-art{aspect-ratio:1;border:1px solid var(--line)}
.thumbs .plate-art::after{font-size:9px;letter-spacing:.1em;padding:4px 7px}
.unit-side{display:flex;flex-direction:column;gap:22px;position:sticky;top:88px}
.unit h1{font-size:clamp(38px,5.5vw,60px);line-height:.9}
.unit h1 small{display:block;font-family:var(--data);font-size:12px;letter-spacing:.16em;color:var(--ink-3);margin-bottom:9px;font-weight:400}
.bigplate{border:1px solid var(--line);background:var(--surface)}
.bigplate .row{display:grid;grid-template-columns:1fr 1fr;border-bottom:1px solid var(--line-soft)}
.bigplate .row:last-child{border-bottom:0}
.bigplate .row > div{padding:11px 14px;border-right:1px solid var(--line-soft)}
.bigplate .row > div:last-child{border-right:0}
.bigplate dt{font-family:var(--data);font-size:9.5px;letter-spacing:.14em;text-transform:uppercase;color:var(--ink-3);margin:0}
.bigplate dd{font-family:var(--data);font-size:14.5px;font-variant-numeric:tabular-nums;margin:4px 0 0}
.flag{display:flex;align-items:center;gap:8px;font-size:13.5px;color:var(--ink-2);font-family:var(--data)}
.flag i{width:7px;height:7px;border-radius:50%;background:var(--green);flex:none}
.flag.off i{background:var(--ink-3)}
.modlist{display:flex;flex-wrap:wrap;gap:7px}
.modlist span{font-family:var(--data);font-size:11.5px;border:1px solid var(--line);padding:6px 10px;color:var(--ink-2)}

/* ---------- footer ---------- */
.site-foot{background:var(--sunk);padding:52px 0 40px;border-top:1px solid var(--line)}
.foot-grid{display:grid;grid-template-columns:repeat(auto-fit,minmax(190px,1fr));gap:26px}
.foot-grid .tag{display:block;margin-bottom:10px}
.foot-grid p{font-size:14.5px;color:var(--ink-2)}
.foot-grid a:hover{color:var(--red)}
.foot-base{display:flex;justify-content:space-between;gap:16px;flex-wrap:wrap;margin-top:38px;padding-top:20px;border-top:1px solid var(--line);font-family:var(--data);font-size:11px;letter-spacing:.08em;color:var(--ink-3)}

/* ---------- sticky whatsapp ---------- */
.wa-sticky{
  position:fixed;right:20px;bottom:20px;z-index:70;
  background:var(--red-fill);color:#fff;
  font-family:var(--data);font-size:12.5px;font-weight:600;letter-spacing:.08em;text-transform:uppercase;
  padding:14px 20px;box-shadow:0 10px 30px -12px rgba(0,0,0,.8);
  display:inline-flex;align-items:center;gap:9px;
}
.wa-sticky:hover{background:#FF4A50}

/* ---------- responsive ---------- */
@media (max-width:980px){
  .hero-unit{grid-template-columns:1fr}
  .hero-unit .plate-art{border-right:0;border-bottom:1px solid var(--line);min-height:230px}
  .hero-unit .hero-meta{padding:26px 0 34px}
  .emi{grid-template-columns:1fr}
  .emi-controls{border-right:0;border-bottom:1px solid var(--line)}
  .band-grid{grid-template-columns:1fr;gap:30px}
  .shop{grid-template-columns:1fr;gap:24px}
  .filters{position:static}
  .unit{grid-template-columns:1fr;gap:28px}
  .unit-side{position:static}
}
@media (max-width:760px){
  .nav{
    position:fixed;inset:52px 0 auto 0;background:var(--sunk);border-bottom:1px solid var(--line);
    flex-direction:column;align-items:stretch;gap:0;padding:8px 24px 18px;display:none;
  }
  .nav.open{display:flex}
  .nav a{padding:13px 0;border-bottom:1px solid var(--line-soft)}
  .nav .btn{margin-top:12px;justify-content:center}
  .nav-toggle{display:inline-flex;margin-left:auto;font-family:var(--data);font-size:12px;letter-spacing:.1em;text-transform:uppercase;color:var(--ink-2);border:1px solid var(--line);padding:9px 13px}
  section{padding:52px 0}
  .thumbs{grid-template-columns:repeat(3,1fr)}
  .wa-sticky{left:16px;right:16px;bottom:16px;justify-content:center}
}

@media (prefers-reduced-motion:reduce){
  *{animation:none!important;transition:none!important}
  html{scroll-behavior:auto}
}


/* =========================================================
   Photography
   ========================================================= */
.plate-art img{
  position:absolute;inset:0;width:100%;height:100%;object-fit:cover;
  transition:transform .5s cubic-bezier(.2,.7,.3,1);
}
.plate-art.has-photo::after{content:none}
.card:hover .plate-art img{transform:scale(1.035)}

.credit{
  font-family:var(--data);font-size:10.5px;letter-spacing:.04em;color:var(--ink-3);
  line-height:1.5;
}
.credit a{border-bottom:1px solid var(--line)}
.credit a:hover{color:var(--red)}

.repro{
  display:flex;gap:9px;align-items:flex-start;
  border-left:2px solid var(--red-dim);background:var(--red-wash);
  padding:11px 14px;font-family:var(--data);font-size:11.5px;line-height:1.6;color:var(--ink-2);
}

/* gallery */
.gallery .stage{position:relative;aspect-ratio:4/3;border:1px solid var(--line);overflow:hidden;background:var(--surface)}
.gallery .stage img{position:absolute;inset:0;width:100%;height:100%;object-fit:cover;opacity:0;transition:opacity .28s ease}
.gallery .stage img.on{opacity:1}
.thumbs button{
  position:relative;aspect-ratio:1;border:1px solid var(--line);overflow:hidden;padding:0;background:var(--surface);
}
.thumbs button img{position:absolute;inset:0;width:100%;height:100%;object-fit:cover;opacity:.55;transition:opacity .18s ease}
.thumbs button[aria-pressed="true"]{border-color:var(--red)}
.thumbs button[aria-pressed="true"] img,.thumbs button:hover img{opacity:1}

/* =========================================================
   360 spin viewer
   ========================================================= */
.viewer{display:flex;flex-direction:column;gap:10px}
.stage-tabs{display:flex;gap:0;border:1px solid var(--line);border-bottom:0;width:fit-content}
.stage-tabs button{
  font-family:var(--data);font-size:11px;letter-spacing:.12em;text-transform:uppercase;
  padding:9px 16px;color:var(--ink-3);border-right:1px solid var(--line);
  transition:color .15s ease,background .15s ease;
}
.stage-tabs button:last-child{border-right:0}
.stage-tabs button[aria-selected="true"]{color:var(--red);background:var(--red-wash)}
.stage-tabs button:hover{color:var(--ink)}

.spin{
  position:relative;aspect-ratio:4/3;border:1px solid var(--line);overflow:hidden;
  background:var(--surface);cursor:grab;touch-action:pan-y;user-select:none;
}
.spin.dragging{cursor:grabbing}
.spin img{position:absolute;inset:0;width:100%;height:100%;object-fit:cover;opacity:0}
.spin img.on{opacity:1}
.spin-readout{
  position:absolute;left:12px;bottom:12px;z-index:3;
  font-family:var(--data);font-size:10.5px;letter-spacing:.14em;text-transform:uppercase;
  background:rgba(7,7,8,.82);border:1px solid var(--line);color:var(--ink-2);padding:6px 11px;
  font-variant-numeric:tabular-nums;
}
.spin-readout b{color:var(--red);font-weight:600}
.spin-grab{
  position:absolute;left:50%;top:50%;transform:translate(-50%,-50%);z-index:3;
  font-family:var(--data);font-size:11px;letter-spacing:.16em;text-transform:uppercase;
  background:rgba(7,7,8,.78);border:1px solid var(--line);color:var(--ink);padding:10px 18px;
  pointer-events:none;transition:opacity .3s ease;
}
.spin.touched .spin-grab{opacity:0}
.spin-scrub{
  position:absolute;left:0;right:0;bottom:0;height:2px;background:var(--line-soft);z-index:3;
}
.spin-scrub i{display:block;height:100%;background:var(--red);width:0;transition:width .06s linear}
.hidden{display:none!important}


/* =========================================================
   Card as a container, not a link.
   The title carries a stretched link so the whole card is
   clickable, while the test-ride button stays a real button
   on top of it — a link inside a link is invalid HTML.
   ========================================================= */
.card{position:relative}
.card-link{color:inherit;display:block}
.card-link::after{content:"";position:absolute;inset:0;z-index:1}
.card-cta{display:flex;gap:8px;position:relative;z-index:2}
.card-cta .btn{flex:1;justify-content:center;padding:10px 12px;font-size:11px}
.btn--sm{padding:10px 14px;font-size:11.5px}

/* test-ride button: outlined so it never fights the price for attention */
.btn--ride{border-color:var(--red);color:var(--red);background:transparent}
.btn--ride:hover{background:var(--red-fill);border-color:var(--red-fill);color:#fff}







@media (max-width:900px){
  
  
}

/* =========================================================
   Hero video
   Full-bleed behind the copy, masked out on the left so the
   headline always sits on black rather than on footage.
   ========================================================= */
.hero-video{
  position:absolute;inset:0;z-index:0;
  /* full frame, centred — with the copy gone there is nothing to mask around */
  width:100%;height:100%;object-fit:cover;object-position:center 26%;
  opacity:1;pointer-events:none;z-index:1;mix-blend-mode:lighten;
}
/* foot scrim + a light red cast to tie the footage to the palette */
.hero::after{
  content:"";position:absolute;inset:0;z-index:2;pointer-events:none;
  background:
    linear-gradient(0deg,rgba(7,7,8,.85) 0%,rgba(7,7,8,.15) 34%,transparent 62%),
    linear-gradient(90deg,rgba(224,27,36,0) 40%,rgba(224,27,36,.10) 100%);
}
.finder-tab{z-index:80}

@media (max-width:900px){
  /* The 0.32 opacity here was from the era when copy sat on top of the footage.
     There is no copy over it now, so it only made the video invisible. */
  .hero-video{object-position:center 30%}
}
@media (prefers-reduced-motion:reduce){
  /* play() is never called, so this is the poster frame and nothing else */
  .hero-video{opacity:.5}
}

}




/* =========================================================
   Sold out — still listed, plainly unavailable
   ========================================================= */
.card.is-sold .plate-art img{filter:grayscale(1) brightness(.55)}
.card.is-sold .price{color:var(--ink-3)}
.card.is-sold:hover{border-color:var(--line);transform:none}
.card.is-sold:hover .plate-art img{transform:none}
.stamp{
  position:absolute;top:0;left:0;z-index:2;
  font-family:var(--data);font-size:10px;letter-spacing:.16em;text-transform:uppercase;
  background:var(--red-fill);color:#fff;padding:5px 10px;font-weight:600;
}
.status--sold{color:var(--red)}
.status--sold i{background:var(--red)}
.count i{font-style:normal;color:var(--ink-3)}

.soldbar{
  border-left:3px solid var(--red);background:var(--red-wash);padding:14px 16px;
  display:flex;flex-direction:column;gap:5px;
}
.soldbar b{
  font-family:var(--display);font-weight:800;font-size:26px;line-height:1;
  text-transform:uppercase;color:var(--red);
}
.soldbar span{font-family:var(--data);font-size:11.5px;line-height:1.6;color:var(--ink-2)}
.hero-price.is-sold{color:var(--ink-3)}
.hero-price.is-sold small{color:var(--ink-3)}


/* =========================================================
   Seller's document checklist
   ========================================================= */
.paperlist{
  list-style:none;margin:0;padding:0;
  display:grid;grid-template-columns:repeat(auto-fit,minmax(330px,1fr));gap:0 34px;
  border-top:1px solid var(--line);
}
.paperlist li{
  display:grid;grid-template-columns:34px 1fr;gap:12px;align-items:start;
  padding:14px 0;border-bottom:1px solid var(--line-soft);
}
.pl-n{
  font-family:var(--data);font-size:12px;color:var(--red);
  font-variant-numeric:tabular-nums;letter-spacing:.08em;padding-top:2px;
}
.paperlist b{display:block;font-size:15.5px;font-weight:600;margin-bottom:3px}
.paperlist span:not(.pl-n){
  display:block;font-family:var(--data);font-size:11.5px;line-height:1.6;color:var(--ink-3);
}


/* =========================================================
   Bike overview — the at-a-glance panel
   ========================================================= */
.ov{padding-top:56px}
.ov-grid{
  margin:0;padding:0;border:1px solid var(--line);background:var(--surface);
  display:grid;grid-template-columns:repeat(3,1fr);
}
.ov-grid > div{
  padding:16px 20px;
  border-right:1px solid var(--line-soft);border-bottom:1px solid var(--line-soft);
}
.ov-grid > div:nth-child(3n){border-right:0}
.ov-grid > div:nth-last-child(-n+3){border-bottom:0}
.ov-grid dt{
  font-family:var(--data);font-size:10.5px;letter-spacing:.14em;text-transform:uppercase;
  color:var(--ink-3);margin:0;
}
.ov-grid dd{
  margin:6px 0 0;font-size:16px;font-weight:500;color:var(--ink);
  font-variant-numeric:tabular-nums;
}
@media (max-width:820px){
  .ov-grid{grid-template-columns:repeat(2,1fr)}
  .ov-grid > div:nth-child(3n){border-right:1px solid var(--line-soft)}
  .ov-grid > div:nth-child(2n){border-right:0}
  .ov-grid > div:nth-last-child(-n+3){border-bottom:1px solid var(--line-soft)}
  .ov-grid > div:nth-last-child(-n+2){border-bottom:0}
}
@media (max-width:480px){
  .ov-grid{grid-template-columns:1fr}
  .ov-grid > div{border-right:0!important}
  .ov-grid > div:not(:last-child){border-bottom:1px solid var(--line-soft)!important}
  .ov-grid > div:last-child{border-bottom:0!important}
}


/* =========================================================
   Dual-handle price range
   Two overlaid range inputs: the track and fill are drawn by the
   wrapper, the inputs themselves are transparent and only their
   thumbs receive pointer events.
   ========================================================= */
.range{display:flex;flex-direction:column;gap:14px}
.range-read{display:flex;justify-content:space-between;gap:12px}
.range-read span{display:flex;flex-direction:column;gap:3px}
.range-read small{
  font-family:var(--data);font-size:9.5px;letter-spacing:.14em;text-transform:uppercase;color:var(--ink-3);
}
.range-read b{
  font-family:var(--data);font-size:14px;font-weight:600;color:var(--red);
  font-variant-numeric:tabular-nums;
}
.range-read span:last-child{align-items:flex-end}

.range-track{position:relative;height:26px}
.range-fill{position:absolute;left:0;right:0;top:12px;height:2px;background:var(--line)}
.range-fill::after{
  content:"";position:absolute;top:0;height:100%;
  left:var(--s1,0%);right:calc(100% - var(--s2,100%));background:var(--red);
}
.range-track input[type=range]{
  position:absolute;left:0;top:0;width:100%;height:26px;margin:0;
  background:none;pointer-events:none;-webkit-appearance:none;appearance:none;
}
.range-track input[type=range]::-webkit-slider-thumb{
  -webkit-appearance:none;appearance:none;pointer-events:auto;
  width:16px;height:16px;border-radius:50%;background:var(--red);border:2px solid var(--bitumen);
  cursor:grab;box-shadow:0 0 0 3px rgba(224,27,36,.22);
}
.range-track input[type=range]::-webkit-slider-thumb:active{cursor:grabbing}
.range-track input[type=range]::-moz-range-thumb{
  pointer-events:auto;width:16px;height:16px;border-radius:50%;
  background:var(--red);border:2px solid var(--bitumen);cursor:grab;
}
.range-track input[type=range]::-moz-range-track{background:none}

/* Phone: stand the slider up, values beside each handle, per the reference. */
@media (max-width:760px){
  .range{flex-direction:row;gap:18px;align-items:stretch;padding:4px 0 4px 4px}
  .range-track{
    width:26px;height:230px;flex:none;
    display:flex;align-items:center;justify-content:center;
  }
  .range-fill{left:12px;right:auto;top:0;bottom:0;width:2px;height:auto}
  .range-fill::after{
    left:0;right:auto;width:100%;
    top:calc(100% - var(--s2,100%));bottom:var(--s1,0%);height:auto;
  }
  .range-track input[type=range]{
    width:230px;height:26px;
    transform:rotate(-90deg);transform-origin:center;
    left:calc(50% - 115px);top:calc(50% - 13px);
  }
  .range-read{
    flex-direction:column-reverse;justify-content:space-between;flex:1;padding:2px 0;
  }
  .range-read span,.range-read span:last-child{align-items:flex-start}
  .range-read b{font-size:16px}
}


/* =========================================================
   Finder — the shop-by-what-you-want panel, docked to the edge
   ========================================================= */
.finder-tab{
  position:fixed;right:0;top:50%;transform:translateY(-50%);z-index:80;
  writing-mode:vertical-rl;
  font-family:var(--data);font-size:11.5px;letter-spacing:.18em;text-transform:uppercase;
  background:var(--red-fill);color:#fff;border:0;padding:20px 11px;cursor:pointer;
  box-shadow:-6px 0 24px -12px rgba(0,0,0,.9);
  transition:padding .18s ease,background .18s ease;
}
.finder-tab:hover{padding-right:15px;background:#FF4A50}
.finder-tab[aria-expanded="true"],
.finder-tab.stood-down{opacity:0;pointer-events:none}

.finder-back{
  position:fixed;inset:0;z-index:88;background:rgba(7,7,8,.72);
  opacity:0;transition:opacity .3s ease;
}
.finder-back.show{opacity:1}

.finder{
  position:fixed;top:0;right:0;bottom:0;z-index:90;width:min(400px,90vw);
  background:var(--sunk);border-left:1px solid var(--line);
  transform:translateX(102%);transition:transform .34s cubic-bezier(.2,.7,.3,1);
  display:flex;flex-direction:column;overflow:hidden;
}
.finder.open{transform:none}
.finder-head{
  display:flex;align-items:flex-start;justify-content:space-between;gap:16px;
  padding:24px 22px 18px;border-bottom:1px solid var(--line);
}
.finder-head h3{margin-top:9px;font-size:27px}
.finder-close{
  background:none;border:1px solid var(--line);color:var(--ink-2);cursor:pointer;
  font-size:14px;line-height:1;padding:8px 11px;flex:none;
}
.finder-close:hover{border-color:var(--red);color:var(--red)}
.finder-body{padding:22px;display:flex;flex-direction:column;gap:26px;overflow-y:auto;flex:1}
.fsec{display:flex;flex-direction:column;gap:11px}
.fsec > .tag{padding-bottom:9px;border-bottom:1px solid var(--line)}

/* Brand list — a small logo chip, the name, the live count. The logos arrive
   in every possible colour and some are light-on-dark by design, so each sits
   on its own white chip rather than being tinted to match. */
.brandlist{list-style:none;margin:0;padding:0;display:flex;flex-direction:column}
.brandlist li{border-bottom:1px solid var(--line-soft)}
.brandlist li:last-child{border-bottom:0}
.brandlist a{
  display:flex;align-items:center;gap:11px;padding:9px 2px;
  transition:padding-left .14s ease;
}
.brandlist a:hover{padding-left:6px}
.bl-mark{
  width:26px;height:26px;flex:none;border-radius:4px;background:#F3F2F0;
  display:flex;align-items:center;justify-content:center;padding:3px;overflow:hidden;
}
.bl-mark img{max-width:100%;max-height:100%;width:auto;height:auto;object-fit:contain}
.bl-mark i{
  font-family:var(--display);font-style:normal;font-weight:800;font-size:15px;
  color:var(--bitumen);line-height:1;
}
.bl-name{font-size:14.5px;font-weight:500;color:var(--ink)}
.brandlist a:hover .bl-name{color:var(--red)}
.bl-n{
  margin-left:auto;font-family:var(--data);font-size:12px;color:var(--ink-3);
  font-variant-numeric:tabular-nums;
}
.btn--wide{width:100%;justify-content:center}

@media (max-width:760px){
  .finder-tab{
    top:auto;bottom:86px;writing-mode:horizontal-tb;
    padding:12px 16px;font-size:11px;
  }
  .finder-tab:hover{padding-right:16px}
  .finder{width:100%}
}
@media (prefers-reduced-motion:reduce){
  .finder{transition:none}
}


/* =========================================================
   Compact card on phones
   A full-width 4:3 photo plus a two-row spec plate made one bike fill 89%
   of the screen. Shorter photo, one-row plate, tighter rhythm — two bikes
   now sit in the same space without dropping any information.
   ========================================================= */
@media (max-width:620px){
  .grid{gap:10px}
  .card .plate-art{aspect-ratio:2/1}
  .card-body{padding:9px 12px 11px;gap:6px}
  .card-name{min-height:0;font-size:18px}
  .card-name small{font-size:9.5px;margin-bottom:3px;letter-spacing:.12em}
  .status{font-size:9px;padding-top:2px;gap:5px}
  .status i{width:6px;height:6px}

  /* the four specs on one line instead of a 2×2 block */
  .plate{grid-template-columns:repeat(4,1fr)}
  .plate div,
  .plate div:nth-child(2n){
    padding:4px 0 3px;border-bottom:0;border-right:1px solid var(--line-soft);
    padding-left:8px;
  }
  .plate div:first-child{padding-left:0}
  .plate div:last-child{border-right:0}
  .plate dt{font-size:8px;letter-spacing:.08em}
  .plate dd{font-size:12px;margin-top:1px}

  /* price and the button share one row rather than stacking — that alone
     removes a whole block plus its gap from every card */
  .card-body{
    display:grid;grid-template-columns:1fr auto;align-content:start;
    grid-template-areas:"top top" "plate plate" "foot cta";
    column-gap:10px;
  }
  .card-top{grid-area:top}
  .plate{grid-area:plate}
  .card-foot{grid-area:foot;align-items:center;margin-top:0}
  .card-cta{grid-area:cta;align-self:center}
  .price{font-size:23px}
  /* drop the "EMI from" label but keep the figure — zeroing the parent's font
     size hides the bare text node without needing a wrapper element */
  .emi-line{font-size:0;line-height:1;text-align:left}
  .emi-line b{font-size:10.5px;line-height:1.4}
  .card-foot{flex-direction:column;align-items:flex-start;gap:1px}
  .card-cta .btn{padding:9px 12px;font-size:10px;letter-spacing:.06em;white-space:nowrap}
  .fresh{font-size:9px;padding:4px 8px;letter-spacing:.1em}
}


/* =========================================================
   Finder cue — the inline way into the drawer, above the floor
   ========================================================= */
.finder-cue{border-bottom:1px solid var(--line-soft);background:var(--sunk)}
.finder-cue .wrap{
  display:flex;align-items:center;justify-content:space-between;gap:24px;flex-wrap:wrap;
  padding-top:30px;padding-bottom:30px;
}
.finder-cue .tag{display:block;margin-bottom:9px}
.finder-cue h3{font-size:clamp(23px,3vw,32px)}
@media (max-width:620px){
  .finder-cue .wrap{padding-top:24px;padding-bottom:24px;gap:16px}
  .finder-cue .btn{width:100%;justify-content:center}
}