/* ============================================
   CHENANGO SPORTSZONE — Stylesheet
   Built by Williamson Automation
   Indoor Multi-Sport Training Facility
   Greene, NY
   ============================================ */

/* --- RESET & BASE --- */

*, *::before, *::after {
  margin: 0;
  padding: 0;
  box-sizing: border-box;
}

html {
  scroll-behavior: smooth;
  -webkit-text-size-adjust: 100%;
}

body {
  font-family: var(--font-body);
  font-size: 1rem;
  line-height: 1.7;
  color: var(--color-text);
  background-color: var(--color-bg);
  overflow-x: hidden;
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
  text-rendering: optimizeLegibility;
}

img {
  max-width: 100%;
  height: auto;
  display: block;
}

a {
  color: inherit;
  text-decoration: none;
}

ul, ol {
  list-style: none;
}

button {
  font: inherit;
  cursor: pointer;
  border: none;
  background: none;
}

/* Consistent image aspect ratios */
.aspect-4-3 { aspect-ratio: 4/3; }
.aspect-16-9 { aspect-ratio: 16/9; }
.aspect-1-1 { aspect-ratio: 1/1; }
.aspect-4-3 img,
.aspect-16-9 img,
.aspect-1-1 img {
  width: 100%;
  height: 100%;
  object-fit: cover;
}

/* Face-aware image positioning */
.face-top img,
img.face-top { object-position: top; }

.face-center img,
img.face-center { object-position: center 25%; }

.face-bottom img,
img.face-bottom { object-position: center 75%; }

/* Global overflow prevention — prevents text from escaping grid containers */
[class*="grid"] > * {
  min-width: 0;
}

.card, .testimonial-card, .package-card, .pricing-card, .tier-card, .sim-card, .bento-item {
  overflow: hidden;
  min-width: 0;
}

.card p, .card__body p, .card__content p, .card__detail,
.testimonial-card p, .testimonial-card__quote,
.package-card p, .package-card h3, .package-card__ideal,
.bento-item__tagline {
  word-wrap: break-word;
  overflow-wrap: break-word;
  white-space: normal;
}


/* --- CUSTOM PROPERTIES --- */

:root {
  /* Colors */
  --color-primary: #1B1F23;
  --color-primary-light: #2A2F35;
  --color-primary-dark: #0D1117;
  --color-primary-rgb: 27, 31, 35;
  --color-secondary: #00E676;
  --color-secondary-light: #69F0AE;
  --color-secondary-rgb: 0, 230, 118;
  --color-accent: #FF5722;
  --color-accent-dark: #E64A19;
  --color-accent-rgb: 255, 87, 34;
  --color-bg: #F5F5F0;
  --color-surface: #EAEAE5;
  --color-text: #1B1F23;
  --color-text-secondary: #6B7280;
  --color-text-light: #F5F5F0;
  --color-border: #D1D5DB;

  /* Sport Tag Colors */
  --sport-baseball: #FF5722;
  --sport-softball: #FF9800;
  --sport-soccer: #4CAF50;
  --sport-fieldhockey: #E91E63;
  --sport-golf: #2196F3;
  --sport-speed: #9C27B0;
  --sport-all: #607D8B;
  --sport-teams: #795548;

  /* Typography */
  --font-heading: 'Oswald', 'Impact', 'Arial Narrow', sans-serif;
  --font-body: 'Inter', -apple-system, BlinkMacSystemFont, 'Segoe UI', sans-serif;

  /* Spacing */
  --section-padding-mobile: 5rem 1.5rem;
  --section-padding-desktop: 8rem 4rem;
  --content-max-width: 1200px;
  --gap: 2rem;
  --gap-sm: 1rem;
  --gap-lg: 3rem;

  /* Animation */
  --transition-fast: 0.2s ease;
  --transition-base: 0.3s ease;
  --transition-slow: 0.6s ease;

  /* Nav */
  --nav-height: 70px;
  --nav-bg: rgba(13, 17, 23, 0.85);
  --nav-blur: 20px;

  /* Shadows */
  --shadow-card: 0 1px 2px rgba(0,0,0,0.06), 0 4px 12px rgba(0,0,0,0.06), 0 12px 32px rgba(0,0,0,0.04);
  --shadow-card-hover: 0 2px 4px rgba(0,0,0,0.08), 0 8px 20px rgba(0,0,0,0.1), 0 20px 48px rgba(0,0,0,0.08);
  --shadow-image: 0 4px 16px rgba(0,0,0,0.1), 0 12px 32px rgba(0,0,0,0.08);

  /* Border Radius */
  --radius-sm: 6px;
  --radius-md: 12px;
  --radius-lg: 16px;
  --radius-pill: 100px;
}


/* --- TYPOGRAPHY --- */

h1, h2, h3, h4, h5, h6 {
  font-family: var(--font-heading);
  line-height: 1.2;
  color: var(--color-text);
}

h1 {
  font-size: clamp(2.5rem, 6vw, 5.5rem);
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: 0.02em;
}

h2 {
  font-size: clamp(1.8rem, 4vw, 3rem);
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: 0.02em;
}

h3 {
  font-size: clamp(1.2rem, 2.5vw, 1.6rem);
  font-weight: 600;
}

h4 {
  font-size: 1.125rem;
  font-weight: 600;
}

p {
  max-width: 65ch;
  margin-bottom: 1em;
}

p:last-child {
  margin-bottom: 0;
}

.section-label {
  font-family: var(--font-body);
  font-size: 0.8125rem;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: 0.15em;
  color: var(--color-secondary);
  margin-bottom: 0.75rem;
  display: block;
}

.section-label--light {
  color: var(--color-secondary-light);
  text-shadow: 0 1px 8px rgba(0,0,0,0.6), 0 2px 20px rgba(0,0,0,0.3);
}

.section-heading {
  margin-bottom: 1.5rem;
}

.section-body {
  color: var(--color-text-secondary);
  font-size: 1.0625rem;
  line-height: 1.7;
  margin-bottom: 2rem;
}

.text-accent {
  color: var(--color-secondary);
}

.text-orange {
  color: var(--color-accent);
}

.price {
  color: var(--color-accent);
  font-weight: 700;
}

.info-highlight {
  color: var(--color-accent);
  font-weight: 600;
}


/* --- LAYOUT UTILITIES --- */

.container {
  width: 100%;
  max-width: var(--content-max-width);
  margin: 0 auto;
  padding-left: clamp(1.5rem, 5vw, 4rem);
  padding-right: clamp(1.5rem, 5vw, 4rem);
}

.section {
  padding: var(--section-padding-mobile);
}

.section--light {
  background: var(--color-bg);
}

.section--surface {
  background: var(--color-surface);
}

.section--dark {
  background: var(--color-primary);
  color: var(--color-text-light);
}

.section--dark h2,
.section--dark h3,
.section--dark h4 {
  color: var(--color-text-light);
}

.section--cinematic {
  background: var(--color-primary-dark);
  color: var(--color-text-light);
  position: relative;
  overflow: hidden;
}

.section--cinematic h2,
.section--cinematic h3 {
  color: var(--color-text-light);
}

.section__inner {
  max-width: var(--content-max-width);
  margin: 0 auto;
}

.content-wrapper {
  max-width: var(--content-max-width);
  margin-left: auto;
  margin-right: auto;
}

/* Subtle background texture for dark sections */
.textured-bg {
  background-image:
    radial-gradient(circle at 20% 50%, rgba(var(--color-secondary-rgb), 0.03), transparent 50%),
    radial-gradient(circle at 80% 20%, rgba(var(--color-accent-rgb), 0.02), transparent 40%);
}

/* Section centered text layout */
.section-header {
  text-align: center;
  margin-bottom: var(--gap-lg);
}

.section-header p {
  margin-left: auto;
  margin-right: auto;
}

/* Split layout */
.split-layout {
  display: flex;
  flex-direction: column;
  gap: var(--gap-lg);
}

.split-layout__text {
  flex: 1;
}

.split-layout__image {
  flex: 1;
}

.split-layout__image img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  border-radius: var(--radius-md);
}


/* --- NAVIGATION --- */

.site-nav {
  position: fixed;
  top: 0;
  left: 0;
  width: 100%;
  height: var(--nav-height);
  z-index: 1000;
  background: var(--nav-bg);
  backdrop-filter: blur(var(--nav-blur));
  -webkit-backdrop-filter: blur(var(--nav-blur));
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 0 1.5rem;
  transition: background var(--transition-base), box-shadow var(--transition-base);
}

.site-nav.nav--scrolled {
  background: rgba(13, 17, 23, 0.95);
  border-bottom: 1px solid rgba(255, 255, 255, 0.08);
  box-shadow: 0 4px 20px rgba(0, 0, 0, 0.15);
}

/* Logo */
.nav__logo {
  display: flex;
  align-items: center;
  gap: 0.5rem;
  z-index: 1001;
}

.nav__logo img {
  height: 40px;
  width: auto;
}

.nav__logo-text {
  font-family: var(--font-heading);
  font-size: 1.5rem;
  font-weight: 700;
  color: var(--color-text-light);
  text-transform: uppercase;
  letter-spacing: 0.02em;
}

.nav__logo-text .logo-accent {
  color: var(--color-secondary);
}

/* Desktop nav links — hidden on mobile */
.nav__links {
  display: none;
  align-items: center;
  gap: 2rem;
}

.nav__link {
  font-family: var(--font-body);
  font-size: 0.875rem;
  font-weight: 600;
  text-transform: uppercase;
  letter-spacing: 0.08em;
  color: var(--color-text-light);
  position: relative;
  padding: 0.25rem 0;
  transition: color var(--transition-base);
}

