/* The Local Path — phone & tablet layout
   Loaded last. This is the mobile design, not a scaled desktop page. */

html {
  -webkit-text-size-adjust: 100%;
  text-size-adjust: 100%;
}

@media screen and (max-width: 1023px) {
  html {
    font-size: 18px !important;
    -webkit-text-size-adjust: 100%;
    text-size-adjust: 100%;
  }

  body,
  html.index-page body,
  .index-page body {
    font-size: 18px !important;
    line-height: 1.6 !important;
  }

  :root {
    --fs-1: 2.15rem;
    --fs-2: 1.7rem;
    --fs-3: 1.35rem;
    --fs-4: 1.2rem;
    --fs-5: 1.05rem;
    --fs-6: 1rem;
    --fs-7: 0.95rem;
    --fs-8: 0.9rem;
  }
  html,
  body {
    width: 100% !important;
    max-width: 100% !important;
    min-width: 0 !important;
    overflow-x: hidden !important;
    overflow-y: auto !important;
    height: auto !important;
    position: relative !important;
  }

  html.index-page,
  html.index-page body,
  .index-page body {
    position: relative !important;
    overflow-x: hidden !important;
    overflow-y: auto !important;
    height: auto !important;
    min-height: 100% !important;
    width: 100% !important;
    animation: none !important;
    transform: none !important;
  }

  html.index-page body::after,
  .index-page body::after {
    display: none !important;
  }

  img,
  video,
  iframe,
  svg {
    max-width: 100% !important;
    height: auto;
  }

  .container,
  .container-fluid,
  .header-top .container {
    width: 100% !important;
    max-width: 100% !important;
    padding-inline: 20px !important;
  }

  /* ----- Header: logo + menu only ----- */
  .header,
  .index-page .header {
    position: sticky !important;
    top: 0 !important;
    z-index: 200 !important;
    width: 100% !important;
    background: #fff !important;
    padding-top: 0 !important;
    animation: none !important;
    transform: none !important;
  }

  .header-top,
  .index-page .header-top,
  .header.active .header-top,
  .index-page .header.active .header-top {
    position: relative !important;
    inset: auto !important;
    width: 100% !important;
    padding-block: 10px !important;
    background: #fff !important;
    border-bottom: 1px solid rgba(26, 26, 26, 0.08) !important;
  }

  .header-bar,
  .header-top .container,
  .index-page .header-top .container {
    display: flex !important;
    flex-direction: row !important;
    justify-content: space-between !important;
    align-items: center !important;
    gap: 12px !important;
    grid-template-columns: none !important;
  }

  .logo-brand {
    gap: 8px !important;
  }

  .logo-img,
  .index-page .logo-img {
    height: 34px !important;
    width: auto !important;
  }

  .logo-text {
    flex-direction: row !important;
    flex-wrap: wrap !important;
    gap: 0.28em !important;
    align-items: baseline !important;
  }

  .logo-main,
  .index-page .logo-main {
    font-size: 13px !important;
    line-height: 1 !important;
    letter-spacing: 0.08em !important;
    color: #1a1a1a !important;
    text-shadow: none !important;
  }

  .nav-open-btn,
  .index-page .nav-open-btn {
    display: flex !important;
    align-items: center !important;
    justify-content: center !important;
    width: 44px !important;
    height: 44px !important;
    font-size: 28px !important;
    color: #1a1a1a !important;
    background: transparent !important;
    flex-shrink: 0 !important;
  }

  .header-btn-group {
    display: contents;
  }

  /* Drawer — never a horizontal desktop nav */
  .header .navbar,
  .index-page .header .navbar {
    position: fixed !important;
    top: 0 !important;
    right: 0 !important;
    left: auto !important;
    bottom: 0 !important;
    width: min(300px, 86vw) !important;
    max-width: 86vw !important;
    height: 100dvh !important;
    margin: 0 !important;
    display: flex !important;
    flex-direction: column !important;
    background: #fff !important;
    transform: translateX(110%) !important;
    visibility: hidden !important;
    pointer-events: none !important;
    z-index: 400 !important;
    overflow-y: auto !important;
    box-shadow: -16px 0 40px rgba(20, 28, 22, 0.18);
  }

  .header .navbar.active,
  .index-page .header .navbar.active {
    transform: translateX(0) !important;
    visibility: visible !important;
    pointer-events: auto !important;
  }

  .navbar-top {
    display: flex !important;
    justify-content: space-between !important;
    align-items: center !important;
    padding: 16px !important;
  }

  .navbar-list {
    display: block !important;
    width: 100% !important;
  }

  .navbar-list li {
    display: block !important;
    border-bottom: 1px solid #efeae0 !important;
  }

  .navbar-link,
  .index-page .navbar-link {
    display: flex !important;
    align-items: center !important;
    min-height: 52px !important;
    padding: 12px 20px !important;
    font-size: 18px !important;
    color: #2d5139 !important;
    background: transparent !important;
  }

  .overlay {
    display: block !important;
    z-index: 350 !important;
  }

  /* ----- Home hero: cinematic overlay, one screen ----- */
  .hero-split {
    overflow: hidden !important;
    background: #142016 !important;
  }

  .hero-split__stage {
    position: relative !important;
    height: min(70dvh, 540px) !important;
    min-height: 380px !important;
    max-height: 560px !important;
    overflow: hidden !important;
  }

  .hero-split__slide {
    position: absolute !important;
    inset: 0 !important;
    width: 100% !important;
    height: 100% !important;
    display: none !important;
    opacity: 0;
  }

  .hero-split__slide.is-active {
    display: block !important;
    opacity: 1 !important;
    visibility: visible !important;
    pointer-events: auto !important;
  }

  .hero-split__visual {
    position: absolute !important;
    inset: 0 !important;
    width: 100% !important;
    height: 100% !important;
    min-height: 0 !important;
    overflow: hidden !important;
    background: #2d4034 !important;
  }

  .hero-split__photo {
    position: absolute !important;
    inset: 0 !important;
    display: block !important;
    width: 100% !important;
    height: 100% !important;
    min-height: 0 !important;
    max-height: none !important;
    aspect-ratio: auto !important;
    object-fit: cover !important;
    object-position: center 40% !important;
  }

  .hero-split__fade {
    display: block !important;
    position: absolute !important;
    inset: 0 !important;
    height: auto !important;
    z-index: 1 !important;
    pointer-events: none !important;
    background:
      linear-gradient(
        to top,
        rgba(14, 22, 16, 0.92) 0%,
        rgba(14, 22, 16, 0.55) 38%,
        rgba(14, 22, 16, 0.18) 62%,
        rgba(14, 22, 16, 0.12) 100%
      ) !important;
  }

  .hero-split__cards {
    position: absolute !important;
    top: 14px !important;
    left: 14px !important;
    right: 14px !important;
    bottom: auto !important;
    z-index: 2 !important;
    display: block !important;
    width: auto !important;
    max-width: min(22rem, calc(100% - 28px)) !important;
    margin: 0 !important;
    padding: 0 !important;
    background: transparent !important;
    grid-template-columns: 1fr !important;
  }

  .hero-split__brand-card {
    display: none !important;
  }

  .hero-split__dest-card {
    display: grid !important;
    gap: 2px !important;
    width: max-content !important;
    max-width: 100% !important;
    padding: 10px 14px !important;
    border-radius: 16px !important;
    background: rgba(255, 255, 255, 0.92) !important;
    -webkit-backdrop-filter: blur(16px);
    backdrop-filter: blur(16px);
    box-shadow: 0 10px 28px rgba(14, 22, 16, 0.28) !important;
  }

  .hero-split__dest-place {
    font-size: 14px !important;
    white-space: nowrap !important;
    overflow: hidden !important;
    text-overflow: ellipsis !important;
  }

  .hero-split__dest-meta {
    font-size: 12px !important;
    white-space: nowrap !important;
    overflow: hidden !important;
    text-overflow: ellipsis !important;
  }

  .hero-split__dest-tags {
    display: none !important;
  }

  .hero-split__copy {
    position: absolute !important;
    left: 0 !important;
    right: 0 !important;
    bottom: 0 !important;
    z-index: 3 !important;
    display: flex !important;
    flex-direction: column !important;
    align-items: flex-start !important;
    justify-content: flex-end !important;
    gap: 0 !important;
    padding: 0 20px max(22px, env(safe-area-inset-bottom)) !important;
    background: transparent !important;
  }

  .hero-split__title {
    position: absolute !important;
    width: 1px !important;
    height: 1px !important;
    padding: 0 !important;
    margin: -1px !important;
    overflow: hidden !important;
    clip: rect(0, 0, 0, 0) !important;
    white-space: nowrap !important;
    border: 0 !important;
  }

  .hero-split__tagline {
    margin: 0 0 16px !important;
    max-width: 12em !important;
    font-family: var(--ff-display) !important;
    font-size: clamp(1.65rem, 7.4vw, 2.2rem) !important;
    font-weight: 500 !important;
    line-height: 1.12 !important;
    letter-spacing: -0.035em !important;
    color: #fffef8 !important;
    text-shadow: 0 8px 28px rgba(0, 0, 0, 0.35);
  }

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

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

  .hero-split__cta {
    display: inline-flex !important;
    order: 0 !important;
    width: auto !important;
    max-width: none !important;
    min-width: 0 !important;
    min-height: 48px !important;
    margin: 0 !important;
    padding: 0.85rem 1.4rem !important;
    font-size: 16px !important;
    background: #fffef8 !important;
    color: #24352b !important;
    box-shadow: 0 10px 28px rgba(0, 0, 0, 0.28) !important;
  }

  .hero-split__cta:hover,
  .hero-split__cta:focus-visible {
    background: #efeae0 !important;
    color: #1a1a1a !important;
  }

  .hero-split__stats {
    padding: 16px 20px 18px !important;
    background: #f4f4f0 !important;
    border-top: 0 !important;
  }

  .hero-split__stats-inner {
    display: grid !important;
    grid-template-columns: 1fr 1fr !important;
    gap: 12px 16px !important;
  }

  .hero-split__stat {
    align-items: flex-start !important;
    gap: 0 !important;
    font-size: 13px !important;
    color: #5c5c5c !important;
  }

  .hero-split__stat-icon {
    display: none !important;
  }

  .hero-split__stat > span:last-child {
    display: flex !important;
    flex-direction: column !important;
    gap: 1px !important;
  }

  .hero-split__stat strong {
    display: block !important;
    margin: 0 !important;
    font-size: 18px !important;
    font-weight: 700 !important;
    line-height: 1.15 !important;
    color: #1a1a1a !important;
  }

  /* ----- Rest of homepage ----- */
  .local-store__shell,
  .home-split,
  .feature-rail,
  .dest-row {
    display: grid !important;
    grid-template-columns: 1fr !important;
    gap: 20px !important;
  }

  .local-store__copy,
  .home-section .container,
  .home-intro {
    padding-inline: 20px !important;
    max-width: 100% !important;
  }

  .local-store__copy {
    padding-block: 40px !important;
  }

  .local-store__copy .section-title,
  .section-title,
  .h2.section-title {
    font-size: 28px !important;
    line-height: 1.2 !important;
    max-width: none !important;
  }

  .section-text,
  .local-store__copy .section-text {
    font-size: 18px !important;
    max-width: none !important;
  }

  .local-store__ledger li {
    grid-template-columns: 1fr !important;
  }

  .local-store__note {
    text-align: left !important;
    white-space: normal !important;
  }

  .local-store__visual img {
    height: 220px !important;
  }

  .feature-tile figure {
    aspect-ratio: 16 / 10 !important;
  }

  .feature-tile h3 {
    font-size: 22px !important;
  }

  .why-row,
  .experience-row,
  .editorial-item,
  .experience-item,
  .about-card {
    grid-template-columns: 1fr !important;
  }

  .home-section {
    padding-block: 48px !important;
  }

  .btn,
  .btn-primary {
    min-height: 52px !important;
    font-size: 18px !important;
  }

  /* Inner pages */
  .hero:not(.hero-slider-root) {
    min-height: 0 !important;
    padding: 40px 0 32px !important;
  }

  .hero-title {
    font-size: 32px !important;
    max-width: none !important;
  }

  .hero-text {
    font-size: 18px !important;
  }

  .footer-top .container,
  .contact-modern-grid,
  .gallery-parallax-grid {
    grid-template-columns: 1fr !important;
  }

  .footer-form .input-field,
  .footer-form .btn,
  .form-wrapper {
    width: 100% !important;
    min-width: 0 !important;
  }

  .form-wrapper {
    display: flex !important;
    flex-direction: column !important;
    gap: 10px !important;
  }

  /* ----- Every inner page ----- */
  main,
  article,
  section,
  footer,
  .package,
  .page-destinations,
  .band-cta,
  .cta,
  .home-section,
  .contact-form-section {
    width: 100% !important;
    max-width: 100% !important;
    min-width: 0 !important;
  }

  .h1,
  .hero-title,
  .h1.hero-title {
    font-size: 32px !important;
    line-height: 1.15 !important;
    max-width: 100% !important;
  }

  .h2,
  .h3,
  .dest-copy h3,
  .editorial-item h3,
  .about-card .card-title {
    max-width: 100% !important;
  }

  .hero,
  .hero-destinations,
  .hero-experiences,
  .hero:not(.hero-slider-root) {
    min-height: 0 !important;
    width: 100% !important;
    padding: 48px 0 36px !important;
    background-position: center !important;
  }

  .package,
  .gallery,
  .popular,
  .cta,
  .band-cta,
  .home-section,
  .contact-form-section {
    padding-block: 40px !important;
    padding-inline: 0 !important;
  }

  .dest-list,
  .dest-row,
  .dest-copy,
  .page-destinations [data-reveal] {
    opacity: 1 !important;
    transform: none !important;
    visibility: visible !important;
    height: auto !important;
  }

  .dest-list {
    display: grid !important;
    gap: 36px !important;
    margin-top: 24px !important;
    list-style: none !important;
    padding: 0 !important;
  }

  .dest-row,
  .dest-row:nth-child(even) {
    display: grid !important;
    grid-template-columns: 1fr !important;
    direction: ltr !important;
    gap: 16px !important;
  }

  .dest-row figure {
    width: 100% !important;
    aspect-ratio: 16 / 10 !important;
  }

  .dest-copy h3 {
    font-size: 24px !important;
  }

  .dest-meta {
    gap: 10px 14px !important;
  }

  .dest-price {
    flex-direction: column !important;
    align-items: flex-start !important;
    gap: 10px !important;
  }

  .editorial-list,
  .editorial-item,
  .experience-item,
  .about-content,
  .about-card,
  .why-row,
  .experience-row,
  .stat-figures {
    display: grid !important;
    grid-template-columns: 1fr !important;
    width: 100% !important;
  }

  .editorial-item h3,
  .experience-item .h3 {
    font-size: 22px !important;
  }

  .editorial-item p,
  .card-text,
  p.section-text,
  .why-row p,
  .experience-row p,
  .dest-copy .card-text,
  .footer-text,
  .contact-text,
  .form-text,
  .copyright,
  .dest-meta,
  .reviews {
    font-size: 18px !important;
    line-height: 1.55 !important;
  }

  .stat-figure .value {
    font-size: 36px !important;
  }

  .partner-quote blockquote {
    font-size: 20px !important;
  }

  .gallery-list,
  .gallery-parallax-grid,
  .contact-modern-grid,
  .about-content {
    grid-template-columns: 1fr !important;
    width: 100% !important;
  }

  .gallery-item:nth-child(3) {
    grid-area: auto !important;
  }

  .gallery-parallax-item img,
  .gallery-image img {
    width: 100% !important;
    height: 220px !important;
    object-fit: cover !important;
  }

  .contact-form {
    width: 100% !important;
    max-width: 100% !important;
    padding: 0 !important;
    margin: 0 !important;
    box-shadow: none !important;
    border: none !important;
    background: transparent !important;
  }

  .contact-form .form-grid,
  .form-grid {
    display: grid !important;
    grid-template-columns: 1fr !important;
    gap: 16px !important;
    margin-top: 24px !important;
  }

  .contact-form .input-wrapper,
  .contact-form .input-wrapper.full-width {
    grid-column: 1 / -1 !important;
    width: 100% !important;
  }

  .contact-form .input-field,
  .contact-form textarea,
  .input-field,
  select,
  textarea {
    width: 100% !important;
    max-width: 100% !important;
    font-size: 18px !important;
  }

  .social-links-modern,
  .social-links-bold {
    justify-content: flex-start !important;
    flex-wrap: wrap !important;
  }

  .contact-item,
  .footer-contact ul li {
    display: flex !important;
    align-items: flex-start !important;
    gap: 10px !important;
    min-width: 0 !important;
  }

  .footer-top .container,
  .footer-bottom .container,
  .footer-bottom {
    display: flex !important;
    flex-direction: column !important;
    align-items: flex-start !important;
    gap: 28px !important;
    width: 100% !important;
    grid-template-columns: 1fr !important;
  }

  .footer-bottom-list {
    flex-direction: column !important;
    gap: 10px !important;
  }

  .footer-text,
  .contact-text,
  .form-text,
  .copyright {
    max-width: 100% !important;
  }

  .white-space-nowrap,
  .local-store__note {
    white-space: normal !important;
  }

  .go-top {
    right: 16px !important;
    bottom: 16px !important;
  }

  table {
    display: block !important;
    width: 100% !important;
    overflow-x: auto !important;
  }
}

