/* ============================================
   LOVELAND FREERIDE — Global Stylesheet
   Brand: Backcountry palette, Oswald typography
   V3 — Rebrand experiment (Forest / Snow / Acid / Pine / Slate)
   ============================================ */

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

:root {
  /* Backcountry palette — semantic tokens */
  --lf-forest: #1A2620;
  --lf-snow:   #F2F4F1;
  --lf-acid:   #D7FF3A;
  --lf-pine:   #3D5A4A;
  --lf-slate:  #5C6670;

  /* Legacy token names remapped to the new palette so the
     existing stylesheet picks up the rebrand without rewrites. */
  --navy:        var(--lf-forest);
  --navy-deep:   var(--lf-forest);
  --alpine-blue: var(--lf-pine);
  --orange:       var(--lf-acid);
  --orange-hover: #B8E000; /* darkened acid for hover */
  --orange-glow:  rgba(215,255,58,0.18);
  --white:      var(--lf-snow);
  --off-white:  var(--lf-snow);
  --snow:       var(--lf-snow);
  --light-gray: var(--lf-snow);
  --warm-gray:  var(--lf-slate);
  --mid-gray:   var(--lf-slate);
  --charcoal:   var(--lf-forest);
  --ice-blue:   var(--lf-pine);

  --font-body: 'Oswald', sans-serif;
  --max-width: 1200px;
  --header-height: 72px;
}

html { scroll-behavior: smooth; font-size: 16px; }

body {
  font-family: var(--font-body);
  color: var(--charcoal);
  background: var(--white);
  line-height: 1.65;
  -webkit-font-smoothing: antialiased;
  overflow-x: hidden;
}

img { max-width: 100%; height: auto; display: block; }
a { color: inherit; text-decoration: none; }
ul, ol { list-style: none; }
h1, h2, h3, h4, h5 { line-height: 1.1; font-weight: 700; }

.container { max-width: var(--max-width); margin: 0 auto; padding: 0 24px; }

/* --- Typography (bolder, tighter) --- */
h1 { font-size: clamp(2.5rem, 6vw, 4rem); color: var(--navy); letter-spacing: -0.03em; font-weight: 900; }
h2 { font-size: clamp(2rem, 4vw, 3rem); color: var(--navy); letter-spacing: -0.02em; font-weight: 800; }
h3 { font-size: clamp(1.25rem, 2.5vw, 1.5rem); color: var(--navy); font-weight: 700; }
h4 { font-size: 1.125rem; color: var(--navy); font-weight: 700; }

.section-label {
  font-size: 0.75rem;
  font-weight: 700;
  letter-spacing: 0.15em;
  text-transform: uppercase;
  color: var(--orange);
  margin-bottom: 16px;
  display: inline-flex;
  align-items: center;
  gap: 10px;
}
.section-label::before {
  content: '';
  width: 24px;
  height: 2px;
  background: var(--orange);
}

p { margin-bottom: 1rem; color: var(--warm-gray); font-size: 1.0625rem; }
p.lead { font-size: 1.1875rem; color: var(--charcoal); line-height: 1.7; }

/* --- Buttons --- */
.btn {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  font-family: var(--font-body);
  font-weight: 700;
  font-size: 0.9375rem;
  padding: 14px 32px;
  border-radius: 6px;
  border: none;
  cursor: pointer;
  transition: all 0.25s cubic-bezier(0.34, 1.56, 0.64, 1);
  text-decoration: none;
  letter-spacing: 0.02em;
  position: relative;
  overflow: hidden;
}

.btn-primary {
  background: var(--lf-acid);
  color: var(--lf-forest);
  box-shadow: 0 2px 8px rgba(0,0,0,0.18);
}
.btn-primary:hover {
  background: var(--orange-hover);
  transform: translateY(-2px);
  box-shadow: 0 6px 24px rgba(203,62,1,0.35);
}

.btn-secondary {
  background: transparent;
  color: var(--navy);
  border: 2px solid var(--navy);
}
.btn-secondary:hover { background: var(--navy); color: var(--white); transform: translateY(-2px); }

.btn-outline-white {
  background: rgba(255,255,255,0.1);
  color: var(--white);
  border: 2px solid rgba(255,255,255,0.4);
  backdrop-filter: blur(4px);
}
.btn-outline-white:hover {
  background: var(--white);
  color: var(--navy);
  transform: translateY(-2px);
  box-shadow: 0 6px 24px rgba(255,255,255,0.2);
}

.btn-ghost {
  background: transparent;
  color: var(--orange);
  padding: 14px 0;
  font-weight: 700;
}
.btn-ghost:hover { color: var(--orange-hover); }
.btn-ghost svg { transition: transform 0.25s cubic-bezier(0.34, 1.56, 0.64, 1); }
.btn-ghost:hover svg { transform: translateX(6px); }

.btn-sm { padding: 10px 20px; font-size: 0.875rem; }
.btn-lg { padding: 18px 44px; font-size: 1.0625rem; }

/* --- Header / Nav --- */
.site-header {
  position: fixed;
  top: 0;
  left: 0;
  right: 0;
  height: var(--header-height);
  z-index: 1000;
  background: rgba(255,255,255,0.95);
  backdrop-filter: blur(16px);
  border-bottom: 1px solid rgba(0,0,0,0.04);
  transition: all 0.3s;
}
.site-header.scrolled {
  box-shadow: 0 4px 30px rgba(0,0,0,0.08);
  background: rgba(255,255,255,0.98);
}

.header-inner {
  max-width: var(--max-width);
  margin: 0 auto;
  padding: 0 24px;
  height: 100%;
  display: flex;
  align-items: center;
  justify-content: space-between;
}

.logo {
  display: flex;
  align-items: center;
  gap: 10px;
  font-weight: 900;
  font-size: 1.25rem;
  color: var(--navy);
  letter-spacing: -0.02em;
}
.logo-text-top { font-weight: 900; color: var(--charcoal); }
.logo-text-bottom { font-weight: 700; font-style: italic; color: var(--orange); font-size: 0.7em; }

/* Real logo image in header */
.logo-img {
  height: 44px;
  width: auto;
  object-fit: contain;
  transition: transform 0.6s cubic-bezier(0.34, 1.56, 0.64, 1);
}
.logo-img-footer {
  height: 56px;
  width: auto;
  object-fit: contain;
}
/* Flip the whole logo on hover */
.logo:hover .logo-img {
  animation: logoFlip 0.9s cubic-bezier(0.34, 1.56, 0.64, 1);
}
@keyframes logoFlip {
  0% { transform: rotateY(0deg); }
  50% { transform: rotateY(180deg); }
  100% { transform: rotateY(360deg); }
}
/* Logo entrance - drops in with a flip */
.logo-img {
  animation: logoEntrance 1.2s cubic-bezier(0.34, 1.56, 0.64, 1) 0.2s both;
}
@keyframes logoEntrance {
  0% { opacity: 0; transform: translateY(-30px) rotate(-180deg); }
  60% { opacity: 1; transform: translateY(4px) rotate(10deg); }
  100% { opacity: 1; transform: translateY(0) rotate(0deg); }
}

.nav-links {
  display: flex;
  align-items: center;
  gap: 32px;
}
.nav-links a {
  font-size: 0.9375rem;
  font-weight: 500;
  color: var(--warm-gray);
  transition: color 0.2s;
  position: relative;
}
.nav-links a:hover,
.nav-links a.active { color: var(--charcoal); }
.nav-links a::after {
  content: '';
  position: absolute;
  bottom: -4px;
  left: 0;
  width: 0;
  height: 2px;
  background: var(--orange);
  transition: width 0.25s cubic-bezier(0.34, 1.56, 0.64, 1);
}
.nav-links a:hover::after,
.nav-links a.active::after { width: 100%; }

/* Register button — white text on orange, inverts on hover */
.nav-cta.btn-primary {
  color: var(--lf-forest);
  background: var(--lf-acid);
  border: 2px solid var(--lf-acid);
  padding: 8px 20px;
}
.nav-cta.btn-primary:hover {
  background: transparent;
  color: var(--lf-acid);
}

/* Mobile menu */
.mobile-toggle {
  display: none;
  flex-direction: column;
  gap: 5px;
  background: none;
  border: none;
  cursor: pointer;
  padding: 4px;
}
.mobile-toggle span {
  display: block;
  width: 24px;
  height: 2px;
  background: var(--charcoal);
  transition: all 0.3s;
}

@media (max-width: 900px) {
  .mobile-toggle { display: flex; }
  .nav-links {
    position: absolute;
    top: 100%;
    left: 0;
    right: 0;
    height: calc(100vh - var(--header-height));
    background: var(--navy-deep);
    flex-direction: column;
    padding: 40px 24px;
    gap: 8px;
    transform: translateX(100%);
    transition: transform 0.3s ease;
    overflow-y: auto;
  }
  .nav-links.open { transform: translateX(0); }
  .nav-links a {
    font-size: 1.25rem;
    font-weight: 700;
    color: var(--white);
    padding: 12px 0;
    border-bottom: 1px solid rgba(255,255,255,0.08);
  }
  .nav-links a:hover, .nav-links a.active { color: var(--orange); }
  .nav-links a::after { display: none; }
  .nav-cta { margin-left: 0; width: 100%; text-align: center; border-bottom: none; }
  .mobile-toggle.active span { background: var(--charcoal); }
  .mobile-toggle.active span:nth-child(1) { transform: rotate(45deg) translate(5px, 5px); }
  .mobile-toggle.active span:nth-child(2) { opacity: 0; }
  .mobile-toggle.active span:nth-child(3) { transform: rotate(-45deg) translate(5px, -5px); }
}

