/* =========================================
   RESPONSIVE.CSS
   Mobile/tablet overrides only.
   Desktop CSS stays in the original component/page files.
========================================= */

:root{
  --mobile-topbar-h:38px;
  --mobile-nav-h:58px;
  --mobile-secondary-nav-h:48px;
  --mobile-assistant-safe:112px;
}

/* Desktop guard: mobile-paired Why Book With Us cards are JS clones.
   Keep the desktop original grid only on desktop. */
@media (min-width:992px){
  body.page-home .why-mobile-track{
    display:none !important;
  }
}

@media (max-width:991px){
  html,
  body{
    width:100%;
    max-width:100%;
    overflow-x:hidden;
  }

  body{
    padding-bottom:0;
  }

  body.ta-mobile-safe-active{
    padding-bottom:var(--mobile-assistant-safe);
  }

  body.nav-mobile-open{
    overflow:hidden !important;
    touch-action:none;
  }

  /* ===============================
     Mobile navbar shell
  =============================== */
  #navbar-placeholder{
    position:relative;
    z-index:1800;
  }

  body.page-home #navbar-placeholder{
    margin-bottom:0 !important;
  }

  .main-nav-desktop{
    position:fixed !important;
    left:0;
    right:0;
    top:var(--mobile-topbar-h);
    z-index:1800;
    height:var(--mobile-nav-h) !important;
    min-height:var(--mobile-nav-h) !important;
    padding:0 58px !important;
    display:flex !important;
    align-items:center !important;
    justify-content:center !important;
    background:transparent !important;
    box-shadow:none;
    transform:none !important;
    overflow:visible !important;
  }

  body:not(.page-home) .main-nav-desktop{
    background:rgba(17,54,118,.98) !important;
    box-shadow:0 10px 26px rgba(7,23,48,.16);
  }

  body.page-home .main-nav-desktop::before{
    content:"";
    position:absolute;
    left:0;
    right:0;
    top:0;
    height:118px;
    background:linear-gradient(180deg, rgba(4,12,24,.62) 0%, rgba(5,14,28,.36) 48%, rgba(6,16,30,.14) 76%, rgba(6,16,30,0) 100%);
    pointer-events:none;
    z-index:-1;
  }

  .desktop-nav-links{
    display:none !important;
  }

  .desktop-nav-logo{
    position:static !important;
    transform:none !important;
    opacity:1 !important;
    pointer-events:auto !important;
    max-width:min(62vw, 260px);
    min-width:0;
    display:inline-flex !important;
    align-items:center;
    justify-content:center;
    gap:8px;
    color:#fff !important;
  }

  .desktop-nav-logo .nav-logo-image{
    width:auto !important;
    height:34px !important;
    max-width:min(46vw, 150px) !important;
    object-fit:contain !important;
  }

  .mobile-nav-toggle{
    position:absolute;
    left:12px;
    top:50%;
    transform:translateY(-50%);
    width:42px;
    height:42px;
    border:0;
    background:transparent;
    color:#fff;
    display:inline-flex;
    align-items:center;
    justify-content:center;
    padding:0;
    cursor:pointer;
    z-index:9;
  }

  .mobile-nav-icon{
    width:28px;
    height:28px;
    display:block;
    overflow:visible;
  }

  .mobile-nav-icon-line{
    fill:none;
    stroke:currentColor;
    stroke-width:2;
    stroke-linecap:round;
    stroke-linejoin:round;
    transform-box:fill-box;
    transform-origin:center;
    transition:transform .22s ease, opacity .18s ease;
  }

  body.nav-mobile-open .mobile-nav-icon-line--top{
    transform:translateY(5px) rotate(45deg);
  }

  body.nav-mobile-open .mobile-nav-icon-line--middle{
    opacity:0;
  }

  body.nav-mobile-open .mobile-nav-icon-line--bottom{
    transform:translateY(-5px) rotate(-45deg);
  }

  .desktop-nav-search{
    position:absolute !important;
    right:12px !important;
    left:auto !important;
    top:50% !important;
    transform:translateY(-50%) !important;
    width:38px !important;
    height:38px !important;
    padding:8px !important;
    opacity:1 !important;
    pointer-events:auto !important;
    filter:brightness(0) invert(1) !important;
    z-index:9;
  }

  .desktop-search-close{
    position:absolute !important;
    right:12px !important;
    top:50% !important;
    transform:translateY(-50%) !important;
    width:42px !important;
    height:42px !important;
    color:#fff !important;
    z-index:12;
  }

  .desktop-search-close svg path{
    stroke:#fff !important;
  }

  .desktop-search-panel{
    position:fixed !important;
    top:calc(var(--mobile-topbar-h) + var(--mobile-nav-h) + 10px) !important;
    left:12px !important;
    right:12px !important;
    width:auto !important;
    height:50px !important;
    border-radius:0 !important;
    background:#fff !important;
    z-index:1850 !important;
    transform:translateY(-8px) !important;
    opacity:0;
    pointer-events:none;
    box-shadow:0 16px 40px rgba(7,23,48,.22);
  }

  .desktop-search-panel.active{
    opacity:1 !important;
    pointer-events:auto !important;
    transform:translateY(0) !important;
  }

  .desktop-search-input{
    padding:0 48px 0 14px !important;
    font-size:16px !important;
  }

  .desktop-search-results{
    position:fixed !important;
    top:calc(var(--mobile-topbar-h) + var(--mobile-nav-h) + 68px) !important;
    left:12px !important;
    right:12px !important;
    width:auto !important;
    max-height:calc(100svh - var(--mobile-topbar-h) - var(--mobile-nav-h) - 96px) !important;
    overflow:auto !important;
    border-radius:0 !important;
    z-index:1850 !important;
  }

  .mobile-nav-backdrop{
    position:fixed;
    inset:0;
    background:rgba(2,10,22,.52);
    opacity:0;
    pointer-events:none;
    z-index:1700;
    transition:opacity .22s ease;
  }

  .mobile-nav-drawer{
    position:fixed;
    top:0;
    bottom:0;
    left:0;
    width:min(84vw, 340px);
    padding:calc(var(--mobile-topbar-h) + var(--mobile-nav-h) + 18px) 18px 28px;
    background:#071730;
    color:#fff;
    z-index:1750;
    overflow:auto;
    transform:translateX(-104%);
    transition:transform .28s ease;
    box-shadow:18px 0 42px rgba(0,0,0,.24);
  }

  body.nav-mobile-open .mobile-nav-backdrop{
    opacity:1;
    pointer-events:auto;
  }

  body.nav-mobile-open .mobile-nav-drawer{
    transform:translateX(0);
  }

  .mobile-nav-section{
    display:grid;
    gap:8px;
    margin:0 0 18px;
  }

  .mobile-nav-section-title{
    margin:0 0 2px;
    color:#d9b24f;
    font-family:var(--font-nav);
    font-size:12px;
    font-weight:800;
    letter-spacing:.12em;
    text-transform:uppercase;
  }

  .mobile-nav-drawer a{
    display:flex;
    align-items:center;
    min-height:42px;
    padding:9px 0;
    border-bottom:1px solid rgba(255,255,255,.1);
    color:#fff;
    text-decoration:none;
    font-family:var(--font-nav);
    font-size:16px;
    line-height:1.25;
  }

  /* ===============================
     Home first fold: topbar + nav + hero + secondary nav fit
  =============================== */
  body.page-home #hero-section{
    margin-top:calc(-1 * var(--mobile-nav-h));
    padding-top:0;
    background:transparent;
  }

  body.page-home .hero{
    margin-top:0 !important;
    padding-top:0 !important;
    height:calc(100svh - var(--mobile-topbar-h) - var(--mobile-nav-h) - var(--mobile-secondary-nav-h)) !important;
    min-height:360px !important;
    max-height:760px;
  }

  body.page-home .hero-content{
    width:min(92vw, 520px) !important;
    padding:0 18px !important;
    left:50% !important;
    top:52% !important;
    transform:translate(-50%, -50%) !important;
    text-align:center !important;
  }

  body.page-home .hero-title{
    font-size:clamp(34px, 11vw, 58px) !important;
    line-height:.95 !important;
    letter-spacing:.02em !important;
  }

  body.page-home .hero-subtitle{
    margin-top:14px !important;
    font-size:clamp(15px, 4vw, 19px) !important;
    line-height:1.42 !important;
  }

  body.page-home .hero-logo,
  body.page-home .desktop-scroll-hint{
    display:none !important;
  }

  body.page-home .hero-audio-toggle{
    display:inline-flex !important;
    right:14px !important;
    bottom:calc(var(--mobile-assistant-safe, 126px) - 86px) !important;
    z-index:100101 !important;
    padding:7px 10px !important;
    font-size:11px !important;
  }

  body.page-home .secondary-nav{
    height:calc(var(--mobile-secondary-nav-h) + 2px);
    min-height:calc(var(--mobile-secondary-nav-h) + 2px);
    margin-top:-2px;
    background:#113676 !important;
    overflow-x:auto !important;
    overflow-y:hidden !important;
    overscroll-behavior-x:contain;
    -webkit-overflow-scrolling:touch;
    scrollbar-width:none;
    border:0 !important;
    outline:0 !important;
    box-shadow:none !important;
  }

  body.page-home .secondary-nav::-webkit-scrollbar{
    display:none;
  }

  body.page-home .secondary-menu{
    min-height:var(--mobile-secondary-nav-h) !important;
    width:max-content !important;
    min-width:max-content !important;
    flex-wrap:nowrap !important;
    justify-content:flex-start !important;
    transform:none;
    padding:0 10px !important;
    border:0 !important;
    outline:0 !important;
    box-shadow:none !important;
  }

  body.page-home .secondary-menu li::after{
    content:none !important;
    display:none !important;
  }

  body.page-home .secondary-menu li{
    flex:0 0 auto !important;
    padding:0 15px !important;
  }

  body.page-home .secondary-menu a{
    font-size:13px !important;
    letter-spacing:.08em !important;
    white-space:nowrap !important;
  }

  /* Highlights: horizontal mobile cards */
  body.page-home .highlights{
    display:flex !important;
    gap:12px !important;
    padding:18px 14px 20px !important;
    overflow-x:auto !important;
    overscroll-behavior-x:contain;
    -webkit-overflow-scrolling:touch;
    scroll-snap-type:x proximity;
    scrollbar-width:none;
  }

  body.page-home .highlights::-webkit-scrollbar{
    display:none;
  }

  body.page-home .highlights .highlight{
    flex:0 0 min(74vw, 260px);
    scroll-snap-align:start;
    padding:14px 12px !important;
    border:1px solid rgba(17,54,118,.1) !important;
  }

  body.page-home .highlight-icon img{
    width:58px !important;
    height:58px !important;
  }

  body.page-home .highlight-title{
    font-size:18px !important;
    line-height:1.1 !important;
  }

  body.page-home .highlight-text{
    font-size:13px !important;
    line-height:1.35 !important;
  }

  /* Experience: text top, 2-row horizontal image grid, footer text bottom */
  body.page-home .experience-section{
    padding:42px 0 28px !important;
    overflow:hidden;
  }

  body.page-home .experience-title{
    padding:0 18px;
    font-size:clamp(30px, 8vw, 42px) !important;
    line-height:1.08 !important;
  }

  body.page-home .experience-subtitle{
    padding:0 18px;
    margin-bottom:20px !important;
    font-size:clamp(18px, 5vw, 24px) !important;
    line-height:1.25 !important;
  }

  body.page-home .experience-slider{
    overflow-x:auto;
    overflow-y:hidden;
    overscroll-behavior-x:contain;
    -webkit-overflow-scrolling:touch;
    scrollbar-width:none;
    padding:0 14px;
  }

  body.page-home .experience-slider::-webkit-scrollbar{
    display:none;
  }

  body.page-home .experience-grid{
    display:grid !important;
    grid-auto-flow:column !important;
    grid-template-rows:repeat(2, minmax(0, 1fr)) !important;
    grid-auto-columns:minmax(145px, 43vw) !important;
    grid-template-columns:none !important;
    justify-content:flex-start !important;
    gap:10px !important;
    width:max-content;
    margin:0 0 18px !important;
  }

  body.page-home .experience-grid > .place-box:nth-child(n+9){
    display:flex !important;
  }

  body.page-home .place-box{
    width:auto !important;
    min-width:0 !important;
  }

  body.page-home .experience-footer{
    padding:0 18px;
    margin-top:10px !important;
  }

  body.page-home .experience-footer-text{
    font-size:clamp(26px, 7vw, 38px) !important;
    line-height:1.08 !important;
    padding:14px 0 18px !important;
  }

  /* Explore: text top, cards below, existing left-moving loop preserved */
  body.page-home .explore-journeys{
    display:grid !important;
    grid-template-columns:1fr !important;
    row-gap:22px !important;
    padding:52px 0 46px !important;
    overflow:hidden !important;
  }

  body.page-home .explore-left{
    padding:0 18px !important;
    text-align:left !important;
  }

  body.page-home .explore-variation{
    font-size:18px !important;
    margin-bottom:8px !important;
  }

  body.page-home .explore-title{
    font-size:clamp(38px, 11vw, 56px) !important;
    line-height:.96 !important;
    margin-bottom:12px !important;
  }

  body.page-home .explore-subtitle{
    font-size:16px !important;
    line-height:1.45 !important;
  }

  body.page-home .explore-right{
    --gap:16px;
    --card-w:min(72vw, 270px);
    --card-h:min(62vh, 430px);
    padding-top:0 !important;
    padding-bottom:34px !important;
    overflow:hidden !important;
  }

  body.page-home .explore-current-category{
    left:18px !important;
    right:auto !important;
    text-align:left !important;
    font-size:16px !important;
  }

  body.page-home .explore-right-track{
    gap:var(--gap) !important;
    padding-left:18px !important;
    width:max-content !important;
    will-change:transform !important;
    transform:translate3d(0,0,0);
  }

  body.page-home .journey-card{
    flex-basis:var(--card-w) !important;
    height:var(--card-h) !important;
  }

  body.page-home .card-bottom{
    left:18px !important;
    right:auto !important;
    align-items:flex-start !important;
    text-align:left !important;
    max-width:calc(100% - 36px) !important;
    padding-bottom:0 !important;
  }

  body.page-home .journey-card:hover .card-bottom,
  body.page-home .journey-card:hover .trip-desc{
    transform:none !important;
  }

  body.page-home .journey-card.is-near:not(.is-mobile-title-lifted) .card-bottom,
  body.page-home .journey-card.is-mobile-active:not(.is-mobile-title-lifted) .card-bottom{
    padding-bottom:0 !important;
  }

  body.page-home .journey-card.is-mobile-title-lifted .card-bottom{
    padding-bottom:58px !important;
  }

  body.page-home .journey-card.is-near:not(.is-mobile-title-lifted) .trip-desc,
  body.page-home .journey-card.is-mobile-active:not(.is-mobile-title-lifted) .trip-desc,
  body.page-home .journey-card.is-mobile-title-lifted .trip-desc{
    transform:none !important;
  }

  body.page-home .journey-card.is-mobile-active .journey-prox-wrap{
    opacity:0 !important;
    pointer-events:none !important;
    transform:translateY(14px) !important;
  }

  body.page-home .journey-card.is-mobile-active .journey-prox-wrap.ring-on,
  body.page-home .journey-card.is-mobile-active .journey-prox-wrap.button-on,
  body.page-home .journey-card.is-mobile-active .journey-prox-wrap.expanded{
    opacity:1 !important;
    pointer-events:auto !important;
    transform:none !important;
  }

  body.page-home .journey-prox-wrap{
    width:40px !important;
    height:40px !important;
  }

  body.page-home .journey-prox-btn{
    width:40px !important;
    height:40px !important;
    color:#000 !important;
  }

  body.page-home .journey-prox-wrap.expanded .journey-prox-btn{
    width:158px !important;
  }

  body.page-home .journey-prox-icon-box{
    width:40px !important;
    min-width:40px !important;
    height:40px !important;
  }

  body.page-home .journey-prox-btn svg{
    width:14px !important;
    height:14px !important;
    stroke:#000 !important;
  }

  body.page-home .journey-prox-text{
    left:48px !important;
    font-size:11px !important;
    letter-spacing:.03em !important;
    color:#000 !important;
  }

  body.page-home .journey-prox-wrap.button-on .journey-prox-text,
  body.page-home .journey-prox-wrap.expanded .journey-prox-text{
    color:#000 !important;
  }

  /* Why Book With Us: keep design, mobile horizontal rows */
  body.page-home .why-us{
    padding:42px 0 34px !important;
    overflow:hidden !important;
  }

  body.page-home .why-title{
    padding:0 18px 18px !important;
    margin-bottom:16px !important;
    font-size:clamp(30px, 9vw, 46px) !important;
    line-height:1.05 !important;
  }

  body.page-home .features{
    display:flex !important;
    width:100% !important;
    max-width:none !important;
    gap:14px !important;
    overflow-x:auto !important;
    overscroll-behavior-x:contain;
    -webkit-overflow-scrolling:touch;
    scroll-snap-type:x proximity;
    scrollbar-width:none;
    padding:52px 14px 4px !important;
    margin:0 !important;
  }

  body.page-home .features::-webkit-scrollbar{
    display:none;
  }

  body.page-home .features-bottom{
    padding:12px 14px 0 !important;
  }

  body.page-home .feature-top-card,
  body.page-home .feature-bottom-card{
    flex:0 0 min(78vw, 288px) !important;
    scroll-snap-align:start;
  }

  body.page-home .feature-top-card{
    min-height:288px;
  }

  body.page-home .feature-title{
    font-size:19px !important;
  }

  body.page-home .feature-bottom-card{
    min-height:132px !important;
  }

  /* Plan Your Sri Lanka Holiday: compact horizontal process cards */
  body.page-home .travel-steps-section{
    padding:58px 0 48px !important;
    overflow:hidden;
  }

  body.page-home .travel-steps-title-wrap{
    margin:0 auto 28px !important;
    padding:0 18px;
    text-align:left !important;
  }

  body.page-home .travel-steps-accent{
    margin-left:0 !important;
    margin-right:auto !important;
  }

  body.page-home .travel-steps-title{
    font-size:clamp(32px, 9vw, 46px) !important;
  }

  body.page-home .travel-steps-text{
    margin-left:0 !important;
    font-size:15px !important;
    line-height:1.6 !important;
  }

  body.page-home .process-row{
    justify-content:flex-start !important;
    overflow-x:auto !important;
    overscroll-behavior-x:contain;
    -webkit-overflow-scrolling:touch;
    scroll-snap-type:x proximity;
    scrollbar-width:none;
    gap:14px !important;
    padding:0 14px 6px !important;
  }

  body.page-home .process-row::-webkit-scrollbar{
    display:none;
  }

  body.page-home .process-box{
    flex:0 0 min(76vw, 280px) !important;
    scroll-snap-align:start;
    padding:16px 14px 6px !important;
  }

  body.page-home .travel-step-icon{
    width:72px !important;
    height:72px !important;
  }

  body.page-home .travel-step-title{
    font-size:24px !important;
  }

  body.page-home .travel-step-copy{
    font-size:14px !important;
    line-height:1.55 !important;
  }

  body.page-home .plan{
    padding:54px 18px 58px !important;
    min-height:auto !important;
    text-align:center !important;
  }

  body.page-home .plan-title{
    font-size:clamp(34px, 10vw, 54px) !important;
    line-height:1.02 !important;
  }

  body.page-home .plan-text{
    font-size:16px !important;
    line-height:1.55 !important;
    max-width:34ch !important;
    margin-inline:auto !important;
  }

  body.page-home .plan-btn{
    min-height:48px !important;
    padding:13px 22px !important;
  }

  /* Footer: vertical mobile reading order */
  .site-footer-2026.travel-footer .travel-footer__inner{
    padding:42px 20px 24px !important;
  }

  .site-footer-2026.travel-footer .travel-footer__grid{
    grid-template-columns:1fr !important;
    gap:28px !important;
    text-align:left !important;
  }

  .site-footer-2026.travel-footer .footer-brand{
    max-width:none !important;
  }

  .site-footer-2026.travel-footer .footer-social{
    flex-direction:column !important;
    align-items:flex-start !important;
    gap:12px !important;
  }

  .site-footer-2026.travel-footer .footer-bottom{
    text-align:left !important;
  }

  .site-footer-2026.travel-footer .footer-bottom p{
    font-size:12px !important;
    line-height:1.7 !important;
  }

  /* Assistant common mobile bottom layout: Text, then Btn Btn */
  .ta-widget.ta-side.ta-right,
  .ta-widget.ta-side.ta-left,
  .ta-widget.ta-bar,
  .ta-widget.ta-bar.ta-near-footer,
  .ta-widget.ta-bar.ta-side-fallback{
    left:0 !important;
    right:0 !important;
    top:auto !important;
    bottom:12px !important;
    width:auto !important;
    max-width:none !important;
    padding:0 10px !important;
    justify-content:center !important;
    opacity:1 !important;
    pointer-events:auto !important;
    transform:translateY(0) !important;
    transition:none !important;
  }

  .ta-widget.ta-side.ta-right.ta-visible,
  .ta-widget.ta-side.ta-left.ta-visible,
  .ta-widget.ta-bar.ta-visible,
  .ta-widget.ta-bar.ta-near-footer.ta-visible,
  .ta-widget.ta-bar.ta-side-fallback.ta-visible{
    transform:translateY(0) !important;
  }

  .ta-widget .ta-card,
  .ta-side .ta-card,
  .ta-bar .ta-card{
    width:min(620px, 100%) !important;
    margin:0 auto !important;
    flex-direction:column !important;
    border-radius:14px !important;
  }

  .ta-widget .ta-content,
  .ta-side .ta-content,
  .ta-bar .ta-content,
  .ta-bar.ta-near-footer .ta-content{
    width:100% !important;
    padding:14px 46px 14px 14px !important;
  }

  .ta-widget .ta-title{
    margin:0 0 4px !important;
    font-size:16px !important;
    line-height:1.2 !important;
  }

  .ta-widget .ta-text{
    font-size:13px !important;
    line-height:1.35 !important;
  }

  .ta-widget .ta-actions{
    display:grid !important;
    grid-template-columns:repeat(2, minmax(0, 1fr)) !important;
    gap:8px !important;
    margin-top:10px !important;
    width:100% !important;
  }

  .ta-widget .ta-btn{
    width:100% !important;
    min-height:40px !important;
    padding:9px 10px !important;
    font-size:13px !important;
  }

  .ta-widget .ta-close{
    top:10px !important;
    right:10px !important;
    width:28px !important;
    height:28px !important;
    display:none !important;
  }
}

