/* ==========================================================================
   Responsive Stylesheet for The Halong Catamaran
   Breakpoints: 1400px, 1200px, 992px, 768px, 576px
   ========================================================================== */

@media (max-width: 1400px) {
  .hero-title-fs {
    font-size: 4.4rem;
  }

  .section-title {
    font-size: 3.2rem;
  }
}

@media (max-width: 1200px) {
  .hero-title-fs {
    font-size: 3.8rem;
  }

  .welcome-lead {
    font-size: 2.2rem;
  }

  .timeline-wrapper::before {
    left: 20px;
  }

  .timeline-item {
    width: 100% !important;
    left: 0 !important;
    text-align: left !important;
    padding-left: 50px !important;
    padding-right: 0 !important;
  }

  .timeline-item:nth-child(odd) .timeline-dot,
  .timeline-item:nth-child(even) .timeline-dot {
    left: 14px;
    right: auto;
  }
}

@media (max-width: 992px) {
  :root {
    --mobile-header-height: calc(env(safe-area-inset-top, 0px) + 68px);
    --mobile-header-height-scrolled: calc(env(safe-area-inset-top, 0px) + 68px);
    --mobile-header-inner-height: 48px;
    --mobile-header-horizontal-padding: 1.4rem;
    --mobile-header-vertical-padding: 10px;
    --mobile-header-pill-top: calc(env(safe-area-inset-top, 0px) + 34px);
  }

  html {
    font-size: 15px;
  }

  body {
    line-height: 1.7;
  }

  .container {
    padding-left: 1.25rem;
    padding-right: 1.25rem;
  }

  #siteHeader.site-header,
  #siteHeader.site-header.scrolled,
  #siteHeader.site-header.site-header-dark-bg,
  #siteHeader.site-header.site-header-dark-bg.scrolled {
    position: fixed !important;
    top: 0 !important;
    left: 0 !important;
    width: 100%;
    min-height: var(--mobile-header-height);
    padding: calc(env(safe-area-inset-top, 0px) + var(--mobile-header-vertical-padding)) var(--mobile-header-horizontal-padding) var(--mobile-header-vertical-padding) !important;
    background: transparent !important;
    backdrop-filter: none !important;
    -webkit-backdrop-filter: none !important;
    border-bottom: 1px solid transparent !important;
    box-shadow: none !important;
    box-sizing: border-box;
    overflow: visible;
    transform: none !important;
    -webkit-transform: none !important;
    z-index: 1050 !important;
    backface-visibility: hidden;
    -webkit-backface-visibility: hidden;
    will-change: auto;
    transition: min-height 0.35s cubic-bezier(0.16, 1, 0.3, 1),
      padding 0.35s cubic-bezier(0.16, 1, 0.3, 1),
      background 0.35s cubic-bezier(0.16, 1, 0.3, 1),
      box-shadow 0.35s cubic-bezier(0.16, 1, 0.3, 1) !important;
  }

  #siteHeader.site-header.scrolled,
  #siteHeader.site-header.site-header-dark-bg.scrolled {
    min-height: var(--mobile-header-height-scrolled);
    padding: calc(env(safe-area-inset-top, 0px) + var(--mobile-header-vertical-padding)) var(--mobile-header-horizontal-padding) var(--mobile-header-vertical-padding) !important;
    background: rgba(37, 100, 125, 0.96) !important;
    backdrop-filter: blur(16px) !important;
    -webkit-backdrop-filter: blur(16px) !important;
    border-bottom: 1px solid rgba(197, 168, 128, 0.25) !important;
    box-shadow: 0 10px 30px rgba(0, 0, 0, 0.22) !important;
  }

  #siteHeader.site-header.scrolled .header-grid,
  #siteHeader.site-header.site-header-dark-bg.scrolled .header-grid {
    min-height: var(--mobile-header-inner-height);
    align-items: center;
  }

  @media (max-height: 760px) {
    :root {
      --mobile-header-vertical-padding: 8px;
      --mobile-header-height: calc(env(safe-area-inset-top, 0px) + 64px);
      --mobile-header-height-scrolled: calc(env(safe-area-inset-top, 0px) + 64px);
    }
  }

  .header-nav-inline {
    display: none !important;
  }

  .main-nav {
    display: flex !important;
    top: 0;
    right: 0;
    width: min(86vw, 420px);
    max-width: 100vw;
    height: 100dvh;
    padding: calc(env(safe-area-inset-top, 0px) + 1.2rem) 1.1rem 1.35rem;
    border-left: 1px solid rgba(197, 168, 128, 0.22);
    background: linear-gradient(180deg, rgba(37, 100, 125, 0.98) 0%, rgba(25, 72, 92, 0.99) 100%);
    box-shadow: none;
    transform: translateX(100%);
    visibility: hidden;
    pointer-events: none;
    transition: transform 0.45s cubic-bezier(0.16, 1, 0.3, 1),
      box-shadow 0.45s cubic-bezier(0.16, 1, 0.3, 1),
      visibility 0s linear 0.45s;
  }

  .main-nav.show {
    right: 0;
    transform: translateX(0);
    visibility: visible;
    pointer-events: auto;
    box-shadow: -28px 0 80px rgba(0, 0, 0, 0.55);
    transition: transform 0.45s cubic-bezier(0.16, 1, 0.3, 1),
      box-shadow 0.45s cubic-bezier(0.16, 1, 0.3, 1),
      visibility 0s linear 0s;
  }

  .nav-backdrop {
    display: block !important;
    background: rgba(3, 6, 10, 0.42);
    backdrop-filter: blur(3px);
    -webkit-backdrop-filter: blur(3px);
  }

  /* Show new hamburger button on mobile */
  .mobile-menu-btn {
    display: flex !important;
  }

  #siteHeader .brand-logo-centered {
    display: inline-flex;
    align-items: center;
    align-self: center;
    min-height: var(--mobile-header-inner-height);
    line-height: 0;
    flex-shrink: 0;
  }

  #siteHeader .site-logo-img {
    width: 118px;
    max-height: var(--mobile-header-inner-height);
    display: block;
    margin: 0;
    transition: width 0.35s cubic-bezier(0.16, 1, 0.3, 1),
      max-height 0.35s cubic-bezier(0.16, 1, 0.3, 1),
      transform 0.35s cubic-bezier(0.16, 1, 0.3, 1);
  }

  #siteHeader.site-header.scrolled .site-logo-img,
  #siteHeader.site-header.site-header-dark-bg.scrolled .site-logo-img {
    width: 118px;
    height: var(--mobile-header-inner-height);
    max-height: var(--mobile-header-inner-height);
    display: block;
    margin: 0;
    transform: none !important;
  }

  .header-right-minimal {
    gap: 0.5rem;
  }

  .header-hotline-btn {
    min-width: 42px;
    height: 42px;
    padding: 0.7rem;
    justify-content: center;
  }

  .header-contact-btn {
    display: none !important;
  }

  .hero-section {
    min-height: 640px;
    height: 92svh;
  }

  .hero-content-fourseasons {
    max-width: 700px;
    padding: 0 1.5rem;
    margin-top: 2.5rem;
  }

  .hero-title-fs {
    font-size: 3rem;
    letter-spacing: 0.09em;
  }

  .hero-desc-fs {
    font-size: 0.9rem;
    margin-bottom: 1.8rem;
  }

  .hero-link-fs {
    letter-spacing: 0.22em;
  }

  .section-subtitle {
    margin-bottom: 0.85rem;
    letter-spacing: 0.24em;
  }

  .welcome-content-editorial {
    padding-left: 0;
    margin-top: 1.5rem;
  }

  .welcome-main-img {
    height: 420px;
  }

  .welcome-title-editorial {
    font-size: 2.4rem;
  }

  .welcome-editorial-specs {
    flex-direction: column;
    gap: 1.2rem;
  }

  .section-title {
    font-size: 2.6rem;
    margin-bottom: 1rem;
  }

  .fleet-section,
  .vessel-features-section,
  .video-showcase-section,
  .experience-section,
  .destinations-section,
  .gallery-section,
  .testimonials-section,
  .news-section,
  .booking-cta-section,
  .site-footer {
    padding-top: 3.5rem !important;
    padding-bottom: 3.5rem !important;
  }

  .fleet-header-desc,
  .dest-header-desc,
  .video-header-desc,
  .exp-header-desc,
  .booking-cta-desc {
    font-size: 1rem;
    line-height: 1.75;
  }

  .video-cinematic-container {
    height: 380px;
  }

  .video-control-pill {
    padding: 0.85rem 1.1rem;
    font-size: 0.72rem;
    letter-spacing: 0.12em;
  }

  .video-fleet-bar {
    flex-direction: column;
    gap: 1.2rem;
  }

  .fleet-bar-divider {
    display: none;
  }

  .exp-slide-card,
  .dest-card {
    height: 360px;
    padding: 1.6rem;
  }

  .exp-slide-title,
  .dest-title {
    font-size: 1.5rem;
  }

  .fleet-editorial-card,
  .vessel-feature-card,
  .news-card,
  .testimonial-card {
    border-radius: 18px !important;
  }

  .vessel-feature-card {
    padding: 2rem 1.5rem !important;
  }

  .booking-cta-title {
    font-size: 3rem;
  }

  .booking-cta-content {
    max-width: 680px;
    padding: 0 0.5rem;
  }

  .why-left-content {
    padding-right: 0;
    margin-bottom: 1.5rem;
  }

  .why-pillar-item {
    padding: 1.2rem 1.4rem;
    gap: 1rem;
  }

  .why-pillar-num {
    font-size: 1.8rem;
    min-width: 28px;
  }

  .luxury-timeline-track::before {
    left: 20px;
  }

  .timeline-row {
    flex-direction: column;
    gap: 0.5rem;
    padding-left: 45px;
  }

  .timeline-time-col {
    width: auto;
    min-width: auto;
    text-align: left;
    padding-top: 0;
  }

  .timeline-node-col {
    position: absolute;
    left: -45px;
    top: 2px;
    width: 40px;
    min-width: 40px;
  }

  .timeline-card-col {
    width: 100%;
  }

  .floating-widget-stack {
    right: 1rem;
    bottom: 1rem;
    gap: 0.75rem;
  }

  .floating-book-banner {
    right: 1rem;
    top: 84px;
  }
}

