/* ==========================================================================
   My Travel — main stylesheet
   Bootstrap 5.3 + custom layer

   Separate files, loaded after this one:
     assets/css/partners.css      partner marquee
     assets/css/experiences.css   featured experiences grid
     assets/css/reviews.css       review form and published reviews

   Contents
     01. Design tokens              14. Contact card
     02. Bootstrap overrides        15. Contact map
     03. Base + typography          16. Contact form status
     04. Buttons                    17. Destination enquiry
     05. Navbar                     18. Philosophy page
     06. Hero                       19. 404
     07. Section shell              20. Modal
     08. Media frames               21. Accessibility + motion
     09. Stats                      22. Overflow guards
     10. Feature list
     11. Destinations
     12. Testimonial cards
     13. CTA band
   ========================================================================== */


/* ==========================================================================
   01. Design tokens
   ========================================================================== */

:root {
  /* --- Brand ----------------------------------------------------------- */
  --mt-brand:            #ee4757;
  --mt-brand-hover:      #d93a49;
  --mt-brand-soft:       rgba(238, 71, 87, .10);

  /* --- Neutrals -------------------------------------------------------- */
  --mt-ink:              #1f2748;   /* headings */
  --mt-body:             #5a6274;   /* paragraphs */
  --mt-muted:            #8b92a0;   /* captions, stat labels */
  --mt-line:             #e6e9ef;
  --mt-surface:          #ffffff;
  --mt-surface-soft:     #f2f3f6;   /* the grey offset shape behind images */

  /* --- Typography ------------------------------------------------------
     Swap these three lines to change the whole page. */
  --mt-font-display: "Playfair Display", Georgia, "Times New Roman", serif;
  --mt-font-sans:    "Mulish", system-ui, -apple-system, "Segoe UI", Roboto, sans-serif;
  --mt-font-hand:    "Caveat", "Comic Sans MS", cursive;

  /* Fluid type scale — min at 375px, max at 1440px */
  --mt-h1:    clamp(2.75rem, 1.55rem + 5.1vw, 5rem);
  --mt-h2:    clamp(2rem,    1.45rem + 2.3vw, 3.25rem);
  --mt-h3:    clamp(1.375rem, 1.2rem + .75vw, 1.75rem);
  --mt-lead:  clamp(1rem,    .95rem + .2vw,  1.125rem);
  --mt-base:  1rem;
  --mt-small: .875rem;

  /* --- Spacing (8px system) -------------------------------------------- */
  --mt-s1: .5rem;    /*  8px */
  --mt-s2: 1rem;     /* 16px */
  --mt-s3: 1.5rem;   /* 24px */
  --mt-s4: 2rem;     /* 32px */
  --mt-s5: 3rem;     /* 48px */
  --mt-s6: 4rem;     /* 64px */

  /* Vertical rhythm between sections: 56px mobile → 120px desktop */
  --mt-section-y: clamp(3.5rem, 1.8rem + 7vw, 7.5rem);

  /* --- Radius ---------------------------------------------------------- */
  --mt-radius-sm: 8px;
  --mt-radius:    16px;
  --mt-radius-lg: 24px;
  --mt-radius-pill: 999px;

  /* --- Elevation ------------------------------------------------------- */
  --mt-shadow-sm: 0 4px 16px rgba(31, 39, 72, .06);
  --mt-shadow:    0 12px 32px rgba(31, 39, 72, .10);
  --mt-shadow-lg: 0 24px 56px rgba(31, 39, 72, .16);

  /* --- Layout ---------------------------------------------------------- */
  --mt-nav-h: 88px;
}


/* ==========================================================================
   02. Bootstrap variable overrides
   Keeps .btn-primary, .text-primary and friends on-brand, so Bootstrap
   utilities can be used instead of writing new classes.
   ========================================================================== */

:root {
  --bs-primary:     #ee4757;
  --bs-primary-rgb: 238, 71, 87;
  --bs-body-color:  #5a6274;
  --bs-body-font-family: var(--mt-font-sans);
  --bs-border-radius:    var(--mt-radius-sm);
  --bs-border-radius-lg: var(--mt-radius);
  --bs-border-radius-xl: var(--mt-radius-lg);
}

/* Content column = 1140px, matching the Figma frame (1440 canvas, 150
   gutters). Bootstrap's default jumps to 1320px on XXL, which reads wider
   than the design. */
.container,
.container-lg,
.container-xl {
  max-width: 1140px;
}


/* ==========================================================================
   03. Base + typography
   ========================================================================== */

html { scroll-behavior: smooth; }

/* Anchor links land below the fixed header instead of underneath it */
section[id],
[id]:target { scroll-margin-top: calc(var(--mt-nav-h) + 1rem); }

body {
  font-family: var(--mt-font-sans);
  font-size: var(--mt-base);
  line-height: 1.7;
  color: var(--mt-body);
  background-color: var(--mt-surface);
  -webkit-font-smoothing: antialiased;
}

h1, h2, h3, h4, .display-serif {
  font-family: var(--mt-font-display);
  color: var(--mt-ink);
  font-weight: 600;
  line-height: 1.14;
  letter-spacing: -.01em;
}

