/* =========================================================
   ALMARA Experience Page Add-on — v1.8
   Scope: ALMARA Experience Elementor templates EN/DE
   Basis: ALMARA Redesign CSS FINAL FREEZE
   Architecture: Elementor content/structure, CSS presentation only
   ========================================================= */

body.elementor-page [id^="alm-experience-"],
body.elementor-page [id^="alm-experience-"] *,
body.elementor-page [id^="alm-experience-"] *::before,
body.elementor-page [id^="alm-experience-"] *::after {
  box-sizing: border-box;
}

body.elementor-page [id^="alm-experience-"],
body.elementor-page [id^="alm-experience-"] .alm-v6-clean,
body.elementor-page [id^="alm-experience-"] .alm-card,
body.elementor-page [id^="alm-experience-"] .alm-cta-card {
  --width: 100% !important;
  --min-height: initial !important;
  --flex-basis: auto !important;
  --flex-grow: 0 !important;
  --flex-shrink: 1 !important;
  --container-widget-width: 100% !important;
  --container-widget-flex-grow: 1 !important;
  min-width: 0 !important;
}

body:has(#alm-experience-hero) .site-main,
body:has(#alm-experience-hero) main,
body:has(#alm-experience-hero) article,
body:has(#alm-experience-hero) .page-content,
body:has(#alm-experience-hero) .entry-content,
body:has(#alm-experience-hero) .elementor-shortcode,
body:has(#alm-experience-hero) .elementor-widget-shortcode,
body:has(#alm-experience-hero) .elementor-widget-shortcode .elementor-widget-container {
  width: 100% !important;
  max-width: none !important;
  padding-left: 0 !important;
  padding-right: 0 !important;
  margin-left: 0 !important;
  margin-right: 0 !important;
  overflow: visible !important;
}

body:has(#alm-experience-hero) .entry-content > .elementor,
body:has(#alm-experience-hero) .page-content > .elementor,
body:has(#alm-experience-hero) .elementor-shortcode > .elementor {
  width: 100vw !important;
  max-width: 100vw !important;
  margin-left: calc(50% - 50vw) !important;
  margin-right: calc(50% - 50vw) !important;
}

#alm-experience-hero,
#alm-experience-intro,
#alm-experience-modes,
#alm-experience-visual,
#alm-experience-feeling,
#alm-experience-guests,
#alm-experience-partners,
#alm-experience-spots,
#alm-experience-final-cta {
  position: relative;
  width: 100% !important;
  max-width: none !important;
  overflow: hidden;
  padding-left: clamp(28px, 5vw, 72px) !important;
  padding-right: clamp(28px, 5vw, 72px) !important;
}

#alm-experience-hero > .e-con-inner,
#alm-experience-intro > .e-con-inner,
#alm-experience-modes > .e-con-inner,
#alm-experience-visual > .e-con-inner,
#alm-experience-feeling > .e-con-inner,
#alm-experience-guests > .e-con-inner,
#alm-experience-partners > .e-con-inner,
#alm-experience-spots > .e-con-inner,
#alm-experience-final-cta > .e-con-inner {
  width: 100% !important;
  max-width: min(var(--alm-max), calc(100vw - 96px)) !important;
  margin-left: auto !important;
  margin-right: auto !important;
}

#alm-experience-modes > .e-con-inner,
#alm-experience-feeling > .e-con-inner,
#alm-experience-partners > .e-con-inner,
#alm-experience-spots > .e-con-inner,
#alm-experience-final-cta > .e-con-inner {
  max-width: min(1500px, calc(100vw - 96px)) !important;
}

#alm-experience-modes,
#alm-experience-visual,
#alm-experience-feeling,
#alm-experience-guests,
#alm-experience-partners,
#alm-experience-spots,
#alm-experience-final-cta {
  padding-top: clamp(84px, 8vw, 132px) !important;
  padding-bottom: clamp(84px, 8vw, 132px) !important;
}

#alm-experience-hero {
  padding-top: clamp(52px, 5vw, 86px) !important;
  padding-bottom: clamp(64px, 7vw, 112px) !important;
}

#alm-experience-intro {
  padding-top: clamp(54px, 6vw, 96px) !important;
  padding-bottom: clamp(72px, 7vw, 116px) !important;
}

#alm-experience-intro,
#alm-experience-feeling,
#alm-experience-spots {
  background: rgba(251, 248, 241, 0.72) !important;
}

#alm-experience-visual,
#alm-experience-guests {
  background:
    radial-gradient(circle at 12% 20%, rgba(56, 198, 217, 0.14), transparent 28%),
    linear-gradient(180deg, rgba(9, 43, 61, 0.025), rgba(56, 198, 217, 0.05)) !important;
}

#alm-experience-hero > .e-con-inner,
#alm-experience-visual > .e-con-inner,
#alm-experience-guests > .e-con-inner {
  display: grid !important;
  grid-template-columns: minmax(0, 1.03fr) minmax(320px, 0.97fr) !important;
  gap: clamp(44px, 5vw, 84px) !important;
  align-items: center !important;
}

#alm-experience-visual > .e-con-inner {
  grid-template-columns: minmax(320px, 1fr) minmax(0, 0.9fr) !important;
}

#alm-experience-guests > .e-con-inner {
  grid-template-columns: minmax(0, 0.82fr) minmax(360px, 1.18fr) !important;
}

#alm-experience-hero h1,
#alm-experience-intro h2,
#alm-experience-modes h2,
#alm-experience-visual h2,
#alm-experience-feeling h2,
#alm-experience-guests h2,
#alm-experience-partners h2,
#alm-experience-spots h2,
#alm-experience-final-cta h2 {
  color: var(--alm-navy) !important;
  letter-spacing: -0.035em !important;
  line-height: 1.02 !important;
  margin: 0 !important;
  text-wrap: balance;
}

#alm-experience-hero h1 {
  max-width: 720px;
  font-size: clamp(4rem, 6.6vw, 7.2rem) !important;
}

#alm-experience-intro h2,
#alm-experience-modes h2,
#alm-experience-visual h2,
#alm-experience-feeling h2,
#alm-experience-guests h2,
#alm-experience-partners h2,
#alm-experience-spots h2,
#alm-experience-final-cta h2 {
  max-width: 940px;
  font-size: clamp(2.65rem, 4.8vw, 5.3rem) !important;
}

#alm-experience-hero p,
#alm-experience-intro p,
#alm-experience-modes p,
#alm-experience-visual p,
#alm-experience-feeling p,
#alm-experience-guests p,
#alm-experience-partners p,
#alm-experience-spots p,
#alm-experience-final-cta p {
  color: var(--alm-muted) !important;
  font-size: clamp(1rem, 1.1vw, 1.14rem) !important;
  line-height: 1.72 !important;
  overflow-wrap: normal !important;
  word-break: normal !important;
  hyphens: none !important;
}

#alm-experience-hero-copy,
#alm-experience-intro-copy,
#alm-experience-modes-copy,
#alm-experience-visual-copy,
#alm-experience-feeling-copy,
#alm-experience-guests-copy,
#alm-experience-partners-copy,
#alm-experience-spots-copy {
  display: flex !important;
  flex-direction: column !important;
  align-items: flex-start !important;
  justify-content: flex-start !important;
  gap: 0 !important;
  min-width: 0 !important;
}

#alm-experience-hero-media,
#alm-experience-visual-media {
  min-height: clamp(420px, 42vw, 560px) !important;
  border-radius: 34px !important;
  border: 1px dashed rgba(56, 198, 217, 0.6) !important;
  background:
    radial-gradient(circle at 18% 20%, rgba(56, 198, 217, 0.18), transparent 35%),
    linear-gradient(180deg, rgba(255, 255, 255, 0.55), rgba(255, 255, 255, 0.3)) !important;
  padding: 28px !important;
  box-shadow: var(--alm-shadow-soft) !important;
  display: flex !important;
  flex-direction: column !important;
  justify-content: flex-start !important;
}

#alm-experience-visual-media img,
#alm-experience-hero-media video,
#alm-experience-hero-media .elementor-video {
  width: 100% !important;
  border-radius: 18px !important;
  overflow: hidden !important;
  box-shadow: 0 18px 46px rgba(9, 43, 61, 0.12) !important;
}

#alm-experience-trust-pill {
  width: 100% !important;
  max-width: calc(var(--alm-max) - 140px) !important;
  margin-top: 34px !important;
  background: rgba(255, 255, 255, 0.82) !important;
  border: 1px solid var(--alm-line) !important;
  border-radius: 999px !important;
  padding: 18px 28px !important;
  box-shadow: var(--alm-shadow-soft) !important;
  text-align: center !important;
}

#alm-experience-trust-pill p {
  margin: 0 !important;
  color: var(--alm-navy) !important;
  font-size: 1rem !important;
  font-weight: 700 !important;
  line-height: 1.5 !important;
}

#alm-experience-mode-grid > .e-con-inner,
#alm-experience-mode-grid:not(.e-con-boxed),
#alm-experience-spot-grid > .e-con-inner,
#alm-experience-spot-grid:not(.e-con-boxed) {
  width: 100% !important;
  display: grid !important;
  grid-template-columns: repeat(4, minmax(220px, 1fr)) !important;
  gap: 28px !important;
  align-items: stretch !important;
}

#alm-experience-feeling-grid > .e-con-inner,
#alm-experience-guest-grid > .e-con-inner,
#alm-experience-partner-grid > .e-con-inner,
#alm-experience-feeling-grid:not(.e-con-boxed),
#alm-experience-guest-grid:not(.e-con-boxed),
#alm-experience-partner-grid:not(.e-con-boxed) {
  width: 100% !important;
  display: grid !important;
  grid-template-columns: repeat(3, minmax(260px, 1fr)) !important;
  gap: 28px !important;
  align-items: stretch !important;
}

#alm-experience-mode-grid,
#alm-experience-feeling-grid,
#alm-experience-guest-grid,
#alm-experience-partner-grid,
#alm-experience-spot-grid {
  margin-top: 42px !important;
}

#alm-experience-mode-grid > .e-con-inner > .elementor-element,
#alm-experience-feeling-grid > .e-con-inner > .elementor-element,
#alm-experience-guest-grid > .e-con-inner > .elementor-element,
#alm-experience-partner-grid > .e-con-inner > .elementor-element,
#alm-experience-spot-grid > .e-con-inner > .elementor-element {
  width: 100% !important;
  max-width: 100% !important;
  min-width: 0 !important;
  justify-self: stretch !important;
  align-self: stretch !important;
}

#alm-experience-mode-grid .alm-card,
#alm-experience-feeling-grid .alm-card,
#alm-experience-guest-grid .alm-card,
#alm-experience-partner-grid .alm-card,
#alm-experience-spot-grid .alm-card {
  position: relative !important;
  width: 100% !important;
  max-width: 100% !important;
  min-width: 0 !important;
  min-height: 270px !important;
  background: rgba(255, 255, 255, 0.84) !important;
  border: 1px solid var(--alm-line) !important;
  border-top: 4px solid rgba(56, 198, 217, 0.85) !important;
  border-radius: 22px !important;
  box-shadow: 0 10px 24px rgba(9, 43, 61, 0.07) !important;
  overflow: hidden !important;
  padding: 32px 28px !important;
  display: flex !important;
  flex-direction: column !important;
  align-items: flex-start !important;
  justify-content: flex-start !important;
  text-align: left !important;
  transition: transform 220ms ease, box-shadow 220ms ease, border-color 220ms ease, background-color 220ms ease !important;
  will-change: transform;
}

#alm-experience-mode-grid .alm-card:hover,
#alm-experience-feeling-grid .alm-card:hover,
#alm-experience-guest-grid .alm-card:hover,
#alm-experience-partner-grid .alm-card:hover,
#alm-experience-spot-grid .alm-card:hover {
  transform: translateY(-7px) scale(1.012) !important;
  box-shadow: 0 26px 62px rgba(9, 43, 61, 0.14) !important;
  border-color: rgba(56, 198, 217, 0.58) !important;
  background: rgba(255, 255, 255, 0.94) !important;
}

#alm-experience-mode-grid .alm-card__title,
#alm-experience-feeling-grid .alm-card__title,
#alm-experience-guest-grid .alm-card__title,
#alm-experience-partner-grid .alm-card__title,
#alm-experience-spot-grid .alm-card__title,
#alm-experience-mode-grid .alm-card__title h3,
#alm-experience-feeling-grid .alm-card__title h3,
#alm-experience-guest-grid .alm-card__title h3,
#alm-experience-partner-grid .alm-card__title h3,
#alm-experience-spot-grid .alm-card__title h3 {
  margin: 0 0 14px !important;
  color: var(--alm-navy) !important;
  font-size: clamp(1.16rem, 1.35vw, 1.48rem) !important;
  line-height: 1.24 !important;
  letter-spacing: -0.01em !important;
}

#alm-experience-mode-grid .alm-card__text p,
#alm-experience-feeling-grid .alm-card__text p,
#alm-experience-guest-grid .alm-card__text p,
#alm-experience-partner-grid .alm-card__text p,
#alm-experience-spot-grid .alm-card__text p {
  color: var(--alm-muted) !important;
  font-size: clamp(0.98rem, 0.95vw, 1.08rem) !important;
  line-height: 1.62 !important;
}

#alm-experience-final-cta-grid,
#alm-experience-final-cta-grid > .e-con-inner {
  display: grid !important;
  grid-template-columns: 1fr 1fr !important;
  gap: 24px !important;
  width: 100% !important;
}

#alm-experience-final-cta .alm-cta-card {
  min-height: 300px !important;
  padding: clamp(34px, 4vw, 54px) !important;
  display: flex !important;
  flex-direction: column !important;
  align-items: flex-start !important;
  justify-content: space-between !important;
}

#alm-experience-final-cta .alm-cta-card--dark {
  background: var(--alm-navy) !important;
}

#alm-experience-final-cta .alm-cta-card--dark h2,
#alm-experience-final-cta .alm-cta-card--dark p {
  color: var(--alm-white) !important;
}

#alm-experience-hero-cta-row,
#alm-experience-visual-cta-row,
#alm-experience-partner-cta-row {
  display: flex !important;
  flex-wrap: wrap !important;
  align-items: center !important;
  gap: 14px !important;
  width: auto !important;
  margin-top: 30px !important;
}

@media (max-width: 1180px) {
  #alm-experience-mode-grid > .e-con-inner,
  #alm-experience-mode-grid:not(.e-con-boxed),
  #alm-experience-spot-grid > .e-con-inner,
  #alm-experience-spot-grid:not(.e-con-boxed) {
    grid-template-columns: repeat(2, minmax(260px, 1fr)) !important;
  }

  #alm-experience-hero > .e-con-inner,
  #alm-experience-visual > .e-con-inner,
  #alm-experience-guests > .e-con-inner {
    grid-template-columns: 1fr !important;
    gap: 44px !important;
  }
}

@media (max-width: 980px) {
  body:has(#alm-experience-hero) .site-main,
  body:has(#alm-experience-hero) main,
  body:has(#alm-experience-hero) article,
  body:has(#alm-experience-hero) .page-content,
  body:has(#alm-experience-hero) .entry-content,
  body:has(#alm-experience-hero) .elementor-shortcode,
  body:has(#alm-experience-hero) .elementor-widget-shortcode,
  body:has(#alm-experience-hero) .elementor-widget-shortcode .elementor-widget-container {
    width: 100vw !important;
    max-width: 100vw !important;
    margin-left: calc(50% - 50vw) !important;
    margin-right: calc(50% - 50vw) !important;
    padding-left: 0 !important;
    padding-right: 0 !important;
    overflow-x: hidden !important;
  }

  #alm-experience-hero,
  #alm-experience-intro,
  #alm-experience-modes,
  #alm-experience-visual,
  #alm-experience-feeling,
  #alm-experience-guests,
  #alm-experience-partners,
  #alm-experience-spots,
  #alm-experience-final-cta {
    width: 100% !important;
    max-width: 100% !important;
    padding-left: 22px !important;
    padding-right: 22px !important;
  }

  #alm-experience-hero > .e-con-inner,
  #alm-experience-intro > .e-con-inner,
  #alm-experience-modes > .e-con-inner,
  #alm-experience-visual > .e-con-inner,
  #alm-experience-feeling > .e-con-inner,
  #alm-experience-guests > .e-con-inner,
  #alm-experience-partners > .e-con-inner,
  #alm-experience-spots > .e-con-inner,
  #alm-experience-final-cta > .e-con-inner,
  #alm-experience-mode-grid,
  #alm-experience-feeling-grid,
  #alm-experience-guest-grid,
  #alm-experience-partner-grid,
  #alm-experience-spot-grid,
  #alm-experience-mode-grid > .e-con-inner,
  #alm-experience-feeling-grid > .e-con-inner,
  #alm-experience-guest-grid > .e-con-inner,
  #alm-experience-partner-grid > .e-con-inner,
  #alm-experience-spot-grid > .e-con-inner,
  #alm-experience-final-cta-grid,
  #alm-experience-final-cta-grid > .e-con-inner {
    display: flex !important;
    flex-direction: column !important;
    align-items: stretch !important;
    justify-content: flex-start !important;
    width: 100% !important;
    max-width: 100% !important;
    min-width: 0 !important;
    gap: 18px !important;
    margin-left: 0 !important;
    margin-right: 0 !important;
  }

  #alm-experience-hero-copy,
  #alm-experience-intro-copy,
  #alm-experience-modes-copy,
  #alm-experience-visual-copy,
  #alm-experience-feeling-copy,
  #alm-experience-guests-copy,
  #alm-experience-partners-copy,
  #alm-experience-spots-copy,
  #alm-experience-hero-media,
  #alm-experience-visual-media,
  #alm-experience-mode-grid .alm-card,
  #alm-experience-feeling-grid .alm-card,
  #alm-experience-guest-grid .alm-card,
  #alm-experience-partner-grid .alm-card,
  #alm-experience-spot-grid .alm-card,
  #alm-experience-final-cta .alm-cta-card {
    width: 100% !important;
    max-width: 100% !important;
    min-width: 0 !important;
    flex: 0 0 auto !important;
    flex-basis: auto !important;
    align-self: stretch !important;
    justify-self: stretch !important;
  }

  #alm-experience-hero-cta-row,
  #alm-experience-visual-cta-row,
  #alm-experience-partner-cta-row {
    display: flex !important;
    flex-direction: column !important;
    align-items: center !important;
    justify-content: flex-start !important;
    gap: 12px !important;
    width: 100% !important;
    max-width: 100% !important;
    min-width: 0 !important;
  }

  #alm-experience-hero-cta-row .elementor-widget-button,
  #alm-experience-visual-cta-row .elementor-widget-button,
  #alm-experience-partner-cta-row .elementor-widget-button {
    width: min(100%, 280px) !important;
    max-width: 280px !important;
    min-width: 220px !important;
    flex: 0 0 auto !important;
    align-self: center !important;
  }

  #alm-experience-hero-cta-row a.elementor-button,
  #alm-experience-visual-cta-row a.elementor-button,
  #alm-experience-partner-cta-row a.elementor-button,
  #alm-experience-final-cta a.elementor-button {
    display: inline-flex !important;
    align-items: center !important;
    justify-content: center !important;
    gap: 0.55rem !important;
    width: 100% !important;
    max-width: 280px !important;
    min-width: 220px !important;
    min-height: 54px !important;
    height: auto !important;
    border-radius: 999px !important;
    padding: 15px 22px !important;
    white-space: normal !important;
    text-align: center !important;
    line-height: 1.15 !important;
  }
}

@media (max-width: 767px) {
  #alm-experience-hero,
  #alm-experience-intro,
  #alm-experience-modes,
  #alm-experience-visual,
  #alm-experience-feeling,
  #alm-experience-guests,
  #alm-experience-partners,
  #alm-experience-spots,
  #alm-experience-final-cta {
    padding-left: 22px !important;
    padding-right: 22px !important;
  }

  #alm-experience-hero {
    padding-top: 40px !important;
    padding-bottom: 56px !important;
  }

  #alm-experience-intro,
  #alm-experience-modes,
  #alm-experience-visual,
  #alm-experience-feeling,
  #alm-experience-guests,
  #alm-experience-partners,
  #alm-experience-spots,
  #alm-experience-final-cta {
    padding-top: 66px !important;
    padding-bottom: 74px !important;
  }

  #alm-experience-hero h1,
  #alm-experience-intro h2,
  #alm-experience-modes h2,
  #alm-experience-visual h2,
  #alm-experience-feeling h2,
  #alm-experience-guests h2,
  #alm-experience-partners h2,
  #alm-experience-spots h2,
  #alm-experience-final-cta h2 {
    max-width: 100% !important;
    font-size: clamp(2.35rem, 10.6vw, 3.45rem) !important;
    line-height: 1.04 !important;
  }

  #alm-experience-hero p,
  #alm-experience-intro p,
  #alm-experience-modes p,
  #alm-experience-visual p,
  #alm-experience-feeling p,
  #alm-experience-guests p,
  #alm-experience-partners p,
  #alm-experience-spots p,
  #alm-experience-final-cta p,
  #alm-experience-mode-grid .alm-card__text p,
  #alm-experience-feeling-grid .alm-card__text p,
  #alm-experience-guest-grid .alm-card__text p,
  #alm-experience-partner-grid .alm-card__text p,
  #alm-experience-spot-grid .alm-card__text p {
    max-width: 100% !important;
    font-size: 1rem !important;
    line-height: 1.65 !important;
  }

  #alm-experience-hero-media,
  #alm-experience-visual-media {
    min-height: 320px !important;
    padding: 22px !important;
    border-radius: 26px !important;
  }

  #alm-experience-trust-pill {
    border-radius: 24px !important;
    padding: 18px !important;
  }

  #alm-experience-mode-grid .alm-card,
  #alm-experience-feeling-grid .alm-card,
  #alm-experience-guest-grid .alm-card,
  #alm-experience-partner-grid .alm-card,
  #alm-experience-spot-grid .alm-card {
    min-height: auto !important;
    padding: 28px 24px !important;
  }

  #alm-experience-final-cta .alm-cta-card {
    min-height: auto !important;
    margin-bottom: 22px !important;
  }
}

/* =========================================================
   ALMARA Experience Page Add-on — v1.1 PREMIUM CARD FIX
   Date: 2026-05-02
   Purpose:
   - restore premium card visuals independent of Elementor wrappers
   - fix DE card clipping in guest / partner / spots sections
   - keep Home FINAL FREEZE untouched
   ========================================================= */

body:has(#alm-experience-hero) {
  background: var(--alm-sand) !important;
}

/* Hard reset for Experience grids: Elementor sometimes keeps imported
   flex widths on container children. We force reliable grid behavior. */
