section { position: relative; z-index: 1; }

/* â"€â"€ HERO OVERLAY AUTO-MASK â"€â"€ */
@property --mask-opacity {
  syntax: '<number>';
  inherits: false;
  initial-value: 0.72;
}

/* â"€â"€ HERO â"€â"€ */
.tour-hero {
  position: relative;
  margin-top: var(--nav-height);
  height: 620px;
  overflow: hidden;
  display: flex;
  align-items: center;
}
.tour-hero-slides { position: absolute; inset: 0; }
.tour-hero-slide {
  position: absolute; inset: 0;
  background: #c5c0ba center/cover no-repeat;
  opacity: 0;
  transition: opacity 1.2s ease-in-out;
}
.tour-hero-slide.active { opacity: 1; }
.tour-hero-dots {
  position: absolute; bottom: 24px; left: 50%;
  transform: translateX(-50%);
  z-index: 10;
  display: flex; gap: 10px; align-items: center;
}
.tour-hero-dot {
  width: 8px; height: 8px; border-radius: 50%;
  background: rgba(255,255,255,0.4);
  border: none; cursor: pointer; padding: 0;
  transition: background 0.3s, transform 0.3s;
}
.tour-hero-dot.active { background: var(--cerise); transform: scale(1.3); }
.tour-hero-overlay {
  position: absolute;
  inset: 0;
  background: linear-gradient(90deg,
    rgba(0,0,0,var(--mask-opacity)) 0%,
    rgba(0,0,0,0.4) 55%,
    transparent 100%);
  transition: --mask-opacity 0.8s ease;
}
.tour-hero-content {
  position: relative;
  z-index: 2;
  padding: 0 48px;
  width: 100%;
}
.tour-hero-breadcrumb {
  position: absolute;
  top: 40px;
  left: 48px;
  z-index: 3;
  font-size: 12px;
  color: rgba(255,255,255,0.5);
}
.tour-hero-breadcrumb a { color: rgba(255,255,255,0.5); }
.tour-hero-breadcrumb a:hover { color: rgba(255,255,255,0.85); }
.tour-hero h1 {
  font-family: var(--font-heading);
  font-size: 80px;
  font-weight: 700;
  color: #fff;
  letter-spacing: -2.5px;
  line-height: 1;
  margin-bottom: 16px;
}
.tour-hero-sub {
  font-family: var(--font-body);
  font-size: 24px;
  font-weight: 400;
  color: rgba(255,255,255,0.8);
  max-width: 620px;
  line-height: 1.5;
  margin-bottom: 32px;
}
.tour-hero-btns {
  display: flex;
  gap: 12px;
  align-items: center;
}
.tour-hero-btns .btn-primary {
  font-family: var(--font-card);
  font-size: 16px;
  letter-spacing: 0;
  text-transform: uppercase;
  border-radius: 0;
  padding: 14px 28px;
  gap: 12px;
}
.tour-hero-btns .btn-primary .btn-arrow { display: inline-block; transition: transform 0.2s ease; }
.tour-hero-btns .btn-primary:hover .btn-arrow { animation: arrowBounceRight 0.6s ease infinite; }
.tour-hero-btns .btn-outline-white {
  font-family: var(--font-card);
  font-size: 16px;
  font-weight: 700;
  letter-spacing: 0;
  text-transform: uppercase;
  border-radius: 0;
  border: 1px solid #ffffff;
  padding: 14px 28px;
  backdrop-filter: blur(7px);
  -webkit-backdrop-filter: blur(7px);
}
.tour-hero-btns .btn-outline-white:hover { background: rgba(255,255,255,0.1); }
@keyframes arrowBounceRight {
  0%, 100% { transform: translateX(0); }
  50% { transform: translateX(5px); }
}

/* â"€â"€ STATS BAR â"€â"€ */
.tour-stats-bar {
  background: var(--off-white);
  border-bottom: 1px solid rgba(0,0,0,0.09);
  position: relative;
  z-index: 2;
}
.tour-stats-inner {
  max-width: var(--container);
  margin: 0 auto;
  padding: 0 40px;
  display: flex;
}
.tour-stat-item {
  flex: 1;
  padding: 28px 24px;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  border-right: 1px solid rgba(0,0,0,0.1);
}
.tour-stat-item:last-child { border-right: none; }
.tour-stat-value {
  font-family: var(--font-heading);
  font-size: 30px;
  font-weight: 900;
  color: var(--navy);
  letter-spacing: -0.5px;
  line-height: 1;
  margin-bottom: 6px;
}
.tour-stat-label {
  font-family: var(--font-card);
  font-size: 12px;
  font-weight: 500;
  letter-spacing: 0.5px;
  text-transform: uppercase;
  color: #505050;
}
.tour-stat-item.stat-price .tour-stat-value { color: var(--navy); }

/* â"€â"€ TOUR BODY â"€â"€ */
.tour-body-section {
  padding: 72px 0 64px;
  background-image: url('../images/bg-pattern.svg');
  background-repeat: repeat;
  background-size: auto;
}
.tour-body-grid {
  display: grid;
  grid-template-columns: 1fr 360px;
  gap: 60px;
  align-items: start;
}
/* Explicit placement: main + similar stack in col 1; sidebar spans col 2.
   (Similar Tours is a grid child so it can flow after the sidebar on mobile,
   while staying under the main column here on desktop.) */