.nav__link::after {
  content: '';
  position: absolute;
  bottom: 0;
  left: 50%;
  width: 0;
  height: 2px;
  background: var(--color-secondary);
  transition: width var(--transition-base), left var(--transition-base);
}

.nav__link--active {
  color: var(--color-secondary);
}

.nav__link--active::after {
  width: 100%;
  left: 0;
}

/* Nav CTA button */
.nav__cta {
  display: none;
  align-items: center;
  gap: 0.5rem;
  background: var(--color-accent);
  color: white;
  padding: 0.625rem 1.25rem;
  border-radius: var(--radius-sm);
  font-family: var(--font-body);
  font-size: 0.8125rem;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: 0.08em;
  transition: background var(--transition-base), transform var(--transition-base);
}

/* Mobile phone icon button in nav */
.nav__phone-btn {
  display: flex;
  align-items: center;
  justify-content: center;
  width: 44px;
  height: 44px;
  background: var(--color-accent);
  border-radius: var(--radius-sm);
  color: white;
  font-size: 1.125rem;
  z-index: 1001;
}

/* Hamburger */
.nav__hamburger {
  display: flex;
  flex-direction: column;
  justify-content: center;
  align-items: center;
  width: 44px;
  height: 44px;
  gap: 5px;
  z-index: 1001;
  cursor: pointer;
}

.nav__hamburger span {
  display: block;
  width: 24px;
  height: 2px;
  background: var(--color-text-light);
  transition: transform var(--transition-base), opacity var(--transition-base);
  transform-origin: center;
}

.nav__hamburger.is-open span:nth-child(1) {
  transform: translateY(7px) rotate(45deg);
}

.nav__hamburger.is-open span:nth-child(2) {
  opacity: 0;
}

.nav__hamburger.is-open span:nth-child(3) {
  transform: translateY(-7px) rotate(-45deg);
}

/* Mobile nav overlay */
.nav__overlay {
  position: fixed;
  inset: 0;
  z-index: 999;
  background: rgba(13, 17, 23, 0.97);
  backdrop-filter: blur(20px);
  -webkit-backdrop-filter: blur(20px);
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  text-align: center;
  gap: 2rem;
  opacity: 0;
  visibility: hidden;
  transition: opacity 0.4s ease, visibility 0.4s ease;
}

.nav__overlay.is-open {
  opacity: 1;
  visibility: visible;
}

.nav__overlay a {
  font-family: var(--font-heading);
  font-size: 1.75rem;
  font-weight: 600;
  color: var(--color-text-light);
  text-transform: uppercase;
  letter-spacing: 0.05em;
  transition: color var(--transition-base);
}

.nav__overlay a.nav__link--active {
  color: var(--color-secondary);
}

.nav__overlay .nav__overlay-cta {
  display: inline-flex;
  align-items: center;
  gap: 0.5rem;
  background: var(--color-accent);
  color: white;
  padding: 1rem 2rem;
  border-radius: var(--radius-sm);
  font-family: var(--font-body);
  font-size: 1rem;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: 0.08em;
  margin-top: 1rem;
}

@media (hover: hover) {
  .nav__link:hover {
    color: var(--color-secondary);
  }

  .nav__link:hover::after {
    width: 100%;
    left: 0;
  }

  .nav__cta:hover {
    background: var(--color-accent-dark);
    transform: scale(1.02);
  }

  .nav__overlay a:hover {
    color: var(--color-secondary);
  }
}


/* --- HERO --- */

.hero {
  position: relative;
  min-height: 100svh;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  overflow: hidden;
}

.hero__image {
  position: absolute;
  inset: 0;
  z-index: 0;
}

.hero__image img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  will-change: transform;
}

.hero__overlay {
  position: absolute;
  inset: 0;
  z-index: 1;
  background: linear-gradient(
    to bottom,
    rgba(13, 17, 23, 0.15) 0%,
    rgba(13, 17, 23, 0.4) 40%,
    rgba(13, 17, 23, 0.8) 100%
  );
}

/* Vignette for extra depth */
.hero__overlay::after {
  content: '';
  position: absolute;
  inset: 0;
  background: radial-gradient(ellipse at center, transparent 50%, rgba(0, 0, 0, 0.3) 100%);
}

.hero__content {
  position: relative;
  z-index: 2;
  text-align: center;
  display: flex;
  flex-direction: column;
  align-items: center;
  padding: calc(var(--nav-height) + 2rem) 1.5rem 6rem;
  max-width: 900px;
  width: 100%;
}

.hero__label {
  width: 100%;
  text-align: center;
  font-family: var(--font-body);
  font-size: 0.75rem;
  font-weight: 600;
  letter-spacing: 0.15em;
  text-transform: uppercase;
  color: var(--color-secondary-light);
  text-shadow: 0 1px 8px rgba(0,0,0,0.6), 0 2px 20px rgba(0,0,0,0.3);
  margin-bottom: 1.25rem;
}

.hero__heading {
  font-family: var(--font-heading);
  font-size: clamp(2.5rem, 6vw, 5.5rem);
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: -0.01em;
  color: white;
  text-shadow: 0 2px 20px rgba(0,0,0,0.5), 0 4px 40px rgba(0,0,0,0.3);
  line-height: 1.05;
  margin-bottom: 1.5rem;
}

.hero__subheading {
  font-family: var(--font-body);
  font-size: clamp(1rem, 2vw, 1.25rem);
  font-weight: 400;
  color: rgba(255, 255, 255, 0.9);
  line-height: 1.6;
  max-width: 600px;
  margin-bottom: 2.5rem;
  text-shadow: 0 1px 8px rgba(0,0,0,0.3);
}

.hero__cta {
  display: flex;
  flex-wrap: wrap;
  justify-content: center;
  gap: 1rem;
  margin-bottom: 1.5rem;
}

.hero__phone {
  display: inline-flex;
  align-items: center;
  gap: 0.5rem;
  color: var(--color-accent);
  font-family: var(--font-body);
  font-size: 1.125rem;
  font-weight: 700;
  letter-spacing: 0.02em;
  text-shadow: 0 1px 8px rgba(0,0,0,0.3);
  margin-bottom: 2rem;
}

.hero__phone svg,
.hero__phone .phone-icon {
  width: 20px;
  height: 20px;
}

/* Scroll indicator */
.scroll-indicator {
  position: absolute;
  bottom: 2rem;
  left: 50%;
  transform: translateX(-50%);
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 0.5rem;
  color: rgba(255, 255, 255, 0.7);
  font-size: 0.7rem;
  letter-spacing: 0.1em;
  text-transform: uppercase;
  z-index: 2;
}

.scroll-indicator__arrow {
  width: 24px;
  height: 24px;
  border-left: 2px solid rgba(255, 255, 255, 0.5);
  border-bottom: 2px solid rgba(255, 255, 255, 0.5);
  transform: rotate(-45deg);
}

@keyframes breathe {
  0%, 100% { opacity: 0.5; transform: translateX(-50%) translateY(0); }
  50% { opacity: 1; transform: translateX(-50%) translateY(8px); }
}


/* --- INNER PAGE HEADERS --- */

.inner-hero {
  position: relative;
  min-height: 40vh;
  display: flex;
  align-items: center;
  justify-content: center;
  overflow: hidden;
}

.inner-hero__image {
  position: absolute;
  inset: 0;
  z-index: 0;
}

.inner-hero__image img {
  width: 100%;
  height: 100%;
  object-fit: cover;
}

.inner-hero__overlay {
  position: absolute;
  inset: 0;
  z-index: 1;
  background: linear-gradient(
    to bottom,
    rgba(13, 17, 23, 0.4) 0%,
    rgba(13, 17, 23, 0.7) 100%
  );
}

.inner-hero__content {
  position: relative;
  z-index: 2;
  text-align: center;
  display: flex;
  flex-direction: column;
  align-items: center;
  padding: calc(var(--nav-height) + 3rem) 1.5rem 3rem;
}

.inner-hero__label {
  width: 100%;
  text-align: center;
  font-family: var(--font-body);
  font-size: 0.8125rem;
  font-weight: 700;
  letter-spacing: 0.15em;
  text-transform: uppercase;
  color: var(--color-secondary-light);
  text-shadow: 0 1px 8px rgba(0,0,0,0.6), 0 2px 20px rgba(0,0,0,0.3);
  margin-bottom: 1rem;
}

.inner-hero__heading {
  font-family: var(--font-heading);
  font-size: clamp(2rem, 5vw, 3.5rem);
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: 0.02em;
  color: white;
  text-shadow: 0 2px 8px rgba(0,0,0,0.5);
  margin-bottom: 1rem;
}

.inner-hero__breadcrumb {
  font-family: var(--font-body);
  font-size: 0.875rem;
  color: rgba(255, 255, 255, 0.7);
  text-shadow: 0 1px 4px rgba(0,0,0,0.3);
}

.inner-hero__breadcrumb a {
  color: rgba(255, 255, 255, 0.7);
  transition: color var(--transition-fast);
}

.inner-hero__breadcrumb span {
  color: var(--color-secondary-light);
}

@media (hover: hover) {
  .inner-hero__breadcrumb a:hover {
    color: var(--color-secondary);
  }
}


/* --- SECTIONS (shared) --- */

/* Trust Stats — dark background section */
.trust-stats {
  background: var(--color-primary);
  padding: 4rem 1.5rem;
  position: relative;
  z-index: 2;
  background-image: radial-gradient(circle at 30% 50%, rgba(0, 230, 118, 0.04), transparent 60%);
}

