/* =========================================================
   JELEN MOBILE BASE
   Mobile-only stylesheet.
   Desktop remains controlled by style.css.
========================================================= */

.jelen-mobile-header {
  display: none;
}

@media (max-width: 860px) {
  *,
  *::before,
  *::after {
    box-sizing: border-box;
  }

  html,
  body {
    width: 100%;
    max-width: 100%;
    overflow-x: hidden;
  }

  body {
    min-width: 0;
  }

  img,
  video {
    max-width: 100%;
  }

  .site-header.header-polished {
    display: none !important;
  }

  /* -------------------------
     Mobile header
     One row: logo | icons | Book Now
  ------------------------- */

  .jelen-mobile-header {
    position: fixed;
    top: max(10px, env(safe-area-inset-top));
    left: 12px;
    right: 12px;
    z-index: 10000;

    display: grid;
    grid-template-columns: auto minmax(0, 1fr) auto;
    align-items: center;
    gap: clamp(8px, 2.2vw, 12px);

    min-height: 72px;
    padding: 8px 10px;

    border-radius: 28px;
    background: rgba(31, 49, 61, 0.88);
    border: 1px solid rgba(255, 255, 255, 0.16);
    box-shadow: 0 18px 42px rgba(0, 0, 0, 0.24);
    backdrop-filter: blur(16px);
    -webkit-backdrop-filter: blur(16px);
  }

  .jelen-mobile-logo {
    grid-column: 1;
    justify-self: start;
    align-self: center;

    width: clamp(54px, 14.5vw, 64px);
    height: clamp(54px, 14.5vw, 64px);
    min-width: clamp(54px, 14.5vw, 64px);
    min-height: clamp(54px, 14.5vw, 64px);

    display: block;
    border-radius: 999px;
    overflow: hidden;
    text-decoration: none;
  }

  .jelen-mobile-logo img {
    display: block;
    width: 104%;
    height: 104%;
    object-fit: cover;
    transform: translateY(1px);
  }

  .jelen-mobile-actions {
    grid-column: 2;
    justify-self: center;
    align-self: center;

    display: flex;
    align-items: center;
    justify-content: center;
    gap: clamp(5px, 1.8vw, 8px);

    min-width: 0;
    margin: 0;
  }

  .jelen-mobile-actions .header-mini-button {
    width: clamp(30px, 8.4vw, 36px);
    height: clamp(30px, 8.4vw, 36px);
    min-width: clamp(30px, 8.4vw, 36px);
    min-height: clamp(30px, 8.4vw, 36px);

    display: inline-flex;
    align-items: center;
    justify-content: center;

    padding: 0;
    margin: 0;
    border-radius: 999px;

    background: rgba(255, 255, 255, 0.08);
    border: 1px solid rgba(255, 255, 255, 0.22);
    text-decoration: none;
  }

  .jelen-mobile-actions .header-mini-button span {
    display: none !important;
  }

  .jelen-mobile-actions .header-mini-button svg {
    width: clamp(15px, 4vw, 18px);
    height: clamp(15px, 4vw, 18px);
    margin: 0;
  }

  .jelen-mobile-actions .header-mini-button svg,
  .jelen-mobile-actions .header-mini-button svg * {
    color: var(--jelen-light-orange, #d96a2b) !important;
    fill: var(--jelen-light-orange, #d96a2b) !important;
    stroke: var(--jelen-light-orange, #d96a2b) !important;
  }

  .jelen-mobile-actions .whatsapp-button {
    order: 1;
  }

  .jelen-mobile-actions .instagram-button {
    order: 2;
  }

  .jelen-mobile-actions .location-button {
    order: 3;
  }

  .jelen-mobile-book {
    grid-column: 3;
    justify-self: end;
    align-self: center;

    width: clamp(90px, 25vw, 112px);
    height: clamp(42px, 11vw, 48px);

    display: inline-flex;
    align-items: center;
    justify-content: center;

    padding: 0 14px;
    border-radius: 999px;
    background: var(--jelen-light-orange, #d96a2b);
    color: #ffffff;

    font-size: clamp(0.82rem, 3.5vw, 0.96rem);
    font-weight: 850;
    line-height: 1;
    text-decoration: none;
    white-space: nowrap;
  }

  /* -------------------------
     Mobile hero
  ------------------------- */

  .hero {
    min-height: 100svh;
    padding: 128px 16px 56px;

    display: flex;
    align-items: center;
    justify-content: center;

    overflow: hidden;
  }

  .hero-bg-video {
    width: 100%;
    height: 100%;
    object-fit: cover;
    object-position: center center;
  }

  .hero-content,
  .hero-inner,
  .hero-copy,
  .hero-main,
  .hero-text {
    width: 100%;
    max-width: 390px;
    min-height: calc(100svh - 220px);

    margin-left: auto;
    margin-right: auto;

    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: flex-start;

    text-align: center;
  }

  .hero h1,
  .hero-title-two-line,
  .hero h1.hero-title-two-line {
    width: calc(100vw - 28px);
    max-width: 390px;

    margin: 0 auto 0 auto;

    font-size: clamp(2.15rem, 8.25vw, 3rem);
    line-height: 0.92;
    letter-spacing: -0.05em;

    text-align: center;
    white-space: normal;
    transform: translateY(-12px);
  }

  .hero h1 span,
  .hero-title-two-line span,
  .hero h1.hero-title-two-line span {
    display: block;
    white-space: nowrap;
    width: 100%;
  }

  .hero-lead {
    width: 100%;
    max-width: 330px;

    margin: auto auto 34px auto;

    font-size: clamp(0.92rem, 3.5vw, 0.98rem);
    line-height: 1.38;
    text-align: center;
  }

  .hero-actions,
  .hero-buttons,
  .hero-ctas,
  .hero-cta-row,
  .hero .button-row {
    width: min(100%, 306px);
    max-width: 306px;

    margin: 0 auto 0 auto;

    display: flex;
    flex-direction: column;
    gap: 12px;
    align-items: stretch;
  }

  .hero .btn,
  .hero .btn-primary,
  .hero .btn-glass,
  .hero .btn-xl,
  .hero .btn-large {
    width: 100%;
    min-width: 0;
    height: 58px;
    min-height: 58px;

    display: inline-flex;
    align-items: center;
    justify-content: center;

    font-size: 1rem;
    border-radius: 999px;
  }
}

@media (max-width: 360px) {
  .jelen-mobile-header {
    left: 8px;
    right: 8px;
    padding: 7px 8px;
    min-height: 66px;
    border-radius: 24px;
    gap: 6px;
  }

  .jelen-mobile-book {
    width: 86px;
    padding-left: 10px;
    padding-right: 10px;
  }

  .hero {
    padding-top: 118px;
    padding-left: 14px;
    padding-right: 14px;
  }

  .hero h1,
  .hero-title-two-line,
  .hero h1.hero-title-two-line {
    font-size: clamp(2rem, 7.9vw, 2.65rem);
    transform: translateY(-8px);
  }

  .hero-lead {
    max-width: 312px;
    font-size: 0.9rem;
    line-height: 1.36;
    margin-bottom: 30px;
  }
}

/* =========================================================
   MOBILE HERO FIX — headline fit
========================================================= */

@media (max-width: 860px) {
  .hero h1,
  .hero-title-two-line,
  .hero h1.hero-title-two-line {
    max-width: 340px !important;
    font-size: clamp(2rem, 7.4vw, 2.65rem) !important;
    line-height: 0.95 !important;
    letter-spacing: -0.045em !important;
    transform: translateY(-10px) !important;
  }

  .hero h1 span,
  .hero-title-two-line span,
  .hero h1.hero-title-two-line span {
    display: inline !important;
    white-space: normal !important;
  }

  .hero-lead {
    max-width: 310px !important;
    line-height: 1.42 !important;
  }
}

@media (max-width: 380px) {
  .hero h1,
  .hero-title-two-line,
  .hero h1.hero-title-two-line {
    max-width: 320px !important;
    font-size: clamp(1.9rem, 7.1vw, 2.45rem) !important;
  }
}

/* =========================================================
   MOBILE HERO FIX — force 2-line headline
========================================================= */

@media (max-width: 860px) {
  .hero h1,
  .hero-title-two-line,
  .hero h1.hero-title-two-line {
    width: calc(100vw - 34px) !important;
    max-width: 372px !important;

    font-size: clamp(2.18rem, 8.15vw, 3.05rem) !important;
    line-height: 0.92 !important;
    letter-spacing: -0.052em !important;

    text-align: center !important;
    transform: translateY(-10px) !important;
  }

  .hero h1 span,
  .hero-title-two-line span,
  .hero h1.hero-title-two-line span {
    display: block !important;
    width: 100% !important;
    white-space: nowrap !important;
  }
}

@media (max-width: 380px) {
  .hero h1,
  .hero-title-two-line,
  .hero h1.hero-title-two-line {
    width: calc(100vw - 30px) !important;
    max-width: 350px !important;
    font-size: clamp(2.02rem, 7.75vw, 2.65rem) !important;
  }
}

/* =========================================================
   MOBILE HERO FIX — raise title, lower compact copy/buttons
========================================================= */

@media (max-width: 860px) {
  .hero-content,
  .hero-inner,
  .hero-copy,
  .hero-main,
  .hero-text {
    min-height: calc(100svh - 190px) !important;
    max-width: 100% !important;
  }

  .hero h1,
  .hero-title-two-line,
  .hero h1.hero-title-two-line {
    width: calc(100vw - 24px) !important;
    max-width: 385px !important;

    margin-left: auto !important;
    margin-right: auto !important;

    font-size: clamp(2.22rem, 8.6vw, 3.18rem) !important;
    line-height: 0.9 !important;
    letter-spacing: -0.055em !important;

    text-align: center !important;
    align-self: center !important;
    transform: translateY(-54px) !important;
  }

  .hero h1 span,
  .hero-title-two-line span,
  .hero h1.hero-title-two-line span {
    display: block !important;
    width: 100% !important;
    white-space: nowrap !important;
    text-align: center !important;
  }

  .hero-lead {
    width: calc(100vw - 42px) !important;
    max-width: 356px !important;

    margin: auto auto 28px auto !important;

    font-size: clamp(0.86rem, 3.25vw, 0.94rem) !important;
    line-height: 1.34 !important;
    text-align: center !important;

    transform: translateY(24px) !important;
  }

  .hero-actions,
  .hero-buttons,
  .hero-ctas,
  .hero-cta-row,
  .hero .button-row {
    transform: translateY(24px) !important;
  }
}

@media (max-width: 380px) {
  .hero h1,
  .hero-title-two-line,
  .hero h1.hero-title-two-line {
    width: calc(100vw - 22px) !important;
    max-width: 356px !important;
    font-size: clamp(2.05rem, 8.25vw, 2.78rem) !important;
    transform: translateY(-48px) !important;
  }

  .hero-lead {
    width: calc(100vw - 34px) !important;
    max-width: 342px !important;
    font-size: 0.86rem !important;
    line-height: 1.32 !important;
    transform: translateY(22px) !important;
  }

  .hero-actions,
  .hero-buttons,
  .hero-ctas,
  .hero-cta-row,
  .hero .button-row {
    transform: translateY(22px) !important;
  }
}



/* =========================================================
   MOBILE HERO FIX — centered title + raised real tour buttons
========================================================= */

@media (max-width: 860px) {
  .hero h1,
  .hero-title-two-line,
  .hero h1.hero-title-two-line {
    left: auto !important;
    right: auto !important;

    width: calc(100vw - 26px) !important;
    max-width: 380px !important;

    margin-left: auto !important;
    margin-right: auto !important;

    font-size: clamp(2.05rem, 8.15vw, 2.95rem) !important;
    line-height: 0.92 !important;
    letter-spacing: -0.035em !important;

    text-align: center !important;
    transform: translateY(-54px) !important;
  }

  .hero h1 span,
  .hero-title-two-line span,
  .hero h1.hero-title-two-line span {
    display: block !important;
    width: 100% !important;
    white-space: nowrap !important;
    text-align: center !important;
  }

  .hero-lead {
    max-width: 342px !important;
    margin-bottom: 22px !important;

    font-size: clamp(0.84rem, 3.2vw, 0.92rem) !important;
    line-height: 1.3 !important;
    text-align: center !important;

    transform: translateY(-18px) !important;
  }

  .hero a[href="#available-dates"],
  .hero a[href="#availability"],
  .hero a[href="#route"],
  .hero a[href*="available"],
  .hero a[href*="route"] {
    transform: translateY(-18px) !important;
  }
}

@media (max-width: 380px) {
  .hero h1,
  .hero-title-two-line,
  .hero h1.hero-title-two-line {
    width: calc(100vw - 22px) !important;
    max-width: 356px !important;
    font-size: clamp(1.92rem, 7.8vw, 2.55rem) !important;
    transform: translateY(-48px) !important;
  }

  .hero-lead {
    max-width: 326px !important;
    font-size: 0.84rem !important;
    line-height: 1.28 !important;
    transform: translateY(-22px) !important;
  }

  .hero a[href="#available-dates"],
  .hero a[href="#availability"],
  .hero a[href="#route"],
  .hero a[href*="available"],
  .hero a[href*="route"] {
    transform: translateY(-22px) !important;
  }
}

/* =========================================================
   MOBILE HERO TARGETED RESET — exact hero selectors only
========================================================= */

@media (max-width: 860px) {
  .hero {
    position: relative !important;
    min-height: 100svh !important;
    padding: 0 !important;
    overflow: hidden !important;
  }

  .hero > .hero-content.centered {
    position: absolute !important;
    inset: 0 !important;
    z-index: 3 !important;

    width: 100% !important;
    max-width: none !important;
    min-height: 0 !important;
    height: 100svh !important;

    margin: 0 !important;
    padding: 150px 18px 24px !important;

    display: flex !important;
    flex-direction: column !important;
    align-items: center !important;

    text-align: center !important;
  }

  .hero > .hero-content.centered > .eyebrow {
    display: none !important;
  }

  .hero > .hero-content.centered > .hero-title-two-line {
    width: calc(100vw - 28px) !important;
    max-width: 374px !important;

    margin: 0 auto auto !important;
    padding: 0 !important;

    font-size: clamp(2.22rem, 9.4vw, 3.05rem) !important;
    line-height: 0.92 !important;
    letter-spacing: -0.025em !important;

    text-align: center !important;
    transform: none !important;
  }

  .hero > .hero-content.centered > .hero-title-two-line span {
    display: block !important;
    width: 100% !important;
    white-space: nowrap !important;
    text-align: center !important;
  }

  .hero > .hero-content.centered > .hero-lead {
    width: calc(100vw - 36px) !important;
    max-width: 356px !important;

    margin: 0 auto 22px !important;
    padding: 0 !important;

    font-size: clamp(0.82rem, 3.25vw, 0.92rem) !important;
    line-height: 1.28 !important;

    text-align: center !important;
    transform: none !important;
  }

  .hero > .hero-content.centered > .hero-lead br {
    display: none !important;
  }

  .hero > .hero-content.centered > .hero-actions.centered-actions {
    width: min(calc(100vw - 56px), 306px) !important;
    max-width: 306px !important;

    margin: 0 auto !important;
    padding: 0 !important;

    display: flex !important;
    flex-direction: column !important;
    gap: 10px !important;
    align-items: stretch !important;

    transform: none !important;
  }

  .hero > .hero-content.centered > .hero-actions.centered-actions > a {
    width: 100% !important;
    height: 54px !important;
    min-height: 54px !important;

    display: flex !important;
    align-items: center !important;
    justify-content: center !important;

    transform: none !important;
  }
}

@media (max-width: 380px) {
  .hero > .hero-content.centered {
    padding: 142px 14px 22px !important;
  }

  .hero > .hero-content.centered > .hero-title-two-line {
    max-width: 354px !important;
    font-size: clamp(2.02rem, 8.9vw, 2.62rem) !important;
  }

  .hero > .hero-content.centered > .hero-lead {
    max-width: 340px !important;
    font-size: 0.82rem !important;
    line-height: 1.26 !important;
    margin-bottom: 18px !important;
  }

  .hero > .hero-content.centered > .hero-actions.centered-actions {
    width: min(calc(100vw - 44px), 300px) !important;
    gap: 9px !important;
  }

  .hero > .hero-content.centered > .hero-actions.centered-actions > a {
    height: 52px !important;
    min-height: 52px !important;
  }
}

/* =========================================================
   MOBILE HEADER POLISH — bigger logo, icons, and CTA
========================================================= */

@media (max-width: 860px) {
  .jelen-mobile-header {
    min-height: 84px !important;
    padding: 9px 12px !important;
    gap: clamp(8px, 2vw, 12px) !important;
  }

  .jelen-mobile-logo {
    width: clamp(62px, 15.5vw, 74px) !important;
    height: clamp(62px, 15.5vw, 74px) !important;
    min-width: clamp(62px, 15.5vw, 74px) !important;
    min-height: clamp(62px, 15.5vw, 74px) !important;
  }

  .jelen-mobile-actions {
    gap: clamp(7px, 1.9vw, 10px) !important;
  }

  .jelen-mobile-actions .header-mini-button {
    width: clamp(36px, 9.3vw, 44px) !important;
    height: clamp(36px, 9.3vw, 44px) !important;
    min-width: clamp(36px, 9.3vw, 44px) !important;
    min-height: clamp(36px, 9.3vw, 44px) !important;
  }

  .jelen-mobile-actions .header-mini-button svg {
    width: clamp(17px, 4.4vw, 21px) !important;
    height: clamp(17px, 4.4vw, 21px) !important;
  }

  .jelen-mobile-actions .facebook-button {
    order: 3 !important;
  }

  .jelen-mobile-actions .location-button {
    order: 4 !important;
  }

  .jelen-mobile-book {
    width: clamp(104px, 26vw, 128px) !important;
    height: clamp(48px, 11.5vw, 56px) !important;
    font-size: clamp(0.92rem, 3.55vw, 1.06rem) !important;
  }
}

@media (max-width: 380px) {
  .jelen-mobile-header {
    left: 8px !important;
    right: 8px !important;
    min-height: 78px !important;
    padding: 8px 9px !important;
    gap: 6px !important;
  }

  .jelen-mobile-logo {
    width: 58px !important;
    height: 58px !important;
    min-width: 58px !important;
    min-height: 58px !important;
  }

  .jelen-mobile-actions {
    gap: 5px !important;
  }

  .jelen-mobile-actions .header-mini-button {
    width: 34px !important;
    height: 34px !important;
    min-width: 34px !important;
    min-height: 34px !important;
  }

  .jelen-mobile-book {
    width: 98px !important;
    height: 48px !important;
    font-size: 0.9rem !important;
  }
}

/* =========================================================
   MOBILE HERO SUBTEXT WIDTH ONLY
========================================================= */

@media (max-width: 860px) {
  .hero > .hero-content.centered > .hero-lead {
    width: calc(100vw - 26px) !important;
    max-width: 392px !important;
  }
}

@media (max-width: 380px) {
  .hero > .hero-content.centered > .hero-lead {
    width: calc(100vw - 22px) !important;
    max-width: 362px !important;
  }
}

/* =========================================================
   MOBILE HERO SUBTEXT WIDTH MORE
========================================================= */

@media (max-width: 860px) {
  .hero > .hero-content.centered > .hero-lead {
    width: calc(100vw - 10px) !important;
    max-width: 460px !important;
  }
}

@media (max-width: 380px) {
  .hero > .hero-content.centered > .hero-lead {
    width: calc(100vw - 8px) !important;
    max-width: 390px !important;
  }
}


/* =========================================================
   MOBILE AVAILABLE TOURS — clean normal-flow carousel
========================================================= */

@media (max-width: 860px) {
  #available-tours,
  #available-tours.section-sand {
    background: #f5efdf !important;
    background-color: #f5efdf !important;
    overflow: hidden !important;
  }

  #available-tours .section-heading,
  #available-tours .availability-group-title {
    background: transparent !important;
    background-color: transparent !important;
  }

  #available-tours #availability-list.tour-card-grid {
    display: flex !important;
    flex-direction: row !important;
    flex-wrap: nowrap !important;
    justify-content: flex-start !important;
    gap: 16px !important;

    width: 100% !important;
    max-width: 100% !important;

    margin-left: 0 !important;
    margin-right: 0 !important;
    transform: none !important;

    padding: 8px 0 30px 18px !important;

    background: #f5efdf !important;
    background-color: #f5efdf !important;

    overflow-x: auto !important;
    overflow-y: hidden !important;

    scroll-snap-type: x mandatory !important;
    scroll-padding-left: 18px !important;
    -webkit-overflow-scrolling: touch !important;
    scrollbar-width: none !important;
  }

  #available-tours #availability-list.tour-card-grid::-webkit-scrollbar {
    display: none !important;
  }

  #available-tours #availability-list.tour-card-grid > .tour-date-card {
    flex: 0 0 82% !important;
    width: 82% !important;
    max-width: 330px !important;
    min-width: 0 !important;

    margin-left: 0 !important;
    margin-right: 0 !important;

    scroll-snap-align: start !important;
  }

  #available-tours #availability-list.tour-card-grid::before {
    display: none !important;
    content: none !important;
  }

  #available-tours #availability-list.tour-card-grid::after {
    content: "" !important;
    flex: 0 0 18px !important;
  }
}

