/* ═══════════════════════════════════════════════════════════════════
   VA SHORELINE EVENTS — MOBILE OPTIMIZATIONS
   Comprehensive mobile-first fixes for all screen sizes
   ═══════════════════════════════════════════════════════════════════ */

/* ─── BASE: Prevent horizontal scroll everywhere ─────────────────── */
html, body {
  overflow-x: hidden;
  max-width: 100%;
}

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

/* Ensure images never overflow */
img, video {
  max-width: 100%;
  height: auto;
}

/* ─── NAV — MOBILE ───────────────────────────────────────────────── */
@media (max-width: 1024px) {
  .nav {
    padding: 0.9rem 1.25rem;
  }
  .nav-logo img {
    height: 34px;
  }
  /* Ensure hamburger is always visible and tappable */
  .nav-hamburger {
    display: flex !important;
    min-width: 44px;
    min-height: 44px;
    padding: 0.5rem;
  }
  .nav-links {
    display: none !important;
  }
  .nav-login {
    display: none !important;
  }
  /* Nav background always opaque on mobile so logo is readable */
  .nav-wrap {
    background: rgba(8,15,26,0.96) !important;
    backdrop-filter: blur(20px) !important;
    -webkit-backdrop-filter: blur(20px) !important;
    border-bottom: 1px solid rgba(0,217,255,0.1);
  }
}

@media (max-width: 768px) {
  .nav {
    padding: 0.8rem 1rem;
  }
  .nav-book {
    padding: 0.55rem 1.1rem;
    font-size: 0.7rem;
  }
}

/* ─── MOBILE MENU: Full coverage, no bleed ───────────────────────── */
.mobile-menu {
  padding-top: 5rem;
  padding-left: 1.5rem;
  padding-right: 1.5rem;
  overscroll-behavior: contain;
}

@media (max-width: 480px) {
  .mobile-menu {
    padding-top: 4.5rem;
  }
  .mobile-menu a,
  .mobile-dropdown-btn {
    font-size: 1.2rem;
  }
}

/* ─── HERO — MOBILE ──────────────────────────────────────────────── */
@media (max-width: 1100px) {
  .hero-inner {
    grid-template-columns: 1fr;
    text-align: center;
    max-width: 680px;
    padding: 0 1.5rem;
    gap: 2rem;
  }
  .hero-actions {
    justify-content: center;
  }
  .hero-badges {
    justify-content: center;
  }
  .hero-sub {
    margin-left: auto;
    margin-right: auto;
  }
  /* Hide the media stack (photo frame) on single-col layout */
  .hero-media-stack {
    display: none;
  }
}

@media (max-width: 768px) {
  .hero-content {
    padding: 7rem 0 5rem;
  }
  .hero-inner {
    max-width: 100%;
    padding: 0 1.25rem;
  }
  .hero-display {
    font-size: clamp(2rem, 7vw, 2.8rem) !important;
  }
  .hero-sub {
    font-size: 0.95rem;
    max-width: 38ch;
  }
  .hero-actions {
    gap: 0.75rem;
  }
  .hero-badges {
    gap: 1rem;
  }
  .hero-badge {
    font-size: 0.68rem;
  }
}

@media (max-width: 480px) {
  .hero-content {
    padding: 6rem 0 4rem;
  }
  .hero-display {
    font-size: clamp(1.9rem, 8vw, 2.5rem) !important;
  }
  .hero-actions {
    flex-direction: column;
    align-items: stretch;
    gap: 0.7rem;
  }
  .hero-actions .btn {
    width: 100%;
    text-align: center;
    justify-content: center;
  }
}

@media (max-width: 360px) {
  .hero-display {
    font-size: 1.8rem !important;
  }
  .hero-content {
    padding: 5.5rem 0 3.5rem;
  }
}

/* ─── COASTAL STRIP ──────────────────────────────────────────────── */
@media (max-width: 768px) {
  .coastal-strip {
    overflow: hidden;
  }
  .coastal-strip-inner {
    /* Convert to a scrolling marquee-like strip instead of wrapping */
    display: flex;
    flex-wrap: nowrap;
    overflow-x: auto;
    gap: 1rem;
    padding: 0 1.25rem;
    justify-content: flex-start;
    -webkit-overflow-scrolling: touch;
    scrollbar-width: none;
    -ms-overflow-style: none;
  }
  .coastal-strip-inner::-webkit-scrollbar {
    display: none;
  }
  .strip-item {
    flex-shrink: 0;
    font-size: 0.65rem;
  }
}

/* ─── SECTION GLOBAL ─────────────────────────────────────────────── */
@media (max-width: 768px) {
  .container {
    padding: 0 1.25rem;
  }
  .section-pad {
    padding: 3.5rem 0;
  }
  .section-pad-lg {
    padding: 5rem 0;
  }
  .section-title {
    font-size: clamp(1.7rem, 5.5vw, 2.5rem);
    word-break: normal;
    overflow-wrap: break-word;
  }
  .section-sub {
    font-size: 0.95rem;
    max-width: 100%;
  }
}

@media (max-width: 480px) {
  .container {
    padding: 0 1rem;
  }
  .section-pad {
    padding: 2.75rem 0;
  }
  .section-pad-lg {
    padding: 3.75rem 0;
  }
  .section-title {
    font-size: clamp(1.6rem, 6vw, 2.2rem);
  }
}

/* ─── EVENTS GRID ────────────────────────────────────────────────── */
@media (max-width: 900px) {
  .events-grid {
    grid-template-columns: 1fr 1fr;
    gap: 1rem;
  }
}

@media (max-width: 540px) {
  .events-grid {
    grid-template-columns: 1fr;
    gap: 1rem;
  }
  .event-card {
    aspect-ratio: 4/3;
  }
  .event-card-name {
    font-size: 1.4rem;
  }
  /* Always show the CTA on mobile (no hover) */
  .event-card-cta {
    opacity: 1 !important;
    transform: translateY(0) !important;
  }
}

/* ─── BEACH FEATURE / EXPERIENCE SECTION ────────────────────────── */
@media (max-width: 1100px) {
  .beach-feature-inner {
    grid-template-columns: 1fr;
  }
  .beach-feature-visual {
    min-height: 360px;
    border-radius: 0;
  }
  /* Fix the gradient that fades to navy-mid (only needed for 2-col layout) */
  .beach-feature-visual::after {
    background: linear-gradient(to bottom, transparent 50%, var(--navy-mid) 100%);
  }
  .beach-feature-content {
    padding: 3rem 2rem;
  }
}

