:root {
  --off-white: #f5f6f4;
  --warm-ivory: #e8eeec;
  --warm-ivory-deep: #dde5e3;
  --soft-tone: #d8e0df;
  --soft-tone-deep: #c8d3d2;
  --gold: #ccab69;
  --gold-deep: #af8b4f;
  --anchor: #243137;
  --sage: #60716d;
  --story-card-bg: #b8c2be;
  --quote-strip-bg: rgba(255, 255, 255, 0.42);
  --section-alt-bg: linear-gradient(180deg, rgba(216, 224, 223, 0.92), rgba(200, 211, 210, 0.94));
  --cta-block-bg: linear-gradient(135deg, rgba(111, 143, 155, 0.18), rgba(255, 255, 255, 0.5));
  --body-glow: rgba(111, 143, 155, 0.22);
}

.hero {
  background: url("./lake.jpg") center center / cover no-repeat;
}

.final-card {
  background:
    var(--final-overlay),
    url("./modern%20home%20at%20twilight.jpg") center center / cover no-repeat;
}

.trails-video-band {
  padding-top: 0;
  padding-bottom: 0;
}

.video-band-frame {
  position: relative;
  overflow: hidden;
  min-height: 100svh;
  background: #0f1417;
}

.video-band-frame::before,
.video-band-frame::after {
  content: "";
  position: absolute;
  inset: 0;
  z-index: 1;
  pointer-events: none;
}

.video-band-frame::before {
  background:
    linear-gradient(
      180deg,
      var(--off-white) 0%,
      rgba(245, 246, 244, 0.94) 8%,
      rgba(245, 246, 244, 0.48) 16%,
      rgba(245, 246, 244, 0) 26%,
      rgba(245, 246, 244, 0) 74%,
      rgba(245, 246, 244, 0.48) 84%,
      rgba(245, 246, 244, 0.94) 92%,
      var(--off-white) 100%
    );
}

.video-band-frame::after {
  content: "";
  position: absolute;
  inset: 0;
  background:
    linear-gradient(180deg, rgba(22, 18, 14, 0.18), rgba(22, 18, 14, 0.5)),
    radial-gradient(circle at center, rgba(255, 255, 255, 0.04), transparent 52%);
  z-index: 1;
  pointer-events: none;
}

.video-band-fallback,
.video-band-frame iframe {
  position: absolute;
  top: 50%;
  left: 50%;
  width: 177.77777778vh;
  min-width: 100%;
  height: 56.25vw;
  min-height: 100%;
  transform: translate(-50%, -50%);
}

.video-band-fallback {
  object-fit: cover;
  transition: opacity 220ms ease;
  z-index: 0;
}

.video-band-frame iframe {
  border: 0;
  opacity: 0;
  transition: opacity 220ms ease;
  pointer-events: none;
  z-index: 0;
}

.video-band-frame.is-playing .video-band-fallback {
  opacity: 0;
}

.video-band-frame.is-playing iframe {
  opacity: 1;
}