/*
 * LuiTours responsive protection layer
 * Shared by the complete standalone public pages; it does not replace page content.
 */

html,
body {
  width: 100%;
  max-width: 100%;
  margin-inline: 0;
  overflow-x: clip;
}

*,
*::before,
*::after {
  box-sizing: border-box;
}

img,
picture,
video,
canvas,
iframe,
embed,
object,
svg {
  max-width: 100%;
}

img,
picture,
video,
canvas,
svg {
  height: auto;
}

iframe,
embed,
object {
  border: 0;
}

main,
section,
article,
aside,
header,
footer,
nav,
form,
fieldset,
.container,
.wrap,
.cs,
.section-inner,
.page-inner,
.page-content,
.tour-wrap,
.tours-wrap {
  min-width: 0;
}

h1,
h2,
h3,
h4,
h5,
h6,
p,
li,
a,
button,
label,
legend,
figcaption,
address,
blockquote,
td,
th {
  overflow-wrap: anywhere;
  word-break: normal;
}

input,
select,
textarea,
button {
  max-width: 100%;
}

textarea {
  resize: vertical;
}

.tc-grid,
.tour-grid,
.tours-grid,
.tc2-grid,
.blog-grid,
#blogGrid,
.about-grid,
.contact-grid,
.simple-grid,
.cat-grid,
.parks-grid,
.related-grid,
.experience-grid,
.why-grid,
.gallery-grid,
.footer-classic-grid,
.ft-grid,
.daytrips-grid,
.itinerary-grid,
.form-grid,
.info-grid,
.stats-grid,
.routes-grid,
.acc-grid,
.lui-accommodation-grid,
.imported-tour-grid,
.chimp-grid,
.page-layout,
.intro-grid,
.double-card {
  min-width: 0;
}

.tc-grid > *,
.tour-grid > *,
.tours-grid > *,
.tc2-grid > *,
.blog-grid > *,
#blogGrid > *,
.about-grid > *,
.contact-grid > *,
.simple-grid > *,
.cat-grid > *,
.parks-grid > *,
.related-grid > *,
.experience-grid > *,
.why-grid > *,
.gallery-grid > *,
.footer-classic-grid > *,
.ft-grid > *,
.daytrips-grid > *,
.itinerary-grid > *,
.form-grid > *,
.info-grid > *,
.stats-grid > *,
.routes-grid > *,
.acc-grid > *,
.lui-accommodation-grid > *,
.imported-tour-grid > *,
.chimp-grid > *,
.page-layout > *,
.intro-grid > *,
.double-card > * {
  min-width: 0;
  max-width: 100%;
}

.table-wrap,
.responsive-table,
.lui-price-scroll,
.tour-price-wrap,
.import-price-wrap,
.price-table-wrap,
.comparison-table-wrap {
  width: 100%;
  max-width: 100%;
  overflow-x: auto;
  -webkit-overflow-scrolling: touch;
  overscroll-behavior-inline: contain;
}

table {
  max-width: 100%;
}

.gallery img,
.gallery-grid img,
.tour-gallery img,
.tc-card img,
.tc2-img img,
.tour-card img,
.imported-tour-card img,
.chimp-card img {
  object-fit: cover;
}

.hero video,
#hero video,
.hero-bg-video,
.hero-video,
.luitours-hero video {
  width: 100%;
  height: 100%;
  max-width: none;
  object-fit: cover;
}

.footer-tripadvisor-column,
.footer-tripadvisor-item,
.ft-review-col,
.ft-fb-wrap,
.ft-fb-wrap iframe,
[id^="TA_"],
[class*="TA_"],
[class*="safaribook"],
[id*="safaribook"] {
  max-width: 100% !important;
  min-width: 0 !important;
}

@media (max-width: 1024px) {
  .tc-grid,
  .tour-grid,
  .tours-grid,
  .tc2-grid,
  .blog-grid,
  #blogGrid,
  .cat-grid,
  .parks-grid,
  .related-grid,
  .experience-grid,
  .gallery-grid,
  .routes-grid,
  .imported-tour-grid,
  .chimp-grid {
    grid-template-columns: repeat(2, minmax(0, 1fr)) !important;
  }

  .page-layout,
  .intro-grid,
  .about-grid,
  .contact-grid,
  .double-card,
  .why-grid {
    gap: clamp(24px, 4vw, 42px) !important;
  }

  .mega-panel {
    width: min(920px, calc(100vw - 32px)) !important;
    max-width: calc(100vw - 32px) !important;
  }
}