@media (max-width: 768px) {
  .beach-feature-visual {
    min-height: 280px;
  }
  .beach-feature-badge {
    top: 1.5rem;
    left: 1.5rem;
    padding: 0.9rem 1.1rem;
  }
  .badge-num {
    font-size: 2rem;
  }
  .beach-feature-content {
    padding: 2.5rem 1.25rem;
  }
  .feature-item {
    gap: 1rem;
    padding: 1.1rem 0;
  }
  .feature-icon {
    width: 38px;
    height: 38px;
    font-size: 1.1rem;
  }
  .feature-text strong {
    font-size: 0.85rem;
  }
  .feature-text span {
    font-size: 0.78rem;
  }
}

/* ─── PACKAGES ───────────────────────────────────────────────────── */
@media (max-width: 900px) {
  .packages-grid {
    grid-template-columns: 1fr 1fr;
    gap: 1rem;
  }
  .pkg-card {
    padding: 1.8rem 1.4rem;
  }
  .pkg-price {
    font-size: 2.8rem;
  }
}

@media (max-width: 600px) {
  .packages-grid {
    grid-template-columns: 1fr;
    max-width: 420px;
    margin-left: auto;
    margin-right: auto;
  }
  /* Featured card should still look special on mobile */
  .pkg-card.featured {
    order: -1; /* Show featured first on mobile */
  }
}

@media (max-width: 480px) {
  .pkg-card {
    padding: 1.5rem 1.2rem;
  }
  .pkg-price {
    font-size: 2.5rem;
  }
  .pkg-icon {
    font-size: 1.75rem;
  }
}

/* ─── GALLERY ────────────────────────────────────────────────────── */
@media (max-width: 768px) {
  .gallery-section {
    padding: 3.5rem 0 !important;
  }
  .gallery-header {
    flex-direction: column;
    align-items: flex-start;
    gap: 1rem;
    padding: 0 1.25rem;
  }
  .gallery-grid {
    grid-template-columns: repeat(3, 1fr) !important;
    grid-auto-rows: auto !important;
    gap: 2px !important;
  }
  .gallery-grid .gal-item {
    width: auto !important;
    height: auto !important;
    aspect-ratio: 4/3 !important;
    min-height: 0 !important;
  }
  .gallery-grid .gal-item img {
    position: absolute !important;
    top: 0 !important; left: 0 !important;
    width: 100% !important; height: 100% !important;
  }
  .gallery-mosaic {
    grid-template-columns: 1fr 1fr;
    grid-auto-rows: 140px;
  }
  /* Always show overlay text on mobile (no hover) */
  .gal-item-overlay {
    opacity: 1;
  }
}

@media (max-width: 480px) {
  .gallery-grid {
    grid-template-columns: repeat(2, 1fr) !important;
  }
  .gallery-mosaic {
    grid-auto-rows: 120px;
  }
}

/* ─── HOW IT WORKS ───────────────────────────────────────────────── */
@media (max-width: 768px) {
  .hiw-steps {
    grid-template-columns: 1fr;
    gap: 1.5rem;
  }
  .hiw-steps::before {
    display: none;
  }
  .hiw-step {
    text-align: left;
    display: flex;
    align-items: flex-start;
    gap: 1.2rem;
    padding: 0;
  }
  .hiw-num {
    width: 3.5rem;
    height: 3.5rem;
    font-size: 1.4rem;
    margin: 0;
    flex-shrink: 0;
  }
  .hiw-step-content {
    flex: 1;
  }
  /* Re-align text left for horizontal layout */
  .hiw-step h3,
  .hiw-step p {
    text-align: left;
  }
  .hiw-step-emoji {
    display: none; /* Remove emoji when laid out horizontally */
  }
}

@media (max-width: 480px) {
  .hiw-steps {
    gap: 1.2rem;
  }
  .hiw-num {
    width: 3rem;
    height: 3rem;
    font-size: 1.2rem;
  }
}

/* ─── REVIEWS ────────────────────────────────────────────────────── */
@media (max-width: 768px) {
  .reviews-grid {
    grid-template-columns: 1fr;
    gap: 1rem;
  }
  .review-card {
    padding: 1.5rem;
  }
  .review-text {
    font-size: 0.92rem;
  }
  .reviews-rating {
    margin-bottom: 2rem;
  }
  /* Elfsight widget: constrain width */
  .elfsight-wrapper {
    padding: 1rem;
    margin-top: 2rem;
  }
}

/* ─── FAQ ────────────────────────────────────────────────────────── */
@media (max-width: 768px) {
  .faq-layout {
    grid-template-columns: 1fr;
    gap: 2rem;
    margin-top: 2.5rem;
  }
  .faq-sticky {
    position: static;
  }
}

@media (max-width: 480px) {
  .faq-q {
    font-size: 0.85rem;
    padding: 1.1rem 0;
  }
  .faq-a p {
    font-size: 0.82rem;
  }
}

/* ─── CITIES GRID ────────────────────────────────────────────────── */
@media (max-width: 768px) {
  .cities-grid {
    grid-template-columns: 1fr 1fr;
    gap: 0.75rem;
  }
  .city-card {
    padding: 1rem 1.1rem;
    gap: 0.75rem;
  }
  .city-icon {
    font-size: 1.5rem;
  }
  .city-name {
    font-size: 0.95rem;
  }
  /* Show arrow always on mobile */
  .city-arrow {
    opacity: 1 !important;
    transform: translateX(0) !important;
  }
}

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

/* ─── CTA SECTION ────────────────────────────────────────────────── */
@media (max-width: 768px) {
  .cta-section {
    padding: 3.5rem 0;
  }
  .cta-inner {
    flex-direction: column;
    text-align: center;
    align-items: center;
    gap: 2rem;
  }
  .cta-actions {
    justify-content: center;
    flex-direction: column;
    width: 100%;
    max-width: 320px;
  }
  .cta-actions .btn {
    width: 100%;
    text-align: center;
    justify-content: center;
  }
  .cta-text h2 {
    font-size: clamp(1.75rem, 5vw, 2.4rem);
  }
}

/* ─── BLOG GRID ──────────────────────────────────────────────────── */
@media (max-width: 768px) {
  .blog-grid {
    grid-template-columns: 1fr 1fr;
    gap: 1.2rem;
  }
  .blog-card-body {
    padding: 1.3rem;
  }
  .blog-card h3 {
    font-size: 1rem;
  }
  /* Show arrow always on mobile */
  .blog-card-arrow {
    opacity: 1 !important;
    transform: translateY(0) !important;
  }
}

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

