/* =====================================================================
   V4.1 · SITE-WIDE DESIGN TOKENS (loaded after system.css on every page)
   One base theme for the whole site. Model pages add ONE accent each,
   used sparingly: key-number units, the active detail marker, measuring
   lines, the scene progress bar. Honda red stays reserved for actions.
   ===================================================================== */
:root {
  /* surfaces (dark base, the showroom floor) */
  --c-bg: #0B0B0C;            /* page background            (= --night) */
  --c-surface: #141517;       /* alternate section          (= --carbon) */
  --c-raise: #1E2023;         /* raised panel, control      (= --graphite) */
  /* light studio surface (finance, colour studio on light photos) */
  --c-paper: #EEF0F1;         /* (= --ice) */
  --c-paper-2: #FFFFFF;
  /* text on dark */
  --c-text: #FFFFFF;
  --c-text-2: #C3C8CD;        /* secondary  (= --mist), 11.9:1 on --c-bg */
  --c-text-3: #9AA0A6;        /* muted labels, 7.1:1 on --c-bg, 6.0:1 on --c-raise */
  /* text on paper */
  --c-ink: #111214;
  --c-ink-2: #555B61;         /* 6.4:1 on --c-paper */
  /* lines */
  --c-line: #2C2F33;          /* hairline on dark (= --steel) */
  --c-line-soft: rgba(255, 255, 255, .12);
  --c-line-paper: rgba(17, 18, 20, .14);
  /* action + focus */
  --c-cta: #CC0000;           /* Honda red, actions only */
  --c-cta-hover: #A30000;
  --c-focus: #FF4D4D;
  /* model accent: overridden per room, neutral elsewhere */
  --accent: #C3C8CD;
  /* V3.6 names now read from the tokens above (same values, one source) */
  --night: var(--c-bg); --carbon: var(--c-surface); --graphite: var(--c-raise); --steel: var(--c-line);
  --mist: var(--c-text-2); --ice: var(--c-paper); --ink: var(--c-ink); --ink-2: var(--c-ink-2);
  --red: var(--c-cta); --red-d: var(--c-cta-hover);
}
.room-cb350   { --accent: #C9A27C; }   /* warm metallic: CB350 chrome and brown seat */
.room-cb350rs { --accent: #F57821; }   /* orange of the CB350RS tank graphic */
.room-nx500   { --accent: #10B5BB; }   /* teal of the NX500 graphics */
.room-xl750   { --accent: #7F98D6; }   /* Transalp graphic blue, lifted for dark surfaces */

/* ---------- Local cut-outs in shared chrome ---------- */
.mega-item__img.off-img, .drawer-item__img.off-img, .pick__img.off-img { background: radial-gradient(ellipse 70% 55% at 50% 70%, #2A2C2F 0%, #141517 80%); }
.mega-item__img.off-img img, .drawer-item__img.off-img img, .pick__img.off-img img { width: 86%; height: 86%; margin: auto; object-fit: contain; }
.mega-pv__stage.is-cut { background: radial-gradient(ellipse 65% 55% at 50% 72%, #2B2D30 0%, #121315 75%); }
.mega-pv__stage.is-cut img { width: 84%; height: 84%; object-fit: contain; }
.zone__stage--cut { background: radial-gradient(ellipse 60% 50% at 50% 74%, #24262A 0%, #0E0F10 72%); }
.zone__stage--cut .zone__photo { width: min(84%, 680px); height: 84%; object-fit: contain; position: relative; z-index: 1; filter: drop-shadow(0 24px 24px rgba(0,0,0,.55)); }
.zone__stage--cut .zone__floor { display: block; }
.rcard__img { width: 100%; height: 100%; object-fit: cover; }

/* ---------- Home: the line-up, drawn to scale ---------- */
.lineup { position: relative; background: var(--night); color: #fff; padding-block: clamp(96px, 9vw, 160px) clamp(72px, 7vw, 120px); overflow: hidden; }
.lineup__head { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); gap: 24px 64px; align-items: end; margin-bottom: clamp(48px, 5vw, 88px); }
.lineup__title { max-width: 14ch; }
.lineup__lede { color: var(--mist); max-width: 46ch; font-size: var(--t-lede); line-height: 1.55; }
.lineup__lede strong { color: #fff; font-weight: 600; }
/* the floor: one fixed scale for every model, scrolls sideways as the range grows */
.lu { position: relative; --floor: clamp(190px, min(22vw, 30vh), 320px); }
.lu__bar { display: flex; flex-wrap: wrap; justify-content: space-between; align-items: center; gap: 16px 24px; margin-bottom: 40px; }
.lu__chips { display: flex; flex-wrap: wrap; gap: 8px; }
.lu__chip { appearance: none; min-height: 40px; padding: 0 16px; border-radius: 999px; border: 1px solid var(--c-line); background: transparent; color: var(--c-text-2); font: 500 14px/1 var(--f-body); cursor: pointer; transition: color .2s, border-color .2s, background-color .2s; }
.lu__chip span { color: var(--c-text-3); margin-left: 4px; font-variant-numeric: tabular-nums; }
.lu__chip:hover { color: #fff; border-color: var(--c-text-3); }
.lu__chip[aria-pressed="true"] { background: #fff; color: #000; border-color: #fff; }
.lu__chip[aria-pressed="true"] span { color: #555; }
.lu__nav { display: flex; align-items: center; gap: 8px; }
.lu__count { font-size: 13px; color: var(--c-text-3); margin-right: 8px; }
.lu__nav button { appearance: none; width: 44px; height: 44px; border-radius: 50%; border: 1px solid var(--c-line); background: transparent; color: #fff; display: grid; place-items: center; cursor: pointer; padding: 0; }
.lu__nav button:hover { border-color: #fff; }
.lu__nav button:disabled { opacity: .3; cursor: default; }
.lu__nav button svg { width: 18px; height: 18px; }
.lu__nav button[data-lu-prev] svg { transform: scaleX(-1); }
.lu__scroll { position: relative; overflow-x: auto; overflow-y: hidden; margin-left: 64px; padding-bottom: 96px; scroll-snap-type: x proximity; scrollbar-width: none; overscroll-behavior-x: contain; }
.lu__scroll::-webkit-scrollbar { display: none; }
.lu__floor { list-style: none; margin: 0; padding: 0 8px; display: flex; align-items: flex-end; justify-content: flex-start; gap: clamp(32px, 3.4vw, 64px); min-width: 100%; width: max-content; height: var(--floor); border-bottom: 1px solid rgba(255,255,255,.28); position: relative; }
.lu__item { flex: 0 0 auto; height: calc(var(--floor) * var(--h) / 100); width: calc(var(--floor) * var(--h) / 100 * var(--ar)); position: relative; scroll-snap-align: start; transition: opacity .35s var(--ease), transform .45s var(--ease-out); }
.lu__item[hidden] { display: none; }
.lu__item.is-dim { opacity: 0; transform: translate3d(0, 8px, 0); }
.lu__link { display: block; height: 100%; width: 100%; text-decoration: none; color: inherit; position: relative; }
.lu__bike { display: block; height: 100%; width: 100%; }
.lu__img { height: 100%; width: 100%; object-fit: contain; object-position: 50% 100%; filter: drop-shadow(0 16px 14px rgba(0,0,0,.65)) brightness(.9); transition: filter .5s var(--ease-out), transform .6s var(--ease-out); transform-origin: 50% 100%; }
.lu__link:hover .lu__img, .lu__link:focus-visible .lu__img { filter: drop-shadow(0 20px 18px rgba(0,0,0,.6)) brightness(1.06); transform: translateY(-4px); }
.lu__meta { position: absolute; top: calc(100% + 16px); left: 50%; transform: translateX(-50%); display: grid; gap: 4px; text-align: center; width: max-content; max-width: 220px; }
.lu__name { font: 600 clamp(14px, 1.1vw, 18px)/1.1 var(--f-display); font-stretch: 110%; text-transform: uppercase; letter-spacing: .02em; }
.lu__name .tag { margin-left: 6px; }
.lu__cat { font-size: 13px; color: var(--c-text-3); }
.lu__h { font-size: 13px; color: var(--c-text-2); }
.lu__h .num { font-size: 15px; color: #fff; }
.lu__link:focus-visible { outline-offset: 6px; }
.lu__scale { position: absolute; left: 0; bottom: calc(96px + 52px); height: var(--floor); width: 64px; pointer-events: none; }
.lu__scale span { position: absolute; left: 0; bottom: calc(var(--y) * 1% + 4px); font: 500 11px/1 var(--f-body); color: var(--c-text-3); white-space: nowrap; }
.lu__scale::before { content: ""; position: absolute; left: 52px; top: 0; bottom: 0; width: 1px; background: rgba(255,255,255,.2); }
.lu__note { margin-top: 8px; font-size: 13px; color: var(--c-text-3); max-width: 70ch; }
.lineup__cta { margin-top: 28px; }
@media (max-width: 1023px) {
  .lineup__head { grid-template-columns: 1fr; }
  .lu { --floor: 230px; }
  .lu__scroll { margin-right: calc(var(--gutter) * -1); }
  .lu__nav button { display: none; }
  .lu__bar { margin-bottom: 28px; gap: 12px; }
  .lu__chips { flex-wrap: nowrap; overflow-x: auto; scrollbar-width: none; margin-right: calc(var(--gutter) * -1); padding-right: var(--gutter); max-width: calc(100% + var(--gutter)); }
  .lu__chips::-webkit-scrollbar { display: none; }
  .lu__chip { flex: 0 0 auto; white-space: nowrap; }
}

/* ---------- Home: ownership, told as a sequence ---------- */
.care { background: var(--night); color: #fff; }
.care__grid { display: grid; grid-template-columns: minmax(0, 5fr) minmax(0, 7fr); gap: 48px clamp(40px, 6vw, 120px); align-items: start; }
.care__head { position: sticky; top: 120px; display: grid; gap: 20px; }
.care__head .lede { color: var(--mist); }
.care__list { list-style: none; margin: 0; padding: 0; counter-reset: care; }
.care__list li { display: grid; grid-template-columns: 64px minmax(0, 1fr); gap: 4px 24px; padding: 28px 0; border-top: 1px solid var(--steel); }
.care__list li:last-child { border-bottom: 1px solid var(--steel); }
.care__list li::before { counter-increment: care; content: counter(care, decimal-leading-zero); grid-row: span 2; font: 300 28px/1 var(--f-display); color: var(--metal); font-variant-numeric: tabular-nums; }
.care__list h3 { font: 500 clamp(20px, 1.4vw + 8px, 28px)/1.15 var(--f-display); font-stretch: 108%; text-transform: uppercase; }
.care__list p { color: var(--mist); max-width: 52ch; }
.care__cta { margin-top: 32px; }
@media (max-width: 1023px) { .care__grid { grid-template-columns: 1fr; } .care__head { position: static; } }

/* ---------- Compare: competitor panel until an official image is supplied ---------- */
.rival { position: relative; height: 100%; min-height: 220px; display: grid; place-items: center; align-content: center; gap: 12px; padding: 24px; text-align: center; background: repeating-linear-gradient(135deg, rgba(255,255,255,.035) 0 10px, transparent 10px 20px), #121315; border: 1px dashed rgba(255,255,255,.18); border-radius: var(--r); color: var(--mist); }
.rival__art { width: min(180px, 50%); height: auto; fill: none; stroke: rgba(255,255,255,.4); stroke-width: 1.4; stroke-dasharray: 4 3; }
.rival__name { font: 500 18px/1 var(--f-display); font-stretch: 110%; text-transform: uppercase; color: #fff; }
.rival__link { display: inline-flex; align-items: center; gap: 8px; font-size: 13px; color: var(--mist); min-height: 44px; }
.rival__link svg { width: 16px; height: 16px; }
.rival__link:hover { color: #fff; }

/* ---------- V4 accessibility fixes on V3.6 components ---------- */
.tour__index li:not(.is-on), .tix__list button span { color: #8A9096; }   /* was #6B7177: 4.25:1 on black, now 5.9:1 */
.emi__out .label, [data-room] .emi__out .label { color: #9AA0A6; }       /* label on the dark EMI output panel */
.lu.is-fits .lu__nav button { display: none; }

/* ---------- Book a test ride: lane markings pass beneath on hover/focus, compresses on press ----------
   Transform and opacity only: no layout shift, no delay before the click opens the dialog. */
.btn--primary[data-testride] { position: relative; overflow: hidden; isolation: isolate; transition: background-color .3s var(--ease-out), border-color .3s var(--ease-out), transform .12s var(--ease-out); }
.btn--primary[data-testride]::before { content: ""; position: absolute; z-index: -1; left: 0; bottom: 7px; height: 2px; width: calc(100% + 40px); background: repeating-linear-gradient(90deg, rgba(255,255,255,.62) 0 12px, transparent 12px 20px); opacity: 0; pointer-events: none;
  -webkit-mask-image: linear-gradient(90deg, transparent, #000 22%, #000 78%, transparent); mask-image: linear-gradient(90deg, transparent, #000 22%, #000 78%, transparent); }
.btn--primary[data-testride]:active { transform: scale(.97); transition-duration: .06s; }
@media (hover: hover) and (prefers-reduced-motion: no-preference) {
  .btn--primary[data-testride]:hover::before { animation: bwLane .62s var(--ease-out) 1; }
  .btn--primary[data-testride]:hover svg { transform: translateX(5px); }
}
@media (prefers-reduced-motion: no-preference) {
  .btn--primary[data-testride]:focus-visible::before { animation: bwLane .62s var(--ease-out) 1; }
  .btn--primary[data-testride]:focus-visible svg { transform: translateX(5px); }
}
@keyframes bwLane { 0% { transform: translate3d(0, 0, 0); opacity: 0; } 25% { opacity: 1; } 100% { transform: translate3d(-40px, 0, 0); opacity: 0; } }
@media (prefers-reduced-motion: reduce) { .btn--primary[data-testride]:active { transform: none; filter: brightness(.92); } }

/* ---------- V4.2 · Film component (home feature + NX500 page) ---------- */
.film__stage { position: relative; overflow: hidden; background: #000; }
.film__stage > .film__poster, .film__stage > video { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; }
.film__stage > video { opacity: 0; transition: opacity 1s var(--ease); }
.film.has-frame:not(.is-failed) .film__stage > video { opacity: 1; }
.film.is-failed .film__stage > video { display: none; }
.film__ctl { position: relative; z-index: 3; appearance: none; display: inline-flex; align-items: center; gap: 10px; background: rgba(0,0,0,.45); color: #fff; border: 1px solid rgba(255,255,255,.55); border-radius: 999px; min-height: 44px; padding: 0 18px 0 14px; font: 600 12px/1 var(--f-display); letter-spacing: .12em; text-transform: uppercase; cursor: pointer; -webkit-backdrop-filter: blur(6px); backdrop-filter: blur(6px); transition: background-color .25s, color .25s; }
.film__ctl:hover { background: #fff; color: #000; }
.film__ctl:focus-visible { outline: 2px solid #fff; outline-offset: 3px; }
.film__ico { position: relative; width: 12px; height: 12px; flex: none; }
.film__ico::before, .film__ico::after { content: ""; position: absolute; top: 0; bottom: 0; width: 4px; background: currentColor; }
.film__ico::before { left: 1px; } .film__ico::after { right: 1px; }
.film:is(.is-idle, .is-paused) .film__ico::after { display: none; }
.film:is(.is-idle, .is-paused) .film__ico::before { left: 1px; width: 0; height: 0; background: none; border-style: solid; border-width: 6px 0 6px 11px; border-color: transparent transparent transparent currentColor; }
.film.is-loading .film__ico { border: 2px solid currentColor; border-right-color: transparent; border-radius: 50%; animation: filmSpin .8s linear infinite; }
.film.is-loading .film__ico::before, .film.is-loading .film__ico::after { display: none; }
@keyframes filmSpin { to { transform: rotate(360deg); } }
@media (prefers-reduced-motion: reduce) { .film.is-loading .film__ico { animation: none; } }
.film__fail { position: relative; z-index: 3; font-size: 13px; line-height: 1.5; color: rgba(255,255,255,.85); }
.film__fail a { color: #fff; }
.film__src { font-size: 12px; color: var(--c-text-3); }

/* Home: the film as a framed feature, in its own proportions */
.hfilm { background: var(--c-bg); color: #fff; padding-block: clamp(72px, 8vw, 128px); }
.hfilm__head { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); gap: 16px 64px; align-items: end; margin-bottom: clamp(28px, 3vw, 48px); }
.hfilm__lede { color: var(--c-text-2); max-width: 46ch; font-size: var(--t-lede); line-height: 1.55; }
.film--frame { margin: 0; }
.film--frame .film__stage { aspect-ratio: var(--film-ar, 1.7778); width: min(100%, calc(80vh * var(--film-ar, 1.7778))); border-radius: var(--r); margin-inline: auto; }
.film--frame .film__stage::after { content: ""; position: absolute; inset: 0; z-index: 1; background: linear-gradient(to top, rgba(0,0,0,.5), rgba(0,0,0,0) 34%); pointer-events: none; }
.film--frame .film__ctl { position: absolute; left: 20px; bottom: 20px; }
.film--frame .film__fail { position: absolute; left: 16px; right: 16px; bottom: 16px; max-width: 60ch; padding: 10px 14px; border-radius: var(--r); background: rgba(0,0,0,.6); }
.film--frame .film__src { margin-top: 12px; }
.hfilm__cta { margin-top: 24px; }
@media (max-width: 1023px) { .hfilm__head { grid-template-columns: 1fr; } }
@media (max-width: 767px) { .film--frame .film__ctl { left: 12px; bottom: 12px; } .film--frame .film__fail { left: 8px; right: 8px; bottom: 8px; font-size: 12px; } }