/* Intare — single safari package (the trip page). Loaded after style.css.
   =====================================================================
   Two columns: itinerary left, sticky enquiry rail right. The rail only
   pins because style.css clips html/body on the x axis rather than
   hiding them — do not put a transformed ancestor above .trip-rail or
   position:sticky dies silently.
   ===================================================================== */

/* ---------------------------------------------------------------- Hero */

.trip-hero {
  position: relative;
  overflow: hidden;
  padding: 190px 0 64px;
  background: var(--green);
  color: #fff;
}

.trip-hero::before {
  content: "";
  position: absolute;
  inset: 0;
  background: var(--page-hero-img, none) center / cover no-repeat;
  opacity: .3;
}

.trip-hero::after {
  content: "";
  position: absolute;
  inset: 0;
  background: linear-gradient(to top, rgba(13, 23, 18, .92), rgba(13, 23, 18, .42));
}

.trip-hero > .container {
  position: relative;
  z-index: 2;
}

.trip-crumbs {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 9px;
  margin-bottom: 20px;
  font-size: 12px;
  letter-spacing: 1.6px;
  text-transform: uppercase;
  color: rgba(255, 255, 240, .55);
}

.trip-crumbs a {
  color: rgba(255, 255, 240, .8);
  transition: color .3s;
}

.trip-crumbs a:hover { color: var(--gold-lt); }

.trip-hero h1 {
  max-width: 17ch;
  margin: 0 0 14px;
  font-family: var(--serif);
  font-size: clamp(31px, 4.4vw, 54px);
  line-height: 1.1;
  color: #F7F3E7;
}

.trip-hero-where {
  margin: 0 0 24px;
  max-width: 60ch;
  font-size: 13px;
  letter-spacing: 1.5px;
  text-transform: uppercase;
  color: rgba(255, 255, 240, .68);
}

.trip-badges,
.trip-actions {
  display: flex;
  flex-wrap: wrap;
  gap: 10px 12px;
  margin: 0;
  padding: 0;
  list-style: none;
}

.trip-badges { margin-bottom: 22px; }

.trip-badges li {
  display: inline-flex;
  align-items: center;
  gap: 9px;
  padding: 8px 16px;
  border: 1px solid rgba(212, 167, 106, .45);
  border-radius: 9999px;
  background: rgba(189, 149, 92, .14);
  font-size: 13px;
  color: #F7F3E7;
}

.trip-badges i { color: var(--gold-lt); font-size: 12px; }

.trip-actions { gap: 8px 26px; }

.trip-action {
  display: inline-flex;
  align-items: center;
  gap: 9px;
  padding: 0 0 3px;
  border: 0;
  border-bottom: 1px solid rgba(212, 167, 106, .45);
  background: none;
  font-family: var(--sans);
  font-size: 12.5px;
  font-weight: 600;
  letter-spacing: 1.4px;
  text-transform: uppercase;
  color: var(--gold-lt);
  cursor: pointer;
  transition: color .25s, border-color .25s;
}

.trip-action:hover,
.trip-action:focus-visible {
  color: #F7F3E7;
  border-color: #F7F3E7;
}

/* -------------------------------------------------------------- Layout */

.trip-shell {
  padding: 62px 0 90px;
  background: var(--cream);
}

.trip-layout {
  display: grid;
  grid-template-columns: minmax(0, 1fr);
  gap: 44px;
  align-items: start;
}

@media (min-width: 992px) {
  .trip-layout { grid-template-columns: minmax(0, 1fr) 360px; }
}

.trip-main { min-width: 0; }

.trip-block { margin: 0 0 58px; }
.trip-block:last-child { margin-bottom: 0; }

.trip-h {
  margin: 0 0 22px;
  padding-bottom: 14px;
  border-bottom: 1px solid rgba(189, 149, 92, .32);
  font-family: var(--sans);
  font-size: 12px;
  font-weight: 600;
  letter-spacing: 2.8px;
  text-transform: uppercase;
  color: var(--gold-dk);
}

.trip-h-row {
  display: flex;
  flex-wrap: wrap;
  align-items: baseline;
  justify-content: space-between;
  gap: 10px 20px;
}