.trust-stats__inner {
  max-width: var(--content-max-width);
  margin: 0 auto;
  display: grid;
  grid-template-columns: repeat(2, 1fr);
  gap: 2rem;
}

.trust-stat {
  text-align: center;
  padding: 1.5rem 1rem;
  background: rgba(255, 255, 255, 0.06);
  backdrop-filter: blur(12px) saturate(150%);
  -webkit-backdrop-filter: blur(12px) saturate(150%);
  border: 1px solid rgba(255, 255, 255, 0.08);
  border-radius: var(--radius-md);
}

.trust-stat__number {
  font-size: 2.5rem;
  font-weight: 700;
  font-family: var(--font-heading);
  line-height: 1;
  color: var(--color-secondary);
  text-shadow: 0 0 20px rgba(0, 230, 118, 0.3);
}

.trust-stat__label {
  font-size: 0.875rem;
  color: rgba(255, 255, 255, 0.8);
  margin-top: 0.5rem;
  font-weight: 500;
}


/* --- SECTION: Sport Bento Grid --- */

.bento-section {
  padding: var(--section-padding-mobile);
  background: var(--color-bg);
}

.bento-grid {
  display: grid;
  grid-template-columns: repeat(2, 1fr);
  gap: 1rem;
}

.bento-item {
  position: relative;
  overflow: hidden;
  border-radius: var(--radius-md);
  min-height: 200px;
  cursor: pointer;
}

.bento-item--large {
  grid-column: span 2;
  min-height: 280px;
}

.bento-item__image {
  position: absolute;
  inset: 0;
}

.bento-item__image img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  transition: transform 0.5s ease;
}

.bento-item__content {
  position: relative;
  z-index: 2;
  padding: 1.5rem;
  display: flex;
  flex-direction: column;
  justify-content: flex-end;
  height: 100%;
  background: linear-gradient(to top, rgba(0, 0, 0, 0.75), transparent 65%);
  color: white;
}

.bento-item__sport {
  font-family: var(--font-heading);
  font-size: 1.25rem;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: 0.02em;
  margin-bottom: 0.25rem;
  text-shadow: 0 1px 6px rgba(0, 0, 0, 0.4);
}

.bento-item__tagline {
  font-size: 0.875rem;
  color: rgba(255, 255, 255, 0.85);
  line-height: 1.4;
  text-shadow: 0 1px 4px rgba(0, 0, 0, 0.3);
}

.bento-item__link {
  display: inline-flex;
  align-items: center;
  gap: 0.25rem;
  font-size: 0.8125rem;
  font-weight: 600;
  color: var(--color-secondary-light);
  margin-top: 0.75rem;
  text-transform: uppercase;
  letter-spacing: 0.08em;
  transition: transform var(--transition-fast);
}

@media (hover: hover) {
  .bento-item:hover .bento-item__image img {
    transform: scale(1.05);
  }

  .bento-item:hover .bento-item__content {
    background: linear-gradient(to top, rgba(0, 0, 0, 0.65), transparent 65%);
  }

  .bento-item:hover .bento-item__link {
    transform: translateX(4px);
  }
}


/* --- SECTION: HitTrax Feature --- */

.hittrax-section {
  position: relative;
  padding: var(--section-padding-mobile);
  background: var(--color-primary-dark);
  color: var(--color-text-light);
  overflow: hidden;
}

.hittrax-section__bg {
  position: absolute;
  inset: 0;
  z-index: 0;
}

.hittrax-section__bg img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  opacity: 0.2;
}

.hittrax-section__overlay {
  position: absolute;
  inset: 0;
  z-index: 1;
  background: rgba(13, 17, 23, 0.75);
  background-image: radial-gradient(circle at 30% 50%, rgba(0, 230, 118, 0.04), transparent 60%);
}

.hittrax-section__inner {
  position: relative;
  z-index: 2;
  max-width: var(--content-max-width);
  margin: 0 auto;
  display: flex;
  flex-direction: column;
  gap: var(--gap-lg);
}

.hittrax-section__text {
  flex: 1;
}

.hittrax-section__text h2 {
  color: var(--color-text-light);
}

.hittrax-section__text p {
  color: rgba(255, 255, 255, 0.85);
}

.hittrax-stats {
  display: flex;
  flex-direction: column;
  gap: 1rem;
  margin-top: 2rem;
}

.hittrax-stat-card {
  background: rgba(255, 255, 255, 0.08);
  backdrop-filter: blur(12px) saturate(150%);
  -webkit-backdrop-filter: blur(12px) saturate(150%);
  border: 1px solid rgba(255, 255, 255, 0.12);
  border-radius: var(--radius-md);
  padding: 1.5rem;
  transition: transform var(--transition-base);
}

.hittrax-stat-card h4 {
  color: var(--color-secondary);
  font-family: var(--font-heading);
  text-transform: uppercase;
  letter-spacing: 0.05em;
  margin-bottom: 0.5rem;
  font-size: 1.125rem;
}

.hittrax-stat-card p {
  color: rgba(255, 255, 255, 0.75);
  font-size: 0.9375rem;
  line-height: 1.6;
}

.hittrax-section__image {
  flex: 1;
}

.hittrax-section__image img {
  width: 100%;
  border-radius: var(--radius-md);
  box-shadow:
    0 4px 16px rgba(0, 230, 118, 0.1),
    0 12px 32px rgba(0, 0, 0, 0.3);
}

@media (hover: hover) {
  .hittrax-stat-card:hover {
    transform: translateY(-4px);
  }
}


/* --- SECTION: About Teaser --- */

.about-teaser {
  padding: var(--section-padding-mobile);
  background: var(--color-bg);
}

.about-teaser__inner {
  max-width: var(--content-max-width);
  margin: 0 auto;
}

.about-teaser__image img {
  border-radius: var(--radius-md);
  box-shadow: var(--shadow-image);
}


/* --- SECTION: Services Quick Cards --- */

.services-cards-section {
  padding: var(--section-padding-mobile);
  background: var(--color-surface);
}

.services-cards-grid {
  display: grid;
  grid-template-columns: 1fr;
  gap: var(--gap);
  max-width: var(--content-max-width);
  margin: 0 auto;
}


/* --- SECTION: Gallery Preview --- */

.gallery-preview {
  padding: var(--section-padding-mobile);
  background: var(--color-bg);
}

.gallery-preview__grid {
  display: grid;
  grid-template-columns: repeat(2, 1fr);
  gap: 0.75rem;
  margin-bottom: 2rem;
}

.gallery-preview__item {
  border-radius: var(--radius-md);
  overflow: hidden;
  aspect-ratio: 4/3;
}

.gallery-preview__item img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  transition: transform 0.4s ease;
}

@media (hover: hover) {
  .gallery-preview__item:hover img {
    transform: scale(1.03);
  }
}


/* --- SECTION: CTA Band --- */

.cta-band {
  padding: 5rem 1.5rem;
  background: var(--color-primary);
  text-align: center;
  position: relative;
  overflow: hidden;
  background-image: radial-gradient(circle at 30% 50%, rgba(0, 230, 118, 0.04), transparent 60%);
}

.cta-band--solid {
  padding: 5rem 1.5rem;
  background: var(--color-primary);
  text-align: center;
  position: relative;
  background-image: radial-gradient(circle at 70% 30%, rgba(0, 230, 118, 0.04), transparent 60%);
}

.cta-band__inner {
  max-width: 700px;
  margin: 0 auto;
}

.cta-band h2 {
  color: var(--color-text-light);
  margin-bottom: 1rem;
}

.cta-band p {
  color: rgba(255, 255, 255, 0.8);
  margin-left: auto;
  margin-right: auto;
  margin-bottom: 2.5rem;
  font-size: 1.0625rem;
  line-height: 1.7;
}

.cta-band__buttons {
  display: flex;
  flex-wrap: wrap;
  justify-content: center;
  gap: 1rem;
  margin-bottom: 1.5rem;
}

.cta-band__hours {
  font-size: 0.9375rem;
  color: rgba(255, 255, 255, 0.6);
  margin-top: 1rem;
}


/* --- CARDS & COMPONENTS --- */

.card {
  background: white;
  border-radius: var(--radius-md);
  overflow: hidden;
  box-shadow: var(--shadow-card);
  transition: transform var(--transition-base), box-shadow var(--transition-base);
  display: flex;
  flex-direction: column;
}

.card__image {
  overflow: hidden;
  aspect-ratio: 4/3;
}

.card__image img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  transition: transform 0.4s ease;
}

.card__content,
.card__body {
  padding: 1.5rem 1.5rem 2rem;
  color: var(--color-text-secondary);
  font-size: 0.9375rem;
  line-height: 1.6;
  flex: 1;
  display: flex;
  flex-direction: column;
}

.card__content .card__heading,
.card__body .card__heading,
.card__body h3 {
  margin-bottom: 0.75rem;
  color: var(--color-text);
}

.card__detail {
  font-size: 0.8125rem;
  color: var(--color-text-secondary);
  padding-top: 0.75rem;
  margin-top: auto;
  border-top: 1px solid var(--color-border);
}

.card__tags {
  display: flex;
  flex-wrap: wrap;
  gap: 0.5rem;
  margin-bottom: 1rem;
}

.card__link {
  display: inline-flex;
  align-items: center;
  gap: 0.25rem;
  font-size: 0.875rem;
  font-weight: 600;
  color: var(--color-accent);
  margin-top: 0.75rem;
  transition: transform var(--transition-fast);
}

