.mobility-detail {
  --detail-copy-width: 820px;
  width: 100%;
  overflow: hidden;
  background: #fff;
  color: #000;
  font-family: "Source Han Sans SC", "PingFang SC", "Microsoft YaHei", sans-serif;
}

.mobility-detail *,
.mobility-detail *::before,
.mobility-detail *::after { box-sizing: border-box; }

.mobility-detail button { font: inherit; }
.mobility-detail__media,
.mobility-detail__media img { display: block; width: 100%; height: 100%; }
.mobility-detail__media { position: absolute; inset: 0; }
.mobility-detail__media img { object-fit: contain; }

.mobility-detail__hero {
  position: relative;
  height: min(800px, 41.6667vw);
  min-height: 0;
  overflow: hidden;
  background: #0d151a;
  color: #fff;
}

.mobility-detail__hero .mobility-detail__media img { object-position: center; }
.mobility-detail__hero-mask { position: absolute; inset: 0; background: linear-gradient(180deg, rgba(0,0,0,.4), rgba(0,0,0,0) 65%); }
.mobility-detail__hero-content { position: relative; z-index: 1; display: flex; height: 100%; flex-direction: column; align-items: center; padding-top: clamp(80px, 8.3vw, 160px); text-align: center; }
.mobility-detail__brand { display: block; width: clamp(170px, 17vw, 320px); }
.mobility-detail__brand img { display: block; width: 100%; height: auto; }
.mobility-detail__hero h1 { margin: clamp(8px, 1vw, 18px) 0 0; font-size: clamp(24px, 2.5vw, 48px); font-weight: 400; line-height: 1.25; }
.mobility-detail__video { display: inline-flex; width: clamp(140px, 14vw, 180px); height: clamp(40px, 4.2vw, 44px); margin-top: clamp(10px, 1.2vw, 20px); align-items: center; justify-content: center; gap: 10px; border: 1px solid #fff; border-radius: 999px; background: transparent; color: #fff; cursor: pointer; font-size: clamp(14px, 1.35vw, 18px); }
.mobility-detail__video img { width: 14px; height: auto; }
.mobility-detail__video:hover,
.mobility-detail__video:focus-visible { background: rgba(255,255,255,.14); }
.mobility-detail__video-dialog { position: fixed; inset: 0; width: min(92vw, 1100px); height: fit-content; max-width: 92vw; max-height: 88vh; margin: auto; padding: 0; overflow: visible; border: 0; background: #000; }
.mobility-detail__video-dialog::backdrop { background: rgba(0,0,0,.82); }
.mobility-detail__video-dialog video { display: block; width: 100%; max-height: 88vh; background: #000; }
.mobility-detail__video-close { position: absolute; top: 12px; right: 12px; z-index: 1; display: grid; width: 40px; height: 40px; place-items: center; padding: 0; border: 1px solid rgba(255,255,255,.8); border-radius: 50%; background: rgba(0,0,0,.55); color: #fff; cursor: pointer; font-size: 28px; line-height: 1; }
.mobility-detail__highlights > h2,
.mobility-detail__parameters > h2 { margin: 0; font-size: 36px; font-weight: 400; line-height: 1.35; text-align: center; }
.mobility-detail__highlights > h2 { height: 170px; padding-top: 57px; }

.mobility-detail__feature { position: relative; height: min(600px, 31.25vw); min-height: 430px; overflow: hidden; background: #d8d8d8; color: #fff; }
.mobility-detail__feature .mobility-detail__media img { object-position: center; }
.mobility-detail__feature--vision .mobility-detail__media img { object-position: center 47%; }
.mobility-detail__feature--cabin .mobility-detail__media img { object-position: center 52%; }
.mobility-detail__feature--drive .mobility-detail__media img { object-position: center 50%; }
.mobility-detail__feature--operations .mobility-detail__media img { object-position: center 52%; }
.mobility-detail__feature--guide .mobility-detail__media img { object-position: center 50%; }
.mobility-detail__feature-shade { position: absolute; inset: 0; background: linear-gradient(110deg, rgba(38,43,24,.98) 0%, rgba(38,43,24,.83) 42%, rgba(38,43,24,0) 100%); }
.mobility-detail__feature--drive .mobility-detail__feature-shade { background: linear-gradient(110deg, rgba(21,94,156,.98) 0%, rgba(21,94,156,.76) 45%, rgba(21,94,156,0) 100%); }
.mobility-detail__feature--right .mobility-detail__feature-shade { inset: 0; background: linear-gradient(250deg, rgba(79,82,86,.98) 0%, rgba(79,82,86,.78) 45%, rgba(79,82,86,0) 100%); }
.mobility-detail__feature-copy { position: relative; z-index: 1; width: var(--detail-copy-width); padding: clamp(78px, 6.8vw, 131px) 0 0 12.5%; }
.mobility-detail__feature--right .mobility-detail__feature-copy { margin-left: auto; padding-right: 6.25%; padding-left: 0; }
.mobility-detail__feature-copy h3 { margin: 0 0 clamp(18px, 1.9vw, 36px); font-size: clamp(28px, 1.875vw, 36px); font-weight: 700; line-height: 1.55; }
.mobility-detail__feature-copy h3 small { font-size: 20px; font-weight: 700; }
.mobility-detail__feature-copy p { margin: 0 0 clamp(8px, .55vw, 11px); font-size: clamp(15px, .9375vw, 18px); line-height: 1.78; }

.mobility-detail__parameters { width: min(1440px, calc(100% - 80px)); margin: 0 auto; padding: 0 0 80px; }
.mobility-detail__parameters > h2 { padding-top: 0; line-height: 104px; }
.mobility-detail__parameter-tabs { display: grid; height: 265px; grid-template-columns: 17% 41.5% 41.5%; background: linear-gradient(to bottom, #fff 50%, #f7f7f7 50%); }
.mobility-detail__parameter-tabs button { position: relative; display: flex; flex-direction: column; align-items: center; justify-content: flex-end; padding: 0 0 20px; border: 0; background: transparent; color: #000; cursor: pointer; }
.mobility-detail__parameter-tabs button:first-child { grid-column: 2; }
.mobility-detail__parameter-tabs button:last-child { grid-column: 3; }
.mobility-detail__parameter-tabs picture { position: absolute; inset: 0 0 54px; display: flex; align-items: center; justify-content: center; }
.mobility-detail__parameter-tabs img { display: block; width: auto; max-width: 100%; height: 78%; object-fit: contain; mix-blend-mode: multiply; }
.mobility-detail__parameter-tabs button:first-child img { height: 78%; }
.mobility-detail__parameter-tabs span { position: relative; z-index: 1; font-size: 24px; }
.mobility-detail__parameter-grid { display: grid; grid-template-columns: 17% 41.5% 41.5%; font-size: 18px; text-align: center; }
.mobility-detail__parameter-labels,
.mobility-detail__parameter-values { display: grid; grid-template-rows: repeat(8, 60px); }
.mobility-detail__parameter-labels { color: #666; text-align: left; }
.mobility-detail__parameter-labels span,
.mobility-detail__parameter-values span { display: flex; align-items: center; padding: 0 38px; }
.mobility-detail__parameter-values span { justify-content: center; }
.mobility-detail__parameter-labels span:nth-child(even),
.mobility-detail__parameter-values span:nth-child(even) { background: #fafafa; }

@media (max-width: 1200px) and (min-width: 769px) {
  .mobility-detail { --detail-copy-width: 610px; }
  .mobility-detail__feature-copy { padding-left: 8%; }
  .mobility-detail__feature--right .mobility-detail__feature-copy { padding-right: 4%; }
}

@media (min-width: 769px) {
  .mobility-detail { --detail-copy-width: min(820px, 42.7083vw); }
  .mobility-detail__feature-copy { padding-top: min(131px, 6.8229vw); }
  .mobility-detail__feature-copy h3 { margin-bottom: min(36px, 1.875vw); font-size: min(36px, 1.875vw); }
  .mobility-detail__feature-copy h3 small { font-size: min(20px, 1.0417vw); }
  .mobility-detail__feature-copy p { margin-bottom: min(11px, .5729vw); font-size: min(18px, .9375vw); }
}

@media (max-width: 768px) {
  .mobility-detail__hero { height: auto; min-height: 0; margin-top: 80px; }
  .mobility-detail__hero .mobility-detail__media { position: relative; inset: auto; }
  .mobility-detail__hero .mobility-detail__media img { height: auto; object-fit: contain; object-position: 50% top; }
  .mobility-detail__hero-content { position: absolute; inset: 0; display: block; padding: 0; }
  .mobility-detail__brand { position: absolute; top: 16vw; left: 50%; width: 36.13vw; transform: translateX(-50%); }
  .mobility-detail__hero h1 { position: absolute; top: 29.87vw; left: 0; width: 100%; margin: 0; font-size: 4.8vw; line-height: 1; white-space: nowrap; }
  .mobility-detail__video { position: absolute; top: 38.93vw; left: 50%; width: 43vw; height: 9vw; margin: 0; gap: 3vw; border-width: 1px; font-size: 3.6vw; transform: translateX(-50%); }
  .mobility-detail__video img { width: 3.8vw; }
  .mobility-detail__highlights > h2 { display: none; }
  .mobility-detail__feature { height: 170.67vw; min-height: 0; }
  .mobility-detail__feature .mobility-detail__media img { object-position: center bottom; }
  .mobility-detail__feature--vision .mobility-detail__media img { object-position: 62% bottom; }
  .mobility-detail__feature--cabin .mobility-detail__media img { object-position: 62% bottom; }
  .mobility-detail__feature--drive .mobility-detail__media img { object-position: 51% bottom; }
  .mobility-detail__feature--operations .mobility-detail__media img { object-position: 5% bottom; }
  .mobility-detail__feature--guide .mobility-detail__media img { object-position: 51% bottom; }
  .mobility-detail__feature-shade,
  .mobility-detail__feature--right .mobility-detail__feature-shade { inset: 0; background: linear-gradient(180deg, #585c22 8%, rgba(88,92,34,.94) 55%, rgba(88,92,34,0) 100%); }
  .mobility-detail__feature--drive .mobility-detail__feature-shade { background: linear-gradient(180deg, #155e9c 8%, rgba(21,94,156,.94) 57%, rgba(21,94,156,0) 100%); }
  .mobility-detail__feature--operations .mobility-detail__feature-shade { background: linear-gradient(180deg, #4f5256 8%, rgba(79,82,86,.9) 56%, rgba(79,82,86,0) 100%); }
  .mobility-detail__feature--guide .mobility-detail__feature-shade { background: linear-gradient(180deg, #262b18 8%, rgba(87,92,57,.93) 56%, rgba(159,166,105,0) 100%); }
  .mobility-detail__feature-copy,
  .mobility-detail__feature--right .mobility-detail__feature-copy { width: 100%; margin: 0; padding: 8.8vw 4vw 0; text-align: center; }
  .mobility-detail__feature-copy h3 { margin-bottom: 4.6vw; font-size: 6.93vw; line-height: 1.5; }
  .mobility-detail__feature-copy h3 small { display: block; font-size: 4.27vw; line-height: 1.2; }
  .mobility-detail__feature-copy p { margin-bottom: 2.4vw; font-size: 3.73vw; line-height: 1.72; }
  .mobility-detail__feature--drive .mobility-detail__feature-copy h3 { margin-bottom: 3.5vw; }

  .mobility-detail__parameters { width: calc(100% - 7.47vw); padding-bottom: 8vw; }
  .mobility-detail__parameters > h2 { padding-top: 7.47vw; font-size: 6.93vw; line-height: 11.47vw; }
  .mobility-detail__parameter-tabs { height: 30.67vw; margin-top: 5.07vw; grid-template-columns: 1fr 1fr; }
  .mobility-detail__parameter-tabs button:first-child,
  .mobility-detail__parameter-tabs button:last-child { grid-column: auto; }
  .mobility-detail__parameter-tabs button { padding-bottom: 2.8vw; }
  .mobility-detail__parameter-tabs button.is-active { background: transparent; }
  .mobility-detail__parameter-tabs button.is-active::after { position: absolute; right: 0; bottom: 0; left: 0; height: 2px; background: #f18d01; content: ""; }
  .mobility-detail__parameter-tabs picture { inset: 0 0 5.5vw; }
  .mobility-detail__parameter-tabs img { height: 76%; }
  .mobility-detail__parameter-tabs button:first-child img { height: 80%; }
  .mobility-detail__parameter-tabs span { font-size: 3.73vw; }
  .mobility-detail__parameter-grid { grid-template-columns: 38% 62%; font-size: 3.73vw; text-align: left; }
  .mobility-detail__parameter-labels,
  .mobility-detail__parameter-values { grid-template-rows: repeat(8, 11.2vw); }
  .mobility-detail__parameter-labels span,
  .mobility-detail__parameter-values span { padding: 0 3.48vw; }
  .mobility-detail__parameter-labels span { white-space: nowrap; }
  .mobility-detail__parameter-values { display: none; }
  .mobility-detail__parameter-values.is-active { display: grid; }
  .mobility-detail__parameter-values span { justify-content: flex-start; white-space: nowrap; }
}

/* Size each image panel from its selected desktop or mobile artwork. */
.mobility-detail__hero,
.mobility-detail__feature { height: auto; min-height: 0; }
.mobility-detail__hero .mobility-detail__media,
.mobility-detail__feature .mobility-detail__media { position: relative; inset: auto; height: auto; }
.mobility-detail__hero .mobility-detail__media img,
.mobility-detail__feature .mobility-detail__media img { height: auto; }
.mobility-detail__hero-content,
.mobility-detail__feature-copy { position: absolute; inset: 0; }
.mobility-detail__feature--right .mobility-detail__feature-copy { left: auto; }

@media (prefers-reduced-motion: reduce) {
  .mobility-detail__video { transition: none; }
}