/*
 * LVKC (La Ventana Kite Club) Website Styling
 * Design System & Visual Identity
 */

/* Figtree stands in for TT Commons Pro (brandbook primary) until the licensed
   webfont is purchased; swap the import + the two font tokens below and the
   whole site follows. The repo's TT Commons .otf files are Fontspring DEMO
   exports with watermark glyphs — never use them for real copy. */
@import url('https://fonts.googleapis.com/css2?family=Figtree:ital,wght@0,300..900;1,300..900&display=swap');

/* Cooper BT Light: licensed file shipped in the brandbook. Accent only —
   short phrases and highlights, never paragraphs (brandbook §09). */
@font-face {
  font-family: 'Cooper BT Light';
  src: url('/assets/fonts/CooperBTLight.woff2') format('woff2'),
       url('/assets/fonts/CooperBTLight.otf') format('opentype');
  font-weight: 300;
  font-style: normal;
  font-display: swap;
}

/* --- CUSTOM PROPERTIES (LVKC Brandbook 2026-2027, §07 color / §09 type) --- */
:root {
  --color-sand-bg: #FBF8F3;        /* brandbook base */
  --color-sand-card: rgba(255, 255, 255, 0.75);
  --color-sea-dark: #0B1733;       /* navy: headings + full-bleed blocks */
  --color-sea-primary: #1D3E93;    /* brand blue: logo, links, card text */
  --color-sea-light: #E8F1F5;
  --color-forest: #476B5B;
  --color-copper: #B05531;         /* terracota (brandbook) */
  --color-copper-hover: #9B4827;
  --color-copper-dark: #B05531;
  --color-copper-dark-hover: #9B4827;
  --color-yellow: #F2D636;
  --color-yellow-light: #FFF8A4;   /* soft-yellow card background */
  --color-text-dark: #222B32;
  --color-text-light: #4D5E70; /* Improved contrast from #64748B */
  --color-text-white: #FFFFFF;

  --font-heading: 'Figtree', system-ui, -apple-system, sans-serif;
  --font-body: 'Figtree', system-ui, -apple-system, sans-serif;
  --font-accent: 'Cooper BT Light', Georgia, serif;
  
  --border-radius-sm: 8px;
  --border-radius-md: 16px;
  --border-radius-lg: 32px;
  
  --shadow-sm: 0 2px 8px rgba(34, 43, 50, 0.05);
  --shadow-md: 0 10px 30px rgba(34, 43, 50, 0.08);
  --shadow-lg: 0 20px 40px rgba(34, 43, 50, 0.12);
  
  --transition-smooth: all 0.3s cubic-bezier(0.4, 0, 0.2, 1);
  --transition-premium: all 0.6s cubic-bezier(0.16, 1, 0.3, 1);
  --header-height: 80px;
}

/* Anchor targets must clear the fixed header, otherwise jumping to a section
   lands with its heading hidden underneath it. */
[id] {
  scroll-margin-top: calc(var(--header-height) + 1.5rem);
}

/* --- BILINGUAL VISIBILITY RULES --- */
body.lang-en [lang="es"] {
  display: none !important;
}
body.lang-es [lang="en"] {
  display: none !important;
}

/* --- BASE STYLES --- */
* {
  box-sizing: border-box;
  margin: 0;
  padding: 0;
  -webkit-font-smoothing: antialiased;
}

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

body {
  background-color: var(--color-sand-bg);
  color: var(--color-text-dark);
  font-family: var(--font-body);
  line-height: 1.6;
  overflow-x: hidden;
}

/* Brandbook §09: H1 DemiBold/Bold, H2 Medium/DemiBold, headings in navy.
   Web headings are sentence case — ALL CAPS is reserved for social (§09). */
h1, h2, h3, h4 {
  font-family: var(--font-heading);
  font-weight: 600;
  line-height: 1.1;
  color: var(--color-sea-dark);
}

h1 {
  font-size: 3.25rem;
  letter-spacing: -0.02em;
  font-weight: 700;
}

h2 {
  font-size: 2.5rem;
  letter-spacing: -0.01em;
}

/* Signature brand gesture: bold italic for emphasis inside titles
   ("2026/2027", "MORE THAN KITESURFING" — brandbook §09/§10). */
.type-em {
  font-style: italic;
  font-weight: 700;
}

/* Cooper BT Light accent — phrases only, never paragraphs (§09). */
.font-cooper {
  font-family: var(--font-accent);
  font-weight: 300;
  letter-spacing: -0.01em;
}

h3 {
  font-size: 1.85rem;
}

p {
  margin-bottom: 1rem;
  color: var(--color-text-dark);
  font-size: 1rem;
}

p.lead {
  font-size: 1.125rem;
  color: var(--color-text-light);
}

a {
  color: inherit;
  text-decoration: none;
  transition: var(--transition-smooth);
}

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

ul {
  list-style: none;
}

.container {
  width: 100%;
  max-width: 1200px;
  margin: 0 auto;
  padding: 0 1.5rem;
}

/* --- EDITORIAL HOMEPAGE EXPERIMENT --- */
.editorial-experience {
  background: #efefeb;
  padding: clamp(5rem, 8vw, 8rem) 1.85rem;
}

.editorial-shell {
  width: min(100%, 1410px);
  margin: 0 auto;
}

.editorial-intro {
  display: block;
  margin-bottom: 3rem;
}

.editorial-intro h2 {
  font-size: clamp(3.25rem, 5.4vw, 6.25rem);
  line-height: 0.88;
  letter-spacing: -0.055em;
}

.editorial-intro h2 em {
  font-style: normal;
}

.editorial-intro p {
  max-width: 62ch;
  margin: 1.35rem 0 0;
  font-size: 1rem;
  line-height: 1.75;
}

.editorial-index {
  font-size: 0.72rem;
  font-weight: 800;
  letter-spacing: 0.16em;
  text-transform: uppercase;
}

.editorial-kicker {
  padding-bottom: 0.5rem;
  color: var(--color-sea-primary);
}

.editorial-grid {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  grid-auto-rows: 430px;
  gap: 1.25rem;
}

.editorial-tile {
  position: relative;
  min-width: 0;
  overflow: hidden;
  border-radius: 2px;
}

.editorial-tile--wide {
  grid-column: span 2;
}

.editorial-tile--image {
  background: var(--color-sea-dark);
}

.editorial-tile--image::after {
  content: "";
  position: absolute;
  inset: 35% 0 0;
  background: linear-gradient(to bottom, transparent, rgba(7, 20, 30, 0.68));
  pointer-events: none;
}

.editorial-tile--image img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  transition: transform 0.8s cubic-bezier(0.2, 0.7, 0.2, 1);
}

a.editorial-tile--image:hover img {
  transform: scale(1.035);
}

.editorial-image-caption {
  position: absolute;
  z-index: 1;
  left: 1.5rem;
  right: 1.5rem;
  bottom: 1.25rem;
  display: flex;
  align-items: baseline;
  justify-content: space-between;
  gap: 1rem;
  color: white;
}

.editorial-image-caption span {
  font-size: 0.7rem;
  letter-spacing: 0.16em;
}

.editorial-image-caption strong {
  font-family: var(--font-heading);
  font-size: clamp(1.55rem, 2.3vw, 2.6rem);
  font-weight: 450;
}

.editorial-tile--story {
  display: flex;
  flex-direction: column;
  justify-content: space-between;
  padding: clamp(2rem, 3.2vw, 3.5rem);
}

.editorial-tile--story h3 {
  margin: 2.5rem 0 1.25rem;
  font-size: clamp(2.15rem, 3.2vw, 3.6rem);
  line-height: 0.98;
  letter-spacing: -0.035em;
}

.editorial-tile--story p {
  max-width: 34ch;
  line-height: 1.7;
}

.editorial-tile--copper {
  background: var(--color-copper-dark);
  color: white;
}

.editorial-tile--copper p,
.editorial-tile--ink p {
  color: inherit;
}

.editorial-tile--ink {
  background: var(--color-sea-dark);
  color: white;
}

.editorial-link {
  display: flex;
  justify-content: space-between;
  gap: 1rem;
  padding-top: 1rem;
  border-top: 1px solid currentColor;
  font-size: 0.82rem;
  font-weight: 750;
  letter-spacing: 0.08em;
  text-transform: uppercase;
}

.editorial-link:hover {
  opacity: 0.68;
}

/* --- BUTTONS --- */
.btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  padding: 0.9rem 2rem;
  font-size: 0.95rem;
  font-weight: 600;
  border-radius: var(--border-radius-lg);
  border: 2px solid transparent;
  cursor: pointer;
  transition: var(--transition-smooth);
  /* Without this, mobile browsers briefly wait to see whether a tap turns
     into a scroll before firing the click. On sections with active scroll
     listeners (hero parallax, sticky header) that ambiguity window makes
     taps land inconsistently — the button needs a beat to "not scroll" to
     register. This commits taps on .btn to click handling immediately. */
  touch-action: manipulation;
}

/* WeTravel's checkout script only opens its popup when the click target itself
   carries the .wtrvl-checkout_button class, so the inner lang spans must not
   intercept the click. */
.wtrvl-checkout_button span {
  pointer-events: none;
}

.btn-primary {
  background-color: var(--color-copper-dark);
  color: var(--color-text-white);
}

.btn-primary:hover {
  background-color: var(--color-copper-dark-hover);
  transform: translateY(-2px);
  box-shadow: 0 6px 20px rgba(176, 84, 47, 0.25);
}

.btn-secondary {
  background-color: transparent;
  border-color: var(--color-sea-primary);
  color: var(--color-sea-primary);
}

.btn-secondary:hover {
  background-color: var(--color-sea-light);
  transform: translateY(-2px);
}

/* Secondary buttons on dark panels / backgrounds */
.panel .btn-secondary,
.section-bg-dark .btn-secondary {
  border-color: var(--color-text-white);
  color: var(--color-text-white);
}

.panel .btn-secondary:hover,
.section-bg-dark .btn-secondary:hover {
  background-color: rgba(255, 255, 255, 0.15);
  color: var(--color-text-white);
}

.btn-white {
  background-color: var(--color-text-white);
  color: var(--color-sea-primary);
  box-shadow: var(--shadow-sm);
}

.btn-white:hover {
  background-color: var(--color-sea-light);
  transform: translateY(-2px);
  box-shadow: var(--shadow-md);
}

/* --- HEADER & NAVIGATION --- */
header {
  position: fixed;
  top: 0;
  left: 0;
  width: 100%;
  height: var(--header-height);
  z-index: 1000;
  background-color: rgba(253, 251, 247, 0.85);
  backdrop-filter: blur(12px);
  border-bottom: 1px solid rgba(21, 62, 92, 0.08);
  transition: var(--transition-smooth);
}

header.scrolled {
  box-shadow: var(--shadow-sm);
  background-color: var(--color-sand-bg);
}

/* Translucent Glassmorphic Header when over the dark Hero sections */
header.header-over-hero {
  background-color: rgba(10, 28, 42, 0.15) !important;
  backdrop-filter: blur(12px) !important;
  -webkit-backdrop-filter: blur(12px) !important;
  border-bottom: 1px solid rgba(255, 255, 255, 0.1) !important;
  box-shadow: none !important;
}

header.header-over-hero .logo-img {
  filter: brightness(0) invert(1) !important;
}

header.header-over-hero .nav-links a {
  color: rgba(255, 255, 255, 0.85) !important;
}

header.header-over-hero .nav-links a::after {
  background-color: var(--color-copper) !important;
}

header.header-over-hero .nav-links a:hover {
  color: var(--color-copper) !important;
}

header.header-over-hero .nav-links a.active {
  color: var(--color-copper) !important;
}

header.header-over-hero .lang-switch {
  background-color: rgba(255, 255, 255, 0.1) !important;
  border-color: rgba(255, 255, 255, 0.2) !important;
}

header.header-over-hero .lang-btn {
  color: rgba(255, 255, 255, 0.85) !important;
}

header.header-over-hero .lang-btn.active {
  background-color: var(--color-copper-dark) !important;
  color: var(--color-text-white) !important;
  box-shadow: 0 2px 6px rgba(176, 84, 47, 0.3) !important;
}

header.header-over-hero .burger-menu span {
  background-color: var(--color-text-white) !important;
}

.header-container {
  display: flex;
  align-items: center;
  justify-content: space-between;
  height: 100%;
}

.logo {
  display: flex;
  align-items: center;
}

.logo-img {
  height: 60px;
  width: auto;
  display: block;
  transition: var(--transition-smooth);
}

nav {
  display: flex;
  align-items: center;
  gap: 2rem;
}

.nav-links {
  display: flex;
  align-items: center;
  gap: 2.25rem;
}

.nav-links a {
  font-weight: 600;
  font-size: 0.95rem;
  position: relative;
  padding: 0.5rem 0;
  color: var(--color-text-dark);
}

.nav-links a::after {
  content: '';
  position: absolute;
  bottom: 0;
  left: 0;
  width: 0;
  height: 2px;
  background-color: var(--color-copper-dark);
  transition: var(--transition-smooth);
}

.nav-links a:hover {
  color: var(--color-copper-dark);
}

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

.nav-links a.active {
  color: var(--color-copper-dark);
}

.nav-links a.active::after {
  width: 100%;
}

.lang-switch {
  display: flex;
  align-items: center;
  background-color: var(--color-sea-light);
  border-radius: 20px;
  padding: 3px;
  border: 1px solid rgba(21, 62, 92, 0.15);
}

/* TEMPORAL: oculto a pedido del cliente. Quitar esta regla para restaurar el selector de idioma. */
.lang-switch {
  display: none !important;
}

.lang-btn {
  background: transparent;
  border: none;
  padding: 0.25rem 0.75rem;
  font-family: var(--font-body);
  font-size: 0.85rem;
  font-weight: 700;
  border-radius: 17px;
  cursor: pointer;
  color: var(--color-sea-primary);
  transition: var(--transition-smooth);
}

.lang-btn.active {
  background-color: var(--color-copper-dark);
  color: var(--color-text-white);
  box-shadow: 0 2px 6px rgba(176, 84, 47, 0.3);
}

.btn-portal {
  font-family: var(--font-body);
  font-weight: 700;
  font-size: 0.8rem;
  background-color: var(--color-copper);
  color: var(--color-text-white) !important;
  padding: 0.5rem 1.25rem;
  border-radius: var(--border-radius-sm);
  border: none;
  text-decoration: none;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  transition: var(--transition-smooth);
  text-transform: uppercase;
  letter-spacing: 0.5px;
  cursor: pointer;
}

.btn-portal:hover {
  background-color: var(--color-copper-hover) !important;
  transform: translateY(-1px);
}


/* Burger menu icon */
.burger-menu {
  display: none;
  flex-direction: column;
  justify-content: space-between;
  width: 30px;
  height: 21px;
  background: transparent;
  border: none;
  cursor: pointer;
  z-index: 1001;
}

.burger-menu span {
  width: 100%;
  height: 3px;
  background-color: var(--color-sea-primary);
  border-radius: 3px;
  transition: var(--transition-smooth);
  transform-origin: left center;
}

/* Open states */
.burger-menu.open span:nth-child(1) {
  transform: rotate(45deg) translateY(-2px);
}
.burger-menu.open span:nth-child(2) {
  opacity: 0;
  width: 0;
}
.burger-menu.open span:nth-child(3) {
  transform: rotate(-45deg) translateY(2px);
}

/* --- FULL-BLEED HERO & SCROLL TRACK --- */
.hero-scroll-track {
  position: relative;
  height: 350vh; /* Scroll track duration on desktop */
  background-color: var(--color-sea-dark);
}

.hero-scroll-track .hero {
  position: sticky;
  top: 0;
  height: 100vh;
  min-height: 100vh;
  width: 100%;
  padding: 0;
  margin: 0;
  display: flex;
  align-items: center;
  justify-content: center;
  overflow: hidden;
  z-index: 5;
}

.hero {
  position: relative;
  min-height: 100vh;
  display: flex;
  align-items: center;
  justify-content: center;
  text-align: center;
  color: var(--color-text-white);
  padding: 8rem 0 4rem;
  overflow: hidden;
}

.hero-bg {
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  z-index: 1;
  background-size: cover;
  background-position: center;
  transform: scale(1.05);
  animation: slowZoom 20s infinite alternate;
}

.hero-bg video {
  position: absolute;
  top: 50%;
  left: 50%;
  width: 100%;
  height: 100%;
  object-fit: cover;
  transform: translate(-50%, -50%);
  opacity: 1;
  transition: opacity 0.8s ease;
  z-index: 0;
}

.hero-bg.video-loaded video {
  opacity: 1;
}

.hero-bg::after {
  content: '';
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  background: linear-gradient(to bottom, rgba(10, 28, 42, 0.15) 0%, rgba(10, 28, 42, 0.42) 100%);
  z-index: 1;
}

@keyframes slowZoom {
  0% { transform: scale(1.02); }
  100% { transform: scale(1.08); }
}

/* --- FULLSCREEN VIDEO SECTION --- */
.fullscreen-video-section {
  position: relative;
  width: 100%;
  height: 100vh;
  height: 100dvh;
  overflow: hidden;
  background-color: #0c1b26;
}

.fullscreen-video-section video {
  position: absolute;
  top: 50%;
  left: 50%;
  width: 100%;
  height: 100%;
  object-fit: cover;
  transform: translate(-50%, -50%);
}

/* OVERLAYS STAGE & STEPS (Desktop and default styles) */
.hero-overlay-stage {
  position: relative;
  width: 100%;
  height: 100%;
  display: flex;
  align-items: center;
  justify-content: center;
  pointer-events: none; /* Let scroll events pass through to track */
  z-index: 2;
}

.hero-overlay-step {
  position: absolute;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
  width: 100%;
  max-width: 850px;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  opacity: 0;
  visibility: hidden;
  pointer-events: none;
  transition: opacity 0.4s ease, transform 0.4s ease, visibility 0.4s ease;
  z-index: 10;
}

.hero-overlay-step.active {
  pointer-events: auto; /* Allow link clicks when active */
}

/* Alignments on Desktop for narrative spacing */
@media (min-width: 769px) {
  .hero-overlay-step.step-2 {
    left: 8%;
    transform: translate(0, -50%);
    align-items: flex-start;
    text-align: left;
    max-width: 480px;
  }
  
  .hero-overlay-step.step-3 {
    left: auto;
    right: 8%;
    transform: translate(0, -50%);
    align-items: flex-start; /* Keep left alignment inside card but aligned right overall */
    text-align: left;
    max-width: 480px;
  }
}