@media (min-width: 768px) and (max-width: 991px) {
  .bento-dest-grid {
    grid-template-columns: repeat(2, 1fr);
  }
}

@media (max-width: 768px) {
  :root {
    --mobile-header-horizontal-padding: 1rem;
    --mobile-header-height: calc(env(safe-area-inset-top, 0px) + 68px);
    --mobile-header-height-scrolled: calc(env(safe-area-inset-top, 0px) + 68px);
    --mobile-header-pill-top: calc(env(safe-area-inset-top, 0px) + 34px);
  }

  #siteHeader .header-grid {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 0.75rem;
    min-height: var(--mobile-header-inner-height);
    overflow: visible;
  }

  #siteHeader .brand-logo-centered {
    flex: 0 1 80%;
    width: 80%;
    min-height: var(--mobile-header-inner-height);
    justify-content: flex-start;
    max-width: calc(100% - 56px);
    padding-right: 0.75rem;
    overflow: visible;
    align-items: center;
    align-self: center;
    line-height: 0;
  }

  #siteHeader.site-header.scrolled .brand-logo-centered,
  #siteHeader.site-header.site-header-dark-bg.scrolled .brand-logo-centered {
    min-height: var(--mobile-header-inner-height);
    width: 80%;
    overflow: visible;
    align-items: center;
    align-self: center;
    line-height: 0;
  }

  #siteHeader .site-logo-img {
    width: auto;
    height: var(--mobile-header-inner-height);
    max-width: 100%;
    max-height: var(--mobile-header-inner-height);
    object-fit: contain;
    object-position: left center;
    display: block;
    margin: 0;
  }

  #siteHeader.site-header.scrolled .site-logo-img,
  #siteHeader.site-header.site-header-dark-bg.scrolled .site-logo-img {
    width: auto;
    height: var(--mobile-header-inner-height);
    max-width: 100%;
    max-height: var(--mobile-header-inner-height);
    object-fit: contain;
    object-position: left center;
    display: block;
    margin: 0;
    transform: none !important;
  }

  #siteHeader.site-header.scrolled .header-grid,
  #siteHeader.site-header.site-header-dark-bg.scrolled .header-grid {
    min-height: var(--mobile-header-inner-height);
    align-items: center;
  }

  .header-search-container {
    display: none;
  }

  .header-right-minimal {
    display: none !important;
  }

  .header-hotline-btn {
    display: none !important;
  }

  .header-hotline-btn span {
    display: none;
  }

  .header-contact-btn {
    display: none !important;
  }

  .main-nav {
    width: min(88vw, 420px);
    padding: calc(env(safe-area-inset-top, 0px) + 0.9rem) 1rem 1.25rem;
  }

  .nav-drawer-header {
    display: flex;
    justify-content: flex-end;
    padding: 0 0 0.35rem;
    border-bottom: none;
  }

  .nav-drawer-close {
    width: auto;
    min-width: 42px;
    height: 42px;
    padding: 0 0.9rem;
    border-radius: 999px;
    background: linear-gradient(180deg, rgba(19, 28, 39, 0.94) 0%, rgba(8, 12, 19, 0.94) 100%);
    border: 1px solid rgba(236, 200, 128, 0.16);
    box-shadow: 0 10px 24px rgba(0, 0, 0, 0.2);
    color: rgba(244, 232, 211, 0.94);
    font-size: 0.92rem;
  }

  .nav-drawer-close:hover {
    background: linear-gradient(180deg, rgba(28, 39, 53, 0.98) 0%, rgba(11, 16, 24, 0.98) 100%);
    border-color: rgba(236, 200, 128, 0.3);
    color: #C5A880;
    transform: none;
  }

  .nav-menu-list {
    margin: 0;
    padding: 0.15rem 0 0;
    gap: 0.85rem;
  }

  .nav-item-luxury,
  .nav-item-sub-luxury {
    min-height: 54px;
    padding-left: 0.2rem;
    padding-right: 0.2rem;
  }

  .nav-item-luxury {
    align-items: center;
    justify-content: space-between;
    padding: 1rem 1.1rem;
    margin: 0;
    border: 1px solid rgba(255, 255, 255, 0.08);
    border-radius: 18px;
    background: linear-gradient(180deg, rgba(255, 255, 255, 0.06) 0%, rgba(255, 255, 255, 0.03) 100%);
    box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.05);
  }

  .nav-item-luxury::before {
    left: auto;
    right: 1rem;
    top: 50%;
    width: 7px;
    height: 7px;
    transform: translateY(-50%);
    opacity: 0.45;
  }

  .nav-item-luxury:hover::before,
  .nav-item-luxury.active::before {
    left: auto;
    right: 1rem;
    opacity: 1;
  }

  .item-title {
    font-size: 0.8rem;
    font-weight: 600;
    letter-spacing: 0.28em;
  }

  .nav-item-luxury:hover .item-title,
  .nav-item-luxury.active .item-title {
    padding-left: 0;
  }

  .nav-item-sub-wrapper {
    padding: 1rem 1.1rem 0.95rem;
    border-radius: 18px;
    border: 1px solid rgba(236, 200, 128, 0.12);
    background: linear-gradient(180deg, rgba(255, 255, 255, 0.045) 0%, rgba(255, 255, 255, 0.02) 100%);
  }

  .nav-item-luxury-heading {
    margin-bottom: 0.7rem;
    font-size: 0.68rem;
    letter-spacing: 0.3em;
    color: rgba(236, 200, 128, 0.78);
  }

  .nav-item-sub-luxury {
    display: flex;
    align-items: center;
    min-height: 46px;
    padding: 0.8rem 0;
    border-top: 1px solid rgba(255, 255, 255, 0.07);
    color: rgba(255, 255, 255, 0.86);
    font-size: 0.88rem;
    letter-spacing: 0.04em;
  }

  .nav-item-sub-wrapper .nav-item-sub-luxury:first-of-type {
    border-top: none;
    padding-top: 0;
  }

  .nav-item-sub-wrapper .nav-item-sub-luxury:last-of-type {
    padding-bottom: 0;
  }

  .nav-drawer-footer {
    margin-top: 1.25rem;
    padding-top: 1.25rem;
    gap: 1rem;
    border-top: 1px solid rgba(236, 200, 128, 0.12);
  }

  .drawer-concierge-info {
    padding: 1rem 1.05rem;
    border-radius: 18px;
    background: rgba(255, 255, 255, 0.04);
  }

  .concierge-tag {
    color: rgba(236, 200, 128, 0.62);
  }

  .concierge-phone {
    font-size: 0.96rem;
    letter-spacing: 0.12em;
  }

  .drawer-book-link {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 100%;
    min-height: 56px;
    padding: 0.95rem 1.4rem;
    border-radius: 999px;
    background: linear-gradient(135deg, #C5A880 0%, #B89567 100%);
    color: #25647d !important;
    font-size: 0.68rem;
    font-weight: 700;
    letter-spacing: 0.16em;
    line-height: 1.2;
    white-space: nowrap;
    box-shadow: 0 16px 28px rgba(197, 168, 128, 0.28);
  }

  .drawer-book-link span,
  .drawer-book-link i {
    color: #25647d !important;
  }

  .drawer-book-link i {
    flex-shrink: 0;
  }

  .drawer-socials {
    justify-content: center;
    gap: 0.75rem;
  }

  .drawer-socials a {
    width: 42px;
    height: 42px;
    border-radius: 50%;
    border: 1px solid rgba(255, 255, 255, 0.12);
    background: rgba(255, 255, 255, 0.04);
  }

  .hero-section {
    min-height: 580px;
    height: auto;
  }

  .hero-slide {
    min-height: 580px;
  }

  .hero-content-fourseasons {
    padding: 0 1rem;
    margin-top: 4.5rem;
  }

  .hero-eyebrow {
    font-size: 0.66rem;
    letter-spacing: 0.24em;
    margin-bottom: 0.9rem;
  }

  .hero-title-fs {
    font-size: 2.4rem;
    line-height: 1.08;
    margin-bottom: 1rem;
  }

  .hero-desc-fs {
    font-size: 0.92rem;
    max-width: 100%;
    margin-bottom: 1.4rem;
  }

  .hero-link-fs {
    font-size: 0.7rem;
    letter-spacing: 0.18em;
  }

  .hero-progress-nav {
    gap: 0.45rem;
    bottom: 1.25rem;
    width: calc(100% - 2rem);
    max-width: 150px;
  }

  .step-label {
    display: none;
  }

  section {
    scroll-margin-top: 88px;
  }

  .fleet-section,
  .vessel-features-section,
  .video-showcase-section,
  .experience-section,
  .destinations-section,
  .gallery-section,
  .testimonials-section,
  .news-section,
  .booking-cta-section,
  .site-footer {
    padding-top: 2.5rem !important;
    padding-bottom: 2.5rem !important;
  }

  .text-center.mb-5,
  .trust-showcase-wrapper.text-center.mb-5 {
    margin-bottom: 1.75rem !important;
  }

  .section-title {
    font-size: 2.2rem;
    line-height: 1.12;
  }

  p,
  .feature-card-desc,
  .fleet-vessel-desc,
  .news-excerpt,
  .testimonial-quote,
  .contact-info a,
  .contact-info span {
    font-size: 0.96rem;
    line-height: 1.72;
    font-weight: 400;
  }

  .btn-gold,
  .btn-navy,
  .btn-outline-gold {
    width: 100%;
    justify-content: center;
    padding: 1rem 1.2rem;
    font-size: 0.68rem;
    letter-spacing: 0.18em;
  }

  .hero-link-fs,
  .btn-fleet-primary,
  .btn-fleet-vip,
  .news-link,
  .exp-slide-link,
  .drawer-book-link {
    min-height: 44px;
    display: inline-flex;
    align-items: center;
  }

  .fleet-card-content,
  .news-body {
    padding: 1.4rem !important;
  }

  .fleet-scroll-hint {
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 0.7rem;
    margin: -0.35rem 0 1.35rem;
  }

  .fleet-scroll-hint-line {
    flex: 1;
    max-width: 52px;
    height: 1px;
    background: linear-gradient(90deg, rgba(197, 168, 128, 0) 0%, rgba(197, 168, 128, 0.5) 100%);
  }

  .fleet-scroll-hint-line:last-child {
    background: linear-gradient(90deg, rgba(197, 168, 128, 0.5) 0%, rgba(197, 168, 128, 0) 100%);
  }

  .fleet-scroll-hint-text {
    display: inline-flex;
    align-items: center;
    gap: 0.45rem;
    padding: 0.4rem 0.9rem;
    border-radius: 999px;
    border: 1px solid rgba(197, 168, 128, 0.2);
    background: linear-gradient(180deg, rgba(255, 255, 255, 0.92) 0%, rgba(248, 244, 238, 0.98) 100%);
    box-shadow: 0 10px 24px rgba(37, 100, 125, 0.06);
    color: rgba(37, 100, 125, 0.72);
    font-size: 0.62rem;
    font-weight: 600;
    letter-spacing: 0.16em;
    text-transform: uppercase;
    white-space: nowrap;
  }

  .fleet-scroll-hint-text i {
    color: var(--color-accent);
    font-size: 0.72rem;
  }

  .fleet-scroll-shell {
    position: relative;
    width: 100%;
    margin-left: 0;
    overflow: hidden;
  }

  .fleet-section .fleet-scroll-row {
    display: flex !important;
    flex-wrap: nowrap !important;
    gap: 0;
    overflow-x: auto;
    overflow-y: hidden;
    scroll-behavior: smooth !important;
    scroll-snap-type: x mandatory;
    scroll-snap-stop: always;
    padding: 0;
    margin: 0 !important;
    width: 100%;
    -webkit-overflow-scrolling: touch;
    scrollbar-width: none;
  }

  .fleet-section .fleet-scroll-row::-webkit-scrollbar {
    display: none;
  }

  .vessel-scroll-shell {
    position: relative;
  }

  .vessel-scroll-cues {
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 0.75rem;
    margin-top: 1.5rem;
  }

  .vessel-scroll-dots {
    display: flex;
    align-items: center;
    gap: 0.5rem;
  }

  .vessel-scroll-cue {
    width: 40px;
    height: 40px;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    border-radius: 999px;
    border: 1px solid rgba(197, 168, 128, 0.4);
    background: linear-gradient(180deg, rgba(255, 255, 255, 0.96) 0%, rgba(247, 243, 236, 0.98) 100%);
    box-shadow: 0 4px 14px rgba(37, 100, 125, 0.08);
    color: rgba(37, 100, 125, 0.72);
    font-size: 0.85rem;
    font-weight: 600;
    position: static;
    pointer-events: auto;
    padding: 0;
    flex-shrink: 0;
    cursor: pointer;
    transition: background 0.25s ease, border-color 0.25s ease, color 0.25s ease;
  }

  .vessel-scroll-cue:active {
    background: linear-gradient(135deg, #C5A880 0%, #C5A880 100%);
    border-color: #C5A880;
    color: #fff;
  }

  .vessel-scroll-cue-left {
    left: auto;
  }

  .vessel-scroll-cue-right {
    right: auto;
  }

  .vessel-scroll-cue span {
    line-height: 1;
    transform: translateY(-1px);
  }

  .vessel-features-section .row.g-4 {
    display: grid !important;
    grid-auto-flow: column;
    grid-auto-columns: minmax(calc(100vw - 4rem), calc(100vw - 4rem));
    gap: 1rem;
    overflow-x: auto;
    overflow-y: hidden;
    scroll-snap-type: x mandatory;
    padding: 0.25rem 1.5rem 1rem;
    margin: 0;
    -webkit-overflow-scrolling: touch;
    scrollbar-width: none;
  }

  .vessel-features-section .row.g-4::-webkit-scrollbar {
    display: none;
  }

  .fleet-section .fleet-slide,
  .vessel-features-section .row.g-4>[class*="col-"] {
    width: 100%;
    min-width: 0;
    scroll-snap-align: start;
  }

  .fleet-section .fleet-slide {
    max-width: 100% !important;
    width: 100% !important;
    flex: 0 0 100% !important;
    margin: 0 !important;
    padding: 0 !important;
  }

  .vessel-features-section .row.g-4>[class*="col-"] {
    max-width: calc(100vw - 4rem);
  }

  /* ---- Gallery: 2-column elegant grid (replaces broken horizontal scroll) ---- */
  .gallery-section .row.g-3 {
    display: grid !important;
    grid-template-columns: 1fr 1fr;
    gap: 0.5rem !important;
    overflow: visible;
  }

  .gallery-section .row.g-3>[class*="col-"] {
    width: 100% !important;
    max-width: 100% !important;
    padding: 0 !important;
  }

  /* First item spans full width — hero card */
  .gallery-section .row.g-3>[class*="col-"]:first-child {
    grid-column: 1 / -1;
  }

  /* All cards uniform height on mobile */
  .gallery-card {
    height: 220px !important;
    border-radius: 2px !important;
  }

  /* Hero card taller */
  .gallery-section .row.g-3>[class*="col-"]:first-child .gallery-card {
    height: 280px !important;
  }

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

  /* Always show overlay on mobile (no hover) */
  .gallery-card .gallery-card-overlay {
    transform: translateY(0);
    opacity: 1;
  }

  .gallery-card .gallery-card-icon {
    display: none;
  }

  .gallery-card-title {
    font-size: 0.95rem;
  }

  .gallery-card-overlay {
    padding: 1rem 1.1rem;
  }

  .fleet-card-action {
    padding-top: 1rem !important;
    margin-top: 1rem !important;
  }

  .fleet-vessel-name,
  .news-title,
  .feature-card-title {
    line-height: 1.15;
  }

  .fleet-spec-row {
    align-items: flex-start;
    gap: 0.5rem;
  }

  .fleet-spec-row .spec-label,
  .fleet-spec-row .spec-value {
    font-size: 0.82rem;
  }

  .video-cinematic-container {
    height: 240px;
    border-radius: 18px;
    overflow: hidden;
  }

  .video-fleet-bar {
    margin-top: 1.25rem;
    padding: 1rem 1.2rem;
    border-radius: 18px;
  }

  .fleet-bar-item {
    width: 100%;
    justify-content: center;
    text-align: center;
  }

  /* ---- Destinations: mobile card refinement ---- */
  .dest-card {
    height: 300px;
    padding: 1.4rem 1.5rem;
    border-radius: 4px;
  }

  .exp-slide-card {
    height: 340px;
    padding: 1.25rem;
    border-radius: 18px;
  }

  .dest-title {
    font-size: 1.55rem;
    line-height: 1.2;
    margin-bottom: 0.35rem;
  }

  .dest-title-lg {
    font-size: 1.7rem;
  }

  .dest-num {
    font-size: 1.4rem;
  }

  .dest-kicker {
    font-size: 0.54rem;
    letter-spacing: 0.18em;
    padding: 0.28rem 0.7rem;
  }

  .dest-desc {
    font-size: 0.82rem;
    line-height: 1.6;
    margin-bottom: 0.85rem;
    /* Clamp to 2 lines on mobile to save space */
    display: -webkit-box;
    -webkit-line-clamp: 2;
    -webkit-box-orient: vertical;
    overflow: hidden;
  }

  .dest-link {
    font-size: 0.62rem;
    letter-spacing: 0.2em;
  }

  .dest-card-header {
    margin-bottom: 0;
  }

  /* Destinations row: 2-column grid on mobile (2 cols side by side) */
  .destinations-section .row.g-4 {
    display: grid !important;
    grid-template-columns: 1fr 1fr;
    grid-auto-rows: auto;
    gap: 0.75rem;
    overflow: visible;
  }

  /* Col-lg-7 and col-lg-5 both become single cells */
  .destinations-section .row.g-4>[class*="col-"] {
    width: 100% !important;
    max-width: 100% !important;
    padding: 0 !important;
  }

  .gallery-card,
  .testimonial-card,
  .news-card {
    border-radius: 4px !important;
  }

  .testimonial-card {
    padding: 1.6rem 1.2rem;
  }

  .testimonial-footer {
    flex-direction: column;
    align-items: flex-start;
    gap: 0.9rem;
  }

  .trust-badge-container {
    gap: 1rem !important;
  }

  .trust-badge-item {
    width: 100%;
    max-width: 260px;
  }

  .news-meta {
    flex-wrap: wrap;
    gap: 0.4rem 0.65rem;
  }

  .booking-cta-section {
    padding-top: 3rem !important;
    padding-bottom: 3rem !important;
  }

  .booking-cta-title {
    font-size: 2.35rem;
    line-height: 1.08;
  }

  .booking-cta-desc {
    margin-bottom: 1.6rem;
  }

  .booking-cta-content .d-flex {
    gap: 0.75rem !important;
  }

  .site-footer {
    padding-bottom: 1.25rem !important;
  }

  .site-footer .row.g-5 {
    display: grid;
    grid-template-columns: minmax(0, 1fr) minmax(0, 1fr);
    gap: 1.5rem 1rem;
  }

  .site-footer .row.g-5>[class*="col-"] {
    width: 100%;
    max-width: 100%;
    min-width: 0;
  }

  .site-footer .row.g-5>[class*="col-"]:nth-child(1) {
    grid-column: 1 / -1;
    text-align: center;
  }

  .site-footer .row.g-5>[class*="col-"]:nth-child(2),
  .site-footer .row.g-5>[class*="col-"]:nth-child(3) {
    grid-column: auto;
    text-align: left;
  }

  .site-footer .row.g-5>[class*="col-"]:nth-child(4) {
    grid-column: 1 / -1;
  }

  .footer-widget h4 {
    margin-bottom: 1rem;
  }

  .footer-widget {
    text-align: left;
  }

  .site-footer .row.g-5>[class*="col-"]:nth-child(1) .footer-widget {
    text-align: center;
  }

  .site-footer .row.g-5>[class*="col-"]:nth-child(1) .footer-logo-img {
    margin-left: auto;
    margin-right: auto;
  }

  .social-links {
    margin-top: 1rem;
  }

  .site-footer .row.g-5>[class*="col-"]:nth-child(1) .social-links {
    justify-content: center;
  }

  .site-footer .row.g-5>[class*="col-"]:nth-child(2) .footer-widget,
  .site-footer .row.g-5>[class*="col-"]:nth-child(3) .footer-widget {
    text-align: left;
  }

  .site-footer .row.g-5>[class*="col-"]:nth-child(2) .footer-links,
  .site-footer .row.g-5>[class*="col-"]:nth-child(3) .contact-info {
    margin-bottom: 0;
  }

  .site-footer .footer-links,
  .site-footer .contact-info,
  .site-footer .contact-info li,
  .site-footer .contact-info span,
  .site-footer .contact-info a {
    min-width: 0;
  }

  .site-footer .contact-info li {
    gap: 0.7rem;
  }

  .site-footer .contact-info span,
  .site-footer .contact-info a,
  .site-footer .footer-links a {
    overflow-wrap: anywhere;
    word-break: break-word;
  }

  .footer-bottom {
    margin-top: 2rem;
    text-align: center;
  }

  .floating-widget-stack {
    right: 0.85rem;
    bottom: max(0.85rem, env(safe-area-inset-bottom, 0px));
  }

  .floating-btn {
    width: 46px;
    height: 46px;
  }

  .floating-book-banner {
    top: auto !important;
    right: 0.85rem !important;
    bottom: calc(max(0.85rem, env(safe-area-inset-bottom, 0px)) + 8.1rem) !important;
    left: auto !important;
    width: auto !important;
    display: inline-flex !important;
    justify-content: center;
    align-items: center;
  }

  .fbb-btn {
    width: 46px !important;
    height: 46px !important;
    justify-content: center;
    min-height: 46px;
    padding: 0 !important;
    border-radius: 50% !important;
    white-space: nowrap;
  }

  .fbb-btn i {
    margin: 0 !important;
    font-size: 1rem;
  }

  .fbb-btn-text {
    display: none !important;
  }

  .editorial-body-content {
    font-size: 1.15rem;
    line-height: 1.8;
  }

  .editorial-body-content h2 {
    font-size: 2.1rem;
  }

  .editorial-body-content h3 {
    font-size: 1.7rem;
  }

  .editorial-pull-quote p {
    font-size: 1.65rem;
  }
}

@media (max-width: 576px) {
  .container {
    padding-left: 1rem;
    padding-right: 1rem;
  }

  #siteHeader .site-logo-img {
    width: auto;
    max-width: 100%;
  }

  .hero-title-fs {
    font-size: 2.2rem;
    letter-spacing: 0.08em;
    font-weight: 600;
  }

  .hero-desc-fs {
    font-size: 0.92rem;
    font-weight: 400;
    line-height: 1.65;
  }

  .brand-logo-text {
    font-size: 1.25rem;
    letter-spacing: 0.22em;
  }

  .section-subtitle {
    font-size: 0.65rem;
    letter-spacing: 0.2em;
    font-weight: 600;
  }

  .section-title {
    font-size: 2.1rem;
    font-weight: 600;
  }

  .video-showcase-title {
    font-size: 1.8rem;
    font-weight: 600;
  }

  .dest-title {
    font-size: 1.75rem;
    font-weight: 600;
  }

  .booking-cta-title {
    font-size: 2.1rem;
    font-weight: 600;
  }

  .fleet-vessel-name,
  .exp-slide-title,
  .news-title a {
    font-size: 1.45rem;
    font-weight: 600;
  }

  .main-nav {
    padding-left: 0.9rem;
    padding-right: 0.9rem;
  }

  .floating-widget-stack {
    right: 0.75rem;
  }

  .vessel-features-section .row.g-4 {
    grid-auto-columns: minmax(calc(100vw - 3rem), calc(100vw - 3rem));
    padding-left: 1rem;
    padding-right: 1rem;
  }

  .vessel-features-section .row.g-4>[class*="col-"] {
    max-width: calc(100vw - 3rem);
  }

  /* Gallery 576px: slightly taller cards */
  .gallery-card {
    height: 190px !important;
  }

  .gallery-section .row.g-3>[class*="col-"]:first-child .gallery-card {
    height: 250px !important;
  }

  /* Destinations 576px: single column */
  .destinations-section .row.g-4 {
    grid-template-columns: 1fr;
  }

  .dest-card {
    height: 280px;
  }
}