/* =========================================================
   MOBILE AVAILABLE TOURS — full-width transparent carousel strip
========================================================= */

@media (max-width: 860px) {
  #available-tours #availability-list.tour-card-grid {
    width: 100vw !important;
    max-width: 100vw !important;

    margin-left: calc(50% - 50vw) !important;
    margin-right: 0 !important;
    transform: none !important;

    padding-left: 24px !important;
    padding-right: 0 !important;

    background: transparent !important;
    background-color: transparent !important;
    box-shadow: none !important;
    border: none !important;

    scroll-padding-left: 24px !important;
  }

  #available-tours #availability-list.tour-card-grid::before {
    display: none !important;
    content: none !important;
  }

  #available-tours #availability-list.tour-card-grid::after {
    content: "" !important;
    flex: 0 0 24px !important;
    background: transparent !important;
  }
}

@media (max-width: 380px) {
  #available-tours #availability-list.tour-card-grid {
    padding-left: 18px !important;
    scroll-padding-left: 18px !important;
  }

  #available-tours #availability-list.tour-card-grid::after {
    flex-basis: 18px !important;
  }
}

/* =========================================================
   MOBILE AVAILABLE TOURS — background color match only
========================================================= */

@media (max-width: 860px) {
  #available-tours,
  #available-tours.section-sand {
    background: #f8f1df !important;
    background-color: #f8f1df !important;
  }

  #available-tours #availability-list.tour-card-grid,
  #available-tours #availability-list.tour-card-grid::before,
  #available-tours #availability-list.tour-card-grid::after {
    background: #f8f1df !important;
    background-color: #f8f1df !important;
    box-shadow: none !important;
    border-color: transparent !important;
  }
}