/* Sport tag badges */
.sport-tag {
  display: inline-block;
  font-size: 0.75rem;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: 0.08em;
  padding: 0.25rem 0.75rem;
  border-radius: var(--radius-pill);
  color: white;
  line-height: 1.3;
}

.sport-tag--baseball { background: var(--sport-baseball); }
.sport-tag--softball { background: var(--sport-softball); }
.sport-tag--soccer { background: var(--sport-soccer); }
.sport-tag--fieldhockey { background: var(--sport-fieldhockey); }
.sport-tag--golf { background: var(--sport-golf); }
.sport-tag--speed { background: var(--sport-speed); }
.sport-tag--all { background: var(--sport-all); }
.sport-tag--teams { background: var(--sport-teams); }

/* Image hover container */
.image-hover {
  overflow: hidden;
  border-radius: var(--radius-md);
}

.image-hover img {
  transition: transform 0.4s ease;
  will-change: transform;
}

/* Glassmorphism card */
.glass-card {
  background: rgba(255, 255, 255, 0.08);
  backdrop-filter: blur(12px) saturate(150%);
  -webkit-backdrop-filter: blur(12px) saturate(150%);
  border: 1px solid rgba(255, 255, 255, 0.15);
  border-radius: var(--radius-lg);
  box-shadow:
    0 4px 16px rgba(0, 0, 0, 0.1),
    inset 0 1px 0 rgba(255, 255, 255, 0.1);
  transition: transform var(--transition-base), box-shadow var(--transition-base);
}

/* Phone glow animation target */
.phone-glow {
  color: var(--color-accent);
  font-weight: 700;
}

/* Parallax image container */
.parallax-wrap {
  overflow: hidden;
  border-radius: var(--radius-md);
}

.parallax-img {
  will-change: transform;
}

/* Buttons */
.btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 0.5rem;
  padding: 1rem 2.5rem;
  border-radius: var(--radius-sm);
  font-family: var(--font-body);
  font-size: 0.9375rem;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: 0.1em;
  cursor: pointer;
  transition: transform var(--transition-base), background var(--transition-base), box-shadow var(--transition-base);
  text-decoration: none;
  border: none;
}

.btn--primary {
  background: var(--color-accent);
  color: white;
}

.btn--secondary {
  background: transparent;
  border: 2px solid white;
  color: white;
}

.btn--secondary-dark {
  background: transparent;
  border: 2px solid var(--color-primary);
  color: var(--color-primary);
}

.btn--green {
  background: var(--color-secondary);
  color: var(--color-primary-dark);
}

.btn:active {
  transform: scale(0.98);
}

@media (hover: hover) {
  .card:hover {
    transform: translateY(-4px);
    box-shadow: var(--shadow-card-hover);
  }

  .card:hover .card__image img {
    transform: scale(1.03);
  }

  .image-hover:hover img {
    transform: scale(1.03);
  }

  .glass-card:hover {
    transform: translateY(-4px);
    box-shadow:
      0 8px 32px rgba(0, 0, 0, 0.15),
      inset 0 1px 0 rgba(255, 255, 255, 0.15);
  }

  .btn:hover {
    transform: scale(1.02);
  }

  .btn--primary:hover {
    background: var(--color-accent-dark);
    box-shadow: 0 4px 20px rgba(255, 87, 34, 0.4);
  }

  .btn--secondary:hover {
    background: white;
    color: var(--color-primary-dark);
  }

  .btn--secondary-dark:hover {
    background: var(--color-primary);
    color: white;
  }

  .btn--green:hover {
    box-shadow: 0 4px 20px rgba(0, 230, 118, 0.4);
  }

  .card__link:hover {
    transform: translateX(4px);
  }
}


/* --- GALLERY & LIGHTBOX --- */

.gallery-grid {
  display: grid;
  grid-template-columns: repeat(2, 1fr);
  gap: 0.75rem;
}

.gallery-item {
  overflow: hidden;
  border-radius: var(--radius-md);
  cursor: pointer;
  aspect-ratio: 4/3;
}

.gallery-item img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  transition: transform 0.4s ease, filter 0.4s ease;
}

@media (hover: hover) {
  .gallery-item:hover img {
    transform: scale(1.05);
    filter: brightness(1.08);
  }
}

/* Gallery Sets */
.gallery-set {
  margin-bottom: 3rem;
}

.gallery-set__header {
  margin-bottom: 1.5rem;
}

.gallery-set__header h3 {
  margin-bottom: 0.5rem;
}

.gallery-set__header p {
  color: var(--color-text-secondary);
  font-size: 0.9375rem;
}

.gallery-set__viewport {
  position: relative;
  overflow: hidden;
  border-radius: var(--radius-md);
  aspect-ratio: 4/3;
  background: var(--color-primary-dark);
}

.gallery-set__photo {
  width: 100%;
  height: 100%;
}

.gallery-set__photo img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  object-position: center 30%;
}

.gallery-set__nav {
  position: absolute;
  top: 50%;
  transform: translateY(-50%);
  z-index: 3;
  width: 48px;
  height: 48px;
  border-radius: 50%;
  background: rgba(0, 0, 0, 0.6);
  color: white;
  border: none;
  font-size: 1.25rem;
  cursor: pointer;
  display: flex;
  align-items: center;
  justify-content: center;
  transition: background var(--transition-fast);
}

.gallery-set__prev { left: 1rem; }
.gallery-set__next { right: 1rem; }

@media (hover: hover) {
  .gallery-set__nav:hover {
    background: rgba(0, 0, 0, 0.8);
  }
}

.gallery-set__counter {
  text-align: center;
  padding: 0.75rem 0;
  font-size: 0.875rem;
  color: var(--color-text-secondary);
  font-weight: 500;
}

/* Lightbox */
.lightbox {
  display: none;
  position: fixed;
  inset: 0;
  z-index: 2000;
  background: rgba(0, 0, 0, 0.92);
  align-items: center;
  justify-content: center;
}

.lightbox.is-open {
  display: flex;
}

.lightbox__overlay {
  position: absolute;
  inset: 0;
}

.lightbox__image-container {
  position: relative;
  z-index: 1;
  display: flex;
  align-items: center;
  justify-content: center;
  max-width: 90vw;
  max-height: 85vh;
}

.lightbox__image {
  max-width: 90vw;
  max-height: 85vh;
  object-fit: contain;
  border-radius: 4px;
}

.lightbox__close {
  position: absolute;
  top: 1.5rem;
  right: 1.5rem;
  z-index: 2;
  background: none;
  border: none;
  color: white;
  font-size: 2rem;
  cursor: pointer;
  width: 48px;
  height: 48px;
  display: flex;
  align-items: center;
  justify-content: center;
  transition: opacity var(--transition-fast);
}

@media (hover: hover) {
  .lightbox__close:hover { opacity: 0.7; }
}

.lightbox__prev,
.lightbox__next {
  position: absolute;
  top: 50%;
  transform: translateY(-50%);
  z-index: 2;
  background: rgba(255, 255, 255, 0.1);
  backdrop-filter: blur(4px);
  -webkit-backdrop-filter: blur(4px);
  border: none;
  color: white;
  font-size: 1.5rem;
  width: 48px;
  height: 48px;
  border-radius: 50%;
  cursor: pointer;
  display: flex;
  align-items: center;
  justify-content: center;
  transition: background var(--transition-fast);
}

.lightbox__prev { left: 1.5rem; }
.lightbox__next { right: 1.5rem; }

@media (hover: hover) {
  .lightbox__prev:hover,
  .lightbox__next:hover {
    background: rgba(255, 255, 255, 0.2);
  }
}

.lightbox__counter {
  position: absolute;
  bottom: 1.5rem;
  left: 50%;
  transform: translateX(-50%);
  z-index: 2;
  color: rgba(255, 255, 255, 0.7);
  font-size: 0.875rem;
}


/* --- FORMS --- */

.contact-section {
  padding: var(--section-padding-mobile);
  background: var(--color-bg);
}

.contact-grid {
  display: flex;
  flex-direction: column;
  gap: var(--gap);
  max-width: var(--content-max-width);
  margin: 0 auto;
}

.contact-info-card,
.contact-form-wrapper {
  background: white;
  border-radius: var(--radius-md);
  padding: 2rem 1.5rem;
  box-shadow: var(--shadow-card);
}

.contact-info-card h2,
.contact-info-card h3,
.contact-form-wrapper h2,
.contact-form-wrapper h3 {
  margin-bottom: 1.5rem;
}

.contact-info-card__list {
  list-style: none;
  padding: 0;
  margin: 0;
}

.contact-info-card__item {
  display: flex;
  align-items: flex-start;
  gap: 1rem;
  margin-bottom: 1.25rem;
  font-size: 0.9375rem;
  color: var(--color-text);
  line-height: 1.6;
}

.contact-info-card__item svg {
  flex-shrink: 0;
  color: var(--color-accent);
  margin-top: 0.125rem;
}

.contact-info-card__item a {
  color: var(--color-accent);
  font-weight: 600;
  transition: opacity var(--transition-fast);
}

@media (hover: hover) {
  .contact-info-card__item a:hover {
    opacity: 0.8;
  }
}

.contact-info-card__hours {
  margin-top: 2rem;
}

.contact-info-card__hours-heading {
  margin-bottom: 1rem;
}

.hours-table {
  width: 100%;
  font-size: 0.9375rem;
}