/* LIQUID GLASS CARD AESTHETIC */
.liquid-glass-card {
  position: relative;
  padding: 2.5rem 3rem;
  background: rgba(10, 28, 42, 0.45); /* Dark sand luxury backdrop */
  border: 1px solid rgba(255, 255, 255, 0.15); /* Reflective border */
  border-radius: var(--border-radius-lg);
  color: var(--color-text-white);
  overflow: hidden;
  width: 100%;
  
  /* Apply Tahoe displacement refraction filter + normal blur fallback */
  backdrop-filter: url(#liquid-glass-refraction) blur(20px);
  -webkit-backdrop-filter: blur(20px);
  
  /* Drop shadow and inner bezel reflections */
  box-shadow: 
    0 20px 50px rgba(0, 0, 0, 0.4),
    inset 0 1px 2px rgba(255, 255, 255, 0.25),
    inset 0 -1px 2px rgba(0, 0, 0, 0.3);
  
  transition: transform 0.3s cubic-bezier(0.2, 0.8, 0.2, 1), border-color 0.3s ease, box-shadow 0.3s ease;
}

.liquid-glass-card:hover {
  transform: translateY(-4px);
  border-color: rgba(255, 255, 255, 0.25);
  box-shadow: 
    0 25px 60px rgba(0, 0, 0, 0.5),
    inset 0 1px 2px rgba(255, 255, 255, 0.35),
    0 0 25px rgba(212, 122, 85, 0.2); /* Copper-tinged glow */
}

.card-badge {
  display: inline-block;
  padding: 0.35rem 0.75rem;
  font-size: 0.75rem;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: 0.1em;
  color: var(--color-copper);
  background: rgba(212, 122, 85, 0.12);
  border: 1px solid rgba(212, 122, 85, 0.25);
  border-radius: var(--border-radius-sm);
  margin-bottom: 1.25rem;
}

.liquid-glass-card h2 {
  font-size: 2.25rem;
  margin-bottom: 1rem;
  font-family: var(--font-heading);
  color: var(--color-text-white);
  line-height: 1.15;
}

.liquid-glass-card h2 strong {
  font-weight: 900;
  font-style: normal;
  display: block;
}

.liquid-glass-card p {
  color: rgba(255, 255, 255, 0.85);
  font-size: 0.95rem;
  line-height: 1.6;
  margin-bottom: 2rem;
}

.card-ctas {
  display: flex;
  gap: 1rem;
}

.card-glow {
  position: absolute;
  top: -50%;
  left: -50%;
  width: 200%;
  height: 200%;
  background: radial-gradient(circle, rgba(212, 122, 85, 0.08) 0%, transparent 60%);
  pointer-events: none;
  z-index: 0;
  transform: translate(0, 0);
  transition: transform 0.5s ease;
}

.liquid-glass-card:hover .card-glow {
  transform: translate(5%, 5%);
}

.hero-content {
  max-width: 850px;
  margin: 0 auto;
  /* .hero-overlay-stage sets pointer-events: none for the old scroll-step
     hero, where only the active step opts back in. This hero has no steps,
     so its content must re-enable pointer events itself or none of it —
     button, badge, links — is clickable despite being fully visible. */
  pointer-events: auto;
}

/* Hero type: title in TT Commons DemiBold (600, stand-in Figtree), body in
   regular (400). Uniform weight — no bold/italic emphasis line. */
.hero h1 {
  font-size: 4rem;
  line-height: 1.05;
  margin-bottom: 1.5rem;
  font-family: var(--font-heading);
  font-weight: 600;
  letter-spacing: -0.02em;
  color: var(--color-text-white);
}

.hero h1 strong {
  font-weight: 600;
  display: block;
}

.hero p {
  font-size: 1.35rem;
  margin-bottom: 2.75rem;
  color: rgba(255, 255, 255, 0.9);
  font-weight: 400;
}

.hero-ctas {
  display: flex;
  justify-content: center;
  gap: 1.5rem;
}

.hero-content .google-rating-badge {
  margin-top: 1.75rem;
}

.cta-banner-actions {
  display: flex;
  justify-content: center;
  flex-wrap: wrap;
  gap: 1rem;
}

/* --- THEMATIC QUOTE SECTION (Puerto Surf Style) --- */
.coastal-quote-section {
  background-color: #FAF6F0;
  text-align: center;
  padding: 5.5rem 0;
  position: relative;
  border-top: 1px solid rgba(21, 62, 92, 0.05);
  border-bottom: 1px solid rgba(21, 62, 92, 0.05);
}

.coastal-quote-container {
  max-width: 680px;
  margin: 0 auto;
  padding: 0 2rem;
}

/* Headline as a Cooper BT highlight (brandbook §09: accent only, short
   phrases); the supporting line stays TT Commons (Figtree) medium, small
   and centered. */
.coastal-quote-text {
  font-family: var(--font-accent);
  font-size: 1.95rem;
  font-weight: 300;
  color: var(--color-sea-primary);
  line-height: 1.3;
  margin-bottom: 1.5rem;
  position: relative;
}

/* Keep the short English highlight on a single line (brandbook §09);
   the longer Spanish line wraps normally. */
.coastal-quote-text span[lang="en"] {
  white-space: nowrap;
}

.coastal-quote-text::before {
  content: '“';
  font-family: var(--font-accent);
  font-size: 7rem;
  color: rgba(176, 85, 49, 0.15);
  position: absolute;
  top: -3.5rem;
  left: 50%;
  transform: translateX(-50%);
  line-height: 1;
}

.coastal-quote-author {
  font-family: var(--font-body);
  font-size: 1rem;
  font-weight: 500;
  line-height: 1.6;
  color: var(--color-copper-dark);
}

/* --- INTERACTIVE SPLIT PANELS (The Wave Style) --- */
.split-panels {
  display: flex;
  width: 100%;
  min-height: 580px;
  margin-top: 3.5rem;
  border-radius: var(--border-radius-md);
  overflow: hidden;
  box-shadow: var(--shadow-lg);
  background-color: var(--color-sea-dark);
}

.panel {
  position: relative;
  flex: 1;
  display: flex;
  align-items: flex-end;
  padding: 3.5rem 3rem;
  color: var(--color-text-white);
  background-size: cover;
  background-position: center;
  transition: flex 0.7s cubic-bezier(0.25, 1, 0.3, 1);
  cursor: pointer;
  overflow: hidden;
}

.panel::after {
  content: '';
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  background: linear-gradient(to bottom, rgba(10, 28, 42, 0.15) 0%, rgba(10, 28, 42, 0.85) 100%);
  z-index: 1;
  transition: var(--transition-smooth);
}

.panel:hover::after, .panel.active::after {
  background: linear-gradient(to bottom, rgba(10, 28, 42, 0.05) 0%, rgba(10, 28, 42, 0.93) 100%);
}

.panel:hover, .panel.active {
  flex: 1;
}

.panel-content {
  position: relative;
  z-index: 2;
  width: 100%;
  transform: translateY(45px);
  transition: transform 0.6s cubic-bezier(0.25, 1, 0.3, 1);
}

.panel:hover .panel-content, .panel.active .panel-content {
  transform: translateY(0);
}

.panel-badge {
  display: inline-block;
  color: var(--color-copper);
  font-size: 0.8rem;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: 0.1em;
  margin-bottom: 0.5rem;
}

.panel h3 {
  font-size: 2.25rem;
  margin-bottom: 0.5rem;
  font-style: italic;
  font-weight: 300;
}

.panel h3 strong {
  font-style: normal;
  font-weight: 800;
  display: block;
}

.panel-details {
  opacity: 0;
  max-height: 0;
  overflow: hidden;
  transition: opacity 0.5s ease, max-height 0.5s ease;
  color: rgba(255, 255, 255, 0.85);
  font-size: 0.95rem;
  margin-bottom: 1.75rem;
}

.panel:hover .panel-details, .panel.active .panel-details {
  opacity: 1;
  max-height: 180px;
  margin-top: 0.5rem;
}

/* --- COMBINED DATES + ROOM WIDGET (Camps Page) --- */
.camp-combo-layout {
  display: grid;
  grid-template-columns: 1fr 1.7fr;
  gap: 3rem;
  align-items: start;
}

.camp-combo-col:first-child {
  border-right: 1px solid rgba(21, 62, 92, 0.08);
  padding-right: 3rem;
}

.combo-step-label {
  display: flex;
  align-items: baseline;
  gap: 0.75rem;
  margin-bottom: 1.5rem;
}

.combo-step-num {
  font-family: var(--font-heading);
  font-size: 1.5rem;
  font-weight: 800;
  color: var(--color-copper-dark);
  line-height: 1;
}

.combo-step-text {
  font-size: 1.1rem;
  font-weight: 800;
  color: var(--color-sea-primary);
  text-transform: uppercase;
  letter-spacing: 0.03em;
}

.combo-discount-badge {
  display: inline-flex;
  align-items: center;
  gap: 0.6rem;
  margin-top: 1.5rem;
  padding: 0.75rem 1.5rem;
  background-color: #ffffff;
  border: 1px solid rgba(21, 62, 92, 0.08);
  border-radius: 999px;
  box-shadow: var(--shadow-sm);
  color: var(--color-text-dark);
  font-size: 0.9rem;
}

.combo-discount-badge svg {
  color: var(--color-copper-dark);
  flex-shrink: 0;
}

.combo-discount-badge strong {
  color: var(--color-copper-dark);
}

.camp-combo-summary {
  display: flex;
  align-items: center;
  gap: 1.5rem;
  margin-top: 1.5rem;
  padding: 1.5rem 2rem;
  background-color: rgba(176, 85, 49, 0.05);
  border-radius: var(--border-radius-md);
  border: 1px solid rgba(176, 85, 49, 0.15);
}

.combo-summary-item {
  display: flex;
  align-items: center;
  gap: 0.85rem;
}

.combo-summary-total {
  margin-left: auto;
}

.combo-summary-icon {
  color: var(--color-copper-dark);
  flex-shrink: 0;
}

.combo-summary-icon.brand-mask {
  width: 20px;
  height: 20px;
}

.combo-summary-text {
  display: flex;
  flex-direction: column;
  gap: 0.15rem;
}

.combo-summary-title {
  font-size: 1rem;
  font-weight: 700;
  color: var(--color-sea-primary);
}

.combo-summary-sub {
  font-size: 0.8rem;
  color: var(--color-text-light);
  font-weight: 600;
}

.combo-summary-total .combo-summary-sub {
  text-transform: uppercase;
  letter-spacing: 0.05em;
}

.combo-summary-price {
  font-size: 1.4rem;
  font-weight: 800;
  color: var(--color-copper-dark);
}

.combo-summary-divider {
  width: 1px;
  align-self: stretch;
  background-color: rgba(176, 85, 49, 0.15);
}

@media (max-width: 1024px) {
  .camp-combo-layout {
    grid-template-columns: 1fr;
  }

  .camp-combo-col:first-child {
    border-right: none;
    padding-right: 0;
  }

  .camp-combo-summary {
    flex-wrap: wrap;
  }

  .combo-summary-total {
    margin-left: 0;
    width: 100%;
  }
}

/* --- INTERACTIVE ROOM SELECTOR (Camps Page) --- */
.room-selector-layout {
  display: flex;
  flex-direction: column;
  gap: 1.5rem;
}

.room-tabs {
  display: flex;
  flex-direction: row;
  gap: 0.75rem;
}

.room-tab-btn {
  flex: 1;
  background-color: var(--color-text-white);
  border: 1px solid rgba(21, 62, 92, 0.08);
  padding: 1rem 1.25rem;
  border-radius: var(--border-radius-md);
  text-align: center;
  cursor: pointer;
  box-shadow: var(--shadow-sm);
  transition: var(--transition-smooth);
}

.room-tab-btn:hover {
  border-color: rgba(21, 62, 92, 0.2);
  box-shadow: var(--shadow-md);
}

.room-tab-btn.active {
  background-color: var(--color-sea-dark);
  border-color: var(--color-sea-dark);
  box-shadow: var(--shadow-md);
}

.room-tab-btn h4 {
  font-size: 1rem;
  font-weight: 700;
  color: var(--color-sea-primary);
  margin: 0;
}

.room-tab-btn.active h4 {
  color: var(--color-text-white);
}

.room-preview-display {
  background-color: var(--color-text-white);
  border-radius: var(--border-radius-md);
  box-shadow: var(--shadow-lg);
  border: 1px solid rgba(21, 62, 92, 0.05);
  padding: 2rem;
}

.room-preview-media-row {
  display: flex;
  gap: 2rem;
  align-items: stretch;
}

.room-preview-image {
  width: 320px;
  flex-shrink: 0;
  border-radius: var(--border-radius-md);
  background-size: cover;
  background-position: center;
  background-color: var(--color-sea-light);
  position: relative;
  overflow: hidden;
  transition: background-image 0.5s ease-in-out;
}

/* No photo (missing path or 404, via app.js "is-empty"): drop the box
   entirely instead of leaving a blank rectangle. app.js pairs this with
   ".no-photo" on .room-preview-media-row (enlarges title/description below)
   and a bigger #room-price-display. */
.room-preview-image.is-empty {
  display: none;
}

#room-price-display {
  transition: font-size 0.3s ease-in-out;
}

.room-preview-media-row.no-photo .room-preview-header h3 {
  font-size: 2.3rem;
}

.room-preview-media-row.no-photo .room-preview-header-block p {
  font-size: 1.15rem;
}

.room-preview-header-block {
  flex: 1;
  display: flex;
  flex-direction: column;
  justify-content: center;
}

.room-preview-header {
  margin-bottom: 1rem;
}

.room-preview-header h3 {
  color: var(--color-sea-primary);
  font-size: 1.75rem;
  margin-bottom: 0.5rem;
}

.room-preview-header .room-count {
  font-size: 0.9rem;
  color: var(--color-sea-primary);
  font-weight: 700;
}

.room-preview-footer {
  margin-top: 1.75rem;
  border-top: 1px solid rgba(21, 62, 92, 0.08);
  padding-top: 1.75rem;
}

.room-price-row {
  display: flex;
  justify-content: space-between;
  align-items: center;
  gap: 1rem;
  flex-wrap: wrap;
}

.room-preview-details {
  display: flex;
  flex-wrap: wrap;
  gap: 1.5rem 2.5rem;
  margin-top: 1.5rem;
}

.room-preview-details li {
  display: flex;
  align-items: center;
  gap: 0.75rem;
  font-size: 0.95rem;
}

.room-preview-details li::before {
  content: '✓';
  color: var(--color-copper-dark);
  font-weight: 700;
}

@media (max-width: 640px) {
  .room-preview-media-row {
    flex-direction: column;
  }

  .room-preview-image {
    width: 100%;
    height: 220px;
  }
}

/* --- SECTIONS --- */
section {
  padding: 7rem 0;
}

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

.section-bg-alt {
  background-color: #FAF7F2;
}

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

.section-bg-dark h2 {
  color: var(--color-text-white);
}

.section-header {
  text-align: center;
  max-width: 750px;
  margin: 0 auto 4.5rem;
}

/* Mockup eyebrow ("What we offer", "Hourly Rate"): terracota, sentence case —
   caps are a social-media-only treatment in the brandbook. */
.section-header .tagline {
  color: var(--color-copper-dark);
  font-weight: 500;
  font-size: 1.05rem;
  margin-bottom: 0.75rem;
  display: block;
}

.section-bg-dark .section-header .tagline {
  color: var(--color-copper);
}

.section-header h2 {
  margin-bottom: 1rem;
}

/* Same title-to-text breathing room as .section-header, for the split-grid
   layout used by "Hosted by...", "A Premium, Laid-Back Getaway", etc. */
.grid-content-wrapper h2 {
  margin-bottom: 1rem;
}

/* --- GRID LAYOUTS --- */
.split-grid {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 4.5rem;
  align-items: center;
}

.split-grid-reverse .grid-image-wrapper {
  grid-column: 2;
}

.split-grid-reverse .grid-content-wrapper {
  grid-column: 1;
  grid-row: 1;
}

.grid-image-wrapper {
  position: relative;
  border-radius: var(--border-radius-md);
  overflow: hidden;
  box-shadow: var(--shadow-md);
}

.grid-image-wrapper img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  transition: var(--transition-smooth);
}

.grid-image-wrapper:hover img {
  transform: scale(1.02);
}

/* --- THE PEOPLE BEHIND (about — crew): left intro column + card row --- */
.people-behind-grid {
  display: grid;
  grid-template-columns: minmax(220px, 0.85fr) 2.6fr;
  gap: 4rem;
  align-items: start;
}

.people-behind-intro {
  max-width: 22rem;
}

.people-behind-intro .tagline {
  color: var(--color-copper-dark);
  font-weight: 500;
  font-size: 1.05rem;
  margin-bottom: 0.75rem;
  display: block;
}

.people-behind-intro h2 {
  font-size: clamp(2.4rem, 3.6vw, 3.25rem);
  line-height: 1.05;
  letter-spacing: -0.02em;
  margin-bottom: 1.25rem;
}

.people-behind-intro p {
  color: var(--color-text-light);
  font-size: 1.02rem;
  line-height: 1.7;
  margin-bottom: 0;
}

.people-behind-cards {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 2.5rem;
}

.people-behind-card-media {
  border-radius: var(--border-radius-md);
  overflow: hidden;
  aspect-ratio: 4 / 3;
  box-shadow: var(--shadow-md);
  margin-bottom: 1.5rem;
}

.people-behind-card-media img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  transition: var(--transition-smooth);
}

.people-behind-card:hover .people-behind-card-media img {
  transform: scale(1.02);
}

.people-behind-card h3 {
  font-size: 1.4rem;
  margin-bottom: 0.75rem;
}

.people-behind-card p {
  color: var(--color-text-light);
  line-height: 1.7;
  margin-bottom: 0;
}

/* --- OUR HOSTS (home welcome intro) --- */
.our-hosts-grid {
  gap: 5rem;
}

.our-hosts-content {
  max-width: 30rem;
}

.our-hosts-eyebrow {
  display: flex;
  align-items: center;
  gap: 0.7rem;
  margin-bottom: 1.75rem;
  font-family: var(--font-accent);
  font-weight: 300;
  font-style: italic;
  font-size: 0.95rem;
  letter-spacing: 0.18em;
  text-transform: uppercase;
  color: var(--color-copper-dark);
}

.our-hosts-eyebrow::before {
  content: "";
  width: 10px;
  height: 10px;
  border-radius: 50%;
  background-color: var(--color-yellow);
  flex-shrink: 0;
}

.our-hosts-content h2 {
  font-size: clamp(2.4rem, 4vw, 3.35rem);
  font-weight: 700;
  line-height: 1.08;
  letter-spacing: -0.02em;
  margin-bottom: 0;
}

.our-hosts-rule {
  display: block;
  width: 180px;
  height: 2px;
  margin: 2rem 0 1.75rem;
  background-color: var(--color-copper);
}

.our-hosts-content p {
  color: var(--color-text-light);
  font-size: 1.05rem;
  line-height: 1.75;
  margin-bottom: 0;
}

.our-hosts-image {
  aspect-ratio: 4 / 3;
}

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

  .our-hosts-grid {
    gap: 2.5rem;
  }

  .our-hosts-content {
    max-width: none;
  }

  .our-hosts-content h2 {
    font-size: clamp(2rem, 8vw, 2.6rem);
  }
}

/* --- TESTIMONIALS --- */
.testimonials-grid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(280px, 1fr));
  gap: 2rem;
  margin-top: 2rem;
}

.testimonial-card {
  background-color: var(--color-text-white);
  border-radius: var(--border-radius-md);
  padding: 2.5rem 2rem;
  box-shadow: var(--shadow-sm);
  display: flex;
  flex-direction: column;
  position: relative;
  transition: var(--transition-smooth);
}

.testimonial-card:hover {
  transform: translateY(-3px);
  box-shadow: var(--shadow-md);
}

.testimonial-quote {
  font-size: 0.95rem;
  font-style: italic;
  margin-bottom: 2rem;
  flex-grow: 1;
}

.testimonial-quote::before {
  content: '“';
  font-family: var(--font-heading);
  font-size: 4rem;
  color: rgba(212, 122, 85, 0.15);
  position: absolute;
  top: 0.5rem;
  left: 1.5rem;
  line-height: 1;
}

.testimonial-author {
  display: flex;
  align-items: center;
  gap: 1rem;
  border-top: 1px solid rgba(21, 62, 92, 0.05);
  padding-top: 1.25rem;
}

.testimonial-author-info h4 {
  font-size: 0.95rem;
  font-weight: 700;
  color: var(--color-sea-primary);
}

.testimonial-author-info span {
  font-size: 0.8rem;
  color: var(--color-text-light);
  display: block;
}

/* --- CHRONOLOGICAL TIMELINE (A Day at the Camp) --- */
.timeline {
  position: relative;
  max-width: 800px;
  margin: 0 auto;
  padding: 1rem 0;
}

.timeline::before {
  content: '';
  position: absolute;
  top: 0;
  bottom: 0;
  left: 19px;
  width: 2px;
  background-color: rgba(212, 122, 85, 0.3);
}

.timeline-item {
  position: relative;
  display: flex;
  align-items: flex-start;
  gap: 1.25rem;
  margin-bottom: 0.85rem;
}

/* Time sits on the same baseline as the title ("7:00 AM — Rise & Shine")
   instead of occupying its own gutter column, which keeps each row compact. */
.timeline-heading {
  display: flex;
  align-items: baseline;
  flex-wrap: wrap;
  gap: 0.5rem;
  margin-bottom: 0.5rem;
}

.timeline-time {
  font-family: var(--font-heading);
  font-size: 1rem;
  font-weight: 700;
  color: var(--color-copper-dark);
  white-space: nowrap;
  transition: color 0.3s ease;
}

/* "How Lessons Work" (school.html) lays .timeline-time out as a direct
   sibling of .timeline-dot rather than nested in .timeline-heading, so the
   flex-start row alignment left its "—" hugging the top of the dot instead
   of its vertical middle. `align-self: center` alone centers against the
   row's cross-axis size, which is set by the much taller .timeline-content
   card, not the dot — so match the dot's own height (38px) and center
   within that instead. */
.timeline-item > .timeline-time {
  align-self: flex-start;
  height: 38px;
  display: flex;
  align-items: center;
}

.timeline-time::after {
  content: '—';
  margin-left: 0.5rem;
  color: rgba(21, 62, 92, 0.35);
}

/* "The Whole Day at a Glance" (camps.html): the time stays inside the card,
   so the dash instead sits as its own connector between the dot and the
   card, matching the dot's height so it lines up at the same height. */
[data-section-id="camp-day-timeline"] .timeline-time::after {
  display: none;
}

[data-section-id="camp-day-timeline"] .timeline-connector {
  flex-shrink: 0;
  align-self: flex-start;
  height: 38px;
  display: flex;
  align-items: center;
  font-size: 1rem;
  font-weight: 700;
  color: rgba(21, 62, 92, 0.35);
  margin: 0 -0.5rem;
}

.timeline-dot {
  position: relative;
  flex-shrink: 0;
  width: 38px;
  height: 38px;
  background-color: var(--color-text-white);
  border: 2px solid var(--color-copper-dark);
  border-radius: 50%;
  z-index: 2;
  transition: var(--transition-smooth);
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 1.15rem;
  box-shadow: var(--shadow-sm);
}

.timeline-item:hover .timeline-dot,
.timeline-item.active .timeline-dot {
  background-color: var(--color-sea-light);
  border-color: var(--color-sea-primary);
  box-shadow: 0 0 15px rgba(212, 122, 85, 0.4);
  transform: scale(1.12);
}

.timeline-item.active .timeline-content {
  border-color: rgba(212, 122, 85, 0.3);
  box-shadow: var(--shadow-md);
  background-color: var(--color-text-white);
}

.timeline-item.active .timeline-time {
  color: var(--color-sea-primary);
  font-weight: 800;
}

.timeline-content {
  flex: 1;
  min-width: 0;
  background-color: var(--color-sand-card);
  backdrop-filter: blur(10px);
  border: 1px solid rgba(21, 62, 92, 0.05);
  border-radius: var(--border-radius-md);
  padding: 0.9rem 1.35rem;
  box-shadow: var(--shadow-sm);
}

.timeline-content h4 {
  font-size: 1.1rem;
  margin-bottom: 0;
  color: var(--color-sea-primary);
  display: inline;
}

.timeline-content p {
  font-size: 0.92rem;
  line-height: 1.5;
  color: var(--color-text-light);
  margin-bottom: 0;
}

/* --- A DAY AT THE CAMP — horizontal photo-card carousel (camps.html) --- */
.camp-day {
  margin-top: 2.5rem;
}

.camp-day-viewport {
  position: relative;
}

