.inner-page-body-wrapper .inner-hero-section {
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  /* a fixed 56vw band anchored to the top of the wrapper — it does not belong
     to the intro and does not shrink with the copy */
  height: 56vw;
  overflow: hidden;
  z-index: 0;
}

.inner-hero-section .inner-hero-container {
  height: 100%;
  padding: 0;
}

.inner-hero-section .inner-hero-img,
.inner-hero-section .image-wrap {
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
}

.inner-hero-section .inner-hero-img img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  object-position: top center;
}

/* The framework only sets .mob-bg { display: block } INSIDE its 767 block
   (component-common.css:3746) — nothing hides it above that. Without this base
   rule both banners stack on desktop. */
.inner-hero-section .mob-bg {
  display: none;
}

/* Keep the backend hero title visible above the image overlays. */
.inner-page-body-wrapper .inner-hero-section .inner-hero-content {
  position: absolute;
  z-index: 2;
  inset: 0;
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 100px 24px 40px;
  text-align: center;
}

.inner-page-body-wrapper .inner-hero-section .inner-hero-title {
  max-width: 960px;
 }

/* bottom fade over the lower 60% only, so the top of the photo stays clean */
.inner-page-body-wrapper:not(.page-gl) .inner-hero-section::before,
.page-gl .inner-hero-section > .lvl-shade-before {
  content: "";
  display: block;
  position: absolute;
  z-index: 1;
  bottom: 0;
  left: 0;
  width: 100%;
  height: 60%;
  background: linear-gradient(
    180deg,
    rgba(0, 0, 0, 0) 25%,
    var(--base-color) 80%
);
}

/* large radial vignette; this is what makes the photo read as emerging from
   black. A plain linear fade alone looks flat. */
.inner-page-body-wrapper:not(.page-gl) .inner-hero-section::after,
.page-gl .inner-hero-section > .lvl-shade-after {
  content: "";
  display: block;
  position: absolute;
  z-index: 1;
  top: calc(50% - 225px);
  left: 50%;
  width: 120%;
  height: 100vw;
  border-radius: 50%;
 /* background: radial-gradient(
    ellipse at center,
    var(--base-color) 0,
    rgba(0, 0, 0, 0.25) 100%
); */
background: radial-gradient(
  ellipse at center,
  var(--base-color) 0%,
  color-mix(in srgb, var(--base-color) 25%, transparent) 100%
);
  transform: translate(-50%, -50%);
  opacity: 0.85;
}
/* ============================================================
   SECTION: INNER HERO BANNER — END
   ============================================================ */

.inner-page-body-wrapper {
  position: relative;
  overflow: hidden;
}

.inner-page-body-wrapper .inner-intro,
.inner-page-body-wrapper .amenities-page-gallery {
  position: relative;
  z-index: 2;
}

/* LVL29 v2 custom pages: a custom Contact page can omit its hero image.
   Keep that title in a visible, in-flow banner instead of reserving an empty
   absolute image area. Website pages and image-backed custom heroes retain
   the standard backdrop treatment above. */
.theme-lvl29.v2.custom_pages .inner-page-body-wrapper .inner-hero-section.no-hero-img,
.theme-lvl29.v2.custom_pages .inner-page-body-wrapper .contact-inner-hero {
  position: relative;
  height: clamp(300px, 35vw, 520px);
  background: var(--base-color, #000000);
}

.theme-lvl29.v2.custom_pages .inner-page-body-wrapper .inner-hero-section.no-hero-img + .inner-intro.intro-type-1,
.theme-lvl29.v2.custom_pages .inner-page-body-wrapper .contact-inner-hero + .inner-intro.intro-type-1 {
  padding-top: 90px;
}

/* Amenities intro sits over the shared hero photo. */
.inner-page-body-wrapper .intro-type-1 {
  position: relative;
  z-index: 5;
  background: transparent;
  padding-top: 180px;
  padding-bottom: 90px;
}

.inner-page-body-wrapper .intro-type-1 .left-col {
  display: none;
}

.inner-page-body-wrapper .intro-type-1 .intro-container {
  display: block;
}

.inner-page-body-wrapper .intro-type-1 .right-col {
  width: 100%;
}

.inner-page-body-wrapper .intro-type-1 .content-wrapper {
  width: 100%;
  max-width: 665px;
  margin: 0 auto;
  padding: 0 20px;
  text-align: center;
}

.inner-page-body-wrapper .intro-type-1 .intro-heading .section-title {
  margin: 0 0 25px;
}

.inner-page-body-wrapper .intro-type-1 .intro-heading .section-subtitle {
  margin: 0 0 15px;
  line-height: 1.64;
}

.inner-page-body-wrapper .intro-type-1 .intro-content .section-content a {
  color: #b98a52;
  text-decoration: underline;
}

.inner-page-body-wrapper .intro-type-1 .section-buttons {
  justify-content: center;
  margin-top: 25px;
}

@media screen and (max-width: 767px) {
  .inner-page-body-wrapper .intro-type-1 {
    padding-top: 120px;
    padding-bottom: 60px;
  }
}


/* Amenities banner title is intentionally rendered before the intro H2. */
/* .inner-page-body-wrapper .inner-intro .inner-hero-title {
  margin: 0 0 20px;
  font-size: clamp(2rem, 3vw, 3.5rem);
  line-height: 1.15;
  text-shadow: none;
} */

/* ===== APPLY NOW BUTTON (INNER / GALLERY) — START =====
   Full thin ring 5px outside the disc. Base styles live in
   component-common.css. */
.theme-lvl29.v2 a.apply-link:not(.circle-cta)::after {
  border: 1px solid #ffffff;
}
/* ===== APPLY NOW BUTTON (INNER / GALLERY) — END ===== */