/* ============================================================
   LUXURY UNLOCKED — MASAI MARA TOURS
   FULL REPLACEMENT CSS
   SOURCE: ZIP page-tour.jsx + base.css

   IMPORTANT:
   The "Major Indian Cities" block below is mapped DIRECTLY to:
     .cities-grid
     .city
     .city img
     .city::after
     .city .cc
   from the ZIP Tour page.

   Existing city images and city names are retained.
   Long city descriptions are hidden visually as permitted.
   ============================================================ */


/* ============================================================
   01. ZIP TOKENS
   ============================================================ */

:root{
  --paper:#FAF7F0;
  --paper-2:#F1EADC;
  --paper-3:#EAE1CF;

  --ink:#211C15;
  --ink-soft:#463F34;
  --muted:#8A7F6E;

  --line:rgba(33,28,21,.16);
  --line-soft:rgba(33,28,21,.08);

  --accent:#C49A4C;
  --accent-deep:#6E4E18;

  --dark:#1C1813;
  --dark-2:#252017;

  --on-dark:#F2EBDC;
  --on-dark-muted:#A99E89;

  --serif:'Cormorant Garamond',Georgia,'Times New Roman',serif;
  --sans:'Jost',system-ui,-apple-system,BlinkMacSystemFont,'Segoe UI',sans-serif;

  --maxw:1300px;
  --gut:clamp(20px,5.2vw,72px);

  --ease:cubic-bezier(.22,.61,.36,1);
}


/* ============================================================
   02. PAGE BASE — base.css
   ============================================================ */

*{
  box-sizing:border-box;
}

html{
  -webkit-font-smoothing:antialiased;
  text-rendering:optimizeLegibility;
  scroll-behavior:smooth;
}

body.tours-page{
  margin:0 !important;
  overflow-x:hidden !important;

  background:var(--paper) !important;
  color:var(--ink) !important;

  font-family:var(--sans) !important;
  font-size:17px !important;
  font-weight:300 !important;
  line-height:1.75 !important;
  letter-spacing:.005em !important;
}

body.tours-page .main{
  background:var(--paper) !important;
  color:var(--ink) !important;
}

body.tours-page img{
  display:block;
  max-width:100%;
}

body.tours-page a{
  color:inherit;
  text-decoration:none;
}

body.tours-page h1,
body.tours-page h2,
body.tours-page h3,
body.tours-page h4,
body.tours-page h5{
  margin:0;

  font-family:var(--serif) !important;
  font-weight:400 !important;
  line-height:1.04 !important;
  letter-spacing:-.01em !important;

  text-transform:none !important;
}


/* ============================================================
   03. HERO — exact .page-hero
   ============================================================ */

body.tours-page .hero-section{
  position:relative !important;

  display:flex !important;
  align-items:flex-end !important;
  justify-content:flex-start !important;

  width:100% !important;
  min-height:62vh !important;
  height:auto !important;

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

  overflow:hidden !important;

  background-color:var(--dark) !important;
  background-size:cover !important;
  background-position:center !important;
  background-repeat:no-repeat !important;

  color:var(--on-dark) !important;
}

body.tours-page .hero-section::before{
  content:"" !important;

  position:absolute !important;
  inset:0 !important;
  z-index:1 !important;

  background:
    linear-gradient(
      to top,
      rgba(13,10,7,.92),
      rgba(13,10,7,.5) 55%,
      rgba(13,10,7,.62)
    ) !important;
}

body.tours-page .hero-content{
  position:relative !important;
  z-index:2 !important;

  width:100% !important;
  max-width:var(--maxw) !important;

  margin:0 auto !important;

  padding-top:clamp(140px,20vh,200px) !important;
  padding-right:var(--gut) !important;
  padding-bottom:clamp(44px,7vh,80px) !important;
  padding-left:var(--gut) !important;

  color:var(--on-dark) !important;
}

body.tours-page .hero-content h1{
  max-width:18ch !important;

  margin:0 !important;

  font-family:var(--serif) !important;
  font-size:clamp(2.6rem,6vw,5.4rem) !important;
  font-style:normal !important;
  font-weight:300 !important;
  line-height:.98 !important;
  letter-spacing:-.02em !important;

  text-transform:none !important;

  color:#fff !important;

  text-shadow:0 2px 30px rgba(0,0,0,.45) !important;
}

body.tours-page .hero-content h1 em{
  font-family:var(--serif) !important;
  font-size:inherit !important;
  font-style:italic !important;
  font-weight:300 !important;
  line-height:inherit !important;
  letter-spacing:inherit !important;

  color:var(--accent) !important;
}

body.tours-page .hero-content > p{
  max-width:50ch !important;

  margin:22px 0 0 !important;

  font-family:var(--sans) !important;
  font-size:clamp(1.05rem,1.5vw,1.3rem) !important;
  font-weight:300 !important;
  line-height:1.75 !important;

  color:rgba(255,253,248,.92) !important;

  text-shadow:0 1px 16px rgba(0,0,0,.5) !important;
}

body.tours-page .hero-content > div[style*="margin-top"]{
  display:flex !important;
  flex-wrap:wrap !important;
  gap:14px !important;

  margin-top:34px !important;
}


/* ============================================================
   04. ZIP BUTTON
   ============================================================ */

body.tours-page .btn,
body.tours-page a.btn{
  --bd:var(--ink);

  position:relative !important;

  display:inline-flex !important;
  align-items:center !important;
  justify-content:center !important;
  gap:.85em !important;

  margin:0 !important;
  padding:1.05em 1.9em !important;

  overflow:hidden !important;

  background:transparent !important;
  color:var(--ink) !important;

  border:1px solid var(--bd) !important;
  border-radius:0 !important;

  font-family:var(--sans) !important;
  font-size:12px !important;
  font-weight:500 !important;
  line-height:1.4 !important;
  letter-spacing:.2em !important;
  text-transform:uppercase !important;

  transition:
    color .5s var(--ease),
    border-color .5s var(--ease) !important;

  isolation:isolate;
}

body.tours-page .btn::after,
body.tours-page a.btn::after{
  content:"" !important;

  position:absolute !important;
  inset:0 !important;
  z-index:-1 !important;

  background:var(--ink) !important;

  transform:scaleX(0) !important;
  transform-origin:right !important;

  transition:transform .55s var(--ease) !important;
}

body.tours-page .btn:hover::after,
body.tours-page a.btn:hover::after{
  transform:scaleX(1) !important;
  transform-origin:left !important;
}

body.tours-page .btn:hover,
body.tours-page a.btn:hover{
  color:var(--paper) !important;
  border-color:var(--ink) !important;
}

body.tours-page .hero-content .btn{
  --bd:rgba(242,235,220,.5);

  color:var(--on-dark) !important;
  border-color:var(--bd) !important;
}

body.tours-page .hero-content .btn::after{
  background:var(--on-dark) !important;
}

