.bridal-gallery {
  padding: 88px 24px;
  border-top: 1px solid rgba(23, 23, 23, .14);
  background: #f8f7f4;
}

.bridal-gallery__inner {
  width: min(100%, 620px);
  margin: 0 auto;
}

.bridal-gallery__eyebrow {
  margin: 0 0 12px;
  color: #66605a;
  font: 500 11px/1.4 Arial, sans-serif;
  letter-spacing: .22em;
  text-transform: uppercase;
}

.bridal-gallery--hair {
  padding-top: 0;
  border-top: 0;
}

.bridal-gallery__category {
  margin: 0 0 22px;
  color: #171717;
  font: 500 12px/1.4 Arial, sans-serif;
  letter-spacing: .22em;
  text-transform: uppercase;
}

.bridal-gallery h2 {
  margin: 0 0 30px;
  color: #171717;
  font-family: var(--serif, Georgia, "Times New Roman", serif);
  font-size: clamp(38px, 4.4vw, 58px);
  font-weight: 400;
  line-height: 1.02;
  letter-spacing: -.025em;
}

.bridal-gallery__viewport {
  overflow: hidden;
  touch-action: pan-y;
  background: #ebe8e3;
}

.bridal-gallery__stage {
  position: relative;
}

.bridal-gallery__track {
  display: flex;
  margin: 0;
  padding: 0;
  list-style: none;
  transition: transform .55s cubic-bezier(.22, .61, .36, 1);
  will-change: transform;
}

.bridal-gallery__slide {
  flex: 0 0 100%;
  aspect-ratio: 2 / 3;
}

.bridal-gallery__slide img {
  display: block;
  width: 100%;
  height: 100%;
  object-fit: cover;
}

.bridal-gallery__controls {
  display: grid;
  grid-template-columns: 46px 1fr 46px;
  align-items: center;
  gap: 14px;
  margin-top: 18px;
}

.bridal-gallery__button {
  display: grid;
  width: 46px;
  height: 46px;
  padding: 0;
  place-items: center;
  border: 1px solid rgba(23, 23, 23, .55);
  border-radius: 50%;
  background: transparent;
  color: #171717;
  cursor: pointer;
  font: 300 22px/1 Arial, sans-serif;
  transition: background .2s ease, color .2s ease;
}

.bridal-gallery__button:hover,
.bridal-gallery__button:focus-visible {
  background: #171717;
  color: #fff;
  outline: none;
}

.bridal-gallery__counter {
  color: #6b655f;
  font: 500 10px/1 Arial, sans-serif;
  letter-spacing: .2em;
  text-align: center;
}

/* Keep the complete bridal booking block in the first desktop viewport while
   preserving the elegant, centered whitespace above it. */
@media (min-width: 961px) {
  body.featured-service-page .hero,
  body.featured-service-page .page-hero > .container.hero-grid {
    height: calc(100vh - 100px) !important;
    min-height: 700px !important;
    max-height: 1040px !important;
  }

  body.featured-service-page .hero-copy,
  body.featured-service-page .page-hero .hero-copy {
    justify-content: center !important;
    padding-top: clamp(42px, 5vh, 72px) !important;
    padding-bottom: clamp(42px, 5vh, 72px) !important;
    transform: none !important;
  }

  body.featured-service-page .hero > img,
  body.featured-service-page .page-hero .hero-visual,
  body.featured-service-page .page-hero .hero-visual img {
    height: 100% !important;
    min-height: 0 !important;
    max-height: none !important;
  }

  body.featured-service-page .hero > img,
  body.featured-service-page .page-hero .hero-visual img {
    object-fit: cover !important;
    object-position: center top !important;
  }
}

/* On wide screens the photographs remain the focus: navigation sits at the
   left and right edges. On mobile the original controls stay below. */
@media (min-width: 901px) {
  .bridal-gallery__stage {
    margin-bottom: 34px;
  }

  .bridal-gallery__controls {
    position: absolute;
    inset: 0 -66px;
    display: block;
    margin: 0;
    pointer-events: none;
  }

  .bridal-gallery__button {
    position: absolute;
    top: 50%;
    z-index: 2;
    transform: translateY(-50%);
    background: rgba(248, 247, 244, .9);
    backdrop-filter: blur(8px);
    pointer-events: auto;
  }

  .bridal-gallery__button:first-of-type {
    left: 0;
  }

  .bridal-gallery__button:last-of-type {
    right: 0;
  }

  .bridal-gallery__counter {
    position: absolute;
    right: 0;
    bottom: -29px;
    left: 0;
  }
}

@media (max-width: 700px) {
  .bridal-gallery {
    padding: 62px 20px;
  }

  .bridal-gallery h2 {
    margin-bottom: 24px;
    font-size: clamp(38px, 11vw, 48px);
  }

  .bridal-gallery__inner {
    width: min(100%, 480px);
  }

  .bridal-gallery--hair {
    padding-top: 0;
  }

}

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