body.elementor-page #alm-experience-mode-grid,
body.elementor-page #alm-experience-feeling-grid,
body.elementor-page #alm-experience-guest-grid,
body.elementor-page #alm-experience-partner-grid,
body.elementor-page #alm-experience-spot-grid,
body.elementor-page #alm-experience-final-cta-grid {
  width: 100% !important;
  max-width: 100% !important;
  min-width: 0 !important;
  margin-left: 0 !important;
  margin-right: 0 !important;
}

body.elementor-page #alm-experience-mode-grid > .e-con-inner,
body.elementor-page #alm-experience-mode-grid:not(.e-con-boxed),
body.elementor-page #alm-experience-feeling-grid > .e-con-inner,
body.elementor-page #alm-experience-feeling-grid:not(.e-con-boxed),
body.elementor-page #alm-experience-guest-grid > .e-con-inner,
body.elementor-page #alm-experience-guest-grid:not(.e-con-boxed),
body.elementor-page #alm-experience-partner-grid > .e-con-inner,
body.elementor-page #alm-experience-partner-grid:not(.e-con-boxed),
body.elementor-page #alm-experience-spot-grid > .e-con-inner,
body.elementor-page #alm-experience-spot-grid:not(.e-con-boxed),
body.elementor-page #alm-experience-final-cta-grid > .e-con-inner,
body.elementor-page #alm-experience-final-cta-grid:not(.e-con-boxed) {
  display: grid !important;
  width: 100% !important;
  max-width: 100% !important;
  min-width: 0 !important;
  align-items: stretch !important;
  justify-content: stretch !important;
  grid-auto-flow: row !important;
}

body.elementor-page #alm-experience-mode-grid > .e-con-inner,
body.elementor-page #alm-experience-mode-grid:not(.e-con-boxed),
body.elementor-page #alm-experience-spot-grid > .e-con-inner,
body.elementor-page #alm-experience-spot-grid:not(.e-con-boxed) {
  grid-template-columns: repeat(4, minmax(0, 1fr)) !important;
  gap: clamp(22px, 2.2vw, 34px) !important;
}

body.elementor-page #alm-experience-feeling-grid > .e-con-inner,
body.elementor-page #alm-experience-feeling-grid:not(.e-con-boxed),
body.elementor-page #alm-experience-guest-grid > .e-con-inner,
body.elementor-page #alm-experience-guest-grid:not(.e-con-boxed),
body.elementor-page #alm-experience-partner-grid > .e-con-inner,
body.elementor-page #alm-experience-partner-grid:not(.e-con-boxed) {
  grid-template-columns: repeat(3, minmax(0, 1fr)) !important;
  gap: clamp(22px, 2.2vw, 34px) !important;
}

body.elementor-page #alm-experience-final-cta-grid > .e-con-inner,
body.elementor-page #alm-experience-final-cta-grid:not(.e-con-boxed) {
  grid-template-columns: repeat(2, minmax(0, 1fr)) !important;
  gap: clamp(24px, 3vw, 40px) !important;
}

/* Guest section must not squeeze a 3-card grid into a narrow right column.
   This fixes DE clipping and also improves EN rhythm. */
body.elementor-page #alm-experience-guests > .e-con-inner {
  display: flex !important;
  flex-direction: column !important;
  align-items: stretch !important;
  justify-content: flex-start !important;
  gap: clamp(34px, 4vw, 54px) !important;
}

body.elementor-page #alm-experience-guests-copy {
  max-width: 760px !important;
}

body.elementor-page #alm-experience-guests-copy .elementor-widget-text-editor,
body.elementor-page #alm-experience-guests-copy .elementor-widget-heading {
  max-width: 760px !important;
}

/* Premium card skin — target both .alm-card and direct Elementor children
   because Elementor import/rendering can wrap containers differently. */
body.elementor-page #alm-experience-mode-grid .alm-card,
body.elementor-page #alm-experience-feeling-grid .alm-card,
body.elementor-page #alm-experience-guest-grid .alm-card,
body.elementor-page #alm-experience-partner-grid .alm-card,
body.elementor-page #alm-experience-spot-grid .alm-card,
body.elementor-page #alm-experience-mode-grid > .e-con-inner > .elementor-element,
body.elementor-page #alm-experience-feeling-grid > .e-con-inner > .elementor-element,
body.elementor-page #alm-experience-guest-grid > .e-con-inner > .elementor-element,
body.elementor-page #alm-experience-partner-grid > .e-con-inner > .elementor-element,
body.elementor-page #alm-experience-spot-grid > .e-con-inner > .elementor-element,
body.elementor-page #alm-experience-mode-grid:not(.e-con-boxed) > .elementor-element,
body.elementor-page #alm-experience-feeling-grid:not(.e-con-boxed) > .elementor-element,
body.elementor-page #alm-experience-guest-grid:not(.e-con-boxed) > .elementor-element,
body.elementor-page #alm-experience-partner-grid:not(.e-con-boxed) > .elementor-element,
body.elementor-page #alm-experience-spot-grid:not(.e-con-boxed) > .elementor-element {
  position: relative !important;
  isolation: isolate !important;
  width: 100% !important;
  max-width: 100% !important;
  min-width: 0 !important;
  min-height: clamp(245px, 18vw, 315px) !important;
  height: auto !important;
  overflow: hidden !important;
  display: flex !important;
  flex-direction: column !important;
  align-items: flex-start !important;
  justify-content: flex-start !important;
  padding: clamp(30px, 2.6vw, 42px) clamp(26px, 2.4vw, 38px) !important;
  background:
    radial-gradient(circle at 20% 0%, rgba(56, 198, 217, 0.08), transparent 38%),
    rgba(255, 255, 255, 0.9) !important;
  border: 1px solid rgba(9, 43, 61, 0.14) !important;
  border-top: 5px solid rgba(56, 198, 217, 0.9) !important;
  border-radius: 24px !important;
  box-shadow: 0 16px 34px rgba(9, 43, 61, 0.09) !important;
  transform: translateY(0) scale(1) !important;
  transition:
    transform 220ms ease,
    box-shadow 220ms ease,
    border-color 220ms ease,
    background-color 220ms ease,
    filter 220ms ease !important;
  will-change: transform;
}

body.elementor-page #alm-experience-mode-grid .alm-card::before,
body.elementor-page #alm-experience-feeling-grid .alm-card::before,
body.elementor-page #alm-experience-guest-grid .alm-card::before,
body.elementor-page #alm-experience-partner-grid .alm-card::before,
body.elementor-page #alm-experience-spot-grid .alm-card::before,
body.elementor-page #alm-experience-mode-grid > .e-con-inner > .elementor-element::before,
body.elementor-page #alm-experience-feeling-grid > .e-con-inner > .elementor-element::before,
body.elementor-page #alm-experience-guest-grid > .e-con-inner > .elementor-element::before,
body.elementor-page #alm-experience-partner-grid > .e-con-inner > .elementor-element::before,
body.elementor-page #alm-experience-spot-grid > .e-con-inner > .elementor-element::before,
body.elementor-page #alm-experience-mode-grid:not(.e-con-boxed) > .elementor-element::before,
body.elementor-page #alm-experience-feeling-grid:not(.e-con-boxed) > .elementor-element::before,
body.elementor-page #alm-experience-guest-grid:not(.e-con-boxed) > .elementor-element::before,
body.elementor-page #alm-experience-partner-grid:not(.e-con-boxed) > .elementor-element::before,
body.elementor-page #alm-experience-spot-grid:not(.e-con-boxed) > .elementor-element::before {
  content: "";
  position: absolute;
  inset: 0;
  z-index: -1;
  background: linear-gradient(135deg, rgba(255,255,255,0.88), rgba(251,248,241,0.56)) !important;
  opacity: 0.75;
  pointer-events: none;
}

body.elementor-page #alm-experience-mode-grid .alm-card:hover,
body.elementor-page #alm-experience-feeling-grid .alm-card:hover,
body.elementor-page #alm-experience-guest-grid .alm-card:hover,
body.elementor-page #alm-experience-partner-grid .alm-card:hover,
body.elementor-page #alm-experience-spot-grid .alm-card:hover,
body.elementor-page #alm-experience-mode-grid > .e-con-inner > .elementor-element:hover,
body.elementor-page #alm-experience-feeling-grid > .e-con-inner > .elementor-element:hover,
body.elementor-page #alm-experience-guest-grid > .e-con-inner > .elementor-element:hover,
body.elementor-page #alm-experience-partner-grid > .e-con-inner > .elementor-element:hover,
body.elementor-page #alm-experience-spot-grid > .e-con-inner > .elementor-element:hover,
body.elementor-page #alm-experience-mode-grid:not(.e-con-boxed) > .elementor-element:hover,
body.elementor-page #alm-experience-feeling-grid:not(.e-con-boxed) > .elementor-element:hover,
body.elementor-page #alm-experience-guest-grid:not(.e-con-boxed) > .elementor-element:hover,
body.elementor-page #alm-experience-partner-grid:not(.e-con-boxed) > .elementor-element:hover,
body.elementor-page #alm-experience-spot-grid:not(.e-con-boxed) > .elementor-element:hover {
  transform: translateY(-8px) scale(1.012) !important;
  border-color: rgba(56, 198, 217, 0.72) !important;
  box-shadow: 0 28px 66px rgba(9, 43, 61, 0.16) !important;
  background:
    radial-gradient(circle at 18% 0%, rgba(56, 198, 217, 0.13), transparent 40%),
    rgba(255, 255, 255, 0.96) !important;
}

/* Typography inside cards: prevent tiny Elementor defaults and clipping. */
body.elementor-page [id^="alm-experience-"] .alm-card .elementor-widget,
body.elementor-page [id^="alm-experience-"] .alm-cta-card .elementor-widget {
  width: 100% !important;
  max-width: 100% !important;
  margin-block-end: 0 !important;
}

body.elementor-page [id^="alm-experience-"] .alm-card__title,
body.elementor-page [id^="alm-experience-"] .alm-card__title h3,
body.elementor-page [id^="alm-experience-"] .alm-card__title h4,
body.elementor-page [id^="alm-experience-"] .alm-card__title .elementor-heading-title {
  width: 100% !important;
  margin: 0 0 16px !important;
  color: var(--alm-navy) !important;
  font-size: clamp(1.18rem, 1.2vw, 1.52rem) !important;
  line-height: 1.22 !important;
  letter-spacing: -0.012em !important;
  overflow-wrap: normal !important;
  word-break: normal !important;
  hyphens: none !important;
}

body.elementor-page [id^="alm-experience-"] .alm-card__text,
body.elementor-page [id^="alm-experience-"] .alm-card__text p,
body.elementor-page [id^="alm-experience-"] .alm-card__text .elementor-widget-container {
  width: 100% !important;
  max-width: 100% !important;
  margin: 0 !important;
  color: var(--alm-muted) !important;
  font-size: clamp(0.98rem, 0.9vw, 1.06rem) !important;
  line-height: 1.64 !important;
  overflow-wrap: normal !important;
  word-break: normal !important;
  hyphens: none !important;
}

/* 4-column grids need slightly tighter typography so DE does not look cramped. */
body.elementor-page #alm-experience-mode-grid .alm-card__title .elementor-heading-title,
body.elementor-page #alm-experience-spot-grid .alm-card__title .elementor-heading-title {
  font-size: clamp(1.08rem, 1vw, 1.34rem) !important;
}

body.elementor-page #alm-experience-mode-grid .alm-card__text p,
body.elementor-page #alm-experience-spot-grid .alm-card__text p {
  font-size: clamp(0.94rem, 0.82vw, 1rem) !important;
  line-height: 1.58 !important;
}

/* Give section copy controlled width, but keep grids full width. */
body.elementor-page #alm-experience-modes-copy,
body.elementor-page #alm-experience-feeling-copy,
body.elementor-page #alm-experience-partners-copy,
body.elementor-page #alm-experience-spots-copy {
  max-width: 980px !important;
}

body.elementor-page #alm-experience-modes-copy + #alm-experience-mode-grid,
body.elementor-page #alm-experience-feeling-copy + #alm-experience-feeling-grid,
body.elementor-page #alm-experience-partners-copy + #alm-experience-partner-grid,
body.elementor-page #alm-experience-spots-copy + #alm-experience-spot-grid {
  margin-top: clamp(38px, 4vw, 58px) !important;
}

/* Partner and final CTA cards: more premium, stronger contrast. */
body.elementor-page #alm-experience-final-cta .alm-cta-card,
body.elementor-page #alm-experience-final-cta-grid > .e-con-inner > .elementor-element,
body.elementor-page #alm-experience-final-cta-grid:not(.e-con-boxed) > .elementor-element {
  position: relative !important;
  min-height: clamp(300px, 22vw, 390px) !important;
  overflow: hidden !important;
  padding: clamp(36px, 4vw, 62px) !important;
  border-radius: 28px !important;
  border: 1px solid rgba(9, 43, 61, 0.14) !important;
  box-shadow: 0 20px 48px rgba(9, 43, 61, 0.11) !important;
  display: flex !important;
  flex-direction: column !important;
  align-items: flex-start !important;
  justify-content: space-between !important;
}

body.elementor-page #alm-experience-final-cta .alm-cta-card--dark {
  background:
    radial-gradient(circle at 90% 0%, rgba(56, 198, 217, 0.18), transparent 38%),
    var(--alm-navy) !important;
}

body.elementor-page #alm-experience-final-cta .alm-cta-card--light {
  background:
    radial-gradient(circle at 12% 0%, rgba(56, 198, 217, 0.09), transparent 36%),
    rgba(255, 255, 255, 0.84) !important;
}

body.elementor-page #alm-experience-final-cta .alm-cta-card h2,
body.elementor-page #alm-experience-final-cta .alm-cta-card .elementor-heading-title {
  font-size: clamp(2.1rem, 3.6vw, 4.25rem) !important;
  line-height: 1.02 !important;
}

/* Ensure the button system also hits Experience final CTA buttons. */
body.elementor-page [id^="alm-experience-"] .alm-button .elementor-button {
  min-height: 54px !important;
  padding: 0 24px !important;
  border-radius: 999px !important;
  display: inline-flex !important;
  align-items: center !important;
  justify-content: center !important;
  gap: 10px !important;
  font-size: 0.98rem !important;
  font-weight: 700 !important;
  box-shadow: var(--alm-shadow-soft) !important;
  text-decoration: none !important;
  white-space: nowrap !important;
  transition:
    transform 180ms ease,
    box-shadow 180ms ease,
    background-color 180ms ease,
    color 180ms ease !important;
}

body.elementor-page [id^="alm-experience-"] .alm-button .elementor-button:hover {
  transform: translateY(-3px) !important;
  box-shadow: 0 22px 44px rgba(9, 43, 61, 0.18) !important;
}

body.elementor-page [id^="alm-experience-"] .alm-button--primary .elementor-button {
  background: var(--alm-navy) !important;
  color: var(--alm-white) !important;
}

body.elementor-page [id^="alm-experience-"] .alm-button--primary .elementor-button:hover {
  background: var(--alm-blue) !important;
}

body.elementor-page [id^="alm-experience-"] .alm-button--secondary .elementor-button {
  background: rgba(255, 255, 255, 0.86) !important;
  color: var(--alm-navy) !important;
  border: 1px solid var(--alm-line) !important;
}

/* Desktop / laptop tuning */
@media (max-width: 1320px) {
  body.elementor-page #alm-experience-mode-grid > .e-con-inner,
  body.elementor-page #alm-experience-mode-grid:not(.e-con-boxed),
  body.elementor-page #alm-experience-spot-grid > .e-con-inner,
  body.elementor-page #alm-experience-spot-grid:not(.e-con-boxed) {
    grid-template-columns: repeat(2, minmax(0, 1fr)) !important;
  }
}

@media (max-width: 1180px) {
  body.elementor-page #alm-experience-hero > .e-con-inner,
  body.elementor-page #alm-experience-visual > .e-con-inner,
  body.elementor-page #alm-experience-guests > .e-con-inner {
    display: flex !important;
    flex-direction: column !important;
    align-items: stretch !important;
    gap: 44px !important;
  }

  body.elementor-page #alm-experience-feeling-grid > .e-con-inner,
  body.elementor-page #alm-experience-feeling-grid:not(.e-con-boxed),
  body.elementor-page #alm-experience-guest-grid > .e-con-inner,
  body.elementor-page #alm-experience-guest-grid:not(.e-con-boxed),
  body.elementor-page #alm-experience-partner-grid > .e-con-inner,
  body.elementor-page #alm-experience-partner-grid:not(.e-con-boxed) {
    grid-template-columns: repeat(2, minmax(0, 1fr)) !important;
  }
}

@media (max-width: 980px) {
  body.elementor-page #alm-experience-mode-grid > .e-con-inner,
  body.elementor-page #alm-experience-mode-grid:not(.e-con-boxed),
  body.elementor-page #alm-experience-feeling-grid > .e-con-inner,
  body.elementor-page #alm-experience-feeling-grid:not(.e-con-boxed),
  body.elementor-page #alm-experience-guest-grid > .e-con-inner,
  body.elementor-page #alm-experience-guest-grid:not(.e-con-boxed),
  body.elementor-page #alm-experience-partner-grid > .e-con-inner,
  body.elementor-page #alm-experience-partner-grid:not(.e-con-boxed),
  body.elementor-page #alm-experience-spot-grid > .e-con-inner,
  body.elementor-page #alm-experience-spot-grid:not(.e-con-boxed),
  body.elementor-page #alm-experience-final-cta-grid > .e-con-inner,
  body.elementor-page #alm-experience-final-cta-grid:not(.e-con-boxed) {
    display: flex !important;
    flex-direction: column !important;
    align-items: stretch !important;
    justify-content: flex-start !important;
    gap: 18px !important;
  }

  body.elementor-page #alm-experience-mode-grid .alm-card,
  body.elementor-page #alm-experience-feeling-grid .alm-card,
  body.elementor-page #alm-experience-guest-grid .alm-card,
  body.elementor-page #alm-experience-partner-grid .alm-card,
  body.elementor-page #alm-experience-spot-grid .alm-card,
  body.elementor-page #alm-experience-mode-grid > .e-con-inner > .elementor-element,
  body.elementor-page #alm-experience-feeling-grid > .e-con-inner > .elementor-element,
  body.elementor-page #alm-experience-guest-grid > .e-con-inner > .elementor-element,
  body.elementor-page #alm-experience-partner-grid > .e-con-inner > .elementor-element,
  body.elementor-page #alm-experience-spot-grid > .e-con-inner > .elementor-element,
  body.elementor-page #alm-experience-mode-grid:not(.e-con-boxed) > .elementor-element,
  body.elementor-page #alm-experience-feeling-grid:not(.e-con-boxed) > .elementor-element,
  body.elementor-page #alm-experience-guest-grid:not(.e-con-boxed) > .elementor-element,
  body.elementor-page #alm-experience-partner-grid:not(.e-con-boxed) > .elementor-element,
  body.elementor-page #alm-experience-spot-grid:not(.e-con-boxed) > .elementor-element {
    min-height: auto !important;
    padding: 28px 24px !important;
    border-radius: 22px !important;
  }
}

@media (max-width: 767px) {
  body.elementor-page #alm-experience-mode-grid,
  body.elementor-page #alm-experience-feeling-grid,
  body.elementor-page #alm-experience-guest-grid,
  body.elementor-page #alm-experience-partner-grid,
  body.elementor-page #alm-experience-spot-grid {
    margin-top: 32px !important;
  }

  body.elementor-page #alm-experience-guests-copy,
  body.elementor-page #alm-experience-guests-copy .elementor-widget-text-editor,
  body.elementor-page #alm-experience-guests-copy .elementor-widget-heading {
    max-width: 100% !important;
  }

  body.elementor-page [id^="alm-experience-"] .alm-card__title,
  body.elementor-page [id^="alm-experience-"] .alm-card__title .elementor-heading-title {
    font-size: 1.42rem !important;
    line-height: 1.22 !important;
  }

  body.elementor-page [id^="alm-experience-"] .alm-card__text p,
  body.elementor-page [id^="alm-experience-"] .alm-card__text .elementor-widget-container {
    font-size: 1rem !important;
    line-height: 1.65 !important;
  }

  body.elementor-page #alm-experience-final-cta .alm-cta-card,
  body.elementor-page #alm-experience-final-cta-grid > .e-con-inner > .elementor-element,
  body.elementor-page #alm-experience-final-cta-grid:not(.e-con-boxed) > .elementor-element {
    min-height: auto !important;
    padding: 34px 28px !important;
  }

  body.elementor-page #alm-experience-final-cta .alm-cta-card h2,
  body.elementor-page #alm-experience-final-cta .alm-cta-card .elementor-heading-title {
    font-size: clamp(2.25rem, 10.2vw, 3.35rem) !important;
  }
}

/* =========================================================
   ALMARA Experience CSS — v1.4 HARD MOBILE / PREVIEW OVERRIDE
   Root cause: Elementor Library preview body may not carry body.elementor-page,
   therefore previous mobile selectors were visible in source but did not match.
   Scope: Experience templates only, no Home impact.
   ========================================================= */

