/* ============================================
   GENEGANTSLET GOLF CLUB — Stylesheet
   Built by Williamson Automation
   ============================================ */

/* --- RESET & BASE --- */
*, *::before, *::after {
  margin: 0;
  padding: 0;
  box-sizing: border-box;
}

html {
  -webkit-text-size-adjust: 100%;
  /* No scroll-behavior: smooth — ScrollSmoother is active */
}

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-3-4 { aspect-ratio: 3/4; }
.aspect-1-1 { aspect-ratio: 1/1; }

.aspect-4-3 img,
.aspect-16-9 img,
.aspect-3-4 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%; }

/* --- CUSTOM PROPERTIES --- */
:root {
  /* Colors — Primary */
  --color-primary: #1B4332;
  --color-primary-light: #2D6A4F;
  --color-primary-dark: #0D2818;
  --color-primary-rgb: 27, 67, 50;

  /* Colors — Secondary */
  --color-secondary: #B08D57;
  --color-secondary-light: #D4B483;
  --color-secondary-rgb: 176, 141, 87;

  /* Colors — Accent */
  --color-accent: #C9A84C;
  --color-accent-rgb: 201, 168, 76;

  /* Colors — Neutrals */
  --color-bg: #FAF7F2;
  --color-surface: #F0EBE3;
  --color-surface-dark: #E8E0D4;
  --color-text: #1A1A1A;
  --color-text-secondary: #5C5C5C;
  --color-text-light: #FAF7F2;
  --color-border: #D4CFC7;

  /* Typography */
  --font-heading: 'Playfair Display', Georgia, 'Times New Roman', 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: 1320px;
  --gap: 2rem;
  --gap-lg: 3rem;

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

  /* Nav */
  --nav-height: 72px;
  --nav-bg: rgba(13, 40, 24, 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);

  /* Border Radius */
  --radius-sm: 4px;
  --radius-md: 8px;
  --radius-lg: 12px;
  --radius-xl: 16px;
}

/* --- TYPOGRAPHY --- */
h1, h2, h3, h4, h5, h6 {
  font-family: var(--font-heading);
  line-height: 1.2;
  color: var(--color-primary-dark);
}

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

h2 {
  font-size: clamp(2rem, 4vw, 3.5rem);
  font-weight: 600;
  letter-spacing: -0.01em;
  margin-bottom: 1.5rem;
}

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

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

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

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

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

.section__subtitle {
  font-size: 1.0625rem;
  color: var(--color-text-secondary);
  max-width: 60ch;
  margin-bottom: 2rem;
}

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

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

/* Gold decorative line below labels */
.section__label::after {
  content: '';
  display: block;
  width: 40px;
  height: 2px;
  background: var(--color-secondary);
  margin-top: 0.75rem;
}

.section__label--centered {
  text-align: center;
}

.section__label--centered::after {
  margin-left: auto;
  margin-right: auto;
}

/* --- 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__inner {
  max-width: var(--content-max-width);
  margin: 0 auto;
}

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

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

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

.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--dark .section__label {
  color: var(--color-accent);
}

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

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

.section--darker .section__label {
  color: var(--color-accent);
}

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

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

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

/* Centered content blocks */
.content-centered {
  text-align: center;
  max-width: 68ch;
  margin-left: auto;
  margin-right: auto;
}

.content-centered p {
  margin-left: auto;
  margin-right: auto;
}

/* --- SCROLLSMOOTHER WRAPPERS --- */
#smooth-wrapper {
  overflow: hidden;
  position: fixed;
  height: 100%;
  width: 100%;
  top: 0;
  left: 0;
  z-index: 1;
}

#smooth-content {
  overflow: visible;
  width: 100%;
}

/* --- 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: box-shadow var(--transition-base), border-color var(--transition-base);
  border-bottom: 1px solid transparent;
}

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

.nav-logo {
  font-family: var(--font-heading);
  font-size: 1.25rem;
  font-weight: 600;
  color: var(--color-text-light);
  text-decoration: none;
  white-space: nowrap;
  flex-shrink: 0;
}

.nav-links {
  display: none;
  align-items: center;
  gap: 2rem;
}

.nav-link {
  font-family: var(--font-body);
  font-size: 0.875rem;
  font-weight: 500;
  letter-spacing: 0.06em;
  text-transform: uppercase;
  color: var(--color-text-light);
  text-decoration: none;
  position: relative;
  padding: 0.25rem 0;
  transition: color var(--transition-base);
}

.nav-link::after {
  content: '';
  position: absolute;
  bottom: 0;
  left: 50%;
  transform: translateX(-50%);
  width: 0;
  height: 2px;
  background: var(--color-accent);
  transition: width var(--transition-base);
}

.nav-link.is-active {
  color: var(--color-accent);
}

.nav-link.is-active::after {
  width: 100%;
}

.nav-cta {
  display: none;
  align-items: center;
  gap: 0.5rem;
  background: var(--color-accent);
  color: var(--color-primary-dark);
  padding: 0.625rem 1.5rem;
  border-radius: var(--radius-sm);
  font-size: 0.8125rem;
  font-weight: 600;
  letter-spacing: 0.06em;
  text-transform: uppercase;
  text-decoration: none;
  transition: background var(--transition-base), transform var(--transition-base);
  white-space: nowrap;
}

/* Hamburger — must be above mobile panel (z-index 9999) */
.nav-hamburger {
  display: flex;
  flex-direction: column;
  justify-content: center;
  align-items: center;
  width: 44px;
  height: 44px;
  cursor: pointer;
  z-index: 10000;
  position: relative;
  background: none;
  border: none;
  padding: 0;
}

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

.nav-hamburger__line + .nav-hamburger__line {
  margin-top: 6px;
}

.nav-hamburger.is-active .nav-hamburger__line:nth-child(1) {
  transform: translateY(8px) rotate(45deg);
}

.nav-hamburger.is-active .nav-hamburger__line:nth-child(2) {
  opacity: 0;
}

.nav-hamburger.is-active .nav-hamburger__line:nth-child(3) {
  transform: translateY(-8px) rotate(-45deg);
}

/* Mobile nav panel — moved to body child via JS for iOS fixed-position reliability */
.nav-mobile-panel {
  position: fixed;
  top: 0;
  left: 0;
  right: 0;
  bottom: 0;
  width: 100%;
  height: 100%;
  height: 100dvh;
  background: #0d2818;
  z-index: 9999;
  opacity: 0;
  visibility: hidden;
  transition: opacity 0.3s ease, visibility 0s linear 0.3s;
  display: flex;
  flex-direction: column;
  justify-content: center;
  align-items: center;
  gap: 0;
  padding: 2rem;
  overflow-y: auto;
  -webkit-overflow-scrolling: touch;
}

.nav-mobile-panel.is-open {
  opacity: 1;
  visibility: visible;
  transition: opacity 0.3s ease, visibility 0s linear 0s;
}

/* Lock body scroll when nav is open */
body.nav-open {
  overflow: hidden !important;
}

/* Kill any transforms on ancestors that break fixed positioning */
body.nav-open #smooth-wrapper,
body.nav-open #smooth-content {
  transform: none !important;
}

