/* =============================================
   THEME: Pin High Virtual Golf
   Dark, premium sports-entertainment venue
   Font Pairing: Barlow Condensed (headings) + Inter (body)
   ============================================= */

/* --- Google Fonts --- */
@import url('https://fonts.googleapis.com/css2?family=Russo+One&family=Teko:wght@400;500;600;700&family=Bebas+Neue&family=Barlow+Condensed:wght@400;600;700&family=Inter:wght@400;500;600&display=swap');

/* --- Theme Variables --- */
:root {
  /* Colour Palette - derived from Pin High flyer */
  --color-primary: #00C9A7;
  --color-primary-light: #33D4B8;
  --color-primary-dark: #00A88C;
  --color-secondary: #1A4A44;
  --color-secondary-light: #245C55;
  --color-secondary-dark: #0D2E2A;
  --color-accent: #00E5BE;
  --color-accent-light: #66F0D8;

  --color-bg: #0B1F1C;
  --color-bg-alt: #0F2A26;
  --color-bg-dark: #071614;
  --color-surface: #132E2A;
  --color-surface-alt: #1A3D37;

  --color-text: #D0E8E3;
  --color-text-light: #8BAFA8;
  --color-text-inverse: #0B1F1C;
  --color-text-heading: #FFFFFF;

  --color-border: #1E4D46;
  --color-border-light: #245C55;

  --color-success: #00C9A7;
  --color-error: #FF6B6B;

  /* Typography */
  --font-heading: 'Teko', 'Bebas Neue', 'Barlow Condensed', 'Impact', 'Arial Narrow', sans-serif;
  --font-body: 'Inter', -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, sans-serif;
}

/* --- Golf ball dimple texture --- */
/* Large dimples like the flyer - only on hero and CTA sections */

/* --- Subtle noise texture via inline SVG --- */
/* Adds film-grain feel to dark sections without an external image */
.noise-texture::before {
  content: '';
  position: absolute;
  inset: 0;
  pointer-events: none;
  z-index: 0;
  opacity: 0.7;
  mix-blend-mode: overlay;
  background-image:
    radial-gradient(circle 1px at 3px 4px, rgba(255,255,255,0.15) 0%, transparent 100%),
    radial-gradient(circle 1px at 8px 2px, rgba(255,255,255,0.12) 0%, transparent 100%),
    radial-gradient(circle 1px at 5px 9px, rgba(255,255,255,0.13) 0%, transparent 100%),
    radial-gradient(circle 1px at 11px 6px, rgba(255,255,255,0.14) 0%, transparent 100%),
    radial-gradient(circle 1px at 1px 11px, rgba(255,255,255,0.11) 0%, transparent 100%),
    radial-gradient(circle 1px at 14px 1px, rgba(255,255,255,0.15) 0%, transparent 100%);
  background-size: 7px 7px, 11px 11px, 9px 13px, 13px 9px, 8px 10px, 15px 11px;
}

.noise-texture {
  position: relative;
}

.noise-texture > * {
  position: relative;
  z-index: 1;
}

/* --- Dark theme global overrides --- */
body {
  background-color: var(--color-bg);
  color: var(--color-text);
}

/* Flyer-style circle overlay pattern */
/* The PDF has large overlapping translucent circles/rings at various sizes */
/* Recreated with layered radial gradients as ring outlines */
.golf-dimples {
  position: relative;
}