.camp-day-track {
  display: grid;
  grid-auto-flow: column;
  grid-auto-columns: 300px;
  gap: 1.25rem;
  overflow-x: auto;
  scroll-snap-type: x mandatory;
  scroll-behavior: smooth;
  padding: 0.5rem 0.25rem 1.5rem;
  scrollbar-width: none;
  -webkit-overflow-scrolling: touch;
  cursor: grab;
}

.camp-day-track::-webkit-scrollbar {
  display: none;
}

.camp-day-track.is-dragging {
  scroll-snap-type: none;
  scroll-behavior: auto;
  cursor: grabbing;
}

.camp-day-card {
  scroll-snap-align: start;
  display: flex;
  flex-direction: column;
}

.camp-day-card__media {
  position: relative;
  border-radius: var(--border-radius-md);
  overflow: hidden;
  box-shadow: var(--shadow-sm);
}

.camp-day-card__media img {
  display: block;
  width: 100%;
  height: 240px;
  object-fit: cover;
  user-select: none;
  -webkit-user-drag: none;
}

.camp-day-card__tab {
  position: absolute;
  top: 0;
  left: 0;
  display: flex;
  flex-direction: column;
  gap: 0.1rem;
  padding: 0.55rem 1rem 0.65rem;
  background: var(--color-sand-card);
  border-bottom-right-radius: var(--border-radius-md);
}

.camp-day-card__time {
  font-family: var(--font-heading);
  font-size: 0.78rem;
  font-weight: 700;
  letter-spacing: 0.04em;
  color: var(--color-copper-dark);
}

.camp-day-card__title {
  font-family: var(--font-heading);
  font-size: 1.05rem;
  font-weight: 650;
  line-height: 1.15;
  color: var(--color-sea-primary);
}

.camp-day-card__caption {
  margin: 0.85rem 0.15rem 0;
  font-size: 0.9rem;
  line-height: 1.5;
  color: var(--color-text-light);
}

.camp-day-nav {
  position: absolute;
  top: 120px;
  transform: translateY(-50%);
  width: 2.75rem;
  height: 2.75rem;
  border: none;
  border-radius: 50%;
  background: #fff;
  color: var(--color-sea-dark);
  cursor: pointer;
  display: flex;
  align-items: center;
  justify-content: center;
  box-shadow: var(--shadow-md);
  transition: var(--transition-smooth);
  z-index: 3;
}

.camp-day-nav:hover {
  background: var(--color-sand-card);
}

.camp-day-nav svg {
  display: block;
  width: 1.25rem;
  height: 1.25rem;
  fill: none;
  stroke: currentColor;
  stroke-width: 2.25;
  stroke-linecap: round;
  stroke-linejoin: round;
}

.camp-day-nav--prev {
  left: 0.25rem;
}

.camp-day-nav--next {
  right: 0.25rem;
}

.camp-day-nav:focus-visible {
  outline: 3px solid var(--color-copper-dark);
  outline-offset: 2px;
}

@media (max-width: 768px) {
  .camp-day-track {
    grid-auto-columns: 78vw;
    gap: 1rem;
  }

  .camp-day-nav {
    display: none;
  }
}

@media (prefers-reduced-motion: reduce) {
  .camp-day-track {
    scroll-behavior: auto;
  }
}

/* --- CAMP DAY VIDEO (replaces the timeline: large, non-fullscreen, click for sound) --- */
.camp-day-video {
  position: relative;
  width: 100%;
  max-width: 1100px;
  margin: 0 auto;
  border-radius: var(--border-radius-md);
  overflow: hidden;
  box-shadow: var(--shadow-lg);
  background-color: #0c1b26;
  cursor: pointer;
}

.camp-day-video__media {
  display: block;
  width: 100%;
  aspect-ratio: 16 / 9;
  max-height: 78vh;
  object-fit: cover;
  background-color: #0c1b26;
}

/* Once the real clip's dimensions are known, JS sets --media-ar and this
   letterboxes the video instead of cropping it (handles portrait clips). */
.camp-day-video.has-media .camp-day-video__media {
  aspect-ratio: var(--media-ar, 16 / 9);
  object-fit: contain;
}

/* Sound toggle pill, bottom-left over the video */
.camp-day-video__sound {
  position: absolute;
  left: 1rem;
  bottom: 1rem;
  display: inline-flex;
  align-items: center;
  gap: 0.5rem;
  padding: 0.55rem 0.95rem;
  border: 0;
  border-radius: 999px;
  background: rgba(12, 27, 38, 0.6);
  backdrop-filter: blur(6px);
  -webkit-backdrop-filter: blur(6px);
  color: #fff;
  font-family: var(--font-body, inherit);
  font-size: 0.85rem;
  font-weight: 600;
  line-height: 1;
  cursor: pointer;
  transition: background 0.2s ease, opacity 0.3s ease;
}

.camp-day-video__sound:hover {
  background: rgba(12, 27, 38, 0.8);
}

.camp-day-video__sound-icon {
  width: 16px;
  height: 16px;
  flex: none;
  background-color: currentColor;
  -webkit-mask: no-repeat center / contain;
  mask: no-repeat center / contain;
  /* muted speaker */
  -webkit-mask-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cpath d='M11 5 6 9H2v6h4l5 4V5zM23 9l-6 6M17 9l6 6' fill='none' stroke='%23000' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E");
  mask-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cpath d='M11 5 6 9H2v6h4l5 4V5zM23 9l-6 6M17 9l6 6' fill='none' stroke='%23000' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E");
}

.camp-day-video.is-unmuted .camp-day-video__sound-icon {
  /* speaker with waves */
  -webkit-mask-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cpath d='M11 5 6 9H2v6h4l5 4V5zM15.5 8.5a5 5 0 0 1 0 7M18.5 5.5a9 9 0 0 1 0 13' fill='none' stroke='%23000' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E");
  mask-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cpath d='M11 5 6 9H2v6h4l5 4V5zM15.5 8.5a5 5 0 0 1 0 7M18.5 5.5a9 9 0 0 1 0 13' fill='none' stroke='%23000' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E");
}

.camp-day-video.is-unmuted .camp-day-video__sound-label {
  display: none;
}

@media (max-width: 640px) {
  .camp-day-video__media {
    max-height: 70vh;
  }
  .camp-day-video__sound {
    font-size: 0.8rem;
    padding: 0.5rem 0.8rem;
  }
}

/* --- PRICING GRID --- */
.pricing-grid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(300px, 1fr));
  gap: 2rem;
  margin-top: 3rem;
  align-items: stretch;
}

.pricing-card {
  background-color: var(--color-text-white);
  border-radius: var(--border-radius-md);
  border: 1px solid rgba(21, 62, 92, 0.05);
  padding: 3rem 2rem;
  box-shadow: var(--shadow-sm);
  display: flex;
  flex-direction: column;
  position: relative;
  transition: var(--transition-smooth);
}

.pricing-card .btn {
  margin-top: auto;
}

.pricing-card.featured {
  border: 2px solid var(--color-copper-dark);
  box-shadow: var(--shadow-md);
}

.featured-tag {
  position: absolute;
  top: 1.5rem;
  right: 1.5rem;
  background-color: var(--color-copper-dark);
  color: var(--color-text-white);
  font-size: 0.75rem;
  font-weight: 700;
  text-transform: uppercase;
  padding: 0.25rem 0.75rem;
  border-radius: 20px;
}

.pricing-card h3 {
  font-size: 1.5rem;
  color: var(--color-sea-primary);
  margin-bottom: 0.5rem;
}

.pricing-card .room-count {
  font-size: 0.85rem;
  color: var(--color-text-light);
  margin-bottom: 1.5rem;
  display: block;
}

.pricing-price {
  font-size: 3rem;
  font-weight: 800;
  color: var(--color-text-dark);
  margin-bottom: 1.5rem;
  line-height: 1;
}

.pricing-price span {
  font-size: 1rem;
  color: var(--color-text-light);
  font-weight: 500;
}

.pricing-features {
  margin: 2rem 0 2.5rem;
  border-top: 1px solid rgba(21, 62, 92, 0.05);
  padding-top: 1.5rem;
  flex-grow: 1;
}

.pricing-features li {
  display: flex;
  align-items: center;
  gap: 0.75rem;
  font-size: 0.95rem;
  margin-bottom: 0.75rem;
  color: var(--color-text-dark);
}

.pricing-features li::before {
  content: '✓';
  color: var(--color-copper-dark);
  font-weight: 700;
}

.pricing-note {
  font-size: 0.85rem;
  color: var(--color-text-light);
  text-align: center;
  margin-top: 1rem;
}

/* --- FAQ ACCORDION --- */
.faq-accordion {
  max-width: 800px;
  margin: 0 auto;
}

.faq-item {
  background-color: var(--color-text-white);
  border: 1px solid rgba(21, 62, 92, 0.05);
  border-radius: var(--border-radius-sm);
  margin-bottom: 1rem;
  overflow: hidden;
  box-shadow: var(--shadow-sm);
  transition: var(--transition-smooth);
}

.faq-question {
  display: flex;
  justify-content: space-between;
  align-items: center;
  padding: 1.5rem 2rem;
  cursor: pointer;
  font-family: var(--font-heading);
  font-size: 1.15rem;
  font-weight: 600;
  color: var(--color-sea-primary);
  user-select: none;
}

.faq-question::after {
  content: '+';
  font-size: 1.5rem;
  font-weight: 300;
  color: var(--color-copper-dark);
  transition: var(--transition-smooth);
}

.faq-item.open .faq-question::after {
  transform: rotate(45deg);
}

.faq-answer {
  max-height: 0;
  overflow: hidden;
  transition: max-height 0.3s cubic-bezier(0, 1, 0, 1);
  background-color: #FAF9F6;
}

.faq-answer-inner {
  padding: 1.5rem 2rem;
  border-top: 1px solid rgba(21, 62, 92, 0.04);
  font-size: 0.95rem;
  color: var(--color-text-light);
}

.faq-answer-inner ul {
  list-style: disc;
  margin-left: 1.5rem;
  margin-top: 0.5rem;
}

.faq-answer-inner li {
  margin-bottom: 0.5rem;
}

/* --- CALL TO ACTION BANNERS --- */
.cta-banner {
  text-align: center;
  background-color: var(--color-sea-primary);
  color: var(--color-text-white);
  border-radius: var(--border-radius-md);
  padding: 4.5rem 3rem;
  box-shadow: var(--shadow-lg);
  position: relative;
  overflow: hidden;
}

.cta-banner::before {
  display: none;
}

.cta-banner h2 {
  font-size: 2.5rem;
  margin-bottom: 1rem;
}

.cta-banner p {
  font-size: 1.15rem;
  color: rgba(255, 255, 255, 0.9);
  max-width: 600px;
  margin: 0 auto 2.5rem;
}

/* --- FOOTER --- */
footer {
  background-color: var(--color-sea-dark);
  color: rgba(255, 255, 255, 0.85);
  padding: 5rem 0 2rem;
  border-top: 1px solid rgba(255, 255, 255, 0.05);
}

.footer-grid {
  display: grid;
  grid-template-columns: 2fr 1fr 1fr 1.5fr;
  gap: 3rem;
  margin-bottom: 4rem;
}

.footer-col h3 {
  font-family: var(--font-body);
  font-weight: 700;
  font-size: 1rem;
  text-transform: uppercase;
  letter-spacing: 0.05em;
  color: var(--color-text-white);
  margin-bottom: 1.5rem;
}

.footer-col.brand h2 {
  font-family: var(--font-heading);
  font-size: 1.75rem;
  color: var(--color-text-white);
  margin-bottom: 1rem;
}

.footer-col.brand p {
  color: rgba(255, 255, 255, 0.65);
  font-size: 0.95rem;
  margin-bottom: 1.5rem;
}

.footer-col.brand .social-links {
  display: flex;
  gap: 1rem;
}

.footer-col.brand .social-links a {
  width: 36px;
  height: 36px;
  background-color: rgba(255, 255, 255, 0.05);
  border-radius: 50%;
  display: flex;
  align-items: center;
  justify-content: center;
  transition: var(--transition-smooth);
}

.footer-col.brand .social-links a:hover {
  background-color: var(--color-copper);
  color: var(--color-text-white);
  transform: translateY(-2px);
}

.footer-col ul li {
  margin-bottom: 0.75rem;
}

.footer-col ul li a {
  color: rgba(255, 255, 255, 0.65);
  font-size: 0.95rem;
}

.footer-col ul li a:hover {
  color: var(--color-copper);
  padding-left: 4px;
}

.footer-contact-info p {
  color: rgba(255, 255, 255, 0.65);
  font-size: 0.95rem;
  margin-bottom: 0.75rem;
}

.footer-contact-info a {
  display: flex;
  align-items: center;
  gap: 0.5rem;
}

.footer-bottom {
  border-top: 1px solid rgba(255, 255, 255, 0.05);
  padding-top: 2rem;
  display: flex;
  justify-content: space-between;
  align-items: center;
  font-size: 0.85rem;
  color: rgba(255, 255, 255, 0.5);
}



/* --- MODAL POPUPS (WETRAVEL SIMULATOR) --- */
.modal-overlay {
  display: none;
  position: fixed;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  background-color: rgba(10, 28, 42, 0.65);
  backdrop-filter: blur(8px);
  z-index: 2000;
  align-items: center;
  justify-content: center;
  opacity: 0;
  transition: opacity 0.3s ease;
}

.modal-overlay.open {
  display: flex;
  opacity: 1;
}

.modal-container {
  background-color: var(--color-sand-bg);
  border-radius: var(--border-radius-md);
  width: 95%;
  max-width: 600px;
  max-height: 90vh;
  overflow-y: auto;
  box-shadow: var(--shadow-lg);
  border: 1px solid rgba(21, 62, 92, 0.1);
  position: relative;
  transform: translateY(20px);
  transition: transform 0.3s ease;
}

.modal-overlay.open .modal-container {
  transform: translateY(0);
}

.modal-close {
  position: absolute;
  top: 1.5rem;
  right: 1.5rem;
  width: 32px;
  height: 32px;
  border-radius: 50%;
  background-color: var(--color-sea-light);
  border: none;
  cursor: pointer;
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 1.25rem;
  color: var(--color-sea-primary);
  font-weight: bold;
  transition: var(--transition-smooth);
}

.modal-close:hover {
  background-color: var(--color-copper);
  color: var(--color-text-white);
}

/* --- SUCCESS CONFIRMATION MODAL (replaces native alert()) --- */
.success-modal-overlay {
  z-index: 3000;
}

.success-modal-container {
  max-width: 420px;
  padding: 2.75rem 2rem 2.25rem;
  text-align: center;
}

.success-modal-icon {
  width: 56px;
  height: 56px;
  margin: 0 auto 1.25rem;
  border-radius: 50%;
  background-color: rgba(176, 85, 49, 0.12);
  color: var(--color-copper);
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 1.5rem;
  font-weight: 700;
}

.success-modal-title {
  font-family: var(--font-heading);
  font-size: 1.4rem;
  font-weight: 700;
  color: var(--color-sea-dark);
  margin: 0 0 0.75rem;
}

.success-modal-text {
  font-family: var(--font-body);
  font-size: 1rem;
  color: var(--color-text-light);
  line-height: 1.5;
  margin: 0 0 1.75rem;
}

.success-modal-container .success-modal-btn {
  width: 100%;
}

.wetravel-header {
  background-color: #F8F9FA;
  padding: 2rem;
  border-bottom: 1px solid #E9ECEF;
  text-align: center;
}

.wetravel-header h3 {
  color: var(--color-sea-primary);
  margin-bottom: 0.5rem;
  font-size: 1.35rem;
  font-family: var(--font-body);
  font-weight: 700;
}

.wetravel-header .wetravel-logo {
  font-size: 0.8rem;
  font-weight: 700;
  color: #3C64B1;
  text-transform: uppercase;
  letter-spacing: 0.15em;
  display: block;
  margin-bottom: 0.5rem;
}

.wetravel-body {
  padding: 2.5rem 2rem;
}

.form-group {
  margin-bottom: 1.5rem;
}

.form-group label {
  display: block;
  font-size: 0.85rem;
  font-weight: 700;
  color: var(--color-text-dark);
  margin-bottom: 0.5rem;
}

.form-control {
  width: 100%;
  padding: 0.85rem 1rem;
  font-family: var(--font-body);
  font-size: 0.95rem;
  background-color: var(--color-text-white);
  border: 1px solid rgba(21, 62, 92, 0.15);
  border-radius: var(--border-radius-sm);
  outline: none;
  color: var(--color-text-dark);
  transition: var(--transition-smooth);
}

.form-control:focus {
  border-color: var(--color-copper);
  box-shadow: 0 0 0 3px rgba(212, 122, 85, 0.15);
}

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

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

.phone-input-group {
  display: flex;
  gap: 0.5rem;
}

.phone-input-group .phone-code {
  flex: 0 0 40%;
  padding-right: 1.75rem;
}

.phone-input-group .phone-number {
  flex: 1 1 auto;
  min-width: 0;
}

.phone-hint {
  margin: 0.4rem 0 0;
  font-size: 0.75rem;
  color: var(--color-text-light);
}

/* Below this width, two form-control columns side by side (e.g. Kiteboarding
   Level + Where did you hear about us, or the phone country code + number)
   get too narrow to show their own label text and end up clipped/overlapping
   the select arrow icon. */
@media (max-width: 640px) {
  .form-row-2 {
    grid-template-columns: 1fr;
    gap: 0;
  }
}

.wetravel-footer {
  padding: 0 2rem 2.5rem;
}

.wetravel-security {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 0.5rem;
  font-size: 0.75rem;
  color: var(--color-text-light);
  margin-top: 1.25rem;
}

.wetravel-security::before {
  content: '🔒';
}

/* --- GALLERY GRID --- */
.gallery-grid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(280px, 1fr));
  gap: 1.5rem;
}

.gallery-item {
  position: relative;
  border-radius: var(--border-radius-md);
  overflow: hidden;
  box-shadow: var(--shadow-sm);
  aspect-ratio: 4 / 3;
}

.gallery-item img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  transition: var(--transition-smooth);
}

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

.gallery-item-overlay {
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  background: linear-gradient(to bottom, transparent 30%, rgba(10, 28, 42, 0.75) 100%);
  display: flex;
  align-items: flex-end;
  padding: 1.5rem;
  opacity: 0;
  transition: var(--transition-smooth);
}

.gallery-item:hover .gallery-item-overlay {
  opacity: 1;
}

.gallery-item-overlay h4 {
  color: var(--color-text-white);
  font-family: var(--font-body);
  font-weight: 700;
  font-size: 1rem;
}

/* --- HERO SCROLL INDICATOR --- */
.hero-scroll-indicator {
  position: absolute;
  bottom: 2.5rem;
  left: 50%;
  transform: translateX(-50%);
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 0.4rem;
  color: rgba(255, 255, 255, 0.55);
  font-size: 0.7rem;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: 0.15em;
  animation: scrollBounce 2.2s ease-in-out infinite;
  pointer-events: none;
}

.hero-scroll-indicator svg {
  width: 22px;
  height: 22px;
  stroke: rgba(255, 255, 255, 0.55);
}

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

/* --- STATS STRIP --- */
.stats-strip {
  background-color: var(--color-sea-dark);
  padding: 4.5rem 0;
  border-top: 1px solid rgba(255, 255, 255, 0.04);
  border-bottom: 1px solid rgba(255, 255, 255, 0.04);
}

.stats-grid {
  display: grid;
  /* auto-fit rather than a hard 4: the strip stays even when a stat is added
     or held back, instead of leaving a dead column where one used to be. */
  grid-template-columns: repeat(auto-fit, minmax(180px, 1fr));
  gap: 0;
}

.stat-item {
  padding: 1.5rem 2rem;
  text-align: center;
  border-right: 1px solid rgba(255, 255, 255, 0.07);
  opacity: 0;
  transform: translateY(20px);
  transition: opacity 0.7s cubic-bezier(0.16, 1, 0.3, 1), transform 0.7s cubic-bezier(0.16, 1, 0.3, 1);
}

/* A stat whose number has not been typed in yet is not a stat: keeping it
   out of the strip is handled here rather than in JS, so the editor sees the
   figure reappear the moment a number is entered. */
.stat-item[data-count=""] {
  display: none;
}

.stat-item:last-child {
  border-right: none;
}

.stat-item.visible {
  opacity: 1;
  transform: translateY(0);
}

.stat-number {
  font-family: var(--font-heading);
  font-size: 3.75rem;
  font-weight: 800;
  color: var(--color-copper);
  line-height: 1;
  margin-bottom: 0.75rem;
  display: flex;
  align-items: baseline;
  justify-content: center;
  gap: 0.1em;
}

.stat-unit {
  font-size: 1.6rem;
  font-weight: 700;
  color: var(--color-copper);
  opacity: 0.75;
}

.stat-label {
  font-size: 0.9rem;
  color: rgba(255, 255, 255, 0.6);
  font-weight: 500;
  line-height: 1.5;
  max-width: 180px;
  margin: 0 auto;
}

/* --- STAR RATING --- */
.star-rating {
  color: var(--color-copper);
  font-size: 1rem;
  letter-spacing: 3px;
  margin-bottom: 1rem;
  line-height: 1;
}

/* --- INCLUSIONS CARDS (camps.html) --- */
.inclusions-grid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(320px, 1fr));
  gap: 2.5rem;
  margin-top: 3.5rem;
}

.inclusion-card {
  position: relative;
  width: 100%;
  overflow: hidden;
  border-radius: var(--border-radius-lg);
  border: 1px solid rgba(255, 255, 255, 0.12);
  background-color: rgba(255, 255, 255, 0.04);
  box-shadow: var(--shadow-md);
  transition: transform 0.4s cubic-bezier(0.25, 1, 0.5, 1),
              border-color 0.4s ease,
              box-shadow 0.4s ease,
              background-color 0.4s ease;
  cursor: pointer;
}

