/* =========================================================================
   Modern polish layer  —  Jaipur Darshan
   Loads AFTER the original theme and overrides it. Markup is untouched.
   Direction: refined premium travel — warm ivory ground, serif display
   headings, generous whitespace, soft layered shadows, restrained gold.
   ========================================================================= */

:root {
  /* --- brand ------------------------------------------------------------ */
  --jd-gold:        #cd821c;
  --jd-gold-deep:   #a9660f;
  --jd-gold-light:  #e5a34a;
  --jd-gold-wash:   rgba(205, 130, 28, 0.08);
  /* #cd821c as TEXT on a light ground measures ~2.8:1 — it fails AA in the
     original site too. This darker step is for gold text; the brand colour
     itself is unchanged for fills, borders and icons. */
  --jd-gold-text:   #8a5409;

  /* --- surfaces --------------------------------------------------------- */
  --jd-ivory:       #fdfbf7;
  --jd-surface:     #ffffff;
  --jd-sand:        #f7f2ea;
  --jd-ink:         #14171f;
  --jd-body:        #5b636e;
  --jd-muted:       #8a929c;
  --jd-line:        rgba(20, 23, 31, 0.08);

  /* --- elevation: layered, not a single blunt drop ---------------------- */
  --jd-sh-sm: 0 1px 2px rgba(20,23,31,.04), 0 2px 8px rgba(20,23,31,.04);
  --jd-sh-md: 0 2px 4px rgba(20,23,31,.04), 0 8px 24px rgba(20,23,31,.07);
  --jd-sh-lg: 0 4px 8px rgba(20,23,31,.05), 0 16px 40px rgba(20,23,31,.10);
  --jd-sh-gold: 0 6px 20px rgba(205,130,28,.28);

  /* --- shape & motion --------------------------------------------------- */
  --jd-r-sm: 8px;
  --jd-r:    14px;
  --jd-r-lg: 20px;
  --jd-ease: cubic-bezier(.4, 0, .2, 1);
  --jd-t:    .28s var(--jd-ease);

  /* how far the newsletter card sits over the footer — used by both the card's
     negative margin and the footer's padding, so they can never drift apart */
  --jd-overlap: clamp(80px, 8vw, 120px);

  /* Jost carries both display and body text; the fallback stack keeps the
     geometric-sans feel while the webfont is still loading. */
  --title-font: "Jost", system-ui, -apple-system, "Segoe UI", sans-serif;
  --body-font:  "Jost", system-ui, -apple-system, "Segoe UI", sans-serif;
}

/* -------------------------------------------------------------------------
   1. Ground + base typography
   ---------------------------------------------------------------------- */
body {
  background-color: var(--jd-ivory);
  color: var(--jd-body);
  font-family: var(--body-font);
  font-size: 16px;
  line-height: 1.75;
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
  text-rendering: optimizeLegibility;
}

/* Typeface and rhythm apply broadly — these never conflict with the theme. */
h1, h2, h3, h4, h5, h6,
.h1, .h2, .h3, .h4, .h5, .h6,
.sec-title, .box-title, .tour-title, .breadcumb-title, .widget_title {
  font-family: var(--title-font);
  font-weight: 600;
  letter-spacing: -0.015em;
  line-height: 1.22;
}

/* Colour is set on the ELEMENTS only, at specificity (0,0,1).
   The theme colours individual headings through classes — e.g.
   `.tour-deal__title { color: var(--white-color) }` for cards that sit on a
   photograph. Declaring ink on `.box-title` here matched that same (0,1,0)
   and, loading later, won on source order — which turned those white titles
   dark against their images. Keeping colour on the bare elements lets every
   contextual rule override it. */
h1, h2, h3, h4, h5, h6 { color: var(--jd-ink); }

.sec-title {
  font-size: clamp(1.85rem, 1.15rem + 1.9vw, 2.9rem);
  margin-bottom: .5em;
}

/* Justified text produces rivers and ragged word-gaps at these column
   widths — the theme applied it site-wide. Left-align instead. */
.Css-text-justify,
.cust_text-justify,
.trip-card-details p,
.about-text,
p.Css-text-justify {
  text-align: left !important;
  hyphens: none;
}

p { margin-bottom: 1.1rem; }

/* Script accent ("Get About Us", "Relax & Enjoy") */
.sub-title {
  font-family: "Dancing Script", cursive;
  font-size: 1.35rem;
  color: var(--jd-gold-text);
  letter-spacing: .01em;
}

/* -------------------------------------------------------------------------
   2. Hero — the original overlay bleached the photograph to near-white and
      buried the headline. Replace with a directional scrim: opaque enough
      on the left for text contrast, clear on the right so the image reads.
   ---------------------------------------------------------------------- */
.hero-1 .ot-hero-bg:before,
.Css-herobanner .ot-hero-bg:before {
  background-image: linear-gradient(
    100deg,
    rgba(14, 17, 24, .82) 0%,
    rgba(18, 22, 30, .70) 26%,
    rgba(24, 28, 36, .45) 46%,
    rgba(30, 34, 42, .18) 66%,
    rgba(30, 34, 42, .04) 82%,
    rgba(30, 34, 42, 0) 100%
  ) !important;
}

/* Slick does not initialise until main.js runs, which is after hydration and
   the whole jQuery bundle. Until then every slide is in normal flow: three
   heroes stacked, three "Relax & Enjoy" eyebrows, and a first screen several
   times taller than the one that replaces it. Show only the slide that will be
   current; slick adds .slick-initialized and takes over from there. */
.hero-slider:not(.slick-initialized) > .ot-hero-slide:not(:first-child) {
  display: none;
}

.hero-1 .ot-hero-bg {
  background-size: cover;
  background-position: center;
  transform: scale(1.03);
}

.hero-style1 { padding-block: clamp(3rem, 6vw, 6rem); max-width: 680px; }

/* The fold lands in dead ground: on a 900px screen the hero ends around 725
   and the first thing in the next band starts around 845, so the bottom of
   the window is 120px of empty white and nothing hints that the page carries
   on. Take a little off the hero's own padding and a lot off the band's lead
   in, so the top of the about photograph clears the fold and reads as more
   to come. Only the first band is touched; the rest of the page keeps its
   120px rhythm. */
@media (min-width: 992px) {
  /* Sized against the window's height rather than its width, because that is
     what the peek is competing for: on a tall window the hero takes the extra
     room, on a short one it gives some back so the next band still clears
     the fold. */
  .hero-style1 { padding-block: clamp(2.5rem, 12vh, 8.5rem); }
  .hero-1 + .space { padding-top: 64px; }
}

/* Everything above the fold — header, hero, the next band's lead-in — comes
   out of the same budget, and on a 768px laptop there is not enough of it to
   grow the hero and still show what follows. Hold both back there rather than
   letting the peek go negative, which is where the hero started. */
@media (min-width: 992px) and (max-height: 820px) {
  .hero-style1 { padding-block: clamp(2.5rem, 9vh, 5rem); }
  .hero-1 + .space { padding-top: 44px; }
}