/* ==========================================================================
   Blog Detail — Responsive Refinement
   ========================================================================== */
@media (max-width: 991px) {
  .editorial-article-container {
    max-width: 100%;
    padding-left: 1.25rem;
    padding-right: 1.25rem;
  }

  .article-header-hero {
    min-height: clamp(460px, 70vh, 620px);
    padding: calc(var(--mobile-header-height) + 2rem) 0 3.5rem;
  }

  .article-header-hero .editorial-article-container {
    max-width: 46rem;
  }

  .article-main-title {
    font-size: clamp(2.4rem, 5.8vw, 3.15rem);
    line-height: 1.08;
    margin-bottom: 1.15rem;
  }

  .article-category-tag {
    font-size: 0.7rem;
    letter-spacing: 0.18em;
    padding: 0.35rem 1rem;
    margin-bottom: 1rem;
  }

  .article-author-meta {
    display: flex;
    flex-wrap: wrap;
    gap: 0.75rem 1rem;
    justify-content: center;
    padding: 0.8rem 1.15rem;
    margin-top: 1.1rem;
    border-radius: 18px;
  }

  .article-author-meta>span {
    display: none;
  }

  .article-author-meta>div {
    width: 100%;
    justify-content: center;
  }

  .article-image-figure {
    margin: 2.4rem 0 3rem;
  }

  .article-featured-img-wrapper,
  .article-block-img {
    border-radius: 16px;
  }

  .featured-img-badge {
    right: 1rem;
    bottom: 1rem;
    font-size: 0.66rem;
    letter-spacing: 0.1em;
    padding: 0.35rem 0.85rem;
  }

  .drop-cap-paragraph::first-letter {
    font-size: 4.8rem;
    margin-right: 0.8rem;
  }

  .editorial-body-content {
    margin-top: 2rem;
    font-size: 1.08rem;
    line-height: 1.82;
  }

  .editorial-body-content p {
    margin-bottom: 1.5rem;
  }

  .editorial-body-content h2 {
    font-size: 2rem;
    margin-top: 2.75rem;
    margin-bottom: 1rem;
    padding-bottom: 0.55rem;
  }

  .editorial-body-content h3 {
    font-size: 1.65rem;
    margin-top: 2.2rem;
    margin-bottom: 0.85rem;
  }

  .editorial-pull-quote {
    margin: 2.4rem 0;
    padding: 2rem 1.5rem 2rem 1.7rem;
    border-radius: 0 12px 12px 0;
  }

  .editorial-pull-quote p {
    font-size: 1.55rem;
    line-height: 1.42;
  }

  .editorial-pull-quote .quote-byline {
    font-size: 0.76rem;
    letter-spacing: 0.14em;
    margin-top: 1rem;
  }

  .article-sales-callout {
    padding: 2.2rem 1.5rem;
    margin: 3rem 0;
  }

  .sales-callout-title {
    font-size: 1.95rem;
  }

  .sales-callout-desc {
    font-size: 0.98rem;
    line-height: 1.75;
  }

  #related-stories {
    padding-top: 4rem !important;
    padding-bottom: 4rem !important;
  }
}