.inclusion-card:hover {
  transform: translateY(-8px);
  background-color: rgba(255, 255, 255, 0.07);
  border-color: rgba(212, 122, 85, 0.5);
  box-shadow: var(--shadow-lg), 0 0 20px rgba(212, 122, 85, 0.2);
}

/* Content Container */
.inclusion-card-content {
  position: relative;
  display: flex;
  flex-direction: column;
  gap: 1.25rem;
  padding: 2rem;
  z-index: 3;
  color: var(--color-text-white);
  box-sizing: border-box;
}

/* Top Section: Circular Icon Wrapper */
.inclusion-card-top {
  display: flex;
  align-items: flex-start;
}

.inclusion-card-icon-wrapper {
  display: flex;
  height: 3.5rem;
  width: 3.5rem;
  align-items: center;
  justify-content: center;
  border-radius: 50%;
  border: 2px solid rgba(255, 255, 255, 0.4);
  background: rgba(0, 0, 0, 0.25);
  backdrop-filter: blur(8px);
  -webkit-backdrop-filter: blur(8px);
  color: var(--color-text-white);
  transition: border-color 0.3s ease, background 0.3s ease;
}

.inclusion-card:hover .inclusion-card-icon-wrapper {
  border-color: var(--color-copper);
  background: rgba(212, 122, 85, 0.2);
}

.inclusion-card-icon-wrapper svg {
  width: 1.5rem;
  height: 1.5rem;
  stroke: currentColor;
  stroke-width: 2;
  fill: none;
}

/* Middle Section: Details (slides up on hover) */
.inclusion-card-details {
  margin-bottom: 0;
}

.inclusion-card-title {
  font-family: var(--font-heading);
  font-size: 1.6rem;
  font-weight: 600;
  color: var(--color-text-white);
  margin-bottom: 0.5rem;
  line-height: 1.25;
}

.inclusion-card-subtitle {
  font-size: 0.8rem;
  text-transform: uppercase;
  letter-spacing: 0.1em;
  color: var(--color-copper);
  margin-bottom: 1rem;
  display: block;
}

.inclusion-card-overview-title {
  font-family: var(--font-body);
  font-size: 0.75rem;
  font-weight: 700;
  letter-spacing: 0.1em;
  color: rgba(255, 255, 255, 0.6);
  margin-bottom: 0.25rem;
}

.inclusion-card-text {
  font-size: 0.85rem;
  line-height: 1.5;
  color: rgba(255, 255, 255, 0.8);
  margin-bottom: 0;
}

/* Bottom Section — always in flow now that cards size to their content. */
.inclusion-card-bottom {
  margin-top: auto;
  width: 100%;
  box-sizing: border-box;
}

.inclusion-card-price-wrapper {
  display: flex;
  align-items: center;
  justify-content: space-between;
  border-top: 1px solid rgba(255, 255, 255, 0.15);
  padding-top: 1rem;
}

.inclusion-card-status {
  font-family: var(--font-body);
  font-size: 0.8rem;
  font-weight: 700;
  letter-spacing: 0.05em;
  color: rgba(255, 255, 255, 0.7);
}

.inclusion-card-badge {
  display: inline-flex;
  align-items: center;
  padding: 0.4rem 1rem;
  font-size: 0.75rem;
  font-weight: 700;
  background-color: var(--color-text-white);
  color: var(--color-sea-dark);
  border-radius: var(--border-radius-sm);
  transition: background-color 0.3s ease, color 0.3s ease;
}

.inclusion-card:hover .inclusion-card-badge {
  background-color: var(--color-copper);
  color: var(--color-text-white);
}

/* --- RESPONSIVE MEDIA QUERIES --- */

/* Tab View Layout */
@media (max-width: 992px) {
  h1 { font-size: 2.75rem; }
  h2 { font-size: 2.15rem; }

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

  .stat-item {
    border-bottom: 1px solid rgba(255, 255, 255, 0.07);
  }

  .stat-item:nth-child(2),
  .stat-item:nth-child(4) {
    border-right: none;
  }

  .stat-item:nth-child(3),
  .stat-item:nth-child(4) {
    border-bottom: none;
  }
  
  .split-grid {
    grid-template-columns: 1fr;
    gap: 3rem;
  }
  
  .split-grid-reverse .grid-image-wrapper {
    grid-column: auto;
  }
  
  .split-grid-reverse .grid-content-wrapper {
    grid-column: auto;
    grid-row: auto;
  }

  .people-behind-grid {
    grid-template-columns: 1fr;
    gap: 2.75rem;
  }

  .people-behind-intro {
    max-width: none;
  }

  .split-panels {
    min-height: 500px;
  }
  
  .room-selector-layout {
    grid-template-columns: 1fr;
    gap: 2.5rem;
  }
  
  .room-tabs {
    flex-direction: row;
    flex-wrap: wrap;
  }
  
  .room-tab-btn {
    flex: 1;
    min-width: 200px;
    padding: 1.25rem 1.5rem;
    border-left: none;
    border-bottom: 4px solid transparent;
  }
  
  .room-tab-btn.active {
    border-left: none;
    border-bottom: 6px solid var(--color-copper-dark);
  }
  
  .footer-grid {
    grid-template-columns: 1fr 1fr;
    gap: 2rem;
  }
}

/* Responsive Video Player */
.video-wrapper {
  position: relative;
  width: 100%;
  padding-top: 56.25%; /* 16:9 Aspect Ratio */
  border-radius: var(--border-radius-md);
  overflow: hidden;
  box-shadow: var(--shadow-md);
  background-color: transparent;
  transition: var(--transition-smooth);
}

.video-wrapper:hover {
  transform: translateY(-5px);
  box-shadow: var(--shadow-lg), 0 0 20px rgba(212, 122, 85, 0.25);
}

.video-wrapper iframe {
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  border: 0;
}

/* --- BOOKING STEPS STYLING (WARM MINIMAL) --- */
.booking-steps {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 3rem;
  margin-top: 2rem;
}

.booking-step {
  text-align: center;
  background-color: var(--color-sand-card);
  border-radius: var(--border-radius-md);
  padding: 2.5rem 2rem;
  box-shadow: var(--shadow-sm);
  border: 1px solid rgba(21, 62, 92, 0.05);
  transition: var(--transition-smooth);
  position: relative;
}

.booking-step:hover {
  transform: translateY(-5px);
  box-shadow: var(--shadow-md);
  border-color: rgba(212, 122, 85, 0.2);
}

.booking-step .step-number {
  width: 60px;
  height: 60px;
  border-radius: 50%;
  background-color: var(--color-sea-primary);
  color: var(--color-text-white);
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 1.5rem;
  font-family: var(--font-heading);
  font-weight: 700;
  margin: 0 auto 1.5rem;
  box-shadow: 0 4px 10px rgba(21, 62, 92, 0.15);
  transition: var(--transition-smooth);
}

.booking-step:hover .step-number {
  background-color: var(--color-copper);
  transform: scale(1.05);
}

.booking-step h3 {
  font-size: 1.35rem;
  color: var(--color-sea-primary);
  margin-bottom: 0.5rem;
  font-family: var(--font-body);
  font-weight: 700;
}

.booking-step p {
  font-size: 0.95rem;
  color: var(--color-text-light);
  line-height: 1.6;
  margin-bottom: 0;
}

@media (max-width: 992px) {
  .booking-steps {
    gap: 2rem;
  }
}

/* --- DIRECT CONTACT IN CTA --- */
.cta-banner .cta-direct-contact {
  margin-top: 2rem;
  font-size: 0.95rem;
  color: rgba(255, 255, 255, 0.85);
  margin-bottom: 0;
}

.cta-banner .cta-direct-contact a {
  text-decoration: underline;
  color: var(--color-text-white);
  font-weight: 600;
  transition: var(--transition-smooth);
}

.cta-banner .cta-direct-contact a:hover {
  color: var(--color-copper);
}

/* Secondary CTA — deliberately lighter than the two white primary actions so
   "Book a Call" reads as a fallback option, not an equal choice. */
.cta-banner .btn-ghost {
  background-color: transparent;
  border-color: rgba(255, 255, 255, 0.45);
  color: var(--color-text-white);
  box-shadow: none;
}

.cta-banner .btn-ghost:hover {
  background-color: rgba(255, 255, 255, 0.12);
  border-color: var(--color-text-white);
  transform: translateY(-2px);
}

/* Mobile Layout (Mobile-First Thumb-Friendly) */
@media (max-width: 768px) {
  html {
    font-size: 15px;
  }



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

  .stat-number {
    font-size: 2.75rem;
  }

  .hero-scroll-indicator {
    display: none;
  }
  
  .burger-menu {
    display: flex;
  }
  
  nav {
    position: absolute;
    top: calc(var(--header-height) - 10px);
    right: 1.5rem;
    width: 260px;
    background-color: var(--color-sand-bg);
    border-radius: var(--border-radius-md);
    box-shadow: var(--shadow-lg);
    border: 1px solid rgba(21, 62, 92, 0.08);
    flex-direction: column;
    padding: 1.5rem;
    gap: 1.25rem;
    z-index: 999;
    opacity: 0;
    visibility: hidden;
    transform: translateY(-10px);
    transition: opacity 0.25s cubic-bezier(0.4, 0, 0.2, 1), transform 0.25s cubic-bezier(0.4, 0, 0.2, 1), visibility 0.25s cubic-bezier(0.4, 0, 0.2, 1);
  }
  
  nav.open {
    opacity: 1;
    visibility: visible;
    transform: translateY(15px);
  }
  
  .nav-links {
    flex-direction: column;
    width: 100%;
    gap: 0.75rem;
  }
  
  .nav-links a {
    font-size: 1rem;
    width: 100%;
    text-align: left;
    color: var(--color-sea-primary) !important;
    padding: 0.5rem 0.75rem;
    border-radius: var(--border-radius-sm);
    transition: var(--transition-smooth);
  }

  .nav-links a:hover,
  .nav-links a.active {
    background-color: rgba(21, 62, 92, 0.05);
    color: var(--color-sea-primary) !important;
  }
  
  .lang-switch {
    /* The nav drawer's own flex `gap` already separates this from the nav
       links above, so padding stays symmetric on all sides (was 16px top
       vs 4px elsewhere, which made the pill lopsided and oversized). */
    margin-top: 0;
    width: 100%;
    justify-content: flex-start;
    padding: 4px;
    border-top: 1px solid rgba(21, 62, 92, 0.05);
    gap: 8px;
  }
  
  .lang-btn {
    font-size: 0.85rem;
    padding: 0.35rem 0.75rem;
    flex: none;
    text-align: center;
    border-radius: 4px;
  }

  /* On mobile the nav lives inside a cream drawer, so the light-on-dark
     treatment used while the header floats over the hero would render the
     links white on cream (invisible). These selectors intentionally repeat
     the `header.header-over-hero` specificity so they win inside the drawer. */
  header.header-over-hero .nav-links a {
    color: var(--color-sea-primary) !important;
  }

  header.header-over-hero .nav-links a:hover,
  header.header-over-hero .nav-links a.active {
    color: var(--color-copper-dark) !important;
  }

  header.header-over-hero .lang-switch {
    background-color: rgba(21, 62, 92, 0.04) !important;
    border-color: rgba(21, 62, 92, 0.1) !important;
  }

  header.header-over-hero .lang-btn {
    color: var(--color-sea-primary) !important;
  }

  header.header-over-hero .lang-btn.active {
    color: var(--color-text-white) !important;
  }

  .hero-scroll-track {
    height: 300vh !important;
  }
  
  .hero-scroll-track .hero {
    position: sticky !important;
    top: 0 !important;
    height: 100vh !important;
    height: 100dvh !important;
    min-height: 100vh !important;
    min-height: 100dvh !important;
    padding: 0 !important;
    margin: 0 !important;
    display: flex !important;
    align-items: center !important;
    justify-content: center !important;
    overflow: hidden !important;
  }
  
  .hero-overlay-stage {
    position: relative !important;
    width: 100% !important;
    height: 100% !important;
    display: flex !important;
    flex-direction: row !important;
    align-items: center !important;
    justify-content: center !important;
    padding: 0 1.5rem !important;
    pointer-events: none !important;
  }
  
  .hero-overlay-step {
    position: absolute !important;
    top: 50% !important;
    left: 50% !important;
    right: auto !important;
    pointer-events: none !important;
    width: calc(100% - 3rem) !important;
    max-width: 480px !important;
    text-align: center !important;
    align-items: center !important;
  }

  .hero-overlay-step.active {
    pointer-events: auto !important;
  }
  
  .liquid-glass-card {
    padding: 2rem 1.5rem !important;
    border-radius: var(--border-radius-md) !important;
  }
  
  .liquid-glass-card h2 {
    font-size: 1.85rem !important;
  }
  
  .card-ctas {
    flex-direction: column !important;
    width: 100% !important;
    gap: 0.75rem !important;
  }
  
  .card-ctas .btn {
    width: 100% !important;
  }

  .hero {
    padding: 6rem 0 3rem;
  }
  
  .hero h1 {
    font-size: 2.5rem;
  }
  
  .hero p {
    font-size: 1.15rem;
    margin-bottom: 2rem;
  }
  
  .hero-ctas {
    flex-direction: column;
    align-items: center;
    width: 100%;
    gap: 0.6rem;
  }

  .hero-ctas .btn {
    width: auto;
    min-width: 220px;
  }
  
  .coastal-quote-text {
    font-size: 1.65rem;
  }

  .coastal-quote-text span[lang="en"] {
    white-space: normal;
  }
  
  .coastal-quote-text::before {
    font-size: 5rem;
    top: -2.5rem;
  }
  
  .split-panels {
    flex-direction: column;
    min-height: auto;
  }
  
  .panel {
    min-height: 280px;
    padding: 2.5rem 2rem;
  }
  
  .panel-content {
    transform: translateY(0);
  }
  
  .panel-details {
    opacity: 1;
    max-height: 150px;
    margin-top: 0.5rem;
  }
  
  .room-tabs {
    flex-direction: column;
  }
  
  .room-tab-btn {
    border-bottom: none;
    border-left: 4px solid transparent;
  }
  
  .room-tab-btn.active {
    border-bottom: none;
    border-left: 6px solid var(--color-copper-dark);
  }
  
  .room-preview-info {
    padding: 1.75rem;
  }
  
  .room-preview-details {
    grid-template-columns: 1fr;
    gap: 0.75rem;
  }
  
  .timeline::before {
    left: 16px;
  }

  [data-section-id="school-lesson-process"] .timeline::before,
  [data-section-id="camp-day-timeline"] .timeline::before {
    display: none;
  }

  .timeline-item {
    gap: 0.85rem;
  }

  .timeline-time {
    font-size: 0.95rem;
  }

  .timeline-item > .timeline-time {
    height: 34px;
  }

  [data-section-id="camp-day-timeline"] .timeline-connector {
    height: 34px;
    margin: 0 -0.35rem;
  }

  .timeline-dot {
    width: 34px;
    height: 34px;
  }

  .timeline-content {
    padding: 0.8rem 1.1rem;
  }

  .faq-question {
    padding: 1.25rem 1.5rem;
    font-size: 1rem;
  }
  
  .faq-answer-inner {
    padding: 1.25rem 1.5rem;
  }
  

  
  .footer-grid {
    grid-template-columns: 1fr;
    gap: 2.5rem;
  }
  
  .footer-bottom {
    flex-direction: column;
    gap: 1rem;
    text-align: center;
  }

  /* Inclusions mobile overrides */
  .inclusions-grid {
    gap: 1.25rem;
    margin-top: 2rem;
  }
  
  .inclusion-card-image {
    height: 160px;
  }
  
  .inclusion-card-content {
    padding: 1.25rem;
  }

  /* Booking steps mobile overrides */
  .booking-steps {
    grid-template-columns: 1fr;
    gap: 1.5rem;
  }
  
  .booking-step {
    padding: 2rem 1.5rem;
  }
}

/* ==========================================================================
   HOMEPAGE STICKY VIDEO TRACK & PARALLAX HERO
   ========================================================================== */

.homepage-sticky-track {
  position: relative;
  width: 100%;
}

.sticky-video-bg {
  position: sticky;
  top: 0;
  left: 0;
  width: 100%;
  height: 100vh;
  height: 100dvh;
  z-index: -1;
  overflow: hidden;
  background-color: #0c1b26; /* Dark base color */
}

.sticky-video-bg video {
  position: absolute;
  top: 50%;
  left: 50%;
  width: 100%;
  height: 100%;
  object-fit: cover;
  transform: translate(-50%, -50%);
  opacity: 0;
  transition: opacity 0.8s ease;
  z-index: 0;
}

.sticky-video-bg.video-loaded video {
  opacity: 1;
}

/* Glassmorphic/gradient overlay over background video */
.sticky-video-bg::after {
  content: '';
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  background: linear-gradient(to bottom, rgba(10, 28, 42, 0.4) 0%, rgba(10, 28, 42, 0.7) 100%);
  z-index: 1;
}

/* Scroll content container overlays transparently on video background */
.scroll-content-on-video {
  position: relative;
  z-index: 2;
  margin-top: -100vh; /* Pulls content up on top of sticky video container */
  margin-top: -100dvh;
}

/* Hero section over sticky video */
.scroll-content-on-video .hero {
  background-color: transparent;
  min-height: 100vh;
  min-height: 100dvh;
  position: relative;
  display: flex;
  align-items: center;
  justify-content: center;
}

/* Make sections transparent that overlay on the sticky video */
.scroll-content-on-video .coastal-quote-section {
  background-color: transparent !important;
  border-top: 1px solid rgba(255, 255, 255, 0.08) !important;
  border-bottom: 1px solid rgba(255, 255, 255, 0.08) !important;
}

.scroll-content-on-video .coastal-quote-text {
  color: var(--color-text-white) !important;
}

.scroll-content-on-video .coastal-quote-text::before {
  color: rgba(255, 255, 255, 0.08) !important;
}

.scroll-content-on-video .coastal-quote-author {
  color: var(--color-copper) !important;
}

.scroll-content-on-video .stats-strip {
  background-color: transparent !important;
  border-top: 1px solid rgba(255, 255, 255, 0.06) !important;
  border-bottom: 1px solid rgba(255, 255, 255, 0.06) !important;
}

.scroll-content-on-video .section-bg-alt {
  background-color: transparent !important;
  color: var(--color-text-white) !important;
}

.scroll-content-on-video .section-bg-alt h2 {
  color: var(--color-text-white) !important;
}

.scroll-content-on-video .section-bg-alt p {
  color: rgba(255, 255, 255, 0.75) !important;
}

.scroll-content-on-video .section-bg-alt .tagline {
  color: var(--color-copper) !important;
}

/* --- WARM MINIMAL CALENDAR TABLE --- */
.table-container {
  background-color: var(--color-text-white);
  border-radius: var(--border-radius-md);
  box-shadow: var(--shadow-sm);
  border: 1px solid rgba(21, 62, 92, 0.05);
  overflow: hidden;
}

.calendar-table {
  width: 100%;
  border-collapse: collapse;
  text-align: left;
}

.calendar-table th {
  padding: 1.25rem 1.5rem;
  background-color: var(--color-sea-primary);
  color: var(--color-text-white);
  font-family: var(--font-body);
  font-weight: 700;
  font-size: 0.95rem;
}

.calendar-table td {
  padding: 1.25rem 1.5rem;
  font-size: 0.95rem;
  border-bottom: 1px solid #ECEEEF;
}

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

.calendar-table td.camp-name-cell {
  font-weight: 700;
  color: var(--color-sea-primary);
}

.calendar-table td.status-cell {
  text-align: right;
  font-weight: 700;
}

/* Compact layout for mobile */
@media (max-width: 768px) {
  .calendar-table th,
  .calendar-table td {
    padding: 0.75rem 0.5rem;
    font-size: 0.8rem;
  }
}

/* --- ROOM MEDIA TOGGLE (PHOTO / FLOOR PLAN) --- */
.room-preview-image {
  position: relative;
}

.room-media-toggle {
  position: absolute;
  bottom: 1rem;
  right: 1rem;
  background-color: rgba(253, 251, 247, 0.85);
  backdrop-filter: blur(8px);
  -webkit-backdrop-filter: blur(8px);
  padding: 4px;
  border-radius: var(--border-radius-sm);
  display: flex;
  gap: 4px;
  box-shadow: var(--shadow-sm);
  z-index: 5;
  border: 1px solid rgba(21, 62, 92, 0.08);
}

.toggle-media-btn {
  background: none;
  border: none;
  font-family: var(--font-body);
  font-size: 0.8rem;
  font-weight: 700;
  color: var(--color-sea-primary);
  padding: 0.35rem 0.75rem;
  cursor: pointer;
  border-radius: 4px;
  transition: var(--transition-smooth);
}

.toggle-media-btn.active {
  background-color: var(--color-sea-primary);
  color: var(--color-text-white);
}

.room-disclaimer {
  font-size: 0.78rem;
  color: var(--color-text-light);
  line-height: 1.4;
  margin-top: 0.75rem;
  font-style: italic;
}

/* --- FLOATING CTA WIDGET --- */
.floating-cta-container {
  position: fixed;
  bottom: 2rem;
  right: 2rem;
  z-index: 1000;
  display: flex;
  flex-direction: column;
  align-items: flex-end;
  gap: 0.75rem;
  /* The collapsed menu still occupies layout space above the button, so the
     container's box overlaps content underneath (e.g. the hero CTAs on
     mobile). Let that empty area pass clicks through; only the real
     controls opt back in. */
  pointer-events: none;
  transition: opacity 0.2s ease, visibility 0.2s ease;
}

.floating-cta-container.is-hidden-over-gallery {
  opacity: 0;
  visibility: hidden;
}