/* --- Hero Sections (V2 — cinematic) --- */
.hero {
  position: relative;
  min-height: 90vh;
  display: flex;
  align-items: center;
  overflow: hidden;
  margin-top: var(--header-height);
}
.hero-bg {
  position: absolute;
  inset: 0;
  z-index: 0;
}
.hero-bg img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  transform: scale(1.05);
  animation: heroZoom 20s ease-in-out infinite alternate;
}
@keyframes heroZoom {
  0% { transform: scale(1.05) translate(0, 0); }
  100% { transform: scale(1.12) translate(-1%, -1%); }
}
.hero-overlay {
  position: absolute;
  inset: 0;
  background: linear-gradient(160deg, rgba(17,29,51,0.92) 0%, rgba(27,42,74,0.6) 45%, rgba(27,42,74,0.3) 100%);
  z-index: 1;
}
.hero-content {
  position: relative;
  z-index: 2;
  max-width: 720px;
  padding: 0 24px;
}
.hero h1 {
  color: var(--white);
  margin-bottom: 20px;
  font-size: clamp(2.75rem, 6vw, 4.5rem);
  line-height: 1.05;
  font-weight: 900;
}
.hero p {
  color: rgba(255,255,255,0.8);
  font-size: 1.25rem;
  margin-bottom: 36px;
  line-height: 1.7;
  max-width: 560px;
}
.hero-actions { display: flex; gap: 16px; flex-wrap: wrap; }

/* Hero stagger animation */
.hero h1 { animation: heroFadeUp 0.8s ease both 0.2s; }
.hero p { animation: heroFadeUp 0.8s ease both 0.4s; }
.hero-actions { animation: heroFadeUp 0.8s ease both 0.6s; }
@keyframes heroFadeUp {
  from { opacity: 0; transform: translateY(30px); }
  to { opacity: 1; transform: translateY(0); }
}

/* Accent line on hero */
.hero-content::before {
  content: '';
  display: block;
  width: 48px;
  height: 3px;
  background: var(--orange);
  margin-bottom: 24px;
  animation: heroFadeUp 0.8s ease both 0.1s;
}

.hero-page {
  min-height: 50vh;
  background: var(--navy);
}
.hero-page::after {
  content: '';
  position: absolute;
  bottom: 0;
  left: 0;
  right: 0;
  height: 3px;
  background: linear-gradient(90deg, var(--orange), var(--ice-blue), var(--orange));
  z-index: 3;
}
.hero-page h1 { color: var(--white); margin-bottom: 16px; }
.hero-page p { color: rgba(255,255,255,0.7); }

/* --- Proof Bar (V2 — sliding/animated) --- */
.proof-bar {
  background: var(--navy-deep);
  padding: 0;
  overflow: hidden;
  position: relative;
}
.proof-bar::before {
  content: '';
  position: absolute;
  top: 0;
  left: 0;
  right: 0;
  height: 3px;
  background: linear-gradient(90deg, var(--orange), var(--ice-blue), var(--orange));
  z-index: 2;
}
.proof-bar::after {
  content: '';
  position: absolute;
  bottom: 0;
  left: 0;
  right: 0;
  height: 3px;
  background: linear-gradient(90deg, var(--ice-blue), var(--orange), var(--ice-blue));
  z-index: 2;
}
.proof-bar-inner {
  display: flex;
  justify-content: center;
  gap: 0;
  flex-wrap: nowrap;
}
.proof-item {
  text-align: center;
  padding: 32px 40px;
  position: relative;
  flex: 1;
  border-right: 1px solid rgba(255,255,255,0.08);
  transition: background 0.3s;
}
.proof-item:last-child { border-right: none; }
.proof-item:hover { background: rgba(255,255,255,0.04); }
.proof-number {
  font-size: 2rem;
  font-weight: 900;
  color: var(--orange);
  line-height: 1;
  margin-bottom: 6px;
}
.proof-label {
  font-size: 0.75rem;
  font-weight: 600;
  color: rgba(255,255,255,0.5);
  letter-spacing: 0.05em;
  text-transform: uppercase;
}

/* Count-up animation for proof numbers */
.proof-item { opacity: 0; transform: translateY(16px); }
.proof-item.visible {
  animation: proofSlideUp 0.6s cubic-bezier(0.34, 1.56, 0.64, 1) forwards;
}
.proof-item:nth-child(1).visible { animation-delay: 0s; }
.proof-item:nth-child(2).visible { animation-delay: 0.1s; }
.proof-item:nth-child(3).visible { animation-delay: 0.2s; }
.proof-item:nth-child(4).visible { animation-delay: 0.3s; }
@keyframes proofSlideUp {
  to { opacity: 1; transform: translateY(0); }
}

@media (max-width: 700px) {
  .proof-bar-inner { flex-wrap: wrap; }
  .proof-item { flex: 1 1 50%; border-bottom: 1px solid rgba(255,255,255,0.08); }
  .proof-item:nth-child(2) { border-right: none; }
}

/* --- Sections --- */
.section { padding: 100px 0; }
.section-sm { padding: 64px 0; }
.section-lg { padding: 120px 0; }

.bg-white { background: var(--white); }
.bg-snow { background: var(--snow); }
.bg-light { background: var(--light-gray); }
.bg-navy { background: var(--navy); position: relative; }
.bg-navy::before {
  content: '';
  position: absolute;
  top: 0;
  left: 0;
  right: 0;
  height: 3px;
  background: linear-gradient(90deg, var(--orange), var(--ice-blue), var(--orange));
  z-index: 2;
}
.bg-navy h2, .bg-navy h3 { color: var(--white); }
.bg-navy p { color: rgba(255,255,255,0.7); }
.bg-navy .section-label { color: var(--ice-blue); }
.bg-navy .section-label::before { background: var(--ice-blue); }

/* Diagonal section divider */
.section-angle {
  position: relative;
}
.section-angle::before {
  content: '';
  position: absolute;
  top: -40px;
  left: 0;
  right: 0;
  height: 80px;
  background: inherit;
  clip-path: polygon(0 50%, 100% 0, 100% 100%, 0 100%);
  z-index: 1;
}

.section-header {
  max-width: 640px;
  margin-bottom: 56px;
}
.section-header.centered {
  text-align: center;
  margin-left: auto;
  margin-right: auto;
}
.section-header.centered .section-label {
  justify-content: center;
}
.section-header h2 { margin-bottom: 16px; }

/* --- Grid Layouts --- */
.grid-2 { display: grid; grid-template-columns: repeat(2, 1fr); gap: 56px; align-items: center; }
.grid-3 { display: grid; grid-template-columns: repeat(3, 1fr); gap: 32px; }
.grid-4 { display: grid; grid-template-columns: repeat(4, 1fr); gap: 24px; }

@media (max-width: 900px) {
  .grid-2 { grid-template-columns: 1fr; gap: 40px; }
  .grid-3 { grid-template-columns: 1fr 1fr; }
  .grid-4 { grid-template-columns: 1fr 1fr; }
}
@media (max-width: 600px) {
  .grid-3 { grid-template-columns: 1fr; }
  .grid-4 { grid-template-columns: 1fr; }
}

/* --- Cards (V2 — bolder hover) --- */
.card {
  background: var(--white);
  border-radius: 16px;
  overflow: hidden;
  border: 1px solid var(--light-gray);
  transition: all 0.35s cubic-bezier(0.34, 1.56, 0.64, 1);
}
.card:hover {
  box-shadow: 0 16px 48px rgba(0,0,0,0.1);
  transform: translateY(-4px);
  border-color: transparent;
}
.card-img { aspect-ratio: 16/10; overflow: hidden; }
.card-img img { width: 100%; height: 100%; object-fit: cover; transition: transform 0.6s cubic-bezier(0.22, 1, 0.36, 1); }
.card:hover .card-img img { transform: scale(1.06); }
.card-body { padding: 32px; }
.card-body h3 { margin-bottom: 12px; }
.card-body p { font-size: 0.9375rem; }

