/* =========================================
   1. GLOBAL VARIABLES & RESET
   ========================================= */

.section-title {
  font-family: 'Playfair Display', serif; 
  font-size: clamp(2.2rem, 5vw, 3rem);     
  text-transform: none; /* Changed from uppercase */
  letter-spacing: 2px;
  line-height: 1.1;
  text-align: center;
  margin-bottom: 1.2rem;
  color: var(--text-dark);
}

.section-subtitle {
  font-family: 'DM Sans', sans-serif;
  font-size: clamp(1rem, 2vw, 1.2rem);
  text-align: center;
  color: var(--text-muted);
  max-width: 650px;
  margin: 0 auto 4rem;
  line-height: 1.6;
}

/* Specific alignment override only - NO font-size here */
.editorial-header h2.section-title,
.editorial-header .section-subtitle {
  text-align: left !important;
}

   :root {
  /* Core Palette */
  --bg-sage: #A8B5A7;       
  --bg-sage-dark: #1a1a1a;  
  --bg-cream: #F2E6D8;
  --bg-green: #A8B5A7;
  --bg-cream-light: #F9F4EF; 
  --bg-darkgreen: #091109;
  --bg-white: #F0EBFC;
;

/* Standardized Font Families - Using Sans for both to match your image */
  --font-heading: 'DM Sans', sans-serif;
  --font-body: 'DM Sans', sans-serif;

  /* Fluid Typography Scale */
  --fs-h1: clamp(3rem, 8vw, 4.8rem);
  --fs-h2: clamp(2.2rem, 5vw, 2.8rem); /* Controlled Title Size */
  --fs-body: 1.1rem;
  
/* Colors & Spacing */
  --text-dark: #2C2C2C;
  --btn-primary-bg: #1c2c39; 
  --btn-primary-text: #F2E6D8;
}





/* THE FIX: Unified Header Rule */
h1, h2, .section-title {
  font-family: var(--font-heading) !important;
  font-weight: 800 !important;
  text-transform: none; /* Changed from uppercase */
  letter-spacing: -0.02em; 
  line-height: 1.1;
}

.section-title {
  font-size: var(--fs-h2) !important;
  text-align: center;
  margin-bottom: 1.2rem;

  /* Accents */
  --accent: #F9D776;        
  --accent-hover: #EBC965;
  --text-dark: #2C2C2C;     
  --text-muted: #555555;
  
  /* Spacing & Layout */
  --container-width: 1120px;
  --radius-lg: 2px;
  --radius-xl: 2px;
  
  /* Shadows */
  --shadow-soft: 0 10px 40px rgba(0, 0, 0, 0.08);
  --shadow-hover: 0 20px 50px rgba(0, 0, 0, 0.12);
  --transition-std: 0.3s cubic-bezier(0.25, 0.46, 0.45, 0.94);
}

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

html { scroll-behavior: smooth; }
body {
  margin: 0; padding: 0; width: 100%; overflow-x: hidden;
  font-family: system-ui, -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, sans-serif;
  color: var(--text-dark);
  background: #1a1a1a; 
  line-height: 1.6;
}

/* Typography Utilities */
h1, h2, h3, h4 { line-height: 1.2; margin: 0; font-weight: 700; color: var(--text-dark); }
p { margin-top: 0; margin-bottom: 1.5rem; }
a { color: inherit; transition: var(--transition-std); }
img { max-width: 100%; display: block; }

.container { width: min(var(--container-width), 100% - 3rem); margin-inline: auto; }
.text-center { text-align: center; }













/* =========================================
   3. HERO SECTION (Adjusted for Fixed Nav)
   ========================================= */
.hero {
  position: relative; 
  min-height: 100vh; /* Increased to 100vh to account for fixed nav height */
  display: flex; 
  flex-direction: column; 
  justify-content: center;
  padding-top: 100px; 
  overflow: hidden; 
}

.hero-bg {
  position: absolute;
  top: -5%;
  left: -5%;
  width: 110%;
  height: 110%;
  background-image: url('https://realiveco.com/Images/hero-silence.jpg');
  background-size: cover;
  background-position: center;
  z-index: 0;
  will-change: transform;
  pointer-events: none; /* Good practice so it doesn't block clicks */
}

