/* ==========================================================================
   Discover Mildura — rebuilt from the Webflow export (discovermildura.com.au)
   Palette, type scale and layout metrics are taken from the original
   discover-mildura-124904.webflow.css. Two self-hosted families replace the
   original eight Google families: Plus Jakarta Sans (body + headings, standing
   in for Inter/Poppins) and Eudoxus Sans (brand mark), both shipped with the
   original site.
   ========================================================================== */

@font-face {
  font-family: 'Plus Jakarta Sans';
  src: url(/assets/fonts/PlusJakartaSans-Regular.woff) format('woff');
  font-weight: 400;
  font-style: normal;
  font-display: swap;
}
@font-face {
  font-family: 'Plus Jakarta Sans';
  src: url(/assets/fonts/PlusJakartaSans-Medium.woff) format('woff');
  font-weight: 500;
  font-style: normal;
  font-display: swap;
}
@font-face {
  font-family: 'Plus Jakarta Sans';
  src: url(/assets/fonts/PlusJakartaSans-Bold.woff) format('woff');
  font-weight: 700;
  font-style: normal;
  font-display: swap;
}
@font-face {
  font-family: 'Eudoxus Sans';
  src: url(/assets/fonts/EudoxusSans-Bold.woff) format('woff');
  font-weight: 700;
  font-style: normal;
  font-display: swap;
}
@font-face {
  font-family: 'Eudoxus Sans';
  src: url(/assets/fonts/EudoxusSans-ExtraBold.woff) format('woff');
  font-weight: 800;
  font-style: normal;
  font-display: swap;
}

:root {
  /* Brand palette — verbatim from the Webflow export */
  --body-display: #516381;
  --indicator-outline: #c0c0d333;
  --grey-background: #f7f8fc;
  --black: #081c3a;
  --outline: #efeff7;
  --shaddow: #3540751a;
  --royal-blue: #3572ff;
  --dark-outline: #e6e6f3;
  --teal: #a08674;
  --ghost-white: #fcfcff;
  --accent: #f28c1e; /* logo sun-swirl orange, used sparingly */

  --font-body: 'Plus Jakarta Sans', 'Segoe UI', system-ui, -apple-system, sans-serif;
  --font-brand: 'Eudoxus Sans', var(--font-body);

  --nav-h: 72px;
  --banner-pad: clamp(44px, 7vw, 90px); /* breathing room around hero copy */
  --rail-w: 76px;
  --radius: 3px;
}

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

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

body {
  margin: 0;
  color: var(--black);
  background: #fff;
  font-family: var(--font-body);
  font-size: 17px;
  line-height: 1.5;
  -webkit-text-size-adjust: 100%;
  overflow-x: hidden;
}

img, svg, video { max-width: 100%; display: block; }
a { color: inherit; text-decoration: none; }
button { font: inherit; color: inherit; background: none; border: 0; cursor: pointer; padding: 0; }

h1, h2, h3, h4, h5, h6 { margin: 0; font-weight: 700; line-height: 1.25; }
h1 { font-size: clamp(30px, 4.5vw, 48px); letter-spacing: -0.025em; }
h2 { font-size: clamp(25px, 3.4vw, 34px); letter-spacing: -0.03em; line-height: 1.3; }
h3 { font-size: 22px; font-weight: 500; letter-spacing: -0.03em; }
h4 { font-size: 18px; font-weight: 500; letter-spacing: -0.01em; }

p { margin: 0 0 10px; color: var(--body-display); }



/* The page's inline <style> hides it until this sheet has applied. */
html { visibility: visible; animation: none; } /* reveal */

/* ---------- no motion until the page has settled ----------
   Anything that reads styles while the page is still parsing — Dark Reader and
   similar extensions do, on every element — makes Firefox give the menus their
   unstyled values first: drawer on screen, dropdown shown. When this sheet lands
   that counts as a change, and the drawer slides away on every page load. With
   transitions off until site.js adds .motion-ready, the menus snap straight to
   their resting state instead, and open and close as before afterwards. */
html:not(.motion-ready) *,
html:not(.motion-ready) *::before,
html:not(.motion-ready) *::after { transition: none !important; }

/* ---------- primitives from the export ---------- */