/* --- Tier Cards --- */
.tier-card {
  background: var(--white);
  border: 2px solid var(--light-gray);
  border-radius: 16px;
  padding: 40px 32px;
  text-align: center;
  transition: all 0.35s cubic-bezier(0.34, 1.56, 0.64, 1);
  position: relative;
}
.tier-card:hover { border-color: var(--orange); box-shadow: 0 12px 48px rgba(203,62,1,0.12); transform: translateY(-4px); }
.tier-card h3 { margin-bottom: 8px; }
.tier-card .tier-price {
  font-size: 2.25rem;
  font-weight: 900;
  color: var(--navy);
  margin: 16px 0;
}
.tier-card .tier-price span { font-size: 1rem; font-weight: 500; color: var(--warm-gray); }
.tier-card ul { text-align: left; margin: 24px 0; }
.tier-card li {
  padding: 10px 0;
  border-bottom: 1px solid var(--light-gray);
  font-size: 0.9375rem;
  color: var(--warm-gray);
  display: flex;
  align-items: flex-start;
  gap: 10px;
}
.tier-card li::before {
  content: '';
  width: 18px;
  height: 18px;
  min-width: 18px;
  border-radius: 50%;
  background: var(--off-white);
  display: flex;
  align-items: center;
  justify-content: center;
  margin-top: 2px;
  background-image: url("data:image/svg+xml,%3Csvg width='10' height='8' viewBox='0 0 10 8' fill='none' xmlns='http://www.w3.org/2000/svg'%3E%3Cpath d='M1 4L3.5 6.5L9 1' stroke='%23CB3E01' stroke-width='1.5' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E");
  background-repeat: no-repeat;
  background-position: center;
}

/* --- Stat Blocks --- */
.stat-grid {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: 24px;
}
.stat-block {
  text-align: center;
  padding: 36px 20px;
  background: rgba(255,255,255,0.06);
  border-radius: 16px;
  border: 1px solid rgba(255,255,255,0.08);
  transition: all 0.3s;
}
.stat-block:hover { background: rgba(255,255,255,0.1); transform: translateY(-2px); }
.stat-block .stat-num {
  font-size: 2.75rem;
  font-weight: 900;
  color: var(--orange);
  line-height: 1;
  margin-bottom: 8px;
}
.stat-block .stat-label {
  font-size: 0.875rem;
  color: rgba(255,255,255,0.6);
  line-height: 1.4;
}

.bg-white .stat-block { background: var(--snow); border-color: var(--light-gray); }
.bg-white .stat-block .stat-label { color: var(--warm-gray); }
.bg-snow .stat-block { background: var(--white); border-color: var(--light-gray); }
.bg-snow .stat-block .stat-label { color: var(--warm-gray); }

@media (max-width: 700px) {
  .stat-grid { grid-template-columns: 1fr 1fr; }
}

/* --- Quotes / Testimonials (V2 — more dramatic) --- */
.testimonial-card {
  background: var(--white);
  border-radius: 16px;
  padding: 36px;
  border: 1px solid rgba(255,255,255,0.1);
  position: relative;
  transition: all 0.3s;
}
.testimonial-card:hover { transform: translateY(-4px); box-shadow: 0 12px 40px rgba(0,0,0,0.15); }
.testimonial-card::before {
  content: '\201C';
  font-size: 5rem;
  color: var(--orange);
  opacity: 0.15;
  position: absolute;
  top: 8px;
  left: 24px;
  line-height: 1;
  font-weight: 900;
}
.testimonial-card blockquote {
  font-size: 1rem;
  font-style: italic;
  color: var(--charcoal);
  line-height: 1.75;
  margin-bottom: 20px;
  position: relative;
  z-index: 1;
}
.testimonial-card cite {
  font-size: 0.875rem;
  font-style: normal;
  font-weight: 700;
  color: var(--navy);
  display: flex;
  align-items: center;
  gap: 8px;
}
.testimonial-card cite::before {
  content: '';
  width: 16px;
  height: 2px;
  background: var(--orange);
}

/* --- Image Section --- */
.img-rounded { border-radius: 16px; overflow: hidden; position: relative; }
.img-rounded img { width: 100%; height: 100%; object-fit: cover; transition: transform 0.6s cubic-bezier(0.22, 1, 0.36, 1); }
.img-rounded:hover img { transform: scale(1.03); }
.img-aspect-4-3 { aspect-ratio: 4/3; }
.img-aspect-16-9 { aspect-ratio: 16/9; }
.img-aspect-3-2 { aspect-ratio: 3/2; }

/* --- Gallery Grid (V2 — dynamic masonry) --- */
.gallery-grid {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  grid-auto-rows: 200px;
  gap: 10px;
}
.gallery-item {
  border-radius: 10px;
  overflow: hidden;
  cursor: pointer;
  position: relative;
}
/* Make certain items span 2 rows for visual interest */
.gallery-item:nth-child(1) { grid-row: span 2; }
.gallery-item:nth-child(4) { grid-row: span 2; }
.gallery-item:nth-child(7) { grid-row: span 2; grid-column: span 2; }
.gallery-item:nth-child(10) { grid-row: span 2; }

.gallery-item img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  transition: transform 0.6s cubic-bezier(0.22, 1, 0.36, 1);
}
.gallery-item:hover img { transform: scale(1.06); }
.gallery-item::after {
  content: '';
  position: absolute;
  inset: 0;
  background: linear-gradient(to top, rgba(27,42,74,0.5) 0%, transparent 60%);
  opacity: 0;
  transition: opacity 0.3s;
}
.gallery-item:hover::after { opacity: 1; }
/* Zoom icon on hover */
.gallery-item::before {
  content: '+';
  position: absolute;
  bottom: 16px;
  right: 16px;
  width: 36px;
  height: 36px;
  border-radius: 50%;
  background: rgba(255,255,255,0.9);
  color: var(--navy);
  font-size: 1.25rem;
  font-weight: 700;
  display: flex;
  align-items: center;
  justify-content: center;
  z-index: 2;
  opacity: 0;
  transform: scale(0.8);
  transition: all 0.3s;
}
.gallery-item:hover::before { opacity: 1; transform: scale(1); }

@media (max-width: 900px) {
  .gallery-grid { grid-template-columns: repeat(2, 1fr); grid-auto-rows: 180px; }
  .gallery-item:nth-child(7) { grid-column: span 1; }
}
@media (max-width: 600px) {
  .gallery-grid { grid-template-columns: 1fr; grid-auto-rows: 220px; }
  .gallery-item:nth-child(n) { grid-row: span 1; grid-column: span 1; }
  .gallery-item:nth-child(1) { grid-row: span 2; }
}

/* Lightbox */
.lightbox {
  position: fixed;
  inset: 0;
  z-index: 9999;
  background: rgba(0,0,0,0.95);
  display: flex;
  align-items: center;
  justify-content: center;
  opacity: 0;
  pointer-events: none;
  transition: opacity 0.3s;
  backdrop-filter: blur(8px);
}
.lightbox.active { opacity: 1; pointer-events: all; }
.lightbox img {
  max-width: 90vw;
  max-height: 85vh;
  border-radius: 8px;
  object-fit: contain;
}
.lightbox-close {
  position: absolute;
  top: 24px;
  right: 24px;
  background: rgba(255,255,255,0.1);
  border: none;
  color: white;
  font-size: 1.5rem;
  cursor: pointer;
  width: 48px;
  height: 48px;
  border-radius: 50%;
  display: flex;
  align-items: center;
  justify-content: center;
  transition: background 0.2s;
}
.lightbox-close:hover { background: rgba(255,255,255,0.2); }

/* --- FAQ Accordion --- */
.faq-category { margin-bottom: 48px; }
.faq-category h3, .faq-category h2 { margin-bottom: 16px; padding-bottom: 12px; border-bottom: 2px solid var(--light-gray); }

.faq-item {
  border-bottom: 1px solid var(--light-gray);
}
.faq-question {
  width: 100%;
  background: none;
  border: none;
  padding: 20px 0;
  font-family: var(--font-body);
  font-size: 1.0625rem;
  font-weight: 600;
  color: var(--charcoal);
  text-align: left;
  cursor: pointer;
  display: flex;
  justify-content: space-between;
  align-items: center;
  gap: 16px;
  transition: color 0.2s;
}
.faq-question:hover { color: var(--orange); }
.faq-icon {
  width: 28px;
  height: 28px;
  min-width: 28px;
  border-radius: 50%;
  background: var(--light-gray);
  display: flex;
  align-items: center;
  justify-content: center;
  transition: all 0.3s cubic-bezier(0.34, 1.56, 0.64, 1);
}
.faq-icon svg { transition: transform 0.3s cubic-bezier(0.34, 1.56, 0.64, 1); }
.faq-item.open .faq-icon { background: var(--orange); transform: scale(1.1); }
.faq-item.open .faq-icon svg { transform: rotate(45deg); }
.faq-item.open .faq-icon svg line { stroke: white; }
.faq-answer {
  max-height: 0;
  overflow: hidden;
  transition: max-height 0.35s ease;
}
.faq-answer-inner {
  padding: 0 0 20px;
  color: var(--warm-gray);
  font-size: 1rem;
  line-height: 1.7;
}