body.tours-page .hero-content .btn:hover{
  color:var(--dark) !important;
  border-color:var(--on-dark) !important;
}

body.tours-page .hero-content .btn + .btn{
  border-color:transparent !important;
}


/* ============================================================
   05. SECTION / WRAP
   ============================================================ */

body.tours-page .tour-content-section{
  margin:0 !important;

  padding-block:clamp(72px,11vh,150px) !important;

  background:var(--paper) !important;
  color:var(--ink) !important;
}

body.tours-page .tour-content-section > .container{
  width:100% !important;
  max-width:var(--maxw) !important;

  margin:0 auto !important;
  padding-inline:var(--gut) !important;
}


/* ============================================================
   06. TYPOGRAPHY / NORMAL SECTIONS
   ============================================================ */

body.tours-page .tour-intro{
  max-width:none !important;

  margin:0 0 clamp(72px,11vh,150px) !important;

  text-align:left !important;
}

body.tours-page .tour-intro h2,
body.tours-page .tour-section h3,
body.tours-page .related-destinations-heading h2{
  margin:0 0 26px !important;

  font-family:var(--serif) !important;
  font-size:clamp(2.1rem,4.6vw,4rem) !important;
  font-weight:300 !important;
  line-height:1.04 !important;
  letter-spacing:-.015em !important;

  text-transform:none !important;

  color:var(--ink) !important;
}

body.tours-page .tour-intro h2{
  max-width:16ch !important;
}

body.tours-page .tour-section h3{
  max-width:22ch !important;
}

body.tours-page .tour-section h4{
  margin:1.4em 0 .4em !important;

  font-family:var(--serif) !important;
  font-size:clamp(1.3rem,2vw,1.7rem) !important;
  font-weight:400 !important;
  line-height:1.15 !important;

  color:var(--ink) !important;
}

body.tours-page .tour-intro p,
body.tours-page .tour-section p{
  max-width:68ch !important;

  margin:0 0 1.2em !important;

  font-family:var(--sans) !important;
  font-size:17px !important;
  font-weight:300 !important;
  line-height:1.8 !important;

  color:var(--ink-soft) !important;
}

body.tours-page .tour-section{
  max-width:none !important;

  margin:0 !important;
  padding:clamp(56px,8vh,104px) 0 !important;

  border-top:1px solid var(--line-soft) !important;
}

body.tours-page .tour-section ul{
  display:grid !important;
  gap:11px !important;

  max-width:64ch !important;

  margin:0 0 1.4em !important;
  padding:0 !important;

  list-style:none !important;
}

body.tours-page .tour-section li{
  position:relative !important;

  margin:0 !important;
  padding-left:26px !important;

  font-family:var(--sans) !important;
  font-size:16px !important;
  font-weight:300 !important;
  line-height:1.6 !important;

  color:var(--ink-soft) !important;
}

body.tours-page .tour-section li::before{
  content:"" !important;

  position:absolute !important;
  left:0 !important;
  top:11px !important;

  width:11px !important;
  height:1px !important;

  background:var(--accent) !important;
}


/* ============================================================
   07. MAJOR INDIAN CITIES
   EXACT ZIP TOUR PAGE IMPLEMENTATION

   ZIP source:
   .cities-grid{
     display:grid;
     grid-template-columns:repeat(5,1fr);
     gap:14px;
     margin-top:46px
   }

   The current PHP has no .cities-grid wrapper, therefore its
   existing parent container is used as that grid. All non-city
   direct children are forced to full width.
   ============================================================ */


/* FORCE THE ACTUAL PARENT INTO THE ZIP'S FIVE-COLUMN GRID */
body.tours-page .tour-content-section > .container{
  display:grid !important;
  grid-template-columns:repeat(5,minmax(0,1fr)) !important;
  grid-auto-flow:row !important;

  column-gap:14px !important;
  row-gap:0 !important;
}


/* ALL OTHER SECTIONS / TEXT REMAIN FULL WIDTH */
body.tours-page .tour-content-section > .container > :not(.city-row){
  grid-column:1 / -1 !important;
}


/*
   The heading immediately preceding the cards has its own source
   spacing. The cards begin 46px below that heading block.
*/
body.tours-page .tour-content-section > .container > .city-row{
  margin-top:46px !important;
}

/* Only the first card should create the 46px row separation. */
body.tours-page .tour-content-section > .container > .city-row ~ .city-row{
  margin-top:46px !important;
}


/* ------------------------------------------------------------
   EXACT .city
   ------------------------------------------------------------ */

body.tours-page .city-row,
body.tours-page .city-row.city-row-reverse{
  position:relative !important;

  display:block !important;
  flex:none !important;

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

  aspect-ratio:3 / 4 !important;

  padding:0 !important;

  overflow:hidden !important;

  background:var(--dark) !important;

  border:0 !important;
  border-radius:0 !important;

  box-shadow:none !important;

  transform:none !important;
}


/* ------------------------------------------------------------
   EXACT IMAGE
   ------------------------------------------------------------ */

body.tours-page .city-row-image{
  position:absolute !important;
  inset:0 !important;
  z-index:0 !important;

  display:block !important;

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

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

  overflow:hidden !important;

  background:var(--dark) !important;

  border:0 !important;
  border-radius:0 !important;
}

body.tours-page .city-row-image img{
  position:absolute !important;
  inset:0 !important;

  display:block !important;

  width:100% !important;
  height:100% !important;

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

  object-fit:cover !important;
  object-position:center !important;

  filter:brightness(.7) !important;

  border:0 !important;
  border-radius:0 !important;

  transform:scale(1) !important;

  transition:transform 1.3s var(--ease) !important;
}

body.tours-page .city-row:hover .city-row-image img{
  transform:scale(1.07) !important;
}


/* ------------------------------------------------------------
   EXACT BOTTOM GRADIENT
   ------------------------------------------------------------ */

body.tours-page .city-row::after{
  content:"" !important;

  position:absolute !important;
  inset:0 !important;
  z-index:1 !important;

  pointer-events:none !important;

  background:
    linear-gradient(
      to top,
      rgba(12,10,7,.85),
      transparent 60%
    ) !important;
}


/* ------------------------------------------------------------
   EXACT .cc
   ------------------------------------------------------------ */

body.tours-page .city-row-content{
  position:absolute !important;
  left:0 !important;
  right:0 !important;
  bottom:0 !important;
  z-index:2 !important;

  display:block !important;

  width:auto !important;

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

  color:#fff !important;
}


/* EXACT CITY TITLE */
body.tours-page .city-row-content h4{
  display:block !important;

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

  font-family:var(--serif) !important;
  font-size:1.4rem !important;
  font-style:normal !important;
  font-weight:400 !important;
  line-height:1.04 !important;
  letter-spacing:-.01em !important;

  text-transform:none !important;

  color:#fff !important;
}


/* You allowed the long descriptions inside the city cards to be omitted. */
body.tours-page .city-row-content p{
  display:none !important;
}