@media (max-width:480px){
  :root{
    --mobile-assistant-safe:122px;
  }

  body.page-home .hero{
    min-height:330px !important;
  }

  body.page-home .experience-grid{
    grid-auto-columns:minmax(138px, 45vw) !important;
  }

  body.page-home .explore-right{
    --card-w:76vw;
    --card-h:390px;
  }

  .ta-widget .ta-actions{
    grid-template-columns:repeat(2, minmax(0, 1fr)) !important;
  }
}


/* =========================================
   HOME MOBILE PATCH 2 - corrections
   Desktop styles remain untouched.
========================================= */
@media (max-width:991px){
  .top-bar{z-index:2300 !important;}
  #topbar-placeholder{position:relative;z-index:2300;}
  #navbar-placeholder{z-index:2200 !important;}
  .main-nav-desktop{z-index:2200 !important;}

  body.nav-mobile-search-open{overflow-x:hidden !important;}
  body.nav-mobile-search-open .desktop-nav-logo{opacity:0 !important;visibility:hidden !important;pointer-events:none !important;}
  body.nav-mobile-search-open .mobile-nav-toggle{opacity:1 !important;visibility:visible !important;pointer-events:auto !important;}
  body.nav-mobile-search-open .desktop-nav-search{opacity:0 !important;visibility:hidden !important;pointer-events:none !important;}
  body.nav-mobile-search-open .desktop-search-close{opacity:1 !important;visibility:visible !important;pointer-events:auto !important;}

  .desktop-search-panel{
    position:absolute !important;
    top:50% !important;
    left:60px !important;
    right:60px !important;
    height:42px !important;
    transform:translateY(-50%) scaleX(.98) !important;
    transform-origin:right center !important;
    border-radius:999px !important;
    box-shadow:none !important;
    z-index:10 !important;
  }
  .desktop-search-panel.active{transform:translateY(-50%) scaleX(1) !important;}
  .desktop-search-input{height:42px !important;padding:0 14px !important;border-radius:999px !important;}
  .desktop-search-results{
    top:calc(var(--mobile-topbar-h) + var(--mobile-nav-h) + 8px) !important;
    z-index:2190 !important;
  }

  .mobile-nav-drawer{z-index:2150 !important;}
  .mobile-nav-backdrop{z-index:2100 !important;}
  .mobile-nav-panel{display:grid;gap:10px;}
  .mobile-nav-view{display:none;gap:8px;}
  .mobile-nav-view.is-active{display:grid;}
  .mobile-nav-header{display:flex;align-items:center;gap:10px;margin:0 0 10px;min-height:44px;}
  .mobile-nav-title{margin:0;color:#d9b24f;font-size:13px;font-weight:800;letter-spacing:.12em;text-transform:uppercase;}
  .mobile-nav-back{border:1px solid rgba(255,255,255,.18);background:rgba(255,255,255,.06);color:#fff;min-height:38px;padding:0 12px;font-family:var(--font-nav);font-weight:800;cursor:pointer;}
  .mobile-nav-submenu-btn{display:flex;align-items:center;justify-content:space-between;gap:12px;min-height:44px;padding:9px 0;border:0;border-bottom:1px solid rgba(255,255,255,.1);background:transparent;color:#fff;font-family:var(--font-nav);font-size:16px;text-align:left;cursor:pointer;}
  .mobile-nav-submenu-btn::after{content:'›';font-size:24px;line-height:1;color:#d9b24f;}

  body.page-home .hero-content{
    left:0 !important;
    right:auto !important;
    top:50% !important;
    transform:translateY(-50%) !important;
    text-align:left !important;
    width:min(92vw, 540px) !important;
    padding:0 0 0 22px !important;
  }
  body.page-home .hero-title{font-size:clamp(38px, 12vw, 62px) !important;}
  body.page-home .hero-subtitle{max-width:31ch !important;}

  body.page-home .secondary-nav{touch-action:pan-x !important;}
  body.page-home .secondary-menu{will-change:transform;}

  body.page-home .highlights{padding:14px 12px 16px !important;gap:10px !important;}
  body.page-home .highlights .highlight{
    flex:0 0 min(62vw, 218px) !important;
    padding:10px 8px !important;
    border:0 !important;
    background:transparent !important;
    box-shadow:none !important;
  }
  body.page-home .highlight-icon img{width:48px !important;height:48px !important;}
  body.page-home .highlight-title{font-size:16px !important;}
  body.page-home .highlight-text{font-size:12px !important;}

  body.page-home .experience-slider{overflow:visible !important;padding:0 14px !important;}
  body.page-home .experience-grid{
    width:100% !important;
    max-width:460px !important;
    margin:0 auto 18px !important;
    display:grid !important;
    grid-template-columns:repeat(2,minmax(0,1fr)) !important;
    grid-auto-flow:row !important;
    grid-template-rows:none !important;
    grid-auto-columns:auto !important;
    gap:10px !important;
    perspective:900px;
  }
  body.page-home .experience-grid > .place-box:nth-child(n+5){display:none !important;}
  body.page-home .experience-grid > .place-box:nth-child(-n+4){display:flex !important;}
  body.page-home .place-box{transform-style:preserve-3d;transition:transform .48s ease,opacity .28s ease;align-items:flex-start !important;text-align:left !important;}
  body.page-home .place-name{width:100% !important;text-align:left !important;}
  body.page-home .place-box.is-flipping{transform:rotateY(88deg);opacity:.2;}

  body.page-home .explore-right{--card-w:clamp(168px, 48vw, 210px) !important;--card-h:360px !important;padding-top:18px !important;}
  body.page-home .journey-card{flex-basis:var(--card-w) !important;width:var(--card-w) !important;height:var(--card-h) !important;}
  body.page-home .explore-current-category{
    position:static !important;
    display:block !important;
    margin:12px 18px 0 auto !important;
    width:max-content !important;
    max-width:calc(100% - 36px) !important;
    text-align:right !important;
  }

  body.page-home .why-mobile-track{display:flex;gap:12px;overflow-x:auto;overscroll-behavior-x:contain;-webkit-overflow-scrolling:touch;scroll-snap-type:x proximity;scroll-padding-inline:22px;scrollbar-width:none;padding:16px 22px 8px;}
  body.page-home .why-mobile-track::-webkit-scrollbar{display:none;}
  body.page-home .why-mobile-card{flex:0 0 min(74vw,268px);scroll-snap-align:start;display:grid;grid-template-rows:auto 1fr;gap:10px;}
  body.page-home .why-mobile-card .feature-top-card,
  body.page-home .why-mobile-card .feature-bottom-card{width:100% !important;min-width:0 !important;max-width:none !important;margin:0 !important;overflow:visible !important;}
  body.page-home .why-mobile-card,
  body.page-home .why-mobile-card .feature-top-card,
  body.page-home .why-mobile-card .feature-bottom-card,
  body.page-home .why-mobile-card .feature-image,
  body.page-home .why-mobile-card .feature-image > .img-sk-host{
    border:0 !important;
    outline:0 !important;
    box-shadow:none !important;
  }
  body.page-home .why-mobile-card .feature-top-card{min-height:264px !important;padding-top:48px !important;}
  body.page-home .why-mobile-card .feature-top-card > .img-sk-host{position:absolute !important;top:0 !important;left:50% !important;right:auto !important;bottom:auto !important;width:82px !important;height:82px !important;transform:translate(-50%,-42%) !important;z-index:3 !important;overflow:visible !important;}
  body.page-home .why-mobile-card .feature-icon{position:static !important;inset:auto !important;width:100% !important;height:100% !important;transform:none !important;clip-path:none !important;}
  body.page-home .why-us > .features{display:none !important;}

  body.page-home .travel-steps-title-wrap{text-align:center !important;}
  body.page-home .travel-steps-accent{margin-left:auto !important;margin-right:auto !important;}
  body.page-home .travel-steps-text{margin-left:auto !important;margin-right:auto !important;text-align:center !important;}
  body.page-home .process-row.is-mobile-loop{
    width:max-content !important;
    overflow:visible !important;
    scroll-snap-type:none !important;
    animation:locMobileStepsLoop 24s linear infinite;
    will-change:transform;
    pointer-events:none;
  }
  body.page-home .process-row.is-mobile-loop .process-box{flex:0 0 230px !important;}
  @keyframes locMobileStepsLoop{from{transform:translate3d(0,0,0);}to{transform:translate3d(-50%,0,0);}}

  .ta-widget.ta-side.ta-right,
  .ta-widget.ta-side.ta-left,
  .ta-widget.ta-bar,
  .ta-widget.ta-bar.ta-near-footer,
  .ta-widget.ta-bar.ta-side-fallback{
    bottom:calc(10px + env(safe-area-inset-bottom, 0px)) !important;
    padding:0 12px !important;
  }
  .ta-widget .ta-card,
  .ta-side .ta-card,
  .ta-bar .ta-card{
    border-radius:18px !important;
    border-color:rgba(17,54,118,.18) !important;
    box-shadow:0 12px 30px rgba(7,23,48,.18) !important;
    overflow:hidden !important;
  }
  .ta-widget .ta-content,
  .ta-side .ta-content,
  .ta-bar .ta-content,
  .ta-bar.ta-near-footer .ta-content{
    padding:12px 44px 12px 12px !important;
  }
  .ta-widget .ta-title{font-size:15px !important;margin:0 0 3px !important;}
  .ta-widget .ta-text{font-size:12.5px !important;line-height:1.32 !important;}
  .ta-widget .ta-actions{grid-template-columns:repeat(2,minmax(0,1fr)) !important;gap:7px !important;margin-top:9px !important;}
  .ta-widget .ta-btn{min-height:38px !important;border-radius:999px !important;font-size:12.5px !important;padding:8px 9px !important;}
}

@media (max-width:480px){
  body.page-home .journey-card{flex-basis:clamp(158px, 46vw, 190px) !important;width:clamp(158px, 46vw, 190px) !important;}
  body.page-home .why-mobile-card{flex-basis:min(72vw,256px);}
  body.page-home .process-row.is-mobile-loop .process-box{flex-basis:214px !important;}
}


/* =========================================
   HOME MOBILE PATCH 3 - bug correction layer
   Scope: mobile/tablet only. Fixes phase-2 regressions without touching desktop.
========================================= */
@media (max-width:991px){
  :root{
    --mobile-topbar-h:38px;
    --mobile-nav-h:58px;
  }

  body:not(.page-home),
  body:not(.page-home).topbar-open,
  body:not(.page-home).topbar-closed{
    --nonhome-nav-offset:0px !important;
    padding-top:0 !important;
    transition:none !important;
  }

  /* Keep topbar + navbar visible and fixed on mobile. */
  #topbar-placeholder{
    position:relative !important;
    z-index:2600 !important;
    min-height:var(--mobile-topbar-h) !important;
  }

  .top-bar,
  .top-bar.hidden,
  .top-bar.top-bar-initial-hidden{
    position:fixed !important;
    top:0 !important;
    left:0 !important;
    right:0 !important;
    height:var(--mobile-topbar-h) !important;
    max-height:var(--mobile-topbar-h) !important;
    z-index:2600 !important;
    opacity:1 !important;
    visibility:visible !important;
    pointer-events:auto !important;
    transform:none !important;
  }

  #navbar-placeholder{
    position:relative !important;
    z-index:2500 !important;
    min-height:var(--mobile-nav-h) !important;
  }

  .main-nav-desktop{
    position:fixed !important;
    top:var(--mobile-topbar-h) !important;
    left:0 !important;
    right:0 !important;
    height:var(--mobile-nav-h) !important;
    min-height:var(--mobile-nav-h) !important;
    z-index:2500 !important;
    transform:none !important;
  }

  body:not(.page-home) .main-nav-desktop{
    background:#113676 !important;
    border:0 !important;
    box-shadow:none !important;
  }

  body:not(.page-home) .main-nav-desktop::before{
    content:none !important;
  }

  body:not(.page-home) .main-nav-desktop::after{
    content:none !important;
  }

  body.page-home #hero-section{
    padding-top:0 !important;
  }

  /* Search opens inside the navbar row, square desktop-like input. */
  body.nav-mobile-search-open .desktop-nav-logo{
    opacity:0 !important;
    visibility:hidden !important;
    pointer-events:none !important;
  }

  body.nav-mobile-search-open .mobile-nav-toggle{
    opacity:1 !important;
    visibility:visible !important;
    pointer-events:auto !important;
  }

  body.nav-mobile-search-open .desktop-nav-search{
    opacity:0 !important;
    visibility:hidden !important;
    pointer-events:none !important;
  }

  .desktop-search-panel,
  .desktop-search-panel.active{
    position:absolute !important;
    top:50% !important;
    left:58px !important;
    right:58px !important;
    width:auto !important;
    height:42px !important;
    min-height:42px !important;
    border-radius:0 !important;
    background:#fff !important;
    box-shadow:none !important;
    transform:translateY(-50%) !important;
    z-index:11 !important;
  }

  .desktop-search-panel{
    opacity:0 !important;
    pointer-events:none !important;
  }

  .desktop-search-panel.active{
    opacity:1 !important;
    pointer-events:auto !important;
  }

  .desktop-search-input,
  .desktop-search-panel.active .desktop-search-input{
    height:42px !important;
    min-height:42px !important;
    border-radius:0 !important;
    padding:0 12px !important;
    font-size:15px !important;
  }

  .desktop-search-close{
    right:12px !important;
    z-index:12 !important;
  }

  .desktop-search-results{
    top:calc(var(--mobile-topbar-h) + var(--mobile-nav-h)) !important;
    left:0 !important;
    right:0 !important;
    border-radius:0 !important;
    box-shadow:0 16px 30px rgba(7,23,48,.18) !important;
    z-index:2490 !important;
  }

  /* Mobile drawer: clean text Back button. */
  .mobile-nav-back{
    border:0 !important;
    background:transparent !important;
    box-shadow:none !important;
    color:#fff !important;
    min-height:0 !important;
    padding:0 !important;
    font-size:15px !important;
    font-weight:800 !important;
    line-height:1.2 !important;
  }

  .mobile-nav-header{
    min-height:34px !important;
    margin-bottom:12px !important;
  }

  /* Hero: desktop-feel left alignment and vertical middle within visible area. */
  body.page-home .hero{
    min-height:calc(100svh - var(--mobile-topbar-h) - var(--mobile-nav-h) - var(--mobile-secondary-nav-h)) !important;
  }

  body.page-home .hero-content{
    left:0 !important;
    right:auto !important;
    top:31% !important;
    bottom:auto !important;
    width:min(92vw, 560px) !important;
    padding-left:clamp(22px, 7vw, 42px) !important;
    padding-right:18px !important;
    transform:translateY(-50%) !important;
    text-align:left !important;
    margin:0 !important;
  }

  body.page-home .hero-title,
  body.page-home .hero-subtitle{
    text-align:left !important;
    margin-left:0 !important;
    margin-right:auto !important;
  }

  body.page-home .hero-title{
    font-size:clamp(31px, 9.5vw, 48px) !important;
    line-height:.98 !important;
  }

  body.page-home .hero-subtitle{
    font-size:clamp(13px, 3.5vw, 16px) !important;
    line-height:1.36 !important;
    max-width:30ch !important;
  }

  /* Secondary nav: let JS loop transform work, but keep touch-friendly row. */
  body.page-home .secondary-nav{
    position:relative !important;
    z-index:10 !important;
    margin-top:-2px !important;
    background:#113676 !important;
    overflow:hidden !important;
    touch-action:pan-x !important;
    border:0 !important;
    outline:0 !important;
    box-shadow:none !important;
  }

  body.page-home .secondary-menu{
    display:flex !important;
    flex-wrap:nowrap !important;
    justify-content:flex-start !important;
    border:0 !important;
    outline:0 !important;
    box-shadow:none !important;
  }

  body.page-home .secondary-menu li::after{
    content:none !important;
    display:none !important;
  }

  /* Highlights: desktop-like, lighter, compact horizontal cards. */
  body.page-home .highlights{
    gap:8px !important;
    padding:12px 12px 16px !important;
  }

  body.page-home .highlights .highlight{
    flex:0 0 min(58vw, 205px) !important;
    border:0 !important;
    box-shadow:none !important;
    background:transparent !important;
    padding:8px 6px !important;
  }

  /* Experience flip: no scroll container, stable 4 visible slots. */
  body.page-home .experience-slider{
    overflow:visible !important;
  }

  body.page-home .experience-grid{
    overflow:visible !important;
  }

  body.page-home .place-box.is-flipping{
    transform:rotateY(84deg) !important;
    opacity:.28 !important;
  }

  /* Explore: reduce horizontal stretch. */
  body.page-home .explore-right{
    --card-w:clamp(176px, 52vw, 230px) !important;
    --card-h:380px !important;
  }

  body.page-home .explore-right-track{
    gap:12px !important;
  }

  body.page-home .journey-card{
    flex:0 0 var(--card-w) !important;
    width:var(--card-w) !important;
    max-width:var(--card-w) !important;
    min-width:var(--card-w) !important;
  }

  body.page-home .explore-current-category{
    position:static !important;
    margin:10px 18px 0 auto !important;
    width:max-content !important;
    max-width:calc(100% - 36px) !important;
    text-align:right !important;
  }

  /* Why-us: paired card scroll, keep icon visible and tied to text. */
  body.page-home .why-us{
    overflow:visible !important;
  }

  body.page-home .why-mobile-track{
    padding:44px 22px 8px !important;
    scroll-padding-inline:22px !important;
    overflow-x:auto !important;
    overflow-y:visible !important;
  }

  body.page-home .why-mobile-card{
    flex:0 0 min(74vw, 268px) !important;
    overflow:visible !important;
  }

  body.page-home .why-mobile-card .feature-top-card,
  body.page-home .why-mobile-card .feature-bottom-card{
    overflow:visible !important;
  }

  body.page-home .why-mobile-card,
  body.page-home .why-mobile-card .feature-top-card,
  body.page-home .why-mobile-card .feature-bottom-card,
  body.page-home .why-mobile-card .feature-image,
  body.page-home .why-mobile-card .feature-image > .img-sk-host{
    border:0 !important;
    outline:0 !important;
    box-shadow:none !important;
  }

  body.page-home .why-mobile-card .feature-top-card > .img-sk-host{
    position:absolute !important;
    top:0 !important;
    left:50% !important;
    right:auto !important;
    bottom:auto !important;
    width:82px !important;
    height:82px !important;
    transform:translate(-50%, -42%) !important;
    z-index:3 !important;
    overflow:visible !important;
  }

  body.page-home .why-mobile-card .feature-icon{
    position:static !important;
    inset:auto !important;
    width:100% !important;
    height:100% !important;
    z-index:auto !important;
    transform:none !important;
    clip-path:none !important;
  }

  body.page-home .why-mobile-card:nth-child(1) .feature-image img{
    object-position:center 18% !important;
  }

  body.page-home .why-mobile-card:nth-child(4) .feature-image img{
    object-position:center 78% !important;
  }

  /* Travel steps: centered text + locked auto loop. */
  body.page-home .travel-steps-title-wrap,
  body.page-home .travel-steps-title,
  body.page-home .travel-steps-text{
    text-align:center !important;
  }

  body.page-home .process-row.is-mobile-loop{
    overflow:visible !important;
    pointer-events:none !important;
    animation:locMobileStepsLoop 28s linear infinite !important;
  }

  /* Assistant: bottom-edge bar, not floating rounded card. */
  body.ta-mobile-safe-active{
    padding-bottom:96px !important;
  }

  .ta-widget.ta-side.ta-right,
  .ta-widget.ta-side.ta-left,
  .ta-widget.ta-bar,
  .ta-widget.ta-bar.ta-near-footer,
  .ta-widget.ta-bar.ta-side-fallback{
    left:0 !important;
    right:0 !important;
    bottom:0 !important;
    top:auto !important;
    width:100% !important;
    max-width:none !important;
    padding:0 !important;
    opacity:1 !important;
    pointer-events:auto !important;
    transform:translateY(0) !important;
    transition:none !important;
    justify-content:stretch !important;
  }

  .ta-widget.ta-side.ta-right.ta-visible,
  .ta-widget.ta-side.ta-left.ta-visible,
  .ta-widget.ta-bar.ta-visible,
  .ta-widget.ta-bar.ta-near-footer.ta-visible,
  .ta-widget.ta-bar.ta-side-fallback.ta-visible{
    transform:translateY(0) !important;
  }

  .ta-widget .ta-card,
  .ta-side .ta-card,
  .ta-bar .ta-card,
  .ta-bar.ta-near-footer .ta-card,
  .ta-bar.ta-side-fallback .ta-card{
    position:relative !important;
    width:100% !important;
    max-width:none !important;
    margin:0 !important;
    border-left:0 !important;
    border-right:0 !important;
    border-bottom:0 !important;
    border-radius:0 !important;
    box-shadow:0 -8px 22px rgba(7,23,48,.14) !important;
    background:#fff !important;
  }

  .ta-widget .ta-content,
  .ta-side .ta-content,
  .ta-bar .ta-content,
  .ta-bar.ta-near-footer .ta-content,
  .ta-bar.ta-side-fallback .ta-content{
    display:flex !important;
    flex-direction:column !important;
    min-height:var(--mobile-assistant-h) !important;
    padding:12px 14px 50px !important;
  }

  .ta-widget .ta-actions{
    position:absolute !important;
    left:0 !important;
    right:0 !important;
    bottom:0 !important;
    display:grid !important;
    grid-template-columns:repeat(2, minmax(0,1fr)) !important;
    gap:0 !important;
    align-items:stretch !important;
    width:100% !important;
    margin:0 !important;
  }

  .ta-widget .ta-btn,
  .ta-widget .ta-btn.is-primary,
  .ta-widget .ta-btn.is-secondary{
    background:#113676 !important;
    border:0 !important;
    border-radius:0 !important;
    box-shadow:none !important;
    color:#fff !important;
    width:100% !important;
    min-width:0 !important;
    min-height:42px !important;
    padding:10px 8px !important;
    white-space:nowrap !important;
    overflow:hidden !important;
    text-overflow:ellipsis !important;
  }

  .ta-widget .ta-close{
    top:10px !important;
    right:10px !important;
    border-radius:0 !important;
    display:none !important;
  }
}

@media (max-width:480px){
  body.page-home .explore-right{
    --card-w:clamp(170px, 52vw, 220px) !important;
    --card-h:370px !important;
  }
}


/* =========================================
   PHASE 4 FIX: Assistant-aware mobile first fold
   Keep the home hero + secondary nav inside the visible mobile area
   while the bottom assistant bar is visible. Desktop remains untouched.
========================================= */
:root{
  --mobile-assistant-h:118px;
  --mobile-assistant-safe:calc(var(--mobile-assistant-h) + env(safe-area-inset-bottom, 0px));
}

@media (max-width:991px){
  body.ta-mobile-safe-active{
    padding-bottom:var(--mobile-assistant-safe) !important;
  }

  body.page-home #hero-section{
    height:calc(100svh - var(--mobile-secondary-nav-h) - var(--mobile-assistant-h) + var(--mobile-nav-h)) !important;
    min-height:0 !important;
    margin-top:calc(-1 * var(--mobile-nav-h)) !important;
    padding-top:0 !important;
    background:transparent !important;
    box-sizing:border-box !important;
  }

  body.page-home .hero{
    height:calc(100svh - var(--mobile-secondary-nav-h) - var(--mobile-assistant-h) + var(--mobile-nav-h)) !important;
    min-height:0 !important;
    max-height:none !important;
  }

  body.page-home .secondary-nav{
    height:calc(var(--mobile-secondary-nav-h) + 2px) !important;
    min-height:calc(var(--mobile-secondary-nav-h) + 2px) !important;
    margin-top:-2px !important;
    margin-bottom:0 !important;
    box-sizing:border-box !important;
  }

  .ta-widget.ta-side.ta-right,
  .ta-widget.ta-side.ta-left,
  .ta-widget.ta-bar,
  .ta-widget.ta-bar.ta-near-footer,
  .ta-widget.ta-bar.ta-side-fallback{
    min-height:var(--mobile-assistant-h) !important;
  }
}