.nav-mobile-panel a {
  font-family: var(--font-heading);
  font-size: 1.5rem;
  font-weight: 600;
  color: var(--color-text-light);
  text-decoration: none;
  padding: 1.25rem 0;
  display: block;
  text-align: center;
  transition: color var(--transition-base);
  width: 100%;
  border-bottom: 1px solid rgba(255,255,255,0.06);
}

.nav-mobile-panel a:last-of-type {
  border-bottom: none;
}

.nav-mobile-panel .nav-cta-mobile {
  margin-top: 2rem;
  background: var(--color-accent);
  color: var(--color-primary-dark);
  padding: 1rem 2rem;
  border-radius: var(--radius-sm);
  font-family: var(--font-body);
  font-size: 1rem;
  font-weight: 600;
  letter-spacing: 0.06em;
  text-transform: uppercase;
  display: inline-flex;
  align-items: center;
  gap: 0.5rem;
}

/* --- HERO SECTION (Homepage) --- */
.hero {
  position: relative;
  min-height: 100svh;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  overflow: hidden;
  text-align: center;
  color: var(--color-text-light);
}

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

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

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

.hero__content {
  position: relative;
  z-index: 2;
  padding: calc(var(--nav-height) + 2rem) 1.5rem 4rem;
  max-width: 900px;
  width: 100%;
}

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

.hero__heading {
  font-family: var(--font-heading);
  font-size: clamp(2.5rem, 5.5vw, 5.5rem);
  font-weight: 700;
  letter-spacing: -0.01em;
  line-height: 1.1;
  color: var(--color-text-light);
  text-shadow: 0 2px 20px rgba(0,0,0,0.4), 0 4px 40px rgba(0,0,0,0.2);
  margin-bottom: 1.25rem;
  overflow: hidden;
}

.hero__subheading {
  font-size: clamp(1rem, 1.5vw, 1.1875rem);
  font-weight: 400;
  line-height: 1.6;
  max-width: 600px;
  margin: 0 auto 2.5rem;
  opacity: 0.9;
}

.hero__ctas {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 1rem;
  margin-bottom: 1.5rem;
}

.hero__phone {
  font-family: var(--font-body);
  font-size: 1.125rem;
  font-weight: 600;
  color: var(--color-accent);
  text-decoration: none;
  display: inline-flex;
  align-items: center;
  gap: 0.5rem;
  margin-bottom: 1rem;
  transition: color var(--transition-base);
}

.hero__trust-badge {
  position: absolute;
  top: calc(var(--nav-height) + 1.5rem);
  right: 1.5rem;
  z-index: 3;
  background: rgba(255, 255, 255, 0.1);
  backdrop-filter: blur(12px) saturate(150%);
  -webkit-backdrop-filter: blur(12px) saturate(150%);
  border: 1px solid rgba(255, 255, 255, 0.15);
  border-radius: 100px;
  padding: 0.5rem 1rem;
  font-size: 0.8125rem;
  font-weight: 600;
  color: var(--color-text-light);
  display: none;
  align-items: center;
  gap: 0.35rem;
  white-space: nowrap;
}

.hero__trust-badge .star {
  color: #f59e0b;
}

.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 svg {
  width: 24px;
  height: 24px;
}

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

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

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

.btn--secondary-light {
  background: transparent;
  border: 2px solid rgba(255,255,255,0.6);
  color: var(--color-text-light);
}

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

/* --- SECTION DIVIDERS (disabled — clean horizontal transitions) --- */
.section-angle,
.section-angle-reverse,
.section-angle--soft {
  clip-path: none;
  margin-bottom: 0;
}

.section-wave::after {
  display: none;
}

/* --- BENTO SERVICE GRID (Homepage) --- */
.bento-section {
  padding: 3rem 1.5rem 5rem;
  background: var(--color-bg);
  position: relative;
}

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

.bento-item {
  position: relative;
  overflow: hidden;
  border-radius: var(--radius-lg);
  min-height: 220px;
  cursor: pointer;
  text-decoration: none;
  display: block;
  transform-style: preserve-3d;
}

.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__overlay {
  position: absolute;
  inset: 0;
  background: linear-gradient(to top, rgba(0,0,0,0.7) 0%, rgba(0,0,0,0.1) 60%);
  z-index: 1;
  transition: background var(--transition-slow);
}

.bento-item__content {
  position: relative;
  z-index: 2;
  padding: 2rem;
  display: flex;
  flex-direction: column;
  justify-content: flex-end;
  height: 100%;
  color: var(--color-text-light);
}

.bento-item__heading {
  font-family: var(--font-heading);
  font-size: 1.5rem;
  font-weight: 700;
  color: var(--color-text-light);
  margin-bottom: 0.5rem;
  word-wrap: break-word;
  overflow-wrap: break-word;
  line-height: 1.2;
}

.bento-item__tagline {
  font-size: 0.875rem;
  line-height: 1.5;
  opacity: 0.85;
  margin-bottom: 1rem;
  max-width: 40ch;
  display: -webkit-box;
  -webkit-line-clamp: 3;
  -webkit-box-orient: vertical;
  overflow: hidden;
}

.bento-item__link {
  font-size: 0.875rem;
  font-weight: 600;
  color: var(--color-accent);
  letter-spacing: 0.04em;
  display: inline-flex;
  align-items: center;
  gap: 0.35rem;
}

/* --- TRUST STATS --- */
.trust-stats {
  background: var(--color-primary);
  position: relative;
  z-index: 2;
  padding: 3rem 1.5rem;
}

.trust-stats--with-gradient {
  background: var(--color-primary);
  background-image: radial-gradient(ellipse at center, rgba(45,106,79,0.3), transparent 70%);
}

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

.trust-stat {
  text-align: center;
}

.trust-stat__number {
  font-size: 2.5rem;
  font-weight: 700;
  font-family: var(--font-heading);
  line-height: 1;
  color: var(--color-accent);
}

.trust-stat__label {
  font-size: 0.875rem;
  color: rgba(250,247,242,0.7);
  margin-top: 0.35rem;
}

/* --- COURSE PREVIEW (Homepage) --- */
.course-preview {
  position: relative;
}

.course-preview__grid {
  display: grid;
  grid-template-columns: 1fr;
  gap: var(--gap-lg);
  align-items: center;
}

.course-preview__photo {
  overflow: hidden;
  border-radius: var(--radius-lg);
  aspect-ratio: 4/3;
}

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

.course-preview__content {
  max-width: 540px;
}

.course-preview__stats {
  display: flex;
  flex-wrap: wrap;
  gap: 1.5rem;
  margin-top: 1.5rem;
  margin-bottom: 2rem;
  padding-top: 1.5rem;
  border-top: 1px solid var(--color-secondary);
}

.course-preview__stat {
  font-size: 0.9375rem;
  font-weight: 600;
  color: var(--color-primary);
}

/* --- WEDDING PREVIEW (Homepage) --- */
.wedding-preview {
  position: relative;
}

.wedding-preview--warm {
  background-image: radial-gradient(circle at 30% 40%, rgba(176,141,87,0.06), transparent 50%);
}

.wedding-preview__photos {
  display: grid;
  grid-template-columns: 1fr;
  gap: 1rem;
  margin-top: 2.5rem;
}