/* Hide WP/Elementor Library document title above imported template */
body:has(#alm-experience-hero) h1.entry-title,
body:has(#alm-experience-hero) .entry-title,
body:has(#alm-experience-hero) .page-title,
body:has(#alm-experience-hero) .page-header,
body:has(#alm-experience-hero) header.entry-header,
body:has(#alm-experience-hero) .elementor-page-title {
  display: none !important;
  height: 0 !important;
  min-height: 0 !important;
  margin: 0 !important;
  padding: 0 !important;
  overflow: hidden !important;
}

/* Broad Experience reset independent from body.elementor-page */
body [id^="alm-experience-"],
body [id^="alm-experience-"] *,
body [id^="alm-experience-"] *::before,
body [id^="alm-experience-"] *::after {
  box-sizing: border-box !important;
}

body [id^="alm-experience-"] {
  min-width: 0 !important;
}

body [id^="alm-experience-"] .e-con,
body [id^="alm-experience-"] .e-con-inner,
body [id^="alm-experience-"] .elementor-element,
body [id^="alm-experience-"] .elementor-widget,
body [id^="alm-experience-"] .elementor-widget-container {
  min-width: 0 !important;
}

/* Experience sections: full available mobile width */
body #alm-experience-hero,
body #alm-experience-intro,
body #alm-experience-modes,
body #alm-experience-visual,
body #alm-experience-feeling,
body #alm-experience-guests,
body #alm-experience-partners,
body #alm-experience-spots,
body #alm-experience-final-cta {
  width: 100% !important;
  max-width: 100% !important;
  min-width: 0 !important;
  margin-left: 0 !important;
  margin-right: 0 !important;
  overflow: hidden !important;
}

/* Re-apply premium cards with broad selectors */
body [id^="alm-experience-"] .alm-card,
body #alm-experience-mode-grid > .e-con-inner > .elementor-element,
body #alm-experience-mode-grid:not(.e-con-boxed) > .elementor-element,
body #alm-experience-feeling-grid > .e-con-inner > .elementor-element,
body #alm-experience-feeling-grid:not(.e-con-boxed) > .elementor-element,
body #alm-experience-guest-grid > .e-con-inner > .elementor-element,
body #alm-experience-guest-grid:not(.e-con-boxed) > .elementor-element,
body #alm-experience-partner-grid > .e-con-inner > .elementor-element,
body #alm-experience-partner-grid:not(.e-con-boxed) > .elementor-element,
body #alm-experience-spot-grid > .e-con-inner > .elementor-element,
body #alm-experience-spot-grid:not(.e-con-boxed) > .elementor-element {
  position: relative !important;
  width: 100% !important;
  max-width: 100% !important;
  min-width: 0 !important;
  background: rgba(255,255,255,.86) !important;
  border: 1px solid rgba(9,43,61,.14) !important;
  border-top: 4px solid rgba(56,198,217,.88) !important;
  border-radius: 22px !important;
  box-shadow: 0 10px 24px rgba(9,43,61,.07) !important;
  overflow: visible !important;
  transition: transform 220ms ease, box-shadow 220ms ease, border-color 220ms ease, background-color 220ms ease !important;
}

body [id^="alm-experience-"] .alm-card:hover,
body #alm-experience-mode-grid > .e-con-inner > .elementor-element:hover,
body #alm-experience-feeling-grid > .e-con-inner > .elementor-element:hover,
body #alm-experience-guest-grid > .e-con-inner > .elementor-element:hover,
body #alm-experience-partner-grid > .e-con-inner > .elementor-element:hover,
body #alm-experience-spot-grid > .e-con-inner > .elementor-element:hover {
  transform: translateY(-7px) scale(1.012) !important;
  box-shadow: 0 26px 62px rgba(9,43,61,.14) !important;
  border-color: rgba(56,198,217,.58) !important;
  background: rgba(255,255,255,.95) !important;
}

/* CTA rows: never shrink to content width */
body #alm-experience-hero-cta-row,
body #alm-experience-visual-cta-row,
body #alm-experience-partner-cta-row,
body #alm-experience-final-cta .elementor-widget-button,
body #alm-experience-final-cta .alm-button {
  width: 100% !important;
  max-width: 100% !important;
  min-width: 0 !important;
  overflow: visible !important;
}

body #alm-experience-hero-cta-row,
body #alm-experience-visual-cta-row,
body #alm-experience-partner-cta-row {
  display: flex !important;
  flex-wrap: wrap !important;
  align-items: center !important;
  gap: 14px !important;
}

body [id^="alm-experience-"] .alm-button,
body [id^="alm-experience-"] .elementor-widget-button,
body [id^="alm-experience-"] .alm-button .elementor-widget-container,
body [id^="alm-experience-"] .elementor-widget-button .elementor-widget-container,
body [id^="alm-experience-"] .elementor-button-wrapper {
  min-width: 0 !important;
  overflow: visible !important;
}

body [id^="alm-experience-"] a.elementor-button,
body [id^="alm-experience-"] .alm-button .elementor-button {
  display: inline-flex !important;
  align-items: center !important;
  justify-content: center !important;
  gap: 10px !important;
  max-width: 100% !important;
  min-width: 0 !important;
  min-height: 54px !important;
  border-radius: 999px !important;
  white-space: normal !important;
  text-align: center !important;
  line-height: 1.15 !important;
  overflow: visible !important;
}

body [id^="alm-experience-"] .elementor-button-content-wrapper,
body [id^="alm-experience-"] .elementor-button-text {
  min-width: 0 !important;
  max-width: 100% !important;
  white-space: normal !important;
  text-align: center !important;
  line-height: 1.15 !important;
  overflow: visible !important;
}

@media (max-width: 980px) {
  body:has(#alm-experience-hero) .site-main,
  body:has(#alm-experience-hero) main,
  body:has(#alm-experience-hero) article,
  body:has(#alm-experience-hero) .page-content,
  body:has(#alm-experience-hero) .entry-content,
  body:has(#alm-experience-hero) .elementor,
  body:has(#alm-experience-hero) .elementor-section-wrap,
  body:has(#alm-experience-hero) .elementor-shortcode,
  body:has(#alm-experience-hero) .elementor-widget-shortcode,
  body:has(#alm-experience-hero) .elementor-widget-shortcode .elementor-widget-container {
    width: 100% !important;
    max-width: 100% !important;
    margin-left: 0 !important;
    margin-right: 0 !important;
    padding-left: 0 !important;
    padding-right: 0 !important;
    overflow-x: hidden !important;
  }

  body #alm-experience-hero,
  body #alm-experience-intro,
  body #alm-experience-modes,
  body #alm-experience-visual,
  body #alm-experience-feeling,
  body #alm-experience-guests,
  body #alm-experience-partners,
  body #alm-experience-spots,
  body #alm-experience-final-cta {
    padding-left: 22px !important;
    padding-right: 22px !important;
  }

  body #alm-experience-hero > .e-con-inner,
  body #alm-experience-intro > .e-con-inner,
  body #alm-experience-modes > .e-con-inner,
  body #alm-experience-visual > .e-con-inner,
  body #alm-experience-feeling > .e-con-inner,
  body #alm-experience-guests > .e-con-inner,
  body #alm-experience-partners > .e-con-inner,
  body #alm-experience-spots > .e-con-inner,
  body #alm-experience-final-cta > .e-con-inner,
  body #alm-experience-mode-grid,
  body #alm-experience-mode-grid > .e-con-inner,
  body #alm-experience-feeling-grid,
  body #alm-experience-feeling-grid > .e-con-inner,
  body #alm-experience-guest-grid,
  body #alm-experience-guest-grid > .e-con-inner,
  body #alm-experience-partner-grid,
  body #alm-experience-partner-grid > .e-con-inner,
  body #alm-experience-spot-grid,
  body #alm-experience-spot-grid > .e-con-inner,
  body #alm-experience-final-cta-grid,
  body #alm-experience-final-cta-grid > .e-con-inner {
    display: flex !important;
    flex-direction: column !important;
    align-items: stretch !important;
    justify-content: flex-start !important;
    width: 100% !important;
    max-width: 100% !important;
    min-width: 0 !important;
    gap: 22px !important;
    margin-left: 0 !important;
    margin-right: 0 !important;
  }

  body #alm-experience-hero-copy,
  body #alm-experience-visual-copy,
  body #alm-experience-partners-copy,
  body #alm-experience-guests-copy,
  body [id^="alm-experience-"] .alm-copy-column,
  body [id^="alm-experience-"] .alm-card,
  body [id^="alm-experience-"] .alm-cta-card,
  body #alm-experience-mode-grid > .e-con-inner > .elementor-element,
  body #alm-experience-feeling-grid > .e-con-inner > .elementor-element,
  body #alm-experience-guest-grid > .e-con-inner > .elementor-element,
  body #alm-experience-partner-grid > .e-con-inner > .elementor-element,
  body #alm-experience-spot-grid > .e-con-inner > .elementor-element,
  body #alm-experience-final-cta-grid > .e-con-inner > .elementor-element {
    width: 100% !important;
    max-width: 100% !important;
    min-width: 0 !important;
    flex: 0 0 auto !important;
    flex-basis: auto !important;
    align-self: stretch !important;
    justify-self: stretch !important;
  }

  body #alm-experience-hero-cta-row,
  body #alm-experience-hero-cta-row > .e-con-inner,
  body #alm-experience-visual-cta-row,
  body #alm-experience-visual-cta-row > .e-con-inner,
  body #alm-experience-partner-cta-row,
  body #alm-experience-partner-cta-row > .e-con-inner {
    display: flex !important;
    flex-direction: column !important;
    align-items: center !important;
    justify-content: flex-start !important;
    width: 100% !important;
    max-width: 100% !important;
    gap: 12px !important;
    margin-left: 0 !important;
    margin-right: 0 !important;
  }

  body #alm-experience-hero-cta-row .elementor-widget-button,
  body #alm-experience-visual-cta-row .elementor-widget-button,
  body #alm-experience-partner-cta-row .elementor-widget-button,
  body #alm-experience-hero-cta-row .alm-button,
  body #alm-experience-visual-cta-row .alm-button,
  body #alm-experience-partner-cta-row .alm-button {
    width: min(100%, 280px) !important;
    max-width: 280px !important;
    min-width: 0 !important;
    align-self: center !important;
  }

  body #alm-experience-hero-cta-row a.elementor-button,
  body #alm-experience-visual-cta-row a.elementor-button,
  body #alm-experience-partner-cta-row a.elementor-button,
  body #alm-experience-hero-cta-row .alm-button .elementor-button,
  body #alm-experience-visual-cta-row .alm-button .elementor-button,
  body #alm-experience-partner-cta-row .alm-button .elementor-button {
    width: 100% !important;
    max-width: 280px !important;
    min-width: 0 !important;
    padding: 15px 18px !important;
  }

  body #alm-experience-final-cta-grid,
  body #alm-experience-final-cta-grid > .e-con-inner,
  body #alm-experience-final-cta-grid:not(.e-con-boxed) {
    display: flex !important;
    flex-direction: column !important;
    align-items: stretch !important;
    width: 100% !important;
    max-width: 100% !important;
    gap: 22px !important;
  }

  body #alm-experience-final-cta .alm-cta-card,
  body #alm-experience-final-cta-grid > .e-con-inner > .elementor-element,
  body #alm-experience-final-cta-grid:not(.e-con-boxed) > .elementor-element {
    width: 100% !important;
    max-width: 100% !important;
    min-width: 0 !important;
    padding: 34px 24px 30px !important;
    border-radius: 26px !important;
    overflow: visible !important;
  }

  body #alm-experience-final-cta .elementor-widget-button,
  body #alm-experience-final-cta .alm-button,
  body #alm-experience-final-cta .elementor-button-wrapper,
  body #alm-experience-final-cta .elementor-widget-button .elementor-widget-container,
  body #alm-experience-final-cta .alm-button .elementor-widget-container {
    width: min(100%, 280px) !important;
    max-width: 280px !important;
    min-width: 0 !important;
    align-self: flex-start !important;
    justify-self: flex-start !important;
  }

  body #alm-experience-final-cta a.elementor-button,
  body #alm-experience-final-cta .alm-button .elementor-button {
    width: 100% !important;
    max-width: 280px !important;
    min-width: 0 !important;
    padding: 15px 18px !important;
    overflow: visible !important;
  }
}

@media (max-width: 390px) {
  body #alm-experience-hero,
  body #alm-experience-intro,
  body #alm-experience-modes,
  body #alm-experience-visual,
  body #alm-experience-feeling,
  body #alm-experience-guests,
  body #alm-experience-partners,
  body #alm-experience-spots,
  body #alm-experience-final-cta {
    padding-left: 18px !important;
    padding-right: 18px !important;
  }

  body #alm-experience-final-cta .elementor-widget-button,
  body #alm-experience-final-cta .alm-button,
  body #alm-experience-final-cta .elementor-button-wrapper,
  body #alm-experience-final-cta .elementor-widget-button .elementor-widget-container,
  body #alm-experience-final-cta .alm-button .elementor-widget-container,
  body #alm-experience-final-cta a.elementor-button,
  body #alm-experience-final-cta .alm-button .elementor-button {
    width: 100% !important;
    max-width: 100% !important;
  }
}

/* =========================================================
   ALMARA Experience — v1.5 Mobile Pill Width Freeze
   Purpose: mirror the final Home CTA pill logic for Experience.
   Fixes Elementor mobile preview cases where CTA rows keep boxed
   100px inner widths and pills collapse into circles / vertical text.
   ========================================================= */

@media (max-width: 980px) {
  /* Break Elementor boxed CTA row constraints, including .e-con-inner. */
  html body #alm-experience-hero-cta-row,
  html body #alm-experience-visual-cta-row,
  html body #alm-experience-partner-cta-row,
  html body #alm-experience-final-cta .alm-cta-card .elementor-widget-button,
  html body #alm-experience-hero-cta-row > .e-con-inner,
  html body #alm-experience-visual-cta-row > .e-con-inner,
  html body #alm-experience-partner-cta-row > .e-con-inner {
    display: flex !important;
    flex-direction: column !important;
    align-items: center !important;
    justify-content: flex-start !important;
    width: 100% !important;
    max-width: 100% !important;
    min-width: 0 !important;
    flex-basis: auto !important;
    align-self: stretch !important;
    margin-left: 0 !important;
    margin-right: 0 !important;
    padding-left: 0 !important;
    padding-right: 0 !important;
    overflow: visible !important;
    gap: 12px !important;
  }

  /* Home-style mobile pill sizing: a real pill, never a tiny circle. */
  html body #alm-experience-hero-cta-row .elementor-widget-button,
  html body #alm-experience-visual-cta-row .elementor-widget-button,
  html body #alm-experience-partner-cta-row .elementor-widget-button,
  html body #alm-experience-hero-cta-row .alm-button,
  html body #alm-experience-visual-cta-row .alm-button,
  html body #alm-experience-partner-cta-row .alm-button,
  html body #alm-experience-final-cta .alm-cta-card .elementor-widget-button,
  html body #alm-experience-final-cta .alm-cta-card .alm-button {
    display: block !important;
    width: min(100%, 292px) !important;
    max-width: 292px !important;
    min-width: 232px !important;
    flex: 0 0 auto !important;
    flex-basis: auto !important;
    align-self: center !important;
    justify-self: center !important;
    margin-left: auto !important;
    margin-right: auto !important;
    overflow: visible !important;
  }

  html body #alm-experience-final-cta .alm-cta-card .elementor-widget-button,
  html body #alm-experience-final-cta .alm-cta-card .alm-button {
    align-self: flex-start !important;
    justify-self: flex-start !important;
    margin-left: 0 !important;
    margin-right: auto !important;
  }

  /* Include every Elementor wrapper because the width can sit on any layer. */
  html body #alm-experience-hero-cta-row .elementor-widget-container,
  html body #alm-experience-visual-cta-row .elementor-widget-container,
  html body #alm-experience-partner-cta-row .elementor-widget-container,
  html body #alm-experience-final-cta .alm-cta-card .elementor-widget-button .elementor-widget-container,
  html body #alm-experience-hero-cta-row .elementor-button-wrapper,
  html body #alm-experience-visual-cta-row .elementor-button-wrapper,
  html body #alm-experience-partner-cta-row .elementor-button-wrapper,
  html body #alm-experience-final-cta .alm-cta-card .elementor-button-wrapper {
    display: block !important;
    width: 100% !important;
    max-width: 100% !important;
    min-width: 0 !important;
    overflow: visible !important;
  }

  html body #alm-experience-hero-cta-row a.elementor-button,
  html body #alm-experience-visual-cta-row a.elementor-button,
  html body #alm-experience-partner-cta-row a.elementor-button,
  html body #alm-experience-final-cta .alm-cta-card a.elementor-button,
  html body #alm-experience-hero-cta-row .alm-button .elementor-button,
  html body #alm-experience-visual-cta-row .alm-button .elementor-button,
  html body #alm-experience-partner-cta-row .alm-button .elementor-button,
  html body #alm-experience-final-cta .alm-cta-card .alm-button .elementor-button {
    display: flex !important;
    width: 100% !important;
    max-width: 100% !important;
    min-width: 0 !important;
    min-height: 54px !important;
    height: auto !important;
    aspect-ratio: auto !important;
    border-radius: 999px !important;
    padding: 15px 22px !important;
    align-items: center !important;
    justify-content: center !important;
    gap: 0.55rem !important;
    white-space: nowrap !important;
    text-align: center !important;
    line-height: 1.15 !important;
    overflow: hidden !important;
  }

  html body #alm-experience-hero-cta-row .elementor-button-content-wrapper,
  html body #alm-experience-visual-cta-row .elementor-button-content-wrapper,
  html body #alm-experience-partner-cta-row .elementor-button-content-wrapper,
  html body #alm-experience-final-cta .alm-cta-card .elementor-button-content-wrapper {
    display: inline-flex !important;
    flex-direction: row !important;
    align-items: center !important;
    justify-content: center !important;
    gap: 0.55rem !important;
    width: auto !important;
    max-width: 100% !important;
    min-width: 0 !important;
    text-align: center !important;
    white-space: nowrap !important;
  }

  html body #alm-experience-hero-cta-row .elementor-button-text,
  html body #alm-experience-visual-cta-row .elementor-button-text,
  html body #alm-experience-partner-cta-row .elementor-button-text,
  html body #alm-experience-final-cta .alm-cta-card .elementor-button-text {
    display: inline-block !important;
    width: auto !important;
    max-width: 100% !important;
    min-width: 0 !important;
    margin: 0 !important;
    text-align: center !important;
    white-space: nowrap !important;
    overflow: hidden !important;
    text-overflow: clip !important;
    line-height: 1.15 !important;
  }

  html body #alm-experience-hero-cta-row .elementor-button-icon,
  html body #alm-experience-visual-cta-row .elementor-button-icon,
  html body #alm-experience-partner-cta-row .elementor-button-icon,
  html body #alm-experience-final-cta .alm-cta-card .elementor-button-icon {
    display: inline-flex !important;
    flex: 0 0 auto !important;
    align-items: center !important;
    justify-content: center !important;
    margin: 0 !important;
  }
}

@media (max-width: 390px) {
  html body #alm-experience-hero-cta-row .elementor-widget-button,
  html body #alm-experience-visual-cta-row .elementor-widget-button,
  html body #alm-experience-partner-cta-row .elementor-widget-button,
  html body #alm-experience-final-cta .alm-cta-card .elementor-widget-button,
  html body #alm-experience-hero-cta-row .alm-button,
  html body #alm-experience-visual-cta-row .alm-button,
  html body #alm-experience-partner-cta-row .alm-button,
  html body #alm-experience-final-cta .alm-cta-card .alm-button {
    width: min(100%, 286px) !important;
    max-width: 286px !important;
    min-width: 224px !important;
  }

  html body #alm-experience-hero-cta-row a.elementor-button,
  html body #alm-experience-visual-cta-row a.elementor-button,
  html body #alm-experience-partner-cta-row a.elementor-button,
  html body #alm-experience-final-cta .alm-cta-card a.elementor-button {
    padding-left: 18px !important;
    padding-right: 18px !important;
  }
}

/* =========================================================
   ALMARA Experience — v1.6 Mobile Spacing Polish / Rhythm Freeze
   Scope: mobile rhythm only, no structure or CTA-pill logic changes.
   Purpose: reduce oversized vertical gaps between copy, cards and CTAs
   after the v1.5 mobile stability fix.
   ========================================================= */

@media (max-width: 980px) {
  /* Section rhythm: still premium/airy, but less empty vertical space. */
  html body #alm-experience-hero {
    padding-top: 42px !important;
    padding-bottom: 58px !important;
  }

  html body #alm-experience-intro,
  html body #alm-experience-modes,
  html body #alm-experience-visual,
  html body #alm-experience-feeling,
  html body #alm-experience-guests,
  html body #alm-experience-partners,
  html body #alm-experience-spots,
  html body #alm-experience-final-cta {
    padding-top: 62px !important;
    padding-bottom: 64px !important;
  }

  /* Slightly calmer alternation sections. */
  html body #alm-experience-visual,
  html body #alm-experience-guests,
  html body #alm-experience-spots {
    padding-top: 58px !important;
    padding-bottom: 60px !important;
  }

  /* Inner containers should not add large Elementor gaps on mobile. */
  html body #alm-experience-hero > .e-con-inner,
  html body #alm-experience-intro > .e-con-inner,
  html body #alm-experience-modes > .e-con-inner,
  html body #alm-experience-visual > .e-con-inner,
  html body #alm-experience-feeling > .e-con-inner,
  html body #alm-experience-guests > .e-con-inner,
  html body #alm-experience-partners > .e-con-inner,
  html body #alm-experience-spots > .e-con-inner,
  html body #alm-experience-final-cta > .e-con-inner {
    gap: 28px !important;
  }

  /* Copy blocks: keep headings close to text and grids close to copy. */
  html body [id^="alm-experience-"] .alm-copy-column,
  html body #alm-experience-hero-copy,
  html body #alm-experience-visual-copy,
  html body #alm-experience-guests-copy,
  html body #alm-experience-partners-copy,
  html body #alm-experience-spots-copy {
    gap: 0 !important;
    margin-bottom: 0 !important;
  }

  html body [id^="alm-experience-"] .elementor-widget-heading,
  html body [id^="alm-experience-"] .elementor-widget-text-editor {
    margin-bottom: 0 !important;
  }

  html body [id^="alm-experience-"] .alm-kicker,
  html body [id^="alm-experience-"] .alm-eyebrow,
  html body [id^="alm-experience-"] .alm-card__eyebrow,
  html body [id^="alm-experience-"] .alm-card__eyebrow p {
    margin-bottom: 16px !important;
  }

  html body [id^="alm-experience-"] h1,
  html body [id^="alm-experience-"] h2,
  html body [id^="alm-experience-"] h3,
  html body [id^="alm-experience-"] .elementor-heading-title {
    margin-bottom: 18px !important;
  }

  html body [id^="alm-experience-"] p {
    margin-top: 0 !important;
    margin-bottom: 0 !important;
  }

  /* Card grids: closer to copy, controlled gaps between cards. */
  html body #alm-experience-mode-grid,
  html body #alm-experience-feeling-grid,
  html body #alm-experience-guest-grid,
  html body #alm-experience-partner-grid,
  html body #alm-experience-spot-grid,
  html body #alm-experience-final-cta-grid {
    margin-top: 28px !important;
    margin-bottom: 0 !important;
  }

  html body #alm-experience-mode-grid,
  html body #alm-experience-mode-grid > .e-con-inner,
  html body #alm-experience-feeling-grid,
  html body #alm-experience-feeling-grid > .e-con-inner,
  html body #alm-experience-guest-grid,
  html body #alm-experience-guest-grid > .e-con-inner,
  html body #alm-experience-partner-grid,
  html body #alm-experience-partner-grid > .e-con-inner,
  html body #alm-experience-spot-grid,
  html body #alm-experience-spot-grid > .e-con-inner {
    gap: 18px !important;
  }

  /* Cards: keep premium volume, but avoid oversized vertical tickets. */
  html body [id^="alm-experience-"] .alm-card,
  html body #alm-experience-mode-grid > .e-con-inner > .elementor-element,
  html body #alm-experience-mode-grid:not(.e-con-boxed) > .elementor-element,
  html body #alm-experience-feeling-grid > .e-con-inner > .elementor-element,
  html body #alm-experience-feeling-grid:not(.e-con-boxed) > .elementor-element,
  html body #alm-experience-guest-grid > .e-con-inner > .elementor-element,
  html body #alm-experience-guest-grid:not(.e-con-boxed) > .elementor-element,
  html body #alm-experience-partner-grid > .e-con-inner > .elementor-element,
  html body #alm-experience-partner-grid:not(.e-con-boxed) > .elementor-element,
  html body #alm-experience-spot-grid > .e-con-inner > .elementor-element,
  html body #alm-experience-spot-grid:not(.e-con-boxed) > .elementor-element {
    padding-top: 28px !important;
    padding-bottom: 28px !important;
  }

  /* Visual split: reduce the large air pocket between media, copy and CTA. */
  html body #alm-experience-visual-media,
  html body #alm-experience-hero-media {
    margin-bottom: 0 !important;
  }

  html body #alm-experience-visual-cta-row,
  html body #alm-experience-partner-cta-row,
  html body #alm-experience-hero-cta-row {
    margin-top: 26px !important;
    margin-bottom: 0 !important;
  }

  /* Partner CTA after cards: closer connection to the offer cards. */
  html body #alm-experience-partner-cta-row {
    margin-top: 30px !important;
  }

  /* Final CTA: tighten split cards without making them cramped. */
  html body #alm-experience-final-cta {
    padding-top: 56px !important;
    padding-bottom: 64px !important;
  }

  html body #alm-experience-final-cta-grid,
  html body #alm-experience-final-cta-grid > .e-con-inner {
    gap: 18px !important;
    margin-top: 0 !important;
  }

  html body #alm-experience-final-cta .alm-cta-card,
  html body #alm-experience-final-cta-grid > .e-con-inner > .elementor-element,
  html body #alm-experience-final-cta-grid:not(.e-con-boxed) > .elementor-element {
    padding-top: 32px !important;
    padding-bottom: 30px !important;
    min-height: auto !important;
  }
}

