.service-tunnel {
  color: #fff8ec;
  background: #15110f;
}
.tunnel-stage {
  position: relative;
  padding: 4rem 0;
}
.tunnel-canvas,
.tunnel-hud,
.tunnel-progress {
  display: none;
}
.tunnel-stops {
  display: grid;
  gap: 1.65rem;
  grid-template-columns: repeat(auto-fit, minmax(min(100%, 240px), 1fr));
}
.tunnel-stop {
  border-top: 1px solid #7b5034;
  padding: 1rem 0;
}
.tunnel-stop h2 {
  margin: 0 0 .7rem;
  max-width: 13ch;
  color: inherit;
  font-size: clamp(1.65rem, 3vw, 2.7rem);
  line-height: 1.04;
}
.tunnel-stop p {
  color: #e4cdbb;
  max-width: 37ch;
  margin: 0;
}
.tunnel-stop .tunnel-kicker {
  color: #ffb775;
  font: 700 .7rem/1.4 system-ui, sans-serif;
  letter-spacing: .13em;
  margin-bottom: .9rem;
}
.tunnel-kicker span {
  margin-left: .6rem;
}

@media (prefers-reduced-motion: no-preference) {
  .service-tunnel.tunnel-ready {
    height: 500vh;
  }
  .tunnel-ready .tunnel-stage {
    position: sticky;
    top: 0;
    height: 100vh;
    height: 100svh;
    padding: 0;
    overflow: hidden;
    isolation: isolate;
  }
  .tunnel-ready .tunnel-canvas {
    position: absolute;
    inset: 0;
    display: block;
    width: 100%;
    height: 100%;
    pointer-events: none;
  }
  .tunnel-ready .tunnel-stage::after {
    content: "";
    position: absolute;
    inset: 0;
    z-index: 0;
    background:
      linear-gradient(0deg, #15110f 0%, #15110f38 46%, transparent 66%),
      linear-gradient(90deg, #15110fd6 0%, #15110f14 56%, transparent 100%);
    pointer-events: none;
  }
  .tunnel-ready .tunnel-hud {
    position: relative;
    z-index: 2;
    display: flex;
    justify-content: space-between;
    align-items: center;
    gap: 1rem;
    padding-top: clamp(100px, 15vh, 142px);
    color: #ffbd84;
    font: 700 .66rem/1.5 system-ui, sans-serif;
    letter-spacing: .16em;
  }
  .tunnel-hud a {
    border: 1px solid #cb94649c;
    border-radius: 4px;
    color: #fff4e8;
    letter-spacing: .04em;
    padding: .55rem .7rem;
    background: #15110fd9;
  }
  .tunnel-hud a:focus-visible {
    outline: 2px solid #ffbd84;
    outline-offset: 3px;
  }
  .tunnel-ready .tunnel-stops {
    position: absolute;
    z-index: 1;
    inset: auto 0 clamp(85px, 15vh, 145px);
    display: grid;
  }
  .tunnel-ready .tunnel-stop {
    grid-area: 1 / 1;
    border: 0;
    padding: 0;
    opacity: var(--stop-opacity, 0);
    transform: translateY(var(--stop-offset, 8px));
  }
  .tunnel-ready .tunnel-stop h2 {
    font-size: clamp(2.6rem, 6.3vw, 6rem);
    text-shadow: 0 2px 25px #15110f;
    letter-spacing: -.055em;
  }
  .tunnel-ready .tunnel-progress {
    display: flex;
    align-items: center;
    gap: .85rem;
    position: absolute;
    z-index: 1;
    left: max(20px, calc((100% - 1244px) / 2));
    bottom: 28px;
    color: #edb88f;
    font: 700 .57rem/1.5 system-ui, sans-serif;
    letter-spacing: .16em;
  }
  .tunnel-progress i {
    display: block;
    height: 2px;
    width: clamp(48px, 9vw, 110px);
    background: #ffb77536;
  }
  .tunnel-progress i::after {
    content: "";
    display: block;
    height: 100%;
    background: #ffb775;
    transform: scaleX(var(--tunnel-progress, 0));
    transform-origin: left;
  }
}
@media (max-width: 650px) {
  .tunnel-ready .tunnel-stop h2 {
    max-width: 15ch;
  }
  .tunnel-ready .tunnel-stage::after {
    background: linear-gradient(0deg, #15110f 2%, #15110fcc 35%, transparent 72%);
  }
}