/* =========================================================
   MOBILE AVAILABLE TOURS — exact background match
========================================================= */

@media (max-width: 860px) {
  #available-tours,
  #available-tours.section-sand,
  #available-tours #availability-list.tour-card-grid,
  #available-tours #availability-list.tour-card-grid::before,
  #available-tours #availability-list.tour-card-grid::after {
    background: #f7f0df !important;
    background-color: #f7f0df !important;
  }
}

/* =========================================================
   MOBILE AVAILABLE TOURS — remove card halo/background
========================================================= */

@media (max-width: 860px) {
  #available-tours .tour-date-card {
    background: transparent !important;
    background-color: transparent !important;
    box-shadow: none !important;
  }

  #available-tours .tour-date-card::before,
  #available-tours .tour-date-card::after {
    background: transparent !important;
    background-color: transparent !important;
    box-shadow: none !important;
  }

  #available-tours .tour-card-content {
    background: #ffffff !important;
    background-color: #ffffff !important;
    border-radius: 0 0 28px 28px !important;
  }

  #available-tours .tour-card-image {
    border-radius: 28px 28px 0 0 !important;
  }
}

/* =========================================================
   MOBILE EXPERIENCE — compact dropdown cards
========================================================= */

@media (max-width: 860px) {
  .experience-restored .experience-steps {
    display: grid !important;
    grid-template-columns: 1fr !important;
    gap: 12px !important;
  }

  .experience-restored .experience-card {
    position: relative !important;

    display: grid !important;
    grid-template-columns: auto 1fr auto !important;
    align-items: center !important;
    column-gap: 12px !important;

    padding: 16px 18px !important;
    min-height: 0 !important;

    cursor: pointer !important;
  }

  .experience-restored .experience-card::after {
    content: "+" !important;
    grid-column: 3 !important;

    font-size: 1.35rem !important;
    font-weight: 700 !important;
    line-height: 1 !important;
    color: var(--jelen-orange, #c95f2d) !important;
  }

  .experience-restored .experience-card.is-open::after {
    content: "–" !important;
  }

  .experience-restored .experience-card .step-number {
    grid-column: 1 !important;
    margin: 0 !important;
  }

  .experience-restored .experience-card h3 {
    grid-column: 2 !important;
    margin: 0 !important;

    font-size: 1.02rem !important;
    line-height: 1.15 !important;
  }

  .experience-restored .experience-card p {
    grid-column: 1 / -1 !important;

    max-height: 0 !important;
    overflow: hidden !important;
    opacity: 0 !important;

    margin: 0 !important;
    padding: 0 !important;

    transition: max-height 220ms ease, opacity 180ms ease, margin-top 180ms ease !important;
  }

  .experience-restored .experience-card.is-open p {
    max-height: 180px !important;
    opacity: 1 !important;

    margin-top: 12px !important;
  }

  .experience-restored .experience-card:nth-child(even) {
    margin-top: 0 !important;
  }
}

/* =========================================================
   MOBILE EXPERIENCE — align plus and keep title row compact
========================================================= */

@media (max-width: 860px) {
  .experience-restored .experience-card {
    grid-template-columns: auto minmax(0, 1fr) auto !important;
    grid-template-rows: auto auto !important;
    align-items: center !important;
  }

  .experience-restored .experience-card::after {
    grid-column: 3 !important;
    grid-row: 1 !important;
    align-self: center !important;
    justify-self: end !important;
  }

  .experience-restored .experience-card .step-number {
    grid-column: 1 !important;
    grid-row: 1 !important;
    align-self: center !important;
  }

  .experience-restored .experience-card h3 {
    grid-column: 2 !important;
    grid-row: 1 !important;
    align-self: center !important;

    white-space: nowrap !important;
    overflow: hidden !important;
    text-overflow: ellipsis !important;
  }

  .experience-restored .experience-card p {
    grid-column: 1 / -1 !important;
    grid-row: 2 !important;
  }
}

/* =========================================================
   MOBILE GETTING HERE — alignment cleanup
========================================================= */

@media (max-width: 860px) {
  #getting-here {
    text-align: center !important;
    overflow: hidden !important;
  }

  #getting-here .container {
    width: min(100% - 32px, 420px) !important;
    max-width: 420px !important;
    margin-left: auto !important;
    margin-right: auto !important;
  }

  #getting-here .section-kicker {
    text-align: center !important;
    margin-left: auto !important;
    margin-right: auto !important;
  }

  #getting-here h2 {
    width: 100% !important;
    max-width: 360px !important;
    margin-left: auto !important;
    margin-right: auto !important;

    text-align: center !important;
    line-height: 0.92 !important;
  }

  #getting-here .getting-here-lead {
    width: 100% !important;
    max-width: 342px !important;
    margin-left: auto !important;
    margin-right: auto !important;

    text-align: center !important;
    line-height: 1.5 !important;
  }

  #getting-here .getting-here-grid,
  #getting-here .getting-here-grid-three {
    display: grid !important;
    grid-template-columns: 1fr !important;
    gap: 14px !important;

    width: 100% !important;
    max-width: 342px !important;
    margin: 34px auto 0 !important;
  }

  #getting-here .getting-card {
    width: 100% !important;
    margin: 0 !important;
    padding: 0 !important;

    border-radius: 28px !important;
    overflow: hidden !important;
  }

  #getting-here .getting-card summary {
    min-height: 92px !important;

    display: flex !important;
    align-items: center !important;
    justify-content: space-between !important;
    gap: 16px !important;

    padding: 22px 26px !important;

    text-align: left !important;
    list-style: none !important;
    cursor: pointer !important;
  }

  #getting-here .getting-card summary::-webkit-details-marker {
    display: none !important;
  }

  #getting-here .getting-card summary::after {
    content: "+" !important;

    width: 34px !important;
    height: 34px !important;
    min-width: 34px !important;

    display: inline-flex !important;
    align-items: center !important;
    justify-content: center !important;

    border-radius: 999px !important;
    background: rgba(217, 106, 43, 0.12) !important;
    color: var(--jelen-light-orange, #d96a2b) !important;

    font-size: 1.35rem !important;
    font-weight: 500 !important;
    line-height: 1 !important;
  }

  #getting-here .getting-card[open] summary::after {
    content: "–" !important;
  }

  #getting-here .getting-card > div {
    padding: 0 26px 26px !important;
    text-align: left !important;
  }

  #getting-here .getting-card-actions .btn {
    width: 100% !important;
  }
}

