/*
 * My Trip Adventures design system.
 *
 * This file, not style.css, carries every rule on the site. It is enqueued at
 * a path that contains the theme version, because this host strips query
 * strings from local assets and then caches them at the edge for seven days.
 * With ?ver= removed there is nothing left to bust the cache, and the CDN went
 * on serving a stylesheet from version 1.7.0 to every logged-out visitor for
 * as long as that entry lived. Measured on the live site: 27,218 bytes of
 * version 1.7.0 served to guests while the file on disk was 91,466 bytes of
 * version 3.3.1. Administrators never saw it, because a logged-in request
 * carries the query string and therefore a different cache key.
 *
 * A version in the path cannot be stripped. Every release is a new URL, so a
 * stale copy is unreachable rather than merely unlikely.
 */

/* =========================================================================
   Design tokens
   Two poles the business spans: miombo woodland inland, Indian Ocean coast.
   Ochre carries every action and nothing else uses it.
   Neutrals hold a faint green cast so nothing reads as default grey.
   ========================================================================= */

:root {
  /*
   * BRAND PALETTE
   *
   * Warm olive and gold. Every pairing below was measured against WCAG 2.1,
   * not estimated: the failures are the ones you cannot see on a good screen
   * in a dark room, and they are exactly the ones a traveller reading on a
   * phone in daylight hits first.
   *
   *   ink on sand            14.00:1      forest on sand         10.27:1
   *   ink-2 on sand           8.04:1      leaf on sand            6.46:1
   *   ink-3 on sand           5.37:1      earth on sand           6.76:1
   *   white on forest        11.50:1      white on bark          12.78:1
   *   gold-text on white      5.72:1      white on gold           4.57:1
   *
   * Gold reaches 4.57:1 on white. That passes AA for body text but only
   * just, so gold carries buttons, rules and large headings, and gold-text
   * carries anything set small. Green remains WhatsApp only.
   */

  /* Brand */
  --mta-forest:        #2D3E24;
  --mta-forest-soft:   #42562F;
  --mta-forest-deep:   #1C2817;
  --mta-leaf:          #4B5D2D;
  --mta-leaf-soft:     #5E7239;
  --mta-earth:         #63513D;
  --mta-bark:          #3D3021;

  /* Action */
  --mta-gold:          #8C7326;   /* buttons, rules, large headings */
  --mta-gold-hover:    #75601F;
  --mta-gold-text:     #7A6420;   /* small text and inline links */
  --mta-gold-wash:     #F4EFDF;

  /* Ink and ground */
  --mta-ink:           #2A2218;
  --mta-ink-2:         #544737;
  --mta-ink-3:         #6E6152;
  --mta-sand:          #F5F2E9;
  --mta-ground:        #F5F2E9;
  --mta-surface:       #FFFFFF;
  --mta-surface-2:     #EDE8DA;
  --mta-line:          #E2DCCB;

  /*
   * Legacy names, kept as aliases.
   *
   * The previous palette is referenced about 140 times across this file.
   * Repointing the old names at the new colours re-skins every one of those
   * rules at once, which is both the smallest diff and the safest: there is
   * no window in which half the site is green and half is olive. The old
   * names are not used in new rules and are removed once the last reference
   * is migrated.
   */
  --mta-miombo:        var(--mta-forest);
  --mta-miombo-soft:   var(--mta-forest-soft);
  --mta-miombo-deep:   var(--mta-forest-deep);
  --mta-ocean:         var(--mta-leaf);
  --mta-ocean-soft:    var(--mta-leaf-soft);
  --mta-ochre:         var(--mta-gold);
  --mta-ochre-hover:   var(--mta-gold-hover);
  --mta-ochre-text:    var(--mta-gold-text);
  --mta-ochre-wash:    var(--mta-gold-wash);

  /* Signal. Green is WhatsApp only, never decorative. */
  --mta-whatsapp:      #25763F;
  --mta-whatsapp-hover:#1E6234;
  --mta-warn:          #8A6008;
  --mta-error:         #9B2C1E;

  /* Type
     ------------------------------------------------------------------
     The native UI stack. No web font is requested anywhere on this site.

     Every visitor renders in the face their own operating system already
     has in memory, so text paints on the first frame with no font request,
     no swap and no reflow: Segoe UI on Windows, San Francisco on Mac and
     iOS, Roboto on Android, and a sans fallback elsewhere.

     Order matters. -apple-system and BlinkMacSystemFont must come first or
     Safari and older Chrome on Mac miss San Francisco. "Segoe UI" must be
     quoted because it contains a space. The three emoji families at the end
     are what stop a flag or a symbol in user-entered text from rendering as
     a hollow box on Windows; they are fallback coverage for characters the
     text faces do not carry, and nothing on this site sets emoji by design.

     Changing this token restyles the entire interface. It is also written
     out longhand in inc/email.php, which cannot read a CSS variable, and
     the two must be kept in step.
     ------------------------------------------------------------------ */
  --mta-font: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Helvetica, Arial, sans-serif, "Apple Color Emoji", "Segoe UI Emoji", "Segoe UI Symbol";

  /* Type scale, measured off the reference site rather than invented.
     ------------------------------------------------------------------
     The reference runs a deliberately flat scale: a very large hero, then
     one section size for everything below it. Section headings are 30px at
     weight 500, not 24px at weight 700. That combination is what makes a
     long page of stacked bands read as calm instead of shouty, because the
     size does the separating and the weight stays out of the way.

     Body is 16px with a 1.6 line height. The earlier 17px here was a
     reasonable idea that loses to the reference in practice: at 16/1.6 the
     card specification rows and the section body land on the same rhythm,
     and 14px labels sit a clean two steps below rather than an awkward
     three.
     ------------------------------------------------------------------ */
  --mta-fs-display: clamp(2rem, 5.2vw, 3rem);   /* hero H1, 48px at full width */
  --mta-fs-h1:      clamp(1.75rem, 3.6vw, 2.1rem);
  --mta-fs-h2:      clamp(1.5rem, 2.6vw, 1.875rem); /* 30px */
  --mta-fs-h3:      1.1875rem;                  /* 19px, the card title size */
  --mta-fs-body:    1rem;                       /* 16px */
  --mta-fs-small:   0.875rem;                   /* 14px, card spec rows */
  --mta-fs-label:   0.72rem;                    /* 11.5px eyebrow */

  /* Space, 4px base */
  --mta-s1: 4px;  --mta-s2: 8px;  --mta-s3: 12px; --mta-s4: 16px;
  --mta-s5: 24px; --mta-s6: 32px; --mta-s7: 48px; --mta-s8: 64px;
  --mta-s9: 96px;

  /* 8px on cards and panels, 7px on chips and buttons. Both measured. The
     difference is small enough to look accidental and is not: a chip at 8px
     beside a card at 8px reads as the same object at two sizes, and the
     single pixel is what separates them. */
  --mta-radius:     8px;
  --mta-radius-sm:  7px;
  --mta-maxw:       1140px;

  /* The fixed bar's height, as a token because four other things measure
     themselves against it: the body offset, the scroll-margin on anchor
     targets, the drawer's top edge and the sticky filter bar. */
  --mta-bar:        60px;
  --mta-measure:    68ch;
  --mta-tap:        48px;   /* minimum interactive target, every breakpoint */
}

/* =========================================================================
   Base
   ========================================================================= */

body,
button,
input,
select,
textarea,
.entry-content {
  font-family: var(--mta-font);
  color: var(--mta-ink);
}

body {
  background: var(--mta-ground);
  font-size: var(--mta-fs-body);
  line-height: 1.6;
  -webkit-font-smoothing: antialiased;
}

h1, h2, h3, h4, h5, h6 {
  font-family: var(--mta-font);
  color: var(--mta-ink);
  text-wrap: balance;
}

/* Weight 500 on section headings is the single most consequential line in
   this file. See the note on the type scale above. */
h1 { font-size: var(--mta-fs-h1); font-weight: 700; letter-spacing: -0.02em; line-height: 1.2; }
h2 { font-size: var(--mta-fs-h2); font-weight: 500; letter-spacing: -0.01em; line-height: 1.3; }
h3 { font-size: var(--mta-fs-h3); font-weight: 700; line-height: 1.35; }

p { max-width: var(--mta-measure); }

.mta-label {
  font-size: var(--mta-fs-label);
  font-weight: 600;
  text-transform: uppercase;
  letter-spacing: 0.1em;
  color: var(--mta-ink-3);
}

/* -------------------------------------------------------------------------
   Visible keyboard focus.

   The parent theme ships `.hide-focus-outline :focus { outline: none }` and
   removes the outline again on every form control by attribute selector. Both
   beat a plain `a:focus-visible` on specificity, so a keyboard visitor was
   moving through the whole site with no idea where they were. Tabbing to the
   first navigation link on the live homepage returned outline-style: none
   while the element genuinely matched :focus-visible.

   The body class is removed in PHP, which disables the first rule at source.
   This is the belt to that pair of braces: !important is deliberate here,
   because it is overriding a reset that should never have been global, and
   nothing in this theme sets an outline that needs to win against it.
   ------------------------------------------------------------------------- */
a:focus-visible,
button:focus-visible,
input:focus-visible,
select:focus-visible,
textarea:focus-visible,
summary:focus-visible,
details:focus-visible,
[tabindex]:focus-visible,
.mta-btn:focus-visible {
  outline: 3px solid var(--mta-ochre) !important;
  outline-offset: 2px !important;
  border-radius: 4px;
}

/* On a dark ground the ochre needs a light ring behind it to stay visible. */
.mta-header a:focus-visible,
.mta-footer a:focus-visible,
.mta-hero a:focus-visible,
.mta-cta a:focus-visible,
.mta-pillar:focus-visible {
  outline-color: #FFD9A8 !important;
}

.mta-skip-link {
  position: absolute; left: -9999px; top: 0; z-index: 999;
  background: var(--mta-miombo); color: #fff; padding: 12px 18px;
}
.mta-skip-link:focus { left: 8px; top: 8px; }

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

/* =========================================================================
   Buttons. One primary per screen.
   ========================================================================= */

/* Border-box everywhere.

   The design system inherited this from Kadence rather than declaring it.
   That worked, but it made every width and padding in this file depend on a
   parent stylesheet loading first. Declared here, the layout holds on its own.
   ========================================================================= */

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

.mta-btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: var(--mta-s2);
  min-height: var(--mta-tap);
  padding: 13px 22px;
  border: 1px solid transparent;
  border-radius: var(--mta-radius-sm);
  font-size: 0.94rem;
  font-weight: 600;
  line-height: 1.2;
  text-decoration: none;
  cursor: pointer;
  transition: background-color 0.14s ease, border-color 0.14s ease;
}

