/* Letvuna mobile experience pass - v42 */
html,
body {
  width: 100%;
  max-width: 100%;
  overflow-x: clip;
  text-size-adjust: 100%;
  -webkit-text-size-adjust: 100%;
}

body { min-width: 0; }
*, *::before, *::after { box-sizing: border-box; }
img, video, svg { max-width: 100%; }

@media (max-width: 760px) {
  :root { scroll-padding-top: 92px; }
  body { overflow-x: hidden; }

  .section-shell,
  .hero-content,
  .program-header,
  .section-heading,
  .section-heading.compact {
    width: min(100% - 28px, 1180px) !important;
    max-width: calc(100vw - 28px) !important;
    margin-inline: auto !important;
  }

  .intro-section,
  .pillars-section,
  .not-trip-section,
  .suitability-section,
  .institute-section,
  .lead-section,
  .route-section,
  .essence-section,
  .quick-lead-section,
  .program-section,
  .gallery-section,
  .faq-section,
  .fit-section,
  .info-section,
  .know-section,
  .guides-section,
  .guide-section,
  .weather-team-section,
  .video-section,
  .final-lead,
  .final-section {
    padding-block: 64px !important;
  }

  .journey-hero,
  .beach-hero,
  .death-hero,
  .desert-hero,
  .galilee-hero,
  .nepal-hero,
  .georgia-hero {
    min-height: auto !important;
    height: auto !important;
    align-items: flex-start !important;
    padding-top: 96px !important;
    overflow: hidden !important;
  }

  .hero-content {
    display: flex !important;
    flex-direction: column !important;
    gap: 24px !important;
    padding: 30px 0 70px !important;
  }

  .hero-copy { width: 100% !important; max-width: 100% !important; }
  .hero-pill,
  .kicker {
    font-size: 0.92rem !important;
    line-height: 1.35 !important;
  }

  .hero-copy h1,
  .georgia-hero-title,
  .hero-title,
  h1.hero-title {
    font-size: clamp(3.05rem, 15vw, 4.7rem) !important;
    line-height: 0.96 !important;
    letter-spacing: -0.035em !important;
    margin-bottom: 16px !important;
    max-width: 100% !important;
    overflow-wrap: anywhere;
  }

  .hero-copy h1 span { line-height: 1.02 !important; }
  .hero-subtitle {
    font-size: clamp(1.25rem, 5.2vw, 1.75rem) !important;
    line-height: 1.35 !important;
    margin-bottom: 14px !important;
  }

  .hero-text,
  .intro-copy p,
  .section-heading p,
  .program-header p,
  .day-content p,
  .lead-copy p,
  .final-copy p,
  .quick-lead-copy p,
  .info-copy p,
  .faq-answer,
  .fit-copy p {
    font-size: 1rem !important;
    line-height: 1.78 !important;
    max-width: 100% !important;
  }

  .hero-actions,
  .direct-actions {
    display: grid !important;
    grid-template-columns: 1fr !important;
    gap: 10px !important;
    width: 100% !important;
  }

  .cta-button,
  .ghost-button,
  .ghost-dark-button,
  .direct-actions a,
  .hero-actions a,
  .hero-actions button {
    width: 100% !important;
    min-height: 54px !important;
    justify-content: center !important;
    text-align: center !important;
    border-radius: 18px !important;
    font-size: 1rem !important;
    padding-inline: 18px !important;
  }

  .hero-facts {
    display: grid !important;
    grid-template-columns: repeat(2, minmax(0, 1fr)) !important;
    gap: 10px !important;
    width: 100% !important;
    max-width: 100% !important;
  }

  .hero-facts div {
    padding: 13px 12px !important;
    border-radius: 18px !important;
    min-width: 0 !important;
  }

  .hero-facts strong { font-size: 0.98rem !important; line-height: 1.25 !important; }
  .hero-facts small { font-size: 0.82rem !important; }

  .hero-visual,
  .hero-photo-stack {
    display: block !important;
    order: 2 !important;
    width: 100% !important;
    min-height: 315px !important;
    height: 315px !important;
    margin-top: 4px !important;
    overflow: visible !important;
  }

  .photo-card,
  .hero-card,
  .hero-frame {
    box-shadow: 0 18px 42px rgba(0,0,0,0.22) !important;
  }

  .hero-visual .photo-card.main,
  .hero-visual .photo-card.featured,
  .hero-visual .photo-card.large {
    width: 72% !important;
    height: 245px !important;
    inset: 32px auto auto 0 !important;
    transform: rotate(-2deg) !important;
    z-index: 2 !important;
  }

  .hero-visual .photo-card.one {
    width: 48% !important;
    height: 168px !important;
    inset: 0 auto auto 3% !important;
    transform: rotate(5deg) !important;
    z-index: 3 !important;
  }

  .hero-visual .photo-card.two {
    width: 52% !important;
    height: 180px !important;
    inset: auto 3% 0 auto !important;
    transform: rotate(-5deg) !important;
    z-index: 4 !important;
  }

  .hero-note,
  .hero-floating-note {
    width: min(76%, 280px) !important;
    left: 0 !important;
    right: auto !important;
    bottom: 18px !important;
    padding: 15px 16px !important;
    border-radius: 20px !important;
    font-size: 0.92rem !important;
    z-index: 6 !important;
  }

  .hero-scroll { display: none !important; }

  .intro-grid,
  .route-inner,
  .quick-lead-card,
  .lead-layout,
  .final-card,
  .fit-layout,
  .faq-layout,
  .info-layout,
  .program-layout,
  .weather-team-grid,
  .weather-team-grid.refined,
  .video-layout,
  .guide-grid,
  .guides-grid,
  .about-grid,
  .prep-card {
    grid-template-columns: 1fr !important;
    gap: 22px !important;
  }

  .section-heading h2,
  .intro-copy h2,
  .program-header h2,
  .quick-lead-copy h2,
  .lead-copy h2,
  .final-copy h2,
  .fit-copy h2,
  .faq-copy h2,
  .info-copy h2,
  .know-card h2,
  .guide-section h2,
  .video-copy h2 {
    font-size: clamp(2.05rem, 9.5vw, 3.2rem) !important;
    line-height: 1.05 !important;
    letter-spacing: -0.025em !important;
  }

  .essence-grid,
  .info-grid,
  .practical-grid,
  .team-grid,
  .team-grid.refined,
  .weather-mini,
  .weather-mini.refined,
  .gallery-grid,
  .gifts-grid,
  .form-grid,
  .quick-lead-form,
  .final-form,
  .modal-lead-form {
    grid-template-columns: 1fr !important;
  }

  .quick-lead-card,
  .final-card,
  .lead-card,
  .know-card,
  .graffiti-card,
  .weather-card,
  .weather-card.refined,
  .team-card,
  .team-card.refined,
  .lead-modal-panel {
    padding: 24px !important;
    border-radius: 26px !important;
  }

  .form-field.full,
  .email-field.full,
  .consent.full,
  .cta-button.full,
  .form-note.full {
    grid-column: 1 / -1 !important;
  }

  input,
  textarea,
  select,
  button {
    font-size: 16px !important;
  }

  .form-field input,
  .form-field textarea {
    min-height: 52px !important;
    border-radius: 16px !important;
  }

  .consent {
    align-items: flex-start !important;
    gap: 10px !important;
    line-height: 1.5 !important;
  }

  .program-layout { align-items: start !important; }
  .route-nav,
  .program-nav,
  .timeline-nav {
    position: sticky !important;
    top: 82px !important;
    z-index: 15 !important;
    width: 100% !important;
    max-width: calc(100vw - 28px) !important;
    height: auto !important;
    padding: 10px !important;
    border-radius: 22px !important;
    overflow-x: auto !important;
    overflow-y: hidden !important;
    -webkit-overflow-scrolling: touch !important;
  }

  .route-nav-inner {
    min-width: max-content !important;
    width: max-content !important;
    height: 48px !important;
  }

  .route-dots {
    position: relative !important;
    display: flex !important;
    flex-direction: row !important;
    gap: 8px !important;
    justify-content: flex-start !important;
    align-items: center !important;
    inset: auto !important;
  }

  .route-line { display: none !important; }
  .route-dot {
    flex: 0 0 auto !important;
    width: 40px !important;
    height: 40px !important;
    font-size: 0.84rem !important;
  }

  .days-stack { gap: 18px !important; }
  .day-card {
    grid-template-columns: 1fr !important;
    border-radius: 26px !important;
    overflow: hidden !important;
    transform: none !important;
  }

  .day-image img {
    height: 230px !important;
    min-height: 0 !important;
    object-fit: cover !important;
  }

  .day-content { padding: 22px !important; }
  .day-content h3,
  .route-card h3 {
    font-size: clamp(1.65rem, 7vw, 2.35rem) !important;
    line-height: 1.08 !important;
  }

  .day-meta {
    gap: 7px !important;
    font-size: 0.88rem !important;
  }

  .day-meta span,
  .day-meta strong {
    padding: 7px 10px !important;
    border-radius: 999px !important;
  }

  .gallery-grid { gap: 12px !important; }
  .gallery-grid img,
  .gallery-tile img {
    height: 240px !important;
    object-fit: cover !important;
  }

  .weather-visual { height: 190px !important; }
  .team-grid.refined article {
    grid-template-columns: 76px 1fr !important;
    text-align: right !important;
  }
  .team-grid.refined img { width: 76px !important; height: 76px !important; margin: 0 !important; }

  .video-frame video,
  .video-frame iframe {
    aspect-ratio: 16 / 9 !important;
    width: 100% !important;
  }

  .floating-lead-cta {
    left: 12px !important;
    right: 12px !important;
    bottom: calc(12px + env(safe-area-inset-bottom, 0px)) !important;
    width: auto !important;
    z-index: 50 !important;
  }

  .floating-lead-button {
    width: 100% !important;
    min-height: 58px !important;
    border-radius: 20px !important;
    display: flex !important;
    justify-content: space-between !important;
    padding: 12px 16px !important;
  }

  .floating-lead-button span { font-size: 0.86rem !important; }
  .floating-lead-button strong { font-size: 1rem !important; }

  .lead-modal {
    padding: 10px !important;
  }

  .lead-modal-panel {
    width: calc(100vw - 20px) !important;
    max-height: calc(100svh - 20px) !important;
    overflow-y: auto !important;
    grid-template-columns: 1fr !important;
  }

  .lead-modal-close {
    top: 10px !important;
    left: 10px !important;
    width: 42px !important;
    height: 42px !important;
  }

  .route-section { height: auto !important; }
  .route-sticky { position: relative !important; min-height: auto !important; }
  .route-inner { padding: 64px 0 !important; }
  .route-visual { min-height: auto !important; display: grid !important; gap: 18px !important; }
  .route-card {
    position: relative !important;
    width: 100% !important;
    right: auto !important;
    left: auto !important;
    top: auto !important;
    transform: none !important;
    padding: 22px !important;
    border-radius: 26px !important;
    max-height: none !important;
  }
  .route-mini-stats { display: grid !important; grid-template-columns: 1fr 1fr !important; gap: 8px !important; }
}