.floating-cta-menu {
  background-color: var(--color-sand-bg);
  border-radius: var(--border-radius-md);
  box-shadow: var(--shadow-lg);
  border: 1px solid rgba(21, 62, 92, 0.08);
  padding: 0.75rem;
  display: flex;
  flex-direction: column;
  gap: 0.5rem;
  min-width: 220px;
  opacity: 0;
  visibility: hidden;
  transform: translateY(15px);
  transition: opacity 0.3s cubic-bezier(0.4, 0, 0.2, 1), transform 0.3s cubic-bezier(0.4, 0, 0.2, 1), visibility 0.3s cubic-bezier(0.4, 0, 0.2, 1);
  margin-bottom: 0.25rem;
  pointer-events: auto;
}

.floating-cta-menu.open {
  opacity: 1;
  visibility: visible;
  transform: translateY(0);
}

.floating-menu-item {
  display: flex;
  align-items: center;
  gap: 0.75rem;
  padding: 0.6rem 0.75rem;
  color: var(--color-sea-primary);
  font-family: var(--font-body);
  font-size: 0.9rem;
  font-weight: 700;
  text-decoration: none;
  border-radius: var(--border-radius-sm);
  transition: var(--transition-smooth);
  cursor: pointer;
  background: none;
  border: none;
  width: 100%;
  text-align: left;
}

.floating-menu-item:hover {
  background-color: rgba(21, 62, 92, 0.05);
  transform: translateX(-2px);
}

.floating-menu-item svg {
  color: var(--color-copper-dark);
}

.floating-cta-btn {
  background-color: var(--color-copper-dark);
  color: var(--color-text-white);
  border: none;
  border-radius: 50px;
  pointer-events: auto;
  padding: 0.9rem 1.75rem;
  font-family: var(--font-body);
  font-weight: 700;
  font-size: 0.95rem;
  cursor: pointer;
  display: flex;
  align-items: center;
  gap: 0.5rem;
  box-shadow: var(--shadow-md);
  transition: var(--transition-smooth);
}

.floating-cta-btn:hover {
  background-color: var(--color-copper);
  transform: scale(1.05);
  box-shadow: var(--shadow-lg);
}

.floating-cta-btn svg {
  transition: transform 0.3s ease;
}

.floating-cta-btn.active svg {
  transform: rotate(135deg);
}

/* --- FAQ INTERACTIVE HOVERS --- */
.faq-item {
  transition: transform 0.25s ease, border-color 0.25s ease, box-shadow 0.25s ease !important;
}

.faq-item:hover {
  transform: translateY(-2px);
  border-color: rgba(212, 122, 85, 0.25);
  box-shadow: var(--shadow-md);
}

.faq-question {
  transition: color 0.25s ease;
}

.faq-question:hover {
  color: var(--color-copper-dark);
}

@media (max-width: 768px) {
  .floating-cta-container {
    bottom: 1.5rem;
    right: 1.5rem;
  }
}

/* ==========================================================================
   LVKC REDESIGN UPDATES & CUSTOM COMPONENTS
   ========================================================================== */

/* 1. Non-Sticky Hero Video styles */
.hero {
  position: relative;
  height: 100vh;
  height: 100dvh;
  width: 100%;
  overflow: hidden;
  display: flex;
  align-items: center;
  justify-content: center;
  background-color: #0c1b26;
  z-index: 1;
}

.hero-video-container {
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  z-index: 0;
}

.hero-video-container video {
  width: 100%;
  height: 100%;
  object-fit: cover;
}

.hero-video-overlay {
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  background: linear-gradient(to bottom, rgba(10, 28, 42, 0.2) 0%, rgba(10, 28, 42, 0.42) 100%);
  z-index: 1;
}

.hero .container {
  position: relative;
  z-index: 2;
}

/* 2. Dates Banner styles (light — brandbook sand base) */
.dates-banner-light {
  background-color: var(--color-sand-bg);
  color: var(--color-text-dark);
  padding: 5rem 0;
  border-top: 1px solid rgba(11, 23, 51, 0.08);
}

.dates-banner-light h2 {
  color: var(--color-sea-dark);
  margin-bottom: 1rem;
  font-size: 2.2rem;
  font-family: var(--font-heading);
  font-style: italic;
  font-weight: 300;
  text-align: left;
}

.dates-banner-light h2 strong {
  font-style: normal;
  font-weight: 800;
}

.dates-banner-light p {
  color: var(--color-text-light);
  margin-bottom: 0;
  font-size: 1.05rem;
  line-height: 1.6;
  text-align: left;
}

.dates-banner-light .tagline {
  color: var(--color-copper);
  font-weight: 500;
  font-size: 1rem;
  display: block;
  margin-bottom: 0.5rem;
  text-align: left;
}

.dates-banner-grid {
  display: grid;
  grid-template-columns: 2fr 1fr;
  align-items: center;
  gap: 3.5rem;
}

.dates-banner-left {
  display: flex;
  flex-direction: column;
  align-items: flex-start;
}

.dates-banner-right {
  display: flex;
  justify-content: flex-end;
}

@media (max-width: 768px) {
  .dates-banner-grid {
    grid-template-columns: 1fr;
    gap: 2rem;
    text-align: center;
  }
  .dates-banner-left, .dates-banner-light h2, .dates-banner-light p, .dates-banner-light .tagline {
    align-items: center;
    text-align: center;
  }
  .dates-banner-right {
    justify-content: center;
  }
}

/* 3. Google Business Reviews widget */
.reviews-platform-block {
  width: 100%;
}

.reviews-platform-header {
  display: flex;
  justify-content: space-between;
  align-items: center;
  margin-bottom: 1.75rem;
  border-bottom: 1px solid rgba(21, 62, 92, 0.08);
  padding-bottom: 1rem;
}

.google-logo-text {
  font-family: 'Outfit', sans-serif;
  font-weight: 700;
  font-size: 1.35rem;
  color: var(--color-sea-primary);
}

.platform-meta {
  display: flex;
  align-items: center;
  gap: 0.75rem;
  font-weight: 700;
  font-size: 0.95rem;
  color: var(--color-text-dark);
}

.star-rating-widget {
  color: #FBBC05;
  font-size: 1.15rem;
}

.circle-rating-widget {
  color: #00af87;
  font-size: 1.1rem;
  letter-spacing: 2px;
}

.reviews-cards-row {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: 1.5rem;
  overflow-x: auto;
  padding-bottom: 1rem;
}

/* Custom scrollbar for reviews row */
.reviews-cards-row::-webkit-scrollbar {
  height: 6px;
}
.reviews-cards-row::-webkit-scrollbar-track {
  background: #f1f1f1;
  border-radius: 10px;
}
.reviews-cards-row::-webkit-scrollbar-thumb {
  background: var(--color-copper);
  border-radius: 10px;
}

.review-card-modern {
  background-color: #ffffff;
  border: 1px solid rgba(21, 62, 92, 0.06);
  border-radius: var(--border-radius-md);
  padding: 1.75rem;
  box-shadow: var(--shadow-sm);
  display: flex;
  flex-direction: column;
  justify-content: space-between;
  min-height: 280px;
  min-width: 250px;
  transition: var(--transition-smooth);
}

.review-card-modern:hover {
  transform: translateY(-4px);
  box-shadow: var(--shadow-md);
}

.review-card-modern.google-card {
  text-decoration: none;
  color: inherit;
  cursor: pointer;
}

.review-stars {
  color: #FBBC05;
  letter-spacing: 2px;
  margin-bottom: 0.6rem;
  font-size: 1rem;
}

.review-card-eyebrow {
  display: block;
  font-size: 0.72rem;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: 0.04em;
  color: var(--color-copper);
  margin-bottom: 0.6rem;
}

.star-rating-orange {
  color: #FBBC05;
  margin-bottom: 0.75rem;
  font-size: 0.95rem;
}

.circle-rating-green {
  color: #00af87;
  margin-bottom: 0.75rem;
  font-size: 0.95rem;
  letter-spacing: 1px;
}

.review-text {
  font-size: 0.88rem;
  color: var(--color-text-light);
  line-height: 1.55;
  margin-bottom: 0.5rem;
}

.review-card-footer {
  display: flex;
  align-items: center;
  gap: 0.75rem;
  margin-top: 1.25rem;
  border-top: 1px solid rgba(21, 62, 92, 0.05);
  padding-top: 0.75rem;
}

.reviewer-avatar {
  width: 38px;
  height: 38px;
  border-radius: 50%;
  background-color: var(--color-sea-light);
  color: var(--color-sea-primary);
  display: flex;
  align-items: center;
  justify-content: center;
  font-weight: 800;
  font-size: 0.85rem;
}

.reviewer-avatar-img {
  width: 38px;
  height: 38px;
  border-radius: 50%;
  overflow: hidden;
}

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

.google-g-avatar {
  background-color: #ffffff;
  border: 1px solid rgba(21, 62, 92, 0.1);
  flex-shrink: 0;
}

.google-g-avatar svg {
  width: 20px;
  height: 20px;
}

.reviewer-info h4 {
  font-size: 0.88rem;
  font-weight: 700;
  color: var(--color-text-dark);
  margin-bottom: 0.1rem;
}

.reviewer-info span {
  font-size: 0.75rem;
  color: var(--color-text-light);
}

.blue-check {
  color: #1DA1F2;
  font-size: 0.85rem;
  font-weight: 800;
  margin-left: 2px;
}

@media (max-width: 1024px) {
  .reviews-cards-row {
    grid-template-columns: repeat(4, 280px);
  }
}

/* 4. Camps Dates Card Grid styles */
.camp-dates-list {
  display: flex;
  flex-direction: column;
  gap: 1.15rem;
}

.camp-dates-empty {
  padding: 1.4rem 1.75rem;
  background-color: #ffffff;
  border-radius: var(--border-radius-md);
  border: 1px solid rgba(21, 62, 92, 0.07);
  color: var(--color-text-light);
  font-weight: 600;
}

.camp-date-card {
  display: flex;
  align-items: center;
  gap: 1rem;
  padding: 1.25rem 1.5rem;
  background-color: #ffffff;
  border-radius: var(--border-radius-md);
  border: 1px solid rgba(21, 62, 92, 0.09);
  box-shadow: var(--shadow-sm);
  cursor: pointer;
  transition: transform 0.2s ease, border-color 0.2s ease, box-shadow 0.2s ease, background-color 0.2s ease;
}

.camp-date-card:hover {
  transform: translateX(3px);
  border-color: var(--color-copper);
  box-shadow: var(--shadow-md);
}

/* Persistent pick, as opposed to the transient :hover lift above. */
.camp-date-card.selected {
  background-color: rgba(29, 62, 147, 0.06);
  border-color: var(--color-sea-primary);
  box-shadow: var(--shadow-md);
}

.camp-date-radio {
  width: 20px;
  height: 20px;
  flex-shrink: 0;
  border-radius: 50%;
  border: 2px solid rgba(21, 62, 92, 0.25);
  position: relative;
  transition: border-color 0.2s ease;
}

.camp-date-card.selected .camp-date-radio {
  border-color: var(--color-sea-primary);
}

.camp-date-card.selected .camp-date-radio::after {
  content: '';
  position: absolute;
  inset: 4px;
  border-radius: 50%;
  background-color: var(--color-sea-primary);
}

.camp-date-info {
  flex: 1;
}

.camp-date-info h4 {
  font-family: var(--font-heading);
  font-size: 1.15rem;
  font-weight: 800;
  color: var(--color-sea-primary);
  margin-bottom: 0.2rem;
}

.camp-date-days {
  font-size: 0.9rem;
  color: var(--color-text-light);
  font-weight: 600;
}

.camp-date-status-col {
  display: flex;
  flex-direction: column;
  align-items: flex-end;
  gap: 0.35rem;
  flex-shrink: 0;
}

.camp-date-spots {
  font-size: 0.78rem;
  color: var(--color-text-light);
  font-weight: 600;
}

.camp-date-status {
  font-size: 0.72rem;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: 0.05em;
  padding: 0.35rem 0.85rem;
  border-radius: 20px;
  white-space: nowrap;
}

.status-filling {
  background-color: #fdf3f0;
  color: var(--color-copper-dark);
}

.status-open {
  background-color: #eaf6ee;
  color: #12824C;
}

.status-soon {
  background-color: var(--color-sea-light);
  color: var(--color-sea-primary);
}

.status-full {
  background-color: #eef1f3;
  color: #5b6b78;
}

/* --- GOOGLE RATING WIDGETS --- */
.reviews-stars,
.google-review-stars,
.reviews-strip-stars {
  color: #FBBC05;
  letter-spacing: 0.12em;
  font-size: 1.15rem;
  line-height: 1;
}

/* Compact badge used over the hero */
.google-rating-badge {
  display: inline-flex;
  align-items: center;
  gap: 0.6rem;
  padding: 0.55rem 1.1rem;
  border-radius: 50px;
  background: rgba(255, 255, 255, 0.14);
  border: 1px solid rgba(255, 255, 255, 0.28);
  backdrop-filter: blur(10px);
  -webkit-backdrop-filter: blur(10px);
  color: var(--color-text-white);
  font-size: 0.9rem;
  font-weight: 600;
  text-decoration: none;
  transition: var(--transition-smooth);
}

.google-rating-badge:hover {
  background: rgba(255, 255, 255, 0.22);
  border-color: rgba(255, 255, 255, 0.45);
}

/* "Experience speaks for itself" strip on camps/school */
.reviews-strip {
  display: flex;
  align-items: center;
  justify-content: space-between;
  flex-wrap: wrap;
  gap: 1.75rem;
  padding: 2.25rem 2.5rem;
  border-radius: var(--border-radius-md);
  background-color: var(--color-sand-card);
  border: 1px solid rgba(21, 62, 92, 0.07);
  box-shadow: var(--shadow-sm);
}

.reviews-strip-copy h2 {
  font-size: clamp(1.2rem, 2.2vw, 1.6rem);
  margin-bottom: 1rem;
  color: var(--color-sea-primary);
}

.reviews-strip-rating {
  display: flex;
  align-items: center;
  gap: 0.65rem;
  flex-wrap: wrap;
}

.reviews-strip-score {
  font-size: 0.92rem;
  font-weight: 600;
  color: var(--color-text-light);
}

/* Only shown once the live review count arrives from the API. */
.reviews-count[hidden] {
  display: none;
}

/* --- GOOGLE REVIEWS CAROUSEL (testimonials page) --- */
.google-reviews-summary {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 0.75rem;
  margin-bottom: 2.5rem;
}

.google-reviews-score {
  font-weight: 700;
  color: var(--color-sea-primary);
}

.reviews-carousel {
  position: relative;
  display: flex;
  align-items: center;
  gap: 0.75rem;
}

.reviews-carousel-track {
  display: grid;
  grid-auto-flow: column;
  grid-auto-columns: minmax(280px, 1fr);
  gap: 1.5rem;
  overflow-x: auto;
  scroll-snap-type: x mandatory;
  scroll-behavior: smooth;
  padding: 0.5rem;
  flex: 1;
  scrollbar-width: none;
}

.reviews-carousel-track::-webkit-scrollbar {
  display: none;
}

.google-review-card {
  scroll-snap-align: start;
  display: flex;
  flex-direction: column;
  gap: 1rem;
  padding: 2rem;
  background-color: #ffffff;
  border: 1px solid rgba(21, 62, 92, 0.1);
  border-radius: var(--border-radius-md);
  box-shadow: var(--shadow-sm);
}

.google-review-text {
  font-size: 0.98rem;
  line-height: 1.6;
  color: var(--color-text-light);
  margin: 0;
  flex: 1;
}

.google-review-author {
  display: flex;
  align-items: center;
  gap: 0.85rem;
}

.google-review-author-info h4 {
  font-size: 1rem;
  margin: 0;
  color: var(--color-sea-primary);
}

.google-review-author-info span {
  font-size: 0.82rem;
  color: var(--color-text-light);
}

.google-review-link {
  font-size: 0.88rem;
  font-weight: 700;
  color: var(--color-copper-dark);
  text-decoration: none;
}

.google-review-link:hover {
  text-decoration: underline;
}

.reviews-carousel-btn {
  flex-shrink: 0;
  width: 42px;
  height: 42px;
  border-radius: 50%;
  border: 1px solid rgba(21, 62, 92, 0.15);
  background-color: #ffffff;
  color: var(--color-sea-primary);
  cursor: pointer;
  font-size: 1rem;
  display: grid;
  place-items: center;
  box-shadow: var(--shadow-sm);
  transition: var(--transition-smooth);
}

.reviews-carousel-btn:hover:not(:disabled) {
  background-color: var(--color-copper);
  border-color: var(--color-copper);
  color: #ffffff;
}

.reviews-carousel-btn:disabled {
  opacity: 0.35;
  cursor: default;
}

.reviews-actions {
  display: flex;
  justify-content: center;
  flex-wrap: wrap;
  gap: 1rem;
  margin-top: 2.5rem;
}

@media (max-width: 760px) {
  .reviews-carousel-btn {
    display: none;
  }

  .reviews-carousel-track {
    grid-auto-columns: minmax(240px, 85%);
  }

  .reviews-strip {
    padding: 1.75rem 1.5rem;
  }
}

/* --- REUSABLE ACCORDION (coaching levels, etc.) --- */
.lvkc-accordion {
  margin-top: 1.75rem;
  display: grid;
  gap: 0.85rem;
}

.lvkc-accordion-item {
  border: 1px solid rgba(21, 62, 92, 0.1);
  border-radius: var(--border-radius-md);
  background-color: var(--color-sand-card);
  overflow: hidden;
  transition: border-color 0.3s ease;
}

.lvkc-accordion-trigger {
  width: 100%;
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 1rem;
  padding: 1.1rem 1.4rem;
  background: none;
  border: 0;
  cursor: pointer;
  text-align: left;
  font-family: var(--font-heading);
  font-size: 1.05rem;
  font-weight: 700;
  color: var(--color-sea-primary);
  transition: color 0.3s ease;
}

.lvkc-accordion-icon {
  position: relative;
  flex-shrink: 0;
  width: 16px;
  height: 16px;
}

.lvkc-accordion-icon::before,
.lvkc-accordion-icon::after {
  content: '';
  position: absolute;
  top: 50%;
  left: 0;
  width: 100%;
  height: 2px;
  border-radius: 2px;
  background-color: currentColor;
  transform: translateY(-50%);
  transition: transform 0.3s ease, opacity 0.3s ease;
}

.lvkc-accordion-icon::after {
  transform: translateY(-50%) rotate(90deg);
}

.lvkc-accordion-item.is-open .lvkc-accordion-icon::after {
  transform: translateY(-50%) rotate(0deg);
  opacity: 0;
}

.lvkc-accordion-panel {
  max-height: 0;
  overflow: hidden;
  transition: max-height 0.35s cubic-bezier(0.4, 0, 0.2, 1);
}

.lvkc-accordion-panel-inner {
  padding: 0 1.4rem 1.25rem;
}

.lvkc-accordion-panel-inner p {
  margin-bottom: 0;
  font-size: 0.95rem;
  line-height: 1.6;
  color: var(--color-text-light);
}

/* Dark-section variant */
.lvkc-accordion--dark .lvkc-accordion-item {
  background-color: rgba(255, 255, 255, 0.05);
  border-color: rgba(255, 255, 255, 0.12);
}

.lvkc-accordion--dark .lvkc-accordion-trigger {
  color: var(--color-copper);
}

.lvkc-accordion--dark .lvkc-accordion-item.is-open {
  border-color: rgba(212, 122, 85, 0.5);
}

.lvkc-accordion--dark .lvkc-accordion-panel-inner p {
  color: rgba(255, 255, 255, 0.85);
}

/* --- VILLA & CAMP EXPERIENCE (heading + amenity list left, video right) --- */
.villa-experience-grid {
  display: grid;
  grid-template-columns: minmax(0, 1.15fr) minmax(0, 0.85fr);
  gap: clamp(2rem, 4vw, 3.5rem);
  align-items: center;
}

.villa-experience-media {
  position: relative;
  margin: 0;
  width: 100%;
  aspect-ratio: 4 / 3;
  border-radius: var(--border-radius-md);
  overflow: hidden;
  box-shadow: var(--shadow-md);
  background-color: var(--color-sea-light);
}

.villa-experience-media video,
.villa-experience-media img {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  object-fit: cover;
}

.villa-experience-details .tagline {
  margin-bottom: 0.75rem;
}

.villa-experience-details h2 {
  font-family: var(--font-heading);
  font-size: clamp(1.9rem, 3.2vw, 2.6rem);
  font-weight: 800;
  line-height: 1.15;
  color: var(--color-sea-dark);
  margin: 0 0 1rem;
}

.villa-experience-intro {
  font-size: 1.05rem;
  line-height: 1.6;
  color: var(--color-text-light);
  margin: 0 0 1.75rem;
  max-width: 42ch;
}

.villa-experience-details h3 {
  font-family: var(--font-heading);
  font-size: clamp(1.2rem, 2vw, 1.45rem);
  font-weight: 800;
  color: var(--color-sea-primary);
  margin: 0 0 1.1rem;
}

.villa-amenities-list {
  list-style: none;
  margin: 0;
  padding: 0;
  display: grid;
  gap: 0.8rem;
}

.villa-amenity {
  position: relative;
  padding-left: 1.5rem;
  font-size: 1rem;
  font-weight: 600;
  color: var(--color-sea-primary);
  line-height: 1.4;
}

.villa-amenity::before {
  content: '';
  position: absolute;
  left: 0;
  top: 0.5em;
  width: 7px;
  height: 7px;
  border-radius: 50%;
  background-color: var(--color-copper);
}