@media (max-width:480px){
  :root{
    --mobile-assistant-h:126px;
  }

  body.page-home .hero{
    min-height:clamp(280px, 45svh, 480px) !important;
  }
}


/* =========================================
   FIX 12: Final mobile/desktop resize safety
   - Restore mobile secondary-nav touch scroll after late patch layers.
   - Keep assistant-aware hero height only when assistant safe class is active.
   - Hide any leftover desktop loop clones on mobile as a CSS fallback.
========================================= */
@media (max-width:991px){
  body.page-home .secondary-nav{
    overflow-x:auto !important;
    overflow-y:hidden !important;
    -webkit-overflow-scrolling:touch !important;
    overscroll-behavior-x:contain !important;
    touch-action:pan-x !important;
  }

  body.page-home .secondary-menu [data-clone="1"]{
    display:none !important;
  }

  body.page-home:not(.ta-mobile-safe-active) #hero-section{
    height:calc(100svh - var(--mobile-topbar-h) - var(--mobile-nav-h) - var(--mobile-secondary-nav-h)) !important;
  }

  body.page-home:not(.ta-mobile-safe-active) .hero{
    height:calc(100svh - var(--mobile-topbar-h) - var(--mobile-nav-h) - var(--mobile-secondary-nav-h)) !important;
    min-height:330px !important;
    max-height:760px !important;
  }

  body.page-home.ta-mobile-safe-active #hero-section,
  body.page-home.ta-mobile-safe-active .hero{
    height:calc(100svh - var(--mobile-secondary-nav-h) - var(--mobile-assistant-h) + var(--mobile-nav-h)) !important;
    max-height:none !important;
  }
}