@media (max-width: 576px) {
  .editorial-article-container {
    padding-left: 1rem;
    padding-right: 1rem;
  }

  .article-header-hero {
    min-height: 60vh;
    padding: calc(var(--mobile-header-height) + 1.4rem) 0 2.6rem;
  }

  .article-header-hero .subpage-breadcrumb {
    gap: 0.35rem;
    flex-wrap: wrap;
    margin-bottom: 0.85rem !important;
    font-size: 0.62rem;
    letter-spacing: 0.12em;
  }

  .article-header-hero .subpage-breadcrumb .style-separator {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    color: var(--color-accent);
    font-size: 0.9rem;
    line-height: 1;
    font-weight: 700;
    opacity: 1;
    text-shadow: 0 1px 6px rgba(0, 0, 0, 0.75);
    transform: translateY(-0.02em);
    min-width: 0.75rem;
    flex: 0 0 auto;
  }

  .article-category-tag {
    font-size: 0.62rem;
    letter-spacing: 0.14em;
    padding: 0.32rem 0.85rem;
  }

  .article-main-title {
    font-size: 2rem;
    line-height: 1.08;
    margin-bottom: 1rem;
  }

  .article-author-meta {
    gap: 0.65rem;
    padding: 0.75rem 0.9rem;
    font-size: 0.78rem;
    border-radius: 14px;
  }

  .author-avatar-img {
    width: 36px;
    height: 36px;
  }

  .article-image-figure {
    margin: 2rem 0 2.5rem;
  }

  .article-featured-img-wrapper,
  .article-block-img {
    border-radius: 14px;
  }

  .article-block-img {
    max-height: 320px;
  }

  .featured-img-badge {
    position: static;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    margin: 0.85rem 0 0;
    width: 100%;
    border-radius: 14px;
  }

  .article-image-caption {
    font-size: 0.78rem;
    line-height: 1.6;
    margin-top: 0.8rem;
  }

  .drop-cap-paragraph::first-letter {
    font-size: 3.8rem;
    line-height: 0.78;
    margin-right: 0.65rem;
  }

  .editorial-body-content {
    margin-top: 1.5rem;
    font-size: 1rem;
    line-height: 1.78;
  }

  .editorial-body-content p {
    margin-bottom: 1.25rem;
  }

  .editorial-body-content ul li,
  .editorial-body-content ol li {
    font-size: 1rem;
    line-height: 1.72;
  }

  .editorial-body-content h2 {
    font-size: 1.72rem;
    line-height: 1.15;
    margin-top: 2.2rem;
    margin-bottom: 0.8rem;
  }

  .editorial-body-content h3 {
    font-size: 1.45rem;
    line-height: 1.2;
    margin-top: 1.9rem;
    margin-bottom: 0.75rem;
  }

  .editorial-pull-quote {
    margin: 2rem 0;
    padding: 1.35rem 1rem 1.35rem 1.1rem;
    border-left-width: 3px;
    border-radius: 0 10px 10px 0;
  }

  .editorial-pull-quote p {
    font-size: 1.3rem;
    line-height: 1.38;
  }

  .editorial-pull-quote .quote-byline {
    font-size: 0.68rem;
    letter-spacing: 0.12em;
    line-height: 1.55;
  }

  .article-sales-callout {
    padding: 1.6rem 1rem;
    margin: 2.4rem 0;
    border-radius: 10px;
  }

  .sales-callout-subtitle {
    font-size: 0.64rem;
    letter-spacing: 0.16em;
  }

  .sales-callout-title {
    font-size: 1.62rem;
    line-height: 1.12;
  }

  .sales-callout-desc {
    font-size: 0.92rem;
    line-height: 1.68;
    margin-bottom: 1rem;
  }

  .article-sales-callout-actions {
    display: grid !important;
    grid-template-columns: 1fr;
    gap: 0.75rem !important;
  }

  .article-sales-callout-btn {
    width: 100%;
    justify-content: center;
    text-align: center;
    min-height: 46px;
    padding: 0.78rem 1rem !important;
    font-size: 0.62rem;
    line-height: 1.35;
    letter-spacing: 0.1em;
    white-space: normal;
  }

  .article-sales-callout-btn-icon {
    flex-basis: 1rem;
    width: 1rem;
    font-size: 0.92rem;
  }

  .article-sales-callout-btn-phone {
    display: none;
  }

  #related-stories {
    padding-top: 3.25rem !important;
    padding-bottom: 3.25rem !important;
  }

  #related-stories .text-center.mb-5 {
    margin-bottom: 1.5rem !important;
  }

  #related-stories .section-title {
    font-size: 1.85rem;
  }

  #related-stories .magazine-title {
    font-size: 1.2rem !important;
    line-height: 1.28;
  }

  #related-stories .magazine-card-body {
    padding: 1.15rem 1rem;
  }
}

