body {
  --experiences-green: #205747;
  --experiences-dark: #123f33;
  --experiences-cream: #f1eadc;
}

.experiences-hero {
  align-items: flex-end;
  background: linear-gradient(90deg, rgb(10 36 29 / 72%), rgb(10 36 29 / 12%)), url('../images/home/hero-hotel.webp') center / cover no-repeat;
  color: #fff;
  display: flex;
  min-height: clamp(36rem, 72svh, 54rem);
  padding: clamp(5rem, 9vw, 9rem) clamp(1.25rem, 7vw, 8rem);
  position: relative;
}

.experiences-hero__content { max-width: 52rem; }
.experiences-hero .eyebrow,
.experiences-intro .eyebrow,
.experiences-cta .eyebrow { letter-spacing: 0.08em; text-transform: uppercase; }
.experiences-hero h1 { color: inherit; font-size: clamp(3rem, 5vw, 5.6rem); line-height: 0.95; margin: 0 0 1.5rem; }
.experiences-hero__content > p:not(.eyebrow) { font-family: var(--font-serif); font-size: clamp(1.25rem, 2vw, 1.7rem); max-width: 43rem; }
.experiences-hero__notice { border: 1px solid rgb(255 255 255 / 70%); border-radius: 999px; display: inline-flex; margin-top: 1.5rem; padding: 0.7rem 1.2rem; }
.experiences-section { background: #fff; padding: clamp(5rem, 8vw, 9rem) 0; }
.experiences-container { margin-inline: auto; max-width: 1450px; padding-inline: clamp(1.25rem, 5vw, 5rem); }
.experiences-intro { color: #47655d; margin-bottom: clamp(3rem, 6vw, 5.5rem); max-width: 48rem; }
.experiences-intro h2 { color: var(--experiences-dark); font-size: clamp(2.8rem, 4vw, 4.5rem); margin: 0 0 1rem; }
.experiences-intro > p:last-child { font-size: 1.08rem; line-height: 1.6; }

.experiences-grid { border-top: 1px solid #cad5d1; }
.experience-card { align-items: center; border-bottom: 1px solid #cad5d1; display: grid; gap: clamp(2rem, 5vw, 6rem); grid-template-columns: clamp(4rem, 9vw, 8rem) 1fr; padding: clamp(2rem, 4vw, 3.5rem) 0; transition: padding 220ms ease; }
.experience-card:hover { padding-inline: 1rem; }
.experience-card__number { color: #9cafaa; font-family: var(--font-serif); font-size: clamp(2.6rem, 5vw, 5rem); font-style: italic; }
.experience-card__content { align-items: center; display: grid; gap: 1.5rem 3rem; grid-template-columns: minmax(12rem, 0.7fr) minmax(18rem, 1.5fr) auto; }
.experience-card h3 { color: var(--experiences-dark); font-size: clamp(2rem, 3vw, 3.2rem); margin: 0; }
.experience-card p { color: #506b64; line-height: 1.55; margin: 0; max-width: 38rem; }
.experience-card a,
.experiences-cta a { align-items: center; border: 1px solid currentColor; border-radius: 999px; color: var(--experiences-dark); display: inline-flex; gap: 1rem; justify-content: center; padding: 0.85rem 1.2rem; text-decoration: none; white-space: nowrap; }
.experience-card a:hover,
.experience-card a:focus-visible { background: var(--experiences-dark); color: #fff; }

.experiences-cta { background: var(--experiences-green); color: #fff; padding: clamp(5rem, 9vw, 9rem) 1.25rem; text-align: center; }
.experiences-cta > div { margin-inline: auto; max-width: 55rem; }
.experiences-cta h2 { color: inherit; font-size: clamp(3rem, 5vw, 5rem); margin: 0 0 1rem; }
.experiences-cta p:not(.eyebrow) { font-size: 1.1rem; line-height: 1.6; }
.experiences-cta a { color: #fff; margin-top: 1.5rem; }
.experiences-cta a:hover,
.experiences-cta a:focus-visible { background: #fff; color: var(--experiences-dark); }

@media (max-width: 900px) {
  .experiences-hero { background-position: 58% center; min-height: 42rem; }
  .experience-card__content { align-items: start; grid-template-columns: 1fr; }
  .experience-card a { justify-self: start; }
}

@media (max-width: 600px) {
  .experiences-hero { min-height: 38rem; }
  .experience-card { align-items: start; gap: 1rem; grid-template-columns: 3rem 1fr; }
  .experience-card:hover { padding-inline: 0; }
  .experience-card__number { font-size: 2rem; }
  .experience-card a { white-space: normal; }
}

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