/* Web service page review pass — 2026-07-22 */

.service--web .showcase-title__keep {
  display: inline-block;
  white-space: nowrap;
}

.service--web .device-ribbon__track.is-auto-scroll {
  will-change: transform;
  animation: web-samples-loop-primary 58s linear infinite;
}

.service--web .device-ribbon__track--secondary.is-auto-scroll {
  animation-name: web-samples-loop-secondary;
  animation-duration: 52s;
}

.service--web .device-ribbon:hover .device-ribbon__track.is-auto-scroll {
  animation-play-state: paused;
}

.service--web .device-shot--salon {
  background: #fff;
}

.service--web .device-shot--salon img {
  aspect-ratio: 3 / 2;
  object-fit: cover;
  object-position: center;
}

.service--web .pricing-card.is-premium,
.service--web .pricing-card.is-premium:hover {
  background: #0b1830;
  color: #fff;
}

.service--web .pricing-card.is-premium > p:first-child {
  color: #8fb5ff;
}

.service--web .pricing-card.is-premium h3,
.service--web .pricing-card.is-premium > strong {
  color: #fff;
  opacity: 1;
}

.service--web .pricing-card.is-premium > p:not(:first-child),
.service--web .pricing-card.is-premium li {
  color: #dbe4f3;
  opacity: 1;
}

@keyframes web-samples-loop-primary {
  from { transform: translateX(-6vw) rotate(-1.2deg); }
  to { transform: translateX(calc(-50% - 6vw)) rotate(-1.2deg); }
}

@keyframes web-samples-loop-secondary {
  from { transform: translateX(calc(-50% - 1vw)) rotate(1deg); }
  to { transform: translateX(-1vw) rotate(1deg); }
}

@media (max-width: 800px) {
  .service--web .web-showcase__head h2 {
    max-width: none;
    font-size: clamp(40px, 11.4vw, 52px);
    line-height: .96;
  }

  .service--web .device-ribbon {
    overflow: hidden;
    padding: 10px 0 26px;
    scroll-snap-type: none;
  }

  .service--web .device-ribbon__track,
  .service--web .device-ribbon__track--secondary {
    display: flex;
    gap: 12px;
    min-width: max-content;
    padding: 0;
  }

  .service--web .device-ribbon__track--secondary {
    margin-top: 18px;
  }

  .service--web .device-ribbon__track.is-auto-scroll {
    animation-name: web-samples-loop-mobile-primary;
    animation-duration: 46s;
  }

  .service--web .device-ribbon__track--secondary.is-auto-scroll {
    animation-name: web-samples-loop-mobile-secondary;
    animation-duration: 42s;
  }

  .service--web .device-shot--wide {
    width: min(76vw, 310px);
  }

  .service--web .device-shot--phone {
    width: min(23vw, 94px);
  }

  .service--web .hearing-scene {
    min-height: 0;
    aspect-ratio: 3 / 2;
    background: #f6f7f8;
  }

  .service--web .hearing-scene > img {
    height: 100%;
    min-height: 0;
    object-fit: contain;
    object-position: center;
  }

  .service--web .proposal-note {
    right: 12px;
    bottom: 12px;
    width: min(72%, 270px);
    padding: 12px 14px 14px;
  }

  .service--web .proposal-note strong {
    font-size: 13px;
    line-height: 1.45;
  }

  .service--web .process-symbols {
    grid-column: 1 / -1;
    display: grid;
    grid-auto-flow: row;
    grid-auto-columns: auto;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: 2px;
    margin-top: 34px;
    padding: 2px;
    overflow: visible;
    background: rgba(255, 255, 255, .16);
  }

  .service--web .process-symbols li {
    display: block;
    min-height: 178px;
    padding: 15px 13px 16px;
    scroll-snap-align: none;
  }

  .service--web .process-number {
    margin-bottom: 14px;
    font-size: clamp(43px, 13vw, 58px);
  }

  .service--web .process-symbols b {
    margin-bottom: 7px;
    font-size: 7px;
  }

  .service--web .process-symbols strong {
    font-size: 14px;
    line-height: 1.35;
  }

  .service--web .process-symbols p {
    margin-top: 7px;
    font-size: 10px;
    line-height: 1.55;
  }

  .service--web .contact h2 {
    max-width: none;
    font-size: clamp(43px, 12vw, 54px);
    line-height: .96;
  }

  .service--web .contact h2 em {
    display: block;
    width: max-content;
    max-width: 100%;
    margin-top: .12em;
    white-space: nowrap;
    font-size: .78em;
  }
}

@keyframes web-samples-loop-mobile-primary {
  from { transform: translateX(-16px); }
  to { transform: translateX(calc(-50% - 16px)); }
}

@keyframes web-samples-loop-mobile-secondary {
  from { transform: translateX(calc(-50% - 16px)); }
  to { transform: translateX(-16px); }
}

@media (max-width: 360px) {
  .service--web .web-showcase__head h2 {
    font-size: 10.7vw;
  }

  .service--web .process-symbols li {
    min-height: 170px;
    padding-inline: 11px;
  }

  .service--web .process-symbols strong { font-size: 13px; }
  .service--web .process-symbols p { font-size: 9px; }
}

@media (prefers-reduced-motion: reduce) {
  .service--web .device-ribbon__track.is-auto-scroll {
    animation: none;
  }
}