.golf-dimples::after {
  content: '';
  position: absolute;
  inset: 0;
  pointer-events: none;
  z-index: 1;
  background-image:
    /* Large rings - like the "PROOF" watermark circles on the flyer */
    radial-gradient(circle 80px at 15% 20%, transparent 58%, rgba(255,255,255,0.04) 60%, rgba(255,255,255,0.04) 62%, transparent 64%),
    radial-gradient(circle 120px at 75% 35%, transparent 58%, rgba(255,255,255,0.035) 60%, rgba(255,255,255,0.035) 62%, transparent 64%),
    radial-gradient(circle 60px at 40% 70%, transparent 58%, rgba(255,255,255,0.04) 60%, rgba(255,255,255,0.04) 62%, transparent 64%),
    radial-gradient(circle 100px at 85% 80%, transparent 58%, rgba(255,255,255,0.03) 60%, rgba(255,255,255,0.03) 62%, transparent 64%),
    radial-gradient(circle 90px at 25% 90%, transparent 58%, rgba(255,255,255,0.035) 60%, rgba(255,255,255,0.035) 62%, transparent 64%),
    radial-gradient(circle 70px at 60% 15%, transparent 58%, rgba(255,255,255,0.04) 60%, rgba(255,255,255,0.04) 62%, transparent 64%);
}

/* Ensure content sits above the circle overlay */
.golf-dimples > * {
  position: relative;
  z-index: 2;
}

/* Make headings uppercase and bold for sports feel */
h1, h2, h3, .hero__heading {
  text-transform: uppercase;
  letter-spacing: 0.03em;
  font-weight: 800;
}

/* Section labels - bright green pill style */
.section-label {
  color: var(--color-primary);
  text-transform: uppercase;
  letter-spacing: 0.15em;
  font-weight: 700;
  font-family: var(--font-heading);
}

/* Hero overrides for full-impact */
/* Account for nav height so hero + nav = exactly one viewport */
.hero--image {
  min-height: calc(100vh - 80px);
  min-height: calc(100svh - 80px);
}

/* Parallax hero - JS-driven background movement for cross-browser support */
.hero--parallax {
  background-position: center center;
  background-size: cover;
  overflow: hidden;
}

/* Parallax text float effect - content fades/rises as you scroll */
.hero--parallax .hero__content {
  animation: heroFloatIn 1s ease-out both;
}

@keyframes heroFloatIn {
  from {
    opacity: 0;
    transform: translateY(40px);
  }
  to {
    opacity: 1;
    transform: translateY(0);
  }
}

/* Hero button overrides - must match .hero--image specificity from components.css */
.hero--image .btn--primary {
  background-color: var(--color-primary);
  border-color: var(--color-primary);
  color: #FFFFFF;
  font-size: 1.25rem;
  padding: 1rem 2.5rem;
  box-shadow: 0 0 25px rgba(0, 201, 167, 0.5);
  text-shadow: 0 1px 2px rgba(0, 0, 0, 0.4);
}

.hero--image .btn--primary:hover {
  background-color: #FFFFFF;
  border-color: #FFFFFF;
  color: #000000;
  text-shadow: none;
}

.hero--image .btn--secondary {
  color: #FFFFFF;
  border-color: #FFFFFF;
  background: rgba(0, 0, 0, 0.4);
  font-size: 1.25rem;
  padding: 1rem 2.5rem;
  text-shadow: 0 1px 3px rgba(0, 0, 0, 0.6);
}

.hero--image .btn--secondary:hover {
  background-color: var(--color-primary);
  border-color: var(--color-primary);
  color: #FFFFFF;
}

/* 1. Hero heading - Russo One matches the wide blocky athletic style on the flyer */
.hero--image .hero__heading {
  font-family: 'Russo One', 'Teko', 'Impact', sans-serif;
  font-size: clamp(3rem, 10vw, 7rem);
  line-height: 1.05;
  font-weight: 400; /* Russo One only has 400 but renders heavy */
  letter-spacing: 0.04em;
  text-shadow: 0 0 40px rgba(0, 201, 167, 0.3), 0 4px 8px rgba(0, 0, 0, 0.5);
}

.hero--image .hero__text {
  font-size: var(--text-lg);
  color: rgba(255, 255, 255, 0.85);
  max-width: 600px;
}

/* 3. Info band - larger titles, bigger icons */
.info-band--primary {
  background: var(--color-surface);
  border-top: 3px solid var(--color-primary);
  border-bottom: 3px solid var(--color-primary);
  padding: 2rem 0;
}