@media (max-width:480px){
  body.page-home:not(.ta-mobile-safe-active) .hero{
    min-height:330px !important;
  }

  body.page-home.ta-mobile-safe-active .hero{
    min-height:clamp(280px, 45svh, 480px) !important;
  }
}


/* =========================================
   FIX 13: Non-home mobile header safety
   Root cause: inner pages use fixed mobile topbar/navbar, but the PHP layout
   was not reserving a consistent mobile header space like the CSS expected.
   Scope: non-home pages only. Home page remains untouched.
========================================= */
@media (max-width:991px){
  body:not(.page-home){
    overflow-x:hidden !important;
  }

  body:not(.page-home) #topbar-placeholder{
    display:block !important;
    min-height:var(--mobile-topbar-h) !important;
    height:var(--mobile-topbar-h) !important;
    position:relative !important;
    z-index:3300 !important;
  }

  body:not(.page-home) #navbar-placeholder{
    display:block !important;
    min-height:var(--mobile-nav-h) !important;
    height:var(--mobile-nav-h) !important;
    position:relative !important;
    z-index:3200 !important;
  }

  body:not(.page-home) .top-bar,
  body:not(.page-home) .top-bar.hidden,
  body:not(.page-home) .top-bar.top-bar-initial-hidden{
    z-index:3300 !important;
  }

  body:not(.page-home) .main-nav-desktop{
    top:var(--mobile-topbar-h) !important;
    z-index:3200 !important;
  }

  body:not(.page-home) .desktop-search-results{
    z-index:3190 !important;
  }

  body:not(.page-home) .mobile-nav-backdrop{
    z-index:3000 !important;
  }

  body:not(.page-home) .mobile-nav-drawer{
    z-index:3100 !important;
    padding-top:calc(var(--mobile-topbar-h) + var(--mobile-nav-h) + 18px) !important;
  }

  body:not(.page-home) main{
    overflow:visible !important;
  }

  body.page-about .about-container > .static-section,
  body.page-contact .contact-page-section,
  body.page-guide.page-standard .guide-soon,
  body.page-terms .static-section,
  body.page-refund .static-section,
  body.page-privacy .static-section,
  body.page-cookie .static-section,
  body.page-responsible .static-section,
  body.page-website-terms .static-section,
  body.page-faq .static-section,
  body.page-404 .static-section{
    padding-top:clamp(34px, 8vw, 56px) !important;
  }

  body.page-packages .packages-page,
  body.page-package-details .package-detail-page,
  body.page-plan #planYourTripPage.plan-request-section{
    padding-top:clamp(34px, 8vw, 56px) !important;
  }

  body.page-join .join-hero{
    margin-top:0 !important;
  }
}