@media (max-width: 767px) {
  /* Phone rhythm: compact enough for flow, still ALMARA airy. */
  html body #alm-experience-hero {
    padding-top: 34px !important;
    padding-bottom: 50px !important;
  }

  html body #alm-experience-intro,
  html body #alm-experience-modes,
  html body #alm-experience-visual,
  html body #alm-experience-feeling,
  html body #alm-experience-guests,
  html body #alm-experience-partners,
  html body #alm-experience-spots,
  html body #alm-experience-final-cta {
    padding-top: 54px !important;
    padding-bottom: 56px !important;
  }

  html body #alm-experience-visual,
  html body #alm-experience-guests,
  html body #alm-experience-spots {
    padding-top: 50px !important;
    padding-bottom: 52px !important;
  }

  html body #alm-experience-hero > .e-con-inner,
  html body #alm-experience-intro > .e-con-inner,
  html body #alm-experience-modes > .e-con-inner,
  html body #alm-experience-visual > .e-con-inner,
  html body #alm-experience-feeling > .e-con-inner,
  html body #alm-experience-guests > .e-con-inner,
  html body #alm-experience-partners > .e-con-inner,
  html body #alm-experience-spots > .e-con-inner,
  html body #alm-experience-final-cta > .e-con-inner {
    gap: 24px !important;
  }

  html body #alm-experience-mode-grid,
  html body #alm-experience-feeling-grid,
  html body #alm-experience-guest-grid,
  html body #alm-experience-partner-grid,
  html body #alm-experience-spot-grid {
    margin-top: 24px !important;
  }

  html body #alm-experience-mode-grid,
  html body #alm-experience-mode-grid > .e-con-inner,
  html body #alm-experience-feeling-grid,
  html body #alm-experience-feeling-grid > .e-con-inner,
  html body #alm-experience-guest-grid,
  html body #alm-experience-guest-grid > .e-con-inner,
  html body #alm-experience-partner-grid,
  html body #alm-experience-partner-grid > .e-con-inner,
  html body #alm-experience-spot-grid,
  html body #alm-experience-spot-grid > .e-con-inner {
    gap: 16px !important;
  }

  html body [id^="alm-experience-"] .alm-card,
  html body #alm-experience-mode-grid > .e-con-inner > .elementor-element,
  html body #alm-experience-feeling-grid > .e-con-inner > .elementor-element,
  html body #alm-experience-guest-grid > .e-con-inner > .elementor-element,
  html body #alm-experience-partner-grid > .e-con-inner > .elementor-element,
  html body #alm-experience-spot-grid > .e-con-inner > .elementor-element {
    padding: 26px 24px !important;
  }

  html body #alm-experience-visual-cta-row,
  html body #alm-experience-partner-cta-row,
  html body #alm-experience-hero-cta-row {
    margin-top: 24px !important;
  }

  html body #alm-experience-final-cta {
    padding-top: 50px !important;
    padding-bottom: 56px !important;
  }
}

@media (max-width: 390px) {
  html body #alm-experience-intro,
  html body #alm-experience-modes,
  html body #alm-experience-visual,
  html body #alm-experience-feeling,
  html body #alm-experience-guests,
  html body #alm-experience-partners,
  html body #alm-experience-spots,
  html body #alm-experience-final-cta {
    padding-top: 48px !important;
    padding-bottom: 50px !important;
  }

  html body #alm-experience-mode-grid,
  html body #alm-experience-feeling-grid,
  html body #alm-experience-guest-grid,
  html body #alm-experience-partner-grid,
  html body #alm-experience-spot-grid {
    margin-top: 22px !important;
  }
}


/* =========================================================
   ALMARA Experience — v1.7 Mobile Horizontal Fit Freeze
   Scope: mobile containment only; keeps v1.5 pill logic + v1.6 spacing.
   Purpose: prevent Elementor preview/mobile from keeping desktop min-widths
   on headings, copy, grids, cards and trust pills.
   ========================================================= */

/* Unscoped reset: Elementor Library preview does not always expose
   body.elementor-page reliably, so these rules must target the IDs directly. */
html body [id^="alm-experience-"],
html body [id^="alm-experience-"] *,
html body [id^="alm-experience-"] *::before,
html body [id^="alm-experience-"] *::after {
  box-sizing: border-box !important;
}

html body [id^="alm-experience-"],
html body [id^="alm-experience-"] .elementor-element,
html body [id^="alm-experience-"] .e-con,
html body [id^="alm-experience-"] .e-con-inner,
html body [id^="alm-experience-"] .elementor-widget,
html body [id^="alm-experience-"] .elementor-widget-container,
html body [id^="alm-experience-"] .alm-copy-column,
html body [id^="alm-experience-"] .alm-card,
html body [id^="alm-experience-"] .alm-cta-card {
  min-width: 0 !important;
  max-width: 100% !important;
}

@media (max-width: 980px) {
  /* Hard horizontal containment for every Experience section. */
  html body #alm-experience-hero,
  html body #alm-experience-intro,
  html body #alm-experience-modes,
  html body #alm-experience-visual,
  html body #alm-experience-feeling,
  html body #alm-experience-guests,
  html body #alm-experience-partners,
  html body #alm-experience-spots,
  html body #alm-experience-final-cta {
    width: 100% !important;
    max-width: 100% !important;
    min-width: 0 !important;
    overflow-x: clip !important;
    padding-left: 22px !important;
    padding-right: 22px !important;
  }

  html body #alm-experience-hero > .e-con-inner,
  html body #alm-experience-intro > .e-con-inner,
  html body #alm-experience-modes > .e-con-inner,
  html body #alm-experience-visual > .e-con-inner,
  html body #alm-experience-feeling > .e-con-inner,
  html body #alm-experience-guests > .e-con-inner,
  html body #alm-experience-partners > .e-con-inner,
  html body #alm-experience-spots > .e-con-inner,
  html body #alm-experience-final-cta > .e-con-inner {
    width: 100% !important;
    max-width: 100% !important;
    min-width: 0 !important;
    margin-left: 0 !important;
    margin-right: 0 !important;
    padding-left: 0 !important;
    padding-right: 0 !important;
    overflow: visible !important;
  }

  /* Elementor widgets sometimes keep imported desktop width variables.
     Reset them broadly for mobile so text can wrap inside the viewport. */
  html body [id^="alm-experience-"] > .e-con-inner > .elementor-element,
  html body [id^="alm-experience-"] .elementor-widget,
  html body [id^="alm-experience-"] .elementor-widget-container,
  html body [id^="alm-experience-"] .elementor-heading-title,
  html body [id^="alm-experience-"] .elementor-widget-text-editor,
  html body [id^="alm-experience-"] .elementor-widget-text-editor .elementor-widget-container,
  html body [id^="alm-experience-"] .elementor-button-wrapper,
  html body [id^="alm-experience-"] .alm-copy-column,
  html body [id^="alm-experience-"] .alm-copy-column > .elementor-element {
    width: 100% !important;
    max-width: 100% !important;
    min-width: 0 !important;
    flex: 0 1 auto !important;
    flex-basis: auto !important;
    align-self: stretch !important;
    justify-self: stretch !important;
  }

  /* Headline and paragraph wrapping: fix clipped EN/DE headlines. */
  html body [id^="alm-experience-"] h1,
  html body [id^="alm-experience-"] h2,
  html body [id^="alm-experience-"] h3,
  html body [id^="alm-experience-"] h4,
  html body [id^="alm-experience-"] .elementor-heading-title,
  html body [id^="alm-experience-"] p,
  html body [id^="alm-experience-"] .elementor-widget-text-editor,
  html body [id^="alm-experience-"] .elementor-widget-text-editor * {
    max-width: 100% !important;
    min-width: 0 !important;
    white-space: normal !important;
    overflow-wrap: normal !important;
    word-break: normal !important;
    hyphens: none !important;
  }

  html body [id^="alm-experience-"] h1,
  html body [id^="alm-experience-"] h2,
  html body [id^="alm-experience-"] .elementor-heading-title {
    text-wrap: balance;
  }

  /* Trust pill was overflowing horizontally after spacing compression. */
  html body #alm-experience-trust-pill,
  html body #alm-experience-trust-pill > .e-con-inner,
  html body #alm-experience-trust-pill .elementor-widget,
  html body #alm-experience-trust-pill .elementor-widget-container {
    width: 100% !important;
    max-width: 100% !important;
    min-width: 0 !important;
    overflow: hidden !important;
  }

  html body #alm-experience-trust-pill p,
  html body #alm-experience-trust-pill .elementor-widget-text-editor,
  html body #alm-experience-trust-pill .elementor-widget-container {
    white-space: normal !important;
    text-align: center !important;
    overflow-wrap: normal !important;
    word-break: normal !important;
  }

  /* Grids/cards: restore full available mobile width without making cards too wide. */
  html body #alm-experience-mode-grid,
  html body #alm-experience-mode-grid > .e-con-inner,
  html body #alm-experience-feeling-grid,
  html body #alm-experience-feeling-grid > .e-con-inner,
  html body #alm-experience-guest-grid,
  html body #alm-experience-guest-grid > .e-con-inner,
  html body #alm-experience-partner-grid,
  html body #alm-experience-partner-grid > .e-con-inner,
  html body #alm-experience-spot-grid,
  html body #alm-experience-spot-grid > .e-con-inner,
  html body #alm-experience-final-cta-grid,
  html body #alm-experience-final-cta-grid > .e-con-inner {
    width: 100% !important;
    max-width: 100% !important;
    min-width: 0 !important;
    display: flex !important;
    flex-direction: column !important;
    align-items: stretch !important;
    justify-content: flex-start !important;
    overflow: visible !important;
  }

  html body #alm-experience-mode-grid .alm-card,
  html body #alm-experience-feeling-grid .alm-card,
  html body #alm-experience-guest-grid .alm-card,
  html body #alm-experience-partner-grid .alm-card,
  html body #alm-experience-spot-grid .alm-card,
  html body #alm-experience-mode-grid > .e-con-inner > .elementor-element,
  html body #alm-experience-feeling-grid > .e-con-inner > .elementor-element,
  html body #alm-experience-guest-grid > .e-con-inner > .elementor-element,
  html body #alm-experience-partner-grid > .e-con-inner > .elementor-element,
  html body #alm-experience-spot-grid > .e-con-inner > .elementor-element,
  html body #alm-experience-mode-grid:not(.e-con-boxed) > .elementor-element,
  html body #alm-experience-feeling-grid:not(.e-con-boxed) > .elementor-element,
  html body #alm-experience-guest-grid:not(.e-con-boxed) > .elementor-element,
  html body #alm-experience-partner-grid:not(.e-con-boxed) > .elementor-element,
  html body #alm-experience-spot-grid:not(.e-con-boxed) > .elementor-element {
    width: 100% !important;
    max-width: 100% !important;
    min-width: 0 !important;
    align-self: stretch !important;
    justify-self: stretch !important;
    margin-left: 0 !important;
    margin-right: 0 !important;
  }
}

@media (max-width: 767px) {
  /* Slightly reduce side padding on real phones so the content does not feel cropped. */
  html body #alm-experience-hero,
  html body #alm-experience-intro,
  html body #alm-experience-modes,
  html body #alm-experience-visual,
  html body #alm-experience-feeling,
  html body #alm-experience-guests,
  html body #alm-experience-partners,
  html body #alm-experience-spots,
  html body #alm-experience-final-cta {
    padding-left: 18px !important;
    padding-right: 18px !important;
  }

  html body [id^="alm-experience-"] h1,
  html body [id^="alm-experience-"] h2,
  html body [id^="alm-experience-"] .elementor-heading-title {
    font-size: clamp(2.1rem, 9.4vw, 3.05rem) !important;
    line-height: 1.06 !important;
    letter-spacing: -0.034em !important;
  }

  html body [id^="alm-experience-"] p,
  html body [id^="alm-experience-"] .elementor-widget-text-editor {
    font-size: 1rem !important;
    line-height: 1.62 !important;
  }
}

@media (max-width: 390px) {
  html body #alm-experience-hero,
  html body #alm-experience-intro,
  html body #alm-experience-modes,
  html body #alm-experience-visual,
  html body #alm-experience-feeling,
  html body #alm-experience-guests,
  html body #alm-experience-partners,
  html body #alm-experience-spots,
  html body #alm-experience-final-cta {
    padding-left: 16px !important;
    padding-right: 16px !important;
  }

  html body [id^="alm-experience-"] h1,
  html body [id^="alm-experience-"] h2,
  html body [id^="alm-experience-"] .elementor-heading-title {
    font-size: clamp(2rem, 8.8vw, 2.75rem) !important;
    line-height: 1.07 !important;
  }
}

/* =========================================================
   ALMARA Experience — v1.8 Mobile Typography & Rhythm Polish
   Scope: final mobile editorial polish only.
   Purpose: reduce headline dominance, remove hidden Elementor
   min-heights/gaps, bring card grids closer to copy, and keep
   EN/DE rhythm premium but more compact.
   ========================================================= */

@media (max-width: 980px) {
  /* Kill residual Elementor container height/spacing that pushes first cards too far down. */
  html body #alm-experience-hero > .e-con-inner,
  html body #alm-experience-intro > .e-con-inner,
  html body #alm-experience-modes > .e-con-inner,
  html body #alm-experience-visual > .e-con-inner,
  html body #alm-experience-feeling > .e-con-inner,
  html body #alm-experience-guests > .e-con-inner,
  html body #alm-experience-partners > .e-con-inner,
  html body #alm-experience-spots > .e-con-inner,
  html body #alm-experience-final-cta > .e-con-inner,
  html body #alm-experience-hero-copy,
  html body #alm-experience-intro-copy,
  html body #alm-experience-modes-copy,
  html body #alm-experience-visual-copy,
  html body #alm-experience-feeling-copy,
  html body #alm-experience-guests-copy,
  html body #alm-experience-partners-copy,
  html body #alm-experience-spots-copy,
  html body #alm-experience-mode-grid,
  html body #alm-experience-feeling-grid,
  html body #alm-experience-guest-grid,
  html body #alm-experience-partner-grid,
  html body #alm-experience-spot-grid,
  html body #alm-experience-mode-grid > .e-con-inner,
  html body #alm-experience-feeling-grid > .e-con-inner,
  html body #alm-experience-guest-grid > .e-con-inner,
  html body #alm-experience-partner-grid > .e-con-inner,
  html body #alm-experience-spot-grid > .e-con-inner {
    height: auto !important;
    min-height: 0 !important;
    max-height: none !important;
    align-content: flex-start !important;
    justify-content: flex-start !important;
  }

  /* More editorial, less billboard: mobile section headlines are still elegant but not oversized. */
  html body #alm-experience-intro h2,
  html body #alm-experience-modes h2,
  html body #alm-experience-visual h2,
  html body #alm-experience-feeling h2,
  html body #alm-experience-guests h2,
  html body #alm-experience-partners h2,
  html body #alm-experience-spots h2,
  html body #alm-experience-final-cta h2,
  html body [id^="alm-experience-"] .alm-section__title .elementor-heading-title,
  html body [id^="alm-experience-"] .alm-cta-card__title .elementor-heading-title {
    font-size: clamp(2.05rem, 8.4vw, 2.95rem) !important;
    line-height: 1.055 !important;
    letter-spacing: -0.034em !important;
    margin-bottom: 12px !important;
    text-wrap: balance !important;
  }

  html body #alm-experience-hero h1,
  html body #alm-experience-hero .alm-hero__title .elementor-heading-title {
    font-size: clamp(2.35rem, 9vw, 3.25rem) !important;
    line-height: 1.05 !important;
    margin-bottom: 12px !important;
  }

  html body [id^="alm-experience-"] .alm-section__lead,
  html body [id^="alm-experience-"] .alm-section__lead p,
  html body [id^="alm-experience-"] .alm-hero__lead,
  html body [id^="alm-experience-"] .alm-hero__lead p,
  html body [id^="alm-experience-"] .alm-cta-card__text,
  html body [id^="alm-experience-"] .alm-cta-card__text p {
    font-size: 1rem !important;
    line-height: 1.55 !important;
    margin: 0 !important;
  }

  /* Eyebrow closer to headline. */
  html body [id^="alm-experience-"] .alm-kicker,
  html body [id^="alm-experience-"] .alm-kicker p,
  html body [id^="alm-experience-"] .alm-eyebrow,
  html body [id^="alm-experience-"] .alm-eyebrow p {
    margin-bottom: 12px !important;
    font-size: 0.76rem !important;
    line-height: 1.35 !important;
  }

  /* Copy-to-grid rhythm: cards should appear as part of the same story, not one viewport later. */
  html body #alm-experience-mode-grid,
  html body #alm-experience-feeling-grid,
  html body #alm-experience-guest-grid,
  html body #alm-experience-partner-grid,
  html body #alm-experience-spot-grid {
    margin-top: 18px !important;
    padding-top: 0 !important;
  }

  html body #alm-experience-mode-grid > .e-con-inner,
  html body #alm-experience-feeling-grid > .e-con-inner,
  html body #alm-experience-guest-grid > .e-con-inner,
  html body #alm-experience-partner-grid > .e-con-inner,
  html body #alm-experience-spot-grid > .e-con-inner {
    gap: 14px !important;
  }

  /* Wider mobile cards/content than the Elementor preview default, without touching desktop. */
  html body #alm-experience-hero-copy,
  html body #alm-experience-intro-copy,
  html body #alm-experience-modes-copy,
  html body #alm-experience-visual-copy,
  html body #alm-experience-feeling-copy,
  html body #alm-experience-guests-copy,
  html body #alm-experience-partners-copy,
  html body #alm-experience-spots-copy,
  html body #alm-experience-mode-grid,
  html body #alm-experience-feeling-grid,
  html body #alm-experience-guest-grid,
  html body #alm-experience-partner-grid,
  html body #alm-experience-spot-grid,
  html body #alm-experience-mode-grid > .e-con-inner,
  html body #alm-experience-feeling-grid > .e-con-inner,
  html body #alm-experience-guest-grid > .e-con-inner,
  html body #alm-experience-partner-grid > .e-con-inner,
  html body #alm-experience-spot-grid > .e-con-inner {
    width: 100% !important;
    max-width: 100% !important;
    margin-left: 0 !important;
    margin-right: 0 !important;
  }

  /* Cards stay premium but shorter and more readable. */
  html body #alm-experience-mode-grid .alm-card,
  html body #alm-experience-feeling-grid .alm-card,
  html body #alm-experience-guest-grid .alm-card,
  html body #alm-experience-partner-grid .alm-card,
  html body #alm-experience-spot-grid .alm-card,
  html body #alm-experience-mode-grid > .e-con-inner > .elementor-element,
  html body #alm-experience-feeling-grid > .e-con-inner > .elementor-element,
  html body #alm-experience-guest-grid > .e-con-inner > .elementor-element,
  html body #alm-experience-partner-grid > .e-con-inner > .elementor-element,
  html body #alm-experience-spot-grid > .e-con-inner > .elementor-element {
    width: 100% !important;
    max-width: 100% !important;
    min-height: 0 !important;
    padding: 24px 24px !important;
  }

  html body [id^="alm-experience-"] .alm-card__title,
  html body [id^="alm-experience-"] .alm-card__title .elementor-heading-title,
  html body [id^="alm-experience-"] .alm-card__title h3,
  html body [id^="alm-experience-"] .alm-card__title h4 {
    font-size: clamp(1.18rem, 4.8vw, 1.44rem) !important;
    line-height: 1.18 !important;
    margin-bottom: 12px !important;
    letter-spacing: -0.012em !important;
  }

  html body [id^="alm-experience-"] .alm-card__text,
  html body [id^="alm-experience-"] .alm-card__text p {
    font-size: 0.98rem !important;
    line-height: 1.52 !important;
  }

  /* Section rhythm: reduce empty viewports while keeping the ALMARA calmness. */
  html body #alm-experience-feeling,
  html body #alm-experience-guests,
  html body #alm-experience-partners,
  html body #alm-experience-spots {
    padding-top: 46px !important;
    padding-bottom: 50px !important;
  }

  html body #alm-experience-modes,
  html body #alm-experience-visual {
    padding-top: 50px !important;
    padding-bottom: 52px !important;
  }

  html body #alm-experience-partner-cta-row {
    margin-top: 22px !important;
  }
}

@media (max-width: 767px) {
  /* Phone-specific final rhythm. */
  html body #alm-experience-hero,
  html body #alm-experience-intro,
  html body #alm-experience-modes,
  html body #alm-experience-visual,
  html body #alm-experience-feeling,
  html body #alm-experience-guests,
  html body #alm-experience-partners,
  html body #alm-experience-spots,
  html body #alm-experience-final-cta {
    padding-left: 18px !important;
    padding-right: 18px !important;
  }

  html body #alm-experience-feeling,
  html body #alm-experience-guests,
  html body #alm-experience-partners,
  html body #alm-experience-spots {
    padding-top: 42px !important;
    padding-bottom: 46px !important;
  }

  html body #alm-experience-mode-grid,
  html body #alm-experience-feeling-grid,
  html body #alm-experience-guest-grid,
  html body #alm-experience-partner-grid,
  html body #alm-experience-spot-grid {
    margin-top: 16px !important;
  }

  html body #alm-experience-intro h2,
  html body #alm-experience-modes h2,
  html body #alm-experience-visual h2,
  html body #alm-experience-feeling h2,
  html body #alm-experience-guests h2,
  html body #alm-experience-partners h2,
  html body #alm-experience-spots h2,
  html body [id^="alm-experience-"] .alm-section__title .elementor-heading-title {
    font-size: clamp(2rem, 8vw, 2.72rem) !important;
    line-height: 1.06 !important;
  }

  html body #alm-experience-final-cta h2,
  html body #alm-experience-final-cta .alm-cta-card__title .elementor-heading-title {
    font-size: clamp(1.95rem, 7.7vw, 2.62rem) !important;
  }
}