.info-band__icon {
  color: var(--color-primary);
  background: rgba(0, 201, 167, 0.15);
  border-radius: 50%;
  padding: 0.75rem;
}

.info-band__icon svg {
  width: 2rem;
  height: 2rem;
}

.info-band__title {
  color: #FFFFFF;
  font-family: var(--font-heading);
  font-size: 1.5rem;
  font-weight: 700;
  letter-spacing: 0.03em;
  text-transform: uppercase;
}

.info-band__text {
  color: var(--color-text-light);
  font-size: 0.95rem;
}

/* Cards on dark background */
.card--service,
.card--feature {
  background: var(--color-surface);
  border: 1px solid var(--color-border);
  color: var(--color-text);
}

.card--service:hover,
.card--feature:hover {
  border-color: var(--color-primary);
  box-shadow: 0 0 30px rgba(0, 201, 167, 0.15);
}

.card__icon {
  color: var(--color-primary);
}

/* 4. Card titles - larger and bolder */
.card__title {
  color: #FFFFFF;
  font-size: 1.6rem;
  font-weight: 700;
  letter-spacing: 0.03em;
}

/* Icon boxes */
.icon-box {
  background: var(--color-surface);
  border: 1px solid var(--color-border);
}

.icon-box:hover {
  border-color: var(--color-primary);
}

.icon-box__icon {
  color: var(--color-primary);
}

/* Pricing cards */
.pricing-card {
  background: var(--color-surface);
  border: 1px solid var(--color-border);
  color: var(--color-text);
}

.pricing-card--featured {
  border-color: var(--color-primary);
  box-shadow: 0 0 40px rgba(0, 201, 167, 0.2);
}

.pricing-card--featured .pricing-card__badge {
  background: var(--color-primary);
  color: var(--color-text-inverse);
}

.pricing-card__price {
  color: var(--color-primary);
}

.pricing-card__name {
  color: #FFFFFF;
}

/* Angled accent bar - matches flyer's geometric green bars */
.section--angled {
  position: relative;
  clip-path: polygon(0 3vw, 100% 0, 100% calc(100% - 3vw), 0 100%);
  padding-top: calc(3vw + 3rem);
  padding-bottom: calc(3vw + 3rem);
}

@media (max-width: 768px) {
  .section--angled {
    clip-path: polygon(0 2vw, 100% 0, 100% calc(100% - 2vw), 0 100%);
    padding-top: calc(2vw + 2rem);
    padding-bottom: calc(2vw + 2rem);
  }
}

/* Green accent stripe divider (like the flyer's horizontal bars) */
.accent-stripe {
  height: 4px;
  background: linear-gradient(90deg, transparent, var(--color-primary), transparent);
  border: none;
  margin: 0;
}

/* CTA banner - with flyer-style circle rings */
.cta-banner {
  background-color: var(--color-secondary);
  background-image:
    radial-gradient(circle 70px at 20% 30%, transparent 58%, rgba(0,201,167,0.06) 60%, rgba(0,201,167,0.06) 62%, transparent 64%),
    radial-gradient(circle 50px at 80% 60%, transparent 58%, rgba(0,201,167,0.05) 60%, rgba(0,201,167,0.05) 62%, transparent 64%),
    radial-gradient(circle 90px at 60% 20%, transparent 58%, rgba(0,201,167,0.04) 60%, rgba(0,201,167,0.04) 62%, transparent 64%),
    linear-gradient(135deg, var(--color-secondary-dark), var(--color-secondary));
  border-top: 3px solid var(--color-primary);
  border-bottom: 3px solid var(--color-primary);
}

.cta-banner h2 {
  color: #FFFFFF;
  font-size: clamp(2rem, 5vw, 3.5rem);
}

.cta-banner p {
  color: rgba(255, 255, 255, 0.85);
  font-size: var(--text-lg);
}