/* ==========================================================================
   Blog Search Toolbar — Responsive Refinement
   ========================================================================== */
@media (max-width: 991px) {
  .blog-control-toolbar {
    padding: 1.35rem 1.25rem;
    margin-bottom: 2.5rem;
    border-radius: 14px;
  }

  .blog-search-input {
    padding: 0.78rem 2.9rem 0.78rem 2.8rem;
    font-size: 0.88rem;
  }

  .blog-search-input::placeholder {
    font-size: 0.8rem;
  }

  .blog-category-pills {
    justify-content: flex-start;
    gap: 0.5rem;
  }

  .blog-filter-btn {
    padding: 0.58rem 1rem;
    font-size: 0.7rem;
    letter-spacing: 0.12em;
  }

  .blog-empty-state {
    padding-top: 2.4rem;
  }
}

@media (max-width: 576px) {
  #blog-grid-section {
    padding-top: 3rem !important;
    padding-bottom: 3rem !important;
  }

  #blog-grid-section>.container.py-4 {
    padding-top: 1rem !important;
    padding-bottom: 1rem !important;
  }

  .blog-control-toolbar {
    padding: 1rem;
    margin-bottom: 1.8rem;
    border-radius: 12px;
  }

  .blog-control-toolbar .row.g-3 {
    row-gap: 0.85rem !important;
  }

  .blog-search-input {
    padding: 0.8rem 2.75rem 0.8rem 2.7rem;
    font-size: 0.84rem;
    border-radius: 18px;
  }

  .blog-search-icon {
    left: 1rem;
    font-size: 0.88rem;
  }

  .blog-search-clear {
    right: 0.7rem;
    width: 30px;
    height: 30px;
  }

  .blog-category-pills {
    gap: 0.45rem;
  }

  .blog-filter-btn {
    padding: 0.55rem 0.85rem;
    font-size: 0.64rem;
    letter-spacing: 0.08em;
    border-radius: 16px;
  }

  .blog-search-feedback {
    margin-bottom: 0.9rem;
    font-size: 0.64rem;
    letter-spacing: 0.08em;
    line-height: 1.5;
  }

  .blog-empty-state {
    padding: 2rem 0 1rem;
  }

  .blog-empty-state-inner {
    padding: 1.5rem 1rem;
    border-radius: 14px;
  }

  .blog-empty-state-inner h3 {
    font-size: 1.45rem;
  }

  .blog-empty-state-inner p {
    font-size: 0.9rem;
  }
}

/* ==========================================================================
   Contact Page — Responsive Spacing Refinement
   ========================================================================== */
@media (max-width: 991px) {

  #contact-info-map.py-6,
  #contact-inquiry.py-6 {
    padding-top: 3rem !important;
    padding-bottom: 3rem !important;
  }

  #contact-info-map .container.pt-5.py-4,
  #contact-inquiry .container.py-4 {
    padding-top: 1.25rem !important;
    padding-bottom: 1.25rem !important;
  }

  #contact-info-map .text-center.mb-5,
  #contact-inquiry .text-center.mb-5 {
    margin-bottom: 1.5rem !important;
  }

  .contact-concierge-deck {
    padding: 2rem 1.5rem;
    border-radius: 16px;
  }

  .concierge-info-item {
    gap: 1rem;
    padding-bottom: 1.2rem;
    margin-bottom: 1.2rem;
  }

  .concierge-item-title {
    font-size: 1.2rem;
  }

  .concierge-item-desc {
    font-size: 0.88rem;
    line-height: 1.55;
  }

  .map-embed-wrapper,
  .map-embed-wrapper iframe {
    min-height: 360px;
    border-radius: 16px;
  }

  .concierge-guarantee-card {
    padding: 1.7rem 1.3rem;
  }

  .contact-form-box {
    padding: 2.25rem 1.75rem;
    border-radius: 18px;
  }

  .contact-input-field {
    padding: 0.88rem 1.05rem;
  }

  .ajax-success-alert {
    padding: 1rem 1.1rem;
    margin-bottom: 1.4rem;
  }
}