/* =========================================================
   MOBILE GETTING HERE — headline/button polish
========================================================= */

@media (max-width: 860px) {
  #getting-here h2 {
    max-width: 420px !important;
    font-size: clamp(2.55rem, 10.8vw, 3.75rem) !important;
    line-height: 0.95 !important;
    white-space: nowrap !important;
  }

  #getting-here .getting-card-actions .btn {
    display: flex !important;
    align-items: center !important;
    justify-content: center !important;
    text-align: center !important;
  }
}

@media (max-width: 380px) {
  #getting-here h2 {
    font-size: clamp(2.35rem, 10.2vw, 3.35rem) !important;
  }
}


/* =========================================================
   MOBILE GALLERY — headline + full-width transparent carousel
========================================================= */

@media (max-width: 860px) {
  #gallery.gallery-section {
    overflow: hidden !important;
  }

  #gallery .section-heading.centered {
    width: min(100% - 32px, 420px) !important;
    margin-left: auto !important;
    margin-right: auto !important;
    text-align: center !important;
  }

  #gallery .section-heading.centered h2 {
    width: 100% !important;
    max-width: 360px !important;
    margin-left: auto !important;
    margin-right: auto !important;

    font-size: clamp(2.7rem, 12vw, 4rem) !important;
    line-height: 0.95 !important;
    white-space: normal !important;
    overflow-wrap: normal !important;
  }

  #gallery .section-heading.centered p {
    max-width: 340px !important;
    margin-left: auto !important;
    margin-right: auto !important;
  }

  #gallery .carousel-shell {
    width: 100vw !important;
    max-width: 100vw !important;

    margin-left: calc(50% - 50vw) !important;
    margin-right: 0 !important;

    padding: 0 !important;

    background: transparent !important;
    background-color: transparent !important;
    box-shadow: none !important;
    border: none !important;

    overflow: hidden !important;
  }

  #gallery .gallery-carousel {
    display: flex !important;
    flex-wrap: nowrap !important;
    gap: 16px !important;

    width: 100vw !important;
    max-width: 100vw !important;

    padding: 8px 0 28px 24px !important;
    margin: 0 !important;

    background: transparent !important;
    background-color: transparent !important;
    box-shadow: none !important;
    border: none !important;

    overflow-x: auto !important;
    overflow-y: hidden !important;

    scroll-snap-type: x mandatory !important;
    scroll-padding-left: 24px !important;
    -webkit-overflow-scrolling: touch !important;
    scrollbar-width: none !important;
  }

  #gallery .gallery-carousel::-webkit-scrollbar {
    display: none !important;
  }

  #gallery .gallery-slide {
    flex: 0 0 82vw !important;
    width: 82vw !important;
    max-width: 330px !important;
    min-width: 0 !important;

    margin: 0 !important;

    background-color: transparent !important;
    box-shadow: none !important;

    scroll-snap-align: start !important;
  }

  #gallery .gallery-slide::before,
  #gallery .gallery-slide::after {
    background-color: transparent !important;
    box-shadow: none !important;
  }

  #gallery .gallery-carousel::after {
    content: "" !important;
    flex: 0 0 24px !important;
  }
}