/* ─── FOOTER ─────────────────────────────────────────────────────── */
@media (max-width: 768px) {
  .footer-top {
    grid-template-columns: 1fr 1fr !important;
    gap: 2rem !important;
    padding: 2.5rem 0 2rem !important;
  }
  .footer-brand {
    grid-column: 1 / -1;
  }
  .footer-brand p {
    font-size: 0.75rem;
    max-width: 100%;
  }
  .footer-brand img {
    height: 30px;
    margin-bottom: 0.9rem;
  }
  .footer-contact { margin-top: 1rem; gap: 0.4rem; }
  .footer-contact a { font-size: 0.75rem; }
  .footer-col h4 { margin-bottom: 0.9rem; }
  .footer-col ul { gap: 0.5rem; }
  .footer-col a { font-size: 0.75rem; }
  .footer-bottom {
    flex-direction: column;
    text-align: center;
    gap: 0.75rem;
    padding: 1.5rem 0;
  }
  .footer-bottom p { font-size: 0.65rem; }
  .footer-legal {
    gap: 1rem;
    flex-wrap: wrap;
    justify-content: center;
  }
  .footer-social {
    justify-content: center;
  }
}

@media (max-width: 480px) {
  .footer-top {
    grid-template-columns: 1fr !important;
    gap: 1.5rem !important;
    padding: 2rem 0 1.5rem !important;
  }
  .footer-brand {
    grid-column: auto;
  }
}

/* ─── PAGE HERO (inner pages) ────────────────────────────────────── */
@media (max-width: 768px) {
  .page-hero {
    min-height: 55vh;
    padding-top: calc(5rem + env(safe-area-inset-top, 0px)) !important;
    align-items: flex-start;
  }
  .page-hero-content {
    padding: 2.5rem 0 3.5rem;
  }
  .page-hero-title {
    font-size: clamp(1.7rem, 6.5vw, 2.5rem) !important;
    overflow-wrap: break-word;
    word-break: normal;
    hyphens: auto;
  }
  .page-hero-sub {
    font-size: 0.92rem;
    max-width: 100%;
  }
}

@media (max-width: 480px) {
  .page-hero {
    min-height: 50vh;
    padding-top: calc(5.5rem + env(safe-area-inset-top, 0px)) !important;
  }
  .page-hero-content {
    padding: 2rem 0 3rem;
  }
  .page-hero-title {
    font-size: clamp(1.6rem, 7vw, 2.2rem) !important;
  }
}

/* ─── CONTACT FORM ───────────────────────────────────────────────── */
@media (max-width: 768px) {
  .contact-form-wrap {
    padding: 2rem 1.25rem;
    border-radius: var(--radius);
  }
  .form-row {
    grid-template-columns: 1fr;
    gap: 0;
  }
}

@media (max-width: 480px) {
  .contact-form-wrap {
    padding: 1.5rem 1rem;
    border-radius: var(--radius);
    margin: 0 -0.25rem; /* slight edge-to-edge feel */
  }
  .form-input, .form-select, .form-textarea {
    font-size: 1rem; /* prevents iOS zoom on focus */
    padding: 0.8rem 1rem;
  }
}

/* ─── RELATED CITIES ─────────────────────────────────────────────── */
@media (max-width: 768px) {
  .related-cities {
    grid-template-columns: 1fr 1fr;
    gap: 0.75rem;
  }
}

@media (max-width: 400px) {
  .related-cities {
    grid-template-columns: 1fr;
  }
}

/* ─── LIGHTBOX ───────────────────────────────────────────────────── */
@media (max-width: 768px) {
  .lightbox-img {
    max-width: 96vw;
    max-height: 80vh;
  }
  .lightbox-nav {
    width: 40px;
    height: 40px;
    font-size: 1.2rem;
  }
  .lightbox-prev { left: 0.5rem; }
  .lightbox-next { right: 0.5rem; }
  .lightbox-close {
    top: 1rem;
    right: 1rem;
    width: 40px;
    height: 40px;
  }
}

/* ─── BUTTONS — TOUCH TARGETS ────────────────────────────────────── */
@media (max-width: 768px) {
  .btn {
    min-height: 44px;
    align-items: center;
  }
  /* Prevent button text overflow at small sizes */
  .btn {
    white-space: normal;
    text-align: center;
  }
}

/* ─── BRANDED SECTION (if present) ──────────────────────────────── */
@media (max-width: 768px) {
  .branded-inner {
    grid-template-columns: 1fr !important;
    gap: 2.5rem;
    padding: 0 1.25rem;
  }
  .branded-left {
    position: static;
  }
  .branded-photo-frame {
    max-width: 240px;
    margin: 0 auto;
  }
  .branded-title {
    font-size: 1.75rem;
  }
}

/* ─── WAVE ANIMATIONS: reduced on mobile for performance ─────────── */
@media (max-width: 768px) {
  .wave-anim-1 { animation-duration: 15s; }
  .wave-anim-2 { animation-duration: 20s; }
  .wave-anim-3 { animation-duration: 18s; }
  .hero-media-float { animation: none !important; }
  /* Simplify pkg-card featured glow on mobile */
  .pkg-card.featured { animation: none !important; }
}

/* ─── MARQUEE STRIP ──────────────────────────────────────────────── */
@media (max-width: 480px) {
  .marquee-item {
    font-size: 0.65rem;
    gap: 2rem;
  }
}

/* ─── SAFE AREA INSETS (notch phones) ───────────────────────────── */
@supports (padding: env(safe-area-inset-bottom)) {
  footer {
    padding-bottom: env(safe-area-inset-bottom, 0px);
  }
  .mobile-menu {
    padding-bottom: calc(2rem + env(safe-area-inset-bottom, 0px));
  }
}

/* ─── ACCESSIBILITY: Focus visible on mobile ─────────────────────── */
@media (max-width: 768px) {
  :focus-visible {
    outline: 2px solid var(--electric);
    outline-offset: 2px;
  }
}

/* ─── CITY PAGES — additional mobile ────────────────────────────── */
@media (max-width: 768px) {
  .city-intro-section {
    padding: 3rem 0 3.5rem;
  }
  /* Ensure city intro stacks cleanly */
  [class*="city-intro"] .split-layout,
  .city-intro-inner {
    grid-template-columns: 1fr !important;
    gap: 2rem;
  }
  .city-intro-image {
    max-height: 300px;
    overflow: hidden;
    border-radius: var(--radius-lg);
  }
}