/* Sections */
.section--alt {
  background-color: var(--color-bg-alt);
}

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

/* Testimonials */
.testimonial--card {
  background: var(--color-surface);
  border: 1px solid var(--color-border);
}

.testimonial__quote {
  color: var(--color-text);
}

.testimonial__author {
  color: #FFFFFF;
}

.testimonial__stars svg {
  fill: #c99400;
}

/* 5. Accordion / FAQ - larger, more readable headings */
.accordion__trigger {
  color: #FFFFFF;
  display: flex;
  align-items: center;
  justify-content: space-between;
  width: 100%;
  gap: 1rem;
  font-size: 1.35rem;
  font-weight: 600;
  font-family: var(--font-body);
  text-transform: none;
  letter-spacing: 0;
  line-height: 1.3;
}

.accordion__trigger svg {
  width: 1.5rem;
  height: 1.5rem;
  min-width: 1.5rem;
  color: var(--color-primary);
  transition: transform 0.3s ease;
}

.accordion__trigger[aria-expanded="true"] svg {
  transform: rotate(180deg);
}

.accordion__content {
  color: var(--color-text);
}

.faq-item {
  border-color: var(--color-border);
}

/* Modern form styling */
.form input,
.form select,
.form textarea {
  background: rgba(255, 255, 255, 0.06);
  border: 2px solid rgba(255, 255, 255, 0.15);
  border-radius: 10px;
  color: #FFFFFF;
  padding: 0.9rem 1.1rem;
  font-size: 1rem;
  font-family: var(--font-body);
  transition: border-color 0.2s ease, box-shadow 0.2s ease, background 0.2s ease;
  -webkit-appearance: none;
  -moz-appearance: none;
  appearance: none;
  width: 100%;
}

.form select {
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='16' height='16' viewBox='0 0 24 24' fill='none' stroke='%2300C9A7' stroke-width='2.5' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpolyline points='6 9 12 15 18 9'%3E%3C/polyline%3E%3C/svg%3E");
  background-repeat: no-repeat;
  background-position: right 1rem center;
  background-size: 1rem;
  padding-right: 2.5rem;
  cursor: pointer;
}

.form input[type="date"] {
  cursor: pointer;
  color-scheme: dark;
}

/* Date picker calendar icon - visible on dark bg */
.form input[type="date"]::-webkit-calendar-picker-indicator {
  filter: invert(1) brightness(2);
  cursor: pointer;
  opacity: 0.7;
}

.form input[type="date"]::-webkit-calendar-picker-indicator:hover {
  opacity: 1;
}

/* Consistent height for date and select side by side */
.form input[type="date"],
.form select {
  height: 3.2rem;
}

/* Dropdown/select dark themed options */
.form select option {
  background: #0B1F1C;
  color: #AABBB7;
  padding: 0.5rem;
}

.form select option:checked,
.form select option:hover {
  background: #132E2A;
  color: #FFFFFF;
}

.form input:hover,
.form select:hover,
.form textarea:hover {
  border-color: rgba(255, 255, 255, 0.3);
  background: rgba(255, 255, 255, 0.08);
}

.form input:focus,
.form select:focus,
.form textarea:focus {
  border-color: var(--color-primary);
  box-shadow: 0 0 0 3px rgba(0, 201, 167, 0.15), 0 0 20px rgba(0, 201, 167, 0.1);
  background: rgba(255, 255, 255, 0.08);
  outline: none;
}

.form input::placeholder,
.form textarea::placeholder {
  color: rgba(255, 255, 255, 0.35);
}

.form label {
  color: #FFFFFF;
  font-weight: 500;
  font-size: 0.9rem;
  text-transform: uppercase;
  letter-spacing: 0.05em;
  margin-bottom: 0.4rem;
  display: block;
}

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

/* 6. Form submit button - larger text, rounded */
.form .btn--primary,
.form button[type="submit"] {
  font-size: 1.4rem;
  padding: 1.1rem 2rem;
  letter-spacing: 0.1em;
  border-radius: 10px;
}