.hours-table tr {
  display: flex;
  justify-content: space-between;
  padding: 0.375rem 0;
  border-bottom: 1px solid var(--color-border);
}

.hours-table tr:last-child {
  border-bottom: none;
}

.hours-table .hours-day {
  font-weight: 500;
  color: var(--color-text);
}

.hours-table .hours-time {
  color: var(--color-text-secondary);
}

.hours-table .hours-closed,
.hours-table__closed td:last-child {
  color: var(--color-accent);
  font-weight: 600;
}

/* Form elements with classes */
.form-group {
  margin-bottom: 1.25rem;
}

.form-label {
  display: block;
  font-size: 0.875rem;
  font-weight: 500;
  margin-bottom: 0.4rem;
  color: var(--color-text);
}

.form-label .required {
  color: var(--color-accent);
}

.form-input,
.form-select,
.form-textarea {
  width: 100%;
  padding: 0.75rem 1rem;
  font: inherit;
  font-size: 0.9375rem;
  border: 1px solid var(--color-border);
  border-radius: var(--radius-sm);
  background: var(--color-bg);
  color: var(--color-text);
  transition: border-color var(--transition-fast), box-shadow var(--transition-fast);
}

.form-input:focus,
.form-select:focus,
.form-textarea:focus {
  outline: none;
  border-color: var(--color-secondary);
  box-shadow: 0 0 0 3px rgba(var(--color-secondary-rgb), 0.15);
}

.form-textarea {
  min-height: 140px;
  resize: vertical;
}

.form-select {
  appearance: none;
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='12' height='12' viewBox='0 0 24 24' fill='none' stroke='%235A5A5A' stroke-width='2'%3E%3Cpath d='M6 9l6 6 6-6'/%3E%3C/svg%3E");
  background-repeat: no-repeat;
  background-position: right 1rem center;
  padding-right: 2.5rem;
}

.form-input--error {
  border-color: var(--color-accent);
  box-shadow: 0 0 0 3px rgba(var(--color-accent-rgb), 0.15);
}

.form-submit {
  width: 100%;
  margin-top: 0.5rem;
}

.form-note {
  margin-top: 1rem;
  font-size: 0.8125rem;
  color: var(--color-text-secondary);
  line-height: 1.5;
}

/* Bare element fallback — catches unstyled form elements */
.contact-form input[type="text"],
.contact-form input[type="email"],
.contact-form input[type="tel"],
.contact-form input[type="date"],
.contact-form input[type="number"],
.contact-form select,
.contact-form textarea {
  width: 100%;
  padding: 0.75rem 1rem;
  font: inherit;
  font-size: 0.9375rem;
  border: 1px solid var(--color-border);
  border-radius: var(--radius-sm);
  background: var(--color-bg);
  color: var(--color-text);
  transition: border-color var(--transition-fast), box-shadow var(--transition-fast);
}

.contact-form input:focus,
.contact-form select:focus,
.contact-form textarea:focus {
  outline: none;
  border-color: var(--color-secondary);
  box-shadow: 0 0 0 3px rgba(var(--color-secondary-rgb), 0.15);
}

.contact-form textarea {
  min-height: 140px;
  resize: vertical;
}

.contact-form select {
  appearance: none;
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='12' height='12' viewBox='0 0 24 24' fill='none' stroke='%235A5A5A' stroke-width='2'%3E%3Cpath d='M6 9l6 6 6-6'/%3E%3C/svg%3E");
  background-repeat: no-repeat;
  background-position: right 1rem center;
  padding-right: 2.5rem;
}

.contact-form label {
  display: block;
  font-size: 0.875rem;
  font-weight: 500;
  margin-bottom: 0.4rem;
  color: var(--color-text);
}

.contact-form .required,
.form-required {
  color: var(--color-accent);
}

.contact-form__submit {
  width: 100%;
  margin-top: 0.5rem;
}

.contact-form__note {
  margin-top: 1rem;
  font-size: 0.8125rem;
  color: var(--color-text-secondary);
  line-height: 1.5;
}

/* Map section */
.map-section {
  width: 100%;
  height: 300px;
}

.map-section iframe {
  width: 100%;
  height: 100%;
  border: none;
  display: block;
}


/* --- FOOTER --- */

.site-footer {
  background: var(--color-primary-dark);
  color: var(--color-text-light);
  padding: 4rem 1.5rem 0;
  background-image: radial-gradient(circle at 20% 80%, rgba(0, 230, 118, 0.03), transparent 50%);
}

.footer__grid {
  max-width: var(--content-max-width);
  margin: 0 auto;
  display: grid;
  grid-template-columns: 1fr;
  gap: 2.5rem;
  padding-bottom: 3rem;
  border-bottom: 1px solid rgba(255, 255, 255, 0.08);
}

.footer__brand {
  max-width: 300px;
}

.footer__brand-name {
  font-family: var(--font-heading);
  font-size: 1.375rem;
  font-weight: 700;
  text-transform: uppercase;
  margin-bottom: 0.25rem;
}

.footer__brand-name .footer-accent {
  color: var(--color-secondary);
}

.footer__brand-tagline {
  font-size: 0.8125rem;
  color: var(--color-secondary);
  text-transform: uppercase;
  letter-spacing: 0.08em;
  font-weight: 600;
  margin-bottom: 1rem;
}

.footer__brand-description {
  font-size: 0.875rem;
  color: rgba(255, 255, 255, 0.65);
  line-height: 1.6;
}

.footer__nav h4,
.footer__hours h4,
.footer__contact h4 {
  font-family: var(--font-heading);
  font-size: 1rem;
  font-weight: 600;
  text-transform: uppercase;
  letter-spacing: 0.05em;
  color: var(--color-text-light);
  margin-bottom: 1.25rem;
}

.footer__nav-list {
  display: flex;
  flex-direction: column;
  gap: 0.75rem;
}

.footer__nav-link {
  font-size: 0.875rem;
  color: rgba(255, 255, 255, 0.65);
  transition: color var(--transition-fast), transform var(--transition-fast);
  display: inline-block;
}

@media (hover: hover) {
  .footer__nav-link:hover {
    color: var(--color-secondary);
    transform: translateX(3px);
  }
}

.footer__hours-list {
  display: flex;
  flex-direction: column;
  gap: 0.5rem;
}

.footer__hours-item {
  display: flex;
  justify-content: space-between;
  font-size: 0.875rem;
  color: rgba(255, 255, 255, 0.65);
  max-width: 260px;
}

.footer__hours-item .closed {
  color: var(--color-accent);
}

.footer__contact-list {
  display: flex;
  flex-direction: column;
  gap: 1rem;
}

.footer__contact-item {
  display: flex;
  align-items: flex-start;
  gap: 0.75rem;
  font-size: 0.875rem;
  color: rgba(255, 255, 255, 0.65);
}

.footer__contact-item a {
  color: rgba(255, 255, 255, 0.65);
  transition: color var(--transition-fast);
}

@media (hover: hover) {
  .footer__contact-item a:hover {
    color: var(--color-secondary);
  }
}

.footer__contact-icon {
  flex-shrink: 0;
  width: 18px;
  height: 18px;
  color: var(--color-secondary);
  margin-top: 0.125rem;
}

/* Footer bottom bar */
.footer__bottom {
  max-width: var(--content-max-width);
  margin: 0 auto;
  padding: 1.5rem 0;
  text-align: center;
  font-size: 0.8125rem;
  color: rgba(255, 255, 255, 0.45);
}

.footer__bottom a {
  color: rgba(255, 255, 255, 0.55);
  transition: color var(--transition-fast);
}

@media (hover: hover) {
  .footer__bottom a:hover {
    color: var(--color-secondary);
  }
}

.footer__bottom-divider {
  margin: 0 0.5rem;
}


/* --- SERVICES PAGE: Split Layouts --- */

.service-split {
  padding: var(--section-padding-mobile);
}

.service-split--light {
  background: var(--color-bg);
}

.service-split--surface {
  background: var(--color-surface);
}

.service-split__inner {
  max-width: var(--content-max-width);
  margin: 0 auto;
  display: flex;
  flex-direction: column;
  gap: var(--gap-lg);
}

.service-split__text {
  flex: 1;
}

.service-split__image {
  flex: 1;
}

.service-split__image img {
  width: 100%;
  border-radius: var(--radius-md);
  box-shadow: var(--shadow-image);
  object-fit: cover;
}

.service-split__detail {
  font-size: 0.875rem;
  color: var(--color-text-secondary);
  margin-top: 1rem;
  padding-top: 1rem;
  border-top: 1px solid var(--color-border);
}


/* --- SERVICES PAGE: Facility Rental (cinematic) --- */

.facility-rental {
  position: relative;
  padding: var(--section-padding-mobile);
  overflow: hidden;
}

.facility-rental__bg {
  position: absolute;
  inset: 0;
  z-index: 0;
}

.facility-rental__bg img {
  width: 100%;
  height: 100%;
  object-fit: cover;
}

.facility-rental__overlay {
  position: absolute;
  inset: 0;
  z-index: 1;
  background: linear-gradient(to bottom, rgba(13, 17, 23, 0.7) 0%, rgba(13, 17, 23, 0.85) 100%);
}

.facility-rental__inner {
  position: relative;
  z-index: 2;
  max-width: 700px;
  margin: 0 auto;
  text-align: center;
}

.facility-rental__inner .glass-card {
  padding: 3rem 2rem;
}

.facility-rental h2 {
  color: var(--color-text-light);
}

.facility-rental p {
  color: rgba(255, 255, 255, 0.85);
  margin-left: auto;
  margin-right: auto;
}