h1 { font-size: var(--mt-h1); }
h2 { font-size: var(--mt-h2); }
h3 { font-size: var(--mt-h3); line-height: 1.3; }

p { margin-bottom: var(--mt-s2); }
p:last-child { margin-bottom: 0; }

a { color: var(--mt-brand); text-decoration: none; }
a:hover { color: var(--mt-brand-hover); }

/* Small red label above a heading */
.eyebrow {
  display: block;
  font-family: var(--mt-font-sans);
  font-size: 1.125rem;
  font-weight: 700;
  color: var(--mt-brand);
  margin-bottom: var(--mt-s2);
}

.lede {
  font-size: var(--mt-lead);
  line-height: 1.75;
  max-width: 52ch;
}

.section-title {
  margin-bottom: var(--mt-s5);
}


/* ==========================================================================
   04. Buttons
   ========================================================================== */

.btn {
  --bs-btn-padding-y: .875rem;
  --bs-btn-padding-x: 2rem;
  --bs-btn-font-family: var(--mt-font-sans);
  --bs-btn-font-weight: 700;
  --bs-btn-font-size: 1rem;
  --bs-btn-border-radius: var(--mt-radius-sm);
  min-height: 48px;              /* comfortable tap target */
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: var(--mt-s1);
  transition: transform .2s ease, background-color .2s ease, box-shadow .2s ease;
}

.btn-primary {
  --bs-btn-bg: var(--mt-brand);
  --bs-btn-border-color: var(--mt-brand);
  --bs-btn-hover-bg: var(--mt-brand-hover);
  --bs-btn-hover-border-color: var(--mt-brand-hover);
  --bs-btn-active-bg: var(--mt-brand-hover);
  --bs-btn-active-border-color: var(--mt-brand-hover);
  --bs-btn-color: #fff;
  --bs-btn-hover-color: #fff;
  --bs-btn-active-color: #fff;
  box-shadow: 0 8px 20px rgba(238, 71, 87, .28);
}

.btn-primary:hover { transform: translateY(-2px); }
.btn-primary:active { transform: translateY(0); }

.btn-light-outline {
  --bs-btn-color: #fff;
  --bs-btn-border-color: rgba(255, 255, 255, .55);
  --bs-btn-hover-color: var(--mt-ink);
  --bs-btn-hover-bg: #fff;
  --bs-btn-hover-border-color: #fff;
}

/* Secondary action: present but clearly not the main one */
.btn-outline-ink {
  --bs-btn-color: var(--mt-ink);
  --bs-btn-border-color: var(--mt-line);
  --bs-btn-hover-color: #fff;
  --bs-btn-hover-bg: var(--mt-ink);
  --bs-btn-hover-border-color: var(--mt-ink);
  --bs-btn-active-color: #fff;
  --bs-btn-active-bg: var(--mt-ink);
}

/* Leave a review — secondary, but not so quiet it reads as disabled */
.btn-review {
  --bs-btn-padding-y: .875rem;
  --bs-btn-padding-x: 1.75rem;
  --bs-btn-font-weight: 700;
  --bs-btn-font-size: .9375rem;
  --bs-btn-border-radius: var(--mt-radius-pill);

  display: inline-flex;
  align-items: center;
  gap: .625rem;
  min-height: 48px;
  color: var(--mt-ink);
  background-color: #fff;
  border: 1px solid var(--mt-line);
  box-shadow: 0 2px 10px rgba(31, 39, 72, .06);
  transition: border-color .2s ease, box-shadow .2s ease, transform .2s ease;
}

.btn-review__star {
  font-size: 1.125rem;
  line-height: 1;
  color: #f0a500;
  transition: transform .25s ease;
}

.btn-review:hover {
  color: var(--mt-ink);
  border-color: #f0a500;
  box-shadow: 0 8px 22px rgba(31, 39, 72, .10);
  transform: translateY(-2px);
}

/* 72 degrees is one fifth of a turn — the angle between points on a
   five-pointed star, so it lands back on itself */
.btn-review:hover .btn-review__star { transform: rotate(72deg) scale(1.15); }

.btn-review:focus-visible {
  outline: 3px solid var(--mt-brand);
  outline-offset: 3px;
}


/* ==========================================================================
   05. Navbar
   Transparent over the hero, solid white once the page scrolls.
   ========================================================================== */

.site-nav {
  --bs-navbar-padding-y: 1.25rem;
  background-color: transparent;
  transition: background-color .3s ease, box-shadow .3s ease, padding .3s ease;
}

.site-nav.is-scrolled {
  --bs-navbar-padding-y: .75rem;
  background-color: rgba(255, 255, 255, .96);
  backdrop-filter: saturate(180%) blur(12px);
  box-shadow: var(--mt-shadow-sm);
}

.site-brand {
  display: inline-flex;
  align-items: center;
  padding-block: 0;
}

.site-brand__logo {
  display: block;
  width: auto;
  height: 34px;
}

/* Default: dark logo, since the navbar sits on white or a light photo */
.site-brand__logo--light { display: none; }