/* =========================================
   FIX 14: Global non-home mobile recovery layer
   Purpose: make mobile header/menu/search stable on every non-home page,
   even when older page CSS creates stacking/overflow conflicts.
   Scope: max-width 991px only. Home page untouched.
========================================= */
@media (max-width:991px){
  body:not(.page-home),
  body:not(.page-home) html{
    max-width:100% !important;
    overflow-x:hidden !important;
  }

  body:not(.page-home) .site-topbar-slot,
  body:not(.page-home) #topbar-placeholder{
    display:block !important;
    width:100% !important;
    height:var(--mobile-topbar-h) !important;
    min-height:var(--mobile-topbar-h) !important;
    max-height:var(--mobile-topbar-h) !important;
    position:relative !important;
    z-index:5200 !important;
    pointer-events:none !important;
  }

  body:not(.page-home) .site-navbar-slot,
  body:not(.page-home) #navbar-placeholder{
    display:block !important;
    width:100% !important;
    height:var(--mobile-nav-h) !important;
    min-height:var(--mobile-nav-h) !important;
    max-height:var(--mobile-nav-h) !important;
    position:relative !important;
    z-index:5100 !important;
    pointer-events:none !important;
  }

  body:not(.page-home) .top-bar,
  body:not(.page-home) .top-bar.hidden,
  body:not(.page-home) .top-bar.top-bar-initial-hidden{
    position:fixed !important;
    top:0 !important;
    left:0 !important;
    right:0 !important;
    height:var(--mobile-topbar-h) !important;
    min-height:var(--mobile-topbar-h) !important;
    max-height:var(--mobile-topbar-h) !important;
    display:block !important;
    opacity:1 !important;
    visibility:visible !important;
    transform:none !important;
    z-index:5200 !important;
    pointer-events:auto !important;
  }

  body:not(.page-home) .main-nav-desktop{
    position:fixed !important;
    top:var(--mobile-topbar-h) !important;
    left:0 !important;
    right:0 !important;
    width:100% !important;
    height:var(--mobile-nav-h) !important;
    min-height:var(--mobile-nav-h) !important;
    max-height:var(--mobile-nav-h) !important;
    padding:0 58px !important;
    display:flex !important;
    align-items:center !important;
    justify-content:center !important;
    background:#113676 !important;
    border:0 !important;
    box-shadow:none !important;
    transform:none !important;
    overflow:visible !important;
    opacity:1 !important;
    visibility:visible !important;
    z-index:5100 !important;
    pointer-events:auto !important;
  }

  body:not(.page-home) .desktop-nav-links,
  body:not(.page-home) .desktop-dropdown-portal{
    display:none !important;
  }

  body:not(.page-home) .desktop-nav-logo{
    display:inline-flex !important;
    opacity:1 !important;
    visibility:visible !important;
    pointer-events:auto !important;
    max-width:min(62vw,260px) !important;
    color:#fff !important;
  }

  body:not(.page-home) .mobile-nav-toggle,
  body:not(.page-home) .desktop-nav-search,
  body:not(.page-home) .desktop-search-close{
    pointer-events:auto !important;
  }

  body:not(.page-home) .mobile-nav-toggle{
    display:inline-flex !important;
    opacity:1 !important;
    visibility:visible !important;
    z-index:13 !important;
  }

  body:not(.page-home) .desktop-nav-search{
    display:block !important;
    opacity:1 !important;
    visibility:visible !important;
    z-index:13 !important;
  }

  body:not(.page-home).nav-mobile-search-open .desktop-nav-logo,
  body:not(.page-home).nav-mobile-search-open .desktop-nav-search{
    opacity:0 !important;
    visibility:hidden !important;
    pointer-events:none !important;
  }

  body:not(.page-home) .desktop-search-panel,
  body:not(.page-home) .desktop-search-panel.active{
    z-index:5120 !important;
  }

  body:not(.page-home) .desktop-search-results{
    z-index:5090 !important;
    max-height:calc(100svh - var(--mobile-topbar-h) - var(--mobile-nav-h) - 8px) !important;
    overflow:auto !important;
    -webkit-overflow-scrolling:touch !important;
  }

  body:not(.page-home) .mobile-nav-backdrop{
    position:fixed !important;
    inset:0 !important;
    z-index:5000 !important;
  }

  body:not(.page-home) .mobile-nav-drawer{
    position:fixed !important;
    top:0 !important;
    bottom:0 !important;
    left:0 !important;
    width:min(84vw,340px) !important;
    height:100svh !important;
    max-height:100svh !important;
    padding-top:calc(var(--mobile-topbar-h) + var(--mobile-nav-h) + 18px) !important;
    z-index:5050 !important;
    overflow-y:auto !important;
    -webkit-overflow-scrolling:touch !important;
    touch-action:pan-y !important;
  }

  body:not(.page-home).nav-mobile-open{
    overflow:hidden !important;
    touch-action:none !important;
  }

  body:not(.page-home).nav-mobile-open .mobile-nav-backdrop{
    display:block !important;
    opacity:1 !important;
    visibility:visible !important;
    pointer-events:auto !important;
  }

  body:not(.page-home).nav-mobile-open .mobile-nav-drawer{
    display:block !important;
    opacity:1 !important;
    visibility:visible !important;
    transform:translateX(0) !important;
    pointer-events:auto !important;
  }

  body:not(.page-home) main,
  body:not(.page-home) .about-container,
  body:not(.page-home) .static-section,
  body:not(.page-home) .packages-page,
  body:not(.page-home) .package-detail-page,
  body:not(.page-home) .contact-page-section,
  body:not(.page-home) .join-hero,
  body:not(.page-home) .guide-soon{
    max-width:100% !important;
    overflow-x:hidden !important;
  }
}