@media (max-width: 420px) {
  .section-shell,
  .hero-content,
  .program-header,
  .section-heading,
  .section-heading.compact {
    width: min(100% - 22px, 1180px) !important;
    max-width: calc(100vw - 22px) !important;
  }

  .hero-copy h1,
  .georgia-hero-title,
  .hero-title,
  h1.hero-title {
    font-size: clamp(2.8rem, 14.2vw, 4.15rem) !important;
  }

  .hero-facts { grid-template-columns: 1fr 1fr !important; }
  .hero-visual { height: 285px !important; min-height: 285px !important; }
  .quick-lead-card,
  .final-card,
  .lead-card,
  .know-card,
  .graffiti-card,
  .weather-card,
  .weather-card.refined,
  .team-card,
  .team-card.refined,
  .lead-modal-panel { padding: 20px !important; }
}

@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after {
    animation-duration: 0.01ms !important;
    animation-iteration-count: 1 !important;
    scroll-behavior: auto !important;
  }
}

/* v69 - journey mobile polish: separated hero photos + side progress while scrolling */
@media (max-width: 760px) {
  /* HERO: stop the 3 image stack from covering itself on journey pages */
  .journey-hero .hero-visual,
  .beach-hero .hero-visual,
  .death-hero .hero-visual,
  .desert-hero .hero-visual,
  .galilee-hero .hero-visual,
  .nepal-hero .hero-visual,
  .georgia-hero .hero-visual {
    display: grid !important;
    grid-template-columns: minmax(0, 1fr) minmax(0, 1fr) !important;
    gap: 12px !important;
    width: min(100%, 520px) !important;
    height: auto !important;
    min-height: 0 !important;
    margin: 12px auto 0 !important;
    overflow: visible !important;
    align-items: stretch !important;
  }

  .journey-hero .hero-visual .photo-card,
  .beach-hero .hero-visual .photo-card,
  .death-hero .hero-visual .photo-card,
  .desert-hero .hero-visual .photo-card,
  .galilee-hero .hero-visual .photo-card,
  .nepal-hero .hero-visual .photo-card,
  .georgia-hero .hero-visual .photo-card {
    position: relative !important;
    inset: auto !important;
    top: auto !important;
    right: auto !important;
    bottom: auto !important;
    left: auto !important;
    z-index: 1 !important;
    width: 100% !important;
    height: 158px !important;
    min-height: 0 !important;
    margin: 0 !important;
    transform: none !important;
    border-radius: 22px !important;
    border-width: 5px !important;
  }

  .journey-hero .hero-visual .photo-card.main,
  .beach-hero .hero-visual .photo-card.main,
  .death-hero .hero-visual .photo-card.main,
  .desert-hero .hero-visual .photo-card.main,
  .galilee-hero .hero-visual .photo-card.main,
  .nepal-hero .hero-visual .photo-card.main,
  .georgia-hero .hero-visual .photo-card.main {
    grid-column: 1 / -1 !important;
    height: 215px !important;
  }

  .journey-hero .hero-visual .photo-card img,
  .beach-hero .hero-visual .photo-card img,
  .death-hero .hero-visual .photo-card img,
  .desert-hero .hero-visual .photo-card img,
  .galilee-hero .hero-visual .photo-card img,
  .nepal-hero .hero-visual .photo-card img,
  .georgia-hero .hero-visual .photo-card img {
    width: 100% !important;
    height: 100% !important;
    object-fit: cover !important;
  }

  .journey-hero .hero-note,
  .beach-hero .hero-note,
  .death-hero .hero-note,
  .desert-hero .hero-note,
  .galilee-hero .hero-note,
  .nepal-hero .hero-note,
  .georgia-hero .hero-note {
    position: relative !important;
    grid-column: 1 / -1 !important;
    inset: auto !important;
    width: 100% !important;
    max-width: 100% !important;
    margin: 0 !important;
    border-radius: 22px !important;
    z-index: 2 !important;
  }

  /* PROGRAM: keep the process visible beside the days, not stuck as a top horizontal scroller */
  .program-layout {
    display: grid !important;
    grid-template-columns: 56px minmax(0, 1fr) !important;
    gap: 12px !important;
    align-items: start !important;
    direction: ltr !important;
    overflow: visible !important;
  }

  .program-layout > .days-stack,
  .program-layout > .program-days {
    grid-column: 2 !important;
    grid-row: 1 !important;
    min-width: 0 !important;
    direction: rtl !important;
  }

  .program-layout > .route-nav,
  .program-layout > .program-sticky,
  .program-layout > .wave-nav {
    grid-column: 1 !important;
    grid-row: 1 !important;
    position: sticky !important;
    top: 88px !important;
    align-self: start !important;
    width: 52px !important;
    max-width: 52px !important;
    height: calc(100svh - 118px) !important;
    min-height: 320px !important;
    max-height: 560px !important;
    margin: 0 !important;
    padding: 10px 0 !important;
    border-radius: 999px !important;
    overflow: visible !important;
    overflow-x: visible !important;
    overflow-y: visible !important;
    z-index: 20 !important;
    background: rgba(21, 45, 38, 0.66) !important;
    border: 1px solid rgba(255, 255, 255, 0.18) !important;
    backdrop-filter: blur(14px) !important;
    box-shadow: 0 18px 45px rgba(0, 0, 0, 0.18) !important;
  }

  .program-layout > .route-nav .route-nav-inner,
  .program-layout > .route-nav-inner {
    position: relative !important;
    width: 52px !important;
    min-width: 52px !important;
    max-width: 52px !important;
    height: 100% !important;
    min-height: 0 !important;
    margin: 0 auto !important;
    display: flex !important;
    flex-direction: column !important;
    align-items: center !important;
    justify-content: space-between !important;
    gap: 10px !important;
  }

  .program-layout > .route-nav svg,
  .program-layout > .wave-nav svg {
    display: none !important;
  }

  .program-layout > .route-nav .route-nav-inner::before,
  .program-layout > .wave-nav::before {
    content: "" !important;
    position: absolute !important;
    top: 20px !important;
    bottom: 20px !important;
    left: 50% !important;
    width: 4px !important;
    transform: translateX(-50%) !important;
    border-radius: 999px !important;
    background: rgba(255,255,255,0.22) !important;
    pointer-events: none !important;
  }

  .program-layout > .route-nav .route-nav-inner::after,
  .program-layout > .wave-nav::after {
    content: "" !important;
    position: absolute !important;
    top: 20px !important;
    left: 50% !important;
    width: 4px !important;
    height: calc(var(--route-progress, var(--wave-progress, 0)) * (100% - 40px)) !important;
    transform: translateX(-50%) !important;
    border-radius: 999px !important;
    background: linear-gradient(180deg, #f5dfc2, #78a38f) !important;
    pointer-events: none !important;
  }

  .program-layout > .route-nav .route-line {
    display: none !important;
  }

  .program-layout > .route-nav .route-dots {
    position: relative !important;
    inset: auto !important;
    display: flex !important;
    flex-direction: column !important;
    justify-content: space-between !important;
    align-items: center !important;
    gap: 10px !important;
    width: 52px !important;
    height: 100% !important;
    z-index: 2 !important;
  }

  .program-layout > .route-nav .route-dot,
  .program-layout > .route-nav .route-nav-inner > .route-dot,
  .program-layout > .wave-nav .wave-dot {
    position: relative !important;
    inset: auto !important;
    top: auto !important;
    right: auto !important;
    bottom: auto !important;
    left: auto !important;
    flex: 0 0 auto !important;
    width: 36px !important;
    height: 36px !important;
    min-width: 36px !important;
    min-height: 36px !important;
    padding: 0 !important;
    font-size: 0.82rem !important;
    line-height: 1 !important;
    display: grid !important;
    place-items: center !important;
    transform: none !important;
    z-index: 3 !important;
  }

  .program-layout > .route-nav .route-dot.is-active,
  .program-layout > .route-nav .route-nav-inner > .route-dot.is-active,
  .program-layout > .wave-nav .wave-dot.is-active {
    transform: scale(1.13) !important;
  }

  .program-layout > .program-sticky {
    display: flex !important;
    flex-direction: column !important;
    align-items: center !important;
    justify-content: space-between !important;
    min-height: 320px !important;
  }

  .program-layout > .program-sticky .program-line {
    display: block !important;
    position: absolute !important;
    top: 20px !important;
    bottom: 20px !important;
    left: 50% !important;
    right: auto !important;
    width: 4px !important;
    transform: translateX(-50%) !important;
    border-radius: 999px !important;
    opacity: 0.85 !important;
  }

  .program-layout > .program-sticky .program-dot {
    width: 42px !important;
    min-height: 42px !important;
    padding: 0 !important;
    display: grid !important;
    place-items: center !important;
    z-index: 3 !important;
  }

  .program-layout > .program-sticky .program-dot span {
    width: 34px !important;
    height: 34px !important;
    font-size: 0.86rem !important;
  }

  .program-layout > .program-sticky .program-dot small {
    display: none !important;
  }

  .program-layout .day-card,
  .program-layout .program-day {
    width: 100% !important;
    min-width: 0 !important;
    scroll-margin-top: 96px !important;
  }
}

@media (max-width: 420px) {
  .program-layout {
    grid-template-columns: 48px minmax(0, 1fr) !important;
    gap: 10px !important;
  }

  .program-layout > .route-nav,
  .program-layout > .program-sticky,
  .program-layout > .wave-nav,
  .program-layout > .route-nav .route-nav-inner,
  .program-layout > .route-nav .route-dots {
    width: 46px !important;
    max-width: 46px !important;
  }

  .program-layout > .route-nav .route-dot,
  .program-layout > .route-nav .route-nav-inner > .route-dot,
  .program-layout > .wave-nav .wave-dot {
    width: 32px !important;
    height: 32px !important;
    min-width: 32px !important;
    min-height: 32px !important;
    font-size: 0.76rem !important;
  }

  .journey-hero .hero-visual .photo-card.main,
  .beach-hero .hero-visual .photo-card.main,
  .death-hero .hero-visual .photo-card.main,
  .desert-hero .hero-visual .photo-card.main,
  .galilee-hero .hero-visual .photo-card.main,
  .nepal-hero .hero-visual .photo-card.main,
  .georgia-hero .hero-visual .photo-card.main {
    height: 195px !important;
  }

  .journey-hero .hero-visual .photo-card,
  .beach-hero .hero-visual .photo-card,
  .death-hero .hero-visual .photo-card,
  .desert-hero .hero-visual .photo-card,
  .galilee-hero .hero-visual .photo-card,
  .nepal-hero .hero-visual .photo-card,
  .georgia-hero .hero-visual .photo-card {
    height: 142px !important;
  }
}