.trip-h-row .trip-h { flex: 1 1 auto; }

.trip-expand {
  flex: 0 0 auto;
  padding: 0 0 3px;
  border: 0;
  border-bottom: 1px solid rgba(189, 149, 92, .5);
  background: none;
  font-family: var(--sans);
  font-size: 11.5px;
  font-weight: 600;
  letter-spacing: 1.6px;
  text-transform: uppercase;
  color: var(--gold-dk);
  cursor: pointer;
  transition: color .25s, border-color .25s;
}

.trip-expand:hover { color: var(--green); border-color: var(--green); }

/* --------------------------------------------------------- Trip prose */

.trip-prose > *:first-child { margin-top: 0; }
.trip-prose > *:last-child { margin-bottom: 0; }

.trip-prose p {
  margin: 0 0 24px;
  font-size: 17px;
  line-height: 1.88;
  font-weight: 300;
  color: var(--body);
}

.trip-prose strong { font-weight: 600; color: var(--green); }

.trip-prose h2,
.trip-prose h3,
.trip-prose h4 {
  font-family: var(--serif);
  color: var(--green);
  margin: 34px 0 14px;
}

.trip-prose h2 { font-size: clamp(24px, 3vw, 31px); }
.trip-prose h3 { font-size: clamp(20px, 2.3vw, 24px); }

.trip-prose ul,
.trip-prose ol {
  margin: 0 0 24px;
  padding-left: 22px;
  color: var(--body);
  font-weight: 300;
}

.trip-prose li { margin-bottom: 9px; line-height: 1.85; font-size: 16.5px; }

.trip-prose a {
  color: var(--gold-dk);
  text-decoration: underline;
  text-underline-offset: 3px;
}

.trip-prose a:hover { color: var(--green); }

.trip-prose img { max-width: 100%; height: auto; border-radius: 12px; }

/* ---------------------------------------------------------- Overview */

.trip-chips {
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
  margin: 26px 0 0;
  padding: 0;
  list-style: none;
}

.trip-chips a,
.trip-chips span {
  display: inline-block;
  padding: 7px 16px;
  border: 1px solid #eae6df;
  border-radius: 9999px;
  background: #fff;
  font-size: 13px;
  color: var(--green);
  text-decoration: none;
  transition: background .25s, border-color .25s, color .25s;
}

.trip-chips a:hover {
  background: var(--green);
  border-color: var(--green);
  color: #F7F3E7;
}

/* --------------------------------------------------------- Promises */

.trip-promises {
  display: grid;
  gap: 4px;
  margin: 0;
  padding: 0;
  list-style: none;
}

@media (min-width: 700px) {
  .trip-promises { grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 4px 34px; }
}

.trip-promise {
  display: flex;
  gap: 16px;
  padding: 18px 0;
  border-bottom: 1px solid #efebe4;
}

.trip-promise > i {
  flex: 0 0 auto;
  width: 40px;
  height: 40px;
  display: grid;
  place-items: center;
  border-radius: 50%;
  background: rgba(189, 149, 92, .13);
  color: var(--gold-dk);
  font-size: 15px;
}

.trip-promise b {
  display: block;
  margin-bottom: 5px;
  font-family: var(--sans);
  font-size: 15.5px;
  font-weight: 600;
  color: var(--green);
}

.trip-promise span {
  display: block;
  font-size: 15px;
  line-height: 1.72;
  font-weight: 300;
  color: var(--body);
}

.trip-reassure {
  margin: 24px 0 0;
  font-size: 16px;
  line-height: 1.8;
  font-weight: 300;
  color: var(--body);
}

/* ------------------------------------------------------------- Route */

.trip-route {
  padding: 30px 32px;
  border: 1px solid #eae6df;
  border-radius: 14px;
  background: var(--stone);
}

.trip-stops {
  margin: 0 0 26px;
  padding: 0;
  list-style: none;
  counter-reset: stop;
}

.trip-stop {
  position: relative;
  display: flex;
  align-items: baseline;
  gap: 12px;
  padding: 0 0 18px 0;
}

