/* v0.9 live: S10 roll-top animation layout. */
.s10 {
  padding: clamp(1.75rem, 4vh, 3.25rem) 0;
  overflow: hidden;
  background: linear-gradient(90deg, #d1d1cf 0%, #d7d5d5 48%, #ddd8da 100%);
  color: #191918;
}

.s10 .section-inner {
  width: min(calc(100% - 3rem), var(--content-wide));
  margin-inline: auto;
}

.s10__grid {
  display: grid !important;
  grid-template-columns: minmax(0, .72fr) minmax(0, 1fr) !important;
  gap: clamp(2rem, 4vw, 4.5rem) !important;
  align-items: center !important;
}

.s10__copy-block {
  display: grid;
  gap: 0;
  max-width: 31rem;
}

.s10__label {
  display: block;
  margin: 0 0 1rem;
  color: rgba(25, 25, 24, .55);
  font-size: .72rem;
  font-weight: 700;
  letter-spacing: .24em;
}

.s10__title {
  margin: 0 0 1.35rem !important;
  color: #191918;
  font-size: clamp(2.15rem, 3.2vw, 3rem) !important;
  font-weight: 700;
  letter-spacing: .01em;
  line-height: 1.28 !important;
  text-wrap: balance;
}

.s10__body-text {
  margin: 0;
  color: rgba(25, 25, 24, .72);
  font-size: clamp(.95rem, 1.18vw, 1.06rem);
  line-height: 1.95;
}

.s10__media {
  position: relative;
  display: block;
  width: min(100%, 680px, calc(100svh - var(--swipe-ui-rail) - 3.5rem));
  aspect-ratio: 1;
  justify-self: end;
  overflow: hidden;
  background: #d9d5d6;
}

.s10__product {
  display: block;
  width: 150% !important;
  max-width: none !important;
  height: auto !important;
  max-height: none !important;
  margin-left: -25%;
  transform: translateY(-19%);
  object-fit: contain !important;
}

.s10__media-stack,
.s10__volume,
.s10__volume-badge,
.asset-placeholder[data-asset-slot="s10-rolltop-video"] {
  display: none !important;
}

.s10__label[data-reveal],
.s10__title[data-reveal] {
  opacity: 0;
  transform: translateY(12px);
  transition: opacity .55s ease-out, transform .55s ease-out;
}

.s10__body-text[data-reveal] {
  opacity: 0;
  transform: translateY(10px);
  transition: opacity .55s ease-out .12s, transform .55s ease-out .12s;
}

.s10__media[data-reveal] {
  opacity: 0;
  transform: translateY(16px);
  transition: opacity .65s ease-out .18s, transform .65s ease-out .18s;
}

.s10__label.is-visible,
.s10__title.is-visible,
.s10__body-text.is-visible,
.s10__media.is-visible {
  opacity: 1;
  transform: none;
}

@media (max-width: 900px) {
  .s10 {
    padding: clamp(2.25rem, 7vw, 3.25rem) 0 clamp(.75rem, 3vw, 1.25rem);
    background: #d7d4d5;
  }

  .s10 .section-inner {
    width: 100%;
    padding-inline: 0;
  }

  .s10__grid {
    grid-template-columns: 1fr !important;
    gap: clamp(.75rem, 3vw, 1rem) !important;
    text-align: left !important;
  }

  .s10__copy-block {
    width: 100%;
    max-width: none;
    padding-inline: clamp(1rem, 4.6vw, 1.25rem);
  }

  .s10__label {
    margin-bottom: .7rem;
    font-size: .67rem;
  }

  .s10__title {
    margin-bottom: .9rem !important;
    font-size: clamp(1.9rem, 8vw, 2.5rem) !important;
  }

  .s10__body-text {
    font-size: clamp(.9rem, 3.8vw, 1rem);
    line-height: 1.8;
  }

  .s10__media {
    width: 100%;
    max-width: 100vw;
    justify-self: stretch;
  }

  .s10__product {
    width: 150% !important;
    margin-left: -25%;
    transform: translateY(-19%);
  }
}

@media (orientation: landscape) and (max-height: 560px) and (min-width: 901px) {
  .s10__media {
    width: min(100%, 520px);
  }
}

@media (prefers-reduced-motion: reduce) {
  .s10__label[data-reveal],
  .s10__title[data-reveal],
  .s10__body-text[data-reveal],
  .s10__media[data-reveal] {
    opacity: 1 !important;
    transform: none !important;
    transition: none !important;
  }
}