@media (max-width: 767px) {
  :root {
    --mobile-page-gutter: 18px;
  }

  body {
    min-width: 0;
  }

  .container,
  .wrap,
  .cs:not(.hero):not(.page-hero):not(.tours-hero):not(.yt-section):not(.cta-section):not(.cta-band):not(.call-to-action),
  .section-inner,
  .page-inner,
  .tour-wrap,
  .tours-wrap {
    width: 100% !important;
    max-width: 100% !important;
    padding-left: var(--mobile-page-gutter) !important;
    padding-right: var(--mobile-page-gutter) !important;
    margin-left: auto !important;
    margin-right: auto !important;
  }

  main > section,
  .page-content > section,
  .simple-page > section,
  .tour-section,
  .section,
  .cs {
    scroll-margin-top: calc(var(--site-header-height, 68px) + 14px);
  }

  .tc-grid,
  .tour-grid,
  .tours-grid,
  .tc2-grid,
  .blog-grid,
  #blogGrid,
  .about-grid,
  .contact-grid,
  .simple-grid,
  .cat-grid,
  .parks-grid,
  .related-grid,
  .experience-grid,
  .why-grid,
  .gallery-grid,
  .footer-classic-grid,
  .ft-grid,
  .daytrips-grid,
  .itinerary-grid,
  .form-grid,
  .info-grid,
  .stats-grid,
  .routes-grid,
  .acc-grid,
  .lui-accommodation-grid,
  .imported-tour-grid,
  .chimp-grid,
  .page-layout,
  .intro-grid,
  .double-card {
    grid-template-columns: minmax(0, 1fr) !important;
  }

  .section,
  section,
  .tour-section,
  .simple-section {
    padding-top: clamp(42px, 10vw, 64px);
    padding-bottom: clamp(42px, 10vw, 64px);
  }

  h1,
  .hero-h1,
  .hero-title,
  .page-hero h1,
  .ph-body h1,
  .tours-hero-body h1,
  .simple-hero h1,
  .art-hero h1 {
    max-width: 100% !important;
    font-size: clamp(2rem, 10.5vw, 3.15rem) !important;
    line-height: 1.08 !important;
    text-wrap: balance;
  }

  h2,
  .section-title,
  .cta-title {
    max-width: 100% !important;
    font-size: clamp(1.65rem, 8vw, 2.45rem) !important;
    line-height: 1.14 !important;
    text-wrap: balance;
  }

  h3 {
    max-width: 100%;
    line-height: 1.25 !important;
  }

  .hero,
  #hero,
  .luitours-hero {
    width: 100% !important;
    min-height: clamp(440px, 72svh, 600px) !important;
    height: auto !important;
  }

  .page-hero,
  .tours-hero,
  .simple-hero,
  .art-hero,
  .blog-hero,
  .contact-hero,
  .about-hero,
  .tour-hero {
    width: 100% !important;
    min-height: clamp(280px, 48svh, 440px) !important;
    height: auto !important;
    padding-left: var(--mobile-page-gutter) !important;
    padding-right: var(--mobile-page-gutter) !important;
  }

  .hero-content,
  .hero-inner,
  .page-hero-inner,
  .ph-body,
  .tours-hero-body,
  .simple-hero-inner,
  .art-hero-inner {
    width: 100% !important;
    max-width: 100% !important;
    min-width: 0 !important;
    padding-left: 0 !important;
    padding-right: 0 !important;
  }

  .breadcrumbs,
  .breadcrumb,
  .bc,
  .hero-breadcrumb {
    max-width: 100% !important;
    flex-wrap: wrap !important;
    gap: 6px 8px !important;
    white-space: normal !important;
  }

  .hero-actions,
  .ph-actions,
  .cta-btns,
  .btn-row,
  .simple-actions,
  .tour-actions,
  .form-actions {
    width: 100% !important;
    display: flex !important;
    flex-direction: column !important;
    align-items: stretch !important;
    gap: 11px !important;
  }

  .hero-actions a,
  .hero-actions button,
  .ph-actions a,
  .ph-actions button,
  .cta-btns a,
  .cta-btns button,
  .btn-row a,
  .btn-row button,
  .simple-actions a,
  .simple-actions button,
  .tour-actions a,
  .tour-actions button,
  .form-actions a,
  .form-actions button {
    width: 100% !important;
    min-width: 0 !important;
    min-height: 46px;
    justify-content: center !important;
    text-align: center !important;
    white-space: normal !important;
  }

  .tc-card,
  a.tc-card,
  .tc2,
  .tour-card,
  .imported-tour-card,
  .chimp-card,
  .package-card,
  .related-card {
    width: 100% !important;
    max-width: 100% !important;
    min-width: 0 !important;
    height: auto !important;
    min-height: 0;
    margin-left: 0 !important;
    margin-right: 0 !important;
  }

  .tc-card,
  a.tc-card {
    min-height: 280px !important;
  }

  .tc2-img,
  .tc-img,
  .tour-card-img,
  .imported-tour-card-img,
  .chimp-card-img {
    width: 100% !important;
    height: clamp(190px, 56vw, 250px) !important;
    min-height: 0 !important;
  }

  .tc-content,
  .tc2-body,
  .tc-body,
  .tour-card-body,
  .imported-tour-card-body,
  .chimp-card-body {
    min-width: 0 !important;
    max-width: 100% !important;
    padding-left: clamp(15px, 4vw, 20px) !important;
    padding-right: clamp(15px, 4vw, 20px) !important;
  }

  .tc-footer,
  .tc2-footer,
  .tour-card-footer,
  .imported-tour-card-footer,
  .chimp-card-foot {
    width: 100% !important;
    min-width: 0 !important;
    flex-wrap: wrap !important;
    gap: 10px 12px !important;
  }

  .tc-price,
  .tc2-price,
  .tour-price,
  .tc-days,
  .tc2-meta {
    min-width: 0 !important;
    max-width: 100% !important;
  }

  .day-card,
  .day-card.open,
  .itinerary-day,
  .lui-day,
  .timeline-item,
  .itin-panel,
  .day-body,
  .day-desc,
  .lui-day-story {
    width: 100% !important;
    max-width: 100% !important;
    min-width: 0 !important;
    height: auto !important;
    max-height: none !important;
  }

  .day-head,
  .day-header,
  .itinerary-heading,
  .lui-day-head {
    min-width: 0 !important;
    align-items: flex-start !important;
    gap: 10px !important;
  }

  .day-title,
  .day-route,
  .itinerary-title,
  .lui-day-title {
    min-width: 0 !important;
    white-space: normal !important;
    overflow-wrap: anywhere !important;
  }

  .timeline,
  .itinerary-timeline {
    padding-left: 0 !important;
  }

  .timeline::before,
  .itinerary-timeline::before {
    left: 14px !important;
  }

  form,
  fieldset,
  .form-card,
  .contact-form,
  .booking-form {
    width: 100% !important;
    max-width: 100% !important;
    min-width: 0 !important;
  }

  input:not([type="checkbox"]):not([type="radio"]),
  select,
  textarea {
    width: 100% !important;
    min-width: 0 !important;
  }

  table {
    display: block;
    width: 100%;
    overflow-x: auto;
    -webkit-overflow-scrolling: touch;
  }

  .gallery,
  .tour-gallery,
  .gallery-grid {
    width: 100% !important;
    max-width: 100% !important;
  }

  .gallery img,
  .tour-gallery img,
  .gallery-grid img {
    width: 100% !important;
    height: auto;
  }

  .rail {
    max-width: 100vw !important;
  }

  .rail-btn {
    min-width: 0 !important;
  }

  .site-footer .ft-inner {
    width: 100% !important;
    max-width: 100% !important;
  }

  .site-footer .ft-grid {
    grid-template-columns: minmax(0, 1fr) !important;
  }

  .site-footer .ft-brand,
  .site-footer .ft-col,
  .site-footer .ft-review-col,
  .site-footer .ft-fb-col {
    width: 100% !important;
    min-width: 0 !important;
    max-width: 100% !important;
  }

  .site-footer .ft-soc {
    flex-wrap: wrap !important;
  }

  .site-footer .ft-soc a {
    min-width: 38px;
    min-height: 38px;
  }

  .site-footer .ft-bottom {
    width: 100% !important;
    flex-direction: column !important;
  }

  .month-grid {
    grid-template-columns: repeat(3, minmax(0, 1fr)) !important;
  }

  .month-grid > *,
  .month-card {
    min-width: 0 !important;
    max-width: 100% !important;
  }

  .itin-tab-row {
    width: 100% !important;
    max-width: 100% !important;
    flex-wrap: wrap !important;
  }

  .itin-tab-row .itab {
    width: 100% !important;
    max-width: 100% !important;
    min-width: 0 !important;
    flex: 1 1 100% !important;
    white-space: normal !important;
    justify-content: center !important;
  }

  .itin-tab-row .itab-badge {
    max-width: 46% !important;
    min-width: 0 !important;
    white-space: normal !important;
    overflow-wrap: anywhere !important;
  }
}

@media (max-width: 1100px) {
  html body .mob-over {
    inset: 0 0 0 auto !important;
    width: min(85vw, 380px) !important;
    max-width: 380px !important;
    height: 100dvh !important;
    max-height: 100dvh !important;
    box-sizing: border-box !important;
  }
}