.wedding-preview__photo {
  overflow: hidden;
  border-radius: var(--radius-lg);
  cursor: pointer;
}

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

.wedding-preview__photo--tall {
  aspect-ratio: 3/4;
}

.wedding-preview__photo--landscape {
  aspect-ratio: 4/3;
}

/* --- REVIEWS SECTION --- */
.reviews-section {
  background: var(--color-primary);
  color: var(--color-text-light);
  position: relative;
  overflow: hidden;
}

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

.reviews-section h2 {
  color: var(--color-text-light);
}

.review-cards {
  display: grid;
  grid-template-columns: 1fr;
  gap: var(--gap);
  margin-top: 2rem;
}

.review-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-xl);
  padding: 2rem;
  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);
  overflow: hidden;
  min-width: 0;
  word-wrap: break-word;
  overflow-wrap: break-word;
}

.review-stars {
  color: #f59e0b;
  font-size: 1.125rem;
  letter-spacing: 2px;
  margin-bottom: 0.75rem;
}

.review-text {
  font-family: var(--font-heading);
  font-style: italic;
  font-size: 1.0625rem;
  line-height: 1.7;
  margin-bottom: 1rem;
  color: rgba(250,247,242,0.9);
  word-wrap: break-word;
  overflow-wrap: break-word;
  /* NO line-clamp — show FULL quote */
}

.review-cards > * {
  min-width: 0;
}

.review-author {
  font-weight: 600;
  font-size: 0.875rem;
  color: var(--color-secondary-light);
}

/* Review ticker */
.review-ticker {
  margin-top: 2.5rem;
  padding-top: 2rem;
  border-top: 1px solid rgba(255,255,255,0.1);
  text-align: center;
  min-height: 3rem;
  position: relative;
}

.review-ticker__item {
  font-style: italic;
  font-size: 0.9375rem;
  color: rgba(250,247,242,0.7);
  transition: opacity 0.5s ease;
}

.review-ticker__source {
  color: var(--color-secondary-light);
  font-style: normal;
  font-weight: 500;
}

/* --- CTA BAND --- */
.cta-band {
  position: relative;
  overflow: hidden;
  text-align: center;
  color: var(--color-text-light);
  padding: 5rem 1.5rem;
}

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

.cta-band__bg img {
  width: 100%;
  height: 100%;
  object-fit: cover;
}

.cta-band__overlay {
  position: absolute;
  inset: 0;
  background: linear-gradient(to bottom, rgba(13,40,24,0.8), rgba(13,40,24,0.9));
  z-index: 1;
}

.cta-band--solid {
  background: linear-gradient(to bottom, var(--color-primary-dark), var(--color-primary));
  padding: 5rem 1.5rem !important;
}

.cta-band__inner {
  position: relative;
  z-index: 2;
  max-width: 700px;
  margin: 0 auto;
}

.cta-band h2 {
  color: var(--color-text-light);
  text-shadow: 0 2px 20px rgba(0,0,0,0.3);
}

.cta-band p {
  margin-left: auto;
  margin-right: auto;
  opacity: 0.9;
}

.cta-band__ctas {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 1rem;
  margin-top: 2rem;
}

.cta-band__phone {
  font-size: 1.25rem;
  font-weight: 600;
  color: var(--color-accent);
  margin-top: 1.5rem;
  display: inline-flex;
  align-items: center;
  gap: 0.5rem;
  text-decoration: none;
}

/* --- CARDS & COMPONENTS --- */
.card {
  background: var(--color-bg);
  border-radius: var(--radius-lg);
  overflow: hidden;
  min-width: 0;
  border: 1px solid rgba(212,207,199,0.5);
  box-shadow: var(--shadow-card);
  transition: transform var(--transition-base), box-shadow var(--transition-base), border-color var(--transition-base);
}

.card__image {
  overflow: hidden;
}

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

.card__image.aspect-16-9 {
  aspect-ratio: 16/9;
}

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

.card__content,
.card__body {
  padding: 1.5rem 1.5rem 2rem;
  color: var(--color-text-secondary);
  font-size: 0.9375rem;
  line-height: 1.6;
  min-width: 0;
  word-wrap: break-word;
  overflow-wrap: break-word;
}

.card__content p,
.card__body p {
  margin-bottom: 0.5rem;
  word-wrap: break-word;
  overflow-wrap: break-word;
  line-height: 1.6;
  /* NO line-clamp — show FULL text */
}

.card__content p:last-child,
.card__body p:last-child {
  margin-bottom: 0;
}

.card__content .card__heading,
.card__content h3 {
  margin-bottom: 0.75rem;
  color: var(--color-text);
  font-size: clamp(1.2rem, 2vw, 1.5rem);
}

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

.card--gold-top {
  border-top: 4px solid var(--color-secondary);
}

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

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

/* Card grid utility */
.card-grid {
  display: grid;
  grid-template-columns: 1fr;
  gap: var(--gap);
}

/* 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-xl);
  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);
}

/* --- 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;
}

/* 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-lg);
  aspect-ratio: 16/9;
  background: var(--color-surface-dark);
  cursor: pointer;
}

.gallery-set__photo {
  position: absolute;
  inset: 0;
  opacity: 0;
  transition: opacity 0.4s ease;
  pointer-events: none;
}

.gallery-set__photo:first-child {
  opacity: 1;
  pointer-events: auto;
}

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

.gallery-set:nth-child(3) .gallery-set__photo img {
  object-position: center 25%;
}

/* Gallery nav — overlaid on photo, always visible */
.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.65);
  color: #fff;
  border: none;
  font-size: 0;
  cursor: pointer;
  display: flex;
  align-items: center;
  justify-content: center;
  transition: background var(--transition-fast);
}

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

.gallery-set__nav svg {
  width: 20px;
  height: 20px;
  fill: none;
  stroke: #fff;
  stroke-width: 2.5;
  stroke-linecap: round;
  stroke-linejoin: round;
}

.gallery-set__prev {
  left: 1rem;
}

.gallery-set__next {
  right: 1rem;
}

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

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

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

.lightbox__overlay {
  position: absolute;
  inset: 0;
  background: rgba(0,0,0,0.92);
  z-index: 0;
}

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

.lightbox__image {
  max-width: 100%;
  max-height: 100%;
  object-fit: contain;
  border-radius: var(--radius-sm);
  transition: opacity 0.3s ease;
}

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

.lightbox__close:hover {
  background: rgba(255,255,255,0.2);
}

.lightbox__prev,
.lightbox__next {
  position: absolute;
  top: 50%;
  transform: translateY(-50%);
  background: rgba(255,255,255,0.1);
  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);
  z-index: 2;
}

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

.lightbox__prev {
  left: 1.5rem;
}

.lightbox__next {
  right: 1.5rem;
}

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

/* --- FORMS --- */
.contact-form-wrapper {
  background: var(--color-bg);
  border-radius: var(--radius-lg);
  padding: 2rem;
  border: 1px solid rgba(212,207,199,0.5);
  box-shadow: var(--shadow-card);
  border-top: 4px solid var(--color-secondary);
}

