.ride-hero {
  position: relative;
  isolation: isolate;
  overflow: hidden;
  color: #fff;
  background: #112a38;
}
.ride-panels {
  display: flex;
  margin-inline: -5vh;
  min-height: clamp(540px, calc(100svh - var(--header-h)), 950px);
  transform: skewX(-5deg);
}
.ride-panel {
  flex: 1;
  min-width: 0;
  position: relative;
  overflow: hidden;
  display: flex;
  align-items: flex-end;
  padding: 4.5rem clamp(1.5rem, 3.3vw, 4rem);
  transition: flex .6s ease;
}
.ride-panel + .ride-panel { border-left: 2px solid #e0f7ff; }
.ride-panel:first-child { padding-left: calc(6vh + 2.8vw); }
.ride-panel:last-child { padding-right: calc(6vh + 1vw); }
.ride-film { position: absolute; inset: -1px -5vh; transform: skewX(5deg); }
.ride-film video { display: block; width: 100%; height: 100%; object-fit: cover; }
.ride-panel::after {
  content: ""; position: absolute; inset: 0; pointer-events: none;
  background: linear-gradient(180deg,rgba(3,15,24,.08) 18%,rgba(3,15,24,.23) 40%,rgba(3,15,24,.90) 100%);
}
.ride-copy { position: relative; z-index: 1; transform: skewX(5deg); }
.ride-role { text-transform: uppercase; font-size: .73rem; letter-spacing: .16em; font-weight: 800; }
.ride-copy :is(h1,h2) { font: 800 clamp(2.25rem,4vw,5rem)/1.04 var(--font-sans); letter-spacing: -.055em; color: white; margin: .75rem 0; }
.ride-copy em { color: #8ee6ff; font-style: normal; }
.ride-copy p { max-width: 32ch; line-height: 1.5; margin: 0 0 1.35rem; color: #f3f8fa; }
.ride-copy a, .ride-motion { display: inline-flex; align-items: center; gap: .9rem; padding: .64rem 1.05rem; border-radius: 2rem; font-weight: 700; font-size: .88rem; }
.ride-copy a { color: #082737; background: #f2fbff; }
.ride-copy a:hover { background: #96e9ff; text-decoration: none; }
.ride-motion { position: absolute; z-index: 2; top: 1rem; right: 1rem; font-family: inherit; cursor: pointer; background: #102232dc; color: white; border: 1px solid #ffffff70; }
.ride-motion[hidden] { display: none; }
@media (hover:hover) and (min-width:761px) {
  .ride-panel:hover, .ride-panel:focus-within { flex: 1.2; }
}
@media (max-width:760px) {
  .ride-panels { display: block; transform: none; margin: 0; min-height: 0; background: #d1f6ff; }
  .ride-panel, .ride-panel:first-child, .ride-panel:last-child {
    min-height: max(220px, calc((100svh - var(--header-h)) / 3 + 15px));
    padding: 1.75rem 7vw 2.1rem;
  }
  .ride-panel { clip-path: polygon(0 18px,100% 0,100% calc(100% - 18px),0 100%); }
  .ride-panel:first-child { clip-path: polygon(0 0,100% 0,100% calc(100% - 18px),0 100%); }
  .ride-panel:last-child { clip-path: polygon(0 18px,100% 0,100% 100%,0 100%); }
  .ride-panel + .ride-panel { margin-top: -16px; border: 0; }
  .ride-film { inset: 0; transform: none; }
  .ride-copy { transform: none; }
  .ride-panel::after { background: linear-gradient(90deg,#061421e8,#06142192 62%,#06142121); }
  .ride-copy :is(h1,h2) { font-size: clamp(1.8rem,6.5vw,2.8rem); margin: .25rem 0; }
  .ride-copy br { display: none; }
  .ride-copy br::after { content: " "; }
  .ride-copy em { margin-left: .18em; }
  .ride-copy p { font-size: .88rem; max-width: 31ch; margin-bottom: .65rem; }
  .ride-motion { font-size: .73rem; padding: .45rem .8rem; top: .6rem; right: .6rem; }
}
@media (prefers-reduced-motion: reduce) { .ride-panel { transition: none; } }