@media (max-width: 900px) {
  .villa-experience-grid {
    grid-template-columns: minmax(0, 1fr);
    gap: 2rem;
  }

  .villa-experience-media {
    aspect-ratio: 16 / 10;
  }

  .villa-experience-intro {
    max-width: none;
  }
}

/* 5. Experience Slider styles */
.experience-slider-container {
  position: relative;
  width: 100%;
  height: 520px;
  border-radius: var(--border-radius-md);
  overflow: hidden;
  margin-bottom: 3rem;
  box-shadow: var(--shadow-lg);
}

.experience-slider {
  width: 100%;
  height: 100%;
  position: relative;
}

.experience-slide {
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  opacity: 0;
  transition: opacity 0.8s ease-in-out;
  z-index: 1;
}

.experience-slide.active {
  opacity: 1;
  z-index: 2;
}

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

.slide-caption {
  position: absolute;
  bottom: 0;
  left: 0;
  width: 100%;
  background: linear-gradient(to top, rgba(10, 28, 42, 0.85) 0%, rgba(10, 28, 42, 0) 100%);
  color: #ffffff;
  padding: 2.5rem 3rem 1.75rem 3rem;
  font-family: var(--font-heading);
  font-size: 1.35rem;
  font-weight: 700;
  z-index: 3;
}

.slider-btn {
  position: absolute;
  top: 50%;
  transform: translateY(-50%);
  background-color: rgba(255, 255, 255, 0.75);
  border: none;
  width: 48px;
  height: 48px;
  border-radius: 50%;
  font-size: 1.25rem;
  color: var(--color-sea-dark);
  cursor: pointer;
  z-index: 10;
  display: flex;
  align-items: center;
  justify-content: center;
  transition: background-color 0.3s ease, transform 0.3s ease;
  box-shadow: var(--shadow-sm);
}

.slider-btn:hover {
  background-color: #ffffff;
  transform: translateY(-50%) scale(1.05);
}

.prev-btn {
  left: 24px;
}

.next-btn {
  right: 24px;
}

/* 6. Camp House Dropdown styles */
.collapsible-house-container {
  width: 100%;
  margin-top: 2.5rem;
}

.house-dropdown-trigger {
  width: 100%;
  display: flex;
  justify-content: space-between;
  align-items: center;
  background-color: var(--color-sea-primary);
  color: #ffffff;
  border: none;
  padding: 1.4rem 2.25rem;
  border-radius: var(--border-radius-md);
  font-family: var(--font-heading);
  font-size: 1.25rem;
  font-weight: 700;
  cursor: pointer;
  text-align: left;
  transition: background-color 0.3s ease;
  box-shadow: var(--shadow-md);
}

.house-dropdown-trigger:hover {
  background-color: var(--color-sea-dark);
}

.house-dropdown-trigger .trigger-icon {
  font-size: 1.5rem;
  transition: transform 0.3s ease;
}

.trigger-text-wrapper,
.house-detail-item h5 {
  display: flex;
  align-items: center;
  gap: 0.65rem;
}

.house-amenity-icon {
  width: 1.35rem;
  height: 1.35rem;
  flex: 0 0 1.35rem;
  fill: none;
  stroke: var(--color-copper);
  stroke-width: 1.8;
  stroke-linecap: round;
  stroke-linejoin: round;
}

.house-dropdown-trigger .house-amenity-icon {
  stroke: currentColor;
}

.house-dropdown-trigger.active .trigger-icon {
  transform: rotate(180deg);
}

.house-dropdown-content {
  max-height: 0;
  overflow: hidden;
  transition: max-height 0.45s ease-out;
  background-color: #ffffff;
  border-radius: 0 0 var(--border-radius-md) var(--border-radius-md);
  border: 1px solid rgba(21, 62, 92, 0.08);
  border-top: none;
}

.house-dropdown-content.open {
  border: 1px solid rgba(21, 62, 92, 0.08);
  border-top: none;
}

.house-details-grid {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 2.5rem;
  padding: 3rem;
}

.house-detail-item h5 {
  font-family: var(--font-heading);
  font-size: 1.15rem;
  font-weight: 800;
  color: var(--color-sea-dark);
  margin-bottom: 0.5rem;
}

.house-detail-item p {
  font-size: 0.95rem;
  color: var(--color-text-light);
  line-height: 1.6;
  margin-bottom: 0;
}

@media (max-width: 768px) {
  .experience-slider-container {
    height: 320px;
  }
  .house-details-grid {
    grid-template-columns: 1fr;
    padding: 1.75rem;
    gap: 1.75rem;
  }
}

/* 8. Creative School Inclusions Grid */
.school-inclusions-title {
  text-align: center;
  margin-bottom: 3rem;
}

.school-inclusions-title h3 {
  color: var(--color-sea-primary);
  font-family: var(--font-heading);
  font-size: 1.75rem;
  font-weight: 600;
  font-style: normal;
}

.school-inclusions-grid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(220px, 1fr));
  gap: 1.5rem;
  max-width: 1000px;
  margin: 0 auto;
}

.school-inclusion-item-card {
  background-color: #ffffff;
  border: 1px solid rgba(21, 62, 92, 0.08);
  border-radius: var(--border-radius-md);
  padding: 2.5rem 1.75rem;
  text-align: center;
  box-shadow: var(--shadow-sm);
  transition: transform 0.3s ease, border-color 0.3s ease, box-shadow 0.3s ease;
  display: flex;
  flex-direction: column;
  align-items: center;
}

.school-inclusion-item-card:hover {
  transform: translateY(-5px);
  border-color: var(--color-copper);
  box-shadow: var(--shadow-md);
}

.school-inclusion-item-card .icon-circle {
  width: 64px;
  height: 64px;
  background-color: #FAF6F0;
  color: var(--color-copper-dark);
  border-radius: 50%;
  display: flex;
  align-items: center;
  justify-content: center;
  margin-bottom: 1.25rem;
  transition: background-color 0.3s ease, color 0.3s ease;
}

.school-inclusion-item-card:hover .icon-circle {
  background-color: var(--color-copper-dark);
  color: #ffffff;
}

.school-inclusion-item-card h4 {
  font-family: var(--font-heading);
  font-weight: 700;
  font-size: 1.15rem;
  color: var(--color-sea-primary);
  margin-bottom: 0.5rem;
}

.school-inclusion-item-card p {
  font-size: 0.88rem;
  color: var(--color-text-light);
  line-height: 1.5;
  margin-bottom: 0;
}

/* 9. Blog layout styles */
.blog-grid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(320px, 1fr));
  gap: 2.5rem;
  max-width: 1100px;
  margin: 0 auto;
}

.blog-card {
  background-color: #ffffff;
  border-radius: var(--border-radius-md);
  border: 1px solid rgba(21, 62, 92, 0.06);
  box-shadow: var(--shadow-sm);
  overflow: hidden;
  transition: transform 0.3s ease, box-shadow 0.3s ease;
  display: flex;
  flex-direction: column;
}

.blog-card:hover {
  transform: translateY(-5px);
  box-shadow: var(--shadow-lg);
}

.blog-card-image {
  height: 220px;
  width: 100%;
  overflow: hidden;
}

.blog-card-image img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  transition: transform 0.5s ease;
}

.blog-card:hover .blog-card-image img {
  transform: scale(1.05);
}

.blog-card-content {
  padding: 2rem;
  flex-grow: 1;
  display: flex;
  flex-direction: column;
  justify-content: space-between;
}

.blog-card-tag {
  color: var(--color-copper);
  font-size: 0.8rem;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: 0.1em;
  margin-bottom: 0.75rem;
  display: block;
}

.blog-card-title {
  font-family: var(--font-heading);
  font-size: 1.35rem;
  color: var(--color-sea-primary);
  margin-bottom: 0.75rem;
  line-height: 1.35;
}

.blog-card-excerpt {
  font-size: 0.95rem;
  color: var(--color-text-light);
  line-height: 1.6;
  margin-bottom: 1.5rem;
  flex-grow: 1;
}

.blog-card-link {
  font-weight: 700;
  color: var(--color-copper-dark);
  font-size: 0.9rem;
  display: flex;
  align-items: center;
  transition: color 0.25s ease;
}

.blog-card-link:hover {
  color: var(--color-sea-primary);
}

/* Equal-weight Home paths */
.experience-path-grid {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 1.25rem;
}

.experience-path-card {
  position: relative;
  min-height: 610px;
  overflow: hidden;
  border-radius: var(--border-radius-md);
  background: var(--color-sea-dark);
  color: #ffffff;
}

.experience-path-card > img {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  object-fit: cover;
  transition: transform 0.8s cubic-bezier(0.2, 0.7, 0.2, 1);
}

.experience-path-card:hover > img {
  transform: scale(1.035);
}

.experience-path-overlay {
  position: absolute;
  inset: 0;
  background: linear-gradient(to bottom, rgba(7, 20, 30, 0.08) 10%, rgba(7, 20, 30, 0.86) 92%);
}

.experience-path-content {
  position: relative;
  z-index: 1;
  min-height: 610px;
  display: flex;
  flex-direction: column;
  padding: clamp(2rem, 4vw, 4rem);
}

/* Index sits at the top; the link is pushed to the bottom (see .editorial-link
   below) so both card titles start at the same height regardless of how many
   lines they take. */
.experience-path-content > div {
  margin-top: 1.75rem;
}

.experience-path-content h3 {
  color: #ffffff;
  font-size: clamp(2.8rem, 4.5vw, 5.2rem);
  line-height: 0.95;
  margin-bottom: 1rem;
}

/* Home selector: reserve two lines for the title so both cards line up
   the heading and the copy beneath it at the same height. */
.experience-path-grid:not(.experience-path-grid--three) .experience-path-content h3 {
  /* titles render at 0.8em inner size, line-height 0.95 -> ~2 lines */
  min-height: 1.55em;
}

.experience-path-content p {
  max-width: 40ch;
  color: rgba(255, 255, 255, 0.86);
  line-height: 1.7;
}

.experience-path-content .editorial-link {
  margin-top: auto;
  color: #ffffff;
}

/* Make the whole card clickable, not just the link text, while keeping
   the link itself as the one real anchor (stretched-link pattern). */
.experience-path-content .editorial-link::after {
  content: "";
  position: absolute;
  inset: 0;
  z-index: 2;
}

/* Kite School — "Find your level" centred intro + 3-card path selector */
.editorial-intro--center {
  display: block;
  max-width: 780px;
  margin: 0 auto 3.5rem;
  text-align: center;
}

.editorial-intro--center .editorial-eyebrow {
  display: block;
  margin-bottom: 1rem;
  font-size: 0.72rem;
  font-weight: 800;
  letter-spacing: 0.18em;
  text-transform: uppercase;
  color: var(--color-copper-dark);
}

.editorial-intro--center h2 {
  font-size: clamp(2.5rem, 4.6vw, 4.25rem);
  line-height: 0.95;
  letter-spacing: -0.04em;
}

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

.experience-path-grid--three {
  grid-template-columns: repeat(3, minmax(0, 1fr));
}

.experience-path-grid--three .experience-path-card,
.experience-path-grid--three .experience-path-content {
  min-height: 520px;
}

.experience-path-grid--three .experience-path-content h3 {
  font-size: clamp(2.2rem, 3vw, 3.2rem);
}

@media (max-width: 980px) {
  .experience-path-grid--three {
    grid-template-columns: 1fr;
  }
}

/* Compact two-column camp day on desktop */
@media (min-width: 900px) {
  .timeline {
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: 1rem;
    max-width: 1200px;
    padding: 1rem 0;
  }

  .timeline::before {
    display: none;
  }

  .timeline-item {
    margin: 0;
    gap: 1rem;
    padding: 1.1rem 1.35rem;
    border: 1px solid rgba(21, 62, 92, 0.07);
    border-radius: var(--border-radius-md);
    background: var(--color-sand-card);
    box-shadow: var(--shadow-sm);
    transition: var(--transition-smooth);
  }

  /* The item itself is the card at this width, so the inner content wrapper
     drops its own surface styling to avoid a card-inside-a-card. */
  .timeline-content {
    padding: 0;
    border: 0;
    background: transparent;
    box-shadow: none;
  }

  .timeline-item.active,
  .timeline-item.active .timeline-content {
    border-color: rgba(212, 122, 85, 0.3);
    box-shadow: none;
  }

  .timeline-item.active {
    background-color: var(--color-text-white);
    box-shadow: var(--shadow-md);
  }

  .timeline-item:hover .timeline-dot,
  .timeline-item.active .timeline-dot {
    transform: scale(1.08);
  }

  /* Camps "hour by hour": fill the LEFT column top-to-bottom first
     (7:00 AM → 11:00 AM), then the right column (2:00 PM → 9:00 PM),
     instead of reading row by row. Scoped so school.html stays row-major. */
  [data-section-id="camp-day-timeline"] .timeline {
    grid-template-rows: repeat(4, auto);
    grid-auto-flow: column;
  }
}

/* Full editorial content for the Blog */
.blog-articles-section {
  padding: 6rem 0;
  background: #efefeb;
}

.blog-articles-shell {
  display: grid;
  gap: 6rem;
}

.blog-article {
  display: grid;
  grid-template-columns: minmax(0, 0.85fr) minmax(0, 1.15fr);
  gap: clamp(2rem, 5vw, 5rem);
  align-items: start;
  scroll-margin-top: calc(var(--header-height) + 2rem);
}

.blog-article--reverse .blog-article-media {
  order: 2;
}

.blog-article-media {
  position: sticky;
  top: calc(var(--header-height) + 2rem);
  min-height: 520px;
  overflow: hidden;
}

.blog-article-media img {
  width: 100%;
  height: 100%;
  min-height: 520px;
  object-fit: cover;
}

.blog-article-body {
  padding: 1rem 0;
}

.blog-article-body h2 {
  font-size: clamp(2.4rem, 4vw, 4.4rem);
  line-height: 1;
  margin-bottom: 2rem;
}

.blog-article-body h3 {
  color: var(--color-sea-primary);
  font-size: 1.25rem;
  margin: 1.75rem 0 0.55rem;
}

.blog-article-body p,
.blog-numbered-list li {
  color: var(--color-text-light);
  line-height: 1.75;
}

.blog-article-body .btn {
  margin-top: 1.75rem;
}

.blog-numbered-list {
  list-style: decimal;
  padding-left: 1.4rem;
}

.blog-numbered-list li {
  margin-bottom: 1rem;
  padding-left: 0.45rem;
}

@media (max-width: 899px) {
  .experience-path-grid,
  .blog-article {
    grid-template-columns: 1fr;
  }

  .experience-path-card,
  .experience-path-grid--three .experience-path-card {
    min-height: 0;
    aspect-ratio: auto;
  }

  /* Let the copy drive the card height so the CTA never spills past the
     image edge (the beginner card runs the longest). */
  .experience-path-content,
  .experience-path-grid--three .experience-path-content {
    position: relative;
    inset: auto;
    min-height: 0;
    height: auto;
    padding: 2rem 1.75rem 2.25rem;
  }

  .experience-path-content > div {
    margin-top: 1.25rem;
  }

  .experience-path-content .editorial-link {
    margin-top: 1.5rem;
  }

  .blog-article--reverse .blog-article-media {
    order: initial;
  }

  .blog-article-media {
    position: relative;
    top: auto;
    min-height: 320px;
  }

  .blog-article-media img {
    min-height: 320px;
  }
}

@media (max-width: 1024px) {
  .editorial-intro {
    grid-template-columns: 1fr;
    align-items: start;
    gap: 1rem;
  }

  .editorial-intro p {
    grid-column: 1;
    max-width: 60ch;
  }

  .editorial-grid {
    grid-template-columns: repeat(2, minmax(0, 1fr));
    grid-auto-rows: 400px;
  }

  .editorial-tile--wide {
    grid-column: span 2;
  }
}

@media (max-width: 680px) {
  .editorial-experience {
    padding: 4.5rem 1rem;
  }

  .editorial-intro {
    display: block;
    margin-bottom: 2rem;
  }

  .editorial-intro h2 {
    margin: 1.1rem 0 1.5rem;
    font-size: clamp(3rem, 14vw, 4.8rem);
  }

  .editorial-intro p {
    max-width: 42ch;
  }

  .editorial-grid {
    display: flex;
    flex-direction: column;
    gap: 0.8rem;
  }

  .editorial-tile {
    min-height: 390px;
  }

  .editorial-tile--image {
    min-height: 300px;
  }

  .editorial-tile--wide {
    min-height: 420px;
  }

  .editorial-tile--story {
    padding: 2rem;
  }

  .editorial-tile--story h3 {
    font-size: 2.65rem;
  }

}

/* --- 2026 CONTENT REFINEMENT: preserve LVKC design and motion language --- */
[data-section-id="kite-instruction"] .grid-content-wrapper > p {
  color: var(--color-text-white);
  opacity: 0.85;
}

[data-section-id="school-gear-rental"] .grid-image-wrapper {
  aspect-ratio: 4 / 3;
  max-height: 320px;
  align-self: center;
}

[data-section-id="school-gear-rental"] .grid-image-wrapper img {
  height: 100%;
  object-position: center 30%;
}

[data-section-id="camp-inclusions"] .inclusions-grid {
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 1rem;
}

[data-section-id="camp-inclusions"] .inclusion-card {
  height: 220px;
  min-height: 0;
  cursor: pointer;
  isolation: isolate;
  border: 1px solid rgba(255, 255, 255, 0.18);
  background: rgba(255, 255, 255, 0.04);
  box-shadow: none;
  transition: height 0.45s cubic-bezier(0.16, 1, 0.3, 1), border-color 0.35s ease, box-shadow 0.35s ease;
}

[data-section-id="camp-inclusions"] .inclusion-card-bg {
  opacity: 0;
  transform: scale(1);
  transition: opacity 0.35s ease, transform 0.6s cubic-bezier(0.25, 1, 0.5, 1);
}

[data-section-id="camp-inclusions"] .inclusion-card-overlay {
  background: rgba(10, 28, 42, 0.94);
}

[data-section-id="camp-inclusions"] .inclusion-card-content {
  display: grid;
  grid-template-columns: 3.5rem minmax(0, 1fr);
  grid-template-rows: auto 1fr auto;
  column-gap: 1rem;
  align-items: center;
  justify-content: normal;
}

[data-section-id="camp-inclusions"] .inclusion-card-top {
  grid-column: 1;
  grid-row: 1;
  height: auto;
}

[data-section-id="camp-inclusions"] .inclusion-card-details {
  display: contents;
}

[data-section-id="camp-inclusions"] .inclusion-card-subtitle {
  display: none;
}

[data-section-id="camp-inclusions"] .inclusion-card-overview-title {
  display: none;
}

[data-section-id="camp-inclusions"] .inclusion-card-title {
  grid-column: 2;
  grid-row: 1;
  margin: 0;
}

[data-section-id="camp-inclusions"] .inclusion-card-text {
  grid-column: 1 / -1;
  grid-row: 2;
  align-self: end;
}

[data-section-id="camp-inclusions"] .inclusion-card-text {
  padding-bottom: 0.25rem;
}

[data-section-id="camp-inclusions"] .inclusion-card-bottom {
  grid-column: 1 / -1;
  grid-row: 3;
}

[data-section-id="camp-inclusions"] .inclusion-card::after {
  content: "+";
  position: absolute;
  top: 1.25rem;
  right: 1.25rem;
  z-index: 5;
  width: 2rem;
  height: 2rem;
  display: grid;
  place-items: center;
  border: 1px solid rgba(255, 255, 255, 0.55);
  border-radius: 50%;
  color: #fff;
  font-size: 1.25rem;
  transition: transform 0.35s ease, background-color 0.35s ease;
}

[data-section-id="camp-inclusions"] .inclusion-card.is-open::after {
  transform: rotate(45deg);
  background: var(--color-copper);
  border-color: var(--color-copper);
}

[data-section-id="camp-inclusions"] .inclusion-card:focus-visible {
  outline: 3px solid var(--color-copper);
  outline-offset: 3px;
}

[data-section-id="camp-inclusions"] .inclusion-card-details {
  transform: none;
}

[data-section-id="camp-inclusions"] .inclusion-card:hover .inclusion-card-details {
  transform: none;
}

[data-section-id="camp-inclusions"] .inclusion-card-overview-title,
[data-section-id="camp-inclusions"] .inclusion-card-text,
[data-section-id="camp-inclusions"] .inclusion-card-bottom {
  opacity: 0;
  max-height: 0;
  overflow: hidden;
  margin-top: 0;
  transform: translateY(8px);
  transition: opacity 0.35s ease, max-height 0.45s ease, transform 0.35s ease, margin 0.35s ease;
}

[data-section-id="camp-inclusions"] .inclusion-card.is-open .inclusion-card-overview-title,
[data-section-id="camp-inclusions"] .inclusion-card.is-open .inclusion-card-text,
[data-section-id="camp-inclusions"] .inclusion-card.is-open .inclusion-card-bottom {
  opacity: 1;
  max-height: 220px;
  transform: translateY(0);
}

[data-section-id="camp-inclusions"] .inclusion-card.is-open .inclusion-card-bottom {
  bottom: 0;
}

[data-section-id="camp-inclusions"] .inclusion-card.is-open .inclusion-card-overview-title {
  margin-top: 1.25rem;
}

@media (max-width: 760px) {
  [data-section-id="camp-inclusions"] .inclusions-grid {
    grid-template-columns: 1fr;
  }
}

/* Camp inclusions: full-width media accordion */
[data-section-id="camp-inclusions"] .inclusions-grid {
  grid-template-columns: repeat(2, minmax(0, 1fr));
  align-items: start;
  gap: 0.75rem;
  margin-top: 3rem;
  border: 0;
}