.contact-form-wrapper h3 {
  margin-bottom: 1.5rem;
}

.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-input,
.form-textarea,
.form-select {
  width: 100%;
  padding: 0.75rem 1rem;
  font: inherit;
  font-size: 0.9375rem;
  border: 1px solid var(--color-border);
  border-radius: 6px;
  background: var(--color-surface);
  color: var(--color-text);
  transition: border-color var(--transition-fast), box-shadow var(--transition-fast);
}

.form-input:focus,
.form-textarea:focus,
.form-select:focus {
  outline: none;
  border-color: var(--color-accent);
  box-shadow: 0 0 0 3px rgba(201, 168, 76, 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.is-error,
.form-textarea.is-error,
.form-select.is-error {
  border-color: #dc2626;
  box-shadow: 0 0 0 3px rgba(220, 38, 38, 0.1);
}

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

/* 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: 6px;
  background: var(--color-surface);
  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-accent);
  box-shadow: 0 0 0 3px rgba(201, 168, 76, 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);
}

.form-row {
  display: grid;
  grid-template-columns: 1fr;
  gap: 1.25rem;
}

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

/* --- INNER PAGE HEADERS --- */
.inner-hero {
  position: relative;
  min-height: 40vh;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  text-align: center;
  overflow: hidden;
  color: var(--color-text-light);
  padding: calc(var(--nav-height) + 2rem) 1.5rem 3rem;
}

.inner-hero--tall {
  min-height: 50vh;
}

.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;
}

.inner-hero__overlay--default {
  background: linear-gradient(to bottom, rgba(13,40,24,0.3) 0%, rgba(13,40,24,0.7) 100%);
}

.inner-hero__overlay--warm {
  background: linear-gradient(to bottom, rgba(13,40,24,0.1) 0%, rgba(80,60,30,0.3) 40%, rgba(13,40,24,0.7) 100%);
}

.inner-hero__overlay--heavy {
  background: linear-gradient(to bottom, rgba(13,40,24,0.4) 0%, rgba(13,40,24,0.8) 100%);
}

.inner-hero--solid {
  background: linear-gradient(135deg, var(--color-primary-dark) 0%, var(--color-primary) 100%);
}

.inner-hero__content {
  position: relative;
  z-index: 2;
}

.inner-hero__label {
  font-family: var(--font-body);
  font-size: 0.8125rem;
  font-weight: 600;
  letter-spacing: 0.15em;
  text-transform: uppercase;
  color: #fff;
  margin-bottom: 0.75rem;
  display: block;
  text-shadow: 0 1px 8px rgba(0,0,0,0.6), 0 2px 20px rgba(0,0,0,0.3);
}

.inner-hero__heading {
  font-family: var(--font-heading);
  font-size: clamp(2rem, 5vw, 4rem);
  font-weight: 700;
  color: var(--color-text-light);
  text-shadow: 0 2px 20px rgba(0,0,0,0.4);
  letter-spacing: -0.01em;
}

.inner-hero__breadcrumb {
  margin-top: 1rem;
  font-size: 0.8125rem;
  color: rgba(250,247,242,0.6);
}

.inner-hero__breadcrumb a {
  color: rgba(250,247,242,0.6);
  text-decoration: none;
  transition: color var(--transition-fast);
}

.inner-hero__breadcrumb a:hover {
  color: var(--color-accent);
}

.inner-hero__breadcrumb span {
  margin: 0 0.5rem;
}

/* --- GOLF PAGE SECTIONS --- */

/* Course Overview — centered text */
.course-overview {
  text-align: center;
}

.course-overview p {
  text-align: left;
  margin-left: auto;
  margin-right: auto;
}

/* Tee Box Table */
.tee-table-wrapper {
  overflow-x: auto;
  -webkit-overflow-scrolling: touch;
}

.tee-table {
  width: 100%;
  border-collapse: collapse;
  font-size: 0.9375rem;
}

.tee-table thead {
  background: var(--color-primary);
  color: var(--color-text-light);
}

.tee-table th {
  padding: 1rem;
  text-align: left;
  font-weight: 600;
  font-size: 0.8125rem;
  letter-spacing: 0.04em;
  text-transform: uppercase;
}

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

.tee-table tbody tr {
  transition: background var(--transition-fast);
}

.tee-badge {
  display: inline-block;
  width: 12px;
  height: 12px;
  border-radius: 50%;
  margin-right: 0.5rem;
  vertical-align: middle;
}

.tee-badge--blue { background: #2563eb; }
.tee-badge--white { background: #fff; border: 1px solid #ccc; }
.tee-badge--gold { background: var(--color-secondary); }
.tee-badge--red { background: #dc2626; }

/* Tee cards for mobile */
.tee-cards {
  display: grid;
  grid-template-columns: 1fr;
  gap: 1rem;
}

.tee-card {
  background: var(--color-bg);
  border-radius: var(--radius-lg);
  padding: 1.5rem;
  border: 1px solid rgba(212,207,199,0.5);
  box-shadow: var(--shadow-card);
}

.tee-card__header {
  display: flex;
  align-items: center;
  gap: 0.5rem;
  margin-bottom: 1rem;
  font-weight: 600;
  font-size: 1.125rem;
}

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

.tee-card__stat-label {
  font-size: 0.75rem;
  color: var(--color-text-secondary);
  text-transform: uppercase;
  letter-spacing: 0.04em;
}

.tee-card__stat-value {
  font-size: 1.125rem;
  font-weight: 700;
  color: var(--color-primary);
}

/* Green Fees split layout */
.fees-grid {
  display: grid;
  grid-template-columns: 1fr;
  gap: var(--gap-lg);
}

.fees-content .price {
  font-size: 1.125rem;
}

/* Membership rate items */
.rate-grid {
  display: grid;
  grid-template-columns: 1fr;
  gap: 0;
}

.rate-item {
  display: flex;
  justify-content: space-between;
  align-items: center;
  padding: 1rem 0;
  border-bottom: 1px solid var(--color-border);
  transition: background var(--transition-fast);
}

.rate-item:last-child {
  border-bottom: none;
}

.rate-item__name {
  font-weight: 500;
  color: var(--color-text);
}

.rate-item__badge {
  display: inline-block;
  background: var(--color-accent);
  color: var(--color-primary-dark);
  font-size: 0.6875rem;
  font-weight: 700;
  letter-spacing: 0.04em;
  text-transform: uppercase;
  padding: 0.2rem 0.5rem;
  border-radius: 100px;
  margin-left: 0.5rem;
}

.rate-item__price {
  font-size: 1.125rem;
  font-weight: 700;
  color: var(--color-secondary);
}

/* Amenities grid */
.amenities-grid {
  display: grid;
  grid-template-columns: repeat(2, 1fr);
  gap: 1.5rem;
}

.amenity-item {
  background: var(--color-bg);
  border-radius: var(--radius-lg);
  padding: 1.5rem;
  box-shadow: var(--shadow-card);
  text-align: center;
  transition: transform var(--transition-base), box-shadow var(--transition-base);
}

.amenity-item__icon {
  font-size: 2rem;
  margin-bottom: 0.75rem;
}

.amenity-item__heading {
  font-family: var(--font-heading);
  font-size: 1.1rem;
  font-weight: 600;
  margin-bottom: 0.5rem;
  color: var(--color-primary);
}

.amenity-item__desc {
  font-size: 0.875rem;
  color: var(--color-text-secondary);
  line-height: 1.5;
}

/* --- WEDDING PAGE SECTIONS --- */

/* Venue spaces cards */
.venue-cards {
  display: grid;
  grid-template-columns: 1fr;
  gap: var(--gap);
}

.venue-cards > *,
.venue-grid > *,
.card-grid > *,
.stagger-grid > *,
[class*="grid"] > * {
  min-width: 0;
}

/* Wedding gallery preview */
.wedding-gallery-preview {
  display: grid;
  grid-template-columns: repeat(2, 1fr);
  gap: 1rem;
  margin-top: 2rem;
}

.wedding-gallery-preview .gallery-item {
  aspect-ratio: 4/3;
}

/* Catering pricing card */
.catering-card {
  background: var(--color-bg);
  border-radius: var(--radius-lg);
  border: 1px solid rgba(212,207,199,0.5);
  border-top: 4px solid var(--color-secondary);
  box-shadow: var(--shadow-card);
  padding: 2rem;
}

.catering-card h3 {
  margin-bottom: 1rem;
}

.catering-card .price {
  font-size: 1.5rem;
}

.add-on-list {
  margin-top: 1.5rem;
}

.add-on-item {
  display: flex;
  justify-content: space-between;
  padding: 0.5rem 0;
  border-bottom: 1px solid var(--color-border);
  font-size: 0.9375rem;
}

.add-on-item:last-child {
  border-bottom: none;
}

/* --- EVENTS PAGE SECTIONS --- */

/* Tournament cards */
.tournament-cards {
  display: grid;
  grid-template-columns: 1fr;
  gap: var(--gap);
}

.tournament-card {
  background: var(--color-bg);
  border-radius: var(--radius-lg);
  border: 1px solid rgba(212,207,199,0.5);
  border-top: 4px solid var(--color-secondary);
  box-shadow: var(--shadow-card);
  padding: 2rem;
  transition: transform var(--transition-base), box-shadow var(--transition-base);
}

.tournament-card .price {
  font-size: 1.75rem;
  display: block;
  margin-bottom: 0.75rem;
}

/* Menu rows (events page) */
.menu-grid {
  display: grid;
  grid-template-columns: 1fr;
  gap: 0;
}

.menu-row {
  display: flex;
  justify-content: space-between;
  align-items: center;
  padding: 0.875rem 1rem;
  border-bottom: 1px solid var(--color-border);
  border-left: 3px solid transparent;
  transition: background var(--transition-fast), border-color var(--transition-fast);
}

.menu-row:last-child {
  border-bottom: none;
}

.menu-row__name {
  font-weight: 500;
  color: var(--color-text);
}

.menu-row__price {
  font-weight: 700;
  color: var(--color-secondary);
  white-space: nowrap;
  margin-left: 1rem;
}

/* Buffet menu sections */
.buffet-section {
  margin-bottom: 2.5rem;
}

.buffet-section h3 {
  margin-bottom: 1rem;
  padding-bottom: 0.5rem;
  border-bottom: 2px solid var(--color-secondary);
}

.buffet-items {
  display: grid;
  grid-template-columns: 1fr;
  gap: 0.5rem;
}

.buffet-item {
  padding: 0.5rem 0;
  font-size: 0.9375rem;
  color: var(--color-text);
  display: flex;
  align-items: center;
  gap: 0.5rem;
}

.buffet-item::before {
  content: '';
  width: 6px;
  height: 6px;
  background: var(--color-secondary);
  border-radius: 50%;
  flex-shrink: 0;
}

.buffet-item .price {
  margin-left: auto;
}

/* Package cards (fall/winter) */
.package-cards {
  display: flex;
  flex-direction: column;
  gap: 1rem;
  min-width: 0;
  width: 100%;
}

.package-card {
  background: var(--color-bg);
  border-radius: var(--radius-lg);
  border: 1px solid rgba(212,207,199,0.5);
  box-shadow: var(--shadow-card);
  padding: 2rem;
  transition: transform var(--transition-base), box-shadow var(--transition-base);
  min-width: 0;
  overflow: hidden;
  width: 100%;
}

.package-card .price {
  font-size: 1.5rem;
  display: block;
  margin-bottom: 0.5rem;
}

.package-card h3 {
  word-wrap: break-word;
  overflow-wrap: break-word;
}

.package-card__ideal {
  font-size: 0.8125rem;
  color: var(--color-text-secondary);
  font-style: italic;
  overflow: hidden;
  display: -webkit-box;
  -webkit-line-clamp: 2;
  -webkit-box-orient: vertical;
}

/* Open bar options */
.bar-options {
  margin-top: 2rem;
}

.bar-option {
  display: flex;
  justify-content: space-between;
  padding: 0.625rem 0;
  border-bottom: 1px solid var(--color-border);
}

.bar-option:last-child {
  border-bottom: none;
}

/* --- SIMULATOR PAGE SECTIONS --- */
.sim-split {
  display: grid;
  grid-template-columns: 1fr;
  gap: var(--gap-lg);
  align-items: center;
}

.sim-photo {
  overflow: hidden;
  border-radius: var(--radius-lg);
  box-shadow: var(--shadow-card);
}

.sim-photo img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  aspect-ratio: 4/3;
}

.sim-info-cards {
  display: grid;
  grid-template-columns: 1fr;
  gap: var(--gap);
}

.sim-info-card {
  background: var(--color-bg);
  border-radius: var(--radius-lg);
  border: 1px solid rgba(212,207,199,0.5);
  border-top: 4px solid var(--color-secondary);
  box-shadow: var(--shadow-card);
  padding: 2rem;
}

.sim-info-card h3 {
  margin-bottom: 1rem;
}

.sim-rate {
  display: flex;
  justify-content: space-between;
  padding: 0.75rem 0;
  border-bottom: 1px solid var(--color-border);
}

.sim-rate:last-child {
  border-bottom: none;
}

.sim-hours-row {
  display: flex;
  justify-content: space-between;
  padding: 0.5rem 0;
}

/* League card */
.league-card {
  background: var(--color-bg);
  border-radius: var(--radius-lg);
  border: 2px solid var(--color-secondary);
  box-shadow: var(--shadow-card);
  padding: 2rem;
  margin-top: 2rem;
}

.league-card h4 {
  margin-bottom: 1rem;
}

.league-details {
  display: grid;
  grid-template-columns: 1fr;
  gap: 0.5rem;
}

.league-detail {
  display: flex;
  gap: 0.75rem;
  font-size: 0.9375rem;
}

.league-detail__label {
  font-weight: 600;
  color: var(--color-primary);
  min-width: 80px;
}

/* --- CONTACT PAGE --- */
.contact-grid {
  display: grid;
  grid-template-columns: 1fr;
  gap: var(--gap-lg);
}

.contact-info-card {
  background: var(--color-bg);
  border-radius: var(--radius-lg);
  border: 1px solid rgba(212,207,199,0.5);
  box-shadow: var(--shadow-card);
  padding: 2rem;
}

.contact-info-item {
  display: flex;
  align-items: flex-start;
  gap: 1rem;
  padding: 0.75rem 0;
  border-bottom: 1px solid var(--color-border);
}

.contact-info-item:last-child {
  border-bottom: none;
}

.contact-info-item__icon {
  font-size: 1.25rem;
  flex-shrink: 0;
  width: 24px;
  text-align: center;
}

.contact-info-item a {
  color: var(--color-primary);
  font-weight: 500;
  text-decoration: none;
  transition: color var(--transition-fast);
}

.contact-info-item a:hover {
  color: var(--color-accent);
}

/* Hours table */
.hours-table {
  width: 100%;
  border-collapse: collapse;
  font-size: 0.9375rem;
  margin-top: 1.5rem;
}

.hours-table th {
  text-align: left;
  font-weight: 600;
  padding: 0.75rem 0;
  border-bottom: 2px solid var(--color-primary);
  font-size: 0.8125rem;
  text-transform: uppercase;
  letter-spacing: 0.04em;
  color: var(--color-primary);
}

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

/* Map embed */
.map-embed {
  border-radius: var(--radius-lg);
  overflow: hidden;
  box-shadow: var(--shadow-card);
  margin-top: 2rem;
}

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

/* --- FOOTER --- */
.site-footer {
  background: var(--color-primary-dark);
  color: var(--color-text-light);
  border-top: 3px solid var(--color-secondary);
}

.footer-main {
  padding: 5rem 1.5rem;
  max-width: var(--content-max-width);
  margin: 0 auto;
  display: grid;
  grid-template-columns: 1fr;
  gap: 3rem;
}

.footer-brand__name {
  font-family: var(--font-heading);
  font-size: 1.25rem;
  font-weight: 600;
  color: var(--color-text-light);
  margin-bottom: 0.35rem;
}

.footer-brand__est {
  font-size: 0.8125rem;
  color: var(--color-accent);
  font-variant: small-caps;
  letter-spacing: 0.06em;
  margin-bottom: 1rem;
}

.footer-brand__desc {
  font-size: 0.875rem;
  color: rgba(250,247,242,0.65);
  line-height: 1.6;
  max-width: 300px;
}

.footer-heading {
  font-family: var(--font-body);
  font-size: 0.875rem;
  font-weight: 600;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  color: var(--color-text-light);
  margin-bottom: 1.25rem;
}

.footer-nav a {
  display: block;
  font-size: 0.9375rem;
  color: var(--color-secondary-light);
  padding: 0.35rem 0;
  text-decoration: none;
  transition: color var(--transition-fast), transform var(--transition-fast);
}

.footer-contact a {
  display: flex;
  align-items: center;
  gap: 0.5rem;
  font-size: 0.9375rem;
  color: var(--color-secondary-light);
  padding: 0.35rem 0;
  text-decoration: none;
  transition: color var(--transition-fast), transform var(--transition-fast);
}

.footer-contact address {
  font-style: normal;
  font-size: 0.9375rem;
  color: rgba(250,247,242,0.65);
  line-height: 1.6;
  margin-bottom: 0.75rem;
}

.footer-hours {
  font-size: 0.875rem;
  color: rgba(250,247,242,0.65);
  line-height: 1.7;
}

.footer-hours strong {
  color: var(--color-text-light);
  font-weight: 600;
  display: block;
  margin-top: 0.5rem;
}

.footer-social {
  display: flex;
  gap: 1rem;
  margin-top: 1.25rem;
}

.footer-social a {
  width: 40px;
  height: 40px;
  border-radius: 50%;
  background: rgba(255,255,255,0.08);
  display: flex;
  align-items: center;
  justify-content: center;
  color: var(--color-text-light);
  transition: background var(--transition-fast), transform var(--transition-fast);
}

.footer-bottom {
  background: rgba(0,0,0,0.3);
  padding: 1.5rem;
  text-align: center;
  font-size: 0.8125rem;
  color: rgba(250,247,242,0.45);
}

.footer-bottom a {
  color: var(--color-secondary-light);
  text-decoration: none;
  transition: color var(--transition-fast);
}

/* --- BACK TO TOP --- */
.back-to-top {
  position: fixed;
  bottom: 2rem;
  right: 2rem;
  width: 48px;
  height: 48px;
  border-radius: 50%;
  background: var(--color-primary);
  color: var(--color-text-light);
  border: none;
  cursor: pointer;
  display: flex;
  align-items: center;
  justify-content: center;
  z-index: 998;
  opacity: 0;
  visibility: hidden;
  transform: translateY(20px);
  transition: opacity var(--transition-base), visibility var(--transition-base), transform var(--transition-base), background var(--transition-base);
  box-shadow: 0 4px 12px rgba(0,0,0,0.15);
}

.back-to-top.is-visible {
  opacity: 1;
  visibility: visible;
  transform: translateY(0);
}

.back-to-top svg {
  width: 20px;
  height: 20px;
}

/* --- STICKY MOBILE CTA --- */
.mobile-cta {
  display: none;
}

/* --- ASYMMETRIC SPLIT LAYOUT --- */
.split-layout {
  display: grid;
  grid-template-columns: 1fr;
  gap: var(--gap-lg);
  align-items: center;
}

.split-layout > * {
  min-width: 0;
  overflow: visible;
}

.split-layout--reverse {
  direction: ltr;
}

/* --- TEXT OVERFLOW PREVENTION --- */
.overflow-hidden {
  overflow: hidden;
}

[class*="badge"],
[class*="tag"] {
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

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

.fade-in {
  opacity: 0;
}

.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.95);
}

.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(100% 0 0 0);
}

.split-heading {
  overflow: hidden;
}

/* ============================================
   HOVER EFFECTS (gated for pointer devices)
   ============================================ */

@media (hover: hover) {
  .nav-link:hover {
    color: var(--color-accent);
  }

  .nav-link:hover::after {
    width: 100%;
  }

  .nav-cta:hover {
    background: var(--color-secondary);
    transform: scale(1.02);
  }

  .card:hover {
    transform: translateY(-4px);
    box-shadow: var(--shadow-card-hover);
    border-color: rgba(176,141,87,0.3);
  }

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

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

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

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

  .btn--secondary:hover {
    background: rgba(176,141,87,0.1);
    border-color: var(--color-accent);
  }

  .btn--secondary-light:hover {
    background: rgba(255,255,255,0.1);
  }

  .bento-item:hover .bento-item__image img {
    transform: scale(1.03);
  }

  .bento-item:hover .bento-item__overlay {
    background: linear-gradient(to top, rgba(0,0,0,0.6) 0%, rgba(0,0,0,0.05) 60%);
  }

  .bento-item:hover .bento-item__heading {
    text-shadow: 0 2px 10px rgba(0,0,0,0.3);
  }

  .review-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);
  }

  .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);
  }

  .tournament-card:hover,
  .package-card:hover,
  .amenity-item:hover {
    transform: translateY(-4px);
    box-shadow: var(--shadow-card-hover);
  }

  .wedding-preview__photo:hover img {
    transform: scale(1.03);
    filter: brightness(1.05);
  }

  .tee-table tbody tr:hover {
    background: rgba(176,141,87,0.06);
  }

  .menu-row:hover {
    background: rgba(176,141,87,0.06);
    border-left-color: var(--color-secondary);
  }

  .rate-item:hover {
    background: rgba(176,141,87,0.04);
  }

  .footer-nav a:hover {
    color: var(--color-accent);
    transform: translateX(3px);
  }

  .footer-contact a:hover {
    color: var(--color-accent);
    transform: translateX(3px);
  }

  .footer-social a:hover {
    background: var(--color-accent);
    transform: translateY(-2px);
  }

  .footer-bottom a:hover {
    color: var(--color-accent);
  }

  .hero__phone:hover {
    color: var(--color-secondary-light);
  }

  .back-to-top:hover {
    background: var(--color-primary-light);
  }

  .cta-band__phone:hover {
    color: var(--color-secondary-light);
  }
}

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