.hero::before {
  content: ""; position: absolute; inset: 0; 
  background: rgba(0, 0, 0, 0.6);
  z-index: 1;
}
.hero-content { position: relative; z-index: 2; max-width: 850px; color: #ffffff; }

.eyebrow { text-transform: uppercase; letter-spacing: 0.25em; font-size: 0.9rem; color: var(--accent); margin-bottom: 1.5rem; font-weight: 700; display: inline-block; padding-bottom: 5px; border-bottom: 2px solid rgba(249, 215, 118, 0.3); }
.hero h1 { font-size: clamp(3rem, 5vw + 1rem, 4.8rem); line-height: 1.1; margin: 0 0 2rem; font-weight: 800; letter-spacing: -0.03em; color: #ffffff; }
.hero-text { color: rgba(255, 255, 255, 0.95); font-size: 1.35rem; max-width: 42rem; line-height: 1.7; margin-bottom: 3rem; font-weight: 400; }
.hero-actions { display: flex; flex-wrap: wrap; gap: 1.5rem; }

/* Global Buttons */
/* =========================================
   UNIFIED BUTTON SYSTEM
   ========================================= */
.btn {
  display: inline-flex; 
  align-items: center; 
  justify-content: center; 
  border-radius: 99px;
  padding: 1.1rem 2.5rem; 
  font-weight: 700; 
  font-size: 1.05rem; 
  text-decoration: none;
  transition: all var(--transition-std); 
  cursor: pointer; 
  border: none; 
  outline: none;
}

/* Primary Button: Force Brand Gold */
.btn-primary { 
  background-color: #F9D776 !important; 
  color: #2C2C2C !important; 
}

/* Secondary Button: Force Pure White */
.btn-solid-light { 
  background-color: #ffffff !important; 
  color: #2C2C2C !important; 
  border: 1px solid #ddd;
}

/* =========================================
   4. SECTIONS & LAYOUTS
   ========================================= */
.section { 
  padding-block: 8rem; 
  position: relative; 
  scroll-margin-top: 120px; 
}

/* Strict Background Classes */
.bg-sage { background-color: var(--bg-sage); }
.bg-cream { background-color: var(--bg-cream); }
.bg-darkgreen { background-color: var(--bg-darkgreen); }
.bg-white { background-color: var(--bg-white); }
.bg-green { background-color: var(--bg-green); }



.slant-top::before {
  content: ""; position: absolute; top: -50px; left: 0; right: 0; height: 50px;
  background: inherit; clip-path: polygon(0 100%, 100% 0, 100% 100%);
}

.section-title { text-align: center; font-size: 2.8rem; margin-bottom: 1.2rem; color: var(--text-dark); letter-spacing: -0.02em; }
.section-subtitle { text-align: center; color: var(--text-muted); max-width: 650px; margin: 0 auto 5rem; line-height: 1.8; font-size: 1.2rem; }

/* =========================================
   5. CARDS (Experiences & Philosophy)
   ========================================= */
.card-grid { display: grid; grid-template-columns: repeat(3, 1fr); gap: 2.5rem; }
.interactive-card {
  background: #fff; border-radius: var(--radius-lg); overflow: hidden;
  box-shadow: var(--shadow-soft); transition: transform var(--transition-std), box-shadow var(--transition-std);
  height: 100%; display: flex; flex-direction: column; position: relative; border: 1px solid rgba(0,0,0,0.03);
}
.interactive-card:hover { transform: translateY(-10px); box-shadow: var(--shadow-hover); border-color: rgba(0,0,0,0.05); }
.card-image { height: 260px; background-size: cover; background-position: center; position: relative; }
.card-image::after { content: ''; position: absolute; inset: 0; background: linear-gradient(to top, rgba(0,0,0,0.1), transparent); }
.card-body { padding: 2.5rem; flex-grow: 1; display: flex; flex-direction: column; }
.card-body h3 { margin: 0 0 1rem; font-size: 1.6rem; color: var(--text-dark); }
.card-body p { color: var(--text-muted); font-size: 1.05rem; margin: 0; line-height: 1.7; }

/* =========================================
   17. PREMIUM EVENT CARDS (Consolidated Fix)
   ========================================= */
.event-list {
  display: flex; flex-direction: column; gap: 1.5rem; max-width: 900px; margin: 0 auto;
}

/* The Main Card Container */
.event-card {
  background: #fff; 
  border-radius: 16px; 
  box-shadow: var(--shadow-soft); 
  border: 1px solid rgba(0,0,0,0.05);
  transition: all 0.3s ease; 
  overflow: hidden; 
  cursor: pointer;
  position: relative;
}

/* Hover Lift for the whole card */
.event-card:hover {
  transform: translateY(-4px); 
  box-shadow: var(--shadow-hover); 
  border-color: rgba(249, 215, 118, 0.4);
}

/* --- THE CHEVRON ANIMATION --- */

/* 1. Base State: The Circle */
.chevron-icon {
  width: 40px; 
  height: 40px; 
  border-radius: 50%; 
  background: #f5f5f5;
  display: flex; 
  align-items: center; 
  justify-content: center;
  /* This cubic-bezier creates the "bounce" */
  transition: all 0.4s cubic-bezier(0.175, 0.885, 0.32, 1.275); 
}

/* 2. Hover State: The "Peek" (Moves down 8px and grows) */
.event-card:hover .chevron-icon {
  transform: translateY(8px) scale(1.15); 
  background-color: var(--accent); 
  box-shadow: 0 0 0 4px rgba(249, 215, 118, 0.3);
  color: var(--text-dark);
}

/* 3. Open State: Rotates 180deg (Overrides the Peek) */
.event-card.is-open .chevron-icon {
  transform: rotate(180deg); 
  background: var(--accent); 
  box-shadow: none;
}

/* --- CARD STRUCTURE --- */

.event-header {
  padding: 1.5rem 2rem;
  display: flex; align-items: center; justify-content: space-between; gap: 1.5rem;
}

.event-meta-group { flex: 1; }

.event-date-pill {
  display: inline-block; font-size: 0.75rem; font-weight: 700; 
  text-transform: uppercase; letter-spacing: 0.5px;
  background: var(--bg-cream-light); color: var(--text-dark);
  padding: 6px 12px; border-radius: 99px; margin-bottom: 0.8rem;
}

.event-coords-link {
  font-size: 0.8rem; color: #888; text-decoration: underline; margin-left: 10px; cursor: pointer;
}
.event-coords-link:hover { color: var(--accent); }

.event-title { font-size: 1.4rem; margin: 0; color: var(--text-dark); font-weight: 700; line-height: 1.2; }
.event-sub { font-size: 0.95rem; color: var(--text-muted); margin-top: 4px; }

.event-action-col { display: flex; align-items: center; gap: 1.5rem; }

/* The Expanded Content (Hidden by Default) */
.event-body {
  display: grid; grid-template-rows: 0fr; transition: grid-template-rows 0.4s ease-out;
  background: #fafafa; border-top: 1px solid #eee;
}

.event-body-inner { overflow: hidden; } 

.event-card.is-open .event-body { grid-template-rows: 1fr; }

.event-hero-img {
  width: 100%; height: 200px; object-fit: cover; position: relative;
}
.img-overlay {
  position: absolute; bottom: 0; left: 0; right: 0;
  padding: 1.5rem; background: linear-gradient(to top, rgba(0,0,0,0.7), transparent);
  color: #fff; font-weight: 600; letter-spacing: 0.5px;
}

.event-details-content { padding: 2rem; display: grid; grid-template-columns: 2fr 1fr; gap: 2rem; }

.detail-list { list-style: none; padding: 0; margin: 0; font-size: 0.9rem; color: #555; }
.detail-list li { margin-bottom: 0.5rem; }

/* Responsive Header - Fixed Centering */
@media (max-width: 768px) {
  .event-header { 
    flex-direction: column; 
    align-items: center; 
    text-align: center;
    gap: 0.5rem; 
  }

  /* Merged Logic: Grouping Date and Location tightly */
  .flex-line {
    display: flex !important;
    flex-direction: column !important;
    align-items: center !important;
    gap: 4px !important; 
    margin-bottom: 0 !important;
  }

  .event-date-pill {
    margin-bottom: 0 !important;
  }

  .event-coords-link {
    display: block !important;
    margin-left: 0 !important;
    white-space: nowrap !important;
    font-size: 0.8rem !important;
  }

  /* Creating the larger gap before the Title */
  .event-title {
    margin-top: 1.5rem !important;
    text-align: center !important;
  }

  .event-action-col { 
    width: 100%; 
    justify-content: center; 
  }
  .event-details-content { grid-template-columns: 1fr; }
}

/* Wrapper for the expanded price and buttons */
.booking-action-wrapper {
  display: flex;
  flex-direction: column;
  justify-content: flex-end;
  gap: 10px;
  width: 100%; /* Ensure it fills the grid cell */
}

/* The Price Tag */
.event-price-expanded {
  font-size: 1.5rem; /* Make it distinct from the header price */
  font-weight: 700;
  color: var(--text-dark);
  text-align: center; /* Centers text within the block */
  display: block;
  width: 100%;        /* Forces the block to span full width of parent */
  margin: 0 0 5px 0;  /* Clean spacing, NO left/right margins */
}

/* Ensure the share button centers its text */
.full-width-btn {
  width: 100%;
  justify-content: center;
}

/* =========================================
   18. CHECKOUT PAGE STYLES
   ========================================= */
.checkout-layout {
  display: grid; grid-template-columns: 1fr 1fr; gap: 4rem;
  max-width: 1100px; margin: 0 auto; padding-block: 4rem;
}

.checkout-summary { background: #fff; padding: 2.5rem; border-radius: var(--radius-lg); height: fit-content; box-shadow: var(--shadow-soft); }

.summary-row { display: flex; justify-content: space-between; padding-block: 1rem; border-bottom: 1px dashed #eee; font-size: 0.95rem; }
.summary-total { display: flex; justify-content: space-between; padding-top: 1.5rem; font-size: 1.25rem; font-weight: 800; border-top: 2px solid #eee; margin-top: 1rem; }

.trust-badge-row { display: flex; gap: 1rem; margin-top: 2rem; opacity: 0.7; justify-content: center; }
.trust-badge-row img { height: 24px; }

@media (max-width: 900px) {
  .checkout-layout { grid-template-columns: 1fr; gap: 2rem; }
  .checkout-summary { order: -1; margin-bottom: 2rem; }
}

/* =========================================
   7. ABOUT SECTION
   ========================================= */
.about-grid { display: grid; grid-template-columns: 1fr 1fr; gap: 6rem; align-items: center; }
.about-text h2 { font-size: 2.8rem; margin-bottom: 2rem; line-height: 1.15; }
.about-text p { margin-bottom: 2rem; color: var(--text-dark); font-size: 1.15rem; opacity: 0.9; }
.about-image { position: relative; }
.about-image img { width: 100%; border-radius: var(--radius-xl); box-shadow: var(--shadow-lg); transition: transform 0.5s ease; }
.about-image:hover img { transform: scale(1.02); }

/* =========================================
   9. TESTIMONIAL (Arrows Fixed)
   ========================================= */
.testimonial {
  position: relative; max-width: 800px; margin: 0 auto; display: flex; align-items: center; justify-content: center;
}
.testimonial-content {
  background: #fff; padding: 3rem; width: 100%;
  border-radius: var(--radius-xl); box-shadow: var(--shadow-soft); text-align: center;
}
.testimonial-avatar img { width: 80px; height: 80px; border-radius: 50%; border: 3px solid var(--accent); margin-bottom: 1.5rem; }
.testimonial-text { font-size: 1.2rem; font-style: italic; color: #444; margin-bottom: 1.5rem; }
.testimonial-name { font-weight: 700; color: var(--text-dark); letter-spacing: 1px; text-transform: uppercase; font-size: 0.9rem; }

/* Arrow Positioning Fix: Inside/Overlay */
.testimonial-arrow {
  position: absolute; top: 50%; transform: translateY(-50%);
  background: #fff; border: 1px solid #eee; width: 40px; height: 40px; border-radius: 50%;
  cursor: pointer; z-index: 10; display: flex; align-items: center; justify-content: center;
  box-shadow: var(--shadow-sm); color: var(--text-dark);
}
.testimonial-arrow-left { left: -20px; } 
.testimonial-arrow-right { right: -20px; }

/* =========================================
   10. PACKAGES
   ========================================= */
.package-card { position: relative; border: 1px solid transparent; }
.package-featured { border-color: var(--accent); transform: scale(1.03); z-index: 2; box-shadow: var(--shadow-lg); }
.package-badge {
  position: absolute; top: 20px; right: 20px; background: var(--accent);
  padding: 0.5rem 1.2rem; border-radius: 99px; font-weight: 800; font-size: 0.75rem; text-transform: uppercase; letter-spacing: 1px;
  color: var(--text-dark); box-shadow: 0 4px 10px rgba(0,0,0,0.1);
}
.price { font-size: 2rem; font-weight: 800; margin-bottom: 1.5rem; display: block; color: var(--text-dark); }
.price span { font-size: 1rem; font-weight: 500; color: var(--text-muted); }
.package-list li { padding-bottom: 12px; border-bottom: 1px dashed #eee; margin-bottom: 12px; }
.package-list li:last-child { border-bottom: none; }

/* Align buttons to the bottom of the card */
.package-card .btn {
  margin-top: auto;
}

/* =========================================
   11. AUDIT CARD (Trigger)
   ========================================= */
.audit-card-wrapper {
  background: #fff; border-radius: var(--radius-xl);
  padding: 5rem 3rem; max-width: 900px; margin: 0 auto; text-align: center;
  box-shadow: var(--shadow-lg); position: relative; overflow: hidden;
  border-bottom: 8px solid var(--accent);
}
.audit-title { font-size: 2.2rem; margin-bottom: 1.5rem; color: var(--text-dark); font-weight: 800; }
.audit-text { color: var(--text-muted); font-size: 1.25rem; line-height: 1.6; margin: 0 auto 3rem; max-width: 650px; }

/* =========================================
   12. CONTACT FORM (White Card)
   ========================================= */
/* Restored Narrow Layout for Contact Section */
.contact-grid { 
  display: grid; 
  grid-template-columns: 1fr 1fr; 
  gap: 4rem; 
  align-items: stretch; 
  max-width: 1600px; /* Constrains width for better desktop framing */
  margin: 0 auto;
  padding-inline: 2rem; /* Reinstates side padding */
}

.contact-form-wrapper {
  background: #fff; 
  padding: 3rem; 
  border-radius: 30px; 
  box-shadow: var(--shadow-md); 
  display: flex; 
  flex-direction: column; 
  justify-content: center;
}
.contact-form-wrapper h2 { font-size: 2.2rem; margin-bottom: 0.5rem; }

.form-field { margin-bottom: 1.8rem; }
.form-field label { display: block; font-weight: 700; margin-bottom: 10px; color: var(--text-dark); font-size: 0.9rem; text-transform: uppercase; letter-spacing: 0.5px; }
.form-field input, .form-field textarea {
  width: 100%; padding: 16px 20px; border: 2px solid #eee; border-radius: 12px;
  background-color: #fafafa; font-family: inherit; font-size: 1.05rem; transition: all 0.2s;
  color: var(--text-dark);
}
.form-field input:focus, .form-field textarea:focus { 
  outline: none; border-color: var(--accent); background: #fff; box-shadow: 0 0 0 5px rgba(249, 215, 118, 0.2); 
}
.map-placeholder { border-radius: 30px; overflow: hidden; box-shadow: var(--shadow-md); min-height: 500px; width: 100%; }

/* Hide the break on Desktop */
.mobile-only {
  display: none;
}

/* Show the break on Mobile */
@media (max-width: 768px) {
  .mobile-only {
    display: block;
  }
}

/* --- NEW: Success Toast Notification --- */
#contact-msg {
  display: none; 
  position: fixed !important;
  top: 25px !important;
  left: 50% !important;
  transform: translateX(-50%) !important;
  /* 1. Deep Navy Background */
  background: #162134 !important; 
  /* 2. Your Pale Text Choice */
  color: #fcffe2 !important;
  padding: 1rem 2.5rem !important;
  border-radius: 99px !important;
  font-weight: 700 !important;
  font-family: 'DM Sans', sans-serif !important;
  z-index: 100000 !important;
  box-shadow: 0 10px 40px rgba(0,0,0,0.6) !important;
  /* 3. Refined Gold Border (Visible) */
  border: 1px solid #F9D776 !important;
  white-space: nowrap !important;
  animation: toastSlideIn 0.5s cubic-bezier(0.175, 0.885, 0.32, 1.275) !important;
}

@keyframes toastSlideIn {
  from { opacity: 0; transform: translate(-50%, -40px); }
  to { opacity: 1; transform: translate(-50%, 0); }
}



/* =========================================
   13. FOOTER
   ========================================= */
.footer { 
  background: #1a1a1a; 
  color: #888; 
  padding: 8rem 0; /* Increased from 5rem for better vertical spacing */
  font-size: 0.95rem; 
  border-top: 1px solid #333; 
}
.footer-inner { display: flex; justify-content: space-between; align-items: center; }
.footer-brand strong { color: #fff; font-size: 1.5rem; letter-spacing: 2px; }
.footer-nav a { color: #ccc; margin-left: 2.5rem; text-decoration: none; transition: color 0.2s; font-weight: 500; }
.footer-nav a:hover { color: var(--accent); }




/* =========================================
   15. QUIZ MODAL
   ========================================= */
.modal-overlay {
  position: fixed; inset: 0; background: rgba(20, 20, 20, 0.9);
  backdrop-filter: blur(10px); z-index: 9999;
  display: flex; align-items: center; justify-content: center;
  opacity: 0; visibility: hidden; transition: all 0.4s ease; padding: 1rem;
}
.modal-overlay.is-visible { opacity: 1; visibility: visible; }

.modal-close-btn {
  position: absolute; top: 25px; right: 25px; background: rgba(255,255,255,0.1); color: #fff;
  border: none; font-size: 2.5rem; width: 50px; height: 50px; border-radius: 50%;
  cursor: pointer; display: flex; align-items: center; justify-content: center; transition: 0.2s;
}
.modal-close-btn:hover { background: rgba(255,255,255,0.25); transform: rotate(90deg); }

.quiz-container {
  display: grid; grid-template-columns: 400px 1fr;
  width: 100%; max-width: 1100px; height: 700px;
  background: var(--bg-cream-light); border-radius: var(--radius-xl);
  box-shadow: 0 50px 100px rgba(0,0,0,0.5); overflow: hidden;
}

.visual-side {
  background-image: url('https://images.unsplash.com/photo-1500530855697-b586d89ba3ee?auto=format&fit=crop&q=80');
  background-size: cover; background-position: center; position: relative;
}

.interaction-side {
  position: relative; display: flex; flex-direction: column; 
  background: #fff; padding: 0;
}

.progress-bar { position: absolute; top: 0; left: 0; right: 0; height: 6px; background: #eee; }
.progress-fill { height: 100%; background: var(--bg-sage); width: 0%; transition: width 0.4s ease; }

.slide {
  position: absolute; inset: 0; padding: 4rem 5rem;
  display: flex; flex-direction: column; justify-content: center;
  opacity: 0; transform: translateY(30px); pointer-events: none; transition: all 0.4s cubic-bezier(0.25, 0.46, 0.45, 0.94);
}
.slide.active { opacity: 1; transform: translateY(0); pointer-events: all; z-index: 2; }
.slide.exit-up { opacity: 0; transform: translateY(-30px); }

/* Start Screen Button */
.primary-btn {
  background: var(--accent); color: var(--text-dark); border: none;
  padding: 1.2rem 3rem; font-size: 1.1rem; font-weight: 700; border-radius: 99px;
  cursor: pointer; box-shadow: 0 4px 15px rgba(249, 215, 118, 0.4);
  transition: transform 0.2s, box-shadow 0.2s; margin-top: 2rem;
  display: inline-block;
}
.primary-btn:hover { transform: translateY(-3px); box-shadow: 0 8px 25px rgba(249, 215, 118, 0.6); }

/* Quiz Options (Stacked Vertically) */
.options-grid { display: flex; flex-direction: column; gap: 15px; margin-top: 2.5rem; }
.option-btn {
  background: #fff; border: 2px solid #f2f2f2; border-radius: 18px;
  padding: 1.5rem; text-align: left; cursor: pointer; transition: all 0.2s ease;
  display: flex; flex-direction: column; gap: 6px; position: relative;
  align-items: flex-start;
}
.option-btn:hover { border-color: var(--bg-sage); background: #fafafa; transform: translateX(5px); box-shadow: 0 4px 15px rgba(0,0,0,0.05); }
.option-btn strong { font-size: 1.15rem; color: var(--text-dark); display: block; font-weight: 700; }
.option-btn span { font-size: 0.95rem; color: #666; font-weight: 400; line-height: 1.4; }

/* Result Screen */
.result-box {
  background: var(--bg-cream-light); padding: 2.5rem; border-radius: var(--radius-lg);
  margin-block: 2rem; text-align: center; border: 1px solid rgba(0,0,0,0.05);
}
.result-title { font-size: 1.6rem; font-weight: 800; color: var(--text-dark); margin-bottom: 1rem; }
.result-desc { font-size: 1.15rem; color: #555; line-height: 1.6; }

/* Gate Container Logic */
.gate-container {
  margin-top: 1.5rem; background: #fff; padding: 2rem; border-radius: 16px;
  box-shadow: 0 10px 30px rgba(0,0,0,0.05); border: 1px solid #eee;
}
.gate-container input {
  width: 100%; padding: 12px; border: 1px solid #ccc; border-radius: 8px;
  font-size: 1rem; margin-bottom: 10px;
}

@media (max-width: 900px) {
  .quiz-container { grid-template-columns: 1fr; height: 100vh; border-radius: 0; }
  .visual-side { display: none; }
  .slide { padding: 2rem; }
  .option-btn { padding: 1.2rem; }
}
/* =========================================
   16. TRUST PATCHES (Host, Itinerary, Footer)
   ========================================= */

/* MEET THE HOST */
.host-section { background: var(--bg-darkgreen); border-top: 1px solid #eee; }
.host-container { 
  display: grid; grid-template-columns: 350px 1fr; gap: 2rem; align-items: center; 
  max-width: 1800px; margin: 0 auto;
}
.host-image-frame {
  position: relative; border-radius: var(--radius-xl); overflow: hidden;
  height: 600px; box-shadow: var(--shadow-md);
}
.host-image-frame img { width: 100%; height: 100%; object-fit: cover; }
.host-content h3 { font-size: 2.2rem; margin-bottom: 1.5rem; color: var(--text-dark); }
.host-content p { font-size: 1.1rem; color: #555; margin-bottom: 1.5rem; line-height: 1.8; }
.signature { font-family: cursive; font-size: 1.5rem; color: var(--accent); margin-top: 1rem; }

/* DAILY FLOW (Itinerary) */
.itinerary-box {
  background: var(--bg-cream-light); border-radius: var(--radius-lg); 
  padding: 2.5rem; margin-top: 3rem; border: 1px solid rgba(0,0,0,0.05);
}
.flow-row {
  display: grid; grid-template-columns: 80px 1fr; gap: 1.5rem; 
  padding: 1rem 0; border-bottom: 1px dashed #ddd;
}
.flow-row:last-child { border-bottom: none; }
.flow-time { font-weight: 700; color: var(--accent-hover); font-size: 0.9rem; padding-top: 4px; }
.flow-activity strong { display: block; font-size: 1.1rem; color: var(--text-dark); margin-bottom: 4px; }
.flow-activity span { font-size: 0.95rem; color: #666; }

/* ROBUST FOOTER */
.footer-grid {
  display: grid;
  /* Use auto and max-content to prevent columns from stretching unnecessarily */
  grid-template-columns: 1.5fr repeat(3, 1fr); /* Desktop: 4 columns */ 
  gap: 4rem;               /* This now controls the actual visible gap */
  max-width: 1100px;       /* Constrains the total spread */
  margin: 0 auto 3rem auto; /* Horizontally centers the entire group */
  padding-bottom: 5rem;
  border-bottom: 1px solid #333;
  justify-content: center; /* Forces the grid tracks themselves to the center */
}
/* Adds padding to the 'reAlive' description block */
.footer-col:first-child {
  padding-left: 0; 
}
.footer-col h4 { color: #fff; font-size: 1rem; margin-bottom: 1.5rem; text-transform: uppercase; letter-spacing: 1px; }
.footer-col ul { list-style: none; padding: 0; margin: 0; }
.footer-col li { margin-bottom: 0.8rem; }
.footer-col a { color: #888; text-decoration: none; font-size: 0.95rem; transition: 0.2s; }
.footer-col a:hover { color: var(--accent); }
.legal-row { 
  display: flex; 
  justify-content: space-between; 
  max-width: 1100px;       /* Matches the grid width above */
  margin: 0 auto; 
  color: #666; 
  font-size: 0.85rem; 
  padding: 2rem 0;        /* Added padding for "Built for the Human Nervous System" */
  font-weight: 500;
}

/* Responsive */
@media (max-width: 900px) {
  .host-container { grid-template-columns: 1fr; text-align: center; }
  .host-image-frame { height: 350px; margin-bottom: 2rem; }
.footer-grid { 
  display: grid; 
  grid-template-columns: 1fr 1fr 1fr 1fr; 
  gap: 1rem;               /* Reduced gap to bring columns closer */
  max-width: 600px;       /* Constrains the total width of the 4 columns */
  margin: 0 auto 2rem auto; /* Centers the constrained grid and keeps bottom margin */
  padding-bottom: 5rem; 
  border-bottom: 1px solid #333; 
}  
.legal-row { flex-direction: column; gap: 1rem; text-align: center; }
}



/* =========================================
   PHILOSOPHY SECTION: Editorial Split Layout
   (Restored Code)
   ========================================= */

.editorial-layout {
  display: grid;
  grid-template-columns: 1fr 1fr; /* 50/50 Split */
  gap: 4rem;
  align-items: center;
  
  /* THE PADDING FIX: Constrains width to create whitespace on sides */
  max-width: 1400px;  
  margin-inline: auto; 
}

/* 1. The Container (The Frame) */
.editorial-visual {
  width: 100%;
  /* Set this to a tall value to get that vertical ratio from Screenshot 3 */
  height: 850px; 
  border-radius: var(--radius-xl);
  overflow: hidden;
  position: relative;
  /* Optional: Keep your existing filters */
  filter: sepia(0.15) opacity(0.95); 
}

/* 2. The Image (The Content) */
.editorial-visual img {
  width: 100%;
  /* This forces the photo to stretch to the new 850px height */
  height: 100% !important; 
  object-fit: cover;
  
  /* CRITICAL: This anchors the lady to the bottom of the frame. 
     As the height grows, it will reveal more sky at the top, 
     matching Screenshot 3. */
  object-position: 30% 100%; 
  
  display: block;
  /* Ensure your zoom transition is still here */
  transition: transform 1.5s ease-out !important;
}

/* The Text Side (Right) */
.editorial-content {
  display: flex;
  flex-direction: column;
  justify-content: center;
}

/* List Items Styling */
.philosophy-item {
  display: flex;
  gap: 1.2rem;
  margin-bottom: 2rem;
  align-items: flex-start;
}

.philo-text h3 {
  font-size: 1.1rem;
  margin: 0 0 0.4rem 0;
  font-weight: 800;
  color: var(--text-dark);
}

.philo-text p {
  font-size: 0.95rem;
  margin: 0;
  line-height: 1.6;
  color: var(--text-muted);
  
  /* FORCE JUSTIFIED TEXT (Straight Edges) */
  text-align: justify ;
  text-justify: inter-word ;
  hyphens: auto ;
  display: block;
}

/* Force Justify on Subtitle too */
.editorial-header .section-subtitle {
  text-align: justify ;
  hyphens: auto ;
  margin-bottom: 1rem !important; /* Forces a smaller gap */
}

/* Mobile Responsiveness */
@media (max-width: 900px) {
  .editorial-layout {
    grid-template-columns: 1fr; /* Stack vertically */
    gap: 3rem;
  }
  
  .editorial-visual {
    height: 350px; 
    order: -1; /* Image stays on top */
  }
}

/* =========================================
   GALLERY CSS (Zoom Capable + No White Bg)
   ========================================= */
.gallery {
  width: 100%;
  overflow: hidden;
  padding-block: 2rem;
}

.gallery-container {
  max-width: 2800px;
  margin: 0 auto;
  position: relative;
  padding-inline: 0rem;
}

.gallery-track {
  display: flex;
  width: 100%;
  gap: 0; 
}

.gallery-item {
  height: 550px;
  box-sizing: border-box;
  padding-right: 1rem;
  flex-shrink: 0;
}

/* Rigid Widths */
.item-wide {
  flex: 0 0 60%;
  max-width: 60%;
}
.item-narrow {
  flex: 0 0 40%;
  max-width: 40%;
}

/* BIG IMAGE COLUMN */
.big-img-col {
  width: 100%; 
  height: 100%; 
  position: relative; 
  overflow: hidden; /* Acts as the frame */
  border-radius: 12px;
}
.big-img-col img { width: 100%; height: 100%; object-fit: cover; }

/* GRID COLUMNS */
.grid-img-col {
  display: grid; 
  grid-template-columns: 1fr 1fr; 
  grid-template-rows: 1fr 1fr;
  gap: 1rem; 
  width: 100%; 
  height: 100%;
}

/* NEW: The "Picture Frame" Class */
.grid-img-wrapper {
  width: 100%; 
  height: 100%; 
  overflow: hidden; /* CRITICAL: This cuts off the zoomed parts */
  border-radius: 8px; 
  position: relative;
}

.grid-img-wrapper img { 
  width: 100%; 
  height: 100%; 
  object-fit: cover; 
  display: block; 
  transition: transform 0.3s ease; /* Optional: Makes zoom smooth if you change it live */
}

/* Arrows */
.gallery-nav {
  position: absolute; top: 50%; transform: translateY(-50%); z-index: 10;
  background: rgba(255, 255, 255, 0.25); backdrop-filter: blur(4px);
  border: 1px solid rgba(255, 255, 255, 0.4); color: #fff;
  width: 50px; height: 50px; border-radius: 50%;
  cursor: pointer; display: flex; align-items: center; justify-content: center;
}
.nav-prev { left: 10px; } 
.nav-next { right: 10px; }

@media (max-width: 900px) {
  .gallery-item { height: 350px; }
  .item-wide, .item-narrow { flex: 0 0 85vw; max-width: 85vw; }
}

/* Add to style.css */

/* Prevent the "Ghost" image when dragging */
.gallery-track-wrapper img {
  pointer-events: none; /* Disables interaction with the image itself so click passes to the wrapper */
  -webkit-user-drag: none; /* Safari specific */
  user-select: none;
}

.gallery-track-wrapper {
  cursor: grab;
  touch-action: pan-y; 
  user-select: none;
}

.gallery-track-wrapper:active {
  cursor: grabbing;
}

/* =========================================
   EXPANDABLE SCHEDULE CARDS
   ========================================= */

.event-details {
  display: none;
  grid-column: 1 / -1; 
  padding-top: 1rem;
  width: 100%;
  animation: fadeIn 0.4s ease;
}

.event-card.is-open .event-details {
  display: block;
}

.event-card.is-open {
  border-color: var(--accent);
  background: #fafafa;
}

.event-divider {
  border: 0;
  height: 1px;
  background: rgba(0,0,0,0.1);
  margin-bottom: 1.5rem;
}

/* Inside the Expanded Area */
.details-grid {
  display: grid;
  grid-template-columns: 1.5fr 1fr;
  gap: 2rem;
}

.detail-col h4 { font-size: 1rem; text-transform: uppercase; color: var(--text-muted); margin-bottom: 0.5rem; letter-spacing: 1px; }
.detail-col p { font-size: 0.95rem; color: var(--text-dark); line-height: 1.6; margin-bottom: 1rem; }

.detail-bullets { padding-left: 1.2rem; margin: 0; color: #555; font-size: 0.9rem; }
.detail-bullets li { margin-bottom: 4px; }

.right-align {
  display: flex;
  flex-direction: column;
  align-items: flex-end;
  justify-content: center;
  text-align: right;
}

.detail-price { font-size: 1.5rem; font-weight: 800; color: var(--text-dark); margin-bottom: 1rem; }
.per-person { font-size: 0.9rem; font-weight: 400; color: #777; }

.detail-actions { display: flex; gap: 1rem; align-items: center; }

/* Share Button */
.share-btn {
  background: none; border: none; cursor: pointer;
  display: flex; align-items: center; gap: 6px;
  color: var(--text-muted); font-weight: 600; font-size: 0.9rem;
  transition: color 0.2s;
}
.share-btn:hover { color: var(--accent-hover); }

/* Responsive */
@media (max-width: 768px) {
  .details-grid { grid-template-columns: 1fr; text-align: left; }
  .right-align { align-items: flex-start; text-align: left; margin-top: 1rem; }
}

@keyframes fadeIn {
  from { opacity: 0; transform: translateY(-5px); }
  to { opacity: 1; transform: translateY(0); }
}

/* Update in style.css under Gallery Section */

.gallery-track-wrapper {
  overflow: hidden;
  width: 100%;
  border-radius: var(--radius-lg);
  box-shadow: var(--shadow-soft);
  
  /* NEW: Interaction Styles */
  cursor: grab;
  touch-action: pan-y; /* Allows vertical page scroll, captures horizontal swipe */
  user-select: none;   /* Prevents highlighting text/images while dragging */
  -webkit-user-select: none;
}

.gallery-track-wrapper:active {
  cursor: grabbing;
}

/* =========================================
   19. TESTIMONIALS - SMOOTH & INFINITE
   ========================================= */

#testimonials {
  /* Matches gallery for now, but can be changed independently later */
  padding-top: 5.5rem;    
  padding-bottom: 5.5rem; 
  
  position: relative;
  overflow: hidden; 
}

#testimonials .section-subtitle { margin-bottom: 0 ; }

/* CONTAINER & WRAPPER */
.stories-container { width: 100%; position: relative; }

.testimonial-wrapper {
  /* Layout & Interaction */
  width: 100%;
  overflow: hidden;
  padding-block: 10px;
  cursor: grab;
  touch-action: pan-y;
  position: relative;

  /* THE FADE OUT EFFECT */
  /* This creates a gradient alpha mask: */
  /* 0% to 5% = Transparent to Black (Fade In) */
  /* 5% to 95% = Solid Black (Visible Content) */
  /* 95% to 100% = Black to Transparent (Fade Out) */
  
  -webkit-mask-image: linear-gradient(
    to right, 
    transparent 0%, 
    black 5%, 
    black 95%, 
    transparent 100%
  );
  
  mask-image: linear-gradient(
    to right, 
    transparent 0%, 
    black 5%, 
    black 95%, 
    transparent 100%
  );
}

.testimonial-track {
  display: flex;
  gap: 2rem;
  width: max-content;
  /* Critical: We move this using JS now, so we set will-change for performance */
  will-change: transform; 
  /* Remove any padding or margin here */
  margin: 0; 
  padding: 0; 
}

/* CARD */
.story-card {
  position: relative;
  width: 440px;  
  height: 360px; 
  border-radius: 24px;
  overflow: hidden;
  flex-shrink: 0;
  background: #000;
  box-shadow: 0 10px 30px rgba(0,0,0,0.15); 
  transition: transform 0.4s cubic-bezier(0.25, 0.46, 0.45, 0.94);
  user-select: none;
  /* Force GPU rasterization so it doesn't vanish */
  transform: translateZ(0); 
  will-change: transform;
}

/* VISUALS */
.story-visual { width: 100%; height: 100%; position: relative; }

.story-visual img {
  width: 100%; height: 100%; object-fit: cover;
  transition: transform 0.6s ease, filter 0.4s ease;
  filter: saturate(1) brightness(1);
}

.story-overlay {
  position: absolute; inset: 0;
  background: linear-gradient(to top, rgba(0,0,0,0.8) 0%, transparent 60%);
  opacity: 0; /* Hidden by default */
  transition: opacity 0.4s ease;
}

/* REVEAL OVERLAY ONLY ON HOVER */
.story-card:hover .story-overlay {
  opacity: 1;
}

/* =========================================
   19. TESTIMONIALS - SMOOTH & INFINITE (UPDATED)
   ========================================= */

/* =========================================
   REPLACE YOUR '.story-content' AND HOVER SECTIONS WITH THIS
   ========================================= */

/* 1. THE RESTING STATE */
.story-content {
  position: absolute; 
  bottom: 0; left: 0; right: 0;
  padding: 2rem;
  color: #fff;
  z-index: 2;
  /* Shows Name and Location only at the bottom */
  transform: translateY(calc(100% - 110px));
  opacity: 0.2; 
  transition: transform 0.5s cubic-bezier(0.19, 1, 0.22, 1), opacity 0.4s ease;
  display: flex;
  flex-direction: column;
}

/* 2. THE HOVER STATE */
.story-card:hover .story-content { 
  transform: translateY(0);
  opacity: 1;
  /* Expand to fill the card height internally */
  height: 100%;
  justify-content: flex-end;
  padding-bottom: 3rem;
}

.story-header { margin-bottom: 0.5rem; }

.story-name { 
  font-size: 1.8rem; font-weight: 700; margin: 0; line-height: 1.1;
  color: #ffffff ;
  
  display: flex; align-items: center; gap: 0.8rem; /* Increased gap slightly */
  text-shadow: 0 2px 10px rgba(0,0,0,0.3);
}

/* FIX 3: THE "ANTI-TEASE" LINKEDIN ICON */
.li-verify {
  display: inline-flex;
  color: #fff;
  
  /* STEP A: Hide it by default */
  opacity: 0;
  transform: translateY(10px); /* Pushed down slightly */
  
  /* STEP B: Use a standard transition */
  transition: all 0.3s ease;
  
  /* Vital: Pointer events none ensures you can't accidentally click invisible link */
  pointer-events: none; 
}

.li-verify svg {
  width: 18px; height: 18px; /* Slightly smaller for elegance */
  fill: currentColor;
}

.story-loc { font-size: 0.9rem; opacity: 0.8; margin: 4px 0 0 0; color: rgba(255,255,255,0.8); }

.story-body {
  margin-top: 1rem;
  font-size: 1.05rem;
  line-height: 1.6;
  opacity: 0; 
  transition: opacity 0.4s ease 0.2s;
  border-left: 3px solid var(--accent);
  padding-left: 1rem;
  font-style: italic;
  color: rgba(255, 255, 255, 0.95);
  
  /* THE INTUITIVE SCROLL LOGIC */
  max-height: 180px;      /* Keeps text within the card */
  overflow-y: auto;       /* Enables scrolling */
  padding-right: 12px;
  
  /* Hide scrollbar while keeping functionality */
  scrollbar-width: none;     /* Firefox */
  -ms-overflow-style: none;  /* IE/Edge */
  
  /* Bottom Fade Mask: Signals more content is available */
  mask-image: linear-gradient(to bottom, black 75%, transparent 100%);
  -webkit-mask-image: linear-gradient(to bottom, black 75%, transparent 100%);
}

.story-body::-webkit-scrollbar {
  display: none; /* Hide scrollbar for Chrome/Safari */
}

/* --- HOVER EFFECTS (The Logic) --- */

.story-card:hover { transform: translateY(-8px); box-shadow: 0 20px 40px rgba(0,0,0,0.25); }

/* Dim Image */
.story-card:hover .story-visual img { 
  transform: scale(1.05); 
  filter: brightness(0.6); /* Made slightly darker so text pops more */
}

/* Show Overlay */
.story-card:hover .story-overlay { opacity: 1; }

/* Slide Content Up */
.story-card:hover .story-content { transform: translateY(0); }

/* Fade Quote In */
.story-card:hover .story-body { opacity: 1; }






/* REVEAL LINKEDIN ICON (With Delay) */
.story-card:hover .li-verify {
  opacity: 0.7; /* Subtle visibility */
  transform: translateY(0);
  pointer-events: auto; /* Enable clicking */
  
  /* THE MAGIC FIX: Delay the appearance by 0.2s */
  /* The icon waits for the card to start moving before appearing */
  transition-delay: 0.2s; 
}

.li-verify:hover {
  opacity: 1 ;
  color: #0077b5; /* LinkedIn Blue on direct hover */
  transition-delay: 0s; /* No delay when interacting directly */
}

/* ARROWS */
.nav-arrows-floating {
  position: absolute; top: 55%; transform: translateY(-50%);
  left: 0; right: 0; pointer-events: none;
  display: flex; justify-content: space-between; padding-inline: 2rem; z-index: 10;
}
.story-arrow {
  pointer-events: auto; width: 60px; height: 60px; border-radius: 50%;
  background: rgba(255, 255, 255, 0.1); backdrop-filter: blur(12px);
  border: 1px solid rgba(255, 255, 255, 0.2); color: var(--text-dark);
  display: flex; align-items: center; justify-content: center; cursor: pointer;
  transition: all 0.2s ease; box-shadow: 0 5px 20px rgba(0, 0, 0, 0.05);
}
.story-arrow:hover { background: #fff; transform: scale(1.1); box-shadow: 0 10px 30px rgba(0,0,0,0.15); }

/* =========================================
   MOBILE TESTIMONIAL FIX (Paste at bottom of style.css)
   ========================================= */
@media (max-width: 900px) {

  /* 1. Card Size: wider and taller for better reading */
.story-card { 
    width: 85vw ;  
    height: 400px ; 
    border-radius: 20px;      
  }

  /* 2. The Image: Dim it significantly so it's a background, not a distraction */
  .story-visual img { 
    filter: brightness(0.5) saturate(0.8) ; 
  }
  
  /* 3. The Overlay: Create a solid "floor" for the text */
  .story-overlay { 
    opacity: 1 ; 
    /* This gradient is crucial: Solid black at bottom, fading up */
    background: linear-gradient(to top, rgba(0,0,0,0.95) 15%, rgba(0,0,0,0.6) 50%, transparent 100%) ;
  }

  /* 4. Text Position: Sit calmly at the bottom */
  .story-content { 
    transform: translateY(0) ; /* No sliding animation on mobile */
    padding: 2rem ; 
    bottom: 0 ;
    justify-content: flex-end;
  }

  /* 5. Make the "Quote" visible immediately */
  .story-body { 
    opacity: 1 ; 
    transform: translateY(0) ;
    margin-top: 1rem;
  }

  /* 6. Text Legibility */
  .story-name { font-size: 1.5rem; } /* Slightly smaller to prevent wrapping */
  .story-badge { font-size: 0.7rem; margin-bottom: 5px; opacity: 0.9; }
}

/* In style.css, inside the Media Query section */

/* We use 900px to catch tablets (iPads) which also don't have mouse cursors */
@media (max-width: 900px) {
  /* Ensure testimonials are never pale/dim on mobile */
  .testimonial-track .story-card {
    opacity: 1 !important;
    filter: none !important;
    transform: none !important;
  }

  .story-card .story-overlay {
    opacity: 1; 
  }

  .story-card .story-content {
    transform: translateY(0);
    opacity: 1 !important; /* Force text visibility */
  }

  .story-card .story-body {
    opacity: 1;
    transform: translateY(0);
  }
  
  .story-card {
    height: 420px; 
  }
}

/* Add to style.css */
#schedule.bg-darkgreen .section-title,
#schedule.bg-darkgreen .section-subtitle {
  color: #ffffff;
}

#schedule.bg-darkgreen .section-subtitle {
  opacity: 0.8;
}

.event-coords-link {
  font-size: 0.8rem;
  color: #888;
  text-decoration: underline;
  margin-left: 10px;
  cursor: pointer;
}
.event-coords-link:hover {
  color: var(--accent);
}


/*=============
SCHEDULE
===============*/

#schedule {
  padding-block: 6rem; /* Tights up the green background */
}

#schedule .section-subtitle {
  margin-bottom: 1.5rem; /* Pulls cards closer to the title */
}

#schedule .event-header {
  padding: 1rem 1.5rem; /* Slims down the card header */
}

#schedule .event-details-content {
  padding: 3rem; /* Slims down the expanded area */
}

/* 1. RESET: Everything is 100% bright by default */
.testimonial-track .story-card, 
.gallery-track img {
  opacity: 1;
  filter: grayscale(0%) blur(0px);
  transition: opacity 0.4s ease, filter 0.4s swase;
}

/* 2. THE LOGIC: When I hover over the TRACK, 
   only dim cards that are NOT currently being hovered */
.testimonial-track:hover .story-card:not(:hover),
.gallery-track:hover img:not(:hover) {
  opacity: 0.4; /* The "others" go dark */
  filter: grayscale(80%) blur(1px);
}

/* 3. THE HIGHLIGHT: The card you are touching stays bright */
.testimonial-track .story-card:hover,
.gallery-track img:hover {
  opacity: 1 !important;
  filter: grayscale(0%) blur(0px) !important;
  transform: translateY(-5px); /* Subtle lift */
  z-index: 10;
}

/* 4. SPEED PROTECTION: Disable these heavy effects during fast scrolls to stop lag */
.testimonial-track.is-fast .story-card,
.gallery-track.is-fast img {
  opacity: 1 !important;
  filter: none !important;
  pointer-events: none;
}

/* =========================================
   MOBILE GALLERY FIX (UPDATED)
   Fixes "happiness_in_groups.jpg" cropping
   ========================================= */

@media (max-width: 900px) {
  /* High specificity selector to override inline styles */
  .grid-img-wrapper img[src*="happiness_in_groups.jpg"] {
      
      /* 1. Reset the zoom so it fits in the small mobile box */
      transform: scale(2.1) ; 
      
      /* 2. Force focus to the TOP Center 
         (50% = Horizontal Center, 0% = Vertical Top) 
         This brings the image "down" so the top isn't cut off. */
      object-position: 50% 0% ;
  }
}

/* =========================================
   GALLERY - PADDING
   ========================================= */

#gallery-section {
  /* You can change these values independently */
  padding-top: 5.5rem;    
  padding-bottom: 5.5rem; 
  
  position: relative;
  overflow: hidden; 
}

#gallery-section .section-subtitle { margin-bottom: 2.5rem ; }

/* =========================================
   INTERACTIVE Blur-Spotlight
   ========================================= */

/* Container Styling */
.gallery-wrapper {
    display: flex;
    gap: 20px;
    overflow-x: auto; /* Allows side scrolling */
    padding: 40px;
    background: #f9f9f9;
}

/* Base Card Styling */
.card {
    min-width: 200px;
    background: white;
    padding: 20px;
    border-radius: 12px;
    box-shadow: 0 4px 6px rgba(0,0,0,0.1);
    
    /* Crucial for the smooth effect */
    transition: all 0.4s ease;
    opacity: 1;
    filter: blur(0px) grayscale(0%);
}

/* --- LOGIC 1: HOVER SPOTLIGHT --- */

/* Step A: When hovering the CONTAINER, fade/blur EVERY card */
.gallery-wrapper:hover .card {
    opacity: 0.3;              /* Make pale */
    filter: blur(3px) grayscale(100%); /* Make blurry and B/W */
    transform: scale(0.98);    /* Optional: shrinking slightly looks nice */
}

/* Step B: But bring the SPECIFIC CARD being hovered back to normal */
.gallery-wrapper .card:hover {
    opacity: 1;
    filter: blur(0px) grayscale(0%);
    transform: scale(1);       /* No zoom, just normal size */
    z-index: 2;                /* Keep it on top */
    box-shadow: 0 10px 20px rgba(0,0,0,0.2); /* Add a pop shadow */
}

/* --- LOGIC 2: SCROLLING STATE --- */

/* This class is added via JS while scrolling */
.gallery-wrapper.is-scrolling .card {
    opacity: 0.3 ;
    filter: blur(4px) grayscale(100%) ;
    transform: scale(0.98) ;
    pointer-events: none; /* Prevents accidental clicks while scrolling */
}



/* =========================================
   REFINED SPOTLIGHT SYSTEM (SURGICAL FIX)
   ========================================= */

/* 1. DESKTOP ONLY: Spotlight & Hover Logic */
@media (hover: hover) and (min-width: 901px) {
    /* Dim/Blur neighbors when track is hovered */
    .testimonial-track:not(.is-fast):hover .story-card:not(:hover),
    .gallery-track:not(.is-fast):hover img:not(:hover) {
        opacity: 0.4 !important;
        filter: blur(2px) brightness(0.8) grayscale(0.3) !important;
    }

    /* 1. THE CARD (Container): No filter, just scale and shadow */
    .testimonial-track:not(.is-fast) .story-card:hover {
        opacity: 1 !important;
        filter: none !important; 
        transform: translateY(-10px) scale(1.03) !important;
        z-index: 20 !important;
        box-shadow: 0 10px 40px rgba(0,0,0,0.2);
    }

    /* 2. THE IMAGE (Child): Apply the dimming ONLY here */
    .testimonial-track:not(.is-fast) .story-card:hover .story-visual img {
        filter: brightness(0.6) blur(0px) !important; 
    }
}

/* =========================================
   GALLERY BRIGHTNESS FIX (NUCLEAR)
   ========================================= */
@media (hover: hover) and (min-width: 901px) {
    /* When hovering a specific gallery image, force it to be 100% bright */
    .gallery-track:not(.is-fast) img:hover {
        opacity: 1 !important;
        filter: brightness(1) blur(0px) !important; 
        transform: scale(1.03); 
        z-index: 99 !important; 
        box-shadow: 0 10px 40px rgba(0,0,0,0.3); 
    }
}



/* 2. MOBILE ONLY: Default Brightness -> Dim on Touch */
@media (max-width: 900px) {
    /* DEFAULT STATE: 100% Bright, No Blur, No Grayscale */
    .testimonial-track .story-card,
    .gallery-track img {
        opacity: 1 !important;
        filter: brightness(1) blur(0px) grayscale(0%) !important;
        transform: none !important;
    }

    /* DISABLE NEIGHBOR DIMMING: Keeps surrounding cards bright on touch */
    .testimonial-track:active .story-card:not(:active),
    .testimonial-track:hover .story-card:not(:hover) {
        opacity: 1 !important;
        filter: none !important;
    }

    /* INTERACTION: Dim only the card being touched to show text */
    .story-card:active .story-visual img,
    .story-card:hover .story-visual img {
        filter: brightness(0.5) blur(0px) !important;
    }

    /* SHOW TEXT: Reveal content only when card is active */
    .story-card .story-content {
        opacity: 0;
        transform: translateY(0) !important;
        transition: opacity 0.3s ease !important;
    }

    .story-card:active .story-content,
    .story-card:hover .story-content {
        opacity: 1 !important;
    }

    /* OVERLAY: Gradient appears only on interaction */
    .story-card .story-overlay {
        opacity: 0;
    }
    .story-card:active .story-overlay,
    .story-card:hover .story-overlay {
        opacity: 1 !important;
        background: linear-gradient(to top, rgba(0,0,0,0.8), transparent) !important;
    }
}

/* 3. PERFORMANCE: Clear Fast-Scroll */
.gallery-track.is-fast img,
.testimonial-track.is-fast .story-card {
    filter: none !important;
    opacity: 1 !important;
    pointer-events: none;
}

/*===============
Events Card
================*/
/* Target the container holding the price and buttons */
.event-details-content > div:last-child {
  display: flex; 
  flex-direction: column; 
  align-items: center; /* This centers the button and price horizontally */
  gap: 10px;
  width: 100%;
}

/* Force the price to be centered */
.event-price {
  font-size: 1.5rem; 
  font-weight: 700;
  color: var(--text-dark);
  text-align: center; /* Centers the text */
  width: 100%;        /* Ensures it spans the full width */
  margin: 0;          /* Removes the 108px override */
  display: block;
}

/* Ensure buttons are full width */
.event-details-content .btn {
  width: 100%;
}

/* ============================================================
   FINAL FIX: SMOOTH PEEK + TOP TEXT
   ============================================================ */

/* 1. MOVE TEXT OVERLAY TO THE TOP
   This ensures the text is visible immediately when the card peeks open.
   We flip the gradient so the shadow comes from the top down. */
html body .img-overlay {
  top: 0 ;                /* Stick to top edge */
  bottom: auto ;          /* Unstick from bottom */
  background: linear-gradient(to bottom, rgba(0,0,0,0.8), transparent) ; /* Shadow from top */
  padding-top: 1.8rem ;   /* Acceptable padding from the edge */
  align-items: flex-start ;
}

/* 2. YOUR PREFERRED "SMOOTH" ANIMATION (Desktop Only)
   This is the exact code you liked. */
@media (hover: hover) {

  .event-card:not(.is-open):hover .event-body {
    grid-template-rows: 0.35fr ; /* The smooth 25% open */
    border-top: 1px solid #eee;
  }

  /* I reduced the blur slightly (0.5px) so the text is actually readable */
  .event-card:not(.is-open):hover .event-body-inner {
    filter: blur(0.5px); 
    opacity: 0.9;
    transition: all 0.3s ease;
  }
}

/* 3. PRICING CENTERING (Standard Fix) */
.event-details-content > div:last-child {
  display: flex ;
  flex-direction: column ;
  align-items: center ; 
  width: 100% ;
}

.event-price {
  text-align: center ;
  width: 100% ;
  margin: 0 0 10px 0 ;
  display: block ;
}

/* =========================================
   HOST SECTION (Visual Match: Philosophy)
   ========================================= */

/* 1. Global Visibility Rules */
.host-mobile-only { 
  display: none !important; 
}

.host-desktop-only { 
  display: block; 
}

/* 2. Container Layout */
.host-container { 
  display: grid; 
  grid-template-columns: 600px 1fr; 
  gap: 5rem; 
  align-items: center; 
  max-width: 1300px; 
  margin: 0 auto;
}

/* 3. THE FRAME (Shared Styles + Zoom Effect) */
.host-image-frame {
  position: relative; 
  height: 750px; 
  border-radius: 12px; 
  box-shadow: 0 10px 40px rgba(0, 0, 0, 0.08); 
  filter: sepia(0.05) opacity(0.95); 
  overflow: hidden; 
  cursor: pointer;
  background-color: rgba(0,0,0,0.1); 
}

.host-image-frame img { 
  width: 100%; 
  height: 100%; 
  object-fit: cover; 
  object-position: center 30%; 
  transition: transform 1.5s ease-out; 
  will-change: transform;
  transform: scale(1);
}

/* The Zoom Effect Remains Intact */
.host-image-frame:hover img {
  transform: scale(1.1); 
}

/* 4. TYPOGRAPHY & COLORS */
.host-content h3 { 
  font-size: 2.5rem; 
  letter-spacing: 2px;
  line-height: 1.1;
  margin-bottom: 2rem; 
  font-weight: 700;
  color: var(--text-dark);
}

.host-content p { 
  font-size: 1.15rem; 
  line-height: 1.7; 
  margin-bottom: 1.5rem; 
  text-align: justify;
  text-justify: inter-word;
  hyphens: auto;
  color: var(--text-muted);
}

.signature { 
  font-family: cursive; 
  font-size: 1.8rem; 
  margin-top: 1.5rem; 
  color: var(--text-dark);
}

/* Dark Mode Overrides */
.section.bg-darkgreen .host-content h3,
.section.bg-darkgreen .host-content p {
  color: #ffffff;
}
.section.bg-darkgreen .signature {
  color: var(--accent); 
}

/* 5. MOBILE OVERRIDES */
@media (max-width: 900px) {
  /* Strictly hide the desktop version to prevent redundancy on S20 */
  .host-desktop-only { 
    display: none !important; 
    visibility: hidden;
    height: 0;
  }

  /* Force the mobile version to appear */
  .host-mobile-only { 
    display: block !important; 
    visibility: visible;
  }

  .host-container {
    display: flex !important;
    flex-direction: column !important;
    text-align: center !important;
    gap: 1.5rem !important;
  }

  .host-image-frame.host-mobile-only {
    height: 400px !important;
    order: 0; /* Positioned after H3 in HTML */
    margin-top: 1rem;
    margin-bottom: 1.5rem;
  }

  .host-content h3 {
    font-size: 2rem;
    text-align: center !important;
  }

  .host-content p {
    text-align: center !important;
  }
}




/* =========================================
   2. NAVIGATION (PERFECT RESTORATION)
   ========================================= */

/* --- 2.1 SHARED LOGIC --- */
.nav { 
  position: fixed; 
  top: 0; left: 0; right: 0; 
  z-index: 1000; 
  padding: 1.2rem; 
  background: transparent;
  transition: all 0.8s cubic-bezier(0.25, 0.46, 0.45, 0.94);
}

.nav-inner { 
  display: flex; 
  align-items: center; 
  justify-content: space-between; 
  width: 100%;
  margin: 0 auto;
}

/* --- 2.2 DESKTOP UI (901px+) --- */
@media (min-width: 901px) {
  .nav { padding-block: 2.2rem; }
  .nav-toggle { display: none; }

  /* Hide mobile-specific elements on desktop */
  .nav-section-indicator, 
  .mobile-only-link { 
    display: none !important; 
  }

  /* THE CAPSULE (Floating Frosted Pill) */
  .nav-inner { 
    width: fit-content !important; 
    padding: 0.65rem 0.65rem 0.65rem 3.2rem;
    border-radius: 100px;
    gap: 3.5rem;
    background: rgba(0, 0, 0, 0.5) !important; /* Unified Glass */
    backdrop-filter: blur(20px) saturate(160%);
    -webkit-backdrop-filter: blur(20px) saturate(160%);
    border: 1px solid rgba(255, 255, 255, 0.15);
    box-shadow: 0 10px 40px rgba(0, 0, 0, 0.2);
    transition: all 1.5s cubic-bezier(0.16, 1, 0.3, 1);
    justify-content: center;
  }

  /* LOGO: Bold Sans-Serif (DM Sans) */
  .logo { 
    font-family: 'DM Sans', sans-serif !important; 
    font-weight: 1000 !important; 
    letter-spacing: 0.22em; 
    font-size: 1.1rem; 
    color: #ffffff !important; 
    text-decoration: none; 
    white-space: nowrap;
    transition: color 2s ease;
  }

  .nav-pill {
    display: flex; 
    align-items: center; 
    gap: 2.8rem;
    background: transparent !important;
    border: none !important;
    padding: 0 !important;
  }

  .nav-links { list-style: none; display: flex; gap: 2.5rem; margin: 0; padding: 0; }

  /* LINKS: Elegant Sans */
  .nav-links a { 
    text-decoration: none; 
    color: rgba(255, 255, 255, 0.85) !important; 
    font-family: 'DM Sans', sans-serif !important; 
    font-weight: 500 !important; 
    font-size: 0.95rem !important; 
    letter-spacing: 0.05em;
    transition: all 0.8s ease;
  }

  /* CTA BUTTON */
.nav-cta-btn { 
  padding: 0.9rem 2.2rem; 
  background-color: #F2E6D8 !important; 
  color: #1c2c39 !important; 
  font-family: 'DM Sans', sans-serif;
  font-weight: 800; 
  border-radius: 99px;
  text-decoration: none;
  font-size: 0.9rem;
  white-space: nowrap;
  transition: all 0.3s ease;
}

  /* --- DYNAMIC STATES --- */

  .nav.nav-sticky:not(.is-moving) .nav-inner {
    opacity: 0.01; 
    filter: blur(2.5px);
    transform: scale(0.98);
  }

  .nav.nav-sticky .nav-inner {
    background: rgba(255, 255, 255, 0.45) !important;
    border-color: rgba(255, 255, 255, 0.5) !important;
    box-shadow: 0 10px 30px rgba(0, 0, 0, 0.05);
  }

  .nav.nav-sticky .logo,
  .nav.nav-sticky .nav-links a {
    color: #1a1a1a !important; 
  }

  .nav.nav-sticky .nav-cta-btn {
    background-color: #1c2c39 !important;
    color: #ffffff !important;
  }

  .nav-inner:hover {
    opacity: 1 !important;
    filter: blur(0px) !important;
    transform: scale(1) !important;
    background: rgba(255, 255, 255, 0.98) !important;
  }

  .nav-inner:hover .logo,
  .nav-inner:hover .nav-links a { color: #1a1a1a !important; }

  .nav-inner:hover .nav-cta-btn { 
    background: #1a1a1a !important; 
    color: #ffffff !important; 
  }
}



/* --- 2.3 MOBILE UI (900px and below) --- */
@media (max-width: 900px) {
  .nav { 
    padding: 1.2rem 1.5rem; 
    background: transparent;
  }

  .nav-inner { 
    width: 100% !important;
    justify-content: space-between !important; 
    background: transparent !important;
    border: none !important;
    backdrop-filter: none !important;
    box-shadow: none !important;
    padding: 0;
    display: flex !important;
    align-items: center !important;
  }

  .logo { 
    font-family: 'DM Sans', sans-serif !important; 
    font-weight: 800 !important; 
    letter-spacing: 0.15em !important;
    font-size: 1.1rem; 
    color: #ffffff !important; 
    text-decoration: none;
    z-index: 1002;
    position: relative;
  }

  /* FROSTED GLASS OVERLAY */
  .nav-links {
    position: fixed; 
    inset: 0;
    /* Semi-transparent black to let underlying colors through */
    background: rgba(0, 0, 0, 0.9); 
    /* The core frosted effect */
    backdrop-filter: blur(15px) saturate(120%);
    -webkit-backdrop-filter: blur(15px) saturate(120%);
    
    display: flex;
    flex-direction: column;
    justify-content: center;
    align-items: center;
    gap: 2.2rem; 
    opacity: 0; 
    visibility: hidden;
    transition: all 0.4s ease;
    z-index: 1001;
    list-style: none; 
    padding: 0; 
    margin: 0;
  }

  .nav-links a {
    font-family: 'DM Sans', sans-serif !important; 
    font-size: 1.6rem !important; 
    font-weight: 500 !important;
    color: #ffffff !important;
    text-decoration: none;
    transition: opacity 0.3s ease;
  }

  .nav-pill.is-open .nav-links { 
    opacity: 1; 
    visibility: visible; 
  }
  
  .nav-cta-btn { display: none !important; }

  /* TOGGLE BUTTON: Custom Boxed "X" */
  .nav-toggle { 
    display: flex !important;
    flex-direction: column;
    justify-content: center;
    align-items: center;
    border: 1px solid transparent; 
    background: transparent; 
    cursor: pointer; 
    z-index: 1005; 
    width: 42px;
    height: 42px;
    padding: 0;
    transition: all 0.3s ease;
  }

  .nav-pill.is-open .nav-toggle {
    border-color: rgba(255, 255, 255, 0.8);
    border-radius: 4px;
    /* Added subtle background to toggle box for better clarity on glass */
    background: rgba(255, 255, 255, 0.1); 
  }

  .nav-toggle span { 
    display: block; 
    width: 24px; 
    height: 2px; 
    background: #fff; 
    margin: 3px 0; 
    transition: 0.3s; 
  }
  
  .nav-pill.is-open .nav-toggle span:nth-child(1) { 
    transform: translateY(8px) rotate(45deg); 
    width: 20px;
  }
  .nav-pill.is-open .nav-toggle span:nth-child(2) { opacity: 0; }
  .nav-pill.is-open .nav-toggle span:nth-child(3) { 
    transform: translateY(-8px) rotate(-45deg); 
    width: 20px;
  }
}





/* TURBO SMOOTHING */
.gallery-track, 
.testimonial-track,
.story-card,
.gallery-item img {
  transform: translateZ(0); /* Forces GPU use */
  will-change: transform;    /* Prepares the browser for movement */
  backface-visibility: hidden;
}


/* ============================================================
   FINAL MOBILE SYMMETRY OVERHAUL (Max-Width: 768px)
   ============================================================ */
@media (max-width: 768px) {

    /* 1. GLOBAL PADDING & CENTER AXIS */
    .section, .hero, footer {
        padding: 5rem 1.5rem !important; /* Forces uniform edge padding */
        text-align: center !important;
    }

/* 2. PROTECT NAVIGATION */
    .nav {
        padding: 1.5rem !important;
        position: fixed !important; /* Forces fixed even if other rules try to make it absolute */
        top: 0 !important;
    }

    .nav-inner {
        flex-direction: row !important;
        justify-content: space-between !important;
        align-items: center !important;
        width: 100% !important;
    }
    .nav-pill {
        display: flex !important;
        background: transparent !important;
        border: none !important;
        padding: 0 !important;
    }

    /* 3. HERO SECTION FIXES */
    .hero-content {
        display: flex !important;
        flex-direction: column !important;
        align-items: center !important;
        padding-top: 4rem !important;
    }
    .hero-actions {
        display: flex !important;
        flex-direction: column !important;
        align-items: center !important;
        gap: 1.2rem !important;
        width: 100% !important;
    }
    .hero-actions .btn {
        width: 100% !important;
        max-width: 280px !important;
    }






    /* 4. "NOTHING TO PROVE" (PHILOSOPHY) SIDE-BY-SIDE FIX */
    .editorial-layout {
        display: flex !important;
        flex-direction: column !important;
        gap: 2rem !important;
        padding-inline: 1rem !important;
    }

    /* Center Header and Subtitle */
    .editorial-header h2.section-title, 
    .editorial-header .section-subtitle {
        text-align: center !important;
        margin-inline: auto !important;
    }

    /* Horizontal Alignment for Pointers */

    .philo-icon {
        flex-shrink: 0 !important;
        margin-top: 4px !important;
    }

    .philo-text h3 {
        text-align: left !important;
        margin-bottom: 0.2rem !important;
    }

    .philo-text p {
        text-align: left !important;
    }






    /* 5. "MEET YOUR HOST" SECTION FIX */
    .host-container {
        display: flex !important;
        flex-direction: column !important;
        align-items: center !important;
    }
    .host-content, .host-content h3, .host-content p, .signature {
        text-align: center !important;
        margin-left: auto !important;
        margin-right: auto !important;
        display: block !important;
        width: 100% !important;
    }

    /* 6. TESTIMONIALS & EVENTS CONSISTENCY */
    .story-content, .story-name, .story-body {
        text-align: center !important;
        align-items: center !important;
    }
    .event-details-content > div:last-child {
        display: flex !important;
        flex-direction: column !important;
        align-items: center !important;
        gap: 15px !important;
        margin-top: 1.5rem !important;
    }

    /* 7. CONTACT & MAP FIXES */
    .contact-form .btn {
        margin: 1.5rem auto 0 !important;
        max-width: 300px !important;
    }
    .map-placeholder {
        height: 350px !important;
        width: 100% !important;
    }

    /* 8. FOOTER CENTERING */
    .footer-grid, .footer-col, .legal-row {
        display: flex !important;
        flex-direction: column !important;
        align-items: center !important;
        text-align: center !important;
    }
}

/* 9. Testimonials */
@media (max-width: 768px) {
  /* Center the content container and its items */
  .story-content {
    display: flex !important;
    flex-direction: column !important;
    align-items: center !important;
    justify-content: center !important;
    text-align: center !important;
    padding-bottom: 3rem !important; /* Prevents text from hitting bottom edge */
  }

  /* Center the Name and LinkedIn icon group */
  .story-name {
    justify-content: center !important;
    width: 100% !important;
  }

  /* Center the Quote/Body text */
  .story-body {
    text-align: center !important;
    padding-left: 0 !important; /* Remove the left border/padding used in desktop */
    border-left: none !important;
  }
}







/* =========================================
   THE ULTIMATE OVERRIDE: VIVID + ZOOM
   (Paste at the very bottom of style.css)
   ========================================= */

/* --- 1. DESKTOP LOGIC (Spotlight + Hover Zoom) --- */
@media (hover: hover) and (min-width: 901px) {
    /* DEFAULT: Sab bright aur clear */
    .testimonial-track .story-card {
        opacity: 1 !important;
        filter: brightness(1) blur(0px) !important;
        transform: scale(1) !important;
        transition: transform 0.4s ease, filter 0.4s ease, opacity 0.4s ease !important;
    }

    /* TRACK HOVER: Neighbors dim - COMMENTED OUT
    .testimonial-track:hover .story-card:not(:hover) {
        opacity: 0.4 !important;
        filter: brightness(0.8) blur(2px) grayscale(0.5) !important;
    }
      */

    /* CARD HOVER: Dimmed sharp look + Zoom */
    .testimonial-track .story-card:hover {
        opacity: 1 !important;
        filter: brightness(0.6) blur(0px) !important;
        transform: translateY(-10px) scale(1.03) !important;
        z-index: 20 !important;
    }
}

/* --- 2. MOBILE LOGIC (No Spotlight, Vivid Default + Touch Zoom) --- */
@media (max-width: 900px) {
    /* DEFAULT STATE: Yahan humne 100% brightness ko lohe ki tarah lock kar diya hai */
    .testimonial-track .story-card,
    .testimonial-track .story-card .story-visual img {
        opacity: 1 !important;
        filter: brightness(1) !important; /* Force 100% Brightness */
        filter: blur(0px) grayscale(0%) !important;
        transform: scale(1) !important;
        transition: transform 0.3s ease, filter 0.3s ease !important;
    }

    /* NEIGHBOR PROTECTION: Touch karne par padosi cards dim nahi honge */
    .testimonial-track:active .story-card:not(:active),
    .testimonial-track:hover .story-card:not(:hover) {
        opacity: 1 !important;
        filter: brightness(1) !important;
        filter: none !important;
    }

    /* INTERACTION (Touch/Click): Dim background + Zoom card */
    .story-card:active,
    .story-card:hover {
        transform: scale(1.05) !important; /* Subtle Zoom */
        z-index: 30 !important;
    }

    /* Sirf image ko dim karenge taaki white text dikhe */
    .story-card:active .story-visual img,
    .story-card:hover .story-visual img {
        filter: brightness(0.5) blur(0px) !important;
    }

    /* TEXT & OVERLAY: Reveal only on touch */
    .story-card .story-content {
        opacity: 0 !important;
        transform: translateY(0) !important;
    }
    .story-card:active .story-content,
    .story-card:hover .story-content {
        opacity: 1 !important;
    }

    .story-card .story-overlay {
        opacity: 0 !important;
    }
    .story-card:active .story-overlay,
    .story-card:hover .story-overlay {
        opacity: 1 !important;
        background: linear-gradient(to top, rgba(0,0,0,0.85), transparent) !important;
    }
}

/* --- 3. SCROLLING PROTECTION --- */
.testimonial-track.is-fast .story-card {
    filter: none !important;
    opacity: 1 !important;
}

/* Specific fix for Form Constriction */
@media (max-width: 768px) {
    /* Remove the extra internal padding from the grid */
    .contact-grid {
        padding-inline: 0 !important;
        width: 100% !important;
    }

    /* Expand the form wrapper to use the full available width */
    .contact-form-wrapper {
        padding: 2rem 1rem !important; /* Vertical / Horizontal */
        width: 100% !important;
        border-radius: 20px; /* Slightly tighter radius looks better on small screens */
    }

    /* Ensure inputs don't have inherited margins squeezing them */
    .form-field input, 
    .form-field textarea {
        width: 100% !important;
        box-sizing: border-box;
    }
}


/*=====
button in about me section
======*/
.host-actions {
  display: flex;
  flex-wrap: wrap;
  gap: 1rem;
  margin-top: 2.5rem;
  margin-bottom: 2rem;
}

/* Specific button style for the LinkedIn link to keep it "Secondary" */
.btn-outline-host {
  background: transparent;
  border: 2px solid var(--text-dark);
  color: var(--text-dark);
  padding: 1.1rem 1rem;
  display: inline-flex;
  align-items: center;
}

.btn-outline-host:hover {
  background: var(--text-dark);
  color: #fff;
  transform: translateY(-4px);
  box-shadow: 0 10px 20px rgba(0,0,0,0.1);
}

/* Consistency for dark mode background */
.section.bg-darkgreen .btn-outline-host {
  border-color: #fff;
  color: #fff;
}

.section.bg-darkgreen .btn-outline-host:hover {
  background: var(--accent);
  border-color: var(--accent);
  color: var(--text-dark);
}

/* Mobile alignment fix */
@media (max-width: 768px) {
  .host-actions {
    flex-direction: column;
    align-items: center;
  }
  .host-actions .btn {
    width: 100%;
    max-width: 300px;
  }
}












/*=================-===
INDICATOR FOR PAGE LENGTH
======================*/

/* Reading Progress Bar */
.scroll-progress-container {
  position: fixed;
  top: 0;
  left: 0;
  width: 100%;
  height: 4px; /* Thin and subtle */
  background: transparent;
  z-index: 9999; /* Above everything */
  pointer-events: none;
}

.scroll-progress-bar {
  height: 100%;
  background: var(--accent); /* Matches your Gold/Yellow brand color */
  width: 0%;
  transition: width 0.1s ease-out;
}

/* The Starting State (Invisible & Lower) */
.reveal-on-scroll {
  opacity: 0;
  transform: translateY(30px);
  transition: all 0.8s cubic-bezier(0.5, 0, 0, 1);
  will-change: opacity, transform;
}

/* The Active State (Visible & Natural) */
.reveal-on-scroll.is-visible {
  opacity: 1;
  transform: translateY(0);
}





/*==============
ABOUT ME MOBILE
===============*/
@media (max-width: 768px) {
  #host.section {
    /* Current default is 5rem (80px) vertical, 1.5rem (24px) horizontal */
    
    /* To DECREASE space (Tighten) */
    padding-top: 3rem !important; 
    padding-bottom: 3rem !important;
    padding-inline: 2rem !important;

    /* OR */

    /* To INCREASE space (Loosen) */
    /* padding-top: 8rem !important; */
    /* padding-bottom: 8rem !important; */
  }
}

/* =========================================
   MOBILE HERO HEIGHT ADJUSTMENT
   ========================================= */
@media (max-width: 768px) {
  .hero {
    /* Reduces the height from 90% of screen to roughly 65% */
    min-height: 65vh !important; 
    
    /* Reduces the top gap created for the nav */
    padding-top: 80px !important; 
    
    /* Ensures content stays centered in the smaller space */
    justify-content: center !important;
  }

  /* Adjusting font sizes to ensure they don't look cramped in smaller height */
  .hero h1 {
    font-size: 2.2rem !important; /* Slightly smaller than desktop */
    margin-bottom: 1.5rem !important;
  }

  .hero-text {
    font-size: 1.1rem !important; /* Smaller text to save vertical space */
    margin-bottom: 2rem !important;
    line-height: 1.5 !important;
  }

  /* Reduce the size of the background image container to match */
  .hero-bg {
    height: 100% !important;
    top: 0 !important;
  }
}


/* =========================================
   MOBILE PHILOSOPHY ADJUSTMENT (UPDATED)
   ========================================= */
@media (max-width: 900px) {
  
  /* 2. Re-ordering Logic */
  .editorial-layout {
    display: flex !important;
    flex-direction: column !important;
    gap: 1rem !important;
  }

  /* This "breaks" the wrapper so the Header and List can be moved independently */
  .editorial-content {
    display: contents !important; 
  }

  /* Position 1: The Title and Subtitle */
  .editorial-header {
    order: 1;
    text-align: center !important;
  }

  /* Position 2: The Image (Now beneath the header) */
  .editorial-visual {
    order: 2;
    height: 150px !important; /* Shortened to keep section within 80% frame */
    width: 100% !important;
    margin-bottom: 1rem;
  }

  /* Position 3: The Philosophy Points */
  .philosophy-list {
    order: 3;
    padding-inline: 0.5rem;
  }

  /* Position 4: The Button */
  .editorial-content > div:last-child {
    order: 4;
    text-align: center;
    margin-top: 0.5rem !important;
  }

/* PHILOSOPHY ACCORDION STYLES */
.philosophy-accordion-item {
  border-bottom: 1px solid rgba(0,0,0,0.1);
  margin-bottom: 0.5rem;
}

.philo-trigger {
  width: 100%;
  display: flex;
  justify-content: space-between;
  align-items: center;
  background: none;
  border: none;
  padding: 0.5rem 0;
  cursor: pointer;
  text-align: left;
}

.philo-trigger-left {
  display: flex;
  align-items: center;
  gap: 1rem;
}

.philo-trigger h3 {
  margin: 0;
  font-size: 1.15rem;
  font-weight: 700;
  color: var(--text-dark);
}

/* The +/- Button Logic */
.philo-plus {
  position: relative;
  width: 20px;
  height: 20px;
  flex-shrink: 0;
}

.philo-plus::before, .philo-plus::after {
  content: '';
  position: absolute;
  background: var(--text-dark);
  transition: transform 0.3s ease;
  top: 50%; left: 50%;
}

/* Horizontal line */
.philo-plus::before {
  width: 14px; height: 2px;
  margin-left: -7px; margin-top: -1px;
}

/* Vertical line */
.philo-plus::after {
  width: 2px; height: 14px;
  margin-left: -1px; margin-top: -7px;
}

/* Hide Content by Default */
.philo-content {
  max-height: 0;
  overflow: hidden;
  transition: max-height 0.4s cubic-bezier(0, 1, 0, 1); /* Smooth expansion */
}

.philo-content p {
  padding: 0 0 1.5rem 3.5rem; /* Indent to align with title */
  margin: 0;
  font-size: 0.95rem;
  line-height: 1.6;
  color: var(--text-muted);
}

/* OPEN STATE: Rotate vertical line to make it a '-' */
.philosophy-accordion-item.is-open .philo-plus::after {
  transform: rotate(90deg);
  opacity: 0;
}

.philosophy-accordion-item.is-open .philo-content {
  max-height: 500px; /* Large enough to hold the text */
  transition: max-height 0.4s ease-in;
}

@media (max-width: 768px) {
    .philo-content p {
        padding-left: 0; /* Full width on mobile for readability */
        text-align: left !important;
    }
}

/*==============
For testimonials hint
to open the testimonials
in mobile mode
================*/

/* 1. The Pulse Hint (Mobile Only) */
.mobile-interaction-hint {
  display: none; /* Hidden on Desktop */
}

@media (max-width: 900px) {
  .mobile-interaction-hint {
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 10px;
    margin-bottom: 20px;
    font-size: 0.85rem;
    font-weight: 700;
    color: rgba(255, 255, 255, 0.6);
    text-transform: uppercase;
    letter-spacing: 1.5px;
    animation: hintPulse 2.5s infinite ease-in-out;
  }

  @keyframes hintPulse {
    0%, 100% { opacity: 0.4; transform: scale(1); }
    50% { opacity: 0.9; transform: scale(1.05); }
  }

  /* 2. The Plus Icon on Cards */
  .story-card::before {
    content: '+';
    position: absolute;
    top: 20px;
    right: 20px;
    width: 36px;
    height: 36px;
    background: rgba(255, 255, 255, 0.15);
    backdrop-filter: blur(8px);
    -webkit-backdrop-filter: blur(8px);
    border: 1px solid rgba(255, 255, 255, 0.3);
    border-radius: 50%;
    display: flex;
    align-items: center;
    justify-content: center;
    color: #fff;
    font-size: 1.4rem;
    font-weight: 300;
    z-index: 10;
    transition: all 0.3s ease;
  }

  /* Rotate the plus to an 'x' or fade it out when active/hovered */
  .story-card:active::before,
  .story-card:hover::before {
    transform: rotate(45deg);
    background: var(--accent);
    color: var(--text-dark);
    border-color: var(--accent);
  }
}
}






/* ============================================================
   FINAL SYSTEM FIX: ALIGNMENT & ANIMATION RESTORED
   ============================================================ */

/* 1. RESTORE KEN BURNS ANIMATION GLOBALLY */
@keyframes kenburns {
  0% { transform: scale(1); }
  100% { transform: scale(1.15); }
}

.editorial-visual {
  position: relative;
  overflow: hidden; /* CRITICAL: Prevents the zoom from spilling out */
  border-radius: 12px;
}

.ken-burns {
  animation: kenburns 20s ease-in-out infinite alternate !important;
  width: 100%;
  height: 100%;
  object-fit: cover;
  display: block;
}

/* 2. DESKTOP PHILOSOPHY ALIGNMENT FIX */
/* Forces the text and headers to stay left-aligned on desktop */
.editorial-header, .philo-text {
  text-align: left !important;
}

.philo-trigger {
  background: transparent !important;
  border: none !important;
  padding: 0 !important;
  display: flex !important;
  flex-direction: row !important;
  align-items: center !important;
  gap: 1.2rem !important;
  width: 100%;
}

.philo-trigger-left {
  display: flex !important;
  flex-direction: row !important;
  align-items: center !important;
  gap: 1.2rem !important;
}

/* 3. MOBILE OVERRIDES (Restricted to 900px) */
@media (max-width: 900px) {
  :root {
    --philosophy-img-height: 250px; 
  }

  .editorial-layout {
    display: flex !important;
    flex-direction: column !important;
    padding: 0 1.5rem !important;
  }

  .editorial-header {
    text-align: center !important;
    order: 1;
  }

  .editorial-visual {
    height: var(--philosophy-img-height) !important;
    order: 2;
    margin-bottom: 1.5rem;
  }

  .philosophy-list {
    order: 3;
    width: 100%;
  }

  .philo-trigger {
    justify-content: space-between !important;
    padding: 1rem 0 !important;
    cursor: pointer !important;
  }

  .philo-plus {
    display: block !important;
    position: relative;
    width: 20px; height: 20px;
  }

  /* +/- Icon Drawing */
  .philo-plus::before, .philo-plus::after {
    content: '';
    position: absolute;
    background: var(--text-dark);
    top: 50%; left: 50%;
    transition: transform 0.3s ease;
  }
  .philo-plus::before { width: 14px; height: 2px; margin-left: -7px; margin-top: -1px; }
  .philo-plus::after { width: 2px; height: 14px; margin-left: -1px; margin-top: -7px; }

  /* Accordion Expansion */
  .philo-content {
    max-height: 0 !important;
    overflow: hidden !important;
    transition: max-height 0.4s ease-in-out !important;
    display: block !important;
  }

  .philosophy-accordion-item.is-open .philo-content {
    max-height: 400px !important;
  }

  .philosophy-accordion-item.is-open .philo-plus::after {
    transform: rotate(90deg);
    opacity: 0;
  }
}

/* 4. CLEANUP: Remove the "Symmetry Overhaul" conflict */
@media (max-width: 768px) {
    /* Prevent the global center rule from breaking the pointers alignment */
    .philo-trigger-left, .philo-text h3, .philo-text p {
        text-align: left !important;
    }
}





/*======
PHILOSOPHY
========*/

/* Manual Zoom Effect for Philosophy Section */
.editorial-visual {
  overflow: hidden; /* This acts as the window frame, hiding the image edges as it grows */
}

.zoom-on-hover {
  transition: transform 1.5s ease-out !important; /* Matches the Host section speed */
  transform: scale(1);
  will-change: transform;
  animation: none !important; /* This kills the automatic Ken Burns movement if it's still active */
}

.editorial-visual:hover .zoom-on-hover {
  transform: scale(1.05); /* Zooms in by 10% when the container is hovered */
}



/* =========================================
   REFINED MOBILE ABOUT ME (Wiggle Room Mode)
   ========================================= */

/* 1. GLOBAL FIX: Hide the button on Desktop by default */
.about-toggle-btn {
    display: none;
}

@media (max-width: 900px) {
    .about-collapsible-wrapper {
        position: relative;
        margin-bottom: 1rem;
    }

    .about-collapsible-content {
        /* ADJUST THIS FOR HEIGHT OF THE WINDOW */
        /* Set to 1.5rem to start the fade-out near "I am a real human..." */
        height: 1.5rem; 
        
        /* ADJUST THIS TO "SLIDE" THE TEXT UP OR DOWN */
        /* Negative margin pulls the paragraph UP, effectively hiding the top lines */
        margin-top: 0rem; 

        overflow: hidden;
        transition: all 0.6s cubic-bezier(0.25, 1, 0.5, 1);
        position: relative;
        display: block;
    }

    /* The Fade Overlay */
    .about-collapsible-content::after {
        content: '';
        position: absolute;
        inset: 0; /* Cover the whole content area */
        /* This ensures the gradient is always visible as a 'mask' over the text */
        background: linear-gradient(to bottom, rgba(242, 230, 216, 0) 0%, rgba(242, 230, 216, 1) 100%);
        transition: opacity 0.3s ease;
        pointer-events: none;
        z-index: 2;
    }

    /* OPEN STATE */
    .about-collapsible-wrapper.is-open .about-collapsible-content {
        height: 22rem; /* Increased to ensure all text fits on small screens */
        margin-top: 0 !important; 
    }

    .about-collapsible-wrapper.is-open .about-collapsible-content::after {
        opacity: 0;
    }

    .about-toggle-btn {
        display: flex !important; /* Force visible ONLY on mobile */
        align-items: center;
        justify-content: center;
        gap: 8px;
        background: none;
        border: none;
        padding: 0.5rem 0;
        color: var(--text-dark);
        font-weight: 700;
        font-family: var(--font-body);
        cursor: pointer;
        font-size: 0.9rem;
        margin: 0 auto;
        width: 100%;
    }

    .about-toggle-btn .dots {
        font-size: 1.5rem;
        line-height: 0;
        letter-spacing: 2px;
    }
}




/* =========================================
   HOST: Mobile reorder + controllable padding
   (Paste at the VERY END of style.css)
   ========================================= */

/* Defaults (desktop keeps using the left image) */
.host-image-frame--mobile { display: none; }

/* Mobile only: image comes AFTER the h3 */
@media (max-width: 768px) {

  /* 1) Turn off the desktop image, turn on the mobile one */
  .host-image-frame--desktop { display: none !important; }
  .host-image-frame--mobile  { display: block !important; }

  /* 2) Your mobile spacing controls (change these values freely) */
  #host {
    --host-mobile-title-pad-top: 18px;   /* padding ABOVE "This is Me" */
    --host-mobile-img-pad-top: 18px;     /* padding ABOVE the image */
    --host-mobile-img-pad-bottom: 22px;  /* padding BELOW the image */
  }

  /* 3) Apply the spacing */
  #host .host-content h3 {
    margin-top: var(--host-mobile-title-pad-top) !important;
  }

  #host .host-image-frame--mobile {
    margin-top: var(--host-mobile-img-pad-top) !important;
    margin-bottom: var(--host-mobile-img-pad-bottom) !important;
  }

  /* 4) Keep your existing mobile sizing sensible */
  #host .host-container {
    grid-template-columns: 1fr !important;
    gap: 2.2rem !important;
  }

  #host .host-image-frame {
    height: 400px !important;
  }
}




/* =========================================
   CONTACT GRID: DESKTOP SWAP
   ========================================= */
.contact-grid { 
  display: grid; 
  grid-template-columns: 1fr 1fr; 
  gap: 4rem; 
  align-items: stretch; 
  max-width: 1600px;
  margin: 0 auto;
  padding-inline: 2rem;
}

/* On Desktop: Force the map to the first column and form to the second */
@media (min-width: 901px) {
  .map-placeholder {
    order: 1; /* Moves Map to the Left */
  }
  .contact-form-wrapper {
    order: 2; /* Moves Form to the Right */
  }
}

/* On Mobile: The natural HTML order remains, so Form is on top */
@media (max-width: 900px) {
  .contact-grid {
    grid-template-columns: 1fr;
    gap: 3rem;
  }
}





/*=======
FOOTER SPACING BETWEEN ICONS AND EXPLORE
=========*/

@media (max-width: 900px) {
  /* This targets the "EXPLORE" heading specifically in mobile mode */
  .footer-grid .footer-col:nth-child(2) h4 {
    margin-top: 2.5rem !important; /* Increase this value (e.g., 3rem) for even more space */
  }
}



/* ============================================================
   NUCLEAR FIX: HERO OVER-SCAN (KILLS THE BLACK BAR)
   ============================================================ */

@media (max-width: 900px) {
    /* 1. We force the Hero container to hide any overflow from the zoomed image */
    .hero {
        overflow: hidden !important;
        position: relative !important;
    }

    /* 2. We make the image 110% of the size and pull it 5% 'off-screen' 
          This creates a safety buffer so it never reaches the black bar. */
    .hero-bg {
        position: absolute !important;
        top: -5% !important;   /* Pulls image UP so it's already past the top */
        left: -5% !important;  /* Pulls image LEFT for horizontal buffer */
        width: 110% !important; /* Makes it wider than the screen */
        height: 110% !important; /* Makes it taller than the screen */
        
        /* Ensures the image stays pinned to the top-center while moving */
        object-fit: cover !important;
        object-position: center top !important;
        
        /* Ensures it remains behind your text */
        z-index: 0 !important;
    }

    /* 3. Also fix the nav overlay to ensure it is 100% gap-free */
    .nav-links {
        top: -2px !important;
        height: 102vh !important;
        transform: none !important;
    }
}




/* ============================================================
--- PHILOSOPHY SECTION SPACING CONTROL ---
============================================================ */

/* 1. DESKTOP SETTINGS (Screens wider than 900px) */
@media (min-width: 901px) {
  #philosophy.section {
    padding-bottom: 8rem; /* Space at the very bottom of the green section */
  }
  .philosophy-list {
    margin-bottom: 0rem; /* Space specifically below the Curiosity item */
  }
}

/* 2. MOBILE SETTINGS (Screens 900px and below) */
@media (max-width: 900px) {
  /* This controls the outer green container padding */
  #philosophy.section {
    padding-bottom: 1rem !important; 
  }

  /* This controls the gap between the last line and the bottom of the section */
  .philosophy-list {
    margin-bottom: 2rem !important;
  }

  /* DIAGNOSIS: This is likely the "hidden" culprit. 
     The paragraph inside the accordion has internal padding. */
  .philo-content p {
    padding-bottom: 1rem !important; /* Decrease this to tighten the gap inside the open item */
  }

  /* This removes the margin between the individual accordion rows */
  .philosophy-accordion-item {
    margin-bottom: 0rem !important;
  }
}





/* ============================================================
   MOBILE HEADER: MODULAR FOUNDATION (GLASS + FX LAYERS)
   - Layer 1 (::before): The Frosted Glass Patch
   - Layer 2 (::after):  RESERVED FOR YOUR SPECIAL EFFECTS
   ============================================================ */
@media (max-width: 900px) {
  .nav {
    background: transparent !important;
    backdrop-filter: none !important;
    border: none !important;
    padding: 1.2rem 0 !important;
    z-index: 2000 !important;
  }

  /* THE ANCHOR: This handles the fixed position of Logo/Toggle */
  .nav-inner {
    display: flex !important;
    justify-content: space-between !important;
    align-items: center !important;
    margin: 0 auto !important;
    position: relative;
    z-index: 2010;
    
    /* Static Dimensions (The Lock) */
    width: calc(100% - 2.5rem) !important;
    max-width: 500px !important;
    padding: 0.6rem 1.4rem !important;
    background: transparent !important;
  }

 /* --- LAYER 1: FROSTED GLASS BACKGROUND (VIVID) --- */
  .nav-inner::before {
    content: '';
    position: absolute;
    inset: 0;
    z-index: -1;
    /* 0.96 Alpha + Higher Saturation for a deep black look */
    background: rgba(0, 0, 0, 0.80) !important; 
    backdrop-filter: blur(12px) saturate(200%) !important;
    -webkit-backdrop-filter: blur(12px) saturate(200%) !important;
    border-radius: 100px;
    border: 1px solid rgba(255, 255, 255, 0.25);
    /* Subtle inner glow makes the edges look sharper */
    box-shadow: inset 0 0 0 1px rgba(255,255,255,0.1), 0 8px 8px rgba(0, 0, 0, 0.5);
    transition: opacity 0.4s ease !important;
    opacity: 1;
  }

  /* --- LAYER 2: SPECIAL EFFECTS PLAYGROUND --- */
  /* Add your glows, shimmers, or borders here */
  .nav-inner::after {
    content: ''; 
    position: absolute;
    inset: 0;
    z-index: -1;
    border-radius: 100px;
    pointer-events: none;
    
    /* Transition for the effect fade */
    transition: opacity 0.4s ease !important;
    opacity: 1;

    /* EXAMPLE: To test, uncomment the line below to see a subtle red glow */
    /* box-shadow: 0 0 15px rgba(255, 0, 0, 0.3); */
  }

  /* --- STATE SYNC: Fade both layers when menu is open --- */
  body.nav-open .nav-inner::before,
  body.nav-open .nav-inner::after {
    opacity: 0 !important;
    transition: opacity 0.2s ease !important;
  }

  /* Fixed Logo and Toggle elements */
  .logo, .nav-toggle {
    margin: 0 !important;
    padding: 0 !important;
    position: relative;
    z-index: 2020;
  }
}



/* =========================================
   MOBILE POSITION INDICATOR (ALIGNMENT FIX)
   ========================================= */
@media (max-width: 900px) {
  /* Ensure the container for the indicator and toggle is a flexbox */
  .nav-pill {
    display: flex !important;
    align-items: center !important; /* CRITICAL: Vertically centers children */
    gap: 0; /* Handled by margin on indicator for finer control */
    background: transparent !important;
    border: none !important;
  }

  .nav-section-indicator {
    font-family: 'DM Sans', sans-serif;
    font-size: 0.7rem;
    font-weight: 700;
    text-transform: uppercase;
    letter-spacing: 0.12em;
    color: rgba(255, 255, 255, 0.5);
    pointer-events: none;
    transition: opacity 0.3s ease;
    white-space: nowrap;
    
    /* ALIGNMENT TWEAKS */
    margin-right: 14px;
    padding-top: 2px; /* OPTICAL FIX: Nudges text down to look centered */
    line-height: 1;   /* Prevents extra leading from pushing it up/down */
  }

  body.nav-open .nav-section-indicator {
    opacity: 0 !important;
  }
}




/* =========================================
   SOCIAL SUITE: CONSOLIDATED (MOBILE & DESKTOP)
   ========================================= */

/* 1. MOBILE MENU FOOTER (Inside Overlay) */
.mobile-menu-socials {
  display: none; /* CRITICAL FIX: Hidden on desktop to prevent nav-pill clutter */
}

@media (max-width: 900px) {
  .nav-links {
    justify-content: flex-start !important; /* Allows footer to sit at bottom */
    padding-top: 20vh !important; /* Keeps links centered in viewport */
  }

  .mobile-menu-socials {
    margin-top: auto; /* Pushes to bottom of full-screen menu */
    padding-bottom: 40px;
    display: flex; /* Revealed only on mobile */
    gap: 2rem;
    align-items: center;
    justify-content: center;
    width: 100%;
    opacity: 0.6;
  }

  .mobile-menu-socials a {
    color: #fff !important;
    transition: transform 0.3s ease;
  }
}

/* 2. DESKTOP VERTICAL SIDEBAR (REFINED) */
.desktop-social-sidebar {
  position: fixed;
  left: 30px; /* Anchored to left edge */
  top: 50%;
  transform: translateY(-50%);
  display: flex;
  flex-direction: column;
  gap: 25px;
  z-index: 900;
  opacity: 0.4;
  transition: opacity 0.4s ease, transform 0.4s ease;
}

.desktop-social-sidebar:hover {
  opacity: 1;
}

.desktop-social-sidebar a {
  color: #ffffff; /* Default white for hero/dark sections */
  transition: all 0.3s cubic-bezier(0.25, 0.46, 0.45, 0.94);
  display: flex;
  align-items: center;
  justify-content: center;
}

.desktop-social-sidebar a:hover {
  transform: translateX(8px);
  color: var(--accent);
}

/* Hide Sidebar on Mobile */
@media (max-width: 900px) {
  .desktop-social-sidebar {
    display: none;
  }
}

/* --- DYNAMIC THEME SWITCH --- */
.nav-sticky ~ .desktop-social-sidebar a {
  color: #1a1a1a;
}

.nav-sticky ~ .desktop-social-sidebar a:hover {
  color: var(--accent-hover);
}




/* ============================================================
   MOBILE SYMMETRY + CARD-SENSITIVE CTA
   ============================================================ */
.mobile-floating-container {
  display: none; /* Explicitly hide on Desktop to prevent stray rendering */
}

@media (max-width: 900px) {

  /* THE SYMMETRICAL BASE */
  .nav-inner, .mobile-floating-container .nav-cta-btn {
    height: 52px !important;
  }

  .mobile-floating-container {
    position: fixed;
    bottom: 20px;
    left: 50%;
    transform: translateX(-50%) translateY(120px);
    z-index: 1500;
    width: calc(100% - 2.5rem) !important;
    max-width: 500px !important;
    transition: transform 0.6s cubic-bezier(0.16, 1, 0.3, 0.7), opacity 0.3s ease;
    pointer-events: none;
    display: block !important; /* Re-enable for mobile only */
  }

  .mobile-floating-container.is-visible {
    transform: translateX(-50%) translateY(0);
    pointer-events: all;
  }

  /* 1. HIDE WHEN MOBILE MENU IS OPEN */
  body.nav-open .mobile-floating-container {
    opacity: 0 !important;
    visibility: hidden !important;
    pointer-events: none !important;
  }

  /* 2. HIDE WHEN AN EVENT CARD IS EXPANDED 
     This detects if any event card on the page has the 'is-open' class */
  #schedule:has(.event-card.is-open) ~ .mobile-floating-container,
  body:has(.event-card.is-open) .mobile-floating-container {
    opacity: 0 !important;
    transform: translateX(-50%) translateY(120px) !important;
    pointer-events: none !important;
  }


  
/* THE BUTTON STYLING */
.mobile-floating-container .nav-cta-btn {
  display: flex !important;
  width: 100% !important;
  height: 52px !important; /* Explicitly restored thickness */
  justify-content: center;
  align-items: center; /* Correct vertical alignment */
  border-radius: 100px !important;
  
  /* REFINEMENT: Background Gradient */
  background: linear-gradient(145deg, #233747, #1c2c39) !important;
  
  color: #F2E6D8 !important;
  font-family: 'DM Sans', sans-serif !important;
  font-weight: 700;
  text-transform: none !important; /* Forces mixed case */
  letter-spacing: 0.03em;
  font-size: 0.9rem;
  line-height: 1 !important; /* Prevents font-leading from offsetting center */
  
  border: 1.5px solid rgba(242, 230, 216, 0.28) !important; 
  
  box-shadow: 
    0 10px 30px rgba(0, 0, 0, 0.7),
    inset 0 1px 1px rgba(242, 230, 216, 0.1);
  
  text-decoration: none;
  padding: 0 !important;
  margin: 0 !important;
  transition: all 0.4s cubic-bezier(0.165, 0.84, 0.44, 1);
}



/* Feedback remains soft but provides tactile confirmation */
.mobile-floating-container .nav-cta-btn:active {
  background: #2a4154 !important;
  transform: scale(0.97) !important;
  border-color: rgba(242, 230, 216, 0.5) !important;
  box-shadow: 0 4px 15px rgba(0, 0, 0, 0.8);
}}






/* =========================================
   YT VIDEO GALLERY: FINAL CAPABLE FIX
   ========================================= */

#yt-video-section {
  padding-top: 5.5rem !important;    /* Exact Testimonial match */
  padding-bottom: 5.5rem !important; /* Exact Testimonial match */
  background-color: #F2E6D8 !important; /* Forced Cream */
  overflow: hidden;
  width: 100vw;
}

#yt-video-section .section-subtitle {
  margin-bottom: 0 !important; /* Matches testimonial subtitle spacing */
}

.yt-video-wrapper {
  width: 100%;
  overflow: hidden;
  padding-top: 2rem;
  padding-bottom: 20px;
  cursor: grab; /* RESTORES THE GRAB HAND */
  touch-action: pan-y;
  -webkit-mask-image: linear-gradient(to right, transparent 0%, black 15%, black 85%, transparent 100%);
  mask-image: linear-gradient(to right, transparent 0%, black 15%, black 85%, transparent 100%);
}

.yt-video-track {
  display: flex;
  gap: 2rem;
  width: max-content;
  will-change: transform;
}

/* THE CARD & REDIRECT WRAPPER */
.yt-video-link {
  text-decoration: none;
  display: block;
}

.yt-video-card {
  position: relative;
  width: 320px !important;
  height: 568px !important;
  border-radius: 24px;
  overflow: hidden;
  flex-shrink: 0;
  background: #000;
  box-shadow: 0 10px 30px rgba(0,0,0,0.1);
  transition: transform 0.4s cubic-bezier(0.165, 0.84, 0.44, 1), opacity 0.4s ease, filter 0.4s ease;
}

.yt-visual, .yt-visual img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  pointer-events: none;
}

.yt-overlay {
  position: absolute;
  inset: 0;
  background: linear-gradient(to top, rgba(0,0,0,0.3), transparent);
  display: flex;
  align-items: center;
  justify-content: center;
}

.yt-play-btn {
  width: 60px;
  height: 60px;
  border-radius: 50%;
  background: rgba(255, 255, 255, 0.3);
  backdrop-filter: blur(10px);
  border: 1px solid rgba(255, 255, 255, 0.4);
  color: #fff;
  display: flex;
  align-items: center;
  justify-content: center;
  transition: all 0.3s ease;
}

@media (hover: hover) and (min-width: 901px) {
  .yt-video-track:hover .yt-video-card:not(:hover) {
    opacity: 0.5;
    filter: blur(2px) grayscale(0.2);
  }
  .yt-video-card:hover { transform: scale(1.02) translateY(-10px); }
  .yt-video-card:hover .yt-play-btn {
    background: #1c2c39;
    color: #F9D776;
    border-color: #1c2c39;
  }
}

@media (max-width: 900px) {
  .yt-video-card { width: 280px !important; height: 498px !important; }
}