/* ------------------------------------------------------------
   ZIP ACTION:
   <span>Explore <Arrow size={12}/></span>

   Keep the existing destination URL but visually present the
   control as the ZIP's exact "EXPLORE →" treatment.
   ------------------------------------------------------------ */

body.tours-page .city-row .reference-link{
  position:relative !important;

  display:inline-flex !important;
  align-items:center !important;
  gap:6px !important;

  width:auto !important;

  margin:4px 0 0 !important;
  padding:0 !important;

  overflow:hidden !important;

  border:0 !important;

  font-family:var(--sans) !important;
  font-size:0 !important;
  font-weight:300 !important;
  line-height:1.4 !important;
  letter-spacing:.18em !important;
  text-transform:uppercase !important;

  color:#EAC873 !important;

  text-shadow:0 1px 8px rgba(0,0,0,.6) !important;

  transition:none !important;
}

/* Replace only the VISUAL wording; original link/text stays in source. */
body.tours-page .city-row .reference-link::before{
  content:"EXPLORE" !important;

  display:inline-block !important;

  position:static !important;

  width:auto !important;
  height:auto !important;

  background:none !important;

  font-family:var(--sans) !important;
  font-size:10.5px !important;
  font-weight:300 !important;
  line-height:1.4 !important;
  letter-spacing:.18em !important;
  text-transform:uppercase !important;

  color:#EAC873 !important;

  transform:none !important;

  transition:none !important;
}

/* Exact 12px arrow */
body.tours-page .city-row .reference-link::after{
  content:"" !important;

  display:block !important;

  position:static !important;

  width:12px !important;
  height:12px !important;

  background:#EAC873 !important;

  -webkit-mask:
    url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cpath d='M5 12h14M13 6l6 6-6 6' fill='none' stroke='black' stroke-width='1.4' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E")
    center / contain no-repeat !important;

  mask:
    url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cpath d='M5 12h14M13 6l6 6-6 6' fill='none' stroke='black' stroke-width='1.4' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E")
    center / contain no-repeat !important;

  transform:none !important;

  transition:transform .45s var(--ease) !important;
}

body.tours-page .city-row:hover .reference-link::after{
  transform:translateX(3px) !important;
}


/* ============================================================
   09. PACKAGE CARDS
   ============================================================ */

body.tours-page .packages-grid{
  display:grid !important;
  grid-template-columns:repeat(3,1fr) !important;
  gap:16px !important;

  margin:40px 0 !important;
}

body.tours-page .package-card{
  display:flex !important;
  flex-direction:column !important;

  margin:0 !important;
  padding:30px 26px !important;

  background:transparent !important;

  border:1px solid var(--line) !important;
  border-radius:0 !important;

  text-align:left !important;

  box-shadow:none !important;

  transition:
    border-color .4s,
    transform .4s !important;
}

body.tours-page .package-card:hover{
  border-color:var(--accent) !important;
  transform:translateY(-4px) !important;
}

body.tours-page .package-card h5{
  margin:0 0 12px !important;

  font-family:var(--serif) !important;
  font-size:1.5rem !important;
  font-weight:400 !important;
  line-height:1.1 !important;

  color:var(--ink) !important;
}

body.tours-page .package-card p{
  margin:0 0 22px !important;

  font-family:var(--sans) !important;
  font-size:13px !important;
  font-weight:300 !important;
  line-height:1.6 !important;

  color:var(--muted) !important;
}


/* ============================================================
   10. EXPERIENCE CARDS
   ============================================================ */

body.tours-page .experiences-grid{
  display:grid !important;
  grid-template-columns:repeat(3,1fr) !important;
  gap:clamp(22px,3vw,44px) !important;

  margin:36px 0 0 !important;
}

body.tours-page .experience-card{
  display:flex !important;
  flex-direction:column !important;

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

  background:transparent !important;

  border:0 !important;
  border-bottom:1px solid var(--line) !important;
  border-radius:0 !important;

  box-shadow:none !important;
}

body.tours-page .experience-card h5{
  margin:0 0 10px !important;

  font-family:var(--serif) !important;
  font-size:1.5rem !important;
  font-weight:400 !important;

  color:var(--ink) !important;
}

body.tours-page .experience-card p{
  margin:0 0 18px !important;

  font-family:var(--sans) !important;
  font-size:15.5px !important;
  font-weight:300 !important;
  line-height:1.7 !important;

  color:var(--ink-soft) !important;
}


/* ============================================================
   11. LINK-U
   ============================================================ */

body.tours-page .experience-card .reference-link,
body.tours-page .destination-link{
  position:relative !important;

  display:inline-flex !important;
  align-items:center !important;
  gap:.7em !important;

  width:fit-content !important;

  padding-bottom:4px !important;

  border:0 !important;

  font-family:var(--sans) !important;
  font-size:12.5px !important;
  font-weight:500 !important;
  line-height:1.4 !important;
  letter-spacing:.16em !important;
  text-transform:uppercase !important;

  color:var(--ink) !important;
}

body.tours-page .experience-card .reference-link::after,
body.tours-page .destination-link::after{
  content:"" !important;

  position:absolute !important;
  left:0 !important;
  bottom:0 !important;

  width:100% !important;
  height:1px !important;

  background:currentColor !important;

  transform:scaleX(1) !important;
  transform-origin:left !important;

  transition:transform .45s var(--ease) !important;
}

body.tours-page .experience-card .reference-link:hover::after,
body.tours-page .destination-link:hover::after{
  transform:scaleX(0) !important;
  transform-origin:right !important;
}


/* ============================================================
   12. CITY HIGHLIGHT
   ============================================================ */

body.tours-page .city-highlight{
  max-width:1000px !important;

  margin:40px 0 !important;
  padding:34px !important;

  background:var(--paper-2) !important;

  border:1px solid var(--line-soft) !important;
  border-radius:0 !important;
}

body.tours-page .city-highlight p{
  margin:0 !important;

  font-family:var(--sans) !important;
  font-size:14.5px !important;
  font-weight:300 !important;
  line-height:1.7 !important;

  color:var(--ink-soft) !important;
}


/* ============================================================
   13. RELATED DESTINATIONS
   ============================================================ */

body.tours-page .related-destinations-section{
  width:100% !important;

  margin:0 !important;
  padding-block:clamp(72px,11vh,150px) !important;

  background:var(--paper-2) !important;
  color:var(--ink) !important;
}

body.tours-page .related-destinations-section > .container{
  width:100% !important;
  max-width:var(--maxw) !important;

  margin:0 auto !important;
  padding-inline:var(--gut) !important;
}

body.tours-page .related-destinations-heading{
  max-width:none !important;

  margin:0 0 46px !important;

  text-align:left !important;
}