/* --- Sponsor Tiers --- */
.sponsor-tiers {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: 20px;
}
.sponsor-tier {
  background: var(--white);
  border: 2px solid rgba(255,255,255,0.1);
  border-radius: 16px;
  padding: 32px 24px;
  text-align: center;
  transition: all 0.35s cubic-bezier(0.34, 1.56, 0.64, 1);
}
.sponsor-tier:hover { border-color: var(--orange); transform: translateY(-4px); box-shadow: 0 12px 40px rgba(0,0,0,0.2); }
.sponsor-tier.highlight { border-color: var(--orange); background: linear-gradient(180deg, rgba(203,62,1,0.08) 0%, var(--white) 100%); }
.sponsor-tier-name {
  font-size: 0.75rem;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: 0.1em;
  color: var(--orange);
  margin-bottom: 12px;
}
.sponsor-tier-price {
  font-size: 2rem;
  font-weight: 900;
  color: var(--navy);
  margin-bottom: 4px;
}
.sponsor-tier-freq {
  font-size: 0.8125rem;
  color: var(--warm-gray);
  margin-bottom: 20px;
}
.sponsor-tier ul { text-align: left; margin-bottom: 24px; }
.sponsor-tier li {
  font-size: 0.875rem;
  color: var(--warm-gray);
  padding: 8px 0;
  border-bottom: 1px solid var(--light-gray);
  display: flex;
  align-items: flex-start;
  gap: 8px;
}
.sponsor-tier li::before {
  content: '';
  width: 16px;
  height: 16px;
  min-width: 16px;
  margin-top: 2px;
  background-image: url("data:image/svg+xml,%3Csvg width='10' height='8' viewBox='0 0 10 8' fill='none' xmlns='http://www.w3.org/2000/svg'%3E%3Cpath d='M1 4L3.5 6.5L9 1' stroke='%23CB3E01' stroke-width='1.5' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E");
  background-repeat: no-repeat;
  background-position: center;
}

@media (max-width: 900px) { .sponsor-tiers { grid-template-columns: 1fr 1fr; } }
@media (max-width: 600px) { .sponsor-tiers { grid-template-columns: 1fr; } }

/* --- Donation Amounts --- */
.donation-grid {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 16px;
}
.donation-card {
  background: var(--white);
  border: 2px solid var(--light-gray);
  border-radius: 12px;
  padding: 28px;
  text-align: center;
  transition: all 0.3s cubic-bezier(0.34, 1.56, 0.64, 1);
  cursor: pointer;
}
.donation-card:hover { border-color: var(--orange); transform: translateY(-4px); box-shadow: 0 8px 32px rgba(203,62,1,0.1); }
.donation-amount {
  font-size: 1.75rem;
  font-weight: 900;
  color: var(--navy);
  margin-bottom: 8px;
}
.donation-desc { font-size: 0.875rem; color: var(--warm-gray); }

@media (max-width: 600px) { .donation-grid { grid-template-columns: 1fr 1fr; } }

/* --- Contact Form --- */
.form-group { margin-bottom: 20px; }
.form-group label {
  display: block;
  font-size: 0.875rem;
  font-weight: 600;
  color: var(--charcoal);
  margin-bottom: 6px;
}
.form-group input,
.form-group textarea,
.form-group select {
  width: 100%;
  padding: 14px 16px;
  border: 2px solid var(--light-gray);
  border-radius: 10px;
  font-family: var(--font-body);
  font-size: 1rem;
  color: var(--charcoal);
  transition: all 0.2s;
  background: var(--white);
}
.form-group input:focus,
.form-group textarea:focus,
.form-group select:focus {
  outline: none;
  border-color: var(--orange);
  box-shadow: 0 0 0 4px var(--orange-glow);
}
.form-group textarea { resize: vertical; min-height: 120px; }

/* --- Accent gradient line (reusable) --- */
.accent-line {
  position: relative;
}
.accent-line::before {
  content: '';
  position: absolute;
  top: 0;
  left: 0;
  right: 0;
  height: 3px;
  background: linear-gradient(90deg, var(--orange), var(--ice-blue), var(--orange));
  z-index: 2;
}
.accent-line-bottom::after {
  content: '';
  position: absolute;
  bottom: 0;
  left: 0;
  right: 0;
  height: 3px;
  background: linear-gradient(90deg, var(--orange), var(--ice-blue), var(--orange));
  z-index: 2;
}

/* --- Footer --- */
.site-footer {
  background: var(--navy-deep);
  color: rgba(255,255,255,0.6);
  padding: 80px 0 40px;
  position: relative;
}
.site-footer::before {
  content: '';
  position: absolute;
  top: 0;
  left: 0;
  right: 0;
  height: 3px;
  background: linear-gradient(90deg, var(--orange), var(--ice-blue), var(--orange));
}
.footer-grid {
  display: grid;
  grid-template-columns: 2fr 1fr 1fr 1.5fr;
  gap: 48px;
  margin-bottom: 48px;
}
.footer-brand p { font-size: 0.9375rem; line-height: 1.7; color: rgba(255,255,255,0.4); margin-top: 16px; }
.footer-col h4 {
  color: var(--white);
  font-size: 0.75rem;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: 0.1em;
  margin-bottom: 20px;
}
.footer-col a {
  display: block;
  font-size: 0.9375rem;
  color: rgba(255,255,255,0.45);
  padding: 6px 0;
  transition: all 0.2s;
}
.footer-col a:hover { color: var(--white); transform: translateX(4px); }

.footer-bottom {
  border-top: 1px solid rgba(255,255,255,0.08);
  padding-top: 32px;
  display: flex;
  justify-content: space-between;
  align-items: center;
  flex-wrap: wrap;
  gap: 16px;
}
.footer-bottom p { font-size: 0.8125rem; color: rgba(255,255,255,0.3); margin: 0; }
.footer-ctas { display: flex; gap: 12px; }

@media (max-width: 900px) { .footer-grid { grid-template-columns: 1fr 1fr; } }
@media (max-width: 600px) {
  .footer-grid { grid-template-columns: 1fr; }
  .footer-bottom { flex-direction: column; text-align: center; }
}

/* --- CTA Block (V2 — stronger) --- */
.cta-block {
  position: relative;
  padding: 120px 0;
  overflow: hidden;
}
.cta-block::before {
  content: '';
  position: absolute;
  top: 0;
  left: 0;
  right: 0;
  height: 3px;
  background: linear-gradient(90deg, var(--orange), var(--ice-blue), var(--orange));
  z-index: 3;
}
.cta-block .cta-bg {
  position: absolute;
  inset: 0;
}
.cta-block .cta-bg img {
  width: 100%;
  height: 100%;
  object-fit: cover;
}
.cta-block .cta-overlay {
  position: absolute;
  inset: 0;
  background: linear-gradient(160deg, rgba(17,29,51,0.93) 0%, rgba(27,42,74,0.8) 100%);
}
.cta-block .cta-content {
  position: relative;
  z-index: 2;
  text-align: center;
  max-width: 640px;
  margin: 0 auto;
}
.cta-block h2 { color: var(--white); margin-bottom: 16px; font-size: clamp(2rem, 4vw, 2.75rem); }
.cta-block p { color: rgba(255,255,255,0.7); margin-bottom: 36px; font-size: 1.125rem; }
.cta-actions { display: flex; justify-content: center; gap: 16px; flex-wrap: wrap; }

/* --- Pillar / Value Cards (V2) --- */
.pillar-card {
  padding: 36px;
  background: var(--white);
  border-radius: 16px;
  border: 1px solid var(--light-gray);
  transition: all 0.35s cubic-bezier(0.34, 1.56, 0.64, 1);
}
.pillar-card:hover { transform: translateY(-4px); box-shadow: 0 12px 40px rgba(0,0,0,0.08); border-color: transparent; }
.pillar-card .pillar-icon {
  width: 52px;
  height: 52px;
  border-radius: 12px;
  background: var(--orange-glow);
  display: flex;
  align-items: center;
  justify-content: center;
  margin-bottom: 20px;
  transition: all 0.3s;
}
.pillar-card:hover .pillar-icon { background: var(--orange); }
.pillar-card:hover .pillar-icon svg path,
.pillar-card:hover .pillar-icon svg circle,
.pillar-card:hover .pillar-icon svg rect,
.pillar-card:hover .pillar-icon svg line { stroke: white; }
.pillar-card h4 { margin-bottom: 12px; }
.pillar-card p { font-size: 0.9375rem; margin: 0; }

/* --- Timeline (ski-turn curve, animated on scroll) --- */
.timeline-wrapper {
  position: relative;
  padding: 40px 0;
}
.timeline-svg {
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  pointer-events: none;
  z-index: 0;
}
.timeline-svg .track-bg {
  fill: none;
  stroke: var(--light-gray);
  stroke-width: 3;
}
.timeline-svg .track-animate {
  fill: none;
  stroke: var(--orange);
  stroke-width: 3;
  stroke-dasharray: 2000;
  stroke-dashoffset: 2000;
  transition: stroke-dashoffset 6s cubic-bezier(0.25, 0.1, 0.25, 1);
}
.timeline-wrapper.animate .track-animate {
  stroke-dashoffset: 0;
}

.timeline {
  display: flex;
  gap: 0;
  position: relative;
  padding: 0;
}
.timeline::before, .timeline::after { display: none; }

.timeline-item {
  flex: 1;
  text-align: center;
  position: relative;
  padding: 0 16px;
  opacity: 0;
  transform: translateY(20px);
  transition: all 0.8s cubic-bezier(0.22, 1, 0.36, 1);
}
/* All items: dot on top, text hangs below. Odd items sit high, even items sit low. */
.timeline-item {
  display: flex;
  flex-direction: column;
  align-items: center;
}
.timeline-item .timeline-dot { margin: 0 auto 10px; }

