/* LVL29 theme 8 footer CTA */
   SECTION: FOOTER CTA — START
   v1's design: the photo fills the whole section behind a dark gradient,
   with the copy centred over it. This markup has the photo in .right-col,
   so that column is lifted out of the flex flow and pinned across the
   section as the background, and .left-col spans the full width on top.
   The gradient is a ::after on .right-col because this markup has no
   overlay div — add one if the backend needs to colour it.
   ============================================================ */
/* clip-path is what makes the parallax work: it turns this section into the
   containing block for its position:fixed child AND clips it to the section
   bounds. v1 gets the same effect with background-attachment:fixed, but that
   only applies to CSS backgrounds and this photo is a real <img>. */
.footer-cta {
  position: relative;
  padding: 295px 0 125px; /* top room — the beige box hangs 130px into this section */
  overflow: hidden;
  clip-path: inset(0);
  background-color: #000000;
}

/* --- Right column becomes the full-bleed parallax background ---
   Fixed to the viewport, clipped to the section by the rule above, so the
   photo holds still while the section scrolls over it. */
.footer-cta .right-col {
  position: fixed;
  top: 0;
  left: 0;
  width: 100%;
  height: 100vh;
  z-index: 0;
}

.footer-cta .footer-cta-image {
  position: absolute;
  top: 0;
  right: 0;
  bottom: 0;
  left: 0;
  line-height: 0;
}

/* max-height:none overrides component-common.css's `.footer-cta-image img
   { max-height: 650px }`, which capped the photo and left a strip of the
   section uncovered at wide viewports. */
.footer-cta .footer-cta-image img {
  width: 100%;
  height: 100%;
  max-height: none;
  object-fit: cover;
  object-position: center center;
}

/* dark gradient over the photo, matching v1 */
.footer-cta .right-col::after {
  content: "";
  position: absolute;
  top: 0;
  right: 0;
  bottom: 0;
  left: 0;
  background: linear-gradient(90deg, rgba(56, 47, 45, 0.5) 0, #000 80%);
}

/* --- Copy sits centred on top ---
   The wrapper must NOT be positioned: it carries .container, which
   component-main.css sets to position:relative, and that made it the offset
   parent for .right-col — pinning the photo to the 1140px container instead
   of to the section. Forced static here; the stacking context moves to
   .left-col instead. */
.footer-cta .footer-cta-wrapper {
  position: static;
  max-width: 1140px;
}

.footer-cta .left-col {
  position: relative;
  z-index: 2;
  width: 100%;
  text-align: center;
}

.footer-cta .footer-cta-content .section-title {
  margin-left: auto;
  margin-right: auto;
}
.footer-cta .footer-cta-content h3{
  margin-left: auto;
  margin-right: auto;
}
.footer-cta .footer-cta-content .section-content {
  margin: 0 auto 30px;
  padding: 25px 0;
  border-top: 1px solid #9f662d;
  border-bottom: 1px solid #9f662d;
}

.footer-cta .footer-cta-content .cta-text {
  font-weight: 300;
}

.footer-cta .footer-cta-content a:not(.btn) {
  color: #b98a52;
  text-decoration: underline;
}

/* --- Button: uppercase, letterspaced, with v1's ring --- */
.footer-cta .cta-buttons {
  display: flex;
  justify-content: center;
  margin-top: 50px;
  padding-top: 25px;
}

.footer-cta .cta-buttons > a {
  position: relative;
  margin: 50px 0;
  text-transform: uppercase;
  letter-spacing: 1px;
}

/* circle ring decoration around the button, like live site */
.footer-cta .cta-buttons > a::after {
  content: "";
  display: block;
  position: absolute;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
  width: 130px;
  height: 130px;
  background: url("../../../../../themes/lvl29-v2/assets/images/icons/half-circle.svg") no-repeat 50%;
  opacity: 0.9;
  pointer-events: none;
}
/* ============================================================
   SECTION: FOOTER CTA — END