.hero-title,
.cust_banner_text {
  font-family: var(--title-font) !important;
  color: #fff !important;
  font-size: clamp(2.4rem, 1.2rem + 3.6vw, 4.25rem) !important;
  font-weight: 600;
  line-height: 1.06 !important;
  letter-spacing: -0.025em;
  margin: 0 0 .04em !important;
  text-shadow: 0 2px 24px rgba(0, 0, 0, .35);
}

.hero-text {
  color: rgba(255, 255, 255, .93) !important;
  font-size: 1.06rem;
  line-height: 1.75;
  max-width: 34em;
  margin-top: 1.5rem;
  text-shadow: 0 1px 12px rgba(0, 0, 0, .3);
}

.Css-herobanner .hero-subtitle,
.Css-herobanner .hero-subtitle .shape { color: #fff !important; }
.Css-herobanner .hero-subtitle .shape,
.Css-herobanner .hero-subtitle .dots { background-color: rgba(255,255,255,.8) !important; }

/* Hero CTA: solid white on the dark scrim */
.Css-herobanner a.ot-btn {
  background-color: #fff !important;
  background-image: none !important;
  color: var(--jd-gold-deep) !important;
  box-shadow: 0 6px 24px rgba(0, 0, 0, .22);
}
.Css-herobanner a.ot-btn:hover {
  background-color: var(--jd-gold) !important;
  color: #fff !important;
}

/* -------------------------------------------------------------------------
   3. Buttons — pill, subtle depth, real press feedback
   ---------------------------------------------------------------------- */
.ot-btn,
.cust_ot-btn,
button.ot-btn,
a.ot-btn {
  /* inline-flex centring rather than inline-block + line-height: the theme's
     line-height equalled the font-size, so the glyph box overflowed the line
     box and the label sat ~2px high inside the pill. Flex centres the content
     box regardless of the font's metrics. */
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: .5em;
  line-height: 1.2;

  background: linear-gradient(180deg, var(--jd-gold-light) 0%, var(--jd-gold) 60%, var(--jd-gold-deep) 100%);
  color: #fff;
  border: none;
  border-radius: 999px;
  padding: 14px 32px;
  font-family: var(--body-font);
  font-weight: 600;
  font-size: .87rem;
  letter-spacing: .06em;
  /* uppercase tracking adds a trailing gap on the last letter; nudge it back
     so the label reads optically centred rather than measured-centred */
  text-indent: .06em;
  text-transform: uppercase;
  text-align: center;
  box-shadow: var(--jd-sh-gold);
  transition: transform var(--jd-t), box-shadow var(--jd-t), filter var(--jd-t);
  will-change: transform;
}
.ot-btn:hover,
.cust_ot-btn:hover {
  transform: translateY(-2px);
  box-shadow: 0 10px 28px rgba(205, 130, 28, .38);
  filter: saturate(1.06);
  color: #fff;
}
.ot-btn:active { transform: translateY(0); box-shadow: 0 3px 10px rgba(205,130,28,.3); }
.ot-btn:focus-visible {
  outline: 3px solid rgba(205, 130, 28, .45);
  outline-offset: 3px;
}

/* ---- contextual button variants -------------------------------------
   The theme inverts .ot-btn in a few places by setting only background-COLOR.
   The rule above sets `background` (the shorthand, which includes
   background-image), so the gradient painted straight over those colours —
   on the offer cards that left gold text on a gold ground, invisible until
   the dark hover sweep came in. Each variant gets its image cleared so the
   theme's colour shows through again.

   The hover sweep is .ot-btn:before (a dark rotated panel the theme scales
   up), so hover states are unaffected and keep working as designed.
   ------------------------------------------------------------------- */

/* Offer cards ("Booking Enquiry", "Appointment") — white pill, gold label */
.offer-card .ot-btn {
  background-image: none;
  background-color: #fff;
  /* --jd-gold-deep on white measures 4.57:1 — over AA but with almost no
     margin for a primary CTA at this size, so go a shade darker */
  color: #8a5409;
  box-shadow: 0 6px 18px rgba(20, 23, 31, .2);
}
.offer-card .ot-btn:hover {
  background-color: #fff;
  color: #fff;
  box-shadow: 0 10px 24px rgba(20, 23, 31, .28);
}

/* Newsletter band sits on the gold card, so its button must not be gold too */
.newsletter-wrap .ot-btn {
  background-image: none;
  background-color: var(--jd-ink);
  color: #fff;
  box-shadow: 0 6px 18px rgba(20, 23, 31, .28);
}
.newsletter-wrap .ot-btn:hover { color: #fff; }

/* "Explore All" over a photo — outlined, lets the image through */
.trip-card .ot-btn {
  background-image: none;
  background-color: transparent;
  border: 1px solid rgba(255, 255, 255, .85);
  color: #fff;
  box-shadow: none;
}
.trip-card .ot-btn:hover {
  background-color: transparent;
  color: #fff;
  box-shadow: none;
}

.offer-banner .ot-btn {
  background-image: none;
  background-color: var(--jd-ink);
  color: #fff;
}

/* "See Details" / "Read More" inline links */
.link-btn {
  color: var(--jd-gold-deep);
  font-weight: 600;
  letter-spacing: .04em;
  transition: color var(--jd-t);
  display: inline-flex;
  align-items: center;
  gap: .45em;
}
.link-btn i { transition: transform var(--jd-t); }
a:hover .link-btn i { transform: translate(3px, -3px); }

/* -------------------------------------------------------------------------
   4. Cards — rounded, layered shadow, lift on hover, image zoom
   ---------------------------------------------------------------------- */
.tour-card,
.blog-card,
.trip-card,
.feature-card {
  background: var(--jd-surface);
  border: 1px solid var(--jd-line);
  border-radius: var(--jd-r);
  box-shadow: var(--jd-sh-sm);
  overflow: hidden;
  transition: transform var(--jd-t), box-shadow var(--jd-t), border-color var(--jd-t);
  height: 100%;
}

.tour-card:hover,
.blog-card:hover,
.trip-card:hover {
  transform: translateY(-6px);
  box-shadow: var(--jd-sh-lg);
  border-color: rgba(205, 130, 28, .3);
}

.tour-card__img,
.blog-img,
.trip-card__img {
  overflow: hidden;
  border-radius: var(--jd-r) var(--jd-r) 0 0;
  background: var(--jd-sand);
}

.tour-card__img img,
.blog-img img,
.trip-card__img img {
  transition: transform .55s var(--jd-ease);
  display: block;
  width: 100%;
}
.tour-card:hover .tour-card__img img,
.blog-card:hover .blog-img img,
.trip-card:hover .trip-card__img img { transform: scale(1.06); }

.tour-card__content,
.blog-content { padding: 22px 24px 24px; }

.tour-card__title,
.blog-title {
  font-size: 1.02rem !important;
  line-height: 1.4 !important;
  font-weight: 600;
  color: var(--jd-ink);
  margin-bottom: .5rem;
  transition: color var(--jd-t);
}
a:hover .tour-card__title,
a:hover .blog-title { color: var(--jd-gold-deep); }

.tour-card__location,
.tour-meta span {
  color: var(--jd-muted);
  font-size: .855rem !important;
}
.tour-card__location i,
.tour-meta span i { color: var(--jd-gold); margin-right: .35em; }

.tour-card__rating { color: var(--jd-gold-light); letter-spacing: .06em; }

.tour-card__top {
  padding-bottom: .65rem;
  margin-bottom: .65rem;
  border-bottom: 1px solid var(--jd-line);
}
.tour-card__bottom {
  padding-top: .75rem;
  margin-top: .35rem;
  border-top: 1px solid var(--jd-line);
}

/* -------------------------------------------------------------------------
   5. Header — cleaner, softer sticky state
   ---------------------------------------------------------------------- */
.ot-header .header-top {
  background: var(--jd-ink);
  font-size: .82rem;
}
.header-links a, .header-social a { transition: color var(--jd-t); }
.header-links a:hover, .header-social a:hover { color: var(--jd-gold-light); }

.header-layout1 .logo-bg { background-color: #fbf3e6 !important; }

.main-menu > ul > li > a {
  font-family: var(--body-font);
  font-weight: 600;
  font-size: .845rem;
  letter-spacing: .055em;
  text-transform: uppercase;
  color: var(--jd-ink);
  position: relative;
  transition: color var(--jd-t);
}
/* underline that grows from the centre */
.main-menu > ul > li > a::after {
  content: "";
  position: absolute;
  left: 50%;
  bottom: 18px;
  width: 0;
  height: 2px;
  background: var(--jd-gold);
  border-radius: 2px;
  transform: translateX(-50%);
  transition: width var(--jd-t);
}
.main-menu > ul > li > a:hover { color: var(--jd-gold-deep); }
.main-menu > ul > li > a:hover::after { width: 22px; }

.sticky-wrapper.sticky .menu-area {
  background: rgba(253, 251, 247, .88);
  backdrop-filter: saturate(180%) blur(14px);
  -webkit-backdrop-filter: saturate(180%) blur(14px);
  box-shadow: var(--jd-sh-md);
}

/* -------------------------------------------------------------------------
   6. Breadcrumb banner
   ---------------------------------------------------------------------- */
.Css-bresdcumb { padding: 88px 0 !important; }
.Css-bresdcumb::before {
  background: linear-gradient(180deg, rgba(14,17,24,.72) 0%, rgba(14,17,24,.82) 100%) !important;
}
.breadcumb-title {
  font-size: clamp(2rem, 1.3rem + 2.1vw, 3.1rem) !important;
  color: #fff;
  letter-spacing: -.02em;
}
.breadcumb-menu li, .breadcumb-menu a, .breadcumb-menu span {
  font-size: .85rem !important;
  color: rgba(255,255,255,.82);
  letter-spacing: .03em;
}
.breadcumb-menu a:hover { color: var(--jd-gold-light); }

/* -------------------------------------------------------------------------
   7. Counters & feature icons
   ---------------------------------------------------------------------- */
.counter-card {
  padding: 8px 4px;
  transition: transform var(--jd-t);
}
.counter-card:hover { transform: translateY(-4px); }
.counter-card_icon {
  background: linear-gradient(145deg, var(--jd-gold-wash), rgba(205,130,28,.16)) !important;
  border: 1px solid rgba(205, 130, 28, .18);
  border-radius: 50%;
  transition: transform var(--jd-t), box-shadow var(--jd-t);
}
.counter-card:hover .counter-card_icon {
  transform: scale(1.06);
  box-shadow: 0 8px 20px rgba(205,130,28,.2);
}
.counter-card_number {
  font-family: var(--title-font);
  font-size: clamp(1.8rem, 1.4rem + 1.1vw, 2.5rem);
  color: var(--jd-ink);
  font-weight: 600;
  letter-spacing: -.02em;
}
.counter-card_text {
  color: var(--jd-muted);
  font-size: .875rem;
  letter-spacing: .04em;
  text-transform: uppercase;
}

.about-media_icon, .feature-media__icon {
  color: var(--jd-gold);
  transition: transform var(--jd-t);
}
.about-media:hover .about-media_icon { transform: translateY(-3px); }
.about-media_title { font-size: 1.05rem !important; margin-bottom: .3rem; }

/* -------------------------------------------------------------------------
   7b. Material-style outlined field
   The label rests inside the box and floats into a notch in the border once
   the control is focused or filled. Pure CSS — @mui/material would bring an
   Emotion runtime and its own theming that fights this Bootstrap-based theme.
   Emptiness is detected with :placeholder-shown, which is why every control
   carries placeholder=" ".
   ---------------------------------------------------------------------- */
.jd-field {
  position: relative;
  display: block;
}

.jd-field .jd-field__control {
  width: 100%;
  display: block;
  font-family: var(--body-font);
  font-size: .95rem;
  line-height: 1.5;
  color: var(--jd-ink);
  background-color: var(--jd-surface);
  padding: 15px 42px 15px 14px;
  border: 1px solid rgba(20, 23, 31, .22);
  border-radius: var(--jd-r-sm);
  outline: none;
  transition: border-color var(--jd-t), box-shadow var(--jd-t);
  appearance: none;
}
.jd-field .jd-field__control::placeholder { color: transparent; }

.jd-field .jd-field__control:hover { border-color: rgba(20, 23, 31, .42); }

.jd-field .jd-field__control:focus {
  border-color: var(--jd-gold);
  /* a second inset ring instead of border-width:2px, which would reflow */
  box-shadow: inset 0 0 0 1px var(--jd-gold);
}

/* the modifier sits on .jd-field itself, so no descendant step here */
.jd-field.jd-field--multiline .jd-field__control {
  min-height: 108px;
  resize: vertical;
  padding-top: 15px;
}

/* the label — sits over the border, its own background cutting the notch */
.jd-field__label {
  position: absolute;
  left: 10px;
  top: 15px;
  padding: 0 5px;
  margin: 0;
  max-width: calc(100% - 52px);
  font-size: .95rem;
  line-height: 1.5;
  color: var(--jd-muted);
  background-color: var(--jd-surface);
  pointer-events: none;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
  transform-origin: left top;
  transition: transform var(--jd-t), color var(--jd-t);
}

/* floated: up onto the border line, scaled down */
.jd-field .jd-field__control:focus ~ .jd-field__label,
.jd-field .jd-field__control:not(:placeholder-shown) ~ .jd-field__label {
  transform: translateY(-24px) scale(.78);
}
.jd-field .jd-field__control:focus ~ .jd-field__label { color: var(--jd-gold-deep); }

.jd-field__icon {
  position: absolute;
  right: 15px;
  top: 17px;
  font-size: .95rem;
  color: var(--jd-muted);
  pointer-events: none;
  transition: color var(--jd-t);
}
.jd-field .jd-field__control:focus ~ .jd-field__icon { color: var(--jd-gold); }

/* ---- invalid state ---------------------------------------------------
   Colour alone would fail WCAG 1.4.1, so the message text carries the
   meaning and aria-invalid / aria-describedby carry it to assistive tech. */
.jd-field--invalid .jd-field__control {
  border-color: #c02626;
}
.jd-field--invalid .jd-field__control:focus {
  border-color: #c02626;
  box-shadow: inset 0 0 0 1px #c02626;
}
.jd-field--invalid .jd-field__label,
.jd-field--invalid .jd-field__control:focus ~ .jd-field__label {
  color: #a51f1f;
}
.jd-field--invalid .jd-field__icon,
.jd-field--invalid .jd-field__control:focus ~ .jd-field__icon {
  color: #c02626;
}

.jd-field__error {
  margin: 5px 0 0 2px;
  font-size: .8rem;
  line-height: 1.4;
  color: #a51f1f;
  display: flex;
  align-items: flex-start;
  gap: .35em;
}
.jd-field__error::before {
  content: "\f06a";              /* exclamation-circle */
  font-family: "Font Awesome 6 Pro", "Font Awesome 5 Pro", sans-serif;
  font-weight: 900;
  font-size: .78rem;
  line-height: 1.5;
  flex: 0 0 auto;
}

/* the error sits below the box, so the field needs room in tight stacks */
.jd-field--invalid { margin-bottom: 2px; }

.jd-captcha .jd-field__error { margin-top: 6px; }

/* ---- form-level messages --------------------------------------------- */

/* Error banner above the fields. The theme's own `.form-messages` element was
   dropped: main.js captures it at init and writes AJAX failures into it, so
   the two sources fought over the same node. */
.jd-form-alert {
  display: flex;
  align-items: flex-start;
  gap: .6em;
  margin-bottom: 18px;
  padding: 12px 14px;
  border: 1px solid rgba(192, 38, 38, .3);
  border-left: 3px solid #c02626;
  border-radius: var(--jd-r-sm);
  background: #fdf3f3;
  color: #8f1c1c;
  font-size: .9rem;
  line-height: 1.5;
}
.jd-form-alert i { margin-top: .15em; color: #c02626; }

/* Success replaces the form entirely */
.jd-form-sent {
  text-align: center;
  padding: 34px 22px 30px;
}
.jd-form-sent__icon {
  display: grid;
  place-items: center;
  width: 62px;
  height: 62px;
  margin: 0 auto 18px;
  border-radius: 50%;
  background: linear-gradient(145deg, #d9f2e1, #b6e6c6);
  border: 1px solid rgba(21, 128, 61, .25);
  color: #15803d;
  font-size: 1.5rem;
}
.jd-form-sent__title {
  font-family: var(--title-font);
  font-size: 1.5rem;
  color: var(--jd-ink);
  margin: 0 0 .45rem;
}
.jd-form-sent__text {
  color: var(--jd-body);
  font-size: .95rem;
  line-height: 1.65;
  max-width: 34ch;
  margin: 0 auto 22px;
}
.jd-form-sent__again {
  background: none;
  border: none;
  padding: 0;
  font-family: var(--body-font);
  font-size: .87rem;
  font-weight: 600;
  letter-spacing: .04em;
  color: var(--jd-gold-text);
  border-bottom: 1px solid currentColor;
  cursor: pointer;
  transition: color var(--jd-t);
}
.jd-form-sent__again:hover { color: var(--jd-ink); }

/* read-only (the pre-filled package name on tour detail pages) */
.jd-field .jd-field__control[readonly] {
  background-color: var(--jd-surface);
  color: var(--jd-body);
  cursor: default;
}
.jd-field .jd-field__control[readonly]:focus {
  border-color: rgba(20, 23, 31, .22);
  box-shadow: none;
}


/* on the dark sidebar/modal panels the notch must match the panel, not white */
.widget-tour-book .jd-field__control,
.widget-tour-book .jd-field__label { background-color: var(--jd-surface); }

/* -------------------------------------------------------------------------
   8. Forms — the enquiry forms are the site's conversion surface
   ---------------------------------------------------------------------- */
.form-control,
.cust_form-control,
.form-control.style3,
textarea.form-control,
.form-select {
  background: var(--jd-surface) !important;
  border: 1px solid var(--jd-line) !important;
  border-radius: var(--jd-r-sm) !important;
  padding: 13px 16px !important;
  font-size: .94rem;
  color: var(--jd-ink);
  transition: border-color var(--jd-t), box-shadow var(--jd-t), background var(--jd-t);
  box-shadow: none;
}
.form-control::placeholder { color: var(--jd-muted); opacity: 1; }
.form-control:focus,
.cust_form-control:focus,
textarea.form-control:focus {
  border-color: var(--jd-gold) !important;
  box-shadow: 0 0 0 3px rgba(205, 130, 28, .14) !important;
  outline: none;
  background: #fff !important;
}

.widget-tour-book {
  background: var(--jd-surface);
  border: 1px solid var(--jd-line);
  border-radius: var(--jd-r);
  box-shadow: var(--jd-sh-md);
  overflow: hidden;
}
.widget-tour-book .top {
  background: linear-gradient(135deg, var(--jd-gold) 0%, var(--jd-gold-deep) 100%);
  padding: 18px 24px !important;
  border-radius: 0 !important;
  margin-bottom: 0 !important;
  display: flex;
  align-items: center;
  justify-content: space-between;
}
.widget-tour-book .top .title {
  color: #fff;
  font-size: 1.15rem;
  margin: 0;
  font-weight: 600;
}
.widget-tour-book form { padding: 24px; }
.contact-form.cust_contact-form { padding: 24px !important; }

.form-messages .text-success { color: #15803d !important; font-weight: 600; }
.form-messages .text-danger  { color: #b91c1c !important; font-weight: 600; }

.form-btn button[disabled] { opacity: .65; cursor: not-allowed; transform: none; }

/* -------------------------------------------------------------------------
   8a. Tour Enquiry modal
   Purpose-built rather than theme overrides — see TourEnquiryModal.tsx for
   why the original three nested surfaces were collapsed into one.
   ---------------------------------------------------------------------- */
.jd-modal__dialog {
  max-width: 480px;
  margin: 1.75rem auto;
}

.jd-modal__content {
  border: none;
  border-radius: var(--jd-r);
  overflow: hidden;            /* lets the header sit flush to the corners */
  box-shadow: 0 24px 60px rgba(20, 23, 31, .28);
  background: var(--jd-surface);
}

.jd-modal__head {
  display: flex;
  align-items: flex-start;
  justify-content: space-between;
  gap: 16px;
  padding: 20px 24px;
  background: linear-gradient(135deg, var(--jd-gold) 0%, var(--jd-gold-deep) 100%);
}
.jd-modal__heading { min-width: 0; }
.jd-modal__title {
  font-family: var(--title-font);
  font-size: 1.3rem;
  font-weight: 600;
  color: #fff;
  margin: 0 0 2px;
  line-height: 1.2;
}
.jd-modal__sub {
  margin: 0;
  font-size: .84rem;
  line-height: 1.45;
  color: rgba(255, 255, 255, .85);
}

.jd-modal__close {
  flex: 0 0 auto;
  width: 32px;
  height: 32px;
  display: grid;
  place-items: center;
  border: none;
  border-radius: 50%;
  background: rgba(255, 255, 255, .16);
  color: #fff;
  font-size: .95rem;
  line-height: 1;
  cursor: pointer;
  transition: background var(--jd-t), transform var(--jd-t);
}
.jd-modal__close:hover {
  background: rgba(255, 255, 255, .3);
  transform: rotate(90deg);
}

.jd-modal__body { padding: 24px; }

/* The theme's .contact-form carries `padding: 120px` and a smoke background;
   this form already sits on the modal's own surface, so strip both. */
.jd-modal-form {
  padding: 0 !important;
  background-color: transparent !important;
  border-radius: 0 !important;
}
.jd-modal-form .form-group { margin-bottom: 14px; }
.jd-modal-form .form-btn { margin-top: 4px; }
.jd-modal-form .g-recaptcha { margin-bottom: 2px; }
.jd-modal-form .form-messages { margin-top: 10px !important; }

@media (max-width: 575px) {
  .jd-modal__dialog { max-width: none; margin: 12px; }
  .jd-modal__body { padding: 18px; }
  .jd-modal__head { padding: 16px 18px; }
}

/* -------------------------------------------------------------------------
   8b. Contact page
   Its markup is hand-written (app/contact/page.tsx) rather than converted,
   so these are purpose-built classes rather than theme overrides.
   ---------------------------------------------------------------------- */
.jd-contact {
  padding-block: clamp(3.5rem, 6vw, 6rem);
}

.jd-contact__cards {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(260px, 1fr));
  gap: 24px;
  margin-bottom: clamp(2.5rem, 4vw, 4rem);
}

.jd-info-card {
  position: relative;
  display: flex;
  align-items: flex-start;
  gap: 18px;
  background: var(--jd-surface);
  border: 1px solid var(--jd-line);
  border-radius: var(--jd-r);
  box-shadow: var(--jd-sh-sm);
  padding: 26px 26px 26px 24px;
  overflow: hidden;
  transition: transform var(--jd-t), box-shadow var(--jd-t), border-color var(--jd-t);
}

/* gold rule down the leading edge, drawn in on hover */
.jd-info-card::before {
  content: "";
  position: absolute;
  left: 0;
  top: 0;
  bottom: 0;
  width: 3px;
  background: linear-gradient(180deg, var(--jd-gold-light), var(--jd-gold-deep));
  transform: scaleY(0);
  transform-origin: top;
  transition: transform var(--jd-t);
}
.jd-info-card:hover::before { transform: scaleY(1); }
.jd-info-card:hover {
  transform: translateY(-4px);
  box-shadow: var(--jd-sh-md);
  border-color: rgba(205, 130, 28, .28);
}

/* solid gold chip — the old pale wash left the icon almost invisible */
.jd-info-card__icon {
  display: grid;
  place-items: center;
  flex: 0 0 auto;
  width: 46px;
  height: 46px;
  border-radius: 13px;
  background: linear-gradient(145deg, var(--jd-gold-light), var(--jd-gold-deep));
  box-shadow: 0 4px 12px rgba(205, 130, 28, .3);
  color: #fff;
  font-size: 1.05rem;
  transition: transform var(--jd-t);
}
.jd-info-card:hover .jd-info-card__icon { transform: scale(1.06) rotate(-4deg); }

.jd-info-card__body { min-width: 0; }

/* eyebrow label — the content is the thing worth reading, not the heading */
.jd-info-card__title {
  font-family: var(--body-font);
  font-size: .72rem;
  font-weight: 700;
  letter-spacing: .13em;
  text-transform: uppercase;
  color: var(--jd-muted);
  margin: 2px 0 10px;
}

.jd-info-card__list {
  list-style: none;
  margin: 0;
  padding: 0;
}
/* four phone numbers stacked made this card twice the height of the others */
.jd-info-card__list--split {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 2px 16px;
}
.jd-info-card__list li + li { margin-top: 2px; }
.jd-info-card__list--split li + li { margin-top: 0; }

.jd-info-card__list a,
.jd-info-card__text {
  color: var(--jd-ink);
  font-size: .95rem;
  line-height: 1.6;
  transition: color var(--jd-t);
  word-break: break-word;
}
.jd-info-card__list a:hover { color: var(--jd-gold-deep); }
.jd-info-card__text { margin: 0; color: var(--jd-body); }

/* form + map */
.jd-contact__main {
  display: grid;
  grid-template-columns: minmax(0, 7fr) minmax(0, 5fr);
  gap: 28px;
  align-items: stretch;
}

.jd-contact__form {
  background: var(--jd-surface);
  border: 1px solid var(--jd-line);
  border-radius: var(--jd-r);
  box-shadow: var(--jd-sh-md);
  padding: clamp(1.5rem, 2.4vw, 2.25rem);
}

.jd-panel-head { margin-bottom: 1.35rem; }
.jd-panel-head__title {
  font-size: clamp(1.5rem, 1.15rem + 1vw, 1.95rem);
  margin-bottom: .3rem;
}
.jd-panel-head__sub {
  color: var(--jd-muted);
  font-size: .93rem;
  line-height: 1.55;
  margin: 0;
  max-width: 52ch;
}

/* The theme's .contact-form is a standalone block: `padding: 120px` plus its
   own smoke background and radius. Inside this panel that is a second box
   around the fields, so strip it back to a plain form. */
.jd-contact-form {
  padding: 0 !important;
  background-color: transparent !important;
  border-radius: 0 !important;
}
.jd-contact-form .row { --bs-gutter-x: 18px; }
.jd-contact-form .form-group { margin-bottom: 14px; }
.jd-contact-form textarea.form-control {
  min-height: 108px;
  resize: vertical;
}

/* captcha and submit on one line — see the note in EnquiryForm */
.jd-form-actions {
  display: flex;
  align-items: center;
  gap: 20px;
  flex-wrap: wrap;
  margin-top: 4px;
}
.jd-form-actions .ot-btn { min-width: 175px; }
/* the widget renders in an iframe with its own 78px box; don't add to it */
.jd-form-actions .g-recaptcha { line-height: 0; }

@media (max-width: 480px) {
  .jd-form-actions { gap: 14px; }
  .jd-form-actions .ot-btn { width: 100%; }
}

.jd-contact__map {
  border-radius: var(--jd-r);
  overflow: hidden;
  border: 1px solid var(--jd-line);
  box-shadow: var(--jd-sh-md);
  min-height: 420px;
  background: var(--jd-sand);
}
.jd-contact__map iframe {
  display: block;
  width: 100%;
  height: 100%;
  min-height: 420px;
  border: 0;
}

@media (max-width: 991px) {
  .jd-contact__main { grid-template-columns: 1fr; }
  .jd-contact__map { min-height: 320px; }
  .jd-contact__map iframe { min-height: 320px; }
}

/* -------------------------------------------------------------------------
   9. Sections, footer, misc
   ---------------------------------------------------------------------- */
.bg-smoke, .cust_bg-smoke { background-color: var(--jd-sand) !important; }

/* Newsletter band overlapping the footer.
   Done here rather than by the theme's JS, which added half the section height
   to whatever padding-top the footer already had — not idempotent, so it
   compounded on every client-side navigation and opened a growing dead gap
   between the card and the footer content. */
.jd-newsletter-section {
  padding-bottom: 0;
}
.jd-newsletter-section .newsletter-wrap {
  margin-bottom: calc(var(--jd-overlap) * -1);
}
.footer-wrapper.cust_footer-wrapper {
  /* exactly enough to clear the overlapping card — the breathing space below
     it comes from .widget-area, so adding it here too would double up.
     !important because layout-inline.css pins this to 164px under 768px. */
  padding-top: var(--jd-overlap) !important;
}
.footer-wrapper .widget-area {
  /* the theme used --section-space (120px) here, which stacked on top of the
     footer padding that already clears the card and left a dead gap */
  padding-top: 4rem;
}

.newsletter-wrap {
  border-radius: var(--jd-r-lg);
  box-shadow: var(--jd-sh-lg);
  padding: clamp(2.25rem, 4vw, 3.25rem) clamp(1.5rem, 4vw, 3rem);
  position: relative;
  /* must stay above .footer-wrapper, which the theme gives z-index: 2 —
     at equal z-index the footer wins on DOM order and clips this card */
  z-index: 3;
}

.footer-wrapper { background-color: var(--jd-ink); }
.footer-wrapper .widget_title {
  color: #fff;
  font-size: 1.12rem;
  margin-bottom: 1.35rem;
  position: relative;
  padding-bottom: .7rem;
}
.footer-wrapper .widget_title::after {
  content: "";
  position: absolute;
  left: 0;
  bottom: 0;
  width: 34px;
  height: 2px;
  background: var(--jd-gold);
  border-radius: 2px;
}
.footer-wrapper .menu a,
.footer-wrapper .info-box_text,
.footer-wrapper .info-box_link,
.footer-wrapper .about-text { color: rgba(255,255,255,.72); }
.footer-wrapper .menu a { transition: color var(--jd-t), padding-left var(--jd-t); }
.footer-wrapper .menu a:hover { color: var(--jd-gold-light); padding-left: 5px; }
.footer-wrapper .info-box_link:hover { color: var(--jd-gold-light); }
/* The theme puts a white glyph on a gold tile here. Recolouring the glyph
   gold painted it onto its own background, so the footer showed three blank
   orange squares where the address, phone and email icons should be.

   The tile is 25px and sets no line-height, so the glyph sat 3px from the top
   with 12px of space under it — and since every icon has its own height, the
   three of them lined up differently. Centre it and let the size be the same
   for all three. */
.footer-wrapper .info-box_icon {
  color: #fff;
  display: grid;
  place-items: center;
  font-size: 12px;
  line-height: 1;
}

.ot-social a, .footer-wrapper .ot-social a {
  border-radius: 50%;
  transition: transform var(--jd-t), background var(--jd-t), color var(--jd-t);
}
.ot-social a:hover { transform: translateY(-3px); background: var(--jd-gold); color: #fff; }

.sidebar-gallery .gallery-thumb {
  border-radius: var(--jd-r-sm);
  overflow: hidden;
}
.sidebar-gallery img { transition: transform .5s var(--jd-ease); }
.sidebar-gallery .gallery-thumb:hover img { transform: scale(1.1); }

.copyright-wrap {
  border-top: 1px solid rgba(255,255,255,.09);
  background: transparent;
}
.copyright-text { color: rgba(255,255,255,.6); font-size: .87rem; }

/* Tour detail tabs */
.tour-tab .nav-link {
  border-radius: 999px !important;
  font-size: .85rem;
  letter-spacing: .04em;
}
.description-table th {
  font-family: var(--body-font);
  font-weight: 600;
  color: var(--jd-ink);
  background: var(--jd-sand);
}
.description-table td, .description-table th {
  border-color: var(--jd-line);
  padding: 14px 16px;
}

/* Detail-page rich HTML from the DB */
.tab-pane img { border-radius: var(--jd-r-sm); max-width: 100%; height: auto; }

/* Scroll-to-top ring */
.scroll-top { box-shadow: var(--jd-sh-md); }
.scroll-top .progress-circle path { stroke: var(--jd-gold); }

/* WhatsApp launcher.
   The theme wrapped a PNG in a padded pill: 20px of side padding plus the
   logo's own speech-bubble tail meant the green disc never sat where the
   `right` offset said it did — on a phone it drifted into the middle of the
   screen. A fixed circular button with an inline glyph lands where it is
   aimed and scales without the PNG's grey fringe. */
a.blantershow-chat {
  width: 54px;
  height: 54px;
  padding: 0;
  display: grid;
  /* The theme rule this replaces also sets justify-content: space-between.
     It survives the switch from flex to grid, where it parks the single
     column track against the left edge — which is why the glyph sat in the
     top-left corner of the disc rather than in the middle of it. */
  place-content: center;
  place-items: center;
  border-radius: 50%;
  background: #25d366;
  box-shadow: 0 6px 18px rgba(18, 140, 70, .34);
  transition: transform var(--jd-t), box-shadow var(--jd-t);
  z-index: 100;   /* theme shipped 98, under the bottom bar (99) */
  right: 100px;
  bottom: 28px;
}
a.blantershow-chat:hover {
  transform: scale(1.06);
  box-shadow: 0 10px 24px rgba(18, 140, 70, .42);
}
a.blantershow-chat svg {
  width: 30px;
  height: 30px;
  margin: 0;
  transform: none;          /* theme scaled the old inline svg by 1.2 */
  fill: #fff;
  display: block;
}

/* -------------------------------------------------------------------------
   9b. Mobile bottom bar
   The theme's only small-screen navigation is a hamburger in the header,
   which scrolls away. See MobileBottomBar.tsx.
   ---------------------------------------------------------------------- */
.jd-bottombar {
  position: fixed;
  left: 0;
  right: 0;
  bottom: 0;
  z-index: 99;
  display: none;                       /* shown under 992px, below */
  background: rgba(255, 255, 255, .96);
  backdrop-filter: saturate(180%) blur(14px);
  -webkit-backdrop-filter: saturate(180%) blur(14px);
  border-top: 1px solid var(--jd-line);
  box-shadow: 0 -4px 20px rgba(20, 23, 31, .10);
  /* clear the iPhone home indicator */
  padding-bottom: env(safe-area-inset-bottom, 0px);
}

.jd-bottombar__list {
  display: flex;
  align-items: stretch;
  margin: 0;
  padding: 0;
  list-style: none;
}
.jd-bottombar__item { flex: 1 1 0; min-width: 0; }

.jd-bottombar__btn {
  width: 100%;
  height: 100%;
  min-height: 58px;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: 4px;
  padding: 6px 2px;
  border: none;
  background: none;
  /* --jd-muted is a label grey; against the bar it measures 3.1:1, and these
     are 10px uppercase, the hardest text on the page to read. */
  color: #5c636d;
  font-family: var(--body-font);
  /* The labels were carrying the row: 10.5px at 600 with wide tracking read
     louder than the 18px icons above them. Let the icon lead and the word
     confirm it. */
  font-size: .625rem;
  font-weight: 500;
  letter-spacing: .02em;
  line-height: 1;
  text-transform: uppercase;
  cursor: pointer;
  transition: color var(--jd-t);
  -webkit-tap-highlight-color: transparent;
}

/* One shape for the whole row: every icon sits in a pill of the same size.
   Normally it is invisible, on the current page it tints, and on the enquiry
   action it fills. That way the emphasis is a change of colour inside a shape
   the row already has, instead of a slab that fights the four icons beside
   it — which is what the full-height gold block was doing. */
.jd-bottombar__icon {
  display: grid;
  place-items: center;
  width: 46px;
  height: 26px;
  border-radius: 999px;
  font-size: 1.2rem;
  line-height: 1;
  transition: background var(--jd-t), color var(--jd-t);
}
.jd-bottombar__label {
  max-width: 100%;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.jd-bottombar__btn:hover { color: var(--jd-gold-text); }

/* current page */
.jd-bottombar__btn--active { color: var(--jd-gold-text); font-weight: 600; }
.jd-bottombar__btn--active .jd-bottombar__icon {
  background: rgba(205, 130, 28, .14);
  color: var(--jd-gold-deep);
}

/* the enquiry action — the same pill, filled */
.jd-bottombar__btn--cta { color: var(--jd-gold-text); }
.jd-bottombar__btn--cta .jd-bottombar__icon {
  background: linear-gradient(145deg, var(--jd-gold-light), var(--jd-gold-deep));
  box-shadow: 0 2px 8px rgba(205, 130, 28, .32);
  color: #fff;
  font-size: 1.05rem;
}
.jd-bottombar__btn--cta:hover { color: var(--jd-gold-text); }
.jd-bottombar__btn--cta:active .jd-bottombar__icon {
  transform: scale(.94);
}

@media (max-width: 991px) {
  .jd-bottombar { display: block; }

  /* keep the bar from covering the end of the page */
  body { padding-bottom: calc(60px + env(safe-area-inset-bottom, 0px)); }

  /* Two 50px discs stacked in the right margin of a 390px screen land on top
     of body copy — on the home page the ring sat squarely in the middle of a
     sentence. Back-to-top is the one that can go: the fixed bar below already
     carries the navigation it was there to rescue, so on a phone it earns
     nothing and costs a paragraph. That leaves WhatsApp as the only floating
     thing, small and tucked into the corner. */
  .scroll-top { display: none !important; }

  a.blantershow-chat {
    width: 48px;
    height: 48px;
    right: 12px;
    bottom: calc(70px + env(safe-area-inset-bottom, 0px));
    box-shadow: 0 4px 12px rgba(18, 140, 70, .30);
  }
  a.blantershow-chat svg { width: 26px; height: 26px; }
}

/* Five labelled items in 320px: PACKAGES and GALLERY run to the cell edge and
   ENQUIRE runs to the pill's. Give the type a little less to say. */
@media (max-width: 359px) {
  .jd-bottombar__btn { font-size: .6rem; letter-spacing: .01em; padding-inline: 0; }
  /* a 64px cell leaves the 46px pills almost touching */
  .jd-bottombar__icon { width: 40px; font-size: 1.1rem; }
}

/* -------------------------------------------------------------------------
   9c. Audit fixes
   ---------------------------------------------------------------------- */

/* --jd-muted is a label colour; on body copy over white it lands near 2.9:1,
   under the 4.5 small text needs. These two were reading as decoration. */
.counter-card_text { color: #5c636d; }
.trip-card-details .trip-text { color: #545b63; }
.tour-card .tour-meta span,
.tour-card__location { color: #5c636d; }

/* The footer copyright link was distinguished from the sentence around it by
   colour alone, which a reader who cannot separate the two hues loses. */
.copyright-text a { text-decoration: underline; text-underline-offset: 2px; }

/* Both of these pin one axis of an image and let the other be forced by a
   width rule, so the picture stretches. The logo is 2202x794; at 54px tall it
   wants 150px of width, and the theme was giving it 140. */
.cust_logo_img { width: auto !important; }
.fifty_img_height { width: 100%; object-fit: cover; }

/* -------------------------------------------------------------------------
   10. Accessibility & responsive
   ---------------------------------------------------------------------- */
a:focus-visible, button:focus-visible, input:focus-visible, textarea:focus-visible {
  outline: 3px solid rgba(205, 130, 28, .45);
  outline-offset: 2px;
  border-radius: 4px;
}

/* The Material field already signals focus with a gold border, an inset ring
   and a coloured label; the generic outline on top reads as a double halo. */
.jd-field__control:focus-visible { outline: none; }

img { max-width: 100%; }

/* The four contact numbers. They have no break opportunities in them, so a
   cell narrower than a number overflows rather than wrapping — which is what
   the bootstrap columns were already doing on desktop. */
/* Three separate gaps stack under the footer's last element — the gallery
   button. Its wrapper carries a 60px bottom margin, the widget another 40px
   that collapses into it, and the widget area 75px of padding: 135px of empty
   ground with nothing below it but the copyright strip. The first two are
   "space before the next widget" margins, and in the last column there is no
   next widget, on any screen size. */
.widget-area .footer-widget .sec-btn { margin-bottom: 0; }

/* The widget margin is real when widgets stack — it is what separates them —
   so it cannot simply be removed. What is wrong is that the bottom row also
   carries it with nothing underneath. Let the row absorb exactly one widget's
   worth; that holds at every breakpoint, whether the widgets sit four across,
   two by two, or in a single column. */
.widget-area .row { margin-bottom: -40px; }

/* What is left is the widget area's own padding, set back when it sat under
   135px of margin. Bring it back toward the 64px above the row. */
@media (min-width: 992px) {
  .widget-area { padding-bottom: 60px; }
}

.info-box_phones {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  column-gap: 14px;
  row-gap: 2px;
}

/* A phone number has no break opportunity in it, so a cell narrower than one
   overflows instead of wrapping — at the theme's 260px the two columns ran
   into each other with no gap at all. Widen the widget to what its own
   content measures: 35px indent + two 120px numbers + the gap. */
.ot-widget-contact { max-width: 290px; }

@media (max-width: 991px) {
  /* -- Section rhythm -----------------------------------------------------
     Every band on the site derives its top and bottom padding from this one
     variable, so two stacked sections put 80 + 80 = 160px of empty page
     between them — a fifth of an 844px screen spent on nothing. The theme
     already halves the desktop figure here; it just does not halve it far
     enough for a phone. Retuning the variable keeps the .space-extra
     variants in proportion, since they are all calc() off the same value. */
  :root { --section-space-mobile: 56px; }

  /* The contact widget is capped at a 260px desktop column, so on a 350px
     phone it throws away 90px: the address breaks a line early and the two
     phone columns have nowhere to sit. */
  .ot-widget-contact { max-width: none; }

  /* Quick Links runs one item per row in a 350px column, and the longest
     label is 135px — more than half the width is blank down the right. Two
     columns fit without any label wrapping. */
  .footer-widget .menu-all-pages-container .menu {
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    column-gap: 14px;
  }

  /* -- Gutters ------------------------------------------------------------
     Bootstrap's 12px container padding is a desktop number that survived the
     move down. At 390px every heading, paragraph and card edge ends up 12px
     from the glass, which is what makes the page read as cramped — no single
     section is wrong, they are all just too close to the edge. Rows subtract
     12px and columns add it back, so widening the container walks the content
     inward without disturbing the grid. */
  .container,
  .custom-container { padding-inline: 20px; }

  /* -- Header -------------------------------------------------------------
     111px of chrome on an 844px screen, and it is sticky, so it costs that on
     every screenful. A third of it is a social strip carrying links the
     footer already lists — on a phone it is the first thing to go. */
  .header-top { display: none; }
  .header-layout1 .header-logo img { height: 44px !important; }
  .ot-menu-toggle {
    width: 44px;
    height: 44px;
    font-size: 17px;
    border-radius: 12px;
  }

  /* -- Hero ---------------------------------------------------------------
     The fluid title bottoms out at 2.4rem, which was sized against a desktop
     measure: at 390px it throws a three-word headline onto three lines and
     leaves the paragraph six deep underneath. Give the phone its own scale. */
  /* The slide is a fixed 520px and the copy sat at the top of it, so the
     hero always ended on 50-odd px of dead scrim. Centre it in the box the
     slide already has — no extra height, just the space used. */
  .hero-style1 {
    max-width: 100%;
    min-height: 360px;
    display: flex;
    flex-direction: column;
    align-items: flex-start;   /* or the button stretches edge to edge */
    justify-content: center;
    padding-block: 2rem;
  }
  /* With the paragraph gone there is only a headline and a button to keep
     legible, so the scrim no longer has to flatten the whole photograph. Keep
     it light through the middle, where the monument sits, and let it settle
     at the top and bottom where the type actually lands. */
  .hero-1 .ot-hero-bg:before,
  .Css-herobanner .ot-hero-bg:before {
    background-image: linear-gradient(
      180deg,
      rgba(14,17,24,.44) 0%,
      rgba(14,17,24,.34) 46%,
      rgba(14,17,24,.42) 100%
    ) !important;
  }
  .hero-title,
  .cust_banner_text {
    font-size: clamp(2rem, 1rem + 4vw, 2.5rem) !important;
    line-height: 1.1 !important;
    letter-spacing: -.02em;
    /* The scrim is light now, so the contrast is bought locally: a tight
       shadow to hold the letterforms and a wide soft one that darkens only
       the sandstone immediately behind them, rather than the whole frame. */
    text-shadow:
      0 1px 2px rgba(0, 0, 0, .5),
      0 2px 10px rgba(0, 0, 0, .55),
      0 0 36px rgba(0, 0, 0, .45);
  }
  .hero-subtitle {
    text-shadow: 0 1px 2px rgba(0, 0, 0, .5), 0 0 20px rgba(0, 0, 0, .5);
  }

  /* Six lines of body copy over the picture, on the screen with the least room
     for either. The headline and the button say the same thing in the space of
     a glance; the sentence stays in the markup for desktop and for crawlers. */
  .hero-text { display: none; }
  .Css-herobanner a.ot-btn { margin-top: 1.6rem; }

  /* The dashed arc is positioned off the left of the about collage. There is
     no bleed room at this width — it just reads as a stray line at the edge. */
  .img-box1 .shape1 { display: none; }

  .tour-card__content, .blog-content { padding: 18px 18px 20px; }
  .Css-bresdcumb { padding: 60px 0 !important; }
}

/* Why Choose Us drops to a single column below 400px, which turns six
   one-line features into roughly three screenfuls of scrolling — an 80px ring
   and a two-word heading do not need 350px of width each. Two columns fit
   comfortably once the ring comes down to 64px. */
@media (max-width: 575px) {
  .feature-media-wrap {
    grid-template-columns: repeat(2, minmax(0, 1fr));
    justify-content: stretch;
    gap: 30px 14px;
  }
  .feature-media { max-width: none; }
  .feature-media__icon {
    width: 64px;
    height: 64px;
    line-height: 56px;
    font-size: 24px;
    border-width: 4px;
  }
  .feature-media__title { font-size: 1rem; }
}

/* The two about photographs carry width AND height in a style attribute —
   420x455 and 274x327 — against sources that are 564x934 and 426x640. The
   boxes are the layout the page wants; the stretch is not. Cropping to fill
   them keeps every measurement the design depends on and drops the squash. */
.img-box1 .img1 img,
.img-box1 .img2 img { object-fit: cover; }

/* On a phone the base photo is 350 wide and the inset covers 245 of it, so
   what is left of the picture underneath is a 105px strip that reads as a
   mis-crop rather than a composition. Give the inset a little less. */
@media (max-width: 767px) {
  .img-box1 .img1 img { height: 340px !important; }
  .img-box1 .img2 { max-width: 56%; }
  .img-box1 .img2 img { height: 230px !important; }
}

/* Popular Destinations is an accordion: the open card widens and the closed
   ones stay as clickable spines. Four of them need 645px and a phone has 390,
   so flex compresses every card at once — the open one down to 178px and the
   spines to 59px slivers that are too narrow to read or to hit. Show the open
   card alone at full width; the arrows above it already step through all four
   and stay in sync with the text slider. */
@media (max-width: 767px) {
  .trip-tab { gap: 0; }
  .trip-tab .trip-card {
    flex: 0 0 0;
    min-width: 0;
    overflow: hidden;
    opacity: 0;
    pointer-events: none;
  }
  .trip-tab .trip-card.active {
    flex: 1 1 100%;
    opacity: 1;
    pointer-events: auto;
  }
}

@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after {
    animation-duration: .01ms !important;
    transition-duration: .01ms !important;
    scroll-behavior: auto !important;
  }
  .tour-card:hover, .blog-card:hover, .ot-btn:hover { transform: none; }
}

/* Gold used as TEXT on light grounds — see --jd-gold-text.
   Specificity is matched to the theme rule in each case: .text-theme is
   declared !important there, and the others are scoped selectors. */
.trip-card-details .subtitle,
.recent-post .tour-price .price,
.tour-card .price,
.team-desig a,
.team-desig {
  color: var(--jd-gold-text);
}
.text-theme { color: var(--jd-gold-text) !important; }