/* --- HITTRAX PAGE: Metrics Cards --- */

.hittrax-metrics {
  padding: var(--section-padding-mobile);
  background: var(--color-surface);
}

.hittrax-metrics__grid {
  display: grid;
  grid-template-columns: 1fr;
  gap: var(--gap);
  max-width: var(--content-max-width);
  margin: 0 auto;
}

.metric-card {
  background: white;
  border-radius: var(--radius-md);
  padding: 2rem 1.5rem;
  box-shadow: var(--shadow-card);
  transition: transform var(--transition-base), box-shadow var(--transition-base);
}

.metric-card__number {
  font-family: var(--font-heading);
  font-size: 2rem;
  font-weight: 700;
  color: var(--color-secondary);
  margin-bottom: 0.5rem;
}

.metric-card h3 {
  margin-bottom: 0.75rem;
}

.metric-card p {
  color: var(--color-text-secondary);
  font-size: 0.9375rem;
  line-height: 1.6;
}

@media (hover: hover) {
  .metric-card:hover {
    transform: translateY(-4px);
    box-shadow: var(--shadow-card-hover);
  }
}


/* --- HITTRAX PAGE: Explanation --- */

.hittrax-explanation {
  padding: var(--section-padding-mobile);
  background: var(--color-bg);
}

.hittrax-explanation__inner {
  max-width: var(--content-max-width);
  margin: 0 auto;
}

.hittrax-explanation__image {
  margin-top: var(--gap-lg);
}

.hittrax-explanation__image img {
  width: 100%;
  border-radius: var(--radius-md);
  box-shadow:
    0 4px 16px rgba(0, 230, 118, 0.1),
    0 8px 32px rgba(0, 0, 0, 0.15);
}


/* --- ABOUT PAGE: Origin Story --- */

.origin-story {
  padding: var(--section-padding-mobile);
  background: var(--color-bg);
}

.origin-story__inner {
  max-width: var(--content-max-width);
  margin: 0 auto;
}


/* --- ABOUT PAGE: Building Timeline --- */

.timeline-section {
  padding: var(--section-padding-mobile);
  background: var(--color-surface);
}

.timeline {
  max-width: var(--content-max-width);
  margin: 0 auto;
  position: relative;
  padding-left: 2rem;
}

/* Timeline line (left side on mobile) */
.timeline::before {
  content: '';
  position: absolute;
  left: 4px;
  top: 0;
  bottom: 0;
  width: 2px;
  background: var(--color-secondary);
  opacity: 0.4;
}

.timeline__entry {
  position: relative;
  margin-bottom: 3rem;
  padding-left: 1.5rem;
}

.timeline__entry:last-child {
  margin-bottom: 0;
}

/* Timeline dot */
.timeline__entry::before {
  content: '';
  position: absolute;
  left: -2rem;
  top: 0.25rem;
  width: 12px;
  height: 12px;
  background: var(--color-secondary);
  border-radius: 50%;
  border: 3px solid var(--color-surface);
  z-index: 1;
}

.timeline__date {
  font-size: 0.8125rem;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: 0.1em;
  color: var(--color-secondary);
  margin-bottom: 0.5rem;
}

.timeline__title {
  font-family: var(--font-heading);
  font-size: 1.25rem;
  font-weight: 600;
  margin-bottom: 0.75rem;
}

.timeline__description {
  color: var(--color-text-secondary);
  font-size: 0.9375rem;
  line-height: 1.7;
  margin-bottom: 1rem;
}

.timeline__image {
  border-radius: var(--radius-md);
  overflow: hidden;
  box-shadow: var(--shadow-image);
}

.timeline__image img {
  width: 100%;
  height: auto;
  object-fit: cover;
  aspect-ratio: 16/9;
  transition: transform 0.4s ease;
}

@media (hover: hover) {
  .timeline__image:hover img {
    transform: scale(1.03);
  }
}


/* --- ABOUT PAGE: Community Connection --- */

.community-section {
  padding: var(--section-padding-mobile);
  background: var(--color-bg);
}

.community-section__inner {
  max-width: var(--content-max-width);
  margin: 0 auto;
  text-align: center;
}

.community-callouts {
  display: grid;
  grid-template-columns: 1fr;
  gap: 1rem;
  margin-top: var(--gap);
}

.community-callout {
  background: white;
  border-radius: var(--radius-md);
  padding: 1.5rem;
  border-left: 4px solid var(--color-secondary);
  text-align: left;
  box-shadow: var(--shadow-card);
}

.community-callout p {
  color: var(--color-text);
  font-size: 0.9375rem;
  line-height: 1.6;
  font-weight: 500;
}


/* --- GALLERY PAGE --- */

.gallery-page-section {
  padding: var(--section-padding-mobile);
  background: var(--color-bg);
}

.gallery-page-section__inner {
  max-width: 900px;
  margin: 0 auto;
}


/* --- CONTACT PAGE: Services Intro --- */

.services-intro {
  padding: var(--section-padding-mobile);
  background: var(--color-bg);
  text-align: center;
}

.services-intro__inner {
  max-width: var(--content-max-width);
  margin: 0 auto;
}

.services-intro p {
  margin-left: auto;
  margin-right: auto;
}


/* --- BACK TO TOP --- */

.back-to-top {
  position: fixed;
  bottom: 2rem;
  right: 2rem;
  z-index: 998;
  width: 48px;
  height: 48px;
  border-radius: 50%;
  background: var(--color-primary);
  color: var(--color-text-light);
  border: 1px solid rgba(255, 255, 255, 0.1);
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 1.25rem;
  cursor: pointer;
  opacity: 0;
  visibility: hidden;
  transition: opacity var(--transition-base), visibility var(--transition-base), transform var(--transition-base);
}

.back-to-top.is-visible {
  opacity: 1;
  visibility: visible;
}

@media (hover: hover) {
  .back-to-top:hover {
    transform: translateY(-3px);
    background: var(--color-primary-light);
  }
}


/* --- TILT CARD PERSPECTIVE --- */

.tilt-card {
  transform-style: preserve-3d;
}


/* --- ANIMATIONS & TRANSITIONS --- */
/* ============================================
   ANIMATION STARTING STATES
   These are animated TO their natural state by gsap.to() in main.js.
   The 800ms JS failsafe force-reveals anything GSAP misses.
   ============================================ */

.fade-in,
.fade-up {
  opacity: 0;
  transform: translateY(40px);
}

.slide-from-left,
.slide-left {
  opacity: 0;
  transform: translateX(-60px);
}

.slide-from-right,
.slide-right {
  opacity: 0;
  transform: translateX(60px);
}

.scale-up {
  opacity: 0;
  transform: scale(0.9);
}

.stagger-in > *,
.stagger-list > *,
.stagger-grid > * {
  opacity: 0;
  transform: translateY(30px);
}

.clip-from-left {
  clip-path: inset(0 100% 0 0);
}

.clip-from-right {
  clip-path: inset(0 0 0 100%);
}

.clip-reveal {
  clip-path: inset(0 100% 0 0);
}

.split-heading {
  overflow: hidden;
}

/* CTA pulse keyframes (used by GSAP, defined as backup) */
@keyframes cta-pulse {
  0%, 100% { transform: scale(1); }
  50% { transform: scale(1.04); }
}

/* Phone glow keyframes */
@keyframes phone-glow {
  0%, 100% { opacity: 1; }
  50% { opacity: 0.85; }
}


/* --- STICKY MOBILE CTA --- */

.mobile-cta {
  display: none;
}


/* --- RESPONSIVE: TABLET (768px) --- */