@media (max-width: 576px) {
  .subpage-hero {
    padding: calc(var(--mobile-header-height) + 1.25rem) 0 2.4rem;
    min-height: 56vh;
  }

  .subpage-hero-content {
    padding: 0 1rem;
  }

  .subpage-title {
    font-size: 2.15rem;
    line-height: 1.08;
    letter-spacing: 0.05em;
    margin-bottom: 0.85rem;
  }

  .subpage-desc {
    font-size: 0.92rem;
    line-height: 1.72;
    max-width: 34rem;
  }

  #contact-info-map.py-6,
  #contact-inquiry.py-6 {
    padding-top: 2.25rem !important;
    padding-bottom: 2.25rem !important;
  }

  #contact-info-map .container.pt-5.py-4,
  #contact-inquiry .container.py-4 {
    padding-top: 0.75rem !important;
    padding-bottom: 0.75rem !important;
  }

  #contact-info-map .text-center.mb-5,
  #contact-inquiry .text-center.mb-5 {
    margin-bottom: 1rem !important;
  }

  .contact-concierge-deck {
    padding: 1.45rem 1rem;
    border-radius: 14px;
  }

  .concierge-info-item {
    gap: 0.85rem;
    padding-bottom: 1rem;
    margin-bottom: 1rem;
  }

  .concierge-item-icon {
    width: 42px;
    height: 42px;
    min-width: 42px;
    font-size: 1rem;
  }

  .concierge-item-label {
    font-size: 0.64rem;
    letter-spacing: 0.12em;
  }

  .concierge-item-title {
    font-size: 1.06rem;
    line-height: 1.25;
  }

  .concierge-item-desc {
    font-size: 0.84rem;
    line-height: 1.5;
  }

  .concierge-social-strip {
    padding-top: 1rem;
    margin-top: 0.75rem;
    gap: 0.75rem;
  }

  .social-strip-title {
    font-size: 0.68rem;
  }

  .map-embed-wrapper,
  .map-embed-wrapper iframe {
    min-height: 280px;
    border-radius: 14px;
  }

  .concierge-guarantee-card {
    padding: 1.35rem 1rem;
    border-radius: 14px;
  }

  .guarantee-icon-box {
    width: 50px;
    height: 50px;
    margin-bottom: 0.9rem;
  }

  .guarantee-title {
    font-size: 1.15rem;
    margin-bottom: 0.55rem;
  }

  .guarantee-desc {
    font-size: 0.88rem;
    line-height: 1.6;
    margin-bottom: 0;
  }

  .contact-form-box {
    padding: 1.5rem 1rem;
    border-radius: 14px;
  }

  .contact-form-box .text-center.mb-5 {
    margin-bottom: 1.25rem !important;
  }

  .contact-form-box .section-title {
    font-size: 1.75rem !important;
  }

  #inquiryForm .row.g-4 {
    row-gap: 1rem !important;
  }

  .contact-input-field {
    padding: 0.82rem 0.95rem;
    font-size: 0.88rem;
    border-radius: 10px;
  }

  .form-label-custom {
    font-size: 0.68rem;
    letter-spacing: 0.1em;
    margin-bottom: 0.4rem;
  }

  .form-recaptcha-notice {
    font-size: 0.72rem;
    line-height: 1.5;
    align-items: flex-start;
  }

  .ajax-success-alert {
    padding: 0.9rem 0.95rem;
    border-radius: 12px;
  }

  .ajax-success-alert .d-flex.align-items-center.gap-3 {
    align-items: flex-start !important;
    gap: 0.75rem !important;
  }

  #contactFormSubmitBtn {
    min-height: 46px;
    padding-top: 0.82rem !important;
    padding-bottom: 0.82rem !important;
    font-size: 0.64rem !important;
    letter-spacing: 0.12em;
  }

  .luxury-booking-modal .modal-header p {
    font-size: 0.76rem !important;
    line-height: 1.5;
  }

  .luxury-booking-modal .luxury-modal-label {
    font-size: 0.6rem;
    letter-spacing: 0.1em;
    margin-bottom: 0.35rem;
  }

  .luxury-booking-modal .luxury-modal-input {
    font-size: 0.84rem;
    padding: 0.72rem 0.9rem;
    border-radius: 9px;
  }

  .luxury-booking-modal select.luxury-modal-input {
    padding-right: 2.4rem;
    background-position: right 0.85rem center;
    background-size: 0.85rem;
  }

  .luxury-booking-modal .modal-submit-btn {
    font-size: 0.7rem;
    letter-spacing: 0.12em;
    padding: 0.9rem 1rem;
  }
}

/* ==========================================================================
   Tour Detail Pages — Responsive Refinement
   ========================================================================== */
@media (max-width: 991px) {
  #hero-tour-detail.vessel-flycam-banner {
    height: auto;
    min-height: clamp(420px, 66vh, 560px);
    padding: calc(var(--mobile-header-height) + 1.5rem) 0 2.25rem;
    align-items: center;
  }

  #hero-tour-detail .flycam-content {
    max-width: 42rem;
    padding: 0 1.25rem;
  }

  #hero-tour-detail .subpage-title {
    font-size: clamp(2.35rem, 6vw, 3.5rem);
    line-height: 1.04;
  }

  #hero-tour-detail .subpage-desc {
    max-width: 40rem;
  }

  .immersive-timeflow-wrapper {
    overflow: hidden;
  }

  .timeflow-panel {
    min-height: auto;
    padding: 2.25rem 0;
  }

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

  .timeflow-panel .row {
    row-gap: 1.15rem !important;
  }

  .bg-watermark-hour {
    top: 1.1rem;
    right: 1rem;
    left: auto;
    transform: none;
    font-size: clamp(4.5rem, 16vw, 8rem);
    line-height: 0.84;
  }

  .timeflow-content-card {
    padding: 2.2rem 1.65rem;
  }

  .timeflow-content-card .fs-2 {
    font-size: 1.95rem !important;
    line-height: 1.12;
  }

  .timeflow-content-card .fs-6 {
    font-size: 1rem !important;
    line-height: 1.7;
  }

  .timeflow-panel .badge {
    max-width: 100%;
    white-space: normal;
    line-height: 1.35;
    padding: 0.55rem 0.85rem !important;
  }

  .timeflow-media-frame {
    min-height: 300px;
  }

  .lineart-map-section,
  .service-inc-exc-section {
    padding: 4.5rem 0;
  }

  .bay-route-map-img-box {
    margin-bottom: 2rem !important;
    border-radius: 10px;
  }

  .service-inc-card {
    padding: 2.15rem 1.7rem;
  }

  .hairline-list li {
    font-size: 0.95rem;
    line-height: 1.6;
  }

  #interactive-route-map .btn-gold {
    max-width: 420px;
    width: auto;
    display: inline-flex;
    justify-content: center;
    text-align: center;
    margin: 0 auto;
  }
}

@media (max-width: 576px) {
  #hero-tour-detail.vessel-flycam-banner {
    min-height: 66vh;
    padding: calc(var(--mobile-header-height) + 1.2rem) 0 1.9rem;
  }

  #hero-tour-detail .flycam-content {
    padding: 0 0.95rem;
  }

  #hero-tour-detail .subpage-breadcrumb {
    font-size: 0.68rem;
    gap: 0.35rem;
    flex-wrap: wrap;
  }

  #hero-tour-detail .subpage-title {
    font-size: 2.05rem;
  }

  #hero-tour-detail .subpage-desc {
    font-size: 0.94rem;
    line-height: 1.72;
  }

  .immersive-timeflow-wrapper .text-center.py-5,
  .lineart-map-section .text-center.mb-5,
  .service-inc-exc-section .text-center.mb-5 {
    margin-bottom: 1.25rem !important;
  }

  .timeflow-panel {
    padding: 1.4rem 0;
  }

  .timeflow-panel .row {
    row-gap: 0.85rem !important;
  }

  .bg-watermark-hour {
    top: 0.85rem;
    right: 0.7rem;
    font-size: 4.4rem;
  }

  .gold-time-pill-light {
    font-size: 0.68rem;
    letter-spacing: 0.06em;
    padding: 0.35rem 0.7rem;
  }

  .timeflow-content-card {
    padding: 1.5rem 1.1rem;
    border-radius: 6px;
  }

  .timeflow-content-card .fs-2 {
    font-size: 1.55rem !important;
    margin-bottom: 0.85rem !important;
  }

  .timeflow-content-card .mb-4 {
    margin-bottom: 1rem !important;
  }

  .timeflow-panel .d-flex.align-items-center.gap-3.flex-wrap {
    gap: 0.55rem !important;
  }

  .timeflow-panel .badge {
    width: calc(50% - 0.275rem);
    min-width: 0;
    justify-content: flex-start;
    display: inline-flex;
    align-items: center;
  }

  .timeflow-media-frame {
    min-height: 220px;
    border-radius: 6px;
  }

  .lineart-map-section,
  .service-inc-exc-section {
    padding: 3.25rem 0;
  }

  .service-inc-card {
    padding: 1.45rem 1rem;
  }

  .service-inc-card .rounded-circle {
    padding: 0.85rem !important;
  }

  .service-inc-card .fs-3 {
    font-size: 1.35rem !important;
  }

  .hairline-list li {
    padding: 0.5rem 0;
    font-size: 0.9rem;
  }

  #interactive-route-map .btn-gold {
    position: relative;
    display: flex;
    align-items: center;
    justify-content: center;
    min-height: 46px;
    padding: 0.72rem 2.4rem !important;
    font-size: 0.62rem;
    line-height: 1.35;
    letter-spacing: 0.12em;
  }

  #interactive-route-map .btn-gold span {
    display: block;
    width: auto;
    text-align: center;
  }

  #interactive-route-map .btn-gold i {
    position: static;
    flex: 0 0 auto;
    margin-right: 0.4rem !important;
  }

  #booking .tour-summary-card {
    padding: 1.65rem 1rem;
  }

  #booking .d-flex.justify-content-center.gap-3.flex-wrap {
    display: grid !important;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: 0.65rem !important;
    align-items: stretch;
  }

  #booking .d-flex.justify-content-center.gap-3.flex-wrap .btn-gold,
  #booking .d-flex.justify-content-center.gap-3.flex-wrap .btn-outline-gold {
    position: relative;
    display: inline-flex !important;
    align-items: center;
    justify-content: center;
    width: 100% !important;
    min-width: 0;
    min-height: 46px;
    height: 100%;
    gap: 0.45rem;
    padding: 0.72rem 0.7rem !important;
    font-size: 0.6rem;
    line-height: 1.3;
    letter-spacing: 0.08em;
    text-align: center;
    white-space: normal;
  }

  #booking .d-flex.justify-content-center.gap-3.flex-wrap .btn-gold span,
  #booking .d-flex.justify-content-center.gap-3.flex-wrap .btn-outline-gold span {
    display: block;
    width: auto;
    text-align: center;
  }

  #booking .d-flex.justify-content-center.gap-3.flex-wrap .btn-gold i,
  #booking .d-flex.justify-content-center.gap-3.flex-wrap .btn-outline-gold i {
    position: static;
    flex: 0 0 auto;
    margin-right: 0 !important;
  }

  #booking .booking-cta-btn-phone {
    display: none;
  }
}