.trip-stop::before {
  content: "";
  position: absolute;
  top: 20px;
  bottom: 0;
  left: 6px;
  width: 1px;
  background: rgba(189, 149, 92, .4);
}

.trip-stop:last-child { padding-bottom: 0; }
.trip-stop:last-child::before { display: none; }

.trip-stop > i {
  position: relative;
  z-index: 1;
  flex: 0 0 auto;
  width: 13px;
  color: var(--gold-dk);
  font-size: 13px;
}

.trip-stop a,
.trip-stop span {
  font-family: var(--serif);
  font-size: 19px;
  line-height: 1.4;
  color: var(--green);
  text-decoration: none;
  border-bottom: 1px solid transparent;
  transition: border-color .25s, color .25s;
}

.trip-stop a:hover { color: var(--gold-dk); border-color: var(--gold-dk); }

.trip-route-facts {
  display: grid;
  gap: 14px 30px;
  margin: 0;
  padding-top: 22px;
  border-top: 1px solid #e6e1d8;
}

@media (min-width: 640px) {
  .trip-route-facts { grid-template-columns: repeat(2, minmax(0, 1fr)); }
}

.trip-route-facts dt {
  margin-bottom: 4px;
  font-size: 10.5px;
  font-weight: 600;
  letter-spacing: 2px;
  text-transform: uppercase;
  color: var(--gold-dk);
}

.trip-route-facts dd {
  margin: 0;
  font-size: 15.5px;
  line-height: 1.6;
  font-weight: 300;
  color: var(--body);
}

/* --------------------------------------------------------- Itinerary */

.trip-days {
  border-top: 1px solid #efebe4;
}

.trip-day {
  border-bottom: 1px solid #efebe4;
}

.trip-day-head {
  display: grid;
  grid-template-columns: auto minmax(0, 1fr) auto;
  grid-template-rows: auto auto;
  align-items: start;
  column-gap: 14px;
  padding: 20px 2px;
  cursor: pointer;
  list-style: none;
}

.trip-day-head::-webkit-details-marker { display: none; }
.trip-day-head::marker { content: ""; }

.trip-day-marker {
  grid-column: 1;
  grid-row: 1 / 3;
  width: 34px;
  height: 34px;
  display: grid;
  place-items: center;
  border-radius: 50%;
  background: rgba(189, 149, 92, .13);
  color: var(--gold-dk);
  font-size: 13px;
}

.trip-day[open] .trip-day-marker {
  background: var(--green);
  color: var(--gold-lt);
}

.trip-day-n {
  grid-column: 2;
  grid-row: 1;
  display: block;
  margin-bottom: 4px;
  font-size: 10.5px;
  font-weight: 600;
  letter-spacing: 2.2px;
  text-transform: uppercase;
  color: var(--gold-dk);
}

.trip-day-title {
  grid-column: 2;
  grid-row: 2;
  min-width: 0;
  margin: 0;
  font-family: var(--serif);
  font-size: clamp(18px, 2.1vw, 22px);
  line-height: 1.35;
  color: var(--green);
  overflow-wrap: anywhere;
}

.trip-day-head .trip-day-toggle {
  grid-column: 3;
  grid-row: 1 / 3;
}

.trip-day-toggle {
  flex: 0 0 auto;
  margin-top: 6px;
  color: var(--gold-dk);
  font-size: 13px;
  transition: transform .3s;
}

.trip-day[open] .trip-day-toggle,
.trip-qa[open] .trip-day-toggle { transform: rotate(180deg); }

.trip-day-body {
  padding: 2px 2px 30px 48px;
}

.trip-day-photo {
  display: block;
  width: 100%;
  height: auto;
  max-width: 560px;
  margin: 0 0 24px;
  border-radius: 12px;
  box-shadow: 0 18px 46px rgba(33, 54, 44, .13);
}

@media (max-width: 575px) {
  .trip-day-body { padding-left: 0; }
}

/* -------------------------------------------------------- Share band */