@media (max-width: 520px) {
  .city-events-grid {
    grid-template-columns: 1fr !important;
  }
  .city-evt-card {
    padding: 1.4rem 1.2rem;
  }
  .city-related-grid {
    grid-template-columns: 1fr 1fr;
    gap: 0.65rem;
  }
}

@media (max-width: 380px) {
  .city-related-grid {
    grid-template-columns: 1fr;
  }
}

/* ─── PREVENT TEXT OVERFLOW ──────────────────────────────────────── */
@media (max-width: 768px) {
  h1, h2, h3, h4 {
    overflow-wrap: break-word;
    word-break: normal;
    hyphens: auto;
  }
  /* Long URLs in content shouldn't break layout */
  a {
    overflow-wrap: break-word;
    word-break: break-word;
  }
}

/* ─── PRICING PAGE (if exists) ───────────────────────────────────── */
@media (max-width: 600px) {
  .pricing-grid,
  [class*="pricing"] .packages-grid {
    grid-template-columns: 1fr !important;
    max-width: 420px;
    margin-left: auto;
    margin-right: auto;
  }
}

/* ─── ABOUT PAGE ─────────────────────────────────────────────────── */
@media (max-width: 768px) {
  .about-split,
  [class*="about"] .split-layout {
    grid-template-columns: 1fr !important;
    gap: 2rem;
  }
}

/* ─── IOS INPUT ZOOM FIX ─────────────────────────────────────────── */
/* iOS zooms into inputs with font-size < 16px */
@media (max-width: 768px) {
  input[type="text"],
  input[type="email"],
  input[type="tel"],
  input[type="number"],
  input[type="date"],
  select,
  textarea {
    font-size: 1rem !important;
  }
}

/* ─── SCROLL PROGRESS BAR ────────────────────────────────────────── */
@media (max-width: 768px) {
  .scroll-progress {
    height: 2px;
  }
}

/* ═══════════════════════════════════════════════════════════════════
   VISUAL FIXES — based on screenshot audit
   ═══════════════════════════════════════════════════════════════════ */

/* ─── FIX 1: Hero float badges bleeding off-screen ──────────────── */
/* The float badges (.f1, .f2) use negative left/right offsets that
   push them outside the viewport on mobile. Hide them since the
   media stack itself is hidden anyway. */
@media (max-width: 1100px) {
  .hero-media-float {
    display: none !important;
  }
}

/* ─── FIX 2: Nav desktop links showing on mobile ────────────────── */
/* Ensure nav-links are truly hidden — the inline critical CSS
   sets display:flex, so we need !important */
@media (max-width: 1024px) {
  .nav-links,
  ul.nav-links {
    display: none !important;
    visibility: hidden !important;
  }
  .nav-login {
    display: none !important;
  }
}

/* ─── FIX 3: Page hero overlapping the nav on inner pages ───────── */
/* Inner pages (page-hero) need extra top padding since the nav is fixed */
@media (max-width: 768px) {
  .page-hero {
    padding-top: 0 !important;
    align-items: flex-start;
  }
  .page-hero-content {
    padding-top: calc(5rem + env(safe-area-inset-top, 0px));
  }
}

@media (max-width: 480px) {
  .page-hero-content {
    padding-top: calc(5.5rem + env(safe-area-inset-top, 0px));
  }
}

/* ─── FIX 4: Gallery images not loading (file:// path issue) ─────── */
/* Ensure gallery grid items have correct positioning context */
.gallery-grid .gal-item,
.gallery-mosaic .gal-item {
  position: relative;
}

/* ─── FIX 5: Pricing page — package list items invisible ─────────── */
/* On the pricing page the feature checkmarks/x marks appear as
   invisible characters. Ensure pkg-features li visibility */
@media (max-width: 600px) {
  .pkg-features li {
    font-size: 0.82rem;
    color: rgba(8,15,26,0.7);
  }
  .pkg-card.featured .pkg-features li {
    color: rgba(248,250,255,0.75);
  }
  /* Ensure price is visible */
  .pkg-price {
    color: var(--navy) !important;
  }
  .pkg-card.featured .pkg-price {
    color: var(--white) !important;
  }
}

/* ─── FIX 6: Coastal strip hiding content behind overflow:hidden ─── */
/* On very small screens the strip items get clipped. Use a scrollable
   strip with fade hints at the edges */
@media (max-width: 480px) {
  .coastal-strip {
    position: relative;
  }
  .coastal-strip-inner {
    padding-left: 1rem;
    padding-right: 1rem;
  }
}

/* ─── FIX 7: Contact page layout — form area needs padding ──────── */
@media (max-width: 768px) {
  /* The contact layout often has a 2-col grid (info + form) */
  .contact-layout,
  .contact-grid,
  [class*="contact"] > .container > div[style*="grid"],
  .contact-wrap {
    grid-template-columns: 1fr !important;
    gap: 2rem;
  }
}

/* ─── FIX 8: City page hero — image caption overlapping text ─────── */
@media (max-width: 768px) {
  /* The city pages show a floating caption box on the hero image.
     Reposition it so it doesn't cover the title text */
  .page-hero-badge,
  .city-hero-badge {
    position: relative !important;
    top: auto !important;
    left: auto !important;
    margin-top: 1rem;
    display: inline-block;
  }
}

/* ─── FIX 9: Events section "Every Occasion" white card overflow ─── */
/* The event type cards at top of home use a white card that clips */
@media (max-width: 768px) {
  .events-section .text-center,
  .events-section > .container {
    overflow: visible;
  }
  /* White card in events intro */
  .events-intro-card,
  .events-section [style*="border-radius:16px"],
  .events-section [style*="border-radius: 16px"] {
    border-radius: 12px !important;
    overflow: hidden;
  }
}

/* ─── FIX 10: Long email address in footer/contact overflows ──────── */
@media (max-width: 480px) {
  .footer-contact a,
  .contact-info-item a {
    font-size: 0.72rem !important;
    word-break: break-all;
    overflow-wrap: anywhere;
  }
}

/* ─── FIX 11: Sections with inline grid styles not overriding ──────── */
/* Some sections use inline style="display:grid;grid-template-columns:..."
   which can't be overridden by class selectors. Catch common patterns. */