@media screen and (min-width: 600px) and (max-width: 1023px) {
  .hero-split__stage {
    height: min(66dvh, 580px) !important;
    min-height: 420px !important;
    max-height: 620px !important;
  }

  .hero-split__copy {
    padding: 0 32px 32px !important;
  }

  .hero-split__tagline {
    max-width: 14em !important;
    font-size: clamp(2rem, 5vw, 2.6rem) !important;
    margin-bottom: 12px !important;
  }

  .hero-split__lede {
    display: block !important;
    margin: 0 0 20px !important;
    max-width: 28rem !important;
    font-size: 16px !important;
    line-height: 1.5 !important;
    color: rgba(255, 254, 248, 0.82) !important;
  }

  .hero-split__cta {
    min-width: 11rem !important;
    padding-inline: 1.6rem !important;
  }

  .hero-split__cards {
    top: 20px !important;
    left: 24px !important;
    max-width: 22rem !important;
  }

  .hero-split__stats-inner {
    grid-template-columns: repeat(4, minmax(0, 1fr)) !important;
  }

  .feature-rail,
  .gallery-parallax-grid,
  .gallery-list,
  .stat-figures {
    grid-template-columns: 1fr 1fr !important;
  }

  .contact-form .form-grid {
    grid-template-columns: 1fr 1fr !important;
  }

  .contact-form .input-wrapper.full-width {
    grid-column: 1 / -1 !important;
  }
}