.tour-body-grid .tour-main    { grid-column: 1; grid-row: 1; }
.tour-body-grid .similar-inner { grid-column: 1; grid-row: 2; }
.tour-body-grid .sidebar-col  { grid-column: 2; grid-row: 1 / span 2; }

/* â"€â"€ DIFFICULTY ROW â"€â"€ */
.difficulty-row {
  display: flex;
  flex-direction: column;
  gap: 6px;
  margin-bottom: 28px;
}
.difficulty-icons {
  display: flex;
  gap: 4px;
  align-items: flex-end;
}
.difficulty-icons img {
  width: 36px;
  height: auto;
  display: block;
}
.difficulty-border {
  display: block;
  width: 200px;
  height: 20px;
  background-image: url('../images/grade-border.svg');
  background-repeat: repeat-x;
  background-size: auto 20px;
}

/* â"€â"€ ABOUT EYEBROW â"€â"€ */
.tour-about-eyebrow {
  font-family: var(--font-card);
  font-size: 14px;
  font-weight: 300;
  letter-spacing: 0.15em;
}

/* â"€â"€ ABOUT TEXT â"€â"€ */
.tour-about-heading {
  font-family: var(--font-heading);
  font-size: 48px;
  font-weight: 900;
  color: var(--navy);
  letter-spacing: -1px;
  line-height: 1.2;
  margin-bottom: 24px;
}
.tour-about-heading em { color: var(--navy); font-style: italic; }
.tour-about-body {
  font-size: 18px;
  color: #505050;
  line-height: 1.7;
  margin-bottom: 18px;
}
/* Editor content: the global reset zeroes list padding, so restore bullets and
   give headings/lists room. Used by tours whose package inclusions live in the
   body copy rather than the What's Included panel. */
.tour-about-body p { margin-bottom: 16px; }
.tour-about-body p:last-child { margin-bottom: 0; }
.tour-about-body ul,
.tour-about-body ol {
  list-style: disc outside;
  padding-left: 22px;
  margin: 0 0 18px;
}
.tour-about-body ol { list-style: decimal outside; }
/* Tighter than the body copy: the 1.7 body line-height is right for prose but
   makes a bullet list drift apart. Wrapped items still stay readable at 1.4. */
.tour-about-body li {
  margin-bottom: 2px;
  line-height: 1.4;
}
.tour-about-body li:last-child { margin-bottom: 0; }
.tour-about-body h2,
.tour-about-body h3,
.tour-about-body h4 {
  font-family: var(--font-card);
  font-weight: 700;
  color: var(--navy);
  margin: 24px 0 8px;
  line-height: 1.3;
}
.tour-about-body h2 { font-size: 26px; }
.tour-about-body h3 { font-size: 22px; }
.tour-about-body h4 { font-size: 19px; }
.tour-about-body h2:first-child,
.tour-about-body h3:first-child,
.tour-about-body h4:first-child { margin-top: 0; }
.tour-about-body strong { color: var(--navy); font-weight: 700; }
/* Links in editor content must actually look like links: the global reset sets
   `a { color: inherit; text-decoration: none }`, which renders them identical
   to the surrounding copy. */
.tour-about-body a {
  color: var(--cerise);
  text-decoration: underline;
  text-underline-offset: 2px;
  transition: color 0.15s;
}
.tour-about-body a:hover { color: var(--cerise-dk); }
.tour-pullquote {
  background: #F0F0F0;
  border-left: 3px solid var(--cerise);
  padding: 20px 24px 16px;
  margin: 24px 0;
  border-radius: 0 4px 4px 0;
}
.tour-pullquote p {
  font-family: var(--font-body);
  font-size: 18px;
  font-style: italic;
  color: var(--body);
  margin: 0 0 16px !important;
  line-height: 1.65;
  margin: 0;
}

/* â"€â"€ SIDEBAR â"€â"€ */
.tour-sidebar-card {
  background: var(--navy);
  border-radius: 4px;
  overflow: hidden;
}
.tour-sidebar-card.booking-card {
  background: #fff;
  box-shadow: 0 4px 24px rgba(0,0,0,0.10);
}
.sidebar-price-block {
  padding: 28px 28px 0;
}
.sidebar-price-amount {
  font-family: var(--font-heading);
  font-size: 40px;
  font-weight: 900;
  color: var(--navy);
  letter-spacing: -1px;
  line-height: 1;
}
.sidebar-meta-block {
  padding: 20px 28px;
}
.sidebar-meta-row {
  display: flex;
  justify-content: space-between;
  align-items: baseline;
  padding: 14px 0;
  border-bottom: 1px solid rgba(0,0,0,0.07);
}
.sidebar-meta-row:last-child { border-bottom: none; }
.sidebar-meta-label {
  font-family: var(--font-card);
  font-size: 14px;
  font-weight: 500;
  letter-spacing: 0.3px;
  color: #505050;
}
.sidebar-meta-value {
  font-family: var(--font-card);
  font-size: 14px;
  font-weight: 500;
  letter-spacing: 0.3px;
  color: #000000;
  text-align: right;
}
/* Multiple fixed departures listed vertically — label sits at the top, dates
   stack right-aligned beneath it. */