/* Legal pages: keep the mobile hero/image fitted behind the fixed header
   instead of letting the reserved header slots push the page downward. */
@media (max-width:700px){
  body.page-terms main,
  body.page-refund main,
  body.page-privacy main,
  body.page-cookie main,
  body.page-responsible main,
  body.page-website-terms main,
  body.page-faq main{
    margin-top:calc(-1 * (var(--mobile-topbar-h, 38px) + var(--mobile-nav-h, 58px))) !important;
  }

  body.page-terms .static-section,
  body.page-refund .static-section,
  body.page-privacy .static-section,
  body.page-cookie .static-section,
  body.page-responsible .static-section,
  body.page-website-terms .static-section,
  body.page-faq .static-section{
    padding-top:0 !important;
  }

  body.page-terms .terms-hero,
  body.page-refund .refund-hero,
  body.page-privacy .privacy-hero,
  body.page-cookie .cookie-hero,
  body.page-responsible .responsible-hero,
  body.page-website-terms .legal-hero,
  body.page-faq .faq-page-head{
    margin-top:0 !important;
    padding-top:calc(var(--mobile-topbar-h, 38px) + var(--mobile-nav-h, 58px) + 28px) !important;
    border-top:0 !important;
  }
}


/* =========================================================
   FIX 17: Home mobile secondary nav + Explore touch polish
   - Keeps desktop untouched
   - Lets mobile secondary nav run as an infinite loop when JS adds classes
   - Makes Explore card touch state behave like desktop hover
========================================================= */
@media (max-width: 991px){
  body.page-home .secondary-nav.is-mobile-looping{
    overflow:hidden !important;
    touch-action:pan-y !important;
  }

  body.page-home .secondary-menu.is-mobile-loop{
    width:max-content !important;
    min-width:max-content !important;
    flex-wrap:nowrap !important;
    justify-content:flex-start !important;
    will-change:transform !important;
  }

  body.page-home .secondary-menu.is-mobile-loop li{
    flex:0 0 auto !important;
  }

  body.page-home .secondary-menu.is-mobile-loop li[data-mobile-clone="1"]{
    display:list-item !important;
  }

  body.page-home .explore-current-category{
    position:absolute !important;
    top:auto !important;
    bottom:0 !important;
    left:auto !important;
    right:18px !important;
    margin:0 !important;
    width:auto !important;
    max-width:calc(100vw - 36px) !important;
    white-space:nowrap !important;
    overflow:hidden !important;
    text-overflow:ellipsis !important;
    text-align:right !important;
    pointer-events:none !important;
  }

  body.page-home .journey-card.is-near:not(.is-mobile-title-lifted) .card-bottom,
  body.page-home .journey-card.is-mobile-active:not(.is-mobile-title-lifted) .card-bottom{
    padding-bottom:0 !important;
    transform:none !important;
  }

  body.page-home .journey-card.is-mobile-title-lifted .card-bottom{
    padding-bottom:42px !important;
    transform:none !important;
  }

  body.page-home .journey-card.is-near:not(.is-mobile-title-lifted) .trip-desc,
  body.page-home .journey-card.is-mobile-active:not(.is-mobile-title-lifted) .trip-desc{
    transform:none !important;
  }

  body.page-home .journey-card.is-mobile-title-lifted .trip-desc{
    transform:translateY(-5px) !important;
  }

  body.page-home .journey-card.is-near .journey-prox-wrap,
  body.page-home .journey-card.is-mobile-active .journey-prox-wrap{
    opacity:0 !important;
    pointer-events:none !important;
    transform:translateY(14px) !important;
  }

  body.page-home .journey-card.is-near .journey-prox-wrap.ring-on,
  body.page-home .journey-card.is-near .journey-prox-wrap.button-on,
  body.page-home .journey-card.is-near .journey-prox-wrap.expanded,
  body.page-home .journey-card.is-mobile-active .journey-prox-wrap.ring-on,
  body.page-home .journey-card.is-mobile-active .journey-prox-wrap.button-on,
  body.page-home .journey-card.is-mobile-active .journey-prox-wrap.expanded{
    opacity:1 !important;
    pointer-events:auto !important;
    transform:translateY(0) !important;
  }

  body.page-home .journey-card.is-near .journey-prox-wrap.button-on .journey-prox-btn,
  body.page-home .journey-card.is-near .journey-prox-wrap.expanded .journey-prox-btn,
  body.page-home .journey-card.is-mobile-active .journey-prox-wrap.button-on .journey-prox-btn,
  body.page-home .journey-card.is-mobile-active .journey-prox-wrap.expanded .journey-prox-btn{
    pointer-events:auto !important;
  }
}