body.tours-page .related-destinations-heading > span{
  display:inline-flex !important;
  align-items:center !important;
  gap:.9em !important;

  margin:0 0 18px !important;

  font-family:var(--sans) !important;
  font-size:11.5px !important;
  font-weight:500 !important;
  letter-spacing:.34em !important;
  text-transform:uppercase !important;

  color:var(--accent-deep) !important;
}

body.tours-page .related-destinations-heading > span::before{
  content:"" !important;

  width:26px !important;
  height:1px !important;

  background:var(--accent) !important;

  opacity:.7 !important;
}

body.tours-page .related-destinations-heading h2{
  max-width:20ch !important;
}

body.tours-page .related-destinations-heading p{
  max-width:60ch !important;

  margin:0 !important;

  font-family:var(--sans) !important;
  font-size:clamp(1.05rem,1.5vw,1.32rem) !important;
  font-weight:300 !important;
  line-height:1.7 !important;

  color:var(--ink-soft) !important;
}

body.tours-page .related-destinations-grid{
  display:grid !important;
  grid-template-columns:repeat(2,1fr) !important;
  gap:14px !important;

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

  margin:0 !important;
}

body.tours-page .related-destinations-grid .destination-card{
  position:relative !important;

  display:block !important;

  width:100% !important;
  height:auto !important;
  aspect-ratio:3 / 4 !important;

  overflow:hidden !important;

  background:var(--dark) !important;

  border:0 !important;
  border-radius:0 !important;

  box-shadow:none !important;

  transform:none !important;
}

body.tours-page .related-destinations-grid .destination-card img{
  position:absolute !important;
  inset:0 !important;

  width:100% !important;
  height:100% !important;

  object-fit:cover !important;

  filter:brightness(.7) !important;

  transform:scale(1) !important;

  transition:transform 1.3s var(--ease) !important;
}

body.tours-page .related-destinations-grid .destination-card:hover img{
  transform:scale(1.07) !important;
}

body.tours-page .related-destinations-grid .destination-overlay{
  position:absolute !important;
  inset:0 !important;
  z-index:1 !important;

  background:
    linear-gradient(
      to top,
      rgba(12,10,7,.85),
      transparent 60%
    ) !important;
}

body.tours-page .related-destinations-grid .destination-content{
  position:absolute !important;
  left:0 !important;
  right:0 !important;
  bottom:0 !important;
  z-index:2 !important;

  padding:18px !important;

  color:#fff !important;
}

body.tours-page .related-destinations-grid .destination-label{
  display:block !important;

  margin:0 0 5px !important;

  font-family:var(--sans) !important;
  font-size:10.5px !important;
  font-weight:500 !important;
  letter-spacing:.18em !important;
  text-transform:uppercase !important;

  color:#EAC873 !important;
}

body.tours-page .related-destinations-grid .destination-content h3{
  margin:0 0 8px !important;

  font-family:var(--serif) !important;
  font-size:1.4rem !important;
  font-weight:400 !important;

  color:#fff !important;
}

body.tours-page .related-destinations-grid .destination-content p{
  margin:0 0 10px !important;

  font-family:var(--sans) !important;
  font-size:14px !important;
  font-weight:300 !important;
  line-height:1.55 !important;

  color:rgba(242,235,220,.82) !important;
}


/* ============================================================
   14. FINAL CTA
   ============================================================ */

body.tours-page .related-destinations-section + .tour-content-section{
  padding-block:clamp(72px,11vh,150px) !important;

  background:var(--dark) !important;
  color:var(--on-dark) !important;

  text-align:center !important;
}

body.tours-page .related-destinations-section + .tour-content-section .cta-section{
  width:100% !important;
  max-width:none !important;

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

  background:transparent !important;

  border:0 !important;
  border-radius:0 !important;

  box-shadow:none !important;
}

body.tours-page .cta-section h3{
  max-width:18ch !important;

  margin:18px auto 0 !important;

  font-family:var(--serif) !important;
  font-size:clamp(2rem,4vw,3.4rem) !important;
  font-weight:300 !important;

  color:#fff !important;
}

body.tours-page .cta-section p{
  max-width:60ch !important;

  margin:22px auto 34px !important;

  font-family:var(--sans) !important;
  font-size:clamp(1.05rem,1.5vw,1.32rem) !important;
  font-weight:300 !important;
  line-height:1.7 !important;

  color:var(--on-dark-muted) !important;
}


/* ============================================================
   15. RESPONSIVE — EXACT TOUR PAGE CITY RULE
   ============================================================ */

@media(max-width:860px){

  body.tours-page .tour-content-section > .container{
    grid-template-columns:repeat(2,minmax(0,1fr)) !important;
  }

  body.tours-page .tour-content-section > .container > :not(.city-row){
    grid-column:1 / -1 !important;
  }

  body.tours-page .packages-grid{
    grid-template-columns:1fr !important;
  }

  body.tours-page .experiences-grid{
    grid-template-columns:1fr !important;
    gap:48px !important;
  }

  body.tours-page .related-destinations-grid{
    grid-template-columns:repeat(2,1fr) !important;
  }
}


/* ZIP Tour source keeps cities at 2 columns below 860px. */
@media(max-width:600px){

  body.tours-page .related-destinations-grid{
    grid-template-columns:1fr !important;
  }

  body.tours-page .hero-content > div[style*="margin-top"]{
    align-items:stretch !important;
  }
}


/* ============================================================
   16. REDUCED MOTION
   ============================================================ */

@media(prefers-reduced-motion:reduce){

  html{
    scroll-behavior:auto;
  }

  body.tours-page *,
  body.tours-page *::before,
  body.tours-page *::after{
    transition-duration:.01ms !important;
    animation-duration:.01ms !important;
    animation-iteration-count:1 !important;
  }
}


/* ============================================================
   DEFINITIVE ZIP CITY GRID FIX
   Handles BOTH current wrapped markup and original direct markup.
   Exact values copied from page-tour.jsx.
   ============================================================ */

/* ---- CURRENT MARKUP: wrapper added around the five city rows ---- */
body.tours-page .zip-signature-city-grid,
body.tours-page .zip-cities-grid {
  display: grid !important;
  grid-template-columns: repeat(5, minmax(0, 1fr)) !important;
  gap: 14px !important;

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

  margin: 46px 0 0 !important;
  padding: 0 !important;

  align-items: stretch !important;
}

/* The wrapper itself must span the complete parent width. */
body.tours-page .tour-content-section > .container > .zip-signature-city-grid,
body.tours-page .tour-content-section > .container > .zip-cities-grid {
  grid-column: 1 / -1 !important;
}

/* ---- ORIGINAL MARKUP: five .city-row elements directly in .container ---- */
body.tours-page .tour-content-section:has(> .container > .city-row) > .container {
  display: grid !important;
  grid-template-columns: repeat(5, minmax(0, 1fr)) !important;
  column-gap: 14px !important;
  row-gap: 0 !important;
}

body.tours-page .tour-content-section:has(> .container > .city-row) > .container > :not(.city-row) {
  grid-column: 1 / -1 !important;
}