@media (max-width: 374px) {
  :root {
    --mobile-page-gutter: 14px;
  }

  .nav-in {
    padding-left: 10px !important;
    padding-right: 10px !important;
  }

  .nl-sub,
  .nav-logo > div:last-child {
    min-width: 0;
  }

  .tc-footer,
  .tc2-footer,
  .tour-card-footer,
  .imported-tour-card-footer,
  .chimp-card-foot {
    flex-direction: column !important;
    align-items: stretch !important;
  }

  .tc2-book,
  .tc-btn-main,
  .tour-card .bk-btn,
  .imported-tour-card .bk-btn,
  .chimp-card-foot .bk-btn {
    width: 100% !important;
    text-align: center !important;
    justify-content: center !important;
  }
}

@media (max-width: 900px) and (orientation: landscape) and (max-height: 520px) {
  .hero,
  #hero,
  .luitours-hero,
  .page-hero,
  .tours-hero,
  .simple-hero,
  .tour-hero {
    min-height: 360px !important;
  }
}

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

/*
 * Final design correction layer — 30 July 2026
 * Keeps standalone page markup intact while unifying the site canvas,
 * decorative accents and the established inner-page hero treatment.
 */
:root {
  --lui-page-bg: #ffffff;
  --lui-decorative-chocolate: #4b2e1f;
}

html,
body {
  background-color: #ffffff !important;
  background-image: none !important;
}

html :is(#lui-page-bg-guard, body) {
  background-color: #ffffff !important;
  background-image: none !important;
}

main,
.page-content,
.simple-page,
.simple-wrap,
.tour-section,
.tours-main,
.content-section:not(.hero):not(.page-hero):not(.tours-hero):not(.yt-section):not(.cta-section):not(.cta-band):not(.call-to-action),
.sec:not(.hero):not(.page-hero):not(.tours-hero):not(.yt-section):not(.cta-section):not(.cta-band):not(.call-to-action),
.sec-bg:not(.hero):not(.page-hero):not(.tours-hero):not(.yt-section):not(.cta-section):not(.cta-band):not(.call-to-action),
.sec-bg2:not(.hero):not(.page-hero):not(.tours-hero):not(.yt-section):not(.cta-section):not(.cta-band):not(.call-to-action),
.sec-white:not(.hero):not(.page-hero):not(.tours-hero):not(.yt-section):not(.cta-section):not(.cta-band):not(.call-to-action),
.cs:not(.hero):not(.page-hero):not(.tours-hero):not(.yt-section):not(.cta-section):not(.cta-band):not(.call-to-action),
.intro,
.itinerary,
.lui-article-upgrade,
.modern-blog-featured,
.modern-blog-feed,
.journal-layout,
.journal-content,
.about-page,
.about-section,
.contact-page,
.contact-section,
.legal-page,
.legal-section {
  background-color: #ffffff !important;
  background-image: none !important;
}

html body :is(
  #lui-page-bg-guard,
  main,
  .page-content,
  .simple-page,
  .simple-wrap,
  .tour-section,
  .tours-main,
  .content-section:not(.hero):not(.page-hero):not(.tours-hero):not(.yt-section):not(.cta-section):not(.cta-band):not(.call-to-action),
  .sec:not(.hero):not(.page-hero):not(.tours-hero):not(.yt-section):not(.cta-section):not(.cta-band):not(.call-to-action),
  .sec-bg:not(.hero):not(.page-hero):not(.tours-hero):not(.yt-section):not(.cta-section):not(.cta-band):not(.call-to-action),
  .sec-bg2:not(.hero):not(.page-hero):not(.tours-hero):not(.yt-section):not(.cta-section):not(.cta-band):not(.call-to-action),
  .sec-white:not(.hero):not(.page-hero):not(.tours-hero):not(.yt-section):not(.cta-section):not(.cta-band):not(.call-to-action),
  .cs:not(.hero):not(.page-hero):not(.tours-hero):not(.yt-section):not(.cta-section):not(.cta-band):not(.call-to-action),
  .intro,
  .itinerary,
  .lui-article-upgrade,
  .modern-blog-featured,
  .modern-blog-feed,
  .journal-layout,
  .journal-content,
  .about-page,
  .about-section,
  .contact-page,
  .contact-section,
  .legal-page,
  .legal-section
) {
  background-color: #ffffff !important;
  background-image: none !important;
}

/* White canvas correction: ordinary pages stay plain while approved feature surfaces keep their own treatments. */
html,
body {
  background-color: #ffffff !important;
  background-image: none !important;
}

html::before,
html::after,
body::before,
body::after {
  content: none !important;
  display: none !important;
  background: none !important;
}

html body :is(
  #lui-white-section-guard,
  .page-wrapper,
  .page-wrap,
  .tour-detail,
  .tour-detail-section,
  .tour-list,
  .tour-list-section,
  .overview,
  .overview-section,
  .blog-section,
  .article-section,
  .about-us-section,
  .contact-content,
  .legal-content,
  .general-content
) {
  background-color: #ffffff !important;
  background-image: none !important;
}

html body :is(
  #lui-white-card-guard,
  .tour-summary,
  .detail-card,
  .spot-card,
  .inc-card,
  .day-card,
  .simple-card,
  .faq-item,
  .lui-price-guide,
  .content-card,
  .overview-card
) {
  background-color: #ffffff !important;
  background-image: none !important;
  border-color: rgba(75, 46, 31, .14) !important;
  box-shadow: 0 8px 24px rgba(34, 23, 14, .06) !important;
}
/* These approved feature surfaces intentionally remain grey. */
.feature-note,
.tile.yellow,
.tile.green.wide-2,
.contact-hours {
  background-color: #a3a399 !important;
  background-image: none !important;
}

html body :is(
  #lui-approved-grey-guard,
  .feature-note,
  .tile.yellow,
  .tile.green.wide-2,
  .contact-hours
) {
  background-color: #a3a399 !important;
  background-image: none !important;
}

/*
 * Decorative copy only. Functional spans such as prices, controls,
 * navigation, breadcrumbs, badges and form messages are deliberately absent.
 */
html body :is(
  #lui-decorative-color-guard,
  .section-subtitle,
  .decorative-subtitle,
  .decorative-heading,
  .decorative-text,
  .eyebrow,
  .section-kicker,
  .sec-kicker,
  .about-eyebrow,
  .about-kicker,
  .cat-kicker,
  .contact-kicker,
  .spot-kicker,
  .day-kicker,
  .faq-kicker,
  .gt-eyebrow,
  .lui-help-eyebrow,
  .lui-kili-arrival-kicker,
  .home-journal-kicker,
  .modern-blog-eyebrow,
  .modern-blog-section-kicker,
  .modern-blog-label,
  .title-accent,
  .subtitle,
  .subheading,
  .hero-subtitle,
  .journal-category,
  .home-journal-card-category,
  .modern-blog-card-category,
  .tc-eyebrow,
  .tc-subtitle,
  .fp-cat,
  .bc-cat,
  .art-hero-cat,
  .heading-label,
  .section-heading > span,
  .section-label h3
) {
  color: var(--lui-decorative-chocolate) !important;
  font-family: "DK Liquid Embrace", cursive !important;
  font-style: normal !important;
  font-weight: 400 !important;
  text-shadow: 0 1px 1px rgba(255, 255, 255, .34);
}