.timeline-item:nth-child(odd) {
  padding-top: 0;
  padding-bottom: 0;
  margin-bottom: 120px;
}
.timeline-item:nth-child(even) {
  padding-top: 0;
  padding-bottom: 0;
  margin-top: 120px;
  align-self: flex-end;
}

.timeline-wrapper.animate .timeline-item { opacity: 1; transform: translateY(0); }
.timeline-wrapper.animate .timeline-item:nth-child(1) { transition-delay: 0.6s; }
.timeline-wrapper.animate .timeline-item:nth-child(2) { transition-delay: 1.8s; }
.timeline-wrapper.animate .timeline-item:nth-child(3) { transition-delay: 3.0s; }
.timeline-wrapper.animate .timeline-item:nth-child(4) { transition-delay: 4.2s; }

.timeline-dot {
  width: 20px;
  height: 20px;
  border-radius: 50%;
  background: var(--light-gray);
  margin: 0 auto 12px;
  position: relative;
  z-index: 2;
  transition: all 0.5s cubic-bezier(0.34, 1.56, 0.64, 1);
}
.timeline-wrapper.animate .timeline-dot {
  background: var(--orange);
  box-shadow: 0 0 0 5px var(--orange-glow);
}
.timeline-wrapper.animate .timeline-item:nth-child(1) .timeline-dot { transition-delay: 0.5s; }
.timeline-wrapper.animate .timeline-item:nth-child(2) .timeline-dot { transition-delay: 1.7s; }
.timeline-wrapper.animate .timeline-item:nth-child(3) .timeline-dot { transition-delay: 2.9s; }
.timeline-wrapper.animate .timeline-item:nth-child(4) .timeline-dot { transition-delay: 4.1s; }


.timeline-item h4 { font-size: 0.9375rem; margin-bottom: 4px; }
.timeline-item p { font-size: 0.8125rem; margin: 0; }

@media (max-width: 700px) {
  .timeline { flex-direction: column; gap: 32px; }
  .timeline-svg { display: none; }
  .timeline-item:nth-child(odd),
  .timeline-item:nth-child(even) {
    padding: 0 0 0 52px;
    text-align: left;
    align-self: auto;
  }
  .timeline-item::before {
    content: '';
    position: absolute;
    left: 0;
    top: 0;
    bottom: -32px;
    width: 3px;
    background: var(--light-gray);
  }
  .timeline-item:last-child::before { display: none; }
  .timeline-dot { position: absolute; left: -9px; top: 0; margin: 0 !important; }
  .timeline-item:nth-child(even) .timeline-dot { order: unset; }
}

/* --- Animated Snow Background (for page headers) --- */
.snow-bg {
  position: relative;
  overflow: hidden;
}
.snow-bg::before,
.snow-bg::after {
  content: '';
  position: absolute;
  inset: 0;
  pointer-events: none;
}
/* Ski track curves */
.snow-bg::before {
  background:
    radial-gradient(ellipse 120px 600px at 15% -10%, rgba(169,214,229,0.08) 0%, transparent 70%),
    radial-gradient(ellipse 100px 500px at 45% 120%, rgba(169,214,229,0.06) 0%, transparent 70%),
    radial-gradient(ellipse 140px 700px at 75% -20%, rgba(203,62,1,0.04) 0%, transparent 70%),
    radial-gradient(ellipse 80px 400px at 90% 110%, rgba(169,214,229,0.05) 0%, transparent 70%);
  animation: snowDrift 12s ease-in-out infinite alternate;
}
/* Floating particles */
.snow-bg::after {
  background-image:
    radial-gradient(1.5px 1.5px at 10% 20%, rgba(255,255,255,0.3) 50%, transparent 50%),
    radial-gradient(2px 2px at 30% 60%, rgba(255,255,255,0.2) 50%, transparent 50%),
    radial-gradient(1px 1px at 50% 30%, rgba(255,255,255,0.35) 50%, transparent 50%),
    radial-gradient(1.5px 1.5px at 70% 80%, rgba(255,255,255,0.2) 50%, transparent 50%),
    radial-gradient(2px 2px at 85% 15%, rgba(255,255,255,0.25) 50%, transparent 50%),
    radial-gradient(1px 1px at 20% 90%, rgba(255,255,255,0.3) 50%, transparent 50%),
    radial-gradient(1.5px 1.5px at 60% 50%, rgba(255,255,255,0.15) 50%, transparent 50%),
    radial-gradient(2px 2px at 40% 10%, rgba(255,255,255,0.2) 50%, transparent 50%);
  animation: snowFall 8s linear infinite;
}
@keyframes snowDrift {
  0% { transform: translateX(0) translateY(0); }
  100% { transform: translateX(20px) translateY(-10px); }
}
@keyframes snowFall {
  0% { transform: translateY(-10px); opacity: 1; }
  100% { transform: translateY(20px); opacity: 0.6; }
}

/* --- Logo Scroll (sponsor logos) --- */
.logo-scroll {
  background: var(--white);
  padding: 24px 0;
  overflow: hidden;
  position: relative;
}
.logo-scroll::after {
  content: '';
  position: absolute;
  bottom: 0;
  left: 0;
  right: 0;
  height: 3px;
  background: linear-gradient(90deg, var(--ice-blue), var(--orange), var(--ice-blue));
}
.logo-scroll-label {
  text-align: center;
  font-size: 0.6875rem;
  font-weight: 700;
  letter-spacing: 0.15em;
  text-transform: uppercase;
  color: var(--mid-gray);
  margin-bottom: 20px;
}
.logo-scroll-track {
  display: flex;
  gap: 64px;
  animation: logoScrollAnim 20s linear infinite;
  width: max-content;
}
.logo-scroll-track .logo-placeholder {
  width: 120px;
  height: 40px;
  background: var(--light-gray);
  border-radius: 8px;
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 0.75rem;
  color: var(--mid-gray);
  font-weight: 600;
  flex-shrink: 0;
}
@keyframes logoScrollAnim {
  0% { transform: translateX(0); }
  100% { transform: translateX(-50%); }
}

/* --- Pricing --- */
.pricing-note {
  background: var(--orange-glow);
  border: 1px solid rgba(203,62,1,0.15);
  border-radius: 12px;
  padding: 24px;
  font-size: 0.9375rem;
  color: var(--charcoal);
}
.pricing-note strong { color: var(--orange); }

/* --- Page content spacing --- */
.page-content { padding-top: var(--header-height); }

/* --- Map embed --- */
.map-container { border-radius: 16px; overflow: hidden; height: 350px; }
.map-container iframe { width: 100%; height: 100%; border: 0; }

/* --- Coach Cards --- */
.coach-card { text-align: center; }
.coach-card .coach-img {
  width: 160px;
  height: 160px;
  border-radius: 50%;
  overflow: hidden;
  margin: 0 auto 20px;
  border: 3px solid var(--light-gray);
  transition: all 0.3s;
}
.coach-card:hover .coach-img { border-color: var(--orange); transform: scale(1.05); }
.coach-card .coach-img img { width: 100%; height: 100%; object-fit: cover; }
.coach-card h4 { margin-bottom: 4px; }
.coach-card .coach-role {
  font-size: 0.75rem;
  font-weight: 700;
  color: var(--orange);
  text-transform: uppercase;
  letter-spacing: 0.08em;
  margin-bottom: 12px;
}
.coach-card p { font-size: 0.875rem; }

/* --- Logo with Ski Guy --- */
.logo-with-icon {
  display: flex;
  align-items: center;
  gap: 8px;
}
.logo-with-icon .logo-icon {
  width: 36px;
  height: 36px;
  display: flex;
  align-items: center;
  justify-content: center;
}
.logo-with-icon .logo-icon img {
  width: 100%;
  height: 100%;
  object-fit: contain;
  transition: transform 0.6s cubic-bezier(0.34, 1.56, 0.64, 1);
}
.logo-with-icon .logo-icon svg {
  width: 100%;
  height: 100%;
  transition: transform 0.6s cubic-bezier(0.34, 1.56, 0.64, 1);
}

/* Ski guy flips on hover */
.logo-with-icon:hover .logo-icon img,
.logo-with-icon:hover .logo-icon svg {
  animation: skiFlip 0.8s cubic-bezier(0.34, 1.56, 0.64, 1);
}

/* Ski guy flips on scroll */
.site-header.scrolled .logo-icon img,
.site-header.scrolled .logo-icon svg {
  transform: rotate(360deg);
}

@keyframes skiFlip {
  0% { transform: rotate(0deg) scale(1); }
  30% { transform: rotate(180deg) scale(1.2); }
  60% { transform: rotate(300deg) scale(1.05); }
  100% { transform: rotate(360deg) scale(1); }
}

/* Logo entrance */
.logo-icon img, .logo-icon svg {
  animation: skiEntrance 1s cubic-bezier(0.34, 1.56, 0.64, 1) 0.3s both;
}

@keyframes skiEntrance {
  0% { opacity: 0; transform: translateY(-24px) rotate(-180deg); }
  60% { opacity: 1; transform: translateY(4px) rotate(15deg); }
  100% { opacity: 1; transform: translateY(0) rotate(0deg); }
}

/* Footer logo float */
.footer-brand .logo-icon img,
.footer-brand .logo-icon svg {
  animation: skiFloat 5s ease-in-out infinite;
}