@media (max-width: 390px) {
  html body #alm-experience-hero,
  html body #alm-experience-intro,
  html body #alm-experience-modes,
  html body #alm-experience-visual,
  html body #alm-experience-feeling,
  html body #alm-experience-guests,
  html body #alm-experience-partners,
  html body #alm-experience-spots,
  html body #alm-experience-final-cta {
    padding-left: 16px !important;
    padding-right: 16px !important;
  }

  html body #alm-experience-intro h2,
  html body #alm-experience-modes h2,
  html body #alm-experience-visual h2,
  html body #alm-experience-feeling h2,
  html body #alm-experience-guests h2,
  html body #alm-experience-partners h2,
  html body #alm-experience-spots h2,
  html body [id^="alm-experience-"] .alm-section__title .elementor-heading-title {
    font-size: clamp(1.92rem, 7.5vw, 2.5rem) !important;
    line-height: 1.07 !important;
  }
}

/* =========================================================
   ALMARA Experience — v2.0 Visual Story Upgrade
   Scope: Experience EN/DE templates with visual-v2 JSON
   Purpose:
   - replace hero video placeholder with responsive still-image logic
   - add Experience Mosaic in the Above / Below / Beyond visual slot
   - keep existing v1.8 layout/card/mobile freeze untouched
   ========================================================= */

/* --- Hero media image system --- */
html body #alm-experience-hero-media.alm-experience-hero-media-card {
  gap: 16px !important;
}

html body #alm-experience-hero-media .alm-experience-hero-image,
html body #alm-experience-hero-media .alm-experience-hero-image .elementor-widget-container {
  width: 100% !important;
  max-width: 100% !important;
  min-width: 0 !important;
  margin: 0 !important;
  overflow: hidden !important;
  border-radius: 20px !important;
}

html body #alm-experience-hero-media .alm-experience-hero-image img {
  display: block !important;
  width: 100% !important;
  max-width: 100% !important;
  height: auto !important;
  aspect-ratio: 16 / 10 !important;
  object-fit: cover !important;
  object-position: 58% 52% !important;
  border-radius: 20px !important;
  box-shadow: 0 18px 46px rgba(9, 43, 61, 0.12) !important;
  background: rgba(255, 255, 255, 0.72) !important;
}

html body #alm-experience-hero-media .alm-experience-hero-image--mobile {
  display: none !important;
}

/* Hide any accidental video remnants if an older imported widget survives. */
html body #alm-experience-hero-media .elementor-widget-video:not(.alm-experience-hero-image) {
  display: none !important;
}

/* --- Experience mosaic --- */
html body #alm-experience-visual-media.alm-experience-visual-media-card {
  gap: 16px !important;
  justify-content: flex-start !important;
}

html body #alm-experience-mosaic {
  width: 100% !important;
  max-width: 100% !important;
  min-width: 0 !important;
  display: grid !important;
  grid-template-columns: minmax(0, 1.15fr) minmax(0, 0.52fr) minmax(0, 0.52fr) !important;
  grid-template-rows: minmax(0, 1fr) minmax(0, 1fr) !important;
  grid-template-areas:
    "guided active active"
    "guided underwater social" !important;
  gap: 14px !important;
  min-height: clamp(340px, 32vw, 480px) !important;
  margin-top: 0 !important;
}

html body #alm-experience-mosaic > .e-con-inner {
  display: contents !important;
}

html body #alm-experience-mosaic .alm-experience-mosaic__item {
  position: relative !important;
  width: 100% !important;
  max-width: 100% !important;
  min-width: 0 !important;
  min-height: 0 !important;
  height: 100% !important;
  margin: 0 !important;
  padding: 0 !important;
  overflow: hidden !important;
  border-radius: 18px !important;
  background: rgba(255, 255, 255, 0.72) !important;
  box-shadow: 0 12px 30px rgba(9, 43, 61, 0.09) !important;
  border: 1px solid rgba(56, 198, 217, 0.22) !important;
}

html body #alm-experience-mosaic .alm-experience-mosaic__item--guided { grid-area: guided !important; }
html body #alm-experience-mosaic .alm-experience-mosaic__item--active { grid-area: active !important; }
html body #alm-experience-mosaic .alm-experience-mosaic__item--underwater { grid-area: underwater !important; }
html body #alm-experience-mosaic .alm-experience-mosaic__item--social { grid-area: social !important; }

html body #alm-experience-mosaic .alm-experience-mosaic__item > .e-con-inner {
  display: block !important;
  width: 100% !important;
  max-width: 100% !important;
  height: 100% !important;
  min-height: 0 !important;
  margin: 0 !important;
  padding: 0 !important;
}

html body #alm-experience-mosaic .elementor-widget-image,
html body #alm-experience-mosaic .elementor-widget-container {
  width: 100% !important;
  max-width: 100% !important;
  height: 100% !important;
  min-height: 0 !important;
  margin: 0 !important;
}

html body #alm-experience-mosaic img {
  display: block !important;
  width: 100% !important;
  max-width: 100% !important;
  height: 100% !important;
  min-height: 0 !important;
  aspect-ratio: auto !important;
  object-fit: cover !important;
  border-radius: 18px !important;
  box-shadow: none !important;
  border: 0 !important;
  transform: scale(1.001) !important;
  transition: transform 260ms ease, filter 260ms ease !important;
}

html body #alm-experience-mosaic .alm-experience-mosaic__item:hover img {
  transform: scale(1.035) !important;
  filter: saturate(1.03) contrast(1.01) !important;
}

html body #alm-experience-mosaic .alm-experience-mosaic__item--guided img {
  object-position: 48% 50% !important;
}

html body #alm-experience-mosaic .alm-experience-mosaic__item--active img {
  object-position: 50% 45% !important;
}

html body #alm-experience-mosaic .alm-experience-mosaic__item--underwater img {
  object-position: 52% 44% !important;
}

html body #alm-experience-mosaic .alm-experience-mosaic__item--social img {
  object-position: 52% 50% !important;
}

/* Re-neutralize the old visual-media image rule for mosaic children. */
html body #alm-experience-visual-media #alm-experience-mosaic img {
  box-shadow: none !important;
}

@media (max-width: 1180px) {
  html body #alm-experience-mosaic {
    min-height: 420px !important;
  }

  html body #alm-experience-hero-media .alm-experience-hero-image img {
    aspect-ratio: 4 / 3 !important;
    object-position: 58% 50% !important;
  }
}

@media (max-width: 980px) {
  html body #alm-experience-hero-media.alm-experience-hero-media-card,
  html body #alm-experience-visual-media.alm-experience-visual-media-card {
    gap: 14px !important;
  }

  html body #alm-experience-mosaic {
    min-height: 390px !important;
    gap: 12px !important;
  }
}

@media (max-width: 767px) {
  /* Mobile uses the active, high-readability hero image instead of the quiet desktop still. */
  html body #alm-experience-hero-media .alm-experience-hero-image--desktop {
    display: none !important;
  }

  html body #alm-experience-hero-media .alm-experience-hero-image--mobile {
    display: block !important;
  }

  html body #alm-experience-hero-media .alm-experience-hero-image img {
    aspect-ratio: 4 / 5 !important;
    object-position: 50% 48% !important;
    border-radius: 18px !important;
  }

  /* Mobile story: one strong guided image, not a dense collage. */
  html body #alm-experience-mosaic {
    display: block !important;
    min-height: 0 !important;
    height: auto !important;
    margin-top: 0 !important;
  }

  html body #alm-experience-mosaic .alm-experience-mosaic__item {
    display: none !important;
    height: auto !important;
    min-height: 0 !important;
    border-radius: 18px !important;
  }

  html body #alm-experience-mosaic .alm-experience-mosaic__item--guided {
    display: block !important;
  }

  html body #alm-experience-mosaic .alm-experience-mosaic__item--guided img {
    height: auto !important;
    aspect-ratio: 4 / 3 !important;
    object-position: 48% 50% !important;
    border-radius: 18px !important;
  }
}

@media (max-width: 420px) {
  html body #alm-experience-hero-media .alm-experience-hero-image img {
    aspect-ratio: 1 / 1.08 !important;
    object-position: 50% 48% !important;
  }

  html body #alm-experience-mosaic .alm-experience-mosaic__item--guided img {
    aspect-ratio: 1 / 1 !important;
    object-position: 50% 50% !important;
  }
}


/* =========================================================
   ALMARA Experience — v2.3 Stable Mobile Freeze Patch
   Basis: v2.0 visual baseline (last stable visual structure)
   Purpose: do not rebuild Elementor; only stabilize mobile widths,
   CTA pills, eyebrows and rhythm. Desktop/tablet remains v2.0.
   ========================================================= */

html body:has(#alm-experience-hero) {
  overflow-x: clip !important;
}

html body [id^="alm-experience-"] .alm-kicker,
html body [id^="alm-experience-"] .alm-kicker p,
html body [id^="alm-experience-"] .alm-eyebrow,
html body [id^="alm-experience-"] .alm-eyebrow p {
  color: var(--alm-muted, rgba(4, 32, 52, 0.64)) !important;
  font-family: var(--e-global-typography-text-font-family, inherit) !important;
  font-size: clamp(0.72rem, 0.8vw, 0.82rem) !important;
  font-weight: 800 !important;
  letter-spacing: 0.16em !important;
  line-height: 1.35 !important;
  text-transform: uppercase !important;
  white-space: nowrap !important;
  word-break: keep-all !important;
  overflow-wrap: normal !important;
  margin: 0 0 14px !important;
}

@media (max-width: 767px) {
  /* Restore a real mobile content column: no narrow Elementor sub-column. */
  html body #alm-experience-hero,
  html body #alm-experience-intro,
  html body #alm-experience-modes,
  html body #alm-experience-visual,
  html body #alm-experience-feeling,
  html body #alm-experience-guests,
  html body #alm-experience-partners,
  html body #alm-experience-spots,
  html body #alm-experience-final-cta {
    width: 100% !important;
    max-width: 100% !important;
    min-width: 0 !important;
    padding-left: 18px !important;
    padding-right: 18px !important;
    overflow: hidden !important;
  }

  html body #alm-experience-hero > .e-con-inner,
  html body #alm-experience-intro > .e-con-inner,
  html body #alm-experience-modes > .e-con-inner,
  html body #alm-experience-visual > .e-con-inner,
  html body #alm-experience-feeling > .e-con-inner,
  html body #alm-experience-guests > .e-con-inner,
  html body #alm-experience-partners > .e-con-inner,
  html body #alm-experience-spots > .e-con-inner,
  html body #alm-experience-final-cta > .e-con-inner {
    width: 100% !important;
    max-width: 100% !important;
    min-width: 0 !important;
    margin-left: 0 !important;
    margin-right: 0 !important;
    padding-left: 0 !important;
    padding-right: 0 !important;
  }

  html body [id^="alm-experience-"] .e-con,
  html body [id^="alm-experience-"] .elementor-element,
  html body [id^="alm-experience-"] .elementor-widget,
  html body [id^="alm-experience-"] .elementor-widget-container {
    min-width: 0 !important;
    max-width: 100% !important;
    box-sizing: border-box !important;
  }

  html body #alm-experience-hero-copy,
  html body #alm-experience-intro-copy,
  html body #alm-experience-modes-copy,
  html body #alm-experience-visual-copy,
  html body #alm-experience-feeling-copy,
  html body #alm-experience-guests-copy,
  html body #alm-experience-partners-copy,
  html body #alm-experience-spots-copy,
  html body #alm-experience-hero-media,
  html body #alm-experience-visual-media,
  html body #alm-experience-mode-grid,
  html body #alm-experience-feeling-grid,
  html body #alm-experience-guest-grid,
  html body #alm-experience-partner-grid,
  html body #alm-experience-spot-grid,
  html body #alm-experience-final-cta-grid {
    width: 100% !important;
    max-width: 100% !important;
    min-width: 0 !important;
    align-self: stretch !important;
    justify-self: stretch !important;
  }

  /* CTA rows: center the row, but let the anchor carry the pill shape. */
  html body #alm-experience-hero-cta-row,
  html body #alm-experience-visual-cta-row,
  html body #alm-experience-partner-cta-row {
    display: flex !important;
    flex-direction: column !important;
    align-items: center !important;
    justify-content: flex-start !important;
    width: 100% !important;
    max-width: 100% !important;
    gap: 12px !important;
    margin-top: 24px !important;
    overflow: visible !important;
  }

  html body #alm-experience-hero-cta-row .elementor-widget-button,
  html body #alm-experience-visual-cta-row .elementor-widget-button,
  html body #alm-experience-partner-cta-row .elementor-widget-button,
  html body #alm-experience-final-cta .elementor-widget-button {
    width: auto !important;
    max-width: 100% !important;
    min-width: 0 !important;
    flex: 0 0 auto !important;
    align-self: center !important;
    margin-left: auto !important;
    margin-right: auto !important;
    overflow: visible !important;
  }

  html body #alm-experience-hero-cta-row .elementor-button-wrapper,
  html body #alm-experience-visual-cta-row .elementor-button-wrapper,
  html body #alm-experience-partner-cta-row .elementor-button-wrapper,
  html body #alm-experience-final-cta .elementor-button-wrapper {
    width: auto !important;
    max-width: 100% !important;
    display: flex !important;
    justify-content: center !important;
  }

  html body #alm-experience-hero-cta-row a.elementor-button,
  html body #alm-experience-visual-cta-row a.elementor-button,
  html body #alm-experience-partner-cta-row a.elementor-button,
  html body #alm-experience-final-cta a.elementor-button {
    display: inline-flex !important;
    width: auto !important;
    min-width: min(232px, calc(100vw - 56px)) !important;
    max-width: calc(100vw - 56px) !important;
    min-height: 54px !important;
    height: auto !important;
    border-radius: 999px !important;
    padding: 15px 24px !important;
    align-items: center !important;
    justify-content: center !important;
    gap: 0.55rem !important;
    white-space: nowrap !important;
    text-align: center !important;
    line-height: 1.15 !important;
    overflow: hidden !important;
  }

  html body #alm-experience-hero-cta-row .elementor-button-content-wrapper,
  html body #alm-experience-visual-cta-row .elementor-button-content-wrapper,
  html body #alm-experience-partner-cta-row .elementor-button-content-wrapper,
  html body #alm-experience-final-cta .elementor-button-content-wrapper {
    display: inline-flex !important;
    flex-direction: row !important;
    align-items: center !important;
    justify-content: center !important;
    gap: 0.55rem !important;
    width: auto !important;
    max-width: 100% !important;
    min-width: 0 !important;
    white-space: nowrap !important;
  }

  html body #alm-experience-hero-cta-row .elementor-button-text,
  html body #alm-experience-visual-cta-row .elementor-button-text,
  html body #alm-experience-partner-cta-row .elementor-button-text,
  html body #alm-experience-final-cta .elementor-button-text {
    display: inline-block !important;
    width: auto !important;
    max-width: 100% !important;
    min-width: 0 !important;
    white-space: nowrap !important;
  }

  /* Cards: one full mobile column; no mini-card rails. */
  html body #alm-experience-mode-grid,
  html body #alm-experience-feeling-grid,
  html body #alm-experience-guest-grid,
  html body #alm-experience-partner-grid,
  html body #alm-experience-spot-grid,
  html body #alm-experience-final-cta-grid,
  html body #alm-experience-mode-grid > .e-con-inner,
  html body #alm-experience-feeling-grid > .e-con-inner,
  html body #alm-experience-guest-grid > .e-con-inner,
  html body #alm-experience-partner-grid > .e-con-inner,
  html body #alm-experience-spot-grid > .e-con-inner,
  html body #alm-experience-final-cta-grid > .e-con-inner {
    display: flex !important;
    flex-direction: column !important;
    align-items: stretch !important;
    justify-content: flex-start !important;
    width: 100% !important;
    max-width: 100% !important;
    gap: 16px !important;
    margin-top: 22px !important;
  }

  html body #alm-experience-mode-grid .alm-card,
  html body #alm-experience-feeling-grid .alm-card,
  html body #alm-experience-guest-grid .alm-card,
  html body #alm-experience-partner-grid .alm-card,
  html body #alm-experience-spot-grid .alm-card,
  html body #alm-experience-final-cta .alm-cta-card {
    width: 100% !important;
    max-width: 100% !important;
    min-width: 0 !important;
    align-self: stretch !important;
    min-height: auto !important;
  }

  /* Eyebrows: same typography everywhere, no standalone dot line. */
  html body [id^="alm-experience-"] .alm-kicker,
  html body [id^="alm-experience-"] .alm-kicker p,
  html body [id^="alm-experience-"] .alm-eyebrow,
  html body [id^="alm-experience-"] .alm-eyebrow p {
    display: block !important;
    width: 100% !important;
    max-width: 100% !important;
    color: var(--alm-muted, rgba(4, 32, 52, 0.64)) !important;
    font-size: 0.74rem !important;
    font-weight: 800 !important;
    letter-spacing: 0.16em !important;
    line-height: 1.35 !important;
    text-transform: uppercase !important;
    white-space: nowrap !important;
    word-break: keep-all !important;
    overflow-wrap: normal !important;
    margin-bottom: 12px !important;
  }

  /* Mobile visual story: keep v2.0 single-image behavior and prevent empty mosaic height. */
  html body #alm-experience-mosaic {
    display: block !important;
    width: 100% !important;
    max-width: 100% !important;
    height: auto !important;
    min-height: 0 !important;
    margin: 0 !important;
    padding: 0 !important;
  }

  html body #alm-experience-mosaic .alm-experience-mosaic__item {
    display: none !important;
    height: auto !important;
    min-height: 0 !important;
  }

  html body #alm-experience-mosaic .alm-experience-mosaic__item--guided {
    display: block !important;
    width: 100% !important;
  }

  html body #alm-experience-mosaic .alm-experience-mosaic__item--guided img {
    display: block !important;
    width: 100% !important;
    max-width: 100% !important;
    height: auto !important;
    aspect-ratio: 1 / 1 !important;
    object-fit: cover !important;
    border-radius: 18px !important;
  }

  html body #alm-experience-intro,
  html body #alm-experience-modes,
  html body #alm-experience-visual,
  html body #alm-experience-feeling,
  html body #alm-experience-guests,
  html body #alm-experience-partners,
  html body #alm-experience-spots,
  html body #alm-experience-final-cta {
    padding-top: 50px !important;
    padding-bottom: 54px !important;
  }
}

@media (max-width: 390px) {
  html body #alm-experience-hero,
  html body #alm-experience-intro,
  html body #alm-experience-modes,
  html body #alm-experience-visual,
  html body #alm-experience-feeling,
  html body #alm-experience-guests,
  html body #alm-experience-partners,
  html body #alm-experience-spots,
  html body #alm-experience-final-cta {
    padding-left: 16px !important;
    padding-right: 16px !important;
  }

  html body #alm-experience-hero-cta-row a.elementor-button,
  html body #alm-experience-visual-cta-row a.elementor-button,
  html body #alm-experience-partner-cta-row a.elementor-button,
  html body #alm-experience-final-cta a.elementor-button {
    min-width: min(224px, calc(100vw - 48px)) !important;
    max-width: calc(100vw - 48px) !important;
  }
}


/* =========================================================
   ALMARA Experience — v2.3.1 Mobile Polish Freeze
   Basis: v2.3 stable mobile baseline
   Scope: mobile-only polish for content width, CTA pills, mosaic,
          eyebrows and section rhythm. Desktop/tablet untouched.
   ========================================================= */