@media (max-width: 480px) {
  #booking .d-flex.justify-content-center.gap-3.flex-wrap {
    grid-template-columns: 1fr;
  }

  #booking .d-flex.justify-content-center.gap-3.flex-wrap .btn-gold,
  #booking .d-flex.justify-content-center.gap-3.flex-wrap .btn-outline-gold {
    white-space: nowrap;
    font-size: 0.62rem;
    padding: 0.78rem 0.9rem !important;
  }
}

/* ==========================================================================
   Fullscreen Overlay Menu — Responsive Adjustments
   ========================================================================== */

/* Overlay is only active on mobile (≤ 992px) */
@media (min-width: 993px) {

  .fs-nav-overlay,
  .mobile-menu-btn {
    display: none !important;
  }
}

@media (max-width: 992px) {
  .fs-nav-num {
    display: none;
  }

  .fs-nav-link,
  .fs-nav-group-toggle {
    gap: 0.4rem;
    padding: 0.8rem 0 0.8rem 0.75rem;
  }

  .fs-nav-label {
    font-size: 1.5rem;
  }

  .fs-nav-sub-link {
    font-size: 0.68rem;
    letter-spacing: 0.14em;
  }

  .fs-nav-sub {
    padding-left: 1.5rem;
  }
}

/* Tight phones: scale down nav label slightly */
@media (max-width: 390px) {
  .fs-nav-label {
    font-size: 1.35rem;
  }

  .fs-nav-topbar {
    padding: 1.1rem 1.25rem 0;
  }

  .fs-nav-body {
    padding: 0 1.25rem;
  }

  .fs-nav-footer {
    padding-left: 1.25rem;
    padding-right: 1.25rem;
  }
}

/* Landscape phones: reduce vertical spacing */
@media (max-width: 992px) and (orientation: landscape) and (max-height: 500px) {
  .fs-nav-list {
    gap: 0;
  }

  .fs-nav-link,
  .fs-nav-group-toggle {
    padding: 0.6rem 0 0.6rem 0.75rem;
  }

  .fs-nav-label {
    font-size: 1.45rem;
  }

  .fs-nav-footer {
    gap: 0.6rem;
    padding-top: 0.75rem;
    padding-bottom: 0.75rem;
  }

  .fs-nav-socials {
    display: none;
  }
}

/* ==========================================================================
   Destinations & Gallery — Mobile Luxury Refinements
   ========================================================================== */

@media (max-width: 768px) {

  /* ---- Destinations: active/touch state replaces hover ---- */
  .dest-card:active {
    transform: scale(0.985);
    box-shadow: 0 12px 32px rgba(0, 0, 0, 0.45);
  }

  /* Show dest-card-overlay slightly stronger on mobile (no hover) */
  .dest-card .dest-card-overlay {
    background: linear-gradient(180deg,
        rgba(7, 12, 18, 0.18) 0%,
        rgba(7, 12, 18, 0.88) 55%,
        rgba(7, 12, 18, 0.97) 100%);
  }

  /* Always show dest-link (no hover needed on touch) */
  .dest-card .dest-link {
    opacity: 1;
  }

  /* Gold line always visible on mobile */
  .dest-card .dest-card-line {
    width: 24px;
    margin-bottom: 0.5rem;
  }

  /* ---- Destinations: subtle scroll hint below section header ---- */
  .dest-mobile-hint {
    display: flex !important;
    align-items: center;
    justify-content: center;
    gap: 0.6rem;
    margin: -0.5rem 0 1.5rem;
  }

  .dest-mobile-hint-line {
    flex: 1;
    max-width: 48px;
    height: 1px;
    background: linear-gradient(90deg, rgba(197, 168, 128, 0) 0%, rgba(197, 168, 128, 0.45) 100%);
  }

  .dest-mobile-hint-line:last-child {
    background: linear-gradient(90deg, rgba(197, 168, 128, 0.45) 0%, rgba(197, 168, 128, 0) 100%);
  }

  .dest-mobile-hint-text {
    font-family: var(--font-body);
    font-size: 0.58rem;
    font-weight: 500;
    letter-spacing: 0.26em;
    text-transform: uppercase;
    color: rgba(197, 168, 128, 0.65);
  }

  /* ---- Gallery: count badge on section header ---- */
  .gallery-count-badge {
    display: inline-flex;
    align-items: center;
    gap: 0.4rem;
    font-family: var(--font-body);
    font-size: 0.6rem;
    font-weight: 500;
    letter-spacing: 0.22em;
    text-transform: uppercase;
    color: rgba(197, 168, 128, 0.7);
    border: 1px solid rgba(197, 168, 128, 0.22);
    padding: 0.3rem 0.85rem;
    border-radius: 20px;
    margin-top: 0.85rem;
  }

  .gallery-count-badge::before {
    content: '';
    width: 5px;
    height: 5px;
    border-radius: 50%;
    background: #C5A880;
    opacity: 0.7;
  }

  /* Gallery tap/active feedback */
  .gallery-card:active img {
    transform: scale(1.02);
    filter: brightness(0.82);
  }

  /* Subtle gold bottom border on gallery section */
  .gallery-section::after {
    content: '';
    display: block;
    width: 48px;
    height: 1px;
    background: var(--color-accent);
    margin: 2.5rem auto 0;
    opacity: 0.4;
  }
}

/* Very small phones: stack everything 1 column for gallery too */
@media (max-width: 380px) {
  .gallery-section .row.g-3 {
    grid-template-columns: 1fr;
  }

  .gallery-section .row.g-3>[class*="col-"] {
    grid-column: auto !important;
  }

  .gallery-card {
    height: 240px !important;
  }
}

/* ==========================================================================
   Catamaran Luxury & Premium Pages — Mobile Fixes
   ========================================================================== */

/* ---- Section 1: Hero Flycam Banner ---- */
@media (max-width: 992px) {
  .vessel-flycam-banner {
    height: auto;
    min-height: clamp(480px, 72vh, 620px);
  }

  .flycam-content {
    padding: 0 1.5rem;
    max-width: 44rem;
  }

  .subpage-title {
    font-size: clamp(2.35rem, 6vw, 3.5rem);
    letter-spacing: 0.06em;
    line-height: 1.04;
  }

  .subpage-desc {
    font-size: 0.97rem;
  }

  /* ---- Section 2: Symmetrical split cards ---- */
  .symmetrical-split-wrapper {
    padding: 3.5rem 0;
  }

  .symmetrical-feature-card {
    margin-bottom: 2rem;
  }

  /* ---- Section 3: Sundeck parallax ---- */
  /* Disable fixed attachment — broken on iOS/Android */
  .sundeck-heavy-parallax {
    background-attachment: scroll;
    height: auto;
    min-height: 420px;
    padding: 5rem 1.5rem;
  }

  .sundeck-parallax-content .fs-5 {
    font-size: 0.97rem !important;
  }

  /* ---- Section 4: Safety section ---- */
  .safety-assurance-section {
    padding: 3.5rem 0;
  }

  /* ---- Section 5: Specs table ---- */
  .vessel-detail-specs {
    padding: 3.5rem 0;
  }

  .vessel-detail-specs .matrix-table-wrapper {
    padding: 1.5rem 1.8rem;
  }

  .vessel-detail-specs .matrix-table td {
    padding: 1.1rem 0.4rem;
    font-size: 0.92rem;
    white-space: normal;
  }

  .comparison-matrix-section .matrix-table-wrapper {
    overflow-x: auto;
    -webkit-overflow-scrolling: touch;
  }

  .comparison-matrix-section .matrix-table td,
  .comparison-matrix-section .matrix-table th {
    padding: 1rem 1.2rem;
    font-size: 0.88rem;
    white-space: nowrap;
  }

  .comparison-matrix-section .matrix-label-cell {
    min-width: 130px;
  }
}