@media (min-width: 768px) {

  /* Typography scale-up */
  body {
    font-size: 1.0625rem;
  }

  .section-label {
    font-size: 0.875rem;
  }

  /* Layout */
  .section {
    padding: 6rem 2rem;
  }

  /* Nav: show desktop links, hide hamburger */
  .nav__links {
    display: flex;
  }

  .nav__cta {
    display: inline-flex;
  }

  .nav__hamburger {
    display: none;
  }

  .nav__phone-btn {
    display: none;
  }

  /* Hero */
  .hero__content {
    padding: calc(var(--nav-height) + 4rem) 2rem 10rem;
  }

  .hero__heading {
    letter-spacing: 0;
  }

  /* Trust stats: 4 in a row */
  .trust-stats__inner {
    grid-template-columns: repeat(4, 1fr);
    gap: 1.5rem;
  }

  .trust-stats {
    padding: 4rem 2rem;
  }

  /* Bento grid: 2x3 */
  .bento-grid {
    grid-template-columns: repeat(2, 1fr);
    gap: 1.25rem;
  }

  .bento-item {
    min-height: 250px;
  }

  .bento-item--large {
    min-height: 350px;
  }

  /* Split layouts: side by side */
  .split-layout {
    flex-direction: row;
    align-items: center;
  }

  .split-layout--reverse {
    flex-direction: row-reverse;
  }

  /* Services split layouts */
  .service-split__inner {
    flex-direction: row;
    align-items: center;
  }

  .service-split--reverse .service-split__inner {
    flex-direction: row-reverse;
  }

  /* About teaser split */
  .about-teaser__inner {
    display: flex;
    align-items: center;
    gap: var(--gap-lg);
  }

  .about-teaser__text,
  .about-teaser__image {
    flex: 1;
  }

  /* Services cards: 2 columns */
  .services-cards-grid {
    grid-template-columns: repeat(2, 1fr);
  }

  /* Gallery preview: 2x2 */
  .gallery-preview__grid {
    grid-template-columns: repeat(2, 1fr);
    gap: 1rem;
  }

  /* Gallery grid */
  .gallery-grid {
    grid-template-columns: repeat(3, 1fr);
    gap: 1rem;
  }

  /* HitTrax metrics: 2 columns */
  .hittrax-metrics__grid {
    grid-template-columns: repeat(2, 1fr);
  }

  /* Contact: info + form side by side */
  .contact-grid {
    flex-direction: row;
    align-items: stretch;
  }

  .contact-info-card,
  .contact-form-wrapper {
    flex: 1;
  }

  /* Map taller */
  .map-section {
    height: 400px;
  }

  /* Timeline desktop: alternating left/right */
  .timeline {
    padding-left: 0;
  }

  .timeline::before {
    left: 50%;
    transform: translateX(-50%);
  }

  .timeline__entry {
    width: 45%;
    padding-left: 0;
  }

  .timeline__entry:nth-child(odd) {
    margin-left: 0;
    text-align: right;
    padding-right: 2.5rem;
  }

  .timeline__entry:nth-child(even) {
    margin-left: 55%;
    text-align: left;
    padding-left: 2.5rem;
  }

  .timeline__entry::before {
    left: auto;
  }

  .timeline__entry:nth-child(odd)::before {
    right: -8px;
    left: auto;
  }

  .timeline__entry:nth-child(even)::before {
    left: -8px;
  }

  /* Community callouts */
  .community-callouts {
    grid-template-columns: repeat(3, 1fr);
  }

  /* CTA band */
  .cta-band,
  .cta-band--solid {
    padding: 7rem 2.5rem;
  }

  /* Footer: 2x2 grid */
  .footer__grid {
    grid-template-columns: repeat(2, 1fr);
    gap: 3rem;
    padding-bottom: 3rem;
  }

  .site-footer {
    padding: 4rem 2rem 0;
  }

  /* HitTrax section split */
  .hittrax-section__inner {
    flex-direction: row;
    align-items: center;
  }

  .hittrax-section__text {
    flex: 1.1;
  }

  .hittrax-section__image {
    flex: 0.9;
  }

  /* Origin story split */
  .origin-story__inner {
    display: flex;
    align-items: center;
    gap: var(--gap-lg);
  }

  .origin-story__text,
  .origin-story__image {
    flex: 1;
  }

  .origin-story__image img {
    border-radius: var(--radius-md);
    box-shadow: var(--shadow-image);
  }
}


/* --- RESPONSIVE: DESKTOP (1024px) --- */

@media (min-width: 1024px) {

  /* Section padding at desktop */
  .section {
    padding: var(--section-padding-desktop);
  }

  /* Hero heading letter-spacing at desktop */
  .hero__heading {
    letter-spacing: 0;
  }

  /* Bento grid: 4-column with baseball 2x2 */
  .bento-grid {
    grid-template-columns: repeat(4, 1fr);
    gap: 1.25rem;
  }

  .bento-item {
    min-height: 250px;
  }

  .bento-item--large {
    grid-column: span 2;
    grid-row: span 2;
    min-height: 520px;
  }

  .bento-item--wide {
    grid-column: span 2;
  }

  .bento-item__sport {
    font-size: 1.5rem;
  }

  /* Trust stat number size up */
  .trust-stat__number {
    font-size: 3rem;
  }

  /* Services cards: 3 columns */
  .services-cards-grid {
    grid-template-columns: repeat(3, 1fr);
  }

  /* Gallery grid */
  .gallery-grid {
    grid-template-columns: repeat(3, 1fr);
    gap: 1rem;
  }

  /* HitTrax metrics: 3 columns */
  .hittrax-metrics__grid {
    grid-template-columns: repeat(3, 1fr);
  }

  /* Footer: 4 columns */
  .footer__grid {
    grid-template-columns: repeat(4, 1fr);
  }

  /* Gallery sets: max-width */
  .gallery-page-section__inner {
    max-width: 900px;
  }

  /* Contact form + info padding */
  .contact-info-card,
  .contact-form-wrapper {
    padding: 2.5rem;
  }

  /* HitTrax feature section */
  .hittrax-section {
    padding: var(--section-padding-desktop);
  }

  .hittrax-stats {
    flex-direction: row;
    gap: 1rem;
  }

  .hittrax-stat-card {
    flex: 1;
  }

  /* Service split sections */
  .service-split {
    padding: var(--section-padding-desktop);
  }

  /* CTA band padding */
  .cta-band,
  .cta-band--solid {
    padding: 7rem 4rem;
  }

  /* Trust stats padding */
  .trust-stats {
    padding: 5rem 4rem;
  }

  /* Origin story */
  .origin-story {
    padding: var(--section-padding-desktop);
  }

  /* Timeline */
  .timeline-section {
    padding: var(--section-padding-desktop);
  }

  /* Community */
  .community-section {
    padding: var(--section-padding-desktop);
  }

  /* Facility rental */
  .facility-rental {
    padding: var(--section-padding-desktop);
  }

  /* HitTrax explanation */
  .hittrax-explanation {
    padding: var(--section-padding-desktop);
  }

  /* HitTrax metrics */
  .hittrax-metrics {
    padding: var(--section-padding-desktop);
  }

  /* Bento section */
  .bento-section {
    padding: var(--section-padding-desktop);
  }

  /* Gallery preview */
  .gallery-preview {
    padding: var(--section-padding-desktop);
  }

  /* Services cards section */
  .services-cards-section {
    padding: var(--section-padding-desktop);
  }

  /* About teaser */
  .about-teaser {
    padding: var(--section-padding-desktop);
  }

  /* Contact section */
  .contact-section {
    padding: var(--section-padding-desktop);
  }

  /* Gallery page */
  .gallery-page-section {
    padding: var(--section-padding-desktop);
  }

  /* Services intro */
  .services-intro {
    padding: var(--section-padding-desktop);
  }
}


/* --- RESPONSIVE: LARGE (1400px) --- */

@media (min-width: 1400px) {

  /* Extra breathing room */
  .hero__content {
    max-width: 1000px;
  }

  .trust-stat__number {
    font-size: 3.5rem;
  }

  /* Bento item larger */
  .bento-item--large {
    min-height: 560px;
  }

  /* Slight bump to CTA band */
  .cta-band,
  .cta-band--solid {
    padding: 8rem 4rem;
  }

  /* Footer more spacious */
  .footer__grid {
    gap: 3rem;
  }
}


/* --- STICKY MOBILE CTA (below 768px) --- */

@media (max-width: 767px) {
  .mobile-cta {
    display: flex;
    position: fixed;
    bottom: 0;
    left: 0;
    right: 0;
    z-index: 999;
    background: rgba(13, 17, 23, 0.9);
    backdrop-filter: blur(12px);
    -webkit-backdrop-filter: blur(12px);
    padding: 12px 1.5rem;
    padding-bottom: calc(12px + env(safe-area-inset-bottom));
    align-items: center;
    justify-content: center;
    gap: 12px;
    border-top: 1px solid rgba(255, 255, 255, 0.1);
  }

  .mobile-cta__btn {
    flex: 1;
    text-align: center;
    padding: 14px 20px;
    border-radius: var(--radius-sm);
    font-weight: 700;
    font-size: 1rem;
    text-decoration: none;
    background: var(--color-accent);
    color: white;
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 0.5rem;
    text-transform: uppercase;
    letter-spacing: 0.05em;
    transition: background var(--transition-fast);
  }

  /* Body padding so content not hidden behind fixed CTA */
  body {
    padding-bottom: 80px;
  }

  /* Back to top moves up to clear mobile CTA */
  .back-to-top {
    bottom: 6rem;
  }
}


/* --- REDUCED MOTION --- */

@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after {
    animation-duration: 0.01ms !important;
    animation-iteration-count: 1 !important;
    transition-duration: 0.01ms !important;
    scroll-behavior: auto !important;
  }

  .fade-in, .fade-up,
  .slide-from-left, .slide-left,
  .slide-from-right, .slide-right,
  .scale-up,
  .stagger-in > *, .stagger-list > *, .stagger-grid > *,
  .clip-from-left, .clip-from-right, .clip-reveal {
    opacity: 1 !important;
    transform: none !important;
    clip-path: none !important;
  }

  .card:hover {
    transform: none;
  }

  .image-hover:hover img {
    transform: none;
  }

  .mobile-cta {
    position: static;
  }

  .scroll-indicator {
    display: none;
  }
}


/* --- PRINT --- */

@media print {
  .site-nav,
  .site-footer,
  .scroll-indicator,
  .back-to-top,
  .mobile-cta,
  .cta-band,
  .cta-band--solid {
    display: none !important;
  }

  body {
    font-size: 12pt;
    color: #000;
    background: #fff;
    padding-bottom: 0;
  }

  a[href]::after {
    content: " (" attr(href) ")";
    font-size: 0.8em;
    color: #666;
  }

  img {
    max-width: 100% !important;
    page-break-inside: avoid;
  }

  h2, h3 {
    page-break-after: avoid;
  }

  .hero {
    min-height: auto;
    padding: 2rem;
  }

  .hero__overlay {
    background: none;
  }

  .inner-hero {
    min-height: auto;
    padding: 2rem;
  }

  .section {
    padding: 2rem 1rem;
  }

  .trust-stats {
    background: #eee;
    color: #000;
  }

  .trust-stat__number {
    color: #000;
  }
}


/* ============================================
   DELIGHT ENHANCEMENTS — Added by Delight Agent
   ============================================ */