@media (max-width: 768px) {
  /* Two-col split layouts used throughout inner pages */
  div[style*="grid-template-columns: 1fr 1fr"],
  div[style*="grid-template-columns:1fr 1fr"] {
    grid-template-columns: 1fr !important;
  }
  div[style*="grid-template-columns: repeat(2"],
  div[style*="grid-template-columns:repeat(2"] {
    grid-template-columns: 1fr !important;
  }
  div[style*="grid-template-columns: repeat(3"],
  div[style*="grid-template-columns:repeat(3"] {
    grid-template-columns: 1fr 1fr !important;
  }
}

@media (max-width: 480px) {
  div[style*="grid-template-columns: repeat(3"],
  div[style*="grid-template-columns:repeat(3"] {
    grid-template-columns: 1fr !important;
  }
}

/* ─── FIX 12: Stat numbers section on corporate/about pages ────────── */
@media (max-width: 600px) {
  .stats-grid,
  .stat-row,
  [class*="stats"] {
    grid-template-columns: 1fr 1fr !important;
    gap: 1rem;
  }
  .stat-item {
    text-align: center;
  }
}

/* ─── FIX 13: "Not Just Any Booth" section video sizing ────────────── */
@media (max-width: 768px) {
  .beach-feature-visual video,
  .beach-feature-visual img {
    width: 100% !important;
    height: 100% !important;
    object-fit: cover;
  }
}

/* ─── FIX 14: Make sure nothing clips outside the viewport ──────────── */
/* Nuclear option: clip any element wider than viewport */
@media (max-width: 768px) {
  section,
  .section-pad,
  .section-pad-lg,
  footer,
  header,
  .nav-wrap {
    max-width: 100vw;
    overflow-x: hidden;
  }
}

/* ─── FIX 15: Hero content bottom padding on mobile ────────────────── */
/* Extra bottom room so content doesn't crowd the waves */
@media (max-width: 480px) {
  .hero {
    min-height: auto;
    padding-bottom: 2rem;
  }
  .hero-content {
    padding-bottom: 3rem;
  }
}

/* ═══════════════════════════════════════════════════════════════════
   AUDIT FIXES — based on full visual page-by-page review
   ═══════════════════════════════════════════════════════════════════ */

/* ─── FIX: Promo bar popup covers content ───────────────────────── */
/* The promo bar slides up from the bottom and can cover CTAs and text.
   On mobile, reduce its height and keep it compact. */
@media (max-width: 768px) {
  .promo-bar,
  [class*="promo-bar"],
  [id*="promo"] {
    font-size: 0.72rem !important;
    padding: 0.6rem 1rem !important;
    line-height: 1.4 !important;
  }
  /* Ensure promo bar doesn't overlap main content when fixed */
  .promo-bar.fixed,
  .promo-bar[style*="position: fixed"],
  .promo-bar[style*="position:fixed"] {
    bottom: 0 !important;
    max-height: 80px;
    overflow: hidden;
  }
}

/* ─── FIX: Fade-up animations — ensure visible on mobile ────────── */
/* On mobile, scroll animations should be instant or pre-revealed.
   The IntersectionObserver fires correctly on real devices when users
   scroll, but we add a very generous rootMargin via CSS fallback:
   elements get 'visible' class added when they enter viewport + 200px buffer.
   This CSS ensures that IF JS is slow or the observer misses, content shows. */
@media (max-width: 768px) {
  /* Make animation durations shorter on mobile for snappier feel */
  .fade-up, .fade-in, .slide-left, .slide-right {
    transition-duration: 0.35s !important;
    transition-delay: 0s !important;
  }
  .delay-1, .delay-2, .delay-3, .delay-4, .delay-5 {
    transition-delay: 0s !important;
  }
  /* Stagger children — instant on mobile */
  .stagger-children > * {
    transition-duration: 0.3s !important;
    transition-delay: 0s !important;
  }
}

/* ─── FIX: Packages grid — cards not showing content ────────────── */
/* Ensure pkg-card text and content is visible regardless of animation */
@media (max-width: 768px) {
  .pkg-card {
    opacity: 1 !important;
    transform: none !important;
  }
  .pkg-card .pkg-name,
  .pkg-card .pkg-price,
  .pkg-card .pkg-duration,
  .pkg-card .pkg-tagline,
  .pkg-card .pkg-features,
  .pkg-card .pkg-features li {
    opacity: 1 !important;
    visibility: visible !important;
  }
}

/* ─── FIX: Review cards visible on mobile ───────────────────────── */
@media (max-width: 768px) {
  .review-card {
    opacity: 1 !important;
    transform: none !important;
  }
}

/* ─── FIX: Blog cards visible on mobile ────────────────────────── */
@media (max-width: 768px) {
  .blog-card {
    opacity: 1 !important;
    transform: none !important;
  }
}

/* ─── FIX: How It Works steps visible ──────────────────────────── */
@media (max-width: 768px) {
  .hiw-step {
    opacity: 1 !important;
    transform: none !important;
  }
}

/* ─── FIX: City event cards visible ────────────────────────────── */
@media (max-width: 768px) {
  .city-evt-card {
    opacity: 1 !important;
    transform: none !important;
  }
}

/* ─── FIX: Section tags, headings visible ───────────────────────── */
@media (max-width: 768px) {
  .section-tag,
  .section-title,
  .section-sub,
  .hero-sub,
  .hero-actions,
  .hero-badges {
    opacity: 1 !important;
    transform: none !important;
  }
}

/* ─── FIX: Feature items and general fade-ups visible ───────────── */
@media (max-width: 768px) {
  .feature-item,
  .event-card,
  .city-card,
  .faq-sticky,
  .reviews-rating,
  .fade-up:not(.visible),
  .fade-in:not(.visible),
  .slide-left:not(.visible),
  .slide-right:not(.visible) {
    opacity: 1 !important;
    transform: none !important;
  }
}

/* ─── FIX: Stagger children visible on mobile ───────────────────── */
@media (max-width: 768px) {
  .stagger-children > * {
    opacity: 1 !important;
    transform: none !important;
  }
}

/* ─── FIX: Hero section — reduce excessive height on short phones ── */
@media (max-width: 768px) {
  .hero {
    min-height: 90vh;
  }
}

@media (max-width: 480px) {
  .hero {
    min-height: auto;
  }
  .hero-content {
    padding: 5.5rem 0 3rem;
  }
}

/* ─── FIX: Coastal strip overflowing right edge ─────────────────── */
/* The city strip (CHESAPEAKE · HAMPTON · NEWPORT NEWS...) is cut off */
@media (max-width: 480px) {
  .coastal-strip {
    overflow: hidden;
  }
  .coastal-strip-inner {
    overflow-x: hidden;
    flex-wrap: wrap;
    justify-content: center;
    gap: 0.5rem 0.75rem;
    padding: 0 1rem;
  }
  .strip-dot {
    display: none; /* Hide dots on very small screens to save space */
  }
}