@keyframes skiFloat {
  0%, 100% { transform: translateY(0) rotate(0deg); }
  25% { transform: translateY(-4px) rotate(5deg); }
  75% { transform: translateY(3px) rotate(-3deg); }
}

/* --- Utility --- */
.text-center { text-align: center; }
.text-orange { color: var(--orange); }
.mb-0 { margin-bottom: 0; }
.mb-16 { margin-bottom: 16px; }
.mb-32 { margin-bottom: 32px; }
.mb-48 { margin-bottom: 48px; }
.mt-32 { margin-top: 32px; }
.mt-48 { margin-top: 48px; }

/* --- Animations (V2 — more dramatic) --- */
.fade-up {
  opacity: 0;
  transform: translateY(32px);
  transition: opacity 0.7s ease, transform 0.7s cubic-bezier(0.22, 1, 0.36, 1);
}
.fade-up.visible { opacity: 1; transform: translateY(0); }

/* Stagger children */
.grid-3 .fade-up:nth-child(2) { transition-delay: 0.1s; }
.grid-3 .fade-up:nth-child(3) { transition-delay: 0.2s; }
.grid-4 .fade-up:nth-child(2) { transition-delay: 0.08s; }
.grid-4 .fade-up:nth-child(3) { transition-delay: 0.16s; }
.grid-4 .fade-up:nth-child(4) { transition-delay: 0.24s; }

/* --- Scrollbar --- */
::-webkit-scrollbar { width: 6px; }
::-webkit-scrollbar-track { background: var(--navy-deep); }
::-webkit-scrollbar-thumb { background: var(--orange); border-radius: 3px; }
::-webkit-scrollbar-thumb:hover { background: var(--orange-hover); }

/* --- Selection --- */
::selection { background: var(--lf-acid); color: var(--lf-forest); }

/* ============================================
   REBRAND OVERRIDES — push the Backcountry palette
   Larger type, restrained acid, B&W photo treatment,
   acid-stroke design accents.
   ============================================ */

/* Logos: bigger, more confident. Header height grows to fit. */
.site-header, .header { padding: 14px 0 !important; }
.logo-img { height: 72px !important; width: auto !important; }
.logo-img-footer { height: 120px !important; width: auto !important; }
@media (max-width: 720px) {
  .logo-img { height: 56px !important; }
  .logo-img-footer { height: 88px !important; }
}

/* Type scale aligned to design brief (Hero 64-96, H1 40-48, H2 28-32, H3 20-22). */
body { font-size: 1.0625rem; line-height: 1.6; letter-spacing: 0.005em; }
p { font-size: 1.125rem; line-height: 1.7; color: var(--lf-forest); }
p.lead { font-size: 1.375rem; line-height: 1.55; color: var(--lf-forest); }

h1 {
  font-size: clamp(3.25rem, 8.5vw, 6rem);
  letter-spacing: -0.02em;
  line-height: 1.02;
  color: var(--lf-forest);
  font-weight: 700;
}
h2 {
  font-size: clamp(2.25rem, 4.5vw, 3.5rem);
  letter-spacing: -0.01em;
  line-height: 1.05;
  color: var(--lf-forest);
  font-weight: 700;
}
h3 {
  font-size: clamp(1.375rem, 2.6vw, 1.625rem);
  letter-spacing: 0;
  line-height: 1.15;
  color: var(--lf-forest);
  font-weight: 700;
}
h4 { font-size: 1.1875rem; color: var(--lf-forest); font-weight: 700; }

/* Hero headline: extra-large per brief. */
.hero h1, .page-hero h1 {
  font-size: clamp(3.75rem, 9vw, 6.5rem);
  font-weight: 700;
  letter-spacing: -0.025em;
  line-height: 0.98;
}

/* Hero subhead opacity per brief (60–70% snow on dark hero). */
.hero p, .page-hero p {
  font-size: clamp(1.125rem, 1.6vw, 1.375rem);
  color: rgba(242,244,241,0.72);
}

/* Section eyebrows: forest text + acid dash, never acid text. */
.section-label {
  font-size: 0.875rem;
  letter-spacing: 0.18em;
  color: var(--lf-forest);
  font-weight: 700;
}
.section-label::before {
  width: 32px;
  height: 3px;
  background: var(--lf-acid);
}

/* Buttons: sharper, bolder, more confident. Brief calls for 0–2px radius. */
.btn { border-radius: 2px; font-weight: 700; letter-spacing: 0.08em; text-transform: uppercase; font-size: 0.9375rem; padding: 16px 32px; }
.btn-sm { padding: 12px 22px; font-size: 0.8125rem; letter-spacing: 0.1em; }
.btn-lg { padding: 20px 44px; font-size: 1rem; }
.btn-primary { background: var(--lf-acid); color: var(--lf-forest); box-shadow: none; border: 2px solid var(--lf-acid); }
.btn-primary:hover { background: #B8E000; border-color: #B8E000; transform: translateY(-2px); box-shadow: 0 6px 24px rgba(0,0,0,0.25); }
.btn-secondary { border-radius: 2px; }
.btn-outline-white { border-radius: 2px; }
.btn-ghost { color: var(--lf-forest); }
.btn-ghost:hover { color: var(--lf-pine); }

/* Nav: forest bg always (per brief). */
.site-header, .header { background: var(--lf-forest) !important; border-bottom: 1px solid rgba(242,244,241,0.08); }
.site-header .logo, .header .logo { color: var(--lf-snow); }
.nav-links a { color: var(--lf-snow); font-weight: 700; letter-spacing: 0.1em; text-transform: uppercase; font-size: 0.8125rem; }
.nav-links a:hover, .nav-links a.active { color: var(--lf-acid) !important; }
.nav-cta.btn-primary { color: var(--lf-forest); background: var(--lf-acid); border: 2px solid var(--lf-acid); }
.nav-cta.btn-primary:hover { background: transparent; color: var(--lf-acid); border-color: var(--lf-acid); }
.mobile-toggle span { background: var(--lf-snow) !important; }

/* Stat numbers — forest weight, not pale acid on snow. */
.stat-block .stat-num, .stat-num, .donation-amount, .pricing-amount {
  color: var(--lf-forest) !important;
  font-weight: 700;
}
/* But keep an acid underline accent on the stat for "pop". */
.stat-block .stat-num::after {
  content: '';
  display: block;
  width: 36px;
  height: 4px;
  background: var(--lf-acid);
  margin: 8px auto 0;
}

/* Card hover/borders: pine, not acid (acid is reserved for CTAs). */
.tier-card:hover, .sponsor-tier:hover, .donation-card:hover, .coach-card:hover {
  border-color: var(--lf-pine) !important;
  box-shadow: 0 12px 48px rgba(26,38,32,0.14) !important;
}
.sponsor-tier.highlight { border-color: var(--lf-pine) !important; background: var(--lf-snow) !important; }

/* FAQ — distinct card containers + clear category dividers. */
.faq-category { margin-bottom: 64px !important; }
.faq-category h3, .faq-category h2 {
  font-size: clamp(1.625rem, 2.4vw, 2rem);
  margin-bottom: 24px !important;
  padding-bottom: 14px !important;
  border-bottom: 3px solid var(--lf-forest) !important;
  position: relative;
}
.faq-category h3::after, .faq-category h2::after {
  content: '';
  position: absolute;
  left: 0;
  bottom: -3px;
  width: 64px;
  height: 3px;
  background: var(--lf-acid);
}

.faq-item {
  border: 1px solid var(--lf-slate) !important;
  border-radius: 2px;
  background: var(--lf-snow);
  margin-bottom: 10px;
  position: relative;
  transition: border-color 0.2s ease, box-shadow 0.25s ease, transform 0.2s ease;
}
.faq-item:hover {
  border-color: var(--lf-pine) !important;
}
.faq-item.open {
  border-color: var(--lf-pine) !important;
  box-shadow: 0 6px 24px rgba(26,38,32,0.10);
}
/* Acid left-edge accent on the open item — clear "active" indicator. */
.faq-item.open::before {
  content: '';
  position: absolute;
  left: -1px; top: -1px; bottom: -1px;
  width: 4px;
  background: var(--lf-acid);
}
.faq-question {
  padding: 20px 22px !important;
}
.faq-answer-inner {
  padding: 0 22px 22px !important;
  color: var(--lf-forest);
}
.faq-question:hover { color: var(--lf-pine) !important; }
.faq-item.open .faq-question { color: var(--lf-forest); }
.faq-item.open .faq-icon { background: var(--lf-acid) !important; color: var(--lf-forest) !important; }
.faq-icon { background: var(--lf-snow) !important; border: 1.5px solid var(--lf-slate); }
.faq-item.open .faq-icon { border-color: var(--lf-acid) !important; }

/* Contact page info cards — outlined panels distinct from the page bg. */
.contact-info { display: flex; flex-direction: column; gap: 16px; }
.contact-info-card {
  border: 1px solid var(--lf-slate);
  border-radius: 2px;
  background: var(--lf-snow);
  padding: 24px 26px;
  position: relative;
  transition: border-color 0.2s ease, box-shadow 0.2s ease;
}
.contact-info-card:hover {
  border-color: var(--lf-pine);
  box-shadow: 0 6px 24px rgba(26,38,32,0.08);
}
.contact-info-card::before {
  content: '';
  position: absolute;
  left: -1px; top: -1px;
  width: 4px;
  height: 28px;
  background: var(--lf-acid);
}
.contact-info-card h3 {
  margin: 0 0 12px !important;
  padding-bottom: 8px;
  border-bottom: 2px solid var(--lf-forest);
  display: inline-block;
}
.contact-info-card h3 + p { margin-top: 4px; }
.contact-info-card p { margin-bottom: 6px; color: var(--lf-forest); }
.contact-info-card a { color: var(--lf-forest); border-bottom: 1px solid var(--lf-acid); padding-bottom: 1px; transition: color 0.2s ease; }
.contact-info-card a:hover { color: var(--lf-pine); }
.contact-info-card iframe { display: block; }

/* Contact form — visible slate borders + matching card container. */
#contact-form {
  border: 1px solid var(--lf-slate);
  border-radius: 2px;
  background: var(--lf-snow);
  padding: 28px 30px;
  position: relative;
}
#contact-form::before {
  content: '';
  position: absolute;
  left: -1px; top: -1px;
  width: 4px;
  height: 28px;
  background: var(--lf-acid);
}
#contact-form .form-group label {
  font-size: 0.75rem;
  font-weight: 700;
  letter-spacing: 0.12em;
  text-transform: uppercase;
  color: var(--lf-slate);
}
#contact-form input,
#contact-form textarea,
#contact-form select,
.form-group input,
.form-group textarea,
.form-group select {
  border: 1px solid var(--lf-slate) !important;
  border-radius: 2px !important;
  background: transparent !important;
  color: var(--lf-forest) !important;
  padding: 14px 16px !important;
}
#contact-form input:focus,
#contact-form textarea:focus,
#contact-form select:focus,
.form-group input:focus,
.form-group textarea:focus,
.form-group select:focus {
  outline: none !important;
  border-color: var(--lf-pine) !important;
  border-width: 2px !important;
  padding: 13px 15px !important;
  box-shadow: none !important;
}