@media (max-width: 767px) {
  /* Keep the whole Experience template on the real viewport grid. */
  html body:has(#alm-experience-hero),
  html body:has(#alm-experience-hero) .site-main,
  html body:has(#alm-experience-hero) main,
  html body:has(#alm-experience-hero) article,
  html body:has(#alm-experience-hero) .page-content,
  html body:has(#alm-experience-hero) .entry-content,
  html body:has(#alm-experience-hero) .elementor,
  html body:has(#alm-experience-hero) .elementor-section-wrap,
  html body:has(#alm-experience-hero) .elementor-widget-template,
  html body:has(#alm-experience-hero) .elementor-template,
  html body:has(#alm-experience-hero) .elementor-widget-container {
    overflow-x: hidden !important;
  }

  /* Reset Elementor width variables that can survive imports on containers/widgets. */
  html body [id^="alm-experience-"],
  html body [id^="alm-experience-"] .e-con,
  html body [id^="alm-experience-"] .e-con-inner,
  html body [id^="alm-experience-"] .elementor-element,
  html body [id^="alm-experience-"] .elementor-widget,
  html body [id^="alm-experience-"] .elementor-widget-container {
    --width: 100% !important;
    --min-height: 0 !important;
    --flex-basis: auto !important;
    --flex-grow: 0 !important;
    --flex-shrink: 1 !important;
    --container-widget-width: 100% !important;
    --container-widget-flex-grow: 1 !important;
    min-width: 0 !important;
    max-width: 100% !important;
    box-sizing: border-box !important;
  }

  /* Slightly wider mobile usable area than v2.3. */
  html body #alm-experience-hero,
  html body #alm-experience-intro,
  html body #alm-experience-modes,
  html body #alm-experience-visual,
  html body #alm-experience-feeling,
  html body #alm-experience-guests,
  html body #alm-experience-partners,
  html body #alm-experience-spots,
  html body #alm-experience-final-cta {
    width: 100% !important;
    max-width: 100% !important;
    padding-left: 14px !important;
    padding-right: 14px !important;
    padding-top: 44px !important;
    padding-bottom: 46px !important;
    overflow-x: clip !important;
  }

  html body #alm-experience-hero {
    padding-top: 30px !important;
    padding-bottom: 42px !important;
  }

  html body #alm-experience-visual,
  html body #alm-experience-guests {
    padding-top: 42px !important;
    padding-bottom: 44px !important;
  }

  html body #alm-experience-hero > .e-con-inner,
  html body #alm-experience-intro > .e-con-inner,
  html body #alm-experience-modes > .e-con-inner,
  html body #alm-experience-visual > .e-con-inner,
  html body #alm-experience-feeling > .e-con-inner,
  html body #alm-experience-guests > .e-con-inner,
  html body #alm-experience-partners > .e-con-inner,
  html body #alm-experience-spots > .e-con-inner,
  html body #alm-experience-final-cta > .e-con-inner,
  html body #alm-experience-hero > .elementor-element,
  html body #alm-experience-intro > .elementor-element,
  html body #alm-experience-modes > .elementor-element,
  html body #alm-experience-visual > .elementor-element,
  html body #alm-experience-feeling > .elementor-element,
  html body #alm-experience-guests > .elementor-element,
  html body #alm-experience-partners > .elementor-element,
  html body #alm-experience-spots > .elementor-element,
  html body #alm-experience-final-cta > .elementor-element {
    width: 100% !important;
    max-width: 100% !important;
    min-width: 0 !important;
    margin-left: 0 !important;
    margin-right: 0 !important;
    padding-left: 0 !important;
    padding-right: 0 !important;
    align-self: stretch !important;
    justify-self: stretch !important;
  }

  /* Copy blocks and media cards: use the full available mobile width. */
  html body #alm-experience-hero-copy,
  html body #alm-experience-intro-copy,
  html body #alm-experience-modes-copy,
  html body #alm-experience-visual-copy,
  html body #alm-experience-feeling-copy,
  html body #alm-experience-guests-copy,
  html body #alm-experience-partners-copy,
  html body #alm-experience-spots-copy,
  html body #alm-experience-hero-media,
  html body #alm-experience-visual-media,
  html body #alm-experience-mode-grid,
  html body #alm-experience-feeling-grid,
  html body #alm-experience-guest-grid,
  html body #alm-experience-partner-grid,
  html body #alm-experience-spot-grid,
  html body #alm-experience-final-cta-grid {
    width: 100% !important;
    max-width: 100% !important;
    min-width: 0 !important;
    margin-left: 0 !important;
    margin-right: 0 !important;
    align-self: stretch !important;
    justify-self: stretch !important;
  }

  /* Headline scale: still elegant, less tall on 360px. */
  html body #alm-experience-hero h1,
  html body #alm-experience-hero .alm-hero__title .elementor-heading-title {
    font-size: clamp(2.24rem, 8.6vw, 3rem) !important;
    line-height: 1.055 !important;
    margin-bottom: 12px !important;
  }

  html body #alm-experience-intro h2,
  html body #alm-experience-modes h2,
  html body #alm-experience-visual h2,
  html body #alm-experience-feeling h2,
  html body #alm-experience-guests h2,
  html body #alm-experience-partners h2,
  html body #alm-experience-spots h2,
  html body #alm-experience-final-cta h2,
  html body [id^="alm-experience-"] .alm-section__title .elementor-heading-title,
  html body [id^="alm-experience-"] .alm-cta-card__title .elementor-heading-title {
    font-size: clamp(1.92rem, 7.4vw, 2.58rem) !important;
    line-height: 1.07 !important;
    margin-bottom: 12px !important;
  }

  html body [id^="alm-experience-"] p,
  html body [id^="alm-experience-"] .alm-section__lead,
  html body [id^="alm-experience-"] .alm-section__lead p,
  html body [id^="alm-experience-"] .alm-hero__lead,
  html body [id^="alm-experience-"] .alm-hero__lead p,
  html body [id^="alm-experience-"] .alm-cta-card__text,
  html body [id^="alm-experience-"] .alm-cta-card__text p {
    font-size: 0.98rem !important;
    line-height: 1.55 !important;
  }

  /* Eyebrows: one consistent typography; protected separators, no solo-dot lines. */
  html body [id^="alm-experience-"] .alm-kicker,
  html body [id^="alm-experience-"] .alm-kicker p,
  html body [id^="alm-experience-"] .alm-eyebrow,
  html body [id^="alm-experience-"] .alm-eyebrow p {
    color: var(--alm-muted, rgba(4, 32, 52, 0.64)) !important;
    font-size: 0.68rem !important;
    font-weight: 800 !important;
    letter-spacing: 0.145em !important;
    line-height: 1.35 !important;
    text-transform: uppercase !important;
    text-align: left !important;
    white-space: nowrap !important;
    word-break: keep-all !important;
    overflow-wrap: normal !important;
    margin: 0 0 11px !important;
  }

  /* Grids/cards: true one-column mobile layout with a broader card rail. */
  html body #alm-experience-mode-grid,
  html body #alm-experience-feeling-grid,
  html body #alm-experience-guest-grid,
  html body #alm-experience-partner-grid,
  html body #alm-experience-spot-grid,
  html body #alm-experience-mode-grid > .e-con-inner,
  html body #alm-experience-feeling-grid > .e-con-inner,
  html body #alm-experience-guest-grid > .e-con-inner,
  html body #alm-experience-partner-grid > .e-con-inner,
  html body #alm-experience-spot-grid > .e-con-inner {
    display: flex !important;
    flex-direction: column !important;
    align-items: stretch !important;
    justify-content: flex-start !important;
    width: 100% !important;
    max-width: 100% !important;
    min-width: 0 !important;
    gap: 14px !important;
    margin-top: 16px !important;
    margin-bottom: 0 !important;
  }

  html body [id^="alm-experience-"] .alm-card,
  html body #alm-experience-mode-grid > .elementor-element,
  html body #alm-experience-feeling-grid > .elementor-element,
  html body #alm-experience-guest-grid > .elementor-element,
  html body #alm-experience-partner-grid > .elementor-element,
  html body #alm-experience-spot-grid > .elementor-element,
  html body #alm-experience-mode-grid > .e-con-inner > .elementor-element,
  html body #alm-experience-feeling-grid > .e-con-inner > .elementor-element,
  html body #alm-experience-guest-grid > .e-con-inner > .elementor-element,
  html body #alm-experience-partner-grid > .e-con-inner > .elementor-element,
  html body #alm-experience-spot-grid > .e-con-inner > .elementor-element {
    width: 100% !important;
    max-width: 100% !important;
    min-width: 0 !important;
    min-height: 0 !important;
    padding: 24px 22px !important;
    align-self: stretch !important;
    justify-self: stretch !important;
    margin-left: 0 !important;
    margin-right: 0 !important;
  }

  html body [id^="alm-experience-"] .alm-card__title,
  html body [id^="alm-experience-"] .alm-card__title .elementor-heading-title {
    font-size: clamp(1.16rem, 4.5vw, 1.36rem) !important;
    line-height: 1.18 !important;
    margin-bottom: 10px !important;
  }

  html body [id^="alm-experience-"] .alm-card__text,
  html body [id^="alm-experience-"] .alm-card__text p {
    font-size: 0.96rem !important;
    line-height: 1.5 !important;
  }

  /* Mobile image cards: no empty media shell, no dense mosaic. */
  html body #alm-experience-hero-media,
  html body #alm-experience-visual-media {
    padding: 18px !important;
    border-radius: 24px !important;
    min-height: 0 !important;
    height: auto !important;
    gap: 12px !important;
  }

  html body #alm-experience-mosaic,
  html body #alm-experience-mosaic > .e-con-inner {
    display: block !important;
    width: 100% !important;
    max-width: 100% !important;
    min-height: 0 !important;
    height: auto !important;
    margin: 0 !important;
    padding: 0 !important;
    overflow: visible !important;
  }

  /* Hide non-guided tiles hard on phone, even if Elementor keeps direct children/flex values. */
  html body .alm-mobile-hide,
  html body #alm-experience-mosaic .alm-experience-mosaic__item--active,
  html body #alm-experience-mosaic .alm-experience-mosaic__item--underwater,
  html body #alm-experience-mosaic .alm-experience-mosaic__item--social {
    display: none !important;
    visibility: hidden !important;
    width: 0 !important;
    height: 0 !important;
    min-height: 0 !important;
    margin: 0 !important;
    padding: 0 !important;
    overflow: hidden !important;
  }

  html body #alm-experience-mosaic .alm-experience-mosaic__item--guided,
  html body #alm-experience-mosaic .alm-mobile-story-primary {
    display: block !important;
    visibility: visible !important;
    width: 100% !important;
    max-width: 100% !important;
    height: auto !important;
    min-height: 0 !important;
    margin: 0 !important;
    padding: 0 !important;
    border-radius: 18px !important;
    overflow: hidden !important;
  }

  html body #alm-experience-mosaic .alm-experience-mosaic__item--guided .elementor-widget-image,
  html body #alm-experience-mosaic .alm-experience-mosaic__item--guided .elementor-widget-container,
  html body #alm-experience-mosaic .alm-experience-mosaic__item--guided img {
    display: block !important;
    width: 100% !important;
    max-width: 100% !important;
    min-width: 0 !important;
    height: auto !important;
    min-height: 0 !important;
    aspect-ratio: 1 / 1 !important;
    object-fit: cover !important;
    object-position: 50% 50% !important;
    border-radius: 18px !important;
  }

  html body #alm-experience-visual-media .alm-image-slot__hint,
  html body #alm-experience-visual-media .alm-image-slot__hint p {
    font-size: 0.92rem !important;
    line-height: 1.45 !important;
  }

  /* CTA pills: one consistent pill system across hero, visual, partner, final CTA. */
  html body [id^="alm-experience-"] .alm-button,
  html body [id^="alm-experience-"] .elementor-widget-button,
  html body #alm-experience-final-cta .alm-button,
  html body #alm-experience-final-cta .elementor-widget-button {
    display: block !important;
    width: min(292px, calc(100vw - 36px)) !important;
    max-width: min(292px, calc(100vw - 36px)) !important;
    min-width: 0 !important;
    align-self: center !important;
    justify-self: center !important;
    margin-left: auto !important;
    margin-right: auto !important;
    overflow: visible !important;
  }

  html body [id^="alm-experience-"] .elementor-button-wrapper,
  html body [id^="alm-experience-"] .elementor-widget-button .elementor-widget-container {
    display: block !important;
    width: 100% !important;
    max-width: 100% !important;
    min-width: 0 !important;
    overflow: visible !important;
  }

  html body [id^="alm-experience-"] a.elementor-button,
  html body [id^="alm-experience-"] .alm-button .elementor-button {
    display: flex !important;
    width: 100% !important;
    max-width: 100% !important;
    min-width: 0 !important;
    min-height: 54px !important;
    height: auto !important;
    border-radius: 999px !important;
    padding: 14px 22px !important;
    align-items: center !important;
    justify-content: center !important;
    gap: 0.55rem !important;
    white-space: nowrap !important;
    text-align: center !important;
    line-height: 1.15 !important;
    overflow: hidden !important;
  }

  html body [id^="alm-experience-"] .elementor-button-content-wrapper,
  html body [id^="alm-experience-"] .elementor-button-text,
  html body [id^="alm-experience-"] .elementor-button-icon {
    min-width: 0 !important;
    max-width: 100% !important;
    white-space: nowrap !important;
    line-height: 1.15 !important;
  }

  /* Final CTA: broader, quieter mobile cards. */
  html body #alm-experience-final-cta-grid,
  html body #alm-experience-final-cta-grid > .e-con-inner {
    display: flex !important;
    flex-direction: column !important;
    gap: 16px !important;
    margin-top: 0 !important;
  }

  html body #alm-experience-final-cta .alm-cta-card,
  html body #alm-experience-final-cta-grid > .elementor-element,
  html body #alm-experience-final-cta-grid > .e-con-inner > .elementor-element {
    width: 100% !important;
    max-width: 100% !important;
    min-width: 0 !important;
    min-height: 0 !important;
    padding: 30px 24px !important;
    border-radius: 24px !important;
    align-self: stretch !important;
  }
}

@media (max-width: 390px) {
  html body #alm-experience-hero,
  html body #alm-experience-intro,
  html body #alm-experience-modes,
  html body #alm-experience-visual,
  html body #alm-experience-feeling,
  html body #alm-experience-guests,
  html body #alm-experience-partners,
  html body #alm-experience-spots,
  html body #alm-experience-final-cta {
    padding-left: 12px !important;
    padding-right: 12px !important;
  }

  html body [id^="alm-experience-"] .alm-button,
  html body [id^="alm-experience-"] .elementor-widget-button,
  html body #alm-experience-final-cta .alm-button,
  html body #alm-experience-final-cta .elementor-widget-button {
    width: min(292px, calc(100vw - 28px)) !important;
    max-width: min(292px, calc(100vw - 28px)) !important;
  }
}

/* =========================================================
   ALMARA Experience — v2.3.2 Mobile Pills + Single Image Freeze
   Basis: v2.3.1 Mobile Polish
   Scope: mobile-only final containment for long CTA labels and
   Experience Mosaic mobile simplification.
   Desktop/tablet unchanged.
   ========================================================= */

@media (max-width: 767px) {
  /* ---------------------------------------------------------
     1) CTA Pills: long German labels may wrap to two lines.
     Previous mobile rules used nowrap + overflow hidden, which
     clipped labels such as “Partnergespräch anfragen”.
     --------------------------------------------------------- */
  html body #alm-experience-hero-cta-row,
  html body #alm-experience-visual-cta-row,
  html body #alm-experience-partner-cta-row,
  html body #alm-experience-final-cta .alm-cta-card {
    overflow: visible !important;
  }

  html body #alm-experience-hero-cta-row .alm-button,
  html body #alm-experience-visual-cta-row .alm-button,
  html body #alm-experience-partner-cta-row .alm-button,
  html body #alm-experience-final-cta .alm-button,
  html body #alm-experience-hero-cta-row .elementor-widget-button,
  html body #alm-experience-visual-cta-row .elementor-widget-button,
  html body #alm-experience-partner-cta-row .elementor-widget-button,
  html body #alm-experience-final-cta .elementor-widget-button {
    display: block !important;
    width: min(316px, calc(100vw - 32px)) !important;
    max-width: min(316px, calc(100vw - 32px)) !important;
    min-width: 0 !important;
    align-self: center !important;
    justify-self: center !important;
    margin-left: auto !important;
    margin-right: auto !important;
    overflow: visible !important;
  }

  html body #alm-experience-hero-cta-row .elementor-widget-container,
  html body #alm-experience-visual-cta-row .elementor-widget-container,
  html body #alm-experience-partner-cta-row .elementor-widget-container,
  html body #alm-experience-final-cta .elementor-widget-container,
  html body #alm-experience-hero-cta-row .elementor-button-wrapper,
  html body #alm-experience-visual-cta-row .elementor-button-wrapper,
  html body #alm-experience-partner-cta-row .elementor-button-wrapper,
  html body #alm-experience-final-cta .elementor-button-wrapper {
    display: block !important;
    width: 100% !important;
    max-width: 100% !important;
    min-width: 0 !important;
    overflow: visible !important;
  }

  html body #alm-experience-hero-cta-row a.elementor-button,
  html body #alm-experience-visual-cta-row a.elementor-button,
  html body #alm-experience-partner-cta-row a.elementor-button,
  html body #alm-experience-final-cta a.elementor-button,
  html body #alm-experience-hero-cta-row .alm-button .elementor-button,
  html body #alm-experience-visual-cta-row .alm-button .elementor-button,
  html body #alm-experience-partner-cta-row .alm-button .elementor-button,
  html body #alm-experience-final-cta .alm-button .elementor-button {
    display: flex !important;
    width: 100% !important;
    max-width: 100% !important;
    min-width: 0 !important;
    min-height: 56px !important;
    height: auto !important;
    border-radius: 999px !important;
    padding: 12px 20px !important;
    align-items: center !important;
    justify-content: center !important;
    gap: 0.55rem !important;
    white-space: normal !important;
    text-align: center !important;
    line-height: 1.16 !important;
    overflow: visible !important;
  }

  html body #alm-experience-hero-cta-row .elementor-button-content-wrapper,
  html body #alm-experience-visual-cta-row .elementor-button-content-wrapper,
  html body #alm-experience-partner-cta-row .elementor-button-content-wrapper,
  html body #alm-experience-final-cta .elementor-button-content-wrapper {
    display: inline-flex !important;
    flex-direction: row !important;
    align-items: center !important;
    justify-content: center !important;
    gap: 0.55rem !important;
    width: 100% !important;
    max-width: 100% !important;
    min-width: 0 !important;
    white-space: normal !important;
    overflow: visible !important;
    line-height: 1.16 !important;
  }

  html body #alm-experience-hero-cta-row .elementor-button-icon,
  html body #alm-experience-visual-cta-row .elementor-button-icon,
  html body #alm-experience-partner-cta-row .elementor-button-icon,
  html body #alm-experience-final-cta .elementor-button-icon {
    display: inline-flex !important;
    flex: 0 0 auto !important;
    align-items: center !important;
    justify-content: center !important;
    margin: 0 !important;
    line-height: 1 !important;
  }

  html body #alm-experience-hero-cta-row .elementor-button-text,
  html body #alm-experience-visual-cta-row .elementor-button-text,
  html body #alm-experience-partner-cta-row .elementor-button-text,
  html body #alm-experience-final-cta .elementor-button-text {
    display: inline-block !important;
    flex: 0 1 auto !important;
    width: auto !important;
    max-width: calc(100% - 34px) !important;
    min-width: 0 !important;
    white-space: normal !important;
    overflow: visible !important;
    text-overflow: clip !important;
    text-align: center !important;
    line-height: 1.16 !important;
    word-break: normal !important;
    overflow-wrap: normal !important;
    hyphens: none !important;
  }

  /* ---------------------------------------------------------
     2) Mobile Experience Mosaic: one image only, card-width.
     The desktop mosaic is too dense on 360px and the old class-
     based hiding can fail when only the v2.3 JSON is active.
     This therefore hides every mosaic child except the first / guided tile.
     --------------------------------------------------------- */
  html body #alm-experience-visual-media.alm-experience-visual-media-card,
  html body #alm-experience-visual-media {
    min-height: 0 !important;
    height: auto !important;
    padding: 18px !important;
    gap: 12px !important;
    overflow: visible !important;
  }

  html body #alm-experience-mosaic,
  html body #alm-experience-mosaic > .e-con-inner {
    display: block !important;
    width: 100% !important;
    max-width: 100% !important;
    min-width: 0 !important;
    min-height: 0 !important;
    height: auto !important;
    margin: 0 !important;
    padding: 0 !important;
    overflow: visible !important;
  }

  html body #alm-experience-mosaic > .elementor-element:not(:first-child),
  html body #alm-experience-mosaic > .e-con-inner > .elementor-element:not(:first-child),
  html body #alm-experience-mosaic .alm-experience-mosaic__item:not(.alm-experience-mosaic__item--guided),
  html body #alm-experience-mosaic .alm-experience-mosaic__item--active,
  html body #alm-experience-mosaic .alm-experience-mosaic__item--underwater,
  html body #alm-experience-mosaic .alm-experience-mosaic__item--social {
    display: none !important;
    visibility: hidden !important;
    width: 0 !important;
    max-width: 0 !important;
    min-width: 0 !important;
    height: 0 !important;
    max-height: 0 !important;
    min-height: 0 !important;
    margin: 0 !important;
    padding: 0 !important;
    border: 0 !important;
    overflow: hidden !important;
    box-shadow: none !important;
    opacity: 0 !important;
    pointer-events: none !important;
  }

  html body #alm-experience-mosaic > .elementor-element:first-child,
  html body #alm-experience-mosaic > .e-con-inner > .elementor-element:first-child,
  html body #alm-experience-mosaic .alm-experience-mosaic__item--guided {
    display: block !important;
    visibility: visible !important;
    opacity: 1 !important;
    width: 100% !important;
    max-width: 100% !important;
    min-width: 0 !important;
    height: auto !important;
    min-height: 0 !important;
    margin: 0 !important;
    padding: 0 !important;
    border-radius: 18px !important;
    overflow: hidden !important;
    box-shadow: 0 12px 30px rgba(9, 43, 61, 0.09) !important;
  }

  html body #alm-experience-mosaic > .elementor-element:first-child .elementor-widget-image,
  html body #alm-experience-mosaic > .elementor-element:first-child .elementor-widget-container,
  html body #alm-experience-mosaic > .elementor-element:first-child img,
  html body #alm-experience-mosaic > .e-con-inner > .elementor-element:first-child .elementor-widget-image,
  html body #alm-experience-mosaic > .e-con-inner > .elementor-element:first-child .elementor-widget-container,
  html body #alm-experience-mosaic > .e-con-inner > .elementor-element:first-child img,
  html body #alm-experience-mosaic .alm-experience-mosaic__item--guided .elementor-widget-image,
  html body #alm-experience-mosaic .alm-experience-mosaic__item--guided .elementor-widget-container,
  html body #alm-experience-mosaic .alm-experience-mosaic__item--guided img {
    display: block !important;
    width: 100% !important;
    max-width: 100% !important;
    min-width: 0 !important;
    height: auto !important;
    min-height: 0 !important;
    aspect-ratio: 4 / 3 !important;
    object-fit: cover !important;
    object-position: 50% 50% !important;
    border-radius: 18px !important;
    box-shadow: none !important;
  }

  html body #alm-experience-visual-media .alm-image-slot__hint,
  html body #alm-experience-visual-media .alm-image-slot__hint p {
    margin-top: 10px !important;
    font-size: 0.92rem !important;
    line-height: 1.45 !important;
  }
}

@media (max-width: 390px) {
  html body #alm-experience-hero-cta-row .alm-button,
  html body #alm-experience-visual-cta-row .alm-button,
  html body #alm-experience-partner-cta-row .alm-button,
  html body #alm-experience-final-cta .alm-button,
  html body #alm-experience-hero-cta-row .elementor-widget-button,
  html body #alm-experience-visual-cta-row .elementor-widget-button,
  html body #alm-experience-partner-cta-row .elementor-widget-button,
  html body #alm-experience-final-cta .elementor-widget-button {
    width: min(316px, calc(100vw - 24px)) !important;
    max-width: min(316px, calc(100vw - 24px)) !important;
  }
}

/* =========================================================
   ALMARA Experience — v2.3.3 Mobile Pills FINAL Patch
   Basis: v2.3.2
   Scope: CSS-only, mobile only.
   Purpose: remove fixed 316px mobile button width that can overflow
   narrow Elementor/card parents; keep real pill shape, allow 2-line
   labels, and keep mobile visual block as one card-width story image.
   ========================================================= */

