/* Shared Contour Ledger raster hero system. */
.tc-direct-port {
  --tc-hero-fallback: #24475c;
  --tc-hero-position: 58% 50%;
  --tc-hero-min-height: 600px;
  --tc-hero-scrim:
    linear-gradient(90deg, rgba(12, 29, 40, 0.82) 0%, rgba(12, 29, 40, 0.68) 42%, rgba(12, 29, 40, 0.34) 68%, rgba(12, 29, 40, 0.1) 100%),
    linear-gradient(180deg, rgba(12, 29, 40, 0.08) 0%, rgba(12, 29, 40, 0.08) 60%, rgba(12, 29, 40, 0.34) 100%);
}

.page-home {
  --tc-hero-image: url("/images/hero-backgrounds/home-3840x2160.webp");
  --tc-hero-position: 55% 50%;
  --tc-hero-min-height: 740px;
}

.page-about {
  --tc-hero-image: url("/images/hero-backgrounds/about-3840x2160.webp");
  --tc-hero-position: 58% 50%;
}

.page-coaching {
  --tc-hero-image: url("/images/hero-backgrounds/coaching-3840x2160.webp");
  --tc-hero-position: 62% 50%;
}

.page-consulting {
  --tc-hero-image: url("/images/hero-backgrounds/consulting-3840x2160.webp");
  --tc-hero-position: 58% 50%;
}

.page-how-it-works {
  --tc-hero-image: url("/images/hero-backgrounds/how-it-works-3840x2160.webp");
  --tc-hero-position: 64% 50%;
}

.page-testimonials {
  --tc-hero-image: url("/images/hero-backgrounds/testimonials-3840x2160.webp");
  --tc-hero-position: 58% 50%;
}

.page-faq {
  --tc-hero-image: url("/images/hero-backgrounds/faq-3840x2160.webp");
  --tc-hero-position: 58% 50%;
}

.page-contact {
  --tc-hero-image: url("/images/hero-backgrounds/contact-3840x2160.webp");
  --tc-hero-position: 62% 50%;
  --tc-hero-min-height: 640px;
}

.tc-direct-port .hero {
  position: relative;
  isolation: isolate;
  min-height: var(--tc-hero-min-height);
  overflow: hidden;
  background-color: var(--tc-hero-fallback);
  background-image: var(--tc-hero-image);
  background-repeat: no-repeat;
  background-position: var(--tc-hero-position);
  background-size: cover;
}

.tc-direct-port .hero::before {
  content: "";
  position: absolute;
  inset: 0;
  z-index: 1;
  pointer-events: none;
  background: var(--tc-hero-scrim);
  opacity: 0;
}

@media (min-width: 1600px) {
  .page-home { --tc-hero-position: 52% 50%; }
  .page-about { --tc-hero-position: 56% 50%; }
  .page-coaching { --tc-hero-position: 60% 50%; }
  .page-consulting { --tc-hero-position: 55% 50%; }
  .page-how-it-works { --tc-hero-position: 62% 50%; }
  .page-testimonials { --tc-hero-position: 54% 50%; }
  .page-faq { --tc-hero-position: 55% 50%; }
  .page-contact { --tc-hero-position: 58% 50%; }
}

@media (max-width: 1080px) {
  .page-home { --tc-hero-position: 62% 50%; }
  .page-about { --tc-hero-position: 65% 50%; }
  .page-coaching { --tc-hero-position: 70% 50%; }
  .page-consulting { --tc-hero-position: 66% 50%; }
  .page-how-it-works { --tc-hero-position: 72% 50%; }
  .page-testimonials { --tc-hero-position: 65% 50%; }
  .page-faq { --tc-hero-position: 64% 50%; }
  .page-contact { --tc-hero-position: 70% 50%; }
}

@media (max-width: 600px) {
  .tc-direct-port {
    --tc-hero-min-height: 620px;
    --tc-hero-scrim:
      linear-gradient(90deg, rgba(12, 29, 40, 0.86) 0%, rgba(12, 29, 40, 0.76) 58%, rgba(12, 29, 40, 0.46) 100%),
      linear-gradient(180deg, rgba(12, 29, 40, 0.1) 0%, rgba(12, 29, 40, 0.14) 58%, rgba(12, 29, 40, 0.42) 100%);
  }

  .page-home {
    --tc-hero-position: 67% 50%;
    --tc-hero-min-height: 680px;
  }
  .page-about { --tc-hero-position: 70% 50%; }
  .page-coaching { --tc-hero-position: 76% 50%; }
  .page-consulting { --tc-hero-position: 72% 50%; }
  .page-how-it-works { --tc-hero-position: 78% 50%; }
  .page-testimonials { --tc-hero-position: 72% 50%; }
  .page-faq { --tc-hero-position: 68% 50%; }
  .page-contact {
    --tc-hero-position: 76% 50%;
    --tc-hero-min-height: 760px;
  }
}

@media (max-width: 400px) {
  .page-home { --tc-hero-position: 69% 50%; }
  .page-about { --tc-hero-position: 72% 50%; }
  .page-coaching { --tc-hero-position: 78% 50%; }
  .page-consulting { --tc-hero-position: 74% 50%; }
  .page-how-it-works { --tc-hero-position: 80% 50%; }
  .page-testimonials { --tc-hero-position: 74% 50%; }
  .page-faq { --tc-hero-position: 70% 50%; }
  .page-contact { --tc-hero-position: 78% 50%; }
}

@media (forced-colors: active) {
  .tc-direct-port .hero {
    background-color: Canvas;
    background-image: none;
    color: CanvasText;
  }

  .tc-direct-port .hero::before {
    display: none;
  }

  .tc-direct-port .hero :is(.hero-eyebrow, h1, h1 em, .lede, .sub, .meta, .meta strong, .navlinks a, .nav-cta .phone, .btn) {
    color: CanvasText;
  }

  .tc-direct-port .hero .brand img {
    filter: none;
  }

  .tc-direct-port .hero .nav-toggle span {
    background: CanvasText;
  }
}