@media (min-width: 768px) {
  /* Typography */
  body {
    font-size: 1.0625rem;
  }

  /* Section padding */
  .section {
    padding: 6rem 2.5rem;
  }

  /* Hero */
  .hero__ctas {
    flex-direction: row;
    justify-content: center;
  }

  .hero__trust-badge {
    display: flex;
  }

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

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

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

  .bento-section {
    padding: 5rem 2.5rem 6rem;
  }

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

  .trust-stats {
    padding: 3.5rem 2.5rem;
  }

  /* Course preview */
  .course-preview__grid {
    grid-template-columns: 55% 1fr;
    gap: var(--gap-lg);
  }

  /* Wedding preview photos */
  .wedding-preview__photos {
    grid-template-columns: 1fr 1.2fr 1fr;
  }

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

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

  .cta-band__ctas {
    flex-direction: row;
    justify-content: center;
  }

  /* Footer */
  .footer-main {
    grid-template-columns: repeat(2, 1fr);
    padding: 5rem 2.5rem;
  }

  /* Cards */
  .card-grid {
    grid-template-columns: repeat(2, 1fr);
  }

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

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

  /* Wedding gallery preview */
  .wedding-gallery-preview {
    grid-template-columns: repeat(4, 1fr);
  }

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

  /* Package cards — stay flex column at all sizes */
  .package-cards {
    flex-direction: column;
  }

  /* Fall/winter split layout — give more room to packages */
  #fall-winter .split-layout {
    grid-template-columns: 40% 1fr;
  }

  /* Fees grid */
  .fees-grid {
    grid-template-columns: 1fr 1fr;
  }

  /* Simulator split */
  .sim-split {
    grid-template-columns: 45% 1fr;
  }

  .sim-info-cards {
    grid-template-columns: repeat(2, 1fr);
  }

  /* Contact grid */
  .contact-grid {
    grid-template-columns: 1fr 1fr;
  }

  /* Split layout */
  .split-layout {
    grid-template-columns: 55% 1fr;
  }

  .split-layout--reverse {
    grid-template-columns: 1fr 55%;
  }

  /* Buffet items */
  .buffet-items {
    grid-template-columns: repeat(2, 1fr);
  }

  /* Menu grid */
  .menu-grid {
    grid-template-columns: repeat(2, 1fr);
    gap: 0 2rem;
  }

  /* Form row */
  .form-row {
    grid-template-columns: repeat(2, 1fr);
  }

  /* Map embed */
  .map-embed iframe {
    height: 350px;
  }

  /* Amenities */
  .amenities-grid {
    grid-template-columns: repeat(3, 1fr);
  }

  /* League details */
  .league-details {
    grid-template-columns: repeat(2, 1fr);
  }

  /* Tee table — show table, hide cards */
  .tee-table-wrapper {
    display: block;
  }

  .tee-cards {
    display: none;
  }

  /* Mobile CTA hidden at tablet+ */
  .mobile-cta {
    display: none !important;
  }

  /* Back to top position */
  .back-to-top {
    bottom: 2rem;
    right: 2rem;
  }
}

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