@media (max-width: 380px) {
  #gallery .gallery-carousel {
    padding-left: 18px !important;
    scroll-padding-left: 18px !important;
    gap: 14px !important;
  }

  #gallery .gallery-slide {
    flex-basis: 84vw !important;
    width: 84vw !important;
    max-width: 84vw !important;
  }

  #gallery .section-heading.centered h2 {
    font-size: clamp(2.45rem, 11.2vw, 3.5rem) !important;
  }
}

/* =========================================================
   MOBILE GALLERY — stable visual classes for loop clones
========================================================= */

#gallery .gallery-slide.gallery-visual-1 {
  background:
    linear-gradient(rgba(26,58,92,0.04), rgba(26,58,92,0.42)),
    linear-gradient(135deg, #9CCAD7, #2E6E87) !important;
}

#gallery .gallery-slide.gallery-visual-2 {
  background:
    linear-gradient(rgba(26,58,92,0.04), rgba(26,58,92,0.42)),
    linear-gradient(135deg, #D8B069, #1A3A5C) !important;
}

#gallery .gallery-slide.gallery-visual-3 {
  background:
    linear-gradient(rgba(26,58,92,0.04), rgba(26,58,92,0.42)),
    linear-gradient(135deg, #D38B62, #10263D) !important;
}