/* All five direct cards get the same 46px top offset, placing the
   complete card row exactly 46px below the preceding heading block. */
body.tours-page .tour-content-section:has(> .container > .city-row) > .container > .city-row {
  margin-top: 46px !important;
}


/* ============================================================
   EXACT ZIP .city CARD
   ============================================================ */

body.tours-page .zip-signature-city-grid > .city-row,
body.tours-page .zip-cities-grid > .city-row,
body.tours-page .tour-content-section:has(> .container > .city-row) > .container > .city-row {
  position: relative !important;

  display: block !important;
  flex: none !important;

  grid-column: auto !important;
  grid-row: auto !important;

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

  aspect-ratio: 3 / 4 !important;

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

  overflow: hidden !important;

  background: var(--dark) !important;

  border: 0 !important;
  border-radius: 0 !important;

  box-shadow: none !important;

  transform: none !important;
}


/* Current wrapped markup: spacing belongs to the grid, not cards. */
body.tours-page .zip-signature-city-grid > .city-row,
body.tours-page .zip-cities-grid > .city-row {
  margin-top: 0 !important;
}


/* ============================================================
   EXACT ZIP IMAGE
   ============================================================ */

body.tours-page .zip-signature-city-grid .city-row-image,
body.tours-page .zip-cities-grid .city-row-image,
body.tours-page .tour-content-section:has(> .container > .city-row) .city-row-image {
  position: absolute !important;
  inset: 0 !important;
  z-index: 0 !important;

  display: block !important;

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

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

  overflow: hidden !important;

  border: 0 !important;
  border-radius: 0 !important;
}

body.tours-page .zip-signature-city-grid .city-row-image img,
body.tours-page .zip-cities-grid .city-row-image img,
body.tours-page .tour-content-section:has(> .container > .city-row) .city-row-image img {
  position: absolute !important;
  inset: 0 !important;

  width: 100% !important;
  height: 100% !important;

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

  object-fit: cover !important;
  object-position: center !important;

  filter: brightness(.7) !important;

  border: 0 !important;
  border-radius: 0 !important;

  transform: scale(1) !important;

  transition: transform 1.3s var(--ease) !important;
}

body.tours-page .zip-signature-city-grid .city-row:hover .city-row-image img,
body.tours-page .zip-cities-grid .city-row:hover .city-row-image img,
body.tours-page .tour-content-section:has(> .container > .city-row) .city-row:hover .city-row-image img {
  transform: scale(1.07) !important;
}


/* ============================================================
   EXACT ZIP GRADIENT
   ============================================================ */

body.tours-page .zip-signature-city-grid > .city-row::after,
body.tours-page .zip-cities-grid > .city-row::after,
body.tours-page .tour-content-section:has(> .container > .city-row) > .container > .city-row::after {
  content: "" !important;

  position: absolute !important;
  inset: 0 !important;
  z-index: 1 !important;

  pointer-events: none !important;

  background:
    linear-gradient(
      to top,
      rgba(12, 10, 7, .85),
      transparent 60%
    ) !important;
}


/* ============================================================
   EXACT ZIP .cc CONTENT
   ============================================================ */

body.tours-page .zip-signature-city-grid .city-row-content,
body.tours-page .zip-cities-grid .city-row-content,
body.tours-page .tour-content-section:has(> .container > .city-row) .city-row-content {
  position: absolute !important;
  left: 0 !important;
  right: 0 !important;
  bottom: 0 !important;
  z-index: 2 !important;

  display: block !important;

  width: auto !important;

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

  color: #fff !important;
}


/* exact .city .cc b */
body.tours-page .zip-signature-city-grid .city-row-content h4,
body.tours-page .zip-cities-grid .city-row-content h4,
body.tours-page .tour-content-section:has(> .container > .city-row) .city-row-content h4 {
  display: block !important;

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

  font-family: var(--serif) !important;
  font-size: 1.4rem !important;
  font-style: normal !important;
  font-weight: 400 !important;
  line-height: 1.04 !important;
  letter-spacing: -.01em !important;

  text-transform: none !important;

  color: #fff !important;
}


/* User approved leaving the long city description out visually. */
body.tours-page .zip-signature-city-grid .city-row-content p,
body.tours-page .zip-cities-grid .city-row-content p,
body.tours-page .tour-content-section:has(> .container > .city-row) .city-row-content p {
  display: none !important;
}


/* ============================================================
   EXACT ZIP ACTION: Explore + 12px Arrow
   Existing href stays unchanged.
   ============================================================ */

body.tours-page .zip-signature-city-grid .reference-link,
body.tours-page .zip-cities-grid .reference-link,
body.tours-page .tour-content-section:has(> .container > .city-row) .city-row .reference-link {
  position: relative !important;

  display: inline-flex !important;
  align-items: center !important;
  gap: 6px !important;

  width: auto !important;

  margin: 4px 0 0 !important;
  padding: 0 !important;

  overflow: hidden !important;

  background: transparent !important;

  border: 0 !important;

  font-family: var(--sans) !important;
  font-size: 0 !important;
  font-weight: 300 !important;
  line-height: 1.4 !important;
  letter-spacing: .18em !important;
  text-transform: uppercase !important;

  color: #EAC873 !important;

  text-shadow: 0 1px 8px rgba(0,0,0,.6) !important;

  transition: none !important;
}

body.tours-page .zip-signature-city-grid .reference-link::before,
body.tours-page .zip-cities-grid .reference-link::before,
body.tours-page .tour-content-section:has(> .container > .city-row) .city-row .reference-link::before {
  content: "EXPLORE" !important;

  display: inline-block !important;

  position: static !important;

  width: auto !important;
  height: auto !important;

  background: none !important;

  font-family: var(--sans) !important;
  font-size: 10.5px !important;
  font-weight: 300 !important;
  line-height: 1.4 !important;
  letter-spacing: .18em !important;
  text-transform: uppercase !important;

  color: #EAC873 !important;

  transform: none !important;

  transition: none !important;
}

body.tours-page .zip-signature-city-grid .reference-link::after,
body.tours-page .zip-cities-grid .reference-link::after,
body.tours-page .tour-content-section:has(> .container > .city-row) .city-row .reference-link::after {
  content: "" !important;

  display: block !important;

  position: static !important;

  width: 12px !important;
  height: 12px !important;

  flex: 0 0 12px !important;

  background: #EAC873 !important;

  -webkit-mask:
    url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cpath d='M5 12h14M13 6l6 6-6 6' fill='none' stroke='black' stroke-width='1.4' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E")
    center / contain no-repeat !important;

  mask:
    url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cpath d='M5 12h14M13 6l6 6-6 6' fill='none' stroke='black' stroke-width='1.4' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E")
    center / contain no-repeat !important;

  transform: none !important;

  transition: transform .45s var(--ease) !important;
}