.sidebar-meta-row-dates { align-items: flex-start; }
.sidebar-meta-dates {
  display: flex;
  flex-direction: column;
  align-items: flex-end;
  gap: 4px;
}
.sidebar-cta-block {
  padding: 8px 28px 28px;
  display: flex;
  flex-direction: column;
  gap: 12px;
}
.btn-book-tour {
  display: block;
  width: 100%;
  padding: 15px 20px;
  background: var(--cerise);
  color: #fff;
  font-family: var(--font-card);
  font-size: 13px;
  font-weight: 700;
  letter-spacing: 1px;
  text-transform: uppercase;
  border: none;
  cursor: pointer;
  border-radius: 0;
  text-align: center;
  transition: background 0.2s;
}
.btn-book-tour:hover { background: var(--cerise-dk); }

/* Mobile sticky booking bar — hidden on desktop, enabled in the ≤768 block */
.mobile-book-bar { display: none; }
.btn-ask-question {
  display: block;
  width: 100%;
  padding: 13px 20px;
  background: transparent;
  color: var(--navy);
  font-family: var(--font-card);
  font-size: 13px;
  font-weight: 700;
  letter-spacing: 1px;
  text-transform: uppercase;
  border: 2px solid var(--navy);
  cursor: pointer;
  border-radius: 0;
  text-align: center;
  transition: all 0.2s;
}
.btn-ask-question:hover { background: var(--navy); color: #fff; }
.sidebar-included-block {
  padding: 24px 28px;
  border-bottom: 1px solid rgba(255,255,255,0.1);
}
.sidebar-block-title {
  font-family: var(--font-heading);
  font-size: 22px;
  font-weight: 900;
  color: var(--navy);
  margin-bottom: 20px;
}
/* Intro line above the included bullets (e.g. "All overnight tours include
   the following:"). Pulls up under the title, sits above the list. */
.included-intro {
  margin: -8px 0 16px;
  font-family: var(--font-card);
  font-size: 14px;
  font-weight: 500;
  color: #505050;
  line-height: 1.5;
}
.included-list {
  list-style: none;
  display: flex;
  flex-direction: column;
  gap: 10px;
}
.included-list li {
  display: flex;
  align-items: flex-start;
  gap: 10px;
  font-family: var(--font-card);
  font-size: 14px;
  font-weight: 500;
  color: #505050;
  line-height: 1.5;
}
.included-list li::before {
  content: '\2713';
  display: inline-block;
  min-width: 18px;
  margin-top: 1px;
  font-family: var(--font-body);
  font-size: 14px;
  font-weight: 700;
  color: var(--navy);
  flex-shrink: 0;
}

/* â"€â"€ ITINERARY â"€â"€ */
.itinerary-heading {
  font-family: var(--font-heading);
  font-size: 48px;
  font-weight: 900;
  color: var(--navy);
  letter-spacing: -1px;
  margin-bottom: 24px;
}
.itinerary-heading em { font-style: italic; color: var(--navy); }
.itinerary-inner { margin-top: 48px; }
.itinerary-list { margin-top: 20px; }
.itinerary-day {
  position: relative;
  padding: 32px 0 32px 94px;   /* 70px badge + 24px gap = 94px text indent */
  border-bottom: 1px solid rgba(0,0,0,0.07);
}
.itinerary-day:last-child { border-bottom: none; }
/* Desktop: badge pinned top-left, title/body flow in the indented column */
.day-head { display: block; }
.day-badge {
  position: absolute;
  top: 34px;                    /* matches prior badge y-offset */
  left: 0;
  width: 70px;
  height: 70px;
  border-radius: 50%;
  background: #ebebeb;
  border: none;
  display: flex;
  align-items: center;
  justify-content: center;
  flex-shrink: 0;
}
.day-badge-num {
  font-family: var(--font-heading);
  font-size: 18px;
  font-weight: 900;
  font-style: normal;
  color: var(--navy);
  line-height: 1;
}
.day-title {
  font-family: var(--font-card);
  font-size: 24px;
  font-weight: 700;
  color: var(--navy);
  letter-spacing: -0.2px;
  margin-bottom: 10px;
  line-height: 1.25;
}
.day-desc {
  margin-bottom: 14px;
}
.day-tags {
  display: flex;
  gap: 16px;
  flex-wrap: wrap;
}
.day-tag {
  font-family: var(--font-card);
  font-size: 11px;
  font-weight: 700;
  letter-spacing: 1px;
  text-transform: uppercase;
  color: #808080;
  background: none;
  padding: 0;
  border-radius: 0;
}
.elev-wrap {
  margin-top: 20px;
}
.elev-stats {
  display: flex;
  justify-content: flex-end;
  gap: 16px;
  margin-bottom: 14px;
}
.elev-stat-pill {
  font-family: var(--font-card);
  font-size: 12px;
  font-weight: 500;
  color: #505050;
  letter-spacing: 0.2px;
}
.elev-stat-pill strong {
  font-weight: 700;
  color: var(--navy);
}
.elev-profile {
  width: 100%;
  display: block;
}
.elev-profile img {
  width: 100%;
  height: auto;
  display: block;
}

/* ── PAST TOUR HIGHLIGHTS ── */
.highlights-inner {
  margin-top: 64px;
}
.highlights-section {
  padding: 80px 0 96px;
  background: var(--off-white);
  background-image: url('../images/bg-pattern.svg');
  background-repeat: repeat;
}
.highlights-grid {
  display: flex;
  flex-direction: column;
  gap: 20px;
  margin-top: 48px;
}
.highlights-bottom {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 20px;
}
.video-thumb { cursor: pointer; }
.video-thumb-img {
  position: relative;
  background: #c5c0ba;
  border-radius: 4px;
  overflow: hidden;
  margin-bottom: 14px;
}
.highlights-top .video-thumb-img { padding-bottom: 56%; }
.highlights-bottom .video-thumb-img { padding-bottom: 58%; }
.play-btn {
  position: absolute;
  top: 50%; left: 50%;
  transform: translate(-50%, -50%);
  width: 56px; height: 56px;
  background: var(--cerise);
  border-radius: 50%;
  display: flex; align-items: center; justify-content: center;
  transition: transform 0.2s, background 0.2s;
}
.highlights-top .play-btn { width: 72px; height: 72px; }
.video-thumb:hover .play-btn {
  transform: translate(-50%, -50%) scale(1.1);
  background: var(--cerise-dk);
}
.play-btn svg { margin-left: 4px; }

/* ── SIMILAR TOURS ── */
.similar-inner {
  margin-top: 64px;
  padding: 48px 0 64px;
}
.similar-list {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 20px;
  margin-top: 0;
}
.similar-card {
  display: flex;
  align-items: stretch;
  gap: 0;
  background: #ffffff;
  border: none;
  border-radius: 5px;
  overflow: hidden;
  padding: 0;
  text-decoration: none;
  color: inherit;
  transition: box-shadow 0.2s, transform 0.2s;
}
.similar-card:hover {
  box-shadow: 0 6px 24px rgba(0,0,0,0.12);
  transform: translateY(-3px);
}
.similar-thumb {
  width: 140px;
  min-width: 140px;
  height: auto;
  min-height: 110px;
  background: #c5c0ba center/cover no-repeat;
  border-radius: 0;
  flex-shrink: 0;
}
.similar-info { flex: 1; padding: 16px 20px; display: flex; flex-direction: column; }
.similar-meta { margin-top: auto; }
.similar-dest {
  font-family: var(--font-card);
  font-size: 11px;
  font-weight: 400;
  text-transform: uppercase;
  letter-spacing: 2px;
  color: var(--cerise);
  margin-bottom: 6px;
}
.similar-name {
  font-family: var(--font-card);
  font-size: 20px;
  font-weight: 700;
  color: var(--navy);
  margin-bottom: 6px;
  line-height: 1.2;
}
.similar-meta {
  font-family: var(--font-body);
  font-size: 16px;
  font-weight: 400;
  color: #505050;
  letter-spacing: 0;
  text-transform: none;
}

/* â"€â"€ SIDEBAR PRICE INLINE â"€â"€ */
.sidebar-price-inline {
  display: flex;
  align-items: baseline;
  justify-content: space-between;
  /* The label grew from "Early Bird" to "Early Bird, Shared Occupancy" on
     6 Aug 2026 and ran straight into the 40px price, which had never needed a
     gap because space-between alone kept them apart. */
  gap: 14px;
  flex-wrap: wrap;
}
.sidebar-price-per {
  font-family: var(--font-card);
  font-size: 14px;
  font-weight: 500;
  letter-spacing: 0.3px;
  color: #505050;
  text-align: right;
  /* Wrap to its own line rather than squeeze the price, on the narrow sidebar
     and on any tour whose tier name is longer than Bintan's. */
  flex: 0 1 auto;
  min-width: 0;
  line-height: 1.4;
}
/* Indicative day-rate basis line + "price on request" (added 2026-07-21). */
.sidebar-price-basis {
  margin: 8px 0 0;
  font-family: var(--font-body);
  font-size: 12px;
  line-height: 1.5;
  color: #6a6a6a;
}
.sidebar-price-request .sidebar-price-amount {
  font-size: 28px;
}
.card-price-request,
.mobile-book-request {
  font-size: 15px;
  font-weight: 700;
  color: var(--navy);
  white-space: nowrap;
}


/* -- INCLUDED CARD --*/
.tour-sidebar-card.included-card {
  background: #fff;
  box-shadow: 0 4px 24px rgba(0,0,0,0.10);
}
.tour-sidebar-card.included-card .sidebar-included-block {
  border-bottom: none;
}
.tour-sidebar-card.included-card .sidebar-quote-attr {
  color: #888;
}

.sidebar-pullquote { margin: 0; }
.sidebar-quote-attr { display: block; line-height: 1.6; }
.quote-attr-name {
  font-family: var(--font-body);
  font-size: 16px;
  font-weight: 400;
  color: #000;
  font-style: normal;
}
.quote-attr-tour {
  font-family: var(--font-body);
  font-size: 16px;
  font-weight: 400;
  color: #505050;
  font-style: normal;
}

/* ── TERRAIN TABLE ── */
/* Grading — the panel's opening line: who the tour suits. Label-less by design,
   so it reads as an intro rather than another stat row. */
.terrain-desc {
  font-family: var(--font-card);
  font-size: 14px;
  font-weight: 500;
  line-height: 1.5;
  color: #ffffff;
  /* No rule beneath it — the first table row's own border already divides
     this from the stats, and the row's 14px padding-top carries the gap. */
  margin-bottom: 0;
}
.terrain-table { display: flex; flex-direction: column; }
.terrain-row {
  display: flex;
  justify-content: space-between;
  align-items: baseline;
  padding: 14px 0;
  border-bottom: 1px solid rgba(255,255,255,0.12);
}
.terrain-row:last-child { border-bottom: none; }
.terrain-label {
  font-family: var(--font-card);
  font-size: 14px;
  font-weight: 500;
  letter-spacing: 0.3px;
  color: #A8A8A8;
  flex-shrink: 0;
  padding-right: 12px;
}
.terrain-value {
  font-family: var(--font-card);
  font-size: 14px;
  font-weight: 500;
  letter-spacing: 0.3px;
  color: #ffffff;
  text-align: right;
}
/* Terrain and Areas Covered hold longer prose — stack them (label above,
   value wrapping and left-aligned) instead of the tight single-line rows. */
.terrain-row-areas {
  flex-direction: column;
  align-items: stretch;
  gap: 6px;
}
.terrain-row-areas .terrain-value {
  text-align: left;
  line-height: 1.5;
  color: #ffffff;
}

/* â"€â"€ SIDEBAR COLUMN WRAPPER â"€â"€ */
.sidebar-col { display: flex; flex-direction: column; gap: 40px; }
.terrain-card { background: var(--navy); border-radius: 4px; padding: 28px 28px 8px; }
.terrain-card-heading {
  font-family: var(--font-heading);
  font-size: 22px;
  font-weight: 900;
  color: #fff;
  letter-spacing: -0.3px;
  margin-bottom: 20px;
}

/* â"€â"€ SIDEBAR TESTIMONIAL â"€â"€ */
.sidebar-quote-attr {
  font-family: var(--font-body);
  font-size: 13px;
  color: rgba(255,255,255,0.4);
}

/* â"€â"€ SIMILAR CARD ARROW â"€â"€ */

/* ── VIDEO MODAL ── */
.video-modal {
  display: none;
  position: fixed; inset: 0; z-index: 9000;
  align-items: center; justify-content: center;
}
.video-modal.active { display: flex; }
.video-modal-backdrop {
  position: absolute; inset: 0;
  background: rgba(0,0,0,0.82);
}
.video-modal-box {
  position: relative; z-index: 1;
  width: 90%; max-width: 900px;
}
.video-modal-close {
  position: absolute; top: -44px; right: 0;
  background: none; border: none; color: #fff;
  font-size: 36px; line-height: 1; cursor: pointer;
  padding: 4px 10px;
  transition: color 0.2s;
}
.video-modal-close:hover { color: var(--cerise); }
.video-modal-player {
  position: relative; padding-bottom: 56.25%;
  background: #000; border-radius: 4px; overflow: hidden;
}
/* A Reel is portrait, and Instagram's embed adds its own header and action row
   on top of the video, so its height is not a clean 9:16. A viewport-relative
   height in a narrow box adapts, where a guessed aspect would letterbox it or
   clip the comment row. */
.video-modal-box--portrait { max-width: 400px; }
.video-modal-player--portrait {
  padding-bottom: 0;
  height: min(80vh, 720px);
  background: #fff;   /* Instagram's card is white; black would frame it oddly */
}
.video-modal-player iframe {
  position: absolute; inset: 0;
  width: 100%; height: 100%;
  border: none;
}

/* ── ELEVATION PROFILE: CLICK TO ENLARGE ──
   The charts are ~2100x254 and render inside a narrow itinerary column, so at
   rest they sit at roughly a quarter of their real width and the detail is
   unreadable. The button is a bare wrapper — the chart itself IS the control. */
.elev-profile-btn {
  display: block;
  width: 100%;
  padding: 0;
  border: none;
  background: none;
  cursor: zoom-in;
  border-radius: 4px;
  transition: opacity 0.2s;
}
/* BOTH selectors are needed. global.js `removeElevWhiteBg()` draws each chart to
   a canvas to knock its white background out to transparent, then does
   img.replaceWith(canvas) — so by the time a user sees this there is no <img>
   left. The canvas carries inline sizing of its own, but styling only the <img>
   would be dead CSS. */
.elev-profile-btn img,
.elev-profile-btn canvas { display: block; width: 100%; height: auto; }
.elev-profile-btn:hover { opacity: 0.85; }
/* Keyboard users get a visible target; the global reset kills default outlines. */
.elev-profile-btn:focus-visible {
  outline: 2px solid var(--cerise);
  outline-offset: 3px;
}

/* ── ELEVATION PROFILE MODAL ──
   Deliberately NOT the video modal: that box is sized for a 16:9 iframe, and
   letterboxing an 8:1 chart into it would recreate the very problem this solves.
   Here the box hugs the image instead of forcing an aspect ratio. */
.elev-modal {
  display: none;
  position: fixed; inset: 0; z-index: 9000;
  align-items: center; justify-content: center;
}
.elev-modal.active { display: flex; }
.elev-modal-backdrop {
  position: absolute; inset: 0;
  background: rgba(0,0,0,0.82);
}
.elev-modal-box {
  position: relative; z-index: 1;
  width: 94%; max-width: 1600px;
}
.elev-modal-close {
  position: absolute; top: -44px; right: 0;
  background: none; border: none; color: #fff;
  font-size: 36px; line-height: 1; cursor: pointer;
  padding: 4px 10px;
  transition: color 0.2s;
}
.elev-modal-close:hover { color: var(--cerise); }
/* The white card is load-bearing, not decoration. The lightbox shows the RAW
   PNG (data-elev-src), which the page version is not: global.js knocks these
   charts' white background out to transparent via canvas. These profiles are
   dark lines on white, so a transparent one dropped on the 0.82-black backdrop
   would be all but invisible. White backs it explicitly. */
.elev-modal-img {
  display: block;
  width: 100%; height: auto;
  max-height: 76vh;
  object-fit: contain;
  background: #fff;
  border-radius: 4px;
}
.elev-modal-stage { display: block; }
.elev-modal-caption {
  margin: 14px 0 0;
  color: #fff;
  font-family: var(--font-body);
  font-size: 16px;
  text-align: center;
}

/* ── ELEVATION MODAL ON NARROW SCREENS ──
   These charts are ~8:1. Fitted to a phone's width they collapse to a ~44px
   strip — unreadable, and barely wider than the in-page version, so the
   lightbox would achieve nothing on mobile.
   Size by HEIGHT instead and let the stage scroll horizontally: the rider
   swipes along the profile, which is how the shape is read anyway. */
@media (max-width: 768px) {
  .elev-modal-box { width: 100%; }
  .elev-modal-stage {
    overflow-x: auto;
    -webkit-overflow-scrolling: touch;
    background: #fff;
    border-radius: 4px;
  }
  /* height:auto, NOT a fixed vh — forcing 44vh upscaled the 254px-tall charts to
     ~371px, which adds no detail and just blurs the axis labels. Natural size is
     the sharpest these can ever be, so render 1:1 and scroll. max-height only
     bites on the taller Girona-style profiles (1228x448). */
  .elev-modal-img {
    width: auto;
    height: auto;
    max-width: none;
    max-height: 44vh;
    border-radius: 0;
  }
  .elev-modal-caption { font-size: 14px; padding: 0 12px; }
  .elev-modal-close { top: -40px; right: 8px; }
}

/* ── NOTIFY-ME MODAL (coming-soon tours) ──
   A white card holding the Tour Waitlist form, over the same dark backdrop as the
   video/elev lightboxes. Shown from the "Notify Me" CTA when a tour has no dates
   yet. registration.css is not enqueued here, so the form gets FF's baseline plus
   the light branding below (cerise submit, bordered inputs). */
.notify-modal {
  display: none;
  position: fixed; inset: 0; z-index: 9000;
  align-items: center; justify-content: center;
  padding: 20px;
}
.notify-modal.active { display: flex; }
.notify-modal-backdrop {
  position: absolute; inset: 0;
  background: rgba(0,0,0,0.82);
}
.notify-modal-box {
  position: relative; z-index: 1;
  width: 100%; max-width: 460px;
  max-height: 90vh; overflow-y: auto;
  background: var(--white);
  border-radius: var(--radius);
  padding: 36px 34px 30px;
  box-shadow: 0 24px 60px rgba(0,0,0,0.35);
}
.notify-modal-close {
  position: absolute; top: 10px; right: 14px;
  background: none; border: none;
  color: var(--grey);
  font-size: 30px; line-height: 1; cursor: pointer;
  padding: 2px 8px;
  transition: color 0.2s;
}
.notify-modal-close:hover { color: var(--cerise); }
.notify-modal-head { margin-bottom: 22px; }
.notify-modal-head .section-label { color: var(--cerise); margin-bottom: 8px; }
/* No leading dash in a modal (Jacq, 7 Aug 2026). The 20x2px rule from
   .section-label::before is a page-section device — it earns its place at the
   top of a wide band of content, where it separates the eyebrow from whatever
   sits above. In a modal there is nothing above it, so it reads as a stray
   hyphen against the title. Both notify-modal popups are covered: Coming Soon
   and Private Departure. Same treatment the bespoke sections already use. */
.notify-modal-title {
  font-family: var(--font-heading);
  font-size: 26px; line-height: 1.2;
  color: var(--navy);
  margin: 0 0 10px;
}
/* Request-Dates modal + sidebar note. Shares the Notify-Me chrome; these two
   extras carry the "no obligation" and minimum-riders guidance. */
.notify-modal-note {
  font-family: var(--font-body); font-size: 14px; line-height: 1.5;
  color: #6d6259; background: #f6f2ee; border-radius: var(--radius);
  padding: 10px 14px; margin-top: 12px;
}
.sidebar-cta-note {
  font-family: var(--font-body); font-size: 13px; line-height: 1.45;
  color: #7d7168; text-align: center; margin-top: 10px;
}

.notify-modal-sub {
  font-family: var(--font-body);
  font-size: 15px; line-height: 1.5;
  color: var(--body);
  margin: 0;
}
/* Light branding for the embedded FF form. */
.notify-modal-form input[type="text"],
.notify-modal-form input[type="email"] {
  width: 100%;
  font-family: var(--font-body);
  font-size: 15px;
  border: 1px solid var(--grey);
  border-radius: var(--radius);
  padding: 11px 14px;
}
.notify-modal-form input[type="text"]:focus,
.notify-modal-form input[type="email"]:focus {
  outline: none;
  border-color: var(--cerise);
}
.notify-modal-form .ff-btn-submit {
  width: 100%;
  margin-top: 6px;
  background: var(--cerise);
  color: #fff;
  border: none;
  border-radius: 40px;
  padding: 12px 28px;
  font-family: var(--font-body);
  font-weight: 700;
  cursor: pointer;
  transition: background 0.2s;
}
.notify-modal-form .ff-btn-submit:hover { background: var(--cerise-dk); }
.notify-modal-form .ff-message-success {
  font-family: var(--font-body);
  font-size: 16px;
  line-height: 1.5;
  color: var(--navy);
}
@media (max-width: 480px) {
  .notify-modal-box { padding: 30px 22px 24px; }
  .notify-modal-title { font-size: 22px; }
}

/* ── HIGHLIGHTS INTRO ── */
.highlights-intro {
  font-size: 18px;
  color: #505050;
  line-height: 1.6;
  max-width: 740px;
  margin-bottom: 0;
}

/* ══════════════════════════════════════
   RESPONSIVE — page-specific overrides
   (shared nav/footer/hero handled by global.css)
   ══════════════════════════════════════ */

/* ── 1024px ── */
@media (max-width: 1024px) {
  .tour-body-grid { grid-template-columns: 1fr 300px; gap: 40px; }
  .tour-hero h1 { font-size: 60px; }
  .tour-hero-sub { font-size: 20px; }
  .tour-about-heading,
  .itinerary-heading { font-size: 40px; }
  .highlights-top .video-thumb-img { padding-bottom: 56%; }
  /* Similar Tours: the body is still 2-col here, so the content column is too
     narrow for 2 side-by-side cards — stack them single-column on tablet. */
  .similar-list { grid-template-columns: 1fr; }
  /* Hero: base 620px is near-square at tablet width (~1.3:1), too tall for a
     landscape photo — bring it down to a proper landscape band (~1.8:1). */
  .tour-hero { height: 460px; }
  /* Stats bar: 5 items across is cramped at tablet width (~148px each, values
     wrap to 2 lines) — reflow into a 3-per-row wrapped grid (3 + 2). */
  .tour-stats-inner { flex-wrap: wrap; padding: 0 24px; }
  .tour-stat-item {
    flex: 0 0 33.333%;
    max-width: 33.333%;
    padding: 22px 14px;
    box-sizing: border-box;
  }
  .tour-stat-item:nth-child(3n) { border-right: none; }
  .tour-stat-item:nth-child(-n+3) { border-bottom: 1px solid rgba(0,0,0,0.1); }
}

/* ── 768px ── */
@media (max-width: 768px) {
  /* Stack main content + sidebar into one column */
  .tour-body-grid { grid-template-columns: 1fr; gap: 40px; }
  .tour-body-section { padding: 48px 0 40px; }

  /* Single column: reset desktop grid placement so children flow in DOM order
     (tour-main → sidebar-col → similar-inner) — sidebar now sits BEFORE
     "You May Also Like" instead of at the very bottom. */
  .tour-body-grid .tour-main,
  .tour-body-grid .sidebar-col,
  .tour-body-grid .similar-inner { grid-column: 1; grid-row: auto; }

  /* Trim the empty space above "You May Also Like": drop the desktop 64px
     margin (the grid row-gap already separates it) and the big top padding. */
  .similar-inner { margin-top: 0; padding-top: 8px; }

  /* Sidebar: static, full-width, in-flow */
  .sidebar-col {
    position: static;
    top: auto;
    width: 100%;
    max-width: 100%;
    gap: 24px;
  }

  /* Sticky bottom booking bar — price + Book always reachable while scrolling */
  .mobile-book-bar {
    display: flex;
    align-items: center;
    gap: 14px;
    position: fixed;
    left: 0; right: 0; bottom: 0;
    z-index: 200;
    padding: 12px 16px calc(12px + env(safe-area-inset-bottom, 0px));
    background: #fff;
    border-top: 1px solid rgba(0,0,0,0.1);
    box-shadow: 0 -6px 24px rgba(0,0,0,0.12);
    transform: translateY(0);
    transition: transform 0.28s ease;
  }
  /* Slides out of the way when the real booking card is visible (JS toggles .is-hidden) */
  .mobile-book-bar.is-hidden { transform: translateY(120%); }
  .mobile-book-price { display: flex; flex-direction: column; line-height: 1.1; flex-shrink: 0; }
  .mobile-book-amount {
    font-family: var(--font-heading);
    font-size: 24px; font-weight: 900;
    color: var(--navy); letter-spacing: -0.5px;
  }
  .mobile-book-per {
    font-family: var(--font-body);
    font-size: 12px; color: #808080; margin-top: 2px;
  }
  .mobile-book-btn {
    flex: 1;
    text-align: center;
    padding: 14px 18px;
    background: var(--cerise); color: #fff;
    font-family: var(--font-card);
    font-size: 13px; font-weight: 700;
    letter-spacing: 1px; text-transform: uppercase;
    text-decoration: none; border: none; border-radius: 0; cursor: pointer;
    transition: background 0.2s;
  }
  .mobile-book-btn:active { background: var(--cerise-dk); }
  /* Leave room so the fixed bar never covers the last content / footer */
  .footer { padding-bottom: 72px; }

  /* Hero scales down */
  .tour-hero { height: 480px; }
  .tour-hero-content { padding: 0 28px; }
  .tour-hero-breadcrumb { left: 28px; top: 28px; }
  .tour-hero h1 { font-size: 46px; letter-spacing: -1.5px; }
  .tour-hero-sub { font-size: 18px; }

  /* Stats bar: wrap into a grid of 3 cols */
  .tour-stats-inner { flex-wrap: wrap; padding: 0 20px; }
  .tour-stat-item {
    flex: 0 0 33.333%;
    max-width: 33.333%;
    padding: 20px 12px;
    box-sizing: border-box;
  }
  .tour-stat-item:nth-child(3n) { border-right: none; }
  .tour-stat-item:nth-child(-n+2) { border-bottom: 1px solid rgba(0,0,0,0.1); }
  .tour-stat-item:nth-child(3) { border-bottom: 1px solid rgba(0,0,0,0.1); }
  .tour-stat-value { font-size: 24px; }

  /* Headings */
  .tour-about-heading,
  .itinerary-heading { font-size: 34px; }
  .tour-about-body { font-size: 17px; }

  /* Section padding trims */
  .highlights-section { padding: 56px 0 64px; }

  /* Difficulty penguins wrap */
  .difficulty-icons { flex-wrap: wrap; }
  .difficulty-border { max-width: 100%; }

  /* Highlights → single column, all thumbs same height, all play icons same size */
  .highlights-bottom { grid-template-columns: 1fr; }
  .highlights-top .video-thumb-img,
  .highlights-bottom .video-thumb-img { padding-bottom: 58%; }   /* uniform aspect → equal height */
  .highlights-top .play-btn,
  .highlights-bottom .play-btn { width: 56px; height: 56px; }    /* uniform play button */
  .play-btn svg { width: 18px; height: 20px; }                   /* uniform icon (top was 24×26) */

  /* Similar tours → stack */
  .similar-list { grid-template-columns: 1fr; }

  /* Elevation charts fit — constrain the canvas (JS swaps img→canvas) too,
     and left-align + wrap the stat pills so nothing overflows the card */
  .elev-profile { width: 100%; overflow: hidden; }
  .elev-profile img,
  .elev-profile canvas { max-width: 100%; width: 100%; height: auto; display: block; }
  .elev-stats { flex-wrap: wrap; justify-content: flex-start; gap: 8px 18px; }

  /* Itinerary day → single full-width column; badge stacked above the title
     so desc/tags and the elevation profile span the full card width */
  .itinerary-day { padding-left: 0; }
  .day-head {
    display: flex;
    flex-direction: column;
    align-items: flex-start;
    gap: 12px;
    margin-bottom: 14px;
  }
  .day-badge {
    position: static;
    flex-shrink: 0;
  }
  .day-title { margin-bottom: 0; }
}

/* ── 480px ── */
@media (max-width: 480px) {
  .tour-hero { height: 420px; }
  .tour-hero-content { padding: 0 20px; }
  .tour-hero-breadcrumb { left: 20px; }
  .tour-hero h1 { font-size: 38px; letter-spacing: -1px; }
  .tour-hero-sub { font-size: 16px; margin-bottom: 24px; }
  .tour-hero-btns { flex-wrap: wrap; }
  .tour-hero-btns .btn-primary,
  .tour-hero-btns .btn-outline-white { font-size: 14px; padding: 12px 20px; }

  /* Stats bar → 2 cols */
  .tour-stat-item {
    flex: 0 0 50%;
    max-width: 50%;
  }
  /* reset the 3-col borders, apply 2-col rules */
  .tour-stat-item { border-right: 1px solid rgba(0,0,0,0.1); border-bottom: 1px solid rgba(0,0,0,0.1); }
  .tour-stat-item:nth-child(3n) { border-right: 1px solid rgba(0,0,0,0.1); }
  .tour-stat-item:nth-child(2n) { border-right: none; }
  .tour-stat-item:last-child { border-bottom: none; }
  /* Lone price item (5th, alone on its row) → span full width & center */
  .tour-stat-item.stat-price {
    flex: 0 0 100%;
    max-width: 100%;
    border-right: none;
  }
  .tour-stat-value { font-size: 22px; }
  .tour-stat-label { font-size: 11px; }

  .tour-about-heading,
  .itinerary-heading { font-size: 28px; }
  .tour-about-body { font-size: 16px; }

  /* Itinerary day: shrink badge + title on small phones (layout handled at ≤768) */
  .day-badge { width: 52px; height: 52px; }
  .day-badge-num { font-size: 14px; }
  .day-title { font-size: 20px; }

  /* Similar card: keep row but shrink thumb */
  .similar-thumb { width: 110px; min-width: 110px; }
  .similar-name { font-size: 18px; }
  .similar-meta { font-size: 14px; }

  /* Sidebar cards padding trim */
  .sidebar-price-block,
  .sidebar-meta-block,
  .sidebar-cta-block,
  .sidebar-included-block,
  .terrain-card { padding-left: 20px; padding-right: 20px; }
}