.trip-band {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  justify-content: space-between;
  gap: 20px 30px;
  margin: 0 0 58px;
  padding: 30px 34px;
  border-radius: 14px;
  background: var(--green);
  color: #F7F3E7;
}

.trip-band-text { flex: 1 1 320px; min-width: 0; }

.trip-band-text b {
  display: block;
  margin-bottom: 7px;
  font-family: var(--serif);
  font-size: 21px;
  font-weight: 400;
  color: #F7F3E7;
}

.trip-band-text p {
  margin: 0;
  font-size: 15px;
  line-height: 1.75;
  font-weight: 300;
  color: rgba(255, 255, 240, .74);
}

.trip-band-actions {
  display: flex;
  flex-wrap: wrap;
  gap: 10px;
}

.trip-band-btn {
  display: inline-flex;
  align-items: center;
  gap: 9px;
  padding: 11px 20px;
  border: 1px solid rgba(212, 167, 106, .55);
  border-radius: 9999px;
  background: none;
  font-family: var(--sans);
  font-size: 13px;
  font-weight: 600;
  letter-spacing: .4px;
  color: var(--gold-lt);
  cursor: pointer;
  transition: background .25s, color .25s, border-color .25s;
}

.trip-band-btn:hover,
.trip-band-btn:focus-visible {
  background: var(--gold);
  border-color: var(--gold);
  color: var(--green);
}

/* -------------------------------------------------------- Inclusions */

.trip-incl {
  display: grid;
  gap: 30px;
}

@media (min-width: 700px) {
  .trip-incl { grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 20px 38px; }
}

.trip-incl-col h3 {
  margin: 0 0 16px;
  font-family: var(--sans);
  font-size: 11px;
  font-weight: 600;
  letter-spacing: 2.2px;
  text-transform: uppercase;
  color: var(--green);
}

.trip-incl-col ul {
  margin: 0;
  padding: 0;
  list-style: none;
}

.trip-incl-col li {
  display: flex;
  gap: 12px;
  padding: 9px 0;
  font-size: 15.5px;
  line-height: 1.7;
  font-weight: 300;
  color: var(--body);
}

.trip-incl-col li > i {
  flex: 0 0 auto;
  width: 19px;
  height: 19px;
  margin-top: 4px;
  display: grid;
  place-items: center;
  border-radius: 50%;
  font-size: 9px;
}