@media (max-width: 767px) {
  /* Button zones: let the parent/card define the available width.
     Fixed 292/316px pills can overflow when Elementor keeps a narrow
     imported parent column, especially in final CTA cards. */
  html body [id^="alm-experience-"] .alm-button,
  html body [id^="alm-experience-"] .elementor-widget-button,
  html body [id^="alm-experience-"] .alm-button.elementor-widget-button,
  html body #alm-experience-hero-cta-row .alm-button,
  html body #alm-experience-hero-cta-row .elementor-widget-button,
  html body #alm-experience-visual-cta-row .alm-button,
  html body #alm-experience-visual-cta-row .elementor-widget-button,
  html body #alm-experience-partner-cta-row .alm-button,
  html body #alm-experience-partner-cta-row .elementor-widget-button,
  html body #alm-experience-final-cta .alm-button,
  html body #alm-experience-final-cta .elementor-widget-button {
    display: block !important;
    width: 100% !important;
    max-width: 100% !important;
    min-width: 0 !important;
    flex: 0 1 auto !important;
    flex-basis: auto !important;
    align-self: stretch !important;
    justify-self: stretch !important;
    margin-left: 0 !important;
    margin-right: 0 !important;
    overflow: visible !important;
  }

  html body [id^="alm-experience-"] .alm-button .elementor-widget-container,
  html body [id^="alm-experience-"] .elementor-widget-button .elementor-widget-container,
  html body [id^="alm-experience-"] .alm-button .elementor-button-wrapper,
  html body [id^="alm-experience-"] .elementor-widget-button .elementor-button-wrapper,
  html body [id^="alm-experience-"] .elementor-button-wrapper {
    display: block !important;
    width: 100% !important;
    max-width: 100% !important;
    min-width: 0 !important;
    overflow: visible !important;
  }

  html body [id^="alm-experience-"] a.elementor-button,
  html body [id^="alm-experience-"] .alm-button a.elementor-button,
  html body [id^="alm-experience-"] .elementor-widget-button a.elementor-button,
  html body #alm-experience-hero-cta-row a.elementor-button,
  html body #alm-experience-visual-cta-row a.elementor-button,
  html body #alm-experience-partner-cta-row a.elementor-button,
  html body #alm-experience-final-cta a.elementor-button {
    display: flex !important;
    width: 100% !important;
    max-width: 100% !important;
    min-width: 0 !important;
    min-height: 54px !important;
    height: auto !important;
    border-radius: 999px !important;
    padding: 12px 14px !important;
    align-items: center !important;
    justify-content: center !important;
    gap: 8px !important;
    text-align: center !important;
    white-space: normal !important;
    line-height: 1.14 !important;
    overflow: hidden !important;
    box-sizing: border-box !important;
  }

  html body [id^="alm-experience-"] .elementor-button-content-wrapper {
    display: flex !important;
    flex-direction: row !important;
    align-items: center !important;
    justify-content: center !important;
    gap: 8px !important;
    width: 100% !important;
    max-width: 100% !important;
    min-width: 0 !important;
    white-space: normal !important;
    line-height: 1.14 !important;
    overflow: visible !important;
  }

  html body [id^="alm-experience-"] .elementor-button-icon {
    display: inline-flex !important;
    flex: 0 0 18px !important;
    width: 18px !important;
    max-width: 18px !important;
    min-width: 18px !important;
    align-items: center !important;
    justify-content: center !important;
    margin: 0 !important;
    line-height: 1 !important;
  }

  html body [id^="alm-experience-"] .elementor-button-icon svg {
    width: 1em !important;
    height: 1em !important;
    display: block !important;
  }

  html body [id^="alm-experience-"] .elementor-button-text {
    display: block !important;
    flex: 1 1 auto !important;
    width: auto !important;
    max-width: calc(100% - 26px) !important;
    min-width: 0 !important;
    white-space: normal !important;
    overflow: visible !important;
    text-overflow: clip !important;
    text-align: center !important;
    line-height: 1.14 !important;
    word-break: normal !important;
    overflow-wrap: normal !important;
    hyphens: none !important;
  }

  /* Keep one-button CTA rows visually compact and centered, but without
     fixed pixel width. */
  html body #alm-experience-hero-cta-row,
  html body #alm-experience-visual-cta-row,
  html body #alm-experience-partner-cta-row {
    width: 100% !important;
    max-width: 100% !important;
    min-width: 0 !important;
    display: flex !important;
    flex-direction: column !important;
    align-items: stretch !important;
    justify-content: flex-start !important;
    gap: 10px !important;
    overflow: visible !important;
  }

  /* Final CTA cards: prevent button overflow from the card. */
  html body #alm-experience-final-cta .alm-cta-card,
  html body #alm-experience-final-cta-grid > .e-con-inner > .elementor-element,
  html body #alm-experience-final-cta-grid:not(.e-con-boxed) > .elementor-element {
    overflow: hidden !important;
  }

  /* Mobile visual: one guided story image, full card width. */
  html body #alm-experience-visual-media,
  html body #alm-experience-visual-media.alm-experience-visual-media-card {
    width: 100% !important;
    max-width: 100% !important;
    min-width: 0 !important;
    min-height: 0 !important;
    height: auto !important;
    padding: 18px !important;
    overflow: hidden !important;
  }

  html body #alm-experience-mosaic,
  html body #alm-experience-mosaic > .e-con-inner {
    width: 100% !important;
    max-width: 100% !important;
    min-width: 0 !important;
  }

  html body #alm-experience-mosaic img {
    width: 100% !important;
    max-width: 100% !important;
    min-width: 0 !important;
    height: auto !important;
    aspect-ratio: 4 / 3 !important;
    object-fit: cover !important;
    border-radius: 18px !important;
  }
}

@media (max-width: 390px) {
  html body [id^="alm-experience-"] a.elementor-button,
  html body [id^="alm-experience-"] .alm-button a.elementor-button,
  html body [id^="alm-experience-"] .elementor-widget-button a.elementor-button {
    padding-left: 12px !important;
    padding-right: 12px !important;
  }

  html body [id^="alm-experience-"] .elementor-button-content-wrapper {
    gap: 7px !important;
  }

  html body [id^="alm-experience-"] .elementor-button-icon {
    flex-basis: 16px !important;
    width: 16px !important;
    max-width: 16px !important;
    min-width: 16px !important;
  }

  html body [id^="alm-experience-"] .elementor-button-text {
    max-width: calc(100% - 23px) !important;
  }
}


/* =========================================================
   ALMARA Mobile Late Lock v3.0 — Experience / Erlebnisse
   Scope: phone only. No header/footer selectors.
   ========================================================= */
@media screen and (max-width: 767px) {
  html body :is(#alm-experience-hero,#alm-experience-modes,#alm-experience-feeling,#alm-experience-guests,#alm-experience-visual,#alm-experience-partners,#alm-experience-spots,#alm-experience-final-cta) {
    display: block !important;
    width: 100vw !important;
    max-width: 100vw !important;
    min-width: 0 !important;
    margin-left: calc(50% - 50vw) !important;
    margin-right: calc(50% - 50vw) !important;
    padding-left: 18px !important;
    padding-right: 18px !important;
    overflow: hidden !important;
    --width: 100% !important;
    --content-width: 100% !important;
    --container-widget-width: 100% !important;
  }
  html body :is(#alm-experience-hero,#alm-experience-modes,#alm-experience-feeling,#alm-experience-guests,#alm-experience-visual,#alm-experience-partners,#alm-experience-spots,#alm-experience-final-cta) > .e-con-inner {
    display: flex !important;
    flex-direction: column !important;
    align-items: stretch !important;
    gap: 22px !important;
    width: 100% !important;
    max-width: 430px !important;
    min-width: 0 !important;
    margin-left: auto !important;
    margin-right: auto !important;
    padding-left: 0 !important;
    padding-right: 0 !important;
    grid-template-columns: none !important;
  }
  html body :is(#alm-experience-mode-grid,#alm-experience-feeling-grid,#alm-experience-guest-grid,#alm-experience-partner-grid,#alm-experience-spot-grid),
  html body :is(#alm-experience-mode-grid,#alm-experience-feeling-grid,#alm-experience-guest-grid,#alm-experience-partner-grid,#alm-experience-spot-grid) > .e-con-inner,
  html body #alm-experience-final-cta > .e-con-inner {
    display: flex !important;
    flex-direction: column !important;
    align-items: stretch !important;
    gap: 16px !important;
    width: 100% !important;
    max-width: 100% !important;
    grid-template-columns: none !important;
  }
  html body [id^="alm-experience-"] :is(.alm-card,.alm-cta-card),
  html body :is(#alm-experience-mode-grid,#alm-experience-feeling-grid,#alm-experience-guest-grid,#alm-experience-partner-grid,#alm-experience-spot-grid) > .e-con-inner > .elementor-element {
    width: 100% !important;
    max-width: 100% !important;
    min-width: 0 !important;
    flex: 0 0 auto !important;
    align-self: stretch !important;
    justify-self: stretch !important;
    transform: none !important;
  }
}


/* =========================================================
   ALMARA Mobile Late Lock v3.0 — Visual/Image Card Polish
   Scope: phone only. Restores visible rounded image-card frames.
   ========================================================= */
@media screen and (max-width: 767px) {
  html body :is(
    #alm-destinations-hero-media,
    #alm-destinations-location-visual,
    #alm-experience-hero-media,
    #alm-experience-visual-media,
    #alm-home-hero-media,
    #alm-home-experience-media,
    .almara-coastline-visual,
    .alm-photo-slot,
    .alm-image-widget-slot,
    .alm-partner-image-card,
    .alm-equipment-card .alm-photo-mosaic,
    .almara-location-card .elementor-widget-image
  ) {
    border: 1px solid rgba(9, 43, 61, 0.12) !important;
    border-radius: 20px !important;
    box-shadow: 0 14px 34px rgba(9, 43, 61, 0.10) !important;
    overflow: hidden !important;
    background: rgba(255, 255, 255, 0.82) !important;
  }

  html body :is(
    #alm-destinations-hero-media .alm-destinations-hero-image,
    #alm-destinations-location-visual .alm-destinations-image,
    #alm-experience-hero-media .elementor-widget-container,
    #alm-experience-visual-media .elementor-widget-container,
    #alm-home-hero-media .elementor-widget-container,
    #alm-home-experience-media .elementor-widget-container,
    .alm-photo-slot .elementor-widget-container,
    .alm-image-widget-slot .elementor-widget-container,
    .alm-partner-image-card .elementor-widget-container,
    .almara-location-card .elementor-widget-image .elementor-widget-container
  ) {
    width: 100% !important;
    max-width: 100% !important;
    min-width: 0 !important;
    overflow: hidden !important;
    border-radius: 16px !important;
  }

  html body :is(
    #alm-destinations-hero-media img,
    #alm-destinations-location-visual img,
    #alm-experience-hero-media img,
    #alm-experience-visual-media img,
    #alm-home-hero-media img,
    #alm-home-experience-media img,
    .alm-photo-slot img,
    .alm-image-widget-slot img,
    .alm-partner-image-card img,
    .almara-location-card .elementor-widget-image img
  ) {
    display: block !important;
    width: 100% !important;
    max-width: 100% !important;
    min-width: 0 !important;
    height: auto !important;
    object-fit: cover !important;
    border-radius: 16px !important;
  }
}


/* =========================================================
   ALMARA Experience — v2.4 Moments Selector
   Scope: Experience / Erlebnisse templates with #alm-experience-moments
   Purpose:
   - add Easy Flow / Blue Glide / Deep Blue selector
   - preserve existing v2.3 mobile late-lock behavior
   - mobile-first containment for full-width cards and pills
   ========================================================= */

html body #alm-experience-moments,
html body #alm-experience-moments * ,
html body #alm-experience-moments *::before,
html body #alm-experience-moments *::after {
  box-sizing: border-box !important;
}

html body #alm-experience-moments {
  position: relative !important;
  width: 100% !important;
  max-width: none !important;
  overflow: hidden !important;
  padding: clamp(76px, 7.2vw, 118px) clamp(28px, 5vw, 72px) !important;
  background:
    radial-gradient(circle at 84% 12%, rgba(56, 198, 217, 0.10), transparent 30%),
    linear-gradient(180deg, rgba(255,255,255,0.42), rgba(251,248,241,0.82)) !important;
}

html body #alm-experience-moments > .e-con-inner {
  display: flex !important;
  flex-direction: column !important;
  align-items: stretch !important;
  justify-content: flex-start !important;
  width: 100% !important;
  max-width: min(1500px, calc(100vw - 96px)) !important;
  min-width: 0 !important;
  margin-left: auto !important;
  margin-right: auto !important;
  padding-left: 0 !important;
  padding-right: 0 !important;
  gap: 0 !important;
}

html body #alm-experience-moments-copy {
  width: 100% !important;
  max-width: 980px !important;
  min-width: 0 !important;
  display: flex !important;
  flex-direction: column !important;
  align-items: flex-start !important;
  justify-content: flex-start !important;
  gap: 0 !important;
}

html body #alm-experience-moments h2,
html body #alm-experience-moments .alm-section__title .elementor-heading-title {
  color: var(--alm-navy) !important;
  font-size: clamp(2.65rem, 4.8vw, 5.3rem) !important;
  line-height: 1.02 !important;
  letter-spacing: -0.035em !important;
  margin: 0 0 18px !important;
  text-wrap: balance !important;
}

html body #alm-experience-moments .alm-section__lead,
html body #alm-experience-moments .alm-section__lead p {
  max-width: 880px !important;
  color: var(--alm-muted) !important;
  font-size: clamp(1rem, 1.08vw, 1.14rem) !important;
  line-height: 1.72 !important;
  margin: 0 !important;
}

html body #alm-experience-moment-grid,
html body #alm-experience-moment-grid > .e-con-inner,
html body #alm-experience-moment-grid:not(.e-con-boxed) {
  width: 100% !important;
  max-width: 100% !important;
  min-width: 0 !important;
  display: grid !important;
  grid-template-columns: repeat(3, minmax(0, 1fr)) !important;
  gap: clamp(22px, 2.4vw, 34px) !important;
  align-items: stretch !important;
  justify-content: stretch !important;
  margin-top: clamp(38px, 4vw, 58px) !important;
}

html body #alm-experience-moment-grid > .e-con-inner {
  display: contents !important;
}

html body #alm-experience-moments .alm-moment-card {
  position: relative !important;
  width: 100% !important;
  max-width: 100% !important;
  min-width: 0 !important;
  min-height: 100% !important;
  overflow: hidden !important;
  border-radius: 28px !important;
  border: 1px solid rgba(9, 43, 61, 0.13) !important;
  background:
    radial-gradient(circle at 16% 0%, rgba(56,198,217,.10), transparent 34%),
    rgba(255,255,255,.92) !important;
  box-shadow: 0 18px 42px rgba(9, 43, 61, 0.10) !important;
  display: flex !important;
  flex-direction: column !important;
  align-items: stretch !important;
  justify-content: flex-start !important;
  padding: 0 !important;
  transition: transform 220ms ease, box-shadow 220ms ease, border-color 220ms ease, background-color 220ms ease !important;
}

html body #alm-experience-moments .alm-moment-card:hover {
  transform: translateY(-8px) scale(1.01) !important;
  border-color: rgba(56, 198, 217, 0.62) !important;
  box-shadow: 0 30px 72px rgba(9, 43, 61, 0.16) !important;
}

html body #alm-experience-moments .alm-moment-card__image,
html body #alm-experience-moments .alm-moment-card__image .elementor-widget-container {
  width: 100% !important;
  max-width: 100% !important;
  min-width: 0 !important;
  margin: 0 !important;
  overflow: hidden !important;
}

html body #alm-experience-moments .alm-moment-card__image img {
  display: block !important;
  width: 100% !important;
  max-width: 100% !important;
  height: auto !important;
  aspect-ratio: 16 / 10.4 !important;
  object-fit: cover !important;
  border-radius: 0 !important;
  box-shadow: none !important;
  transform: scale(1.001) !important;
  transition: transform 260ms ease, filter 260ms ease !important;
}

html body #alm-experience-moments .alm-moment-card:nth-child(1) .alm-moment-card__image img { object-position: 50% 50% !important; }
html body #alm-experience-moments .alm-moment-card:nth-child(2) .alm-moment-card__image img { object-position: 50% 48% !important; }
html body #alm-experience-moments .alm-moment-card:nth-child(3) .alm-moment-card__image img { object-position: 50% 50% !important; }

html body #alm-experience-moments .alm-moment-card:hover .alm-moment-card__image img {
  transform: scale(1.035) !important;
  filter: saturate(1.04) contrast(1.01) !important;
}

html body #alm-experience-moments .alm-moment-card__content {
  width: 100% !important;
  max-width: 100% !important;
  min-width: 0 !important;
  display: flex !important;
  flex-direction: column !important;
  align-items: flex-start !important;
  justify-content: flex-start !important;
  padding: clamp(26px, 2.6vw, 38px) !important;
  gap: 0 !important;
  flex: 1 1 auto !important;
}

html body #alm-experience-moments .alm-moment-card__device,
html body #alm-experience-moments .alm-moment-card__device p {
  margin: 0 0 12px !important;
  color: rgba(4, 32, 52, 0.62) !important;
  font-size: 0.78rem !important;
  font-weight: 800 !important;
  letter-spacing: 0.14em !important;
  line-height: 1.25 !important;
  text-transform: uppercase !important;
}

html body #alm-experience-moments .alm-moment-card__title,
html body #alm-experience-moments .alm-moment-card__title .elementor-heading-title,
html body #alm-experience-moments .alm-moment-card__title h3 {
  margin: 0 0 10px !important;
  color: var(--alm-navy) !important;
  font-size: clamp(1.72rem, 2.15vw, 2.38rem) !important;
  line-height: 1.04 !important;
  letter-spacing: -0.028em !important;
}

html body #alm-experience-moments .alm-moment-card__claim,
html body #alm-experience-moments .alm-moment-card__claim p {
  margin: 0 0 14px !important;
  color: var(--alm-navy) !important;
  font-size: clamp(1.03rem, 1.05vw, 1.16rem) !important;
  font-weight: 800 !important;
  line-height: 1.36 !important;
}

html body #alm-experience-moments .alm-moment-card__text,
html body #alm-experience-moments .alm-moment-card__text p {
  margin: 0 !important;
  color: var(--alm-muted) !important;
  font-size: clamp(0.98rem, 0.94vw, 1.06rem) !important;
  line-height: 1.58 !important;
}

html body #alm-experience-moments .alm-moment-card__facts,
html body #alm-experience-moments .alm-moment-card__facts p {
  width: 100% !important;
  max-width: 100% !important;
  margin: 20px 0 22px !important;
  display: flex !important;
  flex-wrap: wrap !important;
  gap: 8px !important;
}

html body #alm-experience-moments .alm-moment-card__facts span {
  display: inline-flex !important;
  align-items: center !important;
  justify-content: center !important;
  min-height: 34px !important;
  padding: 7px 12px !important;
  border-radius: 999px !important;
  background: rgba(56,198,217,.10) !important;
  border: 1px solid rgba(56,198,217,.28) !important;
  color: var(--alm-navy) !important;
  font-size: 0.78rem !important;
  font-weight: 800 !important;
  line-height: 1.1 !important;
  white-space: nowrap !important;
}

html body #alm-experience-moments .alm-moment-card__button {
  margin-top: auto !important;
  width: auto !important;
  max-width: 100% !important;
}

html body #alm-experience-moments .alm-moment-card__button .elementor-button {
  min-height: 50px !important;
  padding: 0 20px !important;
}

html body #alm-experience-moments .alm-experience-moments-footer {
  width: 100% !important;
  max-width: 100% !important;
  margin-top: clamp(26px, 3vw, 42px) !important;
  display: flex !important;
  flex-direction: row !important;
  align-items: center !important;
  justify-content: space-between !important;
  gap: 24px !important;
  padding: clamp(22px, 2.4vw, 34px) !important;
  border: 1px solid rgba(9, 43, 61, 0.12) !important;
  border-radius: 24px !important;
  background: rgba(255,255,255,.72) !important;
  box-shadow: 0 12px 30px rgba(9,43,61,.07) !important;
}

html body #alm-experience-moments .alm-experience-moments-note,
html body #alm-experience-moments .alm-experience-moments-note p {
  max-width: 680px !important;
  margin: 0 !important;
  color: var(--alm-muted) !important;
  font-size: .98rem !important;
  line-height: 1.52 !important;
}

html body #alm-experience-moments-cta-row,
html body #alm-experience-moments-cta-row > .e-con-inner {
  display: flex !important;
  flex-direction: row !important;
  align-items: center !important;
  justify-content: flex-end !important;
  gap: 12px !important;
  width: auto !important;
  max-width: 100% !important;
  flex-wrap: wrap !important;
}

@media (max-width: 1180px) {
  html body #alm-experience-moment-grid,
  html body #alm-experience-moment-grid:not(.e-con-boxed),
  html body #alm-experience-moment-grid > .e-con-inner {
    grid-template-columns: 1fr !important;
    max-width: 760px !important;
  }

  html body #alm-experience-moments .alm-moment-card__image img {
    aspect-ratio: 16 / 9.2 !important;
  }

  html body #alm-experience-moments .alm-experience-moments-footer {
    flex-direction: column !important;
    align-items: flex-start !important;
  }

  html body #alm-experience-moments-cta-row,
  html body #alm-experience-moments-cta-row > .e-con-inner {
    justify-content: flex-start !important;
  }
}