.mta-btn--primary   { background: var(--mta-ochre); color: #fff; }
.mta-btn--primary:hover,
.mta-btn--primary:focus { background: var(--mta-ochre-hover); color: #fff; }

.mta-btn--secondary { background: transparent; color: var(--mta-ink); border-color: var(--mta-line); }
.mta-btn--secondary:hover { border-color: var(--mta-ink-3); }

.mta-btn--whatsapp  { background: var(--mta-whatsapp); color: #fff; }
.mta-btn--whatsapp:hover { background: var(--mta-whatsapp-hover); color: #fff; }

.mta-btn--block { width: 100%; }

/* =========================================================================
   Scrim. Every photograph carrying text gets one.
   The old site put white headings on pale turquoise water with no overlay.
   ========================================================================= */

.mta-scrim { position: relative; isolation: isolate; }
.mta-scrim > * { position: relative; z-index: 2; }
.mta-scrim::after {
  content: "";
  position: absolute; inset: 0; z-index: 1;
  background: linear-gradient(
    to top,
    rgba(9, 20, 15, 0.78) 0%,
    rgba(9, 20, 15, 0.45) 45%,
    rgba(9, 20, 15, 0.10) 100%
  );
}
.mta-scrim--full::after {
  background: linear-gradient(
    to right,
    rgba(9, 20, 15, 0.72) 0%,
    rgba(9, 20, 15, 0.38) 55%,
    rgba(9, 20, 15, 0.15) 100%
  );
}

/* =========================================================================
   Hero. Static image, server rendered, no slideshow, no text animation.
   ========================================================================= */

.mta-hero {
  position: relative;
  min-height: min(78vh, 620px);
  display: flex;
  align-items: flex-end;
  overflow: hidden;
  background: var(--mta-miombo-deep);
}
.mta-hero__media {
  position: absolute; inset: 0; z-index: 0;
  width: 100%; height: 100%;
  object-fit: cover;
}
.mta-hero__inner {
  position: relative; z-index: 3;
  width: 100%;
  max-width: var(--mta-maxw);
  margin: 0 auto;
  padding: var(--mta-s8) var(--mta-s5) var(--mta-s7);
  color: #fff;
}
.mta-hero__eyebrow {
  font-size: var(--mta-fs-label);
  font-weight: 600;
  text-transform: uppercase;
  letter-spacing: 0.11em;
  color: rgba(255,255,255,0.82);
  margin: 0 0 var(--mta-s3);
}
.mta-hero__title {
  font-size: var(--mta-fs-display);
  font-weight: 800;
  letter-spacing: -0.028em;
  line-height: 1.06;
  color: #fff;
  margin: 0 0 var(--mta-s4);
  max-width: 18ch;
}
.mta-hero__sub {
  font-size: 1.05rem;
  color: rgba(255,255,255,0.9);
  margin: 0 0 var(--mta-s5);
  max-width: 46ch;
}
.mta-hero__actions { display: flex; gap: var(--mta-s3); flex-wrap: wrap; }

/* =========================================================================
   Trust strip. Facts only, no badges without evidence.
   ========================================================================= */

.mta-trust {
  background: var(--mta-surface);
  border-bottom: 1px solid var(--mta-line);
}
.mta-trust__inner {
  max-width: var(--mta-maxw);
  margin: 0 auto;
  padding: var(--mta-s5);
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(min(190px, 100%), 1fr));
  gap: var(--mta-s5);
}
.mta-trust__item strong {
  display: block;
  font-size: 0.95rem;
  font-weight: 650;
  margin-bottom: 2px;
}
.mta-trust__item span { font-size: var(--mta-fs-small); color: var(--mta-ink-2); }

/* =========================================================================
   Cards
   ========================================================================= */

.mta-grid { display: grid; gap: var(--mta-s5); }
/* min(Npx, 100%) rather than a bare Npx minimum.

   Measured at 320px: the destination and About card grids overflowed by 23px,
   because a 280px track minimum cannot fit a 257px container and auto-fit has
   no smaller step to fall back to. min() lets the last column collapse to the
   container instead of pushing past it. */
.mta-grid--2 { grid-template-columns: repeat(auto-fit, minmax(min(300px, 100%), 1fr)); }
.mta-grid--3 { grid-template-columns: repeat(auto-fit, minmax(min(280px, 100%), 1fr)); }
.mta-grid--4 { grid-template-columns: repeat(auto-fit, minmax(min(230px, 100%), 1fr)); }

.mta-card {
  display: flex;
  flex-direction: column;
  background: var(--mta-surface);
  border: 1px solid var(--mta-line);
  border-radius: var(--mta-radius);
  overflow: hidden;
  text-decoration: none;
  color: inherit;
  transition: border-color 0.15s ease, transform 0.15s ease;
}
.mta-card:hover { border-color: var(--mta-ink-3); transform: translateY(-2px); }

.mta-card__media { aspect-ratio: 4 / 3; width: 100%; object-fit: cover; display: block; background: var(--mta-surface-2); }
.mta-card__body { padding: var(--mta-s4); display: flex; flex-direction: column; gap: var(--mta-s2); flex: 1; }
.mta-card__meta { font-size: var(--mta-fs-label); font-weight: 600; text-transform: uppercase; letter-spacing: 0.09em; color: var(--mta-ocean); }
.mta-card__title { font-size: 1.02rem; font-weight: 650; margin: 0; line-height: 1.3; }
.mta-card__excerpt { font-size: var(--mta-fs-small); color: var(--mta-ink-2); margin: 0; }
.mta-card__foot {
  margin-top: auto;
  padding-top: var(--mta-s3);
  border-top: 1px solid var(--mta-line);
  display: flex;
  justify-content: space-between;
  align-items: baseline;
  gap: var(--mta-s3);
}
.mta-card__price { font-weight: 700; font-size: 1rem; font-variant-numeric: tabular-nums; }
.mta-card__price small { font-weight: 400; font-size: 0.72rem; color: var(--mta-ink-3); display: block; }
.mta-card__cta { font-size: var(--mta-fs-small); font-weight: 600; color: var(--mta-ochre-text); }

/* Empty state. Shown when a tour has no price yet. Never invent one. */
.mta-card__price--pending { font-weight: 600; font-size: 0.85rem; color: var(--mta-ink-3); }

/* =========================================================================
   Tour page
   ========================================================================= */

.mta-tour { max-width: var(--mta-maxw); margin: 0 auto; padding: var(--mta-s6) var(--mta-s5) var(--mta-s9); }
.mta-tour__layout { display: grid; grid-template-columns: minmax(0, 1fr) 340px; gap: var(--mta-s7); align-items: start; }

.mta-facts {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(min(150px, 100%), 1fr));
  gap: var(--mta-s4);
  background: var(--mta-surface);
  border: 1px solid var(--mta-line);
  border-radius: var(--mta-radius);
  padding: var(--mta-s5);
  margin-bottom: var(--mta-s6);
}
.mta-facts dt { font-size: var(--mta-fs-label); font-weight: 600; text-transform: uppercase; letter-spacing: 0.09em; color: var(--mta-ink-3); margin-bottom: 3px; }
.mta-facts dd { margin: 0; font-weight: 600; font-size: 0.95rem; overflow-wrap: anywhere; }
.mta-facts > div { min-width: 0; }

.mta-section { margin-bottom: var(--mta-s7); }
.mta-section > h2 { margin: 0 0 var(--mta-s4); }

.mta-day {
  border: 1px solid var(--mta-line);
  border-radius: var(--mta-radius-sm);
  background: var(--mta-surface);
  margin-bottom: var(--mta-s3);
  overflow: hidden;
}
.mta-day > summary {
  cursor: pointer;
  padding: var(--mta-s4);
  font-weight: 650;
  display: flex;
  gap: var(--mta-s3);
  align-items: baseline;
  min-height: var(--mta-tap);
  list-style: none;
}
.mta-day > summary::-webkit-details-marker { display: none; }
.mta-day__n {
  font-size: var(--mta-fs-label);
  font-weight: 700;
  letter-spacing: 0.08em;
  color: var(--mta-ochre-text);
  text-transform: uppercase;
  white-space: nowrap;
}
.mta-day__body { padding: 0 var(--mta-s4) var(--mta-s4); }
.mta-day__stay { font-size: var(--mta-fs-small); color: var(--mta-ink-2); margin-top: var(--mta-s3); }

.mta-incl { display: grid; grid-template-columns: repeat(auto-fit, minmax(min(260px, 100%), 1fr)); gap: var(--mta-s5); }
.mta-incl ul { list-style: none; margin: 0; padding: 0; }
.mta-incl li {
  display: flex;
  align-items: flex-start;
  gap: 10px;
  padding: 8px 0;
  font-size: 0.94rem;
  border-bottom: 1px solid var(--mta-line);
}
.mta-incl li:last-child { border-bottom: 0; }
.mta-incl li .mta-i { flex: 0 0 auto; margin-top: 2px; }
.mta-incl--yes li .mta-i { color: var(--mta-whatsapp); }
.mta-incl--no  li .mta-i { color: var(--mta-ink-3); }

/* Sticky enquiry rail */
.mta-rail {
  position: sticky;
  top: var(--mta-s5);
  background: var(--mta-surface);
  border: 1px solid var(--mta-line);
  border-radius: var(--mta-radius);
  padding: var(--mta-s5);
}
.mta-rail__price { font-size: 1.5rem; font-weight: 750; font-variant-numeric: tabular-nums; margin: 0 0 2px; }
.mta-rail__price small { display: block; font-size: 0.72rem; font-weight: 400; color: var(--mta-ink-3); }
.mta-rail__actions { display: flex; flex-direction: column; gap: var(--mta-s2); margin: var(--mta-s4) 0; }
.mta-rail__note { font-size: 0.78rem; color: var(--mta-ink-3); margin: 0; }

/* =========================================================================
   Mobile conversion bar. The old site had no fixed elements at all.
   ========================================================================= */

.mta-mobilebar {
  position: fixed;
  left: 0; right: 0; bottom: 0;
  z-index: 900;
  display: none;
  gap: var(--mta-s2);
  padding: var(--mta-s2) var(--mta-s3);
  padding-bottom: calc(var(--mta-s2) + env(safe-area-inset-bottom, 0px));
  background: var(--mta-surface);
  border-top: 1px solid var(--mta-line);
  box-shadow: 0 -2px 14px rgba(20, 32, 26, 0.09);
}
.mta-mobilebar .mta-btn { padding: 12px 10px; font-size: 0.9rem; white-space: nowrap; }
.mta-mobilebar__main { flex: 1 1 auto; min-width: 0; }
.mta-mobilebar__icon { flex: 0 0 52px; padding: 12px 0; }

/* Floating WhatsApp, desktop */
.mta-wa-float {
  position: fixed;
  right: var(--mta-s5);
  bottom: var(--mta-s5);
  z-index: 900;
  width: 56px; height: 56px;
  border-radius: 50%;
  display: flex; align-items: center; justify-content: center;
  background: var(--mta-whatsapp);
  color: #fff;
  box-shadow: 0 3px 14px rgba(20, 32, 26, 0.22);
}
.mta-wa-float svg { width: 28px; height: 28px; fill: currentColor; }

/* =========================================================================
   Forms
   ========================================================================= */

.mta-form { display: grid; gap: var(--mta-s4); }
.mta-form label { display: block; font-size: var(--mta-fs-small); font-weight: 600; margin-bottom: 6px; }
.mta-form label .req { color: var(--mta-error); }
.mta-form input,
.mta-form select,
.mta-form textarea {
  width: 100%;
  min-height: var(--mta-tap);
  padding: 12px 14px;
  font-size: 1rem;              /* 16px stops iOS zooming on focus */
  font-family: var(--mta-font);
  background: var(--mta-surface);
  border: 1px solid var(--mta-line);
  border-radius: var(--mta-radius-sm);
  color: var(--mta-ink);
}
.mta-form textarea { min-height: 130px; resize: vertical; }
.mta-form input:focus,
.mta-form select:focus,
.mta-form textarea:focus { border-color: var(--mta-ochre); }
.mta-form .help { font-size: 0.78rem; color: var(--mta-ink-3); margin: 5px 0 0; }
.mta-form .field-error { font-size: 0.8rem; color: var(--mta-error); margin: 5px 0 0; }

/* =========================================================================
   Breadcrumbs
   ========================================================================= */

.mta-crumbs { font-size: var(--mta-fs-small); color: var(--mta-ink-3); padding: var(--mta-s4) 0; }
.mta-crumbs a { color: var(--mta-ink-2); text-decoration: none; }
.mta-crumbs a:hover { text-decoration: underline; }
.mta-crumbs span[aria-current] { color: var(--mta-ink); }

/* =========================================================================
   Placeholder. Visible where tour content has not arrived yet.
   Deliberately obvious so nothing ships looking finished when it is not.
   ========================================================================= */

.mta-placeholder {
  border: 1px dashed var(--mta-ochre);
  background: var(--mta-ochre-wash);
  border-radius: var(--mta-radius-sm);
  padding: var(--mta-s4);
  font-size: var(--mta-fs-small);
  color: var(--mta-ochre-text);
}
.mta-placeholder strong { display: block; margin-bottom: 4px; }

/* =========================================================================
   Responsive
   ========================================================================= */

@media (max-width: 980px) {
  .mta-tour__layout { grid-template-columns: minmax(0, 1fr); }
  .mta-rail { position: static; }
}

@media (max-width: 780px) {
  .mta-mobilebar { display: flex; }
  .mta-wa-float { display: none; }
  body { padding-bottom: 72px; }

  /* The hero was 480px tall on a phone and the photograph had no room to be
     anything: a slice of an animal behind the words. Giving it most of the
     screen is what every operator worth comparing to does, and it is the one
     place on the site where the photograph is the argument. */
  .mta-hero { min-height: min(78vh, 600px); }
  .mta-hero--tall { min-height: min(80vh, 620px); }
  .mta-hero__inner { padding: var(--mta-s7) var(--mta-s4) var(--mta-s6); }
  .mta-hero__title { max-width: 100%; }

  /* A bottom-weighted gradient is right on a wide hero, where the copy sits
     in the lower third. On a phone the copy runs up the middle of the frame
     and the middle is where that gradient is weakest, so the sub-heading was
     sitting on a zebra's face at about 2:1 contrast. This carries the dark
     further up. Measured against the lightest part of the current
     photographs, the text clears 4.5:1 across the whole block. */
  .mta-scrim::after {
    background: linear-gradient(
      to top,
      rgba(9, 20, 15, 0.86) 0%,
      rgba(9, 20, 15, 0.72) 45%,
      rgba(9, 20, 15, 0.34) 78%,
      rgba(9, 20, 15, 0.16) 100%
    );
  }
}

/* No element may exceed the viewport. Guards against the shape dividers
   that overflowed on the previous build. */
/* Horizontal overflow guard.

   This was `overflow-x: hidden`, which silently broke the sticky header:
   `hidden` on html or body makes body a scroll container, and a sticky child
   then sticks to a box that scrolls with the page, so it does not stick at all.
   Measured: the header scrolled 392px off screen.

   `clip` guards against the same accidental overflow without creating a scroll
   container, so sticky keeps working. Safari before 16 falls back to the first
   declaration; the header simply scrolls there, which is a degradation rather
   than a break. Nothing on this site actually overflows: every template is
   measured at 320, 360, 390, 430, 768, 1024, 1200 and 1600. This is a net, not
   a fix. */
html, body { overflow-x: hidden; max-width: 100%; }
html, body { overflow-x: clip; }
img, svg, video, iframe { max-width: 100%; height: auto; }

/* =========================================================================
   Layout bands
   Sections alternate ground and tint so the page reads as distinct blocks
   without needing borders or shadows.
   ========================================================================= */

.mta-wrap { max-width: var(--mta-maxw); margin: 0 auto; padding: 0 var(--mta-s5); }
.mta-wrap--narrow { max-width: 780px; }

.mta-band { padding: var(--mta-s9) 0; }
.mta-band--tint { background: var(--mta-surface-2); }
.mta-band__title { margin: 0 0 var(--mta-s3); font-size: var(--mta-fs-h2); }
.mta-band__lede { margin: 0 0 var(--mta-s6); color: var(--mta-ink-2); max-width: 60ch; }
.mta-band__more { margin: var(--mta-s6) 0 0; }

.mta-empty {
  border: 1px dashed var(--mta-line);
  border-radius: var(--mta-radius);
  padding: var(--mta-s6);
  text-align: center;
  background: var(--mta-surface);
}
.mta-empty p { margin: 0 auto var(--mta-s4); max-width: 46ch; color: var(--mta-ink-2); }

/* Ghost button, for use over photography */
.mta-btn--ghost {
  background: transparent;
  color: #fff;
  border-color: rgba(255, 255, 255, 0.55);
}
.mta-btn--ghost:hover { background: rgba(255, 255, 255, 0.12); color: #fff; }
.mta-band .mta-btn--ghost { color: var(--mta-ink); border-color: var(--mta-line); }

/* =========================================================================
   Pillars
   ========================================================================= */

.mta-pillar {
  position: relative;
  display: block;
  min-height: 260px;
  border-radius: var(--mta-radius);
  overflow: hidden;
  text-decoration: none;
  background: var(--mta-miombo);
  /* The card is an anchor, so it inherits the parent theme's link colour.
     Every child sets its own colour, but pinning white here means nothing
     can ever fall back to an olive that would be unreadable on the photo. */
  color: #fff;
  isolation: isolate;
}
.mta-pillar__media {
  position: absolute; inset: 0; z-index: 0;
  width: 100%; height: 100%; object-fit: cover;
}
.mta-pillar__body {
  position: relative; z-index: 2;
  display: flex; flex-direction: column; gap: 4px;
  height: 100%; justify-content: flex-end;
  padding: var(--mta-s5);
  min-height: 260px;
  color: #fff;
}
.mta-pillar__title { font-size: 1.15rem; font-weight: 700; }
.mta-pillar__desc { font-size: var(--mta-fs-small); color: rgba(255, 255, 255, 0.88); }
.mta-pillar:hover .mta-pillar__title { text-decoration: underline; }

/* =========================================================================
   Combinations
   ========================================================================= */

.mta-combos { list-style: none; margin: 0; padding: 0; display: grid; gap: var(--mta-s2); }
.mta-combos a {
  display: grid;
  grid-template-columns: minmax(0, 1fr) auto;
  align-items: baseline;
  gap: 2px var(--mta-s4);
  padding: var(--mta-s4) var(--mta-s5);
  min-height: var(--mta-tap);
  background: var(--mta-surface);
  border: 1px solid var(--mta-line);
  border-radius: var(--mta-radius-sm);
  text-decoration: none;
  color: inherit;
}
.mta-combos a:hover { border-color: var(--mta-ochre); }
.mta-combos__name { font-weight: 650; grid-column: 1; }
.mta-combos__note { font-size: var(--mta-fs-small); color: var(--mta-ink-3); grid-column: 1; }
/* The count is the proof the link leads somewhere. It sits on the right on
   both rows so the eye reads name, then how many trips are behind it. */
.mta-combos__count {
  grid-column: 2; grid-row: 1 / -1;
  align-self: center;
  font-size: var(--mta-fs-small);
  font-weight: 600;
  color: var(--mta-ochre-text);
  white-space: nowrap;
}

/* =========================================================================
   Reasons and steps
   ========================================================================= */

.mta-reason h3 { margin: 0 0 var(--mta-s2); }
.mta-reason p { margin: 0; color: var(--mta-ink-2); font-size: 0.95rem; }

/* Four short steps in a wide band left a third of the band empty beneath
   them. The band keeps its rhythm; the steps just stop reserving height they
   do not use. */
.mta-steps { list-style: none; margin: 0; padding: 0; display: grid; gap: var(--mta-s5); }
.mta-band--tight { padding-bottom: clamp(28px, 4vw, 56px); }
.mta-step { display: grid; grid-template-columns: 52px minmax(0, 1fr); gap: var(--mta-s4); align-items: start; }
.mta-step__n {
  font-size: 1.4rem; font-weight: 700; line-height: 1;
  color: var(--mta-ochre-text);
  font-variant-numeric: tabular-nums;
  padding-top: 2px;
}
.mta-step h3 { margin: 0 0 4px; }
.mta-step p { margin: 0; color: var(--mta-ink-2); font-size: 0.95rem; }

@media (min-width: 900px) {
  .mta-steps { grid-template-columns: repeat(4, minmax(0, 1fr)); }
}

/* =========================================================================
   Quick enquiry band
   ========================================================================= */

.mta-quick { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1.15fr); gap: var(--mta-s8); align-items: start; }
.mta-quick__copy h2 { margin: 0 0 var(--mta-s3); }
.mta-quick__copy p { color: var(--mta-ink-2); }
.mta-quick__promise { font-weight: 600; color: var(--mta-ink); }
.mta-quick__form {
  background: var(--mta-surface);
  border: 1px solid var(--mta-line);
  border-radius: var(--mta-radius);
  padding: var(--mta-s6);
}

@media (max-width: 900px) {
  .mta-quick { grid-template-columns: minmax(0, 1fr); gap: var(--mta-s6); }
  .mta-quick__form { padding: var(--mta-s5); }
}

/* =========================================================================
   Closing CTA
   ========================================================================= */

.mta-cta {
  position: relative;
  padding: var(--mta-s9) 0;
  background: var(--mta-miombo-deep);
  color: #fff;
  text-align: center;
}
.mta-cta h2 { color: #fff; margin: 0 0 var(--mta-s3); }
.mta-cta p { color: rgba(255, 255, 255, 0.88); margin: 0 auto var(--mta-s6); max-width: 46ch; }
.mta-cta__actions { display: flex; gap: var(--mta-s3); justify-content: center; flex-wrap: wrap; }

/* =========================================================================
   Form additions
   ========================================================================= */

.mta-field--half { grid-column: span 1; }
.mta-field--full { grid-column: 1 / -1; }
/* Every grid track here is minmax(0, ...), never 1fr on its own.

   A bare `1fr` is `minmax(auto, 1fr)`, and `min-width: auto` stops a grid item
   shrinking below its content's minimum. Measured on the contact page at
   375px: the form column refused to go below 387px and pushed 60px of the page
   off screen, hidden only by the overflow guard. Named here because it is the
   single most common cause of mobile overflow in a grid layout. */
.mta-form__row { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: var(--mta-s4); }
@media (max-width: 620px) { .mta-form__row { grid-template-columns: minmax(0, 1fr); } }
.mta-field, .mta-form__row > * { min-width: 0; }
.mta-form input, .mta-form select, .mta-form textarea { max-width: 100%; }

.mta-form__errors {
  background: #FBE9E6;
  border-left: 3px solid var(--mta-error);
  border-radius: 0 8px 8px 0;
  padding: var(--mta-s3) var(--mta-s4);
  margin-bottom: var(--mta-s4);
}
.mta-form__errors p { margin: 0; font-size: var(--mta-fs-small); color: var(--mta-error); }

.mta-form__consent { font-size: 0.8rem; color: var(--mta-ink-3); margin: var(--mta-s3) 0 0; }
.mta-form__actions { display: flex; gap: var(--mta-s3); flex-wrap: wrap; margin-top: var(--mta-s4); }

/* Honeypot. Removed from the accessibility tree and from view, without
   display:none, which some bots detect and skip. */
.mta-hp {
  position: absolute !important;
  left: -9999px !important;
  width: 1px; height: 1px;
  overflow: hidden;
}

.mta-confirm {
  border: 1px solid var(--mta-whatsapp);
  border-left-width: 3px;
  border-radius: var(--mta-radius);
  background: var(--mta-surface);
  padding: var(--mta-s6);
}
.mta-confirm h3 { margin: 0 0 var(--mta-s3); }
.mta-confirm__actions { display: flex; gap: var(--mta-s3); flex-wrap: wrap; margin-top: var(--mta-s4); }
.mta-confirm__ref {
  margin: 0 0 var(--mta-s4);
  padding: 10px 14px;
  border-radius: var(--mta-radius-sm);
  background: var(--mta-ground);
  font-size: var(--mta-fs-small);
}
.mta-confirm__next {
  list-style: none;
  counter-reset: mta-next;
  margin: var(--mta-s5) 0;
  padding: 0;
  display: grid;
  gap: var(--mta-s4);
}
.mta-confirm__next li {
  counter-increment: mta-next;
  display: grid;
  grid-template-columns: 30px minmax(0, 1fr);
  gap: var(--mta-s3);
  align-items: start;
}
.mta-confirm__next li::before {
  content: counter(mta-next);
  display: flex; align-items: center; justify-content: center;
  width: 28px; height: 28px;
  border-radius: 50%;
  background: var(--mta-ochre-wash);
  color: var(--mta-ochre-text);
  font-size: 0.85rem; font-weight: 700;
}
/* The counter marker is itself a grid item, so the heading and the note both
   have to be told to sit in the second column. Without this the note falls
   into the 28px marker column and wraps one word per line, which is exactly
   how it first rendered. */
.mta-confirm__next strong { grid-column: 2; display: block; font-weight: 650; }
.mta-confirm__next span { grid-column: 2; display: block; font-size: var(--mta-fs-small); color: var(--mta-ink-2); margin-top: 2px; }

/* =========================================================================
   The booking journey

   Three stages: the trip, the plan, the person. The markup carries all three
   at once and the script decides how many are on screen, so a visitor whose
   script failed gets one long working form instead of a dead button. Every
   rule below is written so that state is the thing being styled, never the
   presence of JavaScript.
   ========================================================================= */

.mta-journey { display: grid; gap: var(--mta-s5); }

.mta-journey__subject {
  display: flex; align-items: flex-start; gap: 9px;
  margin: 0;
  padding: 11px 14px;
  border-radius: var(--mta-radius-sm);
  background: var(--mta-ochre-wash);
  color: var(--mta-ink);
  font-size: var(--mta-fs-small);
}
.mta-journey__subject .mta-i { color: var(--mta-ochre-text); flex: 0 0 auto; margin-top: 1px; }

/* ---- Progress rail ---- */
.mta-journey__bar {
  list-style: none;
  margin: 0; padding: 0;
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: var(--mta-s2);
}
.mta-journey__bar[hidden] { display: none; }
.mta-journey__pip {
  display: flex; align-items: center; gap: 9px;
  padding-top: 12px;
  border-top: 3px solid var(--mta-line);
  color: var(--mta-ink-3);
  font-size: var(--mta-fs-small);
  min-width: 0;
}
.mta-journey__pip-n {
  display: flex; align-items: center; justify-content: center;
  flex: 0 0 auto;
  width: 24px; height: 24px;
  border-radius: 50%;
  background: var(--mta-surface-2);
  font-size: 0.78rem; font-weight: 700;
}
.mta-journey__pip-label { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.mta-journey__pip.is-done { border-top-color: var(--mta-ochre); color: var(--mta-ink-2); cursor: pointer; }
.mta-journey__pip.is-done .mta-journey__pip-n { background: var(--mta-ochre-wash); color: var(--mta-ochre-text); }
.mta-journey__pip.is-current { border-top-color: var(--mta-ochre); color: var(--mta-ink); font-weight: 600; }
.mta-journey__pip.is-current .mta-journey__pip-n { background: var(--mta-ochre); color: #fff; }

/* ---- Stages ---- */
.mta-journey__step {
  margin: 0;
  padding: 0;
  border: 0;
  min-width: 0;
}
/* Explicit, because a display rule on the fieldset would otherwise beat the
   browser's own handling of the hidden attribute and leave every stage on
   screen at once. */
.mta-journey__step[hidden] { display: none; }
/* The header is sticky, so a stage scrolled into view lands under it unless
   it is told to keep its distance. */
.mta-journey__step { scroll-margin-top: 150px; }

.mta-journey__legend {
  display: flex; align-items: center; gap: 10px;
  padding: 0;
  margin-bottom: var(--mta-s2);
  font-size: 1.08rem;
  font-weight: 650;
  color: var(--mta-ink);
}
.mta-journey__legend-n {
  display: flex; align-items: center; justify-content: center;
  width: 26px; height: 26px;
  border-radius: 50%;
  background: var(--mta-ochre-wash);
  color: var(--mta-ochre-text);
  font-size: 0.8rem; font-weight: 700;
}
/* On the journey the rail already numbers the stages, so the legend does not
   need to as well. Without the script the numbers are the only ordering the
   visitor gets, which is why they are in the markup at all. */
.mta-journey.is-journey .mta-journey__legend-n { display: none; }

.mta-journey__hint {
  margin: 0 0 var(--mta-s4);
  font-size: var(--mta-fs-small);
  color: var(--mta-ink-3);
}

.mta-journey__nav {
  display: flex; align-items: center; gap: var(--mta-s3);
  margin-top: var(--mta-s5);
  flex-wrap: wrap;
}
.mta-journey__nav[hidden] { display: none; }
.mta-journey__nav .mta-i { margin-left: 7px; }

.mta-journey__end[hidden] { display: none; }
.mta-journey__reassure {
  margin: var(--mta-s3) 0 0;
  font-size: 0.8rem;
  color: var(--mta-ink-3);
}

/* Stages after the first sit below a rule, so a form shown whole still reads
   as three parts rather than one wall of fields. */
.mta-journey:not(.is-journey) .mta-journey__step + .mta-journey__step {
  padding-top: var(--mta-s5);
  border-top: 1px solid var(--mta-line);
}

@media (max-width: 560px) {
  .mta-journey__pip-label { display: none; }
  .mta-journey__bar { gap: var(--mta-s3); }
  .mta-journey__nav .mta-btn { flex: 1 1 auto; justify-content: center; }
}

/* =========================================================================
   Cards, compact variant
   ========================================================================= */

.mta-card--compact .mta-card__media { aspect-ratio: 3 / 2; }
.mta-card--compact .mta-card__body { padding: var(--mta-s3) var(--mta-s4); }

/* =========================================================================
   404 and search
   ========================================================================= */

.mta-404 h1 { margin: var(--mta-s2) 0 var(--mta-s3); font-size: var(--mta-fs-display); }
.mta-404__lede { font-size: 1.05rem; color: var(--mta-ink-2); margin-bottom: var(--mta-s6); }
.mta-404 h2 { margin: var(--mta-s7) 0 var(--mta-s4); font-size: var(--mta-fs-h3); }
.mta-404__search { margin-bottom: var(--mta-s5); }
.mta-404__search input[type="search"],
.mta-404__search input[type="text"] {
  width: 100%; min-height: var(--mta-tap);
  padding: 12px 14px; font-size: 1rem;
  font-family: var(--mta-font);
  border: 1px solid var(--mta-line);
  border-radius: var(--mta-radius-sm);
  background: var(--mta-surface);
}
.mta-404__help {
  margin-top: var(--mta-s8);
  padding: var(--mta-s6);
  background: var(--mta-surface);
  border: 1px solid var(--mta-line);
  border-radius: var(--mta-radius);
}
.mta-404__help h2 { margin-top: 0; }

/* =========================================================================
   Editor-only placeholder. Never rendered for visitors.
   ========================================================================= */

.mta-placeholder { margin: var(--mta-s4) 0; }

/* =========================================================================
   Contact block and footer bar
   ========================================================================= */

.mta-contact__heading { margin: 0 0 var(--mta-s4); }
.mta-contact__list { list-style: none; margin: 0; padding: 0; display: grid; gap: var(--mta-s3); }
.mta-contact__list li {
  display: grid; grid-template-columns: 110px minmax(0, 1fr); gap: var(--mta-s3);
  align-items: baseline; padding-bottom: var(--mta-s3);
  border-bottom: 1px solid var(--mta-line);
}
.mta-contact__list li:last-child { border-bottom: 0; padding-bottom: 0; }
.mta-contact__label {
  font-size: var(--mta-fs-label); font-weight: 600; text-transform: uppercase;
  letter-spacing: 0.09em; color: var(--mta-ink-3);
}
.mta-contact__list a { color: var(--mta-ochre-text); font-weight: 600; overflow-wrap: anywhere; }
.mta-contact--compact .mta-contact__list li { grid-template-columns: minmax(0, 1fr); gap: 2px; }

/* Site footer.

   Replaces the parent theme's footer, which ended with a theme-vendor credit.
   Four columns on desktop, two on tablet, one on mobile. The brand column is
   wider than the link columns because it carries the contact channels, which
   are the reason a visitor scrolls this far.

   Deep miombo ground with high-contrast text: measured 12.6:1 for the body
   text and 6.4:1 for the muted bar text against #12261F, both above WCAG AA.
   ========================================================================= */

.mta-footer {
  background: var(--mta-miombo-deep);
  color: rgba(255,255,255,0.82);
  font-size: var(--mta-fs-small);
}
.mta-footer__in {
  max-width: var(--mta-maxw);
  margin: 0 auto;
  padding: var(--mta-s7) var(--mta-s5) var(--mta-s6);
  display: grid;
  grid-template-columns: minmax(0, 1.6fr) minmax(0, 1fr) minmax(0, 1fr) minmax(0, 1fr);
  gap: var(--mta-s6) var(--mta-s5);
}

.mta-footer__name {
  margin: 0 0 var(--mta-s2);
  font-size: 1.0625rem;
  font-weight: 700;
  color: #fff;
  letter-spacing: -0.01em;
}
.mta-footer__blurb {
  margin: 0 0 var(--mta-s4);
  max-width: 42ch;
  line-height: 1.6;
  color: rgba(255,255,255,0.72);
}

.mta-footer__h {
  margin: 0 0 var(--mta-s3);
  font-size: var(--mta-fs-label);
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: 0.09em;
  color: rgba(255,255,255,0.55);
}

.mta-footer__col ul,
.mta-footer__contact,
.mta-footer__social {
  list-style: none;
  margin: 0;
  padding: 0;
  display: grid;
  gap: var(--mta-s2);
}
.mta-footer__social { grid-auto-flow: column; justify-content: start; gap: var(--mta-s4); margin-top: var(--mta-s4); }

.mta-footer a {
  color: rgba(255,255,255,0.82);
  text-decoration: none;
  display: inline-flex;
  align-items: center;
  gap: 8px;
}
.mta-footer a:hover,
.mta-footer a:focus-visible { color: #fff; text-decoration: underline; }
.mta-footer .mta-i { opacity: 0.7; }
.mta-footer__place { display: inline-flex; align-items: center; gap: 8px; color: rgba(255,255,255,0.66); }

/* Bottom bar: ownership and registration, separated by a hairline. */
.mta-footer__bar { border-top: 1px solid rgba(255,255,255,0.14); }
.mta-footer__bar-in {
  max-width: var(--mta-maxw);
  margin: 0 auto;
  padding: var(--mta-s4) var(--mta-s5);
  display: flex;
  justify-content: space-between;
  align-items: center;
  gap: var(--mta-s4);
  flex-wrap: wrap;
  color: rgba(255,255,255,0.6);
}
.mta-footer__copy,
.mta-footer__reg { margin: 0; }
.mta-footer__reg { display: inline-flex; align-items: center; gap: 8px; }

@media (max-width: 1024px) {
  .mta-footer__in { grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); }
  .mta-footer__brand { grid-column: 1 / -1; }
}
/* Phones keep two link columns. Stacking all four into one made the footer
   1300px tall, close to two screens of scrolling past navigation the visitor
   has already decided not to use. Two columns halve that; the longest name,
   "Lake Manyara National Park", wraps to two lines, which is fine in a
   footer list and costs far less than the height it saves. */
@media (max-width: 560px) {
  .mta-footer__in { grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); padding: var(--mta-s6) var(--mta-s4) var(--mta-s5); gap: var(--mta-s5) var(--mta-s4); }
  .mta-footer__bar-in { flex-direction: column; align-items: flex-start; gap: var(--mta-s2); padding: var(--mta-s4); }
}
@media (max-width: 380px) {
  .mta-footer__in { grid-template-columns: minmax(0, 1fr); }
}
@media (max-width: 780px) {
  .mta-footer { margin-bottom: 72px; }  /* clear the fixed mobile CTA bar */

  /* Thumb targets. At the desktop rhythm each footer link occupied a 31px
     row, which is a miss waiting to happen on a phone. Padding grows the hit
     area itself rather than only the spacing between links. */
  .mta-footer__col ul,
  .mta-footer__contact { gap: var(--mta-s1); }
  .mta-footer__col li a,
  .mta-footer__contact li a,
  .mta-footer__social li a { padding: 9px 0; }
  .mta-footer__place { padding: 9px 0; }
}


/* =========================================================================
   Icons

   Inline SVG, 24 x 24, stroked in currentColor. No emoji anywhere on this
   site and no icon font: emoji render differently on every device and carry
   no accessible name, an icon font costs a request and flashes before it
   loads. See inc/icons.php.

   Every icon inherits the colour of its parent, so a single rule here
   governs how icons behave in buttons, lists, labels and headings.
   ========================================================================= */

.mta-i {
  display: inline-block;
  vertical-align: -0.16em;
  flex: 0 0 auto;
  overflow: visible;
}

/* Buttons: icon sits before the label, optically centred. */
.mta-btn { display: inline-flex; align-items: center; justify-content: center; gap: 8px; }
.mta-btn .mta-i { vertical-align: 0; }

/* Quick facts. The icon reinforces the label, it does not replace it. */
.mta-facts dt { display: flex; align-items: center; gap: 7px; }
.mta-facts dt .mta-i { color: var(--mta-ochre-text); }

/* Accordion chevron, on the itinerary and the FAQ. */
.mta-day > summary { align-items: center; }
.mta-day__chevron {
  margin-left: auto;
  color: var(--mta-ink-3);
  transition: transform 160ms ease;
}
.mta-day[open] > summary .mta-day__chevron { transform: rotate(180deg); }

/* Card action. The arrow moves on hover, which is the only motion here. */
.mta-card__cta { display: inline-flex; align-items: center; gap: 6px; }
.mta-card__cta .mta-i { transition: transform 160ms ease; }
.mta-card:hover .mta-card__cta .mta-i { transform: translateX(3px); }

/* Contact rows and the footer bar. */
.mta-contact__label { display: inline-flex; align-items: center; gap: 7px; }
.mta-contact__label .mta-i { color: var(--mta-ochre-text); }
.mta-footbar a,
.mta-footbar__reg { display: inline-flex; align-items: center; gap: 7px; }
.mta-footbar .mta-i { opacity: 0.72; }

/* Why travel with us. A quiet tinted badge, not a coloured circle. */
.mta-reason__icon {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 44px; height: 44px;
  margin-bottom: var(--mta-s3);
  border-radius: 12px;
  background: var(--mta-ground);
  border: 1px solid var(--mta-line);
  color: var(--mta-miombo);
}

@media (prefers-reduced-motion: reduce) {
  .mta-day__chevron,
  .mta-card__cta .mta-i { transition: none; }
  .mta-card:hover .mta-card__cta .mta-i { transform: none; }
}


/* Destinations hub.

   The hero here carries no photograph, because a hub that groups seven parks
   has no single image that honestly represents it. A shorter tinted band
   keeps the page from opening with an empty picture frame.
   ========================================================================= */

.mta-hero--short {
  min-height: 0;
  background: var(--mta-ground);
  border-bottom: 1px solid var(--mta-line);
}
.mta-hero--short .mta-hero__inner { padding: var(--mta-s7) var(--mta-s4); }
.mta-hero--short .mta-hero__title { color: var(--mta-ink); }
.mta-hero--short .mta-hero__sub { color: var(--mta-ink-2); }
.mta-hero--short .mta-hero__eyebrow { color: var(--mta-ochre-text); }
.mta-hero--short .mta-btn--ghost {
  color: var(--mta-ink);
  border-color: var(--mta-line-strong, var(--mta-line));
}
.mta-hero--short .mta-btn--ghost:hover { border-color: var(--mta-ochre); color: var(--mta-ochre-text); }

/* Cards built from spans rather than divs, so they can sit inside an anchor. */
.mta-card__body > span { display: block; }
.mta-card__body > .mta-card__foot { display: flex; }


/* =========================================================================
   Card with no photograph.

   Two destinations have no image that genuinely shows them, and substituting
   a picture of a different park would be a small lie in a business built on
   trust. So the card states what it is instead of pretending.

   It holds the same 4:3 box as a photograph, so a grid mixing both stays
   even, and it reads as a design choice rather than a failed image: no broken
   icon, no grey rectangle, no stock photograph. The tinted ground uses the
   brand greens at low contrast so the cards beside it keep the attention.
   ========================================================================= */

.mta-card__media--none {
  aspect-ratio: 4 / 3;
  width: 100%;
  display: flex;
  align-items: center;
  justify-content: center;
  background:
    radial-gradient(120% 90% at 50% 0%, rgba(13, 90, 86, 0.10) 0%, rgba(13, 90, 86, 0) 60%),
    var(--mta-ground);
  border-bottom: 1px solid var(--mta-line);
}
.mta-card--compact .mta-card__media--none { aspect-ratio: 3 / 2; }

.mta-card__ph {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 6px;
  padding: var(--mta-s4);
  text-align: center;
  color: var(--mta-miombo);
}
.mta-card__ph .mta-i { opacity: 0.45; }
.mta-card__ph-label {
  font-size: var(--mta-fs-label);
  font-weight: 600;
  text-transform: uppercase;
  letter-spacing: 0.09em;
  color: var(--mta-ink-3);
}


/* No lift on hover for a card with no photograph. The movement reads as a
   promise of something to look at, and there is nothing there yet. */
.mta-card:has(.mta-card__media--none):hover { transform: none; }


/* Long-form prose inside a designed template. Kadence styles the editor's own
   output; this matches it for text the theme renders itself. */
.mta-prose p { margin: 0 0 var(--mta-s4); color: var(--mta-ink-2); }
.mta-prose p:last-child { margin-bottom: 0; }
.mta-prose h3 { margin: var(--mta-s5) 0 var(--mta-s2); }

/* The opening paragraph of a page of prose. One step up in size and one step
   darker, so the eye has somewhere to land before the body starts. */
/* Written at (0,2,1) on purpose: `.mta-prose p` is (0,1,1) and would
   otherwise win the colour and the margin, and the rule would look correct
   in the file while changing nothing on the page. */
.mta-prose p.mta-prose__lead {
  font-size: clamp(1.1rem, 1.6vw, 1.28rem);
  line-height: 1.55;
  color: var(--mta-ink);
  font-weight: 500;
  margin-bottom: var(--mta-s5);
}


/* =========================================================================
   Travel Guide

   The index leads with topics rather than with the newest post, because a
   visitor here has a question, not a subscription. A topic tile is a link
   when it has articles and plain text when it does not, so the structure is
   visible while it fills without offering a click that leads nowhere.
   ========================================================================= */

.mta-topic {
  display: flex;
  flex-direction: column;
  gap: var(--mta-s2);
  padding: var(--mta-s5);
  background: var(--mta-surface);
  border: 1px solid var(--mta-line);
  border-radius: var(--mta-radius);
  text-decoration: none;
  transition: border-color 0.14s ease, transform 0.14s ease;
}
a.mta-topic:hover { border-color: var(--mta-miombo-soft); transform: translateY(-2px); }

.mta-topic__name { font-size: var(--mta-fs-h3); font-weight: 650; color: var(--mta-ink); }
.mta-topic__desc { color: var(--mta-ink-2); font-size: var(--mta-fs-small); line-height: 1.55; }
.mta-topic__count {
  margin-top: auto; padding-top: var(--mta-s3);
  display: inline-flex; align-items: center; gap: 6px;
  font-size: var(--mta-fs-label); font-weight: 700;
  text-transform: uppercase; letter-spacing: 0.09em;
  color: var(--mta-ochre-text);
}
a.mta-topic:hover .mta-topic__count .mta-i { transform: translateX(3px); }
.mta-topic__count .mta-i { transition: transform 160ms ease; }

/* A topic with nothing in it yet. Quiet, and deliberately not a link. */
.mta-topic--empty { background: transparent; border-style: dashed; }
.mta-topic--empty .mta-topic__name { color: var(--mta-ink-2); }
.mta-topic__count--soon { color: var(--mta-ink-3); }

/* Article. A single measured column: the body is prose, not a layout. */
.mta-article__head { padding: var(--mta-s7) 0 var(--mta-s5); }
.mta-article__cat {
  margin: 0 0 var(--mta-s3);
  font-size: var(--mta-fs-label); font-weight: 700;
  text-transform: uppercase; letter-spacing: 0.09em;
}
.mta-article__cat a { color: var(--mta-ochre-text); text-decoration: none; }
.mta-article__cat a:hover { text-decoration: underline; }
.mta-article__title { margin: 0 0 var(--mta-s4); font-size: var(--mta-fs-display); }
.mta-article__standfirst {
  margin: 0 0 var(--mta-s4);
  font-size: 1.125rem; line-height: 1.55; color: var(--mta-ink-2);
}
.mta-article__meta {
  display: flex; flex-wrap: wrap; gap: var(--mta-s5);
  margin: 0; font-size: var(--mta-fs-small); color: var(--mta-ink-3);
}
.mta-article__meta span { display: inline-flex; align-items: center; gap: 7px; }

.mta-article__figure { margin: 0 0 var(--mta-s6); }
.mta-article__img { display: block; width: 100%; height: auto; }
.mta-article__figure figcaption {
  max-width: var(--mta-maxw); margin: var(--mta-s2) auto 0;
  padding: 0 var(--mta-s5);
  font-size: var(--mta-fs-small); color: var(--mta-ink-3);
}
.mta-article__body { padding-bottom: var(--mta-s7); }
.mta-article__body h2 { margin: var(--mta-s7) 0 var(--mta-s3); }
.mta-article__body h3 { margin: var(--mta-s6) 0 var(--mta-s2); }
.mta-article__body ul,
.mta-article__body ol { margin: 0 0 var(--mta-s4); padding-left: 1.3em; color: var(--mta-ink-2); }
.mta-article__body li { margin-bottom: var(--mta-s2); }
.mta-article__body img { height: auto; border-radius: var(--mta-radius); }
.mta-article__body blockquote {
  margin: var(--mta-s5) 0; padding: var(--mta-s2) 0 var(--mta-s2) var(--mta-s5);
  border-left: 3px solid var(--mta-ochre); color: var(--mta-ink-2);
}

/* Archive pagination. */
/* paginate_links() returns bare anchors with no .nav-links wrapper, while
   the_posts_pagination() wraps them. Flexing the container itself covers both:
   the wrapped variant flexes as a single child and keeps its own rule below. */
.mta-pagination { margin-top: var(--mta-s6); display: flex; flex-wrap: wrap; gap: var(--mta-s2); }
.mta-pagination .nav-links { display: flex; flex-wrap: wrap; gap: var(--mta-s2); }
.mta-pagination .page-numbers {
  display: inline-flex; align-items: center; justify-content: center;
  min-width: var(--mta-tap); min-height: var(--mta-tap);
  padding: 0 var(--mta-s3);
  border: 1px solid var(--mta-line); border-radius: var(--mta-radius-sm);
  background: var(--mta-surface); color: var(--mta-ink);
  text-decoration: none; font-weight: 600;
}
.mta-pagination .page-numbers:hover { border-color: var(--mta-ink-3); }
.mta-pagination .page-numbers.current {
  background: var(--mta-miombo); border-color: var(--mta-miombo); color: #fff;
}


/* =========================================================================
   Header and primary navigation

   Replaces the parent theme's header. Two rows on desktop, on the pattern
   the owner asked for: a 42px utility strip carrying the positioning line
   and the direct contact routes, then an 84px bar with the logo left, the
   categories centred in small uppercase type, and one pill action right.
   The bar shrinks to 68px once stuck; the strip is desktop only, so a phone
   gets a single 68px row and nothing else.

   The arrangement is Altezza's. The colours, the type, the words and the
   photography are this site's own. Nothing is lifted from their code.

   The WhatsApp button was removed from the bar at the owner's instruction.
   The floating bubble and the drawer still carry it, so no contact route
   was lost; the bar simply stopped offering three actions at once.
   ========================================================================= */

.mta-header {
  position: sticky;
  top: 0;
  z-index: 100;
  background: var(--mta-surface);
  border-bottom: 1px solid var(--mta-line);
}
body.admin-bar .mta-header { top: 32px; }
@media (max-width: 782px) {
  body.admin-bar .mta-header { top: 46px; }
}

/* ---- Utility strip ----------------------------------------------------
   The thin row above the bar. It carries the one true positioning line and
   the direct contact routes, so the bar below is left with a single action
   and does not have to argue with itself. Desktop only: below 1024px the
   drawer carries all of this, and a phone screen has no room to spend on a
   second row of chrome. */
.mta-header__strip {
  background: var(--mta-ground);
  border-bottom: 1px solid var(--mta-line);
  font-size: 0.8125rem;
}
.mta-header__strip-in {
  max-width: 1560px;
  margin: 0 auto;
  padding: 0 var(--mta-s5);
  height: 42px;
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: var(--mta-s4);
}
.mta-header__claim {
  margin: 0;
  min-width: 0;
  color: var(--mta-ink-2);
  font-weight: 500;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}
.mta-header__strip-links {
  flex: 0 0 auto;
  display: flex;
  align-items: center;
  gap: var(--mta-s5);
}
.mta-header__strip-link {
  display: inline-flex; align-items: center; gap: 7px;
  color: var(--mta-ink-2);
  font-weight: 550;
  text-decoration: none;
  white-space: nowrap;
}
.mta-header__strip-link:hover { color: var(--mta-ochre-text); }
.mta-header__strip-link .mta-i { color: var(--mta-ink-3); }
.mta-header__strip-link:hover .mta-i { color: var(--mta-ochre-text); }
.mta-header__strip-search {
  display: inline-flex; align-items: center; justify-content: center;
  width: 34px; height: 34px;
  padding: 0; border: 0; border-radius: 50%;
  background: none; color: var(--mta-ink-2); cursor: pointer;
}
.mta-header__strip-search:hover { background: var(--mta-surface-2); color: var(--mta-ochre-text); }

.mta-header__in {
  /* Wider than the content measure on purpose. Measured: logo 175px, seven
     nav items 640px and the action group cannot fit inside the 1180px
     content column; at 1180 the navigation overflowed and was silently
     clipped by the overflow guard. The header is chrome, not prose, so it
     is allowed its own wider frame. */
  max-width: 1560px;
  margin: 0 auto;
  padding: 0 var(--mta-s5);
  height: 84px;
  display: flex;
  align-items: center;
  gap: var(--mta-s4);
  transition: height 0.16s ease;
}
.mta-header.is-stuck .mta-header__in { height: 68px; }
.mta-header.is-stuck { box-shadow: 0 2px 10px rgba(20, 32, 26, 0.07); }

/* min-height keeps the tap target at 44px even when the mark shrinks to 34px
   on a scrolled phone header. The image gets smaller; the thing you press
   does not. */
.mta-header__logo { display: flex; align-items: center; flex: 0 0 auto; min-height: 44px; text-decoration: none; font-weight: 700; color: var(--mta-ink); }
.mta-header__logo-img {
  display: block;
  width: auto;
  height: 46px;
  max-width: 190px;
  object-fit: contain;
  transition: height 0.16s ease;
}
.mta-header.is-stuck .mta-header__logo-img { height: 38px; }

/* Navigation */
/* justify-content: center was centring a list that is wider than its column,
   so the overflow spilled equally in both directions and the first item ran
   over the logo while the last ran under the WhatsApp button. Measured at
   1440px: the list needs 880px and the column offers 759. Centring only ever
   looks right while the content fits, so the list is packed from the start
   and the sizes below make it fit. */
.mta-nav { flex: 1 1 auto; display: flex; justify-content: center; min-width: 0; }
.mta-nav__list { flex-wrap: nowrap; max-width: 100%; }
.mta-nav__list {
  display: flex; align-items: center; gap: 0;
  list-style: none; margin: 0; padding: 0;
}
.mta-nav__list > li { position: relative; }
.mta-nav__list > li > a {
  position: relative;
  display: inline-flex; align-items: center;
  padding: 12px 14px;
  font-size: 0.875rem; font-weight: 600;
  text-transform: uppercase; letter-spacing: 0.015em;
  color: var(--mta-ink); text-decoration: none;
  white-space: nowrap;
}
.mta-nav__list > li > a:hover { color: var(--mta-ochre-text); }

/* The current section carries a rule under it rather than only a colour
   change. Colour alone is a weak signal at 14px and fails for anyone who
   cannot separate the two hues. */
.mta-nav__list > li > a::after {
  content: "";
  position: absolute;
  left: 14px; right: 14px; bottom: 2px;
  height: 3px; border-radius: 2px;
  background: var(--mta-ochre);
  opacity: 0;
  transition: opacity 0.14s ease;
}
.mta-nav__list > .current-menu-item > a,
.mta-nav__list > .current-menu-ancestor > a,
.mta-nav__list > .current_page_item > a { color: var(--mta-ochre-text); }
.mta-nav__list > .current-menu-item > a::after,
.mta-nav__list > .current-menu-ancestor > a::after,
.mta-nav__list > .current_page_item > a::after { opacity: 1; }

/* Submenu toggle, injected by header.js only where children exist. */
.mta-nav__toggle {
  display: inline-flex; align-items: center; justify-content: center;
  width: 26px; height: 26px; margin-left: -6px;
  padding: 0; border: 0; background: none; cursor: pointer;
  color: var(--mta-ink-3);
}
.mta-nav__toggle .mta-i { transition: transform 160ms ease; }
.mta-nav__list > li.is-open > .mta-nav__toggle .mta-i { transform: rotate(180deg); }

.mta-nav__list .sub-menu {
  position: absolute; top: calc(100% + 6px); left: 0; z-index: 20;
  min-width: 230px; padding: var(--mta-s2);
  list-style: none; margin: 0;
  background: var(--mta-surface);
  border: 1px solid var(--mta-line);
  border-radius: var(--mta-radius);
  box-shadow: 0 10px 28px rgba(20, 32, 26, 0.12);
  opacity: 0; visibility: hidden; transform: translateY(-4px);
  transition: opacity 0.14s ease, transform 0.14s ease, visibility 0.14s;
}
.mta-nav__list > li:hover > .sub-menu,
.mta-nav__list > li:focus-within > .sub-menu,
.mta-nav__list > li.is-open > .sub-menu {
  opacity: 1; visibility: visible; transform: translateY(0);
}
.mta-nav__list .sub-menu a {
  display: block; padding: 10px 12px;
  border-radius: var(--mta-radius-sm);
  font-size: 0.9375rem; color: var(--mta-ink); text-decoration: none;
}
.mta-nav__list .sub-menu a:hover { background: var(--mta-ground); color: var(--mta-ochre-text); }

/* Header actions. One button. The WhatsApp button was removed from the bar
   at the owner's instruction; WhatsApp is still one tap away from the
   floating bubble on every page and from the drawer. */
.mta-header__actions { flex: 0 0 auto; display: flex; align-items: center; gap: var(--mta-s3); }

.mta-btn--sm { min-height: 42px; padding: 9px 16px; font-size: 0.9rem; }
.mta-btn--pill { border-radius: 12px; gap: 9px; white-space: nowrap; }
.mta-header__actions .mta-btn--pill { min-height: 48px; padding: 11px 22px; font-size: 1rem; }

/* Mobile controls, hidden on desktop */
.mta-header__mobile { display: none; margin-left: auto; align-items: center; gap: var(--mta-s2); }
.mta-header__icon {
  display: inline-flex; align-items: center; justify-content: center;
  width: var(--mta-tap); height: var(--mta-tap);
  border-radius: var(--mta-radius-sm); text-decoration: none;
}

.mta-header__burger {
  display: inline-flex; align-items: center; justify-content: center;
  width: var(--mta-tap); height: var(--mta-tap);
  padding: 0; border: 1px solid var(--mta-line);
  border-radius: var(--mta-radius-sm);
  background: var(--mta-surface); cursor: pointer;
}
.mta-burger { display: block; width: 20px; }
.mta-burger span {
  display: block; height: 2px; margin: 4px 0;
  background: var(--mta-ink); border-radius: 2px;
}

/* Progressive header, measured rather than guessed.

   Measured, not guessed. The navigation list is 641px wide at seven items.
   With the logo (175px), the action group and the gaps, it fits from 1240px
   without the phone number and from 1400px with it. Below 1240px the
   navigation becomes the drawer. A visitor who wants to call still has the
   number in the footer, on the contact page and in the drawer. */
@media (max-width: 1279px) {
  .mta-header__strip-link[href^="mailto"] { display: none; }
}
@media (max-width: 1023px) {
  .mta-header__strip { display: none; }
}

/* -------------------------------------------------------------------------
   Headroom for the bar, whatever the labels say.

   The nav is centred, so when the list is wider than its column the overflow
   spills in both directions and covers the logo on one side and the action
   buttons on the other. That is what happened when the bar briefly carried
   eight items: measured at 1440px, the list needed 880px and had 759.

   The bar is back to seven items, which fit. These two steps are the margin
   of safety, so a longer label or a wider action group tightens the bar
   rather than breaking it. Selectors match the base rule's specificity: the
   size is set on `.mta-nav__list > li > a`, so a rule written against
   `.mta-nav__link` alone loses to it and silently changes nothing.
   ------------------------------------------------------------------------- */
@media (max-width: 1399px) {
  .mta-nav__list > li > a { padding: 12px 11px; }
  .mta-nav__list > li > a::after { left: 11px; right: 11px; }
  .mta-header__actions .mta-btn--pill { padding: 11px 18px; }
}

@media (max-width: 1279px) {
  .mta-nav__list > li > a { font-size: 0.8125rem; padding: 12px 8px; }
  .mta-nav__list > li > a::after { left: 8px; right: 8px; }
  .mta-header__in { gap: var(--mta-s3); }
}

@media (max-width: 1119px) {
  .mta-nav,
  .mta-header__actions { display: none; }
  .mta-header__mobile { display: flex; }
  /* Measured live at 375px: the pill inherited .mta-btn--sm's 42px, under the
     44px a thumb needs. The burger beside it is 48px; the action a visitor is
     meant to press should not be the smaller of the two. */
  .mta-header__mobile .mta-btn--pill { min-height: 44px; }
}
@media (max-width: 560px) {
  .mta-header__in { padding: 0 var(--mta-s4); height: 68px; }
  .mta-header.is-stuck .mta-header__in { height: 60px; }
  .mta-header__logo-img { height: 38px; max-width: 148px; }
  .mta-header.is-stuck .mta-header__logo-img { height: 34px; }
  .mta-header__mobile .mta-btn--pill { padding: 9px 13px; font-size: 0.85rem; }
}
/* Narrow phones: the envelope goes before the words do. An icon-only pill
   reads as an unlabelled button; "Plan my trip" is the whole point of it. */
@media (max-width: 400px) {
  .mta-header__mobile .mta-btn--pill .mta-i { display: none; }
  .mta-header__mobile .mta-btn--pill { padding: 9px 11px; font-size: 0.8rem; }
}
@media (max-width: 360px) {
  .mta-header__logo-img { max-width: 118px; }
}

/* Mobile drawer */
.mta-drawer {
  position: fixed; inset: 0; z-index: 200;
  background: rgba(9, 20, 15, 0.5);
  opacity: 0; transition: opacity 0.2s ease;
}
.mta-drawer.is-open { opacity: 1; }
html.mta-drawer-open { overflow: hidden; }

.mta-drawer__panel {
  position: absolute; inset: 0 0 0 auto;
  width: min(400px, 92vw); height: 100%;
  display: flex; flex-direction: column;
  background: var(--mta-surface);
  transform: translateX(100%);
  transition: transform 0.2s ease;
  overflow-y: auto;
}
.mta-drawer.is-open .mta-drawer__panel { transform: translateX(0); }

.mta-drawer__top {
  display: flex; align-items: center; justify-content: space-between;
  padding: var(--mta-s4) var(--mta-s5);
  border-bottom: 1px solid var(--mta-line);
}
.mta-drawer__title {
  font-size: var(--mta-fs-label); font-weight: 700;
  text-transform: uppercase; letter-spacing: 0.09em; color: var(--mta-ink-3);
}
.mta-drawer__close {
  display: inline-flex; align-items: center; justify-content: center;
  width: var(--mta-tap); height: var(--mta-tap); margin-right: -10px;
  padding: 0; border: 0; background: none; cursor: pointer; color: var(--mta-ink);
}

.mta-drawer__nav { padding: var(--mta-s3) var(--mta-s4); }
.mta-drawer__list, .mta-drawer__list .sub-menu { list-style: none; margin: 0; padding: 0; }
.mta-drawer__list > li { border-bottom: 1px solid var(--mta-line); position: relative; }
.mta-drawer__list > li:last-child { border-bottom: 0; }
.mta-drawer__list a {
  display: block; padding: 14px 8px;
  font-size: 1.0625rem; font-weight: 550;
  color: var(--mta-ink); text-decoration: none;
}
.mta-drawer__list > .current-menu-item > a,
.mta-drawer__list > .current_page_item > a { color: var(--mta-ochre-text); font-weight: 650; }
.mta-drawer__list .mta-nav__toggle {
  position: absolute; top: 6px; right: 0;
  width: var(--mta-tap); height: var(--mta-tap); margin: 0;
}
.mta-drawer__list .sub-menu {
  display: none;
  padding: 0 0 var(--mta-s2) var(--mta-s4);
  border-left: 2px solid var(--mta-line);
  margin-left: 8px;
}
.mta-drawer__list > li.is-open > .sub-menu { display: block; }
.mta-drawer__list .sub-menu a { padding: 11px 8px; font-size: 1rem; color: var(--mta-ink-2); }

.mta-drawer__actions {
  margin-top: auto;
  display: grid; gap: var(--mta-s3);
  padding: var(--mta-s5) var(--mta-s4) calc(var(--mta-s5) + env(safe-area-inset-bottom));
  border-top: 1px solid var(--mta-line);
}
.mta-drawer__contact {
  display: inline-flex; align-items: center; gap: 10px;
  min-height: var(--mta-tap);
  font-weight: 600; color: var(--mta-ink); text-decoration: none;
}
.mta-drawer__contact .mta-i { color: var(--mta-ink-3); }

@media (prefers-reduced-motion: reduce) {
  .mta-drawer, .mta-drawer__panel, .mta-header__in, .mta-header__logo-img,
  .mta-nav__list .sub-menu, .mta-nav__toggle .mta-i { transition: none; }
}


/* =========================================================================
   Plan Your Trip and Contact

   Form first and full-width on a phone, form plus a reassurance column on
   desktop. The form is never pushed below the fold by copy, because this is
   the page every button on the site points at.
   ========================================================================= */

.mta-plan__form, .mta-plan__side { min-width: 0; }
.mta-plan {
  display: grid;
  grid-template-columns: minmax(0, 1.35fr) minmax(0, 1fr);
  gap: var(--mta-s7);
  align-items: start;
}
.mta-plan__side {
  padding: var(--mta-s5);
  background: var(--mta-surface);
  border: 1px solid var(--mta-line);
  border-radius: var(--mta-radius);
}
.mta-plan__h {
  margin: 0 0 var(--mta-s4);
  font-size: var(--mta-fs-h3);
  font-weight: 650;
}
.mta-plan__steps { list-style: none; margin: 0 0 var(--mta-s5); padding: 0; display: grid; gap: var(--mta-s4); }
.mta-plan__steps li { display: grid; grid-template-columns: 34px minmax(0, 1fr); gap: var(--mta-s3); }
.mta-plan__n {
  font-size: var(--mta-fs-label); font-weight: 700;
  letter-spacing: 0.06em; color: var(--mta-ochre-text);
  padding-top: 2px;
}
.mta-plan__steps h3 { margin: 0 0 2px; font-size: 1rem; }
.mta-plan__steps p { margin: 0; font-size: var(--mta-fs-small); color: var(--mta-ink-2); }

.mta-plan__promise {
  display: flex; align-items: center; gap: 9px;
  margin: 0 0 var(--mta-s5); padding: var(--mta-s3) var(--mta-s4);
  background: var(--mta-ochre-wash);
  border-radius: var(--mta-radius-sm);
  font-size: var(--mta-fs-small); font-weight: 600; color: var(--mta-ochre-text);
}
.mta-plan__promise .mta-i { flex: 0 0 auto; }

.mta-plan__alt { padding-top: var(--mta-s5); border-top: 1px solid var(--mta-line); }

@media (max-width: 900px) {
  .mta-plan { grid-template-columns: minmax(0, 1fr); gap: var(--mta-s6); }
}


/* =========================================================================
   Trust strip and reviews
   ========================================================================= */

.mta-trust {
  background: var(--mta-surface);
  border-bottom: 1px solid var(--mta-line);
}
.mta-trust__in {
  display: grid;
  grid-template-columns: repeat(4, minmax(0, 1fr));
  gap: var(--mta-s5);
  padding-top: var(--mta-s5);
  padding-bottom: var(--mta-s5);
}
.mta-trust__item { display: flex; gap: var(--mta-s3); align-items: flex-start; }
.mta-trust__item .mta-i { flex: 0 0 auto; margin-top: 2px; color: var(--mta-miombo); }
.mta-trust__t { display: block; font-weight: 650; font-size: 0.9375rem; color: var(--mta-ink); }
.mta-trust__d { display: block; font-size: var(--mta-fs-small); line-height: 1.5; color: var(--mta-ink-2); }

@media (max-width: 900px) { .mta-trust__in { grid-template-columns: repeat(2, minmax(0, 1fr)); } }
@media (max-width: 520px) { .mta-trust__in { grid-template-columns: minmax(0, 1fr); gap: var(--mta-s4); } }

.mta-review {
  display: flex; flex-direction: column; gap: var(--mta-s3);
  margin: 0; padding: var(--mta-s5);
  background: var(--mta-surface);
  border: 1px solid var(--mta-line);
  border-radius: var(--mta-radius);
}
.mta-review__rating { display: flex; gap: 3px; color: var(--mta-ochre); }
.mta-review__title { margin: 0; font-weight: 650; color: var(--mta-ink); }
.mta-review__text {
  margin: 0; padding: 0; border: 0;
  color: var(--mta-ink-2); line-height: 1.6;
}
.mta-review__by {
  margin-top: auto; padding-top: var(--mta-s3);
  border-top: 1px solid var(--mta-line);
  display: grid; gap: 4px;
}
.mta-review__name { font-weight: 650; font-size: 0.9375rem; }
.mta-review__meta {
  display: flex; flex-wrap: wrap; gap: var(--mta-s3);
  font-size: var(--mta-fs-small); color: var(--mta-ink-3);
}
.mta-review__meta a { display: inline-flex; align-items: center; gap: 5px; color: var(--mta-ochre-text); font-weight: 600; }
.mta-plan__link { margin: 0 0 var(--mta-s5); }
.mta-plan__link a { display: inline-flex; align-items: center; gap: 6px; color: var(--mta-ochre-text); font-weight: 600; text-decoration: none; }
.mta-plan__link a:hover { text-decoration: underline; }


/* Price block. The owner asked for "Starts from / <amount> / per person",
   which is also how the reference operators present a from-price: the lead-in
   is small, the number carries the weight, and the qualifier sits under it so
   nobody reads the figure as a total. */
.mta-card__price,
.mta-rail__price { display: flex; flex-direction: column; line-height: 1.25; }
.mta-card__price-lead,
.mta-rail__price-lead { font-weight: 600; }
.mta-card__price-amt,
.mta-rail__price-amt { font-size: 1.25rem; font-weight: 700; letter-spacing: -0.015em; color: var(--mta-ink); }
.mta-rail__price-amt { font-size: 1.6rem; }
.mta-card__price small,
.mta-rail__price small { font-size: var(--mta-fs-label); font-weight: 600; text-transform: uppercase; letter-spacing: 0.07em; color: var(--mta-ink-3); }

/* -------------------------------------------------------------------------
   Consent notice

   A slim bar, not a wall. It sits at the foot of the viewport, never covers
   the content it interrupts on a phone, and both choices are the same size
   so declining is as easy as accepting. It exists only when analytics is
   actually configured.
   ------------------------------------------------------------------------- */
.mta-consent {
  position: fixed;
  left: 0; right: 0; bottom: 0;
  z-index: 90;
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  justify-content: center;
  gap: var(--mta-s4);
  padding: var(--mta-s4) var(--mta-s5);
  background: #fff;
  border-top: 1px solid var(--mta-line);
  box-shadow: 0 -6px 24px rgba(20, 32, 26, 0.10);
}
.mta-consent__text {
  margin: 0;
  font-size: var(--mta-fs-small);
  color: var(--mta-ink-2);
  max-width: 62ch;
}
.mta-consent__text a { color: var(--mta-ochre-text); }
.mta-consent__actions {
  display: flex;
  gap: var(--mta-s3);
  flex-shrink: 0;
}
.mta-consent__actions .mta-btn { min-width: 116px; }

@media (max-width: 640px) {
  .mta-consent { justify-content: stretch; }
  .mta-consent__actions { width: 100%; }
  .mta-consent__actions .mta-btn { flex: 1 1 0; min-width: 0; }
}

/* =========================================================================
   Mega menu

   Reference insight, from Altezza: two columns, sections on the left and a
   preview on the right. Adopted because it answers the question the section
   list raises before the visitor has to spend a click on it.

   Improved on: theirs opens on hover only and closes the moment the pointer
   leaves the strip between the bar and the panel, which is a common way to
   lose people. This opens on hover, focus, or click, and stays open until the
   pointer leaves the whole region or Escape is pressed. It is also a real tab
   pattern, so a keyboard reaches every panel with the arrow keys.
   ========================================================================= */

.mta-nav__item { position: static; }

/* The chevron is out of the bar, which is what the reference header looks
   like and what stops seven chevrons stealing 180px of row. It stays in the
   DOM because the script needs it and because a keyboard can still reach it:
   focus restores it to a real 26px control. Panels also open on focusin, so
   nobody depends on pressing it. */
.mta-nav__toggle {
  position: absolute;
  width: 1px; height: 1px;
  margin: -1px; padding: 0; border: 0;
  overflow: hidden; clip: rect(0 0 0 0); clip-path: inset(50%);
  white-space: nowrap;
  background: none; color: var(--mta-ink-3); cursor: pointer;
}
.mta-nav__toggle:focus-visible {
  position: static;
  width: 26px; height: 44px;
  margin: 0; overflow: visible;
  clip: auto; clip-path: none;
  display: inline-flex; align-items: center; justify-content: center;
}
.mta-nav__item.is-open > .mta-nav__link { color: var(--mta-ochre-text); }
.mta-nav__item.is-open > .mta-nav__link::after { opacity: 1; }
.mta-nav__item.is-current > .mta-nav__link { color: var(--mta-ochre-text); }
.mta-nav__item.is-current > .mta-nav__link::after { opacity: 1; }

.mta-mega {
  position: absolute;
  left: 0; right: 0; top: 100%;
  z-index: 60;
  background: #fff;
  border-top: 1px solid var(--mta-line);
  box-shadow: 0 18px 40px rgba(20, 32, 26, 0.14);
}
.mta-mega__in {
  max-width: 1460px;
  margin: 0 auto;
  padding: var(--mta-s5) var(--mta-s6);
  display: grid;
  grid-template-columns: minmax(0, 320px) minmax(0, 1fr);
  gap: var(--mta-s6);
  align-items: start;
}

/* Left column */
.mta-mega__side {
  display: flex; flex-direction: column;
  border-right: 1px solid var(--mta-line);
  padding-right: var(--mta-s5);
  max-height: 60vh;
  overflow-y: auto;
}
.mta-mega__tab {
  display: flex; align-items: center; justify-content: space-between; gap: var(--mta-s3);
  width: 100%;
  min-height: 46px;
  padding: 9px 12px;
  border: 0; border-radius: var(--mta-radius-sm);
  background: none;
  font: inherit;
  font-weight: 550;
  color: var(--mta-ink);
  text-align: left;
  cursor: pointer;
}
.mta-mega__tab .mta-i { color: var(--mta-ink-3); opacity: 0.45; transition: opacity 0.12s ease, color 0.12s ease; }
.mta-mega__tab:hover { background: var(--mta-ground); }
.mta-mega__tab:hover .mta-i { opacity: 0.8; }
.mta-mega__tab.is-active { background: var(--mta-ochre-wash); color: var(--mta-ochre-text); font-weight: 600; }
.mta-mega__tab.is-active .mta-i { opacity: 1; color: var(--mta-ochre-text); }

/* Right column */
.mta-mega__panel[hidden] { display: none; }
.mta-mega__body {
  display: grid;
  grid-template-columns: minmax(0, 1fr) minmax(0, 320px);
  gap: var(--mta-s6);
  align-items: start;
}
.mta-mega__title { margin: 0 0 6px; font-size: 1.24rem; font-weight: 700; line-height: 1.25; }
.mta-mega__meta {
  margin: 0 0 var(--mta-s3);
  font-size: var(--mta-fs-label);
  font-weight: 600;
  text-transform: uppercase;
  letter-spacing: 0.09em;
  color: var(--mta-ochre-text);
}
.mta-mega__lede { margin: 0 0 var(--mta-s4); color: var(--mta-ink-2); font-size: 0.95rem; max-width: 62ch; }

.mta-mega__links { list-style: none; margin: 0 0 var(--mta-s4); padding: 0; display: grid; gap: 2px; }
.mta-mega__links a {
  display: block;
  padding: 8px 10px;
  border-radius: var(--mta-radius-sm);
  text-decoration: none;
  color: inherit;
}
.mta-mega__links a:hover { background: var(--mta-ground); }
.mta-mega__link-name { display: block; font-weight: 550; font-size: 0.95rem; }
.mta-mega__link-sub { display: block; font-size: 0.8rem; color: var(--mta-ink-3); margin-top: 1px; }
.mta-mega__cta { margin: 0; }
.mta-mega__cta .mta-i { margin-left: 6px; }

.mta-mega__media { border-radius: var(--mta-radius); overflow: hidden; background: var(--mta-ground); }
.mta-mega__media img { display: block; width: 100%; height: 220px; object-fit: cover; }

/* The two columns hold to 1100px.
   Measured at 1280px with the earlier 1380px breakpoint: the panel was
   1265px wide and still stacked, so a 1020px-wide photograph sat above the
   text at 220px tall, cropping a giraffe into a letterbox. The panel is
   full-header width, so the space is there; only a genuinely narrow window
   needs the stack. */
@media (max-width: 1100px) {
  .mta-mega__body { grid-template-columns: minmax(0, 1fr); }
  .mta-mega__media { order: -1; }
  .mta-mega__media img { height: 160px; }
}

/* =========================================================================
   Header search
   ========================================================================= */

.mta-header__search-btn { color: var(--mta-ink-2); }
.mta-header__search {
  display: flex; align-items: center; gap: var(--mta-s3);
  max-width: 1460px;
  margin: 0 auto;
  padding: 0 var(--mta-s6) var(--mta-s4);
}
.mta-header__search[hidden] { display: none; }
.mta-header__search input {
  flex: 1 1 auto; min-width: 0;
  height: 48px;
  padding: 0 14px;
  font: inherit; font-size: 1rem;
  border: 1px solid var(--mta-line);
  border-radius: var(--mta-radius-sm);
  background: #fff;
  color: var(--mta-ink);
}
.mta-drawer__search {
  display: flex; gap: var(--mta-s3);
  padding: 0 var(--mta-s4) var(--mta-s4);
}
.mta-drawer__search input {
  flex: 1 1 auto; min-width: 0;
  height: 46px; padding: 0 12px;
  font: inherit; font-size: 1rem;
  border: 1px solid var(--mta-line);
  border-radius: var(--mta-radius-sm);
}
.mta-drawer__search button {
  flex: 0 0 auto;
  width: 46px; height: 46px;
  border: 1px solid var(--mta-line);
  border-radius: var(--mta-radius-sm);
  background: var(--mta-ground);
  color: var(--mta-ink);
  cursor: pointer;
}

.mta-visually-hidden {
  position: absolute !important;
  width: 1px; height: 1px;
  margin: -1px; padding: 0;
  overflow: hidden; clip: rect(0 0 0 0); clip-path: inset(50%);
  white-space: nowrap; border: 0;
}

/* =========================================================================
   Drawer navigation, three levels

   The phone gets the same content as the desktop, one screen at a time,
   rather than a flattened list of links. Most operators drop the preview on
   mobile; on a trip like this more people are deciding on a phone than at a
   desk, so the photograph and the price belong there most of all.
   ========================================================================= */

.mta-dnav { position: relative; }
.mta-dnav__level { display: none; }
.mta-dnav__level.is-active { display: block; }
.mta-dnav__list { list-style: none; margin: 0; padding: 0; }
.mta-dnav__list > li { border-bottom: 1px solid var(--mta-line); }
.mta-dnav__list > li:last-child { border-bottom: 0; }

.mta-dnav__row {
  display: flex; align-items: center; justify-content: space-between; gap: var(--mta-s3);
  width: 100%;
  min-height: 54px;
  padding: 12px 8px;
  border: 0; background: none;
  font: inherit; font-size: 1.02rem; font-weight: 550;
  color: var(--mta-ink);
  text-align: left; text-decoration: none;
  cursor: pointer;
}
.mta-dnav__row .mta-i { flex: 0 0 auto; color: var(--mta-ink-3); }

.mta-dnav__back {
  display: flex; align-items: center; gap: 6px;
  min-height: 44px;
  margin-bottom: var(--mta-s3);
  padding: 0 4px;
  border: 0; background: none;
  font: inherit; font-size: 0.92rem; font-weight: 600;
  color: var(--mta-ink-3);
  cursor: pointer;
}
.mta-dnav__back-icon { transform: rotate(90deg); }

.mta-dnav__overview {
  display: block;
  margin-bottom: var(--mta-s3);
  padding: 12px 14px;
  border-radius: var(--mta-radius-sm);
  background: var(--mta-ground);
  text-decoration: none;
  color: var(--mta-ink);
  font-weight: 700;
}
.mta-dnav__overview span { display: block; font-weight: 400; font-size: 0.82rem; color: var(--mta-ink-3); margin-top: 2px; }

.mta-dnav__panel { padding-bottom: var(--mta-s4); }
.mta-dnav__media { border-radius: var(--mta-radius); overflow: hidden; margin: 0 0 var(--mta-s4); }
.mta-dnav__media img { display: block; width: 100%; height: 170px; object-fit: cover; }
.mta-dnav__panel .mta-mega__links { margin-bottom: var(--mta-s4); }

/* =========================================================================
   Hub introduction

   Replaces a bare paragraph that only editors could see. The facts on the
   right are read from the catalogue, so they cannot contradict the grid
   below them, and any fact with no data behind it is simply absent.
   ========================================================================= */

.mta-hubintro__grid {
  display: grid;
  grid-template-columns: minmax(0, 1fr) minmax(0, 320px);
  gap: var(--mta-s7);
  align-items: start;
}
.mta-hubintro .mta-prose { max-width: 62ch; }
.mta-hubintro__actions {
  display: flex; flex-wrap: wrap; gap: var(--mta-s3);
  margin: var(--mta-s5) 0 0;
}

.mta-hubintro__facts {
  margin: 0;
  padding: var(--mta-s5);
  border: 1px solid var(--mta-line);
  border-radius: var(--mta-radius);
  background: var(--mta-surface);
  display: grid;
  gap: var(--mta-s4);
}
.mta-hubintro__facts > div { display: grid; gap: 2px; }
.mta-hubintro__facts dt {
  font-size: var(--mta-fs-label);
  font-weight: 600;
  text-transform: uppercase;
  letter-spacing: 0.09em;
  color: var(--mta-ink-3);
}
.mta-hubintro__facts dd {
  margin: 0;
  font-size: 1.16rem;
  font-weight: 700;
  color: var(--mta-ink);
}

@media (max-width: 900px) {
  .mta-hubintro__grid { grid-template-columns: minmax(0, 1fr); gap: var(--mta-s5); }
  .mta-hubintro__facts { grid-template-columns: repeat(auto-fit, minmax(min(140px, 100%), 1fr)); }
}

/* =========================================================================
   Parent-theme button skin, removed from our own controls

   Kadence skins every <button> on the page: green background, its own
   padding, its own radius, and a second, stronger rule for :hover, :focus
   and :active. Our interface controls are buttons in markup because that is
   the correct element for something that toggles a menu, but they are not
   buttons in the design. Live, that put a filled olive block behind the
   navigation chevrons and the search icon.

   Specificity is why this needs !important rather than a heavier selector:
   the parent's hover rule is `button:hover`, which outranks a single class,
   and our controls sit in four different containers, so no one ancestor
   could scope them all. This resets only the four skin properties, only on
   our own controls, in every state. Real buttons on the site keep their
   skin: .mta-btn is untouched.
   ========================================================================= */
.mta-header__icon,
.mta-header__burger,
.mta-header__strip-search,
.mta-nav__toggle,
.mta-drawer__close,
.mta-mega__tab,
.mta-dnav__row,
.mta-dnav__back,
.mta-header__strip-search:hover, .mta-header__strip-search:focus, .mta-header__strip-search:active,
.mta-header__icon:hover, .mta-header__icon:focus, .mta-header__icon:active,
.mta-header__burger:hover, .mta-header__burger:focus, .mta-header__burger:active,
.mta-nav__toggle:hover, .mta-nav__toggle:focus, .mta-nav__toggle:active,
.mta-drawer__close:hover, .mta-drawer__close:focus, .mta-drawer__close:active,
.mta-mega__tab:hover, .mta-mega__tab:focus, .mta-mega__tab:active,
.mta-dnav__row:hover, .mta-dnav__row:focus, .mta-dnav__row:active,
.mta-dnav__back:hover, .mta-dnav__back:focus, .mta-dnav__back:active {
  background-image: none !important;
  box-shadow: none !important;
  text-transform: none !important;
  letter-spacing: normal !important;
}

/* Transparent by default. The few that carry their own fill set it below. */
.mta-header__icon,
.mta-header__strip-search,
.mta-nav__toggle,
.mta-drawer__close,
.mta-dnav__row,
.mta-dnav__back,
.mta-header__strip-search:hover, .mta-header__strip-search:focus, .mta-header__strip-search:active,
.mta-header__icon:hover, .mta-header__icon:focus, .mta-header__icon:active,
.mta-nav__toggle:hover, .mta-nav__toggle:focus, .mta-nav__toggle:active,
.mta-drawer__close:hover, .mta-drawer__close:focus, .mta-drawer__close:active,
.mta-dnav__row:hover, .mta-dnav__row:focus, .mta-dnav__row:active,
.mta-dnav__back:hover, .mta-dnav__back:focus, .mta-dnav__back:active {
  background-color: transparent !important;
  border: 0 !important;
  padding: 0 !important;
}

/* Restore the padding each control actually needs. */
.mta-dnav__row { padding: 12px 8px !important; }
.mta-dnav__back { padding: 0 4px !important; }
.mta-mega__tab { padding: 9px 12px !important; border: 0 !important; }
.mta-header__strip-search { padding: 0 !important; border: 0 !important; border-radius: 50% !important; }
.mta-header__strip-search:hover { background-color: var(--mta-surface-2) !important; color: var(--mta-ochre-text); }

.mta-header__icon { color: var(--mta-ink-2); }
.mta-header__icon:hover { background-color: var(--mta-ground) !important; color: var(--mta-ink); }
.mta-nav__toggle:hover { background-color: var(--mta-ground) !important; }

.mta-header__burger,
.mta-header__burger:hover,
.mta-header__burger:focus,
.mta-header__burger:active {
  background-color: var(--mta-surface) !important;
  border: 1px solid var(--mta-line) !important;
  padding: 0 !important;
}

.mta-mega__tab,
.mta-mega__tab:focus { background-color: transparent !important; }
.mta-mega__tab:hover { background-color: var(--mta-ground) !important; }
.mta-mega__tab.is-active { background-color: var(--mta-ochre-wash) !important; }

.mta-drawer__search button,
.mta-drawer__search button:hover,
.mta-drawer__search button:focus {
  background-color: var(--mta-ground) !important;
  border: 1px solid var(--mta-line) !important;
  color: var(--mta-ink) !important;
  background-image: none !important;
}

/* -------------------------------------------------------------------------
   The dropdown must escape its list item.

   `.mta-nav__list > li { position: relative }` predates the mega menu and,
   at (0,1,1), outranked `.mta-nav__item { position: static }` at (0,1,0). The
   list item therefore stayed the containing block and the panel rendered as
   an 84px column running 2,283px down the page over the hero. Measured live.

   The header is position: sticky, so once the item is genuinely static the
   panel resolves against the header and spans it, which is the intent.
   ------------------------------------------------------------------------- */
.mta-nav__list > li.mta-nav__item { position: static; }

/* -------------------------------------------------------------------------
   The label and its chevron sit on one line.

   The list item inherited `display: list-item` from the parent theme, so the
   link took the full width of the item and the toggle button wrapped beneath
   it. Measured live at 1440px: eight chevrons on a second row under the
   navigation, each one orphaned under its label, and a header 88px tall
   instead of 44. It read as a broken component, which on a header is the
   first thing a visitor sees.
   ------------------------------------------------------------------------- */
.mta-nav__list > li.mta-nav__item {
  display: flex;
  align-items: center;
  gap: 0;
}

/* A short viewport must still be able to reach the bottom of a panel. */
.mta-mega__in { max-height: min(78vh, 640px); overflow-y: auto; }

/* =========================================================================
   Editorial sections

   The homepage ran seven text-only bands in a row. These are the shapes that
   break that: a photograph beside the argument, alternating sides, and one
   full-width photograph where the page changes subject. Between them the
   page now alternates picture and prose instead of stacking prose.
   ========================================================================= */

.mta-eyebrow {
  margin: 0 0 var(--mta-s2);
  font-size: var(--mta-fs-label);
  font-weight: 600;
  text-transform: uppercase;
  letter-spacing: 0.11em;
  color: var(--mta-ochre-text);
}
.mta-eyebrow--light { color: #F3D9B8; }

/* ---- Split: photograph beside the argument ---- */

.mta-split__grid {
  display: grid;
  grid-template-columns: minmax(0, 1fr) minmax(0, 1fr);
  gap: clamp(28px, 5vw, 72px);
  align-items: center;
}
/* Flip by reordering, not by direction, so the reading order stays correct
   for a screen reader and the photograph still follows the heading it
   belongs to on a phone. */
.mta-split__grid--flip .mta-split__media { order: 2; }

/* One column when the section has no photograph to put beside the copy. */
.mta-split__grid--solo { grid-template-columns: minmax(0, 1fr); }

/* Six reasons beside a photograph: two columns of three, rather than the
   three-across grid that needed the full page width. */
.mta-reasons {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(min(200px, 100%), 1fr));
  gap: var(--mta-s5) var(--mta-s5);
  margin-top: var(--mta-s4);
}
.mta-reasons .mta-reason__icon { width: 38px; height: 38px; margin-bottom: var(--mta-s2); }
.mta-reasons .mta-reason h3 { font-size: 1.02rem; }
.mta-reasons .mta-reason p { font-size: 0.92rem; }

.mta-split__media {
  border-radius: var(--mta-radius);
  overflow: hidden;
  background: var(--mta-ground);
  box-shadow: 0 18px 44px rgba(20, 32, 26, 0.16);
}
.mta-split__media img {
  display: block;
  width: 100%;
  height: clamp(300px, 42vw, 520px);
  object-fit: cover;
}

/* Where the body column is a grid of reasons rather than a paragraph, the
   photograph matches its height instead of floating at a fixed size beside a
   taller column. */
.mta-split--stretch .mta-split__grid { align-items: stretch; }
.mta-split--stretch .mta-split__media { display: flex; }
.mta-split--stretch .mta-split__media img { height: 100%; min-height: clamp(300px, 40vw, 440px); }

.mta-split__title {
  margin: 0 0 var(--mta-s4);
  font-size: clamp(1.7rem, 3vw, 2.5rem);
  line-height: 1.12;
  letter-spacing: -0.02em;
}
.mta-split__text { margin: 0 0 var(--mta-s5); color: var(--mta-ink-2); font-size: 1.03rem; max-width: 56ch; }

.mta-split__points { list-style: none; margin: 0 0 var(--mta-s6); padding: 0; display: grid; gap: var(--mta-s4); }
.mta-split__points li { display: grid; grid-template-columns: 24px minmax(0, 1fr); gap: var(--mta-s3); align-items: start; }
.mta-split__points .mta-i { color: var(--mta-ochre-text); margin-top: 2px; }
.mta-split__points strong { display: block; font-weight: 650; font-size: 1rem; }
.mta-split__points span span { display: block; font-size: 0.88rem; color: var(--mta-ink-3); margin-top: 1px; }
.mta-split__actions { display: flex; flex-wrap: wrap; gap: var(--mta-s3); margin: 0; }

@media (max-width: 900px) {
  .mta-split__grid { grid-template-columns: minmax(0, 1fr); gap: var(--mta-s5); }
  .mta-split__grid--flip .mta-split__media { order: 0; }
  .mta-split__media img { height: clamp(220px, 52vw, 340px); }
}

/* ---- Feature: one photograph, full width ---- */

.mta-feature {
  position: relative;
  display: flex;
  align-items: center;
  min-height: min(58vh, 460px);
  overflow: hidden;
  background: var(--mta-miombo-deep);
}
.mta-feature__media {
  position: absolute; inset: 0; z-index: 0;
  width: 100%; height: 100%;
  object-fit: cover;
}
.mta-feature__inner {
  position: relative; z-index: 3;
  padding: var(--mta-s8) var(--mta-s5);
  color: #fff;
  max-width: var(--mta-maxw);
}
.mta-feature__title {
  margin: 0 0 var(--mta-s4);
  font-size: clamp(1.75rem, 3.4vw, 2.7rem);
  line-height: 1.1;
  letter-spacing: -0.02em;
  max-width: 20ch;
  color: #fff;
}
.mta-feature__text { margin: 0 0 var(--mta-s6); font-size: 1.05rem; max-width: 58ch; color: rgba(255, 255, 255, 0.94); }
.mta-feature__actions { display: flex; flex-wrap: wrap; gap: var(--mta-s3); margin: 0; }

/* ---- Destination tiles: the photograph is the card ---- */

.mta-circuit { margin-bottom: var(--mta-s8); }
.mta-circuit:last-of-type { margin-bottom: var(--mta-s6); }
.mta-circuit__head { margin-bottom: var(--mta-s5); }
.mta-circuit__title {
  margin: 0 0 4px;
  font-size: 1.3rem;
  letter-spacing: -0.01em;
}
.mta-circuit__note { margin: 0; color: var(--mta-ink-2); font-size: 0.95rem; max-width: 70ch; }

/* Destination tiles.

   A grid leaves whatever does not divide by the column count sitting alone in
   an empty row. Measured live at 1440px: the northern circuit has five parks
   and the fifth sat by itself with three quarters of the band blank beside it;
   the southern circuit has four and orphaned the fourth; and the coast has one
   destination, which rendered as a small card with two thirds of the row
   empty. Three separate versions of the same hole.

   Flex fixes all of them at once, because the last row grows to fill the width
   it is given. Five parks read as three then two half-width tiles; four as
   three then one full-width banner; one as a single wide tile. The tile is a
   fixed 260px tall with the photograph cropped to fill, so a wider tile is a
   wider crop, never a stretched or letterboxed picture. */
.mta-tiles {
  display: flex;
  flex-wrap: wrap;
  gap: var(--mta-s4);
}
.mta-tiles > * {
  flex: 1 1 280px;
  min-width: min(280px, 100%);
}

@media (min-width: 1000px) {
  /* Three to a row when there are enough to fill one. */
  .mta-tiles > * { flex-basis: calc(33.333% - (var(--mta-s4) * 2 / 3)); }
}

.mta-tile {
  position: relative;
  display: block;
  min-height: 260px;
  border-radius: var(--mta-radius);
  overflow: hidden;
  text-decoration: none;
  color: #fff;
  background: var(--mta-miombo);
  isolation: isolate;
}
.mta-tile__media {
  position: absolute; inset: 0; z-index: 0;
  width: 100%; height: 100%;
  object-fit: cover;
  transition: transform 0.4s ease;
}
.mta-tile:hover .mta-tile__media { transform: scale(1.04); }

/* The deliberate no-image state, at tile size: a designed panel, not a
   failed image. It never borrows another park's photograph. */
.mta-tile--none { background: linear-gradient(160deg, var(--mta-miombo) 0%, var(--mta-miombo-deep) 100%); }
.mta-tile__none {
  position: absolute; inset: 0; z-index: 1;
  display: flex; align-items: center; justify-content: center;
  color: rgba(255, 255, 255, 0.34);
}
.mta-tile--none::after {
  content: "";
  position: absolute; inset: 0; z-index: 0;
  background-image: radial-gradient(rgba(255,255,255,0.10) 1px, transparent 1px);
  background-size: 14px 14px;
}

.mta-tile__body {
  position: relative; z-index: 3;
  display: block;
  padding: var(--mta-s5);
  margin-top: auto;
  position: absolute; left: 0; right: 0; bottom: 0;
}
.mta-tile__eyebrow {
  display: block;
  font-size: var(--mta-fs-label);
  font-weight: 600;
  text-transform: uppercase;
  letter-spacing: 0.1em;
  color: rgba(255, 255, 255, 0.86);
  margin-bottom: 4px;
}
.mta-tile__title { display: block; font-size: 1.22rem; font-weight: 700; line-height: 1.2; }
.mta-tile__meta { display: block; font-size: 0.85rem; color: rgba(255, 255, 255, 0.86); margin-top: 3px; }

/* ---- Hero, taller, and a larger button for it ---- */

.mta-hero--tall { min-height: min(88vh, 760px); }
.mta-btn--lg { min-height: 54px; padding: 14px 26px; font-size: 1.02rem; }

@media (max-width: 600px) {
  /* Agrees with the rule above rather than quietly overriding it. A hero at
     about three quarters of a phone screen leaves a sliver of the next
     section showing, which is what tells a reader the page continues. */
  .mta-hero--tall { min-height: min(80vh, 620px); }
  .mta-btn--lg { min-height: 50px; padding: 12px 18px; font-size: 0.96rem; }
}

/* =========================================================================
   Card system, finished

   The cards worked but read as list rows: a small picture, a 1.02rem title
   and a hairline footer. On a page whose product is a photograph of a place,
   the photograph should carry the card. These changes are proportion, not
   decoration: a taller image, a bigger title, a price that reads as a price,
   and a lift on hover that says the whole card is the target.
   ========================================================================= */

.mta-card {
  box-shadow: 0 1px 2px rgba(20, 32, 26, 0.04);
  transition: border-color 0.16s ease, transform 0.16s ease, box-shadow 0.16s ease;
}
.mta-card:hover {
  border-color: var(--mta-line);
  transform: translateY(-4px);
  box-shadow: 0 16px 34px rgba(20, 32, 26, 0.13);
}
.mta-card__media {
  aspect-ratio: 3 / 2;
  transition: transform 0.4s ease;
}
/* The image lifts inside the card rather than the card cropping it. */
.mta-card { position: relative; }
.mta-card > .mta-card__media,
.mta-card > .mta-card__media--none { flex: 0 0 auto; }

.mta-card__body { padding: var(--mta-s5); gap: 6px; }
.mta-card__title { font-size: 1.12rem; font-weight: 700; letter-spacing: -0.01em; line-height: 1.25; }
.mta-card__excerpt { margin-top: 2px; line-height: 1.5; }
.mta-card__foot { padding-top: var(--mta-s4); align-items: flex-end; }
.mta-card__price-amt { font-size: 1.16rem; }
.mta-card__cta { display: inline-flex; align-items: center; gap: 5px; }
.mta-card:hover .mta-card__cta { color: var(--mta-ochre); }

/* The deliberate no-image panel, matched to the new proportion. */
.mta-card__media--none {
  aspect-ratio: 3 / 2;
  display: flex; align-items: center; justify-content: center;
  background: linear-gradient(160deg, var(--mta-ground) 0%, var(--mta-surface-2) 100%);
  border-bottom: 1px solid var(--mta-line);
}

/* =========================================================================
   Typography and spacing scale

   Mobile was inheriting desktop heading sizes, so an H1 wrapped to four
   lines at 360px and section padding of 96px left more empty ground than
   content on a phone. The scale below is set from the viewport, so the
   rhythm holds from 320px to 1920px instead of being tuned for one width.
   ========================================================================= */

/**
 * These three lines used to redefine the type scale and quietly won, because
 * they sit two thousand lines below the block that defines the tokens. That
 * is how a section heading measured 36px on the live site while the token
 * above said 30px, and it is worth naming as a class of bug: a custom
 * property has no specificity, so the last definition wins no matter which
 * one carries the reasoning.
 *
 * The scale now lives in one place, at the top of this file. What stays here
 * is the hero, which genuinely is a different size from every other heading
 * and is measured separately.
 */
:root {
  --mta-fs-hero: clamp(1.85rem, 5.2vw, 3rem);   /* 48px at full width */
}

/* 48px top and bottom, measured. The old clamp ran to 104px, which on a
   1440px screen put more empty ground between two sections than either
   section had content, and made the page feel like a brochure rather than
   a catalogue. */
.mta-band { padding: var(--mta-s7) 0; }
.mta-hero__title { font-size: var(--mta-fs-hero); line-height: 1.06; letter-spacing: -0.025em; }
.mta-hero__sub { font-size: clamp(1rem, 1.5vw, 1.16rem); max-width: 54ch; }

@media (max-width: 600px) {
  .mta-band__lede { font-size: 0.98rem; }
  .mta-card__body { padding: var(--mta-s4); }
  .mta-card__title { font-size: 1.06rem; }
  .mta-hero__inner { padding: var(--mta-s7) var(--mta-s5) var(--mta-s6); }
  .mta-hero__actions { gap: 10px; }
  .mta-hero__actions .mta-btn { flex: 1 1 100%; justify-content: center; }
}

/* Two columns at tablet, three on desktop, one on a phone. The auto-fit
   grids already do this; this pins the tablet step so a 768px screen never
   shows three cramped columns. */
@media (min-width: 601px) and (max-width: 1023px) {
  .mta-grid--3, .mta-grid--4 { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .mta-tiles > * { flex-basis: calc(50% - (var(--mta-s4) / 2)); }
}

/* =========================================================================
   Footer, finished
   ========================================================================= */

.mta-footer__cta { border-bottom: 1px solid rgba(255, 255, 255, 0.14); }
.mta-footer__cta-in {
  max-width: var(--mta-maxw);
  margin: 0 auto;
  padding: clamp(28px, 4vw, 52px) var(--mta-s5);
  display: grid;
  grid-template-columns: minmax(0, 1fr) auto;
  gap: var(--mta-s5);
  align-items: center;
}
.mta-footer__cta-title {
  margin: 0 0 6px;
  font-size: clamp(1.25rem, 2.2vw, 1.75rem);
  font-weight: 700;
  color: #fff;
  letter-spacing: -0.015em;
}
.mta-footer__cta-text { margin: 0; color: rgba(255, 255, 255, 0.78); max-width: 60ch; font-size: 0.98rem; }
.mta-footer__cta-actions { display: flex; flex-wrap: wrap; gap: var(--mta-s3); }

.mta-footer__in { padding: clamp(36px, 5vw, 72px) var(--mta-s5) var(--mta-s6); gap: var(--mta-s7) var(--mta-s6); }
.mta-footer__h { font-size: var(--mta-fs-label); letter-spacing: 0.1em; }
.mta-footer__col ul { gap: 10px; }
.mta-footer a { line-height: 1.5; }

@media (max-width: 900px) {
  .mta-footer__cta-in { grid-template-columns: minmax(0, 1fr); }
  .mta-footer__cta-actions .mta-btn { flex: 1 1 auto; justify-content: center; }
  .mta-footer__in { grid-template-columns: repeat(2, minmax(0, 1fr)); }
}
@media (max-width: 560px) {
  .mta-footer__in { grid-template-columns: minmax(0, 1fr); }
}

/* A practical fact lifted out of the prose: the accommodation or meal basis
   that the source documents put on its own line mid-paragraph. */
.mta-inline-fact {
  margin: var(--mta-s4) 0;
  padding: var(--mta-s3) var(--mta-s4);
  background: var(--mta-ground);
  border-left: 3px solid var(--mta-ochre);
  border-radius: var(--mta-radius-sm);
  font-size: var(--mta-fs-small);
}

/* =========================================================================
   Travel date: a branded calendar over a real date input
   =========================================================================
   The native input still submits and still validates. Once the script has
   drawn the grid the input is taken out of the visual flow but left rendered
   and focusable, so the browser can still report "please fill in this field"
   against it instead of refusing to submit with nothing on screen.
   ========================================================================= */


/* =========================================================================
   Booking summary
   =========================================================================
   What the visitor is about to send, restated before they send it. Hidden
   until there is something true to put in it.
   ========================================================================= */

.mta-summary {
  margin-top: var(--mta-s5);
  padding: var(--mta-s4) var(--mta-s5);
  background: var(--mta-ground);
  border: 1px solid var(--mta-line);
  border-radius: var(--mta-radius);
}
.mta-summary[hidden] { display: none; }

.mta-summary__title {
  margin: 0 0 var(--mta-s3);
  font-size: var(--mta-fs-label);
  font-weight: 700;
  letter-spacing: 0.1em;
  text-transform: uppercase;
  color: var(--mta-ink-3);
}

.mta-summary__list { margin: 0; display: grid; gap: var(--mta-s2); }

.mta-summary__row {
  display: flex;
  align-items: baseline;
  justify-content: space-between;
  gap: var(--mta-s4);
  font-size: var(--mta-fs-small);
}
.mta-summary__row[hidden] { display: none; }
.mta-summary__row dt { color: var(--mta-ink-2); flex: 0 0 auto; }
.mta-summary__row dd {
  margin: 0;
  text-align: right;
  font-weight: 600;
  color: var(--mta-ink);
  min-width: 0;
}

.mta-summary__row--total {
  margin-top: var(--mta-s2);
  padding-top: var(--mta-s3);
  border-top: 1px solid var(--mta-line);
}
.mta-summary__row--total dt { font-weight: 600; color: var(--mta-ink); }
.mta-summary__row--total dd { font-size: 1.15rem; font-weight: 700; letter-spacing: -0.015em; }

.mta-summary__note {
  margin: var(--mta-s3) 0 0;
  font-size: 0.78rem;
  line-height: 1.5;
  color: var(--mta-ink-3);
  max-width: none;
}

@media (max-width: 420px) {
  .mta-summary { padding: var(--mta-s4); }
  .mta-summary__row { flex-direction: column; gap: 2px; align-items: flex-start; }
  .mta-summary__row dd { text-align: left; }
}

/* =========================================================================
   Legal drafts: an unanswered question, shown as one
   =========================================================================
   Only ever seen by the owner previewing a draft. The publish guard keeps a
   page carrying one of these off the public site.
   ========================================================================= */

.mta-confirm-note {
  display: inline;
  padding: 2px 8px 3px;
  border-radius: var(--mta-radius-sm);
  background: #FDF3E3;
  box-shadow: inset 0 0 0 1px #E4C48A;
  color: #6E4A0B;
  font-size: 0.95em;
}

.mta-confirm-note__tag {
  display: inline-block;
  margin-right: 6px;
  font-size: 0.7em;
  font-weight: 700;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  color: var(--mta-gold-text);
  vertical-align: 1px;
}

/* =========================================================================
   Planning links and official sources
   =========================================================================
   Two link blocks that end a page: ours, then theirs. Deliberately quiet.
   They come after the reader has what they came for, and they are lists of
   destinations rather than cards, because a card here would compete with the
   trip cards above it.
   ========================================================================= */

.mta-planning__lede,
.mta-sources__lede {
  margin: 0 0 var(--mta-s4);
  color: var(--mta-ink-2);
  font-size: var(--mta-fs-small);
}

.mta-planning__list {
  list-style: none;
  margin: 0;
  padding: 0;
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: var(--mta-s2) var(--mta-s4);
}
@media (max-width: 620px) { .mta-planning__list { grid-template-columns: minmax(0, 1fr); } }

.mta-planning__list a {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: var(--mta-s3);
  min-height: var(--mta-tap);
  padding: var(--mta-s2) var(--mta-s3);
  border-bottom: 1px solid var(--mta-line);
  color: var(--mta-ink);
  text-decoration: none;
  font-weight: 550;
}
.mta-planning__list a:hover { background: var(--mta-surface); color: var(--mta-ochre-text); }
.mta-planning__list .mta-i { color: var(--mta-ochre-text); flex: 0 0 auto; }

.mta-sources__list {
  list-style: none;
  margin: 0;
  padding: 0;
  display: grid;
  gap: var(--mta-s4);
}
@media (min-width: 760px) { .mta-sources__list { grid-template-columns: repeat(2, minmax(0, 1fr)); } }

.mta-sources__list li {
  display: grid;
  gap: 4px;
  padding: var(--mta-s3) var(--mta-s4);
  background: var(--mta-surface);
  border: 1px solid var(--mta-line);
  border-radius: var(--mta-radius-sm);
}
.mta-sources__list a {
  display: inline-flex;
  align-items: center;
  gap: var(--mta-s2);
  font-weight: 600;
  color: var(--mta-ink);
}
.mta-sources__list a:hover { color: var(--mta-ochre-text); }
.mta-sources__list .mta-i { color: var(--mta-ink-3); flex: 0 0 auto; }
.mta-sources__list span { font-size: 0.85rem; line-height: 1.5; color: var(--mta-ink-3); }

/* =========================================================================
   THE FORM SYSTEM

   Three forms, one design. Everything a visitor learns on one of them — where
   the label sits, what a required marker looks like, how an error is shown,
   what the primary button feels like — is true on the other two. What differs
   is what each one leads with: the booking form leads with the trip and its
   running total, the trip enquiry with a choice, the contact form with
   nothing at all, because five fields need no preamble.

   Everything below overrides the earlier generic form rules on purpose. They
   are left in place so that any form rendered by a plugin still looks like it
   belongs here; these rules are what make the three built-in forms look
   designed rather than generated.
   ========================================================================= */

:root {
  --mta-field-h:    52px;   /* comfortable, and 16px text never zooms iOS */
  --mta-field-r:    9px;
  --mta-card-r:     14px;
  --mta-ring:       0 0 0 3px rgba(168, 94, 20, 0.16);
  --mta-lift:       0 1px 2px rgba(20, 32, 26, 0.04), 0 8px 24px -12px rgba(20, 32, 26, 0.16);
  --mta-error-wash: #FBF0EE;
}

/* -------------------------------------------------------------------------
   The shell

   A container query, not a media query. The booking form sits in a 1132px
   band on a trip page and in a 640px column elsewhere, and what decides
   whether the trip card can sit beside the fields is the width of the space
   the form was given, not the width of the screen. Where containers are not
   supported the form stays single column, which is the layout it was designed
   in.
   ---------------------------------------------------------------------- */

.mta-formzone { container-type: inline-size; }

.mta-formshell {
  display: grid;
  gap: var(--mta-s5);
  align-items: start;
}

.mta-formshell__head { max-width: 46ch; }
.mta-formshell__main { min-width: 0; display: grid; gap: var(--mta-s5); }

@container (min-width: 48rem) {
  .mta-formshell.has-card {
    grid-template-columns: minmax(0, 1fr) 22rem;
    column-gap: var(--mta-s7);
    row-gap: var(--mta-s5);
  }
  .mta-formshell.has-card > .mta-formshell__head  { grid-column: 1; grid-row: 1; }
  .mta-formshell.has-card > .mta-formshell__main  { grid-column: 1; grid-row: 2; }
  .mta-formshell.has-card > .mta-formshell__aside {
    grid-column: 2;
    grid-row: 1 / span 2;
    position: sticky;
    /* Clears the sticky site header with room to breathe. */
    top: 104px;
  }
}

/* The booking band on a trip page: the full measure, and set apart from the
   itinerary above it so it reads as the place where the decision is made. */
.mta-bookband {
  margin-top: var(--mta-s8);
  padding-top: var(--mta-s7);
  border-top: 1px solid var(--mta-line);
  scroll-margin-top: 100px;
}

/* ---- Form header ---- */
.mta-formhead__eyebrow {
  margin: 0 0 8px;
  font-size: var(--mta-fs-label);
  font-weight: 700;
  letter-spacing: 0.1em;
  text-transform: uppercase;
  color: var(--mta-ochre-text);
}
.mta-formhead__title {
  margin: 0 0 10px;
  font-size: clamp(1.5rem, 3vw, 2rem);
  font-weight: 700;
  letter-spacing: -0.024em;
  line-height: 1.15;
  color: var(--mta-miombo);
}
.mta-formhead__intro {
  margin: 0;
  max-width: 52ch;
  font-size: 1.02rem;
  line-height: 1.6;
  color: var(--mta-ink-2);
}

/* -------------------------------------------------------------------------
   Inputs

   One label above one control, an optional line of help below. A placeholder
   is only ever an example of the answer: it disappears the moment someone
   types, and a form whose questions vanish as you answer them is a form
   people abandon.
   ---------------------------------------------------------------------- */

.mta-form { display: grid; gap: var(--mta-s5); }

.mta-form__row {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: var(--mta-s4) var(--mta-s4);
}

.mta-field { min-width: 0; display: block; }
.mta-field--half { grid-column: span 1; }
.mta-field--full { grid-column: 1 / -1; }

/**
 * Two fields side by side line up their controls even when one label runs to
 * two lines and the other does not. Without this the Children stepper sat 18px
 * below the Adults stepper, which reads as a mistake rather than a layout.
 * Where subgrid is unsupported the fields simply stack as before.
 */
@supports (grid-template-rows: subgrid) {
  .mta-form__row {
    /* The row gap now falls between subgrid rows, which are label, control and
       note. It has to go to zero, or every field grows 16px of air inside it;
       the space between fields comes back as padding on the field itself. */
    row-gap: 0;
  }
  .mta-form__row > .mta-field {
    display: grid;
    grid-row: span 3;
    grid-template-rows: subgrid;
    align-content: start;
    padding-bottom: var(--mta-s4);
  }
  .mta-form__row > .mta-field:last-child { padding-bottom: 0; }
  .mta-form__row > .mta-field--cards { grid-row: span 1; display: block; }
}

.mta-form label { display: block; margin-bottom: 8px; }
.mta-field__label {
  display: block;
  font-size: 0.9rem;
  font-weight: 600;
  letter-spacing: -0.005em;
  color: var(--mta-ink);
}
.mta-field__label .req { color: var(--mta-ochre-text); margin-left: 2px; font-weight: 700; }
.mta-field__sub {
  display: block;
  margin-top: 2px;
  font-size: 0.78rem;
  font-weight: 400;
  line-height: 1.4;
  color: var(--mta-ink-3);
}

.mta-form input[type="text"],
.mta-form input[type="email"],
.mta-form input[type="tel"],
.mta-form input[type="date"],
.mta-form input[type="number"],
.mta-form select,
.mta-form textarea {
  width: 100%;
  min-height: var(--mta-field-h);
  padding: 13px 15px;
  font-size: 1rem;
  line-height: 1.45;
  font-family: var(--mta-font);
  color: var(--mta-ink);
  background: var(--mta-surface);
  border: 1px solid var(--mta-line);
  border-radius: var(--mta-field-r);
  box-shadow: none;
  transition: border-color 0.12s ease, box-shadow 0.12s ease;
}
.mta-form textarea { min-height: 132px; resize: vertical; padding-top: 14px; }

.mta-form input::placeholder,
.mta-form textarea::placeholder { color: var(--mta-ink-3); opacity: 0.75; }

.mta-form input:hover:not(:focus),
.mta-form select:hover:not(:focus),
.mta-form textarea:hover:not(:focus) { border-color: var(--mta-ink-3); }

.mta-form input:focus,
.mta-form select:focus,
.mta-form textarea:focus {
  outline: none;
  border-color: var(--mta-ochre);
  box-shadow: var(--mta-ring);
}
/* Keyboard users keep the browser's own ring on top of ours. */
.mta-form input:focus-visible,
.mta-form select:focus-visible,
.mta-form textarea:focus-visible { outline: 2px solid var(--mta-ochre); outline-offset: 1px; }

/* ---- Select ---- */
.mta-selectwrap { position: relative; }
.mta-selectwrap select {
  appearance: none;
  -webkit-appearance: none;
  padding-right: 44px;
  cursor: pointer;
}
.mta-selectwrap > .mta-i {
  position: absolute;
  right: 14px;
  top: 50%;
  transform: translateY(-50%);
  pointer-events: none;
  color: var(--mta-ink-3);
}

/* ---- Help and errors ----

   Calm, not loud. A red block with a warning triangle tells someone they have
   done something wrong; a one-line sentence under the field tells them what
   to do instead, which is the only part that helps.                          */

.mta-field__note {
  margin: 7px 0 0;
  font-size: 0.8rem;
  line-height: 1.45;
  color: var(--mta-ink-3);
}
.mta-field__note--error { color: var(--mta-error); font-weight: 500; }

/* Errors show only after the visitor has actually been in the field.
   :user-invalid does this natively; the is-touched class is the fallback the
   script adds on blur for browsers that do not support it yet. */
.mta-form input:user-invalid,
.mta-form select:user-invalid,
.mta-form textarea:user-invalid,
.mta-form .is-touched:invalid {
  border-color: var(--mta-error);
  background: var(--mta-error-wash);
}
.mta-form input:user-invalid:focus,
.mta-form .is-touched:invalid:focus { box-shadow: 0 0 0 3px rgba(155, 44, 30, 0.14); }

/* A field the server rejected is marked from the first paint, because the
   visitor has already submitted it once. */
.mta-field.is-invalid input,
.mta-field.is-invalid select,
.mta-field.is-invalid textarea { border-color: var(--mta-error); background: var(--mta-error-wash); }

.mta-form__errors {
  display: flex; align-items: flex-start; gap: 10px;
  margin: 0;
  padding: 14px 16px;
  border-radius: var(--mta-field-r);
  background: var(--mta-error-wash);
  border: 1px solid rgba(155, 44, 30, 0.25);
  color: var(--mta-ink);
  font-size: var(--mta-fs-small);
}
.mta-form__errors .mta-i { color: var(--mta-error); flex: 0 0 auto; margin-top: 1px; }
.mta-form__errors p { margin: 0; max-width: none; }

/* -------------------------------------------------------------------------
   Choice cards

   A dropdown hides nine of ten trips behind a tap and tells a visitor nothing
   about the range on offer. Laid out, the same ten answers are one glance and
   one tap. Underneath it is still a radio group, so the keyboard, the screen
   reader and the browser's own required-field handling all work untouched.
   ---------------------------------------------------------------------- */

.mta-choice { border: 0; padding: 0; margin: 0; min-width: 0; }
.mta-choice__legend {
  padding: 0;
  margin-bottom: 10px;
  font-size: 0.9rem;
  font-weight: 600;
  color: var(--mta-ink);
}
.mta-choice__legend .req { color: var(--mta-ochre-text); margin-left: 2px; font-weight: 700; }

.mta-choice__grid {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(min(158px, 100%), 1fr));
  gap: 10px;
}
/**
 * The label is the grid item and stretches to the row; the face has to fill it
 * or a one-line card sits shorter than the two-line card beside it.
 *
 * Scoped through .mta-form because `.mta-form label { display: block }` above
 * carries a class and an element and therefore outranks a bare class here.
 * Written as `.mta-choice__card` alone this rule lost silently.
 */
.mta-form .mta-choice__card { display: flex; margin: 0; cursor: pointer; }
.mta-choice__card input {
  position: absolute;
  width: 1px; height: 1px;
  padding: 0; margin: -1px;
  overflow: hidden;
  clip: rect(0 0 0 0);
  white-space: nowrap;
  border: 0;
}
.mta-choice__face {
  display: flex;
  align-items: center;
  width: 100%;
  min-height: var(--mta-field-h);
  padding: 12px 14px;
  border: 1px solid var(--mta-line);
  border-radius: var(--mta-field-r);
  background: var(--mta-surface);
  font-size: 0.94rem;
  font-weight: 550;
  line-height: 1.3;
  color: var(--mta-ink-2);
  transition: border-color 0.12s ease, background-color 0.12s ease, color 0.12s ease;
}
.mta-choice__card:hover .mta-choice__face { border-color: var(--mta-ink-3); color: var(--mta-ink); }
.mta-choice__card input:checked + .mta-choice__face {
  border-color: var(--mta-ochre);
  background: var(--mta-ochre-wash);
  color: var(--mta-ink);
  font-weight: 650;
  box-shadow: inset 0 0 0 1px var(--mta-ochre);
}
.mta-choice__card input:focus-visible + .mta-choice__face {
  outline: 2px solid var(--mta-ochre);
  outline-offset: 2px;
}

/* -------------------------------------------------------------------------
   Traveller steppers

   A group size changes by one, almost always. The browser's own spinner
   arrows are four pixels tall and unreachable on a phone, so the field gets
   two real targets either side of it, both at the 48px tap minimum.
   ---------------------------------------------------------------------- */

.mta-fieldgroup {
  grid-column: 1 / -1;
  margin: var(--mta-s2) 0 10px;
  font-size: var(--mta-fs-label);
  font-weight: 700;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  color: var(--mta-ink-3);
}

.mta-stepper {
  display: grid;
  grid-template-columns: var(--mta-tap) minmax(0, 1fr) var(--mta-tap);
  align-items: stretch;
  border: 1px solid var(--mta-line);
  border-radius: var(--mta-field-r);
  background: var(--mta-surface);
  overflow: hidden;
  transition: border-color 0.12s ease, box-shadow 0.12s ease;
}
.mta-stepper:focus-within { border-color: var(--mta-ochre); box-shadow: var(--mta-ring); }

.mta-form .mta-stepper input[type="number"] {
  border: 0;
  border-radius: 0;
  text-align: center;
  padding: 13px 4px;
  font-size: 1.15rem;
  font-weight: 650;
  font-variant-numeric: tabular-nums;
  -moz-appearance: textfield;
  appearance: textfield;
  background: transparent;
}
.mta-form .mta-stepper input[type="number"]:focus { box-shadow: none; outline: none; }
.mta-stepper input[type="number"]::-webkit-outer-spin-button,
.mta-stepper input[type="number"]::-webkit-inner-spin-button { -webkit-appearance: none; margin: 0; }

.mta-stepper__btn {
  display: flex; align-items: center; justify-content: center;
  min-height: var(--mta-tap);
  border: 0;
  background: transparent;
  color: var(--mta-miombo);
  cursor: pointer;
  transition: background-color 0.12s ease, color 0.12s ease;
}
.mta-stepper__btn:hover:not(:disabled) { background: var(--mta-ochre-wash); color: var(--mta-ochre-text); }
.mta-stepper__btn:disabled { color: var(--mta-line); cursor: not-allowed; }

/* With no script the buttons do nothing, so they are not shown and the native
   number field is left exactly as the browser drew it. */
.mta-stepper:not(.is-enhanced) { display: block; border: 0; background: none; overflow: visible; }
.mta-stepper:not(.is-enhanced) .mta-stepper__btn { display: none; }
.mta-form .mta-stepper:not(.is-enhanced) input[type="number"] {
  border: 1px solid var(--mta-line);
  border-radius: var(--mta-field-r);
  text-align: left;
  font-size: 1rem;
  font-weight: 400;
  padding: 13px 15px;
  -moz-appearance: auto;
  appearance: auto;
  background: var(--mta-surface);
}

/* -------------------------------------------------------------------------
   The date field

   The native control is still the thing that submits and the thing the
   browser validates. The script lays a branded trigger over it and opens a
   month grid; without the script the native picker is all that shows, which
   is a working date field rather than a broken custom widget.
   ---------------------------------------------------------------------- */

.mta-datefield { position: relative; }

.mta-datefield__trigger {
  display: grid;
  grid-template-columns: auto minmax(0, 1fr) auto;
  align-items: center;
  gap: 11px;
  width: 100%;
  min-height: var(--mta-field-h);
  padding: 12px 15px;
  text-align: left;
  font-family: var(--mta-font);
  font-size: 1rem;
  color: var(--mta-ink);
  background: var(--mta-surface);
  border: 1px solid var(--mta-line);
  border-radius: var(--mta-field-r);
  cursor: pointer;
  transition: border-color 0.12s ease, box-shadow 0.12s ease;
}
.mta-datefield__trigger[hidden] { display: none; }
.mta-datefield__trigger:hover { border-color: var(--mta-ink-3); }
.mta-datefield__trigger .mta-i { color: var(--mta-ochre-text); }
.mta-datefield__trigger .mta-i:last-child { color: var(--mta-ink-3); transition: transform 0.15s ease; }
.mta-datefield.is-open .mta-datefield__trigger { border-color: var(--mta-ochre); box-shadow: var(--mta-ring); }
.mta-datefield.is-open .mta-datefield__trigger .mta-i:last-child { transform: rotate(180deg); }
.mta-datefield__value { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.mta-datefield:not(.is-set) .mta-datefield__value { color: var(--mta-ink-3); }
.mta-datefield.is-set .mta-datefield__value { font-weight: 600; }

.mta-datefield.is-enhanced > input[type="date"] {
  position: absolute;
  width: 1px; height: 1px;
  padding: 0; margin: -1px;
  overflow: hidden;
  clip: rect(0 0 0 0);
  border: 0;
}

.mta-cal {
  display: none;
  margin-top: 8px;
  padding: var(--mta-s4);
  border: 1px solid var(--mta-line);
  border-radius: var(--mta-card-r);
  background: var(--mta-surface);
  box-shadow: var(--mta-lift);
}
.mta-datefield.is-enhanced.is-open .mta-cal { display: block; }

.mta-cal__head {
  display: grid;
  grid-template-columns: var(--mta-tap) minmax(0, 1fr) var(--mta-tap);
  align-items: center;
  margin-bottom: var(--mta-s3);
}
.mta-cal__month {
  text-align: center;
  font-size: 1.02rem;
  font-weight: 650;
  letter-spacing: -0.01em;
  color: var(--mta-ink);
}
.mta-cal__nav {
  display: flex; align-items: center; justify-content: center;
  width: var(--mta-tap); height: var(--mta-tap);
  border: 1px solid var(--mta-line);
  border-radius: 50%;
  background: var(--mta-surface);
  color: var(--mta-ink-2);
  cursor: pointer;
}
.mta-cal__nav:hover:not(:disabled) { border-color: var(--mta-ochre); color: var(--mta-ochre-text); background: var(--mta-ochre-wash); }
.mta-cal__nav:disabled { opacity: 0.3; cursor: default; }

.mta-cal__dow,
.mta-cal__grid { display: grid; grid-template-columns: repeat(7, minmax(0, 1fr)); gap: 3px; }
.mta-cal__dow { margin-bottom: 6px; }
.mta-cal__dow span {
  text-align: center;
  font-size: 0.7rem;
  font-weight: 700;
  letter-spacing: 0.06em;
  text-transform: uppercase;
  color: var(--mta-ink-3);
}

.mta-cal__day {
  display: flex; align-items: center; justify-content: center;
  min-height: 44px;
  border: 0;
  border-radius: 9px;
  background: transparent;
  font-family: var(--mta-font);
  font-size: 0.95rem;
  font-variant-numeric: tabular-nums;
  color: var(--mta-ink);
  cursor: pointer;
}
.mta-cal__day:hover:not(:disabled) { background: var(--mta-ochre-wash); }
.mta-cal__day:disabled { color: var(--mta-ink-3); opacity: 0.35; cursor: default; }
.mta-cal__day.is-today { box-shadow: inset 0 0 0 1px var(--mta-line); font-weight: 650; }
.mta-cal__day.is-selected,
.mta-cal__day.is-selected:hover {
  background: var(--mta-miombo);
  color: #fff;
  font-weight: 650;
  box-shadow: none;
}
.mta-cal__pad { min-height: 44px; }

.mta-cal__chosen {
  margin: var(--mta-s3) 0 0;
  padding-top: var(--mta-s3);
  border-top: 1px solid var(--mta-line);
  font-size: var(--mta-fs-small);
  font-weight: 600;
  color: var(--mta-ink);
}
.mta-cal__chosen[hidden] { display: none; }
.mta-cal__note { margin: 6px 0 0; font-size: 0.78rem; color: var(--mta-ink-3); }
.mta-cal__done { margin-top: var(--mta-s3); width: 100%; }

/* -------------------------------------------------------------------------
   The trip card
   ---------------------------------------------------------------------- */

.mta-tripcard {
  border: 1px solid var(--mta-line);
  border-radius: var(--mta-card-r);
  background: var(--mta-surface);
  box-shadow: var(--mta-lift);
  overflow: hidden;
}
.mta-tripcard__media { margin: 0; line-height: 0; background: var(--mta-surface-2); }
/* 16:9 in the 352px column is 198px, which is right. Full width on a tablet
   the same ratio is 405px, which is a poster with a form underneath it, so the
   crop is capped rather than the ratio changed. */
.mta-tripcard__img {
  width: 100%;
  height: auto;
  aspect-ratio: 16 / 9;
  max-height: 15rem;
  object-fit: cover;
  display: block;
}

.mta-tripcard__body { padding: var(--mta-s5); }

.mta-tripcard__eyebrow {
  margin: 0 0 6px;
  font-size: var(--mta-fs-label);
  font-weight: 700;
  letter-spacing: 0.1em;
  text-transform: uppercase;
  color: var(--mta-ochre-text);
}
.mta-tripcard__title {
  margin: 0 0 var(--mta-s4);
  font-size: 1.18rem;
  font-weight: 700;
  letter-spacing: -0.02em;
  line-height: 1.28;
  color: var(--mta-miombo);
}

.mta-tripcard__facts,
.mta-tripcard__chosen { margin: 0; display: grid; gap: 10px; }
.mta-tripcard__chosen:not(:empty) { margin-top: 10px; }
.mta-tripcard__facts > div,
.mta-tripcard__chosen > div {
  display: flex; align-items: baseline; justify-content: space-between; gap: var(--mta-s3);
  padding-bottom: 10px;
  border-bottom: 1px solid var(--mta-line);
  font-size: var(--mta-fs-small);
}
.mta-tripcard__chosen > div[hidden] { display: none; }
.mta-tripcard__facts dt,
.mta-tripcard__chosen dt { color: var(--mta-ink-3); flex: 0 0 auto; }
.mta-tripcard__facts dd,
.mta-tripcard__chosen dd { margin: 0; text-align: right; font-weight: 600; color: var(--mta-ink); }

.mta-tripcard__price {
  padding: var(--mta-s5);
  background: var(--mta-ground);
  border-top: 1px solid var(--mta-line);
}
.mta-tripcard__price-label {
  margin: 0 0 10px;
  font-size: var(--mta-fs-label);
  font-weight: 700;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  color: var(--mta-ink-3);
}
.mta-tripcard__pp { margin: 0 0 var(--mta-s3); display: flex; align-items: baseline; gap: 7px; flex-wrap: wrap; }
.mta-tripcard__pp-value { font-size: 1.25rem; font-weight: 650; letter-spacing: -0.02em; color: var(--mta-ink); font-variant-numeric: tabular-nums; }
.mta-tripcard__pp-unit { font-size: var(--mta-fs-small); color: var(--mta-ink-2); }

.mta-tripcard__total {
  margin: 0 0 var(--mta-s3);
  padding-top: var(--mta-s3);
  border-top: 1px solid var(--mta-line);
  display: grid;
  gap: 2px;
}
.mta-tripcard__total-label {
  font-size: var(--mta-fs-label);
  font-weight: 700;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  color: var(--mta-ochre-text);
}
.mta-tripcard__total-value {
  font-size: 2rem;
  font-weight: 700;
  letter-spacing: -0.035em;
  line-height: 1.05;
  color: var(--mta-miombo);
  font-variant-numeric: tabular-nums;
}
.mta-tripcard__basis { font-size: var(--mta-fs-small); color: var(--mta-ink-2); }

.mta-tripcard__onrequest {
  margin: 0 0 var(--mta-s3);
  font-size: 1.4rem;
  font-weight: 700;
  letter-spacing: -0.025em;
  color: var(--mta-miombo);
}
.mta-tripcard__note { margin: 0; max-width: none; font-size: 0.79rem; line-height: 1.55; color: var(--mta-ink-3); }
.mta-tripcard__note [hidden] { display: none; }

/* ---- The running total, beside the traveller pickers ---- */
.mta-liveprice {
  display: flex; align-items: baseline; flex-wrap: wrap; gap: 4px var(--mta-s3);
  margin: var(--mta-s4) 0 0;
  padding: 14px 16px;
  border-radius: var(--mta-field-r);
  background: var(--mta-ochre-wash);
  max-width: none;
}
.mta-liveprice__label {
  font-size: var(--mta-fs-label);
  font-weight: 700;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  color: var(--mta-ochre-text);
  flex: 1 0 100%;
}
.mta-liveprice__value {
  font-size: 1.5rem;
  font-weight: 700;
  letter-spacing: -0.03em;
  color: var(--mta-ink);
  font-variant-numeric: tabular-nums;
}
.mta-liveprice__basis { font-size: var(--mta-fs-small); color: var(--mta-ink-2); }

/* -------------------------------------------------------------------------
   The journey
   ---------------------------------------------------------------------- */

.mta-journey__bar { grid-template-columns: repeat(auto-fit, minmax(0, 1fr)); gap: var(--mta-s3); }
.mta-journey__pip { padding-top: 11px; border-top-width: 2px; }
.mta-journey__step { scroll-margin-top: 120px; }
.mta-journey__legend { font-size: 1.16rem; letter-spacing: -0.015em; margin-bottom: 6px; }
.mta-journey__hint { margin: 0 0 var(--mta-s5); max-width: 56ch; }

.mta-journey__nav { margin-top: var(--mta-s6); }
/**
 * The ghost button was drawn for a dark hero: white text on a transparent
 * ground. On a form, a success card or anywhere else with a light background
 * it was white on white and effectively invisible, which is what the Back
 * button on every multi-stage form was.
 */
.mta-form .mta-btn--ghost,
.mta-formshell .mta-btn--ghost,
.mta-confirm .mta-btn--ghost {
  background: var(--mta-surface);
  color: var(--mta-ink);
  border-color: var(--mta-line);
}
.mta-form .mta-btn--ghost:hover,
.mta-formshell .mta-btn--ghost:hover,
.mta-confirm .mta-btn--ghost:hover {
  background: var(--mta-ochre-wash);
  border-color: var(--mta-ochre);
  color: var(--mta-ochre-text);
}

.mta-journey__nav .mta-btn--ghost { order: -1; }

.mta-form__actions { display: flex; flex-wrap: wrap; gap: var(--mta-s3); align-items: center; }
.mta-btn--send { min-width: 15rem; }
.mta-form__consent { margin: var(--mta-s3) 0 0; font-size: 0.8rem; color: var(--mta-ink-3); max-width: 60ch; }
.mta-journey__end { display: grid; gap: 0; }

/* ---- Reassurance ---- */
.mta-trust {
  list-style: none;
  margin: 0;
  padding: var(--mta-s4) 0 0;
  border-top: 1px solid var(--mta-line);
  display: grid;
  gap: 9px;
}
.mta-trust li {
  display: flex; align-items: flex-start; gap: 9px;
  font-size: 0.84rem;
  line-height: 1.45;
  color: var(--mta-ink-2);
}
.mta-trust .mta-i { color: var(--mta-whatsapp); flex: 0 0 auto; margin-top: 1px; }

/* -------------------------------------------------------------------------
   The success state
   ---------------------------------------------------------------------- */

.mta-confirm {
  border: 1px solid var(--mta-line);
  border-top: 3px solid var(--mta-whatsapp);
  border-radius: var(--mta-card-r);
  background: var(--mta-surface);
  box-shadow: var(--mta-lift);
  padding: var(--mta-s7) var(--mta-s6);
}
.mta-confirm__mark { color: var(--mta-whatsapp); margin: 0 0 var(--mta-s4); line-height: 0; }
.mta-confirm__title {
  margin: 0 0 10px;
  font-size: clamp(1.4rem, 3vw, 1.8rem);
  font-weight: 700;
  letter-spacing: -0.024em;
  line-height: 1.2;
  color: var(--mta-miombo);
}
.mta-confirm__lead { margin: 0 0 var(--mta-s5); font-size: 1.02rem; line-height: 1.6; color: var(--mta-ink-2); }

.mta-confirm__ref {
  display: grid;
  gap: 3px;
  margin: 0 0 var(--mta-s6);
  padding: var(--mta-s4) var(--mta-s5);
  border-radius: var(--mta-field-r);
  background: var(--mta-ochre-wash);
  max-width: none;
}
.mta-confirm__ref-label {
  font-size: var(--mta-fs-label);
  font-weight: 700;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  color: var(--mta-ochre-text);
}
.mta-confirm__ref strong {
  font-size: 1.35rem;
  font-weight: 700;
  letter-spacing: 0.05em;
  font-family: ui-monospace, SFMono-Regular, Menlo, Consolas, monospace;
  color: var(--mta-ink);
  word-break: break-all;
}
.mta-confirm__ref-hint { font-size: 0.8rem; line-height: 1.5; color: var(--mta-ink-2); }

.mta-confirm__h {
  margin: 0 0 var(--mta-s4);
  font-size: var(--mta-fs-label);
  font-weight: 700;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  color: var(--mta-ochre-text);
}
.mta-confirm__next { margin: 0 0 var(--mta-s6); }
.mta-confirm__actions { display: flex; gap: var(--mta-s3); flex-wrap: wrap; margin: 0; }

/* -------------------------------------------------------------------------
   Narrow screens

   Tested at 320, 360, 375, 390, 414 and 430. The two-column field row is the
   first thing to go: two half-width inputs at 320px leave 130px each, which
   is not a field, it is a suggestion of one.
   ---------------------------------------------------------------------- */

@media (max-width: 640px) {
  /* One column, and the space between fields comes from the field's own
     padding so that subgrid keeps working. A row gap here would be added on
     top of it and every field would drift 32px apart. */
  .mta-form__row { grid-template-columns: minmax(0, 1fr); column-gap: var(--mta-s4); row-gap: var(--mta-s4); }
  .mta-field--half { grid-column: 1 / -1; }

  @supports (grid-template-rows: subgrid) {
    .mta-form__row { row-gap: 0; }
    .mta-form__row > .mta-field { padding-bottom: var(--mta-s5); }
    .mta-form__row > .mta-field:last-child { padding-bottom: 0; }
  }

  .mta-journey__bar { gap: 8px; }
  .mta-journey__pip-label { display: none; }
  .mta-journey__pip { justify-content: center; padding-top: 9px; }

  .mta-form__actions { display: grid; }
  .mta-form__actions .mta-btn { width: 100%; justify-content: center; }
  .mta-btn--send { min-width: 0; }
  .mta-journey__nav { display: grid; gap: 10px; }
  .mta-journey__nav .mta-btn { width: 100%; justify-content: center; }

  .mta-tripcard__body,
  .mta-tripcard__price { padding: var(--mta-s4); }
  .mta-tripcard__total-value { font-size: 1.75rem; }

  .mta-confirm { padding: var(--mta-s5) var(--mta-s4); }
  .mta-confirm__actions { display: grid; }
  .mta-confirm__actions .mta-btn { width: 100%; justify-content: center; }

  .mta-cal { padding: var(--mta-s3); }
  .mta-cal__day, .mta-cal__pad { min-height: 42px; }

  .mta-bookband { margin-top: var(--mta-s6); padding-top: var(--mta-s5); }
}

@media (max-width: 380px) {
  /* At 320 the card grid has to be one column or the labels wrap mid-word. */
  .mta-choice__grid { grid-template-columns: minmax(0, 1fr); }
  .mta-tripcard__facts > div,
  .mta-tripcard__chosen > div { flex-direction: column; align-items: flex-start; gap: 2px; }
  .mta-tripcard__facts dd,
  .mta-tripcard__chosen dd { text-align: left; }
}

/* Nobody needs the price to slide into place. */
@media (prefers-reduced-motion: reduce) {
  .mta-form input,
  .mta-form select,
  .mta-form textarea,
  .mta-choice__face,
  .mta-stepper,
  .mta-stepper__btn,
  .mta-datefield__trigger { transition: none; }
  .mta-datefield__trigger .mta-i:last-child { transition: none; }
}

/* =========================================================================
   BOOK WITH CONFIDENCE
   The trust panel on a trip page. Sits between the quick facts and the
   overview, which is the moment a first-time visitor decides whether to keep
   reading. Two columns from 560px because the list is scanned, not read, and
   a single tall column pushes the overview below the fold on a phone.
   ========================================================================= */

.mta-confidence {
  margin: var(--mta-s5) 0 var(--mta-s6);
  padding: var(--mta-s5);
  background: var(--mta-gold-wash);
  border: 1px solid var(--mta-line);
  border-radius: var(--mta-radius);
}

.mta-confidence__title {
  margin: 0 0 var(--mta-s4);
  font-size: var(--mta-fs-h3);
  font-weight: 700;
  line-height: 1.25;
  color: var(--mta-forest);
}

.mta-confidence__list {
  display: grid;
  gap: var(--mta-s3) var(--mta-s5);
  margin: 0;
  padding: 0;
  list-style: none;
}

@media (min-width: 560px) {
  .mta-confidence__list { grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); }
}

.mta-confidence__item {
  display: flex;
  gap: var(--mta-s3);
  align-items: flex-start;
  margin: 0;
  font-size: var(--mta-fs-small);
  line-height: 1.45;
  color: var(--mta-ink);
}

.mta-confidence__icon {
  flex: 0 0 auto;
  display: inline-flex;
  /* Optical alignment: the cap height of the first line, not the line box. */
  margin-top: 1px;
  color: var(--mta-gold-text);
}

.mta-confidence__icon svg { display: block; }

.mta-confidence__text { min-width: 0; }

@media (max-width: 380px) {
  .mta-confidence { padding: var(--mta-s4); }
}

/* =========================================================================
   TRIP FINDER, DEPARTURE CHIPS, ACTIVE FILTERS
   Three optional fields in the hero and repeated above the results. It is a
   filter, not an availability search: no date field, because this operator
   quotes by hand and a date picker that returns "Request a quote" promises
   something the business does not do.
   ========================================================================= */

.mta-finder {
  display: grid;
  gap: var(--mta-s3);
  width: 100%;
  margin: var(--mta-s5) 0 var(--mta-s5);
  padding: var(--mta-s4);
  background: rgba(255, 255, 255, 0.96);
  border-radius: var(--mta-card-r, 14px);
  box-shadow: 0 10px 30px rgba(42, 34, 24, 0.18);
  text-align: left;
}

/* On the results page the finder sits on the page ground, not over a photo. */
.mta-finder--bar {
  margin: 0 0 var(--mta-s4);
  background: var(--mta-surface);
  border: 1px solid var(--mta-line);
  box-shadow: none;
}

@media (min-width: 820px) {
  .mta-finder {
    grid-template-columns: minmax(0, 1fr) minmax(0, 1fr) minmax(0, 1fr) auto;
    align-items: end;
    gap: var(--mta-s4);
  }
}

.mta-finder__field { min-width: 0; }

.mta-finder__label {
  display: block;
  margin-bottom: 6px;
  font-size: var(--mta-fs-label);
  font-weight: 700;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  color: var(--mta-ink-2);
}

.mta-finder__control {
  width: 100%;
  min-height: var(--mta-field-h, 52px);
  padding: 0 40px 0 var(--mta-s3);
  font: inherit;
  font-size: var(--mta-fs-body);
  color: var(--mta-ink);
  background: var(--mta-surface);
  border: 1px solid var(--mta-line);
  border-radius: var(--mta-field-r, 9px);
  appearance: none;
}

.mta-finder__control:focus-visible {
  outline: none;
  border-color: var(--mta-gold);
  box-shadow: var(--mta-ring, 0 0 0 3px rgba(140, 115, 38, 0.28));
}

.mta-finder__submit {
  min-height: var(--mta-field-h, 52px);
  white-space: nowrap;
}

@media (max-width: 819px) {
  .mta-finder__submit { width: 100%; }
}

/* ---- Departure chips ---- */

.mta-departures {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: var(--mta-s3) var(--mta-s4);
  max-width: var(--mta-maxw);
  margin: 0 auto;
  padding: var(--mta-s5) var(--mta-s4);
}

.mta-departures__lead {
  font-size: var(--mta-fs-label);
  font-weight: 700;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  color: var(--mta-ink-2);
}

.mta-departures__list {
  display: flex;
  flex-wrap: wrap;
  gap: var(--mta-s2);
  margin: 0;
  padding: 0;
  list-style: none;
}

.mta-departures__chip {
  display: inline-flex;
  gap: 8px;
  align-items: center;
  min-height: var(--mta-tap);
  padding: 0 var(--mta-s4);
  font-size: var(--mta-fs-small);
  font-weight: 600;
  color: var(--mta-forest);
  text-decoration: none;
  background: var(--mta-surface);
  border: 1px solid var(--mta-line);
  border-radius: 999px;
  transition: border-color 0.15s ease, background-color 0.15s ease;
}

.mta-departures__chip:hover,
.mta-departures__chip:focus-visible {
  background: var(--mta-gold-wash);
  border-color: var(--mta-gold);
}

.mta-departures__chip svg { color: var(--mta-gold-text); }

.mta-departures__count {
  padding: 1px 8px;
  font-size: 0.78em;
  font-weight: 700;
  color: var(--mta-ink-2);
  background: var(--mta-surface-2);
  border-radius: 999px;
}

/* ---- Active filter summary ---- */

.mta-activefilters {
  display: flex;
  flex-wrap: wrap;
  gap: var(--mta-s2);
  align-items: center;
  margin: 0 0 var(--mta-s4);
  font-size: var(--mta-fs-small);
}

.mta-activefilters__lead {
  font-weight: 700;
  color: var(--mta-ink-2);
}

.mta-activefilters__pill {
  padding: 4px 12px;
  color: var(--mta-forest);
  background: var(--mta-gold-wash);
  border: 1px solid var(--mta-line);
  border-radius: 999px;
}

.mta-activefilters__clear {
  color: var(--mta-gold-text);
  font-weight: 600;
}

/* =========================================================================
   PLANNING HELP
   Four things a tour page cannot answer in the abstract, offered as service
   rather than filled with generalities. Two columns from 640px; the bodies
   are short enough that three would leave orphan lines.
   ========================================================================= */

.mta-planning__lead {
  max-width: 54ch;
  margin: 0 0 var(--mta-s5);
  color: var(--mta-ink-2);
}

.mta-planning__grid {
  display: grid;
  gap: var(--mta-s5);
}

@media (min-width: 640px) {
  .mta-planning__grid { grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); }
}

.mta-planning__item {
  padding: var(--mta-s5);
  background: var(--mta-surface);
  border: 1px solid var(--mta-line);
  border-radius: var(--mta-card-r, 14px);
}

.mta-planning__icon {
  display: inline-flex;
  margin-bottom: var(--mta-s3);
  color: var(--mta-gold-text);
}

.mta-planning__icon svg { display: block; }

.mta-planning__title {
  margin: 0 0 var(--mta-s2);
  font-size: var(--mta-fs-h3);
  font-weight: 700;
  line-height: 1.3;
  color: var(--mta-forest);
}

.mta-planning__body {
  margin: 0;
  font-size: var(--mta-fs-small);
  line-height: 1.55;
  color: var(--mta-ink-2);
}

/* =========================================================================
   CARD SYSTEM, v4
   The card is the most repeated object on the site: it carries the homepage,
   every hub, related trips and the mega menu. Raising it raises the whole
   site, so this is where the design language is set rather than in any one
   page.
   ========================================================================= */

.mta-card {
  box-shadow: 0 1px 2px rgba(42, 34, 24, 0.04);
  transition: border-color 0.18s ease, transform 0.18s ease, box-shadow 0.18s ease;
}

.mta-card:hover,
.mta-card:focus-visible {
  border-color: var(--mta-gold);
  transform: translateY(-3px);
  box-shadow: 0 12px 28px rgba(42, 34, 24, 0.14);
}

/* The figure is the positioning context for the badge, nothing more. */
.mta-card__figure {
  position: relative;
  overflow: hidden;
}

.mta-card__figure .mta-card__media {
  transition: transform 0.35s ease;
}

.mta-card:hover .mta-card__media { transform: scale(1.035); }

/**
 * Duration badge.
 *
 * Solid forest rather than a translucent tint: a photograph can be any colour
 * and a wash that reads on a dark hide is invisible on a salt flat. Solid is
 * the only treatment that holds contrast against every image in the library.
 */
.mta-card__badge {
  position: absolute;
  top: var(--mta-s3);
  left: var(--mta-s3);
  padding: 5px 10px;
  font-size: 0.72rem;
  font-weight: 700;
  letter-spacing: 0.04em;
  color: #fff;
  background: var(--mta-forest);
  border-radius: 6px;
}

.mta-card__rating {
  display: flex;
  gap: 8px;
  align-items: center;
  margin: 0;
  font-size: 0.8rem;
  color: var(--mta-ink-2);
}

.mta-card__stars {
  display: inline-flex;
  gap: 1px;
  color: var(--mta-gold);
}

.mta-card__stars svg { display: block; }

.mta-card__meta { color: var(--mta-gold-text); }

.mta-card__price-lead {
  display: block;
  font-size: 0.66rem;
  font-weight: 700;
  letter-spacing: 0.1em;
  text-transform: uppercase;
  color: var(--mta-ink-3);
}

.mta-card__price-amt {
  font-size: 1.22rem;
  font-weight: 750;
  color: var(--mta-forest);
}

/**
 * The unpriced card carries an action, not a shrug. It is set in the same
 * gold as the "View trip" link so the eye reads one row of intent rather
 * than a missing figure beside a live one.
 */
.mta-card__price--pending {
  font-size: 0.92rem;
  font-weight: 700;
  color: var(--mta-gold-text);
}

.mta-card__cta {
  display: inline-flex;
  gap: 5px;
  align-items: center;
  white-space: nowrap;
}

.mta-card:hover .mta-card__cta { color: var(--mta-gold-hover); }

/* =========================================================================
   SECTION RHYTHM
   Alternating grounds give a long page a pulse, so a reader can tell one
   band from the next while scrolling on a phone. Sand and white alternate;
   nothing else is introduced, because a third ground reads as a mistake.
   ========================================================================= */

.mta-band--tint { background: var(--mta-surface); }

.mta-band__title {
  position: relative;
  padding-bottom: var(--mta-s3);
}

/* One gold rule under a section heading, the site's only decorative mark. */
.mta-band__title::after {
  content: "";
  position: absolute;
  left: 0;
  bottom: 0;
  width: 56px;
  height: 3px;
  background: var(--mta-gold);
  border-radius: 2px;
}

/* The chip row inside a band already has the band's gutter, so it drops its
   own and its outer max-width rather than nesting two containers. */
.mta-departures--flush {
  max-width: none;
  padding: 0;
  margin-top: var(--mta-s4);
}

/* =========================================================================
   WHERE YOU STAY
   The accommodation and meals table. Horizontally scrollable on a phone
   rather than wrapped: lodge names are long, and a wrapped three-column
   table at 360px is unreadable in a way a scrolled one is not.
   ========================================================================= */

.mta-stays__lead {
  max-width: 60ch;
  margin: 0 0 var(--mta-s4);
  color: var(--mta-ink-2);
}

.mta-stays__scroll {
  overflow-x: auto;
  border: 1px solid var(--mta-line);
  border-radius: var(--mta-card-r, 14px);
  background: var(--mta-surface);
  /* Momentum scrolling on iOS, and a visible edge when there is more to see. */
  -webkit-overflow-scrolling: touch;
}

.mta-stays__table {
  width: 100%;
  border-collapse: collapse;
  font-size: var(--mta-fs-small);
}

.mta-stays__table th,
.mta-stays__table td {
  padding: var(--mta-s3) var(--mta-s4);
  text-align: left;
  vertical-align: top;
  border-bottom: 1px solid var(--mta-line);
}

.mta-stays__table tbody tr:last-child th,
.mta-stays__table tbody tr:last-child td { border-bottom: 0; }

.mta-stays__table thead th {
  font-size: var(--mta-fs-label);
  font-weight: 700;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  color: var(--mta-ink-2);
  background: var(--mta-gold-wash);
  white-space: nowrap;
}

.mta-stays__table tbody th {
  font-weight: 700;
  color: var(--mta-forest);
  white-space: nowrap;
}

.mta-stays__none { color: var(--mta-ink-3); }

/* =========================================================================
   CHROME, v4.1
   -------------------------------------------------------------------------
   The header, the navigation, the card and the section rhythm, rebuilt to
   the structure measured off the reference site.

   What was measured, so a later edit knows what it is changing and why:

     bar           fixed to the top, 60px tall, one bar and no second strip,
                   solid accent fill, shadow 0 4px 12px rgba(0,0,0,.07)
     nav link      13px, weight 300, uppercase, white, 8px padding
     dropdown link 13px, weight 300, dark ink, 7px 2px padding
     container     1140px
     section       48px top and bottom, white band on a light page
     card          white, 8px radius, shadow 0 2px 3px rgba(0,0,0,.18),
                   no border, title reversed out over the image at 19px/700,
                   then label/value specification rows at 14px, then a
                   rating row, then a price row
     chip          7px radius, 10px 12px, 13px/700, white at rest and a
                   tinted accent when active
     price         green, because on a page of prices green is the only
                   colour a scanning eye reads as a number rather than as
                   decoration

   The one thing not taken from the reference is the hue. The accent below
   is the brand's own forest green, not the reference's crimson, because the
   palette was specified separately and by name. Every accent in this block
   reads from --mta-accent, so the whole site changes hue from one line.
   ========================================================================= */

:root {
  --mta-accent:       var(--mta-forest);
  --mta-accent-soft:  var(--mta-forest-soft);
  --mta-accent-tint:  rgba(45, 62, 36, 0.08);
  --mta-accent-line:  rgba(45, 62, 36, 0.18);

  /* 6.50:1 on white, computed rather than guessed. */
  --mta-price:        #0F6D24;

  --mta-shadow-card:  0 2px 3px rgba(0, 0, 0, 0.18);
  --mta-shadow-bar:   0 4px 12px rgba(0, 0, 0, 0.07);
  --mta-shadow-pop:   0 12px 32px rgba(0, 0, 0, 0.14);
}

/* -------------------------------------------------------------------------
   The bar
   ------------------------------------------------------------------------- */

.mta-header {
  position: fixed;
  inset: 0 0 auto 0;
  z-index: 900;
  background: var(--mta-accent);
  box-shadow: var(--mta-shadow-bar);
  border-bottom: 0;
}

/* The bar is out of flow, so the page has to make room for it. */
body { padding-top: var(--mta-bar); }

/* An in-page anchor must not land under the bar. */
:target,
[id] { scroll-margin-top: calc(var(--mta-bar) + 16px); }

/* The second strip is folded into the single bar on desktop. Its contact
   links survive, moved to the right of the nav, because they convert; the
   claim line does not survive, because at 60px there is no room for a
   sentence and a sentence nobody reads is worse than white space. */
.mta-header__strip { display: none; }

.mta-header__in {
  max-width: none;
  width: 100%;
  min-height: var(--mta-bar);
  padding-inline: var(--mta-s7);
  display: flex;
  align-items: center;
  gap: var(--mta-s5);
  border-bottom: 0;
}

.mta-header__logo { display: flex; align-items: center; padding-block: 4px; }
.mta-header__logo-img {
  height: 50px;
  width: auto;
  max-height: 50px;
  display: block;
}

/* -------------------------------------------------------------------------
   Navigation
   ------------------------------------------------------------------------- */

.mta-nav { margin-inline-end: auto; }

.mta-nav__list {
  display: flex;
  align-items: center;
  gap: var(--mta-s1);
  list-style: none;
  margin: 0;
  padding: 0;
}

.mta-nav__list > li > a,
.mta-nav__link {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  padding: var(--mta-s2);
  font-size: 13px;
  font-weight: 300;
  line-height: 1.2;
  text-transform: uppercase;
  letter-spacing: 0.02em;
  color: #FFFFFF;
  text-decoration: none;
  border-radius: 6px;
  white-space: nowrap;
  transition: background-color .15s ease;
}

.mta-nav__list > li > a:hover,
.mta-nav__link:hover,
.mta-nav__list > li.is-open > a {
  background: rgba(255, 255, 255, 0.14);
  color: #FFFFFF;
}

/* Keyboard focus has to survive on a dark bar, where the default ink ring
   is invisible. White ring, offset so it reads as a ring and not a fill. */
.mta-nav__list > li > a:focus-visible,
.mta-header__act:focus-visible,
.mta-header__burger:focus-visible {
  outline: 2px solid #FFFFFF;
  outline-offset: 2px;
}

.mta-nav__toggle {
  background: none;
  border: 0;
  padding: 2px;
  color: inherit;
  display: inline-flex;
  cursor: pointer;
}
.mta-nav__toggle svg { transition: transform .18s ease; }
.mta-nav__item.is-open > .mta-nav__toggle svg,
.menu-item-has-children.is-open > .mta-nav__toggle svg { transform: rotate(180deg); }

/* -------------------------------------------------------------------------
   Dropdown and mega panel
   ------------------------------------------------------------------------- */

.mta-nav__list .sub-menu,
.mta-nav__mega {
  position: absolute;
  top: 100%;
  background: #FFFFFF;
  border-radius: 0 0 var(--mta-radius) var(--mta-radius);
  box-shadow: var(--mta-shadow-pop);
  padding: var(--mta-s4);
  margin: 0;
  list-style: none;
  z-index: 10;
}

.mta-nav__list .sub-menu { min-width: 260px; }

.mta-nav__list .sub-menu a {
  display: block;
  padding: 7px 2px;
  font-size: 13px;
  font-weight: 300;
  line-height: 1.4;
  color: var(--mta-ink);
  text-decoration: none;
  border-radius: 4px;
}
.mta-nav__list .sub-menu a:hover {
  color: var(--mta-accent);
  background: var(--mta-accent-tint);
  padding-inline: 6px;
}

/* The tabbed mega panel already exists, built earlier in this file around
   .mta-mega__in / .mta-mega__side / .mta-mega__panels, and it already does
   the thing the reference does: a column of subjects on the left, the links
   for the chosen subject on the right, swapped on hover and, unlike the
   reference's, operable from the keyboard as a real tablist.

   So this block does not rebuild it. It restyles the two parts whose
   measurements changed, and nothing else, because a second layout for the
   same component is how a stylesheet starts fighting itself.

   The !important flags below are not enthusiasm. An earlier block in this
   file sets .mta-mega__tab background with !important to win against a
   Kadence rule that styles every button in the header; matching it is the
   only way to change the colour without unpicking that fight first.       */

.mta-nav__mega,
.mta-mega__in {
  max-width: var(--mta-maxw);
}

.mta-mega__tab {
  font-size: 13px !important;
  font-weight: 700 !important;
  line-height: 1.3 !important;
  border-radius: var(--mta-radius-sm) !important;
}
.mta-mega__tab.is-active,
.mta-mega__tab[aria-selected="true"] {
  background-color: var(--mta-accent-tint) !important;
  color: var(--mta-accent) !important;
  box-shadow: inset 0 0 0 1px var(--mta-accent-line);
}

.mta-mega__links a {
  font-size: 13px;
  font-weight: 300;
  padding-block: 7px;
}
.mta-mega__links a:hover { color: var(--mta-accent); }

/* -------------------------------------------------------------------------
   Bar actions
   ------------------------------------------------------------------------- */

.mta-header__actions {
  display: flex;
  align-items: center;
  gap: var(--mta-s2);
}

.mta-header__act {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  padding: 7px 12px;
  font-size: 13px;
  font-weight: 700;
  line-height: 1.2;
  color: #FFFFFF;
  text-decoration: none;
  border: 1px solid rgba(255, 255, 255, 0.35);
  border-radius: var(--mta-radius-sm);
  white-space: nowrap;
}
.mta-header__act:hover { background: rgba(255, 255, 255, 0.14); color: #FFFFFF; }

/* The one filled control on the bar. On a solid accent bar a second filled
   button would compete with it, which is why the others are outlined. */
.mta-header__act--primary {
  background: var(--mta-gold);
  border-color: var(--mta-gold);
  color: #FFFFFF;
}
.mta-header__act--primary:hover { background: var(--mta-gold-hover); border-color: var(--mta-gold-hover); }

.mta-header__burger {
  display: none;
  align-items: center;
  justify-content: center;
  width: 42px;
  height: 42px;
  padding: 0;
  background: none;
  border: 1px solid rgba(255, 255, 255, 0.35);
  border-radius: var(--mta-radius-sm);
  color: #FFFFFF;
  cursor: pointer;
}

/* -------------------------------------------------------------------------
   Section rhythm
   ------------------------------------------------------------------------- */

.mta-section,
.mta-band {
  padding-block: var(--mta-s7);
}

.mta-section > *,
.mta-band > * {
  max-width: var(--mta-maxw);
  margin-inline: auto;
  padding-inline: var(--mta-s4);
}

/* The eyebrow above a section heading. Small, heavy, wide-tracked, accent
   coloured. It is the only place on the site where type is set in capitals
   at a weight above 500. */
.mta-eyebrow {
  display: block;
  margin: 0 0 var(--mta-s2);
  font-size: var(--mta-fs-label);
  font-weight: 700;
  line-height: 1;
  letter-spacing: 0.16em;
  text-transform: uppercase;
  color: var(--mta-accent);
}

/* -------------------------------------------------------------------------
   The card
   ------------------------------------------------------------------------- */

.mta-card {
  position: relative;
  display: flex;
  flex-direction: column;
  background: #FFFFFF;
  border: 0;
  border-radius: var(--mta-radius);
  box-shadow: var(--mta-shadow-card);
  overflow: hidden;
  text-decoration: none;
  color: var(--mta-ink);
  transition: transform .18s ease, box-shadow .18s ease;
}
.mta-card:hover {
  transform: translateY(-2px);
  box-shadow: 0 8px 18px rgba(0, 0, 0, 0.16);
}

.mta-card__figure {
  position: relative;
  margin: 0;
  aspect-ratio: 4 / 3;
  overflow: hidden;
  border-radius: var(--mta-radius) var(--mta-radius) 0 0;
  background: var(--mta-surface-2);
}
.mta-card__figure img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  display: block;
}

/* The title sits on the photograph, not under it. This is the reference's
   most useful card decision and it is worth saying why it works: it buys
   back the vertical space a title would otherwise take, so the whole card
   is shorter and more of them fit above the fold, and it ties the name to
   the picture instead of leaving the picture to be decoration.

   It only works with a gradient behind it. White text straight onto a
   photograph is legible on the photographs you tested and illegible on the
   one someone uploads next month. The scrim below is not optional.        */
.mta-card__figure::after {
  content: "";
  position: absolute;
  inset: auto 0 0 0;
  height: 62%;
  background: linear-gradient(to top, rgba(0, 0, 0, 0.78) 0%, rgba(0, 0, 0, 0.45) 45%, rgba(0, 0, 0, 0) 100%);
  pointer-events: none;
}

.mta-card__title {
  position: absolute;
  left: 0;
  right: 0;
  bottom: 0;
  z-index: 1;
  margin: 0;
  padding: 12px 10px;
  font-size: var(--mta-fs-h3);
  font-weight: 700;
  line-height: 1.25;
  color: #FFFFFF;
  text-shadow: 0 1px 2px rgba(0, 0, 0, 0.5);
}

.mta-card__badge {
  position: absolute;
  top: var(--mta-s2);
  left: var(--mta-s2);
  z-index: 1;
  padding: 5px 9px;
  font-size: 12px;
  font-weight: 700;
  line-height: 1;
  color: var(--mta-ink);
  background: rgba(255, 255, 255, 0.94);
  border-radius: var(--mta-radius-sm);
}

.mta-card__body {
  display: flex;
  flex-direction: column;
  gap: var(--mta-s2);
  padding: var(--mta-s3) var(--mta-s3) var(--mta-s4);
}

/* Label/value specification rows. The label is bold and the value is not,
   which is the reverse of the usual instinct and is correct here: someone
   comparing four cards scans down the same label in each one, so the label
   is the thing that has to be findable. */
.mta-card__specs {
  display: grid;
  gap: 3px;
  margin: 0;
  font-size: var(--mta-fs-small);
  line-height: 1.45;
}
.mta-card__spec { display: flex; gap: 5px; }
.mta-card__spec dt { font-weight: 700; margin: 0; }
.mta-card__spec dd { margin: 0; color: var(--mta-ink-2); }

.mta-card__rating {
  display: flex;
  align-items: center;
  gap: 5px;
  font-size: var(--mta-fs-small);
}
.mta-card__rating strong { font-size: var(--mta-fs-body); font-weight: 700; }
.mta-card__rating .mta-card__outof { color: var(--mta-ink-3); }
.mta-card__rating .mta-card__reviews { color: var(--mta-ink-2); }

.mta-card__price {
  display: flex;
  align-items: baseline;
  gap: 6px;
  margin-top: auto;
  padding-top: var(--mta-s2);
}
.mta-card__from {
  font-size: var(--mta-fs-small);
  font-style: italic;
  color: var(--mta-ink-3);
}
.mta-card__amount {
  font-size: 17px;
  font-weight: 700;
  color: var(--mta-price);
}
/* A trip with no published price says so in ink, not in green. Green is
   reserved for a number; putting "Request a quote" in it would train the
   eye to read the colour as noise. */
.mta-card__quote {
  font-size: 15px;
  font-weight: 700;
  color: var(--mta-accent);
}

/* -------------------------------------------------------------------------
   Chips
   ------------------------------------------------------------------------- */

.mta-chip {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  padding: 10px 12px;
  font-size: 13px;
  font-weight: 700;
  line-height: 1.2;
  color: var(--mta-ink);
  background: #FFFFFF;
  border: 1px solid var(--mta-line);
  border-radius: var(--mta-radius-sm);
  text-decoration: none;
  cursor: pointer;
  white-space: nowrap;
}
.mta-chip:hover { border-color: var(--mta-accent-line); }
.mta-chip[aria-pressed="true"],
.mta-chip.is-active {
  background: var(--mta-accent-tint);
  border-color: var(--mta-accent-line);
  color: var(--mta-accent);
}
.mta-chip__count { color: var(--mta-ink-3); font-weight: 400; }

/* -------------------------------------------------------------------------
   Mobile
   -------------------------------------------------------------------------
   The bar keeps its height and its fill; the nav leaves it for the drawer.
   Nothing below 1024px relies on hover, because a tap that only reveals a
   menu is a tap the visitor did not mean to spend.
   ------------------------------------------------------------------------- */

@media (max-width: 1024px) {

  .mta-header__in { padding-inline: var(--mta-s4); gap: var(--mta-s3); }

  .mta-nav { display: none; }

  .mta-header__burger { display: inline-flex; }

  /* Phone stays on the bar at every width. It is the fastest conversion
     on the site and it is one tap. The rest move into the drawer. */
  .mta-header__act:not(.mta-header__act--phone) { display: none; }

  /* The mega panel's own responsive rules live with the component earlier
     in this file. Nothing is repeated here. */
}

@media (max-width: 600px) {
  .mta-header__logo-img { height: 40px; max-height: 40px; }
  .mta-header__act--phone { padding: 7px 9px; }
  .mta-card__title { font-size: 1.0625rem; }
}

/* =========================================================================
   CHROME CORRECTIONS, measured on the live 4.1.0 build
   -------------------------------------------------------------------------
   Three things the first pass got wrong, each found by measuring the live
   page rather than by reading the file back:

   1. The bar rendered 84px, not 60px. min-height was set and honoured, but
      nothing stopped the row wrapping: logo plus a 600px navigation plus
      three action buttons exceeds the track at some widths, the flex line
      broke, and a two-row bar is taller than its min-height by definition.
      body still reserved 60px, so the second row sat over the page.

      Fixed by making the bar a fixed height rather than a minimum, refusing
      to wrap, and letting the navigation be the thing that gives way. A
      navigation that scrolls is recoverable. A header that eats the top of
      the page is not.

   2. Section headings rendered 36px. .mta-band__title carries its own size
      and was never going to inherit the new h2 token.

   3. Site Kit still loaded Google Fonts. It enqueues Google Sans for its
      own front-end notices, later than the sweep in inc/performance.php
      ran, so the sweep now runs again on wp_print_styles as well.
   ========================================================================= */

.mta-header__in {
  height: var(--mta-bar);
  min-height: var(--mta-bar);
  flex-wrap: nowrap;
}

.mta-header__logo { flex: 0 0 auto; }

/* The navigation is the flexible element and the only one allowed to lose
   space. overflow-x lets a long menu scroll rather than push the bar open;
   scrollbar-width:none keeps that from showing as a grey bar under the
   links on Firefox and Windows Chrome. */
.mta-nav {
  min-width: 0;
  flex: 1 1 auto;
  overflow-x: auto;
  overflow-y: hidden;
  scrollbar-width: none;
}
.mta-nav::-webkit-scrollbar { display: none; }

.mta-header__actions { flex: 0 0 auto; }

/* Below 1280px the phone number becomes its icon. The tap target and the
   tel: link are unchanged; only the digits go, and they are the first thing
   worth losing because nobody reads a phone number off a header, they press
   it. */
@media (max-width: 1280px) {
  .mta-header__act--phone .mta-header__act-label { display: none; }
  .mta-header__act--phone { padding-inline: 9px; }
}
@media (max-width: 1140px) {
  .mta-header__act--wa .mta-header__act-label { display: none; }
  .mta-header__act--wa { padding-inline: 9px; }
}

/* Section headings, to the measured 30px at weight 500. */
.mta-band__title,
.mta-split__title,
.mta-section > h2,
.mta-section h2 {
  font-size: var(--mta-fs-h2);
  font-weight: 500;
  letter-spacing: -0.01em;
  line-height: 1.3;
}

/* =========================================================================
   LOGO ON A DARK BAR
   -------------------------------------------------------------------------
   Measured on the live 4.1.2 build: the logo is dark green artwork on a
   transparent background, and the bar is now dark green. At 125 x 50 it was
   legible only as a slightly different shade of the bar behind it. A visitor
   arriving on the homepage could not read the company's own name.

   The fix is a filter rather than a new file. brightness(0) crushes every
   channel to black, invert(1) lifts it to white, and alpha is untouched, so
   a transparent PNG comes out as a clean white wordmark with no halo. It
   costs nothing, needs no upload, and reverses the moment the bar changes
   colour or a light-on-dark logo is supplied.

   What it does not do is handle a multi-coloured logo well: everything
   becomes one flat white. For this mark, which is a paw print and two
   words in a single colour, that is exactly right. If a colour logo is
   introduced later, replace this rule with a second logo file rather than
   trying to tune the filter.
   ========================================================================= */

.mta-header__logo-img {
  filter: brightness(0) invert(1);
}

/* The drawer is a light panel, so the logo goes back to its own colours
   there if it ever appears in one. */
.mta-drawer .mta-header__logo-img { filter: none; }

/* The hero headline at the measured weight. 800 was heavier than anything
   the reference sets and it made the two-line hero read as a shout; 700 at
   48px carries the same presence without it. */
.mta-hero__title { font-weight: 700; }

/* =========================================================================
   SORT AND RESULT COUNT
   ========================================================================= */

.mta-sort {
  display: flex;
  align-items: center;
  gap: var(--mta-s2);
  flex-wrap: wrap;
  margin: 0 0 var(--mta-s4);
  padding-bottom: var(--mta-s3);
  border-bottom: 1px solid var(--mta-line);
}

/* The count pushes the sort to the right on a wide screen and sits above it
   on a narrow one, which is the only arrangement that reads correctly at
   both ends without a second rule. */
.mta-sort__count {
  margin: 0 auto 0 0;
  max-width: none;
  font-size: var(--mta-fs-small);
  font-weight: 700;
  color: var(--mta-ink-2);
}

.mta-sort__label {
  font-size: var(--mta-fs-small);
  color: var(--mta-ink-2);
}

.mta-sort__select {
  min-height: var(--mta-tap);
  padding: 8px 12px;
  font-size: var(--mta-fs-small);
  font-weight: 700;
  color: var(--mta-ink);
  background: #FFFFFF;
  border: 1px solid var(--mta-line);
  border-radius: var(--mta-radius-sm);
}
.mta-sort__select:focus-visible { outline: 2px solid var(--mta-accent); outline-offset: 1px; }

/* Hidden the moment the script binds the change handler, so the control is
   one step with JavaScript and two without, rather than broken without. */
.mta-sort__go { flex: 0 0 auto; }
.js-autosubmit .mta-sort__go { display: none; }

@media (max-width: 600px) {
  .mta-sort { gap: var(--mta-s2) var(--mta-s3); }
  .mta-sort__count { flex: 1 0 100%; margin-bottom: var(--mta-s1); }
  .mta-sort__select { flex: 1 1 auto; }
}

/* =========================================================================
   TOUR PRICE PANEL
   -------------------------------------------------------------------------
   Price and the two actions, directly under the quick facts. See the note in
   single-tour.php for why this exists; the short version is that the page
   buried its own price below eleven sections while showing a related trip's
   price above the fold.
   ========================================================================= */

/**
 * Shown only below 980px.
 *
 * Above that width .mta-tour__layout is a two-column grid and the aside sits
 * beside the content already carrying "Starts from $950 per person", "Check
 * dates and book" and WhatsApp. Measured on the live 4.1.9 build, the two
 * were 204px apart and said the same thing twice, which reads as a page that
 * has been edited by two people who were not talking to each other.
 *
 * At 980px the grid collapses to one column and the aside falls to the foot
 * of the page, past eleven sections. That is the width at which this panel
 * stops being a duplicate and starts being the only answer to the question
 * the visitor came with, so that is the width at which it appears.
 */
.mta-pricebar { display: none; }

@media (max-width: 980px) {
  .mta-pricebar { display: flex; }
}

.mta-pricebar {
  align-items: center;
  justify-content: space-between;
  flex-wrap: wrap;
  gap: var(--mta-s3) var(--mta-s5);
  margin: var(--mta-s4) 0 var(--mta-s5);
  padding: var(--mta-s4);
  background: #FFFFFF;
  border: 1px solid var(--mta-line);
  border-radius: var(--mta-radius);
  box-shadow: var(--mta-shadow-card);
}

.mta-pricebar__price {
  display: flex;
  align-items: baseline;
  flex-wrap: wrap;
  gap: 6px;
  min-width: 0;
}

.mta-pricebar__lead,
.mta-pricebar__unit {
  font-size: var(--mta-fs-small);
  color: var(--mta-ink-3);
}
.mta-pricebar__lead { font-style: italic; }

.mta-pricebar__amount {
  font-size: 24px;
  font-weight: 700;
  line-height: 1.1;
  color: var(--mta-price);
}

/* Not green. Green means "here is the number"; a trip without one would be
   teaching the eye that the colour means nothing in particular. */
.mta-pricebar__quote {
  font-size: 19px;
  font-weight: 700;
  line-height: 1.2;
  color: var(--mta-ink);
}

/* The unit line wraps under the price on a trip with no figure, where it is
   a full sentence rather than two words. */
.mta-pricebar__quote + .mta-pricebar__unit { flex: 1 0 100%; }

.mta-pricebar__actions {
  display: flex;
  align-items: center;
  gap: var(--mta-s2);
  flex-wrap: wrap;
}

@media (max-width: 600px) {
  .mta-pricebar { padding: var(--mta-s3); }
  .mta-pricebar__price,
  .mta-pricebar__actions { flex: 1 0 100%; }
  .mta-pricebar__actions .mta-btn { flex: 1 1 auto; justify-content: center; }
}

/* =========================================================================
   CHIP ROW
   -------------------------------------------------------------------------
   The flat row of destination and activity chips under the hero. The
   reference runs twelve of these immediately below its search bar, above
   everything else, and it is the most useful thing on that page: somebody
   arriving rarely knows what trip they want but almost always knows a name.

   It wraps rather than scrolls. A horizontal scroller hides half its
   contents behind a gesture nobody performs on a desktop, and the whole
   point of the row is that every option is visible at once.
   ========================================================================= */

.mta-chiprow {
  display: flex;
  flex-wrap: wrap;
  gap: var(--mta-s2);
  margin-top: var(--mta-s4);
}

.mta-chiprow .mta-chip { text-decoration: none; }

.mta-chip--more {
  gap: 4px;
  background: var(--mta-accent-tint);
  border-color: var(--mta-accent-line);
  color: var(--mta-accent);
}

/* -------------------------------------------------------------------------
   Hero headline
   -------------------------------------------------------------------------
   The headline now carries the catalogue count and runs longer than the four
   words it replaced, so it needs a measure. Without one it sets to the full
   hero width on a large screen and the eye loses the line ending.
   ------------------------------------------------------------------------- */

.mta-hero__title { max-width: 18ch; }

@media (min-width: 900px) {
  .mta-hero__title { max-width: 20ch; }
}

/* An eyebrow sitting directly above a band title should not also inherit the
   paragraph measure, or a short label wraps oddly at narrow widths. */
.mta-band .mta-eyebrow,
.mta-split .mta-eyebrow { max-width: none; }

/* Chip tap targets.
   -------------------------------------------------------------------------
   Measured at 390px on the live 4.3.0 build: 37px tall. The row is fine to
   read and awkward to hit, which matters more here than almost anywhere else
   on the site, because the chip row is the primary way somebody starts from
   a place name rather than reading the page.

   Padding rather than a fixed height, so a chip whose label wraps to two
   lines grows instead of clipping. The rule is scoped to coarse pointers:
   on a mouse, 37px is comfortable and a 44px row of chips is just bulkier
   for no gain.                                                             */
@media (pointer: coarse) {
  .mta-chip {
    min-height: 44px;
    padding-block: 11px;
  }
}

/* =========================================================================
   HERO VIDEO
   -------------------------------------------------------------------------
   Layered over the poster image, never instead of it. The poster is the
   largest contentful paint and stays that way; this sits on top at opacity 0
   and crossfades in once the browser reports it can play.

   Two details that matter more than they look:

   - The element carries its final geometry from the first frame, so adding
     it shifts nothing. object-fit: cover and an absolutely positioned box
     mean a video of any aspect ratio fills the hero without stretching and
     without contributing to CLS.
   - It is pointer-events: none. It is decoration sitting over a section that
     contains a search form and three buttons, and a full-bleed element that
     swallowed clicks on them would be a far worse bug than a missing video.
   ========================================================================= */

.mta-hero__video {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  object-fit: cover;
  z-index: 1;
  opacity: 0;
  pointer-events: none;
  background: transparent;
  transition: opacity 700ms ease;
}

.mta-hero__video.is-playing { opacity: 1; }

/* The scrim and the copy both have to stay above the video. The hero's own
   inner block is already at z-index 3; the scrim is a pseudo-element on the
   section and needs lifting explicitly or the video covers it and the
   headline loses its contrast. */
.mta-scrim::before,
.mta-scrim::after { z-index: 2; }

/* Belt and braces for the three cases the script already handles. If
   JavaScript never runs, the element has no src and nothing loads; these
   rules make sure it also never paints. */
@media (prefers-reduced-motion: reduce) {
  .mta-hero__video { display: none; }
}

@media (max-width: 899px) {
  .mta-hero__video { display: none; }
}