/* =====================================================================
   CB350 · "The promenade"
   Base theme: site tokens. Accent: warm metallic (--accent, v4.css).
   Personality: refined, metallic, crafted. Two signatures:
   1. The studio — light passes over the metal, the camera moves in.
   2. The engine, composed — the bike holds still, the numbers arrive.
   ===================================================================== */
.cbh .rhero__img { object-position: 30% 60%; }

/* ---------- Signature 1: the studio ---------- */
.cbst { background: #050506; }
.cbst .scene__sticky { min-height: 600px; }
.cbst.is-step .scene__sticky { min-height: 0; aspect-ratio: auto; padding-bottom: 32px; display: grid; }
.cbst__l0 { background: radial-gradient(ellipse 60% 50% at 50% 62%, #1A1C20 0%, #050506 70%); }
.cbst__cam { position: absolute; inset: 0; display: grid; place-items: center; transform-origin: var(--ox, 46%) var(--oy, 40%); will-change: transform; }
.cbst__bike { position: relative; width: min(72vw, 1000px, 128vh); margin-top: -6vh; }
.cbst__img { width: 100%; height: auto; display: block; filter: drop-shadow(0 30px 30px rgba(0,0,0,.7)); }
/* the specular sweep, masked by the motorcycle's own cut-out so light only falls on metal and paint */
.cbst__light { position: absolute; inset: 0; pointer-events: none; mix-blend-mode: overlay; opacity: 1;
  background: linear-gradient(100deg, transparent 0 44%, rgba(255,244,228,.22) 48%, rgba(255,250,242,.5) 50%, rgba(255,244,228,.22) 52%, transparent 56%);
  background-size: 260% 100%; background-position: var(--sweep, 130%) 0; background-repeat: no-repeat;
  -webkit-mask-size: 100% 100%; mask-size: 100% 100%; -webkit-mask-repeat: no-repeat; mask-repeat: no-repeat; }
.cbst__floor { position: absolute; left: 20%; right: 20%; top: 77%; height: 10%; background: radial-gradient(ellipse 50% 50% at 50% 50%, rgba(201,162,124,.18), transparent 70%); }
.cbst__l1 img { object-position: 60% 70%; }
.cbst__l2 { background: #000; }
.cbst__l2 img { object-fit: contain !important; }
.cbst__ui { position: relative; z-index: 2; display: grid; grid-template-columns: minmax(0, 6fr) minmax(0, 5fr); gap: 24px clamp(40px, 5vw, 96px); align-items: end; height: 100%; padding-block: 120px clamp(36px, 6vh, 72px); }
.cbst.is-step .cbst__ui { height: auto; padding-top: 24px; }
.cbst__beat { display: grid; gap: 10px; align-content: end; padding: 18px 0 0; }
.cbst.is-scroll .cbst__beat { background: linear-gradient(to top, rgba(5,5,6,.75), rgba(5,5,6,0)); margin-left: calc(-1 * var(--gutter)); padding-left: var(--gutter); padding-right: 24px; }
.cbst__k { font: 600 13px/1 var(--f-display); letter-spacing: .14em; text-transform: uppercase; color: var(--accent); }
.cbst__big { font: 600 clamp(40px, 4vw + 8px, 92px)/.92 var(--f-display); font-stretch: 114%; text-transform: uppercase; letter-spacing: -.01em; }
.cbst__big .num { font-weight: 300; }
.cbst__x { font-size: var(--t-lede); color: var(--c-text-2); max-width: 40ch; }
.cbst__nav { align-self: end; }
.cbst.is-step .scene__layers { position: relative; aspect-ratio: 16 / 10; }
.cbst.is-step .cbst__l2 img { object-fit: cover !important; }
@media (max-width: 1023px) { .cbst__ui { grid-template-columns: 1fr; } .cbst__bike { width: 92vw; margin-top: 0; } .cbst__big { font-size: 40px; } }
@media (min-width: 1024px) and (max-height: 820px) { .cbst__big { font-size: 64px; } .cbst__ui { padding-block: 96px 32px; } }

/* ---------- Details: the anatomy plate (tap a point) ---------- */
.ana { position: relative; background: var(--c-surface); padding-block: var(--sec); }
.ana__grid { display: grid; grid-template-columns: minmax(0, 8fr) minmax(0, 4fr); grid-template-rows: auto 1fr; gap: 56px clamp(32px, 4vw, 72px); align-items: start; }
.ana__head { grid-column: 1 / -1; display: grid; gap: 12px; max-width: 760px; }
.ana__plate { position: relative; margin-top: 24px; }
.ana__bike, .ana__pts { position: relative; }
.ana__bike::after { content: ""; position: absolute; left: 4%; right: 4%; bottom: -2%; height: 9%; background: radial-gradient(ellipse 50% 50% at 50% 50%, rgba(0,0,0,.55), transparent 70%); z-index: -1; }
.ana__img { width: 100%; height: auto; display: block; }
.ana__pts { position: absolute; inset: 0; }
.ana__pt { position: absolute; left: calc(var(--x) * 1%); top: calc(var(--y) * 1%); width: 48px; height: 48px; margin: -24px 0 0 -24px; padding: 0; border: 0; background: none; display: grid; place-items: center; cursor: pointer; z-index: 2; }
.ana__dot { width: 30px; height: 30px; border-radius: 50%; display: grid; place-items: center; background: rgba(20,21,23,.86); color: #fff; font: 600 12px/1 var(--f-display); box-shadow: 0 0 0 1px rgba(255,255,255,.4), 0 4px 12px rgba(0,0,0,.4); transition: transform .3s var(--ease-out), background-color .3s, color .3s; }
.ana__pt:hover .ana__dot { transform: scale(1.12); }
.ana__pt[aria-selected="true"] .ana__dot { background: var(--accent); color: #111; box-shadow: 0 0 0 6px color-mix(in srgb, var(--accent) 25%, transparent); transform: scale(1.1); }
.ana__pt:focus-visible { outline: none; }
.ana__pt:focus-visible .ana__dot { outline: 2px solid var(--c-focus); outline-offset: 4px; }
.ana__lead { position: absolute; z-index: 1; left: calc(var(--ax, 50) * 1%); top: -6%; height: calc((var(--ay, 50) + 6) * 1%); right: calc(-1 * clamp(32px, 4vw, 72px)); border-left: 1px solid var(--accent); border-top: 1px solid var(--accent); transition: left .6s var(--ease), height .6s var(--ease); pointer-events: none; }
.ana__lead::after { content: ""; position: absolute; right: -3px; top: -4px; width: 7px; height: 7px; border-radius: 50%; background: var(--accent); }
.ana__detail { position: relative; display: grid; align-content: start; min-height: 460px; align-self: start; margin-top: calc(-6% - 4px); }
.ana__p { grid-area: 1 / 1; display: grid; gap: 14px; align-content: start; }
.ana__p:not(.is-on) { transform: translateY(10px); }
.ana__crop { aspect-ratio: 4 / 3; overflow: hidden; border-radius: var(--r); background: #121315; margin: 0; }
.ana__crop img { width: 100%; height: 100%; object-fit: cover; }
.ana__t { font: 500 clamp(22px, 1vw + 14px, 30px)/1.1 var(--f-display); font-stretch: 108%; text-transform: uppercase; margin-top: 8px; }
.ana__x { color: var(--fg2); max-width: 40ch; }
.ana__nav { grid-area: 2 / 1; margin-top: 24px; }
@media (max-width: 1023px) {
  .ana__grid { grid-template-columns: 1fr; gap: 32px; }
  .ana__lead { display: none; }
  .ana__detail { min-height: 0; margin-top: 0; }
  .ana__crop { aspect-ratio: 16 / 9; }
  .ana__pt { width: 44px; height: 44px; margin: -22px 0 0 -22px; }
  .ana__dot { width: 26px; height: 26px; font-size: 11px; }
}

/* ---------- Signature 2: the engine, composed ---------- */
.cbe__plate { position: relative; aspect-ratio: 2.2 / 1; margin: 0; }
.cbe__bike { position: absolute; left: 30%; width: 40%; top: 21.4%; }
.cbe__bike img { width: 100%; height: auto; display: block; filter: drop-shadow(0 24px 24px rgba(0,0,0,.6)); }
.cbe__hub { position: absolute; left: 41.1%; top: 52.8%; width: 16px; height: 16px; margin: -8px 0 0 -8px; border-radius: 50%; border: 1.5px solid var(--accent); background: color-mix(in srgb, var(--accent) 30%, transparent); }
.cbe__calls { list-style: none; margin: 0; padding: 0; }
.cbe__c { position: absolute; left: var(--cx); top: var(--cy); width: 20%; display: grid; gap: 4px; }
.cbe__c--r { padding-left: 1.5%; }
.cbe__v { font-size: clamp(28px, 2vw + 8px, 48px); line-height: 1; }
.cbe__v small { font: 600 12px/1 var(--f-display); letter-spacing: .12em; text-transform: uppercase; color: var(--accent); margin-left: 6px; }
.cbe__l { font-size: 14px; color: var(--fg2); }
.cbe__leads { position: absolute; inset: 0; width: 100%; height: 100%; pointer-events: none; overflow: visible; }
.cbe__leads path { fill: none; stroke: var(--accent); stroke-width: 1; vector-effect: non-scaling-stroke; opacity: .75; }
.motion .cbe__plate .cbe__leads path { stroke-dasharray: 1; stroke-dashoffset: 1; transition: stroke-dashoffset .8s var(--ease) calc(.25s + var(--d) * .12s); }
.motion .cbe__plate .cbe__c { opacity: 0; transform: translate3d(0, 10px, 0); transition: opacity .6s var(--ease) calc(.45s + var(--d) * .12s), transform .7s var(--ease-out) calc(.45s + var(--d) * .12s); }
.motion .cbe__plate .cbe__hub { transform: scale(0); transition: transform .5s var(--ease-out) .1s; }
.motion .cbe__plate.is-in .cbe__leads path { stroke-dashoffset: 0; }
.motion .cbe__plate.is-in .cbe__c { opacity: 1; transform: none; }
.motion .cbe__plate.is-in .cbe__hub { transform: none; }
.motion .cbe__plate.no-anim * { transition: none !important; }
.cbe__scale { margin-top: clamp(32px, 4vw, 64px); max-width: 980px; }
@media (max-width: 1023px) {
  .cbe__plate { aspect-ratio: auto; display: grid; gap: 24px; }
  .cbe__bike { position: relative; left: auto; top: auto; width: 100%; }
  .cbe__calls { display: grid; grid-template-columns: 1fr 1fr; gap: 20px 16px; }
  .cbe__c, .cbe__c--r { position: static; width: auto; padding: 14px 0 0; border-top: 1px solid var(--line); }
  .cbe__leads { display: none; }
}
@media (max-width: 767px) { .cbe__scale { overflow-x: auto; scrollbar-width: none; } .cbe__scale .rpm2 { min-width: 600px; } }

/* ---------- Technology rail ---------- */
.cbx__track { grid-auto-columns: minmax(320px, 31%); }
.cbx__i figure { aspect-ratio: 2.4 / 1; overflow: hidden; border-radius: var(--r); background: #0E0F10; margin: 0 0 18px; }
.cbx__i figure img { width: 100%; height: 100%; object-fit: cover; }
.cbx__i h3 { font: 500 19px/1.2 var(--f-display); font-stretch: 106%; text-transform: uppercase; margin-bottom: 8px; }
.cbx__i p { color: var(--fg2); font-size: 15px; max-width: 40ch; }
@media (max-width: 767px) { .cbx__track { grid-auto-columns: 84%; } }

/* variant studio: the ivory studio photograph sits as a plate */
.cbv .vs__stage img { border-radius: var(--r); }

/* ---------- Final moment ---------- */
.cbr { position: relative; overflow: hidden; padding-block: clamp(80px, 9vw, 160px) clamp(48px, 5vw, 80px); background: radial-gradient(ellipse 60% 60% at 70% 70%, #1A1C20 0%, var(--c-bg) 70%); }
.cbr__grid { display: grid; grid-template-columns: minmax(0, 5fr) minmax(0, 7fr); gap: 32px clamp(32px, 4vw, 72px); align-items: center; }
.cbr__copy { display: grid; gap: 22px; }
.cbr__img { position: relative; margin: 0; }
.cbr__img img { width: 100%; height: auto; display: block; filter: drop-shadow(0 30px 30px rgba(0,0,0,.65)); position: relative; z-index: 1; }
.cbr__floor { position: absolute; left: 10%; right: 10%; bottom: -2%; height: 14%; background: radial-gradient(ellipse 50% 50% at 50% 50%, rgba(201,162,124,.22), transparent 70%); }
.cbr__light { position: absolute; inset: 0; z-index: 2; pointer-events: none; mix-blend-mode: screen; background: linear-gradient(100deg, transparent 40%, rgba(255,246,232,.45) 50%, transparent 60%); background-size: 260% 100%; background-position: 130% 0; -webkit-mask-size: 100% 100%; mask-size: 100% 100%; }
.motion .cbr.is-in .cbr__light { animation: cbSweep 2.2s var(--ease) .3s both; }
@keyframes cbSweep { from { background-position: 130% 0; } to { background-position: -30% 0; } }
@media (max-width: 1023px) { .cbr__grid { grid-template-columns: 1fr; } }
/* V4.2: the engine plate always fits one screen at laptop heights, figures included */
@media (min-width: 1024px) { .cbe__plate { width: min(100%, calc((100vh - 230px) * 2.2)); margin-inline: auto; } .cbe__scale { margin-inline: auto; } }