/* =========================================================
   MOBILE BOOKING — order + headline color
========================================================= */

@media (max-width: 860px) {
  #booking .booking-copy h2 {
    color: var(--jelen-light-orange, #d96a2b) !important;
  }

  #booking .booking-layout {
    display: flex !important;
    flex-direction: column !important;
    gap: 26px !important;
  }

  #booking .booking-form {
    order: 1 !important;
  }

  #booking .booking-summary {
    order: 2 !important;
  }
}

/* =========================================================
   MOBILE BOOKING — passenger number steppers
========================================================= */

@media (max-width: 860px) {
  #booking .form-row.three {
    display: grid !important;
    grid-template-columns: 1fr !important;
    gap: 16px !important;
  }

  #booking .form-row.three label {
    display: grid !important;
    gap: 8px !important;
  }

  #booking .passenger-stepper {
    display: grid !important;
    grid-template-columns: 48px 1fr 48px !important;
    align-items: center !important;
    gap: 8px !important;
  }

  #booking .passenger-stepper input[type="number"] {
    width: 100% !important;
    height: 52px !important;
    text-align: center !important;
    font-size: 1.08rem !important;
    font-weight: 800 !important;
  }

  #booking .passenger-stepper-btn {
    width: 48px !important;
    height: 52px !important;

    display: inline-flex !important;
    align-items: center !important;
    justify-content: center !important;

    border: 0 !important;
    border-radius: 16px !important;
    background: var(--jelen-light-orange, #d96a2b) !important;
    color: #ffffff !important;

    font-size: 1.45rem !important;
    font-weight: 800 !important;
    line-height: 1 !important;
  }
}

