/* =====================================================================
   Home — the showroom floor
   ===================================================================== */

/* 1 Hero */
.hero { position: relative; grid-template-columns: minmax(0, 1fr); height: 100vh; height: 100svh; min-height: 680px; max-height: 1100px; overflow: hidden; display: grid; grid-template-rows: 1fr auto; }
.hero__media { position: absolute; inset: 0; }
.hero__img { width: 100%; height: 100%; object-fit: cover; object-position: 62% 64%; }
.hero__shade { position: absolute; inset: 0; pointer-events: none;
  background: linear-gradient(90deg, rgba(0,0,0,.82) 0%, rgba(0,0,0,.55) 34%, rgba(0,0,0,0) 62%), linear-gradient(to top, rgba(0,0,0,.85) 0%, rgba(0,0,0,0) 34%), linear-gradient(to bottom, rgba(0,0,0,.45), rgba(0,0,0,0) 18%); }
.hero__copy { position: relative; z-index: 2; align-self: end; display: grid; gap: 22px; padding-bottom: 40px; }
.hero__title { font-size: clamp(44px, 4.4vw + 8px, 84px); max-width: 17ch; }
.hero__lede { color: #E1E4E7; max-width: 30ch; }
.hero__foot { position: relative; z-index: 2; display: flex; justify-content: space-between; align-items: center; gap: 16px; padding-block: 20px 28px; border-top: 1px solid rgba(255,255,255,.18); }
.hero__cue { display: inline-flex; align-items: center; gap: 12px; font: 600 12px var(--f-display); letter-spacing: .18em; text-transform: uppercase; text-decoration: none; }
.hero__cue svg { width: 18px; height: 18px; animation: cue 2.4s var(--ease) infinite; }
@keyframes cue { 0%, 100% { transform: translateY(-2px); } 50% { transform: translateY(4px); } }
.hero__shown { display: inline-flex; align-items: center; gap: 12px; font: 500 15px var(--f-display); text-transform: uppercase; letter-spacing: .06em; text-decoration: none; }
.hero__shown .label { color: var(--metal); }
.hero__shown:hover { color: #FF5A5A; }
@media (max-width: 767px) {
  .hero { min-height: 0; height: calc(100svh - 66px); }
  .hero__img { object-position: 64% 60%; }
  .hero__shade { background: linear-gradient(to top, rgba(0,0,0,.92) 0%, rgba(0,0,0,.55) 45%, rgba(0,0,0,.1) 70%), linear-gradient(to bottom, rgba(0,0,0,.5), rgba(0,0,0,0) 20%); }
  .hero__copy .btn-row { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); gap: 10px; }
  .hero__copy .btn { padding: 8px 12px; font-size: 11px; letter-spacing: .08em; white-space: normal; text-align: center; line-height: 1.3; gap: 8px; }
  .hero__copy .btn svg { width: 14px; height: 14px; }
  .hero__cue { display: none; }
  .hero__foot { padding-block: 14px 16px; }
}

/* 2 Brand line */
.brandline { padding-block: clamp(80px, 9vw, 150px); border-bottom: 1px solid var(--steel); }
.brandline__text { font: 300 clamp(28px, 2.8vw + 8px, 56px)/1.14 var(--f-display); font-stretch: 104%; max-width: 24ch; letter-spacing: -.01em; }
.brandline__text .w { opacity: .18; transition: opacity .3s; }
.brandline__text .w.is-lit { opacity: 1; }
.no-split .brandline__text .w, html:not(.motion) .brandline__text .w { opacity: 1; }
.trust { display: grid; grid-template-columns: repeat(5, minmax(0, 1fr)); gap: 0; margin-top: clamp(48px, 6vw, 96px); border-top: 1px solid var(--steel); }
.trust li { display: grid; gap: 14px; padding: 24px 20px 0 0; font: 500 13px/1.4 var(--f-display); letter-spacing: .1em; text-transform: uppercase; color: var(--mist); }
.trust svg { width: 28px; height: 28px; color: #fff; }
@media (max-width: 899px) { .trust { grid-template-columns: 1fr 1fr; row-gap: 8px; } }

/* 3 Welcome: one guided consultation, on black
   Exactly one step is on screen at a time; the stage holds its height while
   steps swap, so nothing above or below it moves. */
.welcome { background: var(--black); color: #fff; border-block: 1px solid var(--steel); padding-block: clamp(96px, 16vh, 200px); }
.welcome__grid { display: grid; grid-template-columns: minmax(0, 4fr) minmax(0, 8fr); gap: clamp(56px, 7vw, 140px); align-items: start; }
.welcome__intro { position: sticky; top: 120px; display: grid; gap: 22px; }
.welcome__intro .h2 { font-size: clamp(44px, min(4.4vw, 9vh), 84px); }
.welcome__intro .lede { color: var(--mist); max-width: 30ch; }

.consult { display: grid; gap: clamp(28px, 4.5vh, 48px); min-width: 0; }

/* Progress: 01 ✓ — 02 ✓ — 03 active — 04 locked */
.cprog { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); }
.cprog li { position: relative; }
.cprog li::before, .cprog li::after { content: ""; pointer-events: none; position: absolute; left: 44px; right: 10px; top: 17px; height: 2px; background: var(--steel); }
.cprog li::after { background: #fff; transform: scaleX(0); transform-origin: left; transition: transform .6s var(--ease-out); }
.cprog li:last-child::before, .cprog li:last-child::after { display: none; }
.cprog li.is-done::after { transform: scaleX(1); }
.cprog__btn { display: grid; gap: 10px; justify-items: start; width: 100%; padding: 0 12px 0 0; border: 0; background: none; text-align: left; color: var(--metal); cursor: pointer; }
.cprog__btn:disabled { cursor: default; }
.cprog__no { position: relative; z-index: 1; display: grid; place-items: center; width: 36px; height: 36px; border-radius: 50%; border: 1.5px solid #4A4F55; background: var(--black); color: var(--metal); transition: background-color .4s, border-color .4s, color .4s, box-shadow .4s; }
.cprog__no b { font: 600 12px var(--f-display); letter-spacing: .04em; }
.cprog__no svg { position: absolute; width: 16px; height: 16px; stroke-width: 2.2; opacity: 0; }
.cprog__txt { display: grid; gap: 2px; }
.cprog__txt strong { font: 600 12px/1.25 var(--f-display); letter-spacing: .14em; text-transform: uppercase; }
.cprog__txt em { font-style: normal; font-size: 13px; line-height: 1.35; }
.cprog li.is-on .cprog__btn { color: #fff; }
.cprog li.is-on .cprog__no { background: var(--red); border-color: var(--red); color: #fff; box-shadow: 0 0 0 6px rgba(204,0,0,.22); }
.cprog li.is-on em { color: var(--mist); }
.cprog li.is-done .cprog__btn { color: #fff; }
.cprog li.is-done .cprog__no { background: #fff; border-color: #fff; color: var(--black); }
.cprog li.is-done .cprog__no b { opacity: 0; }
.cprog li.is-done .cprog__no svg { opacity: 1; }
.cprog li.is-done em { color: var(--mist); }
.cprog li.is-done .cprog__btn:hover strong { text-decoration: underline; text-underline-offset: 4px; }
.cprog li.is-locked .cprog__btn { opacity: .6; }
.cprog li.is-locked .cprog__no { border-style: dashed; }

/* floating WhatsApp steps aside while the consultation is on screen */
.wa-float.is-hushed { opacity: 0 !important; pointer-events: none; }

/* Stage: one step at a time */
.consult__stage { position: relative; }
.cstep { transition: opacity .45s var(--ease-out), transform .55s var(--ease-out); }
.cstep.is-entering { opacity: 0; transform: translateY(14px); transition: none; }
.cstep.is-leaving { opacity: 0; transform: translateY(-8px); transition: opacity .22s ease-in, transform .22s ease-in; }
.cstep__head { float: left; width: 100%; display: grid; gap: 8px; padding: 0; margin-bottom: clamp(20px, 3vh, 32px); }
.cstep__head + * { clear: both; }
.cstep__count { font: 600 11px var(--f-display); letter-spacing: .18em; text-transform: uppercase; color: #FF5A5A; }
.cstep__count span { margin-left: 10px; padding-left: 12px; border-left: 1px solid var(--steel); color: var(--metal); }
.cstep__q { display: block; font: 500 clamp(26px, 1.6vw + 12px, 40px)/1.05 var(--f-display); font-stretch: 108%; text-transform: uppercase; color: #fff; }
.cstep__q:focus { outline: none; }
.cstep__nav { display: flex; align-items: center; justify-content: space-between; gap: 16px; margin-top: clamp(20px, 3vh, 32px); padding-top: clamp(14px, 2.2vh, 20px); border-top: 1px solid var(--steel); }
.cstep__nav .btn--primary { margin-left: auto; }
.cstep__nav .btn--primary:disabled { background: transparent; border-color: #4A4F55; color: var(--metal); cursor: not-allowed; }
.cstep__nav .btn--primary:disabled svg { transform: none; }
.cstep__hint { font-size: 13px; color: var(--metal); }

.rcards { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 12px; }
.rcard input { position: absolute; opacity: 0; pointer-events: none; }
.rcard__box { position: relative; display: grid; align-content: end; min-height: clamp(150px, min(15vw, 22vh), 240px); padding: 18px; overflow: hidden; border-radius: var(--r); background: var(--graphite); color: #fff; cursor: pointer; isolation: isolate; box-shadow: inset 0 0 0 1px var(--steel); transition: transform .5s var(--ease-out); }
.rcard__img { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; z-index: -2; opacity: .55; transition: opacity .5s, transform 1s var(--ease-out); filter: grayscale(.4); }
.rcard__off { position: absolute; inset: 0; z-index: -2; background: #2a2d31; opacity: .55; }
.rcard__off .rcard__img { position: static; opacity: 1; object-fit: contain; filter: grayscale(.4); }
.rcard__shade { position: absolute; inset: 0; z-index: -1; background: linear-gradient(to top, rgba(0,0,0,.85), rgba(0,0,0,.1) 70%); }
.rcard__label { font: 500 24px/1 var(--f-display); font-stretch: 110%; text-transform: uppercase; }
.rcard__note { font-size: 13px; color: var(--mist); margin-top: 4px; }
.rcard__tick { position: absolute; top: 14px; right: 14px; width: 30px; height: 30px; padding: 6px; border: 1px solid rgba(255,255,255,.5); border-radius: 50%; opacity: 0; transform: scale(.6); transition: opacity .3s, transform .4s var(--ease-out); }
.rcard:hover .rcard__img { opacity: .85; transform: scale(1.06); filter: none; }
.rcard input:checked + .rcard__box { outline: 2px solid var(--red); outline-offset: 0; }
.rcard input:checked + .rcard__box .rcard__img { opacity: .9; filter: none; }
.rcard input:checked + .rcard__box .rcard__tick { opacity: 1; transform: none; background: var(--red); border-color: var(--red); }
.rcard input:focus-visible + .rcard__box { outline: 2px solid #FF4D4D; outline-offset: 3px; }

/* Priority and budget options: same selected language as the riding cards */
.otiles { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 12px; }
.otile input { position: absolute; opacity: 0; pointer-events: none; }
.otile__box { position: relative; display: grid; align-content: end; gap: 4px; min-height: clamp(104px, 15vh, 150px); padding: 18px 56px 18px 20px; border: 1px solid var(--steel); border-radius: var(--r); background: var(--carbon); color: #fff; cursor: pointer; transition: border-color .3s, background-color .3s; }
.otile__label { font: 500 clamp(20px, 1vw + 10px, 26px)/1.05 var(--f-display); font-stretch: 108%; text-transform: uppercase; }
.otile__note { font-size: 13px; color: var(--metal); }
.otile__tick { position: absolute; top: 14px; right: 14px; width: 30px; height: 30px; padding: 6px; border: 1px solid #4A4F55; border-radius: 50%; color: var(--metal); opacity: .7; transition: opacity .3s, background-color .3s, border-color .3s, color .3s; }
.otile:hover .otile__box { border-color: #fff; }
.otile input:checked + .otile__box { border-color: var(--red); box-shadow: inset 0 0 0 1px var(--red); background: rgba(204,0,0,.12); }
.otile input:checked + .otile__box .otile__tick { opacity: 1; background: var(--red); border-color: var(--red); color: #fff; }
.otile input:focus-visible + .otile__box { outline: 2px solid #FF4D4D; outline-offset: 3px; }

/* Step 4: your match */
.cstep__basis { font-size: 14px; color: var(--mist); }
.basis span { color: #fff; font-weight: 600; }
.basis span + span::before { content: "·"; margin: 0 8px; color: var(--metal); font-weight: 400; }
.match { display: grid; grid-template-columns: minmax(0, 6fr) minmax(0, 5fr); background: var(--carbon); border: 1px solid var(--steel); border-radius: var(--r); overflow: hidden; }
.match__img { position: relative; min-height: clamp(220px, 34vh, 340px); display: grid; place-items: center; overflow: hidden; }
.match__img img { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: contain; }
.match__img.is-photo { background: #1F1C1D; }
.match__img.off-img { background: radial-gradient(ellipse 70% 60% at 50% 50%, #FFFFFF 0%, var(--ice) 75%); }
.match__body { display: grid; gap: clamp(10px, 1.6vh, 16px); align-content: center; padding: clamp(22px, 3.4vh, 40px) clamp(22px, 2.4vw, 40px); }
.match__rank { display: inline-flex; align-items: center; gap: 8px; font: 600 11px var(--f-display); letter-spacing: .18em; text-transform: uppercase; color: #FF5A5A; }
.match__rank::before { content: ""; width: 8px; height: 8px; border-radius: 50%; background: var(--red); }
.match__name { font: 500 clamp(34px, min(2.6vw + 8px, 6vh), 56px)/.95 var(--f-display); font-stretch: 112%; text-transform: uppercase; color: #fff; }
.match__why { font-size: 15px; line-height: 1.55; color: var(--mist); max-width: 40ch; }
.match__note { padding: 8px 12px; border-left: 2px solid var(--red); background: rgba(255,255,255,.04); font-size: 13px; line-height: 1.45; color: var(--mist); }
.match__note button { border: 0; background: none; padding: 0; font: 600 11px var(--f-display); letter-spacing: .12em; text-transform: uppercase; text-decoration: underline; text-underline-offset: 3px; color: #fff; cursor: pointer; }
.match__price { font: 500 15px var(--f-body); color: #fff; }
.match .btn-row { display: grid; gap: 10px; margin-top: 6px; max-width: 320px; }
.match .btn-row .btn { justify-content: space-between; }
.match .btn { padding-inline: 18px; gap: 10px; letter-spacing: .1em; }

@media (min-width: 1024px) {
  /* steps 1 to 3 share one height, so moving between them never shifts the page */
  .consult__stage { min-height: calc(2 * clamp(150px, min(15vw, 22vh), 240px) + 12px + clamp(150px, 20vh, 190px)); }
}
@media (max-width: 1023px) {
  .welcome { padding-block: clamp(72px, 12vh, 120px); }
  .welcome__grid { grid-template-columns: minmax(0, 1fr); gap: 40px; }
  .welcome__intro { position: static; }
  .match { grid-template-columns: minmax(0, 1fr); }
  .match__img { min-height: 0; aspect-ratio: 16 / 10; }
}
@media (max-width: 599px) {
  .rcards { grid-template-columns: 1fr 1fr; }
  .rcard__box { min-height: 150px; padding: 14px; }
  .rcard__label { font-size: 19px; }
  .otiles { grid-template-columns: minmax(0, 1fr); gap: 8px; }
  .otile__box { min-height: 0; padding: 16px 56px 16px 16px; }
  /* phones: the numbered track carries progress; each step names itself above its question */
  .cprog__txt { position: absolute; width: 1px; height: 1px; margin: -1px; padding: 0; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; }
  .cprog li::before, .cprog li::after { left: 42px; right: 6px; }
  .match .btn-row { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); }
  .match .btn { padding-inline: 10px; font-size: 11px; letter-spacing: .08em; white-space: normal; text-align: center; line-height: 1.3; }
  .cstep__nav { flex-wrap: wrap; }
}
@media (prefers-reduced-motion: reduce) {
  .cstep, .cstep.is-leaving { transition: none; }
}

/* 4 Showroom: horizontal camera move */
.showroom { position: relative; background: var(--night); border-top: 1px solid var(--steel); }
.showroom__pin { position: relative; overflow: hidden; padding-top: clamp(80px, 8vw, 120px); }
.showroom__head { display: flex; align-items: end; justify-content: space-between; gap: 24px; }
.showroom__hint { font: 600 12px var(--f-display); letter-spacing: .18em; text-transform: uppercase; color: var(--metal); }
.showroom__track { display: flex; width: max-content; }
.zone { position: relative; width: 100vw; display: grid; grid-template-columns: minmax(0, 5fr) minmax(0, 7fr); gap: clamp(32px, 4vw, 72px); align-items: center; padding: clamp(32px, 4vh, 56px) var(--gutter) clamp(40px, 5vh, 64px); max-width: none; }
.zone > * { min-width: 0; }
.zone__index { position: absolute; top: 12px; left: var(--gutter); font: 300 14px var(--f-display); letter-spacing: .2em; color: var(--metal); }
.zone__copy { order: -1; display: grid; gap: 16px; align-content: center; }
.zone__cat { font: 600 12px var(--f-display); letter-spacing: .18em; text-transform: uppercase; color: var(--metal); }
.zone__name { font: 600 clamp(56px, 6vw + 8px, 124px)/.9 var(--f-display); font-stretch: 112%; text-transform: uppercase; letter-spacing: -.02em; }
.zone__tag { font: 400 clamp(20px, 1.2vw + 10px, 30px)/1.15 var(--f-display); font-stretch: 105%; text-transform: uppercase; color: var(--mist); }
.zone__specs { display: flex; flex-wrap: wrap; gap: 28px; padding: 18px 0; margin-top: 6px; border-block: 1px solid var(--steel); }
.zone__specs dd { display: grid; font-size: 12px; text-transform: uppercase; letter-spacing: .12em; color: var(--metal); font-family: var(--f-display); }
.zone__specs .num { font-size: 36px; color: #fff; letter-spacing: -.01em; line-height: 1.05; }
.zone__price { font-size: 15px; color: var(--mist); }
.zone__stage { position: relative; aspect-ratio: 16 / 10; border-radius: var(--r); overflow: hidden; display: grid; place-items: center; }
.zone__stage--photo { background: #1F1C1D; }
.zone__stage--photo .zone__photo { width: 100%; height: 100%; object-fit: contain; }
.zone__stage.off-img { background: radial-gradient(ellipse 70% 60% at 50% 45%, #FFFFFF 0%, var(--ice) 70%); }
.zone__stage.off-img .zone__photo { width: min(78%, 560px); height: auto; object-fit: contain; position: relative; z-index: 1; }
.zone__floor { position: absolute; left: 18%; right: 18%; bottom: 12%; height: 10%; border-radius: 50%; background: radial-gradient(ellipse at center, rgba(0,0,0,.28), rgba(0,0,0,0) 70%); pointer-events: none; }
.zone__stage--photo .zone__floor { display: none; }
.showroom__bar { position: relative; height: 2px; margin-bottom: 40px; }
.showroom__bar::before { content: ""; position: absolute; inset: 0 var(--gutter); background: var(--steel); }
.showroom__bar span { position: absolute; left: var(--gutter); right: var(--gutter); top: 0; height: 2px; background: #fff; transform-origin: left; transform: scaleX(.2); }
/* Desktop with motion: the pinned showroom is exactly one screen tall, and the
   motorcycle stage gives up height first so copy and CTAs always stay on screen */
@media (min-width: 1024px) {
  html.motion .showroom__pin { display: flex; flex-direction: column; height: 100vh; height: 100svh; padding-top: clamp(64px, 10vh, 120px); }
  html.motion .showroom__track { flex: 1 1 auto; min-height: 0; }
  html.motion .zone { height: 100%; grid-template-rows: minmax(0, 1fr); padding-block: clamp(16px, 3.5vh, 56px); }
  html.motion .zone__stage { max-height: 100%; }
  html.motion .showroom__bar { flex: none; margin-bottom: clamp(16px, 4vh, 40px); }
  .zone__name { font-size: clamp(56px, min(6vw + 8px, 12vh), 124px); }
  .zone__copy { gap: clamp(10px, 1.8vh, 16px); }
  .zone__specs { padding-block: clamp(12px, 2vh, 18px); }
}
/* Without scroll-driven motion (reduced motion, or GSAP unavailable) the showroom is a vertical walk */
html:not(.motion) .showroom__track { display: grid; width: auto; }
html:not(.motion) .zone { width: auto; border-bottom: 1px solid var(--steel); }
html:not(.motion) .showroom__bar, html:not(.motion) .showroom__hint { display: none; }
@media (max-width: 1023px) {
  .showroom__track { display: grid; width: auto; }
  .zone { width: auto; grid-template-columns: minmax(0, 1fr); padding-top: 56px; border-bottom: 1px solid var(--steel); }
  .zone__copy { order: 0; }
  .showroom__bar, .showroom__hint { display: none; }
}

/* 5 New at BigWing */
.nb { display: grid; grid-template-columns: minmax(0, 7fr) minmax(0, 5fr); background: var(--carbon); min-height: 88vh; }
.nb__media { position: relative; overflow: hidden; }
.nb__img { width: 100%; height: 100%; object-fit: cover; object-position: 50% 62%; }
.nb__panel { display: grid; align-content: center; gap: clamp(14px, 2.2vh, 22px); padding: clamp(40px, 7vh, 96px) var(--gutter); }
.nb__facts { display: grid; border-top: 1px solid var(--steel); }
.nb__facts div { display: grid; grid-template-columns: 110px 1fr; gap: 16px; padding: 12px 0; border-bottom: 1px solid var(--steel); }
.nb__facts dt { font: 600 11px var(--f-display); letter-spacing: .16em; text-transform: uppercase; color: var(--metal); padding-top: 3px; }
.nb__detail { aspect-ratio: 16 / 9; overflow: hidden; border-radius: var(--r); max-width: 420px; max-height: clamp(120px, 22vh, 236px); }
.nb__detail-img { width: 100%; height: 100%; object-fit: cover; }
/* laptops: give the panel enough width to keep both CTAs on one line */
@media (min-width: 1024px) and (max-width: 1599px) { .nb { grid-template-columns: minmax(0, 13fr) minmax(0, 11fr); } .nb .btn-row { gap: 12px 16px; } }
@media (max-width: 1023px) { .nb { grid-template-columns: minmax(0, 1fr); } .nb__media { aspect-ratio: 4 / 3; } }

/* 9 Service */
.service__head { display: grid; gap: 18px; max-width: 820px; margin-bottom: clamp(48px, 5vw, 88px); }
.service__track { position: relative; }
.service__line { position: absolute; left: 0; right: 0; top: 22px; height: 1px; background: var(--steel); }
.service__line span { position: absolute; inset: 0; background: #fff; transform-origin: left; }
.service__steps { position: relative; display: grid; grid-template-columns: repeat(6, minmax(0, 1fr)); gap: 24px; }
.service__steps li { display: grid; gap: 14px; align-content: start; }
.service__steps svg { width: 44px; height: 44px; padding: 10px; border: 1px solid var(--steel); border-radius: 50%; background: var(--night); }
.service__steps h3 { font: 500 18px var(--f-display); letter-spacing: .08em; text-transform: uppercase; }
.service__steps p { font-size: 14px; color: var(--metal); }
.service__cta { margin-top: clamp(40px, 4vw, 64px); }
@media (max-width: 1023px) {
  .service__steps { grid-template-columns: minmax(0, 1fr); gap: 22px; padding-left: 0; }
  .service__steps li { grid-template-columns: 44px 1fr; column-gap: 18px; }
  .service__steps li p { grid-column: 2; }
  .service__steps h3 { align-self: center; }
  .service__line { left: 22px; right: auto; top: 0; bottom: 0; width: 1px; height: auto; }
  .service__line span { transform-origin: top; }
}

/* =====================================================================
   V3 · 7 Step inside the showroom: a guided walk, four chapters
   ===================================================================== */
.tour { position: relative; background: var(--black); border-top: 1px solid var(--steel); }
.tour__pin { display: grid; grid-template-columns: minmax(0, 5fr) minmax(0, 7fr); min-height: 100vh; min-height: 100svh; }
.tour__copy { position: relative; display: grid; grid-template-rows: auto auto 1fr auto; gap: clamp(20px, 3.4vh, 40px); padding: clamp(84px, 13vh, 140px) clamp(28px, 4vw, 72px) clamp(36px, 6vh, 72px) var(--gutter); }
.tour__head { display: grid; gap: 14px; }
.tour__head .h2 { font-size: clamp(34px, min(3.2vw + 8px, 7.4vh), 64px); }
.tour__index { display: flex; flex-wrap: wrap; gap: 4px clamp(12px, 1.4vw, 22px); }
.tour__index li { color: #6B7177; transition: color .4s; }
.tour__index button { display: flex; align-items: baseline; gap: 6px; min-height: 40px; padding: 0; border: 0; background: none; color: inherit; font: 600 11px var(--f-display); letter-spacing: .12em; text-transform: uppercase; cursor: pointer; }
.tour__index button:hover { color: #fff; }
.tour__index li span { font-weight: 300; letter-spacing: .1em; }
.tour__index li.is-on { color: #fff; }
.tour__index li.is-on span { color: #FF5A5A; }
.tour__index li.is-done { color: var(--mist); }
.tour__chapters { display: grid; align-content: center; }
.tour__ch { grid-area: 1 / 1; display: grid; gap: 14px; align-content: center; justify-items: start; opacity: 0; visibility: hidden; transform: translateY(16px); transition: opacity .5s var(--ease-out), transform .6s var(--ease-out), visibility 0s .6s; }
.tour__ch.is-on { opacity: 1; visibility: visible; transform: none; transition: opacity .6s var(--ease-out) .1s, transform .7s var(--ease-out) .1s, visibility 0s; }
.tour__kicker { font: 600 12px var(--f-display); letter-spacing: .18em; text-transform: uppercase; color: #FF5A5A; }
.tour__title { font: 500 clamp(30px, min(2.6vw + 10px, 6.6vh), 56px)/1 var(--f-display); font-stretch: 110%; text-transform: uppercase; max-width: 14ch; }
.tour__text { color: var(--mist); max-width: 38ch; font-size: clamp(16px, .4vw + 13px, 19px); }
.tour__bar { position: relative; height: 2px; background: var(--steel); }
.tour__bar span { position: absolute; inset: 0; background: #fff; transform-origin: left; transform: scaleX(.25); }
.tour__stage { position: relative; overflow: hidden; background: var(--carbon); }
.tour__frame { position: absolute; inset: 0; clip-path: inset(100% 0 0 0); }
.tour__frame.is-on { clip-path: inset(0 0 0 0); }
html:not(.motion) .tour__frame { transition: clip-path .9s var(--ease); }
.tour__ai { position: absolute; inset: 0; }
@media (max-width: 1023px) {
  .tour__pin { grid-template-columns: minmax(0, 1fr); min-height: 0; }
  .tour__copy { padding: clamp(72px, 12vh, 110px) var(--gutter) 24px; grid-template-rows: none; }
  .tour__index, .tour__bar { display: none; }
  .tour__chapters { gap: 0; }
  .tour__stage { display: none; }
}
/* phones and tablets: each chapter shows its own image */
.tour__mimg { display: none; }
@media (max-width: 1023px) {
  .tour__chapters .tour__ch { grid-area: auto; opacity: 1; visibility: visible; transform: none; padding: 28px 0 36px; border-top: 1px solid var(--steel); }
  .tour__mimg { display: block; position: relative; width: 100%; aspect-ratio: 16 / 10; margin-bottom: 8px; }
}

/* =====================================================================
   V3 · 8 Make the next ride yours (finance as configuration)
   ===================================================================== */
.own { background: var(--ice); color: var(--ink); padding-block: clamp(96px, 14vh, 180px); }
.own__head { display: grid; gap: 14px; margin-bottom: clamp(32px, 5vh, 64px); }
.own__head .label { color: var(--ink-2); }
.own__grid { display: grid; grid-template-columns: minmax(0, 6fr) minmax(0, 5fr); gap: clamp(32px, 4vw, 80px); align-items: start; }
.own__visual { position: sticky; top: 96px; display: grid; gap: 18px; }
.own__stage { position: relative; aspect-ratio: 16 / 11; max-height: 62vh; width: 100%; border-radius: var(--r); overflow: hidden; background: radial-gradient(ellipse 70% 55% at 50% 58%, #FFFFFF 0%, #E3E6E8 70%, #D6DADD 100%); }
.own__stage::after { content: ""; position: absolute; left: 14%; right: 14%; bottom: 12%; height: 9%; border-radius: 50%; background: radial-gradient(ellipse at center, rgba(0,0,0,.22), rgba(0,0,0,0) 70%); }
.own__bike { position: absolute; inset: 6% 6% 10%; display: grid; place-items: center; opacity: 0; transform: translateX(4%); transition: opacity .6s var(--ease-out), transform .8s var(--ease-out); z-index: 1; }
.own__bike.is-on { opacity: 1; transform: none; }
.own__bike img { max-width: 100%; max-height: 100%; object-fit: contain; }
.own__bike--photo { inset: 0; }
.own__bike--photo img { width: 100%; height: 100%; object-fit: cover; }
.own__bike.is-missing::before { content: attr(data-name); font: 500 clamp(28px, 3vw, 48px) var(--f-display); font-stretch: 110%; text-transform: uppercase; color: #9AA0A6; }
.own__bike.is-missing img { display: none; }
.own__plate { position: absolute; left: 18px; top: 16px; z-index: 2; display: grid; gap: 2px; }
.own__plate b { font: 500 clamp(26px, 2vw + 8px, 40px)/1 var(--f-display); font-stretch: 110%; text-transform: uppercase; color: var(--ink); }
.own__plate small { font: 600 11px var(--f-display); letter-spacing: .16em; text-transform: uppercase; color: var(--ink-2); }
.own__bike--photo ~ .own__plate b, .own__stage.is-photo .own__plate b { color: #fff; }
.own__split { display: flex; height: 6px; border-radius: 3px; overflow: hidden; background: rgba(17,18,20,.1); }
.own__yours { background: var(--ink); transition: flex-basis .5s var(--ease-out); flex: 0 0 20%; }
.own__fin { background: var(--red); flex: 1 1 auto; }
.own__splitlab { display: flex; justify-content: space-between; gap: 16px; font-size: 13px; color: var(--ink-2); }
.own__splitlab b { color: var(--ink); font-weight: 600; margin-left: 4px; font-variant-numeric: tabular-nums; }
.own__splitlab i { display: inline-block; width: 10px; height: 10px; border-radius: 2px; margin-right: 6px; vertical-align: -1px; }
.own__splitlab .k1 { background: var(--ink); } .own__splitlab .k2 { background: var(--red); }
.own__controls { display: grid; gap: clamp(18px, 3vh, 28px); }
.own__q { display: grid; gap: 12px; padding-bottom: clamp(16px, 2.6vh, 24px); border-bottom: 1px solid rgba(17,18,20,.12); }
.own__qlabel { display: flex; align-items: baseline; gap: 12px; font: 600 12px var(--f-display); letter-spacing: .16em; text-transform: uppercase; color: var(--ink-2); }
.own__qlabel span { color: var(--red); }
.own__qlabel output { margin-left: auto; font: 400 22px var(--f-display); letter-spacing: 0; color: var(--ink); font-variant-numeric: tabular-nums; text-transform: none; }
.own__models { display: flex; flex-wrap: wrap; gap: 8px; }
.own__models button { display: grid; gap: 2px; justify-items: start; min-height: 52px; padding: 8px 14px; border: 1px solid rgba(17,18,20,.2); border-radius: var(--r); background: #fff; font: 500 15px/1.1 var(--f-display); text-transform: uppercase; letter-spacing: .04em; text-align: left; transition: border-color .3s, box-shadow .3s; }
.own__models button small { font: 400 12px var(--f-body); letter-spacing: 0; text-transform: none; color: var(--ink-2); }
.own__models button:hover { border-color: var(--ink); }
.own__models button[aria-checked="true"] { border-color: var(--red); box-shadow: inset 0 0 0 1px var(--red); }
.own__models button:disabled { opacity: .5; cursor: not-allowed; }
.own__range { width: 100%; height: 30px; margin: 0; background: transparent; -webkit-appearance: none; appearance: none; --p: 50%; }
.own__range::-webkit-slider-runnable-track { height: 3px; background: linear-gradient(90deg, var(--ink) var(--p), rgba(17,18,20,.16) var(--p)); }
.own__range::-moz-range-track { height: 3px; background: rgba(17,18,20,.16); }
.own__range::-moz-range-progress { height: 3px; background: var(--ink); }
.own__range::-webkit-slider-thumb { -webkit-appearance: none; width: 24px; height: 24px; margin-top: -10.5px; border-radius: 50%; background: #fff; border: 2px solid var(--red); box-shadow: 0 2px 8px rgba(0,0,0,.15); }
.own__range::-moz-range-thumb { width: 20px; height: 20px; border-radius: 50%; background: #fff; border: 2px solid var(--red); }
.own__hint { font-size: 13px; color: var(--ink-2); }
.own__tenure { display: grid; grid-template-columns: repeat(5, minmax(0, 1fr)); gap: 6px; }
.own__tenure button { display: grid; justify-items: center; gap: 0; min-height: 56px; padding: 6px 4px; border: 1px solid rgba(17,18,20,.2); border-radius: var(--r); background: #fff; font: 400 22px/1 var(--f-display); font-variant-numeric: tabular-nums; transition: background-color .3s, color .3s, border-color .3s; }
.own__tenure small { font: 600 9px var(--f-display); letter-spacing: .14em; text-transform: uppercase; color: var(--ink-2); margin-top: 4px; }
.own__tenure button:hover { border-color: var(--ink); }
.own__tenure button[aria-checked="true"] { background: var(--ink); border-color: var(--ink); color: #fff; }
.own__tenure button[aria-checked="true"] small { color: var(--mist); }
.own__result { display: grid; gap: 10px; padding: clamp(22px, 3vh, 32px); background: var(--black); color: #fff; border-radius: var(--r); }
.own__emi { display: flex; align-items: baseline; flex-wrap: wrap; gap: 4px 12px; }
.own__emi .num { font-size: clamp(48px, 3.4vw + 16px, 84px); line-height: 1; color: #fff; }
.own__emi small { font: 500 14px var(--f-display); letter-spacing: .14em; text-transform: uppercase; color: var(--metal); }
.own__meta { font-size: 14px; color: var(--mist); }
.own__rate { display: flex; align-items: center; gap: 8px; font-size: 13px; color: var(--metal); }
.own__rate button { width: 32px; height: 32px; border: 1px solid var(--steel); border-radius: 50%; background: none; color: #fff; font-size: 16px; line-height: 1; }
.own__rate button:hover { border-color: #fff; }
.own__rate b { min-width: 48px; text-align: center; color: #fff; font-variant-numeric: tabular-nums; }
.own__result .btn-row { margin-top: 6px; gap: 12px 22px; }
.own__note { font-size: 12px; color: var(--metal); }
@media (max-width: 1023px) {
  .own__grid { grid-template-columns: minmax(0, 1fr); }
  .own__visual { position: static; }
}
@media (max-width: 599px) {
  .own__models button { flex: 1 1 calc(50% - 8px); }
  .own__tenure button { font-size: 18px; min-height: 50px; }
  .own__tenure small { font-size: 8px; letter-spacing: .08em; }
  .own__splitlab { flex-direction: column; gap: 4px; }
}

/* =====================================================================
   V3 · 11 Your Honda. Your roads. Your Satara. (cinematic, local)
   ===================================================================== */
.local { position: relative; min-height: 100vh; min-height: 100svh; display: grid; overflow: hidden; background: var(--black); }
.local__media { position: absolute; inset: 0; }
.local__ai { position: absolute; inset: 0; }
.local__ai .ai__img { object-position: 50% 62%; }
.local__ai::after { content: ""; position: absolute; inset: 0; z-index: 1; pointer-events: none; background:
  linear-gradient(90deg, rgba(0,0,0,.86) 0%, rgba(0,0,0,.55) 38%, rgba(0,0,0,.08) 65%),
  linear-gradient(to top, rgba(0,0,0,.9) 0%, rgba(0,0,0,0) 40%); }
.local__content { position: relative; z-index: 2; display: grid; grid-template-columns: minmax(0, 7fr) minmax(0, 5fr); gap: clamp(32px, 4vw, 80px); align-items: end; padding-block: clamp(110px, 18vh, 200px) clamp(40px, 7vh, 80px); }
.local__story { display: grid; gap: clamp(16px, 2.6vh, 26px); align-self: center; }
.local__title { font-size: clamp(46px, min(5vw + 8px, 11vh), 112px); }
.local__title .line > span { white-space: nowrap; }
.local__text { font-size: clamp(17px, .4vw + 14px, 21px); line-height: 1.55; color: #E1E4E7; max-width: 40ch; }
.local__desk { display: grid; gap: 16px; padding: clamp(20px, 2.6vh, 28px); background: rgba(8,8,9,.92); border: 1px solid var(--steel); border-top: 2px solid var(--red); }
.desk__name { font: 500 20px var(--f-display); letter-spacing: .06em; text-transform: uppercase; }
.desk__name span { display: block; margin-top: 4px; font: 500 11px var(--f-display); letter-spacing: .18em; color: var(--metal); }
.desk__dl { display: grid; border-top: 1px solid var(--steel); }
.desk__dl div { display: grid; grid-template-columns: 76px minmax(0, 1fr); gap: 12px; padding: 10px 0; border-bottom: 1px solid var(--steel); font-size: 14px; }
.desk__dl dt { font: 600 10px var(--f-display); letter-spacing: .16em; text-transform: uppercase; color: var(--metal); padding-top: 3px; }
.desk__dl dd { display: flex; flex-wrap: wrap; align-items: center; gap: 6px 10px; min-width: 0; }
.desk__dl .visit__hours { grid-template-columns: minmax(70px, auto) 1fr; gap: 10px; }
.desk__cta { display: grid; gap: 6px; }
.desk__cta .btn--primary { width: 100%; justify-content: space-between; }
.desk__minor { display: flex; flex-wrap: wrap; gap: 0 22px; }
.desk__minor .btn--text { min-height: 40px; font-size: 12px; }
.vmap--mini { min-height: 0; height: 104px; }
.vmap--mini .vmap__pin { width: 30px; height: 30px; margin: -15px 0 0 -15px; top: 44%; box-shadow: 0 0 0 6px rgba(204,0,0,.18); }
.vmap--mini .vmap__pin svg { width: 15px; height: 15px; }
.vmap--mini .vmap__pin::after { inset: -6px; }
.vmap--mini .vmap__cap { left: 8px; right: 8px; bottom: 8px; padding: 6px 8px; font-size: 12px; gap: 4px 8px; }
.vmap--mini .vmap__cap .label { display: none; }
@media (max-width: 1023px) {
  .local__content { grid-template-columns: minmax(0, 1fr); align-items: start; }
  .local__ai::after { background: linear-gradient(to top, rgba(0,0,0,.94) 0%, rgba(0,0,0,.7) 50%, rgba(0,0,0,.2) 100%); }
}
@media (max-width: 599px) { .local__title { font-size: clamp(36px, 10.5vw, 52px); } }

/* =====================================================================
   V3 · 12 The next part is yours: the cinematic close
   ===================================================================== */
.outro { position: relative; background: #000; }
.outro__pin { position: relative; height: 100vh; height: 100svh; min-height: 560px; overflow: hidden; display: grid; place-items: center; }
.outro__media { position: absolute; inset: 0; will-change: clip-path, transform; }
.outro__img { width: 100%; height: 100%; object-fit: cover; object-position: 50% 45%; }
.outro__dark { position: absolute; inset: 0; background: radial-gradient(ellipse 70% 60% at 50% 50%, rgba(0,0,0,.15), rgba(0,0,0,.75) 100%), linear-gradient(to top, #000 0%, rgba(0,0,0,0) 45%); pointer-events: none; }
.outro__copy { position: relative; z-index: 2; display: grid; justify-items: center; gap: clamp(16px, 2.6vh, 26px); text-align: center; align-self: end; padding-bottom: clamp(48px, 10vh, 120px); }
.outro__title { font: 600 clamp(48px, min(7vw + 8px, 15vh), 168px)/.9 var(--f-display); font-stretch: 112%; text-transform: uppercase; letter-spacing: -.01em; }
.outro__title .line > span { white-space: nowrap; }
.outro__line { font-size: clamp(17px, .5vw + 14px, 22px); color: #E1E4E7; }
html:not(.motion) .outro__media { clip-path: inset(12% 0 34% 0); }
@media (max-width: 599px) { .outro__title { font-size: clamp(34px, 10vw, 52px); } .outro__title .line > span { white-space: normal; } }
/* finance stage lighting: brochure photos sit on a dark studio, so the stage dims for them */
.own__stage::before { content: ""; position: absolute; inset: 0; z-index: 0; background: radial-gradient(ellipse 70% 60% at 50% 55%, #2A2729 0%, #141314 70%, #0C0C0D 100%); opacity: 0; transition: opacity .8s var(--ease-out); }
.own__stage.is-dark::before { opacity: 1; }
.own__stage.is-dark::after { opacity: 0; }
.own__stage.is-dark .own__plate b { color: #fff; }
.own__stage.is-dark .own__plate small { color: var(--mist); }
.own__stage.is-dark .own__bike img { -webkit-mask-image: radial-gradient(ellipse 54% 52% at 50% 50%, #000 64%, transparent 100%); mask-image: radial-gradient(ellipse 54% 52% at 50% 50%, #000 64%, transparent 100%); }
.own__plate { z-index: 3; }

/* =====================================================================
   V3.3 targeted fixes (no layout change)
   ===================================================================== */
/* Arrive: background photos cross-fade inside the existing hero media */
.hero__slide { position: absolute; inset: 0; opacity: 0; }
.hero__slide.is-on { opacity: 1; z-index: 2; }
.hero__img--se { object-position: 58% 56%; }
.hero__img--city { object-position: 50% 62%; }
.hero__right { display: flex; align-items: center; gap: 22px; }
.hero__ctrl { display: flex; align-items: center; gap: 12px; margin-block: -10px; }
.hero__pause { display: grid; place-items: center; width: 36px; height: 36px; padding: 0; border: 1px solid rgba(255,255,255,.35); border-radius: 50%; background: none; color: #fff; }
.hero__pause svg { width: 14px; height: 14px; fill: none; stroke: currentColor; stroke-width: 2; }
.hero__pause .i-play { display: none; fill: currentColor; stroke: none; }
.hero__pause[aria-pressed="true"] .i-play { display: block; }
.hero__pause[aria-pressed="true"] .i-pause { display: none; }
.hero__pause:hover { background: #fff; color: #000; }
@media (max-width: 767px) {
  .hero__right { width: 100%; justify-content: space-between; gap: 12px; flex-wrap: nowrap; min-width: 0; }
  .hero__shown { min-width: 0; white-space: nowrap; }
  .hero__shown [data-hero-name] { min-width: 0; overflow: hidden; text-overflow: ellipsis; }
}

/* Help me choose: completed steps show the answer and a visible "Change" */
.cprog__val { display: block; color: #fff; font-weight: 600; }
.cprog__chg { display: inline-block; margin-top: 2px; font: 600 10px var(--f-display); letter-spacing: .14em; text-transform: uppercase; color: #FF5A5A; text-decoration: underline; text-underline-offset: 3px; }
.match__kind { font-size: 13px; color: var(--metal); }
.match__tie { font-size: 13px; line-height: 1.45; color: var(--mist); padding-top: 10px; border-top: 1px solid var(--steel); }
.match__tie a { color: #fff; font-weight: 600; }

/* The collection: a visible way past the pinned walk */
.showroom__aside { display: grid; justify-items: end; gap: 8px; }
.showroom__skip { display: inline-flex; align-items: center; gap: 8px; min-height: 44px; font: 600 12px var(--f-display); letter-spacing: .14em; text-transform: uppercase; color: #fff; text-decoration: underline; text-underline-offset: 4px; }
.showroom__skip svg { width: 16px; height: 16px; }
html:not(.motion) .showroom__skip { display: none; }
@media (max-width: 1023px) { .showroom__skip { display: none; } }

/* Take the ride (home): stronger reading gradient behind the words, same composition */
.page-home .ride-cta__shade { background: linear-gradient(to top, rgba(0,0,0,.92) 0%, rgba(0,0,0,.45) 45%, rgba(0,0,0,.1) 70%), linear-gradient(90deg, rgba(0,0,0,.72) 0%, rgba(0,0,0,.45) 38%, rgba(0,0,0,0) 62%); }
@media (max-width: 767px) { .page-home .ride-cta__shade { background: linear-gradient(to top, rgba(0,0,0,.94) 0%, rgba(0,0,0,.62) 52%, rgba(0,0,0,.15) 80%); } }
/* without script the photo controls cannot work, so they are not shown */
html:not(.js) .hero__ctrl { display: none; }

/* =====================================================================
   V3.4 · Finance: one compact model picker (scales from 4 to ~15 models)
   ===================================================================== */
.own__pick { position: relative; }
.own__sel { display: grid; grid-template-columns: 76px minmax(0, 1fr) auto; align-items: center; gap: 14px; width: 100%; min-height: 64px; padding: 8px 14px 8px 8px; border: 1px solid rgba(17,18,20,.2); border-radius: var(--r); background: #fff; color: var(--ink); text-align: left; transition: border-color .3s, box-shadow .3s; }
.own__sel:hover, .own__pick.is-open .own__sel { border-color: var(--ink); }
.own__selimg { display: block; }
.own__seltxt { display: grid; gap: 2px; min-width: 0; }
.own__seltxt b { font: 500 20px/1.05 var(--f-display); font-stretch: 108%; letter-spacing: .03em; text-transform: uppercase; }
.own__seltxt small { font-size: 13px; color: var(--ink-2); }
.own__selchg { display: inline-flex; align-items: center; gap: 6px; font: 600 11px var(--f-display); letter-spacing: .14em; text-transform: uppercase; color: var(--ink-2); }
.own__selchg svg { width: 16px; height: 16px; transition: transform .3s var(--ease-out); }
.own__pick.is-open .own__selchg svg { transform: rotate(180deg); }
.own__othumb { position: relative; display: grid; place-items: center; aspect-ratio: 3 / 2; width: 100%; border-radius: var(--r); overflow: hidden; background: radial-gradient(ellipse 70% 60% at 50% 50%, #FFFFFF 0%, #E3E6E8 80%); }
.own__othumb.is-photo { background: #1F1C1D; }
.own__othumb img { width: 100%; height: 100%; object-fit: contain; }
.own__othumb.is-missing img { display: none; }
.own__pop { position: absolute; z-index: 20; left: 0; right: 0; top: calc(100% + 6px); display: grid; gap: 0; max-height: min(420px, 56vh); padding: 6px; border: 1px solid rgba(17,18,20,.16); border-radius: var(--r); background: #fff; box-shadow: 0 24px 48px rgba(17,18,20,.16); animation: own-pop .22s var(--ease-out); }
@keyframes own-pop { from { opacity: 0; transform: translateY(-4px); } }
.own__search input { width: 100%; min-height: 44px; margin-bottom: 6px; padding: 0 12px; border: 1px solid rgba(17,18,20,.2); border-radius: var(--r); background: var(--ice); color: var(--ink); font-size: 15px; }
.own__list { overflow-y: auto; overscroll-behavior: contain; min-height: 0; padding: 0; margin: 0; list-style: none; outline: none; }
.own__list:focus-visible { box-shadow: inset 0 0 0 2px var(--red); }
.own__grp { padding: 12px 8px 6px; font: 600 10px var(--f-display); letter-spacing: .16em; text-transform: uppercase; color: var(--ink-2); }
.own__opt { display: grid; grid-template-columns: 60px minmax(0, 1fr) 20px; align-items: center; gap: 12px; min-height: 52px; padding: 4px 8px 4px 4px; border-radius: var(--r); cursor: pointer; }
.own__opt.is-active { background: var(--ice); }
.own__opt[aria-disabled="true"] { cursor: not-allowed; }
.own__opt[aria-disabled="true"] .own__otxt b, .own__opt[aria-disabled="true"] .own__othumb { opacity: .55; }
.own__otxt { display: grid; gap: 1px; min-width: 0; }
.own__otxt b { font: 500 16px/1.1 var(--f-display); letter-spacing: .04em; text-transform: uppercase; }
.own__otxt small { font-size: 12.5px; color: var(--ink-2); }
.own__ock { width: 18px; height: 18px; color: var(--red); opacity: 0; }
.own__opt[aria-selected="true"] .own__ock { opacity: 1; }
.own__opt[aria-selected="true"] .own__otxt b { color: var(--red); }
.own__none { padding: 12px 8px; font-size: 14px; color: var(--ink-2); }
/* the stage settles on the newly chosen motorcycle */
.own__stage.is-swap .own__plate { animation: own-plate .5s var(--ease-out); }
@keyframes own-plate { from { opacity: 0; transform: translateY(6px); } }
@media (max-width: 599px) { .own__sel { grid-template-columns: 60px minmax(0, 1fr) auto; } .own__seltxt b { font-size: 17px; } .own__selchg { font-size: 0; } .own__selchg svg { width: 18px; height: 18px; } }
@media (prefers-reduced-motion: reduce) { .own__pop, .own__stage.is-swap .own__plate { animation: none; } }

/* V3.4: decorative loops pause when not visible */
.hero.is-off .hero__cue svg { animation-play-state: paused; }
@media (prefers-reduced-motion: reduce) { .hero__cue svg { animation: none; } }

/* =====================================================================
   V3.5 · Arrive: discoverable slider controls
   Arrows, one indicator per photo (the active one fills as its timer) and
   pause / play. Sized for touch; the foot's height is unchanged.
   ===================================================================== */
.hero__media { z-index: 0; } /* the photos stack only among themselves, always under the shade */
.hero__ctrl { gap: 6px; }
.hero__arrow { display: grid; place-items: center; width: 36px; height: 36px; padding: 0; border: 1px solid rgba(255,255,255,.35); border-radius: 50%; background: rgba(0,0,0,.18); color: #fff; transition: background-color .25s, color .25s, border-color .25s; }
.hero__arrow svg { width: 16px; height: 16px; fill: none; stroke: currentColor; stroke-width: 2; stroke-linecap: round; stroke-linejoin: round; }
.hero__arrow:hover { background: #fff; color: #000; border-color: #fff; }
.hero__dots { display: flex; gap: 0; margin-inline: 2px; }
.hero__dot { display: grid; place-items: center; width: 34px; height: 36px; padding: 0; border: 0; background: none; cursor: pointer; }
.hero__bar { position: relative; display: block; width: 26px; height: 3px; border-radius: 2px; overflow: hidden; background: rgba(255,255,255,.32); transition: background-color .25s; }
.hero__dot:hover .hero__bar { background: rgba(255,255,255,.6); }
.hero__fill { position: absolute; inset: 0; background: #fff; transform: scaleX(0); transform-origin: 0 50%; }
.hero__dot.is-on .hero__fill { transform: scaleX(1); }
.hero__ctrl.is-auto .hero__dot.is-on .hero__fill { transform: scaleX(0); animation: hero-fill var(--hero-t, 5000ms) linear forwards; }
.hero__ctrl.is-hold .hero__dot.is-on .hero__fill { animation-play-state: paused; }
@keyframes hero-fill { to { transform: scaleX(1); } }
.hero__dot:focus-visible, .hero__arrow:focus-visible, .hero__pause:focus-visible { outline: 2px solid #fff; outline-offset: 2px; }
.hero__pause { margin-left: 4px; }
@media (prefers-reduced-motion: reduce) { .hero__pause { display: none; } }
@media (max-width: 767px) {
  .hero__arrow, .hero__pause { width: 34px; height: 34px; }
  .hero__dot { width: 28px; }
  .hero__bar { width: 20px; }
  .hero__shown { gap: 8px; font-size: 13px; }
  .hero__shown .label { display: none; }
}
@media (max-width: 359px) { .hero__arrow { display: none; } }
/* the foot keeps one line at every width, so a longer photo name can never push the headline */
.hero__cue, .hero__shown { white-space: nowrap; }
.hero__right { min-width: 0; }
.hero__shown { min-width: 0; }
.hero__shown [data-hero-name] { min-width: 0; overflow: hidden; text-overflow: ellipsis; }
@media (max-width: 1023px) { .hero__shown .label { display: none; } }
/* phones: the photo name gets its own line above the controls (fixed height, so nothing moves on a change) */
@media (max-width: 767px) {
  .hero__right { display: grid; grid-template-columns: minmax(0, 1fr); grid-template-rows: 24px 36px; align-items: center; justify-items: start; gap: 8px; }
  .hero__shown { max-width: 100%; }
  .hero__ctrl { margin-block: 0 -4px; margin-left: -2px; }
}