.subtitle {
  letter-spacing: 3px;
  text-transform: uppercase;
  font-size: 11px;
  font-weight: 500;
  line-height: 1.4em;
}
.subtitle.large { font-size: 14px; }
.subtitle.white { color: #fff; }

.body-display { color: var(--body-display); font-size: 17px; font-weight: 400; line-height: 1.6em; }
.body-display.large { font-size: 19px; }
.body-display.small { font-size: 14px; line-height: 1.5em; }
.body-display.white { color: #fff; }
.body-display a { text-decoration: underline; text-underline-offset: 3px; }
.body-display strong { color: var(--black); }

.xxl-heading {
  font-size: clamp(38px, 6.5vw, 72px);
  line-height: 1.08;
  letter-spacing: -0.02em;
  font-weight: 700;
}

.button, .outline-button {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 10px;
  min-height: 48px;
  padding: 12px 28px;
  border-radius: var(--radius);
  font-size: 12px;
  font-weight: 500;
  letter-spacing: 2.5px;
  text-transform: uppercase;
  transition: background-color .2s ease, color .2s ease, border-color .2s ease, transform .2s ease;
}
.button { background: var(--black); color: #fff; }
.button:hover { background: #13294d; }
.button.white { background: #fff; color: var(--black); }
.button.white:hover { background: var(--outline); }
.outline-button { border: 1px solid var(--dark-outline); color: var(--black); background: transparent; }
.outline-button:hover { border-color: var(--black); }
.outline-button.white { border-color: #ffffff66; color: #fff; }
.outline-button.white:hover { border-color: #fff; }
.outline-button.small, .button.small { min-height: 44px; padding: 10px 20px; font-size: 11px; }

.horizontal-line { flex: 1; height: 1px; background: var(--dark-outline); }
.subtitle-intro-wrapper { display: flex; align-items: center; gap: 18px; margin-bottom: 28px; }
.subtitle-intro-wrapper.light .horizontal-line { background: #ffffff33; }
.subtitle-intro-wrapper.light .subtitle { color: #fff; }

/* ---------- layout: side rails, like the original 80px grid ---------- */

.grid-wrapper {
  width: 100%;
  max-width: 1406px;
  margin-inline: auto;
  padding-inline: 20px;
}
@media (min-width: 820px) {
  .grid-wrapper { padding-inline: calc(var(--rail-w) + 28px) 40px; }
}
@media (min-width: 1440px) {
  .grid-wrapper { padding-inline: calc(var(--rail-w) + 64px) 64px; }
}

.section { padding-block: clamp(64px, 9vw, 130px); position: relative; }
.section.tight { padding-block: clamp(40px, 6vw, 80px); }
.section.no-top-padding { padding-top: 0; }

/* left rail with scroll progress + socials (desktop only) */
.scroll-indicator {
  position: fixed;
  inset: 0 auto 0 0;
  width: var(--rail-w);
  padding: calc(var(--nav-h) + 28px) 0 20px;
  border-right: 1px solid var(--outline);
  display: none;
  flex-direction: column;
  align-items: center;
  gap: 22px;
  background: #fff;
  z-index: 40;
}
@media (min-width: 820px) { .scroll-indicator { display: flex; } }
.indicator-wrapper { flex: 1; width: 3px; border-radius: 100px; background: var(--outline); overflow: hidden; }
.indicator-fill { width: 100%; height: 0%; background: var(--black); border-radius: 100px; }
.social-sidebar-icons { display: flex; flex-direction: column; gap: 6px; }
.sidebar-icon, .agent-social-icon {
  width: 40px; height: 40px;
  display: grid; place-items: center;
  border-radius: 100px;
  color: var(--body-display);
  transition: color .2s ease, background-color .2s ease;
}
.sidebar-icon:hover, .agent-social-icon:hover { color: var(--black); background: var(--grey-background); }
.sidebar-icon svg, .agent-social-icon svg { width: 15px; height: 15px; fill: currentColor; }

/* ---------- navbar ---------- */

.navbar {
  position: fixed;
  inset: 0 0 auto;
  height: var(--nav-h);
  background: #ffffffeb;
  backdrop-filter: blur(10px);
  -webkit-backdrop-filter: blur(10px);
  border-bottom: 1px solid var(--outline);
  display: flex;
  align-items: stretch;
  z-index: 50;
}
.menu-button {
  width: var(--nav-h);
  min-width: var(--nav-h);
  border-right: 1px solid var(--outline);
  display: grid;
  place-items: center;
}
.menu-icon { width: 26px; height: 18px; position: relative; }
.menu-icon span {
  position: absolute; left: 0; width: 100%; height: 2.5px;
  background: var(--black); border-radius: 2px;
  transition: transform .35s cubic-bezier(.6,.05,.25,1), opacity .2s ease;
}
.menu-icon span:nth-child(1) { top: 0; }
.menu-icon span:nth-child(2) { top: 50%; translate: 0 -50%; }
.menu-icon span:nth-child(3) { bottom: 0; }
body.flyout-open .menu-icon span:nth-child(1) { transform: translateY(7.75px) rotate(45deg); }
body.flyout-open .menu-icon span:nth-child(2) { opacity: 0; }
body.flyout-open .menu-icon span:nth-child(3) { transform: translateY(-7.75px) rotate(-45deg); }

.navigation-content {
  flex: 1;
  display: flex;
  align-items: center;
  gap: 12px;
  padding-inline: 18px;
  min-width: 0;
}
.brand { display: flex; align-items: center; gap: 12px; min-width: 0; }
.brand-logo { width: 44px; height: auto; flex: none; object-fit: contain; }
.brand-name {
  font-family: var(--font-brand);
  font-weight: 700;
  font-size: 17px;
  letter-spacing: 0.01em;
  text-transform: uppercase;
  white-space: nowrap;
}
@media (max-width: 479px) { .brand-name { font-size: 14px; } }

.nav-menu { display: none; margin-inline: auto; gap: 4px; }
@media (min-width: 1024px) { .nav-menu { display: flex; } }
.nav-link {
  position: relative;
  padding: 10px 18px;
  font-size: 13px;
  font-weight: 500;
  letter-spacing: 3px;
  text-transform: uppercase;
}
.nav-link::after {
  content: ""; position: absolute; left: 18px; right: 18px; bottom: 4px;
  height: 2px; background: var(--black);
  transform: scaleX(0); transform-origin: left;
  transition: transform .25s ease;
}
.nav-link:hover::after, .nav-link[aria-current="page"]::after { transform: scaleX(1); }

.right-nav { display: flex; align-items: center; gap: 14px; margin-left: auto; }

/* tours dropdown */
.nav-dropdown { position: relative; display: none; }
@media (min-width: 640px) { .nav-dropdown { display: block; } }
.nav-button-toggle {
  display: flex; align-items: center; gap: 10px;
  border: 1px solid var(--dark-outline);
  border-radius: var(--radius);
  padding: 12px 16px;
  font-size: 11px; letter-spacing: 3px; text-transform: uppercase; font-weight: 500;
  min-height: 44px;
}
.nav-button-toggle svg.pin { width: 14px; height: 14px; }
.nav-button-toggle .chev { width: 12px; height: 12px; transition: transform .3s ease; }
.nav-dropdown.open .chev { transform: rotate(180deg); }
.dropdown-list {
  position: absolute; top: calc(100% + 10px); right: 0;
  width: min(340px, 90vw);
  background: #fff;
  border: 1px solid var(--outline);
  border-radius: 6px;
  box-shadow: 0 24px 48px -12px var(--shaddow);
  padding: 22px;
  opacity: 0; visibility: hidden; translate: 0 8px;
  transition: opacity .25s ease, translate .25s ease, visibility .25s;
}
.nav-dropdown.open .dropdown-list { opacity: 1; visibility: visible; translate: 0 0; }

.location-card {
  display: flex; align-items: center; justify-content: space-between; gap: 14px;
  padding: 14px 4px;
  border-bottom: 1px solid var(--outline);
  transition: padding-left .2s ease;
}
.location-card:last-child { border-bottom: 0; }
.location-card:hover { padding-left: 10px; }
.location-card h4 { font-size: 16px; }
.location-card .subtitle { color: var(--body-display); margin-top: 4px; font-size: 10px; }
.card-arrow-icon {
  width: 28px; height: 28px; min-width: 28px;
  border: 1px solid var(--dark-outline); border-radius: 100px;
  display: grid; place-items: center;
}
.card-arrow-icon svg { width: 10px; height: 10px; }

.nav-call { display: none; }
@media (min-width: 1200px) { .nav-call { display: inline-flex; } }

/* ---------- flyout menu ---------- */

.flyout-shade {
  position: fixed; inset: 0; background: #0f1326;
  opacity: 0; visibility: hidden; transition: opacity .35s ease, visibility .35s;
  z-index: 60;
}
body.flyout-open .flyout-shade { opacity: .5; visibility: visible; }
.flyout-menu-wrapper {
  position: fixed; inset: 0 auto 0 0;
  width: min(430px, 92vw);
  background: #fff;
  z-index: 61;
  transform: translateX(-102%);
  transition: transform .45s cubic-bezier(.6,.05,.25,1);
  display: flex; flex-direction: column;
  box-shadow: 24px 0 64px -24px #081c3a4d;
}
body.flyout-open .flyout-menu-wrapper { transform: translateX(0); }
.flyout-heading {
  display: flex; align-items: center; justify-content: space-between;
  padding: 22px 28px;
  border-bottom: 1px solid var(--outline);
}
.flyout-heading h2 { font-size: 24px; }
.close-flyout { width: 44px; height: 44px; display: grid; place-items: center; border-radius: 100px; }
.close-flyout:hover { background: var(--grey-background); }
.close-flyout svg { width: 14px; height: 14px; }
.flyout-body { flex: 1; overflow-y: auto; padding: 28px; display: grid; gap: 34px; align-content: start; }
.flyout-nav { display: grid; gap: 4px; }
.flyout-nav a {
  font-size: clamp(24px, 3vw, 30px);
  font-weight: 700; letter-spacing: -0.02em;
  padding: 8px 0;
  display: flex; align-items: center; justify-content: space-between;
}
.flyout-nav a:hover { color: var(--body-display); }
.quick-link-item {
  display: flex; align-items: center; justify-content: space-between; gap: 12px;
  padding: 12px 0; font-size: 15px; color: var(--body-display);
  border-bottom: 1px solid var(--outline);
}
.quick-link-item:hover { color: var(--black); }
.flyout-social-media { display: flex; align-items: center; gap: 14px; }

/* ---------- heroes ---------- */

.hero {
  position: relative;
  min-height: 86svh;
  display: flex;
  align-items: flex-end;
  padding-top: var(--nav-h);
  color: #fff;
  overflow: hidden;
  isolation: isolate;
}
/* Inner banners are sized by their heading, not by the viewport: the block is
   exactly the title plus --banner-pad above and below it. The top padding adds
   --nav-h because the navbar is fixed and sits over the banner, so that much of
   the padding is hidden behind it. */
.hero.inner {
  min-height: 0;
  align-items: center;
  padding-top: calc(var(--nav-h) + var(--banner-pad));
  padding-bottom: var(--banner-pad);
}
.hero.inner .grid-wrapper { padding-bottom: 0; }
/* Inner-page banners carry a heading over the photograph. Softening the image
   lifts the text off it without darkening the overlay further, which would flatten
   the photo. The home hero is left sharp — it is the one image doing the selling.
   The scale hides the transparent fringe a blur leaves at the edges.
   Covers both the .ph background divs and the <img> the static build swaps in. */
.hero.inner .hero-media > .ph,
.hero.inner .hero-media > .ph-img {
  filter: blur(7px);
  transform: scale(1.08);
  transform-origin: center;
}
.hero .grid-wrapper { position: relative; z-index: 3; padding-bottom: var(--banner-pad); }
.hero-media { position: absolute; inset: 0; z-index: 1; }
.hero-media > video, .hero-media > .ph { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; }
.overlay { position: absolute; inset: 0; z-index: 2; background: linear-gradient(180deg, #0f132633 0%, #0f13267a 78%, #0f1326a6 100%); }
.hero-intro { max-width: 880px; display: grid; gap: 20px; justify-items: start; }
.hero-intro .subtitle { opacity: .92; }
.hero-buttons { display: flex; flex-wrap: wrap; gap: 14px; margin-top: 10px; }

/* home hero: text left, circular video button right (live-site grid) */
.home-hero-content { display: grid; gap: 28px; align-items: center; }
@media (min-width: 1024px) {
  .home-hero-content { grid-template-columns: 1fr 360px; gap: 36px; }
  .home-hero-content .hero-intro { place-self: center start; }
  .home-hero-content .hero-video-button { place-self: center; }
}
/* On a large, tall display the hero is over 1200px high, and bottom-aligned copy
   leaves the headline stranded at the foot of a mostly-empty sky. Past this
   breakpoint the block is centred instead — biased a little low, so it still
   reads over the desert rather than across the bright horizon line. Smaller
   screens keep the bottom alignment: there the hero is short enough that
   centring would collide with the navbar. */
@media (min-width: 1440px) and (min-height: 860px) {
  .home-hero { align-items: center; }
  .home-hero .grid-wrapper { padding-top: 7vh; padding-bottom: 0; }
}
/* The live site repeats "Discover Mildura" as a mobile eyebrow here. Dropped:
   the brand already sits in the white bar directly above it. */

/* circular video button — play icon by default, video revealed on hover */
.hero-video-button {
  position: relative;
  width: 300px; height: 300px;
  max-width: 100%;
  border: 0; background: none; padding: 0;
  border-radius: 100%;
  display: grid; place-items: center;
  isolation: isolate;
  cursor: pointer;
  justify-self: start;
}
.video-button-waves {
  position: absolute; inset: 0; z-index: 1;
  display: grid; place-items: center;
  pointer-events: none;
}
.video-button-waves span {
  position: absolute;
  border-radius: 100%;
  background: #ffffff1f;
  width: 88%; height: 88%;
  animation: video-wave 3.2s ease-out infinite;
}
.video-button-waves .wave-two { animation-delay: 1.6s; }
@keyframes video-wave {
  0%   { transform: scale(.5); opacity: 0; }
  35%  { opacity: .85; }
  100% { transform: scale(1); opacity: 0; }
}
.video-button-background {
  position: absolute; z-index: 2;
  width: 150px; height: 150px;
  border-radius: 100%;
  overflow: hidden;
  opacity: 0;
  transition: opacity .35s ease;
}
.video-button-background video { width: 100%; height: 100%; object-fit: cover; display: block; }
.video-hover-button {
  position: relative; z-index: 3;
  width: 150px; height: 150px;
  border: 1px dashed #c0c0d34d;
  border-radius: 100%;
  display: grid; place-items: center;
  transition: border-color .25s ease;
}
.hero-video-button:hover .video-button-background,
.hero-video-button:focus-visible .video-button-background { opacity: 1; }
.hero-video-button:hover .video-hover-button { border-color: #ffffff8c; }
.hero-video-button .play-badge {
  width: 56px; height: 56px; border-radius: 100%;
  background: #ffffffd9; color: var(--black);
  display: grid; place-items: center;
  transition: transform .25s ease;
}
.hero-video-button:hover .play-badge { transform: scale(1.12); }
.play-badge svg { width: 15px; height: 15px; margin-left: 2px; }
@media (max-width: 1023px) {
  .hero-video-button { width: 220px; height: 220px; }
  .video-hover-button, .video-button-background { width: 120px; height: 120px; }
}
@media (prefers-reduced-motion: reduce) { .video-button-waves span { animation: none; opacity: .35; } }

/* video popup */
.video-popup {
  position: fixed; inset: 0; z-index: 70;
  display: grid; place-items: center; padding: 20px;
  background: #0f1326d9;
  opacity: 0; visibility: hidden;
  transition: opacity .3s ease, visibility .3s;
}
.video-popup.open { opacity: 1; visibility: visible; }
.video-popup-inner { width: min(960px, 100%); position: relative; }
.video-popup video { width: 100%; border-radius: 6px; box-shadow: 0 40px 90px -20px #000c; }
.close-link {
  position: absolute; right: 0; top: -44px;
  display: flex; align-items: center; gap: 8px;
  color: #fff; font-size: 12px; letter-spacing: 2px; text-transform: uppercase;
  min-height: 44px;
}
.close-link svg { width: 13px; height: 13px; }

/* ---------- photography ----------
   Every photo is a background class (.im-*) generated in src/images.css from
   assets/images/, so each image is inlined exactly once no matter how many
   elements use it. .ph is the shared cover-crop behaviour. */
.ph {
  position: relative;
  overflow: hidden;
  background-color: var(--grey-background);
  background-size: cover;
  background-position: 50% 50%;
  background-repeat: no-repeat;
}
/* build-site.mjs swaps labelled .ph divs for real <img alt> in the static
   build; .ph-img keeps them sized and cropped identically. */
.ph-img {
  position: relative;
  display: block;
  width: 100%;
  height: 100%;
  object-fit: cover;
  background-color: var(--grey-background);
}

/* ---------- home: tours tabs ---------- */

.dark-band { background: var(--black); color: #fff; }
.vacations-tab-menu {
  display: grid;
  grid-template-columns: repeat(2, 1fr);
  gap: 6px;
  margin-bottom: 40px;
}
@media (min-width: 820px) { .vacations-tab-menu { grid-template-columns: repeat(4, 1fr); } }
.vacations-tab-link {
  display: flex; align-items: center; gap: 12px;
  padding: 16px 10px;
  border-bottom: 2px solid #ffffff1f;
  font-size: 12px; letter-spacing: 2.5px; text-transform: uppercase; font-weight: 500;
  color: #ffffffb3;
  text-align: left;
  transition: color .2s ease, border-color .2s ease;
  min-height: 44px;
}
.vacations-tab-link:hover { color: #fff; }
.vacations-tab-link[aria-selected="true"] { color: #fff; border-color: var(--accent); }
.membership-dot { width: 9px; height: 9px; border-radius: 100px; background: var(--accent); flex: none; }
.vacations-tab-link:nth-child(2) .membership-dot { background: #6fc06f; }
.vacations-tab-link:nth-child(3) .membership-dot { background: #5f8dff; }
.vacations-tab-link:nth-child(4) .membership-dot { background: #e05f8a; }
/* The active category is shown once, by the accent underline on the selected
   tab link above. A second progress rail under the menu said the same thing
   twice, so it was removed. */

.tab-pane[hidden] { display: none; }
.popular-vacations-wrapper {
  display: grid;
  gap: 26px;
  grid-template-columns: 1fr;
}
@media (min-width: 640px) { .popular-vacations-wrapper { grid-template-columns: repeat(2, 1fr); } }
@media (min-width: 1200px) { .popular-vacations-wrapper { grid-template-columns: repeat(3, 1fr); } }

.vacations-verticle-card {
  background: #fff;
  color: var(--black);
  border-radius: 6px;
  overflow: hidden;
  border: 1px solid var(--outline);
  display: flex; flex-direction: column;
  transition: transform .25s ease, box-shadow .25s ease;
}
.vacations-verticle-card:hover { transform: translateY(-4px); box-shadow: 0 30px 50px -22px var(--shaddow); }
.verticle-card-image { aspect-ratio: 16 / 10; display: block; overflow: hidden; }
.verticle-card-image .ph,
.verticle-card-image img { width: 100%; height: 100%; object-fit: cover; }
.vacation-card-bottom { padding: 24px; display: grid; gap: 16px; flex: 1; align-content: space-between; }
.vacation-details {
  display: flex; align-items: center; justify-content: space-between; gap: 14px;
  border-top: 1px solid var(--outline);
  padding-top: 18px;
}
.vacation-price .subtitle { color: var(--body-display); font-size: 10px; margin-bottom: 4px; }
.dynamic-price-text { font-weight: 700; font-size: 18px; }

/* ---------- benefits ---------- */

.benefits-box {
  display: grid;
  gap: 1px;
  background: var(--dark-outline);
  border: 1px solid var(--dark-outline);
  border-radius: 12px;
  overflow: hidden;
  grid-template-columns: 1fr;
}
@media (min-width: 640px) { .benefits-box { grid-template-columns: repeat(2, 1fr); } }
@media (min-width: 1024px) { .benefits-box.cols-3 { grid-template-columns: repeat(3, 1fr); } }
@media (min-width: 1200px) { .benefits-box.cols-4 { grid-template-columns: repeat(4, 1fr); } }
.benefit-card { background: #fff; padding: 30px 30px 34px; display: grid; gap: 14px; align-content: start; }
@media (min-width: 640px) { .benefit-card { min-height: 275px; } }
/* mobile cards size to their copy — a 275px floor stacked six deep is a lot of
   scrolling for very little text */
@media (max-width: 639px) { .benefit-card { padding: 24px 24px 26px; } }
.benefit-icon {
  width: 46px; height: 46px; border-radius: 100px;
  background: var(--grey-background);
  display: grid; place-items: center;
  color: var(--black);
}
.benefit-icon svg { width: 20px; height: 20px; }
.benefit-card h3 { font-size: 18px; font-weight: 700; letter-spacing: -0.01em; }

/* ---------- testimonials ---------- */

.testimonial-section {
  position: relative;
  color: #fff;
  isolation: isolate;
  overflow: hidden;
}
.testimonial-section .hero-media, .testimonial-section .overlay { z-index: -1; }
.testimonial-section .overlay { background: #0f1326a8; }
/* centred column, as on the live site */
.testimonial-wrapper { padding-block: clamp(80px, 11vw, 150px); position: relative; }
.subtitle-intro-wrapper.centred { justify-content: center; }
.subtitle-intro-wrapper.centred .horizontal-line { display: none; }
.testimonial-title { text-align: center; font-size: 30px; margin-top: 24px; margin-bottom: 34px; }
/* The 1–5 counter that used to run down the left of the quote is gone; the
   arrows below carry the paging on their own. */
.testimonial-viewport { position: relative; min-height: 240px; max-width: 600px; margin-inline: auto; }
.testimonial-slide { position: absolute; inset: 0; opacity: 0; visibility: hidden; transition: opacity .5s ease, visibility .5s; display: grid; gap: 36px; align-content: start; text-align: center; }
.testimonial-slide.active { opacity: 1; visibility: visible; position: relative; }
.testimonial-client { font-size: 20px; font-weight: 700; }
.testimonial-nav { display: flex; gap: 10px; margin-top: 26px; justify-content: center; }
/* The Tripadvisor award sits under the guest quotes it vouches for. */
.testimonial-award {
  display: flex; align-items: center; gap: 14px;
  width: fit-content; margin: 44px auto 0; padding: 7px 22px 7px 7px;
  border: 1px solid #ffffff33; border-radius: 14px; background: #ffffff12;
  color: #ffffffbf; font-size: 13px; line-height: 1.35; text-align: left;
  transition: background .2s, border-color .2s;
}
.testimonial-award:hover { background: #ffffff21; border-color: #ffffff59; }
.testimonial-award img { width: 56px; height: 56px; border-radius: 9px; background: #fff; display: block; }
.testimonial-award span { display: grid; }
.testimonial-award strong { color: #fff; font-size: 15px; font-weight: 700; }
.slider-arrow {
  width: 52px; height: 52px;
  border: 1px solid #ffffff4d; border-radius: 100px;
  display: grid; place-items: center;
  color: #fff;
  transition: background-color .2s ease, border-color .2s ease;
}
.slider-arrow:hover { background: #ffffff1a; border-color: #fff; }
.slider-arrow svg { width: 15px; height: 15px; }

/* ---------- generic split intro sections (about / region pages) ---------- */

.intro-wrapper {
  display: grid;
  gap: 40px;
  align-items: center;
}
@media (min-width: 1024px) { .intro-wrapper { grid-template-columns: 1.05fr .95fr; gap: clamp(48px, 6vw, 100px); } }
.intro-content { display: grid; gap: 26px; justify-items: start; }
.stacked-intro { display: grid; gap: 16px; }
.stacked-intro .heading-sub { color: var(--body-display); font-weight: 500; font-size: clamp(20px, 2.6vw, 26px); letter-spacing: -0.02em; }
.intro-right-image .ph { border-radius: 8px; aspect-ratio: 4 / 4.6; width: 100%; box-shadow: 0 2px 5px #0003; }
@media (min-width: 1024px) { .intro-wrapper.flip .intro-right-image { order: -1; } }
/* hosts block on the home page — text only, no companion image (matches the live site) */
@media (min-width: 1024px) { .intro-wrapper.text-only { grid-template-columns: 2.5fr .75fr; } }

.region-nav { display: flex; flex-wrap: wrap; gap: 10px; margin-top: 12px; }
.region-nav .button { background: #ffffff26; border: 1px solid #ffffff59; backdrop-filter: blur(4px); }
.region-nav .button:hover { background: #ffffff40; }

/* ---------- banners ---------- */

.team-banner {
  position: relative; color: #fff; isolation: isolate; overflow: hidden;
  text-align: center;
}
.team-banner .overlay { background: #0f13268f; z-index: -1; }
.team-banner .hero-media { z-index: -2; }
.centered-intro {
  max-width: 820px; margin-inline: auto;
  padding-block: clamp(80px, 11vw, 150px);
  display: grid; gap: 24px; justify-items: center;
}

/* ---------- team mosaic ---------- */

.team-images {
  display: grid;
  grid-template-columns: repeat(2, 1fr);
  gap: 14px;
  margin-top: clamp(40px, 6vw, 80px);
}
@media (min-width: 820px) { .team-images { grid-template-columns: repeat(4, 1fr); } }
.team-images .ph { border-radius: 6px; width: 100%; }
.team-images .small-image .ph { aspect-ratio: 1 / 1.1; }
.team-images .medium-image .ph { aspect-ratio: 1 / 1.35; }
.team-images .large-image .ph { aspect-ratio: 1 / 1.6; }
.team-images > div:nth-child(even) { translate: 0 26px; }

/* ---------- journal ---------- */

.featured-journal-wrapper {
  display: grid;
  gap: 44px;
}
@media (min-width: 1024px) { .featured-journal-wrapper { grid-template-columns: 1.5fr 1fr; gap: 64px; } }
.large-journal-post {
  display: grid; gap: 0;
  border: 1px solid var(--outline); border-radius: 6px; overflow: hidden;
}
.large-journal-image .ph { aspect-ratio: 16 / 9; width: 100%; }
.journal-post-info { padding: 28px; display: grid; gap: 18px; justify-items: start; }
.journal-category-tag {
  display: inline-block;
  background: var(--grey-background);
  border: 1px solid var(--outline);
  border-radius: 100px;
  padding: 6px 14px;
  font-size: 10px; letter-spacing: 2px; text-transform: uppercase; font-weight: 500;
  color: var(--body-display);
}
.journal-list-item {
  display: grid; grid-template-columns: 92px 1fr; gap: 16px; align-items: center;
  padding-block: 14px;
  border-bottom: 1px solid var(--outline);
}
.journal-list-item:hover h4 { text-decoration: underline; text-underline-offset: 3px; }
.journal-list-image .ph { width: 92px; height: 76px; border-radius: 4px; }
.journal-list-image .ph::after { content: none; }
.journal-cards {
  display: grid; gap: 26px;
  grid-template-columns: 1fr;
  margin-top: 40px;
}
@media (min-width: 640px) { .journal-cards { grid-template-columns: repeat(2, 1fr); } }
@media (min-width: 1200px) { .journal-cards { grid-template-columns: repeat(3, 1fr); } }
.journal-card {
  border: 1px solid var(--outline); border-radius: 6px; overflow: hidden;
  display: flex; flex-direction: column;
  transition: transform .25s ease, box-shadow .25s ease;
  background: #fff;
}
.journal-card:hover { transform: translateY(-4px); box-shadow: 0 30px 50px -22px var(--shaddow); }
.journal-card .ph { aspect-ratio: 16 / 10; }
.journal-card-info { padding: 24px; display: grid; gap: 14px; align-content: space-between; flex: 1; justify-items: start; }

/* rich text (journal post / policy pages)
   One rhythm for every heading level. The journal bodies come out of the old
   Webflow CMS with headings picked for size rather than structure — h1, h4, h5
   and h6 all appear — so every level is given a defined size and the same
   space above and below. Anything left unstyled falls back to the global
   heading rules, which carry margin: 0, and lands flush against the paragraph
   underneath it. */
.rich-text { max-width: 760px; }
.rich-text h2,
.rich-text h3,
.rich-text h4,
.rich-text h5,
.rich-text h6 {
  color: var(--black);
  margin: 1.5em 0 .55em;
  line-height: 1.3;
}
.rich-text h2 { font-size: clamp(23px, 2.6vw, 28px); font-weight: 700; letter-spacing: -0.02em; }
.rich-text h3 { font-size: 20px; font-weight: 700; letter-spacing: -0.015em; }
.rich-text h4,
.rich-text h5,
.rich-text h6 { font-size: 17px; font-weight: 700; letter-spacing: -0.005em; }
/* never let the first heading push the block away from what introduces it */
.rich-text > :first-child { margin-top: 0; }
.rich-text > :last-child { margin-bottom: 0; }
.rich-text p, .rich-text li { color: var(--body-display); font-size: 17px; line-height: 1.65; }
.rich-text p { margin: 0 0 1em; }
.rich-text ul, .rich-text ol { padding-left: 22px; margin: 0 0 1em; }
.rich-text li { margin-bottom: 8px; }
.rich-text li:last-child { margin-bottom: 0; }
.rich-text blockquote {
  border-left: 3px solid var(--indicator-outline);
  background: var(--grey-background);
  color: var(--body-display);
  border-radius: 0 5px 5px 0;
  margin: 24px 0;
  padding: 18px 24px;
  line-height: 1.6em;
}
.rich-text strong { color: var(--black); }
.rich-text a { text-decoration: underline; text-underline-offset: 3px; }

/* ---------- tour detail ---------- */

.vacation-features {
  display: grid;
  grid-template-columns: repeat(2, 1fr);
  gap: 22px;
  padding-block: 34px;
  border-bottom: 1px solid var(--outline);
}
@media (min-width: 820px) { .vacation-features { grid-template-columns: repeat(4, 1fr); } }
.feature-item { display: flex; gap: 14px; align-items: flex-start; }
.feature-item .subtitle { color: var(--body-display); margin-bottom: 4px; }
.tour-details { font-weight: 500; }

.vacation-images {
  display: grid; gap: 14px;
  grid-template-columns: 1fr;
  margin-top: 40px;
}
@media (min-width: 820px) { .vacation-images { grid-template-columns: 1.7fr 1fr 1fr; } }
.vacation-images .ph { border-radius: 6px; width: 100%; height: 100%; min-height: 180px; aspect-ratio: 4/3; }
.vacation-images .ph:first-child { aspect-ratio: auto; }
/* Per-photo crops: the box is narrower than the photo, so a centred crop can cut people off. */
.vacation-images .im-gal-mungo-day-tour-3 { object-position: 85% 50%; background-position: 85% 50%; }

.vacation-content {
  display: grid; gap: 48px;
  align-items: start;
}
@media (min-width: 1024px) { .vacation-content { grid-template-columns: 1.4fr 1fr; gap: 72px; } }
.vacation-body { display: grid; gap: 10px; }
/* Sized and spaced to match .rich-text h2 so a tour page and a journal article
   read as the same document. The grid gap alone left only 10px under a 32px
   heading, which is what made the sections run together. */
.tour-subheading {
  font-size: clamp(23px, 2.6vw, 28px);
  font-weight: 700;
  letter-spacing: -0.02em;
  line-height: 1.3;
  margin: 34px 0 8px;
}
.tour-subheading + * { margin-top: 0; }
.tour-subheading:first-child { margin-top: 0; }
.price-line { display: flex; align-items: baseline; gap: 8px; font-weight: 700; font-size: clamp(28px, 4vw, 40px); }
.contact-options {
  border: 1px solid var(--outline); border-radius: 6px;
  padding: 26px;
  display: flex; flex-wrap: wrap; gap: 20px; align-items: center; justify-content: space-between;
  margin-top: 30px;
}
/* the flex gap only separates the two columns — the heading and the phone and
   email lines inside the left one had nothing between them at all */
.contact-options > div { display: grid; gap: 7px; }
.contact-options > div p { margin: 0; }

/* day-details paragraphs share the article paragraph rhythm */
[data-t-details] p { margin: 0 0 1em; }
[data-t-details] p:last-child { margin-bottom: 0; }

.inquire-card {
  border: 1px solid var(--outline); border-radius: 8px;
  padding: 30px;
  box-shadow: 0 30px 60px -30px var(--shaddow);
  background: #fff;
  display: grid; gap: 20px;
}
/* Deliberately not sticky: a pinned card taller than the window can never be
   scrolled to its end, so the enquiry form always scrolls with the page. */
.form { display: grid; gap: 14px; }
.field-label { font-size: 11px; letter-spacing: 2px; text-transform: uppercase; font-weight: 500; margin-bottom: 6px; display: block; }
.text-field {
  width: 100%;
  border: 1px solid var(--dark-outline);
  border-radius: var(--radius);
  background: var(--ghost-white);
  padding: 13px 14px;
  font: inherit;
  font-size: 15px;
  color: var(--black);
  min-height: 48px;
}
.text-field:focus { outline: 2px solid var(--royal-blue); outline-offset: -1px; border-color: var(--royal-blue); }
.field-row { display: grid; grid-template-columns: 1fr 1fr; gap: 10px; }
@media (max-width: 479px) { .field-row { grid-template-columns: 1fr; } }
.submit-button { width: 100%; }
.form-note { font-size: 12px; color: var(--body-display); }

.policy-note {
  text-align: center;
  font-style: italic;
  font-weight: 700;
  color: var(--black);
  max-width: 720px;
  margin-inline: auto;
}


/* ---------- grey cover band ---------- */

.grey-band { background: var(--grey-background); }

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

.faq-list { max-width: 820px; display: grid; gap: 10px; }
.faq-item { border: 1px solid var(--outline); border-radius: 6px; background: #fff; }
.faq-item summary {
  cursor: pointer;
  list-style: none;
  display: flex; align-items: center; justify-content: space-between; gap: 18px;
  padding: 20px 24px;
  font-weight: 700;
  min-height: 44px;
}
.faq-item summary::-webkit-details-marker { display: none; }
.faq-item summary svg { width: 12px; height: 12px; flex: none; transition: transform .3s ease; }
.faq-item[open] summary svg { transform: rotate(45deg); }
.faq-item .faq-a { padding: 0 24px 22px; color: var(--body-display); line-height: 1.65; }

/* ---------- footer ---------- */

.footer { border-top: 1px solid var(--outline); background: #fff; }
.footer-wrapper {
  display: grid;
  gap: 34px;
  padding-block: clamp(48px, 6vw, 80px) 28px;
  grid-template-columns: 1fr;
}
/* From tablet-landscape up the six internal links get their own full-width row
   rather than stacking in a narrow column — six items read as a bar, not a list. */
@media (min-width: 820px) {
  .footer-wrapper {
    grid-template-columns: 1.4fr 1fr;
    align-items: start;
    column-gap: 48px;
  }
  .footer-wrapper > .footer-brand { grid-area: 1 / 1 / 2 / 2; }
  .footer-wrapper > .contact-footer { grid-area: 1 / 2 / 2 / 3; }
  .footer-wrapper > .footer-nav {
    grid-area: 2 / 1 / 3 / -1;
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: 0 28px;
    padding-top: 26px;
    margin-top: 8px;
    border-top: 1px solid var(--outline);
  }
  .footer-nav a { padding: 4px 0; }
}
.footer-brand { display: grid; gap: 16px; justify-items: start; }
/* The Tripadvisor badge, under the brand in the footer's left column. */
.footer-brand .footer-award { display: block; width: fit-content; margin-left: -13px; padding: 0; }
/* -13px: the badge art starts 165/1080 of the way in (13px at 84px), so its own white margin would indent it. */
.footer-award img { width: 84px; height: 84px; display: block; filter: brightness(1.04); } /* lifts the JPEG's 253-grey ground to the footer's white */
.badge-chip {
  display: inline-flex; align-items: center; gap: 8px;
  border: 1px solid var(--dark-outline); border-radius: 100px;
  padding: 8px 14px;
  font-size: 11px; letter-spacing: 1px; text-transform: uppercase; font-weight: 500;
  color: var(--body-display);
}
.badge-chip:hover { color: var(--black); border-color: var(--black); }
.badge-chip svg { width: 14px; height: 14px; }
.footer-nav { display: grid; gap: 6px; justify-items: start; }
.footer-nav a { padding: 6px 0; font-weight: 500; color: var(--body-display); }
.footer-nav a:hover { color: var(--black); }
.contact-footer a { display: block; padding: 6px 0; font-weight: 500; }
.contact-footer a:hover { text-decoration: underline; text-underline-offset: 3px; }
.acknowledgement {
  border-top: 1px solid var(--outline);
  padding-block: 26px;
  display: flex; flex-wrap: wrap; gap: 16px; justify-content: space-between; align-items: center;
}
.acknowledgement p { font-size: 13px; max-width: 640px; margin: 0; }
.copyright { font-size: 13px; color: var(--body-display); }

/* ---------- router pages ---------- */

.page { display: none; }
.page.active { display: block; }
main { min-height: 60vh; }

/* partners list */
.partner-links { display: grid; gap: 6px; justify-items: center; }
.partner-links a { font-weight: 500; color: var(--body-display); padding: 5px 0; }
.partner-links a:hover { color: var(--black); text-decoration: underline; text-underline-offset: 3px; }

/* misc */
.skip-link {
  position: fixed; top: -60px; left: 12px; z-index: 100;
  background: var(--black); color: #fff; padding: 12px 18px; border-radius: var(--radius);
  transition: top .2s ease;
}
.skip-link:focus { top: 12px; }
::selection { background: var(--black); color: #fff; }


/* CMS empty state (Specials has no items, matching the live site) */
.empty-state {
  border: 1px dashed var(--dark-outline);
  border-radius: 6px;
  padding: 34px 26px;
  color: var(--body-display);
  font-size: 15px;
}
.empty-state a { text-decoration: underline; text-underline-offset: 3px; }
.dark-band .empty-state { color: #ffffffb3; border-color: #ffffff30; }
.dark-band .empty-state a { color: #fff; }

/* tour hero tagline */
[data-t-tagline] { max-width: 640px; text-shadow: 0 1px 12px #0f132666; }

/* ==========================================================================
   Conversion & clarity layer (2026-08-04)
   Added after a UX review aimed at the actual audience: mostly 50+ domestic
   travellers who compare two or three operators, decide on trust and logistics
   rather than styling, and then pick up the phone.
   ========================================================================== */

/* Hero: the slogan alone never says what is being sold. */
.hero-lede {
  display: block;
  margin-top: 20px;
  font-size: clamp(16px, 1.5vw, 19px);
  font-weight: 500;
  line-height: 1.5;
  letter-spacing: 0;
  max-width: 46ch;
  opacity: .95;
}
.button.ghost-white {
  background: transparent;
  color: #fff;
  border: 1px solid #ffffff8c;
}
.button.ghost-white:hover { background: #ffffff1f; border-color: #fff; }

/* Trust strip — proof points were previously footer-only. */
.trust-strip {
  background: var(--grey-background);
  border-bottom: 1px solid var(--dark-outline);
  padding-block: 26px;
}
.trust-strip .grid-wrapper {
  display: grid;
  gap: 22px;
  align-items: center;
}
@media (min-width: 1024px) { .trust-strip .grid-wrapper { grid-template-columns: 1fr auto; gap: 40px; } }
.trust-list {
  list-style: none;
  margin: 0; padding: 0;
  display: grid;
  gap: 14px 30px;
  grid-template-columns: 1fr;
}
@media (min-width: 640px) { .trust-list { grid-template-columns: repeat(2, 1fr); } }
/* Columns sized to their text, so the longest detail line does not wrap one word onto a third line. */
@media (min-width: 1200px) { .trust-list { grid-template-columns: repeat(4, auto); justify-content: space-between; } }
.trust-list li {
  display: flex; align-items: center; gap: 11px;
  font-size: 14px; line-height: 1.35;
  color: var(--body-display);
}
/* The bold claim on its own line, its detail beneath it. */
.trust-list strong { display: block; color: var(--black); font-weight: 700; }
.trust-list svg { width: 19px; height: 19px; flex: none; color: var(--accent); }

/* Tour cards: answer the comparison questions on the listing itself. */
.tour-facts {
  list-style: none;
  margin: 14px 0 0; padding: 0;
  display: grid; gap: 7px;
}
.tour-facts li {
  display: flex; align-items: center; gap: 9px;
  font-size: 13px; line-height: 1.3;
  color: var(--body-display);
}
.tour-facts svg { width: 15px; height: 15px; flex: none; color: var(--accent); }
.price-unit {
  display: block;
  font-size: 11px; font-weight: 500; letter-spacing: 1.5px; text-transform: uppercase;
  color: var(--body-display);
  margin-top: 2px;
}

/* Sticky call bar — phone-first audience, small screens only. */
.call-bar { display: none; }
@media (max-width: 819px) {
  .call-bar {
    position: fixed; left: 0; right: 0; bottom: 0; z-index: 60;
    display: grid; grid-template-columns: 1fr auto;
    background: var(--black);
    border-top: 1px solid #ffffff1f;
    padding: max(8px, env(safe-area-inset-bottom, 0px)) 12px 8px;
    gap: 8px;
  }
  .call-bar a {
    display: flex; align-items: center; justify-content: center; gap: 9px;
    min-height: 48px; padding: 0 18px;
    border-radius: 100px;
    color: var(--black);
    font-size: 15px; font-weight: 700;
  }
  /* Raised white key — a lit top edge, a shaded bottom edge and two cast
     shadows, so it reads as a physical button sitting on the dark bar rather
     than a flat fill. The gradient does the body, the insets do the bevel,
     the outer pair does the lift: tight and dark for contact, wide and soft
     for distance. */
  .call-bar a:not(.call-bar-alt) {
    background: linear-gradient(180deg, #ffffff 0%, var(--ghost-white) 46%, #e8eaf2 100%);
    border: 1px solid #ffffffd9;
    box-shadow:
      inset 0 1px 0 #ffffff,
      inset 0 -2px 3px #081c3a1f,
      0 1px 1px #081c3a45,
      0 5px 12px -2px #081c3a5c;
    text-shadow: 0 1px 0 #ffffffcc;
    transition: transform .1s ease, box-shadow .1s ease, background .1s ease;
  }
  /* Pressed: drop it a pixel, pull the cast shadows in and invert the bevel so
     the surface reads as pushed into the bar. */
  .call-bar a:not(.call-bar-alt):active {
    transform: translateY(1px);
    background: linear-gradient(180deg, #e8eaf2 0%, var(--ghost-white) 100%);
    box-shadow:
      inset 0 2px 4px #081c3a38,
      inset 0 -1px 0 #ffffffb3,
      0 1px 1px #081c3a33;
  }
  @media (prefers-reduced-motion: reduce) {
    .call-bar a:not(.call-bar-alt) { transition: none; }
  }
  .call-bar svg { width: 17px; height: 17px; }
  .call-bar .call-bar-alt {
    background: transparent; color: #fff;
    border: 1px solid #ffffff59;
    font-weight: 500;
  }
  /* keep the bar from covering the end of the page */
  body { padding-bottom: 68px; }
}

/* Honeypot. Netlify reads the field; a person must never see or tab into it. */
.enquiry-hp { position: absolute; left: -9999px; width: 1px; height: 1px; overflow: hidden; }

/* What replaces the form once the POST is accepted. */
.enquiry-sent {
  border: 1px solid var(--outline); border-radius: 8px;
  padding: 30px;
  background: var(--grey-background);
  display: grid; gap: 10px;
}
.enquiry-sent h3 { margin: 0; }
.enquiry-sent p { margin: 0; }
.enquiry-sent a { text-decoration: underline; text-underline-offset: 3px; }

/* Enquiry fallback — mailto: silently fails for webmail users. */
.form-fallback {
  margin-top: 16px; padding: 16px;
  background: var(--grey-background);
  border: 1px solid var(--dark-outline);
  border-radius: 8px;
  font-size: 14px;
}
.form-fallback p { margin: 0 0 8px; }
.form-fallback a { text-decoration: underline; text-underline-offset: 3px; color: var(--black); }
.form-fallback button { margin-top: 4px; }

/* Section eyebrows were 11px — small for the audience reading them. */
.subtitle { font-size: 12px; }
.subtitle.large { font-size: 15px; }

/* ==========================================================================
   Mobile trim for the home page
   The home page carries a lot on a phone: hero, proof strip, nine tour cards
   across four tabs, four benefit cards, testimonials, six accessibility cards,
   journal and hosts. These drop the pieces that repeat elsewhere on the page
   or in the footer, rather than anything that only exists here.
   ========================================================================== */
@media (max-width: 639px) {
  /* Two-up instead of stacked — same four proof points, half the height. */
  .trust-list { grid-template-columns: repeat(2, 1fr); gap: 12px 16px; }
  .trust-list li { font-size: 12.5px; gap: 8px; align-items: flex-start; }
  .trust-list svg { width: 16px; height: 16px; margin-top: 1px; }
  .trust-strip { padding-block: 20px; }

  /* The slider arrows already page the quotes, and a swipe works too. */
  .testimonial-nav { margin-top: 20px; }
  .testimonial-wrapper { padding-block: 60px; }

  /* Popular posts duplicates the featured article directly above it. */
  .featured-journal-wrapper .journal-right-wrapper { display: none; }

  /* The fixed call bar at the bottom of the viewport carries the same number
     and is always in reach, so the hero's ghost call button is a second copy
     of the primary action competing with "See the tours". Desktop keeps it —
     there is no call bar there. */
  .home-hero .hero-buttons .ghost-white { display: none; }

  /* The eyebrow stacks to two lines on a phone and pushes the h1 down without
     saying anything the headline and lede do not. */
  .home-hero .hero-intro .subtitle { display: none; }

  /* The hero is 86svh with the copy bottom-aligned, sized back when the eyebrow
     and the in-flow circle filled it. With both gone the slack all fell above
     the headline as dead sky. Shorten the hero rather than re-align the copy —
     bottom-aligned is what puts the headline over the dunes rather than the
     empty horizon. Inner pages keep their own 62svh. */
  .home-hero { min-height: 66svh; }

  /* The circle sat below the copy at the left, which buried it under the fold
     and left the hero bottom-heavy. Float it against the right edge, centred
     on the copy block, at a size that reads as an accent rather than a slab.
     Taken out of flow, so the hero collapses to the height of the copy. */
  .home-hero .hero-video-button {
    position: absolute;
    top: 50%;
    right: 0;
    transform: translateY(-50%);
    width: 108px; height: 108px;
    margin: 0;
    z-index: 4;
  }
  /* The inner ring and hover video are fixed pixel sizes further up (150px,
     then 120px under 1024px) rather than a share of the button, so they have
     to come down too or they spill outside the 108px button and get clipped
     by the hero's overflow:hidden. */
  .home-hero .hero-video-button .video-hover-button,
  .home-hero .hero-video-button .video-button-background { width: 76px; height: 76px; }
  .home-hero .hero-video-button .play-badge { width: 40px; height: 40px; }

  /* Keep the copy clear of the circle. This has to sit on the lede itself:
     the h1 contains "Informative.&nbsp;Fun." as one unbreakable run, so it
     overflows any padding on .hero-intro and the lede would inherit that
     width. Constraining the lede directly is the only thing that holds.
     Measured off the viewport, not the h1: a percentage would resolve against
     that overflowing width and vary with the headline. */
  .home-hero .hero-lede { max-width: calc(100vw - 152px); }
  .home-hero .hero-intro { padding-right: 8px; }
}

/* ---------- tour sidebar and journal aside ----------
   These lived in src/booking.css until 2026-08-30, when the pay-online
   prototype was deleted after the client ruled it out. They were never part of
   the prototype — the journal aside in particular is on pages that never had a
   Book button — and the stylesheet was simply where they got written. Moved
   here so removing the flow did not quietly restyle three page types. */

.book-lead { display: grid; gap: 12px; }
.book-facts {
  display: grid;
  grid-template-columns: auto 1fr;
  gap: 8px 22px;
  padding: 12px 0;
  border-block: 1px solid var(--outline);
}
.book-facts > div { display: grid; gap: 1px; align-content: start; }
.book-facts .subtitle { color: var(--body-display); }
.book-facts strong { font-size: 20px; letter-spacing: -0.03em; line-height: 1.2; }
.book-facts .book-unit { font-size: 11px; color: var(--body-display); }

/* Keeps the featured tour beside the reader for the whole article. Falls back
   to normal flow on narrow screens, where the aside stacks under the copy. */
.journal-aside { position: sticky; top: calc(var(--nav-h) + 24px); display: grid; gap: 0; }
@media (max-width: 991px) { .journal-aside { position: static; } }

/* Listing cards now carry one action — the tour page, which is where the
   enquiry form is. */
.vacation-details .card-actions { display: flex; gap: 8px; }
@media (max-width: 900px) {
  .vacation-details .card-actions { width: 100%; }
  .vacation-details .card-actions > * { flex: 1; }
}