@media (min-width: 1024px) {
  /* Section padding */
  .section {
    padding: var(--section-padding-desktop);
  }

  .section--premium {
    padding: 10rem 4rem;
  }

  /* Nav */
  .nav-links {
    display: flex;
  }

  .nav-cta {
    display: inline-flex;
  }

  .nav-hamburger {
    display: none;
  }

  .site-nav {
    padding: 0 3rem;
  }

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

  .hero__content {
    padding-top: calc(var(--nav-height) + 4rem);
  }

  /* Bento grid — full 4 column layout */
  .bento-grid {
    grid-template-columns: repeat(4, 1fr);
  }

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

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

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

  .bento-section {
    padding: 6rem 4rem 8rem;
  }

  /* Course preview */
  .course-preview__photo {
    aspect-ratio: auto;
    min-height: 500px;
  }

  /* Footer 4-column */
  .footer-main {
    grid-template-columns: 1.5fr 1fr 1fr 1fr;
    padding: 5rem 4rem;
    gap: 2rem;
  }

  /* Venue cards 3 across */
  .venue-cards {
    grid-template-columns: repeat(3, 1fr);
  }

  /* Card grid 3 columns */
  .card-grid--3 {
    grid-template-columns: repeat(3, 1fr);
  }

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

  /* Gallery set layout — header beside viewport on desktop */
  .gallery-set--desktop-split {
    display: grid;
    grid-template-columns: 1fr 2fr;
    gap: 2rem;
    align-items: start;
  }

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

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

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

  /* Inner hero */
  .inner-hero {
    padding: calc(var(--nav-height) + 3rem) 4rem 4rem;
  }
}

