:root {
  --bg: #101110;
  --ink: #efeee7;
  --muted: #92958d;
  --accent: #d8ed61;
  --line: #ffffff24
}

* {
  box-sizing: border-box
}

html {
  scroll-behavior: smooth;
  scroll-padding-top: 80px
}

body {
  margin: 0;
  background: var(--bg);
  color: var(--ink);
  font-family: Arial, "Noto Sans TC", "PingFang TC", sans-serif
}

a {
  color: inherit;
  text-decoration: none
}

button {
  font: inherit
}

a:focus-visible,
button:focus-visible {
  outline: 2px solid var(--accent);
  outline-offset: 7px
}

img {
  max-width: 100%;
  display: block
}

.nav {
  height: 86px;
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 0 4%;
  border-bottom: 1px solid var(--line);
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  z-index: 10
}

.brand {
  font-weight: 900;
  font-style: italic;
  letter-spacing: -1px;
  font-size: 27px
}

.brand span {
  font-size: 10px;
  font-style: normal;
  letter-spacing: 2px;
  display: block;
  margin-top: 3px
}

.nav nav {
  display: flex;
  gap: 32px;
  font-size: 16px
}

.nav-cta {
  font-size: 14px;
  border-bottom: 1px solid var(--accent);
  padding: 10px 0
}

.nav-cta span {
  margin-left: 28px;
  color: var(--accent)
}