@media (max-width: 767px) {
  html body #alm-experience-moments {
    width: 100vw !important;
    max-width: 100vw !important;
    min-width: 0 !important;
    margin-left: calc(50% - 50vw) !important;
    margin-right: calc(50% - 50vw) !important;
    padding: 46px 14px 48px !important;
    overflow: hidden !important;
  }

  html body #alm-experience-moments > .e-con-inner {
    width: 100% !important;
    max-width: 430px !important;
    min-width: 0 !important;
    margin-left: auto !important;
    margin-right: auto !important;
    padding: 0 !important;
  }

  html body #alm-experience-moments-copy,
  html body #alm-experience-moment-grid,
  html body #alm-experience-moment-grid > .e-con-inner,
  html body #alm-experience-moments .alm-experience-moments-footer,
  html body #alm-experience-moments-cta-row,
  html body #alm-experience-moments-cta-row > .e-con-inner {
    width: 100% !important;
    max-width: 100% !important;
    min-width: 0 !important;
    margin-left: 0 !important;
    margin-right: 0 !important;
  }

  html body #alm-experience-moments h2,
  html body #alm-experience-moments .alm-section__title .elementor-heading-title {
    font-size: clamp(1.98rem, 7.6vw, 2.62rem) !important;
    line-height: 1.065 !important;
    margin-bottom: 12px !important;
  }

  html body #alm-experience-moments .alm-section__lead,
  html body #alm-experience-moments .alm-section__lead p {
    font-size: 0.98rem !important;
    line-height: 1.55 !important;
  }

  html body #alm-experience-moment-grid,
  html body #alm-experience-moment-grid:not(.e-con-boxed),
  html body #alm-experience-moment-grid > .e-con-inner {
    display: flex !important;
    flex-direction: column !important;
    align-items: stretch !important;
    justify-content: flex-start !important;
    gap: 16px !important;
    margin-top: 22px !important;
  }

  html body #alm-experience-moments .alm-moment-card {
    width: 100% !important;
    max-width: 100% !important;
    min-width: 0 !important;
    min-height: 0 !important;
    border-radius: 24px !important;
    transform: none !important;
  }

  html body #alm-experience-moments .alm-moment-card:hover {
    transform: none !important;
  }

  html body #alm-experience-moments .alm-moment-card__image img {
    aspect-ratio: 4 / 3 !important;
    object-position: 50% 50% !important;
  }

  html body #alm-experience-moments .alm-moment-card__content {
    padding: 24px 22px 26px !important;
  }

  html body #alm-experience-moments .alm-moment-card__title,
  html body #alm-experience-moments .alm-moment-card__title .elementor-heading-title,
  html body #alm-experience-moments .alm-moment-card__title h3 {
    font-size: clamp(1.55rem, 6vw, 2rem) !important;
    line-height: 1.06 !important;
  }

  html body #alm-experience-moments .alm-moment-card__claim,
  html body #alm-experience-moments .alm-moment-card__claim p {
    font-size: 1.02rem !important;
    line-height: 1.32 !important;
  }

  html body #alm-experience-moments .alm-moment-card__text,
  html body #alm-experience-moments .alm-moment-card__text p {
    font-size: 0.96rem !important;
    line-height: 1.52 !important;
  }

  html body #alm-experience-moments .alm-moment-card__facts,
  html body #alm-experience-moments .alm-moment-card__facts p {
    display: grid !important;
    grid-template-columns: repeat(2, minmax(0, 1fr)) !important;
    gap: 8px !important;
    margin: 18px 0 20px !important;
  }

  html body #alm-experience-moments .alm-moment-card__facts span {
    width: 100% !important;
    min-width: 0 !important;
    white-space: normal !important;
    min-height: 34px !important;
    padding: 8px 10px !important;
    text-align: center !important;
  }

  html body #alm-experience-moments .alm-moment-card__button,
  html body #alm-experience-moments .alm-moment-card__button .elementor-widget-container,
  html body #alm-experience-moments .alm-moment-card__button .elementor-button-wrapper {
    display: block !important;
    width: 100% !important;
    max-width: 100% !important;
    min-width: 0 !important;
    margin-left: 0 !important;
    margin-right: 0 !important;
  }

  html body #alm-experience-moments .alm-moment-card__button a.elementor-button,
  html body #alm-experience-moments .alm-moment-card__button .elementor-button {
    width: 100% !important;
    max-width: 100% !important;
    min-height: 52px !important;
    white-space: normal !important;
    padding: 12px 16px !important;
  }

  html body #alm-experience-moments .alm-experience-moments-footer {
    display: flex !important;
    flex-direction: column !important;
    align-items: stretch !important;
    gap: 16px !important;
    margin-top: 18px !important;
    padding: 24px 22px !important;
    border-radius: 24px !important;
  }

  html body #alm-experience-moments-cta-row,
  html body #alm-experience-moments-cta-row > .e-con-inner {
    display: flex !important;
    flex-direction: column !important;
    align-items: stretch !important;
    justify-content: flex-start !important;
    gap: 10px !important;
  }

  html body #alm-experience-moments-cta-row .elementor-widget-button,
  html body #alm-experience-moments-cta-row .alm-button,
  html body #alm-experience-moments-cta-row .elementor-widget-container,
  html body #alm-experience-moments-cta-row .elementor-button-wrapper {
    display: block !important;
    width: 100% !important;
    max-width: 100% !important;
    min-width: 0 !important;
  }

  html body #alm-experience-moments-cta-row a.elementor-button {
    width: 100% !important;
    max-width: 100% !important;
    min-height: 54px !important;
    white-space: normal !important;
  }
}

@media (max-width: 390px) {
  html body #alm-experience-moments {
    padding-left: 12px !important;
    padding-right: 12px !important;
  }

  html body #alm-experience-moments .alm-moment-card__content,
  html body #alm-experience-moments .alm-experience-moments-footer {
    padding-left: 20px !important;
    padding-right: 20px !important;
  }
}

/* =========================================================
   ALMARA Experience — v2.4.1 Moments Selector Polish Freeze
   Basis: v2.4 Moments Selector
   Scope: #alm-experience-moments only
   Purpose:
   - stronger premium section structure on desktop/tablet
   - real card framing around image + content
   - 3 / 2 / 1 responsive grid instead of too-early single column
   - compact, stable mobile layout with full-width cards and pills
   ========================================================= */

html body #alm-experience-moments {
  isolation: isolate !important;
  padding-top: clamp(82px, 7vw, 118px) !important;
  padding-bottom: clamp(86px, 7.4vw, 126px) !important;
  background:
    radial-gradient(circle at 10% 12%, rgba(255,255,255,.82), transparent 28%),
    radial-gradient(circle at 86% 8%, rgba(56, 198, 217, 0.13), transparent 30%),
    linear-gradient(180deg, rgba(251,248,241,.92), rgba(246,241,232,.96)) !important;
}

html body #alm-experience-moments::before {
  content: "";
  position: absolute;
  inset: 0;
  z-index: -1;
  pointer-events: none;
  background:
    linear-gradient(90deg, rgba(56,198,217,.12), transparent 34%, transparent 66%, rgba(9,43,61,.035)),
    radial-gradient(circle at 50% 100%, rgba(9,43,61,.035), transparent 42%) !important;
  opacity: .9;
}

html body #alm-experience-moments > .e-con-inner {
  max-width: min(1360px, calc(100vw - 96px)) !important;
  gap: 0 !important;
}

html body #alm-experience-moments-copy {
  max-width: 860px !important;
  margin-bottom: clamp(34px, 3.8vw, 54px) !important;
}

html body #alm-experience-moments .alm-kicker,
html body #alm-experience-moments .alm-kicker p,
html body #alm-experience-moments .alm-eyebrow,
html body #alm-experience-moments .alm-eyebrow p {
  margin-bottom: 14px !important;
  color: rgba(4,32,52,.58) !important;
  font-size: .76rem !important;
  font-weight: 850 !important;
  letter-spacing: .17em !important;
  text-transform: uppercase !important;
}

html body #alm-experience-moments h2,
html body #alm-experience-moments .alm-section__title .elementor-heading-title {
  max-width: 780px !important;
  margin-bottom: 18px !important;
  font-size: clamp(2.75rem, 4.6vw, 5.05rem) !important;
  line-height: 1.01 !important;
  letter-spacing: -0.038em !important;
}

html body #alm-experience-moments .alm-section__lead,
html body #alm-experience-moments .alm-section__lead p {
  max-width: 820px !important;
  font-size: clamp(1.02rem, 1.04vw, 1.13rem) !important;
  line-height: 1.68 !important;
}

html body #alm-experience-moment-grid,
html body #alm-experience-moment-grid:not(.e-con-boxed),
html body #alm-experience-moment-grid > .e-con-inner {
  display: grid !important;
  grid-template-columns: repeat(3, minmax(0, 1fr)) !important;
  gap: clamp(22px, 2vw, 30px) !important;
  width: 100% !important;
  max-width: 100% !important;
  margin-top: 0 !important;
  align-items: stretch !important;
}

html body #alm-experience-moment-grid > .e-con-inner {
  display: contents !important;
}

html body #alm-experience-moments .alm-moment-card {
  position: relative !important;
  min-height: 100% !important;
  height: 100% !important;
  padding: 12px 12px 0 !important;
  border-radius: 30px !important;
  border: 1px solid rgba(9,43,61,.12) !important;
  border-top: 1px solid rgba(255,255,255,.92) !important;
  background:
    linear-gradient(180deg, rgba(255,255,255,.96), rgba(255,255,255,.86)) !important;
  box-shadow:
    0 26px 70px rgba(9,43,61,.105),
    0 1px 0 rgba(255,255,255,.85) inset !important;
  overflow: hidden !important;
  display: flex !important;
  flex-direction: column !important;
  align-items: stretch !important;
  justify-content: flex-start !important;
  transform: translateY(0) !important;
}

html body #alm-experience-moments .alm-moment-card::before {
  content: "";
  position: absolute;
  inset: 0;
  z-index: 0;
  pointer-events: none;
  background:
    radial-gradient(circle at 16% 0%, rgba(56,198,217,.12), transparent 34%),
    linear-gradient(135deg, rgba(255,255,255,.38), transparent 42%) !important;
  opacity: .9;
}

html body #alm-experience-moments .alm-moment-card::after {
  content: "";
  position: absolute;
  left: 28px;
  right: 28px;
  top: 0;
  height: 4px;
  z-index: 2;
  border-radius: 0 0 999px 999px;
  background: linear-gradient(90deg, rgba(56,198,217,.12), rgba(56,198,217,.9), rgba(56,198,217,.12)) !important;
  opacity: .92;
  pointer-events: none;
}

html body #alm-experience-moments .alm-moment-card:hover {
  transform: translateY(-7px) !important;
  border-color: rgba(56,198,217,.42) !important;
  box-shadow:
    0 34px 86px rgba(9,43,61,.16),
    0 1px 0 rgba(255,255,255,.9) inset !important;
}

html body #alm-experience-moments .alm-moment-card > * {
  position: relative !important;
  z-index: 1 !important;
}

html body #alm-experience-moments .alm-moment-card__image,
html body #alm-experience-moments .alm-moment-card__image .elementor-widget-container {
  border-radius: 22px !important;
  overflow: hidden !important;
  background: rgba(9,43,61,.055) !important;
}

html body #alm-experience-moments .alm-moment-card__image img {
  aspect-ratio: 16 / 10.2 !important;
  border-radius: 22px !important;
  object-fit: cover !important;
  transform: scale(1.001) !important;
}

html body #alm-experience-moments .alm-moment-card:nth-child(1) .alm-moment-card__image img,
html body #alm-experience-moment-grid > .e-con-inner > .alm-moment-card:nth-child(1) .alm-moment-card__image img {
  object-position: 50% 50% !important;
}

html body #alm-experience-moments .alm-moment-card:nth-child(2) .alm-moment-card__image img,
html body #alm-experience-moment-grid > .e-con-inner > .alm-moment-card:nth-child(2) .alm-moment-card__image img {
  object-position: 52% 48% !important;
}

html body #alm-experience-moments .alm-moment-card:nth-child(3) .alm-moment-card__image img,
html body #alm-experience-moment-grid > .e-con-inner > .alm-moment-card:nth-child(3) .alm-moment-card__image img {
  object-position: 50% 50% !important;
}

html body #alm-experience-moments .alm-moment-card__content {
  flex: 1 1 auto !important;
  padding: clamp(22px, 2vw, 30px) clamp(18px, 1.8vw, 26px) clamp(24px, 2vw, 32px) !important;
  display: flex !important;
  flex-direction: column !important;
  align-items: flex-start !important;
  justify-content: flex-start !important;
  min-height: 0 !important;
}

html body #alm-experience-moments .alm-moment-card__device,
html body #alm-experience-moments .alm-moment-card__device p {
  margin: 0 0 10px !important;
  color: rgba(4,32,52,.62) !important;
  font-size: .72rem !important;
  font-weight: 850 !important;
  letter-spacing: .15em !important;
  line-height: 1.25 !important;
  text-transform: uppercase !important;
}

html body #alm-experience-moments .alm-moment-card__title,
html body #alm-experience-moments .alm-moment-card__title .elementor-heading-title,
html body #alm-experience-moments .alm-moment-card__title h3 {
  margin: 0 0 8px !important;
  color: var(--alm-navy) !important;
  font-size: clamp(1.8rem, 2vw, 2.28rem) !important;
  line-height: 1.02 !important;
  letter-spacing: -.034em !important;
}

html body #alm-experience-moments .alm-moment-card__claim,
html body #alm-experience-moments .alm-moment-card__claim p {
  margin: 0 0 13px !important;
  color: var(--alm-navy) !important;
  font-size: clamp(1rem, .98vw, 1.11rem) !important;
  font-weight: 820 !important;
  line-height: 1.32 !important;
}

html body #alm-experience-moments .alm-moment-card__text,
html body #alm-experience-moments .alm-moment-card__text p {
  margin: 0 !important;
  color: rgba(4,32,52,.68) !important;
  font-size: clamp(.95rem, .88vw, 1.02rem) !important;
  line-height: 1.56 !important;
}

html body #alm-experience-moments .alm-moment-card__facts,
html body #alm-experience-moments .alm-moment-card__facts p {
  width: 100% !important;
  margin: 18px 0 22px !important;
  display: flex !important;
  flex-wrap: wrap !important;
  align-items: flex-start !important;
  gap: 8px !important;
}

html body #alm-experience-moments .alm-moment-card__facts span {
  min-height: 32px !important;
  padding: 7px 11px !important;
  border-radius: 999px !important;
  background: rgba(56,198,217,.095) !important;
  border: 1px solid rgba(56,198,217,.26) !important;
  color: rgba(4,32,52,.86) !important;
  font-size: .74rem !important;
  font-weight: 850 !important;
  letter-spacing: .015em !important;
  line-height: 1.12 !important;
}

html body #alm-experience-moments .alm-moment-card__button {
  margin-top: auto !important;
  width: auto !important;
  max-width: 100% !important;
}

html body #alm-experience-moments .alm-moment-card__button .elementor-widget-container,
html body #alm-experience-moments .alm-moment-card__button .elementor-button-wrapper {
  width: auto !important;
  max-width: 100% !important;
}

html body #alm-experience-moments .alm-moment-card__button a.elementor-button,
html body #alm-experience-moments .alm-moment-card__button .elementor-button {
  width: auto !important;
  max-width: 100% !important;
  min-height: 48px !important;
  padding: 0 18px !important;
  box-shadow: 0 12px 24px rgba(9,43,61,.10) !important;
}

html body #alm-experience-moments .alm-experience-moments-footer {
  margin-top: clamp(28px, 3vw, 42px) !important;
  padding: clamp(22px, 2.2vw, 30px) !important;
  border-radius: 26px !important;
  background:
    radial-gradient(circle at 5% 0%, rgba(56,198,217,.10), transparent 30%),
    rgba(255,255,255,.76) !important;
  border: 1px solid rgba(9,43,61,.12) !important;
  box-shadow: 0 18px 44px rgba(9,43,61,.08) !important;
}

html body #alm-experience-moments .alm-experience-moments-note,
html body #alm-experience-moments .alm-experience-moments-note p {
  max-width: 720px !important;
  color: rgba(4,32,52,.66) !important;
  font-size: .98rem !important;
  line-height: 1.52 !important;
}

html body #alm-experience-moments-cta-row,
html body #alm-experience-moments-cta-row > .e-con-inner {
  display: flex !important;
  flex-direction: row !important;
  align-items: center !important;
  justify-content: flex-end !important;
  gap: 12px !important;
  width: auto !important;
  max-width: 100% !important;
  margin: 0 !important;
}

/* Tablet: keep the selector compact and premium instead of falling into one long column too early. */
@media (max-width: 1180px) and (min-width: 768px) {
  html body #alm-experience-moments > .e-con-inner {
    max-width: min(1040px, calc(100vw - 72px)) !important;
  }

  html body #alm-experience-moment-grid,
  html body #alm-experience-moment-grid:not(.e-con-boxed),
  html body #alm-experience-moment-grid > .e-con-inner {
    display: grid !important;
    grid-template-columns: repeat(2, minmax(0, 1fr)) !important;
    max-width: 100% !important;
    gap: 24px !important;
  }

  html body #alm-experience-moments .alm-moment-card:nth-child(3),
  html body #alm-experience-moment-grid > .e-con-inner > .alm-moment-card:nth-child(3) {
    grid-column: 1 / -1 !important;
    display: grid !important;
    grid-template-columns: minmax(0, .95fr) minmax(0, 1.05fr) !important;
    gap: 0 !important;
  }

  html body #alm-experience-moments .alm-moment-card:nth-child(3) .alm-moment-card__image,
  html body #alm-experience-moment-grid > .e-con-inner > .alm-moment-card:nth-child(3) .alm-moment-card__image {
    height: 100% !important;
  }

  html body #alm-experience-moments .alm-moment-card:nth-child(3) .alm-moment-card__image img,
  html body #alm-experience-moment-grid > .e-con-inner > .alm-moment-card:nth-child(3) .alm-moment-card__image img {
    height: 100% !important;
    min-height: 330px !important;
    aspect-ratio: auto !important;
  }
}

@media (max-width: 767px) {
  html body #alm-experience-moments {
    width: 100vw !important;
    max-width: 100vw !important;
    margin-left: calc(50% - 50vw) !important;
    margin-right: calc(50% - 50vw) !important;
    padding: 48px 16px 50px !important;
    overflow: hidden !important;
  }

  html body #alm-experience-moments > .e-con-inner {
    max-width: 430px !important;
    width: 100% !important;
    margin-left: auto !important;
    margin-right: auto !important;
    gap: 0 !important;
  }

  html body #alm-experience-moments-copy {
    max-width: 100% !important;
    margin-bottom: 22px !important;
  }

  html body #alm-experience-moments .alm-kicker,
  html body #alm-experience-moments .alm-kicker p,
  html body #alm-experience-moments .alm-eyebrow,
  html body #alm-experience-moments .alm-eyebrow p {
    font-size: .68rem !important;
    letter-spacing: .145em !important;
    line-height: 1.35 !important;
    margin-bottom: 10px !important;
    white-space: nowrap !important;
  }

  html body #alm-experience-moments h2,
  html body #alm-experience-moments .alm-section__title .elementor-heading-title {
    font-size: clamp(2rem, 7.7vw, 2.65rem) !important;
    line-height: 1.06 !important;
    letter-spacing: -.035em !important;
    margin-bottom: 12px !important;
  }

  html body #alm-experience-moments .alm-section__lead,
  html body #alm-experience-moments .alm-section__lead p {
    font-size: .97rem !important;
    line-height: 1.54 !important;
  }

  html body #alm-experience-moment-grid,
  html body #alm-experience-moment-grid:not(.e-con-boxed),
  html body #alm-experience-moment-grid > .e-con-inner {
    display: flex !important;
    flex-direction: column !important;
    align-items: stretch !important;
    gap: 18px !important;
    max-width: 100% !important;
    margin-top: 0 !important;
  }

  html body #alm-experience-moments .alm-moment-card,
  html body #alm-experience-moment-grid > .e-con-inner > .alm-moment-card {
    display: flex !important;
    flex-direction: column !important;
    width: 100% !important;
    max-width: 100% !important;
    min-height: 0 !important;
    height: auto !important;
    padding: 10px 10px 0 !important;
    border-radius: 24px !important;
    transform: none !important;
  }

  html body #alm-experience-moments .alm-moment-card:hover {
    transform: none !important;
  }

  html body #alm-experience-moments .alm-moment-card::after {
    left: 24px !important;
    right: 24px !important;
    height: 3px !important;
  }

  html body #alm-experience-moments .alm-moment-card__image,
  html body #alm-experience-moments .alm-moment-card__image .elementor-widget-container,
  html body #alm-experience-moments .alm-moment-card__image img {
    border-radius: 18px !important;
  }

  html body #alm-experience-moments .alm-moment-card__image img {
    aspect-ratio: 16 / 10.6 !important;
    object-position: 50% 50% !important;
  }

  html body #alm-experience-moments .alm-moment-card__content {
    padding: 21px 18px 22px !important;
  }

  html body #alm-experience-moments .alm-moment-card__device,
  html body #alm-experience-moments .alm-moment-card__device p {
    font-size: .68rem !important;
    letter-spacing: .145em !important;
    margin-bottom: 9px !important;
  }

  html body #alm-experience-moments .alm-moment-card__title,
  html body #alm-experience-moments .alm-moment-card__title .elementor-heading-title,
  html body #alm-experience-moments .alm-moment-card__title h3 {
    font-size: clamp(1.52rem, 5.8vw, 1.92rem) !important;
    line-height: 1.06 !important;
    margin-bottom: 8px !important;
  }

  html body #alm-experience-moments .alm-moment-card__claim,
  html body #alm-experience-moments .alm-moment-card__claim p {
    font-size: .99rem !important;
    line-height: 1.3 !important;
    margin-bottom: 11px !important;
  }

  html body #alm-experience-moments .alm-moment-card__text,
  html body #alm-experience-moments .alm-moment-card__text p {
    font-size: .94rem !important;
    line-height: 1.48 !important;
  }

  html body #alm-experience-moments .alm-moment-card__facts,
  html body #alm-experience-moments .alm-moment-card__facts p {
    display: grid !important;
    grid-template-columns: repeat(2, minmax(0, 1fr)) !important;
    gap: 8px !important;
    margin: 16px 0 18px !important;
  }

  html body #alm-experience-moments .alm-moment-card__facts span {
    width: 100% !important;
    min-height: 34px !important;
    padding: 8px 8px !important;
    white-space: normal !important;
    text-align: center !important;
    font-size: .72rem !important;
  }

  html body #alm-experience-moments .alm-moment-card__button,
  html body #alm-experience-moments .alm-moment-card__button .elementor-widget-container,
  html body #alm-experience-moments .alm-moment-card__button .elementor-button-wrapper {
    display: block !important;
    width: 100% !important;
    max-width: 100% !important;
    min-width: 0 !important;
  }

  html body #alm-experience-moments .alm-moment-card__button a.elementor-button,
  html body #alm-experience-moments .alm-moment-card__button .elementor-button {
    display: flex !important;
    width: 100% !important;
    max-width: 100% !important;
    min-height: 52px !important;
    padding: 12px 14px !important;
    white-space: normal !important;
    text-align: center !important;
  }

  html body #alm-experience-moments .alm-experience-moments-footer {
    margin-top: 18px !important;
    padding: 22px 18px !important;
    border-radius: 22px !important;
    flex-direction: column !important;
    align-items: stretch !important;
    gap: 14px !important;
  }

  html body #alm-experience-moments .alm-experience-moments-note,
  html body #alm-experience-moments .alm-experience-moments-note p {
    max-width: 100% !important;
    font-size: .93rem !important;
    line-height: 1.46 !important;
  }

  html body #alm-experience-moments-cta-row,
  html body #alm-experience-moments-cta-row > .e-con-inner {
    flex-direction: column !important;
    align-items: stretch !important;
    justify-content: flex-start !important;
    width: 100% !important;
    gap: 10px !important;
  }

  html body #alm-experience-moments-cta-row .elementor-widget-button,
  html body #alm-experience-moments-cta-row .alm-button,
  html body #alm-experience-moments-cta-row .elementor-widget-container,
  html body #alm-experience-moments-cta-row .elementor-button-wrapper,
  html body #alm-experience-moments-cta-row a.elementor-button {
    width: 100% !important;
    max-width: 100% !important;
    min-width: 0 !important;
  }
}

@media (max-width: 390px) {
  html body #alm-experience-moments {
    padding-left: 12px !important;
    padding-right: 12px !important;
  }

  html body #alm-experience-moments .alm-moment-card__content,
  html body #alm-experience-moments .alm-experience-moments-footer {
    padding-left: 17px !important;
    padding-right: 17px !important;
  }
}