/* Maharashtra Bike Shop — public website.
   Carbon black and chrome with the logo's red, on a warm off-white page.
   Saira Condensed for display type, Manrope for reading. Mobile first; every
   animation is transform/opacity (plus a few one-off bar fills) and switches
   off for reduced-motion users. */

:root {
  --ink: #0B0B0D;
  --ink-2: #141417;
  --ink-3: #1F1F24;
  --ink-line: #2A2A31;
  --text: #121215;
  --muted: #62646C;
  --line: #E4E3DF;
  --paper: #F5F4F1;
  --paper-2: #EBEAE6;
  --card: #FFFFFF;
  --red: #D7262D;
  --red-2: #B51C22;
  --red-soft: #FBEAEA;
  --chrome: #C9CCD3;
  --steel: #8D9099;
  --gold: #F5B301;
  --ok: #17804F;
  --ok-soft: #E3F4EA;
  --warn: #A45F0B;
  --warn-soft: #FBF0DE;
  --wa: #148A47;
  --wa-2: #0F733A;
  --radius: 16px;
  --display: "Saira Condensed", "Arial Narrow", Impact, sans-serif;
  --body: "Manrope", system-ui, -apple-system, "Segoe UI", Roboto, Arial, sans-serif;
  --mono: ui-monospace, "SF Mono", Menlo, Consolas, monospace;
  --ease-out: cubic-bezier(.22, 1, .36, 1);
  --ease-io: cubic-bezier(.76, 0, .24, 1);
  --ease-back: cubic-bezier(.34, 1.4, .64, 1);
  --ease-snap: cubic-bezier(.2, 1.5, .35, 1);
  color-scheme: light;
}

*, *::before, *::after { box-sizing: border-box; }
[hidden] { display: none !important; }
html { -webkit-text-size-adjust: 100%; scroll-behavior: smooth; scroll-padding-top: 84px; }
body { margin: 0; background: var(--paper); color: var(--text); font: 500 16px/1.6 var(--body); overflow-x: hidden; -webkit-font-smoothing: antialiased; }
body.no-scroll { overflow: hidden; }
img { max-width: 100%; display: block; }
a { color: inherit; }
h1, h2, h3 { margin: 0; line-height: 1.05; }
h2 { font: 800 clamp(32px, 4.6vw, 54px)/.95 var(--display); text-transform: uppercase; letter-spacing: .005em; }
svg { flex: none; }
.sr { position: absolute; width: 1px; height: 1px; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; }
.nw { white-space: nowrap; } /* keeps "pre-owned" from breaking at the hyphen */
.muted { color: var(--muted); }
.wrap { width: 100%; max-width: 1280px; margin: 0 auto; padding: 0 16px; }
@media (min-width: 768px) { .wrap { padding: 0 32px; } }
:focus-visible { outline: 3px solid var(--red); outline-offset: 2px; }
.kicker { display: inline-flex; align-items: center; gap: 8px; margin: 0 0 10px; color: var(--red); font: 800 12.5px/1.2 var(--body); letter-spacing: .18em; text-transform: uppercase; }
.kicker svg { width: 16px; height: 16px; }
.hot { color: var(--red); }