/* ============================================
   RESPONSIVE: LARGE DESKTOP (1400px)
   ============================================ */

@media (min-width: 1400px) {
  /* Max-width containment */
  .container {
    padding-left: 0;
    padding-right: 0;
  }

  /* Hero heading can go larger */
  .hero__heading {
    font-size: 5.5rem;
  }

  /* Gallery viewports wider */
  .gallery-set__viewport {
    aspect-ratio: 2/1;
  }

  /* Wider bento items */
  .bento-item--large {
    min-height: 620px;
  }

  /* Nav padding */
  .site-nav {
    padding: 0 4rem;
  }

  /* Footer */
  .footer-main {
    padding: 5rem 0;
  }
}

/* ============================================
   MOBILE CTA (below 768px only)
   ============================================ */

@media (max-width: 767px) {
  .mobile-cta {
    display: flex;
    position: fixed;
    bottom: 0;
    left: 0;
    right: 0;
    z-index: 999;
    background: var(--color-primary);
    padding: 12px 1.5rem;
    padding-bottom: calc(12px + env(safe-area-inset-bottom));
    align-items: center;
    justify-content: center;
    gap: 0.75rem;
    height: 64px;
    border-top: 1px solid rgba(255,255,255,0.1);
  }

  .mobile-cta__btn {
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 0.5rem;
    color: var(--color-accent);
    font-weight: 600;
    font-size: 1rem;
    text-decoration: none;
    padding: 0.75rem 1.5rem;
    border-radius: var(--radius-sm);
    background: rgba(201, 168, 76, 0.1);
    border: 1px solid rgba(201, 168, 76, 0.3);
    flex: 1;
    text-align: center;
  }

  /* Body padding for fixed CTA */
  body {
    padding-bottom: 80px;
  }

  /* Tee table — hide table, show cards on mobile */
  .tee-table-wrapper {
    display: none;
  }

  .tee-cards {
    display: grid;
  }

  /* Back to top above CTA */
  .back-to-top {
    bottom: 5rem;
    right: 1rem;
  }
}