[data-section-id="camp-inclusions"] .inclusion-card,
[data-section-id="camp-inclusions"] .inclusion-card:hover {
  height: auto;
  min-height: 0;
  border: 1px solid rgba(255, 255, 255, 0.15);
  border-radius: var(--border-radius-md);
  background: transparent;
  box-shadow: none;
  transform: none;
}

[data-section-id="camp-inclusions"] .inclusion-card::after {
  content: "⌄";
  /* Sits on the fixed-height icon/title row (88px, see
     .inclusion-card-content grid-template-rows below), not on the whole
     card, so it stays aligned with the title in both open and closed
     states instead of drifting as the collapsed text row's height changes.
     The glyph is boxed and grid-centered so it lands on the row's optical
     middle; the small negative margin lifts the ⌄ character, which renders
     low inside its own line box. */
  top: 44px;
  right: 1.5rem;
  width: 2rem;
  height: 2rem;
  display: grid;
  place-items: center;
  border: 0;
  border-radius: 0;
  background: transparent;
  font-size: 1.6rem;
  line-height: 1;
  transform: translateY(-50%);
  margin-top: -0.18em;
}

[data-section-id="camp-inclusions"] .inclusion-card.is-open::after {
  background: transparent;
  border: 0;
  transform: translateY(-50%) rotate(180deg);
  margin-top: 0.18em;
}

[data-section-id="camp-inclusions"] .inclusion-card-content {
  display: grid;
  grid-template-columns: 3rem minmax(0, 1fr);
  grid-template-rows: 88px auto;
  height: auto;
  padding: 0 4rem;
  column-gap: 1.25rem;
  gap: 0;
  align-items: center;
}

[data-section-id="camp-inclusions"] .inclusion-card-top {
  grid-column: 1;
  grid-row: 1;
}

[data-section-id="camp-inclusions"] .inclusion-card-icon-wrapper {
  width: 2.25rem;
  height: 2.25rem;
  border: 0;
  border-radius: 0;
  background: transparent;
  backdrop-filter: none;
}

[data-section-id="camp-inclusions"] .inclusion-card:hover .inclusion-card-icon-wrapper {
  border: 0;
  background: transparent;
}

[data-section-id="camp-inclusions"] .inclusion-card-title {
  grid-column: 2;
  grid-row: 1;
  padding-right: 3rem;
  font-family: var(--font-body);
  font-size: 1.35rem;
  font-weight: 700;
}

[data-section-id="camp-inclusions"] .inclusion-card-text {
  grid-column: 1 / -1;
  grid-row: 2;
  width: 100%;
  padding: 0;
  font-size: 1rem;
  line-height: 1.5;
  color: rgba(255, 255, 255, 0.7);
}

[data-section-id="camp-inclusions"] .inclusion-card-bottom {
  display: none;
}

[data-section-id="camp-inclusions"] .inclusion-card.is-open {
  height: auto;
  border-color: rgba(212, 122, 85, 0.45);
}

[data-section-id="camp-inclusions"] .inclusion-card.is-open .inclusion-card-text {
  padding-bottom: 1.25rem;
  max-height: 240px;
}

@media (max-width: 760px) {
  [data-section-id="camp-inclusions"] .inclusions-grid {
    grid-template-columns: 1fr;
  }

  [data-section-id="camp-inclusions"] .inclusion-card-content {
    padding: 0 1.25rem;
    grid-template-columns: 2.5rem minmax(0, 1fr);
    column-gap: 0.75rem;
  }

  [data-section-id="camp-inclusions"] .inclusion-card-title {
    font-size: 1.05rem;
  }

  [data-section-id="camp-inclusions"] .inclusion-card::after {
    right: 1.25rem;
  }

  [data-section-id="camp-inclusions"] .inclusion-card.is-open .inclusion-card-text {
    max-height: 320px;
  }
}

@media (prefers-reduced-motion: reduce) {
  html {
    scroll-behavior: auto;
  }

  *,
  *::before,
  *::after {
    animation-duration: 0.01ms !important;
    animation-iteration-count: 1 !important;
    transition-duration: 0.01ms !important;
    scroll-behavior: auto !important;
  }
}

/* --- POINTER TILT & SPOTLIGHT --- */
.tilt-spotlight {
  --tilt-rotate-x: 0deg;
  --tilt-rotate-y: 0deg;
  --spotlight-x: 50%;
  --spotlight-y: 50%;
  position: relative;
  isolation: isolate;
  transform: perspective(1000px) rotateX(var(--tilt-rotate-x)) rotateY(var(--tilt-rotate-y));
  transform-style: preserve-3d;
  transition: transform 500ms cubic-bezier(0.16, 1, 0.3, 1), box-shadow 350ms ease;
  will-change: transform;
}

.tilt-spotlight.is-tilting {
  transition-duration: 90ms;
}

.tilt-spotlight::before {
  content: '';
  position: absolute;
  inset: 0;
  z-index: 1;
  pointer-events: none;
  opacity: 0;
  background: radial-gradient(260px circle at var(--spotlight-x) var(--spotlight-y), rgba(255, 255, 255, 0.34), rgba(232, 241, 245, 0.1) 28%, transparent 68%);
  mix-blend-mode: screen;
  transition: opacity 220ms ease;
}

.tilt-spotlight:hover::before {
  opacity: 1;
}

.experience-path-card.tilt-spotlight .experience-path-content,
.inclusion-card.tilt-spotlight .inclusion-card-content {
  transform: translateZ(18px);
}

[data-section-id="camp-inclusions"] .inclusion-card.tilt-spotlight,
[data-section-id="camp-inclusions"] .inclusion-card.tilt-spotlight:hover {
  transform: perspective(1000px) rotateX(var(--tilt-rotate-x)) rotateY(var(--tilt-rotate-y));
}

@media (hover: none), (pointer: coarse), (prefers-reduced-motion: reduce) {
  .tilt-spotlight,
  [data-section-id="camp-inclusions"] .inclusion-card.tilt-spotlight,
  [data-section-id="camp-inclusions"] .inclusion-card.tilt-spotlight:hover {
    transform: none;
    transition: none;
  }

  .tilt-spotlight::before {
    display: none;
  }
}

/* --- Blog: three featured stories, compact archive and modal reader --- */
.blog-section-heading {
  margin-bottom: 3rem;
}

.blog-featured-grid {
  display: grid;
  grid-template-columns: minmax(0, 1.12fr) minmax(320px, 0.88fr);
  grid-template-rows: repeat(2, minmax(260px, 1fr));
  gap: 1rem;
  max-width: 1180px;
  margin: 0 auto;
}

.blog-featured-card {
  position: relative;
  min-height: 290px;
  overflow: hidden;
  isolation: isolate;
  border: none;
  border-radius: 26px;
  background: var(--color-sea-dark);
  color: #fff;
}

.blog-featured-card--primary {
  grid-row: 1 / 3;
  min-height: 596px;
}

.blog-featured-card-bg,
.blog-featured-card-overlay {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
}

.blog-featured-card-bg {
  object-fit: cover;
  transition: transform 0.8s cubic-bezier(0.2, 0.7, 0.2, 1);
}

.blog-featured-card-overlay {
  z-index: 1;
  /* Bottom-weighted scrim: keeps the headline legible without boxing the photo
     in a dark frame. */
  background: linear-gradient(to top, rgba(7, 25, 38, 0.9) 0%, rgba(7, 25, 38, 0.52) 48%, rgba(7, 25, 38, 0.12) 100%);
  transition: background 0.4s ease;
}

/* On the two-column layout the primary card only carries copy in its lower
   third, so its photo can breathe almost to the edges. On stacked mobile every
   card is short and text-heavy, so it keeps the base scrim. */
@media (min-width: 681px) {
  .blog-featured-card--primary .blog-featured-card-overlay {
    background: linear-gradient(to top, rgba(7, 25, 38, 0.82) 0%, rgba(7, 25, 38, 0.2) 44%, rgba(7, 25, 38, 0) 70%);
  }
}

.blog-featured-card-content {
  position: relative;
  z-index: 2;
  min-height: inherit;
  height: 100%;
  display: flex;
  flex-direction: column;
  justify-content: space-between;
  padding: clamp(1.4rem, 3vw, 2.5rem);
  pointer-events: none;
}

.blog-featured-card-top {
  display: flex;
  justify-content: flex-start;
}

.blog-featured-card .blog-featured-badge {
  border: 1px solid rgba(255, 255, 255, 0.5);
  background: rgba(10, 28, 42, 0.42);
  color: #fff;
  backdrop-filter: blur(10px);
}

.blog-featured-card-details {
  max-width: 54ch;
}

.blog-featured-category {
  display: block;
  margin-bottom: 0.85rem;
  color: var(--color-copper-light);
  font-size: 0.78rem;
  font-weight: 800;
  letter-spacing: 0.13em;
  text-transform: uppercase;
  text-shadow: 0 1px 10px rgba(7, 25, 38, 0.5);
}

.blog-featured-card h2 {
  margin: 0;
  color: #fff;
  font-size: clamp(1.65rem, 3vw, 3.4rem);
  line-height: 1.02;
  text-shadow: 0 1px 14px rgba(7, 25, 38, 0.5);
}

.blog-featured-card:not(.blog-featured-card--primary) h2 {
  font-size: clamp(1.45rem, 2.2vw, 2.25rem);
}

.blog-featured-card p {
  margin: 1rem 0 1.15rem;
  color: rgba(255, 255, 255, 0.78);
  font-size: 0.9rem;
  line-height: 1.55;
  text-shadow: 0 1px 10px rgba(7, 25, 38, 0.45);
  display: -webkit-box;
  -webkit-box-orient: vertical;
  -webkit-line-clamp: 2;
  overflow: hidden;
}

.blog-featured-read {
  display: inline-flex;
  align-items: center;
  gap: 0.55rem;
  color: #fff;
  font-size: 0.8rem;
  font-weight: 800;
  letter-spacing: 0.04em;
  text-transform: uppercase;
  text-shadow: 0 1px 10px rgba(7, 25, 38, 0.45);
}

.blog-featured-hitarea {
  position: absolute;
  inset: 0;
  z-index: 3;
  width: 100%;
  border: 0;
  background: transparent;
  cursor: pointer;
}

.blog-featured-card::after {
  content: "+";
  position: absolute;
  top: 1.35rem;
  right: 1.35rem;
  z-index: 4;
  width: 2.8rem;
  height: 2.8rem;
  display: grid;
  place-items: center;
  border: 1px solid rgba(255, 255, 255, 0.62);
  border-radius: 50%;
  color: #fff;
  font-size: 1.5rem;
  pointer-events: none;
  transition: transform 0.35s ease, background-color 0.35s ease;
}

.blog-featured-card:hover .blog-featured-card-bg,
.blog-featured-card:focus-within .blog-featured-card-bg {
  transform: scale(1.045);
}

.blog-featured-card:hover::after,
.blog-featured-card:focus-within::after {
  transform: rotate(45deg);
  background: var(--color-copper);
  border-color: var(--color-copper);
}

.blog-featured-hitarea:focus-visible {
  outline: 3px solid var(--color-copper);
  outline-offset: -5px;
  border-radius: 26px;
}

.blog-card-meta {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 0.75rem;
  color: var(--color-text-light);
  font-size: 0.78rem;
}

.blog-featured-badge {
  display: inline-flex;
  align-items: center;
  padding: 0.35rem 0.65rem;
  border-radius: 999px;
  background: #fff4eb;
  color: var(--color-copper-dark);
  font-size: 0.7rem;
  font-weight: 800;
  letter-spacing: 0.08em;
  text-transform: uppercase;
}

.blog-card-link,
.blog-list-action {
  appearance: none;
  border: 0;
  background: transparent;
  cursor: pointer;
  padding: 0;
  font-family: inherit;
}

.blog-card-link:focus-visible,
.blog-list-action:focus-visible,
.blog-reader-close:focus-visible {
  outline: 3px solid var(--color-copper);
  outline-offset: 4px;
}

.blog-list-heading {
  max-width: 1100px;
  margin: 5.5rem auto 2rem;
  padding-top: 2rem;
  border-top: 1px solid rgba(21, 62, 92, 0.12);
}

.blog-list-heading h2 {
  font-size: clamp(2rem, 4vw, 3.3rem);
}

.blog-list {
  display: grid;
  max-width: 1100px;
  margin: 0 auto;
  border-top: 1px solid rgba(21, 62, 92, 0.12);
}

.blog-list-item {
  display: grid;
  grid-template-columns: 150px minmax(0, 1fr) auto;
  align-items: start;
  gap: 1.5rem;
  padding: 1.4rem 0;
  border-bottom: 1px solid rgba(21, 62, 92, 0.12);
}

/* Text column reads from the top edge of the thumbnail; the "Read" link stays
   optically centred against the row. */
.blog-list-item > .blog-list-action {
  align-self: center;
}

.blog-list-copy .blog-card-meta {
  align-items: baseline;
}

.blog-list-item > img {
  width: 150px;
  height: 104px;
  object-fit: cover;
  border-radius: var(--border-radius-sm);
}

.blog-list-copy h2 {
  margin: 0.35rem 0;
  color: var(--color-sea-primary);
  font-size: clamp(1.25rem, 2vw, 1.75rem);
}

.blog-list-copy p {
  margin: 0;
  color: var(--color-text-light);
  font-size: 0.9rem;
  line-height: 1.55;
  display: -webkit-box;
  -webkit-box-orient: vertical;
  -webkit-line-clamp: 2;
  overflow: hidden;
}

.blog-list-action {
  display: inline-flex;
  align-items: center;
  gap: 0.5rem;
  color: var(--color-copper-dark);
  font-weight: 800;
}

.blog-reader-open {
  overflow: hidden;
}

.blog-reader-modal[hidden] {
  display: none;
}

.blog-reader-modal {
  position: fixed;
  inset: 0;
  z-index: 10000;
  display: grid;
  place-items: center;
  padding: clamp(0.5rem, 2vw, 2rem);
}

.blog-reader-backdrop {
  position: absolute;
  inset: 0;
  background: rgba(7, 20, 30, 0.78);
  backdrop-filter: blur(8px);
}

.blog-reader-panel {
  position: relative;
  width: min(1120px, 100%);
  max-height: calc(100vh - clamp(1rem, 4vw, 4rem));
  overflow-y: auto;
  overscroll-behavior: contain;
  background: #f8f6f1;
  box-shadow: 0 28px 90px rgba(0, 0, 0, 0.38);
  animation: blogReaderIn 0.45s cubic-bezier(0.2, 0.7, 0.2, 1);
}

@keyframes blogReaderIn {
  from {
    opacity: 0;
    transform: translateY(24px) scale(0.985);
  }
  to {
    opacity: 1;
    transform: translateY(0) scale(1);
  }
}

.blog-reader-close {
  position: sticky;
  top: 1rem;
  z-index: 5;
  float: right;
  display: inline-flex;
  align-items: center;
  gap: 0.5rem;
  margin: 1rem 1rem -4rem 0;
  padding: 0.7rem 1rem;
  border: 0;
  border-radius: 999px;
  background: rgba(10, 28, 42, 0.94);
  color: #fff;
  cursor: pointer;
  font-weight: 800;
  box-shadow: var(--shadow-md);
}

.blog-reader-close [aria-hidden="true"] {
  font-size: 1.4rem;
  line-height: 1;
}

.blog-modal-hero {
  height: min(52vh, 520px);
  overflow: hidden;
}

.blog-modal-hero img {
  width: 100%;
  height: 100%;
  object-fit: cover;
}

.blog-modal-body {
  max-width: 780px;
  margin: 0 auto;
  padding: clamp(2rem, 7vw, 6rem) clamp(1.3rem, 5vw, 4rem);
}

.blog-modal-body > .btn {
  margin-top: clamp(2rem, 6vw, 4rem);
}

.blog-modal-body > h2 {
  margin: 1rem 0 2.5rem;
  color: var(--color-sea-dark);
  font-size: clamp(2.4rem, 5.5vw, 4.8rem);
  line-height: 0.98;
}

.blog-modal-copy h3,
.blog-modal-copy h4 {
  margin: 2rem 0 0.7rem;
  color: var(--color-sea-primary);
}

.blog-modal-copy p,
.blog-modal-copy li {
  color: var(--color-text-light);
  line-height: 1.8;
}

.blog-modal-copy ul,
.blog-modal-copy ol {
  padding-left: 1.4rem;
}

.blog-modal-copy blockquote {
  margin: 2.5rem 0;
  padding: 1.25rem 0 1.25rem 1.5rem;
  border-left: 4px solid var(--color-copper);
  color: var(--color-sea-primary);
  font-family: var(--font-heading);
  font-size: clamp(1.25rem, 2.5vw, 1.75rem);
  font-style: italic;
  line-height: 1.45;
}

.blog-content-image {
  margin-block: clamp(2rem, 5vw, 4rem);
  margin-inline: clamp(-3rem, -4vw, 0rem);
}

.blog-content-image img {
  display: block;
  width: 100%;
  max-height: 680px;
  object-fit: cover;
  border-radius: 2px;
}

.blog-content-image figcaption {
  display: flex;
  justify-content: space-between;
  gap: 1rem;
  padding-top: 0.75rem;
  color: var(--color-text-light);
  font-size: 0.82rem;
  line-height: 1.5;
}

.blog-content-image figcaption small {
  flex: none;
  color: var(--color-copper-dark);
  font-size: 0.72rem;
  font-weight: 700;
  letter-spacing: 0.04em;
  text-transform: uppercase;
}

.blog-modal-gallery {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 0.8rem;
  margin: 3rem 0;
}

.blog-modal-gallery img {
  width: 100%;
  aspect-ratio: 4 / 3;
  object-fit: cover;
}

.blog-modal-gallery img:first-child:nth-last-child(odd) {
  grid-column: 1 / -1;
  aspect-ratio: 16 / 9;
}

@media (max-width: 680px) {
  .blog-featured-grid {
    grid-template-columns: 1fr;
    grid-template-rows: none;
  }

  .blog-featured-card,
  .blog-featured-card--primary {
    grid-row: auto;
    min-height: 380px;
  }

  .blog-list-item {
    grid-template-columns: 96px minmax(0, 1fr);
    gap: 1rem;
  }

  .blog-list-item > img {
    width: 96px;
    height: 96px;
  }

  .blog-list-action {
    grid-column: 2;
    justify-self: start;
  }

  .blog-list-copy p {
    display: none;
  }

  .blog-modal-gallery {
    grid-template-columns: 1fr;
  }

  .blog-modal-gallery img:first-child:nth-last-child(odd) {
    grid-column: auto;
    aspect-ratio: 4 / 3;
  }
}

/* ============================================================
   BRANDBOOK 2026-2027 LAYER
   Everything below implements the LVKC Brand Guide (BrandBook.pdf):
   §07 palette · §08 auxiliary graphics · §09 type system · §11 web mockups.
   Assets in /assets/images/brand/ are true vectors extracted from the
   brandbook .ai files. Mono SVGs use fill="currentColor", so they are
   painted via CSS mask (see .brand-mask) and colored with `color:`.
   ============================================================ */

/* --- BRAND VECTOR MASKS --- */
.brand-mask {
  display: inline-block;
  background-color: currentColor;
  -webkit-mask: var(--brand-src) no-repeat center / contain;
  mask: var(--brand-src) no-repeat center / contain;
  flex-shrink: 0;
}

/* Wordmark + logo variations (§05) */
.brand-logo-solid    { --brand-src: url('/assets/images/brand/logo-solid.svg');    aspect-ratio: 1700 / 1117; }
.brand-logo-outline  { --brand-src: url('/assets/images/brand/logo-outline.svg');  aspect-ratio: 1716 / 897; }
.brand-wordmark-line { --brand-src: url('/assets/images/brand/el-wordmark-line.svg');  aspect-ratio: 1906 / 208; }
.brand-wordmark-stack{ --brand-src: url('/assets/images/brand/el-wordmark-stack.svg'); aspect-ratio: 1448 / 613; }

/* Hand-drawn icons (What we offer card, §11) */
.brand-icon-instructor { --brand-src: url('/assets/images/brand/icon-instructor.svg'); aspect-ratio: 65 / 216; }
.brand-icon-kite       { --brand-src: url('/assets/images/brand/icon-kite.svg');       aspect-ratio: 213 / 201; }
.brand-icon-vest       { --brand-src: url('/assets/images/brand/icon-vest.svg');       aspect-ratio: 155 / 199; }
.brand-icon-radio      { --brand-src: url('/assets/images/brand/icon-radio.svg');      aspect-ratio: 136 / 201; }

/* Auxiliary elements (§08): sol, ola, kite, viento, composición */
.brand-el-sol         { --brand-src: url('/assets/images/brand/el-sol.svg');         aspect-ratio: 918 / 591; }
.brand-el-ola         { --brand-src: url('/assets/images/brand/el-ola.svg');         aspect-ratio: 916 / 371; }
.brand-el-kite        { --brand-src: url('/assets/images/brand/el-kite.svg');        aspect-ratio: 880 / 804; }
.brand-el-viento      { --brand-src: url('/assets/images/brand/el-viento.svg');      aspect-ratio: 530 / 403; }
.brand-el-composition { --brand-src: url('/assets/images/brand/el-composition.svg'); aspect-ratio: 963 / 1000; }

/* Default sizes for common placements; override inline where needed. */
.brand-mask.as-icon    { height: 3.4rem; color: var(--color-sea-dark); }
.brand-mask.as-divider { height: 3rem;   color: var(--color-copper); opacity: 0.85; }
.brand-mask.as-sticker { height: 5.5rem; color: var(--color-sea-primary); }

/* --- SECTION WATERMARK (camp-dates mockup background) --- */
.texture-watermark {
  position: relative;
}

.texture-watermark::before {
  content: '';
  position: absolute;
  inset: 0;
  background-image: url('/assets/images/brand/logo-watermark.svg');
  background-size: 46rem auto;
  background-position: -8rem 30%;
  background-repeat: no-repeat;
  pointer-events: none;
}