/* Final mobile topbar behavior: topbar hides on scroll down, navbar stays sticky. */
@media (max-width:991px){
  body.topbar-closed #topbar-placeholder,
  body.topbar-closed .site-topbar-slot{
    height:0 !important;
    min-height:0 !important;
    max-height:0 !important;
  }

  body.topbar-closed .top-bar,
  body.topbar-closed .top-bar.hidden,
  body.topbar-closed .top-bar.top-bar-initial-hidden{
    transform:translateY(-100%) !important;
    opacity:0 !important;
    visibility:hidden !important;
    pointer-events:none !important;
  }

  body.topbar-closed .main-nav-desktop{
    top:0 !important;
  }

  body.topbar-closed .desktop-search-results{
    top:calc(var(--mobile-nav-h) + 8px) !important;
  }

  body.topbar-closed .mobile-nav-drawer{
    padding-top:calc(var(--mobile-nav-h) + 18px) !important;
  }
}

/* =========================================
   FIX 24: Single topbar/navbar scroll state + smooth mobile nav
   Purpose: remove older patch-layer fights. Mobile topbar hides on scroll;
   navbar stays sticky. Non-home mobile nav stays solid until scrolling.
========================================= */
@media (min-width:992px){
  body.topbar-closed .top-bar,
  body.topbar-closed .top-bar.hidden,
  body.topbar-closed .top-bar.top-bar-initial-hidden{
    transform:translateY(-100%) !important;
    opacity:0 !important;
    visibility:hidden !important;
    pointer-events:none !important;
  }

  body.topbar-open .top-bar{
    transform:translateY(0) !important;
    opacity:1 !important;
    visibility:visible !important;
  }

  body.topbar-closed .main-nav-desktop{
    transform:translateY(0) !important;
  }

  body:not(.page-home).topbar-closed .main-nav-desktop{
    box-shadow:none !important;
  }
}