body.tours-page .zip-signature-city-grid .city-row:hover .reference-link::after,
body.tours-page .zip-cities-grid .city-row:hover .reference-link::after,
body.tours-page .tour-content-section:has(> .container > .city-row) .city-row:hover .reference-link::after {
  transform: translateX(3px) !important;
}


/* ============================================================
   RESPONSIVE — EXACT ZIP RULE
   ============================================================ */

@media (max-width: 860px) {

  body.tours-page .zip-signature-city-grid,
  body.tours-page .zip-cities-grid,
  body.tours-page .tour-content-section:has(> .container > .city-row) > .container {
    grid-template-columns: repeat(2, minmax(0, 1fr)) !important;
  }

  body.tours-page .tour-content-section:has(> .container > .city-row) > .container > :not(.city-row) {
    grid-column: 1 / -1 !important;
  }
}


/* ============================================================
   MAJOR INDIAN CITIES — EXACT ZIP SECTION BACKGROUND
   ZIP secondary paper:
   --paper-2: #F1EADC
   ============================================================ */

/*
 * The current PHP has:
 *   .tour-section heading/introduction
 *   <style>...</style>
 *   city-grid wrapper OR direct city rows
 *   .city-nav-pills
 *
 * These selectors make those separate siblings read visually as
 * ONE continuous ZIP section.
 */

/* ------------------------------------------------------------
   1. HEADING / INTRO BLOCK
   ------------------------------------------------------------ */

body.tours-page .tour-section:has(+ style + .zip-signature-city-grid),
body.tours-page .tour-section:has(+ style + .zip-cities-grid),
body.tours-page .tour-section:has(+ style + .city-row) {
  position: relative !important;

  margin: 0 !important;

  padding:
    clamp(72px,11vh,150px)
    0
    46px !important;

  background: var(--paper-2) !important;

  border-top: 0 !important;

  /*
   * Extend the background through the page gutters so it looks
   * like the full ZIP section rather than a white content box.
   */
  box-shadow: 0 0 0 100vmax var(--paper-2) !important;
  clip-path: inset(0 -100vmax) !important;
}

body.tours-page .tour-section:has(+ style + .zip-signature-city-grid) h3,
body.tours-page .tour-section:has(+ style + .zip-cities-grid) h3,
body.tours-page .tour-section:has(+ style + .city-row) h3 {
  margin-bottom: 22px !important;

  color: var(--ink) !important;
}

body.tours-page .tour-section:has(+ style + .zip-signature-city-grid) p,
body.tours-page .tour-section:has(+ style + .zip-cities-grid) p,
body.tours-page .tour-section:has(+ style + .city-row) p {
  margin-bottom: 0 !important;

  color: var(--ink-soft) !important;
}


/* ------------------------------------------------------------
   2. FIVE-CARD GRID AREA
   ------------------------------------------------------------ */

body.tours-page .zip-signature-city-grid,
body.tours-page .zip-cities-grid {
  position: relative !important;

  margin: 0 !important;
  padding: 0 0 clamp(72px,11vh,150px) !important;

  background: var(--paper-2) !important;

  box-shadow: 0 0 0 100vmax var(--paper-2) !important;
  clip-path: inset(0 -100vmax) !important;
}

/* Original markup fallback: direct city rows */
body.tours-page .tour-content-section > .container > .city-row {
  position: relative !important;
  z-index: 1 !important;
}

/*
 * Paint the row background for original direct-card markup.
 * The first city card gets the section-wide backdrop.
 */
body.tours-page .tour-content-section > .container > .city-row:first-of-type::before {
  content: "" !important;

  position: absolute !important;
  z-index: -10 !important;

  top: -46px !important;
  left: -100vmax !important;

  width: 200vmax !important;
  height: calc(100% + 80px) !important;

  background: var(--paper-2) !important;

  pointer-events: none !important;
}


/* ------------------------------------------------------------
   4. EXACT COLOR TOKENS FOR THIS SECTION
   ------------------------------------------------------------ */

body.tours-page .tour-section:has(+ style + .zip-signature-city-grid),
body.tours-page .tour-section:has(+ style + .zip-cities-grid),
body.tours-page .tour-section:has(+ style + .city-row),
body.tours-page .zip-signature-city-grid,
body.tours-page .zip-cities-grid,
/* Cards remain photographic/dark exactly as ZIP. */
body.tours-page .zip-signature-city-grid > .city-row,
body.tours-page .zip-cities-grid > .city-row,
body.tours-page .tour-content-section > .container > .city-row {
  background: #1C1813 !important;
}


/* ============================================================
   MOBILE — KEEP SAME PAPER-2 BACKGROUND
   ============================================================ */

@media(max-width:860px) {
  body.tours-page .tour-section:has(+ style + .zip-signature-city-grid),
  body.tours-page .tour-section:has(+ style + .zip-cities-grid),
  body.tours-page .tour-section:has(+ style + .city-row),
  body.tours-page .zip-signature-city-grid,
  body.tours-page .zip-cities-grid,
  }


/* ============================================================
   CITY PILLS REMOVED FROM PHP — FINAL CLEANUP
   ============================================================ */

/* The Major Indian Cities section now ends after the five-card grid. */
body.tours-page .zip-signature-city-grid,
body.tours-page .zip-cities-grid {
  margin-bottom: 0 !important;
  padding-bottom: clamp(72px,11vh,150px) !important;
}

/* No city-pill UI exists anymore. */
body.tours-page .city-nav-pills,
body.tours-page .city-pill {
  display: none !important;
}

/* Keep the whole heading + five-card section on ZIP paper-2. */
body.tours-page .tour-section:has(+ style + .zip-signature-city-grid),
body.tours-page .tour-section:has(+ style + .zip-cities-grid),
body.tours-page .tour-section:has(+ style + .city-row),
body.tours-page .zip-signature-city-grid,
body.tours-page .zip-cities-grid {
  background: #F1EADC !important;
}


/* ============================================================
   EXPLORE MORE EXTRAORDINARY DESTINATIONS
   MATCH MAJOR INDIAN CITIES EXACTLY
   ============================================================ */

/* ------------------------------------------------------------
   SECTION BACKGROUND + SPACING
   ------------------------------------------------------------ */

body.tours-page .related-destinations-section{
  width:100% !important;

  margin:0 !important;
  padding-block:clamp(72px,11vh,150px) !important;

  background:#F1EADC !important;
  color:#211C15 !important;
}

body.tours-page .related-destinations-section > .container{
  width:100% !important;
  max-width:var(--maxw) !important;

  margin:0 auto !important;
  padding-inline:var(--gut) !important;
}


/* ------------------------------------------------------------
   HEADING — SAME TYPOGRAPHY AS MAJOR INDIAN CITIES
   ------------------------------------------------------------ */

body.tours-page .related-destinations-heading{
  max-width:none !important;

  margin:0 !important;

  text-align:left !important;
}