/* =========================================================
   DESKTOP FINAL BUGFIX — getting here, booking steppers, gallery width
========================================================= */

@media (min-width: 861px) {
  /* 1) Center How to get to us desktop section */
  #getting-here {
    text-align: center !important;
  }

  #getting-here .container {
    width: min(100% - 10vw, 1360px) !important;
    max-width: 1360px !important;
    margin-left: auto !important;
    margin-right: auto !important;
    text-align: center !important;
  }

  #getting-here .getting-here-lead {
    max-width: 900px !important;
    margin-left: auto !important;
    margin-right: auto !important;
    text-align: center !important;
  }

  #getting-here .getting-here-grid,
  #getting-here .getting-here-grid-three {
    width: 100% !important;
    max-width: 1360px !important;
    margin-left: auto !important;
    margin-right: auto !important;

    display: grid !important;
    grid-template-columns: repeat(3, minmax(280px, 1fr)) !important;
    gap: 28px !important;
    justify-content: center !important;
  }

  /* 2) Fix booking passenger number controls on desktop */
  #booking .passenger-stepper {
    display: contents !important;
  }

  #booking .passenger-stepper-btn {
    display: none !important;
  }

  #booking .passenger-stepper input[type="number"] {
    width: 100% !important;
  }

  /* 3) Make desktop gallery full-width and remove shell/card halo */
  #gallery.gallery-section {
    overflow: hidden !important;
  }

  #gallery .carousel-shell {
    width: 100vw !important;
    max-width: 100vw !important;

    margin-left: calc(50% - 50vw) !important;
    margin-right: 0 !important;

    padding: 0 !important;

    background: transparent !important;
    background-color: transparent !important;
    box-shadow: none !important;
    border: 0 !important;

    overflow: hidden !important;
  }

  #gallery .gallery-carousel {
    width: 100vw !important;
    max-width: 100vw !important;

    margin: 0 !important;
    padding: 8px 0 44px 0 !important;

    background: transparent !important;
    background-color: transparent !important;
    box-shadow: none !important;
    border: 0 !important;
  }

  #gallery .gallery-slide {
    box-shadow: none !important;
    border: 0 !important;
  }

  #gallery .gallery-slide::before,
  #gallery .gallery-slide::after {
    box-shadow: none !important;
    border: 0 !important;
  }
}

/* =========================================================
   MOBILE HERO QA FIX — universal centering
========================================================= */

