/*
 * 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 */
  --mta-miombo:        #1E4034;
  --mta-miombo-soft:   #2E5A4A;
  --mta-miombo-deep:   #12291F;
  --mta-ocean:         #0D5A56;
  --mta-ocean-soft:    #14746F;

  /* Action. Ochre on white reaches 4.6:1: buttons and large text only. */
  --mta-ochre:         #A85E14;
  --mta-ochre-hover:   #8C4D10;
  --mta-ochre-text:    #8F4F12;   /* small text on light grounds */
  --mta-ochre-wash:    #F6E9DC;

  /* Ink and ground */
  --mta-ink:           #14201A;
  --mta-ink-2:         #41504A;
  --mta-ink-3:         #62706A;
  --mta-ground:        #F5F7F3;
  --mta-surface:       #FFFFFF;
  --mta-surface-2:     #EDF0EA;
  --mta-line:          #DDE2D8;

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

  /* Type */
  --mta-font: "Onest", system-ui, -apple-system, "Segoe UI", Roboto, sans-serif;

  --mta-fs-display: clamp(2.1rem, 5vw, 2.9rem);
  --mta-fs-h1:      clamp(1.75rem, 3.6vw, 2.1rem);
  --mta-fs-h2:      clamp(1.3rem, 2.4vw, 1.5rem);
  --mta-fs-h3:      1.125rem;
  /* 17px body. 16px is the browser default and reads as a document; a
     travel site is read at length and the extra pixel is the difference
     between skimming and settling in. */
  --mta-fs-body:    1.0625rem;
  --mta-fs-small:   0.9rem;
  --mta-fs-label:   0.72rem;

  /* 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;

  --mta-radius:     10px;
  --mta-radius-sm:  7px;
  --mta-maxw:       1180px;
  --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.65;
  -webkit-font-smoothing: antialiased;
}

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

h1 { font-size: var(--mta-fs-h1); font-weight: 700; letter-spacing: -0.022em; line-height: 1.15; }
h2 { font-size: var(--mta-fs-h2); font-weight: 650; letter-spacing: -0.015em; line-height: 1.25; }
h3 { font-size: var(--mta-fs-h3); font-weight: 600; 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; }
}
@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.
   ========================================================================= */

:root {
  --mta-fs-h1: clamp(1.85rem, 5.2vw, 3.4rem);
  --mta-fs-h2: clamp(1.5rem, 3.2vw, 2.25rem);
  --mta-fs-h3: clamp(1.08rem, 1.6vw, 1.3rem);
}

.mta-band { padding: clamp(44px, 7vw, 104px) 0; }
.mta-hero__title { font-size: var(--mta-fs-h1); 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);
}
@media (max-width: 1119px) { .mta-header__mobile .mta-btn--pill { min-height: 44px; } }