body.tours-page .related-destinations-heading > span{
  display:inline-flex !important;
  align-items:center !important;
  gap:.9em !important;

  margin:0 0 18px !important;

  font-family:var(--sans) !important;
  font-size:11.5px !important;
  font-weight:500 !important;
  line-height:1.4 !important;
  letter-spacing:.34em !important;
  text-transform:uppercase !important;

  color:var(--accent-deep) !important;
}

body.tours-page .related-destinations-heading > span::before{
  content:"" !important;

  width:26px !important;
  height:1px !important;

  background:var(--accent) !important;

  opacity:.7 !important;
}

body.tours-page .related-destinations-heading h2{
  max-width:22ch !important;

  margin:0 0 26px !important;

  font-family:var(--serif) !important;
  font-size:clamp(2.1rem,4.6vw,4rem) !important;
  font-style:normal !important;
  font-weight:300 !important;
  line-height:1.04 !important;
  letter-spacing:-.015em !important;

  text-transform:none !important;

  color:var(--ink) !important;
}

body.tours-page .related-destinations-heading p{
  max-width:68ch !important;

  margin:0 !important;

  font-family:var(--sans) !important;
  font-size:17px !important;
  font-weight:300 !important;
  line-height:1.8 !important;
  letter-spacing:.005em !important;

  color:var(--ink-soft) !important;
}


/* ------------------------------------------------------------
   GRID — EXACT SAME 5-COLUMN SYSTEM AS MAJOR INDIAN CITIES
   ------------------------------------------------------------ */

body.tours-page .related-destinations-grid{
  display:grid !important;
  grid-template-columns:repeat(5,minmax(0,1fr)) !important;
  grid-auto-flow:row !important;

  gap:14px !important;

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

  margin:46px 0 0 !important;
  padding:0 !important;

  align-items:stretch !important;
}


/* ------------------------------------------------------------
   CARD — EXACT SAME .city GEOMETRY
   ------------------------------------------------------------ */

body.tours-page .related-destinations-grid .destination-card{
  position:relative !important;

  display:block !important;

  grid-column:auto !important;
  grid-row:auto !important;

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

  height:auto !important;
  aspect-ratio:3 / 4 !important;

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

  overflow:hidden !important;

  background:#1C1813 !important;

  border:0 !important;
  border-radius:0 !important;

  box-shadow:none !important;

  transform:none !important;
}


/* ------------------------------------------------------------
   IMAGE — EXACT SAME CITY IMAGE TREATMENT
   ------------------------------------------------------------ */

body.tours-page .related-destinations-grid .destination-card img{
  position:absolute !important;
  inset:0 !important;
  z-index:0 !important;

  display:block !important;

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

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

  object-fit:cover !important;
  object-position:center !important;

  filter:brightness(.7) !important;

  border:0 !important;
  border-radius:0 !important;

  transform:scale(1) !important;

  transition:transform 1.3s var(--ease) !important;
}

body.tours-page .related-destinations-grid .destination-card:hover img{
  transform:scale(1.07) !important;
}


/* ------------------------------------------------------------
   EXACT SAME BOTTOM GRADIENT
   ------------------------------------------------------------ */

body.tours-page .related-destinations-grid .destination-overlay{
  position:absolute !important;
  inset:0 !important;
  z-index:1 !important;

  pointer-events:none !important;

  background:
    linear-gradient(
      to top,
      rgba(12,10,7,.85),
      transparent 60%
    ) !important;
}


/* ------------------------------------------------------------
   CONTENT — SAME 18PX OVERLAY POSITIONING
   ------------------------------------------------------------ */

body.tours-page .related-destinations-grid .destination-content{
  position:absolute !important;
  left:0 !important;
  right:0 !important;
  bottom:0 !important;
  z-index:2 !important;

  display:block !important;

  width:auto !important;

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

  color:#fff !important;
}


/*
   The region label remains your existing content but is visually
   suppressed so the card matches the Major Indian Cities card
   structure exactly: title + Explore action.
*/
body.tours-page .related-destinations-grid .destination-label{
  display:none !important;
}


/* ------------------------------------------------------------
   TITLE — EXACT SAME CITY TITLE STYLE
   ------------------------------------------------------------ */

body.tours-page .related-destinations-grid .destination-content h3{
  display:block !important;

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

  font-family:var(--serif) !important;
  font-size:1.4rem !important;
  font-style:normal !important;
  font-weight:400 !important;
  line-height:1.04 !important;
  letter-spacing:-.01em !important;

  text-transform:none !important;

  color:#fff !important;
}


/*
   Hide the long description visually, matching the city cards.
   Existing text remains unchanged in the markup.
*/
body.tours-page .related-destinations-grid .destination-content p{
  display:none !important;
}


/* ------------------------------------------------------------
   EXPLORE → — EXACT SAME CITY ACTION
   Existing href remains unchanged.
   ------------------------------------------------------------ */

body.tours-page .related-destinations-grid .destination-link{
  position:relative !important;

  display:inline-flex !important;
  align-items:center !important;
  gap:6px !important;

  width:auto !important;

  margin:4px 0 0 !important;
  padding:0 !important;

  overflow:hidden !important;

  background:transparent !important;
  color:#EAC873 !important;

  border:0 !important;

  font-family:var(--sans) !important;
  font-size:0 !important;
  font-weight:300 !important;
  line-height:1.4 !important;
  letter-spacing:.18em !important;
  text-transform:uppercase !important;

  text-shadow:0 1px 8px rgba(0,0,0,.6) !important;

  transition:none !important;
}

body.tours-page .related-destinations-grid .destination-link::before{
  content:"EXPLORE" !important;

  display:inline-block !important;

  position:static !important;

  width:auto !important;
  height:auto !important;

  background:none !important;

  font-family:var(--sans) !important;
  font-size:10.5px !important;
  font-weight:300 !important;
  line-height:1.4 !important;
  letter-spacing:.18em !important;
  text-transform:uppercase !important;

  color:#EAC873 !important;

  transform:none !important;

  transition:none !important;
}

body.tours-page .related-destinations-grid .destination-link::after{
  content:"" !important;

  display:block !important;

  position:static !important;

  width:12px !important;
  height:12px !important;

  flex:0 0 12px !important;

  background:#EAC873 !important;

  -webkit-mask:
    url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cpath d='M5 12h14M13 6l6 6-6 6' fill='none' stroke='black' stroke-width='1.4' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E")
    center / contain no-repeat !important;

  mask:
    url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cpath d='M5 12h14M13 6l6 6-6 6' fill='none' stroke='black' stroke-width='1.4' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E")
    center / contain no-repeat !important;

  transform:none !important;

  transition:transform .45s var(--ease) !important;
}

body.tours-page .related-destinations-grid .destination-card:hover .destination-link::after{
  transform:translateX(3px) !important;
}


/* ------------------------------------------------------------
   RESPONSIVE — SAME AS MAJOR INDIAN CITIES
   ------------------------------------------------------------ */