@media (max-width: 860px) {
  .hero > .hero-content.centered {
    left: 0 !important;
    right: 0 !important;

    width: 100% !important;
    max-width: none !important;

    padding-left: 16px !important;
    padding-right: 16px !important;

    align-items: center !important;
    text-align: center !important;
  }

  .hero > .hero-content.centered > .hero-title-two-line {
    width: 100% !important;
    max-width: min(92vw, 760px) !important;

    margin-left: auto !important;
    margin-right: auto !important;

    font-size: clamp(2.05rem, 7.4vw, 4.85rem) !important;
    line-height: 0.92 !important;
    letter-spacing: -0.018em !important;

    text-align: center !important;
    transform: none !important;
  }

  .hero > .hero-content.centered > .hero-title-two-line span {
    display: block !important;
    width: 100% !important;

    text-align: center !important;
    white-space: nowrap !important;
  }

  .hero > .hero-content.centered > .hero-lead {
    width: 100% !important;
    max-width: min(82vw, 690px) !important;

    margin-left: auto !important;
    margin-right: auto !important;

    text-align: center !important;
    line-height: 1.36 !important;
    transform: none !important;
  }
}

@media (max-width: 430px) {
  .hero > .hero-content.centered > .hero-title-two-line {
    max-width: 94vw !important;
    font-size: clamp(2rem, 7.1vw, 2.65rem) !important;
  }

  .hero > .hero-content.centered > .hero-lead {
    max-width: 90vw !important;
  }
}

/* =========================================================
   PRIVATE TOURS — universal heading centering
========================================================= */

#private-tours .private-copy {
  text-align: center !important;
}

#private-tours .private-copy .eyebrow,
#private-tours .private-copy h2,
#private-tours .private-copy > p {
  margin-left: auto !important;
  margin-right: auto !important;
  text-align: center !important;
}

#private-tours .private-copy h2 {
  max-width: 980px !important;
  line-height: 0.95 !important;
}

#private-tours .private-copy > p {
  max-width: 760px !important;
}

@media (max-width: 860px) {
  #private-tours .private-copy {
    width: 100% !important;
    max-width: none !important;
    text-align: center !important;
  }

  #private-tours .private-copy .eyebrow {
    text-align: center !important;
  }

  #private-tours .private-copy h2 {
    width: 100% !important;
    max-width: min(92vw, 620px) !important;

    font-size: clamp(3rem, 13vw, 5.6rem) !important;
    line-height: 0.92 !important;
    letter-spacing: -0.045em !important;

    text-align: center !important;
  }

  #private-tours .private-copy > p {
    width: 100% !important;
    max-width: min(88vw, 560px) !important;

    text-align: center !important;
    line-height: 1.5 !important;
  }
}

@media (max-width: 390px) {
  #private-tours .private-copy h2 {
    max-width: 94vw !important;
    font-size: clamp(2.75rem, 12.2vw, 4.7rem) !important;
  }

  #private-tours .private-copy > p {
    max-width: 90vw !important;
  }
}

/* =========================================================
   DESKTOP FAQ — prevent paired card from stretching open
========================================================= */

@media (min-width: 861px) {
  .faq-grid {
    align-items: start !important;
  }

  .faq-grid details,
  .faq-item,
  .faq-card {
    align-self: start !important;
    height: auto !important;
  }

  .faq-grid details:not([open]) {
    min-height: 0 !important;
  }
}

/* =========================================================
   HERO VIDEO — hide mobile browser play overlay when possible
========================================================= */

.hero-bg-video {
  pointer-events: none !important;
}

.hero-bg-video::-webkit-media-controls {
  display: none !important;
}

.hero-bg-video::-webkit-media-controls-panel {
  display: none !important;
}

.hero-bg-video::-webkit-media-controls-play-button {
  display: none !important;
}

.hero-bg-video::-webkit-media-controls-start-playback-button {
  display: none !important;
  -webkit-appearance: none !important;
}

/* =========================================================
   BOOKING PHONE VALIDATION MESSAGE
========================================================= */

.phone-error-message {
  margin-top: 8px;
  color: #c85f2a;
  font-size: 0.86rem;
  line-height: 1.35;
  font-weight: 700;
}

/* =========================================================
   BOOKING PASSENGERS — disable old custom stepper buttons
========================================================= */

#booking .passenger-stepper {
  display: contents !important;
}

#booking .passenger-stepper-btn {
  display: none !important;
  pointer-events: none !important;
}


/* =========================================================
   MOBILE BOOKING — visible passenger +/- buttons only on mobile
========================================================= */

#booking .mobile-passenger-control {
  display: contents !important;
}

#booking .mobile-passenger-button {
  display: none !important;
  pointer-events: none !important;
}

@media (max-width: 860px) {
  #booking .mobile-passenger-control {
    display: grid !important;
    grid-template-columns: 46px minmax(0, 1fr) 46px !important;
    gap: 8px !important;
    align-items: center !important;
    width: 100% !important;
  }

  #booking .mobile-passenger-control input[type="number"] {
    width: 100% !important;
    height: 52px !important;
    text-align: center !important;
    font-size: 1.05rem !important;
    font-weight: 800 !important;
  }

  #booking .mobile-passenger-button {
    display: flex !important;
    pointer-events: auto !important;
    align-items: center !important;
    justify-content: center !important;

    width: 46px !important;
    height: 52px !important;

    border: 0 !important;
    border-radius: 16px !important;
    background: var(--jelen-light-orange, #d96a2b) !important;
    color: #ffffff !important;

    font-size: 1.45rem !important;
    font-weight: 900 !important;
    line-height: 1 !important;
    cursor: pointer !important;
  }
}

@media (min-width: 861px) {
  #booking .mobile-passenger-control {
    display: contents !important;
  }

  #booking .mobile-passenger-button {
    display: none !important;
    pointer-events: none !important;
  }
}