/* ---------- buttons ---------- */
.btn {
  position: relative; display: inline-flex; align-items: center; justify-content: center; gap: 8px;
  min-height: 48px; padding: 0 20px; border-radius: 10px; border: 1.5px solid transparent;
  font: 800 15px/1 var(--body); letter-spacing: .01em; text-decoration: none; cursor: pointer; white-space: nowrap;
  transition: background .2s, border-color .2s, color .2s, transform .2s var(--ease-out), box-shadow .2s;
}
.btn:active { transform: translateY(1px) scale(.98); }
.btn svg { width: 18px; height: 18px; }
.btn-red { background: var(--red); color: #fff; }
.btn-red:hover { background: var(--red-2); box-shadow: 0 12px 28px -10px rgba(215, 38, 45, .65); transform: translateY(-1px); }
.btn-wa { background: var(--wa); color: #fff; }
.btn-wa:hover { background: var(--wa-2); box-shadow: 0 12px 28px -10px rgba(20, 138, 71, .55); transform: translateY(-1px); }
.btn-dark { background: var(--ink); color: #fff; }
.btn-dark:hover { background: #000; transform: translateY(-1px); }
.btn-line { background: #fff; color: var(--ink); border-color: var(--line); }
.btn-line:hover { border-color: var(--ink); }
.btn-line-dark { background: transparent; color: #fff; border-color: rgba(255, 255, 255, .28); }
.btn-line-dark:hover { border-color: #fff; background: rgba(255, 255, 255, .06); }
.btn-ig { background: linear-gradient(90deg, #f58529, #dd2a7b 55%, #8134af); color: #fff; }
.btn-ig:hover { filter: brightness(1.07); transform: translateY(-1px); }
.btn-yt { background: #0F0F0F; color: #fff; }
.btn-yt svg { color: #FF1A3D; }
.btn-yt:hover { background: #000; transform: translateY(-1px); }
.btn-xl { min-height: 56px; font-size: 16.5px; padding: 0 26px; }
.btn-icon { width: 48px; padding: 0; }
.btn-icon span:empty { display: none; }
.badge { display: inline-grid; place-items: center; min-width: 20px; height: 20px; padding: 0 6px; border-radius: 10px; background: var(--red); color: #fff; font-size: 12px; font-weight: 800; }
.more { display: inline-flex; align-items: center; gap: 6px; color: var(--red); font-weight: 800; text-decoration: none; white-space: nowrap; }
.more svg { transition: transform .25s var(--ease-out); }
.more:hover svg { transform: translateX(4px); }

/* ---------- top bars + header ---------- */
.revbar { position: fixed; top: 0; left: 0; right: 0; z-index: 90; height: 3px; pointer-events: none; }
.revbar i { display: block; height: 100%; background: var(--red); transform: scaleX(var(--p, 0)); transform-origin: left; }

.draftbar { background: var(--ink-3); color: var(--chrome); font-size: 13px; font-weight: 600; }
.draftbar .wrap { padding-top: 7px; padding-bottom: 7px; }
.draftbar b { margin-right: 8px; padding: 2px 7px; border-radius: 4px; background: var(--red); color: #fff; font-size: 10.5px; letter-spacing: .14em; text-transform: uppercase; }

.hdr { position: sticky; top: 0; z-index: 40; background: rgba(11, 11, 13, .9); color: #fff; border-bottom: 1px solid var(--ink-line); backdrop-filter: saturate(1.4) blur(14px); -webkit-backdrop-filter: saturate(1.4) blur(14px); }
/* Touch screens: a solid bar. The blur costs every scroll frame on a phone and hardly shows at 90%. */
@media (hover: none) { .hdr { background: rgba(11, 11, 13, .97); backdrop-filter: none; -webkit-backdrop-filter: none; } }
.hdr-in { display: flex; align-items: center; gap: 18px; height: 66px; }
@media (min-width: 1000px) { .hdr-in { height: 76px; } }
.logo { display: inline-flex; align-items: center; gap: 10px; color: var(--chrome); text-decoration: none; white-space: nowrap; }
.hdr-in > .logo { margin-right: auto; } /* everything after the logo sits on the right */
.logo-em { width: 54px; height: auto; }
.logo-words { display: flex; flex-direction: column; line-height: 1; }
.logo-words b { color: #fff; font: 800 19px/1 var(--display); letter-spacing: .07em; text-transform: uppercase; }
.logo-words i { margin-top: 3px; color: var(--red); font: 800 11px/1 var(--body); font-style: normal; letter-spacing: .38em; text-transform: uppercase; }
@media (min-width: 1000px) { .logo-em { width: 62px; } .logo-words b { font-size: 22px; } .logo-words i { font-size: 11.5px; } }
.nav { display: none; gap: 2px; }
.nav a { position: relative; padding: 8px 11px; border-radius: 8px; text-decoration: none; color: #C3C6CD; font-weight: 700; font-size: 14.5px; white-space: nowrap; transition: color .2s; }
.nav a::after { content: ""; position: absolute; left: 11px; right: 11px; bottom: 2px; height: 2px; background: var(--red); transform: scaleX(0); transform-origin: left; transition: transform .25s var(--ease-out); }
.nav a:hover, .nav a[aria-current] { color: #fff; }
.nav a:hover::after, .nav a[aria-current]::after { transform: scaleX(1); }
@media (min-width: 1000px) { .nav { display: flex; } }
.hdr-call { display: none; align-items: center; justify-content: center; gap: 8px; height: 42px; padding: 0 14px; border: 1.5px solid var(--ink-line); border-radius: 10px; text-decoration: none; font-weight: 800; font-size: 14px; white-space: nowrap; transition: border-color .2s, color .2s; }
.hdr-call svg { color: var(--red); }
.hdr-call:hover { border-color: var(--red); }
@media (min-width: 640px) { .hdr-call { display: inline-flex; } }
/* With the full menu showing, the number only fits from 1280px: just the phone icon below that. */
@media (min-width: 1000px) and (max-width: 1279px) { .hdr-call { width: 44px; padding: 0; } .hdr-call span { position: absolute; width: 1px; height: 1px; overflow: hidden; clip-path: inset(50%); } }
.menu-btn { display: grid; place-items: center; width: 44px; height: 44px; border: 1.5px solid var(--ink-line); border-radius: 10px; background: transparent; color: #fff; cursor: pointer; transition: border-color .2s; }
.menu-btn:hover { border-color: var(--red); }

/* ☰ menu: every page, WhatsApp / call, socials and the admin login.
   Full screen on phones, a drawer from the right on bigger screens. */
.menu { position: fixed; inset: 0; z-index: 70; display: flex; justify-content: flex-end; background: rgba(5, 5, 6, .6); animation: menu-fade .3s ease; }
.menu-panel { display: flex; flex-direction: column; width: 100%; height: 100%; padding: 84px 20px calc(24px + env(safe-area-inset-bottom)); overflow: auto; background: var(--ink); color: #fff; animation: menu-in .35s var(--ease-out); }
@media (min-width: 640px) { .menu-panel { width: 440px; padding: 96px 32px 32px; border-left: 1px solid var(--ink-line); box-shadow: -30px 0 60px rgba(0, 0, 0, .4); } }
.menu nav { display: flex; flex-direction: column; }
.menu nav a { padding: 11px 0; border-bottom: 1px solid var(--ink-line); color: #fff; font: 800 32px/1.1 var(--display); letter-spacing: .02em; text-decoration: none; text-transform: uppercase; transition: color .2s, padding .25s var(--ease-out); }
.menu nav a:hover { color: var(--red); padding-left: 6px; }
.menu nav a[aria-current] { color: var(--red); }
.menu-foot { display: grid; gap: 18px; margin-top: auto; padding-top: 28px; }
.menu-cta { display: grid; gap: 10px; }
.menu-cta:empty { display: none; }
.menu-follow { display: grid; gap: 10px; color: #A9ACB4; font-size: 13px; font-weight: 800; letter-spacing: .12em; text-transform: uppercase; }
/* Staff only: a small lock in the corner, not a big button for customers. */
.menu-admin { justify-self: end; display: grid; place-items: center; width: 34px; height: 34px; border: 1px solid var(--ink-line); border-radius: 50%; color: #6B6E76; text-decoration: none; transition: color .2s, border-color .2s; }
.menu-admin svg { width: 15px; height: 15px; }
.menu-admin:hover, .menu-admin:focus-visible { color: var(--red); border-color: var(--red); }
body.menu-open .hdr { position: fixed; left: 0; right: 0; z-index: 80; }
body.menu-open { overflow: hidden; }
body.menu-open .fab-stack { display: none; }
@keyframes menu-fade { from { opacity: 0; } to { opacity: 1; } }
@keyframes menu-in { from { opacity: 0; transform: translateX(24px); } to { opacity: 1; transform: none; } }

/* WhatsApp / Instagram / YouTube / Facebook in their own colours */
.socials { display: flex; flex-wrap: wrap; gap: 10px; }
.soc { --bg: var(--ink-3); display: grid; place-items: center; color: #fff; text-decoration: none; transition: transform .25s var(--ease-back); }
.soc i { display: grid; place-items: center; width: 44px; height: 44px; border-radius: 50%; background: var(--bg); box-shadow: 0 8px 18px -10px rgba(0, 0, 0, .6); }
.soc svg { width: 20px; height: 20px; }
.soc:hover { transform: translateY(-2px) scale(1.06); }
.soc-wa { --bg: #25D366; }
.soc-ig { --bg: radial-gradient(circle at 30% 107%, #fdf497 0%, #fdf497 5%, #fd5949 45%, #d6249f 60%, #285AEB 90%); }
.soc-yt { --bg: #FF0000; }
.soc-fb { --bg: #1877F2; }
.socials-tiles { display: grid; grid-template-columns: repeat(auto-fit, minmax(68px, 1fr)); gap: 8px; }
.socials-tiles .soc { gap: 8px; padding: 12px 4px 10px; border: 1px solid var(--ink-line); border-radius: 14px; background: rgba(255, 255, 255, .04); }
.socials-tiles .soc span { font: 700 12.5px/1 var(--body); letter-spacing: 0; text-transform: none; color: #E4E5E9; }
.socials-tiles .soc:hover { transform: translateY(-2px); border-color: #3A3A42; }
.socials-light .soc { border-color: var(--line); background: var(--paper); }
.socials-light .soc span { color: var(--text); }
.socials-light .soc:hover { border-color: #CFCDC6; }

/* ---------- hero ---------- */
.hero { --d0: .15s; position: relative; isolation: isolate; display: flex; flex-direction: column; justify-content: center; min-height: clamp(620px, 94svh, 940px); color: #fff; background: var(--ink); overflow: hidden; }
/* Laptops and desktops: the hero is one screen tall (below the header), not more. */
@media (min-width: 700px) { .hero { min-height: clamp(520px, calc(100svh - 76px), 940px); } }
html.intro-on .hero { --d0: 2.8s; }
.hero-media { position: absolute; inset: 0; z-index: -2; }
/* Parallax on mouse/trackpad screens only (site.js); phones keep the photo still. */
@media (hover: hover) and (pointer: fine) { .hero-media { transform: translate3d(0, calc(var(--py, 0) * 1px), 0); will-change: transform; } }
.hero-bg { width: 100%; height: 100%; object-fit: cover; object-position: 66% 55%; transform: scale(1.08); animation: hero-settle 2.2s var(--ease-out) var(--d0) both; }
.hero::after { content: ""; position: absolute; inset: 0; z-index: -1;
  background:
    radial-gradient(60% 60% at 0% 100%, rgba(215, 38, 45, .28), transparent 65%),
    linear-gradient(90deg, rgba(11, 11, 13, .96) 0%, rgba(11, 11, 13, .82) 38%, rgba(11, 11, 13, .25) 78%, rgba(11, 11, 13, .1) 100%),
    linear-gradient(0deg, rgba(11, 11, 13, .95) 0%, rgba(11, 11, 13, 0) 45%); }
@media (max-width: 760px) { .hero::after { background: radial-gradient(80% 50% at 0% 100%, rgba(215, 38, 45, .25), transparent 65%), linear-gradient(0deg, rgba(11, 11, 13, .97) 30%, rgba(11, 11, 13, .55) 75%, rgba(11, 11, 13, .35) 100%); } .hero-bg { object-position: 72% 40%; } }
.hero-in { padding-top: 72px; padding-bottom: 84px; }
/* The text sits in one span so it wraps as one line; the dot stays level with its first line. */
.eyebrow { display: inline-flex; align-items: baseline; gap: 10px; margin: 0 0 20px; color: var(--chrome); font: 800 12.5px/1.3 var(--body); letter-spacing: .2em; text-transform: uppercase; }
.eyebrow .dot { flex: none; width: 8px; height: 8px; border-radius: 50%; background: var(--red); box-shadow: 0 0 0 4px rgba(215, 38, 45, .25); }
/* The tagline: two lines from tablet up (YOUR PERFECT RIDE / STARTS HERE!), three on a phone. */
/* Sized by the screen's width and height, so a short laptop screen (1366×620 of page) still
   shows the heading, search and quick links without scrolling. */
.hero h1 { max-width: 1200px; font: 800 clamp(64px, min(9vw, 15.5svh), 132px)/.86 var(--display); text-transform: uppercase; letter-spacing: -.005em; }
.hero h1 .w { display: inline-block; animation: word-up .9s var(--ease-out) both; animation-delay: calc(var(--d0) + var(--i) * 90ms); }
.lead { max-width: 580px; margin: 22px 0 0; color: #CFD1D7; font-size: clamp(16px, 1.6vw, 19px); }
.hero-in > :not(h1) { animation: hero-rise .8s var(--ease-out) both; }
.hero h1 .eyebrow { display: flex; width: fit-content; animation: hero-rise .8s var(--ease-out) both; animation-delay: var(--d0); }
.hero-in > .lead { animation-delay: calc(var(--d0) + .45s); }
.hero-in > .hero-search { animation-delay: calc(var(--d0) + .55s); }
.hero-in > .quick { animation-delay: calc(var(--d0) + .65s); }
.hero-in > .stats { animation-delay: calc(var(--d0) + .75s); }

.hero-search, .list-search { position: relative; display: flex; gap: 8px; max-width: 640px; margin-top: 30px; padding: 6px; background: #fff; border-radius: 14px; box-shadow: 0 24px 60px rgba(0, 0, 0, .45); }
.hero-search input, .list-search input { flex: 1; min-width: 0; height: 50px; padding: 0 8px 0 42px; border: 0; background: transparent; color: var(--text); font: 600 16px var(--body); outline: none; }
.hs-icon { position: absolute; left: 20px; top: 50%; transform: translateY(-50%); color: var(--muted); pointer-events: none; }
.quick { display: flex; flex-wrap: wrap; gap: 8px; margin-top: 16px; }
/* A tinted chip, not a blurred one: live blurs over the hero photo made phones stutter when the
   keyboard opened for the search box (19 Oct 2026). */
.quick a { padding: 8px 14px; border: 1px solid rgba(255, 255, 255, .22); border-radius: 999px; background: rgba(16, 16, 19, .55); font-size: 14px; font-weight: 700; text-decoration: none; transition: background .2s, border-color .2s; }
.quick a:hover { background: var(--red); border-color: var(--red); }
.stats { display: grid; grid-template-columns: repeat(2, 1fr); gap: 18px 28px; max-width: 780px; margin: 42px 0 0; padding: 24px 0 0; border-top: 1px solid rgba(255, 255, 255, .14); list-style: none; color: #A9ACB4; font-size: 14px; font-weight: 600; }
.stats li { display: flex; flex-direction: column; gap: 4px; }
.stats b { color: #fff; font: 800 48px/1 var(--display); font-variant-numeric: tabular-nums; }
.stats b em { margin-left: 2px; color: var(--gold); font-size: .6em; font-style: normal; vertical-align: .35em; }
@media (min-width: 700px) { .stats { grid-template-columns: repeat(4, auto); justify-content: start; gap: 18px 44px; } .stats li + li { padding-left: 28px; border-left: 1px solid rgba(255, 255, 255, .12); } .hero-in { padding-top: 96px; } }
/* Short screens (most 13–15" laptops): tighter spacing in the hero. */
@media (min-width: 700px) and (max-height: 860px) {
  .hero-in { padding-top: 40px; padding-bottom: 44px; }
  .hero .eyebrow { margin-bottom: 14px; }
  .hero .lead { margin-top: 16px; }
  .hero-search { margin-top: 22px; }
  .quick { margin-top: 12px; }
  .stats { margin-top: 26px; padding-top: 18px; }
  .stats b { font-size: 40px; }
}

.scroll-cue { position: absolute; left: 50%; bottom: 22px; width: 26px; height: 42px; margin-left: -13px; border: 2px solid rgba(255, 255, 255, .45); border-radius: 14px; animation: hero-rise .8s var(--ease-out) calc(var(--d0) + 1s) both; }
.scroll-cue span { position: absolute; left: 50%; top: 7px; width: 4px; height: 8px; margin-left: -2px; border-radius: 2px; background: var(--red); animation: cue 1.6s var(--ease-io) infinite; }
@media (max-height: 700px) { .scroll-cue { display: none; } }

@keyframes hero-settle { from { transform: scale(1.22); } to { transform: scale(1.08); } }
@keyframes hero-rise { from { opacity: 0; transform: translateY(26px); } to { opacity: 1; transform: none; } }
@keyframes word-up { from { opacity: 0; transform: translateY(70%); filter: blur(8px); } to { opacity: 1; transform: none; filter: none; } }
@keyframes cue { 0% { transform: translateY(0); opacity: 1; } 70% { transform: translateY(14px); opacity: 0; } 100% { opacity: 0; } }

/* ---------- brand tape ---------- */
.tape { overflow: hidden; padding: 16px 0; background: var(--ink-2); border-top: 1px solid var(--ink-line); border-bottom: 3px solid var(--red); color: var(--chrome); }
.tape-track { display: flex; align-items: center; gap: 26px; width: max-content; animation: marquee 36s linear infinite; }
.tape span { font: 700 26px/1 var(--display); letter-spacing: .06em; text-transform: uppercase; white-space: nowrap; }
.tape i { width: 14px; height: 6px; background: var(--red); transform: skewX(-24deg); }
@keyframes marquee { to { transform: translateX(-25%); } }

/* ---------- sections + reveal ---------- */
.sec { padding-top: 72px; padding-bottom: 8px; }
.sec-head { display: flex; align-items: flex-end; justify-content: space-between; gap: 16px; margin-bottom: 26px; }
.sec-head h2 { margin: 0; }
.sec-head .kicker { margin-bottom: 8px; }
.sub-h { margin: 34px 0 14px; font: 800 24px/1 var(--display); letter-spacing: .02em; text-transform: uppercase; }
/* site.js hides what's below the fold (.pre), then adds .in as it scrolls in.
   .in also starts the odometers and bars (they sit at zero under .js). */
.reveal.pre, .card.pre { opacity: 0; transform: translateY(30px); }
.reveal.in, .card.in { transition: opacity .7s var(--ease-out), transform .7s var(--ease-out), background .3s, color .3s, border-color .3s, box-shadow .3s; }

/* ---------- services ---------- */
.svc-grid { display: grid; gap: 14px; }
@media (min-width: 640px) { .svc-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); } }
@media (min-width: 1040px) { .svc-grid { grid-template-columns: repeat(4, minmax(0, 1fr)); } }
.svc { display: flex; flex-direction: column; gap: 10px; padding: 24px; background: var(--card); border: 1px solid var(--line); border-radius: var(--radius); text-decoration: none; transition: background .3s, color .3s, border-color .3s, transform .35s var(--ease-out), box-shadow .3s; }
.svc-ico { display: grid; place-items: center; width: 52px; height: 52px; border-radius: 14px; background: var(--red-soft); color: var(--red); transition: background .3s, color .3s; }
.svc-ico svg { width: 24px; height: 24px; }
.svc h3 { margin-top: 6px; font: 800 30px/1 var(--display); text-transform: uppercase; letter-spacing: .02em; }
.svc p { margin: 0; color: var(--muted); font-size: 15px; transition: color .3s; }
.svc-go { display: inline-flex; align-items: center; gap: 6px; margin-top: auto; padding-top: 8px; color: var(--red); font-weight: 800; font-size: 14.5px; }
.svc-go svg { width: 16px; height: 16px; transition: transform .25s var(--ease-out); }
a.svc:hover { background: var(--ink); border-color: var(--ink); color: #fff; transform: translateY(-4px); box-shadow: 0 30px 50px -28px rgba(11, 11, 13, .6); }
a.svc:hover p { color: #B6B9C0; }
a.svc:hover .svc-ico { background: var(--red); color: #fff; }
a.svc:hover .svc-go svg { transform: translateX(4px); }

/* ---------- brands + budgets ---------- */
/* Brand tiles (Home "Shop by brand"): logo as a one-colour mark, or an initials badge. */
.btiles { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 12px; }
@media (min-width: 640px) { .btiles { grid-template-columns: repeat(3, minmax(0, 1fr)); } }
@media (min-width: 960px) { .btiles { grid-template-columns: repeat(4, minmax(0, 1fr)); } }
.btile { position: relative; display: flex; flex-direction: column; min-height: 150px; padding: 18px; overflow: hidden; background: var(--card); border: 1px solid var(--line); border-radius: var(--radius); color: var(--text); text-decoration: none; transition: background .3s, color .3s, border-color .3s, transform .35s var(--ease-out); }
.btile .bmark { margin-bottom: auto; }
.btile-name { margin-top: 18px; font: 800 clamp(21px, 2.2vw, 27px)/.95 var(--display); text-transform: uppercase; }
.btile small { margin-top: 6px; color: var(--muted); font-size: 13px; font-weight: 700; transition: color .3s; }
.btile-none small { font-weight: 600; }
.btile i { position: absolute; top: 14px; right: 14px; display: grid; place-items: center; width: 34px; height: 34px; border: 1.5px solid var(--line); border-radius: 50%; transition: background .3s, border-color .3s, color .3s, transform .45s var(--ease-back); }
.btile i svg { width: 15px; height: 15px; }
.btile:hover { background: var(--ink); border-color: var(--ink); color: #fff; transform: translateY(-3px); }
.btile:hover small { color: #A9ACB4; }
.btile:hover i { background: var(--red); border-color: var(--red); color: #fff; transform: rotate(-45deg); }
.btile:hover .bmark-type { background: var(--red); color: #fff; }

.bmark { display: block; flex: none; max-width: 100%; width: calc(var(--w) * var(--s, 1) * 1px); height: calc(var(--h) * var(--s, 1) * 1px); background: currentColor; -webkit-mask: var(--logo) left center / contain no-repeat; mask: var(--logo) left center / contain no-repeat; }
.bmark-type { display: grid; place-items: center; width: auto; min-width: 44px; height: 44px; padding: 0 9px; background: var(--paper-2); color: var(--ink); border-radius: 12px; -webkit-mask: none; mask: none; font: 800 19px/1 var(--display); letter-spacing: .04em; justify-self: start; align-self: flex-start; transition: background .3s, color .3s; }

.budgets { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 12px; }
/* Three bands: on a phone the top one (₹4 lakh +) runs full width under the other two. */
.budgets a:last-child:nth-child(odd) { grid-column: 1 / -1; }
@media (min-width: 760px) { .budgets { grid-template-columns: repeat(3, minmax(0, 1fr)); } .budgets a:last-child:nth-child(odd) { grid-column: auto; } }
.budgets a { display: flex; flex-direction: column; gap: 4px; padding: 18px; background: var(--card); border: 1px solid var(--line); border-radius: var(--radius); text-decoration: none; transition: background .3s, color .3s, border-color .3s, transform .35s var(--ease-out); }
.budgets a > span:not(.gauge) { font: 800 26px/1.05 var(--display); text-transform: uppercase; }
.budgets small { color: var(--muted); font-weight: 700; font-size: 13px; transition: color .3s; }
.gauge { display: flex; gap: 5px; margin-bottom: 12px; }
.gauge i { width: 22px; height: 8px; border-radius: 2px; background: var(--paper-2); transform: skewX(-24deg); transition: background .3s; }
.gauge i.on { background: var(--red); }
.budgets a:hover { background: var(--ink); border-color: var(--ink); color: #fff; transform: translateY(-3px); }
.budgets a:hover small { color: #A9ACB4; }
.budgets a:hover .gauge i { background: var(--ink-3); }
.budgets a:hover .gauge i.on { background: var(--red); }

/* ---------- bike cards ---------- */
.grid { display: grid; grid-template-columns: minmax(0, 1fr); gap: 18px; }
@media (min-width: 560px) { .grid { grid-template-columns: repeat(2, minmax(0, 1fr)); } }
@media (min-width: 900px) { .grid { grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 22px; } }
@media (min-width: 1180px) { .sec > .grid { grid-template-columns: repeat(4, minmax(0, 1fr)); } }
.card { position: relative; display: block; color: inherit; text-decoration: none; border-radius: var(--radius); }
.card-in { position: relative; display: flex; flex-direction: column; height: 100%; background: var(--card); border: 1px solid var(--line); border-radius: var(--radius); overflow: hidden; transition: transform .45s var(--ease-out), box-shadow .35s, border-color .35s; }
.card:hover .card-in { transform: translateY(-5px); border-color: #D6D4CE; box-shadow: 0 30px 50px -26px rgba(11, 11, 13, .45); }
.card-img { position: relative; aspect-ratio: 4 / 3; overflow: hidden; background: #E2E0DB; }
.card-img img { width: 100%; height: 100%; object-fit: cover; transform: scale(1.01); transition: transform .9s var(--ease-out), filter .4s; }
.card:hover .card-img img { transform: scale(1.07); }
.card.is-sold .card-img img { filter: grayscale(1) contrast(.95) brightness(.9); }
.noimg { display: grid; place-items: center; height: 100%; color: var(--muted); font-size: 14px; }

.card-body { display: flex; flex-direction: column; gap: 12px; flex: 1; padding: 16px 16px 14px; }
.card-title small { display: block; color: var(--red); font: 800 11px/1 var(--body); letter-spacing: .18em; text-transform: uppercase; }
.card-title h3 { margin-top: 6px; font: 800 clamp(26px, 2.4vw, 30px)/.95 var(--display); text-transform: uppercase; letter-spacing: .01em; }
.card-title span { display: block; margin-top: 4px; overflow: hidden; color: var(--muted); font: 600 13.5px/1.3 var(--body); text-overflow: ellipsis; white-space: nowrap; }

.tags { position: absolute; top: 12px; left: 12px; z-index: 2; display: flex; flex-wrap: wrap; gap: 6px; max-width: calc(100% - 128px); }
.tag { display: inline-flex; align-items: center; gap: 4px; padding: 5px 8px; border-radius: 6px; background: var(--ink); color: #fff; font: 800 10.5px/1.1 var(--body); letter-spacing: .1em; text-transform: uppercase; }
.tag svg { width: 11px; height: 11px; }
.tag-new { background: var(--red); }
.tag-booked { background: var(--gold); color: var(--ink); }
.tag-yt { background: rgba(11, 11, 13, .85); backdrop-filter: blur(4px); }
.tag-yt svg { color: #FF1A3D; }
.tag-reel { background: linear-gradient(90deg, #f58529, #dd2a7b 55%, #8134af); }

/* stock code as an Indian number plate */
.plate { position: absolute; top: 12px; right: 12px; z-index: 2; display: inline-flex; align-items: stretch; gap: 6px; padding: 3px 8px 3px 3px; background: #fff; border: 2px solid #111; border-radius: 6px; color: #111; font: 800 14px/1.2 var(--display); letter-spacing: .1em; white-space: nowrap; box-shadow: 0 4px 14px rgba(0, 0, 0, .25); }
.plate s { display: grid; place-items: center; padding: 0 3px; border-radius: 3px; background: #1C4FA8; color: #fff; font: 800 7px/1 var(--body); letter-spacing: .04em; text-decoration: none; }
.plate-lg { position: static; font-size: 18px; padding: 4px 10px 4px 4px; box-shadow: none; }
.plate-lg s { padding: 0 4px; font-size: 8.5px; }

.stamp { position: absolute; left: 50%; top: 50%; z-index: 3; padding: 8px 18px 6px; border: 3px solid #fff; border-radius: 8px; background: rgba(215, 38, 45, .94); color: #fff; font: 800 32px/1 var(--display); letter-spacing: .16em; text-transform: uppercase; transform: translate(-50%, -50%) rotate(-8deg); box-shadow: 0 8px 24px rgba(0, 0, 0, .35); }
.stamp-booked { background: rgba(245, 179, 1, .96); color: var(--ink); border-color: var(--ink); }
.card.in .stamp { animation: slam .5s var(--ease-back) .35s backwards; }
@keyframes slam { from { opacity: 0; transform: translate(-50%, -50%) scale(2) rotate(-18deg); } }

.specs { display: flex; flex-wrap: wrap; gap: 6px; margin: 0; }
.specs span { display: inline-flex; align-items: center; gap: 4px; padding: 5px 10px; border-radius: 999px; background: var(--paper); font-size: 12.5px; font-weight: 700; }
.hbar { display: flex; align-items: center; gap: 10px; color: var(--muted); font-size: 12px; font-weight: 700; }
.hbar i { flex: 1; height: 6px; overflow: hidden; border-radius: 6px; background: var(--paper-2); }
.hbar b { display: block; width: var(--s); height: 100%; border-radius: inherit; background: var(--ok); transition: width 1.3s var(--ease-out) .35s; }
.hbar strong { color: var(--ok); font: 800 19px/1 var(--display); }
.js .hbar b { width: 0; }
.js .in .hbar b { width: var(--s); }
.card-foot { display: flex; align-items: center; justify-content: space-between; gap: 8px; margin-top: auto; padding-top: 12px; border-top: 1px solid var(--line); }
.card-price { display: flex; flex-direction: column; gap: 3px; min-width: 0; }
.price { font: 800 30px/1 var(--display); letter-spacing: .01em; }
.card-price small { color: var(--muted); font-size: 12.5px; font-weight: 700; }
.card.is-sold .price { color: var(--muted); text-decoration: line-through; text-decoration-thickness: 2px; }
.card-go { display: grid; place-items: center; flex: none; width: 42px; height: 42px; border-radius: 50%; background: var(--ink); color: #fff; transition: background .25s; }
.card-go svg { width: 17px; height: 17px; transition: transform .3s var(--ease-out); }
.card:hover .card-go { background: var(--red); }
.card:hover .card-go svg { transform: translateX(2px) rotate(-45deg); }
.card-perks { display: flex; flex-wrap: wrap; gap: 4px 12px; margin: -2px 0 0; color: var(--ok); font-size: 12.5px; font-weight: 800; }
.card-perks span { display: inline-flex; align-items: center; gap: 4px; white-space: nowrap; }
.card-perks svg { flex: none; width: 14px; height: 14px; }
.card-where { display: flex; align-items: center; gap: 5px; margin: -4px 0 0; color: var(--muted); font-size: 12.5px; font-weight: 700; }
.card-where svg { width: 13px; height: 13px; color: var(--red); }

/* ---------- odometer: six wheels, each 0-9 twice, spun to --n on .in ---------- */
.odo { display: inline-flex; align-items: center; gap: 8px; }
.odo-w { display: inline-flex; gap: 3px; }
.odo i { --h: 30px; display: block; width: 23px; height: var(--h); overflow: hidden; border-radius: 5px; background: var(--ink); color: #fff; font: 700 17px/var(--h) var(--mono); font-style: normal; text-align: center;
  box-shadow: inset 0 9px 8px -6px rgba(0, 0, 0, .7), inset 0 -9px 8px -6px rgba(0, 0, 0, .7); }
.odo i:last-child { background: var(--red); }
.odo b { display: block; font-weight: inherit; line-height: var(--h); transform: translateY(calc((var(--n) + 10) * var(--h) * -1)); transition: transform 1.7s cubic-bezier(.2, .75, .15, 1) calc(var(--k) * 90ms); }
.js .odo b { transform: none; }
.js .in .odo b, .js .odo-row.in .odo b { transform: translateY(calc((var(--n) + 10) * var(--h) * -1)); }
.odo u { color: var(--muted); font: 800 11px/1 var(--body); letter-spacing: .14em; text-decoration: none; text-transform: uppercase; }
.odo-lg i { --h: 40px; width: 31px; font-size: 23px; border-radius: 6px; }

/* ---------- why (dark band) ---------- */
.why { position: relative; margin-top: 84px; padding: 84px 0; overflow: hidden; background: var(--ink); color: #fff; }
.why::before { content: ""; position: absolute; inset: 0; background:
  radial-gradient(50% 70% at 100% 0%, rgba(215, 38, 45, .22), transparent 70%),
  repeating-linear-gradient(135deg, rgba(255, 255, 255, .025) 0 2px, transparent 2px 9px); pointer-events: none; }
.why-in { position: relative; display: grid; gap: 44px; align-items: center; }
@media (min-width: 900px) { .why-in { grid-template-columns: minmax(0, 1.2fr) minmax(0, .8fr); gap: 72px; } }
.why h2 { margin-bottom: 34px; font-size: clamp(44px, 6.6vw, 84px); line-height: .9; }
.why-list { display: grid; gap: 22px; }
@media (min-width: 640px) { .why-list { grid-template-columns: 1fr 1fr; gap: 28px 32px; } }
.why-list > div { display: flex; gap: 16px; }
.why-n { flex: none; width: 54px; color: transparent; -webkit-text-stroke: 1.5px var(--red); font: 800 46px/1 var(--display); }
.why h3 { margin-bottom: 4px; font: 800 18px/1.3 var(--body); }
.why p { margin: 0; color: #A9ACB4; font-size: 15px; }
.why-card { justify-self: center; width: 100%; max-width: 380px; padding: 30px; border: 1px solid var(--ink-line); border-radius: 22px; background: linear-gradient(160deg, var(--ink-3), var(--ink-2)); text-align: center; box-shadow: 0 40px 70px -30px rgba(0, 0, 0, .8); }
.g-head { display: flex; align-items: center; justify-content: center; gap: 8px; color: #C3C6CD; font-weight: 700; font-size: 14px; }
.g-score { display: block; margin: 10px 0 4px; font: 800 110px/1 var(--display); }
.why-card p { margin: 10px 0 20px; }
.stars { display: inline-flex; gap: 2px; color: #D6D4CE; }
.stars i { display: grid; }
.stars i.on { color: var(--gold); }
.stars svg { width: 18px; height: 18px; }
.stars-lg svg { width: 26px; height: 26px; }
.why-card .stars { color: var(--ink-line); }
.why-plain { margin-top: 72px; }
.why-plain .sec-head { margin-bottom: 30px; }

/* ---------- videos ---------- */
.vids { display: grid; gap: 16px; }
@media (min-width: 640px) { .vids { grid-template-columns: repeat(2, minmax(0, 1fr)); } }
@media (min-width: 1000px) { .vids { grid-template-columns: repeat(3, minmax(0, 1fr)); } }
.vids-shorts { grid-template-columns: repeat(2, minmax(0, 1fr)); }
@media (min-width: 760px) { .vids-shorts { grid-template-columns: repeat(4, minmax(0, 1fr)); } }
.yt { position: relative; display: block; width: 100%; aspect-ratio: 16 / 9; padding: 0; border: 0; border-radius: var(--radius); overflow: hidden; background: #000; color: #fff; cursor: pointer; text-align: left; }
.yt-short { aspect-ratio: 9 / 16; }
.yt img { width: 100%; height: 100%; object-fit: cover; opacity: .9; transition: transform .6s var(--ease-out), opacity .3s; }
.yt:hover img { transform: scale(1.04); opacity: 1; }
.yt::after { content: ""; position: absolute; inset: 45% 0 0; background: linear-gradient(transparent, rgba(0, 0, 0, .85)); pointer-events: none; }
.yt-play { position: absolute; left: 50%; top: 50%; z-index: 1; display: grid; place-items: center; width: 64px; height: 64px; margin: -32px 0 0 -32px; border-radius: 50%; background: var(--red); box-shadow: 0 10px 30px rgba(215, 38, 45, .5); transition: transform .3s var(--ease-back); }
.yt-play svg { width: 22px; height: 22px; margin-left: 3px; }
.yt:hover .yt-play { transform: scale(1.1); }
.yt-title { position: absolute; left: 14px; right: 14px; bottom: 12px; z-index: 1; display: -webkit-box; overflow: hidden; font: 700 14.5px/1.35 var(--body); -webkit-line-clamp: 2; -webkit-box-orient: vertical; }
.yt iframe { position: absolute; inset: 0; width: 100%; height: 100%; border: 0; }

/* ---------- reviews ---------- */
/* Google reviews strip: slides one card at a time (site.js), swipe or arrows. */
.rv-score { display: inline-flex; flex-wrap: wrap; align-items: center; gap: 6px 8px; padding: 8px 14px; border: 1px solid var(--line); border-radius: 999px; background: var(--card); color: var(--text); text-decoration: none; white-space: nowrap; }
.rv-score b { font: 800 22px/1 var(--display); }
.rv-score span { color: var(--muted); font-size: 13.5px; font-weight: 700; }
.rv-score .stars svg { width: 15px; height: 15px; }
.rv { position: relative; margin: 0 -16px; }
@media (min-width: 768px) { .rv { margin: 0; } }
.rv-track { display: flex; align-items: stretch; gap: 14px; padding: 4px 16px 20px; overflow-x: auto; scroll-snap-type: x mandatory; scroll-padding: 0 16px; scrollbar-width: none; outline: none; }
.rv-track::-webkit-scrollbar { display: none; }
@media (min-width: 768px) { .rv-track { padding: 4px 2px 20px; scroll-padding: 0; gap: 18px; } }
.review { display: flex; flex: 0 0 min(330px, 84%); flex-direction: column; gap: 14px; margin: 0; padding: 22px; scroll-snap-align: start; background: var(--card); border: 1px solid var(--line); border-radius: var(--radius); box-shadow: 0 18px 40px -34px rgba(11, 11, 13, .5); }
@media (min-width: 768px) { .review { flex-basis: calc((100% - 18px) / 2); } }
@media (min-width: 1100px) { .review { flex-basis: calc((100% - 36px) / 3); } }
.review-top { display: flex; align-items: center; justify-content: space-between; }
.review blockquote { margin: 0; font-size: 15.5px; line-height: 1.6; white-space: pre-line; }
.review blockquote.folded { display: -webkit-box; overflow: hidden; -webkit-line-clamp: 6; -webkit-box-orient: vertical; }
.rv-more { align-self: flex-start; margin-top: -6px; padding: 0; border: 0; background: none; color: var(--red); font: 800 14px/1.4 var(--body); cursor: pointer; }
.review figcaption { display: flex; align-items: center; gap: 12px; margin-top: auto; padding-top: 4px; }
.review figcaption b { display: block; font-size: 15px; }
.review figcaption small { color: var(--muted); font-size: 13px; }
.avatar { display: grid; place-items: center; flex: none; width: 40px; height: 40px; border-radius: 50%; background: var(--av, var(--red)); color: #fff; font: 800 18px/1 var(--display); }
.rv-nav { position: absolute; top: calc(50% - 10px); display: none; place-items: center; width: 46px; height: 46px; border: 1px solid var(--line); border-radius: 50%; background: #fff; color: var(--ink); font-size: 28px; line-height: 1; cursor: pointer; box-shadow: 0 10px 24px -12px rgba(11, 11, 13, .5); transform: translateY(-50%); transition: background .2s, color .2s; }
.rv-nav:hover { background: var(--red); border-color: var(--red); color: #fff; }
.rv-prev { left: -22px; } .rv-next { right: -22px; }
@media (min-width: 900px) and (hover: hover) { .rv-nav { display: grid; } }
.rv-foot { margin: 4px 0 0; }

/* ---------- sell band, visit ---------- */
.sell-band, .insta-band { position: relative; display: grid; gap: 24px; align-items: center; padding: 34px 26px; overflow: hidden; border-radius: 22px; background: radial-gradient(70% 140% at 100% 100%, rgba(215, 38, 45, .45), transparent 62%), var(--ink); color: #fff; }
.sell-band h2, .insta-band h2 { color: #fff; }
.sell-band p, .insta-band p { margin: 12px 0 0; color: #B6B9C0; }
.sell-band .kicker, .insta-band .kicker { margin-bottom: 10px; }
.sell-band-cta { display: grid; gap: 10px; }
.band-rating { display: flex; align-items: center; gap: 10px; }
.band-rating .stars { color: var(--ink-line); }
@media (min-width: 900px) { .sell-band, .insta-band { grid-template-columns: 1fr 360px; padding: 48px 52px; } }
.insta-band { margin-top: 48px; background: radial-gradient(70% 140% at 100% 100%, rgba(221, 42, 123, .4), transparent 62%), var(--ink); }

.visit-grid { display: grid; gap: 16px; }
@media (min-width: 900px) { .visit-grid { grid-template-columns: minmax(0, 1.5fr) minmax(0, 1fr); } }
.map { position: relative; min-height: 320px; overflow: hidden; border-radius: var(--radius); background: var(--paper-2); border: 1px solid var(--line); }
.map iframe { position: absolute; inset: 0; width: 100%; height: 100%; border: 0; }
.map-sm { min-height: 220px; border-radius: 0; border: 0; border-bottom: 1px solid var(--line); }
.visit-card { display: flex; flex-direction: column; gap: 6px; padding: 26px; background: var(--card); border: 1px solid var(--line); border-radius: var(--radius); }
.visit-card h3 { margin-bottom: 8px; font: 800 30px/1 var(--display); text-transform: uppercase; }
.addr { display: flex; gap: 10px; margin: 6px 0 0; }
.addr svg { margin-top: 3px; color: var(--red); }
.visit-actions { display: flex; flex-wrap: wrap; gap: 8px; margin-top: 18px; }

/* ---------- footer ---------- */
.ftr { position: relative; margin-top: 96px; padding: 56px 0 0; overflow: hidden; background: var(--ink); color: #A9ACB4; font-size: 14.5px; }
.ftr-top { position: relative; z-index: 1; display: grid; gap: 34px; }
@media (min-width: 760px) { .ftr-top { grid-template-columns: repeat(2, minmax(0, 1fr)); } }
@media (min-width: 1040px) { .ftr-top { grid-template-columns: 1.4fr 1fr 1.25fr 1.2fr; } }
.ftr h4 { margin: 0 0 12px; color: #fff; font: 800 19px/1.2 var(--display); text-transform: uppercase; letter-spacing: .05em; }
.ftr p { margin: 8px 0 0; }
.ftr a { color: #fff; text-decoration: none; }
.ftr a:hover { color: var(--red); }
.ftr p a { display: inline-flex; align-items: center; gap: 6px; }
.ftr p svg { width: 16px; height: 16px; color: var(--red); }
.logo-ftr .logo-em { width: 66px; }
.ftr-tag { color: #fff !important; font: 800 26px/1.1 var(--display); letter-spacing: .02em; text-transform: uppercase; margin-top: 18px !important; }
.ftr-brand .socials { margin-top: 20px; color: #fff; }
.ftr-links { display: grid; gap: 8px; margin: 0; padding: 0; list-style: none; }
.ftr-hours { display: flex; align-items: center; gap: 6px; }
.ftr-bottom { position: relative; z-index: 1; display: flex; flex-wrap: wrap; justify-content: space-between; gap: 8px 20px; margin-top: 44px; padding-top: 18px; padding-bottom: 22px; border-top: 1px solid var(--ink-line); color: #7C7F88; font-size: 13px; }
.ftr-bottom a { color: #C3C6CD; }
.ftr-big { display: flex; justify-content: center; height: clamp(90px, 14vw, 190px); margin-top: 8px; overflow: hidden; color: #17171B; pointer-events: none; user-select: none; }
.ftr-em { flex: none; width: min(560px, 88vw); aspect-ratio: 497 / 500; background: #1B1B20; -webkit-mask: url(/assets/logo-mono.svg) no-repeat top center / contain; mask: url(/assets/logo-mono.svg) no-repeat top center / contain; }
body:has(.sticky-cta) .ftr { padding-bottom: 76px; }
@media (min-width: 960px) { body:has(.sticky-cta) .ftr { padding-bottom: 0; } }

/* Floating buttons, bottom right: Instagram, YouTube, Facebook, then Call (phones only: the
   header has it on bigger screens) over a bigger WhatsApp. */
.fab-stack { position: fixed; right: 16px; bottom: calc(18px + env(safe-area-inset-bottom)); z-index: 55; display: flex; flex-direction: column; align-items: center; gap: 10px; animation: hero-rise .6s var(--ease-out) 1.2s both; }
html.intro-on .fab-stack { animation-delay: 3.6s; }
.fab, .fab-mini { display: grid; place-items: center; border-radius: 50%; color: #fff; box-shadow: 0 12px 26px -10px rgba(0, 0, 0, .55); transition: transform .3s var(--ease-back); }
.fab { width: 58px; height: 58px; background: #25D366; }
.fab svg { width: 30px; height: 30px; }
.fab-mini { width: 44px; height: 44px; background: var(--bg); }
.fab-call { width: 52px; height: 52px; background: var(--red); }
.fab-call svg { width: 24px; height: 24px; }
@media (min-width: 640px) { .fab-call { display: none; } }
/* Phones: WhatsApp + an arrow that opens Call, Instagram, YouTube and Facebook (all five covered
   the page, 20 Oct 2026). Laptops show them all, no arrow. Opening/closing: site.js. */
.fab-more { display: flex; flex-direction: column; align-items: center; gap: 10px; }
.fab-toggle { display: none; }
@media (max-width: 639px) {
  .fab-more { display: none; }
  .fab-stack.open .fab-more { display: flex; }
  .fab-stack.open .fab-more > * { animation: fab-pop .32s var(--ease-back) both; animation-delay: calc(var(--k) * 45ms); }
  .fab-toggle { display: grid; place-items: center; width: 40px; height: 40px; padding: 0; border: 1px solid rgba(255, 255, 255, .14); border-radius: 50%; background: rgba(20, 20, 24, .92); color: #fff; box-shadow: 0 10px 22px -10px rgba(0, 0, 0, .6); cursor: pointer; }
  .fab-toggle svg { width: 20px; height: 20px; transition: transform .3s var(--ease-out); }
  .fab-stack.open .fab-toggle svg { transform: rotate(180deg); }
}
@keyframes fab-pop { from { opacity: 0; transform: translateY(14px) scale(.6); } to { opacity: 1; transform: none; } }
.fab-mini svg { width: 20px; height: 20px; }
.fab:hover, .fab-mini:hover { transform: scale(1.1); }
@media (max-width: 640px) { .fab-mini { width: 40px; height: 40px; } .fab-stack { gap: 8px; } }

/* ---------- inner page hero ---------- */
.phero { position: relative; padding: 18px 0 56px; overflow: hidden; background: var(--ink); color: #fff; }
.phero::before { content: ""; position: absolute; inset: 0; background:
  radial-gradient(45% 90% at 100% 0%, rgba(215, 38, 45, .3), transparent 70%),
  repeating-linear-gradient(135deg, rgba(255, 255, 255, .025) 0 2px, transparent 2px 9px); pointer-events: none; }
.phero .wrap { position: relative; }
.phero::after { content: ""; position: absolute; right: -50px; top: 54%; display: none; width: min(420px, 32vw); aspect-ratio: 1; background: #fff; -webkit-mask: url(/assets/logo-mono.svg) no-repeat center / contain; mask: url(/assets/logo-mono.svg) no-repeat center / contain; opacity: .06; transform: translateY(-50%) rotate(-8deg); pointer-events: none; }
@media (min-width: 900px) { .phero::after { display: block; } }
.phero .crumbs, .phero .crumbs a { color: #8D9099; }
.phero h1 { margin-top: 6px; font: 800 clamp(48px, min(8.4vw, 13svh), 104px)/.88 var(--display); text-transform: uppercase; animation: hero-rise .7s var(--ease-out) both; }
.phero h1 .kicker { display: flex; width: fit-content; margin: 0 0 12px; }
.phero .lead { animation: hero-rise .7s var(--ease-out) .12s both; }
@media (min-width: 768px) { .phero { padding: 26px 0 80px; } }
@media (min-width: 768px) and (max-height: 860px) { .phero { padding: 18px 0 48px; } }
.jump { display: flex; flex-wrap: wrap; gap: 8px; margin-top: 28px; }
.jump a { display: inline-flex; align-items: center; gap: 8px; padding: 10px 16px; border: 1px solid rgba(255, 255, 255, .2); border-radius: 999px; color: #fff; font-weight: 800; font-size: 14.5px; text-decoration: none; transition: background .2s, border-color .2s; }
.jump a svg { width: 17px; height: 17px; color: var(--red); transition: color .2s; }
.jump a:hover { background: var(--red); border-color: var(--red); }
.jump a:hover svg { color: #fff; }

/* ---------- about ---------- */
.about-split { display: grid; gap: 36px; }
@media (min-width: 960px) { .about-split { grid-template-columns: minmax(0, 1.2fr) minmax(0, 1fr); gap: 64px; align-items: center; } }
.about-text h2 { margin-bottom: 20px; }
.about-text p { max-width: 62ch; margin: 0 0 14px; color: #3A3C42; font-size: 16.5px; }
.about-stats { display: grid; grid-template-columns: 1fr 1fr; gap: 12px; }
.about-stats div { display: flex; flex-direction: column; gap: 6px; padding: 22px; background: var(--card); border: 1px solid var(--line); border-radius: var(--radius); }
.about-stats b { font: 800 54px/1 var(--display); }
.about-stats b em { color: var(--gold); font-size: .55em; font-style: normal; vertical-align: .4em; }
.about-stats span { color: var(--muted); font-size: 14px; font-weight: 700; }
.values { display: grid; gap: 14px; }
@media (min-width: 640px) { .values { grid-template-columns: repeat(2, minmax(0, 1fr)); } }
@media (min-width: 1040px) { .values { grid-template-columns: repeat(4, minmax(0, 1fr)); } }
.value { padding: 24px; border: 1px solid var(--ink-line); border-radius: var(--radius); background: var(--ink-2); }
.value .svc-ico { background: rgba(215, 38, 45, .14); }
.value h3 { margin: 16px 0 6px; font: 800 26px/1 var(--display); text-transform: uppercase; }
.shots { display: grid; grid-template-columns: repeat(2, 1fr); gap: 10px; }
@media (min-width: 760px) { .shots { grid-template-columns: repeat(4, 1fr); } }
.shots img { width: 100%; aspect-ratio: 1; object-fit: cover; border-radius: 14px; }

/* ---------- services page ---------- */
.svc-sections { display: grid; gap: 18px; padding-top: 56px; }
.svc-row { position: relative; display: grid; gap: 26px; padding: 30px 24px; overflow: hidden; background: var(--card); border: 1px solid var(--line); border-radius: 22px; scroll-margin-top: 96px; }
@media (min-width: 900px) { .svc-row { grid-template-columns: minmax(0, 1.2fr) minmax(0, 1fr); align-items: center; gap: 48px; padding: 44px 48px; } }
.svc-num { position: absolute; top: 10px; right: 20px; color: transparent; -webkit-text-stroke: 1.5px var(--line); font: 800 110px/1 var(--display); pointer-events: none; }
.svc-row h2 { margin-bottom: 14px; }
.svc-row p { max-width: 58ch; margin: 0 0 22px; color: #3A3C42; }
.svc-steps { display: grid; gap: 10px; margin: 0; padding: 0; list-style: none; counter-reset: s; }
.svc-steps li { display: flex; align-items: center; gap: 14px; padding: 14px 16px; border-radius: 12px; background: var(--paper); font-weight: 700; }
.svc-steps b { display: grid; place-items: center; flex: none; width: 32px; height: 32px; border-radius: 50%; background: var(--ink); color: #fff; font: 800 16px/1 var(--display); }
.faq { display: grid; gap: 10px; max-width: 880px; }
.faq details { background: var(--card); border: 1px solid var(--line); border-radius: 14px; }
.faq summary { position: relative; padding: 18px 54px 18px 20px; font-weight: 800; font-size: 16.5px; cursor: pointer; list-style: none; }
.faq summary::-webkit-details-marker { display: none; }
.faq summary i { position: absolute; right: 20px; top: 50%; width: 16px; height: 16px; margin-top: -8px; }
.faq summary i::before, .faq summary i::after { content: ""; position: absolute; left: 0; right: 0; top: 7px; height: 2px; background: var(--red); transition: transform .3s var(--ease-out); }
.faq summary i::after { transform: rotate(90deg); }
.faq details[open] summary i::after { transform: rotate(0); }
.faq details p { margin: 0; padding: 0 20px 20px; color: #3A3C42; }

/* ---------- forms ---------- */
.eform { display: grid; gap: 16px; padding: 24px 20px; background: var(--card); border: 1px solid var(--line); border-radius: 20px; box-shadow: 0 30px 60px -40px rgba(11, 11, 13, .35); scroll-margin-top: 96px; }
@media (min-width: 640px) { .eform { padding: 32px; } }
.eform h3 { font: 800 30px/1 var(--display); text-transform: uppercase; }
.eform > .muted { margin: -8px 0 0; }
.fields-2 { display: grid; gap: 14px; }
@media (min-width: 600px) { .fields-2 { grid-template-columns: 1fr 1fr; } }
.field { display: flex; flex-direction: column; gap: 6px; min-width: 0; }
.field > span { font-size: 13.5px; font-weight: 800; }
.field em { color: var(--muted); font-weight: 600; font-style: normal; }
.field input, .field select, .field textarea { width: 100%; min-height: 50px; padding: 12px 14px; border: 1.5px solid var(--line); border-radius: 10px; background: #fff; color: var(--text); font: 600 16px/1.4 var(--body); transition: border-color .2s, box-shadow .2s; }
.field textarea { resize: vertical; min-height: 110px; }
.field input:focus, .field select:focus, .field textarea:focus { outline: none; border-color: var(--ink); box-shadow: 0 0 0 4px rgba(11, 11, 13, .08); }
.field input:user-invalid { border-color: var(--red); }
.seg { display: flex; gap: 6px; flex-wrap: wrap; }
.seg label { position: relative; flex: 1; min-width: 56px; }
.seg input { position: absolute; inset: 0; width: 100%; height: 100%; min-height: 0; margin: 0; opacity: 0; pointer-events: none; }
.seg span { display: grid; place-items: center; min-height: 50px; padding: 0 10px; border: 1.5px solid var(--line); border-radius: 10px; font-weight: 800; cursor: pointer; transition: background .2s, color .2s, border-color .2s; }
.seg input:checked + span { background: var(--ink); border-color: var(--ink); color: #fff; }
.seg input:focus-visible + span { outline: 3px solid var(--red); outline-offset: 2px; }
.steps { display: flex; gap: 8px; margin: 0 0 4px; padding: 0; list-style: none; }
.steps li { display: flex; align-items: center; gap: 8px; flex: 1; padding: 10px 12px; border-radius: 10px; background: var(--paper); color: var(--muted); font-size: 13.5px; font-weight: 800; }
.steps li.on { background: var(--ink); color: #fff; }
.steps b { display: grid; place-items: center; flex: none; width: 24px; height: 24px; border-radius: 50%; background: var(--red); color: #fff; font: 800 14px/1 var(--display); }
.photo-note { display: flex; gap: 14px; padding: 16px; border: 1.5px dashed #E7B9BB; border-radius: 14px; background: var(--red-soft); }
.photo-note > svg { width: 28px; height: 28px; color: var(--red); }
.photo-note b { display: block; font-size: 15.5px; }
.photo-note p { margin: 4px 0 0; color: #4A3133; font-size: 14.5px; }
.form-msg { margin: 0; padding: 12px 14px; border-radius: 10px; font-weight: 700; }
.form-msg.ok { background: var(--ok-soft); color: var(--ok); }
.form-msg.err { background: var(--red-soft); color: var(--red-2); }
.trap { position: absolute; left: -9999px; width: 1px; height: 1px; overflow: hidden; }
.fine { margin: 0; color: var(--muted); font-size: 12.5px; }
.eform .btn-xl { width: 100%; }
.eform.is-done > :not(.form-msg):not(h3) { display: none; }
.eform.is-next > :not(.steps):not(.sell-next) { display: none; }
.sell-next { display: grid; gap: 14px; }
.sell-next p { margin: 0; font-size: 16px; }
.sell-next .fine { font-size: 13.5px; }
.sell-saved { display: flex; align-items: center; gap: 10px; padding: 12px 14px; border-radius: 10px; background: var(--ok-soft); color: var(--ok); font-weight: 800; }
.sell-saved svg { flex: none; width: 22px; height: 22px; }

.sell-grid { display: grid; gap: 22px; }
@media (min-width: 1000px) { .sell-grid { grid-template-columns: minmax(0, 1.5fr) minmax(0, 1fr); align-items: start; } .sell-side { position: sticky; top: 96px; } }
.sell-side { display: grid; gap: 14px; }
.side-card { padding: 22px; background: var(--card); border: 1px solid var(--line); border-radius: var(--radius); }
.side-card h3 { margin-bottom: 14px; font: 800 24px/1 var(--display); text-transform: uppercase; }
.side-card .svc-steps li { padding: 11px 12px; font-size: 14.5px; }
.side-card .socials { margin-top: 14px; }
.side-dark { background: var(--ink); border-color: var(--ink); color: #fff; }
.side-dark p { margin: 0 0 16px; color: #B6B9C0; }
.side-dark .btn { width: 100%; margin-top: 8px; }
.ticks { display: grid; gap: 8px; margin: 0; padding: 0; list-style: none; font-weight: 700; }
.ticks li { display: flex; align-items: center; gap: 10px; }
.ticks svg { color: var(--ok); }
.num { display: flex; justify-content: space-between; gap: 12px; margin: 8px 0 0; padding: 10px 0; border-top: 1px solid var(--line); }
.num span { color: var(--muted); font-weight: 700; }
.num a { font-weight: 800; text-decoration: none; }

/* ---------- contact ---------- */
.contact-grid { display: grid; gap: 22px; }
@media (min-width: 1000px) { .contact-grid { grid-template-columns: minmax(0, 1fr) minmax(0, 1.05fr); align-items: start; } .contact-form { position: sticky; top: 96px; } }
.contact-info { display: grid; gap: 14px; }
.room { overflow: hidden; background: var(--card); border: 1px solid var(--line); border-radius: var(--radius); }
.room-body { padding: 22px; }
.room h2 { font-size: clamp(30px, 3.4vw, 40px); }

/* ---------- gallery ---------- */
.tabs { display: flex; flex-wrap: wrap; gap: 8px; margin-bottom: 22px; }
.tabs a { display: inline-flex; align-items: center; gap: 6px; padding: 9px 16px; border: 1.5px solid var(--line); border-radius: 999px; background: #fff; font-weight: 800; font-size: 14.5px; text-decoration: none; }
.tabs a small { color: var(--muted); }
.tabs a[aria-current] { background: var(--ink); border-color: var(--ink); color: #fff; }
.tabs a[aria-current] small { color: #A9ACB4; }
/* Gallery: "Our showroom", then "Happy riders" (functions/gallery.js). */
.gal-part + .gal-part { margin-top: 56px; }
.gal-part .sec-head { margin-bottom: 8px; }
.gal-n { color: var(--muted); font: 700 .45em var(--body); letter-spacing: 0; vertical-align: .35em; }
.gal-lead { max-width: 620px; margin: 0 0 20px; color: var(--muted); }
.masonry { columns: 2 180px; column-gap: 12px; }
@media (min-width: 900px) { .masonry { columns: 3 260px; column-gap: 16px; } }
.m-item { position: relative; margin: 0 0 12px; break-inside: avoid; overflow: hidden; border-radius: 14px; background: var(--paper-2); }
@media (min-width: 900px) { .m-item { margin-bottom: 16px; } }
.m-item a { display: block; cursor: zoom-in; }
.m-item img { width: 100%; height: auto; transition: transform .7s var(--ease-out); }
.m-item:hover img { transform: scale(1.04); }
.m-item figcaption { position: absolute; left: 0; right: 0; bottom: 0; padding: 26px 14px 12px; background: linear-gradient(transparent, rgba(0, 0, 0, .75)); color: #fff; font-size: 13.5px; font-weight: 700; }
/* Phones: a 2-column grid of equal tiles, the first photo of each section full width like a cover
   (19 photos one per row were ~11 screens long, 20 Oct 2026). A lone last tile goes full width too,
   so no row has a gap. Wider screens keep the masonry columns above. */
@media (max-width: 699px) {
  .masonry { columns: auto; display: grid; grid-template-columns: 1fr 1fr; gap: 10px; }
  .m-item { margin: 0; aspect-ratio: 3 / 4; border-radius: 12px; }
  .m-item:first-child, .m-item:last-child:nth-child(even) { grid-column: 1 / -1; aspect-ratio: 4 / 5; }
  .m-item a { height: 100%; }
  .m-item img { height: 100%; object-fit: cover; }
  .m-item figcaption { padding: 22px 10px 9px; font-size: 12.5px; line-height: 1.3; }
  .m-item:first-child figcaption, .m-item:last-child:nth-child(even) figcaption { padding: 26px 14px 12px; font-size: 13.5px; }
}
.lightbox { position: fixed; inset: 0; z-index: 120; display: grid; place-items: center; padding: 56px 12px; background: rgba(5, 5, 6, .94); }
.lightbox img { max-width: 100%; max-height: 100%; object-fit: contain; border-radius: 6px; }
.lb-close, .lb-nav { position: absolute; display: grid; place-items: center; width: 46px; height: 46px; border: 0; border-radius: 50%; background: rgba(255, 255, 255, .12); color: #fff; font-size: 30px; line-height: 1; cursor: pointer; }
.lb-close { top: 12px; right: 12px; }
.lb-prev { left: 12px; top: 50%; margin-top: -23px; }
.lb-next { right: 12px; top: 50%; margin-top: -23px; }
.lb-cap { position: absolute; left: 0; right: 0; bottom: 14px; margin: 0; color: #D6D4CE; font-weight: 700; text-align: center; }

/* ---------- listing page ---------- */
.crumbs { display: flex; flex-wrap: wrap; gap: 6px; margin: 22px 0 12px; color: var(--muted); font-size: 14px; font-weight: 600; }
.crumbs a { color: var(--muted); }
.list-head h1 { font: 800 clamp(40px, 6vw, 72px)/.92 var(--display); text-transform: uppercase; animation: hero-rise .7s var(--ease-out) both; }
.list-search { margin-top: 20px; box-shadow: none; border: 1.5px solid var(--line); }
.list { display: grid; gap: 28px; padding-top: 26px; }
@media (min-width: 960px) { .list { grid-template-columns: 250px minmax(0, 1fr); align-items: start; } .filters { position: sticky; top: 96px; max-height: calc(100vh - 110px); overflow: auto; } }

.filters { display: none; }
.filters fieldset { margin: 0; padding: 16px 0; border: 0; border-top: 1px solid var(--line); }
.filters legend { padding: 0; margin-bottom: 8px; font-size: 12px; font-weight: 800; letter-spacing: .12em; text-transform: uppercase; color: var(--muted); }
.filters-top { display: flex; align-items: center; gap: 12px; padding-bottom: 12px; }
.filters-top b { font: 800 26px/1 var(--display); text-transform: uppercase; }
.filters-top a { margin-left: auto; color: var(--red); font-size: 14px; font-weight: 800; }
.filters-x { display: none; }
.opt { display: flex; align-items: center; gap: 10px; padding: 6px 0; cursor: pointer; font-size: 15px; font-weight: 600; }
.opt input { width: 18px; height: 18px; margin: 0; accent-color: var(--red); }
.opt small { margin-left: auto; color: var(--muted); }
.filters-done { display: none; }
@media (min-width: 960px) { .filters { display: block; } }
@media (max-width: 959px) {
  .filters-open .filters { display: block; position: fixed; inset: 0; z-index: 60; overflow: auto; padding: 16px 16px 100px; background: #fff; animation: sheet-up .35s var(--ease-out); }
  .filters-x { display: grid; place-items: center; width: 40px; height: 40px; border: 0; border-radius: 10px; background: var(--paper); font-size: 26px; line-height: 1; cursor: pointer; }
  .filters-open .filters-done { display: block; position: fixed; left: 0; right: 0; bottom: 0; padding: 12px 16px calc(12px + env(safe-area-inset-bottom)); background: #fff; border-top: 1px solid var(--line); }
  .filters-done .btn { width: 100%; }
}
@keyframes sheet-up { from { transform: translateY(30px); opacity: 0; } to { transform: none; opacity: 1; } }

.results-bar { display: flex; align-items: center; flex-wrap: wrap; gap: 10px; margin-bottom: 14px; }
.results-bar p { margin: 0 auto 0 0; font-weight: 600; }
.btn-filters { min-height: 40px; padding: 0 12px; }
@media (min-width: 960px) { .btn-filters { display: none; } }
.sort { display: inline-flex; align-items: center; gap: 8px; font-size: 14px; font-weight: 600; color: var(--muted); }
.sort select { height: 40px; padding: 0 10px; border: 1.5px solid var(--line); border-radius: 10px; background: #fff; font: 700 14px var(--body); color: var(--text); }
.active-chips { display: flex; flex-wrap: wrap; gap: 8px; margin-bottom: 16px; }
.active-chips a { display: inline-flex; align-items: center; gap: 6px; padding: 6px 10px 6px 12px; border-radius: 999px; background: var(--ink); color: #fff; font-size: 13.5px; font-weight: 700; text-decoration: none; }
.active-chips a span { font-size: 16px; line-height: 1; color: var(--red); }
.empty, .empty-page { padding: 44px 24px; background: var(--card); border: 1.5px dashed #D3D1CB; border-radius: var(--radius); text-align: center; }
.empty-page { margin-top: 40px; }
.empty h2, .empty-page h1 { font: 800 32px/1.05 var(--display); text-transform: uppercase; }
.empty p, .empty-page p { color: var(--muted); max-width: 460px; margin: 10px auto 0; }
.empty-actions { display: flex; flex-wrap: wrap; gap: 10px; justify-content: center; margin-top: 18px !important; }
.pager { display: flex; align-items: center; justify-content: space-between; gap: 12px; margin-top: 28px; color: var(--muted); font-size: 14px; font-weight: 600; }

/* ---------- bike detail ---------- */
/* --r = the photos' shape (width / height, set by the page). The photo box is that shape, so
   portrait phone photos get a portrait box: never dark bars beside them. Phones and tablets keep
   it within --gh tall; laptops give it the full photo column (taller than the screen for portrait
   photos: fitting it on one screen made it too small, 22 Oct). */
.detail-grid { --gh: min(720px, 100svh - 150px); display: grid; gap: 26px; }
@media (min-width: 960px) { .detail-grid { grid-template-columns: minmax(0, 1.4fr) minmax(0, 1fr); gap: 40px; align-items: start; } }
/* The details follow the photos while scrolling, on screens tall enough to show them whole. */
@media (min-width: 960px) and (min-height: 900px) { .info { position: sticky; top: 96px; } }

.gallery { width: min(100%, calc(var(--gh) * var(--r, 4 / 3))); min-width: 0; margin-inline: auto; animation: hero-rise .7s var(--ease-out) both; }
@media (min-width: 960px) { .gallery { width: auto; } }
.g-main { position: relative; aspect-ratio: var(--r, 4 / 3); background: #0E0E11; border-radius: var(--radius); overflow: hidden; }
.g-empty { display: grid; place-items: center; color: #868991; }
.g-track { display: flex; height: 100%; overflow-x: auto; scroll-snap-type: x mandatory; scrollbar-width: none; outline: none; }
.g-track::-webkit-scrollbar { display: none; }
.g-slide { position: relative; flex: 0 0 100%; height: 100%; margin: 0; overflow: hidden; scroll-snap-align: start; }
.g-slide img { position: relative; width: 100%; height: 100%; object-fit: cover; cursor: zoom-in; }
/* A photo of another shape (and every photo full screen) shows whole, on a blurred copy of itself. */
.g-slide .g-fill { position: absolute; inset: 0; display: none; filter: blur(24px) brightness(.6); transform: scale(1.15); }
.g-fit .g-fill, .gallery.is-full .g-fill { display: block; }
.g-fit img:not(.g-fill), .gallery.is-full .g-slide img:not(.g-fill) { object-fit: contain; }
.g-count { position: absolute; right: 12px; bottom: 12px; padding: 4px 10px; border-radius: 999px; background: rgba(0, 0, 0, .65); color: #fff; font-size: 13px; font-weight: 700; }
.g-nav, .g-close { position: absolute; display: grid; place-items: center; width: 44px; height: 44px; border: 0; border-radius: 50%; background: rgba(255, 255, 255, .94); color: var(--ink); font-size: 28px; line-height: 1; cursor: pointer; box-shadow: 0 2px 10px rgba(0, 0, 0, .25); }
.g-nav { top: 50%; transform: translateY(-50%); opacity: 0; transition: opacity .2s, background .2s, color .2s; }
.g-nav:hover { background: var(--red); color: #fff; }
.g-prev { left: 12px; } .g-next { right: 12px; }
.g-main:hover .g-nav, .g-nav:focus-visible { opacity: 1; }
@media (hover: none) { .g-nav { display: none; } }
.g-close { display: none; top: 14px; right: 14px; }
.g-stamp { position: absolute; top: 20px; left: 20px; padding: 8px 16px 6px; border: 3px solid #fff; border-radius: 8px; background: var(--red); color: #fff; font: 800 30px/1 var(--display); letter-spacing: .14em; text-transform: uppercase; transform: rotate(-6deg); box-shadow: 0 6px 18px rgba(0, 0, 0, .35); animation: stamp .55s var(--ease-back) .35s both; }
.g-stamp-booked { background: var(--gold); color: var(--ink); border-color: var(--ink); }
@keyframes stamp { from { opacity: 0; transform: scale(2.4) rotate(-18deg); } to { opacity: 1; transform: rotate(-6deg); } }
.g-thumbs { display: flex; gap: 8px; margin-top: 10px; overflow-x: auto; scrollbar-width: thin; padding-bottom: 4px; }
.g-thumbs button { flex: none; width: 88px; aspect-ratio: 4 / 3; padding: 0; border: 2px solid transparent; border-radius: 10px; overflow: hidden; background: #DDD; cursor: pointer; opacity: .6; transition: opacity .15s, border-color .15s; }
.g-thumbs button[aria-current] { border-color: var(--red); opacity: 1; }
.g-thumbs img { width: 100%; height: 100%; object-fit: cover; }
.credit { margin: 8px 0 0; color: var(--muted); font-size: 12px; }
/* The entrance animation leaves a transform on .gallery, which would pin the fixed photo box
   inside it (a thin strip) instead of the whole screen. */
.gallery.is-full { animation: none; }
.gallery.is-full .g-main { position: fixed; inset: 0; z-index: 100; aspect-ratio: auto; border-radius: 0; }
.gallery.is-full .g-slide img { cursor: default; }
.gallery.is-full .g-close { display: grid; }
.gallery.is-full .g-nav { opacity: 1; }

.info { min-width: 0; animation: hero-rise .7s var(--ease-out) .12s both; }
.info-top { display: flex; flex-wrap: wrap; align-items: center; gap: 10px 14px; margin-bottom: 16px; color: var(--muted); font-size: 14px; font-weight: 700; }
.info-top > span:not(.plate) { display: inline-flex; align-items: center; gap: 4px; }
.info-top svg { width: 15px; height: 15px; color: var(--red); }
.info-brand { margin: 0 0 6px; color: var(--red); font: 800 12.5px/1 var(--body); letter-spacing: .2em; text-transform: uppercase; }
.info h1 { font: 800 clamp(42px, 5vw, 64px)/.9 var(--display); text-transform: uppercase; }
.info-sub { margin: 10px 0 0; color: var(--muted); font-size: 16px; font-weight: 600; }
.price-row { display: flex; flex-wrap: wrap; align-items: center; gap: 12px; margin-top: 18px; }
.price-lg { font: 800 clamp(46px, 5vw, 58px)/1 var(--display); }
.price-lg.is-sold { color: var(--muted); text-decoration: line-through; text-decoration-thickness: 3px; }
.hchip { display: inline-flex; align-items: center; gap: 9px; margin-left: auto; padding: 5px 12px 5px 5px; border-radius: 12px; background: var(--ok-soft); color: var(--ok); text-decoration: none; }
.hchip b { display: grid; place-items: center; width: 42px; height: 42px; border-radius: 9px; background: var(--ok); color: #fff; font: 800 21px/1 var(--display); }
.hchip span { font-size: 12px; font-weight: 800; line-height: 1.25; }

.emi { margin: 12px 0 0; color: var(--muted); font-size: 15px; font-weight: 600; }
.emi b { color: var(--text); }
.odo-row { display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: 10px 12px; margin-top: 18px; padding: 12px 14px; border: 1px solid var(--line); border-radius: 14px; background: var(--card); }
.odo-row > span { color: var(--muted); font-size: 13px; font-weight: 700; }
.facts { display: grid; grid-template-columns: repeat(2, 1fr); gap: 1px; margin: 12px 0 0; background: var(--line); border: 1px solid var(--line); border-radius: 14px; overflow: hidden; }
.facts div { padding: 13px 15px; background: var(--card); }
.facts div:last-child:nth-child(odd) { grid-column: 1 / -1; }
.facts dt { color: var(--muted); font-size: 13px; font-weight: 600; }
.facts dd { margin: 2px 0 0; font-weight: 800; font-size: 16px; }
.facts dd.warn { color: var(--warn); }
.papers { display: flex; align-items: flex-start; gap: 10px; margin: 14px 0 0; padding: 13px 15px; border-radius: 14px; background: var(--ok-soft); color: var(--ok); font-size: 15px; }
.papers svg { margin-top: 2px; }
.papers-no { background: var(--warn-soft); color: var(--warn); }
/* Papers, servicing and finance: one green block, a tick per line. */
.assure { display: grid; margin-top: 14px; padding: 4px 0; border-radius: 14px; overflow: hidden; background: var(--ok-soft); }
.assure .papers { margin: 0; padding: 9px 15px; border-radius: 0; background: none; }
.assure .papers-no { margin: -4px 0 4px; padding-top: 13px; background: var(--warn-soft); }
.sold-note { margin-top: 16px; padding: 14px 16px; border-radius: 14px; background: var(--red-soft); color: var(--red-2); font-size: 15px; }
.cta { display: grid; gap: 10px; margin-top: 22px; }
.cta > .btn-xl { width: 100%; }
.cta .btn-wa.btn-xl::after { content: ""; position: absolute; inset: -2px; border-radius: 12px; border: 2px solid var(--wa); opacity: 0; animation: pulse 1.8s var(--ease-out) 1s 3; pointer-events: none; }
@keyframes pulse { 0% { opacity: .9; transform: scale(1); } 100% { opacity: 0; transform: scale(1.08, 1.4); } }
.cta-row { display: grid; grid-template-columns: 1fr 1fr; gap: 10px; }
.cta-row-1 { grid-template-columns: 1fr; }
.cta-row-3 { grid-template-columns: repeat(3, 1fr); }
.cta-row .btn { padding: 0 10px; }
.fine-sm, .info .fine { margin: 12px 0 0; }

.health { margin-top: 32px; padding: 24px; background: var(--card); border: 1px solid var(--line); border-radius: 22px; scroll-margin-top: 90px; }
.health-head { display: flex; flex-wrap: wrap; align-items: center; gap: 18px 24px; }
.health-head > div:last-child { flex: 1 1 260px; }
.health h2 { font-size: clamp(32px, 4vw, 46px); }
.checks { display: grid; gap: 8px; margin: 22px 0 0; padding: 0; list-style: none; }
@media (min-width: 760px) { .checks { grid-template-columns: 1fr 1fr; gap: 8px 14px; } }
.ck { display: flex; align-items: center; gap: 12px; padding: 11px 12px; border-radius: 12px; background: var(--paper); }
.ck-ico { display: grid; place-items: center; flex: none; width: 30px; height: 30px; border-radius: 50%; background: var(--ok); color: #fff; }
.ck-fair .ck-ico { background: var(--gold); color: var(--ink); }
.ck-fix .ck-ico { background: var(--red); }
.ck-none .ck-ico { background: var(--line); }
.ck-txt { display: flex; flex-direction: column; min-width: 0; margin-right: auto; }
.ck-txt small { color: var(--muted); font-size: 13px; }
.ck em { flex: none; color: var(--ok); font-size: 11.5px; font-style: normal; font-weight: 800; text-transform: uppercase; }
.ring { position: relative; flex: none; width: 124px; height: 124px; }
.ring svg { width: 100%; height: 100%; transform: rotate(-90deg); }
.ring circle { fill: none; stroke-width: 10; }
.ring-bg { stroke: var(--paper-2); }
.ring-fg { stroke: var(--ok); stroke-linecap: round; stroke-dasharray: 100; stroke-dashoffset: var(--off); transition: stroke-dashoffset 1.7s var(--ease-out) .25s; }
.js .ring-fg { stroke-dashoffset: 100; }
.js .in .ring-fg { stroke-dashoffset: var(--off); }
.ring > div { position: absolute; inset: 0; display: grid; place-content: center; text-align: center; }
.ring b { font: 800 42px/1 var(--display); }
.ring small { color: var(--muted); font-size: 12px; font-weight: 700; }

.video-sec { margin-top: 32px; padding: 24px; background: var(--ink); border-radius: 22px; color: #fff; scroll-margin-top: 90px; }
@media (min-width: 768px) { .video-sec { padding: 34px; } }
.video-head h2 { margin-bottom: 18px; color: #fff; font-size: clamp(30px, 4vw, 44px); }
.video-head .kicker svg { color: #FF1A3D; }
.video-frame { max-width: 960px; }
.video-frame.is-short { max-width: 360px; }
.video-sec .more { margin-top: 14px; color: #fff; }
.video-sec p { margin: 0; }

.notes { margin-top: 24px; padding: 24px; background: var(--card); border: 1px solid var(--line); border-radius: 22px; }
.notes h2 { font-size: 30px; }
.notes { scroll-margin-top: 90px; }
/* The shop's notes, usually the bike's Instagram caption: shown exactly as typed (line breaks,
   spaces, emojis). Long ones open at the first part with a fade; site.js shows "View full
   details" only when there's more. */
.notes-body { max-width: 72ch; }
.notes-body p { margin: 12px 0 0; white-space: pre-wrap; overflow-wrap: anywhere; font-size: 16px; line-height: 1.7; }
.js .notes-body.is-clamped { max-height: 430px; overflow: hidden; -webkit-mask-image: linear-gradient(#000 62%, transparent); mask-image: linear-gradient(#000 62%, transparent); }
.more-toggle { margin-top: 10px; padding: 4px 0; border: 0; background: none; color: var(--red); font: 800 14.5px/1.2 var(--body); text-decoration: underline; text-underline-offset: 3px; cursor: pointer; }
.detail-bottom { display: grid; gap: 16px; margin-top: 24px; }
@media (min-width: 960px) { .detail-bottom { grid-template-columns: minmax(0, 1fr) minmax(0, 1.2fr); align-items: start; } }
.visit { display: flex; flex-direction: column; align-items: flex-start; gap: 16px; padding: 26px; background: var(--card); border: 1px solid var(--line); border-radius: 22px; }
.visit h2 { font-size: 34px; }
.visit p { margin: 6px 0 0; }

.sticky-cta { display: none; }
@media (max-width: 959px) {
  .sticky-cta { position: fixed; left: 0; right: 0; bottom: 0; z-index: 50; display: flex; align-items: center; gap: 8px; padding: 10px 12px calc(10px + env(safe-area-inset-bottom)); background: rgba(255, 255, 255, .97); border-top: 1px solid var(--line); box-shadow: 0 -8px 24px rgba(11, 11, 13, .08); animation: sheet-up .5s var(--ease-out) .4s both; }
  .sticky-cta div { display: flex; flex-direction: column; min-width: 0; margin-right: auto; }
  .sticky-cta small { overflow: hidden; color: var(--muted); font-size: 12px; font-weight: 600; text-overflow: ellipsis; white-space: nowrap; }
  .sticky-cta strong { font: 800 26px/1.05 var(--display); }
}

/* ---------- toast ---------- */
.toast { position: fixed; left: 50%; bottom: 96px; z-index: 130; max-width: calc(100% - 32px); padding: 12px 18px; border-radius: 12px; background: var(--ink); color: #fff; font-size: 14.5px; font-weight: 700; box-shadow: 0 10px 30px rgba(0, 0, 0, .25); opacity: 0; pointer-events: none; transform: translate(-50%, 10px); transition: opacity .2s, transform .2s; }
.toast.show { opacity: 1; transform: translate(-50%, 0); }

/* ---------- opening animation: the shop's logo builds itself (home, once per session) ----------
   0.1s its white disc lights up like a headlight · 0.35s the bike rises in · 0.6s lamp flickers on
   0.85s wings open feather by feather · 1.15s MAHARASHTRA letter by letter · 1.2s stars
   1.65s BIKE SHOP · 1.95s tagline · 2.4s headlight flare · 2.7s fade to the page */
.intro { display: none; }
html.intro-lock body { overflow: hidden; }
html.intro-on .intro {
  position: fixed; inset: 0; z-index: 200; display: grid; place-items: center; overflow: hidden;
  background: radial-gradient(80% 60% at 50% 48%, #18181C 0%, #08080A 70%); color: var(--chrome); cursor: pointer;
  animation: i-out .55s ease 2.7s forwards;
}
html.intro-on .intro.skip { animation: i-out .35s ease forwards; }
html.intro-done .intro { display: none; }
@keyframes i-out { to { opacity: 0; visibility: hidden; } }

.i-stage { --w: min(380px, 78vw, 52svh); position: relative; display: flex; flex-direction: column; align-items: center; padding: 24px; animation: i-zoom .6s var(--ease-io) 2.5s forwards; }
@keyframes i-zoom { to { transform: scale(1.06); } }
.i-mark { width: var(--w); height: auto; overflow: visible; }
.i-bloom { position: absolute; left: 50%; top: 50%; width: 90vmin; height: 90vmin; margin: -45vmin 0 0 -45vmin; border-radius: 50%; background: radial-gradient(circle, rgba(215, 38, 45, .22), transparent 60%); opacity: 0; animation: i-fade .9s ease .5s forwards; pointer-events: none; }

.i-mark g, .i-mark path, .i-mark circle { transform-box: fill-box; }
.i-mark .lg-disc { transform-origin: 50% 50%; transform: scale(0); filter: drop-shadow(0 0 26px rgba(255, 255, 255, .3)); animation: i-pop .6s var(--ease-back) .1s forwards; }
.i-mark .lg-bike { opacity: 0; transform: translateY(8%); animation: i-rise .55s var(--ease-out) .35s forwards; }
.i-mark .lg-lamp { opacity: 0; animation: i-lamp .5s steps(1) .6s forwards; }
.i-mark .lg-wing-l path, .i-mark .lg-wing-r path { transform: scaleX(0); animation: i-wing .5s var(--ease-back) forwards; animation-delay: calc(.85s + var(--i) * .1s); }
.i-mark .lg-wing-l path { transform-origin: 100% 50%; }
.i-mark .lg-wing-r path { transform-origin: 0 50%; }
.i-mark .lg-stars path { opacity: 0; transform: scale(.3); transform-origin: 50% 50%; animation: i-pop .35s var(--ease-back) forwards; animation-delay: calc(1.2s + var(--i) * 60ms); }
.i-mark .lg-word path { opacity: 0; transform: scale(.4); transform-origin: 50% 50%; animation: i-pop .45s var(--ease-back) forwards; animation-delay: calc(1.15s + var(--i) * 40ms); }
.i-mark .lg-sub path { opacity: 0; transform: translateY(35%); animation: i-rise .6s var(--ease-out) forwards; animation-delay: calc(1.65s + var(--i) * .1s); }
.i-tag { max-width: 92vw; margin: 14px 0 0; color: var(--chrome); font: 700 13px/1.5 var(--body); letter-spacing: .32em; text-indent: .32em; text-align: center; text-transform: uppercase; opacity: 0; animation: i-fade .6s ease 1.95s forwards; }
.i-flare { position: absolute; left: 50%; top: calc(24px + var(--w) * .5); width: 260vmax; height: 260vmax; margin: -130vmax 0 0 -130vmax; border-radius: 50%; pointer-events: none;
  background: radial-gradient(circle, rgba(255, 255, 255, .95) 0%, rgba(255, 244, 236, .55) 6%, rgba(215, 38, 45, .18) 18%, transparent 40%);
  opacity: 0; transform: scale(.02); animation: i-flare .7s var(--ease-out) 2.4s forwards; }
.intro-skip { position: absolute; bottom: calc(26px + env(safe-area-inset-bottom)); color: #5E6068; font: 800 11px/1 var(--body); letter-spacing: .22em; text-transform: uppercase; opacity: 0; animation: i-fade .4s ease .6s forwards; }

@keyframes i-wing { to { transform: scaleX(1); } }
@keyframes i-fade { to { opacity: 1; } }
@keyframes i-rise { to { opacity: 1; transform: none; } }
@keyframes i-pop { to { opacity: 1; transform: none; } }
@keyframes i-lamp { 0% { opacity: .9; } 20% { opacity: .15; } 40% { opacity: 1; } 55% { opacity: .35; } 70%, 100% { opacity: 1; } }
@keyframes i-flare { 0% { opacity: 0; transform: scale(.02); } 30% { opacity: 1; } 100% { opacity: .9; transform: scale(1); } }

/* ---------- opening animation: "ignition", the default (home, once per session) ----------
   The same animation as our Kickstart Moto demo, in the shop's red, black and chrome; the logo build
   above is the backup (/?intro=logo). 0.1s dash lights flicker on · 0.35s rev counter fires, blips,
   idles · 0.95s screen shake + headlight burst · 1.0s MAHARASHTRA slams in letter by letter
   1.05s speed lines · 1.5s BIKE SHOP stamp · 2.25s the screen rips away to the right */
html.intro-on .intro-ign { background: radial-gradient(90% 70% at 50% 45%, #1F1F24 0%, #0B0B0D 65%); color: #fff; animation: ig-out .62s var(--ease-io) 2.25s forwards; }
html.intro-on .intro-ign.skip { animation: ig-out .4s var(--ease-io) forwards; }
html.intro-on.ign-on .hero { --d0: 2.45s; }

/* ---------- opening animation: "bikes in the letters", the default since 20 Oct (the client's pick) ----------
   Drawn on the canvas by /assets/intro-bikes.js (~7.3 s; it moves the hero's start to match and clears
   the black background when its red slash wipes to the page). If that script never runs, the black
   overlay fades by itself after 3.2 s. */
html.intro-on .intro-bk { background: #000; animation: i-out .4s ease 3.2s forwards; }
html.intro-on .intro-bk.run { animation: none; }
html.intro-on .intro-bk.end { animation: i-out .2s ease forwards; }
html.intro-on .intro-bk.skip { animation: i-out .35s ease forwards; }
.intro-bk canvas { position: absolute; inset: 0; width: 100%; height: 100%; display: block; }
.bk-vig { position: absolute; inset: 0; pointer-events: none; background: radial-gradient(ellipse at 50% 50%, transparent 45%, rgba(0, 0, 0, .55) 100%); }
.intro-bk .intro-skip { color: #6B6E76; letter-spacing: .2em; }
html.intro-on.bk-on .hero { --d0: 3.4s; }
html.intro-on.bk-on .fab-stack { animation-delay: 3.9s; }
html.intro-on.ign-on .fab-stack { animation-delay: 3.1s; }
@keyframes ig-out { from { transform: translateX(0) skewX(0); } to { transform: translateX(118%) skewX(-14deg); } }

.ig-stage { position: relative; display: flex; flex-direction: column; align-items: center; gap: 6px; padding: 24px; animation: ig-shake .4s linear .95s, ig-zoom .55s var(--ease-io) 2.15s forwards; }
@keyframes ig-shake {
  0%, 100% { transform: none; } 15% { transform: translate(-7px, 3px) rotate(-.6deg); } 30% { transform: translate(6px, -4px) rotate(.5deg); }
  45% { transform: translate(-5px, 2px); } 60% { transform: translate(4px, 3px); } 80% { transform: translate(-2px, -1px); }
}
@keyframes ig-zoom { to { transform: scale(1.18); opacity: 0; } }

.ig-tach { width: min(360px, 78vw); height: auto; overflow: visible; margin-bottom: -18px; }
.ig-track, .ig-redzone, .ig-fill { fill: none; stroke-width: 10; stroke-linecap: round; }
.ig-track { stroke: #2A2A31; }
.ig-redzone { stroke: rgba(215, 38, 45, .45); }
.ig-fill { stroke: var(--chrome); stroke-dasharray: 100; stroke-dashoffset: 100; animation: ig-fill 1.55s .35s forwards; }
.ig-ticks path { stroke: #6B6E76; stroke-width: 2.5; stroke-linecap: round; }
.ig-ticks path.red { stroke: var(--red); stroke-width: 3.5; }
.ig-ticks text { fill: #8B8E96; font: 700 17px var(--display); text-anchor: middle; }
.ig-ticks text.red { fill: var(--red); }
.ig-unit { fill: #6B6E76; font: 800 10px var(--body); letter-spacing: 1.5px; text-anchor: middle; }
.ig-needle { stroke: #fff; stroke-width: 4; stroke-linecap: round; transform-box: view-box; transform-origin: 160px 170px; transform: rotate(-90deg); animation: ig-needle 1.55s .35s forwards; }
.ig-hub { fill: var(--red); stroke: #fff; stroke-width: 3; }
@keyframes ig-needle {
  0%   { transform: rotate(-90deg); animation-timing-function: cubic-bezier(.5, 0, .2, 1); }
  38%  { transform: rotate(84deg);  animation-timing-function: ease-in-out; }
  52%  { transform: rotate(28deg);  animation-timing-function: cubic-bezier(.3, .8, .3, 1); }
  64%  { transform: rotate(72deg);  animation-timing-function: ease-in-out; }
  100% { transform: rotate(-50deg); }
}
@keyframes ig-fill {
  0%   { stroke-dashoffset: 100; animation-timing-function: cubic-bezier(.5, 0, .2, 1); }
  38%  { stroke-dashoffset: 3.3; stroke: var(--red); animation-timing-function: ease-in-out; }
  52%  { stroke-dashoffset: 34.4; animation-timing-function: cubic-bezier(.3, .8, .3, 1); }
  64%  { stroke-dashoffset: 10; stroke: var(--red); animation-timing-function: ease-in-out; }
  100% { stroke-dashoffset: 77.8; stroke: var(--chrome); }
}

.ig-glow { position: absolute; left: 50%; top: 46%; width: 130vmax; height: 130vmax; margin: -65vmax 0 0 -65vmax; border-radius: 50%; pointer-events: none;
  background: radial-gradient(circle, rgba(255, 247, 242, .75) 0%, rgba(215, 38, 45, .26) 14%, rgba(120, 12, 16, .16) 32%, transparent 58%);
  opacity: 0; transform: scale(.05); animation: ig-burst 1.2s var(--ease-out) .95s forwards; }
.ig-glow::after { content: ""; position: absolute; left: 10%; right: 10%; top: 50%; height: 3px; margin-top: -1.5px; background: linear-gradient(90deg, transparent, rgba(255, 255, 255, .85) 50%, transparent); }
@keyframes ig-burst { 0% { opacity: 0; transform: scale(.05); } 22% { opacity: 1; } 100% { opacity: .3; transform: scale(1); } }

.ig-lines { position: absolute; inset: 0; pointer-events: none; }
.ig-lines i { position: absolute; top: var(--y); left: 100%; width: var(--w); height: 2px; border-radius: 2px; background: linear-gradient(90deg, transparent, rgba(255, 255, 255, .8)); opacity: 0; animation: ig-streak .5s linear var(--d) 2; }
.ig-lines i:nth-child(3n) { height: 3px; background: linear-gradient(90deg, transparent, var(--red)); }
@keyframes ig-streak { from { opacity: .9; transform: translateX(0); } to { opacity: .9; transform: translateX(calc(-100vw - 120%)); } }

.ig-word { display: flex; font: 800 clamp(50px, 14vw, 150px)/.9 var(--display); letter-spacing: .01em; text-transform: uppercase; transform: skewX(-8deg); text-shadow: 0 0 40px rgba(215, 38, 45, .3); }
.ig-word span { display: inline-block; opacity: 0; transform: translateX(160px) skewX(-26deg); filter: blur(10px); animation: ig-slam .45s var(--ease-snap) forwards; animation-delay: calc(1s + var(--i) * 45ms); }
@keyframes ig-slam { to { opacity: 1; transform: none; filter: none; } }
.ig-tag { margin-top: 4px; padding: .42em .62em .38em 1.04em; background: var(--red); color: #fff; font: 800 clamp(21px, 5.6vw, 40px)/1 var(--body); letter-spacing: .42em; text-transform: uppercase; opacity: 0; transform: skewX(-8deg) scale(2.6); animation: ig-stamp .42s var(--ease-snap) 1.5s forwards; }
@keyframes ig-stamp { to { opacity: 1; transform: skewX(-8deg) scale(1); } }
.ig-sub { max-width: 92vw; margin: 14px 0 0; color: #9A9DA5; font: 800 12px/1.4 var(--body); letter-spacing: .22em; text-align: center; text-transform: uppercase; opacity: 0; animation: ig-fade .5s ease 1.7s forwards; }
@keyframes ig-fade { from { opacity: 0; transform: translateY(8px); } to { opacity: 1; transform: none; } }

.ig-dash { position: absolute; top: calc(30px + env(safe-area-inset-top)); left: 50%; display: flex; gap: 14px; transform: translateX(-50%); }
.ig-dash span { display: grid; place-items: center; width: 30px; height: 22px; border: 2px solid currentColor; border-radius: 6px; font: 800 12px/1 var(--body); opacity: 0; animation: ig-flick .6s steps(1) .1s forwards; box-shadow: 0 0 10px currentColor; }
.ig-dash .d-n { color: #5BC48A; }
.ig-dash .d-beam { color: #6E9BE8; border-radius: 11px; background: currentColor; animation-delay: .22s; }
.ig-dash .d-oil { color: #E2A64A; border-radius: 50%; width: 22px; background: currentColor; animation-delay: .34s; }
@keyframes ig-flick { 0% { opacity: 0; } 15% { opacity: 1; } 30% { opacity: .15; } 45% { opacity: 1; } 60% { opacity: .3; } 75%, 100% { opacity: 1; } }
.intro-ign .intro-skip { color: #6B6E76; letter-spacing: .2em; }

@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after { transition: none !important; animation: none !important; scroll-behavior: auto !important; }
  .reveal.pre, .card.pre { opacity: 1; transform: none; }
  .hero-media { transform: none; }
}

/* ---------- Brands & models ---------- */
/* /brands: a card per brand with its models. */
.bcards { display: grid; gap: 14px; }
@media (min-width: 700px) { .bcards { grid-template-columns: repeat(2, minmax(0, 1fr)); align-items: start; } }
@media (min-width: 1100px) { .bcards { grid-template-columns: repeat(3, minmax(0, 1fr)); } }
.bcard { padding: 18px; background: var(--card); border: 1px solid var(--line); border-radius: var(--radius); scroll-margin-top: 90px; }
.bcard-head { display: flex; align-items: center; gap: 14px; color: var(--text); text-decoration: none; }
.bcard-head .bmark { --s: .8; }
.bcard-head > .bmark { min-width: 64px; -webkit-mask-position: center; mask-position: center; }
.bcard-head b { display: block; font: 800 24px/1 var(--display); text-transform: uppercase; }
.bcard-head small { display: block; margin-top: 4px; color: var(--muted); font-size: 13px; font-weight: 700; }
.bcard-head:hover b { color: var(--red); }
.bcard > .mchips { margin-top: 14px; }
.bcard details { margin-top: 12px; border-top: 1px solid var(--line); padding-top: 10px; }
.bcard summary { cursor: pointer; color: var(--red); font-size: 13.5px; font-weight: 800; list-style: none; }
.bcard summary::-webkit-details-marker { display: none; }
.bcard summary::after { content: " +"; }
.bcard details[open] summary::after { content: " −"; }
.bcard details .mchips { margin-top: 10px; }
.mchips { display: flex; flex-wrap: wrap; gap: 6px; }
.mchips a { display: inline-flex; align-items: center; gap: 6px; padding: 5px 10px; border: 1px solid var(--line); border-radius: 999px; color: var(--text); font-size: 13px; font-weight: 600; text-decoration: none; transition: border-color .2s, color .2s; }
.mchips a:hover { border-color: var(--ink); }
.mchips a.on { background: var(--ink); border-color: var(--ink); color: #fff; font-weight: 700; }
.mchips em, .mstrip em { display: inline-grid; place-items: center; min-width: 20px; height: 20px; padding: 0 6px; border-radius: 999px; background: var(--red); color: #fff; font-size: 11.5px; font-style: normal; font-weight: 800; }
.brands-ask { display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: 16px; margin-top: 28px; padding: 24px; background: var(--ink); color: #fff; border-radius: var(--radius); }
.brands-ask h2 { font: 800 28px/1 var(--display); text-transform: uppercase; }
.brands-ask p { margin: 6px 0 0; color: #A9ACB4; }
.tm-note { max-width: 640px; margin: 18px auto 0; text-align: center; }

/* /bikes with one brand: its models as a strip of chips, in stock first. */
.mstrip { display: flex; gap: 8px; margin: 18px -16px 0; padding: 2px 16px 6px; overflow-x: auto; scrollbar-width: none; -webkit-overflow-scrolling: touch; }
.mstrip::-webkit-scrollbar { display: none; }
@media (min-width: 900px) { .mstrip { flex-wrap: wrap; margin: 18px 0 0; padding: 0; overflow: visible; } }
.mstrip a { display: inline-flex; flex: none; align-items: center; gap: 7px; padding: 8px 13px; background: var(--card); border: 1px solid var(--line); border-radius: 999px; color: var(--muted); font-size: 14px; font-weight: 600; text-decoration: none; white-space: nowrap; transition: border-color .2s, color .2s, background .2s; }
.mstrip a.has { color: var(--text); font-weight: 700; border-color: #CFCDC7; }
.mstrip a:hover { border-color: var(--ink); color: var(--text); }
.mstrip a.on { background: var(--ink); border-color: var(--ink); color: #fff; }

/* Filters: brands not in stock fold away under "More brands". */
.more-opts summary { display: flex; align-items: center; gap: 8px; padding: 8px 0 4px; cursor: pointer; color: var(--red); font-size: 14px; font-weight: 800; list-style: none; }
.more-opts summary::-webkit-details-marker { display: none; }
.more-opts summary small { color: var(--muted); font-weight: 700; }
.more-opts summary::after { content: "+"; margin-left: auto; color: var(--muted); font-size: 18px; }
.more-opts[open] summary::after { content: "−"; }
.more-link { display: inline-flex; align-items: center; gap: 6px; margin-top: 10px; color: var(--red); font-size: 13.5px; font-weight: 800; text-decoration: none; }
.more-link svg { width: 14px; height: 14px; }

/* Search suggestions under the search boxes (the box sits above the hero stats and filters below it). */
.hero-search, .list-search { z-index: 6; }
.suggest { position: absolute; z-index: 40; top: calc(100% + 8px); left: 0; right: 0; max-height: min(420px, 60vh); overflow-y: auto; padding: 6px; background: #fff; border: 1px solid var(--line); border-radius: 14px; box-shadow: 0 24px 60px rgba(0, 0, 0, .28); text-align: left; }
.suggest a { display: flex; align-items: center; justify-content: space-between; gap: 12px; padding: 10px 12px; border-radius: 10px; color: var(--text); font-size: 15.5px; font-weight: 700; text-decoration: none; }
.suggest a span { min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.suggest a small { display: block; color: var(--muted); font-size: 11.5px; font-weight: 800; letter-spacing: .08em; text-transform: uppercase; }
.suggest a > span > small:last-child:not(:first-child) { display: inline; text-transform: none; letter-spacing: 0; font-size: 13px; }
.suggest em { flex: none; color: var(--muted); font-size: 12.5px; font-style: normal; font-weight: 700; }
.suggest em.in { color: var(--ok); }
.suggest a:hover, .suggest a[aria-selected="true"] { background: var(--paper); }

/* Search with no exact match: spelling note, matching models, similar bikes. */
.fix-note { margin: 8px 0 0; color: var(--muted); font-size: 14.5px; }
.fix-note b { color: var(--text); }
.empty-models { max-width: 640px; margin: 26px auto 0; padding-top: 20px; border-top: 1px solid var(--line); }
.empty-models > p { margin: 0 0 10px !important; color: var(--muted); font-size: 12px; font-weight: 800; letter-spacing: .12em; text-transform: uppercase; }
.empty-models .mchips { justify-content: center; }
.similar-h { margin: 36px 0 16px; font: 800 26px/1 var(--display); text-transform: uppercase; }
.similar-sub { margin: -8px 0 18px; color: var(--muted); font-size: 15px; }
.list-lead { max-width: 760px; margin: 12px 0 0; color: var(--muted); font-size: 15.5px; line-height: 1.6; }

/* Home: "Second hand bikes in Pune" text for buyers and search engines. */
.seo-in { display: grid; gap: 18px 48px; padding-top: 34px; border-top: 1px solid var(--line); }
@media (min-width: 900px) { .seo-in { grid-template-columns: 1fr 1.6fr; } }
.seo-in h2 { font: 800 clamp(28px, 3.4vw, 40px)/1 var(--display); text-transform: uppercase; }
.seo-copy p { margin: 0 0 14px; color: var(--muted); font-size: 15.5px; line-height: 1.7; }
/* Links in the text: bold and dark against the grey text; a red line sweeps in on hover. */
.seo-copy a { color: var(--text); font-weight: 700; text-decoration: none; background: linear-gradient(var(--red), var(--red)) 0 100% / 0 2px no-repeat; transition: background-size .35s var(--ease-out), color .2s; }
.seo-copy a:hover, .seo-copy a:focus-visible { color: var(--red); background-size: 100% 2px; }
.seo-copy [lang] { color: var(--text); font-weight: 600; }