/* site-nav--light: white logo over a dark banner, dark once scrolled */
.site-nav--light:not(.is-scrolled) .site-brand__logo--dark  { display: none; }
.site-nav--light:not(.is-scrolled) .site-brand__logo--light { display: block; }

.site-nav .nav-link {
  font-weight: 500;
  font-size: 1rem;
  color: var(--mt-ink);
  padding-inline: var(--mt-s2);
  transition: color .2s ease;
}

.site-nav .nav-link:hover,
.site-nav .nav-link:focus-visible,
.site-nav .nav-link.active {
  color: var(--mt-brand);
}

/* The dropdown toggle is an <a>, so it inherits the brand red from the base
   link rule rather than the nav-link colour. Pin it explicitly. */
.site-nav .nav-link.dropdown-toggle {
  color: var(--mt-ink);
}

.site-nav .nav-link.dropdown-toggle:hover,
.site-nav .nav-link.dropdown-toggle:focus-visible,
.site-nav .nav-link.dropdown-toggle.show {
  color: var(--mt-brand);
}

.site-nav .dropdown-menu {
  --bs-dropdown-min-width: 8rem;
  --bs-dropdown-border-color: var(--mt-line);
  --bs-dropdown-border-radius: var(--mt-radius-sm);
  --bs-dropdown-link-active-bg: var(--mt-brand);
  box-shadow: var(--mt-shadow-sm);
}

.navbar-toggler {
  border: 0;
  padding: .375rem .5rem;
  color: var(--mt-ink);
}

.navbar-toggler:focus { box-shadow: none; }