.texture-watermark > * {
  position: relative;
}

/* --- PRICING CARDS → §11 school-packages mockup --- */
/* Light cards read in brand blue, not navy/grey */
.pricing-card h3,
.pricing-card .pricing-price {
  color: var(--color-sea-primary);
}

.pricing-features li::before {
  color: var(--color-copper);
}

/* Featured card: solid navy with white text (first card in mockup) */
.pricing-card.featured {
  background-color: var(--color-sea-dark);
  border: none;
}

.pricing-card.featured h3,
.pricing-card.featured .pricing-price,
.pricing-card.featured .room-count,
.pricing-card.featured .pricing-features li,
.pricing-card.featured p {
  color: var(--color-text-white);
}

.pricing-card.featured .pricing-features {
  border-top-color: rgba(255, 255, 255, 0.15);
}

.pricing-card.featured .featured-tag {
  background-color: var(--color-copper);
}

/* Pill outline CTA inside cards (mockup "Book class") */
.pricing-card .btn-secondary {
  border-color: var(--color-sea-primary);
  color: var(--color-sea-primary);
}

.pricing-card.featured .btn,
.pricing-card.featured .btn-secondary {
  background: transparent;
  border-color: var(--color-text-white);
  color: var(--color-text-white);
}

.pricing-card.featured .btn:hover {
  background-color: rgba(255, 255, 255, 0.12);
}

/* --- HEADER: align glass tints with brand palette --- */
header {
  background-color: rgba(251, 248, 243, 0.85);
}

header.header-over-hero {
  background-color: rgba(11, 23, 51, 0.15) !important;
}

/* --- NAV + FOOTER WORDMARK (replaces the old PNG circle logo) --- */
/* Deliberate trade-off: the wordmark is a CSS mask over the brandbook vector,
   not an <img>, so it recolours per background (blue on light, white over the
   hero). The cost is that the visual editor no longer offers an "Imagen" field
   for the logo — swapping it means replacing logo-solid.svg or editing this
   rule. Agreed with the owner: the logo is brand identity, not page content. */
.logo .logo-mark {
  height: 2.35rem;
  color: var(--color-sea-primary);
  transition: var(--transition-smooth);
}

header.header-over-hero .logo-mark {
  color: var(--color-text-white);
}

/* The lvkc_logo.png file carries ~23% transparent padding on every side, which
   pushed the visible wordmark in from the column edge and down from the other
   columns' headings. In the footer we crop that dead space with a fixed-height
   clip box + negative margins, so the visible logo aligns flush to the brand
   column's left edge and top (matching the Information/Others/Get in Touch
   headings) and can be sized up without breaking that alignment. */
.footer-col.brand h2.footer-brand-mark {
  margin-bottom: 1.35rem;
  height: 2.95rem;      /* visible wordmark height at 5.5rem source height */
  overflow: hidden;
}

.footer-brand-mark .brand-mask {
  height: 3.2rem;
  color: var(--color-text-white);
}

/* lvkc_logo.png footer mark: footer background is always the dark navy, so
   (unlike .logo-img in the header) this filter is unconditional rather than
   gated behind .header-over-hero. */
.footer-brand-mark .footer-logo-img {
  height: 5.5rem;
  width: auto;
  max-width: none;
  display: block;
  filter: brightness(0) invert(1);
  margin: -1.29rem 0 0 -2.66rem;   /* pull the transparent bleed out of view */
}

/* Bold in a heading is bold only — it no longer forces italic (LVKC editor
   feedback, 2026-08-25). Italic is now an independent toggle in the rich-text
   editor (wraps in <em>, which browsers italicize by default with no CSS
   needed here); combining both is still possible by turning on both toggles,
   it's just no longer automatic. `.dates-banner-light h2 strong` keeps its
   own non-italic override further up the sheet now that nothing here fights it. */
h1 strong,
h2 strong {
  font-weight: 700;
}

/* Per-block text alignment set from the web editor's alignment control.
   !important because it represents an explicit editorial override that must
   win over whatever alignment a section's own layout rules default to. */
[data-lvkc-align="left"] {
  text-align: left !important;
}
[data-lvkc-align="center"] {
  text-align: center !important;
}
[data-lvkc-align="right"] {
  text-align: right !important;
}
[data-lvkc-align="justify"] {
  text-align: justify !important;
}

/* --- CAMP DATE CARDS → §11 mockup pill refinement --- */
.camp-date-card {
  border-radius: 22px;
  border-color: transparent;
}

.camp-date-info h4 {
  font-weight: 600;
  color: var(--color-sea-dark);
}

/* --- SCHOOL INCLUSION ICONS: bare hand-drawn marks (mockup card) --- */
.school-inclusion-item-card .icon-circle {
  background-color: transparent;
  border-radius: 0;
  color: var(--color-sea-dark);
  width: auto;
  height: 64px;
}

.school-inclusion-item-card:hover .icon-circle {
  background-color: transparent;
  color: var(--color-copper);
}

/* --- OFFER STRIP: white 4-icon card from §11 "What we offer" mockup --- */
.offer-strip {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: 1.5rem;
  background-color: var(--color-text-white);
  border-radius: 24px;
  box-shadow: var(--shadow-md);
  padding: 2.25rem 2rem;
}

.offer-strip-item {
  text-align: center;
}

.offer-strip-item .brand-mask {
  height: 3rem;
  color: var(--color-sea-dark);
  margin-bottom: 0.85rem;
}

.offer-strip-item h5 {
  font-size: 0.98rem;
  font-weight: 700;
  color: var(--color-sea-dark);
  margin-bottom: 0.2rem;
}

.offer-strip-item p {
  font-size: 0.8rem;
  color: var(--color-text-light);
  margin: 0;
}

@media (max-width: 768px) {
  .offer-strip {
    grid-template-columns: repeat(2, 1fr);
  }
}

/* --- SOUL PANEL (§11 about mockup: rounded navy block with value cards) --- */
.soul-panel {
  margin-top: 6rem;
  background-color: var(--color-sea-dark);
  border-radius: var(--border-radius-lg);
  padding: 4.5rem 3rem;
}

.soul-panel .section-header h2 {
  color: var(--color-text-white);
}

.soul-panel .section-header p {
  color: rgba(255, 255, 255, 0.75);
}

.soul-panel .tagline {
  color: var(--color-copper);
}

.soul-values-grid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(280px, 1fr));
  gap: 2rem;
}

.soul-value-card {
  background-color: var(--color-text-white);
  border-radius: var(--border-radius-md);
  padding: 2rem 1.75rem;
}

.soul-value-card h4 {
  color: var(--color-sea-primary);
  margin-bottom: 0.5rem;
  font-size: 1.25rem;
}

.soul-value-card p {
  font-size: 0.9rem;
  color: var(--color-text-light);
  line-height: 1.6;
  margin-bottom: 0;
}

@media (max-width: 768px) {
  .soul-panel {
    padding: 3rem 1.5rem;
  }
}

/* --- FAQ: pill cards + category eyebrows (brandbook §10 FAQ treatment) --- */
.faq-category-title {
  text-align: center;
  margin-bottom: 2rem;
  color: var(--color-copper-dark);
  font-size: 1.05rem;
  font-weight: 500;
}

.faq-item {
  border-radius: 22px;
  border-color: transparent;
}

/* Opened question flips to terracota — the "figura sólida para resaltar
   información importante" cue from the brandbook's FAQ cards. */
.faq-item.open {
  box-shadow: var(--shadow-md);
}

.faq-item.open .faq-question {
  color: var(--color-copper-dark);
}

.faq-question {
  color: var(--color-sea-dark);
  font-weight: 600;
}

.faq-item:hover {
  border-color: rgba(176, 85, 49, 0.25);
}

.faq-answer {
  background-color: #FAF7F2;
}

/* --- TESTIMONIALS: review cards as brandbook pills --- */
.google-review-card {
  border-radius: 24px;
  border-color: transparent;
}

/* Reviews sit over the watermark, so they need an opaque backdrop. */
.texture-watermark .google-reviews-summary,
.texture-watermark .reviews-carousel {
  position: relative;
}

/* --- BLOG: brandbook treatment for the real featured/list components --- */
/* --color-copper-light was referenced by .blog-featured-category but never
   defined, so the eyebrow inherited white. Define it as a light terracota
   that stays legible over the dark photo cards. */
:root {
  --color-copper-light: #E29273;
}

.blog-featured-card {
  border-radius: 24px;
}

/* Sentence case: ALL CAPS is social-only in the brandbook (§09). */
.blog-featured-category {
  font-size: 0.95rem;
  font-weight: 500;
  letter-spacing: 0;
  text-transform: none;
}

.blog-list-copy h2 {
  color: var(--color-sea-dark);
  font-weight: 600;
}

.blog-list-item > img {
  border-radius: 16px;
}

/* Article image + title open the reader, same as the "Read" button. */
.blog-list-item > img.blog-open-post,
.blog-list-copy h2.blog-open-post {
  cursor: pointer;
}

.blog-list-copy h2.blog-open-post:hover {
  color: var(--color-copper-dark);
}

.blog-list-item > img.blog-open-post:hover {
  opacity: 0.92;
}

.blog-list-item > img.blog-open-post:focus-visible,
.blog-list-copy h2.blog-open-post:focus-visible {
  outline: 2px solid var(--color-copper-dark);
  outline-offset: 3px;
  border-radius: 4px;
}

/* Legacy .blog-card markup (kept in the page, rendered by some views) */
.blog-card {
  border-radius: 24px;
  border-color: transparent;
}

.blog-card-tag {
  color: var(--color-copper-dark);
  font-size: 0.98rem;
  font-weight: 500;
  text-transform: none;
  letter-spacing: 0;
}

.blog-card-title {
  color: var(--color-sea-dark);
  font-weight: 600;
}

.blog-card-featured {
  border: 2px solid var(--color-copper);
}

.blog-featured-badge {
  background: var(--color-copper);
  text-transform: none;
  letter-spacing: 0;
  font-weight: 600;
  font-size: 0.75rem;
}

/* Card body copy: muted on the light cards, white on the navy featured card.
   Previously an inline style="color:..." on each <p>, which beat the stylesheet
   and left grey-on-navy at 2.66:1 contrast once the featured card went dark. */
.pricing-card-desc {
  font-size: 0.9rem;
  color: var(--color-text-light);
}

.pricing-card.featured .pricing-card-desc {
  color: rgba(255, 255, 255, 0.82);
}

/* --- CONTRAST GUARDS FOR THE NEW PALETTE --- */
/* The brandbook heading colour (navy) is set globally on h1-h4, which broke
   headings that used to inherit white from a dark container. .cta-banner is
   the one place that relied on that inheritance. */
.cta-banner h1,
.cta-banner h2,
.cta-banner h3,
.cta-banner h4 {
  color: var(--color-text-white);
}

/* Brandbook terracota (#B05531) is a darker red than the previous accent, so
   on navy it drops to ~3.5:1 — under AA for the small eyebrow text. Dark
   surfaces get the lighter tint instead. */
.section-bg-dark .tagline,
.section-bg-dark .section-header .tagline,
.soul-panel .tagline {
  color: var(--color-copper-light);
}

/* --- ROOM AMENITY ICONS (camps room selector) --- */
/* Injected by app.js as the feature list is rebuilt per room; see
   amenityIconClass(). Rows without a mapped icon keep the ✓ bullet. */
.brand-amenity-bed  { --brand-src: url('/assets/images/brand/custom/brand-bed.svg');  aspect-ratio: 1; }
.brand-amenity-bath { --brand-src: url('/assets/images/brand/custom/brand-bath.svg'); aspect-ratio: 1; }
.brand-amenity-ac   { --brand-src: url('/assets/images/brand/custom/brand-ac.svg');   aspect-ratio: 1; }

.amenity-icon {
  width: 1.15rem;
  height: 1.15rem;
  color: var(--color-copper);
}

/* The ✓ is the fallback bullet, so drop it where a real icon took its place. */
.room-preview-details li.has-amenity-icon::before {
  content: none;
}

/* --- COMPACT TUNING (desktop) --------------------------------------------
   The home "Two ways to kite with us" selector and the camps "Dates and
   Prices" dates + room widget ran taller than the viewport. This trims their
   vertical bulk only — grid structure, colours and type hierarchy are
   untouched, and mobile keeps its own stacked sizing (hence min-width: 900). */
@media (min-width: 900px) {
  /* Home — equal-weight experience selector */
  .editorial-experience {
    padding-top: clamp(3.25rem, 5vw, 5rem);
    padding-bottom: clamp(3.25rem, 5vw, 5rem);
  }

  .editorial-intro {
    margin-bottom: 2rem;
  }

  .editorial-intro h2 {
    font-size: clamp(3rem, 4.6vw, 5rem);
  }

  .experience-path-card,
  .experience-path-content {
    min-height: 460px;
  }

  .experience-path-content {
    padding: clamp(1.75rem, 3vw, 3rem);
  }

  .experience-path-content h3 {
    font-size: clamp(2.4rem, 3.6vw, 4rem);
  }

  /* Camps — combined dates + room booking widget.
     Tightened so the whole two-column widget fits in one viewport. */
  #pricing {
    padding-top: 3rem;
    padding-bottom: 3rem;
  }

  #pricing .section-header {
    margin-bottom: 1.75rem;
  }

  #pricing .section-header p {
    margin-bottom: 0.75rem;
  }

  #pricing .combo-discount-badge {
    margin-top: 0.85rem;
    padding: 0.55rem 1.15rem;
    font-size: 0.82rem;
  }

  #pricing .camp-combo-layout {
    gap: 2rem;
  }

  #pricing .camp-combo-col:first-child {
    padding-right: 2rem;
  }

  #pricing .combo-step-label {
    margin-bottom: 0.85rem;
  }

  #pricing .combo-step-num {
    font-size: 1.25rem;
  }

  #pricing .combo-step-text {
    font-size: 1rem;
  }

  #pricing .camp-dates-list {
    gap: 0.5rem;
  }

  #pricing .camp-date-card {
    padding: 0.65rem 1.1rem;
    gap: 0.75rem;
  }

  #pricing .camp-date-info h4 {
    font-size: 1rem;
    margin-bottom: 0.1rem;
  }

  #pricing .camp-date-days {
    font-size: 0.8rem;
  }

  #pricing .room-selector-layout {
    gap: 1rem;
  }

  #pricing .room-tabs {
    gap: 0.5rem;
  }

  #pricing .room-tab-btn {
    padding: 0.6rem 0.9rem;
  }

  #pricing .room-tab-btn h4 {
    font-size: 0.9rem;
  }

  #pricing .room-preview-display {
    padding: 1.25rem 1.5rem;
  }

  #pricing .room-preview-media-row {
    gap: 1.5rem;
  }

  #pricing .room-preview-image {
    width: 260px;
  }

  #pricing .room-preview-header {
    margin-bottom: 0.5rem;
  }

  #pricing .room-preview-header h3,
  #pricing .room-preview-media-row.no-photo .room-preview-header h3 {
    font-size: 1.4rem;
    margin-bottom: 0.3rem;
  }

  #pricing .room-preview-media-row.no-photo .room-preview-header-block p {
    font-size: 1rem;
  }

  #pricing #room-price-display {
    font-size: 1.9rem !important;
  }

  #pricing .room-preview-footer {
    margin-top: 1rem;
    padding-top: 1rem;
  }

  #pricing .room-preview-details {
    margin-top: 0.85rem;
    gap: 0.5rem 2rem;
  }

  #pricing .camp-combo-summary {
    margin-top: 1rem;
    padding: 1rem 1.5rem;
  }
}

/* --- HOME · CONNECTION TO LA VENTANA ------------------------------------
   Split editorial block: full-height panoramic photo of La Ventana on the
   left, stacked eyebrow + headline + supporting copy on the right. */
.ventana-connection {
  padding: 0;
  background-color: #FAF7F2;
  display: grid;
  grid-template-columns: 1fr 1fr;
  align-items: stretch;
}

.ventana-connection-media {
  overflow: hidden;
}

.ventana-connection-media img {
  width: 100%;
  height: 100%;
  min-height: 520px;
  object-fit: cover;
  object-position: center;
}

.ventana-connection-inner {
  display: flex;
  flex-direction: column;
  justify-content: center;
  gap: 1.25rem;
  padding: clamp(3rem, 6vw, 5.5rem);
}

.ventana-connection-eyebrow {
  display: block;
  font-size: 1.05rem;
  font-weight: 500;
  color: var(--color-copper-dark);
  margin-bottom: 0.75rem;
}

.ventana-connection-heading h2 {
  margin: 0;
  font-size: clamp(2rem, 3.4vw, 3rem);
  line-height: 1.08;
  letter-spacing: -0.01em;
  color: var(--color-sea-dark);
}

.ventana-connection-text p {
  margin: 0;
  max-width: 46ch;
  color: var(--color-text-light);
  font-size: 1.12rem;
  line-height: 1.65;
}

@media (max-width: 900px) {
  .ventana-connection {
    grid-template-columns: 1fr;
  }

  .ventana-connection-media img {
    min-height: 0;
    height: clamp(220px, 42vw, 360px);
  }

  .ventana-connection-text p {
    max-width: none;
  }
}

/* --- KITE GALLERY STRIP (full-bleed horizontal carousel) --- */
.kite-gallery-strip {
  padding: clamp(4rem, 6vw, 6.5rem) 0;
  background-color: var(--color-sea-dark);
  overflow: hidden;
}

.kite-gallery-head {
  max-width: 780px;
  margin: 0 auto clamp(2.5rem, 3.5vw, 3.5rem);
  padding: 0 clamp(1.25rem, 4vw, 4.5rem);
  text-align: center;
}

.kite-gallery-head .tagline {
  display: block;
  font-size: 0.72rem;
  font-weight: 800;
  letter-spacing: 0.18em;
  text-transform: uppercase;
  color: var(--color-copper);
  margin-bottom: 1rem;
}

.kite-gallery-head h2 {
  margin: 0 auto;
  max-width: 18ch;
  font-size: clamp(2.5rem, 4.6vw, 4.25rem);
  line-height: 0.95;
  letter-spacing: -0.04em;
  font-weight: 600;
  color: var(--color-text-white);
}

.kite-gallery-hint {
  max-width: 46rem;
  margin: 1rem auto 0;
  font-size: clamp(1rem, 1.25vw, 1.3rem);
  line-height: 1.45;
  color: rgba(255, 255, 255, 0.7);
}

.kite-gallery-viewport {
  position: relative;
}

.kite-gallery-track {
  display: grid;
  grid-auto-flow: column;
  grid-auto-columns: min(69vw, 1160px);
  gap: clamp(1rem, 1.5vw, 1.5rem);
  overflow-x: auto;
  scroll-snap-type: x mandatory;
  scroll-behavior: smooth;
  padding: 0 clamp(2.5rem, 4vw, 4.5rem);
  scrollbar-width: none;
  -webkit-overflow-scrolling: touch;
  cursor: grab;
}

.kite-gallery-track::-webkit-scrollbar {
  display: none;
}

.kite-gallery-track.is-dragging {
  scroll-snap-type: none;
  scroll-behavior: auto;
  cursor: grabbing;
}

.kite-gallery-track img {
  width: 100%;
  height: clamp(360px, 34vw, 570px);
  object-fit: cover;
  border-radius: var(--border-radius-md);
  scroll-snap-align: center;
  user-select: none;
  -webkit-user-drag: none;
}

.kite-gallery-nav {
  position: absolute;
  top: 50%;
  transform: translateY(-50%);
  width: clamp(3rem, 3.6vw, 3.75rem);
  height: clamp(3rem, 3.6vw, 3.75rem);
  border: none;
  border-radius: 50%;
  background: rgba(255, 255, 255, 0.9);
  color: var(--color-sea-dark);
  font-size: clamp(1.5rem, 1.8vw, 1.9rem);
  line-height: 1;
  cursor: pointer;
  display: flex;
  align-items: center;
  justify-content: center;
  box-shadow: var(--shadow-md);
  transition: var(--transition-smooth);
  z-index: 2;
}

.kite-gallery-nav:hover {
  background: #fff;
}

.kite-gallery-nav svg {
  display: block;
  width: 1.5rem;
  height: 1.5rem;
  fill: none;
  stroke: currentColor;
  stroke-width: 2.25;
  stroke-linecap: round;
  stroke-linejoin: round;
}

.kite-gallery-nav:focus-visible {
  outline: 3px solid var(--color-yellow);
  outline-offset: 3px;
}

.kite-gallery-nav--prev {
  left: clamp(1rem, 2.1vw, 2.5rem);
}

.kite-gallery-nav--next {
  right: clamp(1rem, 2.1vw, 2.5rem);
}

@media (max-width: 768px) {
  .kite-gallery-strip {
    padding: 3.5rem 0;
  }

  .kite-gallery-head {
    padding-inline: 1.25rem;
  }

  .kite-gallery-head h2 {
    font-size: clamp(2.5rem, 12vw, 4rem);
  }

  .kite-gallery-track {
    grid-auto-columns: 86vw;
    padding-inline: 1.25rem;
  }

  .kite-gallery-nav {
    width: 2.75rem;
    height: 2.75rem;
    font-size: 1.4rem;
  }

  .kite-gallery-nav--prev {
    left: 0.25rem;
  }

  .kite-gallery-nav--next {
    right: 0.25rem;
  }

  .kite-gallery-track img {
    height: clamp(300px, 78vw, 440px);
  }
}

@media (prefers-reduced-motion: reduce) {
  .kite-gallery-track {
    scroll-behavior: auto;
  }

  .kite-gallery-nav,
  .floating-cta-container {
    transition: none;
  }
}