/* Form group spacing */
.form__group {
  margin-bottom: 1.25rem;
}

/* 2. Buttons - high contrast text, bold and visible */
.btn--primary {
  background: var(--color-primary);
  color: #FFFFFF;
  font-family: var(--font-heading);
  text-transform: uppercase;
  letter-spacing: 0.08em;
  font-weight: 700;
  font-size: 1.25rem;
  padding: 1rem 2.5rem;
  box-shadow: 0 0 25px rgba(0, 201, 167, 0.5);
  text-shadow: 0 1px 2px rgba(0, 0, 0, 0.4);
}

.btn--primary:hover {
  background: #FFFFFF;
  color: #000000;
  box-shadow: 0 0 30px rgba(255, 255, 255, 0.4);
  text-shadow: none;
}

.btn--secondary {
  border: 2px solid #FFFFFF;
  color: #FFFFFF;
  font-family: var(--font-heading);
  text-transform: uppercase;
  letter-spacing: 0.08em;
  font-weight: 700;
  font-size: 1.25rem;
  padding: 1rem 2.5rem;
  background: rgba(0, 0, 0, 0.4);
  backdrop-filter: blur(4px);
  text-shadow: 0 1px 3px rgba(0, 0, 0, 0.6);
}

.btn--secondary:hover {
  background: var(--color-primary);
  border-color: var(--color-primary);
  color: #FFFFFF;
  text-shadow: 0 1px 2px rgba(0, 0, 0, 0.4);
}

.btn--accent {
  background: var(--color-primary);
  color: var(--color-text-inverse);
  font-family: var(--font-heading);
  text-transform: uppercase;
  letter-spacing: 0.05em;
  font-weight: 700;
}

.btn--accent:hover {
  background: #FFFFFF;
  color: var(--color-bg);
}

/* Nav on dark background */
.nav {
  background: var(--color-bg-dark);
  border-bottom: 1px solid var(--color-border);
}

.nav__name {
  color: #FFFFFF;
  font-family: var(--font-heading);
  text-transform: uppercase;
  letter-spacing: 0.05em;
}

.nav__title {
  color: var(--color-primary);
}

.nav__link {
  color: var(--color-text);
}

.nav__link:hover,
.nav__link--active {
  color: var(--color-primary);
}

.nav__mobile {
  background: var(--color-bg-dark);
}

.nav-scroll {
  background: var(--color-bg-dark);
  border-bottom: 1px solid var(--color-border);
}

.nav-scroll__name {
  color: #FFFFFF;
}

/* Footer */
.footer {
  background: var(--color-bg-dark);
  border-top: 3px solid var(--color-primary);
}

.footer__brand-name {
  color: #FFFFFF;
  font-family: var(--font-heading);
  text-transform: uppercase;
}

.footer__heading {
  color: var(--color-primary);
}

.footer__link {
  color: var(--color-text-light);
}

.footer__link:hover {
  color: var(--color-primary);
}

.footer__contact-item {
  color: var(--color-text);
}

.footer__contact-item a {
  color: var(--color-text);
}

.footer__contact-item a:hover {
  color: var(--color-primary);
}

.footer__bottom {
  border-top-color: var(--color-border);
  color: var(--color-text-light);
}

.footer__legal a {
  color: var(--color-text-light);
}

/* Cookie banner */
.cookie-banner {
  background: var(--color-surface);
  border-top: 1px solid var(--color-border);
}

/* Back to top */
.back-to-top {
  background: var(--color-primary);
  color: var(--color-text-inverse);
}

/* Gallery grid - enhanced for large visuals */
.gallery-grid {
  gap: 0.5rem;
}

.gallery-item img {
  border-radius: var(--radius-md);
}

/* Bento gallery enhancements for venue photos */
.bento {
  gap: 0.5rem;
}

.bento__item {
  border-radius: var(--radius-md);
  overflow: hidden;
}