.trip-incl-col--yes li > i { background: rgba(45, 74, 62, .12); color: var(--green-2); }
.trip-incl-col--no li > i { background: #ece9e3; color: #9a978f; }
.trip-incl-col--no li { color: #7d7a73; }

/* --------------------------------------------------------------- FAQ */

.trip-faq { border-top: 1px solid #efebe4; }

.trip-qa { border-bottom: 1px solid #efebe4; }

.trip-qa > summary {
  display: flex;
  align-items: flex-start;
  justify-content: space-between;
  gap: 18px;
  padding: 19px 2px;
  cursor: pointer;
  list-style: none;
}

.trip-qa > summary::-webkit-details-marker { display: none; }
.trip-qa > summary::marker { content: ""; }

.trip-qa > summary h3 {
  margin: 0;
  font-family: var(--serif);
  font-size: clamp(18px, 2vw, 21px);
  line-height: 1.4;
  color: var(--green);
}

.trip-qa > .trip-prose { padding: 0 2px 26px; }

/* -------------------------------------------------------------- Rail */

.trip-rail {
  min-width: 0;
  display: grid;
  gap: 20px;
  align-content: start;
}

/* Stacked, the rail would otherwise land after the whole itinerary and bury
   the quote button at the foot of a very long page. */
@media (max-width: 991px) {
  .trip-rail { order: -1; margin-bottom: 12px; }
}

@media (min-width: 992px) {
  .trip-rail {
    position: sticky;
    top: calc(var(--intare-hdr, 114px) + 18px);
    max-height: calc(100vh - var(--intare-hdr, 114px) - 38px);
    overflow-y: auto;
    overscroll-behavior: contain;
    padding: 2px;
    margin: -2px;
    scrollbar-width: thin;
  }

  .trip-rail::-webkit-scrollbar { width: 7px; }
  .trip-rail::-webkit-scrollbar-thumb { background: #e2ded7; border-radius: 7px; }
}

.trip-card {
  padding: 26px 26px 24px;
  border: 1px solid #eae6df;
  border-radius: 14px;
  background: #fff;
  box-shadow: 0 12px 38px rgba(33, 54, 44, .07);
}

.trip-card-eyebrow {
  margin: 0 0 10px;
  font-size: 10.5px;
  font-weight: 600;
  letter-spacing: 2.2px;
  text-transform: uppercase;
  color: var(--gold-dk);
}

.trip-card-title {
  margin: 0 0 10px;
  font-family: var(--serif);
  font-size: 22px;
  line-height: 1.28;
  color: var(--green);
}

/* One line of orientation, no fact table: everything it used to list is in the
   hero badges and the Route panel a few hundred pixels to the left. */
.trip-card-line {
  margin: 0 0 18px;
  padding-bottom: 16px;
  border-bottom: 1px solid #efebe4;
  font-size: 14px;
  font-weight: 300;
  color: #85827b;
}

/* Flex text cells default to min-width:auto, which a long unbroken park or
   activity name would push past the card edge. */
.trip-incl-col li > span,
.trip-promise > div {
  min-width: 0;
  overflow-wrap: anywhere;
}

.trip-cta {
  display: block;
  width: 100%;
  padding: 15px 20px;
  border: 0;
  border-radius: 9999px;
  background: linear-gradient(135deg, var(--gold), var(--gold-lt));
  box-shadow: 0 10px 26px rgba(189, 149, 92, .28);
  font-family: var(--sans);
  font-size: 14px;
  font-weight: 700;
  letter-spacing: .5px;
  text-align: center;
  text-decoration: none;
  color: var(--green);
  cursor: pointer;
  transition: transform .2s, box-shadow .2s, background .2s;
}

.trip-cta:hover,
.trip-cta:focus-visible {
  background: linear-gradient(135deg, var(--gold-lt), #E8C088);
  color: var(--green);
  transform: translateY(-2px);
  box-shadow: 0 15px 34px rgba(189, 149, 92, .34);
}

.trip-cta--ghost {
  background: none;
  border: 1px solid var(--green);
  box-shadow: none;
  color: var(--green);
}

.trip-cta--ghost:hover,
.trip-cta--ghost:focus-visible {
  background: var(--green);
  border-color: var(--green);
  color: #F7F3E7;
  box-shadow: none;
}

.trip-cta-note {
  display: flex;
  gap: 9px;
  margin: 14px 0 0;
  font-size: 12.5px;
  line-height: 1.65;
  color: #85827b;
}

.trip-cta-note i { margin-top: 3px; color: var(--gold-dk); }

.trip-card-contact {
  margin: 20px 0 0;
  padding: 18px 0 0;
  border-top: 1px solid #efebe4;
  list-style: none;
}

.trip-card-contact li { margin-bottom: 10px; }
.trip-card-contact li:last-child { margin-bottom: 0; }

.trip-card-contact a {
  display: flex;
  align-items: center;
  gap: 11px;
  font-size: 14.5px;
  color: var(--green);
  text-decoration: none;
  transition: color .25s;
}

.trip-card-contact a:hover { color: var(--gold-dk); }
.trip-card-contact i { width: 16px; color: var(--gold-dk); text-align: center; }

/* The company's own credentials, compressed to a line and sitting under the
   CTA. The accreditation logos are not repeated here — the footer carries
   them on every page of the site. */
.trip-credit {
  margin: 18px 0 0;
  padding-top: 16px;
  border-top: 1px solid #efebe4;
  font-size: 12.5px;
  line-height: 1.65;
  color: #85827b;
}

/* ------------------------------------------------------- Ask-a-change */

.trip-ask-label {
  display: block;
  margin: 0 0 12px;
  font-size: 16px;
  line-height: 1.7;
  font-weight: 300;
  color: var(--body);
}

.trip-ask textarea {
  display: block;
  width: 100%;
  padding: 13px 15px;
  border: 1px solid #e2ded7;
  border-radius: 10px;
  background: var(--stone);
  font-family: var(--sans);
  font-size: 15px;
  font-weight: 300;
  line-height: 1.65;
  color: var(--body);
  resize: vertical;
}

.trip-ask textarea:focus {
  outline: 0;
  border-color: var(--gold);
  background: #fff;
}

.trip-ask-foot {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  justify-content: space-between;
  gap: 14px 20px;
  margin-top: 14px;
}

.trip-ask-hints {
  display: flex;
  flex-wrap: wrap;
  gap: 6px;
  margin: 0;
  padding: 0;
  list-style: none;
}

.trip-ask-hints li {
  padding: 5px 12px;
  border-radius: 9999px;
  background: var(--stone);
  font-size: 12px;
  color: #7d7a73;
}

.trip-ask-foot .trip-cta {
  width: auto;
  flex: 0 0 auto;
  padding: 13px 26px;
}

/* ------------------------------------ Contact form: itinerary carried in
   The enquiry form lives on the contact page but this banner only ever
   appears when a trip page sent the visitor there, so its one rule sits
   with the trip page rather than in the main sheet. */

.enquiry-package {
  display: flex;
  align-items: flex-start;
  gap: 12px;
  margin: 0 0 26px;
  padding: 14px 18px;
  border: 1px solid rgba(189, 149, 92, .35);
  border-radius: 10px;
  background: rgba(189, 149, 92, .09);
  font-size: 14.5px;
  line-height: 1.6;
  color: var(--body);
}

.enquiry-package i { margin-top: 4px; color: var(--gold-dk); }

.enquiry-package a {
  font-weight: 600;
  color: var(--green);
  text-decoration: underline;
  text-underline-offset: 3px;
}

.enquiry-package a:hover { color: var(--gold-dk); }

/* --------------------------------------------------------- Tax + nav */

.trip-main .pkg-tax { margin-top: 54px; }

.post-nav--trip { max-width: none; }

/* ------------------------------------------------------------- Print */

@media print {

  .safari-header,
  .mobile-nav,
  .mobile-nav-overlay,
  .site-footer,
  .trip-rail,
  .trip-ask-block,
  .trip-band,
  .trip-actions,
  .trip-expand,
  .post-nav,
  .trip-day-toggle,
  .skip-link { display: none !important; }

  .trip-hero {
    padding: 0 0 18px;
    color: #000;
    background: none;
  }

  .trip-hero::before,
  .trip-hero::after { display: none; }

  .trip-hero h1,
  .trip-crumbs,
  .trip-crumbs a,
  .trip-hero-where { color: #000; }

  .trip-badges li { border-color: #999; background: none; color: #000; }

  .trip-shell { padding: 0; background: none; }
  .trip-layout { display: block; }

  /* Every day must print, open or not. Both engines' idioms, deliberately. */
  .trip-day:not([open]) > *:not(summary),
  .trip-qa:not([open]) > *:not(summary) { display: block !important; }

  .trip-day::details-content,
  .trip-qa::details-content {
    content-visibility: visible !important;
    display: block !important;
    block-size: auto !important;
  }

  .trip-day,
  .trip-qa,
  .trip-block { break-inside: auto; }

  .trip-day-head { break-after: avoid; }
  .trip-day-photo { max-width: 320px; box-shadow: none; }
  .trip-route { border: 1px solid #ccc; background: none; }
}

/* ------------------------------------------------------ Small screens */

@media (max-width: 991px) {
  .trip-hero { padding-top: 150px; padding-bottom: 48px; }
  .trip-shell { padding: 46px 0 70px; }
  .trip-block { margin-bottom: 46px; }
  .trip-route { padding: 24px 22px; }
  .trip-band { padding: 26px 24px; }
}

@media (max-width: 575px) {
  .trip-hero { padding-top: 132px; }
  .trip-badges li { font-size: 12px; padding: 7px 13px; }
  .trip-card { padding: 22px 20px; }
  .trip-route { padding: 22px 18px; }
  .trip-band { padding: 24px 20px; }
  .trip-band-btn { flex: 1 1 auto; justify-content: center; }
}