.hero {
  height: max(850px, 100svh);
  max-height: 1200px;
  position: relative;
  isolation: isolate;
  overflow: hidden;
  background: radial-gradient(ellipse at 52% 65%, #34392c 0, #1a1e18 28%, #101110 65%)
}

.hero-top {
  position: absolute;
  top: 118px;
  left: 4%;
  right: 4%;
  display: flex;
  justify-content: space-between;
  font-size: 10px;
  letter-spacing: 2px;
  color: var(--muted)
}

.hero h1 {
  position: absolute;
  top: 155px;
  width: 100%;
  text-align: center;
  margin: 0;
  font-size: clamp(100px, 17.2vw, 270px);
  font-weight: 900;
  letter-spacing: -.075em;
  line-height: .85;
  color: var(--accent);
  z-index: 1;
  animation: title-in 1.1s ease both
}

.hero h1 span {
  display: inline-block;
  margin-left: .12em;
  font-size: .41em;
  letter-spacing: -.06em;
  vertical-align: top;
  line-height: 1.1
}

.hero-ring {
  position: absolute;
  border: 1px solid #d8ed6114;
  border-radius: 50%;
  width: 600px;
  height: 600px;
  left: 50%;
  top: 30%;
  transform: translateX(-50%);
  z-index: 0
}

.hero-ring:after {
  content: "";
  position: absolute;
  inset: 45px;
  border: 1px solid #d8ed610b;
  border-radius: 50%
}

.ground {
  position: absolute;
  bottom: 9%;
  height: 20%;
  left: 12%;
  right: 12%;
  background: radial-gradient(ellipse, #000b, transparent 65%);
  filter: blur(16px)
}

.bike-wrap {
  position: absolute;
  top: 29%;
  bottom: 13%;
  width: 100%;
  z-index: 2;
  display: flex;
  justify-content: center;
  pointer-events: none;
  animation: bike-in 1.3s cubic-bezier(.2, .7, .2, 1) both
}

.bike-wrap img {
  height: 100%;
  width: auto;
  object-fit: contain;
  filter: drop-shadow(15px 30px 18px #0008);
  transition: opacity .16s
}

.callout {
  position: absolute;
  z-index: 3;
  top: 54%
}

.left {
  left: 7%
}

.tiny {
  font-size: 9px;
  letter-spacing: 1.8px;
  color: var(--muted)
}

.left strong {
  display: block;
  font-size: 66px;
  letter-spacing: -4px;
  font-weight: 400;
  margin: 8px 0
}

.left strong span {
  font-size: 20px;
  letter-spacing: 0;
  margin-left: 7px
}

.left p {
  font-size: 12px;
  color: var(--muted)
}

.left:after {
  content: "";
  height: 1px;
  width: 80px;
  background: var(--line);
  position: absolute;
  left: 130px;
  top: 64px
}

.right {
  right: 7%;
  top: 51%
}

.right p {
  font-size: 36px;
  line-height: 1.5;
  letter-spacing: 3px;
  margin: 16px 0
}

.text-link {
  font-size: 11px;
  color: var(--muted);
  display: flex;
  gap: 50px;
  align-items: center
}

.text-link span {
  color: var(--accent);
  font-size: 20px
}

.hero-footer {
  position: absolute;
  bottom: 32px;
  left: 4%;
  right: 4%;
  display: flex;
  justify-content: space-between;
  align-items: flex-end;
  z-index: 5
}

.color-control {
  display: grid;
  gap: 11px
}

.swatches {
  display: flex;
  gap: 13px;
  padding-left: 3px
}

.swatch {
  width: 18px;
  height: 18px;
  border: 1px solid #ffffff50;
  border-radius: 50%;
  cursor: pointer;
  position: relative
}

.swatch[aria-pressed=true]:after {
  content: "";
  position: absolute;
  inset: -5px;
  border: 1px solid var(--accent);
  border-radius: 50%
}

.blue {
  background: #414d8a
}

.black {
  background: #282a28
}

.silver {
  background: #bfc1b8
}

#color-label {
  font-size: 9px;
  color: var(--muted);
  letter-spacing: 1px;
  min-width: 195px
}

.scroll {
  position: absolute;
  left: 50%;
  transform: translateX(-50%);
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 14px;
  font-size: 8px;
  letter-spacing: 2px
}

.scroll-arrow {
  font-size: 24px;
  font-weight: 400
}

.edition {
  font-size: 9px;
  letter-spacing: 1.5px;
  color: var(--muted)
}

.section {
  padding: 110px 7%
}

.section-index {
  font-size: 10px;
  letter-spacing: 2px;
  color: var(--muted)
}

h2 {
  font-weight: 500;
  font-size: clamp(30px, 3.8vw, 58px);
  line-height: 1.45;
  letter-spacing: -1px;
  margin: 20px 0
}

.intro {
  border-top: 1px solid var(--line)
}

.intro-copy {
  max-width: 690px;
  margin: 55px auto 70px
}

.eyebrow {
  font-size: 12px;
  letter-spacing: 2px;
  color: var(--accent)
}

.intro h2 {
  font-size: clamp(40px, 5.5vw, 78px)
}

.intro h2 span {
  color: var(--muted)
}

.body-copy {
  font-size: 14px;
  line-height: 2.1;
  color: var(--muted);
  max-width: 470px
}

.stat-row {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  border-top: 1px solid var(--line);
  padding-top: 35px;
  gap: 20px
}

.stat-row strong {
  font-size: 44px;
  letter-spacing: -2px;
  font-weight: 400;
  display: block
}

.stat-row small {
  font-size: 15px;
  color: var(--accent);
  letter-spacing: 0;
  margin-left: 5px
}

.stat-row div>span {
  display: block;
  font-size: 11px;
  color: var(--muted);
  margin-top: 13px
}

.feature {
  display: grid;
  grid-template-columns: 1.15fr 1fr;
  align-items: center;
  gap: 8%;
  padding-top: 65px;
  padding-bottom: 65px
}

.feature-photo {
  position: relative;
  overflow: hidden;
  aspect-ratio: 1.15;
  background: #1b1d19
}

.feature-photo img {
  width: 100%;
  height: 100%;
  object-fit: cover
}

.photo-label {
  position: absolute;
  left: 20px;
  bottom: 20px;
  font-size: 9px;
  letter-spacing: 2px;
  color: white;
  text-shadow: 0 1px 4px black
}

.feature-copy h2 {
  margin-top: 28px
}

.detail-list {
  list-style: none;
  padding: 0;
  margin: 35px 0 0
}

.detail-list li {
  display: flex;
  justify-content: space-between;
  gap: 16px;
  border-bottom: 1px solid var(--line);
  padding: 18px 0;
  font-size: 12px
}

.detail-list li span {
  color: var(--muted);
  font-size: 9px;
  align-self: center
}

.reverse .feature-photo {
  order: 2
}

.tech {
  text-align: center;
  margin-top: 50px;
  background: #151714
}

.tech .body-copy {
  margin: 0 auto
}

.dash-pair {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 40px;
  max-width: 950px;
  margin: 65px auto 35px
}

.dash-pair img {
  width: 100%
}

.tech-notes {
  display: flex;
  justify-content: center;
  gap: 65px;
  font-size: 10px;
  letter-spacing: 2px;
  color: var(--accent)
}

.specs {
  display: grid;
  grid-template-columns: 1fr 1fr;
  column-gap: 8%
}

.specs h2 {
  font-size: 38px
}

.specs dl {
  margin: 0
}

.specs dl div {
  display: flex;
  justify-content: space-between;
  gap: 20px;
  padding: 20px 0;
  border-bottom: 1px solid var(--line);
  font-size: 12px
}

.specs dt {
  color: var(--muted)
}

.specs dd {
  margin: 0;
  text-align: right
}

.source-note {
  grid-column: 1/-1;
  font-size: 10px;
  color: var(--muted);
  line-height: 1.8;
  margin-top: 45px
}

.closing {
  text-align: center;
  border-top: 1px solid var(--line);
  padding-top: 90px;
  padding-bottom: 100px
}

.pill {
  display: inline-flex;
  background: var(--accent);
  color: #141710;
  border-radius: 100px;
  gap: 35px;
  padding: 18px 28px;
  font-size: 12px;
  margin-top: 20px;
  transition: background .2s
}

.pill:hover {
  background: #ecffa0
}

.footer {
  padding: 32px 4%;
  border-top: 1px solid var(--line);
  display: flex;
  gap: 25px;
  justify-content: space-between;
  align-items: center
}

.footer>span:not(.brand) {
  font-size: 9px;
  color: var(--muted);
  line-height: 1.8
}

.reveal.ready {
  opacity: 0;
  transform: translateY(25px);
  transition: opacity .8s, transform .8s
}

.reveal.ready.visible {
  opacity: 1;
  transform: none
}

@keyframes bike-in {
  from {
    opacity: 0;
    transform: translateY(45px) scale(.97)
  }

  to {
    opacity: 1;
    transform: none
  }
}

@keyframes title-in {
  from {
    opacity: 0;
    transform: translateY(20px)
  }

  to {
    opacity: 1;
    transform: none
  }
}

@media(min-width:1600px) {
  .hero h1 {
    top: 17%
  }

  .bike-wrap {
    top: 30%
  }
}

@media(max-width:900px) {
  .callout.right {
    right: 4%
  }

  .right p {
    font-size: 26px
  }

  .left {
    left: 4%
  }

  .left:after {
    display: none
  }

  .hero h1 {
    top: 190px
  }

  .stat-row strong {
    font-size: 35px
  }

  .feature {
    gap: 5%
  }

  .specs {
    grid-template-columns: 1fr
  }

  .specs dl {
    margin-top: 30px
  }

  .edition {
    display: none
  }
}

@media(max-width:600px) {
  .nav {
    height: 76px;
    padding: 0 6%
  }

  .brand {
    font-size: 23px
  }

  .nav nav {
    display: none
  }

  .hero {
    height: max(790px, 100svh);
    max-height: 1000px
  }

  .hero-top {
    top: 105px;
    left: 6%;
    right: 6%;
    font-size: 8px;
    letter-spacing: 1px
  }

  .hero-top span:last-child {
    display: none
  }

  .hero h1 {
    top: 151px;
    font-size: 20vw;
    line-height: 1.1
  }

  .hero h1 span {
    display: block;
    font-size: 20px;
    letter-spacing: 7px;
    margin: 5px 0 0
  }

  .bike-wrap {
    top: 28%;
    bottom: 23%
  }

  .hero-ring {
    width: 360px;
    height: 360px;
    top: 29%
  }

  .callout {
    top: auto;
    bottom: 145px
  }

  .left {
    left: 6%
  }

  .left strong {
    font-size: 33px;
    letter-spacing: -1px;
    margin: 5px 0
  }

  .left strong span {
    font-size: 13px
  }

  .left p {
    font-size: 10px;
    margin: 6px 0
  }

  .left .tiny {
    font-size: 8px
  }

  .right {
    top: auto;
    right: 6%;
    bottom: 148px;
    text-align: right
  }

  .right>.tiny,
  .right .text-link {
    display: none
  }

  .right p {
    font-size: 20px;
    line-height: 1.5;
    margin: 0;
    letter-spacing: 2px
  }

  .hero-footer {
    left: 6%;
    right: 6%;
    bottom: 25px;
    border-top: 1px solid var(--line);
    padding-top: 20px
  }

  .scroll {
    left: auto;
    right: 0;
    transform: none;
    font-size: 7px;
    gap: 8px
  }

  .section {
    padding: 65px 7%
  }

  .intro-copy {
    margin: 38px 0 45px
  }

  .intro h2 {
    font-size: 42px
  }

  .stat-row {
    grid-template-columns: 1fr 1fr;
    gap: 32px 15px
  }

  .stat-row strong {
    font-size: 36px
  }

  .feature {
    grid-template-columns: 1fr;
    gap: 35px
  }

  .reverse .feature-photo {
    order: 0
  }

  .feature-copy h2 {
    font-size: 34px
  }

  .feature-photo {
    aspect-ratio: 1.15
  }

  .tech {
    margin-top: 15px
  }

  .tech h2 {
    font-size: 30px
  }

  .dash-pair {
    gap: 15px;
    margin: 35px auto
  }

  .tech-notes {
    gap: 20px;
    font-size: 8px;
    letter-spacing: 1px
  }

  .specs h2 {
    font-size: 30px
  }

  .specs dl div {
    font-size: 11px
  }

  .specs dt {
    min-width: 90px
  }

  .footer {
    padding: 25px 7%;
    flex-wrap: wrap
  }

  .footer>span:last-child {
    width: 100%
  }
}

@media(prefers-reduced-motion:reduce) {
  html {
    scroll-behavior: auto
  }

  *,
  *:before,
  *:after {
    animation: none !important;
    transition: none !important
  }

  .reveal.ready {
    opacity: 1;
    transform: none
  }
}

/* 城市夜景版：場景層、閱讀遮罩與獨立文字 */
:root {
  --accent: #71e6ef;
  --bg: #0c1115
}

.city-hero {
  height: 100svh;
  min-height: 760px;
  max-height: 1400px;
  background: #07131b
}

.city-scenes,
.city-shade {
  position: absolute;
  inset: 0;
  z-index: 0
}

.city-scene {
  position: absolute;
  width: 100%;
  height: 100%;
  object-fit: cover;
  object-position: 50% 58%;
  opacity: 0;
  transform: scale(1.035);
  transition: opacity 1s ease, transform 6s ease;
  pointer-events: none
}

.city-scene.active {
  opacity: 1;
  transform: scale(1)
}

.city-shade {
  z-index: 1;
  background: linear-gradient(180deg, #02070dd9 0%, #02070d30 27%, transparent 60%, #02070de8 100%), linear-gradient(90deg, #02070d8c, transparent 65%);
  pointer-events: none
}

.city-hero .hero-top {
  z-index: 2;
  top: 118px;
  color: #c2d4dc
}

.city-headline {
  position: absolute;
  z-index: 2;
  left: 6%;
  top: 20%;
  max-width: 580px
}

.city-headline .eyebrow {
  font-size: 10px;
  letter-spacing: 4px
}

.city-hero h1 {
  position: static;
  width: auto;
  text-align: left;
  font-size: clamp(65px, 8vw, 125px);
  line-height: .9;
  color: #f3f5f2;
  letter-spacing: -.065em;
  animation: none;
  margin: 20px 0 16px
}

.city-hero h1 span {
  display: block;
  font-size: .37em;
  line-height: 1.3;
  letter-spacing: .1em;
  margin: 12px 0 0;
  color: var(--accent)
}

.city-tagline {
  font-size: 19px;
  letter-spacing: 5px;
  margin: 22px 0;
  color: #f4f7f8
}

.city-explore {
  display: inline-flex;
  gap: 35px;
  align-items: center;
  font-size: 11px;
  border-bottom: 1px solid #ffffff70;
  padding: 13px 0
}

.city-explore span {
  font-size: 18px;
  color: var(--accent)
}

.city-bottom {
  position: absolute;
  left: 6%;
  right: 6%;
  bottom: 35px;
  z-index: 3;
  display: flex;
  align-items: flex-end;
  justify-content: space-between;
  gap: 30px
}

.scene-info .tiny {
  color: #b6cad4;
  font-size: 8px
}

.scene-info p {
  font-size: 12px;
  letter-spacing: 2px;
  margin: 15px 0 0
}

.scene-controls {
  display: flex;
  gap: 25px
}

.scene-button {
  cursor: pointer;
  border: 0;
  border-top: 1px solid #ffffff50;
  background: transparent;
  padding: 15px 0 5px;
  color: #c4cfd5;
  display: flex;
  gap: 17px;
  font-size: 11px;
  min-width: 115px;
  transition: color .2s, border-color .2s
}

.scene-button span {
  font-size: 9px
}

.scene-button[aria-pressed=true] {
  color: var(--accent);
  border-color: var(--accent)
}

.city-scroll {
  font-size: 10px;
  letter-spacing: 2px;
  display: flex;
  align-items: center;
  gap: 20px
}

.city-scroll span {
  font-size: 23px
}

.color-section {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 30px;
  align-items: center;
  border-top: 1px solid var(--line);
  background: radial-gradient(ellipse at 75% 50%, #263039, #101519 65%)
}

.color-section h2 {
  font-size: 38px
}

.color-section .color-control {
  margin-top: 40px
}

.color-section>img {
  height: 440px;
  width: 100%;
  object-fit: contain
}

.color-section .swatches {
  margin: 12px 0
}

@media(max-width:900px) {
  .city-headline {
    top: 21%;
    left: 5%
  }

  .city-hero h1 {
    font-size: 80px
  }

  .city-bottom {
    left: 5%;
    right: 5%
  }

  .scene-info {
    display: none
  }

  .scene-controls {
    gap: 20px
  }

  .city-scene {
    object-position: 57% center
  }
}

@media(max-width:600px) {
  .city-hero {
    height: 100svh;
    min-height: 780px;
    max-height: 1100px
  }

  .city-hero .hero-top {
    top: 105px;
    left: 6%;
    font-size: 8px
  }

  .city-headline {
    top: 18%;
    left: 6%;
    right: 6%
  }

  .city-hero h1 {
    font-size: 19vw;
    line-height: .9;
    margin-top: 15px
  }

  .city-hero h1 span {
    font-size: 24px;
    letter-spacing: 4px;
    margin-top: 10px
  }

  .city-tagline {
    font-size: 14px;
    letter-spacing: 3px;
    margin: 17px 0
  }

  .city-headline .eyebrow {
    font-size: 8px
  }

  .city-explore {
    font-size: 10px;
    padding: 8px 0
  }

  .city-scene {
    object-fit: cover;
    object-position: 52% 66%
  }

  .city-hero[data-scene="1"] .city-scene {
    object-position: 56% 66%
  }

  .city-hero[data-scene="2"] .city-scene {
    object-position: 54% 66%
  }

  .city-shade {
    background: linear-gradient(180deg, #02070df0 0%, #02070da3 25%, #02070d18 57%, #02070dd9 100%)
  }

  .city-bottom {
    left: 6%;
    right: 6%;
    bottom: 25px;
    display: block
  }

  .scene-controls {
    gap: 15px;
    justify-content: space-between
  }

  .scene-button {
    min-width: 0;
    flex: 1;
    font-size: 10px;
    gap: 8px;
    padding-top: 15px
  }

  .city-scroll {
    justify-content: flex-end;
    font-size: 8px;
    margin-top: 20px
  }

  .color-section {
    grid-template-columns: 1fr
  }

  .color-section h2 {
    font-size: 30px
  }

  .color-section>img {
    height: 350px
  }

  .color-section .color-control {
    margin-top: 25px
  }
}

@media(prefers-reduced-motion:reduce) {
  .city-scene {
    transform: none;
    transition: none
  }
}

/* 使用提供的原始 SVG，保留比例與品牌顏色 */
.brand {
  display: inline-flex;
  align-items: center;
  flex-shrink: 0
}

.brand-logo {
  display: block;
  width: 150px;
  height: auto
}

.city-hero h1 .model-logo-plate {
  display: block;
  background: transparent;
  border-radius: 0;
  padding: 0;
  margin: 22px 0 0;
  width: min(450px, 40vw);
  line-height: 0;
  letter-spacing: normal
}

.model-logo {
  width: 100%;
  height: auto;
  display: block
}

.city-hero h1 .model-displacement {
  font-size: 29px;
  letter-spacing: 6px;
  margin: 18px 0 0;
  color: var(--accent)
}

.footer .brand-logo {
  width: 125px
}

@media(max-width:600px) {
  .brand-logo {
    width: 126px
  }

  .city-hero h1 .model-logo-plate {
    width: min(310px, 82vw);
    padding: 0;
    margin-top: 16px
  }

  .city-hero h1 .model-displacement {
    font-size: 22px;
    margin-top: 14px;
    letter-spacing: 5px
  }

  .footer .brand-logo {
    width: 115px
  }
}

/* Layered city story: background and transparent product move independently. */
.hero-story {
  height: 250svh;
  position: relative
}

.hero-story .city-hero {
  position: sticky;
  top: 0;
  min-height: 700px;
  height: 100svh;
  max-height: none
}

.scene-layer {
  position: absolute;
  inset: 0;
  opacity: 0;
  transition: opacity .65s ease;
  pointer-events: none;
  overflow: hidden
}

.scene-layer.active {
  opacity: 1
}

.layer-bg {
  position: absolute;
  inset: -12px;
  width: calc(100% + 24px);
  height: calc(100% + 24px);
  max-width: none;
  object-fit: cover;
  object-position: 50% 55%;
  transform: translateX(var(--scene-drift, 0px)) scale(1.015)
}

.layer-bike {
  position: absolute;
  left: 59%;
  bottom: 15%;
  height: 59%;
  width: auto;
  max-width: 70%;
  object-fit: contain;
  transform: translateX(calc(-50% + 28px)) translateY(10px) scale(.98);
  transform-origin: 50% 90%;
  filter: drop-shadow(0 13px 12px #0008);
  transition: transform 1.1s cubic-bezier(.2, .7, .25, 1)
}

.scene-layer.active .layer-bike {
  transform: translateX(-50%) translateY(0) scale(1)
}

.scene-layer[data-angle=front] .layer-bike {
  height: 66%;
  left: 60%;
  bottom: 14%
}

.scene-layer[data-angle=rear] .layer-bike {
  height: 61%;
  left: 59%;
  bottom: 15%
}

.city-hero .city-shade {
  background: linear-gradient(180deg, #02070dc9 0%, #02070d15 28%, transparent 64%, #02070dce 88%, #02070df5 100%), linear-gradient(90deg, #02070d88, transparent 48%)
}

.city-hero h1 .model-logo-plate {
  width: min(430px, 34vw)
}

.city-headline {
  top: 21%;
  left: 5%;
  max-width: 490px
}

.city-tagline {
  font-size: 16px;
  letter-spacing: 1.5px
}

.city-bottom {
  left: 5%;
  right: 5%;
  bottom: 29px
}

.scene-button {
  min-width: 125px
}

.hero-top span:last-child {
  letter-spacing: 1.5px
}

.intro-copy {
  max-width: 790px
}

.intro h2 {
  line-height: 1.13;
  letter-spacing: -3px
}

.feature h2 {
  line-height: 1.16;
  font-size: clamp(32px, 3.7vw, 56px)
}

.feature-copy .section-index {
  display: block;
  margin-bottom: 30px
}

.detail-list li {
  font-size: 12px;
  line-height: 1.6
}

.detail-list li span {
  flex-shrink: 0
}

.features h2,
.tech h2,
.closing h2 {
  letter-spacing: -1.5px
}

.footer>span:last-child {
  max-width: 360px
}

.specs dd {
  max-width: 290px;
  line-height: 1.6
}

.specs dt {
  flex-shrink: 0
}

.source-note {
  max-width: 820px
}

@media(max-width:900px) {
  .city-headline {
    left: 5%;
    top: 20%
  }

  .city-hero h1 .model-logo-plate {
    width: 330px
  }

  .layer-bike {
    left: 62%;
    height: 53%;
    max-width: 76%;
    bottom: 17%
  }

  .scene-layer[data-angle=front] .layer-bike {
    left: 65%;
    height: 58%;
    bottom: 16%
  }

  .scene-layer[data-angle=rear] .layer-bike {
    left: 62%;
    height: 55%;
    bottom: 17%
  }

  .scene-button {
    min-width: 115px
  }

  .scene-controls {
    gap: 14px
  }

  .city-scroll {
    font-size: 8px;
    letter-spacing: 1px;
    gap: 12px
  }

  .intro h2 {
    letter-spacing: -2px
  }
}

@media(max-width:600px) {
  .hero-story {
    height: 240svh
  }

  .hero-story .city-hero {
    height: 100svh;
    min-height: 730px
  }

  .city-headline {
    top: 19%;
    left: 6%;
    right: 6%
  }

  .city-hero h1 .model-logo-plate {
    width: min(300px, 76vw)
  }

  .city-tagline {
    font-size: 12px;
    letter-spacing: 1px
  }

  .layer-bg {
    object-position: 50% 58%
  }

  .layer-bike {
    height: 37%;
    max-width: 94%;
    left: 52%;
    bottom: 20%
  }

  .scene-layer[data-angle=front] .layer-bike {
    height: 43%;
    max-width: 85%;
    left: 54%;
    bottom: 19%
  }

  .scene-layer[data-angle=rear] .layer-bike {
    height: 39%;
    max-width: 93%;
    left: 52%;
    bottom: 20%
  }

  .city-bottom {
    left: 6%;
    right: 6%;
    bottom: 26px
  }

  .scene-button {
    min-width: 0;
    font-size: 9px;
    gap: 6px
  }

  .scene-controls {
    gap: 12px
  }

  .city-scroll {
    font-size: 8px
  }

  .city-headline .eyebrow {
    font-size: 8px
  }

  .intro h2 {
    font-size: 44px;
    letter-spacing: -2px
  }

  .feature h2 {
    font-size: 40px
  }

  .body-copy {
    font-size: 14px
  }

  .specs dt {
    min-width: 0;
    max-width: 38%;
    line-height: 1.6
  }

  .specs dd {
    max-width: 60%
  }

  .detail-list li {
    font-size: 11px
  }

  .tech-notes {
    font-size: 7px;
    gap: 15px
  }
}

@media(prefers-reduced-motion:reduce) {
  .hero-story {
    height: auto
  }

  .hero-story .city-hero {
    position: relative
  }

  .layer-bg,
  .layer-bike,
  .scene-layer.active .layer-bike {
    transition: none;
    transform: translateX(-50%)
  }

  .layer-bg {
    transform: none
  }

  .scene-layer {
    transition: none
  }
}

/* Keep the product close to the supplied road contact and reflection positions. */
@media(min-width:901px) {
  .layer-bike {
    left: 52%;
    height: 55%;
    bottom: 19%
  }

  .scene-layer[data-angle=front] .layer-bike {
    left: 55%;
    height: 63%;
    bottom: 17%
  }

  .scene-layer[data-angle=rear] .layer-bike {
    left: 53%;
    height: 57%;
    bottom: 19%
  }
}

/* Reference-led motion composition, with typography behind the product. */
:root {
  --motion-orange: #f2643e
}

.motion-hero {
  background: #10110f;
  isolation: isolate
}

.filter-defs {
  position: absolute;
  width: 0;
  height: 0;
  overflow: hidden
}

.motion-backgrounds,
.motion-products {
  position: absolute;
  inset: 0;
  pointer-events: none
}

.motion-backgrounds {
  z-index: 0;
  overflow: hidden
}

.motion-bg {
  position: absolute;
  inset: -20px;
  width: calc(100% + 40px);
  height: calc(100% + 40px);
  max-width: none;
  object-fit: cover;
  object-position: 50% 48%;
  will-change: transform, opacity
}

.motion-shade {
  position: absolute;
  inset: 0;
  z-index: 1;
  pointer-events: none;
  background: linear-gradient(180deg, #050909c9 0%, #05090950 35%, #05090938 60%, #071013ed 88%, #071013 100%)
}

.motion-title {
  position: absolute;
  top: 17%;
  left: 5%;
  width: 90%;
  z-index: 2;
  will-change: transform, opacity
}

.motion-title .eyebrow {
  font-size: 9px;
  letter-spacing: 3px;
  color: #d9d8ce
}

.motion-hero .motion-title h1 {
  font-family: Impact, 'Arial Narrow', Arial, sans-serif;
  color: var(--motion-orange);
  font-size: clamp(72px, 13.4vw, 210px);
  letter-spacing: -.035em;
  line-height: .95;
  margin: 20px 0 0;
  white-space: nowrap
}

.motion-products {
  z-index: 3;
  overflow: hidden
}

.motion-bike {
  position: absolute;
  width: auto;
  height: 65%;
  max-width: 75%;
  object-fit: contain;
  left: 55%;
  bottom: 13%;
  transform-origin: 50% 92%;
  will-change: transform, opacity;
  filter: drop-shadow(0 15px 12px #0007)
}

.motion-bike:nth-child(2) {
  height: 70%;
  left: 53%;
  bottom: 13%
}

.motion-bike:nth-child(3) {
  height: 65%;
  left: 55%;
  bottom: 13%
}

.motion-model {
  position: absolute;
  z-index: 5;
  top: 115px;
  right: 5%;
  width: 155px;
  display: flex;
  gap: 12px;
  align-items: center
}

.motion-model img {
  width: 120px;
  height: auto
}

.motion-model>span {
  font-size: 12px;
  letter-spacing: 1px;
  color: #ddd
}

.motion-panel {
  position: absolute;
  z-index: 4;
  will-change: transform, opacity;
  pointer-events: none
}

.motion-panel .tiny {
  color: #e1ded5;
  font-size: 9px;
  letter-spacing: 2px
}

.panel-intro {
  left: 6%;
  top: 49%;
  width: 250px
}

.panel-intro>p {
  font-size: 18px;
  line-height: 1.5;
  margin: 15px 0 25px;
  letter-spacing: 1px
}

.gauge-pair {
  display: flex;
  gap: 15px
}

.gauge-pair>div {
  width: 104px;
  height: 110px;
  border: 1px solid #ffffff60;
  border-radius: 6px 6px 50px 50px;
  display: flex;
  flex-direction: column;
  justify-content: center;
  text-align: center;
  background: #070a0a33;
  backdrop-filter: blur(5px)
}

.gauge-pair strong {
  font-size: 28px;
  letter-spacing: -1px
}

.gauge-pair strong span {
  font-size: 10px;
  letter-spacing: 0;
  margin-left: 3px
}

.gauge-pair small {
  font-size: 7px;
  letter-spacing: 1px;
  margin-top: 8px;
  color: #bfc2bc
}

.panel-left {
  left: 6%;
  top: 44%;
  width: 250px
}

.panel-right {
  right: 6%;
  top: 51%;
  width: 235px
}

.motion-panel>strong {
  display: block;
  font-family: Impact, 'Arial Narrow', Arial, sans-serif;
  font-size: 80px;
  line-height: 1.1;
  letter-spacing: -2px;
  margin: 12px 0 0
}

.motion-panel>strong span {
  font: 15px Arial;
  letter-spacing: 1px;
  margin-left: 8px
}

.motion-panel>p {
  font-size: 11px;
  letter-spacing: 2px
}

.motion-panel>small {
  font-size: 10px;
  color: #c3cacb;
  line-height: 1.8;
  display: block;
  max-width: 190px
}

.metric-rule {
  display: block;
  width: 60px;
  height: 1px;
  background: var(--motion-orange);
  margin: 22px 0
}

.detail-left {
  left: 6%;
  top: 47%;
  width: 260px
}

.detail-left h2 {
  font-family: Impact, 'Arial Narrow', Arial, sans-serif;
  line-height: .98;
  font-size: 54px;
  margin: 20px 0
}

.detail-chips {
  display: flex;
  gap: 12px
}

.detail-chips span {
  border: 1px solid #b4bdbb;
  padding: 8px 15px;
  font-size: 11px;
  letter-spacing: 1px
}

.detail-right {
  right: 5%;
  top: 54%;
  width: 230px
}

.detail-right>img {
  width: 180px;
  margin: 0 auto 12px
}

.detail-right>strong {
  font: 12px Arial;
  letter-spacing: 1px;
  line-height: 1.5
}

.detail-right>p {
  font-size: 9px;
  line-height: 1.8;
  letter-spacing: .3px
}

.motion-loader {
  position: absolute;
  inset: 0;
  z-index: 15;
  background: #10110e;
  color: var(--motion-orange);
  pointer-events: none;
  overflow: hidden
}

.motion-loader>span:first-child {
  position: absolute;
  top: 14%;
  left: 6%;
  font: clamp(90px, 16vw, 210px)/1 Impact, 'Arial Narrow', sans-serif;
  letter-spacing: -7px
}

.loader-label {
  position: absolute;
  top: 17%;
  right: 6%;
  font-size: 9px;
  letter-spacing: 2px;
  color: #9d9e94
}

.motion-loader>img {
  position: absolute;
  left: 22%;
  bottom: 14%;
  height: 51%;
  width: auto;
  max-width: 75%;
  filter: url(#bike-outline);
  opacity: .85
}

.loader-track {
  position: absolute;
  bottom: 8%;
  left: 6%;
  right: 6%;
  height: 1px;
  background: #ffffff20
}

.loader-track i {
  height: 100%;
  display: block;
  background: var(--motion-orange);
  transform-origin: 0 0
}

.motion-bottom {
  position: absolute;
  bottom: 27px;
  left: 5%;
  right: 5%;
  display: flex;
  justify-content: space-between;
  align-items: center;
  z-index: 7;
  padding-top: 20px;
  border-top: 1px solid #ffffff20
}

.motion-bottom>span {
  font-size: 9px;
  letter-spacing: 1px;
  max-width: 240px
}

.motion-bottom>a {
  font-size: 10px;
  letter-spacing: 1px
}

.motion-controls {
  display: flex;
  gap: 20px
}

.motion-controls button {
  background: none;
  color: #d8dfde;
  border: 0;
  cursor: pointer;
  font-size: 10px;
  padding: 10px
}

.motion-steps {
  position: absolute;
  right: 25px;
  top: 36%;
  height: 170px;
  display: flex;
  flex-direction: column;
  justify-content: space-between;
  z-index: 6
}

.motion-steps:before {
  content: '';
  position: absolute;
  left: 5px;
  top: 6px;
  bottom: 6px;
  width: 1px;
  background: #ffffff40
}

.motion-steps button {
  position: relative;
  width: 12px;
  height: 12px;
  background: #6f7671;
  border: 3px solid #18201b;
  border-radius: 50%;
  cursor: pointer;
  padding: 0
}

.motion-steps button[aria-pressed=true] {
  background: var(--motion-orange)
}

.motion-steps button span {
  position: absolute;
  right: 20px;
  top: -2px;
  font-size: 8px;
  color: #bfc4c0
}

.hero-story:after {
  content: '';
  position: absolute;
  bottom: 0;
  left: 0;
  right: 0;
  height: 0
}

@media(max-width:1000px) {
  .motion-title {
    top: 18%
  }

  .panel-intro {
    left: 5%;
    width: 200px
  }

  .panel-intro>p {
    font-size: 15px
  }

  .gauge-pair {
    gap: 10px
  }

  .gauge-pair>div {
    width: 85px;
    height: 100px
  }

  .panel-left {
    left: 5%;
    width: 175px
  }

  .panel-right {
    right: 6%;
    width: 165px
  }

  .motion-panel>strong {
    font-size: 65px
  }

  .motion-panel .tiny {
    font-size: 7px
  }

  .detail-left {
    left: 5%;
    width: 180px
  }

  .detail-left h2 {
    font-size: 40px
  }

  .detail-right {
    width: 180px;
    right: 6%
  }

  .detail-right>img {
    width: 150px
  }

  .motion-bike {
    height: 57%;
    left: 56%
  }

  .motion-bike:nth-child(2) {
    height: 65%
  }

  .motion-bike:nth-child(3) {
    height: 59%
  }
}

@media(max-width:600px) {
  .motion-title {
    top: 23%;
    left: 5%;
    width: 90%
  }

  .motion-hero .motion-title h1 {
    font-size: 14.2vw;
    letter-spacing: -.02em;
    margin-top: 13px
  }

  .motion-title .eyebrow {
    font-size: 7px;
    letter-spacing: 1px
  }

  .motion-model {
    top: 100px;
    right: 6%;
    width: 130px
  }

  .motion-model img {
    width: 100px
  }

  .motion-model>span {
    font-size: 10px
  }

  .motion-bike {
    height: 41%;
    left: 52%;
    max-width: 94%;
    bottom: 24%
  }

  .motion-bike:nth-child(2) {
    height: 45%;
    left: 52%;
    bottom: 23%
  }

  .motion-bike:nth-child(3) {
    height: 42%;
    left: 52%;
    bottom: 24%
  }

  .motion-panel .tiny {
    font-size: 7px;
    letter-spacing: 1px
  }

  .panel-intro {
    left: 6%;
    top: auto;
    bottom: 12%;
    width: auto;
    right: 6%;
    display: flex;
    align-items: center;
    justify-content: space-between
  }

  .panel-intro>.tiny {
    display: none
  }

  .panel-intro>p {
    font-size: 13px;
    letter-spacing: 0;
    margin: 0
  }

  .gauge-pair {
    gap: 10px
  }

  .gauge-pair>div {
    width: 70px;
    height: 72px;
    border-radius: 3px 3px 30px 30px
  }

  .gauge-pair strong {
    font-size: 22px
  }

  .gauge-pair small {
    font-size: 6px;
    letter-spacing: .3px
  }

  .panel-left,
  .panel-right {
    top: auto;
    bottom: 13%;
    width: 43%
  }

  .panel-left {
    left: 6%
  }

  .panel-right {
    right: 5%
  }

  .motion-panel>strong {
    font-size: 42px;
    margin-top: 8px
  }

  .motion-panel>strong span {
    font-size: 10px
  }

  .motion-panel>p {
    font-size: 8px;
    letter-spacing: .6px;
    margin: 7px 0
  }

  .motion-panel>small,
  .metric-rule {
    display: none
  }

  .detail-left {
    top: auto;
    bottom: 13%;
    left: 6%;
    width: 43%
  }

  .detail-left h2 {
    font-size: 27px;
    margin: 12px 0
  }

  .detail-chips span {
    font-size: 8px;
    padding: 5px 9px
  }

  .detail-right {
    top: auto;
    bottom: 12%;
    right: 6%;
    width: 39%
  }

  .detail-right>img {
    width: 110px;
    margin: 0 auto 6px
  }

  .detail-right>strong {
    font-size: 8px;
    letter-spacing: 0
  }

  .detail-right>p {
    font-size: 7px
  }

  .motion-bottom {
    bottom: 18px;
    left: 6%;
    right: 6%;
    padding-top: 12px;
    gap: 12px;
    flex-wrap: wrap
  }

  .motion-bottom>span {
    font-size: 7px;
    width: 55%;
    max-width: none
  }

  .motion-controls {
    gap: 8px
  }

  .motion-controls button {
    font-size: 8px;
    padding: 7px
  }

  .motion-bottom>a {
    font-size: 8px;
    margin-left: auto
  }

  .motion-steps {
    right: 16px;
    top: 44%;
    height: 130px
  }

  .motion-steps button span {
    display: none
  }

  .motion-loader>img {
    height: 35%;
    left: 7%;
    bottom: 24%;
    max-width: 88%
  }

  .motion-loader>span:first-child {
    top: 23%;
    font-size: 120px;
    letter-spacing: -4px
  }

  .loader-label {
    top: 18%;
    font-size: 7px;
    letter-spacing: 1px;
    right: 6%
  }

  .motion-shade {
    background: linear-gradient(180deg, #050909d9 0%, #05090933 43%, #05090933 60%, #071013f2 81%, #071013 100%)
  }
}

@media(prefers-reduced-motion:reduce) {
  .motion-loader {
    display: none
  }

  .motion-hero .motion-title {
    transform: none !important
  }

  .motion-bike,
  .motion-bg,
  .motion-panel {
    will-change: auto
  }
}

.motion-bg {
  filter: brightness(.58) saturate(.8)
}

/* Hide baked-in reflections; each product rig carries its own contact shadows. */
.motion-bg {
  mask-image: linear-gradient(to bottom, #000 0%, #000 54%, transparent 76%);
  -webkit-mask-image: linear-gradient(to bottom, #000 0%, #000 54%, transparent 76%)
}

.motion-floor {
  position: absolute;
  inset: 55% 0 0;
  z-index: 0;
  pointer-events: none;
  background: radial-gradient(ellipse at 55% 60%, #26313344, transparent 58%), linear-gradient(180deg, transparent, #101719 55%, #0a1115 100%)
}

.product-rig {
  position: absolute;
  left: 55%;
  bottom: 13%;
  height: 65%;
  aspect-ratio: 1700/1113;
  width: auto;
  max-width: 75%;
  transform-origin: 50% 92%;
  will-change: transform, opacity
}

.product-rig.rig-front {
  left: 53%;
  height: 70%;
  aspect-ratio: 1630/1800
}

.product-rig.rig-rear {
  left: 55%;
  height: 65%;
  aspect-ratio: 1700/1407
}

.motion-products .product-rig .motion-bike {
  position: absolute;
  inset: 0;
  left: 0;
  bottom: auto;
  height: 100%;
  width: 100%;
  max-width: none;
  object-fit: fill;
  transform: none;
  filter: none;
  will-change: auto
}

.contact-shadow,
.ambient-shadow {
  position: absolute;
  display: block;
  pointer-events: none;
  z-index: 0;
  background: radial-gradient(ellipse, #000c 0%, #0008 28%, transparent 72%);
  transform: translate(-50%, -50%);
  height: 6%;
  width: 25%;
  filter: blur(2px)
}

.ambient-shadow {
  left: 49%;
  top: 91%;
  width: 79%;
  height: 12%;
  opacity: .65;
  filter: blur(5px)
}

.rig-side .front-shadow {
  left: 18%;
  top: 91%
}

.rig-side .rear-shadow {
  left: 80%;
  top: 91%
}

.rig-front .front-shadow {
  left: 29%;
  top: 94%;
  width: 35%
}

.rig-front .rear-shadow {
  left: 76%;
  top: 85%;
  width: 24%
}

.rig-front .ambient-shadow {
  left: 50%;
  top: 91%;
  width: 66%
}

.rig-rear .front-shadow {
  left: 16%;
  top: 82%
}

.rig-rear .rear-shadow {
  left: 76%;
  top: 93%;
  width: 30%
}

.rig-rear .ambient-shadow {
  left: 50%;
  top: 89%;
  width: 72%
}

.motion-model {
  width: 235px;
  gap: 16px
}

.motion-model img {
  width: 190px
}

.motion-model>span {
  font-size: 15px
}

@media(max-width:1000px) {
  .product-rig {
    height: 57%;
    left: 56%
  }

  .product-rig.rig-front {
    height: 65%
  }

  .product-rig.rig-rear {
    height: 59%
  }

  .motion-model {
    width: 210px
  }

  .motion-model img {
    width: 166px
  }
}

@media(max-width:600px) {
  .product-rig {
    height: 41%;
    left: 52%;
    max-width: 94%;
    bottom: 24%
  }

  .product-rig.rig-front {
    height: 45%;
    left: 52%;
    bottom: 23%
  }

  .product-rig.rig-rear {
    height: 42%;
    left: 52%;
    bottom: 24%
  }

  .motion-model {
    width: 175px;
    gap: 10px
  }

  .motion-model img {
    width: 140px
  }

  .motion-model>span {
    font-size: 12px
  }

  .motion-bg {
    mask-image: linear-gradient(to bottom, #000 0%, #000 46%, transparent 72%);
    -webkit-mask-image: linear-gradient(to bottom, #000 0%, #000 46%, transparent 72%)
  }

  .motion-floor {
    top: 49%
  }
}

@media(prefers-reduced-motion:reduce) {
  .product-rig {
    will-change: auto
  }
}

.product-rig {
  max-width: none
}

@media(max-width:1000px) {
  .product-rig {
    height: min(57svh, 49vw)
  }

  .product-rig.rig-front {
    height: min(65svh, 80vw)
  }

  .product-rig.rig-rear {
    height: min(59svh, 61vw)
  }
}

@media(max-width:600px) {
  .product-rig {
    height: min(41svh, 61vw);
    max-width: none
  }

  .product-rig.rig-front {
    height: min(45svh, 96vw)
  }

  .product-rig.rig-rear {
    height: min(42svh, 76vw)
  }
}

/* An overlook that gradually illuminates as the reader scrolls. */
.intro-story {
  height: 185svh;
  position: relative
}

.city-intro {
  position: sticky;
  top: 0;
  height: 100svh;
  min-height: 780px;
  padding: 0;
  isolation: isolate;
  overflow: hidden;
  background: #061018;
  border-top: 1px solid var(--line);
  --city-exposure: .24;
  --city-glow: 0
}

.intro-city-image,
.intro-city-glow,
.intro-city-shade {
  position: absolute;
  inset: 0;
  z-index: -1;
  pointer-events: none
}

.intro-city-image,
.intro-city-glow {
  background-image: url('assets/city-overlook.webp');
  background-size: cover;
  background-position: center 57%
}

.intro-city-image {
  filter: brightness(var(--city-exposure)) saturate(.95);
  will-change: filter
}

.intro-city-glow {
  opacity: var(--city-glow);
  mix-blend-mode: screen;
  filter: blur(2px) brightness(1.3);
  mask-image: linear-gradient(transparent 30%, #000 45%, #000 56%, transparent 70%);
  -webkit-mask-image: linear-gradient(transparent 30%, #000 45%, #000 56%, transparent 70%);
  will-change: opacity
}

.intro-city-shade {
  background: linear-gradient(180deg, #04101ac9 0%, #04101a30 37%, transparent 57%, #040e1733 70%, #040e17e6 100%)
}

.city-intro>.section-index {
  position: absolute;
  left: 7%;
  top: 6%;
  color: #c0cdd2;
  font-size: 9px
}

.city-intro .intro-copy {
  position: absolute;
  left: 7%;
  right: 7%;
  top: 13%;
  max-width: none;
  margin: 0;
  display: grid;
  grid-template-columns: 1.5fr 1fr;
  column-gap: 8%;
  align-items: end
}

.city-intro .intro-copy .eyebrow {
  grid-column: 1/-1;
  margin: 0 0 18px
}

.city-intro .intro-copy h2 {
  font-size: clamp(40px, 4.8vw, 76px);
  line-height: 1.12;
  letter-spacing: -2.5px;
  margin: 0
}

.city-intro .intro-copy h2 span {
  color: #c4d4e0
}

.city-intro .intro-copy .body-copy {
  font-size: 12px;
  line-height: 1.9;
  color: #dee8eb;
  margin: 0;
  max-width: 350px;
  text-shadow: 0 1px 7px #000
}

.city-intro .stat-row {
  position: absolute;
  bottom: 5%;
  left: 7%;
  right: 7%;
  margin: 0;
  padding-top: 24px;
  border-top: 1px solid #ffffff55;
  gap: 25px
}

.city-intro .stat-row strong {
  font-size: 38px;
  color: #f1f7f8
}

.city-intro .stat-row div>span {
  font-size: 10px;
  color: #c6d8e0
}

.city-intro .intro-copy.reveal.ready {
  opacity: 1;
  transform: none;
  transition: none
}

@media(max-width:900px) {
  .city-intro .intro-copy {
    column-gap: 5%;
    grid-template-columns: 1.3fr 1fr
  }

  .city-intro .intro-copy h2 {
    font-size: 45px
  }

  .city-intro .intro-copy .body-copy {
    font-size: 11px
  }

  .city-intro .stat-row strong {
    font-size: 32px
  }
}

@media(max-width:600px) {
  .intro-story {
    height: 165svh
  }

  .city-intro {
    height: 100svh;
    min-height: 800px
  }

  .intro-city-image,
  .intro-city-glow {
    background-position: 54% 65%
  }

  .city-intro>.section-index {
    top: 5%;
    font-size: 8px
  }

  .city-intro .intro-copy {
    top: 11%;
    display: block;
    left: 7%;
    right: 7%
  }

  .city-intro .intro-copy h2 {
    font-size: 40px;
    line-height: 1.12;
    letter-spacing: -1.7px
  }

  .city-intro .intro-copy .eyebrow {
    font-size: 9px;
    margin-bottom: 15px
  }

  .city-intro .intro-copy .body-copy {
    font-size: 11px;
    line-height: 1.8;
    max-width: 310px;
    margin-top: 20px
  }

  .city-intro .stat-row {
    bottom: 4%;
    grid-template-columns: 1fr 1fr;
    padding-top: 18px;
    gap: 18px
  }

  .city-intro .stat-row strong {
    font-size: 29px
  }

  .city-intro .stat-row div>span {
    font-size: 9px;
    margin-top: 7px
  }

  .intro-city-shade {
    background: linear-gradient(180deg, #04101ae0 0%, #04101a66 38%, transparent 56%, #040e1755 70%, #040e17f2 100%)
  }
}

@media(prefers-reduced-motion:reduce) {
  .intro-story {
    height: auto
  }

  .city-intro {
    position: relative;
    --city-exposure: .95;
    --city-glow: 0
  }

  .intro-city-image,
  .intro-city-glow {
    will-change: auto
  }
}

.city-intro {
  min-height: min(780px, 100svh)
}

@media(max-width:600px) {
  .city-intro {
    min-height: min(800px, 100svh)
  }
}

@media(max-width:600px) {

  .intro-city-image,
  .intro-city-glow {
    background-size: 150% auto;
    background-repeat: no-repeat;
    background-position: center 66%
  }

  .intro-city-image {
    mask-image: linear-gradient(transparent 30%, #000 47%, #000 100%);
    -webkit-mask-image: linear-gradient(transparent 30%, #000 47%, #000 100%)
  }
}

/* Keep units and number widths stable during the scroll scramble. */
.numeric-scramble,
.numeric-scramble>span,
.motion-panel>strong .numeric-scramble,
.motion-panel>strong .numeric-scramble>span,
.gauge-pair strong .numeric-scramble,
.gauge-pair strong .numeric-scramble>span {
  font: inherit;
  letter-spacing: inherit;
  line-height: inherit;
  color: inherit;
  margin: 0;
  padding: 0;
  vertical-align: baseline;
  font-variant-numeric: tabular-nums
}

.numeric-scramble {
  display: inline-block;
  white-space: nowrap
}

.numeric-scramble>span {
  display: inline
}

/* Dashboard feature card: show the complete cockpit photograph. */
.detail-right {
  right: 4.5%;
  top: 43%;
  width: clamp(230px, 20vw, 350px);
  text-align: center
}

.detail-right>img {
  display: block;
  width: 100%;
  height: auto;
  object-fit: contain;
  margin: 0 0 12px;
  border-radius: 6px
}

.detail-right>strong {
  display: block;
  font: 12px/1.5 Arial, sans-serif;
  letter-spacing: 1px;
  margin: 0
}

.detail-right>p {
  font-size: 9px;
  line-height: 1.8;
  letter-spacing: .3px;
  margin: 8px 0 0
}

@media(max-width:1000px) {
  .detail-right {
    width: 23%;
    right: 4.5%;
    top: 46%
  }

  .detail-right>strong {
    font-size: 10px
  }

  .detail-right>p {
    font-size: 8px
  }
}

@media(max-width:600px) {
  .detail-right {
    top: auto;
    bottom: 12%;
    right: 6%;
    width: 39%
  }

  .detail-right>img {
    width: 100%;
    margin: 0 0 8px
  }

  .detail-right>strong {
    font-size: 8px;
    letter-spacing: .3px
  }

  .detail-right>p {
    font-size: 7px;
    line-height: 1.7;
    margin-top: 5px
  }
}

/* Scroll-controlled frame story, between the city and design chapters. */
.agility-story {
  height: 340svh;
  position: relative;
  background: #07131b;
  --agility-rider: 1;
  --agility-bike: 0;
  --agility-chassis: 0;
  --agility-wheelbase: 0;
  --agility-frame: 0;
  --agility-title: 1;
  --agility-progress: 0;
  --agility-scale: 1;
  --agility-dark: 0
}

.agility-scene {
  position: sticky;
  top: 0;
  height: 100svh;
  min-height: 580px;
  overflow: hidden;
  isolation: isolate;
  color: #f0f4f3;
  background: #07131b
}

.agility-backdrop {
  position: absolute;
  inset: 0;
  background: url('assets/agility-garage.webp') center 59%/cover no-repeat;
  transform: scale(1.025);
  z-index: -3
}

.agility-shade {
  position: absolute;
  inset: 0;
  background: linear-gradient(180deg, #030c1633 0%, transparent 45%, #040d17a6 84%, #07131b 100%);
  z-index: -2
}

.agility-shade:after {
  content: '';
  position: absolute;
  inset: 0;
  background: #02070d;
  opacity: var(--agility-dark)
}

.agility-heading {
  position: absolute;
  top: 11%;
  left: 7%;
  right: 7%;
  z-index: -1;
  text-align: center
}

.agility-heading .eyebrow {
  font-size: 10px;
  letter-spacing: 2.4px;
  color: #78e6ee;
  margin: 0 0 19px
}

.agility-heading h2 {
  font-size: clamp(68px, 12.5vw, 210px);
  line-height: .95;
  letter-spacing: -.065em;
  font-weight: 800;
  margin: 0;
  opacity: var(--agility-title);
  transform: translateY(calc(var(--agility-progress) * -25px))
}

.agility-product {
  position: absolute;
  width: min(65vw, 1080px);
  aspect-ratio: 1886/1234;
  bottom: 16%;
  left: 50%;
  transform: translateX(-50%) scale(var(--agility-scale));
  transform-origin: center 90%;
  pointer-events: none
}

.agility-product>img {
  position: absolute;
  bottom: 0;
  left: 0;
  width: 100%;
  height: auto;
  max-width: none;
  will-change: opacity
}

.agility-product>.agility-rider {
  opacity: var(--agility-rider);
  bottom: -2.6%
}

.agility-bike {
  opacity: var(--agility-bike)
}

.agility-chassis {
  opacity: var(--agility-chassis)
}

.agility-measure {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  color: #a2f6fb;
  opacity: var(--agility-wheelbase);
  filter: drop-shadow(0 0 4px #4de3ed66)
}

.agility-measure ellipse,
.agility-measure path {
  stroke-dasharray: 1;
  stroke-dashoffset: calc(1 - var(--agility-wheelbase))
}

.agility-info {
  position: absolute;
  inset: 0;
  pointer-events: none
}

.agility-wheelbase {
  opacity: var(--agility-wheelbase);
  text-align: center;
  top: auto;
  bottom: 13%;
  height: auto
}

.agility-wheelbase .eyebrow {
  font-size: 9px;
  letter-spacing: 2px;
  color: #8ee9ef;
  margin: 0 0 7px
}

.agility-wheelbase>strong {
  font-size: 42px;
  font-weight: 400;
  line-height: 1;
  letter-spacing: -2px
}

.agility-wheelbase>strong small {
  font-size: 14px;
  letter-spacing: 0;
  margin-left: 7px;
  color: #71e6ef
}

.agility-wheelbase>p:last-child {
  font-size: 11px;
  line-height: 1.6;
  color: #d8e4e8;
  margin: 8px 0 0
}

.agility-wheelbase br {
  display: none
}

.agility-frame-info {
  opacity: var(--agility-frame)
}

.agility-frame-info>div {
  position: absolute;
  top: 52%;
  display: flex;
  flex-direction: column;
  gap: 8px
}

.agility-rigidity {
  left: 8%
}

.agility-weight {
  right: 8%;
  text-align: right
}

.agility-frame-info .agility-arrow {
  font-size: 29px;
  color: #71e6ef;
  line-height: 1
}

.agility-frame-info>div>span:not(.agility-arrow) {
  font-size: 9px;
  letter-spacing: 1.4px;
  color: #d3e2e8
}

.agility-frame-info strong {
  font-size: 56px;
  line-height: 1;
  font-weight: 400;
  letter-spacing: -2px
}

.agility-frame-info strong small {
  font-size: 21px;
  letter-spacing: 0;
  color: #71e6ef;
  margin-left: 4px
}

.agility-frame-info>p {
  position: absolute;
  bottom: 11%;
  left: 10%;
  right: 10%;
  text-align: center;
  font-size: 12px;
  letter-spacing: 1px;
  color: #dce9ec
}

.agility-footer {
  position: absolute;
  bottom: 4%;
  left: 6%;
  right: 6%;
  border-top: 1px solid #ffffff30;
  padding-top: 20px;
  display: flex;
  justify-content: space-between;
  align-items: center;
  gap: 20px;
  font-size: 8px;
  letter-spacing: 1px
}

.agility-footer>span {
  color: #b4c9d0
}

.agility-footer nav {
  display: flex;
  gap: 28px
}

.agility-footer button {
  background: none;
  border: 0;
  padding: 4px 0;
  color: #7d969f;
  font-size: 9px;
  cursor: pointer;
  letter-spacing: 1px
}

.agility-footer button[aria-pressed=true] {
  color: #71e6ef
}

.agility-footer button span {
  margin-left: 7px;
  font-size: 8px
}

.agility-footer>i {
  position: absolute;
  top: -1px;
  left: 0;
  width: 100%;
  height: 2px;
  transform: scaleX(var(--agility-progress));
  transform-origin: left;
  background: #71e6ef
}

@media(max-width:1000px) {
  .agility-product {
    width: 73vw;
    bottom: 22%
  }

  .agility-frame-info>div {
    top: 57%
  }

  .agility-rigidity {
    left: 5%
  }

  .agility-weight {
    right: 5%
  }

  .agility-frame-info strong {
    font-size: 43px
  }

  .agility-frame-info>div>span:not(.agility-arrow) {
    font-size: 8px;
    letter-spacing: .5px
  }

  .agility-footer>span:first-child {
    display: none
  }

  .agility-heading {
    top: 17%
  }
}

@media(max-width:600px) {
  .agility-story {
    height: 310svh
  }

  .agility-scene {
    min-height: 560px
  }

  .agility-heading {
    top: 15%;
    left: 5%;
    right: 5%
  }

  .agility-heading .eyebrow {
    font-size: 8px;
    letter-spacing: 1.6px;
    margin-bottom: 16px
  }

  .agility-heading h2 {
    font-size: 15vw;
    letter-spacing: -.065em
  }

  .agility-product {
    width: 95vw;
    bottom: 30%
  }

  .agility-backdrop {
    background-position: 47% center
  }

  .agility-wheelbase {
    bottom: 16%
  }

  .agility-wheelbase>strong {
    font-size: 36px
  }

  .agility-wheelbase>p:last-child {
    font-size: 10px
  }

  .agility-wheelbase br {
    display: initial
  }

  .agility-frame-info>div {
    top: auto;
    bottom: 15%;
    gap: 5px
  }

  .agility-rigidity {
    left: 12%
  }

  .agility-weight {
    right: 12%
  }

  .agility-frame-info .agility-arrow {
    font-size: 21px
  }

  .agility-frame-info strong {
    font-size: 39px
  }

  .agility-frame-info strong small {
    font-size: 16px
  }

  .agility-frame-info>p {
    bottom: 9%;
    font-size: 9px;
    letter-spacing: .2px
  }

  .agility-footer {
    bottom: 3%;
    left: 6%;
    right: 6%;
    padding-top: 14px;
    justify-content: center
  }

  .agility-footer nav {
    gap: 17px
  }

  .agility-footer button {
    font-size: 9px
  }

  .agility-footer button span {
    font-size: 6px;
    letter-spacing: .2px;
    margin-left: 3px
  }

  .agility-scroll {
    display: none
  }
}

@media(prefers-reduced-motion:reduce) {
  .agility-story {
    height: auto
  }

  .agility-scene {
    position: relative
  }

  .agility-footer nav {
    display: none
  }

  .agility-footer .agility-scroll {
    display: none
  }

  .agility-measure ellipse,
  .agility-measure path {
    stroke-dasharray: none
  }
}

/* Fade the baked-in cast shadow out of the garage; contact shadows share the bike canvas. */
.agility-backdrop {
  mask-image: linear-gradient(#000 0%, #000 60%, transparent 78%);
  -webkit-mask-image: linear-gradient(#000 0%, #000 60%, transparent 78%)
}

.agility-contact {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  overflow: visible
}

.agility-front-contact {
  transform: translateX(var(--agility-front-shadow, 0px))
}

.agility-rear-contact {
  transform: translateX(var(--agility-rear-shadow, 0px))
}

/* Remove the photographed stand reflection below the contact plane. */
.agility-product>img {
  clip-path: inset(0 0 4% 0)
}

/* A narrow headlight aperture opens vertically before revealing the rear. */
.led-story {
  position: relative;
  height: 410svh;
  background: #04080c;
  --led-height: 22;
  --led-narrow: 1;
  --led-wide: 0;
  --led-front: 0;
  --led-rear: 0;
  --led-brightness: .16;
  --led-copy: 1;
  --led-title: 0;
  --led-note: 0;
  --led-tail: 0;
  --led-progress: 0;
  --led-scale: 1.03
}

.led-scene {
  height: 100svh;
  min-height: 560px;
  position: sticky;
  top: 0;
  overflow: hidden;
  isolation: isolate;
  background: #04080c;
  color: #f1f5f5
}

.led-window {
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: calc(var(--led-height) * 1%);
  overflow: hidden;
  background: #020507
}

.led-window>img {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  object-fit: cover;
  max-width: none;
  will-change: opacity
}

.led-close-narrow {
  opacity: var(--led-narrow);
  filter: brightness(var(--led-brightness));
  object-position: center 23%
}

.led-close-wide {
  opacity: var(--led-wide);
  object-position: center 45%;
  filter: brightness(var(--led-brightness))
}

.led-full-front {
  opacity: var(--led-front);
  object-position: center 53%;
  transform: scale(var(--led-scale))
}

.led-full-rear {
  opacity: var(--led-rear);
  object-position: center 55%;
  transform: scale(var(--led-scale))
}

.led-vignette {
  position: absolute;
  inset: 0;
  pointer-events: none;
  background: linear-gradient(180deg, #02070b33, transparent 24%, transparent 69%, #02070bd9), linear-gradient(90deg, #02070b66, transparent 30%, transparent 70%, #02070b66)
}

.led-close-copy {
  position: absolute;
  left: 8%;
  right: 8%;
  bottom: 7%;
  text-align: center;
  opacity: var(--led-copy);
  text-shadow: 0 2px 20px #000
}

.led-close-copy h2 {
  font-size: clamp(32px, 4vw, 64px);
  line-height: 1;
  margin: 0;
  font-weight: 800;
  letter-spacing: -2px
}

.led-close-copy p {
  font-size: clamp(12px, 1.45vw, 20px);
  line-height: 1.5;
  margin: 8px 0 0;
  color: #c9d5da;
  letter-spacing: .3px
}

.led-wide-title {
  position: absolute;
  top: 44%;
  left: 12%;
  right: 12%;
  display: flex;
  justify-content: space-between;
  align-items: center;
  font-size: clamp(80px, 14vw, 220px);
  font-weight: 800;
  line-height: 1;
  letter-spacing: -.055em;
  opacity: var(--led-title);
  color: #e5f1f3b3
}

.led-front-note {
  position: absolute;
  bottom: 13%;
  left: 7%;
  margin: 0;
  font-size: 10px;
  line-height: 1.8;
  letter-spacing: 1.8px;
  color: #7fe6ef;
  opacity: var(--led-note)
}

.led-front-note span {
  font-size: 11px;
  color: #c4d1d7;
  letter-spacing: .3px
}

.led-tail-notes {
  position: absolute;
  top: 67%;
  left: 13%;
  right: 13%;
  display: flex;
  justify-content: space-between;
  opacity: var(--led-tail)
}

.led-tail-notes p {
  font-size: 10px;
  line-height: 1.7;
  letter-spacing: 1.5px;
  color: #7fe6ef;
  margin: 0
}

.led-tail-notes p:last-child {
  text-align: right
}

.led-tail-notes span {
  font-size: 12px;
  color: #d9e2e7;
  letter-spacing: .2px
}

.led-index {
  position: absolute;
  top: 5%;
  left: 6%;
  font-size: 9px;
  letter-spacing: 2px;
  color: #a9c0c9;
  margin: 0;
  opacity: var(--led-title)
}

.led-footer {
  position: absolute;
  bottom: 4%;
  left: 6%;
  right: 6%;
  display: flex;
  justify-content: space-between;
  align-items: center;
  gap: 20px;
  border-top: 1px solid #ffffff30;
  padding-top: 18px;
  opacity: var(--led-title);
  font-size: 8px;
  letter-spacing: 1px;
  color: #b4c9d0
}

.led-footer nav {
  display: flex;
  gap: 25px
}

.led-footer button {
  border: 0;
  background: none;
  color: #7d969f;
  padding: 4px 0;
  cursor: pointer;
  font-size: 9px;
  letter-spacing: 1px
}

.led-footer button span {
  font-size: 8px;
  margin-left: 7px
}

.led-footer button[aria-pressed=true] {
  color: #71e6ef
}

.led-footer i {
  position: absolute;
  top: -1px;
  left: 0;
  width: 100%;
  height: 2px;
  background: #71e6ef;
  transform-origin: left;
  transform: scaleX(var(--led-progress))
}

@media(max-width:1000px) {
  .led-wide-title {
    left: 7%;
    right: 7%;
    font-size: 15vw
  }

  .led-tail-notes {
    left: 7%;
    right: 7%
  }

  .led-footer>span:first-child {
    display: none
  }
}

@media(max-width:600px) {
  .led-story {
    height: 360svh
  }

  .led-window .led-close-narrow,
  .led-window .led-close-wide {
    object-fit: cover;
    object-position: center 35%
  }

  .led-window .led-close-narrow {
    width: 190%;
    left: -45%
  }

  .led-window .led-close-wide {
    width: 150%;
    left: -25%
  }

  .led-full-front {
    object-position: 50% center
  }

  .led-full-rear {
    object-position: 50% center
  }

  .led-close-copy h2 {
    font-size: 34px;
    letter-spacing: -1px
  }

  .led-close-copy p {
    font-size: 12px;
    margin-top: 5px
  }

  .led-close-copy {
    bottom: 8%
  }

  .led-wide-title {
    top: 39%;
    left: 5%;
    right: 5%;
    font-size: 17vw
  }

  .led-tail-notes {
    top: auto;
    bottom: 14%;
    left: 7%;
    right: 7%;
    gap: 45px
  }

  .led-tail-notes p {
    font-size: 8px;
    letter-spacing: .8px;
    max-width: 115px
  }

  .led-tail-notes span {
    font-size: 10px
  }

  .led-front-note {
    bottom: 14%;
    font-size: 8px
  }

  .led-front-note span {
    font-size: 10px
  }

  .led-index {
    font-size: 8px;
    letter-spacing: 1.5px
  }

  .led-footer {
    bottom: 3%;
    padding-top: 14px;
    justify-content: center
  }

  .led-footer>span {
    display: none
  }

  .led-footer nav {
    gap: 22px
  }

  .led-footer button span {
    font-size: 7px;
    letter-spacing: .2px;
    margin-left: 4px
  }
}

@media(prefers-reduced-motion:reduce) {
  .led-story {
    height: auto
  }

  .led-scene {
    position: relative
  }

  .led-footer nav {
    display: none
  }
}

@media(min-width:601px) {

  .led-full-front,
  .led-full-rear {
    object-fit: contain
  }
}

/* Collapse the section itself, rather than leaving an empty full-height shell. */
.led-story {
  height: 22svh;
  overflow-anchor: none
}

.led-scene {
  height: calc(var(--led-height) * 1svh);
  min-height: 0
}

.led-window {
  top: 0;
  height: 100%
}

@media(prefers-reduced-motion:reduce) {

  .led-story,
  .led-scene {
    height: 100svh
  }
}

/* Original keyless product photography with separate remote and backup-key layers. */
.keyless-photo {
  isolation: isolate
}

.keyless-photo>img {
  object-position: center
}

.keyless-backup-card {
  position: absolute;
  top: 0;
  right: 0;
  width: 29%;
  aspect-ratio: 1;
  background: #020506;
  display: grid;
  place-items: center;
  padding: 8px;
  z-index: 2
}

.keyless-backup-card>img {
  width: 100%;
  height: auto;
  object-fit: contain
}

.keyless-fob {
  position: absolute;
  right: 3%;
  bottom: 5%;
  width: 25%;
  height: 43%;
  overflow: hidden;
  z-index: 2;
  pointer-events: none;
  filter: drop-shadow(0 3px 7px #0008)
}

.keyless-fob>img {
  position: absolute;
  left: -35%;
  top: -15%;
  height: 135%;
  width: auto;
  max-width: none;
  object-fit: initial
}

.keyless-signal {
  position: absolute;
  right: 9%;
  top: 43%;
  width: 17%;
  height: auto;
  color: #71e6ef;
  z-index: 3;
  pointer-events: none
}

@media(max-width:600px) {
  .keyless-photo {
    aspect-ratio: 1.1
  }

  .keyless-backup-card {
    width: 30%;
    padding: 6px
  }

  .keyless-signal {
    width: 16%;
    top: 44%
  }

  .keyless-fob {
    right: 3%;
    width: 25%;
    bottom: 4%
  }

  .keyless-photo .photo-label {
    font-size: 7px;
    letter-spacing: 1.3px
  }
}

/* An editorial feature grid with generous typography and rounded product cards. */
.feature-gallery {
  padding: 70px 5% 100px
}

.gallery-shell {
  max-width: 1320px;
  margin: 0 auto;
  background: #151a1f;
  border-radius: 32px;
  padding: 64px;
  color: #f5f7f7
}

.gallery-heading {
  display: flex;
  justify-content: space-between;
  align-items: flex-end;
  gap: 35px;
  margin-bottom: 40px
}

.gallery-heading .eyebrow {
  font-size: 10px;
  letter-spacing: 2px;
  margin: 0 0 22px;
  color: #71e6ef
}

.gallery-heading h2 {
  font-size: clamp(40px, 4.2vw, 64px);
  line-height: 1.04;
  letter-spacing: -2.5px;
  margin: 0;
  font-weight: 650
}

.gallery-intro {
  font-size: 16px;
  line-height: 1.5;
  color: #a6afb5;
  margin: 25px 0 0;
  max-width: 420px
}

.gallery-play {
  display: flex;
  align-items: center;
  gap: 10px;
  padding: 12px 17px;
  border: 1px solid #ffffff30;
  border-radius: 99px;
  background: #ffffff06;
  color: #c7d0d4;
  font-size: 11px;
  white-space: nowrap;
  cursor: pointer;
  margin-bottom: 4px
}

.gallery-play:hover {
  background: #ffffff12
}

.gallery-play-icon {
  font-size: 15px;
  line-height: 1;
  color: #71e6ef
}

.gallery-grid {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 20px
}

.gallery-card {
  background: #05080b;
  border-radius: 25px;
  overflow: hidden;
  min-width: 0;
  display: flex;
  flex-direction: column
}

.gallery-card-copy {
  padding: 27px 26px 18px;
  flex: 1
}

.gallery-card-copy>p:first-child {
  font-size: 8px;
  line-height: 1.4;
  letter-spacing: 1.4px;
  color: #71e6ef;
  margin: 0 0 12px
}

.gallery-card h3 {
  font-size: 25px;
  line-height: 1.12;
  letter-spacing: -.8px;
  margin: 0;
  font-weight: 600;
  max-width: 260px
}

.gallery-card .gallery-description {
  font-size: 12px;
  line-height: 1.6;
  color: #a2adb4;
  margin: 13px 0 0
}

.gallery-card-media {
  position: relative;
  aspect-ratio: 1;
  overflow: hidden;
  background: #05080b;
  isolation: isolate
}

.gallery-image {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  object-fit: cover;
  opacity: 0;
  transition: opacity .85s ease;
  pointer-events: none
}

.gallery-image.is-current {
  opacity: 1
}

.gallery-image-controls {
  position: absolute;
  bottom: 15px;
  left: 50%;
  transform: translateX(-50%);
  display: flex;
  gap: 3px;
  background: #071018dc;
  padding: 4px;
  border-radius: 99px;
  backdrop-filter: blur(12px);
  z-index: 2;
  border: 1px solid #ffffff24
}

.gallery-image-controls button {
  background: none;
  border: 0;
  border-radius: 99px;
  padding: 7px 13px;
  color: #a2afb6;
  font-size: 9px;
  cursor: pointer;
  white-space: nowrap
}

.gallery-image-controls button[aria-pressed=true] {
  background: #e1f5f5;
  color: #081218
}

.gallery-bottom {
  display: flex;
  justify-content: space-between;
  gap: 25px;
  align-items: center;
  border-top: 1px solid #ffffff1c;
  padding-top: 30px;
  margin-top: 40px
}

.gallery-bottom>span {
  font-size: 8px;
  line-height: 1.6;
  letter-spacing: 1.3px;
  color: #94a6ae
}

.gallery-bottom a {
  font-size: 12px;
  color: #71e6ef
}

@media(max-width:1100px) {
  .gallery-shell {
    padding: 40px
  }

  .gallery-grid {
    gap: 16px
  }

  .gallery-card-copy {
    padding: 22px 20px 16px
  }

  .gallery-card h3 {
    font-size: 22px
  }

  .gallery-card .gallery-description {
    font-size: 11px
  }
}

@media(max-width:850px) {
  .gallery-grid {
    grid-template-columns: repeat(2, minmax(0, 1fr))
  }

  .gallery-heading {
    align-items: flex-start
  }

  .gallery-heading h2 {
    font-size: 48px
  }

  .gallery-intro {
    font-size: 14px
  }

  .gallery-play-label {
    display: none
  }

  .gallery-play {
    padding: 12px;
    width: 40px;
    height: 40px;
    justify-content: center
  }
}

@media(max-width:600px) {
  .feature-gallery {
    padding: 45px 5% 60px
  }

  .gallery-shell {
    padding: 29px 18px;
    border-radius: 26px
  }

  .gallery-heading {
    gap: 12px;
    margin-bottom: 28px;
    padding: 0 5px
  }

  .gallery-heading .eyebrow {
    font-size: 8px;
    letter-spacing: 1.3px;
    margin-bottom: 17px
  }

  .gallery-heading h2 {
    font-size: 39px;
    letter-spacing: -1.8px
  }

  .gallery-intro {
    font-size: 12px;
    margin-top: 18px
  }

  .gallery-grid {
    grid-template-columns: 1fr;
    gap: 17px
  }

  .gallery-card {
    border-radius: 22px
  }

  .gallery-card-copy {
    padding: 25px 24px 20px
  }

  .gallery-card h3 {
    font-size: 27px;
    max-width: none
  }

  .gallery-card .gallery-description {
    font-size: 12px;
    max-width: 260px
  }

  .gallery-card-copy>p:first-child {
    font-size: 8px
  }

  .gallery-bottom {
    flex-direction: column;
    text-align: center;
    gap: 16px;
    margin-top: 28px;
    padding-top: 25px
  }

  .gallery-bottom a {
    font-size: 11px
  }
}

@media(prefers-reduced-motion:reduce) {
  .gallery-play {
    display: none
  }

  .gallery-image {
    transition: none
  }
}

/* Full-bleed photographic cards with copy over the upper image area. */
.gallery-card {
  position: relative;
  display: block;
  aspect-ratio: 990/1274;
  isolation: isolate
}

.gallery-card-media {
  position: absolute;
  inset: 0;
  aspect-ratio: auto;
  height: 100%;
  z-index: -2
}

.gallery-image {
  object-fit: cover;
  object-position: center
}

.gallery-card:after {
  content: "";
  position: absolute;
  inset: 0;
  z-index: -1;
  pointer-events: none;
  background: linear-gradient(180deg, #020609d9 0%, #020609c4 20%, #02060999 34%, #02060933 55%, #0206090d 77%, #02060933 100%)
}

.gallery-card-copy {
  position: relative;
  padding: 27px 25px 65px;
  pointer-events: none;
  text-shadow: 0 1px 10px #0008
}

.gallery-card-copy>p:first-child {
  color: #cad4d9;
  font-size: 8px;
  letter-spacing: 1.5px
}

.gallery-card h3 {
  font-size: 27px;
  line-height: 1.1;
  max-width: none;
  color: #f5f7f7;
  font-weight: 650
}

.gallery-card .gallery-description {
  font-size: 12px;
  line-height: 1.6;
  color: #d2d9dd;
  margin-top: 17px
}

.gallery-image-controls {
  z-index: 3
}

@media(max-width:1100px) {
  .gallery-card-copy {
    padding: 23px 20px 60px
  }

  .gallery-card h3 {
    font-size: 24px
  }

  .gallery-card .gallery-description {
    font-size: 11px
  }
}

@media(max-width:600px) {
  .gallery-card {
    aspect-ratio: 990/1274
  }

  .gallery-card-copy {
    padding: 25px 24px 65px
  }

  .gallery-card h3 {
    font-size: 29px
  }

  .gallery-card .gallery-description {
    font-size: 12px;
    max-width: none
  }

  .gallery-card-copy>p:first-child {
    font-size: 8px
  }
}

/* A foggy night showroom, with all colors sharing the same product angle. */
.color-section {
  display: block;
  position: relative;
  isolation: isolate;
  height: clamp(560px, 78svh, 900px);
  container-type: size;
  overflow: hidden;
  background: #0a1119;
  border-bottom: 1px solid #ffffff24;
  padding: 0
}

.color-section:before {
  content: "";
  position: absolute;
  inset: 0;
  z-index: -2;
  background: url('assets/color-night.webp') center 62%/cover no-repeat
}

.color-section:after {
  content: "";
  position: absolute;
  inset: 0;
  z-index: -1;
  pointer-events: none;
  background: linear-gradient(90deg, #080e17d9 0%, #080e1770 28%, transparent 60%), linear-gradient(0deg, #070d1466, transparent 32%)
}

.color-section .color-heading {
  position: absolute;
  left: 7%;
  top: 50%;
  width: 32%;
  transform: translateY(-50%);
  z-index: 2
}

.color-section .section-index {
  font-size: 9px;
  letter-spacing: 2px;
  color: #a9b7be
}

.color-section h2 {
  font-size: clamp(30px, 2.65vw, 45px);
  line-height: 1.15;
  letter-spacing: -1.4px;
  font-weight: 400;
  margin: 28px 0 0
}

.color-section .color-control {
  margin-top: 42px
}

.color-section .color-control>.tiny {
  color: #b2bec5;
  font-size: 9px;
  letter-spacing: 1.7px
}

.color-section .swatches {
  margin: 22px 0
}

.color-section .swatch {
  width: 20px;
  height: 20px
}

.color-section #color-label {
  font-size: 10px;
  letter-spacing: 1px;
  color: #c6d0d6
}

.color-stage {
  position: absolute;
  width: min(62%, 120cqh);
  aspect-ratio: 1600/1047;
  right: 5%;
  bottom: 8%;
  pointer-events: none
}

.color-stage>img {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  max-width: none;
  object-fit: fill;
  clip-path: inset(0 0 4% 0)
}

.color-stage #hero-bike {
  z-index: 2
}

.color-stage #color-reflection {
  top: 186.6%;
  transform: scaleY(-1);
  transform-origin: 0 0;
  opacity: .22;
  mask-image: linear-gradient(to top, #000 2%, #0007 16%, transparent 35%);
  -webkit-mask-image: linear-gradient(to top, #000 2%, #0007 16%, transparent 35%);
  filter: blur(.5px);
  z-index: 0
}

.color-ground {
  position: absolute;
  top: 92%;
  width: 15%;
  height: 1.8%;
  transform: translateX(-50%);
  background: radial-gradient(ellipse, #000e 0%, #0006 42%, transparent 72%);
  z-index: 1
}

.color-ground-front {
  left: 15%
}

.color-ground-rear {
  left: 78.5%
}

.color-ground-center {
  left: 47%;
  width: 59%;
  height: 2%;
  top: 92%;
  opacity: .3
}

@media(max-width:1000px) and (min-width:601px) {
  .color-section {
    height: 600px
  }

  .color-stage {
    width: min(67%, 120cqh);
    right: 1%;
    bottom: 9%
  }

  .color-section .color-heading {
    left: 5%;
    width: 31%
  }

  .color-section h2 {
    font-size: 30px
  }

  .color-section .color-control {
    margin-top: 30px
  }
}

@media(max-width:600px) {
  .color-section {
    height: 750px;
    min-height: 0
  }

  .color-section:before {
    background-position: 54% center
  }

  .color-section:after {
    background: linear-gradient(180deg, #080e17e0 0%, #080e1744 45%, transparent 70%, #070d1480)
  }

  .color-section .color-heading {
    left: 7%;
    top: 8%;
    width: 86%;
    transform: none
  }

  .color-section h2 {
    font-size: 33px;
    line-height: 1.12;
    max-width: 310px;
    margin-top: 20px
  }

  .color-section .color-control {
    margin-top: 26px
  }

  .color-section .swatches {
    margin: 17px 0
  }

  .color-stage {
    width: 108%;
    right: -4%;
    bottom: 10%
  }

  .color-section .section-index {
    font-size: 8px
  }

  .color-stage #color-reflection {
    opacity: .17
  }
}

/* Specifications share the garage scene, with the data held on its dark side. */
.specs {
  position: relative;
  isolation: isolate;
  display: block;
  overflow: hidden;
  min-height: 880px;
  padding: 80px 6%;
  background: #0b1114
}

.specs:before {
  content: "";
  position: absolute;
  inset: 0;
  z-index: -2;
  background: #0b1114 url('assets/specs-garage.webp') calc(100% + 16vw) center/cover no-repeat
}

.specs:after {
  content: "";
  position: absolute;
  inset: 0;
  z-index: -1;
  background: linear-gradient(90deg, #0b1114 0%, #0b1114ed 20%, #0b1114c7 38%, #0b111455 52%, transparent 66%)
}

.specs>div,
.specs dl {
  width: 44%;
  max-width: 690px
}

.specs h2 {
  font-size: clamp(30px, 2.7vw, 46px);
  line-height: 1.2;
  margin: 28px 0 32px
}

.specs dl div {
  padding: 14px 0;
  align-items: baseline;
  gap: 22px;
  font-size: 12px;
  line-height: 1.6;
  border-color: #ffffff26
}

.specs dt {
  color: #b0b5b4;
  max-width: 42%;
  flex-shrink: 0
}

.specs dd {
  color: #f1f3f1;
  max-width: 62%;
  line-height: 1.6
}

.specs .source-note {
  width: 44%;
  max-width: 690px;
  margin: 30px 0 0;
  color: #a7aeae;
  font-size: 10px;
  line-height: 1.8
}

@media(min-width:1900px) {
  .specs {
    min-height: 1000px;
    padding-top: 100px;
    padding-bottom: 100px
  }

  .specs dl div {
    padding: 17px 0;
    font-size: 13px
  }
}

@media(max-width:1000px) {
  .specs {
    min-height: 0;
    padding: 390px 7% 70px
  }

  .specs:before {
    bottom: auto;
    height: 420px;
    background-size: cover;
    background-position: right center
  }

  .specs:after {
    background: linear-gradient(180deg, transparent 150px, #0b111433 250px, #0b1114 410px)
  }

  .specs>div,
  .specs dl,
  .specs .source-note {
    width: 100%;
    max-width: none
  }

  .specs dl {
    margin-top: 0
  }

  .specs h2 {
    font-size: 36px
  }

  .specs dl div {
    padding: 17px 0
  }

  .specs .source-note {
    max-width: 650px
  }
}

@media(max-width:600px) {
  .specs {
    padding-top: 290px;
    padding-bottom: 55px
  }

  .specs:before {
    height: 310px;
    background-position: 80% center
  }

  .specs:after {
    background: linear-gradient(180deg, transparent 100px, #0b111433 190px, #0b1114 305px)
  }

  .specs h2 {
    font-size: 32px;
    margin: 23px 0 26px
  }

  .specs dl div {
    font-size: 11px;
    gap: 16px;
    padding: 15px 0
  }

  .specs dt {
    max-width: 39%
  }

  .specs dd {
    max-width: 61%
  }
}

/* A fixed view of the seat mechanism beside two alternating storage views. */
.storage-showcase {
  aspect-ratio: auto;
  background: transparent;
  display: grid;
  grid-template-columns: 23% 1fr;
  gap: 8px;
  overflow: visible
}

.storage-hinge {
  position: relative;
  overflow: hidden;
  min-height: 380px
}

.storage-hinge img {
  position: absolute;
  inset: 0;
  object-position: 6% center
}

.storage-rotation {
  position: relative;
  aspect-ratio: .91;
  overflow: hidden;
  background: #151a1e
}

.storage-rotation>.gallery-image {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  object-fit: cover;
  opacity: 0;
  transition: opacity 1.1s ease
}

.storage-rotation>.gallery-image.is-current {
  opacity: 1
}

.storage-controls {
  position: absolute;
  bottom: 17px;
  left: 15px;
  right: 15px;
  display: flex;
  justify-content: space-between;
  align-items: center;
  z-index: 2
}

.storage-controls>div {
  display: flex;
  padding: 4px;
  background: #0b141ce6;
  border: 1px solid #ffffff25;
  border-radius: 30px;
  gap: 3px
}

.storage-controls button {
  border: 0;
  background: transparent;
  color: #d0d8da;
  border-radius: 25px;
  font-size: 10px;
  padding: 8px 12px;
  cursor: pointer
}

.storage-controls button[aria-pressed=true] {
  background: #d4e3e7;
  color: #10202a
}

.storage-controls>[data-auto-toggle] {
  background: #0b141ce6;
  border: 1px solid #ffffff25;
  width: 33px;
  height: 33px;
  padding: 0
}

.storage-auto-note {
  grid-column: 1/-1;
  display: flex;
  gap: 14px;
  align-items: center;
  padding: 14px 0 0;
  color: #e7eeee
}

.storage-auto-note>span {
  display: grid;
  place-items: center;
  border: 1px solid #829b9e66;
  width: 37px;
  height: 37px;
  border-radius: 50%;
  color: #a4dce2;
  font-size: 21px
}

.storage-auto-note strong {
  font-size: 13px;
  font-weight: 500;
  letter-spacing: .2px
}

.storage-auto-note p {
  font-size: 11px;
  color: #9ca9ad;
  margin: 6px 0 0;
  line-height: 1.5
}

@media(max-width:900px) {
  .storage-hinge {
    min-height: 280px
  }

  .storage-controls {
    left: 8px;
    right: 8px;
    bottom: 12px
  }

  .storage-controls button {
    padding: 7px 9px
  }
}

@media(max-width:600px) {
  .practicality {
    gap: 28px
  }

  .storage-showcase {
    grid-template-columns: 22% 1fr;
    gap: 6px
  }

  .storage-hinge {
    min-height: 0
  }

  .storage-rotation {
    aspect-ratio: .91
  }

  .storage-auto-note {
    padding-top: 11px
  }

  .storage-auto-note strong {
    font-size: 12px
  }

  .storage-auto-note p {
    font-size: 10px
  }
}

@media(prefers-reduced-motion:reduce) {
  .storage-rotation>.gallery-image {
    transition: none
  }
}

.gallery-card[aria-labelledby="card-front-wheel"] .gallery-image {
  object-position: 72% center
}

.gallery-card[aria-labelledby="card-rear-wheel"] .gallery-image {
  object-position: 48% center
}

/* Full-width city portrait between practicality and the detail cards. */
.brand-image {
  position: relative;
  isolation: isolate;
  width: 100%;
  aspect-ratio: 5440/2700;
  overflow: hidden;
  background: #080f17
}

.brand-image-photo {
  width: 100%;
  height: 100%;
  object-fit: cover;
  object-position: center
}

.brand-image:after {
  content: "";
  position: absolute;
  inset: 0;
  pointer-events: none;
  background: linear-gradient(135deg, #03091088 0%, transparent 43%)
}

.brand-image-logo {
  position: absolute;
  left: 7%;
  top: 10%;
  width: clamp(230px, 27vw, 520px);
  z-index: 1;
  filter: drop-shadow(0 4px 16px #0008)
}

.brand-image-logo img {
  width: 100%;
  height: auto
}

@media(max-width:600px) {
  .brand-image {
    aspect-ratio: auto;
    height: 590px
  }

  .brand-image-photo {
    object-position: 50% center
  }

  .brand-image-logo {
    left: 7%;
    top: 8%;
    width: 63%;
    max-width: 300px
  }

  .brand-image:after {
    background: linear-gradient(180deg, #03091066, transparent 35%)
  }
}

.brand-slogan {
  position: absolute;
  z-index: 2;
  left: 7%;
  top: 27%;
  margin: 0;
  font-size: clamp(22px, 2.5vw, 46px);
  font-weight: 700;
  line-height: 1.13;
  letter-spacing: -1px;
  color: #f0f7f8;
  text-shadow: 0 2px 18px #000c
}

.brand-slogan span {
  color: #a3e8ee
}

.brand-speed {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  z-index: 1;
  pointer-events: none;
  mix-blend-mode: screen
}

.speed-streak {
  stroke-width: 2;
  stroke-linecap: round;
  stroke-dasharray: 220 2180;
  animation: city-speed var(--speed) linear var(--delay) infinite;
  opacity: .72;
  filter: drop-shadow(0 0 5px currentColor)
}

.speed-streak.cool {
  stroke: #8eecff;
  color: #6de6ff
}

.speed-streak.warm {
  stroke: #ffe1c4;
  color: #ffc494;
  stroke-width: 2.8
}

.speed-streak:nth-child(3n) {
  stroke-width: 1;
  opacity: .5;
  stroke-dasharray: 400 2000
}

@keyframes city-speed {
  from {
    stroke-dashoffset: 2400
  }

  to {
    stroke-dashoffset: 0
  }
}

.brand-image.is-motion-paused .speed-streak {
  animation-play-state: paused
}

@media(max-width:600px) {
  .brand-slogan {
    left: 7%;
    top: 20%;
    font-size: 24px;
    letter-spacing: -.5px
  }

  .brand-speed {
    opacity: .7
  }
}

@media(prefers-reduced-motion:reduce) {
  .brand-speed {
    display: none
  }
}

/* Echo the opening scene: a model signature, bold headline and ruled captions. */
.brand-topline,
.brand-bottomline {
  position: absolute;
  left: 5%;
  right: 5%;
  z-index: 3;
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 24px;
  color: #c9d4d8;
  font-size: 9px;
  letter-spacing: 1.7px;
  line-height: 1.5
}

.brand-topline {
  top: 5%;
  padding-bottom: 16px;
  border-bottom: 1px solid #d3edf04d
}

.brand-image-logo {
  left: auto;
  right: 5%;
  top: 13%;
  width: 235px;
  display: flex;
  align-items: center;
  gap: 16px
}

.brand-image-logo img {
  width: 190px
}

.brand-image-logo>span {
  font-size: 15px;
  letter-spacing: 1px;
  color: #e1e9eb
}

.brand-editorial {
  position: absolute;
  left: 5%;
  top: 23%;
  z-index: 2;
  text-shadow: 0 2px 18px #0008
}

.brand-kicker {
  font-size: 9px;
  letter-spacing: 3px;
  color: #d9e1e3;
  margin: 0 0 16px
}

.brand-editorial .brand-slogan {
  position: static;
  font-family: Impact, 'Arial Narrow', Arial, sans-serif;
  font-size: clamp(42px, 5.8vw, 112px);
  line-height: .98;
  letter-spacing: -.035em;
  color: var(--motion-orange);
  margin: 0;
  font-weight: 700
}

.brand-slogan span {
  display: block;
  font-family: Arial, sans-serif;
  font-size: .36em;
  line-height: 1.2;
  letter-spacing: .02em;
  color: #f1f6f6;
  margin-top: 14px
}

.brand-caption {
  font-size: 11px;
  line-height: 1.9;
  letter-spacing: .3px;
  color: #c5d1d5;
  margin: 26px 0 0
}

.brand-bottomline {
  bottom: 6%;
  border-top: 1px solid #d3edf04d;
  padding-top: 18px;
  font-size: 8px;
  letter-spacing: 1.2px
}

.brand-bottomline>a {
  color: #d7f2f4;
  white-space: nowrap;
  letter-spacing: .3px
}

@media(max-width:1000px) {
  .brand-image-logo {
    width: 183px;
    gap: 12px
  }

  .brand-image-logo img {
    width: 150px
  }

  .brand-image-logo>span {
    font-size: 12px
  }

  .brand-kicker {
    font-size: 8px;
    letter-spacing: 2px
  }

  .brand-caption {
    font-size: 10px;
    margin-top: 19px
  }

  .brand-topline {
    font-size: 8px;
    padding-bottom: 12px
  }

  .brand-bottomline {
    font-size: 7px;
    padding-top: 13px
  }
}

@media(max-width:600px) {
  .brand-image {
    height: 640px
  }

  .brand-topline,
  .brand-bottomline {
    left: 6%;
    right: 6%;
    gap: 12px;
    font-size: 7px;
    letter-spacing: .8px
  }

  .brand-topline {
    top: 5%;
    padding-bottom: 13px
  }

  .brand-topline>span:last-child {
    font-size: 6px;
    letter-spacing: .5px
  }

  .brand-image-logo {
    right: 6%;
    left: auto;
    top: 11%;
    width: 175px;
    max-width: none;
    gap: 10px
  }

  .brand-image-logo img {
    width: 140px
  }

  .brand-editorial {
    left: 6%;
    top: 23%
  }

  .brand-kicker {
    font-size: 7px;
    letter-spacing: 1.5px;
    margin-bottom: 11px
  }

  .brand-editorial .brand-slogan {
    font-size: 43px;
    letter-spacing: -1.5px
  }

  .brand-slogan span {
    font-size: 19px;
    letter-spacing: .1px;
    margin-top: 9px
  }

  .brand-caption {
    font-size: 9px;
    margin-top: 17px;
    line-height: 1.7
  }

  .brand-bottomline {
    bottom: 5%;
    flex-wrap: wrap;
    row-gap: 10px;
    padding-top: 14px
  }

  .brand-bottomline>span:nth-child(2) {
    display: none
  }

  .brand-bottomline>a {
    font-size: 8px
  }

  .brand-image:after {
    background: linear-gradient(180deg, #03091066 0%, #03091022 40%, transparent 65%, #03091066 100%)
  }
}

.footer {
  display: block;
  padding: 55px 5% 24px;
  background: #090f12;
  border-top: 1px solid #ffffff24
}

.footer-company {
  display: grid;
  grid-template-columns: 160px 1fr;
  gap: 45px;
  align-items: start
}

.footer .brand-logo {
  width: 135px;
  margin-top: 3px
}

.footer-contact {
  display: grid;
  grid-template-columns: 1.15fr 1.6fr .85fr 1.3fr;
  gap: 32px;
  margin: 0
}

.footer-contact dt {
  font-size: 9px;
  letter-spacing: 1.6px;
  color: #8f9ca2;
  margin: 0 0 14px
}

.footer-contact dd {
  font-size: 11px;
  line-height: 1.9;
  color: #d5dfe2;
  margin: 0;
  overflow-wrap: anywhere
}

.footer-contact a:hover {
  color: #a3e8ee
}

.footer-copyright {
  display: flex;
  justify-content: space-between;
  gap: 20px;
  border-top: 1px solid #ffffff1c;
  margin-top: 43px;
  padding-top: 22px;
  color: #89979d;
  font-size: 9px;
  line-height: 1.8;
  letter-spacing: .2px
}

@media(max-width:1100px) {
  .footer-company {
    grid-template-columns: 1fr;
    gap: 35px
  }

  .footer-contact {
    grid-template-columns: 1fr 1.5fr 1fr 1.4fr;
    gap: 25px
  }
}

@media(max-width:600px) {
  .footer {
    padding: 38px 7% 22px
  }

  .footer .brand-logo {
    width: 120px
  }

  .footer-company {
    gap: 31px
  }

  .footer-contact {
    grid-template-columns: 1fr;
    gap: 26px
  }

  .footer-contact dt {
    margin-bottom: 9px;
    font-size: 8px
  }

  .footer-contact dd {
    font-size: 12px;
    max-width: 320px
  }

  .footer-copyright {
    flex-direction: column;
    gap: 7px;
    margin-top: 32px;
    padding-top: 20px;
    font-size: 9px
  }
}

.closing .pill:hover,
.closing .pill:focus-visible {
  background: #ff3e2d;
  color: #101719
}

.model-switch {
  display: flex;
  align-items: center;
  gap: 3px;
  border: 1px solid #ffffff32;
  border-radius: 99px;
  padding: 4px;
  background: #08111780
}

.model-switch>a,
.model-switch>button {
  display: block;
  border: 0;
  border-radius: 99px;
  padding: 9px 16px;
  font-size: 11px;
  line-height: 1.2;
  white-space: nowrap;
  background: transparent;
  color: #d6dfe2;
  transition: background .2s, color .2s
}

.model-switch>[aria-current=page] {
  background: #ff3e2d;
  color: #101719
}

.model-switch>a:hover,
.model-switch>button:not(:disabled):hover {
  background: #ff3e2d;
  color: #101719
}

.model-switch>button:disabled {
  opacity: .55;
  cursor: default
}

@media(max-width:900px) and (min-width:601px) {
  .nav {
    gap: 18px
  }

  .nav nav {
    gap: 17px;
      font-size: 14px;
  }

  .model-switch>a,
  .model-switch>button {
    padding: 8px 11px;
    font-size: 10px
  }
}

@media(max-width:600px) {
  .model-switch {
    position: absolute;
    top: 80px;
    left: 6%;
    padding: 3px
  }

  .model-switch>a,
  .model-switch>button {
    font-size: 10px;
    padding: 8px 13px
  }

  .motion-model {
    top: 126px
  }
}

/* Model navigation is available at the end of both product pages. */
.closing-models {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 16px;
  max-width: 620px;
  margin: 48px auto 0;
  padding-top: 30px;
  border-top: 1px solid #ffffff26
}

.closing-models a {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 35px;
  min-width: 220px;
  padding: 18px 24px;
  border: 1px solid #ffffff65;
  border-radius: 100px;
  color: #f1f3ee;
  background: transparent;
  font-size: 13px;
  line-height: 1.2;
  transition: background .2s, border-color .2s, color .2s
}

.closing-models a span {
  font-size: 18px
}

.closing-models a[aria-current="page"] {
  border-color: #ff3e2d;
  background: #ff3e2d18
}

.closing-models a:hover,
.closing-models a:focus-visible {
  background: #ff3e2d;
  border-color: #ff3e2d;
  color: #101719
}

@media(max-width:600px) {
  .closing-models {
    margin-top: 35px;
    gap: 12px;
    flex-direction: column;
    padding-top: 25px;
    max-width: 320px
  }

  .closing-models a {
    width: 100%;
    font-size: 12px;
    padding: 17px 23px
  }
}

/* One pair of model buttons is the closing call to action. */
.closing-models {
  border-top: 0;
  padding-top: 0;
  margin-top: 38px
}

@media(max-width:600px) {
  .closing-models {
    margin-top: 30px;
    padding-top: 0
  }
}

/* Phone-only introduction: one generous product image, no repeated specifications. */
@media(max-width:600px) {
  .xtown-page .hero-story {
    height: auto
  }

  .xtown-page .hero-story .motion-hero {
    position: relative;
    height: 100svh;
    min-height: 640px
  }

  .xtown-page .motion-panel,
  .xtown-page .motion-steps,
  .xtown-page .motion-loader,
  .xtown-page .motion-controls,
  .xtown-page #scene-caption {
    display: none
  }

  .xtown-page .motion-products .rig-side,
  .xtown-page .motion-products .rig-rear {
    display: none
  }

  .xtown-page .motion-products .rig-front {
    height: min(60svh, 118vw, calc(100% - 330px));
    max-width: none;
    left: 50%;
    bottom: 11%;
    opacity: 1;
    transform: translateX(-50%)
  }

  .xtown-page .motion-model {
    top: 140px;
    left: 7%;
    right: auto;
    width: 190px;
    gap: 12px
  }

  .xtown-page .motion-model img {
    width: 152px
  }

  .xtown-page .motion-model>span {
    font-size: 13px
  }

  .xtown-page .motion-title {
    top: 202px;
    left: 7%;
    width: 86%
  }

  .xtown-page .motion-title .eyebrow {
    display: none
  }

  .xtown-page .motion-title h1 {
    font-size: 12vw;
    margin: 0;
    line-height: 1;
    letter-spacing: -.035em
  }

  .xtown-page .motion-bottom {
    bottom: 25px;
    padding-top: 16px;
    justify-content: center
  }

  .xtown-page .motion-bottom>a {
    margin: 0;
    font-size: 11px;
    letter-spacing: .7px
  }

  .xtown-page .motion-bg {
    object-position: 50% center
  }
}

/* Keep separate tire contacts for the rider photo and the product-only view. */
.agility-rider-contact {
  opacity: var(--agility-rider)
}

.agility-bike-contact {
  opacity: calc(1 - var(--agility-rider))
}

/* Match the enlarged CV-X45 specification text. */
.specs dl div {
  font-size: 16px;
  line-height: 1.65;
  padding: 18px 0
}

.specs dd {
  overflow-wrap: anywhere
}

.specs .source-note {
  font-size: 12px;
  line-height: 1.8
}

@media(max-width:600px) {
  .specs dl div {
    font-size: 14px;
    line-height: 1.65;
    gap: 16px;
    padding: 17px 0
  }

  .specs .source-note {
    font-size: 11px
  }
}