@charset "utf-8";
/* CSS Document */
    /* HERO / CAROUSEL */
    .hero { position: relative; color: #fff; }
    .hero .carousel-item {
      min-height: clamp(420px, 56vh, 720px);
      position: relative;
      background: var(--grind-black);
    }

    .hero-media {
      position: absolute;
      inset: 0;
      width: 100%;
      height: 100%;
      object-fit: cover;
      filter: contrast(1.05) saturate(1.05);
      object-position: 50% 50%;
    }

    /* Focal point classes */
    .focal-center { object-position: 50% 50%; }
    .focal-top { object-position: 50% 20%; }
    .focal-bottom { object-position: 50% 80%; }
    .focal-left { object-position: 20% 50%; }
    .focal-right { object-position: 80% 50%; }
    .focal-top-left { object-position: 20% 20%; }
    .focal-top-right { object-position: 80% 20%; }
    .focal-bottom-left { object-position: 20% 80%; }
    .focal-bottom-right { object-position: 80% 80%; }
    .focal-coach { object-position: 55% 25%; }
    .focal-sprint { object-position: 65% 45%; }
    .focal-group { object-position: 50% 45%; }

    @media (max-width: 767.98px) {
      .focal-coach { object-position: 50% 18%; }
      .focal-sprint { object-position: 60% 35%; }
      .focal-group { object-position: 50% 30%; }
    }

    .hero-overlay {
      position: absolute;
      inset: 0;
      z-index: 1;
      pointer-events: none;
      background: linear-gradient(90deg, rgba(10,10,10,.85), rgba(10,10,10,.35) 70%, rgba(10,10,10,.15));
    }
    
	
/* Default: hidden */
.hero-caption {
  opacity: 0;
  transform: translateY(14px);
  transition:
    opacity 0.8s ease,
    transform 0.8s ease;
  pointer-events: none;
}

/* Fade in when slide becomes active */
.carousel-item.active .hero-caption {
  opacity: 1;
  transform: translateY(0);
  pointer-events: auto;
}

/* Fade out state (applied via Bootstrap timing) */
.hero-caption.fade-out {
  opacity: 0;
  transform: translateY(-10px);
}

/* Optional: reduce motion for accessibility */
@media (prefers-reduced-motion: reduce) {
  .hero-caption {
    transition: none;
    transform: none;
  }
}


	.hero h1,
	.hero h2,
	.hero .lead {
	  text-shadow:
		0 2px 10px rgba(0,0,0,.45),
		0 0 2px rgba(0,0,0,.65);
	}

    .hero .slide-center {
      min-height: clamp(420px, 56vh, 720px);
      display: flex;
      align-items: center;
      position: relative;
      z-index: 2;
    }
    .hero .slide-center > .container { width: 100%; }

    #ghsHero .carousel-control-prev,
    #ghsHero .carousel-control-next,
    #ghsHero .carousel-indicators { z-index: 10; }