/* Pricing notes — restrained. */
.pricing-note strong { color: var(--lf-forest); }

/* Coach card border on hover: pine. */
.coach-card:hover .coach-img { border-color: var(--lf-pine) !important; }

/* Coach role label: forest text (acid on snow was illegible). */
.coach-card .coach-role {
  color: var(--lf-forest) !important;
  background: var(--lf-acid);
  display: inline-block;
  padding: 4px 10px;
  font-size: 0.75rem;
  letter-spacing: 0.12em;
}

/* Season-overview timeline dots: forest (dark), not acid. */
.timeline-wrapper.animate .timeline-dot {
  background: var(--lf-forest) !important;
  box-shadow: 0 0 0 5px rgba(26,38,32,0.18) !important;
}

/* Body text utility. */
.text-orange, .text-acid { color: var(--lf-acid); }
.text-forest { color: var(--lf-forest); }
.text-pine { color: var(--lf-pine); }

/* ============================================
   Photo treatment — B&W everywhere except gallery
   ============================================ */

/* Default: editorial B&W with a subtle forest cast. */
img:not(.logo-img):not(.logo-img-footer):not(.no-tone) {
  filter: grayscale(1) contrast(1.06) brightness(0.88);
  transition: filter 0.6s ease;
}

/* Gallery page = full color. Add body class .gallery-page to gallery.html. */
body.gallery-page .gallery-item img,
body.gallery-page .hero-bg img,
body.gallery-page .gallery-grid img {
  filter: none !important;
}

/* On hover, photo cards lift and warm slightly toward forest. */
.gallery-item:hover img,
.tier-card:hover img,
.coach-card:hover .coach-img {
  filter: grayscale(0.7) contrast(1.1) brightness(0.95);
}

/* Gallery page hover: full saturation lift. */
body.gallery-page .gallery-item:hover img {
  filter: contrast(1.05) brightness(1.02);
}

/* Hero image overlay = forest tint, replacing the navy gradient. */
.hero-overlay {
  background: linear-gradient(135deg, rgba(26,38,32,0.92) 0%, rgba(26,38,32,0.74) 50%, rgba(26,38,32,0.55) 100%) !important;
}

/* ============================================
   Acid-stroke design accents — make it feel designed
   ============================================ */

/* Diagonal acid strike running across the hero, anchored bottom-left. */
.hero::after, .page-hero::after {
  content: '';
  position: absolute;
  left: 0;
  bottom: 0;
  width: 100%;
  height: 6px;
  background: var(--lf-acid);
  z-index: 3;
}

/* Acid corner-bracket on photo cards (top-right + bottom-left). */
.tier-card, .sponsor-tier, .coach-card, .gallery-item {
  position: relative;
}
.tier-card::before, .sponsor-tier::before, .coach-card::before {
  content: '';
  position: absolute;
  top: -1px;
  right: -1px;
  width: 28px;
  height: 28px;
  border-top: 3px solid var(--lf-acid);
  border-right: 3px solid var(--lf-acid);
  z-index: 2;
  pointer-events: none;
  opacity: 0;
  transform: translate(-6px, 6px);
  transition: opacity 0.35s ease, transform 0.35s ease;
}
.tier-card:hover::before, .sponsor-tier:hover::before, .coach-card:hover::before {
  opacity: 1;
  transform: translate(0, 0);
}

/* Section heading underline: thick acid stroke, off-center. */
.section-heading h2, h2.section-title {
  position: relative;
  display: inline-block;
}
.section-heading h2::after, h2.section-title::after {
  content: '';
  display: block;
  width: 64px;
  height: 5px;
  background: var(--lf-acid);
  margin-top: 18px;
}

/* Acid dotted texture for empty space — subtle but designed. */
section.themed-band {
  background:
    radial-gradient(circle, rgba(215,255,58,0.08) 1px, transparent 1px) 0 0 / 22px 22px,
    var(--lf-forest);
  color: var(--lf-snow);
}

/* Footer accent: acid line across the top of the footer. */
.site-footer, footer.footer, .footer { border-top: 4px solid var(--lf-acid) !important; }
.footer-bottom p { color: rgba(242,244,241,0.45); }

/* CTA block (above footer) — fix the lingering navy overlay + gradient line. */
.cta-block::before {
  background: linear-gradient(90deg, var(--lf-acid), var(--lf-pine), var(--lf-acid)) !important;
  height: 4px !important;
}
.cta-block .cta-overlay {
  background: linear-gradient(160deg, rgba(26,38,32,0.94) 0%, rgba(26,38,32,0.78) 100%) !important;
}

/* Any other section using the old navy gradient as a hero-bg. */
.hero-bg[style*="--navy-deep"],
.hero-bg[style*="--alpine-blue"] {
  background: linear-gradient(135deg, var(--lf-forest) 0%, var(--lf-pine) 70%, var(--lf-forest) 100%) !important;
}

/* ============================================
   MOVEMENT + ACID HIGHLIGHTER STROKES
   ============================================ */

/* Marker-highlight a key word inside a heading. Wrap with class .hl */
.hl, .highlight-acid {
  position: relative;
  display: inline;
  background-image: linear-gradient(120deg, var(--lf-acid) 0%, var(--lf-acid) 100%);
  background-repeat: no-repeat;
  background-size: 100% 38%;
  background-position: 0 78%;
  padding: 0 0.08em;
  color: var(--lf-forest);
}
.hero .hl, .hero h1 .hl, .page-hero .hl, .hero h1.hl {
  color: var(--lf-forest);
}

/* Animated acid marker-highlight — sweeps in once on load.
   Background grows from 0 to 100% width via animation. */
.stroke-sweep {
  display: inline-block;
  color: var(--lf-forest);
  background-image: linear-gradient(120deg, var(--lf-acid) 0%, var(--lf-acid) 100%);
  background-repeat: no-repeat;
  background-size: 0% 78%;
  background-position: 0 70%;
  padding: 0.02em 0.12em;
  line-height: 1;
  white-space: nowrap;
  animation: acidMarker 1.1s cubic-bezier(0.65, 0, 0.35, 1) 0.4s forwards;
}
@keyframes acidMarker {
  0%   { background-size: 0% 78%; }
  100% { background-size: 100% 78%; }
}

/* Acid underline that draws in on link hover. */
a.acid-link, .nav-links a, .footer-links a {
  position: relative;
  display: inline-block;
}
a.acid-link::after, .nav-links a::after, .footer-links a::after {
  content: '';
  position: absolute;
  left: 0; bottom: -4px;
  width: 100%;
  height: 2px;
  background: var(--lf-acid);
  transform: scaleX(0);
  transform-origin: right center;
  transition: transform 0.4s cubic-bezier(0.65, 0, 0.35, 1);
}
a.acid-link:hover::after, .nav-links a:hover::after, .footer-links a:hover::after,
.nav-links a.active::after {
  transform: scaleX(1);
  transform-origin: left center;
}