/* ─── FIX: Contact form invisible ──────────────────────────────── */
/* The form area on contact page has very light text on light bg */
@media (max-width: 768px) {
  .contact-form-wrap {
    background: #ffffff !important;
  }
  .form-label {
    color: var(--navy) !important;
    opacity: 1 !important;
  }
  .form-input,
  .form-select,
  .form-textarea {
    background: var(--off-white) !important;
    color: var(--navy) !important;
    border-color: rgba(8,15,26,0.2) !important;
    opacity: 1 !important;
  }
}

/* ─── FIX: "We'd Love to Hear from You" heading visibility ──────── */
@media (max-width: 768px) {
  /* The contact section heading can be hard to read on dark bg */
  .contact-info-section .section-title,
  .contact-heading,
  [class*="contact"] .section-title {
    opacity: 1 !important;
    color: var(--navy) !important;
  }
}

/* ─── FIX: About page photo sizing ─────────────────────────────── */
@media (max-width: 768px) {
  /* Owner photo frame should be constrained */
  .branded-photo-frame,
  .about-photo,
  [class*="about"] img:not([class]) {
    max-width: 280px;
    margin: 0 auto;
    display: block;
    border-radius: var(--radius-lg);
  }
}

/* ─── FIX: Package button on gold/yellow background ─────────────── */
/* The "BOOK THE PARTY PACKAGE" button uses gold bg — ensure dark text */
.btn-sand,
a.btn-sand,
button.btn-sand {
  color: var(--navy, #080F1A) !important;
  -webkit-text-fill-color: var(--navy, #080F1A) !important;
  font-weight: 700 !important;
}

/* ─── FIX: Event cards on home — should show properly on mobile ─── */
@media (max-width: 540px) {
  .event-card {
    aspect-ratio: 3/2 !important;
    min-height: 180px;
  }
  .event-card-name {
    font-size: 1.3rem !important;
  }
  .event-card-content {
    padding: 1.2rem 1rem !important;
  }
  /* Always show the CTA arrow on mobile */
  .event-card-cta {
    opacity: 1 !important;
    transform: none !important;
  }
}

/* ─── FIX: Blog grid single-column, cards need min-height ──────── */
@media (max-width: 540px) {
  .blog-grid {
    grid-template-columns: 1fr;
    gap: 1rem;
  }
  .blog-card-img {
    aspect-ratio: 16/9;
  }
  .blog-card-img img {
    opacity: 1 !important;
  }
}

/* ─── FIX: Gallery — images need explicit sizing ────────────────── */
@media (max-width: 768px) {
  /* Ensure gallery containers have height so images render */
  .gallery-grid .gal-item,
  .gallery-mosaic .gal-item {
    position: relative !important;
    overflow: hidden !important;
    min-height: 100px;
  }
  /* Force images to be visible */
  .gal-item img,
  .gallery-grid .gal-item img {
    opacity: 1 !important;
    filter: brightness(0.9) saturate(1.05) !important;
  }
}

/* ─── FIX: FAQ answers — ensure text is readable ────────────────── */
@media (max-width: 768px) {
  .faq-a p {
    font-size: 0.85rem;
    color: rgba(8,15,26,0.75) !important;
    line-height: 1.7;
  }
  .faq-section {
    background: var(--off-white) !important;
  }
}

/* ─── FIX: City page — venue tags wrapping well ─────────────────── */
@media (max-width: 480px) {
  .venues-wrap,
  [class*="venue"] .flex-wrap,
  .venue-tags {
    display: flex;
    flex-wrap: wrap;
    gap: 0.5rem;
  }
  .venue-tag {
    font-size: 0.72rem;
    padding: 0.35rem 0.75rem;
  }
}

/* ─── FIX: Cities "We Serve" section on city pages ──────────────── */
@media (max-width: 480px) {
  .city-related-grid {
    grid-template-columns: 1fr 1fr;
    gap: 0.6rem;
  }
  .related-city-card {
    padding: 0.8rem 1rem;
  }
  .related-city-card strong {
    font-size: 0.85rem;
  }
}

/* ─── FIX: How It Works horizontal layout on mobile ─────────────── */
@media (max-width: 768px) {
  .hiw-steps {
    grid-template-columns: 1fr;
    gap: 0;
  }
  .hiw-step {
    display: grid;
    grid-template-columns: 3.5rem 1fr;
    gap: 1rem;
    align-items: start;
    padding: 1.2rem 0;
    border-bottom: 1px solid rgba(0,217,255,0.1);
    text-align: left;
  }
  .hiw-step:last-child {
    border-bottom: none;
  }
  .hiw-num {
    width: 3.5rem;
    height: 3.5rem;
    font-size: 1.4rem;
    margin: 0;
  }
  .hiw-step h3 {
    font-size: 1rem;
    margin-bottom: 0.4rem;
    text-align: left;
  }
  .hiw-step p {
    font-size: 0.82rem;
    text-align: left;
  }
  .hiw-step-emoji {
    display: none;
  }
  .hiw-steps::before {
    display: none;
  }
}

/* ─── FIX: Packages grid single column ──────────────────────────── */
@media (max-width: 600px) {
  .packages-grid {
    grid-template-columns: 1fr !important;
    max-width: 100% !important;
    gap: 1rem;
  }
  .pkg-card.featured {
    order: -1;
  }
  .pkg-card {
    padding: 1.6rem 1.4rem;
  }
  .pkg-price {
    font-size: 2.8rem;
  }
}

/* ─── FIX: Reviews grid ─────────────────────────────────────────── */
@media (max-width: 768px) {
  .reviews-grid {
    grid-template-columns: 1fr;
    gap: 1rem;
  }
  .review-card {
    padding: 1.4rem 1.2rem;
  }
  .review-text {
    font-size: 0.9rem;
    line-height: 1.65;
  }
}

/* ─── FIX: Footer logo rendering ────────────────────────────────── */
@media (max-width: 768px) {
  .footer-brand img {
    filter: brightness(0) invert(1);
    height: 28px;
  }
}

/* ─── FIX: Ensure all text sections are readable ────────────────── */
/* Some dark navy sections have near-invisible text */
@media (max-width: 768px) {
  .section-sub {
    opacity: 1 !important;
    color: rgba(248,250,255,0.85) !important;
  }
  .section-sub.dark {
    color: rgba(8,15,26,0.72) !important;
  }
  /* Paragraph text in dark sections */
  .beach-feature-content p,
  .hiw-section p,
  .reviews-section p {
    color: rgba(248,250,255,0.82) !important;
  }
}

/* ═══════════════════════════════════════════════════════════════════
   ROUND 2 FIXES — After visual audit of all 12 pages
   ═══════════════════════════════════════════════════════════════════ */

/* ─── FIX: How It Works — revert broken 2-col grid, use simple stack ── */
/* The previous 2-col grid caused text to break word-by-word in the
   narrow left column. Back to simple vertical stack with icon inline. */
@media (max-width: 768px) {
  .hiw-steps {
    display: flex !important;
    flex-direction: column !important;
    gap: 0 !important;
  }
  .hiw-step {
    display: flex !important;
    flex-direction: row !important;
    align-items: flex-start !important;
    gap: 1rem !important;
    padding: 1.4rem 0 !important;
    border-bottom: 1px solid rgba(0,217,255,0.12) !important;
    text-align: left !important;
  }
  .hiw-step:last-of-type {
    border-bottom: none !important;
  }
  .hiw-num {
    width: 3rem !important;
    height: 3rem !important;
    min-width: 3rem !important;
    font-size: 1.3rem !important;
    margin: 0 !important;
    flex-shrink: 0 !important;
  }
  /* The text block next to the number */
  .hiw-step > div,
  .hiw-step-content,
  .hiw-step > :not(.hiw-num):not(.hiw-step-emoji) {
    flex: 1 !important;
    min-width: 0 !important;
  }
  .hiw-step h3 {
    font-size: 1rem !important;
    margin-bottom: 0.35rem !important;
    text-align: left !important;
    line-height: 1.3 !important;
  }
  .hiw-step p {
    font-size: 0.83rem !important;
    line-height: 1.65 !important;
    text-align: left !important;
    color: rgba(248,250,255,0.8) !important;
    margin: 0 !important;
  }
  .hiw-step-emoji {
    display: none !important;
  }
  .hiw-steps::before {
    display: none !important;
  }
}

/* ─── FIX: Booking guide step descriptions invisible ─────────────── */
/* Steps use fade-up — force visible on mobile */
@media (max-width: 768px) {
  .booking-step,
  [class*="booking"] .step,
  [class*="step-item"],
  .step-content,
  .step-desc,
  .step-body {
    opacity: 1 !important;
    transform: none !important;
  }
  /* The booking guide uses prose sections */
  .prose-section p,
  .prose-section h2,
  .prose-section h3,
  .prose-section li {
    opacity: 1 !important;
  }
}

/* ─── FIX: Corporate use case image cards — give fallback height ──── */
/* When images don't load, cards collapse. Add min-height so layout holds. */
@media (max-width: 768px) {
  .use-case-card,
  [class*="use-case"],
  .corporate-card {
    min-height: auto !important;
  }
  /* Image containers in corporate use cases */
  .use-case-card .card-img,
  .use-case-card img,
  [class*="use-case"] img {
    aspect-ratio: 16/9 !important;
    object-fit: cover !important;
    width: 100% !important;
    display: block !important;
    min-height: 160px !important;
    background: var(--navy-light) !important;
  }
}

/* ─── FIX: Glam style cards — image areas show fallback color ─────── */
@media (max-width: 768px) {
  .glam-style-card,
  .style-card,
  [class*="glam"] .card-image,
  [class*="style"] .card-img {
    min-height: 180px !important;
    background: var(--navy-light) !important;
  }
  [class*="glam"] img,
  [class*="style"] img {
    min-height: 180px !important;
    object-fit: cover !important;
    display: block !important;
  }
}

/* ─── FIX: Contact heading covered by promo bar ───────────────────── */
/* The promo bar can overlap the "We'd Love to Hear from You" heading.
   Adding scroll-margin-top ensures anchor links clear the fixed bars. */
@media (max-width: 768px) {
  [id] {
    scroll-margin-top: 80px;
  }
}

/* ─── FIX: City page — section description text invisible (fade-up) ── */
@media (max-width: 768px) {
  .city-intro-inner p,
  .city-intro-section p,
  [class*="city-intro"] p,
  .city-events-section p,
  .city-faq p,
  .city-services-grid p {
    opacity: 1 !important;
    transform: none !important;
  }
}

/* ─── FIX: Pricing — section description below heading invisible ──── */
@media (max-width: 768px) {
  .packages-section .section-sub,
  .packages-section p {
    opacity: 1 !important;
    color: rgba(8,15,26,0.72) !important;
  }
}

/* ─── FIX: Reviews section heading + stars ────────────────────────── */
@media (max-width: 768px) {
  .reviews-rating {
    opacity: 1 !important;
    transform: none !important;
    margin-bottom: 2rem !important;
    gap: 0.75rem !important;
  }
  .stars-big {
    font-size: 1.2rem !important;
  }
  .rating-text {
    font-size: 0.9rem !important;
  }
}

/* ─── FIX: FAQ sticky sidebar on mobile is unnecessary space ─────── */
@media (max-width: 768px) {
  .faq-sticky {
    position: static !important;
    top: auto !important;
    margin-bottom: 2rem;
  }
  .faq-sticky p {
    font-size: 0.85rem;
    color: var(--muted-dk) !important;
    opacity: 1 !important;
  }
  .faq-sticky .btn {
    width: 100%;
    text-align: center;
    justify-content: center;
  }
}

/* ─── FIX: Cities grid — force 1 col on smallest screens ─────────── */
@media (max-width: 420px) {
  .cities-grid {
    grid-template-columns: 1fr !important;
    gap: 0.6rem !important;
  }
}

/* ─── FIX: CTA section buttons full-width on mobile ──────────────── */
@media (max-width: 480px) {
  .cta-actions {
    flex-direction: column !important;
    width: 100% !important;
  }
  .cta-actions .btn {
    width: 100% !important;
    justify-content: center !important;
  }
}

/* ─── FIX: Coastal strip wrapping neatly on 2 rows ───────────────── */
@media (max-width: 768px) {
  .coastal-strip-inner {
    flex-wrap: wrap !important;
    justify-content: center !important;
    gap: 0.3rem 0.75rem !important;
    padding: 0 1rem !important;
    overflow: visible !important;
  }
  .coastal-strip {
    overflow: visible !important;
    padding: 0.9rem 0 !important;
  }
  .strip-item {
    font-size: 0.62rem !important;
    letter-spacing: 0.08em !important;
  }
  .strip-dot {
    font-size: 0.5rem !important;
  }
}

/* ─── FIX: Promo bar — compact on mobile, not covering content ────── */
@media (max-width: 768px) {
  /* The promo bar slides up as a sticky bottom bar */
  #promo-bar,
  .promo-bar,
  [data-promo] {
    font-size: 0.7rem !important;
    padding: 0.55rem 1rem !important;
    line-height: 1.35 !important;
  }
  #promo-bar .btn,
  .promo-bar .btn,
  [data-promo] .btn {
    padding: 0.5rem 1rem !important;
    font-size: 0.7rem !important;
  }
}

/* ─── FIX: Glam backdrop gallery on glam page ───────────────────── */
@media (max-width: 768px) {
  /* Backdrop grid should be 2 columns */
  .backdrops-grid,
  [class*="backdrop"] .grid {
    grid-template-columns: 1fr 1fr !important;
    gap: 0.75rem !important;
  }
  .backdrop-card,
  [class*="backdrop-item"] {
    border-radius: var(--radius) !important;
    overflow: hidden !important;
  }
}

/* ─── FIX: About page — certifications / badges row ─────────────── */
@media (max-width: 480px) {
  .cert-row,
  .badges-row,
  [class*="cert"] {
    flex-wrap: wrap !important;
    gap: 0.75rem !important;
  }
}

/* ─── FIX: Booking guide — step numbers visible with text ────────── */
@media (max-width: 768px) {
  /* Booking steps layout on booking-guide page */
  .booking-steps,
  .steps-list {
    display: flex !important;
    flex-direction: column !important;
    gap: 0 !important;
  }
  .booking-step {
    display: grid !important;
    grid-template-columns: 2.5rem 1fr !important;
    gap: 0.75rem !important;
    align-items: start !important;
    padding: 1.2rem 0 !important;
    border-bottom: 1px solid rgba(8,15,26,0.08) !important;
    opacity: 1 !important;
    transform: none !important;
  }
  .step-number,
  .booking-step-num {
    width: 2.5rem !important;
    height: 2.5rem !important;
    min-width: 2.5rem !important;
    border-radius: 50% !important;
    background: var(--electric) !important;
    color: var(--navy) !important;
    font-weight: 800 !important;
    font-size: 1rem !important;
    display: flex !important;
    align-items: center !important;
    justify-content: center !important;
    flex-shrink: 0 !important;
  }
  .booking-step h3,
  .booking-step-title {
    font-size: 0.95rem !important;
    margin-bottom: 0.3rem !important;
    opacity: 1 !important;
  }
  .booking-step p,
  .booking-step-desc {
    font-size: 0.82rem !important;
    opacity: 1 !important;
    color: rgba(8,15,26,0.7) !important;
  }
}

/* ─── FIX: Image lazy-load — ensure containers have background ────── */
/* When lazy images haven't loaded yet, show a placeholder color
   so the layout doesn't look broken/empty */
@media (max-width: 768px) {
  .event-card,
  .blog-card-img,
  .gal-item,
  .page-hero-bg,
  [class*="card-img"],
  [class*="card-image"],
  [class*="hero-bg"],
  .beach-feature-visual {
    background-color: var(--navy-light) !important;
    background-image: none;
  }
  img[loading="lazy"] {
    min-height: 1px;
    opacity: 1 !important;
  }
}

/* ─── FINAL: Ensure all text is readable everywhere ──────────────── */
@media (max-width: 768px) {
  /* Dark sections */
  .hiw-section .section-title,
  .reviews-section .section-title,
  .cities-section .section-title,
  .gallery-section .section-title,
  .events-section .section-title {
    opacity: 1 !important;
    color: var(--white) !important;
  }
  /* Light sections */
  .packages-section .section-title,
  .faq-section .section-title,
  .sand-section .section-title {
    opacity: 1 !important;
    color: var(--navy) !important;
  }
  /* Body text always readable */
  p, li, span:not([class*="tag"]):not([class*="icon"]) {
    -webkit-font-smoothing: antialiased;
    -moz-osx-font-smoothing: grayscale;
  }
}

/* ═══════════════════════════════════════════════════════════════════
   FINAL PASS — Nuclear opacity override for all fade animations
   Ensures EVERY fade-up/fade-in element is visible on mobile
   regardless of specificity wars with inline critical CSS
   ═══════════════════════════════════════════════════════════════════ */

@media (max-width: 768px) {
  /* Force ALL animated elements visible — catches generic div.fade-up
     used in booking-guide, blog posts, and other pages */
  .fade-up,
  .fade-in,
  .slide-left,
  .slide-right,
  div.fade-up,
  div.fade-in,
  p.fade-up,
  p.fade-in,
  a.fade-up,
  a.fade-in,
  section.fade-up,
  .fade-up.delay-1,
  .fade-up.delay-2,
  .fade-up.delay-3,
  .fade-up.delay-4,
  .fade-up.delay-5 {
    opacity: 1 !important;
    transform: translateY(0) !important;
    -webkit-transform: translateY(0) !important;
    transform: none !important;
    transition: none !important;
    visibility: visible !important;
  }

  /* Also catch slide animations */
  .slide-left,
  div.slide-left {
    transform: translateX(0) !important;
    -webkit-transform: translateX(0) !important;
  }
  .slide-right,
  div.slide-right {
    transform: translateX(0) !important;
    -webkit-transform: translateX(0) !important;
  }

  /* Stagger children — all visible immediately */
  .stagger-children > *,
  [class*="stagger"] > * {
    opacity: 1 !important;
    transform: none !important;
    transition: none !important;
  }
}

/* ─── FIX: Booking guide & section-white pages — section-sub text ── */
/* The section-white class should make .section-sub dark but the global
   .section-sub color (near-white) can win on some pages. Force dark. */
.section-white .section-sub,
.section-white p.section-sub {
  color: rgba(8,15,26,0.72) !important;
}

/* Also fix for any white-background section with default section-sub */
[style*="background:var(--white)"] .section-sub,
[style*="background: var(--white)"] .section-sub,
[style*="background:#fff"] .section-sub,
[style*="background: #fff"] .section-sub,
[style*="background:white"] .section-sub {
  color: rgba(8,15,26,0.72) !important;
}

/* Booking guide specific — all paragraphs on the white section */
.section-white p,
.section-white .section-sub {
  color: rgba(8,15,26,0.72) !important;
  opacity: 1 !important;
}