@media (max-width: 768px) {

  /* ---- Section 1: Hero ---- */
  .vessel-flycam-banner {
    min-height: clamp(420px, 68vh, 560px);
  }

  .subpage-title {
    font-size: 2.05rem;
    letter-spacing: 0.05em;
    margin-bottom: 0.85rem;
    line-height: 1.08;
  }

  .subpage-desc {
    font-size: 0.9rem;
    line-height: 1.72;
  }

  .subpage-breadcrumb {
    font-size: 0.6rem;
    letter-spacing: 0.14em;
    gap: 0.4rem;
    flex-wrap: wrap;
    justify-content: center;
    margin-bottom: 0.85rem !important;
  }

  .subpage-breadcrumb .style-separator {
    font-size: 0.5rem;
  }

  /* ---- Section 2: Symmetrical split cards ---- */
  .symmetrical-split-wrapper {
    padding: 2.5rem 0;
  }

  .symmetrical-feature-card {
    margin-bottom: 1.5rem;
  }

  .symmetrical-media-box {
    min-height: 240px;
    height: 240px;
  }

  .symmetrical-text-box {
    padding: 1.75rem 1.25rem;
  }

  .symmetrical-text-box .welcome-title-editorial {
    font-size: 1.8rem !important;
    line-height: 1.18;
    margin-bottom: 0.75rem !important;
  }

  .symmetrical-text-box p {
    font-size: 0.88rem !important;
    line-height: 1.65;
    margin-bottom: 1rem !important;
  }

  .narrative-icon-badge {
    width: 40px;
    height: 40px;
    font-size: 1rem;
    margin-bottom: 0.75rem;
  }

  /* ---- Section 3: Sundeck parallax ---- */
  .sundeck-heavy-parallax {
    min-height: 360px;
    padding: 3.5rem 1.25rem;
  }

  .sundeck-parallax-content .section-title {
    font-size: 1.9rem !important;
    margin-bottom: 0.75rem !important;
  }

  .sundeck-parallax-content .fs-5 {
    font-size: 0.95rem !important;
    line-height: 1.7;
    font-weight: 400 !important;
    color: rgba(255, 255, 255, 0.95) !important;
    margin-bottom: 1.25rem !important;
    text-shadow: 0 2px 10px rgba(0, 0, 0, 0.85);
  }

  /* ---- Section 4: Safety cards ---- */
  .safety-assurance-section {
    padding: 2.5rem 0;
  }

  .safety-staggered-grid {
    gap: 1rem;
  }

  .safety-macro-media {
    height: 200px;
  }

  .safety-card-body {
    padding: 1.25rem 1.1rem;
  }

  .safety-card-title {
    font-size: 1.25rem;
    margin-bottom: 0.4rem;
  }

  /* ---- Section 5: Specs table on Mobile ---- */
  .vessel-detail-specs {
    padding: 2.5rem 0;
  }

  .vessel-detail-specs .matrix-table-wrapper {
    padding: 1.25rem 1.4rem;
    border-radius: 8px;
    margin: 0 auto;
  }

  .vessel-detail-specs .matrix-table {
    display: table;
    width: 100%;
  }

  .vessel-detail-specs .matrix-table tbody {
    display: block;
    width: 100%;
  }

  .vessel-detail-specs .matrix-table tr {
    display: flex;
    flex-direction: column;
    padding: 0.95rem 0;
    border-bottom: 1px solid rgba(197, 168, 128, 0.2);
    gap: 0.25rem;
  }

  .vessel-detail-specs .matrix-table tr:last-child {
    border-bottom: none;
  }

  .vessel-detail-specs .matrix-table td {
    display: block;
    width: 100% !important;
    padding: 0 !important;
    border: none !important;
    background: transparent !important;
  }

  .vessel-detail-specs .matrix-table td.matrix-label-cell {
    font-size: 0.72rem !important;
    letter-spacing: 0.12em;
    text-transform: uppercase;
    color: var(--color-accent) !important;
    font-weight: 700 !important;
    text-align: left !important;
    margin-bottom: 0.1rem;
    background: transparent !important;
    border: none !important;
  }

  .vessel-detail-specs .matrix-table td.matrix-val-cell {
    font-size: 0.94rem !important;
    font-weight: 500 !important;
    color: #1E293B !important;
    text-align: left !important;
    line-height: 1.55;
    background: transparent !important;
    border: none !important;
  }
}

@media (max-width: 576px) {
  .subpage-title {
    font-size: 2.05rem;
    line-height: 1.08;
  }

  .symmetrical-media-box {
    min-height: 210px;
    height: 210px;
  }

  .symmetrical-text-box {
    padding: 1.5rem 1rem;
  }

  .symmetrical-text-box .welcome-title-editorial {
    font-size: 1.6rem !important;
  }

  .sundeck-parallax-content .section-title {
    font-size: 1.65rem !important;
  }
}

/* ==========================================================================
   Privacy & Legal Page — Responsive Refinement
   ========================================================================== */
@media (max-width: 991px) {
  .legal-sidebar-card {
    position: static;
    top: auto;
    padding: 1.5rem 1.25rem;
    border-radius: 14px;
    margin-bottom: 1rem;
  }

  .legal-sidebar-title {
    font-size: 1.3rem;
    margin-bottom: 1rem;
    padding-bottom: 0.6rem;
  }

  .legal-nav-link {
    padding: 0.75rem 0.95rem;
    font-size: 0.86rem;
  }

  .legal-nav-link:hover,
  .legal-nav-link.active {
    transform: none;
  }

  .legal-section-block {
    scroll-margin-top: 96px;
    margin-bottom: 2.8rem;
    padding-bottom: 2rem;
  }

  .legal-section-title {
    font-size: 1.95rem;
    margin-bottom: 1rem;
  }

  .legal-callout-box {
    padding: 1.15rem 1.2rem;
    margin: 1.4rem 0;
    font-size: 0.98rem;
    line-height: 1.72;
  }

  .legal-luxury-table th {
    padding: 0.9rem 1rem;
    font-size: 0.72rem;
    letter-spacing: 0.08em;
  }

  .legal-luxury-table td {
    padding: 1rem;
    font-size: 0.9rem;
  }
}

@media (max-width: 576px) {
  .legal-sidebar-card {
    padding: 1.15rem 1rem;
    border-radius: 12px;
  }

  .legal-sidebar-title {
    font-size: 1.15rem;
    margin-bottom: 0.85rem;
  }

  .legal-nav-tree li {
    margin-bottom: 0.45rem;
  }

  .legal-nav-link {
    padding: 0.68rem 0.8rem;
    font-size: 0.8rem;
    border-radius: 8px;
  }

  .legal-sidebar-card .mt-4.p-3 {
    margin-top: 0.9rem !important;
    padding: 0.9rem !important;
  }

  .legal-sidebar-card .btn.btn-outline-dark.btn-sm.rounded-pill.w-100 {
    min-height: 42px;
    display: inline-flex;
    align-items: center;
    justify-content: center;
  }

  .legal-section-block {
    scroll-margin-top: 84px;
    margin-bottom: 2rem;
    padding-bottom: 1.5rem;
  }

  .legal-section-title {
    font-size: 1.6rem;
    line-height: 1.16;
    margin-bottom: 0.8rem;
  }

  .legal-callout-box {
    padding: 1rem 0.95rem;
    margin: 1.15rem 0;
    font-size: 0.9rem;
    line-height: 1.65;
    border-left-width: 3px;
    border-radius: 0 10px 10px 0;
  }

  .legal-luxury-table th {
    padding: 0.8rem 0.7rem;
    font-size: 0.64rem;
    line-height: 1.4;
  }

  .legal-luxury-table td {
    padding: 0.85rem 0.7rem;
    font-size: 0.84rem;
    line-height: 1.55;
  }

  .legal-tag-success,
  .legal-tag-warning,
  .legal-tag-neutral,
  .legal-tag-danger {
    font-size: 0.72rem;
    padding: 0.3rem 0.7rem;
  }

  .table-responsive.my-4 {
    margin-top: 1rem !important;
    margin-bottom: 1rem !important;
  }
}

/* ==========================================================================
   ULTIMATE MOBILE TOUCH CAROUSELS & DOT SYNCHRONIZATION (< 768px)
   ========================================================================== */
@media (max-width: 767px) {

  /* Disable AOS transforms on carousel items to prevent scroll-snap offset bugs */
  .mobile-carousel-row [data-aos],
  .escape-timeline.mobile-carousel-row [data-aos] {
    transform: none !important;
    opacity: 1 !important;
    transition: none !important;
  }

  /* Full-width touch slider track with strict snap mandatory */
  .mobile-carousel-row {
    display: flex !important;
    flex-wrap: nowrap !important;
    flex-direction: row !important;
    justify-content: flex-start !important;
    overflow-x: auto !important;
    overflow-y: visible !important;
    scroll-behavior: smooth !important;
    scroll-snap-type: x mandatory !important;
    scroll-snap-stop: always !important;
    -webkit-overflow-scrolling: touch;
    padding: 1.5rem 0 0.75rem 0 !important;
    margin-left: 0 !important;
    margin-right: 0 !important;
    --bs-gutter-x: 0 !important;
    --bs-gutter-y: 0 !important;
    gap: 0 !important;
    scrollbar-width: none !important;
    width: 100% !important;
  }

  .mobile-carousel-row::-webkit-scrollbar {
    display: none !important;
    width: 0 !important;
    height: 0 !important;
  }

  /* EVERY child column takes 100% width and snaps to start */
  .mobile-carousel-row>[class*="col-"],
  .escape-timeline.mobile-carousel-row>.timeline-step-item {
    flex: 0 0 100% !important;
    max-width: 100% !important;
    min-width: 100% !important;
    width: 100% !important;
    scroll-snap-align: start !important;
    scroll-snap-stop: always !important;
    padding-left: 0 !important;
    padding-right: 0 !important;
    margin-left: 0 !important;
    margin-right: 0 !important;
    box-sizing: border-box !important;
  }

  /* Inner cards span 100% width */
  #spaces-section .escape-space-card,
  #activities-section .water-act-card,
  #pricing-section .pricing-luxury-card,
  #policies-section .policy-box,
  .escape-timeline.mobile-carousel-row .timeline-step-card {
    width: 100% !important;
    max-width: 100% !important;
    margin-left: 0 !important;
    margin-right: 0 !important;
    box-sizing: border-box !important;
  }

  #pricing-section .pricing-badge-popular {
    top: -14px !important;
    left: 50% !important;
    transform: translateX(-50%) !important;
    z-index: 100 !important;
    white-space: nowrap !important;
  }

  .escape-space-media {
    height: 280px !important;
    max-height: 280px !important;
    flex-shrink: 0 !important;
  }

  .water-act-card {
    height: 340px !important;
  }

  /* Timeline mobile overrides */
  .escape-timeline.mobile-carousel-row {
    padding-left: 0 !important;
  }

  .escape-timeline.mobile-carousel-row::before {
    display: none !important;
  }

  .escape-timeline.mobile-carousel-row .timeline-step-dot {
    display: none !important;
  }

  .escape-timeline.mobile-carousel-row .timeline-step-card {
    padding: 1.4rem 1.2rem !important;
    border-radius: 8px !important;
    border-color: rgba(197, 168, 128, 0.35) !important;
    box-shadow: 0 8px 20px rgba(37, 100, 125, 0.06) !important;
  }
}

/* Dots Styling */
.carousel-dot {
  width: 8px;
  height: 8px;
  border-radius: 50%;
  background: rgba(197, 168, 128, 0.35);
  transition: all 0.3s cubic-bezier(0.16, 1, 0.3, 1);
  cursor: pointer;
  display: inline-block;
}

.carousel-dot.active {
  width: 24px;
  border-radius: 12px;
  background: var(--color-accent);
}