/* White over a dark banner photo */
.site-nav--light:not(.is-scrolled) .nav-link,
.site-nav--light:not(.is-scrolled) .navbar-toggler { color: #fff; }

@media (min-width: 992px) {
  .site-nav--light:not(.is-scrolled) .nav-link.dropdown-toggle { color: #fff; }
}

/* --- B2B, an outbound link ---------------------------------------------- */

.nav-link--b2b {
  display: inline-flex;
  align-items: center;
  gap: .375rem;
  font-weight: 700;
}

.nav-link--b2b .bi {
  font-size: .75em;
  opacity: .7;
}

@media (min-width: 992px) {
  /* Set apart from the site's own pages — it leads somewhere else */
  .nav-link--b2b {
    margin-left: var(--mt-s2);
    padding-inline: 1rem;
    border: 1px solid var(--mt-line);
    border-radius: var(--mt-radius-pill);
  }

  .nav-link--b2b:hover { border-color: var(--mt-brand); }

  .site-nav--light:not(.is-scrolled) .nav-link--b2b {
    border-color: rgba(255, 255, 255, .5);
  }
}

/* --- Collapsed menu ------------------------------------------------------
   Its own white panel, so links inside must be dark whatever the navbar
   variant. Without this the light variant paints white text on white.
   ------------------------------------------------------------------------ */

@media (max-width: 991.98px) {
  .site-nav .navbar-collapse {
    background-color: #fff;
    border-radius: var(--mt-radius);
    box-shadow: var(--mt-shadow);
    margin-top: var(--mt-s2);
    padding: var(--mt-s2);
  }

  .site-nav .nav-link {
    padding-inline: var(--mt-s1);
    padding-block: .625rem;
  }

  .site-nav .dropdown-menu {
    border: 0;
    box-shadow: none;
    padding-left: var(--mt-s1);
  }

  .site-nav--light:not(.is-scrolled) .navbar-collapse .nav-link {
    color: var(--mt-ink);
  }

  .site-nav--light:not(.is-scrolled) .navbar-collapse .nav-link:hover,
  .site-nav--light:not(.is-scrolled) .navbar-collapse .nav-link:focus-visible,
  .site-nav--light:not(.is-scrolled) .navbar-collapse .nav-link.active {
    color: var(--mt-brand);
  }
}


/* ==========================================================================
   06. Hero
   Background image is set inline in the page from the CMS.
   ========================================================================== */

.hero {
  position: relative;
  display: flex;
  align-items: center;
  min-height: clamp(560px, 94svh, 900px);
  padding-block: calc(var(--mt-nav-h) + var(--mt-s5)) var(--mt-s6);
  background: var(--mt-ink) center / cover no-repeat;
  isolation: isolate;
}

/* Legibility scrim. The raw photo alone does not guarantee 4.5:1 on the
   subheading, especially on small screens where the crop shifts. */
.hero::after {
  content: "";
  position: absolute;
  inset: 0;
  z-index: -1;
  background:
    /* lightens the top strip — keeps the dark nav readable on any photo */
    linear-gradient(180deg, rgba(255, 255, 255, .45) 0%, rgba(255, 255, 255, 0) 22%),
    /* darkens the left — carries the headline and subheading */
    linear-gradient(105deg, rgba(9, 20, 32, .50) 0%, rgba(9, 20, 32, .18) 48%, rgba(9, 20, 32, 0) 75%);
}

.hero__title {
  color: #fff;
  font-weight: 700;
  text-shadow: 0 2px 24px rgba(9, 20, 32, .35);
  margin-bottom: var(--mt-s3);
}

.hero__text {
  color: rgba(255, 255, 255, .94);
  font-size: var(--mt-lead);
  font-weight: 500;
  max-width: 34ch;
  margin-bottom: var(--mt-s4);
  text-shadow: 0 1px 16px rgba(9, 20, 32, .4);
}

@media (max-width: 575.98px) {
  .hero { min-height: 620px; }
  .hero__text { max-width: 100%; }
  .hero .btn { width: 100%; }
}


/* ==========================================================================
   07. Section shell
   One padding rule. Modifiers change background and colour only, never
   padding, so specificity never fights itself.
   ========================================================================== */

.section {
  padding-block: var(--mt-section-y);
}

.section--tight  { --mt-section-y: clamp(2.5rem, 1.5rem + 4vw, 4.5rem); }
.section--soft   { background-color: #fbfbfc; }

/* Full-bleed photographic section */
.section--photo {
  position: relative;
  background: var(--mt-ink) center / cover no-repeat;
  isolation: isolate;
}

.section--photo::after {
  content: "";
  position: absolute;
  inset: 0;
  z-index: -1;
  background: linear-gradient(180deg, rgba(9, 20, 32, .34) 0%, rgba(9, 20, 32, .10) 40%, rgba(9, 20, 32, .30) 100%);
}

.section--photo h2,
.section--photo h3,
.section--photo p { color: #fff; }


/* ==========================================================================
   08. Media frames
   ========================================================================== */

/* Image with the offset grey card behind it */
.stacked-media {
  position: relative;
  isolation: isolate;
  padding: 0 0 var(--mt-s4) var(--mt-s4);
}

.stacked-media::before {
  content: "";
  position: absolute;
  inset: 0 var(--mt-s4) var(--mt-s4) 0;
  background-color: var(--mt-surface-soft);
  border-radius: var(--mt-radius-lg);
  z-index: -1;
}

/* Aspect-locked wrapper, so swapping a placeholder for a real photo causes
   zero layout shift */
.media-frame {
  position: relative;
  overflow: hidden;
  border-radius: var(--mt-radius-lg);
}

.media-frame > img {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  object-fit: cover;
}

/* Ratio modifiers — the only place image proportions are declared */
.media-frame--4x5 { aspect-ratio: 4 / 5; }
.media-frame--2x3 { aspect-ratio: 2 / 3; }
.media-frame--3x4 { aspect-ratio: 3 / 4; }

@media (max-width: 991.98px) {
  .stacked-media {
    padding: 0 0 var(--mt-s3) var(--mt-s3);
    max-width: 460px;
    margin-inline: auto;
  }
  .stacked-media::before { inset: 0 var(--mt-s3) var(--mt-s3) 0; }
}


/* ==========================================================================
   09. Stats
   ========================================================================== */

.stat__icon {
  display: block;
  width: 44px;
  height: 44px;
  object-fit: contain;
  /* text-align has no effect on a block image, so the margin centres it */
  margin: 0 auto var(--mt-s2);
}

@media (min-width: 992px) {
  .stat__icon { margin-inline: 0; }
}

.stat__value {
  font-family: var(--mt-font-sans);
  font-size: clamp(2.25rem, 1.7rem + 2.2vw, 3.25rem);
  font-weight: 800;
  line-height: 1.1;
  color: var(--mt-ink);
  letter-spacing: -.02em;
  margin-bottom: var(--mt-s1);
}

.stat__label {
  font-size: var(--mt-base);
  color: var(--mt-muted);
  line-height: 1.45;
  margin: 0;
  text-wrap: balance;
}


/* ==========================================================================
   10. Feature list — Why Companies Choose Us
   ========================================================================== */

.feature-list {
  list-style: none;
  margin: 0;
  padding: 0;
  display: grid;
  gap: var(--mt-s4);
}

.feature-list li {
  display: flex;
  align-items: center;
  gap: var(--mt-s3);
  font-size: 1.125rem;
  font-weight: 500;
  color: var(--mt-ink);
}

/* flex: none stops the icon squashing when a label wraps to two lines */
.feature-list__icon {
  flex: none;
  width: 36px;
  height: 36px;
  object-fit: contain;
}


/* ==========================================================================
   11. Destinations
   Tall section, cards pinned to the bottom, background crossfading behind.
   ========================================================================== */

.section--destinations {
  display: flex;
  flex-direction: column;
  min-height: clamp(560px, 84svh, 820px);
  padding-bottom: clamp(1.5rem, 1rem + 1.5vw, 2.5rem);
}

.destinations__inner {
  flex: 1;
  display: flex;
  flex-direction: column;
}

/* Pushes the row down however tall the section ends up */
.destinations__inner .scroller { margin-top: auto; }

/* Two stacked layers so switching crossfades instead of flashing */
.destinations__bg {
  position: absolute;
  inset: 0;
  z-index: -2;          /* below the scrim (-1), above the section's own bg */
  overflow: hidden;
}

.destinations__bg img {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  object-fit: cover;
  opacity: 0;
  transition: opacity .6s ease;
}

.destinations__bg img.is-visible { opacity: 1; }

/* All names visible. The active one is brighter and lifted; the rest stay
   readable so the row is scannable without hovering everything.
   Reserved space either way, so switching never shifts the row. */
.destination-card__name {
  display: block;
  margin: var(--mt-s2) 0 0;
  font-size: var(--mt-small);
  font-weight: 700;
  color: rgba(255, 255, 255, .72);
  text-shadow: 0 1px 10px rgba(9, 20, 32, .55);
  opacity: 1;
  transition: color .3s ease, transform .3s ease;
}

.destination-card.is-active .destination-card__name {
  color: #fff;
  transform: scale(1.06);
}

@media (hover: hover) {
  .destination-card:hover .destination-card__name { color: #fff; }
}

/* --- Scroller ------------------------------------------------------------ */

.scroller {
  position: relative;
}

.scroller__track {
  display: flex;
  gap: var(--mt-s3);
  overflow-x: auto;
  scroll-snap-type: x mandatory;
  scroll-behavior: smooth;

  /* Room for shadows to render, pulled back by the same amount so the first
     card still sits flush with the container edge. Clamped to the gutter,
     or it overflows on narrow screens. */
  padding-inline: 16px;
  margin-inline: max(-16px, calc(var(--bs-gutter-x, 1.5rem) * -0.5));
  scroll-padding-inline: 16px;

  padding-block: var(--mt-s2) var(--mt-s3);
  scrollbar-width: none;
  -ms-overflow-style: none;
}

.scroller__track::-webkit-scrollbar { display: none; }

/* Headroom for the raised active card and its shadow */
.scroller__track--destinations { padding-block: var(--mt-s4) 0; }

.scroller__item {
  flex: 0 0 auto;
  scroll-snap-align: start;
}

.scroller__btn {
  position: absolute;
  top: 50%;
  translate: 0 -50%;
  z-index: 3;
  width: 44px;
  height: 44px;
  display: grid;
  place-items: center;
  border: 1px solid var(--mt-line);
  border-radius: 50%;
  background-color: #fff;
  color: var(--mt-ink);
  box-shadow: var(--mt-shadow-sm);
  transition: background-color .2s ease, color .2s ease, opacity .2s ease;
}

.scroller__btn:hover {
  background-color: var(--mt-brand);
  color: #fff;
  border-color: var(--mt-brand);
}

.scroller__btn[disabled] { opacity: .35; pointer-events: none; }
.scroller__btn[hidden]   { display: none; }

/* Fully clear of the track — at -22px they overlapped the first card */
.scroller__btn--prev { left: -56px; }
.scroller__btn--next { right: -56px; }

@media (max-width: 1279.98px) {
  .scroller__btn { display: none; }
}

/* --- Destination card ---------------------------------------------------- */

.destination-card {
  display: block;
  width: 176px;
  padding: 0;
  border: 0;
  background: none;
  color: inherit;
  text-align: center;
  transition: transform .35s ease;
}

/* display: block matters — a span is inline, and inline boxes ignore
   aspect-ratio and overflow entirely */
.destination-card__frame {
  display: block;
  position: relative;
  overflow: hidden;
  border-radius: var(--mt-radius);
  box-shadow: var(--mt-shadow);
  aspect-ratio: 3 / 4;
  transition: box-shadow .35s ease;
}

.destination-card__frame > img {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  object-fit: cover;
}

/* The name is reserved in the layout but only revealed on the active card,
   so switching selection does not shift the row height */
.destination-card__name {
  display: block;
  margin: var(--mt-s1) 0 0;
  font-size: var(--mt-small);
  font-weight: 700;
  color: #fff;
  text-shadow: 0 1px 10px rgba(9, 20, 32, .5);
  transition: opacity .3s ease;
}

.destination-card:hover,
.destination-card:focus-visible { transform: translateY(-8px); }

.destination-card.is-active,
.destination-card.is-active:hover { transform: translateY(-18px); }

.destination-card.is-active .destination-card__name { opacity: 1; }
.destination-card.is-active .destination-card__frame { box-shadow: var(--mt-shadow-lg); }

@media (max-width: 767.98px) {
  .destination-card { width: 150px; }
}


/* ==========================================================================
   12. Testimonial cards
   Used by the reviews section; the form itself lives in reviews.css.
   ========================================================================== */

.testimonial-card {
  height: 100%;
  margin: 0;
  padding: var(--mt-s4) var(--mt-s3) var(--mt-s3);
  background-color: #fff;
  border-radius: var(--mt-radius);
  /* Two layers: the tight one defines the edge, the wide one gives lift.
     A single large blur at 10% reads as a grey smudge. */
  box-shadow: 0 6px 20px rgba(31, 39, 72, .06),
              0 1px 3px rgba(31, 39, 72, .04);
}

.testimonial-card__quote {
  color: #48546b;
  margin-bottom: var(--mt-s3);
}

.testimonial-card__name {
  font-family: var(--mt-font-sans);
  font-size: 1rem;
  font-weight: 700;
  color: var(--mt-ink);
  margin-bottom: 2px;
}

.testimonial-card__place {
  font-size: var(--mt-small);
  color: var(--mt-muted);
  margin: 0;
}

/* Side padding so box-shadows are not clipped by overflow: auto */
.scroller__track--testimonials {
  padding-block: var(--mt-s4);
}

.scroller__item--testimonial { width: min(340px, 82vw); }

@media (min-width: 768px)  { .scroller__item--testimonial { width: 320px; } }
@media (min-width: 1200px) { .scroller__item--testimonial { width: 348px; } }


/* ==========================================================================
   13. CTA band
   Background image is set inline in the page from the CMS.
   ========================================================================== */

.cta-band {
  --mt-section-y: clamp(5rem, 3rem + 9vw, 10rem);
  /* Extra room at the bottom for the contact card to overlap into */
  padding-bottom: calc(var(--mt-section-y) + 3rem);
}

.cta-band__title {
  font-family: var(--mt-font-hand);
  font-weight: 500;
  font-size: clamp(2.25rem, 1.1rem + 4.9vw, 4.5rem);
  line-height: 1.15;
  letter-spacing: .01em;
  color: #fff;
  text-shadow: 0 2px 20px rgba(9, 20, 32, .35);
  margin-bottom: var(--mt-s4);
}


/* ==========================================================================
   14. Contact card
   Straddles the boundary between the CTA photo and the red footer band.
   ========================================================================== */

.contact-strip {
  /* flow-root stops the card's negative margin collapsing through the
     container and dragging the whole red section up with it */
  display: flow-root;
  padding-block: 0;
  background-color: var(--mt-brand);
}

.contact-card {
  position: relative;
  z-index: 1;
  /* Lifts the card up over the CTA photo above it */
  margin-top: clamp(-3.5rem, -1.5rem - 2vw, -2rem);
  padding: clamp(1.5rem, 1rem + 2vw, 3rem);
  background-color: #fff;
  border-radius: var(--mt-radius);
  box-shadow: 0 16px 40px rgba(31, 39, 72, .12);
}

.contact-card__title {
  font-family: var(--mt-font-sans);
  font-size: clamp(1.75rem, 1.4rem + 1.5vw, 2.5rem);
  font-weight: 800;
  line-height: 1.2;
  letter-spacing: -.02em;
  color: #14181f;
  margin-bottom: var(--mt-s4);
}

.contact-card__title span { color: var(--mt-brand); }

.contact-form .form-control,
.contact-form .form-select {
  min-height: 48px;
  padding: .625rem 1rem;
  font-size: var(--mt-small);
  background-color: #fff;
  border-color: #e2e4e8;
  border-radius: var(--mt-radius-sm);
}

.contact-form textarea.form-control {
  min-height: 120px;
  resize: vertical;
}

.contact-form .form-control::placeholder { color: #a2a8b4; }
.contact-form .form-select:has(option[value=""]:checked) { color: #a2a8b4; }

.contact-form .form-control:focus,
.contact-form .form-select:focus {
  border-color: var(--mt-brand);
  box-shadow: 0 0 0 .2rem var(--mt-brand-soft);
}

.contact-form .btn {
  width: 100%;
  text-transform: uppercase;
  letter-spacing: .08em;
  font-size: var(--mt-small);
}


/* ==========================================================================
   15. Contact map
   ========================================================================== */

.contact-map {
  position: relative;
  height: 100%;
  min-height: 280px;
  overflow: hidden;
  border-radius: var(--mt-radius-sm);
  background-color: #e9ebef;
}

.contact-map iframe,
.contact-map .leaflet-container {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  border: 0;
}

.contact-map .leaflet-container {
  font-family: var(--mt-font-sans);
  border-radius: var(--mt-radius-sm);
}

@media (min-width: 992px) {
  .contact-map { min-height: 320px; }
}

/* mask-image recolours the existing white logo — one file, any colour,
   rather than exporting a second SVG per brand tweak */
.map-pin {
  display: block;
  width: 46px;
  height: 46px;
  filter: drop-shadow(0 4px 8px rgba(9, 20, 32, .35));
}

.map-pin__heart {
  display: block;
  width: 100%;
  height: 100%;
  background-color: #e93b54;
  -webkit-mask: url("../img/logo-footer.svg") center / contain no-repeat;
          mask: url("../img/logo-footer.svg") center / contain no-repeat;
}

.leaflet-popup-content {
  font-size: var(--mt-small);
  line-height: 1.6;
}

.leaflet-popup-content strong { color: var(--mt-ink); }
.leaflet-popup-content a { color: var(--mt-brand); font-weight: 600; }


/* ==========================================================================
   16. Contact form status
   ========================================================================== */

.form-status {
  margin-bottom: var(--mt-s3);
  padding: var(--mt-s2);
  border-radius: var(--mt-radius-sm);
  font-size: var(--mt-small);
  line-height: 1.6;
}

.form-status--ok  { background: #e7f6ef; color: #1a6b4c; }
.form-status--bad { background: #fdeced; color: #a4252f; }


/* ==========================================================================
   17. Destination enquiry
   ========================================================================== */

.enquiry-form__intro {
  margin-bottom: var(--mt-s3);
  font-size: var(--mt-small);
  color: var(--mt-body);
}

.enquiry-form .form-control {
  min-height: 48px;
  padding: .625rem 1rem;
  font-size: var(--mt-small);
  border-color: #e2e4e8;
  border-radius: var(--mt-radius-sm);
}

.enquiry-form textarea.form-control {
  min-height: 110px;
  resize: vertical;
}

.enquiry-form .form-control:focus {
  border-color: var(--mt-brand);
  box-shadow: 0 0 0 .2rem var(--mt-brand-soft);
}

/* Chrome draws spinners on number inputs that are useless at this size */
.enquiry-form input[type="number"]::-webkit-outer-spin-button,
.enquiry-form input[type="number"]::-webkit-inner-spin-button {
  -webkit-appearance: none;
  margin: 0;
}

.enquiry-form input[type="number"] { -moz-appearance: textfield; }

.enquiry-status {
  max-width: 640px;
  margin: 0 auto var(--mt-s3);
  padding: var(--mt-s2);
  border-radius: var(--mt-radius-sm);
  font-size: var(--mt-small);
  line-height: 1.6;
  text-align: center;
}

.enquiry-status--ok  { background: #e7f6ef; color: #1a6b4c !important; }
.enquiry-status--bad { background: #fdeced; color: #a4252f !important; }


/* ==========================================================================
   18. Philosophy page
   ========================================================================== */

.page-banner {
  height: clamp(260px, 30vw, 460px);
  background: var(--mt-ink) center / cover no-repeat;
  /* background-image comes from the CMS, set inline in the page */
}

.philosophy-heading {
  font-size: clamp(1.75rem, 1.35rem + 1.7vw, 2.5rem);
  line-height: 1.25;
}

.philosophy-copy {
  max-width: 46ch;
  font-size: var(--mt-small);
  line-height: 1.9;
}

.philosophy-copy p { margin-bottom: var(--mt-s2); }

/* Justified only where the measure is wide enough to avoid rivers */
@media (min-width: 992px) {
  .philosophy-copy {
    text-align: justify;
    hyphens: auto;
  }
}

/* --- Staggered image collage --------------------------------------------- */

.collage {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: var(--mt-s2);
}

.collage__col {
  display: grid;
  gap: var(--mt-s2);
  align-content: start;
}

/* The left column drops slightly, which is what gives the stagger */
.collage__col:first-child { margin-top: clamp(1rem, .5rem + 1.5vw, 2.5rem); }

.collage__item {
  position: relative;
  overflow: hidden;
  border-radius: var(--mt-radius);
  box-shadow: var(--mt-shadow-sm);
}

.collage__item > img {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  object-fit: cover;
}

.collage__item--wide { aspect-ratio: 4 / 3; }
.collage__item--tall { aspect-ratio: 2 / 3; }

/* --- Values -------------------------------------------------------------- */

.value { text-align: center; }

.value__icon {
  width: 44px;
  height: 44px;
  object-fit: contain;
  margin-bottom: var(--mt-s2);
}

.value__title {
  font-family: var(--mt-font-sans);
  font-size: 1rem;
  font-weight: 700;
  color: var(--mt-ink);
  margin-bottom: var(--mt-s1);
}

.value__text {
  font-size: var(--mt-small);
  color: var(--mt-body);
  line-height: 1.5;
  margin: 0;
  text-wrap: balance;
}

/* --- Team ---------------------------------------------------------------- */

.team-card {
  margin: 0;
  text-align: center;
}

.team-card__photo {
  position: relative;
  overflow: hidden;
  aspect-ratio: 3 / 4;
  border-radius: var(--mt-radius-sm);
  background-color: var(--mt-surface-soft);
  margin-bottom: var(--mt-s2);
  box-shadow: var(--mt-shadow-sm);
}

.team-card__photo > img {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  object-fit: cover;
  transition: transform .5s ease;
}

.team-card:hover .team-card__photo > img { transform: scale(1.04); }

.team-card__name {
  font-size: var(--mt-small);
  font-weight: 700;
  color: var(--mt-ink);
  line-height: 1.35;
  margin-bottom: 2px;
  text-wrap: balance;
}

.team-card__role {
  font-size: .8125rem;
  color: var(--mt-muted);
  margin: 0;
}


/* ==========================================================================
   19. Footer
   ========================================================================== */

.site-footer {
  position: relative;
  overflow: hidden;
  padding-block: clamp(3rem, 1.5rem + 6vw, 5.5rem);
  background-color: var(--mt-brand);
  color: #fff;
  text-align: center;
}

/* Pinned to where the logo sits: horizontally centred, vertically anchored
   so the rings radiate from the mark rather than the footer box */
.site-footer__pattern {
  position: absolute;
  top: var(--mt-pattern-top, 200px);
  left: 50%;
  translate: -50% -50%;
  width: max(1444px, 130vw);
  height: auto;
  max-width: none;      /* Bootstrap's img rule would clamp it to nothing */
  z-index: 0;
  pointer-events: none;
  user-select: none;
}

.site-footer__inner {
  position: relative;
  z-index: 1;
}

.site-footer__mark {
  display: block;
  width: 96px;
  height: auto;
  margin: 0 auto var(--mt-s3);
}

.site-footer__contact {
  font-size: 1.0625rem;
  font-weight: 700;
  line-height: 1.6;
  margin-bottom: 2px;
}

.site-footer__contact a { color: #fff; }
.site-footer__contact a:hover { color: #fff; text-decoration: underline; }

.site-footer__address {
  font-size: var(--mt-base);
  font-weight: 400;
  color: rgba(255, 255, 255, .88);
  margin-bottom: var(--mt-s3);
}

.social-link {
  width: 48px;
  height: 48px;
  display: grid;
  place-items: center;
  border: 2px solid rgba(255, 255, 255, .85);
  border-radius: 50%;
  color: #fff;
  font-size: 1.25rem;
  transition: background-color .25s ease, color .25s ease, transform .25s ease;
}

.social-link:hover,
.social-link:focus-visible {
  background-color: #fff;
  color: var(--mt-brand);
  transform: translateY(-3px);
}

.site-footer--tight {
  --mt-pattern-top: clamp(160px, 140px + 5vw, 200px);
  padding-top: clamp(2.5rem, 1.5rem + 3vw, 4.5rem);
}


/* ==========================================================================
   20. 404
   ========================================================================== */

.notfound-body {
  display: flex;
  flex-direction: column;
  min-height: 100svh;
}

.notfound {
  flex: 1;                       /* pushes the footer down on a short page */
  display: grid;
  place-items: center;
  padding-block: calc(var(--mt-nav-h) + var(--mt-s6)) var(--mt-s6);
  text-align: center;
}

/* Decoration — the real message is the heading below, which is why this
   carries aria-hidden in the markup */
.notfound__code {
  font-family: var(--mt-font-display);
  font-size: clamp(6rem, 3rem + 14vw, 13rem);
  font-weight: 700;
  line-height: .9;
  letter-spacing: -.04em;
  margin: 0 0 var(--mt-s3);
  color: var(--mt-brand);
  opacity: .14;
  user-select: none;
}

.notfound__title {
  font-size: clamp(1.75rem, 1.3rem + 2vw, 3rem);
  margin-bottom: var(--mt-s3);
  text-wrap: balance;
}

.notfound__text {
  max-width: 46ch;
  margin: 0 auto var(--mt-s5);
  font-size: var(--mt-lead);
  line-height: 1.75;
  color: var(--mt-body);
}

.notfound__actions {
  display: flex;
  flex-wrap: wrap;
  justify-content: center;
  gap: var(--mt-s2);
  margin-bottom: var(--mt-s5);
}

.notfound__help {
  font-size: var(--mt-small);
  color: var(--mt-muted);
}

.notfound__help a {
  color: var(--mt-body);
  text-decoration: underline;
  text-underline-offset: 2px;
}

.notfound__help a:hover { color: var(--mt-brand); }

@media (max-width: 575.98px) {
  .notfound__actions .btn { width: 100%; }
}


/* ==========================================================================
   21. Modal
   ========================================================================== */

.modal-content {
  border: 0;
  border-radius: var(--mt-radius);
  overflow: hidden;
}


/* ==========================================================================
   22. Accessibility + motion
   ========================================================================== */

.skip-link {
  position: absolute;
  top: 0;
  left: var(--mt-s2);
  z-index: 2000;
  translate: 0 -120%;
  padding: .75rem 1.25rem;
  border-radius: 0 0 var(--mt-radius-sm) var(--mt-radius-sm);
  background-color: var(--mt-ink);
  color: #fff;
  font-weight: 600;
  transition: translate .2s ease;
}

.skip-link:focus { translate: 0 0; color: #fff; }

:focus-visible {
  outline: 3px solid var(--mt-brand);
  outline-offset: 3px;
  border-radius: 2px;
}

.section--photo :focus-visible,
.hero :focus-visible,
.site-footer :focus-visible {
  outline-color: #fff;
}

@media (prefers-reduced-motion: reduce) {
  html { scroll-behavior: auto; }

  *,
  *::before,
  *::after {
    animation-duration: .01ms !important;
    animation-iteration-count: 1 !important;
    transition-duration: .01ms !important;
    scroll-behavior: auto !important;
  }
}


/* ==========================================================================
   23. Horizontal overflow guards
   --------------------------------------------------------------------------
   overflow-x: clip rather than hidden — hidden turns the element into a
   scroll container, which silently breaks position: sticky anywhere inside
   and interferes with scroll anchoring. clip does neither.
   ========================================================================== */

html,
body {
  max-width: 100%;
  overflow-x: clip;
}

/* Full-bleed photo layers are absolutely positioned and can exceed the
   viewport during a crossfade */
.section--photo,
.section--destinations,
.hero,
.cta-band {
  overflow-x: clip;
}

/* Anything that could push wide */
img,
svg,
iframe,
video,
table {
  max-width: 100%;
}

/* The footer pattern is deliberately wider than the viewport — the footer's
   own overflow: hidden crops it, so exempt it from the rule above */
.site-footer__pattern { max-width: none; }

/* Long unbroken strings (emails, URLs) are a common mobile overflow source */
.site-footer__contact,
.site-footer__address,
.testimonial-card__quote {
  overflow-wrap: anywhere;
}