/* ===== CUSTOM COMPONENTS FOR PIN HIGH ===== */

/* Sticky mobile CTA */
.sticky-cta {
  display: none;
  position: fixed;
  bottom: 0;
  left: 0;
  right: 0;
  z-index: 999;
  padding: 0.75rem 1rem;
  background: var(--color-bg-dark);
  border-top: 2px solid var(--color-primary);
  text-align: center;
  transform: translateY(100%);
  transition: transform 0.3s ease;
}

.sticky-cta--visible {
  transform: translateY(0);
}

.sticky-cta .btn {
  width: 100%;
  max-width: 400px;
  padding: 1rem 2rem;
  font-size: 1.1rem;
}

@media (max-width: 768px) {
  .sticky-cta {
    display: block;
  }
}

/* Opening hours table */
.hours-table {
  width: 100%;
  border-collapse: collapse;
}

.hours-table td {
  padding: 0.75rem 1rem;
  border-bottom: 1px solid var(--color-border);
  color: var(--color-text);
}

.hours-table td:first-child {
  font-weight: 600;
  color: #FFFFFF;
}

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

.hours-table .hours-table__open {
  color: var(--color-primary);
  font-weight: 600;
}

.hours-table .hours-table__closed {
  color: var(--color-text-light);
  font-style: italic;
}

/* Map container - large and prominent */
.map-container {
  border-radius: var(--radius-md);
  overflow: hidden;
  border: 1px solid var(--color-border);
  min-height: 400px;
  height: 100%;
}

.map-container iframe {
  width: 100%;
  height: 100%;
  min-height: 400px;
  border: 0;
  display: block;
}

/* Bento gallery - clickable items for venue showcase */
.bento--gallery {
  display: grid;
  grid-template-columns: 1fr 1fr;
  grid-template-rows: auto auto;
  gap: 0.5rem;
}

.bento--gallery .bento__item {
  position: relative;
  overflow: hidden;
  border-radius: var(--radius-md);
  cursor: pointer;
  background: var(--color-surface);
}

.bento--gallery .bento__item img {
  width: 100%;
  height: 100%;
  min-height: 100%;
  object-fit: cover;
  display: block;
  position: absolute;
  inset: 0;
  transition: transform 0.4s ease;
}

.bento--gallery .bento__item {
  position: relative;
}

.bento--gallery .bento__item:hover img {
  transform: scale(1.05);
}

.bento--gallery .bento__item--hero {
  grid-column: 1 / 2;
  grid-row: 1 / 3;
  min-height: 550px;
}

.bento--gallery .bento__item--small {
  min-height: 272px;
}

@media (max-width: 768px) {
  .bento--gallery {
    grid-template-columns: 1fr;
    grid-template-rows: auto;
  }
  .bento--gallery .bento__item--hero {
    grid-column: 1;
    grid-row: auto;
    min-height: 250px;
  }
  .bento--gallery .bento__item--small {
    min-height: 200px;
  }
}

@media (min-width: 1024px) {
  .bento--gallery .bento__item--hero {
    min-height: 650px;
  }
  .bento--gallery .bento__item--small {
    min-height: 321px;
  }
}

/* Bottom spanning image - taller for impact */
.bento--gallery .bento__item--wide {
  min-height: 350px;
}

@media (min-width: 1024px) {
  .bento--gallery .bento__item--wide {
    min-height: 400px;
  }
}

/* Bento gallery overlay on hover */
.bento--gallery .bento__item::after {
  content: '';
  position: absolute;
  inset: 0;
  background: rgba(0, 201, 167, 0.08);
  opacity: 0;
  transition: opacity 0.3s ease;
  pointer-events: none;
}

.bento--gallery .bento__item:hover::after {
  opacity: 1;
}

/* Gallery lightbox for bento */
.bento-lightbox {
  position: fixed;
  inset: 0;
  z-index: 10000;
  background: rgba(0, 0, 0, 0.92);
  display: flex;
  align-items: center;
  justify-content: center;
  opacity: 0;
  visibility: hidden;
  transition: opacity 0.3s ease, visibility 0.3s ease;
}