/*
 * Emphasis placed directly inside a heading is decorative copy throughout
 * the standalone tour and editorial pages. This does not target ordinary
 * inline spans, prices, durations, controls, icons or status messages.
 */
html body :is(h1, h2, h3, h4, h5, h6) > em,
html body .section-heading > em {
  color: var(--lui-decorative-chocolate) !important;
  -webkit-text-fill-color: var(--lui-decorative-chocolate) !important;
  font-family: "DK Liquid Embrace", cursive !important;
  font-style: normal !important;
  font-weight: 400 !important;
}

body.lui-inner-page .lui-standard-inner-hero {
  background-color: #1f160c !important;
  background-image: none !important;
  border: 0 !important;
  border-radius: 0 !important;
  box-shadow: none !important;
}

html body .simple-page:has(> .lui-standard-inner-hero) {
  padding-top: 0 !important;
}

html body main:has(> .lui-standard-inner-hero) {
  padding-top: 0 !important;
}

body.lui-inner-page .lui-standard-inner-hero > .journal-hero-media,
body.lui-inner-page .lui-standard-inner-hero > img {
  display: none !important;
}

body.lui-inner-page .lui-standard-inner-hero .journal-breadcrumb,
body.lui-inner-page .lui-standard-inner-hero .journal-category,
body.lui-inner-page .lui-standard-inner-hero .journal-meta,
body.lui-inner-page .lui-standard-inner-hero .modern-blog-eyebrow,
body.lui-inner-page .lui-standard-inner-hero .modern-blog-hero-stats,
body.lui-inner-page .lui-standard-inner-hero .about-breadcrumb,
body.lui-inner-page .lui-standard-inner-hero .about-kicker,
body.lui-inner-page .lui-standard-inner-hero .about-actions,
body.lui-inner-page .lui-standard-inner-hero .simple-actions,
body.lui-inner-page .lui-standard-inner-hero .faq-kicker,
body.lui-inner-page .lui-standard-inner-hero .faq-nav {
  display: none !important;
}

body.lui-inner-page .lui-standard-inner-hero .lui-standard-hero-subtitle {
  display: block !important;
  width: auto !important;
  max-width: min(100%, 820px) !important;
  margin: 0 !important;
  padding: 0 !important;
  color: #f5e58e !important;
  -webkit-text-fill-color: #f5e58e !important;
  background: transparent !important;
  background-color: transparent !important;
  background-image: none !important;
  border: 0 !important;
  box-shadow: none !important;
  text-shadow: none !important;
  font-size: 21px !important;
  line-height: 1.55 !important;
}

body.lui-inner-page .lui-standard-inner-hero :is(h1, h2, h3) > em {
  padding: 0 !important;
  background: transparent !important;
  background-color: transparent !important;
  background-image: none !important;
  border: 0 !important;
  box-shadow: none !important;
  text-shadow: none !important;
}

/* Keep the About highlights below the standardized hero copy. */
html body .about-page > .about-shell > .about-highlights {
  margin-top: 24px !important;
}

/* Icon glyphs only; all existing footer backgrounds and structure stay intact. */
html body :is(#lui-standard-hero-color-guard, .lui-standard-inner-hero) .lui-standard-hero-subtitle {
  color: #f5e58e !important;
  -webkit-text-fill-color: #f5e58e !important;
  background: transparent !important;
  background-color: transparent !important;
  background-image: none !important;
  border: 0 !important;
  box-shadow: none !important;
  text-shadow: none !important;
}

html body .site-footer .ft-soc a i,
html body .site-footer .ft-soc a[title="Facebook"] i,
html body .site-footer .ft-soc a[title="Instagram"] i,
html body .site-footer .ft-soc a[title="TikTok"] i,
html body .site-footer .ft-soc a[title="WhatsApp"] i,
html body .site-footer .ft-quick-item i,
html body .site-footer .ft-row-ic i,
html body .site-footer .ft-nl-icon i,
html body .site-footer .ft-contact-col i,
html body .site-footer .ft-fb-col h5 i,
html body .site-footer .ft-bottom-left i {
  color: #fff !important;
  -webkit-text-fill-color: #fff !important;
}

/* Expanded mobile navigation panels are light; keep their labels readable. */
html body .mob-over .mob-sub-links {
  background: rgba(255, 255, 255, .97) !important;
}

html body .mob-over .mob-sub-link,
html body .mob-over .mob-sub-section-title,
html body .mob-over .mob-sub-ic {
  color: #24170f !important;
}

html body .mob-over .mob-sub-ic {
  background: #eeeae2 !important;
  border-color: rgba(36, 23, 15, .14) !important;
}

@media (min-width: 641px) {
  body.lui-inner-page .lui-standard-inner-hero .lui-standard-breadcrumb {
    top: 18px !important;
  }

  body.lui-inner-page .lui-standard-inner-hero > *:not(.lui-standard-hero-bg):not(.lui-standard-breadcrumb) {
    padding: 60px 22px 24px !important;
  }

  body.lui-inner-page .lui-standard-inner-hero h1 {
    font-size: clamp(2.25rem, 4.2vw, 3.8rem) !important;
    line-height: 1.04 !important;
  }

  body.lui-inner-page .lui-standard-inner-hero .lui-standard-hero-subtitle {
  display: block !important;
  width: auto !important;
  max-width: min(100%, 820px) !important;
  margin: 0 !important;
  padding: 0 !important;
  color: #f5e58e !important;
  -webkit-text-fill-color: #f5e58e !important;
  background: transparent !important;
  background-color: transparent !important;
  background-image: none !important;
  border: 0 !important;
  box-shadow: none !important;
  text-shadow: none !important;
  font-size: 21px !important;
  line-height: 1.55 !important;
}
}

@media (min-width: 576px) and (max-width: 991px) {
  body.lui-inner-page .lui-standard-inner-hero .lui-standard-hero-subtitle {
    font-size: 19px !important;
  }
}

@media (max-width: 640px) {
  body.lui-inner-page .lui-standard-inner-hero {
    min-height: 420px !important;
    height: 420px !important;
    max-height: 420px !important;
  }

  body.lui-inner-page .lui-standard-inner-hero .lui-standard-breadcrumb {
    top: 18px !important;
    width: calc(100% - 30px) !important;
  }

  body.lui-inner-page .lui-standard-inner-hero > *:not(.lui-standard-hero-bg):not(.lui-standard-breadcrumb) {
    padding: 54px 16px 26px !important;
  }

  body.lui-inner-page .lui-standard-inner-hero h1 {
    font-size: clamp(1.85rem, 9vw, 2.75rem) !important;
    line-height: 1.04 !important;
  }

  body.lui-inner-page .lui-standard-inner-hero .lui-standard-hero-subtitle {
  display: block !important;
  width: auto !important;
  max-width: min(100%, 820px) !important;
  margin: 0 !important;
  padding: 0 !important;
  color: #f5e58e !important;
  -webkit-text-fill-color: #f5e58e !important;
  background: transparent !important;
  background-color: transparent !important;
  background-image: none !important;
  border: 0 !important;
  box-shadow: none !important;
  text-shadow: none !important;
  font-size: 17px !important;
  line-height: 1.5 !important;
}
}