/* ============================================
   REDUCED MOTION (REQUIRED — accessibility)
   ============================================ */

@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 {
    opacity: 1 !important;
    transform: none !important;
  }

  .stagger-in > *,
  .stagger-list > *,
  .stagger-grid > * {
    opacity: 1 !important;
    transform: none !important;
  }

  .clip-from-left,
  .clip-from-right,
  .clip-reveal {
    clip-path: none !important;
  }

  .scroll-indicator {
    animation: none;
  }
}

/* ============================================
   NUCLEAR TEXT OVERFLOW FIX
   Added because text was cutting off on the right
   edge of testimonial cards and venue cards.
   These rules FORCE text wrapping regardless of
   whatever else is happening in the CSS.
   ============================================ */

/* Force all grid children to respect column boundaries */
.testimonials__grid > *,
.stagger-grid > *,
.card-grid > *,
.venue-grid > *,
.venue-cards > *,
.review-cards > *,
.package-cards > *,
[class*="grid"] > * {
  min-width: 0 !important;
  max-width: 100% !important;
}

/* Force review card text to wrap */
.review-card {
  min-width: 0 !important;
  max-width: 100% !important;
}

.review-text {
  white-space: normal !important;
  word-wrap: break-word !important;
  overflow-wrap: break-word !important;
  overflow: visible !important;
  text-overflow: unset !important;
  display: block !important;
  max-width: 100% !important;
}

/* Force testimonial card text to wrap */
.testimonial-card {
  min-width: 0 !important;
  max-width: 100% !important;
  overflow: hidden !important;
}

.testimonial-card__quote {
  white-space: normal !important;
  word-wrap: break-word !important;
  overflow-wrap: break-word !important;
  overflow: visible !important;
  text-overflow: unset !important;
  display: block !important;
  max-width: 100% !important;
}

/* Force card body/content text to wrap */
.card__body,
.card__content {
  min-width: 0 !important;
  max-width: 100% !important;
}

.card__body p,
.card__content p,
.card__body .card__detail,
.card__content .card__detail {
  white-space: normal !important;
  word-wrap: break-word !important;
  overflow-wrap: break-word !important;
  text-overflow: unset !important;
  display: block !important;
  max-width: 100% !important;
}

/* Force package card text to wrap */
.package-card {
  min-width: 0 !important;
  max-width: 100% !important;
  overflow: hidden !important;
}

.package-card h3,
.package-card .price,
.package-card__ideal {
  white-space: normal !important;
  word-wrap: break-word !important;
  overflow-wrap: break-word !important;
  max-width: 100% !important;
}

/* ============================================
   PRINT STYLES (REQUIRED)
   ============================================ */

@media print {
  .site-nav,
  .site-footer,
  .scroll-indicator,
  .back-to-top,
  .mobile-cta,
  .cta-band,
  .lightbox {
    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;
    color: #000;
  }

  .hero,
  .inner-hero {
    min-height: auto;
    padding: 2rem;
    color: #000;
  }

  .hero__overlay,
  .inner-hero__overlay,
  .hero__image,
  .inner-hero__image {
    display: none;
  }

  .hero__heading,
  .inner-hero__heading {
    color: #000;
    text-shadow: none;
  }

  .section {
    padding: 2rem 0;
  }

  .trust-stats,
  .reviews-section,
  .section--dark,
  .section--darker {
    background: #fff;
    color: #000;
  }

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

/* --- GLOBAL OVERFLOW PREVENTION --- */
[class*="grid"] > *,
[class*="cards"] > * {
  min-width: 0;
}

.card, .package-card, .testimonial-card, .bento-item,
.tier-card, .sim-card, .pricing-card, .catering-card, .review-card {
  overflow: hidden;
}

.card p, .package-card p, .testimonial-card p,
.card__body p, .card__content p, .card__detail,
.bento-item__tagline, .tier-card p, .sim-card p {
  word-wrap: break-word;
  overflow-wrap: break-word;
}

p {
  overflow-wrap: break-word;
  word-wrap: break-word;
}

/* Fix 9: Gallery preview button spacing */
.wedding-gallery-preview + .fade-up,
.wedding-gallery-preview + div {
  margin-top: 2.5rem;
}

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

   Missing Inputs:
   - None critical. All D1/D2/D3 specs were comprehensive.

   Assumptions Made:
   - Added .tee-cards mobile component (D2 says "stacked cards on mobile" for tee box table but no class names specified).
   - Created .section--premium modifier for wedding/testimonial sections that need 10rem desktop padding per D1.
   - Used 16:9 aspect-ratio for gallery viewports, 4/3 for card images, 3/4 for tall wedding preview photo per D1 spec.
   - Set gallery set desktop layout option (.gallery-set--desktop-split) for side-by-side header+viewport.
   - Added .bento-item--wide class for 2-column span items that aren't 2-row height.
   - Tee table hidden on mobile, tee cards shown instead. Reversed at 768px.
   - Contact page inner hero uses .inner-hero--solid since D2 specifies no photo.

   Self-Score: 9/10
   Complete coverage of all 7 pages, all section-specific components, all animation states,
   all hover interactions gated behind @media (hover: hover), full gallery/lightbox system,
   all breakpoints, reduced motion, print, sticky CTA. What would make it a 10: seeing it
   rendered and tweaking micro-spacing values based on actual photos.

   Upstream Suggestions:
   - D2 could specify exact class names for page-specific components (tee cards, league card, etc.)
     to prevent any mismatch with html-builder.
   - Specifying exact z-index stacking order across all fixed elements would help.

   Downstream Notes:
   - html-builder: Use .card__content NOT .card__body. Gallery set viewport needs position:relative.
   - html-builder: Tee box section needs BOTH .tee-table-wrapper (desktop) and .tee-cards (mobile) markup.
   - html-builder: Contact page inner hero uses class .inner-hero--solid (no image).
   - html-builder: Nav structure: .site-nav > .nav-logo + .nav-links + .nav-cta + .nav-hamburger + .nav-mobile-panel
   - html-builder: ScrollSmoother requires nav OUTSIDE #smooth-wrapper, content INSIDE #smooth-content.
   - html-builder: Bento section uses .bento-section wrapper (no standard section padding), .bento-grid inside.
   - html-builder: Wedding preview photos need .wedding-preview__photo--tall on center image, --landscape on flanking.
   - js-engineer: All animation starting states are in CSS. Use gsap.to() only.
   - js-engineer: Gallery set photos use opacity transitions managed by JS, initial state set in CSS.

   Total Lines: ~2300+
   Sections: 45+ unique component/section blocks
   Media Queries: 7 (768px, 1024px, 1400px, max-767px, hover:hover, prefers-reduced-motion, print)
   Custom Properties: 35
   ============================================ */