/* DELIGHT 1: Sport Tag Pop — scale + glow on hover */
@media (hover: hover) {
  .sport-tag {
    transition: transform 0.25s cubic-bezier(0.34, 1.56, 0.64, 1),
                box-shadow 0.25s ease,
                filter 0.25s ease;
    cursor: default;
  }
  .sport-tag:hover {
    transform: scale(1.15) translateY(-2px);
    filter: brightness(1.15);
  }
  .sport-tag--baseball:hover { box-shadow: 0 4px 16px rgba(255, 87, 34, 0.4); }
  .sport-tag--softball:hover { box-shadow: 0 4px 16px rgba(255, 152, 0, 0.4); }
  .sport-tag--soccer:hover { box-shadow: 0 4px 16px rgba(76, 175, 80, 0.4); }
  .sport-tag--fieldhockey:hover { box-shadow: 0 4px 16px rgba(233, 30, 99, 0.4); }
  .sport-tag--golf:hover { box-shadow: 0 4px 16px rgba(33, 150, 243, 0.4); }
  .sport-tag--speed:hover { box-shadow: 0 4px 16px rgba(156, 39, 176, 0.4); }
  .sport-tag--all:hover { box-shadow: 0 4px 16px rgba(96, 125, 139, 0.4); }
  .sport-tag--teams:hover { box-shadow: 0 4px 16px rgba(121, 85, 72, 0.4); }
}

/* DELIGHT 2: Bento item magnetic glow border on hover */
@media (hover: hover) {
  .bento-item {
    position: relative;
  }
  .bento-item::after {
    content: '';
    position: absolute;
    inset: 0;
    border-radius: var(--radius-md);
    border: 2px solid transparent;
    transition: border-color 0.4s ease, box-shadow 0.4s ease;
    pointer-events: none;
    z-index: 2;
  }
  .bento-item:hover::after {
    border-color: rgba(0, 230, 118, 0.5);
    box-shadow: inset 0 0 30px rgba(0, 230, 118, 0.08),
                0 0 20px rgba(0, 230, 118, 0.15);
  }
  .bento-item .bento-item__link {
    transition: transform 0.3s ease, letter-spacing 0.3s ease;
  }
  .bento-item:hover .bento-item__link {
    transform: translateX(4px);
    letter-spacing: 0.12em;
  }
}

/* DELIGHT 3: Trust stat scoreboard LED glow */
.trust-stat__number {
  text-shadow:
    0 0 10px rgba(0, 230, 118, 0.3),
    0 0 30px rgba(0, 230, 118, 0.15),
    0 0 60px rgba(0, 230, 118, 0.05);
}

.trust-stat {
  position: relative;
}

@media (hover: hover) {
  .trust-stat {
    transition: transform 0.3s ease;
  }
  .trust-stat:hover {
    transform: translateY(-3px);
  }
  .trust-stat:hover .trust-stat__number {
    text-shadow:
      0 0 10px rgba(0, 230, 118, 0.5),
      0 0 40px rgba(0, 230, 118, 0.3),
      0 0 80px rgba(0, 230, 118, 0.1);
  }
}

/* Scoreboard separator pulse between stat items */
@media (min-width: 768px) {
  .trust-stat:not(:last-child)::after {
    content: '';
    position: absolute;
    right: 0;
    top: 20%;
    height: 60%;
    width: 1px;
    background: linear-gradient(
      to bottom,
      transparent 0%,
      rgba(0, 230, 118, 0.3) 50%,
      transparent 100%
    );
    animation: scoreboard-pulse 2.5s ease-in-out infinite;
  }
}

@keyframes scoreboard-pulse {
  0%, 100% { opacity: 0.4; }
  50% { opacity: 1; }
}

/* DELIGHT 4: CTA band cinematic gradient — animated background shift */
.cta-band {
  background-image:
    radial-gradient(circle at var(--cta-glow-x, 30%) var(--cta-glow-y, 50%), rgba(0, 230, 118, 0.08), transparent 50%),
    radial-gradient(circle at calc(100% - var(--cta-glow-x, 30%)) calc(100% - var(--cta-glow-y, 50%)), rgba(255, 87, 34, 0.05), transparent 50%) !important;
}

.cta-band .btn--primary {
  position: relative;
  overflow: hidden;
}

.cta-band .btn--primary::before {
  content: '';
  position: absolute;
  inset: -2px;
  border-radius: inherit;
  background: linear-gradient(
    135deg,
    rgba(0, 230, 118, 0.6) 0%,
    rgba(255, 87, 34, 0.6) 50%,
    rgba(0, 230, 118, 0.6) 100%
  );
  background-size: 200% 200%;
  animation: cta-shimmer 3s ease-in-out infinite;
  z-index: -1;
  opacity: 0;
  transition: opacity 0.3s ease;
}

@media (hover: hover) {
  .cta-band .btn--primary:hover::before {
    opacity: 1;
  }
}

@keyframes cta-shimmer {
  0% { background-position: 0% 50%; }
  50% { background-position: 100% 50%; }
  100% { background-position: 0% 50%; }
}

/* DELIGHT 5: Hero heading underline sweep after text reveal */
.hero__heading-wrap {
  position: relative;
  display: inline-block;
}

.hero__heading::after {
  content: '';
  display: block;
  width: 0;
  height: 3px;
  margin: 0.75rem auto 0;
  background: linear-gradient(90deg, var(--color-secondary), var(--color-accent));
  border-radius: 2px;
  transition: width 1.2s cubic-bezier(0.22, 0.61, 0.36, 1);
}

.hero__heading.sweep-active::after {
  width: 60%;
}

/* Hero heading letter-spacing tightening on load (set by JS) */
.hero__heading {
  transition: letter-spacing 1.5s cubic-bezier(0.22, 0.61, 0.36, 1);
}

/* BONUS: Gallery photo magnetic float on hover */
@media (hover: hover) {
  .gallery-item {
    transition: transform 0.4s cubic-bezier(0.22, 0.61, 0.36, 1),
                box-shadow 0.4s ease;
  }
  .gallery-item:hover {
    box-shadow:
      0 8px 30px rgba(0, 0, 0, 0.15),
      0 0 0 1px rgba(0, 230, 118, 0.15);
  }
}

/* ============================================
   END DELIGHT ENHANCEMENTS
   ============================================ */


/* ============================================
   BUILD REPORT — CSS Architect
   ============================================

   Missing Inputs:
   - No explicit mobile nav animation spec (used opacity/visibility fade)
   - No confirmed brand guide for Oswald/Inter pairing (assumed from D1)
   - No vector logo (csz-logo.jpg is low-res, handled with max-height)

   Assumptions Made:
   1. Mobile nav uses full-screen overlay with fade (not slide) per D1 spec
   2. Timeline uses left-side line on mobile, centered alternating on desktop
   3. Bento grid baseball block spans 2x2 on desktop, full-width on mobile
   4. Gallery set viewport uses 4:3 aspect ratio to match photo spec
   5. Contact info card and form card equal-height via flex stretch
   6. Sport tag colors pulled directly from D3 custom properties
   7. HitTrax stat cards use glassmorphism on dark background per D1
   8. Inner hero overlay minimum darkness: rgba(0,0,0,0.4) to rgba(0,0,0,0.7)
   9. CTA band gets green radial gradient texture for depth
   10. Footer uses 1-col mobile, 2x2 tablet, 4-col desktop grid

   Self-Score: 8.5/10
   Solid implementation hitting every mandatory requirement. All animation
   starting states present. All hover effects gated with @media (hover: hover).
   Three-layer shadows on cards. Multi-stop gradient on hero. No clip-path
   section dividers. Mobile CTA, print styles, reduced motion all present.
   RGB color variables for transparency. What would make it 10: seeing it
   rendered with real photos to verify spacing feels right at every breakpoint.

   Upstream Suggestions:
   - D1 could specify exact nav link hover underline width/offset
   - D2 could specify exact gallery set viewport max-height for desktop
   - Getting SVG logo would eliminate the low-res constraint
   - Professional photography would push the gallery from "decent" to "showcase"

   Downstream Notes:
   - html-builder: Use .section-label for ALL small uppercase labels above h2s
   - html-builder: .trust-stats section gets background — animate .trust-stats__inner NOT section
   - html-builder: .cta-band gets background — animate .cta-band__inner NOT section
   - html-builder: .hittrax-section gets background — animate inner content NOT section
   - html-builder: Hero uses .hero__content with flex-column + align-items: center for centering
   - html-builder: Inner heroes use .inner-hero__content with same centering pattern
   - html-builder: Sport tags use .sport-tag--{sport} modifier classes
   - html-builder: Contact form MUST have class .contact-form on the <form> element
   - html-builder: Gallery set nav buttons inside .gallery-set__viewport for absolute positioning
   - html-builder: Bento baseball block gets both .bento-item--large for grid spanning
   - html-builder: .tilt-card class on service cards and HitTrax stat cards for 3D tilt
   - html-builder: Mobile CTA uses .mobile-cta with .mobile-cta__btn for the phone link
   - html-builder: Footer columns: .footer__brand, .footer__nav, .footer__hours, .footer__contact
   - html-builder: Service split layouts use .service-split--reverse for alternating image side
   - js-engineer: Nav scroll class is .nav--scrolled (not .scrolled)
   - js-engineer: Mobile nav toggle classes: .is-open on both .nav__hamburger and .nav__overlay

   Total Lines: 1540+
   Sections: 28 major sections
   Media Queries: 6 (768, 1024, 1400, max-767, reduced-motion, print)
   Custom Properties: 38
   ============================================ */