/* Continuously moving diagonal acid stripe — used as a divider band. */
.acid-stripe {
  position: relative;
  height: 22px;
  overflow: hidden;
  background: var(--lf-forest);
}
.acid-stripe::before {
  content: '';
  position: absolute;
  inset: 0;
  background-image: repeating-linear-gradient(
    -45deg,
    var(--lf-acid) 0,
    var(--lf-acid) 10px,
    var(--lf-forest) 10px,
    var(--lf-forest) 32px
  );
  animation: stripeMarch 6s linear infinite;
  width: calc(100% + 64px);
}
@keyframes stripeMarch {
  0% { transform: translateX(0); }
  100% { transform: translateX(-64px); }
}

/* Auto-decorate the existing forest band above the footer with a stripe at its bottom. */
.cta-block { padding-bottom: 100px !important; }
.cta-block::after {
  content: '';
  position: absolute;
  left: 0; right: 0; bottom: 0;
  height: 18px;
  background-image: repeating-linear-gradient(
    -45deg,
    var(--lf-acid) 0,
    var(--lf-acid) 8px,
    var(--lf-forest) 8px,
    var(--lf-forest) 24px
  );
  background-size: 200% 100%;
  animation: stripeMarch 7s linear infinite;
  z-index: 4;
}

/* Floating acid dot accent — drifts on scroll-rich pages. */
.hero::before {
  content: '';
  position: absolute;
  top: 18%;
  right: 8%;
  width: 14px;
  height: 14px;
  background: var(--lf-acid);
  border-radius: 50%;
  z-index: 3;
  animation: floatDot 4s ease-in-out infinite alternate;
  box-shadow: 0 0 24px rgba(215,255,58,0.45);
}
@keyframes floatDot {
  0% { transform: translate(0, 0); }
  100% { transform: translate(-12px, 18px); }
}

/* Section heading underline animates in on hover/focus of section. */
.section-heading h2::after, h2.section-title::after {
  width: 64px;
  transition: width 0.6s cubic-bezier(0.65, 0, 0.35, 1);
}
.section-heading:hover h2::after, h2.section-title:hover::after {
  width: 140px;
}

/* Stat number underline animates on hover. */
.stat-block { transition: transform 0.4s ease; }
.stat-block:hover { transform: translateY(-4px); }
.stat-block .stat-num::after { transition: width 0.5s cubic-bezier(0.65, 0, 0.35, 1); }
.stat-block:hover .stat-num::after { width: 72px; }

/* Stagger the second stroke-sweep so the marker swipes feel sequential. */
.stroke-sweep + .stroke-sweep,
h1 .stroke-sweep:nth-of-type(2),
h2 .stroke-sweep:nth-of-type(2) {
  animation-delay: 0.95s;
}

/* ============================================
   Section textures — topographic + dot grid
   On-brand, low contrast, anchors longer sections.
   ============================================ */
.section.textured { position: relative; isolation: isolate; }
.section.textured::before {
  content: '';
  position: absolute;
  inset: 0;
  z-index: 0;
  pointer-events: none;
  background-image:
    /* Topographic contour lines (subtle) */
    url("data:image/svg+xml;utf8,%3Csvg xmlns='http%3A//www.w3.org/2000/svg' viewBox='0 0 600 600'%3E%3Cg fill='none' stroke='%231A2620' stroke-width='1.1' stroke-opacity='0.055'%3E%3Cpath d='M-50,80 Q 120,30 260,80 T 660,70'/%3E%3Cpath d='M-50,150 Q 140,100 280,150 T 660,140'/%3E%3Cpath d='M-50,220 Q 100,170 240,230 T 660,210'/%3E%3Cpath d='M-50,290 Q 160,240 320,300 T 660,280'/%3E%3Cpath d='M-50,360 Q 110,310 250,360 T 660,350'/%3E%3Cpath d='M-50,430 Q 170,380 310,440 T 660,420'/%3E%3Cpath d='M-50,500 Q 130,450 280,510 T 660,490'/%3E%3C/g%3E%3C/svg%3E"),
    /* Faint dot grid */
    radial-gradient(circle, rgba(26,38,32,0.045) 1px, transparent 1.4px);
  background-size: 600px 600px, 26px 26px;
  background-position: 0 0, 0 0;
  background-repeat: repeat, repeat;
}
/* Forest section gets snow-colored topo + acid-tinted dots. */
.section.textured.bg-navy::before {
  background-image:
    url("data:image/svg+xml;utf8,%3Csvg xmlns='http%3A//www.w3.org/2000/svg' viewBox='0 0 600 600'%3E%3Cg fill='none' stroke='%23F2F4F1' stroke-width='1.1' stroke-opacity='0.05'%3E%3Cpath d='M-50,80 Q 120,30 260,80 T 660,70'/%3E%3Cpath d='M-50,150 Q 140,100 280,150 T 660,140'/%3E%3Cpath d='M-50,220 Q 100,170 240,230 T 660,210'/%3E%3Cpath d='M-50,290 Q 160,240 320,300 T 660,280'/%3E%3Cpath d='M-50,360 Q 110,310 250,360 T 660,350'/%3E%3Cpath d='M-50,430 Q 170,380 310,440 T 660,420'/%3E%3Cpath d='M-50,500 Q 130,450 280,510 T 660,490'/%3E%3C/g%3E%3C/svg%3E"),
    radial-gradient(circle, rgba(215,255,58,0.06) 1px, transparent 1.4px);
  background-size: 600px 600px, 28px 28px;
}
/* Lift the actual section content above the texture layer. */
.section.textured > * { position: relative; z-index: 1; }

/* Subtle gradient wash on text-heavy snow sections — adds depth. */
.section.textured.bg-snow,
.section.textured:not(.bg-navy) {
  background:
    linear-gradient(180deg, var(--lf-snow) 0%, #EAEDE6 50%, var(--lf-snow) 100%);
}
.section.textured.bg-navy {
  background:
    linear-gradient(180deg, var(--lf-forest) 0%, #131D17 55%, var(--lf-forest) 100%);
}

/* Tall vertical acid rail on the leading edge of text-heavy sections. */
.section.textured > .container { padding-left: 36px; padding-right: 36px; }
.section.textured > .container::before {
  content: '';
  position: absolute;
  left: 12px;
  top: 24px;
  bottom: 24px;
  width: 4px;
  background: var(--lf-acid);
  z-index: 2;
  opacity: 0.85;
}
.section.textured.bg-navy > .container::before { opacity: 0.95; }
@media (max-width: 720px) {
  .section.textured > .container::before { left: 8px; width: 3px; }
}

/* ============================================
   ACID CAUTION-TAPE DIVIDER between sections
   Use: <div class="acid-tape" aria-hidden="true"></div>
   ============================================ */
.acid-tape {
  position: relative;
  height: 28px;
  overflow: hidden;
  background: var(--lf-forest);
  z-index: 5;
}
.acid-tape::before {
  content: '';
  position: absolute;
  top: 0; bottom: 0; left: 0;
  width: calc(100% + 80px);
  background-image: repeating-linear-gradient(
    -45deg,
    var(--lf-acid) 0,
    var(--lf-acid) 14px,
    var(--lf-forest) 14px,
    var(--lf-forest) 36px
  );
  animation: stripeMarch 7s linear infinite;
}
.acid-tape::after {
  content: '';
  position: absolute;
  top: 0; bottom: 0; right: 0;
  width: 36px;
  background: linear-gradient(90deg, transparent 0%, rgba(26,38,32,0.6) 100%);
  pointer-events: none;
}
.acid-tape.reverse::before {
  animation-direction: reverse;
}

/* ============================================
   HAND-DRAWN SKETCH OVERLAY on images
   Wrap an image with .img-sketch and pick a shape:
   data-sketch="ridge" | "jump" | "turn"
   The SVG is injected by JS and animates on scroll-in.
   ============================================ */
.img-sketch { position: relative; overflow: visible !important; }
.img-sketch > img { display: block; width: 100%; height: auto; position: relative; z-index: 1; }
.img-sketch__svg {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  pointer-events: none;
  z-index: 2;
  overflow: visible;
}
.img-sketch__svg path {
  fill: none;
  stroke: var(--lf-acid);
  stroke-width: 0.7;
  stroke-linecap: round;
  stroke-linejoin: round;
  opacity: 0.85;
}
.img-sketch__svg path.draw {
  stroke-dasharray: var(--len, 1000);
  stroke-dashoffset: var(--len, 1000);
  transition: stroke-dashoffset 1.6s cubic-bezier(0.65, 0, 0.35, 1);
}
.img-sketch.in-view .img-sketch__svg path.draw {
  stroke-dashoffset: 0;
}
/* Ghost stroke removed for cleaner, more subtle single-line treatment. */
.img-sketch__svg path.ghost { display: none; }

/* Subtle vertical acid scroll-edge bar on the right side of the viewport. */
body::before {
  content: '';
  position: fixed;
  right: 0;
  top: 0;
  bottom: 0;
  width: 4px;
  background: var(--lf-acid);
  z-index: 999;
  pointer-events: none;
  opacity: 0.85;
}

/* Selection retains acid pop. */
::selection { background: var(--lf-acid); color: var(--lf-forest); }
::-webkit-scrollbar-thumb { background: var(--lf-acid); }
::-webkit-scrollbar-thumb:hover { background: #B8E000; }
::-webkit-scrollbar-track { background: var(--lf-forest); }