@media(max-width:860px){

  body.tours-page .related-destinations-grid{
    grid-template-columns:repeat(2,minmax(0,1fr)) !important;
  }
}

/*
   Same as ZIP city section:
   it remains 2 columns below 860px.
   No invented single-column breakpoint.
*/


/* ------------------------------------------------------------
   REDUCED MOTION
   ------------------------------------------------------------ */

@media(prefers-reduced-motion:reduce){

  body.tours-page .related-destinations-grid .destination-card img,
  body.tours-page .related-destinations-grid .destination-link::after{
    transition-duration:.01ms !important;
  }
}


/* ============================================================
   FINAL CTA CONTACT US + HERO ENQUIRE ARROWS
   Exact ZIP button behavior
   ============================================================ */

/* ------------------------------------------------------------
   1. "Plan Your Masai Mara Safari Today" — Contact Us
   Match ZIP CTA:
   <Btn variant="btn--light">Contact Us <Arrow /></Btn>
   ------------------------------------------------------------ */

body.tours-page .cta-section > a.btn {
  --bd: rgba(242,235,220,.5) !important;

  display: inline-flex !important;
  align-items: center !important;
  justify-content: center !important;
  gap: .85em !important;

  position: relative !important;

  margin: 0 !important;
  padding: 1.05em 1.9em !important;

  overflow: hidden !important;

  background: transparent !important;
  color: var(--on-dark) !important;

  border: 1px solid rgba(242,235,220,.5) !important;
  border-radius: 0 !important;

  font-family: var(--sans) !important;
  font-size: 12px !important;
  font-weight: 500 !important;
  line-height: 1.4 !important;
  letter-spacing: .2em !important;
  text-transform: uppercase !important;

  transition:
    color .5s var(--ease),
    border-color .5s var(--ease) !important;

  isolation: isolate !important;
}

/* Exact ZIP horizontal fill */
body.tours-page .cta-section > a.btn::after {
  content: "" !important;

  position: absolute !important;
  inset: 0 !important;
  z-index: -1 !important;

  width: auto !important;
  height: auto !important;

  background: var(--on-dark) !important;

  -webkit-mask: none !important;
  mask: none !important;

  transform: scaleX(0) !important;
  transform-origin: right !important;

  transition: transform .55s var(--ease) !important;
}

body.tours-page .cta-section > a.btn:hover::after,
body.tours-page .cta-section > a.btn:focus-visible::after {
  transform: scaleX(1) !important;
  transform-origin: left !important;
}

body.tours-page .cta-section > a.btn:hover,
body.tours-page .cta-section > a.btn:focus-visible {
  color: var(--dark) !important;
  border-color: var(--on-dark) !important;
}


/* Exact ZIP Arrow component, visually placed AFTER the button text */
body.tours-page .cta-section > a.btn::before {
  content: "" !important;

  display: block !important;
  order: 2 !important;

  position: static !important;

  width: 14px !important;
  height: 14px !important;
  flex: 0 0 14px !important;

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

  background: currentColor !important;

  -webkit-mask:
    url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cpath d='M5 12h14M13 6l6 6-6 6' fill='none' stroke='black' stroke-width='1.4' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E")
    center / contain no-repeat !important;

  mask:
    url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cpath d='M5 12h14M13 6l6 6-6 6' fill='none' stroke='black' stroke-width='1.4' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E")
    center / contain no-repeat !important;

  transform: translateX(0) !important;

  transition: transform .5s var(--ease) !important;
}

body.tours-page .cta-section > a.btn:hover::before,
body.tours-page .cta-section > a.btn:focus-visible::before {
  transform: translateX(4px) !important;
}


/* ------------------------------------------------------------
   2. TOP HERO — Enquire Now
   Add the same ZIP Arrow component.
   Existing hero button styling stays unchanged.
   ------------------------------------------------------------ */

body.tours-page .hero-content > div[style*="margin-top"] > a.btn:first-child::before {
  content: "" !important;

  display: block !important;
  order: 2 !important;

  position: static !important;

  width: 14px !important;
  height: 14px !important;
  flex: 0 0 14px !important;

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

  background: currentColor !important;

  -webkit-mask:
    url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cpath d='M5 12h14M13 6l6 6-6 6' fill='none' stroke='black' stroke-width='1.4' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E")
    center / contain no-repeat !important;

  mask:
    url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cpath d='M5 12h14M13 6l6 6-6 6' fill='none' stroke='black' stroke-width='1.4' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E")
    center / contain no-repeat !important;

  transform: translateX(0) !important;

  transition: transform .5s var(--ease) !important;
}

body.tours-page .hero-content > div[style*="margin-top"] > a.btn:first-child:hover::before,
body.tours-page .hero-content > div[style*="margin-top"] > a.btn:first-child:focus-visible::before {
  transform: translateX(4px) !important;
}


/* Reduced-motion parity */
@media (prefers-reduced-motion: reduce) {
  body.tours-page .cta-section > a.btn::before,
  body.tours-page .cta-section > a.btn::after,
  body.tours-page .hero-content > div[style*="margin-top"] > a.btn:first-child::before {
    transition-duration: .01ms !important;
  }
}


/* ============================================================
   FINAL CTA CITY PILLS
   Exact ZIP .pill styling mapped to existing city links
   ============================================================ */

body.tours-page .cta-section .departure-cities {
  margin-top: 25px !important;
}

body.tours-page .cta-section .cities-links {
  display: flex !important;
  flex-wrap: wrap !important;
  justify-content: center !important;
  gap: 10px !important;

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

body.tours-page .cta-section .cities-links a {
  display: inline-flex !important;
  align-items: center !important;
  justify-content: center !important;

  margin: 0 !important;
  padding: 10px 16px !important;

  background: transparent !important;
  color: var(--on-dark-muted) !important;

  border: 1px solid rgba(242,235,220,.28) !important;
  border-radius: 40px !important;

  font-family: var(--sans) !important;
  font-size: 12.5px !important;
  font-weight: 300 !important;
  line-height: 1.4 !important;
  letter-spacing: .04em !important;
  text-transform: none !important;

  box-shadow: none !important;

  transform: none !important;

  transition: all .35s var(--ease) !important;
}

body.tours-page .cta-section .cities-links a:hover,
body.tours-page .cta-section .cities-links a:focus-visible {
  background: transparent !important;
  color: var(--on-dark-muted) !important;

  border-color: var(--accent) !important;

  transform: none !important;
  box-shadow: none !important;
}

/* Remove any inherited pseudo-elements/arrows from generic link/button rules */
body.tours-page .cta-section .cities-links a::before,
body.tours-page .cta-section .cities-links a::after {
  content: none !important;
  display: none !important;
}

/* Reduced-motion parity */
@media (prefers-reduced-motion: reduce) {
  body.tours-page .cta-section .cities-links a {
    transition-duration: .01ms !important;
  }
}