/* ============================================================
   HELIOCASTLE — CLOSING BAND
   The last thing on a service page: a lit ridge at dusk, the mark,
   one question and one button. Built from gradients and two SVG
   silhouettes so it needs no photograph — and so it keeps its
   night in both themes.
   ============================================================ */

.cta-band {
  position: relative;
  isolation: isolate;
  overflow: hidden;
  padding: clamp(56px, 7vw, 96px) var(--pad-x);
  border-top: 1px solid var(--line);
  border-bottom: 1px solid var(--line);
}

/* --- the scene --- */
.cta-scene {
  position: absolute;
  inset: 0;
  z-index: -1;
  background:
    linear-gradient(180deg, #0a0807 0%, #12100c 46%, #070605 100%);
}
/* the sun sitting just behind the ridge */
.cta-sun {
  position: absolute;
  right: 26%;
  bottom: 16%;
  width: 46%;
  padding-bottom: 46%;
  border-radius: 50%;
  background:
    radial-gradient(50% 50% at 50% 50%,
      rgb(var(--accent-light-rgb) / 0.8) 0%,
      rgb(var(--accent-rgb) / 0.34) 32%,
      rgb(var(--accent-rgb) / 0.1) 52%,
      transparent 72%);
  filter: blur(2px);
  animation: cta-glow 9s ease-in-out infinite;
}
@keyframes cta-glow {
  0%, 100% { opacity: 0.75; transform: scale(1); }
  50% { opacity: 1; transform: scale(1.05); }
}

.cta-ridge {
  position: absolute;
  left: 0;
  bottom: 0;
  width: 100%;
  height: 62%;
  fill: #050404;
}
.cta-ridge--far {
  height: 78%;
  fill: #0d0a08;
  opacity: 0.9;
}

/* a haze sitting over the whole scene so text always holds up */
.cta-scene::after {
  content: "";
  position: absolute;
  inset: 0;
  background:
    linear-gradient(90deg, rgba(4, 4, 5, 0.92) 0%, rgba(4, 4, 5, 0.55) 46%, rgba(4, 4, 5, 0.3) 100%);
}

/* --- the content --- */
.cta-inner {
  display: grid;
  grid-template-columns: minmax(0, 1fr) auto;
  align-items: center;
  gap: clamp(26px, 4vw, 60px);
  max-width: 1500px;
  margin: 0 auto;
}
.cta-mark {
  width: 34px;
  height: auto;
  margin-bottom: 18px;
  filter: drop-shadow(0 0 14px rgb(var(--accent-rgb) / 0.35));
}
.cta-title {
  font-family: var(--serif);
  font-size: clamp(24px, 3vw, 40px);
  font-weight: 500;
  letter-spacing: 0.05em;
  text-transform: uppercase;
  margin-bottom: 14px;
}
.cta-band p {
  font-size: 14.5px;
  color: rgb(var(--ink-rgb) / 0.72);
  line-height: 1.85;
  max-width: 56ch;
}