.bento-lightbox--open {
  opacity: 1;
  visibility: visible;
}

.bento-lightbox__img {
  max-width: 90vw;
  max-height: 90vh;
  border-radius: var(--radius-md);
  box-shadow: 0 0 60px rgba(0, 201, 167, 0.2);
}

.bento-lightbox__close {
  position: absolute;
  top: 1.5rem;
  right: 1.5rem;
  width: 3rem;
  height: 3rem;
  background: var(--color-primary);
  color: var(--color-text-inverse);
  border: none;
  border-radius: 50%;
  font-size: 1.5rem;
  cursor: pointer;
  display: flex;
  align-items: center;
  justify-content: center;
  transition: background 0.2s ease;
}

.bento-lightbox__close:hover {
  background: #FFFFFF;
}

.bento-lightbox__nav {
  position: absolute;
  top: 50%;
  transform: translateY(-50%);
  width: 3rem;
  height: 3rem;
  background: rgba(0, 201, 167, 0.3);
  color: #FFFFFF;
  border: none;
  border-radius: 50%;
  font-size: 1.5rem;
  cursor: pointer;
  display: flex;
  align-items: center;
  justify-content: center;
  transition: background 0.2s ease;
}

.bento-lightbox__nav:hover {
  background: var(--color-primary);
}

.bento-lightbox__prev {
  left: 1.5rem;
}

.bento-lightbox__next {
  right: 1.5rem;
}

/* Site credit - distinct black background from footer */
.site-credit {
  background: #000000;
  color: var(--color-text-light);
  padding-bottom: 1rem;
}

@media (max-width: 768px) {
  .site-credit {
    padding-bottom: 5rem; /* space for sticky CTA */
  }
}

.site-credit a {
  color: var(--color-primary);
}

/* Testimonials - centered on mobile */
@media (max-width: 768px) {
  .testimonial--card {
    text-align: center;
  }

  .testimonial__stars {
    justify-content: center;
  }

  .testimonial__author {
    text-align: center;
  }
}

/* Gallery images - consistent height on mobile */
@media (max-width: 768px) {
  .bento--gallery .bento__item--hero,
  .bento--gallery .bento__item--small,
  .bento--gallery .bento__item--wide {
    min-height: 250px;
  }
}

/* Section subtitle on dark bg */
.section-subtitle {
  color: var(--color-text-light);
}

/* Split layout for hours + map */
.split--hours {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 3rem;
  align-items: start;
}

@media (max-width: 768px) {
  .split--hours {
    grid-template-columns: 1fr;
    gap: 2rem;
  }
}

/* Gap between Trackman badge and hero heading */
.trackman-badge {
  margin-bottom: 1.5rem;
}

/* Hero ticks - centered on mobile, wrap properly */
.hero__ticks {
  flex-wrap: wrap;
  justify-content: center;
  gap: 0.5rem 1rem;
}

/* Info band - stack title above text on mobile */
@media (max-width: 768px) {
  .info-band__item {
    text-align: center;
    flex-direction: column;
    align-items: center;
  }

  .info-band__item-text {
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 0.25rem;
  }

  .info-band__title {
    display: block;
    width: 100%;
    text-align: center;
  }

  .info-band__text {
    display: block;
    width: 100%;
    text-align: center;
  }
}

/* Trackman badge */
.trackman-badge {
  display: inline-flex;
  align-items: center;
  gap: 0.5rem;
  background: var(--color-surface);
  border: 1px solid var(--color-primary);
  border-radius: var(--radius-full);
  padding: 0.5rem 1.25rem;
  color: var(--color-primary);
  font-family: var(--font-heading);
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: 0.05em;
  font-size: 0.85rem;
}

.trackman-badge svg {
  width: 1.2em;
  height: 1.2em;
}