/* ============================================================
   invest.css — Invest Sibaya page
   Builds on coastal-city.css; adds the growth-story split layout.
   ============================================================ */

/* ---------- INTRO (centred lead, moved out of the hero) ---------- */
.inv-intro {
  position: relative; overflow: hidden;
  display: flex; align-items: center;
  min-height: 360px; padding: 72px 0 132px;
  background: var(--rhythm); text-align: center;
}
.inv-intro .cc-wrap { position: relative; z-index: 1; width: 100%; }
.inv-intro-rule {
  display: block; width: 64px; height: 3px;
  background: var(--alive); margin: 0 auto 28px;
}
.inv-intro-lead {
  font-family: var(--font-body); font-size: 19px; line-height: 1.65;
  color: var(--white); max-width: 820px; margin: 0 auto;
}
/* Decorative ring, anchored to the right edge and bleeding off the section. */
.inv-intro-ring {
  right: -150px; top: 50%; transform: translateY(-50%) scale(.9);
  z-index: 0;
}

/* ---------- PARALLAX BANNER + CTA (between intro and growth story) ---------- */
.inv-parallax {
  position: relative; overflow: hidden;
  display: flex; align-items: center; justify-content: center;
  min-height: 300px; background: var(--black); text-align: center;
  border-radius: 18px 18px 0 0; z-index: 1; margin-top: -28px;
}
.inv-parallax-img {
  position: absolute; inset: 0; width: 100%; height: 100%;
  object-fit: cover; display: block;
}
/* Scrim so the overlaid CTA copy stays legible over the image. */
.inv-parallax::after {
  content: ""; position: absolute; inset: 0;
  background: rgba(0, 0, 0, .45); z-index: 1;
}
.inv-parallax-inner { position: relative; z-index: 2; padding: 56px 0; }
.inv-parallax-inner h2 {
  font-family: var(--font-display); font-weight: 300; font-size: 38px;
  color: var(--white); margin: 0 0 30px;
}

/* Desktop: pin the image to the viewport so it stays still while the section
   scrolls over it — same effect as the .cc-banner aerial banner. */
@media (min-width: 1024px) {
  .inv-parallax {
    background-image: url("../images/lifestyle-panorama.webp");
    background-size: cover;
    background-position: center;
    background-attachment: fixed;
  }
  .inv-parallax-img { display: none; }
}

/* ---------- GROWTH STORY ---------- */
.inv-growth { padding: 96px 0; background: var(--ripple); }
.inv-growth-grid {
  display: grid; grid-template-columns: 1.05fr .95fr;
  gap: 64px; align-items: center;
}
.inv-growth-copy h2 {
  font-family: var(--font-display); font-weight: 300;
  font-size: 40px; line-height: 1.1; color: var(--black);
  margin: 14px 0 24px;
}
.inv-growth-copy p {
  font-family: var(--font-body); font-size: 17px; line-height: 1.6;
  color: #333; margin: 0 0 1.2em;
}
.inv-growth-copy p:last-child { margin-bottom: 0; }
/* Block spacer that keeps the original paragraph gap now that the two
   paragraphs are joined into one (so the word reveal flows continuously). */
.inv-para-gap { display: block; height: 1.2em; }
.inv-growth-media { position: relative; border-radius: 18px; overflow: hidden; line-height: 0; }
.inv-growth-media img { width: 100%; height: 100%; object-fit: cover; display: block; }

/* Rounded section overlap, consistent with coastal-city.css. */
.inv-growth {
  position: relative; z-index: 1;
  border-radius: 18px 18px 0 0;
  margin-top: -28px;
}

/* ---------- RESPONSIVE ---------- */
@media (max-width: 980px) {
  .inv-growth-grid { grid-template-columns: 1fr; gap: 36px; }
  .inv-growth-media { order: -1; }
}
@media (max-width: 640px) {
  .inv-growth { padding: 64px 0; }
  .inv-growth-copy h2 { font-size: 32px; }
  .inv-intro { padding: 48px 0 96px; }
  .inv-intro-lead { font-size: 17px; }
  .inv-parallax { min-height: 240px; margin-top: -28px; }
  .inv-parallax-inner { padding: 40px 0; }
  .inv-parallax-inner h2 { font-size: 30px; }
}