@media (max-width:991px){
  #topbar-placeholder,
  .site-topbar-slot{
    transition:height .18s ease, min-height .18s ease, max-height .18s ease !important;
  }

  body.ui-preinit #topbar-placeholder,
  body.ui-preinit .site-topbar-slot,
  body.ui-preinit .top-bar,
  body.ui-preinit .main-nav-desktop{
    transition:none !important;
  }

  .top-bar{
    transition:transform .18s cubic-bezier(.22,.61,.36,1), opacity .14s ease, visibility .14s ease !important;
    will-change:transform, opacity;
  }

  .main-nav-desktop{
    transition:top .18s cubic-bezier(.22,.61,.36,1), background .18s ease, box-shadow .18s ease !important;
    will-change:top, background;
  }

  body:not(.page-home){
    transition:padding-top .18s ease, background .18s ease !important;
  }

  body:not(.page-home),
  body:not(.page-home) main{
    background:var(--page-white, #fff) !important;
  }

  body.topbar-open #topbar-placeholder,
  body.topbar-open .site-topbar-slot{
    height:var(--mobile-topbar-h) !important;
    min-height:var(--mobile-topbar-h) !important;
    max-height:var(--mobile-topbar-h) !important;
    pointer-events:none !important;
  }

  body.topbar-open .top-bar,
  body.topbar-open .top-bar.hidden,
  body.topbar-open .top-bar.top-bar-initial-hidden{
    position:fixed !important;
    top:0 !important;
    left:0 !important;
    right:0 !important;
    height:var(--mobile-topbar-h) !important;
    min-height:var(--mobile-topbar-h) !important;
    max-height:var(--mobile-topbar-h) !important;
    transform:translateY(0) !important;
    opacity:1 !important;
    visibility:visible !important;
    pointer-events:auto !important;
  }

  body.topbar-open .main-nav-desktop{
    top:calc(var(--mobile-topbar-h) - 1px) !important;
  }

  body.topbar-closed #topbar-placeholder,
  body.topbar-closed .site-topbar-slot{
    height:0 !important;
    min-height:0 !important;
    max-height:0 !important;
    pointer-events:none !important;
  }

  body.topbar-closed .top-bar,
  body.topbar-closed .top-bar.hidden,
  body.topbar-closed .top-bar.top-bar-initial-hidden{
    transform:translateY(-101%) !important;
    opacity:0 !important;
    visibility:hidden !important;
    pointer-events:none !important;
  }

  body.topbar-closed .main-nav-desktop{
    top:-1px !important;
  }

  body.page-home .main-nav-desktop{
    background:linear-gradient(180deg, rgba(4,12,24,.50) 0%, rgba(5,14,28,.28) 62%, rgba(6,16,30,.06) 100%) !important;
    box-shadow:none !important;
    -webkit-backdrop-filter:saturate(130%) blur(2px);
    backdrop-filter:saturate(130%) blur(2px);
  }

  body.page-home.topbar-open .main-nav-desktop::before{
    transform:translateY(calc(-1 * var(--mobile-topbar-h))) !important;
    height:calc(118px + var(--mobile-topbar-h)) !important;
    transition:transform .18s cubic-bezier(.22,.61,.36,1), height .18s cubic-bezier(.22,.61,.36,1) !important;
  }

  body.page-home.topbar-closed .main-nav-desktop::before{
    transform:translateY(0) !important;
    height:118px !important;
    transition:transform .18s cubic-bezier(.22,.61,.36,1), height .18s cubic-bezier(.22,.61,.36,1) !important;
  }

  body:not(.page-home) .main-nav-desktop{
    background:#113676 !important;
    box-shadow:none !important;
    -webkit-backdrop-filter:none !important;
    backdrop-filter:none !important;
  }

  body:not(.page-home).topbar-closed .main-nav-desktop{
    background:linear-gradient(180deg, rgba(4,12,24,.62) 0%, rgba(5,14,28,.34) 58%, rgba(255,255,255,.06) 100%) !important;
    box-shadow:0 8px 22px rgba(7,23,48,.10) !important;
    -webkit-backdrop-filter:saturate(140%) blur(10px) !important;
    backdrop-filter:saturate(140%) blur(10px) !important;
  }

  body.topbar-open .desktop-search-results{
    top:calc(var(--mobile-topbar-h) + var(--mobile-nav-h) + 8px) !important;
  }

  body.topbar-closed .desktop-search-results{
    top:calc(var(--mobile-nav-h) + 8px) !important;
  }

  body.topbar-open .mobile-nav-drawer{
    padding-top:calc(var(--mobile-topbar-h) + var(--mobile-nav-h) + 18px) !important;
  }

  body.topbar-closed .mobile-nav-drawer{
    padding-top:calc(var(--mobile-nav-h) + 18px) !important;
  }
}


/* Mobile: force native instant scroll; JS smooth-scroll calls are patched in features.shared.js. */
@media (max-width: 991px), (pointer: coarse){
  html, body{
    scroll-behavior:auto !important;
  }
}


/* =========================================
   FIX 25: Non-home mobile topbar jitter guard
   Root cause: scroll JS hid the fixed topbar while CSS also collapsed the
   normal-flow placeholder from 38px to 0px. On real phones that layout jump
   changed scrollY and made topbar-open/topbar-closed fight near the threshold.
   Scope: non-home mobile only. Home hero/header behavior remains unchanged.
========================================= */
@media (max-width:991px){
  body:not(.page-home),
  body:not(.page-home).topbar-open,
  body:not(.page-home).topbar-closed{
    --nonhome-nav-offset:0px !important;
    padding-top:0 !important;
    transition:none !important;
  }

  body:not(.page-home) #topbar-placeholder,
  body:not(.page-home) .site-topbar-slot,
  body:not(.page-home).topbar-open #topbar-placeholder,
  body:not(.page-home).topbar-open .site-topbar-slot,
  body:not(.page-home).topbar-closed #topbar-placeholder,
  body:not(.page-home).topbar-closed .site-topbar-slot{
    display:block !important;
    height:var(--mobile-topbar-h) !important;
    min-height:var(--mobile-topbar-h) !important;
    max-height:var(--mobile-topbar-h) !important;
    transition:none !important;
    pointer-events:none !important;
  }

  body:not(.page-home).topbar-user-closed #topbar-placeholder,
  body:not(.page-home).topbar-user-closed .site-topbar-slot{
    height:0 !important;
    min-height:0 !important;
    max-height:0 !important;
  }

  body:not(.page-home) .top-bar{
    transition:transform .20s cubic-bezier(.22,.61,.36,1), opacity .16s ease, visibility .16s ease !important;
    will-change:transform, opacity;
  }

  body:not(.page-home).topbar-open .top-bar,
  body:not(.page-home).topbar-open .top-bar.hidden,
  body:not(.page-home).topbar-open .top-bar.top-bar-initial-hidden{
    transform:translateY(0) !important;
    opacity:1 !important;
    visibility:visible !important;
    pointer-events:auto !important;
  }

  body:not(.page-home).topbar-closed .top-bar,
  body:not(.page-home).topbar-closed .top-bar.hidden,
  body:not(.page-home).topbar-closed .top-bar.top-bar-initial-hidden{
    transform:translateY(-101%) !important;
    opacity:0 !important;
    visibility:hidden !important;
    pointer-events:none !important;
  }

  body:not(.page-home) .main-nav-desktop{
    transition:top .20s cubic-bezier(.22,.61,.36,1) !important;
    background:#113676 !important;
    box-shadow:none !important;
    -webkit-backdrop-filter:none !important;
    backdrop-filter:none !important;
    will-change:top;
  }

  body:not(.page-home).topbar-open .main-nav-desktop{
    top:calc(var(--mobile-topbar-h) - 1px) !important;
    background:#113676 !important;
    box-shadow:none !important;
    -webkit-backdrop-filter:none !important;
    backdrop-filter:none !important;
  }

  body:not(.page-home).topbar-closed .main-nav-desktop{
    top:-1px !important;
    background:linear-gradient(180deg, rgba(4,12,24,.62) 0%, rgba(5,14,28,.34) 58%, rgba(255,255,255,.06) 100%) !important;
    box-shadow:0 8px 22px rgba(7,23,48,.10) !important;
    -webkit-backdrop-filter:saturate(140%) blur(10px) !important;
    backdrop-filter:saturate(140%) blur(10px) !important;
  }
}

/* =========================================================
   FIX 18: Mobile secondary nav loop clone alignment
   - Prevent cloned category items from reverting to list-item layout
   - Keeps all loop items vertically centered while swiping left/right
========================================================= */
@media (max-width: 991px){
  body.page-home .secondary-nav.is-mobile-looping{
    height:calc(var(--mobile-secondary-nav-h, 48px) + 2px) !important;
    min-height:calc(var(--mobile-secondary-nav-h, 48px) + 2px) !important;
    overflow:hidden !important;
  }

  body.page-home .secondary-menu.is-mobile-loop{
    display:flex !important;
    align-items:stretch !important;
    height:calc(var(--mobile-secondary-nav-h, 48px) + 2px) !important;
    min-height:calc(var(--mobile-secondary-nav-h, 48px) + 2px) !important;
    padding-top:0 !important;
    padding-bottom:0 !important;
    list-style:none !important;
  }

  body.page-home .secondary-menu.is-mobile-loop li,
  body.page-home .secondary-menu.is-mobile-loop li[data-clone="1"],
  body.page-home .secondary-menu.is-mobile-loop li[data-mobile-clone="1"]{
    display:flex !important;
    align-items:center !important;
    justify-content:center !important;
    flex:0 0 auto !important;
    height:calc(var(--mobile-secondary-nav-h, 48px) + 2px) !important;
    min-height:calc(var(--mobile-secondary-nav-h, 48px) + 2px) !important;
    padding-top:0 !important;
    padding-bottom:0 !important;
    margin-top:0 !important;
    margin-bottom:0 !important;
    line-height:1 !important;
    list-style:none !important;
  }

  body.page-home .secondary-menu.is-mobile-loop li::marker,
  body.page-home .secondary-menu.is-mobile-loop li[data-clone="1"]::marker,
  body.page-home .secondary-menu.is-mobile-loop li[data-mobile-clone="1"]::marker{
    content:"" !important;
    font-size:0 !important;
  }

  body.page-home .secondary-menu.is-mobile-loop a{
    display:inline-flex !important;
    align-items:center !important;
    justify-content:center !important;
    height:100% !important;
    line-height:1.08 !important;
    padding-top:0 !important;
    padding-bottom:0 !important;
    white-space:nowrap !important;
  }
}