/*
 * Final mobile-only layout and navigation layer.
 * Desktop and tablet rules remain untouched; these corrections stop at 767px.
 */
@media (max-width: 767px) {
  :root {
    --mobile-page-gutter: 16px;
    --mobile-menu-bg: #ffffff;
    --mobile-menu-soft: #faf7f0;
    --mobile-menu-text: #3f2818;
    --mobile-menu-accent: #b59a63;
    --mobile-menu-border: rgba(75, 46, 22, .12);
  }

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

  body {
    min-width: 0 !important;
    padding-bottom: 0 !important;
    font-size: 16px !important;
    line-height: 1.65 !important;
  }

  *,
  *::before,
  *::after {
    box-sizing: border-box;
  }

  .rail,
  .sticky-rail,
  .sticky-contact,
  .floating-contact-rail,
  .floating-contact,
  .floating-whatsapp,
  .floating-phone,
  .floating-email,
  .floating-quote,
  .whatsapp-float,
  .wa-float,
  .contact-rail,
  .social-rail,
  .fixed-contact-controls,
  .sticky-social-buttons {
    display: none !important;
  }

  main,
  main > *,
  section,
  article,
  form,
  fieldset,
  .page-content,
  .content,
  .wrapper,
  .container,
  .wrap,
  .section-inner,
  .page-inner,
  .cs {
    min-width: 0 !important;
    max-width: 100% !important;
  }

  main {
    width: 100% !important;
    margin-left: 0 !important;
    margin-right: 0 !important;
  }

  .page-layout {
    width: 100% !important;
    padding-left: var(--mobile-page-gutter) !important;
    padding-right: var(--mobile-page-gutter) !important;
  }

  .page-content > .cs,
  .page-content > section {
    padding-left: 0 !important;
    padding-right: 0 !important;
  }

  .safari-tour-grid,
  .modern-blog-wrap {
    width: 100% !important;
    max-width: 100% !important;
    margin-left: 0 !important;
    margin-right: 0 !important;
  }

  .container,
  .wrap,
  .section-inner,
  .page-inner,
  .tour-wrap,
  .tours-wrap,
  main > .cs,
  .page-content > .cs,
  .page-content > section,
  .simple-page > section,
  .tour-section {
    width: 100% !important;
    max-width: 100% !important;
    margin-left: auto !important;
    margin-right: auto !important;
    padding-left: var(--mobile-page-gutter) !important;
    padding-right: var(--mobile-page-gutter) !important;
  }

  main > .cs,
  .page-content > .cs,
  .page-content > section,
  .simple-page > section,
  .tour-section {
    margin-bottom: 0 !important;
    padding-top: 48px !important;
    padding-bottom: 48px !important;
  }

  .section-header,
  .cs-head,
  .sec-head,
  .section-heading {
    margin-bottom: 28px !important;
  }

  h1,
  .hero-h1,
  .hero-title,
  .page-hero h1,
  .ph-body h1,
  .tours-hero-body h1,
  .simple-hero h1,
  .art-hero h1 {
    font-size: clamp(1.8rem, 8vw, 2.5rem) !important;
    line-height: 1.15 !important;
    max-width: 100% !important;
    letter-spacing: 0 !important;
    white-space: normal !important;
    overflow-wrap: anywhere;
  }

  h2,
  .section-title,
  .cta-title {
    font-size: clamp(1.55rem, 7vw, 2rem) !important;
    line-height: 1.2 !important;
    max-width: 100% !important;
    letter-spacing: 0 !important;
  }

  h3 {
    font-size: clamp(1.25rem, 5.5vw, 1.55rem) !important;
    line-height: 1.3 !important;
    max-width: 100% !important;
  }

  p,
  li,
  address,
  label,
  input,
  select,
  textarea,
  button {
    overflow-wrap: anywhere;
    word-break: normal;
  }

  p,
  li {
    line-height: 1.65 !important;
  }

  .tc-grid,
  .tour-grid,
  .tours-grid,
  .safari-tour-grid,
  .tc2-grid,
  .blog-grid,
  #blogGrid,
  .modern-blog-grid,
  .modern-blog-services-grid,
  .modern-blog-service-links,
  .article-grid,
  .articles-grid,
  .destination-grid,
  .services-grid,
  .features-grid,
  .reviews-grid,
  .team-grid,
  .pricing-grid,
  .contact-grid,
  .related-grid,
  .packages-grid,
  .parks-grid,
  .cat-grid,
  .story-grid,
  .why-grid,
  .why-stats,
  .steps,
  .nums-row,
  .inc-exc-grid,
  .inclusions-grid,
  .exclusions-grid,
  .price-grid,
  .gallery-grid,
  .acc-grid,
  .accommodation-grid,
  .lui-accommodation-grid,
  .daytrips-grid,
  .itinerary-grid,
  .form-grid,
  .info-grid,
  .stats-grid,
  .routes-grid,
  .imported-tour-grid,
  .chimp-grid,
  .footer-grid,
  .footer-classic-grid,
  .site-footer .ft-grid,
  .page-layout,
  .intro-grid,
  .double-card,
  .month-grid {
    grid-template-columns: minmax(0, 1fr) !important;
  }

  .cards-row,
  .feature-row,
  .content-row,
  .contact-row,
  .review-row,
  .pricing-row,
  .related-row {
    flex-direction: column !important;
    align-items: stretch !important;
  }

  .cards-row > *,
  .feature-row > *,
  .content-row > *,
  .contact-row > *,
  .review-row > *,
  .pricing-row > *,
  .related-row > * {
    width: 100% !important;
    max-width: 100% !important;
    flex: 0 0 100% !important;
  }

  .tc-card,
  a.tc-card,
  .tc2,
  .tour-card,
  .blog-card,
  .modern-blog-card,
  .article-card,
  .destination-card,
  .service-card,
  .review-card,
  .team-card,
  .price-card,
  .related-card,
  .package-card,
  .imported-tour-card,
  .chimp-card {
    width: 100% !important;
    max-width: 100% !important;
    min-width: 0 !important;
    margin-left: 0 !important;
    margin-right: 0 !important;
  }

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

  .tc-card img,
  .blog-card img,
  .modern-blog-card img,
  .article-card img,
  .destination-card img,
  .service-card img,
  .review-card img,
  .gallery img,
  .gallery-grid img,
  .tour-gallery img,
  .tab-image-box img {
    display: block;
    width: 100% !important;
    object-fit: cover !important;
  }

  .notification,
  .notification.single-accommodation,
  .notification-content,
  .tab-item.single-stay,
  .tab-item.single-stay .tab-image-box {
    width: 100% !important;
    max-width: 100% !important;
    min-width: 0 !important;
    margin-left: 0 !important;
    margin-right: 0 !important;
  }

  .notification,
  .notification.single-accommodation {
    grid-template-columns: minmax(0, 1fr) !important;
  }

  .notification .tab-image-box img,
  .tab-item.single-stay .tab-image-box img {
    height: 280px !important;
  }

  .day-cards,
  .day-card,
  .day-card.open,
  .day-body,
  .day-body-inner,
  .day-desc,
  .itinerary-day,
  .itin-panel,
  .lui-day,
  .lui-day-story {
    width: 100% !important;
    max-width: 100% !important;
    min-width: 0 !important;
  }

  .day-body {
    padding-left: 0 !important;
    padding-right: 0 !important;
  }

  .day-body-inner {
    padding: 24px 14px 28px !important;
  }

  .day-hd,
  .day-head,
  .day-header {
    min-width: 0 !important;
    padding-left: 12px !important;
    padding-right: 12px !important;
    gap: 10px !important;
  }

  .day-num {
    width: 54px !important;
    min-width: 54px !important;
  }

  .day-hd-main,
  .day-head-main,
  .day-route,
  .day-title,
  .day-chips {
    min-width: 0 !important;
    max-width: 100% !important;
  }

  .day-route,
  .day-title {
    white-space: normal !important;
    overflow-wrap: anywhere !important;
  }

  .day-chips {
    flex-wrap: wrap !important;
  }

  form,
  fieldset,
  .form-card,
  .contact-form,
  .booking-form,
  .lt-book-form {
    width: 100% !important;
    max-width: 100% !important;
    min-width: 0 !important;
  }

  form .form-row,
  form .form-grid,
  form .row,
  .lt-book-form {
    display: grid !important;
    grid-template-columns: minmax(0, 1fr) !important;
  }

  .lt-field,
  .lt-field.full,
  .lt-book-actions,
  .lt-book-note {
    grid-column: 1 / -1 !important;
  }

  input:not([type="checkbox"]):not([type="radio"]):not([type="hidden"]),
  select,
  textarea {
    width: 100% !important;
    max-width: 100% !important;
    min-width: 0 !important;
    min-height: 48px;
    font-size: 16px !important;
  }

  textarea {
    min-height: 130px !important;
  }

  button,
  .btn,
  [class*="btn"] {
    max-width: 100%;
  }

  .table-wrap,
  .responsive-table,
  .lui-price-scroll,
  .tour-price-wrap,
  .import-price-wrap,
  .price-table-wrap,
  .comparison-table-wrap,
  .table-responsive {
    width: 100% !important;
    max-width: 100% !important;
    overflow-x: auto !important;
    -webkit-overflow-scrolling: touch;
    overscroll-behavior-inline: contain;
  }

  table,
  .lui-price-table,
  .tour-price-table,
  .import-price-table,
  .price-table {
    max-width: 100% !important;
  }

  .toc-bar,
  .safari-cat-links,
  .modern-blog-filters,
  .notification-tabs,
  .itin-tab-row {
    max-width: 100vw !important;
    overflow-x: auto !important;
    overflow-y: hidden !important;
    -webkit-overflow-scrolling: touch;
    overscroll-behavior-inline: contain;
    scrollbar-width: none;
  }

  .toc-bar::-webkit-scrollbar,
  .safari-cat-links::-webkit-scrollbar,
  .modern-blog-filters::-webkit-scrollbar,
  .notification-tabs::-webkit-scrollbar,
  .itin-tab-row::-webkit-scrollbar {
    display: none;
  }

  .home-journal-slider,
  .home-journal-viewport,
  .tc-slider,
  .tc-track,
  .carousel-viewport,
  .slider-viewport,
  .swiper,
  .swiper-container {
    width: 100% !important;
    max-width: 100% !important;
    min-width: 0 !important;
  }

  .home-journal-card,
  .tc-track > .tc-card,
  .slider-item,
  .swiper-slide {
    max-width: 360px;
  }

  body.lui-inner-page .lui-standard-inner-hero {
    width: 100% !important;
    min-height: 420px !important;
    height: auto !important;
    max-height: none !important;
    overflow: hidden !important;
  }

  body.lui-inner-page .lui-standard-inner-hero .ph-body {
    width: 100% !important;
    max-width: 100% !important;
    min-height: 420px !important;
    padding: 86px 16px 40px !important;
  }

  body.lui-inner-page .lui-standard-inner-hero .lui-standard-breadcrumb {
    width: calc(100% - 32px) !important;
    max-width: calc(100% - 32px) !important;
    white-space: normal !important;
    overflow-wrap: anywhere !important;
  }

  body.lui-inner-page .lui-standard-inner-hero .ph-actions {
    width: 100% !important;
    display: flex !important;
    flex-direction: column !important;
    align-items: stretch !important;
    gap: 12px !important;
  }

  body.lui-inner-page .lui-standard-inner-hero .ph-actions .btn,
  body.lui-inner-page .lui-standard-inner-hero .ph-actions a,
  body.lui-inner-page .lui-standard-inner-hero .ph-actions button {
    width: 100% !important;
    max-width: 100% !important;
    min-height: 48px;
  }

  .nav-in {
    width: 100% !important;
    max-width: 100% !important;
    padding-left: 14px !important;
    padding-right: 14px !important;
  }

  .nav-end .btn-nav-plan,
  .btn-nav-plan {
    display: none !important;
  }

  html body .mob-backdrop {
    position: fixed !important;
    inset: 0 !important;
    background: rgba(30, 20, 12, .45) !important;
    backdrop-filter: blur(2px) !important;
    -webkit-backdrop-filter: blur(2px) !important;
    z-index: 10000 !important;
  }

  html body .mob-over {
    position: fixed !important;
    top: 0 !important;
    right: 0 !important;
    bottom: 0 !important;
    left: auto !important;
    width: min(88vw, 390px) !important;
    max-width: 100% !important;
    min-width: 0 !important;
    height: 100dvh !important;
    max-height: 100dvh !important;
    display: flex !important;
    flex-direction: column !important;
    overflow: hidden !important;
    overscroll-behavior: contain;
    background: var(--mobile-menu-bg) !important;
    background-image: none !important;
    color: var(--mobile-menu-text) !important;
    border-radius: 22px 0 0 22px !important;
    border-left: 1px solid var(--mobile-menu-border) !important;
    box-shadow: -16px 0 40px rgba(40, 25, 15, .18) !important;
    transform: translateX(100%) !important;
    opacity: 0 !important;
    visibility: hidden !important;
    pointer-events: none !important;
    transition: transform 260ms ease, opacity 220ms ease, visibility 0s linear 260ms !important;
    z-index: 10001 !important;
  }

  html body .mob-over.open {
    transform: translateX(0) !important;
    opacity: 1 !important;
    visibility: visible !important;
    pointer-events: auto !important;
    transition: transform 260ms ease, opacity 220ms ease, visibility 0s linear 0s !important;
  }

  html body .mob-over .mob-top {
    min-height: 72px !important;
    padding: 12px 14px !important;
    background: #fff !important;
    border-bottom: 1px solid var(--mobile-menu-border) !important;
    color: var(--mobile-menu-text) !important;
  }

  html body .mob-over .mob-logo-image {
    width: 118px !important;
    max-width: 118px !important;
    height: 48px !important;
    object-fit: contain !important;
  }

  html body .mob-over .mob-cls {
    width: 44px !important;
    min-width: 44px !important;
    max-width: 44px !important;
    height: 44px !important;
    min-height: 44px !important;
    padding: 0 !important;
    border: 1px solid var(--mobile-menu-border) !important;
    border-radius: 13px !important;
    background: var(--mobile-menu-soft) !important;
    color: var(--mobile-menu-text) !important;
  }

  html body .mob-over .mob-cls::before,
  html body .mob-over .mob-link-arr::before {
    content: none !important;
    display: none !important;
  }

  html body .mob-over .mob-cls i,
  html body .mob-over .mob-link-arr i {
    display: inline-block !important;
    color: currentColor !important;
    -webkit-text-fill-color: currentColor !important;
  }

  html body .mob-over .mob-search-wrap {
    padding: 10px 12px !important;
    background: #fff !important;
    border-bottom: 1px solid var(--mobile-menu-border) !important;
  }

  html body .mob-over .mob-quick-row {
    gap: 8px !important;
  }

  html body .mob-over .mob-chip {
    width: auto !important;
    min-width: max-content !important;
    min-height: 44px !important;
    padding: 10px 13px !important;
    border: 1px solid var(--mobile-menu-border) !important;
    border-radius: 999px !important;
    background: var(--mobile-menu-soft) !important;
    color: var(--mobile-menu-text) !important;
    font-size: 13px !important;
  }

  html body .mob-over .mob-nav-body {
    flex: 1 1 auto !important;
    min-height: 0 !important;
    overflow-y: auto !important;
    overflow-x: hidden !important;
    padding: 10px 12px 18px !important;
    background: #fff !important;
    color: var(--mobile-menu-text) !important;
    -webkit-overflow-scrolling: touch;
    overscroll-behavior: contain;
  }

  html body .mob-over .mob-link {
    position: relative !important;
    width: 100% !important;
    min-height: 52px !important;
    margin: 0 !important;
    padding: 10px 8px !important;
    gap: 12px !important;
    border: 0 !important;
    border-bottom: 1px solid rgba(75, 46, 22, .08) !important;
    border-radius: 10px !important;
    background: transparent !important;
    color: var(--mobile-menu-text) !important;
    font-size: 15px !important;
    font-weight: 700 !important;
    line-height: 1.35 !important;
    text-decoration: none !important;
  }

  html body .mob-over .mob-link:hover,
  html body .mob-over .mob-link:focus-visible,
  html body .mob-over .mob-link.sub-open,
  html body .mob-over .mob-link.active-page {
    background: var(--mobile-menu-soft) !important;
    color: #5a3b24 !important;
  }

  html body .mob-over .mob-link.active-page::before {
    background: var(--mobile-menu-accent) !important;
  }

  html body .mob-over .mob-link-left {
    min-width: 0 !important;
    color: inherit !important;
  }

  html body .mob-over .mob-link-icon,
  html body .mob-over .mob-link-arr {
    flex: 0 0 38px !important;
    width: 38px !important;
    min-width: 38px !important;
    height: 38px !important;
    border: 1px solid var(--mobile-menu-border) !important;
    border-radius: 11px !important;
    background: var(--mobile-menu-soft) !important;
    color: #6f4b2e !important;
  }

  html body .mob-over .mob-link-arr {
    flex-basis: 32px !important;
    width: 32px !important;
    min-width: 32px !important;
    height: 32px !important;
    transition: transform 220ms ease !important;
  }

  html body .mob-over .mob-link.sub-open .mob-link-arr {
    transform: rotate(90deg) !important;
    background: #efe7d8 !important;
    color: #5a3b24 !important;
  }

  html body .mob-over .mob-sub-links {
    margin: 4px 8px 12px !important;
    padding: 0 !important;
    max-height: 0 !important;
    overflow: hidden !important;
    border: 1px solid transparent !important;
    border-radius: 14px !important;
    background: var(--mobile-menu-soft) !important;
    box-shadow: none !important;
    transition: max-height 240ms ease, padding 240ms ease, border-color 240ms ease !important;
  }

  html body .mob-over .mob-sub-links.open {
    max-height: min(54vh, 520px) !important;
    padding: 6px !important;
    overflow-y: auto !important;
    border-color: var(--mobile-menu-border) !important;
  }

  html body .mob-over .mob-sub-section {
    padding: 0 !important;
  }

  html body .mob-over .mob-sub-link {
    display: flex !important;
    align-items: center !important;
    width: 100% !important;
    min-height: 46px !important;
    padding: 9px 10px !important;
    gap: 10px !important;
    border: 0 !important;
    border-radius: 10px !important;
    background: transparent !important;
    color: var(--mobile-menu-text) !important;
    font-size: 14px !important;
    font-weight: 600 !important;
    line-height: 1.35 !important;
    text-decoration: none !important;
  }

  html body .mob-over .mob-sub-link:hover,
  html body .mob-over .mob-sub-link:focus-visible,
  html body .mob-over .mob-sub-link.active-page {
    background: #efe7d8 !important;
    color: #5a3b24 !important;
  }

  html body .mob-over .mob-sub-ic {
    flex: 0 0 32px !important;
    width: 32px !important;
    min-width: 32px !important;
    height: 32px !important;
    border: 1px solid var(--mobile-menu-border) !important;
    border-radius: 9px !important;
    background: #fff !important;
    color: #6f4b2e !important;
  }

  html body .mob-over .mob-lang-row {
    display: grid !important;
    grid-template-columns: repeat(5, minmax(0, 1fr)) !important;
    gap: 6px !important;
    margin-top: 10px !important;
  }

  html body .mob-over .mob-lang-chip {
    width: 100% !important;
    min-width: 0 !important;
    min-height: 44px !important;
    padding: 8px 4px !important;
    border: 1px solid var(--mobile-menu-border) !important;
    border-radius: 10px !important;
    background: var(--mobile-menu-soft) !important;
    color: var(--mobile-menu-text) !important;
    font-size: 12px !important;
  }

  html body .mob-over .mob-footer-strip {
    display: block !important;
    flex: 0 0 auto !important;
    padding: 12px 14px max(14px, env(safe-area-inset-bottom)) !important;
    border-top: 1px solid var(--mobile-menu-border) !important;
    background: #fff !important;
  }

  html body .mob-over .mob-btns {
    display: block !important;
  }

  html body .mob-over .mob-btn-wa {
    display: none !important;
  }

  html body .mob-over .mob-btn-plan {
    width: 100% !important;
    min-height: 48px !important;
    padding: 12px 16px !important;
    border: 0 !important;
    border-radius: 13px !important;
    background: linear-gradient(135deg, #704900, #b59a63) !important;
    color: #fff !important;
    font-size: 14px !important;
    font-weight: 800 !important;
    box-shadow: 0 8px 20px rgba(75, 46, 22, .18) !important;
  }

  .site-footer .ft-inner {
    width: 100% !important;
    max-width: 100% !important;
    padding-left: var(--mobile-page-gutter) !important;
    padding-right: var(--mobile-page-gutter) !important;
  }

  .site-footer .ft-grid,
  .site-footer .footer-classic-grid {
    grid-template-columns: minmax(0, 1fr) !important;
  }

  .site-footer .ft-brand,
  .site-footer .ft-col,
  .site-footer .ft-review-col,
  .site-footer .ft-fb-col,
  .site-footer .ft-fb-wrap,
  .site-footer .ft-fb-wrap iframe,
  .site-footer .footer-review-badge,
  .site-footer .footer-tripadvisor-item {
    width: 100% !important;
    max-width: 100% !important;
    min-width: 0 !important;
  }

  .site-footer .ft-nl-band,
  .site-footer .ft-nl-left,
  .site-footer .ft-nl-form {
    width: 100% !important;
    max-width: 100% !important;
    min-width: 0 !important;
  }

  .site-footer .ft-nl-band {
    flex-direction: column !important;
    align-items: stretch !important;
  }

  .site-footer .ft-nl-form {
    display: grid !important;
    grid-template-columns: minmax(0, 1fr) !important;
    gap: 10px !important;
    overflow: visible !important;
  }

  .site-footer .ft-nl-form input,
  .site-footer .ft-nl-form button {
    width: 100% !important;
    min-height: 48px !important;
    border-radius: 10px !important;
  }

  .site-footer .ft-bottom,
  .site-footer .ft-bottom-links,
  .site-footer .ft-soc,
  .site-footer .ft-pay-strip,
  .site-footer .footer-payments {
    max-width: 100% !important;
    flex-wrap: wrap !important;
  }
}

@media (max-width: 480px) {
  :root {
    --mobile-page-gutter: 14px;
  }

  main > .cs,
  .page-content > .cs,
  .page-content > section,
  .simple-page > section,
  .tour-section {
    padding-top: 40px !important;
    padding-bottom: 40px !important;
  }

  body.lui-inner-page .lui-standard-inner-hero,
  body.lui-inner-page .lui-standard-inner-hero .ph-body {
    min-height: 390px !important;
  }

  body.lui-inner-page .lui-standard-inner-hero .ph-body {
    padding: 76px 14px 34px !important;
  }

  html body .mob-over {
    width: min(90vw, 390px) !important;
  }

  html body .mob-over .mob-top {
    min-height: 66px !important;
    padding: 9px 12px !important;
  }

  html body .mob-over .mob-search-wrap {
    padding-left: 10px !important;
    padding-right: 10px !important;
  }

  html body .mob-over .mob-nav-body {
    padding-left: 10px !important;
    padding-right: 10px !important;
  }

  .day-body-inner {
    padding-left: 12px !important;
    padding-right: 12px !important;
  }
}

@media (max-width: 767px) {
  html body .safari-tour-grid {
    padding-left: var(--mobile-page-gutter) !important;
    padding-right: var(--mobile-page-gutter) !important;
  }

  html body .safari-tour-grid,
  html body .chimp-tour-grid,
  html body .tours-grid,
  html body .related-grid,
  html body .blog-grid,
  html body .destination-grid,
  html body .inclusion-grid,
  html body .price-grid {
    grid-template-columns: minmax(0, 1fr) !important;
  }

  html body .page-layout {
    padding-top: 0 !important;
    padding-bottom: 48px !important;
  }

  html body .page-content > .cs,
  html body .page-content > section {
    margin-bottom: 0 !important;
    padding: 48px 0 !important;
  }
}

@media (max-width: 480px) {
  html body .page-layout {
    padding-bottom: 40px !important;
  }

  html body .page-content > .cs,
  html body .page-content > section {
    padding-top: 40px !important;
    padding-bottom: 40px !important;
  }
}

/* Final dark-background contrast guard.
 * The sentinel keeps this rule at the same specificity as the earlier
 * decorative-colour guard while the component branches keep it scoped.
 */
html body :is(
  #lui-dark-background-contrast-guard,
  .home-journal-card-category,
  .modern-blog-card-category,
  .journal-category
) {
  color: #ffffff !important;
  -webkit-text-fill-color: #ffffff !important;
}

html body :is(
  #lui-dark-background-contrast-guard,
  .cat-cta,
  .safari-cta
) a,
html body :is(
  #lui-dark-background-contrast-guard,
  .cat-cta,
  .safari-cta
) a :is(i, span),
html body :is(
  #lui-dark-background-contrast-guard,
  .lui-clean-actions
) a,
html body :is(
  #lui-dark-background-contrast-guard,
  .btn-or,
  .btn-wa,
  .mob-btn-wa,
  .ph-actions a
) > i {
  color: #ffffff !important;
  -webkit-text-fill-color: #ffffff !important;
}

html body :is(
  #lui-dark-background-contrast-guard,
  .month-card.good
) :is(.month-n, .month-tag, .month-icon, i) {
  color: #ffffff !important;
  -webkit-text-fill-color: #ffffff !important;
}

html body :is(
  #lui-dark-background-contrast-guard,
  .month-card.good
) .month-tag {
  background: rgba(255, 255, 255, 0.14) !important;
}

html body :is(
  #lui-dark-background-contrast-guard,
  .about-page .expertise-content,
  .about-page .responsible-panel
) :is(h1, h2, h3, h4, h5, h6, p, a, span, strong, small, label, i) {
  color: #ffffff !important;
  -webkit-text-fill-color: #ffffff !important;
}

/* Homepage About visual: the image is a background on .brush-photo. */
html body .luitours-about-image {
  min-height: 520px;
  align-items: stretch;
}

html body .luitours-about-image .brush-photo,
html body .luitours-about-image > img {
  width: 100%;
  height: 520px;
  min-height: 520px;
  aspect-ratio: auto;
  object-fit: cover;
  background-size: cover;
  background-position: center center;
}

@media (max-width: 991px) {
  html body .luitours-about-image,
  html body .luitours-about-image .brush-photo,
  html body .luitours-about-image > img {
    height: 420px;
    min-height: 420px;
  }
}

@media (max-width: 575px) {
  html body .luitours-about-image,
  html body .luitours-about-image .brush-photo,
  html body .luitours-about-image > img {
    height: 320px;
    min-height: 320px;
  }
}